:root{
  --bg:#fdf6ef; --panel:#ffffff; --panel2:#f6efe6; --line:#e8dcd0;
  --text:#14213d; --muted:#5a6685; --accent:#ff5a3c; --accent2:#12a37a;
  --warn:#e09b1a; --danger:#d8402a; --radius:12px;
  --pam:#4a7dff; --glo:#c25cff; --zmy:#12a37a; --rec:#ff8a3d;
}
*{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; box-shadow:0 2px 10px rgba(20,33,61,.05)}
.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(--acc-grad1,#ff5a3c),var(--acc-grad2,#ffb03a)); 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; box-shadow:0 2px 10px rgba(20,33,61,.05)}
.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(90,102,133,.12); color:var(--muted)}
.chip.w_toku{background:rgba(255,90,60,.14); color:var(--acc-txt,#d8402a)}
.chip.do_sprawdzenia{background:rgba(224,155,26,.16); color:var(--warn)}
.chip.zaliczone{background:rgba(18,163,122,.14); 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:#fff}
.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:#fff; font-weight:600; padding:11px 20px; border-radius:10px; font-size:14px; z-index:50; box-shadow:0 8px 30px rgba(20,33,61,.25)}

/* ── zakładki ── */
.tabs{display:flex; gap:4px}
.tab{display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:9px; border:1px solid transparent; background:none; color:var(--muted); font-size:14px; font-weight:600; cursor:pointer}
.tab svg{width:16px; height:16px}
.tab.on{background:var(--panel2); border-color:var(--line); color:var(--text)}
.tab:hover{color:var(--text)}
@media(max-width:720px){.topbar{flex-wrap:wrap}.tabs{order:3; width:100%; justify-content:space-around}}

/* ── hero: minimapa + kontynuuj ── */
.hero-dol{display:flex; align-items:center; gap:16px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); flex-wrap:wrap}
.minimapa{display:flex; gap:6px; flex:1; flex-wrap:wrap}
.kropka{width:16px; height:16px; border-radius:50%; border:2px solid var(--line); background:var(--panel2); cursor:pointer; padding:0}
.kropka:hover{transform:scale(1.25)}
.kropka.zaliczone{background:var(--accent2); border-color:var(--accent2)}
.kropka.w_toku, .kropka.do_sprawdzenia{background:var(--accent); border-color:var(--accent)}
.kropka.do_sprawdzenia{background:var(--warn); border-color:var(--warn)}
.pasek-filtra{display:flex; align-items:center; justify-content:space-between; margin:20px 0 10px}
.pasek-filtra .wtytul{margin:0}
.filtr{font-size:13px; color:var(--muted); display:flex; align-items:center; gap:7px; cursor:pointer}

/* ── kroki: numer + ikona filaru ── */
.nrkroku{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:8px; background:var(--panel2); border:1px solid var(--line); font-size:12.5px; font-weight:700; color:var(--muted); flex:0 0 auto}
.filar-ico{width:15px; height:15px; vertical-align:-2px; color:var(--accent); margin-right:2px}
.filar .top b{display:flex; align-items:center; gap:6px}

/* ── prompt box ── */
.prompt-box{margin-top:6px}
.btn.maly{padding:7px 12px; font-size:12.5px}
.prompt-hint{display:inline-block; margin-left:8px; font-size:12.5px; color:var(--accent2)}
.prompt-tresc{margin-top:10px; background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:12px; font-size:12.5px; font-family:"SF Mono",Menlo,monospace; white-space:pre-wrap; max-height:320px; overflow:auto; color:#c9d2df}

/* ── checklista podkroków ── */
.podkroki-lista{margin:4px 0 10px}
.podkrok{display:flex; gap:9px; align-items:flex-start; padding:5px 0; font-size:13.5px; cursor:pointer}
.podkrok input{margin-top:3px; accent-color:var(--accent2); width:15px; height:15px; flex:0 0 auto}
.podkrok.done span{color:var(--muted); text-decoration:line-through}

/* ── onboarding ── */
.modal-tlo{position:fixed; inset:0; background:rgba(20,33,61,.55); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px}
.modal-tlo[hidden]{display:none}
.modal{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:32px 30px 24px; max-width:440px; width:100%; text-align:center}
.modal-ico{width:40px; height:40px; color:var(--accent); margin-bottom:12px}
.modal h3{font-size:20px; margin-bottom:8px}
.modal p{color:var(--muted); font-size:14.5px}
.modal-stopka{display:flex; align-items:center; justify-content:space-between; margin-top:22px}
.modal-kropki i{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--line); margin-right:6px}
.modal-kropki i.on{background:var(--accent)}

/* ── pomoc ── */
.pomoc-lista{margin:0 0 16px 20px}
.pomoc-lista li{margin:8px 0; font-size:14px}
.slownik dt{font-weight:700; font-size:14px; margin-top:12px}
.slownik dd{color:var(--muted); font-size:13.5px; margin:2px 0 0}

/* ── podgląd admina ── */
.podglad-banner{display:flex; align-items:center; gap:8px; background:#fff4dd; border-bottom:1px solid rgba(224,155,26,.4); color:#9a6a0a; padding:9px 22px; font-size:13.5px; font-weight:600}
.podglad-banner .ico{width:16px; height:16px}
.podglad-banner a{color:#9a6a0a}

/* ── 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}

.prompt-hint[hidden]{display:none}
[hidden]{display:none !important}

/* ── kolory filarów (z prototypu _gra.html) ── */
.f-pam{color:var(--pam)} .f-glo{color:var(--glo)} .f-zmy{color:var(--zmy)} .f-rec{color:var(--rec)}
.filar.f-pam .bar i{background:var(--pam)} .filar.f-glo .bar i{background:var(--glo)}
.filar.f-zmy .bar i{background:var(--zmy)} .filar.f-rec .bar i{background:var(--rec)}
.kropka.zaliczone.f-pam{background:var(--pam); border-color:var(--pam)}
.kropka.zaliczone.f-glo{background:var(--glo); border-color:var(--glo)}
.kropka.zaliczone.f-zmy{background:var(--zmy); border-color:var(--zmy)}
.kropka.zaliczone.f-rec{background:var(--rec); border-color:var(--rec)}
/* ── karty poziomów ── */
.poziomy-lista{display:grid; gap:9px}
.poziom-karta{display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line); border-radius:10px; padding:11px 14px}
.poziom-karta .nrp{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--panel2); font-weight:700; font-size:13px; flex:0 0 auto}
.poziom-karta.osiagniety{border-color:rgba(18,163,122,.45)}
.poziom-karta.osiagniety .nrp{background:var(--accent2); color:#fff}
.poziom-karta.aktualny{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.poziom-karta .pn2{font-weight:700; font-size:14px}
.poziom-karta .pd2{font-size:12.5px; color:var(--muted)}
.poziom-karta .pw2{font-size:12px; color:var(--muted); margin-top:2px}
/* ── zakładka prompty ── */
.prompt-karta{margin-bottom:10px}
.prompt-karta .gdzie{font-size:12px; color:var(--muted)}
/* ── Centrum Edukacyjne admina (warsztaty) ── */
.warsztat-naglowek{cursor:pointer; user-select:none}
.warsztat-naglowek:hover{color:var(--accent)}
.notatka-trenera{border-left:3px solid var(--warn); background:#fff8ec}