* { margin: 0; padding: 0; box-sizing: border-box; }

:root, [data-theme="dark"]{
  --bg:#000000;--surface:#0a0a0a;--surface2:#121212;--surface3:#1a1a1a;
  --gauge-track:#26282f;
  --blue:#4295F1;--blue-dim:rgba(66,149,241,0.1);--blue-border:rgba(66,149,241,0.28);
  --green:#4ee89a;--green-dim:rgba(78,232,154,0.1);
  --red:#ff6b6b;--red-dim:rgba(255,107,107,0.1);
  --border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.13);
  --text:#f1f2f4;--text2:#dfe0e3;--text3:#c6c8ce;
  --text-strong:#ffffff;
  --nav-bg:rgba(0,0,0,0.85);
  --card-shadow:0 2px 20px rgba(0,0,0,0.7);
  --cal-win-bg:rgba(61,220,132,0.1);--cal-win-border:rgba(61,220,132,0.24);--cal-win-text:#3ddc84;
  --cal-loss-bg:rgba(241,82,82,0.1);--cal-loss-border:rgba(241,82,82,0.24);--cal-loss-text:#f15252;
}

[data-theme="light"]{
  --bg:#ffffff;--surface:#fafbfc;--surface2:#f4f5f7;--surface3:#eaecef;--gauge-track:#e3e6ea;
  --blue:#2f7fe0;--blue-dim:rgba(47,127,224,0.09);--blue-border:rgba(47,127,224,0.26);
  --green:#1a9653;--green-dim:rgba(26,150,83,0.09);
  --red:#d63b51;--red-dim:rgba(214,59,81,0.08);
  --border:rgba(0,0,0,0.08);--border2:rgba(0,0,0,0.15);
  --text:#20242e;--text2:#5a6475;--text3:#828b9b;
  --text-strong:#000000;
  --nav-bg:rgba(255,255,255,0.85);
  --card-shadow:0 1px 3px rgba(0,0,0,0.06);
  --cal-win-bg:#e0f3e9;--cal-win-border:#c4e6d3;--cal-win-text:#1a7a44;
  --cal-loss-bg:#fbe3e7;--cal-loss-border:#f3cdd3;--cal-loss-text:#b82a3e;
}

[data-theme="light"] [style*="color:#fff"],
[data-theme="light"] [style*="color: #fff"],
[data-theme="light"] [style*="color:#ffffff"]{
  color: var(--text-strong) !important;
}
[data-theme="light"] .card,
[data-theme="light"] .metric,
[data-theme="light"] .mini-stat,
[data-theme="light"] .cal-card,
[data-theme="light"] .sidebar,
[data-theme="light"] .topbar,
[data-theme="light"] nav.site-nav{
  box-shadow: var(--card-shadow);
}

.theme-toggle{
  display:flex;align-items:center;gap:9px;padding:8px 12px;margin:1px 6px;
  border-radius:7px;cursor:pointer;color:var(--text2);transition:all 0.15s;
  font-size:12px;border:none;background:none;font-family:inherit;width:calc(100% - 12px);text-align:left;
}
.theme-toggle:hover{background:var(--surface2);color:var(--text);}
.theme-toggle-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;}
.theme-toggle-icon svg{width:16px;height:16px;display:block;}
.nav-theme-toggle{
  width:36px;height:36px;border-radius:8px;border:1px solid var(--border);
  background:transparent;color:var(--text2);display:flex;align-items:center;
  justify-content:center;cursor:pointer;transition:all 0.15s;font-size:16px;flex-shrink:0;
}
.nav-theme-toggle:hover{background:var(--surface2);color:var(--text);}

