/*
 * 分层说明（重要）：本文件由多个设计阶段叠加而成，同名选择器出现多次时，
 * 以“文件更靠后的一条”为准。当前共四层——
 *   第 1 行起      最初的深色主题与首页组件
 *   第 3777 行起   浅色 macOS 风格调色板（当前默认主题，:root 在此被重定义）
 *   第 4705 行起   深色主题覆盖（[data-theme="dark"]）
 *   第 9360 行起   扁平化表面系统（.card / 阴影 / 字号基线）
 *
 * 修改约定：不要就地改写靠前的旧规则。它很可能已被后面的规则覆盖，改了不生效，
 * 反而会影响同层其他选择器。新增或修正一律追加到文件末尾。
 *
 * 已知被重复定义、且以最后一条为准的选择器：.shell、.card、.event-board、
 * .event-item、.macro-release-*。.shell 的最终宽度为 min(1380px, calc(100% - 48px))。
 */

:root {
  color-scheme: dark;
  --bg: #0b0e11;
  --panel: #13171c;
  --panel-strong: #181d23;
  --line: #27303a;
  --line-soft: #1d242b;
  --text: #f3f5f7;
  --muted: #8c98a4;
  --muted-strong: #b8c0c8;
  --red: #ff6b6b;
  --orange: #ff934f;
  --amber: #f4bd4f;
  --green: #46d37f;
  --cyan: #48d8cf;
  --blue: #62a9ff;
  --danger-soft: rgba(255, 107, 107, 0.12);
  --warning-soft: rgba(244, 189, 79, 0.12);
  --calm-soft: rgba(70, 211, 127, 0.12);
  --neutral-soft: rgba(140, 152, 164, 0.12);
  --radius: 8px;
  --shadow: 0 18px 46px rgba(0, 0, 0, 0.24);
  /* 动效令牌（iOS 27 / ColorOS 17 系统动画取向）
     ----------------------------------------------------------------------
     曲线：cubic-bezier(0.22, 1, 0.36, 1) 属于"起步即近满速、尾部拖很长"的类型，
     观感是元素被"抽"出去再缓缓停住。系统级动画的曲线起步要柔和、中段加速、
     尾部平顺收住，对应 cubic-bezier(0.32, 0.72, 0, 1)（Apple 官方给出的
     spring 近似）。改这一个变量，全站 50 多处 transition 一起换手感。
     时长：整体上移一档，短动画不再"点到即止"。
     规则：同一次交互里的多个属性共用同一条时长，避免位移、变色、淡入各自为政。 */
  --motion-instant: 140ms; /* 按下反馈，唯一保留的"快" */
  --motion-fast: 240ms;    /* 状态色、hover 微反馈 */
  --motion-base: 380ms;    /* 面板、卡片、导航、浮层 */
  --motion-slow: 560ms;    /* 页面级入场 */
  --ease-apple: cubic-bezier(.28, 0, .2, 1);
  --ease-soft: cubic-bezier(.28, 0, .2, 1);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  min-width: 320px;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    var(--bg);
  background-size: 40px 40px;
  color: var(--text);
  font-family: "Segoe UI", "Microsoft YaHei UI", "PingFang SC", sans-serif;
  font-variant-numeric: tabular-nums;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

button,
select,
summary,
input {
  -webkit-tap-highlight-color: transparent;
}

button:not(:disabled),
select,
summary,
.preference-switch,
.switch-control {
  /* 同一次交互内的属性共用同一条时长，只有曲线按属性类型分流：
     位移/缩放走几何曲线，颜色/透明度走色彩曲线。 */
  transition:
    transform var(--motion-base) var(--ease-apple),
    opacity var(--motion-base) var(--ease-soft),
    background-color var(--motion-base) var(--ease-soft),
    border-color var(--motion-base) var(--ease-soft),
    box-shadow var(--motion-base) var(--ease-soft),
    filter var(--motion-base) var(--ease-soft);
}

button:not(:disabled):active,
select:active,
summary:active,
.preference-switch:active,
.switch-control:active {
  transform: scale(0.972);
  transition-duration: var(--motion-instant);
}

.ui-clicking {
  animation: ui-click-settle 460ms var(--ease-apple) both;
}

@keyframes ui-click-settle {
  0% {
    transform: scale(0.972);
  }

  68% {
    transform: scale(1.006);
  }

  100% {
    transform: scale(1);
  }
}

.shell {
  width: min(1540px, calc(100% - 48px));
  margin: 0 auto;
  padding: 22px 0 40px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
}

.brand-mark .brand-glyph {
  display: block;
  width: 100%;
  height: 100%;
}

.brand-mark .brand-glyph-solid {
  fill: currentColor;
}

.brand-mark .brand-glyph-ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.brand-mark .brand-glyph-beam {
  fill: none;
  stroke: var(--amber);
  stroke-width: 1.75;
  stroke-linecap: round;
}

h1,
h2,
h3,
p {
  margin: 0;
}

.brand h1 {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: 0;
}

.brand p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.live-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted-strong);
  font-size: 12px;
  white-space: nowrap;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(244, 189, 79, 0.11);
}

.live-status.live .status-dot {
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(70, 211, 127, 0.11);
}

.live-status.partial .status-dot {
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 147, 79, 0.11);
}

.live-status.error .status-dot {
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.11);
}

.switch-control {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}

.switch-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch-track {
  position: relative;
  width: 36px;
  height: 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  transition:
    background-color var(--motion-base) var(--ease-apple),
    border-color var(--motion-base) var(--ease-apple),
    transform var(--motion-fast) var(--ease-apple);
}

.switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--muted);
  transition:
    transform var(--motion-base) var(--ease-apple),
    background-color var(--motion-base) var(--ease-apple);
}

.switch-control input:checked + .switch-track {
  border-color: rgba(70, 211, 127, 0.42);
  background: rgba(70, 211, 127, 0.14);
}

.switch-control input:checked + .switch-track::after {
  transform: translateX(16px);
  background: var(--green);
}

.switch-control:active .switch-track {
  transform: scale(0.94);
}

.refresh-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 88px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-strong);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-soft), background var(--motion-fast) var(--ease-soft), transform var(--motion-fast) var(--ease-soft);
}

.refresh-button:hover {
  border-color: #3a4653;
  background: #1c2229;
}

.refresh-button:active {
  transform: translateY(1px) scale(0.975);
}

.refresh-button:disabled {
  opacity: 0.55;
  cursor: wait;
}

.refresh-icon {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
}

.refresh-button.loading .refresh-icon {
  animation: spin 800ms linear infinite;
}

.notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 147, 79, 0.3);
  border-radius: 7px;
  background: rgba(255, 147, 79, 0.08);
  color: #f4c3a0;
  font-size: 12px;
  line-height: 1.5;
}

.notice-label {
  flex: 0 0 auto;
  color: var(--orange);
  font-weight: 650;
}

main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 24px;
}

.strategy-board {
  --strategy-accent: var(--amber);
  position: relative;
  overflow: hidden;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #101419;
  box-shadow: var(--shadow);
}

.strategy-board::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--strategy-accent);
}

.strategy-board[data-tone="risk-on"] {
  --strategy-accent: var(--green);
}

.strategy-board[data-tone="neutral"] {
  --strategy-accent: var(--cyan);
}

.strategy-board[data-tone="defensive"] {
  --strategy-accent: var(--amber);
}

.strategy-board[data-tone="danger"],
.strategy-board[data-tone="panic"] {
  --strategy-accent: var(--red);
}

.strategy-lead {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.strategy-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.strategy-title-row h2 {
  margin-top: 5px;
  font-size: 25px;
  font-weight: 650;
}

.strategy-tone {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--strategy-accent) 35%, var(--line));
  border-radius: 999px;
  color: var(--strategy-accent);
  background: color-mix(in srgb, var(--strategy-accent) 10%, transparent);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.strategy-stance {
  margin-top: 14px;
  padding: 10px 12px;
  border-left: 4px solid var(--strategy-accent);
  border-radius: 0 6px 6px 0;
  color: var(--strategy-accent);
  background: var(--surface-subtle);
  font-size: 18px;
  font-weight: 780;
  line-height: 1.5;
}

.strategy-summary {
  max-width: 1250px;
  margin-top: 8px;
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1.75;
}

.strategy-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}

.strategy-reason {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted-strong);
  background: var(--surface-subtle);
  font-size: 11px;
}

.strategy-reason::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--strategy-accent);
}

.strategy-live-pulse {
  border-color: color-mix(in srgb, var(--cyan) 28%, var(--line));
  background: color-mix(in srgb, var(--cyan) 7%, var(--panel-strong));
}

.strategy-live-pulse::before {
  background: var(--cyan);
}

.strategy-news-pulse {
  max-width: min(100%, 760px);
  border-color: color-mix(in srgb, var(--blue) 28%, var(--line));
  background: color-mix(in srgb, var(--blue) 7%, var(--panel-strong));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strategy-news-pulse::before {
  flex: 0 0 auto;
  background: var(--blue);
}

.strategy-matrix {
  display: grid;
  grid-template-columns: 1.05fr 1.05fr 0.9fr;
}

.strategy-column {
  min-width: 0;
  padding: 19px 20px 0;
}

.strategy-column:first-child {
  padding-left: 0;
}

.strategy-column:last-child {
  padding-right: 0;
}

.strategy-column + .strategy-column {
  border-left: 1px solid var(--line-soft);
}

.strategy-column-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.strategy-column-head span,
.strategy-trigger-head span {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.strategy-column-head strong,
.strategy-trigger-head strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  text-align: right;
}

.strategy-list {
  display: grid;
  gap: 10px;
}

.strategy-item {
  padding-left: 11px;
  border-left: 2px solid var(--line);
}

.avoid-column .strategy-item {
  border-left-color: rgba(255, 107, 107, 0.58);
}

.focus-column .strategy-item {
  border-left-color: rgba(70, 211, 127, 0.58);
}

.strategy-item strong {
  display: block;
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 700;
}

.strategy-item p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.allocation-list {
  display: grid;
  gap: 10px;
}

.allocation-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.allocation-item strong {
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 650;
}

.allocation-item b {
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
}

.allocation-item p {
  grid-column: 1 / -1;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.allocation-track {
  grid-column: 1 / -1;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line-soft);
}

.allocation-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--strategy-accent);
}

.strategy-triggers {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 22px;
  margin-top: 19px;
  padding-top: 17px;
  border-top: 1px solid var(--line-soft);
}

.strategy-trigger-head strong {
  display: block;
  margin-top: 5px;
  text-align: left;
}

.strategy-trigger-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.strategy-trigger {
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface-subtle);
}

.strategy-trigger strong {
  display: block;
  color: var(--amber);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.strategy-trigger p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.strategy-disclaimer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.tactical-board {
  --tactical-accent: var(--blue);
  position: relative;
  overflow: hidden;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(98, 169, 255, 0.045), transparent 42%),
    #101419;
  box-shadow: var(--shadow);
}

.tactical-board::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--tactical-accent);
}

.tactical-board[data-tone="neutral"] {
  --tactical-accent: var(--green);
}

.tactical-board[data-tone="warning"] {
  --tactical-accent: var(--amber);
}

.tactical-board[data-tone="danger"] {
  --tactical-accent: var(--orange);
}

.tactical-board[data-mode="pause"] {
  --tactical-accent: var(--red);
}

.tactical-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.tactical-heading-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 5px;
}

.tactical-heading-row h2 {
  font-size: 25px;
  font-weight: 650;
}

.tactical-mode {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--tactical-accent) 38%, var(--line));
  border-radius: 999px;
  color: var(--tactical-accent);
  background: color-mix(in srgb, var(--tactical-accent) 10%, transparent);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.tactical-stance {
  margin-top: 13px;
  color: var(--text);
  font-size: 18px;
  font-weight: 780;
  line-height: 1.5;
}

.tactical-summary {
  max-width: 1080px;
  margin-top: 6px;
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1.7;
}

.tactical-budget {
  align-self: stretch;
  padding: 15px 16px;
  border: 1px solid color-mix(in srgb, var(--tactical-accent) 24%, var(--line));
  border-radius: 7px;
  background: var(--surface-subtle);
}

.tactical-budget > span {
  color: var(--muted);
  font-size: 11px;
}

.tactical-budget > strong {
  display: block;
  margin-top: 6px;
  color: var(--tactical-accent);
  font-size: 34px;
  font-weight: 680;
  line-height: 1;
}

.tactical-budget p {
  margin-top: 9px;
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.45;
}

.tactical-budget .tactical-asof {
  padding-top: 9px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
}

.tactical-asof b {
  color: var(--muted-strong);
}

.tactical-refresh-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface-subtle);
  color: var(--muted);
  font-size: 11px;
}

.tactical-refresh-line > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.tactical-refresh-line b {
  color: var(--tactical-accent);
  font-weight: 800;
}

.tactical-refresh-line > div:last-child b {
  color: var(--text);
}

.tactical-rules {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 16px;
}

.tactical-validation {
  display: grid;
  grid-template-columns: minmax(150px, 0.75fr) minmax(0, 2.25fr);
  gap: 12px;
  align-items: center;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--blue) 5%, var(--panel));
}

.tactical-validation > div:first-child span,
.tactical-validation > div:first-child strong,
.tactical-validation p {
  display: block;
}

.tactical-validation > div:first-child span,
.tactical-validation p,
.tactical-validation-metrics span {
  color: var(--muted);
  font-size: 11px;
}

.tactical-validation > div:first-child strong {
  margin-top: 3px;
  font-size: 13px;
}

.tactical-validation-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.tactical-validation-metrics > div {
  min-width: 0;
  padding-left: 9px;
  border-left: 1px solid var(--line-soft);
}

.tactical-validation-metrics strong {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: 12px;
}

.tactical-validation p {
  grid-column: 1 / -1;
  margin: -3px 0 0;
  line-height: 1.55;
}

.professional-desk {
  margin: 14px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.professional-desk-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.professional-desk-head h2 {
  margin: 3px 0 0;
  font-size: 17px;
}

.professional-desk-head > span {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.professional-desk-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}

.professional-desk-grid a {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-strong);
  color: inherit;
  text-decoration: none;
}

.professional-desk-grid a:hover {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
}

.professional-desk-grid strong {
  color: var(--text);
  font-size: 12px;
}

.professional-desk-grid span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.tactical-rule {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface-subtle);
}

.tactical-rule strong {
  display: block;
  color: var(--tactical-accent);
  font-size: 12px;
  font-weight: 800;
}

.tactical-rule p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.tactical-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 11px;
  margin-top: 15px;
}

.tactical-empty {
  grid-column: 1 / -1;
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  text-align: center;
}

.tactical-empty strong {
  display: block;
  color: var(--muted-strong);
  font-size: 15px;
}

.tactical-empty p {
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
}

.tactical-watch {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.tactical-watch-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.tactical-watch-head strong {
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 800;
}

.tactical-watch-head span {
  color: var(--muted);
  font-size: 11px;
}

.tactical-watchlist {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 10px;
}

.tactical-watch-card {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: #101419;
}

.tactical-watch-card > div:first-child {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.tactical-watch-card > div:first-child div {
  min-width: 0;
}

.tactical-watch-card > div:first-child strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 780;
}

.tactical-watch-card > div:first-child span {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tactical-watch-card > div:first-child > b {
  flex: 0 0 auto;
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 750;
}

.tactical-watch-stage {
  min-height: 30px;
  margin-top: 9px;
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.5;
}

.tactical-watch-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.tactical-watch-metrics span {
  padding: 3px 5px;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  color: var(--muted);
  font-size: 11px;
}

.tactical-card {
  --card-accent: var(--blue);
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
}

.tactical-card[data-tone="warning"] {
  --card-accent: var(--amber);
}

.tactical-card[data-tone="danger"] {
  --card-accent: var(--orange);
}

.tactical-card.watch {
  border-color: var(--line-soft);
  background: #11151a;
}

.tactical-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.tactical-card-head > div:first-child {
  min-width: 0;
}

.tactical-symbol {
  display: block;
  color: var(--text);
  font-size: 18px;
  font-weight: 780;
  line-height: 1.1;
}

.tactical-card-head > div:first-child > span {
  display: block;
  overflow: hidden;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tactical-score {
  flex: 0 0 auto;
  text-align: right;
}

.tactical-score b {
  display: block;
  color: var(--card-accent);
  font-size: 24px;
  font-weight: 750;
  line-height: 1;
}

.tactical-score span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.tactical-stage {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-top: 9px;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--card-accent) 34%, var(--line));
  border-radius: 999px;
  color: var(--card-accent);
  background: color-mix(in srgb, var(--card-accent) 8%, transparent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}

.tactical-signal {
  min-height: 34px;
  margin-top: 11px;
  padding: 8px 9px;
  border-left: 3px solid var(--card-accent);
  border-radius: 0 5px 5px 0;
  background: var(--surface-subtle);
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.tactical-quote {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.tactical-quote strong {
  font-size: 24px;
  font-weight: 650;
  line-height: 1;
}

.tactical-quote span {
  color: var(--muted);
  font-size: 11px;
}

.tactical-quote span.positive {
  color: var(--green);
}

.tactical-quote span.negative {
  color: var(--red);
}

.tactical-quote span:last-child {
  margin-left: auto;
}

.tactical-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}

.tactical-metrics div {
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: var(--surface-subtle);
}

.tactical-metrics span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tactical-metrics strong {
  display: block;
  margin-top: 4px;
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 700;
}

.tactical-chart {
  height: 70px;
  margin-top: 11px;
}

.tactical-chart svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tactical-plan {
  display: grid;
  gap: 0;
  margin-top: 11px;
  border-top: 1px solid var(--line-soft);
}

.tactical-plan > div {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
}

.tactical-plan span {
  color: var(--muted);
  font-size: 11px;
}

.tactical-plan strong {
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.4;
}

.tactical-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}

.tactical-reasons span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 5px;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  color: var(--muted);
  font-size: 11px;
}

.tactical-card-foot {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.tactical-methodology,
.tactical-disclaimer {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.tactical-methodology {
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid var(--line-soft);
}

.tactical-disclaimer {
  margin-top: 5px;
  color: #c9a66a;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: -4px;
}

.section-heading.second {
  margin-top: 14px;
}

.eyebrow,
.card-kicker {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
}

.section-heading h2,
.methodology h2 {
  margin-top: 4px;
  font-size: 22px;
  font-weight: 630;
}

.sync-line {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.sync-line strong {
  color: var(--muted-strong);
  font-weight: 550;
}

.separator {
  color: #4c5661;
}

.asset-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.asset-card {
  min-height: 360px;
  padding: 18px;
}

.asset-card::before,
.release-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--accent, var(--blue));
}

[data-accent="red"] {
  --accent: var(--red);
}

[data-accent="orange"] {
  --accent: var(--orange);
}

[data-accent="amber"] {
  --accent: var(--amber);
}

[data-accent="cyan"] {
  --accent: var(--cyan);
}

.cpi-card {
  --accent: var(--blue);
}

.ppi-card {
  --accent: var(--orange);
}

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.card h3 {
  margin-top: 5px;
  font-size: 19px;
  font-weight: 620;
}

.state-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted-strong);
  background: var(--neutral-soft);
  font-size: 12px;
  white-space: nowrap;
}

.state-pill.calm {
  border-color: rgba(70, 211, 127, 0.25);
  color: var(--green);
  background: var(--calm-soft);
}

.state-pill.warning {
  border-color: rgba(244, 189, 79, 0.28);
  color: var(--amber);
  background: var(--warning-soft);
}

.state-pill.danger {
  border-color: rgba(255, 107, 107, 0.28);
  color: var(--red);
  background: var(--danger-soft);
}

.state-pill.neutral {
  color: var(--muted-strong);
}

.threshold-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 11px;
}

.threshold-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 2px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  color: var(--muted);
  background: var(--surface-subtle);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.threshold-chip b {
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 800;
}

.threshold-chip.warning {
  border-color: rgba(244, 189, 79, 0.22);
  color: var(--amber);
  background: rgba(244, 189, 79, 0.055);
}

.threshold-chip.danger {
  border-color: rgba(255, 107, 107, 0.22);
  color: var(--red);
  background: rgba(255, 107, 107, 0.055);
}

.risk-alert {
  margin-top: 8px;
  padding: 12px 13px;
  border-left: 4px solid var(--amber);
  border-radius: 0 5px 5px 0;
  background: rgba(244, 189, 79, 0.07);
  color: #f4d58a;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.52;
  letter-spacing: 0;
}

.risk-alert.danger {
  border-left-color: var(--red);
  background: rgba(255, 107, 107, 0.075);
  color: #ffb0b0;
}

.card.alerting {
  border-color: rgba(244, 189, 79, 0.48);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(244, 189, 79, 0.08) inset;
}

.card.alerting.extreme {
  border-color: rgba(255, 107, 107, 0.52);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(255, 107, 107, 0.1) inset;
}

.quote-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 20px;
}

.quote-value {
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 620;
  line-height: 1;
  letter-spacing: -1px;
}

.quote-value.compact {
  font-size: clamp(31px, 2.8vw, 42px);
}

.quote-unit {
  color: var(--muted);
  font-size: 12px;
}

.change {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  margin-left: 3px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--neutral-soft);
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 650;
}

.change.positive {
  color: var(--green);
  background: var(--calm-soft);
}

.change.negative {
  color: var(--red);
  background: var(--danger-soft);
}

.chart-frame {
  position: relative;
  min-width: 0;
}

.small-chart {
  height: 92px;
  margin-top: 13px;
}

.small-chart svg,
.macro-chart svg,
.buffett-chart svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.metric-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.metric-strip div {
  min-width: 0;
}

.metric-strip span,
.micro-metric span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
}

.metric-strip strong {
  display: block;
  overflow: hidden;
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fed-quote {
  margin-top: 25px;
}

.fed-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding: 10px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface-subtle);
  color: var(--muted);
  font-size: 12px;
}

.fed-next strong {
  overflow: hidden;
  color: var(--muted-strong);
  font-weight: 550;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fed-card .small-chart {
  margin-top: 18px;
}

.macro-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 14px;
}

.buffett-card {
  min-height: 492px;
  padding: 20px;
}

.buffett-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.78fr) minmax(360px, 1.45fr);
  gap: 26px;
  margin-top: 22px;
}

.buffett-summary {
  min-width: 0;
}

.buffett-summary .quote-row {
  margin-top: 0;
}

.gauge {
  margin-top: 25px;
}

.gauge-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green) 0 28%, var(--amber) 44% 57%, var(--red) 78% 100%);
}

.gauge-marker {
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  border: 3px solid var(--panel);
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
  transition: left var(--motion-base) var(--ease-soft);
}

.gauge-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
}

.detail-list {
  display: grid;
  gap: 0;
  margin: 22px 0 0;
}

.detail-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
}

.detail-list dt {
  color: var(--muted);
  font-size: 12px;
}

.detail-list dd {
  margin: 0;
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 550;
}

.buffett-chart {
  height: 270px;
  align-self: center;
}

.release-card {
  min-height: 500px;
  padding: 20px;
}

.macro-value-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 25px;
}

.macro-value {
  font-size: clamp(39px, 4vw, 54px);
  font-weight: 620;
  line-height: 0.95;
  letter-spacing: -1px;
}

.macro-value-row > div:first-child > span {
  margin-left: 5px;
  color: var(--muted);
  font-size: 12px;
}

.micro-metric {
  min-width: 72px;
  padding-left: 14px;
  border-left: 1px solid var(--line-soft);
  text-align: right;
}

.micro-metric strong {
  color: var(--muted-strong);
  font-size: 15px;
  font-weight: 580;
}

.macro-chart {
  height: 132px;
  margin-top: 18px;
}

.next-release {
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.next-release strong {
  color: var(--text);
  font-weight: 650;
}

.next-release .forecast-value {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}

.indicator-heading {
  align-items: center;
}

.indicator-tabs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
}

.indicator-tab {
  min-height: 31px;
  padding: 0 12px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--motion-fast) var(--ease-soft), color var(--motion-fast) var(--ease-soft);
}

.indicator-tab:hover {
  color: var(--muted-strong);
}

.indicator-tab.active {
  background: var(--panel-strong);
  color: var(--text);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.indicator-library {
  min-height: 286px;
}

.indicator-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.indicator-card {
  --accent: var(--blue);
  min-height: 354px;
  padding: 18px;
}

.indicator-card[data-category="market"] {
  --accent: var(--cyan);
}

.indicator-card[data-category="economy"] {
  --accent: var(--green);
}

.indicator-card[data-category="liquidity"] {
  --accent: var(--amber);
}

.indicator-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--accent);
  opacity: 0.85;
}

.indicator-card h3 {
  min-height: 46px;
  line-height: 1.25;
}

.indicator-value-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}

.indicator-value {
  font-size: 32px;
  font-weight: 620;
  line-height: 1;
  letter-spacing: -0.7px;
}

.indicator-unit {
  color: var(--muted);
  font-size: 12px;
}

.indicator-change {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--neutral-soft);
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 650;
}

.indicator-change.positive {
  color: var(--green);
  background: var(--calm-soft);
}

.indicator-change.negative {
  color: var(--red);
  background: var(--danger-soft);
}

.indicator-chart {
  height: 82px;
  margin-top: 13px;
}

.indicator-chart svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.indicator-meaning {
  min-height: 67px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.indicator-meaning strong {
  margin-right: 4px;
  color: var(--muted-strong);
  font-weight: 650;
}

.indicator-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
}

.indicator-meta a {
  color: var(--muted-strong);
  text-decoration: none;
}

.indicator-meta a:hover {
  color: var(--text);
}

.event-board {
  padding: 20px;
}

.calendar-source {
  color: var(--muted);
  font-size: 12px;
}

.event-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.event-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  min-height: 88px;
  padding: 13px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--surface-subtle);
}

.event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  border-right: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.event-date strong {
  color: var(--text);
  font-size: 20px;
  font-weight: 620;
}

.event-copy {
  min-width: 0;
  align-self: center;
}

.event-copy strong {
  display: block;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-copy span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.event-copy b {
  color: var(--text);
}

.methodology {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  padding: 23px 0 8px;
  border-top: 1px solid var(--line);
}

.method-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.method-grid p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.method-grid strong {
  display: block;
  margin-bottom: 5px;
  color: var(--muted-strong);
  font-size: 12px;
}

.method-grid span {
  display: block;
}

footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

footer > p {
  max-width: 650px;
  text-align: right;
}

.source-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.source-list a,
.source-list span {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 3px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  color: var(--muted-strong);
  text-decoration: none;
}

.source-list a:hover {
  border-color: #3b4652;
}

.source-list .stale {
  color: var(--orange);
}

.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(11, 14, 17, 0.88);
  color: var(--muted-strong);
  font-size: 12px;
  transition: opacity var(--motion-base) var(--ease-soft), visibility var(--motion-base) var(--ease-soft);
}

.loading-overlay.hidden {
  visibility: hidden;
  opacity: 0;
}

.loader {
  width: 28px;
  height: 28px;
  border: 2px solid var(--line);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: spin 850ms linear infinite;
}

.chart-grid-line {
  stroke: rgba(255, 255, 255, 0.055);
  stroke-width: 1;
}

.chart-axis-label {
  fill: var(--muted);
  font-size: 11px;
}

.chart-area {
  opacity: 0.1;
}

.chart-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.chart-dot {
  stroke: var(--panel);
  stroke-width: 3;
}

.bar-chart .chart-bar {
  opacity: 0.72;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1240px) {
  .tactical-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tactical-watchlist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tactical-rules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .strategy-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .allocation-column {
    grid-column: 1 / -1;
    margin-top: 18px;
    padding: 18px 0 0;
    border-top: 1px solid var(--line-soft);
    border-left: 0 !important;
  }

  .strategy-trigger-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .asset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quote-value {
    font-size: 45px;
  }

  .macro-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .buffett-card {
    grid-column: 1 / -1;
  }

  .indicator-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 840px) {
  .shell {
    width: min(100% - 28px, 720px);
    padding-top: 14px;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .top-actions {
    width: 100%;
    justify-content: space-between;
  }

  .live-status {
    margin-right: auto;
  }

  .asset-grid,
  .macro-grid,
  .event-list,
  .method-grid,
  .indicator-grid,
  .tactical-list,
  .tactical-watchlist {
    grid-template-columns: 1fr;
  }

  .tactical-refresh-line,
  .tactical-watch-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .tactical-head {
    grid-template-columns: 1fr;
  }

  .tactical-budget {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 16px;
  }

  .tactical-budget > span,
  .tactical-budget > strong {
    grid-column: 1;
  }

  .tactical-budget p {
    grid-column: 1 / -1;
  }

  .strategy-matrix {
    grid-template-columns: 1fr;
  }

  .strategy-column,
  .strategy-column:first-child,
  .strategy-column:last-child {
    padding: 17px 0 0;
  }

  .strategy-column + .strategy-column {
    margin-top: 17px;
    border-top: 1px solid var(--line-soft);
    border-left: 0;
  }

  .allocation-column {
    margin-top: 17px;
  }

  .strategy-triggers {
    grid-template-columns: 1fr;
  }

  .strategy-trigger-list {
    grid-template-columns: 1fr;
  }

  .buffett-card {
    grid-column: auto;
  }

  .buffett-layout {
    grid-template-columns: 1fr;
  }

  .buffett-chart {
    height: 220px;
  }

  .methodology {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .indicator-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .indicator-tabs {
    width: 100%;
    overflow-x: auto;
  }

  .indicator-tab {
    flex: 1 0 auto;
  }

  footer {
    flex-direction: column;
  }

  footer > p {
    text-align: left;
  }
}

@media (max-width: 540px) {
  .top-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
  }

  .live-status {
    flex: 0 0 100%;
    order: 1;
    margin-right: 0;
  }

  .switch-control {
    order: 2;
  }

  .switch-control > span:first-child {
    display: none;
  }

  .refresh-button {
    order: 3;
    margin-left: auto;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .strategy-board {
    padding: 16px;
  }

  .tactical-board {
    padding: 16px;
  }

  .tactical-heading-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .tactical-heading-row h2 {
    font-size: 21px;
  }

  .tactical-stance {
    font-size: 16px;
  }

  .tactical-rules {
    grid-template-columns: 1fr;
  }

  .tactical-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .strategy-title-row {
    flex-direction: column;
    gap: 10px;
  }

  .strategy-title-row h2 {
    font-size: 21px;
  }

  .strategy-stance {
    font-size: 16px;
  }

  .strategy-summary {
    font-size: 12px;
  }

  .strategy-column-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .strategy-column-head strong {
    text-align: left;
  }

  .sync-line {
    flex-wrap: wrap;
    white-space: normal;
  }

  .asset-card,
  .release-card,
  .buffett-card,
  .event-board,
  .indicator-card {
    padding: 16px;
  }

  .quote-value {
    font-size: 42px;
  }

  .macro-value-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .micro-metric {
    padding: 0;
    border: 0;
    text-align: left;
  }

  .metric-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric-strip div:last-child {
    grid-column: 1 / -1;
  }

  .metric-strip strong {
    white-space: normal;
  }

  .fed-next {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .fed-next strong {
    overflow: visible;
    text-align: left;
    white-space: normal;
  }
}

/* Flatter macOS-inspired surface system */
:root {
  --bg: #090a0c;
  --panel: #141416;
  --panel-strong: #1c1c1f;
  --line: #303035;
  --line-soft: #242429;
  --text: #f5f5f7;
  --muted: #98989d;
  --muted-strong: #d1d1d6;
  --shadow: none;
  --radius: 8px;
}

body {
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", "Microsoft YaHei UI", sans-serif;
}

.shell {
  width: min(1460px, calc(100% - 40px));
  padding: 18px 0 36px;
}

.topbar {
  padding-bottom: 14px;
  border-color: var(--line-soft);
}

.brand h1 {
  font-weight: 600;
}

.brand p,
.live-status,
.switch-control {
  color: var(--muted);
}

.refresh-button {
  min-width: 82px;
  height: 34px;
  border-color: var(--line-soft);
  border-radius: 8px;
  background: var(--panel-strong);
}

main {
  gap: 14px;
  margin-top: 18px;
}

.card,
.strategy-board,
.tactical-board {
  border-color: var(--line-soft);
  border-radius: 8px;
  box-shadow: none;
}

.strategy-board,
.tactical-board {
  padding: 18px;
  background: var(--panel);
}

.strategy-board::before,
.tactical-board::before {
  height: 1px;
  opacity: 0.9;
}

.strategy-lead,
.tactical-head {
  padding-bottom: 14px;
}

.strategy-title-row h2,
.tactical-heading-row h2 {
  font-size: 21px;
  font-weight: 620;
}

.strategy-stance,
.tactical-stance {
  margin-top: 10px;
  padding: 8px 10px;
  border-left-width: 2px;
  border-radius: 0 6px 6px 0;
  font-size: 16px;
  font-weight: 700;
}

.strategy-summary,
.tactical-summary {
  font-size: 12px;
  line-height: 1.65;
}

.strategy-column {
  padding-top: 14px;
}

.strategy-triggers {
  margin-top: 14px;
  padding-top: 14px;
}

.strategy-trigger,
.tactical-rule,
.tactical-refresh-line,
.tactical-watch-card {
  border-color: var(--line-soft);
  border-radius: 8px;
  background: var(--surface-subtle);
}

.section-heading h2,
.methodology h2 {
  font-size: 20px;
  font-weight: 600;
}

.asset-grid,
.macro-grid,
.indicator-grid {
  gap: 10px;
}

.asset-card {
  min-height: 286px;
  padding: 15px;
}

.release-card,
.buffett-card,
.indicator-card {
  min-height: 390px;
  padding: 15px;
}

.asset-card::before,
.release-card::before,
.indicator-card::before {
  height: 1px;
  opacity: 0.75;
}

.card h3 {
  margin-top: 4px;
  font-size: 17px;
  font-weight: 600;
}

.card-kicker,
.eyebrow {
  font-size: 11px;
}

.quote-row {
  margin-top: 15px;
}

.quote-value,
.macro-value {
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 590;
  letter-spacing: -0.5px;
}

.quote-value.compact {
  font-size: clamp(26px, 2.2vw, 34px);
}

.small-chart {
  height: 76px;
  margin-top: 10px;
}

.metric-strip {
  margin-top: 11px;
  padding-top: 10px;
}

.macro-grid {
  grid-template-columns: 1.12fr 1fr 1fr;
}

.buffett-layout {
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}

.buffett-chart {
  height: 170px;
}

.gauge,
.detail-list {
  margin-top: 16px;
}

.release-card {
  padding: 15px;
}

.macro-value-row {
  margin-top: 16px;
}

.macro-chart {
  height: 104px;
  margin-top: 12px;
}

.next-release {
  margin-top: 11px;
  padding-top: 10px;
}

.indicator-card {
  min-height: 300px;
}

.indicator-card h3 {
  min-height: 38px;
}

.indicator-value-row {
  margin-top: 12px;
}

.indicator-value {
  font-size: 28px;
  font-weight: 590;
  letter-spacing: -0.4px;
}

.indicator-chart {
  height: 72px;
  margin-top: 10px;
}

.indicator-tabs {
  border-color: var(--line-soft);
  border-radius: 8px;
  background: var(--panel);
}

.indicator-tab.active {
  background: var(--panel-strong);
  box-shadow: none;
}

.event-board {
  padding: 15px;
}

.event-list {
  gap: 8px;
}

.event-item {
  border-color: var(--line-soft);
  border-radius: 8px;
  background: var(--surface-subtle);
}

.tactical-budget {
  border-radius: 8px;
  background: var(--surface-subtle);
}

.tactical-budget > strong {
  font-size: 30px;
}

.tactical-rules {
  gap: 8px;
}

.tactical-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.tactical-card {
  border-color: var(--line-soft);
  border-radius: 8px;
  background: var(--panel-strong);
}

.tactical-symbol {
  font-size: 17px;
}

.tactical-score b,
.tactical-quote strong {
  font-size: 22px;
  font-weight: 600;
}

.tactical-watchlist {
  gap: 8px;
}

.tactical-watch-card {
  background: var(--surface-subtle);
}

.risk-alert {
  border-left-width: 3px;
  border-radius: 0 6px 6px 0;
}

.card.alerting,
.card.alerting.extreme {
  box-shadow: none;
}

.opportunity-popup {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: start end;
  padding: 18px;
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(10px);
}

.opportunity-popup-panel {
  width: min(430px, calc(100vw - 36px));
  overflow: hidden;
  border: 1px solid #3b3b40;
  border-radius: 8px;
  background: rgba(28, 28, 31, 0.98);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.42);
}

.opportunity-popup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--line-soft);
}

