:root{
  --bg:#0e1116; --panel:#161b24; --panel2:#1c2330; --line:#2a3342;
  --text:#e8ecf3; --muted:#9aa7ba; --accent:#4f8ef7; --accent2:#39c98e;
  --warn:#e8b03f; --danger:#e06060; --radius:12px;
}
*{box-sizing:border-box; margin:0; padding:0}
body{background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; line-height:1.55}
a{color:var(--accent)}
code{background:var(--panel2); border:1px solid var(--line); padding:1px 6px; border-radius:5px; font-size:13px; font-family:"SF Mono",Menlo,monospace}

/* ── logowanie ── */
.login-body{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px}
.login-box{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:36px 32px; width:100%; max-width:400px; text-align:center}
.login-box .logo{width:44px; height:44px; color:var(--accent); margin-bottom:10px}
.login-box h1{font-size:26px; margin-bottom:4px}
.login-box .sub{color:var(--muted); font-size:14px; margin-bottom:22px}
.login-box form{text-align:left}
.login-box label{display:block; font-size:13px; color:var(--muted); margin-bottom:14px}
.login-box input{display:block; width:100%; margin-top:5px; padding:11px 12px; background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:9px; font-size:15px}
.login-box input:focus{outline:none; border-color:var(--accent)}
.login-box button{width:100%; padding:12px; background:var(--accent); color:#fff; border:none; border-radius:9px; font-size:15px; font-weight:600; cursor:pointer; margin-top:6px}
.alert{background:rgba(224,96,96,.12); border:1px solid rgba(224,96,96,.4); color:var(--danger); padding:10px 12px; border-radius:9px; font-size:13.5px; margin-bottom:16px; text-align:left}

/* ── layout aplikacji ── */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 22px; border-bottom:1px solid var(--line); background:var(--panel); position:sticky; top:0; z-index:10}
.topbar .brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px}
.topbar .brand svg{width:24px; height:24px; color:var(--accent)}
.topbar .who{color:var(--muted); font-size:13.5px}
.topbar .who a{color:var(--muted); margin-left:10px}
.wrap{max-width:1060px; margin:0 auto; padding:24px 22px 80px}
.grid2{display:grid; grid-template-columns:2fr 1fr; gap:18px; align-items:start}
@media(max-width:860px){.grid2{grid-template-columns:1fr}}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin-bottom:18px}
.card h2{font-size:16px; margin-bottom:12px; display:flex; align-items:center; gap:8px}
.card h2 svg{width:18px; height:18px; color:var(--accent)}
.muted{color:var(--muted)}

