/* ==========================================================================
   买卖之间 —— 样式表
   设计系统见项目根目录 DESIGN.md（源：linear.app via awesome-design-md）
   铁律：层级由「表层阶梯 + 发丝边框」表达，不用阴影；只有一个彩色强调（品牌橙）；
        红绿只表达价格方向；所有数字 tabular-nums。
   ========================================================================== */

:root {
  /* ---- 表层阶梯：层级由抬升表达，而非阴影 ---- */
  --canvas:            #fbfbfc;
  --surface-1:         #ffffff;
  --surface-2:         #f6f7f8;
  --surface-3:         #f0f1f3;
  --surface-4:         #e9eaed;

  /* ---- 发丝边框 ---- */
  --hairline:          #e7e7ea;
  --hairline-strong:   #d7d8dd;
  --hairline-tertiary: #c7c9cf;

  /* ---- 墨色文字阶 ---- */
  --ink:               #0d0e10;
  --ink-muted:         #3d4046;
  --ink-subtle:        #6b6f76;
  --ink-tertiary:      #8f939b;

  /* ---- 唯一彩色：品牌橙 ---- */
  --primary:           #FF6200;
  --primary-hover:     #D65300;
  --primary-soft:      #FFF0E8;
  --primary-line:      #FFD7BC;
  --on-primary:        #ffffff;
  --ring:              0 0 0 3px rgba(255, 98, 0, .18);

  /* ---- A 股语义色（红涨绿跌，独立于品牌色） ---- */
  --up:                #d43b3b;
  --up-soft:           #fdf1f0;
  --up-line:           #eccfce;
  --down:              #17914f;
  --down-soft:         #eef8f2;
  --down-line:         #c8e6d5;
  --caution:           #a8621a;
  --caution-soft:      #fdf5ea;
  --caution-line:      #f0dcc0;

  /* ---- 图表 ---- */
  --chart-grid:        #f0f1f3;
  --chart-axis:        #8f939b;
  --chart-crosshair:   #6b6f76;

  /* ---- 圆角 / 阴影 ---- */
  --radius:            12px;
  --radius-md:         8px;
  --radius-sm:         6px;
  --shadow-pop:        0 24px 64px -16px rgba(13, 14, 16, .22), 0 4px 12px -4px rgba(13, 14, 16, .10);
  --shadow-raise:      0 1px 2px rgba(13, 14, 16, .06);

  /* ---- 字体 ---- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
               "Segoe UI", "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC",
               "Noto Sans CJK SC", "Microsoft YaHei UI", "Microsoft YaHei",
               system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono",
               Menlo, Consolas, monospace;
  /* 中西混排的数值专用：让数字走中文字体的西文字形。
     拉丁字体的数字墨迹只占约 0.7em（cap-height），汉字字面几乎占满 em，
     同为 17px 时汉字看起来会比数字大一圈；同源字体后两者度量一致。 */
  --font-mixed: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC",
                "Noto Sans CJK SC", "Microsoft YaHei UI", "Microsoft YaHei",
                var(--font-sans);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -.006em;
  /* 数字全程等宽对齐 —— 数据工具的基本功 */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { margin: 0; font-weight: 600; }
.hidden { display: none !important; }

/* 细滚动条，避免默认滚动条打断版面 */
* { scrollbar-width: thin; scrollbar-color: var(--hairline-tertiary) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--hairline-tertiary); border-radius: 4px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-tertiary); background-clip: content-box; }

::selection { background: rgba(255, 98, 0, .18); }

/* ============================================================ 外壳：左栏 + 操作面板 + 主区 */

.shell {
  display: flex;
  align-items: stretch;
  height: 100vh;
  /* 操作面板展开时主区整体右移 —— 溢出视口的部分直接裁掉，不出现横向滚动条 */
  overflow: hidden;
}

/* 品牌与自选股、用户区收进左栏；搜索在主区顶栏，加自选在基本信息区右上 */
.sidebar {
  flex: 0 0 288px;
  width: 288px;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border-right: 1px solid var(--hairline);
  overflow: hidden; /* 滚动收在 .wp-list 内部，品牌与用户区常驻 */
}

.brand { display: flex; align-items: center; gap: 10px; flex: none; padding: 6px 16px; }
.logo {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.logo img { display: block; width: 100%; height: 100%; }
.brand-text h1 { font-size: 15px; letter-spacing: -.01em; line-height: 1.25; }
.brand-text p { margin: 1px 0 0; font-size: 11.5px; color: var(--ink-tertiary); line-height: 1.3; }

.chip {
  border: 1px solid var(--hairline); background: var(--surface-1); color: var(--ink-muted);
  border-radius: 999px; padding: 3px 10px;
  font-family: inherit; font-size: 12px; cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.chip:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

/* ---- 操作面板：宽度 0 → 360，把主区整体往右推 ---- */
/* 收起时连边框宽度一起收掉，否则 1px 的透明边框会让面板占住 1px、主区整体右移 1px */
.op-panel {
  flex: 0 0 auto;
  width: 0;
  background: var(--surface-1);
  border-right: 0 solid var(--hairline);
  overflow: hidden;
  transition: width .22s ease, border-right-width .22s ease;
}
.op-panel.open { width: 540px; border-right-width: 1px; }   /* box-sizing 含边框，故内部内容宽 539 */
.op-inner { width: 539px; height: 100%; display: flex; flex-direction: column; }
.op-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--hairline); flex: none;
}
.op-head h3 { font-size: 14.5px; letter-spacing: -.01em; }
.op-head button {
  border: none; background: none; font-size: 20px; line-height: 1;
  color: var(--ink-tertiary); cursor: pointer; padding: 0 4px; border-radius: 4px;
  transition: color .12s, background .12s;
}
.op-head button:hover { color: var(--ink); background: var(--surface-3); }
.op-body { flex: 1; overflow-y: auto; padding: 16px 18px; }
.op-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 18px; border-top: 1px solid var(--hairline); flex: none;
}
.op-panel.records .op-foot { display: none; }
.op-msg { flex: 1 0 100%; font-size: 12px; color: var(--caution); font-weight: 500; }
.op-msg:empty { display: none; }
.op-foot button {
  height: 34px; padding: 0 16px;
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-md);
  background: var(--surface-1); color: var(--ink);
  font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.op-foot button:hover { border-color: var(--primary); color: var(--primary); }
.op-foot button.primary { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.op-foot button.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); }
.op-foot button:disabled { opacity: .5; cursor: not-allowed; }
#op-cancel { margin-left: auto; }

/* ============================================================ 主体 */

main {
  /* 宽度写死为「视口 − 侧栏」：面板展开时主区不被压窄，而是被推出屏幕并被裁掉 */
  flex: 0 0 auto;
  width: calc(100% - 288px);
  padding: 16px 16px 0;
}

