:root { --bg:#111311; --panel:#1b1e1b; --line:#2c312c; --fg:#e6e4dc; --dim:#9a9a90; --acc:#c8b56a; --good:#7fbf6a; --bad:#d0644f; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:14px/1.4 system-ui, sans-serif; }
header { position:sticky; top:0; z-index:5; background:var(--panel); border-bottom:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; padding:8px 16px; }
h1 { font-size:16px; margin:0; color:var(--acc); letter-spacing:.05em; text-transform:uppercase; }
h2 { font-size:14px; color:var(--acc); margin:20px 0 8px; }
nav { display:flex; flex-wrap:wrap; gap:4px; }
nav button, button { background:transparent; color:var(--fg); border:1px solid var(--line); padding:6px 10px; border-radius:4px; cursor:pointer; font:inherit; }
nav button.active { background:var(--acc); color:#111; border-color:var(--acc); }
button:hover { border-color:var(--acc); }
#status { margin-left:auto; font-size:12px; color:var(--dim); }
#status.err { color:var(--bad); }
main { padding:16px; max-width:1200px; margin:0 auto; }
.tab { display:none; } .tab.active { display:block; }
input, select { background:var(--panel); color:var(--fg); border:1px solid var(--line); border-radius:4px; padding:6px 8px; font:inherit; }
input[type=search] { width:100%; font-size:16px; padding:10px; margin-bottom:12px; }
.row { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; margin-bottom:12px; }
.row input[type=search] { width:auto; flex:1 1 200px; margin:0; font-size:14px; padding:6px 8px; }
.hint { color:var(--dim); font-size:12px; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--dim); font-weight:normal; font-size:12px; position:sticky; top:52px; background:var(--bg); }
tr.click { cursor:pointer; } tr.click:hover, tr.sel { background:var(--panel); }
.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.good { color:var(--good); } .bad { color:var(--bad); } .dim { color:var(--dim); }
img.icon { width:48px; height:48px; object-fit:contain; background:#000; border-radius:3px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:10px 12px; margin-bottom:8px; }
.item { display:flex; gap:12px; align-items:flex-start; }
.item .body { flex:1; }
.item .name { font-weight:600; }
.prices { display:flex; flex-wrap:wrap; gap:4px 18px; margin:4px 0; }
.prices b { font-size:16px; }
.tag { display:inline-block; font-size:11px; padding:1px 6px; border-radius:3px; background:var(--line); margin-right:4px; }
.tag.kappa { background:#5b4a1d; } .tag.fir { background:#1d4a2d; } .tag.hideout { background:#1d3a5b; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:8px; }
.grid .card { margin:0; } .big { font-size:20px; font-variant-numeric:tabular-nums; }
.task.done { opacity:.5; } .task.locked { opacity:.6; }
.task summary { cursor:pointer; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.task ul { margin:6px 0 0 18px; padding:0; }
.station { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.station select { min-width:6em; }
.bar { height:6px; background:var(--line); border-radius:3px; overflow:hidden; }
.bar > i { display:block; height:100%; background:var(--acc); }
@media (max-width:600px) { main { padding:12px; } th { top:0; position:static; } }
.pill-link { color:var(--acc); text-decoration:none; font-size:13px; }
.cal-picks { display:flex; flex-wrap:wrap; gap:4px 12px; margin-bottom:8px; }
.cal-picks label { white-space:nowrap; font-size:13px; }