body{
  background-color:var(--bg);
  /* Premium brand gradient — blue glow in all 4 corners + faint center on pure black */
  background-image:
    radial-gradient(ellipse 55% 45% at 95% -3%, rgba(66,149,241,0.20) 0%, rgba(66,149,241,0.06) 44%, transparent 72%),
    radial-gradient(ellipse 55% 45% at 5% -3%, rgba(66,149,241,0.16) 0%, rgba(66,149,241,0.05) 44%, transparent 72%),
    radial-gradient(ellipse 60% 50% at 2% 103%, rgba(66,149,241,0.16) 0%, rgba(66,149,241,0.05) 42%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 98% 103%, rgba(66,149,241,0.18) 0%, rgba(66,149,241,0.05) 42%, transparent 70%),
    radial-gradient(ellipse 70% 55% at 50% 48%, rgba(66,149,241,0.055) 0%, rgba(66,149,241,0.02) 40%, transparent 68%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'Inter',sans-serif;
  font-size:15px;
  line-height:1.5;
}
[data-theme="light"] body{
  background-image:
    radial-gradient(ellipse 55% 45% at 95% -3%, rgba(66,149,241,0.11) 0%, rgba(66,149,241,0.03) 44%, transparent 72%),
    radial-gradient(ellipse 55% 45% at 5% -3%, rgba(66,149,241,0.09) 0%, rgba(66,149,241,0.025) 44%, transparent 72%),
    radial-gradient(ellipse 60% 50% at 2% 103%, rgba(66,149,241,0.08) 0%, rgba(66,149,241,0.02) 42%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 98% 103%, rgba(66,149,241,0.10) 0%, rgba(66,149,241,0.025) 42%, transparent 70%),
    radial-gradient(ellipse 70% 55% at 50% 48%, rgba(66,149,241,0.03) 0%, transparent 60%);
}

/* Ambient blue glow at top + bottom — used on pre-login (marketing) pages only */
body.glow-bg{
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 60% 50% at 92% -4%, rgba(66,149,241,0.22) 0%, rgba(66,149,241,0.06) 44%, transparent 72%),
    radial-gradient(ellipse 60% 50% at 8% -4%, rgba(66,149,241,0.18) 0%, rgba(66,149,241,0.05) 44%, transparent 72%),
    radial-gradient(ellipse 65% 55% at 5% 104%, rgba(66,149,241,0.18) 0%, rgba(66,149,241,0.05) 42%, transparent 70%),
    radial-gradient(ellipse 65% 55% at 95% 104%, rgba(66,149,241,0.20) 0%, rgba(66,149,241,0.05) 42%, transparent 70%),
    radial-gradient(ellipse 60% 48% at 50% 46%, rgba(66,149,241,0.06) 0%, rgba(66,149,241,0.02) 42%, transparent 68%);
  background-repeat:no-repeat;
  background-attachment:fixed;
}
[data-theme="light"] body.glow-bg{
  background-image:
    radial-gradient(ellipse 60% 50% at 92% -4%, rgba(66,149,241,0.12) 0%, rgba(66,149,241,0.03) 44%, transparent 72%),
    radial-gradient(ellipse 60% 50% at 8% -4%, rgba(66,149,241,0.10) 0%, rgba(66,149,241,0.025) 44%, transparent 72%),
    radial-gradient(ellipse 65% 55% at 5% 104%, rgba(66,149,241,0.09) 0%, rgba(66,149,241,0.02) 42%, transparent 70%),
    radial-gradient(ellipse 65% 55% at 95% 104%, rgba(66,149,241,0.10) 0%, rgba(66,149,241,0.025) 42%, transparent 70%),
    radial-gradient(ellipse 60% 48% at 50% 46%, rgba(66,149,241,0.035) 0%, transparent 60%);
}
[data-theme="light"] body.glow-bg{
  background-image:
    radial-gradient(ellipse 65% 440px at 50% 0%, rgba(66,149,241,0.10) 0%, transparent 72%),
    radial-gradient(ellipse 65% 440px at 50% 100%, rgba(66,149,241,0.10) 0%, transparent 72%);
}

a{ color:inherit; text-decoration:none; }

/* ---------- Navbar ---------- */
nav.site-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 48px;border-bottom:1px solid var(--border);
  background:var(--nav-bg);position:sticky;top:0;z-index:100;
  backdrop-filter:blur(12px);
}
.logo{display:flex;align-items:center;gap:10px;}
.nav-logo-dark{display:block;}
.nav-logo-light{display:none;}
html[data-theme="light"] .nav-logo-dark{display:none;}
html[data-theme="light"] .nav-logo-light{display:block;}
.logo-icon{width:32px;height:32px;background:var(--blue);border-radius:8px;display:flex;align-items:center;justify-content:center;}
.logo-icon svg{width:18px;height:18px;}
.logo-text{font-size:16px;font-weight:600;letter-spacing:-0.3px;color:var(--text-strong);}
.logo-text span{color:var(--blue);}
.site-nav ul{display:flex;gap:32px;list-style:none;}
.site-nav ul a{color:var(--text2);font-size:14px;transition:color 0.2s;}
.site-nav ul a:hover, .site-nav ul a.active{color:var(--text-strong);}
.nav-btns{display:flex;gap:8px;}

.btn-primary{
  background:var(--blue);color:#fff;border:none;padding:9px 20px;
  border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:opacity 0.2s;
  display:inline-flex;align-items:center;gap:8px;
}
.btn-primary:hover{opacity:0.88;}
.btn-secondary{
  background:transparent;color:var(--text-strong);border:1px solid var(--border);
  padding:9px 20px;border-radius:8px;font-size:14px;cursor:pointer;transition:all 0.2s;
  display:inline-flex;align-items:center;gap:8px;
}
.btn-secondary:hover{border-color:rgba(255,255,255,0.25);background:rgba(255,255,255,0.04);}
.btn-ghost{padding:9px 18px;border-radius:8px;border:1px solid var(--border2);background:transparent;color:var(--text2);font-size:13px;cursor:pointer;transition:all 0.15s;}
.btn-ghost:hover{background:var(--surface2);color:var(--text);}

/* ---------- Footer ---------- */
footer.site-footer{
  border-top:1px solid var(--border);padding:36px 48px;
  display:flex;align-items:center;justify-content:space-between;
  color:var(--text3);font-size:13px;flex-wrap:wrap;gap:16px;
}
footer.site-footer a:hover{color:var(--text-strong);}
.footer-links{display:flex;gap:24px;}

