/* ==========================================================================
   Liquid Glass layer — Apple-style translucent materials over the existing UI.
   Loaded last; remove the <link> in index.html to roll back completely.

   Why some surfaces use a ::before instead of their own backdrop-filter:
   an element with backdrop-filter (or opacity < 1, filter, mask) becomes a
   "backdrop root", and any glass nested inside it can only blur that
   ancestor's contents. The nav and category bars therefore draw their
   scroll-edge blur on a pseudo-element, so the capsules inside them can still
   blur the page.
   ========================================================================== */

:root {
  /* San Francisco on Apple devices, Inter (its closest open match) elsewhere. */
  --font-s: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
  --font-d: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
  --font-m: var(--font-s);

  /* Apple dark-mode system colors */
  --bg: #0a0a0c;
  --text: #f5f5f7;
  --text-2: #d1d1d6;
  --muted: #a1a1a8;
  --accent: #ff9f0a;      /* systemOrange */
  --accent-hi: #ffb340;
  --gold: #ffb340;
  --gold-dim: #d98200;
  --green: #30d158;       /* systemGreen */
  --line: rgba(255, 255, 255, 0.09);
  --fill: rgba(118, 118, 128, 0.24);        /* tertiarySystemFill */
  --fill-hover: rgba(118, 118, 128, 0.34);
  --on-accent: #1d1102;

  /* Materials */
  --lg-blur: blur(24px) saturate(190%);
  --lg-blur-thin: blur(14px) saturate(170%);
  --lg-fill: rgba(255, 255, 255, 0.07);
  --lg-fill-hover: rgba(255, 255, 255, 0.12);
  --lg-tint: rgba(28, 28, 32, 0.46);
  --lg-thick: rgba(30, 30, 34, 0.72);
  --lg-sheen: linear-gradient(180deg, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0.025) 44%, rgba(255,255,255,0) 56%, rgba(255,255,255,0.03) 100%);
  --lg-rim: rgba(255,255,255,0.2) rgba(255,255,255,0.1) rgba(255,255,255,0.06) rgba(255,255,255,0.1);
  --lg-shine: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(255,255,255,0.035), inset 0 0 18px rgba(255,255,255,0.025);
  --lg-drop: 0 12px 34px -10px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.2);
  --lg-drop-lg: 0 30px 80px -20px rgba(0,0,0,0.7), 0 8px 24px rgba(0,0,0,0.25);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --spring: cubic-bezier(0.34, 1.32, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

body.private-mode {
  --accent: #9d7bff;
  --accent-hi: #b9a1ff;
  --gold: #b9a1ff;
  --gold-dim: #7c5cf0;
  --line-warm: rgba(157,123,255,0.3);
  --on-accent: #12082b;
}

/* Entrance animations used `fill-mode: both`, which keeps the final keyframe
   applied forever. That leaves <main> etc. as permanent compositing layers,
   and popovers inside them then fail to blur content painted in later
   sections. `backwards` plays the same entrance and then lets go. */
.top-nav, .lib-header, .cat-wrap, main, .empty-state, .lock-inner { animation-fill-mode: backwards; }

/* ── Typography ─────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-s);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
  text-rendering: optimizeLegibility;
}
.library-heading h1, .online-title, .lock-title, .hub-welcome h2 { font-family: var(--font-d); font-weight: 700; letter-spacing: -0.026em; }
.library-heading h1 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.06; }
.library-eyebrow, .hub-kicker, .hub-nav-label, .mobile-panel-title { font-weight: 650; letter-spacing: 0.06em; }
.card-title, .hub-title { font-weight: 600; letter-spacing: -0.012em; }
.cw-head, .hub-section h2, .hub-section-head h2, .player-similar-head { font-family: var(--font-d); font-weight: 700; letter-spacing: -0.02em; }
.nav-logo-text { font-family: var(--font-d); font-weight: 700; letter-spacing: -0.022em; }
.player-title-text, .form-title, .confirm-title { font-family: var(--font-d); font-weight: 700; letter-spacing: -0.018em; }
.btn-add, .btn-save, .btn-cancel, .btn-unlock, .cat-btn, .player-action, .hub-btn, .search-mode-btn { font-weight: 600; }

/* ── Ambient light (gives the glass something to refract) ───────────────── */
body {
  background: var(--bg);
  /* `hidden` made <body> a scroll container, so the sticky category bar never
     stuck. `clip` still prevents sideways scroll without that side effect. */
  overflow-x: clip;
}
body::before {
  opacity: 1;
  background:
    radial-gradient(42rem 30rem at 8% -8%, rgba(255, 149, 0, 0.2), transparent 70%),
    radial-gradient(38rem 30rem at 96% 2%, rgba(255, 55, 95, 0.13), transparent 70%),
    radial-gradient(52rem 38rem at 62% 112%, rgba(94, 92, 230, 0.12), transparent 70%);
}
body.private-mode { background: #0b0a10; }
body.private-mode::before {
  background:
    radial-gradient(42rem 30rem at 8% -8%, rgba(175, 82, 222, 0.26), transparent 70%),
    radial-gradient(38rem 30rem at 98% 0%, rgba(100, 210, 255, 0.13), transparent 70%),
    radial-gradient(52rem 38rem at 58% 112%, rgba(94, 92, 230, 0.2), transparent 70%);
}

/* ── Shared glass recipes ───────────────────────────────────────────────── */
/* Regular glass: floating controls */
.nav-search-wrap,
.nav-actions,
.cat-btn,
.online-source-tab,
.online-filters .cat-btn,
.taste-toggle,
.online-search-wrap,
.btn-cancel,
.player-action,
.search-mode-btn,
.vibe-btn,
.refetch-btn,
.hub-btn:not(.hub-primary) {
  border: 1px solid;
  border-color: var(--lg-rim);
  background: var(--lg-sheen), var(--lg-fill);
  box-shadow: var(--lg-shine), var(--lg-drop);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 260ms ease, transform 380ms var(--spring), color 160ms ease;
}
.cat-btn:hover,
.online-source-tab:hover,
.online-filters .cat-btn:hover,
.taste-toggle:hover,
.btn-cancel:hover,
.player-action:hover,
.search-mode-btn:hover,
.vibe-btn:hover,
.refetch-btn:hover,
.hub-btn:not(.hub-primary):not(:disabled):hover {
  color: var(--text);
  background: var(--lg-sheen), var(--lg-fill-hover);
  border-color: rgba(255,255,255,0.28) rgba(255,255,255,0.14) rgba(255,255,255,0.08) rgba(255,255,255,0.14);
}

/* Tinted glass: the one prominent action in a group */
.btn-add,
.btn-save,
.btn-unlock,
.hub-primary,
.cat-btn.active,
.online-source-tab.active,
.online-filters .cat-btn.active,
.taste-toggle.active,
.player-action.active,
.card-btn.fav-on {
  color: var(--on-accent);
  border: 1px solid rgba(255,255,255,0.28);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.06) 48%, rgba(255,255,255,0) 52%, rgba(255,255,255,0.08) 100%),
    var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -1px 1px rgba(0,0,0,0.14),
    0 10px 26px -8px color-mix(in srgb, var(--accent) 70%, transparent),
    0 2px 6px rgba(0,0,0,0.22);
  transition: background-color 200ms ease, box-shadow 260ms ease, transform 380ms var(--spring), filter 200ms ease;
}
.btn-add:hover, .btn-save:hover, .btn-unlock:hover, .hub-primary:hover,
.cat-btn.active:hover, .online-source-tab.active:hover, .taste-toggle.active:hover {
  color: var(--on-accent);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.1) 48%, rgba(255,255,255,0) 52%, rgba(255,255,255,0.1) 100%),
    var(--accent-hi);
  transform: translateY(-1px);
}
body.private-mode .cat-btn.active,
body.private-mode .btn-save,
body.private-mode .btn-unlock,
body.private-mode .btn-add,
body.private-mode .card-btn.fav-on,
body.private-mode .mobile-tab-add { color: var(--on-accent); }

