:root { color-scheme: light; --forest:#183f2b; --paper:#f4f6f1; --ink:#132119; --muted:#718078; --gold:#f5c94e; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body { margin: 0; background: radial-gradient(circle at 85% 10%, #fff2c5 0, transparent 29%), var(--paper); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif; }
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 28px; }
.auth-card { width: min(980px, 100%); min-height: 560px; border: 1px solid #d8dfd6; border-radius: 30px; background: rgba(255,255,255,.94); box-shadow: 0 30px 90px rgba(24,63,43,.14); display: grid; grid-template-columns: minmax(0,1fr) 330px; grid-template-rows: auto 1fr; gap: 26px 54px; padding: 38px 44px 44px; }
.auth-brand { grid-column: 1/-1; display:flex; align-items:center; gap:12px; }
.auth-brand i { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:var(--forest); color:white; font-style:normal; font-weight:900; }
.auth-brand span { display:grid; gap:2px; }
.auth-brand strong { font-size:17px; }
.auth-brand small, .auth-foot { color:var(--muted); }
.auth-copy { align-self:center; }
.auth-copy > span { color:#2d7a52; font-size:12px; font-weight:900; letter-spacing:.12em; }
.auth-copy h1 { margin:14px 0 18px; font-size:clamp(38px,5vw,62px); line-height:1.08; letter-spacing:-.055em; }
.auth-copy p { max-width:540px; color:#637168; line-height:1.8; font-size:15px; }
.auth-copy ul { margin:24px 0 0; padding:0; list-style:none; display:grid; gap:10px; color:#395144; font-size:14px; }
.auth-copy li::before { content:"✓"; display:inline-grid; place-items:center; width:21px; height:21px; margin-right:9px; border-radius:50%; background:#e6f3e9; color:#27724c; font-weight:900; }
.qr-box { align-self:center; min-height:390px; border-radius:24px; background:#fbf7e8; border:1px solid #eadca5; padding:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.qr-placeholder, #login-qr { width:230px; height:230px; border-radius:18px; background:white; border:1px solid #e2e5dc; }
.qr-placeholder { display:grid; place-items:center; align-content:center; gap:12px; color:#859188; }
.qr-placeholder b { font-size:48px; color:#c39421; }
#login-qr { object-fit:contain; padding:8px; }
.qr-box strong { margin-top:18px; font-size:17px; }
.qr-box small { margin-top:7px; min-height:36px; color:#7b857f; line-height:1.5; }
.qr-box button { width:100%; margin-top:16px; border:0; border-radius:13px; padding:14px 18px; background:var(--forest); color:white; font-weight:900; cursor:pointer; }
.qr-box button:disabled { opacity:.56; cursor:wait; }
.qr-box.error { border-color:#e7b4ae; background:#fff3f1; }
.auth-foot { position:fixed; bottom:14px; margin:0; font-size:11px; }
@media (max-width:760px) { .auth-shell{padding:14px}.auth-card{grid-template-columns:1fr;padding:25px;gap:18px}.auth-copy h1{font-size:40px}.auth-copy p,.auth-copy ul{display:none}.qr-box{min-height:360px}.auth-brand{grid-column:auto}.auth-foot{position:static;margin-top:12px;text-align:center} }