/* Pop-out remote controller */
.remoteWrap{min-height: calc(100vh - 20px); padding:16px;}
.remoteCard{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(7,10,16,.88);
  box-shadow: 0 22px 65px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  padding:14px;
  position:relative;
  overflow:hidden;
}
.remoteRim{
  display:none; /* keep remote compact/clean by default */
  height:8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(147,197,253,.0), rgba(147,197,253,.35), rgba(34,197,94,.25), rgba(147,197,253,.35), rgba(147,197,253,.0));
  filter: blur(0.2px);
  margin: 0 0 10px;
  opacity:.8;
}

/* Ultra-compact: badge-sized */
html.remoteCompact, body.remoteCompact{background: rgba(7,10,16,.96) !important; margin:0 !important;}
body.remoteCompact .remoteWrap{min-height:0; padding:10px;}
body.remoteCompact .remoteRim{display:none;}
body.remoteCompact .remoteCard{
  width:calc(100vw - 20px);
  height:calc(100vh - 20px);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(7,10,16,.88);
  box-shadow: 0 22px 65px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  padding:12px;
}

/* Fullscreen/compact: never let Pads overlay Now Playing. Keep top section visible, scroll the rest. */
body.remoteCompact .sec[data-sec="now"]{flex:0 0 auto;}
body.remoteCompact .sec[data-sec="pads"],
body.remoteCompact .sec[data-sec="queue"]{flex:0 0 auto;}
body.remoteCompact .sec[data-sec="pads"] .secBody{max-height: 52vh; overflow:auto;}
body.remoteCompact .sec[data-sec="queue"] .secBody{max-height: 28vh; overflow:auto;}


/* In compact mode, let the Queue section fill remaining height */
body.remoteCompact .sec[data-sec="queue"]{flex:1 1 auto; display:flex; flex-direction:column; min-height:0;}
body.remoteCompact .sec[data-sec="queue"] .secBody{flex:1 1 auto; min-height:0; display:flex; flex-direction:column;}
body.remoteCompact .remoteQueue{flex:1 1 auto; min-height:0; display:flex; flex-direction:column;}
body.remoteCompact .remoteQueue .rqList{flex:1 1 auto; min-height:0; max-height:none;}

body.remoteCompact .remoteHeader,
body.remoteCompact .remoteList{display:none !important;}

/* keep playlist select visible */
body.remoteCompact .remoteRow{display:none !important;}
body.remoteCompact .remoteRow.plRow{display:grid !important; grid-template-columns: 90px 1fr; margin-top:8px;}

/* compact toggles row */
body.remoteCompact .remoteToggles{display:none !important;}
body.remoteCompact .remoteToggles.compactToggles{display:flex !important; gap:12px; margin-top:8px; font-size:12px; opacity:.92;}
body.remoteCompact .remoteToggles.compactToggles label{display:flex; gap:6px; align-items:center;}

/* keep volume row visible in compact */
body.remoteCompact .remoteRow.volRow{display:grid !important; grid-template-columns: 90px 1fr; margin-top:8px;}
body.remoteCompact .remoteVol{width:100%;}

body.remoteCompact .remoteNow{margin-top:0; padding:8px 10px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03)}
body.remoteCompact .remoteTopRow{margin-top:8px;}
body.remoteCompact .remoteTransport{margin-top:0; gap:10px;}
body.remoteCompact .tbtn{width:38px; height:38px;}
body.remoteCompact .remoteDmLogo{height:38px; opacity:.26;}

/* keep pads, but smaller (6 pads = 3x2) */
body.remoteCompact .remoteSectionTitle{margin-top:10px;}
body.remoteCompact .remotePads{
  margin-top:8px;
  display:grid;
  /* Keep 3 columns but cap pad size so fullscreen/zoom doesn't blow them up */
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap:8px;
  justify-items:center;
}
body.remoteCompact .pad{
  border-radius:14px;
  padding:8px;
  box-shadow: 0 14px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.16);
  max-width: 170px;
  width: 100%;
}
body.remoteCompact .padTitle{
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  opacity:.92;
  position:relative;
  top:58%;
  transform: translateY(-50%);
}
/* STOP pad label should sit lower on the yellow plate */
body.remoteCompact .pad.padStop .padTitle{
  position:absolute;
  left:50%;
  bottom:8px;
  top:auto;
  transform: translateX(-50%);
  width:100%;
  text-align:center;
  font-size:10px;
  opacity:.88;
}
body.remoteCompact .padMenu{right:6px; top:5px; width:22px; height:18px;}

