/* theme.css — P1-9 视觉体系收敛 + P0/P1/P2 新组件样式。
   覆盖顺序在所有既有样式之后，因此这里只做 token 覆盖与新增组件，
   不重复既有布局规则。主题由 index.html 头部内联脚本设置
   data-theme / data-updown，避免首帧闪烁。 */

/* ---- 涨跌语义色（--up/--down）：默认 A 股口径红涨绿跌 ---- */
:root {
  --up: var(--red);
  --down: var(--green);
  --up-soft: var(--red-soft);
  --down-soft: var(--green-soft);
  --chart-line-main: #3b82f6;
  --skeleton-wave: rgba(148, 163, 190, .18);
}
html[data-updown="intl"] {
  --up: #087747;
  --down: #bd2638;
  --up-soft: #e9f7f0;
  --down-soft: #fff0f1;
}

.pwa-boundary { min-height:32px; padding:6px 24px; border-bottom:1px solid var(--line); color:var(--muted); background:var(--surface); display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; }
.workbench-overview { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border:1px solid var(--line); background:var(--surface); margin:0 0 14px; }
.workbench-overview > * { min-width:0; min-height:82px; padding:12px; border:0; border-right:1px solid var(--line); border-radius:0; background:transparent; color:inherit; text-align:left; display:flex; flex-direction:column; justify-content:center; gap:4px; }
.workbench-overview > *:last-child { border-right:0; }
.workbench-overview > button { cursor:pointer; }
.workbench-overview > button:hover { background:var(--surface-soft); }
.workbench-overview span,.workbench-overview small { color:var(--muted); font-size:12px; }
.workbench-overview strong { font-size:16px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.workbench-overview .overview-clear { border:0; padding:0; background:transparent; color:var(--link); text-align:left; font-size:12px; cursor:pointer; }
.market-focus-strip { display:flex; gap:8px; overflow-x:auto; padding:4px 0 12px; margin-bottom:8px; }
.market-focus-strip[hidden] { display:none; }
.market-focus-strip button { flex:0 0 170px; padding:10px 12px; display:flex; flex-direction:column; gap:4px; text-align:left; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--text); cursor:pointer; }
.market-focus-strip button[aria-pressed="true"] { border-color:var(--blue); background:var(--surface-soft); }
.market-focus-strip button:disabled { cursor:default; }
.market-focus-strip strong { font-size:16px; font-variant-numeric:tabular-nums; }
.market-focus-strip small { font-size:12px; color:var(--muted); line-height:1.5; }
.impact-group-link,.impact-fund-row button,[data-calendar-fund] { border:0; padding:0; background:transparent; color:var(--link); text-align:left; cursor:pointer; }
.market-fund-impact .table-wrap { margin-top:10px; max-height:440px; }
.market-fund-impact tbody tr.active { background:var(--surface-soft); }
.impact-heatmap { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin-top:12px; }
.impact-tile { min-width:0; min-height:110px; padding:12px; border:1px solid var(--line); border-radius:6px; display:flex; flex-direction:column; align-items:flex-start; gap:5px; color:var(--text); background:var(--surface-soft); text-align:left; cursor:pointer; }
.impact-tile.positive { background:var(--up-soft); }
.impact-tile.negative { background:var(--down-soft); }
.impact-tile[aria-pressed="true"] { outline:2px solid var(--blue); outline-offset:-2px; }
.impact-tile.positive b { color:var(--up); }
.impact-tile.negative b { color:var(--down); }
.impact-tile strong { overflow-wrap:anywhere; }
.impact-tile span,.impact-tile small { font-size:12px; color:var(--text); }
.impact-holdings { margin-top:12px; }
.impact-fund-detail { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.impact-fund-row { display:grid; grid-template-columns:minmax(180px,1.4fr) repeat(4,minmax(120px,1fr)); gap:10px; align-items:center; min-height:48px; border-bottom:1px solid var(--line); font-size:12px; }
.impact-fund-row button { display:flex; flex-direction:column; gap:2px; }
.impact-fund-row small { color:var(--muted); }
.news-event-group { border-bottom:1px solid var(--line); }
.news-event-group summary { min-height:46px; display:grid; grid-template-columns:100px minmax(0,1fr) auto; gap:12px; align-items:center; cursor:pointer; }
.news-event-group .news-sources { display:flex; flex-wrap:wrap; gap:12px; padding:8px 0 12px 112px; }
.news-event-group .news-link-badges { padding-left:112px; }
.calendar-ranges { margin-bottom:10px; }
.calendar-events { display:grid; gap:0; border-top:1px solid var(--line); }
.calendar-event { display:grid; grid-template-columns:170px minmax(0,1fr); gap:16px; padding:14px 0; border-bottom:1px solid var(--line); }
.calendar-event.planned { border-left:3px solid var(--blue); padding-left:10px; }
.calendar-event.published { border-left:3px solid var(--green); padding-left:10px; }
.calendar-event-time { display:flex; flex-direction:column; gap:4px; font-variant-numeric:tabular-nums; }
.calendar-event-time span,.calendar-event small { color:var(--muted); font-size:12px; }
.calendar-event h4 { margin:0 0 6px; font-size:14px; }
.calendar-values { display:flex; gap:12px; flex-wrap:wrap; font-variant-numeric:tabular-nums; font-size:12px; }
.calendar-history { margin-top:12px; }
.search-result .decision-summary { grid-column:2 / -1; border-top:1px solid var(--line); padding-top:8px; min-width:0; }
.decision-summary > summary { color:var(--muted); font-size:12px; cursor:pointer; overflow-wrap:anywhere; }
.decision-summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding-top:10px; }
.decision-summary-grid > div { min-width:0; }
.decision-summary-grid span,.decision-summary-grid small,.decision-summary-pending { display:block; color:var(--muted); font-size:12px; }
.decision-summary-grid strong { display:block; margin:3px 0; font-size:13px; }
.portfolio-import-audit { margin:12px 0; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.import-audit-counts { display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; margin:10px 0; font-variant-numeric:tabular-nums; }
.import-audit-counts strong:nth-child(2) { color:var(--warning,#8a5a00); }
.import-audit-counts strong:nth-child(3),.import-error { color:var(--danger,#a12727); }
.alert-monitor-state { margin:10px 0; padding:10px 12px; border-left:3px solid var(--accent); background:var(--surface-soft,var(--panel)); }
.history-event-controls { display:flex; flex-wrap:wrap; gap:8px 16px; margin:8px 0; }
.history-event-controls label { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.history-events { margin-top:8px; }
.history-events article { padding:8px 0; border-top:1px solid var(--line); }
.history-events article p,.history-events article small { display:block; margin:3px 0; color:var(--muted); overflow-wrap:anywhere; }
.history-event-line { stroke:var(--muted); stroke-width:1; stroke-dasharray:4 3; }
.recent-objects { display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); }
.recent-objects > span { color:var(--muted); font-size:12px; padding-top:5px; }
#recent-objects-list { display:flex; flex-wrap:wrap; gap:6px; }
.recent-objects button { border:1px solid var(--line); background:var(--panel); color:var(--text); padding:4px 8px; border-radius:4px; font-size:12px; }
.accuracy-progress { display:grid; grid-template-columns:1fr 160px minmax(300px,2fr); gap:12px; align-items:start; padding:12px 0; margin-bottom:12px; border-bottom:1px solid var(--line); }
.accuracy-progress > div { min-width:0; }
.accuracy-progress span,.accuracy-progress small { color:var(--muted); font-size:12px; }
.accuracy-progress strong { display:block; margin-top:4px; font-size:13px; overflow-wrap:anywhere; }
.accuracy-progress > small { grid-column:1/-1; }
.recent-runs { padding:10px 0 14px; border-bottom:1px solid var(--line); margin-bottom:14px; }
.recent-runs .section-head { margin-bottom:8px; }
.recent-runs .section-head h3 { font-size:14px; }
#backtest-recent-list { display:flex; gap:8px; flex-wrap:wrap; }
.recent-run { min-height:48px; max-width:300px; padding:7px 10px; border:1px solid var(--line); background:var(--surface); color:inherit; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:3px; }
.recent-run:hover { border-color:var(--line-strong); }
.recent-run small { color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
@media (max-width: 760px) {
  .pwa-boundary { padding:6px 12px; }
  .workbench-overview { grid-template-columns:repeat(5,140px) 180px; overflow-x:auto; }
  .workbench-overview > * { min-height:78px; padding:8px; gap:2px; line-height:18px; }
  .workbench-overview strong { font-size:14px; line-height:20px; }
  .impact-fund-row { grid-template-columns:1fr 1fr; padding:10px 0; }
  .impact-fund-row > *:nth-child(n+4) { color:var(--muted); }
  .news-event-group summary { grid-template-columns:72px minmax(0,1fr); }
  .news-event-group .news-provider { grid-column:2; }
  .news-event-group .news-sources,.news-event-group .news-link-badges { padding-left:0; }
  .calendar-event { grid-template-columns:1fr; gap:8px; }
  .search-result .decision-summary { grid-column:1 / -1; }
  .decision-summary-grid { grid-template-columns:1fr; }
  .accuracy-progress { grid-template-columns:1fr 1fr; }
  .accuracy-progress > div:nth-child(3) { grid-column:1/-1; }
}

/* 所有以涨跌为语义的颜色一律走 --up/--down，按钮/徽章的成败色不受影响 */
.positive { color: var(--up) !important; }
.negative { color: var(--down) !important; }
.market-chart-line.positive { stroke: var(--up); }
.market-chart-line.negative { stroke: var(--down); }
.market-chart-area.positive { fill: color-mix(in srgb, var(--up) 8%, transparent); }
.market-chart-area.negative { fill: color-mix(in srgb, var(--down) 8%, transparent); }
.market-chart-dot.positive { fill: var(--up); }
.market-chart-dot.negative { fill: var(--down); }
.market-spark.positive .area { fill: var(--up); }
.market-spark.negative .area { fill: var(--down); }
.market-spark.positive .line { stroke: var(--up); }
.market-spark.negative .line { stroke: var(--down); }
.chart-line.return { stroke: var(--up); }
.chart-line.drawdown { stroke: var(--down); }
.chart-area.return { fill: color-mix(in srgb, var(--up) 8%, transparent); }
.chart-area.drawdown { fill: color-mix(in srgb, var(--down) 8%, transparent); }
.tone-up { color: var(--up); }
.tone-down { color: var(--down); }

/* ---- 暗色模式（P1-9）：覆盖 app.css 的根 token ---- */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e131f;
  --panel: #161d2d;
  --panel-2: #1c2436;
  --panel-3: #161d2d;
  --panel-solid: #161d2d;
  --surface: #161d2d;
  --border: #2a3550;
  --line: #2a3550;
  --line-soft: #222c43;
  --line-strong: #4a5b7d;
  --text: #e6ebf5;
  --muted: #94a2bc;
  --green: #2bb58a;
  --red: #f0606f;
  --amber: #d9a441;
  --blue: #6c8cff;
  --green-soft: rgba(43, 181, 138, .15);
  --red-soft: rgba(240, 96, 111, .15);
  --amber-soft: rgba(217, 164, 65, .16);
  --blue-soft: rgba(108, 140, 255, .17);
  --up-soft: var(--red-soft);
  --down-soft: var(--green-soft);
  --chart-line-main: #6c8cff;
  --skeleton-wave: rgba(148, 163, 190, .10);
}
html[data-theme="dark"][data-updown="intl"] {
  --up: #37c48f;
  --down: #f0606f;
  --up-soft: rgba(55, 196, 143, .15);
  --down-soft: rgba(240, 96, 111, .15);
}

/* 既有样式中残留的浅色硬编码在暗色下修正 */
html[data-theme="dark"] tbody tr:hover { background: var(--panel-2); }
html[data-theme="dark"] .search-result:hover,
html[data-theme="dark"] .rank-row:hover { background: var(--panel-2); border-color: var(--line-strong); }
html[data-theme="dark"] .btn.primary { color: var(--action-text); }
html[data-theme="dark"] .toast { background: #26314a; border: 0; }
html[data-theme="dark"] .skip-link { background: #161d2d; color: #e6ebf5; border-color: #e6ebf5; }
html[data-theme="dark"] .help-popover { box-shadow: 0 12px 32px rgba(0, 0, 0, .6); }
html[data-theme="dark"] .toolbar-disclosure-content { box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }

/* ---- 主题切换控件（P1-9）---- */
.theme-controls { display: flex; align-items: center; gap: 6px; }
.theme-controls .btn.icon { width: 34px; height: 34px; font-size: 15px; }
.updown-toggle {
  min-height: 34px; padding: 0 9px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel-2); color: var(--muted); font-size: 12px; white-space: nowrap;
}
.updown-toggle:hover { border-color: var(--line-strong); color: var(--text); }

/* ---- Toast 类型分级（P0-4）---- */
.toast { border-left: 4px solid transparent; }
.toast.success { border-left-color: var(--green); }
.toast.error { border-left-color: var(--red); }
.toast.warning { border-left-color: var(--amber); }
.toast.info { border-left-color: var(--blue); }
.toast button { color: inherit; opacity: .92; }
.toast button:hover { opacity: 1; }

/* ---- 统一确认弹窗（P0-4，替代原生 confirm）---- */
.app-confirm-dialog {
  width: min(480px, calc(100vw - 32px)); padding: 0;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); color: var(--text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}
.app-confirm-dialog::backdrop { background: rgba(10, 14, 24, .45); }
.app-confirm-title { margin: 0; padding: 16px 18px 4px; font-size: 16px; font-weight: 680; }
.app-confirm-text { margin: 0; padding: 6px 18px 4px; color: var(--muted); font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.app-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px 16px; }

/* ---- 骨架屏（P1-6）---- */
.skeleton { position: relative; overflow: hidden; background: var(--panel-2); border-radius: 6px; }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--skeleton-wave), transparent);
  animation: skeleton-wave 1.2s infinite;
}
@keyframes skeleton-wave { 100% { transform: translateX(100%); } }
.skeleton-list { display: grid; gap: 8px; padding: 2px 0; }
.skeleton-row { height: 78px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); }
.skeleton-detail { display: grid; gap: 12px; }
.skeleton-band { height: 96px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.skeleton-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.skeleton-kpi { height: 96px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.skeleton-text { height: 14px; margin: 6px 0; }
.skeleton-note { margin-top: 8px; color: var(--muted); font-size: 12px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }

/* ---- 首次使用引导卡（P0-2）---- */
.onboarding-card {
  margin: 0 0 16px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel);
}
.onboarding-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.onboarding-head strong { font-size: 15px; }
.onboarding-head button { border: 0; background: transparent; color: var(--muted); font-size: 12px; }
.onboarding-head button:hover { color: var(--text); }
.onboarding-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.onboarding-step {
  display: grid; gap: 8px; align-content: start; padding: 14px;
  border: 1px solid var(--line-soft); border-radius: 8px; background: var(--panel-2);
}
.onboarding-step b { color: var(--blue); font-size: 12px; }
.onboarding-step span { color: var(--muted); font-size: 12px; line-height: 1.6; }
.onboarding-step .btn { justify-self: start; min-height: 34px; }
@media (max-width: 900px) { .onboarding-steps { grid-template-columns: 1fr; } }

/* ---- 自选估值页：视图切换 + 行情表（P0-1）---- */
.list-pane-head-tools { display: flex; align-items: center; gap: 10px; }
.list-view-toggle { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel-2); }
.list-view-toggle button { min-height: 26px; padding: 0 10px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 12px; }
.list-view-toggle button.active { background: var(--blue-soft); color: var(--blue); font-weight: 650; }
.estimate-table-wrap {
  max-height: calc(100vh - 210px); overflow: auto;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
}
table.estimate-table { min-width: 820px; }
.estimate-table th { position: sticky; top: 0; z-index: 2; background: var(--panel-2); cursor: pointer; user-select: none; white-space: nowrap; }
.estimate-table th[disabled] { cursor: default; }
.estimate-table th .th-arrow { display: inline-block; width: 12px; color: var(--blue); }
.estimate-table td { cursor: pointer; }
.estimate-table td.cell-actions { cursor: default; white-space: nowrap; }
.estimate-table td.cell-actions button {
  width: 30px; height: 30px; margin-left: 4px; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: var(--muted); font-size: 15px;
}
.estimate-table td.cell-actions button:hover { background: var(--panel-2); color: var(--blue); }
.estimate-table td.cell-actions .cell-remove:hover { background: var(--red-soft); color: var(--red); }
.estimate-table .est-pct-cell { font-size: 16px; font-weight: 700; }
.estimate-table .est-sub { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 400; }
.estimate-table tbody tr.selected { background: var(--blue-soft); box-shadow: inset 2px 0 0 var(--blue); }
.estimate-table tbody tr[draggable="true"] { cursor: grab; }
.estimate-table tbody tr.drag-over { border-top: 2px solid var(--blue); }
.estimate-table .empty-cell { color: var(--muted); cursor: default; }
.table-drag-hint { margin-top: 6px; color: var(--muted); font-size: 12px; }

/* ---- 估值详情：结论层（P0-3）---- */
.estimate-conclusion {
  margin: 0 0 14px; padding: 13px 16px;
  border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--panel); font-size: 14px; line-height: 1.75;
}
.estimate-conclusion .conclusion-main { font-size: 15px; }
.estimate-conclusion .conclusion-main strong { font-size: 19px; font-weight: 720; }
.estimate-conclusion .conclusion-attrs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.detail-disclosure { margin: 14px 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.detail-disclosure > summary {
  min-height: 46px; padding: 0 16px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-weight: 650; font-size: 13px; list-style: none;
}
.detail-disclosure > summary::-webkit-details-marker { display: none; }
.detail-disclosure > summary::after { content: "+"; color: var(--blue); font-size: 18px; font-weight: 400; }
.detail-disclosure[open] > summary::after { content: "−"; }
.detail-disclosure > summary small { color: var(--muted); font-weight: 400; font-size: 12px; }
.detail-disclosure > .detail-disclosure-body { padding: 0 16px 16px; }
.detail-disclosure .kpi-grid { margin: 4px 0 8px; }

/* ---- 重仓股联动面板（P1-5）---- */
.holding-linkage .linkage-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; color: var(--muted); font-size: 12px; }
.holding-linkage .linkage-summary strong { color: var(--text); }
.linkage-table td.linkage-funds { max-width: 360px; white-space: normal; overflow-wrap: anywhere; }

/* ---- 基金对比（P1-7）---- */
.compare-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
}
.compare-bar .compare-label { color: var(--muted); font-size: 12px; }
.compare-chip {
  min-height: 28px; padding: 0 4px 0 9px; border: 1px solid var(--blue); border-radius: 4px;
  background: var(--blue-soft); color: var(--blue);
  display: inline-flex; align-items: center; gap: 6px; font: 12px Consolas, monospace;
}
.compare-chip button { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: inherit; font-size: 14px; }
.compare-chip button:hover { background: var(--red-soft); color: var(--red); }
.compare-view-toolbar { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.compare-view-toolbar .field { min-width: 200px; }
.compare-layout { display: grid; gap: 16px; }
.compare-host { height: 320px; padding: 12px 8px 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.compare-seg-table th:first-child, .compare-seg-table td:first-child { text-align: left; white-space: nowrap; }
.compare-best { color: var(--up); font-weight: 700; }
.compare-worst { color: var(--down); font-weight: 700; }
.compare-note { color: var(--muted); font-size: 12px; line-height: 1.6; }

/* ---- 市场快讯 + 交易日历（P1-10 / P2-13）---- */
.market-news-list, .market-calendar-list { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.news-item { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); }
.news-item:last-child { border-bottom: 0; }
.news-time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.news-time .news-provider { display: block; margin-top: 3px; font-size: 12px; }
.news-title { color: var(--text); font-size: 13px; line-height: 1.65; text-decoration: none; }
a.news-title:hover { color: var(--blue); }
.news-link-badges { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; }
.news-link-badges .badge { min-height: 20px; margin: 0; font-size: 12px; }
.market-calendar-days { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px; }
.calendar-day {
  min-width: 74px; padding: 8px 9px; border: 1px solid var(--line-soft); border-radius: 6px;
  background: var(--panel-2); display: grid; gap: 3px;
}
.calendar-day span { color: var(--muted); font-size: 12px; }
.calendar-day strong { font-size: 13px; font-variant-numeric: tabular-nums; }
.calendar-day.closed { border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.calendar-day.closed strong { color: var(--amber); }
.calendar-day.today { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.macro-placeholder { padding: 14px; color: var(--muted); font-size: 12px; line-height: 1.7; }
@media (max-width: 700px) { .news-item { grid-template-columns: 1fr; gap: 4px; } }

/* ---- 历史表现：区间快捷切换（P1-8）---- */
.history-range-tabs { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.history-range-tabs button {
  min-height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px;
  background: var(--panel-2); color: var(--muted); font-size: 12px;
}
.history-range-tabs button.active { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }

/* ---- 组合中心：账本/分析双 Tab（P2-11）---- */
.portfolio-tabbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 16px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
}
.portfolio-tabbar .tabs { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; }
.portfolio-tabbar .tabs button { min-height: 32px; padding: 0 14px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 13px; }
.portfolio-tabbar .tabs button.active { background: var(--blue-soft); color: var(--blue); font-weight: 650; }
.portfolio-draft-strip { margin-left: auto; color: var(--muted); font-size: 12px; }
.portfolio-draft-strip.dirty { color: var(--amber); }
.portfolio-draft-strip.buffered { color: var(--blue); }
.portfolio-tabbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.portfolio-tabbar .portfolio-tabbar-actions .btn { min-height: 32px; padding: 0 12px; font-size: 12px; }
.portfolio-tab-panel { display: none; }
.portfolio-tab-panel.active { display: block; }
.portfolio-tabbar .portfolio-draft-strip .btn { min-height: 30px; padding: 0 10px; font-size: 12px; }
@media (max-width: 620px) {
  .portfolio-tabbar { gap: 8px; }
  .portfolio-draft-strip { order: 3; width: 100%; margin-left: 0; }
  .portfolio-tabbar-actions { order: 2; margin-left: auto; }
  .portfolio-tabbar-actions .btn { min-height: 40px; }
}
@media print {
  .portfolio-tabbar { display: none; }
  .portfolio-tab-panel { display: block !important; }
}

/* ---- AI 问答入口（P2-12，规则问答原型）---- */
.assistant-fab {
  position: fixed; right: 22px; bottom: 24px; z-index: 40;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--blue); background: var(--blue); color: var(--white);
  font-size: 20px; line-height: 1; box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
}
.assistant-fab:hover { border-color: var(--blue); }
dialog.assistant-dialog {
  width: min(460px, calc(100vw - 32px)); padding: 0;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); color: var(--text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}
dialog.assistant-dialog::backdrop { background: rgba(10, 14, 24, .4); }
.assistant-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.assistant-head strong { font-size: 15px; }
.assistant-head small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 400; }
.assistant-head .btn.icon { width: 32px; height: 32px; font-size: 16px; }
.assistant-log { display: flex; flex-direction: column; gap: 10px; min-height: 150px; max-height: 320px; overflow-y: auto; padding: 14px 16px; }
.assistant-msg { max-width: 88%; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.assistant-msg.user { align-self: flex-end; background: var(--blue-soft); border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent); }
.assistant-msg.bot { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--line-soft); }
.assistant-msg.bot .assistant-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.assistant-msg.bot .assistant-actions button { min-height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--blue); font-size: 12px; }
.assistant-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.assistant-chips button { min-height: 28px; padding: 0 11px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); color: var(--text); font-size: 12px; }
.assistant-chips button:hover { border-color: var(--blue); color: var(--blue); }
.assistant-form { display: flex; gap: 8px; padding: 12px 16px 14px; border-top: 1px solid var(--line-soft); }
.assistant-form input { flex: 1; min-width: 0; }
.assistant-form .btn { flex: 0 0 auto; }
@media (max-width: 580px) {
  .assistant-fab { right: 14px; bottom: 14px; }
  .skeleton-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- 补充：P1-5 联动表、P0-1 表格徽章对齐 ---- */
.holding-linkage td.linkage-funds { max-width: 360px; white-space: normal; overflow-wrap: anywhere; }
.estimate-table .badge { margin: 0; }
.estimate-table tbody tr { cursor: pointer; }
.estimate-table td.cell-actions { text-align: center; }

/* ---- M1 分组筛选 / H4 快讯分类 / H2 联动视角 ---- */
.group-filter { height: 28px; min-width: 96px; padding: 0 6px; font-size: 12px; }
.estimate-table td.cell-group select { min-width: 96px; height: 26px; font-size: 12px; }
.news-tabs, .linkage-tabs { margin: 0 0 8px; }
.news-tabs button small { margin-left: 3px; color: var(--muted); font-size: 12px; }

/* ---- M2 搜索联想 ---- */
.suggest-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  max-height: 330px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  box-shadow: 0 14px 36px rgba(16, 24, 40, .22);
}
.suggest-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; }
.suggest-item:hover, .suggest-item.active { background: var(--blue-soft); }
.suggest-code { min-width: 46px; color: var(--muted); font: 11px Consolas, monospace; }
.suggest-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.suggest-type { color: var(--muted); font-size: 12px; }
.suggest-add { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--blue); font-size: 14px; }
.suggest-add:hover { background: var(--panel-2); }
.suggest-hint { padding: 6px 10px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 12px; }