.opportunity-popup-head p {
  color: var(--amber);
  font-size: 11px;
  font-weight: 700;
}

.opportunity-popup-head h2 {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 620;
}

.opportunity-popup-head button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--muted-strong);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.opportunity-popup-list {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.opportunity-popup-item {
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-subtle);
}

.opportunity-popup-item > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.opportunity-popup-item > div:first-child strong {
  font-size: 18px;
  font-weight: 700;
}

.opportunity-popup-item > div:first-child span {
  color: var(--amber);
  font-size: 11px;
  font-weight: 700;
}

.opportunity-popup-item p {
  margin-top: 5px;
  color: var(--muted-strong);
  font-size: 12px;
}

.opportunity-popup-item > div:nth-child(3) {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}

.opportunity-popup-item > div:nth-child(3) span {
  padding: 3px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  color: var(--muted);
  font-size: 11px;
}

.opportunity-popup-item small {
  display: block;
  margin-top: 9px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.opportunity-popup-foot {
  padding: 11px 16px 14px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

@media (max-width: 1240px) {
  .tactical-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .macro-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .buffett-card {
    grid-column: 1 / -1;
    min-height: 360px;
  }
}

@media (max-width: 840px) {
  .shell {
    width: min(100% - 28px, 720px);
    padding-top: 14px;
  }

  .asset-grid,
  .macro-grid,
  .indicator-grid,
  .tactical-list,
  .tactical-watchlist {
    grid-template-columns: 1fr;
  }

  .strategy-matrix,
  .strategy-trigger-list {
    grid-template-columns: 1fr;
  }

  .opportunity-popup {
    place-items: start center;
    padding: 12px;
  }
}

@media (max-width: 540px) {
  .quote-value,
  .macro-value {
    font-size: 32px;
  }

  .strategy-title-row h2,
  .tactical-heading-row h2 {
    font-size: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

.workspace-inline-select {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
}

.workspace-inline-select select {
  height: 28px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-strong);
  color: var(--text);
  font-size: 11px;
}

.workspace-card-link {
  color: var(--blue);
  font-size: 11px;
  text-decoration: none;
}

.benchmark-card,
.rebalance-card {
  margin-top: 10px;
}

.benchmark-chart {
  min-height: 270px;
}

.benchmark-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 0 16px 14px;
  color: var(--muted);
  font-size: 11px;
}

.benchmark-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.benchmark-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.rebalance-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  gap: 8px;
  padding: 14px;
}

.rebalance-item {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-strong);
}

.rebalance-item span,
.rebalance-item strong,
.rebalance-item small {
  display: block;
}

.rebalance-item span {
  color: var(--muted);
  font-size: 11px;
}

.rebalance-item strong {
  margin-top: 5px;
  font-size: 15px;
}

.rebalance-item small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.rebalance-item[data-status="overweight"] strong {
  color: var(--amber);
}

.rebalance-item[data-status="underweight"] strong {
  color: var(--blue);
}

.rebalance-item[data-status="aligned"] strong {
  color: var(--green);
}

.rebalance-form {
  display: grid;
  grid-template-columns: repeat(5, minmax(70px, 1fr)) auto;
  align-items: end;
  gap: 8px;
  padding: 0 14px 13px;
}

.rebalance-form label {
  display: grid;
  gap: 4px;
}

.rebalance-form label span {
  color: var(--muted);
  font-size: 11px;
}

.rebalance-form input {
  min-width: 0;
  height: 30px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-strong);
  color: var(--text);
  font-size: 11px;
}

.csv-import-card {
  grid-column: 1 / -1;
}

.csv-import-body {
  padding: 14px;
}

.csv-upload {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border: 1px dashed color-mix(in srgb, var(--blue) 45%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--blue) 5%, transparent);
  color: var(--blue);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

.csv-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.csv-import-help {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.csv-import-preview {
  display: grid;
  gap: 5px;
  margin-top: 12px;
}

.csv-preview-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.csv-preview-summary span {
  padding: 4px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--panel-strong);
  color: var(--muted-strong);
  font-size: 11px;
}

.csv-preview-row {
  display: grid;
  grid-template-columns: minmax(70px, 0.5fr) minmax(120px, 1fr) minmax(150px, 1fr) minmax(120px, 0.8fr);
  gap: 8px;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--panel-strong);
  font-size: 11px;
}

.csv-preview-row span,
.csv-preview-row small {
  color: var(--muted);
}

.csv-preview-error {
  margin: 0;
  color: var(--red);
  font-size: 11px;
}

.csv-import-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.csv-import-history,
.csv-import-batches {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.csv-import-batches[hidden] {
  display: none;
}

.csv-history-note {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.csv-batches-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 11px;
}

.csv-batches-head strong {
  color: var(--muted-strong);
}

.csv-batch-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 9px;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--panel-strong);
  font-size: 11px;
}

.csv-batch-main strong,
.csv-batch-main span {
  display: block;
}

.csv-batch-main span,
.csv-batch-row small {
  margin-top: 3px;
  color: var(--muted);
}

.exposure-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.exposure-list {
  display: grid;
  gap: 11px;
  padding: 14px;
}

.exposure-row {
  display: grid;
  gap: 6px;
}

.exposure-row > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.exposure-row strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exposure-row span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
}

.exposure-track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line-soft);
}

.exposure-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--blue) 45%, var(--amber)));
}

.tech-exposure {
  display: grid;
  gap: 7px;
  padding: 18px 14px;
}

.tech-exposure strong {
  font-size: 28px;
  font-weight: 650;
}

.tech-exposure span {
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.55;
}

.tech-exposure small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.stress-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.stress-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
}

.stress-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.stress-card-head span {
  color: var(--muted);
  font-size: 11px;
}

.stress-card-head strong {
  font-size: 18px;
}

.stress-card[data-tone="danger"] .stress-card-head strong,
.stress-card[data-tone="danger"] small {
  color: var(--red);
}

.stress-card[data-tone="warning"] .stress-card-head strong {
  color: var(--amber);
}

.stress-card[data-tone="positive"] .stress-card-head strong {
  color: var(--green);
}

.stress-card p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.stress-card > small {
  display: block;
  margin-top: 7px;
  color: var(--muted-strong);
  font-size: 11px;
}

.stress-impact-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}

.stress-impact-list span {
  padding: 4px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--panel-strong);
  color: var(--muted);
  font-size: 11px;
}

.holding-hero h1 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.holding-hero h1 small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.holding-detail-link {
  display: inline-flex;
  width: fit-content;
  margin-top: 8px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 650;
  text-decoration: none;
}

.holding-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.holding-detail-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.holding-detail-card {
  overflow: hidden;
}

.holding-detail-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 14px 14px 14px 32px;
}

.holding-detail-list li {
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.6;
}

.holding-fact-list {
  display: grid;
  padding: 6px 14px 12px;
}

.holding-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}

.holding-fact:last-child {
  border-bottom: 0;
}

.holding-fact span {
  color: var(--muted);
  font-size: 11px;
}

.holding-fact strong {
  text-align: right;
  font-size: 11px;
}

.holding-fact[data-tone="positive"] strong {
  color: var(--green);
}

.holding-fact[data-tone="negative"] strong {
  color: var(--red);
}

.holding-news-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.holding-news-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
}

.holding-news-head {
  display: grid;
  gap: 5px;
}

.holding-news-head a,
.holding-news-head strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
  text-decoration: none;
}

.holding-news-head span {
  color: var(--muted);
  font-size: 11px;
}

.holding-news-card p {
  margin-top: 9px;
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.6;
}

.holding-news-card > small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.holding-news-card[data-tone="positive"] {
  border-left: 3px solid var(--green);
}

.holding-news-card[data-tone="negative"] {
  border-left: 3px solid var(--red);
}

.holding-news-card[data-tone="neutral"] {
  border-left: 3px solid var(--muted);
}

.holding-compact-list {
  display: grid;
  gap: 6px;
  padding: 12px;
}

.holding-compact-list > p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.holding-compact-row {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--panel-strong);
}

.holding-compact-row span,
.holding-compact-row small {
  color: var(--muted);
  font-size: 11px;
}

.holding-compact-row strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-kpis strong[data-tone="positive"] {
  color: var(--green);
}

.workspace-kpis strong[data-tone="negative"] {
  color: var(--red);
}

@media (max-width: 860px) {
  .rebalance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rebalance-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rebalance-form button {
    grid-column: 1 / -1;
  }

  .csv-preview-row {
    grid-template-columns: 1fr 1fr;
  }

  .csv-batch-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .csv-batch-row small {
    grid-column: 1 / -1;
  }

  .exposure-grid,
  .stress-grid,
  .holding-detail-grid,
  .holding-detail-grid.three,
  .holding-news-list {
    grid-template-columns: 1fr;
  }
}

.anomaly-notice {
  align-items: flex-start;
  border-color: rgba(255, 107, 107, 0.36);
  background: var(--danger-soft);
}

.anomaly-notice #dataAnomalyText {
  display: grid;
  gap: 5px;
}

.anomaly-notice #dataAnomalyText span {
  color: var(--muted-strong);
  line-height: 1.55;
}

.anomaly-notice #dataAnomalyText span[data-tone="danger"] {
  color: var(--red);
}

.anomaly-notice #dataAnomalyText span[data-tone="warning"] {
  color: var(--amber);
}

.data-trust-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.data-trust-footer > span {
  min-width: 0;
}

.data-trust-footer > b {
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--neutral-soft);
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 650;
}

.data-trust-footer > b[data-tone="cached"] {
  border-color: rgba(244, 189, 79, 0.32);
  background: var(--warning-soft);
  color: var(--amber);
}

.data-trust-footer > b[data-tone="live"] {
  border-color: rgba(67, 207, 137, 0.34);
  background: rgba(67, 207, 137, 0.12);
  color: var(--green);
}

.data-trust-footer > b[data-tone="delayed"] {
  border-color: rgba(92, 181, 255, 0.34);
  background: rgba(92, 181, 255, 0.1);
  color: var(--blue);
}

.data-trust-footer > b[data-tone="eod"] {
  border-color: rgba(164, 158, 255, 0.32);
  background: rgba(164, 158, 255, 0.1);
  color: #a49eff;
}

.data-trust-footer > b[data-tone="unknown"] {
  border-color: var(--line);
  background: var(--neutral-soft);
  color: var(--muted-strong);
}

.data-trust-footer > b[data-tone="stale"] {
  border-color: rgba(255, 147, 79, 0.34);
  background: rgba(255, 147, 79, 0.1);
  color: var(--orange);
}

.data-trust-footer > b[data-tone="anomaly"] {
  border-color: rgba(255, 107, 107, 0.36);
  background: var(--danger-soft);
  color: var(--red);
}

.indicator-trust {
  margin-top: 8px;
}

.data-trust-footer .indicator-publication {
  flex-basis: 100%;
  color: var(--muted-strong);
  font-weight: 650;
}

.data-trust-footer .indicator-publication[data-tone="warning"] {
  color: var(--amber);
}

.data-trust-footer .indicator-publication-detail {
  flex-basis: 100%;
  overflow-wrap: anywhere;
}

.source-list a.failure {
  color: var(--red);
}

.macro-release-board {
  margin-top: 16px;
}

.macro-release-list {
  display: grid;
  gap: 10px;
}

.macro-release-card {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-strong);
}

.macro-release-card[data-status="pending"] {
  opacity: 0.82;
}

.macro-release-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.macro-release-head > div {
  display: grid;
  gap: 3px;
}

.macro-release-head span,
.macro-release-card > a {
  color: var(--muted);
  font-size: 12px;
}

.macro-release-head > b {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--neutral-soft);
  color: var(--muted-strong);
  font-size: 11px;
}

.macro-release-card[data-status="released"] .macro-release-head > b {
  background: var(--calm-soft);
  color: var(--green);
}

.macro-release-metrics,
.macro-release-reaction {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.macro-release-metrics > div,
.macro-release-reaction > div {
  display: grid;
  gap: 3px;
  padding: 9px;
  border-radius: 6px;
  background: var(--surface-subtle);
}

.macro-release-metrics span,
.macro-release-reaction span {
  color: var(--muted);
  font-size: 11px;
}

.macro-release-metrics strong,
.macro-release-reaction strong {
  font-size: 14px;
}

.macro-release-reaction {
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}

.transaction-attribution {
  grid-column: 1 / -1;
  display: grid;
  gap: 0;
  margin-top: 6px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}

.transaction-attribution-head,
.transaction-attribution-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 11px 12px;
}

.transaction-attribution-head {
  background: var(--neutral-soft);
}

.transaction-attribution-head span,
.transaction-attribution-row small {
  color: var(--muted);
  font-size: 12px;
}

.transaction-attribution-row {
  border-top: 1px solid var(--line-soft);
}

.transaction-attribution-row strong {
  color: var(--muted-strong);
}

.transaction-attribution-row[data-tone="positive"] strong {
  color: var(--green);
}

.transaction-attribution-row[data-tone="negative"] strong {
  color: var(--red);
}

.transaction-attribution-row small {
  grid-column: 1 / -1;
}

.workspace-empty.compact {
  padding: 12px;
}

.data-quality-row.anomaly {
  background: var(--warning-soft);
}

.data-quality-row.anomaly[data-tone="danger"] {
  background: var(--danger-soft);
}

.alert-event-history {
  grid-column: 1 / -1;
  display: grid;
  gap: 0;
  margin-top: 6px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}

.alert-event-history > strong,
.alert-event-history > span {
  padding: 10px 12px;
}

.alert-event-history > span {
  color: var(--muted);
  font-size: 12px;
}

.alert-event-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 12px;
  padding: 11px 12px;
  border-top: 1px solid var(--line-soft);
}

.alert-event-row > span {
  color: var(--muted);
  font-size: 12px;
}

.alert-event-row > p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted-strong);
  font-size: 12px;
}

.alert-event-row[data-tone="danger"] strong {
  color: var(--red);
}

.alert-event-row[data-tone="warning"] strong {
  color: var(--amber);
}

@media (max-width: 680px) {
  .macro-release-metrics,
  .macro-release-reaction {
    grid-template-columns: 1fr;
  }

  .macro-release-head {
    flex-direction: column;
  }
}

/* Final flat macOS-like surface system */
:root {
  color-scheme: light;
  --bg: #f5f5f7;
  --panel: #ffffff;
  --panel-strong: #f2f2f4;
  --line: #d7d7dc;
  --line-soft: #e8e8ec;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --muted-strong: #424245;
  --red: #d92d20;
  --orange: #bf5700;
  --amber: #946200;
  --green: #187a3d;
  --cyan: #087b83;
  --blue: #0071e3;
  --danger-soft: rgba(217, 45, 32, 0.07);
  --warning-soft: rgba(191, 87, 0, 0.07);
  --calm-soft: rgba(24, 122, 61, 0.07);
  --neutral-soft: rgba(110, 110, 115, 0.07);
  --surface-subtle: rgba(29, 29, 31, 0.045);
  --radius: 8px;
  --shadow: none;
}

html {
  background: var(--bg);
}

body {
  background: linear-gradient(180deg, #fbfbfc 0, #f5f5f7 320px, #f5f5f7 100%);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", "Microsoft YaHei UI", sans-serif;
}

.shell {
  width: min(1440px, calc(100% - 48px));
  padding: 0 0 42px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 -16px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(29, 29, 31, 0.1);
  background: rgba(245, 245, 247, 0.86);
  backdrop-filter: saturate(180%) blur(22px);
}

.brand {
  gap: 8px;
}

.brand h1 {
  font-size: 16px;
  font-weight: 600;
}

.brand p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.top-actions {
  gap: 12px;
}

.live-status,
.switch-control {
  color: var(--muted);
  font-size: 12px;
}

.status-dot {
  width: 7px;
  height: 7px;
  box-shadow: none;
}

.refresh-button {
  min-width: 78px;
  height: 32px;
  padding: 0 12px;
  border-color: var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
}

.refresh-button:hover {
  border-color: #bdbdc3;
  background: var(--panel-strong);
}

.switch-track {
  width: 35px;
  height: 20px;
  border: 0;
  background: #dedee3;
}

.switch-track::after {
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
}

.switch-control input:checked + .switch-track {
  background: var(--green);
}

.switch-control input:checked + .switch-track::after {
  transform: translateX(15px);
  background: #ffffff;
}

.notice {
  margin-top: 12px;
  border-color: #e9c48f;
  border-radius: 8px;
  background: #fffaf1;
  color: #714600;
}

main {
  gap: 16px;
  margin-top: 16px;
}

.card,
.strategy-board,
.tactical-board {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: none;
}

.card {
  transition: border-color var(--motion-fast) var(--ease-soft);
}

.card:hover {
  border-color: #c9c9cf;
}

.strategy-board,
.tactical-board {
  padding: 18px;
}

.strategy-board::before,
.tactical-board::before,
.asset-card::before,
.release-card::before,
.indicator-card::before {
  display: none;
}

.strategy-lead,
.tactical-head {
  padding-bottom: 14px;
  border-color: var(--line-soft);
}

.eyebrow,
.card-kicker {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.strategy-title-row h2,
.tactical-heading-row h2 {
  margin-top: 3px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}

.strategy-tone,
.tactical-mode {
  min-height: 25px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.strategy-stance,
.tactical-stance {
  margin-top: 10px;
  padding: 8px 10px;
  border-left-width: 2px;
  border-radius: 0 6px 6px 0;
  background: var(--panel-strong);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}

.strategy-summary,
.tactical-summary {
  margin-top: 7px;
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1.65;
}

.strategy-reasons {
  gap: 6px;
  margin-top: 10px;
}

.strategy-reason,
.threshold-chip,
.source-list a,
.source-list span {
  border-color: var(--line-soft);
  border-radius: 6px;
  background: var(--panel-strong);
  color: var(--muted-strong);
}

.strategy-matrix {
  grid-template-columns: 1fr 1fr 1fr;
}

.strategy-column {
  padding: 16px 18px 0;
}

.strategy-column-head {
  margin-bottom: 10px;
}

.strategy-list,
.allocation-list {
  gap: 8px;
}

.strategy-item {
  padding: 8px 0 8px 10px;
  border-left-width: 2px;
}

.strategy-item strong {
  font-size: 12px;
  font-weight: 600;
}

.strategy-item p,
.allocation-item p {
  font-size: 11px;
  line-height: 1.5;
}

.allocation-track {
  height: 4px;
  background: #e5e5ea;
}

.strategy-triggers {
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 18px;
  margin-top: 16px;
  padding-top: 14px;
}

.strategy-trigger-list {
  gap: 8px;
}

.strategy-trigger,
.tactical-rule,
.tactical-refresh-line,
.tactical-watch-card,
.fed-next,
.event-item {
  border-color: var(--line-soft);
  border-radius: 7px;
  background: var(--panel-strong);
}

.strategy-trigger {
  padding: 9px 10px;
}

.strategy-trigger strong {
  color: var(--amber);
  font-size: 12px;
}

.strategy-trigger p,
.strategy-disclaimer {
  font-size: 11px;
  line-height: 1.55;
}

.tactical-head {
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 20px;
}

.tactical-budget {
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--panel-strong);
}

.tactical-budget > strong {
  font-size: 28px;
  font-weight: 600;
}

.tactical-refresh-line {
  margin-top: 12px;
  padding: 9px 11px;
  font-size: 11px;
}

.tactical-rules {
  gap: 8px;
  margin-top: 10px;
}

.tactical-rule {
  padding: 10px 11px;
}

.tactical-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.tactical-card {
  padding: 14px;
  border-color: var(--line-soft);
  border-radius: 8px;
  background: #f8f8fa;
}

.tactical-card-head > div:first-child > span {
  font-size: 11px;
}

.tactical-symbol {
  font-size: 17px;
  font-weight: 650;
}

.tactical-score b,
.tactical-quote strong {
  color: var(--text);
  font-size: 22px;
  font-weight: 600;
}

.tactical-stage,
.tactical-signal {
  font-size: 11px;
}

.tactical-quote {
  margin-top: 10px;
}

.tactical-metrics,
.tactical-plan {
  gap: 0;
}

.tactical-metrics div,
.tactical-plan div {
  padding: 7px 0;
  border-color: var(--line-soft);
}

.tactical-chart {
  height: 62px;
  margin-top: 7px;
}

.tactical-watch {
  margin-top: 12px;
  padding-top: 12px;
}

.tactical-watchlist {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tactical-watch-card {
  padding: 10px;
}

.section-heading {
  margin-top: 4px;
  padding: 2px 2px 0;
}

.section-heading.second {
  margin-top: 2px;
}

.section-heading h2,
.methodology h2 {
  font-size: 19px;
  font-weight: 600;
}

.sync-line {
  color: var(--muted);
  font-size: 11px;
}

.asset-grid,
.macro-grid,
.indicator-grid {
  gap: 10px;
}

.asset-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.asset-card {
  min-height: 276px;
  padding: 15px;
}

.release-card,
.buffett-card,
.indicator-card {
  min-height: 332px;
  padding: 15px;
}

.card-head {
  gap: 12px;
}

.card h3 {
  margin-top: 3px;
  font-size: 17px;
  font-weight: 600;
}

.state-pill {
  min-height: 22px;
  padding: 2px 7px;
  border-color: var(--line-soft);
  border-radius: 999px;
  background: var(--neutral-soft);
  font-size: 11px;
}

.quote-row {
  margin-top: 15px;
}

.quote-value,
.macro-value {
  font-size: clamp(28px, 2.5vw, 36px);
  font-weight: 600;
  letter-spacing: -0.5px;
}

.quote-value.compact {
  font-size: clamp(25px, 2.1vw, 32px);
}

.small-chart {
  height: 72px;
  margin-top: 9px;
}

.threshold-summary {
  gap: 4px;
  margin-top: 9px;
}

.threshold-chip {
  min-height: 20px;
  padding: 2px 5px;
  font-size: 11px;
}

.metric-strip {
  margin-top: 10px;
  padding-top: 9px;
}

.metric-strip span,
.micro-metric span {
  margin-bottom: 3px;
  font-size: 11px;
}

.metric-strip strong {
  font-size: 11px;
}

.risk-alert {
  margin-top: 7px;
  padding: 9px 10px;
  border-left-width: 3px;
  border-radius: 0 6px 6px 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.card.alerting,
.card.alerting.extreme {
  box-shadow: none;
}

.macro-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.buffett-layout {
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 10px;
}

.gauge {
  margin-top: 14px;
}

.buffett-chart {
  height: 112px;
}

.detail-list {
  margin-top: 12px;
}

.detail-list div {
  padding: 7px 0;
}

.macro-value-row {
  margin-top: 16px;
}

.macro-chart {
  height: 90px;
  margin-top: 12px;
}

.next-release {
  margin-top: 10px;
  padding-top: 9px;
  font-size: 11px;
}

.indicator-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.indicator-card {
  min-height: 286px;
}

.indicator-card h3 {
  min-height: 36px;
  font-size: 15px;
}

.indicator-value-row {
  margin-top: 11px;
}

.indicator-value {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.indicator-chart {
  height: 64px;
  margin-top: 9px;
}

.indicator-meaning {
  min-height: 58px;
  margin-top: 9px;
  padding-top: 9px;
  font-size: 11px;
}

.indicator-meta {
  margin-top: 8px;
}

.indicator-tabs {
  padding: 2px;
  border-color: var(--line);
  border-radius: 7px;
  background: var(--panel);
}

.indicator-tab {
  min-height: 29px;
  padding: 0 10px;
  color: var(--muted);
  font-size: 11px;
}

.indicator-tab.active {
  background: var(--panel-strong);
  color: var(--text);
  box-shadow: none;
}

.event-board {
  padding: 15px;
}

.event-list {
  gap: 8px;
  margin-top: 12px;
}

.event-item {
  min-height: 76px;
  padding: 10px;
}

.event-date strong {
  font-size: 18px;
}

.event-copy strong {
  font-size: 12px;
}

.event-copy span {
  margin-top: 4px;
  font-size: 11px;
}

.methodology {
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 20px;
  padding: 18px 0 2px;
  border-color: var(--line);
}

.method-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.method-grid p {
  font-size: 11px;
  line-height: 1.6;
}

.method-grid strong {
  font-size: 12px;
}

footer {
  margin-top: 20px;
  padding-top: 14px;
  border-color: var(--line);
  font-size: 11px;
}

.source-list a,
.source-list span {
  min-height: 23px;
  padding: 2px 7px;
}

.loading-overlay {
  background: rgba(245, 245, 247, 0.9);
  color: var(--muted-strong);
}

.loader {
  border-color: #d9d9de;
  border-top-color: var(--blue);
}

.chart-grid-line {
  stroke: rgba(29, 29, 31, 0.08);
}

.chart-axis-label {
  fill: var(--muted);
}

.chart-dot {
  stroke: var(--panel);
}

.opportunity-popup {
  place-items: start end;
  padding: 18px;
  background: rgba(22, 22, 24, 0.16);
  backdrop-filter: blur(8px);
}

.opportunity-popup-panel {
  width: min(420px, calc(100vw - 36px));
  border: 1px solid #d2d2d7;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.16);
}

.opportunity-popup-head {
  padding: 15px;
  border-color: var(--line-soft);
}

.opportunity-popup-head p {
  color: var(--amber);
}

.opportunity-popup-head h2 {
  color: var(--text);
  font-size: 19px;
  font-weight: 600;
}

.opportunity-popup-head button {
  width: 28px;
  height: 28px;
  border-color: var(--line);
  background: var(--panel-strong);
  color: var(--muted-strong);
}

.opportunity-popup-list {
  gap: 7px;
  padding: 10px;
}

.opportunity-popup-item {
  border-color: var(--line-soft);
  border-radius: 7px;
  background: var(--panel-strong);
}

@media (max-width: 1240px) {
  .asset-grid,
  .indicator-grid,
  .tactical-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .macro-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .buffett-card {
    grid-column: 1 / -1;
    min-height: 300px;
  }
}

@media (max-width: 840px) {
  .shell {
    width: min(100% - 28px, 720px);
  }

  .topbar {
    margin: 0 -14px;
    padding-right: 14px;
    padding-left: 14px;
  }

  .asset-grid,
  .macro-grid,
  .indicator-grid,
  .tactical-list,
  .tactical-watchlist,
  .strategy-matrix,
  .strategy-trigger-list,
  .event-list {
    grid-template-columns: 1fr;
  }

  .strategy-triggers,
  .methodology {
    grid-template-columns: 1fr;
  }

  .method-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .opportunity-popup {
    place-items: start center;
    padding: 12px;
  }
}

@media (max-width: 620px) {
  .topbar {
    position: static;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
  }

  .top-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .live-status {
    flex: 1 1 100%;
  }

  .switch-control {
    flex: 1 1 auto;
  }

  .refresh-button {
    flex: 0 0 auto;
  }

  .strategy-board,
  .tactical-board {
    padding: 14px;
  }

  .strategy-column {
    padding: 14px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }

  .strategy-column:first-child {
    border-top: 0;
  }

  .tactical-head {
    grid-template-columns: 1fr;
  }

  .method-grid {
    grid-template-columns: 1fr;
  }

  .quote-value,
  .macro-value {
    font-size: 30px;
  }

  .strategy-title-row h2,
  .tactical-heading-row h2 {
    font-size: 18px;
  }
}

/* Theme control */
.theme-control {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #e9e9ed;
}

.theme-option {
  min-height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-soft), color var(--motion-fast) var(--ease-soft);
}

.theme-option:hover {
  color: var(--text);
}

.theme-option[aria-pressed="true"] {
  background: #ffffff;
  color: var(--text);
}

@media (max-width: 620px) {
  .theme-control {
    flex: 0 0 auto;
  }
}

/* Dark theme */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0b0d;
  --panel: #151517;
  --panel-strong: #202023;
  --line: #353539;
  --line-soft: #29292d;
  --text: #f5f5f7;
  --muted: #a1a1a6;
  --muted-strong: #d1d1d6;
  --red: #ff6b6b;
  --orange: #ff9f5a;
  --amber: #f2bd58;
  --green: #58d17e;
  --cyan: #5edbd3;
  --blue: #6cb5ff;
  --danger-soft: rgba(255, 107, 107, 0.1);
  --warning-soft: rgba(242, 189, 88, 0.1);
  --calm-soft: rgba(88, 209, 126, 0.1);
  --neutral-soft: rgba(161, 161, 166, 0.1);
  --surface-subtle: rgba(255, 255, 255, 0.025);
}

:root[data-theme="dark"] body {
  background: linear-gradient(180deg, #111113 0, #0b0b0d 320px, #0b0b0d 100%);
}

:root[data-theme="dark"] .topbar {
  border-bottom-color: rgba(255, 255, 255, 0.09);
  background: rgba(11, 11, 13, 0.86);
}

:root[data-theme="dark"] .refresh-button {
  background: #1c1c1f;
}

:root[data-theme="dark"] .refresh-button:hover,
:root[data-theme="dark"] .card:hover {
  border-color: #4b4b50;
  background: #202023;
}

:root[data-theme="dark"] .switch-track {
  background: #3a3a3e;
}

:root[data-theme="dark"] .notice {
  border-color: #5f4728;
  background: #211a11;
  color: #e8c28b;
}

:root[data-theme="dark"] .theme-control {
  background: #26262a;
}

:root[data-theme="dark"] .theme-option[aria-pressed="true"] {
  background: #48484d;
  color: #ffffff;
}

:root[data-theme="dark"] .allocation-track {
  background: #353539;
}

:root[data-theme="dark"] .tactical-card {
  background: #1b1b1e;
}

:root[data-theme="dark"] .risk-alert {
  background: rgba(148, 98, 0, 0.14);
  color: #efc46f;
}

:root[data-theme="dark"] .risk-alert.danger {
  background: rgba(217, 45, 32, 0.13);
  color: #ffaaaa;
}

:root[data-theme="dark"] .chart-grid-line {
  stroke: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .loading-overlay {
  background: rgba(11, 11, 13, 0.9);
}

:root[data-theme="dark"] .opportunity-popup {
  background: rgba(0, 0, 0, 0.42);
}

:root[data-theme="dark"] .opportunity-popup-panel {
  border-color: #3f3f44;
  background: rgba(28, 28, 31, 0.98);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.4);
}

/* Navigation, signal history and portfolio risk */
#strategyBoard,
#tacticalBoard,
#alertCenter,
#portfolioBoard,
#marketOverview,
#macroOverview,
#keyIndicators {
  scroll-margin-top: 122px;
}

.section-nav {
  position: sticky;
  top: 59px;
  z-index: 18;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(29, 29, 31, 0.08);
  background: rgba(245, 245, 247, 0.9);
  backdrop-filter: saturate(180%) blur(22px);
  scrollbar-width: none;
}

.section-nav::-webkit-scrollbar {
  display: none;
}

.section-nav a {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}

.section-nav a:hover {
  background: var(--panel-strong);
  color: var(--text);
}

.status-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.status-strip > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
}

.status-strip > div + div {
  border-left: 1px solid var(--line-soft);
}

.status-strip span {
  color: var(--muted);
  font-size: 11px;
}

.status-strip strong {
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signal-board,
.portfolio-board {
  padding: 15px;
}

.signal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.notification-status {
  color: var(--muted);
  font-size: 11px;
}

.secondary-button {
  min-height: 29px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-strong);
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.secondary-button:hover {
  border-color: #bdbdc3;
  color: var(--text);
}

.secondary-button.primary {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
  background: color-mix(in srgb, var(--blue) 10%, var(--panel));
  color: var(--blue);
}

.secondary-button:disabled {
  opacity: 0.55;
  cursor: default;
}

.signal-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.signal-summary > div {
  padding: 10px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--panel-strong);
}

.signal-summary span {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.signal-summary strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 19px;
  font-weight: 600;
}

.signal-columns {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.subsection-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.subsection-head strong {
  font-size: 12px;
  font-weight: 600;
}

.subsection-head span {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.alert-list,
.signal-history-list {
  display: grid;
  align-content: start;
  gap: 7px;
}

.signal-history-pagination {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  padding-top: 9px;
  border-top: 1px solid var(--line-soft);
}

.signal-page-button {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color var(--motion-fast) var(--ease-soft),
    background-color var(--motion-fast) var(--ease-soft),
    color var(--motion-fast) var(--ease-soft),
    transform var(--motion-fast) var(--ease-apple);
}

.signal-page-button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
  background: color-mix(in srgb, var(--blue) 6%, var(--panel));
  color: var(--blue);
}

.signal-page-button:active:not(:disabled) {
  transform: scale(0.96);
}

.signal-page-button:disabled {
  opacity: 0.42;
  cursor: default;
}

.signal-page-status {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alert-item,
.history-item {
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--panel-strong);
}

.alert-item > div:first-child,
.history-item > div:first-child {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.alert-item > div:first-child div,
.history-item > div:first-child div {
  min-width: 0;
}

.alert-item strong,
.history-item strong {
  display: block;
  font-size: 12px;
  font-weight: 650;
}

.alert-item span,
.history-item span,
.alert-item time {
  color: var(--muted);
  font-size: 11px;
}

.alert-item p {
  margin-top: 7px;
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.5;
}

.inline-action {
  margin-top: 8px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  color: var(--muted-strong);
  font-size: 11px;
  cursor: pointer;
}

.inline-action:hover {
  color: var(--text);
}

.history-item > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.history-item > div:last-child span {
  padding: 3px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: var(--panel);
}

.history-outcome {
  flex: 0 0 auto;
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--neutral-soft);
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 700;
}

.history-outcome.positive {
  background: var(--calm-soft);
  color: var(--green);
}

.history-outcome.negative {
  background: var(--danger-soft);
  color: var(--red);
}

.signal-empty {
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.portfolio-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.portfolio-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
}

.portfolio-form label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px 14px;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--panel-strong);
}

.portfolio-form label span {
  overflow: hidden;
  color: var(--muted-strong);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-form input {
  width: 58px;
  height: 27px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  text-align: right;
}

.portfolio-form b {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.portfolio-results {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px;
}

.portfolio-score {
  padding: 13px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--panel-strong);
}

.portfolio-score span {
  color: var(--muted);
  font-size: 11px;
}

.portfolio-score strong {
  display: block;
  margin-top: 7px;
  font-size: 26px;
  font-weight: 600;
}

.portfolio-score p {
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.stress-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 8px;
}

.stress-intro {
  margin: 7px 0 9px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.holding-diagnostics {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(390px, 440px);
  grid-template-rows: 1fr;
  align-items: stretch;
  gap: 12px;
  margin-top: 10px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 1px 1px 8px;
  scroll-padding-inline: 1px;
  scroll-snap-type: x mandatory;
  scrollbar-color: color-mix(in srgb, var(--muted) 34%, transparent) transparent;
  scrollbar-width: thin;
}

.holding-diagnostics::-webkit-scrollbar {
  height: 5px;
}

.holding-diagnostics::-webkit-scrollbar-track {
  background: transparent;
}

.holding-diagnostics::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 34%, transparent);
}

.holding-diagnostic {
  --diagnostic-tone: var(--blue);
  min-height: 100%;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--diagnostic-tone);
  border-radius: 8px;
  background: var(--panel-strong);
  scroll-snap-align: start;
  animation: panel-enter var(--motion-slow) var(--ease-apple) backwards;
  transition:
    border-color var(--motion-base) var(--ease-soft),
    box-shadow var(--motion-base) var(--ease-soft),
    transform var(--motion-base) var(--ease-apple);
}

.holding-diagnostic:hover {
  border-color: color-mix(in srgb, var(--diagnostic-tone) 30%, var(--line));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07);
  transform: translateY(-1px);
}

@keyframes panel-enter {
  from {
    opacity: 0;
    transform: translateY(7px) scale(0.992);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.holding-diagnostic[data-tone="negative"] {
  --diagnostic-tone: var(--red);
}

.holding-diagnostic[data-tone="positive"] {
  --diagnostic-tone: var(--green);
}

.holding-diagnostic-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.holding-diagnostic-head > div:first-child {
  min-width: 0;
}

.holding-diagnostic-head strong,
.holding-diagnostic-head span {
  display: block;
}

.holding-diagnostic-head > div:first-child strong {
  color: var(--diagnostic-tone);
  font-size: 14px;
}

.holding-diagnostic-head > div:first-child span {
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.holding-diagnostic-performance {
  flex: 0 0 auto;
  text-align: right;
}

.holding-diagnostic-performance b {
  color: var(--diagnostic-tone);
  font-size: 15px;
}

.holding-diagnostic-performance span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.holding-diagnostic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.holding-diagnostic-tags span,
.holding-diagnostic-metrics span {
  padding: 2px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 11px;
}

.holding-diagnostic-summary {
  margin-top: 9px;
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.65;
}

.holding-diagnostic-snapshot {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.holding-diagnostic-snapshot > span {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--panel);
}

.holding-diagnostic-snapshot small,
.holding-diagnostic-snapshot strong {
  display: block;
}

.holding-diagnostic-snapshot small {
  color: var(--muted);
  font-size: 11px;
}

.holding-diagnostic-snapshot strong {
  margin-top: 3px;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.holding-diagnostic-section {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

.holding-diagnostic-section > strong {
  display: block;
  color: var(--text);
  font-size: 11px;
}

.holding-diagnostic-section p {
  margin-top: 5px;
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.6;
}

.holding-diagnostic-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
}

.holding-diagnostic-section ul {
  display: grid;
  gap: 5px;
  margin: 6px 0 0;
  padding-left: 14px;
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.55;
}

.holding-diagnostic-section.recovery {
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--red) 22%, var(--line-soft));
  border-radius: 7px;
  background: color-mix(in srgb, var(--red) 4%, var(--panel));
}

.holding-diagnostic-section.recovery > strong {
  color: var(--red);
}

.holding-recovery-scenarios {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 9px;
}

.holding-recovery-scenarios > div {
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--panel);
}

.holding-recovery-scenarios span,
.holding-recovery-scenarios b,
.holding-recovery-scenarios small {
  display: block;
}

.holding-recovery-scenarios span {
  color: var(--muted);
  font-size: 11px;
}

.holding-recovery-scenarios b {
  margin-top: 3px;
  color: var(--text);
  font-size: 11px;
}

.holding-recovery-scenarios small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.holding-diagnostic-list-title {
  margin-top: 10px;
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 650;
}

.holding-diagnostic-section.recovery small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.holding-diagnostic-section.profit-guard {
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--green) 24%, var(--line-soft));
  border-radius: 7px;
  background: color-mix(in srgb, var(--green) 4%, var(--panel));
}

.holding-diagnostic-section.profit-guard > strong {
  color: var(--green);
}

.holding-diagnostic-section.profit-guard > small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.holding-diagnostic-section.strategy > strong {
  color: var(--blue);
}

.holding-diagnostic-section.risk > strong {
  color: var(--amber);
}

.stress-item {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--panel-strong);
  animation: panel-enter var(--motion-slow) var(--ease-apple) backwards;
  transition:
    border-color var(--motion-base) var(--ease-soft),
    background-color var(--motion-base) var(--ease-soft),
    box-shadow var(--motion-base) var(--ease-soft);
}

.stress-item:hover {
  border-color: color-mix(in srgb, var(--blue) 24%, var(--line));
}

.stress-item[open] {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
  background: color-mix(in srgb, var(--blue) 3%, var(--panel-strong));
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
}

.stress-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  list-style: none;
  cursor: pointer;
}

.stress-item > summary::-webkit-details-marker {
  display: none;
}

.stress-item > summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 13px;
}

.stress-item[open] > summary::after {
  content: "−";
}

.stress-item > summary div {
  min-width: 0;
}

.stress-item > summary strong,
.stress-item > summary span {
  display: block;
}

.stress-item > summary strong {
  font-size: 11px;
}

.stress-item > summary span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.stress-item > b {
  flex: 0 0 auto;
  font-size: 12px;
}

.stress-item > summary > b {
  flex: 0 0 auto;
  font-size: 12px;
}

.stress-item.negative > b {
  color: var(--red);
}

.stress-item.positive > b {
  color: var(--green);
}

.stress-item.negative > summary > b {
  color: var(--red);
}

.stress-item.positive > summary > b {
  color: var(--green);
}

.stress-item-body {
  width: 100%;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--line-soft);
  animation: detail-reveal var(--motion-base) var(--ease-apple) both;
}

@keyframes detail-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stress-item-body > p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.stress-holding-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
}

.stress-holding-list > div {
  display: grid;
  grid-template-columns: minmax(48px, 0.75fr) minmax(0, 1fr);
  gap: 3px 7px;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--panel);
}

.stress-holding-list strong {
  color: var(--text);
  font-size: 11px;
}

.stress-holding-list span {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.stress-holding-list b {
  grid-column: 1 / -1;
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 650;
}

.stress-holding-list b.negative {
  color: var(--red);
}

.stress-holding-list b.positive {
  color: var(--green);
}

.stress-more {
  align-self: center;
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

:root[data-theme="dark"] .section-nav {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background: rgba(11, 11, 13, 0.9);
}

:root[data-theme="dark"] .secondary-button:hover {
  border-color: #55555a;
}

@media (max-width: 1040px) {
  .signal-columns,
  .portfolio-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 840px) {
  .section-nav {
    top: 59px;
  }

  .status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .status-strip > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }

  .status-strip > div:nth-child(4) {
    border-top: 1px solid var(--line-soft);
  }

  .signal-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-results {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .section-nav {
    position: static;
    margin: 0 -14px;
    padding-right: 14px;
    padding-left: 14px;
  }

  .signal-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .notification-status {
    flex: 1 1 100%;
  }

  .portfolio-form {
    grid-template-columns: 1fr;
  }
}

/* Account portfolio and email delivery */
.card-subtitle {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.account-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 92px;
  margin-top: 14px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 11px;
}

.account-loading-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  animation: account-loading-pulse 1.2s ease-in-out infinite;
}

@keyframes account-loading-pulse {
  50% {
    opacity: 0.35;
    transform: scale(0.8);
  }
}

.auth-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(340px, 1.25fr);
  gap: 28px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.auth-intro {
  padding: 8px 0;
}

.auth-intro strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
}

.auth-intro p {
  max-width: 360px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.auth-form-wrap {
  max-width: 560px;
}

.segmented-control {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-strong);
}

.segmented-control button {
  min-width: 68px;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.segmented-control button[aria-pressed="true"] {
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.auth-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  margin-top: 10px;
}

.auth-form label,
.threshold-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.auth-form label > span,
.threshold-field > span {
  color: var(--muted);
  font-size: 11px;
}

.auth-form input,
.threshold-field input,
.holding-row input,
.holding-row select {
  min-width: 0;
  height: 32px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  outline: none;
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
}

.auth-form input:focus,
.threshold-field input:focus,
.holding-row input:focus,
.holding-row select:focus {
  border-color: color-mix(in srgb, var(--blue) 58%, var(--line));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 10%, transparent);
}

.account-primary-button {
  min-height: 32px;
  padding: 0 13px;
  border: 0;
  border-radius: 6px;
  background: var(--blue);
  color: #ffffff;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}

.account-primary-button:hover {
  filter: brightness(0.95);
}

.account-primary-button:disabled,
.secondary-button:disabled {
  opacity: 0.52;
  cursor: default;
}

.account-primary-button.compact {
  min-height: 29px;
  padding: 0 10px;
}

.form-feedback {
  grid-column: 1 / -1;
  min-height: 14px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.form-feedback.error {
  color: var(--red);
}

.form-feedback.success {
  color: var(--green);
}

.portfolio-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.portfolio-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-strong);
}

.portfolio-kpis > div {
  min-width: 0;
  padding: 11px 12px;
}

.portfolio-kpis > div + div {
  border-left: 1px solid var(--line-soft);
}

.portfolio-kpis span,
.portfolio-kpis small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.portfolio-kpis strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-kpis small {
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-kpis strong.positive {
  color: var(--green);
}

.portfolio-kpis strong.negative {
  color: var(--red);
}

.portfolio-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.92fr);
  align-items: start;
  gap: 24px;
  margin-top: 18px;
}

.holding-editor,
.portfolio-summary-panel,
.portfolio-analysis {
  min-width: 0;
}

.portfolio-summary-panel {
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--blue) 4%, transparent), transparent 54%),
    var(--panel-strong);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.portfolio-detail-grid {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.portfolio-diagnostics-panel,
.portfolio-stress-panel {
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel-strong) 84%, transparent);
}

.portfolio-diagnostics-panel .analysis-block,
.portfolio-stress-panel .analysis-block {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.holding-search {
  position: relative;
  margin-bottom: 8px;
}

.holding-search input {
  width: 100%;
  height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-control);
  outline: none;
  background: var(--surface-subtle);
  color: var(--text);
  font-size: 13px;
}

.holding-search input:focus-visible {
  border-color: color-mix(in srgb, var(--blue) 52%, var(--line-soft));
}

.holding-search input:disabled {
  color: var(--muted);
  cursor: not-allowed;
}

.holding-search-results {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-card);
  background: var(--panel-strong);
  box-shadow: var(--glass-shadow);
}

.holding-search-empty {
  padding: 10px;
  color: var(--muted);
  font-size: 12px;
}

.holding-search-item {
  display: grid;
  grid-template-columns: minmax(0, auto) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.holding-search-item:hover,
.holding-search-item:focus-visible {
  outline: none;
  background: var(--surface-subtle);
}

.holding-search-symbol {
  font-size: 13px;
  font-weight: 700;
}

.holding-search-name {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.holding-search-kind,
.holding-kind {
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 16%, transparent);
  color: var(--blue);
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}

.holding-search-kind[data-kind="bond"],
.holding-kind[data-kind="bond"] {
  background: color-mix(in srgb, var(--green) 16%, transparent);
  color: var(--green);
}

.holding-search-kind[data-kind="gold"],
.holding-kind[data-kind="gold"] {
  background: color-mix(in srgb, var(--amber) 18%, transparent);
  color: var(--amber);
}

.holding-search-kind[data-kind="crypto"],
.holding-kind[data-kind="crypto"] {
  background: color-mix(in srgb, var(--orange) 18%, transparent);
  color: var(--orange);
}

.holding-search-kind[data-kind="cash"],
.holding-kind[data-kind="cash"] {
  background: var(--surface-subtle);
  color: var(--muted-strong);
}

.holding-search-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.holding-search-bar .secondary-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .holding-search-bar {
    flex-direction: column;
    align-items: stretch;
  }
}

.holding-help {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.holdings-editor {
  display: grid;
  gap: 5px;
}

.holding-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(104px, 1.2fr) repeat(3, minmax(0, 0.85fr)) minmax(0, 0.85fr) 28px;
  align-items: center;
  gap: 6px;
  padding: 7px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--panel-strong);
}

.holding-row[data-asset-class="cash"] {
  grid-template-columns: minmax(104px, 1.2fr) minmax(0, 1fr) 28px;
}

.holding-row:focus-within,
.holding-row:has(.custom-select.is-open) {
  z-index: 20;
}

.holding-identity {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.holding-identity-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.holding-symbol {
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.holding-name {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.holding-field {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.holding-field-label {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.2;
}

.holding-row input,
.holding-row select {
  width: 100%;
  height: 30px;
  padding: 0 8px;
  background: var(--panel);
  font-size: 11px;
}

.holding-row input:disabled {
  background: color-mix(in srgb, var(--muted) 7%, var(--panel));
  color: var(--muted);
  cursor: not-allowed;
  opacity: 1;
}

.custom-select {
  position: relative;
  min-width: 0;
}

.custom-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip-path: inset(50%);
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  width: 100%;
  height: 29px;
  padding: 0 7px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}

.custom-select-trigger:hover {
  border-color: color-mix(in srgb, var(--blue) 28%, var(--line));
  background: color-mix(in srgb, var(--blue) 4%, var(--panel));
}

.custom-select-trigger:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--blue) 60%, transparent);
  outline-offset: 1px;
}

.custom-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select-chevron {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-right: 1px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-1px) rotate(45deg);
  transition:
    transform var(--motion-fast) var(--ease-apple),
    border-color var(--motion-fast) var(--ease-soft);
}

.custom-select:hover .custom-select-chevron,
.custom-select.is-open .custom-select-chevron {
  border-color: var(--text);
}

.custom-select.is-open .custom-select-chevron {
  transform: translateY(1px) rotate(225deg);
}

.custom-select-menu {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  z-index: 90;
  display: grid;
  gap: 2px;
  width: 100%;
  min-width: 116px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, white 4%, transparent), transparent 54%),
    color-mix(in srgb, var(--panel-strong) 96%, transparent);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.16),
    0 3px 10px rgba(0, 0, 0, 0.08);
  backdrop-filter: saturate(180%) blur(22px);
  transform-origin: top center;
}

.custom-select.is-open .custom-select-menu {
  animation: custom-menu-in var(--motion-fast) var(--ease-apple) both;
}

.custom-select.is-closing .custom-select-menu {
  pointer-events: none;
  animation: custom-menu-out var(--fade-out-duration) var(--ease-soft) both;
}

.custom-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 29px;
  padding: 0 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted-strong);
  font-size: 11px;
  text-align: left;
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--ease-soft),
    background-color var(--motion-fast) var(--ease-soft);
}

.custom-select-option:hover,
.custom-select-option:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  color: var(--text);
}

.custom-select-option[aria-selected="true"] {
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  color: var(--text);
}

.custom-select-check {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 12px;
  opacity: 0;
  transform: scale(0.72);
  transition:
    opacity var(--motion-fast) var(--ease-soft),
    transform var(--motion-fast) var(--ease-apple);
}

.custom-select-option[aria-selected="true"] .custom-select-check {
  opacity: 1;
  transform: scale(1);
}

.custom-select.is-open .custom-select-option {
  animation: custom-option-in var(--motion-base) var(--ease-apple) both;
  animation-delay: calc(30ms + var(--option-index) * 32ms);
}

.custom-select.is-closing .custom-select-option {
  animation: custom-option-out var(--fade-out-duration) var(--ease-soft) both;
  animation-delay: calc(var(--option-index) * 16ms);
}

@keyframes custom-menu-in {
  from {
    opacity: 0.7;
    transform: translateY(-4px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes custom-menu-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(-3px) scale(0.988);
  }
}

@keyframes custom-option-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.982);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes custom-option-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(4px) scale(0.985);
  }
}

.holding-remove {
  width: 27px;
  height: 27px;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.holding-remove:hover {
  border-color: color-mix(in srgb, var(--red) 32%, var(--line));
  color: var(--red);
}

.holding-empty {
  padding: 22px 14px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.holding-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 9px;
}

.analysis-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.analysis-head > div {
  min-width: 0;
}

.analysis-head span,
.analysis-head strong {
  display: block;
}

.analysis-head span {
  color: var(--muted);
  font-size: 11px;
}

.analysis-head strong {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.analysis-head b {
  flex: 0 0 auto;
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
}

.risk-meter {
  height: 5px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line-soft);
}

.risk-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
  transition: width var(--motion-fast) var(--ease-soft), background var(--motion-fast) var(--ease-soft);
}

.risk-meter span.warning {
  background: var(--amber);
}

.risk-meter span.danger {
  background: var(--red);
}

#portfolioWeights {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  margin-top: 12px;
}

#portfolioWeights .allocation-item {
  min-width: 0;
}

.analysis-block {
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
}

.suggestion-list {
  display: grid;
  gap: 6px;
}

.suggestion-item {
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr);
  gap: 7px;
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.5;
}

.suggestion-item::before {
  content: "•";
  color: var(--blue);
}

.email-preferences {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 10px 16px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.notification-preference-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.email-preferences > .secondary-button {
  justify-self: start;
}

.preference-copy strong,
.preference-copy span {
  display: block;
}

.preference-copy strong {
  font-size: 12px;
  font-weight: 600;
}

.preference-copy span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.preference-switch {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted-strong);
  font-size: 11px;
  cursor: pointer;
}

.preference-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.preference-switch i {
  position: relative;
  display: block;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: #dedee3;
  transition:
    background-color var(--motion-base) var(--ease-apple),
    transform var(--motion-fast) var(--ease-apple);
}

.preference-switch i::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
  transition: transform var(--motion-base) var(--ease-apple);
}

.preference-switch input:checked + i {
  background: var(--green);
}

.preference-switch input:checked + i::after {
  transform: translateX(14px);
}

.preference-switch:active i {
  transform: scale(0.94);
}

.threshold-field {
  grid-template-columns: auto 48px;
  align-items: center;
  gap: 7px;
}

.threshold-field input {
  width: 48px;
  height: 29px;
  padding: 0 6px;
  text-align: right;
}

.quiet-time-field {
  grid-template-columns: auto 74px;
}

.quiet-time-field input {
  width: 74px;
  text-align: center;
}

.quiet-time-field input:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.email-preferences .full {
  grid-column: 1 / -1;
  min-height: 0;
  margin-top: -4px;
}

.notification-delivery {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.notification-delivery .subsection-head {
  align-items: center;
  gap: 10px;
}

.notification-delivery .subsection-head span {
  flex: 1;
  color: var(--muted);
  font-size: 11px;
}

.notification-delivery-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.notification-delivery-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-control);
  background: var(--panel);
}

.notification-delivery-item > div {
  min-width: 0;
  flex: 1;
}

.notification-delivery-item strong,
.notification-delivery-item span {
  display: block;
}

.notification-delivery-item strong {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-delivery-item div span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.notification-delivery-state {
  flex: 0 0 auto;
  color: var(--muted-strong);
  font-size: 11px;
}

.notification-delivery-item[data-status="delivered"] .notification-delivery-state {
  color: var(--green);
}

.notification-delivery-item[data-status="failed"] .notification-delivery-state {
  color: var(--red);
}

.notification-delivery-empty,
.notification-policy {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 17px;
}

.notification-delivery-empty {
  padding: 8px 0;
}

.notification-policy {
  margin-top: 8px;
}

@media (max-width: 760px) {
  .notification-delivery .subsection-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 8px;
  }
  .notification-delivery .subsection-head > span {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .notification-delivery .subsection-head > button {
    width: auto;
    grid-column: 2;
    grid-row: 1;
  }
}

:root[data-theme="dark"] .segmented-control button[aria-pressed="true"] {
  box-shadow: none;
}

:root[data-theme="dark"] .holding-row input,
:root[data-theme="dark"] .holding-row select {
  color-scheme: dark;
}

:root[data-theme="dark"] .preference-switch i {
  background: #3a3a3e;
}

:root[data-theme="dark"] .preference-switch i::after {
  background: #ffffff;
}

:root[data-theme="dark"] .preference-switch input:checked + i {
  background: var(--green);
}

@media (max-width: 1040px) {
  .portfolio-workspace {
    grid-template-columns: 1fr;
  }

  .holding-diagnostics {
    grid-auto-columns: minmax(360px, 46vw);
  }

  .email-preferences {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .portfolio-board .card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .holding-diagnostic-snapshot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .holding-recovery-scenarios,
  .stress-holding-list {
    grid-template-columns: 1fr;
  }

  .holding-diagnostics {
    grid-auto-columns: min(calc(100vw - 62px), 520px);
  }

  .stress-list {
    grid-template-columns: 1fr;
  }

  .portfolio-diagnostics-panel,
  .portfolio-stress-panel {
    padding: 13px;
  }

  .portfolio-board .signal-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .auth-panel {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .auth-form {
    grid-template-columns: 1fr;
  }

  .account-primary-button {
    width: 100%;
  }

  .portfolio-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-kpis > div:nth-child(3) {
    border-top: 1px solid var(--line-soft);
    border-left: 0;
  }

  .portfolio-kpis > div:nth-child(4) {
    border-top: 1px solid var(--line-soft);
  }

  .holding-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 28px;
  }

  .holding-row input,
  .holding-row select,
  .custom-select-trigger {
    height: 32px;
  }

  .holding-row .holding-identity {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  .holding-row .holding-remove {
    grid-column: 3;
    grid-row: 1;
  }

  .holding-row .holding-field[data-field="quantity"] {
    grid-column: 1;
    grid-row: 2;
  }

  .holding-row .holding-field[data-field="averageCost"] {
    grid-column: 2;
    grid-row: 2;
  }

  .holding-row .holding-field[data-field="currency"] {
    grid-column: 1;
    grid-row: 3;
  }

  .holding-row .holding-field[data-field="fxRateToUsd"] {
    grid-column: 2;
    grid-row: 3;
  }

  .holding-row[data-asset-class="cash"] {
    grid-template-columns: minmax(0, 1fr) 28px;
  }

  .holding-row[data-asset-class="cash"] .holding-identity {
    grid-column: 1;
    grid-row: 1;
  }

  .holding-row[data-asset-class="cash"] .holding-remove {
    grid-column: 2;
    grid-row: 1;
  }

  .holding-row[data-asset-class="cash"] .holding-field {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  .email-preferences {
    grid-template-columns: 1fr;
  }

  .preference-copy {
    grid-column: 1 / -1;
  }

  .email-preferences .secondary-button {
    width: 100%;
  }

  .notification-preference-controls {
    align-items: flex-start;
    flex-direction: column;
  }

  .notification-delivery-item {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  .ui-clicking {
    animation: none;
  }

  .custom-select-menu,
  .custom-select-option {
    animation-delay: 0ms !important;
  }
}

@media (max-width: 460px) {
  .portfolio-kpis {
    grid-template-columns: 1fr;
  }

  .portfolio-kpis > div + div,
  .portfolio-kpis > div:nth-child(3) {
    border-top: 1px solid var(--line-soft);
    border-left: 0;
  }

  .holding-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .email-preferences {
    grid-template-columns: 1fr;
  }

  .preference-copy,
  .email-preferences .full {
    grid-column: 1;
  }
}

/* Top-right account menu */
.account-control {
  position: relative;
  flex: 0 0 auto;
}

.account-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 112px;
  height: 36px;
  padding: 3px 10px 3px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}

.account-trigger:hover {
  border-color: #bdbdc3;
  background: var(--panel-strong);
}

.account-trigger:disabled {
  opacity: 0.62;
  cursor: wait;
}

.account-avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--neutral-soft);
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 700;
  background-position: center;
  background-size: cover;
}

.account-avatar.has-image {
  color: transparent;
}

.account-avatar-image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
}

body.avatar-cropper-open {
  overflow: hidden;
}

.avatar-crop-popup {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(16, 16, 18, 0.38);
  backdrop-filter: saturate(160%) blur(12px);
  animation: avatar-crop-popup-in var(--motion-fast) var(--ease-apple) both;
}

.avatar-crop-panel {
  width: min(420px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 98%, transparent);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.24);
  animation: avatar-crop-panel-in var(--motion-base) var(--ease-apple) both;
}

.avatar-crop-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.avatar-crop-head strong,
.avatar-crop-head span {
  display: block;
}

.avatar-crop-head strong {
  font-size: 15px;
  font-weight: 650;
}

.avatar-crop-head span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.avatar-crop-close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  background: var(--panel-strong);
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.avatar-crop-close:hover {
  color: var(--text);
}

.avatar-crop-stage {
  position: relative;
  width: min(360px, calc(100vw - 72px));
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 10px;
  background:
    linear-gradient(45deg, color-mix(in srgb, var(--text) 3%, transparent) 25%, transparent 25%),
    linear-gradient(-45deg, color-mix(in srgb, var(--text) 3%, transparent) 25%, transparent 25%),
    var(--panel-strong);
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
  cursor: grab;
  touch-action: none;
  outline: none;
  user-select: none;
}

.avatar-crop-stage:focus-visible {
  border-color: color-mix(in srgb, var(--blue) 58%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 13%, transparent);
}

.avatar-crop-stage.is-dragging {
  cursor: grabbing;
}

.avatar-crop-image {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  pointer-events: none;
  transform-origin: top left;
  user-select: none;
  will-change: transform;
}

.avatar-crop-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      to right,
      transparent calc(33.333% - 0.5px),
      rgba(255, 255, 255, 0.44) calc(33.333% - 0.5px),
      rgba(255, 255, 255, 0.44) calc(33.333% + 0.5px),
      transparent calc(33.333% + 0.5px),
      transparent calc(66.666% - 0.5px),
      rgba(255, 255, 255, 0.44) calc(66.666% - 0.5px),
      rgba(255, 255, 255, 0.44) calc(66.666% + 0.5px),
      transparent calc(66.666% + 0.5px)
    ),
    linear-gradient(
      to bottom,
      transparent calc(33.333% - 0.5px),
      rgba(255, 255, 255, 0.44) calc(33.333% - 0.5px),
      rgba(255, 255, 255, 0.44) calc(33.333% + 0.5px),
      transparent calc(33.333% + 0.5px),
      transparent calc(66.666% - 0.5px),
      rgba(255, 255, 255, 0.44) calc(66.666% - 0.5px),
      rgba(255, 255, 255, 0.44) calc(66.666% + 0.5px),
      transparent calc(66.666% + 0.5px)
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    inset 0 0 0 999px rgba(0, 0, 0, 0.035);
}

.avatar-crop-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.avatar-crop-zoom {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 42px;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.avatar-crop-zoom > span {
  color: var(--muted);
  font-size: 11px;
}

.avatar-crop-zoom > b {
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 650;
  text-align: right;
}

.avatar-crop-zoom input {
  width: 100%;
  accent-color: var(--blue);
}

.avatar-crop-reset {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-strong);
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

.avatar-crop-reset:hover {
  border-color: color-mix(in srgb, var(--blue) 32%, var(--line));
  color: var(--text);
}

.avatar-crop-feedback {
  min-height: 15px;
  margin: 9px 0 0;
  color: var(--red);
  font-size: 11px;
}

.avatar-crop-actions {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 9px;
  margin-top: 6px;
}

.avatar-crop-actions button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

.avatar-crop-cancel {
  border: 1px solid var(--line);
  background: var(--panel-strong);
  color: var(--text);
}

.avatar-crop-confirm {
  border: 1px solid var(--blue);
  background: var(--blue);
  color: #fff;
}

@keyframes avatar-crop-popup-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes avatar-crop-panel-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.account-avatar.large {
  width: 36px;
  height: 36px;
  background: color-mix(in srgb, var(--blue) 12%, var(--panel-strong));
  color: var(--blue);
  font-size: 13px;
}

.account-trigger-copy {
  display: grid;
  min-width: 0;
  text-align: left;
}

.account-trigger-copy strong,
.account-trigger-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-trigger-copy strong {
  max-width: 92px;
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
}

.account-trigger-copy small {
  margin-top: 1px;
  color: var(--muted);
  font-size: 11px;
}

.account-trigger-copy small.positive {
  color: var(--green);
}

.account-trigger-copy small.negative {
  color: var(--red);
}

.account-popover {
  position: fixed;
  top: 64px;
  right: 14px;
  z-index: 300;
  width: min(340px, calc(100vw - 28px));
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 98%, transparent);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.16);
  backdrop-filter: saturate(180%) blur(24px);
  transform-origin: top right;
}

.account-popover-head strong,
.account-popover-head span {
  display: block;
}

.account-popover-head strong {
  font-size: 15px;
  font-weight: 650;
}

.account-popover-head span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.account-login-form {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.account-login-form label {
  display: grid;
  gap: 5px;
}

.account-login-form label > span {
  color: var(--muted);
  font-size: 11px;
}

.account-login-form input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  outline: none;
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
}

.account-login-form input:focus {
  border-color: color-mix(in srgb, var(--blue) 58%, var(--line));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 10%, transparent);
}

.password-input-wrap {
  position: relative;
  display: block;
}

.password-input-wrap input {
  padding-right: 42px !important;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 5px;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    color var(--motion-fast) var(--ease-soft),
    background-color var(--motion-fast) var(--ease-soft),
    transform var(--motion-fast) var(--ease-apple);
}

.password-toggle:hover,
.password-toggle:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--muted) 9%, transparent);
  color: var(--text);
}

.password-toggle:active {
  transform: translateY(-50%) scale(0.9);
}

.password-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.password-eye-closed {
  display: none;
}

.password-toggle[aria-pressed="true"] .password-eye-open {
  display: none;
}

.password-toggle[aria-pressed="true"] .password-eye-closed {
  display: block;
}

.account-login-form .account-primary-button {
  width: 100%;
  min-height: 34px;
}

.account-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 13px 0 9px;
  color: var(--muted);
  font-size: 11px;
}

.account-divider::before,
.account-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}

.account-secondary-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-strong);
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
  text-decoration: none;
}

.account-secondary-button:hover {
  border-color: #bdbdc3;
}

.account-forgot-link {
  display: block;
  margin-top: 9px;
  color: var(--blue);
  font-size: 11px;
  text-align: right;
  text-decoration: none;
}

.account-forgot-link:hover {
  text-decoration: underline;
}

.account-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line-soft);
}

.account-profile div {
  min-width: 0;
}

.account-profile strong,
.account-profile span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-profile strong {
  font-size: 12px;
  font-weight: 650;
}

.account-profile span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.account-holdings-summary {
  margin-top: 11px;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel-strong) 84%, transparent);
}

.account-holdings-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px 7px;
}

.account-holdings-summary-head strong {
  font-size: 11px;
  font-weight: 650;
}

.account-holdings-summary-head span {
  color: var(--muted);
  font-size: 11px;
}

.account-holdings-list {
  display: grid;
  gap: 3px;
}

.account-holding-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 39px;
  padding: 6px 7px;
  border-radius: 7px;
  color: var(--text);
  text-decoration: none;
  transition:
    background-color var(--motion-fast) var(--ease-soft),
    transform var(--motion-fast) var(--ease-apple);
}

.account-holding-row:hover {
  background: color-mix(in srgb, var(--blue) 7%, transparent);
  transform: translateX(2px);
}

.account-holding-row > span {
  min-width: 0;
}

.account-holding-row > span:last-child {
  text-align: right;
}

.account-holding-row strong,
.account-holding-row b,
.account-holding-row small {
  display: block;
}

.account-holding-row strong {
  font-size: 11px;
  font-weight: 700;
}

.account-holding-row b {
  font-size: 11px;
  font-weight: 700;
}

.account-holding-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.account-holding-row[data-tone="positive"] b,
.account-holding-row[data-tone="positive"] small {
  color: var(--green);
}

.account-holding-row[data-tone="negative"] b,
.account-holding-row[data-tone="negative"] small {
  color: var(--red);
}

.account-holdings-empty,
.account-holdings-more {
  display: block;
  padding: 7px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.account-holdings-more {
  border-radius: 6px;
  color: var(--blue);
  text-decoration: none;
}

.account-holdings-more:hover {
  background: color-mix(in srgb, var(--blue) 7%, transparent);
}

.account-menu-action {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 34px;
  margin-top: 9px;
  padding: 0 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--panel-strong);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.account-menu-action:hover {
  border-color: var(--line);
}

.account-menu-action.danger {
  color: var(--red);
}

.account-menu-action.primary {
  border-color: color-mix(in srgb, var(--blue) 28%, var(--line));
  background: color-mix(in srgb, var(--blue) 8%, var(--panel-strong));
  color: var(--blue);
}

:root[data-theme="dark"] .account-popover {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.46);
}

:root[data-theme="dark"] .account-secondary-button:hover,
:root[data-theme="dark"] .account-trigger:hover {
  border-color: #55555a;
}

/* Standalone registration */
.register-page {
  min-height: 100vh;
  background: var(--bg);
}

.register-shell {
  width: min(1040px, calc(100% - 40px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 26px 0 42px;
}

.register-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  text-decoration: none;
}

.register-brand strong,
.register-brand small {
  display: block;
}

.register-brand strong {
  font-size: 14px;
  font-weight: 650;
}

.register-brand small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.register-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 410px;
  align-items: center;
  gap: 72px;
  min-height: calc(100vh - 110px);
}

.register-intro {
  max-width: 520px;
}

.register-intro h1 {
  margin-top: 8px;
  font-size: clamp(34px, 4.5vw, 54px);
  font-weight: 600;
  line-height: 1.08;
}

