/* ── Reset & Base ─────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#13182a;
  --bg-grad:radial-gradient(ellipse at top, #1a2138 0%, #13182a 60%);
  --card:#1d2336;
  --card2:#262d44;
  --border:#2d3552;
  --border-soft:#262d44;
  --accent:#00d4aa;
  --accent-dim:rgba(0,212,170,.18);
  --green:#00d4aa;
  --red:#f85149;
  --blue:#58a6ff;
  --yellow:#e3a838;
  --purple:#c084fc;
  --text:#e8eaf0;
  --muted:#8b94ac;
  --hover:#252b40;
  --input:#262d44;
  --shadow:0 2px 12px rgba(0,0,0,.25);
  --shadow-lg:0 8px 32px rgba(0,0,0,.35);
}
body{background:var(--bg);background-image:var(--bg-grad);background-attachment:fixed;color:var(--text);font-family:system-ui,-apple-system,sans-serif;min-height:100vh;transition:background .2s,color .2s}
body.light-mode{
  --bg:#ece6d8;
  --bg-grad:radial-gradient(ellipse at top, #efe9db 0%, #e7e0d0 65%);
  --card:#f5f0e2;
  --card2:#e3dcc8;
  --border:#c9bfa4;
  --border-soft:#d8cfb6;
  --accent:#0d6b50;
  --accent-dim:rgba(13,107,80,.14);
  --green:#0d6b50;
  --red:#a8362b;
  --blue:#2257a4;
  --yellow:#8a5d12;
  --purple:#6a3d9c;
  --text:#1d1b15;
  --muted:#6b6452;
  --hover:#dcd4bd;
  --input:#ebe4d2;
  --shadow:0 1px 3px rgba(90,70,30,.08), 0 4px 12px rgba(90,70,30,.05);
  --shadow-lg:0 4px 16px rgba(90,70,30,.10), 0 12px 32px rgba(90,70,30,.08);
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button{cursor:pointer;border:none;border-radius:6px;font-size:13px;transition:opacity .15s}
button:hover{opacity:.85}
input,select,textarea{background:var(--input);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:8px 12px;font-size:13px;outline:none;transition:border-color .15s}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
textarea{resize:vertical;min-height:80px}

/* ── Top Bar ─────────────────────────────────────────────────── */
#topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 20px;background:var(--card);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;flex-wrap:wrap;gap:10px;
}
#topbar .logo{font-size:18px;font-weight:700;color:var(--accent);letter-spacing:.5px;white-space:nowrap}
#market-strip{display:flex;gap:20px;flex-wrap:wrap;flex:1;justify-content:center}
.market-item{display:flex;flex-direction:column;align-items:center;min-width:70px}
.market-item .label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.market-item .price{font-size:14px;font-weight:600;font-family:monospace}
.market-item .chg{font-size:11px;font-family:monospace}
#topbar-right{display:flex;align-items:center;gap:8px}
#theme-toggle-btn,#privacy-toggle-btn{background:var(--border);color:var(--text);padding:6px 12px;font-size:12px;transition:background .15s}
#theme-toggle-btn:hover,#privacy-toggle-btn:hover{background:var(--accent);color:#0d1117}
body.privacy-mode #privacy-toggle-btn{background:var(--accent-dim);color:var(--accent)}
#refresh-market-btn{background:var(--border);color:var(--text);padding:6px 12px;font-size:12px}
#last-updated{font-size:11px;color:var(--muted)}

/* ── Privacy mode — masks personal dollar amounts & share counts ── */
body.privacy-mode .sensitive{position:relative;color:transparent;user-select:none}
body.privacy-mode .sensitive::after{
  content:"••••";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:flex-end;
  color:var(--muted);font-size:inherit;font-weight:inherit;
  letter-spacing:1px;pointer-events:none
}
body.privacy-mode .sensitive-input{-webkit-text-security:disc;text-security:disc}

/* ── User area ───────────────────────────────────────────────── */
#user-area{display:flex;align-items:center;gap:8px;white-space:nowrap}
.user-label{font-size:14px}
.current-user-name{font-size:13px;font-weight:600;color:var(--text)}
#btn-logout{background:var(--border);color:var(--text);padding:6px 12px;font-size:12px}
#btn-logout:hover{background:var(--red);color:#fff;opacity:1}

/* ── Login screen ────────────────────────────────────────────── */
#login-screen{
  position:fixed;inset:0;z-index:2000;display:flex;
  align-items:center;justify-content:center;padding:20px;
  background:var(--bg);background-image:var(--bg-grad);
}
.login-box{
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:40px 36px;width:100%;max-width:360px;box-shadow:var(--shadow-lg);
  text-align:center;
}
.login-logo{font-size:30px;font-weight:700;color:var(--accent);letter-spacing:.5px}
.login-tagline{font-size:13px;color:var(--muted);margin-top:4px;margin-bottom:26px}
.login-box form{display:flex;flex-direction:column;gap:12px}
.login-box input{padding:11px 14px;font-size:14px}
.login-submit{padding:11px;font-size:14px;margin-top:4px}
.login-error{color:var(--red);font-size:13px;margin-top:14px;min-height:18px}

/* ── Role badge + user manager rows ──────────────────────────── */
.role-badge{
  display:inline-block;font-size:9px;text-transform:uppercase;letter-spacing:.5px;
  font-weight:700;background:var(--border);color:var(--muted);
  padding:2px 6px;border-radius:4px;margin-left:4px;vertical-align:middle;
}
.role-badge.role-admin{background:var(--accent-dim);color:var(--accent)}
.user-actions{display:flex;gap:6px;flex-wrap:wrap}

/* ── Tabs ────────────────────────────────────────────────────── */
#tabs{
  display:flex;flex-wrap:wrap;gap:0;
  padding:0 16px;background:var(--card);border-bottom:1px solid var(--border);
}
.tab{
  padding:12px 18px;cursor:pointer;font-size:13px;color:var(--muted);
  border-bottom:2px solid transparent;transition:all .15s;user-select:none;white-space:nowrap;
}
.tab:hover{color:var(--text)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}

/* ── Sub-tabs (within a panel) ───────────────────────────────── */
.sub-tabs{
  display:flex;gap:0;margin-bottom:20px;
  border-bottom:1px solid var(--border);
}
.sub-tab{
  padding:10px 18px;cursor:pointer;font-size:13px;color:var(--muted);
  border-bottom:2px solid transparent;transition:all .15s;user-select:none;
}
.sub-tab:hover{color:var(--text)}
.sub-tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}

/* ── Portfolio sub-tabs (Holdings / Analysis) ─────────────────── */
.psub-tabs{display:flex;gap:4px;margin-bottom:18px;border-bottom:1px solid var(--border)}
.psub-tab{
  padding:9px 18px;cursor:pointer;font-size:13px;color:var(--muted);
  border-bottom:2px solid transparent;transition:all .15s;user-select:none;
}
.psub-tab:hover{color:var(--text)}
.psub-tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}

/* ── Analysis sub-view ────────────────────────────────────────── */
.analysis-charts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media (max-width:760px){.analysis-charts{grid-template-columns:1fr}}
.analysis-chart-card{padding:16px}
.analysis-h3{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:12px;
  text-transform:uppercase;letter-spacing:.5px}
.analysis-canvas-wrap{position:relative;height:240px}
.analysis-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.screen-card{padding:14px}
.screen-title{font-size:12px;font-weight:700;color:var(--text);margin-bottom:8px;
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--border-soft);padding-bottom:8px}
.screen-count{background:var(--card2);color:var(--muted);font-size:11px;
  padding:1px 8px;border-radius:10px;font-weight:600}
.screen-row{display:flex;justify-content:space-between;align-items:center;
  padding:5px 2px;font-size:13px}
.screen-row+.screen-row{border-top:1px solid var(--border-soft)}
.screen-metric{font-family:monospace;font-size:12px;font-weight:600;color:var(--muted)}
.screen-metric.pos{color:var(--green)}
.screen-metric.neg{color:var(--red)}
.screen-empty{font-size:12px;color:var(--muted);padding:8px 2px;font-style:italic}
.analysis-table-title{font-size:13px;font-weight:600;color:var(--muted);
  padding:14px 16px 0;text-transform:uppercase;letter-spacing:.5px}

/* ── Import confirm (diff preview) ────────────────────────────── */
.import-summary{font-size:13px;color:var(--text);margin-bottom:14px;font-weight:600}
.import-note{font-size:12px;color:var(--muted);margin-top:14px;font-style:italic}
.import-warn{font-size:13px;color:var(--yellow);background:var(--card2);
  padding:14px;border-radius:8px;border:1px solid var(--border)}
