/* 全行情平台 — 深色专业终端风格 · 红涨蓝跌 */
:root {
  --up: #ff4d5e; --up-soft: rgba(255,77,94,.12);
  --down: #3b9eff; --down-soft: rgba(59,158,255,.12);
  --bg: #0a0e17; --bg2: #0d1322;
  --card: #131b2b; --card2: #182234; --line: rgba(148,163,184,.10);
  --line2: rgba(148,163,184,.16);
  --txt: #dbe4f0; --sub: #7c8aa0; --faint: #55637a;
  --accent: #4c8dff; --accent-soft: rgba(76,141,255,.15);
  --gold: #ffc94d;
  --mono: "SF Mono","JetBrains Mono","Roboto Mono",Consolas,monospace;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { color-scheme: dark; }
body {
  background: radial-gradient(1200px 600px at 70% -10%, #14203a 0%, var(--bg) 55%) fixed;
  color: var(--txt);
  font: 13px/1.55 -apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  min-height: 100vh;
}
a { color:inherit; text-decoration:none; }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:#26324a; border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:#33415e; }
::-webkit-scrollbar-track { background:transparent; }
.num, .pct, .v, .cap { font-variant-numeric: tabular-nums; }

/* ── 顶部导航 ─────────────────────────── */
.topnav {
  display:flex; align-items:center; gap:2px; height:52px; padding:0 20px;
  background: rgba(13,19,34,.82); backdrop-filter: blur(12px);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:100;
}
.topnav .logo {
  font-weight:800; font-size:16px; margin-right:20px; letter-spacing:.5px;
  background: linear-gradient(92deg,#6ea8ff,#9d7bff 60%,#ff7b9c);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  display:flex; align-items:center; gap:7px;
}
.topnav .logo::before { content:""; width:8px; height:18px; border-radius:2px;
  background:linear-gradient(180deg,var(--up),var(--accent)); }
.topnav a.nav {
  padding:17px 15px; color:var(--sub); font-size:13.5px;
  border-bottom:2px solid transparent; transition:color .15s;
}
.topnav a.nav:hover { color:var(--txt); }
.topnav a.nav.on { color:#fff; border-bottom-image:linear-gradient(90deg,var(--accent),#9d7bff); border-bottom:2px solid var(--accent); font-weight:600; }
.topnav .date { margin-left:auto; color:var(--sub); font-family:var(--mono); font-size:12px;
  border:1px solid var(--line2); padding:4px 10px; border-radius:20px; }
.userbox { display:flex; align-items:center; gap:8px; margin-left:12px; }
.userbox .uname { color:var(--txt); font-size:12.5px; background:var(--accent-soft); border:1px solid var(--line2);
  padding:4px 11px; border-radius:20px; }
.userbox .logout { border:1px solid var(--line2); background:transparent; color:var(--sub); font-size:12px;
  padding:4px 11px; border-radius:20px; cursor:pointer; transition:all .15s; }
.userbox .logout:hover { color:var(--up); border-color:var(--up); }

.wrap { max-width:1560px; margin:0 auto; padding:20px 20px 40px; }
h2.sec { font-size:15px; margin:26px 0 12px; display:flex; align-items:center; gap:8px; letter-spacing:.3px; }
h2.sec::before { content:""; width:3px; height:14px; border-radius:2px; background:linear-gradient(180deg,var(--accent),#9d7bff); }
h2.sec .tag { font-size:11px; color:var(--sub); font-weight:400; font-family:var(--mono); }

/* ── KPI 概览条 ───────────────────────── */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:18px; }
.kpi { background:linear-gradient(160deg,var(--card2),var(--card)); border:1px solid var(--line);
  border-radius:12px; padding:12px 14px; }
.kpi .k { font-size:11px; color:var(--sub); letter-spacing:.5px; }
.kpi .n { font-size:20px; font-weight:700; font-family:var(--mono); margin-top:3px; }
.kpi .s { font-size:11px; color:var(--faint); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── 板块分类/卡片 ─────────────────────── */
.cats { display:flex; gap:7px; margin-bottom:14px; flex-wrap:wrap; }
.cats button {
  border:1px solid var(--line2); background:var(--card); color:var(--sub);
  border-radius:8px; padding:6px 15px; cursor:pointer; font-size:13px; transition:all .15s;
}
.cats button:hover { color:var(--txt); border-color:var(--accent); }
.cats button.on { background:linear-gradient(135deg,#2b5cff,#7a4dff); color:#fff; border-color:transparent;
  box-shadow:0 4px 14px rgba(76,90,255,.35); }
.subgrp { margin-bottom:14px; }
.subgrp .subt { color:var(--sub); font-size:12px; margin:10px 0 8px; letter-spacing:1px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:10px; }
.board {
  position:relative; background:linear-gradient(165deg,var(--card2) 0%,var(--card) 60%);
  border:1px solid var(--line); border-radius:12px; padding:11px 13px 10px; cursor:pointer;
  transition:border-color .15s, transform .15s, box-shadow .15s; overflow:hidden;
}
.board::after { content:""; position:absolute; inset:0 0 auto 0; height:2px; opacity:0; transition:opacity .15s;
  background:linear-gradient(90deg,var(--accent),transparent); }
.board:hover { border-color:var(--line2); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.35); }
.board:hover::after { opacity:1; }
.board .nm { font-weight:600; font-size:13.5px; }
.board .pct { font-size:16px; font-weight:700; margin-top:3px; font-family:var(--mono); }
.board .meta { font-size:11px; color:var(--faint); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.board svg { display:block; margin-top:7px; }
.up { color:var(--up); } .down { color:var(--down); }

/* ── 四列自选榜单 ─────────────────────── */
.cols4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.col { background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.col h3 { font-size:12.5px; padding:11px 14px; border-bottom:1px solid var(--line); color:var(--txt);
  letter-spacing:.5px; background:linear-gradient(180deg,rgba(76,141,255,.07),transparent); }
.col .body { padding:5px 7px; max-height:430px; overflow-y:auto; }
.stk { display:flex; align-items:center; gap:8px; padding:8px 7px; border-radius:8px; cursor:pointer; transition:background .12s; }
.stk:hover { background:var(--accent-soft); }
.stk .l { flex:1; min-width:0; }
.stk .nm { font-weight:600; }
.stk .ind { font-size:11px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stk .v { font-size:14px; font-weight:700; white-space:nowrap; }
.stk .cap { font-size:10px; color:var(--faint); text-align:right; font-family:var(--mono); }
.stk svg { flex:none; }

/* ── 资讯 ─────────────────────────────── */
.news-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(370px,1fr)); gap:14px; }
.news-card { background:var(--card); border:1px solid var(--line); border-radius:14px; display:flex; flex-direction:column; max-height:560px; overflow:hidden; }
.news-card .hd { display:flex; align-items:center; padding:13px 16px; border-bottom:1px solid var(--line); gap:9px;
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent); }
.news-card .hd .dot { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px currentColor; }
.news-card .hd .nm { font-weight:700; font-size:14px; }
.news-card .hd .upd { color:var(--faint); font-size:11px; margin-top:2px; font-family:var(--mono); }
.news-card .hd a { margin-left:auto; color:var(--accent); font-size:12px; white-space:nowrap; }
.news-card .hd a:hover { text-decoration:underline; }
.news-card .list { overflow-y:auto; padding:6px 16px 12px; }
.news-card .item { padding:9px 0; border-bottom:1px dashed var(--line); display:flex; gap:12px; align-items:baseline; }
.news-card .item:last-child { border-bottom:none; }
.news-card .item a { flex:1; color:var(--txt); }
.news-card .item a:hover { color:var(--accent); }
.news-card .item .t { color:var(--faint); font-size:11px; white-space:nowrap; font-family:var(--mono); }

/* ── 估值页布局 ───────────────────────── */
.vwrap { display:flex; gap:14px; align-items:stretch; }
.vleft { flex:1; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; position:relative; }
.vright { width:288px; display:flex; flex-direction:column; gap:12px; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:13px; }
.panel h3 { font-size:12.5px; margin-bottom:9px; letter-spacing:.5px; color:var(--txt); }
.radio { display:flex; gap:6px; flex-wrap:wrap; }
.radio button { border:1px solid var(--line2); background:transparent; color:var(--sub);
  padding:5px 13px; border-radius:16px; cursor:pointer; font-size:12px; transition:all .15s; }
.radio button:hover { color:var(--txt); }
.radio button.on { background:linear-gradient(135deg,#2b5cff,#7a4dff); color:#fff; border-color:transparent; }
.searchbox { display:flex; gap:6px; position:relative; }
.searchbox input, .filters input, select.metric, .scr select {
  border:1px solid var(--line2); background:var(--bg2); color:var(--txt);
  border-radius:8px; padding:6px 10px; font-size:12.5px; outline:none; transition:border-color .15s;
}
.searchbox input:focus, .filters input:focus, select.metric:focus { border-color:var(--accent); }
.filters input { width:100%; }
.catlist { overflow-y:auto; max-height:300px; margin-top:7px; }
.catlist .it { padding:6px 9px; border-radius:7px; cursor:pointer; display:flex; font-size:12.5px; }
.catlist .it:hover { background:var(--accent-soft); }
.catlist .it.on { background:var(--accent-soft); color:var(--accent); font-weight:600; }
.catlist .it .c { margin-left:auto; color:var(--faint); font-size:11px; font-family:var(--mono); }
.filters .row { display:flex; gap:6px; align-items:center; margin-bottom:7px; }
.filters label { width:60px; color:var(--sub); font-size:12px; }
select.metric { font-size:13px; }
#tip { position:fixed; background:rgba(10,14,23,.96); border:1px solid var(--line2); color:#fff;
  border-radius:10px; padding:10px 13px; font-size:12px; pointer-events:none; display:none; z-index:99;
  line-height:1.7; box-shadow:0 10px 30px rgba(0,0,0,.5); font-variant-numeric:tabular-nums; }
#tip b { font-size:13px; }
.axis-note { color:var(--faint); font-size:11px; }
.selinfo { position:absolute; top:12px; left:16px; font-size:12px; color:var(--sub); z-index:2; }
#hits { background:var(--card2) !important; }

/* ── Tabs ─────────────────────────────── */
.tabs { display:flex; gap:8px; margin-bottom:16px; }
.tabs a { padding:8px 18px; border-radius:10px; background:var(--card); border:1px solid var(--line);
  color:var(--sub); transition:all .15s; }
.tabs a:hover { color:var(--txt); border-color:var(--line2); }
.tabs a.on { background:linear-gradient(135deg,#2b5cff,#7a4dff); color:#fff; border-color:transparent;
  font-weight:600; box-shadow:0 4px 14px rgba(76,90,255,.3); }
.back { display:inline-block; margin:2px 0 12px; color:var(--sub); }
.back:hover { color:var(--accent); }

/* ── 抽屉 ─────────────────────────────── */
.drawer { position:fixed; top:0; right:-480px; width:460px; height:100vh; background:var(--bg2);
  border-left:1px solid var(--line2); box-shadow:-12px 0 40px rgba(0,0,0,.5);
  transition:right .22s ease; z-index:50; display:flex; flex-direction:column; }
.drawer.open { right:0; }
.drawer .hd { padding:15px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; }
.drawer .hd b { font-size:15px; }
.drawer .hd .x { margin-left:auto; cursor:pointer; font-size:18px; color:var(--sub); padding:0 6px; }
.drawer .hd .x:hover { color:#fff; }
.drawer .body { overflow-y:auto; flex:1; padding:6px; }
.drawer .ft { padding:11px 18px; border-top:1px solid var(--line); }
.drawer .ft a { color:var(--accent); }
.empty { color:var(--faint); text-align:center; padding:40px 0; }

@media (max-width:1100px){
  .cols4{grid-template-columns:repeat(2,1fr);}
  .vwrap{flex-direction:column;} .vright{width:auto;}
}