.card {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.card-head h2 { font-size: 15px; letter-spacing: -.01em; }

.grid-main { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 14px; align-items: start; }
.col-left, .col-right { min-width: 0; }
@media (max-width: 1180px) { .grid-main { grid-template-columns: 1fr; } }

/* 状态 / 错误 —— 统一走提醒色，红色留给价格方向 */
.status {
  height: 100%; min-height: 200px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 0 16px; font-size: 13px;
}
#main.analysis-loading > footer { display: none; }
.loading-candles { display: block; width: 130px; height: 112px; overflow: hidden; flex: none; }
.loading-caption {
  max-width: 100%; padding: 10px 15px; border: 1px solid #F2D9C6;
  border-radius: 8px; background: #FFF8F2; color: #D67537; text-align: center;
  line-height: 1.6; overflow-wrap: anywhere;
}
.loading-caption > span {
  background: linear-gradient(100deg, #D67537 0%, #D67537 40%, #E9B28A 50%, #D67537 60%, #D67537 100%);
  background-size: 250% 100%; background-position: 100% 0;
  background-clip: text; -webkit-background-clip: text; color: transparent;
  animation: loading-spotlight 3s linear infinite;
}
.loading-paused .loading-caption > span { animation-play-state: paused; }
@keyframes loading-spotlight { to { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) {
  .loading-caption > span { animation: none; background: none; color: #D67537; }
}
.error {
  background: var(--caution-soft); border: 1px solid var(--caution-line); color: var(--caution);
  padding: 11px 14px; border-radius: var(--radius-md); margin-bottom: 14px; font-size: 13px;
}
.error .hint { color: var(--caution); opacity: .8; margin-top: 3px; }
.error button {
  display: block; margin-top: 10px; height: 30px; padding: 0 14px;
  border: 1px solid var(--caution-line); border-radius: var(--radius-sm);
  background: var(--surface-1); color: var(--caution);
  font-family: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.error button:hover { border-color: var(--caution); background: var(--caution-soft); }
#main:has(> .stock-not-found:not(.hidden)) > footer { display: none; }
.error.stock-not-found {
  height: 100%; min-height: 240px; margin: 0; padding: 0 0 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 0; border-radius: 0; background: none; color: var(--ink-subtle);
  text-align: center; line-height: 1.6; overflow-wrap: anywhere;
}
.stock-not-found img { display: block; width: 115px; height: 95px; flex: none; margin-bottom: 24px; }
.stock-not-found > div { max-width: 100%; }
.error.stock-not-found button {
  flex: none; height: 36px; margin-top: 16px; padding: 0 20px;
  border: 0; border-radius: 8px; background: var(--primary); color: var(--on-primary);
  font-size: 13px;
}
.error.stock-not-found button:hover { background: var(--primary-hover); }

/* ============================================================ 结论卡 */

.conclusion { border-left: 3px solid var(--primary); position: relative; }
.conclusion.buy { border-left-color: var(--up); }
.conclusion.wait { border-left-color: var(--caution); }
.conclusion.exit { border-left-color: var(--down); }
.conclusion.hold { border-left-color: var(--primary); }
.conclusion.reduce { border-left-color: var(--caution); }
.conclusion-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }

/* 基本信息区右上「＋加自选」——相对整张卡垂直居中，仅未自选的股票显示，点击后随重渲染消失 */
.track-btn {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  flex: none;
  height: 34px; padding: 0 16px; border: none; border-radius: var(--radius-md);
  background: var(--primary); color: var(--on-primary);
  font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background .12s;
}
.track-btn:hover { background: var(--primary-hover); }
.track-btn:disabled { opacity: .5; cursor: not-allowed; }
.conclusion h2 { font-size: 20px; letter-spacing: -.015em; }
.conclusion .detail { color: var(--ink-muted); margin-top: 6px; font-size: 13.5px; }
.conclusion .tags { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }

.tag {
  background: var(--surface-3); color: var(--ink-subtle);
  border-radius: var(--radius-sm); padding: 3px 9px;
  font-size: 11px; font-weight: 500; letter-spacing: .02em;
}
.tag strong { color: var(--ink); font-weight: 600; letter-spacing: 0; }
.tag.plan { background: var(--primary-soft); color: var(--primary); }
.tag.plan strong { color: var(--primary); }

.stock-name { font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.price { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.price.up { color: var(--up); }
.price.down { color: var(--down); }
.chg { font-size: 13px; color: var(--ink-muted); }

/* ============================================================ 图表 */

.chart-fullscreen {
  flex: none; border: 1px solid var(--hairline-strong); border-radius: var(--radius-md);
  background: var(--surface-1); color: var(--ink-muted); padding: 5px 10px;
  font: inherit; font-size: 12px; cursor: pointer;
}
.chart-fullscreen:hover { border-color: var(--primary); color: var(--primary); }
.chart-fullscreen:focus-visible { outline: none; box-shadow: var(--ring); }
#kline-card:fullscreen, #kline-card.chart-expanded {
  width: 100vw; height: 100vh; margin: 0; padding: 20px;
  background: var(--surface-1); border-radius: 0;
  display: flex; flex-direction: column; overflow-y: auto;
}
#kline-card.chart-expanded { position: fixed; inset: 0; z-index: 120; }
#kline-card:fullscreen .chart, #kline-card.chart-expanded .chart {
  flex: 1; min-height: 0; display: flex; align-items: center;
}
#kline-card:fullscreen .chart svg, #kline-card.chart-expanded .chart svg {
  max-height: calc(100vh - 90px); width: 100%;
}
@media (max-width: 720px) {
  #kline-card:fullscreen, #kline-card.chart-expanded { padding: 12px; }
  #kline-card:fullscreen .card-head, #kline-card.chart-expanded .card-head { flex-wrap: wrap; }
}
.chart { width: 100%; overflow: hidden; position: relative; }
.chart svg { width: 100%; height: auto; display: block; }

.tip {
  display: none; position: fixed; z-index: 40; pointer-events: none;
  background: var(--ink); color: #fff;
  font-size: 11.5px; line-height: 1.6;
  padding: 8px 10px; border-radius: var(--radius-md); min-width: 150px;
  box-shadow: 0 8px 24px -6px rgba(13, 14, 16, .35);
}
.tip-date { font-weight: 600; margin-bottom: 2px; color: #c3c8f0; }

.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-subtle); }
.lg { display: inline-flex; align-items: center; }
.lg::before {
  content: ""; display: inline-block; width: 14px; height: 2px;
  margin-right: 5px; border-radius: 1px;
}
.lg-up::before { background: var(--up); }
.lg-down::before { background: var(--down); }
.lg-now::before { background: var(--ink); }
.lg-entry::before { background: var(--primary); }
.lg-stop::before { background: var(--up); }
.lg-ma5::before { background: #c9901f; }
.lg-ma10::before { background: #DEAC8C; }
.lg-ma20::before { background: #B26851; }

/* ============================================================ 量价与换手 */

/* 三件套各自一格：位置决定性质、量价看健康度、换手率看筹码交换是否异常 */
.vp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 720px) { .vp-grid { grid-template-columns: 1fr; } }

/* 盘中折算提示：当日量能与换手率是估算值，需明示口径 */
.vp-note {
  margin-bottom: 10px; padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink-tertiary);
  font-size: 11.5px; line-height: 1.5;
}

.vp-cell {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  padding: 10px 12px;
}
.vp-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--ink-tertiary); letter-spacing: .02em;
}
/* 结论值不套胶囊，直接用大字：只有在需要警示时才染警示色 */
.vp-value {
  margin: 6px 0 4px; font-size: 17px; font-weight: 600; line-height: 1.25;
  color: var(--ink); letter-spacing: -.01em;
  /* 汉字与数字混排在同一格（如价格位置是汉字、换手率是数字），必须同源才一样大 */
  font-family: var(--font-mixed);
}
.vp-value.warn, .vp-value.risk { color: var(--caution); }
.vp-sub { font-size: 11.5px; color: var(--ink-subtle); line-height: 1.55; }
.vp-dim { color: var(--ink-tertiary); }
.vp-desc { margin-top: 5px; font-size: 11.5px; color: var(--ink-muted); line-height: 1.55; }

/* 徽标：good 用品牌色、warn/risk 用警示色 —— 红绿只留给价格方向 */
.vp-badge {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0;
  background: var(--surface-3); color: var(--ink-muted);
}
.vp-badge.good { background: var(--primary-soft); color: var(--primary); }
.vp-badge.warn { background: var(--caution-soft); color: var(--caution); }
.vp-badge.risk { background: var(--caution-soft); color: var(--caution); font-weight: 600; }

/* 换手率相对自身常态的倍数条：4 倍及以上视为满格 */
.vp-bar {
  margin-top: 8px; height: 4px; border-radius: 999px;
  background: var(--surface-4); overflow: hidden;
}
.vp-bar span { display: block; height: 100%; border-radius: 999px; background: var(--ink-tertiary); }
.vp-bar span.good { background: var(--primary); }
.vp-bar span.warn, .vp-bar span.risk { background: var(--caution); }

.vp-health {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding: 9px 12px;
  border: 1px solid var(--hairline); border-radius: var(--radius-md);
  background: var(--surface-1); font-size: 12.5px;
}

.vp-signals { margin: 10px 0 0; padding: 0; list-style: none; }
.vp-signals li {
  position: relative; padding: 6px 0 6px 14px;
  font-size: 12.5px; line-height: 1.6; color: var(--ink-muted);
  border-top: 1px solid var(--hairline);
}
.vp-signals li:first-child { border-top: none; }
.vp-signals li::before {
  content: ''; position: absolute; left: 0; top: 12px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-tertiary);
}
.vp-signals li.good::before { background: var(--primary); }
.vp-signals li.warn::before { background: var(--caution); }
.vp-signals li.risk { color: var(--caution); font-weight: 500; }
.vp-signals li.risk::before { background: var(--caution); }

/* 卡片标题右侧：量价换手对趋势分的净影响 */
.vp-head { font-size: 11.5px; color: var(--ink-tertiary); }
.vp-bias { font-weight: 600; }
.vp-bias.good { color: var(--primary); }
.vp-bias.risk { color: var(--caution); }

/* ============================================================ 关键位 */

.levels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .levels { grid-template-columns: 1fr; } }

.level-group h3 {
  font-size: 11px; font-weight: 500; letter-spacing: .02em; margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
  color: var(--ink-subtle); text-transform: uppercase;
}
.level-group.resist h3 { color: var(--up); }
.level-group.support h3 { color: var(--down); }