/* ---- L2 命令面板 ---- */
.palette-dialog {
  width: min(560px, calc(100vw - 32px)); padding: 0;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); color: var(--text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}
.palette-dialog::backdrop { background: rgba(10, 14, 24, .45); }
.palette-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.palette-head span { color: var(--muted); font-size: 12px; }
.palette-dialog #palette-input { margin: 12px 16px; width: calc(100% - 32px); }
.palette-list { max-height: 340px; overflow-y: auto; padding: 0 8px 10px; }
.palette-item { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 9px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text); text-align: left; font-size: 13px; }
.palette-item small { color: var(--muted); font-size: 12px; }
.palette-item.active { background: var(--blue-soft); color: var(--blue); }
.palette-empty { padding: 14px; color: var(--muted); font-size: 12px; text-align: center; }

/* ---- M3 场内 K 线 / M5 档案页页签 ---- */
.candle-host { height: 300px; }
.detail-tabbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 14px 0 6px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.detail-tabbar button { min-height: 32px; padding: 0 14px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 13px; }
.detail-tabbar button.active { background: var(--blue-soft); color: var(--blue); font-weight: 650; }
.detail-tab-panel { display: none; }
.detail-tab-panel.active { display: block; }
@media print { .detail-tabbar { display: none; } .detail-tab-panel { display: block !important; } }

/* ---- 估值页布局：卡片两栏 / 行情表整宽 ----
   注意：桌面两栏必须限定 min-width，否则会覆盖 app.css 的移动端单列规则
   （同一选择器、theme.css 后加载）——移动端曾因此把详情列压成 0 宽。 */
@media (min-width: 901px) {
  .estimate-layout { grid-template-columns: minmax(300px, 336px) minmax(0, 1fr); }
}
.estimate-layout[data-mode="table"] { grid-template-columns: minmax(0, 1fr); }
.estimate-layout[data-mode="table"] .list-pane { position: static; }
.estimate-layout[data-mode="table"] .estimate-table-wrap { max-height: none; }
.estimate-layout[data-mode="table"] .estimate-table { min-width: 720px; }
.estimate-table-wrap { overflow: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 900px) {
  .estimate-layout[data-mode="table"] .estimate-table { min-width: 640px; }
}

/* ---- 卡片右上角两个操作按钮（刷新/移除）需要 60px 让位，避免压住涨幅数字 ---- */
.fund-item { padding-right: 66px; }
.fund-remove { right: 8px; }
.fund-refresh { right: 34px; }
/* ---- 宏观 4 卡自适应铺满（insight-strip 默认固定 5 列会留空一列） ---- */
#market-macro .insight-strip { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
#market-macro .insight-item { border-right: 0; }

/* ---- 基金列表头：标题与筛选/视图切换分两行，避免窄栏挤压换行 ---- */
.list-pane-head { flex-wrap: wrap; row-gap: 6px; }
.list-pane-head > strong { white-space: nowrap; }
.list-pane-head > span { white-space: nowrap; }
/* 仅卡片模式（窄栏）需要独占一行；表格模式整宽时留在标题行右侧。 */
.estimate-layout[data-mode="cards"] .list-pane-head-tools { width: 100%; justify-content: space-between; gap: 8px; }
.list-pane-head-tools { align-items: center; gap: 8px; }
.list-pane-head-tools .group-filter { flex: 1 1 auto; min-width: 0; max-width: 150px; }
.list-view-toggle { flex: 0 0 auto; }
.list-view-toggle button { white-space: nowrap; }

/* 基金身份完整显示，长名称自然换行。 */
.fund-item .name {
  display:block; overflow:visible; white-space:normal; overflow-wrap:anywhere; line-height:1.6;
}

/* ---- 视图标题由 switchView() 程序化聚焦，不应出现默认焦点框 ---- */
#view-title:focus, #view-title:focus-visible { outline: none; }

/* ---- 移动端顶栏：会话时间可截断，保证与离线开关同排 ---- */
@media (max-width: 700px) {
  .top-actions { gap: 8px; }
  .top-actions .theme-controls { flex: 0 0 auto; }
  /* basis 用 0：否则会话文字按内容宽度参与换行计算，会把离线开关挤到下一行。 */
  .top-actions .session { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .top-actions .top-toggle { flex: 0 0 auto; white-space: nowrap; }
}

/* ---- 组合交易表单：字段顶部对齐（手续费含"确认无手续费"复选框时不再错位），按钮贴底 ---- */
.portfolio-transaction-editor { align-items: start; }
.portfolio-transaction-editor .field { display: flex; flex-direction: column; gap: 6px; }
.portfolio-transaction-editor > .btn { align-self: end; height: 40px; }
.portfolio-transaction-editor .inline-check { margin-top: 2px; white-space: nowrap; }

/* ---- 移动端档案工具栏：两列网格，图标按钮不单独占一行 ---- */
@media (max-width: 700px) {
  #detail-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #detail-toolbar .field, #detail-toolbar .field.grow { grid-column: 1 / -1; }
  #detail-toolbar .btn { width: 100%; }
  #detail-toolbar .btn.icon { width: 44px; justify-self: start; }
  /* app.css 里"重新比较整行占满"是为旧版单列布局写的；两列网格下改成普通单元格，
     让 ↻ 与"重新比较"同一行，最后"加入对比"整行。 */
  #detail-toolbar #detail-compare-btn { grid-column: auto; width: 100%; }
  #detail-toolbar #detail-compare-add { grid-column: 1 / -1; }
}

/* ---- 全局兜底：hidden 属性必须真的不占位（部分 .btn 规则会覆盖 UA 的 display:none） ---- */
[hidden] { display: none !important; }

/* ---- P0-2 / P1-5：全局横幅（数据目录回退、新版本可用） ---- */
.app-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--amber);
  border-radius: var(--radius); background: var(--amber-soft, rgba(201,154,69,.12));
  color: var(--text); font-size: 12px; line-height: 1.6;
}
.app-banner strong { color: var(--amber); font-size: 12px; }
.app-banner span { flex: 1 1 320px; min-width: 0; }
.app-banner .btn { min-height: 30px; padding: 0 12px; }

/* ---- P1-1：表格分页 ---- */
.table-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-top: 10px; color: var(--muted); font-size: 12px;
}
.table-pager-actions { display: flex; align-items: center; gap: 8px; }
.table-pager-actions select { height: 30px; font-size: 12px; }
.table-pager-actions .btn { min-height: 30px; padding: 0 10px; }

/* ---- P1-3：搜索命中高亮 ---- */
mark { background: var(--amber-soft, rgba(201,154,69,.22)); color: inherit; padding: 0 1px; border-radius: 2px; }

/* ---- P1-4：移动端宽表格——操作列常驻，低优先级列隐藏 ----
   目标：390px 下"标为已读 / 查看冻结输入"等操作按钮必须始终可见，
   不再要求用户横向滚动去找按钮。 */
/* 操作列常驻：表格超宽时（桌面 1440 也可能超）用户不必横滑找按钮 */
.table-sticky-actions > thead > tr > th:last-child,
.table-sticky-actions > tbody > tr > td:last-child {
  position: sticky; right: 0; z-index: 2;
  background: var(--panel);
  box-shadow: -10px 0 12px -10px rgba(0, 0, 0, .5);
}
@media (max-width: 700px) {
  /* 提醒表：保留 时点 / 标题 / 状态 / 操作 */
  .table-alerts > thead > tr > *:nth-child(2),
  .table-alerts > tbody > tr > *:nth-child(2),
  .table-alerts > thead > tr > *:nth-child(3),
  .table-alerts > tbody > tr > *:nth-child(3),
  .table-alerts > thead > tr > *:nth-child(5),
  .table-alerts > tbody > tr > *:nth-child(5) { display: none; }
  /* 任务记录：保留 开始时间 / 任务 / 状态 / 结果 */
  .table-runs > thead > tr > *:nth-child(3),
  .table-runs > tbody > tr > *:nth-child(3),
  .table-runs > thead > tr > *:nth-child(5),
  .table-runs > tbody > tr > *:nth-child(5) { display: none; }
  /* 逐笔对账：保留 日期 / 基金 / 主估值 / 误差 / 操作 */
  .table-records > thead > tr > *:nth-child(4),
  .table-records > tbody > tr > *:nth-child(4),
  .table-records > thead > tr > *:nth-child(6),
  .table-records > tbody > tr > *:nth-child(6),
  .table-records > thead > tr > *:nth-child(7),
  .table-records > tbody > tr > *:nth-child(7),
  .table-records > thead > tr > *:nth-child(8),
  .table-records > tbody > tr > *:nth-child(8) { display: none; }
  /* 分基金验证：保留 基金 / RMSE / 方向 / 操作 */
  .table-funds > thead > tr > *:nth-child(2),
  .table-funds > tbody > tr > *:nth-child(2),
  .table-funds > thead > tr > *:nth-child(4),
  .table-funds > tbody > tr > *:nth-child(4) { display: none; }
}

