:root { color-scheme: dark; --bg:#090d12; --surface:#10161e; --line:rgba(255,255,255,.1); --text:#f3f6f9; --muted:#8996a6; --accent:#e76033; }
* { box-sizing: border-box; }
body { min-height:100vh; margin:0; display:grid; place-items:center; padding:22px; background:radial-gradient(circle at 50% -10%, rgba(231,96,51,.12), transparent 36rem), var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.login-shell { width:min(430px,100%); }
.login-card { padding:30px; border:1px solid var(--line); border-radius:20px; background:rgba(16,22,30,.96); box-shadow:0 30px 90px rgba(0,0,0,.42); }
.login-brand { display:flex; align-items:center; gap:12px; padding-bottom:25px; border-bottom:1px solid var(--line); }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:var(--accent); color:#fff; font:800 20px/1 Georgia,serif; }
.login-brand > span:last-child { display:flex; flex-direction:column; }
.login-brand strong { font:600 20px Georgia,serif; }
.login-brand small { color:var(--muted); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.login-heading { padding:28px 0 22px; }
.login-heading p { margin:0 0 7px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.login-heading h1 { margin:0 0 8px; font:500 34px Georgia,serif; }
.login-heading span { color:var(--muted); font-size:13px; }
.login-notice { margin:0 0 18px; padding:11px 12px; border:1px solid rgba(93,204,160,.28); border-radius:10px; background:rgba(93,204,160,.1); color:#8de0be; font-size:12px; line-height:1.45; }
.login-form { display:grid; gap:16px; }
.login-form label { display:grid; gap:7px; color:var(--muted); font-size:11px; font-weight:700; }
.login-form input { height:46px; padding:0 12px; border:1px solid var(--line); border-radius:11px; outline:0; background:#0b1016; color:var(--text); font:inherit; }
.login-form input:focus { border-color:rgba(231,96,51,.65); box-shadow:0 0 0 3px rgba(231,96,51,.14); }
.login-form button { height:46px; margin-top:4px; border:0; border-radius:11px; background:var(--accent); color:#fff; font-family:inherit; font-size:13px; font-weight:800; cursor:pointer; }
.login-form button:hover { filter:brightness(1.08); }
@media (prefers-color-scheme: light) { :root { color-scheme:light; --bg:#f1f0ec; --surface:#fffefa; --line:rgba(27,35,42,.12); --text:#20262b; --muted:#707b83; } body { background:var(--bg); } .login-form input { background:#fff; } .login-notice { color:#28664e; } }
@media (max-width:480px) { .login-card { padding:23px; border-radius:16px; } }