* { box-sizing:border-box; }
body { margin:0; min-height:100vh; min-height:100svh; background:radial-gradient(circle at 85% 10%,#ef510526,transparent 40%),radial-gradient(circle at 0 90%,#ffffff0a,transparent 35%),linear-gradient(135deg,#291e18,#49352c 50%,#000); color:#fff; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.login-page { width:min(440px,100%); margin:auto; padding:36px 20px max(24px,env(safe-area-inset-bottom)); }
.login-brand { text-align:center; margin-bottom:28px; }
.login-brand img { width:100px; height:100px; border-radius:50%; object-fit:cover; display:block; margin:0 auto 16px; }
.login-brand h1 { margin:0; font-size:34px; font-weight:800; letter-spacing:-.8px; }
.login-brand h1 span { color:#ef5105; }
.login-tagline { font-size:10px; letter-spacing:2.4px; color:#ffffffbd; margin:8px 0 0; white-space:nowrap; }
.login-card { border-radius:28px; border:1px solid #ffffff1a; background:#ffffff08; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); padding:26px; box-shadow:0 16px 28px #00000047; }
.login-card h2 { font-size:24px; font-weight:500; color:#f5eddbdf; margin:0 0 7px; }
.login-description { color:#ffffff94; font-size:14px; margin:0 0 24px; line-height:1.5; }
.login-field { margin-bottom:16px; }
.login-field label { display:block; font-size:13px; color:#ffffffa8; margin-bottom:8px; }
.login-input { display:flex; align-items:center; min-height:52px; gap:12px; border-radius:14px; border:1px solid #ffffff1a; background:#ffffff08; padding:0 14px; }
.login-input > i { color:#ffffff73; font-size:16px; width:18px; flex-shrink:0; }
.login-input input { width:100%; min-width:0; border:0; outline:none; box-shadow:none; background:transparent; font-size:16px; color:#fff; padding:15px 0; -webkit-appearance:none; appearance:none; }
.login-input:focus-within { border-color:#ef510580; }
.login-input input::placeholder { color:#ffffff60; }
.login-input input:-webkit-autofill { -webkit-text-fill-color:#fff; box-shadow:0 0 0 100px #49382f inset; caret-color:white; }
.login-eye { background:none; border:0; color:#ffffff85; cursor:pointer; width:30px; min-height:44px; padding:0; font-size:16px; }
.login-submit { width:100%; min-height:54px; border:0; border-radius:16px; background:linear-gradient(90deg,#ef5105,#c44000); color:white; font-size:16px; font-weight:600; cursor:pointer; margin-top:6px; }
.login-submit i { margin-right:8px; }
.login-submit:disabled { opacity:.6; cursor:wait; }
.login-error,.login-message { color:#ffaaa2; font-size:13px; line-height:1.5; margin:8px 0 14px; }
.errorlist { color:#ffaaa2; list-style:none; padding:0; margin:6px 0; font-size:13px; }
.login-divider { display:flex; align-items:center; gap:12px; font-size:10px; font-weight:600; letter-spacing:1.2px; color:#ffffff57; margin:24px 0 20px; }
.login-divider::before,.login-divider::after { content:""; height:1px; background:#ffffff1f; flex:1; }
.login-links { text-align:center; font-size:14px; color:#ffffff85; }
.login-links p { margin:14px 0 0; }
.login-links a { color:#ef5105; text-decoration:none; }
.login-links a:hover { text-decoration:underline; }
.login-footer { color:#ffffff61; text-align:center; font-size:12px; margin:22px 0 0; }
button:focus-visible,a:focus-visible { outline:2px solid #fff7e3; outline-offset:4px; }
@media(min-height:850px) { .login-page { padding-top:64px; } }
@media(max-width:359px) { .login-page { padding:24px 14px; } .login-card { padding:22px 18px; } .login-brand h1 { font-size:30px; } .login-tagline { font-size:9px; letter-spacing:1.7px; } }
/* Colors matched to the iOS login reference. */
body { background:radial-gradient(ellipse at 100% 30%,#713d2280,transparent 65%),linear-gradient(145deg,#211b18 0%,#382a23 47%,#050403 100%); }
.login-card { background:linear-gradient(135deg,#453b35e8,#292726eb); border-color:#ffffff14; }
.login-card h2 { color:#e8e2cf; }
.login-description { color:#aaa6a3; }
.login-field label { color:#c1bebb; }
.login-input { background:linear-gradient(135deg,#302b27,#252321); border-color:#ffffff14; }
.login-input > i { color:#ef5105; }
.login-input input::placeholder { color:#777574; }
.login-eye { color:#aaa7a4; }
.login-submit { background:linear-gradient(90deg,#ef5105,#c44000); }
.login-submit:disabled { background:linear-gradient(90deg,#78462c,#63321f); color:#b89c8b; opacity:.65; }
.login-footer { color:#8d8985; }
#webLoginForm:has(input:invalid) .login-submit { background:linear-gradient(90deg,#78462c,#63321f); color:#b89c8b; }
/* Replace login content with the iOS waiting screen during submission. */
.login-wait { display:none; position:fixed; inset:0; align-items:center; justify-content:center; flex-direction:column; gap:20px; }
.login-wait img { width:92px; height:92px; border-radius:50%; object-fit:cover; }
.login-wait-dots { display:flex; gap:10px; height:20px; align-items:center; }
.login-wait-dots span { width:12px; height:12px; background:#ef5105; border-radius:50%; animation:loginDotBounce 1.05s ease-in-out infinite; animation-delay:-.70s; will-change:transform; }
.login-wait-dots span:nth-child(2) { animation-delay:-.35s; }
.login-wait-dots span:nth-child(3) { animation-delay:0s; }
body.login-submitting .login-page { display:none; }
body.login-submitting .login-wait { display:flex; animation:loginWaitFade .18s ease-out; }
@keyframes loginDotBounce { 0%,60%,100% { transform:translate3d(0,0,0); } 30% { transform:translate3d(0,-8px,0); } }
@keyframes loginWaitFade { from { opacity:0; } to { opacity:1; } }
@media(prefers-reduced-motion:reduce) { .login-wait-dots span,body.login-submitting .login-wait { animation:none; } }