/* Airbnb-inspired tokens (DESIGN.md) */
:root {
  --rausch:      #ff385c;
  --rausch-act:  #e00b41;
  --rausch-tint: #ffd1da;
  --canvas:      #ffffff;
  --soft:        #f7f7f7;
  --strong:      #f2f2f2;
  --ink:         #222222;
  --body:        #3f3f3f;
  --muted:       #6a6a6a;
  --line:        #ebebeb;
  --error:       #c13515;
  --success:     #008a05;
  --link-blue:   #428bff;
  --shadow:
    rgba(0,0,0,0.02) 0 0 0 1px,
    rgba(0,0,0,0.04) 0 2px 6px,
    rgba(0,0,0,0.10) 0 4px 8px;
  --r-btn: 8px;
  --r-card: 14px;
  --r-pill: 9999px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Cereal", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Top nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 20px; color: var(--rausch);
}
.brand-mark {
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--rausch);
  display: inline-block;
}
.tabs { display: flex; gap: 8px; }
.tab {
  padding: 10px 18px; border-radius: var(--r-pill);
  font-weight: 500; color: var(--body); cursor: pointer; border: none; background: transparent;
  font-size: 15px;
}
.tab:hover { background: var(--strong); }
.tab.active { background: var(--ink); color: #fff; }
.tab-badge {
  display: inline-block; margin-left: 8px;
  padding: 2px 7px; border-radius: var(--r-pill);
  background: #fff4e5; color: #c2410c; border: 1px solid #fed7aa;
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; vertical-align: 1px;
}
.tab.active .tab-badge { background: #fff; border-color: #fff; }
.user-pod {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: 14px; color: var(--body);
}
.avatar {
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px;
}
.btn-link {
  background: none; border: none; cursor: pointer; color: var(--body);
  font: inherit; text-decoration: underline;
}

/* ---------- Layout ---------- */
.container { max-width: 1280px; margin: 0 auto; padding: 32px 24px 64px; }
.section + .section { margin-top: 48px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.row-tight { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.h1 { font-size: 28px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.01em; }
.h2 { font-size: 22px; font-weight: 600; margin: 0 0 16px; letter-spacing: -0.01em; }
.h3 { font-size: 17px; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.005em; }
.muted { color: var(--muted); }
.body { color: var(--body); }
.mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---------- Cards ---------- */
.card {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 20px 22px;
  /* 极淡的默认 shadow — 让卡片在 page bg 上略浮起来 */
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.card.hover { cursor: pointer; }
.card:hover, .card.hover:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
/* 卡片内部的小标题（如候选池里的"最近变化"）保留 inline 风格不要 border */
.card-header.no-divider { padding-bottom: 0; border-bottom: none; margin-bottom: 12px; }

/* ---------- Mode badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  text-transform: uppercase;
}
.badge-paper { background: #fff4e5; color: #c2410c; border: 1px solid #fed7aa; }
.badge-live  { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

/* ---------- KPI grid ---------- */
.kpi-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1128px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .kpi-grid { grid-template-columns: 1fr; } }
.kpi {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 20px;
}
.kpi-label { font-size: 13.5px; color: var(--muted); margin-bottom: 10px; font-weight: 500; }
.kpi-value { font-size: 26px; font-weight: 700; letter-spacing: -0.015em; }
.kpi-sub { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.kpi-value.pos { color: var(--success); }
.kpi-value.neg { color: var(--error); }

/* ---------- Quota strip (Anthropic /usage progress bars) ---------- */
.quota-strip { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; }
@media (max-width: 600px) { .quota-strip { grid-template-columns: 1fr; } }
.quota-strip:empty { display: none; }
.quota-row { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 16px; }
.quota-row-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; gap: 12px; }
.quota-row-label { font-size: 13px; color: var(--muted); font-weight: 500; }
.quota-row-value { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.quota-row-bar { height: 6px; border-radius: 9999px; background: var(--strong); overflow: hidden; }
.quota-row-bar > i { display: block; height: 100%; background: var(--success); transition: width .4s ease-out; }
.quota-row-bar.warn > i { background: #d97706; }
.quota-row-bar.neg > i { background: var(--error); }
.quota-row-sub { font-size: 12px; color: var(--muted); margin-top: 8px; }
.quota-row-error { font-size: 12px; color: var(--error); }

/* ---------- Two-col layout for big sections ---------- */
.split { display: grid; gap: 24px; grid-template-columns: 1.6fr 1fr; }
@media (max-width: 1024px) { .split { grid-template-columns: 1fr; } }

/* ---------- Strategy overview cards (3 列统一布局 · 2026-05-13 v2) ---------- */
.strategy-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1200px) { .strategy-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .strategy-grid { grid-template-columns: 1fr; } }

.strategy-card {
  display: flex; flex-direction: column; gap: 18px;
  background: var(--canvas); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 22px;
  transition: border-color .2s, box-shadow .2s;
}
.strategy-card:hover { border-color: var(--ink-soft, #cbd5e1); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }

.sc-head { display: flex; flex-direction: column; gap: 6px; }
.sc-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sc-title h2 { font-size: 19px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.sc-sub { font-size: 12.5px; line-height: 1.4; margin: 0; }

.sc-hero {
  padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
}
.sc-hero-label { font-size: 12px; font-weight: 500; }
.sc-hero-value { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.sc-hero-value.pos { color: var(--success); }
.sc-hero-value.neg { color: var(--error); }
.sc-hero-sub { font-size: 12px; }

.sc-mini-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.sc-mini { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sc-mini-label { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.sc-mini-val { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; word-break: break-word; }
.sc-mini-val.pos { color: var(--success); }
.sc-mini-val.neg { color: var(--error); }
.sc-mini-sub { font-size: 11px; color: var(--muted); }

.sc-foot { margin-top: auto; display: flex; justify-content: flex-end; }
.sc-foot .btn { font-size: 12.5px; padding: 6px 12px; }

/* ---------- Time range pills ---------- */
.pill-group {
  display: inline-flex; padding: 3px;
  background: var(--strong); border-radius: var(--r-pill);
}
.pill {
  padding: 5px 12px; border-radius: var(--r-pill); border: none; background: transparent;
  font-size: 12.5px; font-weight: 500; color: var(--body); cursor: pointer;
  transition: color 0.15s;
}
.pill:hover { color: var(--ink); }
.pill.active {
  background: var(--canvas); color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.select, .input {
  height: 34px; padding: 0 11px; border-radius: var(--r-btn);
  border: 1px solid var(--line); background: var(--canvas);
  font: inherit; font-size: 13.5px; color: var(--ink);
  transition: border-color 0.15s;
}
.select:focus, .input:focus {
  outline: none; border-color: var(--ink); border-width: 2px; padding: 0 10px;
}

/* ---------- Buttons ---------- */
.btn {
  height: 34px; padding: 0 14px; border-radius: var(--r-btn);
  font-weight: 500; font-size: 13.5px; cursor: pointer;
  border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.btn:active:not(:disabled) { transform: translateY(0.5px); }
.btn-primary { background: var(--rausch); color: #fff; }
.btn-primary:hover { background: var(--rausch-act); }
.btn-primary:disabled { background: var(--rausch-tint); cursor: not-allowed; }
.btn-secondary {
  background: var(--canvas); color: var(--ink);
  border-color: var(--line);
}
.btn-secondary:hover { background: var(--soft); border-color: var(--ink); }
.btn-secondary:disabled { color: var(--muted); border-color: var(--line); cursor: not-allowed; }

/* ---------- Tables ---------- */
.table-wrap {
  border: 1px solid var(--line); border-radius: var(--r-card);
  overflow-x: auto; background: var(--canvas);
}
table {
  width: 100%; border-collapse: collapse; font-size: 13.5px;
  font-variant-numeric: tabular-nums;  /* 数字等宽对齐 */
}
thead { background: var(--soft); }
thead th { border-bottom: 1px solid var(--line); }
/* 注：暂不做 sticky thead — .table-wrap overflow:hidden（圆角需要）会破坏 sticky；
 * 后续若需要 sticky thead，要先把圆角放到 thead 自己上再去掉 overflow:hidden */
th, td {
  text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
  vertical-align: middle;
}
th {
  font-weight: 600; font-size: 12.5px; color: var(--muted);
  /* 取消 uppercase + letter-spacing — 中文页 uppercase 无效，间距却撑稀疏 */
}
tbody td { color: var(--body); }
/* 斑马纹 — 浅到几乎看不出但能在长表里区分行 */
tbody tr:nth-child(even) td { background: rgba(0,0,0,0.018); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(66,139,255,0.06); }
td.right, th.right { text-align: right; }
.mono { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 13px; font-variant-numeric: tabular-nums; }
.pos { color: var(--success); font-weight: 500; }
.neg { color: var(--error); font-weight: 500; }
.tag {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500; background: var(--strong); color: var(--body);
  letter-spacing: 0;
}
.tag-open  { background: #dcfce7; color: #166534; }
.tag-closed{ background: #f3f4f6; color: #374151; }
.tag-up    { background: #dcfce7; color: #166534; }
.tag-down  { background: #fee2e2; color: #b91c1c; }
.tag-buy   { background: #e0f2fe; color: #075985; }
.tag-sell  { background: #fee2e2; color: #b91c1c; }

/* Settled-fill PnL row tints — same hue family as tag-up/tag-down. 用 td
 * 级 specificity 覆盖斑马纹（nth-child even 也在 td 上）。 */
tbody tr.row-win  td { background: #f0fdf4; }
tbody tr.row-loss td { background: #fef2f2; }
tbody tr.row-win:hover  td { background: #dcfce7; }
tbody tr.row-loss:hover td { background: #fee2e2; }

/* ---------- Charts ---------- */
.chart-wrap { position: relative; width: 100%; height: 320px; }

/* ---------- Login ---------- */
.login-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--canvas);
}
.login-card {
  width: 100%; max-width: 400px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 28px;
  box-shadow: var(--shadow);
}
.login-title { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
.login-sub { color: var(--muted); margin: 0 0 20px; font-size: 13px; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field label { font-size: 12px; color: var(--body); font-weight: 500; }
.field .input { height: 38px; padding: 0 12px; font-size: 14px; }
.error-msg { color: var(--error); font-size: 13px; margin-top: 6px; min-height: 18px; }

/* ---------- Live indicator ---------- */
.live-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600;
  color: var(--success); background: #ecfdf5;
  border: 1px solid #a7f3d0;
  cursor: pointer; font-family: inherit;
  transition: all 0.15s;
}
.live-pill:hover { filter: brightness(0.97); }
.live-pill.paused {
  color: var(--muted); background: var(--strong); border-color: var(--line);
}
.live-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: live-pulse 1.6s infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,138,5,0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(0,138,5,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,138,5,0); }
}
.live-pill.paused .live-dot { animation: none; box-shadow: none; }

/* US Stock market status pill */
.market-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600;
  border: 1px solid; transition: all 0.15s;
}
.market-pill .market-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: currentColor;
}
.market-pill[data-state="open"] {
  color: var(--success); background: #ecfdf5; border-color: #a7f3d0;
}
.market-pill[data-state="open"] .market-dot {
  box-shadow: 0 0 0 0 currentColor;
  animation: live-pulse 1.6s infinite;
}
.market-pill[data-state="pre_market"] {
  color: #b45309; background: #fffbeb; border-color: #fde68a;
}
.market-pill[data-state="after_hours"] {
  color: #7c3aed; background: #f5f3ff; border-color: #ddd6fe;
}
.market-pill[data-state="closed"] {
  color: var(--muted); background: var(--strong); border-color: var(--line);
}

/* New row flash on live update */
@keyframes row-flash {
  0%   { background: var(--rausch-tint); }
  100% { background: transparent; }
}
@keyframes row-slide-in {
  0%   { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}
tbody tr.row-new {
  animation: row-flash 2.4s ease-out, row-slide-in 0.3s ease-out;
}

/* KPI value updated flash */
@keyframes value-tick {
  0%   { color: var(--rausch); }
  100% { color: inherit; }
}
.kpi-value.tick { animation: value-tick 0.6s ease-out; }

/* ---------- Pager ---------- */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 4px 0; flex-wrap: wrap;
}
.btn-sm { height: 30px; padding: 0 12px; font-size: 12.5px; }

/* ---------- Empty states ---------- */
.empty { padding: 32px; text-align: center; color: var(--muted); font-size: 14px; }

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* 自定义滚动条 — 比浏览器默认更细更柔和 */
.scroll-x::-webkit-scrollbar { height: 8px; }
.scroll-x::-webkit-scrollbar-track { background: transparent; }
.scroll-x::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.scroll-x::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.hidden { display: none !important; }
.spacer-8 { height: 8px; } .spacer-16 { height: 16px; } .spacer-24 { height: 24px; } .spacer-32 { height: 32px; }

/* ============== Roadmap page ============== */
/* Status palette — done=neutral, in_progress=Rausch, planned=ink outline, blocked=Error */

/* Ring progress in KPI */
.kpi-ring {
  display: flex; align-items: center; gap: 14px;
}
.kpi-ring svg { display: block; }
.kpi-ring .ring-track { stroke: var(--strong); }
.kpi-ring .ring-fill  { stroke: var(--rausch); transition: stroke-dashoffset 0.6s ease-out; }
.kpi-ring-num {
  font-size: 24px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink); line-height: 1;
}
.kpi-ring-sub { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* Legend in card-header */
.legend { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.legend-dot {
  width: 10px; height: 10px; border-radius: 9999px; display: inline-block;
  background: var(--strong); border: 1px solid var(--line);
}
.legend-dot.done    { background: #d1d1d1; border-color: #d1d1d1; }
.legend-dot.inprog  { background: var(--rausch); border-color: var(--rausch); }
.legend-dot.planned { background: transparent; border: 1.5px dashed var(--muted); }
.legend-dot.blocked  { background: var(--error); border-color: var(--error); }
.legend-dot.deferred { background: #a0a0a0; border-color: #a0a0a0; }
.legend-dot.backlog  { background: transparent; border: 1.5px dotted #a0a0a0; }

/* Gantt — horizontal week grid */
.gantt-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin-top: 8px;
}
.gantt {
  position: relative;
  display: grid; gap: 4px 0;
  /* columns = N weeks, set inline by JS as --weeks */
  grid-template-columns: 180px repeat(var(--weeks, 18), minmax(36px, 1fr));
  min-width: 920px;
  font-size: 12px;
}
.gantt-header { display: contents; }
.gantt-month-label, .gantt-week-label {
  text-align: center; color: var(--muted); padding: 4px 0;
  border-bottom: 1px solid var(--line);
}
.gantt-month-label { font-weight: 500; color: var(--body); }
.gantt-row-label {
  padding: 10px 12px 10px 0; font-weight: 500; color: var(--ink);
  align-self: center; border-bottom: 1px solid var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gantt-cell {
  position: relative; height: 28px;
  border-bottom: 1px solid var(--line);
}
.gantt-cell + .gantt-cell { border-left: 1px dotted var(--strong); }
.gantt-bar {
  position: absolute; top: 6px; bottom: 6px;
  border-radius: 6px; padding: 0 6px;
  font-size: 11px; line-height: 16px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
  transition: filter .15s;
}
.gantt-bar:hover { filter: brightness(1.05); }
.gantt-bar.done    { background: #b6b6b6; color: #fff; }
.gantt-bar.inprog  { background: var(--rausch); color: #fff; }
.gantt-bar.planned { background: transparent; color: var(--ink);
                     border: 1.5px dashed var(--muted); }
.gantt-bar.blocked  { background: var(--error); color: #fff; }
.gantt-bar.deferred { background: #a0a0a0; color: #fff; }
.gantt-bar.backlog  { background: transparent; color: var(--muted); border: 1.5px dotted #a0a0a0; }
.gantt-today {
  position: absolute; top: 0; bottom: 0;
  width: 0; border-left: 2px solid var(--rausch);
  pointer-events: none;
}
.gantt-today::after {
  content: "今天"; position: absolute; top: -18px; left: 4px;
  color: var(--rausch); font-size: 11px; font-weight: 600;
}

/* Phase block */
.phase-section { margin-top: 24px; }
.phase-section:first-child { margin-top: 0; }
.phase-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 8px 0; cursor: pointer; user-select: none;
  border-bottom: 1px solid var(--line); margin-bottom: 8px;
}
.phase-head:hover { background: var(--soft); }
.phase-title { font-size: 18px; font-weight: 600; color: var(--ink); margin: 0; }
.phase-meta  { font-size: 13px; color: var(--muted); }
.phase-progress {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 12px;
}
.phase-bar {
  width: 120px; height: 6px; border-radius: 9999px;
  background: var(--strong); overflow: hidden;
}
.phase-bar > i {
  display: block; height: 100%; background: var(--rausch);
  transition: width .4s ease-out;
}
.phase-caret {
  font-size: 14px; color: var(--muted); margin-left: 8px;
  transition: transform .2s;
  display: inline-block;
}
.phase-section.collapsed .phase-caret { transform: rotate(-90deg); }
.phase-section.collapsed .phase-items { display: none; }

/* Milestones list */
.milestones-list { padding: 8px 16px; display: flex; flex-direction: column; gap: 6px; }
.milestone-item {
  display: grid; grid-template-columns: 24px 1fr auto auto auto;
  gap: 12px; align-items: center; padding: 10px 12px;
  border-radius: var(--r-card); background: var(--canvas);
  border: 1px solid var(--line); font-size: 13px;
}
.milestone-item.done    { background: var(--soft); border-color: transparent; opacity: 0.7; }
.milestone-item.inprog  { box-shadow: var(--shadow); border-left: 3px solid var(--rausch); }
.milestone-item.planned { border-style: dashed; }
.milestone-item.blocked  { border-color: var(--error); }
.milestone-item.deferred { opacity: 0.6; border-style: dashed; border-color: #a0a0a0; }
.milestone-item.backlog  { opacity: 0.5; border-style: dotted; border-color: #a0a0a0; }
.milestone-item.milestone-highlight { border-left: 3px solid var(--success); background: rgba(0,255,100,0.04); }
.milestone-icon { font-size: 16px; text-align: center; }
.milestone-title { font-weight: 500; min-width: 0; }
.milestone-target { color: var(--muted); font-size: 12px; white-space: nowrap; }
.milestone-days { font-size: 12px; min-width: 70px; text-align: right; }
.milestone-days.neg { color: var(--error); }
.milestone-kpi { font-size: 11px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Decisions list */
.decisions-list { padding: 8px 16px; display: flex; flex-direction: column; gap: 4px; }
.decision-item {
  display: flex; gap: 12px; align-items: center; padding: 8px 12px;
  border-radius: var(--r-card); background: var(--canvas);
  font-size: 13px;
}
.decision-date { color: var(--muted); font-size: 12px; white-space: nowrap; min-width: 80px; }
.decision-title { min-width: 0; }

/* History (collapsed phases) accordion */
.history-list { padding: 8px 16px; }
.history-phase { margin-bottom: 8px; }
.history-phase-head {
  display: flex; gap: 12px; align-items: center; padding: 10px 12px; cursor: pointer;
  border-radius: var(--r-card); background: var(--soft); font-size: 13px;
}
.history-phase-head:hover { background: var(--canvas); }
.history-phase-name { font-weight: 500; }
.badge-done { background: var(--success); color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 11px; }
.history-phase-items { padding: 4px 0 4px 24px; display: flex; flex-direction: column; gap: 2px; }
.history-item {
  display: flex; gap: 8px; align-items: center; padding: 4px 8px;
  font-size: 12px; color: var(--muted);
}
.history-item .task-icon { width: 16px; height: 16px; font-size: 10px; }
.history-item .task-id { font-size: 11px; }

/* Task item */
.phase-items { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 8px; }
.task-item {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-radius: var(--r-card);
  background: var(--canvas);
  border: 1px solid var(--line);
  transition: box-shadow .15s, transform .05s;
}
.task-item.done    { background: var(--soft); border-color: transparent; }
.task-item.inprog  { box-shadow: var(--shadow); border-color: transparent; }
.task-item.planned { border-style: dashed; }
.task-item.blocked  { border-color: var(--error); }
.task-item.deferred { opacity: 0.6; border-style: dashed; border-color: #a0a0a0; }
.task-item.backlog  { opacity: 0.5; border-style: dotted; border-color: #a0a0a0; }
.task-icon {
  width: 22px; height: 22px; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
}
.task-icon.done    { background: var(--success); color: #fff; }
.task-icon.inprog  { background: var(--rausch); color: #fff; }
.task-icon.planned { background: transparent; border: 1.5px solid var(--muted); }
.task-icon.blocked  { background: var(--error); color: #fff; }
.task-icon.deferred { background: #a0a0a0; color: #fff; }
.task-icon.backlog  { background: transparent; border: 1.5px dotted #a0a0a0; color: #a0a0a0; }
.task-body { min-width: 0; }
.task-title {
  font-size: 15px; font-weight: 500; color: var(--ink);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.task-id {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 12px; color: var(--muted); padding: 2px 6px;
  background: var(--strong); border-radius: 4px;
}
.task-summary {
  font-size: 13px; color: var(--body); margin-top: 4px;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.task-meta { font-size: 12px; color: var(--muted); white-space: nowrap; text-align: right; }
.task-meta a { color: var(--link-blue); text-decoration: none; font-size: 12px; }
.task-meta a:hover { text-decoration: underline; }

/* Parallel / serial chip */
.task-chip {
  display: inline-block; padding: 2px 8px; border-radius: 9999px;
  font-size: 11px; font-weight: 500; line-height: 1.4; white-space: nowrap;
  vertical-align: middle;
}
.task-chip.parallel {
  background: rgba(0, 138, 5, 0.10); color: var(--success);
  border: 1px solid rgba(0, 138, 5, 0.25);
}
.task-chip.serial {
  background: var(--canvas); color: var(--rausch);
  border: 1px solid var(--rausch-tint);
}
.task-chip.free {
  background: var(--strong); color: var(--muted);
  border: 1px solid var(--line);
}

/* Lane 折叠选择器：默认只显示一个小 trigger 标签，点击才弹 popover 选车道。
   防误操作：popover 默认 display:none，clicking outside 自动关。 */
.task-lane-cell {
  position: relative; display: inline-block;
  margin-left: 6px; vertical-align: middle;
}
.task-lane-trigger {
  font-size: 11px; line-height: 1.4; padding: 3px 10px;
  border-radius: 9999px; cursor: pointer; font-family: inherit;
  white-space: nowrap; border: 1px solid var(--line);
  background: var(--canvas); color: var(--muted);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.task-lane-trigger:hover { background: var(--soft); color: var(--ink); }
.task-lane-trigger.lane-trigger-infra {
  background: rgba(80, 180, 255, 0.12); color: #2070b5;
  border-color: rgba(80, 180, 255, 0.4);
}
.task-lane-trigger.lane-trigger-strategy {
  background: rgba(255, 90, 95, 0.10); color: var(--rausch);
  border-color: var(--rausch-tint);
}
.task-lane-trigger.lane-trigger-unset {
  border-style: dashed; color: var(--muted);
}

.task-lane-popover {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 200;
  display: none; flex-direction: column; gap: 4px;
  background: var(--canvas); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  min-width: 280px;
}
.task-lane-popover.open { display: flex; }
.task-lane-popover-title {
  font-size: 11px; color: var(--muted); padding: 2px 4px 4px;
  border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.task-lane-popover .task-lane {
  display: block; width: 100%; text-align: left;
  font-size: 12px; line-height: 1.5; padding: 6px 12px;
  border-radius: 6px; border: 1px solid transparent;
  background: transparent; color: var(--ink); cursor: pointer;
  font-family: inherit; transition: background 0.12s;
}
.task-lane-popover .task-lane:hover { background: var(--soft); }
.task-lane-popover .task-lane.task-lane-on {
  background: var(--ink); color: var(--canvas); font-weight: 600;
}
.task-lane-popover .task-lane.task-lane-on:hover { background: var(--ink); }

/* 任务 ETA 子行（在 task-meta 里，目标日下面） */
.task-eta {
  font-size: 11px; line-height: 1.5; margin-top: 2px;
  color: var(--muted);
}
.task-eta .eta-on    { color: var(--success); }
.task-eta .eta-slip  { color: var(--rausch); font-weight: 500; }
.task-eta .eta-ahead { color: var(--success); font-weight: 500; }

/* Phase 标题旁的 ETA badge */
.phase-eta-badge {
  font-size: 11px; padding: 2px 8px; border-radius: 9999px;
  background: var(--soft); color: var(--muted);
  border: 1px dashed var(--line); margin-left: 4px;
  white-space: nowrap;
}

/* "现在状态" 面板 — 显示活跃/排队/阻塞 + 最近解锁点 */
.current-state-card { padding: 20px 24px; }
.current-state-card .cs-section { margin-top: 14px; }
.current-state-card .cs-section:first-of-type { margin-top: 8px; }
.cs-section-label {
  font-size: 13px; font-weight: 600; color: var(--ink);
  margin-bottom: 8px; line-height: 1.4;
}
.cs-items { display: flex; flex-direction: column; gap: 6px; }
.cs-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: 8px;
  background: var(--soft); border-left: 3px solid var(--line);
}
.cs-item.cs-lane-infra     { border-left-color: rgba(80, 180, 255, 0.7); }
.cs-item.cs-lane-strategy  { border-left-color: var(--rausch); }
.cs-item .cs-id   { font-weight: 600; min-width: 60px; font-family: var(--mono, monospace); font-size: 13px; }
.cs-item .cs-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.cs-item .cs-lane { font-size: 11px; color: var(--muted); padding: 2px 8px; background: var(--canvas); border-radius: 9999px; }
.cs-item .cs-eta  { font-size: 12px; color: var(--muted); font-weight: 500; min-width: 70px; text-align: right; }

.cs-empty { font-size: 12px; color: var(--muted); padding: 4px 0; }

.cs-blocked-row {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.cs-block-chip {
  font-size: 11px; padding: 3px 10px; border-radius: 9999px;
  background: var(--canvas); border: 1px dashed var(--line);
  color: var(--muted); cursor: help;
}

.cs-unlock {
  margin-top: 16px; padding: 10px 14px;
  background: rgba(0, 138, 5, 0.06); border-left: 3px solid var(--success);
  border-radius: 4px; font-size: 13px; color: var(--ink);
}

/* 任务行加车道色条左边框（基建蓝/策略红/未分类灰） */
.task-item { border-left-width: 3px; }
.task-item[data-lane="infra"]    { border-left-color: rgba(80, 180, 255, 0.55); }
.task-item[data-lane="strategy"] { border-left-color: rgba(255, 90, 95, 0.55); }
.task-item.done                  { border-left-color: var(--line); }

/* 关键里程碑 KPI 卡 — 替换"全串行/单人/最优并行"那张 */
.kpi-milestones { padding: 16px; min-height: 100px; }
.kpi-milestones .milestone-headline {
  font-size: 16px; line-height: 1.3; margin-top: 4px; margin-bottom: 10px;
  color: var(--rausch); font-weight: 600;
}
.kpi-milestones .milestone-list {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px;
}
.milestone-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; border-radius: 6px;
  color: var(--muted);
}
.milestone-row.milestone-next {
  background: rgba(255, 90, 95, 0.08);
  color: var(--ink);
}
.milestone-row .m-id   { font-weight: 600; min-width: 60px; }
.milestone-row .m-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.milestone-row .m-date { color: var(--muted); }
.milestone-row .m-days { color: var(--muted); font-size: 11px; }
.milestone-row.milestone-next .m-date,
.milestone-row.milestone-next .m-days { color: var(--rausch); font-weight: 500; }

/* Phase title chip layout */
.phase-title { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ============== Yaombi 新分析面板 ============== */

/* Position row expand drawer (#3) — 独立 panel，不嵌表里避免横向滚动 */
.pos-detail-panel {
  margin-top: 12px;
  padding: 16px 20px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  /* 关键：自身横向溢出由内层 .scroll-x 管理，外层不滚动 */
}
.pos-detail-panel .pd-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; flex-wrap: wrap; gap: 8px;
}
.pos-detail-panel .pd-title { font-size: 16px; font-weight: 600; color: var(--ink); }
.pos-detail-panel .pd-close {
  width: 28px; height: 28px; line-height: 26px; text-align: center;
  border-radius: 9999px; border: 1px solid var(--line);
  background: var(--canvas); cursor: pointer; font-size: 16px; color: var(--muted);
  transition: background .15s, border-color .15s;
}
.pos-detail-panel .pd-close:hover { background: var(--strong); border-color: var(--ink); color: var(--ink); }

.pos-detail-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 16px;
}
.pos-detail-cell { padding: 8px 0; }
.pos-detail-cell .l { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.pos-detail-cell .v { font-size: 15px; font-weight: 500; color: var(--ink); }

/* 内层分批表 — 自带 scroll-x，独立于外部持仓表 */
.pos-detail-panel .closes-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--r-btn);
  background: var(--canvas);
}
.pos-closes-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.pos-closes-table th, .pos-closes-table td {
  padding: 8px 12px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.pos-closes-table th { color: var(--muted); font-weight: 500; background: var(--soft); }
.pos-closes-table tr:last-child td { border-bottom: none; }
.pos-closes-table tr.totals td { font-weight: 600; background: var(--soft); border-top: 2px solid var(--ink); }
.pos-closes-table tr.net td { font-weight: 700; background: var(--soft); font-size: 15px; }

.row-clickable { cursor: pointer; }
.row-clickable:hover td { background: var(--soft); }
.row-clickable.row-active td { background: rgba(255,56,92,0.08); }

/* Attribution: PnL cell colored by sign */
.attr-pnl-pos { color: var(--success); font-weight: 600; }
.attr-pnl-neg { color: var(--error); font-weight: 600; }

/* Alerts list */
.alerts-list { max-height: 360px; overflow-y: auto; }
.alert-item {
  display: grid; grid-template-columns: 110px 60px 1fr;
  align-items: start; gap: 12px;
  padding: 8px 12px; border-bottom: 1px solid var(--line);
  font-size: 13px; line-height: 1.45;
}
.alert-item:last-child { border-bottom: none; }
.alert-time { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
              font-size: 12px; color: var(--muted); }
.alert-level {
  font-size: 11px; padding: 2px 8px; border-radius: 4px;
  text-align: center; font-weight: 500;
}
.alert-level.WARN  { background: rgba(255,56,92,0.10); color: var(--rausch); }
.alert-level.ERROR { background: var(--error); color: #fff; }
.alert-level.INFO  { background: var(--strong); color: var(--muted); }
.alert-msg { color: var(--ink); word-break: break-word; }

/* Monte Carlo result panel */
.mc-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.mc-cell { padding: 16px; background: var(--soft); border-radius: var(--r-card); text-align: center; }
.mc-cell .l { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.mc-cell .v { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.mc-cell.p5  .v { color: var(--error); }
.mc-cell.p50 .v { color: var(--ink); }
.mc-cell.p95 .v { color: var(--success); }
.mc-fan {
  margin-top: 16px; height: 32px;
  background: linear-gradient(to right,
    var(--rausch-tint) 0%, var(--rausch-tint) 5%,
    var(--strong) 5%, var(--strong) 50%,
    rgba(0,138,5,0.2) 50%, rgba(0,138,5,0.2) 95%,
    transparent 95%);
  border-radius: 6px; position: relative;
}
.mc-fan-tick {
  position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--ink);
}
.mc-fan-label { position: absolute; top: -22px; font-size: 11px; color: var(--muted); }

/* Fees breakdown maker/taker pill */
.kind-maker { background: rgba(0,138,5,0.10); color: var(--success); padding: 2px 8px; border-radius: 4px; font-size: 12px; }
.kind-taker { background: rgba(255,56,92,0.10); color: var(--rausch); padding: 2px 8px; border-radius: 4px; font-size: 12px; }

/* ============== 术语 tooltip 系统 ============== */
.term-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-left: 3px;
  border-radius: 9999px; background: var(--strong); color: var(--muted);
  font-size: 9px; font-weight: 700; cursor: help;
  vertical-align: middle; line-height: 1;
  position: relative; user-select: none;
  transition: background .12s, color .12s;
}
.term-help:hover { background: var(--ink); color: #fff; z-index: 100; }
/* tooltip 浮层 — JS 驱动 position:fixed 挂到 body，逃出 .table-wrap / .scroll-x 的 overflow 裁剪 */
.term-tip-floating {
  position: fixed; display: none;
  background: var(--ink); color: #fff;
  padding: 10px 12px; border-radius: 8px;
  font-size: 12px; line-height: 1.5; font-weight: 400;
  white-space: pre-wrap; text-align: left;
  width: 260px; max-width: 320px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  z-index: 10000; pointer-events: none;
}
.term-tip-floating::after {
  content: ""; position: absolute;
  left: 50%; transform: translateX(-50%);
  border: 6px solid transparent;
}
.term-tip-floating[data-flip="up"]::after {
  bottom: -12px; border-top-color: var(--ink);
}
.term-tip-floating[data-flip="down"]::after {
  top: -12px; border-bottom-color: var(--ink);
}

/* 术语表模态 */
.glossary-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.glossary-overlay.hidden { display: none; }
.glossary-modal {
  background: var(--canvas); border-radius: 14px;
  width: 100%; max-width: 720px; max-height: 80vh;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.glossary-head {
  padding: 20px 24px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
.glossary-head h2 { margin: 0; font-size: 20px; font-weight: 600; }
.glossary-head .close-btn {
  width: 32px; height: 32px; border-radius: 9999px;
  border: 1px solid var(--line); background: var(--canvas);
  cursor: pointer; font-size: 18px; color: var(--muted);
}
.glossary-head .close-btn:hover { background: var(--soft); color: var(--ink); }
.glossary-body { padding: 16px 24px; overflow-y: auto; flex: 1; }
.glossary-search {
  width: 100%; height: 40px; padding: 0 14px; margin-bottom: 16px;
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; outline: none;
}
.glossary-search:focus { border-color: var(--ink); border-width: 2px; padding: 0 13px; }
.glossary-cat { font-size: 12px; color: var(--muted); font-weight: 600;
                text-transform: uppercase; letter-spacing: 0.05em;
                margin: 16px 0 6px; }
.glossary-cat:first-child { margin-top: 0; }
.glossary-item {
  padding: 10px 0; border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 130px 1fr; gap: 16px; align-items: start;
}
.glossary-item:last-child { border-bottom: none; }
.glossary-term { font-weight: 600; color: var(--ink); font-size: 14px; }
.glossary-def  { font-size: 13px; color: var(--body); line-height: 1.55; }

/* 顶部 nav 加术语表入口 */
.glossary-trigger {
  background: none; border: none; cursor: pointer;
  font-size: 14px; color: var(--muted); padding: 4px 8px;
  border-radius: 6px; display: inline-flex; align-items: center; gap: 4px;
}
.glossary-trigger:hover { background: var(--soft); color: var(--ink); }

/* ============== Regime 时间轴 ============== */
.regime-timeline {
  display: flex; height: 36px; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--line); background: var(--soft);
}
.regime-seg {
  flex: 0 0 auto; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #fff; font-weight: 500;
  white-space: nowrap; overflow: hidden;
  cursor: help;
  transition: filter .12s;
}
.regime-seg:hover { filter: brightness(1.1); }
.regime-bull  { background: var(--success); }
.regime-bear  { background: var(--error); }
.regime-range { background: #999; }
.regime-unknown { background: var(--strong); color: var(--muted); }

.regime-axis {
  display: flex; justify-content: space-between;
  margin-top: 6px; font-size: 11px; color: var(--muted);
}

/* Market env KPI special — colored regime cell */
.regime-kpi-cell {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: 9999px;
  font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
}
.regime-kpi-cell.bull  { background: rgba(0,138,5,0.12); color: var(--success); }
.regime-kpi-cell.bear  { background: rgba(193,53,21,0.12); color: var(--error); }
.regime-kpi-cell.range { background: var(--strong); color: var(--ink); }

/* Pool table tags */
.pool-tag-active    { background: rgba(0,138,5,0.10); color: var(--success); padding: 2px 8px; border-radius: 4px; font-size: 12px; }
.pool-tag-watching  { background: rgba(255,56,92,0.10); color: var(--rausch); padding: 2px 8px; border-radius: 4px; font-size: 12px; }
.pool-tag-protected { background: rgba(66,139,255,0.12); color: var(--link-blue); padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; }
.pool-tag-inactive  { background: var(--strong); color: var(--muted); padding: 2px 8px; border-radius: 4px; font-size: 12px; }

/* ============== 分区分隔符 ============== */
.section-head {
  display: flex; align-items: center; gap: 14px;
  margin: 32px 0 16px;
}
.section-head:first-of-type { margin-top: 0; }
.section-head .icon { font-size: 18px; line-height: 1; }
.section-head .label {
  font-size: 13px; font-weight: 600;
  color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase;
}
.section-head .rule {
  flex: 1; height: 1px; background: var(--line);
}
.section-head .hint { font-size: 12px; color: var(--muted); }

/* ============== 告警/风控顶部摘要条（折叠卡片） ============== */
.status-bar {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px; border-radius: var(--r-card);
  background: var(--soft); border: 1px solid var(--line);
  font-size: 13px;
}
.status-bar.tone-ok   { background: rgba(0,138,5,0.06); border-color: rgba(0,138,5,0.18); }
.status-bar.tone-warn { background: rgba(255,56,92,0.06); border-color: rgba(255,56,92,0.20); }
.status-bar.tone-err  { background: rgba(193,53,21,0.06); border-color: rgba(193,53,21,0.30); }
.status-bar .icon { font-size: 16px; }
.status-bar .body { flex: 1; color: var(--ink); }
.status-bar .body b { font-weight: 600; }
.status-bar .ctas { display: flex; gap: 8px; }
.status-bar .anchor-link {
  color: var(--rausch); font-size: 12px; font-weight: 500;
  text-decoration: none; cursor: pointer;
}
.status-bar .anchor-link:hover { text-decoration: underline; }

/* ============== SmartTable widget ============== */
.smart-table-wrap { display: flex; flex-direction: column; gap: 8px; }
.smart-table-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px;
}
.smart-table-toolbar .filter-input {
  flex: 1; min-width: 160px; max-width: 320px;
  height: 30px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: var(--r-btn);
  font-size: 12.5px; background: var(--canvas);
  outline: none; transition: border-color .15s;
}
.smart-table-toolbar .filter-input:focus { border-color: var(--ink); border-width: 2px; padding: 0 10px; }
.smart-table-toolbar .meta { color: var(--muted); margin-left: auto; }
/* btn-sm 沿用全局尺寸（30px） */

.smart-table th.sortable { cursor: pointer; user-select: none; position: relative; padding-right: 18px; }
.smart-table th.sortable:hover { background: var(--soft); }
.smart-table th.sortable::after {
  content: "⇅"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 10px; color: var(--muted); opacity: 0.4;
}
.smart-table th.sort-asc::after  { content: "▲"; opacity: 1; color: var(--rausch); }
.smart-table th.sort-desc::after { content: "▼"; opacity: 1; color: var(--rausch); }
.smart-table tbody tr:hover td { background: var(--soft); }

.smart-pager {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted);
}
.smart-pager .page-info { font-variant-numeric: tabular-nums; min-width: 90px; text-align: center; }

/* ============== Insight box（解读 + 建议） ============== */
.insight {
  display: flex; gap: 14px; align-items: flex-start;
  margin-top: 14px; padding: 14px 16px;
  border-radius: var(--r-btn);
  background: var(--soft);
  font-size: 13.5px; line-height: 1.65;
}
.insight.tone-pos  { background: rgba(0,138,5,0.06);   border-left: 3px solid var(--success); }
.insight.tone-neg  { background: rgba(193,53,21,0.06); border-left: 3px solid var(--error); }
.insight.tone-warn { background: rgba(255,56,92,0.06); border-left: 3px solid var(--rausch); }
.insight.tone-info { background: var(--soft); border-left: 3px solid var(--muted); }
.insight-icon { font-size: 18px; line-height: 1.4; flex-shrink: 0; }
.insight-body { flex: 1; min-width: 0; }
.insight-summary {
  color: var(--ink); font-weight: 600;
  font-size: 14px; line-height: 1.5;
  margin-bottom: 6px;
}
.insight-advice  { color: var(--body); }
.insight-advice b { color: var(--ink); font-weight: 600; }

/* Multiple insights stacked */
.insight + .insight { margin-top: 10px; }

/* Jump link inside insight advice — 点击跳转到对应 card */
.jump-link {
  color: var(--link-blue);
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s, background 0.15s;
  padding: 0 1px;
}
.jump-link:hover {
  border-bottom-color: var(--link-blue);
  background: rgba(66,139,255,0.08);
}
/* 跳转目标短暂高亮 */
.jump-target-flash {
  animation: jump-flash 1.6s ease-out;
}
@keyframes jump-flash {
  0%   { box-shadow: 0 0 0 3px rgba(66,139,255,0.0); }
  20%  { box-shadow: 0 0 0 3px rgba(66,139,255,0.45); }
  100% { box-shadow: 0 0 0 3px rgba(66,139,255,0.0); }
}

/* Three-tier timeline comparison in KPI card */
.timeline-stack {
  display: flex; flex-direction: column; gap: 6px;
  margin: 8px 0 4px;
}
.timeline-row {
  display: grid; grid-template-columns: 88px 1fr 56px;
  align-items: center; gap: 8px;
  font-size: 12px;
}
.timeline-row .t-label { color: var(--muted); }
.timeline-row .t-bar {
  height: 8px; border-radius: 9999px; background: var(--strong);
}
.timeline-row .t-bar.t-serial    { background: #d1d1d1; width: 100%; }
.timeline-row .t-bar.t-realistic { background: var(--rausch); }
.timeline-row .t-bar.t-optimal   { background: var(--success); }
.timeline-row .t-date { color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

/* ============== Mobile (<744px) ============== */
@media (max-width: 744px) {
  /* Layout */
  .container { padding: 20px 16px 56px; }
  .section + .section { margin-top: 32px; }
  .spacer-32 { height: 24px; }
  .spacer-24 { height: 16px; }

  /* Type scale */
  .h1 { font-size: 22px; }
  .h2 { font-size: 18px; }
  .h3 { font-size: 15px; }

  /* Top nav: brand + user on row 1, tabs on row 2 (horizontally scrollable) */
  .nav-inner {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 10px 12px;
  }
  .brand { font-size: 17px; gap: 8px; }
  .brand .brand-mark { width: 24px; height: 24px; }

  .tabs {
    order: 99;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 2px;
    gap: 6px;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 14px;
  }

  .user-pod {
    padding: 4px 12px 4px 14px;
    gap: 10px;
    font-size: 13px;
  }
  #username-label { display: none; }
  .avatar { width: 28px; height: 28px; font-size: 13px; }

  /* Page header rows */
  .row { gap: 12px; align-items: flex-start; }

  /* Cards & KPI */
  .card { padding: 16px; border-radius: 12px; }
  .card-header { margin-bottom: 12px; flex-wrap: wrap; align-items: flex-start; }
  .kpi-grid { gap: 12px; }
  .kpi { padding: 14px; border-radius: 12px; }
  .kpi-label { font-size: 12px; margin-bottom: 4px; }
  .kpi-value { font-size: 19px; }
  .kpi-sub { font-size: 12px; margin-top: 4px; }

  /* Pills (time range) */
  .pill-group {
    overflow-x: auto;
    flex-wrap: nowrap;
    max-width: 100%;
    scrollbar-width: none;
  }
  .pill-group::-webkit-scrollbar { display: none; }
  .pill { padding: 6px 12px; font-size: 13px; flex-shrink: 0; }

  /* Filters in card-header */
  .card-header .row-tight {
    width: 100%;
    flex-wrap: wrap;
  }
  .select, .input { height: 38px; font-size: 14px; flex: 1 1 130px; min-width: 0; }

  /* Tables: tighter cells, smaller font */
  table { font-size: 13px; }
  th, td { padding: 8px 10px; }
  th { font-size: 11px; letter-spacing: 0.03em; }
  .tag { font-size: 11px; padding: 2px 7px; }
  .badge { font-size: 11px; padding: 3px 8px; }

  /* Buttons */
  .btn { height: 40px; padding: 0 16px; font-size: 14px; }

  /* Gantt: cancel 920px desktop lock — outer .gantt-wrap handles overflow */
  .gantt { min-width: 0; }

  /* Subnav: realign with container's tighter padding (20px 16px) so底边线贯通 */
  .subnav { margin: -20px -16px 24px; padding: 0 16px; }

  /* Charts */
  .chart-wrap { height: 240px; }

  /* Login */
  .login-shell { padding: 16px; }
  .login-card { padding: 20px; }
  .login-title { font-size: 18px; }
  .field .input { height: 38px; font-size: 14px; }
}

/* Phones <480px: hide brand text and trim further */
@media (max-width: 480px) {
  .brand span:not(.brand-mark) { display: none; }
  .h1 { font-size: 20px; }
  .container { padding: 16px 12px 48px; }
  .card { padding: 14px; }
  .kpi { padding: 12px; }
  .kpi-value { font-size: 18px; }
  th, td { padding: 7px 8px; }
  .chart-wrap { height: 220px; }
  /* in card-header overview cards, keep title + button on same row */
  .card-header .btn { padding: 0 12px; height: 36px; font-size: 13px; }

  /* Subnav: realign with container padding (16px 12px) at 480 */
  .subnav { margin: -16px -12px 20px; padding: 0 12px; }

  /* Long KPI values (e.g. "+$1,234.56") wrap instead of overflowing */
  .kpi-value { overflow-wrap: anywhere; word-break: break-word; }
}

/* ---------- Sub-nav (二级导航) ----------
   Airbnb listing-detail 风格:纯文本 + ink 下划线指示;不与顶级 pill tab 视觉
   重复。下边线贯通到 container 两端,与顶部 nav 形成视觉延续。 */
.subnav {
  display: flex; gap: 0;
  margin: -32px -24px 28px;   /* 抵消 .container 的 padding,让下边线贯通 */
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }

.subtab {
  position: relative;
  padding: 16px 0;
  margin-right: 28px;
  border: none; background: transparent;
  font-weight: 500; font-size: 15px;
  color: var(--muted); cursor: pointer;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.subtab:hover { color: var(--ink); }
.subtab.active {
  color: var(--ink); font-weight: 600;
}
.subtab.active::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--ink);
  border-radius: 2px 2px 0 0;
}

/* ---------- Wallet-copy grid + cards ---------- */
.wcopy-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.wcopy-card {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 18px 20px;
  cursor: pointer;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.wcopy-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.10);
}
.wcopy-card.active {
  border-color: var(--rausch);
  box-shadow: 0 0 0 2px var(--rausch-tint);
}
.wcopy-card .head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; gap: 12px;
}
.wcopy-card .name {
  font-weight: 600; font-size: 15px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 60%;
}
.wcopy-card .addr {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; color: var(--muted);
  margin-bottom: 12px;
}
.wcopy-card .stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px;
  font-size: 13px;
}
.wcopy-card .stat-label { color: var(--muted); font-size: 11.5px; letter-spacing: 0.02em; }
.wcopy-card .stat-value { color: var(--ink); font-weight: 600; }

.status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid transparent;
}
.status-watch  { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.status-bot    { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.status-paused { background: #f3f4f6; color: #4b5563; border-color: #d1d5db; }

/* Detail panel for the selected wallet */
.wcopy-detail {
  margin-top: 32px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 24px 24px 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.wcopy-detail .detail-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.wcopy-detail .detail-totals {
  display: grid; gap: 12px 24px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: 20px;
}
.wcopy-detail .detail-stat-label { color: var(--muted); font-size: 12px; }
.wcopy-detail .detail-stat-value { font-size: 18px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.wcopy-detail h3 { font-size: 14px; font-weight: 600; color: var(--ink);
                   margin: 18px 0 10px; letter-spacing: -0.005em; }
.wcopy-detail .family-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 0;
  font-size: 13px;
}
.wcopy-detail .family-bar .lbl { width: 110px; color: var(--body); }
.wcopy-detail .family-bar .bar-track {
  flex: 1; height: 8px; background: var(--soft); border-radius: 4px; overflow: hidden;
}
.wcopy-detail .family-bar .bar-fill {
  height: 100%; background: var(--rausch); border-radius: 4px;
}
.wcopy-detail .family-bar .num { width: 64px; text-align: right; color: var(--muted); font-size: 12px; }

.wcopy-detail .recent-table {
  width: 100%; font-size: 12.5px; border-collapse: collapse;
}
.wcopy-detail .recent-table th, .wcopy-detail .recent-table td {
  padding: 7px 10px; border-bottom: 1px solid var(--line);
}
.wcopy-detail .recent-table th { text-align: left; color: var(--muted); font-weight: 500; font-size: 11px; }
.wcopy-detail .right { text-align: right; }
.wcopy-detail .pos { color: var(--success); font-weight: 600; }
.wcopy-detail .neg { color: var(--error);   font-weight: 600; }

.wcopy-detail .analysis-md {
  background: var(--soft);
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 13.5px; line-height: 1.7;
  max-height: 560px; overflow: auto;
  white-space: pre-wrap;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ───────────────────── AI 团队 · 像素办公室 ───────────────────── */
.office-scene {
  position: relative;
  width: 100%;
  height: 540px;
  min-height: 480px;
  overflow: hidden;
  background: linear-gradient(#1c2433 0%, #1c2433 35%, #2d3851 35%, #2d3851 100%);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  user-select: none;
  border-radius: 0;
}

/* 墙（上 35%）+ 地板（下 65%）— 砖纹墙、地板格 */
.office-scene .of-wall {
  position: absolute; left: 0; right: 0; top: 0; height: 35%;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}
/* 墙上挂件 — 只保留一个挂钟，显示真实时间。压低 z-index 让工位挡住它（如果有重叠） */
.office-scene .wall-clock {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: #f8fafc;
  border: 3px solid #1e293b;
  box-shadow: 0 3px 0 rgba(0,0,0,0.3), inset 0 0 0 2px #e2e8f0;
  display: flex; align-items: center; justify-content: center;
  color: #0f172a;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  z-index: 0;
}
/* 12 / 3 / 6 / 9 四个刻度小点 */
.office-scene .wall-clock::before,
.office-scene .wall-clock::after {
  content: ""; position: absolute; width: 3px; height: 3px;
  background: #1e293b; border-radius: 50%;
}
.office-scene .wall-clock::before { top: 3px; left: 50%; transform: translateX(-50%); box-shadow: 16px 16px 0 #1e293b, -16px 16px 0 #1e293b; }
.office-scene .wall-clock::after  { bottom: 3px; left: 50%; transform: translateX(-50%); }

/* 工位区压在挂钟上方 */
.office-scene .of-zone-work { z-index: 1; }
.office-scene .of-actors { z-index: 3; }

.office-scene .of-floor {
  position: absolute; left: 0; right: 0; top: 35%; bottom: 0;
  background-image:
    linear-gradient(rgba(0,0,0,0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.18) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* 区块 */
.office-scene .of-zone {
  position: absolute;
  border: 2px dashed rgba(255,255,255,0.07);
  border-radius: 6px;
}
.office-scene .of-zone-label {
  position: absolute; top: -10px; left: 12px;
  padding: 0 8px; height: 18px; line-height: 18px;
  background: #0f172a; color: #cbd5e1;
  font-size: 11px; letter-spacing: 0.04em;
  border-radius: 4px;
}

/* 工位区 — 顶部一排桌子 */
.office-scene .of-zone-work {
  left: 24px; right: 24px; top: 70px; height: 130px;
  background: rgba(255,255,255,0.02);
}
.office-scene .of-desks {
  position: absolute; inset: 28px 16px 16px 16px;
  display: grid;
  grid-template-columns: repeat(7, 80px);
  grid-auto-rows: 28px;
  align-content: end;
  justify-content: space-around;
  gap: 0;
}
.office-scene .of-desk {
  position: relative;
  background: #6e4f33;
  border: 2px solid #3a2510;
  border-radius: 4px;
  box-shadow: inset 0 -10px 0 #4d3622, 0 4px 0 rgba(0,0,0,0.3);
}
/* 显示器：背面（深色机身 + 支架），坐在桌面正中 */
.office-scene .of-desk::before {
  content: ""; position: absolute; left: 50%; top: -26px;
  width: 32px; height: 22px; transform: translateX(-50%);
  background: #1f2937;
  border: 2px solid #0b1220;
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 2px #374151,
    inset 0 -3px 0 #111827,
    0 2px 0 #4b5563;
}
/* 显示器支架 — 紧贴显示器底部到桌面 */
.office-scene .of-desk::after {
  content: ""; position: absolute; left: 50%; top: -6px;
  width: 6px; height: 6px; transform: translateX(-50%);
  background: #475569;
  border: 1px solid #1e293b;
}
/* 显示器底座 */
.office-scene .of-desk .desk-base {
  position: absolute; left: 50%; top: -1px;
  width: 22px; height: 3px; transform: translateX(-50%);
  background: #334155; border: 1px solid #1e293b;
  border-radius: 2px;
}
/* 显示器电源指示灯（右下小红点） */
.office-scene .of-desk .desk-led {
  position: absolute; left: 50%; top: -10px;
  width: 3px; height: 3px; transform: translateX(10px);
  background: #ef4444; border-radius: 50%;
  box-shadow: 0 0 4px #ef4444;
  animation: actor-blink 2s ease-in-out infinite;
}

/* 休息区 — 占整个下半部分 */
.office-scene .of-zone-break {
  left: 24px; right: 24px; top: 270px; bottom: 24px;
  background: rgba(255,255,255,0.02);
}
/* 书架 — 立式三层多色书脊 */
.office-scene .of-bookshelf {
  position: absolute; left: 12px; bottom: 24px; width: 56px; height: 130px;
  background: #5b3a22; border: 3px solid #2e1a0d;
  box-shadow: 0 4px 0 rgba(0,0,0,0.3);
  background-image:
    repeating-linear-gradient(90deg,
      #fbbf24 0 6px, #2e1a0d 6px 8px,
      #ef4444 8px 14px, #2e1a0d 14px 16px,
      #3b82f6 16px 22px, #2e1a0d 22px 24px,
      #10b981 24px 30px, #2e1a0d 30px 32px,
      #a855f7 32px 38px, #2e1a0d 38px 40px,
      #f97316 40px 46px, #2e1a0d 46px 48px),
    linear-gradient(#5b3a22, #5b3a22);
  background-size: 100% 30px, 100% 100%;
  background-position: 6px 12px, 0 0;
  background-repeat: repeat-y, no-repeat;
}
.office-scene .of-bookshelf::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 100%;
  background-image:
    linear-gradient(transparent calc(33% - 2px), #2e1a0d calc(33% - 2px), #2e1a0d 33%, transparent 33%),
    linear-gradient(transparent calc(66% - 2px), #2e1a0d calc(66% - 2px), #2e1a0d 66%, transparent 66%);
  pointer-events: none;
}

/* 沙发 */
.office-scene .of-couch {
  position: absolute; left: 124px; bottom: 30px; width: 160px; height: 50px;
  background: #b45309;
  border: 3px solid #78350f;
  border-radius: 12px 12px 6px 6px;
  box-shadow: inset 0 6px 0 #d97706, 0 4px 0 rgba(0,0,0,0.25);
}
.office-scene .of-couch::before, .office-scene .of-couch::after {
  content: ""; position: absolute; top: 8px; width: 14px; height: 30px;
  background: #92400e; border-radius: 4px;
}
.office-scene .of-couch::before { left: 4px; }
.office-scene .of-couch::after  { right: 4px; }

/* 咖啡机 */
.office-scene .of-coffee {
  position: absolute; left: 300px; bottom: 24px;
  width: 44px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  background: #475569; border: 3px solid #1e293b; border-radius: 4px;
  box-shadow: inset 0 -8px 0 #334155, 0 4px 0 rgba(0,0,0,0.25);
}

/* 自动售货机 — 红白配色，里面 3 行可视零食 */
.office-scene .of-vending {
  position: absolute; left: 354px; bottom: 24px; width: 50px; height: 96px;
  background: #dc2626; border: 3px solid #7f1d1d;
  box-shadow: 0 4px 0 rgba(0,0,0,0.3);
  border-radius: 4px;
}
.office-scene .of-vending::before {
  content: ""; position: absolute; left: 6px; top: 6px; right: 6px; height: 60px;
  background: #f8fafc;
  background-image:
    repeating-linear-gradient(90deg, #94a3b8 0 1px, transparent 1px 8px),
    repeating-linear-gradient(0deg,
      #fbbf24 0 8px, transparent 8px 12px,
      #fb923c 12px 20px, transparent 20px 24px,
      #ef4444 24px 32px, transparent 32px 36px);
  border: 1px solid #475569;
}
.office-scene .of-vending::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 4px; height: 18px;
  background: #1e293b; border: 1px solid #0f172a; border-radius: 2px;
}

/* 饮水机 — 上蓝桶 + 白机身 */
.office-scene .of-water-cooler {
  position: absolute; left: 416px; bottom: 24px; width: 36px; height: 88px;
  background: #f1f5f9; border: 3px solid #475569;
  box-shadow: 0 4px 0 rgba(0,0,0,0.25);
  border-radius: 0 0 4px 4px;
}
.office-scene .of-water-cooler::before {
  content: ""; position: absolute; left: 4px; right: 4px; top: -22px;
  height: 26px; background: #38bdf8; border: 2px solid #0369a1;
  border-radius: 50% 50% 4px 4px;
}
.office-scene .of-water-cooler::after {
  content: ""; position: absolute; left: 50%; bottom: 32px;
  width: 8px; height: 4px; transform: translateX(-50%);
  background: #1e3a8a;
}

/* 乒乓桌 — 绿色长方形 + 中间白网 */
.office-scene .of-pingpong {
  position: absolute; right: 90px; bottom: 30px; width: 130px; height: 60px;
  background: #16a34a; border: 3px solid #14532d;
  border-radius: 4px;
  box-shadow: 0 4px 0 rgba(0,0,0,0.3);
  background-image:
    linear-gradient(90deg, transparent calc(50% - 1px), #f8fafc calc(50% - 1px), #f8fafc calc(50% + 1px), transparent calc(50% + 1px));
}
.office-scene .of-pingpong::before {
  content: ""; position: absolute; left: 50%; top: -8px;
  width: 4px; height: 8px; transform: translateX(-50%);
  background: #94a3b8;
}

/* 飞镖盘 — 挂在休息区右侧上方 */
.office-scene .of-dartboard {
  position: absolute; right: 24px; top: 22px;
  width: 50px; height: 50px; border-radius: 50%;
  background:
    radial-gradient(circle, #f1f5f9 0 6%, #ef4444 6% 18%, #f1f5f9 18% 30%, #1f2937 30% 42%,
                    #ef4444 42% 54%, #f1f5f9 54% 66%, #1f2937 66% 78%, #ef4444 78% 90%, #1f2937 90% 100%);
  border: 3px solid #1f2937;
  box-shadow: 0 4px 0 rgba(0,0,0,0.3);
}

.office-scene .of-plant {
  position: absolute; bottom: 12px; font-size: 24px;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.4));
}
.office-scene .of-plant-1 { right: 12px; bottom: 16px; }
.office-scene .of-plant-2 { left: 76px; bottom: 76px; }

/* 角色容器 */
.office-scene .of-actors {
  position: absolute; inset: 0; pointer-events: none;
}

/* 单个角色 */
.actor {
  position: absolute;
  width: 64px;
  transform: translate(-50%, -50%);
  /* 走路速度固定 → JS 按距离动态设 transition；这里只作 fallback */
  transition: left 0.5s linear, top 0.5s linear;
  display: flex; flex-direction: column; align-items: center;
  pointer-events: auto;
}
/* sprite-based avatar — Kenney Tiny Dungeon CC0 tilemap */
.actor .actor-avatar {
  width: 48px; height: 48px;
  background-image: url(/static/tt/td.png);
  /* spritesheet 12×11 tiles of 16×16 → at 3× scale = 36×33 cells, sheet = 576×528 */
  background-size: 576px 528px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.5));
  animation: actor-bob 2.4s ease-in-out infinite;
}
td.roster-avatar { width: 36px; padding: 4px 8px; }
td.roster-avatar .actor-sprite-mini {
  width: 32px; height: 32px;
  background-image: url(/static/tt/td.png);
  background-size: 384px 352px; /* 2× */
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: inline-block; vertical-align: middle;
}
.actor .actor-name {
  margin-top: 2px;
  padding: 1px 6px;
  font-size: 10px;
  background: rgba(15,23,42,0.85);
  color: #e2e8f0;
  border-radius: 3px;
  white-space: nowrap;
  letter-spacing: 0.03em;
}
/* 工作目录 — 小字、可滚动跑马灯（超过容器宽度才滚） */
.actor .actor-cwd {
  margin-top: 2px;
  width: 80px;        /* 超过即截 */
  overflow: hidden;
  font-size: 9px;
  color: #94a3b8;
  background: rgba(15,23,42,0.6);
  border-radius: 3px;
  padding: 0 4px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.02em;
  text-align: center;
}
.actor .actor-cwd-track {
  display: inline-block;
  white-space: nowrap;
}
/* 只有 JS 检测到内容真的超宽时才挂 .overflow 启动跑马灯 */
.actor .actor-cwd.overflow .actor-cwd-track {
  animation: cwd-scroll 6s linear infinite;
}
@keyframes cwd-scroll {
  0%, 18%   { transform: translateX(0); }
  72%, 100% { transform: translateX(calc(-100% + 70px)); }
}
.actor .actor-bubble {
  position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -4px);
  padding: 3px 8px; max-width: 220px;
  font-size: 10.5px; color: #f1f5f9;
  background: #1e293b; border: 1px solid #334155;
  border-radius: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity 0.2s;
}
.actor.has-bubble .actor-bubble { opacity: 1; }
.actor .actor-bubble::after {
  content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: #1e293b;
}

/* 状态特效 */
@keyframes actor-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
@keyframes actor-type {
  0%, 100% { transform: translateX(0) translateY(0); }
  25%      { transform: translateX(-1px) translateY(-1px); }
  50%      { transform: translateX(0) translateY(0); }
  75%      { transform: translateX(1px) translateY(-1px); }
}
@keyframes actor-shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  20%      { transform: translateX(-2px) rotate(-3deg); }
  40%      { transform: translateX(2px)  rotate(3deg); }
  60%      { transform: translateX(-2px) rotate(-2deg); }
  80%      { transform: translateX(2px)  rotate(2deg); }
}
@keyframes actor-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

.actor.state-writing      .actor-avatar { animation: actor-type 0.5s ease-in-out infinite; }
.actor.state-researching  .actor-avatar { animation: actor-bob 1.2s ease-in-out infinite; }
.actor.state-executing    .actor-avatar { animation: actor-type 0.4s ease-in-out infinite; }
.actor.state-error        .actor-avatar { animation: actor-shake 0.8s ease-in-out infinite; }
.actor.state-idle         .actor-avatar { animation: actor-bob 3.5s ease-in-out infinite; }
.actor.state-off          .actor-avatar { animation: actor-blink 4s ease-in-out infinite; opacity: 0.5; }

/* 状态色环 */
.actor.state-writing     .actor-name { background: #1e3a8a; }
.actor.state-researching .actor-name { background: #14532d; }
.actor.state-executing   .actor-name { background: #7c2d12; }
.actor.state-idle        .actor-name { background: #475569; }
.actor.state-error       .actor-name { background: #7f1d1d; color: #fecaca; }
.actor.state-off         .actor-name { background: #1f2937; color: #94a3b8; }

.of-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #94a3b8; font-size: 14px;
}

/* roster 状态徽章 */
.state-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; letter-spacing: 0.03em;
}
.state-badge.s-writing     { background: #1e3a8a; color: #dbeafe; }
.state-badge.s-researching { background: #14532d; color: #bbf7d0; }
.state-badge.s-executing   { background: #7c2d12; color: #fed7aa; }
.state-badge.s-idle        { background: #475569; color: #cbd5e1; }
.state-badge.s-error       { background: #7f1d1d; color: #fecaca; }
.state-badge.s-off         { background: #1f2937; color: #94a3b8; }

@media (max-width: 900px) {
  .office-scene { height: 460px; }
  .office-scene .of-zone-bug { width: 200px; }
  .office-scene .of-zone-break { right: 240px; }
  .office-scene .of-desks { grid-template-columns: repeat(7, 1fr); gap: 6px; }
}

/* ============== US Stock (V0.1) ============== */
/* 策略说明块 */
.us-strategy-info { margin-bottom: 16px; font-size: 13px; line-height: 1.6; }
.us-strategy-info:empty { display: none; }
.us-strategy-summary { color: var(--ink); }
.us-strategy-rationale { margin-top: 6px; font-size: 12px; color: var(--body); }
.us-strategy-meta { margin-top: 8px; font-size: 12px; color: var(--muted); }

/* picks / drops 表 — 把内联 padding 收回 CSS，沿用全局 table-wrap 体验 */
.us-table-wrap { font-size: 13px; }
.us-table-wrap table.us-picks-table { font-size: 13px; }
.us-table-wrap table.us-picks-table th,
.us-table-wrap table.us-picks-table td { padding: 10px 12px; }
.us-table-wrap table.us-picks-table-drops thead { background: #fde7eb; }
.us-cell-sub { font-size: 11px; color: var(--muted); }
.us-cell-sub-stack { display: block; margin-top: 2px; }

/* Paper Gate 行 */
.us-gate-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.us-gate-row:last-child { border-bottom: none; }
.us-gate-label { color: var(--ink); }
.us-gate-value { color: var(--body); }

/* Active Universe */
.us-uni-meta { font-size: 12px; margin-bottom: 8px; }
.us-uni-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.us-uni-row:last-child { border-bottom: none; }
.us-uni-name { color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.us-uni-meta-r { font-size: 12px; flex-shrink: 0; }

/* 路线图 + 决策 */
.us-roadmap-current:empty,
.us-roadmap-decisions:empty { display: none; }
.us-roadmap-current { margin-bottom: 16px; }
.us-roadmap-decisions { margin-bottom: 16px; }

.us-rm-current {
  background: var(--soft); padding: 12px 14px; border-radius: 8px;
}
.us-rm-current-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.us-rm-current-step  { font-size: 13px; color: var(--body); line-height: 1.6; }
.us-rm-current-sib   { font-size: 12px; color: var(--muted); margin-top: 10px; line-height: 1.6; }
.us-rm-current-sib b { color: var(--body); font-weight: 600; }

/* 决策档：每条一个 <details> */
.us-rm-decision-d {
  border-bottom: 1px solid var(--line);
}
.us-rm-decision-d:last-child { border-bottom: none; }
.us-rm-decision-d > summary {
  cursor: pointer; padding: 10px 0; font-size: 13px; line-height: 1.5;
  color: var(--ink); list-style: none;
}
.us-rm-decision-d > summary::-webkit-details-marker { display: none; }
.us-rm-decision-d > summary::before {
  content: "▸ "; color: var(--muted); margin-right: 2px;
}
.us-rm-decision-d[open] > summary::before { content: "▾ "; }
.us-rm-dec-id { font-size: 11px; color: var(--rausch); background: var(--rausch-tint); padding: 1px 6px; border-radius: 4px; margin-right: 4px; }
.us-rm-decision-asof { font-size: 11px; }
.us-rm-decision-rule { font-size: 12px; color: var(--body); margin: 4px 0 10px; line-height: 1.6; padding-left: 16px; }
.us-rm-decision-memo { font-size: 10px; margin: 0 0 2px 16px; word-break: break-all; }

/* 兼容旧结构（暂留，无害） */
.us-rm-decisions > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); padding: 6px 0; list-style: none; }
.us-rm-decisions > summary::-webkit-details-marker { display: none; }
.us-rm-decisions-body { margin-top: 8px; }
.us-rm-decision { padding: 8px 0; border-bottom: 1px solid var(--line); }
.us-rm-decision:last-child { border-bottom: none; }

.us-rm-phase {
  margin-top: 12px;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 14px;
  background: var(--canvas);
}
.us-rm-phase-summary {
  cursor: pointer; font-size: 14px; font-weight: 600;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  list-style: none;
}
.us-rm-phase-summary::-webkit-details-marker { display: none; }
.us-rm-phase-id { font-size: 12px; }
.us-rm-phase-name { color: var(--ink); }
.us-rm-phase-tag { font-size: 11px; font-weight: 400; }
.us-rm-phase-summary-text { font-size: 12px; margin: 8px 0; }
.us-rm-paper-gate {
  margin-top: 10px; padding: 10px;
  background: var(--soft); border-radius: 6px;
  font-size: 12px; line-height: 1.6;
}

.us-rm-item {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.us-rm-item:last-child { border-bottom: none; }
.us-rm-item-body { flex: 1; min-width: 0; }
.us-rm-emoji { margin-right: 4px; }
.us-rm-id { font-size: 12px; color: var(--muted); margin-right: 6px; }
/* overflow-wrap: anywhere — D11.6 等长 title 含 us_orders.status/dealt_qty 这种无空格 ASCII 串，
   不加这条会撑爆栏宽 / 出现水平滚动。anywhere 比 break-word 更激进，CJK 混排时让长 token 也断行。 */
.us-rm-title { font-size: 13px; overflow-wrap: anywhere; }
.us-rm-item-meta { text-align: right; flex-shrink: 0; }

/* ━━━━━━━━━━ 通用表格控制条（filter + 每页 N + 分页）2026-05-14 ━━━━━━━━━━ */
.us-table-ctrl {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding: 6px 0 10px; font-size: 12px;
}
.us-table-filter {
  flex: 1; max-width: 280px;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--canvas); color: var(--ink); font-size: 13px;
}
.us-table-filter:focus { outline: none; border-color: #ff385c; }
.us-table-ctrl-right { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.us-table-pagesize-label { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; }
.us-table-pagesize {
  padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--canvas); color: var(--ink); font-size: 12px;
}
.us-table-pagination { display: flex; gap: 4px; align-items: center; }
.us-pag-btn {
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--canvas); color: var(--ink); cursor: pointer; font-size: 12px;
}
.us-pag-btn:hover:not(:disabled) { border-color: #ff385c; color: #ff385c; }
.us-pag-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.us-pag-info {
  padding: 0 8px; color: var(--muted); font-size: 12px;
  font-variant-numeric: tabular-nums; min-width: 110px; text-align: center;
}
@media (max-width: 744px) {
  .us-table-ctrl { flex-direction: column; align-items: stretch; gap: 8px; }
  .us-table-filter { max-width: none; }
  .us-table-ctrl-right { justify-content: space-between; flex-wrap: wrap; }
  .us-pag-info { min-width: 0; }
}
.us-rm-meta { font-size: 11px; }

/* Mobile: roadmap items 改纵向堆叠避免挤压 */
@media (max-width: 744px) {
  .us-table-wrap table.us-picks-table th,
  .us-table-wrap table.us-picks-table td { padding: 8px 10px; }
  .us-rm-item { flex-direction: column; gap: 4px; align-items: stretch; }
  .us-rm-item-meta { text-align: left; }
  .us-rm-phase { padding: 10px 12px; }
  .us-rm-phase-summary { font-size: 13.5px; }
  .us-gate-row { font-size: 13.5px; padding: 9px 0; }
  .us-uni-row { flex-wrap: wrap; gap: 4px 8px; padding: 8px 0; }
  .us-uni-name { white-space: normal; flex: 1 1 100%; }
  .us-uni-meta-r { flex: 1 1 100%; font-size: 11.5px; }
}


/* ========================================================================
   独立站 — minix.games (live GA4 dashboard)
   ======================================================================== */
.split-2 { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .split-2 { grid-template-columns: 1fr; } }

/* realtime + today header inside the single card */
.minix-rt-head {
  display: flex; align-items: flex-end; gap: 36px; flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.minix-rt-big {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 46px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05;
}
.minix-rt-big .minix-rt-unit { font-size: 15px; font-weight: 500; color: var(--muted); }
.minix-pulse {
  width: 12px; height: 12px; border-radius: 999px; background: #22c55e;
  align-self: center; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.55);
  animation: minix-pulse 1.8s ease-out infinite;
}
@keyframes minix-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
  70%  { box-shadow: 0 0 0 12px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.minix-rt-stats { display: flex; gap: 28px; flex-wrap: wrap; padding-bottom: 4px; }
.minix-stat .ms-num { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.minix-stat .ms-label { font-size: 12px; color: var(--muted); margin-top: 3px; }
.minix-spark-wrap { height: 130px; margin: 14px 0 0; }
.minix-rt-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.minix-rt-block-title { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 10px; }

/* chips (realtime countries / pages) */
.minix-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.minix-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--soft); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 11px; font-size: 13px; color: var(--body);
}
.minix-chip b { font-variant-numeric: tabular-nums; color: var(--ink); }
.minix-chip .minix-chip-flag { font-size: 14px; }
@media (max-width: 600px) {
  .minix-rt-head { gap: 20px; }
  .minix-rt-big { font-size: 38px; }
  .minix-rt-stats { gap: 18px; }
  .minix-stat .ms-num { font-size: 19px; }
}

/* horizontal bar lists (devices / channels / events / new-vs-returning) */
.minix-bars { display: flex; flex-direction: column; gap: 12px; }
.minix-bar-row { display: grid; grid-template-columns: 140px 1fr auto; align-items: center; gap: 12px; font-size: 13.5px; }
.minix-bar-row .minix-bar-label { color: var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minix-bar-row .minix-bar-track { background: var(--soft); border-radius: 999px; height: 14px; overflow: hidden; }
.minix-bar-row .minix-bar-fill { height: 100%; border-radius: 999px; background: var(--rausch); min-width: 2px; transition: width 0.5s ease-out; }
.minix-bar-row .minix-bar-fill.alt { background: #3b82f6; }
.minix-bar-row .minix-bar-fill.g { background: #22c55e; }
.minix-bar-row .minix-bar-val { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
@media (max-width: 600px) { .minix-bar-row { grid-template-columns: 96px 1fr auto; gap: 8px; font-size: 12.5px; } }

/* inline mini-bar inside table cells (country distribution / game heat) */
.minix-cellbar { display: block; height: 8px; border-radius: 999px; background: var(--soft); overflow: hidden; min-width: 60px; }
.minix-cellbar > i { display: block; height: 100%; background: var(--rausch); border-radius: 999px; }

/* derived funnel (event ratios) */
.minix-funnel { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.minix-funnel-step {
  flex: 1 1 140px; background: var(--soft); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px;
}
.minix-funnel-step .fs-num { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.minix-funnel-step .fs-label { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.4; }

/* hint can host a live timestamp span */
.section-head .hint span { color: var(--body); }

/* ---------- OKR cards (minix tab) ---------- */
.okr-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1128px) { .okr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .okr-grid { grid-template-columns: 1fr; } }

.okr-card {
  position: relative;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 16px 18px 18px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
}
.okr-card:hover {
  border-color: #d0d0d0;
  transform: translateY(-1px);
  box-shadow: rgba(0,0,0,0.04) 0 4px 12px, rgba(0,0,0,0.02) 0 1px 4px;
}
.okr-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.okr-card-period {
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.okr-card-pct {
  font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.okr-card-title {
  font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--ink);
  margin: 4px 0 14px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.okr-card-bar {
  background: var(--soft); border-radius: 999px; height: 8px; overflow: hidden;
}
.okr-card-bar > i {
  display: block; height: 100%; background: var(--rausch); border-radius: 999px;
  transition: width 0.5s ease-out;
}
.okr-card-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px;
  font-size: 11.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.okr-card-meta .okr-card-krcount { color: var(--body); font-weight: 500; }
.okr-card-empty {
  display: flex; align-items: center; justify-content: center;
  min-height: 120px; color: var(--muted); font-size: 13px;
  background: var(--soft); border: 1px dashed var(--line);
  border-radius: var(--r-card);
}

/* OKR detail modal */
.okr-modal-mask {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: okr-fade-in 0.12s ease-out;
}
.okr-modal-mask.hidden { display: none; }
.okr-modal {
  position: relative;
  background: var(--canvas);
  border-radius: var(--r-card);
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 48px);
  overflow: auto;
  box-shadow: rgba(0,0,0,0.25) 0 12px 40px, rgba(0,0,0,0.15) 0 4px 12px;
  padding: 28px 32px 26px;
  animation: okr-pop-in 0.14s ease-out;
}
.okr-modal-close {
  position: absolute; top: 12px; right: 14px;
  width: 32px; height: 32px; border-radius: 999px;
  background: transparent; border: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--muted);
}
.okr-modal-close:hover { background: var(--soft); color: var(--ink); }
.okr-modal-title {
  font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 10px;
  padding-right: 28px;
}
.okr-modal-sub {
  display: flex; flex-wrap: wrap; gap: 12px 18px;
  font-size: 12.5px; color: var(--muted);
  margin-bottom: 18px;
}
.okr-modal-sub b { color: var(--body); font-weight: 600; }
.okr-modal-progress {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 22px;
}
.okr-modal-progress .bar {
  flex: 1; background: var(--soft); border-radius: 999px; height: 10px; overflow: hidden;
}
.okr-modal-progress .bar > i {
  display: block; height: 100%; background: var(--rausch); border-radius: 999px;
}
.okr-modal-progress .pct {
  font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums;
  min-width: 64px; text-align: right;
}
.okr-modal-desc {
  font-size: 13.5px; color: var(--body); line-height: 1.55;
  margin: 0 0 18px;
  white-space: pre-wrap;
}
.okr-modal-section-title {
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  letter-spacing: 0.04em; text-transform: uppercase;
  margin: 4px 0 10px;
}
.okr-kr-list { display: flex; flex-direction: column; gap: 12px; }
.okr-kr {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  background: var(--canvas);
}
.okr-kr-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 6px;
}
.okr-kr-title { font-size: 13.5px; font-weight: 600; color: var(--ink); flex: 1; }
.okr-kr-pct {
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.okr-kr-bar { background: var(--soft); border-radius: 999px; height: 6px; overflow: hidden; }
.okr-kr-bar > i { display: block; height: 100%; background: var(--rausch); border-radius: 999px; }
.okr-kr-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted); margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.okr-kr-meta b { color: var(--body); font-weight: 500; }
.okr-kr.done .okr-kr-bar > i { background: var(--success); }
.okr-kr.at_risk .okr-kr-bar > i { background: #e8a317; }
.okr-kr.cancelled { opacity: 0.55; }
.okr-kr-desc { font-size: 12.5px; color: var(--body); margin-top: 6px; line-height: 1.5; white-space: pre-wrap; }

@keyframes okr-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes okr-pop-in {
  from { transform: scale(0.96); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ===== Plans subtab ===== */
.plans-counters {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px; padding: 4px 0;
}
@media (max-width: 920px) { .plans-counters { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .plans-counters { grid-template-columns: repeat(2, 1fr); } }
.plans-counter {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 12px 14px;
  background: var(--canvas);
}
.plans-counter.warn { border-color: #f5a623; background: #fff7e6; }
.plans-counter .pc-value { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.plans-counter .pc-label { font-size: 12px; color: var(--muted); margin-top: 2px; }

.plans-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 880px) { .plans-grid { grid-template-columns: 1fr; } }
.plans-group-head {
  grid-column: 1/-1;
  font-size: 13px; font-weight: 600; color: var(--muted);
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 8px 4px 0;
}

.plan-card {
  border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 16px 18px; background: var(--canvas); cursor: pointer;
  transition: box-shadow 0.12s, border-color 0.12s;
}
.plan-card:hover { box-shadow: rgba(0,0,0,0.07) 0 4px 14px; border-color: var(--ink); }
.plan-card.has-pending { border-color: #f5a623; }
.plan-card .pc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.plan-card .pc-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.plan-card .pc-kr { font-size: 13px; margin-bottom: 8px; }
.plan-card .pc-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.plan-card .pc-date { font-size: 11.5px; }
.plan-card .pc-flags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }

.plan-status {
  display: inline-block; padding: 2px 8px;
  border-radius: 999px; font-size: 11.5px; font-weight: 600;
}
.plan-status.tone-warn { background: #fff3d6; color: #b76e00; }
.plan-status.tone-good { background: #defce0; color: #1d7a35; }
.plan-status.tone-bad  { background: #fde0e0; color: #b32020; }
.plan-status.tone-info { background: #e0eaff; color: #2454c8; }
.plan-status.tone-active { background: #ffe4cf; color: #b54a00; }
.plan-status.tone-muted { background: var(--soft); color: var(--muted); }
.pf-flag { font-size: 11px; color: #b76e00; }

/* Plan modal extras (reuse okr-modal base) */
.plan-modal { max-width: 760px; }
.plan-actions { display: flex; gap: 8px; margin-bottom: 14px; }
.plan-action-highlight { box-shadow: 0 0 0 3px rgba(245,166,35,0.45); }
.plan-preview-box {
  background: #fff7e6; border: 1px solid #f5a623;
  border-radius: var(--r-card); padding: 10px 14px;
  margin-bottom: 14px;
}
.plan-preview-box .ppb-head { font-weight: 600; margin-bottom: 4px; }

.plan-fc-list { font-size: 12.5px; padding-left: 18px; margin: 0 0 14px; }
.plan-fc-list li { margin: 2px 0; }

.plan-funnel-list, .plan-actions-list, .plan-changes-list, .plan-reviews-list {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 14px;
}
.plan-funnel-item, .plan-action-item, .plan-change-item, .plan-review-item {
  border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; background: var(--soft);
}
.plan-review-item.review-pending { border-color: #f5a623; background: #fff7e6; }
.plan-review-item.review-reject { border-color: #b32020; background: #fde0e0; }
.plan-review-item.review-ok { border-color: #1d7a35; background: #defce0; }
.plan-review-item .pri-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.plan-review-item .pri-check { font-size: 13px; margin: 4px 0; }
.plan-review-item .pri-actions { display: flex; gap: 6px; margin-top: 6px; }

.plan-spark { display: flex; gap: 2px; margin-top: 4px; height: 14px; align-items: flex-end; }
.plan-spark-bar { width: 8px; height: 100%; background: #d1d5db; border-radius: 2px; }
.plan-spark-bar.verdict-below-target { background: #b32020; }
.plan-spark-bar.verdict-on-target { background: #1d7a35; }
.plan-spark-bar.verdict-above-target { background: #2454c8; }
.plan-spark-bar.verdict-error { background: var(--muted); }

.plan-action-item .pai-head { display: flex; gap: 8px; align-items: center; margin-bottom: 2px; }
.plan-change-item { font-size: 12.5px; }

.plan-narrative {
  background: var(--soft); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; font-size: 12px; max-height: 360px; overflow: auto;
  white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.btn-xs { padding: 3px 8px; font-size: 11.5px; border-radius: 6px; }

/* Plan card: one_liner + meta */
.plan-card .pc-one-liner {
  font-size: 13.5px; color: var(--body); line-height: 1.5;
  margin: 6px 0 10px;
}
.plan-card .pc-meta-row {
  font-size: 12px;
}

/* Plan modal — human-readable hero blocks */
.plan-one-liner {
  font-size: 16px; font-weight: 600; line-height: 1.5;
  background: #fff7e6; border-left: 4px solid #f5a623;
  border-radius: 8px; padding: 12px 14px;
  margin: 4px 0 18px;
}
.plan-why {
  font-size: 13.5px; color: var(--body); line-height: 1.6;
  margin: 0 0 18px;
  background: var(--soft); border-radius: 8px; padding: 10px 14px;
}
.okr-modal-section-title.pending-hot {
  color: #b76e00;
}

/* funnel rows — human readable single line */
.plan-funnel-item { padding: 10px 14px; }
.plan-funnel-item .pfi-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px; align-items: center;
}
.plan-funnel-item .pfi-label { font-weight: 600; font-size: 13.5px; }
.plan-funnel-item .pfi-now { font-size: 14px; font-variant-numeric: tabular-nums; }
.plan-funnel-item .pfi-now b { font-size: 16px; }

/* review item — human label as title */
.plan-review-item .pri-label { font-size: 14px; }
.plan-review-item .pri-link { margin: 6px 0; font-size: 12.5px; }

/* actions list — summary in larger font, meta small */
.plan-action-item .pai-summary { font-size: 13.5px; line-height: 1.55; }
.plan-action-item .pai-meta { font-size: 11px; margin-top: 4px; }

/* next steps */
.plan-next-list { padding-left: 20px; margin: 0 0 18px; font-size: 13.5px; line-height: 1.7; }
.plan-next-list li { margin: 2px 0; }

/* advanced collapsible */
.plan-advanced {
  margin-top: 22px; padding: 12px 14px;
  background: var(--soft); border-radius: 8px;
  font-size: 12.5px;
}
.plan-advanced summary {
  cursor: pointer; font-weight: 600; padding: 2px 0; user-select: none;
}
.plan-advanced summary:hover { color: var(--ink); }
.plan-advanced[open] summary { margin-bottom: 8px; }
.plan-tech-meta { font-size: 12px; line-height: 1.7; padding: 4px 0 0; }
.plan-tech-meta b { font-weight: 600; }