/* ═══════════════════════════════════════════════════════════
   Market Dashboard — Dark Theme v5 (Features A-G)
   ═══════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* ── Light Mode (Default) ── */
  --bg:       #f5f6fa;
  --bg2:      #ffffff;
  --bg3:      #eef0f5;
  --bg4:      #e4e7ef;
  --bdr:      #d1d5db;
  --bdr2:     #c5cad4;
  --txt:      #1a1d2e;
  --txt2:     #3d4260;
  --txt3:     #6b7280;
  --txt4:     #9ca3af;
  --grn:      #16a34a;
  --red:      #dc2626;
  --teal:     #0ea5e9;
  --acc:      #6366f1;
  --acc2:     #818cf8;
  --sidebar:  215px;
  --topbar:   62px;
  --tabbar:   34px;
  --wltabs:   34px;
  --row-h:    36px;
  --th-h:     34px;
  --font:     Arial, sans-serif;   /* Feature G: changed default to Arial */
  --mono:     'SF Mono','Cascadia Code','Consolas',monospace;
  --shadow:   0 1px 3px rgba(0,0,0,0.12);
}

/* ── Dark Mode (opt-in via body.dark) ── */
body.dark {
  --bg:       #0d0f14;
  --bg2:      #13151c;
  --bg3:      #1a1d26;
  --bg4:      #20242f;
  --bdr:      #252836;
  --bdr2:     #1e2130;
  --txt:      #e8eaf0;
  --txt2:     #b0b8d0;
  --txt3:     #6b7899;
  --txt4:     #424863;
  --grn:      #22c55e;
  --red:      #ef4444;
  --teal:     #00d4aa;
  --acc:      #818cf8;
  --acc2:     #a5b4fc;
  --shadow:   0 1px 3px rgba(0,0,0,0.4);
}

html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--txt);font-family:var(--font);font-size:12px;line-height:1}

/* ══════════════════════════════════════════════════════════
   KOYFIN-STYLE SIDEBAR
   ══════════════════════════════════════════════════════════ */
#sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar);
  background: var(--bg2);
  border-right: 1px solid var(--bdr);
  display: flex;
  flex-direction: column;
  z-index: 300;
  font-family: system-ui, -apple-system, 'Inter', sans-serif;
  transition: width 0.2s ease;
  overflow: hidden;
}
#sidebar.collapsed { width: 48px; }

/* Header: logo + brand + collapse toggle */
.sb-header {
  height: var(--topbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  background: #000000 !important;
  flex-shrink: 0;
  gap: 6px;
}
.sb-logo-area {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: visible;
  flex-shrink: 0;
}
/* 56px circle logo (45 × 1.25) — logo-large.png centered, mix-blend-mode removes black bg */
.sb-logo-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #000;
  position: relative;
}
.sb-logo-img {
  width: 56px;
  height: auto;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -38.6%);
  mix-blend-mode: screen;
}
.sb-wordmark {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: visible;
  flex-shrink: 0;
  line-height: 1;
}
/* Gradient matches login page exactly: light yellow-green top → deep green bottom */
.sb-wordmark .brand-all {
  background: linear-gradient(180deg, #d4f080 0%, #acd168 40%, #7da040 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sb-wordmark .brand-rest {
  color: #ffffff;
}
#sidebar.collapsed .sb-wordmark { display: none; }
.sb-collapse-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--txt4);
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 0.15s;
}
.sb-collapse-btn:hover { color: var(--txt); }
#sidebar.collapsed .sb-collapse-btn { transform: rotate(180deg); }

/* Scrollable body */
.sb-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 0 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--bdr) transparent;
}
.sb-scroll::-webkit-scrollbar { width: 4px; }
.sb-scroll::-webkit-scrollbar-thumb { background: var(--bdr); border-radius: 2px; }

/* Section headers */
.sb-section-header {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--txt4);
  padding: 12px 12px 4px;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
}
#sidebar.collapsed .sb-section-header {
  text-indent: -999px; /* hide text in collapsed mode */
  padding: 8px 0;
}

/* Nav item (direct button or anchor) */
.sb-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0 8px 0 14px;
  height: 34px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--txt2);
  font-size: 12.5px;
  font-family: inherit;
  text-align: left;
  transition: background 0.12s, color 0.12s;
  position: relative;
  border-radius: 0;
  white-space: nowrap;
  text-decoration: none;
}
.sb-item:hover {
  background: var(--bg3);
  color: var(--txt);
}
.sb-item.active {
  background: rgba(14,165,233,0.12);
  color: var(--teal);
  font-weight: 600;
}
.sb-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 3px;
  background: var(--teal);
  border-radius: 0 2px 2px 0;
}

/* Sub-items (inside expandable groups) */
.sb-sub-item {
  padding-left: 32px;
  height: 30px;
  font-size: 12px;
  color: var(--txt3);
}
.sb-sub-item:hover { color: var(--txt); }
.sb-sub-item.active { color: var(--teal); }

/* Icon in nav item */
.sb-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--txt3);
  font-size: 12px;
}
.sb-item.active .sb-item-icon { color: var(--teal); }
#sidebar.collapsed .sb-item-label,
#sidebar.collapsed .sb-badge,
#sidebar.collapsed .sb-section-header { display: none; }
#sidebar.collapsed .sb-item { padding: 0; justify-content: center; }
#sidebar.collapsed .sb-item-icon { width: 20px; height: 20px; color: var(--txt3); }
#sidebar.collapsed .sb-sub-item { display: none; }
#sidebar.collapsed .sb-group-header .sb-item-label { display: none; }
#sidebar.collapsed .sb-group-arrow { display: none; }

/* Label */
.sb-item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Keyboard shortcut badge */
.sb-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--bg4);
  color: var(--txt4);
  border: 1px solid var(--bdr);
  flex-shrink: 0;
  line-height: 1.4;
}
.sb-badge-active {
  background: rgba(14,165,233,0.15);
  color: var(--teal);
  border-color: rgba(14,165,233,0.3);
}

/* Expandable group header */
.sb-group { }
.sb-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 0 8px 0 10px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--txt3);
  font-size: 12px;
  font-family: inherit;
  text-align: left;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.sb-group-header:hover { background: var(--bg3); color: var(--txt2); }
.sb-group-arrow {
  font-size: 9px;
  width: 10px;
  flex-shrink: 0;
  transition: transform 0.2s;
  color: var(--txt4);
}
.sb-group-header.expanded .sb-group-arrow { /* already ▾ in HTML */ }

/* Group body (expandable items) */
.sb-group-body {
  display: none;
  flex-direction: column;
}
.sb-group-body.open { display: flex; }

/* Placeholder in empty group */
.sb-placeholder-item {
  padding: 4px 14px 4px 32px;
  font-size: 11px;
  color: var(--txt4);
  font-style: italic;
}

/* Footer */
.sb-footer {
  border-top: 1px solid var(--bdr);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.sb-footer-label { font-size: 10px; color: var(--txt4); }
#sidebar.collapsed .sb-footer-label { display: none; }
.market-dot { font-size: 10px; color: var(--txt4); cursor: default; }
.market-dot.open { color: var(--grn); animation: pulse 2s infinite; }
.market-dot.closed { color: var(--red); }
.market-dot.pre { color: #ffc107; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* Legacy nav-btn compatibility */
.nav-btn { display: none; }

/* ══════════════════════════════════════════════════════════
   KOYFIN-STYLE TOP BAR
   ══════════════════════════════════════════════════════════ */
#topbar {
  height: var(--topbar);
  background: #000000 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 10px;
  flex-shrink: 0;
  z-index: 200;
  gap: 10px;
}
#topbar-brand {
  display: none;
}
/* Circle logo in topbar — fixed 36px circle, logo-large.png scaled to fill it */
#brand-logo-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #000;
  position: relative;
}
#brand-logo {
  /* PNG is 603x699; circle center is at ~50% x, ~39% y (270/699) */
  /* Scale to 36px wide → height = 36*(699/603) = 41.7px */
  /* Shift up so circle center aligns with container center */
  width: 36px;
  height: auto;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -38.6%); /* -38.6% = -(270/699)*100% to center on circle */
  mix-blend-mode: screen;
}
#brand-name {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1;
}
#brand-name .brand-all {
  background: linear-gradient(180deg, #d4ff6e 0%, #8fcc22 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
#brand-name .brand-rest {
  color: #ffffff;
}
#topbar-center {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}
#topbar-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.09);
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: 8px;
  padding: 0 14px;
  height: 36px;
  flex: 1;
  max-width: 560px;
  cursor: text;
}
#topbar-search-wrap:focus-within {
  border-color: #0ea5e9;
  background: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 2px rgba(14,165,233,0.2);
}
#topbar-search { font-size: 13px; color: #fff !important; }
#topbar-search::placeholder { color: rgba(255,255,255,0.5) !important; }
.topbar-search-icon { color: rgba(255,255,255,0.6) !important; }
.topbar-search-shortcut {
  color: rgba(255,255,255,0.5) !important;
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.25) !important;
}
.topbar-search-icon { color: var(--txt4); flex-shrink: 0; }
#topbar-search {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 12px;
  color: var(--txt);
  font-family: inherit;
  min-width: 0;
}
#topbar-search::placeholder { color: var(--txt4); }
.topbar-search-shortcut {
  font-size: 10px;
  color: var(--txt4);
  background: var(--bg4);
  border: 1px solid var(--bdr);
  border-radius: 3px;
  padding: 1px 5px;
  flex-shrink: 0;
  font-family: monospace;
}
#topbar-right {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.topbar-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg4);
  border: 1px solid var(--bdr);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--txt3);
  margin-left: 4px;
  transition: border-color 0.15s;
}
.topbar-avatar:hover { border-color: var(--teal); color: var(--teal); }

/* ── MAIN AREA ────────────────────────────────────────────── */
#main-area{
  position:fixed;top:0;left:var(--sidebar);right:0;bottom:0;
  display:flex;flex-direction:column;overflow:hidden;
}

/* ── TOP BAR (now defined in Koyfin block above; keep .tb-* helpers) ── */
.tb-logo{font-size:13px;font-weight:800;color:var(--txt);letter-spacing:-.3px;margin-right:4px;}
.tb-sep{color:var(--txt4);margin:0 6px;}
.tb-title{font-size:12px;color:var(--txt2);}
.tb-subtitle{font-size:11px;font-weight:700;color:var(--teal);background:rgba(38,198,218,.1);border:1px solid rgba(38,198,218,.3);border-radius:3px;padding:1px 7px;margin-left:8px;}
.tb-meta{font-size:10px;color:var(--txt4);}
.tb-btn{padding:5px 12px;font-size:13px;border-radius:4px;cursor:pointer;background:var(--bg3);border:1px solid var(--bdr);color:var(--txt2);transition:all .15s;font-family:var(--font);height:32px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.tb-btn:hover{color:var(--txt);border-color:var(--acc);}
.tb-btn.spin{animation:spin .5s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.tb-btn-sm{padding:2px 7px;font-size:10px;border-radius:3px;cursor:pointer;background:var(--bg3);border:1px solid var(--bdr);color:var(--txt3);font-family:var(--font);}

/* ── FEATURE A: WATCHLIST TAB BAR ─────────────────────────── */
#wl-tabs{
  height:var(--wltabs);background:var(--bg2);border-bottom:1px solid var(--bdr);
  display:flex;align-items:center;gap:4px;padding:4px 8px;
  flex-shrink:0;overflow-x:auto;
}
#wl-tabs::-webkit-scrollbar{height:3px;}
#wl-tabs::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:2px;}
#wl-tab-list{display:flex;align-items:center;gap:3px;flex:1;overflow-x:auto;}
.wl-tab{
  display:flex;align-items:center;gap:4px;
  padding:4px 12px;border-radius:4px 4px 0 0;cursor:pointer;
  font-size:11px;color:var(--txt3);border:1px solid transparent;
  border-bottom:none;user-select:none;white-space:nowrap;
  transition:all .15s;flex-shrink:0;
  max-width:120px;overflow:hidden;
}
.wl-tab-name{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80px;display:inline-block;vertical-align:middle;
}
.wl-tab:hover{background:var(--bg3);color:var(--txt);}
.wl-tab.active{background:var(--bg);color:var(--teal);border-color:var(--bdr);border-bottom-color:var(--bg);}
.wl-tab-name[contenteditable="true"]{outline:none;border-bottom:1px solid var(--teal);min-width:20px;}
/* FIX 4: Tab close button */
.wl-tab { position: relative; padding-right: 24px; }
.wl-tab-close {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--txt3); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0 2px; border-radius: 2px;
  opacity: 0; transition: opacity 0.15s;
}
.wl-tab:hover .wl-tab-close { opacity: 1; }
.wl-tab.active .wl-tab-close { opacity: 0.6; }
.wl-tab.active:hover .wl-tab-close { opacity: 1; }
.wl-tab-close:hover { color: #f44336 !important; opacity: 1 !important; }
#btn-add-watchlist{
  background:none;border:1px solid var(--bdr);border-radius:4px;
  color:var(--teal);width:22px;height:22px;cursor:pointer;
  font-size:15px;display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-left:4px;vertical-align:middle;padding:0;
}
#btn-add-watchlist:hover{background:rgba(38,198,218,.1);}

/* ── PANEL TABBAR ─────────────────────────────────────────── */
#tabbar{height:var(--tabbar);background:var(--bg2);border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;padding:0 14px;flex-shrink:0;}
#tab-list{display:flex;align-items:center;gap:2px;height:100%;}
.tab{height:100%;padding:0 12px;background:none;border:none;cursor:pointer;font-size:11px;font-weight:600;letter-spacing:.5px;color:var(--txt3);border-bottom:2px solid transparent;transition:all .15s;font-family:var(--font);max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tab:hover{color:var(--txt);}
.tab.active{color:var(--teal);border-bottom-color:var(--teal);}
#tabbar-right{display:flex;align-items:center;gap:8px;}

/* ── PANELS ───────────────────────────────────────────────── */
.panel{flex:1;overflow:hidden;display:none;position:relative;}
.panel.active{display:flex;flex-direction:column;}
.panel.hidden{display:none!important;}
.panel-inner{flex:1;overflow-y:auto;padding:20px 24px;}
.panel-inner::-webkit-scrollbar{width:6px}
.panel-inner::-webkit-scrollbar-track{background:transparent}
.panel-inner::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:3px}

/* ── PANEL PLACEHOLDERS (for coming-soon panels) ─────────── */
.panel-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
  text-align: center;
  gap: 10px;
  min-height: 300px;
}
.panel-placeholder h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--txt);
  margin-bottom: 6px;
}
.panel-placeholder p {
  font-size: 13px;
  color: var(--txt3);
  max-width: 400px;
  line-height: 1.5;
}
.ph-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 6px;
  background: rgba(14,165,233,0.1);
  color: var(--teal);
  border: 1px solid rgba(14,165,233,0.3);
  margin-top: 8px;
}
.panel-title{font-size:16px;font-weight:700;color:var(--txt);margin-bottom:16px;}
.panel-subtitle{font-size:12px;font-weight:400;color:var(--txt3);}
.panel-section-title{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--txt3);margin:16px 0 8px;}

/* ── TODAY'S MARKETS ──────────────────────────────────────── */
.index-cards-grid{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:6px;}
.index-card{background:var(--bg3);border:1px solid var(--bdr);border-radius:8px;padding:12px 16px;min-width:140px;flex:1 1 140px;max-width:200px;cursor:pointer;transition:border-color .15s;}
.index-card:hover{border-color:var(--acc);}
.ic-label{font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--txt3);text-transform:uppercase;margin-bottom:4px;}
.ic-price{font-family:var(--mono);font-size:18px;font-weight:600;color:var(--txt);}
.ic-chg{font-family:var(--mono);font-size:12px;margin-top:2px;}
.ic-chg.pos{color:var(--grn)}.ic-chg.neg{color:var(--red)}.ic-chg.neutral{color:var(--txt4)}
.sector-grid{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
.sector-cell{padding:6px 12px;border-radius:4px;font-size:11px;font-weight:600;display:flex;gap:8px;align-items:center;cursor:pointer;border:1px solid transparent;}
.sector-cell:hover{border-color:var(--bdr);}
.two-col-movers{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:4px;}
.movers-row{display:flex;align-items:center;padding:5px 0;border-bottom:1px solid var(--bdr2);gap:8px;cursor:pointer;}
.movers-row:hover{background:var(--bg3);padding-left:4px;}
.mr-sym{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--txt);min-width:55px;}
.mr-name{font-size:10px;color:var(--txt3);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mr-price{font-family:var(--mono);font-size:11px;color:var(--txt2);min-width:70px;text-align:right;}
.mr-pct{font-family:var(--mono);font-size:11px;font-weight:600;min-width:60px;text-align:right;}

/* ── NEWS ─────────────────────────────────────────────────── */
.news-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px;}
.news-filter-bar{display:flex;align-items:center;gap:6px;}
.news-filter-bar input{padding:4px 10px;background:var(--bg3);border:1px solid var(--bdr);border-radius:4px;color:var(--txt);font-size:11px;font-family:var(--font);width:160px;outline:none;}
.news-filter-bar input:focus{border-color:var(--acc);}
.news-list{display:flex;flex-direction:column;gap:0;}
.news-item{padding:12px 0;border-bottom:1px solid var(--bdr2);cursor:pointer;transition:padding-left .1s;}
.news-item:hover{padding-left:6px;background:var(--bg3);}
.ni-headline{font-size:12px;color:var(--txt);line-height:1.45;margin-bottom:4px;}
.ni-meta{display:flex;gap:8px;font-size:10px;color:var(--txt4);}
.ni-source{color:var(--acc2);}

/* ── MOVERS PANEL ─────────────────────────────────────────── */
.movers-two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px;}

/* ── WATCHLIST TABLE ──────────────────────────────────────── */
#panel-watchlist{flex:1;overflow:hidden;}
#table-wrap{width:100%;height:100%;overflow:auto;}
#table-wrap::-webkit-scrollbar{width:8px;height:8px}
#table-wrap::-webkit-scrollbar-track{background:var(--bg2)}
#table-wrap::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:4px}
#table-wrap::-webkit-scrollbar-thumb:hover{background:var(--acc)}
#table-wrap::-webkit-scrollbar-corner{background:var(--bg2)}
#main-table{border-collapse:separate;border-spacing:0;table-layout:fixed;width:max-content;min-width:100%;}

