:root{
  --bg:#000;
  --panel:#0b0f14;
  --panel2:#0f1620;
  --text:#d7dde6;
  --muted:#9aa7b5;
  --border:#223042;
  --accent:#0dcaf0;
  --accent2:#37e0ff;
  --danger:#ff5c7a;
  --ok:#2fe3a0;
  --shadow: 0 8px 24px rgba(0,0,0,.55);
  --radius:14px;
}

html,body{background:var(--bg); color:var(--text);}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent2); text-decoration:underline}
hr{border-color:var(--border); opacity:.65}

.container{max-width:1100px; margin:0 auto; padding:18px}

.card{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.h1,.h2,.h3,h1,h2,h3{letter-spacing:.2px}
.muted{color:var(--muted)}

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(13,202,240,.08);
  color:var(--accent);
  cursor:pointer;
}
.btn:hover{background:rgba(13,202,240,.14)}
.btn-primary{
  background:rgba(13,202,240,.18);
  border-color:rgba(13,202,240,.35);
}
.btn-danger{
  background:rgba(255,92,122,.12);
  border-color:rgba(255,92,122,.25);
  color:var(--danger);
}

.input, input[type="text"], input[type="email"], input[type="password"], textarea, select{
  width:100%;
  background:#070a0f;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
}
textarea{min-height:140px}
.input:focus, input:focus, textarea:focus, select:focus{
  border-color:rgba(13,202,240,.5);
  box-shadow:0 0 0 4px rgba(13,202,240,.12);
}

.badge{
  display:inline-flex; align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(13,202,240,.25);
  background:rgba(13,202,240,.08);
  color:var(--accent);
  font-size:.85rem;
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 10px;
}
.row{
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:12px;
}
.row:hover{background:rgba(13,202,240,.05)}
.row > td{padding:12px 12px}

.pager{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px 14px;
}
.pager .pages{display:flex; gap:8px; flex-wrap:wrap}
.pager a, .pager span{
  padding:7px 10px; border-radius:10px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
}
.pager a:hover{background:rgba(13,202,240,.10)}
.pager .active{
  border-color:rgba(13,202,240,.45);
  background:rgba(13,202,240,.16);
  color:var(--accent2);
}

.kbd{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:.85rem;
  padding:2px 7px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#05070b;
  color:var(--muted);
}

.metric-preview {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border-radius: 10px;
  line-height: 1.4;
}

.metric-preview a {
  font-weight: 600;
  color: #3ddcff;
  display: inline-block;
  margin-bottom: 4px;
}

.metric-preview a:hover {
  text-decoration: underline;
}

.metric-excerpt {
  margin-top: 6px;
  font-size: 0.9rem;
  color: #9aa4b2;
}

/* ===== Mediabot highlight ===== */

.mb-card {
    box-shadow: 0 0 18px rgba(120, 90, 255, 0.35);
    border: 1px solid rgba(120, 90, 255, 0.45);
}

.badge-mb {
    background: linear-gradient(135deg, #7b5cff, #5a3cff);
    color: #fff;
    box-shadow: 0 0 10px rgba(120, 90, 255, 0.6);
}