.register-intro > p:last-child {
  max-width: 430px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

.register-form-panel {
  padding-left: 42px;
  border-left: 1px solid var(--line);
}

.register-form-head strong,
.register-form-head span {
  display: block;
}

.register-form-head strong {
  font-size: 18px;
  font-weight: 650;
}

.register-form-head span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.register-form {
  display: grid;
  gap: 11px;
  margin-top: 20px;
}

.avatar-upload {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}

.avatar-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.avatar-upload:hover {
  border-color: color-mix(in srgb, var(--blue) 36%, var(--line));
  color: var(--blue);
}

.register-form label {
  display: grid;
  gap: 5px;
}

.register-form label > span {
  color: var(--muted);
  font-size: 11px;
}

.register-form input {
  width: 100%;
  height: 40px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
}

.register-form input:focus {
  border-color: color-mix(in srgb, var(--blue) 58%, var(--line));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 10%, transparent);
}

.register-form .account-primary-button {
  width: 100%;
  min-height: 40px;
  margin-top: 4px;
  font-size: 12px;
}

.register-login-link {
  margin-top: 18px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.register-login-link a {
  color: var(--blue);
  text-decoration: none;
}

.forgot-password-page .register-form-panel {
  width: 100%;
}

.forgot-password-page .settings-code-row .secondary-button {
  min-width: 104px;
  height: 40px;
}

.forgot-success {
  display: grid;
  gap: 8px;
}

.forgot-success[hidden] {
  display: none;
}

.forgot-success p {
  margin: 0;
}

.register-session {
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: var(--panel-strong);
}

.register-session strong,
.register-session p {
  display: block;
}

.register-session strong {
  font-size: 15px;
}

.register-session p {
  margin: 6px 0 14px;
  color: var(--muted);
  font-size: 11px;
}

.register-session .account-primary-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-decoration: none;
}

@media (max-width: 900px) {
  .register-layout {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 64px 0 30px;
  }

  .register-intro h1 {
    font-size: 38px;
  }

  .register-form-panel {
    max-width: 480px;
    padding: 28px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

@media (max-width: 620px) {
  .section-nav {
    z-index: 1;
  }

  .account-trigger {
    min-width: 94px;
  }

  .account-trigger-copy strong {
    max-width: 64px;
  }

  .account-trigger-copy small {
    display: none;
  }

  .account-popover {
    width: min(340px, calc(100vw - 28px));
  }
}

@media (max-width: 620px) {
  .register-shell {
    width: min(100% - 28px, 520px);
    padding-top: 18px;
  }

  .register-layout {
    min-height: auto;
    padding-top: 46px;
  }

  .register-intro h1 {
    font-size: 32px;
  }

}

/* Standalone portfolio page */
.portfolio-page {
  min-height: 100vh;
}

.portfolio-page .shell {
  width: min(1240px, calc(100% - 40px));
}

.portfolio-page .portfolio-topbar {
  gap: 16px;
}

.portfolio-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
}

.portfolio-brand strong,
.portfolio-brand small {
  display: block;
}

.portfolio-brand strong {
  font-size: 15px;
  font-weight: 650;
}

.portfolio-brand small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.topbar-home-link,
.portfolio-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 650;
  text-decoration: none;
  transition:
    border-color var(--motion-fast) var(--ease-soft),
    color var(--motion-fast) var(--ease-soft),
    background-color var(--motion-fast) var(--ease-soft),
    transform var(--motion-fast) var(--ease-apple);
}

.topbar-home-link:hover,
.portfolio-home-link:hover {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
  background: color-mix(in srgb, var(--blue) 6%, var(--panel));
  color: var(--blue);
  transform: translateY(-1px);
}

.portfolio-page main {
  margin-top: 18px;
}

.portfolio-auth-gate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-height: 320px;
  padding: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--blue) 5%, transparent), transparent 52%),
    var(--panel);
  box-shadow: var(--surface-shadow);
}

.portfolio-auth-gate h1 {
  margin-top: 5px;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 600;
}

.portfolio-auth-gate p:last-child {
  max-width: 520px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.portfolio-auth-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.portfolio-auth-actions .account-primary-button,
.portfolio-auth-actions .account-secondary-button {
  width: auto;
  min-width: 110px;
}

.portfolio-board {
  padding: 20px;
  scroll-margin-top: 24px;
}

.portfolio-board-head {
  align-items: flex-start;
}

.portfolio-board-head h1 {
  font-size: 22px;
  font-weight: 650;
}

.portfolio-board-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.portfolio-account-callout {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text);
  text-decoration: none;
  transition:
    background-color 200ms var(--ease-soft),
    border-color 200ms var(--ease-soft);
}

.portfolio-account-callout:hover {
  border-color: color-mix(in srgb, var(--blue) 24%, var(--line-soft));
  background: color-mix(in srgb, var(--blue) 4%, transparent);
}

.profile-avatar {
  width: 44px;
  height: 44px;
  background: color-mix(in srgb, var(--blue) 10%, var(--panel-strong));
  color: var(--blue);
  font-size: 14px;
}

.portfolio-account-copy {
  min-width: 0;
}

.portfolio-account-copy strong,
.portfolio-account-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-account-copy strong {
  font-size: 11px;
  font-weight: 650;
}

.portfolio-account-copy small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.portfolio-account-action {
  color: var(--blue);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

@media (max-width: 880px) {
  .portfolio-page .shell {
    width: min(100% - 24px, 760px);
  }

  .portfolio-page .portfolio-topbar {
    margin-right: -12px;
    margin-left: -12px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .portfolio-page .theme-control {
    display: none;
  }

  .portfolio-auth-gate {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    min-height: 280px;
    padding: 28px;
  }

  .portfolio-account-callout {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .portfolio-account-action {
    grid-column: 2;
  }
}

@media (max-width: 620px) {
  .portfolio-page .portfolio-topbar .brand {
    min-width: 0;
  }

  .portfolio-page .portfolio-brand small {
    display: none;
  }

  .topbar-home-link {
    display: none;
  }

  .portfolio-board {
    padding: 15px;
  }

  .portfolio-board-head {
    gap: 12px;
  }

  .portfolio-board-head h1 {
    font-size: 19px;
  }

  .portfolio-board-actions {
    width: 100%;
  }

  .portfolio-board-actions .portfolio-home-link,
  .portfolio-board-actions .secondary-button {
    flex: 1 1 0;
  }

  .portfolio-auth-actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .portfolio-auth-actions .account-primary-button,
  .portfolio-auth-actions .account-secondary-button {
    width: 100%;
  }
}

/* Standalone account settings */
.settings-page {
  min-height: 100vh;
}

.settings-shell {
  width: min(1120px, calc(100% - 40px));
}

.settings-topbar {
  gap: 16px;
}

.settings-main {
  margin-top: 18px;
}

.settings-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.settings-page-head h1 {
  margin-top: 5px;
  font-size: 28px;
  font-weight: 650;
}

.settings-page-head p:last-child {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.settings-panel {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--surface-shadow);
}

.settings-language-panel {
  margin-top: 16px;
}

.settings-language-panel .segmented-control {
  flex: none;
}

.settings-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}

.settings-panel-head > div {
  min-width: 0;
}

.settings-panel-head > div > span {
  color: var(--muted);
  font-size: 11px;
}

.settings-panel-head h2 {
  margin-top: 4px;
  font-size: 17px;
  font-weight: 650;
}

.settings-form {
  display: grid;
  gap: 12px;
  margin-top: 15px;
}

.settings-avatar-editor {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--panel-strong);
}

.settings-avatar {
  width: 64px;
  height: 64px;
  background: color-mix(in srgb, var(--blue) 10%, var(--panel));
  color: var(--blue);
  font-size: 18px;
}

.settings-avatar-editor > div {
  min-width: 0;
}

.settings-avatar-editor strong {
  display: block;
  font-size: 12px;
}

.settings-avatar-editor p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.settings-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.settings-field > span:first-child {
  color: var(--muted);
  font-size: 11px;
}

.settings-field input {
  width: 100%;
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
  background: var(--panel-strong);
  color: var(--text);
  font-size: 12px;
}

.settings-field input:focus {
  border-color: color-mix(in srgb, var(--blue) 58%, var(--line));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 10%, transparent);
}

.settings-field input[readonly] {
  color: var(--muted);
  cursor: default;
}

.settings-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.settings-code-row .secondary-button {
  min-width: 104px;
  height: 38px;
}

.settings-dev-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--line-soft));
  border-radius: 8px;
  background: color-mix(in srgb, var(--amber) 8%, var(--panel-strong));
}

.settings-dev-code span {
  color: var(--muted-strong);
  font-size: 11px;
}

.settings-dev-code strong {
  color: var(--amber);
  font-size: 14px;
  letter-spacing: 0.16em;
}

.settings-recovery-codes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin: 10px 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--line-soft));
  border-radius: 8px;
  background: color-mix(in srgb, var(--amber) 8%, var(--panel-strong));
}

.settings-recovery-codes code {
  color: var(--amber);
  font-size: 13px;
  letter-spacing: 0.08em;
}

.settings-email-notice {
  padding: 10px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 4%, var(--panel-strong));
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.settings-email-notice strong {
  color: var(--text);
  font-weight: 650;
}

.settings-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
}

.settings-form-actions .account-primary-button {
  min-width: 138px;
  min-height: 38px;
}

.settings-session-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.settings-session-panel strong,
.settings-session-panel span {
  display: block;
}

.settings-session-panel strong {
  font-size: 12px;
}

.settings-session-panel span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.settings-logout {
  flex: 0 0 auto;
}

@media (max-width: 880px) {
  .settings-shell {
    width: min(100% - 24px, 760px);
  }

  .settings-topbar {
    margin-right: -12px;
    margin-left: -12px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .settings-page-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings-page-head h1 {
    font-size: 23px;
  }

  .settings-page-head .portfolio-board-actions {
    width: 100%;
  }

  .settings-page-head .portfolio-board-actions a {
    flex: 1 1 0;
  }

  .settings-panel {
    padding: 14px;
  }

  .settings-avatar-editor {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .settings-avatar {
    width: 56px;
    height: 56px;
    font-size: 16px;
  }

  .settings-avatar-editor .avatar-upload {
    grid-column: 1 / -1;
    width: 100%;
  }

  .settings-code-row {
    grid-template-columns: 1fr;
  }

  .settings-code-row .secondary-button {
    width: 100%;
  }

  .settings-form-actions .account-primary-button {
    width: 100%;
  }

  .settings-session-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-logout {
    width: 100%;
  }
}

/* Real-time market news */
#newsHub {
  scroll-margin-top: 118px;
}

.news-hub {
  min-width: 0;
  margin: -2px 0 18px;
  padding: 0 0 17px;
  border-bottom: 1px solid var(--line-soft);
}

.news-hub-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.news-heading {
  min-width: 0;
}

.news-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 3px;
}

.news-title-row h3 {
  font-size: 16px;
  font-weight: 650;
  line-height: 1.3;
}

.news-live-state {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  min-height: 21px;
  padding: 2px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--panel-strong);
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.news-live-state i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted);
}

.news-live-state.live {
  color: var(--green);
}

.news-live-state.live i {
  background: var(--green);
}

.news-live-state.partial,
.news-live-state.loading {
  color: var(--amber);
}

.news-live-state.partial i,
.news-live-state.loading i {
  background: var(--amber);
}

.news-live-state.loading i {
  animation: news-pulse 1.2s ease-in-out infinite;
}

.news-live-state.error {
  color: var(--red);
}

.news-live-state.error i {
  background: var(--red);
}

.news-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}

.news-meta span + span::before {
  content: "·";
  margin-right: 12px;
  color: var(--line);
}

.news-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.news-categories {
  display: flex;
  max-width: min(650px, 52vw);
  gap: 2px;
  overflow-x: auto;
  padding: 2px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-strong);
  scrollbar-width: none;
}

.news-categories::-webkit-scrollbar {
  display: none;
}

.news-category {
  flex: 0 0 auto;
  min-height: 27px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.news-category:hover {
  color: var(--text);
}

.news-category-count {
  margin-left: 6px;
  opacity: 0.72;
  font-variant-numeric: tabular-nums;
}

.news-page-label {
  color: var(--muted-strong);
  font-size: 11px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.news-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.news-pagination[hidden] { display: none; }
.news-pagination button:disabled { opacity: 0.34; cursor: default; }

.news-category[aria-selected="true"] {
  background: var(--panel);
  color: var(--text);
}

.news-scroll-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}

.news-icon-button,
.news-refresh-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 29px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--panel);
  color: var(--muted-strong);
  cursor: pointer;
}

.news-icon-button {
  width: 29px;
  padding: 0;
  font-size: 13px;
}

.news-refresh-button {
  padding: 0 10px;
  font-size: 11px;
  font-weight: 650;
}

.news-icon-button:hover:not(:disabled),
.news-refresh-button:hover {
  border-color: var(--line);
  background: var(--panel-strong);
  color: var(--text);
}

.news-icon-button:disabled {
  opacity: 0.34;
  cursor: default;
}

.news-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(228px, 258px);
  gap: 9px;
  min-width: 0;
  margin-top: 12px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 1px 1px 5px;
  scroll-padding-inline: 1px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.news-track::-webkit-scrollbar {
  display: none;
}

.news-card {
  --news-tone: var(--blue);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 208px;
  padding: 13px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  outline: none;
  background: var(--panel-strong);
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color var(--motion-fast) var(--ease-soft), background var(--motion-fast) var(--ease-soft);
}

.news-card[data-tone="positive"] {
  --news-tone: var(--green);
}

.news-card[data-tone="negative"],
.news-card[data-tone="danger"] {
  --news-tone: var(--red);
}

.news-card[data-tone="warning"] {
  --news-tone: var(--amber);
}

.news-card:hover,
.news-card:focus-visible {
  border-color: color-mix(in srgb, var(--news-tone) 46%, var(--line));
  background: var(--panel);
}

.news-card:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--news-tone) 18%, transparent);
}

.news-card-top,
.news-card-foot,
.news-card-impact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.news-card-top {
  color: var(--muted);
  font-size: 11px;
}

.news-card-meta {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.news-card-topic {
  overflow: hidden;
  color: var(--news-tone);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-card-translation {
  padding: 1px 5px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.news-card-translation[data-status="ready"] {
  border-color: color-mix(in srgb, var(--blue) 30%, var(--line-soft));
  color: var(--blue);
}

.news-card-translation[data-status="pending"],
.news-card-translation[data-status="partial"] {
  color: var(--amber);
}

.news-card-conflict {
  color: var(--red);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.news-detail-claims {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--red) 28%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--red) 7%, transparent);
}

.news-detail-claims p {
  margin: 0;
  line-height: 1.5;
}

.news-detail-claims p[data-polarity="denied"] {
  color: var(--red);
}

.news-event-contract {
  display: grid;
  gap: 14px;
}

.news-event-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.news-event-head strong {
  color: var(--text);
  font-size: 12px;
}

.news-event-head span {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 11px;
  font-weight: 650;
}

.news-event-block {
  padding-top: 11px;
  border-top: 1px solid var(--line-soft);
}

.news-event-block > strong {
  color: var(--muted-strong);
  font-size: 11px;
}

.news-event-list {
  display: grid;
  gap: 7px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.news-event-list li {
  position: relative;
  padding-left: 13px;
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.65;
}

.news-event-list li::before {
  content: "";
  position: absolute;
  top: 0.68em;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--blue);
}

.news-event-permission {
  margin: 0;
  padding: 10px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--panel);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.news-card-top time {
  flex: 0 0 auto;
}

.news-card h4 {
  display: -webkit-box;
  min-height: 42px;
  margin: 9px 0 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.news-card-original-title {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.news-card-summary {
  display: -webkit-box;
  margin-top: 7px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.news-card-companies {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}

.news-card-companies span {
  max-width: 112px;
  overflow: hidden;
  padding: 2px 5px;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: var(--panel);
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-card-companies .news-holding-match {
  max-width: none;
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line-soft));
  background: color-mix(in srgb, var(--blue) 9%, var(--panel));
  color: var(--blue);
  font-weight: 650;
}

.news-card-impact {
  align-items: flex-start;
  margin-top: auto;
  padding-top: 11px;
}

.news-card-impact span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
}

.news-card-impact strong {
  overflow: hidden;
  color: var(--news-tone);
  font-size: 11px;
  font-weight: 650;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-card-foot {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 11px;
}

.news-card-foot span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-card-foot b {
  flex: 0 0 auto;
  color: var(--blue);
  font-weight: 650;
}

.news-card-skeleton {
  justify-content: flex-start;
  gap: 10px;
  cursor: default;
}

.news-card-skeleton span {
  display: block;
  height: 10px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  animation: news-pulse 1.4s ease-in-out infinite;
}

.news-card-skeleton span:nth-child(1) {
  width: 36%;
}

.news-card-skeleton span:nth-child(2) {
  width: 88%;
  height: 18px;
  margin-top: 8px;
}

.news-card-skeleton span:nth-child(3) {
  width: 100%;
  height: 46px;
  margin-top: 2px;
}

.news-card-skeleton span:nth-child(4) {
  width: 62%;
  margin-top: auto;
}

.news-empty {
  display: grid;
  align-content: center;
  justify-items: center;
  width: min(420px, 100%);
  min-height: 172px;
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
}

.news-empty strong {
  color: var(--text);
  font-size: 12px;
}

.news-empty span {
  max-width: 330px;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.6;
}

.news-hub-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.news-hub-foot p {
  max-width: 980px;
}

.news-hub-foot > span {
  flex: 0 0 auto;
}

.news-hub-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.news-report-button {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-strong);
  color: var(--muted-strong);
  font-family: inherit;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

.news-report-button:hover {
  border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
  color: var(--blue);
}

.news-detail-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.news-report-dialog .news-report-panel {
  width: min(560px, 100%);
}

.news-report-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.news-report-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
}

.news-report-field input,
.news-report-field select,
.news-report-field textarea {
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
}

.news-report-field textarea {
  resize: vertical;
}

.news-report-field-wide {
  grid-column: 1 / -1;
}

.news-report-feedback {
  margin-top: 10px;
  color: var(--red);
  font-size: 11px;
  line-height: 1.6;
}

.news-detail-popup {
  position: fixed;
  z-index: 320;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(22, 22, 24, 0.2);
  backdrop-filter: saturate(120%) blur(14px);
}

.news-detail-panel {
  width: min(720px, 100%);
  max-height: min(86vh, 760px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
}

.news-detail-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 20px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
}

.news-detail-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
}

.news-impact-pill {
  padding: 2px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--panel-strong);
  color: var(--muted);
  font-size: 11px;
}

.news-impact-pill[data-tone="positive"] {
  color: var(--green);
}

.news-impact-pill[data-tone="negative"],
.news-impact-pill[data-tone="danger"] {
  color: var(--red);
}

.news-impact-pill[data-tone="warning"] {
  color: var(--amber);
}

.news-detail-head h2 {
  max-width: 610px;
  margin-top: 7px;
  font-size: 22px;
  font-weight: 650;
  line-height: 1.42;
}

.news-detail-title-original {
  max-width: 610px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.news-detail-source {
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
}

.news-detail-head button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel-strong);
  color: var(--muted-strong);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.news-detail-body {
  display: grid;
  gap: 13px;
  padding: 18px 20px 20px;
}

.news-detail-section,
.news-impact-card {
  padding: 15px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-strong);
}

.news-detail-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.news-detail-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.news-detail-translation-state {
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 11px;
}

.news-detail-translation-state[data-status="ready"] {
  color: var(--blue);
}

.news-detail-translation-state[data-status="pending"],
.news-detail-translation-state[data-status="partial"] {
  color: var(--amber);
}

.news-detail-section p,
.news-impact-card p {
  margin-top: 8px;
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1.75;
}

.news-detail-original {
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.news-detail-original .news-detail-label {
  color: var(--muted);
  letter-spacing: 0;
}

.news-detail-original p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
}

.news-impact-card {
  --impact-tone: var(--blue);
  border-left: 3px solid var(--impact-tone);
}

.news-impact-card[data-tone="positive"] {
  --impact-tone: var(--green);
}

.news-impact-card[data-tone="negative"],
.news-impact-card[data-tone="danger"] {
  --impact-tone: var(--red);
}

.news-impact-card[data-tone="warning"] {
  --impact-tone: var(--amber);
}

.news-impact-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.news-impact-head strong {
  max-width: 74%;
  color: var(--impact-tone);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  text-align: right;
}

.news-impact-facts {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 9px;
  margin-top: 12px;
}

.news-impact-facts > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--panel);
}

.news-impact-facts > div > span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.news-impact-facts p {
  margin-top: 5px;
  color: var(--text);
  font-size: 11px;
  line-height: 1.65;
}

.news-impact-analysis {
  margin-top: 12px !important;
  padding-top: 11px;
  border-top: 1px solid var(--line-soft);
}

.news-impact-assets {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line-soft);
}

.news-detail-assets {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.news-detail-assets span {
  padding: 3px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: var(--panel);
  color: var(--muted-strong);
  font-size: 11px;
}

.news-detail-watch {
  display: grid;
  gap: 7px;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
}

.news-detail-watch li {
  position: relative;
  padding-left: 14px;
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.6;
}

.news-detail-watch li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
}

.news-detail-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 11px;
}

.news-detail-foot a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-strong);
  color: var(--blue);
  font-weight: 650;
  text-decoration: none;
}

.news-detail-foot a:hover {
  border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
}

@keyframes news-pulse {
  0%,
  100% {
    opacity: 0.42;
  }

  50% {
    opacity: 0.9;
  }
}

@media (max-width: 1060px) {
  .news-hub-head {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .news-toolbar {
    justify-content: space-between;
  }

  .news-categories {
    max-width: calc(100vw - 220px);
  }
}

@media (max-width: 700px) {
  .news-hub {
    margin-bottom: 15px;
  }

  .news-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .news-categories {
    width: 100%;
    max-width: 100%;
  }

  .news-scroll-actions {
    justify-content: flex-end;
  }

  .news-track {
    grid-auto-columns: minmax(218px, 82vw);
  }

  .news-hub-foot {
    flex-direction: column;
    gap: 4px;
  }

  .news-detail-popup {
    place-items: end center;
    padding: 10px;
  }

  .news-detail-panel {
    max-height: 92vh;
  }

  .news-detail-head,
  .news-detail-body,
  .news-detail-foot {
    padding-right: 14px;
    padding-left: 14px;
  }

  .news-detail-head h2 {
    font-size: 18px;
  }

  .news-impact-head {
    flex-direction: column;
    gap: 6px;
  }

  .news-impact-head strong {
    max-width: 100%;
    text-align: left;
  }

  .news-impact-facts {
    grid-template-columns: 1fr;
  }
}

:root[data-theme="dark"] .news-category[aria-selected="true"],
:root[data-theme="dark"] .news-icon-button,
:root[data-theme="dark"] .news-refresh-button {
  border-color: #3c3c41;
  background: #232326;
}

:root[data-theme="dark"] .news-detail-popup {
  background: rgba(0, 0, 0, 0.48);
}

:root[data-theme="dark"] .news-detail-panel {
  border-color: #414146;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

:root[data-theme="dark"] .news-detail-head {
  background: rgba(21, 21, 23, 0.96);
}

/* UI cohesion pass: consistent section rhythm, surfaces and mobile browsing */
:root {
  --surface-shadow: 0 1px 2px rgba(0, 0, 0, 0.035), 0 8px 24px rgba(0, 0, 0, 0.025);
  --surface-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.045), 0 12px 28px rgba(0, 0, 0, 0.045);
}

.shell {
  width: min(1380px, calc(100% - 48px));
  padding-bottom: 54px;
}

main {
  display: block;
  margin-top: 20px;
}

main > * + * {
  margin-top: 28px;
}

main > .section-heading {
  margin-top: 44px;
  margin-bottom: 12px;
  padding: 18px 2px 0;
  border-top: 1px solid var(--line-soft);
}

main > .section-heading + * {
  margin-top: 0;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
}

.section-heading > div:first-child {
  min-width: 0;
}

.section-heading .eyebrow {
  margin-bottom: 3px;
}

.section-heading h2,
.methodology h2 {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: 0;
}

.strategy-board,
.tactical-board,
.signal-board,
.portfolio-board,
.event-board {
  border-color: var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--surface-shadow);
}

.strategy-board,
.tactical-board {
  padding: 20px;
}

.news-hub {
  margin-bottom: 20px;
  padding-bottom: 18px;
}

.news-title-row h3 {
  font-size: 17px;
  font-weight: 650;
}

.news-card {
  min-height: 194px;
}

.strategy-lead {
  padding-bottom: 16px;
}

.strategy-matrix {
  gap: 0;
}

.strategy-column {
  padding-top: 14px;
}

.tactical-head {
  padding-bottom: 16px;
}

.asset-grid,
.macro-grid,
.indicator-grid {
  gap: 12px;
}

.card {
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--surface-shadow);
}

.card:hover {
  border-color: color-mix(in srgb, var(--blue) 18%, var(--line));
  box-shadow: var(--surface-shadow-hover);
}

.asset-card,
.release-card,
.buffett-card,
.indicator-card {
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.asset-card .card-head,
.release-card .card-head,
.buffett-card .card-head,
.indicator-card .card-head {
  min-height: 50px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line-soft);
}

.card h3 {
  letter-spacing: 0;
}

.quote-value,
.macro-value,
.indicator-value {
  letter-spacing: 0;
}

.asset-card .metric-strip {
  margin-top: auto;
}

.indicator-card .indicator-meta {
  margin-top: auto;
  padding-top: 8px;
}

.indicator-library {
  min-width: 0;
}

.event-board {
  padding: 16px;
}

.methodology {
  margin-top: 36px;
  padding-top: 22px;
}

footer {
  margin-top: 34px;
  padding-top: 18px;
}

:root[data-theme="dark"] {
  --surface-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 12px 30px rgba(0, 0, 0, 0.12);
  --surface-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.2), 0 14px 34px rgba(0, 0, 0, 0.18);
}

@media (max-width: 840px) {
  .shell {
    width: min(calc(100% - 24px), 720px);
  }

  .topbar {
    margin-right: -12px;
    margin-left: -12px;
    padding-right: 12px;
    padding-left: 12px;
  }

  main {
    margin-top: 16px;
  }

  main > * + * {
    margin-top: 20px;
  }

  main > .section-heading {
    margin-top: 32px;
    margin-bottom: 10px;
    padding-top: 16px;
  }

  .section-heading {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
  }

  .section-heading h2,
  .methodology h2 {
    font-size: 18px;
  }

  .strategy-board,
  .tactical-board {
    padding: 15px;
  }

  .news-hub {
    margin-bottom: 16px;
    padding-bottom: 15px;
  }

  .asset-grid,
  .macro-grid,
  .indicator-grid,
  .tactical-list,
  .strategy-matrix {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(268px, 84vw);
    gap: 10px;
    margin-right: -12px;
    padding: 1px 12px 8px 1px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 1px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .asset-grid::-webkit-scrollbar,
  .macro-grid::-webkit-scrollbar,
  .indicator-grid::-webkit-scrollbar,
  .tactical-list::-webkit-scrollbar,
  .strategy-matrix::-webkit-scrollbar {
    display: none;
  }

  .asset-grid > *,
  .macro-grid > *,
  .indicator-grid > *,
  .tactical-list > *,
  .strategy-matrix > * {
    scroll-snap-align: start;
  }

  .asset-card,
  .release-card,
  .buffett-card,
  .indicator-card {
    min-height: 0;
    padding: 14px;
  }

  .buffett-card {
    grid-column: auto;
  }

  .strategy-matrix {
    padding-bottom: 9px;
  }

  .strategy-column,
  .strategy-column:first-child {
    min-height: 100%;
    padding: 14px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--panel-strong);
  }

  .tactical-rules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .asset-card .card-head,
  .release-card .card-head,
  .buffett-card .card-head,
  .indicator-card .card-head {
    min-height: 46px;
    padding-bottom: 10px;
  }

  .event-board {
    padding: 14px;
  }

  .methodology {
    margin-top: 28px;
    padding-top: 18px;
  }

  footer {
    margin-top: 26px;
    padding-top: 16px;
  }
}

@media (max-width: 620px) {
  .topbar {
    padding-top: 11px;
    padding-bottom: 11px;
  }

  .brand h1 {
    font-size: 15px;
  }

  .brand p {
    font-size: 11px;
  }

  .section-nav {
    margin-right: -12px;
    margin-left: -12px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .status-strip {
    margin-top: 10px;
  }

  .status-strip > div {
    min-height: 43px;
    padding: 8px 10px;
  }

  .strategy-board,
  .tactical-board,
  .signal-board,
  .portfolio-board,
  .event-board {
    border-radius: 8px;
  }

  .strategy-stance,
  .tactical-stance {
    font-size: 14px;
  }

  .strategy-summary,
  .tactical-summary {
    font-size: 12px;
  }

  .tactical-head {
    gap: 12px;
  }

  .tactical-budget {
    padding: 12px;
  }

  .asset-grid,
  .macro-grid,
  .indicator-grid,
  .tactical-list,
  .strategy-matrix {
    grid-auto-columns: minmax(264px, 86vw);
  }

  .method-grid {
    gap: 10px;
  }
}

.small-chart.kline-chart {
  height: 124px;
  margin-top: 10px;
}

.indicator-chart.kline-chart {
  height: 124px;
  margin-top: 10px;
}

.chart-candle.up .chart-candle-wick,
.chart-candle.up .chart-candle-body {
  stroke: var(--green);
  fill: var(--green);
}

.chart-candle.down .chart-candle-wick,
.chart-candle.down .chart-candle-body {
  stroke: var(--red);
  fill: var(--red);
}

.chart-candle-wick {
  stroke-width: 1.05;
  vector-effect: non-scaling-stroke;
}

.chart-candle-body {
  stroke-width: 0.9;
  vector-effect: non-scaling-stroke;
}

.chart-ma {
  fill: none;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.chart-ma-5 {
  stroke: var(--blue);
}

.chart-ma-10 {
  stroke: var(--amber);
}

.chart-current-line {
  stroke: color-mix(in srgb, var(--text) 42%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}

.chart-current-label {
  fill: var(--text);
  font-size: 11px;
  font-weight: 700;
  paint-order: stroke;
  stroke: var(--panel);
  stroke-width: 3px;
}

.chart-date-label,
.chart-range-label {
  fill: var(--muted);
  font-size: 11px;
}

.chart-range-label {
  font-weight: 600;
}

@media (max-width: 840px) {
  .small-chart.kline-chart {
    height: 112px;
  }

  .indicator-chart.kline-chart {
    height: 112px;
  }
}

/* Collapsible left navigation */
.dashboard-page {
  --nav-expanded-width: 200px;
  --nav-collapsed-width: 66px;
  --nav-content-max: 1600px;
  --dashboard-content-width: min(
    var(--nav-content-max),
    calc(100% - var(--nav-expanded-width) - 48px)
  );
  --dashboard-content-left: max(
    calc(var(--nav-collapsed-width) + 24px),
    calc((100% - var(--dashboard-content-width)) / 2)
  );
  --dashboard-content-expanded-left: max(
    calc(var(--nav-expanded-width) + 24px),
    calc(
      (100% - var(--nav-content-max) + var(--nav-expanded-width)) /
        2
    )
  );
}

/* --nav-width 只服务于侧边栏自身的宽度。把它定义在 .section-nav 上，
   收起/展开切换时的样式失效范围就局限在侧边栏子树内；
   若挂在 .dashboard-page 上，这个可继承的自定义属性会让整棵内容树
   （市场页约七千像素高）每帧重新计算样式 —— 这是侧边栏动画卡顿的主因。 */
.dashboard-page .section-nav {
  --nav-width: var(--nav-expanded-width);
}

.dashboard-page.nav-collapsed .section-nav {
  --nav-width: var(--nav-collapsed-width);
}

.dashboard-page .shell {
  width: var(--dashboard-content-width);
  margin-left: var(--dashboard-content-left);
  margin-right: 0;
  transition: margin-left 560ms var(--ease-apple);
}

@media (min-width: 901px) {
  .dashboard-page:not(.nav-collapsed) .shell {
    margin-left: var(--dashboard-content-expanded-left);
  }
}

.dashboard-page .topbar {
  margin-right: 0;
  margin-left: 0;
}

.dashboard-page .section-nav {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  width: var(--nav-width);
  padding: 14px 12px 18px;
  overflow: visible;
  border-right: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-bottom: 0;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--panel) 98%, transparent),
      color-mix(in srgb, var(--bg) 97%, transparent)
    );
  box-shadow: 10px 0 32px rgba(0, 0, 0, 0.035);
  backdrop-filter: saturate(180%) blur(24px);
  /* 侧边栏是整体转场，宽度 / 位移 / 投影同速，不再各走各的节奏。 */
  transition:
    width 440ms var(--ease-apple),
    transform 440ms var(--ease-apple),
    box-shadow 440ms var(--ease-soft);
}

.section-nav-head {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 48px;
  padding: 0 2px 12px;
  border-bottom: 1px solid var(--line-soft);
}

.section-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
  transition:
    opacity var(--motion-fast) var(--ease-soft),
    gap 440ms var(--ease-apple),
    padding-left 440ms var(--ease-apple);
}

.section-nav .section-nav-brand {
  padding-left: 6px;
}

.section-nav-brand .brand-mark {
  flex: 0 0 auto;
}

.section-nav-brand-copy {
  display: grid;
  max-width: 150px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  /* 抽屉节奏：容器先抽出，文字随后淡入；收起时反过来，文字先退场。
     延迟统一由 --nav-label-delay 给，展开/收起各一套（见文件下方）。 */
  transition:
    max-width 360ms var(--ease-apple) var(--nav-label-delay, 0ms),
    opacity 320ms var(--ease-soft) var(--nav-label-delay, 0ms),
    transform 380ms var(--ease-apple) var(--nav-label-delay, 0ms);
}

.section-nav-brand-copy strong {
  font-size: 13px;
  font-weight: 650;
}

.section-nav-brand-copy small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.section-nav-collapse {
  position: absolute;
  top: 9px;
  right: -6px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.section-nav-collapse:hover {
  border-color: var(--line-soft);
  background: color-mix(in srgb, var(--text) 5%, transparent);
  color: var(--text);
}

.section-nav-collapse svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 420ms var(--ease-apple);
}

.section-nav-links {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
  margin-top: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 1px;
  scrollbar-width: none;
}

.section-nav-links::-webkit-scrollbar {
  display: none;
}

.section-nav-link {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 11px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--motion-fast) var(--ease-soft),
    background-color var(--motion-fast) var(--ease-soft),
    border-color var(--motion-fast) var(--ease-soft),
    gap 440ms var(--ease-apple),
    padding 440ms var(--ease-apple),
    transform var(--motion-fast) var(--ease-apple);
}

.section-nav-link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 3px;
  height: 18px;
  border-radius: 999px;
  background: var(--blue);
  opacity: 0;
  transform: translateY(-50%) scaleY(0.45);
  transition:
    opacity var(--motion-fast) var(--ease-soft),
    transform var(--motion-fast) var(--ease-apple);
}

.section-nav-link:hover {
  border-color: color-mix(in srgb, var(--line-soft) 74%, transparent);
  background: color-mix(in srgb, var(--text) 5%, transparent);
  color: var(--text);
  transform: translateX(2px);
}