.import-sec{margin-bottom:12px}
.import-sec-head{font-size:12px;font-weight:700;padding:6px 10px;border-radius:6px;
  display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.imp-add{background:rgba(0,212,170,.14);color:var(--green)}
.imp-upd{background:rgba(88,166,255,.14);color:var(--blue)}
.imp-rem{background:rgba(248,81,73,.14);color:var(--red)}
.import-row{display:flex;justify-content:space-between;gap:12px;
  padding:5px 10px;font-size:12px;border-bottom:1px solid var(--border-soft)}
.import-row b{font-weight:700}
.import-row span{color:var(--muted);font-family:monospace;text-align:right}
.import-none{font-size:12px;color:var(--muted);padding:4px 10px;font-style:italic}
#import-confirm-body{max-height:60vh;overflow-y:auto}

/* ── Main layout ─────────────────────────────────────────────── */
#main{padding:24px;max-width:1600px;margin:0 auto}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ── Cards ────────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:20px;margin-bottom:20px}
.card-title{font-size:14px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:16px}

/* ── Summary cards row ───────────────────────────────────────── */
.summary-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px}
.stat-card{
  background:linear-gradient(135deg,var(--card2) 0%,var(--card) 100%);
  border:1px solid var(--border);border-radius:12px;padding:20px 22px;
  position:relative;overflow:hidden;
}
.stat-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--accent),transparent);opacity:.6;
}
.stat-card .stat-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px;font-weight:600}
.stat-card .stat-value{font-size:26px;font-weight:800;font-family:monospace;letter-spacing:-.5px}
.stat-card .stat-sub{font-size:12px;color:var(--muted);margin-top:6px;font-family:monospace}

/* ── Table ────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{text-align:right;padding:10px 12px;color:var(--muted);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);white-space:nowrap}
thead th:first-child{text-align:left}
tbody tr{border-bottom:1px solid var(--border);transition:background .15s}
tbody tr:nth-child(even){background:rgba(45,51,71,.35)}
body.light-mode tbody tr:nth-child(even){background:rgba(0,0,0,.04)}
tbody tr:hover{background:var(--hover)}
tbody td{padding:8px 12px;text-align:right;font-family:monospace;font-size:13px;white-space:nowrap}
tbody td:first-child{text-align:left;font-family:system-ui;font-weight:600;color:var(--accent)}
.total-row td{font-weight:700;border-top:2px solid var(--border);background:var(--hover);font-size:14px}
.total-row td:first-child{color:var(--text)}
.pos{color:var(--green)}
.neg{color:var(--red)}
.neutral{color:var(--muted)}
.badge-sym{display:inline-block;background:var(--card2);padding:2px 8px;border-radius:4px;font-size:12px;font-weight:700;letter-spacing:.5px}

/* ── Inline editable number inputs ───────────────────────────── */
.inline-num{
  background:transparent;
  color:var(--text);
  border:none;
  border-bottom:1px solid transparent;
  border-radius:0;
  font-family:monospace;
  font-size:13px;
  width:82px;
  text-align:right;
  padding:2px 4px;
  transition:border-color .15s, background .15s;
}
.inline-num:hover{border-bottom-color:var(--border)}
.inline-num:focus{
  outline:none;
  border:1px solid var(--accent);
  border-radius:4px;
  background:var(--card2);
  padding:2px 6px;
}
.inline-num.target-field{width:64px}

/* ── Buy checkbox ─────────────────────────────────────────────── */
.buy-check{
  width:16px;height:16px;
  accent-color:var(--accent);
  cursor:pointer;
  background:transparent;
  border:none;
  padding:0;
}

/* ── Shares sub-text in symbol cell ─────────────────────────── */
.shares-sub{font-size:11px;color:var(--muted);font-family:monospace;font-weight:400;margin-top:2px}
.sym-cell{display:flex;flex-direction:column;gap:2px}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn-primary{background:var(--accent);color:#0d1117;padding:8px 18px;font-weight:600}
.btn-secondary{background:var(--card2);color:var(--text);padding:8px 14px;border:1px solid var(--border)}
.btn-danger{background:var(--red);color:#fff;padding:8px 14px}
.btn-sm{padding:4px 10px;font-size:12px}
.btn-icon{background:transparent;color:var(--muted);padding:4px 8px;font-size:14px}
.btn-icon:hover{color:var(--text);opacity:1}

/* ── Portfolio toolbar ────────────────────────────────────────── */
.portfolio-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px}

/* ── Portfolio pills ──────────────────────────────────────────── */
.portfolio-pill{padding:6px 14px;border-radius:20px;border:2px solid var(--border);background:var(--card);color:var(--muted);font-size:13px;cursor:pointer;transition:all .15s}
.portfolio-pill.active{color:#0d1117;font-weight:600;border-color:transparent}
.portfolio-pill:hover{border-color:var(--accent)}

/* ── Filter pills (market category) ──────────────────────────── */
.filter-pill{padding:5px 14px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:12px;cursor:pointer;transition:all .15s}
.filter-pill.active{background:var(--accent);color:#0d1117;border-color:var(--accent);font-weight:600}
.filter-pill:hover{border-color:var(--accent)}

/* ── Modal ────────────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1000;display:none;align-items:center;justify-content:center;padding:20px}
.modal-overlay.show{display:flex}
.modal-box{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:28px;max-width:560px;width:100%;max-height:90vh;overflow-y:auto}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.modal-title{font-size:16px;font-weight:700}
.modal-close{background:transparent;color:var(--muted);font-size:20px;padding:0 4px;line-height:1}
.modal-close:hover{color:var(--text);opacity:1}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}

/* ── Form fields ──────────────────────────────────────────────── */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:500}
.form-group input,.form-group textarea,.form-group select{width:100%}

/* ── Color swatches ───────────────────────────────────────────── */
.color-swatches{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.color-swatch{width:28px;height:28px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:border-color .15s}
.color-swatch.active{border-color:var(--text)}

/* ── User management list ─────────────────────────────────────── */
.user-list-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;border-radius:8px;margin-bottom:6px;
  background:var(--card2);border:1px solid var(--border);
}
.user-list-item .user-name{font-size:14px;font-weight:600}
.user-list-item.active-user .user-name::after{
  content:' (current)';font-size:11px;color:var(--accent);font-weight:400;
}

/* ── Source/instrument checkboxes ─────────────────────────────── */
.setting-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.setting-row:last-child{border-bottom:none}
.setting-row label{flex:1;font-size:13px;cursor:pointer}
.setting-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.setting-group-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin:12px 0 4px}

/* ── Empty state ──────────────────────────────────────────────── */
.empty-state{text-align:center;padding:60px 20px}
.empty-state .empty-icon{font-size:48px;margin-bottom:16px}
.empty-state h3{font-size:20px;font-weight:700;margin-bottom:8px}
.empty-state p{color:var(--muted);margin-bottom:24px}

/* ── News source badge ────────────────────────────────────────── */
.news-source-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:600;background:var(--card2);color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-right:6px}

/* ── Portfolio color badge in aggregate ───────────────────────── */
.portfolio-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;color:#0d1117;margin:1px}

/* ── Sparkline ────────────────────────────────────────────────── */
.spark-cell{width:88px}
canvas.sparkline{display:block;filter:drop-shadow(0 0 3px currentColor)}

/* ── Add position form ────────────────────────────────────────── */
#add-position-form{background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:16px;margin-bottom:16px;display:none}
.add-form-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.add-form-row .form-group{margin-bottom:0;flex:1;min-width:100px}

