
:root{--bg:#120706;--panel:#26100d;--gold:#d7a64a;--text:#fff7df;--muted:#c7a28e;--line:#6e362a;--red:#8c2418}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% 0,#4b1b13 0,#1d0b09 35%,#100706 100%);color:var(--text);font-family:Georgia,'Times New Roman',serif}
button,input{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.shell{max-width:1180px;margin:0 auto;padding:16px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.brand{color:var(--gold);font-weight:900;letter-spacing:.16em}
.btn{border:1px solid #734034;border-radius:9px;background:#28100d;color:#f3d8a8;padding:8px 11px}
.btn.primary,.navbtn.active,.tab.active{background:var(--red);color:white;border-color:#df664d}
.marquee{margin:0 auto 14px;max-width:560px;text-align:center;padding:10px 18px;border:2px solid var(--gold);border-radius:12px;color:#ffd06a;background:#1b0c09;font-size:clamp(30px,5vw,54px);font-weight:900;letter-spacing:.15em}
.panel{background:linear-gradient(180deg,rgba(65,27,21,.98),rgba(28,12,10,.99));border:1px solid var(--line);border-radius:14px;padding:14px}
.eyebrow{font-size:12px;letter-spacing:.18em;color:var(--gold);margin-bottom:8px;font-weight:900}
.muted{color:var(--muted);font-size:13px}
.guest-top{display:grid;grid-template-columns:1.15fr 1fr;gap:10px;margin-bottom:10px}
.now{display:flex;gap:12px;align-items:center}
.art{width:66px;height:66px;border-radius:10px;display:grid;place-items:center;background:radial-gradient(circle,#8d2b1f,#1b0a08);font-size:30px}
.title{font-size:18px;font-weight:800}.artist{font-size:13px;color:#d1aa90}
.queue{display:grid;gap:6px}.qrow{display:flex;gap:8px;align-items:center;background:#180a08;border:1px solid #4d291f;border-radius:8px;padding:8px}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.tabs{display:flex;flex-wrap:wrap;gap:6px}.tab{border:1px solid #754136;border-radius:999px;background:#25100d;color:#efd2a0;padding:7px 10px}
.song-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.song{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;background:#381510;border:1px solid #76372b;border-radius:10px;padding:10px}
.code{height:46px;border-radius:8px;background:#d9ad58;color:#381208;display:grid;place-items:center;font-weight:900}
.add{border:1px solid #ff7354;border-radius:8px;background:#8d2518;color:white;padding:9px 10px}.add:disabled{opacity:.45}
.admin-grid{display:grid;grid-template-columns:170px 1fr;gap:12px}
.nav{display:grid;gap:7px;align-content:start}.nav .btn{text-align:left}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
label{display:grid;gap:5px;font-size:13px}.field{width:100%;border:1px solid #704034;border-radius:8px;background:#140806;color:white;padding:9px}
.list{display:grid;gap:8px}.row{display:grid;grid-template-columns:1.5fr 1fr auto;gap:8px;align-items:center;background:#180a08;border:1px solid #4d291f;border-radius:9px;padding:9px}
.chips{display:flex;gap:5px;flex-wrap:wrap}.chip{font-size:11px;padding:3px 6px;border-radius:999px;background:#4a2118;color:#f1d2aa}
.actions{display:flex;gap:5px;flex-wrap:wrap}.small{padding:6px 8px;font-size:12px}.danger{color:#ffb4a5;border-color:#8f3327}
.cat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.cat-card{background:#180a08;border:1px solid #4d291f;border-radius:10px;padding:11px}
.check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.check{display:flex;align-items:center;gap:7px;background:#1a0b08;border:1px solid #4f2a21;border-radius:8px;padding:7px}
.notice{margin-top:10px;padding:10px;border-radius:10px;background:#2d1712;border:1px solid #744034}
.modal{border:1px solid #744034;border-radius:12px;background:#24100d;padding:12px;margin-bottom:12px}
.settings-note{padding:10px;border-radius:10px;background:#180a08;border:1px solid #4d291f}
@media(max-width:800px){
.guest-top,.song-grid,.admin-grid,.form-grid,.cat-grid,.check-grid{grid-template-columns:1fr}
.nav{grid-template-columns:repeat(5,1fr);overflow:auto}.nav .btn{text-align:center;font-size:12px}
.row{grid-template-columns:1fr}.song{grid-template-columns:48px 1fr}.song .add{grid-column:1/-1}}

.spotify-searchbar{display:grid;grid-template-columns:1fr auto;gap:8px;margin:12px 0}
.spotify-results{display:grid;gap:7px;margin-top:8px}
.spotify-result{display:grid;grid-template-columns:58px 1fr auto;gap:10px;align-items:center;background:#180a08;border:1px solid #4d291f;border-radius:9px;padding:8px}
.spotify-art{width:58px;height:58px;object-fit:cover;border-radius:7px;background:#32150f;display:grid;place-items:center}
.selected-track{display:grid;grid-template-columns:86px 1fr;gap:12px;align-items:center;margin-top:12px;padding:10px;border:1px solid #8c5a2b;border-radius:10px;background:#25100d}
.selected-art{width:86px;height:86px;object-fit:cover;border-radius:8px}
@media(max-width:650px){.spotify-searchbar,.spotify-result{grid-template-columns:1fr}.spotify-art{width:70px;height:70px}.selected-track{grid-template-columns:70px 1fr}.selected-art{width:70px;height:70px}}

.device-list{display:grid;gap:7px;margin-top:10px}
.device-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;background:#180a08;border:1px solid #4d291f;border-radius:9px;padding:10px}
@media(max-width:650px){.device-row{grid-template-columns:1fr}}

#testQueueTrack{min-width:0}

.brand-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.build-badge{display:inline-block;padding:4px 8px;border:1px solid #d7a64a;border-radius:999px;color:#ffd06a;background:#1a0b08;font:700 12px/1 Arial,sans-serif;letter-spacing:.04em}
.build-panel{margin-bottom:12px;padding:9px 10px;border-radius:9px;border:1px solid #6e362a;background:#180a08}

.bulk-category-toolbar{
  margin:12px 0;
  padding:12px;
  border:1px solid #6e362a;
  border-radius:10px;
  background:#180a08;
}
.bulk-category-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.bulk-selection-actions{display:flex;gap:6px;flex-wrap:wrap}
.bulk-category-controls{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:10px;
}
.bulk-category-select{
  width:auto;
  min-width:190px;
  margin:0;
}
.bulk-library-row{
  grid-template-columns:auto minmax(0,1fr) auto !important;
  gap:12px;
}
.bulk-select-box{
  display:flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
  cursor:pointer;
  font-size:13px;
}
.bulk-select-box input{
  width:18px;
  height:18px;
  accent-color:#a52a1e;
}
.bulk-song-info{min-width:0}
.bulk-song-cats{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  margin-top:5px;
}
@media(max-width:700px){
  .bulk-library-row{grid-template-columns:auto minmax(0,1fr) !important}
  .bulk-library-row .actions{grid-column:2}
  .bulk-select-box span{display:none}
  .bulk-category-controls{align-items:stretch}
  .bulk-category-select{width:100%}
}

.spotify-multi-result{
  grid-template-columns:auto auto minmax(0,1fr) auto !important;
}
.spotify-multi-result.selected{
  outline:1px solid #d7a64a;
  background:#25100c;
}
.spotify-result-check{
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.spotify-result-check input{
  width:19px;
  height:19px;
  accent-color:#a52a1e;
}
.spotify-result-info{min-width:0}
.spotify-existing{
  display:inline-block;
  margin-top:4px;
  padding:2px 6px;
  border:1px solid #6e362a;
  border-radius:999px;
  font-size:11px;
  color:#d9a98f;
}
.spotify-selected-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:10px;
}
.spotify-selected-list{
  display:grid;
  gap:6px;
  margin-top:8px;
}
.spotify-selected-row{
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border:1px solid #5d2d24;
  border-radius:8px;
  background:#180a08;
}
.spotify-selected-row img,
.spotify-mini-placeholder{
  width:36px;
  height:36px;
  object-fit:cover;
  border-radius:5px;
}
.spotify-mini-placeholder{
  display:grid;
  place-items:center;
  background:#38120d;
}
@media(max-width:700px){
  .spotify-multi-result{
    grid-template-columns:auto 44px minmax(0,1fr) !important;
  }
  .spotify-multi-result .spotify-toggle{
    grid-column:3;
    justify-self:start;
  }
}

.spotify-search-pager{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  padding:12px 4px 2px;
  margin-top:4px;
}
.spotify-page-label{
  min-width:92px;
  text-align:center;
  font-weight:700;
  color:#ffd06a;
}

.sonos-output-panel{margin-bottom:12px}
.sonos-output-summary{margin-top:10px;padding:9px 10px;border:1px solid #6e362a;border-radius:8px;background:#180a08}
.sonos-room-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:10px}
.sonos-room-option{display:flex;align-items:center;gap:9px;padding:9px 10px;border:1px solid #6e362a;border-radius:9px;background:#180a08;cursor:pointer}
.sonos-room-option input{width:19px;height:19px;accent-color:#a52a1e}
.sonos-room-status{margin-top:2px;font-size:11px;color:#d8aa92}
@media(max-width:700px){.sonos-room-grid{grid-template-columns:1fr}}

/* =========================================================
   v0.15.0 — Vintage Guest Jukebox Interface
   Admin styles and playback logic remain unchanged.
   ========================================================= */

.guest-jukebox-view{
  display:grid;
  gap:12px;
  max-width:1500px;
  margin:0 auto;
}

.vintage-status{
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.status-panel{
  min-height:92px;
  display:flex;
  align-items:center;
  gap:14px;
  border-color:#75442a;
  background:
    linear-gradient(180deg,rgba(23,10,7,.98),rgba(11,5,4,.98));
  box-shadow:
    inset 0 0 0 1px rgba(220,154,71,.08),
    0 8px 24px rgba(0,0,0,.3);
}

.status-icon{
  width:58px;
  height:58px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  font-size:27px;
  color:#f2bd4a;
  border:2px solid #8b542d;
  background:radial-gradient(circle at 35% 30%,#502313,#1b0b07 68%);
  box-shadow:inset 0 0 18px rgba(255,89,28,.16);
}

.status-panel .title{
  font-size:22px;
  line-height:1.08;
}

.jukebox-machine{
  position:relative;
  padding:72px 38px 24px;
  border:2px solid #744322;
  border-radius:28px;
  background:
    linear-gradient(90deg,
      #180b07 0%,#4b1c0f 3%,#17100b 7%,#231009 12%,
      #2c1209 88%,#17100b 93%,#4b1c0f 97%,#180b07 100%);
  box-shadow:
    inset 0 0 0 4px #0c0705,
    inset 0 0 0 7px #8a552b,
    inset 0 0 38px rgba(255,90,24,.16),
    0 12px 28px rgba(0,0,0,.42);
  overflow:hidden;
}

.jukebox-machine::before,
.jukebox-machine::after{
  content:"";
  position:absolute;
  top:50px;
  bottom:22px;
  width:28px;
  border-radius:18px;
  background:
    linear-gradient(90deg,#2a130a,#b44b17 35%,#f4b64f 52%,#80270f 68%,#1d0d08);
  box-shadow:0 0 16px rgba(255,100,26,.35);
}
.jukebox-machine::before{left:12px}
.jukebox-machine::after{right:12px}

.jukebox-sign{
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  z-index:4;
  padding:8px 38px 10px;
  min-width:320px;
  text-align:center;
  font-family:Georgia,serif;
  font-weight:800;
  font-size:44px;
  letter-spacing:.08em;
  color:#ffb06d;
  text-shadow:
    0 0 3px #fff2cc,
    0 0 9px #ff4d16,
    0 0 18px #e32b09,
    0 0 30px #8c1507;
  border:2px solid #7f4a2e;
  border-radius:16px;
  background:linear-gradient(#220b06,#0f0604);
  box-shadow:
    inset 0 0 0 3px #090403,
    0 0 18px rgba(255,57,20,.35);
}

.jukebox-category-shell{
  display:grid;
  grid-template-columns:84px minmax(0,1fr) 84px;
  gap:14px;
  align-items:center;
}

.category-wheel{
  min-height:245px;
  display:grid;
  grid-template-columns:.78fr .92fr 1.02fr 1.7fr 1.02fr .92fr .78fr;
  gap:4px;
  align-items:stretch;
  padding:14px;
  border:4px solid #2f1a10;
  border-radius:24px;
  background:
    linear-gradient(180deg,#28140b 0%,#100907 16%,#110a07 84%,#2a140a 100%);
  box-shadow:
    inset 0 0 0 2px #94613b,
    inset 0 0 28px rgba(0,0,0,.7);
}

.category-slot{
  appearance:none;
  border:1px solid #8b654a;
  border-radius:14px;
  min-width:0;
  padding:12px 8px;
  cursor:pointer;
  color:#28140b;
  font-family:Impact,Arial Narrow,sans-serif;
  font-size:clamp(18px,2vw,28px);
  line-height:1.02;
  text-transform:uppercase;
  background:
    linear-gradient(90deg,#9f744f 0,#efe0b8 10%,#f3e5bf 50%,#d7b887 90%,#8f6241 100%);
  box-shadow:
    inset 0 0 0 3px rgba(86,34,17,.18),
    inset 0 12px 18px rgba(255,255,255,.16),
    0 0 0 2px #2d160d;
  transition:transform .14s ease,filter .14s ease,box-shadow .14s ease;
  overflow:hidden;
}

.category-slot span{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  overflow-wrap:anywhere;
}

.category-slot:hover{
  filter:brightness(1.06);
}

.category-slot.active{
  transform:scale(1.035);
  position:relative;
  z-index:2;
  font-size:clamp(26px,3vw,48px);
  border:2px solid #f4b54d;
  background:
    linear-gradient(90deg,#b77637,#f6e1ab 10%,#ffe7ae 50%,#e5bd77 90%,#a45422);
  box-shadow:
    inset 0 0 0 5px rgba(120,45,13,.25),
    inset 0 0 26px rgba(255,169,59,.25),
    0 0 0 5px #6f2b12,
    0 0 22px rgba(255,95,20,.55);
}

.category-arrow{
  width:76px;
  height:76px;
  border-radius:50%;
  cursor:pointer;
  font-size:46px;
  line-height:1;
  color:#ff9c52;
  border:2px solid #9c6641;
  background:
    radial-gradient(circle at 35% 30%,#39150d,#120806 70%);
  text-shadow:0 0 8px #ff3d15;
  box-shadow:
    inset 0 0 0 4px #0d0504,
    0 0 0 2px #25120c,
    0 0 18px rgba(255,74,20,.22);
}

.category-arrow:hover{
  color:#ffd08a;
  box-shadow:
    inset 0 0 0 4px #0d0504,
    0 0 0 2px #25120c,
    0 0 24px rgba(255,74,20,.42);
}

.category-instruction{
  margin-top:14px;
  text-align:center;
  color:#e3a83d;
  letter-spacing:.16em;
  font-size:13px;
  font-weight:800;
}

.category-counter{
  margin-top:5px;
  text-align:center;
  font-size:12px;
  color:#b9825d;
}

.guest-song-deck{
  display:grid;
  grid-template-columns:minmax(220px,290px) minmax(0,1fr);
  gap:12px;
  padding:10px;
  border:2px solid #6f3d25;
  border-radius:18px;
  background:
    linear-gradient(180deg,#1c0b07,#0c0604);
  box-shadow:inset 0 0 0 1px rgba(218,145,67,.08);
}

.current-category-card{
  border:1px solid #65301e;
  border-radius:14px;
  padding:20px;
  background:
    radial-gradient(circle at 0 0,rgba(116,24,12,.26),transparent 48%),
    linear-gradient(180deg,#220c08,#120706);
}

.current-category-name{
  margin-top:13px;
  color:#f2dfc1;
  font-family:Georgia,serif;
  font-size:30px;
  line-height:1.08;
}

.current-category-copy{
  margin-top:14px;
  color:#d5a34e;
  font-size:15px;
  line-height:1.45;
}

.song-page-controls{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  flex-wrap:wrap;
  margin-top:18px;
  color:#e1bd7b;
}

.song-list-frame{
  min-width:0;
}

.guest-jukebox-view .song-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.jukebox-song-card{
  min-height:74px;
  grid-template-columns:54px minmax(0,1fr) auto !important;
  border:1px solid #6a3422 !important;
  border-radius:11px !important;
  background:
    linear-gradient(90deg,#29100b,#160906) !important;
}

.jukebox-song-card .code{
  width:42px;
  height:42px;
  border-radius:9px;
  display:grid;
  place-items:center;
  color:#1f1009;
  font-weight:900;
  background:linear-gradient(#e7bd5a,#d79c36);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}

.jukebox-song-card .title{
  font-size:17px;
  line-height:1.05;
}

.jukebox-song-card .artist{
  margin-top:3px;
  color:#e8b56c;
}

.jukebox-song-card .add{
  white-space:nowrap;
}

.empty-category{
  grid-column:1/-1;
  padding:32px;
  text-align:center;
  color:#c7996d;
  border:1px dashed #63331f;
  border-radius:10px;
}

.jukebox-footer{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:14px;
  padding:14px 22px;
  border:2px solid #66391f;
  border-radius:17px;
  background:linear-gradient(180deg,#1d0b07,#0b0504);
  color:#f2e1c2;
  font-size:13px;
  letter-spacing:.08em;
}

.jukebox-footer span{
  display:block;
  margin-top:4px;
  color:#d7a23d;
}

.footer-note{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:26px;
  color:#e6b34d;
  border:2px solid #79502c;
  background:#1a0b07;
}

.footer-right{
  text-align:right;
}

@media(max-width:1100px){
  .category-wheel{
    grid-template-columns:.8fr .9fr 1fr 1.45fr 1fr .9fr .8fr;
    min-height:210px;
  }
  .guest-song-deck{
    grid-template-columns:220px minmax(0,1fr);
  }
}

@media(max-width:850px){
  .vintage-status{
    grid-template-columns:1fr;
  }

  .jukebox-machine{
    padding-left:24px;
    padding-right:24px;
  }

  .jukebox-category-shell{
    grid-template-columns:58px minmax(0,1fr) 58px;
    gap:8px;
  }

  .category-arrow{
    width:54px;
    height:54px;
    font-size:34px;
  }

  .category-wheel{
    grid-template-columns:.8fr .95fr 1.6fr .95fr .8fr;
  }

  .category-slot:nth-child(1),
  .category-slot:nth-child(7){
    display:none;
  }

  .guest-song-deck{
    grid-template-columns:1fr;
  }

  .current-category-card{
    padding:14px;
  }

  .guest-jukebox-view .song-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:560px){
  .jukebox-sign{
    min-width:240px;
    font-size:34px;
  }

  .jukebox-machine{
    padding-top:62px;
  }

  .category-wheel{
    grid-template-columns:.9fr 1.5fr .9fr;
    min-height:180px;
  }

  .category-slot:nth-child(1),
  .category-slot:nth-child(2),
  .category-slot:nth-child(6),
  .category-slot:nth-child(7){
    display:none;
  }

  .category-slot{
    font-size:17px;
  }

  .category-slot.active{
    font-size:28px;
  }

  .jukebox-song-card{
    grid-template-columns:46px minmax(0,1fr) !important;
  }

  .jukebox-song-card .add{
    grid-column:2;
    justify-self:start;
  }

  .jukebox-footer{
    grid-template-columns:1fr auto;
  }

  .footer-right{
    display:none;
  }
}

/* v0.15.1 guest refinement */
.jukebox-machine{padding-top:66px;padding-bottom:18px}
.jukebox-category-shell{grid-template-columns:72px minmax(0,1fr) 72px}
.category-wheel{min-height:142px;grid-template-columns:.92fr .98fr 1.42fr 1.02fr;gap:7px;padding:10px}
.category-slot{min-height:116px;padding:8px 14px;font-size:clamp(18px,1.65vw,25px);line-height:1.04}
.category-slot.active{font-size:clamp(25px,2.4vw,38px)}
.category-arrow{width:62px;height:62px;font-size:38px}
.category-instruction{margin-top:10px}.category-counter{margin-top:3px}
.song-selection-pagination{margin-top:10px;padding:12px 14px 14px;text-align:center;border:1px solid #6a3422;border-radius:11px;background:linear-gradient(180deg,#21100a,#120806)}
.song-selection-pagination .eyebrow{margin-bottom:8px;font-size:13px;letter-spacing:.16em}
.song-selection-pagination .song-page-controls{margin:0;justify-content:center;gap:16px}
.song-page-label{min-width:130px;font-family:Georgia,serif;font-size:20px;font-weight:700;color:#f0d6a1}
.song-page-button{min-width:112px;padding:9px 13px;font-size:15px}
@media(max-width:850px){.category-wheel{grid-template-columns:.9fr 1.35fr 1fr;min-height:132px}.category-slot:first-child{display:none}.category-slot{min-height:108px}}
@media(max-width:560px){.category-wheel{grid-template-columns:1.45fr 1fr;min-height:120px}.category-slot:nth-child(1),.category-slot:nth-child(2){display:none}.category-slot{min-height:98px}.song-selection-pagination .song-page-controls{gap:8px}.song-page-button{min-width:auto;font-size:13px}.song-page-label{min-width:auto;font-size:17px}}

/* v0.15.2 admin additions */
.category-edit-panel{margin-top:14px;padding:14px;border:1px solid #6e362a;border-radius:10px;background:#180a08}
.category-edit-header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.category-edit-title{margin-top:4px;font-size:22px;font-family:Georgia,serif;color:#f0d6a1}
.category-edit-song-list{display:grid;gap:7px;margin-top:12px}
.category-edit-song{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 10px;border:1px solid #5d2d24;border-radius:8px;background:#110706}
.category-edit-song .title{font-weight:700}
.category-edit-song .artist{margin-top:2px;color:#d9a66a;font-size:12px}

/* v0.15.3 — Admin library search + album search */
.bulk-library-search{
  display:grid;
  grid-template-columns:minmax(220px,1fr) auto auto;
  gap:8px;
  align-items:center;
  margin-top:10px;
}
.bulk-no-results{
  padding:18px 10px;
  text-align:center;
}

.spotify-search-mode{
  display:flex;
  gap:8px;
  margin:10px 0 8px;
}
.spotify-mode-option{
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border:1px solid #6e362a;
  border-radius:999px;
  background:#180a08;
  cursor:pointer;
}
.spotify-mode-option input{
  accent-color:#a52a1e;
}
.spotify-album-result{
  grid-template-columns:auto minmax(0,1fr) auto !important;
}
.spotify-album-art{
  width:54px !important;
  height:54px !important;
}
.spotify-open-album-header{
  display:grid;
  grid-template-columns:72px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:10px;
  margin:10px 0;
  border:1px solid #6e362a;
  border-radius:10px;
  background:#180a08;
}
.spotify-open-album-header img{
  width:72px;
  height:72px;
  object-fit:cover;
  border-radius:7px;
}
.spotify-open-album-title{
  margin-top:3px;
  font-size:21px;
  font-family:Georgia,serif;
  color:#f0d6a1;
}
.spotify-album-actions{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

@media(max-width:700px){
  .bulk-library-search{
    grid-template-columns:1fr auto;
  }
  #bulkSearchSummary{
    grid-column:1/-1;
  }
  .spotify-open-album-header{
    grid-template-columns:56px minmax(0,1fr);
  }
  .spotify-open-album-header img{
    width:56px;
    height:56px;
  }
  .spotify-album-actions{
    grid-column:1/-1;
    justify-content:flex-start;
  }
}

/* =========================================================
   v0.15.4 — Centered Category Carousel with Edge Peeks
   ========================================================= */

.category-wheel{
  grid-template-columns:
    minmax(34px,.28fr)
    minmax(150px,.95fr)
    minmax(220px,1.35fr)
    minmax(150px,.95fr)
    minmax(34px,.28fr) !important;
  gap:7px !important;
  overflow:hidden;
  position:relative;
}

.category-slot{
  min-width:0;
}

.category-slot.active{
  transform:none !important;
  font-size:clamp(25px,2.35vw,38px) !important;
  z-index:3;
}

.category-slot.peek{
  opacity:.78;
  font-size:clamp(14px,1.1vw,18px) !important;
  padding-left:4px !important;
  padding-right:4px !important;
  filter:brightness(.9);
  cursor:pointer;
}

.category-slot.peek span{
  white-space:normal;
  overflow:hidden;
}

.category-slot.left-side.peek{
  transform:translateX(-42%) !important;
}

.category-slot.right-side.peek{
  transform:translateX(42%) !important;
}

.category-slot.left-side:not(.peek),
.category-slot.right-side:not(.peek){
  font-size:clamp(17px,1.55vw,24px) !important;
}

@media(max-width:850px){
  .category-wheel{
    grid-template-columns:
      minmax(24px,.2fr)
      minmax(125px,.9fr)
      minmax(185px,1.35fr)
      minmax(125px,.9fr)
      minmax(24px,.2fr) !important;
  }
  .category-slot.peek{
    display:block !important;
  }
}

@media(max-width:560px){
  .category-wheel{
    grid-template-columns:
      18px
      minmax(90px,.85fr)
      minmax(150px,1.35fr)
      minmax(90px,.85fr)
      18px !important;
  }
  .category-slot.peek{
    display:block !important;
    font-size:12px !important;
  }
  .category-slot.left-side.peek{
    transform:translateX(-58%) !important;
  }
  .category-slot.right-side.peek{
    transform:translateX(58%) !important;
  }
}

/* v0.15.6 backup/export */
.backup-card{margin:12px 0;padding:14px;border:1px solid #6e362a;border-radius:10px;background:#180a08}
.backup-title{margin:5px 0 4px;font-family:Georgia,serif;font-size:18px;font-weight:700;color:#f0d6a1}

/* v0.16.0 — shared library migration */
.shared-library-card{
  margin:12px 0;
  padding:14px;
  border:1px solid #6e362a;
  border-radius:10px;
  background:#180a08;
}
.shared-library-title{
  margin:5px 0 4px;
  font-family:Georgia,serif;
  font-size:19px;
  font-weight:700;
  color:#f0d6a1;
}
.shared-key-row{
  display:grid;
  grid-template-columns:minmax(220px,1fr) auto auto;
  gap:8px;
  align-items:center;
  margin-top:12px;
}
.shared-import-row{
  display:grid;
  grid-template-columns:minmax(220px,1fr) auto;
  gap:8px;
  align-items:center;
  margin-top:10px;
}
.shared-import-row input[type=file]{
  padding:8px;
  border:1px solid #6e362a;
  border-radius:8px;
  background:#110706;
  color:#f0d6a1;
}
@media(max-width:700px){
  .shared-key-row,.shared-import-row{grid-template-columns:1fr}
}

/* =========================================================
   v0.16.3 — Live Queue Sync + Scrollable Up Next
   ========================================================= */

.up-next-hint{
  margin:2px 0 7px;
  font-size:11px;
  color:#b98567;
}

.queue{
  min-height:42px;
}

.queue-summary{
  position:sticky;
  top:0;
  z-index:2;
  padding:3px 0 6px;
  margin-bottom:3px;
  color:#d6a244;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  background:#120806;
}

.queue-scroll-list{
  max-height:128px;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-right:5px;
  scrollbar-width:thin;
}

.queue-scroll-list .qrow{
  margin-bottom:5px;
}

.queue-scroll-list::-webkit-scrollbar{
  width:7px;
}

.queue-scroll-list::-webkit-scrollbar-thumb{
  background:#6e362a;
  border-radius:10px;
}

.queue-scroll-list::-webkit-scrollbar-track{
  background:#130806;
}

@media(max-width:850px){
  .queue-scroll-list{
    max-height:150px;
  }
}

/* =========================================================
   v0.16.4 — iPad landscape fit + faster live status
   ========================================================= */

/* Keep the compact desktop-like two-column layout on landscape iPads.
   Earlier <=850px rules stacked these panels and made the page much taller. */
@media (min-width:700px) and (max-width:900px) and (orientation:landscape){
  .vintage-status{
    grid-template-columns:1fr 1fr !important;
  }

  .guest-song-deck{
    grid-template-columns:minmax(190px,235px) minmax(0,1fr) !important;
  }

  .guest-jukebox-view .song-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .status-panel{
    min-height:72px !important;
    padding-top:10px !important;
    padding-bottom:10px !important;
  }

  .status-icon{
    width:46px !important;
    height:46px !important;
    font-size:22px !important;
  }

  .status-panel .title{
    font-size:18px !important;
  }

  .jukebox-machine{
    padding-top:58px !important;
    padding-bottom:12px !important;
  }

  .jukebox-sign{
    font-size:36px !important;
    padding-top:5px !important;
    padding-bottom:7px !important;
  }

  .category-wheel{
    min-height:112px !important;
  }

  .category-slot{
    min-height:88px !important;
  }

  .category-slot.active{
    font-size:30px !important;
  }

  .category-instruction{
    margin-top:5px !important;
    font-size:11px !important;
  }

  .category-counter{
    margin-top:1px !important;
  }

  .current-category-card{
    padding:12px !important;
  }

  .current-category-name{
    margin-top:7px !important;
    font-size:24px !important;
  }

  .current-category-copy{
    margin-top:7px !important;
    font-size:13px !important;
    line-height:1.25 !important;
  }

  .jukebox-song-card{
    min-height:60px !important;
  }

  .jukebox-song-card .title{
    font-size:15px !important;
  }

  .song-selection-pagination{
    margin-top:6px !important;
    padding:8px 10px !important;
  }

  .song-selection-pagination .eyebrow{
    margin-bottom:4px !important;
  }

  .song-page-label{
    font-size:18px !important;
  }

  .song-page-button{
    padding:7px 10px !important;
    font-size:14px !important;
  }

  .jukebox-footer{
    padding-top:8px !important;
    padding-bottom:8px !important;
  }

  .queue-scroll-list{
    max-height:82px !important;
  }

  .up-next-hint{
    margin-bottom:3px !important;
  }

  .queue-summary{
    padding-bottom:3px !important;
  }
}

/* =========================================================
   v0.16.5 — iPad Landscape Height Compression
   Goal: preserve width/layout, reduce total vertical height.
   ========================================================= */

@media (min-width:700px) and (max-width:1100px) and (orientation:landscape){

  .guest-jukebox-view{
    gap:7px !important;
  }

  .topbar{
    padding-top:7px !important;
    padding-bottom:7px !important;
  }

  .vintage-status{
    gap:7px !important;
  }

  .status-panel{
    min-height:58px !important;
    padding:7px 10px !important;
  }

  .status-icon{
    width:38px !important;
    height:38px !important;
    font-size:18px !important;
  }

  .status-panel .eyebrow{
    font-size:10px !important;
  }

  .status-panel .title{
    font-size:15px !important;
  }

  .status-panel .artist{
    font-size:11px !important;
  }

  .up-next-hint{
    display:none !important;
  }

  .queue-summary{
    font-size:10px !important;
    padding:1px 0 2px !important;
    margin-bottom:1px !important;
  }

  .queue-scroll-list{
    max-height:58px !important;
  }

  .queue-scroll-list .qrow{
    margin-bottom:2px !important;
    padding-top:2px !important;
    padding-bottom:2px !important;
    font-size:11px !important;
  }

  .jukebox-machine{
    padding-top:50px !important;
    padding-bottom:8px !important;
  }

  .jukebox-sign{
    top:7px !important;
    min-width:245px !important;
    padding:3px 24px 5px !important;
    font-size:30px !important;
  }

  .jukebox-machine::before,
  .jukebox-machine::after{
    top:42px !important;
    bottom:12px !important;
    width:22px !important;
  }

  .jukebox-category-shell{
    grid-template-columns:52px minmax(0,1fr) 52px !important;
    gap:6px !important;
  }

  .category-arrow{
    width:46px !important;
    height:46px !important;
    font-size:28px !important;
  }

  .category-wheel{
    min-height:88px !important;
    padding:6px !important;
    gap:5px !important;
  }

  .category-slot{
    min-height:70px !important;
    padding:5px 8px !important;
    font-size:15px !important;
  }

  .category-slot.active{
    font-size:24px !important;
  }

  .category-slot.peek{
    font-size:11px !important;
  }

  .category-instruction{
    margin-top:3px !important;
    font-size:9px !important;
    letter-spacing:.11em !important;
  }

  .category-counter{
    margin-top:0 !important;
    font-size:9px !important;
  }

  .guest-song-deck{
    gap:7px !important;
    padding:7px !important;
    grid-template-columns:minmax(170px,205px) minmax(0,1fr) !important;
  }

  .current-category-card{
    padding:9px !important;
  }

  .current-category-card .eyebrow{
    font-size:10px !important;
  }

  .current-category-name{
    margin-top:4px !important;
    font-size:20px !important;
  }

  .current-category-copy{
    margin-top:4px !important;
    font-size:11px !important;
    line-height:1.15 !important;
  }

  .guest-jukebox-view .song-grid{
    gap:5px !important;
  }

  .jukebox-song-card{
    min-height:48px !important;
    grid-template-columns:38px minmax(0,1fr) auto !important;
    padding:5px 7px !important;
  }

  .jukebox-song-card .code{
    width:32px !important;
    height:32px !important;
    font-size:11px !important;
  }

  .jukebox-song-card .title{
    font-size:13px !important;
    line-height:1.0 !important;
  }

  .jukebox-song-card .artist{
    margin-top:1px !important;
    font-size:10px !important;
  }

  .jukebox-song-card .add{
    min-height:30px !important;
    padding:5px 8px !important;
    font-size:11px !important;
  }

  .song-selection-pagination{
    margin-top:4px !important;
    padding:6px 8px !important;
  }

  .song-selection-pagination .eyebrow{
    display:none !important;
  }

  .song-selection-pagination .song-page-controls{
    gap:8px !important;
  }

  .song-page-label{
    min-width:90px !important;
    font-size:15px !important;
  }

  .song-page-button{
    min-width:86px !important;
    padding:5px 7px !important;
    font-size:11px !important;
  }

  .jukebox-footer{
    padding:5px 14px !important;
    min-height:36px !important;
    font-size:10px !important;
  }

  .jukebox-footer span{
    margin-top:1px !important;
  }

  .footer-note{
    width:34px !important;
    height:34px !important;
    font-size:18px !important;
  }
}

/* =========================================================
   v0.16.6 — Touch / Swipe Category Carousel
   ========================================================= */

.jukebox-category-shell{
  touch-action:pan-y;
}

.category-wheel{
  user-select:none;
  -webkit-user-select:none;
  transition:transform .11s ease, opacity .11s ease;
  will-change:transform;
}

.category-wheel.swipe-active{
  cursor:grabbing;
}

.category-wheel.swipe-left{
  transform:translateX(-16px);
  opacity:.88;
}

.category-wheel.swipe-right{
  transform:translateX(16px);
  opacity:.88;
}

/* Make neighboring title cards feel more obviously tappable on touch screens */
.category-slot:not(.active){
  cursor:pointer;
}

@media (hover:none) and (pointer:coarse){
  .category-slot:active{
    filter:brightness(1.12);
  }

  .category-arrow:active{
    transform:scale(.96);
  }
}
