/* BAIPlayer Dark Theme (pure CSS nav, no Bootstrap navbar) */
:root{
  --brand:#22d3ee;       /* cyan accent */
  --brand2:#a855f7;      /* purple accent */
  --ink:#e5e7eb;         /* text on dark */
  --muted:#9ca3af;       /* secondary text */
  --bg:#09090b;          /* near-black */
  --panel:#0f1115;       /* cards/panels */
  --border:rgba(255,255,255,.08);
  --shadow:0 2px 16px rgba(0,0,0,.5);
}

html, body{ background:var(--bg); color:var(--ink); }

/* Links */
a{ color: var(--brand); }
a:hover{ opacity:.9; }

/* Header / Nav (pure CSS) */
.nav{ 
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(6px);
}
.nav .inner{ padding:12px 0; }
.nav a.brand{ color:var(--ink); }
.nav ul > li > a{ color:var(--ink); opacity:.9; }
.nav ul > li > a:hover{ opacity:1; }
.nav .btn{ color:var(--ink); border-color:var(--border); }
.nav .btn.ghost:hover{ background:rgba(255,255,255,.06); }

/* Containers & cards */
.container{ max-width: 1200px; }
.card, .panel, .callout, .hero, .table, .code, pre, code, .well{
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

/* Tables */
.table{ width:100%; border-collapse: collapse; }
.table th, .table td{ border-bottom:1px dashed var(--border); padding:12px 10px; }
.table thead th{ color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.table tbody tr:hover{ background: rgba(255,255,255,.03); }

/* Forms */
input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="file"], textarea, select{
  background:#0d0f14; color:var(--ink);
  border:1px solid var(--border);
  border-radius:10px; padding:10px 12px;
  outline:none;
}
input:focus, textarea:focus, select:focus{ border-color: var(--brand); box-shadow: 0 0 0 3px rgba(34,211,238,.15); }

/* Buttons */
.btn{ 
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:10px; border:1px solid var(--border); 
  background:#10141c; color:var(--ink); cursor:pointer; text-decoration:none; user-select:none;
}
.btn:hover{ background:#121826; }
.btn.primary{ border-color:transparent; background: linear-gradient(90deg, var(--brand), var(--brand2)); color:#0b0b0c; font-weight:700; }
.btn.primary:hover{ filter:brightness(1.05); }
.btn.ghost{ background:transparent; }
.btn.danger{ background:#1a1012; border-color:#5b111b; color:#fda4af; }
.btn.success{ background:#0f1510; border-color:#14532d; color:#86efac; }

/* Badges / code */
.badge{ background:#111827; border:1px solid var(--border); color:var(--ink); padding:4px 8px; border-radius:999px; }
pre, code{ background:#0b0f16; }
code{ padding:2px 6px; border-radius:6px; }

/* Hero split */
.hero-split{ gap:24px; }
.hero-split .left{ background: linear-gradient(180deg, rgba(255,255,255,.02), transparent); border:1px solid var(--border); border-radius:14px; padding:18px; }
.hero-split .right{ background: linear-gradient(180deg, rgba(255,255,255,.02), transparent); border:1px solid var(--border); border-radius:14px; padding:18px; }

/* Footer */
.footer{ color:var(--muted); border-top:1px solid var(--border); background:#0a0c10; }
.footer a{ color:var(--ink); opacity:.8; }
.footer a:hover{ opacity:1; }

/* Utility */
.shadow{ box-shadow: var(--shadow); }
.border{ border:1px solid var(--border); }
.panel-ghost{ background: transparent; border:1px dashed var(--border); }

/* Responsive nav (no bootstrap) */
.nav .menu-toggle{ display:none; }
@media (max-width: 900px){
  .nav .menu-toggle{ display:inline-flex; }
  .nav ul.menu{ display:none; position:absolute; right:16px; top:54px; background:#0d1117; border:1px solid var(--border); border-radius:12px; padding:10px; flex-direction:column; gap:8px; width:min(92vw, 320px); }
  .nav[data-open="1"] ul.menu{ display:flex; }
}