:root{
  color-scheme:light;
  --bg:#eef1f4;--panel:#ffffff;--panel-2:#f5f7f9;--fg:#17212b;--muted:#566370;--line:#d3dae1;--line-2:#e3e8ed;
  --accent:#b0245c;--accent-fg:#fff;--accent-soft:#fbe8ef;--accent-line:#efbdd0;
  --ok:#2b7a3d;--ok-soft:#e3f4e6;--err:#b42828;--err-soft:#fbe7e7;--warn:#9a5b00;--warn-soft:#fff3d9;
  --code:#fbf8f9;--sel:#f6cddd;
  --k-kw:#b0245c;--k-str:#a3530b;--k-num:#0b7d6f;--k-com:#7b8794;--k-fn:#1864ab;--k-id:#0b5394;--k-op:#566370;
  --sans:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;--cond:"IBM Plex Sans Condensed","Arial Narrow",sans-serif;--mono:"IBM Plex Mono",Consolas,monospace;
  --ed-fs:14.5px;--ed-lh:22px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;
  --bg:#0c1218;--panel:#151e27;--panel-2:#1a2530;--fg:#e6edf3;--muted:#9fb0bd;--line:#2a3845;--line-2:#22303c;
  --accent:#ff8db6;--accent-fg:#3a0b1d;--accent-soft:#3a1b29;--accent-line:#71304c;
  --ok:#6fd38a;--ok-soft:#173323;--err:#ff8f8f;--err-soft:#3a1c1f;--warn:#f5c062;--warn-soft:#3a2c12;
  --code:#101922;--sel:#5a2a40;
  --k-kw:#ff8db6;--k-str:#ffbf7a;--k-num:#63dcc0;--k-com:#6f8191;--k-fn:#78c2ff;--k-id:#9cc7ff;--k-op:#9fb0bd}}
:root[data-theme="dark"]{color-scheme:dark;
  --bg:#0c1218;--panel:#151e27;--panel-2:#1a2530;--fg:#e6edf3;--muted:#9fb0bd;--line:#2a3845;--line-2:#22303c;
  --accent:#ff8db6;--accent-fg:#3a0b1d;--accent-soft:#3a1b29;--accent-line:#71304c;
  --ok:#6fd38a;--ok-soft:#173323;--err:#ff8f8f;--err-soft:#3a1c1f;--warn:#f5c062;--warn-soft:#3a2c12;
  --code:#101922;--sel:#5a2a40;
  --k-kw:#ff8db6;--k-str:#ffbf7a;--k-num:#63dcc0;--k-com:#6f8191;--k-fn:#78c2ff;--k-id:#9cc7ff;--k-op:#9fb0bd}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 var(--sans);overflow:hidden}
button{font:inherit;color:inherit}
button:focus-visible,select:focus-visible,textarea:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
code,kbd,pre{font-family:var(--mono)}
#app{height:100%;display:flex;flex-direction:column;min-height:0;padding-top:env(safe-area-inset-top,0px)}
/* pasek górny */
#bar{display:flex;align-items:center;gap:8px;background:var(--panel);border-bottom:1px solid var(--line);padding-block:7px;padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px));min-height:52px}
#home{display:inline-flex;align-items:center;gap:7px;flex:none;height:32px;padding:0 10px 0 6px;border-radius:7px;color:var(--muted);text-decoration:none;font:500 13.5px var(--sans);white-space:nowrap}
#home:hover{background:var(--panel-2);color:var(--fg)}#home img{width:20px;height:auto;display:block}#home .ar{font-size:15px;line-height:1}
.brand{display:flex;align-items:baseline;gap:8px;min-width:0;padding-left:6px;border-left:1px solid var(--line)}
.brand b{font:700 18px/1 var(--cond);white-space:nowrap}
.brand .ver{font:12px var(--mono);color:var(--muted);white-space:nowrap}
.curdb{display:flex;align-items:center;gap:6px;margin-left:8px;min-width:0}
.curdb label{font-size:13px;color:var(--muted)}
.curdb select{height:32px;max-width:220px;border:1px solid var(--line);border-radius:7px;background:var(--panel-2);color:var(--fg);font:500 13.5px var(--mono);padding:0 8px}
.sp{flex:1}
.tb{height:32px;padding:0 11px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--muted);font:500 13.5px var(--sans);cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tb:hover{background:var(--panel-2);color:var(--fg)}
.tb[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.tb svg{width:16px;height:16px;flex:none}
.tbs{display:flex;gap:2px;align-items:center}
/* układ */
#main{flex:1;min-height:0;display:grid;grid-template-columns:240px minmax(0,1fr) 400px}
#main.nol{grid-template-columns:240px minmax(0,1fr) 0}
#main.nol #les{display:none}
aside{min-width:0;min-height:0;background:var(--panel);display:flex;flex-direction:column}
#tree{border-right:1px solid var(--line)}
#les{border-left:1px solid var(--line)}
.ph{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px 8px 14px;font:600 12px var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line-2)}
.ph .ib{width:26px;height:26px;border-radius:6px;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:18px;line-height:1;display:grid;place-items:center}
.ph .ib:hover{background:var(--panel-2);color:var(--fg)}
.scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
/* drzewo baz */
#treebody{padding:6px 0 16px}
.dbn{display:flex;align-items:center;gap:4px;padding:0 8px 0 6px;height:30px;cursor:pointer;font:500 13.5px var(--mono);color:var(--fg);border-radius:0;user-select:none;width:100%;border:0;background:transparent;text-align:left}
.dbn:hover{background:var(--panel-2)}
.dbn .tw{width:18px;flex:none;color:var(--muted);font-size:11px;transition:transform .15s;display:inline-block;text-align:center}
.dbn[aria-expanded="true"] .tw{transform:rotate(90deg)}
.dbn .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.dbn.cur{background:var(--accent-soft);color:var(--accent);font-weight:600}
.dbn.sys{color:var(--muted);font-weight:400;cursor:default}.dbn.sys:hover{background:transparent}
.ico{width:15px;height:15px;flex:none;color:var(--muted)}
.dbn.cur .ico{color:var(--accent)}
.tbl{display:flex;align-items:center;gap:6px;height:28px;padding:0 6px 0 30px;font:13px var(--mono);color:var(--fg);cursor:pointer;position:relative}
.tbl:hover{background:var(--panel-2)}
.tbl .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.tbl .cnt{font-size:11.5px;color:var(--muted)}
.tbl .sb{display:none;border:1px solid var(--line);background:var(--panel);border-radius:5px;font:11.5px var(--sans);padding:1px 6px;color:var(--muted);cursor:pointer}
.tbl:hover .sb,.tbl:focus-within .sb{display:inline-block}.tbl:hover .cnt{display:none}
.tbl .sb:hover{color:var(--accent);border-color:var(--accent-line)}
.empty-db{padding:2px 8px 6px 32px;font-size:12.5px;color:var(--muted);font-style:italic}
.newdb{display:flex;gap:6px;padding:8px 10px}
.newdb input{flex:1;min-width:0;height:30px;border:1px solid var(--line);border-radius:6px;background:var(--panel-2);color:var(--fg);font:13px var(--mono);padding:0 8px}
/* obszar pracy */
#work{display:flex;flex-direction:column;min-width:0;min-height:0}
#edbox{position:relative;flex:none;height:var(--edh,38%);min-height:110px;background:var(--code);border-bottom:1px solid var(--line);display:flex}
#gut{flex:none;width:44px;white-space:pre;padding:10px 8px 10px 0;text-align:right;font:var(--ed-fs)/var(--ed-lh) var(--mono);color:var(--muted);opacity:.7;overflow:hidden;user-select:none;background:var(--panel-2);border-right:1px solid var(--line-2)}
#edin{position:relative;flex:1;min-width:0}
#hl,#ed{position:absolute;inset:0;margin:0;padding:10px 14px;font:var(--ed-fs)/var(--ed-lh) var(--mono);white-space:pre;overflow:auto;tab-size:2;letter-spacing:0;font-variant-ligatures:none}
#hl{pointer-events:none;color:var(--fg);overflow:hidden}
#ed{background:transparent;color:transparent;caret-color:var(--fg);border:0;resize:none;outline:none;z-index:1}
#ed::selection{background:var(--sel);color:transparent}
#ed::placeholder{color:var(--muted)}
.k-kw{color:var(--k-kw);font-weight:600}.k-str{color:var(--k-str)}.k-num{color:var(--k-num)}.k-com{color:var(--k-com);font-style:italic}.k-fn{color:var(--k-fn)}.k-id{color:var(--k-id)}.k-op{color:var(--k-op)}
#rsz{flex:none;height:8px;cursor:row-resize;background:var(--panel);border-bottom:1px solid var(--line);display:grid;place-items:center;touch-action:none}
#rsz::before{content:"";width:40px;height:3px;border-radius:2px;background:var(--line)}
#tools{flex:none;display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.btn{height:34px;padding:0 14px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--fg);font:500 14px var(--sans);cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.btn:hover{border-color:var(--accent-line);background:var(--panel-2)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);font-weight:600}
.btn.pri:hover{filter:brightness(1.08);background:var(--accent)}
.btn kbd{font:11.5px var(--mono);opacity:.75;border:1px solid currentColor;border-radius:4px;padding:0 4px}
.btn.chk{border-color:var(--ok);color:var(--ok);font-weight:600}
.btn.chk:hover{background:var(--ok-soft)}
.btn.sm{height:30px;padding:0 10px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:default}
#status{flex:1 1 0;font-size:13px;color:var(--muted);margin-left:4px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tsk{flex:0 0 auto;min-width:0;display:flex;justify-content:flex-end;gap:6px;align-items:center}
#tsk .tl{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#out{flex:1;min-height:0;overflow:auto;padding:12px 14px 40px;display:flex;flex-direction:column;gap:12px}
.hello{max-width:62ch;color:var(--muted);font-size:14.5px}
.hello h2{margin:4px 0 6px;font:700 22px var(--cond);color:var(--fg)}
.hello p{margin:0 0 8px}
.hello code{background:var(--panel);border:1px solid var(--line-2);border-radius:4px;padding:0 4px;font-size:13px}
.res{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;flex:none}
.res .rh{display:flex;align-items:flex-start;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line-2);font-size:13px}
.res .rh .sq{flex:1;min-width:0;font:12.5px/1.5 var(--mono);color:var(--muted);white-space:pre-wrap;word-break:break-word;max-height:4.6em;overflow:hidden}
.res .rh .mg{flex:none;font-weight:600;color:var(--ok);white-space:nowrap}
.res .raw{padding:0 12px 8px;font:12px var(--mono);color:var(--muted);white-space:pre-wrap}
.res.ok .rh{border-bottom:0}
.res.err{border-color:color-mix(in srgb,var(--err) 45%,var(--line));background:var(--err-soft)}
.res.err .rh{border-bottom:0}
.res.err .mg{color:var(--err)}
.res .em{padding:0 12px 10px;font:13px/1.5 var(--mono);color:var(--err);white-space:pre-wrap;word-break:break-word}
.res .hint{margin:0 12px 10px;padding:8px 10px;border-radius:7px;background:var(--panel);font-size:13.5px;color:var(--fg)}
.res .hint b{color:var(--warn)}
.tw{overflow:auto;max-height:60vh}
table.rt{border-collapse:collapse;font:13px/1.4 var(--mono);min-width:100%}
table.rt th{position:sticky;top:0;background:var(--panel-2);text-align:left;font-weight:600;padding:6px 12px;border-bottom:1px solid var(--line);white-space:nowrap;color:var(--fg)}
table.rt td{padding:5px 12px;border-bottom:1px solid var(--line-2);white-space:pre;max-width:44ch;overflow:hidden;text-overflow:ellipsis;vertical-align:top}
table.rt tr:nth-child(even) td{background:color-mix(in srgb,var(--panel-2) 55%,transparent)}
table.rt td.n{text-align:right}
table.rt td.long{white-space:pre-wrap;max-width:none}
.nul{color:var(--muted);font-style:italic}
.more{padding:6px 12px;font-size:12.5px;color:var(--muted)}
/* lekcje */
#lesb{padding:0 0 30px}
.lg{padding:14px 16px 4px;font:600 11.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.li{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;text-align:left;padding:9px 16px;cursor:pointer;font-size:14.5px}
.li:hover{background:var(--panel-2)}
.li .no{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:600 12.5px var(--mono);background:var(--panel-2);color:var(--muted);border:1px solid var(--line)}
.li.done .no{background:var(--ok);border-color:var(--ok);color:var(--panel)}
.li .tt{flex:1;min-width:0}
.li .pg{font-size:12px;color:var(--muted);white-space:nowrap}
.lv{padding:12px 18px 30px}
.lv .back{border:0;background:transparent;color:var(--accent);cursor:pointer;padding:4px 0;font:500 13.5px var(--sans)}
.lv h2{margin:6px 0 2px;font:700 24px/1.15 var(--cond)}
.lv .meta{font-size:13px;color:var(--muted);margin-bottom:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;gap:4px;font:12px var(--mono);padding:1px 8px;border-radius:20px;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line)}
.body{font-size:14.5px;line-height:1.6}
.body p{margin:0 0 10px}.body ul{margin:0 0 10px;padding-left:20px}.body li{margin:3px 0}
.body h4{margin:16px 0 6px;font:700 16px var(--cond)}
.body code{font-size:12.8px;background:var(--code);border:1px solid var(--line-2);border-radius:4px;padding:0 4px;white-space:nowrap}
pre.code{margin:8px 0 12px;padding:10px 12px;border-radius:8px;background:var(--code);border:1px solid var(--line-2);font:12.8px/1.55 var(--mono);overflow:auto;white-space:pre}
.body table.ref{border-collapse:collapse;width:100%;margin:8px 0 12px;font-size:13px}
.body table.ref th,.body table.ref td{border:1px solid var(--line);padding:5px 7px;text-align:left;vertical-align:top}
.body table.ref th{background:var(--panel-2)}
.body table.ref code{white-space:normal}
.tip,.warn{padding:9px 11px;border-radius:8px;font-size:13.5px}
.tip{background:var(--accent-soft);border:1px solid var(--accent-line)}
.warn{background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent)}
.lnk{border:0;background:none;padding:0;color:var(--accent);text-decoration:underline;cursor:pointer;font:inherit}
.exs{display:grid;gap:8px;margin:6px 0 16px}
.ex{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel)}
.ex .eh{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 6px 5px 10px;background:var(--panel-2);font-size:13px;font-weight:600}
.ex pre{margin:0;padding:8px 10px;font:12.5px/1.5 var(--mono);overflow:auto;white-space:pre}
h3.sec{margin:20px 0 8px;font:700 18px var(--cond);display:flex;align-items:center;gap:8px}
.task{border:1px solid var(--line);border-radius:10px;padding:12px 12px 10px;margin-bottom:10px;background:var(--panel);transition:border-color .2s,box-shadow .2s}
.task.act{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.task.done{border-color:color-mix(in srgb,var(--ok) 55%,var(--line))}
.task .th{display:flex;align-items:center;gap:8px;margin-bottom:6px;font:600 13px var(--sans);color:var(--muted)}
.task .th .st{margin-left:auto;font-weight:600}
.task.done .th .st{color:var(--ok)}
.task .q{font-size:14.5px;line-height:1.55}
.task .q code{font-size:12.8px;background:var(--code);border:1px solid var(--line-2);border-radius:4px;padding:0 4px}
.dbtag{display:inline-block;font:600 11.5px var(--mono);padding:0 6px;border-radius:4px;background:var(--warn-soft);color:var(--warn);margin-right:4px}
.task .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.fb{margin-top:10px;padding:9px 11px;border-radius:8px;font-size:13.5px;line-height:1.5}
.fb.ok{background:var(--ok-soft);color:var(--fg);border:1px solid color-mix(in srgb,var(--ok) 45%,transparent)}
.fb.no{background:var(--err-soft);border:1px solid color-mix(in srgb,var(--err) 40%,transparent)}
.fb.info{background:var(--panel-2);border:1px solid var(--line)}
.fb ul{margin:4px 0 0;padding-left:18px}
.fb pre.code{margin:6px 0 0}
.fb code{font-size:12.5px}
.sol{margin-top:8px}
.bar2{display:flex;align-items:center;gap:10px;margin:2px 0 6px}
.pbar{flex:1;height:6px;border-radius:3px;background:var(--line-2);overflow:hidden}.pbar i{display:block;height:100%;background:var(--ok);border-radius:3px;transition:width .4s}
/* okna */
dialog{border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--fg);padding:0;max-width:min(980px,calc(100vw - 24px));width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(10,16,24,.45)}
.dh{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.dh h2{margin:0;font:700 20px var(--cond)}
.db{padding:14px 16px;max-height:min(70vh,700px);overflow:auto}
.smp{display:grid;gap:10px}
.smp .it{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:12px}
.smp .it div{flex:1;min-width:0}.smp .it b{display:block;font:600 15px var(--sans)}.smp .it span{font-size:13px;color:var(--muted)}
.smp code{font-size:12px;color:var(--accent)}
#er{display:block;width:100%;min-height:420px;background:var(--panel-2);border-radius:8px;touch-action:none}
#er .bx rect.b{fill:var(--panel);stroke:var(--line)}#er .bx rect.h{fill:var(--accent)}
#er .bx text{font:12px var(--mono);fill:var(--fg)}#er .bx text.ht{fill:var(--accent-fg);font-weight:600}
#er .bx text.k{font-size:10px;fill:var(--accent);font-weight:700}#er .bx text.fk{fill:var(--k-str)}
#er .bx{cursor:grab}#er path.rel{fill:none;stroke:var(--accent);stroke-width:1.6;opacity:.8}
#er circle.end{fill:var(--accent)}
.hist{display:grid;gap:6px}.hist button{text-align:left;border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:8px 10px;font:12.5px/1.45 var(--mono);white-space:pre-wrap;max-height:6.5em;overflow:hidden;cursor:pointer;color:var(--fg)}
.hist button:hover{border-color:var(--accent-line)}
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);background:var(--fg);color:var(--bg);padding:9px 16px;border-radius:9px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;max-width:calc(100vw - 32px)}
#toast.on{opacity:1;transform:translateX(-50%)}
#mtabs{display:none}
#cw{font-size:12.5px;color:var(--muted);padding:6px 16px 0}
/* wąskie ekrany */
@media (max-width:1280px){#main{grid-template-columns:210px minmax(0,1fr) 360px}#main.nol{grid-template-columns:210px minmax(0,1fr) 0}.tb .tx{display:none}}
@media (max-width:1000px){
  #main,#main.nol{grid-template-columns:200px minmax(0,1fr)}
  #les{position:fixed;right:0;top:0;bottom:0;width:min(420px,92vw);z-index:30;box-shadow:-10px 0 40px rgba(0,0,0,.25);padding-top:env(safe-area-inset-top,0px);padding-right:env(safe-area-inset-right,0px)}
  #main.nol #les{display:none}
  .brand .ver{display:none}
}
@media (max-width:760px){
  body{overflow:auto}
  #app{height:auto;min-height:100%}
  #main,#main.nol{display:block}
  #tree,#work,#les{display:none}
  #main[data-v="tree"] #tree,#main[data-v="work"] #work{display:flex}
  #main[data-v="les"] #les{display:flex;position:static;width:auto;box-shadow:none;padding:0}
  #tree,#les{min-height:calc(100vh - 110px)}
  #work{min-height:calc(100vh - 110px)}
  #edbox{height:230px}
  #rsz{display:none}
  #out{overflow:visible}
  .curdb label{display:none}.curdb select{max-width:132px}.curdb{margin-left:0}
  #home .tx{display:none}#home{padding:0 6px}.tb{padding:0 7px}#bar{gap:4px}.btn kbd{display:none}
  .brand{display:none}
  #mtabs{display:flex;position:sticky;bottom:0;z-index:20;background:var(--panel);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
  #mtabs button{flex:1;height:50px;border:0;background:transparent;color:var(--muted);font:600 13.5px var(--sans);cursor:pointer}
  #mtabs button[aria-selected="true"]{color:var(--accent);box-shadow:inset 0 3px 0 var(--accent)}
  #b-lessons{display:none}
  .tw{max-height:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}