:root { color-scheme: dark; --page:#070a12; --card:rgba(20,24,39,.97); --border:rgba(147,166,214,.2); --text:#f8faff; --muted:#b5bdd0; --subtle:#8994ad; --field:#0d1220; --field-border:#39435d; --green:#45ed9a; --red:#ff7189; --amber:#ffbe55; }
* { box-sizing:border-box; }
body { min-width:320px; min-height:100vh; margin:0; color:var(--text); background:radial-gradient(circle at 14% 8%,rgba(55,237,154,.14),transparent 31%),radial-gradient(circle at 88% 92%,rgba(77,124,255,.13),transparent 29%),var(--page); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.account-page { min-height:100vh; display:grid; align-content:center; justify-items:center; gap:22px; padding:32px 18px; }
.account-card { width:min(100%,456px); padding:30px; border:1px solid var(--border); border-radius:24px; background:var(--card); box-shadow:0 24px 64px rgba(0,0,0,.42); }
.account-card--compact { max-width:420px; }
.brand { display:inline-flex; align-items:center; gap:9px; margin-bottom:29px; }
.brand-mark { display:grid; width:38px; height:38px; place-items:center; border-radius:11px; color:#fff; background:linear-gradient(145deg,#176fd1,#0c3c79); font-size:23px; font-weight:900; box-shadow:inset 0 1px 0 rgba(255,255,255,.24); }
.brand strong { display:block; color:var(--text); font-size:20px; line-height:1; letter-spacing:-.7px; }
.brand strong span { color:var(--green); }
.brand small { display:block; margin-top:4px; color:var(--subtle); font-size:8px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; }
.state-icon { display:grid; width:48px; height:48px; margin-bottom:18px; place-items:center; border:1px solid rgba(69,237,154,.34); border-radius:15px; color:var(--green); background:rgba(69,237,154,.11); font-size:24px; font-weight:900; }
.state-icon--success { background:rgba(69,237,154,.15); }
.state-icon--warning { border-color:rgba(255,190,85,.42); color:var(--amber); background:rgba(255,190,85,.12); }
.eyebrow { margin:0 0 8px; color:var(--green); font-size:11px; font-weight:800; letter-spacing:1px; }
h1 { margin:0; color:var(--text); font-size:clamp(27px,6vw,32px); line-height:1.12; letter-spacing:-.9px; }
.intro-copy { margin:10px 0 0; color:var(--muted); font-size:14px; line-height:1.55; }
form { margin-top:26px; }.form-group { margin-bottom:15px; }.confirm-group { margin-top:20px; }
label { display:block; margin-bottom:8px; color:#f2f5fc; font-size:14px; font-weight:700; }.password-field { position:relative; }
input { width:100%; min-height:50px; padding:0 51px 0 14px; border:1px solid var(--field-border); border-radius:12px; outline:none; color:var(--text); background:var(--field); font:inherit; font-size:16px; transition:border-color .16s ease,box-shadow .16s ease,background .16s ease; }
input::placeholder { color:#7f8aa2; } input:hover { border-color:#56627f; } input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(69,237,154,.16); background:#101827; } input[aria-invalid="true"] { border-color:var(--red); }
.toggle-password { position:absolute; top:50%; right:5px; display:grid; width:42px; height:42px; padding:0; place-items:center; transform:translateY(-50%); border:0; border-radius:9px; color:#aeb9cf; background:transparent; cursor:pointer; }.toggle-password:hover { color:var(--green); background:rgba(69,237,154,.1); }
.password-guidance { margin-top:18px; padding:15px; border:1px solid rgba(147,166,214,.17); border-radius:14px; background:rgba(8,12,22,.54); }
.strength-heading { display:flex; justify-content:space-between; gap:16px; color:var(--muted); font-size:12px; font-weight:700; }.strength-heading strong { color:var(--subtle); }
.strength-meter { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; margin:11px 0 13px; }.strength-meter span { height:4px; border-radius:99px; background:#303a50; transition:background .16s ease; }
.password-rules { display:grid; grid-template-columns:1fr 1fr; gap:7px 12px; margin:0; padding:0; list-style:none; color:var(--subtle); font-size:11px; line-height:1.35; }.password-rules li { display:flex; align-items:flex-start; gap:5px; }.password-rules li span { color:#78849c; font-weight:800; }.password-rules li.valid { color:#d4fce6; }.password-rules li.valid span { color:var(--green); }
.password-guidance[data-strength="1"] .strength-meter span:nth-child(-n+1){background:var(--red)}.password-guidance[data-strength="2"] .strength-meter span:nth-child(-n+2){background:#ff9e5b}.password-guidance[data-strength="3"] .strength-meter span:nth-child(-n+3){background:var(--amber)}.password-guidance[data-strength="4"] .strength-meter span:nth-child(-n+4),.password-guidance[data-strength="5"] .strength-meter span{background:var(--green)}.password-guidance[data-strength="1"] .strength-heading strong{color:var(--red)}.password-guidance[data-strength="2"] .strength-heading strong{color:#ffb36f}.password-guidance[data-strength="3"] .strength-heading strong{color:#ffd283}.password-guidance[data-strength="4"] .strength-heading strong,.password-guidance[data-strength="5"] .strength-heading strong{color:var(--green)}
.inline-feedback,.form-message { display:flex; align-items:flex-start; gap:7px; margin:9px 0 0; padding:9px 10px; border-radius:9px; font-size:12px; line-height:1.42; }.inline-feedback--error,.form-message--error { border:1px solid rgba(255,113,137,.25); color:#ffc0cc; background:rgba(255,113,137,.11); }.inline-feedback--success { color:#cbfce0; }.form-message { margin-bottom:14px; }
.primary-button,.primary-link { display:inline-flex; width:100%; min-height:52px; align-items:center; justify-content:center; gap:10px; padding:13px 16px; border:0; border-radius:12px; color:#062817; background:var(--green); box-shadow:0 10px 22px rgba(24,192,117,.17); font:inherit; font-size:15px; font-weight:800; text-align:center; text-decoration:none; cursor:pointer; transition:transform .16s ease,box-shadow .16s ease,background .16s ease; }.primary-button:not(:disabled):hover,.primary-link:hover { background:#69f5af; box-shadow:0 13px 27px rgba(24,192,117,.28); transform:translateY(-1px); }.primary-button:disabled { color:#98a3b7; background:#2a3140; box-shadow:none; cursor:not-allowed; }
.secondary-link { display:block; width:fit-content; margin:21px auto 0; color:#c8d1e2; font-size:13px; font-weight:700; text-decoration:none; }.secondary-link:hover { color:var(--green); text-decoration:underline; text-underline-offset:4px; }.page-footer { margin:0; color:#76819a; font-size:11px; font-weight:700; letter-spacing:.4px; }.hidden { display:none!important; }
.toggle-password:focus-visible,.primary-button:focus-visible,.primary-link:focus-visible,.secondary-link:focus-visible { outline:3px solid rgba(69,237,154,.5); outline-offset:3px; }
@media (max-width:430px){.account-page{align-content:start;padding:18px 12px 24px}.account-card{padding:24px 20px;border-radius:20px}.brand{margin-bottom:24px}.password-rules{grid-template-columns:1fr}}