/* TH — BUG 1 FIX: high z-index + opaque bg so rows never bleed through */
#main-table thead th{position:sticky;top:0;height:var(--th-h);background:var(--bg2) !important;border-bottom:2px solid var(--bdr);border-right:1px solid var(--bdr2);color:var(--txt3);font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;padding:0 6px;text-align:right;white-space:nowrap;user-select:none;cursor:pointer;z-index:200;overflow:visible;}
#main-table thead th.th-left{text-align:left;}
#main-table thead th:hover{color:var(--txt);}
#main-table thead th.th-sorted{color:var(--teal);}
#main-table thead th.th-ctx{outline:2px solid var(--acc);outline-offset:-2px;}
/* BUG 1 FIX: corner cell (sticky both axes) needs highest z-index */
#main-table thead th.s0{position:sticky;left:0;z-index:250;background:var(--bg2) !important;}
/* BUG 3 FIX: td.s0 must stay sticky — DO NOT override with position:relative below */
#main-table tbody td.s0{position:sticky;left:0;z-index:50;background:var(--bg);}

/* TD */
#main-table tbody td{height:var(--row-h);padding:0 8px;border-bottom:1px solid var(--bdr2);border-right:1px solid rgba(54,54,88,.35);font-family:var(--mono);font-size:13px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt);background:var(--bg);}
#main-table tbody td.td-left{text-align:left;font-family:var(--font);}
/* s0 background is set above; no s1 column sticky */

/* Rows */
#main-table tbody tr.dr:hover td{background:var(--bg3)!important;}
#main-table tbody tr.dr:hover td.s0{background:var(--bg3)!important;}
@keyframes fG{0%{background:rgba(76,175,80,.3)}100%{background:inherit}}
@keyframes fR{0%{background:rgba(244,67,54,.25)}100%{background:inherit}}
tr.fl-g td{animation:fG .7s ease-out}
tr.fl-r td{animation:fR .7s ease-out}

/* Feature E: Frozen row */
tr.frozen-row td {
  background: rgba(38,198,218,0.06) !important;
  border-top: 2px solid var(--teal) !important;
  border-bottom: 2px solid var(--teal) !important;
}
tr.frozen-row:hover td { background: rgba(38,198,218,0.12) !important; }

/* Group header row */
tr.gh td{position:relative;background:#dbeafe!important;border-bottom:1px solid #3b82f6;border-top:3px solid #3b82f6;height:28px;padding:0;font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:#1d4ed8;cursor:pointer;text-align:left;user-select:none;overflow:visible;}
body.dark tr.gh td{background:#1e3a5f!important;border-top:3px solid #3b82f6;border-bottom:1px solid #3b82f6;color:#93c5fd!important;}
tr.gh:hover td{background:var(--bg3)!important;}
.gh-inner{position:relative;display:inline-flex;align-items:center;padding:0 10px;height:28px;background:inherit;will-change:transform;}
.gh-chev{display:inline-block;margin-right:6px;font-size:10px;transition:transform .2s;color:var(--txt3);}
tr.gh.coll .gh-chev{transform:rotate(-90deg);}
.gh-cnt{color:var(--txt4);font-weight:400;margin-left:6px;font-size:10px;}
.gh-bar{display:inline-flex;align-items:center;gap:12px;margin-left:16px;}
.gh-stat{font-size:10px;font-weight:400;font-family:var(--mono);}

/* Ticker cell */
.tk-wrap{display:flex;align-items:center;gap:4px;overflow:hidden;position:relative;}
.tk-bullet{color:var(--teal);font-size:14px;flex-shrink:0;line-height:1;}
.tk-sym{font-family:var(--mono);font-size:inherit;font-weight:700;color:var(--txt);font-style:normal;overflow:hidden;text-overflow:ellipsis;}

/* Color classes */
.pos{color:var(--grn)!important}.neg{color:var(--red)!important}.neu{color:var(--txt4)!important}

/* Loading */
.loading-cell{text-align:center!important;padding:60px!important;color:var(--txt2);height:auto!important;font-family:var(--font)!important;font-size:13px!important;}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--bdr);border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle;margin-right:6px;}

/* ── CHART PANEL ──────────────────────────────────────────── */
#panel-chart{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.chart-panel-header{padding:10px 14px;background:var(--bg2);border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;flex-wrap:wrap;gap:8px;}
.chart-sym-info{display:flex;align-items:baseline;gap:10px;}
#chart-sym-label{font-size:18px;font-weight:800;font-family:var(--mono);}
.chart-name-label{font-size:11px;color:var(--txt3);}
.chart-price-label{font-size:17px;font-weight:700;font-family:var(--mono);}
.chart-chg-label{font-size:12px;font-family:var(--mono);}
.chart-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.period-bar,.chart-type-bar{display:flex;background:var(--bg3);border:1px solid var(--bdr);border-radius:5px;overflow:hidden;}
.period-btn,.ctype-btn{padding:4px 10px;background:none;border:none;color:var(--txt3);cursor:pointer;font-size:11px;font-family:var(--font);transition:all .15s;}
.period-btn:hover,.ctype-btn:hover{color:var(--txt);background:rgba(255,255,255,.05);}
.period-btn.active,.ctype-btn.active{background:var(--acc);color:#fff;}
#chart-container{flex:1;min-height:300px;background:var(--bg);}
.chart-fund-bar{display:flex;gap:0;padding:8px 14px;background:var(--bg2);border-top:1px solid var(--bdr);flex-wrap:wrap;flex-shrink:0;}
.fund-item{padding:4px 14px;border-right:1px solid var(--bdr2);}
.fund-item:first-child{padding-left:0;}.fund-item:last-child{border-right:none;}
.fund-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--txt4);}
.fund-val{font-family:var(--mono);font-size:11px;font-weight:600;margin-top:1px;}

/* ── PLACEHOLDER ────────────────────────────────────────────── */
.placeholder-box{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px;gap:10px;}
.ph-icon{font-size:40px;opacity:.3;}.ph-text{font-size:16px;font-weight:600;color:var(--txt2);}.ph-sub{font-size:12px;color:var(--txt4);}

/* ── CONTEXT MENUS (col/row/pane) ─────────────────────────── */
.col-ctx{position:fixed;z-index:1000;background:var(--bg2);border:1px solid var(--bdr);border-radius:8px;padding:12px;min-width:170px;box-shadow:0 8px 32px rgba(0,0,0,.6);}
.col-ctx.hidden{display:none;}
.col-ctx-title{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--txt3);margin-bottom:8px;}
.col-ctx input[type=color]{width:100%;height:40px;border:1px solid var(--bdr);border-radius:4px;background:none;cursor:pointer;padding:2px;display:block;}
.col-ctx-btns{display:flex;gap:6px;margin-top:0;}
.ctx-btn-apply{flex:1;padding:5px;border-radius:4px;border:1px solid var(--acc);background:var(--acc);color:#fff;cursor:pointer;font-size:11px;font-family:var(--font);}
.ctx-btn-clear{flex:1;padding:5px;border-radius:4px;border:1px solid var(--bdr);background:var(--bg3);color:var(--txt2);cursor:pointer;font-size:11px;font-family:var(--font);}
.ctx-btn-apply:hover{background:var(--acc2);}.ctx-btn-clear:hover{color:var(--txt);}

/* ── FEATURE E: FREEZE PANES CONTEXT MENU ────────────────── */
.pane-ctx-item{
  padding:7px 10px;font-size:11px;color:var(--txt2);border-radius:4px;cursor:pointer;
  transition:background .1s;margin-bottom:2px;
}
.pane-ctx-item:hover{background:var(--bg3);color:var(--txt);}
.pane-ctx-unfreeze{color:var(--red)!important;margin-top:4px;border-top:1px solid var(--bdr);padding-top:8px!important;}
.pane-ctx-unfreeze:hover{background:rgba(244,67,54,0.1)!important;}

/* ── FEATURE F: ROW HEIGHT RESIZE HANDLE ─────────────────── */
.row-rh-handle{
  position:absolute;bottom:0;left:0;right:0;
  height:4px;cursor:row-resize;z-index:60;
  background:transparent;
}
.row-rh-handle:hover{background:rgba(38,198,218,0.4);}
/* BUG 3 FIX: DO NOT put position:relative here — it breaks sticky.
   position:sticky already acts as a containing block for absolute children. */

/* ── WEBSOCKET DOT ────────────────────────────────────────── */
.ws-wrap{display:inline-flex;align-items:center;margin-right:4px;}
.ws-dot{display:inline-block;width:8px;height:8px;border-radius:50%;transition:background .4s;}
.ws-dot.ws-live{background:#4caf50;box-shadow:0 0 0 0 rgba(76,175,80,.6);animation:ws-pulse 2.5s ease-in-out infinite;}
.ws-dot.ws-off{background:#666;}
@keyframes ws-pulse{0%{box-shadow:0 0 0 0 rgba(76,175,80,.6);}50%{box-shadow:0 0 0 5px rgba(76,175,80,0);}100%{box-shadow:0 0 0 0 rgba(76,175,80,0);}}

/* ── COLUMN RESIZE HANDLE ─────────────────────────────────── */
.col-resize-handle{position:absolute;right:-2px;top:0;bottom:0;width:8px;cursor:col-resize;z-index:20;background:transparent;user-select:none;touch-action:none;}
.col-resize-handle:hover,.col-resize-handle:active{background:rgba(79,195,247,0.5);}

/* ── EDITABLE CELLS ───────────────────────────────────────── */
.cell-editable{cursor:text!important;position:relative;}
.cell-editable:hover::after{content:'✏';position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:9px;opacity:0.4;pointer-events:none;}
.cell-edit{width:100%;background:rgba(255,255,255,0.1);border:1px solid var(--teal);border-radius:3px;color:var(--txt);font-size:11px;font-family:var(--font);padding:1px 4px;outline:none;box-sizing:border-box;}

/* ── SORT ARROWS ──────────────────────────────────────────── */
.sort-arrow{font-size:9px;margin-left:2px;opacity:0.35;color:var(--txt3);pointer-events:none;}
th.th-sorted .sort-arrow{opacity:1;color:var(--teal);}

/* ── ROW DRAG TO REORDER ──────────────────────────────────── */
.row-drag-handle{color:var(--txt4);cursor:grab;font-size:12px;opacity:0;transition:opacity 0.15s;margin-right:2px;user-select:none;}
tr.dr:hover .row-drag-handle{opacity:1;}
tr.dr.row-dragging{opacity:0.4;}
tr.dr.row-drag-over{border-top:2px solid var(--teal)!important;}

/* ── COL DRAG TO REORDER ──────────────────────────────────── */
th.col-drag-over{border-left:2px solid #4fc3f7!important;background:rgba(79,195,247,0.08)!important;}
th[draggable="true"]{cursor:grab;}th[draggable="true"]:active{cursor:grabbing;}

/* ── COLUMNS PANEL ────────────────────────────────────────── */
.col-panel{position:fixed;top:0;right:0;bottom:0;width:320px;background:var(--bg2);border-left:1px solid var(--bdr);z-index:500;display:flex;flex-direction:column;box-shadow:-8px 0 32px rgba(0,0,0,0.5);}
.col-panel.hidden{display:none;}
.col-panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--bdr);font-size:12px;font-weight:700;color:var(--txt);flex-shrink:0;}
.col-panel-close-btn{background:none;border:none;color:var(--txt3);cursor:pointer;font-size:14px;padding:2px 6px;border-radius:3px;}
.col-panel-close-btn:hover{color:var(--txt);background:var(--bg3);}
.col-panel-search-wrap{padding:8px 12px;border-bottom:1px solid var(--bdr2);flex-shrink:0;}
.col-search-input{width:100%;padding:6px 10px;background:var(--bg3);border:1px solid var(--bdr);border-radius:4px;color:var(--txt);font-size:11px;font-family:var(--font);outline:none;}
.col-search-input:focus{border-color:var(--acc);}
.col-panel-section-hdr{padding:8px 12px 4px;font-size:9px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;color:var(--txt4);flex-shrink:0;}
.col-available-list{flex:1;overflow-y:auto;padding:2px 0;max-height:45%;}
.col-available-list::-webkit-scrollbar{width:4px;}
.col-available-list::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:2px;}
.col-active-list{flex:1;overflow-y:auto;padding:2px 0;}
.col-active-list::-webkit-scrollbar{width:4px;}
.col-active-list::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:2px;}
.col-avail-item{padding:4px 12px;display:flex;align-items:center;font-size:11px;color:var(--txt2);transition:background 0.1s;}
.col-avail-item:hover{background:var(--bg3);}
.col-avail-item label{display:flex;align-items:center;gap:8px;cursor:pointer;width:100%;}
.col-avail-item input[type=checkbox]{accent-color:var(--teal);cursor:pointer;flex-shrink:0;}
.col-avail-item input[type=checkbox]:disabled{opacity:0.4;cursor:default;}
.pinned-badge{font-size:9px;color:var(--txt4);border:1px solid var(--bdr);border-radius:2px;padding:0 4px;margin-left:auto;}
.col-active-item{padding:5px 12px;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--txt2);transition:background 0.1s;cursor:grab;border-bottom:1px solid var(--bdr2);}
.col-active-item:hover{background:var(--bg3);}
.col-active-item.drag-over-item{border-top:2px solid var(--teal);}
.col-active-item.dragging{opacity:0.5;}
.col-drag-handle{color:var(--txt4);font-size:14px;flex-shrink:0;}
.col-active-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.col-remove-btn{background:none;border:none;color:var(--txt4);cursor:pointer;font-size:10px;padding:1px 4px;border-radius:2px;flex-shrink:0;}
.col-remove-btn:hover{color:var(--red);background:rgba(244,67,54,0.1);}

/* ── FEATURE B: ADD TICKER MODAL ──────────────────────────── */
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:2000;display:flex;align-items:center;justify-content:center;}
.modal.hidden{display:none;}
.modal-box{background:var(--bg2);border:1px solid var(--bdr);border-radius:8px;padding:20px;min-width:380px;max-width:480px;width:100%;box-shadow:0 12px 48px rgba(0,0,0,.7);}
.modal-hdr{font-size:14px;font-weight:600;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;color:var(--txt);}
.modal-close{background:none;border:none;color:var(--txt3);cursor:pointer;font-size:16px;padding:2px 6px;border-radius:3px;}
.modal-close:hover{color:var(--txt);background:var(--bg3);}
.modal-body{display:flex;flex-direction:column;gap:8px;}
#add-ticker-input{width:100%;background:var(--bg3);border:1px solid var(--bdr);border-radius:4px;color:var(--txt);padding:7px 10px;font-size:12px;outline:none;box-sizing:border-box;font-family:var(--font);}
#add-ticker-input:focus{border-color:var(--teal);}
#add-ticker-results{max-height:200px;overflow-y:auto;border:1px solid var(--bdr2);border-radius:4px;background:var(--bg3);}
#add-ticker-results:empty{display:none;}
.search-result{padding:7px 10px;cursor:pointer;border-bottom:1px solid var(--bdr2);font-size:11px;transition:background .1s;}
.search-result:last-child{border-bottom:none;}
.search-result:hover{background:var(--bg2);}
.search-result.sr-selected{background:rgba(38,198,218,0.12);outline:1px solid var(--teal);}
.sr-sym{font-weight:700;color:var(--teal);margin-right:8px;font-family:var(--mono);}
.modal-btns{display:flex;gap:8px;margin-top:6px;align-items:center;}
#add-ticker-wl{flex:1;background:var(--bg3);border:1px solid var(--bdr);border-radius:4px;color:var(--txt);padding:5px 8px;font-size:11px;font-family:var(--font);}
.btn-primary{background:var(--teal);color:#000;border:none;border-radius:4px;padding:7px 16px;cursor:pointer;font-size:11px;font-weight:700;font-family:var(--font);white-space:nowrap;}
.btn-primary:hover{opacity:.9;}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;}

/* ─── Login Modal ─────────────────────────────────────────── */
.login-tab { background:none; border:none; padding:6px 14px; color:var(--txt3); cursor:pointer; font-size:12px; border-bottom:2px solid transparent; margin-bottom:-1px; }
.login-tab.active { color:var(--teal); border-bottom-color:var(--teal); }
.modal-input { width:100%; background:var(--bg3); border:1px solid var(--bdr); border-radius:4px; color:var(--txt); padding:7px 10px; font-size:12px; outline:none; box-sizing:border-box; margin-bottom:8px; font-family:var(--font); }
.modal-input:focus { border-color:var(--teal); }
textarea.modal-input { resize:vertical; }

/* ─── Custom / Active Column Panel Items ─────────────────── */
.cp-row { display:flex; align-items:center; padding:3px 8px; font-size:11px; border-radius:3px; cursor:pointer; }
.cp-row:hover { background:var(--bg3); }
.cp-row label { display:flex; align-items:center; gap:6px; cursor:pointer; width:100%; }
.cp-active-row { display:flex; align-items:center; gap:6px; padding:4px 8px; font-size:11px; cursor:grab; border-radius:3px; }
.cp-active-row:hover { background:var(--bg3); }
.cp-active-row.dragging { opacity:0.4; }
.cp-active-row.drag-over { border-top:2px solid var(--teal); }
.cp-drag { color:var(--txt4); font-size:14px; cursor:grab; user-select:none; }
.cp-label { flex:1; }
.cp-remove { background:none; border:none; color:var(--txt4); cursor:pointer; font-size:14px; padding:0 2px; line-height:1; }
.cp-remove:hover { color:#f44336; }
.cp-custom-row { display:flex; align-items:center; gap:6px; padding:4px 8px; font-size:11px; border-radius:3px; }
.cp-custom-row:hover { background:var(--bg3); }
.cp-custom-lbl { flex:1; font-size:11px; color:var(--txt2); }
.cp-custom-type { font-size:9px; color:var(--txt4); background:var(--bg3); border-radius:2px; padding:1px 4px; }
.cp-custom-del { background:none; border:none; color:var(--txt4); cursor:pointer; font-size:12px; padding:0 2px; }
.cp-custom-del:hover { color:#f44336; }

/* ── FIX 5: TOOLBAR — BUG 2 FIX: always visible, smooth fade-in only ─── */
#top-reveal-zone {
  position: fixed; top: 0; left: 0; right: 0; height: 12px; z-index: 500;
  pointer-events: none;
}
#topbar-wrap {
  overflow: visible;
  flex-shrink: 0;
  /* smooth opacity transition instead of max-height jump */
  opacity: 1;
  transition: opacity 0.3s ease;
}
/* toolbar-hidden intentionally removed — toolbar is always visible */
/* Sidebar and main-area always stay in place */

/* ── LIGHT MODE SPECIFIC OVERRIDES (light is default now) ─── */
/* Table hover in light mode: subtle dark overlay instead of lighter */
#main-table tbody tr.dr:hover td { background: var(--bg3) !important; }
#main-table tbody tr.dr:hover td.s0 { background: var(--bg3) !important; }
/* period/chart-type button hover for light mode */
.period-btn:hover,.ctype-btn:hover{ background: var(--bg4); }

/* ── DARK MODE SPECIFIC OVERRIDES ─────────────────────────── */
body.dark #main-table tbody tr.dr:hover td { background: var(--bg3) !important; }
body.dark #main-table tbody tr.dr:hover td.s0 { background: var(--bg3) !important; }
body.dark .period-btn:hover, body.dark .ctype-btn:hover { background: rgba(255,255,255,.07); }

/* ── AUTOSAVE TOGGLE ────────────────────────────────────────── */
.autosave-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; color: var(--txt3); cursor: pointer;
  user-select: none; white-space: nowrap;
}
.autosave-label input[type="checkbox"] {
  accent-color: var(--teal); width: 12px; height: 12px; cursor: pointer;
}
.autosave-txt { font-size: 10px; }
.btn-save-dirty {
  background: rgba(255, 165, 0, 0.15) !important;
  border-color: #ffa500 !important;
  color: #ffa500 !important;
  animation: save-pulse 1.5s ease-in-out infinite;
}
@keyframes save-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,165,0,0); }
  50% { box-shadow: 0 0 6px 2px rgba(255,165,0,0.35); }
}

/* ── UNDO/REDO BUTTONS ──────────────────────────────────────── */
#btn-undo, #btn-redo { min-width: 60px; }
#btn-undo:disabled, #btn-redo:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── COLUMN CONTEXT MENU (wider for font section) ───────────── */
.col-ctx { min-width: 180px; }

/* ════════════════════════════════════════════════════════════
   INTEGRATIONS PANEL — Light mode override
   ════════════════════════════════════════════════════════════ */

/* Light-mode panel container */
#panel-integrations {
  background: #f3f4f6;
}
#panel-integrations .panel-inner.integrations-panel {
  background: transparent;
}

.integrations-panel { max-width: 980px; margin: 0 auto; padding: 28px 24px; }
.integ-header { margin-bottom: 28px; }
.integ-header .panel-title { color: #111827; font-size: 22px; }
.integ-subtitle { font-size: 13px; color: #6b7280; margin-top: 5px; }

/* Section headers: "CONNECTED SOURCES (2)" style */
.integ-section-title {
  font-size: 11px; font-weight: 600; color: #6b7280;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 14px; padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
  display: flex; align-items: center; gap: 8px;
}
.integ-section-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 6px;
  background: #e5e7eb; color: #374151; border-radius: 20px;
  font-size: 10px; font-weight: 700; line-height: 1;
}

.integ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.integ-loading { color: #9ca3af; font-size: 12px; padding: 24px; grid-column: 1/-1; }

/* Cards — light, white bg, left accent border, shadow */
.integ-card {
  display: flex; align-items: center; gap: 14px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: box-shadow .15s, border-color .15s;
  cursor: default;
  border-left-width: 3px;
}
.integ-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.12); border-color: #d1d5db; }
.integ-card.integ-soon { opacity: .6; }
.integ-card.integ-soon:hover { box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

/* Left border accent colors by source type */
.integ-accent-crypto   { border-left-color: #f59e0b; }
.integ-accent-brokerage{ border-left-color: #3b82f6; }
.integ-accent-manual   { border-left-color: #6366f1; }
.integ-accent-plaid    { border-left-color: #00b4d8; }

/* Logo/icon badge */
.integ-logo {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0; font-weight: 800;
  letter-spacing: -0.5px;
}

/* Keep old .integ-icon alias for compat */
.integ-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}

.integ-info { flex: 1; min-width: 0; }
.integ-name { font-size: 15px; font-weight: 600; color: #111827; }
.integ-desc { font-size: 12px; color: #6b7280; margin-top: 2px; }
.integ-sub  { font-size: 11px; color: #9ca3af; margin-top: 3px; }

/* Integration legend and sync/dropzone */
.integ-legend { font-size: 11px; color: #9ca3af; margin-bottom: 12px; }
.sync-time { font-size: 11px; color: #9ca3af; display: block; margin-top: 4px; }
.csv-dropzone {
  border: 2px dashed #d1d5db; border-radius: 8px; padding: 20px;
  text-align: center; color: #6b7280; cursor: pointer;
  font-size: 12px; margin-top: 8px; transition: border-color 0.2s;
}
.csv-dropzone:hover { border-color: #3b82f6; color: #3b82f6; }

.integ-status-area { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }

/* Status pills — replace tiny dots */
.status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.status-pill.connected {
  background: #d1fae5; color: #059669;
}
.status-pill.connected::before { content: '●'; font-size: 7px; }
.status-pill.disconnected {
  background: #f3f4f6; color: #9ca3af;
}
.status-pill.disconnected::before { content: '○'; font-size: 9px; }

/* Legacy dot aliases (kept for compat) */
.integ-dot-connected { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 5px #10b981; }
.integ-dot-disconnected { width: 8px; height: 8px; border-radius: 50%; background: #d1d5db; }

/* Action buttons — light-mode aware */
.integ-btn-connect {
  padding: 6px 14px; font-size: 11px; border-radius: 6px; cursor: pointer;
  border: 1px solid #0ea5e9; background: #e0f2fe; color: #0369a1;
  transition: all .15s; font-family: var(--font); font-weight: 600;
}
.integ-btn-connect:hover { background: #bae6fd; border-color: #0284c7; }

.integ-btn-disconnect {
  padding: 6px 14px; font-size: 11px; border-radius: 6px; cursor: pointer;
  border: 1px solid #e5e7eb; background: #f9fafb; color: #6b7280;
  transition: all .15s; font-family: var(--font); font-weight: 500;
}
.integ-btn-disconnect:hover { border-color: #ef4444; color: #dc2626; background: #fef2f2; }

.integ-btn-edit {
  padding: 4px 10px; font-size: 11px; border-radius: 6px; cursor: pointer;
  border: 1px solid #e5e7eb; background: #f9fafb; color: #6b7280;
  transition: all .15s; font-family: var(--font);
}
.integ-btn-edit:hover { border-color: #6366f1; color: #6366f1; background: #eef2ff; }

.integ-badge-soon { font-size: 10px; padding: 3px 8px; border-radius: 3px; background: #f3f4f6; color: #9ca3af; border: 1px solid #e5e7eb; }

/* Plaid action buttons — big primary buttons */
#plaid-action-btns .integ-btn-connect {
  padding: 10px 20px; font-size: 13px; font-weight: 700;
  border-radius: 8px; border: 1.5px solid #0284c7;
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  color: #ffffff; box-shadow: 0 2px 6px rgba(14,165,233,0.35);
}
#plaid-action-btns .integ-btn-connect:hover {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  box-shadow: 0 4px 12px rgba(14,165,233,0.45);
}
#plaid-action-btns .integ-btn-disconnect {
  padding: 10px 20px; font-size: 13px; font-weight: 600;
  border-radius: 8px; border: 1.5px solid #d1d5db;
  background: #ffffff; color: #374151;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
#plaid-action-btns .integ-btn-disconnect:hover {
  background: #f9fafb; border-color: #6366f1; color: #6366f1;
}

/* Manual positions table */
#manual-positions-table { background: #ffffff; }
#manual-positions-table thead th {
  background: #f9fafb; color: #6b7280; border-bottom: 1px solid #e5e7eb;
}
.manual-pos-row td {
  padding: 5px 8px; border-bottom: 1px solid #f3f4f6; vertical-align: middle;
}
.manual-pos-row input {
  width: 100%; background: #f9fafb; border: 1px solid #e5e7eb;
  border-radius: 4px; color: #111827; padding: 4px 7px; font-size: 12px;
  outline: none; font-family: var(--font); box-sizing: border-box;
}
.manual-pos-row input:focus { border-color: #6366f1; background: #fff; }
.manual-pos-del { padding: 3px 7px; background: none; border: none; color: #d1d5db; cursor: pointer; font-size: 15px; border-radius: 4px; }
.manual-pos-del:hover { color: #ef4444; background: #fef2f2; }

/* ════════════════════════════════════════════════════════════
   PORTFOLIO PANEL
   ════════════════════════════════════════════════════════════ */

.portfolio-panel { max-width: 1100px; margin: 0 auto; }

.portfolio-section { margin-bottom: 24px; }
.portfolio-section-hdr {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--bdr);
}
.portfolio-source-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 3px; text-transform: uppercase; letter-spacing: .5px; }
.badge-hl { background: rgba(100,200,255,.15); color: #64c8ff; border: 1px solid rgba(100,200,255,.3); }
.badge-fidelity { background: rgba(76,175,80,.12); color: var(--grn); border: 1px solid rgba(76,175,80,.3); }

.portfolio-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.portfolio-table th { background: var(--bg3); color: var(--txt3); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; padding: 8px 10px; border-bottom: 1px solid var(--bdr); text-align: right; }
.portfolio-table th:first-child, .portfolio-table th:nth-child(2), .portfolio-table th:nth-child(3) { text-align: left; }
.portfolio-table td { padding: 9px 10px; border-bottom: 1px solid var(--bdr2); text-align: right; color: var(--txt); }
.portfolio-table td:first-child, .portfolio-table td:nth-child(2), .portfolio-table td:nth-child(3) { text-align: left; }
.portfolio-table tr:hover td { background: rgba(255,255,255,.03); }
.portfolio-table .subtotal td { background: var(--bg3); font-weight: 700; font-size: 11px; }
.portfolio-table .grand-total td { background: var(--bg2); font-weight: 700; font-size: 12px; border-top: 2px solid var(--bdr); }
.p-grn { color: var(--grn); }
.p-red { color: var(--red); }
.p-neu { color: var(--txt3); }

.portfolio-no-data { text-align: center; padding: 60px 20px; }
.portfolio-no-data .pnd-icon { font-size: 48px; margin-bottom: 14px; }
.portfolio-no-data .pnd-msg { font-size: 14px; color: var(--txt2); font-weight: 600; }
.portfolio-no-data .pnd-sub { font-size: 12px; color: var(--txt3); margin-top: 6px; }

.hl-equity-bar { display: flex; gap: 20px; margin-bottom: 16px; padding: 14px 16px; background: var(--bg2); border: 1px solid var(--bdr); border-radius: 8px; }
.hl-equity-item { flex: 1; }
.hl-equity-label { font-size: 10px; color: var(--txt3); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.hl-equity-value { font-size: 18px; font-weight: 700; color: var(--txt); }
.hl-equity-sub { font-size: 10px; color: var(--txt4); margin-top: 2px; }

/* ════════════════════════════════════════════════════════════
   FIDELITY UPLOAD MODAL
   ════════════════════════════════════════════════════════════ */

.fidelity-instructions { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.fi-step { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--txt2); }
.fi-num { width: 22px; height: 22px; border-radius: 50%; background: rgba(38,198,218,.2); color: var(--teal); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.fidelity-drop-zone {
  border: 2px dashed var(--bdr); border-radius: 8px; padding: 28px 20px;
  text-align: center; cursor: pointer; transition: all .2s; background: var(--bg3);
}
.fidelity-drop-zone.dragging { border-color: var(--teal); background: rgba(38,198,218,.08); }
.fidelity-drop-zone:hover { border-color: var(--acc2); }
.fdz-icon { font-size: 32px; margin-bottom: 10px; }
.fdz-text { font-size: 13px; color: var(--txt2); font-weight: 600; }
.fdz-sub { font-size: 11px; color: var(--txt4); margin: 6px 0; }
.fdz-btn { display: inline-block; padding: 6px 18px; border-radius: 4px; background: var(--bg2); border: 1px solid var(--bdr); color: var(--txt2); font-size: 11px; cursor: pointer; font-family: var(--font); transition: all .15s; }
.fdz-btn:hover { border-color: var(--teal); color: var(--teal); }
.fdz-filename { margin-top: 8px; font-size: 11px; color: var(--teal); min-height: 16px; }

/* ── Watchlist Import Dropdown ── */
.wl-import-wrap { position: relative; display: inline-flex; align-items: center; margin-left: 2px; }
.wl-import-btn { background: none; border: 1px solid var(--bdr); border-radius: 4px; color: var(--txt3); font-size: 13px; padding: 1px 6px; cursor: pointer; height: 22px; line-height: 1; }
.wl-import-btn:hover { border-color: var(--teal); color: var(--teal); }
.wl-import-menu { position: absolute; top: calc(100% + 4px); left: 0; background: var(--bg2); border: 1px solid var(--bdr); border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.3); z-index: 2000; min-width: 220px; padding: 4px 0; }
.wl-import-menu.hidden { display: none; }
.wl-import-item { padding: 8px 14px; font-size: 12px; color: var(--txt2); cursor: pointer; white-space: nowrap; }
.wl-import-item:hover { background: var(--bg3); color: var(--teal); }

/* ── Toast notification ── */
.md-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--bg2); border: 1px solid var(--bdr); border-radius: 8px; padding: 10px 20px; font-size: 13px; color: var(--txt1); box-shadow: 0 4px 16px rgba(0,0,0,.4); z-index: 9999; animation: toast-in .2s ease; pointer-events: none; }
@keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ── All Markets Sections (ALLMKTS) ── */
.mkt-section { border: 1px solid var(--bdr); border-radius: 12px; margin-bottom: 16px; overflow: hidden; }
.mkt-section-header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--bg2); cursor: pointer; user-select: none; }
.mkt-section-header:hover { background: var(--bg3); }
.mkt-section-icon { font-size: 18px; }
.mkt-section-title { font-weight: 700; font-size: 15px; flex: 1; }
.mkt-section-source { font-size: 12px; color: var(--txt2); background: var(--bg3); padding: 3px 8px; border-radius: 20px; }
.mkt-section-toggle { background: none; border: none; color: var(--txt2); font-size: 14px; cursor: pointer; padding: 4px; transition: transform 0.2s; }
.mkt-section-body { padding: 8px 0; border-top: 1px solid var(--bdr); }
.mkt-section.collapsed .mkt-section-body { display: none; }
.mkt-section.collapsed .mkt-section-toggle { transform: rotate(-90deg); }
.price-table { border-collapse: collapse; font-size: 13px; }
.price-table th { padding: 8px 12px; text-align: left; color: var(--txt3); font-weight: 600; font-size: 11px; border-bottom: 1px solid var(--bdr); background: var(--bg2); }
.price-table td { padding: 7px 12px; border-bottom: 1px solid var(--bdr); }
.price-table tr:hover td { background: var(--bg2); }

/* ════════════════════════════════════════════════════════════
   SIDEBAR WORDMARK
   ════════════════════════════════════════════════════════════ */
.sidebar-wordmark {
  font-size: 11px;
  font-weight: 800;
  color: #00d4ff;
  letter-spacing: 1px;
  display: none;
  white-space: nowrap;
}
.sidebar:hover .sidebar-wordmark,
.sidebar.expanded .sidebar-wordmark {
  display: block;
}

/* ════════════════════════════════════════════════════════════
   IN-APP DOCUMENT VIEWER (EDGAR / PDF drawer)
   ════════════════════════════════════════════════════════════ */
#inapp-viewer {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(800px, 90vw);
  background: var(--bg1);
  border-left: 1px solid var(--bdr);
  box-shadow: -10px 0 40px rgba(0,0,0,0.3);
  display: none;
  flex-direction: column;
  z-index: 9999;
}
#inapp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bdr);
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   ECONOMIC INDICATORS PANEL
   ════════════════════════════════════════════════════════════ */
.econ-section { }
.econ-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--txt1);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.econ-source {
  font-size: 10px;
  font-weight: 400;
  color: var(--txt4);
  background: var(--bg3);
  padding: 2px 8px;
  border-radius: 12px;
  margin-left: 4px;
}
.econ-loading {
  color: var(--txt3);
  font-size: 12px;
  padding: 16px;
}
.econ-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.econ-card {
  background: var(--bg2);
  border: 1px solid var(--bdr);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.econ-card:hover {
  border-color: var(--teal);
  background: var(--bg3);
}
.econ-card-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--txt3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.econ-card-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--txt);
  margin-bottom: 4px;
}
.econ-card-unit {
  font-size: 11px;
  color: var(--txt3);
  margin-bottom: 8px;
}
.econ-card-trend {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.econ-card-trend.up { color: var(--pos); }
.econ-card-trend.down { color: var(--neg); }
.econ-card-trend.flat { color: var(--txt3); }
.econ-card-date {
  font-size: 10px;
  color: var(--txt4);
  margin-top: 4px;
}
.econ-card-sparkline {
  height: 32px;
  margin-top: 8px;
  overflow: hidden;
}
.econ-sparkline-svg { width: 100%; height: 32px; }

/* Yield curve grid */
.econ-yield-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.econ-yield-pill {
  background: var(--bg2);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  padding: 8px 14px;
  min-width: 72px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s;
}
.econ-yield-pill:hover { border-color: var(--teal); }
.econ-yield-label {
  font-size: 10px;
  color: var(--txt3);
  font-weight: 600;
  margin-bottom: 4px;
}
.econ-yield-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--teal);
}

/* ════════════════════════════════════════════════════════════
   v11 — Change 1: Header Branding
   ════════════════════════════════════════════════════════════ */
#topbar-brand { display: none !important; }
#brand-logo { display: block !important; border-radius: 50%; box-shadow: 0 0 8px rgba(126,238,110,0.4); }
#brand-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
  font-family: -apple-system, 'SF Pro Display', 'Segoe UI', sans-serif;
}

/* ════════════════════════════════════════════════════════════
   v11 — Change 2: Inline Watchlist Tabs in Topbar
   ════════════════════════════════════════════════════════════ */
#topbar {
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0;
  padding: 0 10px;
  overflow: visible;
}
#topbar-left {
  display: contents !important; /* children go directly into grid cells */
}
#topbar-brand {
  grid-column: 1;
  display: none !important;
}
#wl-tabs-inline {
  grid-column: 2;
  /* display controlled by JS switchPanel — no !important here */
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
}
#topbar-right {
  grid-column: 3;
}
#tb-title, #tb-subtitle { display: none !important; }
#wl-tabs-inline {
  /* display toggled by JS — no hardcoded display here */
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
#wl-tabs-inline::-webkit-scrollbar { display: none; }
/* Tabs inside topbar: slightly smaller to fit */
#wl-tabs-inline .wl-tab {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 4px;
  border-bottom: none;
  margin: 0 1px;
}
#wl-tabs-inline .wl-tab.active {
  background: rgba(14,165,233,0.15);
  color: var(--teal);
  border: 1px solid rgba(14,165,233,0.3);
}
#wl-tabs-inline #btn-add-watchlist {
  flex-shrink: 0;
}
/* Keep topbar-right tight */
#topbar-right { display: flex; align-items: center; gap: 2px; flex-shrink: 0; overflow: visible; }
/* Compact topbar buttons */
#topbar-right .tb-btn { padding: 5px 12px !important; font-size: 13px !important; height: 32px !important; }
#refresh-ts { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
#ws-dot { display: none; }

/* ════════════════════════════════════════════════════════════
   v11 — Change 4: Watchlist Tab Drag-and-Drop
   ════════════════════════════════════════════════════════════ */
.wl-tab.drag-over {
  border-left: 3px solid #0ea5e9 !important;
  background: rgba(14,165,233,0.15) !important;
}
.wl-tab[draggable] { cursor: grab; }
.wl-tab[draggable]:active { cursor: grabbing; }

/* ════════════════════════════════════════════════════════════
   v11 — Change 7: Koyfin-style Chart Panel
   ════════════════════════════════════════════════════════════ */
#panel-chart {
  display: none;
  flex-direction: column;
  overflow: hidden;
}
#panel-chart.active {
  display: flex !important;
}
#chart-toolbar {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--bdr);
  background: var(--bg2);
  flex-shrink: 0;
}
#chart-tickers-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
#chart-ticker-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chart-chip {
  padding: 3px 10px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
#chart-add-input {
  padding: 4px 10px;
  border: 1px solid var(--bdr);
  border-radius: 6px;
  background: var(--bg3);
  color: var(--txt);
  font-size: 13px;
  width: 120px;
  outline: none;
  font-family: var(--font);
}
#chart-add-input:focus { border-color: var(--teal); }
#chart-add-btn {
  padding: 4px 12px;
  background: var(--teal);
  color: #000;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
}
body.dark #chart-add-btn { color: #fff; }
#chart-controls-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#chart-ranges { display: flex; gap: 2px; }
.cr-btn {
  padding: 3px 8px;
  border: 1px solid var(--bdr);
  border-radius: 4px;
  background: none;
  color: var(--txt2);
  cursor: pointer;
  font-size: 11px;
  font-family: var(--font);
}
.cr-btn:hover { color: var(--txt); border-color: var(--acc); }
.cr-btn.active { background: var(--teal); color: #000; border-color: var(--teal); }
body.dark .cr-btn.active { color: #fff; }
#chart-type-btns, #chart-indicator-btns { display: flex; gap: 3px; }
.ct-btn, .ci-btn {
  padding: 3px 8px;
  border: 1px solid var(--bdr);
  border-radius: 4px;
  background: none;
  color: var(--txt2);
  cursor: pointer;
  font-size: 11px;
  font-family: var(--font);
}
.ct-btn:hover, .ci-btn:hover { color: var(--txt); border-color: var(--acc); }
.ct-btn.active, .ci-btn.active { background: var(--acc); color: #fff; border-color: var(--acc); }
#chart-perf-mode {
  padding: 3px 10px;
  border: 1px solid var(--bdr);
  border-radius: 4px;
  background: none;
  color: var(--txt2);
  cursor: pointer;
  font-size: 11px;
  font-family: var(--font);
}
#chart-perf-mode.active { background: #f59e0b; color: #fff; border-color: #f59e0b; }
#chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 6px 14px;
  background: var(--bg2);
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
  min-height: 30px;
}
.chart-legend-item {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--txt);
}
#chart-main {
  flex: 1;
  overflow: hidden;
  min-height: 200px;
}

/* ════════════════════════════════════════════════════════════
   v12 — TradingView Chart + Topbar Tab Fix
   ════════════════════════════════════════════════════════════ */

/* ── Watchlist tab styles (override v11) ───────────────────── */
#wl-tabs-inline .wl-tab {
  display: flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: 1px solid transparent;
  color: var(--txt2);
  gap: 4px;
}
#wl-tabs-inline .wl-tab.active {
  background: rgba(14,165,233,0.12);
  border-color: rgba(14,165,233,0.3);
  color: var(--teal);
}

/* ── TradingView chart panel layout ────────────────────────── */
#panel-chart {
  display: none;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}
#panel-chart.active {
  display: flex !important;
}
#chart-toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--bdr);
  background: var(--bg1);
}
#tv-chart-container {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
#tradingview_chart {
  width: 100% !important;
  height: 100% !important;
}
/* Hide old chart button styles */
.cr-btn, .ct-btn, .ci-btn,
#chart-ranges, #chart-indicator-btns, #chart-type-btns,
#chart-legend, #chart-perf-mode,
#chart-tickers-row, #chart-controls-row, #chart-main {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* ── Market Pulse ──────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════ */
#panel-markets { display:flex; flex-direction:column; overflow:hidden; height:100%; }
#market-pulse-header { display:flex; align-items:center; gap:12px; padding:6px 12px; border-bottom:1px solid var(--bdr); flex-shrink:0; }
#market-pulse-header h2 { font-size:14px; font-weight:700; margin:0; }
.mp-ts { font-size:11px; color:var(--txt3); }
/* ── Perf chart tf buttons ── */
.perf-tf-group { display:flex; gap:2px; margin-left:8px; }
.mp-perf-tf { font-size:10px; padding:1px 7px; background:var(--bg3); border:1px solid var(--bdr); border-radius:3px; color:var(--txt2); cursor:pointer; }
.mp-perf-tf.active { background:var(--teal); border-color:var(--teal); color:#fff; }
.mp-perf-tf:hover:not(.active) { background:var(--bg4,#222); }
/* checkbox in indices table */
.mp-perf-check { width:14px; height:14px; cursor:pointer; accent-color:var(--teal); }
/* ── News panel enhancements ── */
#news-cat-tabs { display:flex; gap:2px; flex-wrap:wrap; padding:6px 10px; border-bottom:1px solid var(--bdr); background:var(--bg2); flex-shrink:0; }
.news-cat-tab { font-size:11px; padding:3px 10px; background:none; border:1px solid var(--bdr); border-radius:4px; color:var(--txt2); cursor:pointer; white-space:nowrap; }
.news-cat-tab.active { background:var(--teal); border-color:var(--teal); color:#fff; }
.news-cat-tab:hover:not(.active) { background:var(--bg3); }
#news-view-toggle { font-size:11px; padding:3px 8px; background:var(--bg3); border:1px solid var(--bdr); border-radius:4px; color:var(--txt2); cursor:pointer; margin-left:auto; white-space:nowrap; }
/* News list view */
#news-list-panel { flex:1; overflow-y:auto; padding:0; }
.news-section-hdr { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--txt3); padding:8px 12px 4px; border-bottom:1px solid var(--bdr); background:var(--bg2); position:sticky; top:0; z-index:2; }
.news-list-item { display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:8px 12px; border-bottom:1px solid var(--bdr); cursor:pointer; min-height:44px; box-sizing:border-box; }
.news-list-item:hover { background:var(--bg3,#1e2330); }
.news-list-headline { font-size:12px; color:var(--txt1); line-height:1.35; flex:1; min-width:0; }
.news-list-meta { display:flex; align-items:center; gap:4px; white-space:nowrap; flex-shrink:0; font-size:10px; color:var(--txt3); }
.news-list-src { font-weight:500; color:var(--txt2); }
/* News loading */
.news-cat-loading { padding:20px; text-align:center; color:var(--txt3); font-size:12px; }
/* ── 4-col Koyfin layout ── */
#mp-two-col { display:grid; grid-template-columns: 1fr 2fr 1fr 1fr; grid-template-rows: 1fr auto; gap:2px; padding:2px; flex:1; min-height:0; overflow:hidden; }
.mp-col { display:flex; flex-direction:column; gap:2px; min-height:0; overflow:hidden; }
#mp-col2 #mp-norm-chart-card { flex:0 0 180px; min-height:0; max-height:180px; }
#mp-bottom-row { grid-column:1/-1; display:flex; gap:2px; width:100%; }
#mp-bottom-row #mp-equity-factors { flex:1; min-width:0; }
.mp-card { background: var(--bg2); border:none; border-bottom: 1px solid var(--bdr); border-right: 1px solid var(--bdr); border-radius: 0; overflow: hidden; display: flex; flex-direction: column; }
/* News card: scrollable, fills available col-2 height */
#mp-news-card { flex:1; max-height:none; }
#mp-news-list { overflow-y:auto; flex:1; }
/* Norm chart — flex fills remaining col-2 height */
#norm-chart-wrap { padding:4px 6px; flex:1; min-height:0; position:relative; }
#norm-chart-canvas { width:100% !important; height:100% !important; }
/* Period tabs */
.norm-period-tabs { display:flex; gap:1px; margin-left:auto; }
.norm-tab { font-size:9px; padding:1px 5px; background:none; border:1px solid var(--bdr); border-radius:3px; color:var(--txt3); cursor:pointer; line-height:16px; }
.norm-tab:hover { background:var(--bg3); color:var(--txt2); }
.norm-tab-active { background:var(--teal); border-color:var(--teal); color:#fff; }
/* Colored dot */
.mp-dot { display:inline-block; width:7px; height:7px; border-radius:50%; flex-shrink:0; }
/* Global Yields table */
#mp-global-yields { overflow-x:auto; }
.gy-table { width:100%; border-collapse:collapse; font-size:11px; }
.gy-table th { font-size:9px; padding:2px 4px; color:var(--txt3); text-transform:uppercase; border-bottom:1px solid var(--bdr); font-weight:500; text-align:right; }
.gy-table th:first-child { text-align:left; }
.gy-table td { padding:2px 4px; border-bottom:1px solid var(--bdr); text-align:right; font-family:monospace; font-size:11px; }
.gy-table td:first-child { text-align:left; font-family:inherit; color:var(--txt2); font-weight:500; white-space:nowrap; max-width:100px; overflow:hidden; text-overflow:ellipsis; }
.gy-table tr:last-child td { border-bottom:none; }
.gy-table tr:hover td { background:var(--bg3); cursor:pointer; }
/* ── Legacy grid fallback (no longer used, kept for safety) ── */
#market-pulse-grid { display:grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: min-content; gap:2px; padding:2px; overflow-y:auto; flex:1; min-height:0; align-items:start; }
/* Tighter yield curve inner layout */
#mp-yields .mp-card-header { padding: 2px 6px; }
#mp-yields-matrix { padding: 0 !important; }
#mp-yields-matrix > div { gap: 0 !important; }
.yield-matrix { width:auto; border-collapse:collapse; font-size:11px; min-width:200px; }
.yield-matrix th { padding:3px 6px; color:var(--txt3); font-weight:500; font-size:10px; text-transform:uppercase; border-bottom:1px solid var(--bdr); text-align:right; }
.yield-matrix th:first-child { text-align:left; width:80px; }
.yield-matrix td { padding:2px 6px; border-bottom:1px solid var(--bdr); text-align:right; color:var(--txt1); width:60px; }
.yield-matrix td:first-child { text-align:left; font-weight:600; color:var(--txt2); width:80px; }
.yield-matrix tr:last-child td { border-bottom:none; }
.yield-matrix tr:hover td { background:var(--bg2); }
.yield-matrix .us-row td { color:var(--txt1); font-weight:600; background:rgba(14,165,233,0.04); }
.mp-card-header { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px; border-bottom: 1px solid var(--bdr); flex-shrink: 0; }
.mp-card-title { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--txt3); }
.mp-edit-btn { background:none; border:none; cursor:pointer; color:var(--txt3); font-size:13px; padding:2px 4px; border-radius:3px; }
.mp-edit-btn:hover { color:var(--teal); background:var(--bg3); }
.mp-table { width: 100%; border-collapse: collapse; font-size: 11px; line-height: 18px; }
.mp-table th { font-size: 9px; padding: 1px 4px; color: var(--txt3); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--bdr); font-weight: 500; }
.mp-table td { padding: 1px 4px; border-bottom: 1px solid var(--bdr); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.mp-table tr:last-child td { border-bottom: none; }
.mp-table tr:hover td { background: var(--bg2); }
/* ── Yield Curve compact table rows ── */
#mp-yields-matrix table tr:hover td { background: var(--bg3); }
#mp-yields-matrix table tr { border-bottom: 1px solid var(--bdr); }
#mp-yields-matrix table tr:last-child { border-bottom: none; }
/* ── Pinned Predictions in Watchlist ── */
.pred-pin-row { display: flex; align-items: center; justify-content: space-between; padding: 3px 0; font-size: 12px; }
.mp-news-item { padding:3px 8px; border-bottom:1px solid var(--bdr); }
.mp-news-item:hover { background:var(--bg2); }
.mp-news-title { font-size:11px; line-height:1.3; margin-bottom:0; }
.mp-news-meta { font-size:10px; color:var(--txt3); display:inline; margin-left:4px; }
.mp-news-title-line { display:flex; align-items:baseline; flex-wrap:wrap; gap:0; }
.mp-pred-item { padding:8px 12px; border-bottom:1px solid var(--bdr); }
.mp-pred-title { font-size:11px; margin-bottom:3px; }
.mp-pred-odds { font-size:12px; font-weight:600; }
.mp-badge-new { font-size:9px; background:#10b981; color:#fff; padding:1px 5px; border-radius:3px; font-weight:700; letter-spacing:.5px; }
#mp-edit-modal { position:fixed; inset:0; z-index:5000; display:flex; align-items:center; justify-content:center; }
#mp-edit-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.5); }
#mp-edit-box { position:relative; background:var(--bg1); border:1px solid var(--bdr); border-radius:12px; padding:20px; width:320px; z-index:1; }
#mp-edit-title { font-weight:700; margin-bottom:8px; }
#mp-edit-tickers { width:100%; height:120px; background:var(--bg2); border:1px solid var(--bdr); border-radius:6px; padding:8px; color:var(--txt); font-size:12px; font-family:monospace; resize:vertical; box-sizing:border-box; }
.pos { color: #10b981; }
.neg { color: #ef4444; }
.positive { color: var(--grn); }
.negative { color: var(--red); }
.txt-right { text-align: right; }
.txt-sm { font-size: 11px; }
.txt-muted { color: var(--txt3); }
.fw6 { font-weight: 600; }

/* ── Enhanced Market Movers ────────────────────────────────── */
/* ── Market Movers 2x2 Grid ─────────────────────────────────── */
#panel-movers { display:flex; flex-direction:column; height:100%; }
#movers-header { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-bottom:1px solid var(--bdr); flex-shrink:0; }
#movers-header h2 { font-size:18px; font-weight:700; margin:0; }
#movers-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#movers-hours { display:flex; gap:4px; }
.mh-btn { padding:4px 10px; border:1px solid var(--bdr); border-radius:12px; background:none; color:var(--txt2); cursor:pointer; font-size:11px; white-space:nowrap; }
.mh-btn.active { background:var(--teal); color:#fff; border-color:var(--teal); }
.mh-btn:hover:not(.active) { background:var(--bg3); }
#movers-grid { display:grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap:4px; padding:8px; flex:1; overflow-y:auto; }
.movers-box { background:var(--bg1); border:2px solid var(--teal); border-radius:6px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 0 0 1px rgba(14,165,233,0.15); }
.movers-box-title { font-size:12px; font-weight:700; padding:6px 10px; background:var(--bg2); border-bottom:1px solid var(--bdr); color:var(--txt1); letter-spacing:0.3px; }
.movers-box-body { display:grid; grid-template-columns:1fr 1fr; flex:1; overflow:hidden; }
.movers-half { overflow-y:auto; }
.movers-half-header { font-size:10px; font-weight:700; padding:4px 8px; text-align:center; letter-spacing:0.5px; color:#fff; }
.movers-mini-table { width:100%; border-collapse:collapse; font-size:11px; }
.movers-mini-table th { padding:2px 6px; color:var(--txt3); font-weight:500; font-size:9px; text-transform:uppercase; border-bottom:1px solid var(--bdr); }
.movers-mini-table td { padding:3px 6px; border-bottom:1px solid var(--bdr); color:var(--txt1); white-space:nowrap; }
.movers-mini-table tr:last-child td { border-bottom:none; }
.movers-mini-table tr:hover td { background:var(--bg2); cursor:pointer; }

/* ── News Source Tabs ──────────────────────────────────────── */
#news-source-tabs { display:flex; gap:4px; padding:8px 12px; border-bottom:1px solid var(--bdr); background:var(--bg2); overflow-x:auto; flex-shrink:0; }
.news-src-btn { padding:3px 10px; border:1px solid var(--bdr); border-radius:12px; background:none; color:var(--txt2); cursor:pointer; font-size:11px; white-space:nowrap; }
.news-src-btn.active { background:var(--teal); color:#fff; border-color:var(--teal); }
.news-src-btn:hover:not(.active) { background:var(--bg3); }

/* ── Equity Style Box ──────────────────────────────────────── */
.style-box-grid { display:grid; grid-template-columns: 60px repeat(3, 1fr); grid-template-rows: auto repeat(3, 44px); gap:3px; width:100%; }
.style-box-header { font-size:10px; font-weight:600; text-align:center; color:var(--txt3); padding:2px; }
.style-box-row-label { font-size:10px; font-weight:600; color:var(--txt3); display:flex; align-items:center; justify-content:flex-end; padding-right:6px; }
.style-box-cell { border-radius:5px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-weight:700; font-size:13px; cursor:pointer; transition:opacity .15s; }
.style-box-cell:hover { opacity:.85; }
.style-box-cell .cell-etf { font-size:9px; color:rgba(255,255,255,0.6); margin-top:2px; }

/* ── Prediction Markets ─────────────────────────────────────── */
.mp-pred-item { padding:7px 12px; border-bottom:1px solid var(--bdr); display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mp-pred-item:last-child { border-bottom:none; }
.mp-pred-title { font-size:12px; color:var(--txt1); flex:1; line-height:1.3; }
.mp-pred-odds { display:flex; gap:6px; font-size:11px; font-weight:700; white-space:nowrap; }
.mp-pred-vol { font-size:10px; color:var(--txt3); white-space:nowrap; }
.pred-tab.active { background:var(--teal)!important; color:#fff!important; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) { #mp-two-col { grid-template-columns:1fr 1fr; grid-template-rows:auto; } #mp-bottom-row { flex-direction:column; } #movers-grid { grid-template-columns:1fr; grid-template-rows:none; } }
@media (max-width: 600px) { #mp-two-col { display:flex; flex-direction:column; overflow-y:auto; } .mp-col { overflow:visible; } }

/* ─── TickerPicker Component ──────────────────────────────── */
.tp-tags { display:flex; flex-wrap:wrap; gap:4px; min-height:36px; padding:6px 8px; background:var(--bg2); border:1px solid var(--bdr); border-radius:6px; cursor:text; margin-bottom:6px; }
.tp-tag { display:inline-flex; align-items:center; gap:3px; background:rgba(14,165,233,0.15); border:1px solid #0ea5e9; color:#0ea5e9; padding:2px 6px 2px 8px; border-radius:12px; font-size:11px; font-weight:600; }
.tp-tag-x { cursor:pointer; font-size:11px; color:#0ea5e9; opacity:.7; padding:0 2px; line-height:1; }
.tp-tag-x:hover { opacity:1; color:#ef4444; }
.tp-search-wrap { position:relative; }
.tp-input { width:100%; padding:6px 10px; background:var(--bg2); border:1px solid var(--bdr); border-radius:6px; color:var(--txt1); font-size:12px; outline:none; box-sizing:border-box; }
.tp-input:focus { border-color:var(--teal); }
.tp-dropdown { position:absolute; left:0; right:0; top:calc(100% + 2px); background:var(--bg1); border:1px solid var(--bdr); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,0.3); z-index:9999; max-height:240px; overflow-y:auto; }
.tp-option { display:flex; align-items:center; gap:8px; padding:7px 10px; cursor:pointer; border-bottom:1px solid var(--bdr); }
.tp-option:last-child { border-bottom:none; }
.tp-option:hover { background:var(--bg2); }
.tp-opt-sym { font-weight:700; font-size:12px; color:var(--teal); min-width:64px; flex-shrink:0; }
.tp-opt-name { font-size:11px; color:var(--txt2); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tp-opt-exch { font-size:10px; color:var(--txt3); flex-shrink:0; }
.tp-no-results { padding:10px 12px; text-align:center; color:var(--txt3); font-size:12px; }
/* Inline autocomplete for plain inputs (chart, watchlist) */
.tp-inline-wrap { position:relative; display:inline-block; }
.tp-inline-dropdown { position:absolute; left:0; min-width:260px; top:calc(100% + 2px); background:var(--bg1); border:1px solid var(--bdr); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.35); z-index:9999; max-height:240px; overflow-y:auto; }

/* ─── NEWS 2×2 GRID ─────────────────────────────────────── */
#panel-news { display:flex; flex-direction:column; height:100%; overflow:hidden; }
#news-2x2-grid { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:8px; padding:10px; overflow:hidden; }
.news-pane { background:var(--bg1); border:1px solid var(--bdr); border-radius:8px; display:flex; flex-direction:column; overflow:hidden; }
.news-pane-header { display:flex; align-items:center; gap:6px; padding:6px 10px; border-bottom:1px solid var(--bdr); background:var(--bg2); flex-shrink:0; }
.news-pane-header select { font-size:11px; padding:2px 4px; background:var(--bg1); border:1px solid var(--bdr); border-radius:4px; color:var(--txt1); cursor:pointer; }
.news-pane-list { flex:1; overflow-y:auto; }
.news-pane-item { padding:7px 10px; border-bottom:1px solid var(--bdr); cursor:pointer; display:flex; flex-direction:column; gap:2px; }
.news-pane-item:last-child { border-bottom:none; }
.news-pane-item:hover { background:var(--bg2); }
.news-pane-title { font-size:11px; font-weight:500; color:var(--txt1); line-height:1.3; }
.news-pane-meta { font-size:10px; color:var(--txt3); display:flex; gap:6px; }
.news-pane-loading { padding:12px; text-align:center; color:var(--txt3); font-size:11px; }
@media (max-width:900px) { #news-2x2-grid { grid-template-columns:1fr; grid-template-rows:none; } }

/* ─── PREDICTION MARKETS 2-COL LAYOUT ───────────────────── */
.pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pm-col-label { font-size: 10px; font-weight: 700; letter-spacing: 0.8px; color: var(--txt2); margin-bottom: 3px; text-transform: uppercase; padding-bottom: 2px; border-bottom: 1px solid var(--bdr); }
.pm-row { display: flex; align-items: center; gap: 4px; padding: 3px 0; border-bottom: 1px solid var(--bdr); font-size: 11px; }
.pm-q { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--txt1); }
.pm-yes { background: #16a34a; color: #fff; border: none; border-radius: 4px; padding: 2px 6px; font-size: 11px; font-weight: 600; cursor: default; }
.pm-no { background: #dc2626; color: #fff; border: none; border-radius: 4px; padding: 2px 6px; font-size: 11px; font-weight: 600; cursor: default; }
.pm-vol { font-size: 11px; color: var(--txt3); white-space: nowrap; }

/* ─── OPTIONS PANEL ──────────────────────────────────────── */
.opts-search-wrap { position: relative; display: inline-block; }
.opts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.opts-section-title { font-size: 11px; font-weight: 700; letter-spacing: 0.8px; color: var(--txt2); text-transform: uppercase; margin-bottom: 8px; }
.opts-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.opts-table th { font-size: 10px; font-weight: 600; color: var(--txt3); text-transform: uppercase; padding: 4px 6px; border-bottom: 1px solid var(--bdr); text-align: right; }
.opts-table th:first-child { text-align: left; }
.opts-table td { padding: 5px 6px; border-bottom: 1px solid var(--bdr); text-align: right; color: var(--txt1); }
.opts-table td:first-child { text-align: left; }
.opts-table tr:hover { background: rgba(14,165,233,0.06); cursor: pointer; }
.opts-badge-call { background: #16a34a; color: #fff; border-radius: 3px; padding: 1px 5px; font-size: 10px; font-weight: 700; }
.opts-badge-put { background: #dc2626; color: #fff; border-radius: 3px; padding: 1px 5px; font-size: 10px; font-weight: 700; }
.opts-itm { background: rgba(22,163,74,0.08); }
.opts-itm-put { background: rgba(220,38,38,0.08); }
.opts-chain-wrap { margin-top: 8px; }
.opts-chain-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.opts-expiry-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.opts-expiry-tab { padding: 3px 10px; border-radius: 12px; border: 1px solid var(--bdr); font-size: 11px; cursor: pointer; background: var(--bg2); color: var(--txt2); }
.opts-expiry-tab.active { background: var(--teal); color: #fff; border-color: var(--teal); }
.opts-chain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.opts-signal-fire { color: #f97316; font-weight: 700; }
.opts-at-mid { color: var(--txt3); }

/* ═══════════════════════════════════════════════════════════
   PHASE 2: SPLIT DASHBOARD (WEI, Sectors, Commodities, FX, Factors)
   ═══════════════════════════════════════════════════════════ */

/* Container: full-height flex split */
.sd-container {
  display: flex;
  height: calc(100vh - var(--topbar-h, 80px));
  overflow: hidden;
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

/* LEFT PANE: ~40% width, scrollable data table */
.sd-left {
  width: 40%;
  min-width: 320px;
  max-width: 480px;
  border-right: 1px solid #e8eaf0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sd-left-header {
  padding: 10px 14px 8px;
  border-bottom: 1px solid #e8eaf0;
  flex-shrink: 0;
  background: #fafbfc;
}

.sd-title {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a2e;
  letter-spacing: -0.2px;
}

.sd-table-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* LEFT TABLE */
.sd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.sd-table thead th {
  position: sticky;
  top: 0;
  background: #f8f9fa;
  padding: 4px 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
  border-bottom: 1px solid #e8eaf0;
  white-space: nowrap;
  z-index: 2;
}

.sd-table tbody tr.sd-group-row {
  background: #f8f9fa;
  border-top: 1px solid #e8eaf0;
  border-bottom: 1px solid #e8eaf0;
}

.sd-group-name {
  font-size: 10px;
  font-weight: 700;
  color: #888;
  letter-spacing: 0.8px;
  padding: 4px 10px;
  display: block;
  text-transform: uppercase;
}

.sd-table tbody tr.sd-row {
  border-bottom: 1px solid #f0f1f5;
  transition: background 0.1s;
  cursor: pointer;
}

.sd-table tbody tr.sd-row:hover {
  background: #f0f7ff;
}

.sd-table tbody tr.sd-row.selected {
  background: #f0f7ff;
}

.sd-table tbody tr.sd-row.hl {
  background: #e8f0fe;
  outline: 2px solid #1a73e8;
  outline-offset: -1px;
}

.sd-table td {
  padding: 4px 6px;
  height: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.sd-check {
  width: 12px;
  height: 12px;
  cursor: pointer;
  margin: 0;
  vertical-align: middle;
}

.sd-name {
  color: #1a1a2e;
  font-weight: 500;
  font-size: 12px;
  max-width: 180px;
}

.sd-ticker {
  color: #1a73e8;
  font-size: 11px;
  font-weight: 600;
}

.sd-price {
  color: #1a1a2e;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.sd-pct {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sd-pct.pos { color: #16a34a; }
.sd-pct.neg { color: #dc2626; }
.sd-pct.neu { color: #888; }

/* RIGHT PANE: charts area */
.sd-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  background: #fff;
}

/* Period tabs */
.sd-period-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px 12px 6px;
  border-bottom: 1px solid #e8eaf0;
  flex-shrink: 0;
  background: #fafbfc;
}

.sd-tab {
  padding: 3px 9px;
  border: none;
  background: none;
  font-size: 12px;
  font-weight: 500;
  color: #888;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s;
}

.sd-tab:hover {
  background: #e8eaf0;
  color: #333;
}

.sd-tab.active {
  background: #1a73e8;
  color: #fff;
  font-weight: 600;
}

/* Chart section headers */
.sd-chart-header,
.sd-rankings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 4px;
  flex-shrink: 0;
}

.sd-chart-title {
  font-size: 12px;
  font-weight: 700;
  color: #333;
  letter-spacing: 0.2px;
}

/* Chart canvases */
.sd-chart-wrap {
  flex: 3;
  min-height: 0;
  padding: 4px 12px;
  position: relative;
  transition: opacity 0.3s;
}

.sd-chart-wrap canvas,
.sd-rank-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

.sd-rank-wrap {
  flex: 2;
  min-height: 0;
  padding: 4px 12px 8px;
  border-top: 1px solid #f0f1f5;
}

/* Loading state */
.sd-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #888;
  font-size: 13px;
}

/* Responsive: stack on narrow screens */
@media (max-width: 900px) {
  .sd-container { flex-direction: column; }
  .sd-left { width: 100%; max-width: none; height: 300px; border-right: none; border-bottom: 1px solid #e8eaf0; }
  .sd-right { flex: 1; }
}

/* ═══════════════════════════════════════════════════════
   PHASE 3: SPECIALIZED PANELS
   ═══════════════════════════════════════════════════════ */

/* ── Global Yields ─────────────────────────────────────── */
.yields-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.yields-top {
  display: flex;
  flex: 0 0 340px;
  min-height: 0;
  border-bottom: 1px solid var(--bdr);
}
.yields-left {
  width: 320px;
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--bdr);
  overflow: hidden;
}
.yields-table-wrap {
  flex: 1;
  overflow-y: auto;
}
.yields-table {
  width: auto;
  border-collapse: collapse;
  font-size: 12px;
}
.yields-table thead th {
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 700;
  color: var(--txt3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--bdr);
  background: var(--bg2);
  position: sticky;
  top: 0;
  z-index: 1;
}
.yields-row:hover { background: rgba(14,165,233,0.06); }
.yields-row td { padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.yields-country { font-size: 12px; color: var(--txt1); }
.yields-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.yields-chart-wrap {
  flex: 1;
  padding: 12px;
  min-height: 0;
}
.yields-bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 8px 0 0;
}
.yields-bottom > #yields-matrix-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 8px;
}

/* Yield Matrix */
.yields-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.yields-matrix-table thead th {
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 700;
  color: var(--txt3);
  text-transform: uppercase;
  text-align: right;
  border-bottom: 1px solid var(--bdr);
  background: var(--bg2);
  position: sticky;
  top: 0;
}
.yields-matrix-table thead th:first-child { text-align: left; }
.yields-matrix-table tbody tr:hover { background: rgba(14,165,233,0.06); }
.yields-matrix-table td {
  padding: 6px 10px;
  text-align: right;
  font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ym-country { text-align: left !important; white-space: nowrap; color: var(--txt1); font-weight: 500; }
.ym-high { color: #ef4444; font-weight: 700; }
.ym-low  { color: #22c55e; }
.ym-na   { color: var(--txt4); }

/* ── Yield Curve ─────────────────────────────────────── */
.yc-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  overflow: hidden;
}
.yc-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
}
.yc-date-badge {
  font-size: 11px;
  color: var(--txt3);
  background: var(--bg3);
  padding: 3px 8px;
  border-radius: 4px;
}
.yc-snapshots {
  display: flex;
  gap: 16px;
  align-items: center;
}
.yc-chart-wrap {
  flex: 1;
  padding: 12px 16px;
  min-height: 0;
}
.yc-table-wrap {
  flex: 0 0 180px;
  overflow-y: auto;
  border-top: 1px solid var(--bdr);
}
.yc-table {
  width: auto;
  border-collapse: collapse;
  font-size: 12px;
}
.yc-table thead th {
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 700;
  color: var(--txt3);
  text-transform: uppercase;
  border-bottom: 1px solid var(--bdr);
  background: var(--bg2);
  position: sticky;
  top: 0;
  z-index: 1;
}
.yc-row:hover { background: rgba(14,165,233,0.06); }
.yc-row td { padding: 5px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.yc-tenor { font-weight: 600; color: var(--txt1); }

/* ── Earnings Calendar ─────────────────────────────── */
.earnings-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.earnings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
  gap: 12px;
  flex-wrap: wrap;
}
.earnings-select {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid var(--bdr);
  background: var(--bg2);
  color: var(--txt1);
  cursor: pointer;
}
.earnings-legend-item {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 600;
}
.earnings-legend-item.amc { background: rgba(26,115,232,0.15); color: #60a5fa; }
.earnings-legend-item.bmo { background: rgba(22,163,74,0.15);  color: #4ade80; }

#earnings-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
}
.earnings-date-group { margin-bottom: 20px; }
.earnings-date-header {
  font-size: 12px;
  font-weight: 700;
  color: var(--txt2);
  padding: 8px 4px;
  border-bottom: 2px solid var(--bdr);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.earnings-count {
  font-size: 11px;
  font-weight: 400;
  color: var(--txt3);
  background: var(--bg3);
  padding: 1px 6px;
  border-radius: 10px;
}
.earnings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.earnings-table thead th {
  padding: 4px 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--txt3);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--bdr);
  background: var(--bg2);
}
.earnings-row:hover { background: rgba(14,165,233,0.06); }
.earnings-row td { padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.earnings-row.amc-row { border-left: 2px solid #3b82f6; }
.earnings-row.bmo-row { border-left: 2px solid #22c55e; }
.earn-ticker { font-weight: 700; color: var(--teal); font-size: 12px; min-width: 60px; }
.earn-name   { color: var(--txt2); font-size: 12px; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  background: var(--bg3);
  color: var(--txt3);
}
.etag.amc { background: rgba(59,130,246,0.2); color: #93c5fd; }
.etag.bmo { background: rgba(34,197,94,0.2);  color: #86efac; }

/* ── Economic Calendar ─────────────────────────────── */
.ecal-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.ecal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
}
.ecal-view-btn {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--bdr);
  background: var(--bg2);
  color: var(--txt2);
  cursor: pointer;
  font-weight: 600;
}
.ecal-view-btn.active {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}
#ecal-legend {
  padding: 6px 16px;
  flex-shrink: 0;
}
.ecal-impact {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}
.ecal-impact.high { background: #ef4444; }
.ecal-impact.med  { background: #f59e0b; }
.ecal-impact.low  { background: #6b7280; }
#ecal-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  padding: 8px 12px;
}
.ecal-grid {
  display: grid;
  gap: 8px;
  align-items: start;
}
.ecal-day-col { display: flex; flex-direction: column; gap: 6px; }
.ecal-day-header {
  font-size: 11px;
  font-weight: 700;
  color: var(--txt2);
  padding: 6px 8px;
  background: var(--bg2);
  border-radius: 6px 6px 0 0;
  border-bottom: 2px solid var(--bdr);
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 1;
}
.ecal-event {
  background: var(--bg2);
  border-radius: 6px;
  padding: 8px 10px;
  border-left: 3px solid #6b7280;
  font-size: 11px;
}
.ecal-event.high { border-left-color: #ef4444; background: rgba(239,68,68,0.06); }
.ecal-event.med  { border-left-color: #f59e0b; background: rgba(245,158,11,0.06); }
.ecal-event.low  { border-left-color: #6b7280; }
.ecal-event-time {
  font-size: 10px;
  color: var(--txt3);
  margin-bottom: 3px;
}
.ecal-event-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--txt1);
  margin-bottom: 4px;
  line-height: 1.3;
}
.ecal-event.high .ecal-event-name { color: #fca5a5; }
.ecal-event-data {
  display: flex;
  gap: 10px;
  font-size: 10px;
  color: var(--txt3);
}
.ecal-event-data strong { color: var(--txt1); }

/* ── World Economics Matrix ────────────────────────── */
.econ-tab-bar {
  display: flex;
  gap: 4px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--bdr);
  margin-bottom: 16px;
}
.econ-tab {
  font-size: 12px;
  padding: 5px 14px;
  border-radius: 5px;
  border: 1px solid var(--bdr);
  background: var(--bg2);
  color: var(--txt2);
  cursor: pointer;
  font-weight: 600;
  transition: all 0.15s;
}
.econ-tab.active {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}
.econ-pane { display: block; }
.econ-pane.hidden { display: none; }
.econ-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.econ-matrix-table thead th {
  padding: 7px 12px;
  font-size: 10px;
  font-weight: 700;
  color: var(--txt3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 2px solid var(--bdr);
  background: var(--bg2);
  text-align: right;
}
.econ-matrix-table thead th:first-child { text-align: left; }
.econ-matrix-row:hover { background: rgba(14,165,233,0.06); }
.econ-matrix-row td { border-bottom: 1px solid rgba(255,255,255,0.05); }

/* ── My Screens (Stock Screener) ──────────────────────────── */
.screens-layout {
  display: flex;
  gap: 0;
  height: 100%;
  overflow: hidden;
}
.screens-criteria {
  width: 35%;
  min-width: 260px;
  max-width: 380px;
  border-right: 1px solid var(--bdr);
  padding: 18px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.screens-criteria-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.screens-title-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--txt1);
}
.screens-universe-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--txt2);
}
.sc-select {
  background: var(--bg2);
  border: 1px solid var(--bdr);
  color: var(--txt1);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  flex: 1;
}
.sc-select:focus { outline: none; border-color: var(--teal); }
.screens-add-filters-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--txt3);
}
.screens-add-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sc-filter-btn {
  background: var(--bg2);
  border: 1px solid var(--bdr);
  color: var(--teal);
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.sc-filter-btn:hover:not(:disabled) { background: var(--teal); color: #000; border-color: var(--teal); }
.sc-filter-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.screens-active-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sc-filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg2);
  border: 1px solid var(--bdr);
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 12px;
}
.sc-filter-label {
  font-weight: 600;
  color: var(--txt2);
  min-width: 70px;
  font-size: 11px;
}
.sc-input {
  background: var(--bg3);
  border: 1px solid var(--bdr);
  color: var(--txt1);
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 12px;
  width: 72px;
  min-width: 0;
}
.sc-input:focus { outline: none; border-color: var(--teal); }
.sc-input-sector { width: 130px; }
.sc-filter-sep { color: var(--txt3); font-size: 11px; }
.sc-remove-btn {
  background: none;
  border: none;
  color: var(--txt3);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
  margin-left: auto;
  line-height: 1;
  border-radius: 3px;
  transition: color 0.15s;
}
.sc-remove-btn:hover { color: var(--neg); }
.screens-criteria-actions { margin-top: auto; padding-top: 10px; }
.sc-btn {
  padding: 8px 16px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
}
.sc-btn-primary { background: var(--teal); color: #000; }
.sc-btn-primary:hover { opacity: 0.85; }
.sc-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.sc-btn-secondary {
  background: var(--bg2);
  border: 1px solid var(--bdr);
  color: var(--txt2);
  width: 100%;
  text-align: center;
}
.sc-btn-secondary:hover { border-color: var(--teal); color: var(--teal); }
.screens-results {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.screens-results-header {
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--bdr);
  display: flex;
  align-items: center;
  gap: 12px;
}
.screens-count-label {
  font-size: 12px;
  color: var(--txt3);
  font-weight: 600;
}
.screens-table-wrap {
  flex: 1;
  overflow: auto;
}
.screens-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--txt3);
  font-size: 13px;
}
.sc-results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.sc-results-table thead { position: sticky; top: 0; z-index: 2; }
.sc-th {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--txt3);
  background: var(--bg2);
  border-bottom: 2px solid var(--bdr);
  text-align: right;
  white-space: nowrap;
  user-select: none;
}
.sc-th:first-child, .sc-th:nth-child(2) { text-align: left; }
.sc-th:hover { color: var(--teal); }
.sc-th-active { color: var(--teal) !important; }
.sc-results-table tbody tr.sc-row { transition: background 0.1s; }
.sc-results-table tbody tr.sc-row:hover { background: rgba(14,165,233,0.07); }
.sc-results-table td {
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  text-align: right;
  white-space: nowrap;
  vertical-align: middle;
}
.sc-results-table td:first-child, .sc-results-table td:nth-child(2) { text-align: left; }

/* ══════════════════════════════════════════════════════════════
   PHASE 4: LOTS OF CHARTS (cg-*) + MARKET SCATTER (scatter-*)
   ══════════════════════════════════════════════════════════════ */

/* ── Lots of Charts panel ──────────────────────────────────── */
.cg-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 0;
}
.cg-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--bdr);
  gap: 10px;
  flex-wrap: wrap;
  background: var(--bg1);
  flex-shrink: 0;
}
.cg-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cg-wl-select { min-width: 160px; }
.cg-sector-sel { min-width: 130px; }
.cg-counter-label {
  font-size: 12px;
  color: var(--txt3);
  white-space: nowrap;
}
.cg-options-btn {
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--bdr);
  border-radius: 5px;
  background: var(--bg2);
  color: var(--txt2);
  cursor: pointer;
  font-weight: 600;
  position: relative;
}
.cg-options-btn:hover { background: var(--bg3); }
.cg-options-dropdown {
  position: absolute;
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 200;
  min-width: 140px;
  padding: 4px 0;
}
.cg-options-item {
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--txt1);
  font-family: 'Courier New', monospace;
}
.cg-options-item:hover { background: var(--bg2); }
.cg-period-btns {
  display: flex;
  gap: 2px;
}
.cg-period {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border: 1px solid var(--bdr);
  border-radius: 4px;
  background: var(--bg2);
  color: var(--txt2);
  cursor: pointer;
  transition: all 0.12s;
}
.cg-period:hover { background: var(--bg3); }
.cg-period.cg-period-active {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}
.cg-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 14px 16px;
}
.cg-card {
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  transition: box-shadow 0.15s;
}
.cg-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.cg-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
}
.cg-card-ticker {
  font-size: 13px;
  font-weight: 800;
  color: var(--teal);
  cursor: pointer;
}
.cg-card-ticker:hover { text-decoration: underline; }
.cg-card-name {
  font-size: 10px;
  color: var(--txt3);
  flex: 1;
  margin: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cg-card-price {
  font-size: 12px;
  font-weight: 700;
  color: var(--txt1);
}
.cg-card-chg {
  font-size: 11px;
  font-weight: 600;
  margin-left: 5px;
}
.cg-card-chg.pos { color: var(--pos); }
.cg-card-chg.neg { color: var(--neg); }
.cg-card-body {
  flex: 1;
  position: relative;
  min-height: 140px;
}
.cg-card-body canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
}
.cg-card-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 11px;
  color: var(--txt3);
}
.cg-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--bdr);
  flex-shrink: 0;
  background: var(--bg1);
}
.cg-pg-btn {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  border: 1px solid var(--bdr);
  border-radius: 5px;
  background: var(--bg2);
  color: var(--txt2);
  cursor: pointer;
}
.cg-pg-btn:hover:not(:disabled) { background: var(--teal); color: #fff; border-color: var(--teal); }
.cg-pg-btn:disabled { opacity: 0.4; cursor: default; }
.cg-page-label {
  font-size: 12px;
  color: var(--txt2);
  min-width: 180px;
  text-align: center;
}

/* ── Market Scatter panel ──────────────────────────────────── */
.scatter-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden !important;
  padding: 0;
}
#scatter-layout-wrap.scatter-horizontal .scatter-body {
  flex-direction: row;
}
#scatter-layout-wrap.scatter-horizontal .scatter-chart-wrap {
  flex: 1 1 60%;
  min-width: 0;
  max-height: none;
}
#scatter-layout-wrap.scatter-horizontal .scatter-table-wrap {
  flex: 1 1 40%;
  min-width: 0;
  overflow-y: auto;
}
.scatter-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.scatter-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--bdr);
  background: var(--bg1);
  flex-shrink: 0;
}
.scatter-axis-selectors {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.scatter-axis-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--txt2);
}
.scatter-chart-wrap {
  flex: 0 0 420px;
  max-height: 420px;
  position: relative;
  overflow: hidden;
  background: #fff;
}
.scatter-chart-wrap canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
}
.scatter-r2-badge {
  position: absolute;
  top: 10px;
  right: 14px;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--bdr);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--txt1);
  padding: 3px 8px;
  z-index: 10;
}
.scatter-tooltip {
  position: absolute;
  background: rgba(255,255,255,0.97);
  border: 1px solid var(--bdr);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  font-size: 12px;
  padding: 8px 12px;
  pointer-events: none;
  z-index: 100;
  min-width: 160px;
}
.scatter-tooltip .stt-ticker { font-weight: 800; font-size: 14px; color: var(--teal); }
.scatter-tooltip .stt-name   { color: var(--txt2); margin-bottom: 6px; }
.scatter-tooltip .stt-row    { display: flex; justify-content: space-between; gap: 10px; color: var(--txt2); }
.scatter-tooltip .stt-val    { font-weight: 700; color: var(--txt1); }
.scatter-table-wrap {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.scatter-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
}
.scatter-results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.scatter-results-table thead th {
  position: sticky;
  top: 0;
  padding: 7px 12px;
  font-size: 10px;
  font-weight: 700;
  color: var(--txt3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 2px solid var(--bdr);
  background: var(--bg2);
  cursor: pointer;
  text-align: right;
  white-space: nowrap;
}
.scatter-results-table thead th:first-child { text-align: left; }
.scatter-results-table thead th:hover { color: var(--teal); }
.scatter-results-table thead th.srt-active { color: var(--teal); }
.scatter-results-table tbody tr:hover { background: rgba(14,165,233,0.05); cursor: pointer; }
.scatter-results-table tbody td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--bdr);
  text-align: right;
  white-space: nowrap;
}
.scatter-results-table tbody td:first-child { text-align: left; }

/* ════════════════════════════════════════════════════
   SECURITY DETAIL PANEL
   ════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════
   SECURITY DETAIL PAGE (SDP) — Koyfin-style 2-column layout
   ═══════════════════════════════════════════════════════════ */
#panel-security {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ── Header ─────────────────────────────────────────── */
.sdp-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--bg2);
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
  min-height: 52px;
  flex-wrap: wrap;
}
.sdp-back {
  background: none;
  border: 1px solid var(--bdr);
  color: var(--teal);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.sdp-back:hover { background: rgba(14,165,233,0.1); }
.sdp-hd-title { display: flex; flex-direction: column; gap: 2px; }
.sdp-hd-name { font-size: 15px; font-weight: 700; color: var(--txt1); line-height: 1.2; }
.sdp-hd-row2 { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.sdp-hd-exch { font-size: 11px; color: var(--txt3); }
.sdp-hd-sep  { font-size: 11px; color: var(--txt3); }
.sdp-hd-ticker { font-size: 13px; font-weight: 700; color: var(--teal); }
.sdp-hd-price  { font-size: 17px; font-weight: 700; color: var(--txt1); margin-left: 4px; }
.sdp-hd-change { font-size: 13px; font-weight: 600; }
.sdp-hd-change.pos { color: var(--green, #22c55e); }
.sdp-hd-change.neg { color: var(--red, #ef4444); }

/* Metrics bar */
.sdp-metrics-bar {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  flex-wrap: wrap;
  min-width: 0;
}
.sdp-metric-item {
  display: flex;
  flex-direction: column;
  padding: 2px 12px;
  border-right: 1px solid var(--bdr);
}
.sdp-metric-item:last-child { border-right: none; }
.sdp-metric-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--txt3); }
.sdp-metric-value { font-size: 12px; font-weight: 600; color: var(--txt1); }

/* Action buttons */
.sdp-hd-actions { display: flex; gap: 6px; flex-shrink: 0; }
.sdp-action-btn {
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid var(--bdr);
  background: var(--bg3);
  color: var(--txt2);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.sdp-action-btn:hover { border-color: var(--teal); color: var(--teal); }

/* ── 2-column body ──────────────────────────────────── */
.sdp-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Left column (65%) */
.sdp-left {
  flex: 0 0 65%;
  max-width: 65%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--bdr);
  min-width: 0;
  overflow: hidden;
}

/* Right column (35%) */
.sdp-right {
  flex: 0 0 35%;
  max-width: 35%;
  overflow-y: auto;
  background: var(--bg2);
  padding: 0;
}

/* ── Snapshot Chart ─────────────────────────────────── */
.sdp-chart-wrap {
  flex-shrink: 0;
  border-bottom: 1px solid var(--bdr);
  background: var(--bg2);
}
.sdp-chart-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 6px;
  gap: 10px;
}
.sdp-chart-tmpl {
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid var(--bdr);
  background: var(--bg3);
  color: var(--txt2);
  font-size: 11px;
  cursor: pointer;
}
.sdp-time-btns { display: flex; gap: 2px; }
.sdp-tb {
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid var(--bdr);
  background: transparent;
  color: var(--txt3);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
}
.sdp-tb:hover { color: var(--txt1); border-color: var(--txt3); }
.sdp-tb.active { background: var(--teal); color: #fff; border-color: var(--teal); }
.sdp-canvas-wrap {
  position: relative;
  height: 220px;
  padding: 0 14px 10px;
}
.sdp-canvas-wrap canvas { width: 100% !important; height: 100% !important; }
.sdp-chart-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--txt3);
  font-size: 12px;
  pointer-events: none;
}

/* ── Content Tabs ───────────────────────────────────── */
.sdp-tabs {
  display: flex;
  gap: 0;
  background: var(--bg2);
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
  overflow-x: auto;
}
.sdp-tab {
  padding: 8px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--txt3);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s;
}
.sdp-tab:hover { color: var(--txt1); }
.sdp-tab.active { color: var(--teal); border-bottom-color: var(--teal); }
.sdp-tab-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  min-height: 0;
}
.sdp-tab-loading { color: var(--txt3); font-size: 12px; text-align: center; padding: 20px; }

/* ── Right column widgets ───────────────────────────── */
.sdp-widget {
  border-bottom: 1px solid var(--bdr);
  padding: 10px 14px;
}
.sdp-wt {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--teal);
  margin-bottom: 8px;
}

/* Widget: key-value rows */
.sdp-kv { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; font-size: 12px; border-bottom: 1px solid var(--bdr); }
.sdp-kv:last-child { border-bottom: none; }
.sdp-kv-label { color: var(--txt3); }
.sdp-kv-value { color: var(--txt1); font-weight: 600; text-align: right; }

/* 52-week range bar */
.sdp-range-bar-wrap { margin: 8px 0; }
.sdp-range-bar-track {
  position: relative;
  height: 5px;
  background: var(--bg3);
  border-radius: 3px;
  margin: 6px 0 3px;
}
.sdp-range-bar-fill {
  position: absolute; left: 0; top: 0; height: 100%;
  background: var(--teal); border-radius: 3px;
}
.sdp-range-bar-dot {
  position: absolute; top: 50%; width: 9px; height: 9px;
  border-radius: 50%; background: var(--teal);
  border: 2px solid var(--bg2);
  transform: translate(-50%, -50%);
}
.sdp-range-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--txt3); }

/* Performance returns table */
.sdp-perf-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sdp-perf-table th { color: var(--txt3); font-weight: 600; font-size: 10px; text-align: left; padding: 2px 4px; border-bottom: 1px solid var(--bdr); }
.sdp-perf-table td { padding: 4px 4px; border-bottom: 1px solid var(--bdr); }
.sdp-perf-table tr:last-child td { border-bottom: none; }
.sdp-pos { color: var(--green, #22c55e); font-weight: 600; }
.sdp-neg { color: var(--red, #ef4444); font-weight: 600; }
.sdp-neu { color: var(--txt3); }

/* Forward estimates table */
.sdp-est-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sdp-est-table th { color: var(--txt3); font-size: 10px; font-weight: 600; text-align: right; padding: 2px 4px; border-bottom: 1px solid var(--bdr); }
.sdp-est-table th:first-child { text-align: left; }
.sdp-est-table td { padding: 4px; text-align: right; border-bottom: 1px solid var(--bdr); color: var(--txt1); }
.sdp-est-table td:first-child { text-align: left; color: var(--txt3); font-weight: 600; }
.sdp-est-table tr:last-child td { border-bottom: none; }

/* ── Tab content helpers ────────────────────────────── */
.sdp-overview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-bottom: 14px; }
.sdp-kpi { background: var(--bg3); border-radius: 6px; padding: 8px 10px; }
.sdp-kpi-label { font-size: 10px; color: var(--txt3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.sdp-kpi-value { font-size: 14px; font-weight: 700; color: var(--txt1); }
.sdp-desc { font-size: 12px; color: var(--txt2); line-height: 1.6; margin-top: 10px; max-height: 160px; overflow-y: auto; }

/* Earnings tab */
.sdp-earn-wrap { position: relative; height: 220px; margin-bottom: 14px; }
.sdp-earn-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sdp-earn-table th { color: var(--txt3); font-size: 10px; font-weight: 600; text-align: right; padding: 3px 6px; border-bottom: 1px solid var(--bdr); background: var(--bg3); }
.sdp-earn-table th:first-child { text-align: left; }
.sdp-earn-table td { padding: 4px 6px; border-bottom: 1px solid var(--bdr); text-align: right; }
.sdp-earn-table td:first-child { text-align: left; color: var(--txt3); }
.sdp-earn-table tr:last-child td { border-bottom: none; }
.sdp-beat { color: var(--green, #22c55e); font-weight: 600; }
.sdp-miss { color: var(--red, #ef4444); font-weight: 600; }

/* Financial Analysis tab */
.sdp-fin-subtabs { display: flex; gap: 4px; margin-bottom: 12px; }
.sdp-fin-stab {
  padding: 4px 12px; border-radius: 20px; border: 1px solid var(--bdr);
  background: transparent; color: var(--txt2); font-size: 11px; cursor: pointer;
}
.sdp-fin-stab.active { background: var(--teal); color: #fff; border-color: var(--teal); }
.sdp-fin-table { width: 100%; border-collapse: collapse; font-size: 11px; overflow-x: auto; display: block; }
.sdp-fin-table th { color: var(--txt3); font-weight: 600; text-align: right; padding: 3px 8px; border-bottom: 1px solid var(--bdr); background: var(--bg3); white-space: nowrap; position: sticky; top: 0; }
.sdp-fin-table th:first-child { text-align: left; min-width: 150px; }
.sdp-fin-table td { padding: 4px 8px; border-bottom: 1px solid var(--bdr); text-align: right; white-space: nowrap; }
.sdp-fin-table td:first-child { text-align: left; color: var(--txt3); }
.sdp-fin-table tr:hover td { background: rgba(14,165,233,0.04); }

/* Analyst Estimates tab */
.sdp-pt-bar-wrap { margin: 10px 0 16px; }
.sdp-pt-track { position: relative; height: 8px; background: var(--bg3); border-radius: 4px; margin: 8px 0 4px; }
.sdp-pt-fill { position: absolute; top: 0; height: 100%; background: linear-gradient(to right, #f59e0b44, #22c55e44); border-radius: 4px; }
.sdp-pt-cur-marker {
  position: absolute; top: 50%; width: 10px; height: 10px;
  background: var(--teal); border: 2px solid var(--bg2);
  border-radius: 50%; transform: translate(-50%, -50%);
}
.sdp-pt-labels { display: flex; justify-content: space-between; font-size: 10px; }
.sdp-hist-chart-wrap { position: relative; height: 160px; margin: 10px 0; }

/* News tab */
.sdp-news-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--bdr);
  cursor: pointer;
}
.sdp-news-item:last-child { border-bottom: none; }
.sdp-news-item:hover .sdp-news-title { color: var(--teal); }
.sdp-news-title { font-size: 13px; color: var(--txt1); font-weight: 500; line-height: 1.4; margin-bottom: 3px; }
.sdp-news-meta { font-size: 11px; color: var(--txt3); }

/* Filings tab */
.sdp-filing-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--bdr);
  cursor: pointer;
}
.sdp-filing-item:last-child { border-bottom: none; }
.sdp-filing-item:hover .sdp-filing-title { color: var(--teal); }
.sdp-filing-form {
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
  background: rgba(14,165,233,0.12); color: var(--teal);
  white-space: nowrap; flex-shrink: 0;
}
.sdp-filing-title { font-size: 12px; color: var(--txt2); flex: 1; }
.sdp-filing-date { font-size: 10px; color: var(--txt3); white-space: nowrap; }

/* In-app iframe modal (for filings) */
#sdp-iframe-modal {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(0,0,0,0.8);
  display: flex; align-items: center; justify-content: center;
}
.sdp-iframe-box {
  width: 92%; height: 88vh;
  background: var(--bg2); border-radius: 10px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
}
.sdp-iframe-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; background: var(--bg3);
  border-bottom: 1px solid var(--bdr); flex-shrink: 0;
}
.sdp-iframe-title { flex: 1; font-size: 13px; color: var(--txt2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdp-iframe-close { background: none; border: none; color: var(--txt3); font-size: 18px; cursor: pointer; padding: 0 4px; }
.sdp-iframe-body { flex: 1; }
.sdp-iframe-body iframe { width: 100%; height: 100%; border: none; }
.sec-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: var(--bg2);
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
}
.sec-back-btn {
  background: none;
  border: 1px solid var(--bdr);
  color: var(--teal);
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
  transition: background 0.15s;
}
.sec-back-btn:hover { background: rgba(14,165,233,0.1); }
.sec-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.sec-ticker {
  font-size: 18px;
  font-weight: 800;
  color: var(--txt1);
  letter-spacing: 0.5px;
}
.sec-name {
  font-size: 14px;
  color: var(--txt2);
  font-weight: 500;
}
.sec-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--txt1);
  margin-left: 8px;
}
.sec-change {
  font-size: 14px;
  font-weight: 600;
}
.sec-change.positive { color: var(--green, #22c55e); }
.sec-change.negative { color: var(--red, #ef4444); }
.sec-meta {
  font-size: 12px;
  color: var(--txt3);
  margin-left: 4px;
}
/* ── Body: stats + chart ─────────────────── */
.sec-body {
  display: flex;
  flex: 0 0 auto;
  height: 320px;
  border-bottom: 1px solid var(--bdr);
  overflow: hidden;
}
.sec-left {
  width: 220px;
  flex-shrink: 0;
  padding: 14px 16px;
  overflow-y: auto;
  border-right: 1px solid var(--bdr);
  background: var(--bg2);
}
.sec-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--bdr);
  font-size: 12px;
  gap: 8px;
}
.sec-stat-row:last-child { border-bottom: none; }
.sec-stat-label { color: var(--txt3); white-space: nowrap; }
.sec-stat-value { color: var(--txt1); font-weight: 600; text-align: right; }
.sec-stat-section {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--teal);
  padding: 8px 0 4px;
}
.sec-chart {
  flex: 1;
  min-width: 0;
  position: relative;
  background: var(--bg1);
}
/* ── Tabs ─────────────────────────────────── */
.sec-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 16px;
  border-bottom: 1px solid var(--bdr);
  background: var(--bg2);
  flex-shrink: 0;
}
.sec-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--txt3);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 14px;
  transition: color 0.15s;
  margin-bottom: -1px;
}
.sec-tab:hover { color: var(--txt1); }
.sec-tab.active {
  color: var(--teal);
  border-bottom-color: var(--teal);
}
/* ── Tab content ─────────────────────────── */
.sec-tab-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  background: var(--bg1);
}
/* Overview tab */
.sec-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.sec-kpi-card {
  background: var(--bg2);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  padding: 10px 14px;
}
.sec-kpi-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--txt3);
  margin-bottom: 4px;
}
.sec-kpi-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--txt1);
}
.sec-description {
  background: var(--bg2);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  padding: 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--txt2);
}
/* News tab */
.sec-news-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--bdr);
  cursor: pointer;
}
.sec-news-item:hover .sec-news-title { color: var(--teal); }
.sec-news-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--txt1);
  line-height: 1.4;
}
.sec-news-meta {
  font-size: 11px;
  color: var(--txt3);
}
/* Financials tab */
.sec-fin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.sec-fin-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--txt3);
  padding: 8px 12px;
  border-bottom: 1px solid var(--bdr);
  background: var(--bg2);
}
.sec-fin-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--bdr);
  color: var(--txt2);
}
.sec-fin-table tr:hover td { background: rgba(14,165,233,0.04); }
/* Filings tab */
.sec-filing-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bdr);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.sec-filing-item:hover .sec-filing-title { color: var(--teal); }
.sec-filing-type {
  font-size: 11px;
  font-weight: 700;
  background: rgba(14,165,233,0.15);
  color: var(--teal);
  padding: 3px 8px;
  border-radius: 4px;
  min-width: 40px;
  text-align: center;
  white-space: nowrap;
}
.sec-filing-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--txt1);
  flex: 1;
}
.sec-filing-date {
  font-size: 11px;
  color: var(--txt3);
  white-space: nowrap;
}
.sec-stats-loading {
  color: var(--txt3);
  font-size: 12px;
  padding: 8px 0;
}

/* Recommendation badge */
.sec-rec-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}
.sec-rec-buy    { background: rgba(34,197,94,0.15);  color: #22c55e; }
.sec-rec-hold   { background: rgba(234,179,8,0.15);  color: #eab308; }
.sec-rec-sell   { background: rgba(239,68,68,0.15);  color: #ef4444; }

/* ═══════════════════════════════════════════════════════════
   FINANCIAL STATEMENTS SUB-TABS
   ═══════════════════════════════════════════════════════════ */

.fin-subtab, .fin-period-btn {
  background: var(--bg3);
  border: 1px solid var(--bdr);
  color: var(--txt3);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  font-weight: 500;
}
.fin-subtab:hover, .fin-period-btn:hover {
  color: var(--txt1);
  border-color: var(--teal);
}
.fin-subtab.active, .fin-period-btn.active {
  background: rgba(20,184,166,0.12);
  border-color: var(--teal);
  color: var(--teal);
  font-weight: 600;
}

.fin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--bdr);
  border-radius: 6px;
}
.fin-statements-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 700px;
}
.fin-statements-table thead tr {
  background: var(--bg3);
  border-bottom: 1px solid var(--bdr);
}
.fin-statements-table thead th {
  padding: 7px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--txt3);
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--bg3);
  z-index: 2;
}
.fin-label-col {
  text-align: left;
  padding: 5px 8px;
  min-width: 220px;
  max-width: 220px;
  font-size: 12px;
  color: var(--txt1);
  white-space: nowrap;
  position: sticky;
  left: 0;
  background: var(--bg2);
  z-index: 1;
}
thead th.fin-label-col {
  background: var(--bg3);
  z-index: 3;
}
.fin-data-row:hover td { background: rgba(14,165,233,0.04); }
.fin-data-row:hover .fin-label-col { background: rgba(14,165,233,0.08); }
.fin-yoy-row td { background: transparent; }
.fin-yoy-row:hover td { background: rgba(14,165,233,0.03); }
.fin-section-hdr td { letter-spacing: 0.04em; }
.fin-statements-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.04); }

@keyframes fin-spin { to { transform: rotate(360deg); } }
.fin-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid var(--bdr);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: fin-spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}

/* ═══════════════════════════════════════════════════════════
   PERFORMANCE PANEL
   ═══════════════════════════════════════════════════════════ */

/* Toolbar */
.perf-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg2);
  border-bottom: 1px solid var(--bdr);
  flex-wrap: wrap;
  flex-shrink: 0;
}
.perf-ticker-input-area {
  display: flex;
  align-items: center;
  gap: 6px;
}
.perf-input {
  background: var(--bg3);
  border: 1px solid var(--bdr);
  border-radius: 4px;
  color: var(--txt);
  padding: 5px 10px;
  font-size: 12px;
  width: 180px;
  outline: none;
}
.perf-input:focus {
  border-color: var(--teal);
}
.perf-add-btn {
  padding: 5px 12px;
  font-size: 12px;
  background: var(--teal);
  color: #000;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}
.perf-add-btn:hover { opacity: 0.85; }
.perf-clear-btn {
  padding: 5px 10px;
  font-size: 11px;
  color: var(--txt3);
  background: transparent;
  border: 1px solid var(--bdr);
  border-radius: 4px;
  cursor: pointer;
}
.perf-clear-btn:hover { color: #ef4444; border-color: #ef4444; }
.perf-separator {
  width: 1px;
  height: 22px;
  background: var(--bdr);
  flex-shrink: 0;
}

/* Chips */
.perf-chips {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.perf-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  cursor: default;
  user-select: none;
  white-space: nowrap;
}
.perf-chip-x {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 10px;
  opacity: 0.6;
  padding: 0 2px;
  line-height: 1;
  color: inherit;
}
.perf-chip-x:hover { opacity: 1; }

/* Period tabs */
.perf-period-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg3);
  border-radius: 6px;
  padding: 2px;
}
.perf-period-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--txt3);
  cursor: pointer;
  transition: all 0.15s;
}
.perf-period-btn:hover { color: var(--txt); background: var(--bg2); }
.perf-period-btn.active { background: var(--bg2); color: var(--teal); }

/* Toggle */
.perf-toggle-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--txt3);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.perf-toggle-label input { accent-color: var(--teal); cursor: pointer; }

/* Chart area */
.perf-chart-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  padding: 12px 14px 4px;
  min-height: 0;
}
.perf-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}
.perf-loading, .perf-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--txt3);
  pointer-events: none;
}
.perf-loading { background: var(--bg); z-index: 5; }

/* Legend table */
.perf-legend {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  padding: 6px 14px 8px;
  border-top: 1px solid var(--bdr);
  background: var(--bg2);
  flex-shrink: 0;
  max-height: 80px;
  overflow-y: auto;
}
.perf-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 4px 8px;
  font-size: 11px;
  white-space: nowrap;
  cursor: default;
}
.perf-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.perf-legend-ticker {
  font-weight: 700;
  color: var(--txt);
}
.perf-legend-return {
  font-weight: 600;
  font-size: 11px;
}
.perf-legend-return.pos { color: #22c55e; }
.perf-legend-return.neg { color: #ef4444; }
.perf-legend-price {
  color: var(--txt3);
  font-size: 10px;
}

/* ─── Topbar Global Search Dropdown ─────────────────────────── */
#topbar-search-wrap { position: relative; }
.topbar-search-drop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 420px;
  background: var(--bg2);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  z-index: 9999;
  max-height: 360px;
  overflow-y: auto;
}
.topbar-search-drop.hidden { display: none; }
.ts-drop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.1s;
}
.ts-drop-item:last-child { border-bottom: none; }
.ts-drop-item:hover, .ts-drop-item.ts-selected { background: var(--bg3); }
.ts-drop-sym { font-weight: 700; font-size: 13px; color: var(--teal); min-width: 60px; }
.ts-drop-name { font-size: 12px; color: var(--txt2); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-drop-exch { font-size: 10px; color: var(--txt4); }
.ts-drop-empty { padding: 14px; text-align: center; color: var(--txt3); font-size: 13px; }

/* ─── Koyfin-style Search Modal ─────────────────────────────── */
#search-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 80px;
}
#search-modal.hidden { display: none; }
#search-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(4px);
}
#search-modal-box {
  position: relative; z-index: 1;
  width: 680px; max-width: 95vw;
  background: var(--bg2);
  border-radius: 12px;
  border: 1px solid var(--bdr);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  overflow: hidden;
}
#search-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--bdr);
  min-height: 38px;
}
#search-modal-title {
  font-size: 12px; font-weight: 600;
  color: var(--txt3); flex: 1;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
#search-modal-close {
  background: none; border: none; cursor: pointer;
  color: var(--txt3); font-size: 16px; padding: 2px 4px;
  line-height: 1; border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
#search-modal-close:hover { color: var(--txt); background: var(--bg3); }
#search-modal-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bdr);
}
#search-modal-input {
  flex: 1; background: none; border: none; outline: none;
  font-size: 16px; color: var(--txt); font-family: inherit;
}
#search-modal-input::placeholder { color: var(--txt4); }
#search-filter-tabs {
  display: flex; gap: 0; padding: 0 8px;
  border-bottom: 1px solid var(--bdr);
  overflow-x: auto; scrollbar-width: none;
}
#search-filter-tabs::-webkit-scrollbar { display: none; }
.sf-tab {
  padding: 8px 12px; font-size: 12px; font-weight: 600;
  color: var(--txt3); cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s; user-select: none;
}
.sf-tab:hover { color: var(--txt); }
.sf-tab.active { color: var(--teal); border-bottom-color: var(--teal); }
#search-modal-results {
  max-height: 400px; overflow-y: auto;
}
.sr-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.1s;
}
.sr-row:hover { background: var(--bg3); }
.sr-sym { font-size: 14px; font-weight: 700; color: var(--txt); min-width: 64px; }
.sr-flag { font-size: 16px; }
.sr-exch {
  font-size: 10px; color: var(--teal);
  background: rgba(14,165,233,0.1); padding: 1px 5px; border-radius: 3px;
  white-space: nowrap;
}
.sr-name {
  font-size: 12px; color: var(--txt3);
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sr-type { font-size: 11px; color: var(--txt4); white-space: nowrap; }
.sr-empty {
  padding: 20px 16px; text-align: center;
  color: var(--txt3); font-size: 13px;
}
/* Action picker */
.sa-section-header {
  padding: 6px 16px; font-size: 10px; font-weight: 600;
  color: var(--txt4); text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--bg);
}
.sa-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.1s;
}
.sa-row:hover { background: var(--bg3); }
.sa-code {
  font-size: 11px; font-weight: 700; color: var(--teal);
  background: rgba(14,165,233,0.12); padding: 2px 6px;
  border-radius: 4px; min-width: 44px; text-align: center;
}
.sa-desc { font-size: 13px; color: var(--txt2); }
/* Picker header extras */
.sm-back {
  cursor: pointer; color: var(--teal); font-size: 12px;
  margin-right: 6px; white-space: nowrap;
}
.sm-back:hover { text-decoration: underline; }
.sm-picker-sym { font-weight: 700; color: var(--txt); font-size: 13px; }
.sm-picker-name { color: var(--txt2); font-size: 12px; }
.sm-picker-type {
  font-size: 10px; color: var(--teal);
  background: rgba(14,165,233,0.1); padding: 1px 6px; border-radius: 3px;
}
/* Keyboard tip footer */
#search-tip {
  padding: 8px 16px; font-size: 11px; color: var(--txt4);
  border-top: 1px solid var(--bdr);
  background: var(--bg);
}
#search-tip kbd {
  background: var(--bg3); border: 1px solid var(--bdr);
  border-radius: 3px; padding: 1px 5px; font-size: 10px;
  font-family: monospace; color: var(--txt2);
}

/* ── In-app Article Reader Panel ─────────────────────────── */
#article-reader {
  position: fixed; right: 0; top: 0; bottom: 0; width: 520px;
  background: var(--bg2); border-left: 1px solid var(--bdr);
  z-index: 8000; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.25s ease;
}
#article-reader.open { transform: translateX(0); }
#article-reader.hidden { display: none; }
#article-reader-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid var(--bdr);
  flex-shrink: 0; background: var(--bg2);
}
#article-reader-close {
  background: none; border: none; cursor: pointer; color: var(--txt3);
  font-size: 16px; padding: 2px 6px; border-radius: 4px;
  line-height: 1; flex-shrink: 0;
}
#article-reader-close:hover { color: var(--txt); background: var(--bg3); }
#article-reader-source {
  font-size: 11px; color: var(--txt3); font-weight: 500; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#article-reader-external {
  font-size: 14px; color: var(--teal); text-decoration: none; flex-shrink: 0;
  padding: 2px 6px; border-radius: 4px; border: 1px solid var(--bdr);
}
#article-reader-external:hover { background: var(--bg3); }
#article-reader-frame { flex: 1; border: none; background: #fff; }
#article-reader-fallback {
  flex: 1; padding: 20px; overflow-y: auto;
}
#article-reader-fallback.hidden { display: none; }
#ar-title {
  font-size: 16px; font-weight: 600; color: var(--txt1);
  line-height: 1.4; margin: 0 0 12px;
}
#ar-desc {
  font-size: 13px; color: var(--txt2); line-height: 1.6;
  margin: 0 0 16px;
}
#ar-link {
  display: inline-block; font-size: 13px; color: var(--teal);
  text-decoration: none; border: 1px solid var(--teal);
  padding: 6px 16px; border-radius: 6px;
}
#ar-link:hover { background: rgba(14,165,233,.1); }

/* Panel watchlist tab strip */
#wl-tabs-panel {
  min-height: 36px;
  overflow-x: auto;
  scrollbar-width: none;
}
#wl-tabs-panel::-webkit-scrollbar { display: none; }
#wl-tabs-panel .wl-tab {
  font-size: 12px;
  padding: 5px 12px 7px;
  cursor: pointer;
  color: var(--txt3);
  border-radius: 4px 4px 0 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  user-select: none;
}
#wl-tabs-panel .wl-tab:hover { color: var(--txt); background: rgba(255,255,255,0.05); }
#wl-tabs-panel .wl-tab.active {
  color: var(--teal);
  border-bottom: 2px solid var(--teal);
  background: transparent;
  font-weight: 600;
}
#wl-tabs-panel .wl-tab-close {
  background: none; border: none; color: var(--txt4); cursor: pointer;
  margin-left: 4px; padding: 0 2px; font-size: 13px; line-height: 1;
}
#wl-tabs-panel .wl-tab-close:hover { color: var(--txt); }


/* ════════════════════════════════════════════════════════════
   LOGIN PAGE — exact reference CSS (scoped to #login-modal)
   ════════════════════════════════════════════════════════════ */
#login-modal {
  background: #000000 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 40px 20px;
  box-sizing: border-box;
  overflow-y: auto;
  font-family: Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Helvetica,Arial,sans-serif;
  color: #ffffff;
}
#login-modal * { box-sizing: border-box; }
#login-modal .lm-page { width:100%; display:flex; justify-content:center; }
#login-modal .lm-shell { width:100%; max-width:480px; background:transparent; }
#login-modal .lm-hero { text-align:center; margin-bottom:32px; }
#login-modal .lm-hero-logo {
  width:100%;
  max-width:460px;
  margin:0 auto 16px;
  position:relative;
}
/* PNG has pure black corners — mix-blend-mode:screen makes them transparent on black page */
/* Clip formula: padding-bottom = (target_y / image_width) × 100% = (target_y / 603) × 100% */
/* Circle ends at y≈576, text starts at y≈633 — clip at y=605 to keep full circle, hide text */
#login-modal .lm-logo-circle {
  width:100%;
  line-height:0;
  overflow:hidden;
  height:0;
  padding-bottom:100.3%; /* (605/603) × 100% — shows full circle+glow, clips baked-in text */
}
#login-modal .lm-logo-circle img {
  width:100%; height:auto;
  display:block;
  /* Black pixels become transparent against black page → no visible rectangle */
  mix-blend-mode: screen;
}
#login-modal .lm-brand-wordmark {
  margin:20px 0 0;
  text-align:center;
  font-size:48px;
  line-height:1.05;
  letter-spacing:-0.02em;
  font-weight:700;
  user-select:none;
}
/* Vertical gradient: bright/light green at top → deeper green at bottom */
#login-modal .lm-brand-wordmark .lm-all {
  background: linear-gradient(180deg, #d4f080 0%, #acd168 40%, #7da040 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
#login-modal .lm-brand-wordmark .lm-rest { color:#ffffff; }
#login-modal .lm-tabs {
  position:relative;
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  border-bottom:1px solid #2a2a2a;
  margin-bottom:24px;
}
#login-modal .lm-tab-btn {
  appearance:none; border:0; outline:0; background:transparent;
  color:#8c8c8c;
  font-size:16px; font-weight:600; line-height:1;
  padding:0 0 16px;
  cursor:pointer;
  transition:color 0.18s ease, opacity 0.18s ease;
}
#login-modal .lm-tab-btn:hover { color:#b8b8b8; }
#login-modal .lm-tab-btn.active { color:#ffffff; }
#login-modal .lm-tab-indicator {
  position:absolute; bottom:0; left:0;
  width:50%; height:4px;
  background:#71a2e3;
  border-radius:999px;
  box-shadow:0 0 16px rgba(47,125,255,0.45);
  transition:transform 0.22s ease;
}
#login-modal .lm-tab-indicator.right { transform:translateX(100%); }
#login-modal .lm-panel { display:none; }
#login-modal .lm-panel.active { display:block; }
#login-modal .lm-field { width:100%; margin-bottom:16px; }
#login-modal .lm-field input {
  width:100%; height:48px;
  border:none; outline:none;
  border-radius:10px;
  background:#eceffc;
  color:#111111;
  padding:0 14px;
  font-size:15px; font-weight:500;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.03);
}
#login-modal .lm-field input::placeholder { color:#7a7a7a; font-weight:500; }
#login-modal .lm-field input:focus {
  box-shadow:inset 0 0 0 2px rgba(47,125,255,0.18), 0 0 0 3px rgba(47,125,255,0.08);
}
/* Suppress browser autofill icons */
#login-modal .lm-field input::-webkit-credentials-auto-fill-button,
#login-modal .lm-field input::-webkit-contacts-auto-fill-button,
#login-modal .lm-field input::-webkit-caps-lock-indicator,
#login-modal .lm-field input::-webkit-strong-password-auto-fill-button,
#login-modal .lm-field input::-webkit-textfield-decoration-container { visibility:hidden !important; display:none !important; pointer-events:none !important; opacity:0 !important; width:0 !important; height:0 !important; margin:0 !important; padding:0 !important; }
/* Note: orange icons from password manager extensions (LastPass/1Password) cannot be removed via CSS */
#login-modal .lm-primary-btn {
  width:100%; height:50px;
  margin-top:10px; margin-bottom:20px;
  border:none; outline:none;
  border-radius:12px;
  background:#71a2e3;
  color:#ffffff;
  font-size:16px; font-weight:600; letter-spacing:-0.01em;
  cursor:pointer;
  transition:background 0.18s ease, transform 0.08s ease;
  box-shadow:0 10px 24px rgba(47,125,255,0.22), inset 0 0 0 1px rgba(255,255,255,0.06);
}
#login-modal .lm-primary-btn:hover { background:#5b8bc7; }
#login-modal .lm-primary-btn:active { transform:translateY(1px); }
#login-modal .lm-guest-link {
  display:block;
  margin-top:10px; margin-bottom:40px;
  text-align:center;
  color:#ffffff;
  text-decoration:underline;
  text-underline-offset:3px;
  font-size:16px; font-weight:500;
  background:none; border:none; cursor:pointer; width:100%;
  font-family:inherit;
}
#login-modal .lm-guest-link:hover { opacity:0.88; }
#login-modal .lm-footer { text-align:center; margin-top:0; }
#login-modal .lm-footer-brand {
  margin:0 0 10px;
  font-size:18px; line-height:1.1;
  font-weight:700; letter-spacing:-0.02em;
}
#login-modal .lm-footer-brand .lm-all {
  background: linear-gradient(180deg, #d4f080 0%, #acd168 40%, #7da040 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
#login-modal .lm-footer-brand .lm-rest { color:#ffffff; }
#login-modal .lm-support-line { margin:0; font-size:14px; line-height:1.45; color:#cfcfcf; font-weight:500; }
#login-modal .lm-support-line a { color:#71a2e3; text-decoration:underline; text-underline-offset:2px; }
#login-modal .lm-error { color:#f87171; font-size:11px; min-height:16px; margin:-8px 0 8px; }
@media (max-width:480px) {
  #login-modal { padding-top:56px; padding-bottom:40px; }
  #login-modal .lm-hero-logo,
  #login-modal .lm-logo-circle,
  #login-modal .lm-logo-circle img { width:144px; height:144px; }
  #login-modal .lm-brand-wordmark { font-size:30px; }
  #login-modal .lm-tab-btn { font-size:15px; }
  #login-modal .lm-guest-link { font-size:15px; }
}

/* Add Ticker button — more prominent */
.tb-btn-add {
  background: rgba(38,198,218,0.15) !important;
  border-color: var(--teal) !important;
  color: var(--teal) !important;
  font-weight: 600 !important;
}
.tb-btn-add:hover {
  background: rgba(38,198,218,0.25) !important;
}

/* ═══════════════════════════════════════════════════════════
   KOYFIN-STYLE TODAY'S MARKETS LAYOUT
   ═══════════════════════════════════════════════════════════ */
#panel-markets.active {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

#kf-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  height: 100%;
  gap: 0;
}

/* ── Left & Right Columns ── */
#kf-left, #kf-right {
  width: 260px;
  min-width: 220px;
  max-width: 300px;
  flex-shrink: 0;
  border-right: 1px solid var(--bdr);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#kf-right { border-right: none; border-left: 1px solid var(--bdr); }

.kf-col-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  padding-bottom: 20px;
}
.kf-col-scroll::-webkit-scrollbar { width: 4px; }
.kf-col-scroll::-webkit-scrollbar-track { background: transparent; }
.kf-col-scroll::-webkit-scrollbar-thumb { background: var(--bdr); border-radius: 2px; }

/* ── Section headers ── */
.kf-section { border-bottom: 1px solid var(--bdr2); }
.kf-section:last-child { border-bottom: none; }

.kf-add-btn {
  background: none;
  border: none;
  color: var(--teal);
  font-size: 13px;
  cursor: pointer;
  padding: 0 2px;
  margin-left: 4px;
  line-height: 1;
  vertical-align: middle;
  opacity: 0.7;
}
.kf-add-btn:hover { opacity: 1; }

.kf-section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--txt3);
  padding: 8px 10px 5px;
  background: var(--bg2);
  border-bottom: 1px solid var(--bdr2);
  position: sticky;
  top: 0;
  z-index: 2;
}

/* ── Koyfin table ── */
.kf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.kf-table thead th {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--txt4);
  padding: 4px 8px;
  background: var(--bg);
  border-bottom: 1px solid var(--bdr2);
  white-space: nowrap;
}
.kf-th-r { text-align: right; }
.kf-table tbody tr {
  cursor: pointer;
  transition: background 0.1s;
}
.kf-table tbody tr:hover { background: var(--bg3); }
.kf-table tbody tr.kf-row-active {
  background: rgba(113,162,227,0.15) !important;
  border-left: 2px solid #71a2e3;
}
.kf-table tbody td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--bdr2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
  font-size: 12px;
  color: var(--txt);
}
.kf-table tbody td:first-child { font-weight: 600; font-size: 12px; max-width: 90px; }
.kf-table td.kf-th-r { text-align: right; font-family: var(--mono); }
.kf-table td.pos { color: #22c55e; }
.kf-table td.neg { color: #ef4444; }

/* ── Center Column ── */
#kf-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

#kf-chart-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg2);
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
  flex-wrap: wrap;
}

#kf-chart-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--txt);
  white-space: nowrap;
  min-width: 100px;
}

#kf-period-btns {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}
.kf-period {
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--bdr);
  border-radius: 4px;
  background: var(--bg3);
  color: var(--txt3);
  cursor: pointer;
  transition: all 0.12s;
  font-family: var(--font);
}
.kf-period:hover { border-color: #71a2e3; color: #71a2e3; }
.kf-period-active {
  background: #71a2e3 !important;
  border-color: #71a2e3 !important;
  color: #000 !important;
}

#kf-chart-wrap {
  flex: 0 0 45%;
  min-height: 200px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--bdr);
}
#kf-tv-chart {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

#kf-news-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}
#kf-news-wrap::-webkit-scrollbar { width: 4px; }
#kf-news-wrap::-webkit-scrollbar-thumb { background: var(--bdr); border-radius: 2px; }

/* news items inherit existing .mp-news-item styles, just override max-height */
#kf-news-wrap #mp-news-list { max-height: none !important; overflow: visible !important; }


/* ── Toolbar groups (context-aware) ── */
.tb-group {
  display: flex;
  align-items: center;
  gap: 3px;
}
#topbar-right {
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
}
/* Shrink tb-btn text on overflow */
@media (max-width: 1300px) {
  .tb-group .tb-btn { padding: 4px 8px !important; font-size: 12px !important; }
}

/* Compare chips */
.kf-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(113,162,227,0.2);
  border: 1px solid #71a2e3;
  border-radius: 12px;
  font-size: 11px;
  color: #71a2e3;
  font-weight: 600;
}
.kf-chip button {
  background: none;
  border: none;
  color: #71a2e3;
  cursor: pointer;
  padding: 0;
  font-size: 11px;
  line-height: 1;
}
.kf-table tbody tr.kf-row-compare {
  background: rgba(113,162,227,0.08) !important;
  border-left: 2px solid rgba(113,162,227,0.5);
}

/* Row checkboxes */
.kf-cb-cell { width: 22px; padding: 4px 4px 4px 8px !important; cursor: pointer; }
.kf-cb { font-size: 14px; color: var(--txt3); line-height: 1; user-select: none; }
.kf-row-active .kf-cb, .kf-row-compare .kf-cb { color: #71a2e3; }
.kf-table thead th:first-child { width: 22px; padding: 4px 4px 4px 8px; }

/* Toolbar compact — prevent logout cutoff */
#topbar-right {
  gap: 3px !important;
  overflow: visible !important;
}
#topbar-right .tb-btn {
  padding: 4px 10px !important;
  font-size: 12px !important;
  height: 30px !important;
}
.tb-group { gap: 2px; }
#btn-logout { display: flex !important; }

/* Prevent logout cutoff — allow toolbar to scroll or flex properly */
#topbar-right {
  display: flex !important;
  align-items: center;
  gap: 2px !important;
  overflow-x: auto !important;
  min-width: 0;
}
#topbar-right > * {
  flex-shrink: 0;
}
.tb-btn {
  padding: 3px 8px !important;
  font-size: 11px !important;
  height: 28px !important;
  white-space: nowrap;
}
#btn-logout {
  display: flex !important;
  order: 999;
}

/* Better checkbox styling */
.kf-cb {
  font-size: 16px !important;
  color: var(--txt3) !important;
  line-height: 1 !important;
  user-select: none;
  font-weight: 700;
  display: inline-block;
  width: 18px;
  height: 18px;
  text-align: center;
  transition: color 0.15s;
}
.kf-row-active .kf-cb,
.kf-row-compare .kf-cb {
  color: #4db8ff !important;
  font-weight: 900;
}

/* ═══════════════════════════════════════════════════════════
   KOYFIN VISUAL POLISH — Markets Panel Full Width + Compact UI
   ═══════════════════════════════════════════════════════════ */

/* PROBLEM 1: Icon-only sidebar when markets panel is active */
body.panel-markets #sidebar {
  width: 40px !important;
  min-width: 40px !important;
  overflow: hidden !important;
}
body.panel-markets #sidebar .sb-item-label,
body.panel-markets #sidebar .sb-badge,
body.panel-markets #sidebar .sb-section-header,
body.panel-markets #sidebar .sb-wordmark,
body.panel-markets #sidebar .sb-footer-label,
body.panel-markets #sidebar .sb-group-arrow,
body.panel-markets #sidebar .sb-sub-item {
  display: none !important;
}
body.panel-markets #sidebar .sb-item {
  padding: 0 !important;
  justify-content: center !important;
}
body.panel-markets #sidebar .sb-item-icon {
  margin: 0 auto !important;
}
body.panel-markets #main-area { left: 40px !important; }

/* PROBLEM 3: Compact section headers */
.mp-card-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: var(--txt2) !important;
}
.mp-card-header {
  padding: 4px 8px !important;
  min-height: 24px;
}

/* Compact table rows — 24px height, 11px font */
.mp-table {
  line-height: 1 !important;
}
.mp-table tr { height: 24px; }
.mp-table td {
  padding: 2px 4px !important;
  font-size: 11px !important;
}
.mp-table th {
  padding: 2px 4px !important;
  font-size: 9px !important;
}

/* Colored dot — 8px, more visible */
.mp-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  border: 1px solid var(--bdr);
  cursor: pointer;
  flex-shrink: 0;
}

/* Period tabs — small pill-style */
.norm-tab {
  font-size: 11px !important;
  padding: 2px 8px !important;
  border-radius: 3px !important;
  line-height: 1.4 !important;
}
.norm-period-tabs { gap: 2px !important; }

/* Section card — minimal padding */
.mp-card {
  border-radius: 3px !important;
  padding: 0 !important;
}

/* Norm chart — flex fills col-2 */
#norm-chart-wrap {
  flex: 1 !important;
  min-height: 220px !important;
  height: auto !important;
  padding: 4px 6px 0 !important;
}
#norm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 8px 6px;
  border-top: 1px solid var(--bdr);
  min-height: 28px;
}
.norm-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  padding: 1px 6px;
  background: var(--bg3);
  border: 1px solid var(--bdr);
  border-radius: 10px;
  white-space: nowrap;
  cursor: pointer;
}
.norm-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.mp-view-all { font-size:10px; color:var(--teal); background:none; border:none; cursor:pointer; padding:0 3px; opacity:0.75; line-height:1; flex-shrink:0; }
.mp-view-all:hover { opacity:1; }