:root { color-scheme: dark; --bg: #090b0d; --panel: #12161b; --line: #2b333c; --text: #f2f3f4; --muted: #9ba5b3; --amber: #f7931e; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% 15%, rgba(247,147,30,.08), transparent 36%), var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.login-page { display: grid; place-items: center; padding: 24px; }
.login-card { width: min(380px, 100%); padding: 30px; border: 1px solid var(--line); border-radius: 12px; background: rgba(18,22,27,.96); box-shadow: 0 24px 70px rgba(0,0,0,.35); }
.login-mark { display: flex; gap: 4px; margin-bottom: 20px; }
.login-mark span { display: block; width: 8px; height: 8px; border-radius: 2px; background: var(--amber); transform: skew(-18deg); }
.login-mark span:nth-child(2) { opacity: .7; }.login-mark span:nth-child(3) { opacity: .4; }
.login-eyebrow { color: var(--amber); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
h1 { margin: 8px 0 5px; font-size: 25px; letter-spacing: -.03em; }.login-subtitle { margin: 0 0 24px; color: var(--muted); font-size: 13px; }
form { display: grid; gap: 7px; } label { margin-top: 7px; color: var(--muted); font-size: 11px; font-weight: 700; } input { height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: #0c1014; color: var(--text); font: inherit; outline: none; } input:focus { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(247,147,30,.14); } button { height: 38px; margin-top: 12px; border: 1px solid var(--amber); border-radius: 6px; background: var(--amber); color: #1a1208; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; } button:hover { filter: brightness(1.08); }.login-error { min-height: 17px; margin-top: 7px; color: #e27d68; font-size: 12px; }