/* ---------- App shell (sidebar layout) ---------- */
.app{display:grid;grid-template-columns:228px 1fr;min-height:100vh;}
.sidebar{background:var(--surface);background:color-mix(in srgb, var(--surface) 88%, transparent);border-right:1px solid var(--border);padding:16px 0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;backdrop-filter:blur(6px);}
.sb-logo{display:flex;align-items:center;gap:8px;padding:6px 14px 20px;border-bottom:1px solid var(--border);margin-bottom:8px;}
.sb-logo-dark{height:24px;width:auto;object-fit:contain;display:block;}
.sb-logo-light{height:24px;width:auto;object-fit:contain;display:none;}
html[data-theme="light"] .sb-logo-dark{display:none;}
html[data-theme="light"] .sb-logo-light{display:block;}
.sb-logo-icon{width:26px;height:26px;background:var(--blue);border-radius:6px;display:flex;align-items:center;justify-content:center;}
.sb-logo-icon svg{width:14px;height:14px;}
.sb-logo-text{font-size:13px;font-weight:600;color:var(--text-strong);}
.sb-logo-text span{color:var(--blue);}
.sb-item{display:flex;align-items:center;gap:9px;padding:9px 12px;margin:1px 6px;border-radius:7px;cursor:pointer;color:var(--text2);transition:all 0.15s;font-size:13px;}
.sb-item:hover{background:var(--surface2);color:var(--text);}
.sb-item.active{background:var(--blue-dim);color:var(--blue);border:1px solid var(--blue-border);}
.sb-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:17px;}
.sb-spacer{flex:1;}
.sb-user{display:flex;align-items:center;gap:8px;padding:12px 14px;margin:6px;border-radius:8px;background:var(--surface2);border:1px solid var(--border);overflow:hidden;cursor:pointer;transition:all 0.15s;}
.sb-user:hover{background:var(--surface3);border-color:var(--border2);}
.sb-user > div{min-width:0;flex:1;overflow:hidden;}
.sb-username{font-size:12px;font-weight:500;color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb-plan{font-size:10px;color:var(--blue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.main{background:transparent;overflow:visible;min-width:0;}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-bottom:1px solid var(--border);background:var(--surface);background:color-mix(in srgb, var(--surface) 82%, transparent);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10;}
.topbar-left{display:flex;flex-direction:column;min-width:0;}
.topbar-title{font-size:16px;font-weight:600;color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar-sub{font-size:12px;color:var(--text3);margin-top:2px;}
.topbar-sub a{color:var(--blue);}
.topbar-right{display:flex;align-items:center;gap:8px;}
.tb-btn{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:7px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text2);transition:all 0.15s;}
.tb-btn:hover{background:var(--surface2);color:var(--text);}
.tb-btn.primary{background:var(--blue);color:#fff;border-color:var(--blue);}
.tb-btn.primary:hover{opacity:0.88;}
.content{padding:20px 24px;}
/* Natural document flow so the dashboard scrolls on laptops/short screens
   instead of cramming every card into one viewport (the window scrolls; the
   sidebar stays pinned via position:sticky). */
.content-fit{min-height:calc(100vh - 65px);overflow-x:hidden;display:flex;flex-direction:column;}

.dash-fit{flex:1;display:flex;flex-direction:column;gap:12px;}
.dash-fit .metrics-row{flex:0 0 auto;margin-bottom:0;}
.dash-fit .row-main{flex:0 0 auto;min-height:0;margin-bottom:0;}
.dash-fit .row3{flex:0 0 auto;}

select, input, textarea{font-family:inherit;}

/* ---------- Generic cards / metrics ---------- */
.card{background:var(--surface);background:color-mix(in srgb, var(--surface) 90%, transparent);border:1px solid var(--border);border-radius:10px;padding:16px;}
.card-title{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;}
.card-title span{font-size:11px;color:var(--text3);}

.section-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;font-weight:600;}

.metrics-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:18px;}
.metric{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;justify-content:space-between;min-height:108px;}
.m-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.m-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:0.6px;display:flex;align-items:center;gap:5px;}
.m-trades{font-size:10px;color:var(--text3);background:var(--surface2);padding:1px 7px;border-radius:4px;}
.m-value{font-size:24px;font-weight:700;color:var(--text-strong);letter-spacing:-0.5px;}
.m-value.green{color:var(--green);}
.gauge-wrap{position:relative;width:98px;height:64px;margin-top:16px;}
.gauge-num{position:absolute;bottom:-3px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text2);font-weight:600;padding:0 9px;}
.gauge-num .mid{background:var(--blue-dim);color:var(--blue);border-radius:4px;padding:1px 6px;font-size:11px;line-height:1.3;}
.donut-wrap{position:relative;width:60px;height:60px;}
.bar-track{height:5px;background:var(--surface3);border-radius:3px;overflow:hidden;display:flex;margin-bottom:5px;}
.bar-seg-green{background:var(--green);}
.bar-seg-red{background:var(--red);}
.bar-labels{display:flex;justify-content:space-between;font-size:10px;font-weight:600;}

.row2{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-bottom:18px;}
.chart-wrap{position:relative;height:130px;width:100%;}
canvas{width:100%!important;}

.trade-item{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:var(--surface2);border-radius:7px;margin-bottom:6px;}
.ti-pair{font-size:13px;font-weight:600;color:var(--text-strong);}
.ti-meta{font-size:11px;color:var(--text3);margin-top:2px;}
.ti-badge{font-size:11px;padding:2px 8px;border-radius:4px;font-weight:500;}
.badge-long{background:var(--green-dim);color:var(--green);}
.badge-short{background:var(--red-dim);color:var(--red);}
.ti-pnl{font-size:13px;font-weight:600;}
.pnl-pos{color:var(--green);}
.pnl-neg{color:var(--red);}

