:root { --bg:#14141c; --card:#1d1d29; --line:#2e2e40; --text:#ecebf5; --muted:#9a98b0; --accent:#9b7bff; --good:#4cc38a; --bad:#ef6a6a; --gold:#e8b84a;
  --warrior:#c79c6e; --paladin:#f58cba; --druid:#ff7d0a; --priest:#e8e8e8; --hunter:#abd473; --shaman:#2f78e0; --rogue:#f5e46b; --warlock:#8788ee; --mage:#69ccf0; }
@media (prefers-color-scheme: light) { :root { --bg:#f4f3fa; --card:#fff; --line:#dcdaea; --text:#1d1c2a; --muted:#6a6882; --accent:#6a45e0; --gold:#a97b10; --priest:#555; --rogue:#a8941a; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
#app { max-width:980px; margin:0 auto; padding:18px 16px 60px; }
h1 { font-size:26px; margin:6px 0 2px; }
h2 { font-size:16px; margin:0 0 10px; }
.muted { color:var(--muted); } .fine { font-size:13px; }
.top { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.top .grow { flex:1; }
.pill { font-size:12px; padding:2px 9px; border-radius:99px; border:1px solid var(--line); color:var(--muted); }
.pill.ok { color:var(--good); border-color:var(--good); } .pill.off { color:var(--bad); border-color:var(--bad); }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:14px 0; }
.boss { border-color:var(--bad); }
.bar { height:12px; background:var(--line); border-radius:99px; overflow:hidden; margin:8px 0; }
.bar > i { display:block; height:100%; background:var(--bad); }
.bar.xp > i { background:var(--accent); } .bar.hp > i { background:var(--good); }
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip { padding:3px 10px; border-radius:99px; border:1px solid var(--line); font-size:13px; display:inline-flex; gap:6px; align-items:center; }
.dot { width:9px; height:9px; border-radius:50%; display:inline-block; background:var(--muted); }
.controls { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
.tabs { display:flex; gap:6px; flex-wrap:wrap; }
button.tab, input[type=search] { font:inherit; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:6px 12px; }
button.tab { cursor:pointer; } button.tab.on { border-color:var(--accent); color:var(--accent); }
input[type=search] { flex:1; min-width:160px; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:7px 8px; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-weight:500; font-size:13px; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
tr.row { cursor:pointer; } tr.row:hover { background:rgba(127,127,127,.12); }
.cls { font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-top:10px; }
.stat { background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:8px 10px; }
.stat b { display:block; font-size:18px; } .stat span { color:var(--muted); font-size:12px; }
.close { float:right; cursor:pointer; background:none; border:0; color:var(--muted); font-size:20px; }
@media (max-width:560px) { .hide-sm { display:none; } }