:root{
  --bg:#0f1114; --surface:#171a1f; --surface-2:#1e222a; --line:#2a2f38; --line-2:#3a4150;
  --ink:#e8eaed; --ink-2:#a6adbb; --ink-3:#6f7886;
  --gold:#d4a13c; --ok:#3fa66f; --warn:#d8853a; --bad:#c65151;
  --r:8px;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f5f3; --surface:#ffffff; --surface-2:#f0efec; --line:#e2e0db; --line-2:#cbc8c1;
    --ink:#15171a; --ink-2:#4c525c; --ink-3:#828a96;
    color-scheme:light;
  }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
h1{font-size:1.45rem; margin:0 0 4px; letter-spacing:-.01em}
h2{font-size:1.05rem; margin:0}
h3{font-size:.95rem; margin:0 0 8px}
code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.9em}
.muted{color:var(--ink-2)}
.fine{color:var(--ink-3); font-size:.82rem}

/* --- pasek górny --- */
.topbar{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding:12px 20px; background:var(--surface); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.brand{font-weight:700; text-decoration:none; letter-spacing:-.01em}
.topbar nav{display:flex; gap:4px; flex-wrap:wrap; flex:1}
.topbar nav a{
  padding:6px 11px; border-radius:99px; text-decoration:none;
  color:var(--ink-2); font-size:.9rem;
}
.topbar nav a:hover{background:var(--surface-2); color:var(--ink)}
.topbar nav a.on{background:var(--surface-2); color:var(--ink); font-weight:600}
.who{display:flex; align-items:center; gap:10px; font-size:.88rem; color:var(--ink-2)}

.wrap{max-width:1180px; margin:0 auto; padding:24px 20px 72px}

/* --- nagłówek sekcji --- */
.head{display:flex; gap:16px; align-items:flex-end; justify-content:space-between;
      flex-wrap:wrap; margin-bottom:18px}
.head p{margin:2px 0 0}
.progress{display:flex; align-items:center; gap:10px; font-size:.85rem; color:var(--ink-2)}
.progress .bar{width:180px; height:6px; background:var(--surface-2); border-radius:99px; overflow:hidden}
.progress .bar i{display:block; height:100%; background:var(--ok)}

/* --- złoto --- */
.gold{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px}
.pill{
  font-size:.82rem; padding:4px 11px; border-radius:99px;
  border:1px solid var(--line-2); color:var(--ink-2);
}
.pill b{color:var(--ink)}
.pill.full{border-color:var(--gold); color:var(--gold)}
.pill.over{border-color:var(--bad); color:var(--bad)}

/* --- karty --- */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:14px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.card>header{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:12px 14px; border-bottom:1px solid var(--line); background:var(--surface-2);
}
.card .meta{display:flex; gap:6px; flex-wrap:wrap}
.empty-card{padding:22px; text-align:center; color:var(--ink-2)}

.tag{font-size:.74rem; padding:2px 8px; border-radius:99px; background:rgba(212,161,60,.14);
     color:var(--gold); white-space:nowrap}
.tag.ghost{background:transparent; border:1px solid var(--line-2); color:var(--ink-2)}
.tag.tiny{font-size:.68rem; padding:1px 6px}
.tag em{font-style:normal; color:var(--ink-3)}

/* --- lista składu --- */
.roster{list-style:none; margin:0; padding:0}
.roster li{
  display:flex; align-items:center; gap:9px; padding:8px 14px;
  border-bottom:1px solid var(--line); font-size:.9rem;
}
.roster li:last-child{border-bottom:0}
.roster li.empty{color:var(--ink-3); justify-content:center; padding:16px}
.roster .nm{font-weight:600}
.roster .cls{color:var(--ink-2)}
.roster .ilvl{color:var(--ink-2); font-variant-numeric:tabular-nums}
.roster .own{margin-left:auto; color:var(--ink-3); font-size:.82rem}
.roster li.done .nm{color:var(--ink-2)}
.roster.editable .row-actions{margin-left:auto; display:flex; gap:6px; align-items:center}
.roster.editable .own{margin-left:0}

/* --- checkbox zaliczenia --- */
.check{
  width:22px; height:22px; flex:none; border-radius:6px; cursor:pointer;
  border:1.5px solid var(--line-2); background:var(--surface-2);
  color:#fff; font-size:13px; line-height:1; display:grid; place-items:center;
  padding:0; transition:background .12s, border-color .12s;
}
.check:hover{border-color:var(--ok)}
.check.on{background:var(--ok); border-color:var(--ok)}
.check.disabled{opacity:.35; cursor:default}
.check.pending{opacity:.5}
.check.failed{border-color:var(--bad)}

/* --- macierz roster x raid --- */
.matrix-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
.matrix{border-collapse:collapse; width:100%}
.matrix th, .matrix td{border-bottom:1px solid var(--line); padding:8px 10px; text-align:center}
.matrix thead th{position:sticky; top:0; background:var(--surface-2); font-size:.76rem;
                 font-weight:600; white-space:nowrap}
.matrix thead th span{display:block}
.matrix thead th em{font-style:normal; color:var(--ink-3); font-size:.68rem}
.matrix .corner, .matrix .rowhead{text-align:left; white-space:nowrap}
.matrix .rowhead{font-weight:600}
.matrix .rowhead em{display:block; font-style:normal; font-weight:400;
                    color:var(--ink-3); font-size:.76rem}
.matrix td .check{margin:0 auto}

/* --- tabele CRUD --- */
.grid{width:100%; border-collapse:collapse; background:var(--surface);
      border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.grid th{font-size:.76rem; text-transform:uppercase; letter-spacing:.05em;
         color:var(--ink-3); text-align:left; padding:9px 10px; background:var(--surface-2)}
.grid td{padding:6px 10px; border-top:1px solid var(--line); vertical-align:middle}
.grid tr.off{opacity:.45}
.grid .center{text-align:center}
.grid .actions{display:flex; gap:6px; justify-content:flex-end; align-items:center}

/* --- formularze --- */
input, select{
  background:var(--surface-2); color:var(--ink); border:1px solid var(--line-2);
  border-radius:6px; padding:6px 9px; font:inherit; font-size:.88rem; max-width:100%;
}
input[type=checkbox]{width:16px; height:16px; accent-color:var(--ok)}
input:focus, select:focus, button:focus-visible{outline:2px solid var(--gold); outline-offset:1px}
.row-form{display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:12px 0 2px}
.row-form.tight{padding:10px 14px}
.row-form input{min-width:110px}
.chk{display:flex; align-items:center; gap:6px; font-size:.85rem; color:var(--ink-2)}
form.inline{display:inline-flex}
.stack{display:flex; flex-direction:column; gap:16px; max-width:420px}
.stack label{display:flex; flex-direction:column; gap:5px; font-size:.88rem; color:var(--ink-2)}
.stack small{color:var(--ink-3); font-size:.78rem}

.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
       padding:12px 14px; margin-bottom:18px}
.panel>summary{cursor:pointer; font-weight:600; font-size:.92rem}
.panel.static p{margin:4px 0}
.sub{padding:10px 14px 14px; border-top:1px solid var(--line)}
.sub>summary{cursor:pointer; font-size:.84rem; color:var(--ink-2)}

.btn{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  background:var(--surface-2); color:var(--ink); border:1px solid var(--line-2);
  border-radius:6px; padding:6px 13px; font:inherit; font-size:.87rem; text-decoration:none;
}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{background:var(--gold); border-color:var(--gold); color:#1a1408; font-weight:600}
.btn.danger{color:var(--bad); border-color:transparent}
.btn.danger:hover{border-color:var(--bad)}
.btn.ghost{background:transparent}
.btn.sm{padding:4px 9px; font-size:.8rem}
.btn.lg{padding:11px 20px; font-size:.98rem}

.notice{padding:10px 14px; border-radius:var(--r); margin-bottom:16px; font-size:.9rem;
        background:rgba(216,133,58,.12); border:1px solid var(--warn); color:var(--warn)}

.unassigned{margin-top:24px}
.unassigned p{display:flex; gap:6px; flex-wrap:wrap}

.center-card{
  max-width:440px; margin:10vh auto; text-align:center; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; padding:36px 28px;
}
.center-card h1{margin-bottom:10px}
.center-card p{color:var(--ink-2)}
.center-card .btn{margin:14px 0 6px}

@media (max-width:620px){
  .wrap{padding:16px 14px 60px}
  .cards{grid-template-columns:1fr}
  .topbar{gap:10px; padding:10px 14px}
  .roster .own{display:none}
}