/* ═══════════════════════════════════════════════════════════════════════
   MUJIX — LIQUID GLASS
   Apple's Liquid Glass material language (iOS / macOS 26).

   Principles, taken from Apple's Human Interface Guidelines:
   · Glass is for the CONTROL layer — navigation, tab bars, sheets, buttons,
     popovers — floating above content, never competing with it.
   · The material is translucent, blurs and saturates what is behind it, and
     is edged with a thin specular highlight where light catches the rim.
   · Concentric, continuous corners: large radii on containers, capsules on
     controls.
   · System colours only (blue is the one tint), SF Pro type with Apple's
     weights, sentence-case labels, no decorative gradients or glows.
   · Every state has a fallback: Reduce Transparency, Increase Contrast
     and Reduce Motion are honoured; no backdrop-filter → solid surfaces.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* Surfaces (fills sit on top of the blurred ambient field) */
  --bg:            #070a14;
  --s1:            rgba(255,255,255,.075);
  --s2:            rgba(255,255,255,.130);
  --b1:            rgba(255,255,255,.120);
  --b2:            rgba(255,255,255,.220);

  /* System tint — Apple "blue", and indigo as its quiet companion */
  --ac:            #0a84ff;
  --ac-rgb:        10,132,255;
  --ac-h:          #409cff;
  --pk:            #5e5ce6;
  --pk-rgb:        94,92,230;
  --pk-h:          #7d7aff;
  --blue:          #0a84ff;
  --blue-rgb:      10,132,255;
  --blue-h:        #409cff;
  --glow:          rgba(10,132,255,.30);

  /* Labels — Apple's dark-mode label hierarchy */
  --tx:            #ffffff;
  --dm:            rgba(235,235,245,.68);
  --mt:            rgba(235,235,245,.46);

  /* Panels */
  --panel:         rgba(34,38,52,.58);
  --panel-border:  rgba(255,255,255,.16);

  /* Shape — continuous, concentric */
  --r:             14px;
  --rl:            22px;
  --rxl:           32px;

  /* Typography — SF Pro, system weights */
  --font-body:     -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', 'Segoe UI', Roboto, sans-serif;
  --font-display:  -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', Roboto, sans-serif;
  --font-mono:     'SF Mono', ui-monospace, Menlo, monospace;
  --fw-normal:     400;
  --fw-bold:       600;
  --fw-black:      700;
  --ls-tight:      -.022em;
  --ls-wide:       .03em;

  /* Motion — Apple's spring-like ease-out; a gentle overshoot for "bounce" */
  --anim-dur:      .38s;
  --anim-ease:     cubic-bezier(.25,.8,.25,1);
  --anim-bounce:   cubic-bezier(.34,1.35,.64,1);

  /* The material itself */
  --lg-blur:       blur(30px) saturate(190%);
  --lg-blur-soft:  blur(22px) saturate(170%);
  --lg-fill:       rgba(255,255,255,.075);
  --lg-fill-hover: rgba(255,255,255,.115);
  --lg-fill-thick: rgba(30,34,48,.62);
  --lg-stroke:     rgba(255,255,255,.14);
  --lg-edge:       inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(255,255,255,.05), inset 1px 0 0 rgba(255,255,255,.08), inset -1px 0 0 rgba(255,255,255,.04);
  --lg-sheen:      linear-gradient(145deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.03) 38%, rgba(255,255,255,0) 60%);
  --lg-shadow:     0 10px 34px rgba(0,0,0,.34), 0 1px 3px rgba(0,0,0,.28);
  --lg-field:      rgba(118,118,128,.26);
  --lg-field-focus:rgba(118,118,128,.36);

  /* Legacy tokens the views read */
  --logo-gradient: none;
  --grad-primary:  linear-gradient(180deg, #2b95ff 0%, #0a84ff 100%);
  --shadow-sm:     0 2px 10px rgba(0,0,0,.30);
  --shadow-md:     var(--lg-shadow);
  --glass-blur:    30px;
  --glass-bg:      var(--lg-fill-thick);

  /* Logo */
  --logo-mark:     #0a84ff;
  --logo-fg:       #ffffff;

  /* System colours for status */
  --sys-green:     #30d158;
  --sys-red:       #ff453a;
  --sys-orange:    #ff9f0a;
}

*, *::before, *::after { box-sizing: border-box }
html { height: 100%; overflow: hidden; touch-action: manipulation; -webkit-overflow-scrolling: touch; -webkit-text-size-adjust: 100% }

