/* ---------------------------------------------------------------------
   THEME TRACKER — styles
   Dark dashboard styled after a trading-desk "theme momentum" tool.
--------------------------------------------------------------------- */
:root{
  --bg:            #12151a;
  --panel:         #181c22;
  --panel-2:       #1e232b;
  --panel-border:  #272e37;
  --row-hover:     #222831;
  --input-bg:      #15191f;
  --text:          #eef0f3;
  --text-dim:      #97a0ac;
  --text-faint:    #666f7c;
  --accent:        #22c55e;
  --accent-dim:    #15402b;
  --green:         #35d07f;
  --green-bg:      #113322;
  --red:           #ff5a5a;
  --red-bg:        #3a1418;
  --accent-line:   #2b323c;
  --shadow-sm:     0 1px 2px rgba(0,0,0,.35);
  --shadow-md:     0 10px 30px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.22);
  --shadow-lg:     0 24px 70px rgba(0,0,0,.5), 0 6px 20px rgba(0,0,0,.3);
  --ease:          cubic-bezier(.4,0,.2,1);
  --ease-spring:   cubic-bezier(.16,1,.3,1);
  --t-fast:        160ms var(--ease);
  --t-med:         220ms var(--ease);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}
*{ box-sizing: border-box; }

html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); }
body{ padding: 28px 32px 60px; }

/* Custom scrollbars — thin, quiet, brighten slightly on hover */
::-webkit-scrollbar{ height:9px; width:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:var(--panel-border); border-radius:999px; border:2px solid transparent; background-clip:padding-box;
  transition: background-color var(--t-fast);
}
::-webkit-scrollbar-thumb:hover{ background-color:#3a4149; background-clip:padding-box; }
*{ scrollbar-width: thin; scrollbar-color: var(--panel-border) transparent; }

a{ color:inherit; }

/* ---------- Header ---------- */
.header-row{
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom: 10px; flex-wrap: wrap; gap:12px;
}
.brand-row{ display:flex; align-items:center; gap:13px; }
.brand-logo{
  width:52px; height:52px; border-radius:12px; display:block; object-fit:cover;
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--panel-border);
}
h1{
  font-size: 26px; font-weight: 700; margin: 0 0 4px 0; letter-spacing: -0.02em;
}
.subtitle{
  color: var(--text-dim); font-size: 13px; margin:0;
}

/* Header right-side cluster: ticker count + status on the left, icon
   buttons on the right, all one row — kept visually secondary so it
   never competes with the <h1>. Wraps onto its own line under the brand
   row (via .header-row's own flex-wrap) rather than overlapping when
   the window gets narrow or the status text is at its longest. */
.header-actions{
  display:flex; flex-direction:row; align-items:center; gap:14px;
  flex-wrap:wrap; justify-content:flex-end;
}
.header-status{
  display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-dim);
  white-space:nowrap;
}
.status-sep{ color:var(--text-faint); }
.update-dot{ color:var(--text-faint); transition: color var(--t-fast); white-space:nowrap; }
.update-dot.ok{ color:var(--accent); }
.update-dot.err{ color:var(--red); }
.header-icons{ display:flex; gap:6px; flex:0 0 auto; }