.level-item {
  border: 1px solid var(--hairline); border-radius: var(--radius-md);
  padding: 10px 12px; margin-bottom: 8px; background: var(--surface-2);
}
.level-item:last-child { margin-bottom: 0; }
.level-item .li-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.level-item .li-price { font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.level-group.resist .li-price { color: var(--up); }
.level-group.support .li-price { color: var(--down); }
.level-item .li-meta { font-size: 11.5px; color: var(--ink-tertiary); margin-top: 2px; }
.level-item ul { margin: 6px 0 0; padding-left: 16px; }
.level-item li { font-size: 12px; color: var(--ink-muted); }

.badge {
  font-size: 11px; font-weight: 500; letter-spacing: .02em;
  padding: 2px 9px; border-radius: 999px;
  color: var(--ink-muted); background: var(--surface-3);
}
.badge.strong { background: var(--up-soft); color: var(--up); }
.badge.mid { background: var(--caution-soft); color: var(--caution); }

/* ============================================================ 买入信号 */

.entry {
  border: 1px solid var(--hairline); border-radius: var(--radius-md);
  padding: 12px 14px; margin-bottom: 8px; background: var(--surface-1);
}
.entry:last-child { margin-bottom: 0; }
.entry.matched { border-color: var(--up-line); background: var(--up-soft); }
.entry-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.entry-head .scene {
  width: 22px; height: 22px; border-radius: var(--radius-sm);
  background: var(--surface-3); color: var(--ink-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; flex: none;
}
.entry.matched .scene { background: var(--up); color: #fff; }
.entry-head .name { font-weight: 600; font-size: 13.5px; }
.entry-status {
  font-size: 11px; font-weight: 500; letter-spacing: .02em;
  padding: 2px 9px; border-radius: 999px;
  background: var(--surface-3); color: var(--ink-subtle);
}
.entry-status.on { background: var(--up-soft); color: var(--up); }
.entry-status.part { background: var(--caution-soft); color: var(--caution); }

.cond-list { margin: 10px 0 0; padding: 0; list-style: none; }
.cond-list li { display: flex; gap: 8px; font-size: 12.5px; padding: 3px 0; align-items: flex-start; }
.cond-list .mark { width: 14px; flex: none; font-weight: 600; }
.cond-list .mark.ok { color: var(--primary); }
.cond-list .mark.no { color: var(--ink-tertiary); }
.cond-list .detail { color: var(--ink-tertiary); font-size: 11.5px; }

.entry-action {
  margin-top: 10px; font-size: 12.5px;
  background: var(--surface-2); padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--ink-muted);
}
.entry-note { margin-top: 6px; font-size: 11.5px; color: var(--caution); }

/* ============================================================ 卖出 / 止损止盈 */

.exit-block { margin-bottom: 14px; }
.exit-block:last-child { margin-bottom: 0; }
.exit-block h3 {
  font-size: 11px; font-weight: 500; letter-spacing: .02em;
  color: var(--ink-subtle); margin-bottom: 7px; text-transform: uppercase;
}
.exit-item {
  display: flex; gap: 10px; align-items: baseline;
  padding: 7px 11px; border-radius: var(--radius-sm);
  background: var(--surface-2); margin-bottom: 6px;
}
.exit-item:last-child { margin-bottom: 0; }
.exit-item .lv { font-weight: 600; font-size: 14px; min-width: 62px; letter-spacing: -.01em; }
.exit-item.tp .lv { color: var(--up); }
.exit-item.sl .lv { color: var(--down); }
.exit-item .txt { font-size: 12.5px; color: var(--ink-muted); }
.exit-item .kind {
  font-size: 11px; font-weight: 500; letter-spacing: .02em;
  color: var(--ink-subtle); background: var(--surface-3);
  border-radius: 999px; padding: 1px 8px; margin-left: auto; flex: none;
}
.note-line {
  font-size: 12.5px; color: var(--ink-muted);
  background: var(--surface-2); padding: 8px 10px; border-radius: var(--radius-sm);
}

/* ============================================================ 情景表 */

table.scen { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.scen th, table.scen td {
  border-bottom: 1px solid var(--hairline);
  padding: 8px 10px; text-align: left; vertical-align: top;
}
table.scen th {
  color: var(--ink-subtle); font-weight: 500;
  font-size: 11px; letter-spacing: .02em; text-transform: uppercase;
  background: var(--surface-2);
  border-bottom-color: var(--hairline-strong);
}
table.scen tr:last-child td { border-bottom: none; }
table.scen td.act { font-weight: 500; }
tr.tone-positive td.act { color: var(--down); }
tr.tone-negative td.act { color: var(--up); }
tr.tone-warning td.act { color: var(--caution); }
.scen.has-plan td.plan-act { background: var(--primary-soft); color: #8C3700; font-weight: 500; }
.scen.has-plan th:last-child { color: var(--primary); }
.scen-note { font-size: 11.5px; color: var(--ink-tertiary); margin-top: 8px; }

/* ============================================================ 仓位与纪律 */

.pos-num { font-size: 26px; font-weight: 600; color: var(--primary); letter-spacing: -.02em; line-height: 1.1; }
.pos-rat { font-size: 11.5px; color: var(--ink-subtle); margin-top: 4px; }
.pos-rules { margin: 10px 0 0; padding-left: 16px; font-size: 12.5px; color: var(--ink-muted); }
.pos-rules li { margin-bottom: 4px; }
.env-line { font-size: 12.5px; margin-top: 8px; color: var(--ink-muted); }
.up { color: var(--up); }
.down { color: var(--down); }

.pos-compare { display: flex; gap: 18px; }
.pc-item { display: flex; flex-direction: column; gap: 1px; }
.pc-item .k { font-size: 11px; color: var(--ink-subtle); }
.pc-item b { font-size: 20px; font-weight: 600; color: var(--ink-subtle); letter-spacing: -.015em; }
.pc-item.mine b { color: var(--primary); }
.pc-item .sub { font-size: 11px; color: var(--ink-tertiary); }
.pos-plan-link {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline);
  font-size: 11.5px; color: var(--ink-tertiary);
}

/* ============================================================ 规则 / 清单 */

.rules { margin: 0; padding-left: 16px; }
.rules li { font-size: 12.5px; margin-bottom: 6px; color: var(--ink-muted); }

.checklist { margin: 0; padding: 0; list-style: none; }
.checklist li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 12.5px; padding: 5px 0; cursor: pointer;
  color: var(--ink-muted); line-height: 1.5;
}
.checklist li .box {
  width: 16px; height: 16px; flex: none; margin-top: 2px;
  border: 1px solid var(--hairline-strong); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: transparent; background: var(--surface-1);
  transition: background .12s, border-color .12s, color .12s;
}
/* 勾选态用品牌色而非绿色 —— 绿色在本系统里专指「跌」 */
.checklist li.checked .box {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.checklist li.checked { color: var(--ink-tertiary); text-decoration: line-through; }
.checklist li:hover .box { border-color: var(--primary); }

/* ============================================================ 数据面板 */

.panel dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: 12.5px; }
.panel dt { color: var(--ink-tertiary); }
.panel dd { margin: 0; text-align: right; font-weight: 500; color: var(--ink); }
.panel .sec {
  grid-column: 1 / -1;
  font-size: 11px; font-weight: 500; letter-spacing: .02em;
  color: var(--ink-subtle); text-transform: uppercase;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hairline);
}
.panel .sec:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* ============================================================ 风险提示 */

.risk { background: var(--caution-soft); border-color: var(--caution-line); }
.risk h2 {
  font-size: 11px; font-weight: 500; letter-spacing: .02em;
  color: var(--caution); margin-bottom: 8px; text-transform: uppercase;
}
.risk ul { margin: 0; padding-left: 16px; }
.risk li { font-size: 12px; color: #7a4a13; margin-bottom: 5px; line-height: 1.6; }
.risk strong { color: var(--caution); }

footer {
  text-align: center; color: var(--ink-tertiary); font-size: 11.5px;
  padding: 16px; border-top: 1px solid var(--hairline);
}

/* ============================================================ 数据状态条（主区顶栏） */

/* 顶栏铺满主区顶部：负外边距抵消 main 的内边距，只留一条底部分隔线 */
.databar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  background: var(--surface-1);
  border-bottom: 1px solid var(--hairline);
  margin: -18px -24px 14px;
  padding: 10px 24px;
  font-size: 12.5px; color: var(--ink-muted);
  transition: border-color .2s, box-shadow .2s;
}
.databar .db-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.databar .phase {
  display: inline-flex; align-items: center; gap: 5px; flex: none; white-space: nowrap;
  padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 500; letter-spacing: .02em;
  background: var(--surface-3); color: var(--ink-muted);
}
.databar .phase.open { background: var(--primary-soft); color: var(--primary); }
.databar .phase.lunch, .databar .phase.pre { background: var(--caution-soft); color: var(--caution); }
.databar .phase.closed { background: var(--surface-3); color: var(--ink-muted); }
.databar .phase.holiday { background: var(--surface-3); color: var(--ink-tertiary); }
.databar .db-age { color: var(--ink); font-weight: 500; }
.databar .db-mono { color: var(--ink); font-weight: 500; }
.databar .stale { color: var(--caution); font-weight: 500; }
.databar .err { color: var(--caution); font-weight: 600; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.databar button {
  height: 28px; padding: 0 12px;
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm);
  background: var(--surface-1); color: var(--ink-muted);
  font-family: inherit; font-size: 12px; cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.databar button:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.databar button:disabled { opacity: .5; cursor: default; }
.databar .phase-info-toggle { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 0; background: transparent; color: inherit; border-radius: 50%; }
.databar .phase-info-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.data-warning-popover { overflow-wrap: anywhere; }
.data-warning-popover p { margin: 0; }
.data-warning-popover p + p { margin-top: 8px; }
.databar label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.databar input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; accent-color: var(--primary); }
.databar.flash { border-color: var(--primary); box-shadow: var(--ring); }

/* 顶栏右侧搜索：一个整体圆角框，放大镜嵌在右端；输入非空后变成紫色「分析」按钮 */
.db-search {
  flex: none; display: flex; align-items: center;
  width: 280px; height: 34px;
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-md);
  background: var(--surface-1);
  overflow: hidden;
  transition: border-color .12s, box-shadow .12s;
}
.db-search:focus-within { border-color: var(--primary); box-shadow: var(--ring); }
.db-search input {
  flex: 1; min-width: 0; height: 100%; padding: 0 12px;
  border: none; background: transparent; outline: none;
  font-family: inherit; font-size: 13px; color: var(--ink);
}
.db-search input::placeholder { color: var(--ink-tertiary); }
.db-search button {
  flex: none; height: 100%; padding: 0 11px;
  border: none; background: transparent; color: var(--ink-tertiary);
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.db-search button.has-q {
  margin: 3px; padding: 0 14px; height: calc(100% - 6px);
  border-radius: var(--radius-sm);
  background: var(--primary); color: var(--on-primary);
}
.db-search button.has-q:hover { background: var(--primary-hover); }
.db-search button:disabled { opacity: .5; cursor: not-allowed; }

/* ============================================================ 我的仓位方案卡片 */

.plan-card { border-left: 3px solid var(--primary); }
.plan-top {
  display: flex; gap: 18px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 1px solid var(--hairline);
}
.plan-top > div { display: flex; flex-direction: column; gap: 1px; }
.plan-top .k { font-size: 11px; color: var(--ink-subtle); }
.plan-top b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }

.risk-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--hairline); border-radius: var(--radius-md);
  overflow: hidden; margin: 12px 0;
}
.rg-item { background: var(--surface-2); padding: 10px 12px; display: flex; flex-direction: column; gap: 1px; }
.rg-item.main { background: var(--primary-soft); }
.rg-item .k { font-size: 11px; color: var(--ink-subtle); }
.rg-item b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.rg-item b.big { font-size: 20px; color: var(--up); letter-spacing: -.015em; }
.rg-item .sub { font-size: 11px; color: var(--ink-tertiary); }

.plan-alert {
  background: var(--caution-soft); border: 1px solid var(--caution-line); color: var(--caution);
  border-radius: var(--radius-md); padding: 9px 11px; font-size: 12.5px; margin-bottom: 10px;
}
.plan-note {
  background: var(--surface-2); border-radius: var(--radius-md); padding: 8px 10px;
  font-size: 12px; color: var(--ink-muted); margin-bottom: 10px;
}

.plan-block { margin-top: 14px; }
.plan-block h3 {
  font-size: 11px; font-weight: 500; letter-spacing: .02em;
  color: var(--ink-subtle); margin-bottom: 8px; text-transform: uppercase;
}

.diag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.diag { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.55; color: var(--ink-muted); }
.dg-dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 7px; flex: none; background: var(--hairline-tertiary); }
.diag.ok .dg-dot { background: var(--primary); }
.diag.warn .dg-dot { background: var(--caution); }
/* info 是后端真实存在的第三档（中性提示），原本只有 ok/warn 两档样式 */
.diag.info .dg-dot { background: var(--ink-tertiary); }
.diag.warn { color: var(--ink); }

