:root { color-scheme: dark; --bg:#0c1117; --panel:#141b23; --panel2:#101720; --line:#26313d; --text:#e8edf3; --muted:#9aa8b6; --accent:#3fb68b; --bad:#ef6f6c; --warn:#e3b341; }
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Arial, sans-serif; background:var(--bg); color:var(--text); }
.login-page { min-height:100vh; display:grid; place-items:center; background:#0b1016; }
.login-wrap { width:min(440px, calc(100vw - 32px)); }
.login-panel { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:32px; box-shadow:0 18px 60px rgba(0,0,0,.35); }
.brand-mark,.sidebar-brand { font-weight:800; letter-spacing:0; color:#ffffff; }
h1 { margin:16px 0 6px; font-size:26px; }
.muted { color:var(--muted); }
.form-stack { display:grid; gap:16px; margin-top:22px; }
label { display:grid; gap:7px; color:var(--muted); font-size:13px; }
input { width:100%; background:#0d131b; color:var(--text); border:1px solid var(--line); border-radius:6px; padding:12px 13px; font-size:15px; }
button { border:0; border-radius:6px; padding:11px 14px; background:var(--accent); color:#06110d; font-weight:700; cursor:pointer; }
button.secondary { background:#202a35; color:var(--text); border:1px solid var(--line); }
button.danger { background:#4d2428; color:#ffd9dc; border:1px solid #7b3339; }
button:disabled { opacity:.55; cursor:not-allowed; }
.error { min-height:20px; color:#ff9a97; margin:0; }
.hidden { display:none !important; }
.app-page { min-height:100vh; display:grid; grid-template-columns:260px 1fr; }
.sidebar { background:#0a0f15; border-right:1px solid var(--line); padding:22px 16px; }
.sidebar-brand { padding:4px 8px 22px; font-size:20px; }
.sidebar nav { display:grid; gap:5px; }
.sidebar a { color:var(--muted); text-decoration:none; padding:10px 12px; border-radius:6px; }
.sidebar a.active,.sidebar a:hover { background:#17212b; color:var(--text); }
.workspace { min-width:0; }
.topbar { height:64px; display:flex; justify-content:space-between; align-items:center; padding:0 24px; border-bottom:1px solid var(--line); background:#0f151d; }
.topbar strong { margin-right:18px; }
.userbar { display:flex; align-items:center; gap:12px; color:var(--muted); }
.view { padding:24px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.card,.table-shell,.settings-panel { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:16px; }
.card h3 { margin:0 0 12px; font-size:14px; color:#f4f7fa; }
.badge { display:inline-flex; align-items:center; border-radius:999px; padding:4px 9px; background:#173326; color:#8de2bd; font-size:12px; font-weight:700; }
.badge.neutral { background:#202936; color:#b5c4d4; }
.table-shell { overflow:auto; }
table { width:100%; border-collapse:collapse; min-width:760px; }
th,td { border-bottom:1px solid var(--line); text-align:left; padding:11px 10px; white-space:nowrap; }
th { color:#b7c3cf; font-size:12px; text-transform:uppercase; }
td { color:#dbe3ea; }
.placeholder { color:var(--muted); }
.security-actions { display:flex; flex-wrap:wrap; gap:10px; margin:14px 0; }
pre.codes { white-space:pre-wrap; background:#0b1118; border:1px solid var(--line); border-radius:6px; padding:12px; color:#dff7eb; }
@media (max-width: 760px) { .app-page { grid-template-columns:1fr; } .sidebar { position:static; } .topbar { height:auto; align-items:flex-start; gap:10px; flex-direction:column; padding:16px; } .view { padding:16px; } }