.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.mini-stat{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px;}
.ms-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.8px;margin-bottom:8px;}
.ms-bar-wrap{height:5px;background:var(--surface3);border-radius:3px;overflow:hidden;margin-bottom:6px;}
.ms-bar{height:100%;border-radius:3px;background:var(--blue);}
.ms-bar.ms-anim{transition:width 1.6s cubic-bezier(.22,.61,.36,1);}
.ms-bar.green{background:var(--green);}
.ms-bar.red{background:var(--red);}
/* Equity curve draw-in: line strokes on, fill fades in, when preview is visible */
.eq-line{stroke-dasharray:1200;stroke-dashoffset:1200;}
.eq-fill{opacity:0;}
.dashboard-preview.visible .eq-line{transition:stroke-dashoffset 2.4s ease-out;stroke-dashoffset:0;}
.dashboard-preview.visible .eq-fill{transition:opacity 1.2s ease-out 0.8s;opacity:1;}
/* Net daily P&L bars grow from the baseline (y=150) when preview is visible */
.nd-bar{transform:scaleY(0);transition:transform 0.9s cubic-bezier(.22,.61,.36,1);}
.nd-up{transform-origin:center 150px;}
.nd-down{transform-origin:center 150px;}
.dashboard-preview.visible .nd-bar{transform:scaleY(1);}
.dashboard-preview.visible .nd-bar:nth-of-type(2){transition-delay:.1s;}
.dashboard-preview.visible .nd-bar:nth-of-type(3){transition-delay:.2s;}
.dashboard-preview.visible .nd-bar:nth-of-type(4){transition-delay:.3s;}
.dashboard-preview.visible .nd-bar:nth-of-type(5){transition-delay:.4s;}
.ms-val{font-size:16px;font-weight:700;color:var(--text-strong);}

/* ---------- Calendar ---------- */
.row-main{display:grid;grid-template-columns:2.3fr 1fr;gap:12px;margin-bottom:18px;align-items:stretch;}
.col-left{display:flex;flex-direction:column;gap:12px;min-width:0;}
.col-left .cal-card{flex:0 0 auto;display:flex;flex-direction:column;}
.col-left .row-charts{flex:0 0 auto;margin-bottom:0;}
/* right column = Performance stats (top) + Recent trades (fills the rest down to the charts' bottom) */
.dash-right-col{display:flex;flex-direction:column;gap:12px;min-height:0;min-width:0;}
.dash-right-col .perf-stats-card{flex:0 0 auto;}
.dash-right-col .recent-card{flex:0 0 auto;display:flex;flex-direction:column;}
.dash-right-col .recent-card #recentTrades{overflow-y:auto;}
.dash-right-col .ck-streak-card{flex:1 1 auto;min-height:150px;display:flex;flex-direction:column;}
.row-charts{display:grid;grid-template-columns:2.2fr 1fr;gap:12px;align-items:stretch;}
.row-charts .chart-wrap{height:260px;}
.row-charts .card{display:flex;flex-direction:column;}
.row-charts #recentTrades{flex:1;min-height:0;max-height:320px;overflow-y:auto;}
.chart-wrap-tall{height:260px!important;}

