:root { color-scheme: dark; --bg:#0b1020; --panel:#121a2f; --muted:#91a0bd; --text:#eef3ff; --line:#263452; --good:#54d17a; --bad:#ff6b6b; --accent:#73a7ff; }
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(circle at top, #172340, var(--bg)); color:var(--text); }
header { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:28px; max-width:1300px; margin:0 auto; }
h1 { margin:0; font-size:28px; }
h2 { margin-top:0; }
p { color:var(--muted); }
button, input, select { border-radius:12px; border:1px solid var(--line); padding:11px 14px; background:#0d1427; color:var(--text); }
button { cursor:pointer; background:linear-gradient(180deg,#2b66d7,#1f4eaa); border:0; font-weight:700; }
button.secondary { background:#1a2540; }
button.danger { background:#8d2020; }
.grid { max-width:1300px; margin:0 auto 18px; padding:0 28px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.card, .panel, .login-card { background:rgba(18,26,47,.86); border:1px solid var(--line); border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.card { padding:18px; }
.card span { color:var(--muted); display:block; margin-bottom:8px; }
.card strong { font-size:28px; }
.panel { max-width:1300px; margin:0 auto 18px; padding:22px; }
.settings-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; align-items:end; }
label { display:grid; gap:7px; color:var(--muted); font-size:14px; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; min-width:900px; }
th, td { text-align:left; padding:12px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:600; }
.good { color:var(--good); } .bad { color:var(--bad); }
.actions { display:flex; gap:10px; flex-wrap:wrap; }
.msg, .error { min-height:20px; }
.error, .bad { color:var(--bad); }
.hidden { display:none; }
.danger-box { border:1px solid #853434; background:#2a1117; padding:16px; border-radius:14px; margin-top:16px; }
.login-body { min-height:100vh; display:grid; place-items:center; padding:22px; }
.login-card { width:min(430px,100%); padding:28px; }
.login-card form { display:grid; gap:14px; }
@media (max-width:900px){ .grid,.settings-grid{grid-template-columns:1fr 1fr;} header{align-items:flex-start; flex-direction:column;} }
@media (max-width:560px){ .grid,.settings-grid{grid-template-columns:1fr;} }