:root{
  --bg:#0d1015;--panel:#171b22;--panel2:#1d222b;--line:#343c49;
  --text:#f4f6f9;--muted:#9ba6b5;--blue:#487fc4;--green:#55cc7c;
  --red:#9e4040;--amber:#e4af4d;--shadow:none;
  --radius:8px;--font:Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font)}
button,input,select,textarea{font:inherit}
a{color:#8fbdf2}
.panel,.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
input,select,textarea,button{background:var(--panel2);color:var(--text);border:1px solid #485363;border-radius:6px;padding:9px 10px}
button{cursor:pointer;font-weight:700}button:disabled,input:disabled{opacity:.4;cursor:not-allowed}
.small,.muted{color:var(--muted);font-size:13px}
.good{color:#70db93}.bad{color:#ff9292}.warn{color:#efc36a}
.themePick{display:flex;gap:7px;align-items:center}
.themePick select{padding:6px 8px}

/* Winamp-inspired classic skin, intentionally original assets-free CSS */
body.theme-winamp{
  --bg:#202020;--panel:#b7b7b7;--panel2:#d0d0d0;--line:#101010;
  --text:#080808;--muted:#353535;--blue:#102a8f;--green:#00d05a;
  --red:#8f1010;--amber:#8b6b00;--radius:0px;
  --font:"Trebuchet MS",Tahoma,Arial,sans-serif;
  background:#202020;
}
body.theme-winamp .panel,body.theme-winamp .card{
  border-top:2px solid #fff;border-left:2px solid #fff;
  border-right:2px solid #3b3b3b;border-bottom:2px solid #3b3b3b;
}
body.theme-winamp button,body.theme-winamp input,body.theme-winamp select,body.theme-winamp textarea{
  background:#c8c8c8;color:#050505;border-radius:0;
  border-top:2px solid #fff;border-left:2px solid #fff;
  border-right:2px solid #484848;border-bottom:2px solid #484848;
}
body.theme-winamp button:active{
  border-top:2px solid #484848;border-left:2px solid #484848;
  border-right:2px solid #fff;border-bottom:2px solid #fff;
}
body.theme-winamp .titlebar{
  background:linear-gradient(90deg,#08166a,#315bcc);
  color:#fff;border:1px solid #020735;padding:4px 7px;
  font-weight:800;text-transform:uppercase;letter-spacing:.04em;
}
body.theme-winamp .lcd{
  background:#071208;color:#00e65a;border:2px inset #888;
  font-family:"Courier New",monospace;text-shadow:0 0 4px rgba(0,255,70,.7);
}
body.theme-winamp .meterFill{background:linear-gradient(90deg,#00b737 0%,#69e600 70%,#e8e000 88%,#f22727 100%)!important}
body.theme-winamp a{color:#001f86;font-weight:700}


/* ============================================================
   LEGEND MODE — hidden easter egg
   Quad-click SPEAKER AUDITION to toggle.
   Deep black + restrained metallic gold.
   ============================================================ */
body.theme-legend{
  --bg:#020202;
  --panel:#080808;
  --panel2:#0d0d0d;
  --line:#6e5624;
  --text:#f5e7bd;
  --muted:#aa9463;
  --blue:#c9a54a;
  --green:#d6b45b;
  --red:#704545;
  --amber:#d6b45b;
  --radius:3px;
  --font:Arial,Helvetica,sans-serif;
  background:
    radial-gradient(circle at 50% -20%, rgba(194,151,55,.08), transparent 38%),
    linear-gradient(#030303,#000);
  color:#f5e7bd;
}

body.theme-legend .panel,
body.theme-legend .card{
  background:
    linear-gradient(145deg, rgba(255,255,255,.018), rgba(255,255,255,0)),
    #070707;
  border:1px solid #705724;
  box-shadow:
    inset 0 1px 0 rgba(255,225,150,.08),
    0 0 0 1px #000,
    0 8px 30px rgba(0,0,0,.65);
}

body.theme-legend button,
body.theme-legend input,
body.theme-legend select,
body.theme-legend textarea{
  background:#090909;
  color:#ead7a0;
  border:1px solid #80652d;
  border-radius:2px;
  box-shadow:
    inset 0 1px 0 rgba(255,230,160,.06),
    inset 0 -1px 0 rgba(0,0,0,.9);
}

body.theme-legend button:hover{
  background:#121008;
  border-color:#c7a24a;
  color:#fff0c5;
}

body.theme-legend button:active{
  background:#050505;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.9);
}

body.theme-legend .titlebar{
  color:#e4c56f;
  background:
    linear-gradient(90deg,#020202 0%,#0b0904 45%,#020202 100%);
  border:1px solid #745a25;
  box-shadow:
    inset 0 1px 0 rgba(255,226,145,.09),
    0 0 14px rgba(199,162,74,.08);
  text-transform:uppercase;
  letter-spacing:.09em;
}

body.theme-legend .lcd{
  background:#010101;
  color:#d9b553;
  border:1px solid #7a6029;
  box-shadow:
    inset 0 0 16px rgba(0,0,0,.95),
    0 0 12px rgba(198,157,61,.08);
  font-family:"Courier New",monospace;
  text-shadow:
    0 0 3px rgba(213,177,83,.45),
    0 0 8px rgba(213,177,83,.14);
}

body.theme-legend .meterFill{
  background:
    linear-gradient(
      90deg,
      #5a4217 0%,
      #8f6d27 35%,
      #c59b3f 70%,
      #e1c06a 91%,
      #fff0b2 100%
    ) !important;
  box-shadow:0 0 8px rgba(210,171,73,.16);
}

body.theme-legend a{
  color:#d7b45b;
}

body.theme-legend .badge{
  background:#050505 !important;
  color:#c9aa62;
  border-color:#665020 !important;
}

body.theme-legend .good{
  color:#e0c36d !important;
}

body.theme-legend .warn{
  color:#cba451 !important;
}

body.theme-legend .bad{
  color:#b88d43 !important;
}

body.theme-legend ::selection{
  background:#b18a37;
  color:#000;
}

body.theme-legend input[type="range"]{
  accent-color:#c9a54a;
}

body.theme-legend .tag{
  border-color:#665020 !important;
  color:#bda66f;
  background:#050505;
}

body.theme-legend .legend-glow{
  animation:legendPulse 1.5s ease-out 1;
}

@keyframes legendPulse{
  0%{text-shadow:0 0 0 rgba(224,192,103,0)}
  30%{text-shadow:0 0 9px rgba(224,192,103,.9),0 0 28px rgba(224,192,103,.36)}
  100%{text-shadow:0 0 0 rgba(224,192,103,0)}
}

#legendToast{
  position:fixed;
  left:50%;
  top:18px;
  transform:translateX(-50%) translateY(-16px);
  z-index:9999;
  opacity:0;
  pointer-events:none;
  background:#030303;
  color:#e5c66c;
  border:1px solid #8a6b2d;
  padding:9px 18px;
  letter-spacing:.18em;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  box-shadow:0 9px 30px rgba(0,0,0,.75),0 0 18px rgba(201,165,74,.10);
  transition:opacity .2s ease, transform .2s ease;
}

#legendToast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}


/* ============================================================
   LEGEND MODE v2 — richer metallic gold + subtle shimmer
   ============================================================ */
body.theme-legend{
  --line:#9a762d;
  --text:#f7e8b6;
  --muted:#b9a06a;
  --blue:#d1aa45;
  --green:#e0ba55;
  --amber:#e0ba55;
}

body.theme-legend .panel,
body.theme-legend .card{
  border-color:#8c6b29;
  box-shadow:
    inset 0 1px 0 rgba(255,236,177,.12),
    inset 0 0 0 1px rgba(98,72,20,.16),
    0 8px 30px rgba(0,0,0,.72);
}

body.theme-legend .titlebar,
body.theme-legend .tileHeader{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg,#151005 0%,#050403 55%,#0d0903 100%);
  color:#f0cf72;
  border-color:#a68132;
}

body.theme-legend .titlebar::after,
body.theme-legend .tileHeader::after,
body.theme-legend .tile.selected::after,
body.theme-legend .lcd::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:28%;
  left:-45%;
  pointer-events:none;
  background:linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,240,180,0) 20%,
    rgba(255,235,155,.06) 38%,
    rgba(255,236,162,.34) 49%,
    rgba(255,235,155,.08) 61%,
    rgba(255,240,180,0) 78%,
    transparent 100%
  );
  transform:skewX(-16deg);
  animation:legendShimmer 4.8s ease-in-out infinite;
}

body.theme-legend .tile{
  position:relative;
  background:
    linear-gradient(160deg,#0d0b06 0%,#050505 42%,#020202 100%);
  border-color:#6f541f;
}

body.theme-legend .tile:hover{
  border-color:#d1a844;
  box-shadow:0 0 0 1px rgba(182,139,46,.28),0 0 18px rgba(207,164,65,.08);
}

body.theme-legend .tile.selected{
  position:relative;
  outline:2px solid #e0b957;
  border-color:#e0b957;
  box-shadow:
    0 0 0 1px #70501a,
    0 0 16px rgba(221,178,72,.20),
    0 0 38px rgba(221,178,72,.08);
}

body.theme-legend .tile.selected::after{
  animation-duration:2.8s;
}

body.theme-legend .tileFooter{
  border-top-color:#66501f;
  background:linear-gradient(180deg,#080704,#030303);
}

body.theme-legend .tileImg{
  border:1px solid #3d2e12;
  background:
    radial-gradient(circle at 50% 50%,rgba(174,128,36,.04),transparent 55%),
    #010101;
}

body.theme-legend .brand{
  color:#c5a458;
}

body.theme-legend .name{
  color:#f0deb0;
}

body.theme-legend .short,
body.theme-legend .state{
  color:#ac925a;
}

body.theme-legend .meter{
  border-color:#856523;
  background:#010101;
  box-shadow:
    inset 0 0 9px #000,
    0 0 5px rgba(214,171,66,.08);
}

body.theme-legend .meterFill{
  background:
    linear-gradient(
      180deg,
      #fff1b4 0%,
      #e9c764 11%,
      #c89935 30%,
      #9e7625 58%,
      #5c4214 100%
    ) !important;
  box-shadow:
    0 0 8px rgba(227,188,81,.28),
    0 0 16px rgba(227,188,81,.08);
}

body.theme-legend .infoBtn,
body.theme-legend .playerButtons button,
body.theme-legend .toggleBtn,
body.theme-legend .repeatBtn{
  background:
    linear-gradient(180deg,#171105,#080603);
  border-color:#a27b2e;
  color:#e8ca79;
}

body.theme-legend .infoBtn:hover,
body.theme-legend .playerButtons button:hover,
body.theme-legend .toggleBtn:hover,
body.theme-legend .repeatBtn:hover{
  color:#fff1bd;
  border-color:#e0b958;
  background:linear-gradient(180deg,#211807,#0b0803);
}

body.theme-legend .lcd{
  position:relative;
  overflow:hidden;
  color:#edc969;
  border-color:#a47c2d;
  background:
    radial-gradient(circle at 45% 0%,rgba(192,145,45,.08),transparent 35%),
    #010101;
}

body.theme-legend .player{
  border-color:#9d782d;
  box-shadow:
    inset 0 1px 0 rgba(255,232,157,.09),
    0 0 24px rgba(202,157,58,.07);
}

@keyframes legendShimmer{
  0%,55%{left:-45%;opacity:0}
  62%{opacity:.42}
  78%{left:125%;opacity:.20}
  100%{left:125%;opacity:0}
}

@media (prefers-reduced-motion: reduce){
  body.theme-legend .titlebar::after,
  body.theme-legend .tileHeader::after,
  body.theme-legend .tile.selected::after,
  body.theme-legend .lcd::after{
    animation:none;
  }
}