.tp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.tp-list li { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; }
.tp-lv { flex: none; min-width: 52px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.tp-rd {
  flex: none; min-width: 52px; font-size: 11px; font-weight: 500; letter-spacing: .02em;
  background: var(--primary-soft); color: var(--primary);
  border-radius: var(--radius-sm); padding: 1px 6px; text-align: center;
}
.tp-note { color: var(--ink-muted); }

.disc-list { margin: 0; padding-left: 16px; font-size: 12.5px; color: var(--ink-muted); }
.disc-list li { margin-bottom: 4px; }

/* ============================================================ 启动 / 登录层 */

.boot-layer {
  position: fixed; inset: 0; z-index: 201;
  display: flex; align-items: center; justify-content: center;
  background: var(--canvas);
}
.boot-brand { display: flex; align-items: center; gap: 10px; color: var(--ink-subtle); font-size: 13px; }
.boot-brand img { display: block; width: 42px; height: 42px; }

.login-layer {
  position: fixed; inset: 0; z-index: 200; padding: 24px;
  background: var(--canvas);
  display: flex; align-items: center; justify-content: center;
}
/* 未认证时登录是完整的独立页面，不露出移动端应用顶部栏。 */
.login-layer:not(.hidden) ~ .shell .mobile-topbar { display: none !important; }
.login-card {
  width: 100%; max-width: 380px;
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 26px;
  box-shadow: var(--shadow-pop);
}
.register-card {max-height: calc(100dvh - 48px); overflow-y: auto; }
.auth-switch { margin: 14px 0 0; color: var(--ink-subtle); font-size: 12.5px; text-align: center; }
.auth-switch a { color: var(--primary); font-weight: 600; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }
.avatar-field { margin: 4px 0 18px;display:flex; align-items: center; gap: 12px}
.avatar-field > span { display: block; margin-bottom: 6px; color: var(--ink-subtle); font-size: 12px; font-weight: 500; }
.avatar-open { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; padding: 0; border: 1px dashed var(--hairline-strong); border-radius: 100%; background: transparent; color: var(--primary); font-family: inherit; cursor: pointer; }
.avatar-open:hover { border-color: var(--primary); color: var(--primary-hover); }
.avatar-open.chosen { border: 0; background: transparent; }
#avatar-open-label { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.avatar-open img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.avatar-dialog { width: min(520px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface-1); box-shadow: var(--shadow-pop); }
.avatar-dialog::backdrop { background: rgba(19, 21, 35, .42); backdrop-filter: blur(2px); }
.avatar-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 12px; }
.avatar-dialog-head h2 { font-size: 16px; }
.avatar-dialog-head button { border: 0; background: transparent; color: var(--ink-tertiary); font-size: 24px; line-height: 1; cursor: pointer; }
.avatar-tabs { display: flex; gap: 20px; padding: 0 20px; border-bottom: 1px solid var(--hairline); }
.avatar-tabs button { height: 36px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ink-subtle); font-family: inherit; font-size: 13px; cursor: pointer; }
.avatar-tabs button[aria-selected='true'] { border-color: var(--primary); color: var(--primary); font-weight: 600; }
.avatar-modal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 18px 20px; }
.avatar-choice { min-width: 0; padding: 5px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; cursor: pointer; }
.avatar-choice img { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; }
.avatar-choice span { display: block; margin-top: 3px; color: var(--ink-tertiary); font-size: 11px; line-height: 1; text-align: center; white-space: nowrap; overflow: hidden; }
.avatar-choice:hover, .avatar-choice.selected { border-color: var(--primary); background: var(--primary-soft); }
.avatar-choice.selected span { color: var(--primary); font-weight: 600; }
.avatar-dialog-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px 18px; border-top: 1px solid var(--hairline); }
.avatar-dialog-foot button { height: 34px; padding: 0 18px; border: 1px solid var(--hairline-strong); border-radius: var(--radius-md); background: var(--surface-1); color: var(--ink-muted); font-family: inherit; cursor: pointer; }
.avatar-dialog-foot button.primary { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.avatar-dialog-foot button.primary:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 560px) {
  .login-layer { padding: 16px; }
  .login-card { padding: 22px; }
  .avatar-dialog { width: calc(100vw - 24px); }
  .avatar-modal-grid { gap: 7px; padding: 14px; }
}
.login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; line-height: 160%;}
.login-brand h1 { font-size: 17px; }
.login-brand p { margin:0; font-size: 12px; color: var(--ink-tertiary); }

.lf { display: block; margin-bottom: 14px; }
.lf > span { display: block; font-size: 12px; font-weight: 500; letter-spacing: .01em; color: var(--ink-subtle); margin-bottom: 6px; }
.lf input {
  width: 100%; height: 48px; padding: 0 12px;
  font-family: inherit; font-size: 13.5px; color: var(--ink);
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-md);
  background: var(--surface-1); outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.lf input::placeholder { color: var(--ink-tertiary); }
.lf input:focus { border-color: var(--primary); box-shadow: var(--ring); }

#login-btn, #auth-submit {
  width: 100%; height: 48px; margin-top: 6px;
  border: none; border-radius: var(--radius-md);
  background: var(--primary); color: var(--on-primary);
  font-family: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
  transition: background .12s;
}
#login-btn:hover, #auth-submit:hover { background: var(--primary-hover); }
#login-btn:disabled, #auth-submit:disabled { opacity: .5; cursor: not-allowed; }

.login-msg { min-height: 18px; margin-top: 10px; font-size: 12px; color: var(--ink-tertiary); text-align: center; }
.login-msg.err { color: var(--caution); }

/* 邀请码失效 / 被锁定：只留品牌 + 状态文案 */
.login-error-only { text-align: center; padding: 18px 0 4px; }
.login-error-only p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--caution);
}

/* 登录卡片进入「阻塞」态：隐藏表单与副标题，只显示品牌和错误文案 */
.login-card.blocked .login-brand { margin-bottom: 8px; }
.login-card.blocked .login-brand p { display: none; }
.login-card.blocked #login-form { display: none; }
.login-card.blocked .login-msg { display: none; }

/* ============================================================ 用户区 */

/* 用户区：圆角卡片，头像 + 问候语/金句 + 退出图标 */
.user-area { margin: 12px; flex: none; }
.ua-card {
  display: flex; align-items: center; gap: 11px;
  background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 4px 8px;
}
.ua-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--primary-soft); color: var(--primary);
  font-size: 16px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.ua-avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.ua-info { flex: 1; min-width: 0; }
.ua-name {
  font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ua-quote {
  margin-top: 2px; font-size: 11.5px; color: var(--ink-tertiary); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-area button {
  width: 30px; height: 30px; padding: 0; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--radius-md);
  background: transparent; color: var(--ink-tertiary);
  cursor: pointer; transition: color .12s, background .12s;
}
.user-area button:hover { color: var(--caution); background: var(--surface-3); }
.ua-note {
  font-size: 11.5px; color: var(--ink-tertiary);
  border: 1px dashed var(--hairline-strong); padding: 3px 10px; border-radius: 999px;
}

/* ============================================================ 自选股（左栏常驻） */

.watch-block {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
}

.sb-head { display: flex; align-items: center; gap: 8px; padding: 0 16px; }
.watch-tabs { display: flex; flex: 1; min-width: 0; gap: 4px; }
.watch-tabs button { min-width: 36px; height: 28px; padding: 0 8px; border: 0;
  border-bottom: 2px solid transparent; background: transparent; color: var(--ink-tertiary);
  font: inherit; font-size: 12.5px; cursor: pointer; }
.watch-tabs button[aria-selected='true'] { border-color: var(--primary); color: var(--ink); font-weight: 600; }
.watch-tabs button:hover { color: var(--primary); }

/* 侧栏设置入口 */
.sb-tool {
  width: 24px; height: 24px; padding: 0; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-tertiary);
  cursor: pointer; transition: color .12s, background .12s;
}
.sb-tool:hover { color: var(--primary); background: var(--primary-soft); }
#sb-settings { font-size: 18px; }

.account-dialog {
  width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - 24px);
  padding: 0; border: 1px solid var(--hairline-strong); border-radius: 6px;
  background: var(--surface-1); color: var(--ink); box-shadow: var(--shadow-pop);
}
.account-dialog::backdrop { background: rgba(18, 23, 35, .42); }
.account-dialog form { padding: 22px; display: grid; gap: 16px; }
.account-dialog h2 { font-size: 17px; }
.account-dialog .dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.account-dialog .dialog-close { border: 0; padding: 0 4px; font-size: 24px; line-height: 1;
  color: var(--ink-tertiary); background: transparent; }
.account-dialog label { display: grid; gap: 6px; font-size: 13px; }
.account-dialog input { width: 100%; height: 38px; border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md); padding: 0 12px; font: inherit;
  background: var(--surface-1); color: var(--ink);
  transition: border-color .12s, box-shadow .12s; }
.account-dialog input:not([type='radio']):focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.account-dialog input::placeholder { color: var(--ink-tertiary); }
.account-dialog .dialog-note { color: var(--ink-tertiary); font-size: 11px; line-height: 1.5; }
.account-dialog .dialog-actions { display: flex; justify-content: end; gap: 8px; }
.account-dialog button { padding: 8px 16px; border: 1px solid var(--hairline-strong);
  border-radius: 4px; background: var(--surface-1); color: var(--ink); cursor: pointer; }
.account-dialog button.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.account-dialog button:disabled { opacity: .5; cursor: not-allowed; }
.account-dialog .dialog-error { color: var(--caution); font-size: 12px; min-height: 16px; }
.account-dialog.asset-setup { width: min(960px, calc(100vw - 24px)); overflow-y: auto; }
.asset-setup form { padding: 18px 24px 20px; gap: 18px; }
.asset-field { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: start; }
.asset-field > label { display: block; padding-top: 10px; white-space: nowrap; font-size: 14px; }
.asset-control { min-width: 0; }
.asset-input { display: flex; align-items: center; width: min(356px, 100%); height: 38px;
  border: 1px solid var(--hairline-strong); border-radius: 5px; }
.account-dialog .asset-input input { min-width: 0; height: 36px; border: 0; padding: 0 14px; background: transparent; }
.asset-input:focus-within { border-color: var(--primary); box-shadow: var(--ring); }
.account-dialog .asset-input input:focus { outline: none; box-shadow: none; }
.account-dialog .asset-input input[type='number'] { appearance: textfield; }
.account-dialog .asset-input input[type='number']::-webkit-inner-spin-button,
.account-dialog .asset-input input[type='number']::-webkit-outer-spin-button { appearance: none; margin: 0; }
.asset-input > span:last-child { flex: none; padding-right: 14px; font-size: 13px; }
.asset-input .asset-prefix { flex: none; padding-left: 14px; font-size: 13px; }
.asset-control small { display: block; margin-top: 5px; color: var(--ink-tertiary); font-size: 11px; line-height: 1.4; }
.asset-warning { margin: 0 0 0 120px; padding: 10px 14px; background: #fff8e7;
  color: var(--ink-tertiary); font-size: 12px; line-height: 1.5; }
.asset-warning strong { color: var(--caution); }
.init-label { padding-top: 8px; font-size: 14px; }
.init-radios { display: flex; align-items: center; gap: 18px; min-height: 38px; }
.account-dialog .init-radios label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.account-dialog .init-radios input { width: auto; height: auto; margin: 0; }
.init-stock-table { min-width: 0; }
.init-stock-head, .init-stock-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
  minmax(0, 1fr) 54px; align-items: center; gap: 10px; padding: 8px 6px; }
.init-stock-head { background: var(--surface-3); color: var(--ink-muted); font-size: 12px; }
.init-stock-row { border-bottom: 1px solid var(--hairline); }
.account-dialog .init-stock-row input { min-width: 0; }
.account-dialog .init-remove { padding: 4px; border: 0; background: transparent; color: var(--up); }
.account-dialog .init-add { margin-top: 8px; padding: 6px 8px; border: 0;
  background: transparent; color: var(--primary); }
.init-confirm-line { display: grid; grid-template-columns: 120px minmax(0, 1fr); font-size: 14px; }
.init-confirm-line b { font-weight: 500; }
.init-confirm-table { margin-left: 115px; }
.init-confirm-table .init-stock-head, .init-confirm-row { display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 9px 6px; }
.init-confirm-row { border-bottom: 1px solid var(--hairline); font-size: 13px; }
.init-confirm-stock small { display: block; margin-top: 2px; color: var(--ink-tertiary); font-size: 11px; }
.init-confirm-total { text-align: right; font-weight: 600; }
@media (max-width: 560px) {
  .asset-field { grid-template-columns: 1fr; gap: 4px; }
  .asset-field > label { padding-top: 0; }
  .asset-warning { margin-left: 0; }
  .init-radios { flex-wrap: wrap; }
  .init-stock-head { display: none; }
  .init-stock-row { grid-template-columns: 1fr 1fr; }
  .init-stock-row input[name='code'] { grid-column: 1 / -1; }
  .init-confirm-line { grid-template-columns: 1fr 1fr; }
  .init-confirm-table { margin-left: 0; overflow-wrap: anywhere; }
}
.transfer-modes { display: flex; gap: 16px; }
.transfer-modes label { display: flex; align-items: center; gap: 5px; }
.transfer-modes input { width: auto; height: auto; }
.asset-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.asset-metrics div { border-bottom: 1px solid var(--hairline); padding-bottom: 8px; }
.asset-metrics span { display: block; font-size: 11px; color: var(--ink-tertiary); }
.asset-metrics b { display: block; margin-top: 3px; font-size: 18px; font-weight: 600; }
.asset-section { margin-top: 18px; font-size: 12px; color: var(--ink-muted); }
.asset-section h4 { color: var(--ink); font-size: 12px; margin-bottom: 6px; }
.asset-section button { margin-top: 8px; }
.commission-row { display: flex; align-items: center; gap: 8px; }
.asset-section .commission-edit { display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: var(--ink-tertiary); font-size: 18px; line-height: 1; }
.asset-section .commission-edit:hover { background: var(--surface-3); color: var(--primary); }
.trade-quote { display: grid; gap: 8px; margin-top: 12px; padding: 12px 0;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); font-size: 12px; }
.trade-quote div { display: flex; justify-content: space-between; gap: 12px; }
.trade-quote strong { font-size: 14px; }

