:root { --ink:#151718; --muted:#687076; --paper:#f5f3ef; --line:#e3e5e6; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; background:var(--paper); color:var(--ink); font:15px/1.5 Inter,ui-sans-serif,system-ui,sans-serif; }
.login-shell { width:min(980px,calc(100% - 32px)); display:grid; grid-template-columns:1.1fr .9fr; overflow:hidden; border:1px solid var(--line); border-radius:24px; background:#fff; box-shadow:0 28px 80px rgba(20,24,28,.12); }
.brand-panel { min-height:540px; padding:58px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; background:radial-gradient(circle at 90% 10%,#3a3d3e 0,#17191a 46%,#0e0f10 100%); }
.brand-panel span,.eyebrow { font-size:11px; font-weight:800; letter-spacing:.16em; }.brand-panel h1 { margin:14px 0; font-size:48px; line-height:1.05; }.brand-panel p { max-width:440px; color:#c7cbcd; font-size:17px; }
.login-card { padding:58px 48px; display:flex; flex-direction:column; justify-content:center; }.login-card h2 { margin:9px 0 6px; font-size:32px; }.login-card p { color:var(--muted); }
form { display:grid; gap:18px; margin-top:25px; }label { display:grid; gap:7px; font-weight:700; }input { width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:11px; font:inherit; }input:focus { outline:2px solid #151718; outline-offset:2px; }button { padding:13px; border:0; border-radius:11px; color:#fff; background:#151718; font:700 15px inherit; cursor:pointer; }#error { min-height:20px; margin:0; color:#a52626; font-size:13px; }
@media(max-width:760px){.login-shell{grid-template-columns:1fr}.brand-panel{min-height:240px;padding:34px}.brand-panel h1{font-size:36px}.login-card{padding:36px 28px}}