.section-nav-link.is-active {
  border-color: color-mix(in srgb, var(--blue) 14%, transparent);
  background: color-mix(in srgb, var(--blue) 9%, transparent);
  color: var(--text);
}

.section-nav-link.is-active::before {
  opacity: 1;
  transform: translateY(-50%) scaleY(1);
}

.section-nav-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  color: currentColor;
  transition:
    color var(--motion-fast) var(--ease-soft),
    background-color var(--motion-fast) var(--ease-soft),
    transform var(--motion-fast) var(--ease-apple);
}

.section-nav-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.section-nav-link.is-active .section-nav-icon {
  color: var(--blue);
}

.section-nav-link:hover .section-nav-icon {
  transform: scale(1.06);
}

.section-nav-label {
  max-width: 150px;
  overflow: hidden;
  opacity: 1;
  transform: translateX(0);
  transition:
    max-width 360ms var(--ease-apple) var(--nav-label-delay, 0ms),
    opacity 320ms var(--ease-soft) var(--nav-label-delay, 0ms),
    transform 380ms var(--ease-apple) var(--nav-label-delay, 0ms);
}

.nav-collapsed .section-nav-brand-copy {
  max-width: 0;
  opacity: 0;
  transform: translateX(-6px);
}

.nav-collapsed .section-nav-brand {
  gap: 0;
}

.nav-collapsed .section-nav .section-nav-brand {
  padding-right: 0;
  padding-left: 3px;
}

.nav-collapsed .section-nav-collapse {
  width: 24px;
  height: 24px;
}

/* 收起时这枚按钮从 32px 缩到 24px。宽高不在 theme-palette 的控件过渡列表里，
   不补过渡的话按钮中心会在切换瞬间跳 4px。选择器要压过 theme-palette 的
   body :is(...) 规则，所以带上完整的祖先链。 */
body.dashboard-page .section-nav .section-nav-head .section-nav-collapse {
  transition:
    width 440ms var(--ease-apple),
    height 440ms var(--ease-apple),
    background-color var(--motion-fast) var(--ease-soft),
    border-color var(--motion-fast) var(--ease-soft),
    color var(--motion-fast) var(--ease-soft),
    box-shadow var(--motion-fast) var(--ease-soft),
    filter var(--motion-fast) var(--ease-soft),
    transform var(--motion-fast) var(--ease-apple);
}

.nav-collapsed .section-nav-collapse svg {
  transform: rotate(180deg);
}

.nav-collapsed .section-nav-link {
  gap: 0;
  padding-right: 0;
  padding-left: 7px;
}

.nav-collapsed .section-nav-label {
  max-width: 0;
  opacity: 0;
  transform: translateX(-8px);
}

.nav-collapsed .section-nav-link::before {
  left: 5px;
}

/* 展开：等面板抽出约三分之一，文字再按顺序淡入落位。
   收起：文字立刻开始退场，面板随后收拢。
   这里全部走 transition。之前的 nav-link-in 动画用 backwards 填充，
   延迟期间会把每个链接钉在 translateX(-7px)，动画启动的一瞬间整体向左一弹 ——
   那就是展开时的"闪回"。 */
.section-nav.is-navigation-expanding .section-nav-brand-copy,
.section-nav.is-navigation-expanding .section-nav-label {
  --nav-label-delay: calc(150ms + var(--nav-index, 0) * 26ms);
}

.section-nav.is-navigation-collapsing .section-nav-brand-copy,
.section-nav.is-navigation-collapsing .section-nav-label {
  --nav-label-delay: calc(var(--nav-reverse-index, 0) * 12ms);
}

.mobile-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  color: var(--text);
  cursor: pointer;
}

.mobile-nav-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  transition:
    transform 440ms var(--ease-apple),
    opacity var(--motion-fast) var(--ease-soft),
    width 440ms var(--ease-apple);
}

.nav-drawer-open .mobile-nav-toggle span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}

.nav-drawer-open .mobile-nav-toggle span:nth-child(2) {
  width: 0;
  opacity: 0;
}

.nav-drawer-open .mobile-nav-toggle span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0, 0, 0, 0.22);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(2px);
  transition: opacity 360ms var(--ease-soft);
}

.dashboard-page #strategyBoard,
.dashboard-page #strategySection,
.dashboard-page #tacticalBoard,
.dashboard-page #alertCenter,
.dashboard-page #portfolioBoard,
.dashboard-page #marketOverview,
.dashboard-page #macroOverview,
.dashboard-page #keyIndicators,
.dashboard-page #newsHub,
.dashboard-page #eventBoard,
.dashboard-page #methodology {
  scroll-margin-top: 24px;
}

/* 顶栏吸顶时把锚点目标留在工具栏下方，避免标题被遮住 */
@media (min-width: 621px) {
  .dashboard-page #strategyBoard,
  .dashboard-page #strategySection,
  .dashboard-page #tacticalBoard,
  .dashboard-page #alertCenter,
  .dashboard-page #portfolioBoard,
  .dashboard-page #marketOverview,
  .dashboard-page #macroOverview,
  .dashboard-page #keyIndicators,
  .dashboard-page #newsHub,
  .dashboard-page #eventBoard,
  .dashboard-page #methodology {
    scroll-margin-top: 96px;
  }
}

:root[data-theme="dark"] .dashboard-page .section-nav {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--panel) 98%, transparent),
      color-mix(in srgb, var(--bg) 98%, transparent)
    );
  box-shadow: 12px 0 36px rgba(0, 0, 0, 0.22);
}

@media (min-width: 901px) {
  .dashboard-page .topbar > .brand {
    display: none;
  }

  .dashboard-page .topbar {
    justify-content: flex-end;
  }
}

@media (max-width: 900px) {
  /* 移动端是抽屉式导航，宽度由下面的 min(292px, ...) 接管，
     --nav-width 只作兜底。 */
  .dashboard-page .section-nav,
  .dashboard-page.nav-collapsed .section-nav {
    --nav-width: 0px;
  }

  .dashboard-page .shell {
    width: min(100% - 24px, 760px);
    margin-right: auto;
    margin-left: auto;
    padding-top: 12px;
  }

  .dashboard-page .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0 0 12px;
  }

  .dashboard-page .topbar > .brand {
    grid-column: 1;
    grid-row: 1;
  }

  .dashboard-page .mobile-nav-toggle {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1;
  }

  .dashboard-page .top-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }

  .dashboard-page .section-nav {
    width: min(292px, calc(100vw - 52px));
    margin-right: 0;
    margin-left: 0;
    padding: 16px 14px 20px;
    transform: translateX(-104%);
    box-shadow: 18px 0 56px rgba(0, 0, 0, 0.2);
  }

  .dashboard-page.nav-drawer-open .section-nav {
    transform: translateX(0);
  }

  .dashboard-page .section-nav-head {
    min-height: 52px;
    padding: 0 2px 12px;
  }

  .dashboard-page .section-nav-collapse {
    display: none;
  }

  .dashboard-page .section-nav-brand,
  .dashboard-page .section-nav-brand-copy {
    width: auto;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .dashboard-page .section-nav-link,
  .dashboard-page.nav-collapsed .section-nav-link {
    justify-content: flex-start;
    gap: 12px;
    padding-right: 11px;
    padding-left: 11px;
  }

  .dashboard-page .section-nav-label,
  .dashboard-page.nav-collapsed .section-nav-label {
    max-width: 150px;
    opacity: 1;
    transform: none;
  }

  .dashboard-page .section-nav-link:hover {
    transform: none;
  }

  .dashboard-page.nav-drawer-open {
    overflow: hidden;
  }

  .dashboard-page.nav-drawer-open .nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 620px) {
  .dashboard-page .section-nav {
    width: min(286px, calc(100vw - 42px));
  }

  .dashboard-page .mobile-nav-toggle {
    width: 38px;
    height: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-page .shell,
  .dashboard-page .section-nav,
  .section-nav-link,
  .section-nav-label,
  .section-nav-brand,
  .section-nav-brand-copy {
    transition-duration: 0.001ms !important;
  }
}

/* Daily priority summary */
.daily-focus {
  margin-top: 18px;
}

.daily-focus-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.daily-focus-head h2 {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 660;
}

.daily-focus-head a {
  color: var(--blue);
  font-size: 11px;
  font-weight: 650;
  text-decoration: none;
}

.daily-focus-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.daily-focus-card {
  position: relative;
  min-width: 0;
  padding: 16px 17px 17px;
}

.daily-focus-card + .daily-focus-card {
  border-left: 1px solid var(--line-soft);
}

.daily-focus-card::before {
  content: none;
  position: absolute;
  top: 0;
  left: 17px;
  width: 34px;
  height: 2px;
  border-radius: 0 0 3px 3px;
  background: var(--muted);
}

.daily-focus-card[data-kind="market"]::before {
  background: var(--blue);
}

.daily-focus-card[data-kind="personal"]::before {
  background: var(--green);
}

.daily-focus-card[data-kind="event"]::before {
  background: var(--amber);
}

.daily-focus-card[data-kind="data"]::before {
  background: var(--cyan);
}

.daily-focus-card span,
.daily-focus-card strong,
.daily-focus-card p {
  display: block;
}

.daily-focus-card span {
  color: var(--muted);
  font-size: 11px;
}

.daily-focus-card strong {
  margin-top: 8px;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-focus-card p {
  display: block;
  margin-top: 6px;
  min-height: 4.8em;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

@media (max-width: 880px) {
  .daily-focus-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .daily-focus-card:nth-child(3) {
    border-top: 1px solid var(--line-soft);
    border-left: 0;
  }

  .daily-focus-card:nth-child(4) {
    border-top: 1px solid var(--line-soft);
  }
}

@media (max-width: 520px) {
  .daily-focus-grid {
    grid-template-columns: 1fr;
  }

  .daily-focus-card + .daily-focus-card,
  .daily-focus-card:nth-child(4) {
    border-top: 1px solid var(--line-soft);
    border-left: 0;
  }
}

/* Decision workspace */
.workspace-shell {
  width: min(1480px, calc(100% - 48px));
}

.workspace-topbar .brand strong,
.workspace-topbar .brand small {
  display: block;
}

.workspace-topbar .brand strong {
  font-size: 17px;
  font-weight: 650;
}

.workspace-topbar .brand small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.workspace-account-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 3px 11px 3px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
  text-decoration: none;
}

.workspace-account-link:hover {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
  background: var(--panel-strong);
}

.workspace-main {
  padding-top: 22px;
}

.workspace-auth-gate {
  display: grid;
  justify-items: center;
  max-width: 620px;
  margin: 10vh auto 0;
  padding: 42px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  text-align: center;
  box-shadow: var(--shadow);
}

.workspace-gate-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--blue) 12%, var(--panel-strong));
  color: var(--blue);
  font-size: 20px;
  font-weight: 700;
}

.workspace-auth-gate h1 {
  margin-top: 5px;
  font-size: 26px;
}

.workspace-auth-gate > p:last-of-type {
  max-width: 460px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.workspace-auth-gate > div {
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 24px;
}

.workspace-auth-gate .account-primary-button,
.workspace-auth-gate .account-secondary-button {
  width: min(190px, 100%);
}

.workspace-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 22px;
  padding: 27px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 82% 10%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--panel-strong) 92%, transparent), var(--panel));
}

.workspace-hero-copy h1 {
  margin-top: 5px;
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 660;
}

.workspace-hero-copy > p:last-child {
  max-width: 720px;
  margin-top: 9px;
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1.7;
}

.workspace-hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.workspace-generated {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
}

.workspace-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.workspace-kpis article {
  min-width: 0;
  padding: 16px 18px;
}

.workspace-kpis article + article {
  border-left: 1px solid var(--line-soft);
}

.workspace-kpis span,
.workspace-kpis strong,
.workspace-kpis small {
  display: block;
}

.workspace-kpis span {
  color: var(--muted);
  font-size: 11px;
}

.workspace-kpis strong {
  margin-top: 5px;
  font-size: 19px;
  font-weight: 660;
}

.workspace-kpis small {
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-section {
  margin-top: 18px;
  padding-top: 2px;
  scroll-margin-top: 20px;
}

.workspace-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}

.workspace-section-head h2 {
  margin-top: 4px;
  font-size: 21px;
  font-weight: 660;
}

.workspace-section-head > span {
  color: var(--muted);
  font-size: 11px;
}

.workspace-route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.workspace-route-grid a {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-strong);
  color: inherit;
  text-decoration: none;
}

.workspace-route-grid a:hover {
  border-color: color-mix(in srgb, var(--cyan) 38%, var(--line));
  background: color-mix(in srgb, var(--cyan) 4%, var(--panel-strong));
}

.workspace-route-grid span {
  color: var(--muted);
  font-size: 11px;
}

.workspace-route-grid strong {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 630;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-utility {
  margin-top: 20px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.workspace-utility-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 0;
  cursor: pointer;
  list-style: none;
}

.workspace-utility-summary::-webkit-details-marker {
  display: none;
}

.workspace-utility-summary h2 {
  margin-top: 3px;
  font-size: 18px;
  font-weight: 650;
}

.workspace-utility-summary > span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
}

.workspace-utility-summary::after {
  content: "+";
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
}

.workspace-utility[open] .workspace-utility-summary::after {
  content: "−";
}

.workspace-utility-body {
  padding: 2px 0 20px;
}

.today-focus-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.today-focus-item {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel-strong) 86%, transparent);
}

.today-focus-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 9px 0 0 9px;
  background: var(--muted);
}

.today-focus-item[data-tone="danger"]::before {
  background: var(--red);
}

.today-focus-item[data-tone="warning"]::before {
  background: var(--amber);
}

.today-focus-item[data-tone="positive"]::before {
  background: var(--green);
}

.today-focus-index {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.today-focus-copy {
  min-width: 0;
}

.today-focus-copy strong {
  display: block;
  font-size: 12px;
  line-height: 1.45;
}

.today-focus-copy p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.today-focus-meta {
  display: grid;
  justify-items: end;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.today-focus-meta a {
  color: var(--blue);
  text-decoration: none;
}

.holding-news-notice {
  margin: -4px 0 12px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.workspace-page .holding-news-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.holding-news-group {
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-group);
  background: color-mix(in srgb, var(--panel-strong) 84%, transparent);
}

.holding-news-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
}

.holding-news-group-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.holding-news-group-symbol {
  font-size: 13px;
  font-weight: 700;
}

.holding-news-group-name {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.holding-news-group-meta {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
}

.holding-news-rows {
  display: grid;
}

.holding-news-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-top: 1px solid var(--line-soft);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.holding-news-rows > .holding-news-row:first-child {
  border-top: 0;
}

.holding-news-row:hover {
  background: color-mix(in srgb, var(--blue) 7%, transparent);
}

.holding-news-row:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--blue) 55%, transparent);
  outline-offset: -2px;
}

.holding-news-row-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
}

.holding-news-row[data-tone="positive"] .holding-news-row-dot {
  background: var(--green);
}

.holding-news-row[data-tone="danger"] .holding-news-row-dot {
  background: var(--red);
}

.holding-news-row[data-tone="warning"] .holding-news-row-dot {
  background: var(--amber);
}

.holding-news-row-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.holding-news-row-title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.holding-news-row-meta {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.holding-news-row-more {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.holding-news-row:hover .holding-news-row-more {
  color: var(--blue);
}

.holding-news-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.holding-news-action {
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-strong);
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.holding-news-action:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
  color: var(--text);
}

.holding-news-action.subtle {
  color: var(--muted);
}

.holding-news-action:disabled {
  border-color: transparent;
  background: var(--calm-soft);
  color: var(--green);
  cursor: default;
}

.holding-news-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 20px 14px;
}

.holding-news-detail-content {
  display: grid;
  gap: 9px;
  margin-top: 9px;
  max-height: 340px;
  overflow-y: auto;
}

.holding-news-detail-content p {
  margin: 0;
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1.8;
}

.holding-news-detail-content .holding-news-detail-loading {
  color: var(--muted);
  font-size: 11px;
}

.holding-news-detail-content .holding-news-detail-notice {
  padding: 7px 10px;
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-chip);
  color: var(--muted);
  font-size: 11px;
}

.holding-news-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

.holding-news-empty-actions a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.workspace-anchor-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 4px;
  margin-top: 18px;
  padding: 8px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  scrollbar-width: none;
}

.workspace-anchor-nav::-webkit-scrollbar {
  display: none;
}

.workspace-anchor-nav a {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: 7px;
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 650;
  text-decoration: none;
}

.workspace-anchor-nav a:hover {
  background: var(--panel-strong);
  color: var(--text);
}

.workspace-risk-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 0.8fr);
  gap: 10px;
}

.workspace-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
}

.workspace-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 15px;
  border-bottom: 1px solid var(--line-soft);
}

.workspace-card-head > div {
  min-width: 0;
}

.workspace-card-head strong,
.workspace-card-head span {
  display: block;
}

.workspace-card-head strong {
  font-size: 12px;
}

.workspace-card-head span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.workspace-data-pill {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--panel-strong);
  color: var(--muted-strong) !important;
}

.workspace-chart {
  min-height: 250px;
  padding: 8px 8px 0;
}

.workspace-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

.workspace-chart-gridline {
  stroke: var(--line-soft);
  stroke-width: 1;
}

.workspace-chart-label,
.workspace-chart-axis-label {
  fill: var(--muted);
  font-size: 11px;
}

.workspace-chart-value-line,
.workspace-chart-risk-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}

.workspace-chart-value-line {
  stroke: var(--blue);
}

.workspace-chart-risk-line {
  stroke: var(--amber);
  stroke-dasharray: 5 5;
}

.workspace-chart-point {
  fill: var(--panel);
  stroke: var(--blue);
  stroke-width: 2;
}

.workspace-chart-empty {
  display: grid;
  place-items: center;
  min-height: 235px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.workspace-chart-legend {
  display: flex;
  gap: 14px;
  padding: 0 16px 14px;
  color: var(--muted);
  font-size: 11px;
}

.workspace-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.legend-dot.equity {
  background: var(--blue);
}

.legend-dot.risk {
  background: var(--amber);
}

.risk-history-detail-card,
.performance-attribution-card {
  margin-top: 10px;
}

.risk-history-detail {
  display: grid;
  overflow-x: auto;
  padding: 4px 14px 14px;
}

.risk-history-detail-row {
  display: grid;
  grid-template-columns:
    minmax(100px, 0.65fr)
    minmax(86px, 0.55fr)
    minmax(250px, 1.65fr)
    minmax(170px, 0.9fr)
    minmax(170px, 0.9fr);
  min-width: 850px;
  border-bottom: 1px solid var(--line-soft);
}

.risk-history-detail-row:last-child {
  border-bottom: 0;
}

.risk-history-detail-row > div,
.risk-history-detail-row > span {
  min-width: 0;
  padding: 11px 9px;
}

.risk-history-detail-row.header {
  color: var(--muted);
  font-size: 11px;
}

.risk-history-detail-row strong,
.risk-history-detail-row small {
  display: block;
}

.risk-history-detail-row strong {
  overflow: hidden;
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.45;
  text-overflow: ellipsis;
}

.risk-history-detail-row small {
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  text-overflow: ellipsis;
}

.risk-history-detail-row [data-tone="positive"] strong {
  color: var(--green);
}

.risk-history-detail-row [data-tone="negative"] strong {
  color: var(--red);
}

.risk-history-trigger strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.performance-attribution {
  display: grid;
  gap: 10px;
  padding: 12px 14px 14px;
}

.performance-attribution-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}

.performance-attribution-summary article {
  min-width: 0;
  padding: 11px 12px;
}

.performance-attribution-summary article + article {
  border-left: 1px solid var(--line-soft);
}

.performance-attribution-summary span,
.performance-attribution-summary strong,
.performance-attribution-summary small {
  display: block;
}

.performance-attribution-summary span {
  color: var(--muted);
  font-size: 11px;
}

.performance-attribution-summary strong {
  margin-top: 5px;
  font-size: 14px;
}

.performance-attribution-summary small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.performance-attribution-summary [data-tone="positive"] strong {
  color: var(--green);
}

.performance-attribution-summary [data-tone="negative"] strong {
  color: var(--red);
}

.performance-attribution-list {
  display: grid;
}

.performance-attribution-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.4fr) repeat(3, minmax(100px, 0.7fr));
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line-soft);
}

.performance-attribution-row:last-child {
  border-bottom: 0;
}

.performance-attribution-row > div {
  min-width: 0;
}

.performance-attribution-row span,
.performance-attribution-row strong,
.performance-attribution-row small {
  display: block;
}

.performance-attribution-row span,
.performance-attribution-row small {
  color: var(--muted);
  font-size: 11px;
}

.performance-attribution-row strong {
  margin-top: 3px;
  font-size: 11px;
}

.performance-attribution-row[data-tone="positive"] > div:nth-child(3) strong {
  color: var(--green);
}

.performance-attribution-row[data-tone="negative"] > div:nth-child(3) strong {
  color: var(--red);
}

.performance-attribution-note {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.data-quality-list {
  display: grid;
  padding: 4px 14px 12px;
}

.data-quality-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}

.data-quality-row:last-child {
  border-bottom: 0;
}

.data-quality-row span {
  color: var(--muted);
  font-size: 11px;
}

.data-quality-row strong {
  grid-column: 1;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-quality-row small {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--muted-strong);
  font-size: 11px;
}

.workspace-metric-grid {
  display: grid;
  grid-template-columns: repeat(9, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  padding-bottom: 3px;
}

.workspace-metric-card {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.workspace-metric-card span,
.workspace-metric-card strong,
.workspace-metric-card small {
  display: block;
}

.workspace-metric-card span {
  color: var(--muted);
  font-size: 11px;
}

.workspace-metric-card strong {
  margin-top: 6px;
  font-size: 16px;
}

.workspace-metric-card small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.workspace-metric-card[data-tone="positive"] strong,
.workspace-metric-card[data-tone="positive"] small {
  color: var(--green);
}

.workspace-metric-card[data-tone="negative"] strong,
.workspace-metric-card[data-tone="negative"] small {
  color: var(--red);
}

.workspace-metric-card[data-tone="warning"] strong,
.workspace-metric-card[data-tone="warning"] small {
  color: var(--amber);
}

.correlation-card {
  margin-top: 10px;
}

.correlation-table-wrap {
  overflow-x: auto;
  padding: 10px 14px 14px;
}

.correlation-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  font-size: 11px;
}

.correlation-table th,
.correlation-table td {
  min-width: 55px;
  padding: 8px 6px;
  border-radius: 6px;
  text-align: center;
}

.correlation-table th {
  color: var(--muted-strong);
  font-weight: 650;
}

.correlation-table td {
  background: color-mix(in srgb, var(--panel-strong) 90%, transparent);
  color: var(--muted-strong);
}

.correlation-table td[data-tone="danger"] {
  background: color-mix(in srgb, var(--red) calc(8% + var(--correlation) * 18%), var(--panel));
  color: var(--red);
}

.correlation-table td[data-tone="warning"] {
  background: color-mix(in srgb, var(--amber) calc(7% + var(--correlation) * 16%), var(--panel));
  color: var(--amber);
}

.correlation-table td[data-tone="calm"] {
  color: var(--green);
}

.transaction-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
}

.transaction-summary article {
  padding: 13px 16px;
}

.transaction-summary article + article {
  border-left: 1px solid var(--line-soft);
}

.transaction-summary span,
.transaction-summary strong {
  display: block;
}

.transaction-summary span {
  color: var(--muted);
  font-size: 11px;
}

.transaction-summary strong {
  margin-top: 5px;
  font-size: 15px;
}

.transaction-summary [data-tone="positive"] strong {
  color: var(--green);
}

.transaction-summary [data-tone="negative"] strong {
  color: var(--red);
}

.transaction-summary [data-tone="warning"] strong {
  color: var(--amber);
}

.workspace-editor-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.4fr);
  align-items: start;
  gap: 10px;
}

.workspace-form {
  padding-bottom: 14px;
}

.workspace-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}

.workspace-form-grid label,
.workspace-inline-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.workspace-form-grid label.full,
.workspace-inline-form label.note {
  grid-column: 1 / -1;
}

.workspace-form-grid label > span,
.workspace-inline-form label > span {
  color: var(--muted);
  font-size: 11px;
}

.workspace-form input,
.workspace-form select,
.workspace-form textarea,
.workspace-inline-form input,
.workspace-inline-form select {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  outline: none;
  background: var(--panel-strong);
  color: var(--text);
  font-size: 11px;
}

.workspace-form textarea {
  resize: vertical;
  line-height: 1.6;
}

.workspace-form input:focus,
.workspace-form select:focus,
.workspace-form textarea:focus,
.workspace-inline-form input:focus,
.workspace-inline-form select:focus {
  border-color: color-mix(in srgb, var(--blue) 48%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 10%, transparent);
}

.workspace-form input:disabled,
.workspace-form select:disabled {
  opacity: 0.56;
}

.workspace-form > .account-primary-button {
  width: calc(100% - 28px);
  margin: 0 14px;
}

.workspace-form .form-feedback {
  margin: 8px 14px 0;
}

.journal-edit-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 14px 12px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line-soft));
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 7%, var(--panel-strong));
  color: var(--muted-strong);
  font-size: 11px;
}

.journal-edit-banner[hidden] {
  display: none;
}

.workspace-ledger-card,
.journal-list,
.alert-rule-list {
  min-width: 0;
}

.workspace-ledger {
  display: grid;
  max-height: 570px;
  overflow-y: auto;
}

.ledger-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(130px, 0.8fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
}

.ledger-row:last-child {
  border-bottom: 0;
}

.ledger-identity,
.ledger-detail {
  min-width: 0;
}

.ledger-identity strong,
.ledger-identity span,
.ledger-detail strong,
.ledger-detail span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ledger-identity strong {
  font-size: 11px;
}

.ledger-identity span,
.ledger-detail span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.ledger-detail {
  text-align: right;
}

.ledger-detail strong {
  font-size: 11px;
}

.ledger-row[data-type="buy"] .ledger-identity strong {
  color: var(--green);
}

.ledger-row[data-type="sell"] .ledger-identity strong {
  color: var(--orange);
}

.ledger-row[data-type="deposit"] .ledger-identity strong {
  color: var(--blue);
}

.workspace-row-action {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-strong);
  color: var(--muted-strong);
  font-size: 11px;
  cursor: pointer;
}

.workspace-row-action:hover {
  border-color: color-mix(in srgb, var(--blue) 36%, var(--line));
  color: var(--text);
}

.workspace-row-action.danger:hover {
  border-color: color-mix(in srgb, var(--red) 42%, var(--line));
  color: var(--red);
}

.journal-list,
.alert-rule-list {
  display: grid;
  gap: 8px;
}

.journal-card,
.alert-rule-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
}

.journal-card[data-status="closed"] {
  opacity: 0.72;
}

.journal-card-head,
.alert-rule-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.journal-card-head > div,
.alert-rule-card > div:first-child {
  min-width: 0;
}

.journal-card-head span,
.journal-card-head strong,
.alert-rule-card strong,
.alert-rule-card span {
  display: block;
}

.journal-card-head span {
  color: var(--blue);
  font-size: 11px;
  font-weight: 650;
}

.journal-card-head strong {
  margin-top: 4px;
  font-size: 12px;
}

.journal-status {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted-strong) !important;
  font-size: 11px !important;
}

.journal-card > p {
  margin-top: 11px;
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.weekly-review-card {
  margin-bottom: 10px;
}

.weekly-review-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}

.weekly-review-row:last-child {
  border-bottom: 0;
}

.weekly-review-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
}

.weekly-review-row strong {
  min-width: 0;
  overflow: hidden;
  color: var(--muted-strong);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weekly-review-row small {
  color: var(--muted);
  font-size: 10px;
}

.weekly-review-row[data-tone="warning"] .weekly-review-label {
  color: var(--amber);
}

.weekly-review-row[data-tone="positive"] .weekly-review-label {
  color: var(--green);
}

.journal-event-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line-soft));
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 5%, var(--panel-strong));
}

.journal-event-link[hidden] {
  display: none;
}

.journal-event-link div {
  min-width: 0;
}

.journal-event-link strong,
.journal-event-link small {
  display: block;
}

.journal-event-link strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journal-event-link small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.journal-outcome {
  margin-top: 11px;
  padding: 10px 11px;
  border-left: 2px solid color-mix(in srgb, var(--blue) 52%, var(--line));
  border-radius: 0 7px 7px 0;
  background: color-mix(in srgb, var(--blue) 5%, var(--panel-strong));
}

.journal-outcome strong {
  display: block;
  color: var(--blue);
  font-size: 11px;
}

.journal-outcome p {
  margin-top: 5px;
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.journal-outcome.pending {
  border-left-color: color-mix(in srgb, var(--amber) 60%, var(--line));
  background: color-mix(in srgb, var(--amber) 6%, var(--panel-strong));
  color: var(--muted-strong);
  font-size: 11px;
}

.journal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 11px;
}

.journal-meta span {
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--panel-strong);
  color: var(--muted);
  font-size: 11px;
}

.journal-record-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 11px;
}

.journal-source-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 650;
}

.journal-source-badge.user {
  border-color: color-mix(in srgb, var(--blue) 28%, var(--line-soft));
  color: var(--blue);
}

.journal-source-badge.system {
  border-color: color-mix(in srgb, var(--amber) 34%, var(--line-soft));
  color: var(--amber);
}

.journal-record-time {
  color: var(--muted);
  font-size: 10px;
}

.journal-conditions {
  margin-top: 10px;
}

.journal-conditions strong {
  color: var(--muted);
  font-size: 10px;
}

.journal-conditions p {
  margin-top: 4px;
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.journal-system-block {
  margin-top: 12px;
  padding: 11px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-strong) 76%, transparent);
}

.journal-system-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.journal-system-version {
  color: var(--muted);
  font-size: 10px;
}

.journal-snapshot-title {
  display: block;
  margin-top: 9px;
  font-size: 11px;
}

.journal-snapshot-claim,
.journal-snapshot-source,
.journal-followup-note {
  margin-top: 5px;
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.6;
}

.journal-snapshot-source {
  color: var(--muted);
  font-size: 10px;
}

.journal-snapshot-link {
  display: inline-block;
  margin-top: 6px;
  color: var(--blue);
  font-size: 10px;
}

.journal-followup-note {
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}

.journal-followup-note[data-status="updated"] {
  color: var(--amber);
}

.journal-followup-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 3px 7px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}

.journal-followup-item > span {
  color: var(--amber);
  font-size: 10px;
}

.journal-followup-item > strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journal-followup-item > small {
  color: var(--muted);
  font-size: 10px;
}

.journal-followup-item > p {
  grid-column: 1 / -1;
  color: var(--muted-strong);
  font-size: 10px;
  line-height: 1.55;
}

.journal-revisions {
  margin-top: 10px;
  border-top: 1px solid var(--line-soft);
}

.journal-revisions summary {
  padding-top: 9px;
  color: var(--muted);
  font-size: 10px;
  cursor: pointer;
}

.journal-revision-item {
  margin-top: 8px;
  padding: 8px 9px;
  border-radius: 7px;
  background: var(--panel-strong);
}

.journal-revision-item strong {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.journal-revision-item p {
  margin-top: 4px;
  color: var(--muted-strong);
  font-size: 10px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.journal-actions,
.alert-rule-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 12px;
}

.alert-rule-card > div:first-child strong {
  font-size: 12px;
}

.alert-rule-card > div:first-child span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.alert-rule-card[data-enabled="false"] {
  opacity: 0.64;
}

.compact-switch {
  min-height: 30px;
}

.workspace-inline-form {
  display: grid;
  grid-template-columns: 120px 180px 150px minmax(220px, 1fr) auto;
  align-items: end;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
}

.watchlist-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 10px;
}



.workspace-empty {
  display: grid;
  place-items: center;
  min-height: 92px;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 9px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}

.workspace-empty strong,
.workspace-empty span {
  display: block;
}

.workspace-empty strong {
  color: var(--muted-strong);
  font-size: 11px;
}

.workspace-empty span {
  margin-top: 5px;
}

.workspace-methodology {
  margin-top: 18px;
  padding: 15px 17px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.workspace-methodology strong {
  color: var(--muted-strong);
  font-size: 11px;
}

.workspace-methodology p {
  max-width: 1050px;
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.7;
}

@media (max-width: 1180px) {
  .workspace-metric-grid {
    grid-template-columns: repeat(5, minmax(130px, 1fr));
  }


  .workspace-inline-form {
    grid-template-columns: 110px 160px 140px minmax(200px, 1fr);
  }

  .workspace-inline-form button {
    grid-column: 4;
    justify-self: end;
  }
}

@media (max-width: 980px) {
  .workspace-risk-layout,
  .workspace-editor-layout {
    grid-template-columns: 1fr;
  }

  .workspace-ledger {
    max-height: none;
  }

  .today-focus-list {
    grid-template-columns: 1fr;
  }

  .workspace-inline-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-inline-form label.note {
    grid-column: 1 / -1;
  }

  .workspace-inline-form button {
    grid-column: 2;
  }

}

@media (max-width: 760px) {
  .workspace-shell {
    width: min(100% - 24px, 1480px);
  }

  .workspace-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .workspace-topbar .top-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .workspace-hero {
    grid-template-columns: 1fr;
    padding: 21px 19px;
  }

  .workspace-hero-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .workspace-route-grid {
    grid-template-columns: 1fr;
  }

  .workspace-route-grid strong {
    white-space: normal;
  }

  .workspace-utility-summary > span {
    display: none;
  }

  .workspace-kpis,
  .transaction-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-kpis article:nth-child(3),
  .transaction-summary article:nth-child(3) {
    border-top: 1px solid var(--line-soft);
    border-left: 0;
  }

  .workspace-kpis article:nth-child(4),
  .transaction-summary article:nth-child(4) {
    border-top: 1px solid var(--line-soft);
  }

  .workspace-metric-grid {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }

  .performance-attribution-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .performance-attribution-summary article:nth-child(3) {
    border-top: 1px solid var(--line-soft);
    border-left: 0;
  }

  .performance-attribution-summary article:nth-child(4) {
    border-top: 1px solid var(--line-soft);
  }

  .performance-attribution-row {
    grid-template-columns: minmax(150px, 1.4fr) repeat(3, minmax(85px, 0.7fr));
    min-width: 560px;
  }

  .performance-attribution-list {
    overflow-x: auto;
  }

  .workspace-anchor-nav {
    top: 0;
  }
}

@media (max-width: 560px) {
  .workspace-kpis,
  .transaction-summary,
  .workspace-form-grid,
  .workspace-inline-form,

  .workspace-kpis article + article,
  .transaction-summary article + article {
    border-top: 1px solid var(--line-soft);
    border-left: 0;
  }

  .workspace-form-grid label.full,
  .workspace-inline-form label.note {
    grid-column: 1;
  }

  .workspace-inline-form button {
    grid-column: 1;
    justify-self: stretch;
  }

  .workspace-metric-grid {
    grid-template-columns: repeat(2, minmax(110px, 1fr));
  }

  .performance-attribution-summary {
    grid-template-columns: 1fr;
  }

  .performance-attribution-summary article + article {
    border-top: 1px solid var(--line-soft);
    border-left: 0;
  }

  .today-focus-item {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .today-focus-meta {
    grid-column: 2;
    justify-items: start;
  }

  .ledger-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ledger-detail {
    grid-column: 1;
    text-align: left;
  }

  .ledger-row .workspace-row-action {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .alert-rule-card,
  .journal-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .weekly-review-row {
    grid-template-columns: 1fr auto;
  }

  .weekly-review-row strong {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .journal-event-link {
    align-items: flex-start;
    flex-direction: column;
  }

  .alert-rule-actions {
    justify-content: flex-start;
  }

  .workspace-auth-gate > div {
    flex-direction: column;
  }

  .workspace-auth-gate .account-primary-button,
  .workspace-auth-gate .account-secondary-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-card,
  .today-focus-item,
  .ledger-row,
  .journal-card,
  .alert-rule-card,
  .watchlist-card {
    transition: none !important;
  }
}

.settings-audit-panel {
  margin-top: 16px;
}

.settings-audit-list {
  display: grid;
  gap: 8px;
  margin-top: 15px;
}

.settings-audit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--panel-strong);
}

.settings-audit-row > div {
  min-width: 0;
}

.settings-audit-row > div > strong {
  display: block;
  font-size: 12px;
  font-weight: 650;
}

.settings-audit-meta {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  word-break: break-all;
}

.settings-audit-status {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--neutral-soft);
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 650;
}

.settings-audit-status.positive {
  background: var(--calm-soft);
  color: var(--green);
}

.settings-audit-status.warning {
  background: var(--warning-soft);
  color: var(--amber);
}

.settings-audit-status.negative {
  background: var(--danger-soft);
  color: var(--red);
}

.settings-audit-empty {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 880px) {
  .settings-audit-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}

.indicator-history {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

.indicator-history-chart {
  height: 96px;
}

.indicator-history-chart svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.indicator-history-status {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.indicator-history-toggle {
  flex: 0 0 auto;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-strong);
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.indicator-history-toggle:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--cyan) 40%, var(--line));
  color: var(--text);
}

.indicator-history-toggle:disabled {
  opacity: 0.5;
  cursor: default;
}

/* —— 决策中心：分节定位与分组标题 —— */
.workspace-section {
  scroll-margin-top: 118px;
}

.workspace-anchor-nav {
  top: 58px;
  z-index: 19;
}

.workspace-anchor-nav a {
  padding: 7px 12px;
}

.workspace-anchor-external {
  border: 1px solid var(--line);
  background: var(--panel-strong);
}

.workspace-group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 18px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}

.workspace-group-head h3 {
  flex: 0 0 auto;
  color: var(--text);
  font-size: 15px;
  font-weight: 660;
}

.workspace-group-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* —— 宏观发布核对：统一卡片层级、边框与字号 —— */
.macro-release-list {
  gap: 12px;
}

.macro-release-card {
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-strong);
}

.macro-release-card[data-status="pending"] {
  opacity: 1;
  border-left: 3px solid var(--line);
}

.macro-release-card[data-status="released"] {
  border-left: 3px solid var(--green);
}

.macro-release-head {
  align-items: center;
  gap: 10px;
}

.macro-release-head strong {
  font-size: 15px;
  line-height: 1.35;
}

.macro-release-head span {
  font-size: 12px;
  line-height: 1.5;
}

.macro-release-head > b {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.macro-release-card[data-status="released"] .macro-release-head > b {
  border-color: color-mix(in srgb, var(--green) 32%, transparent);
  background: var(--calm-soft);
  color: var(--green);
}

.macro-release-metrics,
.macro-release-reaction {
  gap: 8px;
}

.macro-release-metrics > div,
.macro-release-reaction > div {
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel);
}

.macro-release-metrics span,
.macro-release-reaction span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.macro-release-metrics strong,
.macro-release-reaction strong {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.macro-release-reaction {
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.macro-release-card > a {
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  text-decoration: none;
}

.macro-release-card > a:hover {
  color: var(--blue);
}

/* —— 页面宽度：内容列收窄并居中，两侧留出均匀空隙 —— */
@media (min-width: 841px) {
  .workspace-shell {
    width: min(1200px, calc(100% - 72px));
  }

  .register-shell {
    width: min(960px, calc(100% - 72px));
  }
}

@media (min-width: 1600px) {
  .workspace-shell {
    width: min(1240px, calc(100% - 96px));
  }
}

@media (min-width: 681px) and (max-width: 880px) {
  .macro-release-metrics,
  .macro-release-reaction {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .workspace-group-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .macro-release-card {
    padding: 12px;
  }
}

/* —— 侧边栏折叠控制：改为常驻底部的整行按钮 ——
   原先按钮是绝对定位在导航右边缘外侧（right: -6px）的 32px 透明方块，
   只有悬停才出现边框、图标又只有一个小箭头，因此既难发现、又压在面板接缝上。
   现在它是底部一整行、带文字标签的常规按钮；收起后变成居中图标。 */
.section-nav-foot {
  flex: 0 0 auto;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

.section-nav-collapse {
  position: static;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;
  transition:
    background 200ms var(--ease-soft),
    border-color 200ms var(--ease-soft),
    color 200ms var(--ease-soft);
}

.section-nav-collapse:hover {
  border-color: var(--line-soft);
  background: color-mix(in srgb, var(--text) 5%, transparent);
  color: var(--text);
}

.section-nav-collapse:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.section-nav-collapse svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.section-nav-collapse-label {
  overflow: hidden;
  white-space: nowrap;
}

body.nav-collapsed .section-nav-collapse {
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  padding: 0;
}

body.nav-collapsed .section-nav-collapse-label {
  display: none;
}

body.nav-collapsed .section-nav-collapse svg {
  transform: rotate(180deg);
}

@media (max-width: 900px) {
  .section-nav-foot {
    display: none;
  }
}

/* ============================================================================
   统一过渡动画层：渐入渐出
   ----------------------------------------------------------------------------
   · 进入慢一点并带轻微位移，离开快一点且只淡出 —— "出现优雅、消失干脆"。
   · 借 @starting-style + transition-behavior: allow-discrete 让 hidden 属性的
     显隐也参与过渡；不支持这两个特性的浏览器自动退化成原来的瞬时显隐。
   · 已有入场 animation 的浮层只补"离开"的淡出，避免两套动画互相覆盖。
   · 全局只过渡颜色 / 边框 / 阴影类属性，不做全局 transform 过渡，以免拖慢
     拖拽类交互（头像裁剪使用 translate3d 跟手）。
   · 全部包在 prefers-reduced-motion: no-preference 内，系统开启"减少动态效果"
     的用户完全看不到新动画。
   ============================================================================ */
:root {
  --fade-in-duration: 420ms;
  --fade-out-duration: 300ms;
  /* 入场与主曲线同源，出场用加速曲线：出现从容，消失干脆。 */
  --fade-in-ease: var(--ease-apple);
  --fade-out-ease: var(--ease-soft);
  --fade-rise: 10px;
  --stagger-step: 55ms;
}

@media (prefers-reduced-motion: no-preference) {
  /* —— 全局：颜色 / 边框 / 阴影 / 描边的平滑过渡 —— */
  :where(*) {
    transition:
      background-color var(--motion-fast) var(--ease-soft),
      border-color var(--motion-fast) var(--ease-soft),
      color var(--motion-fast) var(--ease-soft),
      fill var(--motion-fast) var(--ease-soft),
      stroke var(--motion-fast) var(--ease-soft),
      box-shadow var(--motion-fast) var(--ease-soft);
  }

  /* —— 浮层显隐：统一的渐入渐出 —— */
  .account-popover,
  .opportunity-popup,
  .opportunity-popup-panel,
  .avatar-crop-popup,
  .notice,
  .forgot-success,
  .journal-edit-banner,
  .workspace-auth-gate {
    /* 透明度走更均匀的曲线，位移走几何曲线。
       两者共用一条起步极快的曲线时，淡入会在前 1/3 时间里冲到 85% 以上，
       看上去就是"啪"地出现而不是渐显。 */
    transition:
      opacity var(--fade-in-duration) var(--ease-soft),
      transform var(--fade-in-duration) var(--fade-in-ease),
      display var(--fade-in-duration) allow-discrete;
  }

  /* 进入的起点：只给原本没有入场动画的浮层，避免和原动画打架 */
  @starting-style {
    .opportunity-popup:not([hidden]) {
      opacity: 0;
    }

    .account-popover:not([hidden]) {
      opacity: 0;
      transform: translateY(-6px) scale(0.982);
    }

    .opportunity-popup-panel:not([hidden]),
    .notice:not([hidden]),
    .forgot-success:not([hidden]),
    .journal-edit-banner:not([hidden]),
    .workspace-auth-gate:not([hidden]) {
      opacity: 0;
      transform: translateY(var(--fade-rise));
    }
  }

  /* 离开：更快、只淡出，并把 display 推迟到淡出结束 */
  .account-popover[hidden],
  .opportunity-popup[hidden],
  .opportunity-popup-panel[hidden],
  .avatar-crop-popup[hidden],
  .notice[hidden],
  .forgot-success[hidden],
  .journal-edit-banner[hidden],
  .workspace-auth-gate[hidden] {
    opacity: 0;
    transform: none;
    transition:
      opacity var(--fade-out-duration) var(--ease-soft),
      transform var(--fade-out-duration) var(--ease-apple),
      display var(--fade-out-duration) allow-discrete;
  }

  /* 头像面板收起时沿来路缩回，与展开对称；其余浮层只淡出。 */
  .account-popover[hidden] {
    opacity: 0;
    transform: translateY(-5px) scale(0.986);
  }

  /* 这两个浮层的入场 animation 用了 both 填充，会盖住上面的淡出过渡；
     改成 backwards 后动画结束即交还给元素自身样式，关键帧结束态与元素一致，
     视觉无变化，但离开时能正常淡出。 */
  .account-popover,
  .avatar-crop-popup {
    animation-fill-mode: backwards;
  }

  /* —— 首屏：main 下每个静态区块依次淡入上浮 —— */
  @keyframes ui-section-in {
    from {
      opacity: 0;
      transform: translateY(var(--fade-rise));
    }
  }

  main > * {
    animation: ui-section-in var(--motion-slow) var(--fade-in-ease) backwards;
    animation-delay: calc(var(--section-index, 0) * var(--stagger-step));
  }

  main > *:nth-child(1) { --section-index: 0; }
  main > *:nth-child(2) { --section-index: 1; }
  main > *:nth-child(3) { --section-index: 2; }
  main > *:nth-child(4) { --section-index: 3; }
  main > *:nth-child(5) { --section-index: 4; }
  main > *:nth-child(6) { --section-index: 5; }
  main > *:nth-child(7) { --section-index: 6; }
  main > *:nth-child(8) { --section-index: 7; }
  main > *:nth-child(9) { --section-index: 8; }
  main > *:nth-child(10) { --section-index: 9; }
}

/* ============================================================================
   iOS「液态玻璃」视觉层
   ----------------------------------------------------------------------------
   1) 间距修复：宏观发布核对卡片此前没有任何内边距规则，标题「宏观发布核对」、
      卡头小字「发布前预期 / 实际值 / 前值」和右上角「市场反应按 S&P 500 交易日
      计算」全都直接贴着卡片边框；同时补上头部与列表之间的间距。
   2) 圆角阶梯：全站控件由原来的 5–9px 提升到 iOS 连续圆角量级；分段控件遵循
      "内项圆角 = 外框圆角 − 内边距(2px)" 的配套关系，避免内项顶出外框的圆弧。
   3) 玻璃表面只用于「浮在内容之上」的导航与弹层（顶栏 / 侧边栏 / 账号弹层 /
      提醒面板 / 下拉菜单 / 分区锚点条）。内容卡片保持不透明：既保证正文可读性，
      也避免几十个 backdrop-filter 同时合成的性能开销。
   4) 玻璃底色用 color-mix 混 var(--panel)，深浅色主题自动跟随，无需两套维护。
   5) 本文件由多层样式叠加而成，这里已是最后一层，因此对"必须生效"的少数属性
      使用 !important 明确接管；全文件原本没有任何 border-radius !important，
      不会与既有规则冲突。
   ============================================================================ */

/* —— 1) 宏观发布核对 / 下一次宏观发布：补齐内边距与头部间距 —— */
.macro-release-board,
.event-board {
  padding: 16px;
}

.macro-release-list,
.event-list {
  margin-top: 12px;
}

.macro-release-metrics > div,
.macro-release-reaction > div {
  padding: 12px;
}

/* —— 2) 圆角令牌 —— */
:root {
  --radius-chip: 8px;
  --radius-control: 10px;
  --radius-group: 12px;
  --radius-menu: 14px;
  --radius-card: 16px;
  --radius-panel: 20px;
}

/* —— 3) 输入框 / 下拉 / 文本域 —— */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"])),
:where(select),
:where(textarea) {
  border-radius: var(--radius-control);
}

.account-login-form input,
.register-form input,
.settings-field input,
.portfolio-form input,
.rebalance-form input,
.workspace-inline-select select,
.workspace-inline-form select,
.holding-row select,
.threshold-field input,
.avatar-crop-zoom input {
  border-radius: var(--radius-control);
}

/* —— 4) 按钮与菜单项 —— */
.refresh-button,
.secondary-button,
.signal-page-button,
.account-primary-button,
.account-secondary-button,
.news-refresh-button,
.avatar-crop-actions button,
.indicator-history-toggle,
.custom-select-trigger,
.custom-select-option,
.threshold-chip,
.mobile-nav-toggle {
  border-radius: var(--radius-control);
}

/* 名称里不含 button/input、但确实是可点击控件的元素（按 cursor: pointer 全量核对） */
.csv-upload,
.avatar-upload,
.avatar-crop-reset,
.account-menu-action,
.inline-action,
.holding-remove,
.workspace-row-action,
.news-category,
.stress-item > summary,
.section-nav-link,
.section-nav-collapse {
  border-radius: var(--radius-control);
}

/* 分段控件：外框 14px、内项 12px（内边距 2px，圆角严格配套） */
.theme-control,
.segmented-control,
.indicator-tabs {
  border-radius: var(--radius-group);
}

.theme-option,
.segmented-control button,
.indicator-tab {
  border-radius: var(--radius-control);
}

/* —— 5) 内容卡片统一到 iOS 卡片圆角 —— */
.card,
.event-board,
.strategy-board,
.tactical-board,
.signal-board,
.portfolio-board,
.release-card,
.news-card,
.news-impact-card,
.holding-news-card,
.news-detail-panel,
.indicator-card,
.tactical-card,
.tactical-watch-card,
.buffett-card,
.stress-card,
.asset-card,
.daily-focus-card,
.daily-focus-grid,
.workspace-card,
.workspace-metric-card,
.workspace-hero,
.workspace-kpis,
.watchlist-card,
.alert-rule-card,
.alert-event-history,
.macro-release-card,
.journal-card,
.transaction-attribution,
.settings-audit-panel,
.settings-panel,
.settings-session-panel,
.portfolio-summary-panel,
.portfolio-stress-panel,
.avatar-crop-panel {
  border-radius: var(--radius-card) !important;
}

/* —— 6) 玻璃令牌 —— */
:root {
  --glass-blur: saturate(175%) blur(22px);
  --glass-surface: color-mix(in srgb, var(--panel) 78%, transparent);
  --glass-surface-strong: color-mix(in srgb, var(--panel) 88%, transparent);
  --glass-edge: color-mix(in srgb, var(--line) 68%, transparent);
  --glass-highlight: rgba(255, 255, 255, 0.68);
  --glass-shadow: 0 18px 44px rgba(16, 20, 26, 0.16), 0 2px 8px rgba(16, 20, 26, 0.06);
}

:root[data-theme="dark"] {
  --glass-highlight: rgba(255, 255, 255, 0.09);
  --glass-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* —— 7) 玻璃表面：顶栏、侧边栏与各浮层 —— */
/* 顶栏与侧边栏在整个页面文字的下方常驻，底色更实一档，保证正文可读性 */
.topbar,
.section-nav {
  background: var(--glass-surface-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
  border-color: var(--glass-edge) !important;
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight) !important;
}

/* 浮层：更通透，靠投影与顶部高光内描边和页面分层 */
.account-popover,
.opportunity-popup-panel,
.custom-select-menu,
.workspace-anchor-nav {
  background: var(--glass-surface) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
  border-color: var(--glass-edge) !important;
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight) !important;
}

.account-popover,
.opportunity-popup-panel {
  border-radius: var(--radius-panel) !important;
}

.custom-select-menu {
  border-radius: var(--radius-menu) !important;
}

.workspace-anchor-nav {
  border-radius: var(--radius-group) !important;
}

/* ============================================================================
   玻璃质感增强 + 主题切换动效
   ----------------------------------------------------------------------------
   1. 环境光层。玻璃必须"背后有东西可折射"才成立。原来页面背后是一片纯色
      （浅色 #fbfbfc → #f5f5f7，深色 #0b0e11 加淡网格），顶栏和侧边栏模糊过去
      与纯色没有区别，所以此前基本看不出玻璃。现在在内容背后铺一层随主题
      变化的柔光色块，玻璃表面才真正有折射与色彩。
   2. 玻璃配方升级：加斜向镜面高光与底部内描边，模糊/饱和再加强。
   3. 内容卡片半透明化，隔着卡片也能透出环境光，材质感由此而来。卡片不加
      backdrop-filter —— 环境光本身已是柔和渐变，观感接近，但避免十几个模糊
      层同时合成带来的滚动开销（真实模糊只留给常驻的导航与浮层）。
   4. 主题切换：从切换按钮位置做圆形扩散（View Transitions API）；不支持该
      API 的浏览器退化为全站颜色渐变，不影响主题本身生效。
   ============================================================================ */

/* —— 环境光与环境色令牌 —— */
:root {
  --bg-top: #fbfbfc;
  --aurora-1: color-mix(in srgb, var(--blue) 30%, transparent);
  --aurora-2: color-mix(in srgb, var(--cyan) 26%, transparent);
  --aurora-3: color-mix(in srgb, var(--amber) 22%, transparent);
  --aurora-4: color-mix(in srgb, var(--green) 20%, transparent);
  --glass-card: color-mix(in srgb, var(--panel) 84%, transparent);
  --glass-sheen: rgba(255, 255, 255, 0.5);
  --glass-surface: color-mix(in srgb, var(--panel) 74%, transparent);
  --glass-surface-strong: color-mix(in srgb, var(--panel) 86%, transparent);
  --theme-x: 50%;
  --theme-y: 4%;
}

:root[data-theme="dark"] {
  --bg-top: #101317;
  --aurora-1: color-mix(in srgb, var(--blue) 34%, transparent);
  --aurora-2: color-mix(in srgb, var(--cyan) 26%, transparent);
  --aurora-3: color-mix(in srgb, var(--amber) 18%, transparent);
  --aurora-4: color-mix(in srgb, var(--green) 22%, transparent);
  --glass-sheen: rgba(255, 255, 255, 0.08);
}


/* ============================================================================
   顶部那条"多出来的东西"
   ----------------------------------------------------------------------------
   1. 真正的 bug：:root[data-theme="dark"] body 的优先级是 (0,2,1)，压过了后面
      body { background: transparent } 的 (0,0,1)。于是暗色下 body 自己刷了一层
      不透明渐变，把 z-index:-1 的极光层整个盖住 —— 极光在暗色下等于失效，
      而且页面顶部露出 #111113 → #0b0b0d 那条偏亮的横带。这里用 !important 压死，
      两种主题都让极光层真正透出来。
   2. 浅色下最顶部那条色带来自极光：两个径向光斑的圆心分别定在 12% 3% 和 92% 0%，
      也就是正好压在视口最上沿，于是最顶上十几像素是全页颜色最重的部分。
      现在在最上层加一道 32px 的渐隐，把最顶部归位成 --bg（与 html 画布同色），
      光斑从 32px 处才渐入 —— 顶栏和侧边栏下面依旧有色可折射，玻璃感不受影响。
   3. 面板投影原来向上溢出，会在顶部留下一层灰雾；改成负扩散 + 正下偏移，
      影子只往下方走。
   ============================================================================ */

body {
  background: transparent !important;
}

body::before {
  background:
    linear-gradient(180deg, var(--bg) 0, transparent 32px),
    radial-gradient(48vw 48vw at 12% 3%, var(--aurora-1), transparent 68%),
    radial-gradient(44vw 44vw at 92% 0%, var(--aurora-2), transparent 66%),
    radial-gradient(56vw 56vw at 76% 99%, var(--aurora-3), transparent 68%),
    radial-gradient(46vw 46vw at 3% 96%, var(--aurora-4), transparent 66%),
    linear-gradient(180deg, var(--bg-top) 0, var(--bg) 320px, var(--bg) 100%);
}

:root {
  --glass-shadow:
    0 14px 32px -16px rgba(16, 20, 26, 0.3),
    0 1px 3px -1px rgba(16, 20, 26, 0.14),
    0 0 0 1px color-mix(in srgb, var(--line) 42%, transparent);
}

:root[data-theme="dark"] {
  --glass-shadow:
    0 16px 36px -18px rgba(0, 0, 0, 0.68),
    0 1px 3px -1px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* 顶栏变成悬浮条后，账号浮层跟着下移，别再和工具条贴在一起 */
.account-popover {
  top: 76px;
}


/* ============================================================================
   动效轻量化：主题切换 + 侧边栏收起
   ----------------------------------------------------------------------------
   1. 主题切换原先走 View Transitions。它要求浏览器把整份文档各截成一张位图
      （本页内容高度约六千到八千像素，两张全页位图要光栅化并占上百 MB 显存），
      再对这两张全页大图层逐帧跑 clip-path 圆形裁切 —— 这就是"比较卡顿"的来源。
      现在换成"淡出 → 换色 → 淡入"的纯合成动画：整场只有一层全屏蒙版在动 opacity，
      不截图、不重排、不重绘内容；换色那一帧被不透明蒙版完全盖住，即便有瞬时卡顿也看不见。
      （JS 里不再调用 startViewTransition，下面那些 ::view-transition-* 规则自然失效。）
   2. 侧边栏收起：真实开销有三处 —— (a) 宽度补间期间每帧重算 backdrop-filter 模糊
      （整屏高面板），(b) 同一面板的 box-shadow 也在做 300ms 补间，
      (c) .shell 的 margin-left 补间每帧重绘整棵内容树。这里：时长 560ms → 340ms、
      把投影移出补间、并在展开/收起动画期间临时关掉该面板的模糊
      （JS 已有 is-navigation-expanding / is-navigation-collapsing 两个类可直接挂）。
   ============================================================================ */

html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  background: var(--bg);
  transition: opacity 240ms var(--ease-apple);
}

html.theme-switching::after {
  opacity: 1;
  transition-duration: 130ms;
}

.dashboard-page .shell {
  transition: margin-left 440ms var(--ease-apple);
}

.dashboard-page .section-nav {
  transition:
    width 440ms var(--ease-apple),
    transform 440ms var(--ease-apple);
}

.dashboard-page .section-nav.is-navigation-expanding,
.dashboard-page .section-nav.is-navigation-collapsing {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}


/* ============================================================================
   修补：主题蒙版改成"自我到期"的关键帧动画，杜绝闪屏
   ----------------------------------------------------------------------------
   上一版蒙版的显隐由 JS 成对 add/remove class 控制，一旦逻辑出现回环
   （或任何一次 class 没被移除），蒙版就会反复渐入渐出 —— 就是你看到的"一直闪"。
   现在 class 只负责启动一次 480ms 的关键帧动画，动画自带 0 → 1 → 1 → 0 全过程，
   且 fill-mode 为 both：放完必然停在 opacity 0。
   于是即使 class 因任何原因留在元素上，蒙版也会自己消失，最坏退化成"没有过渡效果"，
   不可能遮住页面、更不可能持续闪烁（这是刻意设计的失效方向）。
   JS 配合点：0ms 起动画，150ms 落在 28%–46% 的全不透明平台内换色，
   480ms 动画结束，500ms 才移除 class（避免动画被中途取消而跳变）。
   ============================================================================ */

html::after {
  transition: none;
}

@media (prefers-reduced-motion: no-preference) {
  html.theme-switching::after {
    opacity: 0;
    animation: theme-veil 480ms var(--ease-soft) both;
  }
}

@keyframes theme-veil {
  0% {
    opacity: 0;
  }

  28% {
    opacity: 1;
  }

  46% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}


/* ============================================================================
   顶栏 / 侧边栏玻璃再透一档
   ----------------------------------------------------------------------------
   --glass-surface-strong 全文件只有 .topbar 与 .section-nav 两处使用
   （各浮层用的是 --glass-surface，卡片用的是 --glass-card），所以只改这一个
   令牌，就精确命中这两个面板，不牵连弹层和卡片。
   底色占比 80% → 70%：透过率从 20% 提到 30%，配合 blur(34px) saturate(200%)
   仍能保证导航文字可读；两套主题共用同一个值（暗色下 --panel 本身更深）。
   还要更透就继续往下调（68 → 64），想收回原样就改回 80。
   ============================================================================ */

:root {
  --glass-surface-strong: color-mix(in srgb, var(--panel) 70%, transparent);
}





body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(48vw 48vw at 12% 3%, var(--aurora-1), transparent 68%),
    radial-gradient(44vw 44vw at 92% 0%, var(--aurora-2), transparent 66%),
    radial-gradient(56vw 56vw at 76% 99%, var(--aurora-3), transparent 68%),
    radial-gradient(46vw 46vw at 3% 96%, var(--aurora-4), transparent 66%),
    linear-gradient(180deg, var(--bg-top) 0, var(--bg) 320px, var(--bg) 100%);
}

/* —— 玻璃配方：斜向高光 + 顶部亮边 + 底部暗边 —— */
.topbar,
.section-nav {
  background:
    linear-gradient(118deg, var(--glass-sheen), transparent 46%),
    var(--glass-surface-strong) !important;
  -webkit-backdrop-filter: saturate(200%) blur(34px) !important;
  backdrop-filter: saturate(200%) blur(34px) !important;
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 var(--glass-highlight),
    inset 0 -1px 0 var(--glass-edge) !important;
}

.account-popover,
.opportunity-popup-panel,
.custom-select-menu,
.workspace-anchor-nav {
  background:
    linear-gradient(118deg, var(--glass-sheen), transparent 46%),
    var(--glass-surface) !important;
  -webkit-backdrop-filter: saturate(200%) blur(34px) !important;
  backdrop-filter: saturate(200%) blur(34px) !important;
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 var(--glass-highlight),
    inset 0 -1px 0 var(--glass-edge) !important;
}

/* —— 内容卡片：半透明磨砂 —— */
.card,
.event-board,
.strategy-board,
.tactical-board,
.signal-board,
.portfolio-board,
.release-card,
.news-card,
.news-impact-card,
.holding-news-card,
.news-detail-panel,
.indicator-card,
.tactical-card,
.tactical-watch-card,
.buffett-card,
.stress-card,
.asset-card,
.daily-focus-card,
.daily-focus-grid,
.workspace-card,
.workspace-metric-card,
.workspace-hero,
.workspace-kpis,
.watchlist-card,
.alert-rule-card,
.alert-event-history,
.macro-release-card,
.journal-card,
.transaction-attribution,
.settings-audit-panel,
.settings-panel,
.settings-session-panel,
.portfolio-summary-panel,
.portfolio-stress-panel,
.avatar-crop-panel {
  background: var(--glass-card) !important;
}

/* 新闻卡悬停时原本会变实，这里保留该反馈 */
.news-card:hover,
.news-card:focus-visible {
  background: color-mix(in srgb, var(--panel) 94%, transparent) !important;
}

/* —— 主题切换：从按钮位置圆形扩散 —— */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
  }

  ::view-transition-image-pair(root) {
    isolation: auto;
  }

  ::view-transition-old(root) {
    z-index: 1;
  }

  ::view-transition-new(root) {
    z-index: 2;
    animation: theme-reveal 620ms var(--ease-apple) both;
  }

  @keyframes theme-reveal {
    from {
      clip-path: circle(0% at var(--theme-x) var(--theme-y));
    }

    to {
      clip-path: circle(150% at var(--theme-x) var(--theme-y));
    }
  }
}

/* 不支持 View Transitions 时：全站颜色渐变兜底 */
html.theme-crossfade,
html.theme-crossfade * {
  transition:
    background-color 420ms var(--ease-soft),
    color 420ms var(--ease-soft),
    border-color 420ms var(--ease-soft),
    fill 420ms var(--ease-soft),
    stroke 420ms var(--ease-soft),
    box-shadow 420ms var(--ease-soft) !important;
}

/* ============================================================================
   圆角收口 + 顶栏 / 侧边栏改为悬浮圆角玻璃面板
   ----------------------------------------------------------------------------
   1. 按钮兜底：用 :where() 的 0 优先级给"任何规则都没给圆角"的按钮/输入补上
      12px。已有圆角的一律不受影响（开关滑轨、圆形关闭按钮仍是圆的），
      所以不会把药丸和圆点压成圆角方块。
   2. 顶栏原来是一条通栏、无圆角、带下边框的横幅；在决策中心里品牌被移到侧边栏
      （.dashboard-page .topbar > .brand { display: none }），于是顶栏左侧整片空着、
      只有右侧一簇控件，这就是"看着怪"的来源。现在改为贴住内容的悬浮圆角工具条。
   3. 侧边栏由"贴左边缘、整屏高、只有右边框"改为带 12px 外边距的悬浮圆角面板，
      与顶栏同一套圆角与玻璃语言。
   4. 状态显示条此前仍是 8px 直角平面，现在与卡片统一（20px + 半透明磨砂）。
   ============================================================================ */

/* —— 1) 按钮 / 控件圆角兜底 —— */
:where(button, select, textarea, summary, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"])) {
  border-radius: var(--radius-control);
}

/* 全量审计后仍无圆角的交互元素 */
.news-icon-button,
.workspace-anchor-external,
.section-nav a {
  border-radius: var(--radius-control);
}

/* —— 2) 顶栏：悬浮圆角玻璃工具条 —— */
@media (min-width: 621px) {
  .topbar,
  .portfolio-page .portfolio-topbar,
  .settings-topbar,
  .workspace-topbar {
    position: sticky;
    top: 12px;
    margin: 12px 0 0;
    padding: 12px 16px;
    border: 1px solid var(--glass-edge);
    border-radius: var(--radius-card);
  }
}

@media (min-width: 901px) {
  /* 决策中心的顶栏品牌在侧边栏里，这里让工具条只包住自己的内容并靠右 */
  .dashboard-page .topbar {
    width: fit-content;
    margin: 12px 0 0 auto;
    padding: 8px 10px;
    border-radius: var(--radius-panel);
  }
}

@media (max-width: 900px) {
  .dashboard-page .topbar {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: var(--radius-card);
  }
}

/* —— 3) 侧边栏：悬浮圆角面板（仅桌面；≤900px 是抽屉，交给原规则） —— */
@media (min-width: 901px) {
  .dashboard-page .section-nav {
    inset: 12px auto 12px 12px;
    border: 1px solid var(--glass-edge);
    border-radius: var(--radius-panel);
  }
}

/* —— 4) 状态显示条：与卡片统一 —— */
.status-strip {
  border-radius: var(--radius-card);
  background: var(--glass-card) !important;
}

.status-strip > div {
  padding: 11px 14px;
}

/* —— 5) 顶栏变矮后，锚点导航与滚动定位跟着上移（仅桌面，≤760px 另有 top: 0） —— */
@media (min-width: 901px) {
  .workspace-anchor-nav {
    top: 74px;
  }

  .workspace-section {
    scroll-margin-top: 140px;
  }
}

/* ============================================================================
   收口：把下面两条放到文件真正的末尾
   ----------------------------------------------------------------------------
   本文件是四层设计叠加出来的，同优先级下"后写者生效"。上面几次追加都是靠
   替换某个片段插入的，位置并不在末尾，于是出现了两次"写了但被反超"：
     1) 顶栏 / 侧边栏玻璃再透一档：底色占比 80% → 70%
        （--glass-surface-strong 全文件只有 .topbar 与 .section-nav 用，
          不牵连浮层 --glass-surface 与卡片 --glass-card）
     2) body::before 的极光层补回"顶部 32px 渐隐"
        （上次的覆盖写在原始规则之前，被原始规则反超，实际从未生效）
   现在统一落在 EOF，保证生效。要更透就把 70 继续往下调（68 / 64）；
   想收回原样改回 80。
   ============================================================================ */

:root {
  --glass-surface-strong: color-mix(in srgb, var(--panel) 70%, transparent);
}

body::before {
  background:
    linear-gradient(180deg, var(--bg) 0, transparent 32px),
    radial-gradient(48vw 48vw at 12% 3%, var(--aurora-1), transparent 68%),
    radial-gradient(44vw 44vw at 92% 0%, var(--aurora-2), transparent 66%),
    radial-gradient(56vw 56vw at 76% 99%, var(--aurora-3), transparent 68%),
    radial-gradient(46vw 46vw at 3% 96%, var(--aurora-4), transparent 66%),
    linear-gradient(180deg, var(--bg-top) 0, var(--bg) 320px, var(--bg) 100%);
}

:root[data-theme="dark"] {
  --glass-surface-strong: color-mix(in srgb, var(--panel) 80%, transparent);
}

/* ============================================================================
   让"透明"真的看得见（顶栏 / 侧边栏）
   ----------------------------------------------------------------------------
   前面两轮一直只在调面板自己的底色占比（80 → 70 → 暗色 80），但"看得出透明"
   主要取决于另外三件事，底色占比只是很小的一部分：
     1. 面板后面有没有东西可看。极光太淡（蓝 30% / 青 26%），透出来只是一片均匀
        底色，看起来就跟不透明一样 —— 这是最主要的原因。
     2. 蒙在面板上那道白色斜向高光 rgba(255,255,255,.5) 太厚，把透上来的颜色洗白了。
     3. 模糊半径 34px 太大，背景的结构（光斑的边界）被抹平成一整片纯色。
   所以这次三件一起调：极光加强、白高光减薄、模糊收窄 34px → 16px，底色占比再降一档。
   只加强顶左 / 顶右 / 底左三个光斑（正好是顶栏与侧边栏所在位置），
   底部右侧 --aurora-3 保持原值，避免整页颜色被一起推高。
   ============================================================================ */

:root {
  --glass-surface-strong: color-mix(in srgb, var(--panel) 58%, transparent);
  --glass-sheen: rgba(255, 255, 255, 0.2);
  --aurora-1: color-mix(in srgb, var(--blue) 48%, transparent);
  --aurora-2: color-mix(in srgb, var(--cyan) 40%, transparent);
  --aurora-4: color-mix(in srgb, var(--green) 32%, transparent);
}