.perf-stats-card{display:flex;flex-direction:column;gap:6px;}
.perf-stat-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);}
.perf-stat-row:last-child{border-bottom:none;}
.ps-label{font-size:15px;color:var(--text2);}
.ps-val{font-size:14px;font-weight:600;color:var(--text-strong);}
.ps-val.pos{color:var(--cal-win-text);}
.ps-val.neg{color:var(--cal-loss-text);}
.cal-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;}
.cal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px;flex:0 0 auto;}
.cal-month{display:flex;align-items:center;gap:10px;}
.cal-month-name{font-size:15px;font-weight:600;color:var(--text-strong);}
.cal-arrow{width:24px;height:24px;border-radius:6px;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text2);transition:all 0.15s;}
.cal-arrow:hover{background:var(--surface3);color:var(--text-strong);}
.cal-pill{font-size:11px;padding:4px 10px;border-radius:6px;background:var(--surface2);border:1px solid var(--border);color:var(--text2);cursor:pointer;}
.cal-stats{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text2);}
.cal-stats b{font-weight:600;}
.cal-stats .neg{color:var(--red);}
.cal-stats .pos{color:var(--green);}
.cal-month-pill{padding:0;border:none;background:none;box-shadow:none;font-weight:700;font-size:16px;}
.cal-month-pill.win{background:none;border:none;box-shadow:none;}
.cal-month-pill.win b{color:#3ddc84;font-weight:700;}
.cal-month-pill.loss{background:none;border:none;box-shadow:none;}
.cal-month-pill.loss b{color:#f15252;font-weight:700;}
.cal-days-badge{font-size:13px;padding:4px 11px;border-radius:6px;background:var(--blue-dim);color:var(--blue);border:1px solid var(--blue-border);}
.cal-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(7,1fr) 108px;grid-auto-rows:1fr;gap:4px;}
.cal-head{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:0.5px;text-align:center;font-weight:600;display:flex;align-items:center;justify-content:center;}
.cal-cell{background:var(--surface2);border:1px solid var(--border);border-radius:8px;min-height:74px;padding:6px;position:relative;display:block;text-decoration:none;color:inherit;transition:filter 0.15s;}
.cal-cell:not(.empty):hover{filter:brightness(1.12);cursor:pointer;}
.cal-cell.empty{background:transparent;border:none;}
.cal-cell.green{background:var(--cal-win-bg);border-color:var(--cal-win-border);}
.cal-cell.red{background:var(--cal-loss-bg);border-color:var(--cal-loss-border);}
.cc-date{font-size:12px;color:var(--text2);margin-bottom:4px;font-weight:600;}
.cc-pnl{font-size:15px;font-weight:800;margin-bottom:2px;}
.cc-pnl.pos{color:#3ddc84 !important;}
.cc-pnl.neg{color:#f15252 !important;}
.cc-trades{font-size:12px;font-weight:600;color:var(--text2);}
.cc-r{font-size:12px;color:var(--text2);margin-top:2px;font-weight:500;}
.cc-dot{position:absolute;bottom:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--blue);}
.week-cell{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 6px;min-height:36px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:3px;margin-left:4px;}
.week-cell.green{background:var(--cal-win-bg);border-color:var(--cal-win-border);}
.week-cell.red{background:var(--cal-loss-bg);border-color:var(--cal-loss-border);}
.wk-label{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:0.6px;text-align:center;}
.wk-pnl{font-size:16px;font-weight:700;color:var(--text-strong);margin-bottom:3px;}
.wk-pnl.pos{color:var(--green);}
.wk-pnl.neg{color:var(--red);}
.wk-days{font-size:11px;padding:2px 7px;border-radius:5px;background:var(--blue-dim);color:var(--blue);display:inline-block;}

/* ---------- Forms (auth, settings, onboarding) ---------- */
.field{margin-bottom:14px;}
.field-label{font-size:11px;color:var(--text2);margin-bottom:6px;display:flex;justify-content:space-between;}
.field-label a{color:var(--blue);font-size:11px;}
.field-label a:hover{text-decoration:underline;}
.field-input{width:100%;padding:9px 12px;border-radius:8px;border:1px solid var(--border2);background:var(--surface2);color:var(--text);font-size:13px;outline:none;transition:border-color 0.15s;}
.field-input:focus{border-color:var(--blue-border);}
.field-input::placeholder{color:var(--text3);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.input-wrap{position:relative;}
.input-wrap .field-input{padding-right:36px;}
.input-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--text3);cursor:pointer;font-size:15px;}

.toggle{width:36px;height:20px;background:var(--surface3);border-radius:10px;cursor:pointer;position:relative;transition:background 0.2s;flex-shrink:0;}
.toggle.on{background:var(--blue);}
.toggle-knob{width:14px;height:14px;background:#fff;border-radius:50%;position:absolute;top:3px;left:3px;transition:left 0.2s;}
.toggle.on .toggle-knob{left:19px;}

/* ---------- Utility ---------- */
.hidden{display:none!important;}

/* ---------- Saved Setups (used on Analytics and Rules pages) ---------- */
.setup-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;margin-bottom:10px;}
.setup-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.setup-name{font-size:14px;font-weight:600;color:var(--text-strong);}
.setup-stats{display:flex;gap:16px;}
.setup-stat{text-align:right;}
.setup-stat-val{font-size:15px;font-weight:700;color:var(--text-strong);}
.setup-stat-lbl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.6px;}
.setup-desc{font-size:12px;color:var(--text2);line-height:1.7;}

/* ============================================================
   MOBILE RESPONSIVE — App shell (sidebar drawer, stacked grids)
   Applies to all app/ pages that use the .app + .sidebar shell
   ============================================================ */

/* Hamburger button — hidden on desktop, shown on mobile via media query */
.mobile-menu-btn{display:none;align-items:center;justify-content:center;width:38px;height:38px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;flex-shrink:0;}
.mobile-menu-btn i{font-size:20px;}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:90;opacity:0;transition:opacity 0.2s;}
.sidebar-overlay.open{display:block;opacity:1;}

/* ---- TABLET / iPad (861px–1024px): keep sidebar, but 2-up the wide grids ---- */
@media (min-width: 861px) and (max-width: 1024px){
  .app{grid-template-columns:180px 1fr;}
  .content{padding:16px 18px;}
  .metrics-row{grid-template-columns:repeat(3,1fr);}
  .row2{grid-template-columns:1fr 1fr;}
  .row3{grid-template-columns:repeat(3,1fr);}
  .row-main{grid-template-columns:1.6fr 1fr;}
  .row-charts{grid-template-columns:1fr 1fr;}
}

