:root{
  --navy:#0d2146;--navy2:#173564;--ink:#15213b;--muted:#68758d;
  --lav:#8e6cf2;--lav-soft:#f0ebff;--sky:#79bff0;--mint:#57d6bd;
  --coral:#ff7d6f;--amber:#ffc44d;--line:#e7e9f1;--bg:#f8f8f6;
  --red:#c94f59;--red-soft:#fff0f1;--green:#1e9d6d;--green-soft:#e9f9f2;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
button,input{font:inherit}
.page-shell{min-height:100vh;display:grid;place-items:center;padding:28px 16px;background:
 radial-gradient(circle at 15% 10%,rgba(255,125,111,.08),transparent 24%),
 radial-gradient(circle at 85% 15%,rgba(121,191,240,.10),transparent 24%),
 radial-gradient(circle at 50% 100%,rgba(142,108,242,.08),transparent 28%),#fafaf8}
.card{width:min(520px,100%);background:#fff;border:1px solid #e9e6e2;border-radius:30px;padding:36px;box-shadow:0 24px 70px rgba(24,42,84,.10);text-align:center}
.logo{width:112px;height:112px;object-fit:contain}
.eyebrow{margin-top:4px;color:var(--lav);font-weight:900;letter-spacing:.13em;font-size:12px}
h1{font-size:32px;line-height:1.08;margin:12px 0 8px;letter-spacing:-.03em}
h2{font-size:25px;margin:10px 0}
.subtitle{color:var(--muted);margin:0 auto 26px;line-height:1.5;max-width:390px}
.hidden{display:none!important}
.state-card,.message-card{border-radius:16px;padding:18px;text-align:left;margin:12px 0 18px}
.state-card{background:#f6f8fc;display:flex;gap:12px;align-items:center}
.message-card.warning{background:var(--red-soft);color:#7d363d}
.message-card p{margin:6px 0 0;line-height:1.45;font-size:14px}
.spinner{width:22px;height:22px;border:3px solid #dfe3ed;border-top-color:var(--lav);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.form{display:grid;gap:16px;text-align:left}
.form label{display:grid;gap:7px}
.form label>span{font-size:13px;font-weight:800;color:#43506a}
input{width:100%;border:1px solid #dde2eb;border-radius:13px;padding:13px 14px;outline:none;color:var(--ink);background:#fff}
input:focus{border-color:var(--lav);box-shadow:0 0 0 3px rgba(142,108,242,.12)}
.password-wrap{position:relative}
.password-wrap input{padding-right:72px}
.show-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#6c5bd1;font-weight:800;font-size:12px;padding:8px}
.requirements{display:grid;gap:5px;padding:11px 13px;border-radius:12px;background:#f7f8fb;color:#7d8798;font-size:12px}
.requirements .ok{color:var(--green);font-weight:800}
.primary-button,.primary-link{display:block;width:100%;border:0;border-radius:14px;padding:13px 16px;background:linear-gradient(135deg,#9a7cf6,#765fea);color:#fff;text-align:center;text-decoration:none;font-weight:900;box-shadow:0 10px 24px rgba(118,95,234,.20)}
.primary-button:disabled{opacity:.6;cursor:not-allowed}
.status{min-height:24px;margin-top:14px;color:var(--red);font-size:13px}
.status.good{color:var(--green)}
.success-icon{width:64px;height:64px;margin:12px auto;display:grid;place-items:center;border-radius:50%;background:var(--green-soft);color:var(--green);font-size:34px;font-weight:900}
#successState p{color:var(--muted);line-height:1.5}
.trust{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:26px;color:#748097;font-size:12px}
.shield{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--lav-soft);color:var(--lav);font-weight:900}
@media(max-width:560px){.card{padding:28px 20px;border-radius:24px}.logo{width:96px;height:96px}h1{font-size:28px}}