:root{
  --bg:#0b0b0b; --panel:#111; --panel2:#0f0f0f;
  --text:#ffffff; --muted:#b9b9b9;
  --gold:#d4af37; --gold2:#b8962e; --line:#2a2a2a;
  --red:#ff4d4d; --green:#18d07b;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}
a{color:var(--text);text-decoration:none}
a:hover{color:var(--gold)}
.header{
  position:sticky;top:0;z-index:10;
  background:linear-gradient(180deg,#000,#070707);
  border-bottom:2px solid var(--gold);
  padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px
}
.brand{display:flex;align-items:baseline;gap:10px}
.brand .logo{font-weight:900;letter-spacing:.5px;color:var(--gold);font-size:22px}
.brand .tag{color:var(--muted);font-size:12px}
.nav{display:flex;gap:10px;flex-wrap:wrap}
.nav a{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#0d0d0d}
.nav a.active{border-color:var(--gold);box-shadow:0 0 0 2px rgba(212,175,55,.15) inset}
.container{padding:18px;max-width:1200px;margin:0 auto}
.grid{display:grid;grid-template-columns:360px 1fr;gap:16px}
@media(max-width:980px){.grid{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:14px;padding:16px}
.card h2{margin:0 0 10px 0;color:var(--gold);font-size:18px}
.card h3{margin:0 0 10px 0;color:var(--gold);font-size:16px}
.muted{color:var(--muted);font-size:12px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:720px){.row{grid-template-columns:1fr}}
label{display:block;color:var(--muted);font-size:12px;margin-top:10px}
input,select,textarea{
  width:100%;padding:10px 10px;border-radius:10px;
  border:1px solid #333;background:#070707;color:var(--text)
}
textarea{min-height:90px;resize:vertical}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 12px;border-radius:12px;border:1px solid #3a3a3a;background:#0e0e0e;color:var(--text);
  cursor:pointer;font-weight:700
}
.btn.primary{
  background:linear-gradient(145deg,var(--gold),var(--gold2));
  color:#000;border-color:#7a6220;box-shadow:0 10px 24px rgba(212,175,55,.18)
}
.btn.danger{border-color:#552; background:linear-gradient(145deg,#ff4d4d,#d32f2f); color:#000}
.btn.ghost{background:transparent}
.btn:active{transform:translateY(1px)}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.table th{color:var(--gold);text-align:left;font-size:12px;letter-spacing:.3px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:#0d0d0d;font-size:12px;color:var(--muted)}
.pill.ok{border-color:rgba(24,208,123,.35);color:#cfffec}
.pill.warn{border-color:rgba(255,176,32,.35);color:#ffe7bf}
.pill.bad{border-color:rgba(255,77,77,.35);color:#ffd0d0}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:980px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{padding:14px;border-radius:14px;border:1px solid var(--line);background:#0d0d0d}
.kpi .t{color:var(--muted);font-size:12px}
.kpi .v{font-size:20px;font-weight:900;color:var(--gold);margin-top:6px}
.hr{height:1px;background:var(--line);margin:12px 0}
.footer{padding:20px;color:var(--muted);text-align:center;font-size:12px}