:root { color-scheme: dark; --bg:#07111a; --card:#101f2b; --line:#263d4c; --text:#e7f1f7; --muted:#8fa7b8; --accent:#25c79a; --danger:#d65e68; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(circle at top,#102433,var(--bg) 42%); color:var(--text); font:14px Inter,Segoe UI,sans-serif; }
.shell { width:min(1500px,calc(100% - 32px)); margin:0 auto; padding:32px 0 70px; }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:20px; }
header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
h1,h2 { margin:4px 0 12px; } h1 { font-size:28px; } h2 { margin-top:28px; }
.eyebrow { color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.muted,small { color:var(--muted); }
.card,.generated,.notice,.table-wrap { border:1px solid var(--line); border-radius:12px; background:rgba(16,31,43,.95); box-shadow:0 18px 50px #0005; }
.form { width:min(480px,100%); display:grid; gap:13px; padding:24px; }
.generate { width:100%; grid-template-columns:240px 1fr; align-items:start; }
.generate form { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; align-items:end; }
label { display:grid; gap:5px; color:var(--muted); font-size:12px; }
input,select,button { border:1px solid var(--line); border-radius:7px; background:#142936; color:var(--text); padding:9px 10px; }
button { cursor:pointer; background:#087d62; border-color:#159879; font-weight:700; }
button:hover { filter:brightness(1.15); }
.ghost { background:#152936; }.danger { background:#6f2930;border-color:#9c3c47; }.small { padding:5px 7px;font-size:11px; }
.generated,.notice { display:grid;gap:7px;padding:18px;margin:16px 0; }.generated { border-color:var(--accent);background:#0c2b25; }.generated code { color:var(--accent);font-size:18px;word-break:break-all; }
.error { color:#ff9ca5; }.table-wrap { overflow:auto;margin-bottom:38px; }
table { width:100%;border-collapse:collapse;min-width:950px; } th,td { padding:11px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top; } th { color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em; }
td small { display:block;margin-top:4px; }.device { display:grid;grid-template-columns:1fr auto;gap:2px 8px;margin-bottom:8px; }.device small { grid-column:1; }.device form { grid-column:2;grid-row:1/3; }.actions { display:flex;gap:7px; }.actions form { display:flex;gap:5px; }
@media(max-width:900px){ .generate,.generate form{grid-template-columns:1fr;} header{align-items:flex-start;} }