/* Press feedback — glass flexes under the finger */
.btn-add:active, .btn-save:active, .btn-cancel:active, .btn-unlock:active,
.icon-btn:active, .cat-btn:active, .player-action:active, .hub-btn:active,
.search-mode-btn:active, .online-source-tab:active, .taste-toggle:active,
.card-btn:active, .mobile-tab:active, .sort-trigger:active, .player-close:active,
.form-close:active, .hub-nav-item:active {
  transform: scale(0.95);
  transition-duration: 90ms;
}

/* ── Navigation ─────────────────────────────────────────────────────────── */
.top-nav,
body.private-mode .top-nav {
  background: transparent;
  border-bottom: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Scroll-edge effect: content softly blurs and dims as it passes under the bar */
.top-nav::before {
  content: '';
  position: absolute;
  inset: 0 0 -1.4rem 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,12,0.82) 0%, rgba(10,10,12,0.56) 62%, rgba(10,10,12,0) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
}
body.private-mode .top-nav::before {
  background: linear-gradient(180deg, rgba(11,10,16,0.84) 0%, rgba(11,10,16,0.58) 62%, rgba(11,10,16,0) 100%);
}

.nav-logo-mark {
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0) 52%),
    linear-gradient(145deg, #ffb340, #ff8a00);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 1px rgba(0,0,0,0.18), 0 8px 22px -6px rgba(255,140,0,0.55);
}
body.private-mode .nav-logo-mark {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0) 52%),
    linear-gradient(145deg, #c0a6ff, #7c5cf0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 1px rgba(0,0,0,0.18), 0 8px 22px -6px rgba(124,92,240,0.6);
}
.private-badge {
  border: 1px solid rgba(190,170,255,0.32);
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02)), rgba(157,123,255,0.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  color: #ddd0ff;
}

.nav-search-wrap {
  height: 3.15rem;
  padding: 0 0.5rem 0 0.4rem;
  border-radius: 999px;
}
.nav-search-wrap:focus-within {
  border-color: color-mix(in srgb, var(--accent) 70%, white 10%);
  background: var(--lg-sheen), rgba(255,255,255,0.1);
  box-shadow: var(--lg-shine), var(--lg-drop), 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.nav-search-icon { color: var(--text-2); }
.nav-search-wrap input { font-size: 0.92rem; font-weight: 450; }
.nav-search-wrap input::placeholder { color: var(--muted); }
.search-shortcut {
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: var(--text-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Actions sit together in one floating capsule */
.nav-actions {
  gap: 0.15rem;
  padding: 0.2rem;
  border-radius: 999px;
}
.nav-actions .icon-btn {
  width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  transition: background-color 180ms ease, color 160ms ease, transform 380ms var(--spring);
}
.nav-actions .icon-btn:hover { background: rgba(255,255,255,0.1); color: var(--text); border: 0; }
.nav-actions .online-nav-btn { width: auto; padding: 0 0.95rem 0 0.85rem; }
body.private-mode .nav-actions .online-nav-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; }
.nav-actions .online-nav-btn.active,
.nav-actions .icon-btn[aria-pressed="true"],
.nav-actions .icon-btn[aria-expanded="true"] {
  color: var(--accent-hi);
  background: rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
}
.nav-actions .view-toggle-btn { color: var(--text-2); border: 0; background: transparent; }
@media (max-width: 1120px) {
  .nav-actions .online-nav-btn { width: 2.75rem; padding: 0; }
}
.btn-add {
  min-height: 2.75rem;
  padding: 0 1.1rem 0 0.95rem;
  border-radius: 999px;
  font-size: 0.82rem;
}

/* ── Menus, popovers, toast ─────────────────────────────────────────────── */
.sort-menu,
.mobile-panel,
.hub-more > div,
.toast {
  border: 1px solid;
  border-color: var(--lg-rim);
  background: var(--lg-sheen), var(--lg-thick);
  box-shadow: var(--lg-shine), var(--lg-drop-lg);
  -webkit-backdrop-filter: blur(34px) saturate(200%);
  backdrop-filter: blur(34px) saturate(200%);
}
.sort-menu { border-radius: 20px; padding: 0.38rem; }
.sort-option { border-radius: 13px; padding: 0.75rem 0.85rem; color: var(--text-2); }
.sort-option:hover { background: rgba(255,255,255,0.09); color: var(--text); }
.sort-option.active { background: rgba(255,255,255,0.12); color: var(--text); }
.mobile-panel { border-radius: 22px; padding: 0.4rem; overflow: hidden; }
.mobile-panel a, .mobile-panel button { border-bottom: 0; border-radius: 15px; color: var(--text-2); }
.mobile-panel a:hover, .mobile-panel button:hover { background: rgba(255,255,255,0.09); color: var(--text); }
@media (min-width: 761px) {
  .mobile-panel { top: 4.6rem; right: clamp(1rem, 3vw, 2.5rem); }
  .mobile-panel-handle, .mobile-panel-title { display: none; }
}
.toast { border-radius: 999px; color: var(--text); }

/* ── Library header & filters ───────────────────────────────────────────── */
.lib-header {
  padding: 0.3rem;
  border: 1px solid;
  border-color: var(--lg-rim);
  border-radius: 999px;
  background: var(--lg-sheen), rgba(255,255,255,0.05);
  box-shadow: var(--lg-shine), var(--lg-drop);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;   /* keeps the sort menu's own glass live */
}
.lib-stats { padding-left: 0.85rem; }
.lib-stat-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.sort-trigger {
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--fill);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  transition: background-color 180ms ease, transform 380ms var(--spring);
}
.sort-trigger:hover { background: var(--fill-hover); border: 0; }
.sort-dropdown.open .sort-trigger { color: var(--text); background: var(--fill-hover); }

.cat-wrap {
  border: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.cat-wrap::before {
  content: '';
  position: absolute;
  inset: -0.5rem 0 -1.1rem 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,12,0.8) 0%, rgba(10,10,12,0.58) 64%, rgba(10,10,12,0) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.cat-inner { padding: 0.65rem 0.3rem 0.75rem; }
.cat-btn {
  min-height: 2.5rem;
  padding: 0 1.05rem;
  border-radius: 999px;
  color: var(--text-2);
  font-size: 0.8rem;
}
/* The chip row scrolls sideways, which clips anything outside it — keep
   chip shadows short enough to fit inside the row's padding. */
.cat-btn, .online-source-tab, .online-filters .cat-btn { box-shadow: var(--lg-shine), 0 4px 10px -4px rgba(0,0,0,0.45); }
.cat-btn.active, .online-source-tab.active, .online-filters .cat-btn.active {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 1px rgba(0,0,0,0.14), 0 4px 12px -5px color-mix(in srgb, var(--accent) 80%, transparent);
}
.cw-row { scrollbar-color: rgba(255,255,255,0.16) transparent; }
.cw-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); }

.search-mode-bar, .library-notice {
  border: 1px solid;
  border-color: var(--lg-rim);
  border-radius: 20px;
  background: var(--lg-sheen), rgba(255,255,255,0.05);
  box-shadow: var(--lg-shine);
}
.search-mode-btn, .vibe-btn, .refetch-btn { border-radius: 999px; color: var(--text); }
.refetch-btn { text-transform: none; letter-spacing: 0; font-size: 0.74rem; }
.player-similar-head { text-transform: none; font-size: 1rem; color: var(--text); }
.form-body, .player-wrap, .mobile-panel { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.22) transparent; }

/* ── Cards (content layer: no glass on the media itself) ────────────────── */
.card { transition: transform 420ms var(--spring); }
.card:hover { transform: translateY(-4px); }
.thumb {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 14px 34px -14px rgba(0,0,0,0.75);
  transition: box-shadow 300ms ease, border-color 300ms ease;
}
.card:hover .thumb {
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 22px 44px -16px rgba(0,0,0,0.85), 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}
.card:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-md); }
.card-meta { color: var(--muted); }

/* Small glass chips that float over thumbnails */
.cat-badge, .duration-badge, .watched-badge, .taste-badge, .hub-duration, .hub-watched {
  border: 1px solid rgba(255,255,255,0.2);
  border-bottom-color: rgba(255,255,255,0.08);
  border-radius: 999px;
  background-color: rgba(18,18,22,0.62);   /* keeps white text >= 4.5:1 over pale thumbnails */
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 12px -4px rgba(0,0,0,0.5);
  -webkit-backdrop-filter: var(--lg-blur-thin);
  backdrop-filter: var(--lg-blur-thin);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.duration-badge { padding: 0.24rem 0.55rem; }
.hub-duration, .hub-watched { padding: 0.24rem 0.55rem; }
.hub-watched { color: #e3d6ff; }

.card-btn {
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid rgba(255,255,255,0.2);
  border-bottom-color: rgba(255,255,255,0.08);
  background-color: rgba(18,18,22,0.48);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 16px -6px rgba(0,0,0,0.6);
  -webkit-backdrop-filter: var(--lg-blur-thin);
  backdrop-filter: var(--lg-blur-thin);
  transition: background-color 180ms ease, transform 380ms var(--spring);
}
.card-btn:hover { background-color: rgba(40,40,46,0.66); }

.play-overlay { background: radial-gradient(circle at center, rgba(0,0,0,0.18), transparent 70%); }
.play-ring, .cw-play {
  border: 1px solid rgba(255,255,255,0.32);
  border-bottom-color: rgba(255,255,255,0.1);
  background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0.08) 52%, rgba(255,255,255,0.04)), rgba(255,255,255,0.08);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 14px 32px -10px rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  transition: transform 420ms var(--spring), background-color 200ms ease;
}
.play-ring { width: 3.4rem; height: 3.4rem; }
.card:hover .play-ring {
  transform: scale(1.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.36), rgba(255,255,255,0.1) 52%, rgba(255,255,255,0.05)), rgba(255,255,255,0.14);
}

.cw-section { padding: 0.25rem 0 0; }
.cw-head { text-transform: none; color: var(--text); font-size: 1.2rem; }
.cw-thumb { border-radius: 16px; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 12px 30px -14px rgba(0,0,0,0.7); }
.cw-bar, .thumb-progress, .hub-progress { border-radius: 999px; }
.cw-bar-fill, .thumb-progress { background: var(--accent); }
.tag-chip, .player-tag {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--text-2);
}

.grid.list-view .card {
  border: 1px solid;
  border-color: var(--lg-rim);
  border-radius: 24px;
  background: var(--lg-sheen), rgba(255,255,255,0.045);
  box-shadow: var(--lg-shine);
}
.grid.list-view .card:hover { transform: translateY(-2px); }
.grid.list-view .thumb { border-radius: 16px; }

.similar-card { border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; overflow: hidden; background: rgba(255,255,255,0.04); }
.similar-card:hover { border-color: rgba(255,255,255,0.2); }

.empty-icon {
  border: 1px solid;
  border-color: var(--lg-rim);
  border-radius: 22px;
  background: var(--lg-sheen), var(--lg-fill);
  box-shadow: var(--lg-shine), var(--lg-drop);
}

/* ── Sheets: player, forms, confirmations ───────────────────────────────── */
/* The backdrop does the blurring; sheets are translucent so the blurred page
   still glows through them. */
.modal-backdrop, .confirm-backdrop {
  background: rgba(0,0,0,0.42);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
}
.player-wrap, .form-wrap, .confirm-box {
  border: 1px solid;
  border-color: rgba(255,255,255,0.2) rgba(255,255,255,0.1) rgba(255,255,255,0.06) rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  background: var(--lg-sheen), rgba(32,32,36,0.66);
  box-shadow: var(--lg-shine), var(--lg-drop-lg);
}
.player-wrap { background: var(--lg-sheen), rgba(22,22,26,0.78); }
.player-wrap, .form-wrap { transition: transform 460ms var(--spring), opacity 260ms var(--ease-out); }
.confirm-box { border-radius: 30px; transition: transform 420ms var(--spring), opacity 200ms ease; }
.player-header, .form-header { background: transparent; border-bottom: 1px solid rgba(255,255,255,0.07); }
.player-footer { background: transparent; }
.form-actions { background: transparent; border-top: 1px solid rgba(255,255,255,0.07); }

.player-close, .form-close {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 50%;
  background: var(--fill);
  color: var(--text-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  transition: background-color 180ms ease, color 160ms ease, transform 380ms var(--spring);
}
.player-close:hover, .form-close:hover { background: var(--fill-hover); color: var(--text); border-color: rgba(255,255,255,0.22); }
.player-action { min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; color: var(--text); }
.player-action.player-delete:hover { color: #fff; border-color: rgba(255,69,58,0.6); background: rgba(255,69,58,0.32); }

.smart-fill-tip {
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0)), color-mix(in srgb, var(--accent) 10%, transparent);
}
.form-label { color: var(--text-2); font-weight: 600; }
.form-input, .form-textarea {
  min-height: 2.9rem;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--fill);
  color: var(--text);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.12);
  transition: border-color 160ms ease, box-shadow 200ms ease, background-color 160ms ease;
}
.form-input:hover, .form-textarea:hover { background: var(--fill-hover); }
.form-input:focus, .form-textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 75%, transparent);
  background: rgba(118,118,128,0.3);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.form-input::placeholder, .form-textarea::placeholder, .lock-input::placeholder, #hubDialog input::placeholder, .mobile-search-dock input::placeholder { color: #a1a1a8; }
.btn-save, .btn-cancel { min-height: 2.9rem; padding: 0 1.3rem; }
.btn-cancel { color: var(--text); }
.confirm-btn-discard:hover { color: #fff; border-color: rgba(255,69,58,0.6); background: rgba(255,69,58,0.3); }

/* Native dialog used by the private hub */
#hubDialog {
  border: 1px solid;
  border-color: rgba(255,255,255,0.2) rgba(255,255,255,0.1) rgba(255,255,255,0.06) rgba(255,255,255,0.1);
  border-radius: 30px;
  background: var(--lg-sheen), rgba(34,30,44,0.72);
  box-shadow: var(--lg-shine), var(--lg-drop-lg);
  -webkit-backdrop-filter: blur(36px) saturate(200%);
  backdrop-filter: blur(36px) saturate(200%);
}
#hubDialog::backdrop { background: rgba(0,0,0,0.4); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
#hubDialog input { border: 1px solid transparent; border-radius: 14px; background: var(--fill); min-height: 2.9rem; }
#hubDialog input:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 75%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.hub-dialog-head button { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--fill); }