/* ── Ambient field — what the glass refracts. Soft, large, unobtrusive. ── */
body {
  background:
    radial-gradient(70% 55% at 10% 4%,  rgba(10,132,255,.62) 0%, transparent 72%),
    radial-gradient(60% 50% at 96% 12%, rgba(191,90,242,.48) 0%, transparent 72%),
    radial-gradient(70% 55% at 80% 100%, rgba(48,209,200,.38) 0%, transparent 72%),
    radial-gradient(55% 46% at 0% 96%,  rgba(255,55,95,.30)  0%, transparent 72%),
    radial-gradient(90% 70% at 50% 50%, rgba(38,52,110,.55) 0%, transparent 80%),
    var(--bg);
  background-attachment: fixed;
  color: var(--tx);
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin: 0; padding: 0;
  position: fixed; width: 100%; height: 100%; overflow: hidden;
}
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}
#app { height: 100%; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch }
@media(display-mode:standalone),(display-mode:fullscreen),(display-mode:window-controls-overlay) {
  body { height: 100vh; padding-top: 0; padding-bottom: 0 }
}
@media(min-width:1280px) { :focus-visible { outline: 3px solid rgba(var(--ac-rgb),.55) !important; outline-offset: 2px !important } }
:focus-visible { outline: 3px solid rgba(var(--ac-rgb),.55); outline-offset: 2px }
::selection { background: rgba(var(--ac-rgb),.38); color: inherit }

/* Scrollbars — thin, translucent, rounded, like macOS overlay scrollers */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent }
::-webkit-scrollbar { width: 10px; height: 10px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.26); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.4); background-clip: padding-box; border: 3px solid transparent }

/* Apple never ships 800/900 weights in UI chrome — soften inline heavy weights */
[style*="font-weight:800"], [style*="font-weight: 800"],
[style*="font-weight:900"], [style*="font-weight: 900"] { font-weight: 700 !important }
h1, h2, h3 { letter-spacing: var(--ls-tight) }
code, kbd, samp { font-family: var(--font-mono) }

/* ── Motion ── */
@keyframes au { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:translateY(0) } }
@keyframes asc { from { opacity:0; transform:scale(.96) } to { opacity:1; transform:scale(1) } }
@keyframes lp { from { transform:rotate(0deg) } to { transform:rotate(360deg) } }
@keyframes blink { 0%,100% { opacity:1 } 50% { opacity:.3 } }
@keyframes toast-in { from { opacity:0; transform:translate(-50%,10px) scale(.96) } to { opacity:1; transform:translate(-50%,0) scale(1) } }
.au  { animation: au  var(--anim-dur) var(--anim-ease) both }
.au1 { animation: au  var(--anim-dur) .04s var(--anim-ease) both }
.au2 { animation: au  var(--anim-dur) .08s var(--anim-ease) both }
.asc { animation: asc var(--anim-dur) var(--anim-bounce) both }

/* ═══════════════════════════════════════════════════════════════════════
   THE MATERIAL — one recipe, applied to every floating surface
   ═══════════════════════════════════════════════════════════════════════ */
/* Content cards carry the glass LOOK (tinted translucent fill, sheen, rim light)
   but deliberately no backdrop-filter: blur is reserved for the floating control
   layer below, as in Apple's guidance, and stacking many blurred cards inside
   scrolling/animated containers fails to paint in Chromium. */
.gl, .gl-d, .ds-card, .nfc-card, .tv-card {
  background: var(--lg-sheen), var(--lg-fill);
  border: 1px solid var(--lg-stroke);
  border-radius: var(--rl);
  box-shadow: var(--lg-edge), var(--lg-shadow);
  transition: background var(--anim-dur) var(--anim-ease), border-color var(--anim-dur) var(--anim-ease),
              box-shadow var(--anim-dur) var(--anim-ease), transform var(--anim-dur) var(--anim-ease);
}
.gl:hover, .ds-card:hover, .nfc-card:hover {
  background: var(--lg-sheen), var(--lg-fill-hover);
  border-color: rgba(255,255,255,.2);
}
.gl-d {
  background: var(--lg-sheen), var(--lg-fill-thick);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border-radius: var(--rxl);
}
/* admin cards: no stripe, the status reads through the pill, not a border */
.ds-card { border-left: 1px solid var(--lg-stroke) }
.ds-card.is-live { border-color: rgba(48,209,88,.34); background: linear-gradient(180deg, rgba(48,209,88,.10), transparent 120px), var(--lg-sheen), var(--lg-fill) }
.ds-card-link { background: rgba(0,0,0,.14) }

/* Floating control layer: bars, popovers, sheets */
.top-nav, .bot-bar, .rc-header, .rc-dock, .rc-vol-popover, .rc-toast,
#theme-picker-menu, .srch-drop, .modal-box, .sheet-panel, .tv-pop-menu, .cg-form {
  background: var(--lg-sheen), var(--lg-fill-thick) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  backdrop-filter: var(--lg-blur) !important;
  border-color: var(--lg-stroke) !important;
  box-shadow: var(--lg-edge), var(--lg-shadow) !important;
  color: var(--tx);
}

/* Dim + blur the world behind a modal, as iOS does */
.modal-ov {
  background: rgba(0,0,0,.34);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
}
.modal-box { border-radius: 30px !important; border: 1px solid var(--lg-stroke) !important }
.sheet-panel { border-radius: 30px 30px 0 0 !important; border: 1px solid var(--lg-stroke) !important; border-bottom: none !important }
.sheet-handle { background: rgba(255,255,255,.34) !important; border-radius: 3px !important }

