:root { color-scheme: dark; --bg: #0c0c0e; --panel: #131316; --line: #36363c; --muted: #a39f9b; --text: #f2eee4; --red: #e84642; --red-soft: #552927; --green: #7bd194; }
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: Arial, Helvetica, sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
.login-shell { width: min(1120px, calc(100% - 48px)); min-height: min(720px, calc(100vh - 48px)); margin: max(24px, calc((100vh - 720px) / 2)) auto; display: grid; grid-template-columns: 1.08fr 1fr; border: 1px solid var(--line); box-shadow: 0 30px 90px #0008; }
.identity-panel { display: flex; flex-direction: column; justify-content: space-between; min-height: 670px; padding: 32px 38px 26px; border-right: 1px solid var(--line); background: radial-gradient(circle at 67% 56%, #27201f 0, transparent 48%), linear-gradient(145deg, #151316, #0d0d0f 72%); overflow: hidden; }
.brand { display: flex; align-items: center; gap: 14px; font: 700 17px/1.2 Consolas, 'Courier New', monospace; letter-spacing: .13em; }
.brand-mark { color: var(--red); font-size: 30px; line-height: .7; }
.eyebrow, .identity-footer, .form-topline, .form-kicker, .form-bottomline { font: 700 10px/1.4 Consolas, 'Courier New', monospace; letter-spacing: .16em; }
.eyebrow { color: #bcaaa2; }
.identity-body { position: relative; z-index: 1; padding: 28px 0 44px; }
.identity-glyph { position: relative; width: min(100%, 460px); height: 220px; margin: 24px 0 14px; }
.identity-glyph::before, .identity-glyph::after, .identity-glyph span { content: ''; position: absolute; border: 1px solid #7f3d3a; transform: rotate(-32deg); }
.identity-glyph::before { width: 194px; height: 194px; left: 70px; top: 14px; border-color: #904341; box-shadow: 0 0 60px #e8464218; }
.identity-glyph::after { width: 128px; height: 128px; left: 103px; top: 47px; border-color: var(--red); }
.identity-glyph span:nth-child(1) { width: 260px; height: 1px; left: 25px; top: 108px; background: #73332f; border: 0; }
.identity-glyph span:nth-child(2) { width: 1px; height: 260px; left: 167px; top: -21px; background: #73332f; border: 0; }
.identity-glyph span:nth-child(3) { width: 14px; height: 14px; left: 160px; top: 101px; background: var(--red); border-color: var(--red); box-shadow: 0 0 30px #e8464288; }
.identity-body h1 { margin: 0; font-size: clamp(38px, 4.1vw, 57px); line-height: .98; letter-spacing: -.055em; text-transform: uppercase; }
.identity-body h1 em { color: var(--red); font-style: normal; }
.identity-copy { max-width: 370px; margin: 21px 0 0; color: #c4beb8; font-size: 14px; line-height: 1.55; }
.identity-footer { display: flex; align-items: center; gap: 10px; color: #aaa39e; }
.signal-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px #7bd1948c; }
.footer-index { margin-left: auto; color: #716b6b; }
.form-panel { display: flex; flex-direction: column; justify-content: space-between; padding: 30px 39px 26px; background: var(--panel); }
.form-topline, .form-bottomline { display: flex; justify-content: space-between; color: #8a8582; }
.form-topline span:first-child { color: var(--text); }
.form-content { width: min(100%, 370px); margin: 40px auto; }
.form-kicker { display: flex; align-items: center; gap: 10px; color: var(--red); }
.kicker-line { width: 24px; height: 1px; background: var(--red); }
.form-content h2 { margin: 21px 0 0; font-size: clamp(34px, 3.2vw, 47px); line-height: 1.05; letter-spacing: -.045em; }
.form-intro { margin: 15px 0 35px; color: #b9b3ae; line-height: 1.55; font-size: 14px; }
form { display: flex; flex-direction: column; }
label, .password-label button { font-size: 12px; font-weight: 700; }
label { margin-bottom: 10px; }
input { width: 100%; height: 50px; margin: 0 0 27px; padding: 0 15px; color: var(--text); background: #101012; border: 1px solid #49464a; border-radius: 0; outline: none; transition: border-color .15s, box-shadow .15s; }
input:hover { border-color: #757071; }
input:focus { border-color: var(--red); box-shadow: 0 0 0 2px #e8464233; }
.password-label { display: flex; align-items: baseline; justify-content: space-between; }
.password-label button { padding: 0; border: 0; color: #c7a8a4; background: transparent; }
.password-label button:hover { color: var(--text); }
.login-submit { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 54px; margin-top: 1px; padding: 0 18px; border: 1px solid var(--red); color: #150c0c; background: var(--red); font-size: 14px; font-weight: 800; transition: background .15s, transform .15s; }
.login-submit:hover { background: #f76560; transform: translateY(-1px); }
.login-submit:disabled { opacity: .65; cursor: wait; transform: none; }
.login-submit span:last-child { font-size: 22px; line-height: 1; }
.login-error { margin: -7px 0 16px; padding: 11px 12px; border-left: 2px solid var(--red); color: #ffd2d0; background: var(--red-soft); font-size: 12px; line-height: 1.4; }
.form-footnote { display: flex; gap: 9px; margin: 22px 0 0; color: #8f8985; font-size: 11px; line-height: 1.45; }
.lock-icon { color: var(--green); }
@media (max-width: 760px) { .login-shell { width: 100%; min-height: 100vh; margin: 0; display: flex; flex-direction: column; border: 0; } .identity-panel { min-height: 0; padding: 24px; border-right: 0; border-bottom: 1px solid var(--line); } .identity-body { padding: 34px 0 10px; } .identity-glyph, .identity-copy, .identity-footer { display: none; } .identity-body h1 { font-size: 31px; } .form-panel { flex: 1; min-height: 530px; padding: 24px; } .form-content { margin: 36px auto; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }