:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; overflow: hidden; background: #06110e; font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
.gate { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 44%, rgba(19,83,61,.25), transparent 38%); }
.gate-form { width: min(360px, 100%); display: grid; grid-template-columns: 1fr 62px; gap: 10px; }
.gate-form input { min-width: 0; height: 58px; padding: 0 19px; border: 1px solid rgba(232,200,115,.25); border-radius: 14px; outline: none; color: #f4f7f5; background: rgba(0,0,0,.23); font-size: 1rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.gate-form input::placeholder { color: #73857d; letter-spacing: .12em; font-weight: 500; }
.gate-form input:focus { border-color: #d8b961; box-shadow: 0 0 0 4px rgba(216,185,97,.08), 0 20px 50px rgba(0,0,0,.25); }
.gate-form button { height: 58px; border: 0; border-radius: 14px; color: #13231c; background: linear-gradient(135deg,#f0d887,#b78c39); font-weight: 900; cursor: pointer; }
.gate-form button:disabled { opacity: .55; cursor: wait; }
.gate-form p { grid-column: 1/-1; min-height: 21px; margin: 2px 0 0; color: #ff8489; font-size: .82rem; text-align: center; }
.auth-shell { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 35%, rgba(19,83,61,.28), transparent 42%); }
.auth-card { width: min(390px,100%); padding: 34px; border: 1px solid rgba(232,200,115,.18); border-radius: 23px; background: rgba(7,25,19,.86); box-shadow: 0 30px 80px rgba(0,0,0,.38); }
.auth-mark { width: 50px; height: 50px; margin: -60px auto 24px; display: grid; place-items: center; border-radius: 15px; color: #14231d; background: linear-gradient(135deg,#f0d887,#b78c39); font-size: 1.6rem; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 24px; padding: 4px; border-radius: 12px; background: rgba(0,0,0,.25); }
.auth-tabs button { height: 40px; border: 0; border-radius: 9px; color: #80938a; background: transparent; font-weight: 800; cursor: pointer; }
.auth-tabs button.active { color: #f3e1aa; background: rgba(232,200,115,.1); }
.auth-form, .auth-form .field { display: grid; gap: 8px; }
.auth-form label { margin-top: 6px; color: #aebfb6; font-size: .78rem; }
.auth-form input { width: 100%; height: 50px; padding: 0 15px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; outline: none; color: white; background: rgba(0,0,0,.2); font-size: .95rem; }
.auth-form input:focus { border-color: #d8b961; box-shadow: 0 0 0 4px rgba(216,185,97,.08); }
.auth-form > button { height: 52px; margin-top: 13px; border: 0; border-radius: 12px; color: #13231c; background: linear-gradient(135deg,#f0d887,#b78c39); font-weight: 900; cursor: pointer; }
.auth-form > button:disabled { opacity: .55; cursor: wait; }
.auth-form p { min-height: 21px; margin: 3px 0 0; color: #ff8489; font-size: .82rem; text-align: center; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }