:root { --bg:#0b1a24; --card:#122b3a; --line:#1f4357; --text:#e6f1f6; --muted:#8fb0c0; --accent:#ff8a65; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
header { padding:20px 20px 8px; max-width:1100px; margin:0 auto; }
h1 { margin:0 0 10px; font-size:26px; } h1 span { color:var(--muted); font-weight:400; font-size:18px; }
#chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { background:var(--card); border:1px solid var(--line); border-radius:999px; padding:3px 12px; color:var(--muted); font-size:13px; }
.chip b { color:var(--text); }
nav { max-width:1100px; margin:8px auto 0; padding:0 20px; display:flex; gap:4px; border-bottom:1px solid var(--line); }
nav a { color:var(--muted); text-decoration:none; padding:8px 14px; border-radius:8px 8px 0 0; }
nav a.on { color:var(--text); background:var(--card); border:1px solid var(--line); border-bottom-color:var(--card); margin-bottom:-1px; }
main { max-width:1100px; margin:0 auto; padding:16px 20px 40px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:16px; overflow-x:auto; }
h2 { margin:0 0 10px; font-size:18px; }
table { border-collapse:collapse; width:100%; }
th, td { padding:7px 9px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap; }
th { color:var(--muted); font-weight:500; font-size:13px; cursor:default; }
th.sort { cursor:pointer; } th.sort:hover { color:var(--text); }
th:first-child, td:first-child, td.l, th.l { text-align:left; }
tr:last-child td { border-bottom:0; }
tr.click { cursor:pointer; } tr.click:hover td { background:#17384b; }
.who { display:flex; align-items:center; gap:8px; }
.av { width:26px; height:26px; border-radius:50%; background:var(--line); flex:none; }
.cell { display:inline-block; min-width:38px; padding:2px 6px; border-radius:6px; text-align:center; color:#08141b; font-weight:600; }
.cell.none { background:var(--line); color:var(--muted); }
.grid { letter-spacing:2px; font-size:17px; }
.muted { color:var(--muted); } .warn { color:var(--accent); }
.bar { display:flex; height:16px; border-radius:4px; overflow:hidden; min-width:110px; background:var(--line); }
.bar i { display:flex; align-items:center; justify-content:center; font-style:normal; font-size:11px; overflow:hidden; }
.qgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.qgrid > div { background:#0e2431; border:1px solid var(--line); border-radius:8px; padding:8px; }
.qgrid .t { color:var(--muted); font-size:12px; margin-bottom:4px; }
a { color:var(--accent); }
footer { text-align:center; color:var(--muted); font-size:12px; padding:0 0 30px; }
@media (max-width:640px) { header,main { padding-left:12px; padding-right:12px; } th,td { padding:6px 6px; } }

.sym { vertical-align:middle; flex:none; border-radius:7px; object-fit:contain; }
.sym.em { display:inline-block; text-align:center; background:#0e2431; }
.sgrid { display:inline-flex; gap:3px; align-items:center; }
.legend { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
.lg { display:flex; gap:10px; align-items:center; }
.small { font-size:12px; }