:root[data-theme="dark"] {
  --glass-surface-strong: color-mix(in srgb, var(--panel) 74%, transparent);
  --glass-sheen: rgba(255, 255, 255, 0.06);
  --aurora-1: color-mix(in srgb, var(--blue) 48%, transparent);
  --aurora-2: color-mix(in srgb, var(--cyan) 40%, transparent);
  --aurora-4: color-mix(in srgb, var(--green) 32%, transparent);
}

.topbar,
.section-nav {
  -webkit-backdrop-filter: saturate(185%) blur(16px) !important;
  backdrop-filter: saturate(185%) blur(16px) !important;
}

/* ============================================================================
   顶栏 / 侧边栏：再透一档
   ----------------------------------------------------------------------------
   底色占比 浅色 58% → 44%（透过 56%）、暗色 74% → 60%；白色高光再减薄；
   模糊 16px → 11px，滚动时能看清面板底下内容被磨成柔和色块，是最"看得见透明"的一档。
   仍保证可读：浅色下深色文字压在约 45% 白 + 浅色极光上，暗色下浅色文字压在深色面板上。
   继续微调：还想更透 → 38% / 8px；觉得过了 → 52% / 14px。
   ============================================================================ */

:root {
  --glass-surface-strong: color-mix(in srgb, var(--panel) 44%, transparent);
  --glass-sheen: rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] {
  --glass-surface-strong: color-mix(in srgb, var(--panel) 60%, transparent);
  --glass-sheen: rgba(255, 255, 255, 0.03);
}

.topbar,
.section-nav {
  -webkit-backdrop-filter: saturate(175%) blur(11px) !important;
  backdrop-filter: saturate(175%) blur(11px) !important;
}

/* ============================================================================
   宏观发布核对：临近发布的卡片自动置顶（样式）
   ----------------------------------------------------------------------------
   置顶窗口由 app.js 的 MACRO_RELEASE_PIN_BEFORE_MS / _AFTER_MS 决定，
   卡片上会带 data-pinned="true"。这里给它琥珀色描边 + 顶部淡染 + 一枚
   「置顶 · T-x 小时」角标，并取消 pending 卡片原本的 0.82 透明度压暗。
   .macro-release-pin 用两级类名，是为了压过既有的 .macro-release-head span
   （(0,1,1)）对 color / font-size 的设定。
   ============================================================================ */

.macro-release-hint {
  padding: 2px 2px 4px;
  color: var(--muted);
  font-size: 12px;
}

.macro-release-head > .macro-release-flags {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.macro-release-head .macro-release-pin {
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--amber) 18%, transparent);
  color: var(--amber);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.macro-release-card[data-pinned="true"],
.macro-release-card[data-pinned="true"][data-status="pending"] {
  opacity: 1;
  border-color: color-mix(in srgb, var(--amber) 42%, var(--line-soft));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--amber) 9%, transparent), transparent 58%),
    var(--panel-strong);
  box-shadow: 0 12px 26px -18px color-mix(in srgb, var(--amber) 70%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .macro-release-card[data-pinned="true"] {
    animation: macro-pin-in var(--motion-base, 380ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1)) both;
  }
}

@keyframes macro-pin-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================================
   宏观发布核对：位置靠前 + 列表限高（已撤回吸顶）
   ----------------------------------------------------------------------------
   之前这里做过 position: sticky，滚动时面板固定在视口顶部、正文从它下面穿过，
   等于长期遮住屏幕上部约 300px，观感就是"挡住了页面"，已整体撤回：
   面板随页面正常滚动，不再固定在视口。
   「置顶」现在只保留两件事：
     1. 位置靠前 —— 它是 index.html 里 <main> 的第二块，紧随「先看最重要的四件事」；
     2. 有临近发布时面板描边转琥珀色（配合列表里的角标），不再占用视口。
   列表限高 420px 并内部滚动：30 条记录若全部展开会把页面顶部撑开几千像素。
   不想要这个上限，把 max-height / overflow-y / padding-right / scrollbar-gutter 删掉即可。
   ============================================================================ */

.macro-release-board[data-pinned="true"] {
  border-color: color-mix(in srgb, var(--amber) 46%, var(--line-soft));
}

.macro-release-board .macro-release-list {
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-gutter: stable;
}


@keyframes watch-tick {
  0% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}


/* ============================================================================
   决策中心 · 自选关注：三列间距对称化
   ----------------------------------------------------------------------------
   病根：标的列是 1.7fr，内容短、轨道宽，文字后面留一大片死白，
   而走势图轨道固定 88px、两侧只有 10px 间距 —— 于是"代码↔曲线"很远、
   "曲线↔成交额"贴在一起。
   改法：标的列改成 max-content（轨道紧贴内容，死白归零，长名字仍用 180px
   截断省略），走势图列固定 88px，行间距统一 16px —— 曲线左右各 16px，
   完全对称。数值列给最小宽度，窄窗口下也不会被压没。
   ============================================================================ */

@media (min-width: 901px) {
  .watch-row {
    grid-template-columns: max-content 88px minmax(66px, 0.9fr) minmax(84px, 1.25fr) minmax(58px, 0.85fr) auto;
    gap: 16px;
  }

  .watch-identity-name {
    max-width: 180px;
  }

  .watch-identity-title {
    max-width: 180px;
  }
}

/* ============================================================================
   决策中心 · 自选关注：列对齐 + 信号列
   ----------------------------------------------------------------------------
   成交额在它自己的轨道里居中（轨道是 fr，会吃掉多余宽度，所以文字正好落在
   曲线和最新价中间）；最新价与涨跌幅一律右对齐；表头跟着同样的对齐规则走，
   所以标签和数字不会再错位。信号列放在涨跌幅后面。
   ============================================================================ */

@media (min-width: 901px) {
  .watch-row {
    grid-template-columns: max-content 88px minmax(78px, 0.85fr) minmax(96px, 1.15fr) minmax(66px, 0.75fr) minmax(84px, auto) auto;
    gap: 18px;
  }
}

