:root {
  color-scheme: light;
  --bg: #f3f5f4;
  --surface: #ffffff;
  --surface-strong: #18201d;
  --surface-soft: #e9eeeb;
  --line: #ccd4d0;
  --line-dark: #39443f;
  --text: #19201d;
  --muted: #5d6963;
  --muted-dark: #aebbb4;
  --accent: #0d7a4c;
  --accent-hover: #09613c;
  --positive: #087b49;
  --negative: #c03945;
  --focus: #0b66c3;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
button, input, select { min-height: 44px; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .table-wrap:focus-visible, .permission-feature-row:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.eyebrow { margin: 0 0 6px; color: var(--accent); font-size: 12px; font-weight: 800; }
.button {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0 16px;
  background: var(--surface);
  color: var(--text);
  font-weight: 650;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.button:hover:not(:disabled) { border-color: #87958e; background: var(--surface-soft); }
.button-primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.button-primary:hover:not(:disabled) { border-color: var(--accent-hover); background: var(--accent-hover); }

.login-page { display: grid; place-items: center; padding: 24px; }
body.login-page {
  background: #07090c;
  /* 登录页暗色 token：子元素全部引用变量，一处覆盖即整体转暗 */
  --bg: #07090c;
  --surface: rgba(15, 19, 24, .86);
  --surface-strong: #e8edf2;
  --surface-soft: rgba(255, 255, 255, .06);
  --line: rgba(255, 255, 255, .14);
  --line-dark: rgba(255, 255, 255, .08);
  --text: #e9eef4;
  --muted: #8d99a8;
  --muted-dark: #6d7a88;
  --accent: #3ecf8e;
  --accent-hover: #35b87d;
  --negative: #e17c86;
  --border: rgba(255, 255, 255, .12);
}
#asciiKlineBg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  display: block;
}
.login-vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 42%, rgba(7, 9, 12, 0) 0%, rgba(7, 9, 12, .55) 62%, rgba(7, 9, 12, .92) 100%),
    linear-gradient(180deg, rgba(7, 9, 12, .35) 0%, rgba(7, 9, 12, 0) 22%, rgba(7, 9, 12, 0) 70%, rgba(7, 9, 12, .5) 100%);
}
.login-page .login-panel {
  position: relative;
  z-index: 2;
  background: var(--surface);
  backdrop-filter: blur(16px);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .05) inset;
}
.login-page .login-panel input {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  color: var(--text);
}
.login-page .login-panel input::placeholder { color: var(--muted-dark); }
.login-page .login-panel input:focus {
  border-color: var(--accent);
  outline: 2px solid rgba(62, 207, 142, .25);
  outline-offset: 0;
}
.login-page .brand-mark {
  background: rgba(62, 207, 142, .14);
  border: 1px solid rgba(62, 207, 142, .35);
  color: #3ecf8e;
}
.login-page .login-tip { border-color: rgba(255, 255, 255, .14); }
.login-page .login-tip kbd { background: rgba(255, 255, 255, .08); }
.login-page .login-meta a { color: var(--accent); }
.login-page .login-contact { margin: 16px 0 0; color: var(--accent); font-size: 13px; font-weight: 600; text-align: center; }
.login-page h1 { color: var(--text); }
.login-page .eyebrow { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  #asciiKlineBg { opacity: .5; }
}
/* 登录页 fx 画布见文末「登录页 · 主题 + 左右分栏 + 特效」 */
.login-panel {
  width: 100%;
  max-width: 420px;
  min-width: 0;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 18px 50px rgba(27, 43, 35, .1);
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 24px;
  border-radius: 7px;
  background: var(--surface-strong);
  color: #fff;
  font-size: 19px;
  font-weight: 800;
}
.login-panel h1 { margin: 0 0 28px; font-size: 27px; }
.login-panel label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.login-panel input {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0 13px;
  color: var(--text);
  background: #fbfcfb;
  font-variant-numeric: tabular-nums;
  text-transform: none;
}
.form-error { min-height: 24px; margin: 8px 0; color: var(--negative); font-size: 13px; }
.login-button { width: 100%; }
.login-meta { margin: 22px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.login-tip { margin: 18px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; text-align: center; padding: 8px 12px; border: 1px dashed var(--border, #d8ddd9); border-radius: 8px; }
.login-tip kbd { font-family: inherit; font-size: 11px; padding: 0 4px; border: 1px solid var(--border, #d8ddd9); border-bottom-width: 2px; border-radius: 4px; background: var(--surface, #fff); color: var(--text); }

.valuation-shell { position: relative; width: min(2200px, calc(100% - 24px)); margin: 0 auto; padding: 28px 0 48px; }
.stock-page { width: min(1180px, calc(100% - 32px)); }
.stock-header { align-items: center; }
.stock-header h1 { max-width: 760px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-header-actions { display: flex; align-items: center; gap: 8px; }
.stock-query-section { margin-top: 18px; }
.stock-query-form { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: #f7faf8; }
.stock-query-form .field { display: grid; grid-template-columns: 42px minmax(220px, 420px); flex: 1; }
.stock-query-form input { min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 4px; padding: 0 10px; background: #fff; color: var(--text); }
.stock-chart-section { margin-top: 12px; }
.stock-chart-section .section-heading h2 { margin: 0; font-size: 18px; }
.stock-kline-wrap { min-height: 456px; height: 456px; padding: 0 18px 16px; }
.stock-kline-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 18px 0; }
.stock-kline-periods, .stock-kline-indicators { display: flex; flex-wrap: wrap; gap: 6px; }
.stock-kline-indicators { margin-left: auto; }
.stock-kline-toolbar .kline-period, .kline-indicator { min-height: 34px; border: 1px solid var(--line); border-radius: 4px; padding: 0 11px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 700; }
.stock-kline-toolbar .kline-period:hover, .kline-indicator:hover { border-color: var(--accent); color: var(--accent); }
.stock-kline-toolbar .kline-period.active, .kline-indicator.active { border-color: var(--accent); background: #e9f6ef; color: var(--accent); }
.stock-data-note { margin: 12px 0 0; color: var(--muted); font-size: 12px; }
.stock-overview-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 12px; margin-top: 12px; }
.stock-overview-card { min-width: 0; }
.stock-context-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.stock-context-section { min-width: 0; }
.stock-context-section .section-heading h2 { margin: 0; font-size: 18px; }
.stock-context-list { padding: 3px 18px 12px; }
.stock-context-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; min-height: 64px; padding: 10px 0; border-bottom: 1px solid #e7ece9; color: var(--text); text-decoration: none; }
.stock-context-row:last-child { border-bottom: 0; }
.stock-context-row strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.stock-context-row span { grid-column: 1; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.stock-context-row small { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--muted); font-size: 10px; white-space: nowrap; }
.stock-context-row:hover strong { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.stock-alert-form { display: flex; align-items: center; gap: 8px; padding: 12px 18px 4px; flex-wrap: wrap; }
.stock-alert-form select, .stock-alert-form input { border: 1px solid var(--line); border-radius: 4px; padding: 6px 10px; background: #fff; color: var(--text); font-size: 12px; }
.stock-alert-form #stockAlertDirection { flex: 0 0 auto; }
.stock-alert-form #stockAlertPrice { width: 110px; }
.stock-alert-form #stockAlertNote { flex: 1; min-width: 140px; }
.stock-alert-hint { margin: 0; padding: 4px 18px 8px; color: var(--muted); font-size: 11px; }
.stock-alert-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 44px; }
.stock-alert-row:hover strong { color: var(--text); text-decoration: none; }
.stock-alert-row.stock-alert-triggered strong { color: #177052; }
.stock-alert-remove { border: 1px solid var(--line); border-radius: 4px; padding: 3px 10px; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; }
.stock-alert-remove:hover { color: #b53e3a; border-color: #b53e3a; }
.stock-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 14px 18px 18px; }
.stock-metrics div { padding: 10px 11px; background: var(--surface-soft); }
.stock-metrics span, .stock-metrics strong { display: block; }
.stock-metrics span { color: var(--muted); font-size: 11px; }
.stock-metrics strong { margin-top: 2px; font-size: 16px; font-variant-numeric: tabular-nums; }
.stock-classification { padding: 14px 18px 18px; }
.stock-classification-line { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; font-size: 13px; }
.stock-classification-line span { color: var(--muted); }
.stock-classification-line strong { font-weight: 700; }
.stock-tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.stock-tag-list span { padding: 4px 8px; border: 1px solid #b8d8c7; border-radius: 3px; color: #176c45; font-size: 12px; }
.stock-board-section { margin-top: 12px; }
.stock-auction-section { margin-top: 12px; }
.stock-auction-actions { display: flex; align-items: center; gap: 10px; }
.stock-auction-actions .button { min-height: 32px; padding: 6px 10px; font-size: 12px; }
.stock-auction-metrics { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 14px 18px 12px; }
.stock-auction-metrics > div { min-width: 0; padding: 10px 11px; background: var(--surface-soft); }
.stock-auction-metrics span, .stock-auction-metrics strong { display: block; }
.stock-auction-metrics span { color: var(--muted); font-size: 11px; }
.stock-auction-metrics strong { margin-top: 2px; font-size: 16px; font-variant-numeric: tabular-nums; }
.stock-auction-note { margin: 0; padding: 0 18px 15px; color: var(--muted); font-size: 12px; }
.data-capability-strip { display: grid; grid-template-columns: minmax(170px, 0.8fr) minmax(0, 2fr) auto; gap: 18px; align-items: center; margin: 12px 0; padding: 16px 18px; border: 1px solid var(--line); background: var(--surface); }
.data-capability-heading h2 { margin: 2px 0 3px; font-size: 18px; }
.data-capability-heading > span { color: var(--muted); font-size: 12px; }
.data-capability-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.data-capability-list > div { min-width: 0; padding: 10px 12px; border-left: 2px solid var(--accent); background: var(--surface-soft); }
.data-capability-list strong, .data-capability-list span { display: block; }
.data-capability-list strong { font-size: 13px; }
.data-capability-list span { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.stock-board-summary { display: flex; gap: 22px; padding: 12px 18px 4px; color: var(--muted); font-size: 12px; }
.stock-board-summary b { color: var(--text); font-size: 16px; }
.stock-board-list { padding: 4px 18px 14px; }
.stock-microstructure-section { margin-top: 12px; }
.stock-microstructure-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
.stock-microstructure-actions .button { min-height: 32px; padding: 6px 10px; font-size: 12px; }
.stock-microstructure-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 14px 18px; }
.stock-microstructure-grid h3, .stock-microstructure-seats h3 { margin: 0 0 8px; color: var(--text); font-size: 12px; }
.stock-micro-row { display: grid; grid-template-columns: minmax(110px, 1.6fr) repeat(3, minmax(72px, 1fr)) minmax(90px, 1fr); gap: 8px; align-items: center; min-height: 34px; border-bottom: 1px solid var(--line); color: var(--text); font-size: 11px; }
.stock-micro-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-micro-row > span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.stock-micro-row.stock-micro-head { color: var(--muted); font-weight: 700; }
.stock-margin-list > div, .stock-micro-seat-list > div { display: flex; justify-content: space-between; gap: 12px; min-height: 34px; align-items: center; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.stock-margin-list strong, .stock-micro-seat-list strong { color: var(--text); font-variant-numeric: tabular-nums; }
.stock-micro-cost { display: block; margin-top: 7px; color: var(--muted); font-size: 10px; }
.stock-microstructure-seats { padding: 0 18px 14px; }
.stock-microstructure-section { margin-top: 12px; }
.stock-microstructure-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
.stock-microstructure-actions .button { min-height: 32px; padding: 6px 10px; font-size: 12px; }
.stock-microstructure-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 14px 18px; }
.stock-microstructure-grid h3, .stock-microstructure-seats h3 { margin: 0 0 8px; color: var(--text); font-size: 12px; }
.stock-micro-row { display: grid; grid-template-columns: minmax(110px, 1.6fr) repeat(3, minmax(72px, 1fr)) minmax(90px, 1fr); gap: 8px; align-items: center; min-height: 34px; border-bottom: 1px solid var(--line); color: var(--text); font-size: 11px; }
.stock-micro-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-micro-row > span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.stock-micro-row.stock-micro-head { color: var(--muted); font-weight: 700; }
.stock-margin-list > div, .stock-micro-seat-list > div { display: flex; justify-content: space-between; gap: 12px; min-height: 34px; align-items: center; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.stock-margin-list strong, .stock-micro-seat-list strong { color: var(--text); font-variant-numeric: tabular-nums; }
.stock-micro-cost { display: block; margin-top: 7px; color: var(--muted); font-size: 10px; }
.stock-microstructure-seats { padding: 0 18px 14px; }
.stock-board-row { display: grid; grid-template-columns: 58px 100px 70px 100px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 42px; border-bottom: 1px solid #e7ece9; font-size: 12px; }
.stock-board-row small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.valuation-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.valuation-header h1 { margin: 0 0 4px; font-size: 30px; }
.subtitle { margin: 0; color: var(--muted); font-size: 13px; }
.account-actions { display: flex; align-items: center; gap: 14px; }
.account-title-actions { display: flex; align-items: center; gap: 10px; }
.view-switch { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
.view-switch button { min-height: 34px; border: 0; border-radius: 3px; padding: 0 9px; background: transparent; color: var(--muted); font-size: 12px; }
.view-switch button.active { background: var(--surface-strong); color: #fff; }
.account-summary { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.35; }
.account-summary strong { font-size: 14px; }
.account-summary span { color: var(--muted); font-size: 12px; }
.account-permission-button { min-height: 38px; padding: 0 11px; font-size: 13px; }
.account-permission-button.active { border-color: var(--accent); background: #edf8f1; color: var(--accent); }
.notification-button { position: relative; min-height: 38px; border: 1px solid var(--line); border-radius: 5px; padding: 0 12px; background: var(--surface); color: var(--text); font-size: 13px; font-weight: 700; }
.notification-button:hover { border-color: var(--accent); color: var(--accent); }
.notification-button b { position: absolute; top: -7px; right: -7px; min-width: 20px; min-height: 20px; border-radius: 10px; padding: 1px 5px; background: var(--negative); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.notification-panel { position: absolute; top: 88px; right: 0; z-index: 30; width: min(390px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: 0 16px 40px rgba(27, 43, 35, .16); }
.notification-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--line); }
.notification-panel-header strong, .notification-panel-header span { display: block; }
.notification-panel-header strong { font-size: 14px; }
.notification-panel-header span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.notification-panel-header .button { min-height: 32px; padding: 0 9px; font-size: 12px; }
.notification-list { max-height: min(520px, 65vh); overflow-y: auto; padding: 4px 14px; }
.notification-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 9px; width: 100%; min-height: 56px; border: 0; border-bottom: 1px solid #e7ece9; padding: 9px 0; background: transparent; color: var(--text); text-align: left; }
.notification-row:last-child { border-bottom: 0; }
.notification-row:hover { background: var(--surface-soft); }
.notification-row.read { opacity: .58; }
.notification-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--negative); }
.notification-row.read .notification-dot { background: var(--line); }
.notification-main { min-width: 0; }
.notification-main strong, .notification-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notification-main strong { font-size: 13px; }
.notification-main small, .notification-row time { color: var(--muted); font-size: 11px; }
.notification-row time { align-self: start; padding-top: 2px; white-space: nowrap; }
.cache-badge[data-data-state="fresh"] { color: var(--positive); }
.cache-badge[data-data-state="cached"] { color: var(--positive); }
.cache-badge[data-data-state="degraded"] { color: #8a5a00; }
.cache-badge[data-data-state="error"] { color: var(--negative); }
.cache-badge[data-data-state="retrying"] { color: var(--muted); }
.cache-badge[data-data-state="syncing"], .cache-badge[data-data-state="empty"], .cache-badge[data-data-state="loading"] { color: var(--muted); }
.section-heading > span[data-data-state="fresh"] { color: var(--positive); }
.section-heading > span[data-data-state="cached"] { color: var(--positive); }
.section-heading > span[data-data-state="degraded"] { color: #8a5a00; }
.section-heading > span[data-data-state="error"] { color: var(--negative); }
.section-heading > span[data-data-state="retrying"] { color: var(--muted); }
.section-heading > span[data-data-state="syncing"], .section-heading > span[data-data-state="empty"], .section-heading > span[data-data-state="loading"] { color: var(--muted); }
.workspace-nav { display: flex; gap: 4px; margin-top: 16px; border-bottom: 1px solid var(--line); }
.workspace-nav { position: sticky; top: 0; z-index: 10; padding: 4px 0 0; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); }
.workspace-tab { flex: 1 1 0; min-width: 0; min-height: 46px; border: 0; border-bottom: 2px solid transparent; padding: 0 12px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 700; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.workspace-tab:hover { color: var(--text); }
.workspace-tab:focus-visible { position: relative; z-index: 1; }
.workspace-tab.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--accent); }
.workspace-tab:disabled { color: #8b9690; background: transparent; opacity: 1; }
.workspace-tab .workspace-free, .workspace-tab .workspace-lock { display: inline-flex; align-items: center; justify-content: center; margin-left: 5px; padding: 2px 5px; border-radius: 3px; font-size: 10px; font-weight: 800; line-height: 1.2; vertical-align: 2px; }
.workspace-free { border: 1px solid #9ccfb2; color: var(--accent); background: #edf8f1; }
.workspace-lock { border: 1px solid #cfd6d2; color: #7b8780; background: #f0f3f1; }
.workspace-tab:not(:disabled) .workspace-lock { display: none; }
.selection-view { display: grid; gap: 14px; }
.selection-header { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 4px 0 12px; border-bottom: 1px solid var(--line); }
.selection-header h2 { margin: 0; font-size: 24px; }
.selection-subnav { display: flex; gap: 4px; align-items: center; }
.selection-subtab { min-height: 36px; border: 1px solid var(--line); border-radius: 4px; padding: 0 12px; background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 700; }
.selection-subtab:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.selection-subtab.active { border-color: var(--accent); background: #edf8f1; color: var(--accent); }
.selection-subtab:disabled { color: #8b9690; background: var(--surface-soft); opacity: 1; }
.selection-subtab .workspace-lock { display: inline-flex; align-items: center; justify-content: center; margin-left: 5px; padding: 2px 5px; border: 1px solid #cfd6d2; border-radius: 3px; color: #7b8780; background: #f0f3f1; font-size: 10px; line-height: 1.2; vertical-align: 2px; }
.screening-view { display: grid; gap: 14px; }
.screening-query-section { padding: 18px; }
.screening-form { display: flex; align-items: end; gap: 12px; }
.screening-query-field { flex: 1 1 auto; }
.screening-query-field input { min-height: 44px; font-size: 14px; }
.screening-actions { display: flex; align-items: center; gap: 10px; }
.screening-ai-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.screening-ai-toggle input { width: 16px; height: 16px; }
.screening-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 13px; color: var(--muted); font-size: 12px; }
.screening-preset { min-height: 30px; border: 1px solid var(--line); border-radius: 4px; padding: 0 9px; background: var(--surface); color: var(--text); font-size: 12px; }
.screening-preset:hover { border-color: var(--accent); color: var(--accent); }
.screening-condition-bar { display: flex; align-items: center; gap: 14px; min-width: 0; border: 1px solid var(--line); border-radius: 5px; padding: 12px 14px; background: var(--surface); }
.screening-condition-bar > div:first-child { flex: 0 0 auto; }
.screening-condition-bar > div:first-child span, .screening-condition-bar > div:first-child strong { display: block; }
.screening-condition-bar > div:first-child span { color: var(--muted); font-size: 11px; }
.screening-condition-bar > div:first-child strong { margin-top: 3px; font-size: 13px; }
.screening-condition-list { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.screening-condition-chip, .screening-empty-chip { display: inline-flex; align-items: center; min-height: 27px; border: 1px solid #c8ddd0; border-radius: 3px; padding: 0 8px; background: #f3faf5; color: #176c45; font-size: 12px; }
.screening-empty-chip { border-color: var(--line); background: var(--surface-soft); color: var(--muted); }
.screening-kpis { margin: 0; }
.screening-warnings { margin: 0; border-left: 3px solid #c18720; padding: 10px 12px; background: #fffaf0; color: #76520c; font-size: 12px; line-height: 1.55; }
.screening-results-section { min-width: 0; }
.screening-table-wrap { overflow-x: auto; }
.screening-table { width: 100%; min-width: 920px; border-collapse: collapse; font-size: 12px; }
.screening-table th { padding: 10px 12px; background: var(--surface-soft); color: var(--muted); font-size: 11px; font-weight: 750; text-align: left; white-space: nowrap; }
.screening-table td { border-top: 1px solid #e7ece9; padding: 10px 12px; white-space: nowrap; }
.screening-table tbody tr:hover { background: #f5fbf7; }
.screening-stock { display: grid; gap: 2px; border: 0; padding: 0; background: transparent; color: var(--text); text-align: left; }
.screening-stock:hover { color: var(--accent); }
.screening-stock strong { font-size: 13px; }
.screening-stock small, .screening-reasons { color: var(--muted); font-size: 11px; }
.screening-reasons { white-space: normal; }
.workspace-badge { display: inline-flex; margin-left: 8px; padding: 3px 6px; border: 1px solid #9ccfb2; border-radius: 3px; color: var(--accent); background: #edf8f1; font-size: 10px; font-weight: 800; vertical-align: 3px; }
.research-view { min-width: 0; }
.research-view[hidden] { display: none; }
.research-hero { border-radius: 6px; }
.research-hero h2 { letter-spacing: 0; }
.section-heading { min-width: 0; }
.section-heading h3 { letter-spacing: 0; }
.control-bar { flex-wrap: wrap; }
.control-bar .tabs { flex: 0 0 auto; }
.control-bar .search-box { min-width: min(260px, 100%); }
.table-section, .research-section { border-radius: 6px; }
.news-view .announcement-section, .company-view .company-research-section { margin-top: 0; }
.news-view .research-hero, .company-view .research-hero { margin-bottom: 12px; }
.news-view .announcement-list { max-height: none; }
.news-view .announcement-note { margin-top: 0; }
.company-view .company-card { min-height: 220px; }
.media-news-browser { display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(280px, 340px); gap: 16px; align-items: start; }
.media-source-panel { min-width: 0; border-right: 1px solid var(--line); padding-right: 12px; }
.media-source-panel.collapsed { width: 42px; padding-right: 0; border-right: 0; }
.media-source-panel.collapsed .media-source-list { display: none; }
.media-source-panel.collapsed .media-source-toggle span { display: none; }
.media-source-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 40px; border: 0; border-bottom: 1px solid var(--line); padding: 0 6px; background: transparent; color: var(--text); font-weight: 800; }
.media-source-toggle b { color: var(--muted); font-size: 18px; line-height: 1; transition: transform 160ms ease; }
.media-source-panel.collapsed .media-source-toggle b { transform: rotate(180deg); }
.media-source-list { display: grid; gap: 4px; padding-top: 8px; }
.media-source-item { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 38px; border: 1px solid transparent; border-radius: 4px; padding: 0 9px; background: transparent; color: var(--muted); text-align: left; font-size: 13px; }
.media-source-item:hover { background: var(--surface-soft); color: var(--text); }
.media-source-item.active { border-color: #b9d7c6; background: #edf8f1; color: var(--accent); font-weight: 750; }
.media-source-item b { min-width: 24px; color: inherit; text-align: right; font-variant-numeric: tabular-nums; }
.announcement-results { min-width: 0; }
.announcement-match-panel { position: sticky; top: 66px; min-width: 0; min-height: 300px; border-left: 1px solid var(--line); padding-left: 16px; }
.announcement-match-panel > header { padding: 6px 0 12px; border-bottom: 1px solid var(--line); }
.announcement-match-panel h3 { margin: 0; overflow: hidden; font-size: 15px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.announcement-match-panel header p:last-child { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.announcement-match-group { padding: 14px 0 0; }
.announcement-match-group h4 { margin: 0 0 8px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.announcement-match-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.announcement-match-chip { display: inline-flex; min-height: 26px; align-items: center; padding: 0 8px; border: 1px solid #c8ddd0; border-radius: 3px; background: #f3faf5; color: #176c45; font-size: 12px; }
.announcement-match-chip.concept { border-color: #d7d8c1; background: #fbfbf2; color: #6c6c32; }
.announcement-match-stocks { display: grid; gap: 6px; }
.announcement-match-stock { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 38px; border: 1px solid #e0e8e3; border-radius: 4px; padding: 0 9px; background: var(--surface); color: var(--text); text-align: left; }
.announcement-match-stock:hover, .announcement-match-stock:focus-visible { border-color: #8dbca2; background: #f5fbf7; outline: 0; }
.announcement-match-stock strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.announcement-match-stock small { color: var(--muted); font-size: 10px; white-space: nowrap; }
.announcement-match-empty { margin: 0; color: var(--muted); font-size: 12px; }
.control-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}
.tabs { display: flex; gap: 4px; }
.tab {
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0 17px;
  background: transparent;
  color: var(--muted);
}
.tab.active { border-color: #a8c9b8; background: #e1f1e9; color: #075f39; font-weight: 700; }
.field { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.field input, .field select {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 11px;
  background: #fbfcfb;
  color: var(--text);
}
.search-box { flex: 1; }
.search-box input { width: 100%; }
.classification-level-box select { min-width: 112px; }
.classification-box { flex: 0 1 220px; }
.classification-box select { width: 100%; min-width: 170px; }
.stat-strip {
  display: grid;
  grid-template-columns: 150px 150px 150px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-top: 16px;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  background: #e9efec;
}
.stat-strip > div { display: flex; flex-direction: column; gap: 2px; }
.stat-strip span, .stat-strip p { color: var(--muted); font-size: 12px; }
.stat-strip strong { font-size: 18px; }
.stat-strip p { margin: 0; }
.table-section { margin-top: 18px; border: 1px solid var(--line-dark); border-radius: 6px; overflow: hidden; background: var(--surface-strong); color: #f5f7f6; }
.table-headline { display: flex; justify-content: space-between; align-items: center; padding: 15px 17px; border-bottom: 1px solid var(--line-dark); }
.table-headline h2 { margin: 0 0 2px; font-size: 17px; }
.table-headline span { color: var(--muted-dark); font-size: 12px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; min-width: 1120px; border-collapse: collapse; font-size: 13px; }
th, td { padding: 12px 13px; border-bottom: 1px solid #303b36; text-align: right; white-space: nowrap; }
th { background: #121815; color: var(--muted-dark); font-size: 12px; font-weight: 650; }
th button { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; border: 0; padding: 0; background: transparent; color: inherit; }
th button:hover { color: #78deb0; }
th button span { color: #75847c; }
th:first-child, td:first-child, th:nth-child(2), td:nth-child(2), th:nth-child(3), td:nth-child(3), th:nth-child(4), td:nth-child(4) { text-align: left; }
.desktop-ranking tbody tr:hover { background: #222c27; }
tbody tr:last-child td { border-bottom: 0; }
.rank-col { width: 44px; }
.company-name { color: #fff; font-weight: 750; }
.code, .muted { color: var(--muted-dark); font-variant-numeric: tabular-nums; }
.positive { color: var(--positive); }
.negative { color: var(--negative); }
.empty { padding: 44px 16px; color: var(--muted-dark); text-align: center !important; }
.table-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--line-dark); }
.table-footer p { margin: 0; color: var(--muted-dark); font-size: 12px; }
.pagination { display: flex; align-items: center; gap: 10px; }
.pagination .button { min-height: 38px; border-color: var(--line-dark); background: #222c27; color: #f5f7f6; }
.pagination .button:hover:not(:disabled) { background: #2d3933; }
.pagination span { min-width: 90px; color: var(--muted-dark); font-size: 12px; text-align: center; }
.mobile-industry-chips, .mobile-ranking { display: none; }

.research-view { margin-top: 18px; }
.permissions-hero { align-items: center; }
.permission-account-state { min-height: 34px; padding: 8px 10px; border: 1px solid #9ccfb2; border-radius: 4px; background: #edf8f1; color: var(--accent); font-size: 12px; font-weight: 800; white-space: nowrap; }
.permission-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.permission-summary > div { min-width: 0; padding: 14px 16px; border: 1px solid var(--line); background: var(--surface); }
.permission-summary span, .permission-summary strong { display: block; }
.permission-summary span { color: var(--muted); font-size: 12px; }
.permission-summary strong { margin-top: 5px; overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.permission-feature-section { margin-top: 12px; }
.permission-feature-list { padding: 0 18px 8px; }
.permission-feature-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 14px; width: 100%; min-height: 68px; border: 0; border-bottom: 1px solid #e7ece9; padding: 10px 0; background: transparent; color: var(--text); text-align: left; }
.permission-feature-row:last-child { border-bottom: 0; }
button.permission-feature-row { cursor: pointer; }
button.permission-feature-row:hover { color: var(--accent); background: #f7faf8; }
.permission-feature-row.is-locked { grid-template-columns: minmax(0, 1fr) auto 18px; color: #7f8a84; }
.permission-feature-main { min-width: 0; }
.permission-feature-main strong, .permission-feature-main small { display: block; }
.permission-feature-main strong { font-size: 14px; }
.permission-feature-main small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.permission-feature-status { min-width: 54px; border: 1px solid var(--line); border-radius: 3px; padding: 4px 7px; font-size: 11px; font-weight: 750; text-align: center; white-space: nowrap; }
.permission-feature-status.free, .permission-feature-status.unlocked { border-color: #9ccfb2; background: #edf8f1; color: var(--accent); }
.permission-feature-status.locked { background: #f0f3f1; color: #748079; }
.permission-feature-arrow { color: var(--muted); font-size: 22px; line-height: 1; text-align: right; }
.research-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 22px 24px; border: 1px solid var(--line); background: var(--surface); }
.research-hero h2 { margin: 0 0 6px; font-size: 27px; }
.research-hero p:not(.eyebrow) { max-width: 720px; margin: 0; color: var(--muted); font-size: 14px; }
.research-hero-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.cache-badge { display: inline-flex; align-items: center; min-height: 34px; padding: 0 10px; border: 1px solid #b8d8c7; border-radius: 4px; background: #eef8f2; color: #176c45; font-size: 12px; font-weight: 700; }
.cache-badge.is-stale { border-color: #e3b58a; background: #fff4e8; color: #9a4f12; }
.research-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.research-view:not(.board-view) > .research-kpis { grid-template-columns: repeat(6, 1fr); }
#bloggersView > .blogger-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.research-kpis > div { min-height: 112px; padding: 16px; border: 1px solid var(--line); background: var(--surface); }
.research-kpis span, .research-kpis small { display: block; color: var(--muted); font-size: 12px; }
.research-kpis strong { display: block; margin: 4px 0 3px; font-size: 27px; font-variant-numeric: tabular-nums; }
.pulse-section { margin-top: 12px; }
.pulse-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 14px 18px 18px; }
.pulse-item { min-height: 92px; padding: 13px 14px; border: 1px solid var(--line); background: #fbfcfb; }
.pulse-item span, .pulse-item small { display: block; color: var(--muted); font-size: 12px; }
.pulse-item strong { display: block; min-height: 28px; margin: 5px 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }
.pulse-item strong b { font-weight: 800; }
.research-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr); gap: 12px; margin-top: 12px; }
.research-section { border: 1px solid var(--line); background: var(--surface); }
.section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.section-heading .eyebrow { margin-bottom: 2px; }
.section-heading h3 { margin: 0; font-size: 18px; }
.section-heading > span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.observation-list, .sector-list { padding: 4px 18px 10px; }
.observation-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 64px; border: 0; border-bottom: 1px solid #e7ece9; padding: 9px 0; background: transparent; color: var(--text); text-align: left; }
.observation-row:last-child { border-bottom: 0; }
.observation-row:hover { background: #f7faf8; }
.observation-rank { color: var(--accent); font-size: 12px; font-weight: 800; }
.observation-main, .observation-value { min-width: 0; }
.observation-main strong, .observation-main small, .observation-value strong, .observation-value small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.observation-main strong { font-size: 14px; }
.observation-main small, .observation-value small { color: var(--muted); font-size: 12px; }
.observation-value { text-align: right; }
.observation-value strong { font-size: 12px; font-variant-numeric: tabular-nums; }
.sector-row { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(100px, 1.4fr) 40px; align-items: center; gap: 10px; min-height: 39px; border-bottom: 1px solid #e7ece9; font-size: 13px; }
.sector-row:last-child { border-bottom: 0; }
.sector-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sector-row > strong { text-align: right; font-variant-numeric: tabular-nums; }
.sector-bar { height: 7px; border-radius: 2px; background: #e8efeb; overflow: hidden; }
.sector-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.review-date-field { display: grid; grid-template-columns: auto 132px; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 700; }
.review-date-field select { width: 132px; min-height: 38px; border: 1px solid var(--line); border-radius: 4px; padding: 0 9px; background: #fff; color: var(--text); font: inherit; }
.review-trend-section { margin-top: 12px; }
.review-trend { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 8px; min-height: 180px; padding: 14px 18px 18px; }
.review-trend-day { display: grid; grid-template-rows: 18px 86px 20px 18px; align-items: end; min-width: 0; border: 1px solid var(--line); border-radius: 4px; padding: 9px 8px; background: #fbfcfb; color: var(--text); text-align: center; }
.review-trend-day:hover, .review-trend-day.active { border-color: #7ab899; background: #f1f8f4; }
.review-trend-value { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.review-trend-bars { display: flex; align-items: flex-end; justify-content: center; gap: 5px; height: 80px; }
.review-trend-bars i { display: block; width: 14px; min-height: 2px; border-radius: 2px 2px 0 0; }
.review-trend-bars .sealed { background: var(--positive); }
.review-trend-bars .broken { background: #d9a441; }
.review-trend-day strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.review-trend-day small { color: var(--muted); font-size: 10px; }
.review-primary-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr); gap: 12px; margin-top: 12px; align-items: start; }
.review-secondary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; align-items: stretch; }
.review-theme-list, .review-ladder, .review-promotion, .review-quality, .review-timeline { min-width: 0; padding: 4px 18px 12px; }
.review-theme-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 66px; gap: 10px; align-items: start; min-height: 84px; padding: 11px 0; border-bottom: 1px solid #e7ece9; }
.review-theme-row:last-child { border-bottom: 0; }
.review-rank { color: var(--muted); font-size: 12px; font-weight: 800; }
.review-theme-main { min-width: 0; }
.review-theme-main > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.review-theme-main strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.review-theme-main span, .review-theme-row time { color: var(--muted); font-size: 11px; white-space: nowrap; }
.review-theme-row time { padding-top: 2px; text-align: right; }
.review-theme-bar { height: 5px; margin: 7px 0; border-radius: 2px; background: #e8efeb; overflow: hidden; }
.review-theme-bar i { display: block; height: 100%; background: var(--accent); }
.review-stock-links { display: flex; flex-wrap: wrap; gap: 4px 10px; min-height: 20px; }
.review-stock-links button, .review-ladder-stocks button { border: 0; padding: 0; background: transparent; color: var(--text); text-align: left; }
.review-stock-links button { font-size: 11px; }
.review-stock-links button:hover, .review-ladder-stocks button:hover strong { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.review-more { color: var(--muted); font-size: 11px; align-self: end; }
.review-conclusion-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; margin-bottom: 12px; }
.review-conclusion { margin: 0; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border, rgba(0,0,0,0.08)); border-radius: var(--acf-surface-radius, 10px); }
.review-conclusion-label { display: block; color: var(--muted); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; }
.review-conclusion p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text); }
.review-conclusion-ai .review-ai-empty { color: var(--muted); }
.review-market-empty { margin: 8px 0 0; }
body.mobile-layout .review-conclusion-grid { grid-template-columns: 1fr; gap: 8px; }
.review-ladder-tier { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid #e7ece9; }
.review-ladder-tier:last-child { border-bottom: 0; }
.review-ladder-tier > div:first-child b, .review-ladder-tier > div:first-child span { display: block; }
.review-ladder-tier > div:first-child b { color: var(--accent); font-size: 17px; }
.review-ladder-tier > div:first-child span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.review-ladder-stocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px; }
.review-ladder-stocks button { min-width: 0; }
.review-ladder-stocks strong, .review-ladder-stocks small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-ladder-stocks strong { font-size: 12px; }
.review-ladder-stocks small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.review-promotion, .review-quality { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 12px; }
.review-quality { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.review-promotion > div, .review-quality > div { min-width: 0; padding: 11px; background: var(--surface-soft); }
.review-promotion span, .review-promotion strong, .review-promotion small, .review-quality span, .review-quality strong, .review-quality small { display: block; }
.review-promotion span, .review-promotion small, .review-quality span, .review-quality small { color: var(--muted); font-size: 10px; }
.review-promotion strong, .review-quality strong { margin: 4px 0 2px; font-size: 19px; font-variant-numeric: tabular-nums; }
.review-timeline { padding-top: 10px; }
.review-timeline > div { display: grid; grid-template-columns: 42px minmax(0, 1fr) 28px; align-items: center; gap: 8px; min-height: 31px; }
.review-timeline span, .review-timeline strong { font-size: 11px; }
.review-timeline strong { text-align: right; font-variant-numeric: tabular-nums; }
.review-timeline i { height: 7px; border-radius: 2px; background: #e8efeb; overflow: hidden; }
.review-timeline i b { display: block; height: 100%; background: #d9a441; }
.review-market-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; align-items: start; }
.review-breadth-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px 18px 8px; }
.review-breadth-summary > div, .review-loss-grid > div, .review-history-grid > div { min-width: 0; padding: 10px 11px; background: var(--surface-soft); }
.review-breadth-summary span, .review-breadth-summary strong, .review-loss-grid span, .review-loss-grid strong, .review-loss-grid small, .review-history-grid span, .review-history-grid strong, .review-history-grid small { display: block; }
.review-breadth-summary span, .review-loss-grid span, .review-loss-grid small, .review-history-grid span, .review-history-grid small { color: var(--muted); font-size: 10px; }
.review-breadth-summary strong, .review-loss-grid strong, .review-history-grid strong { margin-top: 4px; font-size: 18px; font-variant-numeric: tabular-nums; }
.review-distribution { padding: 6px 18px 14px; }
.review-distribution > div { display: grid; grid-template-columns: 58px minmax(0, 1fr) 42px; align-items: center; gap: 8px; min-height: 28px; }
.review-distribution span, .review-distribution strong { font-size: 10px; }
.review-distribution strong { text-align: right; font-variant-numeric: tabular-nums; }
.review-distribution i { height: 7px; overflow: hidden; border-radius: 2px; background: #e8efeb; }
.review-distribution i b { display: block; height: 100%; background: #8a9690; }
.review-distribution i b.strong-up { background: #087b49; }
.review-distribution i b.up { background: #3f9d70; }
.review-distribution i b.soft-up { background: #8bc9a7; }
.review-distribution i b.soft-down { background: #e99a8e; }
.review-distribution i b.down { background: #dc5a4a; }
.review-distribution i b.strong-down { background: #b42318; }
.review-loss-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px 18px 16px; }
.review-loss-grid strong { margin-bottom: 2px; }
.review-loss-grid .warning { color: #9a5c09; }
.review-sector-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 12px 18px 16px; }
.review-sector-columns h4 { margin: 0 0 6px; color: var(--muted); font-size: 11px; }
.review-sector-list article { display: grid; grid-template-columns: 22px minmax(0, 1fr) 58px 30px; align-items: center; gap: 8px; min-height: 48px; border-bottom: 1px solid #e7ece9; }
.review-sector-list article:last-child { border-bottom: 0; }
.review-sector-rank { color: var(--muted); font-size: 10px; font-weight: 800; }
.review-sector-list article > div { min-width: 0; }
.review-sector-list strong, .review-sector-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-sector-list strong { font-size: 12px; }
.review-sector-list small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.review-sector-list article > b { font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }
.review-sector-list article > i { color: var(--muted); font-size: 10px; font-style: normal; text-align: right; }
.review-sector-list article > i.up { color: var(--positive); }
.review-sector-list article > i.down { color: var(--negative); }
.review-core-list { padding: 4px 18px 12px; }
.review-core-list article { display: grid; grid-template-columns: 22px minmax(120px, .7fr) minmax(150px, 1fr) 34px; align-items: center; gap: 10px; min-height: 61px; border-bottom: 1px solid #e7ece9; }
.review-core-list article:last-child { border-bottom: 0; }
.review-core-list article > span { color: var(--muted); font-size: 10px; font-weight: 800; }
.review-core-list button { min-width: 0; border: 0; padding: 0; background: transparent; color: var(--text); text-align: left; }
.review-core-list button:hover strong { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.review-core-list button strong, .review-core-list button small, .review-core-list article > div b, .review-core-list article > div small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-core-list button strong { font-size: 12px; }
.review-core-list button small, .review-core-list article > div small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.review-core-list article > div b { color: var(--accent); font-size: 10px; }
.review-core-list em { color: var(--accent); font-size: 14px; font-style: normal; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.review-events-section { margin-top: 12px; }
.review-event-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; padding: 4px 18px 12px; }
.review-event-list article { display: grid; grid-template-columns: 58px 66px minmax(0, 1fr) 30px; align-items: center; gap: 8px; min-height: 50px; border-bottom: 1px solid #e7ece9; }
.review-event-list time, .review-event-list article > b { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.review-event-list article > b { text-align: right; }
.review-event-status { display: inline-flex; min-height: 22px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 3px; padding: 0 5px; color: var(--muted); font-size: 10px; }
.review-event-status.sealed { border-color: #a8c9b8; background: #e9f6ef; color: var(--positive); }
.review-event-status.broken { border-color: #e5b7bc; background: #fff0f1; color: var(--negative); }
.review-event-status.resealed { border-color: #d9c08e; background: #fff8e8; color: #8a5b08; }
.review-event-list button { min-width: 0; border: 0; padding: 0; background: transparent; color: var(--text); text-align: left; }
.review-event-list button:hover strong { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.review-event-list button strong, .review-event-list button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-event-list button strong { font-size: 12px; }
.review-event-list button small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.review-history-section { margin-top: 12px; }
.review-history-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding: 12px 18px 16px; }
.review-history-grid strong { margin-bottom: 2px; }
.company-research-section, .integration-section { margin-top: 12px; }
.research-company-tools { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: #f7faf8; }
.research-company-tools .field { display: grid; grid-template-columns: 42px minmax(0, 1fr); }
.research-company-tools input, .research-company-tools select { min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 4px; padding: 0 10px; background: #fff; color: var(--text); }
.company-card { padding: 20px 18px; }
.company-card-header { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.company-card-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.company-card h4 { margin: 0 0 4px; font-size: 23px; }
.company-card h4 small { margin-left: 8px; color: var(--muted); font-size: 13px; font-weight: 500; }
.company-card-header p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 13px; }
.company-change { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.company-metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 20px; }
.company-metrics div { padding: 11px 12px; background: var(--surface-soft); }
.company-metrics span { display: block; color: var(--muted); font-size: 11px; }
.company-metrics strong { display: block; margin-top: 2px; font-size: 17px; font-variant-numeric: tabular-nums; }
.company-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.company-tags span { padding: 4px 8px; border: 1px solid #b8d8c7; border-radius: 3px; color: #176c45; font-size: 12px; }
.company-note { margin: 18px 0 0; color: var(--muted); font-size: 12px; }
.company-workspace-grid { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 12px; margin-top: 12px; align-items: start; }
.company-watchlist-section { min-width: 0; }
.company-research-main { display: grid; min-width: 0; gap: 12px; }
.company-stock-jump { display: flex; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: #f7faf8; }
.company-stock-jump .field { display: grid; grid-template-columns: 38px minmax(0, 1fr); flex: 1; align-items: center; }
.company-stock-jump input, .company-analysis-form select, .company-analysis-form textarea { min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 4px; padding: 0 10px; background: #fff; color: var(--text); }
.company-watchlist { padding: 3px 14px 10px; }
.watchlist-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; gap: 8px; align-items: center; min-height: 66px; border-bottom: 1px solid #e7ece9; }
.watchlist-row:last-child { border-bottom: 0; }
.watchlist-stock { min-width: 0; border: 0; padding: 8px 0; background: transparent; color: var(--text); text-align: left; }
.watchlist-stock strong, .watchlist-stock small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watchlist-stock small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.watchlist-stock:hover strong { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.watchlist-value { min-width: 62px; text-align: right; font-variant-numeric: tabular-nums; }
.watchlist-value strong, .watchlist-value small { display: block; }
.watchlist-value small { font-size: 11px; }
.watchlist-remove { width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--muted); font-size: 21px; }
.watchlist-remove:hover { color: var(--negative); }
.watchlist-section { margin-top: 12px; }
.watchlist-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 220px auto; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.watchlist-toolbar .field { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 700; }
.watchlist-toolbar input, .watchlist-toolbar select { min-width: 0; width: 100%; min-height: 40px; border: 1px solid var(--line); border-radius: 4px; padding: 0 10px; background: var(--surface); color: var(--text); }
.watchlist-toolbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.watchlist-manage-dialog { width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--text); }
.watchlist-manage-dialog::backdrop { background: rgba(8, 12, 10, .72); }
.watchlist-manage-shell { margin: 0; }
.watchlist-manage-body { display: grid; gap: 14px; padding: 20px 24px 24px; }
.watchlist-manage-body .field { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.watchlist-manage-body input, .watchlist-manage-body textarea { width: 100%; border: 1px solid var(--line); border-radius: 4px; padding: 10px; background: var(--bg); color: var(--text); font: inherit; resize: vertical; }
.watchlist-manage-body textarea { min-height: 130px; }
.watchlist-manage-message { min-height: 20px; margin: 0; color: var(--muted); font-size: 12px; }
.watchlist-manage-actions { display: flex; justify-content: flex-end; gap: 8px; }
.watchlist-summary { display: flex; align-items: baseline; gap: 8px; padding: 14px 18px 6px; color: var(--muted); font-size: 12px; }
.watchlist-summary strong { color: var(--text); font-size: 22px; font-variant-numeric: tabular-nums; }
.watchlist-summary span:last-child { margin-left: auto; }
.watchlist-table { padding: 0 18px 16px; }
.watchlist-table-head, .watchlist-standalone-row { display: grid; grid-template-columns: minmax(160px, 1.15fr) minmax(130px, 1fr) 90px 90px 150px 44px; gap: 12px; align-items: center; }
.watchlist-table-head { min-height: 36px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 700; }
.watchlist-standalone-row { min-height: 72px; border-bottom: 1px solid #e7ece9; }
.watchlist-standalone-row:last-child { border-bottom: 0; }
.watchlist-standalone-row .watchlist-stock { padding: 10px 0 2px; }
.watchlist-stock-cell { display: grid; gap: 0; min-width: 0; align-content: center; }
.watchlist-stock-cell .watchlist-stock { min-width: 0; }
.watchlist-note { display: block; width: 100%; overflow: hidden; border: 0; background: transparent; padding: 0 0 8px; color: var(--muted); font-size: 11px; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.watchlist-note:hover, .watchlist-note:focus-visible { color: var(--accent); }
.watchlist-note.has-note { font-style: italic; }
.watchlist-note-editor { display: flex; min-width: 0; align-items: center; gap: 6px; padding-bottom: 8px; }
.watchlist-note-editor input { flex: 1; min-width: 0; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 12px; }
.watchlist-note-editor button { flex-shrink: 0; padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 11px; cursor: pointer; }
.watchlist-note-editor .watchlist-note-save { border-color: var(--accent); background: var(--accent); color: #ffffff; }
.watchlist-note-inline { display: block; margin-top: 1px; overflow: hidden; color: var(--muted); font-size: 10px; font-style: italic; text-overflow: ellipsis; white-space: nowrap; }
.watchlist-industry, .watchlist-ratios { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.watchlist-price, .watchlist-change { font-variant-numeric: tabular-nums; }
.watchlist-empty { display: grid; place-items: center; gap: 6px; min-height: 220px; padding: 30px 16px; color: var(--muted); text-align: center; }
.watchlist-empty strong { color: var(--text); font-size: 16px; }
.company-analysis-form { display: grid; gap: 10px; padding: 14px 18px 16px; border-bottom: 1px solid var(--line); background: #f7faf8; }
.company-analysis-form .field { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; align-items: center; color: var(--muted); font-size: 12px; font-weight: 700; }
.company-analysis-form select { max-width: 240px; }
.company-analysis-form textarea { min-height: 142px; padding: 10px 12px; resize: vertical; line-height: 1.6; }
.company-message-field { align-items: start !important; }
.company-message-field > span { padding-top: 10px; }
.company-analysis-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding-left: 66px; }
.company-analysis-actions p { flex: 1; min-height: 21px; margin: 0; color: var(--muted); font-size: 12px; }
.company-analysis-result { min-height: 148px; padding: 16px 18px 18px; }
.research-result-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.research-result-head h4 { margin: 0; font-size: 19px; }
.research-result-head span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.research-result-copy { margin-top: 12px; padding: 11px 12px; border-left: 3px solid var(--accent); background: #f1f8f4; }
.research-result-copy p { margin: 0; font-size: 13px; line-height: 1.65; }
.research-result-copy p + p { margin-top: 6px; color: var(--muted); }
.research-candidate-list { margin-top: 12px; border-top: 1px solid var(--line); }
.research-candidate-row { display: grid; grid-template-columns: minmax(130px, .45fr) minmax(220px, 1.2fr) auto; gap: 12px; align-items: center; min-height: 82px; padding: 10px 0; border-bottom: 1px solid #e7ece9; }
.candidate-stock { min-width: 0; border: 0; padding: 6px 0; background: transparent; color: var(--text); text-align: left; }
.candidate-stock strong, .candidate-stock small { display: block; }
.candidate-stock strong { font-size: 15px; }
.candidate-stock small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.candidate-stock:hover strong { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.research-candidate-row > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.candidate-actions { display: flex; gap: 6px; justify-content: flex-end; }
.candidate-actions .button { min-height: 38px; padding: 0 11px; font-size: 12px; }
.company-history-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; padding: 3px 18px 12px; }
.company-history-row { display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 52px; border: 0; border-bottom: 1px solid #e7ece9; padding: 5px 0; background: transparent; color: var(--text); text-align: left; }
.company-history-row span { color: var(--muted); font-size: 11px; }
.company-history-row strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.company-history-row small { color: var(--muted); font-size: 10px; white-space: nowrap; }
.company-history-row:hover strong, .company-history-row.active strong { color: var(--accent); }
.research-empty { padding: 24px 0; margin: 0; color: var(--muted); font-size: 13px; }
.announcement-section { margin-top: 12px; }
.news-mode-tabs { display: flex; gap: 4px; overflow-x: auto; margin: 12px 0 8px; border-bottom: 1px solid var(--line); }
.news-mode-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font: inherit; white-space: nowrap; cursor: pointer; }
.news-mode-tab.active { border-bottom-color: var(--accent); color: var(--text); font-weight: 700; }
.news-mode-tab.live-news-tab { color: #c52f3d; font-weight: 800; }
.news-mode-tab.live-news-tab.active { border-bottom-color: var(--accent); color: #c52f3d; }
.news-mode-tab span { color: var(--muted); font-size: 12px; }
.market-research-section { margin-top: 8px; }
.market-research-browser { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-width: 0; }
.market-research-browser .media-source-panel { padding: 0 12px 12px 12px; border-right: 1px solid var(--line); }
.market-research-browser .market-research-list { min-width: 0; }
.market-research-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.market-research-header h3 { margin: 0; font-size: 16px; }
.market-research-header p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.market-research-header .field { display: grid; grid-template-columns: auto minmax(160px, 260px); align-items: center; gap: 8px; }
.market-research-header input { min-width: 0; min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--text); }
.market-research-list { display: grid; }
.market-research-list > .research-empty { padding-right: 18px; padding-left: 18px; }
.market-research-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.market-research-row-main { min-width: 0; }
.market-research-row-main > a, .market-research-row-main > strong { color: var(--text); font-size: 14px; font-weight: 700; line-height: 1.5; text-decoration: none; }
.market-research-row-main > a:hover { color: var(--positive); text-decoration: underline; }
.market-research-row-main > p { margin: 7px 0; color: var(--muted); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.market-research-row-main > div { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: 11px; }
.market-research-target { flex: 0 0 auto; color: var(--positive); font-weight: 700; font-size: 13px; }
.market-research-actions { display: flex; align-items: flex-end; gap: 8px; }
.futures-research-card { margin-bottom: 12px; border: 1px solid var(--line); border-radius: 6px; padding: 14px; background: var(--surface-soft); }
.futures-research-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.futures-research-card > header h3 { margin: 0; font-size: 15px; }
.futures-research-card > header > span { color: var(--muted); font-size: 11px; }
.futures-research-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 12px; }
.futures-research-grid h4 { margin: 0 0 8px; color: var(--muted); font-size: 11px; }
.futures-research-grid h4 small { float: right; font-size: 10px; font-weight: 500; }
.futures-research-metric { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.futures-research-metric strong { color: var(--text); font-variant-numeric: tabular-nums; }
.futures-stock-links { display: flex; flex-wrap: wrap; gap: 6px; }
.futures-stock-link { min-height: 30px; border: 1px solid var(--line); border-radius: 4px; padding: 0 9px; background: var(--surface); color: var(--text); font-size: 12px; }
.futures-stock-link:hover { border-color: var(--accent); color: var(--accent); }
.section-heading-actions { display: flex; align-items: center; gap: 10px; }
.section-heading-actions > span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.announcement-tools { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: #f7faf8; }
.announcement-tools .field { display: grid; grid-template-columns: 42px minmax(0, 1fr); }
.announcement-tools input, .announcement-tools select { min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 4px; padding: 0 10px; background: #fff; color: var(--text); }
.announcement-list { padding: 4px 18px 10px; }
.announcement-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; min-height: 80px; padding: 12px 0; border-bottom: 1px solid #e7ece9; }
.announcement-row:last-child { border-bottom: 0; }
.announcement-row { cursor: pointer; }
.announcement-row:hover, .announcement-row.selected { background: #f4faf6; }
.announcement-row.selected { box-shadow: none; }
.announcement-row-actions { display: flex; flex: 0 0 auto; align-items: flex-start; gap: 6px; }
.announcement-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 18px 16px; border-top: 1px solid var(--line); }
.announcement-pagination span { min-width: 90px; color: var(--muted); font-size: 12px; text-align: center; }
.announcement-main { min-width: 0; }
.announcement-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--muted); font-size: 11px; }
.announcement-tag { display: inline-flex; align-items: center; min-height: 22px; padding: 0 7px; border-radius: 3px; font-weight: 800; }
.announcement-tag.positive { background: #e6f5ed; color: #087b49; }
.announcement-tag.negative { background: #fff0f1; color: #ae3b49; }
.announcement-tag.neutral { background: #eef1f0; color: #65716b; }
.announcement-title { display: block; margin-top: 1px; overflow: hidden; color: var(--text); font-size: 14px; font-weight: 700; line-height: 1.5; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.announcement-title:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.announcement-summary { display: block; margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.announcement-message-title { margin: 0 0 7px; color: var(--text); font-size: 14px; line-height: 1.55; }
.announcement-message-body { color: var(--text); font-size: 13px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.announcement-media { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 360px)); align-items: start; gap: 8px; margin-top: 10px; }
.announcement-media-trigger { display: flex; align-items: center; justify-content: center; width: min(100%, 360px); max-height: 440px; overflow: hidden; border: 1px solid var(--line); padding: 0; background: var(--surface-soft); cursor: zoom-in; }
.announcement-media img { display: block; width: auto; max-width: 100%; height: auto; max-height: 440px; object-fit: contain; image-rendering: auto; }
.announcement-media-trigger:hover { border-color: var(--accent); }
.announcement-original-link { flex: 0 0 auto; align-self: flex-start; padding: 4px 7px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); font-size: 11px; text-decoration: none; }
.announcement-original-link:hover { border-color: var(--accent); color: var(--accent); }
.announcement-delete-button { flex: 0 0 auto; border: 1px solid #e6b6bb; border-radius: 3px; padding: 4px 7px; background: #fff7f7; color: #ae3b49; font-size: 11px; }
.announcement-delete-button:hover { border-color: #ae3b49; background: #fff0f1; }
.blogger-add-panel { color: var(--text); border-bottom: 1px solid var(--border); margin-bottom: 16px; padding: 12px 0; }
.blogger-add-panel summary { cursor: pointer; font-weight: 600; min-height: 44px; display: list-item; }
.blogger-add-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.blogger-add-form .field { flex: 1 1 240px; display: grid; gap: 6px; }
.blogger-add-form input { width: 100%; min-width: 0; background: var(--surface); color: var(--text); }
.blogger-url-examples { flex-basis: 100%; display: grid; gap: 4px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
#memberBloggerMessage { color: var(--text); }
@media (max-width: 620px) {
  .blogger-add-form .field { flex-basis: 100%; }
  .blogger-detail-header { flex-wrap: wrap; }
  .blogger-detail-header > div { flex: 1 1 100%; min-width: 0; }
  .blogger-detail-header > .button { flex: 0 0 auto; white-space: nowrap; }
}
.image-viewer-source { position: fixed; inset: 0 auto auto 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.announcement-score { color: var(--muted); font-size: 11px; }
.announcement-analysis { margin: 0 18px 12px; padding: 14px 15px; border-left: 3px solid var(--accent); background: #f1f8f4; }
.announcement-analysis-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.announcement-analysis-head h4 { margin: 0; font-size: 15px; }
.announcement-analysis-head > span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.announcement-analysis > p { margin: 8px 0 0; color: var(--text); font-size: 13px; line-height: 1.6; }
.announcement-stocks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.announcement-stocks span { padding: 4px 7px; border: 1px solid #b8d8c7; border-radius: 3px; color: #176c45; font-size: 11px; }
.announcement-note { margin: 0; padding: 12px 18px 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.5; }
.integration-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px 18px 18px; }
.integration-grid article { min-height: 150px; padding: 15px; border: 1px solid var(--line); background: #fbfcfb; }
.integration-grid strong { font-size: 15px; }
.integration-grid p { min-height: 60px; margin: 8px 0; color: var(--muted); font-size: 12px; }
.integration-status { font-size: 12px; font-weight: 800; }
.integration-status.planned { color: #8b6b12; }
.integration-status.ready { color: var(--positive); }
.board-review-layout { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) minmax(220px, 260px); gap: 12px; margin-top: 12px; align-items: start; }
.board-taxonomy-section, .board-table-section, .kline-section { margin-top: 0; min-width: 0; }
.board-taxonomy-section { position: sticky; top: 66px; }
.board-alert-section { position: sticky; top: 66px; }
.board-alert-meta { display: grid; flex: 0 0 auto; justify-items: end; gap: 3px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.board-alert-meta time { white-space: nowrap; }
.board-alert-list { padding: 4px 14px 10px; }
.board-alert-row { display: flex; width: 100%; min-height: 52px; align-items: flex-start; gap: 9px; border: 0; border-bottom: 1px solid var(--line); padding: 10px 4px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.board-alert-row:hover { background: #eef8f2; }
.board-alert-row strong, .board-alert-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-alert-row strong { color: var(--accent); font-size: 13px; }
.board-alert-row small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.board-alert-dot { width: 7px; height: 7px; flex: 0 0 7px; margin-top: 5px; border-radius: 50%; background: #d95b42; box-shadow: 0 0 0 3px #fbe9e4; }
.board-alert-clear { width: calc(100% - 28px); min-height: 32px; margin: 0 14px 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--muted); font-size: 12px; cursor: pointer; }
.board-alert-clear:hover { border-color: var(--accent); color: var(--accent); }
.board-taxonomy-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 12px 18px 0; }
.board-taxonomy-tab { min-height: 36px; border: 1px solid var(--line); border-radius: 4px; padding: 0 7px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 700; }
.board-taxonomy-tab.active { border-color: var(--accent); background: #e9f6ef; color: var(--accent); }
.board-taxonomy-note { margin: 10px 18px 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.board-filters { display: flex; gap: 6px; padding: 12px 18px 0; }
.board-date-filter { display: inline-grid; grid-template-columns: auto 128px; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.board-date-filter select { min-width: 0; min-height: 34px; border: 1px solid var(--line); border-radius: 4px; padding: 0 8px; background: var(--surface); color: var(--text); font-size: 12px; }
.board-sort { display: inline-grid; grid-template-columns: auto 150px; align-items: center; gap: 7px; margin-left: auto; color: var(--muted); font-size: 12px; }
.board-sort select { min-width: 0; min-height: 34px; border: 1px solid var(--line); border-radius: 4px; padding: 0 8px; background: var(--surface); color: var(--text); font-size: 12px; }
.board-reason-note { margin: 12px 18px 0; padding: 10px 12px; border-left: 3px solid #c99524; background: #fff9ed; color: #735514; font-size: 12px; line-height: 1.6; }
.board-filter, .kline-period { min-height: 34px; border: 1px solid var(--line); border-radius: 4px; padding: 0 12px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 700; }
.board-filter.active, .kline-period.active { border-color: var(--accent); background: #e9f6ef; color: var(--accent); }
.board-table-wrap { overflow-x: auto; padding: 8px 18px 16px; }
.board-table { min-width: 1120px; border-collapse: collapse; width: 100%; font-size: 13px; }
.board-table th, .board-table td { padding: 11px 10px; border-bottom: 1px solid #e7ece9; text-align: right; white-space: nowrap; }
.board-table th:first-child, .board-table td:first-child, .board-table th:nth-child(2), .board-table td:nth-child(2), .board-table th:nth-child(3), .board-table td:nth-child(3), .board-table th:nth-child(4), .board-table td:nth-child(4), .board-table th:nth-child(5), .board-table td:nth-child(5) { text-align: left; }
.board-table th { color: var(--muted); font-size: 12px; font-weight: 700; }
.board-table th button { min-height: 28px; color: inherit; font-size: inherit; font-weight: inherit; }
.board-table tbody tr { color: var(--text); }
.board-table tbody tr:hover { background: #eef8f2; color: var(--text); }
.board-table tbody tr:hover td { color: var(--text); }
.board-table .code, .board-table .muted { color: var(--muted); }
.board-table .positive { color: var(--positive); }
.board-table .negative { color: var(--negative); }
.board-table td strong { font-weight: 750; }
.board-reason { max-width: 240px; text-align: left; white-space: normal; }
.board-reason strong, .board-reason small { display: block; overflow: hidden; text-overflow: ellipsis; }
.board-reason strong { max-width: 240px; font-size: 12px; font-weight: 700; }
.board-reason small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.company-link { min-height: 32px; border: 0; padding: 0; background: transparent; color: var(--accent); font-weight: 800; text-decoration: underline; text-decoration-color: #b8d8c7; text-underline-offset: 3px; }
.company-link:hover { color: var(--accent-hover); text-decoration-color: var(--accent-hover); }
.company-detail-link { border: 0; padding: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 800; text-align: left; }
.company-detail-link:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.mobile-stock-main .company-detail-link { color: inherit; font-size: inherit; font-weight: inherit; }
.board-status { display: inline-flex; align-items: center; min-height: 24px; padding: 0 7px; border-radius: 3px; font-size: 12px; font-weight: 800; }
.board-status.sealed { background: #e6f5ed; color: #087b49; }
.board-status.broken { background: #fff1e5; color: #a85a17; }
.board-heat-section { margin-top: 12px; }
.board-sector-list { display: grid; grid-template-columns: minmax(0, 1fr); padding: 6px 18px 16px; }
.board-sector-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name limit broken" "bar bar bar"; align-items: center; gap: 6px 10px; min-width: 0; min-height: 54px; border: 0; border-bottom: 1px solid #e7ece9; padding: 7px 0 8px; background: transparent; color: var(--text); text-align: left; }
.board-sector-row:hover, .board-sector-row.active { color: var(--accent); }
.board-sector-row > span { grid-area: name; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; }
.board-sector-row > i { grid-area: bar; height: 5px; overflow: hidden; border-radius: 2px; background: #e8efeb; }
.board-sector-row > i b { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.board-sector-row strong, .board-sector-row small { white-space: nowrap; font-size: 11px; font-weight: 700; }
.board-sector-row strong { grid-area: limit; }
.board-sector-row small { color: #a85a17; }
.board-sector-row small { grid-area: broken; }
.kline-tools { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: #f7faf8; }
.kline-search { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kline-search .field { display: grid; grid-template-columns: 42px minmax(180px, 260px); }
.kline-search input { min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 4px; padding: 0 10px; background: #fff; color: var(--text); }
.kline-tools .field { display: grid; grid-template-columns: 42px 220px; }
.kline-tools select { min-width: 0; border: 1px solid var(--line); border-radius: 4px; padding: 0 10px; background: #fff; color: var(--text); }
.kline-periods { display: flex; gap: 5px; }
.kline-summary { display: flex; flex-wrap: wrap; gap: 18px; padding: 12px 18px 0; color: var(--muted); font-size: 12px; }
.kline-summary b { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.kline-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 8px 18px 0; color: var(--muted); font-size: 11px; }
.kline-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.legend-ma { display: inline-block; width: 18px; height: 2px; }
.legend-ma.ma5 { background: #0d7a4c; }
.legend-ma.ma10 { background: #c47c16; }
.legend-ma.ma20 { background: #8d4bb3; }
.kline-hover { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kline-chart-wrap { position: relative; min-height: 360px; padding: 12px 18px 16px; }
#klineCanvas { display: block; width: 100%; height: 360px; }
#stockKlineChart { width: 100%; height: 100%; min-height: 420px; }
.kline-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; color: var(--muted); font-size: 13px; text-align: center; pointer-events: none; }

.admin-dialog, .code-dialog { width: min(1320px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: var(--text); }
.admin-dialog::backdrop, .code-dialog::backdrop { background: rgba(8, 12, 10, .72); }
.admin-shell { min-height: min(760px, calc(100vh - 34px)); padding: 22px; overflow: auto; }
.admin-header { position: sticky; top: -22px; z-index: 4; display: flex; justify-content: space-between; align-items: center; gap: 18px; margin: -22px -22px 18px; padding: 18px 22px; border-bottom: 1px solid var(--line); background: rgba(243, 245, 244, .97); }
.admin-header h2, .code-dialog h2 { margin: 0; font-size: 22px; }
.admin-unlock { width: min(520px, 100%); margin: 80px auto; padding: 24px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.admin-unlock label { display: block; margin-bottom: 9px; font-weight: 700; }
.admin-unlock > div { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.admin-unlock input, .member-form input { min-width: 0; border: 1px solid var(--line); border-radius: 4px; padding: 0 11px; }
.admin-unlock p { min-height: 22px; margin: 8px 0 0; color: var(--negative); }
.admin-message { min-height: 24px; margin: 0; color: var(--positive); font-size: 13px; }
.admin-section > .admin-message { padding: 12px 15px; }
.admin-message.error { color: var(--negative); }
.admin-health-strip { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.admin-health-strip-label { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.admin-health-strip-value { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.admin-health-strip.ok { border-color: #9ccfb2; background: #edf8f1; }
.admin-health-strip.ok .admin-health-strip-value { color: var(--positive); }
.admin-health-strip.error { border-color: #e5b3b8; background: #fdf0f1; }
.admin-health-strip.error .admin-health-strip-value { color: var(--negative); }
.admin-health-strip.neutral .admin-health-strip-value { color: var(--muted); }
.admin-health-strip .button { flex-shrink: 0; }
.admin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.admin-stats div { padding: 15px; border-left: 3px solid var(--accent); background: var(--surface); }
.admin-stats span { display: block; color: var(--muted); font-size: 12px; }
.admin-stats strong { font-size: 23px; }
.admin-section { margin-top: 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); overflow: hidden; }
.admin-section-title { display: flex; justify-content: space-between; align-items: center; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.admin-username { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.admin-section-title h3 { margin: 0; font-size: 16px; }
.admin-export { display: inline-flex; align-items: center; text-decoration: none; }
.member-form { display: grid; grid-template-columns: 1fr 180px 1.4fr auto; align-items: end; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.member-form label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.form-actions { display: flex; gap: 6px; }
.compact-field { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.compact-field input { min-height: 32px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--text); font: inherit; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { min-width: 1000px; background: var(--surface); color: var(--text); }
.admin-table th, .admin-table td { border-color: #e0e5e2; text-align: left; }
.admin-table th { background: #eef2f0; color: var(--muted); }
.admin-table th button { min-height: 28px; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.admin-table th button:hover { color: var(--accent); }
.admin-table th button span { margin-left: 4px; color: var(--muted); }
.admin-table td strong, .admin-table td small { display: block; }
.admin-table td small { max-width: 220px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; }
.collector-table-wrap .admin-table { min-width: 920px; }
.collector-table-wrap td small { display: block; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collector-source-stack { display: grid; gap: 3px; min-width: 220px; }
.collector-source-state { display: block; width: fit-content; max-width: 300px; overflow: hidden; border: 1px solid #cfe0d6; border-radius: 3px; padding: 2px 6px; color: var(--muted); background: #f5f9f6; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.collector-source-state.enabled { border-color: #b9d7c6; color: var(--positive); background: #edf8f1; }
.collector-source-state.disabled { border-color: #e7c1c5; color: var(--negative); background: #fff4f4; }
.collector-source-state.neutral { color: var(--muted); background: #f5f6f5; }
.collector-error, .collector-card-error { color: var(--negative) !important; }
.admin-collector-cards { display: none; }
.admin-collector-card { padding: 13px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
.admin-collector-card header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.admin-collector-card h4 { margin: 0; font-size: 15px; }
.admin-collector-card header small, .admin-collector-card p { color: var(--muted); font-size: 12px; }
.admin-collector-card header small { display: block; margin-top: 3px; }
.collector-card-sources { display: grid; gap: 5px; margin: 12px 0; }
.admin-collector-card dl { display: grid; gap: 7px; margin: 0 0 12px; }
.admin-collector-card dl div { display: flex; justify-content: space-between; gap: 10px; }
.admin-collector-card dt { color: var(--muted); font-size: 12px; }
.admin-collector-card dd { margin: 0; font-size: 12px; text-align: right; }
.admin-collector-card p { margin: 7px 0; }
.admin-collector-card .collector-card-error { max-height: 88px; overflow: auto; overflow-wrap: anywhere; }
.admin-collector-card .collector-run-button { width: 100%; margin-top: 7px; }
.collector-run-button { min-height: 32px; padding: 0 9px; }
.kline-backfill-section { margin-top: 14px; }
.kline-backfill-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.kline-backfill-summary > div { min-width: 0; padding: 11px 12px; border: 1px solid var(--line); background: var(--surface); }
.kline-backfill-summary span, .kline-backfill-summary strong { display: block; }
.kline-backfill-summary span { color: var(--muted); font-size: 12px; }
.kline-backfill-summary strong { margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.kline-backfill-summary strong.negative { color: var(--negative); }
.kline-backfill-progress { height: 8px; overflow: hidden; border-radius: 4px; background: #e8eeea; }
.kline-backfill-progress span { display: block; width: 0; height: 100%; background: var(--positive); transition: width .2s ease; }
.kline-backfill-section .admin-message { min-height: 20px; margin: 10px 0 0; }
.admin-table tbody tr:hover { background: #f3f6f4; }
.access-table { table-layout: fixed; width: 100%; min-width: 1080px; }
.access-table th, .access-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.access-table th:nth-child(1), .access-table td:nth-child(1) { width: 155px; }
.access-table th:nth-child(2), .access-table td:nth-child(2) { width: 105px; }
.access-table th:nth-child(3), .access-table td:nth-child(3) { width: 125px; }
.access-table th:nth-child(4), .access-table td:nth-child(4) { width: 33%; }
.access-table th:nth-child(5), .access-table td:nth-child(5) { width: 145px; }
.access-table th:nth-child(6), .access-table td:nth-child(6) { width: 22%; }
.access-detail-cell, .device-cell { cursor: help; }
.status-text { font-size: 12px; font-weight: 700; }
.status-text.enabled { color: var(--positive); }
.status-text.disabled { color: var(--negative); }
.status-text.warning { color: #9a5c09; }
.row-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.row-actions button { min-height: 32px; border: 1px solid var(--line); border-radius: 3px; padding: 0 7px; background: #fff; color: var(--text); font-size: 12px; }
.row-actions button:hover { border-color: var(--accent); color: var(--accent); }
.row-actions button.danger { color: var(--negative); }
.device-cell { max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.admin-empty { padding: 28px !important; color: var(--muted); text-align: center !important; }
.admin-member-cards { display: none; }
.code-dialog { width: min(520px, calc(100vw - 32px)); }
.code-dialog > div { padding: 26px; }
.code-dialog output { display: block; margin: 18px 0 8px; padding: 15px; border: 1px dashed var(--accent); border-radius: 5px; background: var(--surface-soft); font-size: 20px; font-weight: 800; text-align: center; }
.code-dialog p { color: var(--muted); }
.code-dialog > div > div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.administrator-page { width: min(1500px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 56px; }
.administrator-page .admin-shell { min-height: auto; padding: 0; overflow: visible; }
.administrator-page .admin-header { position: static; margin: 0 0 18px; padding: 0 0 18px; background: transparent; }
.admin-tabs { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.admin-tab { min-height: 44px; border: 0; border-bottom: 2px solid transparent; padding: 0 14px; background: transparent; color: var(--muted); font-weight: 750; white-space: nowrap; }
.admin-tab.active { border-color: var(--accent); color: var(--accent); background: #edf8f1; }
.admin-tab-panel[hidden] { display: none; }
.admin-tab-panel .admin-section { margin-top: 0; }
.collab-form { display: grid; grid-template-columns: 1fr 1fr 1.4fr auto; gap: 10px; align-items: end; padding: 14px 15px; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.collab-form label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.collab-form input { min-width: 0; border: 1px solid var(--line); border-radius: 4px; padding: 0 10px; background: var(--surface); color: var(--text); }
.permission-checks { display: flex; flex-wrap: wrap; gap: 6px 10px; min-height: 44px; align-items: center; }
.permission-presets { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; width: 100%; }
.permission-presets small { color: var(--muted-foreground, #68746d); }
.permission-checks label { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.permission-checks input { min-height: auto; }
.collab-form .form-actions { grid-column: 1 / -1; }
.collab-permission-list { display: flex; flex-wrap: wrap; gap: 4px; }
.permission-chip { padding: 2px 6px; border: 1px solid #b9d7c6; border-radius: 3px; color: var(--accent); background: #edf8f1; font-size: 11px; }
.collab-password { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: 0.5px; color: var(--text); user-select: all; }
.collab-ip-note { display: block; margin-top: 4px; color: var(--muted, #68746d); font-size: 11px; }

body.mobile-layout { background: #070b08; color: #f2f5f3; }
body.mobile-layout .valuation-shell {
  width: min(390px, 100%);
  max-width: 390px;
  padding: 0 12px max(34px, env(safe-area-inset-bottom));
}
body.mobile-layout .valuation-header { align-items: flex-start; padding: 18px 2px 14px; border-color: #283129; }
body.mobile-layout .valuation-header .eyebrow { color: var(--accent); }
body.mobile-layout .valuation-header h1 { font-size: 23px; }
body.mobile-layout .subtitle { color: #778179; }
body.mobile-layout .account-actions { flex-wrap: wrap; justify-content: flex-end; }
body.mobile-layout .account-summary { display: none; }
body.mobile-layout .account-permission-button { border-color: #39433b; background: #131914; color: #edf2ee; }
body.mobile-layout .account-permission-button.active { border-color: #c7ff38; color: #c7ff38; }
.workspace-nav { overflow-x: auto; }
body.mobile-layout .workspace-nav { margin-top: 10px; border-color: #283129; }
body.mobile-layout .workspace-tab { color: #89938b; }
body.mobile-layout .workspace-tab.active { border-color: var(--accent); color: var(--accent); }
body.mobile-layout .view-switch { order: 3; width: 100%; justify-content: flex-end; border-color: #283129; background: #111712; }
body.mobile-layout .view-switch button { color: #89938b; }
body.mobile-layout .view-switch button.active { background: var(--accent); color: #fff; }
body.mobile-layout .button { border-color: #39433b; background: #131914; color: #edf2ee; }
body.mobile-layout .button-primary { border-color: var(--accent); background: var(--accent); color: #fff; }
body.mobile-layout .control-bar { display: block; margin-top: 8px; padding: 8px; border-color: #303a32; background: #101611; }
body.mobile-layout .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
body.mobile-layout .tab { min-height: 54px; color: #7e8980; font-size: 17px; font-weight: 750; }
body.mobile-layout .tab.active { border-color: #1d281f; background: #0a110b; color: #fff; }
body.mobile-layout .search-box { display: grid; grid-template-columns: 42px 1fr; margin-top: 8px; }
body.mobile-layout .field input { border-color: #303a32; background: #080d09; color: #fff; }
body.mobile-layout .classification-level-box, body.mobile-layout .classification-box, body.mobile-layout .control-bar > .button-primary { display: none; }
body.mobile-layout .mobile-industry-chips { display: flex; gap: 8px; margin-top: 10px; padding: 8px 2px; overflow-x: auto; scrollbar-width: none; }
body.mobile-layout .industry-chip { flex: 0 0 auto; min-height: 40px; border: 1px solid #354037; border-radius: 20px; padding: 0 14px; background: #0e140f; color: #949d96; }
body.mobile-layout .industry-chip.active { border-color: var(--accent); color: var(--accent); }
body.mobile-layout .industry-chip span { font-variant-numeric: tabular-nums; }
body.mobile-layout .stat-strip, body.mobile-layout .desktop-ranking { display: none; }
body.mobile-layout .mobile-ranking { display: block; margin-top: 8px; border: 1px solid #303a32; border-radius: 5px; background: #0b110c; overflow: hidden; }
body.mobile-layout .mobile-list-head { display: flex; justify-content: space-between; align-items: center; padding: 14px; border-bottom: 1px solid #303a32; }
body.mobile-layout .mobile-list-head h2 { margin: 0; font-size: 18px; }
body.mobile-layout .mobile-list-head span { color: #7e8880; font-size: 12px; }
body.mobile-layout .mobile-list-tools { display: grid; justify-items: end; gap: 5px; }
body.mobile-layout .mobile-list-tools select { min-height: 34px; max-width: 130px; border: 1px solid #354037; border-radius: 4px; padding: 0 7px; background: #101611; color: #aab3ac; font-size: 11px; }
body.mobile-layout .mobile-stock-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(118px, .8fr); gap: 8px; align-items: center; min-height: 112px; padding: 14px 10px; border-bottom: 1px solid #29322b; }
body.mobile-layout .mobile-rank { color: #858e87; font-size: 18px; text-align: center; }
body.mobile-layout .mobile-stock-row:nth-child(-n+3) .mobile-rank { color: var(--accent); }
body.mobile-layout .mobile-stock-main { min-width: 0; }
body.mobile-layout .mobile-stock-main h3 { margin: 0 0 6px; overflow: hidden; color: #f8faf8; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
body.mobile-layout .mobile-stock-main p, body.mobile-layout .mobile-stock-value p { margin: 0; color: #747f76; font-size: 11px; white-space: nowrap; }
body.mobile-layout .score-track { height: 7px; margin-top: 11px; border-radius: 3px; background: #151d17; overflow: hidden; }
body.mobile-layout .score-track span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
body.mobile-layout .mobile-stock-value { min-width: 0; text-align: right; }
body.mobile-layout .mobile-stock-value strong { display: block; margin-bottom: 5px; color: #f8faf8; font-size: 18px; }
body.mobile-layout .mobile-stock-value span { display: block; margin-top: 3px; font-size: 12px; }
body.mobile-layout .mobile-pagination { display: flex; justify-content: space-between; align-items: center; padding: 12px; }
body.mobile-layout .mobile-pagination span { color: #909a92; font-size: 12px; }
body.mobile-layout .mobile-empty { padding: 34px 16px; color: #8b958d; text-align: center; }
body.mobile-layout .research-view { margin-top: 10px; }
body.mobile-layout .permission-account-state { border-color: #4a6747; background: #172019; color: #c7ff38; }
body.mobile-layout .permission-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
body.mobile-layout .permission-summary > div { padding: 12px; border-color: #303a32; background: #101611; }
body.mobile-layout .permission-summary span, body.mobile-layout .permission-feature-main small { color: #89938b; }
body.mobile-layout .permission-feature-section { margin-top: 8px; border-color: #303a32; background: #101611; }
body.mobile-layout .permission-feature-list { padding: 0 14px 6px; }
body.mobile-layout .permission-feature-row { border-color: #29322b; color: #edf2ee; }
body.mobile-layout button.permission-feature-row:hover { background: #151d17; color: #c7ff38; }
body.mobile-layout .permission-feature-row.is-locked { color: #7f8981; }
body.mobile-layout .permission-feature-status.free, body.mobile-layout .permission-feature-status.unlocked { border-color: #4a6747; background: #172019; color: #c7ff38; }
body.mobile-layout .permission-feature-status.locked { border-color: #39443f; background: transparent; color: #89938b; }
body.mobile-layout .research-hero { display: block; padding: 17px 14px; border-color: #303a32; background: #101611; }
body.mobile-layout .stock-page { width: min(390px, 100%); }
body.mobile-layout .stock-header { display: block; }
body.mobile-layout .stock-header h1 { max-width: 100%; font-size: 23px; }
body.mobile-layout .stock-header-actions { justify-content: space-between; margin-top: 14px; }
body.mobile-layout .stock-query-section { margin-top: 8px; }
body.mobile-layout .stock-query-form { display: block; padding: 10px 14px; border-color: #303a32; background: #101611; }
body.mobile-layout .stock-query-form .field { display: grid; grid-template-columns: 42px minmax(0, 1fr); margin-bottom: 8px; }
body.mobile-layout .stock-query-form input { border-color: #354037; background: #080d09; color: #edf2ee; }
body.mobile-layout .stock-query-form .button { width: 100%; }
body.mobile-layout .stock-data-note { color: #89938b; }
body.mobile-layout .stock-overview-grid { display: block; margin-top: 8px; }
body.mobile-layout .stock-context-grid { display: block; margin-top: 8px; }
body.mobile-layout .stock-context-section { margin-top: 8px; border-color: #303a32; background: #0f150f; }
body.mobile-layout .stock-context-row { border-color: #29322b; color: #edf2ee; }
body.mobile-layout .stock-alert-form select, body.mobile-layout .stock-alert-form input { border-color: #354037; background: #080d09; color: #edf2ee; }
body.mobile-layout .stock-alert-form { display: block; padding: 10px 14px; }
body.mobile-layout .stock-alert-form select, body.mobile-layout .stock-alert-form input { width: 100%; margin-bottom: 6px; }
body.mobile-layout .stock-alert-form .button { width: 100%; }
body.mobile-layout .stock-alert-remove { border-color: #354037; color: #89938b; }
body.mobile-layout .stock-alert-row.stock-alert-triggered strong { color: #5ad6a0; }
body.mobile-layout .stock-context-row span, body.mobile-layout .stock-context-row small { color: #89938b; }
body.mobile-layout .stock-overview-card { margin-top: 8px; border-color: #303a32; background: #0f150f; }
body.mobile-layout .stock-metrics { grid-template-columns: repeat(2, 1fr); padding: 10px 14px 14px; }
body.mobile-layout .stock-metrics div { background: #162019; }
body.mobile-layout .stock-classification { padding: 10px 14px 14px; }
body.mobile-layout .stock-tag-list span { border-color: #3a563d; color: #b9d7bf; }
body.mobile-layout .stock-board-section { margin-top: 8px; }
body.mobile-layout .stock-auction-section { margin-top: 8px; }
body.mobile-layout .stock-microstructure-actions { justify-content: flex-start; }
body.mobile-layout .stock-microstructure-grid { grid-template-columns: 1fr; padding: 10px 14px; }
body.mobile-layout .stock-microstructure-seats { padding: 0 14px 12px; }
body.mobile-layout .stock-micro-row { grid-template-columns: minmax(90px, 1.4fr) repeat(3, minmax(58px, 1fr)); gap: 5px; font-size: 10px; }
body.mobile-layout .stock-micro-row > span:last-child { display: none; }
body.mobile-layout .stock-microstructure-actions { justify-content: flex-start; }
body.mobile-layout .stock-microstructure-grid { grid-template-columns: 1fr; padding: 10px 14px; }
body.mobile-layout .stock-microstructure-seats { padding: 0 14px 12px; }
body.mobile-layout .stock-micro-row { grid-template-columns: minmax(90px, 1.4fr) repeat(3, minmax(58px, 1fr)); gap: 5px; font-size: 10px; }
body.mobile-layout .stock-micro-row > span:last-child { display: none; }
body.mobile-layout .stock-auction-actions { align-items: flex-end; flex-direction: column; gap: 5px; }
body.mobile-layout .stock-auction-metrics { grid-template-columns: repeat(2, 1fr); padding: 10px 14px 12px; }
body.mobile-layout .stock-auction-metrics > div { background: #162019; }
body.mobile-layout .stock-auction-note { padding: 0 14px 13px; }
body.mobile-layout .data-capability-strip { grid-template-columns: 1fr; gap: 12px; margin: 8px 0; padding: 14px; }
body.mobile-layout .data-capability-list { grid-template-columns: 1fr; }
body.mobile-layout .stock-board-summary { padding: 10px 14px 4px; gap: 14px; }
body.mobile-layout .stock-board-list { padding: 4px 14px 12px; }
body.mobile-layout .stock-board-row { grid-template-columns: 52px 72px 56px 78px minmax(0, 1fr); gap: 6px; border-color: #29322b; }
body.mobile-layout .research-hero h2 { font-size: 22px; }
body.mobile-layout .research-hero p:not(.eyebrow) { color: #89938b; font-size: 12px; }
body.mobile-layout .research-hero-actions { justify-content: space-between; margin-top: 14px; }
body.mobile-layout .cache-badge { border-color: #3a563d; background: #152018; color: #b9d7bf; }
body.mobile-layout .cache-badge.is-stale { border-color: #8b6238; background: #2a2118; color: #f0c38e; }
body.mobile-layout .research-kpis { grid-template-columns: repeat(2, 1fr); gap: 7px; }
body.mobile-layout .research-view:not(.board-view) > .research-kpis { grid-template-columns: repeat(2, 1fr); }
body.mobile-layout .research-kpis > div { min-height: 95px; padding: 12px; border-color: #303a32; background: #101611; }
body.mobile-layout .research-kpis strong { font-size: 23px; }
body.mobile-layout .review-date-field { grid-template-columns: auto minmax(0, 1fr); flex: 1 1 190px; }
body.mobile-layout .review-date-field select { width: 100%; min-height: 44px; border-color: #354037; background: #080d09; color: #edf2ee; }
body.mobile-layout .review-trend-section { margin-top: 8px; }
body.mobile-layout .review-trend { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; min-height: 0; padding: 10px 14px 14px; }
body.mobile-layout .review-trend-day { grid-template-rows: 18px 66px 20px 18px; min-height: 140px; border-color: #303a32; background: #101611; color: #edf2ee; touch-action: manipulation; }
body.mobile-layout .review-trend-day:hover, body.mobile-layout .review-trend-day.active { border-color: var(--accent); background: var(--accent-soft, var(--surface-soft)); }
body.mobile-layout .review-trend-value, body.mobile-layout .review-trend-day small { color: #89938b; }
body.mobile-layout .review-trend-bars { height: 60px; }
body.mobile-layout .review-primary-grid, body.mobile-layout .review-secondary-grid, body.mobile-layout .review-market-grid { display: block; margin-top: 0; }
body.mobile-layout .review-primary-grid > .research-section, body.mobile-layout .review-secondary-grid > .research-section, body.mobile-layout .review-market-grid > .research-section { margin-top: 8px; }
body.mobile-layout .review-theme-list, body.mobile-layout .review-ladder, body.mobile-layout .review-promotion, body.mobile-layout .review-quality, body.mobile-layout .review-timeline { padding-right: 14px; padding-left: 14px; }
body.mobile-layout .review-theme-row { grid-template-columns: 22px minmax(0, 1fr); gap: 8px; border-color: #29322b; }
body.mobile-layout .review-theme-main > div:first-child { display: block; }
body.mobile-layout .review-theme-main > div:first-child span { display: block; margin-top: 3px; white-space: normal; }
body.mobile-layout .review-theme-row time { grid-column: 2; padding: 0; text-align: left; }
body.mobile-layout .review-theme-bar, body.mobile-layout .review-timeline i { background: #1a241c; }
body.mobile-layout .review-stock-links { gap: 4px 8px; }
body.mobile-layout .review-stock-links button { min-height: 36px; color: #edf2ee; touch-action: manipulation; }
body.mobile-layout .review-ladder-tier { grid-template-columns: 54px minmax(0, 1fr); border-color: #29322b; }
body.mobile-layout .review-ladder-stocks { grid-template-columns: 1fr; gap: 2px; }
body.mobile-layout .review-ladder-stocks button { min-height: 44px; color: #edf2ee; touch-action: manipulation; }
body.mobile-layout .review-promotion > div, body.mobile-layout .review-quality > div { background: #162019; }
body.mobile-layout .review-promotion span, body.mobile-layout .review-promotion small, body.mobile-layout .review-quality span, body.mobile-layout .review-quality small { color: #89938b; }
body.mobile-layout .review-breadth-summary, body.mobile-layout .review-loss-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-right: 14px; padding-left: 14px; }
body.mobile-layout .review-breadth-summary > div, body.mobile-layout .review-loss-grid > div, body.mobile-layout .review-history-grid > div { background: #162019; }
body.mobile-layout .review-breadth-summary span, body.mobile-layout .review-loss-grid span, body.mobile-layout .review-loss-grid small, body.mobile-layout .review-history-grid span, body.mobile-layout .review-history-grid small { color: #89938b; }
body.mobile-layout .review-distribution { padding-right: 14px; padding-left: 14px; }
body.mobile-layout .review-distribution i { background: #1a241c; }
body.mobile-layout .review-sector-columns { display: block; padding-right: 14px; padding-left: 14px; }
body.mobile-layout .review-sector-columns > div + div { margin-top: 14px; }
body.mobile-layout .review-sector-list article, body.mobile-layout .review-core-list article { border-color: #29322b; }
body.mobile-layout .review-core-list { padding-right: 14px; padding-left: 14px; }
body.mobile-layout .review-core-list article { grid-template-columns: 20px minmax(100px, .8fr) minmax(120px, 1fr) 28px; }
body.mobile-layout .review-core-list button { min-height: 44px; color: #edf2ee; touch-action: manipulation; }
body.mobile-layout .review-events-section { margin-top: 8px; }
body.mobile-layout .review-event-list { grid-template-columns: 1fr; padding-right: 14px; padding-left: 14px; }
body.mobile-layout .review-event-list article { grid-template-columns: 52px 62px minmax(0, 1fr) 28px; border-color: #29322b; }
body.mobile-layout .review-event-list button { min-height: 44px; color: #edf2ee; touch-action: manipulation; }
body.mobile-layout .review-event-status { border-color: #354037; background: #162019; }
body.mobile-layout .review-event-status.sealed { border-color: #3a563d; background: #152018; color: #69d9a4; }
body.mobile-layout .review-event-status.broken { border-color: #733b42; background: #271719; color: #ff8791; }
body.mobile-layout .review-event-status.resealed { border-color: #7a6338; background: #2a2118; color: #f0c38e; }
body.mobile-layout .review-history-section { margin-top: 8px; }
body.mobile-layout .review-history-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-right: 14px; padding-left: 14px; }
body.mobile-layout .pulse-section { margin-top: 8px; }
body.mobile-layout .pulse-grid { grid-template-columns: repeat(2, 1fr); gap: 7px; padding: 10px 14px 14px; }
body.mobile-layout .pulse-item { min-height: 82px; padding: 11px; border-color: #303a32; background: #101611; }
body.mobile-layout .pulse-item strong { font-size: 15px; }
body.mobile-layout .research-grid { display: block; margin-top: 8px; }
body.mobile-layout .research-section { margin-top: 8px; border-color: #303a32; background: #0f150f; }
body.mobile-layout .section-heading { padding: 13px 14px 10px; border-color: #303a32; }
body.mobile-layout .section-heading h3 { font-size: 17px; }
body.mobile-layout .section-heading > span { color: #7e8980; font-size: 11px; }
body.mobile-layout .observation-list, body.mobile-layout .sector-list { padding: 4px 14px 9px; }
body.mobile-layout .observation-row { grid-template-columns: 58px minmax(0, 1fr) auto; border-color: #29322b; }
body.mobile-layout .observation-row:hover { background: transparent; }
body.mobile-layout .research-company-tools { display: block; padding: 10px 14px; border-color: #303a32; background: #101611; }
body.mobile-layout .research-company-tools .field { margin-bottom: 8px; }
body.mobile-layout .research-company-tools select { width: 100%; }
body.mobile-layout .company-card { padding: 16px 14px; }
body.mobile-layout .company-card h4 { font-size: 20px; }
body.mobile-layout .company-card-header { gap: 8px; }
body.mobile-layout .company-card-actions { align-items: flex-end; flex-direction: column; gap: 6px; }
body.mobile-layout .company-metrics { grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 15px; }
body.mobile-layout .company-metrics div { padding: 9px 8px; background: #162019; }
body.mobile-layout .company-metrics strong { font-size: 15px; }
body.mobile-layout .company-tags span { border-color: #3a563d; color: #b9d7bf; }
body.mobile-layout .company-note { color: #7e8980; }
body.mobile-layout .company-workspace-grid { display: block; margin-top: 8px; }
body.mobile-layout .company-research-main { display: block; }
body.mobile-layout .company-stock-jump, body.mobile-layout .company-analysis-form { border-color: #303a32; background: #101611; }
body.mobile-layout .company-stock-jump input, body.mobile-layout .company-analysis-form select, body.mobile-layout .company-analysis-form textarea { border-color: #354037; background: #080d09; color: #edf2ee; }
body.mobile-layout .watchlist-row, body.mobile-layout .research-candidate-row, body.mobile-layout .company-history-row { border-color: #29322b; }
body.mobile-layout .watchlist-stock, body.mobile-layout .candidate-stock, body.mobile-layout .company-history-row { color: #edf2ee; }
body.mobile-layout .watchlist-stock small, body.mobile-layout .candidate-stock small, body.mobile-layout .research-candidate-row > p, body.mobile-layout .company-history-row span, body.mobile-layout .company-history-row small { color: #89938b; }
body.mobile-layout .research-result-copy { border-color: var(--accent); background: var(--surface-soft); }
body.mobile-layout .research-result-copy p { color: #edf2ee; }
body.mobile-layout .research-result-copy p + p { color: #aebbb4; }
body.mobile-layout .company-analysis-actions { padding-left: 0; }
body.mobile-layout .watchlist-toolbar { display: block; padding: 10px 14px; border-color: #303a32; background: #101611; }
body.mobile-layout .watchlist-toolbar .field { display: grid; grid-template-columns: 42px minmax(0, 1fr); margin-bottom: 8px; }
body.mobile-layout .watchlist-toolbar .field:last-child { margin-bottom: 0; }
body.mobile-layout .watchlist-toolbar-actions { justify-content: stretch; margin-top: 8px; }
body.mobile-layout .watchlist-toolbar-actions .button { flex: 1; }
body.mobile-layout .watchlist-toolbar input, body.mobile-layout .watchlist-toolbar select { border-color: #354037; background: #080d09; color: #edf2ee; }
body.mobile-layout .watchlist-summary { padding: 13px 14px 7px; }
body.mobile-layout .watchlist-summary strong { color: #f8faf8; }
body.mobile-layout .watchlist-table { padding: 0 14px 12px; }
body.mobile-layout .watchlist-table-head { display: none; }
body.mobile-layout .watchlist-standalone-row { grid-template-columns: minmax(0, 1fr) auto 44px; gap: 8px; min-height: 78px; border-color: #29322b; }
body.mobile-layout .watchlist-standalone-row .watchlist-stock-cell { grid-column: 1; grid-row: 1 / span 2; }
body.mobile-layout .watchlist-standalone-row .watchlist-industry { grid-column: 2; grid-row: 1; max-width: 118px; text-align: right; }
body.mobile-layout .watchlist-standalone-row .watchlist-price { grid-column: 2; grid-row: 2; text-align: right; }
body.mobile-layout .watchlist-standalone-row .watchlist-change { grid-column: 1; grid-row: 2; align-self: end; margin-left: 0; font-size: 12px; }
body.mobile-layout .watchlist-standalone-row .watchlist-ratios { display: none; }
body.mobile-layout .watchlist-standalone-row .watchlist-remove { grid-column: 3; grid-row: 1 / span 2; }
body.mobile-layout .watchlist-empty { min-height: 180px; color: #89938b; }
body.mobile-layout .watchlist-empty strong { color: #edf2ee; }
body.mobile-layout .research-candidate-row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 13px 0; }
body.mobile-layout .candidate-actions { justify-content: stretch; }
body.mobile-layout .candidate-actions .button { flex: 1; min-height: 44px; }
body.mobile-layout .company-history-list { grid-template-columns: 1fr; padding: 3px 14px 10px; }
body.mobile-layout .company-history-row { grid-template-columns: 64px minmax(0, 1fr); }
body.mobile-layout .company-history-row small { grid-column: 2; }
body.mobile-layout .announcement-section { margin-top: 8px; }
body.mobile-layout .news-mode-tabs { margin: 8px 0; }
body.mobile-layout .market-research-header { display: grid; padding: 12px 14px; }
body.mobile-layout .market-research-browser { display: block; }
body.mobile-layout .market-research-browser .media-source-panel { padding: 0 14px; border-right: 0; border-bottom: 1px solid var(--line); }
body.mobile-layout .market-research-header .field { grid-template-columns: 42px minmax(0, 1fr); }
body.mobile-layout .market-research-row { display: grid; gap: 8px; padding: 13px 14px; }
body.mobile-layout .section-heading-actions { align-items: flex-end; flex-direction: column; gap: 6px; }
body.mobile-layout .announcement-tools { display: block; padding: 10px 14px; border-color: #303a32; background: #101611; }
body.mobile-layout .announcement-tools .field { display: grid; grid-template-columns: 42px minmax(0, 1fr); margin-bottom: 8px; }
body.mobile-layout .announcement-tools .field:last-child { margin-bottom: 0; }
body.mobile-layout .announcement-tools input, body.mobile-layout .announcement-tools select { border-color: #354037; background: #080d09; color: #edf2ee; }
body.mobile-layout .announcement-list { padding: 4px 14px 8px; }
body.mobile-layout .announcement-row { display: block; min-height: 0; padding: 12px 0; border-color: #29322b; }
body.mobile-layout .announcement-title { white-space: normal; }
body.mobile-layout .announcement-summary { white-space: normal; }
body.mobile-layout .announcement-analysis { margin: 0 14px 10px; padding: 12px; border-color: var(--accent); background: var(--surface-soft); }
body.mobile-layout .announcement-analysis-head > span { color: #7e8980; }
body.mobile-layout .announcement-analysis > p { color: #edf2ee; }
body.mobile-layout .announcement-stocks span { border-color: #3a563d; color: #b9d7bf; }
body.mobile-layout .announcement-note { padding: 11px 14px 14px; border-color: #303a32; color: #7e8980; }
body.mobile-layout .integration-grid { display: block; padding: 10px 14px 14px; }
body.mobile-layout .integration-grid article { min-height: auto; margin-top: 7px; padding: 12px; border-color: #303a32; background: #101611; }
body.mobile-layout .integration-grid p { min-height: 0; }
  body.mobile-layout .board-filters { padding: 10px 14px 0; }
  body.mobile-layout .board-review-layout { display: block; margin-top: 8px; }
  body.mobile-layout .board-taxonomy-section { position: static; margin-top: 0; }
  body.mobile-layout .board-alert-section { position: static; margin-top: 8px; }
  body.mobile-layout .board-taxonomy-tabs { padding: 10px 14px 0; }
  body.mobile-layout .board-taxonomy-note { margin: 8px 14px 0; color: #89938b; }
  body.mobile-layout .board-sort { grid-template-columns: auto minmax(0, 1fr); width: 100%; margin: 8px 0 0; }
  body.mobile-layout .board-date-filter { grid-template-columns: auto minmax(0, 1fr); width: 100%; margin: 8px 0 0; }
body.mobile-layout .board-filters { flex-wrap: wrap; }
body.mobile-layout .board-sort select { width: 100%; border-color: #354037; background: #101611; color: #edf2ee; }
body.mobile-layout .board-date-filter select { width: 100%; border-color: #354037; background: #101611; color: #edf2ee; }
body.mobile-layout .board-reason-note { margin: 10px 14px 0; border-color: #9e7b31; background: #211b0f; color: #d8bd7d; }
body.mobile-layout .board-filter, body.mobile-layout .kline-period { border-color: #354037; background: #101611; color: #89938b; }
body.mobile-layout .board-filter.active, body.mobile-layout .kline-period.active { border-color: var(--accent); background: var(--accent-soft, var(--surface-soft)); color: var(--accent); }
body.mobile-layout .board-alert-row { border-color: #29322b; color: #edf2ee; }
body.mobile-layout .board-alert-row:hover { background: #172218; }
body.mobile-layout .board-alert-row strong { color: var(--accent); }
body.mobile-layout .board-alert-row small { color: #aebbb4; }
body.mobile-layout .board-alert-clear { border-color: #354037; background: #101611; color: #aebbb4; }
body.mobile-layout .board-table-wrap { padding: 8px 14px 12px; }
  body.mobile-layout .board-table th, body.mobile-layout .board-table td { border-color: #29322b; }
  body.mobile-layout .board-table tbody tr:hover { background: #172218; color: #edf2ee; }
  body.mobile-layout .board-table tbody tr:hover td { color: #edf2ee; }
  body.mobile-layout .board-table .code, body.mobile-layout .board-table .muted { color: #aebbb4; }
  body.mobile-layout .board-table .positive { color: var(--positive); }
  body.mobile-layout .board-table .negative { color: var(--negative); }
  body.mobile-layout .board-reason { max-width: 210px; }
  body.mobile-layout .board-reason strong { max-width: 210px; }
body.mobile-layout .company-link { color: var(--accent); text-decoration-color: var(--accent-border, var(--line)); }
body.mobile-layout .board-status.sealed { background: #143022; color: #8bd6aa; }
body.mobile-layout .board-status.broken { background: #382718; color: #f1b36e; }
body.mobile-layout .board-heat-section { margin-top: 8px; }
body.mobile-layout .board-sector-list { display: block; padding: 5px 14px 12px; }
body.mobile-layout .board-sector-row { grid-template-columns: minmax(70px, 1fr) minmax(80px, 1.1fr) auto auto; border-color: #29322b; }
body.mobile-layout .board-sector-row > i { background: #1a241c; }
body.mobile-layout .board-sector-row small { color: #f1b36e; }
body.mobile-layout .kline-tools { display: block; padding: 10px 14px; border-color: #303a32; background: #101611; }
body.mobile-layout .kline-search { display: flex; gap: 6px; margin-bottom: 8px; }
body.mobile-layout .kline-search .field { display: grid; grid-template-columns: 42px minmax(0, 1fr); flex: 1; }
body.mobile-layout .kline-search input { border-color: #354037; background: #080d09; color: #edf2ee; }
body.mobile-layout .kline-tools .field { display: grid; grid-template-columns: 42px minmax(0, 1fr); margin-bottom: 8px; }
body.mobile-layout .kline-tools select { width: 100%; border-color: #354037; background: #080d09; color: #edf2ee; }
body.mobile-layout .kline-summary { gap: 8px 14px; padding: 10px 14px 0; color: #89938b; }
body.mobile-layout .kline-summary b { color: #edf2ee; }
body.mobile-layout .kline-legend { gap: 8px 12px; padding: 7px 14px 0; color: #89938b; }
body.mobile-layout .kline-hover { flex: 1 1 100%; }
body.mobile-layout .kline-chart-wrap { padding: 8px 10px 12px; }
body.mobile-layout .stock-kline-wrap { min-height: 392px; height: 392px; padding: 0 10px 12px; }
body.mobile-layout .stock-kline-toolbar { align-items: stretch; flex-direction: column; padding: 10px 14px 0; }
body.mobile-layout .stock-kline-periods, body.mobile-layout .stock-kline-indicators { margin-left: 0; }
body.mobile-layout .stock-kline-toolbar .kline-period, body.mobile-layout .kline-indicator { flex: 1 1 0; min-width: 0; padding: 0 7px; }
body.mobile-layout #stockKlineChart { min-height: 360px; }

body[data-view-mode="desktop"] { min-width: 1040px; }

@media (max-width: 760px) {
  .login-page { padding: 16px; }
  .login-panel { padding: 26px 22px; }
  .valuation-shell { width: min(100% - 20px, 2200px); padding-top: 16px; }
  .valuation-header, .control-bar { align-items: stretch; flex-direction: column; gap: 12px; }
  .workspace-nav { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin-top: 12px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
  .workspace-tab { min-height: 44px; border: 0; border-radius: 4px; padding: 0 6px; font-size: 13px; }
  .workspace-tab.active { border: 0; background: var(--surface-strong); color: #fff; }
  .workspace-tab .workspace-free { color: var(--accent); border-color: var(--accent-border, var(--line)); background: transparent; }
  .workspace-tab .workspace-lock { color: #89938b; border-color: #39443f; background: transparent; }
  .media-news-browser { display: block; }
  .media-source-panel { margin-bottom: 10px; padding: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .media-source-panel.collapsed { width: auto; }
  .media-source-list { display: flex; overflow-x: auto; padding: 7px 0; }
  .media-source-item { width: auto; min-width: max-content; }
  .announcement-match-panel { position: static; margin-top: 12px; border-top: 1px solid var(--line); border-left: 0; padding: 12px 0 0; }
  .screening-form { align-items: stretch; flex-direction: column; }
  .screening-actions { justify-content: space-between; }
  .screening-condition-bar { align-items: flex-start; flex-direction: column; }
  .collab-form { grid-template-columns: 1fr; }
  .collab-form .form-actions { grid-column: auto; }
  .administrator-page { width: min(100% - 20px, 680px); padding-top: 14px; }
  .research-view[hidden] { display: none !important; }
  .valuation-header h1 { font-size: 25px; }
  .section-heading > span { max-width: 42%; white-space: normal; text-align: right; }
  .account-actions { justify-content: space-between; flex-wrap: wrap; }
  .permission-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .permission-feature-row { gap: 10px; }
  .account-summary { align-items: flex-start; }
  .notification-panel { top: 126px; right: 0; }
  .research-hero { align-items: stretch; flex-direction: column; }
  .research-kpis { grid-template-columns: repeat(2, 1fr); }
  .review-primary-grid, .review-secondary-grid, .review-market-grid { grid-template-columns: 1fr; }
  .review-history-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.mobile-layout #bloggersView > .blogger-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-trend { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .research-grid { grid-template-columns: 1fr; }
  .stock-overview-grid { grid-template-columns: 1fr; }
  .stock-context-grid { grid-template-columns: 1fr; }
  .stock-overview-card { margin-top: 8px; }
  .stock-metrics { grid-template-columns: repeat(2, 1fr); }
  .stock-auction-metrics { grid-template-columns: repeat(2, 1fr); }
  .stock-kline-toolbar { align-items: stretch; flex-direction: column; }
  .stock-kline-indicators { margin-left: 0; }
  .research-company-tools { grid-template-columns: 1fr; }
  .company-workspace-grid { grid-template-columns: 1fr; }
  .company-analysis-form .field { grid-template-columns: 54px minmax(0, 1fr); }
  .company-analysis-actions { padding-left: 62px; }
  .research-candidate-row { grid-template-columns: minmax(120px, .45fr) minmax(180px, 1fr); }
  .candidate-actions { grid-column: 1 / -1; }
  .company-history-list { grid-template-columns: 1fr; }
  .company-metrics { grid-template-columns: repeat(3, 1fr); }
  .integration-grid { grid-template-columns: 1fr; }
  .kline-tools { align-items: stretch; flex-direction: column; }
  .kline-search { width: 100%; }
  .kline-search .field { grid-template-columns: 42px minmax(0, 1fr); flex: 1; }
  .kline-select-field { display: none; }
  .field { display: grid; grid-template-columns: 42px minmax(0, 1fr); }
  .classification-box select { width: 100%; min-width: 0; }
  .stat-strip { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; }
  .stat-strip p { grid-column: 1 / -1; }
  .table-footer { align-items: stretch; flex-direction: column; }
  .pagination { justify-content: space-between; }
  body:not(.mobile-layout) .valuation-shell { min-width: 1000px; }
  body:not(.mobile-layout) .stock-page { min-width: 0; }
  .admin-dialog { width: 100vw; max-height: 100vh; height: 100vh; border: 0; border-radius: 0; }
  .admin-shell { min-height: 100vh; padding: 14px; }
  .admin-header { top: -14px; margin: -14px -14px 14px; padding: 13px 14px; }
  .admin-stats { grid-template-columns: repeat(2, 1fr); }
  .collector-table-wrap { display: none; }
  .admin-collector-cards { display: grid; gap: 8px; padding: 10px; }
  .admin-collector-card .collector-run-button { min-height: 44px; }
  .kline-backfill-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member-form { grid-template-columns: 1fr; }
  .form-actions .button { flex: 1; }
  .members-table-wrap { display: none; }
  .admin-member-cards { display: grid; gap: 8px; padding: 10px; }
  .admin-member-card { padding: 13px; border: 1px solid var(--line); border-radius: 5px; }
  .admin-member-card header { display: flex; justify-content: space-between; gap: 12px; }
  .admin-member-card h4 { margin: 0; }
  .admin-member-card header p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
  .admin-member-card dl { display: grid; gap: 8px; margin: 12px 0; }
  .admin-member-card dl div { display: flex; justify-content: space-between; gap: 12px; }
  .admin-member-card dt { color: var(--muted); font-size: 12px; }
  .admin-member-card dd { margin: 0; font-size: 12px; text-align: right; }
  .member-card-actions .row-actions button { flex: 1; }
  .admin-unlock { margin: 36px auto; }
}

@media (max-width: 390px) {
  body.mobile-layout .valuation-shell { width: 100%; }
  body.mobile-layout .mobile-stock-row {
    grid-template-columns: 30px minmax(0, 1fr) minmax(108px, .8fr);
    gap: 6px;
    padding-right: 8px;
    padding-left: 8px;
  }
}

@media (max-width: 340px) {
  body.mobile-layout .mobile-stock-row { grid-template-columns: 26px minmax(0, 1fr) minmax(98px, .8fr); }
  body.mobile-layout .mobile-stock-main h3 { font-size: 16px; }
  body.mobile-layout .mobile-stock-value strong { font-size: 16px; }
  body.mobile-layout .mobile-stock-main p, body.mobile-layout .mobile-stock-value p { font-size: 10px; }
}

.content-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--line); background: #fbfcfb; }
.content-tools .field:first-child { flex: 1 1 280px; }
.content-tools .field input, .content-tools .field select { min-height: 40px; }
.content-list { padding: 4px 18px 10px; }
.content-post-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; min-height: 126px; padding: 17px 0; border-bottom: 1px solid #e7ece9; cursor: pointer; }
.content-post-row:last-child { border-bottom: 0; }
.content-post-row:hover { background: #f7faf8; }
.content-post-row:focus-visible { background: #f7faf8; outline: 3px solid var(--focus); outline-offset: -3px; }
.content-post-main { min-width: 0; }
.content-post-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
.content-post-main h4 { margin: 9px 0 6px; font-size: 17px; }
.content-post-main > p { display: -webkit-box; max-width: 860px; margin: 0; overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.content-post-tags, .content-detail-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.content-post-tags span, .content-detail-tags > span:not(.announcement-tag) { display: inline-flex; min-height: 24px; align-items: center; padding: 0 7px; border: 1px solid #d5e2da; border-radius: 3px; color: #39745b; font-size: 11px; }
.content-post-side { display: grid; gap: 8px; min-width: 74px; color: var(--accent); font-size: 12px; text-align: right; }
.content-post-side span:first-child { color: var(--muted); }
.content-pin { color: #a06a16; font-weight: 700; }
.content-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 18px 16px; }
.content-pagination span { min-width: 90px; color: var(--muted); font-size: 12px; text-align: center; }
.content-note { margin: 0; padding: 12px 18px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.6; }
.content-detail-dialog { width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--text); }
.content-detail-dialog::backdrop { background: rgba(8, 12, 10, .72); }
.content-detail-shell { max-height: calc(100vh - 32px); overflow: auto; }
.content-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 24px 16px; border-bottom: 1px solid var(--line); }
.content-detail-header h2 { margin: 0 0 7px; font-size: 22px; }
.content-detail-header p:last-child { margin: 0; color: var(--muted); font-size: 12px; }
.content-detail-tags { padding: 0 24px; }
.content-detail-body { padding: 18px 24px 10px; white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.85; }
.content-detail-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px 24px 24px; }
.content-detail-media:empty { display: none; }
.content-detail-media img { display: block; width: 100%; max-height: 520px; object-fit: contain; cursor: zoom-in; }
.admin-content-section small { color: var(--muted); font-weight: 400; }
.content-admin-form { display: grid; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); background: #fbfcfb; }
.content-admin-form > label, .content-form-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.content-admin-form input, .content-admin-form textarea, .content-admin-form select { min-width: 0; border: 1px solid var(--line); border-radius: 4px; padding: 10px 11px; background: #fff; color: var(--text); font: inherit; }
.content-admin-form textarea { resize: vertical; line-height: 1.6; }
.content-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.content-form-grid small { font-weight: 400; }
.content-checkbox { display: flex !important; grid-template-columns: none !important; align-items: center; gap: 8px !important; color: var(--text) !important; font-weight: 600 !important; }
.content-checkbox input { width: 16px; height: 16px; }
.content-form-message { min-height: 20px; margin: 0; color: var(--positive); font-size: 12px; }
.content-form-message.error { color: var(--negative); }
.content-admin-table-wrap .admin-table { min-width: 860px; }
.admin-content-cards { display: none; }
.content-status { font-size: 12px; }

.blogger-filter { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.blogger-filter select { min-height: 36px; border: 1px solid var(--line); border-radius: 4px; padding: 0 9px; background: var(--surface); color: var(--text); }
.blogger-browser { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 12px; margin-top: 12px; align-items: start; }
.blogger-sidebar, .blogger-section { min-width: 0; overflow: hidden; }
.blogger-source-list { padding: 4px 10px 12px; }
.blogger-platform-group + .blogger-platform-group { margin-top: 12px; }
.blogger-platform-group h4 { display: flex; justify-content: space-between; margin: 7px 7px 4px; color: var(--muted); font-size: 12px; }
.blogger-platform-group h4 span { font-variant-numeric: tabular-nums; }
.blogger-source-item { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; border: 1px solid transparent; border-radius: 4px; padding: 7px 9px; background: transparent; color: var(--text); text-align: left; }
.blogger-source-item:hover { background: var(--surface-soft); }
.blogger-source-item.active { border-color: #a8c9b8; background: #e9f6ef; color: var(--accent); }
.blogger-source-item span { min-width: 0; }
.blogger-source-item strong, .blogger-source-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blogger-source-item strong { font-size: 13px; }
.blogger-source-item small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.blogger-source-item b { color: var(--muted); font-size: 20px; font-weight: 400; }
.blogger-detail-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 100px; padding: 18px; border-bottom: 1px solid var(--line); background: #fbfcfb; }
.blogger-detail-header h3 { margin: 0 0 5px; font-size: 21px; }
.blogger-check-time { margin: 0; color: var(--muted); font-size: 12px; }
.blogger-fetch-status { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.blogger-fetch-status.error { color: var(--negative); }
.blogger-list { padding: 4px 18px 10px; }
.blogger-post-row { display: flex; align-items: center; min-height: 86px; padding: 14px 0; border-bottom: 1px solid #e7ece9; color: inherit; text-decoration: none; }
.blogger-post-row:last-child { border-bottom: 0; }
.blogger-post-row:hover { background: #f7faf8; }
.blogger-post-row:focus-visible { background: #f7faf8; outline: 3px solid var(--focus); outline-offset: -3px; }
.blogger-post-main { min-width: 0; }
.blogger-post-meta { display: flex; flex-wrap: wrap; gap: 9px; color: var(--muted); font-size: 12px; }
.blogger-post-main h4 { margin: 7px 0 0; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.blogger-empty-note { margin: 12px 0 0; color: var(--muted); font-size: 12px; }
.blogger-admin-form { display: grid; grid-template-columns: 140px 180px minmax(260px, 1fr) 180px auto; align-items: end; gap: 10px; padding: 16px; border-bottom: 1px solid var(--line); background: #fbfcfb; }
.blogger-admin-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.blogger-admin-form input, .blogger-admin-form select { min-width: 0; border: 1px solid var(--line); border-radius: 4px; padding: 0 10px; background: #fff; color: var(--text); }
.blogger-admin-form .content-checkbox { align-self: center; }
.blogger-admin-form .form-actions { grid-column: 1 / -1; }
.blogger-admin-table-wrap .admin-table { min-width: 980px; }
.blogger-admin-table-wrap td small { display: block; max-width: 300px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; }
.blogger-admin-cards { display: none; }
.blogger-admin-card { padding: 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
.blogger-admin-card header { display: flex; justify-content: space-between; gap: 10px; }
.blogger-admin-card h4 { margin: 0; }
.blogger-admin-card p { margin: 7px 0; color: var(--muted); font-size: 12px; word-break: break-word; }

.workspace-unread { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; margin-left: 4px; border-radius: 10px; padding: 0 5px; background: var(--negative); color: #fff; font-size: 10px; font-variant-numeric: tabular-nums; }
.question-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.question-compose { margin-top: 12px; padding: 16px; }
.question-compose label, .question-reply-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.question-compose input, .question-compose textarea, .question-reply-form textarea { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 4px; padding: 9px 10px; background: #fff; color: var(--text); font: inherit; }
.question-compose textarea, .question-reply-form textarea { resize: vertical; line-height: 1.6; }
.question-form-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(220px, .7fr); gap: 10px; margin-bottom: 10px; }
.question-compose .form-actions { margin-top: 10px; }
.question-browser { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 12px; }
.question-sidebar, .question-conversation { min-width: 0; overflow: hidden; }
.question-thread-list { max-height: 680px; overflow-y: auto; padding: 4px 10px 10px; }
.question-thread-row { display: block; width: 100%; min-height: 78px; border: 1px solid transparent; border-bottom-color: #e7ece9; padding: 11px 9px; background: transparent; color: var(--text); text-align: left; }
.question-thread-row:hover { background: var(--surface-soft); }
.question-thread-row.active { border-color: #a8c9b8; border-radius: 4px; background: #e9f6ef; }
.question-thread-row.unread strong::before { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--negative); content: ""; vertical-align: 1px; }
.question-thread-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.question-thread-head strong { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.question-thread-row > small, .question-thread-row > span:last-child { display: block; margin-top: 5px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.question-status { flex: 0 0 auto; border-radius: 9px; padding: 2px 7px; background: #edf1ef; color: var(--muted); font-size: 10px; font-weight: 700; white-space: nowrap; }
.question-status.pending { background: #fff0d7; color: #8b5b10; }
.question-status.replied { background: #e2f3e9; color: #17633d; }
.question-status.closed { background: #ecefed; color: #66716b; }
.question-conversation { min-height: 380px; }
.question-conversation-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 17px 18px; border-bottom: 1px solid var(--line); }
.question-conversation-header h3 { margin: 0; overflow-wrap: anywhere; font-size: 18px; }
.question-conversation-header p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.question-message-list { display: grid; gap: 10px; max-height: 520px; overflow-y: auto; padding: 16px 18px; }
.question-message { max-width: min(82%, 760px); border: 1px solid var(--line); border-radius: 6px; padding: 11px 13px; background: #f8faf9; }
.question-message.admin { justify-self: start; border-color: #b6d4c3; background: #edf7f1; }
.question-message.member { justify-self: end; }
.question-message header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.question-message header strong { font-size: 12px; }
.question-message time { color: var(--muted); font-size: 10px; white-space: nowrap; }
.question-message p { margin: 7px 0 0; overflow-wrap: anywhere; white-space: pre-wrap; line-height: 1.65; }
.question-message-img { display: block; max-width: 220px; max-height: 160px; margin-top: 8px; border: 1px solid var(--line); border-radius: 4px; object-fit: contain; background: #fff; }
.question-attach { display: inline-flex !important; grid-auto-flow: column; align-items: center; gap: 6px !important; margin-top: 8px; color: var(--muted); font-size: 11px !important; font-weight: 600 !important; }
.question-attach input { font-size: 11px; max-width: 260px; }
.question-reply-form { padding: 14px 18px 18px; border-top: 1px solid var(--line); }
.question-reply-form .form-actions { margin-top: 9px; }
.question-closed-actions { padding: 14px 18px; border-top: 1px solid var(--line); text-align: right; }
.admin-question-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.admin-question-summary > div { padding: 12px 15px; border-right: 1px solid var(--line); }
.admin-question-summary > div:last-child { border-right: 0; }
.admin-question-summary span, .admin-question-summary strong { display: block; }
.admin-question-summary span { color: var(--muted); font-size: 11px; }
.admin-question-summary strong { margin-top: 3px; font-size: 20px; }
.admin-question-browser { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); min-height: 480px; }
.admin-question-list { max-height: 720px; overflow-y: auto; border-right: 1px solid var(--line); padding: 7px; }
.admin-question-row { display: block; width: 100%; min-height: 88px; border: 1px solid transparent; border-bottom-color: var(--line); padding: 11px 10px; background: transparent; color: var(--text); text-align: left; }
.admin-question-row:hover { background: var(--surface-soft); }
.admin-question-row.active { border-color: #a8c9b8; border-radius: 4px; background: #e9f6ef; }
.admin-question-row.unread strong::before { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--negative); content: ""; vertical-align: 1px; }
.admin-question-row > span { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.admin-question-row strong { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.admin-question-row small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.admin-question-row p { margin: 6px 0 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.admin-question-detail { min-width: 0; }
.admin-question-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.admin-question-detail-head h4 { margin: 0; overflow-wrap: anywhere; font-size: 17px; }
.admin-question-detail-head p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }

@media (max-width: 760px) {
  .selection-header { display: block; padding-bottom: 8px; }
  .selection-header h2 { font-size: 21px; }
  .selection-subnav { margin-top: 10px; overflow-x: auto; }
  .selection-subtab { flex: 0 0 auto; }
  .content-tools { display: block; padding: 10px 14px; }
  .content-tools .field { display: grid; grid-template-columns: 42px minmax(0, 1fr); margin-bottom: 8px; }
  .content-tools .field input, .content-tools .field select { width: 100%; border-color: #354037; background: #080d09; color: #edf2ee; }
  .content-tools .button { width: 100%; }
  .content-list { padding: 4px 14px 8px; }
  .content-post-row { display: block; min-height: 0; padding: 14px 0; }
  .content-post-main h4 { font-size: 16px; }
  .content-post-main > p { -webkit-line-clamp: 3; }
  .content-post-side { display: flex; justify-content: space-between; margin-top: 11px; text-align: left; }
  .content-pagination { justify-content: space-between; padding: 10px 14px 14px; }
  .content-note { padding: 11px 14px 14px; }
  .content-detail-dialog { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border: 0; border-radius: 0; }
  .content-detail-shell { max-height: 100vh; }
  .content-detail-header { padding: 15px 14px 13px; }
  .content-detail-header h2 { font-size: 19px; }
  .content-detail-tags { padding: 0 14px; }
  .content-detail-body { padding: 15px 14px 8px; font-size: 14px; }
  .content-detail-media { grid-template-columns: 1fr; padding: 10px 14px 20px; }
  .content-admin-form { padding: 12px; }
  .content-form-grid { grid-template-columns: 1fr; }
  .content-admin-table-wrap { display: none; }
  .admin-content-cards { display: grid; gap: 8px; padding: 10px; }
  .content-admin-card { padding: 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
  .content-admin-card header { display: flex; justify-content: space-between; gap: 10px; }
  .content-admin-card h4 { margin: 0; font-size: 15px; }
  .content-admin-card p { margin: 7px 0; color: var(--muted); font-size: 12px; }
  .content-admin-card .row-actions { flex-wrap: wrap; }
  .blogger-browser { display: block; margin-top: 8px; }
  .blogger-sidebar { margin-bottom: 8px; }
  .blogger-source-list { display: flex; gap: 6px; overflow-x: auto; padding: 7px 10px 10px; }
  .blogger-platform-group { display: flex; gap: 5px; align-items: center; }
  .blogger-platform-group + .blogger-platform-group { margin-top: 0; }
  .blogger-platform-group h4 { display: none; }
  .blogger-source-item { width: auto; min-width: 120px; min-height: 48px; border-color: var(--line); background: var(--surface); }
  .blogger-detail-header { align-items: flex-start; padding: 14px; }
  .blogger-list { padding: 4px 14px 8px; }
  .blogger-post-row { display: block; min-height: 0; padding: 14px 0; }
  .blogger-post-main h4 { font-size: 15px; white-space: normal; }
  .blogger-admin-form { display: grid; grid-template-columns: 1fr; padding: 12px; }
  .blogger-admin-form .form-actions { grid-column: auto; }
  .blogger-admin-table-wrap { display: none; }
  .blogger-admin-cards { display: grid; gap: 8px; padding: 10px; }
  .question-form-grid, .question-browser { display: block; }
  .question-form-grid label + label { margin-top: 10px; }
  .question-sidebar { margin-bottom: 8px; }
  .question-thread-list { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 7px 10px 10px; }
  .question-thread-row { flex: 0 0 240px; border: 1px solid var(--line); border-radius: 4px; }
  .question-message { max-width: 92%; }
  .admin-question-browser { display: block; }
  .admin-question-list { display: flex; gap: 6px; max-height: none; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--line); }
  .admin-question-row { flex: 0 0 250px; border: 1px solid var(--line); border-radius: 4px; }
}

body.mobile-layout .content-tools { border-color: #303a32; background: #101611; }
body.mobile-layout .content-post-row { border-color: #29322b; }
body.mobile-layout .content-post-row:hover, body.mobile-layout .content-post-row:focus-visible { background: transparent; }
body.mobile-layout .content-post-main > p { color: #89938b; }
body.mobile-layout .content-post-tags span, body.mobile-layout .content-detail-tags > span:not(.announcement-tag) { border-color: #3a563d; color: #b9d7bf; }
body.mobile-layout .content-post-side { color: var(--accent); }
body.mobile-layout .content-note { border-color: #303a32; color: #7e8980; }
body.mobile-layout .content-detail-dialog { background: #0f150f; color: #edf2ee; }
body.mobile-layout .content-detail-header { border-color: #303a32; }
body.mobile-layout .content-detail-header p:last-child { color: #89938b; }
body.mobile-layout .content-detail-body { color: #edf2ee; }
body.mobile-layout .content-detail-media img { border: 1px solid #303a32; background: #101611; }
body.mobile-layout .content-admin-form { border-color: #303a32; background: #101611; }
body.mobile-layout .content-admin-form input, body.mobile-layout .content-admin-form textarea, body.mobile-layout .content-admin-form select { border-color: #354037; background: #080d09; color: #edf2ee; }
body.mobile-layout .content-admin-card { border-color: #303a32; background: #101611; }
body.mobile-layout .question-compose, body.mobile-layout .question-sidebar, body.mobile-layout .question-conversation { border-color: #303a32; background: #101611; }
body.mobile-layout .question-compose input, body.mobile-layout .question-compose textarea, body.mobile-layout .question-reply-form textarea { border-color: #354037; background: #080d09; color: #edf2ee; }
body.mobile-layout .question-thread-row { border-color: #303a32; color: #edf2ee; }
body.mobile-layout .question-thread-row.active { border-color: #c7ff38; background: #172218; }
body.mobile-layout .question-conversation-header, body.mobile-layout .question-reply-form, body.mobile-layout .question-closed-actions { border-color: #303a32; }
body.mobile-layout .question-message { border-color: #354037; background: #171d18; color: #edf2ee; }
body.mobile-layout .question-message.admin { border-color: #3a563d; background: #172218; }

/* Visual pass v1: quiet research workspace */
:root {
  --bg: #f4f6f3;
  --surface: #ffffff;
  --surface-strong: #1c2823;
  --surface-soft: #edf2ee;
  --line: #d9e1dc;
  --line-dark: #31413a;
  --text: #17201c;
  --muted: #6a7770;
  --muted-dark: #a9b7af;
  --accent: #176b51;
  --accent-hover: #0f5942;
  --positive: #b34a45;
  --negative: #28765b;
}

@media (min-width: 901px) {
  #bloggerPlatforms { white-space: nowrap; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "SF Pro Display", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  letter-spacing: .005em;
}

.valuation-shell { width: min(1440px, calc(100% - 56px)); padding: 32px 0 72px; }
.valuation-header { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.valuation-header h1 { font-size: 28px; font-weight: 720; letter-spacing: -.035em; }
.eyebrow { letter-spacing: .12em; font-size: 10px; }
.account-actions { gap: 12px; }
.account-summary { padding-right: 8px; }
.account-summary strong { font-size: 13px; font-weight: 700; }
.view-switch { border-color: var(--line); background: rgba(255,255,255,.7); }
.view-switch button.active { background: var(--surface-strong); }
.workspace-nav { gap: 0; margin-top: 22px; padding-top: 0; border-bottom-color: var(--line); }
.workspace-tab { min-height: 50px; padding: 0 17px; font-size: 13px; font-weight: 650; }
.workspace-tab.active { background: rgba(23,107,81,.07); color: var(--accent); }
.workspace-tab .workspace-free, .workspace-tab .workspace-lock { border-radius: 999px; font-size: 9px; letter-spacing: .04em; }
.workspace-free { border-color: #a9cbbb; background: #f0f8f3; }

.control-bar { margin-top: 22px; gap: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.82); box-shadow: 0 8px 24px rgba(34,55,45,.035); }
.tab { border-radius: 7px; padding: 0 15px; color: var(--muted); font-size: 13px; }
.tab.active { border-color: #b8d5c5; background: #edf7f1; color: var(--accent); }
.field input, .field select { background: #fbfcfb; border-color: var(--line); }
.stat-strip { margin-top: 14px; padding: 16px 18px; border-left-width: 2px; background: #eaf1ed; }
.stat-strip strong { font-size: 20px; font-weight: 700; }

.table-section { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); box-shadow: 0 10px 30px rgba(34,55,45,.045); }
.table-headline { padding: 17px 19px; border-bottom-color: var(--line); }
.table-headline h2 { font-size: 18px; font-weight: 720; letter-spacing: -.02em; }
.table-headline span { color: var(--muted); }
table { min-width: 1080px; font-size: 12px; }
th, td { padding: 13px 12px; border-bottom-color: #e8eeea; }
th { background: #f7f9f7; color: var(--muted); font-size: 11px; font-weight: 700; }
th button { min-height: 30px; }
th button:hover { color: var(--accent); }
tbody tr { background: var(--surface); }
tbody tr:hover { background: #f7fbf8; }
td { color: var(--text); }
td .stock-name, td strong { font-weight: 700; }
.table-footer { border-top-color: var(--line); }
.pagination .button { min-height: 34px; }

.research-hero { padding: 22px 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 8px 24px rgba(34,55,45,.035); }
.research-hero h2 { font-size: 25px; font-weight: 720; letter-spacing: -.035em; }
.research-kpis { gap: 8px; margin-top: 12px; }
.research-kpis > div { min-height: 104px; padding: 16px 17px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.research-kpis strong { font-size: 26px; font-weight: 700; }
.research-section, .company-card, .kline-section, .board-table-section, .board-taxonomy-section, .board-alert-section { border-radius: 10px; box-shadow: 0 8px 24px rgba(34,55,45,.035); }
.section-heading { padding: 16px 18px 13px; }
.section-heading h2, .section-heading h3 { font-weight: 720; letter-spacing: -.02em; }

.board-review-layout { gap: 14px; }
.board-table { min-width: 1040px; }
.board-table th, .board-table td { padding-top: 12px; padding-bottom: 12px; }
.board-table tbody tr:hover { background: #f7fbf8; }
.board-status.sealed { background: #fbeceb; color: #a4433e; }
.board-status.broken { background: #edf6f1; color: #28765b; }
.positive, .rise, .up { color: var(--positive) !important; }
.negative, .fall, .down { color: var(--negative) !important; }

.announcement-section, .blogger-section, .blogger-sidebar, .content-section { border-radius: 10px; }
.announcement-row, .content-post-row, .blogger-post-row { min-height: 74px; }
.announcement-title, .content-post-main h4, .blogger-post-main h4 { font-weight: 700; }

body.mobile-layout .valuation-shell { width: min(100% - 24px, 640px); padding-top: 18px; }
body.mobile-layout .valuation-header { padding-bottom: 16px; }
body.mobile-layout .valuation-header h1 { font-size: 25px; }
body.mobile-layout .workspace-nav { gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
body.mobile-layout .workspace-tab { min-height: 42px; border-radius: 6px; font-size: 12px; }
body.mobile-layout .workspace-tab.active { background: var(--surface-strong); color: #fff; }
body.mobile-layout .workspace-tab .workspace-free { color: #bfe4ce; border-color: #567a67; background: transparent; }
body.mobile-layout .control-bar { padding: 10px; border-radius: 9px; }
body.mobile-layout .stat-strip { border-radius: 8px; }
body.mobile-layout .table-section { border-radius: 9px; }
body.mobile-layout .table-headline { padding: 14px; }
body.mobile-layout .research-hero { padding: 18px 16px; border-radius: 9px; }
body.mobile-layout .research-kpis > div { min-height: 96px; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* UI prototype: three preview-only layouts, selected by ?variant=A|B|C. */
.preview-environment-badge[hidden], .prototype-switcher[hidden] { display: none !important; }
.preview-environment-badge {
  position: fixed;
  z-index: 70;
  top: 14px;
  right: 14px;
  display: grid;
  grid-template-columns: 8px auto;
  gap: 0 7px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 6px;
  background: #161b18;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.preview-environment-badge > span { grid-row: 1 / span 2; width: 8px; height: 8px; border-radius: 50%; background: #5fd69b; box-shadow: 0 0 0 4px rgba(95,214,155,.12); }
.preview-environment-badge strong { font-size: 10px; line-height: 1; letter-spacing: 0; }
.preview-environment-badge small { color: #aeb8b2; font-size: 9px; line-height: 1.2; }
.prototype-switcher {
  position: fixed;
  z-index: 80;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(18px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 40px minmax(126px, auto) 40px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 7px;
  background: #111512;
  color: #fff;
  box-shadow: 0 16px 40px rgba(0,0,0,.3);
}
.prototype-switcher button { width: 40px; min-height: 46px; border: 0; background: transparent; color: #fff; font-size: 19px; cursor: pointer; }
.prototype-switcher button:hover { background: #2a312d; }
.prototype-switcher div { display: grid; place-content: center; min-width: 146px; border-right: 1px solid #303630; border-left: 1px solid #303630; text-align: center; }
.prototype-switcher small { color: #8f9b94; font-size: 9px; }
.prototype-switcher strong { margin-top: 2px; font-size: 12px; letter-spacing: 0; }

body[data-variant] *, body[data-variant] *::before, body[data-variant] *::after { letter-spacing: 0 !important; }
body[data-variant] .valuation-shell { padding-bottom: 104px; }
body[data-variant] .valuation-side-rail { display: contents; }
body[data-variant] .research-view { margin-top: 20px; }
body[data-variant] .research-section,
body[data-variant] .research-hero,
body[data-variant] .research-kpis > div,
body[data-variant] .table-section,
body[data-variant] .control-bar { border-radius: 6px; }

/* A: bright institutional workspace with one strong dark masthead. */
body[data-variant="A"] {
  --bg: #e9eeeb;
  --surface: #ffffff;
  --surface-soft: #f2f5f3;
  --surface-strong: #12261f;
  --line: #d8dfdb;
  --text: #17201c;
  --muted: #68746d;
  --accent: #126347;
  --accent-hover: #0a4c35;
  --positive: #b53e3a;
  --negative: #177052;
  background: var(--bg);
  color: var(--text);
}
body[data-variant="A"] .valuation-shell { width: min(1500px, calc(100% - 48px)); padding-top: 24px; }
body[data-variant="A"] .valuation-header {
  min-height: 128px;
  align-items: flex-end;
  padding: 28px 30px;
  border: 0;
  border-radius: 6px 6px 0 0;
  background: #12261f;
  color: #f4f7f5;
}
body[data-variant="A"] .valuation-header .eyebrow { margin-bottom: 10px; color: #78c9a7; font-size: 10px; }
body[data-variant="A"] .valuation-header h1 { font-family: Georgia, "Songti SC", serif; font-size: 36px; font-weight: 500; }
body[data-variant="A"] .account-summary strong { color: #fff; }
body[data-variant="A"] .account-summary span { color: #a7b6ae; }
body[data-variant="A"] .valuation-header .button,
body[data-variant="A"] .valuation-header .view-switch { border-color: #3b5147; background: #1c342a; color: #edf5f1; }
body[data-variant="A"] .valuation-header .view-switch button { color: #a7b6ae; }
body[data-variant="A"] .valuation-header .view-switch button.active { background: #f4f7f5; color: #12261f; }
body[data-variant="A"] .workspace-nav {
  margin: 0;
  padding: 0 18px;
  border: 0;
  border-radius: 0 0 6px 6px;
  background: #193128;
}
body[data-variant="A"] .workspace-tab { min-height: 56px; color: #9fb2a8; }
body[data-variant="A"] .workspace-tab:hover { color: #fff; }
body[data-variant="A"] .workspace-tab.active { border-color: #62c89b; background: transparent; color: #fff; }
body[data-variant="A"] .workspace-free { border-color: #507c68; background: #244638; color: #bfe8d3; }
body[data-variant="A"] .control-bar { margin-top: 20px; padding: 12px; border: 1px solid var(--line); box-shadow: none; }
body[data-variant="A"] .stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); border: 0; border-radius: 6px; background: #dbe7e0; }
body[data-variant="A"] .stat-strip > div + div { border-left: 1px solid #c4d2ca; padding-left: 22px; }
body[data-variant="A"] .table-section { box-shadow: 0 14px 40px rgba(27,55,43,.08); }
body[data-variant="A"] .table-headline { min-height: 72px; }
body[data-variant="A"] .research-hero { padding: 26px 28px; border: 0; background: #dbe7e0; box-shadow: none; }
body[data-variant="A"] .research-hero h2 { font-family: Georgia, "Songti SC", serif; font-size: 31px; font-weight: 500; }
body[data-variant="A"] .research-kpis { grid-template-columns: repeat(6, minmax(0,1fr)); }
body[data-variant="A"] .research-kpis > div { border-top: 3px solid #1a7254; box-shadow: none; }

/* B: a compact dark navigation rail around a bright research canvas. */
body[data-variant="B"] {
  --bg: #f2f3f5;
  --surface: #ffffff;
  --surface-soft: #eef0f4;
  --surface-strong: #171b24;
  --line: #d9dde4;
  --line-dark: #343b49;
  --text: #191c22;
  --muted: #6f7681;
  --muted-dark: #aeb5c0;
  --accent: #3559a6;
  --accent-hover: #294785;
  --accent-soft: #edf1fb;
  --accent-border: #b8c5e5;
  --positive: #b5403f;
  --positive-soft: #f9ecec;
  --negative: #526983;
  --focus: #4169b8;
  background: #12151b;
  color: var(--text);
}
body[data-variant="B"] .valuation-shell {
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: var(--bg);
}
body[data-variant="B"] .valuation-header {
  position: sticky;
  z-index: 4;
  top: 0;
  grid-column: 1;
  grid-row: 1;
  display: block;
  min-height: 196px;
  padding: 28px 20px 18px;
  border: 0;
  background: #151923;
  color: #f3f6f4;
}
body[data-variant="B"] .valuation-header h1 { margin-top: 8px; font-family: Georgia, "Songti SC", serif; font-size: 25px; font-weight: 500; }
body[data-variant="B"] .valuation-header .eyebrow { color: #91aae5; }
body[data-variant="B"] .account-actions { display: grid; grid-template-columns: 1fr 1fr; margin-top: 26px; }
body[data-variant="B"] .account-summary { grid-column: 1 / -1; margin-bottom: 6px; }
body[data-variant="B"] .account-summary strong { color: #f3f6f4; }
body[data-variant="B"] .account-summary span { color: #929baa; }
body[data-variant="B"] .view-switch { display: none; }
body[data-variant="B"] .valuation-header .button { min-height: 34px; border-color: #394252; background: #202632; color: #e1e5ec; }
body[data-variant="B"] .workspace-nav {
  position: sticky;
  z-index: 3;
  top: 196px;
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-self: start;
  height: calc(100vh - 196px);
  margin: 0;
  padding: 12px;
  border: 0;
  background: #151923;
}
body[data-variant="B"] .workspace-tab {
  justify-content: flex-start;
  min-height: 48px;
  border: 0;
  border-radius: 5px;
  padding: 0 12px;
  color: #98a1b0;
  text-align: left;
}
body[data-variant="B"] .workspace-tab:hover { background: #202632; color: #f0f2f6; }
body[data-variant="B"] .workspace-tab.active { background: #e8eefb; color: #234382; }
body[data-variant="B"] .workspace-free { margin-left: auto; }
body[data-variant="B"] [data-workspace-panel] {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: min(1380px, calc(100% - 56px));
  margin: 32px auto 110px;
}
body[data-variant="B"] #valuationView:not([hidden]) { display: block; }
body[data-variant="B"] .research-view { margin-top: 32px; }
body[data-variant="B"] .research-hero { padding: 0 0 22px; border: 0; border-bottom: 1px solid #ccd2ce; border-radius: 0; background: transparent; box-shadow: none; }
body[data-variant="B"] .research-hero h2 { font-size: 30px; }
body[data-variant="B"] .control-bar { margin-top: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
body[data-variant="B"] .stat-strip { margin-top: 0; border: 0; border-bottom: 1px solid var(--line); background: #fff; }
body[data-variant="B"] .table-section { margin-top: 16px; border: 0; border-radius: 0; box-shadow: 0 8px 26px rgba(24,31,27,.06); }
body[data-variant="B"] .research-section { border-radius: 0; box-shadow: 0 8px 26px rgba(24,31,27,.05); }
body[data-variant="B"] .research-kpis > div { min-height: 92px; border-radius: 0; box-shadow: none; }

/* C: an editorial data brief with a strong reading hierarchy. */
body[data-variant="C"] {
  --bg: #f7f7f5;
  --surface: #ffffff;
  --surface-soft: #f1f1ee;
  --surface-strong: #171816;
  --line: #d8d8d3;
  --line-dark: #363733;
  --text: #171816;
  --muted: #6b6d68;
  --muted-dark: #a0a29c;
  --accent: #9d2d2d;
  --accent-hover: #7e2020;
  --accent-soft: #faf0f0;
  --accent-border: #d8b2b2;
  --positive: #b02f2f;
  --positive-soft: #faecec;
  --negative: #566477;
  --focus: #9d2d2d;
  background: var(--bg);
  color: var(--text);
}
body[data-variant="C"] .valuation-shell { width: min(1280px, calc(100% - 64px)); padding-top: 34px; }
body[data-variant="C"] .valuation-header { align-items: center; min-height: 92px; border-top: 5px solid #171816; border-bottom: 1px solid #171816; padding: 18px 0; }
body[data-variant="C"] .valuation-header h1 { font-family: Georgia, "Songti SC", serif; font-size: 38px; font-weight: 500; }
body[data-variant="C"] .valuation-header .eyebrow { color: var(--accent); }
body[data-variant="C"] .workspace-nav { justify-content: center; margin-top: 0; border-bottom: 3px double #292a28; }
body[data-variant="C"] .workspace-tab { min-height: 50px; padding: 0 15px; color: #5d5f5b; font-family: Georgia, "Songti SC", serif; }
body[data-variant="C"] .workspace-tab.active { border-color: var(--accent); background: transparent; color: #171816; }
body[data-variant="C"] #valuationView:not([hidden]) {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 18px 22px;
  margin-top: 26px;
  align-items: start;
}
body[data-variant="C"] #valuationView .valuation-side-rail {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
body[data-variant="C"] #valuationView .control-bar { grid-column: 1; grid-row: 1; display: block; margin: 0; padding: 18px; border: 1px solid #272825; border-radius: 0; background: #fff; box-shadow: none; }
body[data-variant="C"] #valuationView .tabs { display: grid; grid-template-columns: 1fr; }
body[data-variant="C"] #valuationView .tab { justify-content: flex-start; border-radius: 0; border-bottom: 1px solid var(--line); font-family: Georgia, "Songti SC", serif; }
body[data-variant="C"] #valuationView .tab.active { border-color: #171816; background: #171816; color: #fff; }
body[data-variant="C"] #valuationView .search-box,
body[data-variant="C"] #valuationView .classification-level-box,
body[data-variant="C"] #valuationView .classification-box { display: grid; grid-template-columns: 1fr; margin-top: 13px; }
body[data-variant="C"] #valuationView .control-bar > .button { width: 100%; margin-top: 13px; }
body[data-variant="C"] #valuationView .stat-strip { grid-column: 1; grid-row: 2; display: grid; gap: 14px; margin: 0; padding: 18px; border: 0; border-top: 4px solid var(--accent); border-radius: 0; background: #ecece8; }
body[data-variant="C"] #valuationView .stat-strip > div { display: flex; justify-content: space-between; align-items: baseline; }
body[data-variant="C"] #valuationView .table-section { grid-column: 2; grid-row: 1; margin: 0; border-radius: 0; box-shadow: none; }
body[data-variant="C"] .table-headline h2,
body[data-variant="C"] .research-hero h2,
body[data-variant="C"] .section-heading h3 { font-family: Georgia, "Songti SC", serif; font-weight: 500; }
body[data-variant="C"] .research-hero { padding: 32px 0 22px; border: 0; border-bottom: 1px solid #171816; border-radius: 0; background: transparent; box-shadow: none; }
body[data-variant="C"] .research-hero h2 { font-size: 38px; }
body[data-variant="C"] .research-kpis { gap: 0; border-bottom: 1px solid #171816; }
body[data-variant="C"] .research-kpis > div { min-height: 110px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
body[data-variant="C"] .research-kpis > div:last-child { border-right: 0; }
body[data-variant="C"] .research-section { border-radius: 0; box-shadow: none; }
body[data-variant="C"] .section-heading { border-bottom-color: #171816; }

@media (max-width: 900px) {
  body[data-variant="B"] .valuation-shell { display: block; }
  body[data-variant="B"] .valuation-header { position: static; min-height: 0; }
  body[data-variant="B"] .workspace-nav { position: static; flex-direction: row; height: auto; overflow-x: auto; }
  body[data-variant="B"] .workspace-tab { flex: 0 0 auto; }
  body[data-variant="B"] [data-workspace-panel] { width: calc(100% - 28px); margin: 18px auto 100px; }
  body[data-variant="C"] #valuationView:not([hidden]) { display: block; }
  body[data-variant="C"] #valuationView .control-bar,
  body[data-variant="C"] #valuationView .stat-strip,
  body[data-variant="C"] #valuationView .table-section { margin-top: 14px; }
}

@media (max-width: 760px) {
  .preview-environment-badge { top: 8px; right: 8px; }
  .preview-environment-badge small { display: none; }
  body[data-variant] .valuation-shell { width: 100%; padding-right: 12px; padding-left: 12px; }
  body[data-variant] .workspace-nav { display: flex; grid-template-columns: none; flex-wrap: nowrap; overflow-x: auto; }
  body[data-variant] .workspace-tab { flex: 0 0 auto; }
  body[data-variant="A"] .valuation-header { min-height: 112px; padding: 20px 16px; }
  body[data-variant="A"] .valuation-header h1,
  body[data-variant="C"] .valuation-header h1 { font-size: 28px; }
  body[data-variant="A"] .workspace-nav { overflow-x: auto; padding: 4px; }
  body[data-variant="A"] .research-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
  body[data-variant="B"] .valuation-shell { padding: 0; }
  body[data-variant="B"] .account-actions { margin-top: 16px; }
  body[data-variant="B"] .workspace-nav { padding: 7px; }
  body[data-variant="B"] [data-workspace-panel] { width: calc(100% - 24px); }
  body[data-variant="C"] .valuation-shell { padding-top: 20px; }
  body[data-variant="C"] .valuation-header { min-height: 0; align-items: flex-start; padding: 16px 0; color: var(--text); }
  body[data-variant="C"] .valuation-header .eyebrow { color: var(--accent); }
  body[data-variant="C"] .account-actions { gap: 7px; }
  body[data-variant="C"] .view-switch { width: auto; }
  body[data-variant="C"] .workspace-nav { justify-content: flex-start; overflow-x: auto; }
  body[data-variant="C"] .research-hero h2 { font-size: 29px; }
  body[data-variant="C"] .research-kpis { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  body[data-variant="C"] .research-kpis > div { border-bottom: 1px solid var(--line); }
}

/* Mobile prototype layouts. Each variant keeps its desktop hierarchy while
   using a purpose-built phone navigation and content rhythm. */
body.mobile-layout[data-variant] {
    color: var(--text);
    background: var(--bg);
  }
  body.mobile-layout[data-variant] .valuation-shell {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    padding-right: 12px;
    padding-bottom: 150px;
    padding-left: 12px;
  }
  body.mobile-layout[data-variant] .valuation-header h1,
  body.mobile-layout[data-variant] .mobile-stock-main h3,
  body.mobile-layout[data-variant] .mobile-stock-value strong,
  body.mobile-layout[data-variant] .watchlist-stock,
  body.mobile-layout[data-variant] .candidate-stock,
  body.mobile-layout[data-variant] .company-history-row,
  body.mobile-layout[data-variant] .announcement-title,
  body.mobile-layout[data-variant] .review-stock-links button,
  body.mobile-layout[data-variant] .review-ladder-stocks button {
    color: var(--text);
  }
  body.mobile-layout[data-variant] .subtitle,
  body.mobile-layout[data-variant] .mobile-list-head span,
  body.mobile-layout[data-variant] .mobile-stock-main p,
  body.mobile-layout[data-variant] .mobile-stock-value p,
  body.mobile-layout[data-variant] .mobile-pagination span,
  body.mobile-layout[data-variant] .research-hero p:not(.eyebrow),
  body.mobile-layout[data-variant] .section-heading > span,
  body.mobile-layout[data-variant] .watchlist-stock small,
  body.mobile-layout[data-variant] .candidate-stock small,
  body.mobile-layout[data-variant] .research-candidate-row > p,
  body.mobile-layout[data-variant] .company-history-row span,
  body.mobile-layout[data-variant] .company-history-row small {
    color: var(--muted);
  }
  body.mobile-layout[data-variant] .research-section,
  body.mobile-layout[data-variant] .mobile-ranking,
  body.mobile-layout[data-variant] .control-bar,
  body.mobile-layout[data-variant] .content-tools,
  body.mobile-layout[data-variant] .announcement-tools,
  body.mobile-layout[data-variant] .company-stock-jump,
  body.mobile-layout[data-variant] .company-analysis-form {
    border-color: var(--line);
    background: var(--surface);
  }
  body.mobile-layout[data-variant] .section-heading {
    min-height: 56px;
    align-items: center;
    padding: 15px 16px 13px;
    border-color: var(--line);
  }
  body.mobile-layout[data-variant] .section-heading h3 { font-size: 17px; line-height: 1.3; }
  body.mobile-layout[data-variant] .company-stock-jump,
  body.mobile-layout[data-variant] .company-analysis-form,
  body.mobile-layout[data-variant] .announcement-tools,
  body.mobile-layout[data-variant] .content-tools { padding: 13px 16px; }
  body.mobile-layout[data-variant] .company-watchlist,
  body.mobile-layout[data-variant] .company-history-list,
  body.mobile-layout[data-variant] .announcement-list,
  body.mobile-layout[data-variant] .content-list,
  body.mobile-layout[data-variant] .blogger-list { padding-right: 16px; padding-left: 16px; }
  body.mobile-layout[data-variant] .company-stock-jump input,
  body.mobile-layout[data-variant] .company-analysis-form select,
  body.mobile-layout[data-variant] .company-analysis-form textarea,
  body.mobile-layout[data-variant] .announcement-tools input,
  body.mobile-layout[data-variant] .announcement-tools select,
  body.mobile-layout[data-variant] .content-tools input,
  body.mobile-layout[data-variant] .content-tools select,
  body.mobile-layout[data-variant] .field input,
  body.mobile-layout[data-variant] .review-date-field select,
  body.mobile-layout[data-variant] .mobile-list-tools select {
    border-color: var(--line);
    background: var(--surface);
    color: var(--text);
  }
  body.mobile-layout[data-variant] .watchlist-row,
  body.mobile-layout[data-variant] .research-candidate-row,
  body.mobile-layout[data-variant] .company-history-row,
  body.mobile-layout[data-variant] .announcement-row,
  body.mobile-layout[data-variant] .content-post-row,
  body.mobile-layout[data-variant] .blogger-post-row,
  body.mobile-layout[data-variant] .review-theme-row,
  body.mobile-layout[data-variant] .review-ladder-tier { border-color: var(--line); }
  body.mobile-layout[data-variant] .research-kpis > div,
  body.mobile-layout[data-variant] .review-trend-day,
  body.mobile-layout[data-variant] .review-promotion > div,
  body.mobile-layout[data-variant] .review-quality > div {
    border-color: var(--line);
    background: var(--surface);
    color: var(--text);
  }
  body.mobile-layout[data-variant] .review-trend-value,
  body.mobile-layout[data-variant] .review-trend-day small,
  body.mobile-layout[data-variant] .review-promotion span,
  body.mobile-layout[data-variant] .review-promotion small,
  body.mobile-layout[data-variant] .review-quality span,
  body.mobile-layout[data-variant] .review-quality small { color: var(--muted); }
  body.mobile-layout[data-variant] .review-theme-bar,
  body.mobile-layout[data-variant] .review-timeline i,
  body.mobile-layout[data-variant] .score-track { background: var(--surface-soft); }
  body.mobile-layout[data-variant] .research-result-copy,
  body.mobile-layout[data-variant] .announcement-analysis {
    border-color: var(--accent);
    background: var(--surface-soft);
  }
  body.mobile-layout[data-variant] .research-result-copy p,
  body.mobile-layout[data-variant] .announcement-analysis > p { color: var(--text); }
  body.mobile-layout[data-variant] .cache-badge {
    border-color: var(--line);
    background: var(--surface);
    color: var(--accent);
  }
  body.mobile-layout[data-variant] .mobile-ranking { overflow: hidden; }
  body.mobile-layout[data-variant] .mobile-list-head { padding: 16px; border-color: var(--line); }
  body.mobile-layout[data-variant] .mobile-stock-row {
    min-height: 104px;
    padding: 14px 12px;
    border-color: var(--line);
  }
  body.mobile-layout[data-variant] .mobile-rank { color: var(--muted); }
  body.mobile-layout[data-variant] .mobile-stock-row:nth-child(-n+3) .mobile-rank { color: var(--accent); }
  body.mobile-layout[data-variant] .score-track span { background: var(--accent); }
  body.mobile-layout[data-variant] .research-hero { color: var(--text); }
  body.mobile-layout[data-variant] .company-workspace-grid,
  body.mobile-layout[data-variant] .company-research-main { display: block; }
body.mobile-layout[data-variant] .company-research-main > .research-section { margin-top: 10px; }

/* Keep the explicit mobile preview compact even when it is tested in a wide
   browser window. These controls still collapse naturally at phone widths. */
body.mobile-layout[data-variant] .media-news-browser {
  display: block;
  margin-top: 10px;
}
body.mobile-layout[data-variant] .media-source-panel {
  margin-bottom: 8px;
  padding-right: 0;
  border-right: 0;
  border-bottom: 1px solid var(--line);
}
body.mobile-layout[data-variant] .media-source-list {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 7px 0 9px;
  scrollbar-width: none;
}
body.mobile-layout[data-variant] .media-source-list::-webkit-scrollbar { display: none; }
body.mobile-layout[data-variant] .media-source-item {
  width: auto;
  min-width: max-content;
  min-height: 38px;
}
body.mobile-layout[data-variant] #bloggersView > .blogger-kpis {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.mobile-layout[data-variant] .announcement-tools,
body.mobile-layout[data-variant] .content-tools {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr);
  align-items: end;
  gap: 8px;
}
body.mobile-layout[data-variant] .announcement-tools .field,
body.mobile-layout[data-variant] .content-tools .field {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  min-width: 0;
  margin-bottom: 0;
}
body.mobile-layout[data-variant] .content-tools {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr) minmax(150px, .65fr) auto;
}
body.mobile-layout[data-variant] .content-tools .field:first-child { grid-column: auto; }
body.mobile-layout[data-variant] .content-tools .button {
  width: auto;
  min-height: 40px;
}
body.mobile-layout[data-variant] .board-filters {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  gap: 6px;
}
body.mobile-layout[data-variant] .board-filter { grid-column: span 2; }
body.mobile-layout[data-variant] .board-date-filter,
body.mobile-layout[data-variant] .board-sort {
  grid-column: span 3;
  width: auto;
  min-width: 0;
  margin: 0;
}
body.mobile-layout[data-variant] .board-date-filter select,
body.mobile-layout[data-variant] .board-sort select {
  min-width: 0;
  width: 100%;
}

@media (max-width: 600px) {
  body.mobile-layout[data-variant] .content-tools {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  body.mobile-layout[data-variant] .content-tools .field:first-child,
  body.mobile-layout[data-variant] .content-tools .button { grid-column: 1 / -1; }
}

/* Explicit mobile previews use a desktop browser viewport, so the content
   filter row also needs the phone-sized two-column layout outside the media
   query above. The search field and refresh action get their own rows; tag
   and signal remain side by side with enough width for their controls. */
body.mobile-layout[data-variant] .content-tools {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
body.mobile-layout[data-variant] .content-tools .field:first-child,
body.mobile-layout[data-variant] .content-tools .button {
  grid-column: 1 / -1;
}

/* Final spacing and interaction pass for the A/C/F systems. */
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .content-list {
  overflow: hidden;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .content-post-row {
  margin-right: -18px;
  margin-left: -18px;
  padding-right: 18px;
  padding-left: 18px;
}
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .content-post-row {
  margin-right: -16px;
  margin-left: -16px;
  padding-right: 16px;
  padding-left: 16px;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .content-post-row:hover,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .content-post-row:focus-visible {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .workspace-tab {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-bottom-width: 2px;
  white-space: nowrap;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .workspace-tab .workspace-free,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .workspace-tab .workspace-lock {
  flex: 0 0 auto;
  margin-left: 0;
  vertical-align: baseline;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .workspace-tab.active {
  border-color: var(--accent-border, var(--accent));
}
body.mobile-layout[data-variant] .workspace-tab {
  flex: 0 0 auto;
  min-width: 92px;
}

/* Signal labels keep the same meaning across light and dark themes. */
:is(body[data-variant="A"], body[data-variant="C"]) .announcement-tag.positive {
  border: 1px solid #e2aaa5 !important;
  background: #fff1f0 !important;
  color: #a93632 !important;
}
:is(body[data-variant="A"], body[data-variant="C"]) .announcement-tag.negative {
  border: 1px solid #e2aaa5 !important;
  background: #fff1f0 !important;
  color: #a93632 !important;
}
:is(body[data-variant="A"], body[data-variant="C"]) .announcement-tag.neutral {
  border: 1px solid #c6cdd0 !important;
  background: #f0f2f3 !important;
  color: #5d6870 !important;
}
body[data-variant="F"] .announcement-tag.positive,
body[data-variant="F"] .announcement-tag.negative {
  border: 1px solid #86535a !important;
  background: #332024 !important;
  color: #ef9a9a !important;
}
body[data-variant="F"] .announcement-tag.neutral {
  border: 1px solid #565d66 !important;
  background: #25292f !important;
  color: #b5bbc2 !important;
}

/* Review controls stay readable in the narrow mobile preview canvas. */
body.mobile-layout[data-variant] .research-hero-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  justify-content: initial;
  min-width: 0;
}
body.mobile-layout[data-variant] .research-hero-actions .review-date-field {
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
}
body.mobile-layout[data-variant] .research-hero-actions .cache-badge,
body.mobile-layout[data-variant] .research-hero-actions .button {
  min-width: max-content;
  white-space: nowrap;
}

/* KPI units belong beside their value instead of falling onto a second line. */
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .research-kpis > div > strong,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .research-kpis > div > small {
  display: inline-block;
  vertical-align: baseline;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .research-kpis > div > small {
  margin-left: 4px;
  font-size: 13px;
  font-weight: 700;
}

/* A stock page has business actions and a session action. Keep logout in its
   own visual group so it cannot be mistaken for a stock operation. */
.stock-header-actions { gap: 16px; }
.stock-primary-actions { display: flex; align-items: center; gap: 8px; }
.stock-session-action {
  margin-left: 2px;
  padding-left: 16px;
  border-left: 1px solid var(--line);
}
.stock-session-action .button {
  border-color: #d8aaa5;
  background: transparent;
  color: #99443f;
}
.stock-session-action .button:hover:not(:disabled) {
  border-color: #b9645d;
  background: #fff1ef;
  color: #8f3935;
}
@media (max-width: 760px) {
  body.mobile-layout .stock-header-actions {
    align-items: center;
    gap: 10px;
  }
  body.mobile-layout .stock-primary-actions {
    min-width: 0;
    flex: 1 1 auto;
  }
  body.mobile-layout .stock-primary-actions .button {
    min-width: 0;
    flex: 1 1 0;
    padding-right: 9px;
    padding-left: 9px;
  }
  body.mobile-layout .stock-session-action {
    flex: 0 0 auto;
    padding-left: 10px;
  }
}

/* Shared spacing and action geometry for all three preview systems. Keep
   sibling list components aligned so a source menu does not feel tighter
   than a blogger menu or a research history row. */
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .media-source-list {
  padding: 8px 10px 12px;
}
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .media-source-list {
  padding: 7px 10px 9px;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .media-source-toggle {
  padding-right: 12px;
  padding-left: 12px;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .media-source-item {
  padding: 7px 9px;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .company-history-row {
  min-height: 58px;
  padding: 9px 10px;
  border-radius: 2px;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .blogger-open,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) a.button {
  min-height: 40px;
  padding-right: 13px;
  padding-left: 13px;
  text-decoration: none !important;
  white-space: nowrap;
}
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .blogger-open,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) a.button {
  min-height: 42px;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .announcement-pagination .button,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .content-pagination .button,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .pagination .button {
  flex: 0 0 auto;
  min-width: 68px;
  padding-right: 14px;
  padding-left: 14px;
  white-space: nowrap;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .workspace-nav {
  overflow-x: auto;
  overflow-y: hidden !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .workspace-nav::-webkit-scrollbar:vertical {
  display: none;
}

  /* A mobile: compact institutional dashboard, dark masthead and light cards. */
  body.mobile-layout[data-variant="A"] .valuation-shell { padding-top: 10px; background: #e9eeeb; }
  body.mobile-layout[data-variant="A"] .valuation-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 92px;
    padding: 18px 16px;
    border: 0;
    border-radius: 6px 6px 0 0;
    background: #12261f;
  }
  body.mobile-layout[data-variant="A"] .valuation-header h1 { color: #fff; font-size: 25px; }
  body.mobile-layout[data-variant="A"] .valuation-header .eyebrow { color: #78c9a7; }
  body.mobile-layout[data-variant="A"] .account-actions { align-items: flex-start; gap: 6px; }
  body.mobile-layout[data-variant="A"] .view-switch { display: none; }
  body.mobile-layout[data-variant="A"] .valuation-header .button { min-height: 36px; padding: 0 10px; }
  body.mobile-layout[data-variant="A"] .workspace-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    gap: 0;
    margin: 0;
    padding: 3px 8px;
    border: 0;
    border-radius: 0 0 6px 6px;
    background: #193128;
    box-shadow: 0 8px 18px rgba(18,38,31,.14);
  }
  body.mobile-layout[data-variant="A"] .workspace-tab { min-height: 48px; padding: 0 13px; color: #9fb2a8; font-size: 12px; }
  body.mobile-layout[data-variant="A"] .workspace-tab.active { border-color: #62c89b; background: #244638; color: #fff; }
  body.mobile-layout[data-variant="A"] .control-bar { margin-top: 12px; padding: 10px; box-shadow: 0 6px 20px rgba(27,55,43,.06); }
  body.mobile-layout[data-variant="A"] .tab { min-height: 46px; color: var(--muted); font-size: 14px; }
  body.mobile-layout[data-variant="A"] .tab.active { border-color: #b7d4c5; background: #e6f2eb; color: var(--accent); }
  body.mobile-layout[data-variant="A"] .industry-chip { border-color: #c8d6ce; background: #f8faf8; color: #52635a; }
  body.mobile-layout[data-variant="A"] .industry-chip.active { border-color: var(--accent); background: #dcece3; color: var(--accent); }
  body.mobile-layout[data-variant="A"] .mobile-ranking,
  body.mobile-layout[data-variant="A"] .research-section { border-radius: 6px; box-shadow: 0 8px 24px rgba(27,55,43,.06); }
  body.mobile-layout[data-variant="A"] .research-hero { padding: 20px 18px; border: 0; background: #dbe7e0; }
  body.mobile-layout[data-variant="A"] .research-hero h2 { font-family: Georgia, "Songti SC", serif; font-size: 26px; font-weight: 500; }
  body.mobile-layout[data-variant="A"] .research-kpis { gap: 7px; }
  body.mobile-layout[data-variant="A"] .research-kpis > div { min-height: 88px; border-top: 3px solid var(--accent); }
  body.mobile-layout[data-variant="A"] .button-primary { border-color: var(--accent); background: var(--accent); color: #fff; }

  /* B mobile: the desktop rail becomes a persistent horizontal dock. */
  body.mobile-layout[data-variant="B"] { background: #12151b; }
  body.mobile-layout[data-variant="B"] .valuation-shell {
    display: block;
    padding: 0 0 188px;
    background: #f2f3f5;
  }
  body.mobile-layout[data-variant="B"] .valuation-header {
    position: static;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    min-height: 78px;
    align-items: center;
    padding: 16px 14px;
    background: #151923;
    color: #fff;
  }
  body.mobile-layout[data-variant="B"] .valuation-header h1 { color: #fff; font-size: 23px; }
  body.mobile-layout[data-variant="B"] .valuation-header .eyebrow { color: #91aae5; }
  body.mobile-layout[data-variant="B"] .account-actions { display: flex; margin: 0; }
  body.mobile-layout[data-variant="B"] .account-summary,
  body.mobile-layout[data-variant="B"] .view-switch { display: none; }
  body.mobile-layout[data-variant="B"] .valuation-header .button { min-height: 36px; }
  body.mobile-layout[data-variant="B"] .workspace-nav {
    position: fixed;
    z-index: 65;
    top: auto;
    right: 8px;
    bottom: 78px;
    left: 8px;
    flex-direction: row;
    height: 58px;
    margin: 0;
    padding: 6px;
    border: 1px solid #394252;
    border-radius: 6px;
    background: #151923;
    box-shadow: 0 10px 30px rgba(0,0,0,.28);
    overflow-y: hidden;
    scrollbar-width: none;
  }
  body.mobile-layout[data-variant="B"] .workspace-nav::-webkit-scrollbar { display: none; }
  body.mobile-layout[data-variant="B"] .workspace-tab {
    min-height: 44px;
    padding: 0 13px;
    color: #98a1b0;
    font-size: 11px;
  }
  body.mobile-layout[data-variant="B"] .workspace-tab.active { background: #e8eefb; color: #234382; }
  body.mobile-layout[data-variant="B"] [data-workspace-panel] {
    width: auto;
    margin: 16px 12px 0;
  }
  body.mobile-layout[data-variant="B"] .research-view { margin-top: 16px; }
  body.mobile-layout[data-variant="B"] .research-hero {
    padding: 4px 2px 18px;
    border: 0;
    border-bottom: 1px solid #bfc7c2;
    border-radius: 0;
    background: transparent;
  }
  body.mobile-layout[data-variant="B"] .research-hero h2 { font-size: 28px; }
  body.mobile-layout[data-variant="B"] .control-bar,
  body.mobile-layout[data-variant="B"] .research-section,
  body.mobile-layout[data-variant="B"] .mobile-ranking { border-radius: 0; box-shadow: 0 6px 20px rgba(24,31,27,.06); }
  body.mobile-layout[data-variant="B"] .research-kpis { gap: 1px; background: #d9dde4; }
  body.mobile-layout[data-variant="B"] .research-kpis > div { min-height: 84px; border: 0; border-radius: 0; }
  body.mobile-layout[data-variant="B"] .section-heading { border-bottom-color: #cdd3cf; }
  body.mobile-layout[data-variant="B"] .prototype-switcher { bottom: 16px; }

  /* C mobile: editorial reading surface with typographic rules and no cards. */
  body.mobile-layout[data-variant="C"] .valuation-shell { padding-top: 14px; background: #f7f7f5; }
  body.mobile-layout[data-variant="C"] .valuation-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 92px;
    padding: 17px 0;
    border-top: 4px solid #171816;
    border-bottom: 1px solid #171816;
  }
  body.mobile-layout[data-variant="C"] .valuation-header h1 { font-family: Georgia, "Songti SC", serif; font-size: 29px; font-weight: 500; }
  body.mobile-layout[data-variant="C"] .account-actions { display: flex; align-items: flex-start; }
  body.mobile-layout[data-variant="C"] .view-switch,
  body.mobile-layout[data-variant="C"] .account-summary { display: none; }
  body.mobile-layout[data-variant="C"] .valuation-header .button { border-color: #171816; background: transparent; color: #171816; }
  body.mobile-layout[data-variant="C"] .workspace-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 3px double #292a28;
    border-radius: 0;
    background: #f7f7f5;
  }
  body.mobile-layout[data-variant="C"] .workspace-tab { min-height: 48px; padding: 0 14px; color: #5d5f5b; font-family: Georgia, "Songti SC", serif; font-size: 12px; }
  body.mobile-layout[data-variant="C"] .workspace-tab.active { border-color: var(--accent); background: transparent; color: #171816; }
  body.mobile-layout[data-variant="C"] #valuationView:not([hidden]) { display: block; margin-top: 18px; }
  body.mobile-layout[data-variant="C"] #valuationView .control-bar { margin-top: 0; padding: 16px; border: 1px solid #272825; }
  body.mobile-layout[data-variant="C"] #valuationView .tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  body.mobile-layout[data-variant="C"] #valuationView .tabs::-webkit-scrollbar { display: none; }
  body.mobile-layout[data-variant="C"] #valuationView .tab {
    flex: 1 0 0;
    min-width: 0;
    min-height: 44px;
    font-size: 15px;
  }
  body.mobile-layout[data-variant="C"] #valuationView .search-box,
  body.mobile-layout[data-variant="C"] #valuationView .classification-level-box,
  body.mobile-layout[data-variant="C"] #valuationView .classification-box {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin-top: 9px;
  }
  body.mobile-layout[data-variant="C"] #valuationView .search-box span,
  body.mobile-layout[data-variant="C"] #valuationView .classification-level-box span,
  body.mobile-layout[data-variant="C"] #valuationView .classification-box span {
    white-space: nowrap;
  }
  body.mobile-layout[data-variant="C"] .industry-chip { border-color: #bfc0bb; border-radius: 2px; background: transparent; color: #51534e; }
  body.mobile-layout[data-variant="C"] .industry-chip.active { border-color: #171816; background: #171816; color: #fff; }
  body.mobile-layout[data-variant="C"] .mobile-ranking,
  body.mobile-layout[data-variant="C"] .research-section { border-radius: 0; box-shadow: none; }
  body.mobile-layout[data-variant="C"] .mobile-ranking { border-color: #171816; }
  body.mobile-layout[data-variant="C"] .mobile-list-head { border-bottom-color: #171816; }
  body.mobile-layout[data-variant="C"] .mobile-list-head h2,
  body.mobile-layout[data-variant="C"] .research-hero h2,
  body.mobile-layout[data-variant="C"] .section-heading h3 { font-family: Georgia, "Songti SC", serif; font-weight: 500; }
  body.mobile-layout[data-variant="C"] .mobile-stock-row { grid-template-columns: 28px minmax(0, 1fr) minmax(108px, .75fr); }
  body.mobile-layout[data-variant="C"] .research-hero {
    padding: 25px 0 18px;
    border: 0;
    border-bottom: 1px solid #171816;
    border-radius: 0;
    background: transparent;
  }
  body.mobile-layout[data-variant="C"] .research-hero h2 { font-size: 31px; }
  body.mobile-layout[data-variant="C"] .research-kpis { gap: 0; border-bottom: 1px solid #171816; }
  body.mobile-layout[data-variant="C"] .research-kpis > div { min-height: 86px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
  body.mobile-layout[data-variant="C"] .section-heading { border-bottom-color: #171816; }
  body.mobile-layout[data-variant="C"] .button-primary { border-color: var(--accent); background: var(--accent); color: #fff; }

/* B and C keep component states inside their own desktop and mobile palettes. */
:is(body[data-variant="B"], body[data-variant="C"]) .workspace-free,
:is(body[data-variant="B"], body[data-variant="C"]) .workspace-badge,
:is(body[data-variant="B"], body[data-variant="C"]) .cache-badge,
:is(body[data-variant="B"], body[data-variant="C"]) .company-tags span,
:is(body[data-variant="B"], body[data-variant="C"]) .announcement-stocks span,
:is(body[data-variant="B"], body[data-variant="C"]) .stock-tag-list span {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent);
}
:is(body[data-variant="B"], body[data-variant="C"]) .media-source-item.active,
:is(body[data-variant="B"], body[data-variant="C"]) .blogger-source-item.active,
:is(body[data-variant="B"], body[data-variant="C"]) .stock-kline-toolbar .kline-period.active,
:is(body[data-variant="B"], body[data-variant="C"]) .kline-indicator.active,
:is(body[data-variant="B"], body[data-variant="C"]) .board-taxonomy-tab.active,
:is(body[data-variant="B"], body[data-variant="C"]) .board-filter.active,
:is(body[data-variant="B"], body[data-variant="C"]) .kline-period.active,
:is(body[data-variant="B"], body[data-variant="C"]) .review-trend-day:hover,
:is(body[data-variant="B"], body[data-variant="C"]) .review-trend-day.active {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent);
}
:is(body[data-variant="B"], body[data-variant="C"]) .research-result-copy,
:is(body[data-variant="B"], body[data-variant="C"]) .announcement-analysis {
  border-color: var(--accent);
  background: var(--accent-soft);
}
:is(body[data-variant="B"], body[data-variant="C"]) .announcement-tag.positive {
  background: var(--positive-soft);
  color: var(--positive);
}
:is(body[data-variant="B"], body[data-variant="C"]) .board-alert-row:hover,
:is(body[data-variant="B"], body[data-variant="C"]) .board-table tbody tr:hover { background: var(--surface-soft); }
:is(body[data-variant="B"], body[data-variant="C"]) th button:hover { color: var(--accent); }
:is(body[data-variant="B"], body[data-variant="C"]) .preview-environment-badge > span { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }

body.mobile-layout[data-variant="B"] .button-primary { border-color: var(--accent); background: var(--accent); color: #fff; }
body.mobile-layout[data-variant="B"] .workspace-tab.active { border-color: var(--accent) !important; background: var(--accent-soft) !important; color: var(--accent) !important; }
body.mobile-layout[data-variant="B"] .industry-chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
body.mobile-layout[data-variant="B"] .review-trend-day:hover,
body.mobile-layout[data-variant="B"] .review-trend-day.active,
body.mobile-layout[data-variant="B"] .board-filter.active,
body.mobile-layout[data-variant="B"] .kline-period.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
body.mobile-layout[data-variant="B"] .workspace-tab .workspace-free,
body.mobile-layout[data-variant="C"] .workspace-tab .workspace-free { border-color: var(--accent-border); background: transparent; color: var(--accent); }
body.mobile-layout[data-variant="C"] .workspace-tab.active { border-color: var(--accent) !important; background: transparent !important; color: var(--accent) !important; }

/* An explicit mobile mode must remain mobile even when the browser viewport is wide. */
body.mobile-layout[data-variant] .blogger-browser { display: block; margin-top: 8px; }
body.mobile-layout[data-variant] .blogger-sidebar { margin-bottom: 8px; }
body.mobile-layout[data-variant] .blogger-source-list { display: flex; gap: 6px; overflow-x: auto; padding: 7px 10px 10px; }
body.mobile-layout[data-variant] .blogger-platform-group { display: flex; gap: 5px; align-items: center; }
body.mobile-layout[data-variant] .blogger-platform-group + .blogger-platform-group { margin-top: 0; }
body.mobile-layout[data-variant] .blogger-platform-group h4 { display: none; }
body.mobile-layout[data-variant] .blogger-source-item { width: auto; min-width: 120px; min-height: 48px; border-color: var(--line); background: var(--surface); }
body.mobile-layout[data-variant] .blogger-detail-header { align-items: flex-start; padding: 14px; }
body.mobile-layout[data-variant] .blogger-list { padding: 4px 14px 8px; }
body.mobile-layout[data-variant] .blogger-post-row { display: block; min-height: 0; padding: 14px 0; }
body.mobile-layout[data-variant] .blogger-post-main h4 { font-size: 15px; white-space: normal; }
body.mobile-layout[data-variant] .blogger-open { display: inline-flex; margin-top: 10px; }

body.mobile-layout[data-variant="A"] .view-switch button.active { background: #f4f7f5 !important; color: #12261f !important; }
body.mobile-layout[data-variant="A"] .workspace-tab.active { border-color: #62c89b !important; background: #244638 !important; color: #fff !important; }
body.mobile-layout[data-variant="A"] .button-primary { border-color: #126347 !important; background: #126347 !important; color: #fff !important; }
body.mobile-layout[data-variant="A"] .industry-chip.active { border-color: #126347 !important; background: #dcece3 !important; color: #126347 !important; }
body.mobile-layout[data-variant="A"] .workspace-tab .workspace-free { border-color: #507c68; color: #bfe8d3; }

body.mobile-layout[data-variant="B"] .view-switch button.active { background: #e8eefb !important; color: #234382 !important; }
body.mobile-layout[data-variant="C"] .view-switch button.active { background: #171816 !important; color: #fff !important; }

/* Prototype v2: the three references are expressed as different information
   architectures, not just different accent colors. */
body[data-variant="A"] {
  --bg: #f4f7f5;
  --surface: #ffffff;
  --surface-soft: #eef3f0;
  --surface-strong: #17372c;
  --line: #d5e0da;
  --text: #17211c;
  --muted: #68766f;
  --accent: #17694f;
  --accent-hover: #0f533e;
  --accent-soft: #e5f0eb;
  --accent-border: #8fbbaa;
}
body[data-variant="A"] .valuation-shell {
  width: min(1500px, calc(100% - 56px));
  padding-top: 22px;
}
body[data-variant="A"] .valuation-header {
  min-height: 90px;
  align-items: center;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  background: var(--surface);
  color: var(--text);
}
body[data-variant="A"] .valuation-header h1 { font-family: Georgia, "Songti SC", serif; font-size: 32px; font-weight: 500; }
body[data-variant="A"] .valuation-header .eyebrow { color: var(--accent); }
body[data-variant="A"] .account-summary strong { color: var(--text); }
body[data-variant="A"] .account-summary span { color: var(--muted); }
body[data-variant="A"] .valuation-header .button,
body[data-variant="A"] .valuation-header .view-switch { border-color: var(--line); background: var(--surface); color: var(--text); }
body[data-variant="A"] .valuation-header .view-switch button { color: var(--muted); }
body[data-variant="A"] .valuation-header .view-switch button.active { background: var(--accent-soft); color: var(--accent); }
body[data-variant="A"] .workspace-nav {
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 0 0 5px 5px;
  background: var(--surface);
}
body[data-variant="A"] .workspace-tab { min-height: 48px; color: var(--muted); }
body[data-variant="A"] .workspace-tab:hover { color: var(--text); background: var(--surface-soft); }
body[data-variant="A"] .workspace-tab.active { border-color: var(--accent); background: transparent; color: var(--accent); }
body[data-variant="A"] .workspace-free { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent); }
body[data-variant="A"] .control-bar { margin-top: 18px; padding: 14px 16px; border-color: var(--line); background: var(--surface); box-shadow: none; }
body[data-variant="A"] .stat-strip { border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
body[data-variant="A"] .stat-strip > div + div { border-left-color: var(--line); }
body[data-variant="A"] .table-section { border-color: var(--line); border-radius: 5px; box-shadow: 0 8px 24px rgba(25, 52, 40, .06); }
body[data-variant="A"] .research-hero { padding: 24px 26px; border: 1px solid var(--line); background: var(--surface); box-shadow: none; }
body[data-variant="A"] .research-hero h2,
body[data-variant="A"] .section-heading h3 { font-family: Georgia, "Songti SC", serif; font-weight: 500; }
body[data-variant="A"] .research-kpis > div { border-top: 2px solid var(--accent); border-radius: 4px; box-shadow: none; }

/* B follows the data-console references: the chrome is dark, while blue is
   reserved for active controls, links and focus states. */
body[data-variant="B"] {
  --bg: #111720;
  --surface: #18212c;
  --surface-soft: #202b38;
  --surface-strong: #0d131b;
  --line: #304052;
  --line-dark: #425367;
  --text: #eef3f8;
  --muted: #9eacbb;
  --muted-dark: #8393a3;
  --accent: #6c91d8;
  --accent-hover: #86a7e6;
  --accent-soft: #243653;
  --accent-border: #5878ad;
  background: var(--bg);
  color: var(--text);
}
body[data-variant="B"] .valuation-shell { background: var(--bg); }
body[data-variant="B"] .valuation-header {
  min-height: 180px;
  padding: 24px 20px 16px;
  border: 0;
  background: #0d131b;
  color: var(--text);
}
body[data-variant="B"] .valuation-header h1 { font-family: "IBM Plex Sans", Inter, system-ui, sans-serif; font-size: 24px; font-weight: 600; }
body[data-variant="B"] .valuation-header .eyebrow { color: var(--accent); }
body[data-variant="B"] .account-summary strong { color: var(--text); }
body[data-variant="B"] .account-summary span { color: var(--muted); }
body[data-variant="B"] .valuation-header .button { border-color: var(--line); background: var(--surface); color: var(--text); }
body[data-variant="B"] .workspace-nav { padding: 10px; border: 0; background: #0d131b; }
body[data-variant="B"] .workspace-tab { min-height: 44px; border-radius: 4px; color: var(--muted); }
body[data-variant="B"] .workspace-tab:hover { background: var(--surface-soft); color: var(--text); }
body[data-variant="B"] .workspace-tab.active { background: var(--accent-soft); color: #dce8ff; box-shadow: inset 3px 0 var(--accent); }
body[data-variant="B"] .workspace-free { border-color: var(--accent-border); background: transparent; color: var(--accent); }
body[data-variant="B"] .control-bar,
body[data-variant="B"] .stat-strip,
body[data-variant="B"] .table-section,
body[data-variant="B"] .research-section,
body[data-variant="B"] .research-hero,
body[data-variant="B"] .research-kpis > div { border-color: var(--line); background: var(--surface); color: var(--text); box-shadow: none; }
body[data-variant="B"] .control-bar { padding: 12px; }
body[data-variant="B"] .stat-strip { background: #141c26; }
body[data-variant="B"] .stat-strip > div + div { border-left-color: var(--line); }
body[data-variant="B"] .research-hero { padding: 18px 20px; }
body[data-variant="B"] .research-hero h2,
body[data-variant="B"] .section-heading h3 { font-family: "IBM Plex Sans", Inter, system-ui, sans-serif; font-weight: 600; }
body[data-variant="B"] .research-kpis > div { border-top: 2px solid var(--accent); }
body[data-variant="B"] input,
body[data-variant="B"] select,
body[data-variant="B"] textarea { border-color: var(--line); background: #111923; color: var(--text); }
body[data-variant="B"] input::placeholder,
body[data-variant="B"] textarea::placeholder { color: var(--muted-dark); }
body[data-variant="B"] .button:not(.button-primary) { border-color: var(--line); background: var(--surface-soft); color: var(--text); }
body[data-variant="B"] .button:not(.button-primary):hover { border-color: var(--accent); background: var(--accent-soft); color: #fff !important; }
body[data-variant="B"] .button-primary { border-color: var(--accent); background: var(--accent); color: #07101a; }
body[data-variant="B"] .button-primary:hover { background: var(--accent-hover); }
body[data-variant="B"] .section-heading { border-bottom-color: var(--line); }
body[data-variant="B"] .company-link,
body[data-variant="B"] .workspace-tab.active { color: #c8dbff; }

/* C keeps the editorial direction, but makes the research canvas denser and
   more deliberate: filter rail, reading column, and restrained burgundy. */
body[data-variant="C"] .valuation-shell { width: min(1320px, calc(100% - 72px)); }
body[data-variant="C"] .valuation-header { min-height: 100px; padding: 20px 0 16px; }
body[data-variant="C"] .valuation-header h1 { font-size: 40px; }
body[data-variant="C"] .workspace-nav { padding-top: 2px; padding-bottom: 2px; }
body[data-variant="C"] .workspace-tab { min-height: 46px; }
body[data-variant="C"] .research-hero { padding-top: 28px; }
body[data-variant="C"] .research-hero h2 { font-size: 40px; letter-spacing: -.3px !important; }
body[data-variant="C"] .section-heading { min-height: 58px; padding: 14px 18px 12px; }
body[data-variant="C"] .section-heading h3 { font-size: 19px; }
body[data-variant="C"] .research-kpis > div { min-height: 104px; padding: 18px 16px; }
body[data-variant="C"] .research-kpis strong { font-family: Georgia, "Songti SC", serif; font-size: 30px; font-weight: 500; }
body[data-variant="C"] .content-post-row,
body[data-variant="C"] .announcement-row,
body[data-variant="C"] .blogger-post-row { min-height: 86px; }

/* Mobile v2: each route keeps its own density and navigation rhythm. */
@media (max-width: 760px) {
  body.mobile-layout[data-variant="A"] .valuation-shell { padding: 10px 10px 142px; }
  body.mobile-layout[data-variant="A"] .valuation-header { min-height: 86px; padding: 16px 14px; }
  body.mobile-layout[data-variant="A"] .valuation-header h1 { font-size: 26px; }
  body.mobile-layout[data-variant="A"] .workspace-nav { margin: 0; padding: 3px; }
  body.mobile-layout[data-variant="A"] .workspace-tab { min-height: 42px; font-size: 12px; }
  body.mobile-layout[data-variant="A"] .control-bar { padding: 10px; }
  body.mobile-layout[data-variant="A"] .stat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  body.mobile-layout[data-variant="A"] .stat-strip > div { padding: 10px 8px; }
  body.mobile-layout[data-variant="A"] .stat-strip > div + div { padding-left: 8px; }

  body.mobile-layout[data-variant="B"] { background: #111720; }
  body.mobile-layout[data-variant="B"] .valuation-shell { padding: 0 10px 142px; background: var(--bg); }
  body.mobile-layout[data-variant="B"] .valuation-header { min-height: 92px; padding: 16px 12px 12px; }
  body.mobile-layout[data-variant="B"] .valuation-header h1 { font-size: 24px; }
  body.mobile-layout[data-variant="B"] .workspace-nav { margin: 0 -10px; padding: 5px 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  body.mobile-layout[data-variant="B"] .workspace-tab { min-height: 42px; }
  body.mobile-layout[data-variant="B"] .workspace-tab { color: var(--muted) !important; }
  body.mobile-layout[data-variant="B"] .workspace-tab.active { background: var(--accent-soft) !important; color: #dce8ff !important; box-shadow: inset 0 -2px var(--accent); }
  body.mobile-layout[data-variant="B"] .control-bar,
  body.mobile-layout[data-variant="B"] .stat-strip,
  body.mobile-layout[data-variant="B"] .mobile-ranking,
  body.mobile-layout[data-variant="B"] .research-section,
  body.mobile-layout[data-variant="B"] .research-hero { background: var(--surface); border-color: var(--line); }
  body.mobile-layout[data-variant="B"] .stat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.mobile-layout[data-variant="B"] .mobile-stock-row { border-bottom-color: var(--line); }
  body.mobile-layout[data-variant="B"] .mobile-stock-main p,
  body.mobile-layout[data-variant="B"] .mobile-stock-value p { color: var(--muted); }
  body.mobile-layout[data-variant="B"] .score-track { background: #273342; }

  body.mobile-layout[data-variant="C"] .valuation-shell { padding: 12px 12px 142px; }
  body.mobile-layout[data-variant="C"] .valuation-header { min-height: 78px; padding: 14px 0 12px; }
  body.mobile-layout[data-variant="C"] .valuation-header h1 { font-size: 27px; }
  body.mobile-layout[data-variant="C"] .workspace-nav { margin: 0 -12px; border-bottom: 2px solid #171816; }
  body.mobile-layout[data-variant="C"] .workspace-tab { min-height: 43px; font-family: Georgia, "Songti SC", serif; }
  body.mobile-layout[data-variant="C"] .research-hero { padding: 20px 0 16px; }
  body.mobile-layout[data-variant="C"] .research-kpis { gap: 0; }
  body.mobile-layout[data-variant="C"] .research-kpis > div { min-height: 88px; padding: 14px 12px; }
  body.mobile-layout[data-variant="C"] .section-heading { min-height: 52px; padding: 13px 14px 11px; }
  body.mobile-layout[data-variant="C"] .section-heading h3 { font-size: 18px; }
}

/* C refinement: the capability strip spans the full valuation canvas instead
   of being auto-placed into the narrow filter rail. */
body[data-variant="C"] #valuationView:not([hidden]) .data-capability-strip {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  width: 100%;
}
body[data-variant="C"] #valuationView:not([hidden]) .table-section {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
body[data-variant="C"] .table-section tbody tr:hover,
body[data-variant="C"] .table-section tbody tr:focus-within {
  background: #f5f5f2 !important;
}
body[data-variant="C"] .table-section tbody tr.is-selected {
  background: #eee8e5 !important;
}

/* C uses a quiet paper-like interaction state. Keep hover distinct from the
   selected row without letting a red accent wash over ordinary controls. */
body[data-variant="C"] .button:hover:not(:disabled):not(.button-primary),
body[data-variant="C"] .blogger-open:hover:not(:disabled),
body[data-variant="C"] .tab:not(.active):hover,
body[data-variant="C"] .workspace-tab:not(.active):hover {
  border-color: #bfc0ba;
  background: #f2f2ef;
  color: var(--text) !important;
}
body[data-variant="C"] .button-primary:hover:not(:disabled) {
  border-color: #8d2828;
  background: #8d2828;
  color: #fff;
}

/* Stock detail pages inherit the selected prototype so opening a company
   does not silently reset the visual language to the legacy green skin. */
body.stock-layout[data-variant="C"] { background: var(--bg); color: var(--text); }
body.stock-layout[data-variant="C"] .stock-page { width: min(1280px, calc(100% - 64px)); }
body.stock-layout[data-variant="C"] .stock-header { border-top: 5px solid #171816; border-bottom: 1px solid #171816; }
body.stock-layout[data-variant="C"] .research-section { border-radius: 0; box-shadow: none; }
body.stock-layout[data-variant="C"] .button-primary { border-color: var(--accent); background: var(--accent); color: #fff; }
body.stock-layout[data-variant="C"] .stock-tag-list span { border-color: var(--accent-border); color: var(--accent); background: var(--accent-soft); }
body.stock-layout[data-variant="C"].mobile-layout .stock-page { width: 100%; }
body.stock-layout[data-variant="C"].mobile-layout .stock-header { padding: 16px 0; }

@media (max-width: 760px) {
  body.stock-layout[data-variant="C"].mobile-layout .stock-header-actions { flex-wrap: wrap; }
  body.stock-layout[data-variant="C"].mobile-layout .stock-overview-grid,
  body.stock-layout[data-variant="C"].mobile-layout .stock-context-grid { display: block; }
  body.stock-layout[data-variant="C"].mobile-layout .stock-overview-card,
  body.stock-layout[data-variant="C"].mobile-layout .stock-context-section,
  body.stock-layout[data-variant="C"].mobile-layout .stock-chart-section,
  body.stock-layout[data-variant="C"].mobile-layout .stock-auction-section,
  body.stock-layout[data-variant="C"].mobile-layout .stock-board-section { border-color: var(--line); background: var(--surface); }
}

/* Interaction contract: every themed table keeps its text readable while a
   row is hovered, focused, or selected. The old base skin changed only the
   row background, so its more specific cell colors could disappear into it. */
body[data-variant] .table-section tbody tr:hover,
body[data-variant] .table-section tbody tr:focus-within,
body[data-variant] .table-section tbody tr.is-selected {
  background: var(--accent-soft) !important;
  color: var(--text) !important;
}
body[data-variant] .table-section tbody tr:hover td,
body[data-variant] .table-section tbody tr:focus-within td,
body[data-variant] .table-section tbody tr.is-selected td,
body[data-variant] .table-section tbody tr:hover td code,
body[data-variant] .table-section tbody tr:focus-within td code,
body[data-variant] .table-section tbody tr.is-selected td code {
  color: var(--text) !important;
}
body[data-variant] .table-section tbody tr:hover td.code,
body[data-variant] .table-section tbody tr:hover td.muted,
body[data-variant] .table-section tbody tr:focus-within td.code,
body[data-variant] .table-section tbody tr:focus-within td.muted,
body[data-variant] .table-section tbody tr.is-selected td.code,
body[data-variant] .table-section tbody tr.is-selected td.muted {
  color: var(--muted) !important;
}
body[data-variant] .table-section tbody tr:hover td.positive,
body[data-variant] .table-section tbody tr:focus-within td.positive,
body[data-variant] .table-section tbody tr.is-selected td.positive { color: var(--positive) !important; }
body[data-variant] .table-section tbody tr:hover td.negative,
body[data-variant] .table-section tbody tr:focus-within td.negative,
body[data-variant] .table-section tbody tr.is-selected td.negative { color: var(--negative) !important; }
body[data-variant] .table-section tbody tr:hover .company-link,
body[data-variant] .table-section tbody tr:focus-within .company-link,
body[data-variant] .table-section tbody tr.is-selected .company-link { color: var(--accent) !important; }

/* D: split monitoring desk. Filters become a permanent command rail, while
   the data surface gets a wide table and a separate capability band. */
body[data-variant="D"] {
  --bg: #eef1f3;
  --surface: #ffffff;
  --surface-soft: #e6ebef;
  --surface-strong: #26343d;
  --line: #cbd4da;
  --line-dark: #52636d;
  --text: #1c2930;
  --muted: #687780;
  --accent: #9a602f;
  --accent-hover: #75441f;
  --accent-soft: #f3e8dd;
  --accent-border: #d3b79f;
  --positive: #20735e;
  --negative: #a34444;
  background: var(--bg);
  color: var(--text);
}
body[data-variant="D"] .valuation-shell { width: min(1600px, calc(100% - 48px)); padding-top: 14px; }
body[data-variant="D"] .valuation-header { min-height: 68px; padding: 14px 18px; border: 1px solid var(--line); background: var(--surface); }
body[data-variant="D"] .valuation-header h1 { font-size: 25px; font-weight: 750; letter-spacing: .02em !important; }
body[data-variant="D"] .valuation-header .eyebrow { color: var(--accent); }
body[data-variant="D"] .workspace-nav { justify-content: flex-start; margin-top: 10px; padding: 0 4px; border: 1px solid var(--line); background: var(--surface); }
body[data-variant="D"] .workspace-tab { flex: 0 0 136px; min-height: 44px; border-bottom: 3px solid transparent; color: var(--muted); }
body[data-variant="D"] .workspace-tab.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
body[data-variant="D"] #valuationView:not([hidden]) { display: grid; grid-template-columns: 224px minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 12px 16px; margin-top: 14px; align-items: start; }
body[data-variant="D"] #valuationView .control-bar { grid-column: 1; grid-row: 1 / span 3; display: block; margin: 0; padding: 14px; border: 1px solid var(--line); background: var(--surface); }
body[data-variant="D"] #valuationView .tabs { display: grid; grid-template-columns: 1fr; gap: 5px; }
body[data-variant="D"] #valuationView .tab { justify-content: flex-start; min-height: 42px; border: 1px solid var(--line); text-align: left; }
body[data-variant="D"] #valuationView .tab.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
body[data-variant="D"] #valuationView .field { display: grid; grid-template-columns: 1fr; margin-top: 12px; }
body[data-variant="D"] #valuationView .field input,
body[data-variant="D"] #valuationView .field select { width: 100%; min-width: 0; }
body[data-variant="D"] #valuationView .control-bar > .button { width: 100%; margin-top: 12px; }
body[data-variant="D"] #valuationView .stat-strip { grid-column: 2; grid-row: 1; margin: 0; border: 1px solid var(--line); background: var(--surface); }
body[data-variant="D"] #valuationView .data-capability-strip { grid-column: 2; grid-row: 2; margin: 0; border: 1px solid var(--line); background: var(--surface); }
body[data-variant="D"] #valuationView .table-section { grid-column: 2; grid-row: 3; margin: 0; border: 1px solid var(--line-dark); border-radius: 2px; box-shadow: 0 8px 18px rgba(35,49,58,.08); }
body[data-variant="D"] .table-headline { background: var(--surface-strong); }
body[data-variant="D"] .research-hero { border-left: 4px solid var(--accent); background: var(--surface); }
body[data-variant="D"] .research-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body[data-variant="D"] .research-kpis > div { border-top: 3px solid var(--accent); background: var(--surface); }

/* E: report canvas. Controls, metrics, and table share one horizontal grid;
   there are no floating panels around the primary data. */
body[data-variant="E"] {
  --bg: #f5f6f7;
  --surface: #ffffff;
  --surface-soft: #edf1f3;
  --surface-strong: #202a31;
  --line: #d5dde1;
  --line-dark: #65747c;
  --text: #1c272d;
  --muted: #69777e;
  --accent: #2f6978;
  --accent-hover: #24525e;
  --accent-soft: #e4f0f2;
  --accent-border: #a9cbd1;
  --positive: #1d7560;
  --negative: #a64747;
  background: var(--bg);
  color: var(--text);
}
body[data-variant="E"] .valuation-shell { width: min(1760px, calc(100% - 56px)); padding-top: 20px; }
body[data-variant="E"] .valuation-header { min-height: 92px; padding: 0 0 16px; border-bottom: 2px solid var(--surface-strong); }
body[data-variant="E"] .valuation-header h1 { font-size: 34px; font-weight: 700; }
body[data-variant="E"] .valuation-header .eyebrow { color: var(--accent); }
body[data-variant="E"] .workspace-nav { justify-content: flex-start; margin-top: 0; padding: 0; border-bottom: 1px solid var(--line-dark); }
body[data-variant="E"] .workspace-tab { flex: 0 0 auto; min-width: 126px; border-bottom: 4px solid transparent; color: var(--muted); }
body[data-variant="E"] .workspace-tab.active { border-color: var(--accent); background: transparent; color: var(--accent); }
body[data-variant="E"] #valuationView:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 18px; }
body[data-variant="E"] #valuationView .control-bar { display: flex; margin: 0; padding: 10px 0 12px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
body[data-variant="E"] #valuationView .stat-strip { margin: 0; border: 0; border-top: 3px solid var(--accent); background: var(--surface); }
body[data-variant="E"] #valuationView .data-capability-strip { margin: 0; border: 0; border-left: 4px solid var(--accent); background: var(--surface); }
body[data-variant="E"] #valuationView .table-section { margin: 0; border: 0; border-top: 2px solid var(--surface-strong); border-radius: 0; box-shadow: none; }
body[data-variant="E"] .table-headline { padding: 16px 0; border-bottom: 1px solid var(--line-dark); background: transparent; color: var(--text); }
body[data-variant="E"] .table-headline span { color: var(--muted); }
body[data-variant="E"] .table-section th { background: var(--surface-soft); color: var(--muted); }
body[data-variant="E"] .table-section td { border-color: var(--line); }
body[data-variant="E"] .research-hero { border: 0; border-bottom: 2px solid var(--surface-strong); border-radius: 0; padding-left: 0; background: transparent; }
body[data-variant="E"] .research-kpis { gap: 0; border-bottom: 1px solid var(--line-dark); }
body[data-variant="E"] .research-kpis > div { border: 0; border-right: 1px solid var(--line); background: transparent; }

/* F: metric mosaic. The page starts with a compact command header and a
   deliberate summary grid before the list, giving the data a dashboard rhythm. */
body[data-variant="F"] {
  --bg: #f6f3f0;
  --surface: #fffdfb;
  --surface-soft: #efeae6;
  --surface-strong: #332b35;
  --line: #ddd4cf;
  --line-dark: #62545e;
  --text: #292329;
  --muted: #756b72;
  --accent: #69507d;
  --accent-hover: #513c63;
  --accent-soft: #eee7f2;
  --accent-border: #c8b6d1;
  --positive: #36705e;
  --negative: #a04f55;
  background: var(--bg);
  color: var(--text);
}
body[data-variant="F"] .valuation-shell { width: min(1240px, calc(100% - 72px)); padding-top: 28px; }
body[data-variant="F"] .valuation-header { min-height: 82px; align-items: center; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
body[data-variant="F"] .valuation-header h1 { font-size: 30px; font-weight: 650; }
body[data-variant="F"] .valuation-header .eyebrow { color: var(--accent); }
body[data-variant="F"] .workspace-nav { margin-top: 12px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
body[data-variant="F"] .workspace-tab { min-height: 42px; border-radius: 7px; border: 0; color: var(--muted); }
body[data-variant="F"] .workspace-tab.active { background: var(--surface-strong); color: #fff; }
body[data-variant="F"] #valuationView:not([hidden]) { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
body[data-variant="F"] #valuationView .control-bar { grid-column: 1 / -1; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
body[data-variant="F"] #valuationView .stat-strip { grid-column: 1 / -1; margin: 0; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
body[data-variant="F"] #valuationView .data-capability-strip { grid-column: 1 / -1; margin: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
body[data-variant="F"] #valuationView .table-section { grid-column: 1 / -1; margin: 0; border: 1px solid var(--line-dark); border-radius: 10px; box-shadow: 0 12px 30px rgba(51,43,53,.08); }
body[data-variant="F"] .table-headline { background: var(--surface-strong); }
body[data-variant="F"] .research-hero { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
body[data-variant="F"] .research-kpis { gap: 12px; }
body[data-variant="F"] .research-kpis > div { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 7px 18px rgba(51,43,53,.05); }

@media (max-width: 760px) {
  body.mobile-layout[data-variant="D"] .valuation-shell,
  body.mobile-layout[data-variant="E"] .valuation-shell,
  body.mobile-layout[data-variant="F"] .valuation-shell { width: 100%; padding: 12px 12px 24px; }
  body.mobile-layout[data-variant="D"] .valuation-header,
  body.mobile-layout[data-variant="E"] .valuation-header,
  body.mobile-layout[data-variant="F"] .valuation-header { min-height: 78px; padding: 14px; }
  body.mobile-layout[data-variant="D"] .workspace-nav,
  body.mobile-layout[data-variant="E"] .workspace-nav,
  body.mobile-layout[data-variant="F"] .workspace-nav { margin: 0 -12px; padding: 4px 8px; overflow-x: auto; }
  body.mobile-layout[data-variant="D"] .workspace-tab,
  body.mobile-layout[data-variant="E"] .workspace-tab,
  body.mobile-layout[data-variant="F"] .workspace-tab { flex: 0 0 auto; min-width: 112px; min-height: 42px; }
  body.mobile-layout[data-variant="D"] #valuationView:not([hidden]),
  body.mobile-layout[data-variant="E"] #valuationView:not([hidden]),
  body.mobile-layout[data-variant="F"] #valuationView:not([hidden]) { display: block; margin-top: 12px; }
  body.mobile-layout[data-variant="D"] #valuationView .control-bar,
  body.mobile-layout[data-variant="E"] #valuationView .control-bar,
  body.mobile-layout[data-variant="F"] #valuationView .control-bar { display: block; margin: 0 0 10px; padding: 10px; }
  body.mobile-layout[data-variant="D"] #valuationView .tabs,
  body.mobile-layout[data-variant="E"] #valuationView .tabs,
  body.mobile-layout[data-variant="F"] #valuationView .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.mobile-layout[data-variant="D"] #valuationView .tab,
  body.mobile-layout[data-variant="E"] #valuationView .tab,
  body.mobile-layout[data-variant="F"] #valuationView .tab { min-height: 42px; padding: 0 5px; font-size: 13px; }
  body.mobile-layout[data-variant="D"] #valuationView .field,
  body.mobile-layout[data-variant="E"] #valuationView .field,
  body.mobile-layout[data-variant="F"] #valuationView .field { display: grid; grid-template-columns: 42px minmax(0, 1fr); margin-top: 8px; }
  body.mobile-layout[data-variant="D"] #valuationView .field input,
  body.mobile-layout[data-variant="D"] #valuationView .field select,
  body.mobile-layout[data-variant="E"] #valuationView .field input,
  body.mobile-layout[data-variant="E"] #valuationView .field select,
  body.mobile-layout[data-variant="F"] #valuationView .field input,
  body.mobile-layout[data-variant="F"] #valuationView .field select { min-width: 0; width: 100%; }
  body.mobile-layout[data-variant="D"] #valuationView .stat-strip,
  body.mobile-layout[data-variant="E"] #valuationView .stat-strip,
  body.mobile-layout[data-variant="F"] #valuationView .stat-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 10px; }
  body.mobile-layout[data-variant="D"] #valuationView .data-capability-strip,
  body.mobile-layout[data-variant="E"] #valuationView .data-capability-strip,
  body.mobile-layout[data-variant="F"] #valuationView .data-capability-strip { margin: 0 0 10px; }
  body.mobile-layout[data-variant="D"] #valuationView .table-section,
  body.mobile-layout[data-variant="E"] #valuationView .table-section,
  body.mobile-layout[data-variant="F"] #valuationView .table-section { margin: 0; }
  body.mobile-layout[data-variant="D"] .research-kpis,
  body.mobile-layout[data-variant="E"] .research-kpis,
  body.mobile-layout[data-variant="F"] .research-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.mobile-layout[data-variant="D"] .research-kpis > div,
  body.mobile-layout[data-variant="E"] .research-kpis > div,
  body.mobile-layout[data-variant="F"] .research-kpis > div { min-height: 84px; padding: 12px; }

  body.mobile-layout[data-variant="D"] .valuation-header,
  body.mobile-layout[data-variant="E"] .valuation-header,
  body.mobile-layout[data-variant="F"] .valuation-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 76px;
    padding: 14px;
  }
  body.mobile-layout[data-variant="D"] .account-actions,
  body.mobile-layout[data-variant="E"] .account-actions,
  body.mobile-layout[data-variant="F"] .account-actions { margin: 0; }
  body.mobile-layout[data-variant="D"] .account-summary,
  body.mobile-layout[data-variant="D"] .view-switch,
  body.mobile-layout[data-variant="E"] .account-summary,
  body.mobile-layout[data-variant="E"] .view-switch,
  body.mobile-layout[data-variant="F"] .account-summary,
  body.mobile-layout[data-variant="F"] .view-switch { display: none; }
  body.mobile-layout[data-variant="D"] .valuation-header h1,
  body.mobile-layout[data-variant="E"] .valuation-header h1,
  body.mobile-layout[data-variant="F"] .valuation-header h1 { font-size: 25px; }
}

/* Keep ordinary button labels readable when the legacy mobile skin changes
   the hover surface to a light theme color. */
:is(body[data-variant="B"], body[data-variant="C"]) .button:hover:not(:disabled):not(.button-primary),
:is(body[data-variant="B"], body[data-variant="C"]) .blogger-open:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text) !important;
}
body.mobile-layout[data-variant="A"] .button:hover:not(:disabled):not(.button-primary),
body.mobile-layout[data-variant="A"] .blogger-open:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--text) !important;
}

/* Tags sit on white surfaces in the mobile layouts, so keep their text and
   borders dark enough to remain readable in every visual variant. */
body.mobile-layout[data-variant] .content-post-tags span,
body.mobile-layout[data-variant] .content-detail-tags > span:not(.announcement-tag),
body.mobile-layout[data-variant] .company-tags span,
body.mobile-layout[data-variant] .stock-tag-list span,
body.mobile-layout[data-variant] .announcement-stocks span {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  background: var(--surface);
  color: var(--accent) !important;
}

/* Content details are reading surfaces, so keep the dialog light in every
   mobile visual variant instead of inheriting the legacy dark skin. */
body.mobile-layout[data-variant] .content-detail-dialog {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
}
body.mobile-layout[data-variant] .content-detail-dialog::backdrop {
  background: rgba(8, 12, 10, .46);
}
body.mobile-layout[data-variant] .content-detail-header {
  border-color: var(--line);
}
body.mobile-layout[data-variant] .content-detail-header p:last-child,
body.mobile-layout[data-variant] .content-detail-body {
  color: var(--text);
}
body.mobile-layout[data-variant] .content-detail-dialog .button:not(.button-primary) {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
}
body.mobile-layout[data-variant] .content-detail-dialog .button:not(.button-primary):hover {
  border-color: var(--accent);
  background: var(--accent-soft, var(--surface-soft));
  color: var(--text) !important;
}

/* Make the table interaction state readable against the neutral canvas. */
body.mobile-layout[data-variant] .board-table tbody tr:hover,
body.mobile-layout[data-variant] .board-table tbody tr:focus-within,
body.mobile-layout[data-variant] .board-table tbody tr.is-selected {
  background: var(--accent-soft, color-mix(in srgb, var(--accent) 11%, var(--surface)));
}
body.mobile-layout[data-variant] .board-table tbody tr:hover td:first-child,
body.mobile-layout[data-variant] .board-table tbody tr:focus-within td:first-child,
body.mobile-layout[data-variant] .board-table tbody tr.is-selected td:first-child {
  box-shadow: inset 3px 0 var(--accent);
}
body.mobile-layout[data-variant] .board-table tbody tr:hover td,
body.mobile-layout[data-variant] .board-table tbody tr:focus-within td,
body.mobile-layout[data-variant] .board-table tbody tr.is-selected td {
  color: var(--text) !important;
}
body.mobile-layout[data-variant] .board-table tbody tr:hover td.code,
body.mobile-layout[data-variant] .board-table tbody tr:hover td.muted,
body.mobile-layout[data-variant] .board-table tbody tr:focus-within td.code,
body.mobile-layout[data-variant] .board-table tbody tr:focus-within td.muted,
body.mobile-layout[data-variant] .board-table tbody tr.is-selected td.code,
body.mobile-layout[data-variant] .board-table tbody tr.is-selected td.muted {
  color: var(--muted) !important;
}
body.mobile-layout[data-variant] .board-table tbody tr:hover td.positive,
body.mobile-layout[data-variant] .board-table tbody tr:focus-within td.positive,
body.mobile-layout[data-variant] .board-table tbody tr.is-selected td.positive {
  color: var(--positive) !important;
}
body.mobile-layout[data-variant] .board-table tbody tr:hover td.negative,
body.mobile-layout[data-variant] .board-table tbody tr:focus-within td.negative,
body.mobile-layout[data-variant] .board-table tbody tr.is-selected td.negative {
  color: var(--negative) !important;
}
body.mobile-layout[data-variant] .board-table tbody tr:hover .company-link,
body.mobile-layout[data-variant] .board-table tbody tr:focus-within .company-link,
body.mobile-layout[data-variant] .board-table tbody tr.is-selected .company-link {
  color: var(--accent) !important;
}

/* Remove the legacy dark-green mobile controls from the themed previews. */
:is(body[data-variant="B"], body[data-variant="C"]) .board-filter,
:is(body[data-variant="B"], body[data-variant="C"]) .kline-period,
:is(body[data-variant="B"], body[data-variant="C"]) .board-date-filter select,
:is(body[data-variant="B"], body[data-variant="C"]) .board-sort select {
  border-color: var(--line);
  background: var(--surface);
  color: var(--muted);
}
:is(body[data-variant="B"], body[data-variant="C"]) .board-status.sealed {
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent);
}
:is(body[data-variant="B"], body[data-variant="C"]) .board-status.broken {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
}
:is(body[data-variant="B"], body[data-variant="C"]) .board-sector-row > i {
  background: var(--surface-soft);
}
:is(body[data-variant="B"], body[data-variant="C"]) .board-alert-clear {
  border-color: var(--line);
  background: var(--surface);
  color: var(--muted);
}
:is(body[data-variant="B"], body[data-variant="C"]) .board-alert-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Explicit mobile mode also applies when the preview is opened in a wide
   browser window, so its theme must not depend on the viewport breakpoint. */
body.mobile-layout[data-variant="A"] .valuation-shell { background: var(--bg); }
body.mobile-layout[data-variant="A"] .valuation-header {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
}
body.mobile-layout[data-variant="A"] .valuation-header h1,
body.mobile-layout[data-variant="A"] .account-summary strong { color: var(--text); }
body.mobile-layout[data-variant="A"] .valuation-header .eyebrow { color: var(--accent); }
body.mobile-layout[data-variant="A"] .workspace-nav { background: var(--surface); border-color: var(--line); }
body.mobile-layout[data-variant="A"] .workspace-tab.active { background: var(--accent-soft) !important; color: var(--accent) !important; border-color: var(--accent) !important; }

body.mobile-layout[data-variant="B"] .valuation-shell { background: var(--bg) !important; }
body.mobile-layout[data-variant="B"] .workspace-nav { background: #0d131b; border-color: var(--line); }
body.mobile-layout[data-variant="B"] .workspace-tab { color: var(--muted) !important; }
body.mobile-layout[data-variant="B"] .workspace-tab.active { background: var(--accent-soft) !important; color: #dce8ff !important; box-shadow: inset 0 -2px var(--accent); }
body.mobile-layout[data-variant="B"] .tab.active { background: var(--accent-soft) !important; border-color: var(--accent) !important; color: #dce8ff !important; }

body.mobile-layout[data-variant="C"] .valuation-shell { background: var(--bg); }
body.mobile-layout[data-variant="C"] .valuation-header { background: var(--bg); color: var(--text); }
body.mobile-layout[data-variant="C"] .valuation-header h1 { color: var(--text); }
body.mobile-layout[data-variant="C"] .workspace-nav { background: var(--bg); border-color: #171816; }
body.mobile-layout[data-variant="C"] .workspace-tab.active { background: #171816 !important; color: #fff !important; }

/* Mobile v2 cleanup: the console rail stays with the page header. The older
   B skin used a fixed bottom dock, which covered the ranking content and
   made the navigation appear after the data instead of before it. */
@media (max-width: 760px) {
  /* The preview-only variant control must not cover the first visible data
     row on a phone. Keep it in document flow after the page content. */
  body.mobile-layout[data-variant] .valuation-shell { padding-bottom: 24px; }
  body.mobile-layout[data-variant] .prototype-switcher {
    position: static;
    width: fit-content;
    margin: 12px auto 16px;
    transform: none;
  }

  body.mobile-layout[data-variant="B"] .workspace-nav {
    position: sticky;
    top: 0;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 30;
    height: auto;
    margin: 0 -10px;
    padding: 5px 10px;
    border: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: #0d131b;
    box-shadow: none;
  }
  body.mobile-layout[data-variant="B"] .workspace-tab {
    flex: 0 0 auto;
    min-height: 42px;
  }

  /* Keep the two secondary valuation filters on one row at phone widths. */
  body.mobile-layout[data-variant="C"] #valuationView .control-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }
  body.mobile-layout[data-variant="C"] #valuationView .tabs,
  body.mobile-layout[data-variant="C"] #valuationView .search-box {
    grid-column: 1 / -1;
  }
  body.mobile-layout[data-variant="C"] #valuationView .classification-level-box,
  body.mobile-layout[data-variant="C"] #valuationView .classification-box {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    min-width: 0;
    margin-top: 8px;
  }
  body.mobile-layout[data-variant="C"] #valuationView .classification-level-box {
    grid-column: 1;
  }
  body.mobile-layout[data-variant="C"] #valuationView .classification-box {
    grid-column: 2;
  }
  body.mobile-layout[data-variant="C"] #valuationView .classification-level-box + .classification-box { margin-left: 0; }
body.mobile-layout[data-variant="C"] #valuationView .classification-level-box select,
body.mobile-layout[data-variant="C"] #valuationView .classification-box select {
    min-width: 0;
    width: 100%;
  }
}

/* Gemini reference integration: first's quiet glass hierarchy and staggered
   dashboard rhythm, translated into the existing member HTML surface. */
.dashboard-view { display: grid; gap: 14px; min-width: 0; }
.dashboard-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 28px 24px;
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow: 0 16px 38px rgba(30, 42, 36, .055);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.dashboard-hero h2 { margin: 0; color: var(--text); font-size: clamp(25px, 3vw, 36px); font-weight: 680; letter-spacing: -.035em; }
.dashboard-subtitle { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.dashboard-hero-meta { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.dashboard-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.dashboard-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dashboard-kpi {
  min-width: 0;
  min-height: 154px;
  padding: 16px 17px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  box-shadow: 0 8px 24px rgba(30, 42, 36, .04);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.dashboard-kpi:hover, .dashboard-widget:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); box-shadow: 0 14px 32px rgba(30, 42, 36, .09); }
.dashboard-kpi-label, .dashboard-widget-head, .dashboard-widget-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dashboard-kpi-label { color: var(--muted); font-size: 11px; }
.dashboard-kpi > strong { display: block; margin-top: 11px; color: var(--text); font-size: 26px; font-weight: 700; letter-spacing: -.04em; }
.dashboard-kpi > strong em { color: var(--muted); font-size: 12px; font-style: normal; font-weight: 600; letter-spacing: 0; }
.dashboard-kpi small { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; }
.dashboard-kpi-trend { font-size: 10px; font-weight: 750; }
.dashboard-kpi-trend.up, .dashboard-kpi-detail .up { color: var(--positive); }
.dashboard-kpi-trend.neutral { color: var(--muted); }
.dashboard-sparkline { display: flex; align-items: end; gap: 3px; height: 28px; margin-top: 12px; }
.dashboard-sparkline i { flex: 1; min-width: 4px; border-radius: 2px 2px 1px 1px; background: color-mix(in srgb, var(--accent) 64%, transparent); }
.dashboard-progress, .dashboard-meter { height: 5px; margin-top: 17px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); }
.dashboard-progress span, .dashboard-meter span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.dashboard-kpi-detail { display: flex; align-items: baseline; gap: 7px; margin-top: 15px; }
.dashboard-kpi-detail b { color: var(--positive); font-size: 19px; }
.dashboard-kpi-detail span { color: var(--muted); font-size: 10px; }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dashboard-widget { min-width: 0; padding: 18px; border: 1px solid color-mix(in srgb, var(--line) 88%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--surface) 84%, transparent); box-shadow: 0 8px 24px rgba(30, 42, 36, .04); transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; animation: dashboard-fade-in 520ms cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--dashboard-delay, 0ms); }
.dashboard-widget-wide { grid-column: 1 / -1; }
.dashboard-widget-head { margin-bottom: 15px; }
.dashboard-widget-head .eyebrow { margin-bottom: 3px; font-size: 9px; }
.dashboard-widget h3 { margin: 0; color: var(--text); font-size: 16px; font-weight: 680; }
.dashboard-widget-note { color: var(--muted); font-size: 10px; }
.dashboard-link, .dashboard-icon-link { border: 0; background: transparent; color: var(--muted); font-size: 11px; }
.dashboard-link:hover, .dashboard-icon-link:hover { color: var(--accent); }
.dashboard-link span { margin-left: 3px; }
.sector-strength-list { display: grid; gap: 13px; }
.sector-strength-row { display: grid; grid-template-columns: 78px minmax(0, 1fr) 65px; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.sector-strength-row b { font-size: 12px; text-align: right; }
.sector-strength-bar { height: 7px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); }
.sector-strength-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); opacity: .76; }
.sector-strength-bar i.down-bar { background: var(--negative); opacity: .62; }
.dashboard-watchlist { display: grid; gap: 2px; }
.dashboard-watchlist button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 50px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 74%, transparent); padding: 8px 0; background: transparent; color: var(--text); text-align: left; }
.dashboard-watchlist button:last-child { border-bottom: 0; }
.dashboard-watchlist button:hover { color: var(--accent); }
.dashboard-watchlist button span { display: grid; gap: 2px; min-width: 0; }
.dashboard-watchlist b { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-watchlist small { color: var(--muted); font-size: 10px; }
.dashboard-watchlist strong { font-size: 12px; }
.breadth-visual { display: flex; align-items: stretch; gap: 4px; height: 80px; }
.breadth-visual > div { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; padding: 0 10px; border-radius: 5px; color: var(--text); }
.breadth-visual b { font-size: 17px; }
.breadth-visual span { color: color-mix(in srgb, var(--text) 72%, transparent); font-size: 10px; }
.breadth-up { background: color-mix(in srgb, var(--positive) 18%, var(--surface)); }
.breadth-flat { background: var(--surface-soft); }
.breadth-down { background: color-mix(in srgb, var(--negative) 14%, var(--surface)); }
.dashboard-widget-foot { margin-top: 14px; color: var(--muted); font-size: 11px; }
.dashboard-widget-foot b { margin-left: 4px; }
.dashboard-quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dashboard-quick-grid button { position: relative; display: grid; gap: 5px; min-width: 0; min-height: 104px; border: 1px solid var(--line); border-radius: 7px; padding: 13px; background: color-mix(in srgb, var(--surface-soft) 60%, transparent); color: var(--text); text-align: left; transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease; }
.dashboard-quick-grid button:hover { transform: translateY(-2px); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.quick-index { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }
.dashboard-quick-grid b { font-size: 13px; }
.dashboard-quick-grid small { color: var(--muted); font-size: 10px; }
.quick-arrow { position: absolute; top: 13px; right: 13px; color: var(--muted); font-size: 14px; }
@keyframes dashboard-fade-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

/* The dock is global in preview and carries only A/C/F. */
.theme-side-dock[hidden] { display: none !important; }
.theme-side-dock { position: fixed; top: 50%; right: 14px; z-index: 90; width: 164px; transform: translateY(-50%); padding: 9px; border: 1px solid color-mix(in srgb, var(--line) 90%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--surface) 74%, transparent); color: var(--text); box-shadow: 0 18px 48px rgba(18, 30, 24, .18); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: width 180ms ease, opacity 180ms ease, transform 180ms ease; }
.theme-side-dock-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 3px 8px; border-bottom: 1px solid color-mix(in srgb, var(--line) 86%, transparent); color: var(--muted); font-size: 10px; font-weight: 750; }
.theme-side-dock-head span { display: inline-flex; align-items: center; gap: 6px; }
.theme-side-dock-head i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent); }
.theme-side-dock-collapse { width: 22px; min-height: 22px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; }
.theme-side-dock-collapse:hover { background: var(--surface-soft); color: var(--text); }
.theme-side-dock-options { display: grid; gap: 4px; padding-top: 8px; }
.theme-choice { display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: center; gap: 7px; width: 100%; min-height: 36px; border: 1px solid transparent; border-radius: 6px; padding: 0 7px; background: transparent; color: var(--muted); text-align: left; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
.theme-choice b { display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid currentColor; border-radius: 5px; font-size: 10px; }
.theme-choice span { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.theme-choice:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--text); }
.theme-choice.active { border-color: color-mix(in srgb, var(--accent) 46%, var(--line)); background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); font-weight: 750; }
.theme-side-dock-current { margin-top: 8px; padding: 7px 5px 1px; border-top: 1px solid color-mix(in srgb, var(--line) 82%, transparent); color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; text-align: center; }
.theme-side-dock.is-collapsed { width: 42px; padding: 7px; }
.theme-side-dock.is-collapsed .theme-side-dock-head { border-bottom: 0; padding: 0; }
.theme-side-dock.is-collapsed .theme-side-dock-head span, .theme-side-dock.is-collapsed .theme-side-dock-options, .theme-side-dock.is-collapsed .theme-side-dock-current { display: none; }
.theme-side-dock.is-collapsed .theme-side-dock-collapse { width: 100%; transform: rotate(180deg); }

/* last's select: keep the native select hidden while the wrapped menu uses a
   theme-aware frosted surface with a stable readable contrast. */
body[data-variant] .select-trigger { border-color: color-mix(in srgb, var(--line) 90%, transparent); background: color-mix(in srgb, var(--surface) 78%, transparent); color: var(--text); box-shadow: 0 4px 12px rgba(26, 38, 31, .04); }
body[data-variant] .select-trigger:hover:not(:disabled), body[data-variant] .select-control.is-open .select-trigger { border-color: color-mix(in srgb, var(--accent) 58%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); color: var(--text); }
body[data-variant] .select-menu { border-color: color-mix(in srgb, var(--line) 92%, transparent); border-radius: 9px; padding: 5px; background: color-mix(in srgb, var(--surface) 86%, transparent); box-shadow: 0 18px 44px rgba(18, 28, 23, .2); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
body[data-variant] .select-option { min-height: 36px; border-radius: 5px; padding: 0 10px; color: var(--muted); }
body[data-variant] .select-option:hover:not(:disabled), body[data-variant] .select-option:focus-visible { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--text); outline: 0; }
body[data-variant] .select-option[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent); font-weight: 750; }

@media (max-width: 760px) {
  .dashboard-hero { align-items: flex-start; flex-direction: column; gap: 12px; padding: 20px 17px; }
  .dashboard-hero h2 { font-size: 28px; }
  .dashboard-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dashboard-kpi { min-height: 142px; padding: 13px 12px; }
  .dashboard-kpi > strong { font-size: 22px; }
  .dashboard-grid { grid-template-columns: 1fr; gap: 10px; }
  .dashboard-widget-wide { grid-column: auto; }
  .dashboard-widget { padding: 15px; }
  .dashboard-quick-grid { grid-template-columns: 1fr; }
  .dashboard-quick-grid button { min-height: 70px; }
  .theme-side-dock { top: auto; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); left: 12px; width: auto; transform: none; padding: 8px; border-radius: 12px; }
  .theme-side-dock-head { padding: 1px 4px 6px; }
  .theme-side-dock-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding-top: 6px; }
  .theme-choice { grid-template-columns: 22px minmax(0, 1fr); min-height: 34px; padding: 0 6px; }
  .theme-choice span { font-size: 10px; }
  .theme-side-dock-current { display: none; }
  .theme-side-dock.is-collapsed { width: 42px; right: 12px; left: auto; padding: 7px; }
  .theme-side-dock.is-collapsed .theme-side-dock-collapse { min-height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-widget, .dashboard-kpi, .dashboard-quick-grid button { animation: none; transition: none; }
}

/* The layout switch is the escape hatch from an explicitly selected mobile
   preview. Keep it visible after each variant's compact header rules. */
body.mobile-layout[data-variant] .view-switch {
  display: flex !important;
  order: initial;
  width: auto;
  flex: 0 0 auto;
}
body.mobile-layout[data-variant] .view-switch button {
  min-height: 32px;
  padding: 0 7px;
  font-size: 11px;
}
body.mobile-layout[data-variant] .account-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

/* Explicit mobile mode must remain a real mobile canvas even when the
   preview browser itself is wide. The old desktop variant grids otherwise
   win the cascade and leave only a narrow slice of each container visible. */
body.mobile-layout[data-variant] {
  min-width: 0;
  overflow-x: hidden;
}
body.mobile-layout[data-variant="A"] .valuation-shell,
body.mobile-layout[data-variant="C"] .valuation-shell,
body.mobile-layout[data-variant="F"] .valuation-shell {
  width: min(390px, calc(100% - 24px));
  max-width: 390px;
  margin: 0 auto;
  padding: 16px 12px 24px;
  box-sizing: border-box;
}
body.mobile-layout[data-variant] .valuation-header,
body.mobile-layout[data-variant] .workspace-nav,
body.mobile-layout[data-variant] [data-workspace-panel],
body.mobile-layout[data-variant] #valuationView:not([hidden]),
body.mobile-layout[data-variant] #valuationView > *,
body.mobile-layout[data-variant] .mobile-ranking {
  width: 100%;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
}
body.mobile-layout[data-variant] [data-workspace-panel] { margin: 12px 0 0; }
body.mobile-layout[data-variant] .workspace-nav {
  display: flex;
  justify-content: flex-start;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
body.mobile-layout[data-variant] .workspace-nav::-webkit-scrollbar { display: none; }
body.mobile-layout[data-variant] .workspace-tab {
  flex: 0 0 auto;
  min-width: 92px;
  white-space: nowrap;
}
body.mobile-layout[data-variant] #valuationView:not([hidden]) {
  display: block !important;
  margin-top: 12px;
}
body.mobile-layout[data-variant] #valuationView .control-bar {
  display: block;
  margin: 0 0 10px;
  padding: 10px;
}
body.mobile-layout[data-variant] #valuationView .tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
body.mobile-layout[data-variant] #valuationView .field {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  min-width: 0;
  margin-top: 8px;
}
body.mobile-layout[data-variant] #valuationView .field input,
body.mobile-layout[data-variant] #valuationView .field select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
body.mobile-layout[data-variant] .mobile-industry-chips {
  display: flex;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  box-sizing: border-box;
}
body.mobile-layout[data-variant] .stat-strip,
body.mobile-layout[data-variant] .desktop-ranking { display: none !important; }
body.mobile-layout[data-variant] .data-capability-strip {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0 0 10px;
}
body.mobile-layout[data-variant] .mobile-ranking {
  display: block !important;
  margin: 0;
  overflow: hidden;
}
body.mobile-layout[data-variant] .mobile-stock-row { min-width: 0; }
body.mobile-layout[data-variant] #valuationView .valuation-side-rail { display: contents; }

/* F v2: a dark research terminal derived from Linear's surface ladder and
   Coinbase's restrained financial hierarchy. It deliberately avoids the
   browser-default form and card treatment used by the earlier prototype. */
body[data-variant="F"] {
  --bg: #08090b;
  --surface: #101215;
  --surface-soft: #16191e;
  --surface-strong: #050607;
  --line: #292d34;
  --line-dark: #3b414a;
  --text: #f3f4f6;
  --muted: #9298a2;
  --muted-dark: #727984;
  --accent: #a39ac7;
  --accent-hover: #bbb3d7;
  --accent-soft: #24222d;
  --accent-border: #5e5875;
  --positive: #e17c86;
  --negative: #71a7a0;
  background: var(--bg);
  color: var(--text);
}
body[data-variant="F"] .valuation-shell {
  width: min(1480px, calc(100% - 40px));
  padding-top: 18px;
}
body[data-variant="F"] .valuation-header {
  min-height: 70px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface-strong);
  box-shadow: none;
}
body[data-variant="F"] .valuation-header h1 {
  color: var(--text);
  font-size: 25px;
  font-weight: 590;
}
body[data-variant="F"] .valuation-header .eyebrow { color: var(--accent); }
body[data-variant="F"] .account-summary strong { color: var(--text); }
body[data-variant="F"] .account-summary span { color: var(--muted); }
body[data-variant="F"] .valuation-header .button,
body[data-variant="F"] .view-switch {
  border-color: var(--line);
  border-radius: 3px;
  background: var(--surface);
  color: var(--text);
}
body[data-variant="F"] .view-switch button { border-radius: 2px; color: var(--muted); }
body[data-variant="F"] .view-switch button.active { background: var(--accent); color: #0b0c0e; }
body[data-variant="F"] .workspace-nav {
  justify-content: flex-start;
  gap: 2px;
  margin-top: 8px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface-strong);
}
body[data-variant="F"] .workspace-tab {
  flex: 0 0 136px;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--muted);
}
body[data-variant="F"] .workspace-tab:hover { border-color: var(--line); background: var(--surface); color: var(--text); }
body[data-variant="F"] .workspace-tab.active { border-color: var(--accent-border); background: var(--accent-soft); color: #e6e1f3; }
body[data-variant="F"] .workspace-free { border-color: var(--accent-border); background: transparent; color: var(--accent); }
body[data-variant="F"] #valuationView:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(290px, .72fr) minmax(0, 2.28fr);
  grid-template-rows: auto auto 1fr;
  gap: 10px;
  margin-top: 10px;
}
body[data-variant="F"] #valuationView .control-bar {
  grid-column: 1;
  grid-row: 1 / span 3;
  display: block;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
}
body[data-variant="F"] #valuationView .tabs { display: grid; grid-template-columns: 1fr; gap: 4px; }
body[data-variant="F"] #valuationView .tab {
  justify-content: flex-start;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #0b0d10;
  color: var(--muted);
}
body[data-variant="F"] #valuationView .tab:hover { border-color: var(--accent-border); color: var(--text); }
body[data-variant="F"] #valuationView .tab.active { border-color: var(--accent-border); background: var(--accent-soft); color: #e6e1f3; }
body[data-variant="F"] #valuationView .field { display: grid; grid-template-columns: 1fr; margin-top: 12px; }
body[data-variant="F"] input,
body[data-variant="F"] select,
body[data-variant="F"] textarea {
  min-height: 42px;
  border: 1px solid var(--line-dark);
  border-radius: 2px;
  background: #0a0c0e;
  color: var(--text);
  outline: none;
}
body[data-variant="F"] input:focus,
body[data-variant="F"] select:focus,
body[data-variant="F"] textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(163,154,199,.16); }
body[data-variant="F"] #valuationView .control-bar > .button { width: 100%; margin-top: 12px; }
body[data-variant="F"] .button { border-radius: 2px; }
body[data-variant="F"] .button-primary { border-color: var(--accent); background: var(--accent); color: #0b0c0e; }
body[data-variant="F"] .button-primary:hover:not(:disabled) { border-color: var(--accent-hover); background: var(--accent-hover); color: #0b0c0e; }
body[data-variant="F"] #valuationView .stat-strip {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 3px;
  background: var(--surface);
}
body[data-variant="F"] #valuationView .stat-strip > div { min-height: 74px; justify-content: center; padding: 12px 18px; border-left: 1px solid var(--line); }
body[data-variant="F"] #valuationView .stat-strip strong { color: var(--text); font-size: 21px; }
body[data-variant="F"] #valuationView .data-capability-strip {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
}
body[data-variant="F"] .data-capability-list > div { border-left: 2px solid var(--accent); background: var(--surface-soft); }
body[data-variant="F"] #valuationView .table-section {
  grid-column: 2;
  grid-row: 3;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}
body[data-variant="F"] .table-headline { background: var(--surface-strong); border-color: var(--line); }
body[data-variant="F"] .table-section th { background: #0d0f12; color: var(--muted); }
body[data-variant="F"] .table-section td { border-color: #20242a; }
body[data-variant="F"] .table-section tbody tr { background: var(--surface); }
body[data-variant="F"] .table-section tbody tr:hover { background: #191b21 !important; }
body[data-variant="F"] .table-footer { border-color: var(--line); }
body[data-variant="F"] .pagination .button { border-color: var(--line-dark); background: var(--surface-soft); color: var(--text); }
body[data-variant="F"] .research-section,
body[data-variant="F"] .research-hero,
body[data-variant="F"] .research-kpis > div { border-color: var(--line); border-radius: 3px; background: var(--surface); color: var(--text); box-shadow: none; }

body.mobile-layout[data-variant="F"] { background: var(--bg); color: var(--text); }
body.mobile-layout[data-variant="F"] .valuation-shell { background: var(--bg); }
body.mobile-layout[data-variant="F"] .valuation-header { min-height: 82px; padding: 12px; background: var(--surface-strong); }
body.mobile-layout[data-variant="F"] .workspace-nav { margin-top: 8px; padding: 4px; background: var(--surface-strong); }
body.mobile-layout[data-variant="F"] .workspace-tab { min-width: 104px; color: var(--muted); }
body.mobile-layout[data-variant="F"] .workspace-tab.active { background: var(--accent-soft); color: #e6e1f3; }
body.mobile-layout[data-variant="F"] #valuationView .control-bar,
body.mobile-layout[data-variant="F"] .data-capability-strip,
body.mobile-layout[data-variant="F"] .mobile-ranking { border: 1px solid var(--line); border-radius: 3px; background: var(--surface); }
body.mobile-layout[data-variant="F"] #valuationView .tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.mobile-layout[data-variant="F"] #valuationView .tab { justify-content: center; min-height: 42px; }
body.mobile-layout[data-variant="F"] .industry-chip { border-color: var(--line); background: var(--surface); color: var(--muted); }
body.mobile-layout[data-variant="F"] .industry-chip.active { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent); }
body.mobile-layout[data-variant="F"] .mobile-list-head { border-color: var(--line); }
body.mobile-layout[data-variant="F"] .mobile-stock-row { border-color: #24282e; background: var(--surface); }
body.mobile-layout[data-variant="F"] .mobile-stock-main h3,
body.mobile-layout[data-variant="F"] .mobile-stock-value strong { color: var(--text); }
body.mobile-layout[data-variant="F"] .mobile-stock-main p,
body.mobile-layout[data-variant="F"] .mobile-stock-value p { color: var(--muted); }
body.mobile-layout[data-variant="F"] .score-track { background: #24282e; }
body.mobile-layout[data-variant="F"] .score-track span { background: var(--accent); }

/* A v2: institutional exchange. A single deep-green masthead anchors the
   product while the actual research data stays on a quiet white canvas. */
body[data-variant="A"] { background: #edf2ef; }
body[data-variant="A"] .valuation-header {
  min-height: 104px;
  padding: 20px 24px;
  border: 0;
  border-radius: 2px 2px 0 0;
  background: #0b2d24;
  color: #fff;
}
body[data-variant="A"] .valuation-header h1 { color: #fff; font-size: 35px; }
body[data-variant="A"] .valuation-header .eyebrow { color: #8bcdb3; }
body[data-variant="A"] .account-summary strong { color: #fff; }
body[data-variant="A"] .account-summary span { color: #9db6ac; }
body[data-variant="A"] .valuation-header .button,
body[data-variant="A"] .valuation-header .view-switch { border-color: #36554a; background: #11382e; color: #fff; }
body[data-variant="A"] .workspace-nav {
  padding: 0 14px;
  border: 0;
  border-top: 1px solid #29493e;
  border-radius: 0 0 2px 2px;
  background: #0b2d24;
}
body[data-variant="A"] .workspace-tab { color: #9db6ac; }
body[data-variant="A"] .workspace-tab:hover { background: #11382e; color: #fff; }
body[data-variant="A"] .workspace-tab.active { border-color: #8bcdb3; background: #123d32; color: #fff; }
body[data-variant="A"] .control-bar,
body[data-variant="A"] .stat-strip,
body[data-variant="A"] .data-capability-strip,
body[data-variant="A"] .table-section { border-radius: 2px; box-shadow: none; }
body[data-variant="A"] .control-bar { border: 1px solid #cbd8d1; }
body[data-variant="A"] .tab { border-radius: 2px; }
body[data-variant="A"] .tab.active { border-color: #8fbbaa; background: #e1eee8; }
body[data-variant="A"] input,
body[data-variant="A"] select,
body[data-variant="C"] input,
body[data-variant="C"] select {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 1px;
  background-color: var(--surface);
  color: var(--text);
  outline: none;
}
body[data-variant="A"] input:focus,
body[data-variant="A"] select:focus,
body[data-variant="C"] input:focus,
body[data-variant="C"] select:focus { border-color: var(--accent); box-shadow: inset 0 -2px var(--accent); }
body[data-variant="A"] .button,
body[data-variant="C"] .button { border-radius: 2px; }
body[data-variant="A"] .table-headline { background: #0b2d24; color: #fff; }
body[data-variant="A"] .table-headline span { color: #9db6ac; }
body[data-variant="A"] .table-section th { background: #e8efeb; }

/* C v2: editorial research desk. Controls read like typeset fields rather
   than generic application widgets, with rules carrying the hierarchy. */
body[data-variant="C"] .control-bar,
body[data-variant="C"] .data-capability-strip,
body[data-variant="C"] .table-section,
body[data-variant="C"] .research-section { border-radius: 0; box-shadow: none; }
body[data-variant="C"] #valuationView .control-bar { border-width: 1px 0 0; }
body[data-variant="C"] #valuationView .tab { min-height: 44px; padding: 0 12px; }
body[data-variant="C"] input,
body[data-variant="C"] select { border-width: 0 0 1px; padding-right: 4px; background: transparent; }
body[data-variant="C"] .table-headline { border-top: 4px solid #171816; background: #fff; color: #171816; }
body[data-variant="C"] .table-section th { border-top: 1px solid #171816; border-bottom: 1px solid #171816; background: #f2f2ef; }

@media (max-width: 760px) {
  body.mobile-layout[data-variant="A"] .valuation-header { padding: 16px 14px; background: #0b2d24; }
  body.mobile-layout[data-variant="A"] .workspace-nav { background: #0b2d24; }
  body.mobile-layout[data-variant="A"] .workspace-tab.active { background: #123d32 !important; color: #fff !important; }
  body.mobile-layout[data-variant="A"] .mobile-ranking,
  body.mobile-layout[data-variant="A"] .data-capability-strip,
  body.mobile-layout[data-variant="A"] #valuationView .control-bar { border-radius: 2px; }

  body.mobile-layout[data-variant="C"] #valuationView .control-bar { border-width: 1px 0; padding: 12px 0; }
  body.mobile-layout[data-variant="C"] .mobile-ranking { border-width: 1px 0; border-radius: 0; }
  body.mobile-layout[data-variant="C"] .data-capability-strip { border-width: 1px 0; border-radius: 0; }
}

/* All seven workspaces must be discoverable on mobile without a hidden
   horizontal gesture. A stable three-column grid keeps every route visible. */
body.mobile-layout[data-variant] .workspace-nav {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 4px;
  height: auto;
  overflow: visible;
  padding: 4px;
}
body.mobile-layout[data-variant] .workspace-tab {
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-width: 0 !important;
  min-height: 48px;
  padding: 5px 3px;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.15;
  text-align: center;
}
body.mobile-layout[data-variant] .workspace-tab .workspace-free,
body.mobile-layout[data-variant] .workspace-tab .workspace-lock {
  margin: 0;
  padding: 1px 4px;
  font-size: 9px;
  line-height: 1;
}

/* Theme controlled selects. The native element remains in the form for
   event handling and progressive fallback, while the visible menu is a
   portal that can escape clipped mobile cards and use the active palette. */
.select-control {
  position: relative;
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}
.select-native {
  display: none !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}
.select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  white-space: nowrap;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.select-trigger-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.select-trigger-icon {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  transform: translateY(-1px);
  transition: color 180ms ease, transform 180ms ease;
}
.select-control.is-open .select-trigger-icon { color: var(--accent); transform: rotate(180deg) translateY(1px); }
.select-trigger:hover:not(:disabled) {
  border-color: var(--accent-border);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.select-trigger:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.select-trigger:disabled { cursor: not-allowed; opacity: .55; }
.select-menu {
  position: fixed;
  z-index: 160;
  display: grid;
  gap: 3px;
  max-height: 280px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--accent-border, var(--line));
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 14px 34px color-mix(in srgb, #000 24%, transparent), 0 2px 8px color-mix(in srgb, var(--accent) 10%, transparent);
  scrollbar-width: thin;
  scrollbar-color: var(--accent-border, var(--line)) transparent;
}
.select-menu::-webkit-scrollbar { width: 6px; }
.select-menu::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--accent-border, var(--line)); }
.select-option {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 6px 9px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.25;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.select-option:hover:not(:disabled),
.select-option:focus-visible {
  outline: none;
  border-color: var(--accent-border, var(--line));
  background: var(--accent-soft, var(--surface-soft));
  color: var(--accent);
}
.select-option[aria-selected="true"] {
  border-color: var(--accent-border, var(--line));
  background: var(--accent-soft, var(--surface-soft));
  color: var(--accent);
  font-weight: 750;
}
.select-option:disabled { cursor: not-allowed; opacity: .45; }
.review-date-field > .select-control { width: 132px; flex: 0 1 132px; }
.classification-level-box > .select-control { min-width: 112px; }
.classification-box > .select-control { min-width: 170px; }
.board-date-filter > .select-control,
.board-sort > .select-control { width: 100%; min-width: 0; }

/* The mobile workspace rail stays useful while scrolling, but can collapse
   to a narrow handle so the reading surface gets the full viewport height. */
.workspace-nav-toggle { display: none; }
body.mobile-layout[data-variant] .workspace-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 40;
}
body.mobile-layout[data-variant] .workspace-nav-toggle {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 18px;
  height: 18px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  line-height: 1;
  transition: background-color 160ms ease, color 160ms ease;
}
body.mobile-layout[data-variant] .workspace-nav-toggle:hover,
body.mobile-layout[data-variant] .workspace-nav-toggle:focus-visible {
  outline: none;
  background: var(--accent-soft);
  color: var(--accent);
}
body.mobile-layout[data-variant] .workspace-nav-toggle-icon {
  font-size: 15px;
  line-height: 1;
}
body.mobile-layout[data-variant] .workspace-nav-toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
body.mobile-layout[data-variant] .workspace-nav-expand { display: none; }
body.mobile-layout[data-variant] .workspace-nav.is-collapsed {
  display: flex !important;
  align-items: center;
  justify-content: center;
  grid-template-columns: none !important;
  height: 34px;
  min-height: 34px;
  padding: 4px 8px;
}
body.mobile-layout[data-variant] .workspace-nav.is-collapsed .workspace-tab,
body.mobile-layout[data-variant] .workspace-nav.is-collapsed .workspace-nav-collapse {
  display: none;
}
body.mobile-layout[data-variant] .workspace-nav.is-collapsed .workspace-nav-expand {
  display: flex;
  width: 74px;
}

@media (max-width: 760px) {
  body.mobile-layout[data-variant] .select-trigger { min-height: 42px; font-size: 13px; }
  body.mobile-layout[data-variant] .select-option { min-height: 38px; }
  body.mobile-layout[data-variant] .review-date-field > .select-control,
  body.mobile-layout[data-variant] .classification-level-box > .select-control,
  body.mobile-layout[data-variant] .classification-box > .select-control {
    width: 100%;
    min-width: 0;
    flex-basis: auto;
  }
}
body.mobile-layout[data-variant] .select-trigger { min-height: 42px; }
body.mobile-layout[data-variant] .review-date-field > .select-control,
body.mobile-layout[data-variant] .classification-level-box > .select-control,
body.mobile-layout[data-variant] .classification-box > .select-control {
  width: 100%;
  min-width: 0;
  flex-basis: auto;
}

/* C desktop composition: keep the filters and summary in the left rail, and
   put the capability notice directly above the long ranking table. */
@media (min-width: 901px) {
  body[data-variant="C"]:not(.mobile-layout) #valuationView .valuation-side-rail {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  body[data-variant="C"]:not(.mobile-layout) #valuationView .data-capability-strip {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }

  body[data-variant="C"]:not(.mobile-layout) #valuationView .table-section {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
  }
}

/* F final palette contract: the terminal uses muted violet surfaces. These
   rules replace legacy green component colors while keeping stock movement
   colors available for actual gain/loss values. */
body[data-variant="F"] {
  --accent: #a79bd0;
  --accent-hover: #9286b3;
  --accent-soft: #24212e;
  --accent-border: #625a7e;
  --focus: #a79bd0;
}

body[data-variant="F"] .content-tools,
body[data-variant="F"] .announcement-tools,
body[data-variant="F"] .research-company-tools,
body[data-variant="F"] .company-stock-jump,
body[data-variant="F"] .company-analysis-form,
body[data-variant="F"] .kline-tools,
body[data-variant="F"] .blogger-detail-header,
body[data-variant="F"] .blogger-admin-form,
body[data-variant="F"] .content-admin-form,
body[data-variant="F"] .content-admin-card,
body[data-variant="F"] .content-detail-media a,
body[data-variant="F"] .stock-query-form,
body[data-variant="F"] .pulse-item,
body[data-variant="F"] .integration-grid article,
body[data-variant="F"] .review-trend-day,
body[data-variant="F"] .research-result-copy,
body[data-variant="F"] .announcement-analysis {
  background: var(--surface);
  border-color: var(--line);
}

body[data-variant="F"] .research-result-copy,
body[data-variant="F"] .announcement-analysis {
  background: var(--surface-soft);
  border-left-color: var(--accent);
}

body[data-variant="F"] .sector-bar,
body[data-variant="F"] .review-theme-bar,
body[data-variant="F"] .review-timeline i,
body[data-variant="F"] .review-distribution i,
body[data-variant="F"] .board-sector-row > i {
  background: var(--surface-soft);
}
body[data-variant="F"] .review-trend-day {
  border-color: var(--line);
  color: var(--text);
}
body[data-variant="F"] .stock-context-row,
body[data-variant="F"] .stock-board-row,
body[data-variant="F"] .watchlist-row,
body[data-variant="F"] .research-candidate-row,
body[data-variant="F"] .company-history-row,
body[data-variant="F"] .announcement-row,
body[data-variant="F"] .content-post-row,
body[data-variant="F"] .blogger-post-row {
  border-color: var(--line);
}
body[data-variant="F"] .company-link {
  text-decoration-color: var(--accent-border);
}
body[data-variant="F"] .pagination .button {
  border-color: var(--line-dark);
  background: var(--surface-soft);
  color: var(--text);
}

body[data-variant="F"] .content-tools input,
body[data-variant="F"] .content-tools select,
body[data-variant="F"] .announcement-tools input,
body[data-variant="F"] .announcement-tools select,
body[data-variant="F"] .research-company-tools input,
body[data-variant="F"] .research-company-tools select,
body[data-variant="F"] .company-stock-jump input,
body[data-variant="F"] .company-analysis-form select,
body[data-variant="F"] .company-analysis-form textarea,
body[data-variant="F"] .kline-tools select,
body[data-variant="F"] .blogger-admin-form input,
body[data-variant="F"] .blogger-admin-form select,
body[data-variant="F"] .content-admin-form input,
body[data-variant="F"] .content-admin-form select,
body[data-variant="F"] .content-admin-form textarea {
  border-color: var(--line-dark);
  background: var(--surface-strong);
  color: var(--text);
}

body[data-variant="F"] .content-post-row:hover,
body[data-variant="F"] .content-post-row:focus-visible,
body[data-variant="F"] .observation-row:hover,
body[data-variant="F"] .announcement-row:hover,
body[data-variant="F"] .company-history-row:hover,
body[data-variant="F"] .board-alert-row:hover,
body[data-variant="F"] .board-table tbody tr:hover,
body[data-variant="F"] .review-trend-day:hover,
body[data-variant="F"] .review-trend-day.active,
body[data-variant="F"] .media-source-item:hover,
body[data-variant="F"] .blogger-source-item:hover {
  background: var(--surface-soft) !important;
  color: var(--text);
}

body[data-variant="F"] .button:hover:not(:disabled),
body[data-variant="F"] .blogger-open:hover:not(:disabled) {
  border-color: var(--accent-border);
  background: var(--surface-soft);
  color: var(--text) !important;
}
body[data-variant="F"] .button-primary:hover:not(:disabled) {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
  color: #15121b;
}
body[data-variant="F"] th button:hover,
body[data-variant="F"] .company-link:hover,
body[data-variant="F"] .company-detail-link:hover {
  color: var(--accent);
  text-decoration-color: var(--accent-border);
}

body[data-variant="F"] .content-post-tags span,
body[data-variant="F"] .content-detail-tags > span:not(.announcement-tag),
body[data-variant="F"] .company-tags span,
body[data-variant="F"] .announcement-stocks span,
body[data-variant="F"] .stock-tag-list span,
body[data-variant="F"] .workspace-free,
body[data-variant="F"] .workspace-badge,
body[data-variant="F"] .cache-badge,
body[data-variant="F"] .permission-chip,
body[data-variant="F"] .media-source-item.active,
body[data-variant="F"] .blogger-source-item.active,
body[data-variant="F"] .stock-kline-toolbar .kline-period.active,
body[data-variant="F"] .kline-indicator.active,
body[data-variant="F"] .board-taxonomy-tab.active,
body[data-variant="F"] .board-filter.active,
body[data-variant="F"] .kline-period.active,
body[data-variant="F"] .admin-tab.active {
  border-color: var(--accent-border) !important;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

body[data-variant="F"] .announcement-tag.positive,
body[data-variant="F"] .announcement-tag.negative,
body[data-variant="F"] .announcement-tag.neutral,
body[data-variant="F"] .board-status.sealed,
body[data-variant="F"] .board-status.broken,
body[data-variant="F"] .review-event-status.sealed,
body[data-variant="F"] .review-event-status.broken,
body[data-variant="F"] .review-event-status.resealed,
body[data-variant="F"] .collector-source-state.enabled,
body[data-variant="F"] .collector-source-state.disabled {
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent) !important;
}

body[data-variant="F"] .board-alert-clear {
  border-color: var(--line);
  background: var(--surface);
  color: var(--muted);
}
body[data-variant="F"] .board-alert-dot,
body[data-variant="F"] .preview-environment-badge > span {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

body[data-variant="F"] .table-section tbody tr:hover,
body[data-variant="F"] .table-section tbody tr:focus-within,
body[data-variant="F"] .table-section tbody tr.is-selected {
  background: var(--accent-soft) !important;
}

body[data-variant="F"] .content-detail-dialog {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
}
body[data-variant="F"] .content-detail-dialog::backdrop {
  background: rgba(3, 3, 5, .62);
}

@media (max-width: 900px) {
  body[data-variant="C"]:not(.mobile-layout) #valuationView .valuation-side-rail {
    display: contents;
  }
}

/* The native horizontal scrollbar is replaced by a quiet theme-aware rail.
   It remains keyboard and wheel accessible through the scroll host, while the
   visual thumb only appears during interaction or while content is moving. */
.custom-scroll-host,
[data-custom-scrollbar-ready="true"],
.admin-table-wrap,
.collector-table-wrap,
.members-table-wrap,
.content-admin-table-wrap,
.blogger-admin-table-wrap {
  scrollbar-width: none;
}
.custom-scroll-host::-webkit-scrollbar,
[data-custom-scrollbar-ready="true"]::-webkit-scrollbar,
.admin-table-wrap::-webkit-scrollbar,
.collector-table-wrap::-webkit-scrollbar,
.members-table-wrap::-webkit-scrollbar,
.content-admin-table-wrap::-webkit-scrollbar,
.blogger-admin-table-wrap::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.table-scrollbar {
  position: relative;
  height: 0;
  margin: 0 18px;
  opacity: 0;
  pointer-events: none;
  --scroll-track: color-mix(in srgb, var(--accent) 12%, var(--surface));
  --scroll-thumb: color-mix(in srgb, var(--accent) 58%, var(--surface-soft));
  --scroll-thumb-hover: color-mix(in srgb, var(--accent) 76%, var(--surface-soft));
  transition: height 180ms ease, margin 180ms ease, opacity 320ms cubic-bezier(.22, .8, .3, 1);
}
.table-scrollbar.is-overflow {
  height: 6px;
  margin-top: 2px;
  margin-bottom: 3px;
}
.table-scrollbar.is-active {
  opacity: .94;
  pointer-events: auto;
}
.table-scrollbar.is-dragging { opacity: 1; }
.table-scrollbar::before {
  position: absolute;
  top: 2px;
  right: 0;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--scroll-track);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
  content: "";
}
.table-scrollbar-thumb {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  min-width: 36px;
  min-height: 6px;
  height: 6px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  appearance: none;
  background: var(--scroll-thumb);
  box-shadow: 0 1px 5px color-mix(in srgb, var(--accent) 18%, transparent);
  cursor: grab;
  touch-action: none;
  will-change: transform;
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 100ms cubic-bezier(.22, .8, .3, 1);
}
.table-scrollbar-thumb:hover,
.table-scrollbar.is-dragging .table-scrollbar-thumb {
  background: var(--scroll-thumb-hover);
  box-shadow: 0 2px 9px color-mix(in srgb, var(--accent) 28%, transparent);
}
.table-scrollbar.is-dragging .table-scrollbar-thumb { cursor: grabbing; transition: background-color 160ms ease, box-shadow 160ms ease; }

/* Shared theme audit for A/C/F. Component surfaces use the active palette,
   so the old light-green defaults cannot bleed into another visual variant. */
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .content-tools,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .announcement-tools,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .research-company-tools,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .company-stock-jump,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .company-analysis-form,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .kline-tools,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .blogger-detail-header,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .blogger-admin-form,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .content-admin-form,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .content-admin-card,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .content-detail-media a,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .stock-query-form,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .pulse-item,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .integration-grid article,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .review-trend-day {
  border-color: var(--line);
  background: var(--surface);
}

:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .content-tools input,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .content-tools select,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .announcement-tools input,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .announcement-tools select,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .research-company-tools input,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .research-company-tools select,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .company-stock-jump input,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .company-analysis-form select,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .company-analysis-form textarea,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .kline-tools input,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .kline-tools select,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .blogger-admin-form input,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .blogger-admin-form select,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .content-admin-form input,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .content-admin-form select,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .content-admin-form textarea {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
}

:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .research-result-copy,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .announcement-analysis {
  border-left-color: var(--accent);
  background: var(--surface-soft);
}

:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-reason-note {
  border-left-color: var(--accent);
  background: var(--surface-soft);
  color: var(--text);
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-sector-row small,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .content-pin {
  color: var(--accent);
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .sector-bar,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .review-theme-bar,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .review-timeline i,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .review-distribution i,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-sector-row > i {
  background: var(--surface-soft);
}

:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .content-post-row:hover,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .content-post-row:focus-visible,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .observation-row:hover,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .announcement-row:hover,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .company-history-row:hover,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-alert-row:hover,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-table tbody tr:hover,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .review-trend-day:hover,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .review-trend-day.active {
  background: var(--surface-soft) !important;
}

:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .content-post-tags span,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .content-detail-tags > span:not(.announcement-tag),
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .company-tags span,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .announcement-stocks span,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .stock-tag-list span,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .workspace-free,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .workspace-badge,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .cache-badge,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .permission-chip,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .media-source-item.active,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .blogger-source-item.active,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .stock-kline-toolbar .kline-period.active,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .kline-indicator.active,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-taxonomy-tab.active,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-filter.active,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .kline-period.active,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .admin-tab.active {
  border-color: var(--accent-border) !important;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .announcement-tag.positive,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .announcement-tag.negative,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .announcement-tag.neutral,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-status.sealed,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-status.broken,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .review-event-status.sealed,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .review-event-status.broken,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .review-event-status.resealed,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .collector-source-state.enabled,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .collector-source-state.disabled {
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent) !important;
}

:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .company-link {
  text-decoration-color: var(--accent-border);
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) th button:hover {
  color: var(--accent);
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-table th {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--muted);
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-table td {
  border-color: var(--line);
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-alert-dot,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .preview-environment-badge > span {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Small motion pass: transitions are limited to direct interaction and view
   entry so the data surface stays calm while still feeling responsive. */
@media (prefers-reduced-motion: no-preference) {
  body[data-variant] .button,
  body[data-variant] .tab,
  body[data-variant] .workspace-tab,
  body[data-variant] .media-source-item,
  body[data-variant] .blogger-source-item,
  body[data-variant] .board-filter,
  body[data-variant] .board-taxonomy-tab,
  body[data-variant] .kline-period,
  body[data-variant] .kline-indicator,
  body[data-variant] .industry-chip,
  body[data-variant] .view-switch button,
  body[data-variant] .pagination .button,
  body[data-variant] .company-link,
  body[data-variant] .company-detail-link {
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  }
  body[data-variant] .content-post-row,
  body[data-variant] .observation-row,
  body[data-variant] .announcement-row,
  body[data-variant] .company-history-row,
  body[data-variant] .board-alert-row,
  body[data-variant] .board-table tbody tr,
  body[data-variant] .mobile-stock-row {
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
  }
  body[data-variant] .button:not(:disabled):active,
  body[data-variant] .tab:active,
  body[data-variant] .workspace-tab:active,
  body[data-variant] .board-filter:active,
  body[data-variant] .kline-period:active {
    transform: translateY(1px);
  }
  body[data-variant] [data-workspace-panel]:not([hidden]) {
    animation: workspace-panel-enter 190ms cubic-bezier(.22, .8, .3, 1) both;
  }
}
@keyframes workspace-panel-enter {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-variant] *,
  body[data-variant] *::before,
  body[data-variant] *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* A/C/F control system. Every common control uses the active palette and an
   explicit interaction model instead of the browser's default treatment. */
:is(body[data-variant="A"], body[data-variant="C"]) { color-scheme: light; }
body[data-variant="F"] { color-scheme: dark; }

:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) input:not([type="checkbox"]):not([type="radio"]),
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) select,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) textarea {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  background-color: var(--surface);
  color: var(--text);
  caret-color: var(--accent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent);
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) input:not([type="checkbox"]):not([type="radio"])::placeholder,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 78%, transparent);
  opacity: 1;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) select {
  appearance: none;
  padding-right: 34px !important;
  background-position: calc(100% - 11px) 50% !important;
  background-repeat: no-repeat !important;
  background-size: 13px 13px !important;
}
body[data-variant="A"] select { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMycgaGVpZ2h0PScxMycgdmlld0JveD0nMCAwIDI0IDI0JyBmaWxsPSdub25lJyBzdHJva2U9JyM2ODc2NmYnIHN0cm9rZS13aWR0aD0nMicgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cGF0aCBkPSdNNiA5bDYgNiA2LTYnLz48L3N2Zz4=") !important; }
body[data-variant="C"] select { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMycgaGVpZ2h0PScxMycgdmlld0JveD0nMCAwIDI0IDI0JyBmaWxsPSdub25lJyBzdHJva2U9JyM2YjZkNjgnIHN0cm9rZS13aWR0aD0nMicgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cGF0aCBkPSdNNiA5bDYgNiA2LTYnLz48L3N2Zz4=") !important; }
body[data-variant="F"] select { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMycgaGVpZ2h0PScxMycgdmlld0JveD0nMCAwIDI0IDI0JyBmaWxsPSdub25lJyBzdHJva2U9JyM5Mjk4YTInIHN0cm9rZS13aWR0aD0nMicgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cGF0aCBkPSdNNiA5bDYgNiA2LTYnLz48L3N2Zz4=") !important; }
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) select option {
  background: var(--surface);
  color: var(--text);
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) input:not([type="checkbox"]):not([type="radio"]):hover,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) select:hover,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) textarea:hover {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--line));
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) input:not([type="checkbox"]):not([type="radio"]):focus,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) select:focus,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 26%, transparent);
}

body[data-variant="A"] input:not([type="checkbox"]):not([type="radio"]),
body[data-variant="A"] select,
body[data-variant="A"] textarea {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line)) !important;
  background-color: color-mix(in srgb, var(--surface) 94%, var(--accent-soft)) !important;
  color: var(--text) !important;
}
body[data-variant="C"] input:not([type="checkbox"]):not([type="radio"]),
body[data-variant="C"] select,
body[data-variant="C"] textarea {
  border-width: 0 0 1px;
  border-radius: 0;
  padding-right: 30px;
  border-color: var(--line) !important;
  background-color: transparent !important;
  color: var(--text) !important;
  box-shadow: none;
}
body[data-variant="C"] input:not([type="checkbox"]):not([type="radio"]):focus,
body[data-variant="C"] select:focus,
body[data-variant="C"] textarea:focus {
  box-shadow: inset 0 -2px var(--accent);
}
body[data-variant="F"] input:not([type="checkbox"]):not([type="radio"]),
body[data-variant="F"] select,
body[data-variant="F"] textarea {
  border-color: var(--line-dark) !important;
  background-color: color-mix(in srgb, var(--surface-strong) 76%, var(--surface)) !important;
  color: var(--text) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent);
}

:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .field > span,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .review-date-field > span,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-date-filter > span,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-sort > span,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .blogger-filter {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-date-filter > span,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-sort > span,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-filter,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-taxonomy-tab {
  white-space: nowrap;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-filters {
  flex-wrap: wrap;
  align-items: center;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-date-filter,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-sort {
  grid-template-columns: auto minmax(112px, 1fr);
  flex: 1 1 176px;
  min-width: 0;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-sort { margin-left: 0; }

:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .button,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-filter,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-taxonomy-tab,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .kline-period,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .kline-indicator,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .industry-chip,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-alert-clear,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .row-actions button {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: color-mix(in srgb, var(--surface) 92%, var(--surface-soft));
  color: var(--text);
  font-weight: 700;
  box-shadow: 0 1px 0 color-mix(in srgb, #000 8%, transparent);
  -webkit-tap-highlight-color: transparent;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .button:hover:not(:disabled):not(.button-primary),
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-filter:hover,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-taxonomy-tab:hover,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .kline-period:hover,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .kline-indicator:hover,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .industry-chip:hover,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-alert-clear:hover,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .row-actions button:hover {
  border-color: var(--accent-border);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--text) !important;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 10%, transparent);
  transform: translateY(-1px);
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .button:active:not(:disabled),
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-filter:active,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-taxonomy-tab:active,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .kline-period:active,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .kline-indicator:active,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .industry-chip:active {
  box-shadow: inset 0 1px 3px color-mix(in srgb, #000 12%, transparent);
  transform: translateY(0);
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .button-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 18%, transparent);
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .button-primary:hover:not(:disabled) {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
  color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 24%, transparent);
}
body[data-variant="F"] .button-primary,
body[data-variant="F"] .button-primary:hover:not(:disabled) { color: #111016; }

:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .view-switch {
  gap: 2px;
  border-color: var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--surface) 84%, var(--surface-soft));
  box-shadow: inset 0 1px 2px color-mix(in srgb, #000 7%, transparent);
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .view-switch button {
  border-radius: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .view-switch button:hover { color: var(--text); }
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .view-switch button.active {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: 0 1px 5px color-mix(in srgb, #000 14%, transparent);
}

:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) th button {
  border-radius: 2px;
  padding: 3px 5px;
  background: transparent;
  color: inherit;
  transition: background-color 160ms ease, color 160ms ease;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) th button:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) th button span { color: color-mix(in srgb, var(--muted) 72%, transparent); }

:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .content-post-tags span,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .content-detail-tags > span:not(.announcement-tag),
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .company-tags span,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .announcement-stocks span,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .stock-tag-list span,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .workspace-badge,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .cache-badge,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .permission-chip {
  min-height: 24px;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--accent-soft);
  color: var(--accent) !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .permission-checks input[type="checkbox"],
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .content-checkbox input[type="checkbox"] {
  appearance: none;
  width: 17px;
  min-width: 17px;
  height: 17px;
  min-height: 17px;
  margin: 0;
  border: 1px solid var(--line-dark);
  border-radius: 3px;
  background: var(--surface);
  box-shadow: inset 0 1px 2px color-mix(in srgb, #000 8%, transparent);
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .permission-checks input[type="checkbox"]:checked,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .content-checkbox input[type="checkbox"]:checked {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--surface);
}

@media (max-width: 760px) {
  :is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) input:not([type="checkbox"]):not([type="radio"]),
  :is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) select,
  :is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) textarea {
    min-height: 42px;
    font-size: 13px;
  }
  :is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .button,
  :is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .board-filter,
  :is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .board-taxonomy-tab,
  :is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .kline-period,
  :is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .kline-indicator {
    min-height: 42px;
  }
}

/* Explicit preview mode also runs in a wide browser, so its control sizing
   and palette cannot depend on the viewport media query above. */
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) input:not([type="checkbox"]):not([type="radio"]),
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) select,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) textarea {
  min-height: 42px;
  font-size: 13px;
}
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .button,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .board-filter,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .board-taxonomy-tab,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .kline-period,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .kline-indicator {
  min-height: 42px !important;
}

/* Final interaction audit for A/C/F. Labels stay inside their controls,
   cards keep long values within their columns, and every horizontal list has
   a visible, draggable affordance when it overflows. */
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) button {
  line-height: 1.2;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .button,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .tab,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-filter,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-taxonomy-tab,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .kline-period,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .kline-indicator,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .industry-chip,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .media-source-item,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .blogger-source-item,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .blogger-open,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .select-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .media-source-item,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .blogger-source-item {
  justify-content: space-between;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .blogger-detail-header > div {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .blogger-detail-header h3 {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) #bloggerPlatforms {
  display: block;
  min-width: 0;
  max-width: 100%;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* The sticky workspace rail needs a surface edge against every mobile
   background, including the editorial C palette. */
body.mobile-layout[data-variant] .workspace-nav {
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: var(--surface) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, #000 14%, transparent) !important;
}
body.mobile-layout[data-variant] .workspace-nav.is-collapsed {
  box-shadow: 0 5px 15px color-mix(in srgb, #000 16%, transparent) !important;
}

/* Source, blogger, industry, and filter rows use the same custom rail as the
   data tables. Keep a quiet track visible so additional choices are obvious. */
.media-source-list + .table-scrollbar,
.blogger-source-list + .table-scrollbar,
.mobile-industry-chips + .table-scrollbar,
.tabs + .table-scrollbar,
.news-mode-tabs + .table-scrollbar {
  margin-right: 8px;
  margin-left: 8px;
}
.news-mode-tabs + .table-scrollbar {
  --scroll-thumb: var(--accent);
  --scroll-thumb-hover: var(--accent);
}
.media-source-list + .table-scrollbar.is-overflow,
.blogger-source-list + .table-scrollbar.is-overflow,
.mobile-industry-chips + .table-scrollbar.is-overflow,
.tabs + .table-scrollbar.is-overflow,
.news-mode-tabs + .table-scrollbar.is-overflow {
  height: 6px;
  margin-top: 1px;
  margin-bottom: 3px;
  opacity: .72;
  pointer-events: auto;
}
.media-source-list + .table-scrollbar.is-overflow.is-active,
.blogger-source-list + .table-scrollbar.is-overflow.is-active,
.mobile-industry-chips + .table-scrollbar.is-overflow.is-active,
.tabs + .table-scrollbar.is-overflow.is-active,
.news-mode-tabs + .table-scrollbar.is-overflow.is-active { opacity: 1; }

.media-source-panel.collapsed .media-source-list + .table-scrollbar {
  display: none;
}

/* Keep both filters on one row, with room for the full selected direction. */
body.mobile-layout[data-variant] .announcement-tools {
  grid-template-columns: minmax(0, 1.35fr) minmax(110px, 1fr);
}
body.mobile-layout[data-variant] .announcement-tools .field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
}
body.mobile-layout[data-variant] .announcement-tools .field > span {
  width: auto;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .select-trigger {
  justify-content: space-between;
}

body.mobile-layout[data-variant="A"] .valuation-header {
  background: #0b2d24;
}
body.mobile-layout[data-variant="A"] .valuation-header h1,
body.mobile-layout[data-variant="A"] .account-summary strong { color: #fff; }
body.mobile-layout[data-variant="A"] .valuation-header .eyebrow { color: #8bcdb3; }
body.mobile-layout[data-variant="A"] .workspace-tab { color: var(--muted); }
body.mobile-layout[data-variant="A"] .workspace-tab:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
body.mobile-layout[data-variant="A"] .workspace-tab.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-color: var(--accent-border) !important;
}

/* End-of-file overrides keep the final interaction contract ahead of the
   variant-specific legacy rules above. */
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .content-post-row {
  margin-right: -18px !important;
  margin-left: -18px !important;
  padding-right: 18px !important;
  padding-left: 18px !important;
}
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .content-post-row {
  margin-right: -16px !important;
  margin-left: -16px !important;
  padding-right: 16px !important;
  padding-left: 16px !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .content-post-row:hover,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .content-post-row:focus-visible {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface)) !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .workspace-tab {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}
body.mobile-layout[data-variant] .workspace-tab { min-width: 92px; }
:is(body[data-variant="A"], body[data-variant="C"]) .announcement-tag.positive {
  border: 1px solid #e2aaa5 !important;
  background: #fff1f0 !important;
  color: #a93632 !important;
}
:is(body[data-variant="A"], body[data-variant="C"]) .announcement-tag.negative {
  border: 1px solid #a9cbbb !important;
  background: #edf8f3 !important;
  color: #256b57 !important;
}
:is(body[data-variant="A"], body[data-variant="C"]) .announcement-tag.neutral {
  border: 1px solid #c6cdd0 !important;
  background: #f0f2f3 !important;
  color: #5d6870 !important;
}
body[data-variant="F"] .announcement-tag.positive {
  border: 1px solid #86535a !important;
  background: #332024 !important;
  color: #ef9a9a !important;
}
body[data-variant="F"] .announcement-tag.negative {
  border: 1px solid #4b756a !important;
  background: #1e302d !important;
  color: #9fd2be !important;
}
body[data-variant="F"] .announcement-tag.neutral {
  border: 1px solid #565d66 !important;
  background: #25292f !important;
  color: #b5bbc2 !important;
}
.stock-session-action .button {
  border-color: #d8b0aa;
  background: #fff8f7;
  color: #8a3d38;
}
.stock-session-action .button:hover:not(:disabled) {
  border-color: #b96c64;
  background: #fff0ee;
  color: #8a3d38;
}
body[data-variant="F"] .stock-session-action .button {
  border-color: #75434a;
  background: #23191d;
  color: #ef9a9a;
}
body[data-variant="F"] .stock-session-action .button:hover:not(:disabled) {
  border-color: #a85f68;
  background: #332024;
  color: #ef9a9a;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .stock-session-action .button {
  border-color: #d8aaa5 !important;
  background: transparent !important;
  color: #99443f !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .stock-session-action .button:hover:not(:disabled) {
  border-color: #b9645d !important;
  background: #fff1ef !important;
  color: #8f3935 !important;
}

/* Keep account exit separate from view and membership controls on the
   valuation page too. This mirrors the stock detail action hierarchy. */
.account-actions { gap: 16px; }
.account-session-action {
  margin-left: 2px;
  padding-left: 16px;
  border-left: 1px solid var(--line);
}
.account-session-action .button {
  border-color: #d8aaa5;
  background: transparent;
  color: #99443f;
}
.account-session-action .button:hover:not(:disabled) {
  border-color: #b9645d;
  background: #fff1ef;
  color: #8f3935;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .account-session-action .button {
  border-color: #d8aaa5 !important;
  background: transparent !important;
  color: #99443f !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .account-session-action .button:hover:not(:disabled) {
  border-color: #b9645d !important;
  background: #fff1ef !important;
  color: #8f3935 !important;
}
@media (max-width: 760px) {
  body.mobile-layout .account-session-action {
    flex: 0 0 auto;
    padding-left: 10px;
  }
}
body.mobile-layout[data-variant="F"] .account-session-action .button {
  border-color: #75434a;
  background: #23191d;
  color: #ef9a9a;
}
body.mobile-layout[data-variant="F"] .account-session-action .button:hover:not(:disabled) {
  border-color: #a85f68;
  background: #332024;
  color: #ef9a9a;
}
body[data-variant="F"] .stock-session-action .button,
body[data-variant="F"] .account-session-action .button {
  border-color: #75434a !important;
  background: #23191d !important;
  color: #ef9a9a !important;
}
body[data-variant="F"] .stock-session-action .button:hover:not(:disabled),
body[data-variant="F"] .account-session-action .button:hover:not(:disabled) {
  border-color: #a85f68 !important;
  background: #332024 !important;
  color: #ef9a9a !important;
}

/* Explicit mobile preview overrides must remain after all theme rules. */
body.mobile-layout[data-variant] .workspace-nav {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.mobile-layout[data-variant] .workspace-tab {
  display: flex !important;
  flex: none !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  border: 0 !important;
  border-right: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  padding: 5px 3px !important;
  background: transparent !important;
  color: var(--muted) !important;
}
body.mobile-layout[data-variant] .workspace-tab:nth-child(3n),
body.mobile-layout[data-variant] .workspace-tab:last-of-type { border-right: 0 !important; }
body.mobile-layout[data-variant] .workspace-tab:nth-last-child(-n+3) { border-bottom: 0 !important; }
body.mobile-layout[data-variant] .workspace-tab:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent) !important;
  color: var(--text) !important;
}
body.mobile-layout[data-variant] .workspace-tab.active {
  border-bottom-color: var(--accent) !important;
  background: transparent !important;
  color: var(--accent) !important;
  box-shadow: inset 0 -2px var(--accent) !important;
}
body.mobile-layout[data-variant] .workspace-nav-toggle {
  grid-column: 1 / -1;
  display: flex !important;
  border: 0 !important;
  background: transparent !important;
}
body.mobile-layout[data-variant] .workspace-nav.is-collapsed {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  justify-content: center;
  height: 34px !important;
  min-height: 34px !important;
  padding: 4px 8px !important;
  border: 1px solid var(--line) !important;
}
body.mobile-layout[data-variant] .workspace-nav.is-collapsed .workspace-tab,
body.mobile-layout[data-variant] .workspace-nav.is-collapsed .workspace-nav-collapse { display: none !important; }
body.mobile-layout[data-variant] .workspace-nav.is-collapsed .workspace-nav-expand {
  display: flex !important;
  width: 74px !important;
  min-height: 24px !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.mobile-layout[data-variant] .workspace-nav:not(.is-collapsed) .workspace-nav-expand {
  display: none !important;
}

/* Navigation refinement: A/C keep their editorial rail on desktop, while F
   alone uses equal-width desktop tabs. Mobile keeps every route discoverable
   in a compact grid, with rules instead of card-like tiles. */
@media (min-width: 761px) {
  :is(body[data-variant="A"], body[data-variant="C"]) .workspace-tab {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  :is(body[data-variant="A"], body[data-variant="C"]) .workspace-tab:hover {
    background: transparent !important;
    color: var(--text) !important;
  }
  :is(body[data-variant="A"], body[data-variant="C"]) .workspace-tab.active {
    border: 0 !important;
    border-bottom: 2px solid var(--accent) !important;
    background: transparent !important;
    color: var(--accent) !important;
  }
  body[data-variant="F"] .workspace-nav {
    gap: 0;
    overflow: hidden;
  }
  body[data-variant="F"] .workspace-tab {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    border-radius: 2px;
  }
}

/* Final navigation polish: draw the mobile rail's rules at the container
   level so incomplete grid rows still have continuous dividers. */
body.mobile-layout[data-variant] .workspace-nav {
  position: relative !important;
  grid-template-rows: repeat(3, 46px) 18px;
  isolation: isolate;
  background: color-mix(in srgb, var(--surface) 84%, transparent) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.mobile-layout[data-variant] .workspace-nav::before,
body.mobile-layout[data-variant] .workspace-nav::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
body.mobile-layout[data-variant] .workspace-nav::before {
  top: 1px;
  right: 1px;
  bottom: 19px;
  left: 1px;
  z-index: 0;
  background:
    linear-gradient(to right,
      transparent 0,
      transparent calc(33.333% - .5px),
      var(--line) calc(33.333% - .5px),
      var(--line) calc(33.333% + .5px),
      transparent calc(33.333% + .5px),
      transparent calc(66.666% - .5px),
      var(--line) calc(66.666% - .5px),
      var(--line) calc(66.666% + .5px),
      transparent calc(66.666% + .5px));
}
body.mobile-layout[data-variant] .workspace-nav::after {
  top: 1px;
  right: 1px;
  left: 1px;
  height: 138px;
  z-index: 0;
  background:
    linear-gradient(to bottom,
      transparent 45px,
      var(--line) 45px,
      var(--line) 46px,
      transparent 46px 91px,
      var(--line) 91px,
      var(--line) 92px,
      transparent 92px 137px,
      var(--line) 137px,
      var(--line) 138px,
      transparent 138px);
}
body.mobile-layout[data-variant] .workspace-tab,
body.mobile-layout[data-variant] .workspace-nav-toggle {
  position: relative;
  z-index: 1;
}
body.mobile-layout[data-variant] .workspace-tab {
  border-right: 0 !important;
  border-bottom: 0 !important;
}
body.mobile-layout[data-variant] .workspace-tab.active {
  border-bottom: 2px solid var(--accent) !important;
  box-shadow: none !important;
}
body.mobile-layout[data-variant] .workspace-nav-toggle {
  border-top: 0 !important;
}
body.mobile-layout[data-variant] .workspace-nav.is-collapsed {
  grid-template-rows: none !important;
}
body.mobile-layout[data-variant] .workspace-nav.is-collapsed::before,
body.mobile-layout[data-variant] .workspace-nav.is-collapsed::after {
  display: none;
}

/* Keep hover text readable in A's dark navigation and give every desktop
   rail the same translucent surface treatment used while scrolling on mobile. */
body[data-variant] .workspace-nav {
  background: color-mix(in srgb, var(--workspace-nav-base) var(--workspace-nav-opacity, 50%), transparent) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body[data-variant="A"] { --workspace-nav-base: #193128; }
body[data-variant="C"] { --workspace-nav-base: var(--surface); }
body[data-variant="F"] { --workspace-nav-base: var(--surface-strong); }
body[data-variant="A"] .workspace-nav {
  background: color-mix(in srgb, var(--workspace-nav-base) var(--workspace-nav-opacity, 50%), transparent) !important;
}
body.mobile-layout[data-variant] .workspace-nav {
  background: color-mix(in srgb, var(--workspace-nav-base) var(--workspace-nav-opacity, 50%), transparent) !important;
}
body[data-variant="A"] .workspace-tab:hover {
  background: #11382e !important;
  color: #fff !important;
}
body.mobile-layout[data-variant="A"] .workspace-tab:hover {
  background: color-mix(in srgb, #8bcdb3 18%, #fff 82%) !important;
  color: #15533f !important;
}
body.mobile-layout[data-variant] .workspace-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 40 !important;
}
body[data-variant="A"] .workspace-tab.active {
  border-bottom: 2px solid #8bcdb3 !important;
  background: #123d32 !important;
  color: #fff !important;
  box-shadow: none !important;
}
body.mobile-layout[data-variant="A"] .workspace-tab.active {
  border-bottom: 2px solid #17694f !important;
  background: color-mix(in srgb, #8bcdb3 18%, #fff 82%) !important;
  color: #17694f !important;
  box-shadow: none !important;
}

/* Counts add information without changing the control's hierarchy. */
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35em;
  margin-left: 4px;
  color: inherit;
  font-size: .82em;
  font-variant-numeric: tabular-nums;
  opacity: .78;
}

/* Semantic market states are independent from each theme's accent color. */
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-status.sealed,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .review-event-status.sealed,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-count.sealed {
  border-color: #d78383 !important;
  background: #fff0f0 !important;
  color: #b33a3a !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-status.broken,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .review-event-status.broken,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .review-event-status.resealed,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-count.broken {
  border-color: #8fc3a8 !important;
  background: #edf8f1 !important;
  color: #23734d !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-sector-row,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-sector-row.active {
  color: var(--text) !important;
}

/* A keeps the same transparent green rail on desktop and mobile. */
body[data-variant="A"] .workspace-tab {
  color: #b7c8c0 !important;
}
body[data-variant="A"] .workspace-tab:hover {
  background: rgba(139, 205, 179, .12) !important;
  color: #effaf5 !important;
}
body[data-variant="A"] .workspace-tab.active {
  border-bottom-color: #8bcdb3 !important;
  background: rgba(139, 205, 179, .22) !important;
  color: #fff !important;
}
body.mobile-layout[data-variant="A"] .workspace-tab {
  color: #b7c8c0 !important;
}
body.mobile-layout[data-variant="A"] .workspace-tab:hover {
  background: rgba(139, 205, 179, .12) !important;
  color: #effaf5 !important;
}
body.mobile-layout[data-variant="A"] .workspace-tab.active {
  border-bottom-color: #8bcdb3 !important;
  background: rgba(139, 205, 179, .22) !important;
  color: #fff !important;
}

/* A's rail keeps its translucent surface, while each interaction state gets
   an opaque green tile so the divider gradients never bleed through. */
body[data-variant="A"] .workspace-tab,
body.mobile-layout[data-variant="A"] .workspace-tab {
  color: #d3e8df !important;
}
body[data-variant="A"] .workspace-tab:hover,
body.mobile-layout[data-variant="A"] .workspace-tab:hover {
  background: #2a604e !important;
  color: #f7fffb !important;
  text-shadow: none !important;
}
body[data-variant="A"] .workspace-tab.active,
body.mobile-layout[data-variant="A"] .workspace-tab.active {
  border-bottom-color: #9cd9bf !important;
  background: #1f4f40 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* F uses a two-column KPI matrix in explicit mobile preview mode as well as
   in a physically narrow viewport. */
body.mobile-layout[data-variant="F"] .research-kpis {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

/* Keep F's semantic labels on its dark surface. These rules come after the
   shared semantic palette so the light-theme defaults cannot override them. */
body[data-variant="F"] .announcement-tag.positive,
body[data-variant="F"] .board-status.sealed,
body[data-variant="F"] .review-event-status.sealed,
body[data-variant="F"] .board-count.sealed {
  border-color: #86535a !important;
  background: #332024 !important;
  color: #ef9a9a !important;
}
body[data-variant="F"] .announcement-tag.negative,
body[data-variant="F"] .board-status.broken,
body[data-variant="F"] .review-event-status.broken,
body[data-variant="F"] .board-count.broken {
  border-color: #4b756a !important;
  background: #1e302d !important;
  color: #9fd2be !important;
}
body[data-variant="F"] .announcement-tag.neutral,
body[data-variant="F"] .review-event-status.resealed {
  border-color: #565d66 !important;
  background: #25292f !important;
  color: #b5bbc2 !important;
}

/* A's navigation sits directly on the institutional canvas. State contrast
   comes from the item itself, while the rail keeps the page background. */
body[data-variant="A"] .workspace-nav,
body.mobile-layout[data-variant="A"] .workspace-nav {
  background: color-mix(in srgb, var(--workspace-nav-base) var(--workspace-nav-opacity, 50%), transparent) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
body[data-variant="A"] .workspace-tab,
body.mobile-layout[data-variant="A"] .workspace-tab {
  background: transparent !important;
  color: #49665a !important;
}
body[data-variant="A"] .workspace-tab:hover,
body.mobile-layout[data-variant="A"] .workspace-tab:hover {
  background: #d5e5dd !important;
  color: #154d39 !important;
}
body[data-variant="A"] .workspace-tab.active,
body.mobile-layout[data-variant="A"] .workspace-tab.active {
  border-bottom-color: #126347 !important;
  background: #c9ddd2 !important;
  color: #0e4934 !important;
}

/* The row keeps its text inset, but its interaction surface reaches the
   section edges so hover does not leave artificial side gaps. */
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-alert-list,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .media-source-list,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .blogger-source-list {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-alert-row {
  box-sizing: border-box;
  padding-left: 18px !important;
  padding-right: 18px !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .media-source-item,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .blogger-source-item {
  box-sizing: border-box;
  padding-left: 19px !important;
  padding-right: 19px !important;
}

/* Keep the content inset for bordered source controls. The interaction
   surface is expanded independently so the highlight can reach the rail
   edges without moving the label or count. */
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-alert-list {
  padding-left: 14px !important;
  padding-right: 14px !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .media-source-list {
  padding-left: 10px !important;
  padding-right: 10px !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .blogger-source-list {
  padding-left: 10px !important;
  padding-right: 10px !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-alert-row { padding: 10px 4px !important; }
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .media-source-item { padding: 0 9px !important; }
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .blogger-source-item { padding: 7px 9px !important; }
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-alert-row,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .media-source-item,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .blogger-source-item {
  position: relative;
  isolation: isolate;
  background: transparent !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-alert-row::before,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .media-source-item::before,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .blogger-source-item::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: -10px;
  bottom: 0;
  left: -10px;
  border-radius: inherit;
  background: transparent;
  transition: background-color 160ms ease;
  pointer-events: none;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-alert-row::before { right: -14px; left: -14px; }
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-alert-row:hover::before,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .media-source-item:hover::before,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .blogger-source-item:hover::before,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-alert-row:focus-visible::before,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .media-source-item:focus-visible::before,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .blogger-source-item:focus-visible::before {
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-alert-row > *,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .media-source-item > *,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .blogger-source-item > * {
  position: relative;
  z-index: 1;
}

/* Mobile source rails keep their content inset. The state surface expands
   independently so selected/hover color still reaches the panel edges. */
body.mobile-layout[data-variant] .media-source-list { padding-left: 10px !important; padding-right: 10px !important; }
body.mobile-layout[data-variant] .blogger-source-list { padding-left: 10px !important; padding-right: 10px !important; }
body.mobile-layout[data-variant] .media-source-item { padding: 0 9px !important; }
body.mobile-layout[data-variant] .blogger-source-item { padding: 7px 9px !important; }
body.mobile-layout[data-variant] .media-source-item::before { right: 0; left: 0; }
body.mobile-layout[data-variant] .blogger-source-item::before { right: -10px; left: -10px; }

/* Stock detail: mobile sections inherit the active theme instead of the
   legacy dark fallback that previously obscured A/C text. */
body.stock-layout.mobile-layout[data-variant="A"] .stock-overview-card,
body.stock-layout.mobile-layout[data-variant="A"] .stock-context-section,
body.stock-layout.mobile-layout[data-variant="A"] .stock-chart-section,
body.stock-layout.mobile-layout[data-variant="A"] .stock-auction-section,
body.stock-layout.mobile-layout[data-variant="A"] .stock-board-section,
body.stock-layout.mobile-layout[data-variant="C"] .stock-overview-card,
body.stock-layout.mobile-layout[data-variant="C"] .stock-context-section,
body.stock-layout.mobile-layout[data-variant="C"] .stock-chart-section,
body.stock-layout.mobile-layout[data-variant="C"] .stock-auction-section,
body.stock-layout.mobile-layout[data-variant="C"] .stock-board-section,
body.stock-layout.mobile-layout[data-variant="F"] .stock-overview-card,
body.stock-layout.mobile-layout[data-variant="F"] .stock-context-section,
body.stock-layout.mobile-layout[data-variant="F"] .stock-chart-section,
body.stock-layout.mobile-layout[data-variant="F"] .stock-auction-section,
body.stock-layout.mobile-layout[data-variant="F"] .stock-board-section {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
body.stock-layout.mobile-layout[data-variant] .stock-metrics > div,
body.stock-layout.mobile-layout[data-variant] .stock-auction-metrics > div {
  background: var(--surface-soft) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
}
body.stock-layout.mobile-layout[data-variant] .stock-metrics span,
body.stock-layout.mobile-layout[data-variant] .stock-auction-metrics span,
body.stock-layout.mobile-layout[data-variant] .stock-context-row span,
body.stock-layout.mobile-layout[data-variant] .stock-context-row small,
body.stock-layout.mobile-layout[data-variant] .stock-classification-line span {
  color: var(--muted) !important;
}
body.stock-layout.mobile-layout[data-variant] .stock-metrics strong,
body.stock-layout.mobile-layout[data-variant] .stock-auction-metrics strong,
body.stock-layout.mobile-layout[data-variant] .stock-context-row strong,
body.stock-layout.mobile-layout[data-variant] .stock-classification-line strong,
body.stock-layout.mobile-layout[data-variant] .stock-board-summary b {
  color: var(--text) !important;
}
body.stock-layout.mobile-layout[data-variant] .stock-context-row,
body.stock-layout.mobile-layout[data-variant] .stock-board-row {
  border-color: var(--line) !important;
  color: var(--text) !important;
}
body.stock-layout.mobile-layout[data-variant] .stock-context-row:hover strong { color: var(--accent) !important; }
body.stock-layout.mobile-layout[data-variant] .stock-tag-list span {
  border-color: var(--accent-border) !important;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}
body.stock-layout.mobile-layout[data-variant] .kline-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  padding: 10px 14px 0;
  color: var(--muted) !important;
  line-height: 1.5;
}
body.stock-layout.mobile-layout[data-variant] .kline-summary b { color: var(--text) !important; }
body.stock-layout.mobile-layout[data-variant] .kline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 8px 14px 4px;
  color: var(--muted) !important;
  line-height: 1.5;
}
body.stock-layout.mobile-layout[data-variant] .kline-hover { flex: 1 1 100%; min-width: 0; }
body.stock-layout.mobile-layout[data-variant] .stock-kline-wrap { min-height: 440px; height: 440px; }
body.stock-layout.mobile-layout[data-variant] .stock-kline-periods,
body.stock-layout.mobile-layout[data-variant] .stock-kline-indicators {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
body.stock-layout.mobile-layout[data-variant] .stock-kline-periods::-webkit-scrollbar,
body.stock-layout.mobile-layout[data-variant] .stock-kline-indicators::-webkit-scrollbar { display: none; }
body.stock-layout.mobile-layout[data-variant] .stock-kline-toolbar .kline-period,
body.stock-layout.mobile-layout[data-variant] .kline-indicator { flex: 0 0 auto; min-width: 54px; }

/* Pagination remains compact on every prototype, including explicit mobile
   mode where the older 42px button rule has higher specificity. */
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .pagination,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .mobile-pagination,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .announcement-pagination,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .content-pagination { gap: 8px; }
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .pagination .button,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .mobile-pagination .button,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .announcement-pagination .button,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .content-pagination .button {
  min-width: 0 !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

/* Keep mobile KPI cards readable as a two by two information block across
   every retained prototype. */
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .research-kpis {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

/* A shares C's quiet canvas rail. The panel stays translucent while its
   labels and active state use explicit contrast. */
body[data-variant="A"] .workspace-nav,
body.mobile-layout[data-variant="A"] .workspace-nav {
  background: color-mix(in srgb, var(--bg) var(--workspace-nav-opacity, 50%), transparent) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
body[data-variant="A"] .workspace-tab,
body.mobile-layout[data-variant="A"] .workspace-tab {
  background: transparent !important;
  color: var(--text) !important;
}
body[data-variant="A"] .workspace-tab:hover,
body.mobile-layout[data-variant="A"] .workspace-tab:hover {
  background: color-mix(in srgb, var(--accent) 9%, var(--bg)) !important;
  color: var(--accent) !important;
}
body[data-variant="A"] .workspace-tab.active,
body.mobile-layout[data-variant="A"] .workspace-tab.active {
  background: color-mix(in srgb, var(--accent) 15%, var(--bg)) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Mobile stock header: give the security name its own full-width line so a
   long title cannot be squeezed beside the action buttons. */
body.stock-layout.mobile-layout .stock-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
}
body.stock-layout.mobile-layout .stock-title-block {
  min-width: 0;
  width: 100%;
}
body.stock-layout.mobile-layout .stock-header h1 {
  width: 100%;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.15;
}
body.stock-layout.mobile-layout .stock-subtitle {
  max-width: none;
  white-space: normal;
  line-height: 1.45;
}
body.stock-layout.mobile-layout .stock-header-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  margin-top: 0 !important;
  align-items: center;
}
body.stock-layout.mobile-layout .stock-primary-actions { min-width: 0; }

/* K-line controls keep a stable box. The shared motion system previously
   translated hovered buttons, which made the toolbar appear to jump and clip
   against the chart canvas. */
body.stock-layout.mobile-layout .stock-kline-toolbar .kline-period,
body.stock-layout.mobile-layout .stock-kline-toolbar .kline-indicator {
  min-height: 36px !important;
  height: 36px;
  transform: none !important;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease !important;
}
body.stock-layout.mobile-layout .stock-kline-toolbar .kline-period:hover,
body.stock-layout.mobile-layout .stock-kline-toolbar .kline-period:active,
body.stock-layout.mobile-layout .stock-kline-toolbar .kline-indicator:hover,
body.stock-layout.mobile-layout .stock-kline-toolbar .kline-indicator:active {
  transform: none !important;
}
body.stock-layout.mobile-layout .stock-kline-wrap {
  min-height: 500px !important;
  height: 500px !important;
  overflow: hidden;
}
body.stock-layout.mobile-layout #stockKlineChart {
  min-height: 480px !important;
  height: 480px !important;
}

/* Media pagination belongs to the result surface. Collapsing the source rail
   reduces the first grid track so the result surface takes the freed width. */
.media-news-browser {
  grid-template-columns: 220px minmax(0, 1fr) minmax(280px, 340px);
}
.media-news-browser.sources-collapsed {
  grid-template-columns: 42px minmax(0, 1fr) minmax(280px, 340px);
}
.announcement-results {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.announcement-results .announcement-list { min-width: 0; }
.announcement-results .announcement-pagination {
  width: 100%;
  box-sizing: border-box;
}

/* Match the live-alert row treatment: the highlight fills the whole row,
   while the row's text and count padding remain unchanged. */
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-sector-row:hover,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-sector-row:focus-visible,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-sector-row.active {
  background: var(--surface-soft) !important;
}

@media (max-width: 760px) {
  .media-news-browser.sources-collapsed { display: block; }
  .announcement-results { width: 100%; }
  .announcement-results .announcement-pagination { justify-content: space-between; }
}

/* Board sector rows are buttons, so their state needs a visible surface in
   addition to the semantic red/green count colors. */
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-sector-row {
  position: relative;
  z-index: 0;
  width: 100%;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-sector-row:hover,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-sector-row:focus-visible {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface)) !important;
  border-bottom-color: color-mix(in srgb, var(--accent) 32%, var(--line)) !important;
  color: var(--accent) !important;
  outline: none;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-sector-row.active {
  background: color-mix(in srgb, var(--accent) 13%, var(--surface)) !important;
  border-bottom-color: var(--accent-border) !important;
  box-shadow: inset 3px 0 0 var(--accent);
  color: var(--accent) !important;
}

/* Board taxonomy rows use the same interaction layer as the live-alert list.
   Keep the content inset and let the state surface extend to the list edges. */
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-sector-row {
  isolation: isolate;
  background: transparent !important;
  box-shadow: none;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-sector-row::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: -18px;
  bottom: 0;
  left: -18px;
  border-radius: 2px;
  background: transparent;
  transition: background-color 160ms ease, box-shadow 160ms ease;
  pointer-events: none;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-sector-row:hover,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-sector-row:focus-visible,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-sector-row:active,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-sector-row.active {
  background: transparent !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-sector-row:hover::before,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-sector-row:focus-visible::before,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-sector-row:active::before {
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-sector-row.active::before {
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
  box-shadow: inset 3px 0 0 var(--accent);
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-sector-row > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 760px) {
  :is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-sector-row::before {
    right: -14px;
    left: -14px;
  }
}

/* Keep board taxonomy content inset while the state surface reaches the
   outside edge of the panel. This prevents the active marker from touching
   the label. */
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-sector-row {
  box-sizing: border-box;
  padding-right: 10px !important;
  padding-left: 10px !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-sector-row.active {
  box-shadow: none !important;
}

/* Announcement rows sit inside a padded list. Their hover surface belongs to
   the result panel, while the article copy keeps its existing inset. */
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .announcement-row {
  position: relative;
  isolation: isolate;
  background: transparent !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .announcement-row::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: -18px;
  bottom: 0;
  left: -18px;
  background: transparent;
  transition: background-color 160ms ease;
  pointer-events: none;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .announcement-row:hover::before,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .announcement-row:focus-within::before {
  background: var(--surface-soft);
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .announcement-row > * {
  position: relative;
  z-index: 1;
}

/* Source selection uses one full-width state surface. Removing the item's
   own background prevents hover and selected borders from stacking. */
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .media-source-item,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .media-source-item:hover,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .media-source-item.active {
  position: relative;
  isolation: isolate;
  background: transparent !important;
  border-color: transparent !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .media-source-item.active::before,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .media-source-item.active:hover::before {
  background: var(--accent-soft);
  box-shadow: none;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .media-source-item.active {
  border-color: var(--accent-border) !important;
}
@media (min-width: 761px) {
  :is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .media-source-item::before {
    right: -22px;
  }
}

/* A's translucent navigation still needs the same quiet lower divider as C
   and F so the panel edge remains visible against the canvas. */
body[data-variant="A"] .workspace-nav,
body.mobile-layout[data-variant="A"] .workspace-nav {
  border-bottom: 1px solid color-mix(in srgb, var(--line) 86%, transparent) !important;
}

/* A's logout action belongs to the dark masthead. Keep hover close to the
   panel color instead of switching to the light-theme danger surface. */
body[data-variant="A"] .account-session-action .button,
body.mobile-layout[data-variant="A"] .account-session-action .button {
  border-color: #3f6355 !important;
  background: #11382e !important;
  color: #d9eee4 !important;
}
body[data-variant="A"] .account-session-action .button:hover:not(:disabled),
body.mobile-layout[data-variant="A"] .account-session-action .button:hover:not(:disabled) {
  border-color: #5a806d !important;
  background: #1a4438 !important;
  color: #ffffff !important;
}

/* Center the valuation pager against the complete table width. The balanced
   side tracks keep it centered when the optional note is hidden or visible. */
.desktop-ranking .table-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  width: 100%;
}
.desktop-ranking .table-footer > #listNote {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
.desktop-ranking .table-footer > .pagination {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  justify-content: center;
}

@media (max-width: 760px) {
  :is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .announcement-row::before {
    right: -16px;
    left: -16px;
  }
}

/* Explicit mobile preview mode must use the phone composition even when the
   browser viewport itself remains wide. */
body.mobile-layout .dashboard-hero { align-items: flex-start; flex-direction: column; gap: 12px; padding: 20px 17px; }
body.mobile-layout .dashboard-hero h2 { font-size: 28px; }
body.mobile-layout .dashboard-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body.mobile-layout .dashboard-kpi { min-height: 142px; padding: 13px 12px; }
body.mobile-layout .dashboard-kpi > strong { font-size: 22px; }
body.mobile-layout .dashboard-grid { grid-template-columns: 1fr; gap: 10px; }
body.mobile-layout .dashboard-widget-wide { grid-column: auto; }
body.mobile-layout .dashboard-widget { padding: 15px; }
body.mobile-layout .dashboard-quick-grid { grid-template-columns: 1fr; }
body.mobile-layout .dashboard-quick-grid button { min-height: 70px; }
body.mobile-layout .valuation-shell { padding-bottom: 142px; }
body.mobile-layout .theme-side-dock { top: auto; right: auto; bottom: max(12px, env(safe-area-inset-bottom)); left: 50%; width: min(640px, calc(100% - 24px)); transform: translateX(-50%); padding: 8px; border-radius: 12px; }
body.mobile-layout .theme-side-dock-head { padding: 1px 4px 6px; }
body.mobile-layout .theme-side-dock-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding-top: 6px; }
body.mobile-layout .theme-choice { grid-template-columns: 22px minmax(0, 1fr); min-height: 34px; padding: 0 6px; }
body.mobile-layout .theme-choice span { font-size: 10px; }
body.mobile-layout .theme-side-dock-current { display: none; }
body.mobile-layout .theme-side-dock.is-collapsed { width: 42px; right: 12px; left: auto; transform: none; padding: 7px; }
body.mobile-layout .theme-side-dock.is-collapsed .theme-side-dock-collapse { min-height: 28px; }

/* G: Gemini reference workspace. This is an independent fourth scheme: a
   dark terminal canvas with frosted surfaces, restrained mint accent and
   stronger information hierarchy. A/C/F keep their existing rules. */
body[data-variant="G"] {
  color-scheme: dark;
  --bg: #080c12;
  --surface: #101722;
  --surface-soft: #182333;
  --surface-strong: #151d2b;
  --line: #29384b;
  --line-dark: #41536a;
  --text: #edf3f8;
  --muted: #91a0b4;
  --muted-dark: #73839a;
  --accent: #72d4b0;
  --accent-hover: #55ba98;
  --accent-soft: rgba(114, 212, 176, .14);
  --accent-border: #3f806e;
  --positive: #f07c91;
  --negative: #72d4b0;
  --focus: #9ae7ca;
  background: var(--bg);
  color: var(--text);
}
body[data-variant="G"] .valuation-shell { width: min(1480px, calc(100% - 56px)); padding-top: 24px; }
body[data-variant="G"] .valuation-header {
  min-height: 86px;
  padding: 16px 20px;
  border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  color: var(--text);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .2);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
body[data-variant="G"] .valuation-header h1 { color: var(--text); font-size: 30px; font-weight: 680; }
body[data-variant="G"] .valuation-header .eyebrow { color: var(--accent); }
body[data-variant="G"] .account-summary strong { color: var(--text); }
body[data-variant="G"] .account-summary span { color: var(--muted); }
body[data-variant="G"] .valuation-header .button,
body[data-variant="G"] .valuation-header .view-switch { border-color: var(--line); background: color-mix(in srgb, var(--surface-soft) 70%, transparent); color: var(--text); }
body[data-variant="G"] .valuation-header .view-switch button { color: var(--muted); }
body[data-variant="G"] .valuation-header .view-switch button.active { background: var(--accent); color: #07110e; }
body[data-variant="G"] .workspace-nav {
  margin-top: 12px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body[data-variant="G"] .workspace-tab { min-height: 42px; border: 0; border-radius: 7px; color: var(--muted); }
body[data-variant="G"] .workspace-tab:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--text); }
body[data-variant="G"] .workspace-tab.active { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 -2px var(--accent); }
body[data-variant="G"] .workspace-free { border-color: var(--accent-border); background: transparent; color: var(--accent); }
body[data-variant="G"] .control-bar,
body[data-variant="G"] .stat-strip,
body[data-variant="G"] .data-capability-strip,
body[data-variant="G"] .table-section,
body[data-variant="G"] .research-section,
body[data-variant="G"] .research-hero,
body[data-variant="G"] .research-kpis > div {
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--text);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
}
body[data-variant="G"] .research-hero h2,
body[data-variant="G"] .section-heading h2,
body[data-variant="G"] .section-heading h3,
body[data-variant="G"] .table-headline h2 { color: var(--text); }
body[data-variant="G"] .field input,
body[data-variant="G"] .field select,
body[data-variant="G"] input,
body[data-variant="G"] select { border-color: var(--line); background: var(--surface-soft); color: var(--text); }
body[data-variant="G"] .tab.active { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent); }
body[data-variant="G"] .table-headline { border-color: var(--line); background: var(--surface-strong); color: var(--text); }
body[data-variant="G"] table th { background: color-mix(in srgb, var(--surface-soft) 76%, transparent); color: var(--muted); }
body[data-variant="G"] table td { border-color: color-mix(in srgb, var(--line) 78%, transparent); color: var(--text); }
body[data-variant="G"] table tbody tr { background: var(--surface); }
body[data-variant="G"] table tbody tr:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
body[data-variant="G"] .button { border-color: var(--line); background: var(--surface-soft); color: var(--text); }
body[data-variant="G"] .button:hover:not(:disabled) { border-color: var(--accent-border); background: color-mix(in srgb, var(--accent) 10%, var(--surface-soft)); color: var(--text); }
body[data-variant="G"] .button-primary { border-color: var(--accent); background: var(--accent); color: #07110e; }
body[data-variant="G"] .positive,
body[data-variant="G"] .rise,
body[data-variant="G"] .up { color: var(--positive) !important; }
body[data-variant="G"] .negative,
body[data-variant="G"] .fall,
body[data-variant="G"] .down { color: var(--negative) !important; }
body[data-variant="G"] .dashboard-hero,
body[data-variant="G"] .dashboard-kpi,
body[data-variant="G"] .dashboard-widget { border-color: var(--line); background: color-mix(in srgb, var(--surface) 80%, transparent); }
body[data-variant="G"] .dashboard-widget h3,
body[data-variant="G"] .dashboard-kpi > strong { color: var(--text); }
body[data-variant="G"] .dashboard-sparkline i,
body[data-variant="G"] .dashboard-progress span,
body[data-variant="G"] .dashboard-meter span,
body[data-variant="G"] .sector-strength-bar i { background: var(--accent); }
body[data-variant="G"] .theme-side-dock { border-color: var(--line); background: color-mix(in srgb, var(--surface) 76%, transparent); }
body[data-variant="G"] .theme-choice.active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
body.mobile-layout[data-variant="G"] .valuation-shell { width: 100%; padding: 12px 12px 142px; }
body.mobile-layout[data-variant="G"] .valuation-header { min-height: 78px; padding: 14px; }
body.mobile-layout[data-variant="G"] .workspace-nav { margin: 0 -12px; border-radius: 0; }
body.mobile-layout[data-variant="G"] .workspace-tab { min-height: 42px; }

/* New research workspaces use the active theme contract for every state. */
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .permission-account-state,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .permission-feature-status.free,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .permission-feature-status.unlocked,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .selection-subtab.active {
  border-color: var(--accent-border, var(--accent)) !important;
  background: var(--accent-soft, color-mix(in srgb, var(--accent) 10%, var(--surface))) !important;
  color: var(--accent) !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .permission-feature-row:hover,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .permission-feature-row:focus-visible,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .selection-subtab:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface)) !important;
  color: var(--accent) !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .permission-feature-status.locked,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .selection-subtab .workspace-lock {
  border-color: var(--line) !important;
  background: var(--surface-soft) !important;
  color: var(--muted) !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .permission-feature-row.is-locked {
  color: var(--muted);
}

/* Forced mobile previews must retain the same semantic palette as desktop. */
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .permission-account-state,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .permission-feature-status.free,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .permission-feature-status.unlocked {
  border-color: var(--accent-border, var(--accent)) !important;
  background: var(--accent-soft, color-mix(in srgb, var(--accent) 10%, var(--surface))) !important;
  color: var(--accent) !important;
}
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .permission-feature-status.locked {
  border-color: var(--line) !important;
  background: transparent !important;
  color: var(--muted) !important;
}

/* Hover and selected fills span the outer permission row without moving its content. */
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .permission-feature-row {
  width: calc(100% + 36px);
  margin-inline: -18px;
  padding-inline: 18px;
}
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .permission-feature-row {
  width: calc(100% + 28px);
  margin-inline: -14px;
  padding-inline: 14px;
}

/* The A/C/F notification tray must sit above the sticky workspace rail. */
body[data-variant] .notification-panel { z-index: 80; }
body.mobile-layout[data-variant] .notification-panel { position: fixed; top: 12px; right: 12px; z-index: 90; }

/* Permission summaries and rows use the active A/C/F surface contract. The
   old mobile fallback used a dark green surface for every variant, which made
   light-theme text and hover states lose contrast. */
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .permission-summary > div,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .permission-summary > div {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .permission-summary span,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .permission-summary span {
  color: var(--muted) !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .permission-summary strong,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .permission-summary strong {
  color: var(--text) !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .permission-feature-main strong,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .permission-feature-main strong {
  color: var(--text) !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .permission-feature-main small,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .permission-feature-main small {
  color: var(--muted) !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .permission-feature-row:hover .permission-feature-main strong,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .permission-feature-row:focus-visible .permission-feature-main strong,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .permission-feature-row:hover .permission-feature-main strong,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .permission-feature-row:focus-visible .permission-feature-main strong {
  color: var(--accent) !important;
}

/* Keep permission content readable even when the legacy mobile fallback or a
   future component rule is loaded after the base theme. The card surface and
   the text colors are intentionally explicit for all A/C/F previews. */
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .permission-summary,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .permission-feature-section {
  color: var(--text) !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .permission-feature-row {
  color: var(--text) !important;
  text-shadow: none;
}
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .permission-summary > div {
  min-height: 76px;
}
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .permission-summary strong {
  overflow-wrap: anywhere;
  white-space: normal;
}

/* A/C/F mobile contract: the legacy phone rules above predate the theme
   tokens and used a dark green surface for every variant. Re-apply the active
   palette at the end of the cascade so light themes stay light and F keeps
   its own terminal surfaces. */
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .research-section,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .research-hero,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .watchlist-section,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .watchlist-toolbar,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .watchlist-table,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .research-kpis > div,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .company-stock-jump,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .company-analysis-form,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .announcement-tools,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .content-tools,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .board-filters,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .kline-tools,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .stock-overview-card,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .stock-context-section {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .watchlist-toolbar,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .company-stock-jump,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .company-analysis-form,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .announcement-tools,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .content-tools,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .kline-tools {
  background: var(--surface-soft) !important;
}
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .watchlist-toolbar input,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .watchlist-toolbar select,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .company-stock-jump input,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .company-analysis-form input,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .company-analysis-form select,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .company-analysis-form textarea,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .announcement-tools input,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .announcement-tools select,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .content-tools input,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .content-tools select,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .kline-tools input,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .kline-tools select {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .watchlist-stock,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .watchlist-stock strong,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .watchlist-summary strong,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .watchlist-empty strong {
  color: var(--text) !important;
}
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .watchlist-stock small,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .watchlist-industry,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .watchlist-empty,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .watchlist-summary,
:is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .research-hero p:not(.eyebrow) {
  color: var(--muted) !important;
}

/* Header controls become two deliberate rows on phones. The view switch is
   first; notification, admin, and session actions follow beneath it. */
@media (max-width: 760px) {
  :is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .valuation-header .account-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  :is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .valuation-header .view-switch {
    grid-column: 1 / -1;
    width: 100%;
  }
  :is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .valuation-header .view-switch button { flex: 1 1 0; }
  :is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .valuation-header .account-summary,
  :is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .valuation-header .account-permission-button,
  :is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .valuation-header .admin-entry { display: none !important; }
  :is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .valuation-header .notification-button { grid-column: 1; justify-self: start; }
  :is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .valuation-header .account-session-action { grid-column: 2; justify-self: end; }

  /* The generated collapse control follows every workspace option as its own
     compact row, rather than sharing a grid cell with a route. */
  :is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .workspace-nav:not(.is-collapsed) .workspace-nav-collapse {
    grid-column: 1 / -1;
    min-height: 30px !important;
    border-top: 0 !important;
    color: var(--muted) !important;
  }

  :is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .research-hero-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
  }
  :is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) .research-hero-title h2 { min-width: 0; }
  :is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) #researchView .research-hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    margin-top: 12px;
  }
  :is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) #researchView .research-hero-actions .review-date-field { min-width: 0; }
  :is(body.mobile-layout[data-variant="A"], body.mobile-layout[data-variant="C"], body.mobile-layout[data-variant="F"]) #researchView .research-hero-actions .button { min-width: 72px; }
}

/* The announcement rows are informational on A/C/F; do not retain the old
   selected marker. Their content padding stays owned by the row itself. */
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .announcement-row.selected {
  box-shadow: none !important;
}

/* A single radius contract for non-dashboard ACF surfaces. The dashboard
   already uses this rounded direction; controls use a slightly tighter cut. */
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) {
  --acf-surface-radius: 10px;
  --acf-control-radius: 6px;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .research-hero,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .research-section,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .control-bar,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .table-section,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .watchlist-section,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .announcement-section,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .blogger-section,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .blogger-sidebar,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .content-section,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .data-capability-strip,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .stock-overview-card,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .stock-context-section,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .stock-board-section,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .stock-auction-section,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .company-analysis-section {
  border-radius: var(--acf-surface-radius) !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .button,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) input,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) select,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) textarea,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .tab,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-filter,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .kline-period,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .kline-indicator {
  border-radius: var(--acf-control-radius) !important;
}

/* The preview can force `body.mobile-layout` inside a wide browser viewport,
   so repeat the mobile geometry without relying on the viewport media query. */
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .valuation-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding-inline: 20px !important;
}
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .valuation-header .account-actions {
  display: contents;
}
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .valuation-header .view-switch {
  grid-row: 2;
  grid-column: 1 / -1;
  width: 100%;
}
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .valuation-header .view-switch button { flex: 1 1 0; }
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .valuation-header .account-summary,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .valuation-header .account-permission-button,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .valuation-header .admin-entry { display: none !important; }
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .valuation-header .valuation-brand {
  grid-row: 1;
  grid-column: 1;
  min-width: 0;
}
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .valuation-header .account-title-actions {
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .valuation-header .account-title-actions > .account-summary {
  display: flex !important;
  flex: 0 0 auto;
  align-items: flex-end;
  white-space: nowrap;
}
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .valuation-header .account-title-actions > .account-summary strong {
  font-size: 11px;
}
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .valuation-header .account-title-actions > .account-summary span {
  font-size: 9px;
}
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .valuation-header .account-session-action {
  margin: 0;
  padding: 0;
  border: 0;
}
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .workspace-nav:not(.is-collapsed) .workspace-nav-collapse {
  grid-column: 1 / -1;
  grid-row: 5 !important;
  order: 99;
  min-height: 30px !important;
  margin-top: 6px;
  border-top: 0 !important;
  color: var(--muted) !important;
}
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .workspace-nav:not(.is-collapsed) .workspace-tab { order: 1; }
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .workspace-nav:not(.is-collapsed) {
  grid-template-rows: repeat(4, 46px) minmax(30px, auto) !important;
}
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .workspace-nav:not(.is-collapsed)::before {
  bottom: 37px;
}
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .workspace-nav:not(.is-collapsed)::after {
  height: 184px;
  background:
    linear-gradient(to bottom,
      transparent 45px,
      var(--line) 45px,
      var(--line) 46px,
      transparent 46px 91px,
      var(--line) 91px,
      var(--line) 92px,
      transparent 92px 137px,
      var(--line) 137px,
      var(--line) 138px,
      transparent 138px 183px,
      var(--line) 183px,
      var(--line) 184px,
      transparent 184px);
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .research-hero-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .research-hero-title-row h2 {
  min-width: 0;
  margin: 0;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .research-hero-title-row .cache-badge,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .research-hero-title-row .permission-account-state {
  flex: 0 0 auto;
  white-space: nowrap;
}
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .research-hero-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) #researchView .research-hero-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  margin-top: 12px;
}
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) #researchView .research-hero-actions .review-date-field { min-width: 0; }
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) #researchView .research-hero-actions .button { min-width: 72px; }
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .market-research-list > .research-empty {
  padding-right: 14px;
  padding-left: 14px;
}

/* Mobile title surfaces keep their title and state label on one row with the
   same horizontal inset. Daily review keeps its controls on the row below. */
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .research-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end !important;
  gap: 12px;
  padding-inline: 22px !important;
}
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .research-hero > :first-child { min-width: 0; }
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .research-hero > .research-hero-actions {
  justify-self: end;
  margin-top: 0;
}
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) #researchView .research-hero {
  display: block !important;
}

/* Final theme contract pass: semantic labels inherit each active theme's
   positive/negative/muted tokens instead of sharing a fixed light palette. */
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .announcement-tag.positive {
  border-color: color-mix(in srgb, var(--positive) 38%, var(--line)) !important;
  background: color-mix(in srgb, var(--positive) 12%, var(--surface)) !important;
  color: var(--positive) !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .announcement-tag.negative {
  border-color: color-mix(in srgb, var(--negative) 38%, var(--line)) !important;
  background: color-mix(in srgb, var(--negative) 12%, var(--surface)) !important;
  color: var(--negative) !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .announcement-tag.neutral {
  border-color: color-mix(in srgb, var(--muted) 38%, var(--line)) !important;
  background: color-mix(in srgb, var(--muted) 10%, var(--surface)) !important;
  color: var(--muted) !important;
}

/* C's editorial title remains one readable line beside its status badge on a
   forced phone canvas. The grid gives the title a predictable flexible lane;
   the smaller mobile type keeps four-character headings from wrapping. */
body.mobile-layout[data-variant="C"] .research-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center !important;
  gap: 10px;
  min-width: 0;
  padding-inline: 12px !important;
}
body.mobile-layout[data-variant="C"] .research-hero > :first-child {
  min-width: 0;
}
body.mobile-layout[data-variant="C"] .research-hero h2 {
  min-width: 0;
  overflow: hidden;
  font-size: 26px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.mobile-layout[data-variant="C"] .research-hero-actions {
  min-width: 0;
  gap: 6px;
}
body.mobile-layout[data-variant="C"] .research-hero-actions .cache-badge {
  max-width: 100%;
  padding-inline: 8px;
  font-size: 11px;
}

/* Keep the A/C/F geometry contract applied to the two components that were
   still using the legacy square/4px values. */
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .selection-subtab {
  border-radius: var(--acf-control-radius) !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .permission-summary > div {
  border-radius: var(--acf-surface-radius) !important;
}

/* Mobile previews used to inherit a legacy dark-green fallback from the
   original prototype. Keep the route geometry, but resolve its surfaces and
   text through the active A/C/F token set so light themes stay light and F
   stays on its terminal palette. */
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .mobile-ranking,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .research-section,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .stock-query-form,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .stock-context-section,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .stock-overview-card,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .content-tools,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .watchlist-toolbar,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .research-company-tools,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .company-stock-jump,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .company-analysis-form,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .integration-grid article,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .pulse-item {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .mobile-list-head,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .section-heading {
  border-color: var(--line) !important;
  color: var(--text) !important;
}
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .mobile-stock-row,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .watchlist-row,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .research-candidate-row,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .company-history-row,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .content-post-row,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .blogger-post-row {
  border-color: var(--line) !important;
  color: var(--text) !important;
}
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .mobile-stock-main h3,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .mobile-stock-value strong,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .watchlist-stock,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .candidate-stock,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .content-post-main,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .content-detail-body {
  color: var(--text) !important;
}
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .mobile-stock-main p,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .mobile-stock-value p,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .mobile-list-head span,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .research-candidate-row > p,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .company-history-row span,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .company-history-row small,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .content-post-main > p {
  color: var(--muted) !important;
}
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .field input,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .mobile-list-tools select,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .stock-query-form input,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .watchlist-toolbar input,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .watchlist-toolbar select,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .company-stock-jump input,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .company-analysis-form select,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .company-analysis-form textarea,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .content-admin-form input,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .content-admin-form textarea,
body.mobile-layout:is([data-variant="A"], [data-variant="C"], [data-variant="F"]) .content-admin-form select {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}

/* Navigation and feature states use the same accent mix on every A/C/F
   viewport. This removes the last hard-coded green hover/selected colors. */
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .workspace-tab {
  color: var(--muted) !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .workspace-tab:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface)) !important;
  color: var(--text) !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .workspace-tab.active {
  border-bottom-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface)) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .permission-feature-status.free,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .permission-feature-status.unlocked {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line)) !important;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)) !important;
  color: var(--accent) !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .permission-feature-status.locked {
  border-color: var(--line) !important;
  background: var(--surface-soft) !important;
  color: var(--muted) !important;
}

/* Board/review status colors stay semantic and independent from each theme's
   accent. Positive market states are red, broken states green, and pending
   states use the muted token. */
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-status.sealed,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .review-event-status.sealed,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-count.sealed {
  border-color: color-mix(in srgb, var(--positive) 38%, var(--line)) !important;
  background: color-mix(in srgb, var(--positive) 12%, var(--surface)) !important;
  color: var(--positive) !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-status.broken,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .review-event-status.broken,
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .board-count.broken {
  border-color: color-mix(in srgb, var(--negative) 38%, var(--line)) !important;
  background: color-mix(in srgb, var(--negative) 12%, var(--surface)) !important;
  color: var(--negative) !important;
}
:is(body[data-variant="A"], body[data-variant="C"], body[data-variant="F"]) .review-event-status.resealed {
  border-color: color-mix(in srgb, var(--muted) 38%, var(--line)) !important;
  background: color-mix(in srgb, var(--muted) 10%, var(--surface)) !important;
  color: var(--muted) !important;
}

.feedback-media-grid { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.feedback-media-grid a { display: block; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.feedback-media-grid img { display: block; max-width: 220px; max-height: 160px; object-fit: cover; }
.feedback-media-cell { position: relative; display: inline-block; }
.feedback-media-delete { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel, #fff); color: #b43c32; font-size: 12px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.feedback-media-delete:hover { background: #b43c32; color: #fff; }

/* 后台四件套：批量操作/到期倒计时/活跃度/审计筛选 */
.admin-bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  background: color-mix(in srgb, var(--accent, #126347) 8%, transparent);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.admin-bulk-bar span { font-weight: 700; margin-right: 4px; }
.admin-bulk-bar .button.danger { color: var(--negative); border-color: color-mix(in srgb, var(--negative) 45%, transparent); }
.admin-check-cell { width: 30px; text-align: center; }
.admin-check-cell input { cursor: pointer; }
.days-left { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent, #126347) 12%, transparent); }
.days-left.urgent { color: #9a5c09; background: color-mix(in srgb, #9a5c09 14%, transparent); }
.days-left.expired { color: var(--negative); background: color-mix(in srgb, var(--negative) 12%, transparent); }
.admin-select { padding: 5px 8px; font-size: 13px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface, #fff); }
.admin-hint { font-size: 12px; color: var(--muted-foreground, #68746d); }
.admin-section-tools { display: flex; align-items: center; gap: 10px; }

/* 数据总管 */
.admin-sub-title { margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: var(--admin-text, #1c2b26); }
.admin-ops-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ops-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 12px; font-size: 12px; background: #eef2ef; border: 1px solid #d8e0da; color: #3a4a42; }
.ops-pill.ops-ok { background: #e6f3ec; border-color: #b7d8c7; color: #177052; }
.ops-pill.ops-warn { background: #fdf3e2; border-color: #ecd5a8; color: #8a6116; }
.ops-pill.ops-err { background: #fbe9e7; border-color: #eec4c0; color: #b53e3a; }
.ops-tag { display: inline-block; padding: 1px 8px; border-radius: 8px; font-size: 11px; }
.ops-tag.ops-ok { background: #e6f3ec; color: #177052; }
.ops-tag.ops-warn { background: #fdf3e2; color: #8a6116; }
.ops-tag.ops-err { background: #fbe9e7; color: #b53e3a; }
.admin-ops-findings { display: flex; flex-direction: column; gap: 6px; }
.ops-finding { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 12px; border: 1px solid #e2e7e3; background: #fafbfa; }
.ops-finding.ops-err { border-left: 3px solid #b53e3a; }
.ops-finding.ops-warn { border-left: 3px solid #d9a441; }
.ops-finding .ops-sev { font-weight: 700; flex-shrink: 0; }
.ops-finding .ops-area { color: #68746d; flex-shrink: 0; }
.ops-finding .ops-msg { flex: 1; }
.ops-fix { flex-shrink: 0; font-size: 11px; padding: 2px 10px; }
.admin-ops-services { display: flex; flex-wrap: wrap; gap: 8px; }
.ops-detail small { color: #68746d; }

/* ==========================================================================
   登录页 · 六主题 token + 左右分栏 + 特效层（P2）
   - 主题取自 localStorage.valuationVariant（member-login.html 首屏脚本写入 body[data-variant]）
   - 颜色一律走 body 上的变量；画布特效从这些变量取色，不在 JS 里写死
   - 表单字段 / 提交逻辑 / 接口不变
   ========================================================================== */
body.login-page[data-variant] {
  --on-accent: #fff;
  --vig: 7, 9, 12;
  --panel-radius: 8px;
  --panel-blur: 16px;
  --panel-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  --hero-font: inherit;
  --positive: #e17c86;
}
body.login-page[data-variant="A"] {
  --bg: #e9eeeb; --surface: rgba(255,255,255,.92); --surface-strong: #12261f; --surface-soft: rgba(18,99,71,.06);
  --text: #17201c; --muted: #68746d; --muted-dark: #8a948e; --accent: #126347; --accent-hover: #0e4f39;
  --positive: #b53e3a; --negative: #177052; --border: rgba(23,32,28,.16); --line: rgba(23,32,28,.14);
  --ink: #12261f; --vig: 233, 238, 235; --panel-radius: 6px; --panel-blur: 0px; --panel-shadow: 0 1px 0 rgba(18,38,31,.06), 0 16px 40px -24px rgba(18,38,31,.35);
}
body.login-page[data-variant="C"] {
  --bg: #f7f7f5; --surface: rgba(255,255,255,.94); --surface-strong: #171816; --surface-soft: rgba(23,24,22,.05);
  --text: #171816; --muted: #6b6d68; --muted-dark: #8c8e89; --accent: #9d2d2d; --accent-hover: #7f2323;
  --positive: #b02f2f; --negative: #566477; --border: rgba(23,24,22,.2); --line: rgba(23,24,22,.18);
  --vig: 247, 247, 245; --panel-radius: 2px; --panel-blur: 0px; --panel-shadow: none;
  --hero-font: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
}
body.login-page[data-variant="F"] {
  --bg: #08090b; --surface: rgba(16,18,21,.62); --surface-strong: #f3f4f6; --surface-soft: rgba(255,255,255,.06);
  --text: #f3f4f6; --muted: #9298a2; --muted-dark: #6f7580; --accent: #a39ac7; --accent-hover: #b4acd3; --on-accent: #14121f;
  --positive: #e17c86; --negative: #71a7a0; --border: rgba(163,154,199,.28); --line: rgba(163,154,199,.2);
  --vig: 8, 9, 11; --panel-radius: 14px; --panel-blur: 14px; --panel-shadow: 0 24px 70px -20px rgba(163,154,199,.35);
}
body.login-page[data-variant="G"] {
  --bg: #080c12; --surface: rgba(16,23,34,.88); --surface-strong: #edf3f8; --surface-soft: rgba(255,255,255,.06);
  --text: #edf3f8; --muted: #91a0b4; --muted-dark: #6c7b8f; --accent: #72d4b0; --accent-hover: #8be0c1; --on-accent: #05130d;
  --positive: #f07c91; --negative: #72d4b0; --border: rgba(114,212,176,.22); --line: rgba(114,212,176,.18);
  --vig: 8, 12, 18; --panel-radius: 10px; --panel-blur: 10px; --panel-shadow: 0 24px 70px rgba(0,0,0,.55), inset 0 0 40px -26px rgba(114,212,176,.55);
}
body.login-page[data-visual-variant="G1"] {
  --bg: #0b0e14; --surface: rgba(17,21,31,.9); --surface-soft: rgba(255,255,255,.05);
  --border: #e2e8f0; --line: rgba(226,232,240,.35); --vig: 11, 14, 20; --panel-radius: 2px; --panel-blur: 0px; --panel-shadow: none;
  --hero-font: ui-monospace, "SF Mono", Consolas, "Cascadia Mono", monospace;
}
body.login-page[data-variant="O"] {
  --bg: #f3f5f4; --surface: rgba(255,255,255,.96); --surface-strong: #19201d; --surface-soft: rgba(13,122,76,.06);
  --text: #19201d; --muted: #5d6963; --muted-dark: #84908a; --accent: #0d7a4c; --accent-hover: #0a6340;
  --positive: #c03945; --negative: #087b49; --border: rgba(25,32,29,.14); --line: rgba(25,32,29,.12);
  --vig: 243, 245, 244; --panel-radius: 16px; --panel-blur: 0px; --panel-shadow: 0 2px 6px rgba(25,32,29,.05), 0 30px 60px -28px rgba(25,32,29,.35);
}
body.login-page[data-variant] { background: var(--bg); color: var(--text); place-items: stretch; padding: 0; }
body.login-page[data-variant] .login-vignette {
  background:
    radial-gradient(ellipse 80% 70% at 30% 45%, rgba(var(--vig), 0) 0%, rgba(var(--vig), .55) 70%, rgba(var(--vig), .88) 100%);
}
#loginFx { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block; }

/* 左右分栏：左约 60% = 特效 + 大标题；右侧卡片 = 登录表单 */
.login-shell {
  position: relative; z-index: 2; width: min(1280px, 100%); min-height: 100vh; margin: 0 auto; padding: 32px clamp(20px, 4vw, 56px);
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(340px, 2fr); gap: clamp(24px, 5vw, 72px); align-items: center;
}
.login-hero { min-width: 0; font-family: var(--hero-font); transform: translate(-1.5vw, -4vh); }
.login-hero .eyebrow { margin: 0 0 14px; color: var(--accent); font-family: ui-monospace, "SF Mono", Consolas, monospace; letter-spacing: .24em; font-size: 12px; }
.login-title { margin: 0; font-size: clamp(44px, 7vw, 92px); line-height: 1.02; letter-spacing: -.02em; color: var(--text); font-weight: 800; }
.login-lead { margin: 18px 0 0; font-size: clamp(16px, 2vw, 22px); color: var(--text); font-weight: 600; }
.login-lead-sub { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.login-ticker { display: none; }

body.login-page .login-shell .login-panel {
  justify-self: end; width: 100%; max-width: 420px; padding: 32px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--panel-radius); background: var(--surface);
  -webkit-backdrop-filter: blur(var(--panel-blur)); backdrop-filter: blur(var(--panel-blur)); box-shadow: var(--panel-shadow);
}
.login-panel .brand-mark { margin-bottom: 16px; background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 38%, transparent); color: var(--accent); border-radius: calc(var(--panel-radius) * .6); }
.login-panel-title { margin: 0 0 22px; font-size: 22px; font-weight: 700; color: var(--text); text-align: left; }
body.login-page[data-variant] .login-panel label { color: var(--text); }
body.login-page[data-variant] .login-panel input { background: var(--surface-soft) !important; border-color: var(--border); color: var(--text); border-radius: calc(var(--panel-radius) * .55); }
body.login-page[data-variant] .login-panel input:focus { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 28%, transparent); }
body.login-page[data-variant] .button-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); border-radius: calc(var(--panel-radius) * .55); }
body.login-page[data-variant] .button-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
body.login-page[data-variant] .login-goshow { margin: 18px 0 0; padding-top: 14px; border-top: 1px dashed var(--border); text-align: center; font-size: 14px; }
body.login-page[data-variant] .login-goshow a { color: var(--accent); font-weight: 700; }
body.login-page[data-variant] .login-goshow a:hover { text-decoration: underline; }
body.login-page[data-variant] .form-error { color: var(--positive); }
body.login-page[data-variant] .login-meta { text-align: left; color: var(--muted); }
body.login-page[data-variant] .login-risk { text-align: left; margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; opacity: .8; }
body.login-page[data-variant] .login-meta a, body.login-page[data-variant] .login-contact { color: var(--accent); }
body.login-page[data-variant] .login-contact { text-align: left; }
/* 小贴士收成一行 */
body.login-page[data-variant] .login-tip { margin: 16px 0 0; padding: 0; border: 0; text-align: left; font-size: 11.5px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
body.login-page[data-variant] .login-icp { position: fixed; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 11px; color: var(--muted); opacity: .75; pointer-events: none; }
body.login-page[data-variant] .login-icp a { pointer-events: auto; }
body.login-page[data-variant] .login-icp a { color: inherit; text-decoration: none; }
body.login-page[data-variant] .login-icp a:hover { color: var(--accent); }
body.login-page[data-variant] .login-tip kbd { background: var(--surface-soft); border-color: var(--border); color: var(--text); }

/* —— 皮肤专属点缀 —— */
body.login-page[data-variant="A"] .login-panel { border-top: 3px solid var(--accent); }
body.login-page[data-variant="A"] .login-ticker {
  display: block; margin-top: 36px; overflow: hidden; white-space: nowrap; padding: 9px 0; background: var(--ink); color: #dfeee7; border-radius: 3px;
  font: 600 12px/1 ui-monospace, "SF Mono", Consolas, monospace; letter-spacing: .06em; max-width: 560px;
}
body.login-page[data-variant="A"] .login-ticker span { display: inline-block; padding-left: 100%; animation: loginTape 60s steps(720) infinite; }
body.login-page[data-variant="A"] .login-ticker .up { color: color-mix(in srgb, var(--positive) 55%, #fff); } /* 墨绿底上提亮的涨色，仍取 positive 语义 */
body.login-page[data-variant="A"] .login-ticker .down { color: color-mix(in srgb, var(--negative) 45%, #fff); }
@keyframes loginTape { from { transform: translateX(0); } to { transform: translateX(-100%); } }
body.login-page[data-variant="C"] .login-panel { border-top: 3px double var(--text); }
body.login-page[data-variant="C"] .login-title::after { content: "▌"; margin-left: .08em; color: var(--accent); font-weight: 400; animation: loginCaret 1.1s steps(2, start) infinite; }
@keyframes loginCaret { to { visibility: hidden; } }
body.login-page[data-variant="C"] .login-hero .eyebrow { color: var(--accent); border-bottom: 1px solid var(--text); display: inline-block; padding-bottom: 4px; }
body.login-page[data-variant="F"] .login-panel { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
body.login-page[data-variant="G"] .login-panel { border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
body.login-page[data-visual-variant="G1"] .login-hero .eyebrow { text-transform: uppercase; letter-spacing: .3em; }
body.login-page[data-visual-variant="G1"] .login-title { text-transform: none; font-weight: 700; letter-spacing: 0; }
body.login-page[data-visual-variant="G1"] .login-panel { border: 1px solid #e2e8f0; }
body.login-page[data-variant="O"] .login-hero { text-shadow: none; }

/* —— 窄屏 / 安卓 WebView 降级 —— */
@media (max-width: 900px) {
  .login-shell { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 22px; padding: 20px 16px 28px; }
  .login-hero { text-align: left; }
  .login-title { font-size: clamp(38px, 12vw, 56px); }
  .login-lead-sub, body.login-page[data-variant="A"] .login-ticker { display: none; }
  body.login-page .login-shell .login-panel { justify-self: stretch; max-width: none; padding: 24px 20px; }
}
html.is-webview body.login-page .login-shell .login-panel { -webkit-backdrop-filter: none; backdrop-filter: none; }
html.is-webview body.login-page[data-variant="F"] .login-panel { background: color-mix(in srgb, var(--bg) 92%, var(--accent) 5%); }
@media (prefers-reduced-motion: reduce) {
  body.login-page .login-ticker span, body.login-page .login-title::after { animation: none; }
  body.login-page[data-variant="A"] .login-ticker span { padding-left: 0; }
}