/* ── Portfolio view header ────────────────────────────────────── */
.portfolio-view-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.portfolio-view-header h2{font-size:20px;font-weight:700}
.portfolio-view-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ── Market cards ─────────────────────────────────────────────── */
.market-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:28px}
.market-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px;cursor:pointer;transition:border-color .15s}
.market-card:hover{border-color:var(--accent)}
.market-card .mc-sym{font-size:15px;font-weight:700;color:var(--accent);margin-bottom:2px}
.market-card .mc-name{font-size:11px;color:var(--muted);margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.market-card .mc-price{font-size:20px;font-weight:700;font-family:monospace;margin-bottom:4px}
.market-card .mc-chg{font-size:13px;font-family:monospace}
.mc-cat-badge{display:inline-block;padding:2px 7px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-top:8px}
.cat-index    {background:#1e3a5f;color:#58a6ff}
.cat-commodity{background:#3a2e1a;color:#e3a838}
.cat-crypto   {background:#1a2e3a;color:#00d4aa}
.cat-bond     {background:#2a1a3a;color:#c084fc}
.cat-volatility{background:#3a1a1a;color:#f85149}
body.light-mode .cat-index    {background:#dbeafe;color:#1d4ed8}
body.light-mode .cat-commodity{background:#fef3c7;color:#92400e}
body.light-mode .cat-crypto   {background:#d1fae5;color:#065f46}
body.light-mode .cat-bond     {background:#ede9fe;color:#5b21b6}
body.light-mode .cat-volatility{background:#fee2e2;color:#991b1b}

/* ── Market charts ────────────────────────────────────────────── */
.market-charts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.market-chart-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px}
.market-chart-card h4{font-size:13px;font-weight:600;margin-bottom:10px;color:var(--text)}
@media(max-width:700px){.market-charts-grid{grid-template-columns:1fr}}

/* ── News ─────────────────────────────────────────────────────── */
.news-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.news-filter-row{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.news-filter-row input{flex:1;min-width:200px}
.news-item{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:14px 16px;margin-bottom:10px}
.news-item:hover{border-color:var(--accent)}
.news-item-meta{font-size:11px;color:var(--muted);margin-bottom:6px;display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.news-item-title{font-size:14px;font-weight:600;line-height:1.4;margin-bottom:6px}
.news-item-title a{color:var(--text)}
.news-item-title a:hover{color:var(--accent)}
.news-item-summary{font-size:12px;color:var(--muted);line-height:1.5}
.auto-refresh-badge{background:var(--card2);color:var(--muted);padding:3px 8px;border-radius:12px;font-size:11px}

/* ── Search ───────────────────────────────────────────────────── */
.search-box-wrap{display:flex;gap:10px;margin-bottom:16px}
.search-box-wrap input{flex:1;font-size:15px;padding:10px 16px}
.search-box-wrap button{padding:10px 20px;background:var(--accent);color:#0d1117;font-weight:600}
.recent-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.recent-tag{background:var(--card2);color:var(--muted);padding:4px 12px;border-radius:14px;font-size:12px;cursor:pointer;border:1px solid var(--border)}
.recent-tag:hover{border-color:var(--accent);color:var(--accent)}
.search-result-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:20px;margin-bottom:16px}
.search-result-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.search-sym{font-size:28px;font-weight:800;color:var(--accent)}
.search-name{font-size:14px;color:var(--muted);margin-top:2px}
.search-price-block{text-align:right}
.search-price{font-size:28px;font-weight:700;font-family:monospace}
.search-chg{font-size:14px;font-family:monospace}
.search-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:16px}
.search-stat-item .s-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.search-stat-item .s-val{font-size:14px;font-weight:600;font-family:monospace;margin-top:2px}

/* ── Watchlist ────────────────────────────────────────────────── */
.watchlist-add-row{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.watchlist-add-row input{flex:1;min-width:120px}

/* ── Notes ────────────────────────────────────────────────────── */
.notes-layout{display:grid;grid-template-columns:260px 1fr;gap:20px;min-height:500px}
.notes-list-panel{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px;overflow-y:auto}
.notes-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.note-list-item{padding:10px 12px;border-radius:8px;cursor:pointer;margin-bottom:4px;border:1px solid transparent}
.note-list-item:hover{background:var(--hover)}
.note-list-item.active{background:var(--card2);border-color:var(--border)}
.note-list-item .note-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.note-list-item .note-meta{font-size:11px;color:var(--muted);margin-top:2px}
.notes-editor-panel{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:20px}
.notes-editor-panel input{width:100%;margin-bottom:12px;font-size:16px;font-weight:600;background:transparent;border:none;border-bottom:1px solid var(--border);border-radius:0;padding:8px 0}
.notes-editor-panel textarea{width:100%;min-height:300px;background:var(--card2);font-size:14px;line-height:1.6}
.note-ticker-row{display:flex;gap:10px;margin-bottom:12px;align-items:center}
.note-ticker-row label{font-size:12px;color:var(--muted);white-space:nowrap}
.note-ticker-row input{flex:1;max-width:150px}
.notes-editor-actions{display:flex;justify-content:space-between;align-items:center;margin-top:12px}

/* ── Notes revamp: search + filters ── */
.notes-search{width:100%;margin-bottom:10px;padding:8px 10px;background:var(--input);border:1px solid var(--border);border-radius:8px;font-size:13px;color:var(--text)}
.notes-filter-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.nfilter{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border:1px solid var(--border);background:var(--card2);color:var(--muted);border-radius:20px;font-size:12px;cursor:pointer}
.nfilter:hover{border-color:var(--accent)}
.nfilter.active{background:var(--accent-dim);border-color:var(--accent);color:var(--text)}
.nf-count{font-size:10px;opacity:.7;font-variant-numeric:tabular-nums}
.notes-empty-list{font-size:12px;color:var(--muted);padding:10px 6px}

/* ── Notes revamp: list items ── */
.note-li-top{display:flex;align-items:center;gap:7px}
.note-type-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.note-list-item .note-li-top .note-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.note-pin-ind{font-size:11px;flex-shrink:0}
.note-li-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:5px}
.note-tk{font-size:10px;font-weight:700;background:var(--border-soft);color:var(--text);padding:1px 6px;border-radius:5px;letter-spacing:.3px}
.note-conv{font-size:10px;color:var(--yellow);letter-spacing:1px}
.note-status{font-size:10px;padding:1px 6px;border-radius:5px;font-weight:600}
.note-status.st-watching{background:rgba(88,166,255,.15);color:var(--blue)}
.note-status.st-acted{background:rgba(0,212,170,.15);color:var(--green)}
.note-status.st-archived{background:var(--border-soft);color:var(--muted)}

/* ── Notes revamp: editor header / type segments ── */
.note-editor-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px;flex-wrap:wrap}
.nt-seg-group{display:inline-flex;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.nt-seg{background:var(--card2);border:none;border-right:1px solid var(--border);padding:6px 11px;font-size:15px;cursor:pointer;line-height:1;filter:grayscale(.6);opacity:.55}
.nt-seg:last-child{border-right:none}
.nt-seg:hover{background:var(--hover)}
.nt-seg.active{background:var(--accent-dim);filter:none;opacity:1}
.note-head-actions{display:flex;gap:8px;align-items:center}
.note-pin-btn{background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:5px 9px;cursor:pointer;font-size:14px;filter:grayscale(1);opacity:.55}
.note-pin-btn.on{filter:none;opacity:1;background:var(--accent-dim);border-color:var(--accent)}

/* ── Notes revamp: editor fields (override blanket .notes-editor-panel input) ── */
.notes-editor-panel .note-title-input{width:100%;margin-bottom:14px;font-size:18px;font-weight:700;background:transparent;border:none;border-bottom:1px solid var(--border);border-radius:0;padding:8px 0}
.note-meta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 14px;margin-bottom:16px}
.nm-field{display:flex;flex-direction:column;gap:4px}
.nm-field label{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.notes-editor-panel .note-meta-grid input,
.notes-editor-panel .note-meta-grid select{width:100%;margin:0;font-size:13px;font-weight:500;background:var(--input);border:1px solid var(--border);border-radius:7px;padding:7px 9px;color:var(--text)}
.conviction-stars{display:flex;align-items:center;gap:3px;padding:4px 0}
.cstar{font-size:17px;color:var(--border);cursor:pointer;line-height:1}
.cstar.on,.cstar:hover{color:var(--yellow)}
.cstar-clear{font-size:11px;color:var(--muted);cursor:pointer;margin-left:5px}

/* ── Notes revamp: body edit / preview ── */
.note-body-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.note-tabs{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.ntab{background:var(--card2);border:none;border-right:1px solid var(--border);padding:6px 12px;font-size:12px;cursor:pointer;color:var(--muted)}
.ntab:last-child{border-right:none}
.ntab.active{background:var(--accent-dim);color:var(--text)}
.notes-editor-panel .note-body-input{width:100%;min-height:320px;background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:12px;font-size:14px;line-height:1.6;font-family:inherit;color:var(--text);margin:0}
.note-body-preview{min-height:320px;background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:6px 16px}

/* ── Notes revamp: markdown render ── */
.md-body{font-size:14px;line-height:1.65}
.md-body .md-h{margin:14px 0 6px;line-height:1.25}
.md-body .md-h1{font-size:20px}
.md-body .md-h2{font-size:16px;color:var(--accent)}
.md-body .md-h3,.md-body .md-h4,.md-body .md-h5,.md-body .md-h6{font-size:14px}
.md-body .md-p{margin:7px 0}
.md-body .md-ul,.md-body .md-ol{margin:7px 0 7px 22px}
.md-body .md-ul li,.md-body .md-ol li{margin:3px 0}
.md-body .md-task{list-style:none;margin-left:4px}
.md-body .md-task-item{display:flex;gap:8px;align-items:flex-start}
.md-body .md-task-item input{margin-top:3px}
.md-body .md-quote{border-left:3px solid var(--border);padding:2px 12px;margin:8px 0;color:var(--muted)}
.md-body .md-hr{border:none;border-top:1px solid var(--border);margin:14px 0}
.md-body code{background:var(--border-soft);padding:1px 5px;border-radius:4px;font-size:13px}
.md-body a{color:var(--accent)}
.md-body .md-ticker{color:var(--accent);font-weight:600}
.md-body .md-empty{color:var(--muted)}

@media(max-width:650px){.notes-layout{grid-template-columns:1fr}.note-meta-grid{grid-template-columns:1fr}}

/* ── Sector / Theme Manager ─────────────────────────────────────── */
.sector-mgr-box{max-width:680px;width:100%}
.sector-mgr-section{margin-top:20px}
.sector-mgr-h{font-size:13px;font-weight:700;margin-bottom:10px}
.sector-mgr-note{font-weight:400;font-size:12px;color:var(--muted)}
.sector-add-row{display:flex;gap:8px;margin-bottom:12px}
.sector-add-row input{flex:1;background:var(--input);border:1px solid var(--border);border-radius:8px;padding:8px 10px;color:var(--text);font-size:13px}
.sector-chip-list{display:flex;flex-wrap:wrap;gap:8px}
.sector-chip{display:inline-flex;align-items:center;gap:4px;background:var(--card2);border:1px solid var(--border);border-radius:20px;padding:5px 6px 5px 12px;font-size:12px;font-weight:600}
.sector-chip-x{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:12px;line-height:1;padding:2px 5px;border-radius:50%}
.sector-chip-x:hover{background:var(--red);color:#fff}
.sector-assign-search{width:100%;margin-bottom:10px;background:var(--input);border:1px solid var(--border);border-radius:8px;padding:8px 10px;color:var(--text);font-size:13px}
.sector-assign-list{max-height:320px;overflow-y:auto;border:1px solid var(--border);border-radius:8px}
.sector-assign-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-bottom:1px solid var(--border-soft)}
.sector-assign-row:last-child{border-bottom:none}
.sa-sym{font-weight:700;font-size:13px;cursor:pointer}
.sa-sym:hover{color:var(--accent)}
.sa-select{min-width:210px;background:var(--input);border:1px solid var(--border);border-radius:7px;padding:6px 8px;color:var(--text);font-size:13px}
.analysis-h3-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.analysis-h3-row .analysis-h3{margin:0}
@media(max-width:560px){.sa-select{min-width:140px}}

/* ── Holdings toolbar / lean columns / grouping / export ────────── */
.holdings-toolbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.hx-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);cursor:pointer;user-select:none}
.hx-toggle input{accent-color:var(--accent);cursor:pointer}
.hx-export{margin-left:auto}
table.lean-cols .c-opt{display:none}
tr.sector-group-row td{background:var(--card2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:7px 12px;text-align:left;font-family:system-ui}
.sg-name{font-weight:700;font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:var(--text)}
.sg-meta{font-size:11px;color:var(--muted);margin-left:8px}
.stale-dot{color:var(--yellow);font-size:11px;cursor:help}
.sector-nudge-btn{background:rgba(227,168,56,.12);border:1px solid var(--yellow);color:var(--yellow);border-radius:20px;padding:4px 11px;font-size:12px;font-weight:600;cursor:pointer}
.sector-nudge-btn:hover{background:rgba(227,168,56,.22)}
.export-scope{display:flex;flex-direction:column;gap:8px}
.export-radio{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.export-radio input{accent-color:var(--accent)}
.export-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px;flex-wrap:wrap}

/* ── Detail Panel ─────────────────────────────────────────────── */
#detail-panel{position:fixed;inset:0;background:var(--bg);z-index:500;overflow-y:auto;display:none}
#detail-panel.show{display:block}

.detail-back-bar{
  display:flex;align-items:center;gap:14px;
  padding:12px 20px;
  background:var(--card);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:200;
}
.detail-back-btn{
  background:var(--card2);border:1px solid var(--border);
  color:var(--accent);font-size:26px;line-height:1;
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
  transition:background .15s,transform .1s,box-shadow .15s;
  box-shadow:0 0 0 0 rgba(0,212,170,0);
}
.detail-back-btn:hover{
  background:var(--accent);color:#0d1117;opacity:1;
  transform:scale(1.08);
  box-shadow:0 0 12px rgba(0,212,170,.35);
}
.detail-sym-label{font-size:20px;font-weight:800;color:var(--accent)}
.detail-name-label{font-size:13px;color:var(--muted);margin-left:4px}

.detail-body{padding:24px;max-width:1200px;margin:0 auto}
.detail-top-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;margin-bottom:24px}
@media(max-width:800px){.detail-top-grid{grid-template-columns:1fr}}
.detail-price{font-size:38px;font-weight:800;font-family:monospace;letter-spacing:-.5px}
.detail-chg{font-size:16px;font-family:monospace}
.period-btns{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.period-btn{padding:5px 12px;border-radius:6px;background:var(--card2);color:var(--muted);font-size:12px;border:1px solid var(--border);transition:all .15s}
.period-btn.active{background:var(--accent);color:#0d1117;border-color:var(--accent);font-weight:600}
.period-btn:hover:not(.active){border-color:var(--accent);color:var(--accent);opacity:1}
.detail-stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.detail-stat{background:linear-gradient(135deg,var(--card2),var(--card));border:1px solid var(--border);border-radius:8px;padding:10px 12px}
.detail-stat .ds-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.detail-stat .ds-val{font-size:14px;font-weight:600;font-family:monospace}
.position-section{background:var(--card2);border-radius:8px;padding:14px;margin-top:12px}
.position-section h4{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px}
.position-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border);font-size:13px}
.position-row:last-child{border-bottom:none}

.linked-notes-section{background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:14px;margin-bottom:14px}
.linked-notes-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.linked-note-item{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);cursor:pointer;font-size:13px;color:var(--accent)}
.linked-note-item:last-child{border-bottom:none}
.linked-note-item:hover{opacity:.8}

.detail-section-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:20px}
.detail-section-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}

.company-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:600px){.company-info-grid{grid-template-columns:1fr}}
.company-info-item{display:flex;justify-content:space-between;align-items:flex-start;padding:8px 12px;background:var(--card2);border-radius:6px;font-size:13px;gap:10px}
.company-info-item .ci-label{color:var(--muted);font-size:12px;white-space:nowrap;flex-shrink:0}
.company-info-item .ci-val{font-weight:600;font-family:monospace;color:var(--text);word-break:break-word}

.insider-table{width:100%;border-collapse:collapse;font-size:12px}
.insider-table th{text-align:left;padding:6px 10px;color:var(--muted);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--border)}
.insider-table td{padding:8px 10px;border-bottom:1px solid rgba(58,64,96,.5);font-family:monospace}
.insider-table tr:last-child td{border-bottom:none}
.insider-buy{color:var(--green)}
.insider-sell{color:var(--red)}

/* ── Spinners / Loading ───────────────────────────────────────── */
.loading-msg{color:var(--muted);font-size:13px;padding:20px;text-align:center}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;margin-right:6px;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Misc ─────────────────────────────────────────────────────── */
.divider{border:none;border-top:1px solid var(--border);margin:16px 0}
.text-muted{color:var(--muted)}
.text-sm{font-size:12px}

/* ══════════════════════════════════════════════════════════════
   NEW: TradingView-style chart container
   ══════════════════════════════════════════════════════════════ */
.tv-chart-container{width:100%;height:420px;border-radius:8px;overflow:hidden;background:var(--card2);position:relative}
.chart-tools{display:inline-flex;gap:16px;flex-wrap:wrap;align-items:center;margin-left:auto;font-weight:500}
.chart-tool-group{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center;padding:4px;background:var(--card2);border-radius:8px;border:1px solid var(--border)}
.ind-toggle{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);cursor:pointer;padding:3px 8px;border-radius:5px;transition:background .15s;user-select:none}
.ind-toggle:hover{background:var(--hover);color:var(--text)}
.ind-toggle input{width:13px;height:13px;accent-color:var(--accent);cursor:pointer;margin:0}
.chart-legend{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:12px;flex-wrap:wrap}
.leg-sym{background:var(--accent);color:#0d1117;padding:2px 10px;border-radius:5px;font-weight:700;font-size:12px;letter-spacing:.5px}
.leg-pill{background:var(--card2);padding:2px 10px;border-radius:5px;font-size:11px;font-weight:600;border:1px solid var(--border)}
.leg-readout{font-family:monospace;font-size:12px;margin-left:auto;white-space:nowrap}
.leg-readout .pos{color:var(--green)}
.leg-readout .neg{color:var(--red)}
.mul-input{width:56px;background:var(--card2);border:1px solid var(--border);color:var(--text);padding:3px 6px;border-radius:5px;font-size:12px;text-align:center;margin-left:4px;font-family:monospace}
.mul-input:focus{border-color:var(--accent);outline:none}

/* Detail panel header row */
.detail-header-row{display:grid;grid-template-columns:1fr 1.3fr;gap:24px;margin-bottom:24px;align-items:start}
@media(max-width:900px){.detail-header-row{grid-template-columns:1fr}}
.detail-price-block .detail-price{margin-bottom:4px}
.detail-price-block .detail-chg{font-size:15px;margin-bottom:8px}
.detail-meta-line{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.5}

/* Range bars */
.range-bar-wrap{display:flex;flex-direction:column;gap:6px}
.range-bar-label{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.range-bar-label span:last-child{text-transform:none;letter-spacing:0;font-family:monospace;font-weight:500}
.range-bar{position:relative;height:6px;background:linear-gradient(90deg,var(--red) 0%,var(--yellow) 50%,var(--green) 100%);border-radius:3px;opacity:.85}
.range-fill{position:absolute;top:-4px;width:3px;height:14px;background:var(--text);border-radius:2px;box-shadow:0 0 6px rgba(255,255,255,.6);transition:left .3s;transform:translateX(-50%)}

/* Performance grid */
.perf-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:18px}
@media(max-width:600px){.perf-grid{grid-template-columns:repeat(3,1fr)}}
.perf-cell{background:var(--card2);border:1px solid var(--border);border-radius:6px;padding:8px 6px;text-align:center}
.perf-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:3px;font-weight:600}
.perf-val{font-size:13px;font-weight:700;font-family:monospace}

/* Mid grid: position / linked notes / stock note */
.detail-mid-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:20px}
@media(max-width:900px){.detail-mid-grid{grid-template-columns:1fr}}
.detail-mid-grid > div{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px}
.stock-note-section{background:var(--card)}

/* Analyst grid */
.analyst-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.analyst-cell{background:linear-gradient(135deg,var(--card2),var(--card));border:1px solid var(--border);border-radius:8px;padding:12px 14px}
.al-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px;font-weight:600}
.al-val{font-size:15px;font-weight:700;font-family:monospace}
.al-sub{font-size:11px;font-family:monospace;margin-top:4px;color:var(--muted)}

/* Buy list summary cards */
.buylist-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
@media(max-width:600px){.buylist-summary{grid-template-columns:1fr}}
.bl-summary-card{background:linear-gradient(135deg,var(--card2) 0%,var(--card) 100%);border:1px solid var(--border);border-radius:10px;padding:16px 18px;position:relative;overflow:hidden}
.bl-summary-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),transparent);opacity:.6}
.bl-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px;font-weight:600}
.bl-value{font-size:22px;font-weight:800;font-family:monospace;letter-spacing:-.3px}

