:root{
  --bg:#0a0e14;--panel:#101724;--panel2:#0d1420;--line:rgba(120,170,255,.16);
  --txt:#e8eefb;--dim:#8aa0c4;--mut:#5c6f8f;
  --acc:#39d3bb;--acc2:#2f81f7;--ok:#3fb950;--warn:#d29922;--hot:#f0883e;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);
  font-family:"Segoe UI",system-ui,sans-serif;overflow:hidden}
#app{display:grid;grid-template-rows:76px 1fr 42px;height:100%;gap:14px;padding:16px 22px}
header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:10px}
header .zh{font-size:26px;font-weight:800;letter-spacing:.12em}
header .en{font-size:12px;color:var(--dim);letter-spacing:.3em;margin-top:4px}
header .tag{font-size:12px;color:#bfe9df;border:1px solid rgba(57,211,187,.4);border-radius:999px;padding:6px 14px;letter-spacing:.06em}
footer{display:flex;align-items:center;border-top:1px solid var(--line);overflow:hidden}
footer .roll{white-space:nowrap;font-size:14px;color:var(--dim);letter-spacing:.08em;animation:roll 48s linear infinite}
@keyframes roll{0%{transform:translateX(6%)}100%{transform:translateX(-100%)}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 20px}
.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--acc);margin-right:8px;animation:pu 1.6s infinite;vertical-align:middle}
@keyframes pu{0%,100%{opacity:.35}50%{opacity:1}}
.muted{color:var(--mut)}