/* [hidden] must win over utility display classes such as .flex */
[hidden] { display:none !important; }
:root {
  --bg: #f5f6f8; --surface: #fff; --ink: #19212b; --muted: #5b6977;
  --line: #dde3ea; --accent: #3b5bdb; --accent-soft: #e7ecfd;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#10151b; --surface:#19212b; --ink:#e6ebf1; --muted:#97a4b2;
    --line:#2f3b48; --accent:#7c97f0; --accent-soft:#22304d; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); } /* font: the original's (metis.css html rule) */
.app { display:flex; min-height:100vh; }

/* sidebar */
.sidebar { width:84px; background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; padding:14px 0; gap:6px;
  /* stays put while the page scrolls (the original's layout) */
  position:sticky; top:0; height:100vh; box-sizing:border-box; flex-shrink:0; overflow-y:auto; }
.brand { width:40px; height:40px; border-radius:11px; background:var(--accent);
  color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center;
  font-size:20px; margin-bottom:12px; }
.nav { display:flex; flex-direction:column; align-items:center; gap:3px; width:68px;
  padding:8px 0; border-radius:10px; text-decoration:none; color:var(--muted);
  font-size:11.5px; }
.nav .ico { font-size:19px; }
.nav:hover { background:var(--accent-soft); }
.nav.on { background:var(--accent-soft); color:var(--accent); font-weight:600; }
.nav.foot { margin-top:auto; }

/* content */
.content { flex:1; padding:28px 32px; max-width:1100px; }
.content.wide { max-width:none; padding:14px 16px; min-width:0; }
.page-head h1 { font-size:24px; margin:0 0 4px; font-weight:700; }
.page-head .sub { color:var(--muted); margin:0 0 20px; font-size:14px; }
.placeholder { background:var(--surface); border:1px dashed var(--line);
  border-radius:12px; padding:28px; color:var(--muted); font-size:14.5px; }

/* shared */
.card { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px 20px; }
.muted { color:var(--muted); }
.btn { display:inline-flex; align-items:center; height:42px; padding:0 28px; border-radius:10px;
  border:1px solid var(--line); background:transparent; color:var(--ink); font-size:15px; cursor:pointer; }
.btn:hover { background:var(--surface); }
.btn.off { color:var(--muted); cursor:default; }
.back { color:var(--muted); text-decoration:none; font-size:14px; }
:root { --up:#059669; --down:#ef4444; --err:#dc2626; }

/* market: indicators */
.ind-grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); margin-bottom:28px; }
.ind { display:flex; flex-direction:column; gap:10px; min-height:150px; }
.ind-top { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.ind-title { font-size:14px; color:var(--muted); font-weight:600; }
.gauge { width:116px; max-width:45%; }
.ind-val { display:flex; align-items:baseline; gap:8px; }
.ind-val .num { font-size:30px; font-weight:600; font-variant-numeric:tabular-nums; }
.badge { font-size:12.5px; padding:2px 8px; border-radius:999px; background:var(--accent-soft); color:var(--accent); }
.ind-foot { font-size:13px; color:var(--muted); margin-top:auto; }
.ind-err { color:var(--err); font-size:14px; }
.bar { position:relative; height:10px; border-radius:999px; background:var(--line); }
.bar i { position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:#2563eb; }
.bar b { position:absolute; top:0; bottom:0; width:1px; background:rgba(255,255,255,.7); }

/* market: boards */
.sec-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; margin-bottom:14px; }
.sec-head h2, .news-sec h2 { font-size:18px; margin:0; }
.hint { font-size:12px; color:var(--muted); }
.board-grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); margin-bottom:32px; }
.board h3 { font-size:15px; margin:0 0 8px; }
.mover { display:flex; align-items:center; gap:10px; padding:8px 4px; text-decoration:none; color:var(--ink); border-radius:8px; }
.mover:hover { background:var(--bg); }
.mover .rank { width:18px; font-size:12px; color:var(--muted); }
.mover .base { flex:1; font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.mover .v { font-weight:600; font-variant-numeric:tabular-nums; }
.up { color:var(--up); } .down { color:var(--down); }

/* market: news */
.news-sec h2 { margin-bottom:12px; }
.news-tip { background:var(--accent); color:#fff; border-radius:12px; padding:16px 20px; font-size:13.5px; line-height:1.6; margin-bottom:18px; }
.news-card { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.news-card h3 { font-size:18px; font-weight:500; line-height:1.45; margin:0; }
.news-card h3 a { color:var(--ink); text-decoration:none; }
.news-card h3 a:hover { text-decoration:underline; }
.news-card p, .news-detail p { color:var(--muted); font-size:14px; line-height:1.6; margin:0; }
.news-meta { font-size:13.5px; color:var(--muted); }
.news-meta .src { color:var(--ink); font-weight:500; }
.news-act { display:flex; justify-content:flex-end; }
.ask { display:inline-flex; align-items:center; height:36px; padding:0 16px; border-radius:8px;
  border:1px solid var(--accent); color:var(--accent); text-decoration:none; font-size:14px; }
.ask:hover { background:var(--accent-soft); }
.news-more { display:flex; justify-content:center; padding:12px 0 26px; }
.news-empty { border:1px dashed var(--line); border-radius:12px; padding:48px 0; text-align:center; color:var(--muted); font-size:14px; }
.news-detail { display:flex; flex-direction:column; gap:14px; }
.news-detail h1 { font-size:22px; margin:0; line-height:1.4; }
@media (max-width: 640px) { .content { padding:18px 16px; } }

/* phones: the sidebar becomes a bottom tab bar (the original's phone layout
   is not in the archive; this is our choice) */
@media (max-width: 720px) {
  .app { flex-direction:column; }
  .sidebar { position:fixed; left:0; right:0; bottom:0; top:auto; width:auto; height:60px; z-index:20;
    flex-direction:row; justify-content:space-around; padding:0 4px; gap:0;
    border-right:0; border-top:1px solid var(--line); }
  .sidebar nav { display:contents; }
  .brand { display:none; }
  .nav { width:auto; flex:1; padding:6px 0; }
  .nav.foot { margin-top:0; }
  .content, .content.wide { padding:14px 12px 76px; max-width:none; }
}
button.ask { background:none; font:inherit; font-size:14px; cursor:pointer; }
.ask-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }

/* the original does not render the rail logo on phones (`!H5 && rail-brand`) */
@media (max-width: 743px) { .rail-brand { display: none; } }