:root {
    --bg: #061014;
    --panel: #0d1d22;
    --line: #29484f;
    --text: #edfbfb;
    --muted: #9db7bb;
    --primary: #0fe0dc;
    --primary-dark: #62f3eb;
    --danger: #ff8590;
    --shadow: 0 28px 70px rgba(0, 0, 0, .34);
}
body {
    background: radial-gradient(circle at 15% 8%, rgba(15, 224, 220, .16), transparent 35%),
                radial-gradient(circle at 85% 90%, rgba(7, 105, 121, .2), transparent 42%), var(--bg);
}
.login-shell { width: min(100%, 1020px); min-height: 570px; border-radius: 15px; overflow: hidden; border-color: var(--line); }
.brand {
    background: radial-gradient(circle at 85% 20%, rgba(15, 224, 220, .15), transparent 40%),
                linear-gradient(145deg, #102f35, #071a1e 75%);
    border-right: 1px solid #276268;
}
.brand-logo { object-fit: contain; margin-bottom: 31px; }
.brand-kicker { margin-bottom: 14px; color: #70e5e0; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.brand h1 { font-size: clamp(30px, 3vw, 39px); }
.brand p { color: #b2cdd0; }
.brand-list { border-top: 1px solid #31565a; padding-top: 20px; color: #c7dfe0; }
.mark { width: 32px; height: 26px; border: 0; color: #68dedb; font-size: 11px; font-weight: 800; }
.login-panel { background: var(--panel); }
.login-panel h2 { color: var(--text); }
.login-panel .subtitle, .back-link { color: var(--muted); }
label { color: #c3d9dc; }
input { border-radius: 7px; background: #08181c; color: var(--text); border-color: #315158; }
input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(15, 224, 220, .14); }
button { border-radius: 7px; color: #082024; }
button:hover { background: var(--primary-dark); }
button:focus-visible, input:focus-visible, .back-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.back-link:hover { color: var(--primary); }
@media (max-width: 780px) {
    .brand { border-right: 0; border-bottom: 1px solid #276268; }
    .brand-logo { margin-bottom: 15px; }
    .brand-list { display: none; }
}