/* ---- 市场行情：自选指数编辑弹窗 ---- */
.market-select-dialog { width: min(560px, 92vw); }
.market-select-body { padding: 6px 18px 0; display: grid; gap: 12px; max-height: 58vh; overflow: auto; }
.market-select-list { display: grid; gap: 12px; }
.market-select-group h4 { margin: 0 0 4px; font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.market-select-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid transparent; border-radius: 4px; cursor: pointer; }
.market-select-item:hover { background: var(--panel-2); border-color: var(--line); }
.market-select-item span { flex: 1 1 auto; font-size: 12px; }
.market-select-item small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

/* =====================================================================
   UI27 专项修复（2026-10-27 复审）
   1. 语义 token：把"链接蓝"与"按钮填充色"分开，正文/次级文字达到 4.5:1；
   2. 表单控件按类型隔离：checkbox/radio 不再继承文本框的 40px 高度；
   3. 高频触摸目标扩大命中区，同时保持桌面紧凑；
   4. 图表端点、浮动入口、焦点环等可操作性修复。
   ===================================================================== */

:root {
  /* 文字与填充分离：--blue 只用于链接/图标描边，--action-fill 用于实心按钮 */
  --link: #2c4fc4;
  --red: #bd2638;
  --action-fill: #1f7a61;
  --action-fill-hover: #186b54;
  --action-text: #ffffff;
  --text-secondary: #5a6679;
  --muted: var(--text-secondary);
}
html[data-theme="dark"] {
  --link: #9db4ff;
  /* 深色主题用"亮底深字"：白字在亮绿上不达 4.5:1，深字可达 6:1 以上 */
  --action-fill: #2bb58a;
  --action-fill-hover: #34c796;
  --action-text: #07160f;
  --text-secondary: #a7b4cc;
  --muted: var(--text-secondary);
}

