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

:root, [data-theme="dark"]{
  --bg:#0a0c0f;--surface:#111318;--surface2:#181c24;--surface3:#1e2330;
  --blue:#4295F1;--blue-dim:rgba(66,149,241,0.1);--blue-border:rgba(66,149,241,0.25);
  --green:#3ddc84;--green-dim:rgba(61,220,132,0.1);
  --red:#f15252;--red-dim:rgba(241,82,82,0.1);
  --border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.12);
  --text:#e8eaf0;--text2:#9ca3af;--text3:#5a6275;
  --text-strong:#ffffff;
  --card-shadow:none;
  --cal-win-bg:rgba(61,220,132,0.1);--cal-win-border:rgba(61,220,132,0.22);--cal-win-text:#3ddc84;
  --cal-loss-bg:rgba(241,82,82,0.1);--cal-loss-border:rgba(241,82,82,0.22);--cal-loss-text:#f15252;
}

[data-theme="light"]{
  --bg:#f7f8fa;--surface:#ffffff;--surface2:#f1f2f5;--surface3:#e6e8ec;
  --blue:#4295F1;--blue-dim:rgba(66,149,241,0.08);--blue-border:rgba(66,149,241,0.25);
  --green:#1f9d5c;--green-dim:rgba(31,157,92,0.1);
  --red:#e0445b;--red-dim:rgba(224,68,91,0.08);
  --border:rgba(0,0,0,0.08);--border2:rgba(0,0,0,0.14);
  --text:#0a0c0f;--text2:#5a6275;--text3:#9ca3af;
  --text-strong:#000000;
  --card-shadow:0 1px 3px rgba(0,0,0,0.05);
  --cal-win-bg:#d9f2e3;--cal-win-border:#bfe8d2;--cal-win-text:#1f9d5c;
  --cal-loss-bg:#fbdde2;--cal-loss-border:#f6c4cc;--cal-loss-text:#c22d44;
}

[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:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'Inter',sans-serif;
  font-size:14px;
  line-height:1.5;
}

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:rgba(10,12,15,0.95);position:sticky;top:0;z-index:100;
  backdrop-filter:blur(12px);
}
.logo{display:flex;align-items:center;gap:10px;}
.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:200px 1fr;min-height:100vh;}
.sidebar{background:var(--surface);border-right:1px solid var(--border);padding:16px 0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}
.sb-logo{display:flex;align-items:center;gap:8px;padding:0 16px 20px;border-bottom:1px solid var(--border);margin-bottom:8px;}
.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:8px 12px;margin:1px 6px;border-radius:7px;cursor:pointer;color:var(--text2);transition:all 0.15s;font-size:12px;}
.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-item i{font-size:15px;}
.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:var(--bg);overflow:auto;}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:10;}
.topbar-left{display:flex;flex-direction:column;}
.topbar-title{font-size:15px;font-weight:600;color:var(--text-strong);}
.topbar-sub{font-size:11px;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;}
.content-fit{height:calc(100vh - 65px);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;}

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

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

/* ---------- Generic cards / metrics ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;}
.card-title{font-size:12px;font-weight:500;color:var(--text2);margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;}
.card-title span{font-size:10px;color:var(--text3);}

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

.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:62px;height:36px;}
.gauge-num{position:absolute;bottom:-2px;left:0;right:0;display:flex;justify-content:space-between;font-size:9px;color:var(--text3);font-weight:600;padding:0 1px;}
.gauge-num .mid{position:absolute;left:50%;top:-12px;transform:translateX(-50%);background:var(--blue-dim);color:var(--blue);border-radius:3px;padding:0 4px;font-size:9px;}
.donut-wrap{position:relative;width:54px;height:54px;}
.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:12px;font-weight:600;color:var(--text-strong);}
.ti-meta{font-size:10px;color:var(--text3);margin-top:2px;}
.ti-badge{font-size:10px;padding:2px 8px;border-radius:4px;font-weight:500;}
.badge-long{background:var(--blue-dim);color:var(--blue);}
.badge-short{background:var(--blue-dim);color:var(--blue);}
.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.green{background:var(--green);}
.ms-bar.red{background:var(--red);}
.ms-val{font-size:16px;font-weight:700;color:var(--text-strong);}

/* ---------- Calendar ---------- */
.row-dash{display:grid;grid-template-columns:2.3fr 1fr;gap:12px;margin-bottom:18px;align-items:stretch;}
.row-dash .cal-card,.row-dash .card{height:100%;display:flex;flex-direction:column;}
.row-dash #recentTrades{flex:1;overflow-y:auto;min-height:0;}
.row-charts{display:grid;grid-template-columns:2.2fr 1fr 1.4fr;gap:12px;align-items:stretch;margin-bottom:18px;}
.row-charts .chart-wrap{height:150px;}
.chart-wrap-tall{height:200px!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:5px 0;border-bottom:1px solid var(--border);}
.perf-stat-row:last-child{border-bottom:none;}
.ps-label{font-size:11px;color:var(--text2);}
.ps-val{font-size:12px;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-days-badge{font-size:11px;padding:3px 9px;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) 80px;grid-auto-rows:minmax(0,1fr);gap:4px;}
.cal-head{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.5px;text-align:center;font-weight:500;display:flex;align-items:center;justify-content:center;}
.cal-cell{background:var(--surface2);border:1px solid var(--border);border-radius:8px;min-height:36px;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:10px;color:var(--text3);margin-bottom:4px;}
.cc-pnl{font-size:12px;font-weight:700;color:var(--text-strong);margin-bottom:2px;}
.cc-pnl.pos{color:var(--cal-win-text);}
.cc-pnl.neg{color:var(--cal-loss-text);}
.cc-trades{font-size:9px;color:var(--text3);}
.cc-r{font-size:9px;color:var(--text3);margin-top:2px;}
.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:6px;min-height:36px;display:flex;flex-direction:column;justify-content:center;}
.wk-label{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:0.6px;margin-bottom:3px;}
.wk-pnl{font-size:12px;font-weight:700;color:var(--text-strong);margin-bottom:2px;}
.wk-pnl.pos{color:var(--green);}
.wk-pnl.neg{color:var(--red);}
.wk-days{font-size:9px;padding:2px 6px;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;}