/* ── Top bar — a glass slab with a hairline, content scrolls beneath ── */
.top-nav {
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)), rgba(14,17,28,.52) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 0 rgba(0,0,0,.18) !important;
}

/* Navigation links — a glass capsule marks the current section */
.nav-a {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: .9rem !important;
  letter-spacing: -.011em !important;
  text-transform: none !important;
  color: var(--dm) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 8px 15px !important;
  background: transparent !important;
  transition: color .2s var(--anim-ease), background .2s var(--anim-ease), box-shadow .2s var(--anim-ease) !important;
}
.nav-a:hover { color: var(--tx) !important; background: rgba(255,255,255,.08) !important }
.nav-a.on {
  color: var(--tx) !important;
  background: rgba(255,255,255,.15) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(255,255,255,.04), 0 2px 10px rgba(0,0,0,.18) !important;
}
.nav-a.on i { color: var(--ac-h) }

/* Header buttons: palette / appearance / help */
.theme-btn {
  background: var(--lg-sheen), rgba(255,255,255,.10) !important;
  border: 1px solid var(--lg-stroke) !important;
  border-radius: 999px !important;
  color: var(--tx) !important;
  font-weight: 500 !important;
  box-shadow: var(--lg-edge) !important;
  transition: background .2s var(--anim-ease), transform .2s var(--anim-bounce) !important;
}
.theme-btn:hover { background: var(--lg-sheen), rgba(255,255,255,.18) !important; color: var(--tx) !important; border-color: rgba(255,255,255,.26) !important }
.theme-btn:active { transform: scale(.94) }
#theme-picker-menu { border-radius: 24px !important; padding: 8px !important }
.theme-picker-opt { border-radius: 14px !important; background-color: transparent !important; font-weight: 500 !important }
.theme-picker-opt:hover { background-color: rgba(255,255,255,.10) !important }

/* ── Tab bar (mobile) — the floating glass capsule of iOS 26 ── */
.bot-bar {
  margin: 6px 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  padding: 6px !important;
  gap: 2px;
  border: 1px solid var(--lg-stroke) !important;
  border-radius: 34px !important;
}
.bot-a {
  font-family: var(--font-body);
  font-size: .625rem !important; font-weight: 600 !important;
  letter-spacing: .005em !important; text-transform: none !important;
  color: var(--dm) !important;
  padding: 7px 4px 6px !important;
  border-radius: 28px;
  transition: background .25s var(--anim-ease), color .25s var(--anim-ease) !important;
}
.bot-a i { font-size: 1.12rem !important }
.bot-a.on { color: var(--ac-h) !important; background: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(255,255,255,.04) }
.bot-a.on i { transform: scale(1.04) !important }