@media (max-width: 860px){
  /* ---- App shell becomes single column ---- */
  .app{grid-template-columns:1fr;}

  /* ---- Sidebar becomes a slide-in drawer ---- */
  .sidebar{
    position:fixed;top:0;left:0;height:100vh;width:240px;max-width:82vw;
    z-index:100;transform:translateX(-100%);transition:transform 0.25s ease;
    box-shadow:2px 0 16px rgba(0,0,0,0.35);
  }
  .sidebar.open{transform:translateX(0);}

  /* ---- Hamburger shows in topbar ---- */
  .mobile-menu-btn{display:flex;}
  .topbar{padding:12px 14px;gap:10px;}
  .topbar-left{min-width:0;flex:1;}
  .topbar-title{font-size:15px;}
  .topbar-right{gap:6px;flex-shrink:0;}
  .tb-btn{padding:8px 9px;font-size:11px;}
  .tb-btn .tb-label{display:none;}
  .drp-trigger span#drpLabel{max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  /* ---- Content padding tighter ---- */
  .content{padding:14px;}
  .content-fit{height:auto;min-height:calc(100vh - 60px);overflow:visible;display:block;}
  .dash-fit{display:block;}
  .dash-fit .row-main,.dash-fit .metrics-row,.dash-fit .row3{flex:none;min-height:0;margin-bottom:12px;}

  /* ---- All multi-column grids stack to single column ---- */
  .metrics-row{grid-template-columns:1fr 1fr;gap:8px;}
  .row2,.row3,.row-main,.row-charts{grid-template-columns:1fr;gap:12px;}
  .field-row{grid-template-columns:1fr;}

  /* ---- Charts get a sensible fixed height when stacked ---- */
  .chart-wrap,.chart-wrap-tall{height:200px!important;}
  .row-charts #recentTrades{max-height:280px;}

  /* ---- Calendar: allow horizontal scroll so days stay legible ---- */
  .cal-card{overflow-x:auto;}
  .cal-grid{min-width:580px;}

  /* ---- Performance stats / recent trades full width ---- */
  .perf-stats-card,.recent-trades-card{min-height:0;}

  /* ---- Tables scroll horizontally instead of squishing ---- */
  .table-wrap,.trade-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  table{min-width:560px;}
}

@media (max-width: 480px){
  .metrics-row{grid-template-columns:1fr;}
  .topbar-sub{display:none;}
  .content{padding:12px 10px;}
}

/* ============================================================
   RESPONSIVE POLISH (v=46) — tablet portrait, phone ergonomics,
   landscape phones, and floating-widget spacing.
   ============================================================ */

/* iPad / tablet portrait: keep 2-up metrics + side-by-side charts
   instead of collapsing to a single narrow column too early. */
@media (min-width: 600px) and (max-width: 860px){
  .metrics-row{grid-template-columns:1fr 1fr;}
  .row-charts{grid-template-columns:1fr 1fr;}
}

/* Phones: comfortable tap targets + no accidental horizontal scroll. */
@media (max-width: 860px){
  html,body{max-width:100%;overflow-x:hidden;}
  /* Topbar action buttons: let them wrap rather than overflow. */
  .topbar-right{flex-wrap:wrap;justify-content:flex-end;row-gap:6px;}
  /* Bigger, thumb-friendly nav + action buttons. */
  .sb-item{padding-top:12px;padding-bottom:12px;}
  .tb-btn,.drp-trigger{min-height:38px;}
  /* Calendar day cells: a touch taller so numbers/pills are tappable. */
  .cal-grid .cal-day{min-height:64px;}
  /* Chart cards never get so short they clip axis labels. */
  .chart-wrap,.chart-wrap-tall{min-height:180px;}
}

/* Very small phones: tighten typography so big numbers don't overflow. */
@media (max-width: 380px){
  .m-value{font-size:22px;}
  .topbar-title{font-size:14px;}
  .tb-btn .tb-label{display:none;}
}

/* Short / landscape phones: don't lock content to full viewport height. */
@media (max-height: 500px) and (orientation: landscape){
  .content-fit{height:auto;min-height:0;overflow:visible;}
  .sidebar{overflow-y:auto;}
}

/* Floating AI chat: lift the bubble above the mobile safe-area / content,
   and never let the open panel cover the whole tiny screen awkwardly. */
@media (max-width: 520px){
  .aic-fab{right:14px;bottom:14px;width:52px;height:52px;padding:8px;}
  .aic-panel{right:8px;left:8px;width:auto;bottom:74px;height:calc(100dvh - 96px);max-height:calc(100dvh - 96px);}
}

/* ============================================================
   UNIFIED BRAND LOGO  (single source, theme-aware)
   Icon = brand PNG (blue gradient + white chartline, same both themes)
   "Winners" + tagline follow --text-strong (white on dark, near-black on light)
   "Journal" stays brand-blue in both themes.
   ============================================================ */
.wj-logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none;line-height:1;white-space:nowrap;transition:opacity 0.15s;}
.wj-logo:hover{opacity:0.9;}
.wj-logo__mark{width:34px;height:34px;flex-shrink:0;display:block;object-fit:contain;
  filter:drop-shadow(0 4px 12px rgba(47,127,224,0.34));}
.wj-logo__txt{display:flex;flex-direction:column;gap:3px;}
.wj-logo__word{font-size:18px;font-weight:800;letter-spacing:-0.4px;color:var(--text-strong);line-height:1;}
.wj-logo__word b{color:var(--blue);font-weight:800;}
.wj-logo__tag{font-size:8.5px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;color:var(--text-strong);line-height:1;}

/* size variants */
.wj-logo--sm .wj-logo__mark{width:28px;height:28px;}
.wj-logo--sm .wj-logo__word{font-size:15px;}
.wj-logo--sm .wj-logo__tag{font-size:7px;letter-spacing:2px;}

.wj-logo--lg .wj-logo__mark{width:42px;height:42px;}
.wj-logo--lg .wj-logo__word{font-size:23px;}
.wj-logo--lg .wj-logo__tag{font-size:10px;letter-spacing:3px;}

