:root { --bg:#f5f5f7; --surface:rgba(255,255,255,.94); --text:#1d1d1f; --muted:#6e6e73; --faint:#8e8e93; --line:#d2d2d7; --blue:#0071e3; --red:#d92d20; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 50% 0,rgba(255,255,255,.95),transparent 46%),var(--bg); }
button,input { font:inherit; }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:32px 20px; }
.login-card { width:min(100%,390px); padding:34px 34px 28px; background:var(--surface); border:1px solid rgba(0,0,0,.09); border-radius:20px; box-shadow:0 1px 2px rgba(0,0,0,.03),0 22px 70px rgba(0,0,0,.07); backdrop-filter:blur(20px) saturate(180%); animation:enter .36s cubic-bezier(.2,.7,.2,1); }
.brand-mark { width:42px; height:42px; margin-bottom:28px; display:grid; place-items:center; border-radius:12px; color:white; background:linear-gradient(145deg,#151515,#454545); font-size:17px; font-weight:600; box-shadow:inset 0 1px rgba(255,255,255,.2),0 5px 16px rgba(0,0,0,.12); }
.eyebrow { margin:0 0 7px; color:var(--muted); font-size:11px; font-weight:550; letter-spacing:.06em; text-transform:uppercase; }
h1 { margin:0; font-size:30px; line-height:1.1; font-weight:620; letter-spacing:-.045em; }
.subtitle { margin:9px 0 26px; color:var(--muted); font-size:13px; line-height:1.5; }
form { display:grid; gap:16px; }
label > span { display:block; margin:0 0 6px; color:#48484a; font-size:11px; font-weight:550; }
input { width:100%; height:46px; padding:0 13px; border:1px solid var(--line); border-radius:11px; outline:0; background:white; color:var(--text); font-size:14px; transition:border-color .15s ease,box-shadow .15s ease; }
input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,113,227,.12); }
.password-field { position:relative; }
.password-field input { padding-right:60px; }
.password-field button { position:absolute; right:5px; top:5px; height:36px; padding:0 9px; border:0; background:transparent; color:var(--blue); font-size:11px; cursor:pointer; border-radius:7px; }
.submit-button { min-height:46px; margin-top:3px; border:0; border-radius:11px; background:var(--blue); color:white; font-size:13px; font-weight:550; cursor:pointer; transition:transform .15s ease,box-shadow .2s ease,opacity .15s ease; }
.submit-button:hover { transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,113,227,.22); }
.submit-button:active { transform:none; }
.submit-button:disabled { opacity:.6; cursor:wait; }
.form-error { margin:-3px 0 0; padding:9px 10px; border-radius:9px; background:#fff0ef; color:var(--red); font-size:11px; line-height:1.4; }
footer { margin-top:24px; padding-top:18px; border-top:1px solid #e5e5e7; color:var(--faint); font-size:10px; text-align:center; }
.lock { display:inline-block; margin-right:5px; color:#138a4b; font-size:7px; vertical-align:1px; }
:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
@keyframes enter { from { opacity:0; transform:translateY(8px) scale(.99); } to { opacity:1; transform:none; } }
@media (max-width:480px) { .login-shell { padding:16px; }.login-card { padding:28px 22px 24px; border-radius:16px; } }
@media (prefers-reduced-motion:reduce) { * { animation:none!important; transition:none!important; } }