:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #f4eee5; background: #090e12; }
* { box-sizing: border-box; }
body { display: grid; min-width: 320px; min-height: 100vh; margin: 0; place-items: center; padding: 22px; background: radial-gradient(circle at 78% 0, rgba(148,47,29,.27), transparent 31%), #090e12; }
main { position: relative; width: min(430px, 100%); padding: 34px; border: 1px solid rgba(237,226,211,.15); background: rgba(17,26,32,.94); box-shadow: 0 28px 90px rgba(0,0,0,.42); }
.mark { display: grid; width: 38px; height: 38px; margin: 3px 0 34px 5px; place-items: center; background: #d75b3f; box-shadow: 0 0 28px rgba(215,91,63,.25); transform: rotate(45deg); }
.mark b { font: 20px Georgia, serif; transform: rotate(-45deg); }
.eyebrow { margin: 0 0 12px; color: #ff7657; font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
h1 { margin: 0; font: 500 34px/1.08 Georgia, serif; letter-spacing: -.02em; }
.copy { margin: 13px 0 24px; color: #8c989e; font-size: 13px; line-height: 1.6; }
form { display: grid; gap: 10px; }
label { color: #9ba5a9; font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
input { width: 100%; margin-top: 8px; padding: 13px 14px; border: 1px solid rgba(237,226,211,.17); outline: 0; background: #0b1217; color: #f4eee5; font: inherit; }
input:focus { border-color: rgba(215,91,63,.8); box-shadow: 0 0 0 3px rgba(215,91,63,.1); }
button { min-height: 46px; margin-top: 4px; padding: 13px 16px; border: 0; background: #d75b3f; color: white; cursor: pointer; font: 800 13px Inter, sans-serif; text-align: left; }
button span:last-child { float: right; font-size: 18px; }
button:disabled { cursor: wait; opacity: .6; }
#gate-error { min-height: 18px; margin: 0; color: #ff8b72; font-size: 12px; }
small { display: block; margin-top: 22px; color: #657178; font-size: 10px; line-height: 1.5; }
.gate-lang { position: absolute; top: 18px; right: 18px; display: inline-flex; overflow: hidden; border: 1px solid rgba(237,226,211,.17); background: #0b1217; }
.gate-lang button { display: grid; place-items: center; width: 36px; height: 30px; padding: 0; margin: 0; border: 0; border-left: 1px solid rgba(237,226,211,.12); background: transparent; color: #aab2b5; cursor: pointer; line-height: 1; text-align: center; transition: background .18s, box-shadow .18s; }
.gate-lang img { width: 21px; height: 14px; border-radius: 1px; object-fit: contain; background: #fff; box-shadow: 0 0 0 1px rgba(237,226,211,.18); }
.gate-lang button:first-child { border-left: 0; }
.gate-lang button:hover { background: rgba(255,255,255,.04); }
.gate-lang button.is-active { background: rgba(215,91,63,.14); box-shadow: inset 0 -2px 0 #d75b3f; }
.gate-lang button:focus-visible { outline: 2px solid #ff7657; outline-offset: -2px; }