/* Wejście do systemu (standard UI/UX §3, makieta zaakceptowana 02.11.2026). Komputer: znak nad jedną kartą;
   telefon: znak u góry, formularz w arkuszu od dołu. Animacja znaku nie blokuje formularza. */
html.xe-login-page,html.xe-login-page body{background:#12171f;min-height:100%}
.xe-stage{--xe-ink:#1d232a;--xe-muted:#5f6874;--xe-brand:#d92558;--xe-brand-h:#bd1b49;--xe-ease:cubic-bezier(.22,1,.36,1);--xe-spring:cubic-bezier(.34,1.45,.5,1);
  position:fixed;inset:0;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:32px 16px;box-sizing:border-box;
  background:#12171f;color:var(--xe-ink);font-family:Inter,ui-sans-serif,system-ui,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased;isolation:isolate}
.xe-stage *{box-sizing:border-box}
.xe-glow{position:fixed;z-index:-1;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none}
.xe-g1{width:620px;height:620px;left:-140px;top:-180px;background:#7a1636;animation:xe-d1 22s ease-in-out infinite alternate}
.xe-g2{width:560px;height:560px;right:-160px;bottom:-220px;background:#26365a;animation:xe-d2 26s ease-in-out infinite alternate}
@keyframes xe-d1{to{transform:translate(160px,120px)}}
@keyframes xe-d2{to{transform:translate(-140px,-90px)}}
.xe-top{display:flex;flex-direction:column;align-items:center;gap:12px}
.xe-logo{display:flex;align-items:baseline;font-weight:900;font-size:64px;line-height:1;letter-spacing:.04em;color:#fff}
.xe-l{display:inline-block}
.xe-dot{display:inline-block;width:14px;height:14px;border-radius:4px;background:var(--xe-brand);margin-left:6px;position:relative}
.xe-dot::after{content:"";position:absolute;inset:-2px;border-radius:6px;border:2px solid var(--xe-brand);opacity:0}
.xe-play .xe-l{animation:xe-letter .62s var(--xe-spring) both;animation-delay:calc(var(--i)*55ms)}
.xe-play .xe-dot{animation:xe-drop .6s .33s var(--xe-spring) both}
.xe-play .xe-dot::after{animation:xe-ring .9s .82s var(--xe-ease) both}
.xe-tag{margin:0;font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:#aeb8c6}
.xe-play .xe-tag{animation:xe-fade .5s .7s var(--xe-ease) both}
@keyframes xe-letter{from{opacity:0;transform:translateY(28px) scale(.9)}to{opacity:1;transform:none}}
@keyframes xe-drop{from{opacity:0;transform:translateY(-60px)}to{opacity:1;transform:none}}
@keyframes xe-ring{0%{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(3.2)}}
@keyframes xe-fade{from{opacity:0}to{opacity:1}}
.xe-card{width:min(420px,100%);background:#fff;border-radius:22px;padding:30px 30px 24px;box-shadow:0 30px 80px -24px rgba(0,0,0,.55),0 8px 22px -10px rgba(0,0,0,.35)}
.xe-play .xe-card{animation:xe-card .3s var(--xe-ease) both}
@keyframes xe-card{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.xe-view{display:flex;flex-direction:column;gap:16px}
.xe-view[hidden]{display:none}
.xe-head{display:flex;flex-direction:column;gap:4px}
.xe-head h1{margin:0;font-size:25px;font-weight:800;letter-spacing:-.02em;color:var(--xe-ink)}
.xe-head p{margin:0;font-size:14px;line-height:1.5;color:var(--xe-muted)}
.xe-field{display:flex;flex-direction:column;gap:6px}
.xe-field label{font-size:13px;font-weight:600;color:var(--xe-ink)}
.xe-box{display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;border-radius:12px;border:1px solid #8794a3;background:#fff;color:#7a8492;transition:border-color .12s,box-shadow .2s var(--xe-ease)}
.xe-box>svg{width:18px;height:18px;flex:none}
.xe-box:focus-within{border-color:var(--xe-brand);box-shadow:0 0 0 4px rgba(217,37,88,.14)}
.xe-box.xe-bad{border-color:#c2334d;box-shadow:0 0 0 4px rgba(194,51,77,.12)}
.xe-box input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font:400 16px Inter,ui-sans-serif,system-ui,"Segoe UI",Arial,sans-serif;color:var(--xe-ink)}
.xe-box input::placeholder{color:#9aa3af}
.xe-eye{flex:none;width:36px;height:36px;margin-right:-8px;border:0;border-radius:9px;background:transparent;color:#5f6874;display:flex;align-items:center;justify-content:center;cursor:pointer}
.xe-eye:hover{background:#f1f3f6}
.xe-eye svg{width:18px;height:18px}
.xe-err{margin:0;font-size:13px;font-weight:500;color:#b0283f}
.xe-err:empty{display:none}
.xe-caps{margin:0;align-self:flex-start;font-size:12px;color:#7a4f08;background:#fff4e0;border-radius:8px;padding:4px 8px}
.xe-caps[hidden]{display:none}
.xe-go{position:relative;align-self:center;width:100%;height:50px;border:0;border-radius:13px;background:var(--xe-brand);color:#fff;font:600 15px Inter,ui-sans-serif,system-ui,"Segoe UI",Arial,sans-serif;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  box-shadow:0 10px 22px -12px rgba(217,37,88,.8);transition:background .12s,transform .12s var(--xe-ease),width .36s var(--xe-spring),border-radius .36s var(--xe-spring)}
.xe-go:hover{background:var(--xe-brand-h)}
.xe-go:active{transform:scale(.98)}
.xe-go:focus-visible{outline:2px solid #fff;outline-offset:-5px}
.xe-label{display:inline-flex;align-items:center;gap:8px}
.xe-label svg{width:16px;height:16px}
.xe-spin,.xe-check{display:none}
.xe-go.xe-busy,.xe-go.xe-ok{width:50px;border-radius:25px;pointer-events:none}
.xe-go.xe-busy .xe-label,.xe-go.xe-ok .xe-label{display:none}
.xe-go.xe-busy .xe-spin{display:block;width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:xe-rot .7s linear infinite}
.xe-go.xe-ok{background:#23734b;box-shadow:0 10px 22px -12px rgba(35,115,75,.8)}
.xe-go.xe-ok .xe-check{display:block;width:22px;height:22px}
.xe-go.xe-ok .xe-check path{stroke-dasharray:24;stroke-dashoffset:24;animation:xe-draw .32s var(--xe-ease) forwards}
@keyframes xe-rot{to{transform:rotate(360deg)}}
@keyframes xe-draw{to{stroke-dashoffset:0}}
.xe-link{align-self:center;min-height:40px;padding:0 12px;border:0;border-radius:10px;background:transparent;font:500 14px Inter,ui-sans-serif,system-ui,"Segoe UI",Arial,sans-serif;color:var(--xe-ink);cursor:pointer}
.xe-link:hover{background:#f3f4f7}
.xe-badge{width:52px;height:52px;border-radius:16px;background:#edf6f0;display:flex;align-items:center;justify-content:center}
.xe-badge svg{width:26px;height:26px}
.xe-help{margin:0;font-size:13px;color:#a7b0bd;text-align:center}
@media(max-width:760px){
  .xe-stage{justify-content:flex-end;gap:0;padding:0}
  .xe-top{flex:1;justify-content:center;min-height:200px;padding:24px 16px}
  .xe-logo{font-size:46px}
  .xe-dot{width:11px;height:11px;border-radius:3px}
  .xe-tag{font-size:11px}
  .xe-card{width:100%;border-radius:28px 28px 0 0;padding:22px 22px max(20px,env(safe-area-inset-bottom));box-shadow:0 -20px 50px -20px rgba(0,0,0,.6)}
  .xe-play .xe-card{animation-name:xe-sheet;animation-duration:.34s}
  .xe-box{height:54px;border-radius:14px}
  .xe-go{height:56px;border-radius:16px;font-size:16px}
  .xe-go.xe-busy,.xe-go.xe-ok{width:56px;border-radius:28px}
  .xe-link{min-height:44px;font-size:15px}
  .xe-help{display:none}
}
@keyframes xe-sheet{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .xe-stage *,.xe-stage *::before,.xe-stage *::after{animation-duration:1ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
}
.xe-rules{display:flex;flex-direction:column;gap:6px}
.xe-rule{margin:0;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--xe-muted);transition:color .2s}
.xe-rule>span{width:16px;height:16px;border-radius:50%;border:1.5px solid currentColor;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
.xe-rule svg{width:10px;height:10px;opacity:0;transition:opacity .2s}
.xe-rule.xe-ok{color:#23734b}
.xe-rule.xe-ok>span{background:#23734b;border-color:#23734b}
.xe-rule.xe-ok svg{opacity:1}
/* Pole ma jedną ramkę fokusu (na .xe-box); wspólne obrysy pól z system-shell/panel nie dublują jej. */
.xe-stage .xe-box input:focus,.xe-stage .xe-box input:focus-visible{outline:none!important;box-shadow:none!important}
.xe-stage .xe-eye:focus-visible,.xe-stage .xe-link:focus-visible{outline:2px solid var(--xe-brand)!important;outline-offset:2px!important}
a.xe-go,a.xe-link{text-decoration:none}
.xe-checking{align-items:center;padding:24px 0;color:var(--xe-muted);font-size:14px}
.xe-checking p{margin:0}
.xe-spin-dark{width:24px;height:24px;border-radius:50%;border:2.5px solid #e3e7ed;border-top-color:var(--xe-brand);animation:xe-rot .7s linear infinite}
/* Ekran logowania potrafi stać godzinami na stanowisku: tło rusza się tylko przez pierwsze 2 minuty. */
.xe-stage.xe-still .xe-glow{animation-play-state:paused}