:root{
  --bg:#f6f8fc;--card:#ffffff;--ink:#16233b;--muted:#5b6b85;--line:#e3e9f4;
  --brand:#2b6cff;--brand2:#123c9e;--up:#e5484d;--down:#1a9e55;--gold:#f5a623;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
a{color:var(--brand);text-decoration:none}

/* 顶栏 */
#topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px}
.brand b{font-size:15px;letter-spacing:.5px;color:var(--brand2)}
.brand span{display:block;font-size:12px;color:var(--muted)}
#topbar nav{display:flex;gap:18px}
#topbar nav a{color:var(--muted);font-size:14px;font-weight:500}
#topbar nav a:hover{color:var(--brand)}

/* HERO */
.hero{position:relative;padding:96px 0 72px;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:
 radial-gradient(600px 300px at 85% 0%,rgba(43,108,255,.14),transparent 60%),
 radial-gradient(500px 260px at 10% 90%,rgba(245,166,35,.12),transparent 60%);z-index:-1}
.kicker{color:var(--brand);font-weight:700;letter-spacing:3px;font-size:13px;margin-bottom:14px}
.hero h1{font-size:46px;line-height:1.2;color:var(--brand2);letter-spacing:1px}
.hero .sub{color:var(--muted);margin:18px 0 34px;max-width:640px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;box-shadow:0 2px 10px rgba(22,35,59,.05)}
.kpi b{font-size:28px;color:var(--brand2)}
.kpi i{display:block;font-style:normal;color:var(--muted);font-size:13px;margin-top:4px}
.upd{margin-top:22px;color:var(--muted);font-size:13px}

/* 通用section */
.sec{padding:72px 0}
.sec-alt{background:#eef2fa}
.sec-head{margin-bottom:28px}
.sec-head h2{font-size:26px;color:var(--brand2)}
.sec-head p{color:var(--muted);font-size:14px;margin-top:6px}

/* 行情卡片 */
.quotes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.qcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:0 2px 10px rgba(22,35,59,.05)}
.qcard .sym{font-size:12px;color:var(--muted);letter-spacing:1px}
.qcard .nm{font-size:17px;font-weight:700;margin:2px 0 8px}
.qcard .px{font-size:24px;font-weight:800}
.qcard .chg{font-size:13px;font-weight:600;margin-top:2px}
.qcard .vol{font-size:12px;color:var(--muted);margin-top:8px}
.up{color:var(--up)} .down{color:var(--down)}

/* 工具栏与表格 */
.toolbar{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.toolbar input,.toolbar select{padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:14px;outline:none;min-width:160px}
.toolbar input:focus,.toolbar select:focus{border-color:var(--brand)}
.tbl-box{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:auto;box-shadow:0 2px 10px rgba(22,35,59,.05);max-height:640px}
.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:860px}
.tbl thead th{position:sticky;top:0;background:#f2f6ff;color:var(--brand2);text-align:left;padding:12px 14px;font-size:13px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl tbody tr:hover{background:#f7faff}
.tbl .r{text-align:right}
.rk{display:inline-block;min-width:34px;height:24px;line-height:24px;text-align:center;border-radius:7px;background:#eef3ff;color:var(--brand2);font-weight:700;font-size:12px}
.rk.top{background:linear-gradient(135deg,#f5a623,#f7c96b);color:#fff}
.empty{text-align:center;color:var(--muted);padding:30px 0}

/* 国别 */
.geo-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:24px}
.bar-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.bar-row .lab{width:96px;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{flex:1;height:22px;background:#e9eefb;border-radius:7px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,#2b6cff,#6d9bff);border-radius:7px;width:0;transition:width .8s ease}
.bar-num{width:70px;text-align:right;font-size:13px;color:var(--muted)}
.pie-box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 2px 10px rgba(22,35,59,.05)}
#pie{width:150px;display:block;margin:6px auto 14px;transform:rotate(-90deg)}
.legend{font-size:13px;color:var(--muted);display:grid;gap:6px}
.legend .dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px}

/* 新闻 */
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.ncard{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:12px;padding:16px 18px;box-shadow:0 2px 10px rgba(22,35,59,.05);display:flex;flex-direction:column;gap:8px}
.ncard .co{font-size:12px;color:var(--brand);font-weight:700;letter-spacing:.5px}
.ncard a.t{color:var(--ink);font-weight:600;font-size:15px;line-height:1.45}
.ncard a.t:hover{color:var(--brand)}
.ncard .meta{font-size:12px;color:var(--muted);margin-top:auto}

/* 关于 */
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.about-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px}
.about-card h3{font-size:16px;color:var(--brand2);margin-bottom:8px}
.about-card p{font-size:14px;color:var(--muted)}

/* 页脚 */
footer{border-top:1px solid var(--line);background:#fff}
.foot-inner{display:flex;justify-content:space-between;padding:26px 24px;font-size:13px;color:var(--muted);flex-wrap:wrap;gap:8px}

/* toast */
.toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(20px);background:#16233b;color:#fff;padding:10px 18px;border-radius:10px;font-size:13px;opacity:0;pointer-events:none;transition:.35s}
.toast.show{opacity:.92;transform:translateX(-50%) translateY(0)}

/* 动画 */
.reveal{opacity:0;transform:translateY(18px);transition:.6s ease}
.reveal.on{opacity:1;transform:none}

@media(max-width:900px){
 .kpis{grid-template-columns:repeat(2,1fr)}
 .hero h1{font-size:34px}
 .geo-grid,.about-grid{grid-template-columns:1fr}
 #topbar nav{display:none}
}