:root{
  --bg1:#070a12;
  --bg2:#0a1020;
  --card: rgba(17, 24, 39, .78);
  --card2: rgba(17, 24, 39, .92);
  --text:#eaf0ff;
  --muted:#9aa7c2;
  --line: rgba(148, 163, 184, .18);
  --accent:#dc2626;
  --accent2:#f87171;
  --danger:#ef4444;
  --ok:#22c55e;
  --shadow: 0 20px 60px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 12% 8%, rgba(220,38,38,.35) 0%, rgba(220,38,38,0) 55%),
    radial-gradient(900px 600px at 85% 18%, rgba(249,115,22,.20) 0%, rgba(249,115,22,0) 55%),
    linear-gradient(180deg, var(--bg2), var(--bg1));
}
a{color:var(--accent2); text-decoration:none}
a:hover{text-decoration:underline}

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 18px;
  background: rgba(6, 10, 18, .65);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.6px;
  background: linear-gradient(135deg, rgba(220,38,38,.92), rgba(249,115,22,.22));
  border:1px solid rgba(96,165,250,.35);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.logo.big{width:54px; height:54px; border-radius:16px; font-size:18px}
.brand-title{font-weight:800; letter-spacing:.2px}
.brand-sub{color:var(--muted); font-size:12px; margin-top:2px}
.nav{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.nav a{color:var(--text); opacity:.9; padding:8px 10px; border-radius:10px}
.nav a:hover{background: rgba(148,163,184,.08); text-decoration:none}
.nav a.danger{color:#ffd2d2}
.nav a.danger:hover{background: rgba(239,68,68,.15)}

.container{max-width:1100px; margin:22px auto; padding:0 16px}
.hero{
  display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap;
  margin: 10px 0 14px;
}
.hero h2{margin:0; font-size:26px; letter-spacing:.2px}
.hero p{margin:6px 0 0}
.row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin: 10px 0}

.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  box-shadow: var(--shadow);
}
.section{padding:18px}
.section-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:10px}
.section-head h3{margin:0; font-size:18px}
.section-head p{margin:4px 0 0}

.form label{display:block; font-size:13px; color:var(--muted)}
.form input, .form select{
  width:100%;
  margin-top:7px;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(10, 15, 28, .65);
  color:var(--text);
  outline:none;
  transition: border .15s, box-shadow .15s;
}
.form input:focus, .form select:focus{
  border-color: rgba(96,165,250,.75);
  box-shadow: 0 0 0 4px rgba(59,130,246,.15);
}

.inline{display:flex; gap:10px}
.smallinput{max-width:140px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}
@media (max-width: 920px){ .grid3{grid-template-columns:1fr 1fr} }
@media (max-width: 860px){ .grid2,.grid3{grid-template-columns:1fr} }

.checks{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px}
@media (max-width: 860px){ .checks{grid-template-columns:1fr} }
.checks label{display:flex; gap:10px; align-items:center; font-size:14px; color:var(--text)}
.checks input{width:auto; margin:0}

.stack{display:flex; flex-direction:column; gap:14px}

button,.btn{
  background: linear-gradient(135deg, rgba(220,38,38,.95), rgba(248,113,113,.45));
  border:1px solid rgba(96,165,250,.25);
  color:white;
  padding:10px 14px;
  border-radius:14px;
  font-weight:800;
  cursor:pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
button:hover,.btn:hover{filter:brightness(1.05); text-decoration:none}
.btn.small{padding:8px 10px; border-radius:12px; font-weight:700}
.btn.ghost{
  background: rgba(148,163,184,.08);
  border:1px solid rgba(148,163,184,.18);
  box-shadow:none;
}
.btn.ghost:hover{background: rgba(148,163,184,.12)}
.wide{width:100%}

.alert{
  background: rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.32);
  padding:12px 14px;
  border-radius:14px;
  margin: 10px 0;
}
.muted{color:var(--muted)}
.tiny{font-size:12px}

.pill{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.22);
  background: rgba(148,163,184,.08);
  color: var(--text);
  font-size:12px;
}
.badge{padding:3px 9px; border-radius:999px; font-weight:900; font-size:12px}
.badge.ok{background: rgba(34,197,94,.14); border:1px solid rgba(34,197,94,.36)}
.badge.err{background: rgba(239,68,68,.14); border:1px solid rgba(239,68,68,.36)}

.tablewrap{overflow:auto; border:1px solid var(--line); border-radius:18px}
table{width:100%; border-collapse:collapse; min-width: 920px; background: rgba(17,24,39,.45)}
th,td{padding:11px 10px; border-bottom:1px solid rgba(148,163,184,.14); vertical-align:top}
th{color:var(--muted); font-size:12px; letter-spacing:.35px; text-transform:uppercase}
td input{min-width:240px}

.footer{max-width:1100px; margin: 16px auto 32px; padding:0 16px; color:var(--muted); font-size:12px}

.center{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:18px}
.auth{max-width: 640px; width:100%; background: var(--card2)}
.auth-head{display:flex; gap:14px; align-items:center; margin-bottom: 8px}
.alert.ok{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.32);
}

.actions{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
.actions form{margin:0}
.btn.fire{
  background: linear-gradient(135deg, rgba(220,38,38,.95), rgba(249,115,22,.38));
  border-color: rgba(249,115,22,.22);
}
.btn.fire:hover{filter:brightness(1.06)}
.kv{display:grid; gap:10px}
.kv .k{display:inline-block; min-width:130px; color:var(--muted); font-size:12px; letter-spacing:.2px; text-transform:uppercase}
.kv .v{display:inline-block; font-weight:700}
.mini{
  border:1px solid rgba(148,163,184,.14);
  background: rgba(10,15,28,.45);
  border-radius:14px;
  padding:12px;
}
.mini .k{display:block; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.25px}
.mini .v{display:block; margin-top:6px; font-weight:800}