/* Polish: section title aligns chart tools to right */
.detail-section-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.detail-section-title > .chart-tools{margin-left:auto}

/* Polish: card shadow */
.card,.detail-section-card{box-shadow:var(--shadow)}
.stat-card,.bl-summary-card{box-shadow:var(--shadow)}

/* Polish: subtler table zebra in dark mode */
tbody tr:nth-child(even){background:rgba(255,255,255,.012)}
body.light-mode tbody tr:nth-child(even){background:rgba(0,0,0,.025)}

/* Sticky table header */
.table-wrap{max-height:none}
table thead{position:sticky;top:0;background:var(--card);z-index:5}

/* Detail panel backdrop blur for a cleaner overlay */
#detail-panel{background:var(--bg);background-image:var(--bg-grad)}
.detail-back-bar{backdrop-filter:blur(8px);background:rgba(29,35,54,.85)}
body.light-mode .detail-back-bar{background:rgba(255,255,255,.85)}

/* Holding-table inline-input polish */
.inline-num{font-family:'SF Mono','Monaco','Cascadia Mono',monospace}

/* Better focus rings */
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* Sortable column headers */
th.sortable{cursor:pointer;user-select:none;position:relative}
th.sortable:hover{color:var(--accent)}
th.sortable .sort-arrow{display:inline-block;margin-left:4px;font-size:10px;opacity:.4;transition:opacity .12s}
th.sortable.sort-asc .sort-arrow,
th.sortable.sort-desc .sort-arrow{opacity:1;color:var(--accent)}

