:root {
  --accent: #2D7FF9;
  --radius: 10px;
  --transition: 0.25s ease;
  --bg: #0f1115;
  --card-bg: #161a20;
  --text: #e0e6f0;
  --text-soft: #aaa;
  --border: #2a2f36;
  --shadow: 0 4px 25px rgba(0,0,0,0.4);
}

body {
  margin: 0;
  background: var(--bg);
  font-family: "Inter", sans-serif;
  color: var(--text);
}

a {
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: var(--accent);
}


header {
  display:flex;
  justify-content:space-between;
  padding:12px 30px;
  background:var(--card-bg);
  border-bottom:1px solid var(--border);

  position: sticky;   /* <-- add this */
  top: 0;             /* <-- add this */
  z-index: 999999999;      /* <-- add this */
}

header .logo { font-size:1.4rem; font-weight:700; }
header nav a { margin-left:20px; color:white; font-weight:500; text-decoration:none; }


.section { padding:50px 20px; max-width:1200px; margin:auto; }

.table-responsive { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th { background:var(--accent); color:#fff; padding:12px; }
td { padding:10px; border-bottom:1px solid var(--border); }

.cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; }

.idea-card { background:var(--card-bg); padding:20px; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--border); color:white; }
.idea-card.closed { opacity:0.75; }
.idea-user { font-weight:700; margin-bottom:6px; }
.idea-pair { font-size:1.2rem; margin-bottom:10px; }
.idea-row { display:flex; justify-content:space-between; margin:4px 0; }

