:root { color-scheme:light; --ink:#222327; --muted:#62666d; --orange:#f47730; --line:#dedee3; }
* { box-sizing:border-box; }
body { margin:0; background:#f8f8fa; color:var(--ink); font:15px/1.6 -apple-system,BlinkMacSystemFont,Manrope,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; }
.auth-layout { min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:1.12fr 1fr; padding:16px; gap:16px; }
.auth-story { display:flex; flex-direction:column; justify-content:space-between; min-width:0; background:radial-gradient(ellipse at 45% 100%,#ffc79c 0,transparent 60%),#f0eeeb; border-radius:22px; padding:40px 48px 24px; overflow:hidden; }
.auth-wordmark { font-weight:750; font-size:25px; letter-spacing:-1px; display:flex; gap:16px; align-items:center; }
.auth-wordmark span { font-size:10px; font-weight:500; letter-spacing:2px; color:#626264; border-left:1px solid #c5c4c2; padding-left:16px; }
.auth-intro { padding:64px 0 32px; }
.auth-eyebrow { font-size:10px; letter-spacing:1.7px; color:#8b481f; font-weight:650; }
h1 { font-size:clamp(40px,4.5vw,72px); line-height:1.08; font-weight:600; letter-spacing:-3px; margin:20px 0 24px; }
h1 em { font-style:normal; color:#bd4b0c; }
.auth-intro > p:not(.auth-eyebrow) { font-size:16px; line-height:1.8; color:#5c5855; }
.auth-film { display:flex; gap:12px; align-items:center; padding:40px 0 20px; transform:rotate(-6deg); }
.auth-frame { flex:1; aspect-ratio:3/4; border:5px solid #ffffffbd; border-radius:14px; box-shadow:0 15px 30px #4a2d191c; position:relative; overflow:hidden; }
.auth-frame span { position:absolute; bottom:10px; left:10px; color:#fff; font-size:10px; letter-spacing:.3px; }
.frame-one { background:radial-gradient(circle at 70% 30%,#ffdab7 0 12%,transparent 13%),linear-gradient(150deg,#deb593 40%,#986141 41%,#493726); }
.frame-two { margin-top:-26px; background:radial-gradient(ellipse at 55% 70%,#252522 0 15%,transparent 16%),linear-gradient(160deg,#f4c69c,#d18249 60%,#583e2a); }
.frame-three { background:linear-gradient(75deg,transparent 40%,#ffdeaf77 41% 58%,transparent 59%),linear-gradient(155deg,#64594b,#b39474); }
.auth-bottom { font-size:12px; color:#6d5749; }
.auth-form-area { display:grid; place-items:center; padding:48px 24px; }
.card { width:100%; max-width:360px; }
.logo { display:flex; align-items:center; gap:9px; margin-bottom:38px; }
.brand { font-size:20px; font-weight:700; letter-spacing:-.6px; margin:0; }
h2 { font-size:28px; letter-spacing:-.8px; font-weight:600; margin:0 0 8px; }
.sub { color:var(--muted); margin:0 0 32px; font-size:14px; }
label { display:block; font-size:13px; font-weight:550; margin-bottom:8px; }
label.second { margin-top:20px; }
input { width:100%; height:48px; border:1px solid var(--line); border-radius:10px; background:#fff; padding:0 14px; font:inherit; color:var(--ink); }
input:focus { outline:3px solid #f4773025; border-color:#c45b21; }
button { width:100%; height:48px; margin-top:26px; border:0; border-radius:10px; background:var(--orange); color:#26170c; font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; }
button span { float:right; margin-right:16px; } button:hover { background:#ff8845; }
:focus-visible { outline:3px solid #b84c12; outline-offset:3px; }
.err,.tg-note { padding:12px; border-radius:8px; margin:0 0 18px; }
.err { background:#fff0ed; color:#a12e21; } .tg-note { background:#fff0e5; }
.or { display:flex; align-items:center; gap:12px; margin:22px 0 0; color:var(--muted); font-size:12px; }
.or::before,.or::after { content:''; flex:1; height:1px; background:var(--line); }
.tg-btn { display:flex; justify-content:center; align-items:center; min-height:48px; margin-top:14px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); text-decoration:none; font-weight:500; }
.tg-btn.is-wait { opacity:.6; pointer-events:none; }
.tg-status,.foot,.legal { font-size:12px; text-align:center; color:var(--muted); margin-top:18px; }
a { color:#b54a10; }
@media(max-width:800px) { .auth-layout { grid-template-columns:1fr; padding:0; gap:0; } .auth-story { padding:24px; border-radius:0; } .auth-intro { padding:24px 0 8px; } h1 { font-size:42px; letter-spacing:-1.7px; margin:12px 0; } .auth-film,.auth-bottom,.auth-wordmark span { display:none; } .auth-intro > p:not(.auth-eyebrow) { font-size:14px; } .auth-form-area { padding:32px 24px 48px; } .logo { display:none; } }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; } }
.hint { margin:6px 0 0; font-size:12px; color:var(--muted); }
.sub b { color:var(--ink); }