/* 主操作按钮统一走 action token（浅色深底白字 / 深色亮底深字） */
.btn.primary,
button.btn.primary {
  background: var(--action-fill);
  border-color: var(--action-fill);
  color: var(--action-text);
  font-weight: 600;
}
.btn.primary:hover,
button.btn.primary:hover {
  background: var(--action-fill-hover);
  border-color: var(--action-fill-hover);
  color: var(--action-text);
}
a,
.link,
.btn.link {
  color: var(--link);
}

/* ---- UI27-10：checkbox / radio 不继承文本框尺寸 ---- */
input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--panel);
  box-shadow: none;
  accent-color: var(--action-fill);
  vertical-align: middle;
}
input[type="radio"] { border-radius: 50%; }
label.toggle-row,
.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  cursor: pointer;
}
/* 顶栏里的开关不参与"增高排版"：命中区用伪元素外扩，视觉行高保持不变，
   否则每加一个开关都会把首屏内容继续往下推（UI27-01 的实测问题）。 */
label.top-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  cursor: pointer;
}
label.top-toggle::after {
  content: "";
  position: absolute;
  inset: -12px -8px;
}

/* ---- UI27-11：高频触摸目标 44×44（紧凑桌面保留足够间距） ---- */
.help-btn,
button.help-btn,
[data-remove-code],
[data-tx-delete],
[data-delete-transaction],
.chip-remove,
.list-view-toggle button,
.assistant-head .btn.icon {
  min-width: 36px;
  min-height: 36px;
  display: inline-grid;
  place-items: center;
}
@media (max-width: 620px) {
  .help-btn,
  button.help-btn,
  [data-remove-code],
  [data-tx-delete],
  [data-delete-transaction],
  .chip-remove,
  .list-view-toggle button,
  .btn.icon {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ---- UI27-05：辅助信息不得小于 12px（关键时点与风险说明） ---- */
.detail-note,
.metric-row small,
.insight-item small,
.status-line,
.market-status,
.estimate-table .est-sub {
  font-size: 12px;
  line-height: 1.6;
}

/* ---- 草稿/配置未保存状态：持续可见，不靠 toast ---- */
.portfolio-draft-strip.draft-unsafe { color: var(--red); font-weight: 600; }
.app-config-state { background: #fff4e5; border-color: #f0c98a; color: #7a4b00; }
html[data-theme="dark"] .app-config-state { background: #2a2317; border-color: #5c4a24; color: #f2c877; }
.app-config-state.error { background: #fdeaea; border-color: #f0b4b4; color: #8c1c1c; }
html[data-theme="dark"] .app-config-state.error { background: #2b1717; border-color: #5c2a2a; color: #ff9a9a; }
body.config-unsaved .top-actions { outline: 1px dashed var(--amber); outline-offset: 3px; }

/* 档案摘要先显：这是加载状态带，不把尚未读取的完整区块渲染成空数据。 */
.detail-summary-loading { display:grid; gap:4px; margin:14px 0 20px; padding:12px 14px; border-left:3px solid var(--blue); background:var(--blue-soft); }
.detail-summary-loading strong { font-size:14px; color:var(--text); }
.detail-summary-loading span { font-size:13px; color:var(--text); }
.detail-summary-loading small { font-size:12px; color:var(--muted); }

/* ---- UI27-01：移动端顶部压缩。导航/标题/搜索/状态压成两行紧凑应用栏，
   不放小文字和触点，只是去掉重复行高与多余换行。 ---- */
@media (max-width: 620px) {
  .sidebar { padding: 6px 10px; gap: 6px; }
  .brand { min-height: 34px; padding: 0 4px; gap: 8px; }
  .brand-mark { width: 30px; height: 30px; flex: 0 0 30px; font-size: 15px !important; }
  .brand strong { font-size: 15px; }
  .nav { padding-bottom: 0; gap: 2px; }
  .nav button { min-height: 32px; padding: 0 8px; font-size: 12px; }
  .topbar { padding: 6px 10px; gap: 4px; }
  .global-search { display: flex; align-items: center; gap: 6px; }
  .global-search input { height: 34px; }
  .global-search button[type="submit"] { height: 34px; padding: 0 10px; }
  .top-actions { gap: 6px; align-items: center; }
  .top-actions .session { font-size: 12px; max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .theme-controls .btn,
  .theme-controls .updown-toggle { min-height: 34px; height: 34px; }
  .content { padding: 12px 12px 28px; }
  .view .toolbar { gap: 8px; }
}

/* Brand mark uses the same legible action contrast as filled controls. */
.brand .brand-mark { background:var(--action-fill); color:var(--action-text); }

/* 缺行情的分组提示：必须和分组标题同一行、同一可读字号，但用文字而非仅颜色
   表达"这次没取到"，避免与"单源/备用源"这类数据源状态混为一谈。 */
.market-group .market-group-gap { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--amber); }