:root { --login-navy: #0a1525; --login-border: #e2e7ed; }
* { box-sizing: border-box; }
body.login-body { margin: 0; min-height: 100vh; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #17202a; background: #f4f6f8; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 44%) 1fr; }
.login-panel { background: #fff; display: flex; flex-direction: column; padding: 36px clamp(28px,5vw,76px); border-right: 1px solid var(--login-border); }
.login-brand { display: flex; align-items: center; gap: 11px; }
.login-brand .mark { width: 39px; height: 39px; border-radius: 10px; background: #0c1726; color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 12px; }
.login-brand strong { font-size: 14px; display: block; }
.login-brand span { color: #8c96a1; font-size: 9px; margin-top: 2px; display: block; }
.login-content { width: min(100%, 390px); margin: auto; }
.login-eyebrow { color: #617086; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; margin-bottom: 10px; }
.login-content h1 { font-size: 27px; letter-spacing: -.8px; line-height: 1.15; margin: 0; }
.login-content > p { color: #78838f; font-size: 11px; line-height: 1.55; margin: 10px 0 28px; }
.login-form { display: flex; flex-direction: column; gap: 15px; }
.login-field { display: flex; flex-direction: column; gap: 7px; }
.login-field label { color: #5e6975; font-size: 9px; font-weight: 750; }
.login-input-wrap { height: 44px; border: 1px solid #d9dfe6; border-radius: 10px; display: flex; align-items: center; padding: 0 12px; background: #fff; transition: .15s ease; }
.login-input-wrap:focus-within { border-color: #8fb1e5; box-shadow: 0 0 0 3px #eff5ff; }
.login-input-wrap input { border: 0; outline: none; flex: 1; font-size: 11px; color: #2f3b48; background: transparent; min-width: 0; }
.login-input-wrap svg { width: 17px; height: 17px; fill: none; stroke: #8793a0; stroke-width: 1.7; }
.login-submit { height: 44px; border: 0; border-radius: 10px; background: #0e1c2f; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .15px; margin-top: 4px; box-shadow: 0 7px 18px rgba(10,21,37,.12); }
.login-submit:hover { background: #091525; }
.login-security { display: flex; align-items: center; gap: 8px; color: #8a95a0; font-size: 8px; justify-content: center; margin-top: 17px; }
.login-security svg { width: 13px; height: 13px; fill: none; stroke: #6d7a88; stroke-width: 1.7; }
.login-footer { color: #9ca4ad; font-size: 8px; display: flex; justify-content: space-between; gap: 14px; }
.login-visual { background: linear-gradient(145deg, #0a1423, #102238 65%, #0c1929); color: #fff; padding: 52px clamp(32px,6vw,92px); display: flex; align-items: center; position: relative; overflow: hidden; }
.login-visual::before { content: ''; position: absolute; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(70,121,190,.14), transparent 67%); top: -170px; right: -130px; }
.login-visual::after { content: ''; position: absolute; inset: 0; opacity: .08; background-image: linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom right, black, transparent 70%); }
.visual-content { position: relative; z-index: 1; max-width: 550px; }
.visual-kicker { font-size: 9px; font-weight: 800; letter-spacing: 1.2px; color: #7792b4; text-transform: uppercase; }
.visual-content h2 { font-size: clamp(28px,3vw,42px); line-height: 1.12; letter-spacing: -1.3px; margin: 14px 0; }
.visual-content > p { color: #8394aa; font-size: 11px; line-height: 1.7; max-width: 460px; }
.visual-status { margin-top: 34px; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.visual-card { padding: 14px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); border-radius: 12px; backdrop-filter: blur(4px); }
.visual-card span { color: #75869c; font-size: 8px; display: block; }
.visual-card strong { font-size: 12px; margin-top: 5px; display: block; color: #dfe7f1; }
.visual-card strong.online { color: #64d1a7; }
@media (max-width: 880px) { .login-shell { grid-template-columns: 1fr; } .login-visual { display: none; } .login-panel { min-height: 100vh; padding: 28px 22px; } .login-footer { padding-top: 28px; } }