.icon-btn{
  background: var(--panel); border:1px solid var(--panel-border); color: var(--text);
  padding: 7px 14px; border-radius: 7px; font-size: 13px; cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.icon-btn:hover{ background:#171b20; border-color:#333a44; }
.icon-btn:active{ transform: scale(.97); }
.icon-btn:disabled{ opacity:.5; cursor: default; }
.icon-btn.small{ padding:5px 11px; font-size:12px; }
.icon-btn.round{
  width:34px; height:34px; padding:0; border-radius:50%; font-size:15px;
  display:inline-flex; align-items:center; justify-content:center;
}

/* Slim top progress bar — sits right under the header, above the controls bar */
.progress-track{
  height:2.5px; width:100%; background:var(--panel-border); border-radius:999px; overflow:hidden;
  margin-bottom:14px; opacity:0; transition:opacity .2s;
}
.progress-track.active{ opacity:1; }
.progress-bar{
  height:100%; width:0%; background:var(--accent); transition:width .2s ease;
}

/* ---------- Controls bar ---------- */
.controls-bar{
  display:flex; align-items:center; gap: 18px; margin: 4px 0 14px;
  flex-wrap: wrap;
}
.rank-label{ color: var(--text-dim); font-size: 13px; margin-right: 2px; }
.rank-buttons{ display:flex; gap:6px; }
.rank-btn{
  background: transparent; border:1px solid var(--panel-border); color: var(--text-dim);
  padding: 6px 13px; border-radius: 6px; font-size: 13px; cursor:pointer; font-weight:600;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.rank-btn:hover{ color: var(--text); border-color:#3a4149; }
.rank-btn:active{ transform: scale(.97); }
.utility-buttons{ display:flex; gap:6px; }
.rank-btn.active{
  background: var(--accent); border-color: var(--accent); color: #06210f;
}
.spacer{ flex:1; }
.add-theme-form{
  display:flex; gap:8px; align-items:center;
}
.add-theme-form input{
  background: var(--input-bg); border:1px solid var(--panel-border); color: var(--text);
  padding: 7px 12px; border-radius: 7px; font-size: 13px; outline:none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.add-theme-form input:focus{ border-color:#4a5563; box-shadow: 0 0 0 3px rgba(34,197,94,.10); }
.add-theme-form input#newThemeName{ width: 190px; }
.add-theme-form input#newThemeTickers{ width: 220px; }
.add-theme-form input::placeholder{ color: var(--text-faint); }
.btn-primary{
  background: var(--accent); color:#06210f; border:none; padding:7px 16px;
  border-radius:7px; font-size:13px; font-weight:700; cursor:pointer;
  transition: filter var(--t-fast), transform var(--t-fast);
}
.btn-primary:hover{ filter:brightness(1.08); }
.btn-primary:active{ transform: scale(.97); }

/* ---------- Settings drawer ---------- */
.drawer-backdrop{
  display:flex; position: fixed; inset:0; background: rgba(4,5,7,0.55);
  -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%);
  z-index: 110; justify-content:flex-end;
  visibility:hidden; opacity:0; pointer-events:none;
  transition: opacity var(--t-med), visibility 0s linear var(--t-med);
}
.drawer-backdrop.open{
  visibility:visible; opacity:1; pointer-events:auto;
  transition: opacity var(--t-med), visibility 0s linear 0s;
}
.settings-drawer{
  width: 360px; max-width:92vw; height:100%; background: var(--panel);
  border-left:1px solid var(--panel-border); box-shadow: var(--shadow-lg);
  display:flex; flex-direction:column;
  transform: translateX(100%); transition: transform var(--t-med) var(--ease-spring);
}
.drawer-backdrop.open .settings-drawer{ transform: translateX(0); }
.drawer-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--panel-border); flex:0 0 auto;
}
.drawer-header h2{ margin:0; font-size:15px; font-weight:700; }
.drawer-body{
  flex:1 1 auto; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:20px;
}
.drawer-footer{
  flex:0 0 auto; padding:14px 18px; border-top:1px solid var(--panel-border);
  display:flex; flex-direction:column; gap:8px;
}
.settings-group{ display:flex; flex-direction:column; gap:10px; }
.settings-group h3{
  margin:0; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  color: var(--text-faint); font-weight:700;
}
.settings-field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.settings-field label{ font-size:11.5px; color:var(--text-dim); }
.settings-field input,.settings-field select{
  background:var(--input-bg); border:1px solid var(--panel-border); color:var(--text);
  padding:7px 10px; border-radius:6px; font-size:13px; min-width:0; outline:none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.settings-field input:focus,.settings-field select:focus{ border-color:#4a5563; box-shadow: 0 0 0 3px rgba(34,197,94,.10); }
.settings-field input[type="number"]{ width:100%; }
.settings-note{ color:var(--text-faint); font-size:11.5px; line-height:1.5; }
.settings-note code{ background:var(--panel-2); padding:1px 4px; border-radius:3px; }
.danger-btn{
  background:transparent; color:var(--red); border:1px solid rgba(255,90,90,.3);
  padding:8px 12px; border-radius:7px; font-size:12.5px; font-weight:700; cursor:pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.danger-btn:hover{ background:var(--red-bg); border-color:var(--red); }
.danger-btn:active{ transform: scale(.97); }
.toggle-field{
  display:flex; align-items:center; gap:8px; min-height:26px; color:var(--text);
  font-size:12.5px;
}
.toggle-field input{ accent-color:var(--accent); }

/* Requests/min: quick presets + a compact custom field for anything else */
.rate-row{ display:flex; align-items:center; gap:8px; }
.segmented{ display:flex; border:1px solid var(--panel-border); border-radius:6px; overflow:hidden; }
.seg-btn{
  background:var(--input-bg); border:none; border-right:1px solid var(--panel-border); color:var(--text-dim);
  padding:7px 11px; font-size:12.5px; font-weight:600; cursor:pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.seg-btn:last-child{ border-right:none; }
.seg-btn:hover{ color:var(--text); }
.seg-btn.active{ background:var(--accent); color:#06210f; }
.rate-row input[type="number"]{ width:70px; flex:0 0 auto; }

/* ---------- Popups (Add ticker / API key setup) ---------- */
.popup-backdrop{
  display:flex; position: fixed; inset:0; background: rgba(4,5,7,0.6);
  -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%);
  z-index: 120; align-items:center; justify-content:center; padding:20px;
  visibility:hidden; opacity:0; pointer-events:none;
  transition: opacity var(--t-med), visibility 0s linear var(--t-med);
}
.popup-backdrop.open{
  visibility:visible; opacity:1; pointer-events:auto;
  transition: opacity var(--t-med), visibility 0s linear 0s;
}
.popup-card{
  background: var(--panel); border:1px solid var(--panel-border); border-radius:12px;
  padding:18px 20px; width:100%; max-width:320px; box-shadow: var(--shadow-lg);
  transform: scale(.95) translateY(8px); opacity:0;
  transition: transform .24s var(--ease-spring), opacity .2s var(--ease);
}
.popup-backdrop.open .popup-card{ transform: scale(1) translateY(0); opacity:1; }
.popup-card h3{ margin:0 0 4px; font-size:15px; font-weight:700; }
.popup-sub{ color:var(--text-faint); font-size:11.5px; margin:0 0 14px; line-height:1.5; }
.popup-row{ display:flex; gap:8px; }
.popup-input{
  flex:1; min-width:0; background:var(--input-bg); border:1px solid var(--panel-border); color:var(--text);
  padding:8px 12px; border-radius:7px; font-size:13.5px; outline:none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.popup-input::placeholder{ color:var(--text-faint); }
.popup-input:focus{ border-color:#4a5563; box-shadow:0 0 0 3px rgba(34,197,94,.10); }
.popup-round-btn{
  background:var(--accent); color:#06210f; border:none; width:36px; height:36px; border-radius:50%;
  font-size:18px; font-weight:700; cursor:pointer; flex:0 0 auto; line-height:1;
  transition: filter var(--t-fast), transform var(--t-fast);
}
.popup-round-btn:hover{ filter:brightness(1.08); }
.popup-round-btn:active{ transform: scale(.94); }

/* ---------- Table Layout & Fixed Sizing (Alignment Fix) ---------- */
.table-card{
  background: var(--panel); border:1px solid var(--panel-border); border-radius:12px;
  overflow:hidden; box-shadow: var(--shadow-md);
}
.table-scroll{ overflow-x:auto; }
table{ width:100%; border-collapse: collapse; table-layout: fixed; }
.table-scroll table{ min-width: 760px; }

/* Main table column widths configuration */
thead th.col-theme, tbody td.col-theme { width: 24%; text-align: left; }
thead th.col-n, tbody td.col-n { width: 7%; text-align: center; }
thead th[data-period], tbody td.num { width: 9%; text-align: right; }
thead th.col-trend, tbody td.col-trend { width: 14%; text-align: right; }

thead th{
  font-size: 11px; letter-spacing:.04em; color: var(--text-dim);
  font-weight:600; padding: 11px 14px; border-bottom: 1px solid var(--accent-line);
  background: var(--panel-2);
  cursor:pointer; user-select:none; white-space:nowrap;
  transition: color var(--t-fast), background-color var(--t-fast);
}
thead th.col-n{ color:var(--text-faint); cursor:default; }
thead th.col-trend{ cursor:default; }
/* Hover highlight is only for actually-clickable sort columns (the period
   headers, both in the main table and inside an expanded theme's ticker
   list). Ticker/Last/filler headers in the ticker list aren't sortable —
   excluding them here used to be missing, which made hovering anywhere
   near "Ticker" or "Last" light up a big chunk of the header row. */
thead th:hover:not(.col-n):not(.col-trend):not(.ticker-col):not(.price-col):not(.filler-col){
  color: var(--text); background: var(--row-hover);
}
thead th.sorted{ color: var(--accent); }
.sort-arrow{ font-size:10px; margin-left:3px; }

tbody tr.theme-row{
  border-bottom: 1px solid var(--accent-line); cursor:pointer;
  transition: background-color var(--t-fast);
}
tbody tr.theme-row:last-child{ border-bottom:none; }
tbody tr.theme-row:hover{ background: var(--row-hover); }
tbody tr.theme-row.expanded{ background: var(--row-hover); }

td{ padding: 11px 14px; font-size: 13.5px; font-weight:500; vertical-align: middle; white-space:nowrap; }
td.col-theme{ white-space:normal; }
td.col-n{ color: var(--text-faint); font-size:12.5px; font-weight:500; white-space:normal; }
td.num{
  font-variant-numeric: tabular-nums; font-weight:600;
  transition: background-color var(--t-fast), color var(--t-fast), padding var(--t-fast);
}
/* Sorted-column highlight: extra padding (beyond the base td's 11px/14px)
   so the tinted background reads as a soft, generously-inset highlight
   rather than a tight box hugging the text — this matters most with the
   alpha sub-line on (see .alpha-tag below), where the background must cover
   both the main return and the α line underneath, not just the top line.
   The background itself is always applied to this <td> (see applyReturnStyle
   in js/ui.js, which takes an explicit bgTarget), never to an inner element,
   specifically so it always spans the cell's full padding box in both the
   one-line and two-line (alpha-on) layouts. table-layout:fixed keeps the
   column's outer width unchanged — only the padding inside it grows. */
td.num.sorted-col{ padding: 14px 16px; border-radius:9px; }
td.na{ color: var(--text-faint); font-weight:400; }

/* Breadth tag ("· 75% up") embedded in the Members cell — secondary info,
   so it stays visually quiet next to the n/total count (spec 2b/2c): small,
   dim by default, and only lightly tinted green/red past the 50% mark. Never
   its own column, so it can't disturb the fixed Members column width. */
.breadth-tag{ font-size: 10.5px; font-weight:500; }
.breadth-tag.pos{ color: rgba(53,208,127,.8); }
.breadth-tag.neg{ color: rgba(255,90,90,.8); }

/* Relative Strength vs SPY (state.showAlpha, opt-in — spec 3d): the normal
   return keeps living in .num-main exactly as it did as plain td text; the
   "α ±x.x" line underneath is deliberately smaller/dimmer so it never
   competes with the primary number. Both stay inside the same fixed-width
   td.num cell — off by default, this whole block is unused. */
.alpha-tag{ font-size: 10px; font-weight:500; opacity:.85; margin-top:1px; }

.theme-name-cell{ display:flex; align-items:center; gap:8px; }
.expand-caret{
  color: var(--text-faint); font-size:10px; width:10px; display:inline-block;
  transition: transform var(--t-med), color var(--t-fast);
}
.theme-row.expanded .expand-caret{ transform: rotate(90deg); color: var(--accent); }
.theme-name{ font-weight:600; letter-spacing:-0.005em; }
.theme-name-input{
  background: var(--input-bg); border:1px solid var(--accent-dim); color: var(--text);
  font-size:13.5px; font-weight:600; font-family:inherit; padding:2px 7px; border-radius:5px;
  outline:none; min-width:140px; box-shadow: 0 0 0 3px rgba(34,197,94,.12);
}
.badge-gaining{
  display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700;
  color: var(--green); border:1px solid rgba(53,208,127,.38); background: rgba(53,208,127,0.13);
  padding: 2.5px 9px 2.5px 7px; border-radius: 999px; letter-spacing:.03em; white-space:nowrap;
  box-shadow: 0 0 0 1px rgba(53,208,127,.07) inset;
}
.badge-custom{
  font-size:10px; color: var(--text-faint); border:1px solid var(--panel-border);
  background: rgba(255,255,255,0.02);
  padding:2.5px 8px; border-radius:999px; margin-left:2px;
}
.edit-theme, .del-theme{
  background:none; border:none; color: var(--text-faint); cursor:pointer; font-size:13px;
  padding: 2px 4px; border-radius:4px; visibility:hidden;
  transition: color var(--t-fast), background-color var(--t-fast), visibility var(--t-fast);
}
.theme-row:hover .edit-theme, .theme-row:hover .del-theme{ visibility:visible; }
.edit-theme:hover{ color: var(--accent); background: rgba(34,197,94,.10); }
.del-theme:hover{ color: var(--red); background: var(--red-bg); }

.trend-cell{ display:flex; justify-content:flex-end; }

/* ---------- Detail (members) panel alignment ---------- */
@keyframes detailIn{
  from{ opacity:0; transform: translateY(-5px); }
  to{ opacity:1; transform: translateY(0); }
}
/* Direct-child combinator (>) is deliberate: this only zeroes the OUTER
   wrapping <td colspan="10"> that holds .detail-wrap, so .detail-wrap's
   own full-bleed background/edges work. Without the ">", this descendant
   selector's specificity (0,1,2) — one class + two elements — beats every
   ".detail-wrap td" rule (0,1,1) below, which was silently zeroing the
   padding on every ticker/price/period cell inside the nested table too,
   collapsing the whole ticker-column indent back to 0. That was the real
   cause of "ticker text isn't aligned with the theme name" — not a value
   that needed increasing, but this selector leaking into cells it was
   never meant to touch. */
tr.detail-row > td{ padding: 0; }
.detail-wrap{
  padding: 4px 0 10px 0;
  background: var(--input-bg);
  box-shadow: inset 0 1px 0 var(--panel-border), inset 0 -1px 0 var(--panel-border);
}
.detail-wrap.detail-enter{ animation: detailIn .22s var(--ease); }

.detail-wrap table{
  width: 100%;
  table-layout: fixed;
}

/* Child table reuses the SAME percentage widths as the parent table's
   matching columns (theme→ticker, members→last, periods, trend→filler)
   so column boundaries line up pixel-for-pixel regardless of how the
   browser normalizes table-layout:fixed percentages — both tables are
   rendered at the same width and use the same per-column shares. */
.detail-wrap thead th.ticker-col, .detail-wrap td.ticker { width: 24%; text-align: left; }
.detail-wrap thead th.price-col, .detail-wrap td.price { width: 7%; text-align: right; color: var(--text-dim); }
.detail-wrap thead th[data-period], .detail-wrap td.num { width: 9%; text-align: right; }
.detail-wrap thead th.filler-col, .detail-wrap td.filler { width: 14%; }

.detail-wrap thead th{
  font-size: 10.5px;
  border-bottom: 1px solid var(--accent-line);
  padding: 6px 10px;
  background: transparent;
}

.detail-wrap td{
  padding: 3.5px 10px;
  font-size: 12.5px;
  color: var(--text-dim);
}

/* Ticker cell: a fixed-width remove-button slot on the LEFT, then the
   symbol + dimmed company name. The slot is 22px and the cell keeps the
   base 10px left padding from ".detail-wrap td" above — 10 + 22 = 32px,
   which is exactly the theme-row name text's own indent (14px cell
   padding + 10px caret width + 8px caret-to-name gap — see
   .theme-name-cell below). So it's the SYMBOL, not the button, that lines
   up with the theme name above it. The button always occupies its slot
   (opacity toggles on row hover, never added/removed from the DOM), so
   nothing shifts when it appears, and it can never be mistaken for part
   of the ticker text since it sits to the left of it, not the right. */
td.ticker{ cursor: pointer; }
.ticker-cell-inner{ display:flex; align-items:center; }
.ticker-remove-slot{
  flex:0 0 22px; display:inline-flex; align-items:center; justify-content:center;
}
.ticker-symbol{
  font-weight: 600; color: var(--text); transition: color .12s; flex:0 0 auto; margin-right:8px;
}
td.ticker:hover .ticker-symbol{ color: var(--accent); text-decoration: underline; }
.ticker-company{
  flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color: var(--text-faint); font-size:11px; font-weight:400; margin-right:8px;
}
.ticker-remove{
  background:none; border:none; color: var(--text-faint); cursor:pointer; font-size:12px;
  width:15px; height:15px; flex:0 0 auto; line-height:1; padding:0; border-radius:3px;
  opacity:0; transition: opacity var(--t-fast), color var(--t-fast), background-color var(--t-fast);
}
.detail-wrap tbody tr:hover .ticker-remove{ opacity:1; }
.ticker-remove:hover{ color: var(--red); background: var(--red-bg); }

.member-error{ color: var(--text-faint); font-style: italic; font-weight:400; }

/* "+ Ticker" header: an icon immediately before the "Ticker" label, inside
   the ticker list's header row itself (not as a separate element under the
   list, which used to render at the wrong width in the wrong place).
   .ticker-header-inner is a flex row so the icon and label sit on one line
   without disturbing the <th>'s own table-cell layout (don't set
   display:flex directly on a th/td — that pulls it out of the table's
   column-sizing algorithm). The icon lives in a fixed 22px slot — the same
   width as .ticker-remove-slot on the rows below — so the SLOT's left edge
   (where the whole "+ Ticker" cluster starts) lines up exactly with the
   remove-button slot's left edge on the ticker rows underneath it,
   independent of the icon being there. A small gap after the slot then
   separates the icon from the "Ticker" label so they don't visually touch
   ("+ Ticker", not "+ticker") — this shifts the label a few px right of
   where the ticker symbol below it starts, which is fine: it's the
   cluster's left edge that has to stay aligned, not the label text itself.
   Only the icon itself gets a hover state; "Ticker" isn't a sort control.
   It pops in with a quick scale+fade whenever its panel is (re)built, i.e.
   whenever the theme is opened. */
@keyframes addBtnIn{
  from{ opacity:0; transform: scale(.7); }
  to{ opacity:1; transform: scale(1); }
}
.ticker-header-inner{ display:flex; align-items:center; gap:6px; }
.ticker-header-icon-slot{
  flex:0 0 22px; display:inline-flex; align-items:center; justify-content:center;
}
.add-ticker-btn{
  background:var(--panel-2); border:1px solid var(--panel-border); color:var(--text-dim);
  width:18px; height:18px; border-radius:50%; font-size:12px; cursor:pointer; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  animation: addBtnIn .2s var(--ease-spring);
}
.add-ticker-btn:hover{ background:var(--row-hover); color:var(--accent); border-color:var(--accent-dim); transform: scale(1.1); }
.add-ticker-btn:active{ transform: scale(.92); }

/* ---------- Misc ---------- */
.empty-state{ padding: 60px 20px; text-align:center; color: var(--text-dim); }
.empty-state code{ background:var(--panel-2); padding:2px 6px; border-radius:4px; }
footer{ margin-top: 26px; color: var(--text-faint); font-size:11.5px; text-align:center; }

/* ---------- Ticker chart modal ---------- */
.chart-modal-backdrop{
  display:flex; position: fixed; inset:0; background: rgba(4,5,7,0.72);
  -webkit-backdrop-filter: blur(7px) saturate(120%); backdrop-filter: blur(7px) saturate(120%);
  z-index: 100; align-items: center; justify-content: center; padding: 24px;
  visibility:hidden; opacity:0; pointer-events:none;
  transition: opacity var(--t-med), visibility 0s linear var(--t-med);
}
.chart-modal-backdrop.open{
  visibility:visible; opacity:1; pointer-events:auto;
  transition: opacity var(--t-med), visibility 0s linear 0s;
}
.chart-modal{
  background: var(--panel); border:1px solid var(--panel-border); border-radius: 14px;
  width: 100%; max-width: 760px; padding: 20px 22px 16px; box-shadow: var(--shadow-lg);
  transform: scale(.96) translateY(10px); opacity:0;
  transition: transform .28s var(--ease-spring), opacity .22s var(--ease);
}
.chart-modal-backdrop.open .chart-modal{ transform: scale(1) translateY(0); opacity:1; }
.chart-modal-header{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom: 10px; }
.chart-ticker-row{ display:flex; align-items:baseline; gap:10px; }
.chart-ticker{ font-size: 20px; font-weight:800; letter-spacing:-0.01em; }
.chart-price{ font-size: 16px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.chart-change{ font-size: 14px; font-weight:700; font-variant-numeric: tabular-nums; transition: color var(--t-fast); }
.chart-sub{ font-size: 12px; color: var(--text-faint); margin-top:2px; }
.chart-range-buttons{ display:flex; gap:6px; margin-bottom: 12px; }
.chart-range-buttons .rank-btn{ padding: 5px 11px; font-size:12px; }
.chart-canvas-wrap{ width:100%; }
.chart-canvas-wrap svg{ width:100%; height:auto; display:block; }
.chart-empty{ padding: 50px 10px; text-align:center; color: var(--text-dim); font-size:13px; }
.chart-axis-label{ fill: var(--text-faint); font-size: 10px; font-family: inherit; }
.chart-gridline{ stroke: var(--accent-line); stroke-width: 1; }
.chart-crosshair-label{ fill: var(--text); font-size: 10.5px; font-family: inherit; }

/* ---------- Status toast (theme/ticker CRUD + settings feedback only —
   NOT used for cache/refresh status, which lives in the header). Fixed
   position so it floats above the page and never reserves layout space,
   even while visible; fades + slides in on show, then fades back out on
   its own (see setStatus() in js/ui.js). ---------- */
.status-line{
  position: fixed; top: 84px; right: 32px; z-index: 200; max-width: 340px;
  background: var(--panel); border:1px solid var(--panel-border); border-radius:8px;
  box-shadow: var(--shadow-md); padding: 9px 14px; font-size:12.5px; color:var(--text-dim);
  opacity:0; visibility:hidden; transform: translateY(-8px) scale(.98); pointer-events:none;
  transition: opacity var(--t-med), transform var(--t-med), visibility 0s linear var(--t-med), color var(--t-fast);
}
.status-line.show{
  opacity:1; visibility:visible; transform: translateY(0) scale(1); pointer-events:auto;
  transition: opacity var(--t-med), transform var(--t-med), visibility 0s linear 0s, color var(--t-fast);
}
.status-line.err{ color:var(--red); border-color:rgba(255,90,90,.35); }