/* ── Lock & loading screens ─────────────────────────────────────────────── */
.lock-screen, #loadingScreen {
  background:
    radial-gradient(36rem 26rem at 22% 18%, rgba(255,149,0,0.32), transparent 70%),
    radial-gradient(34rem 28rem at 82% 30%, rgba(255,55,95,0.24), transparent 70%),
    radial-gradient(44rem 30rem at 50% 100%, rgba(94,92,230,0.3), transparent 70%),
    #060607;
}
.lock-screen::before {
  opacity: 1;
  background:
    radial-gradient(18rem 18rem at 30% 40%, rgba(255,204,0,0.16), transparent 70%),
    radial-gradient(20rem 20rem at 70% 62%, rgba(191,90,242,0.18), transparent 70%);
  animation: lgDrift 22s ease-in-out infinite alternate;
}
@keyframes lgDrift {
  0%   { transform: translate3d(-4%, -3%, 0) scale(1); }
  100% { transform: translate3d(5%, 4%, 0) scale(1.08); }
}
.lock-inner {
  padding: 2.4rem 2.2rem 2rem;
  border: 1px solid;
  border-color: rgba(255,255,255,0.26) rgba(255,255,255,0.12) rgba(255,255,255,0.07) rgba(255,255,255,0.12);
  border-radius: 36px;
  background: var(--lg-sheen), rgba(30,30,34,0.4);
  box-shadow: var(--lg-shine), var(--lg-drop-lg);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  backdrop-filter: blur(40px) saturate(200%);
}
.lock-icon, .loader-mark {
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 18px;
  color: var(--on-accent);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 52%),
    linear-gradient(145deg, #ffb340, #ff8a00);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 1px rgba(0,0,0,0.16), 0 16px 40px -10px rgba(255,140,0,0.6);
}
.lock-icon { animation: none; }
.lock-sub { color: var(--muted); }
.lock-input {
  height: 3.1rem;
  border: 1px solid transparent;
  border-radius: 16px;
  background: var(--fill);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.14);
}
.lock-input:focus {
  border-color: color-mix(in srgb, var(--accent) 75%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.lock-toggle { width: 2.75rem; height: 2.75rem; right: 0.2rem; }
.btn-unlock { min-height: 3.1rem; border-radius: 999px; }
.loader-bar-wrap { background: rgba(255,255,255,0.1); }
.loader-bar { background: linear-gradient(90deg, #ffb340, #ff8a00); }
@keyframes unlockPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer { background: transparent; border-top: 1px solid rgba(255,255,255,0.07); }

/* ── Private hub ────────────────────────────────────────────────────────── */
#privateNav {
  top: 5rem;
  left: 0.75rem;
  bottom: 0.75rem;
  border: 1px solid;
  border-color: var(--lg-rim);
  border-radius: 28px;
  background: var(--lg-sheen), rgba(30,26,40,0.48);
  box-shadow: var(--lg-shine), var(--lg-drop-lg);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  backdrop-filter: blur(30px) saturate(190%);
  padding: 18px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
@media (min-width: 801px) {
  body.private-mode > .library-header,
  body.private-mode > main,
  body.private-mode > .library-notice,
  body.private-mode > .site-footer { margin-left: calc(204px + 1.5rem); width: calc(100% - 204px - 1.5rem); }
}
body.private-mode > .library-header { border-bottom: 0; }
body.private-mode .lib-header { padding: 0.35rem 0.5rem; border: 1px solid; border-color: var(--lg-rim); background: var(--lg-sheen), rgba(255,255,255,0.05); box-shadow: var(--lg-shine); }
#privateNav .hub-nav-item {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 16px;
  color: var(--text-2);
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color 180ms ease, color 160ms ease, transform 380ms var(--spring);
}
#privateNav .hub-nav-item:hover { background: rgba(255,255,255,0.07); border-color: transparent; color: var(--text); }
#privateNav .hub-nav-item[aria-current] {
  color: #fff;
  border-color: rgba(255,255,255,0.16) rgba(255,255,255,0.08) rgba(255,255,255,0.04);
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03)), rgba(157,123,255,0.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 6px 18px -8px rgba(124,92,240,0.6);
}
.hub-nav-item[aria-current] .hub-nav-icon { color: #e1d6ff; }
.hub-nav-item small { border-radius: 999px; background: rgba(255,255,255,0.1); padding: 2px 8px; font-variant-numeric: tabular-nums; }
.hub-nav-bottom { border-top-color: rgba(255,255,255,0.08); }
.hub-nav-label { color: #a59bb6; }
.hub-sync { color: #a198b0; }

.hub-btn { min-height: 38px; border-radius: 999px; padding: 8px 14px; color: var(--text); }
.hub-primary { color: var(--on-accent); }
.hub-section-head > .hub-btn { white-space: nowrap; flex-shrink: 0; border: 0; box-shadow: none; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; color: #cbb8f5; }
.hub-section-head > .hub-btn:hover { background: rgba(255,255,255,0.08); }

.hub-welcome {
  border: 1px solid;
  border-color: rgba(255,255,255,0.18) rgba(255,255,255,0.09) rgba(255,255,255,0.05) rgba(255,255,255,0.09);
  border-radius: 30px;
  background:
    var(--lg-sheen),
    radial-gradient(ellipse 80% 120% at 100% 0%, rgba(191,90,242,0.28), transparent 60%),
    radial-gradient(ellipse 60% 100% at 0% 100%, rgba(100,210,255,0.12), transparent 60%),
    rgba(34,28,46,0.5);
  box-shadow: var(--lg-shine), var(--lg-drop);
}
.hub-card-image { border-radius: 18px; border-color: rgba(255,255,255,0.08); box-shadow: 0 14px 34px -14px rgba(0,0,0,0.75); transition: box-shadow 300ms ease; }
.hub-card:hover .hub-card-image { box-shadow: 0 22px 44px -16px rgba(0,0,0,0.85), 0 0 0 4px rgba(157,123,255,0.16); }
.hub-play-overlay { background: radial-gradient(circle at center, rgba(0,0,0,0.25), transparent 70%); }
.hub-play-overlay .hub-icon {
  box-sizing: content-box;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0.08) 52%, rgba(255,255,255,0.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 14px 32px -10px rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  width: 22px;
  height: 22px;
}
.hub-progress { background: var(--accent); height: 4px; bottom: 6px; left: 8px; max-width: calc(100% - 16px); }
.hub-card-actions { gap: 6px; }
.hub-card-actions > .hub-btn { min-height: 36px; padding: 4px 11px; border-color: var(--lg-rim); }
.hub-card-actions > .hub-btn:not(.selected) { color: var(--text-2); }
.hub-card-actions .selected { color: #fff; background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03)), rgba(157,123,255,0.3); }
.hub-more summary { display: grid; place-items: center; min-width: 36px; min-height: 36px; border-radius: 50%; color: var(--text-2); transition: background-color 160ms ease; }
.hub-more summary:hover, .hub-more[open] summary { background: rgba(255,255,255,0.09); color: var(--text); }
.hub-more > div { width: 200px; padding: 6px; border-radius: 18px; gap: 2px; }
.hub-more .hub-btn { border: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 12px; min-height: 40px; justify-content: flex-start; }
.hub-more .hub-btn:not(:disabled):hover { background: rgba(255,255,255,0.1); }

.hub-filters, .hub-playlist {
  border: 1px solid;
  border-color: var(--lg-rim);
  background: var(--lg-sheen), rgba(255,255,255,0.045);
  box-shadow: var(--lg-shine), var(--lg-drop);
}
.hub-filters { border-radius: 24px; padding: 14px 16px; gap: 10px; }
.hub-filter > span { color: #a99fb8; font-weight: 600; }
.hub-filter select, #hubSpeed {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 12px;
  background-color: var(--fill);
  color: var(--text);
}
.hub-playlist { border-radius: 24px; transition: transform 420ms var(--spring), border-color 200ms ease; }
.hub-playlist:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.24) rgba(255,255,255,0.12) rgba(255,255,255,0.08); }
.hub-prefs { border-top-color: rgba(255,255,255,0.08); }
.hub-notice { border: 1px solid rgba(255,214,10,0.2); border-radius: 16px; background: rgba(255,214,10,0.08); }
#hubPlayerError { border-radius: 14px; }
.hub-player-queue li { border-top-color: rgba(255,255,255,0.07); }

/* ── Phone layout ───────────────────────────────────────────────────────── */
@media (max-width: 800px) {
  #privateNav {
    top: 5rem;
    left: auto;
    bottom: auto;
    margin: 0.5rem 0.75rem 0;
    width: auto;
    padding: 6px;
    gap: 4px;
    border-radius: 999px;
    z-index: 60;
    scrollbar-width: none;
  }
  #privateNav::-webkit-scrollbar { display: none; }
  #privateNav .hub-nav-item { min-height: 40px; border-radius: 999px; padding: 6px 12px; }
}

@media (max-width: 760px) {
  .top-nav::before {
    inset: 0;
    background: rgba(10,10,12,0.72);
    -webkit-mask-image: none;
    mask-image: none;
  }
  body.private-mode .top-nav::before { background: rgba(11,10,16,0.74); }
  .mobile-search-dock {
    border-bottom: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body.private-mode .mobile-search-dock { background: transparent; }
  #privateNav { top: 7.85rem; }
  .mobile-search-dock::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: rgba(10,10,12,0.72);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
  }
  body.private-mode .mobile-search-dock::before { background: rgba(11,10,16,0.74); }
  .mobile-search-dock input {
    height: 2.75rem;
    border: 1px solid;
    border-color: var(--lg-rim);
    background: var(--lg-sheen), var(--lg-fill);
    box-shadow: var(--lg-shine);
  }
  .mobile-search-dock input:focus {
    border-color: color-mix(in srgb, var(--accent) 70%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  }
  #lockBtn {
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid;
    border-color: var(--lg-rim);
    background: var(--lg-sheen), var(--lg-fill);
    box-shadow: var(--lg-shine), var(--lg-drop);
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
  }
  .nav-actions {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .cat-wrap::before { inset: 0 0 -1rem 0; background: linear-gradient(180deg, rgba(10,10,12,0.72) 0%, rgba(10,10,12,0.45) 64%, rgba(10,10,12,0) 100%); }
  .cat-btn { min-height: 2.35rem; padding: 0 0.9rem; }
  .lib-header { border-radius: 22px; }
  .sort-trigger { min-height: 2.75rem; }

  /* Floating glass tab bar */
  .mobile-tabbar {
    left: 0.9rem;
    right: 0.9rem;
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    min-height: 4rem;
    padding: 0.3rem;
    gap: 0.15rem;
    border: 1px solid;
    border-color: rgba(255,255,255,0.24) rgba(255,255,255,0.12) rgba(255,255,255,0.07) rgba(255,255,255,0.12);
    border-radius: 999px;
    background: var(--lg-sheen), rgba(30,30,34,0.5);
    box-shadow: var(--lg-shine), 0 18px 50px -12px rgba(0,0,0,0.7), 0 2px 8px rgba(0,0,0,0.25);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    backdrop-filter: blur(30px) saturate(200%);
  }
  body.private-mode .mobile-tabbar { background: var(--lg-sheen), rgba(34,28,46,0.52); }
  .mobile-tab {
    min-height: 3.35rem;
    border-radius: 999px;
    color: var(--text-2);
    transition: background-color 200ms ease, color 160ms ease, transform 380ms var(--spring);
  }
  .mobile-tab span { font-size: 0.64rem; font-weight: 600; }
  .mobile-tab.active {
    color: var(--accent-hi);
    background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 0 0 1px rgba(255,255,255,0.06);
  }
  .mobile-tab-add {
    color: var(--on-accent);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.06) 48%, rgba(255,255,255,0) 52%),
      var(--accent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 8px 20px -8px color-mix(in srgb, var(--accent) 80%, transparent);
  }

  .mobile-panel {
    left: 0.9rem;
    right: 0.9rem;
    bottom: 5.6rem;
    border-radius: 28px;
    padding: 0.55rem;
  }
  .mobile-panel-handle { background: rgba(255,255,255,0.28); }
  .mobile-panel a, .mobile-panel button { border-radius: 18px; color: var(--text); }

  .thumb, .hub-card-image { border-radius: 15px; }
  .card-btn { width: 2.25rem; height: 2.25rem; }
  .play-ring { width: 2.6rem; height: 2.6rem; }
  .card:hover .play-ring { transform: none; }
  .player-wrap, .form-wrap { border-radius: 26px; }
  .lock-inner { border-radius: 30px; }
  .toast { bottom: 6rem; }
}

/* Scroll-edge effect only appears once content is actually under the bars
   (scroll-driven animation; browsers without it keep the static tint). */
@supports (animation-timeline: scroll()) {
  .top-nav::before, .mobile-search-dock::before {
    animation: lgEdgeIn linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 72px;
  }
}
@keyframes lgEdgeIn { from { opacity: 0; } to { opacity: 1; } }

/* Touch targets: keep the compact look, extend the hit area to 44 x 44 pt */
.cat-btn { position: relative; }
.cat-btn::after { content: ''; position: absolute; inset: -0.2rem -0.1rem; }
@media (pointer: coarse) {
  .hub-card-actions > .hub-btn, .hub-more summary { position: relative; }
  .hub-card-actions > .hub-btn::after, .hub-more summary::after { content: ''; position: absolute; inset: -4px; }
  #privateNav .hub-nav-item { min-height: 44px; }
}

/* ── Accessibility & fallbacks ──────────────────────────────────────────── */
/* Reduce Transparency: swap glass for solid, readable surfaces */
@media (prefers-reduced-transparency: reduce) {
  :root { --lg-fill: #232327; --lg-fill-hover: #2c2c31; --lg-thick: #1f1f23; --lg-sheen: linear-gradient(transparent, transparent); }
  .top-nav::before, .cat-wrap::before, .mobile-search-dock::before { background: #0a0a0c; -webkit-mask-image: none; mask-image: none; }
  body.private-mode .top-nav::before, body.private-mode .mobile-search-dock::before { background: #0b0a10; }
  .player-wrap, .form-wrap, .confirm-box, .lock-inner, #privateNav, #hubDialog, .mobile-tabbar, .hub-welcome { background: #1c1c1f; }
  .cat-badge, .duration-badge, .watched-badge, .taste-badge, .hub-duration, .hub-watched, .card-btn { background-color: rgba(10,10,12,0.9); }
  *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .modal-backdrop, .confirm-backdrop { background: rgba(0,0,0,0.82); }
}

/* Increase Contrast: firmer edges and text */
@media (prefers-contrast: more) {
  :root { --text-2: #ebebf0; --muted: #c7c7cc; --lg-rim: rgba(255,255,255,0.5); }
  .player-wrap, .form-wrap, .confirm-box, .lock-inner, #privateNav, .mobile-tabbar, .nav-search-wrap, .nav-actions, .cat-btn { border-color: rgba(255,255,255,0.5); }
}

/* Browsers without backdrop-filter get opaque surfaces instead of see-through ones */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --lg-fill: #222226; --lg-fill-hover: #2b2b30; --lg-thick: #1e1e22; }
  .top-nav::before, .cat-wrap::before, .mobile-search-dock::before { background: rgba(10,10,12,0.96); }
  .player-wrap, .form-wrap, .confirm-box, .lock-inner, #privateNav, .mobile-tabbar { background: #1c1c1f; }
}

@media (prefers-reduced-motion: reduce) {
  .lock-screen::before { animation: none; }
  .card:hover, .hub-playlist:hover { transform: none; }
}