.buy { color:#00d26a; font-weight:bold; }
.sell { color:#ff4b4b; font-weight:bold; }

.tabs { display:flex; gap:10px; margin-bottom:20px; }
.tab { padding:10px 20px; border-radius:var(--radius); cursor:pointer; font-weight:600; transition: var(--transition); background: var(--card-bg); color:white; opacity:0.6; }
.tab.active { background:var(--accent); color:white !important; opacity:1; }

footer { padding:20px; text-align:center; border-top:1px solid var(--border); margin-top:50px; color:var(--text-soft); }

.btn { display:inline-block; padding:10px 25px; background:var(--accent); border:none; border-radius:var(--radius); color:white; font-weight:600; cursor:pointer; transition:var(--transition); }
.btn:hover { background:#1f5fc1; }

input { display:block; width:100%; padding:10px; margin:10px 0; border-radius:var(--radius); border:1px solid var(--border); background:var(--bg); color:white; }
.msg { color:#ff4b4b; font-weight:bold; }



/* ===== NEWS & CALENDAR (TWO ROWS IMPROVED) ===== */

.news-calendar {
  display: flex;
  flex-direction: column;   /* keep 2 rows */
  gap: 50px;                /* larger spacing between widgets */
}

.row-block {
  width: 100%;
}

/* Match Trading Ideas font style */
.row-block h3 {
  margin-bottom: 15px;
  font-size: 26px;          /* SAME size as section h2 titles */
  font-weight: 700;
  color: var(--text);
}

/* Widget container styling */
.news-widget,
.calendar-widget {
  width: 100%;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  padding: 0px;
  overflow: hidden;
}

/* Desktop — keep 2 rows */
@media (min-width: 992px) {
  .news-calendar {
    flex-direction: column;
  }
}

/* Mobile tweak */
@media (max-width: 600px) {
  .row-block h3 {
    text-align: center;
  }
}

/* ===== PAGINATION (MATCH LOGIN BUTTON) ===== */
.pagination {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 10px;
}

.pagination button {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 10px 22px;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition);
}

.pagination button:hover:not(:disabled) {
  background: #1f5fc1;
}

.pagination button.active {
  background: #1f5fc1;
  cursor: default;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: default;
}

.ideas-pagination {
  margin-top: 25px;
  text-align: center;
}

.ideas-pagination button {
  padding: 10px 20px;
  margin: 3px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  color: white;
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition);
}

.ideas-pagination button.active {
  background: #1f5fc1;
}

.ideas-pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ideas-pagination.hidden {
  display: none !important;
}


/* ===== TRADER PROFILES ===== */
.trader-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.trader-flag {
  font-size: 18px;
}

.trader-info {
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
  opacity: 0.9;
}

.trader-badge {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  margin-left: auto;
  color: white;
}

.badge-bronze  { background: #cd7f32; }
.badge-silver  { background: #c0c0c0; }
.badge-gold    { background: #d4af37; }
.badge-elite   { background: #7f00ff; }

/* ===== SIGNAL DESCRIPTION ===== */
.idea-description {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.3;
}

/* SIGNALS TABS (isolated from Trading Ideas) */
.signals-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.signal-tab {
    padding: 10px 18px;
    cursor: pointer;
    border-radius: 6px;
    background: #1e1e1e;
    color: #ddd;
    border: 1px solid #333;
    transition: .25s;
    font-weight: 600;
}

.signal-tab:hover {
    background: #2a2a2a;
}

.signal-tab.active {
    background: var(--accent);
    color: #fff;
}

/* ======= MOBILE RESPONSIVE ======= */
@media (max-width: 768px) {
  header {
    flex-direction: column;
    align-items: flex-start;
    padding: 15px;
  }
  header nav {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .cards-grid {
    grid-template-columns: 1fr;
  }

  table {
    font-size: 0.85rem;
  }

  .tabs {
    flex-direction: column;
  }

  .news-calendar {
    flex-direction: column;
  }
}
/* ===========================
   PREMIUM FULLSCREEN MENU
=========================== */

.mobile-menu-icon {
    display: none;
    font-size: 32px;
    cursor: pointer;
    color: white;
    z-index: 999999999; /* ensure icon clickable */
}

/* Fullscreen overlay */
#mobileMenuOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10,10,10,0.97);
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;

    z-index: 999999999; /* ULTRA SAFE */
}

#mobileMenuOverlay.active {
    opacity: 1;
    pointer-events: all;
}

/* Close button */
#mobileMenuOverlay .close-btn {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 34px;
    cursor: pointer;
    color: #fff;
}

/* Fullscreen menu links */
.mobile-menu-links {
    display: flex;
    flex-direction: column;
    gap: 25px;
    text-align: center;
}

.mobile-menu-links a {
    font-size: 28px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.mobile-menu-links a:hover {
    color: var(--accent);
    transform: scale(1.05);
}

/* Desktop vs Mobile */
@media (max-width: 768px) {
    .desktop-menu {
        display: none;
    }
    .mobile-menu-icon {
        display: block;
    }
}


/* ============================
   SUBSCRIPTION PLANS SECTION
============================ */

.plans-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
    margin-top: 40px;
}

.plan-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 25px;
    box-shadow: var(--shadow);
    text-align: center;
    color: var(--text);
    transition: transform .25s ease, box-shadow .25s ease;
}

.plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}

.plan-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: white;
	text-transform: uppercase;
}

.plan-price {
    font-size: 2rem;
    font-weight: 800;
    margin: 18px 0;
    color: var(--accent);
}

.plan-detail {
    margin: 8px 0;
    font-size: 0.95rem;
    color: var(--text-soft);
}

.plan-trial {
    margin-top: 12px;
    color: #00d26a;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Join Now button inside plan card */
.plan-btn {
    display: inline-block;
    margin-top: 22px;
    background: var(--accent);
    padding: 12px 25px;
    border-radius: var(--radius);
    color: white;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    width: 100%;
}

.plan-btn:hover {
    background: #1f5fc1;
}

/* For mobile stacking */
@media (max-width: 600px) {
    .plans-container {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .desktop-logo { display:none !important; }
    .mobile-logo { display:block !important; }
}
@media (min-width: 769px) {
    .desktop-logo { display:block !important; }
    .mobile-logo { display:none !important; }
}

/* ===== SOCIAL ICONS HEADER & FOOTER - FORCE WHITE ===== */
header .social-icons a,
header .social-icons a i,
footer .social-icons a,
footer .social-icons a i {
    color: #fff !important;   /* Force white */
    font-size: 22px;
    transition: 0.25s ease;
}

/* Hover colors for brand consistency */
header .social-icons a.facebook:hover,
header .social-icons a.facebook:hover i,
footer .social-icons a.facebook:hover,
footer .social-icons a.facebook:hover i { color: #FFFFFF !important; }

header .social-icons a.instagram:hover,
header .social-icons a.instagram:hover i,
footer .social-icons a.instagram:hover,
footer .social-icons a.instagram:hover i { color: #FFFFFF !important; }

header .social-icons a.youtube:hover,
header .social-icons a.youtube:hover i,
footer .social-icons a.youtube:hover,
footer .social-icons a.youtube:hover i { color: #FFFFFF !important; }

header .social-icons a.tiktok:hover,
header .social-icons a.tiktok:hover i,
footer .social-icons a.tiktok:hover,
footer .social-icons a.tiktok:hover i { color: #FFFFFF !important; }

header .social-icons a.linkedin:hover,
header .social-icons a.linkedin:hover i,
footer .social-icons a.linkedin:hover,
footer .social-icons a.linkedin:hover i { color: #FFFFFF !important; }

header .social-icons a.twitter:hover,
header .social-icons a.twitter:hover i,
footer .social-icons a.twitter:hover,
footer .social-icons a.twitter:hover i { color: #FFFFFF !important; }

header .social-icons a.x:hover,
header .social-icons a.x:hover i,
footer .social-icons a.x:hover,
footer .social-icons a.x:hover i { color: #FFFFFF !important; }

/* FINAL FIX: STOP HEADER FROM OVERFLOWING */
@media (max-width: 768px) {

    header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 15px !important;
        width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Logo auto-resizes so it cannot push hamburger out */
    header img,
    .site-logo {
        max-width: 140px !important;
        height: auto !important;
    }

    /* Social icons truly removed */
    header .social-icons {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    /* Desktop menu hidden */
    .desktop-menu {
        display: none !important;
    }

    /* Hamburger ALWAYS stays inside viewport */
    .mobile-menu-icon {
        display: block !important;
        margin-left: auto !important;
        font-size: 32px !important;
        color: #fff !important;
        cursor: pointer;
        position: relative !important;
        right: 0 !important;
    }
}
/* DESKTOP HEADER PERFECT ALIGNMENT */
@media (min-width: 769px) {

    header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;  /* vertical center */
        justify-content: space-between !important;
        padding: 12px 30px !important;
        height: 70px;  /* ensures consistent vertical alignment */
        box-sizing: border-box;
    }

    /* LOGO */
    header img,
    .site-logo,
    .desktop-logo {
        display: block;
        height: 50px;
        width: auto;
        object-fit: contain;
    }

    /* MENU — inline with logo */
    .desktop-menu {
        display: flex !important;
        flex-direction: row;
        align-items: center !important;
        gap: 20px;
        margin-left: 30px;
    }

    /* SOCIAL ICONS — inline with menu */
    header .social-icons {
        display: flex !important;
        align-items: center !important;
        gap: 15px;
        margin-left: 30px;
    }
}

/* Blur layer for Signals only */
#signals .signal-blur {
    filter: blur(6px);
    pointer-events: none;
    opacity: 0.5;
}

/* Overlay container */
.signals-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); /* semi-transparent */
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999 !important;
}

/* Access box */
.signals-access-box {
    position: relative;       /* REQUIRED for absolute X */
    background: #111;         /* dark box for visibility */
    color: #fff;
    padding: 25px;
    border-radius: 10px;
    width: 90%;
    max-width: 400px;
    text-align: center;
	z-index: 10000 !important;
}

/* X button */
.overlay-close {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #181a1f;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 18px;
    cursor: pointer;
    z-index: 10001;
    line-height: 28px;
    text-align: center;
}
.cards-grid.signal-blur {
    position: relative;
}

/* Make the grid a positioning container */
#signals-buy,
#signals-sell {
    position: relative;
    min-height: 250px; /* ensures overlay shows even before cards load */
}

/* Overlay text visible on top of blurred cards */
.signals-wrapper {
    position: relative;
}

.real-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5000; /* LOWER than login modal */
    background: rgba(0,0,0,0.55);
    padding: 18px 25px;
    border-radius: 10px;
    text-align: center;
    font-size: 1.1rem;
    color: #fff;
    width: 90%;
    max-width: 420px;
    pointer-events: auto;
}

.real-overlay a {
    color: #00c8ff;
    font-weight: bold;
    cursor: pointer;
}

/* Mobile adjustments */
@media screen and (max-width: 480px) {
    .signal-overlay-text a {
        font-size: 0.9rem;
        padding: 10px 15px;
    }
}

@media (max-width: 480px) {
    .overlay-close {
        top: 8px !important;
        right: 50% !important;
        transform: translateX(50%) !important;
        width: 32px;
        height: 32px;
        font-size: 20px;
        line-height: 32px;
    }
}

/* ===== AI Neural Grid ===== */
.ai-grid {
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    background:
        linear-gradient(0deg, rgba(45,127,249,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(45,127,249,0.04) 1px, transparent 1px);
    background-size: 70px 70px;
    animation: gridMove 18s linear infinite;
    opacity:0.25;
    filter:blur(1px);
}

@keyframes gridMove {
    0% { transform: translateY(0) translateX(0); }
    100% { transform: translateY(-140px) translateX(-80px); }
}

/* ===== AI Pulse Lines (brainwaves) ===== */
.ai-pulses {
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    background: repeating-linear-gradient(
        to bottom,
        rgba(45,127,249,0.05),
        rgba(45,127,249,0.05) 2px,
        transparent 2px,
        transparent 12px
    );
    animation: pulseMove 3s linear infinite;
    opacity:0.3;
}

@keyframes pulseMove {
    0% { transform: translateY(0); }
    100% { transform: translateY(-12px); }
}

/* ===== Micro Neurons ===== */
.ai-neurons {
    position:absolute;
    width:100%; height:100%;
    pointer-events:none;
}
.ai-neurons::before, .ai-neurons::after {
    content:"";
    position:absolute;
    width:8px; height:8px;
    border-radius:50%;
    background:#2D7FF9;
    opacity:0.2;
    animation: neuronBlink 3s infinite;
}
.ai-neurons::before { top:25%; left:15%; animation-delay:0s; }
.ai-neurons::after { top:65%; left:70%; animation-delay:1.5s; }

@keyframes neuronBlink {
    0%,100% { opacity:0.2; transform: scale(1); }
    50% { opacity:0.8; transform: scale(1.5); }
}

/* ===== Flash pulses (order execution) ===== */
.ai-flashes {
    position:absolute;
    width:100%; height:100%;
    pointer-events:none;
    background: radial-gradient(circle, rgba(0,174,255,0.15) 0%, transparent 70%);
    animation: flashPulse 5s linear infinite;
}

@keyframes flashPulse {
    0% { transform: translateX(0) scale(0.5); opacity:0; }
    50% { transform: translateX(50%) scale(1); opacity:0.25; }
    100% { transform: translateX(100%) scale(0.5); opacity:0; }
}

/* ===== Floating FX Prices ===== */
.fx-prices {
    position:absolute;
    width:100%; height:100%;
    pointer-events:none;
}
.fx-prices span {
    position:absolute;
    font-family: monospace;
    color:#2D7FF9;
    font-weight:700;
    font-size:1rem;
    opacity:0.15;
    animation: fxFloat linear infinite;
}
.fx-prices span:nth-child(1) { animation-duration:10s; }
.fx-prices span:nth-child(2) { animation-duration:12s; }
.fx-prices span:nth-child(3) { animation-duration:14s; }
.fx-prices span:nth-child(4) { animation-duration:16s; }
.fx-prices span:nth-child(5) { animation-duration:18s; }
.fx-prices span:nth-child(6) { animation-duration:11s; }
.fx-prices span:nth-child(7) { animation-duration:13s; }
.fx-prices span:nth-child(8) { animation-duration:15s; }
.fx-prices span:nth-child(9) { animation-duration:17s; }
.fx-prices span:nth-child(10) { animation-duration:19s; }
.fx-prices span:nth-child(11) { animation-duration:12s; }
.fx-prices span:nth-child(12) { animation-duration:14s; }
.fx-prices span:nth-child(13) { animation-duration:16s; }
.fx-prices span:nth-child(14) { animation-duration:18s; }
.fx-prices span:nth-child(15) { animation-duration:10s; }
.fx-prices span:nth-child(16) { animation-duration:12s; }
.fx-prices span:nth-child(17) { animation-duration:14s; }
.fx-prices span:nth-child(18) { animation-duration:16s; }
.fx-prices span:nth-child(19) { animation-duration:18s; }
.fx-prices span:nth-child(20) { animation-duration:20s; }
.fx-prices span:nth-child(21) { animation-duration:11s; }
.fx-prices span:nth-child(22) { animation-duration:13s; }
.fx-prices span:nth-child(23) { animation-duration:15s; }
.fx-prices span:nth-child(24) { animation-duration:17s; }
.fx-prices span:nth-child(25) { animation-duration:19s; }
.fx-prices span:nth-child(26) { animation-duration:12s; }
.fx-prices span:nth-child(27) { animation-duration:14s; }
.fx-prices span:nth-child(28) { animation-duration:16s; }
.fx-prices span:nth-child(29) { animation-duration:18s; }
.fx-prices span:nth-child(30) { animation-duration:20s; }

@keyframes fxFloat {
    0% { transform: translateY(0); opacity:0.15; }
    50% { transform: translateY(-25px) scale(1.05); opacity:0.35; }
    100% { transform: translateY(0); opacity:0.15; }
}

/* ----------------------------------------- */
/* HEADERS ROW (DESKTOP)                     */
/* ----------------------------------------- */
.login-headers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    margin-bottom: 20px;
}

/* Desktop ForexLab alignment */
.login-headers .forexlab-header {
    text-align: left !important;
    margin-left: 20px;
}

/* Mobile-only titles are hidden by default */
.user-access-mobile-title,
.forexlab-header-mobile {
    display: none;
}

/* ----------------------------------------- */
/* TWO COLUMN LAYOUT (DESKTOP)               */
/* ----------------------------------------- */
.login-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

/* ----------------------------------------- */
/* LEFT COLUMN FORM                           */
/* ----------------------------------------- */
#auth-container form input,
#auth-container form button {
    width: 100%;
    box-sizing: border-box;
}

/* ----------------------------------------- */
/* RIGHT COLUMN CARD                         */
/* ----------------------------------------- */
.login-preview {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 25px;
    box-shadow: var(--shadow);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
}

/* FOREXLAB POST LIST */
.forexlab-fancy-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.forexlab-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #1f232a;
}

.post-num {
    width: 34px;
    height: 34px;
    background: var(--accent);
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 10px rgba(45,127,249,0.5);
}

.post-text {
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    opacity: 0.9;
    line-height: 1.3;
    flex: 1;
}

.forexlab-item:hover {
    border-color: var(--accent);
    transform: translateX(4px);
    transition: 0.25s ease;
}

/* ----------------------------------------- */
/* OVERLAY FOR HOVER / TAP                    */
/* ----------------------------------------- */
.login-preview-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    font-size: 1.2rem;
    font-weight: 700;
    padding: 20px;
    text-align: center;
    pointer-events: none;
    transition: 0.25s ease;
}

.login-preview:hover .login-preview-overlay,
.login-preview.active .login-preview-overlay {
    opacity: 1;
    pointer-events: auto;
}

.login-preview:hover .preview-inner,
.login-preview.active .preview-inner {
    filter: blur(4px);
    opacity: 0.25;
}

/* ----------------------------------------- */
/* DESKTOP MOBILE ORDER STYLING               */
/* ----------------------------------------- */
.forexlab-header {
    text-align: left !important;
}

/* ----------------------------------------- */
/* MOBILE LAYOUT (STACKED, RIGHT FIRST)      */
/* ----------------------------------------- */
@media (max-width: 768px) {

    /* Hide desktop headers */
    .login-headers {
        display: none;
    }

    /* Mobile Admin ForexLab title */
    .forexlab-header-mobile {
        display: block;
        font-size: 1.6rem;
        font-weight: 700;
        color: #e0e6f0;
        margin-bottom: 10px;
        padding: 0 15px;
        text-align: left;
    }

    /* Mobile User Access title */
    .user-access-mobile-title {
        display: block;
        font-size: 1.6rem;
        font-weight: 700;
        color: #e0e6f0;
        margin-bottom: 15px;
        text-align: left;
        padding: 0 15px;
    }

    /* Switch to one column */
    .login-two-col {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* RIGHT COLUMN FIRST */
    .login-preview {
        order: 1;
        width: 100%;
        max-width: 100%;
        padding: 0 15px 20px 15px;
        box-sizing: border-box;
        margin: 0;
    }

    /* LEFT COLUMN SECOND */
    #auth-container {
        order: 2;
        width: 100%;
    }

    /* Login form inputs/buttons full width */
    #auth-container form input,
    #auth-container form button {
        width: 100%;
        box-sizing: border-box;
    }

    .login-preview .preview-inner {
        padding: 10px 0;
    }
}

/* ============================
   PERFORMANCE — METRICS ROW
============================ */
/* ============================
   METRICS SCROLL ROW
============================ */
.performance-row-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.performance-row-scroll::-webkit-scrollbar { height: 6px; }
.performance-row-scroll::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 10px; }

.p-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    min-width: 200px;
    box-shadow: var(--shadow);
    flex: 0 0 200px;
    scroll-snap-align: start;
    transition: .25s ease;
}
.p-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
}

.p-card h3 {
    margin-top: 8px;
    font-size: 1.55rem;
    color: white;
    animation: popIn 0.4s ease;
}
@keyframes popIn {
    0% { transform: scale(0.5); opacity:0; }
    100% { transform: scale(1); opacity:1; }
}

.p-card.green h3 { color:#00d26a; }
.p-card.red h3 { color:#ff4b4b; }

/* ============================
   CHART ROW
============================ */
.charts-row {
    display: flex;
    gap: 22px;
    margin-top: 35px;
    flex-wrap: nowrap;
}

.chart-box {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    flex: 1;
    min-width: 340px;
    box-shadow: var(--shadow);
    transition: 0.35s ease;
    height: 350px; /* ensures consistent height */
    position: relative;
}

.chart-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(45,127,249,0.35);
}

.chart-box h3 {
    color: white;
    text-align: center;
    font-size: 1.27rem;
    margin-bottom: 12px;
}

.chart-canvas {
    width: 100% !important;
    height: 100% !important;
}

/* ============================
   MOBILE FIX — CENTER & SPACING
============================ */
@media (max-width: 900px) {

    /* Center whole row */
    .charts-row {
        flex-direction: column;
        gap: 28px;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0 16px; /* equal left/right spacing */
        box-sizing: border-box;
    }

    /* Center each chart box */
    .chart-box {
        width: 100%;
        max-width: 480px;     /* keeps nice spacing on both sides */
        margin: 0 auto;       /* perfect centering */
        height: 330px;
        padding: 18px;
        box-sizing: border-box;
    }

    /* Prevent stretched or squeezed canvases */
    .chart-box canvas {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1;  /* keeps donut perfectly round */
    }

}

/* Ultra small screens */
@media (max-width: 480px) {

    .charts-row {
        padding: 0 14px; /* maintain equal left/right spacing */
    }

    .chart-box {
        max-width: 100%;
        padding: 14px;
        height: auto;
    }

    .chart-box canvas {
        aspect-ratio: 1 / 1; /* ensure pie stays round */
    }
}