:root { --ink:#151917; --muted:#717c76; --line:#dfe5e1; --sage:#263a32; --bronze:#9a7548; --canvas:#f3f5f3; }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; display:grid; place-items:center; padding:28px; color:var(--ink); background:linear-gradient(145deg,#f8faf8,#edf1ee); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.auth-shell { display:grid; grid-template-columns:minmax(300px,430px) minmax(310px,520px); width:min(950px,100%); min-height:590px; border:1px solid var(--line); border-radius:15px; background:#fff; box-shadow:0 30px 80px rgba(27,42,34,.14); overflow:hidden; }
.auth-brand { position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:38px; color:#fff; background:#18271f; overflow:hidden; }
.auth-brand::before { content:""; position:absolute; width:320px; height:320px; right:-155px; top:-140px; border:1px solid rgba(255,255,255,.14); border-radius:50%; box-shadow:0 0 0 55px rgba(255,255,255,.035),0 0 0 110px rgba(255,255,255,.025); }
.wordmark { position:relative; z-index:1; display:flex; align-items:center; width:min(285px,100%); min-height:54px; }
.wordmark img { display:block; width:100%; height:auto; object-fit:contain; }
.mark { position:relative; display:grid; place-items:center; width:38px; height:38px; color:#18271f; background:#fff; font:22px Georgia,serif; overflow:hidden; }
.mark::after { content:""; position:absolute; width:24px; height:24px; right:-11px; bottom:-11px; border-radius:50%; background:var(--bronze); }
.mark span { position:relative; z-index:1; }
.wordmark strong { font:500 23px Georgia,serif; }
.wordmark small { display:block; margin-top:4px; color:rgba(255,255,255,.58); font-size:8px; font-weight:700; letter-spacing:.2em; }
.brand-message { position:relative; z-index:1; }
.brand-message span { display:block; margin-bottom:12px; color:#cdb794; font-size:9px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.brand-message h1 { max-width:330px; margin:0 0 15px; font:400 38px/1.08 Georgia,serif; letter-spacing:-.035em; }
.brand-message p { max-width:325px; margin:0; color:rgba(255,255,255,.62); font-size:11px; line-height:1.75; }
.brand-foot { position:relative; z-index:1; display:flex; align-items:center; gap:7px; color:rgba(255,255,255,.48); font-size:9px; }
.brand-foot::before { content:""; width:6px; height:6px; border-radius:50%; background:#81a694; box-shadow:0 0 0 4px rgba(129,166,148,.12); }
.auth-main { display:flex; align-items:center; padding:52px clamp(30px,6vw,68px); }
.auth-content { width:100%; }
.eyebrow { display:block; margin-bottom:9px; color:var(--bronze); font-size:9px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.auth-content h2 { margin:0 0 8px; font-size:27px; font-weight:620; letter-spacing:-.035em; }
.intro { margin:0 0 25px; color:var(--muted); font-size:11.5px; line-height:1.65; }
.field { display:grid; gap:6px; margin-bottom:14px; }
.field label { color:#414b46; font-size:10px; font-weight:650; }
.field input { width:100%; height:42px; padding:0 12px; border:1px solid var(--line); border-radius:7px; outline:none; color:var(--ink); background:#fff; font-size:12px; }
.field input:focus { border-color:#799083; box-shadow:0 0 0 3px rgba(38,58,50,.09); }
.field small { color:var(--muted); font-size:9px; line-height:1.5; }
.reference-input { display:grid; grid-template-columns:auto 1fr; direction:ltr; }
.reference-input span { display:grid; place-items:center; min-width:54px; height:42px; padding:0 12px; border:1px solid var(--line); border-right:0; border-radius:7px 0 0 7px; color:#fff; background:var(--sage); font-size:12px; font-weight:750; letter-spacing:.08em; }
.reference-input input { border-radius:0 7px 7px 0; letter-spacing:.08em; }
.reference-input:focus-within { border-radius:7px; box-shadow:0 0 0 3px rgba(38,58,50,.09); }
.reference-input:focus-within input { border-color:#799083; box-shadow:none; }
.reference-input:focus-within span { border-color:#799083; }
.fixed-reference { display:grid; place-items:center; height:42px; border:1px solid #799083; border-radius:7px; color:#fff; background:var(--sage); font-size:14px; font-weight:800; letter-spacing:.16em; }
.submit { width:100%; height:42px; margin-top:7px; border:0; border-radius:7px; color:#fff; background:var(--sage); font-size:11.5px; font-weight:680; cursor:pointer; box-shadow:0 5px 15px rgba(38,58,50,.15); }
.submit:hover { background:#1d3027; }
.error { margin:0 0 17px; padding:10px 11px; border:1px solid #f0c9c5; border-radius:7px; color:#9d3632; background:#fff3f1; font-size:10px; line-height:1.5; }
.notice { margin-top:17px; padding-top:15px; border-top:1px solid var(--line); color:var(--muted); font-size:9.5px; line-height:1.6; }
.notice strong { color:#4b5650; }
@media (max-width:760px) { body{padding:0;background:#fff}.auth-shell{grid-template-columns:1fr;min-height:100vh;border:0;border-radius:0;box-shadow:none}.auth-brand{min-height:235px;padding:27px}.brand-message h1{font-size:30px}.brand-message p,.brand-foot{display:none}.auth-main{padding:36px 25px 45px} }