/* Workspace tabs and the full-page views (Heatmap, G8 Macro, Screener, Earnings & Reports, …).
   Reads the app's own tokens from app.css, so light and dark both work. */

:root { --ws-bar: 42px; --ws-radius: 10px; }

/* ---------- layout ---------- */
.wsbar {
  height: var(--ws-bar);
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 0 10px 0 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 5;
}
.topbar .brand { display: none; }
body[data-ws="charts"] .main { height: calc(100% - 44px - var(--ws-bar)); }
body[data-ws="charts"] .ws-views { display: none; }
body[data-ws="view"] .topbar,
body[data-ws="view"] .main { display: none; }
.ws-views { height: calc(100% - var(--ws-bar)); position: relative; background: var(--bg); }
.ws-view { position: absolute; inset: 0; overflow: auto; padding: 22px clamp(14px, 2.4vw, 32px) 40px; }
.ws-view[hidden] { display: none; }
.ws-view.ws-home { padding: 0; overflow: hidden; }

/* ---------- tab bar ---------- */
.ws-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: -0.01em; font-size: 14px; flex: none; padding-right: 6px; }
.ws-brand img { border-radius: 13%; }
/* the BullAnt wordmark: BULL in silver, ANT in gold, like the brand artwork */
.ws-word { font-family: "Montserrat", "Instrument Sans", system-ui, sans-serif; font-weight: 800; font-size: 15px; letter-spacing: .02em; }
.ws-word b { font-weight: inherit; background: linear-gradient(180deg, #ffffff 0%, #c9ccd2 55%, #8f949c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ws-word i { font-style: normal; color: var(--accent); }
[data-theme="light"] .ws-word b { background: linear-gradient(180deg, #6b6f77 0%, #2c2f35 100%); -webkit-background-clip: text; background-clip: text; }
.ws-strip { display: flex; align-items: flex-end; gap: 2px; min-width: 0; overflow-x: auto; overflow-y: hidden; flex: 1; scrollbar-width: none; }
.ws-strip::-webkit-scrollbar { height: 0; }
.ws-tab {
  --tab-c: var(--accent);
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 10px;
  border: 1px solid transparent; border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: transparent; color: var(--muted);
  font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer;
  flex: none;
  transition: color .15s, background .15s;
}
.ws-tab:hover { color: var(--text); background: var(--hover); }
.ws-tab.active { color: var(--text); background: var(--bg); border-color: var(--border); }
.ws-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--bg); }
.ws-tab::before { content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: var(--tab-c); opacity: 0; transition: opacity .15s; }
.ws-tab.active::before, .ws-tab[style]::before { opacity: 1; }
.ws-tab[style]:not(.active)::before { opacity: .55; }
.ws-ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ws-tab.active .ws-ico { color: var(--tab-c); }
.ws-more { margin-left: 2px; margin-right: -6px; padding: 0 5px; border-radius: 4px; line-height: 18px; opacity: 0; color: var(--muted); }
.ws-tab:hover .ws-more, .ws-tab.active .ws-more { opacity: 1; }
.ws-more:hover { background: var(--panel-2); color: var(--text); }
.ws-tab.dragging { opacity: .4; }
.ws-tab.drop-before { box-shadow: inset 2px 0 0 var(--accent); }
.ws-tab.drop-after { box-shadow: inset -2px 0 0 var(--accent); }
.ws-rename { font: inherit; height: 22px; padding: 0 4px; border: 1px solid var(--accent); border-radius: 4px; background: var(--input); color: var(--text); }
.ws-add { align-self: center; display: grid; place-items: center; width: 28px; height: 28px; margin-left: 4px; border: 1px dashed var(--border); border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; flex: none; }
.ws-add:hover { color: var(--text); border-color: var(--muted); border-style: solid; }
.ws-add svg, .ws-icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ws-right { display: flex; align-items: center; gap: 6px; flex: none; }
.ws-icon-btn { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.ws-icon-btn:hover { background: var(--hover); color: var(--text); }
body[data-ws="charts"] #wsTheme { display: none; }
.ws-profile { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px 0 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text); font: inherit; font-weight: 500; cursor: pointer; }
.ws-profile:hover { border-color: var(--muted); }
.ws-profile.cta { padding: 0 14px; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.ws-profile.cta:hover { filter: brightness(1.08); }
.ws-avatar { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; }

/* ---------- menus ---------- */
.ws-menu { position: fixed; z-index: 60; min-width: 190px; padding: 6px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); }
.ws-menu.wide { width: 330px; }
.ws-menu > button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ws-menu > button:hover:not([disabled]) { background: var(--hover); }
.ws-menu > button[disabled] { opacity: .4; cursor: default; }
.ws-menu > button.danger { color: var(--down); }
.ws-menu hr { border: 0; border-top: 1px solid var(--border); margin: 5px 2px; }
.ws-menu-h { padding: 6px 10px 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ws-menu-type .ws-ico { width: 18px; height: 18px; color: var(--accent); }
.ws-menu-type span { display: flex; flex-direction: column; gap: 1px; }
.ws-menu-type small { color: var(--muted); font-size: 11.5px; }
.ws-menu-colors { display: flex; gap: 6px; padding: 7px 10px; }
.sw { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--panel); background: var(--sw); box-shadow: 0 0 0 1px var(--border); cursor: pointer; padding: 0; }
.sw.on, input:checked + .sw { box-shadow: 0 0 0 2px var(--text); }
.ws-swatches { display: flex; gap: 8px; padding-top: 4px; }
.sw-lab input { position: absolute; opacity: 0; pointer-events: none; }
.ws-form { display: grid; gap: 14px; }
.ws-form .field { font-size: 12px; }
.ws-form .in { width: 100%; font: inherit; }
.ws-form textarea.in { height: auto; padding: 7px; resize: vertical; }
.ws-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; padding-top: 4px; color: var(--text); font-size: 13px; }
.ws-check { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text); cursor: pointer; align-self: end; height: 28px; }

/* ---------- shared view pieces ---------- */
.ws-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 18px; }
.ws-head h1 { margin: 0 0 4px; font-size: 24px; font-weight: 650; letter-spacing: -0.02em; color: var(--text); }
.ws-head p { margin: 0; color: var(--muted); max-width: 720px; font-size: 13.5px; }
.ws-controls { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.ws-controls .btn, .sc-filters .btn { height: 30px; }
.ws-controls .in, .sc-filters .in { height: 30px; }
.ws-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--ws-radius); }
.ws-card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 16px 6px; }
.ws-card-h h2 { margin: 0; font-size: 15px; font-weight: 600; }
.ws-scroll { overflow-x: auto; }
.ws-state { display: grid; place-items: center; min-height: 220px; color: var(--muted); text-align: center; padding: 30px; }
.ws-state.err { color: var(--down); }
.ws-foot { color: var(--muted); font-size: 12px; margin: 16px 2px 0; max-width: 900px; line-height: 1.55; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 600; vertical-align: 2px; }
.up { color: var(--up); } .down { color: var(--down); } .muted { color: var(--muted); }
.ws-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ws-table th { position: sticky; top: 0; z-index: 1; background: var(--panel); text-align: left; font-weight: 500; font-size: 11.5px; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ws-table th small { display: block; font-size: 10.5px; opacity: .8; }
.ws-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ws-table tbody tr:last-child td { border-bottom: 0; }
.ws-table .num { text-align: right; }
.ws-table th.sortable { cursor: pointer; user-select: none; }
.ws-table th.sortable:hover, .ws-table th.sorted { color: var(--text); }
.seg { display: inline-flex; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.seg button { height: 26px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.seg button.on { background: var(--accent); color: var(--accent-ink); }
.ws-tip { position: absolute; z-index: 10; pointer-events: none; max-width: 300px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); font-size: 12.5px; }
.tip-grid { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin-top: 6px; }
.tip-grid span { color: var(--muted); }
.tip-grid b { font-weight: 600; white-space: normal; }

/* ---------- heatmap ---------- */
.ws-heatmap { display: flex; flex-direction: column; }
.hm-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.hm-stats > div { padding: 8px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; gap: 1px; min-width: 110px; }
.hm-stats small { color: var(--muted); font-size: 11px; }
.hm-stats b { font-size: 15px; font-variant-numeric: tabular-nums; }
.hm-box { position: relative; flex: 1; min-height: 420px; border-radius: var(--ws-radius); overflow: hidden; background: var(--bg); }
.hm-tile { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 3px; color: #fff; cursor: pointer; overflow: hidden; line-height: 1.1; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); transition: filter .12s; }
.hm-tile:hover { filter: brightness(1.18); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); z-index: 2; }
.hm-tile b { font-weight: 700; }
.hm-tile span { font-size: .72em; opacity: .92; font-variant-numeric: tabular-nums; }
.hm-group { position: absolute; height: 18px; padding: 1px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-legend { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.hm-legend i { display: block; width: 160px; height: 8px; border-radius: 4px; }
.hm-legend .muted { margin-left: auto; }

/* ---------- G8 macro ---------- */
.mc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.mc-card { position: relative; padding: 14px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--ws-radius); display: flex; flex-direction: column; gap: 10px; }
.mc-top { display: flex; gap: 10px; align-items: center; }
.mc-top b { display: block; font-size: 14px; }
.mc-top small { color: var(--muted); font-size: 11.5px; }
.mc-flag { font-size: 26px; line-height: 1; }
.mc-flag.sm { font-size: 16px; vertical-align: -2px; margin-right: 4px; }
.mc-rate small { display: block; color: var(--muted); font-size: 11px; }
.mc-rate b { font-size: 26px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-right: 8px; }
.mc-rate span { font-size: 11.5px; }
.mc-spark { position: relative; height: 40px; cursor: crosshair; }
.mc-spark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mc-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--panel); }
.mc-cross { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--muted); opacity: 0; pointer-events: none; }
.mc-spark-tip { position: absolute; right: 0; top: -26px; padding: 2px 8px; border-radius: 5px; background: var(--panel-2); font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; pointer-events: none; }
.mc-spark.hover .mc-cross, .mc-spark.hover .mc-spark-tip { opacity: 1; }
.mc-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px solid var(--border); padding-top: 10px; }
.mc-quotes > div { display: flex; flex-direction: column; gap: 1px; border-radius: 6px; padding: 2px 4px; margin: -2px -4px; }
.mc-quotes .clickable { cursor: pointer; }
.mc-quotes .clickable:hover { background: var(--hover); }
.mc-quotes small { color: var(--muted); font-size: 11px; }
.mc-quotes b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.mc-quotes span { font-size: 11.5px; }
.mc-table td:first-child { font-weight: 500; }
.mc-table td.num { min-width: 120px; }
.mc-table td.num > span:last-child { position: relative; font-variant-numeric: tabular-nums; }
.mc-bar { display: inline-block; position: relative; width: 56px; height: 6px; margin-right: 10px; border-radius: 3px; background: var(--panel-2); vertical-align: 1px; overflow: hidden; }
.mc-bar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 3px; background: var(--accent); opacity: .85; }
.mc-bar.polar::after { content: ""; position: absolute; left: 50%; top: -1px; bottom: -1px; width: 1px; background: var(--muted); }