/* 列表自身滚动：股票多时出滚动条，用户区卡片固定在底部不被推走 */
.wp-list {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px; padding: 10px 16px 14px;
}
.wp-list::-webkit-scrollbar { width: 6px; }
.wp-list::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: 3px; }
.wp-list::-webkit-scrollbar-track { background: transparent; }
/* 股票卡片：时间、名称/代码、报价逐行排列，交易状态在底部单独展示。 */
.wl-row {
  position: relative; flex: none;
  display: grid; gap: 4px 6px; align-items: center; padding: 10px 12px;
  grid-template-columns: minmax(0, 1fr) 24px;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--surface-1); cursor: pointer;
  transition: border-color .12s, background .12s;
}
.wl-row:hover { border-color: var(--hairline-strong); background: var(--surface-2); }
.wl-row.holding { border-color: var(--primary-line); background: #FFFCFA; }
.wl-id { grid-column: 1; grid-row: 2; min-width: 0; display: flex; align-items: baseline; gap: 7px; }
.wl-id b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.wl-id .wl-code { flex: none; font-size: 11px; }
.wl-code {
  font-size: 10.5px; color: var(--ink-tertiary);
  font-family: var(--font-mono); letter-spacing: 0;
}
.wl-live { grid-column: 1; grid-row: 3; display: flex; align-items: baseline; gap: 8px; font-size: 15px; line-height: 1.35; }
.wl-price { font-weight: 600; letter-spacing: -.01em; }
.wl-chg, .wl-pnl { font-size: 12px; font-weight: 600; }
.wl-time { grid-column: 1 / -1; grid-row: 1; font-size: 11px; line-height: 1.3; color: var(--ink-tertiary); }
.wl-date { font-size: 10.5px; color: var(--ink-tertiary); }
.wl-none { font-size: 11px; color: var(--ink-tertiary); }
.wl-pos { grid-column: 1 / -1; display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 11px; line-height: 1.4; color: var(--ink-tertiary); }
.wl-info { display: inline-flex; flex: none; align-items: center; }
.wl-info-toggle { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.wl-info-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 50%; }
.wl-info-tip { position: fixed; inset: auto; margin: 0; width: max-content; max-width: min(200px, calc(100vw - 24px)); padding: 10px 12px; border: 1px solid var(--hairline-strong); border-radius: var(--radius-md); background: var(--surface-1); color: var(--ink-muted); box-shadow: var(--shadow-pop); font-size: 12px; line-height: 1.6; }
.wl-info-tip:popover-open { display: block; }

.wl-badge {
  font-size: 11px; font-weight: 500; letter-spacing: .02em;
  padding: 2px 9px; border-radius: 999px;
  background: var(--surface-3); color: var(--ink-muted);
}
.wl-badge.watch { background: var(--surface-3); color: var(--ink-muted); }
.wl-badge.hold { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.wl-badge.flat { background: var(--caution-soft); color: var(--caution); }

/* 更多按钮居于名称、报价两行的右侧中间，不挤占顶部时间。 */
.wl-more {
  grid-column: 2; grid-row: 2 / span 2;
  width: 24px; height: 28px; padding: 0;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-tertiary);
  font-family: inherit; font-size: 15px; line-height: 1; cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.wl-more:hover { border-color: var(--hairline-strong); color: var(--ink); background: var(--surface-1); }

/* ---- 「…」弹出的更多菜单（fixed 定位，避免被侧栏的滚动容器裁掉）---- */
.wl-menu {
  position: fixed; z-index: 80;
  min-width: 158px; padding: 5px;
  background: var(--surface-1);
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
}
.wl-menu button {
  display: block; width: 100%; text-align: left;
  padding: 7px 10px; border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-muted);
  font-family: inherit; font-size: 12.5px; cursor: pointer;
  transition: background .12s, color .12s;
}
.wl-menu button:hover { background: var(--surface-2); color: var(--ink); }
/* 紫＝买入侧，棕＝卖出侧；红只留给「删除」这一个破坏性动作 */
.wl-menu .wl-m-build { color: var(--primary); font-weight: 600; }
.wl-menu .wl-m-add { color: var(--primary); }
.wl-menu .wl-m-reduce { color: var(--caution); }
.wl-menu .wl-m-close { color: #8a4d12; }
.wl-menu .wl-m-records { color: var(--ink-muted); }
.wl-menu .wl-m-del { color: var(--up); }
.wl-menu .wl-m-del:hover { background: var(--up-soft); color: var(--up); }
.wl-menu-sep { height: 1px; margin: 5px 0; background: var(--hairline); }
.wl-menu-note { padding: 4px 10px 6px; font-size: 10.5px; color: var(--ink-tertiary); line-height: 1.5; }

/* 空时零占位（max-height 折叠），有消息才撑开，5 秒淡出 */
.wp-msg {
  max-height: 0; margin: 0 16px; overflow: hidden;
  font-size: 11.5px; color: var(--ink-tertiary);
  opacity: 0; transition: opacity .2s, max-height .2s, margin .2s;
}
.wp-msg.on { max-height: 48px; margin: 8px 16px 4px; opacity: 1; }
.wp-msg.err { color: var(--caution); }

/* 交易记录（渲染在操作面板里） */
.trade-sum {
  font-size: 11.5px; color: var(--ink-subtle); line-height: 1.6;
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
}
.trade-wrap { width: 100%; max-width: 100%; margin-top: 4px; overflow-x: auto; overflow-y: hidden; }

.trade-table { width: max-content; min-width: 920px; border-collapse: collapse; font-size: 12.5px; }
.trade-table th {
  text-align: left; font-weight: 500; font-size: 11px; letter-spacing: .02em;
  color: var(--ink-subtle); text-transform: uppercase; white-space: nowrap;
  padding: 7px 8px; background: var(--surface-2);
  border-bottom: 1px solid var(--hairline-strong);
}
.trade-table th:first-child { border-radius: var(--radius-sm) 0 0 0; }
.trade-table th:last-child { border-radius: 0 var(--radius-sm) 0 0; }
.trade-table td { padding: 8px; border-bottom: 1px solid var(--hairline); color: var(--ink-muted); }
.trade-table tr:last-child td { border-bottom: none; }
.trade-table .num { text-align: right; }
.trade-table .mono { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0; }

/* 交易类型：紫＝买入侧，棕＝卖出侧 */
.act-tag { font-size: 11px; font-weight: 500; letter-spacing: .02em; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.act-tag.build { background: #FFE9D9; color: #8C3700; font-weight: 600; }
.act-tag.add { background: var(--primary-soft); color: var(--primary); }
.act-tag.reduce { background: var(--caution-soft); color: var(--caution); }
.act-tag.close { background: #f7e9d5; color: #8a4d12; font-weight: 600; }
.trade-note { margin-top: 8px; font-size: 11px; color: var(--ink-tertiary); }

/* 同一交易记录面板中的两个视图 */
.records-tabs { display: flex; gap: 4px; position: sticky; top: -16px; z-index: 2;
  background: var(--surface-1); padding: 0 0 10px; border-bottom: 1px solid var(--hairline); }
.records-tabs button, .records-filter button, .records-more, .records-back {
  border: 1px solid var(--hairline); border-radius: var(--radius-md);
  background: var(--surface-1); color: var(--ink-muted);
  font: inherit; font-size: 12px; padding: 6px 10px; cursor: pointer;
}
.records-tabs button { flex: 1; }
.records-tabs button.on { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-line); font-weight: 600; }
.records-tabs button:hover, .records-filter button:hover, .records-more:hover, .records-back:hover { color: var(--primary); border-color: var(--primary); }
.records-tabs button:focus-visible, .records-filter button:focus-visible,
.records-more:focus-visible, .records-back:focus-visible, .cycle-row:focus-visible { outline: none; box-shadow: var(--ring); }
.records-filter { display: flex; gap: 6px; margin: 12px 0; }
.records-filter button { flex: none; white-space: nowrap; }
.records-filter input { width: 100%; min-width: 0; padding: 6px 8px; border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md); font: inherit; font-size: 12px; }
#records-view { padding-top: 10px; }
.cycle-row { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-bottom: 8px;
  padding: 10px 12px; border: 1px solid var(--hairline); border-radius: var(--radius-md);
  background: var(--surface-2); text-align: left; color: var(--ink-muted); font: inherit; font-size: 12px; cursor: pointer; }
.cycle-row:hover { border-color: var(--primary); }
.cycle-row span:first-child { display: flex; justify-content: space-between; gap: 6px; }
.cycle-row small, .cycle-detail small { color: var(--ink-tertiary); font-size: 11px; }
.cycle-row strong { color: var(--ink); }
.cycle-navigation { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cycle-navigation label { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-size: 12px; }
.cycle-navigation select { flex: 1; min-width: 0; max-width: 100%; height: 32px; padding: 0 6px;
  border: 1px solid var(--hairline); border-radius: var(--radius-sm); color: var(--ink);
  background: var(--surface-1); font: inherit; font-size: 11px; }
.cycle-navigation .records-more { width: auto; flex: none; margin: 0; white-space: nowrap; }
.records-more, .records-back { width: 100%; margin-bottom: 12px; }
.cycle-detail h3 { font-size: 15px; }
.cycle-detail p { margin: 6px 0 12px; color: var(--ink-subtle); font-size: 12px; }
.cycle-metrics { display: grid; gap: 8px; }
.cycle-metrics > div { display: flex; flex-direction: column; padding: 8px 10px;
  background: var(--surface-2); border-radius: var(--radius-md); }
.cycle-metrics span { color: var(--ink-subtle); font-size: 11px; }
.cycle-metrics b { font-size: 14px; font-variant-numeric: tabular-nums; }
.cycle-warnings { padding-left: 18px; color: var(--caution); font-size: 11.5px; }
.cycle-detail h4 { margin: 20px 0 10px; font-size: 14px; }
.review-facts { margin: 0; font-size: 12px; }
.review-facts > div { display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: 8px; padding: 5px 0; }
.review-facts dt { color: var(--ink-subtle); }
.review-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cycle-detail .review-result-note { margin-top: 10px; padding: 10px 0; border-top: 1px solid var(--hairline); color: var(--ink); line-height: 1.7; }
.review-timeline { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.review-timeline th, .review-timeline td { padding: 8px 3px; text-align: right; border-bottom: 1px solid var(--hairline); overflow-wrap: anywhere; }
.review-timeline th:first-child, .review-timeline td:first-child { text-align: left; width: 24%; }
.review-timeline th:nth-child(2) { width: 15%; }
.review-timeline small { display: block; margin-top: 3px; color: var(--ink-subtle); font-size: 10px; }
.review-details { font-size: 12px; }
.review-details summary, .review-evidence summary { cursor: pointer; color: var(--ink-muted); margin-bottom: 8px; }
.review-details summary:focus-visible, .review-evidence summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.review-points { padding-left: 18px; font-size: 12px; color: var(--ink); line-height: 1.7; }
.review-points li { margin: 8px 0; }
.review-evidence { margin-top: 3px; font-size: 11px; }
.review-evidence p { margin: 5px 0; }
.cycle-detail .review-scope { color: var(--ink-subtle); line-height: 1.7; }
.cycle-step { display: flex; flex-direction: column; gap: 2px; padding: 10px 0;
  border-top: 1px solid var(--hairline); font-size: 11.5px; }
.cycle-step span { color: var(--ink-subtle); }
.cycle-step strong { color: var(--ink); }
.cycle-step em { color: var(--caution); font-style: normal; }
.trade-recorded { display: block; font-size: 11px; color: var(--ink-tertiary); margin-top: 3px; }
.followup-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 11px; }
.followup-table th, .followup-table td { padding: 7px 3px; text-align: right; border-bottom: 1px solid var(--hairline); overflow-wrap: anywhere; }
.followup-table th:first-child, .followup-table td:first-child { text-align: left; }
.followup-table th:nth-child(2) { width: 31%; }
.followup-table small { display: block; font-size: 10px; color: var(--muted); }

/* ============================================================ 操作面板里的表单控件 */

.mf { margin-bottom: 16px; }
.trade-time-fields { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 10px; margin-bottom: 16px; }
.trade-time-fields .mf { margin-bottom: 0; min-width: 0; }
.trade-time-fields input, .trade-time-fields select {
  width: 100%; min-width: 0; height: 38px; padding: 0 10px;
  font-family: inherit; font-size: 14px; color: var(--ink);
  background: var(--surface-1); border: 1px solid var(--hairline-strong); border-radius: var(--radius-md);
  letter-spacing: 0;
}
.trade-time-fields input:focus, .trade-time-fields select:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.mf:last-child { margin-bottom: 0; }
.mf > label { display: block; font-size: 12px; font-weight: 500; letter-spacing: .01em; color: var(--ink-subtle); margin-bottom: 7px; }
.mf-inline { display: flex; align-items: center; gap: 8px; }
.mf-inline input {
  width: 150px; height: 38px; padding: 0 12px;
  font-family: inherit; font-size: 14px; color: var(--ink);
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-md);
  background: var(--surface-1); outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.mf-inline input::placeholder { color: var(--ink-tertiary); }
.mf-inline input:focus { border-color: var(--primary); box-shadow: var(--ring); }
.mf-inline .unit { font-size: 12px; color: var(--ink-tertiary); }
.mf-label { font-size: 12px; color: var(--ink-subtle); }
.mf-hint { margin-top: 7px; font-size: 11.5px; color: var(--ink-tertiary); line-height: 1.6; }
.mf-pct { margin-top: 8px; }

/* 档位选择：分段控件 —— 选中态靠「抬升」（深底里放白块），不靠换色 */
.mf-level {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  background: var(--surface-2); border-radius: var(--radius-md); padding: 3px;
}
.mf-level button {
  text-align: left; padding: 9px 12px;
  border: none; background: transparent; border-radius: var(--radius-sm);
  cursor: pointer; font-family: inherit;
  transition: background .12s, box-shadow .12s;
}
.mf-level button b { display: block; font-size: 13px; font-weight: 600; color: var(--ink-muted); letter-spacing: -.01em; }
.mf-level button span { display: block; margin-top: 3px; font-size: 11px; color: var(--ink-tertiary); line-height: 1.5; }
.mf-level button:hover { background: rgba(255, 255, 255, .6); }
.mf-level button.on { background: var(--surface-1); box-shadow: var(--shadow-raise); }
.mf-level button.on b { color: var(--primary); }
.mf-level button.on span { color: var(--ink-subtle); }

.mf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hairline); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 16px; }
.mf-item { background: var(--surface-2); padding: 10px 12px; }
.mf-item .k { display: block; font-size: 11px; color: var(--ink-subtle); }
.mf-item b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }

/* ---- 主区空状态：未分析时搜索框居中（设计稿 Frame 1） ---- */

.empty-state {
  height: 100%;
  min-height: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
}
#main:has(> #empty-state:not(.hidden)) > footer { display: none; }
/* 空状态搜索：输入框与「分析」按钮拼成一体的大胶囊，按钮贴右、占位更大 */
.es-form {
  display: flex; width: min(560px, 100%);
  border: 1px solid var(--hairline-strong); border-radius: 999px;
  background: var(--surface-1);
  transition: border-color .12s, box-shadow .12s;
}
.es-form:focus-within { border-color: var(--primary); box-shadow: var(--ring); }
.es-form input {
  flex: 1; min-width: 0; height: 48px; padding: 0 22px;
  border: none; border-radius: 999px 0 0 999px;
  font-family: inherit; font-size: 14.5px; color: var(--ink);
  background: transparent; outline: none;
}
.es-form input::placeholder { color: var(--ink-tertiary); }
.es-form button {
  flex: none; height: 48px; padding: 0 32px; margin: -1px -1px -1px 0;
  border: none; border-radius: 0 999px 999px 0;
  background: var(--primary); color: var(--on-primary);
  font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background .12s;
}
.es-form button:hover { background: var(--primary-hover); }
.es-form button:disabled { opacity: .5; cursor: not-allowed; }
.es-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.es-label { font-size: 12.5px; color: var(--ink-tertiary); }

/* 搜索联想浮层挂在 body，避免表单、侧栏布局裁剪。 */
.stock-search-popup {
  position: fixed; z-index: 105; display: flex; flex-direction: column;
  background: #fff; color: var(--ink); border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md); box-shadow: var(--shadow-float); overflow: hidden;
  font-size: 14px; text-align: left;
}
.stock-search-popup[hidden] { display: none; }
.stock-search-heading {
  flex: none; padding: 7px 12px; background: var(--surface-3); color: var(--ink-muted); font-size: 12px;
}
.stock-search-options { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; min-height: 0; }
.stock-search-options [role='option'] { padding: 11px 12px; cursor: pointer; overflow-wrap: anywhere; }
.stock-search-options [role='option']:hover,
.stock-search-options [aria-selected='true'] { background: var(--primary-soft); }
.stock-search-options span { color: var(--ink-muted); }
.stock-search-options .stock-search-name { color: inherit; white-space: pre-wrap; }
.stock-search-options mark { padding: 0; color: var(--primary); background: transparent; }

/* ============================================================ 响应式 */

/* 移动端自选抽屉：桌面不占视觉空间，窄屏才显示顶部栏与触发器。 */
.mobile-topbar, .mobile-sidebar-toggle, .sidebar-backdrop { display: none; }

@media (max-width: 900px) {
  .mf-level, .mf-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .mobile-topbar {
    display: flex; position: fixed; z-index: 102; inset: 0 0 auto;
    height: 52px; padding: 0 12px; align-items: center; justify-content: space-between;
    background: var(--surface-1); border-bottom: 1px solid var(--hairline);
  }
  .mobile-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
  .mobile-brand .logo { width: 36px; height: 36px; }
  .mobile-brand span { color: var(--ink); font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
  .sidebar {
    position: fixed; z-index: 104; inset: 0 auto 0 0;
    flex: none; width: min(288px, calc(100vw - 48px)); height: 100dvh;
    transform: translateX(-102%); transition: transform .2s ease;
    box-shadow: var(--shadow-float);
  }
  .shell.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-backdrop {
    display: block; position: fixed; z-index: 103; inset: 0;
    background: rgba(19, 21, 35, .32); opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
  }
  .shell.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
  .mobile-sidebar-toggle {
    display: inline-flex; width: 36px; height: 36px; padding: 0;
    align-items: center; justify-content: center; flex-direction: column; gap: 4px;
    border: 0; border-radius: var(--radius-md);
    background: transparent; cursor: pointer;
  }
  .mobile-sidebar-toggle span { width: 15px; height: 1.5px; border-radius: 2px; background: var(--ink-muted); }
  main { width: 100%; padding: 66px 16px 32px; }
  .databar { margin: -14px -16px 12px; padding: 8px 16px; }
  .op-panel.open { width: 296px; }
  .op-inner { width: 295px; }
  .risk-grid, .levels { grid-template-columns: 1fr; }
  .brand-text p { display: none; }
}

@media (max-width: 560px) {
  /* 小屏时所有操作面板独占视口，避免价格/股数/提交按钮被裁掉。 */
  .shell.panel-open .sidebar, .shell.panel-open main,
  .shell.panel-open .mobile-topbar, .shell.panel-open .mobile-sidebar-toggle,
  .shell.panel-open .sidebar-backdrop { display: none; }
  .shell.panel-open .op-panel.open { width: 100vw; }
  .shell.panel-open .op-inner { width: 100vw; }
  .trade-table th:nth-child(3), .trade-table td:nth-child(3) { display: none; }
  .price { font-size: 22px; }
  .pos-num { font-size: 22px; }
}

/* ============================================================ 独立认证页：原创几何角色动画 */
.auth-page .login-layer { position: static; display: block; min-height: 100dvh; padding: 0; background: var(--canvas); }
.auth-shell { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, min(50vw, 640px)) minmax(420px, 1fr); }
.auth-visual { position: relative; overflow: hidden; min-height: 100dvh; padding: 42px 48px; background: linear-gradient(145deg, #5A2100, #D65300 55%, #FF8A3D); color: #fff; }
.auth-visual::before { content: ''; position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(to bottom, #000, transparent 80%); }
.auth-visual-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; font-size: 32px; font-weight: 700; }
.auth-visual-brand img, .mobile-auth-brand img { display: block; width: 42px; height: 42px; border-radius: 12px; }
.mascot-stage { position: absolute; inset: 110px 10% 58px; min-height: 380px; }
.mascot { position: absolute; bottom: 0; transform-origin: bottom center; transition: transform .35s ease, height .35s ease; animation: mascot-breathe 4s ease-in-out infinite; }
.mascot-cube { left: 16%; width: 180px; height: 270px; border-radius: 28px 28px 8px 8px; background: #FFF0E8; transform: rotate(-3deg); }
.mascot-pillar { left: 42%; width: 130px; height: 340px; border-radius: 22px 22px 6px 6px; background: #3A1A0C; animation-delay: -.8s; }
.mascot-blob { left: 3%; width: 230px; height: 150px; border-radius: 120px 120px 8px 8px; background: #FFB06D; z-index: 3; animation-delay: -1.6s; }
.mascot-sun { right: 2%; width: 138px; height: 190px; border-radius: 72px 72px 6px 6px; background: #F4D365; z-index: 4; animation-delay: -2.4s; }
.mascot .eye { position: absolute; top: 34%; width: 22px; height: 22px; border-radius: 50%; background: #fff; overflow: hidden; transition: transform .25s ease, height .16s ease; }
.mascot .eye:first-child { left: 28%; }.mascot .eye:nth-child(2) { right: 28%; }
.mascot .eye b { position: absolute; left: 7px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: #25150E; transition: transform .12s ease-out; }
.mascot-blob .eye { top: 48%; }.mascot-sun .eye { top: 26%; }.mascot-sun em { position: absolute; left: 28%; right: 28%; top: 54%; height: 5px; border-radius: 8px; background: #6D4A16; }
.auth-shell.typing-name .mascot-cube { transform: translateX(28px) skewX(-8deg); }.auth-shell.typing-name .mascot-pillar { transform: translateX(16px) skewX(6deg); }.auth-shell.typing-name .mascot-blob { transform: skewX(-5deg); }
.auth-shell.typing-password .mascot-cube .eye, .auth-shell.typing-password .mascot-pillar .eye { height: 3px; transform: translateY(10px); }.auth-shell.typing-password .mascot-cube { transform: translateX(34px) rotate(4deg); }.auth-shell.typing-password .mascot-pillar { transform: translateX(-12px) rotate(-3deg); }
.auth-shell.showing-password .mascot .eye { height: 22px; transform: none; }.auth-shell.showing-password .mascot-cube { transform: translateX(12px) rotate(-1deg); }
@keyframes mascot-breathe { 0%,100% { margin-bottom: 0; } 50% { margin-bottom: 8px; } }
.auth-visual-note { position: absolute; bottom: 100px; left: 48px; margin: 0; color: rgba(255,255,255,.72); font-size: 13px; }
.auth-form-panel { display: flex; align-items: center; justify-content: center; padding: 40px; background: var(--surface-1); }
.auth-form-panel .login-card { width: min(400px, 100%); max-height: none; padding: 0; border: 0; box-shadow: none; }
.mobile-auth-brand { display: none; align-items: center; justify-content: center; gap: 9px; margin-bottom: 44px; font-weight: 700; }
.password-input { position: relative; display: block; }.password-input input { padding-right: 42px; }.password-input button { position: absolute; right: 9px; top: 50%; width: 24px; height: 24px; transform: translateY(-50%); border: 0; background: transparent; color: var(--ink-tertiary); cursor: pointer; }
@media (max-width: 860px) { .auth-shell { display: block; }.auth-visual { display: none; }.auth-form-panel { min-height: 100dvh; align-items: flex-start; padding: 28px 20px; }.mobile-auth-brand { display: flex; justify-content: flex-start; margin-bottom: 52px; }.auth-form-panel .login-card { width: min(400px, 100%); } }
@media (prefers-reduced-motion: reduce) { .mascot { animation: none; transition: none; }.mascot .eye b { transition: none; } }

/* 认证角色构图微调：共用地面线，后排更高，向右看时动作更明确。 */
.mascot-stage { min-height: 500px; }
.mascot { bottom: 0; margin-bottom: 0 !important; animation: none; }
/* 构图参照：最高的浅色角色在最后方，前排角色只遮住它下半部分，顶部完整露出。 */
.mascot-cube { left: 29%; width: 196px; height: 470px; z-index: 1; clip-path: polygon(26% 0, 100% 0, 70% 100%, 0 100%); }
.mascot-pillar { left: 46%; width: 146px; height: 340px; z-index: 2; }
.mascot-blob { left: 1%; width: 244px; height: 165px; z-index: 3; }
.mascot-sun { right: 1%; width: 146px; height: 210px; z-index: 4; }
.auth-shell.typing-name .mascot-cube { transform: translateX(76px) rotate(-10deg) skewX(-7deg); }
.auth-shell.typing-name .mascot-pillar { transform: translateX(54px) rotate(7deg) skewX(7deg); }
.auth-shell.typing-name .mascot-blob { transform: translateX(48px) skewX(-8deg); }
.auth-shell.typing-name .mascot-sun { transform: translateX(22px) rotate(5deg); }
.auth-shell.typing-password .mascot-cube { transform: translateX(66px) rotate(8deg); }
.auth-shell.typing-password .mascot-pillar { transform: translateX(34px) rotate(-6deg); }
/* 角色的底部永远固定在同一基线：只允许水平位移和 X 轴倾斜，不做旋转或上下位移。 */
.mascot-cube, .mascot-pillar, .mascot-blob, .mascot-sun { transform: none; }
.auth-shell.typing-name .mascot-cube { transform: translateX(76px) skewX(-7deg); }
.auth-shell.typing-name .mascot-pillar { transform: translateX(54px) skewX(7deg); }
.auth-shell.typing-name .mascot-blob { transform: translateX(48px) skewX(-8deg); }
.auth-shell.typing-name .mascot-sun { transform: translateX(22px) skewX(4deg); }
.auth-shell.typing-password .mascot-cube { transform: translateX(66px) skewX(7deg); }
.auth-shell.typing-password .mascot-pillar { transform: translateX(34px) skewX(-6deg); }
.auth-shell.showing-password .mascot-cube { transform: translateX(12px) skewX(-1deg); }

/* 认证角色最终构图：高低错落、前后遮挡，但四张脸始终可读。 */
.mascot-stage { min-height: 540px; }
.mascot-cube { left: 25%; width: 230px; height: 500px; z-index: 1; clip-path: none; border-radius: 30px 30px 8px 8px; transform: skewX(-11deg); }
.mascot-pillar { left: 47%; width: 156px; height: 385px; z-index: 2; }
.mascot-blob { left: 0; width: 260px; height: 170px; z-index: 3; }
.mascot-sun { right: 0; width: 160px; height: 218px; z-index: 4; }
/* 白色后排的眼睛增加深色轮廓；眼位整体上移。 */
.mascot-cube .eye { top: 21%; border: 3px solid #3A1A0C; }
.mascot-pillar .eye { top: 22%; }
/* 前排橙、黄角色只用黑色瞳点，不再使用白色眼球。 */
.mascot-blob .eye, .mascot-sun .eye { width: 14px; height: 14px; background: #3A1A0C; }
.mascot-blob .eye b, .mascot-sun .eye b { display: none; }
.auth-shell.typing-name .mascot-cube { transform: translateX(82px) skewX(-18deg); }
.auth-shell.typing-name .mascot-pillar { transform: translateX(58px) skewX(8deg); }
.auth-shell.typing-password .mascot-cube { transform: translateX(70px) skewX(-4deg); }
/* 昵称获得焦点：四个角色统一看向右侧表单，身体与瞳孔同步右偏。 */
.auth-shell.typing-name .mascot-cube .eye b,
.auth-shell.typing-name .mascot-pillar .eye b { transform: translate(6px, 0) !important; }
.auth-shell.typing-name .mascot-blob .eye,
.auth-shell.typing-name .mascot-sun .eye { transform: translateX(5px); }
/* 输入隐藏密码：角色整体轻微左倾，并统一闭眼回避。 */
.auth-shell.typing-password .mascot-cube { transform: translateX(-18px) skewX(-8deg); }
.auth-shell.typing-password .mascot-pillar { transform: translateX(-12px) skewX(-7deg); }
.auth-shell.typing-password .mascot-blob { transform: translateX(-10px) skewX(-6deg); }
.auth-shell.typing-password .mascot-sun { transform: translateX(-8px) skewX(-5deg); }
.auth-shell.typing-password .mascot .eye { height: 3px; border-radius: 4px; transform: translateY(8px); }
.auth-shell.typing-password .mascot .eye b { display: none; }
.auth-shell.typing-password .mascot-blob .eye,
.auth-shell.typing-password .mascot-sun .eye { width: 20px; background: #3A1A0C; }
/* 默认态全部直立；褐色后排略右移，让右侧黄色前排遮住它的一部分。 */
.mascot-cube { transform: none; }
.mascot-pillar { left: 51%; }
.mascot-sun { right: 0; width: 170px; }

/* 原创角色按参考的高低层次布局：高后排、深色中排、左右两个前排。 */
.mascot-stage { inset: auto; left: 0; right: 0; bottom: 42px; height: 540px; min-height: 540px; }
.mascot { bottom: 0; margin: 0 !important; animation: none; }
.mascot-cube { left: 27%; width: 218px; height: 500px; z-index: 1; border-radius: 30px 30px 8px 8px; transform: none; }
.mascot-pillar { left: 51%; width: 142px; height: 350px; z-index: 2; }
.mascot-blob { left: 0; width: 238px; height: 260px; z-index: 3; }
.mascot-sun { right: 0; width: 154px; height: 210px; z-index: 4; }
.mascot-cube .eye { top: 20%; border: 3px solid #3a1a0c6e; }
.mascot-pillar .eye { top: 22%; }
.mascot-blob .eye, .mascot-sun .eye { width: 14px; height: 14px; background: #3A1A0C; }
.mascot-blob .eye b, .mascot-sun .eye b { display: none; }
/* 每个角色有各自的右看姿态，外层基线始终不变。 */
.auth-shell.typing-name .mascot-cube { transform: translateX(78px) skewX(-10deg); }
.auth-shell.typing-name .mascot-pillar { transform: translateX(58px) skewX(8deg); }
.auth-shell.typing-name .mascot-blob { transform: translateX(44px) skewX(-7deg); }
.auth-shell.typing-name .mascot-sun { transform: translateX(24px) skewX(5deg); }
.auth-shell.typing-name .mascot-cube .eye b, .auth-shell.typing-name .mascot-pillar .eye b { transform: translate(6px, 0) !important; }
.auth-shell.typing-name .mascot-blob .eye, .auth-shell.typing-name .mascot-sun .eye { transform: translateX(5px) !important; }
/* 密码隐藏状态：全体向左轻倾并闭眼。 */
.auth-shell.typing-password .mascot-cube { transform: translateX(-14px) skewX(-7deg); }
.auth-shell.typing-password .mascot-pillar { transform: translateX(-10px) skewX(-6deg); }
.auth-shell.typing-password .mascot-blob { transform: translateX(-8px) skewX(-5deg); }
.auth-shell.typing-password .mascot-sun { transform: translateX(-6px) skewX(-4deg); }
.auth-shell.typing-password .mascot .eye, .mascot-stage.blinking .mascot .eye { height: 3px; border-radius: 4px; transform: translateY(8px) !important; }
.auth-shell.typing-password .mascot .eye b { display: none; }
.auth-shell.typing-password .mascot-blob .eye, .auth-shell.typing-password .mascot-sun .eye, .mascot-stage.blinking .mascot-blob .eye, .mascot-stage.blinking .mascot-sun .eye { width: 20px; background: #3A1A0C; }
.auth-shell.showing-password .mascot .eye { height: 22px; transform: none !important; }
.auth-shell.showing-password .mascot-blob .eye, .auth-shell.showing-password .mascot-sun .eye { width: 14px; }

/* 角色贴地一侧使用直角，强化同一水平基线。 */
.mascot-cube { border-radius: 30px 30px 0 0; }
.mascot-pillar { border-radius: 22px 22px 0 0; }
.mascot-blob { border-radius: 120px 120px 0 0; }
.mascot-sun { border-radius: 72px 72px 0 0; }

/* 后排两位角色的眼睛上移。 */
.mascot-cube .eye, .mascot-pillar .eye { top: 10%; }

/* 每个角色通过内阴影产生体积感，不改变外轮廓或基线。 */
.mascot { box-shadow: inset 12px 0 18px rgba(255, 255, 255, .16), inset -16px -18px 28px rgba(58, 26, 12, .20); }

/* 已确认的角色尺寸与位置。 */
.mascot-cube { border-radius: 100px 100px 0 0; }
.mascot-pillar { border-radius: 100px 100px 0 0; }
.mascot-cube .eye, .mascot-pillar .eye { top: 15%; }
.mascot-blob { left: 70px; width: 200px; height: 260px; z-index: 3; }
.mascot-sun { right: 90px; width: 154px; height: 210px; z-index: 4; }

/* 角色舞台与最终前排位置；底线固定，角色所有姿态以底部为变换原点。 */
.mascot-stage { inset: auto; left: 20px; right: 20px; bottom: 132px; height: 540px; min-height: 540px; border-bottom: 5px solid #ffffff6b; }
.mascot-sun { right: 50px; width: 154px; height: 210px; z-index: 4; }
.mascot-blob { left: 40px; width: 200px; height: 260px; z-index: 3; }
.mascot { bottom: 0; transform-origin: center bottom; }

/* 所有输入姿态只倾斜，角色底部的水平坐标绝不横移。 */
.auth-shell.typing-name .mascot-cube { transform: skewX(-10deg); }
.auth-shell.typing-name .mascot-pillar { transform: skewX(8deg); }
.auth-shell.typing-name .mascot-blob { transform: skewX(-7deg); }
.auth-shell.typing-name .mascot-sun { transform: skewX(5deg); }
.auth-shell.typing-password .mascot-cube { transform: skewX(-7deg); }
.auth-shell.typing-password .mascot-pillar { transform: skewX(-6deg); }
.auth-shell.typing-password .mascot-blob { transform: skewX(-5deg); }
.auth-shell.typing-password .mascot-sun { transform: skewX(-4deg); }

/* 跟随状态由 rAF 自己插值，关闭 CSS transition 避免二次滞后。 */
.mascot-stage.tracking .mascot,
.mascot-stage.tracking .eye,
.mascot-stage.tracking .eye b { transition: none; }
.mascot-blob .eye { top: 30%; }
/* 白色高角色本体已右倾，瞳孔只做很小的右看位移，避免贴边。 */
.auth-shell.typing-name .mascot-cube .eye b { transform: translate(2px, 0) !important; }
@media (max-width: 860px) {
  .auth-form-panel { position: relative; padding: 96px 20px 32px; }
  .mobile-auth-brand { position: absolute; top: 20px; left: 20px; margin: 0; }
}

/* 窄屏回到独立卡片登录布局；Logo 脱离表单容器，固定在页面左上。 */
@media (max-width: 860px) {
  .auth-shell { position: relative; min-height: 100dvh; }
  .auth-page .login-layer { display: block; padding: 0; }
  .auth-form-panel { min-height: auto; align-items: initial; justify-content: initial; padding: 35% 20px 32px; background: var(--canvas); }
  .mobile-auth-brand { position: absolute; z-index: 2; top: 20px; left: 20px; margin: 0; }
  .auth-form-panel .login-card { width: min(400px, 100%); padding: 26px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface-1); box-shadow: var(--shadow-pop); }
}

/* 移动端顶部搜索：图标状态与输入状态平滑切换。 */
.mobile-topbar-actions, .mobile-search-toggle, .mobile-header-search { display: none; }
.db-meta, .db-actions { display: flex; align-items: center; gap: 12px; }
.db-actions { margin-left: auto; }
.mobile-track-btn { display: none; }
@media (max-width: 720px) {
  .mobile-topbar { overflow: hidden; }
  .mobile-topbar-actions { display: flex; align-items: center; gap: 8px; transition: opacity .18s ease, transform .18s ease; }
  .mobile-search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink-muted); cursor: pointer; }
  .mobile-header-search { display: flex; position: absolute; inset: 8px 12px; opacity: 0; pointer-events: none; transform: translateY(-8px) scale(.98); transition: opacity .2s ease, transform .2s ease; }
  .mobile-header-search input { width: 100%; padding: 0 12px; border: 1px solid var(--primary-line); border-radius: var(--radius-md); background: var(--surface-1); color: var(--ink); font: inherit; outline: none; box-shadow: var(--shadow-raise); }
  .mobile-header-search input:focus { border-color: var(--primary); box-shadow: var(--ring); }
  .mobile-topbar.search-open .mobile-brand, .mobile-topbar.search-open .mobile-topbar-actions { opacity: 0; transform: translateX(14px); pointer-events: none; }
  .mobile-topbar.search-open .mobile-header-search { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
  .databar { display: block; min-height: 46px; }
  .databar .db-search { display: none; }
  .databar .db-left, .databar #db-status { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap; }
  .databar .db-meta { min-width: 0; gap: 8px; overflow: hidden; }
  .databar .db-actions { flex: none; gap: 6px; margin-left: auto; }
  .databar .db-actions button { padding: 0 8px; white-space: nowrap; }
  .databar.non-live .db-meta > :not(.phase) { display: none; }
}
@media (max-width: 720px) {
  .mobile-topbar .mobile-brand { transition: opacity .18s ease, transform .18s ease; }
  .mobile-topbar .mobile-sidebar-toggle { position: static; z-index: auto; top: auto; left: auto; flex: none; box-shadow: none; }
}

/* 移动侧栏本身层级较高，设置与更多菜单必须浮在它之上。 */
@media (max-width: 720px) {
  .wl-menu { z-index: 110; }
}


/* 主内容区是唯一纵向滚动容器：外层裁切横向溢出，main 负责承接超高内容。 */
.shell { height: 100dvh; }
main { height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
#result { min-height: 0; }
@media (max-width: 720px) {
  .mobile-refresh-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink-muted); cursor: pointer; }
  .mobile-refresh-toggle:disabled { opacity: .42; cursor: default; }
  .mobile-refresh-toggle.refreshing svg { animation: mobile-refresh-spin .75s linear infinite; }
  .databar #btn-refresh, .conclusion .track-btn { display: none; }
  .databar .mobile-track-btn:not([hidden]) { display: inline-flex; align-items: center; border-color: var(--primary); color: var(--on-primary); background: var(--primary); }
  .databar .mobile-track-btn:hover { border-color: var(--primary-hover); background: var(--primary-hover); }
  /* 跟随实际结果区的显示状态，不因上一次查询留下的 currentQuery 而误显示。 */
  .shell:has(#result.hidden) .mobile-search-toggle,
  .shell:has(#result.hidden) .mobile-refresh-toggle { display: none; }
}
@keyframes mobile-refresh-spin { to { transform: rotate(360deg); } }