/* ─────────────────────────────────────────────────────────────
   BDCSNY — private archive
   Palette: darkroom safelight. Cool ink ground, sodium amber
   accent, pale mint for active state.
   ───────────────────────────────────────────────────────────── */

:root{
  --ink:      #0B0F16;
  --ink-2:    #121927;
  --line:     rgba(232,230,225,.10);
  --line-2:   rgba(232,230,225,.18);
  --paper:    #E9E7E2;
  --muted:    #8B94A5;
  --amber:    #E8A33D;
  --amber-dim:rgba(232,163,61,.16);
  --mint:     #7FD1B9;
  --glass:    rgba(11,15,22,.72);

  --dock-h: 116px;
  --r: 10px;
  --dim: .74;   /* how far the scrim knocks the wallpaper back, 0–1 */

  --f-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --f-ui: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--f-ui);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button,input{ font:inherit; color:inherit; }
::selection{ background:var(--amber); color:#0B0F16; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; border-radius:4px; }

/* ── background layers ─────────────────────────────────────────
   The base layer, under everything. It shows while the clip is still
   loading, and instead of it for a reduced-motion visitor. Drop a
   still in media/bg/ and add it as a url(...) on the first line below
   if you want a picture there rather than the gradients.
   --dim (0–1) sets how hard the scrim knocks the background back. */
.bg{
  position:fixed; inset:-30px; z-index:0;
  background:
    radial-gradient(120% 90% at 80% -10%, #1B2536 0%, transparent 60%),
    radial-gradient(90% 80% at 0% 100%, #16202E 0%, transparent 55%),
    var(--ink);
}

/* The optional clip (CONFIG.bgVideo) sits on top of the still and fades in
   once it can actually play, so a missing or slow file just leaves the
   image showing rather than flashing black. */
.bg-video{
  position:fixed; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .8s ease;
  pointer-events:none;
}
.bg-video.is-on{ opacity:1; }
.bg-scrim{
  position:fixed; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(11,15,22,.55) 0%, rgba(11,15,22,.72) 55%, rgba(11,15,22,.92) 100%);
  opacity:var(--dim);
  pointer-events:none;
}

/* ── lock screen ───────────────────────────────────────────── */
.lock{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center; padding:24px;
  background:rgba(8,11,17,.86);
  backdrop-filter:blur(22px) saturate(.7);
  -webkit-backdrop-filter:blur(22px) saturate(.7);
}
.lock.is-out{ opacity:0; pointer-events:none; transition:opacity .5s ease; }
.lock-plate{
  width:min(380px,100%);
  border:1px solid var(--line-2);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(24,32,46,.9), rgba(13,18,27,.9));
  padding:34px 30px 26px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.lock-mark{ display:flex; align-items:center; gap:10px; }
.lock-dot{
  width:9px; height:9px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 0 4px var(--amber-dim);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:.45} 50%{opacity:1} }
.lock-call{
  font-family:var(--f-display); font-weight:800; font-size:26px;
  letter-spacing:.16em;
}
.lock-line{ margin:14px 0 22px; color:var(--muted); font-size:13.5px; }
.lock-field{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line-2); border-radius:var(--r);
  background:rgba(0,0,0,.3); padding:4px 4px 4px 14px;
  transition:border-color .2s;
}
.lock-field:focus-within{ border-color:var(--amber); }
.lock-field input{
  flex:1; background:none; border:0; outline:none; padding:10px 0;
  font-family:var(--f-mono); letter-spacing:.12em; font-size:14px;
}
.lock-go{
  display:grid; place-items:center; width:38px; height:38px;
  border:0; border-radius:8px; background:var(--amber); color:#0B0F16;
  cursor:pointer; transition:filter .15s;
}
.lock-go:hover{ filter:brightness(1.12); }
.lock-error{ margin:12px 0 0; color:#F08A7C; font-size:13px; }
.lock-foot{
  margin:26px 0 0; padding-top:16px; border-top:1px solid var(--line);
  color:var(--muted); font-family:var(--f-mono); font-size:11.5px; letter-spacing:.08em;
}
.lock-plate.shake{ animation:shake .32s; }
@keyframes shake{ 25%{transform:translateX(-7px)} 50%{transform:translateX(6px)} 75%{transform:translateX(-3px)} }

/* the "develop" reveal */
.app{
  position:relative; z-index:2;
  height:100%;
  display:flex; flex-direction:column;
}
.app.developing{ filter:blur(16px) saturate(.15); opacity:0; }
.app.developed{ filter:none; opacity:1; transition:filter 1s ease, opacity .8s ease; }

/* ── top bar ───────────────────────────────────────────────── */
.topbar{
  flex:0 0 auto;
  display:flex; align-items:center; gap:16px;
  padding:14px 22px;
  border-bottom:1px solid var(--line);
  background:var(--glass);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.brand{ display:flex; align-items:center; gap:9px; flex:0 0 auto; }
.brand-dot{
  width:8px; height:8px; border-radius:50%; background:var(--muted);
  transition:background .3s, box-shadow .3s;
}
.brand-dot.live{ background:var(--amber); box-shadow:0 0 0 4px var(--amber-dim); }
.brand-name{
  font-family:var(--f-display); font-weight:800; font-size:16px; letter-spacing:.15em;
}
.search{
  flex:1 1 auto; max-width:560px; margin:0 auto;
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--line); border-radius:999px;
  background:rgba(0,0,0,.32); padding:0 14px; height:40px;
  color:var(--muted); transition:border-color .2s;
}
.search:focus-within{ border-color:var(--line-2); color:var(--paper); }
.search input{
  flex:1; background:none; border:0; outline:none; color:var(--paper);
  font-size:14px; min-width:0;
}
.search input::-webkit-search-cancel-button{ filter:invert(.6); }
.search-kbd{
  font-family:var(--f-mono); font-size:11px; color:var(--muted);
  border:1px solid var(--line); border-radius:4px; padding:1px 6px;
}
.icon-btn{
  flex:0 0 auto; display:grid; place-items:center;
  width:38px; height:38px; border-radius:9px;
  border:1px solid var(--line); background:rgba(0,0,0,.25);
  color:var(--muted); cursor:pointer; transition:.18s;
}
.icon-btn:hover{ color:var(--paper); border-color:var(--line-2); }
/* holds the search bar where it sat when a button lived on the right */
.topbar-pad{ flex:0 0 auto; width:38px; }

/* ── tabs ──────────────────────────────────────────────────── */
.tabs{
  flex:0 0 auto;
  display:flex; gap:4px; padding:10px 22px 0;
  overflow-x:auto; scrollbar-width:none;
}
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  position:relative; white-space:nowrap;
  border:0; background:none; cursor:pointer;
  padding:8px 2px 12px; margin-right:22px;
  color:var(--muted); font-size:14px; font-weight:500;
  transition:color .18s;
}
.tab:hover{ color:var(--paper); }
.tab.is-on{ color:var(--paper); }
.tab.is-on::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--amber); border-radius:2px;
}

/* ── stage ─────────────────────────────────────────────────── */
.stage{
  flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
  padding:22px 22px calc(var(--dock-h) + 34px);
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
}
.stage::-webkit-scrollbar{ width:10px; }
.stage::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px; border:3px solid transparent; background-clip:content-box; }

.view-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; margin:6px 0 20px;
}
.view-title{
  margin:0; font-family:var(--f-display); font-weight:700;
  font-size:clamp(26px,4vw,38px); letter-spacing:-.02em; line-height:1;
}
.empty{ color:var(--muted); font-size:14px; padding:30px 0; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line-2); border-radius:999px;
  background:rgba(255,255,255,.04); color:var(--paper);
  padding:9px 16px; font-size:13.5px; font-weight:500; cursor:pointer;
  transition:.18s;
}
.btn:hover{ background:rgba(255,255,255,.09); }
.btn-primary{ background:var(--amber); border-color:var(--amber); color:#0B0F16; font-weight:600; }
.btn-primary:hover{ background:var(--amber); filter:brightness(1.1); }
.btn-ghost{ background:none; color:var(--muted); }

/* ── album grid ────────────────────────────────────────────── */
.grid{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}
.card{ cursor:pointer; }
.card-art{
  position:relative; aspect-ratio:1; border-radius:var(--r);
  overflow:hidden; border:1px solid var(--line);
  background:var(--ink-2);
}
.card-art img{ width:100%; height:100%; object-fit:cover; display:block; }
.card-fallback{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--f-display); font-weight:800; font-size:40px;
  letter-spacing:.06em; color:rgba(255,255,255,.9);
}
.card-play{
  position:absolute; right:10px; bottom:10px;
  width:44px; height:44px; border-radius:50%; border:0;
  background:var(--amber); color:#0B0F16;
  display:grid; place-items:center; cursor:pointer;
  opacity:0; transform:translateY(8px);
  transition:opacity .2s, transform .2s;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}
.card:hover .card-play,
.card:focus-within .card-play{ opacity:1; transform:none; }
.card-meta{ padding:12px 2px 0; }
.card-title{
  font-family:var(--f-display); font-weight:700; font-size:16px;
  letter-spacing:-.01em; line-height:1.25;
}
.card-sub{
  margin-top:3px; color:var(--muted); font-family:var(--f-mono);
  font-size:11.5px; letter-spacing:.04em;
}

/* ── song list ─────────────────────────────────────────────── */
.group{ margin-bottom:30px; }
.group-head{
  display:flex; align-items:center; gap:14px;
  padding:0 0 10px; border-bottom:1px solid var(--line); margin-bottom:6px;
}
.group-art{
  width:40px; height:40px; border-radius:7px; overflow:hidden;
  flex:0 0 auto; background:var(--ink-2); display:grid; place-items:center;
  font-family:var(--f-display); font-weight:800; font-size:15px;
}
.group-art img{ width:100%; height:100%; object-fit:cover; }
.group-art-fb{
  width:100%; height:100%; display:grid; place-items:center;
  font-family:var(--f-display); font-weight:800; font-size:14px;
  color:rgba(255,255,255,.9);
}
.group-name{ font-family:var(--f-display); font-weight:700; font-size:17px; }
.group-count{ color:var(--muted); font-family:var(--f-mono); font-size:11.5px; }
.group-play{ margin-left:auto; }

.row{
  display:grid; align-items:center; gap:14px;
  grid-template-columns:34px 1fr auto 30px;
  padding:9px 10px; border-radius:8px; cursor:pointer;
  transition:background .14s;
}
.row:hover{ background:rgba(255,255,255,.055); }
.row.is-current{ background:rgba(232,163,61,.09); }
.row-num{
  position:relative; display:grid; place-items:center;
  font-family:var(--f-mono); font-size:12.5px; color:var(--muted);
}
.row:hover .row-num .num{ opacity:0; }
.row-go{
  position:absolute; inset:0; display:grid; place-items:center;
  opacity:0; color:var(--paper); transition:opacity .14s;
}
.row:hover .row-go{ opacity:1; }
.row.is-current .row-num .num{ opacity:0; }
.row.is-current .row-go{ opacity:1; }
.row-title{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:14.5px;
}
.row.is-current .row-title{ color:var(--amber); }
.row-sub{
  display:block; color:var(--muted); font-size:12.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.row-time{ font-family:var(--f-mono); font-size:12.5px; color:var(--muted); }

/* play-next, tucked at the end of the row */
.row-next{
  display:grid; place-items:center; width:30px; height:30px;
  border:0; border-radius:7px; background:none; color:var(--muted);
  cursor:pointer; opacity:0; transition:opacity .14s, color .14s, background .14s;
}
.row:hover .row-next,
.row:focus-within .row-next,
.row.is-current .row-next{ opacity:1; }
.row-next:hover{ color:var(--amber); background:rgba(255,255,255,.08); }
.row-next:focus-visible{ opacity:1; }

/* ── album view ────────────────────────────────────────────── */
.back{
  display:inline-flex; align-items:center; gap:6px;
  border:0; background:none; cursor:pointer; padding:4px 6px 4px 0;
  margin-bottom:14px; color:var(--muted); font-size:13.5px;
  transition:color .16s;
}
.back:hover{ color:var(--paper); }

.album-hero{
  display:flex; align-items:flex-end; gap:24px;
  margin-bottom:26px;
}
.album-hero-art{
  position:relative; width:190px; height:190px; flex:0 0 auto;
  border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); background:var(--ink-2);
  box-shadow:0 18px 46px rgba(0,0,0,.5);
}
.album-hero-art img{ width:100%; height:100%; object-fit:cover; display:block; }
.album-hero-fb{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--f-display); font-weight:800; font-size:52px;
  letter-spacing:.06em; color:rgba(255,255,255,.9);
}
.album-hero-meta{ min-width:0; padding-bottom:4px; }
.album-kicker{
  margin:0 0 8px; font-family:var(--f-mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.album-title{
  margin:0; font-family:var(--f-display); font-weight:700;
  font-size:clamp(30px,5.5vw,54px); letter-spacing:-.025em; line-height:1.02;
}
.album-sub{
  margin:10px 0 0; color:var(--muted);
  font-family:var(--f-mono); font-size:12px; letter-spacing:.04em;
}
.album-actions{ display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; }

/* ── queue panel ───────────────────────────────────────────── */
.qpanel{
  position:fixed; z-index:30;
  right:22px; bottom:calc(var(--dock-h) + 12px);
  width:min(360px, calc(100vw - 32px));
  max-height:min(460px, calc(100vh - var(--dock-h) - 40px));
  display:flex; flex-direction:column;
  border:1px solid var(--line-2); border-radius:14px;
  background:linear-gradient(180deg,#18202E,#0F151F);
  box-shadow:0 28px 70px rgba(0,0,0,.6);
  animation:qrise .2s ease;
}
@keyframes qrise{ from{ opacity:0; transform:translateY(10px) } }
.qpanel-head{
  display:flex; align-items:center; gap:10px;
  padding:16px 16px 12px; border-bottom:1px solid var(--line);
}
.qpanel-titles{ margin-right:auto; min-width:0; }
.qpanel-head h2{ margin:0; font-family:var(--f-display); font-size:17px; font-weight:700; }
.qpanel-count{
  margin:2px 0 0; color:var(--muted);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.06em;
}
.qpanel-clear{ padding:6px 12px; font-size:12.5px; }
.qpanel-head .icon-btn{ width:32px; height:32px; }
.qpanel-list{
  flex:1 1 auto; overflow-y:auto; padding:8px;
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
}
.qpanel-list::-webkit-scrollbar{ width:9px; }
.qpanel-list::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px; border:3px solid transparent; background-clip:content-box; }
.qpanel-list .empty{ padding:18px 10px; font-size:13px; }
.qpanel-hint{
  margin:0; padding:9px 16px calc(11px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  color:var(--muted); font-family:var(--f-mono); font-size:10.5px; letter-spacing:.06em;
}

.q-row{
  display:grid; align-items:center; gap:10px;
  grid-template-columns:14px 22px 1fr 26px;
  padding:7px 8px; border-radius:8px; cursor:pointer;
  transition:background .14s, opacity .14s;
}
.q-row:hover{ background:rgba(255,255,255,.06); }
.q-row.is-past{ opacity:.45; }
.q-row.is-current{ background:rgba(232,163,61,.1); }
.q-row.is-current .q-title{ color:var(--amber); }
.q-row.is-drag{ opacity:.35; }
.q-row.is-over{ box-shadow:inset 0 2px 0 var(--amber); }
.q-grip{ color:var(--muted); cursor:grab; display:grid; place-items:center; }
.q-row:active .q-grip{ cursor:grabbing; }
.q-idx{
  display:grid; place-items:center;
  font-family:var(--f-mono); font-size:11.5px; color:var(--muted);
}
.q-text{ min-width:0; }
.q-title{
  display:block; font-size:13.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.q-sub{
  display:block; color:var(--muted); font-size:11.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.q-x{
  display:grid; place-items:center; width:26px; height:26px;
  border:0; border-radius:6px; background:none; color:var(--muted);
  cursor:pointer; opacity:0; transition:.14s;
}
.q-row:hover .q-x,.q-row:focus-within .q-x{ opacity:1; }
.q-x:hover{ color:#F08A7C; background:rgba(255,255,255,.08); }

/* queue count on the dock button */
.ctl{ position:relative; }
.ctl-badge{
  position:absolute; top:3px; right:2px; min-width:16px; height:16px;
  padding:0 4px; border-radius:99px;
  background:var(--amber); color:#0B0F16;
  font-family:var(--f-mono); font-size:10px; line-height:16px; text-align:center;
  pointer-events:none;
}

/* ── toast ─────────────────────────────────────────────────── */
.toast{
  position:fixed; z-index:80;
  left:50%; bottom:calc(var(--dock-h) + 18px);
  transform:translate(-50%,10px);
  padding:10px 16px; border-radius:999px;
  border:1px solid var(--line-2);
  background:rgba(24,32,46,.96);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 14px 40px rgba(0,0,0,.5);
  font-size:13px; white-space:nowrap;
  max-width:calc(100vw - 32px); overflow:hidden; text-overflow:ellipsis;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* playing equalizer */
.eq{ display:flex; align-items:flex-end; gap:2px; height:13px; }
.eq i{ width:2px; background:var(--amber); border-radius:1px; animation:eq .9s ease-in-out infinite; }
.eq i:nth-child(1){ height:40%; animation-delay:-.2s }
.eq i:nth-child(2){ height:90%; animation-delay:-.55s }
.eq i:nth-child(3){ height:60%; animation-delay:-.35s }
@keyframes eq{ 0%,100%{transform:scaleY(.35)} 50%{transform:scaleY(1)} }
.eq.paused i{ animation-play-state:paused; }

/* gallery placeholder */
.soon{
  border:1px dashed var(--line-2); border-radius:12px;
  padding:44px 28px; text-align:center; color:var(--paper);
}
.soon p{ margin:0; }
.soon-sub{ margin-top:8px !important; color:var(--muted); font-size:13.5px; }
code{
  font-family:var(--f-mono); font-size:.9em;
  background:rgba(255,255,255,.07); padding:1px 5px; border-radius:4px;
}

/* ── player dock ───────────────────────────────────────────── */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  height:var(--dock-h);
  padding:0 22px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  background:var(--glass);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
}
.dock-viz{
  position:absolute; inset:auto 0 0 0; width:100%; height:100%;
  opacity:.5; pointer-events:none;
}
.dock-seek{
  position:relative; display:flex; align-items:center; gap:12px;
  padding:14px 0 10px;
}
.time{ font-family:var(--f-mono); font-size:11.5px; color:var(--muted); width:38px; }
.time:last-child{ text-align:right; }
.seek{
  position:relative; flex:1; height:16px; display:flex; align-items:center;
  cursor:pointer;
}
.seek::before{
  content:""; position:absolute; left:0; right:0; height:3px;
  background:rgba(255,255,255,.14); border-radius:99px;
}
.seek-fill{
  position:absolute; left:0; height:3px; width:0;
  background:var(--amber); border-radius:99px;
}
.seek-knob{
  position:absolute; left:0; width:11px; height:11px; border-radius:50%;
  background:var(--paper); transform:translateX(-50%) scale(0);
  transition:transform .15s;
}
.seek:hover .seek-knob,.seek:focus-visible .seek-knob{ transform:translateX(-50%) scale(1); }

.dock-body{
  position:relative;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
}
.np{ display:flex; align-items:center; gap:12px; min-width:0; }
.np-art{
  width:44px; height:44px; border-radius:7px; flex:0 0 auto;
  background:var(--ink-2); border:1px solid var(--line);
  background-size:cover; background-position:center;
}
.np-text{ min-width:0; }
.np-title{
  font-size:14px; font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.np-sub{
  color:var(--muted); font-size:12.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.controls{ display:flex; align-items:center; gap:6px; }
.ctl{
  display:grid; place-items:center; width:38px; height:38px;
  border:0; border-radius:50%; background:none; color:var(--muted);
  cursor:pointer; transition:color .16s, background .16s;
}
.ctl:hover{ color:var(--paper); background:rgba(255,255,255,.07); }
.ctl.is-on{ color:var(--mint); }
.ctl-play{
  width:46px; height:46px; background:var(--paper); color:#0B0F16; margin:0 4px;
}
.ctl-play:hover{ background:#fff; color:#0B0F16; transform:scale(1.05); }

.dock-right{ display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.vol{
  -webkit-appearance:none; appearance:none; width:96px; height:3px;
  background:rgba(255,255,255,.16); border-radius:99px; outline:none; cursor:pointer;
}
.vol::-webkit-slider-thumb{
  -webkit-appearance:none; width:11px; height:11px; border-radius:50%;
  background:var(--paper); cursor:pointer;
}
.vol::-moz-range-thumb{ width:11px; height:11px; border:0; border-radius:50%; background:var(--paper); }

/* ── lightbox (the gallery tab pops one of these) ──────────── */
.sheet-wrap{ position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:20px; }
.sheet-scrim{ position:absolute; inset:0; background:rgba(5,7,11,.7); backdrop-filter:blur(6px); }
.sheet{
  position:relative; width:min(420px,100%);
  border:1px solid var(--line-2); border-radius:14px;
  background:linear-gradient(180deg,#18202E,#0F151F);
  padding:22px; box-shadow:0 30px 70px rgba(0,0,0,.55);
}

/* ── responsive ────────────────────────────────────────────── */
@media (max-width:760px){
  :root{ --dock-h:154px; }
  .topbar{ flex-wrap:wrap; padding:12px 16px; gap:10px; }
  .search{ order:3; flex-basis:100%; max-width:none; }
  .search-kbd{ display:none; }
  .brand{ margin-right:auto; }
  .tabs,.stage{ padding-left:16px; padding-right:16px; }
  .dock{ padding-left:16px; padding-right:16px; }
  /* the track name and the transport both want the width, so stack them */
  .dock-body{
    grid-template-columns:1fr auto;
    grid-template-areas:"np queue" "controls controls";
    gap:2px 10px;
  }
  .np{ grid-area:np; }
  .dock-right{ grid-area:queue; }
  .controls{ grid-area:controls; justify-content:center; }
  /* keep the queue reachable, drop the volume slider instead */
  .dock-right #muteBtn,.dock-right .vol{ display:none; }
  .grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; }
  .card-play{ opacity:1; transform:none; width:38px; height:38px; }
  .view-head{ flex-wrap:wrap; }

  .row-next{ opacity:1; }
  .q-x{ opacity:1; }

  .album-hero{ display:block; }
  .album-hero-art{ width:150px; height:150px; margin-bottom:16px; }
  .album-hero-meta{ padding-bottom:0; }

  .qpanel{
    right:8px; left:8px; width:auto;
    bottom:calc(var(--dock-h) + 8px);
    max-height:calc(100vh - var(--dock-h) - 24px);
  }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .app.developing{ filter:none; opacity:1; }
}