:root{--bg:#f7f5f1;--card:#fff;--tx:#23211e;--mu:#7a756c;--ac:#3a5a8c;--ln:#e6e1d8;--ok:#3f8f5f;--bad:#c0504d;box-sizing:border-box}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#17181b;--card:#222428;--tx:#ecebe8;--mu:#9a9890;--ac:#8fb0e6;--ln:#33363b}}
:root[data-theme=dark]{--bg:#17181b;--card:#222428;--tx:#ecebe8;--mu:#9a9890;--ac:#8fb0e6;--ln:#33363b}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--tx);font:var(--fs,17px)/1.45 -apple-system,system-ui,"Helvetica Neue",sans-serif;overflow-x:hidden}
#app{max-width:520px;margin:0 auto;padding:16px}
h1{font-size:1.5em;margin:.2em 0 .6em}h2{font-size:1.1em;margin:1em 0 .4em}
.card{background:var(--card);border:1px solid var(--ln);border-radius:20px;padding:18px;margin:10px 0}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.big{font-size:1.8em;font-weight:700}.mu{color:var(--mu);font-size:.85em}
button,select,input,textarea{font:inherit;color:var(--tx)}
button{min-height:48px;border-radius:14px;border:1px solid var(--ln);background:var(--card);padding:10px 14px;cursor:pointer}
button.p{background:var(--ac);color:#fff;border:0;font-weight:600}button.w{width:100%;margin:5px 0}
button:focus-visible,input:focus-visible{outline:3px solid var(--ac)}
input,select,textarea{width:100%;min-height:46px;border-radius:12px;border:1px solid var(--ln);background:var(--card);padding:10px;margin:4px 0}
textarea{min-height:110px}
.row{display:flex;gap:8px;align-items:center}.row>*{flex:1}
.bar{height:10px;border-radius:5px;background:var(--ln);overflow:hidden}.bar i{display:block;height:100%;background:var(--ac)}
.fc{text-align:center;padding:34px 16px;min-height:220px;animation:in .25s}
@keyframes in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.fr{font-size:2em;font-weight:700}.ex{margin-top:14px;font-style:italic}
.tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:6px}.tabs button{flex:none;min-height:40px}
.li{display:flex;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid var(--ln)}
.ok{color:var(--ok)}.bad{color:var(--bad)}
:root{--bg:#f4f1ec;--card:#fff;--tx:#1f2430;--mu:#7b8190;--ac:#5048e5;--ln:#ebe7e0;--ok:#2f9e6b;--bad:#d9534f}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#07080b;--card:#12141a;--tx:#eef0f6;--mu:#9aa1b2;--ac:#9aa2ff;--ln:#2a2e3b}}
:root[data-theme=dark]{--bg:#07080b;--card:#12141a;--tx:#eef0f6;--mu:#9aa1b2;--ac:#9aa2ff;--ln:#2a2e3b}
body{background:radial-gradient(700px 380px at 100% -8%,color-mix(in srgb,var(--ac) 14%,transparent),transparent),var(--bg);min-height:100vh}
#app{padding:20px 18px 110px}
h1{font-size:1.9em;letter-spacing:-.02em;margin:.1em 0 .5em}h2{font-size:.8em;text-transform:uppercase;letter-spacing:.08em;color:var(--mu);margin:1.6em 0 .5em}
.card{border:0;border-radius:24px;padding:20px;box-shadow:0 1px 2px rgba(20,20,50,.05),0 10px 28px rgba(20,20,50,.07)}
.big{font-size:2em;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
button{border-radius:16px;font-weight:500;transition:transform .12s,box-shadow .2s;box-shadow:0 1px 2px rgba(20,20,50,.06)}button:active{transform:scale(.97)}
button.p{background:linear-gradient(135deg,#5b52f0,#8a5cf6);color:#fff;min-height:54px;font-size:1.05em;box-shadow:0 8px 20px rgba(91,82,240,.35)}
button.w{margin:7px 0}.duo{display:flex;gap:10px;margin:7px 0}.duo>button{flex:1;min-height:46px;font-size:.9em;padding:8px 10px;margin:0}
input,select,textarea{border:1.5px solid var(--ln);border-radius:14px;background:var(--card);transition:border-color .2s,box-shadow .2s}input:focus,select:focus,textarea:focus{outline:0;border-color:var(--ac);box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 18%,transparent)}
.bar{height:8px;border-radius:6px}.bar i{background:linear-gradient(90deg,#5b52f0,#9b6cf7);border-radius:6px;transition:width .5s}
.hero{background:linear-gradient(135deg,#5b52f0,#8f5cf5);color:#fff;box-shadow:0 14px 30px rgba(91,82,240,.35)}.hero .mu{color:rgba(255,255,255,.8)}.hero .bar{background:rgba(255,255,255,.25);margin-top:8px}.hero .bar i{background:#fff}
.fc{min-height:290px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:28px 20px}
.fr{font-family:ui-serif,"New York",Georgia,serif;font-size:2.3em;letter-spacing:-.01em;line-height:1.15;word-break:break-word}
.fc>button{border:0;border-radius:999px;min-height:40px;font-size:.85em;color:var(--ac);background:color-mix(in srgb,var(--ac) 11%,var(--card));box-shadow:none}
.fc input{text-align:center;font-size:1.2em;min-height:54px}.fc .big{font-family:ui-serif,"New York",Georgia,serif;font-size:1.7em;margin:0!important}
.ex{margin:0;padding-top:12px;border-top:1px dashed var(--ln);width:100%}
.r0,.r1,.r2,.r3{border:0;min-height:58px;font-weight:600;color:var(--c);background:color-mix(in srgb,var(--c) 14%,var(--card));box-shadow:none}.r0{--c:#d9534f}.r1{--c:#d98a1f}.r2{--c:#2f9e6b}.r3{--c:#5b6cf0}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:9;margin:0;padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px));justify-content:space-around;gap:0;overflow:visible;background:color-mix(in srgb,var(--card) 86%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-top:1px solid var(--ln)}
.tabs button{flex:1;min-height:52px;border:0;background:none;box-shadow:none;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:.68em;color:var(--mu);padding:4px 0}.tabs button span{font-size:1.7em;line-height:1.1}.tabs button.on{color:var(--ac);font-weight:700}
.li{padding:13px 0}.li button{min-height:40px;padding:4px 10px;border:0;background:none;box-shadow:none;font-size:1.2em}
.df{width:100%;text-align:left}.dl{font-family:ui-serif,"New York",Georgia,serif;font-size:1.6em;margin:2px 0 12px;word-break:break-word}.dl u{text-decoration:none;border-radius:6px;padding:0 2px}.dl u.bad{background:color-mix(in srgb,var(--bad) 25%,transparent);color:var(--bad);text-decoration:line-through}.dl u.ok{background:color-mix(in srgb,var(--ok) 25%,transparent);color:var(--ok)}
.wd{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;font-family:ui-serif,"New York",Georgia,serif;font-size:2.1em;margin:6px 0}.lt{min-width:.7em;text-align:center;line-height:1.3}.lt.bl{border-bottom:3px solid var(--ac)}.lt.bad{color:var(--bad)}
.kb{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px}.kb button{flex:0 0 calc(12.5% - 6px);min-height:46px;padding:0;font-size:1.1em}.kb button.ok{color:var(--ok);font-weight:700}.kb button.no{color:var(--bad)}.kb button:disabled{opacity:.35}
.lt.g{color:var(--ok)}.lt.y{background:color-mix(in srgb,#f2c94c 45%,transparent);color:#c99a00;border-radius:6px}
.wdw{position:relative;width:100%}.fc input.ghost{position:absolute;inset:0;width:100%;height:100%;min-height:0;opacity:0;font-size:16px;margin:0;padding:0;border:0}.lt.bl{border-bottom-color:var(--ln)}.lt.bl.act{border-bottom-color:var(--ac)}.lt.g{border-bottom-color:var(--ok)}.lt.y{border-bottom-color:#c99a00}.lt.bad{border-bottom-color:var(--bad)}
.wd{padding:6px 10px;border-radius:16px}.wd.pen{box-shadow:0 0 0 2.5px var(--bad)}
button.gr{background:linear-gradient(135deg,#2a8f61,#45b487);color:#fff;border:0;min-height:54px;font-size:1.05em;font-weight:600;box-shadow:0 8px 20px rgba(42,143,97,.32)}
.cr{display:flex;align-items:center;gap:10px;padding:6px 10px;margin:4px 0;border-radius:14px}.cr.cur{background:color-mix(in srgb,var(--ac) 9%,transparent)}.pr{flex:0 0 4.6em;color:var(--mu);font-size:.95em;text-align:right}.cw{display:flex;flex-wrap:wrap;gap:3px;font-family:ui-serif,"New York",Georgia,serif;font-size:1.55em}.cjw{position:relative;margin:10px 0}.cjw input.ghost{position:absolute;inset:0;width:100%;height:100%;min-height:0;opacity:0;font-size:16px;margin:0;padding:0;border:0}
.lt.au{color:#38a3f5;border-bottom-color:#38a3f5}
button.bl2{background:linear-gradient(135deg,#2f7be0,#4aa3f5);color:#fff;border:0;min-height:54px;font-size:1.05em;font-weight:600;box-shadow:0 8px 20px rgba(47,123,224,.32)}button.ye{background:linear-gradient(135deg,#f2c230,#ffd95a);color:#3a2e00;border:0;min-height:54px;font-size:1.05em;font-weight:700;box-shadow:0 8px 20px rgba(242,194,48,.3)}button.dy{background:linear-gradient(135deg,#8f6a0f,#b8921f);color:#fff;border:0;min-height:54px;font-size:1.05em;font-weight:600;box-shadow:0 8px 20px rgba(143,106,15,.3)}
/* ===== Animacje ===== */
@keyframes in{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes inUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{opacity:0;transform:scale(.92)}100%{opacity:1;transform:scale(1)}}
@keyframes cardFlip{0%{opacity:0;transform:rotateY(-12deg) translateX(12px)}100%{opacity:1;transform:rotateY(0) translateX(0)}}
@keyframes softPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes swim{0%{transform:translateX(-8px) translateY(0) rotate(-4deg)}25%{transform:translateX(4px) translateY(-6px) rotate(2deg)}50%{transform:translateX(10px) translateY(0) rotate(4deg)}75%{transform:translateX(2px) translateY(5px) rotate(-2deg)}100%{transform:translateX(-8px) translateY(0) rotate(-4deg)}}
@keyframes bubble{0%{opacity:0;transform:translateY(0) scale(.6)}30%{opacity:.7}100%{opacity:0;transform:translateY(-48px) scale(1.1)}}
@keyframes loaderOut{to{opacity:0;visibility:hidden;pointer-events:none}}
@keyframes wave{0%,100%{d:path("M0 20 Q 15 10 30 20 T 60 20 T 90 20 T 120 20")}50%{d:path("M0 20 Q 15 28 30 20 T 60 20 T 90 20 T 120 20")}}
.fc{animation:cardFlip .32s cubic-bezier(.22,.9,.3,1)}
.page-in{animation:inUp .35s cubic-bezier(.22,.9,.3,1)}
.mode-in{animation:pop .3s cubic-bezier(.22,.9,.3,1)}
.hero{animation:inUp .4s cubic-bezier(.22,.9,.3,1)}
.grid>.card{animation:inUp .4s cubic-bezier(.22,.9,.3,1) both}
.grid>.card:nth-child(1){animation-delay:.04s}
.grid>.card:nth-child(2){animation-delay:.08s}
.grid>.card:nth-child(3){animation-delay:.12s}
.grid>.card:nth-child(4){animation-delay:.16s}
button.p,button.bl2,button.gr,button.ye,button.dy{transition:transform .15s,box-shadow .2s,opacity .2s}
button.p:active,button.bl2:active,button.gr:active,button.ye:active,button.dy:active{transform:scale(.96)}
#loader{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--bg);transition:opacity .45s ease,visibility .45s}
#loader.hide{animation:loaderOut .45s forwards}
#loader .fish-wrap{position:relative;width:120px;height:80px}
#loader .fish{width:88px;height:52px;animation:swim 1.6s ease-in-out infinite;filter:drop-shadow(0 8px 16px rgba(91,82,240,.35))}
#loader .bubbles{position:absolute;inset:0;pointer-events:none}
#loader .bubbles i{position:absolute;width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--ac) 55%,#fff);animation:bubble 1.4s ease-out infinite}
#loader .bubbles i:nth-child(1){left:72%;top:40%;animation-delay:0s}
#loader .bubbles i:nth-child(2){left:82%;top:55%;width:6px;height:6px;animation-delay:.35s}
#loader .bubbles i:nth-child(3){left:68%;top:60%;width:5px;height:5px;animation-delay:.7s}
#loader .brand{font-size:1.35em;font-weight:700;letter-spacing:-.02em;color:var(--tx);animation:softPulse 1.8s ease-in-out infinite}
#loader .mu{font-size:.85em}
@media(prefers-reduced-motion:reduce){
 #loader .fish,#loader .bubbles i,#loader .brand{animation:none}
 .fc,.page-in,.mode-in,.hero,.grid>.card{animation:fadeIn .2s}
}

.brand-row{display:flex;align-items:center;justify-content:center;gap:10px}
.brand-row.h1{justify-content:flex-start;gap:8px;margin:.1em 0 .15em}
.brand-row.h1 h1{margin:0}
.logo-fish{width:36px;height:22px;flex:0 0 auto;filter:drop-shadow(0 2px 6px rgba(91,82,240,.3))}
.logo-fish.lg{width:52px;height:32px}
body.landing-lock,html.landing-lock{overflow:hidden;height:100%}
#app.landing-lock{overflow:hidden;overscroll-behavior:none}
#fx{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;pointer-events:none;background:var(--bg)}
#fx.on{display:flex;pointer-events:auto}
#fx .fx-flag{font-size:5.5em;line-height:1;animation:flagIn .85s cubic-bezier(.22,1.2,.3,1) both}
#fx .fx-ring{position:absolute;width:140px;height:140px;border-radius:50%;border:3px solid color-mix(in srgb,var(--ac) 50%,transparent);animation:ringPulse .9s ease-out both}
#fx .fx-lab{position:absolute;bottom:28%;font-weight:700;font-size:1.15em;animation:fadeIn .4s .35s both}
@keyframes flagIn{0%{opacity:0;transform:scale(.2) rotate(-25deg)}55%{opacity:1;transform:scale(1.15) rotate(8deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes ringPulse{0%{opacity:0;transform:scale(.4)}40%{opacity:1}100%{opacity:0;transform:scale(1.8)}}
@media(prefers-reduced-motion:reduce){#fx .fx-flag,#fx .fx-ring{animation:none}}


/* ===== 0.6.0: suwaki w opcjach ===== */
.sb{padding:4px 0 12px}.sb+.sb{border-top:1px solid var(--ln);padding-top:14px}.sl{font-weight:600}
.seg{position:relative;display:flex;padding:4px;margin:10px 0 6px;border-radius:18px;background:color-mix(in srgb,var(--mu) 16%,var(--card));isolation:isolate}
.seg i{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:14px;background:linear-gradient(135deg,#5b52f0,#8a5cf6);box-shadow:0 6px 16px rgba(91,82,240,.38);transition:transform .38s cubic-bezier(.34,1.3,.5,1)}
.seg[data-v="1"] i{transform:translateX(100%)}
.seg button{position:relative;z-index:1;flex:1;min-height:48px;padding:6px 4px;border:0;border-radius:14px;background:none;box-shadow:none;font-weight:600;font-size:.92em;line-height:1.15;color:var(--mu);transition:color .25s}
.seg button.on{color:#fff}
.rg{-webkit-appearance:none;appearance:none;display:block;width:100%;height:10px;min-height:0;padding:0;margin:16px 0 8px;border:0;border-radius:99px;background:color-mix(in srgb,var(--mu) 24%,var(--card));box-shadow:none;touch-action:pan-y}
.rg::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#5b52f0,#8a5cf6);border:3px solid #fff;box-shadow:0 3px 10px rgba(91,82,240,.5)}
.rg::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#5b52f0,#8a5cf6);border:3px solid #fff;box-shadow:0 3px 10px rgba(91,82,240,.5)}
html[data-hw="1"] .rg::-webkit-slider-thumb{background:linear-gradient(135deg,#6a35d8,#ff7a18)}
html[data-hw="1"] .rg::-moz-range-thumb{background:linear-gradient(135deg,#6a35d8,#ff7a18)}
.rv{float:right;color:var(--ac)}.rt{display:flex;justify-content:space-between;font-size:.78em;color:var(--mu);margin:0 2px 4px}
.sh{font-size:.85em;line-height:1.4;color:var(--mu);margin:2px 2px 0}
/* ===== 0.6.0: instrukcja AI ===== */
.ai-st{display:flex;gap:12px;align-items:flex-start;margin:12px 0}
.ai-st .n{flex:0 0 28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#5b52f0,#8a5cf6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.85em}
.ai-st div{line-height:1.45;font-size:.95em}
.ai-tip{background:color-mix(in srgb,var(--ac) 10%,var(--card));border-radius:14px;padding:10px 12px;font-size:.9em;line-height:1.45;margin-top:8px}
/* ===== 0.6.0: przejścia (rybka / wisielec) ===== */
#fx2{position:fixed;inset:0;z-index:300;display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;overflow:hidden;opacity:0;background:radial-gradient(520px 320px at 50% 42%,color-mix(in srgb,var(--ac) 14%,transparent),transparent),var(--bg)}
#fx2.on{display:flex;animation:fxIn .28s ease both}
#fx2.on.out{animation:fxOut .45s ease both;pointer-events:none}
@keyframes fxIn{from{opacity:0}to{opacity:1}}
@keyframes fxOut{from{opacity:1}to{opacity:0}}
#fx2 .jl{font-weight:700;font-size:1.15em;letter-spacing:-.01em;animation:fadeIn .4s .25s both;text-align:center}
.wr-s{position:relative;width:300px;max-width:92vw;height:150px;display:flex;align-items:center;justify-content:center}
.wr-p{position:absolute;inset:14px 6px 14px;border-radius:10px;background-color:var(--bg);border:1px solid var(--ln);box-shadow:0 10px 30px rgba(0,0,0,.18);background-image:repeating-linear-gradient(transparent 0 27px,color-mix(in srgb,var(--ac) 18%,transparent) 27px 28px);animation:wrIn .45s ease both}
.wr-w{position:relative;font-family:'Segoe Script','Bradley Hand','Snell Roundhand',cursive;font-size:2.4em;font-weight:700;color:var(--ac);white-space:nowrap}
.wr-w i{font-style:normal;display:inline-block;opacity:0;transform:translateY(6px) rotate(-6deg);animation:wrL .28s ease both;animation-delay:calc(.35s + var(--i)*.09s)}
.wr-u{position:absolute;left:0;right:0;bottom:-10px;width:100%;height:14px;overflow:visible}
.wr-u path{fill:none;stroke:var(--ac);stroke-width:3;stroke-linecap:round;stroke-dasharray:320;stroke-dashoffset:320;animation:wrU .5s ease forwards;animation-delay:var(--ud)}
.wr-pen{position:absolute;left:0;top:-30px;width:34px;height:34px;font-size:26px;line-height:34px;opacity:0;animation:wrPen var(--pd) linear .35s forwards;filter:drop-shadow(0 3px 3px rgba(0,0,0,.25))}
@keyframes wrIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes wrL{to{opacity:1;transform:none}}
@keyframes wrU{to{stroke-dashoffset:0}}
@keyframes wrPen{0%{opacity:1;left:0;transform:rotate(-8deg)}92%{opacity:1;left:calc(100% - 20px);transform:rotate(6deg)}100%{opacity:0;left:calc(100% - 20px)}}
#fx2 .js{color:var(--mu);font-size:.85em;animation:fadeIn .4s .35s both}
#fx2 .jl span{animation:dots 1s infinite both}#fx2 .jl span:nth-child(2){animation-delay:.15s}#fx2 .jl span:nth-child(3){animation-delay:.3s}
@keyframes dots{0%,100%{opacity:.2}50%{opacity:1}}
.jscene{position:relative;width:320px;max-width:94vw;height:230px}
.fj-x,.fj-y{position:absolute;left:50%;top:64px;width:88px;height:52px;margin-left:-44px}
.fj-y{left:0;top:0;margin:0}
.fj-x{animation:jx .85s linear .15s both}
.fj-y{animation:jy .85s linear .15s both}
.fj-r{display:block;width:88px;height:52px;animation:jr .85s ease-in-out .15s both;filter:drop-shadow(0 8px 14px rgba(91,82,240,.35))}
@keyframes jx{from{transform:translateX(100px)}to{transform:translateX(-100px)}}
@keyframes jy{0%{transform:translateY(96px);animation-timing-function:cubic-bezier(.2,.7,.4,1)}50%{transform:translateY(-40px);animation-timing-function:cubic-bezier(.6,0,.8,.3)}100%{transform:translateY(96px)}}
@keyframes jr{0%{transform:rotate(50deg)}50%{transform:rotate(0)}100%{transform:rotate(-50deg)}}
.sea{position:absolute;left:0;right:0;top:132px;height:98px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.sea .wv{position:absolute;left:0;top:0;width:640px;height:40px;animation:wvs 2.4s linear infinite}
.sea .w2{top:7px;opacity:.7;animation-duration:3.4s;animation-direction:reverse}
.sea .bd{position:absolute;left:0;right:0;top:30px;bottom:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--ac) 24%,transparent),transparent)}
@keyframes wvs{from{transform:translateX(0)}to{transform:translateX(-160px)}}
.spl{position:absolute;top:150px;width:0;height:0}
.spl .dp{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--ac) 55%,#fff);opacity:0;animation:drop .65s ease-out both}
.spl .rip{position:absolute;left:0;top:0;width:76px;height:18px;margin:-9px 0 0 -38px;border-radius:50%;border:2px solid color-mix(in srgb,var(--ac) 60%,#fff);opacity:0;animation:rip .85s ease-out both}
@keyframes drop{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:1}60%{opacity:1;transform:translate(var(--dx),var(--dy)) scale(1)}100%{opacity:0;transform:translate(calc(var(--dx)*1.3),calc(var(--dy)*.15 + 14px)) scale(.6)}}
@keyframes rip{0%{opacity:.9;transform:scale(.2)}100%{opacity:0;transform:scale(1.7)}}
.hw{display:flex;gap:5px;position:relative;z-index:1}
.hs{position:relative;display:block;width:1.05em;height:1.5em;font:700 1.9em/1.5 ui-serif,"New York",Georgia,serif;text-align:center;border-bottom:4px solid var(--ln);animation:fadeIn .3s both,hpulse .4s ease calc(1.05s + var(--i)*.035s) both}
.hs.m{border-bottom-color:var(--ac)}
.hl{display:block;opacity:0;animation:ldrop .45s cubic-bezier(.3,.7,.4,1) var(--d) both}
.hs.m .hl{color:var(--ac)}
@keyframes ldrop{0%{opacity:0;transform:translateY(-180px) rotate(var(--r))}55%{opacity:1;transform:translateY(6px) rotate(calc(var(--r)*-.25))}75%{opacity:1;transform:translateY(-7px) rotate(0)}100%{opacity:1;transform:none}}
@keyframes hpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.hb{position:absolute;bottom:-12%;font:700 var(--s)/1 ui-serif,Georgia,serif;color:var(--ac);opacity:0;animation:hfloat var(--t) ease-out var(--d) both}
@keyframes hfloat{0%{opacity:0;transform:translateY(0) rotate(var(--r))}25%{opacity:.16}100%{opacity:0;transform:translateY(-75vh) rotate(var(--r))}}

/* ===== 0.6.0: Postępy ===== */
.pg-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}.pg-top h1{margin:0;flex:1}
.pg-lang{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;background:color-mix(in srgb,var(--ac) 14%,var(--card));font-weight:600;font-size:.85em}
.pg-sub{color:var(--mu);font-size:.82em;line-height:1.4;margin-bottom:10px}
.pg-hero{display:flex;gap:16px;align-items:center}
.pg-ringw{position:relative;flex:0 0 112px;height:112px}.pg-ring{width:112px;height:112px}
.pg-ring circle{fill:none;stroke-width:11;stroke-linecap:round}.pg-ring .rt{stroke:rgba(255,255,255,.22)}
.pg-ring .rf{stroke:#fff;transform:rotate(-90deg);transform-origin:60px 60px;transition:stroke-dashoffset 1.1s cubic-bezier(.22,.9,.3,1)}
.pg-rc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pg-rc b{font-size:1.5em;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.pg-rc span.l{font-size:.62em;letter-spacing:.1em;opacity:.8;margin-top:3px}
.pg-lv{flex:1;min-width:0}.pg-lv .e{font-size:2em;line-height:1}.pg-lv .n{font-weight:700;font-size:1.1em;margin-top:2px}
.pg-bar{height:10px;border-radius:6px;background:var(--ln);overflow:hidden}
.pg-bar i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#5b52f0,#9b6cf7);transition:width 1s cubic-bezier(.22,.9,.3,1)}
.pg-bar i.ok{background:linear-gradient(90deg,#2a8f61,#45b487)}
.hero .pg-bar{background:rgba(255,255,255,.25)}.hero .pg-bar i{background:#fff}
.pg-h{display:flex;align-items:center;justify-content:space-between;gap:8px}.pg-h b{font-size:1.02em}
.pg-chips{display:flex;gap:6px;margin-top:10px}
.pg-chip{flex:1;min-height:38px;padding:4px 8px;border-radius:12px;font-size:.85em;box-shadow:none;border:0;background:color-mix(in srgb,var(--mu) 14%,var(--card))}
.pg-chip.on{background:linear-gradient(135deg,#5b52f0,#8a5cf6);color:#fff;font-weight:600}
.pg-chips.sm{margin:0}.pg-chips.sm .pg-chip{flex:0 0 auto;min-height:32px;padding:2px 12px}
.pg-msg{font-size:.9em;margin-top:8px;line-height:1.4}.pg-delta.up{color:var(--ok)}.pg-delta.dn{color:var(--mu)}
.pg-fl{font-size:2.3em;line-height:1}.pg-fl.on{animation:softPulse 1.8s ease-in-out infinite}
.pg-wk{display:flex;justify-content:space-between;margin-top:14px}
.pg-d{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:.7em;color:var(--mu)}
.pg-d i{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;color:#fff;font-weight:700;background:color-mix(in srgb,var(--mu) 14%,var(--card))}
.pg-d.on i{background:linear-gradient(135deg,#ff9a3c,#ff5e3a);box-shadow:0 4px 12px rgba(255,94,58,.4)}
.pg-d.tod i{outline:2px solid var(--ac);outline-offset:2px}.pg-d.tod span{color:var(--tx);font-weight:700}
.pg-ch{position:relative;display:flex;align-items:flex-end;gap:3px;height:120px;margin-top:16px;border-bottom:1px solid var(--ln)}
.pg-ch .c{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.pg-ch .c i{display:block;width:100%;max-width:26px;height:0;border-radius:6px 6px 2px 2px;background:color-mix(in srgb,var(--ac) 45%,var(--card));transition:height .8s cubic-bezier(.22,.9,.3,1)}
.pg-ch .c.t i{background:linear-gradient(180deg,#8a5cf6,#5b52f0)}.pg-ch .c.z i{opacity:.35}
.pg-ch .c b{font-size:.62em;color:var(--mu);margin-bottom:2px}
.pg-gl{position:absolute;left:0;right:0;border-top:1.5px dashed color-mix(in srgb,var(--ok) 70%,transparent);pointer-events:none}.pg-gl span{position:absolute;right:0;top:-15px;font-size:.62em;color:var(--ok)}
.pg-xl{display:flex;gap:3px;margin-top:5px}.pg-xl span{flex:1;text-align:center;font-size:.62em;color:var(--mu)}
.pg-stack{display:flex;height:14px;border-radius:8px;overflow:hidden;background:var(--ln);margin-top:12px}
.pg-stack i{display:block;height:100%;width:0;transition:width 1s cubic-bezier(.22,.9,.3,1)}
.pg-lg{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:.82em;color:var(--mu)}.pg-lg b{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px}
.pg-cat{margin:12px 0 0}.pg-cat .h{display:flex;justify-content:space-between;font-size:.9em;margin-bottom:5px}
.pg-bg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.pg-b{text-align:center;padding:10px 3px;border-radius:16px;background:color-mix(in srgb,var(--mu) 10%,var(--card));font-size:.68em;line-height:1.25;color:var(--mu)}
.pg-b .e{display:block;font-size:2.1em;margin-bottom:4px;filter:grayscale(1);opacity:.45}
.pg-b.on{background:color-mix(in srgb,var(--ac) 14%,var(--card));color:var(--tx);font-weight:600}.pg-b.on .e{filter:none;opacity:1;animation:pop .5s both}
.pg-b .pb{height:4px;border-radius:2px;background:var(--ln);margin:6px 6px 0;overflow:hidden}.pg-b .pb i{display:block;height:100%;background:var(--ac)}
.pg-empty{text-align:center;line-height:1.45}

/* ===== 0.6.0: Fiszki, strona główna, Halloween ===== */
.logo-fish,#loader .fish,.fj-r{overflow:visible}
.hw-hat{display:none}html[data-hw="1"] .hw-hat{display:block}
.cchips{display:flex;gap:8px;overflow-x:auto;margin:10px -18px 6px;padding:2px 18px 6px;position:relative;scrollbar-width:none;-webkit-overflow-scrolling:touch}.cchips::-webkit-scrollbar{display:none}
.cchip{flex:none;min-height:38px;padding:4px 14px;border-radius:999px;font-size:.88em;white-space:nowrap;box-shadow:none;border:1px solid var(--ln);background:var(--card)}
.cchip b{opacity:.6;font-weight:600;margin-left:3px}.cchip.on{background:linear-gradient(135deg,#5b52f0,#8a5cf6);color:#fff;border:0;font-weight:600}
.imp-b{display:flex;align-items:center;gap:12px;padding:14px 16px}.ib-i{font-size:1.8em;line-height:1}
.ib-btn{flex:0 0 auto;min-height:40px;padding:4px 14px;border-radius:12px;border:0;box-shadow:none;background:color-mix(in srgb,var(--ac) 14%,var(--card));color:var(--ac);font-weight:700}
.fi{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--ln)}.fi:last-child{border-bottom:0}
.fi .t{flex:1;min-width:0;cursor:pointer}.fi .t b{display:block;overflow-wrap:anywhere}.fi .t>span{color:var(--mu);font-size:.92em;overflow-wrap:anywhere}
.fi .m{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.fi>button{flex:0 0 auto;min-height:40px;padding:4px 10px;border:0;background:none;box-shadow:none;font-size:1.25em}
.tag{display:inline-block;font-size:.68em;font-weight:600;padding:2px 9px;border-radius:999px;background:color-mix(in srgb,var(--ac) 14%,var(--card));color:var(--ac)}
.tag.ok{background:color-mix(in srgb,var(--ok) 16%,var(--card));color:var(--ok)}.tag.bd{background:color-mix(in srgb,var(--bad) 16%,var(--card));color:var(--bad)}.tag.mu2{background:color-mix(in srgb,var(--mu) 14%,var(--card));color:var(--mu)}
.lang-pill{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:6px 14px 6px 10px;border-radius:999px;font-size:.82em;font-weight:600;background:color-mix(in srgb,var(--ac) 12%,var(--card));border:1px solid color-mix(in srgb,var(--ac) 28%,var(--ln));box-shadow:none}
.lang-pill .fl{font-size:1.5em;line-height:1}
.inst-b{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 18px;border-radius:999px;font-size:.88em;font-weight:600;background:color-mix(in srgb,var(--ac) 12%,var(--card));border:1px solid color-mix(in srgb,var(--ac) 28%,var(--ln));box-shadow:none}
.hero.sm{padding:16px 18px;cursor:pointer}.hero.sm:active{transform:scale(.99)}
.hero.sm .pg-ringw{flex:0 0 88px;height:88px}.hero.sm .pg-ring{width:88px;height:88px}.hero.sm .pg-rc b{font-size:1.2em}.hero.sm .pg-lv .n{margin-top:0;font-size:1.05em}
.hero.sm .pg-hero{gap:14px}
.hwo{display:none!important}html[data-hw="1"] .hwo{display:block!important}
#hwdec{display:none}html[data-hw="1"] #hwdec{display:block}
#hwdec .web{position:fixed;left:0;top:0;width:96px;height:96px;color:var(--mu);opacity:.4;z-index:4;pointer-events:none}
.hw-bat{position:fixed;left:-12vw;top:64px;font-size:1.5em;z-index:4;pointer-events:none;animation:batfly 22s linear infinite}
.hw-bat.b2{top:118px;font-size:1.05em;animation-duration:28s;animation-delay:9s}
@keyframes batfly{0%{transform:translate(0,0) rotate(-8deg)}8%{transform:translate(14vw,-14px) rotate(6deg) scaleY(.7)}16%{transform:translate(28vw,10px) rotate(-6deg)}24%{transform:translate(44vw,-12px) rotate(8deg) scaleY(.7)}32%{transform:translate(60vw,12px) rotate(-6deg)}40%,100%{transform:translate(128vw,-6px) rotate(4deg)}}
:root .hw-bat,:root .hw-sp span{filter:none}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .hw-bat,:root:not([data-theme=light]) .hw-sp span{filter:brightness(0) invert(.78)}}
:root[data-theme=dark] .hw-bat,:root[data-theme=dark] .hw-sp span{filter:brightness(0) invert(.78)}
.hw-sp{display:none;position:absolute;top:-12px;right:9%;width:2px;transform-origin:top center;animation:spsw 3.4s ease-in-out infinite;pointer-events:none}
html[data-hw="1"] .hw-sp{display:block}
.hw-sp i{display:block;width:1.5px;height:58px;background:var(--mu);opacity:.55;margin:0 auto}.hw-sp span{display:block;font-size:1.5em;line-height:1;margin:-4px 0 0 -11px}
@keyframes spsw{0%,100%{transform:rotate(7deg)}50%{transform:rotate(-7deg)}}
.hw-rb{display:inline-block;margin:0 0 16px;padding:6px 16px;border-radius:999px;font-weight:700;font-size:.85em;color:#fff;background:linear-gradient(135deg,#6a35d8,#ff7a18);box-shadow:0 6px 16px rgba(255,122,24,.3)}
html[data-hw="1"]{--ac:#d9640a}
@media(prefers-color-scheme:dark){html[data-hw="1"]:not([data-theme=light]){--ac:#ff9a45}}
html[data-hw="1"][data-theme=dark]{--ac:#ff9a45}
html[data-hw="1"] body{background:radial-gradient(700px 380px at 100% -8%,color-mix(in srgb,#ff7a18 16%,transparent),transparent),radial-gradient(620px 420px at -10% 108%,color-mix(in srgb,#7a3df0 20%,transparent),transparent),var(--bg)}
html[data-hw="1"] button.p{background:linear-gradient(135deg,#6a35d8,#ff7a18);box-shadow:0 8px 20px rgba(255,122,24,.3)}
html[data-hw="1"] button.bl2{background:linear-gradient(135deg,#6a35d8,#9a5bff);box-shadow:0 8px 20px rgba(106,53,216,.32)}
html[data-hw="1"] button.gr{background:linear-gradient(135deg,#3a9d3f,#7cc83a);box-shadow:0 8px 20px rgba(80,170,50,.3)}
html[data-hw="1"] button.ye{background:linear-gradient(135deg,#ff7a18,#ffa940);color:#2b1200;box-shadow:0 8px 20px rgba(255,122,24,.32)}
html[data-hw="1"] button.dy{background:linear-gradient(135deg,#2b1650,#4a2a85);box-shadow:0 8px 20px rgba(43,22,80,.35)}
html[data-hw="1"] .hero{background:linear-gradient(135deg,#3f1a85,#ff7a18);box-shadow:0 14px 30px rgba(255,122,24,.3);position:relative;overflow:hidden}
html[data-hw="1"] .hero::after{content:'🕸️';position:absolute;right:8px;top:2px;font-size:2.2em;opacity:.35;pointer-events:none}
html[data-hw="1"] .seg i,html[data-hw="1"] .pg-chip.on,html[data-hw="1"] .cchip.on,html[data-hw="1"] .ai-st .n,html[data-hw="1"] .pg-ch .c.t i{background:linear-gradient(135deg,#6a35d8,#ff7a18)}
html[data-hw="1"] .bar i,html[data-hw="1"] .pg-bar i{background:linear-gradient(90deg,#6a35d8,#ff7a18)}
html[data-hw="1"] .pg-bar i.ok{background:linear-gradient(90deg,#2a8f61,#45b487)}
html[data-hw="1"] .hero .pg-bar i{background:#fff}
html[data-hw="1"] .hb{color:#ff9a45}
html[data-hw="1"] .tabs{border-top-color:color-mix(in srgb,#ff7a18 35%,var(--ln))}
@media(prefers-reduced-motion:reduce){.hw-bat,.hw-sp{animation:none}.hw-bat{display:none}}

/* ===== 0.6.0 ===== */
.r1{--c:#e08a1e}.r3{--c:#2a8fd0}
.g4{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.g4 button{min-height:64px;line-height:1.2;padding:8px 6px}
.nb{margin-top:2px;font-size:.66em;font-weight:800;letter-spacing:.08em;color:#fff;background:linear-gradient(135deg,#ff7a18,#e6397a);padding:3px 9px;border-radius:999px;box-shadow:0 4px 10px rgba(230,57,122,.28)}
.sb2{margin-top:2px;font-size:.7em;font-weight:600;color:#c99a00;background:color-mix(in srgb,#f2c94c 28%,transparent);padding:3px 8px;border-radius:999px}
.vh{display:flex;align-items:center;gap:14px;text-align:left;padding:14px 16px;font-weight:400}.vh .e{font-size:1.9em;line-height:1}.vh b{font-weight:700}.vh small{display:block;color:var(--mu);margin-top:3px;line-height:1.35;font-size:.82em}
.vt{width:100%;border-collapse:collapse;margin:12px 0;text-align:left}.vt td{padding:9px 8px;border-bottom:1px solid var(--ln)}.vt td:first-child{color:var(--mu);width:40%}.vt tr:last-child td{border-bottom:0}.vt tr.hl td{background:color-mix(in srgb,var(--ac) 14%,transparent);font-weight:700;color:var(--tx)}
.vq{font-size:1.5em;font-weight:700;margin:12px 0 6px}.vtag{display:inline-block;margin:2px 4px 0 0}
.vnote{font-size:.88em;line-height:1.45;color:var(--mu);text-align:left;margin-top:4px}

.qa{position:absolute;top:6px;right:0;z-index:3;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;border:0;background:linear-gradient(135deg,#5b52f0,#ff8a2b);color:#fff;font-weight:800;font-size:1.25em;box-shadow:0 6px 18px rgba(91,82,240,.45);animation:qaP 2.6s ease-in-out infinite}
@keyframes qaP{0%,100%{box-shadow:0 6px 18px rgba(91,82,240,.45),0 0 0 0 rgba(255,138,43,.45)}50%{box-shadow:0 6px 18px rgba(91,82,240,.45),0 0 0 10px rgba(255,138,43,0)}}
.ag-sheet{width:100%;max-width:520px;max-height:90vh;max-height:90dvh;overflow-y:auto;overscroll-behavior:contain;background:var(--bg,var(--card));border-radius:26px;box-shadow:0 20px 60px rgba(0,0,0,.45);animation:agUp .35s cubic-bezier(.2,.9,.3,1.1)}
@keyframes agUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.ag-hero{position:relative;padding:22px 18px 14px;background:linear-gradient(135deg,#2b1f7a,#5b52f0 55%,#ff8a2b);color:#fff;border-radius:26px 26px 0 0}
.ag-hero h2{margin:0 0 6px;font-size:1.35em;line-height:1.2;color:#fff}.ag-hero p{margin:0;font-size:.92em;line-height:1.45;opacity:.95}
.ag-x{position:absolute;top:10px;right:10px;width:38px;min-height:38px;padding:0;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;border:0}
.ag-chart{margin:14px 0 0;background:rgba(0,0,0,.22);border-radius:16px;padding:8px 8px 4px}
.ag-chart svg{display:block;width:100%;height:auto}
.ag-a{stroke-dasharray:420;stroke-dashoffset:420;animation:agD 2.4s .3s ease forwards}.ag-b{stroke-dasharray:420;stroke-dashoffset:420;animation:agD 2.4s 1s ease forwards}
@keyframes agD{to{stroke-dashoffset:0}}
.ag-lg{display:flex;gap:14px;font-size:.72em;margin-top:2px;padding:0 4px 4px;opacity:.95}.ag-lg i{display:inline-block;width:14px;height:3px;border-radius:2px;vertical-align:middle;margin-right:5px}
.ag-body{padding:16px 16px 20px}
.ag-chips{display:flex;gap:8px;margin-bottom:12px}.ag-chips div{flex:1;text-align:center;border-radius:14px;padding:10px 4px;background:color-mix(in srgb,var(--ac) 12%,var(--card));border:1px solid var(--ln)}.ag-chips b{display:block;font-size:1.25em}.ag-chips span{font-size:.68em;opacity:.8}
.ag-f{display:flex;gap:12px;align-items:flex-start;margin:0 0 12px}.ag-f .e{flex:0 0 42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.35em;background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 25%,var(--card)),color-mix(in srgb,#ff8a2b 25%,var(--card)))}
.ag-f b{display:block;margin-bottom:2px}.ag-f span{font-size:.88em;line-height:1.4;opacity:.85}
.ag-pr{border-radius:16px;padding:12px 14px;margin:6px 0 14px;background:color-mix(in srgb,var(--ok) 11%,var(--card));border:1px solid color-mix(in srgb,var(--ok) 30%,var(--ln));font-size:.86em;line-height:1.5}.ag-pr b{display:block;margin-bottom:4px;font-size:1.02em}.ag-pr ul{margin:4px 0 0;padding-left:18px}.ag-pr li{margin:3px 0}
.ag-fine{font-size:.72em;opacity:.65;line-height:1.4;margin:10px 2px 0;text-align:center}
@media (prefers-reduced-motion:reduce){.qa{animation:none}.ag-a,.ag-b{animation:none;stroke-dashoffset:0}.ag-sheet{animation:none}}

.upd{position:fixed;left:12px;right:12px;bottom:84px;z-index:70;display:flex;gap:8px;align-items:center;padding:10px 12px;border-radius:16px;background:linear-gradient(135deg,#2b1f7a,#5b52f0);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.4);animation:agUp .35s ease}
.upd span{flex:1;font-size:.9em;font-weight:600}.upd button{flex:0 0 auto;min-height:40px;padding:6px 14px}.upd button:not(.p){background:rgba(255,255,255,.18);color:#fff;border:0;padding:6px 12px}
.fc7{display:flex;gap:6px;align-items:flex-end;height:104px;margin-top:12px}.fc7>div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;height:100%}.fc7 i{display:block;width:100%;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,#8a5cf6,#5b52f0)}.fc7 b{font-size:.78em}.fc7 span{font-size:.68em;opacity:.7}

/* ===== 0.6.3b: spokojny, premium system wizualny (tylko warstwa prezentacji) ===== */
:root{--bg:#f7f7f8;--card:#fff;--sf:#f0f1f4;--tx:#16181d;--mu:#697080;--ac:#4a55c4;--on:#fff;--ln:#e3e5ea;--ok:#2b8a5e;--bad:#c4473f;--warn:#a8710f;--r:14px}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0c0d10;--card:#14161b;--sf:#1b1e25;--tx:#e9eaee;--mu:#8e94a4;--ac:#8b95f5;--on:#0b0c14;--ln:#252831;--ok:#4cb787;--bad:#e5766d;--warn:#d9a441}}
:root[data-theme=dark]{--bg:#0c0d10;--card:#14161b;--sf:#1b1e25;--tx:#e9eaee;--mu:#8e94a4;--ac:#8b95f5;--on:#0b0c14;--ln:#252831;--ok:#4cb787;--bad:#e5766d;--warn:#d9a441}
html,body{-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
body{background:var(--bg)}
#app{max-width:560px;padding:22px 18px 112px}
h1{font-size:1.65em;font-weight:650;letter-spacing:-.025em;margin:.1em 0 .55em}
h2{font-size:.72em;font-weight:600;letter-spacing:.09em;margin:1.7em 0 .55em}
.card{border:1px solid var(--ln);border-radius:var(--r);box-shadow:none;padding:18px;margin:10px 0}
.big{font-weight:650;letter-spacing:-.02em}
button{border-radius:12px;border:1px solid var(--ln);background:var(--card);box-shadow:none;font-weight:500;transition:background .15s,border-color .15s,transform .1s,opacity .15s}
@media(hover:hover){button:hover{background:var(--sf)}button.p:hover{background:var(--ac);filter:brightness(1.07)}}
button:active{transform:scale(.985)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
button:disabled{opacity:.55;cursor:default}
button.p{background:var(--ac);color:var(--on);border:0;min-height:52px;font-size:1rem;font-weight:600;box-shadow:none}
button.bl2,button.gr,button.ye,button.dy{background:var(--card);color:var(--tx);border:1px solid var(--ln);box-shadow:none;min-height:52px;font-size:1rem;font-weight:500}
@media(hover:hover){button.bl2:hover,button.gr:hover,button.ye:hover,button.dy:hover{background:var(--sf)}}
button.bad,.w.bad{color:var(--bad)}
.duo>button{min-height:46px;font-size:.9em;color:var(--tx)}
input,select,textarea{border:1px solid var(--ln);border-radius:12px;background:var(--card)}
input:focus,select:focus,textarea:focus{border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 20%,transparent)}
.bar,.pg-bar{height:6px;border-radius:4px;background:var(--ln)}.bar i,.pg-bar i{background:var(--ac);border-radius:4px}.pg-bar i.ok{background:var(--ok)}
.hero{background:var(--card);color:var(--tx);border:1px solid var(--ln);box-shadow:none}
.hero .mu{color:var(--mu)}.hero .bar,.hero .pg-bar{background:var(--ln)}.hero .bar i,.hero .pg-bar i{background:var(--ac)}
.pg-ring .rt{stroke:var(--ln)}.pg-ring .rf{stroke:var(--ac)}
.pg-lv .e{font-size:1.7em}
.pg-chip{background:var(--sf)}.pg-chip.on,.cchip.on,.ai-st .n{background:var(--ac);color:var(--on);border:0}
.cchip{background:var(--card)}
.pg-lang,.lang-pill,.inst-b{background:var(--sf);border:1px solid var(--ln);box-shadow:none}
.pg-d.on i{background:var(--ac);color:var(--on);box-shadow:none}.pg-d.tod i{outline-color:var(--ac)}
.pg-ch .c i{background:color-mix(in srgb,var(--ac) 38%,var(--card))}.pg-ch .c.t i{background:var(--ac)}
.pg-b{background:var(--sf)}.pg-b.on{background:color-mix(in srgb,var(--ac) 12%,var(--card))}
.seg{background:var(--sf);border:1px solid var(--ln)}.seg i{background:var(--ac);box-shadow:none}.seg button{color:var(--mu)}.seg button.on{color:var(--on)}
.rg{background:var(--sf);border:1px solid var(--ln)}
.rg::-webkit-slider-thumb{background:var(--ac);border:3px solid var(--card);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.rg::-moz-range-thumb{background:var(--ac);border:3px solid var(--card);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.tag{background:var(--sf);color:var(--mu)}.tag.ok{background:color-mix(in srgb,var(--ok) 14%,var(--card));color:var(--ok)}.tag.bd{background:color-mix(in srgb,var(--bad) 14%,var(--card));color:var(--bad)}
.nb{background:var(--ac);color:var(--on);box-shadow:none}.sb2{background:var(--sf);color:var(--mu)}
/* fiszka — absolutny bohater ekranu */
.fc{min-height:300px;border-radius:20px;padding:34px 22px;gap:14px;animation:fcIn .22s ease both}
@keyframes fcIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fr{font-size:2.2em;font-weight:600;letter-spacing:-.02em}
.fc>button{background:var(--sf);color:var(--mu);border:0}
.ex{border-top:1px solid var(--ln);font-style:normal;color:var(--mu)}.ex .mu{opacity:.85}
.r0,.r1,.r2,.r3{background:var(--card);border:1px solid var(--ln);color:var(--tx);min-height:60px;font-weight:600;box-shadow:inset 0 -3px 0 var(--c)}
.r0{--c:var(--bad)}.r1{--c:var(--warn)}.r2{--c:var(--ok)}.r3{--c:var(--ac)}
@media(hover:hover){.r0:hover,.r1:hover,.r2:hover,.r3:hover{background:var(--sf)}}
.ok{color:var(--ok);font-weight:600}.bad{color:var(--bad)}
/* nawigacja */
.tabs{width:min(100%,560px);left:0;right:0;margin:0 auto;background:color-mix(in srgb,var(--bg) 90%,transparent);border-top:1px solid var(--ln);padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))}
.tabs button{min-height:54px;gap:3px;font-size:.68em;font-weight:500;letter-spacing:.01em;border-radius:12px}
.tabs button span{display:block;height:24px;font-size:1em;line-height:0}
.tabs svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tabs button.on{color:var(--ac);font-weight:600}
@media(hover:hover){.tabs button:hover{background:none;color:var(--tx)}.tabs button.on:hover{color:var(--ac)}}
/* okna i nakładki */
.qa{background:var(--card);color:var(--ac);border:1px solid var(--ln);box-shadow:none;animation:none}
.sth{gap:10px}.sth>button{flex:0 0 auto;min-height:44px;padding:6px 14px;white-space:nowrap}.sth>span{flex:1 1 auto;text-align:center;font-size:.85em;line-height:1.25}
.upd{background:var(--card);color:var(--tx);border:1px solid var(--ln);box-shadow:0 10px 30px rgba(0,0,0,.22)}.upd button:not(.p){background:var(--sf);color:var(--tx)}
.ag-hero{background:#171a2e;color:#fff}.ag-hero h2{text-transform:none;letter-spacing:-.01em}
.ag-chips div,.ag-pr{box-shadow:none}
#fx2{background:var(--bg)}#fx{background:var(--bg)}
.fj-r,.logo-fish,#loader .fish{filter:none}
.wr-p{box-shadow:none}
button[onclick^="pickLang"]{box-shadow:none!important;border-radius:16px!important}
/* animacje: krótkie i funkcjonalne */
.hero,.page-in{animation:fadeIn .25s ease both}.mode-in{animation:pop .22s ease both}
.grid>.card{animation:none}
@media(min-width:900px){#app{max-width:600px;padding-top:44px}}
@media(prefers-reduced-motion:reduce){.fc{animation:none}}

/* ===== 0.6.3b: warstwa „premium” (nowoczesny, głębia, szkło, subtelny gradient) ===== */
:root{--ac:#5b4bf0;--ac2:#7d6bff;--bg:#f4f4fa;--card:#fff;--sf:#eeeef7;--ln:rgba(30,30,80,.09);--glass:rgba(255,255,255,.72);--sh1:0 1px 2px rgba(30,30,80,.06),0 12px 32px rgba(40,40,110,.09);--glow:0 10px 28px rgba(91,75,240,.35);--r:20px}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--ac:#8e80ff;--ac2:#6f8dff;--bg:#07080d;--card:#10121a;--sf:#171a24;--ln:rgba(255,255,255,.08);--glass:rgba(18,20,30,.72);--sh1:0 1px 0 rgba(255,255,255,.04) inset,0 14px 36px rgba(0,0,0,.4);--glow:0 10px 30px rgba(120,104,255,.38)}}
:root[data-theme=dark]{--ac:#8e80ff;--ac2:#6f8dff;--bg:#07080d;--card:#10121a;--sf:#171a24;--ln:rgba(255,255,255,.08);--glass:rgba(18,20,30,.72);--sh1:0 1px 0 rgba(255,255,255,.04) inset,0 14px 36px rgba(0,0,0,.4);--glow:0 10px 30px rgba(120,104,255,.38)}
html,body{min-height:100vh;min-height:100dvh}
body{background:var(--bg);position:relative}
body::before{content:"";position:fixed;inset:-10% -10% auto -10%;height:70vh;z-index:-1;pointer-events:none;background:radial-gradient(520px 320px at 85% 8%,color-mix(in srgb,var(--ac) 22%,transparent),transparent 70%),radial-gradient(460px 300px at 5% 30%,color-mix(in srgb,var(--ac2) 14%,transparent),transparent 70%)}
#app{padding:calc(22px + env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right)) 128px max(18px,env(safe-area-inset-left))}
h1{font-size:1.85em;font-weight:700;letter-spacing:-.035em}
.card{background:linear-gradient(180deg,color-mix(in srgb,var(--card) 100%,#fff 3%),var(--card));border:1px solid var(--ln);border-radius:var(--r);box-shadow:var(--sh1);padding:20px}
.big{font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
button{transition:transform .22s cubic-bezier(.2,.9,.3,1.25),background .2s,border-color .2s,box-shadow .25s,filter .2s}
button:active{transform:scale(.97)}
button.p{background:linear-gradient(135deg,var(--ac2),var(--ac));color:#fff;border:0;box-shadow:var(--glow),inset 0 1px 0 rgba(255,255,255,.25);min-height:56px;font-size:1.04rem;letter-spacing:-.01em}
@media(hover:hover){button.p:hover{background:linear-gradient(135deg,var(--ac2),var(--ac));filter:brightness(1.08);transform:translateY(-1px)}button.bl2:hover,button.gr:hover,button.ye:hover,button.dy:hover{border-color:color-mix(in srgb,var(--ac) 45%,var(--ln));background:var(--card);transform:translateY(-1px)}}
button.bl2,button.gr,button.ye,button.dy{background:linear-gradient(180deg,color-mix(in srgb,var(--card) 100%,#fff 4%),var(--card));border:1px solid var(--ln);box-shadow:var(--sh1);min-height:56px;font-weight:600}
input,select,textarea{background:color-mix(in srgb,var(--card) 80%,transparent);font-size:max(16px,1em)}
.bar,.pg-bar{height:8px;border-radius:99px;background:color-mix(in srgb,var(--mu) 16%,transparent)}
.bar i,.pg-bar i{background:linear-gradient(90deg,var(--ac2),var(--ac));border-radius:99px;box-shadow:0 0 12px color-mix(in srgb,var(--ac) 55%,transparent)}
.pg-bar i.ok{background:linear-gradient(90deg,#34c28a,#2b8a5e);box-shadow:0 0 12px rgba(52,194,138,.4)}
.hero{background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 20%,var(--card)),color-mix(in srgb,var(--ac2) 8%,var(--card)) 60%,var(--card));border:1px solid color-mix(in srgb,var(--ac) 28%,var(--ln));box-shadow:var(--sh1),0 0 0 1px color-mix(in srgb,var(--ac) 6%,transparent)}
.pg-ring .rt{stroke:color-mix(in srgb,var(--mu) 22%,transparent)}.pg-ring .rf{stroke:var(--ac);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--ac) 70%,transparent))}
.pg-chip.on,.cchip.on,.ai-st .n{background:linear-gradient(135deg,var(--ac2),var(--ac));color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--ac) 35%,transparent)}
.seg i{background:linear-gradient(135deg,var(--ac2),var(--ac));box-shadow:0 6px 16px color-mix(in srgb,var(--ac) 40%,transparent)}.seg button.on{color:#fff}
.rg::-webkit-slider-thumb{background:linear-gradient(135deg,var(--ac2),var(--ac));border:3px solid #fff;box-shadow:0 4px 14px color-mix(in srgb,var(--ac) 50%,transparent)}
.rg::-moz-range-thumb{background:linear-gradient(135deg,var(--ac2),var(--ac));border:3px solid #fff}
.nb{background:linear-gradient(135deg,var(--ac2),var(--ac));color:#fff}
.pg-d.on i{background:linear-gradient(135deg,var(--ac2),var(--ac));color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--ac) 40%,transparent)}
.pg-ch .c.t i{background:linear-gradient(180deg,var(--ac2),var(--ac))}
/* fiszka */
.fc{border-radius:28px;min-height:320px;padding:38px 24px;background:radial-gradient(420px 220px at 50% -10%,color-mix(in srgb,var(--ac) 14%,transparent),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--card) 100%,#fff 4%),var(--card));box-shadow:var(--sh1),0 24px 60px -28px color-mix(in srgb,var(--ac) 40%,transparent);animation:fcIn .32s cubic-bezier(.2,.9,.3,1) both}
@keyframes fcIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.fr{font-size:2.5em;font-weight:650;letter-spacing:-.03em}
.fc>button{background:color-mix(in srgb,var(--ac) 12%,transparent);color:var(--ac);border:1px solid color-mix(in srgb,var(--ac) 24%,transparent)}
.r0,.r1,.r2,.r3{min-height:62px;font-weight:650;color:var(--tx);background:linear-gradient(180deg,color-mix(in srgb,var(--c) 18%,var(--card)),color-mix(in srgb,var(--c) 8%,var(--card)));border:1px solid color-mix(in srgb,var(--c) 38%,transparent);box-shadow:0 8px 20px -10px color-mix(in srgb,var(--c) 55%,transparent)}
@media(hover:hover){.r0:hover,.r1:hover,.r2:hover,.r3:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 24%,var(--card)),color-mix(in srgb,var(--c) 12%,var(--card)));transform:translateY(-1px)}}
/* pływająca nawigacja ze szkła */
.tabs{left:50%;right:auto;bottom:calc(10px + env(safe-area-inset-bottom,0px));width:min(calc(100% - 24px),520px);transform:translateX(-50%);margin:0;padding:6px;border:1px solid var(--ln);border-radius:26px;background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);box-shadow:0 18px 44px rgba(0,0,0,.28)}
.tabs button{border-radius:20px;min-height:52px}
.tabs button.on{color:var(--ac);background:color-mix(in srgb,var(--ac) 14%,transparent)}
@media(hover:hover){.tabs button:hover{background:color-mix(in srgb,var(--ac) 8%,transparent)}.tabs button.on:hover{background:color-mix(in srgb,var(--ac) 16%,transparent)}}
html.kb-open .tabs{display:none}
.upd{background:var(--glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);bottom:92px}
.qa{background:var(--glass);backdrop-filter:blur(12px)}
/* dzisiejszy panel w Postępach */
.tdy-g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:left}.tdy-g .big{font-size:1.6em;line-height:1.1}.tdy-g .mu{margin-top:2px}
/* landing: kafelki + arkusz listy */
.lp2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lp-t{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:190px;padding:20px 12px;border-radius:24px;text-align:center;background:radial-gradient(260px 160px at 50% -20%,color-mix(in srgb,var(--ac) 20%,transparent),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--card) 100%,#fff 4%),var(--card));border:1px solid var(--ln);box-shadow:var(--sh1)}
@media(hover:hover){.lp-t:hover{border-color:color-mix(in srgb,var(--ac) 50%,var(--ln));transform:translateY(-2px)}}
.lp-fl{font-size:2.1em;line-height:1.1;letter-spacing:-.05em}.lp-t b{font-size:1.1em;letter-spacing:-.02em}.lp-t .mu{font-size:.78em;line-height:1.3}
.lp-go{margin-top:8px;padding:6px 14px;border-radius:99px;font-size:.82em;font-weight:650;color:#fff;background:linear-gradient(135deg,var(--ac2),var(--ac));box-shadow:0 6px 16px color-mix(in srgb,var(--ac) 35%,transparent)}
.lp-ov{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;background:rgba(3,4,10,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fadeIn .2s both}
.lp-sh{width:100%;max-width:520px;max-height:82vh;max-height:82dvh;overflow:auto;overscroll-behavior:contain;padding:10px 14px calc(18px + env(safe-area-inset-bottom,0px));margin:0 8px 8px;border-radius:28px;background:var(--glass);border:1px solid var(--ln);-webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);box-shadow:0 30px 80px rgba(0,0,0,.5);animation:shUp .32s cubic-bezier(.2,.9,.3,1) both}
@keyframes shUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.lp-hd{display:flex;align-items:center;justify-content:space-between;padding:8px 4px 10px}.lp-hd b{font-size:1.1em;letter-spacing:-.02em}.lp-hd button{width:38px;min-height:38px;padding:0;border-radius:50%}
.lp-r{display:flex;align-items:center;gap:14px;width:100%;text-align:left;min-height:68px;margin:6px 0;padding:10px 14px;border-radius:18px;background:color-mix(in srgb,var(--card) 70%,transparent);border:1px solid var(--ln);box-shadow:none;animation:inUp .36s cubic-bezier(.2,.9,.3,1) both}
.lp-r:nth-of-type(2){animation-delay:.04s}.lp-r:nth-of-type(3){animation-delay:.08s}.lp-r:nth-of-type(4){animation-delay:.12s}
.lp-r .e{font-size:1.9em;line-height:1}.lp-r .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.lp-r .t b{font-size:1.02em}.lp-r .t .mu{font-size:.8em}.lp-ar{color:var(--mu);font-size:1.4em}
@media(hover:hover){.lp-r:hover{border-color:color-mix(in srgb,var(--ac) 50%,var(--ln));background:color-mix(in srgb,var(--ac) 8%,var(--card))}}
/* iPhone i ekrany szerokie */
@media(max-height:520px) and (orientation:landscape){.fc{min-height:200px;padding:20px 18px}.fr{font-size:2em}#app{padding-bottom:110px}}
@media(min-width:760px){#app{max-width:720px}.g4{grid-template-columns:repeat(4,1fr)}.fc{min-height:360px}.fr{font-size:2.9em}.tabs{width:min(100% - 40px,560px)}.lp-t{min-height:210px}}
@media(min-width:1100px){#app{max-width:820px}.grid{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){.fc,.lp-sh,.lp-r,.lp-ov{animation:none}button{transition:none}}

/* ===== 0.6.3b fix: kafelki języków, seria, dynia, mini poziom ===== */
.lp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0 6px}
.lp-tl{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:150px;padding:18px 10px 14px;border-radius:22px;background:linear-gradient(180deg,color-mix(in srgb,var(--card) 100%,#fff 5%),var(--card));border:1px solid var(--ln);box-shadow:var(--sh1);text-align:center;animation:fcIn .3s cubic-bezier(.2,.9,.3,1) both}
.lp-tl:nth-child(2){animation-delay:.04s}.lp-tl:nth-child(3){animation-delay:.08s}.lp-tl:nth-child(4){animation-delay:.12s}
.lp-tl .fl{font-size:2.6em;line-height:1.1}
.lp-tl b{font-size:1.08em;margin-top:4px}
.lp-tl .mu{font-size:.8em}
.lp-tl:hover{border-color:color-mix(in srgb,var(--ac) 55%,var(--ln))}
.lp-tl:active{transform:scale(.97)}
.lp-tl.soon{opacity:.6;box-shadow:none}
.lp-tl .sb2{margin-top:6px}
.lp-nb{position:absolute;top:10px;right:10px;font-size:.62em;padding:3px 8px}
.fire{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:4px 10px 4px 8px;border-radius:99px;font-weight:800;font-size:.9em;background:color-mix(in srgb,var(--mu) 14%,transparent);color:var(--mu)}
.fire i{font-style:normal;filter:grayscale(1);opacity:.55}
.fire.on{background:color-mix(in srgb,#ff4d2e 18%,transparent);color:#ff6a3d}
.fire.on i{filter:none;opacity:1}
.lp-r .fire{margin:0 6px 0 0}
.lp-leg{font-size:.74em;text-align:center;margin:10px 0 2px}
.lp-leg .fire{margin:0;padding:1px 5px;font-size:1em;background:none}
.pk{position:absolute;top:6px;left:0;z-index:3;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;font-size:1.3em;line-height:1;background:transparent;border:1px solid transparent;box-shadow:none;opacity:.35;filter:grayscale(.7);transition:opacity .25s,filter .25s,transform .2s}
.pk:hover{opacity:.7;filter:none}
.pk.on{opacity:1;filter:none;border-color:color-mix(in srgb,#ff8a2b 45%,transparent);background:color-mix(in srgb,#ff8a2b 12%,transparent);box-shadow:0 0 22px -4px rgba(255,138,43,.55)}
.pk:active{transform:scale(.9) rotate(-8deg)}
.lvm{display:flex;align-items:center;gap:14px;padding:14px 16px;text-align:left;margin-bottom:14px}
.lvm-e{font-size:1.9em;line-height:1;flex:0 0 auto}
.lvm-b{flex:1;min-width:0}
.lvm-t{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.lvm-t b{font-size:1em}
.lvm-t .mu{font-size:.78em;white-space:nowrap}
.lvm .pg-bar{margin:0}
.lvm-s{font-size:.78em;margin-top:6px}
html[data-hw="1"] .lvm,html[data-hw="1"] .lvm .mu{color:#fff}
html[data-hw="1"] .lvm .mu{opacity:.85}
html[data-hw="1"] .lvm .pg-bar{background:rgba(255,255,255,.25)}
html[data-hw="1"] .hero.lvm::after{display:none}

/* ===== 0.6.4b: „Znam już” ===== */
.knb{min-height:44px;font-size:.9em;font-weight:700;color:var(--ok);background:color-mix(in srgb,var(--ok) 8%,transparent);border:1px dashed color-mix(in srgb,var(--ok) 45%,var(--ln));box-shadow:none}
.knb:active{transform:scale(.98)}
.knm{margin:10px 0 0;padding:9px 14px;border-radius:14px;font-size:.84em;line-height:1.4;color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent);border:1px solid color-mix(in srgb,var(--ok) 28%,transparent);animation:fcIn .3s ease both}
.fc{position:relative}
.newtag{position:absolute;top:14px;left:16px;font-size:.66em;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:99px;color:var(--ac);background:color-mix(in srgb,var(--ac) 14%,transparent)}

/* ===== 0.6.5b: wpisywanie PL→obcy, instrukcja ===== */
.bres{font-weight:800;margin-top:6px}
.yel{color:#d9a21f}
.sugh{text-align:center;font-size:.78em;margin:12px 0 -4px}
.g4.g4s button{opacity:.55}
.g4.g4s button.sug{opacity:1;transform:translateY(-2px);box-shadow:0 0 0 2px currentColor,0 10px 26px -10px currentColor}
.tut-ov{position:fixed;inset:0;z-index:72;background:rgba(3,4,10,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px))}
.tut{width:100%;max-width:480px;margin:0;max-height:88vh;max-height:88dvh;overflow:auto;border-radius:26px}
.tut-h{font-weight:800;font-size:1.25em;text-align:center;margin:2px 0 12px}
.tut-r{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--ln)}
.tut-r:first-of-type{border-top:0}
.tut-e{flex:0 0 36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.1em;font-weight:800;color:var(--ac);background:color-mix(in srgb,var(--ac) 14%,transparent)}
.tut-r .mu{font-size:.86em;line-height:1.4;margin-top:2px}

/* ===== 0.6.6b-satan: porządki — górna krawędź, dół, zoom, przewijanie, spójne arkusze ===== */
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:pan-x pan-y;overscroll-behavior:none}
body{background:transparent;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
html[data-hw="1"] body{background:transparent}
html[data-hw="1"]{background:radial-gradient(700px 380px at 100% 0,color-mix(in srgb,#ff7a18 16%,transparent),transparent),radial-gradient(620px 420px at -10% 100%,color-mix(in srgb,#7a3df0 18%,transparent),transparent),var(--bg)}
body::before{inset:0;height:auto;bottom:auto;min-height:75vh}
#app{padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
@media(max-height:520px) and (orientation:landscape){#app{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}}
/* paski przewijania: ukryte na ekranach dotykowych, przewijanie działa normalnie */
@media(hover:none) and (pointer:coarse){html,body,*{scrollbar-width:none}::-webkit-scrollbar{display:none;width:0;height:0;background:transparent}}
.sh-ov,.lp-sh,.ag-sheet,.tut{overscroll-behavior:contain}
input[type=range],.rg{touch-action:pan-y}
/* wspólne arkusze (okna od dołu) */
.sh-ov{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center;padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(3,4,10,.58);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fadeIn .2s both}
.bsh{width:100%;max-width:520px;margin:0;max-height:86vh;max-height:86dvh;overflow:auto;border-radius:28px;padding:16px 18px 18px;background:color-mix(in srgb,var(--card) 95%,transparent);-webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);box-shadow:0 30px 80px rgba(0,0,0,.45);animation:shUp .32s cubic-bezier(.2,.9,.3,1) both}
.bsh::before,.lp-sh::before{content:"";display:block;width:40px;height:5px;border-radius:99px;background:color-mix(in srgb,var(--mu) 35%,transparent);margin:0 auto 12px}
.tut-ov{background:rgba(3,4,10,.58)}
.bsh .w,.bsh button.p{margin-top:8px}
/* start: kafelki trybów zamiast listy przycisków */
.hm-main{margin-top:6px}
.hm-sub{font-size:.78em;margin-top:2px;opacity:.85}
.hm-g{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 0}
.hm-t{display:flex;align-items:center;gap:10px;width:100%;min-height:58px;margin:0;padding:10px 12px;border-radius:18px;text-align:left;font-weight:600;font-size:.95em;line-height:1.2;background:linear-gradient(180deg,color-mix(in srgb,var(--card) 100%,#fff 4%),var(--card));border:1px solid var(--ln);box-shadow:var(--sh1);color:var(--tx)}
.hm-t .e{flex:0 0 34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.1em;background:color-mix(in srgb,var(--ac) 14%,transparent);color:var(--ac)}
.hm-g .hm-t:last-child:nth-child(odd){grid-column:1/-1}
@media(hover:hover){.hm-t:hover{border-color:color-mix(in srgb,var(--ac) 45%,var(--ln));transform:translateY(-1px)}}
html[data-hw="1"] .hm-t .e{background:linear-gradient(135deg,#6a35d8,#ff7a18);color:#fff}
/* lista fiszek: stan „Uczysz się” */
.tag.lr{background:color-mix(in srgb,#d9a21f 18%,transparent);color:#c58f14}
input[type=search]{-webkit-appearance:none;appearance:none}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
/* kopia zapasowa */
.filebtn{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;overflow:hidden;cursor:pointer;width:100%;min-height:52px;margin:8px 0;padding:10px 14px;border-radius:16px;font-weight:600;color:var(--tx);background:linear-gradient(180deg,color-mix(in srgb,var(--card) 100%,#fff 4%),var(--card));border:1px solid var(--ln);box-shadow:var(--sh1)}
.filebtn:active{transform:scale(.98)}
input[type=file]{font-size:.9em;color:var(--mu);padding:8px;border-radius:14px}
input[type=file]::file-selector-button{font:inherit;font-weight:600;margin-right:10px;padding:8px 14px;border-radius:12px;border:1px solid var(--ln);background:color-mix(in srgb,var(--ac) 12%,var(--card));color:var(--ac);cursor:pointer}
.filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:16px}
details.adv{margin-top:12px;border-top:1px solid var(--ln);padding-top:8px}
details.adv summary{cursor:pointer;color:var(--mu);font-size:.88em;padding:6px 0;list-style:none}
details.adv summary::-webkit-details-marker{display:none}
details.adv summary::before{content:"▸ ";display:inline-block;transition:transform .2s}
details.adv[open] summary::before{transform:rotate(90deg)}
@media(prefers-reduced-motion:reduce){.bsh,.sh-ov{animation:none}}

/* ===== 0.6.6b build 2: przewijanie w kontenerze, przepisywanie, trening pisania, odznaki ===== */
html,body{height:100%;overflow:hidden;overscroll-behavior:auto}
/* iOS 26: zainstalowana aplikacja z viewport-fit=cover + black-translucent dostaje viewport krótszy o wysokość paska statusu (błąd WebKit 301108) — html dostaje pełny ekran */
@media (display-mode: standalone){html{min-height:min(100lvh,calc(100% + env(safe-area-inset-top,0px)))}}
#scr{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:none}
.fixb{width:100%;margin-top:14px;padding-top:12px;border-top:1px dashed var(--ln);text-align:left}
.fixb .mu{margin-bottom:6px}
.fixb .fxl{text-align:center}
.fixe{margin-top:8px;font-size:.88em;font-weight:700}
.newh{font-size:.8em;margin-top:10px;line-height:1.4;text-align:center}
.cchips.wrap{flex-wrap:wrap;overflow:visible;margin:6px 0 4px;padding:2px 0}
.wpr{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;margin:0;padding:8px 6px;border:0;border-bottom:1px solid var(--ln);border-radius:0;background:none;box-shadow:none;text-align:left}
.wpr:last-child{border-bottom:0}
.wpr .ck{flex:0 0 26px;height:26px;border-radius:8px;border:2px solid var(--ln);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:.85em}
.wpr.on .ck{background:linear-gradient(135deg,var(--ac2),var(--ac));border-color:transparent}
.wpr .t{flex:1;min-width:0;display:flex;flex-direction:column}.wpr .t b{overflow-wrap:anywhere}.wpr .t span{color:var(--mu);font-size:.88em;overflow-wrap:anywhere}
#toast{position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top,0px));z-index:400;transform:translate(-50%,-140%);max-width:min(92vw,460px);padding:12px 18px;border-radius:18px;font-weight:700;font-size:.95em;color:var(--tx);background:var(--glass);border:1px solid color-mix(in srgb,var(--ac) 40%,var(--ln));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 16px 40px rgba(0,0,0,.35);transition:transform .45s cubic-bezier(.2,.9,.3,1.2);pointer-events:none;text-align:center}
#toast.on{transform:translate(-50%,0)}
button[disabled]{opacity:.5}

/* 0.6.6b build 4: przy otwartej klawiaturze treść da się przewinąć nad klawiaturę */
html.kb-open #app{padding-bottom:calc(var(--kbh,320px) + 28px)}
.fixb input{scroll-margin-bottom:96px}

/* build 5: zwięzła karta przepisywania */
.fcx{min-height:0!important;padding:18px 18px 16px!important;gap:6px!important}
.fcx .fr{font-size:1.7em}
.fcx .newtag{position:static;align-self:flex-start;margin-bottom:-4px}
.fxc{width:100%;text-align:center}
.fxa{font-size:1.9em;font-weight:700;color:var(--ok);letter-spacing:-.02em;line-height:1.2}
.fxy{font-size:.85em;margin-top:2px}.fxy s{color:var(--bad)}
.fcx .fixb{margin-top:8px;padding-top:10px}
.fxbtn{margin-top:10px}.fxbtn button{min-height:50px}