/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:       #070b12;
  --bg2:      #0b1220;
  --bg3:      #0f1a2e;
  --bg4:      #162338;
  --border:   #1e3352;
  --border2:  #2a4870;
  --purple:   #00d4b4;
  --purple-h: #00b89c;
  --purple-l: rgba(0,212,180,.18);
  --purple-d: #008a7a;
  --green:    #00e89a;
  --green-d:  rgba(0,232,154,.14);
  --red:      #ff3d5a;
  --red-d:    rgba(255,61,90,.14);
  --yellow:   #ffb800;
  --blue:     #38c8ff;
  --text:     #eaf4ff;
  --muted:    #94afd4;
  --muted2:   #5e7898;
  --radius:   8px;
  --radius-s: 5px;
  --sidebar:  220px;
  --topbar:   52px;
}
/* ── Light Theme ─── */
body.light-theme {
  --bg:      #f4f7fb;
  --bg2:     #ffffff;
  --bg3:     #eef2f8;
  --bg4:     #e2e8f2;
  --border:  #cdd6e3;
  --border2: #b8c4d4;
  --text:    #1a2540;
  --muted:   #5a6a88;
  --purple:  #00a88d;
  --accent:  #00a88d;
  --accent2: #007a6a;
}

/* Light theme overrides for specific components */
body.light-theme #sidebar {
  background: #ffffff;
  border-right-color: #e2e8f0;
}
body.light-theme .nav-item {
  color: #64748b;
}
body.light-theme .nav-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}
body.light-theme .nav-item.active {
  background: rgba(0,194,163,.08);
  color: #00c2a3;
}
body.light-theme .modal-box {
  background: #ffffff;
  border-color: #e2e8f0;
}
body.light-theme .modal-overlay {
  background: rgba(0,0,0,.4);
}
body.light-theme #live-ticker {
  background: #ffffff;
  border-bottom-color: #e2e8f0;
}
body.light-theme .chart-topbar {
  background: #f8fafc;
  border-bottom-color: #e2e8f0;
}
body.light-theme .chart-topbar-btn {
  color: #64748b;
}
body.light-theme .chart-topbar-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}
body.light-theme .session-card {
  background: #ffffff;
  border-color: #e2e8f0;
}
body.light-theme .session-card:hover {
  border-color: rgba(0,194,163,.25);
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
body.light-theme input,
body.light-theme select,
body.light-theme textarea {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}
body.light-theme input:focus,
body.light-theme select:focus,
body.light-theme textarea:focus {
  border-color: rgba(0,194,163,.45) !important;
  box-shadow: 0 0 0 3px rgba(0,194,163,.1) !important;
}
body.light-theme .sidebar-brand {
  border-bottom-color: #e2e8f0;
}
body.light-theme .sidebar-user,
body.light-theme .user-row {
  background: #f8fafc;
  border-color: #e2e8f0;
}
body.light-theme .nav-section-label {
  color: #94a3b8;
}
body.light-theme #watchlist-panel {
  border-top-color: #e2e8f0;
}
body.light-theme .stat-card,
body.light-theme .card {
  background: #ffffff;
  border-color: #e2e8f0;
}
body.light-theme table thead tr {
  background: #f8fafc;
}
body.light-theme table tbody tr:hover {
  background: #f8fafc;
}

/* Light theme toggle button */
#theme-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
  margin: 4px 6px 0;
  width: calc(100% - 12px);
}
#theme-toggle:hover {
  border-color: var(--purple);
  color: var(--text);
}
.theme-toggle-icon {
  font-size: 14px;
}

html, body { height:100%; overflow:hidden; background:var(--bg); color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; font-size:13px; }

/* scrollbar */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:var(--bg2); }
::-webkit-scrollbar-thumb { background:var(--bg4); border-radius:2px; }
::-webkit-scrollbar-thumb:hover { background:var(--border2); }

/* ── Layout ── */
#shell { display:flex; height:calc(100vh - 32px); overflow:hidden; }

/* ── Sidebar ── */
#sidebar {
  width:var(--sidebar); min-width:var(--sidebar);
  background:linear-gradient(180deg, #0a1422 0%, #080e1a 100%);
  border-right:1px solid var(--border2);
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow: 2px 0 20px rgba(0,0,0,.4);
}
/* ── Sidebar Brand ── */
.sidebar-brand {
  display:flex; align-items:center; gap:10px;
  padding:16px 14px 14px;
  border-bottom:1px solid var(--border);
  margin-bottom:8px; flex-shrink:0;
}
.sidebar-logo {
  width:32px; height:32px;
  background:linear-gradient(135deg,#00c2a3,#007a6d);
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,194,163,.3);
}
.sidebar-logo svg { flex-shrink:0; }
.sidebar-brand-name {
  font-size:14px; font-weight:800; color:#e2e8f0; letter-spacing:-.2px;
}
.sidebar-brand-sub {
  font-size:10px; font-weight:700; color:#00c2a3;
  text-transform:uppercase; letter-spacing:.1em;
}
.sidebar-logo-text { font-size:15px; font-weight:800; color:#fff; letter-spacing:-.3px; }
.sidebar-logo-text span { color:var(--purple); }

.sidebar-nav { flex:1; padding:6px 0; display:flex; flex-direction:column; gap:0; overflow-y:auto; }

.nav-section-label {
  font-size:10px; font-weight:700; color:#5e8ab8;
  text-transform:uppercase; letter-spacing:.1em;
  padding:8px 14px 4px; margin-top:4px;
}

.nav-item {
  display:flex; align-items:center; gap:9px;
  padding:8px 12px; margin:1px 6px;
  border-radius:7px;
  color:#a8c4e8; font-size:13px; font-weight:500;
  cursor:pointer; transition:all .15s;
  position:relative; user-select:none;
  border:none; background:transparent;
  width:calc(100% - 12px); text-align:left;
  border-left:2px solid transparent;
}
.nav-item:hover { background:rgba(255,255,255,.09); color:#e0ecff; }
.nav-item.active {
  background:rgba(0,212,180,.18); color:#5de8d0;
  font-weight:700; border-left-color:var(--purple);
  box-shadow: inset 0 0 12px rgba(0,212,180,.06);
}
.nav-item .nav-icon { width:16px; height:16px; flex-shrink:0; opacity:.7; }
.nav-item.active .nav-icon { opacity:1; }
.nav-item:hover .nav-icon { opacity:.9; }

.sidebar-bottom {
  padding:12px 14px; border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:8px;
}
.darkmode-row {
  display:flex; align-items:center; gap:8px; color:var(--muted);
  font-size:12px; cursor:pointer; padding:4px 0;
}
/* ── Sidebar User (bottom) ── */
.sidebar-user, .user-row {
  display:flex; align-items:center; gap:9px;
  padding:9px 12px; margin:6px 6px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--bg3);
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.sb-user-status {
  width:8px; height:8px; border-radius:50%;
  background:#00c2a3; flex-shrink:0;
  box-shadow:0 0 6px rgba(0,194,163,.5);
}
.sidebar-user:hover, .user-row:hover { border-color:rgba(0,194,163,.25); }
.sidebar-avatar, .user-avatar {
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg,#00c2a3,#007a6d);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:#fff; flex-shrink:0;
}
.sidebar-user-info, .user-info { flex:1; min-width:0; }
.sidebar-username, .user-name {
  font-size:13px; font-weight:600; color:#e2e8f0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sidebar-plan, .user-plan {
  font-size:10px; font-weight:700; color:#00c2a3;
  text-transform:uppercase; letter-spacing:.08em;
}

/* toggle switch */
.toggle-wrap { margin-left:auto; }
.toggle { width:36px; height:20px; background:var(--bg4); border:1px solid var(--border2);
  border-radius:10px; position:relative; cursor:pointer; transition:background .2s; }
.toggle.on { background:var(--purple); border-color:var(--purple); }
.toggle::after { content:''; position:absolute; top:3px; left:3px; width:12px; height:12px;
  background:#fff; border-radius:50%; transition:transform .2s; }
.toggle.on::after { transform:translateX(16px); }

/* ── Main content ── */
#main { flex:1; display:flex; flex-direction:column; overflow:hidden; }

/* ── Top bar (pages) ── */
.page-topbar {
  height:var(--topbar); min-height:var(--topbar); background:var(--bg2);
  border-bottom:1px solid var(--border); display:flex; align-items:center;
  padding:0 20px; gap:12px;
}
.page-title { font-size:16px; font-weight:700; color:#fff; }
.spacer { flex:1; }
.btn-primary {
  background:var(--purple); color:#fff; border:none; border-radius:var(--radius-s);
  font-size:13px; font-weight:600; padding:8px 14px; cursor:pointer;
  transition:background .15s; display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.btn-primary:hover { background:var(--purple-h); }
.btn-secondary {
  background:var(--bg4); color:var(--text); border:1px solid var(--border);
  border-radius:var(--radius-s); font-size:12px; font-weight:500; padding:7px 12px;
  cursor:pointer; transition:all .15s; display:flex; align-items:center; gap:5px;
}
.btn-secondary:hover { background:var(--bg3); border-color:var(--border2); }
.btn-icon {
  background:none; border:none; color:var(--muted); cursor:pointer;
  padding:5px; border-radius:4px; transition:color .15s;
}
.btn-icon:hover { color:var(--text); }

/* ── Views ── */
.view { display:none; flex:1; flex-direction:column; overflow:hidden; }
.view.active { display:flex; }
.view-scroll { flex:1; overflow-y:auto; padding:20px; }

/* ── Cards ── */
.card {
  background:linear-gradient(145deg, var(--bg3), #0d1828);
  border:1px solid var(--border2);
  border-radius:var(--radius); padding:16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.card-title { font-size:12px; font-weight:700; color:#cce0ff; margin-bottom:4px; }
.card-sub   { font-size:11px; color:#8aaace; }

/* ── Dashboard ── */
.dash-welcome {
  background:linear-gradient(135deg, #112035 0%, #071428 100%);
  border:1px solid var(--border2); border-radius:var(--radius);
  padding:20px; display:flex; align-items:center; gap:16px;
}
.dash-avatar {
  width:52px; height:52px; border-radius:var(--radius); background:var(--purple);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:800; color:#fff; flex-shrink:0;
}
.dash-welcome-text h2 { font-size:18px; font-weight:700; color:#fff; }
.dash-welcome-text p  { font-size:12px; color:var(--muted); margin-top:2px; }
.dash-welcome-text em { font-size:11px; color:#00c2a3; display:block; margin-top:6px; font-style:italic; }
.dash-time { margin-left:auto; text-align:right; }
.dash-time .time { font-size:18px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
.dash-time .tz   { font-size:11px; color:var(--muted); }

.stat-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.stat-card {
  background:linear-gradient(145deg, var(--bg3), #0d1828);
  border:1px solid var(--border2); border-radius:var(--radius);
  padding:14px 16px; box-shadow: 0 2px 10px rgba(0,0,0,.35);
  transition: border-color .2s;
}
.stat-card:hover { border-color: rgba(0,212,180,.3); }
.stat-card .sc-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.stat-card .sc-label { font-size:12px; color:#c8ddf5; font-weight:600; }
.stat-card .sc-icon  { width:20px; height:20px; opacity:.5; }
.stat-card .sc-value { font-size:26px; font-weight:700; color:#fff; }
.stat-card .sc-sub   { font-size:11px; color:#8aaace; margin-top:4px; }

.charts-row { display:grid; grid-template-columns:1fr 1fr 320px; gap:12px; }
.donut-wrap { display:flex; align-items:center; justify-content:center; padding:10px 0; }

/* ── Sessions ── */
.sessions-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.session-card {
  background:linear-gradient(145deg, var(--bg3) 0%, #0d1828 100%);
  border:1px solid var(--border2); border-radius:var(--radius);
  padding:16px; cursor:pointer; transition:all .2s; position:relative;
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.session-card:hover {
  border-color:var(--purple);
  background:linear-gradient(145deg, var(--bg4) 0%, #162034 100%);
  box-shadow: 0 4px 20px rgba(0,212,180,.12);
  transform: translateY(-1px);
}
.session-card-header { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.session-badge {
  background:linear-gradient(135deg, var(--purple), var(--purple-h));
  color:#fff; font-size:10px; font-weight:700;
  padding:3px 8px; border-radius:4px; text-transform:uppercase;
  letter-spacing:.04em; box-shadow: 0 2px 8px rgba(0,212,180,.3);
}
.session-name { font-size:13px; font-weight:700; color:#d8eeff; flex:1; }
.session-actions { display:flex; gap:4px; }
.session-chart { height:80px; margin-bottom:10px; }
.session-chart canvas, .session-chart svg { width:100%; height:100%; }
.session-footer { display:flex; justify-content:space-between; }
.session-capital { font-size:14px; font-weight:700; color:#ffffff; }
/* Session card icon buttons + dropdown */
.sc-icon-btn {
  background:var(--bg4); border:1px solid var(--border); border-radius:5px;
  color:var(--muted); font-size:11px; padding:3px 7px; cursor:pointer; line-height:1;
  transition:all .15s;
}
.sc-icon-btn:hover { border-color:var(--purple); color:#fff; }
.sc-icon-btn.sc-del:hover { border-color:#ef4444; color:#ef4444; }
.sc-menu-wrap { position:relative; }
.sc-dropdown {
  display:none; position:absolute; top:calc(100% + 4px); right:0; z-index:200;
  background:var(--bg3); border:1px solid var(--border); border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.5); min-width:130px; overflow:hidden;
}
.sc-menu-wrap.open .sc-dropdown { display:block; }
.sc-dropdown div {
  padding:8px 14px; font-size:12px; color:var(--text); cursor:pointer;
  transition:background .12s;
}
.sc-dropdown div:hover { background:var(--bg4); color:#fff; }

/* ── Analytics page ── */
.an-kpi-bar-item {
  padding:10px 20px; border-right:1px solid var(--border); min-width:130px;
}
.an-kpi-bar-label { font-size:10px; color:#8aaace; margin-bottom:3px; font-weight:600; letter-spacing:.03em; }
.an-kpi-bar-val { font-size:16px; font-weight:800; color:#ffffff; }
.an-toggle-btn {
  background:var(--bg3); border:1px solid var(--border); border-radius:5px;
  color:var(--muted); font-size:11px; padding:4px 10px; cursor:pointer; transition:.12s;
}
.an-toggle-btn.active { background:#062030; border-color:#00c2a3; color:#9aeee0; }
.an-info-row {
  display:flex; align-items:center; gap:6px;
  padding:5px 0; border-bottom:1px solid var(--border); font-size:11px; color:#fff;
}
.an-info-row:last-child { border-bottom:none; }
.an-info-lbl { color:var(--muted); flex:1; }
.an-info-ico { width:12px; height:12px; color:var(--muted); flex-shrink:0; }
.an-stat-card {
  background:var(--bg2); border:1px solid var(--border); border-radius:8px;
  padding:10px 14px; text-align:center;
}
.an-stat-lbl { font-size:10px; color:var(--muted); margin-bottom:4px; }
.an-stat-val { font-size:22px; font-weight:700; color:#fff; }
.an-detail-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 0; border-bottom:1px solid var(--border); font-size:11px; color:var(--muted);
}
.an-detail-row:last-child { border-bottom:none; }
.an-detail-row span:last-child { color:#fff; font-weight:600; }
/* Radar cards */
.an-radar-card {
  background:var(--bg3); border:1px solid var(--border); border-radius:10px;
  padding:14px; min-height:180px;
}
.an-radar-title { font-size:12px; font-weight:600; color:#fff; margin-bottom:4px; }
.an-radar-sub   { font-size:10px; color:var(--muted); line-height:1.4; margin-bottom:10px; }
.an-radar-canvas{ width:100%; height:160px; }
/* Pro overlay */
.an-pro-overlay {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(5,8,18,.15); backdrop-filter:blur(2px);
}
/* Simulator */
.an-sim-field { display:flex; flex-direction:column; gap:3px; }
.an-sim-field label { font-size:11px; color:var(--muted); }
.an-sim-input {
  background:var(--bg3); border:1px solid var(--border); border-radius:6px;
  color:#fff; font-size:12px; padding:6px 8px; width:100%;
}
.an-sim-stat {
  padding:8px 14px; border-right:1px solid var(--border); min-width:110px;
  font-size:11px; font-weight:600; color:#fff; flex-shrink:0;
}
.an-sim-stat-lbl { font-size:9px; color:var(--muted); margin-bottom:3px; white-space:nowrap; }
/* Trade table */
.an-trade-tbl { width:100%; border-collapse:collapse; font-size:12px; }
.an-trade-tbl th {
  text-align:left; padding:8px 10px; color:var(--muted); border-bottom:1px solid var(--border);
  font-weight:500; white-space:nowrap; cursor:pointer;
}
.an-trade-tbl td { padding:8px 10px; border-bottom:1px solid var(--border); color:var(--text); white-space:nowrap; }
.an-trade-tbl tr:last-child td { border-bottom:none; }
.an-trade-tbl tr:hover td { background:var(--bg3); }
.session-capital.pos { color:var(--green); }
.session-capital.neg { color:var(--red); }
.session-date { font-size:10px; color:var(--muted); display:flex; align-items:center; gap:4px; }

/* ── Chart view ── */
#view-chart { display:none; flex-direction:column; height:100vh; }
#view-chart.active { display:flex; }

#chart-topbar {
  height:40px; min-height:40px; background:linear-gradient(90deg, #091322, #0a1628);
  border-bottom:1px solid var(--border2);
  display:flex; align-items:center; gap:0; padding:0 8px;
}
.cbt-symbol { font-size:14px; font-weight:700; color:#fff; padding:0 10px; }
.cbt-btn {
  background:none; border:none; color:#d8eeff; font-size:12px; font-weight:600;
  padding:0 8px; height:40px; cursor:pointer; transition:color .15s;
  display:flex; align-items:center; gap:5px; white-space:nowrap;
}
.cbt-btn:hover { color:#fff; background:var(--bg4); }
.cbt-sep { width:1px; height:20px; background:var(--border); margin:0 4px; }
.cbt-tf-group { display:flex; gap:0; }
.cbt-tf { background:none; border:none; color:#d8eeff; font-size:11px; font-weight:600;
  padding:0 7px; height:40px; cursor:pointer; transition:all .15s; }
.cbt-tf:hover { color:#fff; }
.cbt-tf.active { color:#fff; background:var(--purple-l); }
.cbt-right { margin-left:auto; display:flex; align-items:center; gap:4px; }
.cbt-place-order {
  background:var(--purple); color:#fff; border:none; border-radius:var(--radius-s);
  font-size:12px; font-weight:600; padding:6px 12px; cursor:pointer; transition:background .15s;
}
.cbt-place-order:hover { background:var(--purple-h); }
.cbt-close-trade {
  background:var(--red-d); color:var(--red); border:1px solid var(--red);
  border-radius:var(--radius-s); font-size:12px; font-weight:700;
  padding:6px 12px; cursor:pointer; transition:all .15s; margin-left:6px;
}
.cbt-close-trade:hover { background:var(--red); color:#fff; }

#chart-body { flex:1; display:flex; overflow:hidden; background:#080c12; position:relative; }
#drawing-tools {
  width:46px; min-width:46px; background:#0d1117;
  border-right:1px solid #2a2e39;
  display:flex; flex-direction:column; align-items:center; padding:4px 0 8px;
  overflow-y:auto; overflow-x:hidden;
  scrollbar-width:none;
}
#drawing-tools::-webkit-scrollbar { display:none; }
.dt-btn {
  width:28px; height:28px; background:none; border:none; border-radius:3px;
  color:#c0d4f0; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .1s, color .1s; flex-shrink:0; margin:1px 0; position:relative;
}
.dt-btn:hover { background:rgba(140,160,200,.16); color:#e0eaff; }
.dt-btn.active { color:#00c2a3; background:rgba(0,194,163,.1); }
.dt-btn.active:hover { background:rgba(0,194,163,.18); }
.dt-sep { width:30px; height:1px; background:#2a2e39; margin:4px 0; flex-shrink:0; }

/* ── Drawing toolbar: groups & dropdowns ─────────────────────────────────── */
.dt-group { position:relative; display:flex; flex-direction:column; align-items:center; }
.dt-arr {
  position:absolute; bottom:2px; right:2px;
  width:0; height:0;
  border-left:3.5px solid transparent;
  border-right:3.5px solid transparent;
  border-top:4px solid currentColor;
  opacity:0.5;
  pointer-events:none;
}
.dt-dropdown {
  display:none; position:fixed;
  background:#1e222d; border:1px solid #363a45;
  border-radius:6px; min-width:230px;
  z-index:10000; box-shadow:0 8px 32px rgba(0,0,0,.6);
  padding:4px 0; overflow:hidden;
}
.dt-dropdown.open { display:block; }
.dt-dd-head {
  font-size:10px; font-weight:700; letter-spacing:.08em;
  color:#8898bb; padding:8px 12px 4px; text-transform:uppercase;
}
.dt-dd-sep { height:1px; background:#2a2e39; margin:4px 0; }
.dt-dd-item {
  display:flex; align-items:center; gap:10px;
  padding:6px 12px; cursor:pointer; font-size:12.5px; color:#d1d4dc;
  transition:background .1s; position:relative;
}
.dt-dd-item:hover { background:rgba(255,255,255,.06); }
.dt-dd-item.active { color:#00c2a3; }
.dt-dd-item.soon { opacity:.45; cursor:default; }
.dt-dd-item.soon:hover { background:none; }
.dt-dd-key { margin-left:auto; font-size:10px; color:#8898bb; font-family:monospace; }
.dt-dd-item svg { flex-shrink:0; opacity:.8; }

#chart-container {
  flex:1; position:relative; overflow:hidden; background:#0d1117;
  display:flex; flex-direction:column;
}
#tvchart   { flex:1; min-height:0; position:relative; overflow:hidden; background:#0d1117; }
#vol-sep { display:none; height:4px; background:#0d1117; border-top:1px solid #1e2d42; cursor:ns-resize; flex-shrink:0; transition:background .12s; }
#vol-sep:hover { background:#1e2d42; }
#vol-pane { display:none; height:80px; min-height:40px; flex-shrink:0; position:relative; overflow:hidden; background:#0d1117; border-top:1px solid #1e2d42; }
#volchart { width:100%; height:100%; }
#vol-pane-label { position:absolute; top:4px; left:8px; font-size:10px; color:#334155; pointer-events:none; font-family:monospace; z-index:5; }
#tvchart2  { flex:1; min-height:0; background:#0d1117; }

/* ── Pane separator (TradingView-style) ─────────────────────────────────── */
#pane-sep {
  height:4px; background:#0d1117; border-top:1px solid #2a2e39;
  cursor:ns-resize; position:relative; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:background .12s;
}
#pane-sep:hover { background:#1e222d; }
#pane-sep:hover #pane-sep-grip { opacity:1; }
#pane-sep-grip {
  color:#4a4e5a; opacity:0; transition:opacity .12s; pointer-events:none;
  display:flex; align-items:center;
}

#macd-pane {
  height:22%; min-height:60px; max-height:45%;
  position:relative; display:flex; flex-direction:column; background:#0d1117;
  flex-shrink:0;
}
#macd-label {
  position:absolute; top:5px; left:10px; z-index:5;
  font-size:11px; color:#8898bb; pointer-events:none;
  display:flex; align-items:center; gap:4px;
}
#macd-vals { display:flex; gap:8px; }
#macdchart { flex:1; min-height:0; }

/* chart info overlay */
#chart-info-overlay {
  position:absolute; top:8px; left:8px; pointer-events:none; z-index:5;
}
#cio-title { font-size:12px; font-weight:600; color:#fff; margin-bottom:3px; }
#cio-ohlc  { font-size:11px; color:var(--muted); display:flex; gap:10px; }
#cio-ohlc .o { color:#9ca3af; }
#cio-ohlc .h { color:#26a69a; }
#cio-ohlc .l { color:#ef5350; }
#cio-ohlc .c { color:#fff; font-weight:600; }
#cio-ohlc .ch { }
#cio-ohlc .vol { color:var(--muted); }

/* ── Status bar ── */
#chart-status {
  height:44px; min-height:44px; background:var(--bg2);
  border-top:1px solid var(--border);
  display:flex; align-items:center; padding:0 16px; gap:0;
}
.cs-stat { padding:0 16px; display:flex; flex-direction:column; align-items:flex-start;
  border-right:1px solid var(--border); }
.cs-stat:first-child { padding-left:0; }
.cs-label { font-size:10px; color:#7a9dc8; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.cs-value { font-size:13px; font-weight:600; color:#fff; }
.cs-value.pos { color:var(--green); }
.cs-value.neg { color:var(--red); }
.cs-replay { margin-left:auto; display:flex; align-items:center; gap:8px; }
.replay-speed {
  width:80px; height:4px; background:var(--border); border-radius:2px;
  position:relative; cursor:pointer;
}
.replay-speed-fill { height:100%; background:var(--purple); border-radius:2px; width:50%; }
.replay-progress { flex:1; min-width:120px; max-width:200px; display:flex; align-items:center; gap:6px; }
.rp-bar { flex:1; height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
.rp-fill { height:100%; background:var(--purple); border-radius:2px; transition:width .1s; }
.rp-pct  { font-size:10px; color:var(--muted); white-space:nowrap; }
.replay-btn {
  background:none; border:none; color:var(--muted); cursor:pointer;
  font-size:13px; padding:4px 6px; border-radius:4px; transition:all .15s;
  display:flex; align-items:center; gap:4px;
}
.replay-btn:hover { background:var(--bg4); color:#fff; }
.replay-btn.play-on { background:var(--purple-l); color:var(--purple); }
.replay-btn.active { background:#2962ff; color:#fff; border-radius:4px; }
.replay-tf-sel {
  background:var(--bg4); border:1px solid var(--border); color:var(--text);
  font-size:11px; padding:3px 6px; border-radius:4px; cursor:pointer; outline:none;
}
.replay-speed-sel {
  background:var(--bg4); border:1px solid var(--border); color:var(--text);
  font-size:11px; padding:3px 6px; border-radius:4px; cursor:pointer; outline:none;
}
.replay-speed-range {
  -webkit-appearance:none; appearance:none;
  width:80px; height:4px; border-radius:2px; outline:none; cursor:pointer;
  background: linear-gradient(to right, #7c3aed 0%, #7c3aed 50%, #2a3050 50%, #2a3050 100%);
}
.replay-speed-range::-webkit-slider-thumb {
  -webkit-appearance:none; width:12px; height:12px;
  border-radius:50%; background:#a855f7; cursor:pointer;
  box-shadow:0 0 4px rgba(168,85,247,.5);
}
.replay-speed-range::-moz-range-thumb {
  width:12px; height:12px; border:none;
  border-radius:50%; background:#a855f7; cursor:pointer;
}
.replay-date-input {
  background:#151929; border:1px solid #2a3050; border-radius:5px;
  padding:3px 7px; font-size:11px; color:#e2e8f0; outline:none; width:120px;
}
.replay-jump { display:flex; align-items:center; gap:4px; margin-left:2px; }
.replay-jump-btn {
  background:#1e2337; border:1px solid #2a3050; border-radius:5px;
  padding:3px 9px; font-size:11px; color:#2563eb; font-weight:600; cursor:pointer;
}
.replay-jump-btn:hover { background:#2a3050; }
.utc-sel {
  background:var(--bg4); border:1px solid var(--border); color:var(--text);
  font-size:11px; padding:2px 4px; border-radius:4px; cursor:pointer; outline:none;
  max-width:160px;
}

/* ── Bottom positions panel ── */
body:not(.backtest-mode) #pp-handle,
body:not(.backtest-mode) #positions-panel { display:none !important; }
#pp-handle {
  height:10px; min-height:10px; background:var(--bg3); border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  user-select:none; transition:background .15s;
}
#pp-handle:hover { background:var(--bg4); }
#pp-handle-arrow {
  font-size:9px; color:var(--muted); transition:transform .2s; line-height:1;
}
#positions-panel {
  background:var(--bg2);
  height:160px; min-height:0; display:flex; flex-direction:column; overflow:hidden;
  transition:height .2s ease;
}
#positions-panel.pp-collapsed { height:0; }
.pp-tabs { display:flex; border-bottom:1px solid var(--border); }
.pp-tab {
  padding:8px 16px; font-size:12px; font-weight:600; color:#8aaace;
  cursor:pointer; border-bottom:2px solid transparent; transition:all .15s;
}
.pp-tab.active { color:#ffffff; border-bottom-color:var(--purple); }
.pp-body { flex:1; overflow-y:auto; }
.pp-table { width:100%; border-collapse:collapse; }
.pp-table th {
  font-size:10px; text-transform:uppercase; letter-spacing:.04em; font-weight:700;
  color:#c0d4f0; padding:6px 10px; text-align:left;
  border-bottom:1px solid var(--border); background:var(--bg2); position:sticky; top:0;
}
.pp-table td { padding:6px 10px; font-size:11px; color:#c8d8f0; border-bottom:1px solid var(--border); }
.pp-table tr:hover td { background:var(--bg4); }
.tag-long  { color:var(--blue); font-weight:700; }
.tag-short { color:var(--red);  font-weight:700; }
.pnl-pos { color:var(--green); font-weight:700; }
.pnl-neg { color:var(--red);   font-weight:700; }
.no-trades { padding:20px; text-align:center; color:var(--muted); font-size:12px; }

/* ── Modal base ── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; z-index:1000;
}
.modal-overlay.open { display:flex; }
.modal-box {
  background:var(--bg3); border:1px solid var(--border2);
  border-radius:12px; padding:28px 28px 24px; width:520px; max-height:90vh; overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.modal-box.wide { width:600px; }
.modal-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:6px; }
.modal-title { font-size:17px; font-weight:700; color:#fff; }
.modal-sub   { font-size:12px; color:var(--muted); margin-bottom:20px; }
.modal-close { background:none; border:none; color:var(--muted); cursor:pointer; font-size:18px;
  transition:color .15s; padding:0; }
.modal-close:hover { color:#fff; }

/* Form elements */
.form-grid { display:grid; gap:14px; }
.form-grid-2 { grid-template-columns:1fr 1fr; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-label { font-size:11px; font-weight:600; color:var(--text); text-transform:uppercase; letter-spacing:.04em; }
.form-input {
  background:var(--bg4); border:1px solid var(--border);
  border-radius:var(--radius-s); color:#fff; font-size:13px;
  padding:9px 11px; outline:none; transition:border-color .15s; width:100%;
}
.form-input:focus { border-color:var(--purple); }
.form-select {
  background:var(--bg4); border:1px solid var(--border);
  border-radius:var(--radius-s); color:#fff; font-size:13px;
  padding:9px 11px; outline:none; cursor:pointer; width:100%;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center;
  padding-right:30px;
}
.form-select:focus { border-color:var(--purple); outline:none; }
.form-toggle-row { display:flex; align-items:center; justify-content:space-between;
  background:var(--bg4); border:1px solid var(--border); border-radius:var(--radius-s);
  padding:10px 12px; }
.form-toggle-label { font-size:12px; color:var(--text); display:flex; align-items:center; gap:6px; }
.info-icon { width:14px; height:14px; border-radius:50%; background:var(--muted2);
  display:inline-flex; align-items:center; justify-content:center; font-size:9px; color:#fff; }
.form-error { font-size:11px; color:var(--red); min-height:14px; }
.modal-actions { display:flex; gap:8px; margin-top:20px; }
.modal-actions .btn-primary { flex:1; justify-content:center; padding:10px; font-size:14px; }
.modal-actions .btn-secondary { padding:10px 16px; }

/* Place Order modal */
.po-segment { display:flex; background:var(--bg4); border:1px solid var(--border);
  border-radius:var(--radius-s); overflow:hidden; }
.po-seg-btn { flex:1; background:none; border:none; color:var(--muted); font-size:12px;
  font-weight:600; padding:8px; cursor:pointer; transition:all .15s; }
.po-seg-btn.active { background:var(--purple); color:#fff; }
.po-risk-quick { display:flex; gap:6px; margin-top:6px; }
.po-quick-btn { flex:1; background:var(--bg4); border:1px solid var(--border); color:var(--muted);
  border-radius:4px; font-size:12px; font-weight:600; padding:6px; cursor:pointer; transition:all .15s; }
.po-quick-btn:hover { border-color:var(--purple); color:var(--purple); }
.po-section { margin-top:16px; border-top:1px solid var(--border); padding-top:14px; }
.po-section-header { display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; margin-bottom:10px; }
.po-section-title { font-size:12px; font-weight:600; color:var(--text); }
.po-chevron { color:var(--muted); transition:transform .2s; font-size:10px; }
.po-chevron.open { transform:rotate(180deg); }
.po-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.po-pips { display:flex; align-items:center; gap:6px; }
.po-pips input { flex:1; }
.po-pips .pips-label { font-size:10px; color:var(--muted); white-space:nowrap; }
.po-long-short { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.po-long  { background:var(--purple); color:#fff; border:none; border-radius:var(--radius-s);
  font-size:14px; font-weight:700; padding:10px; cursor:pointer; transition:background .15s; }
.po-long:hover  { background:var(--purple-h); }
.po-short { background:var(--bg4); border:1px solid var(--border); color:var(--muted);
  border-radius:var(--radius-s); font-size:14px; font-weight:600; padding:10px; cursor:pointer; transition:all .15s; }
.po-short:hover { border-color:var(--red); color:var(--red); background:var(--red-d); }
.po-long.sel  { background:var(--purple); color:#fff; }
.po-short.sel { background:var(--red-d); border-color:var(--red); color:var(--red); }
.po-confirm {
  background:var(--purple); color:#fff; border:none; border-radius:var(--radius-s);
  font-size:14px; font-weight:700; padding:11px; width:100%;
  cursor:pointer; margin-top:16px; transition:background .15s;
}
.po-confirm:hover { background:var(--purple-h); }
.po-toolbar { display:flex; gap:8px; margin-bottom:16px; }
.po-toolbar-btn { background:var(--bg4); border:1px solid var(--border); color:var(--muted);
  border-radius:4px; width:32px; height:32px; cursor:pointer; display:flex; align-items:center;
  justify-content:center; transition:all .15s; }
.po-toolbar-btn:hover { border-color:var(--purple); color:var(--purple); }
.po-rr-row { display:grid; grid-template-columns:80px 1fr; gap:8px; align-items:end; }
.po-rr-prefix { font-size:13px; color:var(--muted); padding-bottom:9px; }

/* ── TP/SL Drag handles ── */
.drag-handle {
  position: absolute;
  left: 8px;
  height: 22px;
  padding: 0 10px 0 6px;
  border-radius: 4px;
  display: none;
  align-items: center;
  gap: 5px;
  cursor: ns-resize;
  z-index: 990;    /* below modal overlay (1000) */
  font-size: 11px;
  font-weight: 700;
  user-select: none;
  transform: translateY(-50%);
  white-space: nowrap;
  max-width: calc(100% - 20px);
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color: #363a45 transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
  transition: opacity .1s;
}
.drag-handle:hover { opacity: .85; }
.drag-handle-tp { background: #10b981dd; border: 1px solid #10b981; color: #fff; }
.drag-handle-sl { background: #ef4444dd; border: 1px solid #ef4444; color: #fff; }
.dh-grip { font-size: 10px; opacity: .7; line-height: 1; }

/* Place Order overlay — pointer-events:none on backdrop so handles stay clickable */
.po-overlay { pointer-events: none; }
.po-overlay .modal-box { pointer-events: auto; }

/* ── Order Confirm Bar ── */
#order-confirm-bar {
  position: fixed;
  bottom: 0; left: var(--sidebar); right: 0;
  height: 52px;
  background: #161b27;
  border-top: 2px solid var(--purple);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 16px;
  z-index: 1050;
  box-shadow: 0 -4px 20px rgba(0,0,0,.5);
}
.ocb-info { display:flex; align-items:center; gap:12px; flex:1; flex-wrap:wrap; }
.ocb-dir-badge {
  background: var(--purple); color: #fff;
  font-size: 12px; font-weight: 700; padding: 3px 10px;
  border-radius: 4px; letter-spacing: .04em;
}
.ocb-dir-badge.short { background: var(--red); }
.ocb-field { font-size: 13px; }
.ocb-sep   { color: var(--border2); }
.ocb-actions { display:flex; gap:8px; flex-shrink:0; }
.ocb-cancel {
  background: var(--bg4); border: 1px solid var(--border);
  color: var(--muted); font-size: 13px; font-weight: 600;
  padding: 7px 14px; border-radius: var(--radius-s); cursor: pointer;
  transition: all .15s;
}
.ocb-cancel:hover { border-color: var(--red); color: var(--red); }
.ocb-confirm {
  background: var(--purple); border: none; color: #fff;
  font-size: 13px; font-weight: 700;
  padding: 7px 18px; border-radius: var(--radius-s); cursor: pointer;
  transition: background .15s;
}
.ocb-confirm:hover { background: var(--purple-h); }

/* ── Deepview ── */
.dv-header { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.dv-flag { width:40px; height:40px; border-radius:50%; background:var(--border); overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-size:20px; }
.dv-asset-name { font-size:24px; font-weight:800; color:#fff; }
.dv-asset-sub  { font-size:12px; color:var(--muted); }
.dv-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:16px; }
.dv-tab { padding:10px 16px; font-size:13px; font-weight:500; color:var(--muted);
  cursor:pointer; border-bottom:2px solid transparent; transition:all .15s; display:flex; align-items:center; gap:5px; }
.dv-tab.active { color:var(--purple); border-bottom-color:var(--purple); }
.dv-periods { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.dv-period-btn { padding:8px 16px; background:var(--bg4); border:1px solid var(--border);
  border-radius:var(--radius-s); cursor:pointer; transition:all .15s; }
.dv-period-btn:hover { border-color:var(--border2); }
.dv-period-val { font-size:13px; font-weight:600; }
.dv-period-val.pos { color:var(--green); }
.dv-period-val.neg { color:var(--red); }
.dv-period-lbl { font-size:10px; color:var(--muted); text-align:center; margin-top:2px; }
/* ── Sentiment cards ── */
.sent-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; transition: border-color .15s;
}
.sent-card:hover { border-color: var(--purple); }
.sent-symbol { font-size: 13px; font-weight: 700; color: var(--text); }

.dv-search { position:relative; }
.dv-search input { background:var(--bg4); border:1px solid var(--border); border-radius:var(--radius-s);
  color:#fff; font-size:13px; padding:8px 12px 8px 32px; outline:none; width:300px; }
.dv-search input:focus { border-color:var(--purple); }
.dv-search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--muted); }

/* ── DeepView tabs ── */
.dv-tabs { display:flex; gap:4px; padding:0 0 0 0; border-bottom:1px solid var(--border); margin-bottom:16px; }
.dv-tab { background:none; border:none; border-bottom:2px solid transparent; color:var(--muted);
  font-size:13px; font-weight:600; padding:10px 18px; cursor:pointer; margin-bottom:-1px; transition:color .15s,border-color .15s; }
.dv-tab:hover { color:var(--text); }
.dv-tab.active { color:var(--purple); border-bottom-color:var(--purple); }
.dv-tab-panel {}
.dv-card { background:var(--bg2); border-radius:12px; padding:18px 20px; }
.dv-card-title { font-size:13px; font-weight:700; color:var(--text); margin-bottom:3px; }
.dv-card-sub { font-size:11px; color:var(--muted); }

/* ── Seasonality ── */
.season-pro-overlay {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  z-index:10; border-radius:12px;
  background:rgba(10,10,22,0.5); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
}
.season-pro-lock {
  background:var(--purple); color:#fff; font-size:13px; font-weight:700;
  padding:10px 22px; border-radius:20px; cursor:pointer; border:none;
}
.season-bar-chart { display:flex; align-items:flex-end; gap:3px; height:130px; padding:0 4px; overflow-x:auto; }
.season-bar-col { display:flex; flex-direction:column; align-items:center; flex:1; min-width:18px; max-width:40px; height:100%; }
.season-bar-val { font-size:8px; font-weight:600; margin-bottom:2px; white-space:nowrap; display:none; }
.season-bar-track { flex:1; width:100%; display:flex; align-items:flex-end; background:var(--bg4); border-radius:3px 3px 0 0; overflow:hidden; }
.season-bar-fill { width:100%; border-radius:3px 3px 0 0; }
.season-bar-lbl { font-size:9px; color:var(--muted); margin-top:3px; }
@media(min-width:900px) { .season-bar-val { display:block; } .season-bar-lbl { font-size:10px; } }

/* ── Seasonality sections ── */
.season-section {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.season-section:last-child { margin-bottom: 0; }
.season-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
  flex-wrap: wrap;
}
.season-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.2px;
  margin-bottom: 3px;
}
.season-section-sub {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}
.season-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  max-width: calc(100% - 20px);
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color: #363a45 transparent;
}
.season-legend span {
  display: inline-block;
  width: 10px;
  height: 3px;
  border-radius: 2px;
  flex-shrink: 0;
}
.season-corr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 4px;
}
.season-corr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.season-corr-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
}
.season-corr-val {
  font-size: 11px;
  font-weight: 700;
}
.season-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 700px) {
  .season-two-col { grid-template-columns: 1fr; }
  .season-corr-grid { grid-template-columns: repeat(3, 1fr); }
}

/* COT symbol selector */
.dv-sym-btn {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 20px;
  color: var(--muted); font-size: 12px; font-weight: 600; padding: 5px 14px;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.dv-sym-btn:hover { background: var(--bg4); color: var(--text); }
.dv-sym-btn.active { background: var(--purple); border-color: var(--purple); color: #fff; }

/* ── Toast ── */
#toast {
  position:fixed; bottom:24px; right:24px;
  display:flex; align-items:center; gap:8px;
  padding:12px 20px; border-radius:8px;
  font-size:13px; font-weight:600; color:#fff;
  max-width:360px; z-index:9999;
  pointer-events:none;
  opacity:0; transform:translateY(8px);
  transition:opacity .2s, transform .2s;
}
#toast.show { opacity:1; transform:translateY(0); }
#toast.success { background:rgba(34,197,94,.95); }
#toast.error   { background:rgba(239,68,68,.95); }
#toast.info    { background:rgba(0,194,163,.95); }
#toast.warning { background:rgba(245,158,11,.95); }

/* ── CSV Upload Area ── */
.csv-upload-area {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2px dashed var(--border2); border-radius: var(--radius);
  padding: 24px 16px; cursor: pointer; transition: all .2s;
  background: var(--bg4); text-align: center;
}
.csv-upload-area:hover { border-color: var(--purple); background: var(--purple-l); }
.csv-upload-area.has-file { border-color: var(--green); border-style: solid; }
.csv-upload-icon { font-size: 28px; margin-bottom: 6px; }
.csv-upload-text { font-size: 13px; color: var(--text); font-weight: 500; }

/* ── Asset Dropdown ── */
.asset-select { position:relative; }
.asset-select-btn {
  background:var(--bg4); border:1px solid var(--border);
  border-radius:var(--radius-s); color:#fff; font-size:13px;
  padding:9px 11px; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:8px; transition:border-color .15s; user-select:none;
}
.asset-select-btn:hover,
.asset-select-btn.open { border-color:var(--purple); }
.asset-select-label { flex:1; color:var(--text); }
.asset-select-label.placeholder { color:var(--muted); }
.asset-select-chevron { color:var(--muted); transition:transform .2s; font-size:10px; flex-shrink:0; }
.asset-select-btn.open .asset-select-chevron { transform:rotate(180deg); }
.asset-dropdown {
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:var(--bg3); border:1px solid var(--border2);
  border-radius:var(--radius); box-shadow:0 12px 40px rgba(0,0,0,.6);
  z-index:500; display:none; flex-direction:column; max-height:320px;
}
.asset-dropdown.open { display:flex; }
.asset-search-wrap {
  padding:8px; border-bottom:1px solid var(--border); flex-shrink:0;
  display:flex; align-items:center; gap:6px;
}
.asset-search-wrap svg { flex-shrink:0; color:var(--muted); }
.asset-search-input {
  background:none; border:none; outline:none; color:#fff;
  font-size:12px; flex:1; placeholder:var(--muted);
}
.asset-list { overflow-y:auto; flex:1; padding:4px 0; }
.asset-category {
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); padding:8px 12px 4px; pointer-events:none;
}
.asset-item {
  padding:7px 12px; font-size:13px; color:var(--text); cursor:pointer;
  transition:background .1s; border-radius:4px; margin:0 4px;
}
.asset-item:hover { background:var(--purple-l); color:var(--purple); }
.asset-item.selected { background:var(--purple-l); color:var(--purple); font-weight:600; }
.asset-item.hidden { display:none; }

/* ── Loading ── */
.loading-spinner { width:32px; height:32px; border:3px solid var(--border);
  border-top-color:var(--purple); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes coachDot { 0%,80%,100%{opacity:.2;transform:scale(.7)} 40%{opacity:1;transform:scale(1)} }

/* Coach chat scrollbar */
#coach-messages::-webkit-scrollbar { width:4px; }
#coach-messages::-webkit-scrollbar-thumb { background:#0c2040; border-radius:4px; }
#coach-input:focus { border-color:#00c2a3 !important; }
.loading-overlay { position:absolute; inset:0; background:rgba(10,10,16,.85);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; z-index:500; }
.loading-overlay p { color:var(--muted); font-size:12px; }

/* ── Journal ── */
.jour-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px;
}
.jour-card {
  background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; cursor:pointer; transition:all .15s; position:relative;
}
.jour-card:hover { border-color:var(--purple); background:var(--bg4); }
.jour-card-pair { font-size:17px; font-weight:800; color:#fff; letter-spacing:.3px; }
.jour-card-tf   { font-size:11px; color:var(--purple); font-weight:700; background:var(--purple-l);
  border-radius:4px; padding:2px 7px; display:inline-block; margin-left:8px; }
.jour-card-dates { font-size:11px; color:var(--muted); margin:6px 0 12px; }
.jour-stats-row { display:flex; gap:8px; flex-wrap:wrap; }
.jour-stat-chip {
  background:var(--bg4); border:1px solid var(--border); border-radius:6px;
  padding:4px 9px; font-size:11px; color:var(--muted);
}
.jour-stat-chip span { font-weight:700; color:var(--text); margin-left:3px; }
.jour-pnl-chip {
  position:absolute; top:14px; right:14px; font-size:12px; font-weight:700;
  padding:4px 10px; border-radius:6px;
}
.jour-stats-bar {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:10px; margin-bottom:20px;
}
.jour-kpi {
  background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 16px;
}
.jour-kpi-label { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px; }
.jour-kpi-val   { font-size:18px; font-weight:800; color:#fff; }
.jour-trade-tbl { width:100%; border-collapse:collapse; font-size:12px; }
.jour-trade-tbl th { color:var(--muted); font-weight:600; text-align:left; padding:6px 10px;
  border-bottom:1px solid var(--border); white-space:nowrap; }
.jour-trade-tbl td { padding:8px 10px; border-bottom:1px solid var(--border2); vertical-align:top; }
.jour-trade-tbl tr:last-child td { border-bottom:none; }
.jour-trade-tbl tr:hover td { background:var(--bg4); }
.jour-note-btn { background:none; border:1px dashed var(--border2); border-radius:5px;
  color:var(--muted); font-size:10px; padding:2px 8px; cursor:pointer; white-space:nowrap; }
.jour-note-btn:hover { border-color:var(--purple); color:var(--purple); }
.jour-diary-html h3 { color:#00c2a3; font-size:13px; font-weight:700; margin:18px 0 8px;
  border-bottom:1px solid #0c2040; padding-bottom:6px; }
.jour-diary-html strong { color:#9aeee0; }
.jour-diary-html ul, .jour-diary-html ol { padding-left:16px; margin:6px 0; }
.jour-diary-html li { margin:4px 0; color:#c8d4ea; line-height:1.6; }
.jour-diary-html p { margin:6px 0; color:#c8d4ea; line-height:1.7; }
/* ── Strategy Builder ── */
.sb-tab {
  background:none; border:none; border-radius:6px; color:var(--muted);
  font-size:12px; font-weight:600; padding:5px 12px; cursor:pointer; transition:all .15s;
}
.sb-tab.active { background:var(--bg4); color:var(--text); }
.sb-pill {
  background:rgba(5,150,105,.1); border:1px solid rgba(5,150,105,.25);
  border-radius:20px; color:#34d399; font-size:11px; font-weight:500;
  padding:4px 11px; cursor:pointer; white-space:nowrap; transition:all .15s;
}
.sb-pill:hover { background:rgba(5,150,105,.22); border-color:#059669; }
.sb-h3 { color:#34d399; font-size:13px; font-weight:700; margin:14px 0 6px;
  border-bottom:1px solid var(--border); padding-bottom:5px; }
.sb-json-block {
  background:var(--bg4); border:1px solid var(--border); border-radius:8px;
  padding:12px; margin:8px 0; overflow-x:auto;
}
.sb-json-block pre { font-size:11px; color:#a7f3d0; font-family:monospace; white-space:pre-wrap; margin:0; }
.sb-preview-card { background:var(--bg4); border:1px solid var(--border); border-radius:var(--radius); padding:14px; }
.sb-preview-name { font-size:14px; font-weight:800; color:#fff; margin-bottom:4px; }
.sb-preview-label { font-size:9px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; margin-bottom:6px; }
.sb-preview-stat { display:flex; justify-content:space-between; background:var(--bg3);
  border:1px solid var(--border); border-radius:6px; padding:5px 9px; font-size:11px;
  color:var(--muted); flex:1; min-width:120px; }
.sb-preview-stat span:last-child { color:var(--text); font-weight:600; }
.sb-badge { background:rgba(5,150,105,.12); border:1px solid rgba(5,150,105,.25);
  border-radius:4px; color:#34d399; font-size:10px; font-weight:600;
  padding:2px 7px; display:inline-block; }
.sb-cond-tag { border-radius:5px; font-size:10px; font-weight:600; padding:2px 8px; display:inline-block; margin:2px; }
.sb-cond-tag.indicator { background:rgba(0,194,163,.12); border:1px solid rgba(0,194,163,.25); color:#9aeee0; }
.sb-cond-tag.pattern   { background:rgba(245,158,11,.1);  border:1px solid rgba(245,158,11,.3);  color:#fcd34d; }

/* ── Coach pills ── */
.coach-pill {
  background:rgba(0,194,163,.1); border:1px solid rgba(0,194,163,.25);
  border-radius:20px; color:#00c2a3; font-size:10px; font-weight:600;
  padding:3px 9px; cursor:pointer; white-space:nowrap; transition:all .15s;
}
.coach-pill:hover { background:rgba(0,194,163,.25); border-color:#00c2a3; color:#9aeee0; }

/* ── Edge Finder ── */
.ef-pill {
  background:var(--bg4); border:1px solid var(--border); border-radius:20px;
  color:var(--muted); font-size:11px; font-weight:500; padding:5px 12px;
  cursor:pointer; white-space:nowrap; transition:all .15s;
}
.ef-pill:hover { border-color:var(--purple); color:#00c2a3; background:var(--purple-l); }
.ef-ctx-card {
  background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius);
  padding:12px 14px;
}
.ef-ctx-label { font-size:9px; font-weight:700; color:var(--muted); text-transform:uppercase;
  letter-spacing:.7px; margin-bottom:8px; }
.ef-ctx-stat { display:flex; justify-content:space-between; font-size:12px;
  color:var(--muted); padding:2px 0; }
.ef-ctx-stat span:last-child { color:var(--text); font-weight:600; }
.ef-ctx-btn {
  background:var(--bg4); border:1px solid var(--border); border-radius:6px;
  color:var(--muted); font-size:11px; padding:6px 10px; cursor:pointer; text-align:left;
  transition:all .15s; width:100%;
}
.ef-ctx-btn:hover { border-color:var(--purple); color:#00c2a3; background:var(--purple-l); }
.ef-score-ring {
  width:72px; height:72px; border-radius:50%;
  background:conic-gradient(var(--col) calc(var(--pct) * 1%), var(--bg4) 0);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  margin:8px auto 4px;
  box-shadow: inset 0 0 0 6px var(--bg3);
}
.ef-h3 { color:#00c2a3; font-size:13px; font-weight:700; margin:14px 0 6px;
  border-bottom:1px solid var(--border); padding-bottom:5px; }
.ef-li { display:flex; gap:7px; margin:3px 0; color:#c8d4ea; }
.ef-li span:first-child { color:#00c2a3; flex-shrink:0; margin-top:1px; }

.jour-shot-thumb {
  width:110px; height:62px; object-fit:cover; border-radius:5px;
  border:1px solid var(--border); cursor:zoom-in; transition:transform .15s, border-color .15s;
  display:block;
}
.jour-shot-thumb:hover { transform:scale(1.06); border-color:var(--purple); }

/* Mini analytics */
.mini-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; padding:10px 12px; }
.mini-stat { text-align:center; }
.mini-stat .mv { font-size:13px; font-weight:700; color:#fff; }
.mini-stat .ml { font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.mini-stat .mv.pos { color:var(--green); }
.mini-stat .mv.neg { color:var(--red); }

/* Results panel */
.results-header { font-size:16px; font-weight:700; color:#fff; margin-bottom:16px; }
.results-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
.rc { background:var(--bg4); border:1px solid var(--border); border-radius:var(--radius-s); padding:12px 14px; }
.rc-lbl { font-size:10px; text-transform:uppercase; color:var(--muted); letter-spacing:.04em; }
.rc-val { font-size:20px; font-weight:700; color:#fff; margin-top:2px; }
.rc-val.pos { color:var(--green); }
.rc-val.neg { color:var(--red); }

/* bar progress on deepview */
.annual-bar { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.annual-year { font-size:11px; color:var(--muted); width:36px; text-align:right; }
.annual-track { flex:1; height:14px; background:var(--bg4); border-radius:3px; overflow:hidden; position:relative; }
.annual-fill { height:100%; border-radius:3px; }
.annual-fill.pos { background:var(--green); }
.annual-fill.neg { background:var(--red); }
.annual-val { font-size:11px; font-weight:600; width:50px; text-align:right; }
.annual-val.pos { color:var(--green); }
.annual-val.neg { color:var(--red); }

/* ── Modal tabs (session creation) ── */
.modal-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.modal-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px 8px;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.modal-tab-btn:hover { color: var(--text); }
.modal-tab-btn.active { color: var(--purple); border-bottom-color: var(--purple); }
.modal-tab-pane { /* each tab body */ }

/* ── Dukascopy download progress ── */
.duka-prog-bar {
  height: 6px;
  background: var(--bg4);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.duka-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--purple), #a855f7);
  border-radius: 3px;
  width: 0%;
  transition: width .3s ease;
}

/* ── Timeframe selector (in session creation modal) ── */
.tf-sel-group {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.tf-sel-btn {
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  transition: border-color .12s, color .12s, background .12s;
}
.tf-sel-btn:hover  { border-color: var(--border2); color: var(--text); }
.tf-sel-btn.active { border-color: var(--purple); color: var(--purple); background: var(--purple-l); }

/* ── Symbol selection grid ── */
.symbol-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}
.symbol-card {
  background: var(--bg4);
  border: 2px solid var(--border);
  border-radius: var(--radius-s);
  padding: 10px 8px;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s;
  user-select: none;
}
.symbol-card:hover { border-color: var(--border2); background: var(--bg3); }
.symbol-card.selected { border-color: var(--purple); background: var(--purple-l); }
.symbol-card.downloading { opacity: .7; cursor: default; }
.symbol-card .sc-name { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.symbol-card .sc-status { font-size: 10px; }
.symbol-card .sc-status.ready    { color: var(--green); }
.symbol-card .sc-status.loading  { color: var(--yellow); }
.symbol-card .sc-status.building { color: var(--purple); }
.symbol-card .sc-status.missing  { color: var(--muted); }
.symbol-card .sc-prog { height: 3px; background: var(--bg); border-radius: 2px; margin-top: 5px; overflow: hidden; }
.symbol-card .sc-prog-fill { height: 100%; background: var(--yellow); border-radius: 2px; transition: width .4s; }
.symbol-card .sc-reload { float: right; font-size: 11px; color: var(--muted); cursor: pointer; padding: 0 2px; }
.symbol-card .sc-reload:hover { color: var(--purple); }

/* ── Toggle switch ── */
.toggle-switch { position: relative; display: inline-flex; width: 36px; height: 20px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--bg4); border: 1px solid var(--border2);
  border-radius: 20px; transition: .25s;
}
.toggle-slider::before {
  content: ''; position: absolute;
  width: 14px; height: 14px; left: 2px; bottom: 2px;
  background: var(--muted); border-radius: 50%; transition: .25s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--purple); border-color: var(--purple); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); background: #fff; }

/* ── Market Structure HTML labels ── */
.ms-lbl {
  position: absolute;
  top: 0; left: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(100% - 20px);
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color: #363a45 transparent;
  z-index: 5;
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid currentColor;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}

/* ── Indicator panel ── */
/* ── Indicator modal ─────────────────────────────────────────────────────── */
#indicator-panel { /* overlay — layout via inline style */ }
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ipm-dialog { /* layout via inline style */ }
.ipm-dialog_UNUSED {
  width: 860px;
  max-width: 96vw;
  height: 600px;
  max-height: 92vh;
  background: #131722;
  border: 1px solid #2a2d3e;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.8);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: -apple-system, 'Inter', sans-serif;
}
/* Topbar */
.ipm-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #2a2d3e;
  flex-shrink: 0;
}
.ipm-title {
  font-size: 14px;
  font-weight: 600;
  color: #d1d4dc;
}
.ipm-close {
  background: none;
  border: none;
  color: #787b86;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  line-height: 1;
}
.ipm-close:hover { background: #2a2d3e; color: #d1d4dc; }
/* Search bar */
.ipm-searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid #2a2d3e;
  flex-shrink: 0;
  background: #1e222d;
}
.ipm-search {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 13px;
  color: #d1d4dc;
}
.ipm-search::placeholder { color: #4c525e; }
/* Body = sidebar + list */
.ipm-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
/* Sidebar */
.ipm-sidebar {
  width: 190px;
  flex-shrink: 0;
  border-right: 1px solid #2a2d3e;
  overflow-y: auto;
  padding: 6px 0;
  background: #131722;
}
.ipm-sidebar::-webkit-scrollbar { width: 3px; }
.ipm-sidebar::-webkit-scrollbar-thumb { background: #2a2d3e; }
.ipm-sb-group {
  font-size: 10px;
  font-weight: 700;
  color: #4c525e;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 10px 14px 4px;
  user-select: none;
}
.ipm-sb-grp {
  font-size: 9.5px;
  font-weight: 700;
  color: #2e3a52;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 12px 10px 5px;
  user-select: none;
}
.ipm-sb-grp-ict { color: #4c2d8a; }
.ipm-sb-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: #5a6a8a;
  padding: 7px 10px;
  cursor: pointer;
  border-radius: 7px;
  margin: 1px 0;
  transition: background .12s, color .12s;
  user-select: none;
  white-space: nowrap;
  max-width: calc(100% - 20px);
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color: #363a45 transparent;
  overflow: hidden;
}
.ipm-sb-item:hover { background: rgba(255,255,255,.05); color: #9aadcc; }
.ipm-sb-item.active {
  background: rgba(41,98,255,.18);
  color: #7baeff;
  font-weight: 600;
}
.ipm-sb-item.active svg { opacity: 1; }
.ipm-sb-ict { color: #7a5fa0; }
.ipm-sb-ict:hover { color: #b89fe0; }
.ipm-sb-ict.active { background: rgba(0,194,163,.18); color: #b89fe0; }
.ipm-ict-badge {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  background: rgba(0,194,163,.18);
  border: 1px solid rgba(0,194,163,.4);
  border-radius: 4px;
  padding: 1px 6px;
  color: #00c2a3;
  flex-shrink: 0;
}
/* Indicator rows */
.ipm-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.ipm-list::-webkit-scrollbar { width: 4px; }
.ipm-list::-webkit-scrollbar-thumb { background: #2a2d3e; border-radius: 2px; }
.ipm-list-hdr {
  display: grid;
  grid-template-columns: 32px 1fr 180px 90px;
  padding: 8px 16px;
  border-bottom: 1px solid #2a2d3e;
  font-size: 10px;
  font-weight: 700;
  color: #4c525e;
  text-transform: uppercase;
  letter-spacing: .05em;
  position: sticky;
  top: 0;
  background: #131722;
  z-index: 1;
}
.ipm-row {
  display: grid;
  grid-template-columns: 32px 1fr 180px 90px;
  align-items: center;
  padding: 0 16px;
  min-height: 54px;
  border-bottom: 1px solid #1c2030;
  cursor: pointer;
  transition: background .1s;
}
.ipm-row:hover { background: #1e222d; }
.ipm-row:hover .ipm-add-btn { opacity: 1; }
.ipm-fav-btn {
  background: none;
  border: none;
  color: #2a2d3e;
  font-size: 15px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color .1s;
}
.ipm-fav-btn:hover { color: #f59e0b; }
.ipm-fav-btn.on { color: #f59e0b; }
.ipm-ind-name {
  font-size: 13px;
  font-weight: 500;
  color: #d1d4dc;
}
.ipm-ind-desc {
  font-size: 11px;
  color: #4c525e;
  margin-top: 2px;
}
.ipm-ind-cat {
  font-size: 11px;
  color: #4c525e;
}
.ipm-add-btn {
  opacity: 0;
  background: rgba(41,98,255,.15);
  border: 1px solid #2962ff;
  border-radius: 4px;
  color: #5c8aff;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
  max-width: calc(100% - 20px);
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color: #363a45 transparent;
  justify-self: end;
}
.ipm-add-btn:hover { background: rgba(41,98,255,.3); }
.ipm-empty {
  padding: 40px 0;
  text-align: center;
  color: #4c525e;
  font-size: 13px;
}
/* Footer */
.ipm-footer {
  border-top: 1px solid #2a2d3e;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  min-height: 40px;
}
.ipm-footer-label {
  font-size: 11px;
  color: #4c525e;
  white-space: nowrap;
  max-width: calc(100% - 20px);
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color: #363a45 transparent;
}
.ipm-tmpl-btn {
  background: #1e222d;
  border: 1px solid #2a2d3e;
  color: #787b86;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.ipm-tmpl-btn:hover { border-color: #2962ff; color: #5c8aff; }
/* Active indicator badges */
.ip-type-btn {
  background: #1e222d;
  border: 1px solid #2a2d3e;
  color: #d1d4dc;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.ip-type-btn:hover { border-color: #2962ff; color: #5c8aff; }
#ip-active-list {
  padding: 4px 10px 0;
  display: flex; flex-direction: column; gap: 4px;
}
.ip-active-item {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg4); border-radius: 4px; padding: 5px 8px;
  font-size: 11px; color: var(--text);
}
.ip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ip-active-item span:nth-child(2) { flex: 1; }
.ip-x {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 12px; padding: 0; line-height: 1;
}
.ip-x:hover { color: var(--red); }
.ip-empty { font-size: 11px; color: var(--muted); padding: 4px 2px; }

/* ── Indicator legend (top-left of chart) ── */
#ind-legend {
  position: absolute; top: 36px; left: 8px;
  z-index: 10;
  display: flex; flex-direction: column; gap: 1px;
  pointer-events: none;
  max-width: 480px;
}
.ind-row {
  display: flex; align-items: center; gap: 5px;
  background: rgba(13,17,23,.75); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.06); border-radius: 3px;
  padding: 2px 4px 2px 6px; pointer-events: all;
  min-height: 22px; user-select: none;
}
.ind-row-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ind-row-label { font-size: 12px; color: #d0daf0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.ind-row-label.ind-row-hidden { opacity: .35; }
.ind-row-btns { display: flex; align-items: center; gap: 0; margin-left: 3px; opacity: 0; transition: opacity .12s; }
.ind-row:hover .ind-row-btns { opacity: 1; }
.ind-row-btn {
  background: none; border: none; padding: 3px 4px;
  cursor: pointer; color: #4a5778; border-radius: 3px;
  line-height: 1; transition: color .12s, background .12s;
  display: flex; align-items: center; justify-content: center;
}
.ind-row-btn:hover { color: #c8d4ea; background: rgba(255,255,255,.07); }
.ind-row-btn.ind-btn-del:hover { color: #f44336; }

/* ── Dukascopy cached dataset rows ── */
.duka-dataset-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  margin-bottom: 6px;
}
.duka-dataset-row:last-child { margin-bottom: 0; }

/* ── Economic Calendar ── */
.cal-day-header {
  font-size: 12px; font-weight: 700; color: var(--purple);
  text-transform: capitalize; letter-spacing: .03em;
  padding: 14px 0 6px; border-bottom: 1px solid var(--border); margin-bottom: 8px;
}
.cal-table {
  width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 12px;
}
.cal-table th {
  text-align: left; color: var(--muted); font-weight: 600;
  padding: 4px 10px; border-bottom: 1px solid var(--border);
}
.cal-table td {
  padding: 7px 10px; border-bottom: 1px solid #ffffff08; color: var(--text); vertical-align: middle;
}
.cal-table tbody tr:hover { background: var(--bg2); }
.cal-time { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-flag { font-size: 14px; }
.cal-impact {
  display: inline-block; padding: 1px 7px; border-radius: 20px;
  font-size: 10px; font-weight: 700; border: 1px solid;
}
.cal-title { font-weight: 500; }

/* ── News Strip (in chart) ── */
#news-strip {
  height: 26px; background: var(--bg2); border-top: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 10px; gap: 6px;
  overflow-x: auto; flex-shrink: 0; scrollbar-width: none;
}
#news-strip::-webkit-scrollbar { display: none; }
.news-pill {
  display: inline-flex; align-items: center; padding: 2px 7px;
  border-radius: 20px; font-size: 10px; font-weight: 600;
  white-space: nowrap;
  max-width: calc(100% - 20px);
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color: #363a45 transparent; cursor: default; border: 1px solid;
}
.news-high { background: #ef444420; color: #ef4444; border-color: #ef444440; }
.news-med  { background: #f59e0b20; color: #f59e0b; border-color: #f59e0b40; }

/* news flags now use LightweightCharts native setMarkers — no custom CSS needed */
.news-pref-check {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; cursor: pointer; padding: 3px 6px;
  border-radius: 4px; border: 1px solid var(--border);
  background: var(--bg2);
}
.news-pref-check input { cursor: pointer; }

/* ── Auth modal ──────────────────────────────────────────────────────────── */
.auth-overlay { z-index:9999; }
.auth-modal   { width:360px; padding:32px 28px; }
.auth-logo    { font-size:22px; font-weight:800; color:var(--purple);
                text-align:center; margin-bottom:20px; letter-spacing:-.5px; }
.auth-tabs    { display:flex; border-bottom:1px solid var(--border);
                margin-bottom:20px; }
.auth-tab     { flex:1; background:none; border:none; border-bottom:2px solid transparent;
                padding:8px 0; color:var(--muted); cursor:pointer; font-size:13px;
                font-weight:600; transition:color .15s; }
.auth-tab.active { color:var(--purple); border-bottom-color:var(--purple); }
.auth-error   { color:#ef5350; font-size:12px; min-height:16px; margin-top:4px; }
.auth-btn     { width:100%; margin-top:12px; }

/* ── Upgrade button ──────────────────────────────────────────────────────── */
.btn-upgrade {
  width:100%; margin-top:8px; background:rgba(139,92,246,.12);
  color:#00c2a3; border:1px solid rgba(139,92,246,.3);
  border-radius:6px; font-size:11px; font-weight:700;
  padding:8px; cursor:pointer; transition:all .15s; text-align:center;
}
.btn-upgrade:hover { background:var(--purple); color:#fff; }

/* ── User logout btn ─────────────────────────────────────────────────────── */
.user-logout-btn {
  background:none; border:none; color:var(--muted); cursor:pointer;
  font-size:14px; padding:2px 4px; border-radius:4px; transition:color .15s;
}
.user-logout-btn:hover { color:var(--text); }

/* ── Plan badge ──────────────────────────────────────────────────────────── */
#user-plan.pro  { color:#f59e0b; font-weight:700; }
#user-plan.free { color:var(--muted); }

/* ── Upgrade list ────────────────────────────────────────────────────────── */
.upgrade-list {
  list-style:none; padding:0; margin:16px 0 0;
  display:flex; flex-direction:column; gap:8px;
}
.upgrade-list li {
  font-size:13px; color:var(--text); padding:6px 10px;
  background:var(--bg2); border-radius:6px;
}

/* ── Admin table ─────────────────────────────────────────────────────────── */
.admin-table { width:100%; border-collapse:collapse; font-size:13px; }
.admin-table th { text-align:left; padding:8px 12px; color:var(--muted);
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  border-bottom:1px solid var(--border); }
.admin-table td { padding:10px 12px; border-bottom:1px solid var(--border2);
  color:var(--text); vertical-align:middle; }
.admin-table tr:hover td { background:var(--bg2); }
.plan-pill { display:inline-block; padding:2px 10px; border-radius:99px;
  font-size:11px; font-weight:700; text-transform:uppercase; }
.plan-pill.free { background:rgba(107,114,128,.15); color:var(--muted); }
.plan-pill.pro  { background:rgba(245,158,11,.15);  color:#f59e0b; }
.admin-stat-card { background:var(--bg2); border:1px solid var(--border);
  border-radius:8px; padding:14px 20px; min-width:120px; }
.admin-stat-card .stat-n { font-size:24px; font-weight:800; color:var(--text); }
.admin-stat-card .stat-l { font-size:11px; color:var(--muted); margin-top:2px; }

/* ── Drawing style bar ──────────────────────────────────────────────────────── */
#draw-style-bar {
  display: none;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  background: #1e222d;
  border: 1px solid #2a2e39;
  border-radius: 6px;
  padding: 4px 8px;
  gap: 4px;
  align-items: center;
  z-index: 20;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  pointer-events: all;
  user-select: none;
  white-space: nowrap;
  max-width: calc(100% - 20px);
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color: #363a45 transparent;
}
.dsb-group { display: flex; align-items: center; gap: 3px; }
.dsb-sep { width: 1px; height: 18px; background: #2a2e39; margin: 0 4px; flex-shrink: 0; }
.dsb-swatch {
  width: 14px; height: 14px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; flex-shrink: 0; transition: border-color .12s;
}
.dsb-swatch:hover { border-color: rgba(255,255,255,.5); }
.dsb-swatch.active { border-color: #fff; }
#dsb-color-dot {
  width: 16px; height: 16px; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255,255,255,.25); flex-shrink: 0; background: #00c2a3;
  transition: border-color .12s;
}
#dsb-color-dot:hover { border-color: rgba(255,255,255,.7); }
#dsb-color-picker { display: none; }
.dsb-btn {
  background: none; border: none; color: #787b86; cursor: pointer;
  padding: 3px 5px; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  transition: background .1s, color .1s; line-height: 1;
}
.dsb-btn:hover { background: rgba(120,123,134,.16); color: #d1d4dc; }
.dsb-btn.active { background: rgba(0,194,163,.14); color: #00c2a3; }
.dsb-del { color: #ef5350 !important; }
.dsb-del:hover { background: rgba(239,83,80,.12) !important; }

/* ── Price Alerts ─────────────────────────────────────────────────────────── */
.alert-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 7px; margin-bottom: 4px;
  background: var(--bg3); border: 1px solid var(--border);
  font-size: 12px;
}
.alert-row.alert-triggered { opacity: .5; }
.alert-price { font-weight: 700; color: #ffeb3b; min-width: 70px; }
.alert-dir   { color: var(--muted); min-width: 60px; }
.alert-label { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-status { font-size: 10px; color: var(--muted); min-width: 60px; text-align: right; }
.alert-del {
  background: none; border: none; color: #ef5350; cursor: pointer;
  padding: 2px 6px; border-radius: 4px; font-size: 13px; line-height: 1;
}
.alert-del:hover { background: rgba(239,83,80,.12); }

/* ── P&L Calendar ───────────────────────── */
.jour-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
  transition: color .15s;
  margin-bottom: -1px;
}
.jour-tab.active {
  color: var(--purple);
  border-bottom-color: var(--purple);
}
.pnl-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.pnl-cal-hdr {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  padding: 4px 0;
  font-weight: 600;
}
.pnl-cal-cell {
  min-height: 64px;
  border-radius: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: opacity .15s;
}
.pnl-cal-cell.empty { border-color: transparent; background: transparent !important; }
.pnl-cal-cell.today { outline: 2px solid var(--purple); }
.pnl-cal-cell.has-data:hover { opacity: 0.85; }
.pnl-cal-day-num { font-size: 11px; font-weight: 600; margin-bottom: 4px; }
.pnl-cal-day-pnl { font-size: 12px; font-weight: 700; }

/* ── Chart topbar active state ────────── */
.chart-topbar-btn.active {
  background: var(--purple-l);
  color: var(--purple);
  border-color: rgba(0,194,163,.3);
}

/* ── Template Cards ─────────────────── */
.tmpl-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  transition: border-color .15s;
}
.tmpl-card:hover { border-color: var(--border2); }
.tmpl-card-info { display: flex; flex-direction: column; gap: 3px; }
.tmpl-card-name { font-size: 14px; font-weight: 600; color: #fff; }
.tmpl-card-sub  { font-size: 12px; color: var(--muted); }
.tmpl-card-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ── Psychology stars ────────────────── */
.psych-stars { display: inline-flex; gap: 1px; cursor: pointer; }
.psych-star  { font-size: 15px; color: var(--border2); line-height: 1;
               transition: color .1s; user-select: none; }
.psych-star.filled { color: #f59e0b; }
.psych-stars:hover .psych-star { color: #f59e0b; }
.psych-stars .psych-star:hover ~ .psych-star { color: var(--border2); }

/* ── Onboarding ─────────────────────────────────────────────────────────────── */
#onboarding-overlay {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
}
#onboarding-overlay.active { pointer-events: all; }

.ob-backdrop {
  position: absolute; inset: 0;
  background: rgba(7,9,15,.4);
  backdrop-filter: blur(0px);
  transition: opacity .3s;
}

.ob-spotlight {
  position: absolute;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(7,9,15,.4), 0 0 0 4px rgba(0,194,163,.55), 0 0 32px rgba(0,194,163,.45);
  border: 2px solid rgba(0,194,163,1);
  transition: all .35s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}

.ob-card {
  position: absolute;
  background: #131722;
  border: 1px solid rgba(0,194,163,.3);
  border-radius: 14px;
  padding: 20px 24px;
  width: 320px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(0,194,163,.15) inset;
  z-index: 10000;
  transition: all .3s;
}

.ob-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,194,163,.15); border: 1px solid rgba(0,194,163,.25);
  border-radius: 100px; padding: 3px 10px;
  font-size: 11px; color: #00c2a3; font-weight: 600;
  margin-bottom: 10px;
}

.ob-title { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.ob-text  { font-size: 13px; color: #94a3b8; line-height: 1.6; margin-bottom: 16px; }

.ob-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ob-skip  { background: none; border: none; color: #4a5568; font-size: 12px; cursor: pointer; padding: 4px; }
.ob-skip:hover { color: #94a3b8; }
.ob-next  { background: #00c2a3; color: #fff; border: none; border-radius: 8px; padding: 8px 20px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s; }
.ob-next:hover { background: #00a88d; }
.ob-dots  { display: flex; gap: 4px; }
.ob-dot   { width: 6px; height: 6px; border-radius: 50%; background: #1e2338; transition: background .2s; }
.ob-dot.active { background: #00c2a3; }

.ob-center-card {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: #131722; border: 1px solid rgba(0,194,163,.3);
  border-radius: 20px; padding: 40px 48px; width: 480px; text-align: center;
  box-shadow: 0 40px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(0,194,163,.15) inset;
  z-index: 10000;
}
.ob-center-card .ob-title { font-size: 24px; margin-bottom: 12px; }
.ob-center-card .ob-text  { font-size: 15px; max-width: 360px; margin: 0 auto 24px; }
.ob-emoji { font-size: 48px; margin-bottom: 16px; }

.ob-restart-btn {
  width: 100%; background: none; border: 1px solid rgba(0,194,163,.25);
  border-radius: 7px; color: #6b7280; font-size: 11px; font-weight: 500;
  padding: 6px 10px; cursor: pointer; text-align: left; transition: all .15s;
  margin-top: 4px;
}
.ob-restart-btn:hover { border-color: rgba(0,194,163,.45); color: #00c2a3; background: rgba(0,194,163,.08); }

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — TradingLab Pro
   ═══════════════════════════════════════════════════════════════ */

/* ── Mobile bottom nav ──────────────────────────────────────────── */
#mobile-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: #0d1117;
  border-top: 1px solid #1e2338;
  z-index: 500;
  flex-direction: row;
  align-items: stretch;
  padding: 0 4px;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.mob-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  color: #718096;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  border: none;
  background: none;
  padding: 8px 4px;
  border-radius: 8px;
  transition: color .2s;
  text-decoration: none;
}
.mob-nav-item:hover,
.mob-nav-item.active {
  color: #00c2a3;
}
.mob-nav-icon {
  font-size: 20px;
  line-height: 1;
}

@media (max-width: 768px) {
  /* Show mobile nav, hide desktop sidebar */
  #mobile-nav { display: flex; }

  /* Push content up to avoid bottom nav overlap */
  #app-root, .app-root, #main-layout, body > div:first-child {
    padding-bottom: 60px;
  }

  /* Hide sidebar on mobile */
  #sidebar {
    display: none !important;
  }

  /* Main content full width */
  #main {
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* Chart topbar — make it scrollable horizontally */
  #chart-topbar {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 8px;
  }
  #chart-topbar::-webkit-scrollbar { display: none; }

  /* Hide verbose buttons on mobile chart topbar, show icon-only */
  .cbt-btn { font-size: 11px; padding: 4px 8px; }
  .cbt-tf  { font-size: 11px; padding: 4px 7px; }

  /* Sessions list — single column */
  .sessions-grid {
    grid-template-columns: 1fr !important;
  }

  /* Session cards — larger tap targets */
  .session-card {
    padding: 16px !important;
    min-height: 80px;
  }

  /* Modals — full screen on mobile */
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    border-radius: 16px 16px 0 0 !important;
    overflow-y: auto;
    margin: 0 !important;
  }

  /* Place Order modal */
  .po-overlay .modal-box {
    max-height: 95vh !important;
  }

  /* Analytics — single column */
  .an-kpi-bar-item { min-width: 80px; }

  /* Hide some analytics sidebar elements */
  .an-info-row { font-size: 11px; }

  /* Charts take full width */
  canvas { max-width: 100%; }

  /* TF group scrollable */
  .cbt-tf-group {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 200px;
  }
  .cbt-tf-group::-webkit-scrollbar { display: none; }

  /* Hide chart2 (MTF) on mobile — too small */
  #chart2-container { display: none !important; }

  /* Increase touch target sizes */
  button, .btn, [role="button"] {
    min-height: 36px;
  }

  /* Place Order TP/SL row stacks vertically */
  .po-tpsl-row {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Hero stats in analytics */
  .hero-stats { gap: 20px; }

  /* Journal — single column */
  .jour-grid {
    grid-template-columns: 1fr !important;
  }

  /* How-it-works steps — single column */
  .how-steps { grid-template-columns: 1fr !important; }

  /* Preview sidebar hidden */
  .preview-sidebar { display: none !important; }

  /* Nav links in landing page */
  .nav-links { display: none; }

  /* Footer on landing */
  footer { flex-direction: column; text-align: center; }

  /* Sessions view topbar */
  .sessions-topbar {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px !important;
  }

  /* View scroll padding bottom */
  .view-scroll {
    padding-bottom: 70px !important;
  }

  /* Stat cards — 2 columns on mobile */
  .stat-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Charts row — single column */
  .charts-row {
    grid-template-columns: 1fr !important;
  }

  /* Order confirm bar — adjust for sidebar removal */
  #order-confirm-bar {
    left: 0 !important;
  }

  /* Chart view full height */
  #view-chart {
    height: calc(100vh - 60px);
  }

  /* Positions panel shorter on mobile */
  #positions-panel {
    height: 120px;
    min-height: 120px;
  }

  /* Drawing tools — hidden on mobile to save space */
  #drawing-tools {
    display: none !important;
  }

  /* Page topbar wraps on mobile */
  .page-topbar {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--topbar);
    padding: 8px 12px;
    gap: 6px;
  }
}

/* ── Tablet adjustments (768-1024px) ───────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Sidebar narrower */
  #sidebar {
    width: 180px !important;
    min-width: 180px !important;
  }

  /* Analytics grid 2 columns */
  .stat-cards { grid-template-columns: repeat(2, 1fr) !important; }

  /* Modal narrower */
  .modal-box { max-width: 90vw !important; }
}

/* ── UI Polish ─── */

/* 1. View fade-in transition */
.view.active {
  animation: viewFadeIn .2s ease;
}
@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 2. Button hover/active states */
button:active:not(:disabled) { transform: scale(0.97); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-secondary:hover { border-color: var(--purple); color: #fff; }

/* 3. Input focus ring */
.form-input:focus,
input:focus:not([type="range"]),
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(0,194,163,.55) !important;
  box-shadow: 0 0 0 3px rgba(0,194,163,.12);
}

/* 4. Modal polish — slide-up animation */
.modal-overlay {
  transition: opacity .2s;
}
.modal-overlay .modal-box {
  animation: modalSlideUp .25s cubic-bezier(.4,0,.2,1);
}
@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 5. Toast slide-in from right */
.toast,
#toast {
  animation: toastSlideIn .3s cubic-bezier(.4,0,.2,1);
}
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 6. Skeleton loading placeholder */
.skeleton {
  background: linear-gradient(90deg, var(--bg2) 25%, var(--bg3) 50%, var(--bg2) 75%);
  background-size: 200% 100%;
  animation: skeleton-wave 1.4s infinite;
  border-radius: 6px;
}
@keyframes skeleton-wave {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 7. Scrollbar styling upgrade */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2d3556; }

/* 8. Nav item active — left indicator (aligned with redesign) */
.nav-item.active {
  border-left-width: 2px;
  padding-left: 12px;
}

/* 9. Chart topbar button active glow */
.chart-topbar-btn.active {
  background: rgba(0,194,163,.18);
  color: var(--purple);
  border-color: rgba(0,194,163,.3);
  box-shadow: 0 0 8px rgba(0,194,163,.18);
}

/* 10. Session card hover lift */
.session-card {
  transition: transform .2s, box-shadow .2s, border-color .2s, background .15s;
}
.session-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  border-color: rgba(0,194,163,.25);
}

/* 11. Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: var(--muted);
  font-size: 14px;
  gap: 12px;
}
.empty-state-icon { font-size: 40px; opacity: .4; }

/* ── Multi-Chart Grid ─── */
.grid-cell {
  position: relative;
  background: #151929;
  border: 1px solid #1e2337;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.gc-label {
  position: absolute;
  top: 6px;
  left: 8px;
  z-index: 10;
  font-size: 11px;
  font-weight: 700;
  color: #00c2a3;
  background: rgba(15,17,23,.8);
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
}
.gc-chart {
  flex: 1;
  width: 100%;
  height: 100%;
}

/* 12. Form labels */
label, .form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
  display: block;
  letter-spacing: .03em;
}

/* ── Design System v2 ─── */

/* A. Extended CSS variables */
:root {
  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* Border radius system */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --shadow-md:   0 4px 12px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
  --shadow-lg:   0 10px 32px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3);
  --shadow-xl:   0 20px 48px rgba(0,0,0,.6);
  --shadow-glow: 0 0 20px rgba(0,194,163,.25);

  /* Refined purple palette */
  --purple-50:  rgba(0,194,163,.05);
  --purple-100: rgba(0,194,163,.1);
  --purple-200: rgba(0,194,163,.18);
  --purple-400: #00c2a3;
  --purple-500: #00c2a3;
  --purple-600: #00a88d;

  /* Semantic colors */
  --color-success: #22c55e;
  --color-danger:  #ef4444;
  --color-warning: #f59e0b;
  --color-info:    #00c2a3;
  --color-profit:  #22c55e;
  --color-loss:    #ef4444;

  /* Typography scale */
  --font-xs:   11px;
  --font-sm:   12px;
  --font-md:   13px;
  --font-base: 14px;
  --font-lg:   16px;
  --font-xl:   18px;
  --font-2xl:  22px;
  --font-3xl:  28px;

  /* Transitions */
  --transition-fast: all .1s ease;
  --transition-base: all .2s ease;
  --transition-slow: all .35s cubic-bezier(.4,0,.2,1);
}

/* B. Button system */
button { cursor: pointer; font-family: inherit; }

.btn, .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--r-sm);
  border: none;
  background: var(--purple-500);
  color: #fff;
  font-size: var(--font-md);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-base);
  white-space: nowrap;
  max-width: calc(100% - 20px);
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color: #363a45 transparent;
}
.btn:hover, .btn-primary:hover {
  background: var(--purple-600);
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
  filter: none;
}
.btn:active, .btn-primary:active { transform: translateY(0) scale(.98); }
.btn:disabled, .btn-primary:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: var(--font-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}
.btn-ghost:hover { background: var(--bg3); color: var(--text); }

.btn-danger {
  background: rgba(239,68,68,.15);
  border: 1px solid rgba(239,68,68,.3);
  color: #ef4444;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font-size: var(--font-sm);
  cursor: pointer;
  transition: var(--transition-base);
}
.btn-danger:hover { background: rgba(239,68,68,.25); }

.btn-sm { padding: 5px 12px; font-size: var(--font-sm); }
.btn-lg { padding: 11px 24px; font-size: var(--font-base); }
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  min-width: 32px;
  min-height: 32px;
  border-radius: var(--r-sm);
}

/* C. Card system */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--space-4);
  transition: var(--transition-base);
}
.card:hover { border-color: var(--border2); }

.card-elevated {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}

/* Stat card v2 — layered on top of existing .stat-card */
.stat-card-v2 {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  position: relative;
  overflow: hidden;
  transition: var(--transition-base);
}
.stat-card-v2::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--purple-500);
  opacity: 0;
  transition: opacity .2s;
}
.stat-card-v2:hover::before { opacity: 1; }
.stat-card-v2:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-card-label {
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.stat-card-value {
  font-size: var(--font-2xl);
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.stat-card-sub {
  font-size: var(--font-xs);
  color: var(--muted);
}
.stat-card-v2.positive .stat-card-value { color: var(--color-profit); }
.stat-card-v2.negative .stat-card-value { color: var(--color-loss); }
.stat-card-v2.positive::before { background: var(--color-profit); opacity: 1; }
.stat-card-v2.negative::before { background: var(--color-loss); opacity: 1; }

/* D. Data table */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-sm);
}
.data-table thead tr {
  background: var(--bg);
  border-bottom: 2px solid var(--border);
}
.data-table thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: var(--font-xs);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  max-width: calc(100% - 20px);
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color: #363a45 transparent;
}
.data-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.data-table tbody tr:hover { background: var(--bg2); }
.data-table tbody td {
  padding: 10px 14px;
  color: var(--text);
  vertical-align: middle;
}
.data-table tbody tr:last-child { border-bottom: none; }

.td-profit { color: var(--color-profit); font-weight: 600; }
.td-loss   { color: var(--color-loss);   font-weight: 600; }
.td-muted  { color: var(--muted); }
.td-bold   { font-weight: 700; }

/* E. Modal improvements */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-4);
}
.modal-title {
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--text);
}
.modal-close {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  border: none;
  background: var(--bg3);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: var(--transition-fast);
}
.modal-close:hover { background: var(--bg4); color: var(--text); }
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  margin-top: var(--space-4);
}

/* F. Badge / tag system */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--r-full);
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: .03em;
}
.badge-purple { background: var(--purple-100); color: var(--purple-400); }
.badge-green  { background: rgba(34,197,94,.12);  color: #22c55e; }
.badge-red    { background: rgba(239,68,68,.12);   color: #ef4444; }
.badge-yellow { background: rgba(245,158,11,.12);  color: #f59e0b; }
.badge-blue   { background: rgba(0,194,163,.12);  color: #00c2a3; }
.badge-gray   { background: var(--bg3); color: var(--muted); }
.badge-new::after {
  content: 'NEW';
  background: var(--color-success);
  color: #fff;
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 4px;
}

/* G. Unified form control */
.form-control {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font-size: var(--font-md);
  color: var(--text);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.form-control:focus {
  border-color: var(--purple-500);
  box-shadow: 0 0 0 3px var(--purple-100);
}
.form-control::placeholder { color: var(--muted); opacity: .6; }

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.form-group label {
  font-size: var(--font-xs);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* H. Toast upgrades — consolidated in base #toast rule above */
.toast-warning, #toast.warning { background: rgba(245,158,11,.95);  border: none; }

/* I. Progress bar */
.progress-bar-wrap {
  width: 100%;
  height: 4px;
  background: var(--bg3);
  border-radius: var(--r-full);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--purple-500), var(--purple-400));
  transition: width .3s ease;
}

/* J. Section headers, dividers, pill tabs */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.section-title {
  font-size: var(--font-base);
  font-weight: 700;
  color: var(--text);
}
.section-sub {
  font-size: var(--font-xs);
  color: var(--muted);
  margin-top: 2px;
}

.divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-4) 0;
}

.pill-tabs {
  display: flex;
  background: var(--bg);
  border-radius: var(--r-sm);
  padding: 3px;
  gap: 2px;
}
.pill-tab {
  flex: 1;
  padding: 6px 12px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: var(--font-sm);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: center;
}
.pill-tab.active {
  background: var(--bg3);
  color: var(--text);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

/* K. Live ticker bar */
#live-ticker {
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  box-shadow: 0 1px 0 rgba(0,194,163,.18);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.ticker-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: rgba(239,68,68,.15);
  border: 1px solid rgba(239,68,68,.3);
  color: #ef4444;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.ticker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
}
.ticker-dot-pulse {
  animation: tickerPulse 2s infinite;
}
@keyframes tickerPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}
.ticker-scroll {
  display: flex;
  align-items: center;
  gap: 24px;
  overflow: hidden;
  flex: 1;
  font-size: var(--font-xs);
  white-space: nowrap;
  max-width: calc(100% - 20px);
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color: #363a45 transparent;
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.ticker-symbol { font-weight: 700; color: var(--text); }
.ticker-price  { color: var(--text); font-variant-numeric: tabular-nums; }
.ticker-change.pos { color: var(--color-profit); }
.ticker-change.neg { color: var(--color-loss); }

/* ── Sidebar Redesign v34 ─── */

/* Ensure sidebar brand box wraps the SVG logo correctly */
.sidebar-brand .sidebar-logo {
  padding: 0;
  border-bottom: none;
  margin-bottom: 0;
}

/* user-logout-btn inside sidebar-user */
.user-logout-btn {
  background: none; border: none;
  color: var(--muted); cursor: pointer;
  font-size: 14px; padding: 2px 4px;
  border-radius: 4px; line-height: 1;
  transition: color .15s;
  flex-shrink: 0;
}
.user-logout-btn:hover { color: var(--text); }

/* ── KPI Card Polish ─── */

/* Override/enhance the existing stat cards */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

/* Session info bar (symbol + capital display) */
.session-info-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  flex-wrap: wrap;
}
.session-symbol {
  font-size: 16px;
  font-weight: 800;
  color: #e2e8f0;
  letter-spacing: -.3px;
}
.session-tf-badge {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
}
.session-capital-display {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.session-capital-value {
  font-size: 15px;
  font-weight: 700;
  color: #e2e8f0;
}
.session-capital-label {
  font-size: 11px;
  color: #475569;
}
.session-pnl-badge {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}
.session-pnl-badge.pos { background: rgba(34,197,94,.15); color: #22c55e; }
.session-pnl-badge.neg { background: rgba(239,68,68,.15); color: #ef4444; }

/* Chart topbar improvements */
.chart-topbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  min-height: 42px;
}
.cbt-sep {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 4px;
  flex-shrink: 0;
}
.chart-topbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid transparent;
  background: transparent;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  max-width: calc(100% - 20px);
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color: #363a45 transparent;
  height: 28px;
}
.chart-topbar-btn:hover {
  background: var(--bg3);
  color: #94a3b8;
  border-color: var(--border);
}
.chart-topbar-btn.active {
  background: rgba(0,194,163,.15);
  color: #00c2a3;
  border-color: rgba(0,194,163,.25);
  box-shadow: 0 0 8px rgba(0,194,163,.15);
}
.chart-topbar-btn.danger {
  color: #ef4444;
}
.chart-topbar-btn.danger:hover {
  background: rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.3);
}

/* Replay controls bar */
.cs-replay {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.replay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: #94a3b8;
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
}
.replay-btn:hover {
  background: var(--bg3);
  color: #e2e8f0;
  border-color: var(--border2);
}
.replay-btn.play-btn {
  width: 36px;
  height: 36px;
  background: var(--purple-500);
  border-color: var(--purple-600);
  color: #fff;
  font-size: 14px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,194,163,.3);
}
.replay-btn.play-btn:hover {
  background: var(--purple-600);
  box-shadow: 0 4px 12px rgba(0,194,163,.45);
  transform: scale(1.05);
}
.replay-speed-select {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  cursor: pointer;
  outline: none;
}
.replay-progress-wrap {
  flex: 1;
  min-width: 80px;
  height: 4px;
  background: var(--bg3);
  border-radius: 99px;
  overflow: hidden;
  cursor: pointer;
}
.replay-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--purple-500), var(--purple-400));
  border-radius: 99px;
  transition: width .3s ease;
}
.replay-bar-count {
  font-size: 11px;
  color: #475569;
  white-space: nowrap;
  max-width: calc(100% - 20px);
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color: #363a45 transparent;
  font-variant-numeric: tabular-nums;
}

/* Trade position display */
.position-display {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid;
}
.position-display.long {
  background: rgba(34,197,94,.08);
  border-color: rgba(34,197,94,.2);
  color: #22c55e;
}
.position-display.short {
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.2);
  color: #ef4444;
}
.position-pnl {
  font-size: 14px;
  font-weight: 800;
}

/* Order buttons */
.order-btn-long {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, rgba(34,197,94,.2), rgba(34,197,94,.1));
  border: 1px solid rgba(34,197,94,.3);
  color: #22c55e;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  letter-spacing: .02em;
}
.order-btn-long:hover {
  background: linear-gradient(135deg, rgba(34,197,94,.3), rgba(34,197,94,.15));
  box-shadow: 0 4px 12px rgba(34,197,94,.2);
  transform: translateY(-1px);
}
.order-btn-short {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(239,68,68,.3);
  background: linear-gradient(135deg, rgba(239,68,68,.2), rgba(239,68,68,.1));
  color: #ef4444;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  letter-spacing: .02em;
}
.order-btn-short:hover {
  background: linear-gradient(135deg, rgba(239,68,68,.3), rgba(239,68,68,.15));
  box-shadow: 0 4px 12px rgba(239,68,68,.2);
  transform: translateY(-1px);
}
.order-btn-close {
  width: 100%;
  padding: 8px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.order-btn-close:hover {
  border-color: rgba(239,68,68,.4);
  color: #ef4444;
  background: rgba(239,68,68,.05);
}

/* Dynamic stat card color coding */
.stat-card[data-sign="pos"] {
  border-top: 2px solid var(--color-profit);
}
.stat-card[data-sign="neg"] {
  border-top: 2px solid var(--color-loss);
}
.stat-card[data-sign="neu"] {
  border-top: 2px solid var(--purple-500);
}
.stat-card .sk-label {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.stat-card .sk-value {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  margin: 4px 0 2px;
}
.stat-card .sk-sub {
  font-size: 11px;
  color: #475569;
}

/* ── Strategy Panel ────────────────────────────────────────────────── */
.strat-modal-wrap { width:480px; max-height:85vh; display:flex; flex-direction:column; }
.strat-modal-icon { width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg,#00c2a3,#6366f1); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.strat-search-wrap { display:flex; align-items:center; gap:8px; padding:0 16px 12px; color:var(--muted); }
.strat-search-input { flex:1; background:var(--bg3); border:1px solid var(--border); border-radius:7px; padding:7px 10px; font-size:12px; color:var(--text); outline:none; font-family:inherit; transition:border-color .15s; }
.strat-search-input:focus { border-color:#00c2a3; }
.strat-search-input::placeholder { color:var(--muted); }
.strat-empty { padding:32px 20px; text-align:center; color:var(--muted); font-size:13px; }
.strat-card { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; margin-bottom:4px; border:1px solid transparent; transition:background .15s, border-color .15s; }
.strat-card:hover { background:var(--bg3); border-color:var(--border); }
.strat-card-avatar { width:38px; height:38px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; }
.strat-card-body { flex:1; min-width:0; }
.strat-card-name { font-weight:600; font-size:13px; color:var(--text); }
.strat-card-desc { font-size:11px; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.strat-card-actions { display:flex; align-items:center; gap:2px; opacity:0; transition:opacity .12s; flex-shrink:0; }
.strat-card:hover .strat-card-actions { opacity:1; }
.strat-modal-footer { padding:12px 16px 0; border-top:1px solid var(--border); }
.strat-create-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:8px; padding:10px; border-radius:9px; border:1.5px dashed var(--border); background:none; color:var(--muted); font-size:13px; font-family:inherit; cursor:pointer; transition:border-color .15s, color .15s, background .15s; }
.strat-create-btn:hover { border-color:#00c2a3; color:#00c2a3; background:rgba(0,194,163,.06); }
.strat-row { display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:6px; }
.strat-row:hover { background:var(--hover); }
.strat-row-actions { display:flex; align-items:center; gap:2px; opacity:0; transition:opacity .12s; flex-shrink:0; }
.strat-row:hover .strat-row-actions { opacity:1; }
.strat-action-btn { background:none; border:none; border-radius:5px; color:#4a5778; font-size:13px; width:28px; height:28px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:color .12s, background .12s; }
.strat-action-btn:hover { color:#c8d4ea; background:rgba(255,255,255,.07); }
.strat-action-btn.danger:hover { color:#ef4444; background:rgba(239,68,68,.08); }

/* ── AlphaNex Brand Enhancements ── */
.sidebar-logo {
  background: linear-gradient(135deg, #00c2a3, #007a6d) !important;
  box-shadow: 0 2px 12px rgba(0,194,163,.35) !important;
}
.sidebar-brand-sub { color: #00c2a3 !important; }
.sidebar-plan, .user-plan { color: #00c2a3 !important; }
.nav-item.active {
  background: rgba(0,194,163,.1) !important;
  color: #9aeee0 !important;
  border-left-color: #00c2a3 !important;
  box-shadow: inset 0 0 0 1px rgba(0,194,163,.08);
}
.btn-primary {
  background: linear-gradient(135deg, #00c2a3, #00a88d) !important;
  box-shadow: 0 2px 8px rgba(0,194,163,.25);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #00a88d, #007a6d) !important;
  box-shadow: 0 4px 16px rgba(0,194,163,.35);
}
#sidebar {
  background: linear-gradient(180deg, #0c1220 0%, #080c14 100%) !important;
}
.sidebar-brand { border-bottom-color: #1a2d42 !important; }
.cbt-place-order {
  background: linear-gradient(135deg, #00c2a3, #00a88d) !important;
}
.cbt-place-order:hover {
  background: linear-gradient(135deg, #00a88d, #007a6d) !important;
}
.toggle.on { background: #00c2a3 !important; border-color: #00c2a3 !important; }
.session-badge { background: #00c2a3 !important; }
.sc-icon-btn:hover { border-color: #00c2a3 !important; }

/* ── AlphaNex Dashboard Hero ── */
.dash-hero {
  position: relative;
  background: linear-gradient(135deg, #0c1828 0%, #080c14 60%, #071428 100%);
  border: 1px solid #1a2d42;
  border-radius: 12px;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 32px;
  overflow: hidden;
  min-height: 110px;
}
.dash-hero::after {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,194,163,.08) 0%, transparent 70%);
  pointer-events: none;
}
.dash-hero-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #00c2a3, #007a6d, transparent);
  border-radius: 12px 12px 0 0;
}
.dash-hero-left {
  flex: 1;
  min-width: 0;
}
.dash-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,194,163,.1);
  border: 1px solid rgba(0,194,163,.2);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 9px;
  font-weight: 700;
  color: #00c2a3;
  letter-spacing: .1em;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.dash-hero-pulse {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #00c2a3;
  box-shadow: 0 0 6px #00c2a3;
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
.dash-hero-title {
  font-size: 22px;
  font-weight: 800;
  color: #f0f6ff;
  margin-bottom: 6px;
  letter-spacing: -.3px;
}
.dash-hero-quote {
  font-size: 11px;
  color: #4a6080;
  font-style: italic;
  line-height: 1.5;
  display: block;
}
.dash-hero-kpis {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,.03);
  border: 1px solid #1a2d42;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}
.dash-kpi-item {
  padding: 12px 20px;
  text-align: center;
  min-width: 80px;
}
.dash-kpi-val {
  font-size: 22px;
  font-weight: 700;
  color: #e2eeff;
  line-height: 1;
  margin-bottom: 4px;
}
.dash-kpi-label {
  font-size: 10px;
  color: #4a6080;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.dash-kpi-sep {
  width: 1px;
  height: 32px;
  background: #1a2d42;
  flex-shrink: 0;
}
.dash-hero-clock {
  text-align: right;
  flex-shrink: 0;
}
.dash-clock-time {
  font-size: 20px;
  font-weight: 700;
  color: #e2eeff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.5px;
}
.dash-clock-tz {
  font-size: 10px;
  color: #4a6080;
  margin-top: 2px;
}

/* ── Stat cards accent colors ── */
.stat-card {
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: var(--radius) var(--radius) 0 0;
}
.stat-card.sc-teal::before  { background: linear-gradient(90deg, #00c2a3, transparent); }
.stat-card.sc-gold::before  { background: linear-gradient(90deg, #f0a500, transparent); }
.stat-card.sc-green::before { background: linear-gradient(90deg, #00d48e, transparent); }
.stat-card.sc-blue::before  { background: linear-gradient(90deg, #3ab8ff, transparent); }

/* ── Nav item — dot indicator instead of left border ── */
.nav-item {
  border-left: none !important;
}
.nav-item.active {
  background: rgba(0,194,163,.1) !important;
  color: #9aeee0 !important;
  border-left: none !important;
}
.nav-item.active::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #00c2a3;
  box-shadow: 0 0 6px rgba(0,194,163,.6);
}
.cbt-tf.active { color: #9aeee0 !important; background: rgba(0,194,163,.12) !important; }

/* ── Coach panel teal fix ── */
#coach-chat-panel { border-left-color: #1a2d42 !important; }
#coach-chat-panel [style*="c4b5fd"] { color: #9aeee0 !important; }
#coach-chat-panel [style*="6b46c1"] { color: #00c2a3 !important; }
.coach-pill { border-color: rgba(0,194,163,.25) !important; color: #9aeee0 !important; }
.coach-pill:hover { background: rgba(0,194,163,.1) !important; }

/* ══════════════════════════════════════════════════════
   AlphaNex 3D Depth Style
   ══════════════════════════════════════════════════════ */

/* ── Raised cards ── */
.card, .stat-card, .session-card, .an-stat-card, .an-radar-card {
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 -1px 0 rgba(0,0,0,.3) inset,
    0 4px 16px rgba(0,0,0,.35),
    0 1px 3px rgba(0,0,0,.4) !important;
  transition: box-shadow .2s, transform .2s, border-color .2s !important;
}
.card:hover, .stat-card:hover, .session-card:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 -1px 0 rgba(0,0,0,.3) inset,
    0 8px 28px rgba(0,0,0,.45),
    0 2px 6px rgba(0,194,163,.08) !important;
  border-color: rgba(0,194,163,.2) !important;
}

/* ── 3D Buttons ── */
.btn-primary {
  box-shadow:
    0 1px 0 rgba(255,255,255,.15) inset,
    0 -2px 0 rgba(0,0,0,.3) inset,
    0 4px 14px rgba(0,194,163,.3) !important;
  transition: all .15s !important;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.15) inset,
    0 -2px 0 rgba(0,0,0,.3) inset,
    0 6px 20px rgba(0,194,163,.45) !important;
}
.btn-primary:active {
  transform: translateY(1px);
  box-shadow: 0 -1px 0 rgba(0,0,0,.3) inset, 0 2px 6px rgba(0,194,163,.2) !important;
}

/* ── 3D sidebar ── */
#sidebar {
  box-shadow: 2px 0 20px rgba(0,0,0,.4), 1px 0 0 rgba(255,255,255,.03) !important;
}

/* ── Nav item active — raised pill ── */
.nav-item.active {
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 2px 8px rgba(0,0,0,.3),
    0 0 0 1px rgba(0,194,163,.15) !important;
}

/* ── Avatar ring 3D ── */
.sidebar-avatar, .user-avatar {
  box-shadow:
    0 0 0 2px #080c14,
    0 0 0 3px rgba(0,194,163,.5),
    0 2px 8px rgba(0,0,0,.4) !important;
}

/* ── Hero banner depth ── */
.dash-hero {
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 8px 32px rgba(0,0,0,.4),
    0 1px 0 rgba(0,194,163,.08) !important;
}

/* ── KPI block 3D ── */
.dash-hero-kpis {
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 4px 16px rgba(0,0,0,.3) !important;
}

/* ── Stat card colored glow on hover ── */
.stat-card.sc-teal:hover  { box-shadow: 0 8px 28px rgba(0,194,163,.15), 0 1px 0 rgba(255,255,255,.05) inset !important; }
.stat-card.sc-gold:hover  { box-shadow: 0 8px 28px rgba(240,165,0,.15), 0 1px 0 rgba(255,255,255,.05) inset !important; }
.stat-card.sc-green:hover { box-shadow: 0 8px 28px rgba(0,212,142,.15), 0 1px 0 rgba(255,255,255,.05) inset !important; }
.stat-card.sc-blue:hover  { box-shadow: 0 8px 28px rgba(58,184,255,.15), 0 1px 0 rgba(255,255,255,.05) inset !important; }

/* ── Session cards 3D ── */
.session-card:hover {
  border-color: rgba(0,194,163,.35) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.4), 0 0 20px rgba(0,194,163,.08) !important;
}

/* ── Live ticker depth ── */
#live-ticker {
  box-shadow: 0 2px 12px rgba(0,0,0,.5) !important;
}

/* ── Modal depth ── */
.modal-box {
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 20px 60px rgba(0,0,0,.7),
    0 0 0 1px rgba(0,194,163,.08) !important;
}

/* ── Dropdown depth ── */
.sc-dropdown, .dt-dropdown {
  box-shadow: 0 8px 32px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.04) inset !important;
}

/* ── Top bar subtle shadow ── */
.page-topbar, #chart-topbar {
  box-shadow: 0 2px 8px rgba(0,0,0,.3) !important;
}

/* ══════════════════════════════════════════════════════
   Arena Styles
   ══════════════════════════════════════════════════════ */

.arena-stats-bar {
  display: flex;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.arena-stat-item {
  flex: 1;
  padding: 14px 20px;
  background: var(--bg3);
  text-align: center;
}
.arena-stat-val {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin-bottom: 4px;
}
.arena-stat-lbl {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.arena-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.arena-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all .2s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.03) inset;
}
.arena-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #00c2a3, transparent);
}
.arena-card:hover {
  border-color: rgba(0,194,163,.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,.4), 0 0 20px rgba(0,194,163,.08);
}
.arena-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}
.arena-type-badge {
  font-size: 10px;
  font-weight: 700;
  color: #00c2a3;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 4px;
}
.arena-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.arena-status {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.arena-badge-open   { background: rgba(0,212,142,.12); color: #00d48e; border: 1px solid rgba(0,212,142,.2); }
.arena-badge-closed { background: rgba(255,255,255,.05); color: var(--muted); border: 1px solid var(--border); }
.arena-joined-badge {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: #00c2a3;
  font-weight: 600;
}
.arena-card-meta {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 10px;
}
.arena-card-rules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.arena-rule {
  background: var(--bg4);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 10px;
}
.arena-rule span { color: var(--muted); display: block; margin-bottom: 2px; }
.arena-rule strong { color: var(--text); font-size: 11px; }
.arena-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}
.arena-participants-bar {
  flex: 1;
  height: 4px;
  background: var(--bg4);
  border-radius: 2px;
  overflow: hidden;
}
.arena-participants-fill {
  height: 100%;
  background: linear-gradient(90deg, #00c2a3, #007a6d);
  border-radius: 2px;
  transition: width .4s;
}
.arena-participants-txt { font-size: 10px; color: var(--muted); white-space: nowrap; }
.arena-creator-txt { font-size: 10px; color: var(--muted2); margin-left: auto; }

/* Arena detail modal */
.arena-info-block {
  background: var(--bg4);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.arena-info-block span { color: var(--muted); }
.arena-info-block strong { color: var(--text); }
.arena-lb-row { border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text); }
.arena-lb-row:last-child { border-bottom: none; }
.arena-lb-me { background: rgba(0,194,163,.05); }
.arena-lb-row:hover { background: var(--bg4); }

/* ══════════════════════════════════════════════════════
   Gamification Styles
   ══════════════════════════════════════════════════════ */

/* XP Bar in sidebar */
.xp-bar-wrap {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.xp-bar-header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 5px;
}
.xp-bar-level { font-weight: 700; color: var(--accent); font-size: 11px; background: rgba(0,194,163,.15); padding: 2px 8px; border-radius: 10px; display: inline-block; }
.xp-bar-track {
  height: 4px;
  background: var(--bg4);
  border-radius: 4px;
  overflow: hidden;
}
.xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 4px;
  transition: width .4s ease;
}
.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--yellow);
  font-weight: 600;
  margin-top: 5px;
}

/* Notification Bell */
.notif-bell {
  position: relative;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  color: var(--muted);
  transition: color .15s, background .15s;
  display: flex;
  align-items: center;
}
.notif-bell:hover { color: var(--text); background: var(--bg3); }
.notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  background: var(--red);
  border-radius: 50%;
  border: 2px solid var(--bg2);
}
.notif-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 320px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  z-index: 200;
  overflow: hidden;
}
.notif-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
}
.notif-list { max-height: 320px; overflow-y: auto; }
.notif-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  transition: background .1s;
}
.notif-item:hover { background: var(--bg3); }
.notif-item.unread { background: rgba(0,194,163,.04); }
.notif-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.notif-title { font-weight: 600; color: var(--text); margin-bottom: 2px; }
.notif-msg { color: var(--muted); line-height: 1.4; }
.notif-empty { padding: 24px; text-align: center; color: var(--muted); font-size: 12px; }

/* Profilo / Achievements page */
.profile-hero {
  background: linear-gradient(135deg, var(--bg2), var(--bg3));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
.profile-avatar-lg {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.profile-info { flex: 1; }
.profile-username { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.profile-level { font-size: 13px; color: var(--accent); font-weight: 600; margin-bottom: 8px; }
.profile-xp-wrap { margin-top: 6px; }
.profile-xp-bar { height: 6px; background: var(--bg4); border-radius: 4px; overflow: hidden; margin-top: 4px; }
.profile-xp-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 4px; }

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.ach-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  transition: transform .15s, border-color .15s;
  position: relative;
}
.ach-card.earned {
  border-color: rgba(0,194,163,.3);
  background: rgba(0,194,163,.04);
}
.ach-card.earned:hover { transform: translateY(-2px); border-color: var(--accent); }
.ach-card.locked { opacity: .45; filter: grayscale(1); }
.ach-icon { font-size: 28px; margin-bottom: 8px; }
.ach-name { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.ach-desc { font-size: 10px; color: var(--muted); line-height: 1.4; }
.ach-xp { font-size: 10px; color: var(--accent); font-weight: 600; margin-top: 6px; }
.ach-earned-date { font-size: 9px; color: var(--muted); margin-top: 3px; }
.ach-locked-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  color: var(--muted2);
}

/* Goals section */
.goals-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.goal-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.goal-icon { font-size: 20px; flex-shrink: 0; }
.goal-body { flex: 1; }
.goal-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.goal-progress-bar { height: 4px; background: var(--bg4); border-radius: 4px; overflow: hidden; margin-top: 6px; }
.goal-progress-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width .3s; }
.goal-meta { font-size: 11px; color: var(--muted); margin-top: 4px; }
.goal-delete { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 4px; font-size: 14px; }
.goal-delete:hover { color: var(--red); background: var(--red-d); }

/* Achievement unlock toast */
.ach-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--bg2);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(0,194,163,.2);
  z-index: 9999;
  animation: slideInRight .3s ease;
  max-width: 300px;
}
@keyframes slideInRight {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.ach-toast-icon { font-size: 28px; flex-shrink: 0; }
.ach-toast-title { font-size: 11px; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.ach-toast-name { font-size: 14px; font-weight: 700; }
.ach-toast-xp { font-size: 11px; color: var(--muted); }


/* ══════════════════════════════════════════════
   DELIGHT CSS — micro-animations & joy
   ══════════════════════════════════════════════ */

/* ── Hover glow on nav items ── */
.nav-item {
  transition: background .15s, color .15s, box-shadow .15s !important;
}
.nav-item:hover {
  box-shadow: inset 3px 0 0 var(--accent), 0 0 12px rgba(0,194,163,.08) !important;
  color: var(--accent) !important;
}
.nav-item.active {
  box-shadow: inset 3px 0 0 var(--accent) !important;
}

/* ── Skeleton loader ── */
.skeleton {
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}
.skeleton * { visibility: hidden !important; }
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-line {
  height: 13px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  margin-bottom: 8px;
}
.skeleton-card {
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 10px;
}

/* ── Pulse on notification badge ── */
#notif-count {
  animation: notif-pulse 2s ease-in-out infinite;
}
@keyframes notif-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239,68,68,.4); }
  50%       { transform: scale(1.15); box-shadow: 0 0 0 4px rgba(239,68,68,0); }
}

/* ── XP bar fill animation ── */
/* ── All views full-width fix ── */
#main > .view {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  align-self: stretch !important;
}

#xp-bar-fill, #profile-xp-fill {
  transition: width .8s cubic-bezier(.4,0,.2,1) !important;
}

/* ── Streak fire animation (7+ days) ── */
.streak-fire {
  display: inline-block;
  animation: fire-flicker .6s ease-in-out infinite alternate;
  transform-origin: bottom center;
}
@keyframes fire-flicker {
  0%   { transform: scale(1) rotate(-2deg); filter: brightness(1); }
  100% { transform: scale(1.2) rotate(2deg); filter: brightness(1.3) drop-shadow(0 0 4px #f59e0b); }
}

/* ── Animated gradient border on Pro plan card ── */
.plan-card.featured {
  position: relative;
  background-clip: padding-box;
  border: 2px solid transparent !important;
}
.plan-card.featured::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #00c2a3, #00d4b4, #00a88d, #00c2a3);
  background-size: 300% 300%;
  animation: gradient-border 3s ease infinite;
  z-index: -1;
}
@keyframes gradient-border {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Achievement card unlock animation ── */
.ach-card.just-unlocked {
  animation: ach-pop .5s cubic-bezier(.17,.67,.35,1.3);
}
@keyframes ach-pop {
  0%   { transform: scale(.8); opacity: 0; }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Counter number animation ── */
.count-animated {
  transition: all .1s;
}

/* ── Toast slide-in (already exists but improve) ── */
.ach-toast {
  animation: slideInRight .4s cubic-bezier(.17,.67,.35,1.3) !important;
}

/* ── Equity canvas fade-in ── */
#an-equity-canvas {
  animation: fadeIn .5s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Pending Order Bar ── */
#pending-order-bar { display: none; }
#pending-order-bar[style*="flex"] { display: flex !important; }
.pob-dir { font-weight: 700; color: #f59e0b; background: rgba(245,158,11,.15); padding: 2px 8px; border-radius: 4px; }
.pob-dir.short { color: #ef4444; background: rgba(239,68,68,.15); }

@media (max-width: 768px) {
  .dash-two-col { grid-template-columns: 1fr !important; }
}

/* Layout Picker */
.lp-btn {
  background: #0d1117;
  border: 1px solid #2a3d55;
  border-radius: 6px;
  color: #4a6a8a;
  padding: 5px;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-btn:hover { border-color: #3b82f6; color: #60a5fa; background: #111c2e; }
.lp-btn.active { border-color: #3b82f6; color: #3b82f6; background: #0a1628; }
#chart-panels {
  display: none;
  background: #0d1117;
  gap: 2px;
  flex: 1;
  min-width: 0;
  min-height: 0;
}



.cp-cell {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0d1117;
  flex: 1;
  min-width: 0;
  min-height: 0;
}
.cp-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  height: 26px;
  background: #0f1621;
  border-bottom: 1px solid #1c2438;
}
.cp-tf-btn {
  background: none;
  border: none;
  color: #4a6a8a;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: .03em;
}
.cp-tf-btn:hover { color: #c0d4f0; background: #1c2438; }
.cp-tf-btn.active { color: #60a5fa; background: #0a1628; }
.cp-chart { flex:1; min-height:0; min-width:0; position:relative; overflow:hidden; }

/* ── Upcoming news banner ─────────────────────────────────────────────────── */
#news-upcoming-bar {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  z-index: 20;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center;
  pointer-events: none;
  max-width: 70%;
}
.news-upcoming-pill {
  display: flex; align-items: center; gap: 5px;
  background: rgba(13,17,23,.88); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.10); border-radius: 20px;
  padding: 3px 10px 3px 8px;
  font-size: 11px; font-weight: 600; color: #e2e8f0;
  white-space: nowrap;
  max-width: calc(100% - 20px);
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color: #363a45 transparent;
  animation: news-pill-in .25s ease;
}
.news-upcoming-pill.impact-High   { border-color: #ef4444; color: #fca5a5; }
.news-upcoming-pill.impact-Medium { border-color: #f59e0b; color: #fcd34d; }
.news-upcoming-pill.impact-Low    { border-color: #64748b; color: #94a3b8; }
.news-upcoming-pill .nup-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.impact-High   .nup-dot { background: #ef4444; box-shadow: 0 0 5px #ef4444; }
.impact-Medium .nup-dot { background: #f59e0b; box-shadow: 0 0 5px #f59e0b; }
.impact-Low    .nup-dot { background: #64748b; }
.news-upcoming-pill .nup-mins {
  font-size: 10px; opacity: .75; margin-left: 2px;
}
@keyframes news-pill-in {
  from { opacity:0; transform:translateY(-4px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Consistency toggle */
#an-consist-toggle.on { background: #2563eb; border-color: #2563eb; }
#an-consist-toggle.on > div { left: 17px; background: #fff; }


/* ── Favorites toolbar — floating draggable (TradingView-style) ────────────── */
#fav-toolbar {
  position: absolute;
  z-index: 800;
  display: none;
  align-items: center;
  gap: 1px;
  padding: 4px 6px;
  background: #1e222d;
  border: 1px solid #363a45;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,.55);
  cursor: default;
  user-select: none;
  top: 60px;
  left: 60px;
}
#fav-tb-grip {
  display: flex; align-items: center; justify-content: center;
  width: 14px; height: 22px; cursor: grab; color: #4a5568;
  font-size: 11px; letter-spacing: -1px; line-height: 1; flex-shrink: 0;
  margin-right: 2px;
}
#fav-tb-grip:active { cursor: grabbing; }
#fav-tb-grip:hover { color: #8898bb; }
.fav-tb-btn {
  width: 28px; height: 28px;
  background: none; border: none; border-radius: 5px;
  color: #c0d4f0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .1s, color .1s;
  flex-shrink: 0;
}
.fav-tb-btn:hover { background: rgba(140,160,200,.16); color: #e0eaff; }
.fav-tb-btn.active { color: #00c2a3; background: rgba(0,194,163,.12); }
.fav-tb-sep { width: 1px; height: 18px; background: #363a45; margin: 0 3px; flex-shrink: 0; }
/* Star inside dropdown items */
.dt-fav-star {
  margin-left: auto; padding-left: 8px;
  font-size: 13px; color: #8898bb; cursor: pointer;
  line-height: 1; transition: color .1s; flex-shrink: 0;
}
.dt-fav-star:hover { color: #f59e0b; }
.dt-fav-star.on { color: #f59e0b; }

/* ── Chart Layout dropdown (TradingView-style) ────────────────────────────── */
.cld-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; font-size: 13px; color: #d1d4dc; cursor: pointer;
  transition: background .1s; white-space: nowrap;
}
.cld-item:hover { background: rgba(255,255,255,.06); }
.cld-item.active { color: #00c2a3; }
.cld-key { font-size: 11px; color: #64748b; font-family: monospace; }
.cld-sep { height: 1px; background: #2a2e39; margin: 4px 0; }
#chart-layout-btn { border: 1px solid transparent; }
#chart-layout-btn:hover { border-color: var(--border); }

/* Chart Color Palette dropdown */
.cpd-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.cpd-label { font-size:12px; color:#c4cdd8; }
.cpd-swatch { width:36px; height:24px; border:none; border-radius:5px; padding:0; cursor:pointer; background:none; }

.dsb-label-input { background:#131722; border:1px solid #2a2e39; border-radius:4px; color:#d1d4dc; font-size:12px; padding:3px 7px; width:110px; outline:none; }
.dsb-label-input:focus { border-color:#00c2a3; }
.dsb-label-input::placeholder { color:#4a5568; }

.dsb-txt-select { background:#131722; border:1px solid #2a2e39; border-radius:4px; color:#d1d4dc; font-size:11px; padding:2px 4px; outline:none; cursor:pointer; }
.dsb-lbl-style { font-size:12px; min-width:22px; }

/* ── Topbar refinements ──────────────────────────────────────────────── */
/* Icon-only button */
.cbt-icon-btn {
  background: none; border: none; color: #a0b4cc;
  padding: 0 7px; height: 40px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s;
}
.cbt-icon-btn:hover { color: #fff; background: rgba(255,255,255,.06); }
/* Icon + label button */
.cbt-icon-label-btn {
  background: none; border: none; color: #c0cfe0;
  font-size: 12px; font-weight: 500;
  padding: 0 9px; height: 40px; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  transition: color .15s;
  white-space: nowrap;
}
.cbt-icon-label-btn:hover { color: #fff; background: rgba(255,255,255,.06); }
/* Coach button */
.cbt-coach-btn {
  display: flex; align-items: center; gap: 6px;
  background: rgba(99,102,241,.18);
  border: 1px solid rgba(99,102,241,.35);
  border-radius: 7px;
  color: #a5b4fc; font-size: 12px; font-weight: 600;
  padding: 4px 12px; cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.cbt-coach-btn:hover { background: rgba(99,102,241,.32); color: #fff; }
/* Dropdown */
.cbt-dropdown-wrap { position: relative; display: inline-flex; align-items: center; }
.cbt-dropdown-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0;
  background: #111827; border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px; z-index: 9999; min-width: 200px;
  box-shadow: 0 8px 32px rgba(0,0,0,.7); padding: 4px;
}
.cbt-dd-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; cursor: pointer;
  color: #b8ccde; font-size: 12.5px; font-weight: 500;
  border-radius: 6px; transition: background .1s;
}
.cbt-dd-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.cbt-dd-item-secondary { color: #5a7a9a; font-size: 12px; }
.cbt-dd-item-secondary:hover { color: #8ab0d0; background: rgba(255,255,255,.04); }
.cbt-dd-divider { height: 1px; background: rgba(255,255,255,.07); margin: 4px 2px; }

/* ── News tooltip ─────────────────────────────────────────────────────────── */
#news-tooltip {
  position: fixed; z-index: 9999;
  background: rgba(13,17,23,.97); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.10); border-radius: 10px;
  width: 240px; box-shadow: 0 8px 32px rgba(0,0,0,.5);
  pointer-events: none; font-size: 12px;
  animation: ntt-in .15s ease;
}
@keyframes ntt-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
.ntt-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px 7px; border-bottom: 1px solid rgba(255,255,255,.07);
  border-left: 3px solid; border-radius: 10px 10px 0 0;
}
.ntt-time { color: #94a3b8; font-size: 11px; font-weight: 600; }
.ntt-count { font-size: 10px; color: #4a5778; }
.ntt-body { padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.ntt-row { display: flex; align-items: center; gap: 4px; line-height: 1.4; }
.ntt-title { flex: 1; color: #c8d4ea; font-size: 11px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ntt-impact { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 4px; flex-shrink: 0; margin-left: 4px; }
.ntt-high   { background: #ef444420; color: #ef4444; }
.ntt-medium { background: #f59e0b20; color: #f59e0b; }
.ntt-low    { background: #64748b20; color: #94a3b8; }

/* ── Upcoming bar upgrade ─────────────────────────────────────────────────── */
.nup-name { font-weight: 600; color: #e2e8f0; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.nup-sep  { opacity: .4; margin: 0 2px; }
.nup-live { background: #ef4444; color: #fff; font-size: 9px; font-weight: 800;
            padding: 1px 5px; border-radius: 4px; letter-spacing: .5px;
            animation: nup-pulse .8s ease infinite alternate; }
@keyframes nup-pulse { from { opacity: 1; } to { opacity: .5; } }

/* ── News alert toast ─────────────────────────────────────────────────────── */
.news-alert-toast {
  position: fixed; bottom: 80px; right: 20px; z-index: 99999;
  display: flex; align-items: center; gap: 10px;
  background: rgba(13,17,23,.97); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.10); border-left: 3px solid #00c2a3;
  border-radius: 10px; padding: 12px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  font-size: 12px; color: #e2e8f0; max-width: 320px;
  opacity: 0; transform: translateX(20px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.news-alert-toast.nat-show { opacity: 1; transform: translateX(0); }
.nat-icon { font-size: 18px; flex-shrink: 0; }
.nat-text { flex: 1; line-height: 1.5; }
.nat-text b { color: #fff; font-weight: 600; }