/* Portfolio-kind radio cards in new-portfolio modal */
.kind-option{flex:1;padding:12px;border:2px solid var(--border);border-radius:8px;cursor:pointer;background:var(--card2);transition:all .15s;text-align:center}
.kind-option:hover{border-color:var(--accent)}
.kind-option.active{border-color:var(--accent);background:rgba(0,212,170,.08)}
.kind-option .kind-label{font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px}
.kind-option .kind-desc{font-size:11px;color:var(--muted)}

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN SCREEN POLISH
   ═══════════════════════════════════════════════════════════════════════════ */
#login-screen{
  background:radial-gradient(ellipse at top, #1f2a4a 0%, #0c1020 70%);
}
body.light-mode #login-screen{
  background:radial-gradient(ellipse at top, #f3ecdc 0%, #e3dac2 80%);
}
.login-box{
  border-radius:18px; padding:48px 40px; max-width:400px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px var(--border);
  background:linear-gradient(180deg, var(--card) 0%, var(--card2) 100%);
}
.login-logo{font-size:42px;letter-spacing:1px}
.login-tagline{font-size:14px;margin-bottom:32px;letter-spacing:.3px}
.login-box input{padding:13px 16px;font-size:15px;border-radius:10px}
.login-box .login-submit{padding:13px;font-size:15px;border-radius:10px;font-weight:600;margin-top:8px;background:linear-gradient(135deg,var(--accent),#00b896);color:#0d1117}
.login-box .login-submit:hover{opacity:.92}

/* ═══════════════════════════════════════════════════════════════════════════
   OVERVIEW DASHBOARD
   ═══════════════════════════════════════════════════════════════════════════ */
#panel-overview{padding:20px 24px}

.ov-stat-row{
  display:grid; grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:14px; margin-bottom:18px;
}
@media (max-width: 1100px){ .ov-stat-row{grid-template-columns:repeat(3, 1fr)} }
@media (max-width: 720px){ .ov-stat-row{grid-template-columns:repeat(2, 1fr)} }

.ov-stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:18px 18px 14px; position:relative; overflow:hidden;
  box-shadow:var(--shadow);
}
.ov-stat-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--border);
}
.ov-stat-primary{background:linear-gradient(135deg, var(--card) 0%, var(--card2) 100%)}
.ov-stat-primary::before{background:var(--accent)}
.ov-stat-label{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.8px; font-weight:600; margin-bottom:8px}
.ov-stat-value{font-size:24px; font-weight:800; font-family:'SF Mono','Cascadia Mono',monospace; letter-spacing:-.5px; line-height:1.1}
.ov-stat-sub{font-size:12px; color:var(--muted); margin-top:6px; font-family:monospace}
.ov-stat-sub .ov-sub-sep{margin:0 6px; opacity:.4}
.ov-spark{display:block;width:100%;margin-top:8px;max-height:42px}

.ov-grid-2{display:grid; grid-template-columns:2fr 1fr; gap:14px; margin-bottom:18px}
.ov-grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-bottom:18px}
@media (max-width: 980px){
  .ov-grid-2,.ov-grid-3{grid-template-columns:1fr}
}

.ov-card{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:18px 20px; box-shadow:var(--shadow);
}
.ov-card-wide{grid-column:span 1}
.ov-card-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:12px}
.ov-card-header h3{font-size:14px; font-weight:600; color:var(--text); letter-spacing:.2px}
.ov-card-sub{font-size:12px; color:var(--muted); font-family:monospace}
.ov-card-link{font-size:12px; color:var(--accent); cursor:pointer}
.ov-card-link:hover{text-decoration:underline}

.ov-chart-wrap{position:relative; height:240px}
.ov-chart-wrap-tall{height:320px}

.ov-legend{display:flex; flex-direction:column; gap:6px; margin-top:14px}
.ov-legend-item{display:flex; align-items:center; gap:8px; font-size:12px}
.ov-legend-dot{width:10px; height:10px; border-radius:3px; flex:0 0 10px}
.ov-legend-label{color:var(--text); flex:1}
.ov-legend-pct{color:var(--muted); font-family:monospace; font-weight:600}

.ov-list{display:flex; flex-direction:column; gap:2px}
.ov-list-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 8px; border-radius:6px; transition:background .12s;
}
.ov-list-row:hover{background:var(--hover)}
.ov-row-main{flex:1; min-width:0}
.ov-row-title{font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ov-row-sub{font-size:11px; color:var(--muted); margin-top:2px}
.ov-row-right{text-align:right; font-family:monospace; font-size:13px; font-weight:600}
.ov-row-bar{display:block; width:100%; height:4px; background:var(--border-soft); border-radius:2px; margin-top:6px; overflow:hidden}
.ov-row-bar span{display:block; height:100%; border-radius:2px; transition:width .3s}

.ov-list-chips{flex-direction:row; flex-wrap:wrap; gap:6px}
.ov-chip{
  display:inline-block; padding:6px 12px; background:var(--card2); border:1px solid var(--border);
  border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; transition:all .12s; font-family:monospace;
}
.ov-chip:hover{border-color:var(--accent); color:var(--accent)}

.ov-empty{padding:24px; text-align:center; color:var(--muted); font-size:13px; font-style:italic}

/* ═══════════════════════════════════════════════════════════════════════════
   NET WORTH & BUDGET shared chrome
   ═══════════════════════════════════════════════════════════════════════════ */
#panel-networth,#panel-budget{padding:20px 24px}

.nw-toolbar{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  margin-bottom:18px; flex-wrap:wrap;
}
.nw-summary{display:flex; gap:18px; flex-wrap:wrap}
.nw-summary-item{
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  padding:10px 16px; min-width:130px;
}
.nw-summary-label{font-size:10px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); font-weight:600}
.nw-summary-value{font-size:18px; font-weight:700; font-family:monospace; margin-top:4px}
.nw-actions{display:flex; gap:8px; flex-wrap:wrap}

.nw-subview{margin-top:8px}
.nw-grid-2{display:grid; grid-template-columns:1.4fr 1fr; gap:14px}
@media (max-width: 980px){ .nw-grid-2{grid-template-columns:1fr} }

.nw-table{width:100%; border-collapse:collapse; font-size:13px}
.nw-table thead th{
  text-align:left; padding:10px 12px; font-size:11px; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.6px; border-bottom:1px solid var(--border);
}
.nw-table tbody td{padding:10px 12px; border-bottom:1px solid var(--border-soft)}
.nw-table tbody tr:hover{background:var(--hover)}
.nw-table .row-clickable{cursor:pointer}
.nw-table .totals-row td{font-weight:700; border-top:2px solid var(--border); border-bottom:none; background:var(--card2)}
.pos{color:var(--green)}
.neg{color:var(--red)}

.acct-type-badge{
  display:inline-block; padding:2px 8px; border-radius:10px; font-size:10px; font-weight:700;
  color:#0d1117; text-transform:uppercase; letter-spacing:.5px;
}
.acct-type-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%; vertical-align:middle; margin-right:6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NW SNAPSHOT modal — wider with per-account inputs
   ═══════════════════════════════════════════════════════════════════════════ */
.modal-wide{max-width:760px !important}
.snap-meta-row{display:flex; gap:16px; margin-bottom:18px; flex-wrap:wrap; align-items:flex-end}
.snap-auto-toggle{font-size:12px; color:var(--muted); white-space:nowrap; cursor:pointer; display:flex; align-items:center; gap:6px}
.snap-values-host{
  max-height:50vh; overflow-y:auto; border:1px solid var(--border); border-radius:8px;
  background:var(--card2);
}
.snap-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px; border-bottom:1px solid var(--border-soft);
}
.snap-row:last-child{border-bottom:none}
.snap-acct-name{font-size:13px; display:flex; align-items:center; gap:8px; flex:1}
.snap-acct-type{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px}
.snap-link-badge{color:var(--accent); font-size:11px}
.snap-acct-input{display:flex; align-items:center; gap:4px; font-family:monospace; color:var(--muted)}
.snap-acct-input input{
  width:140px; text-align:right; font-family:monospace; font-size:13px;
  padding:6px 10px;
}
.snap-total-display{flex:1; font-size:14px; color:var(--text); font-family:monospace}
.snap-total-display strong{color:var(--accent); font-size:16px; margin-left:4px}

/* ═══════════════════════════════════════════════════════════════════════════
   BUDGET specific
   ═══════════════════════════════════════════════════════════════════════════ */
.bud-filter-row{display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap}
.bud-filter-row input{flex:1; min-width:200px}
.bud-filter-row select{min-width:160px}

.kind-toggle{display:flex; gap:8px; margin-bottom:14px}
.kind-pill{
  flex:1; padding:10px; border:2px solid var(--border); border-radius:8px; cursor:pointer;
  background:var(--card2); text-align:center; font-size:13px; font-weight:600; transition:all .15s;
}
.kind-pill input{display:none}
.kind-pill:has(input:checked){border-color:var(--accent); background:rgba(0,212,170,.08); color:var(--accent)}

.cat-list{display:flex; flex-direction:column; gap:6px}
.cat-pill{
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:var(--card2); border:1px solid var(--border); border-radius:8px;
  cursor:pointer; transition:all .12s;
}
.cat-pill:hover{border-color:var(--accent); background:var(--hover)}
.cat-icon{font-size:16px}
.cat-name{font-size:13px; font-weight:600; color:var(--text)}

.import-step textarea{width:100%; font-family:monospace; font-size:12px}
.import-step label{display:block; font-size:12px; color:var(--muted); font-weight:600; margin:14px 0 6px; text-transform:uppercase; letter-spacing:.5px}
#bud-import-preview-table{font-size:12px}
#bud-import-preview-table select{font-size:12px; padding:4px 6px}

/* Modal body / labels for new modals */
.modal-body label{display:block; font-size:12px; color:var(--muted); font-weight:600; margin:12px 0 6px; text-transform:uppercase; letter-spacing:.5px}
.modal-body label:first-child{margin-top:0}
.modal-body input,.modal-body select,.modal-body textarea{width:100%}
.modal-body label input[type="checkbox"]{width:auto; margin-right:6px}

/* btn-sm */
.btn-sm{padding:6px 12px;font-size:12px}
.btn-primary{background:var(--accent);color:#0d1117;padding:8px 16px;font-weight:600}
.btn-primary:hover{opacity:.9}
.btn-secondary{background:var(--border);color:var(--text);padding:8px 16px}
.btn-secondary:hover{background:var(--hover)}
.btn-danger{background:var(--red);color:#fff;padding:8px 16px}
.btn-danger:hover{opacity:.9}

/* ═══════════════════════════════════════════════════════════════════════════
   v10 — RESTRUCTURED LAYOUT
   Overview as landing page, hero rows on NW/Budget, pill controls on charts,
   launchpad section cards, redesigned tables and snapshots.
   ═══════════════════════════════════════════════════════════════════════════ */

/* When on Overview, the tab bar is hidden — Overview is a true landing page.
   The topbar logo (clickable) and the section cards are the nav. */
body.on-overview #tabs{display:none}
#topbar .logo{cursor:pointer;transition:opacity .12s}
#topbar .logo:hover{opacity:.8}

/* Two-column grid override: equal width (was 2fr 1fr previously). */
.ov-grid-2{grid-template-columns:1fr 1fr}
@media (max-width: 980px){ .ov-grid-2{grid-template-columns:1fr} }

/* ── HERO blocks (Overview + NW + Budget) ───────────────────────────────── */
.ov-hero,.nw-hero{
  display:grid; grid-template-columns:1.4fr 2fr auto; gap:24px; align-items:center;
  padding:26px 28px; margin-bottom:20px;
  background:linear-gradient(135deg, var(--card) 0%, var(--card2) 100%);
  border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow-lg);
  position:relative; overflow:hidden;
}
.ov-hero::before,.nw-hero::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--accent), #00937a);
}
.ov-hero-main,.nw-hero-left{min-width:0}
.ov-hero-label,.nw-hero-label{
  font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1px;
  font-weight:700; margin-bottom:8px;
}
.ov-hero-asof{color:var(--muted); font-weight:500; letter-spacing:.3px; text-transform:none; margin-left:6px; font-size:11px}
.ov-hero-value,.nw-hero-value{
  font-size:48px; font-weight:800; font-family:'SF Mono','Cascadia Mono',monospace;
  letter-spacing:-1.5px; line-height:1; color:var(--text);
}
.ov-hero-delta,.nw-hero-meta{
  font-size:13px; color:var(--muted); margin-top:10px; font-family:monospace;
}
.nw-hero-sep{margin:0 8px; opacity:.4}

