:root{
  --pc-border: rgba(255,255,255,.10);
  --pc-text: rgba(255,255,255,.92);
  --pc-muted: rgba(255,255,255,.65);
  --pc-a: #00ffd5;
  --pc-b: #7a00ff;
  --pc-hot: #ff2d6f;
}

/* Demo */
.demo-body{
  height: 100vh;
  margin:0;
  padding:26px 14px 90px;
  background: radial-gradient(900px 450px at 10% 0%, rgba(0,255,213,.18), transparent 60%),
              radial-gradient(900px 450px at 90% 10%, rgba(122,0,255,.16), transparent 60%),
              linear-gradient(180deg, #07070b, #0b0b10);
  color:var(--pc-text);
  font-family: system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}
.demo-h1{max-width:980px;margin:0 auto 10px;font-size:24px}
.demo-p{max-width:980px;margin:0 auto 18px;color:var(--pc-muted);line-height:1.4}

/* Wrapper */
.pcdj{
  width:100%;
  max-width:980px;
  margin:0 auto;
  padding:16px;
  border-radius:22px;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(0,255,213,.22), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(122,0,255,.18), transparent 55%),
    linear-gradient(135deg, rgba(10,10,16,.78), rgba(18,10,30,.55));
  border:1px solid var(--pc-border);
  box-shadow: 0 0 34px rgba(0,255,213,.14), 0 0 46px rgba(122,0,255,.10);
  backdrop-filter: blur(12px);
  position:relative;
  overflow:hidden;
  box-sizing:border-box;
}
.pcdj::before{
  content:"";
  position:absolute; inset:-2px;
  background: linear-gradient(90deg,
    rgba(0,255,213,0),
    rgba(0,255,213,.18),
    rgba(122,0,255,.18),
    rgba(255,45,111,.14),
    rgba(0,255,213,0)
  );
  filter: blur(12px);
  opacity:.65;
  pointer-events:none;
}

@keyframes pcRainbow {
  0%   { --pc-a:#00ffd5; --pc-b:#7a00ff; --pc-hot:#ff2d6f; }
  25%  { --pc-a:#00bfff; --pc-b:#ff2d6f; --pc-hot:#00ffd5; }
  50%  { --pc-a:#7a00ff; --pc-b:#00ffd5; --pc-hot:#ff7a00; }
  75%  { --pc-a:#ff2d6f; --pc-b:#00bfff; --pc-hot:#7a00ff; }
  100% { --pc-a:#00ffd5; --pc-b:#7a00ff; --pc-hot:#ff2d6f; }
}
.pcdj[data-neon="rainbow"]{ animation: pcRainbow 10s linear infinite; }

/* Top */
.pc-top{display:flex;align-items:center;gap:12px;margin-bottom:14px;position:relative;z-index:1}
.pc-badge{
  padding:6px 10px;border-radius:999px;font-weight:900;letter-spacing:.10em;font-size:12px;
  color:#000;background:linear-gradient(135deg,var(--pc-a),#00bfff);box-shadow:0 0 14px rgba(0,255,213,.42);
  text-transform:uppercase;
}
.pc-station{flex:1;font-size:18px;font-weight:900;text-shadow:0 0 16px rgba(0,255,213,.16)}
.pc-status{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--pc-muted)}
.pc-dot{width:10px;height:10px;border-radius:50%;background:#777}

/* Grid */
.pc-grid{display:grid;grid-template-columns: 1.2fr .8fr;gap:14px;position:relative;z-index:1}
@media (max-width: 860px){ .pc-grid{grid-template-columns:1fr} }

/* Console */
.pc-console{
  border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);
  padding:14px;box-sizing:border-box;position:relative;overflow:hidden;
}
.pc-decks{display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative;z-index:1}
@media (max-width: 520px){ .pc-decks{grid-template-columns:1fr} }
.pc-deck{
  border-radius:18px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.10);
  padding:14px;position:relative;overflow:hidden;
}
.pc-deck-title{font-size:12px;letter-spacing:.12em;font-weight:900;color:var(--pc-muted);text-transform:uppercase;margin-bottom:10px}
.deck-now{margin-top:10px;font-weight:950;line-height:1.2}
.deck-now small{display:block;color:var(--pc-muted);font-weight:900;letter-spacing:.10em;text-transform:uppercase;margin-bottom:6px}
.deck-now .txt{display:block}
.deck-meta{display:flex;gap:10px;align-items:center;margin-top:10px}
.deck-chip{
  padding:6px 10px;border-radius:999px;font-weight:900;font-size:12px;color:#000;
  background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.55));
}
.deck-chip.active{
  background:linear-gradient(135deg,var(--pc-a),#00bfff);
  box-shadow:0 0 14px rgba(0,255,213,.30);
}
.deck-controls{display:flex;gap:10px;margin-top:10px}
.deck-btn{
  flex:1;border:0;border-radius:14px;padding:10px 12px;font-weight:950;cursor:pointer;color:#000;
  background:linear-gradient(135deg,var(--pc-a),#00bfff);box-shadow:0 0 14px rgba(0,255,213,.24);
}
.deck-btn.stop{background:linear-gradient(135deg,var(--pc-hot),#ff7a00);box-shadow:0 0 14px rgba(255,45,111,.20)}
.deck-btn:active{transform:translateY(1px)}

/* Turntable */
.turntable{
  width:100%;aspect-ratio:1/1;border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  display:grid;place-items:center;position:relative;overflow:hidden;
}
.turntable::before{
  content:"";width:80%;height:80%;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.20), rgba(255,255,255,.02) 55%, rgba(0,0,0,.55) 56%),
    conic-gradient(from 0deg, rgba(0,255,213,.28), rgba(122,0,255,.22), rgba(255,45,111,.18), rgba(0,255,213,.28));
  box-shadow: inset 0 0 40px rgba(0,0,0,.65), 0 0 18px rgba(0,255,213,.18);
  transform: rotate(0deg);
}
.turntable::after{
  content:"";position:absolute;width:18%;height:18%;border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,.10));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 0 16px rgba(255,255,255,.10);
}
.pcdj.playingA .deckA .turntable::before,
.pcdj.playingB .deckB .turntable::before{ animation: spinVinyl 1.15s linear infinite; }
@keyframes spinVinyl{ to{ transform: rotate(360deg); } }

/* Mixer */
.mixer{
  margin-top:14px;border-radius:18px;background:rgba(0,0,0,.30);border:1px solid rgba(255,255,255,.10);
  padding:14px;position:relative;z-index:1;
}
.mixer-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media (max-width: 520px){ .mixer-row{grid-template-columns:1fr} }
.knob{border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);padding:12px}
.knob-label{font-size:12px;color:var(--pc-muted);font-weight:900;letter-spacing:.10em;margin-bottom:8px}
.slider{width:100%}