/* ── Inputs — Apple's recessed, filled fields ── */
.inp, .srch-input, .modal-inp, .venue-input, .tv-input, .wz-input, .search-input {
  font-family: var(--font-body) !important;
  font-size: 1rem;
  letter-spacing: -.011em;
  background: var(--lg-field) !important;
  color: var(--tx) !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  outline: none !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.18) !important;
  transition: background .2s var(--anim-ease), border-color .2s var(--anim-ease), box-shadow .2s var(--anim-ease) !important;
}
.inp { padding: 12px 16px }
.inp:focus, .srch-input:focus, .modal-inp:focus, .venue-input:focus, .tv-input:focus, .wz-input:focus, .search-input:focus {
  background: var(--lg-field-focus) !important;
  border-color: rgba(var(--ac-rgb),.85) !important;
  box-shadow: 0 0 0 4px rgba(var(--ac-rgb),.26), inset 0 1px 2px rgba(0,0,0,.14) !important;
}
.inp::placeholder, .srch-input::placeholder, .modal-inp::placeholder { color: var(--mt) !important }
.srch-input { border-radius: 999px !important }
.pl-search, .pl-sort, .ms-search { background: var(--lg-field); border: 1px solid transparent; border-radius: 14px }
.pl-search:focus, .ms-search:focus { border-color: rgba(var(--ac-rgb),.85); box-shadow: 0 0 0 4px rgba(var(--ac-rgb),.24) }
html #pl-filter {
  background: var(--lg-field); border: 1px solid transparent; border-radius: 999px; font-weight: 500;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.18);
}
html #pl-filter:hover { border-color: rgba(255,255,255,.18) }
html #pl-filter:focus { background: var(--lg-field-focus); border-color: rgba(var(--ac-rgb),.85); box-shadow: 0 0 0 4px rgba(var(--ac-rgb),.26) }
html[data-theme="light"] #pl-filter { box-shadow: inset 0 0 0 .5px rgba(60,60,67,.12) }
html[data-theme="light"] #pl-filter:hover { border-color: rgba(60,60,67,.2) }
html[data-theme="light"] #pl-filter:focus { background: rgba(255,255,255,.8) }
select.inp, select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23ebebf5' stroke-opacity='.6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px !important;
}
select option { background: #1c1c1e; color: #fff }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ac) }
input[type="range"] { accent-color: var(--ac) }
.srch-drop { border-radius: 22px !important; overflow: hidden }
.srch-drop a { color: var(--tx) !important }
.srch-drop a:hover, .srch-row:hover { background: rgba(255,255,255,.10) !important }

/* ── Buttons — capsules. Prominent = tinted glass; the rest are plain glass ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 600; font-size: .94rem; letter-spacing: -.011em;
  text-transform: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 11px 22px;
  transition: background .22s var(--anim-ease), transform .28s var(--anim-bounce), box-shadow .22s var(--anim-ease), filter .22s;
}
.btn:active { transform: scale(.965) }
.btn-p, .pub-btn, .play-now-btn {
  background: linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 52%), var(--ac) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(0,0,0,.14), 0 6px 18px rgba(var(--ac-rgb),.34) !important;
  text-transform: none !important;
  letter-spacing: -.011em !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.12);
}
.btn-p:hover, .pub-btn:hover, .play-now-btn:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.36) 0%, rgba(255,255,255,0) 52%), var(--ac-h) !important;
  transform: none !important; opacity: 1 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.14), 0 8px 24px rgba(var(--ac-rgb),.42) !important;
}
.btn-p:active, .pub-btn:active, .play-now-btn:active { transform: scale(.965) !important }
.btn-pk {
  background: linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 52%), linear-gradient(135deg, var(--ac), var(--pk)) !important;
  color: #fff; border: 1px solid rgba(255,255,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 6px 18px rgba(var(--pk-rgb),.34);
}
.btn-pk:hover { filter: brightness(1.08); transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 24px rgba(var(--pk-rgb),.42) }
.btn-g {
  background: var(--lg-sheen), rgba(255,255,255,.10);
  color: var(--tx);
  border: 1px solid var(--lg-stroke);
  box-shadow: var(--lg-edge);
}
.btn-g:hover { background: var(--lg-sheen), rgba(255,255,255,.17); color: var(--tx); border-color: rgba(255,255,255,.26) }
.btn-r {
  background: rgba(255,69,58,.16); color: #ff6961;
  border: 1px solid rgba(255,69,58,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-r:hover { background: rgba(255,69,58,.26) }

/* Primary actions in auth / setup forms span the sheet, as in iOS sign-in flows */
.gl-d form > .btn-p, .gl-d form > .btn-pk { width: 100%; font-size: 1rem; padding-top: 14px !important; padding-bottom: 14px !important }
a.btn, a.btn:hover, a.pub-btn, a.play-now-btn { text-decoration: none !important }

/* ── Labels — iOS grouped-list section headers ── */
.lbl {
  font-size: .75rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .03em; color: var(--mt); display: block; margin-bottom: 8px;
}

/* ── Badges — tinted capsules ── */
.badge { font-size: .68rem; font-weight: 600; letter-spacing: .01em; text-transform: none; padding: 3px 10px; border-radius: 999px; border: 1px solid transparent }
.bp { background: rgba(var(--pk-rgb),.22); color: #b4b3ff; border-color: rgba(var(--pk-rgb),.34) }
.bb { background: rgba(var(--ac-rgb),.20); color: #7cc0ff; border-color: rgba(var(--ac-rgb),.32) }
.bg2 { background: rgba(48,209,88,.18); color: #5fe383; border-color: rgba(48,209,88,.30) }
.grp-badge { border-radius: 999px }

/* ── Lists — song rows, tables ── */
.song-row { display: flex; align-items: center; gap: 12px; border-radius: 14px; padding: 9px 12px; cursor: default; transition: background .2s var(--anim-ease) }
.song-row:hover { background: rgba(255,255,255,.08) }
.song-thumb { width: 44px; height: 44px; object-fit: cover; flex-shrink: 0; border-radius: 10px; background: rgba(255,255,255,.08); box-shadow: 0 2px 8px rgba(0,0,0,.28) }
.song-title { font-size: .92rem; font-weight: 600; letter-spacing: -.014em; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.song-sub { font-size: .76rem; color: var(--mt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.vt-tbl th { font-weight: 500; letter-spacing: .03em }
.vt-tbl td { border-bottom-color: rgba(255,255,255,.06) }
.vt-tbl tr:hover td { background: rgba(255,255,255,.04) }
.vt-wrap { background: var(--lg-field); border-radius: 12px; border-color: transparent }
.vt-btn { border-radius: 9px }
.vt-btn.vt-on { background: rgba(255,255,255,.18); color: var(--tx); box-shadow: inset 0 1px 0 rgba(255,255,255,.22) }
.hr { height: 1px; background: rgba(255,255,255,.10) }
details.grp>summary { border-bottom-color: rgba(255,255,255,.10) }
.grp-pill, .pl-pill, .eng-pill, .tv-pill, .q-pill, .pm-pill, .sel-pill, .ge-chip { border-radius: 999px }
.grp-act-btn, .q-act-btn, .mq-act-btn { border-radius: 999px }

/* ── Pager ── */
.pager a, .pager span {
  border-radius: 999px !important;
  background: var(--lg-sheen), rgba(255,255,255,.08) !important;
  border: 1px solid var(--lg-stroke) !important;
  color: var(--dm) !important;
  font-weight: 600 !important;
  box-shadow: var(--lg-edge);
}
.pager a:hover { background: var(--lg-sheen), rgba(255,255,255,.15) !important; color: var(--tx) !important }
.pager .cur { background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 55%), var(--ac) !important; color: #fff !important; border-color: rgba(255,255,255,.22) !important }
.pager .dots { background: transparent !important; border-color: transparent !important; box-shadow: none }

/* ── Segmented controls (manage tabs, auth tabs, view toggle) ── */
.mgr-tabs, .tabs {
  background: var(--lg-field) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 3px !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.22);
}
.mgr-tab, .tab {
  border-radius: 999px !important;
  text-transform: none !important;
  font-size: .86rem !important; font-weight: 600 !important; letter-spacing: -.011em !important;
  color: var(--dm) !important;
  transition: background .25s var(--anim-ease), color .25s var(--anim-ease), box-shadow .25s var(--anim-ease) !important;
}
.mgr-tab.on, .tab.on {
  background: var(--lg-sheen), rgba(255,255,255,.22) !important;
  color: var(--tx) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 2px 8px rgba(0,0,0,.24) !important;
}
.ntab { text-transform: none; font-weight: 600; letter-spacing: -.011em }
.ntab.on { color: var(--tx); border-color: var(--ac) }

/* ── Colour-coded cards: the owner's chosen colour becomes a tint of the glass
      and a fine rim light — never a 3px border or a neon glow. ── */
html .gl.gl-accent, html .ds-card.ds-accent, html .nfc-card.nfc-accent, html .dev-accent {
  border: 1px solid color-mix(in srgb, var(--card-c) 55%, rgba(255,255,255,.18)) !important;
  background: linear-gradient(160deg, color-mix(in srgb, var(--card-c) 24%, transparent), color-mix(in srgb, var(--card-c) 7%, transparent) 70%), var(--lg-sheen), var(--lg-fill) !important;
  box-shadow: var(--lg-edge), var(--lg-shadow), 0 0 0 .5px color-mix(in srgb, var(--card-c) 40%, transparent) !important;
}
html .gl.gl-accent:hover, html .ds-card.ds-accent:hover, html .nfc-card.nfc-accent:hover, html .dev-accent:hover {
  border-color: color-mix(in srgb, var(--card-c) 75%, rgba(255,255,255,.25)) !important;
  background: linear-gradient(160deg, color-mix(in srgb, var(--card-c) 32%, transparent), color-mix(in srgb, var(--card-c) 10%, transparent) 70%), var(--lg-sheen), var(--lg-fill-hover) !important;
  box-shadow: var(--lg-edge), 0 16px 40px rgba(0,0,0,.36), 0 0 0 .5px color-mix(in srgb, var(--card-c) 55%, transparent) !important;
}
html[data-theme="light"] .gl.gl-accent, html[data-theme="light"] .ds-card.ds-accent, html[data-theme="light"] .nfc-card.nfc-accent, html[data-theme="light"] .dev-accent {
  background: linear-gradient(160deg, color-mix(in srgb, var(--card-c) 20%, #fff), color-mix(in srgb, var(--card-c) 6%, #fff) 70%), var(--lg-sheen), var(--lg-fill) !important;
  box-shadow: var(--lg-edge), var(--lg-shadow) !important;
}
html[data-theme="light"] .gl.gl-accent:hover, html[data-theme="light"] .ds-card.ds-accent:hover, html[data-theme="light"] .nfc-card.nfc-accent:hover, html[data-theme="light"] .dev-accent:hover {
  background: linear-gradient(160deg, color-mix(in srgb, var(--card-c) 28%, #fff), color-mix(in srgb, var(--card-c) 9%, #fff) 70%), var(--lg-sheen), var(--lg-fill-hover) !important;
  box-shadow: var(--lg-edge), 0 16px 40px rgba(32,40,80,.2) !important;
}

/* ── Tiles inside sheets (cast targets, NFC option rows, playlist chips) ── */
.cast-opt, .nfc-card .opt, .opt, .pl-card {
  background: var(--lg-sheen), rgba(255,255,255,.07);
  border: 1px solid var(--lg-stroke);
  border-radius: 18px;
  box-shadow: var(--lg-edge);
}
.cast-opt:hover, .nfc-card .opt:hover, .opt:hover, .pl-card:hover { background: var(--lg-sheen), rgba(255,255,255,.13) }
.cast-opt.is-current, .opt.sel, .pl-card.active { border-color: rgba(var(--ac-rgb),.7); background: rgba(var(--ac-rgb),.18); box-shadow: 0 0 0 1px rgba(var(--ac-rgb),.5), var(--lg-edge) }
.cast-opt-ic { border-radius: 11px; background: rgba(var(--ac-rgb),.2) }

/* Dragging — lift like a card picked up */
.dnd-drag, .dnd-chosen { background: var(--lg-fill-thick) !important; box-shadow: 0 20px 50px rgba(0,0,0,.5), var(--lg-edge) !important; border-color: rgba(var(--ac-rgb),.55) !important }

/* ── Remote control / player — Apple Music vocabulary ── */
.rc-page { background: transparent !important; color: var(--tx) !important }
.rc-header, .rc-dock { border-radius: 0 !important; border: none !important }
.rc-header { border-bottom: 1px solid rgba(255,255,255,.10) !important }
.rc-dock { border-top: 1px solid rgba(255,255,255,.10) !important }
.rc-vol-popover, .rc-toast { border-radius: 20px !important }
.rc-art-glow { background: radial-gradient(closest-side, rgba(var(--ac-rgb),.38), transparent) !important; filter: blur(40px) !important; opacity: .7 }
.rc-btn-play {
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 55%), var(--tx) !important;
  color: #0b0b0f !important;
  border-radius: 50% !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 24px rgba(0,0,0,.35) !important;
}
.rc-btn-play:active { transform: scale(.92) !important }
.rc-prog-track, .rc-vol-track-inner { background: rgba(255,255,255,.2) !important; border-radius: 999px !important }
.rc-prog-fill, .rc-vol-fill { background: rgba(255,255,255,.92) !important; border-radius: 999px !important }
.rc-vol-thumb { background: #fff !important; box-shadow: 0 1px 4px rgba(0,0,0,.4) !important }
.rc-venue-bar { background: rgba(var(--ac-rgb),.14) !important; border-bottom-color: rgba(var(--ac-rgb),.22) !important }
.rc-q-item { border-radius: 14px }
.rc-art-placeholder { background: var(--lg-sheen), rgba(255,255,255,.08) !important; border-radius: 18px }
.prog-track, .mob-prog-track, .bd-track { border-radius: 999px }
.prog-fill, .mob-prog-fill { border-radius: 999px }

/* ── Tag landing / NFC card — a glass sheet over the animated backdrop ── */
.nfc-card { border-radius: var(--rxl) }
.form-box, .error-card { border-radius: 24px }

/* ── Status colours: Apple system palette ── */
.live-badge, .np-dot, .rc-live-dot, .status-active { --live: var(--sys-green) }

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT APPEARANCE
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  color-scheme: light;
  --bg:            #eef1f8;
  --s1:            rgba(255,255,255,.55);
  --s2:            rgba(255,255,255,.80);
  --b1:            rgba(60,60,67,.14);
  --b2:            rgba(60,60,67,.26);

  --ac:            #007aff;
  --ac-rgb:        0,122,255;
  --ac-h:          #0a6cdc;
  --pk:            #5856d6;
  --pk-rgb:        88,86,214;
  --pk-h:          #4a48c4;
  --glow:          rgba(0,122,255,.26);

  --tx:            #0b0b0f;
  --dm:            rgba(60,60,67,.74);
  --mt:            rgba(60,60,67,.62);

  --panel:         rgba(255,255,255,.66);
  --panel-border:  rgba(255,255,255,.7);

  --lg-fill:       rgba(255,255,255,.52);
  --lg-fill-hover: rgba(255,255,255,.74);
  --lg-fill-thick: rgba(255,255,255,.66);
  --lg-stroke:     rgba(255,255,255,.72);
  --lg-edge:       inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35), inset 1px 0 0 rgba(255,255,255,.5), inset -1px 0 0 rgba(255,255,255,.3);
  --lg-sheen:      linear-gradient(145deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.10) 40%, rgba(255,255,255,0) 62%);
  --lg-shadow:     0 10px 30px rgba(32,40,80,.14), 0 1px 3px rgba(32,40,80,.10), 0 0 0 .5px rgba(60,60,67,.10);
  --lg-field:      rgba(118,118,128,.12);
  --lg-field-focus:rgba(118,118,128,.18);

  --grad-primary:  linear-gradient(180deg, #2f8fff 0%, #007aff 100%);
  --shadow-sm:     0 2px 10px rgba(32,40,80,.12);
  --glass-bg:      rgba(255,255,255,.66);
  --logo-mark:     #007aff;
  --logo-fg:       #0b0b0f;
  --sys-green:     #28a745;
  --sys-red:       #ff3b30;
}
[data-theme="light"] body {
  background:
    radial-gradient(60% 50% at 10% 4%,  rgba(0,122,255,.30) 0%, transparent 70%),
    radial-gradient(50% 44% at 94% 12%, rgba(175,82,222,.24) 0%, transparent 70%),
    radial-gradient(58% 50% at 80% 98%, rgba(52,199,189,.24) 0%, transparent 70%),
    radial-gradient(46% 40% at 0% 94%,  rgba(255,149,0,.18) 0%, transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
[data-theme="light"] * { scrollbar-color: rgba(60,60,67,.3) transparent }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(60,60,67,.28); background-clip: padding-box }
[data-theme="light"] .top-nav {
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.30)), rgba(246,248,253,.55) !important;
  border-bottom-color: rgba(60,60,67,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
}
[data-theme="light"] .gl, [data-theme="light"] .gl-d, [data-theme="light"] .ds-card, [data-theme="light"] .nfc-card,
[data-theme="light"] .top-nav, [data-theme="light"] .bot-bar {
  color: var(--tx);
}
[data-theme="light"] .gl, [data-theme="light"] .ds-card { background: var(--lg-sheen), var(--lg-fill); border-color: var(--lg-stroke) }
[data-theme="light"] .gl:hover, [data-theme="light"] .ds-card:hover { background: var(--lg-sheen), var(--lg-fill-hover); border-color: #fff }
[data-theme="light"] .gl-d { background: var(--lg-sheen), var(--lg-fill-thick); border-color: var(--lg-stroke) }
[data-theme="light"] .ds-card-link { background: rgba(60,60,67,.05) }
[data-theme="light"] .nav-a:hover { background: rgba(60,60,67,.07) !important }
[data-theme="light"] .nav-a.on { background: rgba(255,255,255,.85) !important; box-shadow: inset 0 1px 0 #fff, 0 2px 8px rgba(32,40,80,.12) !important }
[data-theme="light"] .nav-a.on i { color: var(--ac) }
[data-theme="light"] .theme-btn { background: var(--lg-sheen), rgba(255,255,255,.6) !important; color: var(--tx) !important; border-color: rgba(255,255,255,.8) !important }
[data-theme="light"] .theme-btn:hover { background: var(--lg-sheen), rgba(255,255,255,.9) !important; color: var(--tx) !important }
[data-theme="light"] .theme-picker-opt:hover { background-color: rgba(60,60,67,.07) !important }
[data-theme="light"] .bot-a { color: var(--dm) !important }
[data-theme="light"] .bot-a.on { color: var(--ac) !important; background: rgba(255,255,255,.85); box-shadow: inset 0 1px 0 #fff, 0 1px 6px rgba(32,40,80,.10) }
[data-theme="light"] .inp, [data-theme="light"] .srch-input, [data-theme="light"] .modal-inp,
[data-theme="light"] .venue-input, [data-theme="light"] .tv-input, [data-theme="light"] .wz-input, [data-theme="light"] .search-input {
  background: var(--lg-field) !important; color: var(--tx) !important;
  box-shadow: inset 0 0 0 .5px rgba(60,60,67,.12) !important;
}
[data-theme="light"] .inp:focus, [data-theme="light"] .srch-input:focus, [data-theme="light"] .modal-inp:focus,
[data-theme="light"] .venue-input:focus, [data-theme="light"] .tv-input:focus, [data-theme="light"] .wz-input:focus, [data-theme="light"] .search-input:focus {
  background: rgba(255,255,255,.8) !important;
  box-shadow: 0 0 0 4px rgba(var(--ac-rgb),.22) !important;
}
[data-theme="light"] select, [data-theme="light"] input[type="number"] {
  background-color: var(--lg-field) !important; color: var(--tx) !important; border-color: transparent !important;
}
[data-theme="light"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%233c3c43' stroke-opacity='.6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="light"] select option { background: #fff; color: #000 }
[data-theme="light"] .btn-g { background: var(--lg-sheen), rgba(255,255,255,.6); color: var(--tx); border-color: rgba(255,255,255,.85) }
[data-theme="light"] .btn-g:hover { background: var(--lg-sheen), rgba(255,255,255,.9); color: var(--tx); border-color: #fff }
[data-theme="light"] .btn-r { background: rgba(255,59,48,.10); color: #d70015; border-color: rgba(255,59,48,.24) }
[data-theme="light"] .btn-r:hover { background: rgba(255,59,48,.18) }
[data-theme="light"] .bp { background: rgba(var(--pk-rgb),.12); color: #4745c4; border-color: rgba(var(--pk-rgb),.22) }
[data-theme="light"] .bb { background: rgba(var(--ac-rgb),.11); color: #0062cc; border-color: rgba(var(--ac-rgb),.22) }
[data-theme="light"] .bg2 { background: rgba(52,199,89,.14); color: #1f7a38; border-color: rgba(52,199,89,.28) }
[data-theme="light"] .lbl { color: var(--mt) }
[data-theme="light"] .song-row:hover { background: rgba(60,60,67,.06) }
[data-theme="light"] .song-thumb { background: rgba(60,60,67,.08); box-shadow: 0 2px 8px rgba(32,40,80,.16) }
[data-theme="light"] .vt-tbl td { border-bottom-color: rgba(60,60,67,.08) }
[data-theme="light"] .vt-tbl tr:hover td { background: rgba(60,60,67,.04) }
[data-theme="light"] .vt-btn.vt-on { background: #fff; box-shadow: 0 1px 4px rgba(32,40,80,.16) }
[data-theme="light"] .hr, [data-theme="light"] details.grp>summary { background: transparent; border-bottom-color: rgba(60,60,67,.12) }
[data-theme="light"] .hr { background: rgba(60,60,67,.12) }
[data-theme="light"] .pager a, [data-theme="light"] .pager span { background: var(--lg-sheen), rgba(255,255,255,.6) !important; border-color: rgba(255,255,255,.85) !important }
[data-theme="light"] .pager a:hover { background: var(--lg-sheen), rgba(255,255,255,.92) !important }
[data-theme="light"] .mgr-tabs, [data-theme="light"] .tabs { background: var(--lg-field) !important; box-shadow: inset 0 0 0 .5px rgba(60,60,67,.10) }
[data-theme="light"] .mgr-tab.on, [data-theme="light"] .tab.on { background: #fff !important; color: var(--tx) !important; box-shadow: 0 2px 8px rgba(32,40,80,.16), inset 0 0 0 .5px rgba(60,60,67,.08) !important }
[data-theme="light"] .cast-opt, [data-theme="light"] .nfc-card .opt, [data-theme="light"] .opt, [data-theme="light"] .pl-card { background: var(--lg-sheen), rgba(255,255,255,.55); border-color: rgba(255,255,255,.8) }
[data-theme="light"] .cast-opt:hover, [data-theme="light"] .nfc-card .opt:hover, [data-theme="light"] .opt:hover, [data-theme="light"] .pl-card:hover { background: var(--lg-sheen), rgba(255,255,255,.9) }
[data-theme="light"] .modal-ov { background: rgba(30,36,60,.22) }
[data-theme="light"] .sheet-handle { background: rgba(60,60,67,.3) !important }
[data-theme="light"] .rc-header { border-bottom-color: rgba(60,60,67,.12) !important }
[data-theme="light"] .rc-dock { border-top-color: rgba(60,60,67,.12) !important }
[data-theme="light"] .rc-btn-play { background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 55%), #0b0b0f !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 24px rgba(32,40,80,.28) !important }
[data-theme="light"] .rc-prog-track, [data-theme="light"] .rc-vol-track-inner { background: rgba(60,60,67,.18) !important }
[data-theme="light"] .rc-prog-fill, [data-theme="light"] .rc-vol-fill { background: #0b0b0f !important }
[data-theme="light"] .rc-vol-thumb { background: #0b0b0f !important }
[data-theme="light"] .rc-art-placeholder { background: var(--lg-sheen), rgba(255,255,255,.6) !important }
[data-theme="light"] .dnd-drag, [data-theme="light"] .dnd-chosen { background: rgba(255,255,255,.92) !important; box-shadow: 0 20px 50px rgba(32,40,80,.25), var(--lg-edge) !important }

/* ═══════════════════════════════════════════════════════════════════════
   ACCESSIBILITY & FALLBACKS — the material degrades, never breaks
   ═══════════════════════════════════════════════════════════════════════ */
/* No backdrop-filter support: use opaque-enough surfaces so text stays legible */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root { --lg-fill: rgba(44,48,64,.92); --lg-fill-hover: rgba(54,58,76,.95); --lg-fill-thick: rgba(30,33,46,.97) }
  [data-theme="light"] { --lg-fill: rgba(250,251,254,.95); --lg-fill-hover: rgba(255,255,255,.98); --lg-fill-thick: rgba(252,253,255,.98) }
}
/* Reduce Transparency: solid, still elevated */
@media (prefers-reduced-transparency: reduce) {
  :root { --lg-fill: rgba(44,48,64,.96); --lg-fill-hover: rgba(54,58,76,.98); --lg-fill-thick: rgba(30,33,46,.99); --lg-sheen: none }
  [data-theme="light"] { --lg-fill: rgba(250,251,254,.97); --lg-fill-hover: #fff; --lg-fill-thick: rgba(252,253,255,.99); --lg-sheen: none }
  *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important }
}
/* Increase Contrast: stronger edges and secondary text */
@media (prefers-contrast: more) {
  :root { --lg-stroke: rgba(255,255,255,.5); --dm: rgba(235,235,245,.86); --mt: rgba(235,235,245,.7) }
  [data-theme="light"] { --lg-stroke: rgba(0,0,0,.4); --dm: rgba(0,0,0,.8); --mt: rgba(0,0,0,.66) }
}
/* Reduce Motion: no springs or slides */
@media (prefers-reduced-motion: reduce) {
  .au, .au1, .au2, .asc { animation-duration: .01ms !important }
  .btn, .btn:active, .theme-btn:active, .rc-btn-play:active { transition-duration: .01ms !important; transform: none !important }
}