.ov-hero-mini,.nw-hero-stats{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(115px, 1fr)); gap:20px;
}
.ov-mini,.nw-hero-stat{min-width:0}
.ov-mini-label,.nw-hero-stat-label{
  font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.8px;
  font-weight:600; margin-bottom:4px;
}
.ov-mini-val,.nw-hero-stat-value{
  font-size:20px; font-weight:700; font-family:monospace; letter-spacing:-.4px; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ov-mini-sub,.nw-hero-stat-sub{font-size:11px; color:var(--muted); margin-top:3px; font-family:monospace}
.ov-mini-sub .ov-sub-sep{opacity:.4; margin:0 4px}

.ov-hero-mini .ov-mini-val.pos,.ov-hero-mini .ov-mini-val.neg{color:var(--text)}
.ov-mini-val.pos{color:var(--green) !important}
.ov-mini-val.neg{color:var(--red) !important}

.nw-hero-actions{display:flex; flex-direction:column; gap:8px; min-width:140px}
.nw-hero-actions .btn-primary,.nw-hero-actions .btn-secondary,.nw-hero-actions select{
  width:100%; padding:10px 16px; font-size:13px;
}

@media (max-width: 980px){
  .ov-hero,.nw-hero{grid-template-columns:1fr; gap:18px; padding:20px}
  .ov-hero-value,.nw-hero-value{font-size:36px}
  .nw-hero-actions{flex-direction:row}
}

/* ── PRIMARY card (chart card with controls) ────────────────────────────── */
.ov-card-primary{margin-bottom:18px; background:linear-gradient(180deg, var(--card) 0%, var(--card2) 100%)}
.ov-card-primary .ov-card-header{margin-bottom:16px}
.ov-chart-controls{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

/* Pill button groups */
.pill-group{display:inline-flex; background:var(--card2); border:1px solid var(--border); border-radius:8px; padding:2px; gap:0}
.pill{
  padding:5px 12px; border:none; background:transparent; color:var(--muted);
  font-size:11px; font-weight:600; letter-spacing:.3px; cursor:pointer; border-radius:6px;
  transition:all .15s;
}
.pill:hover{color:var(--text)}
.pill.active{background:var(--accent); color:#0d1117}

/* ── Section cards (launchpad on Overview) ──────────────────────────────── */
.ov-section-title{
  font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:1.2px;
  font-weight:700; margin:24px 4px 12px;
}
.ov-section-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-bottom:24px;
}
@media (max-width: 1100px){ .ov-section-grid{grid-template-columns:repeat(2, 1fr)} }
@media (max-width: 640px){ .ov-section-grid{grid-template-columns:1fr} }

.ov-section-card{
  display:flex; align-items:center; gap:16px; padding:18px 20px;
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  cursor:pointer; transition:all .15s; text-decoration:none;
  box-shadow:var(--shadow);
}
.ov-section-card:hover{
  border-color:var(--accent); transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(0,212,170,.12), var(--shadow-lg);
}
.ov-section-icon{
  width:52px; height:52px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; font-size:24px; flex:0 0 52px;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.ov-section-body{flex:1; min-width:0}
.ov-section-name{
  font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.8px;
  font-weight:700; margin-bottom:4px;
}
.ov-section-stat{
  font-size:20px; font-weight:800; font-family:monospace; letter-spacing:-.3px;
  color:var(--text); line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ov-section-stat.pos{color:var(--green)}
.ov-section-stat.neg{color:var(--red)}
.ov-section-sub{
  font-size:11px; color:var(--muted); margin-top:4px; font-family:monospace;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ov-section-arrow{
  font-size:22px; color:var(--muted); transition:all .15s; font-weight:300;
}
.ov-section-card:hover .ov-section-arrow{color:var(--accent); transform:translateX(2px)}

/* ── Allocation flex layout (chart + legend side by side) ───────────────── */
.ov-alloc-flex{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.ov-alloc-flex > .ov-chart-wrap{flex:0 0 240px}
.ov-alloc-flex > .ov-legend{flex:1; min-width:180px; margin-top:0}
.ov-legend-val{
  color:var(--text); font-family:monospace; font-size:11px; margin-left:auto;
  white-space:nowrap;
}
.ov-legend-pct{margin-left:8px; min-width:42px; text-align:right}

/* ── List rows: keep visually tight, add right-aligned value styling ────── */
.ov-row-value{color:var(--text); font-family:monospace; font-weight:600}

/* ── Tables: right-align numerics, action column tight ──────────────────── */
.nw-table th.num,.nw-table td.num{text-align:right; font-family:monospace}
.nw-table th.actions,.nw-table td.actions{
  text-align:right; white-space:nowrap; width:1%;
}
.nw-table td.actions .btn-sm{margin-left:4px}
.nw-table .muted{color:var(--muted); font-size:12px}
.nw-table-wrap{overflow-x:auto}
.link-badge{
  color:var(--accent); font-size:12px;
  display:inline-flex; align-items:center; gap:4px;
}

/* ── Tooltip / typography refinement ─────────────────────────────────────── */
.ov-card-header h3{font-size:15px; font-weight:600}
.ov-card-sub{font-size:11px}

/* ── Override panel padding: hero already has its own padding ───────────── */
#panel-overview{padding:20px 24px}
#panel-networth,#panel-budget{padding:20px 24px}

/* ── Compact hero on Budget (no big value, has its own structure) ───────── */
#panel-budget .nw-hero-value.pos,#panel-budget .nw-hero-value.neg{
  /* don't override font-size — already set */
}

/* ── Mobile tweaks ──────────────────────────────────────────────────────── */
@media (max-width: 640px){
  .ov-card{padding:14px 16px}
  #panel-overview,#panel-networth,#panel-budget{padding:14px}
  .ov-hero-value,.nw-hero-value{font-size:30px}
  .ov-chart-controls{gap:6px}
  .pill{padding:5px 9px; font-size:10px}
}

/* ── Light theme overrides for new components ───────────────────────────── */
body.light-mode .ov-section-card:hover{
  box-shadow:0 12px 32px rgba(13,107,80,.10), var(--shadow-lg);
}
body.light-mode .acct-type-badge{color:#fff}

/* ── Snapshot input: keep tidy text on long account names ───────────────── */
.snap-acct-text{overflow:hidden; text-overflow:ellipsis; max-width:230px; display:inline-block; vertical-align:middle}

/* ═══════════════════════════════════════════════════════════════════════════
   v11 — Buy/Sell selector, manual sectors, Stage analysis, compact (phone) mode
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Per-row Buy / Sell / — action selector (holdings table) ─────────────── */
.action-sel{
  background:var(--card2); border:1px solid var(--border); color:var(--muted);
  border-radius:6px; padding:3px 6px; font-size:12px; font-weight:600;
  font-family:system-ui; min-width:64px; text-align:center; cursor:pointer;
}
.action-sel.act-buy{border-color:var(--green); color:var(--green); background:rgba(0,212,170,.10)}
.action-sel.act-sell{border-color:var(--red); color:var(--red); background:rgba(248,81,73,.10)}

/* ── Trade-list Buy/Sell badges ─────────────────────────────────────────── */
.trade-badge{display:inline-block; padding:2px 10px; border-radius:10px;
  font-size:10px; font-weight:800; letter-spacing:.5px}
.tb-buy{background:rgba(0,212,170,.15); color:var(--green); border:1px solid var(--green)}
.tb-sell{background:rgba(248,81,73,.15); color:var(--red); border:1px solid var(--red)}

/* ── Detail panel: manual sector control ────────────────────────────────── */
.detail-sector-row{display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap}
.detail-sector-row label{font-size:11px; color:var(--muted); text-transform:uppercase;
  letter-spacing:.6px; font-weight:600}
.detail-sector-row select{padding:5px 10px; font-size:12px; font-weight:600; min-width:170px}
.detail-sector-row input{padding:5px 10px; font-size:12px; min-width:150px}
.detail-sector-status{font-size:11px; color:var(--muted)}
.detail-sector-status.is-manual{color:var(--accent); font-weight:600}

/* ── Stage analysis card ─────────────────────────────────────────────────── */
.stage-head{display:flex; gap:16px; align-items:center; margin-bottom:16px; flex-wrap:wrap}
.stage-badge{border-radius:12px; padding:12px 18px; text-align:center; min-width:118px;
  border:2px solid var(--border)}
.stage-badge .stage-num{font-size:11px; font-weight:800; letter-spacing:1px; opacity:.85}
.stage-badge .stage-name{font-size:18px; font-weight:800; margin-top:2px}
.stage-1{border-color:var(--blue);   color:var(--blue);   background:rgba(88,166,255,.10)}
.stage-2{border-color:var(--green);  color:var(--green);  background:rgba(0,212,170,.10)}
.stage-3{border-color:var(--yellow); color:var(--yellow); background:rgba(227,168,56,.12)}
.stage-4{border-color:var(--red);    color:var(--red);    background:rgba(248,81,73,.10)}
.stage-desc{flex:1; min-width:220px; font-size:13px; color:var(--text); line-height:1.5}
/* Compact S1–S4 pill (analysis technicals table + stage breakdown card) */
.stage-pill{display:inline-block; padding:1px 7px; border-radius:8px; font-size:11px;
  font-weight:800; border:1px solid var(--border); line-height:1.6}

/* ── Quant grade badges (A+ … F) ─────────────────────────────────────────── */
.grade-badge{display:inline-block; min-width:26px; padding:1px 7px; border-radius:6px;
  font-size:11px; font-weight:800; text-align:center; border:1px solid var(--border)}
.grade-A{background:rgba(0,212,170,.15); color:var(--green);  border-color:var(--green)}
.grade-B{background:rgba(88,166,255,.15); color:var(--blue);  border-color:var(--blue)}
.grade-C{background:rgba(227,168,56,.15); color:var(--yellow);border-color:var(--yellow)}
.grade-D{background:rgba(240,140,73,.15); color:#f08c49;      border-color:#f08c49}
.grade-F{background:rgba(248,81,73,.15);  color:var(--red);   border-color:var(--red)}
.grade-na{color:var(--muted)}

/* ── Quant rating card (detail panel) ────────────────────────────────────── */
.quant-head{display:flex; align-items:center; gap:16px; margin-bottom:16px; flex-wrap:wrap}
.quant-score-badge{display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:88px; padding:10px 14px; border-radius:12px; border:2px solid var(--border)}
.quant-score-badge .qs-grade{font-size:26px; font-weight:900; line-height:1}
.quant-score-badge .qs-num{font-size:13px; font-weight:700; font-family:monospace; margin-top:2px; opacity:.9}
.quant-score-badge .qs-num span{opacity:.6; font-size:11px}
.quant-head-title{font-size:15px; font-weight:700; margin-bottom:4px}
.quant-factors{display:flex; flex-direction:column; gap:9px}
.qf-row{display:grid; grid-template-columns:130px 1fr 84px; align-items:center; gap:12px}
@media(max-width:560px){.qf-row{grid-template-columns:96px 1fr 72px; gap:8px}}
.qf-label{font-size:12px; color:var(--muted); font-weight:600}
.qf-track{height:8px; background:var(--card2); border:1px solid var(--border); border-radius:5px; overflow:hidden}
.qf-fill{display:block; height:100%; border-radius:5px; transition:width .3s; background:var(--border)}
.qf-fill.grade-A{background:var(--green)}
.qf-fill.grade-B{background:var(--blue)}
.qf-fill.grade-C{background:var(--yellow)}
.qf-fill.grade-D{background:#f08c49}
.qf-fill.grade-F{background:var(--red)}
.qf-grade{display:flex; align-items:center; gap:6px; justify-content:flex-end;
  font-family:monospace; font-size:12px; font-weight:700; color:var(--muted)}
.stage-metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
@media(max-width:700px){.stage-metrics{grid-template-columns:repeat(2,1fr)}}
.stage-metric{background:var(--card2); border:1px solid var(--border); border-radius:8px; padding:10px 12px}
.sm-label{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px;
  margin-bottom:4px; font-weight:600}
.sm-val{font-size:15px; font-weight:700; font-family:monospace}
.sm-sub{font-size:11px; color:var(--muted); margin-top:3px; font-family:monospace}
.stage-foot{margin-top:12px}

/* ── Compact toggle button ──────────────────────────────────────────────── */
#compact-toggle-btn{background:var(--border); color:var(--text); padding:6px 12px; font-size:12px}
#compact-toggle-btn:hover{background:var(--accent); color:#0d1117}
#compact-toggle-btn.active{background:var(--accent-dim); color:var(--accent)}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPACT / PHONE MODE — shrinks chrome and hides secondary columns (.c-opt)
   ═══════════════════════════════════════════════════════════════════════════ */
.compact-mode .c-opt{display:none !important}

.compact-mode #topbar{padding:6px 10px; gap:6px}
.compact-mode #topbar .logo{font-size:16px}
.compact-mode #market-strip{gap:10px}
.compact-mode .market-item{min-width:52px}
.compact-mode .market-item .price{font-size:12px}
.compact-mode .market-item .chg{font-size:10px}
.compact-mode #topbar-right{gap:5px}
.compact-mode #topbar-right button{padding:5px 9px; font-size:11px}

.compact-mode #tabs{padding:0 4px; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch}
.compact-mode .tab{padding:9px 11px; font-size:12px}

.compact-mode #main{padding:12px}
.compact-mode .card{padding:14px}
.compact-mode .summary-row{gap:10px; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); margin-bottom:16px}
.compact-mode .stat-card{padding:12px 14px}
.compact-mode .stat-card .stat-value{font-size:20px}

.compact-mode thead th{padding:7px 8px; font-size:10px}
.compact-mode tbody td{padding:6px 8px; font-size:12px}
.compact-mode .inline-num{width:62px}
.compact-mode .action-sel{min-width:54px; padding:2px 4px}

.compact-mode .portfolio-view-header h2{font-size:17px}
.compact-mode .detail-body{padding:14px}
.compact-mode .detail-price{font-size:30px}

/* ── Stage Gallery ─────────────────────────────────────────────── */
.stage-gallery-card{margin-top:16px;padding:16px}
.stage-gallery-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:4px}
.stage-gallery-title{font-size:15px;font-weight:700}
.stage-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--muted);align-items:center}
.stage-legend>span{display:inline-flex;align-items:center;gap:5px}
.stage-gallery-hint{font-size:12px;color:var(--muted);margin-bottom:12px}
.stage-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.stage-box{background:var(--card2);border:1px solid var(--border);border-left-width:3px;border-radius:10px;padding:10px 12px;cursor:pointer;transition:transform .12s,box-shadow .12s}
.stage-box:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.stage-box.stage-1{border-left-color:var(--blue)}
.stage-box.stage-2{border-left-color:var(--green)}
.stage-box.stage-3{border-left-color:var(--yellow)}
.stage-box.stage-4{border-left-color:var(--red)}
.stage-box.stage-na{border-left-color:var(--border)}
.stage-box-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.stage-box-sym{font-weight:700;font-size:14px;letter-spacing:.3px}
.stage-box-spark{display:block;width:100%;height:58px}
.stage-box-bot{margin-top:6px;font-size:12px;font-weight:600}
.stage-pill.stage-na{color:var(--muted);background:var(--border-soft)}

/* ── Stage Flipper ─────────────────────────────────────────────── */
.flip-overlay{position:fixed;inset:0;z-index:4000;background:rgba(8,11,20,.72);display:flex;align-items:center;justify-content:center;padding:20px}
.flip-modal{position:relative;width:min(860px,96vw);max-height:92vh;overflow-y:auto;background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);padding:22px 26px}
.flip-close{position:absolute;top:12px;right:14px;background:transparent;border:none;color:var(--muted);font-size:20px;cursor:pointer;line-height:1;padding:4px 8px;border-radius:8px}
.flip-close:hover{background:var(--hover);color:var(--text)}
.flip-nav{position:fixed;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid var(--border);background:var(--card2);color:var(--text);font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.flip-nav:hover{background:var(--hover);border-color:var(--accent);color:var(--accent)}
.flip-prev{left:max(16px,calc(50vw - 470px))}
.flip-next{right:max(16px,calc(50vw - 470px))}
.flip-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-right:30px}
.flip-id{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.flip-sym{font-size:26px;font-weight:800;letter-spacing:.5px}
.flip-stage-label{font-size:13px;font-weight:700;padding:3px 10px;border-radius:8px;border:1px solid var(--border)}
.flip-stage-label.stage-1{color:var(--blue);border-color:var(--blue);background:rgba(88,166,255,.10)}
.flip-stage-label.stage-2{color:var(--green);border-color:var(--green);background:rgba(0,212,170,.10)}
.flip-stage-label.stage-3{color:var(--yellow);border-color:var(--yellow);background:rgba(227,168,56,.12)}
.flip-stage-label.stage-4{color:var(--red);border-color:var(--red);background:rgba(248,81,73,.10)}
.flip-stage-label.stage-na{color:var(--muted)}
.flip-counter{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.flip-chart-wrap{position:relative;height:320px;margin-bottom:18px}
.flip-hint{text-align:center;margin-top:14px}
@media(max-width:720px){
  .flip-nav{position:absolute}
  .flip-prev{left:10px}
  .flip-next{right:10px}
  .flip-sym{font-size:22px}
  .flip-chart-wrap{height:240px}
}