.auth-screen { --cream:#eee5d6; background:#17130f; color:var(--cream); }
.auth-screen > header,.auth-screen > footer { display:none; }
.auth-screen #app,.auth-screen #app.wide { width:100%;max-width:none;min-height:100vh;min-height:100svh;margin:0;padding:40px 20px;display:grid;place-items:center;isolation:isolate;position:relative; }
.auth-screen #app::before { content:"";position:fixed;inset:0;z-index:-2;background:url('/assets/barbershop.jpg') center 56%/cover no-repeat; }
.auth-screen #app::after { content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(12,10,8,.56),rgba(12,10,8,.43)),linear-gradient(0deg,rgba(12,10,8,.58),transparent 45%); }
.auth-screen .login-card { width:min(100%,430px);padding:44px 42px 34px;background:rgba(23,20,16,.93);border:1px solid #a788535b;box-shadow:0 24px 90px #0008;backdrop-filter:blur(12px);border-radius:3px; }
.login-emblem { margin:0 auto 24px;display:grid;place-items:center;width:46px;height:46px;border:1px solid #bda273;border-radius:50%;color:#d5bd91; }
.login-eyebrow { text-align:center;font-size:10px;letter-spacing:3.4px;color:#b9a990;margin-bottom:12px; }
.login-card h1 { margin:0;text-align:center;font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:2px;font-size:30px;line-height:1.25;color:#f5ebd9; }
.login-card h1 span { display:block;font-size:17px;letter-spacing:8px;margin-top:5px; }
.login-card .login-intro { text-align:center;font-size:12px;color:#b1a899;margin:23px 0 28px; }
.login-card .field { margin-bottom:19px; }
.login-card label { display:block;font-size:12px;letter-spacing:.3px;color:#e1d8c8;margin-bottom:9px; }
.login-card input { display:block;width:100%;height:48px;padding:0 14px;border:1px solid #605342;background:#1c1915;color:#fff3df;border-radius:2px;outline:none; }
.login-card input::placeholder { color:#857d72;font-size:12px; }
.login-card input:focus-visible { border-color:#d4b67f;box-shadow:0 0 0 2px #d4b67f22; }
.login-card .login-submit { margin-top:7px;width:100%;height:48px;border:1px solid #d1b47f;background:#c6a875;color:#19140d;font-weight:bold;border-radius:2px;cursor:pointer;letter-spacing:1px; }
.login-card .login-submit:hover { background:#d5b985; }
.login-card .login-submit:disabled { opacity:.6;cursor:wait; }
.login-card .login-error { min-height:20px;font-size:12px;color:#ffb1a1;margin:12px 0 0; }
.login-card .login-foot { border-top:1px solid #a7885330;margin-top:17px;padding-top:19px;text-align:center;font-size:10px;letter-spacing:1.2px;color:#9a8d79; }
.auth-screen .photo-credit { position:fixed;bottom:16px;right:20px;font-size:10px;color:#e5dbc0a6;text-decoration:none; }
.auth-screen .loading { text-align:center;letter-spacing:2px;color:var(--cream); }
@media(max-width:520px){.auth-screen #app{padding:30px 18px}.auth-screen .login-card{padding:36px 27px 26px}.login-card h1{font-size:28px}.auth-screen .photo-credit{bottom:8px;right:12px;font-size:9px}}