/* Darmowy test (mini-diagnoza): dodatki do v3.css (K2 „zakreślacz”). Mobile first. */
.step{font-size:13px;font-weight:800;background:#111;color:var(--brand);padding:7px 12px;border-radius:999px;white-space:nowrap}
.prog2{display:flex;gap:4px;padding:0 var(--gut) 0;background:var(--brand)}
.prog2 i{flex:1;height:5px;border-radius:99px 99px 0 0;background:rgba(17,17,17,.2)}
.prog2 i.on{background:#111}
.scr[hidden]{display:none}
.scr .in{max-width:640px}

/* ekran zadania */
#s-task{padding:18px var(--gut) 40px}
.t{font-size:28px;margin-top:10px}
.task{background:#fff;border:1.5px solid #111;border-radius:var(--r);padding:16px 16px 14px;margin-top:14px;box-shadow:6px 6px 0 var(--brand)}
.task .pl{font-size:16px;line-height:1.4;font-weight:800;letter-spacing:-.01em}
.tr-btn{margin-top:10px;font-size:14px;font-weight:800;text-decoration:underline;text-underline-offset:4px;padding:4px 0;min-height:32px}
.tr{margin-top:8px;padding-top:10px;border-top:1px solid var(--line);font-size:14px;color:#333;line-height:1.4}
.tr[hidden]{display:none}
.lbl{display:block;margin-top:18px;font-size:14px;font-weight:800}
textarea{display:block;width:100%;margin-top:8px;font:inherit;font-size:18px;line-height:1.4;padding:14px 14px;border:1.5px solid #111;border-radius:16px;background:#fff;color:#111;resize:vertical;min-height:150px}
textarea:focus-visible{outline:3px solid var(--brand);outline-offset:0;box-shadow:0 0 0 1.5px #111}
.meta{display:flex;justify-content:flex-end;margin-top:6px}
.cnt{font-size:13px;color:var(--mute);padding:2px 6px;border-radius:6px;white-space:nowrap}
.cnt.ok{color:#111;font-weight:800}
.cnt.warn{background:var(--brand);color:#111;font-weight:800}
.keys{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin-top:8px}
.keys button{height:42px;border-radius:10px;border:1.5px solid #111;background:#fff;font-size:18px;font-weight:800;display:grid;place-items:center;padding:0}
.keys button:active{background:var(--brand)}
.keys .shift[aria-pressed=true]{background:#111;color:var(--brand)}
.keys .shift{font-size:15px}
.wide{width:100%;justify-content:center;margin-top:16px}
.cta:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}
.cta.busy{opacity:1}
.cta .spin{width:18px;height:18px;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:obr .7s linear infinite;flex:none}
@keyframes obr{to{transform:rotate(360deg)}}
#s-task .micro{text-align:center;color:var(--mute);opacity:1}

/* ekran wyniku */
.hero-r{background:var(--brand);padding:18px var(--gut) 34px}
.card{background:#fff;border:1.5px solid #111;border-radius:var(--r);box-shadow:6px 6px 0 #111}
.sc{margin-top:14px;padding:20px 18px 18px}
.nums{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.n1{font-size:60px;line-height:1;letter-spacing:-.04em;white-space:nowrap;font-weight:800}
.n2{font-size:24px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;color:#333}
.track2{position:relative;height:14px;background:#eee;border-radius:99px;margin:44px 0 0}
.track2 .fill{position:absolute;left:0;top:0;bottom:0;background:#111;border-radius:99px;transform-origin:left;animation:rosnij .7s .15s both cubic-bezier(.2,.8,.2,1)}
.track2 .band{position:absolute;top:-4px;bottom:-4px;border:2px solid #111;border-radius:8px;background:repeating-linear-gradient(135deg,rgba(255,225,77,.9) 0 5px,rgba(255,225,77,.35) 5px 10px);z-index:0}
.track2 .fill{z-index:1}
.prog3{position:absolute;left:50%;top:-8px;bottom:-8px;width:3px;background:#111;margin-left:-1.5px;z-index:2}
.prog3 span{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:13px;font-weight:800;white-space:nowrap;margin-bottom:4px}
.need{margin-top:16px;font-size:18px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.need mark{background:linear-gradient(transparent 58%,var(--brand) 58%,var(--brand) 94%,transparent 94%);color:inherit;padding:0 2px}
.edge{margin-top:8px;font-size:14px;color:var(--mute)}
.edge[hidden]{display:none}
.body-r{padding:30px var(--gut) 40px;max-width:640px}
.h2r{font-size:24px}
.errs{display:grid;gap:14px;margin-top:16px}
.err{background:#fff;border:1.5px solid #111;border-radius:var(--r);padding:16px 16px 14px;box-shadow:5px 5px 0 var(--brand)}
.err .sent{font-size:21px;margin-top:0;line-height:1.35}
.err .bad{color:#767676;white-space:normal;text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:#111}
.err .bad::after{content:none}
.err .fix{white-space:normal;animation:none}
.err .why{font-size:14px;margin-top:10px;padding-top:10px}
.offer{margin-top:30px;background:#111;color:#fff;border-radius:var(--r);padding:24px 20px 22px}
.offer h2{font-size:25px;color:#fff}
.offer .cta{background:var(--brand);color:#111;margin-top:18px;width:100%;justify-content:center}
.offer .sec{margin-top:16px;font-size:14px;text-align:center}
.offer .sec a{text-decoration:underline;text-underline-offset:4px;color:#fff}
.fine{margin-top:22px;font-size:12px;line-height:1.45;color:var(--mute)}
#s-task .tag,.hero-r .tag{margin-top:0}
.hero-r .tag{color:#222}
@media (min-width:900px){
  #s-task{padding-top:36px}.t{font-size:38px}
  .n1{font-size:84px}.n2{font-size:30px}
  .hero-r{padding-top:30px}
}
@media (max-width:359px){.n1{font-size:48px}.keys button{height:38px;font-size:16px}}
@media (prefers-reduced-motion:reduce){.track2 .fill{animation:none}.cta .spin{animation-duration:2s}}

/* API: tryb testowy, e-mail i kod, zadanie b, rozmyte błędy (pełny dostęp) */
.sucho{background:#111;color:var(--brand);font-size:13px;font-weight:800;text-align:center;padding:6px var(--gut)}
.sucho[hidden]{display:none}
#s-login,#s-b{padding:18px var(--gut) 40px}
.lead2{margin-top:12px;font-size:16px;line-height:1.45}
.inp{display:block;width:100%;margin-top:8px;font:inherit;font-size:18px;padding:14px;border:1.5px solid #111;border-radius:16px;background:#fff;color:#111}
.inp:focus-visible{outline:3px solid var(--brand);outline-offset:0;box-shadow:0 0 0 1.5px #111}
.inp.kod{font-size:28px;letter-spacing:.3em;text-align:center;font-weight:800}
form[hidden],#blok-a[hidden],.sec[hidden]{display:none}
#s-login .micro,#s-b .micro{text-align:center;color:var(--mute);opacity:1}
.szac{margin-top:6px}
.ukryte{position:relative;display:grid;gap:14px}
.err.rozmyte{filter:blur(6px);user-select:none;pointer-events:none}
.ukryte-lbl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;color:#111;text-decoration:none}
.ukryte-lbl b{background:var(--brand);border:1.5px solid #111;border-radius:999px;padding:8px 16px;font-size:18px;box-shadow:4px 4px 0 #111}
.ukryte-lbl span{font-size:14px;font-weight:800;text-decoration:underline;text-underline-offset:4px}