/* ---------- screener ---------- */
.sc-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.sc-filters .grow { flex: 1; min-width: 180px; }
.sc-filters .grow .in { width: 100%; }
.sc-summary { display: flex; align-items: center; gap: 10px; margin: 0 2px 10px; font-size: 13px; }
.sc-summary .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); }
.sc-card { overflow: hidden; }
.sc-card .ws-scroll { max-height: calc(100vh - 290px); overflow: auto; }
.sc-table tbody tr { cursor: pointer; }
.sc-table tbody tr:hover td { background: var(--hover); }
.sc-name { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.sc-watch { border: 0; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; padding: 0 4px; }
.sc-watch:hover, .sc-watch.on { color: var(--gold); }
.sc-more { padding: 12px; text-align: center; border-top: 1px solid var(--border); }

/* ---------- earnings & reports ---------- */
.er-week { display: grid; grid-template-columns: repeat(7, minmax(172px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.er-day { background: var(--panel); border: 1px solid var(--border); border-radius: var(--ws-radius); min-width: 0; display: flex; flex-direction: column; }
.er-day.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.er-day.weekend { background: color-mix(in srgb, var(--panel) 55%, var(--bg)); }
.er-day > header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 12px 14px 10px; border-bottom: 1px solid var(--border); }
.er-day > header b { font-size: 14px; }
.er-day > header span { font-size: 12px; color: var(--muted); }
.er-day.today > header span { color: var(--accent); font-weight: 600; }
.er-sec { padding: 10px 12px 4px; }
.er-sec + .er-sec { border-top: 1px dashed var(--border); }
.er-sec h3 { display: flex; justify-content: space-between; margin: 0 2px 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.er-sec h3 span { font-variant-numeric: tabular-nums; }
.er-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.er-list li { display: grid; align-items: baseline; column-gap: 8px; row-gap: 1px; padding: 6px 7px; border-radius: 6px; font-size: 12.5px; }
.er-co { grid-template-columns: 14px 1fr auto; cursor: pointer; }
.er-co .er-nm { grid-column: 2 / -1; }
.er-ev { grid-template-columns: 50px 1fr; }
.er-ev .er-nm { grid-column: 2; color: var(--text); white-space: normal; }
.er-ev small { grid-column: 2; color: var(--muted); font-size: 11px; }
.er-ev .er-flag { display: none; }
.er-co:hover, .er-ev:hover { background: var(--hover); }
.er-co.watch { background: var(--gold-soft); }
.er-co.watch b::after { content: " ★"; color: var(--gold); }
.er-when { color: var(--muted); text-align: center; font-size: 11px; }
.er-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); min-width: 0; font-size: 11.5px; }
.er-t { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.er-t .er-flag2 { display: block; font-size: 14px; margin-top: 2px; }
.er-cap { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.er-none { margin: 4px 6px 10px; font-size: 12px; }

/* ---------- watchlist board, notes, web ---------- */
.bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.bd-card { padding: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--ws-radius); cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: border-color .15s, transform .15s; }
.bd-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.bd-top { display: flex; justify-content: space-between; align-items: baseline; }
.bd-top b { font-size: 15px; }
.bd-top small { color: var(--muted); font-size: 10.5px; letter-spacing: .05em; }
.bd-price { font-size: 26px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bd-spark { width: 100%; height: 56px; margin-top: 8px; }
.nt-area { width: 100%; height: calc(100% - 90px); min-height: 300px; padding: 16px; border: 1px solid var(--border); border-radius: var(--ws-radius); background: var(--panel); color: var(--text); font: 14px/1.6 inherit; resize: none; }
.ws-web { display: flex; flex-direction: column; }
.wb-frame { flex: 1; width: 100%; min-height: 400px; border: 1px solid var(--border); border-radius: var(--ws-radius); background: #fff; }
.ws-home-frame { width: 100%; height: 100%; border: 0; display: block; background: #08090b; }

@media (max-width: 1100px) { .mc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .mc-grid { grid-template-columns: 1fr; }
  .ws-brand span { display: none; }
  .ws-profile span:not(.ws-avatar) { display: none; }
  .ws-profile.cta span { display: inline; }
  .ws-view { padding: 16px 14px 32px; }
  .ws-head h1 { font-size: 20px; }
  .ws-tab { padding: 0 9px; }
}
.bd-grid > .ws-state { grid-column: 1 / -1; }

/* ---------- shared line chart ---------- */
.lc-wrap { position: relative; padding: 0 12px 8px; }
.lc { display: block; width: 100%; height: auto; overflow: visible; }
.lc-grid { stroke: var(--border); stroke-width: 1; }
.lc-zero { stroke: var(--muted); stroke-width: 1; }
.lc-yt { fill: var(--muted); font-size: 11px; text-anchor: end; font-variant-numeric: tabular-nums; }
.lc-xt { fill: var(--muted); font-size: 11px; text-anchor: middle; }
.lc-lab { fill: var(--text); font-size: 11.5px; font-weight: 600; }
.lc-cross { stroke: var(--muted); stroke-dasharray: 3 3; }
.lc-neg { fill: var(--down); opacity: .08; }
.lc-neg-t { fill: var(--down); font-size: 11px; font-weight: 600; opacity: .8; }
.lc-tip { position: absolute; top: 8px; z-index: 3; pointer-events: none; min-width: 150px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); font-size: 12px; }
.lc-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 2px 16px 8px; font-size: 12px; color: var(--muted); }
.lc-legend span { display: inline-flex; align-items: center; gap: 7px; }
.lc-legend i { display: inline-block; width: 22px; }

/* ---------- markets ---------- */
.mk-us { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.mk-tile { padding: 12px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--ws-radius); cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; transition: border-color .15s; }
.mk-tile:hover, .mk-card li:hover { border-color: var(--accent); }
.mk-tile small { color: var(--muted); font-size: 11.5px; }
.mk-tile b { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.mk-tile > span { font-size: 12px; font-variant-numeric: tabular-nums; }
.mk-tile svg { width: 100%; height: 40px; margin-top: 6px; }
.mk-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.mk-card { padding: 12px 6px 8px; min-width: 0; }
.mk-card h3 { margin: 0 10px 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mk-list { list-style: none; margin: 0; padding: 0; }
.mk-list li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: baseline; padding: 6px 10px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; font-size: 12.5px; }
.mk-list li:hover { background: var(--hover); }
.mk-list b { font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-list li > span:last-child { font-variant-numeric: tabular-nums; font-size: 12px; min-width: 58px; text-align: right; }
.mk-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); min-width: 0; }
.mk-list li:not(:has(.mk-flag)):not(:has(.mk-tk)) { grid-template-columns: 1fr auto auto; }
.mk-tk { font-weight: 700; }
.mk-movers .mk-nm { color: var(--muted); }
.mk-h { margin: 22px 2px 10px; font-size: 16px; font-weight: 600; }
.mk-movers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1300px) { .mk-us { grid-template-columns: repeat(3, 1fr); } .mk-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .mk-us, .mk-grid, .mk-movers { grid-template-columns: 1fr 1fr; } }

/* ---------- yield curves ---------- */
.yc-pick { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.yc-pick .ws-check { height: 24px; }
.yc-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.yc-kpi { padding: 12px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--ws-radius); display: flex; flex-direction: column; gap: 3px; }
.yc-kpi small { color: var(--muted); font-size: 11.5px; }
.yc-kpi b { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; }
.yc-kpi > span { font-size: 12px; color: var(--muted); }
.yc-kpi em { font-style: normal; font-weight: 600; font-size: 12px; }
.yc-card { margin-bottom: 14px; }
.yc-table td:first-child { font-weight: 600; }
@media (max-width: 1000px) { .yc-kpis { grid-template-columns: repeat(2, 1fr); } }

/* ---------- portfolio ---------- */
.pf-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.pf-kpi { padding: 12px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--ws-radius); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pf-kpi small { color: var(--muted); font-size: 11.5px; }
.pf-kpi b { font-size: 21px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-kpi > span { font-size: 12px; font-variant-numeric: tabular-nums; }
.pf-table tbody tr { cursor: pointer; }
.pf-table tbody tr:hover td { background: var(--hover); }
.pf-w { display: inline-block; width: 60px; height: 6px; border-radius: 3px; background: var(--panel-2); vertical-align: 1px; margin-right: 6px; overflow: hidden; }
.pf-w b { display: block; height: 100%; background: var(--accent); }
.pf-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin: 14px 0; }
.pf-risk { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 6px 16px 14px; }
.pf-risk small { display: block; color: var(--muted); font-size: 11px; }
.pf-risk b { font-variant-numeric: tabular-nums; }
.pf-alloc { padding-bottom: 12px; }
.pf-alloc h4 { margin: 8px 16px 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pf-bars { list-style: none; margin: 0; padding: 0 16px; display: grid; gap: 6px; }
.pf-bars li { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr 46px; gap: 10px; align-items: center; font-size: 12.5px; }
.pf-bars i { display: block; height: 8px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.pf-bars i b { display: block; height: 100%; background: var(--accent); }
.pf-bars em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.pf-tx { max-height: 360px; overflow: auto; }
.pf-empty { padding: 32px; text-align: center; max-width: 640px; margin: 40px auto; }
.pf-empty h2 { margin: 0 0 8px; }
.pf-empty p { color: var(--muted); }
.pf-empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 18px 0; }
.pf-empty code, .pf-form code { background: var(--hover); padding: 1px 5px; border-radius: 4px; }
.pf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf-err { margin: 0; min-height: 1.2em; font-size: 12.5px; }
.ws-controls label.btn, .pf-empty-actions label.btn { display: inline-flex; align-items: center; cursor: pointer; }
@media (max-width: 1100px) { .pf-kpis { grid-template-columns: repeat(2, 1fr); } .pf-grid { grid-template-columns: 1fr; } .pf-risk { grid-template-columns: repeat(3, 1fr); } }

/* ---------- world clock ---------- */
.wc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
@media (max-width: 1000px) { .wc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .wc-grid { grid-template-columns: 1fr; } .wc-row, .wc-axis, .wc-now-wrap { grid-template-columns: 96px 1fr; } }
.wc-card { padding: 14px 16px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--ws-radius); display: flex; flex-direction: column; align-items: stretch; gap: 6px; transition: border-color .2s; }
.wc-card.open { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.wc-card header { display: flex; align-items: center; gap: 10px; }
.wc-card header b { display: block; font-size: 15px; }
.wc-card header small { color: var(--muted); font-size: 11.5px; }
.wc-flag { font-size: 24px; line-height: 1; }
.wc-badge { margin-left: auto; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--panel-2); color: var(--muted); white-space: nowrap; }
.wc-badge.is-open { background: var(--accent); color: var(--accent-ink); }
.wc-badge.is-lunch { background: var(--accent-soft); color: var(--accent); }
.wc-svg { width: min(100%, 220px); height: auto; align-self: center; margin: 4px 0; }
.wc-face { fill: var(--bg); stroke: var(--border); stroke-width: 1.5; }
.wc-card.night .wc-face { fill: color-mix(in srgb, var(--bg) 82%, #000); }
.wc-sess { fill: var(--accent); opacity: .16; }
.wc-card.open .wc-sess { opacity: .3; }
.wc-ring { fill: none; stroke: var(--panel-2); stroke-width: 4; }
.wc-ring-sess { fill: none; stroke: var(--muted); stroke-width: 5; stroke-linecap: round; opacity: .45; transition: stroke .3s, opacity .3s; }
.wc-card.open .wc-ring-sess { stroke: var(--accent); opacity: 1; filter: drop-shadow(0 0 3px rgba(250, 213, 36, .45)); }
.wc-tick { stroke: var(--muted); stroke-width: 1; opacity: .55; }
.wc-tick.big { stroke: var(--text); stroke-width: 2; opacity: .8; }
.wc-num { fill: var(--muted); font-size: 12px; font-weight: 600; text-anchor: middle; }
.wc-ampm { fill: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-anchor: middle; }
.wc-h { stroke: var(--text); stroke-width: 5; stroke-linecap: round; }
.wc-m { stroke: var(--text); stroke-width: 3.2; stroke-linecap: round; }
.wc-s { stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; }
.wc-pin { fill: var(--accent); stroke: var(--bg); stroke-width: 1.5; }
.wc-digital { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.wc-digital b { font-size: 18px; font-variant-numeric: tabular-nums; }
.wc-digital small { color: var(--muted); font-size: 11.5px; text-align: right; }
.wc-detail { margin: 0; font-size: 12.5px; }
.wc-card.open .wc-detail { color: var(--accent); }
.wc-hours { margin: 0; font-size: 11.5px; color: var(--muted); }
.wc-strip-card { padding-bottom: 14px; }
.wc-strip { position: relative; padding: 20px 16px 0; }
.wc-row, .wc-axis, .wc-now-wrap { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: center; }
.wc-row { height: 26px; font-size: 12.5px; }
.wc-track { position: relative; height: 12px; border-radius: 6px; background: var(--panel-2); }
.wc-track i { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: var(--accent); opacity: .85; }
.wc-track em { position: absolute; left: 8px; top: -2px; font-size: 11px; font-style: normal; color: var(--muted); }
.wc-axis { margin-top: 4px; height: 18px; }
.wc-axis > div { position: relative; height: 100%; }
.wc-axis > div span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--muted); }
.wc-axis > div span:first-child { transform: none; }
.wc-now-wrap { position: absolute; inset: 18px 16px 18px 16px; pointer-events: none; }
.wc-now-wrap > div { position: relative; height: 100%; }
.wc-now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--text); border-radius: 1px; }
.wc-now::after { content: "Now"; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 700; color: var(--text); }

/* ---------- chart legend: pre-market / after-hours price ---------- */
.legend .row.ext { display: flex; gap: 8px; align-items: baseline; font-variant-numeric: tabular-nums; }
.ext-tag { padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; background: var(--accent); color: var(--accent-ink); }
.ext-tag.post { background: #7c8cff; color: #fff; }

/* ---------- tab row overflow ---------- */
.ws-arrow { align-self: center; display: grid; place-items: center; width: 24px; height: 28px; border: 0; border-radius: 6px; background: var(--panel-2); color: var(--text); cursor: pointer; flex: none; }
.ws-arrow[hidden] { display: none; }
.ws-arrow:hover { background: var(--accent); color: var(--accent-ink); }
.ws-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ws-overflow .ws-strip { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); }
.ws-menu > button.on { background: var(--accent-soft); }
.ws-menu > button .ws-ico { width: 15px; height: 15px; color: var(--muted); }
#wsAll { margin-left: 2px; }
/* the ⋯ menu doesn't take room on inactive tabs; it floats in on hover */
.ws-tab .ws-more { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); margin: 0; background: var(--hover); }
.ws-tab.active { padding-right: 30px; }
.ws-tab.active .ws-more { background: transparent; }
.ws-tab:not(.active):hover .ws-more { box-shadow: -8px 0 8px var(--hover); }

/* ---------- options ---------- */
.op-sym { width: 90px; text-transform: uppercase; }
.op-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.op-scroll { max-height: calc(100vh - 220px); overflow: auto; }
.op-table th, .op-table td { padding: 6px 9px; font-size: 12.5px; }
.op-table th.op-side { text-align: center; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.op-table thead tr:first-child th { top: 0; }
.op-table thead tr:nth-child(2) th { top: 31px; }
.op-strike { text-align: center !important; font-weight: 700; background: var(--panel-2) !important; color: var(--text); min-width: 70px; }
.op-strike.mp { box-shadow: inset 0 0 0 1.5px var(--muted); }
.op-table td.itm { background: var(--accent-soft); }
.op-table tbody tr:hover td { background: var(--hover); }
.op-spot td { padding: 0 !important; height: 0; border-bottom: 2px solid var(--accent) !important; position: relative; }
.op-spot span { position: absolute; left: 50%; transform: translate(-50%, -50%); padding: 1px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; white-space: nowrap; z-index: 1; }
@media (max-width: 1200px) { .op-kpis { grid-template-columns: repeat(3, 1fr); } }

/* ---------- IPO calendar ---------- */
.ipo-nav button[data-label] { min-width: 140px; }
.ipo-card { margin-bottom: 14px; }
.ipo-empty { padding: 4px 16px 16px; margin: 0; }
.ws-table tr.clickable { cursor: pointer; }
.ws-table tr.clickable:hover td { background: var(--hover); }

/* ---------- dividends ---------- */
.dv-cal { margin-top: 14px; }
.dv-scroll { max-height: 640px; overflow: auto; }
.dv-day td { background: var(--panel-2) !important; font-weight: 600; font-size: 12px; letter-spacing: .02em; }
.dv-watch td { background: var(--gold-soft); }
.dv-name { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.dv-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 20px; }
.dv-bars i { display: block; width: 6px; border-radius: 1.5px; background: var(--accent); opacity: .85; }

.ws-profile[hidden] { display: none; }