/* winamp-ish queue panel */
.remoteQueue{display:none; margin-top:10px; border-radius:10px; border:1px solid rgba(255,255,255,.10); background:rgba(253, 246, 178, .96); color:#0b1220; overflow:hidden;}
.remoteQueue .rqTitle{padding:6px 10px; font-weight:900; font-size:11px; letter-spacing:.12em; background:rgba(0,0,0,.06);}
.remoteQueue .rqList{max-height:120px; overflow:auto; padding:6px; display:flex; flex-direction:column; gap:4px;}
.remoteQueue .rqRow{display:flex; gap:8px; align-items:center; padding:6px 8px; border-radius:8px; cursor:pointer;}
.remoteQueue .rqRow:hover{background:rgba(0,0,0,.04);}
.remoteQueue .rqRow.isOn{background:rgba(0,0,0,.10);}
.remoteQueue .rqIdx{min-width:22px; color:rgba(0,0,0,.55); font-weight:900;}
.remoteQueue .rqName{font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.remoteQueue .rqEmpty{padding:8px 10px; color:rgba(0,0,0,.55);}

body.remoteCompact .remoteQueue{display:block;}

.remoteHeader{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.remoteTitle{font-weight:900; font-size:14px; color:rgba(234,240,255,.92)}
.remoteMeta{font-size:12px; color:rgba(234,240,255,.60)}

.remoteNow{margin-top:10px; padding:10px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03)}

/* collapsible sections (winamp-ish) */
.sec{border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.02); overflow:hidden}
.secHead{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 10px; cursor:pointer}
.secTitle{font-weight:900; font-size:12px; color:rgba(234,240,255,.85); letter-spacing:.08em; text-transform:uppercase}
.secToggle{width:28px; height:22px; border-radius:10px; border:1px solid rgba(255,255,255,.14); background: rgba(7,10,16,.35); color: rgba(234,240,255,.90); font-weight:900; cursor:pointer}
.secToggle:hover{background: rgba(7,10,16,.55)}
.secBody{padding:0 10px 10px}

.remoteNowRow{display:flex; align-items:center; gap:10px; min-width:0}
.remoteNo{width:18px; text-align:center; font-weight:900; color:rgba(234,240,255,.70)}
.remoteCover{width:34px; height:34px; border-radius:10px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); background-size:cover; background-position:center; flex:0 0 auto;}