/* ── hero: moc i poziom ── */
.hero{display:flex; flex-wrap:wrap; gap:22px; align-items:center}
.hero .lvl{flex:1; min-width:230px}
.hero .lvl .name{font-size:22px; font-weight:700}
.hero .lvl .desc{color:var(--muted); font-size:13.5px; margin-top:3px}
.mocbar{height:10px; background:var(--panel2); border-radius:999px; overflow:hidden; margin-top:12px}
.mocbar i{display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); border-radius:999px}
.mocnum{display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); margin-top:5px}
.staty{display:flex; gap:12px}
.stat{background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:10px 16px; text-align:center; min-width:86px}
.stat b{display:block; font-size:20px}
.stat span{font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.nextlvl{font-size:12.5px; color:var(--muted); margin-top:10px}

/* ── filary ── */
.filar{margin-bottom:12px}
.filar .top{display:flex; justify-content:space-between; font-size:13.5px; margin-bottom:4px}
.filar .top b{font-weight:600}
.filar .top span{color:var(--muted)}
.filar .bar{height:7px; background:var(--panel2); border-radius:999px; overflow:hidden}
.filar .bar i{display:block; height:100%; background:var(--accent2); border-radius:999px}
.filar .d{font-size:12px; color:var(--muted); margin-top:3px}

/* ── ścieżka ── */
.wtytul{font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:20px 0 10px}
.krok{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:10px; overflow:hidden}
.krok .head{display:flex; align-items:center; gap:12px; padding:13px 16px; cursor:pointer}
.krok .head:hover{background:var(--panel2)}
.krok .head .tyt{flex:1; font-weight:600; font-size:14.5px}
.krok .head .pts{font-size:12.5px; color:var(--muted); white-space:nowrap}
.chip{font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:999px; white-space:nowrap}
.chip.nowe{background:rgba(154,167,186,.15); color:var(--muted)}
.chip.w_toku{background:rgba(79,142,247,.16); color:var(--accent)}
.chip.do_sprawdzenia{background:rgba(232,176,63,.15); color:var(--warn)}
.chip.zaliczone{background:rgba(57,201,142,.16); color:var(--accent2)}
.krok .body{display:none; border-top:1px solid var(--line); padding:16px}
.krok.open .body{display:block}
.dowod{font-size:13px; color:var(--muted); margin-bottom:12px}
.material{background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:14px; margin-bottom:10px}
.material .mt{font-weight:600; font-size:14px; margin-bottom:4px}
.material .mm{font-size:12.5px; color:var(--muted); margin-bottom:8px}
.material ol{margin:0 0 10px 20px; font-size:13.5px}
.material ol li{margin:3px 0}
.btn{display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:9px; border:1px solid var(--line); background:var(--panel2); color:var(--text); font-size:13.5px; font-weight:600; cursor:pointer}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.green{background:var(--accent2); border-color:var(--accent2); color:#0b1310}
.btn svg{width:15px; height:15px}
.akcje{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:12px}
.akcje textarea{width:100%; min-height:70px; background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:9px; padding:10px; font-size:13.5px; font-family:inherit}
.feedback{background:rgba(232,176,63,.1); border:1px solid rgba(232,176,63,.35); border-radius:9px; padding:10px 12px; font-size:13.5px; margin-top:10px}

/* ── odznaki / zdolności / ranking ── */
.odznaki{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.odznaka{border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:12.5px}
.odznaka b{display:flex; align-items:center; gap:6px; font-size:13px; margin-bottom:2px}
.odznaka svg{width:14px; height:14px}
.odznaka.zdobyta{border-color:rgba(57,201,142,.5)}
.odznaka.zdobyta svg{color:var(--accent2)}
.odznaka:not(.zdobyta){opacity:.45}
.zdolnosc{display:flex; gap:9px; align-items:flex-start; padding:7px 0; font-size:13px; border-bottom:1px dashed var(--line)}
.zdolnosc:last-child{border-bottom:none}
.zdolnosc svg{width:15px; height:15px; flex:0 0 auto; margin-top:2px}
.zdolnosc.on svg{color:var(--accent2)}
.zdolnosc:not(.on){opacity:.45}
.zdolnosc .z{color:var(--muted); font-size:12px}
.ranking li{display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed var(--line); font-size:13.5px; list-style:none}
.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--accent2); color:#0b1310; font-weight:600; padding:11px 20px; border-radius:10px; font-size:14px; z-index:50; box-shadow:0 8px 30px rgba(0,0,0,.4)}

/* ── admin ── */
table.admin{width:100%; border-collapse:collapse; font-size:13.5px; background:var(--panel); border-radius:var(--radius); overflow:hidden; margin-bottom:18px}
table.admin th{background:var(--panel2); text-align:left; padding:9px 12px; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); border-bottom:1px solid var(--line)}
table.admin td{padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top}
table.admin tr:last-child td{border-bottom:none}
.admin form.inline{display:inline}
.admin input, .admin select, .admin textarea{background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:13.5px; font-family:inherit}
.admin .formrow{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-bottom:6px}
.admin .formrow label{display:block; font-size:12px; color:var(--muted)}
.admin .formrow label input, .admin .formrow label select{display:block; margin-top:4px}
.uwaga{color:var(--warn); font-size:13px}
.ok-msg{background:rgba(57,201,142,.12); border:1px solid rgba(57,201,142,.4); color:var(--accent2); padding:10px 12px; border-radius:9px; font-size:13.5px; margin-bottom:16px}