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

:root, [data-theme="dark"]{
  --bg:#0d0e11;--surface:#18191d;--surface2:#202125;--surface3:#292a30;
  --blue:#7c6fe0;--blue-dim:rgba(124,111,224,0.14);--blue-border:rgba(124,111,224,0.32);
  --green:#2dd9a8;--green-dim:rgba(45,217,168,0.12);
  --red:#f76e6e;--red-dim:rgba(247,110,110,0.12);
  --border:rgba(255,255,255,0.06);--border2:rgba(255,255,255,0.12);
  --text:#e5e6e8;--text2:#9a9ca3;--text3:#5a5c63;
  --text-strong:#ffffff;
  --card-shadow:none;
  --cal-win-bg:rgba(45,217,168,0.14);--cal-win-border:rgba(45,217,168,0.22);--cal-win-text:#2dd9a8;
  --cal-loss-bg:rgba(247,110,110,0.14);--cal-loss-border:rgba(247,110,110,0.22);--cal-loss-text:#f76e6e;
}

[data-theme="light"]{
  --bg:#f5f6f8;--surface:#ffffff;--surface2:#f0f1f4;--surface3:#e6e8eb;
  --blue:#6f5fdb;--blue-dim:rgba(111,95,219,0.08);--blue-border:rgba(111,95,219,0.24);
  --green:#18a878;--green-dim:rgba(24,168,120,0.1);
  --red:#e0445b;--red-dim:rgba(224,68,91,0.08);
  --border:rgba(15,23,42,0.08);--border2:rgba(15,23,42,0.14);
  --text:#1a1c23;--text2:#6b7280;--text3:#9aa0ab;
  --text-strong:#1a1c23;
  --card-shadow:0 1px 3px rgba(15,23,42,0.05);
  --cal-win-bg:#d6f3e7;--cal-win-border:#bce8d6;--cal-win-text:#0d8050;
  --cal-loss-bg:#fbdfe3;--cal-loss-border:#f6c6cd;--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{font-size:15px;}
.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;
}
.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:#fff;}
.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:#fff;}
.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:#fff;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:#fff;}
.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:#fff;}
.sb-logo-text span{color:var(--blue);}
.sb-section{padding:8px 10px 4px;font-size:10px;color:var(--text3);letter-spacing:1px;text-transform:uppercase;}
.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);}
.sb-avatar{width:28px;height:28px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fff;flex-shrink:0;}
.sb-username{font-size:12px;font-weight:500;color:#fff;white-space:nowrap;}
.sb-plan{font-size:10px;color:var(--blue);}

.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:#fff;}
.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;}

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:#fff;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:#fff;}
.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(--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.green{background:var(--green);}
.ms-bar.red{background:var(--red);}
.ms-val{font-size:16px;font-weight:700;color:#fff;}

/* ---------- Calendar ---------- */
.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;}
.cal-month{display:flex;align-items:center;gap:10px;}
.cal-month-name{font-size:15px;font-weight:600;color:#fff;}
.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:#fff;}
.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{display:grid;grid-template-columns:repeat(7,1fr) 110px;gap:5px;}
.cal-head{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:0.5px;text-align:center;padding:6px 0;font-weight:500;}
.cal-cell{background:var(--surface2);border:1px solid var(--border);border-radius:8px;min-height:78px;padding:8px;position:relative;}
.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:11px;color:var(--text3);margin-bottom:6px;}
.cc-pnl{font-size:14px;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:10px;color:var(--text3);}
.cc-r{font-size:10px;color:var(--text3);margin-top:2px;}
.cc-dot{position:absolute;bottom:8px;right:8px;width:6px;height:6px;border-radius:50%;background:var(--blue);}
.week-cell{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px;min-height:78px;display:flex;flex-direction:column;justify-content:center;}
.wk-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.6px;margin-bottom:4px;}
.wk-pnl{font-size:14px;font-weight:700;color:#fff;margin-bottom:2px;}
.wk-pnl.pos{color:var(--green);}
.wk-pnl.neg{color:var(--red);}
.wk-days{font-size:10px;padding:2px 8px;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;}