/* Shared visual system: compact purple header, white panels, red up / green down.
   Keep theme and common controls in this file; features.css contains page layouts. */
:root {
  --color-primary-1:#eef0ff; --color-primary-2:#e0e4ff; --color-primary-3:#bcc5ff;
  --color-primary-4:#9ba8fa; --color-primary-5:#818cf8; --color-primary-6:#6574dc;
  --color-primary-7:#4e5bc3; --color-primary-8:#3d4fb0; --color-primary-9:#303e91;
  --color-primary-10:#252f72; --color-primary:var(--color-primary-6);
  --color-red-6:#ff2638; --color-green-6:#27952e;
  --color-up:var(--color-red-6); --color-down:var(--color-green-6); --color-flat:#858894;
  --color-up-bg:color-mix(in srgb,var(--color-up) 9%,transparent);
  --color-down-bg:color-mix(in srgb,var(--color-down) 9%,transparent);
  --color-bg:#f5f5f5; --color-surface:#fff; --color-surface-alt:#f8f9fb;
  --color-surface-sunken:#eef0f4; --color-text:#292b32; --color-text-secondary:#626671;
  --color-text-tertiary:#777c87; --color-border:#e3e5eb; --color-border-light:#eff0f4;
  --color-warning:#9b661a; --color-warning-bg:#fff7e9; --color-warning-border:#f1d6a9;
  --color-purple:#7557ac; --color-purple-bg:#f2edfb;
  --gold:#d48806; --silver:#8c8c8c; --bronze:#ad4e00;
  --radius-6:6px; --radius-10:10px; --radius-12:12px; --radius-16:12px;
  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-15:15px;
  --fs-16:16px; --fs-18:18px; --fs-20:20px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --shadow-card:0 1px 3px #1f24300c;
  --header-h:62px; --tabbar-h:56px; --maxw:1600px;
  --header-gradient:linear-gradient(110deg,#4856b5 0%,#5868d3 55%,#7c84f4 100%);
  --header-fg:#fff; --header-muted:#ffffffc4; --header-shadow:0 1px 4px #252d561f;
  --glass-bg:#ffffff24; --glass-bg-hover:#ffffff38; --glass-bg-active:#ffffff50; --glass-edge:#ffffff30;
  --glass-ring:#ffffff55; --glass-outline:#ffffff70; --glass-focus:#ffffffe0;
  color-scheme:light;
}
:root[data-theme='dark'] {
  color-scheme:dark; --color-bg:#141622; --color-surface:#202332;
  --color-surface-alt:#272b3d; --color-surface-sunken:#2e3347;
  --color-text:#edf0fa; --color-text-secondary:#c2c7d9; --color-text-tertiary:#a1a9c0;
  --color-border:#3d4359; --color-border-light:#30364b;
  --color-primary-1:#292f53; --color-primary-2:#394373; --color-primary:#a2afff;
  --color-up:#ff6c78; --color-down:#76cc71; --color-flat:#a1a9c0;
    --color-warning:#f0c581; --color-warning-bg:#342d23; --color-warning-border:#675333;
    --color-purple:#c5aff7; --color-purple-bg:#342b4a;
  --shadow-card:0 1px 3px #0003;
  --header-gradient:linear-gradient(110deg,#343f87,#4d58a4 65%,#626abc);
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme='light']) {
    color-scheme:dark; --color-bg:#141622; --color-surface:#202332;
    --color-surface-alt:#272b3d; --color-surface-sunken:#2e3347;
    --color-text:#edf0fa; --color-text-secondary:#c2c7d9; --color-text-tertiary:#a1a9c0;
    --color-border:#3d4359; --color-border-light:#30364b;
    --color-primary-1:#292f53; --color-primary-2:#394373; --color-primary:#a2afff;
    --color-up:#ff6c78; --color-down:#76cc71; --color-flat:#a1a9c0;
    --color-warning:#f0c581; --color-warning-bg:#342d23; --color-warning-border:#675333;
    --color-purple:#c5aff7; --color-purple-bg:#342b4a;
    --shadow-card:0 1px 3px #0003;
    --header-gradient:linear-gradient(110deg,#343f87,#4d58a4 65%,#626abc);
  }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--color-bg); color:var(--color-text); font-size:var(--fs-13);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.5; }
