/* VIBE Playful Geometric — full application theme. */

:root {
  --pg-cream: #fffdf5;
  --pg-ink: #1e293b;
  --pg-muted: #64748b;
  --pg-soft: #f1f5f9;
  --pg-line: #1e293b;
  --pg-violet: #8b5cf6;
  --pg-pink: #f472b6;
  --pg-yellow: #fbbf24;
  --pg-mint: #34d399;
  --pg-blue: #60a5fa;
  --pg-danger: #e11d48;
  --pg-radius-sm: 8px;
  --pg-radius-md: 16px;
  --pg-radius-lg: 24px;
  --pg-bounce: cubic-bezier(.34,1.56,.64,1);
}

#loginView {
  --play-bg: var(--pg-cream);
  --play-ink: var(--pg-ink);
  --play-muted: var(--pg-muted);
  --play-soft: var(--pg-soft);
  --play-line: var(--pg-line);
  --play-violet: var(--pg-violet);
  --play-pink: var(--pg-pink);
  --play-yellow: var(--pg-yellow);
  --play-mint: var(--pg-mint);
  --play-danger: var(--pg-danger);
}

:root body:not(.auth-gate-active) {
  --pg-page: var(--pg-cream);
  --pg-paper: #fff;
  --pg-page-ink: var(--pg-ink);
  --pg-page-muted: var(--pg-muted);
  --pg-page-soft: var(--pg-soft);
  --pg-page-line: var(--pg-line);
  --pg-hard-shadow: var(--pg-line);
  --pg-dot: rgba(100,116,139,.22);
  --signal-rail-width: 88px;
  --bg: var(--pg-page);
  --surface: var(--pg-paper);
  --surface-strong: var(--pg-paper);
  --surface-soft: var(--pg-page-soft);
  --stroke: rgba(30,41,59,.22);
  --stroke-strong: var(--pg-page-line);
  --text: var(--pg-page-ink);
  --muted: var(--pg-page-muted);
  --muted-strong: color-mix(in srgb,var(--pg-page-ink) 78%,var(--pg-page-muted));
  min-height: 100vh;
  color: var(--pg-page-ink);
  background-color: var(--pg-page);
  background-image: radial-gradient(circle,var(--pg-dot) 1.15px,transparent 1.15px);
  background-size: 24px 24px;
  font-family: "Plus Jakarta Sans",system-ui,sans-serif;
}

:root[data-color-mode="dark"] body:not(.auth-gate-active) {
  --pg-page: #111827;
  --pg-paper: #1e293b;
  --pg-page-ink: #fffdf5;
  --pg-page-muted: #cbd5e1;
  --pg-page-soft: #334155;
  --pg-page-line: #020617;
  --pg-hard-shadow: #020617;
  --pg-dot: rgba(255,255,255,.12);
  --stroke: rgba(255,255,255,.2);
  --stroke-strong: #020617;
}

:root body:not(.auth-gate-active).account-owner { --pg-role: var(--pg-violet); --pg-role-alt: var(--pg-pink); --pg-role-ink: #fff; }
:root body:not(.auth-gate-active).account-editor { --pg-role: var(--pg-mint); --pg-role-alt: var(--pg-blue); --pg-role-ink: var(--pg-ink); }
:root body:not(.auth-gate-active).account-viewer { --pg-role: var(--pg-yellow); --pg-role-alt: var(--pg-mint); --pg-role-ink: var(--pg-ink); }
:root body:not(.auth-gate-active).account-special-editor { --pg-role: var(--pg-pink); --pg-role-alt: var(--pg-yellow); --pg-role-ink: var(--pg-ink); }

:root body:not(.auth-gate-active)::after {
  z-index: -2;
  opacity: .5;
  background-image: radial-gradient(circle,var(--pg-dot) 1.15px,transparent 1.15px);
  background-size: 24px 24px;
}

:root body:not(.auth-gate-active) .ambient { display: none; }
:root body:not(.auth-gate-active) main { color: var(--pg-page-ink); }

:root body:not(.auth-gate-active) :is(h1,h2,h3,.dashboard-card-art-title,.playing-copy h3,.playlist-menu-head strong) {
  font-family: "Outfit",system-ui,sans-serif;
}

:root body:not(.auth-gate-active) :is(button,input,textarea) { font-family: "Plus Jakarta Sans",system-ui,sans-serif; }

:root body:not(.auth-gate-active) :is(a,button,input,textarea,[tabindex]):focus-visible {
  outline: 3px solid var(--pg-yellow);
  outline-offset: 3px;
}

/* Shared tactile controls */
:root body:not(.auth-gate-active) :is(.primary-button,.secondary-button,.danger-button,.round-button) {
  min-height: 46px;
  border: 2px solid var(--pg-page-line);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--pg-hard-shadow);
  font-weight: 800;
  transition: transform 220ms var(--pg-bounce),box-shadow 220ms ease,background 180ms ease,color 180ms ease;
}

:root body:not(.auth-gate-active) .primary-button {
  color: #fff;
  background: var(--pg-violet);
}

