:root{
  --bg:#f5f3f8;--card:#ffffff;--text:#1a1f2b;--muted:#5b6478;--line:#e3e7ee;
  --brand:#5B2A4E;--brand2:#9b3f7a;--accent:#f7c948;--ok:#1a9c5b;--bad:#d64545;--info:#2f6fb0;
  --shadow:0 4px 18px rgba(20,40,80,.08);--r:16px;
}
[data-theme="dark"]{
  --bg:#0f1622;--card:#182233;--text:#e8edf5;--muted:#9aa6bb;--line:#26324a;
  --brand:#8a3f74;--brand2:#e08cc0;--accent:#f7c948;--ok:#2ec27e;--bad:#ff6b6b;--info:#5aa9e6;
  --shadow:0 4px 18px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.5;-webkit-tap-highlight-color:transparent}
.app{min-height:100dvh;display:flex;flex-direction:column;max-width:860px;margin:0 auto}
.top{position:sticky;top:0;z-index:10;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;display:flex;align-items:center;gap:10px;min-height:56px;box-shadow:0 2px 12px rgba(0,0,0,.15)}
.top .title{font-weight:700;font-size:17px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .sub{font-size:12px;opacity:.85;display:block;font-weight:400}
.top button{background:rgba(255,255,255,.18);border:0;color:#fff;border-radius:12px;padding:8px 10px;font-size:14px;cursor:pointer}
.top .av{font-size:26px;line-height:1}
.main{flex:1;padding:14px 14px calc(78px + env(safe-area-inset-bottom))}
.bottom{position:fixed;bottom:0;left:0;right:0;margin:0 auto;max-width:860px;display:flex;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:10}
.bottom button{flex:1;background:none;border:0;color:var(--muted);padding:8px 4px 6px;font-size:11px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}
.bottom button .i{font-size:22px}
.bottom button.on{color:var(--brand2);font-weight:700}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;margin-bottom:12px}
.card h2{margin:0 0 6px;font-size:18px}
.card h3{margin:14px 0 6px;font-size:16px;color:var(--brand2)}
.card p{margin:6px 0}
.muted{color:var(--muted);font-size:14px}
.row{display:flex;gap:10px;align-items:center}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--brand2);color:#fff;border:0;border-radius:14px;padding:12px 18px;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none}
.btn.sec{background:var(--card);color:var(--brand2);border:2px solid var(--brand2)}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}
.btn.acc{background:var(--accent);color:#1a1f2b}
.btn.full{width:100%}
.btn:disabled{opacity:.5;cursor:default}
.btn.sm{padding:8px 12px;font-size:13px;border-radius:10px}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--line);color:var(--muted)}
.pill.ok{background:rgba(26,156,91,.15);color:var(--ok)}
.pill.bad{background:rgba(214,69,69,.15);color:var(--bad)}
.pill.info{background:rgba(47,111,176,.15);color:var(--info)}
.pill.acc{background:rgba(247,201,72,.3);color:#7a5a00}
[data-theme="dark"] .pill.acc{color:var(--accent)}
.bar{height:8px;background:var(--line);border-radius:999px;overflow:hidden;margin:6px 0}
.bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--brand2),var(--ok));border-radius:999px;transition:width .4s}
.bar.acc > i{background:var(--accent)}
/* login */
.login{display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:20px}
.login h1{margin:0;font-size:24px;text-align:center}
.avatars{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;width:100%;max-width:420px}
.avatars button{background:var(--card);border:2px solid var(--line);border-radius:20px;padding:18px 10px;font-size:16px;font-weight:700;color:var(--text);cursor:pointer;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:8px}
.avatars button .e{font-size:54px;line-height:1}
.avatars button:active{transform:scale(.97)}
.avatars button.parent{grid-column:1/-1;flex-direction:row;justify-content:center;padding:14px}
.pin{display:flex;gap:8px;justify-content:center}
.pin input{width:150px;text-align:center;font-size:24px;letter-spacing:8px;padding:10px;border-radius:12px;border:2px solid var(--line);background:var(--card);color:var(--text)}
/* sections list */
.sec-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.sec-item:last-child{border-bottom:0}
.sec-item .n{width:34px;height:34px;border-radius:10px;background:var(--line);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--muted);flex-shrink:0}
.sec-item.done .n{background:var(--ok);color:#fff}
.sec-item .t{flex:1}
.sec-item .t small{display:block;color:var(--muted);font-size:12px}
.sec-item .arrow{color:var(--muted)}
/* knowledge */
.wiedza{font-size:16px}
.wiedza h3{font-size:17px;margin:20px 0 6px;color:var(--brand2);border-left:4px solid var(--accent);padding-left:8px}
.wiedza p,.wiedza li{margin:6px 0}
.wiedza ul,.wiedza ol{padding-left:22px}
.wiedza .tw{overflow-x:auto;margin:10px 0;-webkit-overflow-scrolling:touch}
.wiedza table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:420px}
.wiedza th,.wiedza td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.wiedza th{background:rgba(47,111,176,.12)}
.przyklad{background:rgba(247,201,72,.14);border:1px solid rgba(247,201,72,.6);border-radius:12px;padding:10px 12px;margin:12px 0}
.przyklad .pz-t{font-weight:700;color:#7a5a00;font-size:13px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
[data-theme="dark"] .przyklad .pz-t{color:var(--accent)}
.ilu{margin:14px 0;text-align:center}
.ilu img{max-width:100%;border-radius:12px;background:#fff;border:1px solid var(--line)}
.ilu figcaption{font-size:12px;color:var(--muted);margin-top:4px}
.sticky-actions{position:sticky;bottom:calc(70px + env(safe-area-inset-bottom));display:flex;gap:10px;padding:10px 0;background:linear-gradient(to top,var(--bg) 70%,transparent)}
/* quiz */
.q-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);margin-bottom:6px}
.q-text{font-size:17px;font-weight:600;margin:8px 0 12px}
.q-img{margin:8px 0 14px;text-align:center}
.q-img img{max-width:100%;max-height:60vh;border-radius:12px;border:1px solid var(--line);background:#fff}
.opt{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:12px 14px;margin:8px 0;font-size:15px;color:var(--text);cursor:pointer}
.opt .l{width:28px;height:28px;border-radius:50%;background:var(--line);display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;font-size:13px}
.opt.sel{border-color:var(--brand2)}
.opt.sel .l{background:var(--brand2);color:#fff}
.opt.right{border-color:var(--ok);background:rgba(26,156,91,.08)}
.opt.right .l{background:var(--ok);color:#fff}
.opt.wrong{border-color:var(--bad);background:rgba(214,69,69,.08)}
.opt.wrong .l{background:var(--bad);color:#fff}
.opt:disabled{cursor:default;opacity:1}
.expl{border-radius:12px;padding:12px 14px;margin:12px 0;font-size:14.5px}
.expl.ok{background:rgba(26,156,91,.12);border:1px solid var(--ok)}
.expl.bad{background:rgba(214,69,69,.1);border:1px solid var(--bad)}
.tf{display:flex;gap:10px}
.tf .opt{justify-content:center;font-weight:700;font-size:18px}
.result-big{font-size:44px;font-weight:800;text-align:center;margin:8px 0}
.stat{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.stat > div{background:var(--bg);border-radius:12px;padding:10px;text-align:center}
.stat b{display:block;font-size:22px}
.stat span{font-size:12px;color:var(--muted)}
.review{border-top:1px solid var(--line);padding:10px 0}
.review .qq{font-weight:600}
.review .a{font-size:14px;margin-top:4px}
.days{display:flex;gap:4px;flex-wrap:wrap}
.days i{width:14px;height:14px;border-radius:3px;background:var(--line);display:block}
.days i.l1{background:#a7d8b7}.days i.l2{background:#5cbf7d}.days i.l3{background:var(--ok)}
.tabs{display:flex;gap:6px;margin:6px 0 12px;flex-wrap:wrap}
.tabs button{background:var(--card);border:1px solid var(--line);color:var(--text);border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer}
.tabs button.on{background:var(--brand2);color:#fff;border-color:var(--brand2)}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);background:var(--brand);color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;opacity:0;pointer-events:none;transition:all .3s;z-index:50;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.loading{text-align:center;padding:40px;color:var(--muted)}
.hero{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border-radius:var(--r);padding:18px;margin-bottom:12px;box-shadow:var(--shadow)}
.hero h2{margin:0 0 4px;font-size:20px}
.hero .bar{background:rgba(255,255,255,.25)}
.hero .bar > i{background:var(--accent)}
.hero .muted{color:rgba(255,255,255,.85)}
.badge-today{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.18);padding:4px 10px;border-radius:999px;font-size:13px;margin-top:8px}
.dzial-card{cursor:pointer}
.dzial-card .ico{font-size:30px}
.kv{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--line);font-size:14px}
.kv:last-child{border-bottom:0}
.cnt{display:flex;gap:8px;align-items:center;margin:8px 0}
.cnt input[type=range]{flex:1}
.small{font-size:13px}
.center{text-align:center}
.mt{margin-top:12px}
.warn{background:rgba(247,201,72,.2);border-left:4px solid var(--accent);padding:8px 12px;border-radius:8px;font-size:14px}