a { color:var(--color-primary); }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { opacity:.5; cursor:not-allowed; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:2px solid var(--color-primary-5); outline-offset:3px;
}
[hidden] { display:none!important; }
.icon { display:inline-block; width:16px; height:16px; flex-shrink:0; background:currentColor;
  mask-repeat:no-repeat; mask-position:center; mask-size:contain;
  -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain; vertical-align:middle; }
.icon-button { border:0; background:transparent; color:inherit; display:inline-flex; align-items:center;
  justify-content:center; width:30px; height:30px; padding:0; border-radius:50%; flex-shrink:0; }
.icon-button:hover { background:var(--color-surface-sunken); }
.app-shell { width:100%; min-height:100dvh; padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px)); }
.app-header { position:sticky; top:0; z-index:20; padding:12px 16px;
  padding-top:calc(12px + env(safe-area-inset-top,0px)); color:var(--header-fg);
  background:var(--header-gradient); box-shadow:var(--header-shadow); }
.header-top { display:flex; align-items:center; justify-content:space-between; min-height:36px; gap:8px; }
.header-navigation { display:flex; align-items:center; gap:9px; min-width:0; }
.header-back { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:32px; height:32px; padding:0; border:0; border-radius:50%; color:var(--header-fg);
  background:var(--glass-bg); box-shadow:inset 0 1px 0 var(--glass-edge),0 2px 6px #0000000d; }
.header-back:hover { background:var(--glass-bg-hover); }
.header-back:active { background:var(--glass-bg-active); }
.header-back:focus-visible { outline-color:var(--header-fg); }
.header-heading { display:flex; flex-direction:column; gap:2px; font-size:14px; line-height:1.45;
  margin:0; border-left:4px solid #ffda49; padding-left:8px; white-space:nowrap; }
.header-heading small { font-size:10px; font-weight:400; opacity:.88; }
.header-controls,#header-actions,#header-user { display:flex; align-items:center; gap:6px; }
.header-login { color:var(--header-fg); font-size:11px; text-decoration:none; padding:4px 10px;
  border:1px solid var(--glass-outline); border-radius:999px; white-space:nowrap; }
.header-avatar { width:30px; height:30px; border-radius:50%; border:0; background:var(--glass-bg); color:var(--header-fg); font-weight:600; }
.app-header .icon-button,.glass-label { background:var(--glass-bg); box-shadow:inset 0 1px 0 var(--glass-edge); color:var(--header-fg); }
.app-header .icon-button:hover,.glass-label:hover { background:var(--glass-bg-hover); }
.app-header :focus-visible { outline-color:var(--header-fg); }
#header-filters:empty { display:none; }
.ranking-filters { display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:9px; min-width:0; }
.ranking-search { display:flex; align-items:center; width:100%; min-height:30px; padding:0 12px;
  border-radius:999px; background:var(--glass-bg); box-shadow:inset 0 1px 0 var(--glass-edge); color:var(--glass-focus); }
.ranking-search input { width:100%; min-width:0; margin-left:8px; padding:5px 0; color:var(--header-fg);
  font-size:12px; background:none; border:0; outline:0; }
.ranking-search input::placeholder { color:var(--header-muted); }
.ranking-search:focus-within { box-shadow:inset 0 0 0 1px var(--glass-focus); }
.ranking-toolbar { display:flex; gap:6px; align-items:center; flex-wrap:wrap; width:100%; font-size:12px; }
.glass-label { display:inline-flex; align-items:center; gap:4px; border:0; border-radius:999px;
  padding:4px 10px; min-height:28px; font-size:12px; text-decoration:none; }
.glass-tabs { display:flex; max-width:100%; overflow-x:auto; scrollbar-width:none; padding:2px;
  border-radius:999px; background:var(--glass-bg); box-shadow:inset 0 1px 0 var(--glass-edge),0 2px 6px #00000008; }
.glass-tabs::-webkit-scrollbar { display:none; }
.glass-tabs button { border:0; background:none; color:var(--header-fg); flex-shrink:0; border-radius:999px;
  min-height:26px; padding:0 10px; font-size:12px; font-weight:400; white-space:nowrap; }
.glass-tabs button.active,.glass-tabs button[aria-pressed='true'] { background:var(--glass-bg); box-shadow:inset 0 0 0 1px var(--glass-ring); }
.glass-tabs .chips-more { display:none; }
.merge-label { display:flex; align-items:center; gap:4px; margin-left:4px; }
.merge-label input { accent-color:var(--color-primary-5); }
.reset-filters { margin-left:auto; }
/* Legacy filter components share the same header treatment during page migration. */
#header-filters .chip-row { max-width:100%; padding:2px; gap:0; border-radius:999px; background:var(--glass-bg); }
#header-filters .chip { min-height:26px; padding:3px 10px; border:0; background:transparent; color:var(--header-fg); font-size:12px; }
#header-filters .chip.is-active { font-weight:400; background:var(--glass-bg); box-shadow:inset 0 0 0 1px var(--glass-ring); }
#header-filters :is(.chip-label,.range-label,.detail-note,.results-status) { color:var(--header-muted); }
#header-filters :is(.auth-input,.range-input,select) { min-width:0; height:30px; padding:3px 9px;
  background:var(--glass-bg); color:var(--header-fg); border:1px solid var(--glass-edge); border-radius:999px; font-size:12px; }
#header-filters input::placeholder { color:var(--header-muted); }
#header-filters select option { color:var(--color-text); background:var(--color-surface); }
#header-filters .range-grid { width:100%; }
#header-filters .btn-secondary { background:var(--glass-bg); color:var(--header-fg); border-color:var(--glass-edge); }
#header-filters .btn-secondary:hover { background:var(--glass-bg-hover); }
#header-filters .text-link { color:var(--header-fg); }
#app-outlet { width:100%; max-width:var(--maxw); min-width:0; margin:0 auto; padding:14px 16px; }
.site-footer { max-width:var(--maxw); margin:0 auto; padding:4px 16px 16px; text-align:center; font-size:11px; line-height:1.6; }
.site-footer a { color:var(--color-text-tertiary); text-decoration:none; }
.site-footer a:hover { color:var(--color-text-secondary); text-decoration:underline; }
.tabbar { position:fixed; bottom:0; left:0; width:100%; height:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px); display:flex; background:var(--color-surface);
  border-top:1px solid var(--color-border-light); box-shadow:0 -1px 6px #00000006; z-index:20; }
.tabbar a { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; text-decoration:none; color:var(--color-text-tertiary); font-size:10px; }
.tabbar a.is-active { color:var(--color-primary); }
.tabbar .icon { width:18px; height:18px; }
.scroll-top { position:fixed; right:18px; bottom:74px; width:34px; height:34px;
  background:var(--color-primary-6); color:#fff; box-shadow:var(--shadow-card); z-index:25; }
.card { background:var(--color-surface); border-radius:var(--radius-12); box-shadow:var(--shadow-card); }
.muted { color:var(--color-text-tertiary); }
.up { color:var(--color-up); }.down { color:var(--color-down); }.flat { color:var(--color-flat); }
.filter-bar { position:static; background:transparent; padding:8px 0; }
.chip-row { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.chip-row::-webkit-scrollbar { display:none; }
.chip { flex:0 0 auto; min-height:28px; padding:4px 10px; border-radius:999px;
  background:var(--color-surface); border:1px solid var(--color-border);
  color:var(--color-text-secondary); font-size:12px; user-select:none; }
.chip.is-active { background:var(--color-primary-1); border-color:var(--color-primary-2); color:var(--color-primary); font-weight:500; }
.sort-row { margin-top:8px; }
.notice-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 11px;
  font-size:12px; line-height:1.6; color:var(--color-text-secondary); background:var(--color-surface);
  border-radius:var(--radius-12); box-shadow:var(--shadow-card); }
.notice-bar .icon-button { width:22px; height:22px; }
.results-status { font-size:11px; color:var(--color-text-tertiary); padding:8px 2px; min-height:28px; line-height:1.6; }
.app-dialog { width:calc(100% - 24px); max-width:440px; max-height:85dvh; overflow:auto; padding:0;
  border:0; border-radius:var(--radius-12); background:var(--color-surface); color:var(--color-text); box-shadow:0 12px 40px #0004; }
.app-dialog::backdrop { background:#181c3266; backdrop-filter:blur(3px); }
.dialog-header { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 14px; font-size:14px; background:var(--color-surface); border-bottom:1px solid var(--color-border-light); }
.dialog-body { padding:12px 16px 16px; }
.dialog-actions { display:flex; border-top:1px solid var(--color-border-light); }
.dialog-actions button { flex:1; background:none; border:0; padding:12px; color:var(--color-text-secondary); }
.dialog-actions button+button { border-left:1px solid var(--color-border-light); }
.dialog-actions button.primary { color:var(--color-primary); }
.scope-options { display:flex; flex-direction:column; gap:8px; }
.scope-option { display:flex; align-items:center; gap:10px; border:1px solid var(--color-border);
  padding:12px; border-radius:var(--radius-10); cursor:pointer; }
.scope-option input { accent-color:var(--color-primary-6); }
.scope-option>.icon { color:var(--color-primary); }.scope-option strong { font-size:13px; }
.scope-option small { display:block; font-size:11px; color:var(--color-down); margin-top:4px; }
.table-scroll { width:100%; max-width:100%; min-width:0; overflow-x:auto; border-radius:var(--radius-10); }
:is(.data-table,.detail-table) { width:100%; border-collapse:collapse; font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums; }
:is(.data-table,.detail-table) th { color:var(--color-text-secondary); background:var(--color-surface-alt); font-weight:500;
  text-align:right; padding:9px 10px; border-bottom:1px solid var(--color-border); }
:is(.data-table,.detail-table) td { padding:10px; text-align:right; border-bottom:1px solid var(--color-border-light); }
:is(.data-table,.detail-table) :is(td,th):first-child { text-align:left; }
.text-link { border:0; background:none; padding:0; color:var(--color-primary); text-decoration:none; font-size:12px; }
.btn-secondary { display:inline-flex; align-items:center; justify-content:center; gap:5px; border:1px solid var(--color-border);
  padding:6px 12px; min-height:30px; border-radius:999px; background:var(--color-surface); color:var(--color-text-secondary); font-size:12px; text-decoration:none; }
.btn-secondary:hover { border-color:var(--color-primary); color:var(--color-primary); }
@media (min-width:769px) {
  body { padding-left:60px; }.app-shell { padding-bottom:0; }
  .tabbar { top:0; width:60px; height:100dvh; padding:0; flex-direction:column; justify-content:center;
    border-top:0; border-right:1px solid var(--color-border-light); box-shadow:none; }
  .tabbar a { flex:0 0 auto; width:60px; padding:12px 0; }.scroll-top { bottom:24px; }
}
@media (max-width:768px) {
  .app-header { padding:10px; padding-top:calc(10px + env(safe-area-inset-top,0px)); }
  #app-outlet { padding:10px; }.header-top { flex-wrap:wrap; }
  .header-controls { margin-left:auto; }.header-controls,#header-actions { gap:4px; }
  .header-heading { font-size:13px; }.header-back { width:30px; height:30px; }
  .app-header .icon-button { width:28px; height:28px; }
  .header-login { padding:4px 8px; }.ranking-toolbar { gap:5px; }
  .glass-tabs button { padding:0 9px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* ---------- 排行榜列表 ---------- */
.rank-list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.rank-item {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--color-surface);
  border-radius: var(--radius-12);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}
.rank-badge {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-13);
  font-weight: 700;
  color: #fff;
  background: var(--color-surface-sunken);
  color: var(--color-text-tertiary);
}
.rank-badge.rank-1 { background: linear-gradient(135deg, #ffd666, #d48806); color: #fff; }
.rank-badge.rank-2 { background: linear-gradient(135deg, #d9d9d9, #8c8c8c); color: #fff; }
.rank-badge.rank-3 { background: linear-gradient(135deg, #ffbb96, #ad4e00); color: #fff; }

.fund-main { min-width: 0; }
.fund-name {
  font-size: var(--fs-13);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fund-meta {
  margin-top: 3px;
  font-size: var(--fs-11);
  color: var(--color-text-tertiary);
  display: flex;
  gap: 8px;
}
.fund-nav { text-align: right; }
.fund-nav .nav-val { font-size: var(--fs-15); font-weight: 600; font-variant-numeric: tabular-nums; }
.fund-nav .nav-pct { margin-top: 3px; font-size: var(--fs-16); font-weight: 700; font-variant-numeric: tabular-nums; }

/* 展开明细 */
.fund-detail {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-border);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 6px;
}
.detail-cell { text-align: center; }
.detail-cell .lbl { font-size: var(--fs-11); color: var(--color-text-tertiary); }
.detail-cell .val { margin-top: 2px; font-size: var(--fs-13); font-weight: 600; font-variant-numeric: tabular-nums; }

/* 状态 */
.state { text-align:center; padding:32px 16px; line-height:1.7; color: var(--color-text-tertiary); }
.state h2 { font-size:16px; color:var(--color-text); font-weight:600; }
.tag { display:inline-flex; align-items:center; padding:2px 6px; border-radius:4px; color:var(--color-primary); background:var(--color-primary-1); font-size:11px; }
.state .big { font-size: 32px; margin-bottom: 8px; }
.btn {
  display: inline-block;
  margin-top: 12px;
  min-height: 32px;
  padding: 6px 16px;
  text-decoration: none;
  border-radius: 999px;
  background: var(--color-primary-6);
  color: #fff;
  border: none;
  font-size: var(--fs-12);
  cursor: pointer;
}
.skeleton {
  background: linear-gradient(90deg, var(--color-surface-sunken) 25%, var(--color-surface-alt) 37%, var(--color-surface-sunken) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s infinite;
  border-radius: var(--radius-12);
  height: 68px;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.load-more { text-align: center; padding: 16px; }
.updated-tip { text-align: center; font-size: var(--fs-11); color: var(--color-text-tertiary); padding: 12px 0 4px; }

/* ---------- 通用小标题 ---------- */
.section-title {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: 4px 2px 8px;
}

/* ---------- 收藏星标 ---------- */
.fav-star {
  border: none;
  background: transparent;
  color: var(--color-text-tertiary);
  font-size: var(--fs-16);
  line-height: 1;
  padding: 0 4px 0 0;
  cursor: pointer;
  vertical-align: -1px;
}
.fav-star.on { color: var(--gold); }

/* ---------- 市场概览：指数卡片 ---------- */
.index-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.index-card {
  background: var(--color-surface);
  border-radius: var(--radius-12);
  padding: 14px;
  box-shadow: var(--shadow-card);
  border-left: 0;
}
.index-card.up { border-left-color: var(--color-up); }
.index-card.down { border-left-color: var(--color-down); }
.index-name { font-size: var(--fs-13); color: var(--color-text-secondary); }
.index-price { font-size: var(--fs-20); font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; }
.index-change { margin-top: 4px; font-size: var(--fs-13); font-weight: 600; display: flex; gap: 8px; align-items: baseline; font-variant-numeric: tabular-nums; }
.index-abs { font-size: var(--fs-12); opacity: 0.85; }
.market-index-section + .market-index-section { margin-top:18px; }
.index-quote-time { margin-top:6px; color:var(--color-text-tertiary); font-size:var(--fs-11); line-height:1.5; overflow-wrap:anywhere; }

/* ---------- 板块榜 ---------- */
.sector-list { display: flex; flex-direction: column; gap: 8px; }
.sector-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  background: var(--color-surface);
  border-radius: var(--radius-12);
  box-shadow: var(--shadow-card);
}
.sector-rank {
  width: 22px; height: 22px; border-radius: var(--radius-6);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-12); font-weight: 700;
  background: var(--color-surface-sunken); color: var(--color-text-tertiary);
}
.sector-item:nth-child(1) .sector-rank { background: linear-gradient(135deg,#ffd666,#d48806); color:#fff; }
.sector-item:nth-child(2) .sector-rank { background: linear-gradient(135deg,#d9d9d9,#8c8c8c); color:#fff; }
.sector-item:nth-child(3) .sector-rank { background: linear-gradient(135deg,#ffbb96,#ad4e00); color:#fff; }
.sector-name { font-size:var(--fs-13); font-weight:500; }
.sector-sub { margin-top: 3px; font-size: var(--fs-11); display: flex; gap: 8px; flex-wrap: wrap; }
.sector-nums { text-align: right; }
.sector-pct { font-size:var(--fs-14); font-weight:600; font-variant-numeric: tabular-nums; }
.sector-flow { margin-top: 3px; font-size: var(--fs-11); }

/* ---------- 自选 ---------- */
.fav-list { display: flex; flex-direction: column; gap: 8px; }
.fav-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px; background: var(--color-surface);
  border-radius: var(--radius-12); box-shadow: var(--shadow-card);
}
.fav-remove {
  border: 1px solid var(--color-border);
  background: transparent; color: var(--color-text-tertiary);
  font-size: var(--fs-12); padding: 5px 12px; border-radius: 999px; cursor: pointer;
}

/* ---------- 登录 / 注册 ---------- */
.auth-wrap { padding: 24px 4px; }
.auth-card {
  max-width: 340px; margin: 0 auto;
  background: var(--color-surface); border-radius: var(--radius-16);
  box-shadow: var(--shadow-card); padding: 24px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.auth-logo { font-size: 40px; text-align: center; }
.auth-title { font-size: var(--fs-20); font-weight: 700; text-align: center; }
.auth-sub { font-size: var(--fs-12); color: var(--color-text-tertiary); text-align: center; margin-top: -6px; margin-bottom: 4px; }
.auth-input {
  min-width:0; height:36px; padding:0 11px; font-size:var(--fs-13);
  border: 1px solid var(--color-border); border-radius: var(--radius-10);
  background: var(--color-surface-alt); color: var(--color-text); outline: none;
}
.auth-input:focus { border-color: var(--color-primary-5); background: var(--color-surface); }
.auth-submit { width: 100%; height: 38px; margin-top: 4px; font-size: var(--fs-15); }
.auth-switch { text-align: center; font-size: var(--fs-13); color: var(--color-text-secondary); }
.auth-switch a { color: var(--color-primary-6); cursor: pointer; margin-left: 4px; }
.auth-note { font-size: var(--fs-11); color: var(--color-text-tertiary); text-align: center; margin-top: 2px; }
.auth-card .auth-form { min-width: 0; gap: 12px; }
.auth-card .auth-field { gap: 5px; color: var(--color-text-secondary); }
.auth-card .auth-field span { font-weight: 600; }
.auth-card .auth-input { width: 100%; height: 40px; }
.auth-code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; min-width: 0; }
.auth-code-row .auth-field { min-width: 0; }
.auth-code-send { min-width: 92px; height: 40px; padding: 0 8px; white-space: nowrap; }
.auth-error { margin: 0; color: var(--color-up); font-size: var(--fs-12); }
.auth-error:empty { display: none; }
.auth-switch-button { padding: 0; margin-left: 4px; border: 0; background: transparent;
  color: var(--color-primary); font-weight: 600; }
.auth-forgot { align-self: flex-end; margin: -6px 0 0; font-size: var(--fs-12); font-weight: 500; }
@media (max-width: 360px) {
  .auth-wrap { padding: 12px 0; }
  .auth-card { padding: 20px 14px; }
  .auth-code-send { min-width: 84px; font-size: var(--fs-12); }
}


/* ---------- toast ---------- */
#toast-host {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 20px);
  transform: translateX(-50%); z-index: 100;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.toast {
  background: rgba(0, 0, 0, 0.82); color: #fff;
  font-size: var(--fs-13); padding: 9px 16px; border-radius: 999px;
  opacity: 0; transform: translateY(8px); transition: all .22s;
  max-width: 80vw;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background: rgba(22, 163, 74, 0.92); }

/* ---------- 龙虎榜 ---------- */
.longhu-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: start;
  gap: 10px;
  padding: 12px;
  background: var(--color-surface);
  border-radius: var(--radius-12);
  box-shadow: var(--shadow-card);
}
.longhu-item .sector-rank { margin-top: 2px; }
.longhu-main { min-width: 0; }
.longhu-head { display: flex; align-items: baseline; gap: 8px; }
.longhu-name { font-size: var(--fs-14); font-weight: 600; }
.longhu-code { font-size: var(--fs-11); color: var(--color-text-tertiary); }
.longhu-chg { margin-left: auto; font-size: var(--fs-15); font-weight: 700; font-variant-numeric: tabular-nums; }
.longhu-reason {
  margin-top: 5px; font-size: var(--fs-11); color: var(--color-text-secondary);
  background: var(--color-surface-sunken); border-radius: var(--radius-6);
  padding: 3px 8px; display: inline-block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.longhu-nums {
  margin-top: 7px; display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: var(--fs-12); font-variant-numeric: tabular-nums;
}

/* ---------- 功能快捷入口 ---------- */
.quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.quick-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 4px;
  background: var(--color-surface);
  border-radius: var(--radius-12);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: var(--color-text-secondary);
  font-size: var(--fs-12);
}
.quick-cell .quick-ic { color:var(--color-primary); line-height:1; }
.quick-cell .icon { width:20px; height:20px; }

/* ---------- QDII ---------- */
.qdii-note {
  font-size: var(--fs-12);
  line-height: 1.6;
  color: var(--color-text-secondary);
  background: var(--color-primary-1);
  border: 1px solid var(--color-primary-2);
  border-radius: var(--radius-10);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.qdii-note strong { color: var(--color-primary-7); }
.qdii-est { font-weight: 600; }

@media(min-width:769px) { .index-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }