:root { --charcoal:#202020; --gold:#d9c27f; --gold-deep:#a98b46; --ink:#202020; --muted:#6c6963; --line:#ded9ce; --danger:#a73737; }
* { box-sizing:border-box; } html,body { min-height:100%; }
body { margin:0; color:var(--ink); background:#f3f1ec; font-family:Inter,"Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; } button { cursor:pointer; }
.auth-shell { min-height:100vh; display:grid; grid-template-columns:minmax(410px,.92fr) minmax(520px,1.08fr); }
.brand-panel { position:relative; overflow:hidden; display:flex; flex-direction:column; padding:clamp(34px,5vw,72px); color:#fff; background:radial-gradient(circle at 78% 18%,rgba(217,194,127,.13),transparent 26%),linear-gradient(145deg,#171717 0%,#242321 58%,#34312a 100%); }
.brand-panel::before,.brand-panel::after { content:""; position:absolute; pointer-events:none; transform:rotate(-12deg); border:1px solid rgba(217,194,127,.18); }
.brand-panel::before { width:420px; height:160px; right:-230px; bottom:110px; } .brand-panel::after { width:520px; height:210px; right:-310px; bottom:15px; }
.brand-lockup { display:flex; align-items:center; gap:17px; position:relative; z-index:1; }
.brand-lockup img { width:76px; height:76px; object-fit:cover; border-radius:11px; border:1px solid rgba(217,194,127,.4); }
.eyebrow { margin:0 0 6px; color:var(--gold); font-size:11px; font-weight:750; letter-spacing:.15em; text-transform:uppercase; }
.brand-lockup h1 { margin:0; color:#f7edcf; font-size:26px; letter-spacing:-.02em; }
.brand-copy { margin:auto 0; max-width:610px; position:relative; z-index:1; }
.status-pill { display:inline-flex; align-items:center; gap:9px; padding:8px 11px; color:#e9e1cd; border:1px solid rgba(217,194,127,.26); border-radius:999px; font-size:12px; background:rgba(255,255,255,.04); }
.status-pill i { width:8px; height:8px; border-radius:50%; background:#45b86d; box-shadow:0 0 0 4px rgba(69,184,109,.12); }
.brand-copy h2 { max-width:560px; margin:25px 0 17px; font-size:clamp(38px,4.4vw,66px); line-height:1.02; letter-spacing:-.045em; }
.brand-copy p { max-width:570px; margin:0; color:#d0ccc4; font-size:17px; line-height:1.65; }
.trust-list { display:flex; flex-wrap:wrap; gap:9px 18px; margin-bottom:32px; color:#d9d3c8; font-size:12px; position:relative; z-index:1; }
.trust-list span::before { content:"✓"; margin-right:7px; color:var(--gold); font-weight:800; } .brand-foot { margin:0; color:#8f8a81; font-size:11px; position:relative; z-index:1; }
.form-panel { display:grid; place-items:center; padding:44px 32px; background:linear-gradient(150deg,#fbfaf7,#f2efe8); } .form-wrap { width:min(100%,490px); } .mobile-brand { display:none; }
.intro { margin-bottom:26px; } .eyebrow.dark { color:#765e28; } .intro h2 { margin:0 0 9px; font-size:34px; letter-spacing:-.035em; } .intro p { margin:0; color:var(--muted); line-height:1.55; }
.tabs { display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:5px; margin-bottom:23px; border:1px solid var(--line); border-radius:13px; background:#ece9e2; }
.tab { border:0; border-radius:9px; padding:10px 12px; color:#6c6963; background:transparent; font-weight:750; } .tab.active { color:var(--ink); background:#fff; box-shadow:0 3px 10px rgba(32,32,32,.08); }
.auth-form { display:grid; gap:9px; } .auth-form label { margin-top:7px; font-size:12px; color:#4c4944; font-weight:750; }
.auth-form input { width:100%; min-height:48px; padding:12px 14px; border:1px solid #cbc5b9; border-radius:11px; outline:none; background:#fff; color:var(--ink); transition:.16s; }
.auth-form input:focus { border-color:var(--gold-deep); box-shadow:0 0 0 4px rgba(169,139,70,.13); } .auth-form input[aria-invalid="true"] { border-color:var(--danger); box-shadow:0 0 0 4px rgba(167,55,55,.09); }
.label-row { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:7px; } .label-row label { margin:0; }
.text-button,.back-button { border:0; padding:0; color:#765e28; background:transparent; font-size:12px; font-weight:750; }
.password-field { position:relative; } .password-field input { padding-right:74px; } .password-toggle { position:absolute; top:50%; right:10px; transform:translateY(-50%); border:0; padding:7px; color:#6f6b64; background:transparent; font-size:11px; font-weight:750; }
.primary-button { min-height:50px; margin-top:14px; border:1px solid #171717; border-radius:11px; padding:12px 17px; display:flex; justify-content:space-between; align-items:center; color:#fff; background:var(--charcoal); font-weight:780; box-shadow:0 8px 20px rgba(32,32,32,.13); }
.primary-button:hover { background:#2b2926; } .primary-button:disabled { cursor:wait; opacity:.65; } .field-help { margin:-2px 0 2px; color:var(--muted); font-size:11px; }
.reset-form h3 { margin:10px 0 0; font-size:24px; } .reset-form>p { margin:0 0 7px; color:var(--muted); line-height:1.55; font-size:13px; } .back-button { justify-self:start; margin-bottom:10px; }
.notice { margin:0 0 19px; padding:12px 14px; border:1px solid #e8d29c; border-radius:11px; color:#72551d; background:#fff8e8; font-size:13px; line-height:1.45; }
.notice.success { border-color:#b9ddc8; color:#176a38; background:#eff8f2; } .notice.error { border-color:#e7bcbc; color:#912d2d; background:#fff1f1; } .notice.neutral { border-color:#d8d3c9; color:#605d57; background:#f6f4ef; }
.privacy-note { margin:24px 0 0; color:#8a867e; font-size:10px; line-height:1.55; } [hidden] { display:none!important; }
@media(max-width:900px) { .auth-shell { grid-template-columns:1fr; } .brand-panel { display:none; } .form-panel { min-height:100vh; padding:30px 20px; } .mobile-brand { display:flex; align-items:center; gap:12px; margin-bottom:42px; } .mobile-brand img { width:46px; height:46px; object-fit:cover; border-radius:8px; } .mobile-brand strong { color:#443a24; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }