/* =========================================================
   ZenWay – strony konta (logowanie, rejestracja, reset hasla)
   Samodzielny arkusz, wszystko z prefiksem za-, kolor przewodni w --acc.
   ========================================================= */
@property --acc { syntax: '<color>'; inherits: true; initial-value: #03ffe4; }

.za-body {
    --bg: #070912;
    --card: rgba(20, 24, 48, .55);
    --line: rgba(180, 174, 255, .12);
    --line-strong: rgba(180, 174, 255, .26);
    --muted: #9aa0c3;
    --purple: #9568ff;
    --danger: #ff6b6b;
    --acc-soft: color-mix(in srgb, var(--acc) 16%, transparent);
    --acc-line: color-mix(in srgb, var(--acc) 55%, transparent);
    margin: 0; min-height: 100vh; display: flex; flex-direction: column;
    background: var(--bg); color: #fff; font-family: 'Poppins', sans-serif; overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}
.za-body *, .za-body *::before, .za-body *::after { box-sizing: border-box; }
.za-body h1, .za-body h2, .za-body p { margin: 0; }
.za-body button { font-family: inherit; color: inherit; }
.za-body [hidden] { display: none !important; }

/* tlo */
.za-aurora { position: fixed; inset: -10%; z-index: -1; pointer-events: none; filter: blur(40px);
    background: radial-gradient(38% 42% at 22% 30%, color-mix(in srgb, var(--acc) 26%, transparent), transparent 70%),
                radial-gradient(34% 38% at 82% 18%, rgba(149,104,255,.24), transparent 70%),
                radial-gradient(40% 40% at 60% 95%, color-mix(in srgb, var(--acc) 12%, transparent), transparent 70%);
    animation: zaAurora 16s ease-in-out infinite alternate; }
@keyframes zaAurora { to { transform: translate3d(4%, -2%, 0) scale(1.08); } }
.za-gridbg { position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(180,174,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(180,174,255,.045) 1px, transparent 1px);
    background-size: 52px 52px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 35%, #000 10%, transparent 80%); mask-image: radial-gradient(70% 60% at 50% 35%, #000 10%, transparent 80%); }

/* gorny pasek */
.za-top { max-width: 1320px; width: 100%; margin: 0 auto; padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.za-logo img { display: block; height: 36px; width: auto; }
.za-top-links { display: flex; align-items: center; gap: 10px; }
.za-top-link { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 12px; font-size: 14px; font-weight: 500;
    color: #fff; text-decoration: none; background: rgba(255,255,255,.04); border: 1px solid var(--line-strong); transition: background .25s; }
.za-top-link:hover { background: rgba(255,255,255,.08); }
.za-top-link svg { width: 18px; height: 18px; }

/* karta */
.za-main { flex: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 10px 32px 80px; }
.za-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); max-width: 1040px; margin: 0 auto; border-radius: 28px; overflow: hidden;
    background: var(--card); border: 1px solid var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 40px 120px -50px color-mix(in srgb, var(--acc) 45%, transparent); animation: zaIn .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes zaIn { from { opacity: 0; transform: translateY(14px); } }

.za-side { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 44px 40px; overflow: hidden;
    background: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 60%),
                radial-gradient(90% 70% at 100% 100%, rgba(149,104,255,.2), transparent 65%), rgba(0,0,0,.18);
    border-right: 1px solid var(--line); }
.za-side h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.za-side > p { color: var(--muted); font-size: 15px; line-height: 1.7; }
.za-perks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.za-perks li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #d6d9f0; }
.za-perks svg { flex: none; width: 30px; height: 30px; padding: 7px; border-radius: 9px; color: var(--acc); background: var(--acc-soft); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.za-art { margin-top: auto; align-self: center; width: 100%; max-width: 340px; filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)); animation: zaFloat 6s ease-in-out infinite; }
@keyframes zaFloat { 50% { transform: translateY(-10px); } }

.za-form { display: flex; flex-direction: column; padding: 44px 44px 40px; }
.za-form h1 { font-size: clamp(28px, 3.2vw, 36px); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; margin: 14px 0 8px; }
.za-lead { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin-bottom: 26px !important; }

/* znaczek nad tytulem */
.za-eyebrow { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 999px; font-size: 13px; font-weight: 500;
    color: var(--acc); background: var(--acc-soft); border: 1px solid var(--acc-line); }
.za-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); animation: zaPing 1.8s infinite; }
@keyframes zaPing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 60%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
.za-grad { background: linear-gradient(100deg, #fff 0%, #c9b8ff 30%, var(--acc) 60%, #fff 90%); background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent; animation: zaShine 6s linear infinite; }
@keyframes zaShine { to { background-position: -200% center; } }

/* komunikaty */
.za-alert { margin-bottom: 20px; padding: 13px 16px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; }
.za-alert-error { color: #ffd1d1; background: rgba(255,107,107,.1); border: 1px solid rgba(255,107,107,.35); }
.za-alert-ok { color: #c9fff4; background: var(--acc-soft); border: 1px solid var(--acc-line); }

/* pola */
.za-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.za-field { display: grid; gap: 8px; margin-bottom: 16px; align-content: start; }
.za-field label { font-size: 14px; font-weight: 500; }
.za-field input { width: 100%; height: 50px; padding: 0 16px; border-radius: 13px; border: 1px solid var(--line-strong); background: rgba(0,0,0,.25); color: #fff;
    font: 15px 'Poppins', sans-serif; outline: none; transition: border-color .3s, box-shadow .3s; }
.za-field input:focus { border-color: var(--acc); box-shadow: 0 0 0 4px var(--acc-soft); }
.za-field input::placeholder { color: #5f6589; }
.za-field input.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(255,107,107,.12); }
.za-ferr { font-size: 12px; color: var(--danger); }
.za-ferr:empty { display: none; }
.za-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.za-forgot { font-size: 12.5px; white-space: nowrap; color: var(--acc); text-decoration: none; }
.za-forgot:hover { text-decoration: underline; }

.za-pass { position: relative; }
.za-pass input { padding-right: 50px; }
.za-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 10px; background: none;
    color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.za-eye svg { width: 18px; height: 18px; }
.za-eye:hover, .za-eye.on { color: var(--acc); }

.za-strength { display: grid; grid-template-columns: repeat(4, 1fr) auto; align-items: center; gap: 5px; margin-top: 2px; }
.za-strength i { height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); transition: background .3s; }
.za-strength span { min-width: 60px; text-align: right; font-size: 11.5px; color: var(--muted); }
.za-strength[data-s="1"] i:nth-child(-n+1) { background: #ff6b6b; }
.za-strength[data-s="2"] i:nth-child(-n+2) { background: #ffab2d; }
.za-strength[data-s="3"] i:nth-child(-n+3) { background: #b8e05a; }
.za-strength[data-s="4"] i:nth-child(-n+4) { background: #28c840; }

.za-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 22px; font-size: 13.5px; color: var(--muted); }
.za-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.za-check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--acc); }
.za-check a { color: var(--acc); }

/* przyciski */
.za-btn { position: relative; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 58px; padding: 0 28px; border: 0; border-radius: 15px;
    font-size: 15.5px; font-weight: 600; cursor: pointer; overflow: hidden; text-decoration: none; transition: transform .25s, box-shadow .25s, opacity .25s;
    color: #06121a !important; background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 80%, #fff), var(--acc));
    box-shadow: 0 14px 40px -12px var(--acc), inset 0 1px 0 rgba(255,255,255,.45); }
.za-btn svg { width: 18px; height: 18px; transition: transform .25s; }
.za-btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: zaSweep 3.5s ease-in-out infinite; }
@keyframes zaSweep { 0%, 60% { left: -60%; } 100% { left: 140%; } }
.za-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 50px -10px var(--acc), inset 0 1px 0 rgba(255,255,255,.45); }
.za-btn:hover svg { transform: translateX(4px); }
.za-btn:disabled { opacity: .75; cursor: progress; transform: none; }

.za-note { display: flex; align-items: center; gap: 10px; margin-top: 18px !important; font-size: 13px; color: var(--muted); }
.za-note svg { width: 16px; height: 16px; flex: none; color: var(--acc); }
.za-code { height: 64px !important; text-align: center; font-size: 28px !important; font-weight: 600; letter-spacing: .45em; padding-left: calc(16px + .45em) !important; }
.za-linkbtn { padding: 0; border: 0; background: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--acc) !important; }
.za-linkbtn:hover { text-decoration: underline; }
.za-alt { margin-top: 22px !important; padding-top: 20px; border-top: 1px solid var(--line); text-align: center; font-size: 14px; color: var(--muted); }
.za-alt a { color: var(--acc); font-weight: 600; text-decoration: none; }
.za-alt a:hover { text-decoration: underline; }

.za-foot { text-align: center; padding: 0 16px 30px; font-size: 12.5px; color: #5f6589; }
.za-foot a { color: inherit; }

@media (max-width: 900px) {
    .za-card { grid-template-columns: 1fr; }
    .za-side { border-right: 0; border-bottom: 1px solid var(--line); padding: 32px 26px; }
    .za-art, .za-perks { display: none; }
}
@media (max-width: 640px) {
    .za-top { padding: 20px 16px; }
    .za-top-link span { display: none; }
    .za-main { padding: 0 16px 50px; }
    .za-form { padding: 30px 22px; }
    .za-fields { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .za-body *, .za-body *::before, .za-body *::after { animation: none !important; transition: none !important; }
}