:root{
  --bg:#0b1220;
  --card:#111a2f;
  --text:#e9eef8;
  --muted:#9fb0c9;
  --brand:#1E3A5F;
  --accent:#F9A825;
  --ok:#2E7D32;
  --bad:#B00020;
  --line:rgba(255,255,255,.12);
  --shadow: 0 14px 40px rgba(0,0,0,.35);
  --radius: 14px;
  --w: 1100px;
  --btn: 44px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: var(--sans);
  background: radial-gradient(900px 500px at 20% 0%, rgba(249,168,37,.15), transparent 60%),
              radial-gradient(900px 500px at 80% 20%, rgba(30,58,95,.35), transparent 60%),
              var(--bg);
  color:var(--text);
}

a{color:inherit}
.container{max-width:var(--w); margin:0 auto; padding:22px 14px}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 14px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(17,26,47,.78);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}
.brand{
  display:flex; align-items:center; gap:10px; text-decoration:none;
}
.brand .logo{
  width:34px; height:34px; border-radius:10px; background: linear-gradient(135deg, var(--brand), var(--accent));
  box-shadow: 0 12px 30px rgba(249,168,37,.12);
}
.brand strong{letter-spacing:.2px}
.menu{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  height:36px; padding:0 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  text-decoration:none;
}
.pill:hover{background: rgba(255,255,255,.07)}
.btn{
  height: var(--btn);
  padding: 0 14px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color:var(--text);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none;
}
.btn:hover{background: rgba(255,255,255,.12)}
.btn.primary{background: linear-gradient(135deg, var(--brand), #244b7a); border-color: rgba(255,255,255,.20)}
.btn.accent{background: linear-gradient(135deg, var(--accent), #ffbf47); color:#201400; border-color: rgba(0,0,0,.08)}
.grid{display:grid; gap:14px}
.cards{grid-template-columns: repeat(3, minmax(0, 1fr))}
@media (max-width: 980px){.cards{grid-template-columns: repeat(2, minmax(0, 1fr))}}
@media (max-width: 640px){.cards{grid-template-columns: 1fr}}
.card{
  border:1px solid var(--line);
  background: rgba(17,26,47,.72);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card .pad{padding:14px}
.h1{font-size:34px; margin:12px 0 6px}
.muted{color:var(--muted)}
.kpi{font-family:var(--mono); font-size:12px; color:var(--muted)}
.hr{height:1px;background:var(--line);margin:14px 0}
.alert{
  padding:12px 14px; border-radius: 14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.07);
}
.alert.ok{border-color: rgba(46,125,50,.6); background: rgba(46,125,50,.14)}
.alert.bad{border-color: rgba(176,0,32,.7); background: rgba(176,0,32,.17)}
.form{
  display:grid; gap:10px;
}
.input{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  color:var(--text);
}
label{font-size:13px;color:var(--muted)}
.small{font-size:13px}
.table{
  width:100%;
  border-collapse:collapse;
}
.table th,.table td{padding:10px;border-bottom:1px solid var(--line);text-align:left}
.cover{
  width:100%; aspect-ratio: 16/9; background: rgba(255,255,255,.05);
  display:flex; align-items:center; justify-content:center; color:var(--muted);
}
.cover img{width:100%; height:100%; object-fit:cover; display:block}
.videoWrap{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  background: rgba(0,0,0,.35);
}
video{width:100%; height:auto; display:block; background: #000}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  font-size:12px;
  color: var(--muted);
}