:root body:not(.auth-gate-active) .secondary-button,
:root body:not(.auth-gate-active) .round-button {
  color: var(--pg-page-ink);
  background: var(--pg-paper);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

:root body:not(.auth-gate-active) .danger-button { color: #fff; background: var(--pg-danger); }

:root body:not(.auth-gate-active) :is(.primary-button,.secondary-button,.danger-button,.round-button):hover {
  filter: none;
  box-shadow: 6px 6px 0 var(--pg-hard-shadow);
  transform: translate(-2px,-2px);
}

:root body:not(.auth-gate-active) :is(.primary-button,.secondary-button,.danger-button,.round-button):active {
  box-shadow: 2px 2px 0 var(--pg-hard-shadow);
  transform: translate(2px,2px);
}

/* Left navigation sticker rail */
:root body:not(.auth-gate-active) .vibe-dock {
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--signal-rail-width);
  height: 100dvh;
  gap: 7px;
  padding: 18px 10px 14px;
  border: 0;
  border-right: 2px solid var(--pg-page-line);
  border-radius: 0;
  color: var(--pg-page-ink);
  background: var(--pg-paper);
  box-shadow: 5px 0 0 color-mix(in srgb,var(--pg-hard-shadow) 12%,transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
}

:root body:not(.auth-gate-active) .signal-rail-brand { gap: 8px; margin-bottom: 29px; color: var(--pg-page-ink); }

:root body:not(.auth-gate-active) .signal-rail-brand > span {
  width: 42px;
  height: 42px;
}

:root body:not(.auth-gate-active) .signal-rail-brand strong {
  color: var(--pg-page-ink);
  font: 800 10px/1 "Outfit",system-ui,sans-serif;
  letter-spacing: .19em;
}

:root body:not(.auth-gate-active) .vibe-dock-active-bg {
  border: 2px solid var(--pg-page-line);
  border-radius: 14px 14px 14px 4px;
  background: var(--pg-yellow);
  box-shadow: 3px 3px 0 var(--pg-hard-shadow);
  transition: width 300ms var(--pg-bounce),height 300ms var(--pg-bounce),transform 360ms var(--pg-bounce),opacity 120ms ease;
}

:root body:not(.auth-gate-active) .vibe-dock-item {
  width: 64px;
  height: 55px;
  border: 2px solid transparent;
  border-radius: 14px 14px 14px 4px;
  color: var(--pg-page-muted);
  background: transparent;
  box-shadow: none;
  transition: transform 220ms var(--pg-bounce),color 160ms ease,background 160ms ease;
}

:root body:not(.auth-gate-active) .vibe-dock-item:hover,
:root body:not(.auth-gate-active) .vibe-dock-item:focus-visible {
  border-color: var(--pg-page-line);
  color: var(--pg-ink);
  background: var(--pg-mint);
  box-shadow: 3px 3px 0 var(--pg-hard-shadow);
}

:root body:not(.auth-gate-active) .vibe-dock-item[data-checked="true"] {
  border-color: transparent;
  color: var(--pg-ink);
  background: transparent;
  box-shadow: none;
}

:root body:not(.auth-gate-active) .vibe-dock-item[data-dock-action="create"]:hover { background: var(--pg-pink); }
:root body:not(.auth-gate-active) .vibe-dock-item[data-dock-action="theme"]:hover { background: var(--pg-yellow); }
:root body:not(.auth-gate-active) .vibe-dock-icon { width: 20px; height: 20px; }
:root body:not(.auth-gate-active) .vibe-dock-label { color: inherit; font-size: 8px; font-weight: 800; }
:root body:not(.auth-gate-active) .vibe-dock-divider { width: 38px; height: 2px; background: var(--pg-page-line); }
:root body:not(.auth-gate-active) .signal-rail-profile strong { color: var(--pg-page-ink); font-size: 9px; }
:root body:not(.auth-gate-active) .signal-rail-profile small { color: var(--pg-page-muted); font-size: 7px; }

/* Command bar */
:root body:not(.auth-gate-active) .topbar {
  width: calc(100% - var(--signal-rail-width));
  height: 78px;
  margin-left: var(--signal-rail-width);
  padding: 14px 24px;
  border: 0;
  border-bottom: 2px solid var(--pg-page-line);
  color: var(--pg-page-ink);
  background: color-mix(in srgb,var(--pg-paper) 96%,transparent);
  box-shadow: 0 4px 0 color-mix(in srgb,var(--pg-hard-shadow) 10%,transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

:root body:not(.auth-gate-active) .signal-top-search {
  grid-template-columns: 20px minmax(0,1fr) auto;
  width: min(34vw,390px);
  height: 46px;
  border: 2px solid var(--pg-page-line);
  border-radius: 15px;
  color: var(--pg-page-ink);
  background: var(--pg-paper);
  box-shadow: 3px 3px 0 #cbd5e1;
}

:root body:not(.auth-gate-active) .signal-top-search:focus-within {
  border-color: var(--pg-violet);
  background: var(--pg-paper);
  box-shadow: 4px 4px 0 var(--pg-violet);
}

:root body:not(.auth-gate-active) .signal-top-search svg { color: var(--pg-page-muted); }
:root body:not(.auth-gate-active) .signal-top-search input { color: var(--pg-page-ink); font-size: 11px; }
:root body:not(.auth-gate-active) .signal-top-search input::placeholder { color: var(--pg-page-muted); }

:root body:not(.auth-gate-active) .signal-top-search kbd {
  border: 2px solid var(--pg-page-line);
  border-radius: 7px;
  color: var(--pg-ink);
  background: var(--pg-yellow);
}

:root body:not(.auth-gate-active) .playlist-switcher,
:root body:not(.auth-gate-active) :is(.icon-button,.profile-chip) {
  height: 44px;
  border: 2px solid var(--pg-page-line);
  border-radius: 14px;
  color: var(--pg-page-ink);
  background: var(--pg-paper);
  box-shadow: 3px 3px 0 var(--pg-hard-shadow);
}

:root body:not(.auth-gate-active) .playlist-switcher:hover,
:root body:not(.auth-gate-active) .playlist-switcher[aria-expanded="true"],
:root body:not(.auth-gate-active) :is(.icon-button,.profile-chip):hover {
  border-color: var(--pg-page-line);
  color: var(--pg-ink);
  background: var(--pg-yellow);
  transform: translate(-1px,-1px);
}

:root body:not(.auth-gate-active) .signal-cloud-live {
  min-height: 32px;
  padding: 0 10px;
  border: 2px solid var(--pg-page-line);
  border-radius: 999px;
  color: var(--pg-ink);
  background: var(--pg-mint);
  font-size: 7px;
}

:root body:not(.auth-gate-active) .signal-cloud-live i { border: 1px solid var(--pg-line); background: #fff; box-shadow: none; }

:root body:not(.auth-gate-active) .signal-create-button {
  height: 44px;
  border: 2px solid var(--pg-page-line);
  border-radius: 999px;
  color: #fff;
  background: var(--pg-violet);
  box-shadow: 4px 4px 0 var(--pg-hard-shadow);
  font-size: 10px;
  transition: transform 220ms var(--pg-bounce),box-shadow 220ms ease;
}

:root body:not(.auth-gate-active) .signal-create-button:hover { filter: none; box-shadow: 6px 6px 0 var(--pg-hard-shadow); transform: translate(-2px,-2px); }
:root body:not(.auth-gate-active) .profile-chip .presence-dot { border: 1px solid var(--pg-line); background: var(--pg-mint); box-shadow: none; }
:root body:not(.auth-gate-active) .profile-chip .avatar { border: 2px solid var(--pg-page-line); color: var(--pg-role-ink); background: var(--pg-role); }

/* Playlist switcher sheet */
:root body:not(.auth-gate-active) .playlist-menu {
  top: 52px;
  padding: 11px;
  border: 2px solid var(--pg-page-line);
  border-radius: 18px 18px 18px 5px;
  color: var(--pg-page-ink);
  background: var(--pg-paper);
  box-shadow: 7px 7px 0 var(--pg-hard-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

:root body:not(.auth-gate-active) .playlist-menu-head { border-color: var(--pg-page-line); }
:root body:not(.auth-gate-active) .playlist-menu-head strong { color: var(--pg-page-ink); }
:root body:not(.auth-gate-active) .playlist-menu-head small,
:root body:not(.auth-gate-active) .playlist-menu-copy small { color: var(--pg-page-muted); }
:root body:not(.auth-gate-active) .playlist-menu-head button { border: 2px solid var(--pg-page-line); color: var(--pg-ink); background: var(--pg-yellow); box-shadow: 2px 2px 0 var(--pg-hard-shadow); }
:root body:not(.auth-gate-active) .playlist-menu-item { border: 2px solid transparent; color: var(--pg-page-ink); }
:root body:not(.auth-gate-active) .playlist-menu-item:hover,
:root body:not(.auth-gate-active) .playlist-menu-item.active { border-color: var(--pg-page-line); background: var(--pg-page-soft); }
:root body:not(.auth-gate-active) .playlist-menu-thumb { border: 2px solid var(--pg-page-line); border-radius: 11px; color: #fff; box-shadow: 2px 2px 0 var(--pg-hard-shadow); }
:root body:not(.auth-gate-active) .playlist-role-badge { border: 1px solid var(--pg-page-line); color: var(--pg-ink); background: var(--pg-yellow); }
:root body:not(.auth-gate-active) .playlist-role-badge.locked { color: var(--pg-ink); background: var(--pg-pink); }

/* Dashboard playground */
:root body:not(.auth-gate-active) .dashboard-view {
  width: calc(100% - var(--signal-rail-width));
  margin: 0 0 0 var(--signal-rail-width);
}

:root body:not(.auth-gate-active) .dashboard-hero,
:root body:not(.auth-gate-active).account-owner .dashboard-hero,
:root body:not(.auth-gate-active).account-editor .dashboard-hero,
:root body:not(.auth-gate-active).account-viewer .dashboard-hero,
:root body:not(.auth-gate-active).account-special-editor .dashboard-hero {
  grid-template-columns: minmax(0,1fr) minmax(280px,390px);
  gap: 38px;
  width: calc(100% - 48px);
  min-height: 455px;
  margin: 24px;
  padding: 52px clamp(34px,5vw,70px) 64px;
  overflow: hidden;
  border: 2px solid var(--pg-line);
  border-radius: 34px 34px 34px 10px;
  color: #fff;
  background-color: var(--pg-violet);
  background-image: radial-gradient(circle,rgba(255,255,255,.23) 1.2px,transparent 1.2px);
  background-size: 22px 22px;
  box-shadow: 10px 10px 0 var(--pg-hard-shadow);
  clip-path: none;
  filter: none;
}

:root body:not(.auth-gate-active) .dashboard-hero::before {
  z-index: 0;
  opacity: 1;
  background: linear-gradient(110deg,rgba(30,41,59,.14),transparent 58%);
}

:root body:not(.auth-gate-active) .dashboard-hero::after {
  display: block;
  z-index: 0;
  width: 230px;
  height: 230px;
  inset: -84px -70px auto auto;
  border: 2px solid var(--pg-line);
  border-radius: 50%;
  background: var(--pg-yellow);
  box-shadow: none;
}

:root body:not(.auth-gate-active) .signal-hero-atmosphere {
  z-index: 0;
  width: 95px;
  height: 95px;
  inset: auto auto -30px 43%;
  border: 2px solid var(--pg-line);
  border-radius: 19px 19px 19px 3px;
  opacity: 1;
  background: var(--pg-pink);
  filter: none;
  transform: rotate(16deg);
  animation: pgHeroShape 7s ease-in-out infinite;
}

:root body:not(.auth-gate-active) .dashboard-hero-copy,
:root body:not(.auth-gate-active) .signal-feature-stack,
:root body:not(.auth-gate-active) .dashboard-stats { position: relative; z-index: 2; }

:root body:not(.auth-gate-active) .dashboard-hero-copy .kicker {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  margin: 0 0 18px;
  padding: 0 12px;
  border: 2px solid var(--pg-line);
  border-radius: 999px;
  color: var(--pg-ink);
  background: var(--pg-mint);
  box-shadow: 3px 3px 0 var(--pg-line);
  font-size: 8px;
}

:root body:not(.auth-gate-active) .dashboard-hero-copy .kicker :is(span,b) { color: var(--pg-ink); }

:root body:not(.auth-gate-active) .dashboard-hero-copy h1 {
  max-width: 760px;
  margin: 0;
  color: #fff;
  font: 800 clamp(51px,5.8vw,82px)/.9 "Outfit",system-ui,sans-serif;
  letter-spacing: -.055em;
}

:root body:not(.auth-gate-active) .dashboard-hero-copy h1 span,
:root body:not(.auth-gate-active).account-editor .dashboard-hero-copy h1 span,
:root body:not(.auth-gate-active).account-viewer .dashboard-hero-copy h1 span,
:root body:not(.auth-gate-active).account-special-editor .dashboard-hero-copy h1 span {
  display: inline-block;
  margin-top: 7px;
  padding: 2px 10px 8px;
  color: var(--pg-ink);
  background: var(--pg-yellow);
  background-image: none;
  box-shadow: 5px 5px 0 var(--pg-line);
  -webkit-background-clip: border-box;
  background-clip: border-box;
  transform: rotate(-1.2deg);
}

:root body:not(.auth-gate-active) .dashboard-hero-copy > p:not(.kicker) {
  max-width: 520px;
  margin-top: 23px;
  color: rgba(255,255,255,.84);
  font-size: 12px;
  line-height: 1.65;
}

:root body:not(.auth-gate-active) .signal-hero-actions { margin-top: 27px; }
:root body:not(.auth-gate-active) .signal-hero-actions .primary-button { color: var(--pg-ink); background: var(--pg-yellow); box-shadow: 4px 4px 0 var(--pg-line); }
:root body:not(.auth-gate-active) .signal-hero-actions .secondary-button { color: var(--pg-ink); background: #fff; box-shadow: 4px 4px 0 var(--pg-line); }

:root body:not(.auth-gate-active) .signal-feature-stack {
  width: min(31vw,360px);
  max-width: 360px;
  margin-right: 8px;
  aspect-ratio: 1.08;
}

:root body:not(.auth-gate-active) .signal-feature-card {
  border: 2px solid var(--pg-line);
  border-radius: 25px 25px 25px 6px;
  color: var(--pg-ink);
  box-shadow: 7px 7px 0 var(--pg-line);
}

:root body:not(.auth-gate-active) .signal-feature-back-one { background: var(--pg-pink); transform: translate(-26px,14px) rotate(-8deg); }
:root body:not(.auth-gate-active) .signal-feature-back-two { background: var(--pg-yellow); transform: translate(26px,14px) rotate(8deg); }
:root body:not(.auth-gate-active) .signal-feature-front { padding: 26px; background-color: #fff; background-image: none; }
:root body:not(.auth-gate-active) .signal-feature-front::before { opacity: 1; background: linear-gradient(160deg,rgba(255,255,255,.84),rgba(255,255,255,.12) 58%,rgba(30,41,59,.18)); }
:root body:not(.auth-gate-active) .signal-feature-front small { color: var(--pg-violet); font-size: 8px; }
:root body:not(.auth-gate-active) .signal-feature-front strong { color: var(--pg-ink); font-family: "Outfit",system-ui,sans-serif; }
:root body:not(.auth-gate-active) .signal-feature-front > span { color: var(--pg-ink); }
:root body:not(.auth-gate-active) .signal-feature-front > span i { border: 1px solid var(--pg-line); background: var(--pg-mint); box-shadow: none; }
:root body:not(.auth-gate-active) .signal-feature-stack:not(:disabled):hover .signal-feature-back-one { transform: translate(-39px,12px) rotate(-11deg); }
:root body:not(.auth-gate-active) .signal-feature-stack:not(:disabled):hover .signal-feature-back-two { transform: translate(39px,12px) rotate(11deg); }

:root body:not(.auth-gate-active) .dashboard-stats {
  right: 28px;
  bottom: 24px;
  gap: 8px;
}

:root body:not(.auth-gate-active) .dashboard-stats article {
  min-width: 78px;
  min-height: 58px;
  align-content: center;
  padding: 8px 11px;
  border: 2px solid var(--pg-line);
  border-radius: 13px;
  color: var(--pg-ink);
  background: #fff;
  box-shadow: 3px 3px 0 var(--pg-line);
}

:root body:not(.auth-gate-active) .dashboard-stats span { color: var(--pg-ink); font: 800 17px/1 "Outfit",system-ui,sans-serif; }
:root body:not(.auth-gate-active) .dashboard-stats small { color: var(--pg-muted); font-size: 7px; }

:root body:not(.auth-gate-active) .dashboard-library {
  padding: 48px clamp(28px,4.5vw,64px) 78px;
}

:root body:not(.auth-gate-active) .dashboard-heading .kicker,
:root body:not(.auth-gate-active) .queue-panel .section-heading .kicker,
:root body:not(.auth-gate-active) .photo-gallery-panel .kicker {
  color: var(--pg-role);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;
}

:root body:not(.auth-gate-active) .dashboard-heading h2 {
  position: relative;
  display: inline-block;
  color: var(--pg-page-ink);
  font: 800 clamp(32px,4vw,46px)/1 "Outfit",system-ui,sans-serif;
}

:root body:not(.auth-gate-active) .dashboard-heading h2::after {
  position: absolute;
  right: 2px;
  bottom: -9px;
  left: 0;
  height: 5px;
  border-radius: 50%;
  content: "";
  background: var(--pg-pink);
  transform: rotate(-1deg);
}

:root body:not(.auth-gate-active) .dashboard-filters {
  top: 45px;
  padding: 5px;
  border: 2px solid var(--pg-page-line);
  border-radius: 15px;
  background: var(--pg-paper);
  box-shadow: 4px 4px 0 var(--pg-hard-shadow);
}

:root body:not(.auth-gate-active) .dashboard-filters button {
  height: 34px;
  border: 2px solid transparent;
  border-radius: 10px;
  color: var(--pg-page-muted);
  background: transparent;
  font-size: 9px;
  font-weight: 800;
}

:root body:not(.auth-gate-active) .dashboard-filters button:hover { color: var(--pg-page-ink); background: var(--pg-page-soft); }
:root body:not(.auth-gate-active) .dashboard-filters button[aria-pressed="true"] { border-color: var(--pg-page-line); color: var(--pg-ink); background: var(--pg-yellow); box-shadow: 2px 2px 0 var(--pg-hard-shadow); }

:root body:not(.auth-gate-active) .dashboard-grid {
  grid-template-columns: repeat(auto-fit,minmax(230px,282px));
  gap: clamp(22px,2.2vw,32px);
  margin-top: 38px;
}

:root body:not(.auth-gate-active) .dashboard-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transition: transform 300ms var(--pg-bounce);
}

:root body:not(.auth-gate-active) .dashboard-card::before { display: none; }
:root body:not(.auth-gate-active) .dashboard-card:hover { border: 0; background: transparent; box-shadow: none; transform: rotate(-1deg) scale(1.02); }

:root body:not(.auth-gate-active) .dashboard-card-cover {
  aspect-ratio: .92;
  padding: 18px;
  border: 2px solid var(--pg-line);
  border-radius: 23px 23px 23px 6px;
  box-shadow: 7px 7px 0 var(--pg-hard-shadow);
  transition: box-shadow 280ms ease,transform 280ms var(--pg-bounce);
}

:root body:not(.auth-gate-active) .dashboard-card:hover .dashboard-card-cover,
:root body:not(.auth-gate-active) .dashboard-card:focus-within .dashboard-card-cover { box-shadow: 10px 10px 0 var(--pg-hard-shadow); transform: translate(-2px,-2px); }
:root body:not(.auth-gate-active) .dashboard-card-cover::before { display: none; }
:root body:not(.auth-gate-active) .dashboard-card-cover::after { background: linear-gradient(145deg,rgba(255,255,255,.13),transparent 45%,rgba(30,41,59,.22)); }
:root body:not(.auth-gate-active) .dashboard-card-index { color: #fff; font-size: 8px; }
:root body:not(.auth-gate-active) .dashboard-card-art-title { color: #fff; font: 800 clamp(27px,2.7vw,39px)/.86 "Outfit",system-ui,sans-serif; text-shadow: 0 3px 0 rgba(30,41,59,.24); }

:root body:not(.auth-gate-active) .dashboard-card-badge {
  top: 14px;
  right: 14px;
  height: 27px;
  padding: 0 9px;
  border: 2px solid var(--pg-line);
  color: var(--pg-ink);
  background: #fff;
  box-shadow: 2px 2px 0 var(--pg-line);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-size: 7px;
}

:root body:not(.auth-gate-active) .dashboard-card-badge.private { color: var(--pg-ink); background: var(--pg-pink); }
:root body:not(.auth-gate-active) .dashboard-card-play { width: 42px; height: 42px; border: 2px solid var(--pg-line); color: var(--pg-ink); background: var(--pg-mint); box-shadow: 4px 4px 0 var(--pg-line); opacity: 1; transform: none; }
:root body:not(.auth-gate-active) .dashboard-card-copy { padding: 18px 4px 0; }
:root body:not(.auth-gate-active) .dashboard-card-copy h3 { color: var(--pg-page-ink); font: 800 16px/1.25 "Outfit",system-ui,sans-serif; }
:root body:not(.auth-gate-active) .dashboard-card-meta { color: var(--pg-page-muted); font-size: 8px; }
:root body:not(.auth-gate-active) .dashboard-card-role { border: 1px solid var(--pg-page-line); border-radius: 999px; color: var(--pg-ink); background: var(--pg-yellow); }

:root body:not(.auth-gate-active) .dashboard-create-card {
  aspect-ratio: .92;
  border: 2px dashed var(--pg-page-line);
  border-radius: 23px 23px 23px 6px;
  color: var(--pg-page-ink);
  background: var(--pg-paper);
  box-shadow: 7px 7px 0 color-mix(in srgb,var(--pg-hard-shadow) 18%,transparent);
  transition: transform 280ms var(--pg-bounce),box-shadow 280ms ease,background 180ms ease;
}

:root body:not(.auth-gate-active) .dashboard-create-card:hover { border-color: var(--pg-page-line); background: color-mix(in srgb,var(--pg-yellow) 28%,var(--pg-paper)); box-shadow: 9px 9px 0 var(--pg-hard-shadow); transform: translate(-2px,-2px) rotate(1deg); }
:root body:not(.auth-gate-active) .dashboard-create-icon { border: 2px solid var(--pg-page-line); color: #fff; background: var(--pg-violet); box-shadow: 4px 4px 0 var(--pg-hard-shadow); }
:root body:not(.auth-gate-active) .dashboard-create-card strong { color: var(--pg-page-ink); font-family: "Outfit",system-ui,sans-serif; }
:root body:not(.auth-gate-active) .dashboard-create-card small { color: var(--pg-page-muted); }

:root body:not(.auth-gate-active) .dashboard-empty,
:root body:not(.auth-gate-active) .empty-state {
  border: 2px dashed var(--pg-page-line);
  border-radius: 22px 22px 22px 6px;
  color: var(--pg-page-ink);
  background: var(--pg-paper);
  box-shadow: 6px 6px 0 color-mix(in srgb,var(--pg-hard-shadow) 20%,transparent);
}

:root body:not(.auth-gate-active) :is(.dashboard-empty,.empty-state) .empty-icon { border: 2px solid var(--pg-page-line); color: var(--pg-ink); background: var(--pg-yellow); box-shadow: 3px 3px 0 var(--pg-hard-shadow); }

@keyframes pgHeroShape {
  0%,100% { transform: translateY(0) rotate(16deg); }
  50% { transform: translateY(-10px) rotate(22deg); }
}

/* Playlist identity card */
:root body:not(.auth-gate-active) #playlistView {
  width: calc(100% - var(--signal-rail-width));
  margin-left: var(--signal-rail-width);
}

:root body:not(.auth-gate-active) .hero {
  width: calc(100% - 48px);
  margin: 24px;
  overflow: hidden;
  border: 2px solid var(--pg-line);
  border-radius: 32px 32px 32px 9px;
  color: #fff;
  background-color: var(--pg-violet);
  background-image: linear-gradient(135deg,var(--pg-violet),var(--pg-pink));
  box-shadow: 9px 9px 0 var(--pg-hard-shadow);
  isolation: isolate;
}

:root body:not(.auth-gate-active) .hero::before {
  z-index: 0;
  opacity: 1;
  background-image:
    linear-gradient(90deg,rgba(30,41,59,.68),rgba(30,41,59,.12) 70%,rgba(30,41,59,.22)),
    radial-gradient(circle,rgba(255,255,255,.2) 1.2px,transparent 1.2px);
  background-size: 100% 100%,22px 22px;
}

:root body:not(.auth-gate-active) .hero::after {
  position: absolute;
  z-index: 0;
  display: block;
  width: 185px;
  height: 185px;
  top: -78px;
  right: -55px;
  border: 2px solid var(--pg-line);
  border-radius: 50%;
  content: "";
  background: var(--pg-yellow);
}

:root body:not(.auth-gate-active) .signal-playlist-heading,
:root body:not(.auth-gate-active) .hero-content { position: relative; z-index: 2; }

:root body:not(.auth-gate-active) .signal-playlist-heading { padding: 25px clamp(26px,4vw,50px) 0; }

:root body:not(.auth-gate-active) .signal-playlist-heading button,
:root body:not(.auth-gate-active) .signal-playlist-heading > span {
  min-height: 34px;
  padding: 0 12px;
  border: 2px solid var(--pg-line);
  border-radius: 999px;
  color: var(--pg-ink);
  background: #fff;
  box-shadow: 3px 3px 0 var(--pg-line);
  font-size: 8px;
}

:root body:not(.auth-gate-active) .signal-playlist-heading button:hover { color: var(--pg-ink); background: var(--pg-yellow); }
:root body:not(.auth-gate-active) .signal-playlist-heading i { border: 1px solid var(--pg-line); background: var(--pg-pink); box-shadow: none; }

:root body:not(.auth-gate-active) .hero-content {
  min-height: 320px;
  gap: clamp(28px,4vw,54px);
  padding: 30px clamp(32px,5vw,66px) 48px;
}

:root body:not(.auth-gate-active) .cover-art {
  width: 215px;
  border: 2px solid var(--pg-line);
  border-radius: 25px 25px 25px 6px;
  box-shadow: 8px 8px 0 var(--pg-line);
}

:root body:not(.auth-gate-active) .cover-art::after { background: linear-gradient(145deg,rgba(255,255,255,.12),transparent 38%,rgba(30,41,59,.22)); }
:root body:not(.auth-gate-active) .cover-word { font-family: "Outfit",system-ui,sans-serif; }
:root body:not(.auth-gate-active) .cover-edit { border: 2px solid var(--pg-line); color: var(--pg-ink); background: var(--pg-yellow); box-shadow: 3px 3px 0 var(--pg-line); -webkit-backdrop-filter: none; backdrop-filter: none; }

:root body:not(.auth-gate-active) .eyebrow {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  margin-bottom: 14px;
  padding: 0 11px;
  border: 2px solid var(--pg-line);
  border-radius: 999px;
  color: var(--pg-ink);
  background: var(--pg-mint);
  box-shadow: 3px 3px 0 var(--pg-line);
  font: 800 8px/1 "Plus Jakarta Sans",system-ui,sans-serif;
}

:root body:not(.auth-gate-active) .eyebrow-dot { border: 1px solid var(--pg-line); background: #fff; }
:root body:not(.auth-gate-active) .title-line h1 { color: #fff; font: 800 clamp(48px,5.2vw,74px)/.9 "Outfit",system-ui,sans-serif; letter-spacing: -.05em; }
:root body:not(.auth-gate-active) .edit-button { border: 2px solid var(--pg-line); color: var(--pg-ink); background: var(--pg-yellow); box-shadow: 3px 3px 0 var(--pg-line); }
:root body:not(.auth-gate-active) .playlist-identity > p { color: rgba(255,255,255,.84); font-size: 12px; }
:root body:not(.auth-gate-active) .meta-line { color: rgba(255,255,255,.8); }
:root body:not(.auth-gate-active) .meta-line strong { color: #fff; }
:root body:not(.auth-gate-active) .mini-avatar { border: 2px solid var(--pg-line); color: var(--pg-role-ink); background: var(--pg-role); }

:root body:not(.auth-gate-active) .hero-actions .primary-button { color: var(--pg-ink); background: var(--pg-yellow); box-shadow: 4px 4px 0 var(--pg-line); }
:root body:not(.auth-gate-active) .hero-actions .secondary-button { color: var(--pg-ink); background: #fff; box-shadow: 4px 4px 0 var(--pg-line); }
:root body:not(.auth-gate-active) .hero-actions .round-button { color: var(--pg-ink); background: var(--pg-mint); box-shadow: 4px 4px 0 var(--pg-line); }
:root body:not(.auth-gate-active) .hero-actions .round-button:last-child { background: var(--pg-pink); }

/* Stable workspace with a dark media stage */
:root body:not(.auth-gate-active) .workspace {
  grid-template-areas: "player queue";
  grid-template-columns: minmax(0,1.45fr) minmax(320px,.55fr);
  gap: 26px;
  width: 100%;
  margin: 0;
  padding: 40px clamp(24px,4vw,54px) 84px;
}

:root body:not(.auth-gate-active) .player-panel,
:root body:not(.auth-gate-active) .queue-panel {
  border: 2px solid var(--pg-page-line);
  border-radius: 25px 25px 25px 7px;
  color: var(--pg-page-ink);
  background: var(--pg-paper);
  box-shadow: 8px 8px 0 var(--pg-hard-shadow);
}

:root body:not(.auth-gate-active) .player-panel {
  padding: 20px;
  overflow: visible;
}

:root body:not(.auth-gate-active) .player-heading {
  height: 41px;
  padding: 0 3px 10px;
  color: var(--pg-page-muted);
  font-family: "Plus Jakarta Sans",system-ui,sans-serif;
  font-size: 8px;
  font-weight: 800;
}

:root body:not(.auth-gate-active) .now-playing-dot { width: 8px; height: 8px; border: 1px solid var(--pg-page-line); background: var(--pg-mint); box-shadow: none; }

:root body:not(.auth-gate-active) .video-stage {
  border: 2px solid var(--pg-line);
  border-radius: 21px 21px 21px 6px;
  background: #07080d;
  box-shadow: 6px 6px 0 var(--pg-hard-shadow);
}

:root body:not(.auth-gate-active) .video-placeholder {
  background-color: #0b0a0f;
  background-image:
    radial-gradient(circle at 62% 35%,rgba(139,92,246,.48),transparent 25%),
    radial-gradient(circle at 34% 68%,rgba(244,114,182,.34),transparent 28%),
    radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size: 100% 100%,100% 100%,22px 22px;
}

:root body:not(.auth-gate-active) .placeholder-mark { border: 2px solid #fff; border-radius: 14px 14px 14px 4px; background: var(--pg-violet); box-shadow: 5px 5px 0 #fff; }
:root body:not(.auth-gate-active) .video-placeholder p { color: rgba(255,255,255,.74); font-family: "Outfit",system-ui,sans-serif; }
:root body:not(.auth-gate-active) .center-play { border: 2px solid var(--pg-line); color: var(--pg-ink); background: var(--pg-yellow); box-shadow: 5px 5px 0 var(--pg-line); }
:root body:not(.auth-gate-active) .video-badge { border: 2px solid var(--pg-line); color: var(--pg-ink); background: var(--pg-mint); }

:root body:not(.auth-gate-active) .player-details { padding: 27px 3px 3px; }
:root body:not(.auth-gate-active) .playing-copy h3 { color: var(--pg-page-ink); font: 800 clamp(27px,3vw,42px)/1 "Outfit",system-ui,sans-serif; }
:root body:not(.auth-gate-active) .playing-copy p { color: var(--pg-page-muted); }

:root body:not(.auth-gate-active) :is(.mini-action,.transport-button,.volume-button,.fit-button,.quality-button) {
  border: 2px solid transparent;
  border-radius: 11px;
  color: var(--pg-page-muted);
  background: transparent;
}

:root body:not(.auth-gate-active) :is(.mini-action,.transport-button,.volume-button,.fit-button,.quality-button):hover,
:root body:not(.auth-gate-active) :is(.transport-button,.fit-button)[aria-pressed="true"] {
  border-color: var(--pg-page-line);
  color: var(--pg-ink);
  background: var(--pg-yellow);
  box-shadow: 2px 2px 0 var(--pg-hard-shadow);
}

:root body:not(.auth-gate-active) .main-play {
  width: 58px;
  height: 58px;
  border: 2px solid var(--pg-page-line);
  color: #fff;
  background: var(--pg-violet);
  box-shadow: 5px 5px 0 var(--pg-hard-shadow);
  transition: transform 220ms var(--pg-bounce),box-shadow 220ms ease;
}

:root body:not(.auth-gate-active) .main-play:hover { box-shadow: 7px 7px 0 var(--pg-hard-shadow); transform: translate(-2px,-2px); }
:root body:not(.auth-gate-active) .range { height: 6px; border: 1px solid var(--pg-page-line); background: linear-gradient(to right,var(--pg-violet) 0,var(--pg-pink) var(--range-value,0%),var(--pg-page-soft) var(--range-value,0%)); }
:root body:not(.auth-gate-active) .range::-webkit-slider-thumb { width: 16px; height: 16px; border: 2px solid var(--pg-page-line); background: var(--pg-yellow); box-shadow: 2px 2px 0 var(--pg-hard-shadow); }
:root body:not(.auth-gate-active) .range::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid var(--pg-page-line); background: var(--pg-yellow); box-shadow: 2px 2px 0 var(--pg-hard-shadow); }
:root body:not(.auth-gate-active) .time-row { color: var(--pg-page-muted); }
:root body:not(.auth-gate-active) .quality-button small { color: var(--pg-page-muted); }

:root body:not(.auth-gate-active) .quality-menu {
  border: 2px solid var(--pg-page-line);
  border-radius: 15px 15px 15px 4px;
  color: var(--pg-page-ink);
  background: var(--pg-paper);
  box-shadow: 6px 6px 0 var(--pg-hard-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

:root body:not(.auth-gate-active) .quality-menu-head { border-color: var(--pg-page-line); }
:root body:not(.auth-gate-active) .quality-menu-head strong { color: var(--pg-page-ink); }
:root body:not(.auth-gate-active) .quality-menu-head small,
:root body:not(.auth-gate-active) .quality-menu > button small { color: var(--pg-page-muted); }
:root body:not(.auth-gate-active) .quality-menu > button { color: var(--pg-page-ink); }
:root body:not(.auth-gate-active) .quality-menu > button:hover { background: var(--pg-page-soft); }
:root body:not(.auth-gate-active) .quality-menu > button[aria-checked="true"] { color: var(--pg-ink); background: var(--pg-yellow); }
:root body:not(.auth-gate-active) .quality-menu > button[aria-checked="true"]::before { border-color: var(--pg-line); background: var(--pg-violet); box-shadow: none; }

/* Queue as a calm sticker sheet */
:root body:not(.auth-gate-active) .queue-panel {
  min-width: 0;
  min-height: 620px;
  padding: 29px 20px;
  border-left: 2px solid var(--pg-page-line);
}

:root body:not(.auth-gate-active) .queue-panel .section-heading { margin-bottom: 20px; }
:root body:not(.auth-gate-active) .queue-panel .section-heading h2 { color: var(--pg-page-ink); font: 800 31px/1 "Outfit",system-ui,sans-serif; }

:root body:not(.auth-gate-active) .text-button {
  min-height: 34px;
  border: 2px solid transparent;
  border-radius: 10px;
  color: var(--pg-page-muted);
  background: transparent;
  font-size: 9px;
  font-weight: 800;
}

:root body:not(.auth-gate-active) .text-button:hover,
:root body:not(.auth-gate-active) .text-button[aria-pressed="true"] { border-color: var(--pg-page-line); color: var(--pg-ink); background: var(--pg-yellow); box-shadow: 2px 2px 0 var(--pg-hard-shadow); }

:root body:not(.auth-gate-active) .track-list { gap: 7px; }

:root body:not(.auth-gate-active) .track-row {
  min-height: 70px;
  padding: 8px;
  border: 2px solid transparent;
  border-radius: 15px 15px 15px 4px;
  color: var(--pg-page-ink);
  background: transparent;
  transition: transform 220ms var(--pg-bounce),border-color 160ms ease,background 160ms ease,box-shadow 160ms ease;
}

:root body:not(.auth-gate-active) .track-row:hover { border-color: var(--pg-page-line); background: color-mix(in srgb,var(--pg-mint) 24%,var(--pg-paper)); box-shadow: 3px 3px 0 var(--pg-hard-shadow); transform: translate(-1px,-1px); }
:root body:not(.auth-gate-active) .track-row.active { border-color: var(--pg-page-line); background: var(--pg-yellow); box-shadow: 3px 3px 0 var(--pg-hard-shadow); }
:root body:not(.auth-gate-active) .track-thumb { border: 2px solid var(--pg-page-line); border-radius: 11px 11px 11px 3px; box-shadow: 2px 2px 0 var(--pg-hard-shadow); }
:root body:not(.auth-gate-active) .track-info button { color: var(--pg-page-ink); font-size: 10px; }
:root body:not(.auth-gate-active) .track-row.active .track-info button { color: var(--pg-ink); }
:root body:not(.auth-gate-active) .track-info p,
:root body:not(.auth-gate-active) .track-duration { color: var(--pg-page-muted); }
:root body:not(.auth-gate-active) .track-row.active :is(.track-info p,.track-duration,.track-menu,.drag-handle) { color: var(--pg-muted); }
:root body:not(.auth-gate-active) .drag-handle,
:root body:not(.auth-gate-active) .track-menu { color: var(--pg-page-muted); }
:root body:not(.auth-gate-active) .track-menu:hover { border: 1px solid var(--pg-page-line); border-radius: 8px; color: var(--pg-ink); background: var(--pg-pink); }

/* Protected and photo collections */
:root body:not(.auth-gate-active) .private-lock-panel,
:root body:not(.auth-gate-active) .photo-gallery-panel {
  padding: clamp(28px,5vw,54px);
  border: 2px solid var(--pg-page-line);
  border-radius: 25px 25px 25px 7px;
  color: var(--pg-page-ink);
  background: var(--pg-paper);
  box-shadow: 8px 8px 0 var(--pg-hard-shadow);
}

:root body:not(.auth-gate-active) .private-lock-icon { border: 2px solid var(--pg-page-line); color: var(--pg-ink); background: var(--pg-pink); box-shadow: 5px 5px 0 var(--pg-hard-shadow); }
:root body:not(.auth-gate-active) .private-lock-panel h2 { color: var(--pg-page-ink); font-family: "Outfit",system-ui,sans-serif; }
:root body:not(.auth-gate-active) .private-lock-panel > p:not(.kicker) { color: var(--pg-page-muted); }
:root body:not(.auth-gate-active) .private-lock-panel form > label { color: var(--pg-page-ink); }
:root body:not(.auth-gate-active) .unlock-row input { border: 2px solid var(--pg-page-line); color: var(--pg-page-ink); background: var(--pg-paper); box-shadow: 3px 3px 0 transparent; }
:root body:not(.auth-gate-active) .unlock-row input:focus { border-color: var(--pg-violet); box-shadow: 3px 3px 0 var(--pg-violet); outline: 0; }
:root body:not(.auth-gate-active) .private-lock-panel form > small { color: var(--pg-page-muted); }

:root body:not(.auth-gate-active) .photo-gallery { gap: 18px; }
:root body:not(.auth-gate-active) .photo-card { border: 2px solid var(--pg-page-line); border-radius: 22px 22px 22px 6px; background: var(--pg-page-soft); box-shadow: 7px 7px 0 var(--pg-hard-shadow); transition: transform 260ms var(--pg-bounce); }
:root body:not(.auth-gate-active) .photo-card:hover { transform: translate(-2px,-3px) rotate(-1deg); }
:root body:not(.auth-gate-active) .photo-delete { border: 2px solid var(--pg-line); color: var(--pg-ink); background: var(--pg-pink); box-shadow: 2px 2px 0 var(--pg-line); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root body:not(.auth-gate-active) .special-private-pill { border: 2px solid var(--pg-page-line); color: var(--pg-ink); background: var(--pg-yellow); box-shadow: 2px 2px 0 var(--pg-hard-shadow); }

/* Dialogs and form surfaces */
:root body:not(.auth-gate-active) .modal {
  border: 2px solid var(--pg-page-line);
  border-radius: 25px 25px 25px 7px;
  color: var(--pg-page-ink);
  background: var(--pg-paper);
  box-shadow: 10px 10px 0 var(--pg-hard-shadow);
}

:root body:not(.auth-gate-active) .modal::backdrop { background: rgba(15,23,42,.68); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
:root body:not(.auth-gate-active) .modal form { padding: clamp(22px,4vw,30px); }
:root body:not(.auth-gate-active) .modal-head { margin-bottom: 24px; }
:root body:not(.auth-gate-active) .modal-head .kicker { color: var(--pg-role); font-size: 9px; font-weight: 800; }
:root body:not(.auth-gate-active) .modal-head h2 { color: var(--pg-page-ink); font: 800 clamp(27px,4vw,38px)/1 "Outfit",system-ui,sans-serif; letter-spacing: -.035em; }

:root body:not(.auth-gate-active) .modal-close {
  width: 39px;
  height: 39px;
  border: 2px solid var(--pg-page-line);
  border-radius: 50%;
  color: var(--pg-ink);
  background: var(--pg-pink);
  box-shadow: 3px 3px 0 var(--pg-hard-shadow);
  transition: transform 220ms var(--pg-bounce),box-shadow 220ms ease;
}

:root body:not(.auth-gate-active) .modal-close:hover { box-shadow: 5px 5px 0 var(--pg-hard-shadow); transform: translate(-2px,-2px) rotate(7deg); }

:root body:not(.auth-gate-active) .modal label {
  gap: 8px;
  color: var(--pg-page-ink);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

:root body:not(.auth-gate-active) .modal :is(input:not([type="checkbox"]),textarea),
:root body:not(.auth-gate-active) .slug-input {
  border: 2px solid #cbd5e1;
  border-radius: 13px;
  color: var(--pg-page-ink);
  background: var(--pg-paper);
  box-shadow: 4px 4px 0 transparent;
  transition: border-color 180ms ease,box-shadow 180ms ease,transform 180ms ease;
}

:root body:not(.auth-gate-active) .modal input:not([type="checkbox"]) {
  box-sizing: border-box;
  height: 46px;
  min-height: 46px;
  padding: 0 14px;
  line-height: 1.2;
  -webkit-appearance: none;
  appearance: none;
}

:root[data-color-mode="dark"] body:not(.auth-gate-active) .modal :is(input:not([type="checkbox"]),textarea),
:root[data-color-mode="dark"] body:not(.auth-gate-active) .slug-input { border-color: #475569; }

:root body:not(.auth-gate-active) .modal :is(input:not([type="checkbox"]),textarea):focus,
:root body:not(.auth-gate-active) .slug-input:focus-within {
  border-color: var(--pg-violet);
  box-shadow: 4px 4px 0 var(--pg-violet);
  outline: 0;
  transform: translate(-1px,-1px);
}

:root body:not(.auth-gate-active) .modal :is(input,textarea)::placeholder { color: var(--pg-page-muted); }
:root body:not(.auth-gate-active) .slug-input span { color: var(--pg-page-muted); }
:root body:not(.auth-gate-active) .modal-grid { gap: 12px; }

:root body:not(.auth-gate-active) .access-note,
:root body:not(.auth-gate-active) .form-status {
  border: 1px dashed var(--pg-page-line);
  border-radius: 12px;
  color: var(--pg-page-muted);
  background: var(--pg-page-soft);
}

:root body:not(.auth-gate-active) .access-note { padding: 11px 12px; }
:root body:not(.auth-gate-active) .access-note code { color: var(--pg-violet); }
:root body:not(.auth-gate-active) .delete-playlist-button { color: var(--pg-danger); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

:root body:not(.auth-gate-active) .switch-label {
  border: 2px solid var(--pg-page-line);
  border-radius: 15px 15px 15px 5px;
  color: var(--pg-page-ink);
  background: var(--pg-page-soft);
  box-shadow: 3px 3px 0 color-mix(in srgb,var(--pg-hard-shadow) 16%,transparent);
}

:root body:not(.auth-gate-active) .switch-label strong { color: var(--pg-page-ink); }
:root body:not(.auth-gate-active) .switch-label small,
:root body:not(.auth-gate-active) .privacy-settings > label > small { color: var(--pg-page-muted); }
:root body:not(.auth-gate-active) .switch-label input { border: 2px solid var(--pg-page-line); background: #cbd5e1; }
:root body:not(.auth-gate-active) .switch-label input::after { width: 14px; height: 14px; background: #fff; }
:root body:not(.auth-gate-active) .switch-label input:checked { background: var(--pg-violet); }

:root body:not(.auth-gate-active) :is(.playlist-kind-options,.editor-type-options) {
  border: 0;
  color: var(--pg-page-ink);
}

:root body:not(.auth-gate-active) :is(.playlist-kind-options,.editor-type-options) legend { color: var(--pg-page-ink); font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }

:root body:not(.auth-gate-active) :is(.playlist-kind-options,.editor-type-options) label > span {
  border: 2px solid #cbd5e1;
  border-radius: 15px 15px 15px 5px;
  color: var(--pg-page-ink);
  background: var(--pg-paper);
}

:root body:not(.auth-gate-active) :is(.playlist-kind-options,.editor-type-options) input:checked + span { border-color: var(--pg-page-line); background: var(--pg-yellow); box-shadow: 4px 4px 0 var(--pg-hard-shadow); }
:root body:not(.auth-gate-active) :is(.playlist-kind-options,.editor-type-options) small { color: var(--pg-page-muted); }

/* Account and role boundaries */
:root body:not(.auth-gate-active) .account-card,
:root body:not(.auth-gate-active) .portal-boundary,
:root body:not(.auth-gate-active) .viewer-access-hero,
:root body:not(.auth-gate-active) .viewer-permission-grid article,
:root body:not(.auth-gate-active) .viewer-restriction {
  border: 2px solid var(--pg-page-line);
  color: var(--pg-page-ink);
  background: var(--pg-page-soft);
}

:root body:not(.auth-gate-active) .account-card { border-radius: 17px 17px 17px 5px; box-shadow: 4px 4px 0 color-mix(in srgb,var(--pg-hard-shadow) 20%,transparent); }
:root body:not(.auth-gate-active) .large-avatar { border: 2px solid var(--pg-page-line); color: var(--pg-role-ink); background: var(--pg-role); box-shadow: 3px 3px 0 var(--pg-hard-shadow); }
:root body:not(.auth-gate-active) .account-card div span { color: var(--pg-page-muted); }
:root body:not(.auth-gate-active) .secure-pill { border: 1px solid var(--pg-page-line); color: var(--pg-ink); background: var(--pg-mint); }

:root body:not(.auth-gate-active) .portal-boundary { border-radius: 15px; background: color-mix(in srgb,var(--pg-role) 20%,var(--pg-paper)); }
:root body:not(.auth-gate-active) .portal-boundary-icon { border: 2px solid var(--pg-page-line); border-radius: 12px; color: var(--pg-role-ink); background: var(--pg-role); box-shadow: 2px 2px 0 var(--pg-hard-shadow); }
:root body:not(.auth-gate-active) .portal-boundary strong { color: var(--pg-page-ink); font-family: "Outfit",system-ui,sans-serif; }
:root body:not(.auth-gate-active) .portal-boundary small { color: var(--pg-page-muted); }

:root body:not(.auth-gate-active) .viewer-access-panel { gap: 14px; }
:root body:not(.auth-gate-active) .viewer-access-hero { border-radius: 18px 18px 18px 5px; background: color-mix(in srgb,var(--pg-yellow) 28%,var(--pg-paper)); box-shadow: 4px 4px 0 color-mix(in srgb,var(--pg-hard-shadow) 18%,transparent); }
:root body:not(.auth-gate-active) .viewer-access-icon { border: 2px solid var(--pg-page-line); border-radius: 14px; color: var(--pg-ink); background: var(--pg-yellow); box-shadow: 3px 3px 0 var(--pg-hard-shadow); }
:root body:not(.auth-gate-active) .viewer-access-hero strong { color: var(--pg-page-ink); font-family: "Outfit",system-ui,sans-serif; }
:root body:not(.auth-gate-active) .viewer-access-hero small { color: var(--pg-page-muted); }
:root body:not(.auth-gate-active) .viewer-live-pill { border: 1px solid var(--pg-page-line); color: var(--pg-ink); background: var(--pg-mint); }
:root body:not(.auth-gate-active) .viewer-live-pill > span { border: 1px solid var(--pg-line); background: #fff; box-shadow: none; }
:root body:not(.auth-gate-active) .viewer-permission-grid article { border-radius: 14px; background: var(--pg-paper); }
:root body:not(.auth-gate-active) .viewer-permission-grid article > span { border: 1px solid var(--pg-page-line); color: var(--pg-ink); background: var(--pg-pink); }
:root body:not(.auth-gate-active) .viewer-permission-grid strong { color: var(--pg-page-ink); }
:root body:not(.auth-gate-active) .viewer-permission-grid small { color: var(--pg-page-muted); }
:root body:not(.auth-gate-active) .viewer-restriction { border-radius: 13px; color: var(--pg-page-muted); }
:root body:not(.auth-gate-active) .viewer-restriction span { color: var(--pg-violet); }

:root body:not(.auth-gate-active) .managed-editor-section { border-top: 2px solid var(--pg-page-line); }
:root body:not(.auth-gate-active) .managed-editor-list { color: var(--pg-page-muted); }

/* Appearance cards */
:root body:not(.auth-gate-active) .appearance-option > span {
  border: 2px solid var(--pg-page-line);
  border-radius: 18px 18px 18px 5px;
  color: var(--pg-page-ink);
  background: var(--pg-paper);
  box-shadow: 4px 4px 0 color-mix(in srgb,var(--pg-hard-shadow) 18%,transparent);
}

:root body:not(.auth-gate-active) .appearance-option:hover > span { border-color: var(--pg-page-line); box-shadow: 6px 6px 0 var(--pg-hard-shadow); transform: translate(-2px,-2px) rotate(-1deg); }
:root body:not(.auth-gate-active) .appearance-option > input:checked + span { border-color: var(--pg-page-line); background: var(--pg-yellow); box-shadow: 6px 6px 0 var(--pg-hard-shadow); }
:root body:not(.auth-gate-active) .appearance-option strong { color: var(--pg-page-ink); font-family: "Outfit",system-ui,sans-serif; }
:root body:not(.auth-gate-active) .appearance-option small { color: var(--pg-page-muted); }
:root body:not(.auth-gate-active) .appearance-option em { border: 1px solid var(--pg-page-line); color: #fff; background: var(--pg-violet); }
:root body:not(.auth-gate-active) .appearance-icon { border: 2px solid var(--pg-page-line); color: var(--pg-ink); box-shadow: 2px 2px 0 var(--pg-hard-shadow); }
:root body:not(.auth-gate-active) .system-icon { background: var(--pg-mint); }
:root body:not(.auth-gate-active) .light-icon { background: var(--pg-yellow); }
:root body:not(.auth-gate-active) .dark-icon { color: #fff; background: var(--pg-violet); }

/* Confirmation and feedback */
:root body:not(.auth-gate-active) .confirm-sheet section {
  border: 2px solid var(--pg-page-line);
  border-radius: 24px 24px 24px 7px;
  color: var(--pg-page-ink);
  background: var(--pg-paper);
  box-shadow: 9px 9px 0 var(--pg-hard-shadow);
}

:root body:not(.auth-gate-active) .danger-symbol { border: 2px solid var(--pg-page-line); color: var(--pg-ink); background: var(--pg-pink); box-shadow: 4px 4px 0 var(--pg-hard-shadow); }
:root body:not(.auth-gate-active) .confirm-sheet h3 { color: var(--pg-page-ink); font-family: "Outfit",system-ui,sans-serif; }
:root body:not(.auth-gate-active) .confirm-sheet p { color: var(--pg-page-muted); }

:root body:not(.auth-gate-active) .toast {
  min-height: 48px;
  border: 2px solid var(--pg-page-line);
  border-radius: 999px;
  color: var(--pg-ink);
  background: var(--pg-mint);
  box-shadow: 5px 5px 0 var(--pg-hard-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-weight: 800;
}

:root body:not(.auth-gate-active) .toast svg { color: var(--pg-ink); }
:root body:not(.auth-gate-active) .toast.error { background: var(--pg-pink); }
:root body:not(.auth-gate-active) .toast.error svg { color: var(--pg-ink); }

/* Compact player */
:root body:not(.auth-gate-active) .mobile-player {
  border: 2px solid var(--pg-page-line);
  border-radius: 18px 18px 18px 5px;
  color: var(--pg-page-ink);
  background: var(--pg-paper);
  box-shadow: 5px 5px 0 var(--pg-hard-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

:root body:not(.auth-gate-active) .mobile-thumb { border: 2px solid var(--pg-page-line); border-radius: 11px 11px 11px 3px; box-shadow: 2px 2px 0 var(--pg-hard-shadow); }
:root body:not(.auth-gate-active) .mobile-copy strong { color: var(--pg-page-ink); }
:root body:not(.auth-gate-active) .mobile-copy span { color: var(--pg-page-muted); }
:root body:not(.auth-gate-active) .mobile-player .main-play { width: 45px; height: 45px; }

/* Tablet */
@media (max-width: 1120px) {
  :root body:not(.auth-gate-active) .dashboard-hero,
  :root body:not(.auth-gate-active).account-owner .dashboard-hero,
  :root body:not(.auth-gate-active).account-editor .dashboard-hero,
  :root body:not(.auth-gate-active).account-viewer .dashboard-hero,
  :root body:not(.auth-gate-active).account-special-editor .dashboard-hero { grid-template-columns: minmax(0,1fr) minmax(250px,310px); }
  :root body:not(.auth-gate-active) .signal-feature-stack { width: min(80%,290px); }
  :root body:not(.auth-gate-active) .workspace { grid-template-columns: minmax(0,1.2fr) minmax(290px,.8fr); }
  :root body:not(.auth-gate-active) .signal-cloud-live { display: none; }
}

@media (max-width: 930px) and (min-width: 781px) {
  :root body:not(.auth-gate-active) .signal-create-button { width: 44px; padding: 0; justify-content: center; font-size: 0; }
  :root body:not(.auth-gate-active) .signal-create-button span { font-size: 18px; }
  :root body:not(.auth-gate-active) .playlist-switcher { max-width: 150px; }
  :root body:not(.auth-gate-active) .dashboard-hero,
  :root body:not(.auth-gate-active).account-owner .dashboard-hero,
  :root body:not(.auth-gate-active).account-editor .dashboard-hero,
  :root body:not(.auth-gate-active).account-viewer .dashboard-hero,
  :root body:not(.auth-gate-active).account-special-editor .dashboard-hero { grid-template-columns: minmax(0,1fr) 240px; padding-inline: 34px; }
  :root body:not(.auth-gate-active) .workspace { grid-template-columns: minmax(0,1fr); }
  :root body:not(.auth-gate-active) .player-panel { grid-area: auto; }
  :root body:not(.auth-gate-active) .queue-panel { grid-area: auto; min-height: 0; }
}

/* Mobile navigation and content */
@media (max-width: 780px) {
  :root body:not(.auth-gate-active) { --signal-rail-width: 0px; padding-bottom: 88px; }

  :root body:not(.auth-gate-active) .vibe-dock {
    top: auto;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    grid-template-columns: repeat(4,1fr);
    gap: 5px;
    padding: 7px 8px max(9px,env(safe-area-inset-bottom));
    border: 0;
    border-top: 2px solid var(--pg-page-line);
    background: var(--pg-paper);
    box-shadow: 0 -5px 0 color-mix(in srgb,var(--pg-hard-shadow) 12%,transparent);
  }

  :root body:not(.auth-gate-active) .vibe-dock-item,
  :root body:not(.auth-gate-active) .vibe-dock-item[data-dock-action="account"] { width: 100%; height: 54px; border-radius: 13px 13px 5px 5px; }
  :root body:not(.auth-gate-active) .vibe-dock-active-bg { border-radius: 13px 13px 5px 5px; box-shadow: 0 3px 0 var(--pg-hard-shadow); }

  :root body:not(.auth-gate-active) .topbar {
    width: 100%;
    height: 68px;
    margin: 0;
    padding: 10px 13px;
  }

  :root body:not(.auth-gate-active) .topbar > .brand { color: var(--pg-page-ink); font-family: "Outfit",system-ui,sans-serif; }
  :root body:not(.auth-gate-active) .signal-top-search { width: auto; height: 44px; flex: 1; margin-left: 4px; box-shadow: 2px 2px 0 #cbd5e1; }
  :root body:not(.auth-gate-active) .playlist-switcher { width: 44px; max-width: 44px; padding: 0; justify-content: center; }
  :root body:not(.auth-gate-active) .playlist-menu { top: 57px; right: 0; width: min(calc(100vw - 24px),340px); }
  :root body:not(.auth-gate-active) :is(#playlistView,.dashboard-view) { width: 100%; margin-left: 0; }

  :root body:not(.auth-gate-active) .dashboard-hero,
  :root body:not(.auth-gate-active).account-owner .dashboard-hero,
  :root body:not(.auth-gate-active).account-editor .dashboard-hero,
  :root body:not(.auth-gate-active).account-viewer .dashboard-hero,
  :root body:not(.auth-gate-active).account-special-editor .dashboard-hero {
    display: block;
    width: calc(100% - 24px);
    min-height: 650px;
    margin: 12px;
    padding: 36px 22px 98px;
    border-radius: 25px 25px 25px 7px;
    box-shadow: 6px 6px 0 var(--pg-hard-shadow);
  }

  :root body:not(.auth-gate-active) .dashboard-hero::after { width: 150px; height: 150px; top: -65px; right: -48px; }
  :root body:not(.auth-gate-active) .dashboard-hero-copy h1 { font-size: clamp(43px,12.7vw,60px); }
  :root body:not(.auth-gate-active) .dashboard-hero-copy > p:not(.kicker) { max-width: 92%; }
  :root body:not(.auth-gate-active) .signal-feature-stack { right: 4%; bottom: 126px; width: 50%; }
  :root body:not(.auth-gate-active) .signal-feature-card { border-radius: 19px 19px 19px 5px; box-shadow: 5px 5px 0 var(--pg-line); }
  :root body:not(.auth-gate-active) .signal-feature-front { padding: 17px; }
  :root body:not(.auth-gate-active) .signal-feature-front strong { font-size: clamp(24px,7vw,32px); }
  :root body:not(.auth-gate-active) .dashboard-stats { right: auto; bottom: 27px; left: 22px; }
  :root body:not(.auth-gate-active) .dashboard-stats article { min-width: 70px; min-height: 54px; padding-inline: 8px; }
  :root body:not(.auth-gate-active) .dashboard-library { padding: 38px 15px 48px; }
  :root body:not(.auth-gate-active) .dashboard-filters { position: static; width: max-content; max-width: 100%; margin-top: 24px; overflow-x: auto; }
  :root body:not(.auth-gate-active) .dashboard-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px 13px; margin-top: 28px; }
  :root body:not(.auth-gate-active) .dashboard-card-cover { padding: 13px; border-radius: 17px 17px 17px 5px; box-shadow: 5px 5px 0 var(--pg-hard-shadow); }
  :root body:not(.auth-gate-active) .dashboard-card-art-title { font-size: clamp(20px,7vw,29px); }
  :root body:not(.auth-gate-active) .dashboard-card-play { width: 36px; height: 36px; box-shadow: 3px 3px 0 var(--pg-line); }
  :root body:not(.auth-gate-active) .dashboard-card-copy { padding-top: 13px; }
  :root body:not(.auth-gate-active) .dashboard-create-card { border-radius: 17px 17px 17px 5px; box-shadow: 5px 5px 0 color-mix(in srgb,var(--pg-hard-shadow) 20%,transparent); }

  :root body:not(.auth-gate-active) .hero {
    width: calc(100% - 24px);
    margin: 12px;
    border-radius: 24px 24px 24px 7px;
    box-shadow: 6px 6px 0 var(--pg-hard-shadow);
  }

  :root body:not(.auth-gate-active) .signal-playlist-heading { padding: 18px 18px 0; }
  :root body:not(.auth-gate-active) .hero-content { display: block; padding: 24px 22px 38px; }
  :root body:not(.auth-gate-active) .cover-art { width: 145px; box-shadow: 6px 6px 0 var(--pg-line); }
  :root body:not(.auth-gate-active) .playlist-identity { padding-top: 29px; }
  :root body:not(.auth-gate-active) .title-line h1 { font-size: clamp(42px,12.5vw,61px); }
  :root body:not(.auth-gate-active) .workspace { display: flex; flex-direction: column; width: 100%; padding: 28px 14px 48px; }
  :root body:not(.auth-gate-active) .player-panel { order: 1; padding: 14px; border-radius: 21px 21px 21px 6px; box-shadow: 6px 6px 0 var(--pg-hard-shadow); }
  :root body:not(.auth-gate-active) .player-panel .video-stage { border-radius: 17px 17px 17px 5px; box-shadow: 4px 4px 0 var(--pg-hard-shadow); }
  :root body:not(.auth-gate-active) .player-details { padding: 23px 3px 9px; }
  :root body:not(.auth-gate-active) .playing-copy h3 { max-width: 72vw; font-size: 30px; }
  :root body:not(.auth-gate-active) .queue-panel { order: 2; min-height: 0; margin-top: 26px; padding: 26px 14px; border: 2px solid var(--pg-page-line); border-radius: 21px 21px 21px 6px; background: var(--pg-paper); box-shadow: 6px 6px 0 var(--pg-hard-shadow); }
  :root body:not(.auth-gate-active) :is(.private-lock-panel,.photo-gallery-panel) { order: 0; padding: 26px 18px; }
  :root body:not(.auth-gate-active) .photo-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
  :root body:not(.auth-gate-active) .mobile-player { bottom: 78px; right: 10px; left: 10px; }

  :root body:not(.auth-gate-active) .modal { width: min(calc(100% - 24px),560px); max-height: calc(100dvh - 24px); }
  :root body:not(.auth-gate-active) .appearance-options { grid-template-columns: 1fr; }
  :root body:not(.auth-gate-active) .appearance-option > span { min-height: 105px; }
}

@media (max-width: 600px) {
  :root body:not(.auth-gate-active) .topbar { gap: 8px; }
  :root body:not(.auth-gate-active) .topbar > .brand { display: none; }
  :root body:not(.auth-gate-active) .signal-top-search { min-width: 0; margin-left: 0; }
  :root body:not(.auth-gate-active) .topbar-actions { flex: 0 0 auto; gap: 7px; }

  :root body:not(.auth-gate-active) .modal {
    width: min(calc(100% - 20px),560px);
    max-height: calc(100dvh - 20px);
    overflow-x: hidden;
    overflow-y: auto;
  }

  :root body:not(.auth-gate-active) .modal form { padding: 19px; }
  :root body:not(.auth-gate-active) .modal-head {
    display: grid;
    grid-template-columns: minmax(0,1fr) 36px;
    gap: 12px;
    align-items: center;
    margin-bottom: 19px;
  }

  :root body:not(.auth-gate-active) .modal-head > div { min-width: 0; }
  :root body:not(.auth-gate-active) .modal-head .kicker { margin-bottom: 7px; }
  :root body:not(.auth-gate-active) .modal-head h2 { font-size: clamp(27px,8vw,32px); line-height: .96; }
  :root body:not(.auth-gate-active) .modal-close {
    width: 36px;
    height: 36px;
    padding: 0 0 2px;
    justify-self: end;
    font-size: 21px;
    line-height: 1;
    box-shadow: 2px 2px 0 var(--pg-hard-shadow);
  }

  :root body:not(.auth-gate-active) #accountModal .account-card { padding: 12px; }
  :root body:not(.auth-gate-active) #accountModal .portal-boundary { margin: 12px 0 9px; padding: 10px; }
  :root body:not(.auth-gate-active) #accountModal .access-note { margin-bottom: 12px; }
  :root body:not(.auth-gate-active) #accountModal .account-action-stack { gap: 7px; }

  :root body:not(.auth-gate-active) .dashboard-hero,
  :root body:not(.auth-gate-active).account-owner .dashboard-hero,
  :root body:not(.auth-gate-active).account-editor .dashboard-hero,
  :root body:not(.auth-gate-active).account-viewer .dashboard-hero,
  :root body:not(.auth-gate-active).account-special-editor .dashboard-hero { min-height: 830px; }
  :root body:not(.auth-gate-active) .signal-feature-stack { position: absolute; top: 470px; right: 5%; bottom: auto; }
  :root body:not(.auth-gate-active) .dashboard-stats { position: absolute; bottom: 94px; }
}

@media (max-width: 430px) {
  :root body:not(.auth-gate-active) .topbar > .brand { display: none; }
  :root body:not(.auth-gate-active) .topbar-actions .icon-button { display: none; }
  :root body:not(.auth-gate-active) .dashboard-hero,
  :root body:not(.auth-gate-active).account-owner .dashboard-hero,
  :root body:not(.auth-gate-active).account-editor .dashboard-hero,
  :root body:not(.auth-gate-active).account-viewer .dashboard-hero,
  :root body:not(.auth-gate-active).account-special-editor .dashboard-hero { min-height: 760px; }
  :root body:not(.auth-gate-active) .dashboard-hero-copy > p:not(.kicker) { display: none; }
  :root body:not(.auth-gate-active) .signal-hero-actions .secondary-button { display: none; }
  :root body:not(.auth-gate-active) .signal-feature-stack { position: absolute; top: 420px; right: 5%; bottom: auto; }
  :root body:not(.auth-gate-active) .dashboard-stats { position: absolute; bottom: 94px; }
  :root body:not(.auth-gate-active) .dashboard-grid { grid-template-columns: 1fr; gap: 24px; }
  :root body:not(.auth-gate-active) .dashboard-card-cover { aspect-ratio: 1.08; }
  :root body:not(.auth-gate-active) .dashboard-card-art-title { font-size: 34px; }
  :root body:not(.auth-gate-active) .hero-actions { gap: 9px; }
  :root body:not(.auth-gate-active) .hero-actions .secondary-button { padding-inline: 13px; }
  :root body:not(.auth-gate-active) .photo-gallery { grid-template-columns: 1fr; }
  :root body:not(.auth-gate-active) .modal-grid { grid-template-columns: 1fr; }
  :root body:not(.auth-gate-active) .viewer-access-hero { grid-template-columns: 42px minmax(0,1fr); }
  :root body:not(.auth-gate-active) .viewer-live-pill { grid-column: 1 / -1; width: max-content; }
}

@media (prefers-reduced-motion: reduce) {
  :root body:not(.auth-gate-active) .signal-hero-atmosphere { animation: none !important; }
  :root body:not(.auth-gate-active) :is(.dashboard-card,.photo-card,.primary-button,.secondary-button,.danger-button,.round-button,.signal-create-button,.vibe-dock-item) { transition-duration: .01ms !important; }
}