:root { --ink:#edf2f7; --muted:#8d9aaa; --dim:#5d6a79; --line:#273342; --panel:#111923; --panel-soft:#0d151e; --accent:#91c8b0; --accent-strong:#b9e5d1; }
* { box-sizing: border-box; }
body { min-height:100vh; margin:0; display:grid; place-items:center; padding:28px; color:var(--ink); background:#080c11; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.login-shell { width:min(960px,100%); min-height:590px; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border:1px solid #202b38; border-radius:18px; background:var(--panel); box-shadow:0 28px 90px rgba(0,0,0,.42); }
.security-panel { position:relative; display:flex; flex-direction:column; justify-content:center; padding:64px; overflow:hidden; background:linear-gradient(145deg,#101b27,#0a1119); }
.security-panel::before { content:""; position:absolute; width:540px; height:540px; right:-300px; bottom:-280px; border:1px solid rgba(145,200,176,.2); border-radius:50%; box-shadow:0 0 0 70px rgba(145,200,176,.035),0 0 0 140px rgba(145,200,176,.025); }
.security-panel::after { content:""; position:absolute; inset:0; opacity:.18; background:linear-gradient(115deg,transparent 0 48%,rgba(145,200,176,.12) 48.2%,transparent 48.5%); pointer-events:none; }
.security-mark { position:relative; z-index:1; width:58px; height:58px; margin-bottom:46px; border:1px solid rgba(185,229,209,.55); border-radius:16px; transform:rotate(45deg); }
.security-mark span { position:absolute; inset:14px; border:1px solid var(--accent); border-radius:50%; }
.eyebrow { margin:0 0 12px; color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.18em; }
h1 { position:relative; z-index:1; max-width:390px; margin:0; font-size:clamp(38px,5vw,58px); line-height:1.02; letter-spacing:-.055em; }
.security-panel > p:not(.eyebrow) { position:relative; z-index:1; max-width:350px; margin:24px 0 0; color:#aeb9c5; font-size:15px; line-height:1.65; }
.security-list { position:relative; z-index:1; display:grid; gap:12px; margin-top:36px; color:#c8d2dc; font-size:12px; }
.security-list span { display:flex; align-items:center; gap:10px; }
.security-list i { display:grid; place-items:center; width:18px; height:18px; border:1px solid #416054; border-radius:50%; color:var(--accent-strong); font-size:11px; font-style:normal; }
.privacy-pill { position:relative; z-index:1; width:max-content; display:flex; align-items:center; gap:9px; margin-top:58px; padding:8px 11px; border:1px solid #2d3a47; border-radius:999px; color:#82909e; font-size:11px; }
.privacy-pill span,.status-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(145,200,176,.1); }
.login-card { display:flex; flex-direction:column; justify-content:center; padding:64px; background:var(--panel); }
.login-heading { position:relative; padding-top:50px; }
.lock-icon { position:absolute; top:0; left:0; display:grid; place-items:center; width:36px; height:36px; border:1px solid #324252; border-radius:10px; color:var(--accent); }
.lock-icon svg { width:19px; height:19px; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.login-card h2 { margin:0; color:var(--ink); font-size:31px; letter-spacing:-.045em; }
.login-card #loginIntro { margin:10px 0 0; color:var(--muted); font-size:14px; line-height:1.5; }
form { display:grid; gap:17px; margin:34px 0 15px; }
label { display:grid; gap:8px; color:#b7c1cc; font-size:11px; font-weight:700; letter-spacing:.04em; }
input { width:100%; height:50px; padding:0 14px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--panel-soft); font:inherit; font-size:15px; outline:none; transition:border-color .18s,box-shadow .18s; }
input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(145,200,176,.12); }
button { display:flex; align-items:center; justify-content:space-between; height:50px; margin-top:7px; padding:0 16px 0 18px; border:1px solid var(--accent); border-radius:9px; color:#0b1512; background:var(--accent-strong); font:inherit; font-size:13px; font-weight:800; cursor:pointer; transition:background .18s,transform .18s; }
button b { font-size:20px; font-weight:400; line-height:1; }
button:hover { background:#d7f2e3; transform:translateY(-1px); }
button:disabled { cursor:wait; opacity:.65; transform:none; }
.message { min-height:22px; color:var(--muted); font-size:12px; line-height:1.5; }
.message.error { color:#fda29b; }
.setup-help { margin:22px 0; padding:18px; border-left:2px solid var(--accent); background:#14221f; color:#d5e8dd; font-size:13px; }
.setup-help p { margin:7px 0; color:var(--muted); font-size:12px; }
code { display:block; overflow:auto; padding:10px; border-radius:6px; background:#0a1219; color:var(--accent-strong); font-size:11px; }
.login-footnote { display:flex; align-items:center; gap:10px; margin-top:21px; color:var(--dim); }
.login-footnote small { font-size:11px; line-height:1.45; }
@media (max-width:800px) { body{padding:14px;place-items:stretch}.login-shell{grid-template-columns:1fr;min-height:0;margin:auto}.security-panel{min-height:270px;padding:32px}.security-mark{width:42px;height:42px;margin-bottom:28px}.security-mark span{inset:10px}.security-panel h1{font-size:39px}.security-panel > p:not(.eyebrow){margin-top:14px}.security-list{display:none}.privacy-pill{margin-top:24px}.login-card{padding:34px 28px 30px} }