/* 8K Player Panel — MUG IBO-style theme (fresh, standalone) */
:root{
  --primary:#6C5CE7;--primary-dark:#5A4BD1;--accent:#00CEC9;
  --bg:#0F0E17;--surface:#1A1925;--surface-2:#232133;
  --text:#F5F6FA;--muted:#9A98AF;--success:#00B894;--danger:#E17055;--warning:#FDCB6E;
}
*{box-sizing:border-box}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--surface)}
::-webkit-scrollbar-thumb{background:var(--surface-2);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--primary)}
.card{background:var(--surface);border:1px solid rgba(255,255,255,.05);border-radius:1rem}
.card-pad{padding:1.5rem}
.pill{display:inline-block;padding:.18rem .6rem;border-radius:999px;font-size:11.5px;font-weight:700}
.pill-ok{background:rgba(0,184,148,.15);color:var(--success)}
.pill-err{background:rgba(225,112,85,.15);color:var(--danger)}
.pill-warn{background:rgba(253,203,110,.15);color:var(--warning)}
.pill-mut{background:rgba(154,152,175,.15);color:var(--muted)}
.input-field{background:var(--surface-2);border:1px solid rgba(255,255,255,.1);color:var(--text);border-radius:.65rem;padding:.6rem .85rem;font-size:.875rem;width:100%;transition:border .15s}
.input-field:focus{outline:none;border-color:var(--primary)}
select.input-field{appearance:initial}
.lbl{display:block;font-size:.72rem;color:var(--muted);font-weight:600;margin:0 0 .35rem;letter-spacing:.02em;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;border:0;border-radius:.65rem;padding:.6rem 1.1rem;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .15s;text-decoration:none}
.btn:hover{background:var(--primary-dark)}
.btn-secondary{background:var(--surface-2);color:var(--text);border:1px solid rgba(255,255,255,.1)}
.btn-secondary:hover{background:rgba(255,255,255,.1)}
.btn-danger{background:transparent;border:1px solid rgba(225,112,85,.4);color:var(--danger)}
.btn-danger:hover{background:rgba(225,112,85,.15)}
.btn-sm{padding:.35rem .7rem;font-size:.75rem;border-radius:.5rem}
table{width:100%;border-collapse:collapse;font-size:.82rem}
th{color:var(--muted);text-align:left;font-weight:600;padding:.7rem .75rem;border-bottom:1px solid rgba(255,255,255,.06);white-space:nowrap;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em}
td{padding:.75rem;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
tr:hover td{background:rgba(255,255,255,.02)}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.72rem}
.muted{color:var(--muted)}
.mobile-only-menu{display:none}
@media(max-width:767px){.mobile-only-menu{display:flex}}