/* compact: align cover/title fully left */
body.remoteCompact .remoteNow{padding-left:10px;}
body.remoteCompact .remoteNowRow{gap:10px;}
body.remoteCompact .remoteNo{display:none;}
.remoteNowText{min-width:0; flex:1}
.remoteNowTitle{font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.remoteNowSub{font-size:12px; color:rgba(234,240,255,.70); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.remoteTime{font-variant-numeric: tabular-nums; font-weight:900; color:rgba(234,240,255,.78)}

.remoteRow{margin-top:10px; display:grid; grid-template-columns: 80px 1fr; gap:10px; align-items:center;}
.remoteLabel{font-size:12px; color:rgba(234,240,255,.70)}
.remoteSelect{padding:10px 12px; border-radius:14px; background:rgba(7,10,16,.55); color:rgba(234,240,255,.92); border:1px solid rgba(255,255,255,.12)}

.remoteTopRow{margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.remoteDmLogo{height:46px; max-width:45%; width:auto; opacity:.32; filter: brightness(10) saturate(0); flex:0 1 auto}
.remoteDmLogo:hover{opacity:.58;}
.remoteTransport{margin-top:0; display:flex; flex-wrap:wrap; gap:10px; align-items:center; flex:1 1 220px}

/* prevent overlap on narrow pop-out windows */
@media (max-width: 420px){
  .remoteTopRow{gap:10px}
  .remoteDmLogo{display:none;}
  .remoteTransport{justify-content:flex-start}
  .remoteTransport .tbtn{width:40px; height:40px}
  .remoteTransport{gap:10px}
  .remoteRow.plRow{grid-template-columns: 70px 1fr}
}

/* transport buttons (auth-knob inspired: cleaner, less neon) */
.remoteTransport{gap:12px}
.remoteTransport .tbtn{
  width:46px; height:46px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.12), rgba(255,255,255,.04) 55%, rgba(0,0,0,.26));
  box-shadow: 0 18px 42px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -16px 24px rgba(0,0,0,.28);
  display:grid; place-items:center;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition: transform .06s ease, filter .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.remoteTransport .tbtn:before{
  content:'';
  position:absolute; inset:9px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 0 6px rgba(16,185,129,.00);
  opacity:.95;
  pointer-events:none;
}
.remoteTransport .tbtn:hover{filter: brightness(1.06)}
.remoteTransport .tbtn:active{transform: translateY(2px)}
.remoteTransport .tbtn .ico{position:relative; z-index:1; display:block; width:0; height:0;}

/* icon glyphs */
.remoteTransport .tbtn.play .ico{border-left: 14px solid rgba(234,240,255,.92); border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left:2px;}
.remoteTransport .tbtn.stop .ico{width:16px; height:16px; background: rgba(234,240,255,.92); border-radius:3px;}

/* tiny haptic animation */
@keyframes tbtnBump{
  0%{ transform: translateY(0) scale(1); filter:brightness(1.0); }
  40%{ transform: translateY(1px) scale(0.985); filter:brightness(1.08); }
  100%{ transform: translateY(0) scale(1); filter:brightness(1.0); }
}
.remoteTransport .tbtn.isBump{ animation: tbtnBump .14s ease-out; }

@keyframes tbtnPulse{
  0%{ box-shadow: 0 18px 42px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -16px 24px rgba(0,0,0,.28); }
  100%{ box-shadow: 0 22px 55px rgba(16,185,129,.14), 0 18px 42px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -16px 24px rgba(0,0,0,.28); }
}
.remoteTransport .tbtn.play.isPlaying{ animation: tbtnPulse .22s ease-out; }
.remoteTransport .tbtn.prev .ico,
.remoteTransport .tbtn.next .ico{ position:relative; width:18px; height:16px; }
.remoteTransport .tbtn.prev .ico:before{content:''; position:absolute; left:5px; top:0; width:0; height:0; border-right: 11px solid rgba(234,240,255,.92); border-top: 8px solid transparent; border-bottom: 8px solid transparent;}
.remoteTransport .tbtn.prev .ico:after{content:''; position:absolute; left:0; top:2px; width:3px; height:12px; background: rgba(234,240,255,.92); border-radius:2px;}
.remoteTransport .tbtn.next .ico:before{content:''; position:absolute; left:2px; top:0; width:0; height:0; border-left: 11px solid rgba(234,240,255,.92); border-top: 8px solid transparent; border-bottom: 8px solid transparent;}
.remoteTransport .tbtn.next .ico:after{content:''; position:absolute; right:0; top:2px; width:3px; height:12px; background: rgba(234,240,255,.92); border-radius:2px;}

/* state colors (only where needed) */
.remoteTransport .tbtn.play.isPlaying{
  border-color: rgba(34,197,94,.55);
  box-shadow: 0 22px 55px rgba(34,197,94,.18), 0 18px 42px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -16px 24px rgba(0,0,0,.28);
}
.remoteTransport .tbtn.play.isPlaying:before{
  border-color: rgba(34,197,94,.35);
  box-shadow: 0 0 0 6px rgba(16,185,129,.08);
}
.remoteTransport .tbtn.play.isPlaying .ico{border-left-color: rgba(34,197,94,.95)}

.remoteTransport .tbtn.play.isPaused{
  border-color: rgba(245,158,11,.55);
  box-shadow: 0 22px 55px rgba(245,158,11,.16), 0 18px 42px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -16px 24px rgba(0,0,0,.28);
}
.remoteTransport .tbtn.play.isPaused:before{
  border-color: rgba(245,158,11,.40);
  box-shadow: 0 0 0 6px rgba(245,158,11,.08);
}
.remoteTransport .tbtn.play.isPaused .ico{width:14px; height:16px; border-left: 5px solid rgba(245,158,11,.95); border-right: 5px solid rgba(245,158,11,.95); border-top:0; border-bottom:0; margin-left:0;}

.remoteToggles{margin-top:12px; display:flex; flex-wrap:wrap; gap:12px; font-size:12px; color:rgba(234,240,255,.75)}
.remoteToggles input{transform: translateY(1px)}

.remoteSectionTitle{margin-top:14px; font-weight:900; font-size:12px; color:rgba(234,240,255,.80)}

/* remotePads now lives inside the Pads section */
.remotePads{
  margin-top:10px;
  display:grid;
  /* Prevent pads from becoming comically huge in fullscreen/zoom. */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap:10px;
  justify-items:center;
}
.pad{
  aspect-ratio: 1 / 1;
  width:100%;
  max-width: 190px; /* hard cap: never exceed this visual size */
  text-align:left;
  padding:10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  color:rgba(234,240,255,.92);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  box-shadow: 0 22px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .06s ease, filter .10s ease, box-shadow .12s ease, border-color .12s ease;
}

/* Base LED layer: very subtle (keep pads calm/neutral) */
.pad:before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(90px 90px at 35% 25%, rgba(255,255,255,.05), transparent 62%),
    radial-gradient(120px 120px at 75% 80%, rgba(255,255,255,.03), transparent 65%);
  opacity:.35;
  pointer-events:none;
}

/* Assigned pads: keep it clean (no colorful rim). Only a light tint. */
.pad.isAssigned{
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 22px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.18);
}
.pad.isAssigned:before{
  background:
    radial-gradient(90px 90px at 35% 25%, color-mix(in srgb, var(--padColor, #60A5FA) 18%, transparent), transparent 62%),
    radial-gradient(120px 120px at 75% 80%, color-mix(in srgb, var(--padColor, #60A5FA) 10%, transparent), transparent 65%);
  opacity:.45;
}

/* Pressed: subtle response (no big colorful halo) */
.pad.isPressed{
  transform: translateY(1px) scale(0.995);
  filter: brightness(1.10);
  box-shadow:
    0 26px 70px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.pad:not(.padStop).isPressed:before{
  background:
    radial-gradient(110px 110px at 35% 25%, color-mix(in srgb, var(--padColor, #60A5FA) 20%, transparent), transparent 62%),
    radial-gradient(160px 160px at 75% 80%, color-mix(in srgb, var(--padColor, #60A5FA) 12%, transparent), transparent 65%);
  opacity: 1;
}

/* Short trigger flash */
@keyframes padFlash{ 0%{ filter:brightness(1.15);} 100%{ filter:brightness(1.0);} }
.pad.isFlash{ animation: padFlash .16s ease-out; }

/* Missing assignment (track removed from My SFX/playlist) */
.pad.isMissing{
  border-style: solid;
  border-color: rgba(255,255,255,.10);
}
.pad.isMissing:before{ opacity:.35; }
.padMissing{ font-weight:900; color: rgba(234,240,255,.55); }

.pad:hover{filter: brightness(1.06)}

.pad.isLocked{
  opacity:.55;
  filter: grayscale(.2);
}
.pad.isLocked:hover{filter: grayscale(.2) brightness(1.02)}

.padTitle{position:relative; z-index:1; font-weight:900; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow: 0 2px 10px rgba(0,0,0,.55);} 

.padMeta{display:none}

.padMenu{
  position:absolute;
  right:8px;
  top:6px;
  z-index:2;
  width:24px;
  height:20px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(7,10,16,.35);
  color: rgba(234,240,255,.90);
  font-weight:900;
  cursor:pointer;
}
.padMenu:hover{background: rgba(7,10,16,.55)}

/* STOP pad: integrated graphic (yellow housing + red button), no menu/text */
.pad.padStop .padMenu{display:none !important;}
.pad.padStop .padTitle{display:none !important;}
.pad.padStop{
  background:
    radial-gradient(140px 140px at 30% 25%, rgba(255,255,255,.24), transparent 55%),
    linear-gradient(180deg, rgba(250,204,21,.92), rgba(234,179,8,.72));
  border-color: rgba(250,204,21,.25) !important;
  box-shadow:
    0 22px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(250,204,21,.18),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.pad.padStop:before{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:68%;
  height:68%;
  transform: translate(-50%,-54%);
  border-radius:999px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.32), rgba(239,68,68,.12) 35%, transparent 60%),
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.18), transparent 55%),
    radial-gradient(circle at 50% 70%, rgba(0,0,0,.16), transparent 58%),
    radial-gradient(circle at 35% 30%, rgba(239,68,68,.96), rgba(185,28,28,.96));
  box-shadow:
    0 14px 28px rgba(0,0,0,.35),
    inset 0 10px 18px rgba(255,255,255,.10),
    inset 0 -10px 18px rgba(0,0,0,.20);
  opacity:.98;
}

/* Press feedback: button becomes slightly transparent + pushed in */
.pad.padStop.isPressed:before{ opacity:.72; }
.pad.padStop.isPressed{ filter: brightness(1.02); }
.pad.padStop:after{
  content:'STOP';
  position:absolute;
  left:50%;
  bottom:10px;
  transform: translateX(-50%);
  font-size:10px;
  font-weight:1000;
  letter-spacing:.12em;
  color: rgba(10,12,16,.88);
  opacity:.75;
}

.padModal{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.45);
  z-index:999;
}
/* critical: hidden must actually hide (otherwise it blocks all clicks) */
.padModal[hidden]{
  display:none !important;
}
.padModalInner{
  width:min(520px, calc(100vw - 24px));
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(7,10,16,.92);
  box-shadow: 0 22px 65px rgba(0,0,0,.65);
  padding:14px;
}
.padModalTitle{font-weight:900; font-size:14px}
.padModalRow{margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.padModalSelect{flex:1; min-width:220px; padding:10px 12px; border-radius:14px; background:rgba(7,10,16,.55); color:rgba(234,240,255,.92); border:1px solid rgba(255,255,255,.12)}
.colorDot{width:18px; height:18px; border-radius:999px; border:1px solid rgba(255,255,255,.22); cursor:pointer}


.remoteList{margin-top:10px; display:flex; flex-direction:column; gap:8px; max-height: 260px; overflow:auto; padding-right:4px}
.remoteItem{padding:10px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03)}
.remoteItem:hover{background:rgba(255,255,255,.05)}
.remoteItemTitle{font-weight:800; font-size:13px}
.remoteItemSub{font-size:11px; color:rgba(234,240,255,.65)}