:root {
  color-scheme:light;
  --bg:#f7f8fa; --card:#fff; --card-hover:#f5f7f9;
  --border:rgba(17,24,39,.09); --text:#111; --text-dim:#8a9099;
  --accent-us:#12b8ad; --accent-hk:#ff8a00; --accent-a:#ff5a3c;
  --accent-share:#7b61ff; --red:#e5484d; --green:#12a474;
  --red-bg:rgba(229,72,77,.075); --green-bg:rgba(18,164,116,.085);
  --shadow:0 18px 44px rgba(17,24,39,.045);
}

[data-theme="dark"] {
  color-scheme:dark;
  --bg:#111210; --card:rgba(31,32,29,.82); --card-hover:rgba(255,255,255,.04);
  --border:rgba(255,255,255,.09); --text:#f2f2ed; --text-dim:#9c9d97;
  --red:#ef7b70; --green:#60c39b; --red-bg:rgba(239,123,112,.1);
  --green-bg:rgba(96,195,155,.1); --shadow:0 24px 70px rgba(0,0,0,.28);
}

* { box-sizing:border-box; }
html { background:var(--bg); }
[data-theme="dark"] { background:#111210; }
body {
  margin:0; min-height:100vh; color:var(--text);
  background:
    radial-gradient(circle at 92% -16%,rgba(18,184,173,.055),transparent 26%),
    linear-gradient(180deg,#fbfcfd 0%,#f8f9fb 38%,var(--bg) 100%);
  font-family:Inter,"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,
    "Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  letter-spacing:-.012em;
  transition:background-color .25s ease,color .25s ease;
}
button { font:inherit; }
.main-container { position:relative; width:min(1480px,calc(100% - 64px)); margin:auto; padding:24px 0 44px; }

.topbar { height:48px; display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.brand { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:720; letter-spacing:-.035em; line-height:1; }
.brand-cn { display:inline; }
.brand-en { display:none; }
.brand-mark {
  position:relative; display:flex; align-items:flex-end; gap:3px; width:32px; height:32px; padding:7px 8px 7px 8px;
  border:1px solid rgba(17,24,39,.06); border-radius:13px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.58));
  box-shadow:0 6px 16px rgba(17,24,39,.038),inset 0 1px rgba(255,255,255,.86);
}
.brand-mark i { position:relative; z-index:1; width:3px; border-radius:999px; opacity:.95; }
.brand-mark i:nth-child(1) { height:6px; background:#12b8ad; }
.brand-mark i:nth-child(2) { height:10px; background:#2f73ff; }
.brand-mark i:nth-child(3) { height:15px; background:#ff9b18; }
.brand-mark svg {
  position:absolute; inset:5px 4px auto auto; width:26px; height:18px; pointer-events:none;
}
.brand-mark path {
  fill:none; stroke:#0f9f85; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.brand-mark .brand-arrow { stroke-width:1.2; }
.btn-refresh {
  display:flex; align-items:center; gap:7px; padding:10px 15px; color:var(--text);
  border:1px solid rgba(17,24,39,.08); border-radius:999px; background:#f1f3f5;
  box-shadow:none; cursor:pointer; font-size:12px; font-weight:650;
}
.btn-refresh:hover { transform:translateY(-1px); }
.btn-refresh:disabled { opacity:.55; }
.btn-refresh:disabled .refresh-icon { animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.header { display:none; }
[data-theme="dark"] body {
  background:
    radial-gradient(circle at 92% -8%,rgba(76,91,119,.18),transparent 30%),
    radial-gradient(circle at 8% 0,rgba(255,255,255,.035),transparent 24%),
    var(--bg);
}
[data-theme="dark"] .brand-mark {
  border-color:rgba(255,255,255,.09); background:rgba(255,255,255,.04); box-shadow:none;
}
[data-theme="dark"] .brand-mark path { stroke:#60d4ba; }
.eyebrow,.section-kicker {
  margin:0 0 8px; color:var(--text-dim); font-size:10px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
}
.header .eyebrow { display:none; }
.header h1 {
  margin:0; max-width:none; font-size:clamp(34px,3vw,44px); font-weight:620;
  line-height:1.05; letter-spacing:-.052em; white-space:nowrap;
}
.desktop-break { display:none; }
.mobile-divider { display:inline; color:var(--text-dim); font-weight:400; }
.subtitle {
  display:none;
}

.status-bar {
  display:flex; align-items:center; justify-content:flex-end; margin:-2px 4px 8px;
  padding:0; color:var(--text-dim); font-size:10px;
}
.status-left { display:flex; align-items:center; gap:9px; }
.dot { width:7px; height:7px; border-radius:50%; background:var(--green); }
.dot.loading { background:var(--accent-us); animation:pulse 1.4s ease-in-out infinite; }
.dot.warning { background:#d3a147; }
.dot.error { background:var(--red); }
@keyframes pulse { 50% { opacity:.35; } }
.update-badge { display:none; color:var(--text-dim); }

.page-tabs {
  position:relative; z-index:10; display:grid; grid-template-columns:repeat(3,1fr);
  gap:34px; width:max-content; margin:0 0 22px; padding:0 4px;
  border:0; border-radius:0; background:transparent; box-shadow:none; backdrop-filter:none;
}
.page-tab {
  position:relative; display:flex; align-items:center; justify-content:center; gap:8px; min-height:42px;
  padding:4px 0; color:var(--text-dim); border:0; border-radius:0;
  background:transparent; cursor:pointer;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.page-tab span { font-size:16px; font-weight:620; }
.page-tab small { font-size:10px; }
.page-tab:hover { color:var(--text); background:transparent; }
.page-tab.active {
  color:var(--text); background:transparent; box-shadow:none;
}
.page-tab.active::after {
  content:""; position:absolute; left:50%; bottom:-3px; width:40px; height:3px;
  border-radius:999px; background:#12b8ad; transform:translateX(-50%);
}
.page-panel[hidden] { display:none !important; }
.page-panel.active { animation:panel-in .24s cubic-bezier(.22,1,.36,1); }
@keyframes panel-in {
  from { opacity:0; transform:translateY(5px); }
  to { opacity:1; transform:translateY(0); }
}

.portfolios {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:0;
  border:0; border-radius:0; background:transparent; box-shadow:none; backdrop-filter:none;
}
.portfolio-source {
  grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:14px;
  margin-top:4px; padding:14px 18px; border:1px solid rgba(17,24,39,.075);
  border-radius:18px; color:var(--text-dim); background:rgba(255,255,255,.56);
  font-size:12px; line-height:1.5;
}
.portfolio-source-bottom { margin-top:0; }
.source-link {
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; padding:8px 13px;
  border:1px solid rgba(17,24,39,.08); border-radius:999px; color:var(--text);
  background:#fff; font-size:12px; font-weight:680; text-decoration:none;
}
.source-link::after { content:"↗"; font-size:11px; opacity:.65; }
.portfolio,.share-card,.valuation-card {
  overflow:hidden; border:1px solid rgba(17,24,39,.085); border-radius:22px; background:var(--card);
  box-shadow:none; backdrop-filter:none;
}
.portfolio {
  min-width:0; border-radius:22px;
  box-shadow:none;
}
.portfolio-header {
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:center; gap:14px; padding:24px 24px 16px; position:relative;
}
.portfolio-header .left { min-width:0; margin-top:0; }
.portfolio-header .name { font-size:24px; font-weight:680; letter-spacing:-.04em; }
.positive-text { color:var(--red); }
.negative-text { color:var(--green); }

.portfolio-section-heading {
  display:flex; justify-content:space-between; align-items:center;
  margin:2px 24px 10px; padding-top:15px; border-top:1px solid var(--border);
}
.portfolio-section-heading strong { font-size:13px; font-weight:680; }
.portfolio-section-heading span { color:var(--text-dim); font-size:10px; }
.portfolio-chart {
  margin:0 18px 18px; padding:17px 16px 13px; border:1px solid rgba(17,24,39,.07);
  border-radius:18px; background:linear-gradient(180deg,#fbfcfd,#f7f9fb);
}
.chart-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.chart-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); flex:1; gap:5px; }
.chart-metric { min-width:0; padding-right:8px; border-right:1px solid var(--border); }
.chart-metric:last-child { border-right:0; }
.chart-metric span,.chart-period-result span {
  display:block; margin-bottom:4px; color:var(--text-dim); font-size:9px; letter-spacing:.02em;
}
.chart-metric strong,.chart-period-result strong {
  display:block; font-size:17px; font-weight:720; letter-spacing:-.035em; font-variant-numeric:tabular-nums;
}
.chart-metric.positive strong,.chart-period-result.positive strong { color:var(--red); }
.chart-metric.negative strong,.chart-period-result.negative strong { color:var(--green); }
.chart-period-result { min-width:65px; text-align:right; }
.chart-plot { position:relative; margin-top:8px; touch-action:pan-y; user-select:none; }
.nav-chart { display:block; width:100%; height:200px; overflow:visible; }
.chart-grid-line { stroke:rgba(107,114,128,.14); stroke-width:1; stroke-dasharray:4 5; }
.chart-y-label,.chart-x-label {
  fill:var(--text-dim); font-family:inherit; font-size:10px; font-variant-numeric:tabular-nums;
}
.chart-zero { stroke:rgba(107,114,128,.24); stroke-width:1; }
.chart-area { opacity:.16; }
.chart-area.positive { fill:var(--red); }
.chart-area.negative { fill:var(--green); }
.chart-area.neutral { fill:#8b95a1; }
.chart-line { fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.chart-line.positive { stroke:var(--red); }
.chart-line.negative { stroke:var(--green); }
.chart-line.neutral { stroke:#8b95a1; }
.chart-crosshair,.chart-tooltip { display:none; pointer-events:none; position:absolute; }
.chart-plot.is-tracking .chart-crosshair,.chart-plot.is-tracking .chart-tooltip { display:block; }
.chart-crosshair { inset:0; }
.chart-crosshair i {
  position:absolute; left:var(--cursor-x); top:5%; bottom:13%; width:1px;
  border-left:1px dashed rgba(46,58,76,.46);
}
.chart-crosshair b {
  position:absolute; left:calc(var(--cursor-x) - 5px); top:calc(var(--cursor-y) - 5px);
  width:10px; height:10px; border:2px solid #fff; border-radius:50%; background:#111827;
  box-shadow:0 1px 6px rgba(15,23,42,.25);
}
.chart-tooltip {
  z-index:2; min-width:108px; padding:7px 9px; border-radius:10px; color:#fff;
  background:rgba(15,23,42,.92); box-shadow:0 8px 22px rgba(15,23,42,.18);
  transform:translate(9px,-100%); font-variant-numeric:tabular-nums;
}
.chart-tooltip.align-right { transform:translate(calc(-100% - 9px),-100%); }
.chart-tooltip span,.chart-tooltip em { display:block; color:rgba(255,255,255,.7); font-size:9px; font-style:normal; }
.chart-tooltip strong { display:block; margin:2px 0; font-size:14px; }
.chart-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:3px; }
.chart-origin { color:var(--text-dim); font-size:9px; white-space:nowrap; }
.chart-ranges { display:flex; gap:3px; padding:3px; border-radius:10px; background:#eef1f4; }
.chart-ranges button {
  padding:5px 8px; color:var(--text-dim); border:0; border-radius:7px; background:transparent;
  cursor:pointer; font-size:9px; white-space:nowrap;
}
.chart-ranges button.active { color:var(--text); background:#fff; box-shadow:0 2px 7px rgba(17,24,39,.07); }
.chart-unavailable { display:flex; flex-direction:column; align-items:center; gap:5px; padding:70px 16px; }
.chart-unavailable span { color:var(--text-dim); font-size:11px; }
.holdings { padding:0 24px 18px; }
.change-header,.holding {
  display:grid; grid-template-columns:38px minmax(0,1fr) 62px 62px; gap:9px; align-items:center;
}
.change-header {
  padding:0 0 9px; color:var(--text-dim); border-bottom:1px solid var(--border);
  font-size:9px; letter-spacing:.08em; text-transform:uppercase;
}
.change-header span:nth-child(3),.change-header span:nth-child(4) { text-align:right; }
.holding { min-height:49px; border-bottom:1px solid var(--border); font-size:12px; }
.holding:last-child { border:0; }
.holding .weight {
  width:31px; padding:5px 0; border-radius:8px; color:#fff; text-align:center;
  font-size:9px; font-weight:700;
}
.us .weight { background:var(--accent-us); }
.hk .weight { background:var(--accent-hk); }
.a .weight { background:var(--accent-a); }
.holding .ticker { font-weight:650; }
.holding .name-cn { overflow:hidden; color:var(--text-dim); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.holding .change { text-align:right; font-variant-numeric:tabular-nums; }

.valuation-section { margin-top:12px; }
.valuation-card {
  display:grid; grid-template-columns:max-content minmax(0,1fr); gap:12px 18px;
  padding:18px 24px 28px;
}
.valuation-header {
  grid-column:1/-1; display:flex; justify-content:space-between; gap:28px; align-items:center;
}
.valuation-title { margin:0; font-size:30px; font-weight:650; letter-spacing:-.045em; }
.valuation-description { margin:8px 0 0; color:var(--text-dim); font-size:14px; line-height:1.55; }
.valuation-method-link {
  display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border:1px solid rgba(17,24,39,.08);
  border-radius:999px; color:var(--text); background:#f4f5f7;
  font-size:13px; font-weight:680; text-decoration:none;
}
.valuation-method-link::after { content:"↗"; font-size:12px; opacity:.65; }
.valuation-update-stamp {
  display:inline-flex; align-items:center; gap:7px; margin-right:auto; padding:8px 12px;
  border-radius:999px; background:rgba(20,184,166,.08); color:#0f766e;
  font-size:12px; font-weight:680; white-space:nowrap;
}
.valuation-update-stamp::before {
  content:""; width:6px; height:6px; border-radius:50%; background:#14b8a6;
  box-shadow:0 0 0 4px rgba(20,184,166,.1);
}
.valuation-legend { display:flex; gap:18px; padding-top:9px; color:var(--text-dim); font-size:12px; white-space:nowrap; }
.valuation-legend span { display:flex; align-items:center; gap:6px; }
.legend-dot { width:8px; height:8px; border-radius:50%; }
.legend-dot.buy { background:#38a77a; }
.legend-dot.fair { background:#d3a147; }
.legend-dot.sell { background:#d5635a; }
.valuation-tabs {
  display:inline-flex; align-self:center; gap:0; margin-top:0; padding:3px; border:1px solid rgba(17,24,39,.08);
  border-radius:999px; background:#f6f8fb;
}
.valuation-tab {
  padding:9px 18px; border:0; border-radius:999px; color:var(--text-dim);
  background:transparent; cursor:pointer; font-size:13px; font-weight:650;
}
.valuation-tab.active {
  color:#111; background:#fff; box-shadow:0 4px 12px rgba(17,24,39,.075);
}
.valuation-summary {
  display:grid; grid-template-columns:repeat(4,minmax(96px,1fr)); gap:0; align-self:center; margin:0;
  border:1px solid rgba(17,24,39,.08); border-radius:999px; background:#fbfcfd; overflow:hidden;
}
.valuation-stat { position:relative; padding:9px 17px; border:0; border-left:1px solid rgba(17,24,39,.07); color:inherit; background:transparent; font:inherit; text-align:left; }
.valuation-stat:first-child { border-left:0; }
.valuation-stat span { display:inline-block; margin-right:8px; color:var(--text-dim); font-size:11px; vertical-align:middle; }
.valuation-stat strong { font-size:21px; font-weight:680; letter-spacing:-.045em; vertical-align:middle; }
.valuation-stat em { display:none; }
.valuation-stat.buy strong { color:var(--green); }
.valuation-stat.sell strong { color:var(--red); }
.valuation-filter { cursor:pointer; transition:background .18s ease,box-shadow .18s ease; }
.valuation-filter:hover { background:rgba(18,184,173,.055); }
.valuation-filter.active {
  background:rgba(18,184,173,.1); box-shadow:inset 0 0 0 1px rgba(18,164,116,.15);
}
.valuation-filter.active::after {
  content:"筛选中"; position:absolute; right:10px; top:50%; color:var(--green);
  font-size:9px; font-weight:700; transform:translateY(-50%);
}
.valuation-table-head,.valuation-row {
  display:grid; grid-template-columns:minmax(260px,300px) 130px minmax(520px,1fr); gap:22px; align-items:center;
}
.valuation-list,.valuation-note { grid-column:1/-1; }
.valuation-table-head {
  display:none;
}
.valuation-row {
  min-height:96px; margin-top:9px; padding:14px 18px;
  border:1px solid rgba(17,24,39,.075); border-radius:18px; background:#fff;
  box-shadow:0 1px 0 rgba(15,23,42,.025);
}
.valuation-row.state-buy,.valuation-row.state-strong-buy {
  border-color:rgba(18,164,116,.18);
  background:linear-gradient(90deg,rgba(18,184,173,.08),#fff 42%);
}
.valuation-row.state-sell {
  border-color:rgba(229,72,77,.16);
  background:linear-gradient(90deg,rgba(229,72,77,.06),#fff 42%);
}
.valuation-company { min-width:0; }
.valuation-company strong {
  min-width:0; overflow:visible; font-size:21px; font-weight:680; letter-spacing:-.025em;
  text-overflow:clip; white-space:nowrap;
}
.valuation-company>span,.valuation-current span { display:block; margin-top:7px; color:var(--text-dim); font-size:13px; }
.valuation-current .valuation-price-source { color:#a56f14; font-size:10px; font-weight:650; }
.valuation-meta { letter-spacing:.01em; }
.valuation-symbol-line {
  display:grid; grid-template-columns:max-content minmax(82px,1fr) max-content; gap:10px; align-items:center;
}
.valuation-ticker {
  min-width:54px; padding:5px 9px; border-radius:9px; color:#111; background:#f3f5f7;
  font-size:11px; font-weight:760; letter-spacing:.04em; text-align:center;
}
.valuation-holding {
  padding:5px 9px; border-radius:999px; font-size:11px; font-weight:760;
  letter-spacing:-.01em; white-space:nowrap; font-variant-numeric:tabular-nums;
}
.valuation-holding.active {
  color:#0b8f78; background:rgba(18,184,173,.1);
}
.valuation-holding.watch {
  color:#8a9099; background:#f3f5f7;
}
.valuation-holding.cleared {
  color:#7c6a58; background:#f4efe9;
}
.valuation-empty {
  grid-column:1/-1; margin-top:9px; padding:42px 20px; border:1px dashed rgba(17,24,39,.12);
  border-radius:18px; color:var(--text-dim); text-align:center;
}

[data-theme="dark"] .portfolio,
[data-theme="dark"] .share-card,
[data-theme="dark"] .valuation-card {
  border-color:rgba(255,255,255,.08); background:#1a1b18;
}
[data-theme="dark"] .portfolio-source {
  border-color:rgba(255,255,255,.08); background:rgba(255,255,255,.035);
}
[data-theme="dark"] .portfolio-chart {
  border-color:rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
}
[data-theme="dark"] .chart-ranges { background:#242520; }
[data-theme="dark"] .chart-ranges button.active {
  color:#f5f5f1; background:#343630; box-shadow:none;
}
[data-theme="dark"] .chart-grid-line { stroke:rgba(255,255,255,.09); }
[data-theme="dark"] .chart-zero { stroke:rgba(255,255,255,.18); }
[data-theme="dark"] .chart-area.positive { fill:#ff7c73; }
[data-theme="dark"] .chart-area.negative { fill:#71dec5; }
[data-theme="dark"] .chart-line.positive { stroke:#ff7c73; }
[data-theme="dark"] .chart-line.negative { stroke:#71dec5; }
[data-theme="dark"] .source-link {
  border-color:rgba(255,255,255,.08); color:#f5f5f1; background:#242520;
}
[data-theme="dark"] .valuation-method-link {
  border-color:rgba(255,255,255,.08); color:#f5f5f1; background:#242520;
}
[data-theme="dark"] .valuation-update-stamp {
  color:#7fe4cf; background:rgba(20,184,166,.13);
}
[data-theme="dark"] .valuation-summary {
  border-color:rgba(255,255,255,.08); background:#20211d;
}
[data-theme="dark"] .valuation-stat { border-left-color:rgba(255,255,255,.08); }
[data-theme="dark"] .valuation-row {
  border-color:rgba(255,255,255,.08); background:#20211d;
}
[data-theme="dark"] .valuation-row.state-buy,
[data-theme="dark"] .valuation-row.state-strong-buy {
  border-color:rgba(96,212,186,.22);
  background:linear-gradient(90deg,rgba(28,129,108,.18),#20211d 56%);
}
[data-theme="dark"] .valuation-row.state-sell {
  border-color:rgba(239,123,112,.2);
  background:linear-gradient(90deg,rgba(239,123,112,.12),#20211d 56%);
}
[data-theme="dark"] .valuation-ticker,
[data-theme="dark"] .valuation-holding.watch {
  color:#d8dbd4; background:#2b2d28;
}
[data-theme="dark"] .valuation-holding.active {
  color:#71dec5; background:rgba(96,212,186,.14);
}
[data-theme="dark"] .valuation-holding.cleared {
  color:#d4b99e; background:rgba(180,145,111,.14);
}
[data-theme="dark"] .valuation-filter:hover,
[data-theme="dark"] .valuation-filter.active { background:rgba(96,212,186,.11); }
[data-theme="dark"] .valuation-empty { border-color:rgba(255,255,255,.1); }
[data-theme="dark"] .valuation-current .valuation-price-source { color:#e0b45f; }
[data-theme="dark"] .range-labels span:nth-child(1) {
  color:#78dfc7; background:rgba(96,212,186,.11);
}
[data-theme="dark"] .range-labels span:nth-child(2) {
  color:#e7bf62; background:rgba(231,191,98,.11);
}
[data-theme="dark"] .range-labels span:nth-child(3) {
  color:#ff9388; background:rgba(239,123,112,.1);
}
[data-theme="dark"] .range-track { background:#2b2d28; }
[data-theme="dark"] .range-zone.buy { background:rgba(96,212,186,.48); }
[data-theme="dark"] .range-zone.fair { background:rgba(231,191,98,.45); }
[data-theme="dark"] .range-zone.sell { background:rgba(239,123,112,.38); }
[data-theme="dark"] .price-pin {
  border-color:#20211d; background:#f5f5f1; box-shadow:0 4px 12px rgba(0,0,0,.3);
}
[data-theme="dark"] .price-pin b {
  color:#111210; background:#f5f5f1;
}
[data-theme="dark"] .status-chip.watch {
  color:#b9bbb4; background:#2b2d28;
}
.signal-pill { padding:4px 7px; border-radius:999px; font-size:10px; font-weight:750; letter-spacing:.03em; }
.signal-pill.buy { color:var(--green); background:var(--green-bg); }
.signal-pill.sell { color:var(--red); background:var(--red-bg); }
.valuation-current strong { font-size:28px; font-weight:680; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.range-labels {
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:11px;
  color:var(--text); font-size:12px; font-weight:640; font-variant-numeric:tabular-nums;
}
.range-labels span {
  padding:6px 9px; border-radius:8px; text-align:center; white-space:nowrap;
}
.range-labels span:nth-child(1) { color:var(--green); background:rgba(18,164,116,.075); }
.range-labels span:nth-child(2) { color:#9a6b13; background:rgba(214,159,46,.1); }
.range-labels span:nth-child(3) { color:var(--red); background:rgba(229,72,77,.07); }
.range-track { position:relative; height:9px; margin-bottom:20px; border-radius:999px; background:#eef1f4; }
.range-zone { position:absolute; top:0; height:100%; }
.range-zone.buy { left:0; border-radius:999px 0 0 999px; background:rgba(18,164,116,.42); }
.range-zone.fair { background:rgba(214,159,46,.42); }
.range-zone.sell { border-radius:0 999px 999px 0; background:rgba(229,72,77,.32); }
.price-pin {
  position:absolute; top:50%; width:17px; height:17px; border:3px solid var(--card);
  border-radius:50%; background:#111827; box-shadow:0 4px 12px rgba(15,23,42,.22);
  transform:translate(-50%,-50%);
}
.price-pin b {
  position:absolute; left:50%; top:15px; padding:4px 7px; border-radius:7px;
  color:#fff; background:#111827; font-size:11px; white-space:nowrap; transform:translateX(-50%);
}
.status-chip { display:inline-block; padding:7px 10px; border-radius:999px; font-size:11px; font-weight:760; }
.status-chip.inline { display:none; }
.status-chip.strong-buy,.status-chip.buy { color:var(--green); background:var(--green-bg); }
.status-chip.watch { color:var(--text-dim); background:#f3f6fb; }
.status-chip.fair { color:#9c6a15; background:rgba(211,161,71,.12); }
.status-chip.sell { color:var(--red); background:var(--red-bg); }
.valuation-note {
  display:block; padding:18px 14px 0;
  border-top:1px solid var(--border); color:var(--text-dim); font-size:12px;
}

.share-section { margin-top:12px; }
.share-card { padding:27px; }
.share-card-header { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.section-kicker { margin-bottom:8px; }
.share-card-header .name { font-size:25px; font-weight:630; letter-spacing:-.04em; }
.share-description { margin:7px 0 0; color:var(--text-dim); font-size:12px; }
.share-note {
  padding:7px 10px; border:1px solid var(--border); border-radius:999px;
  color:var(--text-dim); font-size:10px; font-weight:650;
}
.share-toolbar {
  display:flex; justify-content:flex-end; align-items:center; gap:5px; margin:0 0 12px;
  color:var(--text-dim); font-size:11px;
}
.sort-label { margin-right:5px; }
.sort-btn {
  padding:8px 11px; color:var(--text-dim); border:0; border-radius:10px;
  background:transparent; cursor:pointer; font-size:11px;
}
.sort-btn:hover { background:var(--card-hover); }
.sort-btn.active { color:#111; background:#fff; box-shadow:inset 0 0 0 1px var(--border); }
.share-table-header,.share-row {
  display:grid; grid-template-columns:28px 78px minmax(130px,1fr) 76px 76px;
  gap:12px; align-items:center;
}
.share-table-header {
  padding:0 12px 10px; color:var(--text-dim); font-size:9px;
  letter-spacing:.08em; text-transform:uppercase;
}
.share-table-header span:nth-child(4),.share-table-header span:nth-child(5) { text-align:right; }
.group-header {
  display:flex; align-items:center; gap:7px; padding:15px 12px 8px;
  border-top:1px solid var(--border); font-size:10px; font-weight:700; letter-spacing:.04em;
}
.group-dot { width:6px; height:6px; border-radius:50%; }
.share-item { border-top:1px solid var(--border); cursor:pointer; }
.share-row { min-height:58px; padding:0 12px; font-size:12px; }
.share-item:hover .share-row { background:var(--card-hover); }
.share-ticker { font-weight:700; letter-spacing:.02em; }
.share-name { overflow:hidden; color:var(--text-dim); text-overflow:ellipsis; white-space:nowrap; }
.share-day,.share-since { text-align:right; font-variant-numeric:tabular-nums; }
.share-detail { display:none; padding:5px 12px 17px; font-size:12px; line-height:1.65; }
.share-detail.open { display:block; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.detail-row,.price-track { margin-top:8px; padding:10px 12px; border-radius:12px; background:var(--card-hover); }
.detail-label { margin-right:6px; color:var(--text-dim); font-weight:650; }
.price-track { display:flex; align-items:center; gap:10px; }
.price-item { display:flex; flex-direction:column; }
.price-lbl { color:var(--text-dim); font-size:9px; }
.price-val { font-weight:650; }
.price-arrow { color:var(--text-dim); }
.price-since { margin-left:auto; font-weight:700; }
.price-since.up { color:var(--red); }
.price-since.down { color:var(--green); }

.loading-skeleton {
  width:58px; height:20px; border-radius:6px;
  background:linear-gradient(90deg,rgba(120,120,115,.08),rgba(120,120,115,.16),rgba(120,120,115,.08));
  background-size:200% 100%; animation:shimmer 1.4s infinite;
}
@keyframes shimmer { to { background-position:-200% 0; } }
.footer {
  display:flex; justify-content:space-between; gap:20px; padding:15px 8px 0;
  color:var(--text-dim); font-size:10px; line-height:1.6;
}
.footer-note { max-width:600px; text-align:right; }

@media (max-width:980px) {
  .portfolios { grid-template-columns:1fr; }
  .portfolio { display:block; }
  .holdings { padding-top:0; }
  .main-container { width:min(100% - 32px,860px); }
  .page-tabs { width:100%; justify-content:space-between; }
  .valuation-card { display:block; padding:20px 22px 26px; }
  .valuation-summary { margin:12px 0 16px; border-radius:18px; }
  .valuation-table-head { display:none; }
  .valuation-row { grid-template-columns:minmax(240px,1fr) 110px; gap:14px; }
  .valuation-range { grid-column:1/-1; }
}
@media (max-width:640px) {
  .main-container {
    width:calc(100% - 16px); padding-top:6px;
    display:grid; grid-template-columns:1fr auto; column-gap:10px;
  }
  .topbar {
    grid-column:1/-1; grid-row:1; height:34px; margin-bottom:0;
  }
  .brand { min-width:0; gap:7px; font-size:16px; letter-spacing:-.035em; }
  .brand-en { display:none; }
  .brand-cn { display:inline; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .brand-mark { flex:0 0 auto; width:28px; height:28px; padding:6px 7px; gap:2.5px; border-radius:11px; }
  .brand-mark i { width:2.5px; }
  .brand-mark i:nth-child(1) { height:6px; }
  .brand-mark i:nth-child(2) { height:9px; }
  .brand-mark i:nth-child(3) { height:13px; }
  .brand-mark svg { inset:5px 3px auto auto; width:23px; height:16px; }
  .brand-mark path { stroke-width:1.25; }
  .brand-mark .brand-arrow { stroke-width:1.1; }
  .btn-refresh {
    padding:6px 9px; border-color:transparent; background:var(--card-hover);
    box-shadow:none; font-size:10px;
  }
  .header { display:none; }
  .status-bar {
    grid-column:1/-1; grid-row:2; align-self:center; justify-self:end;
    min-height:12px; margin:-7px 2px 0 0; padding:0; font-size:8px; white-space:nowrap;
  }
  .status-left { gap:5px; }
  .dot { width:5px; height:5px; }
  .status-bar .time { max-width:96px; overflow:hidden; text-overflow:ellipsis; }
  .update-badge { display:none; }
  .page-tabs {
    grid-column:1/-1; grid-row:3; position:sticky; top:4px;
    display:grid; width:auto; gap:3px; grid-template-columns:repeat(3,minmax(0,1fr));
    margin:2px 0 9px; padding:3px; border:1px solid rgba(17,24,39,.06); border-radius:14px;
    background:#fff; box-shadow:none;
  }
  .page-tab { min-width:0; min-height:36px; padding:4px 3px; gap:0; flex-direction:column; border-radius:11px; }
  .page-tab span { font-size:12px; font-weight:680; }
  .page-tab small {
    display:block; max-width:100%; margin-top:2px; overflow:hidden;
    font-size:8px; text-overflow:ellipsis; white-space:nowrap;
  }
  .page-tab.active {
    color:#111; background:#f1f3f5;
    box-shadow:none;
  }
  .page-tab.active::after { display:none; }
  [data-theme="dark"] .page-tabs {
    border:1px solid rgba(255,255,255,.08);
    background:#1a1b18; box-shadow:0 8px 22px rgba(0,0,0,.22);
    backdrop-filter:none;
  }
  [data-theme="dark"] .page-tab {
    color:#aeb0a9; opacity:1;
  }
  [data-theme="dark"] .page-tab small { color:#7f817b; }
  [data-theme="dark"] .page-tab.active {
    color:#f5f5f1; background:#30312d;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),0 4px 12px rgba(0,0,0,.25);
  }
  [data-theme="dark"] .page-tab.active small { color:#c5c7c0; }
  [data-theme="dark"] .valuation-tabs {
    background:#151613; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  }
  [data-theme="dark"] .valuation-tab {
    color:#aeb0a9;
  }
  [data-theme="dark"] .valuation-tab.active {
    color:#f5f5f1; background:#30312d;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 3px 10px rgba(0,0,0,.2);
  }
  .page-panel { grid-column:1/-1; grid-row:4; }
  .portfolios {
    gap:10px; padding:0; border:0; border-radius:0; background:transparent;
    box-shadow:none; backdrop-filter:none;
  }
  .portfolio-source {
    flex-direction:row; align-items:center; gap:8px; margin-top:0; padding:10px 12px;
    border-radius:15px; font-size:9px;
  }
  .portfolio-source span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .source-link { width:auto; margin-left:auto; justify-content:center; padding:7px 10px; font-size:10px; white-space:nowrap; }
  .portfolio { display:block; border-color:rgba(17,24,39,.075); border-radius:21px; box-shadow:none; }
  .portfolio-header {
    display:grid; grid-template-columns:minmax(0,1fr) auto;
    align-items:center; column-gap:10px; padding:17px 19px 13px;
  }
  .portfolio-header .left { min-width:0; margin-top:0; }
  .portfolio-header .name { font-size:21px; white-space:nowrap; }
  .portfolio-section-heading { margin:0 19px 8px; padding-top:13px; }
  .portfolio-chart { margin:0 12px 12px; padding:14px 12px 11px; border-radius:17px; }
  .chart-head { gap:7px; }
  .chart-metrics { gap:3px; }
  .chart-metric { padding-right:5px; }
  .chart-metric span,.chart-period-result span { margin-bottom:3px; font-size:8px; }
  .chart-metric strong,.chart-period-result strong { font-size:15px; }
  .chart-period-result { min-width:54px; }
  .chart-plot { margin-top:5px; }
  .nav-chart { height:188px; }
  .chart-line { stroke-width:2.7; }
  .chart-y-label,.chart-x-label { font-size:9px; }
  .chart-footer { justify-content:flex-end; align-items:flex-end; gap:6px; }
  .chart-origin { display:none; }
  .chart-ranges button { padding:5px 7px; font-size:8px; }
  .holdings { padding:0 19px 13px; }
  .footer {
    display:grid; gap:2px; padding:9px 5px 2px; font-size:8px; line-height:1.45;
  }
  .footer-note { max-width:none; text-align:left; }
  .share-card { padding:21px; border-radius:23px; }
  .valuation-card { display:block; padding:17px 19px 15px; border-radius:23px; }
  .valuation-header {
    display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px 10px;
  }
  .valuation-title { font-size:25px; }
  .valuation-description { margin-top:5px; font-size:12px; line-height:1.45; }
  .valuation-method-link {
    justify-self:start; padding:6px 10px; border-color:rgba(17,24,39,.075);
    background:rgba(255,255,255,.68); box-shadow:0 5px 18px rgba(15,23,42,.035);
    font-size:11px; white-space:nowrap;
  }
  .valuation-update-stamp {
    justify-self:end; margin-right:0; padding:6px 9px; font-size:10px;
    background:rgba(20,184,166,.075); box-shadow:none;
  }
  .valuation-update-stamp::before { width:5px; height:5px; box-shadow:0 0 0 3px rgba(20,184,166,.095); }
  .valuation-legend {
    grid-column:1/-1; width:100%; margin-top:0; padding:0; gap:12px;
    color:rgba(107,114,128,.82); font-size:10px;
  }
  .legend-dot { width:7px; height:7px; }
  .valuation-tabs { display:flex; margin-top:11px; padding:3px; background:#f5f7fa; }
  .valuation-tab { flex:1; padding:8px 8px; font-size:13px; }
  .valuation-summary {
    grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin:9px 0 7px;
    padding:5px 4px; border:1px solid rgba(17,24,39,.075); border-radius:14px;
    background:linear-gradient(180deg,rgba(248,250,252,.88),rgba(255,255,255,.72));
  }
  .valuation-stat {
    min-width:0; padding:1px 5px; border-left:1px solid rgba(17,24,39,.07);
    border-radius:0; background:transparent; text-align:center;
  }
  .valuation-filter { text-align:center; }
  .valuation-filter.active::after { display:none; }
  .valuation-stat:first-child { border-left:0; }
  .valuation-stat span {
    display:block; margin-bottom:3px; overflow:hidden;
    color:rgba(107,114,128,.82); font-size:9px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap;
  }
  .valuation-stat strong {
    display:block; font-size:19px; line-height:1.04; letter-spacing:-.04em;
  }
  .valuation-stat em { display:none; }
  .valuation-row,.valuation-row.state-buy,.valuation-row.state-strong-buy,.valuation-row.state-sell {
    grid-template-columns:minmax(0,1fr) auto; gap:5px 12px; margin:8px 0 0;
    min-height:0; padding:11px 12px 12px; border:1px solid rgba(17,24,39,.07);
    border-radius:18px; background:#fff; box-shadow:0 6px 18px rgba(15,23,42,.025);
  }
  .valuation-row.state-buy,.valuation-row.state-strong-buy {
    background:linear-gradient(100deg,rgba(18,184,173,.07),#fff 48%);
  }
  .valuation-row.state-sell {
    background:linear-gradient(100deg,rgba(229,72,77,.05),#fff 48%);
  }
  .valuation-symbol-line {
    display:flex; align-items:center; gap:7px; flex-wrap:nowrap; min-width:0;
  }
  .valuation-ticker { flex:0 0 auto; width:auto; min-width:42px; padding:5px 8px; border-radius:10px; font-size:10px; }
  .valuation-company strong { flex:0 1 auto; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
  .valuation-holding {
    display:inline-flex; flex:0 0 auto; align-items:center; padding:4px 7px;
    font-size:9px; line-height:1; white-space:nowrap;
  }
  .status-chip.inline { display:none; }
  .valuation-company strong { font-size:18px; letter-spacing:-.03em; }
  .valuation-company>span.valuation-meta { display:none; }
  .valuation-company>span,.valuation-current span { margin-top:4px; font-size:11px; }
  .valuation-current {
    display:flex; flex-direction:column; justify-content:center; align-self:stretch;
    min-width:96px; text-align:right;
  }
  .valuation-current strong { font-size:23px; line-height:1; letter-spacing:-.045em; }
  .valuation-current span { margin-top:6px; line-height:1.1; }
  .signal-pill { font-size:9px; }
  .valuation-range { grid-column:1/-1; padding-top:0; }
  .range-labels { gap:5px; margin-bottom:7px; font-size:10px; }
  .range-labels span { padding:5px 2px; border-radius:8px; }
  .range-track { height:7px; margin-bottom:17px; }
  .price-pin { width:12px; height:12px; border-width:2px; box-shadow:0 3px 9px rgba(15,23,42,.16); }
  .price-pin b { top:10px; bottom:auto; padding:3px 6px; border-radius:6px; font-size:9px; }
  .status-chip { padding:5px 8px; font-size:10px; }
  .valuation-note { padding:14px 8px 0; font-size:11px; line-height:1.45; }
  .share-toolbar { justify-content:stretch; }
  .sort-btn { flex:1; padding-inline:4px; }
  .sort-label { display:none; }
  .share-table-header,.share-row { grid-template-columns:22px 62px minmax(70px,1fr) 65px; gap:7px; }
  .share-table-header span:nth-child(4),.share-row .share-day { display:none; }
  .detail-grid { grid-template-columns:1fr; }
  .footer { grid-column:1/-1; flex-direction:column; }
  .footer-note { text-align:left; }
}

@media (prefers-reduced-motion:reduce) {
  .page-panel.active { animation:none; }
}