*{box-sizing:border-box;margin:0;padding:0;font-family:'Geist','Inter',-apple-system,system-ui,sans-serif;}
html,body{overflow-x:hidden;}
@media(max-width:480px){
  .topbar{flex-wrap:wrap;height:auto;min-height:52px;padding:8px 12px;row-gap:8px;}
  .tright{flex-wrap:wrap;gap:6px;justify-content:flex-end;row-gap:6px;}
  .tright .tbtn{font-size:11px;padding:6px 9px;}
  .ws-command{padding:20px 16px!important;}
  .ws-metrics-band{flex-wrap:wrap;gap:12px;}
  .nav{margin-top:2px;}
}

/* ── DARK (default) — HTL Premium ── */
:root{
  /* Brand */
  --pk: #E91E8C;
  --pp: #7B2FBE;
  --pp2: #A855F7;

  /* Semantic */
  --gn: #34D399;
  --rd: #F87171;

  /* Surfaces — rich charcoal + deep plum, 15% lighter than before */
  --bg:  #0E0B1A;   /* page — deep plum, not pure black */
  --bg2: radial-gradient(ellipse 500px 350px at 90% -15%, rgba(233,30,140,0.18) 0%, rgba(123,47,190,0.10) 45%, transparent 75%), #161228;   /* card — distinctly above page */
  --bg3: #1E1735;   /* input/inset — readable step up */
  --bg4: #261F42;   /* hover/active — clear interaction state */

  /* Borders — slightly stronger since surfaces are lighter */
  --bdr:  rgba(180,160,220,0.14);
  --bdr2: rgba(180,160,220,0.10);
  --bdr3: rgba(180,160,220,0.06);

  /* Text — unchanged, contrast is preserved */
  --tx:  #F0EAFA;
  --tx2: #B0A0CC;
  --tx3: #6B5E8A;

  /* Semantic backgrounds */
  --win-bg:  rgba(52,211,153,0.08);
  --win-bdr: rgba(52,211,153,0.20);
  --los-bg:  rgba(248,113,113,0.08);
  --los-bdr: rgba(248,113,113,0.18);

  /* Shadows — adjusted for lighter surfaces */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.25);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.28), 0 1px 3px rgba(0,0,0,0.16);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.38), 0 2px 8px rgba(0,0,0,0.22);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.06);

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
}

/* ── LIGHT ── */
body.light{
  /* Surfaces */
  --bg:  #F4F2F9;
  --bg2: radial-gradient(ellipse 500px 350px at 90% -15%, rgba(233,30,140,0.10) 0%, rgba(123,47,190,0.06) 45%, transparent 75%), #FFFFFF;
  --bg3: #F9F7FE;
  --bg4: #F0ECF9;

  /* Borders */
  --bdr:  rgba(123,47,190,0.10);
  --bdr2: rgba(123,47,190,0.07);
  --bdr3: rgba(123,47,190,0.05);

  /* Text */
  --tx:  #120B2E;
  --tx2: #4A3570;
  --tx3: #9B8BB4;

  /* Semantic */
  --gn: #059669;
  --win-bg:  rgba(5,150,105,0.05);
  --win-bdr: rgba(5,150,105,0.14);
  --los-bg:  rgba(248,113,113,0.05);
  --los-bdr: rgba(248,113,113,0.12);

  /* Shadows — lighter */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg:   0 8px 28px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.05);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.8);
}

