/* Fala B1 (25.10.2026) — ekrany wejścia: logowanie premium z mottem, zmiana hasła, 2FA.
   Prefiks sx-b-. Tokeny z signal-ui.css (--sx-*). Panel marki (granat + łuki) zostaje granatowy w obu motywach;
   karta formularza bierze --sx-card, więc w trybie ciemnym ciemnieje razem z resztą CRM. */
.sx-b-auth{min-height:calc(100vh - var(--signal-provider-height,0px));display:grid;grid-template-columns:minmax(0,1.12fr) minmax(440px,.88fr);
  background:#071B30;font-family:Inter,system-ui,sans-serif;color:var(--sx-ink);position:relative;overflow:hidden}
.sx-b-auth *,.sx-b-auth *::before,.sx-b-auth *::after{box-sizing:border-box}
.sx-b-auth svg.sx-i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---- panel marki ---- */
.sx-b-hero{position:relative;overflow:hidden;color:#fff;padding:52px 64px 40px;display:flex;flex-direction:column;
  background:radial-gradient(1200px 700px at 8% 108%,rgba(0,150,160,.34),transparent 58%),radial-gradient(900px 600px at 105% -10%,rgba(63,208,212,.12),transparent 60%),linear-gradient(160deg,#0E2A47 0%,#0A2038 55%,#071B30 100%)}
.sx-b-logo{height:34px;width:auto;align-self:flex-start;position:relative;z-index:1}
.sx-b-hero-in{margin:auto 0;position:relative;z-index:1;max-width:680px;padding:40px 0}
.sx-b-kicker{margin:0 0 22px;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sx-tq-l);display:flex;align-items:center;gap:12px}
.sx-b-kicker::before{content:"";width:34px;height:2px;background:var(--sx-tq-l);border-radius:2px}
.sx-b-motto{margin:0;font-size:clamp(46px,6.1vw,92px);font-weight:900;line-height:.98;letter-spacing:-.045em;color:#fff;text-wrap:balance}
.sx-b-motto em{font-style:normal;color:var(--sx-tq-l);background:linear-gradient(90deg,#3FD0D4,#7BE7E9);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sx-b-motto-pod{margin:24px 0 0;font-size:18px;line-height:1.55;color:#B6C7D9;max-width:540px;font-weight:500}
.sx-b-rytm{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:640px}
.sx-b-rytm li{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(2px)}
.sx-b-rytm i{width:36px;height:36px;border-radius:10px;background:rgba(63,208,212,.15);color:var(--sx-tq-l);display:grid;place-items:center}
.sx-b-rytm span{display:flex;flex-direction:column;gap:3px;font-size:13px;line-height:1.4;color:#AFC1D4;font-weight:500}
.sx-b-rytm b{color:#fff;font-size:15px;font-weight:700}
.sx-b-hero-foot{margin:0;position:relative;z-index:1;color:#7F95AD;font-size:12.5px}
.sx-b-arcs{position:absolute;left:-260px;bottom:-420px;width:1100px;height:1100px;border-radius:50%;pointer-events:none;z-index:0;
  background:repeating-radial-gradient(circle,transparent 0 78px,rgba(63,208,212,.17) 79px 80.5px,transparent 81px 110px)}
.sx-b-arcs::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(7,27,48,0) 0,rgba(7,27,48,0) 30%,rgba(7,27,48,.7) 72%)}

/* ---- strona formularza ---- */
.sx-b-side{display:flex;align-items:center;justify-content:center;padding:48px 40px;background:var(--sx-bg);position:relative}
.sx-b-card{width:100%;max-width:440px;background:var(--sx-card);border-radius:18px;box-shadow:0 2px 4px rgba(14,42,71,.06),0 24px 60px rgba(14,42,71,.14);padding:38px 38px 30px;
  display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden;color:var(--sx-ink)}
.sx-b-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--sx-tq),var(--sx-tq-l))}
.sx-b-card h1{margin:0;font-size:28px;font-weight:800;letter-spacing:-.03em;color:var(--sx-navy);line-height:1.15}
.sx-b-lead{margin:-10px 0 0;color:var(--sx-gray);font-size:14.5px;font-weight:500}
.sx-b-fld{display:flex;flex-direction:column;gap:7px}
.sx-b-fld>label{font-size:11.5px;font-weight:700;color:var(--sx-gray);letter-spacing:.06em;text-transform:uppercase}
.sx-b-inp{position:relative;display:flex;align-items:center}
.sx-b-inp>svg.sx-i{position:absolute;left:15px;color:var(--sx-gray2);pointer-events:none}
.sx-b-inp input{width:100%;height:52px;border:1px solid var(--sx-line);border-radius:11px;background:var(--sx-card);color:var(--sx-ink);font:500 15.5px Inter,system-ui,sans-serif;padding:0 48px 0 44px;outline:none;transition:border-color .15s,box-shadow .15s}
.sx-b-inp input::placeholder{color:var(--sx-gray2)}
.sx-b-inp input:focus{border-color:var(--sx-tq);box-shadow:0 0 0 4px rgba(0,150,160,.16)}
.sx-b-inp input[aria-invalid="true"]{border-color:var(--sx-bad)}
.sx-b-code input{text-align:center;letter-spacing:.42em;font-size:22px;font-weight:700;padding:0 16px;height:58px}
.sx-b-eye{position:absolute;right:6px;width:40px;height:40px;border:0;border-radius:9px;background:transparent;color:var(--sx-gray);display:grid;place-items:center;cursor:pointer}
.sx-b-eye:hover,.sx-b-eye[aria-pressed="true"]{color:var(--sx-tq-d);background:var(--sx-tq-bg)}
.sx-b-eye:focus-visible{outline:3px solid rgba(0,150,160,.45);outline-offset:1px}
.sx-b-caps{margin:0;display:inline-flex;align-self:flex-start;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--sx-warn);background:var(--sx-warn-bg);border-radius:7px;padding:4px 9px}
.sx-b-caps svg.sx-i{width:14px;height:14px}
.sx-b-caps[hidden]{display:none}
.sx-b-hint{margin:0;font-size:12.5px;color:var(--sx-gray);font-weight:500}
.sx-b-alert{display:flex;gap:10px;align-items:flex-start;border-radius:11px;padding:12px 14px;font-size:13.5px;line-height:1.45;background:var(--sx-bad-bg);color:var(--sx-bad);font-weight:500}
.sx-b-alert b{font-weight:700}
.sx-b-alert svg.sx-i{margin-top:1px}
.sx-b-alert:focus{outline:2px solid var(--sx-bad);outline-offset:2px}
.sx-b-alert-ok{background:var(--sx-ok-bg);color:var(--sx-ok)}
.sx-b-alert-info{background:var(--sx-tq-bg);color:var(--sx-tq-ink)}
.sx-b-cta{height:54px;width:100%;border:0;border-radius:12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 16px Inter,system-ui,sans-serif;color:#fff;text-decoration:none;
  background:linear-gradient(135deg,#00A6B0,#007F88);box-shadow:0 8px 22px rgba(0,150,160,.32),inset 0 1px 0 rgba(255,255,255,.18);transition:transform .12s,box-shadow .12s}
.sx-b-cta:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(0,150,160,.38),inset 0 1px 0 rgba(255,255,255,.18)}
.sx-b-cta:focus-visible{outline:3px solid rgba(0,150,160,.5);outline-offset:3px}
.sx-b-cta svg.sx-i{width:19px;height:19px}
.sx-b-row{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--sx-gray);font-weight:500;line-height:1.5}
.sx-b-row svg.sx-i{color:var(--sx-tq);margin-top:1px;width:17px;height:17px}
.sx-b-legal{margin:0;padding-top:16px;border-top:1px solid var(--sx-line2);text-align:center;font-size:12px;color:var(--sx-gray);font-weight:500}
.sx-b-legal a,.sx-b-lnk{color:var(--sx-tq-d);font-weight:600;text-decoration:none}
.sx-b-legal a:hover,.sx-b-lnk:hover{text-decoration:underline}
.sx-b-rules{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;font-weight:600;color:var(--sx-gray)}
.sx-b-rules li{display:inline-flex;align-items:center;gap:5px}
.sx-b-rules li svg.sx-i{width:14px;height:14px;color:var(--sx-gray2)}
.sx-b-rules li.ok{color:var(--sx-ok)}
.sx-b-rules li.ok svg.sx-i{color:var(--sx-ok)}
.sx-b-qr{display:flex;justify-content:center}
.sx-b-qr>div{width:196px;height:196px;background:#fff;padding:10px;border:1px solid var(--sx-line);border-radius:14px}
.sx-b-qr svg{width:100%;height:100%}
.sx-b-key{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;font-size:12.5px;color:var(--sx-gray)}
.sx-b-key code{font:700 13px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;color:var(--sx-navy);background:var(--sx-band);border:1px solid var(--sx-line2);border-radius:8px;padding:6px 10px;word-break:break-all}
.sx-b-done{width:60px;height:60px;border-radius:50%;background:var(--sx-ok-bg);color:var(--sx-ok);display:grid;place-items:center;align-self:center}
.sx-b-done svg.sx-i{width:28px;height:28px}
.sx-b-center{text-align:center}

/* ---- tablet / telefon ---- */
@media (max-width:1100px){
  .sx-b-hero{padding:44px 44px 34px}
  .sx-b-rytm{grid-template-columns:1fr;max-width:420px}
  .sx-b-rytm li{flex-direction:row;align-items:center}
}
@media (max-width:860px){
  .sx-b-auth{grid-template-columns:1fr;min-height:0;background:var(--sx-bg)}
  .sx-b-hero{padding:24px 20px 86px}
  .sx-b-logo{height:26px}
  .sx-b-hero-in{margin:0;padding:30px 0 0}
  .sx-b-kicker{font-size:11px;margin-bottom:14px}
  .sx-b-motto{font-size:clamp(40px,12.5vw,56px)}
  .sx-b-motto-pod{font-size:15px;margin-top:14px}
  .sx-b-rytm,.sx-b-hero-foot{display:none}
  .sx-b-arcs{left:auto;right:-520px;bottom:-640px}
  .sx-b-side{padding:0 14px 26px;margin-top:-58px;background:transparent;align-items:flex-start;z-index:2}
  .sx-b-card{padding:28px 20px 22px;border-radius:16px;gap:16px}
  .sx-b-card h1{font-size:23px}
}

/* ── Animacja wejścia motta (decyzja Mateusza 25.10, wersja 2): „ROBIMY” wchodzi delikatnie, potem litery
   R O Z P I E R D O L ! spadają po kolei — ciężkie, z uderzeniem; przy „!” mocny wstrząs ekranu; potem reszta strony.
   Tylko CSS; przy „ogranicz ruch” w systemie — bez animacji. Ostatnia litera ląduje ok. 2,6 s, formularz od ok. 2,8 s. */
.sx-b-motto{text-transform:uppercase}
.sx-b-motto em{display:inline-block;white-space:nowrap}
.sx-b-l{display:inline-block}
.sx-b-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion: no-preference){
  .sx-b-m1{display:inline-block;animation:sxbDelikatnie .7s cubic-bezier(.2,.8,.2,1) .05s both}
  .sx-b-motto em .sx-b-l{animation:sxbCiezka .5s cubic-bezier(.55,0,1,.45) both;transform-origin:50% 100%}
  .sx-b-motto em .sx-b-l:nth-child(1){animation-delay:0.75s}
  .sx-b-motto em .sx-b-l:nth-child(2){animation-delay:0.90s}
  .sx-b-motto em .sx-b-l:nth-child(3){animation-delay:1.05s}
  .sx-b-motto em .sx-b-l:nth-child(4){animation-delay:1.20s}
  .sx-b-motto em .sx-b-l:nth-child(5){animation-delay:1.35s}
  .sx-b-motto em .sx-b-l:nth-child(6){animation-delay:1.50s}
  .sx-b-motto em .sx-b-l:nth-child(7){animation-delay:1.65s}
  .sx-b-motto em .sx-b-l:nth-child(8){animation-delay:1.80s}
  .sx-b-motto em .sx-b-l:nth-child(9){animation-delay:1.95s}
  .sx-b-motto em .sx-b-l:nth-child(10){animation-delay:2.10s}
  .sx-b-motto em .sx-b-l:nth-child(11){animation-delay:2.25s}
  .sx-b-motto em .sx-b-l:nth-child(12){animation-delay:2.40s}
  .sx-b-motto em .sx-b-l:nth-child(13){animation-delay:2.55s}
  .sx-b-motto em .sx-b-l:nth-child(14){animation-delay:2.70s}
  .sx-b-motto em .sx-b-l:last-child{animation-name:sxbCiezkaFinal;animation-duration:.6s}
  .sx-b-hero{animation:sxbDudni 1.75s linear 1.05s both}
  .sx-b-auth{animation:sxbWstrzas .7s cubic-bezier(.36,.07,.19,.97) 2.55s both}
  .sx-b-hero-in{position:relative}
  .sx-b-hero-in::after{content:"";position:absolute;left:-6%;top:clamp(90px,11vw,180px);width:80%;height:22px;border-radius:50%;
    background:radial-gradient(ellipse at center,rgba(63,208,212,.6),rgba(63,208,212,0) 70%);opacity:0;pointer-events:none;
    animation:sxbFala .8s ease-out 2.55s both}
  .sx-b-kicker{animation:sxbWejdz .5s ease-out 2.75s both}
  .sx-b-motto-pod{animation:sxbWejdz .5s ease-out 2.85s both}
  .sx-b-rytm{animation:sxbWejdz .5s ease-out 3s both}
  .sx-b-card{animation:sxbKarta .6s ease-out 2.8s both}
  .sx-b-hero-foot{animation:sxbWejdz .5s ease-out 3.1s both}
}
@keyframes sxbDelikatnie{from{opacity:0;transform:translateY(-18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
/* Ciężka litera: przyspiesza w dół (jak spadający ciężar), uderza, spłaszcza się i lekko odbija. */
@keyframes sxbCiezka{
  0%{opacity:0;transform:translateY(-110vh) scale(1.3)}
  10%{opacity:1}
  62%{transform:translateY(0) scale(1.18,.72)}
  74%{transform:translateY(-10px) scale(.94,1.08)}
  86%{transform:translateY(0) scale(1.04,.96)}
  100%{opacity:1;transform:none}
}
@keyframes sxbCiezkaFinal{
  0%{opacity:0;transform:translateY(-110vh) scale(1.5) rotate(-10deg)}
  10%{opacity:1}
  55%{transform:translateY(0) scale(1.35,.6) rotate(0)}
  70%{transform:translateY(-18px) scale(.9,1.15)}
  85%{transform:translateY(0) scale(1.06,.94)}
  100%{opacity:1;transform:none}
}
/* Każde uderzenie litery szarpie panel w dół (11 uderzeń co 0,15 s). */
@keyframes sxbDudni{
  0.0%{transform:translateY(0)} 2.3%{transform:translateY(3px)}
  8.6%{transform:translateY(0)} 10.9%{transform:translateY(3px)}
  17.1%{transform:translateY(0)} 19.4%{transform:translateY(3px)}
  25.7%{transform:translateY(0)} 28.0%{transform:translateY(3px)}
  34.3%{transform:translateY(0)} 36.6%{transform:translateY(3px)}
  42.9%{transform:translateY(0)} 45.1%{transform:translateY(3px)}
  51.4%{transform:translateY(0)} 53.7%{transform:translateY(3px)}
  60.0%{transform:translateY(0)} 62.3%{transform:translateY(3px)}
  68.6%{transform:translateY(0)} 70.9%{transform:translateY(3px)}
  77.1%{transform:translateY(0)} 79.4%{transform:translateY(3px)}
  85.7%{transform:translateY(0)} 88.0%{transform:translateY(0px)}
  100%{transform:none}
}
@keyframes sxbWstrzas{
  0%,100%{transform:translate3d(0,0,0)}
  8%{transform:translate3d(-14px,9px,0) rotate(-.6deg)}
  18%{transform:translate3d(13px,-10px,0) rotate(.6deg)}
  28%{transform:translate3d(-11px,7px,0) rotate(-.45deg)}
  40%{transform:translate3d(9px,-6px,0) rotate(.3deg)}
  55%{transform:translate3d(-6px,4px,0)}
  70%{transform:translate3d(3px,-2px,0)}
  85%{transform:translate3d(-1px,1px,0)}
}
@keyframes sxbFala{0%{opacity:0;transform:scaleX(.2)}25%{opacity:1}100%{opacity:0;transform:scaleX(1.7)}}
@keyframes sxbWejdz{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes sxbKarta{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
/* Litery w ruchu nie dziedziczą gradientu tekstu rodzica — gradient na każdej literze. */
.sx-b-motto em{background:none;-webkit-text-fill-color:currentColor;color:#3FD0D4}
.sx-b-motto em .sx-b-l{background:linear-gradient(180deg,#7BE7E9,#3FD0D4 60%,#1FB3B8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}

/* Warianty statyczne (B, C): bez animacji wejścia. */
.sx-b-static .sx-b-motto,.sx-b-static .sx-b-m1,.sx-b-static .sx-b-l,.sx-b-static .sx-b-kicker,.sx-b-static .sx-b-motto-pod,.sx-b-static .sx-b-rytm,.sx-b-static .sx-b-hero-foot,.sx-b-static,.sx-b-static .sx-b-hero-in::after,.sx-b-auth-static,.sx-b-auth-static .sx-b-card{animation:none!important}
.sx-b-static .sx-b-hero-in::after{display:none}
.sx-b-static .sx-b-motto em{background:linear-gradient(90deg,#3FD0D4,#7BE7E9);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.sx-b-wb .sx-b-motto{font-size:clamp(40px,4.9vw,76px)}
/* Wyłączone animacje w ustawieniach profilu (html.sx-bez-animacji) — także na logowaniu. */
.sx-bez-animacji .sx-b-auth *,.sx-bez-animacji .sx-b-auth{animation:none!important}