/*
 * The app shell every page shares (web/index.html): the sidebar, the main
 * column, the fixed player bar and the floating ⚙ Backend pill. Loaded after
 * every page stylesheet so it has the last word on the chrome.
 *
 * index.html's stylesheet stacks many body.<page>-active overrides with
 * !important on the same elements; the shell's rules that must hold on every
 * page carry `body:not(#_)`, an id-level specificity that no page rule has,
 * instead of racing them one by one.
 *
 *   ≥ 901 px   the sidebar as designed (228 px)
 *   601–900    a 64 px icon rail: labels become tooltips (wkxShell sets each
 *              item's title) and stay the accessible names
 *   ≤ 600      an off-canvas drawer, opened from the menu button in the top
 *              bar (or, on a page without the shared top bar, the floating
 *              one); focus is trapped in it and Esc closes it
 *
 * The design tokens (--pt-*) are defined once, on :root, in index.html.
 */

/* ── The document scrolls, never .main ──────────────────────────────────
   .main grew with its content (overflow: auto that never scrolled), so it
   was every sticky element's scroll container and nothing stuck (Explore's
   rail, Create's composer, Voice Studio's inspector, the notifications
   rail). It clips sideways instead and lets the window scroll. */
body:not(#_) .app-shell > .main { overflow-x: clip !important; overflow-y: visible !important; }

/* ── Player bar, sidebar and ⚙ Backend pill ─────────────────────────────
   The player bar is fixed across the window's foot on every page, from the
   first paint (lead decision: it is never hidden). Before anything plays it
   is the idle bar: the last sample played (restoreLastPlayed, wk_last_played)
   with Play again / Continue, else "No sample selected". Every page ends
   clear of it. The sidebar keeps its account card above it, and the pill
   docks in the bar's right end, where room is reserved, so it never covers
   Queue or the volume. */
body:not(#_) .app-shell > .sidebar { padding-bottom: calc(var(--player-height, 84px) + 14px) !important; }
body:has(#wk-backend-fab) .player { padding-right: 146px !important; }
#wk-backend-fab { bottom: calc((var(--player-height, 84px) - 36px) / 2) !important; }
body:not(#_) .player.pre-play,
body:not(#_) .player.collapsed .player-center { display: flex !important; }
/* …with the same finish on the pages that showed it only once something
   played and had no bar rules of their own (Voice Studio, My Profile,
   Upgrade, Playlists) and on the community pages and Dashboard (a rounded
   bar in a narrow centred row there), and the Settings view and a folder's
   samples (plain-view-active: no bar rules either): as the library pages' bar
   (index.html's body.favorites-active .player and the "premium polish"
   rules), the mockups' one persistent player. */
body:is(.voice-active, .myaccount-active, .upgrade-active, .community-active, .dashboard-active, .plain-view-active):not(#_) .player,
body:not(#_):has(.wkl-view-playlists, .wkl-view-playlist) .player {
  height: 84px !important; padding-top: 9px !important; padding-bottom: 9px !important; padding-left: 22px !important; border-radius: 0 !important;
  background:
    radial-gradient(760px 130px at 50% 125%, rgba(139, 92, 246, .17), transparent 72%),
    linear-gradient(180deg, rgba(18, 16, 27, .94), rgba(8, 7, 13, .97)) !important;
  border-top: 1px solid rgba(167, 139, 250, .16) !important;
  box-shadow: 0 -30px 90px rgba(0, 0, 0, .62), 0 -1px 34px rgba(139, 92, 246, .12) !important;
  backdrop-filter: blur(30px) saturate(1.25) !important;
}
body:is(.voice-active, .myaccount-active, .upgrade-active, .community-active, .dashboard-active, .plain-view-active):not(#_) .player-inner,
body:not(#_):has(.wkl-view-playlists, .wkl-view-playlist) .player-inner { max-width: 1720px !important; gap: 20px !important; padding: 0 !important; }
body:is(.voice-active, .myaccount-active, .upgrade-active, .community-active, .dashboard-active, .plain-view-active):not(#_) .player-cover,
body:not(#_):has(.wkl-view-playlists, .wkl-view-playlist) .player-cover { width: 54px !important; height: 54px !important; border-radius: 13px !important; }
body:is(.voice-active, .myaccount-active, .upgrade-active, .community-active, .dashboard-active, .plain-view-active):not(#_) .player-toggle,
body:not(#_):has(.wkl-view-playlists, .wkl-view-playlist) .player-toggle {
  width: 48px !important; height: 48px !important; border-radius: 50% !important;
  background: linear-gradient(180deg, #8b5cf6, #5b21d6) !important;
  box-shadow: 0 16px 38px rgba(124, 60, 255, .36) !important;
}
/* The same columns on every page, so the bar doesn't reshape from page to
   page: the library pages had the finish but a narrow centred row, and they
   and the other pages a 320 px now-playing group that cut the idle title to
   "No sample / selected"; now Home's 1,720 px row and 420 px group. Create
   keeps its own compact bar (only the controls that work there). */
body:is(.favorites-active, .allSamples-active, .recently-played-active, .notifications-active, .downloads-active, .processing-active, .search-v3-active):not(#_) .player-inner {
  max-width: 1720px !important; gap: 20px !important; padding: 0 !important;
}
/* …and the Search tab (search-v3-active; it drops search-active, whose
   Home-sized bar index.html has) and Downloads: an 80 px bar with a smaller
   cover and play button there (Search's in a centred 1,200 px row). Their
   finish is the premium polish's. */
body:is(.search-v3-active, .downloads-active):not(#_) .player { height: 84px !important; }
body:is(.search-v3-active, .downloads-active):not(#_) .player-cover { width: 54px !important; height: 54px !important; border-radius: 13px !important; }
body:is(.search-v3-active, .downloads-active):not(#_) .player-toggle { width: 48px !important; height: 48px !important; border-radius: 50% !important; }
body:is(.search-v3-active, .downloads-active):not(#_) .player-wave { height: 30px !important; max-width: 360px !important; }
@media (min-width: 1101px) {
  body:not(#_):not(.create-active) .player .player-left { flex: 0 1 420px !important; min-width: 260px !important; }
}

/* ── 601–900 px: the icon rail ─────────────────────────────────────────── */
@media (min-width: 601px) and (max-width: 900px) {
  :root { --wk-rail-w: 64px; }
  body:not(#_) .app-shell { grid-template-columns: var(--wk-rail-w) minmax(0, 1fr) !important; }
  body:not(#_) .app-shell > .sidebar {
    width: var(--wk-rail-w) !important; min-width: 0 !important;
    padding-left: 8px !important; padding-right: 8px !important;
    overflow: visible !important;
  }
  body:not(#_) .sidebar .sidebar-brand { padding: 14px 0 10px !important; justify-content: center !important; }
  /* the lockup's mark alone: the wordmark is cropped away */
  body:not(#_) .sidebar .sidebar-brand-stack { width: 40px !important; overflow: hidden !important; align-items: flex-start !important; }
  body:not(#_) .sidebar .sidebar-lockup { width: 116px !important; max-width: none !important; flex: 0 0 auto !important; }
  body:not(#_) .sidebar .sidebar-version { display: none !important; }
  body:not(#_) .sidebar .sidebar-scroll { overflow-x: hidden !important; }
  /* items: the icon, centred; the text is still the accessible name */
  body:not(#_) .sidebar .nav-item {
    width: 48px !important; min-height: 44px !important; height: 44px !important;
    margin: 2px auto !important; padding: 0 !important; gap: 0 !important;
    justify-content: center !important; font-size: 0 !important; letter-spacing: 0 !important;
  }
  body:not(#_) .sidebar .nav-item .nav-icon { margin: 0 !important; }
  body:not(#_) .sidebar .nav-item .nav-label,
  body:not(#_) .sidebar .nav-item .nav-count { display: none !important; }
  /* section headings become a hairline; "Your Library" keeps its chevron */
  body:not(#_) .sidebar .sidebar-section-label {
    font-size: 0 !important; padding: 0 !important; margin: 10px auto 6px !important;
    width: 32px !important; min-height: 1px !important; height: 1px !important;
    background: rgba(255, 255, 255, .1) !important; border: 0 !important;
  }
  body:not(#_) .sidebar .sidebar-group-toggle {
    height: 24px !important; width: 48px !important; background: transparent !important;
    justify-content: center !important; border-radius: 8px !important; cursor: pointer;
  }
  body:not(#_) .sidebar .sidebar-group-toggle > span { display: none !important; }
  body:not(#_) .sidebar .sidebar-group-toggle:hover { background: rgba(255, 255, 255, .05) !important; }
  body:not(#_) .sidebar #sidebarHiddenPill,
  body:not(#_) .sidebar .sidebar-upgrade { display: none !important; }
  /* the account card: its avatar (the menu still opens beside the rail) */
  body:not(#_) .sidebar .sidebar-user { justify-content: center !important; padding: 8px 0 !important; gap: 0 !important; }
  body:not(#_) .sidebar .sidebar-user > div:not(.sidebar-user-av):not(.sidebar-user-dropdown) { display: none !important; }
  body:not(#_) .sidebar .sidebar-user-dropdown { left: 0 !important; right: auto !important; min-width: 180px; }
}

/* ── ≤ 600 px: the drawer ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  body:not(#_) .app-shell { grid-template-columns: minmax(0, 1fr) !important; }
  body:not(#_) .app-shell > .sidebar {
    position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important;
    height: auto !important; width: min(288px, 86vw) !important;
    padding-bottom: 14px !important;
    z-index: 1200 !important;
    transform: translateX(-104%);
    visibility: hidden;
    transition: transform 220ms cubic-bezier(.2, .7, .2, 1), visibility 0s linear 220ms;
  }
  body.has-titlebar:not(#_) .app-shell > .sidebar { top: var(--titlebar-h, 32px) !important; }
  body.wk-nav-open:not(#_) .app-shell > .sidebar {
    transform: none; visibility: visible;
    transition: transform 220ms cubic-bezier(.2, .7, .2, 1);
    box-shadow: 24px 0 64px rgba(0, 0, 0, .6) !important;
  }
  body.wk-nav-open { overflow: hidden !important; }
  body.wk-nav-open #wk-backend-fab { visibility: hidden !important; }
  /* phone gutters */
  body:not(#_) .app-shell > .main > .workspace { padding-left: 16px !important; padding-right: 16px !important; }
  /* the pill: its status dot and gear only */
  #wk-backend-fab { padding: 8px 10px !important; right: 10px !important; }
  #wk-backend-fab > span:last-child { font-size: 0 !important; }
  #wk-backend-fab > span:last-child::before { content: "⚙"; font-size: 14px; }
  body:has(#wk-backend-fab) .player { padding-right: 64px !important; }
}
.wk-nav-backdrop {
  position: fixed; inset: 0; z-index: 1190;
  background: rgba(4, 4, 10, .62);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.wk-nav-backdrop[hidden] { display: none; }
/* The menu button for a page without the shared top bar (index.html adds it;
   shown only on a phone-width window, top left, where the bar's would be). */
.wk-shell-navbtn {
  display: none; position: fixed; top: 12px; left: 12px; z-index: 60;
  width: 44px; height: 44px; padding: 0; place-items: center; box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .13); border-radius: 12px;
  background: rgba(14, 12, 26, .9); color: rgba(228, 224, 246, .8); cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.wk-shell-navbtn svg { width: 20px; height: 20px; }
.wk-shell-navbtn:focus-visible { outline: none; box-shadow: 0 0 0 2px #0b0916, 0 0 0 4px rgba(167, 139, 250, .9); }
@media (max-width: 600px) {
  body:not(:has(.pt-topbar)) .wk-shell-navbtn { display: inline-grid; }
  body.has-titlebar .wk-shell-navbtn { top: calc(var(--titlebar-h, 32px) + 12px); }
  /* room for it above the page's own heading */
  body:not(#_):not(:has(.pt-topbar)) .app-shell > .main > .workspace { padding-top: 68px !important; }
}

/* Home's retired first layout collapsed the chrome itself at ≤ 1080 px: the
   labels of a full-width sidebar shrank to nothing and the player lost its
   volume and Queue. The shell owns the collapse now (the rail and the
   drawer above), so outside the rail those rules are undone. */
@media (max-width: 600px), (min-width: 901px) and (max-width: 1080px) {
  body.home-active:not(#_) .sidebar .nav-item,
  body.home-active:not(#_) .sidebar .nav-group-header { font-size: 13px !important; }
  body.home-active:not(#_) .sidebar .sidebar-section-label { font-size: 10.5px !important; }
  body.home-active:not(#_) .sidebar .sidebar-user-name { font-size: 11px !important; }
  body.home-active:not(#_) .sidebar .sidebar-user-plan { font-size: 9px !important; }
}
@media (max-width: 1080px) {
  body.home-active:not(#_) .player .player-right { display: flex !important; }
}

/* My Profile (/account) hides the right-hand panel: its page takes the whole
   column instead of leaving the panel's track empty and clipping itself. */
body.myaccount-active:not(#_) .app-shell > .main > .workspace { grid-template-columns: minmax(0, 1fr) !important; }
/* …with the page's own gutters: it sat flush against the sidebar, and
   "Public profile" on the window's edge. */
body.myaccount-active:not(#_) .myacc-page { padding: 20px 28px calc(var(--player-height, 80px) + 40px); min-width: 0; }
@media (max-width: 600px) {
  body.myaccount-active:not(#_) .myacc-page { padding: 12px 0 calc(var(--player-height, 80px) + 28px); }
}
/* The Settings view and a folder's samples (body.plain-view-active, set by
   updateNavActive): one column under the shared top bar, the same from
   whichever page they are opened. From any page but Home they fell back to
   the base three columns: the 280 px session panel (and the body's room for
   it), a profile panel beside the view and the top bar squeezed into the
   left column, flush against the sidebar. The old status lines stay hidden
   as on Home; a folder keeps its "Folder: …" line (#mode) as its title. */
body.plain-view-active:not(#_) { padding-right: 0 !important; }
body.plain-view-active:not(#_) .session-panel,
body.plain-view-active:not(#_) .workspace > .profile-panel,
body.plain-view-active:not(#_) .embedding-status-panel,
body.plain-view-active:not(#_) #status,
body.plain-view-active:not(#_) #note,
body.plain-view-active:not(#_) #mode:empty { display: none !important; }
body.plain-view-active:not(#_) .app-shell > .main > .workspace {
  grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important;
  padding: 16px 28px calc(var(--player-height, 84px) + 30px) !important;
}
body.plain-view-active:not(#_) #mode { margin: 14px 0 12px; }
@media (max-width: 600px) {
  body.plain-view-active:not(#_) .app-shell > .main > .workspace { padding: 12px 16px calc(var(--player-height, 84px) + 24px) !important; }
}
/* The account card's avatar: the community image over the initials. */
.myacc-avatar { position: relative; overflow: hidden; }
.myacc-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* The shared top bar on the pages index.html draws itself (#wkPageTopbar,
   _wkSyncPageTopbar): at the top of the content column. */
.wk-page-topbar { min-width: 0; }
.wk-page-topbar[hidden], .wk-page-topbar:empty { display: none !important; }

/* ── One top bar ──────────────────────────────────────────────────────────
   A page has the shared bar (wkx-topbar.js) or none. index.html's old
   .topbar strip (its search, chips, bell and avatar) stays in the DOM for
   the scripts that still read its inputs, but never shows: each page hid it
   with its own rule, and My Profile and the taste page (profile-active) had
   none, so the strip sat above them. */
body:not(#_) .app-shell > .main > .topbar { display: none !important; }

/* ── ≤ 900 px: pages with a right-hand panel stack it under the page ───── */
@media (max-width: 900px) {
  body:not(#_) .app-shell > .main > .workspace { grid-template-columns: minmax(0, 1fr) !important; }
  body:not(#_) .workspace > .profile-panel {
    position: static !important; height: auto !important; max-height: none !important;
    width: auto !important; min-width: 0 !important; overflow: visible !important;
  }
}

/* ── The player bar on narrower windows ────────────────────────────────
   Its three groups (now playing | transport | volume + Queue) keep to the
   room left of the docked pill: the waveform goes first, then the slider
   narrows, then shuffle / repeat and the slider go. */
@media (min-width: 601px) and (max-width: 1100px) {
  body:not(#_) .player .player-wave { display: none !important; }
  body:not(#_) .player .player-left { flex: 0 1 320px !important; min-width: 0 !important; }
  body:not(#_) .player .player-meta { min-width: 0 !important; }
  body:not(#_) .player .player-center { flex: 1 1 auto !important; min-width: 0 !important; }
  body:not(#_) .player .player-right { flex: 0 0 auto !important; min-width: 0 !important; gap: 10px !important; }
  body:not(#_) .player .vol-slider { width: 72px !important; }
  /* The now-playing group keeps to the 80 px bar: the title on one line;
     idle ("No sample selected"), no kicker or brand line and no sample
     actions (there is no sample to act on), so the title shows whole. */
  body:not(#_) .player .player-title { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  body:not(#_) .player.pre-play .player-label,
  body:not(#_) .player.pre-play .player-producer,
  body:not(#_) .player.pre-play .player-left-actions { display: none !important; }
}
@media (min-width: 601px) and (max-width: 900px) {
  body:not(#_) .player .player-inner { gap: 12px !important; }
  body:not(#_) .player .player-shuffle,
  body:not(#_) .player .player-repeat,
  body:not(#_) .player .vol-slider,
  body:not(#_) .player .player-autoplay-btn { display: none !important; }
  body:not(#_) .player .player-left { flex: 1 1 auto !important; }
  body:not(#_) .player .player-center { flex: 0 0 auto !important; }
}

/* ── ≤ 600 px: the player bar fits the phone ───────────────────────────── */
@media (max-width: 600px) {
  body:not(#_) .player { padding-left: 10px !important; }
  body:not(#_) .player .player-inner { gap: 8px !important; min-width: 0 !important; }
  body:not(#_) .player .player-left { flex: 1 1 auto !important; min-width: 0 !important; max-width: none !important; gap: 8px !important; }
  body:not(#_) .player .player-cover { width: 40px !important; height: 40px !important; flex: 0 0 40px !important; }
  body:not(#_) .player .player-meta { min-width: 0 !important; }
  body:not(#_) .player .player-label,
  body:not(#_) .player .player-sub,
  body:not(#_) .player .player-producer,
  body:not(#_) .player .player-left-actions,
  body:not(#_) .player .player-wave,
  body:not(#_) .player .player-progress-wrap,
  body:not(#_) .player .player-shuffle,
  body:not(#_) .player .player-repeat,
  body:not(#_) .player .player-volume,
  body:not(#_) .player .player-autoplay-btn,
  body:not(#_) .player .player-badge,
  body:not(#_) .player .player-collapse { display: none !important; }
  body:not(#_) .player .player-center { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; }
  body:not(#_) .player .player-controls { gap: 4px !important; width: auto !important; }
  body:not(#_) .player .player-right { flex: 0 0 auto !important; min-width: 0 !important; gap: 6px !important; }
  body:not(#_) .player .player-queue-btn { padding: 0 10px !important; }
  /* …the pages given the library pages' finish too (its 22 px gutter is the wide bar's). */
  body:is(.voice-active, .myaccount-active, .upgrade-active, .community-active, .dashboard-active, .plain-view-active):not(#_) .player,
  body:not(#_):has(.wkl-view-playlists, .wkl-view-playlist) .player { padding-left: 10px !important; }
}
@media (max-width: 420px) {
  body:not(#_) .player #playerPrev,
  body:not(#_) .player #playerNext { display: none !important; }
}

/* ── Notifications: the list's honest states and the category counts ───── */
.notifications-empty {
  padding: 42px 20px; text-align: center; color: var(--pt-text-secondary, rgba(228, 224, 246, .68));
  border: 1px dashed rgba(255, 255, 255, .1); border-radius: 16px; line-height: 1.5;
}
.notifications-retry {
  margin-left: 8px; padding: 6px 12px; border-radius: 9px; cursor: pointer; font: inherit; font-size: 12.5px;
  border: 1px solid rgba(167, 139, 250, .4); background: rgba(124, 92, 255, .14); color: #ddd6fe;
}
.notifications-tab .notifications-tab-count {
  margin-left: 7px; font-size: 11px; font-weight: 600; opacity: .7; font-variant-numeric: tabular-nums;
}
.notifications-mark-all:disabled { opacity: .45; cursor: default; }
.notifications-limit { margin: -8px 0 14px; font-size: 12.5px; color: var(--pt-text-secondary, rgba(228, 224, 246, .68)); }
/* Load more: the category's next (older) page. */
.notifications-more-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 18px 0 8px; }
.notifications-more {
  padding: 9px 18px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  border: 1px solid rgba(167, 139, 250, .4); background: rgba(124, 92, 255, .14); color: #ddd6fe;
}
.notifications-more:hover { background: rgba(124, 92, 255, .22); }
.notifications-more:disabled { opacity: .55; cursor: default; }
.notifications-more-error { font-size: 12.5px; color: #fca5a5; }
button.notif-sidebar-item { width: 100%; font: inherit; color: inherit; text-align: left; background: transparent; border: 0; cursor: pointer; }
@media (max-width: 600px) {
  body.notifications-active .notifications-header { flex-wrap: wrap; gap: 12px; }
  body.notifications-active .notifications-tabs { flex-wrap: wrap; }
  /* the card's colour tile is decoration: the text gets the room */
  body.notifications-active .notification-art { display: none !important; }
  body.notifications-active .notification-card { grid-template-columns: 8px minmax(0, 1fr) auto !important; gap: 10px !important; padding: 12px !important; }
}

/* ── The sidebar's community group, season card and account card ─────────
   (design H13; wkx-sidebar.js). Feed and the COMMUNITY group show only while
   the community is set up (body.wk-community-nav); the menu is a little
   tighter then, and a fade at its foot says when more of it is below. The
   counts are real (hidden at zero); gold is only Challenges' active item and
   the season card's frame (design §9.5). */
.sidebar .wk-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.sidebar [data-wk-community][hidden],
.sidebar .nav-count[hidden],
.sidebar .sidebar-season[hidden],
.sidebar .sidebar-user-handle[hidden],
.sidebar .sidebar-user-badge[hidden] { display: none !important; }
.sidebar .nav-item-with-count .nav-count-unread {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.sidebar .nav-item-with-count .nav-count-live {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  color: rgba(232, 236, 249, .72); font-size: 11px; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.sidebar .nav-count-live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #34d399;
  box-shadow: 0 0 6px rgba(52, 211, 153, .6);   /* was an infinite pulse: a frame every vsync (2026-09-28) */
}
@keyframes wk-live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .45); }
  50% { box-shadow: 0 0 0 4px rgba(52, 211, 153, 0); }
}
body:not(#_) .sidebar #navChallengesBtn.active {
  color: #fde68a !important;
  border-color: rgba(251, 191, 36, .42) !important;
  background: linear-gradient(90deg, rgba(245, 158, 11, .26) 0%, rgba(245, 158, 11, .07) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 2px 0 0 #fbbf24, 0 0 0 1px rgba(251, 191, 36, .42),
    0 10px 28px rgba(245, 158, 11, .14) !important;
}
body:not(#_) .sidebar #navChallengesBtn.active .nav-icon { color: #fbbf24 !important; opacity: 1 !important; }
@media (min-width: 901px) {
  body.wk-community-nav:not(#_) .sidebar .sidebar-scroll { gap: 2px !important; }
  body.wk-community-nav:not(#_) .sidebar .nav-item {
    height: 34px !important; min-height: 34px !important; margin-top: 0 !important; margin-bottom: 0 !important;
  }
  /* The same on Home and every other page (Home's own labels have no margin):
     the menu never jumps between Home and a community page. */
  body.wk-community-nav:not(#_) .sidebar .sidebar-section-label { padding-top: 10px !important; margin: 0 !important; }
}
.sidebar .sidebar-scroll.wk-more-below {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
}
/* …and a cue at its top while items are hidden above (scrolled down). */
.sidebar .sidebar-scroll.wk-more-above {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24px);
  mask-image: linear-gradient(to bottom, transparent, #000 24px);
}
.sidebar .sidebar-scroll.wk-more-above.wk-more-below {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 36px), transparent);
}
/* The season card, kept in view above the account card: wkxRails' Season
   widget (its own card chrome is off in this one-widget mount; the dates stay
   on Challenges), a link to Challenges. */
.sidebar .sidebar-season {
  flex-shrink: 0; margin: 6px 0 8px; padding: 9px 11px; border-radius: 14px; cursor: pointer;
  background: radial-gradient(120% 100% at 0% 0%, rgba(245, 158, 11, .14), transparent 62%), rgba(17, 15, 30, .94);
  border: 1px solid rgba(251, 191, 36, .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: transform 180ms ease, border-color 180ms ease;
}
.sidebar .sidebar-season:hover { transform: translateY(-2px); border-color: rgba(251, 191, 36, .55); }
.sidebar .sidebar-season:focus-visible { outline: none; box-shadow: 0 0 0 2px #0b0916, 0 0 0 4px rgba(251, 191, 36, .8); }
.sidebar .sidebar-season .wkr-season-card { gap: 9px; }
.sidebar .sidebar-season .wkr-season-art { flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center; }
.sidebar .sidebar-season .wkr-season-art > *,
.sidebar .sidebar-season .wkr-season-art .wkr-art > * { width: 100%; height: 100%; }   /* the trophy art is drawn at 44 px */
.sidebar .sidebar-season .wkr-season-text { gap: 1px; }
.sidebar .sidebar-season .wkr-eyebrow { font-size: 9.5px; letter-spacing: .1em; color: #fcd34d; white-space: nowrap; }
.sidebar .sidebar-season .wkr-launch { padding: 0 4px; font-size: 8px; letter-spacing: .04em; margin-left: 3px; vertical-align: 1px; }
.sidebar .sidebar-season .wkr-season-dates { display: none; }
.sidebar .sidebar-season .wkr-season-left { font-size: 15px; line-height: 1.25; }
.sidebar .sidebar-season .wkr-season-note { font-size: 10.5px; line-height: 1.3; }
/* While the card is on its way, wkx-sidebar.js fits the menu with this
   stand-in where the card will be, and takes it away before the page is
   drawn: never seen. */
.sidebar .sidebar-season.wk-season-ghost { visibility: hidden !important; pointer-events: none !important; transition: none; }
/* …and while it fits the menu, nothing in it eases from one step to the
   next (each step is measured as it will be drawn). */
.app-shell > .sidebar.wk-fitting,
.app-shell > .sidebar.wk-fitting * { transition: none !important; }
/* A short window (≤ 940 px tall, e.g. 1440×900): the season card is a slim
   line ("SEASON 39 · 1d 3h left", its note on Challenges), so more of the
   menu shows above it. */
@media (min-width: 901px) and (max-height: 940px) {
  .sidebar .sidebar-season { margin: 4px 0 6px; padding: 6px 11px; border-radius: 12px; }
  .sidebar .sidebar-season .wkr-season-card { gap: 8px; }
  .sidebar .sidebar-season .wkr-season-art { flex-basis: 22px; width: 22px; height: 22px; }
  .sidebar .sidebar-season .wkr-season-text { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 7px; }
  .sidebar .sidebar-season .wkr-season-left { font-size: 12.5px; }
  .sidebar .sidebar-season .wkr-season-note { display: none; }
}
/* The account card: the member's @handle before the plan, the equipped badge
   under it, and an avatar image over the initial. */
.sidebar .sidebar-user-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sidebar .sidebar-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .sidebar-user-sub { display: flex; align-items: baseline; min-width: 0; white-space: nowrap; }
.sidebar .sidebar-user-handle { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 9.5px; font-weight: 600; color: #a5b4fc; }
.sidebar .sidebar-user-handle:not([hidden]) + .sidebar-user-plan::before { content: "·"; margin: 0 4px; }
.sidebar .sidebar-user-plan { flex: 0 0 auto; }
.sidebar .sidebar-user-badge { margin-top: 3px; min-width: 0; line-height: 1; }
.sidebar .sidebar-user-badge .wkc-badge {
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 2px 7px; font-size: 9.5px; vertical-align: top;
}
.sidebar .sidebar-user-badge .wkc-badge-crown { width: 11px; height: 11px; vertical-align: -2px; margin-right: 3px; }
.sidebar .sidebar-user-av { position: relative; overflow: hidden; }
.sidebar .sidebar-user-av .sidebar-user-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
/* The rail (601–900 px): no season card; an unread count is a dot on its icon. */
@media (min-width: 601px) and (max-width: 900px) {
  body:not(#_) .sidebar .sidebar-season { display: none !important; }
  body:not(#_) .sidebar .nav-item.has-count .nav-icon { position: relative; }
  body:not(#_) .sidebar .nav-item.has-count:not(#navChatBtn) .nav-icon::after {
    content: ""; position: absolute; top: -2px; right: -3px; width: 8px; height: 8px; border-radius: 50%;
    background: #8b5cf6; box-shadow: 0 0 0 2px #0b0916;
  }
}

/* ── The menu, in the lead's order, fitted to the window ─────────────────
   MENU (Home … Dashboard) · COMMUNITY · Producers, Collections, Library,
   Downloads (a little space above, no heading) · Your Library · the account
   card, whose menu has My Profile and Settings (on /account and the Settings
   view the card is the current item). With the full sidebar it never
   scrolls at 1366×768 and up, nor in the desktop app's window on a 1366×768
   screen (688 px under its title bar): wkx-sidebar.js adds wk-fit-1 …
   wk-fit-8, one step at a time and cumulatively, until the items fit the
   menu's box. */
.sidebar .sidebar-user.active {
  border-color: rgba(124, 77, 255, .46) !important;
  background: linear-gradient(90deg, rgba(124, 77, 255, .26) 0%, rgba(124, 77, 255, .08) 100%) !important;
  box-shadow: inset 2px 0 0 #a78bfa !important;
}
@media (min-width: 901px) {
  /* One menu on every page: the shell's geometry, not the page's. The old
     page styles gave Home a roomier account card and upgrade card, labels
     without margins, and let the items squash to the box on a short window,
     so the menu changed from page to page; now only the window and what the
     menu holds decide how tight it is. */
  body:not(#_) .app-shell > .sidebar .nav-item { flex-shrink: 0 !important; }
  body:not(#_) .app-shell > .sidebar .sidebar-section-label { padding-top: 10px !important; margin: 0 !important; }
  body:not(#_) .app-shell > .sidebar .sidebar-user { padding-top: 10px !important; padding-bottom: 10px !important; }
  body:not(#_) .app-shell > .sidebar #sidebarUpgrade { margin: 8px 10px !important; padding: 13px 12px !important; }
  body:not(#_) .app-shell > .sidebar .nav-item.wk-nav-group-start { margin-top: 8px !important; }
  /* 1: the upgrade card is one line (its button; the account card's menu
     has Upgrade too) and the hidden-lifetime line leaves the menu. */
  body:not(#_) .app-shell > .sidebar.wk-fit-1 #sidebarHiddenPill { display: none !important; }
  body:not(#_) .app-shell > .sidebar.wk-fit-1 #sidebarUpgrade { margin: 4px 10px !important; padding: 5px 34px 5px 6px !important; border-radius: 12px !important; }
  body:not(#_) .app-shell > .sidebar.wk-fit-1 #sidebarUpgrade .upg-badge,
  body:not(#_) .app-shell > .sidebar.wk-fit-1 #sidebarUpgrade .upg-title,
  body:not(#_) .app-shell > .sidebar.wk-fit-1 #sidebarUpgrade .upg-text { display: none !important; }
  body:not(#_) .app-shell > .sidebar.wk-fit-1 #sidebarUpgrade .upg-btn { padding: 6px 8px; white-space: nowrap; }
  /* "Upgrade to Premium" fills the one-line button; its star would wrap it. */
  body:not(#_) .app-shell > .sidebar.wk-fit-1 #sidebarUpgrade .upg-btn svg { display: none; }
  body:not(#_) .app-shell > .sidebar.wk-fit-1 #sidebarUpgrade .upg-dismiss { top: 50%; right: 8px; transform: translateY(-50%); }
  /* 2: shorter items and headings, a lower brand, the slim season card. */
  body:not(#_) .app-shell > .sidebar.wk-fit-2 .sidebar-scroll { gap: 1px !important; }
  body:not(#_) .app-shell > .sidebar.wk-fit-2 .nav-item {
    height: 31px !important; min-height: 31px !important;
    padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important;
  }
  body:not(#_) .app-shell > .sidebar.wk-fit-2 .sidebar-section-label { padding-top: 8px !important; padding-bottom: 4px !important; margin: 0 !important; }
  body:not(#_) .app-shell > .sidebar.wk-fit-2 .sidebar-brand { padding-top: 14px !important; padding-bottom: 10px !important; }
  body:not(#_) .app-shell > .sidebar.wk-fit-2 .sidebar-season { margin: 2px 0 4px; padding: 6px 11px; border-radius: 12px; }
  body:not(#_) .app-shell > .sidebar.wk-fit-2 .sidebar-season .wkr-season-card { gap: 8px; }
  body:not(#_) .app-shell > .sidebar.wk-fit-2 .sidebar-season .wkr-season-art { flex-basis: 22px; width: 22px; height: 22px; }
  body:not(#_) .app-shell > .sidebar.wk-fit-2 .sidebar-season .wkr-season-text { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 7px; }
  body:not(#_) .app-shell > .sidebar.wk-fit-2 .sidebar-season .wkr-season-left { font-size: 12.5px; }
  body:not(#_) .app-shell > .sidebar.wk-fit-2 .sidebar-season .wkr-season-note { display: none; }
  /* 3: compact (a 1366×768 window): 28 px items, a smaller lockup. */
  body:not(#_) .app-shell > .sidebar.wk-fit-3 { padding-top: 10px !important; gap: 6px !important; }
  body:not(#_) .app-shell > .sidebar.wk-fit-3 .nav-item { height: 28px !important; min-height: 28px !important; font-size: 12.5px !important; }
  body:not(#_) .app-shell > .sidebar.wk-fit-3 .nav-item.wk-nav-group-start { margin-top: 5px !important; }
  body:not(#_) .app-shell > .sidebar.wk-fit-3 .sidebar-section-label { padding-top: 6px !important; padding-bottom: 3px !important; }
  body:not(#_) .app-shell > .sidebar.wk-fit-3 .sidebar-brand { padding-top: 6px !important; padding-bottom: 8px !important; }
  body:not(#_) .app-shell > .sidebar.wk-fit-3 .sidebar-lockup { max-width: 150px !important; }
  body:not(#_) .app-shell > .sidebar.wk-fit-3 .sidebar-scroll { padding-top: 4px !important; padding-bottom: 4px !important; }
  body:not(#_) .app-shell > .sidebar.wk-fit-3 .sidebar-user { padding-top: 7px !important; padding-bottom: 7px !important; }
  /* 4: tighter still: 25 px items, the lockup alone (no version tag). */
  body:not(#_) .app-shell > .sidebar.wk-fit-4 .nav-item { height: 25px !important; min-height: 25px !important; }
  body:not(#_) .app-shell > .sidebar.wk-fit-4 .nav-item.wk-nav-group-start { margin-top: 3px !important; }
  body:not(#_) .app-shell > .sidebar.wk-fit-4 .nav-item .nav-icon,
  body:not(#_) .app-shell > .sidebar.wk-fit-4 .nav-item .nav-icon svg { width: 16px !important; height: 16px !important; }
  body:not(#_) .app-shell > .sidebar.wk-fit-4 .sidebar-lockup { max-width: 124px !important; }
  body:not(#_) .app-shell > .sidebar.wk-fit-4 .sidebar-version { display: none !important; }
  body:not(#_) .app-shell > .sidebar.wk-fit-4 .sidebar-season { margin: 0 0 2px; padding: 4px 10px; }
  /* 5: the upgrade line leaves (Upgrade stays in the account card's menu). */
  body:not(#_) .app-shell > .sidebar.wk-fit-5 #sidebarUpgrade { display: none !important; }
  /* 6: 23 px items. */
  body:not(#_) .app-shell > .sidebar.wk-fit-6 .nav-item { height: 23px !important; min-height: 23px !important; }
  /* 7: a short window (the desktop app on a 1366×768 screen): 21 px items,
     tighter headings, brand and account card, a smaller gap above the player. */
  body:not(#_) .app-shell > .sidebar.wk-fit-7 {
    padding-top: 4px !important; gap: 3px !important; padding-bottom: calc(var(--player-height, 84px) + 6px) !important;
  }
  body:not(#_) .app-shell > .sidebar.wk-fit-7 .nav-item { height: 21px !important; min-height: 21px !important; }
  body:not(#_) .app-shell > .sidebar.wk-fit-7 .nav-item.wk-nav-group-start { margin-top: 2px !important; }
  body:not(#_) .app-shell > .sidebar.wk-fit-7 .sidebar-section-label { padding-top: 4px !important; padding-bottom: 2px !important; }
  body:not(#_) .app-shell > .sidebar.wk-fit-7 .sidebar-brand { padding-top: 2px !important; padding-bottom: 4px !important; }
  body:not(#_) .app-shell > .sidebar.wk-fit-7 .sidebar-lockup { max-width: 112px !important; }
  body:not(#_) .app-shell > .sidebar.wk-fit-7 .sidebar-scroll { padding-top: 2px !important; padding-bottom: 2px !important; }
  body:not(#_) .app-shell > .sidebar.wk-fit-7 .sidebar-spacer { min-height: 4px !important; }
  body:not(#_) .app-shell > .sidebar.wk-fit-7 .sidebar-user { padding-top: 4px !important; padding-bottom: 4px !important; }
  /* 8: the last resort: the season card (it is on Home and Challenges too)
     and the badge line give their room to the menu. */
  body:not(#_) .app-shell > .sidebar.wk-fit-8 .sidebar-season,
  body:not(#_) .app-shell > .sidebar.wk-fit-8 .sidebar-user-badge { display: none !important; }
  /* Your Library closed, on one of its pages: that page's row shows and
     takes the spacer's room (wkx-sidebar.js keeps the rest for it on every
     page, so the menu is the same everywhere). */
  body:not(#_) .app-shell > .sidebar .sidebar-group-toggle[aria-expanded="false"] ~ .nav-item[data-nav-group="library"].active ~ .sidebar-spacer { min-height: 0 !important; }
}

/* ── Toasts (lead decision) ─────────────────────────────────────────────
   Every stack (the app's, the community's, trophy unlocks) sits above the
   player bar at the main column's left edge (--wk-main-left, kept by
   wkx-shell.js), so a toast never covers a right-hand rail, the player or
   the ⚙ Backend pill; on a phone, full width above the bar. The three are
   one column, never drawn over each other: trophy notices lowest, the app's
   toasts above them, the community's above those, each stack lifted by the
   heights of the ones under it (--wk-toast-tr-h, --wk-toast-app-h: kept by
   wkx-shell.js, 0 while a stack is empty). The column starts above the
   player, or on Live Chat and Messages above the composer (wkx-community.css
   --wkc-pane-clear). */
body:not(#_) { --wk-toast-base: calc(var(--player-height, 80px) + 16px); }
body.community-active:not(#_):has(.wkc-chat-page, .wkc-dm-page) { --wk-toast-base: calc(var(--wkc-pane-clear) + 96px); }
@media (max-width: 639px) {
  body.community-active:not(#_):has(.wkc-chat-page, .wkc-dm-page) { --wk-toast-base: calc(var(--wkc-pane-clear) + 84px); }
}
body:not(#_) .toast-container,
body:not(#_) .wkc-toasts,
body:not(#_) .wkc-tr-stack { left: calc(var(--wk-main-left, 228px) + 20px) !important; right: auto !important; align-items: flex-start; }
body:not(#_) .wkc-tr-stack { bottom: var(--wk-toast-base) !important; }
body:not(#_) .toast-container { bottom: calc(var(--wk-toast-base) + var(--wk-toast-tr-h, 0px)) !important; }
body:not(#_) .wkc-toasts { bottom: calc(var(--wk-toast-base) + var(--wk-toast-tr-h, 0px) + var(--wk-toast-app-h, 0px)) !important; }
@media (max-width: 600px) {
  body:not(#_) .toast-container,
  body:not(#_) .wkc-toasts,
  body:not(#_) .wkc-tr-stack { left: 12px !important; right: 12px !important; align-items: stretch; }
  body:not(#_) .wkc-tr-stack { max-width: none !important; }
  body:not(#_) .toast-container > .toast,
  body:not(#_) .wkc-toasts > .wkc-toast,
  body:not(#_) .wkc-tr-stack > .wkc-tr-toast { width: auto !important; max-width: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  body:not(#_) .app-shell > .sidebar { transition: none !important; }
  .sidebar .nav-count-live::before { animation: none; }
  .sidebar .sidebar-season, .sidebar .sidebar-season:hover { transition: none; transform: none; }
}

/* While the document is hidden (window minimised, tab in the background) no
   animation runs: a hidden window still composited every vsync for a pulsing
   dot (measured 2026-09-28). wkx-shell.js toggles the class on
   visibilitychange. */
html.wk-doc-hidden *, html.wk-doc-hidden *::before, html.wk-doc-hidden *::after {
  animation-play-state: paused !important;
}