/* ── BASE ── */
body {
  background: var(--bg);
  color: var(--tx);
  min-height: 100vh;
  font-family: 'Geist', 'Inter', -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ambient lighting — three-point: top purple, bottom-right magenta, mid-left violet */
body:not(.light) {
  background-image:
    radial-gradient(ellipse 70% 45% at 50% -5%,  rgba(100,50,210,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 100% 90%, rgba(180,30,140,0.12) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 0% 60%,   rgba(80,30,180,0.10) 0%, transparent 55%);
}

#main-app, #admin-page, #lp { position: relative; z-index: 1; }

/* ── UTILS ── */
.hidden{display:none!important;}
.empty{text-align:center;padding:40px 20px;color:var(--tx3);font-size:13px;}
.spinner{display:inline-block;width:16px;height:16px;border:2.5px solid var(--bdr);border-top-color:var(--pk);border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;}
@keyframes spin{to{transform:rotate(360deg);}}
.badge{padding:3px 10px;border-radius:20px;font-size:10px;font-weight:800;display:inline-block;}
.bwin{background:var(--win-bg);border:1px solid var(--win-bdr);color:var(--gn);}
.blos{background:var(--los-bg);border:1px solid var(--los-bdr);color:var(--rd);}
.bbe{background:rgba(168,85,247,0.15);border:1px solid rgba(168,85,247,0.3);color:var(--pp2);}
.btier-adv{background:rgba(29,78,216,0.15);border:1px solid rgba(29,78,216,0.3);color:#93C5FD;}
.btier-gold{background:rgba(212,160,23,0.15);border:1px solid rgba(212,160,23,0.3);color:#FCD34D;}
body.light .btier-adv{background:#EFF6FF;border-color:#BFDBFE;color:#1D4ED8;}
body.light .btier-gold{background:#FFFBEB;border-color:#FDE68A;color:#92400E;}

/* ── OVERLAYS ── */
.overlay,.modal-overlay,.share-overlay{display:none;position:fixed;inset:0;background:rgba(10,8,20,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:500;padding:20px;overflow-y:auto;}
.overlay.open,.modal-overlay.open,.share-overlay.open{display:block;}
.oinner,.modal-inner{display:flex;align-items:flex-start;justify-content:center;min-height:100%;}
.ocard,.modal-card{background:var(--bg2);border-radius:20px;width:100%;max-width:680px;margin:auto;border:1px solid var(--bdr2);box-shadow:0 24px 64px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.04) inset;}
.modal{background:var(--bg2);border-radius:20px;width:100%;max-width:720px;margin:auto;border:1px solid var(--bdr2);box-shadow:0 24px 64px rgba(0,0,0,0.5);}
.modal-hdr{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--bdr2);position:sticky;top:0;background:var(--bg2);border-radius:20px 20px 0 0;z-index:10;}
.modal-bod{padding:24px;max-height:75vh;overflow-y:auto;}
.modal-close{background:none;border:none;font-size:22px;color:var(--tx3);cursor:pointer;}
.modal-ftr{padding:16px 24px;border-top:1px solid var(--bdr2);display:flex;justify-content:flex-end;gap:10px;position:sticky;bottom:0;background:var(--bg2);border-radius:0 0 20px 20px;}
.ohdr,.modal-header{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--bdr2);position:sticky;top:0;background:var(--bg2);border-radius:20px 20px 0 0;z-index:10;}
.otitle,.modal-title{font-size:15px;font-weight:800;background:linear-gradient(135deg,var(--pk),var(--pp2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:.3px;}
.oxbtn,.close-btn{background:none;border:none;font-size:22px;color:var(--tx3);cursor:pointer;opacity:.7;transition:opacity .15s;}
.oxbtn:hover,.close-btn:hover{opacity:1;}
.obody{padding:24px;}
.oftr,.modal-footer{padding:16px 24px;border-top:1px solid var(--bdr2);display:flex;justify-content:flex-end;gap:10px;position:sticky;bottom:0;background:var(--bg2);border-radius:0 0 20px 20px;}

/* ── BUTTONS ── */
.btn-p{background:linear-gradient(135deg,var(--pk),var(--pp));border:none;color:#fff;padding:10px 22px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(233,30,140,0.3);transition:opacity .15s,transform .1s;letter-spacing:-0.01em;}
.btn-p:hover{opacity:.9;transform:translateY(-1px);}
.btn-p:active{transform:translateY(0);}
.btn-s{background:var(--bg3);border:1px solid var(--bdr2);color:var(--tx2);padding:10px 22px;border-radius:10px;font-size:13px;cursor:pointer;transition:border-color .15s,background .15s;}
.btn-s:hover{border-color:var(--pp2);background:var(--bg4);}
.btn-add{background:linear-gradient(135deg,var(--pk),var(--pp));border:none;color:#fff;padding:9px 18px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;display:inline-block;margin-bottom:14px;box-shadow:0 4px 14px rgba(233,30,140,0.25);transition:opacity .15s;}
.btn-add:hover{opacity:.9;}
.btn-imp{background:rgba(168,85,247,0.1);border:1.5px dashed rgba(168,85,247,0.35);color:var(--pp2);padding:9px 18px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;display:inline-block;margin-bottom:14px;transition:background .15s;}
.btn-imp:hover{background:rgba(168,85,247,0.18);}
.del-btn{background:var(--los-bg);border:1px solid var(--los-bdr);color:var(--rd);padding:3px 8px;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;}

/* ── SECTION TITLE ── */
.stitle{font-size:13px;font-weight:600;color:var(--tx2);letter-spacing:-0.01em;margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid var(--bdr3);}

/* ── FORM INPUTS ── */
.fwrap{background:var(--bg2);border:1px solid var(--bdr2);border-radius:14px;padding:18px;margin-bottom:14px;}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
@media(max-width:540px){.fgrid{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:4px;}
.field label{font-size:12px;color:var(--tx3);letter-spacing:0;font-weight:500;}
#tab-daily .field label{font-size:11px;color:var(--tx3);letter-spacing:0.05em;font-weight:600;text-transform:uppercase;}
.field input,.field select,.field textarea,input.mi,select.mi,textarea.mt{background:var(--bg3);border:1px solid var(--bdr3);color:var(--tx);padding:9px 12px;border-radius:8px;font-size:13px;outline:none;transition:border-color .15s,box-shadow .15s;}
.field input:focus,.field select:focus,.field textarea:focus,input.mi:focus,select.mi:focus,textarea.mt:focus{border-color:rgba(168,85,247,0.5);box-shadow:0 0 0 3px rgba(168,85,247,0.1);}

/* ── LOGIN ── */
#lp{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse 900px 600px at 50% 30%, rgba(233,30,140,0.2), transparent 65%),var(--bg);}
.lcard{background:var(--bg2);border-radius:24px;padding:44px 40px;width:380px;text-align:center;border:1px solid var(--bdr2);box-shadow:0 32px 80px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.03) inset;}
.lcard img{width:80px;height:80px;border-radius:50%;margin-bottom:20px;box-shadow:0 0 0 6px rgba(233,30,140,0.12),0 0 0 12px rgba(233,30,140,0.06);}
.ltitle{font-size:23px;font-weight:900;background:linear-gradient(135deg,var(--pk),var(--pp2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px;letter-spacing:-.2px;}
.lsub{font-size:12px;color:var(--tx3);margin-bottom:28px;line-height:1.7;}
.linput{width:100%;border:1px solid var(--bdr3);border-radius:10px;padding:12px 14px;font-size:14px;color:var(--tx);background:var(--bg3);margin-bottom:10px;outline:none;display:block;transition:border-color .15s,box-shadow .15s;}
.linput:focus{border-color:rgba(168,85,247,0.5);box-shadow:0 0 0 3px rgba(168,85,247,0.1);}
.lbtn{width:100%;background:linear-gradient(135deg,var(--pk),var(--pp));border:none;color:#fff;padding:14px;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;margin-top:4px;box-shadow:0 6px 20px rgba(233,30,140,0.35);transition:opacity .15s,transform .1s;letter-spacing:.2px;}
.lbtn:hover{opacity:.92;transform:translateY(-1px);}
.lerr{color:var(--rd);font-size:12px;margin-top:10px;display:none;padding:8px 12px;background:var(--los-bg);border-radius:8px;border:1px solid var(--los-bdr);}
.lnote{font-size:11px;color:var(--tx3);margin-top:16px;line-height:1.7;}

/* ── TIER SELECT ── */
.tier-opt{border:1px solid var(--bdr3);border-radius:12px;padding:14px 16px;cursor:pointer;margin-bottom:8px;display:flex;align-items:flex-start;gap:12px;transition:border-color .15s,background .15s;}
.tier-opt:hover{border-color:var(--bdr2);}
.tier-opt.selected{border-color:var(--pk);background:rgba(233,30,140,0.06);}
.tier-opt input{accent-color:var(--pk);width:16px;height:16px;flex-shrink:0;margin-top:2px;}
.tier-label{font-size:14px;font-weight:700;color:var(--tx);}
.tier-desc{font-size:11px;color:var(--tx3);margin-top:2px;line-height:1.6;}

/* ── TOPBAR ── */
.topbar{background:var(--bg2);border-bottom:1px solid var(--bdr2);display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:52px;position:sticky;top:0;z-index:100;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
body:not(.light) .topbar{background:rgba(14,11,26,0.82);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);}
.tlogo{display:flex;align-items:center;gap:10px;}
.tlogo img{width:34px;height:34px;border-radius:50%;box-shadow:0 0 0 2px rgba(233,30,140,0.3);}
.tlogo-t{font-size:13px;font-weight:600;color:var(--tx);letter-spacing:-0.02em;}
.tlogo-s{font-size:9px;color:var(--tx3);}
.tright{display:flex;align-items:center;gap:6px;}
.tbtn{height:28px;padding:0 12px;border-radius:20px;font-size:11px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;border:none;line-height:1;transition:opacity .15s;}
.tbtn:hover{opacity:.85;}
.mode-btn{background:var(--bg3);border:1px solid var(--bdr2);color:var(--tx2);}
.tier-chip-adv{height:28px;padding:0 12px;border-radius:20px;font-size:11px;font-weight:800;display:inline-flex;align-items:center;background:rgba(29,78,216,0.15);border:1px solid rgba(29,78,216,0.3);color:#93C5FD;}
.tier-chip-gold{height:28px;padding:0 12px;border-radius:20px;font-size:11px;font-weight:800;display:inline-flex;align-items:center;background:rgba(212,160,23,0.15);border:1px solid rgba(212,160,23,0.3);color:#FCD34D;}
body.light .tier-chip-adv{background:#EFF6FF;border-color:#BFDBFE;color:#1D4ED8;}
body.light .tier-chip-gold{background:#FFFBEB;border-color:#FDE68A;color:#92400E;}
.uchip{background:rgba(233,30,140,0.1);border:1px solid rgba(233,30,140,0.25);color:var(--pk);}
.abtn{background:linear-gradient(135deg,var(--pk),var(--pp));color:#fff;box-shadow:0 2px 8px rgba(233,30,140,0.3);}
.sout-btn{background:none;border:1px solid var(--bdr3);color:var(--tx3);}

/* ── NAV ── */
.nav{background:var(--bg2);border-bottom:1px solid var(--bdr2);display:flex;align-items:stretch;padding:0 12px;height:38px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;flex-shrink:0;}
body:not(.light) .nav{background:rgba(14,11,26,0.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.nav::-webkit-scrollbar{display:none;}
.nb{background:none;border:none;border-bottom:2px solid transparent;color:var(--tx3);padding:0 9px;font-size:11px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;height:100%;white-space:nowrap;letter-spacing:.1px;transition:color .15s;}
.nb:hover{color:var(--tx2);}
.nb.active{color:var(--pk);border-bottom-color:var(--pk);font-weight:700;}
.nav-more-item{display:block;width:100%;text-align:left;background:none;border:none;border-radius:8px;color:var(--tx2);padding:8px 12px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;}
.nav-more-item:hover{background:rgba(233,30,140,0.1);color:var(--pk);}
.nav-more-item.active{background:rgba(233,30,140,0.12);color:var(--pk);font-weight:800;}
.nb:hover{color:var(--pk);}
.nb.active{color:var(--pk);border-bottom-color:var(--pk);}

/* ── CONTENT ── */
.content{max-width:1400px;margin:0 auto;padding:20px 28px;}
.tp{display:none;}.tp.active{display:block;}
.admin-section{display:none;}.admin-section.active{display:block;}

/* ── HERO ── */
.hero{background:var(--bg2);border:1px solid var(--bdr2);border-radius:20px;padding:28px;margin-bottom:16px;text-align:center;box-shadow:var(--card-shadow);position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% -20%,rgba(233,30,140,0.07) 0%,transparent 70%);pointer-events:none;}
.hero-label{font-size:11px;color:var(--tx3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px;font-weight:500;opacity:.45;}
.hero-pnl{font-size:68px;font-weight:700;letter-spacing:-0.04em;line-height:1;margin-bottom:6px;font-family:"Space Grotesk",sans-serif;font-variant-numeric:tabular-nums;font-variant-numeric:tabular-nums;}
.hero-div{width:40px;height:2px;background:linear-gradient(90deg,var(--pk),var(--pp2));border-radius:2px;margin:14px auto;}
.hero-strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--bdr2);margin-top:14px;padding-top:16px;}
.hs{text-align:center;padding:0 16px;border-right:1px solid var(--bdr2);}
.hs:last-child{border-right:none;}
.hs-l{font-size:11px;color:var(--tx3);letter-spacing:0.04em;margin-bottom:5px;font-weight:500;}
.hs-v{font-size:24px;font-weight:600;letter-spacing:-0.02em;font-family:"Space Grotesk",sans-serif;font-variant-numeric:tabular-nums;}

/* ── STAT GRID ── */
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px;}
.sc{background:var(--bg2);border:1px solid var(--bdr2);border-radius:14px;padding:16px 14px;box-shadow:var(--card-shadow);transition:box-shadow .2s,transform .2s;}
.sc:hover{box-shadow:var(--card-shadow-hover);transform:translateY(-1px);}
.sc-l{font-size:11px;color:var(--tx3);letter-spacing:0.04em;margin-bottom:8px;font-weight:500;}
.sc-v{font-size:32px;font-weight:600;color:var(--tx);letter-spacing:-0.03em;font-family:"Space Grotesk",sans-serif;font-variant-numeric:tabular-nums;font-variant-numeric:tabular-nums;}
.sc.sc-win{background:var(--win-bg);border-color:var(--win-bdr);}
.sc.sc-win .sc-l{color:var(--gn);opacity:.7;}
.sc.sc-win .sc-v{color:var(--gn);}
.sc.sc-los{background:var(--los-bg);border-color:var(--los-bdr);}
.sc.sc-los .sc-v{color:var(--rd);}
.pk{color:var(--pk);}.pp{color:var(--pp2);}.gn{color:var(--gn);}.rd{color:var(--rd);}

/* ── CHART CARD ── */
.chart-card{background:var(--bg2);border:1px solid var(--bdr2);border-radius:16px;padding:20px;margin-bottom:16px;box-shadow:var(--card-shadow);}
.chart-title{font-size:12px;font-weight:600;color:var(--tx2);letter-spacing:-0.01em;margin-bottom:14px;}

/* ── SHARE CARD ── */
.share-card-bg{background:linear-gradient(135deg,var(--bg),var(--bg3));border:1px solid var(--bdr2);border-radius:16px;padding:24px;}
body.light .share-card-bg{background:linear-gradient(135deg,#FDF6FB,#F3E8FF);}
.share-stat-box{background:var(--bg4);border:1px solid var(--bdr2);border-radius:8px;padding:10px;text-align:center;}
body.light .share-stat-box{background:rgba(233,30,140,0.06);border-color:var(--bdr2);}
.share-stat-l{font-size:7px;text-transform:uppercase;letter-spacing:1px;color:var(--tx3);margin-bottom:3px;}
.share-stat-v{font-size:16px;font-weight:900;color:var(--tx);}
.share-footer-line{border-top:1px solid var(--bdr2);padding-top:12px;margin-top:10px;text-align:center;font-size:9px;color:var(--tx3);}

/* ── ACCOUNT SELECTOR ── */
.acct-wrap{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:6px;}
.acct-sel{background:rgba(168,85,247,0.1);border:1px solid rgba(168,85,247,0.25);color:var(--pp2);padding:5px 12px;border-radius:8px;font-size:12px;font-weight:700;outline:none;cursor:pointer;}
.acct-add{background:var(--bg3);border:1px solid var(--bdr);color:var(--tx3);padding:6px 11px;min-width:30px;min-height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;font-size:12px;cursor:pointer;transition:all 0.15s;}

/* ── TABLE ── */
.twrap{overflow-x:auto;border-radius:14px;border:1px solid var(--bdr2);box-shadow:var(--card-shadow);}
table{width:100%;border-collapse:collapse;font-size:12px;}
th{background:var(--bg3);color:var(--tx3);padding:10px 16px;text-align:left;font-weight:500;white-space:nowrap;border-bottom:1px solid var(--bdr2);font-size:11px;letter-spacing:0.04em;}
td{padding:10px 14px;border-bottom:1px solid var(--bdr3);white-space:nowrap;color:var(--tx2);}
tr:last-child td{border-bottom:none;}
tr.twin td{background:var(--win-bg);}
tr.tlos td{background:var(--los-bg);}
tr:hover td{background:rgba(168,85,247,0.06) !important;cursor:pointer;}
body.light tr:hover td{background:rgba(168,85,247,0.05) !important;}

/* ── DAY CARD ── */
.dcard{background:var(--bg2);border:1px solid var(--bdr2);border-radius:16px;padding:18px;margin-bottom:12px;box-shadow:var(--card-shadow);transition:box-shadow .2s;}
.dcard:hover{box-shadow:var(--card-shadow-hover);}
.dhdr{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;}
.ddate{font-size:13px;font-weight:800;color:var(--pk);}
.dpnl{font-family:'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums;font-size:20px;font-weight:900;}
.dstats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center;}
.dsl{font-size:11px;color:var(--tx3);margin-bottom:4px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;}
.dsv{font-family:'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums;font-size:13px;font-weight:700;color:var(--tx2);}
.edit-btn{background:none;border:1px solid var(--bdr2);color:var(--pk);padding:5px 12px;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;margin-top:10px;transition:border-color .15s;}
.edit-btn:hover{border-color:var(--pk);}

/* ── CALENDAR ── */
.cal-hdr{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.cal-yr{background:var(--bg2);border:1px solid var(--bdr2);color:var(--pk);padding:7px 12px;border-radius:8px;font-size:14px;font-weight:800;width:90px;text-align:center;outline:none;}
.calgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:700px){.calgrid{grid-template-columns:1fr;}}
.calmonth{background:var(--bg2);border:1px solid var(--bdr2);border-radius:16px;overflow:hidden;box-shadow:var(--card-shadow);}
.calmhdr{background:var(--bg3);border-bottom:1px solid var(--bdr2);padding:12px 18px;display:flex;justify-content:space-between;align-items:center;}
.calmname{font-size:13px;font-weight:900;color:var(--tx2);letter-spacing:.3px;}
.caldays{display:grid;grid-template-columns:repeat(7,1fr) 0.85fr;}
.calwktotal{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;font-weight:800;border-left:1px solid var(--bdr2);padding:4px 2px;}
.caldow{font-size:10px;color:var(--tx3);text-align:center;padding:8px 0;border-bottom:1px solid var(--bdr2);font-weight:500;text-transform:uppercase;letter-spacing:0.06em;}
.calday{min-height:80px;padding:7px;border-right:1px solid var(--bdr3);border-bottom:1px solid var(--bdr3);display:flex;flex-direction:column;}
.calday:nth-child(7n){border-right:none;}
.calday-n{font-size:14px;color:var(--tx3);font-weight:700;}
.calday-p{font-size:13px;font-weight:800;margin-top:4px;}
.chall-preset{padding:7px 16px;border-radius:8px;border:1px solid var(--bdr2);background:var(--bg3);color:var(--tx2);font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;}
.chall-preset.active{background:rgba(233,30,140,0.12);border-color:rgba(233,30,140,0.4);color:var(--pk);}
.chall-day{border-radius:10px;padding:8px 6px;text-align:center;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;}
.calwin{background:rgba(52,211,153,0.06);border-color:rgba(52,211,153,0.15)!important;}.calwin .calday-n{color:var(--gn);opacity:.8;}.calwin .calday-p{color:var(--gn);}
.calloss{background:rgba(248,113,113,0.06);border-color:rgba(248,113,113,0.12)!important;}.calloss .calday-n{color:var(--rd);opacity:.8;}.calloss .calday-p{color:var(--rd);}
.calemp{opacity:.2;}.calwknd{opacity:1;}

/* ── RULES ── */
.rcard{background:var(--bg2);border:1px solid var(--bdr2);border-left:3px solid var(--pk);border-radius:12px;padding:14px 18px;margin-bottom:10px;display:flex;align-items:flex-start;gap:12px;font-size:13px;line-height:1.6;color:var(--tx2);}
.rnum{width:26px;height:26px;border-radius:50%;background:rgba(233,30,140,0.12);border:1.5px solid rgba(233,30,140,0.3);color:var(--pk);font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.aff{background:rgba(168,85,247,0.08);border:1px solid rgba(168,85,247,0.2);border-radius:12px;padding:12px 18px;margin-bottom:8px;font-size:13px;font-style:italic;color:var(--pp2);line-height:1.7;}
.chk{background:var(--bg2);border:1px solid var(--bdr2);border-left:3px solid var(--pp2);border-radius:10px;padding:10px 14px;margin-bottom:8px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--tx2);}
.chk input{accent-color:var(--pp);width:15px;height:15px;flex-shrink:0;}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:600px){.twocol{grid-template-columns:1fr;}}

/* ── ANALYTICS ── */
.an-section{margin-bottom:26px;}
.an-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:14px;}
.an-card{background:var(--bg3);border:1.5px solid var(--bdr);border-radius:12px;padding:14px;text-align:center;}
.an-card-l{font-size:9px;color:var(--tx3);text-transform:uppercase;letter-spacing:.8px;margin-bottom:5px;font-weight:700;}
.an-card-v{font-size:26px;font-weight:900;}
.an-card-v.win{color:var(--gn);}
.an-card-v.los{color:var(--rd);}
.bar-wrap{background:var(--bg3);border:1.5px solid var(--bdr);border-radius:14px;padding:18px;margin-bottom:12px;}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.bar-row:last-child{margin-bottom:0;}
.bar-label{font-size:13px;color:var(--tx2);width:90px;flex-shrink:0;font-weight:600;}
.bar-track{flex:1;height:22px;background:var(--bdr3);border-radius:6px;overflow:hidden;}
.bar-fill{height:100%;border-radius:6px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-size:11px;font-weight:800;color:#fff;}
.bar-stat{font-size:11px;color:var(--tx3);width:68px;text-align:right;flex-shrink:0;}
.streak-wrap{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:4px;}
.streak-card{background:var(--bg3);border:1.5px solid var(--bdr);border-radius:12px;padding:14px;flex:1;min-width:110px;text-align:center;}
.streak-num{font-size:32px;font-weight:600;line-height:1;letter-spacing:-0.03em;font-family:"Space Grotesk",sans-serif;font-variant-numeric:tabular-nums;}
.streak-num.win{color:var(--gn);}
.streak-num.los{color:var(--rd);}
.streak-label{font-size:13px;color:var(--tx3);margin-top:4px;}
.emo-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.emo-bar-label{font-size:12px;width:80px;flex-shrink:0;font-weight:600;color:var(--tx2);}
.emo-track{flex:1;height:20px;background:var(--bdr3);border-radius:4px;overflow:hidden;display:flex;}
.esw{background:var(--gn);}.esl{background:var(--rd);}.esb{background:var(--tx3);}
.emo-stat{font-size:11px;color:var(--tx3);width:70px;text-align:right;flex-shrink:0;}

/* ── IMPORT ── */
.iprev{background:rgba(168,85,247,0.08);border:1px solid rgba(168,85,247,0.25);border-radius:12px;padding:16px;margin-bottom:14px;}
.irow{display:flex;gap:10px;font-size:12px;color:var(--tx2);padding:5px 0;border-bottom:1px solid rgba(168,85,247,0.12);}
.irow:last-of-type{border-bottom:none;}

/* ── MODAL ── */
.msec{margin-bottom:22px;}
.mshdr{background:linear-gradient(135deg,var(--pk),var(--pp));color:#fff;padding:8px 14px;border-radius:8px;font-size:12px;font-weight:800;margin-bottom:12px;}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.mf{display:flex;flex-direction:column;gap:4px;}
.ml{font-size:12px;color:var(--tx3);letter-spacing:0;font-weight:500;}
.mi{background:var(--bg);border:1px solid var(--bdr);color:var(--tx);padding:8px 12px;border-radius:8px;font-size:13px;outline:none;width:100%;}
.field-auto{background:rgba(0,194,212,0.07)!important;border-color:rgba(0,194,212,0.35)!important;}
.mi:focus{border-color:var(--pk);}
.mt{background:var(--bg);border:1px solid var(--bdr);color:var(--tx);padding:8px 12px;border-radius:8px;font-size:13px;outline:none;resize:vertical;width:100%;}
.cbgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;}
.cbi{display:flex;align-items:center;gap:8px;font-size:12px;padding:7px 10px;background:var(--bg);border-radius:8px;border:1px solid var(--bdr2);color:var(--tx);}
.cbi input[type=checkbox]{accent-color:var(--pk);width:14px;height:14px;flex-shrink:0;}

/* ── ADMIN ── */
#admin-page{display:none;min-height:100vh;background:var(--bg);}
/* Structural safety net: no matter which JS function shows the admin panel,
   or which one forgets to hide the main app, this guarantees they can never
   both be visible at once. This is a backstop, not a fix for any specific
   function — it makes the whole category of "both screens visible" bug
   impossible at the CSS level regardless of how admin-page got shown. */
body:has(#admin-page[style*="display: block"]) #main-app,
body:has(#admin-page[style*="display:block"]) #main-app{display:none!important;}
/* Same principle, for login vs. the main app: if the main app is genuinely
   showing real rendered content, that means login already succeeded — the
   login screen has no business still being visible at that point, no matter
   what race condition or code path left it showing. */
body:has(#main-app[style*="display: block"]) #lp,
body:has(#main-app[style*="display:block"]) #lp{display:none!important;}
/* Direct rule for the remaining combination: admin visible should also always
   force login hidden, not just rely on the admin->main-app->login chain,
   in case admin-page is ever visible while main-app specifically is not. */
body:has(#admin-page[style*="display: block"]) #lp,
body:has(#admin-page[style*="display:block"]) #lp{display:none!important;}
.admin-hdr{background:var(--bg2);border-bottom:1px solid var(--bdr);padding:14px 24px;display:flex;align-items:center;justify-content:space-between;}
.admin-title{font-size:18px;font-weight:900;background:linear-gradient(135deg,var(--pk),var(--pp));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.admin-body{max-width:1400px;margin:0 auto;padding:20px 28px;}
.akgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:24px;}
.acard{background:var(--bg3);border:1.5px solid var(--bdr);border-radius:14px;padding:18px;}
.acard-l{font-size:11px;color:var(--tx3);letter-spacing:0.04em;margin-bottom:5px;font-weight:500;}
.acard-v{font-size:28px;font-weight:900;color:var(--tx);}
.lb-wrap{background:var(--bg3);border:1.5px solid var(--bdr);border-radius:14px;overflow:hidden;margin-bottom:24px;}
.lb-hdr{background:linear-gradient(135deg,var(--pk),var(--pp));padding:16px 20px;display:flex;justify-content:space-between;align-items:center;}
.lb-title{font-size:14px;font-weight:900;color:#fff;}
.lb-sub{font-size:11px;color:var(--tx);}
.lb-toggle{display:flex;gap:6px;}
.lb-tog{background:var(--bdr3);border:1px solid var(--bdr2);color:#fff;padding:5px 12px;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;}
.lb-tog.active{background:#fff;color:var(--pk);}
.lb-row{display:flex;align-items:center;gap:14px;padding:13px 20px;border-bottom:1px solid var(--bdr2);}
.lb-row:last-child{border-bottom:none;}
.lb-rank{font-size:18px;width:32px;text-align:center;flex-shrink:0;}
.lb-name{flex:1;min-width:0;}
.lb-mname{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tx);}
.lb-meta{font-size:11px;color:var(--tx3);}
.lb-bar{flex:2;min-width:0;}
.lb-btrack{height:22px;background:var(--bdr3);border-radius:6px;overflow:hidden;}
.lb-bfill{height:100%;border-radius:6px;display:flex;align-items:center;padding:0 10px;font-size:11px;font-weight:800;color:#fff;}
.lb-val{font-size:14px;font-weight:900;width:82px;text-align:right;flex-shrink:0;}
.mcard{background:var(--bg3);border:1px solid var(--bdr2);border-radius:14px;padding:16px 20px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;}
.mcard:hover{border-color:var(--pk);}
.mname{font-size:14px;font-weight:800;margin-bottom:2px;color:var(--tx);}
.memail{font-size:12px;color:var(--tx3);}
.mstats{display:flex;gap:18px;}
.ms{text-align:center;}
.ms-l{font-size:9px;color:var(--tx3);text-transform:uppercase;font-weight:700;}
.ms-v{font-size:16px;font-weight:900;color:var(--tx);}
.vbtn{background:rgba(233,30,140,0.12);border:1px solid var(--bdr);color:var(--pk);padding:6px 14px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;}
.bbtn{background:var(--bg2);border:1px solid var(--bdr2);color:var(--tx2);padding:7px 14px;border-radius:8px;font-size:13px;cursor:pointer;}

/* ── MILESTONE ── */
#milestone-overlay{display:none;position:fixed;inset:0;background:rgba(5,2,15,.8);z-index:900;align-items:center;justify-content:center;padding:20px;}
#milestone-overlay.open{display:flex;}
.milestone-card{background:var(--bg2);border-radius:22px;padding:40px 32px;max-width:380px;width:100%;text-align:center;border:1px solid var(--bdr);}
.milestone-emoji{font-size:56px;line-height:1;margin-bottom:16px;}
.milestone-title{font-size:28px;font-weight:900;background:linear-gradient(135deg,var(--pk),var(--pp));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px;}
.milestone-sub{font-size:14px;color:var(--tx2);line-height:1.6;margin-bottom:24px;}

/* ── FORCED PW ── */
#force-pw-overlay{display:none;position:fixed;inset:0;background:rgba(5,2,15,.88);z-index:800;align-items:center;justify-content:center;padding:20px;}
#force-pw-overlay.open{display:flex;}

/* ── PROFILE PANEL ── */
#profile-panel{display:none;position:fixed;top:0;right:0;bottom:0;width:340px;background:var(--bg2);border-left:1px solid var(--bdr);z-index:400;padding:24px;overflow-y:auto;}
#profile-panel.open{display:block;}
.pp-title{font-size:16px;font-weight:900;background:linear-gradient(135deg,var(--pk),var(--pp));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:20px;}


@keyframes confettiFall{
  0%{transform:translateY(0) rotate(0deg);opacity:1;}
  100%{transform:translateY(100vh) rotate(720deg);opacity:0;}
}
/* ── ADD OVERLAYS ── */
#addacct-overlay,#addmember-overlay{display:none;position:fixed;inset:0;background:rgba(5,2,15,.8);z-index:600;align-items:center;justify-content:center;padding:20px;}

/* Share overlay - square Instagram style */
.share-overlay{display:none;position:fixed;inset:0;background:rgba(5,2,15,.85);z-index:500;padding:20px;overflow-y:auto;display:none;}
.share-overlay.open{display:flex;align-items:center;justify-content:center;}
.share-modal{background:var(--bg2);border-radius:18px;width:100%;max-width:420px;padding:20px;border:1px solid var(--bdr);}
#share-card{aspect-ratio:1/1;width:100%;display:flex;flex-direction:column;justify-content:space-between;}

/* Light mode green overrides - #57FF6E is too bright on white */
body.light .gn{color:#1a5c24!important;}
body.light .sc.sc-win .sc-v{color:#1a5c24!important;}
body.light .sc.sc-win{background:rgba(26,92,36,0.08);border-color:rgba(26,92,36,0.3);}
body.light .sc.sc-win .sc-l{color:rgba(26,92,36,0.7)!important;}
body.light .bwin{background:rgba(26,92,36,0.1);border-color:rgba(26,92,36,0.3);color:#1a5c24;}
body.light tr.twin td{background:rgba(26,92,36,0.07);}
body.light .calwin{background:rgba(26,92,36,0.08);border-color:rgba(26,92,36,0.3);}
body.light .calwin .calday-p{color:#1a5c24;}
body.light .calwin .calday-n{color:#1a5c24;opacity:.8;}
body.light --win-bg{background:rgba(45,122,58,0.08);}

/* ── LIGHT MODE OMBRE ACCENTS ── */
body.light .hero{position:relative;overflow:hidden;}
body.light .hero::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#7B2FBE,#E91E8C,#A855F7);z-index:1;}
body.light .hero::after{content:'';position:absolute;top:-40px;right:-40px;width:150px;height:150px;background:radial-gradient(circle,rgba(233,30,140,0.07),transparent 70%);border-radius:50%;pointer-events:none;}

body.light .chart-card{position:relative;overflow:hidden;}
body.light .chart-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#E91E8C,#7B2FBE,#A855F7);z-index:1;}

body.light .sc{position:relative;overflow:hidden;}
body.light .sc::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#E91E8C,#A855F7);}
body.light .sc.sc-win::before{background:linear-gradient(180deg,#1a5c24,#2d7a3a);}
body.light .sc.sc-los::before{background:linear-gradient(180deg,#E05A72,#9F1239);}

body.light .topbar{position:relative;overflow:hidden;}
body.light .topbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#E91E8C,#7B2FBE,#A855F7,transparent);}

body.light .nav{position:relative;}
body.light .nav::after{content:'';position:absolute;bottom:0;left:0;right:120px;height:1px;background:linear-gradient(90deg,#E91E8C,#A855F7,transparent);}

body.light .bar-wrap{position:relative;overflow:hidden;}
body.light .bar-wrap::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#E91E8C,#7B2FBE,#A855F7);}

body.light .an-card{position:relative;overflow:hidden;}
body.light .an-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#E91E8C,#7B2FBE,#A855F7);}

body.light .dcard{position:relative;overflow:hidden;}
body.light .dcard::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#E91E8C,#7B2FBE,#A855F7);}

body.light .calmonth{position:relative;overflow:hidden;}
body.light .calmonth::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#E91E8C,#7B2FBE,#A855F7);z-index:1;}

body.light .tcard{position:relative;overflow:hidden;}
body.light .tcard::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#E91E8C,#7B2FBE,#A855F7);}

body.light .lb-wrap{position:relative;overflow:hidden;}

/* Light mode share card */
body.light #share-card{background:linear-gradient(135deg,#FDF6FB,#F3E8FF)!important;border:1.5px solid #E91E8C!important;}
body.light #share-card .sc-stat-box{background:rgba(233,30,140,0.06)!important;border-color:rgba(233,30,140,0.2)!important;}
body.light #share-card .sc-stat-lbl{color:#B09AC8!important;}
body.light #share-card #sc-wr{color:#1a5c24!important;}
body.light #share-card #sc-r{color:#A855F7!important;}
body.light #share-card #sc-tr{color:#1A0838!important;}
body.light #sc-brand{color:#1A0838!important;}
body.light #sc-label{color:#B09AC8!important;}
body.light #sc-date{color:#B09AC8!important;}
body.light #share-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#7B2FBE,#E91E8C,#A855F7);}

/* ── DARK MODE SUBTLE PINK WARMTH ── */
.hero{position:relative;overflow:hidden;}
.hero::after{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;background:radial-gradient(circle,rgba(233,30,140,0.12),transparent 70%);border-radius:50%;pointer-events:none;}
.hero-left-glow{position:absolute;bottom:-40px;left:-40px;width:150px;height:150px;background:radial-gradient(circle,rgba(168,85,247,0.1),transparent 70%);border-radius:50%;pointer-events:none;}

/* Admin selects - force dark mode colors */
#msearch, #msort, #mtiersort {
  background: var(--bg) !important;
  color: var(--tx) !important;
  border-color: var(--bdr) !important;
}
#msearch::placeholder { color: var(--tx3); }

/* GLOBAL FILTER BAR */
.gf-btn{background:none;border:1px solid var(--bdr2);color:var(--tx3);padding:3px 10px;border-radius:20px;font-size:10px;font-weight:600;cursor:pointer;transition:all .15s;}
.gf-btn:hover{border-color:var(--pk);color:var(--pk);}
.gf-btn.gf-active{background:rgba(233,30,140,0.12);border-color:var(--pk);color:var(--pk);}

/* ═══════════════════════════════════════════
   MOBILE RESPONSIVE — max-width: 768px
   Desktop styles are completely untouched
═══════════════════════════════════════════ */
@media (max-width: 768px) {

  /* TOPBAR */
  .topbar { padding: 0 12px; height: 52px; position: sticky; top: 0; z-index: 100; }
  .tlogo-t { font-size: 11px !important; }
  .tlogo-s { display: none; }
  .tright { gap: 4px; }
  .tbtn { font-size: 10px !important; padding: 0 8px !important; height: 26px !important; }
  /* Hide less important topbar items on mobile */
  #adminbtn { display: none !important; }

  /* NAV — horizontal scroll instead of wrapping */
  .nav {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 8px;
    position: sticky;
    top: 52px;
    z-index: 99;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nb { font-size: 11px !important; padding: 0 10px !important; white-space: nowrap; flex-shrink: 0; }

  /* GLOBAL FILTER BAR */
  #global-filter-bar { overflow-x: auto; flex-wrap: nowrap; padding: 6px 10px; gap: 6px; }
  #global-filter-bar::-webkit-scrollbar { display: none; }
  .gf-btn { white-space: nowrap; flex-shrink: 0; font-size: 10px; padding: 3px 8px; }

  /* CONTENT */
  .content { padding: 12px 12px 80px 12px; }

  /* HERO */
  .hero { padding: 20px 16px; border-radius: 12px; }
  .hero-pnl { font-size: 44px !important; }
  .hero-strip { flex-direction: row; flex-wrap: wrap; gap: 0; }
  .hs { flex: 1; min-width: 33%; border-right: 1px solid var(--bdr2); padding: 8px 6px; }
  .hs:last-child { border-right: none; }
  .hs-v { font-size: 17px !important; }
  #h-change { font-size: 13px !important; }

  /* STAT GRID — 2 columns on mobile */
  .sgrid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .sc { padding: 12px 10px !important; }
  .sc-v { font-size: 24px !important; }

  /* TWO COLUMN LAYOUT — stack on mobile */
  .twocol { flex-direction: column !important; }
  .chart-card { margin-bottom: 10px; }

  /* EQUITY + MINI CALENDAR row — stack */
  .dash-bottom-row,
  div[style*="display:grid;grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ANALYTICS GRID */
  .an-grid { grid-template-columns: 1fr !important; }

  /* JOURNAL TABLE — scrollable horizontally */
  .twrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 700px; }
  .twrap td, .twrap th { font-size: 11px !important; padding: 6px 8px !important; white-space: nowrap; }

  /* MODAL — full screen on mobile */
  .modal-overlay { padding: 0 !important; align-items: flex-end !important; }
  .modal {
    border-radius: 20px 20px 0 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92vh;
    overflow-y: auto;
  }
  .modal-body { padding: 16px !important; }
  .mgrid { grid-template-columns: 1fr !important; }

  /* SHARE OVERLAY */
  .share-overlay { padding: 0 !important; align-items: flex-end !important; }
  .share-modal {
    border-radius: 20px 20px 0 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92vh;
    overflow-y: auto;
    padding: 16px !important;
  }

  /* ADD ACCOUNT OVERLAY */
  #addacct-overlay > div {
    border-radius: 20px 20px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-width: 100% !important;
  }

  /* STREAK CARDS */
  .streak-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .streak-num { font-size: 22px !important; }
  .streak-label { font-size: 10px !important; }

  /* ADMIN PANEL */
  .admin-body { padding: 12px !important; }
  .akgrid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .mcard { flex-direction: column !important; gap: 10px !important; }
  .mstats { flex-wrap: wrap !important; }
  .ms { min-width: 45% !important; }

  /* DAILY TRACKER */
  .fgrid { grid-template-columns: 1fr !important; }
  .dcard { margin-bottom: 10px !important; }

  /* CALENDAR */
  .calday { min-height: 52px !important; padding: 4px !important; }
  .calday-n { font-size: 11px !important; }
  .calday-p { font-size: 10px !important; }
  .caldow { font-size: 9px !important; padding: 6px 0 !important; }

  /* BOTTOM SAFE AREA for phones */
  .content { padding-bottom: 20px; }

  /* BUTTONS */
  .btn-add, .btn-imp { font-size: 12px !important; padding: 8px 14px !important; }

  /* FORM FIELDS */
  .linput, .mi, select { font-size: 16px !important; } /* prevents iOS zoom on focus */

  /* LEADERBOARD */
  .lb-wrap { overflow-x: auto; }

  /* SECTION HEADERS */
  .stitle { font-size: 11px !important; }

  /* HERO ACCOUNT SELECTOR */
  .acct-wrap { flex-wrap: wrap; justify-content: center; }
}

/* EXTRA SMALL — phones under 400px */
@media (max-width: 400px) {
  .sgrid { grid-template-columns: 1fr 1fr !important; }
  .hero-pnl { font-size: 36px !important; }
  .nb { font-size: 10px !important; padding: 0 8px !important; }
  .tbtn { font-size: 9px !important; padding: 0 6px !important; }
}






/* ════════════════════════════════════════════════
   HTL PREMIUM — Geist + Space Grotesk
   Issues addressed:
   1. Typography: Geist, weight-based hierarchy, no
      excessive tracking
   2. Spacing: 8px grid, generous breathing room
   3. Card proportions: clear visual weight variance
   4. Button & detail polish
════════════════════════════════════════════════ */

/* ── 1. TYPOGRAPHY SYSTEM ── */

/* Base: Geist everywhere */
*, body {
  font-family: 'Geist', 'Inter', -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Space Grotesk for financial data — tabular, authoritative */
#h-bal, #h-peak, .hero-pnl, .sc-v, .hs-v,
.dpnl, .dsv, .pnl-cell {
  font-family: 'Space Grotesk', sans-serif;font-variant-numeric:tabular-nums;
  font-variant-numeric: tabular-nums;
}

/* Kill the excessive tracking in base styles */
.hero-label {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
  color: var(--tx3) !important;
  margin-bottom: 8px !important;
}

/* Large P&L: bold, tight, monospaced — the hero metric */
.hero-pnl {
  font-family:'Space Grotesk',sans-serif !important;font-variant-numeric:tabular-nums !important;
  font-size: 64px !important;
  font-weight: 600 !important;
  letter-spacing: -2px !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;
}

/* Hero sub-stats: clear but not shouting */
.hs-l {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
  text-transform: none !important;
  color: var(--tx3) !important;
  margin-bottom: 4px !important;
}
.hs-v {
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px !important;
}

/* Stat card labels: small, weight creates hierarchy — not caps */
.sc-l {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
  text-transform: none !important;
  color: var(--tx3) !important;
  margin-bottom: 8px !important;
}
/* Stat values: large mono, bold */
.sc-v {
  font-family:'Space Grotesk',sans-serif !important;font-variant-numeric:tabular-nums !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.1 !important;
  font-variant-numeric: tabular-nums;
}

/* Section titles: smaller, weight-based, no caps */
.stitle {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.1px !important;
  text-transform: none !important;
  color: var(--tx2) !important;
  border-bottom: 1px solid var(--bdr3) !important;
  padding-bottom: 10px !important;
  margin-bottom: 20px !important;
}

/* Table headers: 11px medium, subtle — not yelling */
th {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
  text-transform: none !important;
  color: var(--tx3) !important;
  background: var(--bg3) !important;
  border-bottom: 1px solid var(--bdr2) !important;
  padding: 10px 16px !important;
}

/* Form labels: medium weight, no caps */
.field label, .ml {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--tx3) !important;
}

/* Chart titles */
.chart-title {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: -0.1px !important;
  text-transform: none !important;
  color: var(--tx2) !important;
  margin-bottom: 16px !important;
}

/* Calendar */
.caldow {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important; /* only place uppercase is justified */
  color: var(--tx3) !important;
}
.calmname {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.1px !important;
}

/* Analytics labels */
.an-card-l, .acard-l, .ms-l {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
  text-transform: none !important;
  color: var(--tx3) !important;
}

/* Modal titles */
.otitle, .modal-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.2px !important;
}

/* Login */
.ltitle {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.4px !important;
}
.lsub {
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.6 !important;
  color: var(--tx3) !important;
}

/* Topbar brand */
.tlogo-t {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.2px !important;
}
.tlogo-s {
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  opacity: 0.45 !important;
}

/* Navigation tabs */
.nb {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: -0.1px !important;
}
.nb.active {
  font-weight: 600 !important;
}

/* Badges */
.badge {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
}


/* ── 2. SPACING SYSTEM (8px grid) ── */

.content { padding: 32px; }

/* Hero: more generous breathing room */
.hero {
  padding: 32px 36px !important;
  margin-bottom: 24px !important;
  border-radius: 16px !important;
}
.hero-strip {
  padding-top: 24px !important;
  margin-top: 24px !important;
}
.hs { padding: 0 24px !important; }

/* Stat grid: proper gap */
.sgrid {
  gap: 16px !important;
  margin-bottom: 24px !important;
}

/* Stat cards: more padding — they were cramped */
.sc {
  padding: 24px !important;
  border-radius: 14px !important;
}

/* Chart card */
.chart-card {
  padding: 24px !important;
  margin-bottom: 24px !important;
  border-radius: 14px !important;
}

/* Day cards */
.dcard {
  padding: 20px !important;
  border-radius: 14px !important;
  margin-bottom: 16px !important;
}

/* Table */
td { padding: 12px 16px !important; }
.twrap { border-radius: 14px !important; }

/* Analytics sections */
.an-section {
  padding: 24px !important;
  border-radius: 14px !important;
  margin-bottom: 20px !important;
}

/* Section title spacing */
.stitle { margin-bottom: 20px !important; }

/* Content max-width — give room to breathe */
@media (min-width: 1400px) {
  .content { padding: 32px 48px; }
}


/* ── 3. CARD PROPORTIONS & VISUAL WEIGHT ── */

/* Glass topbar */
.topbar {
  height: 56px !important;
  padding: 0 24px !important;
  background: rgba(14,11,26,0.82) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
body.light .topbar {
  background: rgba(255,255,255,0.88) !important;
  border-bottom: 1px solid rgba(0,0,0,0.07) !important;
}

/* Nav */
.nav {
  background: rgba(14,11,26,0.72) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  height: 42px !important;
  padding: 0 24px !important;
}
body.light .nav {
  background: rgba(244,242,249,0.85) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}

/* Hero: the large P&L card should feel like a statement */
.hero {
  background: var(--bg2) !important;
  border: 1px solid var(--bdr2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 4px 24px rgba(0,0,0,0.3) !important;
  position: relative !important;
  overflow: hidden !important;
}
.hero::before {
  content: '';
  position: absolute;
  top: -100px; left: -60px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(88,28,190,0.10) 0%, transparent 70%);
  pointer-events: none;
}
body.light .hero {
  background: #fff !important;
  border-color: rgba(0,0,0,0.07) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06) !important;
}

/* Stat cards: subtle glass, distinct from hero */
.sc {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.sc:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 8px 24px rgba(0,0,0,0.3) !important;
}
body.light .sc {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.07) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04) !important;
}
body.light .sc:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}

/* Win/loss cards */
.sc.sc-win {
  background: rgba(52,211,153,0.06) !important;
  border-color: rgba(52,211,153,0.16) !important;
}
.sc.sc-win .sc-v { color: #34D399 !important; }
.sc.sc-win .sc-l { color: rgba(52,211,153,0.7) !important; }
.sc.sc-los {
  background: rgba(248,113,113,0.06) !important;
  border-color: rgba(248,113,113,0.14) !important;
}
.sc.sc-los .sc-v { color: #F87171 !important; }

/* Chart + day cards */
.chart-card {
  background: var(--bg2) !important;
  border: 1px solid var(--bdr2) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 2px 8px rgba(0,0,0,0.2) !important;
}
body.light .chart-card {
  background: #fff !important;
  border-color: rgba(0,0,0,0.07) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
}
.dcard {
  background: var(--bg2) !important;
  border: 1px solid var(--bdr2) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 1px 4px rgba(0,0,0,0.2) !important;
  transition: transform 0.18s ease, border-color 0.18s ease !important;
}
.dcard:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
body.light .dcard {
  background: #fff !important;
  border-color: rgba(0,0,0,0.07) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

/* Table */
.twrap {
  border: 1px solid var(--bdr2) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15) !important;
}
body.light .twrap {
  border-color: rgba(0,0,0,0.07) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}
tr.twin td { background: rgba(52,211,153,0.05) !important; }
tr.tlos td { background: rgba(248,113,113,0.05) !important; }

/* Calendar */
.calmonth {
  background: var(--bg2) !important;
  border: 1px solid var(--bdr2) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
}
body.light .calmonth {
  background: #fff !important;
  border-color: rgba(0,0,0,0.07) !important;
}
.calmhdr {
  background: var(--bg3) !important;
  border-bottom: 1px solid var(--bdr2) !important;
}
body.light .calmhdr {
  background: #FAFAFE !important;
  border-bottom-color: rgba(0,0,0,0.06) !important;
}
.calday { border-right: 1px solid var(--bdr3) !important; border-bottom: 1px solid var(--bdr3) !important; }
body.light .calday { border-color: rgba(0,0,0,0.04) !important; }

/* Analytics */
.an-section {
  background: var(--bg2) !important;
  border: 1px solid var(--bdr2) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 4px rgba(0,0,0,0.15) !important;
}
body.light .an-section {
  background: #fff !important;
  border-color: rgba(0,0,0,0.07) !important;
}

/* Login */
#lp { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
body:not(.light) #lp {
  background: var(--bg);
  background-image: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(100,50,200,0.22) 0%, transparent 65%);
}
.lcard {
  border-radius: 20px !important;
  padding: 48px 44px !important;
  background: var(--bg2) !important;
  border: 1px solid var(--bdr) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 24px 64px rgba(0,0,0,0.5) !important;
  width: 400px !important;
}
body.light .lcard {
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.08) !important;
}
.lcard img {
  box-shadow: 0 0 0 3px rgba(233,30,140,0.2), 0 0 0 6px rgba(233,30,140,0.07) !important;
  margin-bottom: 24px !important;
}

/* Modals */
.overlay, .modal-overlay, .share-overlay {
  background: rgba(10,8,20,0.82) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.ocard, .modal-card, .modal {
  border-radius: 18px !important;
  border: 1px solid var(--bdr) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 24px 60px rgba(0,0,0,0.5) !important;
}


/* ── 4. BUTTONS & DETAIL POLISH ── */

/* Primary button: gradient, shadow, lift */
.btn-p, .lbtn, .btn-add, .abtn {
  font-family: 'Geist', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.1px !important;
  background: linear-gradient(145deg, #E91E8C 0%, #7B2FBE 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 12px rgba(233,30,140,0.3) !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
  cursor: pointer !important;
}
.btn-p:hover, .lbtn:hover, .btn-add:hover, .abtn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 8px 20px rgba(233,30,140,0.4) !important;
}
.btn-p:active, .lbtn:active, .btn-add:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px rgba(233,30,140,0.25) !important;
}

/* Secondary button */
.btn-s, .btn-imp {
  font-family: 'Geist', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -0.1px !important;
  border-radius: 10px !important;
  transition: background 0.15s, border-color 0.15s !important;
}

/* Topbar buttons */
.tbtn {
  font-family: 'Geist', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: -0.1px !important;
  height: 30px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
}

/* Inputs */
.linput,
.field input, .field select, .field textarea,
input.mi, select.mi, textarea.mt {
  font-family: 'Geist', sans-serif !important;
  font-size: 13px !important;
  background: var(--bg3) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 8px !important;
  color: var(--tx) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.linput:focus,
.field input:focus, .field select:focus, .field textarea:focus,
input.mi:focus, select.mi:focus, textarea.mt:focus {
  outline: none !important;
  border-color: rgba(168,85,247,0.55) !important;
  box-shadow: 0 0 0 3px rgba(168,85,247,0.12) !important;
}
body.light .linput,
body.light .field input, body.light .field select, body.light .field textarea,
body.light input.mi, body.light select.mi, body.light textarea.mt {
  background: #fff !important;
  border-color: rgba(0,0,0,0.1) !important;
}

/* Login input */
.lbtn { padding: 14px !important; font-size: 14px !important; width: 100% !important; border-radius: 10px !important; }
.linput { padding: 12px 14px !important; border-radius: 10px !important; }

/* Badge polish */
.bwin {
  background: rgba(52,211,153,0.1) !important;
  border: 1px solid rgba(52,211,153,0.2) !important;
  color: #34D399 !important;
}
.blos {
  background: rgba(248,113,113,0.1) !important;
  border: 1px solid rgba(248,113,113,0.18) !important;
  color: #F87171 !important;
}
.bbe {
  background: rgba(168,85,247,0.1) !important;
  border: 1px solid rgba(168,85,247,0.18) !important;
  color: #A855F7 !important;
}

/* Hero divider line */
.hero-div {
  width: 28px !important;
  height: 1px !important;
  background: linear-gradient(90deg, var(--pk), transparent) !important;
  opacity: 0.4 !important;
  margin: 20px auto !important;
}

/* Hero strip borders */
.hero-strip { border-top: 1px solid var(--bdr3) !important; }
.hs { border-right-color: var(--bdr3) !important; }

/* Global filter buttons */
.gf-btn {
  font-family: 'Geist', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
}

/* Scrollbar — refined */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
body.light ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); }

/* Responsive */
@media (max-width: 768px) {
  .content { padding: 16px !important; }
  .hero { padding: 20px !important; }
  .hero-pnl { font-size: 48px !important; }
  .sc-v { font-size: 24px !important; }
  .sgrid { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }
  .topbar { padding: 0 16px !important; }
}

/* ════════════════════════════════════════════
   TYPOGRAPHY REFINEMENT — Geist / Space Grotesk
   Bloomberg data authority × Apple precision
   No layout changes. No font family changes.
════════════════════════════════════════════ */

/* ── GLOBAL BASE ── */
body {
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* ── HERO P&L — 700w, authoritative, tight ── */
.hero-pnl {
  font-size: 68px !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  font-family:'Space Grotesk',sans-serif !important;font-variant-numeric:tabular-nums !important;
  font-variant-numeric: tabular-nums;
}

/* ── HERO LABEL — softer, barely-there ── */
.hero-label {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  opacity: 0.45 !important;
  color: var(--tx) !important;
}

/* ── HERO STRIP: sub-metrics ── */
.hs-l {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: var(--tx3) !important;
  margin-bottom: 5px !important;
}
.hs-v {
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  font-family:'Space Grotesk',sans-serif !important;font-variant-numeric:tabular-nums !important;
  font-variant-numeric: tabular-nums;
}

/* ── KPI STAT CARDS ── */
.sc-l {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: var(--tx3) !important;
  margin-bottom: 8px !important;
}
.sc-v {
  font-size: 32px !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  font-family:'Space Grotesk',sans-serif !important;font-variant-numeric:tabular-nums !important;
  font-variant-numeric: tabular-nums;
}

/* ── SECTION TITLES ── */
.stitle {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--tx2) !important;
  border-bottom: 1px solid var(--bdr3) !important;
  padding-bottom: 10px !important;
  margin-bottom: 18px !important;
}

/* ── CHART TITLES ── */
.chart-title {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--tx2) !important;
  margin-bottom: 14px !important;
}

/* ── TABLE HEADERS ── */
th {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: var(--tx3) !important;
}
td {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* ── NAVIGATION ── */
.nb {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}
.nb.active {
  font-weight: 600 !important;
}

/* ── TOPBAR ── */
.tlogo-t {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}
.tlogo-s {
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  opacity: 0.4 !important;
}

/* ── FORM LABELS — weight over caps ── */
.field label, .ml {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--tx3) !important;
}

/* ── DAILY CARDS ── */
.ddate {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
.dpnl {
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  font-family:'Space Grotesk',sans-serif !important;font-variant-numeric:tabular-nums !important;
  font-variant-numeric: tabular-nums;
}
.dsl {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: var(--tx3) !important;
  text-transform: none !important;
}
.dsv {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  font-family:'Space Grotesk',sans-serif !important;font-variant-numeric:tabular-nums !important;
}

/* ── ANALYTICS LABELS ── */
.an-card-l, .acard-l, .ms-l, .bar-label {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--tx3) !important;
}
.bar-stat {
  font-size: 12px !important;
  font-weight: 500 !important;
  font-family:'Space Grotesk',sans-serif !important;font-variant-numeric:tabular-nums !important;
}

/* ── STREAKS ── */
.streak-num {
  font-size: 32px !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  font-family:'Space Grotesk',sans-serif !important;font-variant-numeric:tabular-nums !important;
}
.streak-label {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: var(--tx3) !important;
}

/* ── CALENDAR ── */
.caldow {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--tx3) !important;
}
.calday-n {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}
.calday-p {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  font-family:'Space Grotesk',sans-serif !important;font-variant-numeric:tabular-nums !important;
}
.calmname {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* ── LOGIN ── */
.ltitle {
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}
.lsub {
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.6 !important;
  color: var(--tx3) !important;
}
.lbtn {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* ── BUTTONS ── */
.btn-p, .btn-add {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
.btn-s {
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}
.tbtn {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

/* ── MODAL TITLES ── */
.otitle, .modal-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

/* ── BODY / PARAGRAPH TEXT ── */
.rcard, .aff, .chk {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
}

/* ── BADGES ── */
.badge, .bwin, .blos, .bbe {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* ── TIER CHIPS ── */
.tier-chip-adv, .tier-chip-gold {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

/* ── SUPPRESS remaining uppercase+tracking combos ── */
[style*="text-transform:uppercase"][style*="letter-spacing:2"],
[style*="text-transform: uppercase"][style*="letter-spacing: 2"] {
  letter-spacing: 0.06em !important;
}

/* ── DASHBOARD REFINEMENTS ── */

/* Hero: left-aligned metric, not center */
.hero { text-align: left !important; }
.hero-strip { justify-content: flex-start !important; }
.hs { text-align: left !important; padding: 0 32px 0 0 !important; border-right: 1px solid var(--bdr3) !important; }
.hs:last-child { border-right: none !important; }
.hero-div { margin: 20px 0 !important; }

/* Account selector in hero — compact */
.acct-sel {
  font-size: 12px !important;
  font-weight: 600 !important;
  height: 28px !important;
  padding: 0 10px !important;
  border-radius: 7px !important;
}
.acct-add {
  border-radius: 7px !important;
  font-size: 14px !important;
  transition: background 0.15s, border-color 0.15s !important;
}
.acct-add:hover { background: var(--bg4) !important; }

/* sgrid spacing */
.sgrid {
  gap: 12px !important;
  margin-bottom: 16px !important;
}

/* Equity curve: taller, more breathing room */
#eqsvg { overflow: visible; }

/* dash-cal-total: monospace, right-aligned */
#dash-cal-total {
  font-family:'Space Grotesk',sans-serif !important;font-variant-numeric:tabular-nums !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

/* Streak cards inside chart card */
#dash-streaks .sc {
  padding: 14px !important;
  border-radius: 10px !important;
}

/* Rules bar — refined */
#dash-rules-pct {
  font-family:'Space Grotesk',sans-serif !important;font-variant-numeric:tabular-nums !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--tx3) !important;
}

/* Personal bests — no emoji header */
#personal-best-card .chart-title {
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Recent trades header */
.chart-card .chart-title { letter-spacing: -0.01em !important; }

/* h-change growth indicator */
#h-change {
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

/* h-since */
#h-since {
  font-size: 12px !important;
  color: var(--tx3) !important;
}

/* h-name (Total P&L label) already using .hero-label */

/* Export/action buttons row */
.dash-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Chart cards grid gap */
.chart-card { margin-bottom: 0; }

/* ════════════════════════════════════════════════════
   LUXURY POLISH PASS — Apple × TradingView × Linear
   Every rule here fixes a specific "AI-generated" tell.
════════════════════════════════════════════════════ */

/* ── 1. REMOVE VISIBLE BORDERS — use depth instead ── */
.sc {
  border: none !important;
  box-shadow:
    0 0 0 1px var(--bdr2),
    0 2px 8px rgba(0,0,0,0.18) !important;
}
body.light .sc {
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.06),
    0 2px 12px rgba(0,0,0,0.06) !important;
}
.chart-card {
  border: none !important;
  box-shadow:
    0 0 0 1px var(--bdr2),
    0 4px 16px rgba(0,0,0,0.2) !important;
}
body.light .chart-card {
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.06),
    0 4px 16px rgba(0,0,0,0.05) !important;
}
.dcard {
  border: none !important;
  box-shadow:
    0 0 0 1px var(--bdr2),
    0 2px 8px rgba(0,0,0,0.15) !important;
}
body.light .dcard {
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.06),
    0 2px 8px rgba(0,0,0,0.05) !important;
}

/* ── 2. HERO — left-aligned, breathing room ── */
.hero {
  text-align: left !important;
  padding: 32px 36px !important;
}
.hero-label {
  text-align: left !important;
}
.hero-pnl {
  text-align: left !important;
  font-size: 72px !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
  line-height: 0.95 !important;
  margin-top: 6px !important;
}
#h-change {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--tx3) !important;
  margin-top: 10px !important;
  letter-spacing: 0 !important;
}
#h-since {
  font-size: 11px !important;
  color: var(--tx3) !important;
  opacity: 0.55 !important;
  margin-top: 3px !important;
}
.hero-div {
  width: 100% !important;
  height: 1px !important;
  background: var(--bdr3) !important;
  margin: 24px 0 !important;
  opacity: 1 !important;
}
.hero-strip {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}
.hs {
  text-align: left !important;
  padding: 0 40px 0 0 !important;
  border-right: 1px solid var(--bdr3) !important;
  margin-right: 40px !important;
}
.hs:last-child {
  border-right: none !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
}
.hs-l {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--tx3) !important;
  letter-spacing: 0 !important;
  margin-bottom: 6px !important;
}
.hs-v {
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  font-family:'Space Grotesk',sans-serif !important;font-variant-numeric:tabular-nums !important;
  font-variant-numeric: tabular-nums;
}

/* ── 3. STAT CARDS — breathing room, no cramping ── */
.sgrid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}
.sc {
  padding: 22px 20px !important;
  border-radius: 14px !important;
  background: var(--bg2) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.sc:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 0 0 1px var(--bdr),
    0 8px 24px rgba(0,0,0,0.25) !important;
}
body.light .sc:hover {
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.1),
    0 8px 24px rgba(0,0,0,0.08) !important;
}
.sc-l {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--tx3) !important;
  letter-spacing: 0 !important;
  margin-bottom: 10px !important;
  line-height: 1 !important;
}
.sc-v {
  font-size: 30px !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  font-family:'Space Grotesk',sans-serif !important;font-variant-numeric:tabular-nums !important;
  font-variant-numeric: tabular-nums;
}

/* ── 4. SECTION TITLES — weight only, no decoration ── */
.stitle {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--tx) !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 16px !important;
  opacity: 0.7 !important;
}
.chart-title {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--tx) !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 16px !important;
  opacity: 0.65 !important;
}

/* ── 5. CHART CARDS — more generous ── */
.chart-card {
  padding: 24px !important;
  border-radius: 16px !important;
  background: var(--bg2) !important;
  margin-bottom: 0 !important;
}

/* ── 6. TABLE — editorial, not boxy ── */
.twrap {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  border: 1px solid var(--bdr3) !important;
}
body.light .twrap {
  border-color: rgba(0,0,0,0.06) !important;
}
th {
  background: transparent !important;
  border-bottom: 1px solid var(--bdr3) !important;
  padding: 10px 16px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--tx3) !important;
  letter-spacing: 0 !important;
}
td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--bdr3) !important;
  font-size: 13px !important;
  color: var(--tx2) !important;
}
tr:last-child td { border-bottom: none !important; }

/* ── 7. BUTTON POLISH — custom, not Tailwind ── */
.btn-p, .btn-add, .abtn, .lbtn {
  background: linear-gradient(155deg, #E91E8C 0%, #7B2FBE 100%) !important;
  border: none !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 2px 8px rgba(233,30,140,0.25) !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}
.btn-p:hover, .btn-add:hover, .abtn:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 6px 20px rgba(233,30,140,0.38) !important;
  transform: translateY(-1px) !important;
}
.btn-p:active, .btn-add:active {
  transform: translateY(0) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 1px 4px rgba(233,30,140,0.2) !important;
}
.btn-s {
  background: var(--bg3) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: var(--tx2) !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}
.btn-s:hover {
  background: var(--bg4) !important;
  border-color: var(--bdr2) !important;
}
body.light .btn-s {
  border-color: rgba(0,0,0,0.1) !important;
}

/* ── 8. ACCOUNT SELECTOR — refined, not dashed ── */
.acct-add {
  border: 1px solid var(--bdr) !important;
  border-radius: 7px !important;
  background: var(--bg3) !important;
  color: var(--tx3) !important;
  transition: all 0.15s !important;
}
.acct-add:hover {
  background: var(--bg4) !important;
  color: var(--tx) !important;
  border-color: var(--bdr2) !important;
}
.acct-sel {
  border: 1px solid var(--bdr) !important;
  background: var(--bg3) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 5px 10px !important;
  color: var(--tx2) !important;
}

/* ── 9. TOPBAR — glass, lighter ── */
.topbar {
  height: 52px !important;
  border-bottom: 1px solid var(--bdr3) !important;
}
.tlogo-t {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}
.tbtn {
  font-size: 12px !important;
  font-weight: 500 !important;
  height: 28px !important;
  padding: 0 12px !important;
  border-radius: 7px !important;
  letter-spacing: -0.01em !important;
}
.sout-btn {
  background: transparent !important;
  border: 1px solid var(--bdr) !important;
  color: var(--tx3) !important;
}
.uchip {
  background: rgba(233,30,140,0.08) !important;
  border: 1px solid rgba(233,30,140,0.18) !important;
  color: var(--pk) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* ── 10. NAV — Linear style ── */
.nav {
  height: 40px !important;
  padding: 0 20px !important;
}
.nb {
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 0 10px !important;
  letter-spacing: -0.01em !important;
  color: var(--tx3) !important;
}
.nb:hover { color: var(--tx2) !important; }
.nb.active {
  color: var(--tx) !important;
  font-weight: 600 !important;
  border-bottom: 2px solid var(--pk) !important;
}

/* ── 11. RULES BAR — neutral track ── */
#dash-rules-bar {
  height: 4px !important;
  border-radius: 2px !important;
}
/* Track wrapper */
#dash-rules-bar + * ,
#dash-rules-bar {
  border-radius: 2px !important;
}

/* ── 12. SPACING — 8px system, section gaps ── */
.content { padding: 28px 32px !important; }

/* ── 13. CALENDAR — slightly larger gaps ── */
#dash-cal-grid {
  gap: 6px !important;
}

/* ── 14. WIN/LOSS ROWS — softer, not neon ── */
tr.twin td { background: rgba(52,211,153,0.04) !important; }
tr.tlos td { background: rgba(248,113,113,0.04) !important; }
.bwin {
  background: rgba(52,211,153,0.08) !important;
  border: 1px solid rgba(52,211,153,0.15) !important;
  color: var(--gn) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 5px !important;
}
.blos {
  background: rgba(248,113,113,0.08) !important;
  border: 1px solid rgba(248,113,113,0.15) !important;
  color: var(--rd) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 5px !important;
}

/* ── 15. DAILY CARDS ── */
.dcard {
  padding: 20px !important;
  border-radius: 14px !important;
  background: var(--bg2) !important;
}
.ddate {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--tx3) !important;
  letter-spacing: 0 !important;
}
.dpnl {
  font-size: 24px !important;
  font-weight: 600 !important;
  font-family:'Space Grotesk',sans-serif !important;font-variant-numeric:tabular-nums !important;
  letter-spacing: -0.03em !important;
}

/* ── 16. MODAL / OVERLAY REFINEMENTS ── */
.ocard, .modal-card, .modal {
  border-radius: 18px !important;
  border: 1px solid var(--bdr2) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.45) !important;
}
.ohdr, .modal-hdr, .modal-header {
  border-bottom: 1px solid var(--bdr3) !important;
  padding: 18px 24px !important;
}
.otitle, .modal-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}
.obody, .modal-bod { padding: 20px 24px !important; }
.oftr, .modal-ftr, .modal-footer { padding: 16px 24px !important; border-top: 1px solid var(--bdr3) !important; }

/* ── 17. LOGIN CARD — presence ── */
.lcard {
  border-radius: 20px !important;
  padding: 48px 44px !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 0 1px var(--bdr2) !important;
}
.ltitle {
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  margin-bottom: 6px !important;
}
.lsub {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--tx3) !important;
  font-weight: 400 !important;
}
.lbtn {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  border-radius: 10px !important;
  padding: 14px !important;
}
.linput {
  font-size: 14px !important;
  padding: 12px 14px !important;
  border-radius: 9px !important;
}

/* ── 18. GLOBAL TYPOGRAPHY FINAL PASS ── */
body { font-size: 14px !important; line-height: 1.5 !important; }

/* Scrollbar — invisible until hover */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bdr2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--bdr); }

/* Focus rings — clean */
*:focus-visible {
  outline: 2px solid rgba(168,85,247,0.5) !important;
  outline-offset: 2px !important;
}

/* Selection */
::selection {
  background: rgba(168,85,247,0.25);
  color: var(--tx);
}

/* Smooth all transitions that aren't already set */
button, input, select, textarea, a {
  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

/* ════════════════════════════════════════════════════════════
   DEPTH & LIGHTING PASS — Four Distinct Surface Elevations
   
   Level 0 — Page:        #0E0B1A  no border, ambient gradients
   Level 1 — Panels:      #161228  shadow only, no border
   Level 2 — Cards:       #1A1530  inset top-highlight + shadow
   Level 3 — Interactive: #1E1735  border on focus/hover only
   
   Purple reserved for: active tabs, buttons, focus rings, hover.
   Not for resting borders.
════════════════════════════════════════════════════════════ */

/* ── AMBIENT BACKGROUND ── */
/* Pull back to 3–6% so it reads as atmosphere, not color */
body:not(.light) {
  background-image:
    radial-gradient(ellipse 65% 40% at 50%  0%,  rgba(110,50,220,0.05) 0%, transparent 65%),
    radial-gradient(ellipse 40% 30% at 100% 85%, rgba(200,30,140,0.04) 0%, transparent 55%),
    radial-gradient(ellipse 45% 35% at 0%   55%, rgba(80,30,190,0.04)  0%, transparent 55%) !important;
}

/* ── LEVEL 1: PANELS ── */
/* Hero, chart cards, day cards, cal months — float above page with shadow only */
.hero {
  background: radial-gradient(ellipse 500px 350px at 90% -15%, rgba(233,30,140,0.18) 0%, rgba(123,47,190,0.10) 45%, transparent 75%), #161228 !important;
  border: none !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 4px 24px rgba(0,0,0,0.28),
    0 1px 4px rgba(0,0,0,0.18) !important;
}
.chart-card {
  background: radial-gradient(ellipse 500px 350px at 90% -15%, rgba(233,30,140,0.18) 0%, rgba(123,47,190,0.10) 45%, transparent 75%), #161228 !important;
  border: none !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 2px 12px rgba(0,0,0,0.22),
    0 1px 3px rgba(0,0,0,0.14) !important;
}
.dcard {
  background: radial-gradient(ellipse 500px 350px at 90% -15%, rgba(233,30,140,0.18) 0%, rgba(123,47,190,0.10) 45%, transparent 75%), #161228 !important;
  border: none !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 2px 10px rgba(0,0,0,0.2),
    0 1px 2px rgba(0,0,0,0.12) !important;
}
.calmonth {
  background: radial-gradient(ellipse 500px 350px at 90% -15%, rgba(233,30,140,0.18) 0%, rgba(123,47,190,0.10) 45%, transparent 75%), #161228 !important;
  border: none !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 2px 12px rgba(0,0,0,0.22) !important;
}
.fwrap {
  background: radial-gradient(ellipse 500px 350px at 90% -15%, rgba(233,30,140,0.18) 0%, rgba(123,47,190,0.10) 45%, transparent 75%), #161228 !important;
  border: none !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 2px 10px rgba(0,0,0,0.18) !important;
}
.an-section {
  background: radial-gradient(ellipse 500px 350px at 90% -15%, rgba(233,30,140,0.18) 0%, rgba(123,47,190,0.10) 45%, transparent 75%), #161228 !important;
  border: none !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 2px 10px rgba(0,0,0,0.18) !important;
}

/* ── LEVEL 2: STAT CARDS ── */
/* Sit on top of panels — more visible elevation */
.sc {
  background: #1A1530 !important;
  border: none !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 4px 16px rgba(0,0,0,0.24),
    0 1px 3px rgba(0,0,0,0.16) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.sc:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 8px 24px rgba(0,0,0,0.32),
    0 2px 4px rgba(0,0,0,0.18) !important;
}
/* Win/loss cards keep their semantic tint but lose the border */
.sc.sc-win {
  background: rgba(52,211,153,0.07) !important;
  box-shadow:
    0 1px 0 rgba(52,211,153,0.12) inset,
    0 2px 10px rgba(0,0,0,0.2) !important;
}
.sc.sc-los {
  background: rgba(248,113,113,0.07) !important;
  box-shadow:
    0 1px 0 rgba(248,113,113,0.1) inset,
    0 2px 10px rgba(0,0,0,0.2) !important;
}

/* ── LEVEL 3: INTERACTIVE ELEMENTS ── */
/* Inputs, selects — neutral border, purple only on focus */
.field input, .field select, .field textarea,
input.mi, select.mi, textarea.mt, .linput {
  background: #1E1735 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: none !important;
}
.field input:focus, .field select:focus, .field textarea:focus,
input.mi:focus, select.mi:focus, textarea.mt:focus, .linput:focus {
  border-color: rgba(168,85,247,0.55) !important;
  box-shadow: 0 0 0 3px rgba(168,85,247,0.12) !important;
  outline: none !important;
}
.acct-sel, .acct-add {
  background: var(--bg3) !important;
  border: 1px solid var(--bdr) !important;
}
.btn-s {
  background: #1E1735 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.btn-s:hover {
  background: #261F42 !important;
  border-color: rgba(255,255,255,0.12) !important;
}

/* ── TOPBAR & NAV — borderless glass ── */
.topbar {
  background: rgba(22,18,40,0.82) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
}
body.light .topbar {
  background: rgba(255,255,255,0.88) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
.nav {
  background: rgba(22,18,40,0.75) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
body.light .nav {
  background: rgba(244,242,249,0.9) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}

/* Purple reserved for active nav only */
.nb.active {
  color: var(--tx) !important;
  border-bottom: 2px solid var(--pk) !important;
  font-weight: 600 !important;
}
.nb:not(.active):hover { color: var(--tx2) !important; }

/* ── TABLE — borderless rows, shadow container ── */
.twrap {
  border: none !important;
  background: radial-gradient(ellipse 300px 200px at 95% -20%, rgba(233,30,140,0.15), transparent 65%), #161228 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 2px 12px rgba(0,0,0,0.22) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}
th {
  background: rgba(255,255,255,0.025) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  color: var(--tx3) !important;
}
td {
  border-bottom: 1px solid rgba(255,255,255,0.03) !important;
}
tr:last-child td { border-bottom: none !important; }

/* ── CALENDAR CELLS — no border, implicit grid ── */
.calday {
  border-right: none !important;
  border-bottom: none !important;
}
.calmhdr {
  background: rgba(255,255,255,0.03) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
.caldow {
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}

/* ── HERO STRIP — hairline only ── */
.hero-div {
  width: 100% !important;
  height: 1px !important;
  background: rgba(255,255,255,0.05) !important;
  margin: 22px 0 !important;
}
.hs { border-right: 1px solid rgba(255,255,255,0.05) !important; }
.hero-strip { border-top: none !important; }

/* ── STITLE — remove border, use spacing ── */
.stitle {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 16px !important;
}

/* ── LCARD — stronger presence, no outline ── */
.lcard {
  background: radial-gradient(ellipse 500px 300px at 85% -20%, rgba(233,30,140,0.15), transparent 65%), #161228 !important;
  border: none !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 32px 80px rgba(0,0,0,0.5),
    0 8px 32px rgba(0,0,0,0.3) !important;
}

/* ── BUTTONS — purple gradient, no border ── */
.btn-p, .btn-add, .abtn, .lbtn {
  border: none !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 2px 8px rgba(168,85,247,0.25) !important;
}
.btn-p:hover, .btn-add:hover, .abtn:hover, .lbtn:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 6px 20px rgba(168,85,247,0.38) !important;
}

/* ── LIGHT MODE OVERRIDES ── */
body.light .sc {
  background: radial-gradient(ellipse 300px 200px at 90% -20%, rgba(233,30,140,0.12), transparent 65%), #FFFFFF !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.06) !important;
}
body.light .sc:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.06) !important;
}
body.light .chart-card,
body.light .dcard,
body.light .calmonth,
body.light .fwrap,
body.light .an-section {
  background: radial-gradient(ellipse 500px 350px at 90% -15%, rgba(233,30,140,0.10) 0%, rgba(123,47,190,0.06) 45%, transparent 75%), #FFFFFF !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.06) !important;
}
body.light .hero {
  background: radial-gradient(ellipse 500px 350px at 90% -15%, rgba(233,30,140,0.10) 0%, rgba(123,47,190,0.06) 45%, transparent 75%), #FFFFFF !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06) !important;
}
body.light .twrap {
  background: radial-gradient(ellipse 300px 200px at 95% -20%, rgba(233,30,140,0.09), transparent 65%), #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.06) !important;
}
body.light .lcard {
  background: radial-gradient(ellipse 500px 300px at 85% -20%, rgba(233,30,140,0.15), transparent 65%), #FFFFFF !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.1) !important;
}
body.light .field input, body.light .field select, body.light .field textarea,
body.light input.mi, body.light select.mi, body.light textarea.mt, body.light .linput {
  background: #F9F7FE !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}
body.light th {
  background: rgba(0,0,0,0.02) !important;
  border-bottom-color: rgba(0,0,0,0.06) !important;
}
body.light td { border-bottom-color: rgba(0,0,0,0.04) !important; }
body.light .btn-s {
  background: #F4F2F9 !important;
  border: 1px solid rgba(0,0,0,0.09) !important;
  color: var(--tx2) !important;
}
body.light .btn-s:hover {
  background: #EDE9F7 !important;
  border-color: rgba(0,0,0,0.12) !important;
}
body.light .hs { border-right-color: rgba(0,0,0,0.06) !important; }
body.light .hero-div { background: rgba(0,0,0,0.05) !important; }

/* ════════════════════════════════════════════════════════════
   HTL DESIGN SYSTEM — Built from the logo outward
   
   Logo analysis:
   — Circular magenta ring: #FF2D9F → ambient hero glow
   — Flowing cyan chart line: #00D4FF → data / analytics accent
   — Dark center: #0E0B1A → page background (already set)
   — Pink-to-magenta gradient: brand actions, key moments
   
   Three design motifs extracted:
   1. The Ring   → circular glow on hero, logo, key panels
   2. The Chart  → cyan accent for data viz, equity curve, analytics
   3. The Flow   → subtle curve dividers, smooth transitions
════════════════════════════════════════════════════════════ */

/* ── TOKEN: HTL CYAN — extracted from logo candlestick ── */
:root {
  --cy: #00C2D4;          /* HTL cyan — data & analytics */
  --gold: #E3B341;        /* premium accent — Trading Plan & Lifestyle Impact only */
  --gold-bright: #F5D77E;
  --gold-soft: rgba(227,179,65,0.35);
  --gold-dim: rgba(227,179,65,0.13);
  --cy-dim: rgba(0,194,212,0.12);
  --cy-bdr: rgba(0,194,212,0.25);
  --pk-ring: rgba(255,45,159,0.18); /* logo ring glow color */
}
body.light {
  --cy: #0099AA;
  --cy-dim: rgba(0,153,170,0.08);
  --cy-bdr: rgba(0,153,170,0.2);
}

/* ── MOTIF 1: THE RING ── */
/* Logo ring glow on topbar logo */
.tlogo img {
  box-shadow:
    0 0 0 2px rgba(255,45,159,0.5),
    0 0 0 5px rgba(255,45,159,0.12),
    0 0 16px rgba(255,45,159,0.18) !important;
}

/* Hero card — circular ambient glow emanating from center-top,
   like the logo ring expanding outward */
.hero::before {
  content: '';
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 320px;
  background: radial-gradient(
    circle,
    rgba(255,45,159,0.07) 0%,
    rgba(168,85,247,0.05) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

/* Login card — same ring treatment, more prominent */
body:not(.light) #lp::before {
  content: '';
  position: fixed;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    rgba(255,45,159,0.08) 0%,
    rgba(123,47,190,0.06) 45%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}
body:not(.light) #lp > * { position: relative; z-index: 1; }

/* ── MOTIF 2: THE CHART / CYAN ── */
/* Equity curve — use HTL cyan for positive, keeps red for loss */
/* (The JS will be updated separately) */

/* Analytics bar fills — cyan replaces generic purple */
.bar-fill {
  background: linear-gradient(90deg, var(--cy), rgba(0,194,212,0.7)) !important;
}

/* Win rate bar — cyan */
#dash-rules-bar {
  background: var(--cy) !important;
}

/* Streak dots / history — cyan for win streaks */
.streak-win-dot { background: var(--cy) !important; }

/* Analytics section accent borders — cyan instead of purple */
.an-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cy-bdr), transparent);
  border-radius: 16px 16px 0 0;
  pointer-events: none;
}
.an-section { position: relative; overflow: hidden; }

/* Dashboard calendar — profitable day uses cyan accent */
.calwin {
  background: rgba(0,194,212,0.06) !important;
  border-color: rgba(0,194,212,0.2) !important;
}
.calwin .calday-n { color: var(--cy) !important; opacity: 0.8; }
.calwin .calday-p { color: var(--cy) !important; }

/* The mini dashboard calendar win days */
.dash-cal-win { background: rgba(0,194,212,0.08) !important; }

/* ── MOTIF 3: THE FLOW ── */
/* Hero divider — a subtle flowing gradient line, not a hard rule */
.hero-div {
  width: 100% !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,45,159,0.2) 30%,
    rgba(168,85,247,0.15) 60%,
    transparent 100%
  ) !important;
  margin: 22px 0 !important;
}

/* Section title divider — flows from brand, fades to nothing */
.stitle::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 10px;
  background: linear-gradient(
    90deg,
    rgba(168,85,247,0.15) 0%,
    rgba(0,194,212,0.08) 40%,
    transparent 75%
  );
}

/* Chart card top edge — subtle brand gradient accent line */
.chart-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,45,159,0.15) 30%,
    rgba(0,194,212,0.12) 65%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}
.chart-card { position: relative; overflow: hidden; }

/* ── INTERACTIVE: PURPLE RESERVED FOR ACTIONS ── */
/* Active nav pill — magenta underline only */
.nb.active {
  color: var(--tx) !important;
  font-weight: 600 !important;
  border-bottom: 2px solid #FF2D9F !important;
}

/* Primary buttons — the logo gradient */
.btn-p, .btn-add, .abtn, .lbtn {
  background: linear-gradient(145deg, #FF2D9F 0%, #7B2FBE 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 3px 12px rgba(255,45,159,0.3) !important;
}
.btn-p:hover, .btn-add:hover, .abtn:hover, .lbtn:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 6px 22px rgba(255,45,159,0.45) !important;
  transform: translateY(-1px) !important;
}

/* Win badges — use cyan to match chart / logo candlestick */
.bwin {
  background: rgba(0,194,212,0.1) !important;
  border: 1px solid rgba(0,194,212,0.22) !important;
  color: var(--cy) !important;
}

/* Green P&L keeps green — only win/rate badge gets cyan */
.sc.sc-win .sc-v { color: var(--gn) !important; }

/* ── LOGO RING APPLIED TO KEY CARDS ── */
/* Stat card hover — echoes the logo ring */
.sc:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 8px 24px rgba(0,0,0,0.32),
    0 0 0 1px rgba(255,45,159,0.12) !important;
}

/* ── TOPBAR LOGO AREA — ring reinforcement ── */
body:not(.light) .topbar {
  background: rgba(22,18,40,0.88) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}

/* ── AMBIENT: PAGE BACKGROUND ── */
/* Tighter, more precise — logo-ring-inspired top glow */
body:not(.light) {
  background-image:
    radial-gradient(ellipse 60% 35% at 50%  -2%, rgba(255,45,159,0.05)  0%, transparent 60%),
    radial-gradient(ellipse 45% 30% at 100% 90%, rgba(123,47,190,0.04)  0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 0%   60%, rgba(0,194,212,0.03)   0%, transparent 55%) !important;
}

/* ── EQUITY CURVE ── */
/* Updated via JS below — cyan for positive, red for negative */

/* ── LIGHT MODE ── */
body.light .calwin {
  background: rgba(0,153,170,0.05) !important;
}
body.light .bwin {
  background: rgba(0,153,170,0.08) !important;
  border-color: rgba(0,153,170,0.2) !important;
  color: var(--cy) !important;
}
body.light .hero::before { opacity: 0.5; }
body.light .chart-card::before { opacity: 0.4; }

/* ════════════════════════════════════════════════════════════
   WORKSPACE DESIGN LANGUAGE
   Trading command center, not a dashboard of widgets.
   
   Architecture:
   ws-command   — the dominant P&L panel
   ws-kpi-band  — horizontal terminal metric strip
   ws-panel     — workspace panel (replaces chart-card)
   ws-row       — two-panel layout
   ws-analytics — integrated analytics workspace
════════════════════════════════════════════════════════════ */

/* ── COMMAND ZONE ── */
.ws-command {
  background: radial-gradient(ellipse 500px 350px at 90% -15%, rgba(233,30,140,0.18) 0%, rgba(123,47,190,0.10) 45%, transparent 75%), #161228;
  border: 1px solid var(--bdr2);
  border-radius: 20px;
  padding: 40px 44px 40px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 4px 32px rgba(0,0,0,0.3);
}

.ws-command-watermark {
  position: absolute;
  top: -20px;
  right: -10px;
  width: 320px;
  height: 320px;
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
body.light .ws-command-watermark { opacity: 0.10; }

.jrn-hero {
  background: #161228;
  border: 1px solid var(--bdr2);
  border-radius: 20px;
  padding: 28px 150px 28px 36px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
body.light .jrn-hero { background: radial-gradient(ellipse 500px 300px at 85% -20%, rgba(233,30,140,0.15), transparent 60%), #FFFFFF; box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 8px 28px rgba(0,0,0,0.06); }
.jrn-hero-watermark {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 130px;
  height: 130px;
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
body.light .jrn-hero-watermark { opacity: 0.10; }
.jrn-hero-left, .jrn-hero-right { position: relative; z-index: 1; }
.jrn-hero-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #E91E8C, #7B2FBE);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 10px;
}
.jrn-hero-headline { font-size: 20px; font-weight: 600; color: var(--tx); letter-spacing: -0.01em; }
.jrn-hero-right { text-align: right; }
.jrn-hero-count { font-family:'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums; font-size: 32px; font-weight: 600; color: var(--tx); line-height: 1; }
.jrn-hero-count-label { font-size: 11px; color: var(--tx3); margin-top: 4px; }

.pf-hero {
  background: #161228;
  border: 1px solid var(--bdr2);
  border-radius: 20px;
  padding: 28px 150px 28px 36px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
body.light .pf-hero { background: radial-gradient(ellipse 500px 300px at 85% -20%, rgba(233,30,140,0.15), transparent 60%), #FFFFFF; box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 8px 28px rgba(0,0,0,0.06); }
.pf-hero-watermark {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 130px;
  height: 130px;
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
body.light .pf-hero-watermark { opacity: 0.10; }
.pf-hero-left, .pf-hero-right { position: relative; z-index: 1; }
.pf-hero-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #E91E8C, #7B2FBE);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 10px;
}
.pf-hero-headline { font-size: 20px; font-weight: 600; color: var(--tx); letter-spacing: -0.01em; }
.pf-hero-right { display: flex; gap: 24px; }
.pf-hero-stat { text-align: right; }
.pf-hero-stat-val { font-family:'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums; font-size: 32px; font-weight: 600; color: var(--tx); line-height: 1; }
.pf-hero-stat-label { font-size: 11px; color: var(--tx3); margin-top: 4px; }

.dt-hero {
  background: #161228;
  border: 1px solid var(--bdr2);
  border-radius: 20px;
  padding: 28px 150px 28px 36px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body.light .dt-hero { background: radial-gradient(ellipse 500px 300px at 85% -20%, rgba(233,30,140,0.15), transparent 60%), #FFFFFF; box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 8px 28px rgba(0,0,0,0.06); }
.dt-hero-watermark {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 130px;
  height: 130px;
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
body.light .dt-hero-watermark { opacity: 0.10; }
.dt-hero-left, .dt-hero-right { position: relative; z-index: 1; }
.dt-hero-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #E91E8C, #7B2FBE);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 10px;
}
.dt-hero-headline { font-size: 20px; font-weight: 600; color: var(--tx); letter-spacing: -0.01em; }
.dt-hero-right { display: flex; align-items: center; gap: 12px; }
.dt-hero-stat-val { font-family:'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums; font-size: 32px; font-weight: 600; color: var(--tx); line-height: 1; }
.dt-hero-stat-label { font-size: 11px; color: var(--tx3); margin-top: 4px; text-align: right; }

.an-hero {
  background: #161228;
  border: 1px solid var(--bdr2);
  border-radius: 20px;
  padding: 28px 150px 28px 36px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
body.light .an-hero { background: radial-gradient(ellipse 500px 300px at 85% -20%, rgba(233,30,140,0.15), transparent 60%), #FFFFFF; box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 8px 28px rgba(0,0,0,0.06); }
.an-hero-watermark {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 130px;
  height: 130px;
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
body.light .an-hero-watermark { opacity: 0.10; }
.an-hero-left, .an-hero-right { position: relative; z-index: 1; }
.an-hero-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #E91E8C, #7B2FBE);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 10px;
}
.an-hero-headline { font-size: 20px; font-weight: 600; color: var(--tx); letter-spacing: -0.01em; }
.an-hero-right { text-align: right; }
.an-hero-stat-val { font-family:'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums; font-size: 32px; font-weight: 600; color: var(--tx); line-height: 1; }
.an-hero-stat-label { font-size: 11px; color: var(--tx3); margin-top: 4px; }

.tw-hero, .ch-hero {
  background: #161228;
  border: 1px solid var(--bdr2);
  border-radius: 20px;
  padding: 28px 150px 28px 36px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
}
body.light .tw-hero, body.light .ch-hero { background: radial-gradient(ellipse 500px 300px at 85% -20%, rgba(233,30,140,0.15), transparent 60%), #FFFFFF; box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 8px 28px rgba(0,0,0,0.06); }
.tw-hero-watermark, .ch-hero-watermark {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 130px;
  height: 130px;
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
body.light .tw-hero-watermark, body.light .ch-hero-watermark { opacity: 0.10; }
.tw-hero-left, .tw-hero-right, .ch-hero-left, .ch-hero-right { position: relative; z-index: 1; }
.tw-hero-eyebrow, .ch-hero-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #E91E8C, #7B2FBE);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 10px;
}
.tw-hero-headline, .ch-hero-headline { font-size: 20px; font-weight: 600; color: var(--tx); letter-spacing: -0.01em; }
.tw-hero-sub, .ch-hero-sub { font-size: 12px; color: var(--tx3); margin-top: 4px; }
.tw-hero-stat-val, .ch-hero-stat-val { font-family:'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums; font-size: 32px; font-weight: 600; color: var(--tx); line-height: 1; text-align: right; }
.tw-hero-stat-label, .ch-hero-stat-label { font-size: 11px; color: var(--tx3); margin-top: 4px; text-align: right; }

.pp-hero {
  background: #161228;
  border: 1px solid var(--bdr2);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
body.light .pp-hero { background: radial-gradient(ellipse 300px 200px at 85% -20%, rgba(233,30,140,0.15), transparent 60%), #FFFFFF; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.pp-hero-watermark { position: absolute; top: -10px; right: -10px; width: 90px; height: 90px; opacity: 0.12; pointer-events: none; user-select: none; }
body.light .pp-hero-watermark { opacity: 0.09; }
.pp-hero-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  background: linear-gradient(90deg, #E91E8C, #7B2FBE); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 6px; position: relative;
}
.pp-hero-headline { font-size: 16px; font-weight: 600; color: var(--tx); position: relative; }

.cm-hero {
  background: #161228;
  border: 1px solid var(--bdr2);
  border-radius: 20px;
  padding: 28px 150px 28px 36px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
body.light .cm-hero { background: radial-gradient(ellipse 500px 300px at 85% -20%, rgba(233,30,140,0.15), transparent 60%), #FFFFFF; box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 8px 28px rgba(0,0,0,0.06); }
.cm-hero-watermark { position: absolute; top: -8px; right: -8px; width: 130px; height: 130px; opacity: 0.13; pointer-events: none; user-select: none; }
body.light .cm-hero-watermark { opacity: 0.10; }
.cm-hero-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  background: linear-gradient(90deg, #E91E8C, #7B2FBE); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 10px; position: relative;
}
.cm-hero-headline { font-size: 20px; font-weight: 600; color: var(--tx); letter-spacing: -0.01em; position: relative; }
.cm-hero-sub { font-size: 12px; color: var(--tx3); margin-top: 4px; position: relative; }


.ws-command-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}
.ws-acct-row {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.85;
}
.ws-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ws-action-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 7px;
  color: var(--tx3);
  font-size: 11px;
  font-weight: 500;
  padding: 5px 12px;
  cursor: pointer;
  font-family: 'Geist', sans-serif;
  letter-spacing: -0.01em;
  opacity: 0.75;
  transition: all 0.15s;
}
.ws-action-btn:hover {
  border-color: rgba(255,255,255,0.15);
  color: var(--tx2);
  background: rgba(255,255,255,0.03);
  opacity: 1;
}
.ws-share-btn {
  background: linear-gradient(145deg, #FF2D9F 0%, #7B2FBE 100%);
  border: none;
  border-radius: 7px;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 14px;
  cursor: pointer;
  font-family: 'Geist', sans-serif;
  letter-spacing: -0.01em;
  box-shadow: 0 2px 8px rgba(255,45,159,0.28);
  transition: all 0.15s;
}
.ws-share-btn:hover {
  box-shadow: 0 4px 16px rgba(255,45,159,0.42);
  transform: translateY(-1px);
}

/* Primary metric block */
.ws-primary-metric {
  position: relative;
  z-index: 1;
  margin-bottom: 4px;
}
.ws-metric-label {
  font-size: 11px;
  font-weight: 600;
  background: linear-gradient(90deg, #E91E8C, #7B2FBE);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.hero-pnl {
  font-family:'Space Grotesk',sans-serif !important;font-variant-numeric:tabular-nums !important;
  font-size: 80px !important;
  font-weight: 600 !important;
  letter-spacing: -0.05em !important;
  line-height: 0.92 !important;
  font-variant-numeric: tabular-nums;
}
.ws-metric-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--tx3);
  font-weight: 400;
  position: relative;
  z-index: 1;
}
.ws-meta-sep { opacity: 0.3; }
#h-change { font-size: 13px !important; font-weight: 500 !important; color: var(--tx3) !important; margin: 0 !important; }
#h-since  { font-size: 13px !important; color: var(--tx3) !important; margin: 0 !important; opacity: 1 !important; }

/* Flow line — the chart curve as a divider */
.ws-flow-line {
  position: relative;
  height: 1px;
  margin: 36px 0 32px;
  overflow: visible;
  z-index: 1;
}
.ws-flow-line::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,45,159,0.18) 25%,
    rgba(168,85,247,0.12) 55%,
    rgba(0,194,212,0.08) 75%,
    transparent 100%
  );
}

/* Secondary metrics band — terminal style */
.ws-metrics-band {
  display: flex;
  align-items: flex-start;
  gap: 0;
  position: relative;
  z-index: 1;
}
.ws-metric-cell {
  flex: 1;
  padding-right: 40px;
  border-right: 1px solid var(--bdr2);
  margin-right: 40px;
}
.ws-metric-cell:last-child {
  border-right: none;
  padding-right: 0;
  margin-right: 0;
}
.ws-cell-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--tx3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ws-metric-cell:last-child .ws-cell-label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ws-metric-cell:last-child .ws-cell-label::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cy);
  opacity: 0.8;
}
.ws-cell-value {
  font-family:'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--tx);
  font-variant-numeric: tabular-nums;
}

/* ── KPI BAND — one typeset instrument, hierarchy through rhythm ── */
.ws-kpi-band {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap;
  gap: 0 !important;
  background: radial-gradient(ellipse 500px 350px at 90% -15%, rgba(233,30,140,0.18) 0%, rgba(123,47,190,0.10) 45%, transparent 75%), #1A1530;
  border-radius: 14px;
  margin-bottom: 12px;
  padding: 22px 32px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 2px 8px rgba(0,0,0,0.18);
}
/* ── KPI ITEM — dedicated component, owns every style it needs.
   Does not use .sc or any shared stat-card class, so it can never inherit
   another component's background, border, shadow, hover effect, or
   pseudo-element again. ── */
.kpi-item {
  flex-grow: 1;
  flex-shrink: 0;
  margin-right: 26px;
}
.kpi-item-seam { margin-right: 60px; } /* wider pause at each natural seam — Win Rate|Profit Factor, Avg Win|Avg Loss, Red Days|Drawdown */
.kpi-item:last-child { margin-right: 0; }
.kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--tx3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
/* Preserves the existing soft-green label tint on Avg Win / Green Days */
.kpi-label-win { color: rgba(52,211,153,0.7); }
body.light .kpi-label-win { color: rgba(26,92,36,0.7); }
.kpi-value {
  font-family:'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--tx);
  font-variant-numeric: tabular-nums;
}

/* ── WORKSPACE PANELS ── */
.ws-panel {
  background: radial-gradient(ellipse 500px 350px at 90% -15%, rgba(233,30,140,0.18) 0%, rgba(123,47,190,0.10) 45%, transparent 75%), #161228;
  border-radius: 16px;
  margin-bottom: 12px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 2px 16px rgba(0,0,0,0.22);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
/* Accent line at top — chart curve motif */
.ws-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,45,159,0.12) 30%,
    rgba(0,194,212,0.10) 65%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}
.ws-panel-last { margin-bottom: 0; }

.ws-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px 0;
}
.ws-panel-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--tx3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ws-panel-stat {
  font-family:'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--cy);
}
.ws-panel-body {
  padding: 16px 24px 24px;
}
.ws-panel-body-chart {
  padding-bottom: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 160px;
}
.ws-panel-body-chart svg {
  flex: 1;
  height: 100% !important;
}

/* ── TWO-PANEL ROW ── */
.ws-row {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}
.ws-row-60-40 { grid-template-columns: 11fr 9fr; }

/* ── ANALYTICS WORKSPACE ── */
.ws-panel-analytics {
  margin-bottom: 12px;
}
.ws-analytics-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  gap: 0;
  padding: 16px 24px 24px;
}
.ws-analytics-divider {
  background: rgba(255,255,255,0.05);
  margin: 0 24px;
  align-self: stretch;
}
.ws-analytics-col {
  min-width: 0;
}
.ws-analytics-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--tx3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* ── TABLE IN WS-PANEL ── */
.ws-panel-last .twrap {
  border-radius: 0 0 16px 16px !important;
  box-shadow: none !important;
}
.ws-panel-last .twrap table th:first-child,
.ws-panel-last .twrap table td:first-child { padding-left: 24px !important; }
.ws-panel-last .twrap table th:last-child,
.ws-panel-last .twrap table td:last-child { padding-right: 24px !important; }
/* Column alignment — standard financial table convention:
   text stays left, numeric/currency goes right with tabular numerals,
   status indicators (badge, grade) are centered */
.ws-panel-last .twrap table th:nth-child(6),
.ws-panel-last .twrap table td:nth-child(6) { text-align: right; font-variant-numeric: tabular-nums; } /* Qty */
.ws-panel-last .twrap table th:nth-child(7),
.ws-panel-last .twrap table td:nth-child(7) { text-align: right; font-variant-numeric: tabular-nums; } /* P&L */
.ws-panel-last .twrap table th:nth-child(8),
.ws-panel-last .twrap table td:nth-child(8) { text-align: center; } /* W/L */
.ws-panel-last .twrap table th:nth-child(9),
.ws-panel-last .twrap table td:nth-child(9) { text-align: center; } /* Grade */

/* ── LIGHT MODE ── */
body.light .ws-command {
  background: radial-gradient(ellipse 500px 300px at 85% -20%, rgba(233,30,140,0.15), transparent 60%), #FFFFFF;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 8px 28px rgba(0,0,0,0.06);
}
body.light .ws-kpi-band { background: radial-gradient(ellipse 500px 350px at 90% -15%, rgba(233,30,140,0.10) 0%, rgba(123,47,190,0.06) 45%, transparent 75%), #FFFFFF; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
body.light .ws-panel { background: radial-gradient(ellipse 500px 350px at 90% -15%, rgba(233,30,140,0.10) 0%, rgba(123,47,190,0.06) 45%, transparent 75%), #FFFFFF; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
body.light .ws-analytics-divider { background: rgba(0,0,0,0.05); }
body.light .ws-flow-line::before {
  background: linear-gradient(90deg, transparent, rgba(255,45,159,0.12) 30%, rgba(168,85,247,0.08) 60%, transparent);
}
body.light .ws-action-btn {
  border-color: rgba(0,0,0,0.1);
  color: var(--tx3);
}
body.light .ws-action-btn:hover { border-color: rgba(0,0,0,0.2); background: rgba(0,0,0,0.02); }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .ws-row-60-40 { grid-template-columns: 1fr !important; }
  .ws-analytics-grid { grid-template-columns: 1fr !important; }
  .ws-analytics-divider { display: none; }
  .ws-kpi-band { padding: 20px 22px !important; row-gap: 18px !important; }
  .kpi-item { flex: 0 0 calc(25% - 20px) !important; margin-right: 20px !important; }
  .kpi-item-seam { margin-right: 20px !important; }
  .hero-pnl { font-size: 56px !important; }
  .ws-command { padding: 28px 24px 28px !important; }
}
@media (max-width: 600px) {
  .kpi-item { flex: 0 0 calc(50% - 16px) !important; margin-right: 16px !important; }
  .kpi-item-seam { margin-right: 16px !important; }
  .hero-pnl { font-size: 44px !important; }
}