/* Crossfader */
.cross{
  margin-top:12px;border-radius:16px;border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);padding:12px;
}
.cross .knob-label{margin-bottom:10px}
.cross-row{display:flex;gap:10px;align-items:center}
.cross-row .side{font-weight:950;color:var(--pc-muted)}
.cross-row input{flex:1}

/* Info */
.pc-info{
  border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);
  padding:14px;box-sizing:border-box;
}
.cover-wrap{display:flex;gap:12px;align-items:center}
.pc-cover{width:110px;height:110px;border-radius:16px;object-fit:cover;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 0 18px rgba(0,255,213,.18);background:#111}
.pc-now-label{font-size:12px;color:var(--pc-muted);font-weight:900;letter-spacing:.10em;text-transform:uppercase}
.pc-now{margin-top:6px;font-size:18px;font-weight:950;line-height:1.2}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.metric{border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.25);padding:12px}
.metric-label{font-size:12px;color:var(--pc-muted);font-weight:900;letter-spacing:.10em;text-transform:uppercase}
.metric-value{margin-top:6px;font-size:18px;font-weight:950}
.controls{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.btn{
  flex:1;min-width:140px;border:0;border-radius:16px;padding:10px 12px;font-weight:950;cursor:pointer;color:#000;
  background:linear-gradient(135deg,var(--pc-a),#00bfff);box-shadow:0 0 16px rgba(0,255,213,.26);
}
.btn.stop{background:linear-gradient(135deg,var(--pc-hot),#ff7a00);box-shadow:0 0 16px rgba(255,45,111,.22)}
.btn.popup{background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.55));box-shadow:none}

/* Autoplay hint overlay */
.pcdj.needs-tap::after{
  content:"Klicken/Tippen um Start zu erlauben";
  position:absolute; left:14px; right:14px; bottom:14px;
  padding:12px 14px;border-radius:16px;background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.18);
  text-align:center;font-weight:950;z-index:20;
}

/* Mini */
.pc-mini{
  display:none;position:fixed;left:10px;right:10px;bottom:10px;z-index:9999;
  border-radius:20px;padding:10px 12px;background:rgba(8,8,12,.78);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 0 22px rgba(0,255,213,.14);
  backdrop-filter: blur(12px);
  align-items:center;gap:10px;
}
.pc-mini button{
  width:46px;height:46px;border-radius:16px;border:0;cursor:pointer;font-weight:950;color:#000;
  background:linear-gradient(135deg,var(--pc-a),#00bfff);
}
.pc-mini-text{flex:1;min-width:0}
.pc-mini-station{font-size:12px;color:var(--pc-muted);font-weight:900;letter-spacing:.10em;text-transform:uppercase}
.pc-mini-now{font-size:14px;font-weight:950;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-mini-live{font-size:12px;font-weight:950;padding:6px 10px;border-radius:999px;background:linear-gradient(135deg,var(--pc-hot),#ff7a00);color:#000}
@media (max-width: 640px){
  .pc-mini{display:flex}
  .pcdj[data-mini-mode="mini-only"] .pc-top,
  .pcdj[data-mini-mode="mini-only"] .pc-grid{ display:none; }
}