/* ==========================================================================
   决策中心 · 自选关注 · 合并层（原 8 层覆盖已合并为这一层）
   --------------------------------------------------------------------------
   合并方式：按「选择器 × 属性 × 媒体条件」求出各层胜出声明，逐条合并到文件末尾，
   并用脚本把生成的块重新解析、与胜出表逐键比对后才生效。保留的要点：
   · 列轨用确定性宽度（非 max-content/auto），保证表头与各行的成交额 / 最新价 /
     涨跌幅 / 信号严格对齐；成交额居中，最新价、涨跌幅、信号右对齐。
   · 最新价内部用 order 把时段标签排在价格数字左侧（修「价格与标签错位」）。
   · 走势图列固定 88px，左右间距对称；信号按 data-tone / data-zone 上色。
   · 分时取不到时走势格标 data-source="live"，曲线由每秒报价累积成形。
   · 手机端（<=900px）用 grid-template-areas 分四行卡片：标的+操作 / 走势图通栏 /
     成交额+最新价 / 涨跌幅+信号。
   · 桌面几何只在 @media (min-width: 901px) 内生效，与手机端互不干扰。
   被合并的原 8 层原文备份：项目根目录 styles-watchlist-layers-removed.css。
   ========================================================================== */

  .alert-event-history {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .alert-rule-card {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .asset-card {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .avatar-crop-panel {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .buffett-card {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .card {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .daily-focus-card {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .daily-focus-grid {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .event-board {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .holding-news-card {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .indicator-card {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .journal-card {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .macro-release-card {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .news-card {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .news-detail-panel {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .news-impact-card {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .portfolio-board {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .portfolio-stress-panel {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .portfolio-summary-panel {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .release-card {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .settings-audit-panel {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .settings-panel {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .settings-session-panel {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .signal-board {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .strategy-board {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .stress-card {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .tactical-board {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .tactical-card {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .tactical-card.watch {
    border-color: var(--line-soft);
    background: #11151a;
  }
  .tactical-watch-card {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .transaction-attribution {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .watch-amount {
    color: var(--muted-strong);
  }
  .watch-cell {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
  }
  .watch-change.negative {
    color: var(--red);
  }
  .watch-change.positive {
    color: var(--green);
  }
  .watch-identity {
    display: grid;
    gap: 2px;
    min-width: 0;
  }
  .watch-identity-name {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .watch-identity-title {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .watch-notice {
    margin: 0 0 10px;
    padding: 9px 12px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-control);
    background: var(--surface-subtle);
    color: var(--muted-strong);
    font-size: 12px;
    line-height: 1.5;
  }
  .watch-notice[data-tone="info"] {
    border-color: color-mix(in srgb, var(--blue) 35%, var(--line-soft));
  }
  .watch-notice[data-tone="warn"] {
    border-color: color-mix(in srgb, var(--amber) 45%, var(--line-soft));
    background: color-mix(in srgb, var(--amber) 12%, var(--surface-subtle));
    color: var(--text);
  }
  .watch-price {
    font-size: 14px;
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .watch-price > .watch-price-value {
    order: 2;
  }
  .watch-price > .watch-session-tag {
    order: 1;
  }
  .watch-price-value {
    font-size: 14px;
    flex: 0 0 auto;
  }
  .watch-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.9fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-control);
    background: var(--panel-strong);
  }
  .watch-row > .watch-amount {
    text-align: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .watch-row > .watch-cell {
    min-width: 0;
  }
  .watch-row > .watch-change {
    text-align: right;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .watch-row > .watch-price {
    justify-content: flex-end;
    min-width: 0;
  }
  .watch-row > .watch-signal {
    min-width: 0;
  }
  .watch-row > .watch-spark {
    min-width: 0;
  }
  .watch-row > .workspace-row-action {
    justify-self: center;
  }
  .watch-row-head {
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
  }
  .watch-row-head > span:nth-child(3) {
    text-align: center;
  }
  .watch-row-head > span:nth-child(4) {
    text-align: right;
  }
  .watch-row-head > span:nth-child(5) {
    text-align: right;
  }
  .watch-row-head > span:nth-child(6) {
    text-align: center;
  }
  .watch-search {
    position: relative;
    margin-bottom: 10px;
  }
  .watch-search input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-control);
    background: var(--surface-subtle);
    color: var(--text);
    font-size: 14px;
  }
  .watch-search input:focus-visible {
    border-color: color-mix(in srgb, var(--blue) 52%, var(--line-soft));
    outline: none;
  }
  .watch-search-empty {
    padding: 10px;
    color: var(--muted);
    font-size: 12px;
  }
  .watch-search-item {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 9px;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
  }
  .watch-search-item:focus-visible {
    background: var(--surface-subtle);
    outline: none;
  }
  .watch-search-item:hover {
    background: var(--surface-subtle);
    outline: none;
  }
  .watch-search-item[data-market="okx"] .watch-search-type {
    background: color-mix(in srgb, var(--amber) 18%, transparent);
    color: var(--amber);
  }
  .watch-search-name {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .watch-search-results {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--glass-edge);
    border-radius: var(--radius-card);
    background: var(--panel-strong);
    box-shadow: var(--glass-shadow);
  }
  .watch-search-type {
    padding: 2px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue) 16%, transparent);
    color: var(--blue);
    font-size: 11px;
    font-style: normal;
    white-space: nowrap;
  }
  .watch-session-tag {
    flex: 0 0 auto;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--surface-subtle);
    color: var(--muted-strong);
    font-size: 10.5px;
    font-style: normal;
    white-space: nowrap;
  }
  .watch-session-tag[data-tone="neutral"] {
    background: color-mix(in srgb, var(--blue) 16%, transparent);
    color: var(--blue);
  }
  .watch-session-tag[data-tone="warning"] {
    background: color-mix(in srgb, var(--amber) 18%, transparent);
    color: var(--amber);
  }
  .watch-signal {
    display: grid;
    gap: 2px;
    justify-items: center;
    white-space: nowrap;
  }
  .watch-signal-trend {
    font-size: 11.5px;
    font-style: normal;
    font-weight: 600;
  }
  .watch-signal-zone {
    font-size: 10px;
    color: var(--muted);
  }
  .watch-signal[data-tone="down"] .watch-signal-trend {
    color: var(--red);
  }
  .watch-signal[data-tone="flat"] .watch-signal-trend {
    color: var(--muted-strong);
  }
  .watch-signal[data-tone="up"] .watch-signal-trend {
    color: var(--green);
  }
  .watch-signal[data-zone="bottom"] .watch-signal-zone {
    color: var(--green);
  }
  .watch-signal[data-zone="top"] .watch-signal-zone {
    color: var(--red);
  }
  .watch-spark {
    display: block;
    width: 88px;
    height: 26px;
  }
  .watch-spark svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .watch-spark svg[data-empty="true"] {
    opacity: 0.22;
  }
  .watch-spark svg[data-tone="down"] .watch-spark-area {
    fill: var(--red);
  }
  .watch-spark svg[data-tone="down"] .watch-spark-line {
    stroke: var(--red);
  }
  .watch-spark svg[data-tone="flat"] .watch-spark-area {
    fill: var(--muted);
  }
  .watch-spark svg[data-tone="flat"] .watch-spark-line {
    stroke: var(--muted);
  }
  .watch-spark svg[data-tone="up"] .watch-spark-area {
    fill: var(--green);
  }
  .watch-spark svg[data-tone="up"] .watch-spark-line {
    stroke: var(--green);
  }
  .watch-spark-area {
    stroke: none;
    opacity: 0.14;
  }
  .watch-spark-line {
    fill: none;
    stroke-width: 1.4;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }
  .watch-spark[data-source="live"] {
    opacity: 0.72;
  }
  .watch-type {
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--surface-subtle);
    color: var(--muted-strong);
    font-size: 11px;
    font-style: normal;
  }
  .watchlist-card {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .watchlist-grid {
    margin-top: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    gap: 6px;
  }
  .workspace-card {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .workspace-hero {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .workspace-kpis {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
  .workspace-metric-card {
    border-radius: var(--radius-card) !important;
    background: var(--glass-card) !important;
  }
@media (max-width: 900px) {
    .watch-price {
      flex-wrap: wrap;
    }
    .watch-row {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "identity action"      "spark    spark"      "amount   price"      "change   signal";
      gap: 8px 10px;
      padding: 12px 13px;
      align-items: center;
    }
    .watch-row > .watch-amount {
      grid-area: amount;
      justify-content: flex-start;
      text-align: left;
      min-width: 0;
    }
    .watch-row > .watch-amount::before {
      content: "成交额 ";
      color: var(--muted);
      font-size: 11px;
      font-weight: 400;
    }
    .watch-row > .watch-change {
      grid-area: change;
      justify-content: flex-start;
      text-align: left;
      min-width: 0;
    }
    .watch-row > .watch-change::before {
      content: "涨跌 ";
      color: var(--muted);
      font-size: 11px;
      font-weight: 400;
    }
    .watch-row > .watch-identity {
      grid-area: identity;
      min-width: 0;
      max-width: none;
    }
    .watch-row > .watch-price {
      grid-area: price;
      justify-content: flex-end;
      text-align: right;
      min-width: 0;
    }
    .watch-row > .watch-signal {
      grid-area: signal;
      justify-items: end;
      min-width: 0;
    }
    .watch-row > .watch-spark {
      grid-area: spark;
      width: 100%;
      height: 34px;
      min-width: 0;
    }
    .watch-row > .watch-spark svg {
      width: 100%;
      height: 34px;
    }
    .watch-row > .workspace-row-action {
      grid-area: action;
      align-self: start;
      justify-self: end;
    }
    .watch-row-head {
      display: none;
    }
    .watch-spark {
      width: 72px;
      height: 22px;
    }
    .watchlist-grid {
      gap: 10px;
    }
  }
@media (min-width: 901px) {
    .watch-identity {
      max-width: 172px;
    }
    .watch-identity-name {
      max-width: 172px;
    }
    .watch-identity-title {
      max-width: 172px;
    }
    .watch-row {
      grid-template-columns: 190px 88px minmax(90px, 1.1fr) minmax(120px, 1.15fr) minmax(72px, 0.8fr) minmax(90px, 1fr) 72px;
      gap: 18px;
    }
    .watch-row-head > span:nth-child(2) {
      text-align: center;
    }
    .watch-row-head > span:nth-child(7) {
      text-align: center;
    }
  }
@media (prefers-reduced-motion: no-preference) {
    .watch-cell.is-tick {
  animation: watch-tick 420ms var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1));
    }
  }
@media (prefers-reduced-motion: reduce) {
    .alert-rule-card {
      transition: none !important;
    }
    .journal-card {
      transition: none !important;
    }
    .ledger-row {
      transition: none !important;
    }
    .today-focus-item {
      transition: none !important;
    }
    .watchlist-card {
      transition: none !important;
    }
    .workspace-card {
      transition: none !important;
    }
  }

/* ==========================================================================
   决策中心 · 自选关注：排序条 + 拖动排序
   --------------------------------------------------------------------------
   手动模式按「存储顺序」排列，按住任意一行拖动即可改序，松手即保存；
   自动模式（涨跌幅 / 成交额 / 名称）在秒级刷新里每 10 秒重排一次，
   重排只移动已有 DOM 节点、不重建，所以价格数字与走势图不会被闪回。
   排序键存在行的 dataset 上（渲染与秒级刷新都会同步），不新增行内子元素，
   因此不影响自选行的列几何。
   ========================================================================== */

.watch-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
}

.watch-sort-label,
.watch-sort-hint {
  font-size: 11px;
  color: var(--muted);
}

.watch-sort-btn {
  padding: 4px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-subtle);
  color: var(--muted-strong);
  font-size: 12px;
  cursor: pointer;
}

.watch-sort-btn.is-active {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 14%, var(--surface-subtle));
  color: var(--text);
}

.watch-row[draggable="true"] .watch-identity {
  cursor: grab;
}

.watch-row.dragging {
  opacity: 0.55;
}

.watch-row.drop-before {
  box-shadow: 0 -2px 0 0 var(--blue);
}

.watch-row.drop-after {
  box-shadow: 0 2px 0 0 var(--blue);
}

/* ==========================================================================
   决策中心 · 自选关注：日线级信号
   --------------------------------------------------------------------------
   分时信号回答「今天怎么走」，日线信号回答「这段趋势在哪」。日线取 Yahoo 日线
   （1 年区间，约 250 根）与欧易 1D 蜡烛（200 根），算 RSI(14)、20/50 日均线、
   均线斜率与近 60 日区间位置，输出 上行/震荡/下跌 + 高位/中位/低位。
   只在 60 秒一次的序列请求里下发，不增加每秒轮询体积。
   ========================================================================== */

.watch-signal-daily {
  font-size: 10px;
  font-style: normal;
  line-height: 1.25;
  color: var(--muted);
  white-space: nowrap;
}

.watch-signal-daily[data-tone="up"] {
  color: var(--green);
}

.watch-signal-daily[data-tone="down"] {
  color: var(--red);
}

/* ==========================================================================
   决策中心 · 首屏加载占位
   --------------------------------------------------------------------------
   轻量工作区通常由服务端快照立即返回；首次冷启动或数据重建时显示明确进度，
   避免用户看到空白页面，也避免加载状态与登录提示混在一起。
   ========================================================================== */

.workspace-loading {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 620px;
  margin: 10vh auto 0;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.workspace-loading-mark {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 2px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: workspace-loading-spin 760ms linear infinite;
}

.workspace-loading strong,
.workspace-loading p {
  display: block;
}

.workspace-loading strong {
  font-size: 15px;
  font-weight: 660;
}

.workspace-loading p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.workspace-loading[hidden] {
  display: none;
}

@keyframes workspace-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-loading-mark {
    animation: none;
    border-color: var(--line);
    border-top-color: var(--blue);
  }
}

/* 工作区内容由接口返回后再显示，跳过通用首屏淡入，避免加载占位切换后
   出现约半秒的透明空档。 */
.workspace-page #workspaceContent {
  animation: none;
}

.workspace-page #riskLabContent {
  animation: none;
}

/* ==========================================================================
   宏观发布核对 · 三张竖向核对卡
   --------------------------------------------------------------------------
   桌面端把发布记录排成三列；每张卡内部再纵向排列“发布前预期 / 实际值 /
   前值”和“市场反应”，标签与值分列左右，避免三张卡各占一整行。
   移动端恢复单列，数据行仍保持紧凑。
   ========================================================================== */

.macro-release-board .macro-release-hint {
  grid-column: 1 / -1;
}

.macro-release-board .macro-release-card {
  align-content: start;
  min-width: 0;
}

.macro-release-board .macro-release-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.macro-release-board .macro-release-head > .macro-release-flags {
  width: 100%;
  justify-content: flex-start;
}

.macro-release-board .macro-release-metrics,
.macro-release-board .macro-release-reaction {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.macro-release-board .macro-release-metrics > div,
.macro-release-board .macro-release-reaction > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
}

.macro-release-board .macro-release-metrics span,
.macro-release-board .macro-release-metrics strong,
.macro-release-board .macro-release-reaction span,
.macro-release-board .macro-release-reaction strong {
  min-width: 0;
}

.macro-release-board .macro-release-metrics strong,
.macro-release-board .macro-release-reaction strong {
  text-align: right;
  white-space: nowrap;
}

@media (min-width: 981px) {
  .macro-release-board .macro-release-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    max-height: 560px;
  }
}

@media (min-width: 641px) and (max-width: 980px) {
  .macro-release-board .macro-release-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    max-height: 620px;
  }
}

@media (max-width: 640px) {
  .macro-release-board .macro-release-list {
    grid-template-columns: minmax(0, 1fr);
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }
}

/* 已发布记录横跨整行，压缩成可快速核对的横幅；未发布记录继续使用竖向卡片。 */
@media (min-width: 641px) {
  .macro-release-board .macro-release-card[data-status="released"] {
    grid-column: 1 / -1;
    grid-template-columns: minmax(230px, 0.82fr) minmax(0, 3fr) minmax(210px, 0.78fr);
    grid-template-areas: "head metrics source";
    align-items: center;
    gap: 0;
    padding: 0;
    overflow: hidden;
  }

  .macro-release-board .macro-release-card[data-status="released"][data-has-reaction="true"] {
    grid-template-areas:
      "head metrics source"
      "head reaction source";
  }

  .macro-release-board .macro-release-card[data-status="released"] .macro-release-head {
    grid-area: head;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
    min-height: 92px;
    padding: 14px 18px;
    border-right: 1px solid var(--line-soft);
    background: color-mix(in srgb, var(--green) 3%, transparent);
  }

  .macro-release-board .macro-release-card[data-status="released"] .macro-release-head > div:first-child {
    min-width: 0;
  }

  .macro-release-board .macro-release-card[data-status="released"] .macro-release-head strong {
    white-space: nowrap;
  }

  .macro-release-board .macro-release-card[data-status="released"] .macro-release-head > .macro-release-flags {
    width: auto;
    justify-content: flex-start;
  }

  .macro-release-board .macro-release-card[data-status="released"] .macro-release-metrics {
    grid-area: metrics;
    align-self: center;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    padding: 14px 18px;
  }

  .macro-release-board .macro-release-card[data-status="released"] .macro-release-reaction {
    grid-area: reaction;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    padding: 0 18px 14px;
    border-top: 0;
  }

  .macro-release-board .macro-release-card[data-status="released"] .macro-release-metrics > div,
  .macro-release-board .macro-release-card[data-status="released"] .macro-release-reaction > div {
    display: grid;
    align-content: center;
    min-height: 64px;
    padding: 9px 11px;
    border-radius: 9px;
  }

  .macro-release-board .macro-release-card[data-status="released"] .macro-release-metrics strong,
  .macro-release-board .macro-release-card[data-status="released"] .macro-release-reaction strong {
    margin-top: 3px;
    font-size: 17px;
    text-align: left;
  }

  .macro-release-board .macro-release-card[data-status="released"] > a {
    grid-area: source;
    display: flex;
    align-items: center;
    align-self: stretch;
    min-width: 0;
    padding: 14px 16px;
    border-top: 0;
    border-left: 1px solid var(--line-soft);
    color: var(--muted);
    line-height: 1.5;
    text-align: left;
    word-break: break-word;
  }
}

@media (max-width: 640px) {
  .macro-release-board .macro-release-card[data-status="released"] {
    grid-column: 1 / -1;
  }
}

/* 宏观发布列表不再成为独立滚动容器，避免滚轮在列表边界被截住。 */
.macro-release-board .macro-release-list {
  max-height: none;
  overflow: visible;
  overscroll-behavior: auto;
  padding-right: 0;
  scrollbar-gutter: auto;
}

/* Decision-first overview: exposes the current risk state before detailed cards. */
.risk-command {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--surface-shadow);
}

.risk-command-head,
.risk-command-main,
.risk-command-links,
.risk-dimension > div {
  display: flex;
  align-items: center;
}

.risk-command-head {
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}

.risk-command-head h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0;
}

.risk-command-updated,
.risk-command-method,
.risk-score small,
.risk-dimension small,
.risk-priorities p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.risk-command-main {
  align-items: stretch;
  gap: 20px;
  padding-top: 18px;
}

.risk-score {
  display: grid;
  flex: 0 0 158px;
  align-content: start;
  gap: 4px;
  padding: 15px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-strong);
}

.risk-score > span,
.risk-priorities > span {
  color: var(--muted);
  font-size: 12px;
}

.risk-score strong {
  color: var(--blue);
  font-size: 30px;
  line-height: 1.1;
}

.risk-score[data-tone="warning"] strong { color: var(--amber); }
.risk-score[data-tone="danger"] strong { color: var(--red); }
.risk-score[data-tone="calm"] strong { color: var(--green); }

.risk-score b {
  font-size: 13px;
}

.risk-dimensions {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(5, minmax(105px, 1fr));
  gap: 10px;
  min-width: 0;
}

.risk-dimension {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-strong);
}

.risk-dimension > div {
  justify-content: space-between;
  gap: 6px;
}

.risk-dimension span { font-size: 12px; }
.risk-dimension b { color: var(--green); font-size: 11px; white-space: nowrap; }
.risk-dimension[data-tone="warning"] b { color: var(--amber); }
.risk-dimension[data-tone="danger"] b { color: var(--red); }

.risk-dimension-track {
  height: 5px;
  margin: 9px 0 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line-soft);
}

.risk-dimension-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}

.risk-dimension[data-tone="warning"] .risk-dimension-track i { background: var(--amber); }
.risk-dimension[data-tone="danger"] .risk-dimension-track i { background: var(--red); }

.risk-dimension small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.risk-priorities {
  display: grid;
  flex: 0 1 300px;
  align-content: start;
  gap: 7px;
  min-width: 230px;
  padding-left: 20px;
  border-left: 1px solid var(--line-soft);
}

.risk-priorities strong { font-size: 13px; line-height: 1.5; }
.risk-priorities p { margin: 0; }
.risk-command-links { flex-wrap: wrap; gap: 10px; }
.risk-command-links a { color: var(--blue); font-size: 12px; }
.risk-command-method { margin: 14px 0 0; }
.risk-alert-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.risk-alert-strip > article,
.risk-alert-strip > span {
  display: grid;
  flex: 1 1 260px;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--amber);
  border-radius: 7px;
  background: var(--panel-strong);
}

.risk-alert-strip > article[data-tone="danger"] { border-left-color: var(--red); }
.risk-alert-strip strong { font-size: 12px; }
.risk-alert-strip span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.mobile-scroll-hint { display: none; }

@media (max-width: 1100px) {
  .risk-command-main { flex-wrap: wrap; }
  .risk-dimensions { order: 3; flex-basis: 100%; }
  .risk-priorities { flex: 1 1 300px; }
}

@media (max-width: 700px) {
  .risk-command { padding: 15px; }
  .risk-command-head { align-items: flex-start; }
  .risk-command-head h2 { font-size: 19px; }
  .risk-command-updated { max-width: 112px; text-align: right; }
  .risk-command-main { display: grid; gap: 12px; }
  .risk-score,
  .risk-priorities { min-width: 0; }
  .risk-score { grid-template-columns: auto 1fr; align-items: center; }
  .risk-score > span,
  .risk-score small { grid-column: 1 / -1; }
  .risk-score strong { font-size: 27px; }
  .risk-dimensions {
    display: flex;
    overflow-x: auto;
    margin-right: -15px;
    padding: 1px 15px 8px 1px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .risk-dimensions::-webkit-scrollbar { display: none; }
  .risk-dimension { flex: 0 0 min(220px, 68vw); scroll-snap-align: start; }
  .risk-priorities { padding: 14px 0 0; border-top: 1px solid var(--line-soft); border-left: 0; }
  .professional-desk { padding: 14px; }
  .professional-desk-head { align-items: flex-start; flex-direction: column; gap: 6px; }
  .professional-desk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tactical-validation { grid-template-columns: 1fr; }
  .tactical-validation-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tactical-validation-metrics > div:nth-child(odd) { border-left: 0; }
}

@media (max-width: 840px) {
  .mobile-scroll-hint {
    display: block;
    margin: -4px 0 8px;
    color: var(--muted);
    font-size: 12px;
  }

  .mobile-scroll-hint::before {
    margin-right: 5px;
    content: "↔";
    color: var(--blue);
  }
}

/* 顶栏控件保持原有文字分段样式，仅压缩上下空间。 */
@media (min-width: 621px) {
  .topbar {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .topbar .top-actions {
    gap: 8px;
  }

  .topbar .theme-control {
    padding: 1px;
  }

  .topbar .theme-option {
    min-height: 26px;
    padding: 0 6px;
    font-size: 10px;
  }

  .topbar .refresh-button,
  .topbar .market-home-link,
  .topbar .topbar-home-link {
    min-height: 30px;
  }

  .topbar .account-trigger {
    min-width: 148px;
    min-height: 36px;
  }
}

/* 顶栏账户胶囊：放大头像与持仓数字，避免涨跌和盈亏金额挤在两行小字里。 */
@media (min-width: 621px) {
  .topbar .account-trigger {
    gap: 10px;
    min-width: 196px;
    min-height: 46px;
    padding: 4px 14px 4px 5px;
  }

  .topbar .account-avatar {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }

  .topbar .account-trigger-copy strong {
    max-width: 126px;
    font-size: 12px;
  }

  .topbar .account-trigger-copy small {
    margin-top: 2px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }
}

/* 全站页面框架统一：桌面端共用同一内容宽度与左右留白。 */
:root {
  --page-max-width: 1240px;
  --page-gutter: 24px;
}

@media (min-width: 901px) {
  .shell,
  .portfolio-page .shell,
  .settings-shell,
  .workspace-shell {
    width: min(var(--page-max-width), calc(100% - var(--page-gutter) * 2));
    margin-right: auto;
    margin-left: auto;
  }

  /* 决策中心内容列再收窄一档，两侧留白更均匀 */
  .workspace-shell {
    width: min(1200px, calc(100% - 88px));
  }
}

/* 市场页保留左侧导航，只把内容列上限并回全站宽度。 */
.dashboard-page {
  --nav-content-max: var(--page-max-width);
}

/* 站内成员管理页（管理员可见） */
.admin-main {
  display: grid;
  gap: 18px;
}

.admin-overview {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--blue) 5%, transparent), transparent 52%),
    var(--panel);
  box-shadow: var(--surface-shadow);
}

.admin-overview h1 {
  margin-top: 5px;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 600;
}

.admin-overview p:last-child {
  max-width: 520px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.admin-stat-row {
  display: flex;
  gap: 12px;
}

.admin-stat-row article {
  min-width: 118px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-strong);
}

.admin-stat-row span {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.admin-stat-row strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.admin-panel {
  padding: 20px 22px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--surface-shadow);
}

.admin-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}

.admin-panel-head strong {
  display: block;
  font-size: 14px;
}

.admin-panel-head span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.admin-panel-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-panel-tools input {
  width: 220px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-strong);
  color: var(--text);
  font-size: 12px;
}

.admin-member-list {
  display: grid;
}

.admin-member-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}

.admin-member-row:last-child {
  border-bottom: 0;
}

.admin-member-avatar {
  width: 38px;
  height: 38px;
  font-size: 14px;
}

.admin-member-identity {
  min-width: 0;
}

.admin-member-identity strong {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.admin-member-identity > span {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-badge {
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--blue) 40%, var(--line));
  border-radius: 999px;
  color: var(--blue);
  font-size: 10px;
  font-style: normal;
  font-weight: 650;
}

.admin-member-presence strong {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.admin-member-presence > span {
  display: block;
  margin-top: 4px;
  color: var(--muted-strong);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.admin-member-presence small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.admin-presence-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
}

.admin-member-row[data-online="true"] .admin-presence-dot {
  background: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent);
}

.admin-member-row[data-online="true"] .admin-member-presence strong {
  color: var(--green);
}

.admin-member-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-member-meta span {
  padding: 2px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.admin-member-actions {
  display: flex;
  justify-content: flex-end;
}

.admin-vip-button {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-strong);
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

.admin-vip-button.is-active {
  border-color: color-mix(in srgb, var(--amber) 44%, var(--line));
  color: var(--amber);
}

.admin-empty {
  padding: 26px 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

/* 资讯运营台：逐来源漏斗、质量告警、漏报处理与人工补录 */
.admin-ops-panel .admin-stat-row {
  margin-top: 16px;
}

.admin-ops-stats article {
  min-width: 132px;
}

.admin-analytics-tools input {
  width: 142px;
}

.admin-analytics-tools select {
  min-height: 32px;
  padding: 0 30px 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-strong);
  color: var(--text);
  font-size: 12px;
}

.admin-analytics-stats {
  flex-wrap: wrap;
  margin-top: 16px;
}

.admin-analytics-stats article {
  min-width: 116px;
}

.admin-analytics-stats article strong {
  font-size: 20px;
}

.admin-analytics-table {
  margin-top: 16px;
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}

.admin-analytics-row {
  display: grid;
  grid-template-columns:
    minmax(110px, 1.25fr)
    repeat(5, minmax(76px, 0.7fr))
    minmax(102px, 0.9fr);
  align-items: center;
  min-width: 720px;
  border-bottom: 1px solid var(--line-soft);
}

.admin-analytics-row:last-child {
  border-bottom: 0;
}

.admin-analytics-row > span {
  min-width: 0;
  padding: 10px 12px;
  color: var(--muted-strong);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.admin-analytics-row > span:first-child {
  color: var(--text);
  font-weight: 650;
}

.admin-analytics-row-head {
  background: var(--panel-strong);
}

.admin-analytics-row-head > span {
  color: var(--muted);
  font-weight: 600;
}

.admin-event-dictionary {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.admin-event-dictionary summary {
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.admin-event-dictionary-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.admin-event-dictionary-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.7fr) minmax(90px, 0.45fr) minmax(0, 1.8fr);
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.55;
}

.admin-event-dictionary-row strong,
.admin-event-dictionary-row em {
  font-style: normal;
}

.admin-event-dictionary-row em {
  color: var(--blue);
}

.admin-event-dictionary-row small {
  color: var(--muted);
}

.admin-ops-section-title {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 650;
}

.admin-ops-table {
  display: grid;
  margin-top: 10px;
  overflow-x: auto;
}

.admin-ops-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.5fr) 56px 56px 72px 56px minmax(150px, 1.3fr) minmax(96px, 0.8fr) minmax(120px, 0.9fr);
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px;
}

.admin-ops-row:last-child {
  border-bottom: 0;
}

.admin-ops-row-head {
  padding: 6px 0;
  color: var(--muted);
  font-size: 11px;
}

.admin-ops-row-head span {
  font-weight: 650;
}

.admin-ops-row[data-alert="true"] {
  background: color-mix(in srgb, var(--amber) 7%, transparent);
}

.admin-ops-source {
  min-width: 0;
}

.admin-ops-source strong {
  display: block;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-ops-source small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-ops-number {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.admin-ops-dropped,
.admin-ops-time {
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.5;
}

.admin-ops-status {
  justify-self: start;
  padding: 2px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted-strong);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.admin-ops-status.is-alert {
  border-color: color-mix(in srgb, var(--amber) 48%, var(--line));
  color: var(--amber);
  font-weight: 650;
}

.admin-ops-alerts,
.admin-ops-batches,
.admin-ops-tracks,
.admin-report-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.admin-alert-row,
.admin-batch-row,
.admin-track-row,
.admin-report-row {
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--panel-strong);
}

.admin-alert-row > div,
.admin-batch-row > div,
.admin-track-row > div,
.admin-report-row > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-alert-row strong,
.admin-batch-row strong,
.admin-track-row strong,
.admin-report-row strong {
  font-size: 13px;
}

.admin-alert-row p,
.admin-track-row p,
.admin-report-row p {
  margin-top: 6px;
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.6;
}

.admin-alert-row small,
.admin-batch-row small,
.admin-track-row small,
.admin-report-row small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
  word-break: break-all;
}

.admin-alert-badge,
.admin-batch-row em,
.admin-report-kind,
.admin-report-status,
.admin-track-row em {
  padding: 1px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted-strong);
  font-size: 10px;
  font-style: normal;
  font-weight: 650;
}

.admin-alert-badge {
  border-color: color-mix(in srgb, var(--amber) 44%, var(--line));
  color: var(--amber);
}

.admin-track-row em.is-dropped {
  border-color: color-mix(in srgb, var(--red) 40%, var(--line));
  color: var(--red);
}

.admin-track-row em.is-kept {
  border-color: color-mix(in srgb, var(--green) 40%, var(--line));
  color: var(--green);
}

.admin-batch-issues {
  color: var(--amber) !important;
}

.admin-track-row a,
.admin-report-row a {
  display: inline-flex;
  margin-top: 8px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 650;
}

.admin-report-row[data-status="open"] {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
}

.admin-report-kind.is-missed {
  border-color: color-mix(in srgb, var(--amber) 42%, var(--line));
  color: var(--amber);
}

.admin-report-kind.is-correction {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
  color: var(--blue);
}

.admin-report-resolution {
  color: var(--green) !important;
}

.admin-report-actions {
  margin-top: 10px;
}

.admin-backfill-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.admin-backfill-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
}

.admin-backfill-form input,
.admin-backfill-form select,
.admin-backfill-form textarea {
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
}

.admin-backfill-form textarea {
  resize: vertical;
}

.admin-backfill-wide {
  grid-column: 1 / -1;
}

.admin-backfill-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 860px) {
  .admin-member-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .admin-member-presence,
  .admin-member-meta,
  .admin-member-actions {
    grid-column: 1 / -1;
  }

  .admin-member-actions {
    justify-content: flex-start;
  }

  .admin-panel-tools {
    width: 100%;
  }

  .admin-panel-tools input {
    flex: 1;
    width: auto;
  }

  .admin-analytics-tools {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .admin-analytics-tools input,
  .admin-analytics-tools select {
    flex: 1 1 132px;
    width: auto;
  }

  .admin-stat-row {
    width: 100%;
  }

  .admin-stat-row article {
    flex: 1;
    min-width: 0;
  }

  .admin-ops-row {
    grid-template-columns: minmax(0, 1fr) 48px 48px 64px 48px;
  }

  .admin-ops-dropped,
  .admin-ops-time,
  .admin-ops-status {
    grid-column: 1 / -1;
  }

  .admin-ops-row-head {
    display: none;
  }
}

.settings-plan-panel,
.settings-privacy-panel {
  margin-top: 16px;
}

/* 方案面板的标题比其它面板长，让徽标只占自身宽度，窄屏下标题不折行。 */
.settings-plan-panel .settings-panel-head .notification-status {
  flex: 0 0 auto;
}

.settings-plan-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 14px;
}

.settings-plan-summary strong,
.settings-plan-summary span {
  display: block;
}

.settings-plan-summary strong {
  font-size: 14px;
}

.settings-plan-summary span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.settings-plan-limits {
  flex: 0 0 auto;
  max-width: 46%;
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.settings-plan-panel .settings-form-actions {
  justify-content: flex-start;
  margin-top: 14px;
}

.settings-plan-offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.settings-plan-price {
  flex: 0 0 auto;
}

.settings-plan-price strong,
.settings-plan-price span {
  display: block;
}

.settings-plan-price strong {
  font-size: 17px;
}

.settings-plan-price span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.settings-plan-offer .settings-plan-note {
  flex: 1 1 320px;
  margin-top: 0;
}

.settings-plan-note {
  margin-top: 12px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.settings-plan-table-wrap {
  margin-top: 14px;
  overflow-x: auto;
}

.settings-plan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.settings-plan-table th,
.settings-plan-table td {
  padding: 10px 12px;
  border-top: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}

.settings-plan-table thead th {
  border-top: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.settings-plan-table th:first-child,
.settings-plan-table td:first-child {
  padding-left: 0;
}

.settings-plan-table th:last-child,
.settings-plan-table td:last-child {
  padding-right: 0;
}

.settings-plan-table td:nth-child(2) {
  color: var(--muted);
}

.settings-plan-boundaries {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.settings-plan-orders {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.settings-plan-order-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.settings-plan-order-head strong {
  font-size: 13px;
}

.settings-plan-order-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.settings-plan-order-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
}

.settings-plan-order-list .secondary-button {
  flex: 0 0 auto;
}

.settings-plan-order-empty {
  color: var(--muted);
}

.settings-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding-top: 14px;
}

.settings-link-list a {
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
}

.settings-link-list a:hover {
  color: var(--text);
  text-decoration: underline;
}

.settings-analytics-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

.settings-analytics-choice span,
.settings-analytics-choice strong,
.settings-analytics-choice small {
  display: block;
}

.settings-analytics-choice strong {
  font-size: 12px;
}

.settings-analytics-choice small {
  max-width: 70ch;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.settings-analytics-choice input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

.settings-analytics-feedback:empty {
  display: none;
}

.settings-danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.settings-danger-zone strong,
.settings-danger-zone span {
  display: block;
}

.settings-danger-zone strong {
  font-size: 12px;
}

.settings-danger-zone span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.settings-danger-button {
  flex: 0 0 auto;
  border-color: color-mix(in srgb, var(--red) 42%, var(--line));
  color: var(--red);
}

.settings-delete-form {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

@media (max-width: 860px) {
  .settings-plan-summary,
  .settings-danger-zone {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .settings-plan-offer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .settings-plan-offer .settings-plan-note {
    flex: 0 1 auto;
  }

  .settings-plan-limits {
    max-width: none;
    text-align: left;
  }
}

.doc-main {
  display: grid;
  gap: 16px;
  padding-bottom: 48px;
}

.doc-hero,
.doc-section {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--surface-shadow);
}

.doc-hero h1 {
  margin-top: 6px;
  font-size: 26px;
  font-weight: 660;
}

.doc-hero p:last-child {
  margin-top: 10px;
  max-width: 72ch;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.doc-section h2 {
  font-size: 16px;
  font-weight: 650;
}

.doc-section > p {
  margin-top: 12px;
  max-width: 78ch;
  color: var(--text);
  font-size: 13px;
  line-height: 1.75;
}

.doc-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-left: 18px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.7;
}

.doc-list li::marker {
  color: var(--muted);
}

.doc-table-wrap {
  margin-top: 14px;
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}

.doc-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 12px;
}

.doc-table th,
.doc-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}

.doc-table th {
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
  background: var(--panel-strong, transparent);
}

.doc-table tbody tr:last-child td {
  border-bottom: none;
}

.doc-footnote p {
  color: var(--muted);
  font-size: 12px;
}

.doc-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 10px;
}

.doc-footer-links a {
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
}

.doc-footer-links a:hover {
  color: var(--text);
  text-decoration: underline;
}

.holding-count-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.holding-quota {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.holding-quota.is-over {
  border-color: color-mix(in srgb, var(--red) 45%, var(--line));
  color: var(--red);
}

.admin-stat-row-secondary article strong {
  font-size: 20px;
}

.admin-stat-note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
}

.admin-activation-chip.is-done {
  border-color: color-mix(in srgb, var(--green) 45%, var(--line));
  color: var(--text);
  background: color-mix(in srgb, var(--green) 12%, transparent);
}

@media (max-width: 720px) {
  .doc-hero,
  .doc-section {
    padding: 16px;
  }

  .doc-hero h1 {
    font-size: 22px;
  }
}

/* 决策中心 · 昨日复盘 */
.workspace-review-notice {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.workspace-review-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.review-metric {
  display: grid;
  gap: 3px;
  min-width: 116px;
  padding: 9px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-chip, 8px);
  background: color-mix(in srgb, var(--panel-strong) 86%, transparent);
}

.review-metric small {
  color: var(--muted);
  font-size: 10px;
}

.review-metric b {
  color: var(--muted-strong);
  font-size: 14px;
  font-weight: 700;
}

.review-metric[data-tone="positive"] b {
  color: var(--green);
}

.review-metric[data-tone="negative"] b {
  color: var(--red);
}

.workspace-review-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.review-item {
  position: relative;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px 15px 14px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel-strong) 86%, transparent);
}

.review-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 9px 0 0 9px;
  background: var(--muted);
}

.review-item[data-tone="positive"]::before {
  background: var(--green);
}

.review-item[data-tone="negative"]::before {
  background: var(--red);
}

.review-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.review-item-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.review-item-symbol {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.review-item-name,
.review-item-date {
  color: var(--muted);
  font-size: 11px;
}

.review-item-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.review-item-metrics .review-metric {
  min-width: 104px;
  padding: 7px 10px;
}

.review-item-metrics .review-metric b {
  font-size: 13px;
}

.review-item-block {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.review-item-label {
  color: var(--muted);
  font-size: 10px;
}

.review-driver-list {
  display: grid;
  gap: 6px;
}

.review-driver {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-chip, 8px);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  font: inherit;
  text-align: left;
}

button.review-driver {
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-soft), background var(--motion-fast) var(--ease-soft);
}

button.review-driver:hover,
button.review-driver:focus-visible {
  border-color: color-mix(in srgb, var(--cyan) 45%, var(--line-soft));
  background: color-mix(in srgb, var(--panel-strong) 90%, transparent);
}

.review-driver[data-kind="filing"] {
  border-color: color-mix(in srgb, var(--blue) 38%, var(--line-soft));
}

.review-driver[data-kind="cn-news"] {
  border-color: color-mix(in srgb, var(--cyan) 32%, var(--line-soft));
}

.review-driver strong {
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
}

.review-driver-summary {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.review-driver span {
  color: var(--muted);
  font-size: 10px;
}

.review-item-text,
.review-item-empty {
  margin: 0;
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.7;
}

@media (max-width: 720px) {
  .review-item {
    padding: 12px 12px 12px 15px;
  }

  .review-metric {
    min-width: 92px;
  }
}

/* 全局提示弹窗：校验失败与保存失败用它替代按钮下方的小字提示。
   玻璃配方与顶栏、账号弹层共用同一组令牌（--glass-surface / --glass-sheen /
   --glass-blur），深浅色主题自动跟随；标题、正文、按钮全部居中。 */
.app-notice-dialog {
  position: fixed;
  z-index: 360;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(22, 22, 24, 0.24);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  backdrop-filter: saturate(140%) blur(18px);
}

.app-notice-panel {
  width: min(400px, 100%);
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-panel);
  background:
    linear-gradient(118deg, var(--glass-sheen), transparent 46%),
    var(--glass-surface);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 var(--glass-highlight),
    inset 0 -1px 0 var(--glass-edge);
  color: var(--text);
}

.app-notice-head {
  position: relative;
  display: grid;
  place-items: center;
  padding: 18px 46px 14px;
  border-bottom: 1px solid var(--glass-edge);
}

.app-notice-head strong {
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

.app-notice-dialog[data-tone="error"] .app-notice-head strong {
  color: var(--red);
}

.app-notice-close {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--panel) 55%, transparent);
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.app-notice-close:hover {
  color: var(--text);
  border-color: var(--line);
}

.app-notice-body {
  margin: 0;
  padding: 16px 20px 2px;
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.75;
  text-align: center;
  word-break: break-word;
}

.app-notice-actions {
  display: flex;
  justify-content: center;
  padding: 16px 20px 18px;
}

.app-notice-actions .account-primary-button {
  min-width: 132px;
  border-radius: var(--radius-control);
  text-align: center;
}

@media (max-width: 520px) {
  .app-notice-panel {
    width: 100%;
  }

  .app-notice-actions .account-primary-button {
    width: 100%;
  }
}

/* 加入持仓弹窗：与全局提示弹窗共用玻璃配方，多出标的抬头与数量 / 成本 / 币种 / 汇率。
   面板不裁剪溢出，币种下拉的浮层才不会被面板边缘切掉。 */
.holding-add-panel {
  width: min(460px, 100%);
  overflow: visible;
}

.holding-add-target {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 14px 20px 0;
  text-align: center;
}

.holding-add-target-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

.holding-add-target-head strong {
  font-size: 17px;
  font-weight: 700;
}

.holding-add-target-name {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  word-break: break-word;
}

.holding-add-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 16px 20px 0;
}

.holding-add-fields .holding-field input,
.holding-add-fields .holding-field select {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  outline: none;
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
}

.holding-add-fields .holding-field input:focus {
  border-color: color-mix(in srgb, var(--blue) 58%, var(--line));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 10%, transparent);
}

.holding-add-fields .holding-field input:disabled {
  background: color-mix(in srgb, var(--muted) 7%, var(--panel));
  color: var(--muted);
  cursor: not-allowed;
  opacity: 1;
}

.holding-add-fields .holding-field-label {
  font-size: 11px;
}

.holding-add-fields .custom-select-trigger {
  height: 34px;
  font-size: 12px;
}

.holding-add-panel .form-feedback {
  margin: 10px 0 0;
  padding: 0 20px;
  text-align: center;
}

.holding-add-actions {
  gap: 10px;
}

.holding-add-actions .account-primary-button,
.holding-add-actions .secondary-button {
  min-width: 120px;
  border-radius: var(--radius-control);
  text-align: center;
}

@media (max-width: 520px) {
  .holding-add-fields {
    grid-template-columns: 1fr;
  }

  .holding-add-actions {
    flex-direction: column;
  }

  .holding-add-actions .account-primary-button,
  .holding-add-actions .secondary-button {
    width: 100%;
  }
}

/* 资讯阅读：段落完整显示；审计信息按需展开。 */
.news-reading-extra { padding: 16px 0; border-top: 1px solid var(--line); }
.news-reading-extra > summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 8px 0; }
.news-reading-body p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.85; }
#newsDetailSummary { font-size: 14px; line-height: 1.8; }
#newsDetailHighlights li { font-size: 14px; line-height: 1.8; }
.news-reading-body .news-reading-note { font-size: 12px; color: var(--muted); }
.news-reading-extra .news-detail-section { margin-top: 16px; }

/* Compact watchlist views share rows so quote updates do not rebuild the list. */
#watchSearch { max-width: 360px; }
#watchSearch input { height: 34px; min-height: 34px; box-sizing: border-box; padding: 0 10px; font-size: 12px; line-height: 32px; }
.watch-view-switch { display: flex; gap: 4px; }
.watch-view-switch button { min-height: 32px; padding: 4px 9px; font-size: 12px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--panel-strong); color: var(--muted); }
.watch-view-switch button[aria-pressed="true"] { color: var(--text); border-color: var(--text); }
.watch-table-scroll { max-width: 100%; overflow-x: auto; }
#watchlistGrid[data-view="table"] { min-width: 820px; gap: 0; }
#watchlistGrid[data-view="table"] .watch-row { display: grid; grid-template-columns: minmax(170px, 1.6fr) 100px 100px 100px 100px 120px 54px; grid-template-areas: none; gap: 10px; border-radius: 0; border-width: 0 0 1px; padding: 10px 12px; }
#watchlistGrid[data-view="table"] .watch-row > * { grid-area: auto; }
#watchlistGrid[data-view="table"] .watch-row-head { display: grid; }
#watchlistGrid[data-view="table"] .watch-row > *::before { content: none; }
#watchlistGrid[data-view="table"] .watch-row > .watch-spark { display: block; }
#watchlistGrid[data-view="list"] { min-width: 0; }
#watchlistGrid[data-view="list"] .watch-row-head { display: none; }
#watchlistGrid[data-view="list"] .watch-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "identity price action" "identity change action" "amount signal signal"; gap: 6px 12px; padding: 12px; }
#watchlistGrid[data-view="list"] .watch-identity { grid-area: identity; min-width: 0; }
#watchlistGrid[data-view="list"] .watch-price { grid-area: price; }
#watchlistGrid[data-view="list"] .watch-change { grid-area: change; }
#watchlistGrid[data-view="list"] .watch-amount { grid-area: amount; text-align: left; }
#watchlistGrid[data-view="list"] .watch-signal { grid-area: signal; }
#watchlistGrid[data-view="list"] .workspace-row-action { grid-area: action; }
#watchlistGrid[data-view="list"] .watch-spark { display: none; }
.watch-freshness { font-size: 10px; color: var(--muted); white-space: nowrap; }
.news-impact-section h3 { margin: 0 0 12px; }
.news-detail-topics { flex-wrap: wrap; min-width: 0; }
.news-detail-source { overflow-wrap: anywhere; }

#watchlistGrid[data-view="list"] .watch-spark { display: block; grid-area: volume; font-size: 11px; color: var(--muted); }
#watchlistGrid[data-view="list"] .watch-row { grid-template-areas: "identity price action" "identity change action" "volume amount signal"; }

/* Latest cross-section stories share the existing glass cards and interaction. */
.news-overview { margin-bottom:24px; min-width:0; }
.news-overview-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.news-overview-heading { min-width:0; }
.news-overview-head h4 { margin:0; font-size:16px; }
#newsOverviewMeta { display:block; margin-top:4px; color:var(--muted); font-size:11px; }
.news-overview-head .news-scroll-actions { flex-shrink:0; }
.news-overview-head .news-icon-button { width:36px; height:36px; }
#newsOverviewTrack { display:grid; grid-auto-flow:column; grid-auto-columns:min(300px,85%); gap:10px; min-width:0; max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x proximity; scroll-padding-inline:2px; padding:4px 2px 8px; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
#newsOverviewTrack:focus-visible { outline:2px solid var(--muted); outline-offset:3px; }
#newsOverviewTrack .news-empty { grid-column:1 / -1; }
@media(prefers-reduced-motion:no-preference) { #newsOverviewTrack { scroll-behavior:smooth; } }
#newsOverviewTrack .news-card { width:auto; min-width:0; min-height:0; height:auto; padding:12px; }
#newsOverviewTrack .news-card h4 { font-size:14px; line-height:1.4; margin:6px 0 0; min-height:39px; -webkit-line-clamp:2; }
#newsOverviewTrack .news-card-top { gap:5px; flex-wrap:nowrap; }
#newsOverviewTrack .news-card-topic { display:block; margin-top:7px; color:var(--muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#newsOverviewTrack .news-card-meta { margin-left:auto; white-space:nowrap; font-size:10px; }
#newsOverviewTrack .news-card-summary { margin:6px 0 0; min-height:32px; font-size:11px; line-height:1.5; -webkit-line-clamp:2; }
#newsOverviewTrack .news-card-foot { margin-top:auto; padding-top:7px; font-size:10px; }
#newsOverviewTrack .news-card-foot span { min-width:0; flex:1; }
#newsOverviewTrack .news-card-foot b { font-size:16px; }
@media(max-width:600px) { #newsOverviewTrack .news-impact-badge { padding:3px 5px; font-size:10px; } }

/* Compact overview cards; full source facts remain in the article detail. */
#newsTrack { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); grid-auto-flow:row; grid-auto-columns:auto; overflow:visible; gap:12px; scroll-snap-type:none; }
#newsTrack .news-card { width:auto; min-width:0; flex:none; min-height:210px; height:auto; padding:14px; content-visibility:auto; contain-intrinsic-size:auto 210px; }
#newsTrack .news-card h4 { font-size:15px; line-height:1.4; min-height:63px; margin:8px 0 0; -webkit-line-clamp:3; }
#newsTrack .news-card-summary { min-height:36px; margin:8px 0 10px; font-size:12px; line-height:1.5; -webkit-line-clamp:2; }
#newsTrack .news-card-top { flex-wrap:nowrap; gap:6px; justify-content:space-between; }
#newsTrack .news-card-topic { display:block; margin-top:8px; color:var(--muted); font-size:11px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#newsTrack .news-card-meta { margin-left:auto; font-size:11px; white-space:nowrap; color:var(--muted); }
#newsTrack .news-card-foot { margin-top:auto; padding-top:8px; font-size:11px; }
#newsTrack .news-card-foot span { min-width:0; flex:1; }
#newsTrack .news-card-foot b { flex:0 0 auto; font-size:18px; line-height:1; font-weight:400; }
.news-impact-badge { flex:0 0 auto; padding:3px 7px; border-radius:999px; font-size:11px; font-weight:650; color:var(--muted-strong); background:var(--panel); white-space:nowrap; }
.news-impact-badge[data-level="high"] { color:var(--red); background:color-mix(in srgb,var(--red) 12%,transparent); }
.news-impact-badge[data-level="medium"] { color:var(--amber); background:color-mix(in srgb,var(--amber) 12%,transparent); }
.news-catalyst-facts { display:grid; grid-template-columns:minmax(84px,auto) minmax(0,1fr); gap:7px 12px; margin:12px 0; font-size:12px; line-height:1.6; }
.news-catalyst-facts dt { color:var(--muted); }
.news-catalyst-facts dd { margin:0; color:var(--text); overflow-wrap:anywhere; }
#newsFocusDetail { margin-bottom:20px; }
#newsFocusDetail .news-catalyst-facts { font-size:13px; }
@media(max-width:760px) { .news-catalyst-facts { grid-template-columns:minmax(74px,100px) minmax(0,1fr); } }
@media(max-width:600px) { #newsTrack { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } #newsTrack .news-card { padding:12px; } #newsTrack .news-card h4 { font-size:14px; min-height:59px; } #newsTrack .news-impact-badge { padding:3px 5px; font-size:10px; } #newsTrack .news-card-meta { font-size:10px; } }
@media(max-width:359px) { #newsTrack { grid-template-columns:minmax(0,1fr); } #newsTrack .news-card { min-height:180px; } #newsTrack .news-card h4 { min-height:0; } }

/* IBKR-inspired density: a real numeric table, and an identity/chart/quote list. */
.watch-table-scroll { overflow-x:visible; }
#watchlistGrid[data-view="table"] { min-width:0; width:100%; }
#watchlistGrid[data-view="table"] .watch-row { grid-template-columns:minmax(0,1.2fr) minmax(0,1.1fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,.7fr); gap:8px; padding:8px 0; background:transparent; box-shadow:none; }
#watchlistGrid[data-view="table"] .watch-row-head { grid-template-columns:minmax(0,1.2fr) minmax(0,1.1fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,.7fr); }
#watchlistGrid[data-view="table"] .watch-row-head > span:last-child { display:none; }
#watchlistGrid[data-view="table"] .watch-row > .watch-spark,#watchlistGrid[data-view="table"] .watch-row > .watch-signal { display:none; }
#watchlistGrid .watch-row > .workspace-row-action { display:none; }
#watchlistGrid[data-edit="true"] .watch-row > .workspace-row-action { display:block; grid-column:1/-1; justify-self:end; }
#watchlistGrid[data-view="list"] .watch-row { grid-template-columns:minmax(0,1.25fr) minmax(0,.7fr) minmax(0,1.2fr); grid-template-areas:"identity spark price" "identity spark change" "volume signal signal"; gap:5px 14px; padding:14px 0; background:transparent; box-shadow:none; border-radius:0; border-width:0 0 1px; }
#watchlistGrid[data-view="list"] .watch-identity { grid-area:identity; }
#watchlistGrid[data-view="list"] .watch-spark { display:block; grid-area:spark; }
#watchlistGrid[data-view="list"] .watch-spark svg { width:100%; height:42px; }
#watchlistGrid[data-view="list"] .watch-amount { display:none; }
#watchlistGrid[data-view="list"] .watch-volume { grid-area:volume; font-size:11px; color:var(--muted); }
#watchlistGrid[data-view="list"] .watch-volume::before { content:"Vol "; }
#watchlistGrid[data-view="list"] .watch-signal { grid-area:signal; font-size:11px; color:var(--muted); }
#watchlistGrid[data-view="list"] .watch-price-value { display:block; width:fit-content; margin-left:auto; background:var(--muted); color:white; padding:2px 6px; border-radius:4px; font-size:18px; line-height:1.3; }
#watchlistGrid[data-view="list"] [data-tone="up"] .watch-price-value { background:var(--green); }
#watchlistGrid[data-view="list"] [data-tone="down"] .watch-price-value { background:var(--red); }
#watchlistGrid .watch-row > * { min-width:0; }
#watchlistGrid .watch-identity-name { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
#watchlistGrid[data-view="table"] .watch-price-value { font-size:14px; white-space:nowrap; }
#watchlistGrid[data-view="table"] .watch-session-tag,#watchlistGrid[data-view="table"] .watch-freshness { display:none; }
#watchlistGrid[data-view="table"] .watch-type { display:none; }
#watchlistGrid[data-view="table"] .watch-cell,#watchlistGrid[data-view="table"] .watch-row-head > span { text-align:right; white-space:nowrap; }
#watchlistGrid[data-view="table"] .watch-row-head > span:first-child { text-align:left; }
@media(max-width:480px) {
  #watchlistGrid[data-view="table"] .watch-row { gap:3px; font-size:10px; }
  #watchlistGrid[data-view="table"] .watch-price-value,#watchlistGrid[data-view="table"] .watch-change,#watchlistGrid[data-view="table"] .watch-amount { font-size:10px; }
  #watchlistGrid[data-view="table"] .watch-identity-title strong { font-size:12px; }
  #watchlistGrid[data-view="table"] .watch-identity-name { font-size:9px; }
  #watchlistGrid[data-view="list"] .watch-row { gap:4px 8px; }
  #watchlistGrid[data-view="list"] .watch-price-value { font-size:13px; padding:2px 4px; }
  #watchlistGrid[data-view="list"] .watch-change { font-size:11px; }
}

#watchlistGrid[data-edit="true"] .watch-row > .workspace-row-action { grid-area:auto; grid-column:1/-1; }
#watchlistGrid[data-view="list"] .watch-signal::before { content:"Prev close "; }
html[lang^="zh"] #watchlistGrid[data-view="list"] .watch-volume::before { content:"成交量 "; }
html[lang^="zh"] #watchlistGrid[data-view="list"] .watch-signal::before { content:"昨收 "; }

#watchlistGrid[data-view="list"] .watch-row-head { display:none; }
#watchlistGrid[data-view="list"] .watch-change { display:block; text-align:right; white-space:nowrap; }
#watchlistGrid[data-view="list"] .watch-change::before { content:none; }
#watchlistGrid[data-view="list"] .watch-signal { display:block; text-align:right; white-space:nowrap; }
#watchlistGrid[data-view="list"] .watch-signal::before { display:inline; margin:0; }

/* Fixed reading surfaces keep text unscaled during expansion and return. */
.news-detail-popup { backdrop-filter:none; -webkit-backdrop-filter:none; }
.news-detail-panel { overscroll-behavior:contain; scrollbar-gutter:stable; }
.indicator-card:focus-visible { outline:1px solid var(--text); outline-offset:3px; }
.indicator-detail-dialog { width:min(800px,calc(100% - 32px)); max-width:none; max-height:calc(100dvh - 32px); overflow:auto; overscroll-behavior:contain; border:1px solid var(--line); border-radius:28px; padding:12px; background:var(--bg);color:var(--text); }
.indicator-detail-dialog::backdrop { background:#0006; }
.indicator-detail-dialog > .card { width:100%;margin:0;box-shadow:none; }
.indicator-detail-back { margin:0 0 12px;min-height:40px;padding:8px 16px;border:1px solid var(--line);border-radius:24px;color:var(--text);background:var(--panel); }
html { scrollbar-gutter:stable; }

.detail-closing .indicator-detail-dialog::backdrop { animation: indicator-backdrop-return 560ms var(--ease-apple) both; }
@keyframes indicator-backdrop-return { 0% { background:#0006; } 100% { background:transparent; } }

/* Opaque reading layers with a visible perimeter, including pure black. */
html[data-theme="dark"] .indicator-detail-dialog,
html[data-theme="dark"] .news-detail-panel {
  border-color:rgba(255,255,255,.24);
  box-shadow:0 0 0 1px rgba(255,255,255,.05),0 24px 80px rgba(0,0,0,.6);
}

/* Compact editor: identical identity and action columns in either quote view. */
#watchlistGrid .watch-edit-actions { display:none; }
#watchlistGrid[data-edit="true"] .watch-row-head { display:none; }
#watchlistGrid[data-edit="true"] .watch-row[data-symbol] {
  grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"identity actions";
  min-height:64px;gap:12px;padding:8px 0;align-items:center;
}
#watchlistGrid[data-edit="true"] .watch-row[data-symbol] > :not(.watch-identity,.watch-edit-actions) { display:none; }
#watchlistGrid[data-edit="true"] .watch-identity { grid-area:identity; }
#watchlistGrid[data-edit="true"] .watch-freshness,#watchlistGrid[data-edit="true"] .watch-type { display:none; }
#watchlistGrid[data-edit="true"] .watch-edit-actions { display:flex;grid-area:actions;align-items:center;gap:4px; }
#watchlistGrid .watch-edit-icon {
  display:grid;place-items:center;width:40px;height:40px;min-height:40px;padding:0;
  font:20px/1 system-ui;border:0;background:transparent;box-shadow:none;color:var(--muted);border-radius:50%;
}
#watchlistGrid .watch-edit-icon:disabled { opacity:.3; }
#watchlistGrid .watch-drag-handle { touch-action:none;cursor:grab;font-size:18px; }
#watchlistGrid .watch-row.dragging { opacity:.7; }
#watchlistGrid .watch-row.drop-before { box-shadow:inset 0 2px var(--text); }
#watchlistGrid .watch-row.drop-after { box-shadow:inset 0 -2px var(--text); }

/* Keep the article close control reachable and centered at every title length. */
.news-detail-head>div{min-width:0;flex:1}#newsDetailClose{width:44px;height:44px;min-height:44px;flex:0 0 44px;border-radius:999px;padding:0;line-height:0;color:var(--text)}#newsDetailClose svg{display:block;pointer-events:none}.news-evidence details{margin-top:8px;color:var(--muted);font-size:12px}.news-evidence details>summary{cursor:pointer;padding:6px 0}.news-evidence details p{font-size:12px;line-height:1.7}.news-evidence>p{line-height:1.7}.news-evidence+.news-evidence{border-top:1px solid var(--line-soft);margin-top:16px;padding-top:16px}

/* Real source changes flash once; no synthetic prices or layout movement. */
.quote-value,.macro-value,.indicator-value,#riskScoreValue { font-variant-numeric:tabular-nums; border-radius:6px; }

.data-status-link { color:inherit; text-decoration:none; }
.data-status-link:hover { text-decoration:underline; }

#homeScoreValue { width:fit-content; border-radius:6px; font-variant-numeric:tabular-nums; }

/* Indicator charts: compact overview, readable interactive detail. */
.indicator-visual { height:auto!important;min-height:184px;overflow:visible!important;isolation:isolate; }
.indicator-plot-caption { color:var(--muted);font-size:10px;letter-spacing:.03em;line-height:1.6;margin:0 0 5px; }
.indicator-visual svg.indicator-plot { display:block;width:100%;height:154px!important;overflow:visible; }
.indicator-plot-axis { fill:var(--muted);font-size:10px;font-variant-numeric:tabular-nums; }
.indicator-plot-grid { stroke:var(--line);stroke-width:.7;stroke-dasharray:2 5;opacity:.7; }
.indicator-plot-last { stroke:var(--muted);stroke-dasharray:3 4;stroke-width:.8;opacity:.55; }
.indicator-plot-level { stroke:var(--amber);stroke-dasharray:5 4;stroke-width:1; }
.indicator-plot-cross { stroke:var(--text);stroke-width:.8;stroke-dasharray:3 3;opacity:.65; }
.indicator-plot-cursor-price { fill:var(--text);font-size:11px;font-weight:700;paint-order:stroke;stroke:var(--panel);stroke-width:4;stroke-linejoin:round; }
.indicator-plot-foot { color:var(--muted);font-size:10px;line-height:1.6;margin-top:5px; }
.indicator-plot-readout,.indicator-plot-tools { display:none; }
.indicator-visual.is-detail .indicator-plot { height:320px!important;touch-action:pan-y;cursor:crosshair;outline-offset:3px; }
.indicator-visual.is-detail .indicator-plot-caption { font-size:11px;margin:8px 0; }
.indicator-visual.is-detail .indicator-plot-readout { display:flex;flex-wrap:wrap;gap:7px 18px;min-height:48px;padding:10px 0;border-top:1px solid var(--line);font-size:12px;font-variant-numeric:tabular-nums; }
.indicator-plot-readout > span { display:flex;gap:5px;align-items:baseline; }
.indicator-plot-readout small,.indicator-plot-stamp { color:var(--muted); }
.indicator-visual.is-detail .indicator-plot-tools { display:flex;flex-wrap:wrap;gap:5px;margin:0 0 12px; }
.indicator-plot-tools button,.indicator-plot-tools select { min-width:36px;min-height:36px;padding:6px 10px;font:inherit;font-size:11px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--muted);cursor:pointer; }
.indicator-plot-tools button[aria-pressed="true"] { color:var(--text);background:var(--soft);border-color:var(--muted); }
.indicator-detail-dialog.chart-wide { width:calc(100% - 24px); }
.indicator-detail-back { position:sticky;top:0;z-index:2;background:var(--panel); }
@media(max-width:600px) { .indicator-detail-dialog { width:calc(100% - 16px);max-height:calc(100dvh - 16px);padding:8px;border-radius:20px; } .indicator-detail-dialog > .card { padding:16px; } .indicator-plot-readout .indicator-plot-stamp { width:100%; } }