/* sidebar = horizontal lockup, same size as the landing-page nav logo */
.wj-logo--sidebar{display:flex;flex-direction:row;align-items:center;gap:10px;}
.wj-logo--sidebar .wj-logo__mark{width:34px;height:34px;}
.wj-logo--sidebar .wj-logo__word{font-size:18px;}
.wj-logo--sidebar .wj-logo__tag{font-size:8px;letter-spacing:2.4px;}

/* forced-light: use on blue / dark brand panels regardless of theme */
.wj-logo--light .wj-logo__word{color:#fff;}
.wj-logo--light .wj-logo__tag{color:#fff;}

/* ============================================================
   BLUE GRADIENT ACCENTS — tuned for the pure-black dark theme
   ============================================================ */
.btn-primary,.tb-btn.primary,.submit-btn{
  background-image:linear-gradient(135deg,#4FA0F6 0%,#2F7FE0 100%);
  box-shadow:0 4px 16px rgba(47,127,224,0.28);
}
.btn-primary:hover,.tb-btn.primary:hover,.submit-btn:hover{filter:brightness(1.06);opacity:1;}
[data-theme="light"] .btn-primary,
[data-theme="light"] .tb-btn.primary,
[data-theme="light"] .submit-btn{
  background-image:linear-gradient(135deg,#3F8AEE 0%,#2F7FE0 100%);
  box-shadow:0 2px 10px rgba(47,127,224,0.22);
}

/* gradient text helper for hero accents */
.blue-grad-text{
  background:linear-gradient(120deg,#7DBBFF 0%,#4295F1 45%,#2F7FE0 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ===== Day detail popup (shared: dashboard + analytics) ===== */
.day-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:200;align-items:center;justify-content:center;padding:20px;}
.day-overlay.open{display:flex;}
.day-modal{background:var(--surface);border:1px solid var(--border);border-radius:14px;width:100%;max-width:560px;max-height:88vh;overflow-y:auto;box-shadow:0 16px 48px rgba(0,0,0,0.4);}
.day-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:1;}
.day-title{font-size:16px;font-weight:700;color:var(--text-strong);}
.day-sub{font-size:12px;color:var(--text3);margin-top:2px;}
.day-close{background:none;border:none;color:var(--text3);font-size:22px;cursor:pointer;line-height:1;padding:0 4px;}
.day-close:hover{color:var(--text);}
.day-body{padding:18px 20px;}
.day-pnl-big{font-size:28px;font-weight:800;margin-bottom:2px;}
.day-pnl-lbl{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:16px;}
.day-stat-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:18px;}
.day-stat{background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:10px 12px;}
.day-stat-val{font-size:16px;font-weight:700;color:var(--text-strong);}
.day-stat-lbl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.4px;margin-top:2px;}
.day-section{margin-bottom:18px;}
.day-section-title{font-size:12px;font-weight:600;color:var(--text-strong);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;}
.day-trade-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);cursor:pointer;}
.day-trade-row:last-child{border-bottom:none;}
.day-trade-row:hover{opacity:0.85;}
.dtr-pair{font-size:13px;font-weight:600;color:var(--text-strong);flex:1;}
.dtr-badge{font-size:10px;padding:2px 8px;border-radius:5px;font-weight:600;}
.dtr-badge.long{background:var(--green-dim);color:var(--green);}
.dtr-badge.short{background:var(--red-dim);color:var(--red);}
.dtr-session{font-size:11px;color:var(--text3);}
.dtr-pnl{font-size:13px;font-weight:600;}
.dtr-check{width:15px;height:15px;accent-color:var(--blue);cursor:pointer;flex-shrink:0;}
.dtr-main{display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer;}
.day-del-btn{display:inline-flex;align-items:center;gap:5px;background:var(--red-dim);color:var(--red);border:1px solid var(--red);border-radius:7px;padding:5px 10px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;}
.day-del-btn:hover{background:var(--red);color:#fff;}
.day-del-btn:disabled{opacity:0.6;cursor:default;}
.day-chip-row{display:flex;flex-wrap:wrap;gap:6px;}
.day-chip{font-size:11px;padding:3px 10px;border-radius:99px;font-weight:500;}
.day-rule-item{display:flex;align-items:center;gap:8px;font-size:12px;padding:5px 0;color:var(--text2);}
.day-rule-item .dri-ic{font-size:13px;}
.day-empty{font-size:12px;color:var(--text3);font-style:italic;}
.day-notes-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border-radius:9px;background:var(--blue);color:#fff;font-size:13px;font-weight:600;cursor:pointer;border:none;font-family:inherit;text-decoration:none;margin-top:6px;}
.day-notes-btn:hover{opacity:0.9;}

/* ===== Star rating widget (1–5, half steps) — replaces A+/A grades ===== */
.stars-rate{position:relative;display:inline-flex;vertical-align:middle;}
.stars-wrap{position:relative;display:inline-flex;line-height:0;}
.stars-bg{display:inline-flex;color:#454954;}
.stars-fg{display:inline-flex;color:#f5b301;position:absolute;top:0;left:0;overflow:hidden;white-space:nowrap;pointer-events:none;}
.star-ico{display:inline-block;flex:0 0 auto;}
.stars-click{position:absolute;inset:0;display:flex;}
.s-half{flex:1 1 10%;cursor:pointer;}
.stars-rate:hover .stars-bg{color:#5a5f6b;}
.stars-num{font-size:12px;color:var(--text2);font-weight:600;margin-left:6px;}
.day-rating-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);}
.day-rating-row:last-child{border-bottom:none;}
.drr-pair{font-size:13px;font-weight:600;color:var(--text-strong);}
/* Today highlight in the calendar */
.cal-cell.is-today{border-color:var(--blue)!important;box-shadow:inset 0 0 0 1px rgba(66,149,241,0.4);}
.cal-cell.is-today:not(.green):not(.red){background:rgba(66,149,241,0.08);}
.cal-cell.is-today .cc-date{color:var(--blue);font-weight:700;}

/* Embed mode: rules/setups shown inside the "Your edge" tabbed page */
.wj-embed .sidebar{display:none !important;}
.wj-embed .topbar{display:none !important;}
.wj-embed .main{margin-left:0 !important;}
.wj-embed .app{display:block !important;}
.wj-embed .content{padding-top:8px !important;}

/* ===== Trading Checklist (shared) ===== */
.ck-progress-wrap{margin:2px 0 14px;}
.ck-progress-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
.ck-count{font-size:22px;font-weight:800;color:var(--text-strong);}
.ck-count small{font-size:12px;font-weight:600;color:var(--text3);}
.ck-pct{font-size:13px;font-weight:700;}
.ck-bar{height:7px;background:var(--surface3);border-radius:6px;overflow:hidden;}
.ck-bar-fill{height:100%;width:0;background:var(--blue);border-radius:6px;transition:width .25s ease,background .25s;}
.ck-list{display:flex;flex-direction:column;gap:8px;}
.ck-item{display:flex;align-items:center;gap:11px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:11px 12px;cursor:pointer;user-select:none;transition:border-color .15s,background .15s;}
.ck-item:hover{border-color:var(--border2);}
.ck-item.on{background:rgba(66,149,241,.10);border-color:var(--blue-border);}
.ck-box{width:22px;height:22px;flex:0 0 22px;border:2px solid var(--text3);border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;transition:all .15s;}
.ck-item.on .ck-box{background:var(--blue);border-color:var(--blue);}
.ck-box svg{opacity:0;transition:opacity .15s;}
.ck-item.on .ck-box svg{opacity:1;}
.ck-text{font-size:13px;color:var(--text);line-height:1.3;}
.ck-item.on .ck-text{color:var(--text-strong);}
.ck-foot{margin-top:14px;display:flex;gap:8px;}
.ck-btn{flex:1;padding:9px;border-radius:8px;font-size:12.5px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--surface2);color:var(--text2);}
.ck-btn:hover{color:var(--text);}
.ck-btn.ck-save{background:var(--blue);border-color:var(--blue);color:#fff;}
.ck-btn.ck-save:hover{opacity:.9;color:#fff;}
.ck-savenote{margin-top:9px;font-size:11.5px;text-align:center;min-height:14px;}
.ck-empty{text-align:center;color:var(--text3);font-size:12.5px;padding:26px 10px;line-height:1.5;}
.ck-empty a{color:var(--blue);}

/* Checklist tracker widget */
.ckt-row{display:flex;gap:14px;}
.ckt-item{flex:1;text-align:center;}
.ckt-num{font-size:24px;font-weight:800;color:var(--text-strong);line-height:1.1;}
.ckt-num small{font-size:13px;font-weight:600;color:var(--text3);}
.ckt-lbl{font-size:10.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;margin-top:4px;}

/* ===== Checklist: tick/cross per-trade design ===== */
.ck-item{justify-content:space-between;cursor:default;}
.ck-item.m-followed{background:rgba(61,220,132,.08);border-color:rgba(61,220,132,.35);}
.ck-item.m-unfollowed{background:rgba(241,82,82,.08);border-color:rgba(241,82,82,.35);}
.ck-item.ck-sample{opacity:.62;}
.ck-marks{display:flex;gap:6px;flex:0 0 auto;}
.ck-mk{width:34px;height:30px;border-radius:7px;border:1px solid var(--border);background:var(--surface3);color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;}
.ck-mk:hover{color:var(--text);}
.ck-mk.ck-yes.on{background:var(--green);border-color:var(--green);color:#fff;}
.ck-mk.ck-no.on{background:var(--red);border-color:var(--red);color:#fff;}
.ck-tradebar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.ck-tradeno{font-size:12.5px;font-weight:700;color:var(--text-strong);}
.ck-donecount{font-size:12px;color:var(--text3);white-space:nowrap;}
.ck-samplehint{font-size:11.5px;color:var(--text3);background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin-bottom:12px;line-height:1.4;}
.ck-samplehint a,.ck-samplehint b{color:var(--blue);}
.ck-btn.ck-reset{background:var(--blue);border-color:var(--blue);color:#fff;}
.ck-btn.ck-reset:hover{opacity:.9;color:#fff;}
.ck-btn.ck-reset:disabled{background:var(--surface2);border-color:var(--border);color:var(--text3);cursor:not-allowed;opacity:1;}

[data-theme="light"] body{
  background-image:
    radial-gradient(ellipse 55% 42% at 88% -4%, rgba(47,127,224,0.07) 0%, rgba(47,127,224,0.02) 42%, transparent 72%),
    radial-gradient(ellipse 60% 46% at 6% 104%, rgba(47,127,224,0.05) 0%, transparent 65%);
}