:root { --bg: #0a0a0b; --panel: #121214; --rim: #26262b; --ink: #f2f0ea; --mut: #8a8a93; --rec: #39f58c; --pur: #d65cff; --ok: #3ddc84; --warn: #ffc23d; --bad: #ff4d4d; --gold: #f0c040; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.6 ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; }
a { color: inherit; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
header { border-bottom: 1px solid var(--rim); }
header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 58px; gap: 12px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: .04em; text-decoration: none; }
.logo i { width: 11px; height: 11px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 12px var(--rec); animation: rec 1.4s infinite; }
@keyframes rec { 50% { opacity: .25; } }
.logo small { font: 500 12px system-ui, sans-serif; color: var(--mut); letter-spacing: 0; }
.stats { display: flex; gap: 16px; color: var(--mut); font-size: 13px; flex-wrap: wrap; }
.stats b { color: var(--ink); }
.bar { display: flex; gap: 8px; padding: 16px 0 10px; flex-wrap: wrap; }
.bar button { background: var(--panel); color: var(--mut); border: 1px solid var(--rim); border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 13px; cursor: pointer; }
.bar button[aria-pressed="true"] { background: var(--ink); color: #000; }
.term { background: #050506; border: 1px solid var(--rim); border-radius: 14px; padding: 12px 0; min-height: 60vh; }
.ln { display: grid; grid-template-columns: 78px 110px 1fr auto; gap: 12px; padding: 5px 18px; align-items: baseline; text-decoration: none; }
a.ln:hover { background: var(--panel); }
.t { color: var(--mut); } .s { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .go { color: var(--mut); font-size: 12px; }
.new { animation: in 1.2s ease-out; } @keyframes in { from { background: #39f58c22; } }
.bad { color: var(--bad); } .ok { color: var(--ok); } .warn { color: var(--warn); } .gold { color: var(--gold); } .mut { color: var(--mut); }
.cur::after { content: "▌"; color: var(--rec); animation: rec 1s infinite; margin-left: 4px; }
.card { background: var(--panel); border: 1px solid var(--rim); border-radius: 16px; padding: 18px 20px; }
.lbl { font: 600 11.5px ui-monospace, monospace; letter-spacing: .14em; color: var(--mut); text-transform: uppercase; margin-bottom: 10px; }
.big { font-weight: 800; font-size: 28px; } .big small { font-size: 13px; color: var(--mut); font-weight: 400; }
.row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px dashed var(--rim); }
.row:first-of-type { border-top: 0; } .row b { text-align: right; font-weight: 600; }
footer { color: var(--mut); font: 12.5px/1.6 system-ui, sans-serif; padding: 20px 0 40px; }
.btn { display: inline-block; background: var(--ink); color: #000; border-radius: 999px; padding: 8px 16px; font: 700 14px system-ui, sans-serif; text-decoration: none; border: 0; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--rim); }
@media (max-width: 700px) {
  .ln { grid-template-columns: 70px 1fr; row-gap: 0; } .ln .m { grid-column: 1 / -1; } .ln .go { display: none; }
  .stats { font-size: 12px; gap: 10px; }
}
.logo em { font-style: normal; color: var(--pur); text-shadow: 0 0 10px #d65cff88; }
.logo { text-shadow: 0 0 10px #39f58c55; }