/* ── PORTAL LAYOUT RULES (from original inline styles) ────── */

    body{background:var(--light-bg)}
    /* CRYPTO TICKER */
    .crypto-ticker{background:var(--text-dark);height:38px;overflow:hidden;position:relative;z-index:3100}
    .ticker-inner{display:flex;animation:tickerScroll 40s linear infinite;white-space:nowrap;height:100%;align-items:center}
    .ticker-item{display:inline-flex;align-items:center;gap:8px;padding:0 26px;font-size:12px;font-weight:700;letter-spacing:.5px;font-family:'Outfit',sans-serif;color:rgba(255,255,255,.65);border-right:1px solid rgba(255,255,255,.07)}
    .ticker-item .coin{color:#fff;font-size:13px}.ticker-item .price{color:var(--yellow)}.ticker-item .up{color:#00e676}.ticker-item .down{color:#ff5252}
    @keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
    /* PORTAL NAV */
    .portal-nav{height:58px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 5%;position:fixed;top:38px;left:0;right:0;z-index:2000;box-shadow:0 2px 16px rgba(0,150,50,.07)}
    .portal-nav .logo-text{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:3px;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
    .portal-nav .logo-text .x{color:var(--green)}.portal-nav .logo-text .rest{color:var(--text-dark)}
    .portal-nav .nav-logo-img{height:28px;width:auto}
    .portal-nav-links{display:flex;align-items:center;gap:4px;list-style:none}
    .portal-nav-links a{color:var(--text-mid);font-size:13px;font-weight:600;padding:7px 13px;border-radius:8px;transition:var(--transition);text-decoration:none}
    /* Nav bar switches to dark mode while the dashboard is visible (matches the
       dashboard's #070d1a dark background). FIX: previously only the link text
       turned white with no background change, making links invisible (white on
       white) — now the nav itself also goes dark so text is actually readable. */
    .portal-nav.dark-mode{background:#070d1a;border-bottom-color:rgba(255,255,255,0.08)}
    .portal-nav.dark-mode .portal-nav-links a{color:rgba(255,255,255,0.85)}
    .portal-nav.dark-mode .portal-nav-links a:hover{color:#fff;background:rgba(255,255,255,0.1)}
    .portal-nav.dark-mode .logo-text .x{color:var(--green)}
    .portal-nav.dark-mode .logo-text .rest{color:#fff}
    .portal-nav.dark-mode #portalHam span{background:#fff}
    .portal-nav-links a:hover{color:var(--green);background:rgba(0,200,83,.08)}
    .portal-nav-right{display:flex;align-items:center;gap:10px}
    .portal-ham{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:4px;cursor:pointer}
    .portal-ham span{display:block;width:22px;height:2px;background:var(--text-dark);border-radius:2px;transition:.3s}
    /* Mobile nav dropdown */
    .portal-mobile-nav{display:none;position:absolute;top:58px;left:0;right:0;background:#fff;border-bottom:1px solid var(--border);padding:16px 5%;flex-direction:column;gap:4px;box-shadow:0 8px 24px rgba(0,150,50,.1);z-index:1999}
    .portal-mobile-nav.open{display:flex}
    .portal-mobile-nav a{color:var(--text-mid);font-size:14px;font-weight:600;padding:11px 14px;border-radius:10px;text-decoration:none;transition:background .2s,color .2s}
    .portal-mobile-nav a:hover{color:var(--green);background:rgba(0,200,83,.08)}
    .portal-mobile-nav .pnav-signin{background:var(--grad-main);color:#111 !important;text-align:center;font-weight:800;margin-top:6px}
    .portal-ham span{display:block;width:22px;height:2px;background:var(--text-dark);border-radius:2px;transition:all .3s}
    .portal-ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .portal-ham.open span:nth-child(2){opacity:0}
    .portal-ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
    /* PORTAL LAYOUT */
    .portal-layout{display:grid;grid-template-columns:256px 1fr;min-height:calc(100vh - 58px);margin-top:96px}
    .sidebar{background:#fff;border-right:1px solid var(--border);padding:24px 0;display:flex;flex-direction:column;position:sticky;top:96px;height:calc(100vh - 96px);overflow-y:auto}
    .sidebar .user-block{padding:0 20px 20px;border-bottom:1px solid var(--border);margin-bottom:10px;text-align:center}
    .sidebar .avatar{width:68px;height:68px;border-radius:50%;background:var(--grad-main);margin:0 auto 10px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:26px;color:var(--text-dark);border:3px solid var(--border)}
    .sidebar .avatar img{width:100%;height:100%;object-fit:cover}
    .sidebar .uname{font-weight:800;font-size:15px;color:var(--text-dark)}
    .sidebar .urole{font-size:12px;color:var(--text-muted)}
    .sidebar .ubalance{font-family:'Bebas Neue',sans-serif;font-size:22px;color:var(--green);letter-spacing:1px;margin-top:6px}
    .sb-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);padding:10px 24px 4px}
    .sb-nav{list-style:none;padding:0 10px}
    .sb-nav li a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;font-size:13px;font-weight:600;color:var(--text-mid);transition:var(--transition);text-decoration:none;cursor:pointer}
    .sb-nav li a:hover,.sb-nav li a.active{background:rgba(0,200,83,.08);color:var(--green)}
    .sb-nav li a .si{font-size:16px;width:20px;flex-shrink:0}
    .sb-sep{height:1px;background:var(--border);margin:8px 12px}
    .sb-nav li a .badge-new{background:var(--grad-main);color:var(--text-dark);font-size:9px;font-weight:800;padding:2px 7px;border-radius:50px;margin-left:auto;letter-spacing:.5px}
    /* DASH MAIN */
    .dash-main{padding:30px;background:var(--light-bg)}
    .dash-greeting{margin-bottom:20px}
    .dash-greeting small{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted)}
    .dash-greeting h2{font-family:'Bebas Neue',sans-serif;font-size:30px;letter-spacing:2px;color:var(--text-dark)}
    /* BALANCE CARD */
    .balance-card{background:linear-gradient(135deg,var(--green-dark),var(--green-mid));border-radius:20px;padding:26px;margin-bottom:18px;position:relative;overflow:hidden;box-shadow:0 8px 32px rgba(0,150,50,.3)}
    .balance-card::before{content:'';position:absolute;right:-30px;top:-30px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.1)}
    .balance-card::after{content:'';position:absolute;right:50px;bottom:-50px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.06)}
    .bal-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.68);margin-bottom:6px}
    .bal-amount{font-family:'Bebas Neue',sans-serif;font-size:50px;letter-spacing:2px;color:#fff;line-height:1;margin-bottom:4px}
    .bal-btc{font-size:13px;color:rgba(255,255,255,.55);margin-bottom:18px}
    .bal-actions{display:flex;gap:10px;flex-wrap:wrap}
    .bal-btn{padding:10px 22px;border-radius:50px;border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.14);color:#fff;font-size:13px;font-weight:700;transition:var(--transition);backdrop-filter:blur(8px);font-family:'Outfit',sans-serif;cursor:pointer}
    .bal-btn:hover{background:rgba(255,255,255,.26);border-color:#fff}
    .bal-btn.primary-btn{background:var(--yellow);border-color:var(--yellow);color:var(--text-dark)}
    .bal-btn.primary-btn:hover{background:#ffe033}
    /* STATS ROW */
    .stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:20px}
    .stat-mini{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px;text-align:center;box-shadow:var(--shadow);transition:var(--transition)}
    .stat-mini:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,150,50,.12);border-color:var(--green)}
    .stat-mini .sv{font-family:'Bebas Neue',sans-serif;font-size:26px;color:var(--green);letter-spacing:1px}
    .stat-mini .sl{font-size:10px;color:var(--text-muted);letter-spacing:1px;text-transform:uppercase;margin-top:2px}
    .stat-mini .sd{font-size:11px;margin-top:2px;font-weight:700}
    .sd.up{color:#00c853}.sd.down{color:#ff5252}.sd.neutral{color:var(--text-muted)}
    /* PLANS */
    .plans-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:20px}
    .plan-card{background:#fff;border:2px solid rgba(0,200,83,.18);border-radius:16px;padding:20px 14px;text-align:center;transition:var(--transition);position:relative;box-shadow:var(--shadow)}
    .plan-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad-main);border-radius:4px 4px 0 0}
    .plan-card:hover{transform:translateY(-5px);border-color:var(--green);box-shadow:0 14px 36px rgba(0,150,50,.18)}
    .plan-card.popular{border-color:var(--green);background:linear-gradient(to bottom,#f4fff7,#fff)}
    .plan-letter{font-family:'Bebas Neue',sans-serif;font-size:48px;color:var(--green);line-height:1;margin-bottom:2px}
    .plan-name{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px}
    .plan-range{font-size:13px;font-weight:700;color:var(--text-dark);margin-bottom:5px}
    .plan-roi{font-family:'Bebas Neue',sans-serif;font-size:30px;color:var(--green);letter-spacing:1px}
    .plan-roi-label{font-size:10px;color:var(--text-muted);margin-bottom:7px;letter-spacing:.5px}
    .plan-dur{font-size:11px;color:var(--text-muted);background:rgba(0,200,83,.08);border-radius:50px;padding:4px 10px;display:inline-block;margin-bottom:13px}
    .plan-cta{display:block;padding:9px;background:var(--grad-main);border:none;border-radius:50px;color:var(--text-dark);font-size:12px;font-weight:800;cursor:pointer;transition:all .3s;font-family:'Outfit',sans-serif;text-decoration:none}
    .plan-cta:hover{transform:scale(1.04);box-shadow:0 6px 16px rgba(0,200,83,.4)}
    /* TABLES */
    .table-card{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:18px}
    .table-head{padding:16px 22px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)}
    .table-head h3{font-size:16px;font-weight:800;color:var(--text-dark)}
    .table-head a{font-size:12px;color:var(--green);text-decoration:none;font-weight:700;cursor:pointer}
    .table-search{padding:10px 22px;border-bottom:1px solid var(--border)}
    .table-search input{background:var(--light-bg);border:1px solid var(--border);border-radius:10px;padding:9px 14px;color:var(--text-dark);font-size:13px;font-family:'DM Sans',sans-serif;width:100%;max-width:290px;outline:none;transition:var(--transition)}
    .table-search input:focus{border-color:var(--green);background:#fff}
    .data-table{width:100%;border-collapse:collapse}
    .data-table th{padding:11px 22px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);text-align:left;border-bottom:1px solid var(--border);background:var(--light-bg)}
    .data-table td{padding:13px 22px;font-size:14px;border-bottom:1px solid rgba(0,200,83,.05);color:var(--text-dark)}
    .data-table tr:last-child td{border-bottom:none}
    .data-table tr:hover td{background:rgba(0,200,83,.025)}
    .badge{padding:4px 12px;border-radius:50px;font-size:11px;font-weight:700}
    .badge-running{background:rgba(0,200,83,.12);color:var(--green);border:1px solid rgba(0,200,83,.28)}
    .badge-pending{background:rgba(255,214,0,.15);color:#c68900;border:1px solid rgba(255,214,0,.28)}
    .badge-done{background:rgba(0,0,0,.05);color:var(--text-muted);border:1px solid rgba(0,0,0,.08)}
    .plan-tag{background:rgba(0,200,83,.1);border:1px solid rgba(0,200,83,.22);padding:3px 10px;border-radius:50px;font-size:12px;font-weight:700;color:var(--green)}
    /* AUTH PAGE */
    .auth-wrap{min-height:calc(100vh - 96px);margin-top:96px;display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
    .auth-hero{position:relative;overflow:hidden}
    .auth-hero-bg{position:absolute;inset:0;background-image:url('images/portal-hero-bg.png');background-size:cover;background-position:center;z-index:0}
    .auth-hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,70,28,.9),rgba(0,180,70,.78));z-index:1}
    .auth-hero-inner{position:relative;z-index:2;padding:60px;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
    .auth-hero-inner h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(36px,4vw,56px);letter-spacing:3px;color:#fff;line-height:1;margin-bottom:14px}
    .auth-hero-inner p{font-size:15px;color:rgba(255,255,255,.78);max-width:360px;line-height:1.75;margin-bottom:30px}
    .auth-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:360px}
    .astat{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(10px);padding:14px;border-radius:12px;transition:all .3s}
    .astat:hover{background:rgba(255,255,255,.18)}
    .astat .av{font-family:'Bebas Neue',sans-serif;font-size:22px;color:var(--yellow);display:block;letter-spacing:1px}
    .astat .al{font-size:11px;color:rgba(255,255,255,.52);letter-spacing:.5px;text-transform:uppercase;margin-top:2px}
    .auth-panel{background:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:60px 50px;overflow-y:auto}
    .auth-box{width:100%;max-width:420px}
    .auth-brand{text-align:center;margin-bottom:28px}
    .auth-logo{font-family:'Bebas Neue',sans-serif;font-size:32px;letter-spacing:5px;margin-bottom:6px;display:block}
    .auth-logo .x{color:var(--green)}.auth-logo .rest{color:var(--text-dark)}
    .auth-brand p{font-size:13px;color:var(--text-muted)}
    .tab-row{display:flex;background:var(--light-bg);border:1px solid var(--border);border-radius:50px;padding:4px;margin-bottom:22px;gap:3px}
    .tab-btn{flex:1;padding:9px;border-radius:50px;background:transparent;border:none;color:var(--text-muted);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all .35s;font-family:'Outfit',sans-serif}
    .tab-btn.active{background:var(--grad-main);color:var(--text-dark);box-shadow:0 4px 14px rgba(0,200,83,.32)}
    .form-panel{display:flex;flex-direction:column;gap:12px}
    .form-panel.hidden{display:none}
    .field-wrap{position:relative}
    .field-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:14px;pointer-events:none}
    .field-wrap input,.field-wrap select{width:100%;padding:13px 16px 13px 42px;background:var(--light-bg);border:1.5px solid var(--border);border-radius:12px;font-size:14px;color:var(--text-dark);font-family:'DM Sans',sans-serif;transition:all .3s;outline:none}
    .field-wrap input:focus,.field-wrap select:focus{border-color:var(--green);background:#fff;box-shadow:0 0 0 3px rgba(0,200,83,.1)}
    .field-wrap input::placeholder{color:#aab}
    .field-wrap .toggle-pw{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;font-size:14px;color:var(--text-muted);cursor:pointer}
    .forgot-link{display:block;text-align:right;font-size:12px;color:var(--green);text-decoration:none}
    .submit-btn{width:100%;padding:14px;background:var(--grad-main);border:none;border-radius:50px;color:var(--text-dark);font-size:15px;font-weight:800;cursor:pointer;font-family:'Outfit',sans-serif;transition:all .4s;box-shadow:0 6px 20px rgba(0,200,83,.28);letter-spacing:.3px}
    .submit-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,200,83,.45)}
    .divider{text-align:center;color:var(--text-muted);font-size:13px;position:relative}
    .divider::before,.divider::after{content:'';position:absolute;top:50%;width:42%;height:1px;background:var(--border)}
    .divider::before{left:0}.divider::after{right:0}
    .switch-text{text-align:center;font-size:13px;color:var(--text-muted)}
    .switch-text a{color:var(--green);text-decoration:none;font-weight:700}
    .avatar-upload{text-align:center}
    .avatar-circle{width:80px;height:80px;border-radius:50%;background:var(--grad-main);border:3px solid var(--border);margin:0 auto 8px;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s;position:relative}
    .avatar-circle:hover{transform:scale(1.06);box-shadow:0 6px 20px rgba(0,200,83,.3)}
    .avatar-circle img{width:100%;height:100%;object-fit:cover}
    .avatar-placeholder{font-size:30px;color:rgba(255,255,255,.8)}
    .avatar-overlay{position:absolute;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s;border-radius:50%}
    .avatar-circle:hover .avatar-overlay{opacity:1}
    .avatar-hint{font-size:11px;color:var(--text-muted);letter-spacing:.5px;margin-bottom:8px}
    #avatarInput{display:none}
    .name-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .trust-badges{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:16px}
    .trust-badge{font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:4px}
    /* Google Sign-In / Sign-Up button (placeholder until Supabase OAuth is connected — see HTML comments) */
    .google-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:13px 16px;background:#fff;border:1.5px solid var(--border);border-radius:12px;font-size:14px;font-weight:700;color:var(--text-dark);cursor:pointer;transition:all .25s;margin-bottom:14px;font-family:'DM Sans',sans-serif}
    .google-btn:hover{border-color:var(--green);background:rgba(0,200,83,0.04)}
    .google-g{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:conic-gradient(from -45deg,#EA4335 0deg 90deg,#FBBC05 90deg 180deg,#34A853 180deg 270deg,#4285F4 270deg 360deg);color:#fff;font-size:11px;font-weight:800;font-family:Arial,sans-serif}
    /* PANEL SECTION HEADING */
    .panel-section-title{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:2px;color:var(--text-dark);margin-bottom:18px}
    /* MINI CHART BARS */
    .chart-legend{display:flex;gap:20px;margin-top:8px;flex-wrap:wrap}
    .chart-legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted)}
    .chart-legend-dot{width:10px;height:10px;border-radius:50%}
    /* Portfolio Overview bar chart — was previously unstyled (zero height / invisible) */
    .portfolio-chart-wrap{background:#fff;border:1px solid var(--border);border-radius:18px;padding:26px;margin-bottom:24px}
    .portfolio-chart-wrap h3{font-size:15px;font-weight:800;color:var(--text-dark);margin-bottom:18px}
    .mini-chart{display:flex;align-items:flex-end;gap:8px;height:220px;padding:0 4px}
    .mini-bar-label{font-size:10px;color:var(--text-muted);margin-top:8px;font-weight:600}
    @media(max-width:600px){.mini-chart{height:160px;gap:4px}.mini-bar-label{font-size:8px}}
    @media(max-width:900px){
      .auth-wrap{grid-template-columns:1fr}.auth-hero{display:none}
      .auth-panel{min-height:calc(100vh - 58px);padding:40px 24px}
      .portal-layout{grid-template-columns:1fr}
      .sidebar{display:none;position:fixed;left:0;top:96px;bottom:0;width:268px;z-index:3000;box-shadow:4px 0 24px rgba(0,150,50,.12);transform:translateX(-100%);transition:transform .3s}
      .sidebar.open{display:flex;transform:translateX(0);pointer-events:auto}
      .sidebar.open .sb-nav a{pointer-events:auto !important;position:relative;z-index:1;display:block;cursor:pointer}
      .stats-row{grid-template-columns:1fr 1fr}
      .plans-grid{grid-template-columns:1fr 1fr}
      .portal-ham{display:flex}
      .portal-nav-links{display:none}
      .portal-nav-right .btn-primary{display:none}
      .dash-main{padding:16px}
      .balance-card{padding:20px}
      .bal-amount{font-size:36px}
      .bal-actions{gap:8px}
      .bal-btn{padding:8px 14px;font-size:11px}
      .portal-ham{display:flex}
    }
    @media(max-width:480px){
      .stats-row{grid-template-columns:1fr 1fr}
      .plans-grid{grid-template-columns:1fr 1fr}
      .plan-letter{font-size:32px}
      .plan-roi{font-size:22px}
      .plan-range{font-size:11px}
      .dash-main{padding:10px}
      .invest-status-card{padding:18px}
      .isc-title{font-size:9px}
      .plan-card{padding:16px 12px}
      .bal-amount{font-size:28px}
      .d-stat-grid{grid-template-columns:1fr 1fr}
      .wallet-grid{grid-template-columns:1fr 1fr}
    }
  
    /* ---- INVEST MODAL ---- */
    .xd-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:9000;display:none;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .25s}
    .xd-modal-backdrop.show{opacity:1}
    /* Loan term option cards */
    .loan-term-opt{border:2px solid var(--border);border-radius:12px;padding:14px 10px;text-align:center;font-size:14px;font-weight:800;color:var(--text-mid);transition:border-color .2s,background .2s,color .2s;cursor:pointer}
    .loan-term-opt:hover{border-color:var(--green);color:var(--green);background:rgba(0,200,83,0.05)}
    .loan-term-opt.selected{border-color:var(--green);background:rgba(0,200,83,0.1);color:var(--green)}
    /* Loan panel layout — form + TPB eligibility notice side by side on desktop so the
       page doesn't grow tall and force scrolling just to reach the form. */
    .loan-layout{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start;max-width:920px}
    .loan-tpb-notice{background:rgba(249,197,53,0.1);border:1px solid rgba(249,197,53,0.4);border-radius:16px;padding:22px}
    @media(max-width:760px){.loan-layout{grid-template-columns:1fr}}
    
    .select-wrap select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:38px;cursor:pointer}
    .select-wrap::after{content:'▾';position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-muted);font-size:12px}
    .xd-modal{background:#fff;border-radius:20px;padding:32px;width:100%;max-width:520px;box-shadow:0 24px 80px rgba(0,0,0,.25);transform:translateY(24px);transition:transform .25s;position:relative}
    .xd-modal-backdrop.show .xd-modal{transform:translateY(0)}
    .xd-modal-close{position:absolute;top:16px;right:18px;background:none;border:none;font-size:22px;cursor:pointer;color:var(--text-muted);line-height:1}
    .xd-modal h3{font-size:20px;font-weight:900;color:var(--text-dark);margin-bottom:6px}
    .xd-modal .modal-sub{font-size:13px;color:var(--text-muted);margin-bottom:20px}
    .invest-plan-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px}
    .ipc{border:2px solid var(--border);border-radius:14px;padding:18px 14px;cursor:pointer;transition:border-color .2s,background .2s;text-align:center;position:relative}
    .ipc:hover{border-color:var(--green);background:rgba(0,200,83,0.05)}
    .ipc .ipc-letter{font-family:'Bebas Neue',sans-serif;font-size:36px;color:var(--green);line-height:1}
    .ipc .ipc-name{font-size:13px;font-weight:800;color:var(--text-dark);margin:4px 0 2px}
    .ipc .ipc-range{font-size:11px;color:var(--text-muted)}
    .ipc .ipc-roi{font-size:12px;font-weight:700;color:var(--green);margin-top:6px}
    .ipc .ipc-hot{position:absolute;top:8px;right:8px;background:var(--green);color:#111;font-size:9px;font-weight:800;padding:2px 7px;border-radius:50px}
    .invest-plan-amount-row{margin-top:16px}
    .invest-plan-amount-row label{font-size:13px;font-weight:700;color:var(--text-dark);display:block;margin-bottom:8px}
    @media(max-width:480px){.invest-plan-cards{grid-template-columns:1fr 1fr}}


/* ── AUTH SCREEN (fullscreen login/register) ───────────────── */
.auth-screen {
  position: fixed; inset: 0; top: 96px;
  display: flex; align-items: stretch;
  background: #0a1628; z-index: 1; overflow: hidden;
}
.auth-bg {
  position: absolute; inset: 0;
  background-image: url('../images/portal-hero-bg.png');
  background-size: cover; background-position: center 40%;
  filter: brightness(0.82);
}
.auth-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.18) 0%, transparent 55%, rgba(0,0,0,0.52) 100%);
}
.auth-panel {
  position: relative; z-index: 2; margin-left: auto;
  width: 100%; max-width: 420px; min-height: 100%;
  background: rgba(10,14,22,0.72);
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: 48px 40px; overflow-y: auto;
}
.auth-box { width: 100%; max-width: 360px; }
.auth-title { font-family:'Outfit',sans-serif; font-size:36px; font-weight:800; color:#fff; letter-spacing:-.5px; margin-bottom:28px; }
.auth-label { display:block; font-size:13px; font-weight:600; color:rgba(255,255,255,0.75); margin-bottom:6px; }
.auth-field { position:relative; margin-bottom:16px; }
.auth-field-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#aab; font-size:14px; pointer-events:none; }
.auth-field input { width:100%; padding:13px 42px; background:rgba(255,255,255,0.96); border:none; border-radius:10px; font-size:14px; color:#111; font-family:'DM Sans',sans-serif; outline:none; transition:box-shadow .25s; }
.auth-field input:focus { box-shadow:0 0 0 2.5px rgba(0,200,83,0.55); }
.auth-field input::placeholder { color:#aab; }
.auth-field .auth-pw-toggle { position:absolute; right:14px; top:50%; transform:translateY(-50%); background:none; border:none; color:#aab; cursor:pointer; font-size:14px; }
.auth-forgot { display:block; text-align:right; font-size:12px; color:rgba(255,255,255,0.5); text-decoration:none; margin-top:-8px; margin-bottom:20px; }
.auth-forgot:hover { color:var(--green); }
.auth-submit { width:100%; padding:14px 20px; background:linear-gradient(90deg,#00c853,#a8e063); border:none; border-radius:10px; color:#0a1f0f; font-size:15px; font-weight:800; font-family:'Outfit',sans-serif; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:all .3s; box-shadow:0 6px 24px rgba(0,200,83,.38); }
.auth-submit:hover { transform:translateY(-2px); box-shadow:0 10px 32px rgba(0,200,83,.5); }
.auth-divider { display:flex; align-items:center; gap:10px; margin:18px 0; font-size:12px; color:rgba(255,255,255,0.35); }
.auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:rgba(255,255,255,0.15); }
.auth-google-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:10px; padding:13px 16px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.18); border-radius:10px; font-size:14px; font-weight:600; color:rgba(255,255,255,0.88); cursor:pointer; transition:all .25s; font-family:'DM Sans',sans-serif; }
.auth-google-btn:hover { background:rgba(255,255,255,0.13); border-color:rgba(255,255,255,0.32); }
.google-g { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:conic-gradient(from -45deg,#EA4335 0deg 90deg,#FBBC05 90deg 180deg,#34A853 180deg 270deg,#4285F4 270deg 360deg); color:#fff; font-size:11px; font-weight:800; font-family:Arial,sans-serif; flex-shrink:0; }
.auth-switch { text-align:center; font-size:13px; color:rgba(255,255,255,0.45); margin-top:20px; }
.auth-switch a { color:var(--green); text-decoration:none; font-weight:700; }
.auth-trust { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:18px; }
.auth-trust span { font-size:11px; color:rgba(255,255,255,0.3); }
.auth-form.hidden { display:none; }

/* ── INVEST STATUS CARD — white text on dark green gradient ── */
.invest-status-card {
  background: linear-gradient(135deg, #005c20, #007a2a);
  border: none; border-radius: 20px; padding: 26px; margin-bottom: 18px;
  box-shadow: 0 8px 32px rgba(0,100,30,.35);
}
.invest-status-card .isc-title { color: rgba(255,255,255,0.6) !important; }
.invest-status-card h3,
.invest-status-card p,
.invest-status-card .iss-label,
.invest-status-card .invest-status-msg,
.invest-status-card span { color: rgba(255,255,255,0.9) !important; }

@media (max-width:600px) {
  .auth-panel { max-width:100%; padding:36px 24px; }
}

/* ============================================================
   FIXES v9 — Nav, Mobile Sidebar, Stats Row, Chart
   ============================================================ */

/* 1. DASHBOARD NAV — hide the top nav when dashboard is shown.
      The sidebar handles navigation inside the dashboard, so the
      top nav bar would scroll with content and look wrong.
      Instead, when dashPage is visible the top nav stays fixed
      and the portal-layout has the correct top offset.          */
#dashPage .portal-nav { position: fixed; }

/* 2. STATS ROW — 3-column layout on desktop */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
@media(max-width:700px){
  .stats-row { grid-template-columns: 1fr 1fr; }
}
@media(max-width:400px){
  .stats-row { grid-template-columns: 1fr 1fr; }
}

/* 3. MOBILE SIDEBAR — fix grayed-out / unclickable links.
      The sidebarOverlay sits at z-index:1499. The sidebar is at
      z-index:1500. Links inside need pointer-events:auto and
      must not be covered by anything.                          */
/* Sidebar must be ABOVE the overlay (overlay is the dim backdrop behind it) */
.sidebar.open {
  z-index: 3000 !important;
}
/* Overlay sits BEHIND the sidebar — it's the dark backdrop, not a cover */
#sidebarOverlay {
  z-index: 1499 !important;
  pointer-events: none; /* starts with no pointer events — JS enables it when sidebar opens */
}
.sb-nav a {
  pointer-events: auto !important;
  position: relative;
  z-index: 1;
  color: var(--text-mid) !important;
  opacity: 1 !important;
  display: block !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: rgba(0,200,83,0.15);
}
.sb-nav a:hover, .sb-nav a.active {
  color: var(--green) !important;
  background: rgba(0,200,83,0.08);
}
/* All sidebar children must be interactable */
.sidebar * {
  pointer-events: auto;
}

/* 4. PORTAL MOBILE NAV — ensure it appears ABOVE the sidebar overlay */
.portal-mobile-nav {
  z-index: 2100 !important;
  position: fixed !important;
  top: 96px !important; /* below ticker(38) + nav(58) */
}
.portal-mobile-nav a {
  pointer-events: auto !important;
  color: var(--text-mid) !important;
  opacity: 1 !important;
}
.portal-mobile-nav a:hover {
  color: var(--green) !important;
  background: rgba(0,200,83,0.08) !important;
}

/* 5. PORTFOLIO CHART — green-themed improvements */
#portfolioChartSVG {
  border-radius: 10px;
}
.portfolio-chart-wrap {
  background: #fff;
  border: 1px solid rgba(0,200,83,0.15);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0,200,83,0.06);
}

/* 6. CRYPTO TICKER — ensure all items show (not just USDT).
      The ticker uses translateX(-50%) on a doubled list — if the
      element width is wrong the animation can appear to stall.  */
.ticker-inner {
  will-change: transform;
  display: inline-flex !important;
  white-space: nowrap;
}
.crypto-ticker {
  overflow: hidden !important;
}

/* ============================================================
   FIXES v16 — Ticker+Nav fixed together, mobile nav tappable
   ============================================================ */

/* 1. Make ticker fixed so it scrolls with the nav as one unit */
.crypto-ticker {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 3100 !important;
  height: 38px !important;
}

/* 2. Nav stays fixed directly below the ticker */
.portal-nav {
  position: fixed !important;
  top: 38px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2000 !important;
}

/* 3. Page content starts below both ticker(38) + nav(58) = 96px */
.auth-wrap   { margin-top: 96px !important; }
.portal-layout { margin-top: 96px !important; }

/* 4. MOBILE NAV — fully tappable, high contrast, correct z-index */
.portal-mobile-nav {
  position: fixed !important;
  top: 96px !important;      /* below ticker + nav */
  left: 0 !important;
  right: 0 !important;
  z-index: 9500 !important;  /* above everything including sidebar overlay */
  background: #ffffff !important;
  border-bottom: 2px solid var(--border) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
  padding: 12px 20px 16px !important;
  pointer-events: auto !important;
  display: none;
  flex-direction: column;
  gap: 4px;
}
.portal-mobile-nav.open {
  display: flex !important;
}
.portal-mobile-nav a {
  display: block !important;
  color: #111111 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 13px 16px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  opacity: 1 !important;
  -webkit-tap-highlight-color: rgba(0,200,83,0.15);
}
.portal-mobile-nav a:hover,
.portal-mobile-nav a:active {
  background: rgba(0,200,83,0.10) !important;
  color: #00a846 !important;
}
.portal-mobile-nav .pnav-signin {
  background: var(--grad-main) !important;
  color: #111 !important;
  text-align: center !important;
  font-weight: 800 !important;
  margin-top: 6px !important;
}

/* 5. Sidebar on mobile — also below fixed ticker+nav */
@media (max-width: 768px) {
  .sidebar {
    top: 96px !important;
    height: calc(100vh - 96px) !important;
    z-index: 1600 !important;
  }
  #sidebarOverlay {
    z-index: 1550 !important;
  }
}

/* ── v19 PORTAL FIXES ───────────────────────────────────── */

/* Sidebar nav text alignment — all items left-aligned consistently */
.sb-nav a {
  display: flex !important;
  align-items: center !important;
  padding: 11px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-mid) !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  gap: 10px !important;
  white-space: nowrap !important;
}
.sb-nav li { list-style: none !important; }
.sb-nav ul { padding: 0 !important; margin: 0 !important; }

/* Dashboard heading alignment */
.dash-greeting h2 {
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 1.5px !important;
  color: var(--text-dark) !important;
  margin: 0 0 4px !important;
}
.dash-greeting small {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: var(--green) !important;
  display: block !important;
  margin-bottom: 4px !important;
}

/* Deposit panel — bank transfer appears on right side like crypto */
#bankTransferInfo {
  display: none;
  margin-top: 0 !important;
}

/* Bonus cards — unlocked ones glow green */
[id^="bonus-"][style*="border:2px solid var(--green)"] {
  box-shadow: 0 4px 18px rgba(0,200,83,0.15) !important;
}