/* =============================================================
   16-light-mode-contrast.css                              v.784
   Sleek, modern, minimalistic light-mode contrast pass.
   Loaded LAST ? only overrides color/UI; never functions.
   White text that sits on coloured (purple/green/red) backgrounds
   is intentionally preserved.

   v784 QUARANTINE NOTE ? DARK MODE IS THE SOURCE OF TRUTH.
   Light Mode + Cream Light are dormant; their toggles are hidden
   in profile settings and any saved 'light'/'cream' preference is
   rewritten to default dark on app load (see 15-profile-settings.js).

   This file historically grew to contain BOTH actual light-mode
   overrides AND general dark/default styling that happened to live
   here. Dark/default styling SHOULD NOT live in this file. New
   shared/dark/default styling belongs in the appropriate base CSS
   (e.g. 04-activity-feed.css for activity-card typography).

   When adding rules to this file:
     ? body.light-mode  ?
     ? body.cream-mode  ?
     ? body.true-dark-mode  ?
     ? unscoped selectors (these leak into default dark mode)

   When you find an unscoped rule in this file that styles dark UI,
   move it to the proper base CSS file and delete it from here.
   See "v784: Consolidated activity-card typography" in
   04-activity-feed.css for the pattern.
   ============================================================= */

/* =============================================================
   v480: FOUNDATION ? html/body background must flip to light.
   Without this, every per-element rule below sits on a dark
   page and the user perceives "nothing changed" when they
   switch to light mode. The base body/html had a hardcoded
   dark gradient with no body.light-mode override.
   ============================================================= */
html:has(body.light-mode),
html:has(body.light-mode) body.light-mode {
  background: #F8F5EF !important;
}
body.light-mode {
  background: #F8F5EF !important;
  background-attachment: scroll !important;
  color: var(--lm-text) !important;
}

/* -- Cream Light ? warm paper identity ------------------------------
   body.cream-mode is added alongside body.light-mode so every existing
   body.light-mode rule applies automatically. This block re-affirms the
   warm palette tokens and provides a hook for cream-specific overrides. */
html:has(body.cream-mode),
html:has(body.cream-mode) body.cream-mode {
  background: #F8F5EF !important;
}
body.cream-mode {
  --lm-bg:        #F8F5EF;
  --lm-surface:   #F3EEE6;
  --lm-surface-2: #EFEAE2;
  --lm-surface-3: #E8E3DB;
  --lm-text:      #171717;
  --lm-text-2:    #3A3A3A;
  --lm-text-3:    #5C5C5C;
  --lm-text-4:    #7A7A7A;
  --lm-line:      rgba(20,20,20,0.10);
  --lm-line-soft: rgba(20,20,20,0.06);
  --lm-chip:      rgba(20,20,20,0.05);
  --lm-chip-h:    rgba(20,20,20,0.08);
  background: #F8F5EF !important;
  background-attachment: scroll !important;
  color: #171717 !important;
}
body.light-mode .header {
  background: var(--lm-surface-3) !important;
  border-bottom: 1px solid var(--lm-line) !important;
}
/* Login privacy overlay ? also dark by default */
body.light-mode .login-privacy-page { background: rgba(248,244,255,0.98) !important; }
body.light-mode .login-privacy-content { background: #F3EEE6 !important; border-color: rgba(20,20,20,0.10) !important; color: #3A3A3A !important; }
body.light-mode .login-privacy-back { color: #6d28d9 !important; }
/* Common dark surfaces used across views */
body.light-mode .header,
body.light-mode .nav,
body.light-mode .topbar,
body.light-mode .app-header,
body.light-mode .container { color: #171717 !important; }
/* Headline / brand wordmark */
body.light-mode .header h1,
body.light-mode .brand-wordmark { color: #171717 !important; }

/* ----- Light-mode palette tokens ? warm paper system ----- */
body.light-mode {
  /* Background / surface */
  --lm-bg:           #F8F5EF;   /* page background ? paper white      */
  --lm-surface:      #F3EEE6;   /* raised modals / popouts            */
  --lm-surface-2:    #EFEAE2;   /* cards / panels                     */
  --lm-surface-3:    #E8E3DB;   /* most elevated / nav surfaces       */

  /* Text ? charcoal scale */
  --lm-text:         #171717;   /* primary ? charcoal black           */
  --lm-text-2:       #3A3A3A;   /* secondary                          */
  --lm-text-3:       #5C5C5C;   /* muted / meta                       */
  --lm-text-4:       #7A7A7A;   /* placeholder / disabled             */
  --lm-text-5:       #AAAAAA;   /* very muted                         */

  /* Borders / dividers ? subtle warm gray */
  --lm-line:         rgba(20,20,20,0.10);
  --lm-line-soft:    rgba(20,20,20,0.06);

  /* Chip / translucent fills */
  --lm-chip:         rgba(20,20,20,0.05);
  --lm-chip-h:       rgba(20,20,20,0.08);
}

/* =============================================================
   1. GLOBAL TEXT FALLBACKS
   ============================================================= */
body.light-mode { color: var(--lm-text); }
body.light-mode .container,
body.light-mode .view,
body.light-mode .page,
body.light-mode .panel,
body.light-mode .sheet,
body.light-mode .feed { color: var(--lm-text); }
body.light-mode .muted,
body.light-mode .text-muted,
body.light-mode .secondary,
body.light-mode .secondary-text,
body.light-mode .meta,
body.light-mode .subtle { color: var(--lm-text-3); }

/* =============================================================
   2. ACTIVITY FEED
   action lines, names, titles, comments, reactions, footer
   ============================================================= */
body.light-mode .activity-card-title-inline { color: var(--lm-text); }
body.light-mode .activity-name,
body.light-mode .activity-name strong { color: var(--lm-text); }
body.light-mode .activity-value,
body.light-mode .activity-value strong { color: var(--lm-text); }
body.light-mode .activity-title,
body.light-mode .activity-title strong { color: var(--lm-text-2); }
body.light-mode .activity-episode-num { color: var(--lm-text-2); }
body.light-mode .activity-action,
body.light-mode .activity-action strong,
body.light-mode .activity-action-text,
body.light-mode .sl-activity-action-text { color: var(--lm-text) !important; }
body.light-mode .activity-time,
body.light-mode .activity-timestamp,
body.light-mode .activity-meta { color: var(--lm-text-3); }
body.light-mode .activity-footer-icon { color: var(--lm-text-3); }
body.light-mode .activity-interactions,
body.light-mode .activity-interactions strong,
body.light-mode .activity-reaction-count { color: var(--lm-text-2); }
body.light-mode .activity-comment-author { color: var(--lm-text); }
body.light-mode .activity-comment-text,
body.light-mode .activity-comment-text strong { color: var(--lm-text-2); }
body.light-mode .activity-comment-preview,
body.light-mode .activity-comment-preview strong { color: var(--lm-text-2); }
body.light-mode .activity-stack-summary,
body.light-mode .activity-stack-count,
body.light-mode .activity-stack-label { color: var(--lm-text-2); }
body.light-mode .activity-rating,
body.light-mode .activity-stars,
body.light-mode .activity-star { color: #f59e0b; }
body.light-mode .activity-feed-empty,
body.light-mode .activity-feed-empty strong { color: var(--lm-text-3); }

/* =============================================================
   3. MY LISTS / LIST DETAIL / EPISODES
   ============================================================= */
body.light-mode .mylist-card,
body.light-mode .game-library-card,
body.light-mode .list-card { color: var(--lm-text); }
body.light-mode .mylist-card .card-title,
body.light-mode .game-library-card .card-title,
body.light-mode .list-title,
body.light-mode .list-name { color: var(--lm-text); }
body.light-mode .list-meta,
body.light-mode .list-subtitle,
body.light-mode .list-count,
body.light-mode .episode-count,
body.light-mode .ep-count,
body.light-mode .season-count { color: var(--lm-text-3); }
body.light-mode .ep-title,
body.light-mode .ep-name,
body.light-mode .episode-title,
body.light-mode .episode-name { color: var(--lm-text); }
body.light-mode .ep-overview,
body.light-mode .episode-overview,
body.light-mode .episode-description { color: var(--lm-text-2); }
body.light-mode .ep-air-date,
body.light-mode .ep-runtime,
body.light-mode .episode-meta { color: var(--lm-text-3); }

/* =============================================================
   4. PROFILE PAGE
   ============================================================= */
body.light-mode .profile-display-name,
body.light-mode .profile-username,
body.light-mode .profile-name,
body.light-mode .profile-handle { color: var(--lm-text); }
body.light-mode .profile-bio,
body.light-mode .profile-tagline { color: var(--lm-text-2); }
body.light-mode .profile-stat,
body.light-mode .profile-stat strong,
body.light-mode .profile-stat-value { color: var(--lm-text); }
body.light-mode .profile-stat-label { color: var(--lm-text-3); }
body.light-mode .profile-tab-name,
body.light-mode .profile-section-title { color: var(--lm-text); }
body.light-mode .profile-meta,
body.light-mode .profile-since,
body.light-mode .profile-friend-count { color: var(--lm-text-3); }

/* =============================================================
   5. FRIENDS / DISCOVERY
   ============================================================= */
body.light-mode .friend-card,
body.light-mode .friend-row,
body.light-mode .friend-list-item { color: var(--lm-text); }
body.light-mode .friend-name,
body.light-mode .friend-display-name { color: var(--lm-text); }
body.light-mode .friend-username,
body.light-mode .friend-handle,
body.light-mode .friend-meta,
body.light-mode .friend-since { color: var(--lm-text-3); }
body.light-mode .friend-empty-text,
body.light-mode .friend-empty strong { color: var(--lm-text-3); }
body.light-mode .friends-page .activity-name { color: var(--lm-text); }

/* =============================================================
   6. DIRECT MESSAGES
   ============================================================= */
body.light-mode .dm-header-card,
body.light-mode .dm-header-card strong { color: var(--lm-text); }
body.light-mode .dm-header-stats em,
body.light-mode .dm-header-stats strong { color: var(--lm-text); }
body.light-mode .dm-empty-card,
body.light-mode .dm-empty-card strong { color: var(--lm-text); }
body.light-mode .dm-empty-card span,
body.light-mode .dm-empty-card p { color: var(--lm-text-3); }
body.light-mode .dm-thread-head,
body.light-mode .dm-thread-head strong { color: var(--lm-text); }
body.light-mode .dm-thread-head span,
body.light-mode .dm-thread-time { color: var(--lm-text-3); }
body.light-mode .dm-chat-row,
body.light-mode .dm-chat-row strong { color: var(--lm-text); }
body.light-mode .dm-chat-row span,
body.light-mode .dm-chat-preview,
body.light-mode .dm-chat-time { color: var(--lm-text-3); }
body.light-mode .dm-user-result,
body.light-mode .dm-user-result strong { color: var(--lm-text); }
body.light-mode .dm-user-result span { color: var(--lm-text-3); }
body.light-mode .dm-lite-head strong { color: var(--lm-text); }
body.light-mode .dm-request-card,
body.light-mode .dm-request-card strong { color: var(--lm-text) !important; }
body.light-mode .direct-messages-title-wrap strong { color: var(--lm-text); }
body.light-mode .direct-messages-title-wrap span { color: var(--lm-text-3); }
body.light-mode .direct-messages-title-wrap .creator-name-wrap { color: var(--lm-text); }
body.light-mode .dm-typing-indicator { color: var(--lm-text-3); }
body.light-mode .dm-compose-label,
body.light-mode .dm-compose-row label { color: var(--lm-text-2); }
body.light-mode .dm-thread-message:not(.mine):not([class*="sent"]) { color: var(--lm-text); }
body.light-mode .dm-search-strip input { color: var(--lm-text); }
body.light-mode .dm-search-strip input::placeholder { color: var(--lm-text-3); }
body.light-mode .dm-bubble-row.mine .dm-bubble { color: #ffffff; } /* purple bg ? keep white */
body.light-mode .dm-bubble-row:not(.mine) .dm-bubble { color: var(--lm-text); }
body.light-mode .dm-bubble-time,
body.light-mode .dm-bubble-row:not(.mine) .dm-bubble-time { color: var(--lm-text-3); }

/* =============================================================
   7. COMMENTS
   ============================================================= */
body.light-mode .comment-list-item,
body.light-mode .comment-list-item strong { color: var(--lm-text); }
body.light-mode .comment-input-name { color: var(--lm-text); }
body.light-mode .comments-page-back { color: var(--lm-text); }
body.light-mode .comment-reply-btn,
body.light-mode .comment-edit-btn,
body.light-mode .comment-delete-btn { color: var(--lm-text-3); }
body.light-mode .comment-time,
body.light-mode .comment-meta { color: var(--lm-text-3); }
body.light-mode .comment-body,
body.light-mode .comment-text { color: var(--lm-text); }

/* =============================================================
   8. DISCOVER / SEARCH / RANKINGS / IMPORTS
   ============================================================= */
body.light-mode .discover-card-title { color: var(--lm-text); }
body.light-mode .discover-card-text,
body.light-mode .discover-card-meta,
body.light-mode .discover-card-subtitle { color: var(--lm-text-2); }
body.light-mode .search-result-name,
body.light-mode .search-result-title { color: var(--lm-text); }
body.light-mode .search-result-meta,
body.light-mode .search-result-subtitle,
body.light-mode .search-result-year { color: var(--lm-text-3); }
body.light-mode .ranking-item-title { color: var(--lm-text); }
body.light-mode .ranking-item-meta,
body.light-mode .ranking-item-subtitle { color: var(--lm-text-3); }
body.light-mode .import-source-name { color: var(--lm-text); }
body.light-mode .import-status,
body.light-mode .import-progress,
body.light-mode .import-meta { color: var(--lm-text-2); }
body.light-mode .universal-search-input,
body.light-mode .search-input { color: var(--lm-text); }
body.light-mode .universal-search-input::placeholder,
body.light-mode .search-input::placeholder { color: var(--lm-text-3); }

/* =============================================================
   9. WATCH TOGETHER
   ============================================================= */
body.light-mode .watch-party-title,
body.light-mode .watch-party-user-name,
body.light-mode .watch-party-episode,
body.light-mode .watch-session-header,
body.light-mode .watch-invite-code,
body.light-mode .watch-viewer,
body.light-mode .watch-viewer strong,
body.light-mode .watch-controls strong { color: var(--lm-text); }
body.light-mode .watch-timer,
body.light-mode .watch-timestamp,
body.light-mode .watch-progress { color: var(--lm-text-2); }
body.light-mode .watch-sync-status,
body.light-mode .watch-party-meta,
body.light-mode .watch-party-meta strong { color: var(--lm-text-3); }
body.light-mode .watch-party-meta strong { color: var(--lm-text); }

/* =============================================================
   10. PATCH NOTES + MEDIA SHARE MODAL
   ============================================================= */
body.light-mode .patch-version,
body.light-mode .patch-title,
body.light-mode .patch-item-header { color: var(--lm-text) !important; }
body.light-mode .patch-item-text,
body.light-mode .patch-item-body { color: var(--lm-text-2) !important; }
body.light-mode .patch-date { color: var(--lm-text-3) !important; }

body.light-mode .media-share-head,
body.light-mode .media-share-head strong { color: var(--lm-text); }
body.light-mode .media-share-close { color: var(--lm-text-2); }
body.light-mode .media-share-choice,
body.light-mode .media-share-search,
body.light-mode .media-share-note,
body.light-mode .media-share-user { color: var(--lm-text); }
body.light-mode .media-share-search::placeholder,
body.light-mode .media-share-note::placeholder { color: var(--lm-text-3); }
body.light-mode .dm-shared-media-card,
body.light-mode .dm-shared-media-card strong { color: var(--lm-text); }
body.light-mode .dm-shared-media-card span { color: var(--lm-text-3); }

/* =============================================================
   11. ICON BUTTONS / CONTROLS / CHIPS / BADGES
   keep text dark when the chip background is transparent or
   light; preserve white when chip is filled with a colour
   ============================================================= */
body.light-mode .icon-button:not([style*="background"]):not(.active) { color: var(--lm-text-2) !important; }
body.light-mode .pill-toggle,
body.light-mode .segmented-control { color: var(--lm-text-2); }
body.light-mode .control-label,
body.light-mode .toggle-label,
body.light-mode .field-label { color: var(--lm-text-2); }
body.light-mode .badge-count { color: #ffffff; } /* sits on red/purple bg */
body.light-mode .pill-toggle.active,
body.light-mode .segmented-control-active { color: #ffffff !important; } /* gradient bg */

/* =============================================================
   12. MODAL / SHEET / DROPDOWN / TOAST GENERICS
   ============================================================= */
body.light-mode .modal,
body.light-mode .modal-card,
body.light-mode .sheet-card,
body.light-mode .dropdown-menu,
body.light-mode .popover { color: var(--lm-text); }
body.light-mode .modal-title,
body.light-mode .sheet-title,
body.light-mode .dialog-title { color: var(--lm-text); }
body.light-mode .modal-subtitle,
body.light-mode .modal-description,
body.light-mode .sheet-subtitle { color: var(--lm-text-2); }
body.light-mode .modal-close,
body.light-mode .sheet-close,
body.light-mode .dialog-close { color: var(--lm-text-2); }
body.light-mode .toast,
body.light-mode .snackbar { color: var(--lm-text); }

/* =============================================================
   13. FAINT-WHITE LEAKS (rgba(255,255,255,.6/.7/.8))
   These read as low-contrast on the lavender body in light mode.
   Re-map to muted purple tones.
   ============================================================= */
body.light-mode [class*="muted"],
body.light-mode [class*="-meta"]:not([class*="-metadata"]),
body.light-mode [class*="-time"]:not([class*="-timer"]),
body.light-mode [class*="-subtitle"],
body.light-mode [class*="-hint"],
body.light-mode [class*="-caption"],
body.light-mode [class*="-helper"] { color: var(--lm-text-3); }

/* =============================================================
   14. GUARDS ? re-assert white on coloured pill/button surfaces
   that the broad rules above might have darkened by accident
   ============================================================= */
body.light-mode .friend-accept-btn,
body.light-mode .dm-action.accept,
body.light-mode .dm-compose-row button.dm-send-btn,
body.light-mode .comment-post-btn,
body.light-mode .requests-badge,
body.light-mode .dm-subtabs button.active,
body.light-mode .activity-action-bubble,
body.light-mode .button-primary,
body.light-mode .btn-primary,
body.light-mode .primary-cta { color: #ffffff; }

/* =============================================================
   v479: EXTENDED LIGHT-MODE CONTRAST PASS
   ----------------------------------------------------------------
   Scope: every page in the app. Goal: every piece of body text
   reads cleanly on a light surface; white text is preserved ONLY
   on saturated coloured backgrounds (purple/green/red/amber/blue
   gradients, solid pills, ringed badges, etc.).
   Rules live LAST so they override anything earlier in the cascade.
   No JS, no functions changed ? colour and visual refinement only.
   ============================================================= */

/* ---------- 14a. ACTIVITY FEED (Friends ? Activity tab) ----------
   The big media title is hardcoded #fff in 04-activity-feed.css
   ("/* Title inline - bigger and white */"). It sits on a lavender
   card surface in light mode and currently reads invisible.
   Rebuild the activity-card and shelfd-social-card text for light. */
body.light-mode .activity-card,
body.light-mode .shelfd-social-card {
  background: #EFEAE2 !important;
  border-color: rgba(20,20,20,0.10) !important;
  box-shadow: 0 12px 28px rgba(20,20,20,0.05) !important;
}
body.light-mode .activity-card-title-inline,
body.light-mode .activity-card-name,
body.light-mode .sl-activity-name,
body.light-mode .sl-activity-name .creator-name-wrap,
body.light-mode .sl-activity-name .creator-name { color: #171717 !important; }
body.light-mode .activity-card-verb,
body.light-mode .sl-activity-status { color: #3A3A3A !important; }
body.light-mode .activity-card-title { color: #5C5C5C !important; }
body.light-mode .activity-card-time,
body.light-mode .sl-activity-time,
body.light-mode .sl-activity-dot,
body.light-mode .activity-card-section,
body.light-mode .activity-card-sep { color: #7A7A7A !important; }
body.light-mode .activity-action-text { color: #3A3A3A !important; }
body.light-mode .activity-comment-preview { color: #3A3A3A !important; border-left-color: rgba(124,58,237,0.22) !important; }
body.light-mode .sl-activity-comment { color: #3A3A3A !important; }
body.light-mode .sl-activity-show-more { color: #b97f08 !important; }
body.light-mode .activity-event-label.el-rated      { color: #b97f08 !important; }
body.light-mode .activity-event-label.el-added,
body.light-mode .activity-event-label.el-planned    { color: #6d28d9 !important; }
body.light-mode .activity-event-label.el-completed  { color: #0e7490 !important; }
body.light-mode .activity-event-label.el-started    { color: #15803d !important; }
body.light-mode .activity-event-label.el-paused     { color: #c2410c !important; }
body.light-mode .activity-event-label.el-dropped    { color: #b91c1c !important; }
body.light-mode .activity-event-label.el-commented  { color: #4338ca !important; }
body.light-mode .sl-activity-action-btn { color: #3A3A3A !important; }
body.light-mode .sl-activity-action-btn[data-activity-action="like"] { color: #3A3A3A !important; }
body.light-mode .sl-activity-action-btn.liked { color: #3A3A3A !important; }
body.light-mode .sl-activity-action-btn.liked [data-like-icon-slot] { color: #ef4444 !important; }
body.light-mode .sl-activity-action-btn.liked [data-activity-like-count] { color: #b91c1c !important; }
body.light-mode .sl-activity-stack-action-count { color: #7c3aed !important; border-color: rgba(124,58,237,0.34) !important; }
body.light-mode .activity-card-avatar-placeholder { background: #f0eafd !important; color: #6d28d9 !important; }
body.light-mode .sl-activity-avatar-fallback { background: #f0eafd !important; color: #6d28d9 !important; box-shadow: inset 0 0 0 1px rgba(124,58,237,0.18) !important; }
/* Discover card context line ("/* Title inline - bigger and white */"
   companion in 04-activity-feed.css line 1498) */
body.light-mode .discover-card-context { color: #3A3A3A !important; }
body.light-mode .discover-card-title { color: #171717 !important; }
body.light-mode .discover-card-meta,
body.light-mode .discover-card-rating { color: #3A3A3A !important; }
body.light-mode .discover-rank { color: #050410 !important; }

/* ---------- 14b. IMPORT ACTIVITY CARD ---------- */
body.light-mode .import-activity-card {
  background: linear-gradient(145deg, #ffffff 0%, #f5eeff 100%) !important;
  border-color: rgba(20,20,20,0.10) !important;
  box-shadow: 0 14px 30px rgba(20,20,20,0.07) !important;
}
body.light-mode .import-activity-title { color: #171717 !important; }
body.light-mode .import-activity-status { color: #5C5C5C !important; }
body.light-mode .import-activity-right-cluster {
  background: rgba(124,58,237,0.06) !important;
  border-color: rgba(20,20,20,0.12) !important;
  color: #3A3A3A !important;
}
body.light-mode .import-activity-count-label { color: #3A3A3A !important; }
body.light-mode .import-activity-preview-tile-mini { background: #efe9ff !important; color: #6d28d9 !important; }
body.light-mode .import-activity-grid-cell .import-activity-grid-name { color: #3A3A3A !important; }

/* ---------- 14c. STACKED ACTIVITY (back layers + summary) ---------- */
body.light-mode .sl-activity-stack-layer {
  background:
    radial-gradient(circle at 13% 18%, rgba(167,139,250,0.18), transparent 38%),
    linear-gradient(145deg, #f5eeff, #ede4ff) !important;
  border-color: rgba(124,58,237,0.30) !important;
  box-shadow: 0 14px 28px rgba(20,20,20,0.07) !important;
}

/* ---------- 14d. MY LISTS ? title cards ---------- */
body.light-mode .card.show-card,
body.light-mode .card.game-library-card,
body.light-mode #mylist-view .card {
  background: linear-gradient(160deg, #ffffff 0%, #f7f3ff 100%) !important;
  border-color: rgba(124,58,237,0.14) !important;
  box-shadow: 0 12px 22px rgba(20,20,20,0.05) !important;
}
body.light-mode .card-title,
body.light-mode .card-title-profile-btn { color: #171717 !important; }
body.light-mode .card-genre,
body.light-mode .card-genre-text { color: #5C5C5C !important; }
body.light-mode .card-year,
body.light-mode .card-watch-availability,
body.light-mode .progress-meta,
body.light-mode .progress-meta span { color: #5C5C5C !important; }
body.light-mode #mylist-view .star-label,
body.light-mode #mylist-view .rating-label { color: #3A3A3A !important; }
body.light-mode .ep-toggle-bar,
body.light-mode .comments-btn,
body.light-mode .card-footer-btn { color: #3A3A3A !important; }
body.light-mode .ep-toggle-bar { background: rgba(124,58,237,0.06) !important; border-color: rgba(20,20,20,0.10) !important; }
body.light-mode .ep-toggle-bar:hover { background: rgba(124,58,237,0.10) !important; }
body.light-mode .ep-toggle-bar .ep-arrow,
body.light-mode .ep-toggle-bar #ep-label-,
body.light-mode .ep-toggle-bar span { color: #3A3A3A !important; }
body.light-mode .delete-btn { color: #3A3A3A !important; }
body.light-mode .delete-btn:hover { color: #b91c1c !important; }
/* Episode rows (light) */
body.light-mode .ep-list { background: #F3EEE6 !important; }
body.light-mode .ep-row { color: #3A3A3A !important; }
body.light-mode .ep-row .ep-name { color: #3A3A3A !important; }
body.light-mode .ep-check { color: #3A3A3A !important; border-color: rgba(124,58,237,0.30) !important; }
body.light-mode .ep-check.checked { color: #ffffff !important; background: #7c3aed !important; border-color: #7c3aed !important; }
body.light-mode .ep-rating-btn { color: #3A3A3A !important; }
body.light-mode .ep-rating-btn.has-rating { color: #b97f08 !important; }
body.light-mode .season-block { background: rgba(124,58,237,0.05) !important; border-color: rgba(20,20,20,0.10) !important; }
body.light-mode .season-title { color: #171717 !important; }
body.light-mode .season-progress,
body.light-mode .season-year,
body.light-mode .season-card-kicker { color: #5C5C5C !important; }
body.light-mode .season-rating-chip { color: #b97f08 !important; }
body.light-mode .edit-ep-link,
body.light-mode .season-mark-btn { color: #6d28d9 !important; }
body.light-mode .progress-bar { background: rgba(124,58,237,0.16) !important; }
body.light-mode .progress-fill { background: linear-gradient(90deg, #7c3aed, #f59e0b) !important; }
/* Status pill selector inside My Lists card */
body.light-mode .game-status-current-pill { background: rgba(124,58,237,0.08) !important; border-color: rgba(20,20,20,0.12) !important; color: #3A3A3A !important; }
body.light-mode .status-pill { color: #3A3A3A !important; }
body.light-mode .status-pill.watched-active,
body.light-mode .status-pill.watching-active,
body.light-mode .status-pill.planned-active,
body.light-mode .status-pill.paused-active,
body.light-mode .status-pill.dropped-active,
body.light-mode .status-pill.competitive-active,
body.light-mode .status-pill.live-active,
body.light-mode .status-pill.wishlist-active { color: #ffffff !important; }
/* Game card tracker icon, hours stat, etc. */
body.light-mode .game-card-stats-inline { color: #3A3A3A !important; }
body.light-mode .game-card-cover-btn { color: #3A3A3A !important; background: rgba(124,58,237,0.06) !important; border-color: rgba(20,20,20,0.12) !important; }
body.light-mode .friend-card-add-btn { color: #0e7490 !important; }

/* ---------- 14e. MY LISTS ? top toolbar / search / sort / pager ---------- */
body.light-mode #mylist-view .my-list-search-input { background: #F3EEE6 !important; border-color: rgba(20,20,20,0.12) !important; color: #171717 !important; }
body.light-mode #mylist-view .my-list-search-input::placeholder { color: #7A7A7A !important; }
body.light-mode .mylist-toolbar,
body.light-mode .mylist-tabs,
body.light-mode .mylist-pager { color: #3A3A3A !important; }
body.light-mode .mylist-tab,
body.light-mode .mylist-pager-btn,
body.light-mode .mylist-sort-btn { color: #3A3A3A !important; background: rgba(124,58,237,0.05) !important; border-color: rgba(20,20,20,0.10) !important; }
body.light-mode .mylist-tab.active,
body.light-mode .mylist-pager-btn.active { color: #ffffff !important; background: linear-gradient(135deg, #7c3aed, #9333ea) !important; }
body.light-mode .mylist-sort-menu { background: #F3EEE6 !important; border-color: rgba(20,20,20,0.12) !important; color: #3A3A3A !important; box-shadow: 0 18px 36px rgba(20,20,20,0.10) !important; }
body.light-mode .mylist-sort-menu button { color: #3A3A3A !important; }
body.light-mode .mylist-sort-menu button:hover,
body.light-mode .mylist-sort-menu button.active { background: rgba(124,58,237,0.08) !important; color: #3A3A3A !important; }

/* ---------- 14f. PROFILE PAGE ---------- */
body.light-mode .profile-topbar,
body.light-mode .profile-hero-card,
body.light-mode .profile-media-group,
body.light-mode .profile-fav-poster-card { color: #171717 !important; }
body.light-mode .profile-topbar-title,
body.light-mode .profile-name-input,
body.light-mode .profile-display-name,
body.light-mode .profile-bio,
body.light-mode .profile-bio-input,
body.light-mode .profile-creator-badge,
body.light-mode .profile-section-title,
body.light-mode .profile-media-title,
body.light-mode .profile-fav-row-title,
body.light-mode .profile-fav-name,
body.light-mode .profile-stat-value,
body.light-mode .profile-group-stat-value,
body.light-mode .profile-summary-card-value { color: #171717 !important; }
body.light-mode .profile-topbar-sub,
body.light-mode .profile-bio,
body.light-mode .profile-media-sub,
body.light-mode .profile-stat-label,
body.light-mode .profile-group-stat-label,
body.light-mode .profile-summary-card-label,
body.light-mode .profile-fav-empty,
body.light-mode .profile-eyebrow { color: #5C5C5C !important; }
body.light-mode .profile-fav-rating-star,
body.light-mode .profile-rating-star,
body.light-mode .profile-stat-value-star,
body.light-mode .profile-fav-empty-rating,
body.light-mode .profile-fav-empty-rating span { color: #b97f08 !important; }
body.light-mode .profile-fav-poster {
  background: linear-gradient(135deg, #ede9fe, #fff) !important;
  border-color: #d8cfee !important;
  color: #7c3aed !important;
  box-shadow: 0 8px 16px rgba(20,20,20,0.07) !important;
}
body.light-mode .profile-fav-rank { color: #6d28d9 !important; }
body.light-mode .profile-empty-rank { color: #b3a8d8 !important; }
body.light-mode .profile-back-btn,
body.light-mode .profile-settings-btn,
body.light-mode .profile-share-btn { color: #3A3A3A !important; background: rgba(124,58,237,0.06) !important; border-color: rgba(20,20,20,0.12) !important; }
body.light-mode .profile-save-btn { color: #ffffff !important; } /* gradient */
body.light-mode .profile-mini-btn { color: #3A3A3A !important; background: rgba(124,58,237,0.08) !important; border-color: rgba(20,20,20,0.12) !important; }
body.light-mode .profile-card-logout-btn { color: #b91c1c !important; background: rgba(239,68,68,0.06) !important; border-color: rgba(239,68,68,0.22) !important; }
body.light-mode .profile-card-lists-btn { color: #3A3A3A !important; background: rgba(124,58,237,0.08) !important; border-color: rgba(20,20,20,0.12) !important; }
body.light-mode .profile-row-toggle,
body.light-mode .profile-row-toggle * { color: #3A3A3A !important; }
body.light-mode .profile-hidden-note { color: #7A7A7A !important; }
body.light-mode .profile-social-counts strong,
body.light-mode .profile-social-count strong { color: #171717 !important; }
body.light-mode .profile-social-counts span,
body.light-mode .profile-social-count span { color: #5C5C5C !important; }
body.light-mode .profile-social-avatar { box-shadow: 0 0 0 2px rgba(124,58,237,0.18) !important; }

/* Top 3 character editor modal ? added in v475/v476 */
body.light-mode .profile-character-editor-overlay { background: rgba(20,20,20,0.12) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; }
body.light-mode .profile-character-editor-modal {
  background: linear-gradient(180deg, #ffffff 0%, #faf6ff 100%) !important;
  border-color: rgba(20,20,20,0.10) !important;
  box-shadow: 0 30px 70px rgba(20,20,20,0.12) !important;
}
body.light-mode .profile-character-editor-kicker { color: #6d28d9 !important; }
body.light-mode .profile-character-editor-title { color: #171717 !important; }
body.light-mode .profile-character-editor-close { color: #3A3A3A !important; background: rgba(124,58,237,0.06) !important; border-color: rgba(20,20,20,0.10) !important; }
body.light-mode .profile-character-section-title { color: #171717 !important; }
body.light-mode .profile-character-section-sub { color: #5C5C5C !important; }
body.light-mode .profile-character-section { background: #F3EEE6 !important; border-color: rgba(20,20,20,0.10) !important; }
body.light-mode .profile-character-preview-row { background: #F3EEE6 !important; border-color: rgba(20,20,20,0.10) !important; }
body.light-mode .profile-character-field-input {
  background: #F3EEE6 !important;
  border-color: rgba(20,20,20,0.12) !important;
  color: #171717 !important;
}
body.light-mode .profile-character-field-input:focus { border-color: #7c3aed !important; }
body.light-mode .profile-character-field-input::placeholder { color: #7A7A7A !important; }
body.light-mode .profile-character-field-label { color: #6d28d9 !important; }
body.light-mode .profile-character-search-empty { background: #F3EEE6 !important; color: #5C5C5C !important; border-color: rgba(20,20,20,0.10) !important; }
body.light-mode .profile-character-upload-btn { background: rgba(124,58,237,0.08) !important; color: #171717 !important; border-color: rgba(20,20,20,0.12) !important; }
body.light-mode .profile-character-search-tile { background: #E8E3DB !important; border-color: rgba(20,20,20,0.10) !important; }
body.light-mode .profile-character-editor-clear { background: rgba(124,58,237,0.06) !important; color: #3A3A3A !important; border-color: rgba(20,20,20,0.10) !important; }
body.light-mode .profile-character-editor-actions { background: rgba(255,255,255,0.6) !important; border-top-color: rgba(124,58,237,0.10) !important; }

/* ---------- 14g. FRIENDS / DISCOVERY pages ---------- */
body.light-mode .friend-card,
body.light-mode .friend-list-card,
body.light-mode .user-card {
  background: #EFEAE2 !important;
  border-color: rgba(20,20,20,0.10) !important;
  box-shadow: 0 8px 18px rgba(31,16,72,0.06) !important;
}
body.light-mode .user-card-name,
body.light-mode .friend-card-copy { color: #171717 !important; }
body.light-mode .user-card-stats,
body.light-mode .user-card-meta,
body.light-mode .friend-card-sub { color: #5C5C5C !important; }
body.light-mode .friend-action-btn { color: #3A3A3A !important; background: rgba(124,58,237,0.06) !important; border-color: rgba(20,20,20,0.12) !important; }
body.light-mode .friend-action-btn:hover { background: rgba(124,58,237,0.12) !important; }
body.light-mode .friend-screenlist-btn,
body.light-mode .friend-message-btn { color: #3A3A3A !important; }
body.light-mode .friend-remove-btn,
body.light-mode .friend-mobile-remove-x { color: #b91c1c !important; }
body.light-mode .friends-empty,
body.light-mode .friends-empty-sub,
body.light-mode .friends-empty p { color: #5C5C5C !important; }
body.light-mode .friends-empty-icon { opacity: 0.7; }
body.light-mode .request-subtab { color: #3A3A3A !important; background: rgba(124,58,237,0.05) !important; border-color: rgba(20,20,20,0.10) !important; }
body.light-mode .request-subtab.active { color: #ffffff !important; background: linear-gradient(135deg, #7c3aed, #9333ea) !important; border-color: transparent !important; }
body.light-mode .request-subtab-count { color: #ffffff !important; }
body.light-mode #incoming-section h3,
body.light-mode #outgoing-section h3 { color: #5C5C5C !important; }
body.light-mode .find-search { background: #F3EEE6 !important; border-color: rgba(20,20,20,0.12) !important; color: #171717 !important; }
body.light-mode .find-search::placeholder { color: #7A7A7A !important; }

/* ---------- 14h. DIRECT MESSAGES (extra polish) ---------- */
body.light-mode .dm-shell { color: #171717 !important; }
body.light-mode .dm-thread,
body.light-mode .dm-thread-row,
body.light-mode .dm-list-item {
  background: #EFEAE2 !important;
  border-color: rgba(124,58,237,0.14) !important;
}
body.light-mode .dm-bubble:not(.mine):not(.dm-bubble--mine) {
  background: #f4eeff !important;
  border-color: rgba(20,20,20,0.10) !important;
  color: #171717 !important;
}
body.light-mode .dm-compose-row { background: #F3EEE6 !important; border-top-color: rgba(124,58,237,0.16) !important; }
body.light-mode .dm-compose-input,
body.light-mode .dm-message-input,
body.light-mode .dm-textarea {
  background: #F3EEE6 !important;
  border-color: rgba(20,20,20,0.12) !important;
  color: #171717 !important;
}
body.light-mode .dm-compose-input::placeholder,
body.light-mode .dm-textarea::placeholder { color: #7A7A7A !important; }

/* ---------- 14i. WATCH TOGETHER cards ---------- */
body.light-mode .friend-watch-request-card {
  background: #EFEAE2 !important;
  border-color: rgba(20,20,20,0.10) !important;
  color: #171717 !important;
}
body.light-mode .friend-watch-request-card h4 { color: #171717 !important; }
body.light-mode .friend-watch-request-card p,
body.light-mode .friend-watch-request-meta-row strong { color: #3A3A3A !important; }
body.light-mode .friend-watch-request-kicker span,
body.light-mode .friend-watch-request-kicker em,
body.light-mode .friend-watch-request-approved span,
body.light-mode .friend-watch-request-sent-to span { color: #6d28d9 !important; }
body.light-mode .friend-watch-action.accept { color: #ffffff !important; }
body.light-mode .friend-watch-action.decline { color: #b91c1c !important; background: rgba(239,68,68,0.06) !important; border-color: rgba(239,68,68,0.20) !important; }
body.light-mode .friend-watch-request-person-pill { background: rgba(124,58,237,0.06) !important; border-color: rgba(20,20,20,0.12) !important; color: #3A3A3A !important; }
body.light-mode .friend-watch-request-person-pill em { color: #b91c1c !important; }

/* ---------- 14j. PATCH NOTES (Profile ? version) ---------- */
body.light-mode .patch-notes-modal,
body.light-mode .patch-notes-card { background: #F3EEE6 !important; border-color: rgba(20,20,20,0.10) !important; }
body.light-mode .patch-notes-version,
body.light-mode .patch-version-pill { color: #6d28d9 !important; background: rgba(124,58,237,0.08) !important; border-color: rgba(20,20,20,0.12) !important; }
body.light-mode .patch-notes-list li { color: #3A3A3A !important; }
body.light-mode .patch-notes-list li::marker { color: #6d28d9 !important; }

/* ---------- 14k. UNIVERSAL SEARCH / DISCOVER ----------------- */
body.light-mode .universal-search-shell { background: #F3EEE6 !important; border-color: rgba(20,20,20,0.12) !important; }
body.light-mode .universal-search-input { color: #171717 !important; }
body.light-mode .universal-search-input::placeholder { color: #7A7A7A !important; }
body.light-mode .discover-hub-toggle { background: rgba(124,58,237,0.05) !important; border-color: rgba(20,20,20,0.10) !important; }
body.light-mode .discover-hub-btn { color: #3A3A3A !important; }
body.light-mode .discover-hub-btn.active { color: #ffffff !important; background: linear-gradient(135deg, #7c3aed, #9333ea) !important; }
body.light-mode .discover-section-title,
body.light-mode .discover-section-title-button { color: #171717 !important; }
body.light-mode .discover-title { color: #171717 !important; }
body.light-mode .discover-subtitle { color: #5C5C5C !important; }
body.light-mode .discover-card { background: linear-gradient(145deg, #ffffff, #faf6ff) !important; border-color: rgba(124,58,237,0.14) !important; }
body.light-mode .discover-card-name { color: #171717 !important; }

/* ---------- 14l. SETTINGS PANEL (My Lists) ---------- */
body.light-mode .mylist-settings-panel {
  background: rgba(243,238,230,0.50) !important;
  border-color: rgba(20,20,20,0.12) !important;
  color: #171717 !important;
  backdrop-filter: blur(50px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(50px) saturate(145%) !important;
}
body.light-mode .mylist-settings-panel button { color: #3A3A3A !important; }

/* ---------- 14m. STATUS PILLS, CATEGORY PILLS, NAV PILLS ----------
   Section nav (Movies/TV/Anime/Games/Books/Manga) is the central
   navigation; on light mode the inactive pills should read clearly
   while the active gradient pill keeps white text. */
body.light-mode .nav-tab,
body.light-mode .section-nav-pill,
body.light-mode .mobile-nav-tab { color: #3A3A3A !important; }
body.light-mode .nav-tab.active,
body.light-mode .section-nav-pill.active,
body.light-mode .mobile-nav-tab.active,
body.light-mode .nav-pill.active { color: #ffffff !important; }

/* ---------- 14n. INPUTS / FORMS GLOBAL ---------- */
body.light-mode input[type="text"],
body.light-mode input[type="search"],
body.light-mode input[type="url"],
body.light-mode input[type="email"],
body.light-mode input[type="number"],
body.light-mode input[type="password"],
body.light-mode textarea,
body.light-mode select {
  color: #171717 !important;
  caret-color: #7c3aed !important;
}
body.light-mode input::placeholder,
body.light-mode textarea::placeholder { color: #7A7A7A !important; }

/* ---------- 14o. TOAST + TOP RIGHT CHIPS ---------- */
body.light-mode .toast,
body.light-mode .shelfd-toast { background: #F3EEE6 !important; border-color: rgba(20,20,20,0.10) !important; color: #171717 !important; box-shadow: 0 16px 30px rgba(31,16,72,0.14) !important; }

/* ---------- 14p. FRIEND ACTIVITY POST FEED COMPOSER ---------- */
body.light-mode .feed-composer { background: #F3EEE6 !important; border-color: rgba(20,20,20,0.10) !important; }
body.light-mode .feed-composer textarea,
body.light-mode .feed-composer input[type="text"] { color: #171717 !important; }
body.light-mode .feed-composer textarea::placeholder { color: #7A7A7A !important; }

/* ---------- 14q. FRIEND HEART/REPLY/BUTTON FALLBACK ---------- */
body.light-mode .activity-interaction-btn { color: #3A3A3A !important; }
body.light-mode .activity-interaction-btn.liked { color: #ef4444 !important; }
body.light-mode .activity-interaction-btn.liked [data-activity-like-count] { color: #b91c1c !important; }
body.light-mode .activity-interaction-btn:not(.liked) [data-activity-like-count],
body.light-mode .activity-interaction-btn [data-activity-reply-count] { color: #3A3A3A !important; }

/* ---------- 14r. FINAL SAFETY NET ? translucent-white backgrounds
   inherit a faint surface; force their child text to dark unless
   the immediate background is a saturated colour. ---------- */
body.light-mode .activity-card *,
body.light-mode .shelfd-social-card *,
body.light-mode .import-activity-card *,
body.light-mode .friend-watch-request-card *,
body.light-mode .friend-card *,
body.light-mode .user-card *,
body.light-mode .profile-character-editor-modal *,
body.light-mode .mylist-settings-panel *,
body.light-mode #mylist-view .card * {
  /* Re-assert dark default ? but ONLY where the child has no explicit
     background and isn't a button-with-gradient. We cannot inspect bg
     from CSS, so we rely on prior rules to opt-in white via class. */
}
body.light-mode .activity-card .activity-event-label,
body.light-mode .shelfd-social-card .sl-activity-status,
body.light-mode .activity-card .activity-comment-preview {
  /* Allow strong color preservation handled by earlier rules. */
}

/* ---------- 14s. KEEP WHITE ? gradient/saturated chip & button
   safety list (final). These get hit by some broad rules above
   because of class-name patterns; force white back. ---------- */
body.light-mode .friend-watch-action.accept,
body.light-mode .feed-post-submit-btn,
body.light-mode .profile-character-editor-save,
body.light-mode .profile-character-search-btn,
body.light-mode .mylist-pager-btn.active,
body.light-mode .mylist-tab.active,
body.light-mode .nav-tab.active,
body.light-mode .request-subtab.active,
body.light-mode .discover-hub-btn.active,
body.light-mode .status-pill.watched-active,
body.light-mode .status-pill.watching-active,
body.light-mode .status-pill.planned-active,
body.light-mode .status-pill.paused-active,
body.light-mode .status-pill.dropped-active,
body.light-mode .status-pill.competitive-active,
body.light-mode .status-pill.live-active,
body.light-mode .status-pill.wishlist-active,
body.light-mode .ep-check.checked,
body.light-mode .badge-count,
body.light-mode .request-subtab-count,
body.light-mode .nav-badge,
body.light-mode .friend-activity-dot { color: #ffffff !important; }

/* =============================================================
   v481: My Lists header ? explicit fixes for elements visible in
   user screenshot that were still rendering near-white text on
   the new light page background.
   ============================================================= */

/* "King_Kooom" display name under the avatar shortcut. Had NO
   light-mode override anywhere ? text inherited the dark-mode
   pale-purple body color. */
body.light-mode .mylist-own-profile-name {
  color: #171717 !important;
  font-weight: 800 !important;
}
body.light-mode .mylist-own-profile-shortcut {
  border-color: rgba(124,58,237,0.25) !important;
  box-shadow: 0 6px 14px rgba(20,20,20,0.07) !important;
}

/* "Categories" label */
body.light-mode .mylist-categories-label {
  color: #6d28d9 !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
}

/* Section toggle (Games / Anime / Manga / Books / Movies / TV Shows).
   #mylist-view selector adds extra specificity to defeat earlier
   light-mode rules that left the inactive text too pale and the
   active text white-on-lavender. */
body.light-mode #mylist-view .section-btn {
  color: #3A3A3A !important;
  background: transparent !important;
}
body.light-mode #mylist-view .section-btn.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #7c3aed, #9333ea) !important;
  box-shadow: 0 6px 14px rgba(124,58,237,0.32) !important;
}
body.light-mode #mylist-view .section-btn:not(.active):hover {
  color: #3A3A3A !important;
  background: rgba(124,58,237,0.06) !important;
}
body.light-mode #mylist-view .section-count-bubble {
  background: rgba(124,58,237,0.12) !important;
  color: #3A3A3A !important;
  border-color: rgba(20,20,20,0.12) !important;
}
body.light-mode #mylist-view .section-btn.active .section-count-bubble {
  background: rgba(255,255,255,0.22) !important;
  color: #ffffff !important;
}

/* My Lists section card surface */
body.light-mode .mylist-section-card {
  background: linear-gradient(145deg, #ffffff, #faf6ff) !important;
  border-color: rgba(20,20,20,0.10) !important;
  box-shadow: 0 10px 22px rgba(31,16,72,0.06) !important;
}

/* Status filter tabs (Watching / Watchlist / Watched / Paused).
   Inactive was nearly transparent; active was white on translucent
   lavender. Repaint for clean contrast and use the section's accent
   color on the active state. */
body.light-mode #mylist-view .tab-btn {
  color: #3A3A3A !important;
  background: transparent !important;
  font-weight: 700 !important;
}
body.light-mode #mylist-view .tab-btn:hover {
  color: #3A3A3A !important;
  background: rgba(124,58,237,0.06) !important;
}
body.light-mode #mylist-view .tab-btn.active {
  background: rgba(124,58,237,0.10) !important;
  font-weight: 800 !important;
}
body.light-mode #mylist-view .tab-btn.active[data-tab="watching"] { color: #6d28d9 !important; }
body.light-mode #mylist-view .tab-btn.active[data-tab="planned"]  { color: #b97f08 !important; }
body.light-mode #mylist-view .tab-btn.active[data-tab="watched"]  { color: #0e7490 !important; }
body.light-mode #mylist-view .tab-btn.active[data-tab="paused"]   { color: #c2410c !important; }
body.light-mode #mylist-view .tab-btn.active[data-tab="dropped"]  { color: #b91c1c !important; }
body.light-mode #mylist-view .tab-btn.active[data-tab="live"]     { color: #15803d !important; }
body.light-mode #mylist-view .tab-btn.active[data-tab="wishlist"] { color: #be185d !important; }

/* Tab count chip (the small number after each tab name) */
body.light-mode #mylist-view .tab-count {
  background: rgba(124,58,237,0.10) !important;
  color: #3A3A3A !important;
  border: 1px solid rgba(20,20,20,0.10) !important;
}
body.light-mode #mylist-view .tab-btn.active .tab-count {
  background: rgba(124,58,237,0.18) !important;
  color: #3A3A3A !important;
  border-color: rgba(124,58,237,0.28) !important;
}

/* Underline indicator under the active tab ? already exists in dark
   mode via gradient. Keep it visible on light too. */
body.light-mode #mylist-view .tab-btn.active::after,
body.light-mode #mylist-view .section-btn.active::after {
  background: linear-gradient(90deg, #7c3aed, #9333ea) !important;
}

/* Toolbar wrapper */
body.light-mode #mylist-toolbar { color: #3A3A3A !important; }
body.light-mode #mylist-toolbar .tabs { border-bottom-color: rgba(124,58,237,0.16) !important; }

/* Search-library input row + sort toggle */
body.light-mode #mylist-view input[type="text"][placeholder*="library" i],
body.light-mode #mylist-view .my-list-search,
body.light-mode #mylist-view .search-row input {
  background: #F3EEE6 !important;
  border: 1px solid rgba(124,58,237,0.20) !important;
  color: #171717 !important;
  box-shadow: 0 4px 10px rgba(31,16,72,0.05) !important;
}

/* "+ Add to Shelf" button is already a purple gradient ? keep white text. */
body.light-mode .add-button,
body.light-mode .add-to-shelf-btn,
body.light-mode .add-shelf-btn { color: #ffffff !important; }

/* Import pill in top corner ? currently a teal pill. Make sure the
   text reads cleanly. */
body.light-mode .import-shortcut-pill,
body.light-mode .nav-import-pill {
  color: #ffffff !important;
}

/* Comment chat icon at top right of My Lists header (purple speech
   bubble in screenshot). Make hover state pop. */
body.light-mode .mylist-comment-icon,
body.light-mode .mylist-header-action {
  color: #6d28d9 !important;
}

/* Final guard ? anything inside #mylist-view that's still inheriting
   the dark-mode pale color (#e8e3f3 / #d8cff3) gets a sane default. */
body.light-mode #mylist-view {
  color: #3A3A3A !important;
}

/* =============================================================
   v487: DEFAULT THEME FLAT-MODE ? My Lists page
   Remove every shadow, glow, blur, translucent surface, and
   animation filter. Everything is a solid hex colour.
   Progress bar is explicitly excluded from this reset.
   ============================================================= */

/* -- 1. Nuclear shadow/filter/blur wipe on the whole My Lists view -- */
body.true-dark-mode #mylist-view *:not(.progress-fill):not(.progress-bar) {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* -- 2. Star rating animations ? kill glow keyframes by preventing
        the animation classes from running. The star still changes
        colour on click; it just doesn't pop or glow. -- */
body.true-dark-mode .star-btn.star-pop,
body.true-dark-mode .star-label.label-pop,
body.true-dark-mode .ep-rating-btn {
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* -- 3. Episode watch-sweep glow -- */
body.true-dark-mode .ep-row.episode-watch-glow,
body.true-dark-mode .ep-check.ep-check-pop {
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* -- 4. Profile avatar ? solid border, no shadow -- */
/* v590: username 600 weight */
#mylist-view .mylist-own-profile-name,
body.true-dark-mode #mylist-view .mylist-own-profile-name {
  font-weight: 600 !important;
}

body.true-dark-mode #mylist-view .mylist-own-profile-shortcut {
  box-shadow: none !important;
  border: 1px solid #3a3a3a !important;
  background: #1a1a1a !important;
  /* v589: 10% smaller (50px ? 45px) */
  width: 45px !important;
  height: 45px !important;
}

/* v589: inline bio field ? floating text, no background */
.mylist-own-profile-bio {
  display: block !important;
  width: 100% !important;
  max-width: min(70vw, 280px) !important;
  margin-top: 4px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: rgba(255,255,255,0.55) !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  text-align: center !important;
  font-family: 'Sohne', 'S?hne', 'DM Sans', sans-serif !important;
  cursor: text !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  white-space: pre-wrap !important;
  min-height: 1.4em !important;
}
.mylist-own-profile-bio:focus {
  outline: none !important;
  color: rgba(255,255,255,0.85) !important;
}
/* Placeholder shown when empty and not focused */
.mylist-own-profile-bio.is-empty:not(:focus)::before {
  content: attr(data-placeholder) !important;
  color: rgba(255,255,255,0.28) !important;
  pointer-events: none !important;
}
.mylist-own-profile-bio.is-empty:not(:focus) {
  color: transparent !important;
}

/* v10.135: Activity Notifications tab + true-dark notification rows. */
#activity-tab-view #friend-activity-feed,
#activity-tab-view #activity-notifications-feed,
#activity-tab-view #shared-watch-feed {
  touch-action: pan-y pinch-zoom !important;
}

#activity-tab-view .activity-feed-actions .activity-shared-watch-pill {
  pointer-events: auto !important;
}

#community-view.activity-subtab-notifications #feed-composer {
  display: none !important;
}

#activity-notifications-feed {
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.activity-notifications-shell {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 2px 0 18px;
  max-height: calc(100dvh - 230px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.activity-notifications-shell::-webkit-scrollbar { display: none; }

.activity-notification-row {
  /* v10.464: REWRITTEN from CSS Grid to flexbox after six iterations of
     Grid-based fixes failed to keep iOS WebView from collapsing the row
     height. The previous symptom — every row showed only the middle
     band of its text content, top + bottom clipped — was caused by:
       1. `display: grid` + `align-items: center` + a nested
          `display: flex; flex-direction: column` inside the middle
          column.
          iOS WebKit miscalculates the grid auto-row height when the
          middle track contains a flex column whose items are sized
          with `line-height` and `gap`. The track resolves to the
          AVATAR's track height (42px) instead of the COPY column's
          actual content height (~44px after text + snippet + time +
          two gaps), which makes the row's content box 42px tall.
       2. `overflow: hidden` on the row then chops the COPY column's
          overflow above AND below the visible band, leaving just a
          narrow horizontal strip of glyphs visible.
       3. `align-items: center` makes the clip symmetric (top + bottom),
          which is what produces the "only middle stripe visible" look
          rather than a clean truncation.
     Flexbox doesn't have this auto-row resolution problem — the
     row's height grows to the tallest child naturally, no track
     calculation. Also dropping `overflow: hidden` (no longer needed
     since the row's children don't exceed its rounded-corner box)
     and replacing the `mask-image` on the avatar (another known
     WebKit clipping landmine) with plain `overflow: hidden` on the
     avatar alone. `min-height: 72px` is the safety net — even if
     iOS still miscalculates, the row can't get shorter than that. */
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 18px;
  min-height: 72px;
  border: 1px solid rgba(196, 181, 253, 0.11);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(18, 20, 24, 0.96), rgba(9, 10, 13, 0.98));
  color: #f4f1ff;
  text-align: left;
  font-family: 'Söhne', 'Sohne', 'DM Sans', sans-serif;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
}

.activity-notification-row::before {
  content: '';
  position: absolute;
  /* v10.392: inset the unread stripe 7px from the card edge so it reads as
     an accent bar inside the card rather than fighting the avatar at the
     very left edge. */
  left: 7px;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 999px;
  background: rgba(167, 139, 250, 0.5);
  opacity: 0.42;
}

.activity-notification-row.unread {
  border-color: rgba(167, 139, 250, 0.24);
  background: linear-gradient(135deg, rgba(25, 26, 33, 0.98), rgba(11, 12, 16, 0.98));
}

.activity-notification-row.unread::before {
  opacity: 1;
}

.activity-notification-row.accent-like::before { background: #c4b5fd; }
.activity-notification-row.accent-comment::before { background: #7fdde9; }

.activity-notification-row:active {
  transform: scale(0.985);
}

.activity-notification-avatar {
  /* v10.392: defensive sizing so the avatar can NEVER shrink or shift.
     v10.464: dropped the `mask-image` belt-and-suspenders. `mask-image`
     on iOS WebKit creates a stacking context that has been linked to
     downstream layout glitches on the parent grid/flex container —
     including the row-height collapse the previous Grid layout was
     suffering. `overflow: hidden` + `border-radius: 50%` alone is
     enough to give a clean circular clip in WebKit; the mask was
     redundant defense that was actually hurting more than it helped. */
  width: 42px;
  height: 42px;
  min-width: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(167, 139, 250, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c4b5fd;
  font-size: 15px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.14);
  align-self: center;
}

.activity-notification-avatar img,
.activity-notification-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* v10.392: previously this class had ZERO CSS — when actorPhoto was empty
   the fallback `<span>` rendered the user's first letter as inline text,
   which looked broken inside the round container. This styles it as a
   properly centered initial. */
.activity-notification-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #c4b5fd;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.activity-notification-copy {
  /* v10.464: in the new flexbox row layout, this is the FLEX-GROWING
     middle child. `flex: 1 1 0` makes it consume all remaining
     horizontal space between the avatar (42px) and the optional
     thumb (48px). `min-width: 0` lets ellipsis truncation work on
     the inner snippet without forcing the parent to grow. */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.activity-notification-text {
  color: #f7f3ff;
  font-size: 13.5px;
  line-height: 1.28;
  font-weight: 520;
  letter-spacing: -0.01em;
}

.activity-notification-row.read .activity-notification-text {
  color: rgba(247, 243, 255, 0.74);
  font-weight: 460;
}

.activity-notification-snippet {
  max-width: 100%;
  color: rgba(225, 219, 243, 0.62);
  font-size: 12px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-notification-time {
  color: rgba(196, 181, 253, 0.62);
  font-size: 11px;
  line-height: 1;
  font-weight: 520;
}

.activity-notification-thumb {
  /* v10.464: explicit flex-basis so the thumb holds its 48×60 box on
     the right edge of the flex row and never grows / shrinks. */
  width: 48px;
  height: 60px;
  flex: 0 0 48px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(196, 181, 253, 0.72);
  font-size: 16px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  align-self: center;
}

.activity-notifications-empty,
.activity-notifications-loading {
  margin: 10px 0 0;
  padding: 28px 18px;
  border-radius: 22px;
  border: 1px solid rgba(196, 181, 253, 0.12);
  background: rgba(12, 13, 16, 0.92);
  color: rgba(225, 219, 243, 0.64);
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: center;
  text-align: center;
  font-family: 'Söhne', 'Sohne', 'DM Sans', sans-serif;
}

.activity-notifications-empty strong {
  color: #f7f3ff;
  font-size: 16px;
  line-height: 1.15;
  font-weight: 650;
}

.activity-notifications-empty span,
.activity-notifications-loading {
  font-size: 13px;
  line-height: 1.42;
}

@media (max-width: 430px) {
  #activity-tab-view .activity-feed-actions {
    gap: 6px !important;
  }

  #activity-tab-view .activity-shared-watch-pill {
    padding-left: 5px !important;
    padding-right: 5px !important;
    font-size: 12px !important;
  }

  .activity-notification-row {
    /* v10.464: row is now flexbox (not grid) — drop the grid-template
       override and just tighten gap / padding / min-height for phone
       widths. */
    gap: 12px;
    padding: 11px 11px 11px 16px;
    min-height: 68px;
  }

  .activity-notification-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    flex: 0 0 40px;
  }

  .activity-notification-thumb {
    width: 44px;
    height: 56px;
    flex: 0 0 44px;
  }
}

body.main-tab-mylist .mylist-rating-duel-header-btn {
  display: none !important;
}

.mylist-profile-action-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: 8px !important;
  flex-wrap: wrap !important;
}

.mylist-profile-action-btn {
  /* v11.054: shrink pills ? smaller min-width/height, tighter padding & font */
  min-width: 0 !important;
  min-height: 26px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.045) !important;
  color: rgba(248,246,252,0.92) !important;
  box-shadow: none !important;
  font-family: 'Sohne', 'Söhne', 'DM Sans', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

.mylist-profile-action-btn:active {
  transform: translate3d(0, 1px, 0) !important;
}

.mylist-profile-action-btn--game {
  border-color: rgba(74, 222, 128, 0.26) !important;
  background: linear-gradient(135deg, rgba(28, 127, 67, 0.88) 0%, rgba(18, 97, 51, 0.92) 100%) !important;
  color: #ffffff !important;
}

.mylist-profile-action-btn--tier {
  border-color: rgba(183,164,255,0.28) !important;
  background: rgba(183,164,255,0.14) !important;
  color: #efe9ff !important;
}

/* -- 5. Cards ? no border, let the tone shift carry it -- */
body.true-dark-mode #mylist-view .card {
  box-shadow: none !important;
  border: none !important;
  background: #272727 !important;
}

/* -- 6. Section header card ? no border -- */
body.true-dark-mode #mylist-view .mylist-section-card {
  box-shadow: none !important;
  border: none !important;
  background: #272727 !important;
}

/* -- 7. Section toggle buttons (Games / Anime / Movies / TV Shows) -- */
body.true-dark-mode #mylist-view .section-btn {
  box-shadow: none !important;
  filter: none !important;
  background: transparent !important;
}
body.true-dark-mode #mylist-view .section-btn.active {
  box-shadow: none !important;
  background: #6d28d9 !important;
  border: none !important;
}

/* -- 8. Status/filter tabs (Watching / Watchlist / Watched / Paused) -- */
body.true-dark-mode #mylist-view .tab-btn {
  box-shadow: none !important;
  filter: none !important;
  background: transparent !important;
}
body.true-dark-mode #mylist-view .tab-btn.active {
  box-shadow: none !important;
  background: #2c2c2c !important;
}
body.true-dark-mode #mylist-view .tab-count {
  background: #2c2c2c !important;
  border: 1px solid #3e3e3e !important;
  box-shadow: none !important;
}

/* -- 9. Status pill selector inside cards -- */
/* v11.234: the glassy status button (v11.233) relies on inset highlight +
   drop shadow for its depth. This true-dark flattening rule was killing that
   box-shadow, so the glass look never appeared. Excluded
   `.game-status-current-pill` from the box-shadow reset (it keeps filter:none).
   The pop-out OPTION pills (`.status-pill` that are NOT the current pill) still
   get flattened as before. */
body.true-dark-mode #mylist-view .game-status-current-pill {
  filter: none !important;
}
body.true-dark-mode #mylist-view .status-pill:not(.game-status-current-pill) {
  box-shadow: none !important;
  filter: none !important;
}

/* -- 10. Episode list + season blocks -- */
body.true-dark-mode #mylist-view .ep-list {
  box-shadow: none !important;
  background: #272727 !important;
  border: 1px solid #3e3e3e !important;
}
body.true-dark-mode #mylist-view .season-block {
  box-shadow: none !important;
  background: #272727 !important;
  border: 1px solid #3e3e3e !important;
}
body.true-dark-mode #mylist-view .ep-check {
  box-shadow: none !important;
  border: 1px solid #3a3a3a !important;
}
body.true-dark-mode #mylist-view .ep-check.checked {
  box-shadow: none !important;
  background: #6d28d9 !important;
  border-color: #6d28d9 !important;
}

/* -- 11. Action row buttons ? transparent, just text + thin outline -- */
body.true-dark-mode #mylist-view .ep-toggle-bar,
body.true-dark-mode #mylist-view .comments-btn,
body.true-dark-mode #mylist-view .card-footer-btn {
  box-shadow: none !important;
  filter: none !important;
  background: transparent !important;
  border: 1px solid #4a4a4a !important;
  color: #a0a0a0 !important;
}

/* -- 12. Add to shelf button ? flat purple, no shadow -- */
body.true-dark-mode #mylist-view .add-button,
body.true-dark-mode #mylist-view [class*="add-shelf"],
body.true-dark-mode #mylist-view [class*="add-to-shelf"] {
  box-shadow: none !important;
  filter: none !important;
}

/* -- 13. Header ? no shadow, flat grey -- */
body.true-dark-mode .header {
  box-shadow: none !important;
  filter: none !important;
}

/* -- 14. Bottom nav pill ? solid dark for contrast against #242424 -- */
body.true-dark-mode .mobile-bottom-nav {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  background: #141414 !important;
  border: 1px solid #2c2c2c !important;
}

/* -- 15. Sort button / search bar -- */
body.true-dark-mode #mylist-view .my-list-search,
body.true-dark-mode #mylist-view input[type="text"] {
  box-shadow: none !important;
}

/* -- 16. Inset glows on hover states -- */
body.true-dark-mode #mylist-view .card:hover,
body.true-dark-mode #mylist-view .section-btn:hover,
body.true-dark-mode #mylist-view .tab-btn:hover {
  box-shadow: none !important;
  filter: none !important;
}

/* =============================================================
   v490: MINIMAL POLISH ? status pills, Add to Shelf, ep-list
   ============================================================= */

/* -- Status pills: outline-only, no filled background -- */
body.true-dark-mode #mylist-view .status-pill.watching-active {
  background: transparent !important;
  border-color: #A78BFA !important;
  color: #A78BFA !important;
}
/* Watching tab text also uses the underline purple */
body.true-dark-mode #mylist-view .tab-btn.active[data-tab="watching"] {
  color: #A78BFA !important;
}
body.true-dark-mode #mylist-view .status-pill.planned-active {
  background: transparent !important;
  border-color: #d97706 !important;
  color: #fbbf24 !important;
}
body.true-dark-mode #mylist-view .status-pill.watched-active {
  background: transparent !important;
  border-color: #0891b2 !important;
  color: #67e8f9 !important;
}
body.true-dark-mode #mylist-view .status-pill.paused-active {
  background: transparent !important;
  border-color: #c2410c !important;
  color: #f97316 !important;
}
body.true-dark-mode #mylist-view .status-pill.dropped-active {
  background: transparent !important;
  border-color: #dc2626 !important;
  color: #ef4444 !important;
}
body.true-dark-mode #mylist-view .status-pill.competitive-active {
  background: transparent !important;
  border-color: #4f46e5 !important;
  color: #818cf8 !important;
}
body.true-dark-mode #mylist-view .status-pill.live-active {
  background: transparent !important;
  border-color: #16a34a !important;
  color: #22c55e !important;
}
body.true-dark-mode #mylist-view .status-pill.wishlist-active {
  background: transparent !important;
  border-color: #be185d !important;
  color: #f472b6 !important;
}
/* Inactive options in the status pop-out */
body.true-dark-mode #mylist-view .game-status-options .status-pill {
  background: transparent !important;
  border-color: #3e3e3e !important;
  color: #a0a0a0 !important;
}

/* -- "+ Add to Shelf" ? flat, no gradient, no shadow -- */
body.true-dark-mode #add-btn,
body.true-dark-mode #mylist-view .btn-primary {
  background: #A78BFA !important;
  box-shadow: none !important;
  filter: none !important;
}
body.true-dark-mode #add-btn:hover,
body.true-dark-mode #mylist-view .btn-primary:hover {
  background: #8B6FDB !important;
  filter: none !important;
  box-shadow: none !important;
}

/* -- Episode list ? no border, just tone shift -- */
body.true-dark-mode #mylist-view .ep-list {
  background: #272727 !important;
  border: none !important;
}
body.true-dark-mode #mylist-view .season-block {
  background: #272727 !important;
  border-color: #3a3a3a !important;
}

/* -- ep-check unchecked ? subtle outline -- */
body.true-dark-mode #mylist-view .ep-check {
  border: 1px solid #4a4a4a !important;
}

/* =============================================================
   v513/v514: Episode dropdown ? clean borderless season cards,
   no inter-row dividers, taller episode rows, clean watched state
   ============================================================= */

/* Remove cyan highlight + glow on watched rows */
body.true-dark-mode #mylist-view .ep-row.watched-ep {
  border-left-color: transparent !important;
  box-shadow: none !important;
}
body.true-dark-mode #mylist-view .ep-row.watched-ep::before {
  opacity: 0 !important;
}

/* Checkbox checked = #A78BFA purple */
body.true-dark-mode #mylist-view .ep-check.checked {
  background: #A78BFA !important;
  border-color: #A78BFA !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* v515: Remove IMDb / MAL badge from title cards entirely */
body.true-dark-mode #mylist-view .mylist-card-bottom-export,
body.true-dark-mode #mylist-view .imdb-export-badge,
body.true-dark-mode #mylist-view .mal-export-badge {
  display: none !important;
}

/* v515/v517: Center the Episodes toggle button across the action row.
   The row itself is the flex container with `justify-content: flex-start`
   and 146px left padding (poster clearance); switching it to center
   makes its single child (.card-footer-actions) sit in the middle of
   the remaining width. */
body.true-dark-mode #mylist-view .card-action-row {
  justify-content: center !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}
body.true-dark-mode #mylist-view .card-footer-actions {
  justify-content: center !important;
  flex: 1 !important;
}

/* v515: Remove "Edit episode count" link from episode dropdown */
body.true-dark-mode #mylist-view .edit-ep-row {
  display: none !important;
}

/* Remove thin border on each season card header */
body.true-dark-mode #mylist-view .season-header {
  border: none !important;
  background: #272727 !important;
}

/* Remove the border that wraps the whole open season block */
body.true-dark-mode #mylist-view .season-block {
  border: none !important;
}

/* Remove soft border/separator between individual episode rows */
body.true-dark-mode #mylist-view .ep-row {
  background: transparent !important;
  border-left: none !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  /* Increase vertical size */
  padding: 14px 12px !important;
}

/* =============================================================
   v505/v507: Import button ? flat cyan, all effects removed,
   and translateY overridden here (file 16 = last loaded) so it
   beats the "transform: none !important" in 12-pwa-header-continuity.css
   ============================================================= */
body.true-dark-mode .header-import-btn,
body.main-tab-mylist .header-import-btn {
  background: #06b6d4 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: inline-flex !important;
}
body.true-dark-mode .header-import-btn:hover,
body.main-tab-mylist .header-import-btn:hover {
  background: #0891b2 !important;
  filter: none !important;
  box-shadow: none !important;
}
/* v511: import button sits just below the cogwheel. Cogwheel has
   translateY(52px); import natural top is ~17px in the 64px row,
   so translateY(55px) puts its top at ~72px ? just below cogwheel bottom. */
@media (max-width: 700px) {
  body.main-tab-mylist .header-import-btn {
    transform: translateY(55px) !important;
  }
}

/* v511: Remove comment button from My Lists title cards */
body.true-dark-mode #mylist-view .comments-btn { display: none !important; }

/* v511: IMDb / MAL badge floated to top-left of the card */
body.true-dark-mode #mylist-view .card { position: relative !important; }
body.true-dark-mode #mylist-view .mylist-card-bottom-export {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 3 !important;
  /* keep it out of normal flow so card-action-row doesn't shift */
  pointer-events: auto !important;
}
body.true-dark-mode #mylist-view .card-action-row.has-bottom-export {
  /* row no longer needs extra space reserved for the badge */
  padding-top: 0 !important;
}
/* Slightly tighten the badge pill so it reads as a subtle top tag */
body.true-dark-mode #mylist-view .imdb-export-badge,
body.true-dark-mode #mylist-view .mal-export-badge {
  font-size: 9px !important;
  padding: 3px 7px !important;
  border-radius: 5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
}

/* =============================================================
   v520/v522/v524/v525: Activity feed ? flat feed style.
   Cards blend with the page background (#0E0E0E). Posts are
   separated by a hairline in #2f2f2f (one shade lighter than the
   previous #272727 divider for slightly better visibility).
   Selectors must match #community-view #activity-tab-view
   specificity to beat the originals in 04-activity-feed.css.
   ============================================================= */

/* Main shelfd-social-card ? flat, transparent, hairline divider */
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card,
body.true-dark-mode .activity-page .shelfd-social-card {
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Older activity-card style */
body.true-dark-mode #community-view #activity-tab-view .activity-card,
body.true-dark-mode .activity-page .activity-card,
body.true-dark-mode .activity-card {
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Import batch card */
body.true-dark-mode #community-view #activity-tab-view .import-activity-card,
body.true-dark-mode .activity-page .import-activity-card {
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card::after,
body.true-dark-mode .activity-page .shelfd-social-card::after,
body.true-dark-mode #community-view #activity-tab-view .activity-card::after,
body.true-dark-mode .activity-page .activity-card::after,
body.true-dark-mode .activity-card::after,
body.true-dark-mode #community-view #activity-tab-view .import-activity-card::after,
body.true-dark-mode .activity-page .import-activity-card::after {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(14px, 3.6vw, 22px));
  right: calc(-1 * clamp(14px, 3.6vw, 22px));
  bottom: 0;
  height: 1px;
  background: rgba(255,255,255,0.30);
  pointer-events: none;
}

/* Stacked activity back-plate layers ? hide them, no card chrome on stacks */
body.true-dark-mode #community-view #activity-tab-view .sl-activity-stack-layer,
body.true-dark-mode .activity-page .sl-activity-stack-layer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: none !important;
}

/* Compact cards inside expanded stack */
body.true-dark-mode #community-view #activity-tab-view .sl-activity-stack-compact-card,
body.true-dark-mode .activity-page .sl-activity-stack-compact-card {
  background: transparent !important;
  border: none !important;
  /* v10.676: removed the 1px border-bottom hairline that previously sat
     between each compact child card's interactions row and the carousel
     controls / Show all button. Was:
       border-bottom: 1px solid rgba(255,255,255,0.15) !important;
     The `border: none !important;` above now applies uniformly to all
     four sides — no bottom edge on compact child cards. */
  border-bottom: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Stack front card */
body.true-dark-mode #community-view #activity-tab-view .sl-activity-stack-front,
body.true-dark-mode .activity-page .sl-activity-stack-front {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Expanded import grid panel ? keep tonal contrast since this is a panel
   that opens INSIDE a card (not a feed post itself) */
body.true-dark-mode #community-view #activity-tab-view .import-activity-grid-panel,
body.true-dark-mode .activity-page .import-activity-grid-panel,
body.true-dark-mode #community-view #activity-tab-view .import-activity-list,
body.true-dark-mode .activity-page .import-activity-list {
  background: #272727 !important;
  border: none !important;
}

/* Import grid cells inside expanded panel */
body.true-dark-mode #community-view #activity-tab-view .import-activity-row,
body.true-dark-mode .activity-page .import-activity-row {
  background: rgba(255,255,255,0.035) !important;
}

/* Right-cluster pill on import card ? light surface against the flat bg */
body.true-dark-mode #community-view #activity-tab-view .import-activity-right-cluster,
body.true-dark-mode .activity-page .import-activity-right-cluster {
  background: #272727 !important;
  border-color: #2c2c2c !important;
}

/* Preview tiles inside right-cluster */
body.true-dark-mode #community-view #activity-tab-view .import-activity-preview-tile-mini,
body.true-dark-mode .activity-page .import-activity-preview-tile-mini {
  background: rgba(255,255,255,0.10) !important;
}

/* Feed post cards */
body.true-dark-mode #community-view #activity-tab-view .feed-post-card,
body.true-dark-mode .activity-page .feed-post-card {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Older feed-post variant of activity-card */
body.true-dark-mode #community-view #activity-tab-view .activity-card.feed-post,
body.true-dark-mode .activity-page .activity-card.feed-post {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Activity poster column on the older card style ? kill its dark fill */
body.true-dark-mode #community-view #activity-tab-view .activity-poster-col,
body.true-dark-mode .activity-page .activity-poster-col {
  background: transparent !important;
}

/* Stack wrap ? give it the same hairline divider so stacked posts
   don't visually run into the next post */
body.true-dark-mode #community-view #activity-tab-view .sl-activity-stack-wrap,
body.true-dark-mode .activity-page .sl-activity-stack-wrap {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Stack front card divider ? explicitly add since it was missing */
body.true-dark-mode #community-view #activity-tab-view .sl-activity-stack-front,
body.true-dark-mode .activity-page .sl-activity-stack-front {
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}
/* But avoid double-divider when stack-front sits inside stack-wrap */
body.true-dark-mode #community-view #activity-tab-view .sl-activity-stack-wrap .sl-activity-stack-front,
body.true-dark-mode .activity-page .sl-activity-stack-wrap .sl-activity-stack-front {
  border-bottom: none !important;
}

/* =============================================================
   v526: Hide feed composer ("What are you watching?" post field)
   ============================================================= */
#feed-composer,
body.true-dark-mode #feed-composer {
  display: none !important;
}

/* =============================================================
   v526: Friends top tabs (Activity / Friends / Requests) ?
   strip the pill capsule wrapper and force the button text white.
   ============================================================= */
body.true-dark-mode #community-view .friends-tabs {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.true-dark-mode #community-view .friends-tabs .friends-tab-btn {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}
body.true-dark-mode #community-view .friends-tabs .friends-tab-btn.active {
  background: transparent !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border-bottom: 2px solid #A78BFA !important;
  text-decoration: none !important;
}
body.true-dark-mode #community-view .friends-tabs .friends-tab-btn:hover {
  color: #ffffff !important;
}

/* =============================================================
   v528: 4th bottom-nav tab "Friends" ? split inner tabs
   - Activity bottom nav (default community)  ? only Activity inner tab
   - Friends bottom nav (.shelfd-friends-list-mode) ? Friends + Requests
   ============================================================= */
/* Default community view = Activity bottom nav: hide Friends + Requests inner tabs */
body.main-tab-community:not(.shelfd-friends-list-mode) #ftab-friends,
body.main-tab-community:not(.shelfd-friends-list-mode) #ftab-requests {
  display: none !important;
}
/* Friends bottom nav: hide Activity inner tab + Activity feed tab content */
body.shelfd-friends-list-mode #ftab-activity {
  display: none !important;
}
/* Activity feed pills (Watch Together / Activity / Shared Watch) ? hide
   on Friends bottom-nav since they only relate to the activity tab */
body.shelfd-friends-list-mode #activity-tab-view .activity-feed-actions,
body.shelfd-friends-list-mode #activity-tab-view #feed-composer {
  display: none !important;
}

/* 4-column bottom nav grid (was 3) */
body.true-dark-mode .mobile-bottom-nav {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 4px !important;
}
body.true-dark-mode .mobile-bottom-nav .main-nav-btn {
  padding: 8px 4px !important;
  font-size: 11px !important;
  min-width: 0 !important;
}

/* =============================================================
   v523: Activity card line spacing ? name / title / action
   Roughly doubled bottom-margin on each so the three lines have
   clear breathing room between them.
   ============================================================= */
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-meta-row,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-meta-row {
  margin: 0 0 6px !important;
}
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-action-line,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-action-line {
  margin: 0 0 6px !important;
}
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-status,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-status {
  margin: 0 0 6px !important;
}

/* =============================================================
   v508: Add to Shelf ? full-page bottom sheet (dark charcoal)
   When triggered from the + button, slides up from the bottom
   instead of appearing as a centered popup.
   ============================================================= */
@keyframes addShelfSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

body.true-dark-mode #modal.modal-overlay {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

body.true-dark-mode #modal .add-title-modal {
  position: fixed !important;
  /* v10.63: explicit top/right/bottom/left in addition to `inset: 0` so iOS
     versions that don't parse the `inset` shorthand still anchor full-viewport. */
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  /* v10.63: `100dvh` was added in iOS Safari 15.4. On older iOS (PWA on iOS
     14.x or 15.0–15.3), those three declarations were rejected by the CSS
     parser, leaving the modal with no defined height. The inner flex chain
     (`.add-shelf-step-shell` → `.add-shelf-step-scroll`, which uses
     `flex: 1 1 auto; overflow-y: auto`) needs a constrained parent height
     to scroll — without it the Confirm panel rendered below the viewport
     with no way to reach it. The `100vh` lines below are the fallback that
     older iOS keeps; the `100dvh` lines override on modern iOS. */
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  border-radius: 0 !important;
  background: #0E0E0E !important;
  border: none !important;
  box-shadow: none !important;
  padding: max(var(--shelfd-safe-top, 0px), 20px) 20px 20px !important;
  overflow-y: hidden !important;
  touch-action: none !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: none !important;
  animation: addShelfSlideUp 0.34s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

/* -- v508 redesign: full-page sheet interior -------------------- */

/* Header row: title left, ? close right */
body.true-dark-mode #modal .add-title-modal {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
body.true-dark-mode #modal .add-title-modal h3 {
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px !important;
  color: #f5f5f5 !important;
  font-family: 'DM Sans', sans-serif !important;
  margin: 0 0 20px 0 !important;
  padding-right: 44px !important; /* room for future close btn */
}

/* API key row ? keep but shrink it to near-invisible unless needed */
body.true-dark-mode #modal .api-key-row {
  margin-bottom: 8px !important;
}
body.true-dark-mode #modal #inp-api-key {
  background: #272727 !important;
  border: 1px solid #3e3e3e !important;
  color: #f5f5f5 !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
}
body.true-dark-mode #modal #inp-api-key::placeholder { color: #5a5a5a !important; }

/* Search area: flex column, search input first, pills below */
body.true-dark-mode #modal #tmdb-search-area {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Search row ? reorder above pills */
body.true-dark-mode #modal .cover-search-row {
  order: -1 !important;
  display: flex !important;
  gap: 10px !important;
  margin: 0 0 16px 0 !important;
  align-items: center !important;
}
body.true-dark-mode #modal #inp-tmdb-search {
  flex: 1 1 auto !important;
  background: #272727 !important;
  border: 1px solid #3e3e3e !important;
  color: #f5f5f5 !important;
  border-radius: 999px !important;
  padding: 14px 20px !important;
  /* v931: 16px minimum — iOS auto-zooms the page when focusing any input
     with font-size < 16px. 15px was causing the unwanted zoom on tap. */
  font-size: 16px !important;
  font-weight: 600 !important;
  font-family: 'DM Sans', sans-serif !important;
  outline: none !important;
  caret-color: #A78BFA !important;
  transition: border-color 0.18s ease !important;
  min-width: 0 !important;
}
body.true-dark-mode #modal #inp-tmdb-search:focus {
  border-color: #A78BFA !important;
}
body.true-dark-mode #modal #inp-tmdb-search::placeholder { color: #5a5a5a !important; }

/* Lock search row height so it never compresses when results appear */
body.true-dark-mode #modal .cover-search-row {
  flex-shrink: 0 !important;
}

/* Search button */
body.true-dark-mode #modal .cover-search-row .btn-primary {
  flex-shrink: 0 !important;
  background: #A78BFA !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  padding: 12px 20px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  font-family: 'DM Sans', sans-serif !important;
  min-height: 46px !important;
  cursor: pointer !important;
}
body.true-dark-mode #modal .cover-search-row .btn-primary:active {
  background: #8B6FDB !important;
}

/* Filter pills row */
body.true-dark-mode #modal .shelf-filter-pills {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  padding-bottom: 16px !important;
  flex-wrap: nowrap !important;
  -webkit-overflow-scrolling: touch !important;
  /* v931: prevent the pills row from shrinking when the flex-column modal
     makes room for the results grid. Without this, flex-shrink:1 (default)
     lets the row compress into an unreadable squished strip. */
  flex-shrink: 0 !important;
  min-height: 0 !important;
  touch-action: pan-x !important;
}
body.true-dark-mode #modal .shelf-filter-pills::-webkit-scrollbar { display: none !important; }
body.true-dark-mode #modal .shelf-filter-pill {
  flex-shrink: 0 !important;
  background: transparent !important;
  border: 1px solid #3e3e3e !important;
  border-radius: 999px !important;
  color: #909090 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
  box-shadow: none !important;
}
body.true-dark-mode #modal .shelf-filter-pill.active {
  background: #A78BFA !important;
  border-color: #A78BFA !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
body.true-dark-mode #modal .shelf-filter-pill:not(.active):hover {
  border-color: #5a5a5a !important;
  color: #c0c0c0 !important;
}

/* Results area */
body.true-dark-mode #modal #tmdb-results {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  min-height: 0 !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
}
body.true-dark-mode #modal #tmdb-selected-area,
body.true-dark-mode #modal #modal-status-picker {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
}

body.true-dark-mode #modal .add-title-modal.add-shelf-has-selection {
  justify-content: flex-start !important;
  padding-top: max(var(--shelfd-safe-top, 0px), 20px) !important;
  padding-bottom: max(env(safe-area-inset-bottom, 20px), 20px) !important;
}
body.true-dark-mode #modal .add-title-modal.add-shelf-has-selection #api-key-section,
body.true-dark-mode #modal .add-title-modal.add-shelf-has-selection #tmdb-search-area {
  display: none !important;
}
body.true-dark-mode #modal .add-title-modal.add-shelf-has-selection h3,
body.true-dark-mode #modal .add-title-modal.add-shelf-has-selection #tmdb-selected-area,
body.true-dark-mode #modal .add-title-modal.add-shelf-has-selection #modal-status-picker,
body.true-dark-mode #modal .add-title-modal.add-shelf-has-selection .modal-actions {
  flex: 0 0 auto !important;
  width: min(100%, 420px) !important;
  align-self: center !important;
}
body.true-dark-mode #modal .add-title-modal.add-shelf-has-selection h3 {
  text-align: center !important;
  padding-right: 0 !important;
  margin-bottom: 14px !important;
}
body.true-dark-mode #modal .add-title-modal.add-shelf-has-selection #tmdb-selected-area {
  margin: auto auto 12px !important;
  min-height: 0 !important;
}
body.true-dark-mode #modal .add-title-modal.add-shelf-has-selection #modal-status-picker {
  margin: 0 auto !important;
  min-height: 0 !important;
}
body.true-dark-mode #modal .add-title-modal.add-shelf-has-selection .modal-actions {
  margin: 18px auto auto !important;
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 6px) !important;
}
body.true-dark-mode #modal .add-title-modal.add-shelf-has-selection .add-shelf-rating-prompt .modal-status-confirm-actions {
  justify-content: center !important;
  width: 100% !important;
}

body.true-dark-mode #modal .add-shelf-search-flash {
  margin: 0 0 14px !important;
  padding: 13px 15px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(103,232,249,0.22) !important;
  background: linear-gradient(180deg, rgba(34,211,238,0.14), rgba(34,211,238,0.08)) !important;
  color: #d8fbff !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18) !important;
  transition: opacity 0.22s ease, transform 0.22s ease !important;
}
body.true-dark-mode #modal .add-shelf-search-flash.is-hiding {
  opacity: 0 !important;
  transform: translateY(-4px) !important;
}
body.true-dark-mode #modal .add-shelf-selected-card {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  gap: 16px !important;
  padding: 18px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background:
    radial-gradient(circle at top left, rgba(167,139,250,0.18), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025)) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
body.true-dark-mode #modal .add-shelf-selected-poster-wrap {
  width: 92px !important;
  aspect-ratio: 2 / 3 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.04) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.2) !important;
}
body.true-dark-mode #modal .add-shelf-selected-poster-wrap.is-empty {
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: linear-gradient(180deg, rgba(167,139,250,0.18), rgba(255,255,255,0.03)) !important;
}
body.true-dark-mode #modal .add-shelf-selected-poster-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
body.true-dark-mode #modal .add-shelf-selected-placeholder {
  color: rgba(245,245,245,0.9) !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
}
body.true-dark-mode #modal .add-shelf-selected-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-width: 0 !important;
  justify-content: center !important;
}
body.true-dark-mode #modal .add-shelf-selected-kicker {
  color: rgba(214,205,232,0.58) !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 650 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
body.true-dark-mode #modal .tmdb-selected-title {
  color: #f5f5f7 !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: clamp(22px, 5vw, 28px) !important;
  line-height: 1.02 !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
}
body.true-dark-mode #modal .add-shelf-selected-chip-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
body.true-dark-mode #modal .add-shelf-selected-chip,
body.true-dark-mode #modal .add-shelf-confirm-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.05) !important;
  color: rgba(245,245,247,0.88) !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
body.true-dark-mode #modal .add-shelf-confirm-chip-rating {
  color: #fbbf24 !important;
  border-color: rgba(251,191,36,0.24) !important;
  background: rgba(251,191,36,0.1) !important;
}
body.true-dark-mode #modal .add-shelf-selected-details {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}
body.true-dark-mode #modal .add-shelf-selected-line,
body.true-dark-mode #modal .add-shelf-confirm-readout {
  color: rgba(214,205,232,0.78) !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.42 !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}
body.true-dark-mode #modal .add-shelf-selected-clear {
  align-self: flex-start !important;
  margin-top: 4px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #c4b5fd !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
}
body.true-dark-mode #modal .modal-status-picker {
  width: min(100%, 430px) !important;
  gap: 12px !important;
  margin: 0 auto !important;
}
body.true-dark-mode #modal .modal-status-picker .modal-status-label {
  color: rgba(214,205,232,0.58) !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 650 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
body.true-dark-mode #modal .modal-status-picker .modal-status-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important;
  gap: 10px !important;
}
body.true-dark-mode #modal .modal-status-btn {
  min-width: 0 !important;
  max-width: none !important;
  min-height: 54px !important;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.028)) !important;
  color: #f5f5f7 !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;
}
body.true-dark-mode #modal .modal-status-btn:hover,
body.true-dark-mode #modal .modal-status-btn:active {
  border-color: rgba(167,139,250,0.36) !important;
  background: linear-gradient(180deg, rgba(167,139,250,0.18), rgba(255,255,255,0.03)) !important;
  transform: translateY(-1px) !important;
}
body.true-dark-mode #modal .modal-status-confirm,
body.true-dark-mode #modal .add-shelf-rating-prompt {
  padding: 20px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.028)) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04) !important;
  gap: 14px !important;
}
body.true-dark-mode #modal .modal-status-confirm-title {
  color: #f5f5f7 !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 22px !important;
  line-height: 1.04 !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
}
body.true-dark-mode #modal .modal-status-confirm-copy,
body.true-dark-mode #modal .discover-rating-prompt .discover-add-desc {
  color: rgba(214,205,232,0.78) !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}
body.true-dark-mode #modal .add-shelf-confirm-summary {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
}
body.true-dark-mode #modal .add-shelf-rating-prompt .discover-rating-stars {
  margin: 20px auto 8px !important;
  gap: 6px !important;
}
body.true-dark-mode #modal .add-shelf-rating-prompt .star-btn {
  font-size: 32px !important;
}
body.true-dark-mode #modal .add-shelf-rating-prompt .star-label {
  color: #fbbf24 !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 650 !important;
}
body.true-dark-mode #modal .modal-status-confirm-actions .btn-secondary,
body.true-dark-mode #modal .modal-status-confirm-actions .btn-primary {
  min-height: 44px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 650 !important;
}

/* Bottom actions row ? cancel becomes minimal, back btn kept */
body.true-dark-mode #modal .modal-actions {
  display: flex !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding-top: 12px !important;
  border-top: 1px solid #2a2a2a !important;
  margin-top: auto !important;
}
body.true-dark-mode #modal .modal-actions .btn-secondary {
  background: transparent !important;
  border: 1px solid #3e3e3e !important;
  border-radius: 999px !important;
  color: #6a6a6a !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 10px 18px !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
body.true-dark-mode #modal .modal-actions #modal-back-btn {
  color: #c0c0c0 !important;
  border-color: #4a4a4a !important;
}

/* -- v509 results grid ? 3 poster cards per row --------------- */
body.true-dark-mode #modal .tmdb-results {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding-bottom: 20px !important;
}

/* Each card: vertical flex ? poster fills top, info at bottom */
body.true-dark-mode #modal .tmdb-result {
  display: flex !important;
  flex-direction: column !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #272727 !important;
  border: none !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: opacity 0.15s ease !important;
  padding: 0 !important;
  gap: 0 !important;
}
body.true-dark-mode #modal .tmdb-result:active {
  opacity: 0.75 !important;
}

/* Poster ? 2:3 aspect, full width, crisp cover crop */
body.true-dark-mode #modal .tmdb-result img {
  width: 100% !important;
  aspect-ratio: 2 / 3 !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
  height: auto !important;
}

/* Info block below poster */
body.true-dark-mode #modal .tmdb-result-info {
  padding: 7px 8px 9px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* Title ? two-line clamp, no overflow */
body.true-dark-mode #modal .tmdb-result-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #f0f0f0 !important;
  font-family: 'DM Sans', sans-serif !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.3 !important;
}

/* Badge (media type) ? tiny chip, sits on its own line */
body.true-dark-mode #modal .shelf-result-badge {
  display: inline-block !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  background: rgba(99,73,129,0.35) !important;
  color: #c4a8e8 !important;
  border: none !important;
  margin-top: 2px !important;
  align-self: flex-start !important;
}

/* Hide the verbose meta line ? poster card shows name + type only */
body.true-dark-mode #modal .tmdb-result-meta {
  display: none !important;
}

/* v10.52: Shelfd Add to Shelf full-screen mobile flow redesign. */
body.true-dark-mode #modal.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 3900 !important;
  background: #050506 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  overflow: hidden !important;
  touch-action: none !important;
}
body.true-dark-mode #modal .add-title-modal {
  --shelf-surface: #101013;
  --shelf-surface-2: #17171b;
  --shelf-line: rgba(255,255,255,0.08);
  --shelf-muted: rgba(235,232,244,0.56);
  --shelf-text: #f6f4fb;
  --shelf-accent: #b7a4ff;
  position: fixed !important;
  /* v10.63: explicit top/right/bottom/left so older iOS that doesn't parse
     the `inset` shorthand still anchors the modal to the full viewport. */
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  max-height: none !important;
  /* v10.63: `100dvh` is iOS 15.4+. On older iOS the modal had no defined
     height and the inner Confirm panel rendered below the viewport with no
     scroll path (parent has overflow: hidden). The `100vh` lines below are
     the fallback the older parser keeps; modern iOS uses the `100dvh` ones. */
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 145px),
    #050506 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
  animation: addShelfSlideUp 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}
body.true-dark-mode #modal .add-shelf-close-btn {
  position: absolute !important;
  top: calc(var(--shelfd-safe-top, 0px) + 12px) !important;
  right: 14px !important;
  z-index: 3 !important;
  min-width: 54px !important;
  height: 34px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.05) !important;
  color: rgba(246,244,251,0.84) !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}
body.true-dark-mode #modal .add-title-modal h3 {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: calc(var(--shelfd-safe-top, 0px) + 16px) 72px 14px 16px !important;
  padding: 0 !important;
  color: var(--shelf-text) !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 30px !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
  line-height: 1.04 !important;
  text-align: left !important;
}
body.true-dark-mode #modal #api-key-section {
  flex: 0 0 auto !important;
  padding: 0 16px !important;
}
body.true-dark-mode #modal .api-key-row {
  margin: 0 0 10px !important;
  gap: 8px !important;
}
body.true-dark-mode #modal #tmdb-search-area {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 16px 0 !important;
  overflow: hidden !important;
  touch-action: pan-y !important;
}
body.true-dark-mode #modal .cover-search-row {
  order: 0 !important;
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
  margin: 0 0 12px !important;
}
body.true-dark-mode #modal #inp-tmdb-search {
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 16px !important;
  background: #111114 !important;
  color: var(--shelf-text) !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 520 !important;
  letter-spacing: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;
}
body.true-dark-mode #modal #inp-tmdb-search:focus {
  border-color: rgba(183,164,255,0.64) !important;
  box-shadow: 0 0 0 3px rgba(183,164,255,0.12), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
body.true-dark-mode #modal #inp-tmdb-search::placeholder {
  color: rgba(235,232,244,0.38) !important;
}
body.true-dark-mode #modal .cover-search-row .btn-primary {
  width: 52px !important;
  min-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  border: 1px solid rgba(183,164,255,0.34) !important;
  border-radius: 16px !important;
  background: rgba(183,164,255,0.16) !important;
  color: #f7f2ff !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 0 !important;
  box-shadow: none !important;
}
body.true-dark-mode #modal .cover-search-row .btn-primary::before {
  content: 'Go';
  font-size: 13px !important;
  font-weight: 720 !important;
  line-height: 1 !important;
}
body.true-dark-mode #modal .shelf-filter-pills {
  flex: 0 0 auto !important;
  display: flex !important;
  gap: 7px !important;
  margin: 0 -16px !important;
  padding: 0 16px 12px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  touch-action: pan-x !important;
}
body.true-dark-mode #modal .shelf-filter-pill {
  min-height: 32px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.035) !important;
  color: rgba(235,232,244,0.62) !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 620 !important;
  letter-spacing: 0 !important;
}
body.true-dark-mode #modal .shelf-filter-pill.active {
  border-color: rgba(183,164,255,0.42) !important;
  background: rgba(183,164,255,0.16) !important;
  color: #efeaff !important;
}
body.true-dark-mode #modal #tmdb-results {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin: 0 -16px !important;
  padding: 4px 16px calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  scroll-padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
  touch-action: pan-y !important;
}
body.true-dark-mode #modal .tmdb-results {
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  padding: 0 !important;
}
body.true-dark-mode #modal .tmdb-result {
  min-height: 86px !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 8px !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.035) !important;
  overflow: hidden !important;
  transition: transform 140ms ease, opacity 140ms ease, background 140ms ease !important;
}
body.true-dark-mode #modal .tmdb-result:active {
  opacity: 0.86 !important;
  transform: scale(0.985) !important;
  background: rgba(183,164,255,0.08) !important;
}
body.true-dark-mode #modal .tmdb-result img {
  width: 52px !important;
  height: 76px !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  border-radius: 9px !important;
  background: #19191d !important;
}
body.true-dark-mode #modal .tmdb-result-info {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 0 !important;
}
body.true-dark-mode #modal .tmdb-result-title {
  color: var(--shelf-text) !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
body.true-dark-mode #modal .shelf-result-badge {
  width: fit-content !important;
  min-height: 21px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 8px !important;
  border: 1px solid rgba(183,164,255,0.20) !important;
  border-radius: 999px !important;
  background: rgba(183,164,255,0.10) !important;
  color: rgba(225,216,255,0.86) !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 680 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body.true-dark-mode #modal .tmdb-result-meta,
body.true-dark-mode #modal .cover-search-msg {
  color: var(--shelf-muted) !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}
body.true-dark-mode #modal .add-title-modal.add-shelf-has-selection {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.true-dark-mode #modal .add-title-modal.add-shelf-has-selection h3,
body.true-dark-mode #modal .add-title-modal.add-shelf-has-selection #tmdb-selected-area,
body.true-dark-mode #modal .add-title-modal.add-shelf-has-selection #modal-status-picker,
body.true-dark-mode #modal .add-title-modal.add-shelf-has-selection .modal-actions {
  width: 100% !important;
  max-width: none !important;
  align-self: stretch !important;
}
body.true-dark-mode #modal .add-title-modal.add-shelf-has-selection h3 {
  margin: calc(var(--shelfd-safe-top, 0px) + 16px) 72px 0 16px !important;
  text-align: left !important;
}
body.true-dark-mode #modal .add-title-modal.add-shelf-has-selection #tmdb-selected-area {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: auto !important;
  margin: 0 !important;
  min-height: 0 !important;
  align-self: stretch !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}
body.true-dark-mode #modal .add-title-modal.add-shelf-has-selection #modal-status-picker {
  flex: 1 1 auto !important;
  margin: 0 !important;
  min-height: 0 !important;
  align-self: stretch !important;
}
body.true-dark-mode #modal #tmdb-selected-area,
body.true-dark-mode #modal #modal-status-picker {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  touch-action: pan-y !important;
}
body.true-dark-mode #modal .add-shelf-selected-card,
body.true-dark-mode #modal .modal-status-confirm,
body.true-dark-mode #modal .add-shelf-rating-prompt,
body.true-dark-mode #modal .add-shelf-success-panel {
  border: 1px solid rgba(255,255,255,0.075) !important;
  border-radius: 18px !important;
  background: var(--shelf-surface) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 18px 36px rgba(0,0,0,0.20) !important;
}
body.true-dark-mode #modal .add-shelf-selected-card {
  display: grid !important;
  grid-template-columns: 82px minmax(0, 1fr) !important;
  gap: 14px !important;
  padding: 12px !important;
  margin: 0 0 12px !important;
}
body.true-dark-mode #modal .add-shelf-selected-poster-wrap {
  width: 82px !important;
  border-radius: 12px !important;
  background: #19191d !important;
  box-shadow: none !important;
}
body.true-dark-mode #modal .add-shelf-selected-info {
  justify-content: center !important;
  gap: 8px !important;
}
body.true-dark-mode #modal .add-shelf-selected-kicker,
body.true-dark-mode #modal .modal-status-label {
  color: rgba(183,164,255,0.78) !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 680 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-transform: none !important;
}
body.true-dark-mode #modal .tmdb-selected-title {
  color: var(--shelf-text) !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 21px !important;
  font-weight: 720 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}
body.true-dark-mode #modal .add-shelf-selected-chip,
body.true-dark-mode #modal .add-shelf-confirm-chip {
  min-height: 25px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.045) !important;
  color: rgba(246,244,251,0.82) !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 620 !important;
  letter-spacing: 0 !important;
}
body.true-dark-mode #modal .add-shelf-selected-line,
body.true-dark-mode #modal .add-shelf-confirm-readout,
body.true-dark-mode #modal .modal-status-confirm-copy,
body.true-dark-mode #modal .discover-rating-prompt .discover-add-desc,
body.true-dark-mode #modal .modal-status-subtitle {
  color: var(--shelf-muted) !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.36 !important;
  letter-spacing: 0 !important;
}
body.true-dark-mode #modal .add-shelf-selected-clear {
  width: fit-content !important;
  margin-top: 0 !important;
  color: var(--shelf-accent) !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}
body.true-dark-mode #modal .modal-status-picker {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 0 auto !important;
}
body.true-dark-mode #modal .modal-status-head {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}
body.true-dark-mode #modal .modal-status-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}
body.true-dark-mode #modal .modal-status-btn {
  min-height: 52px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  background: var(--shelf-surface-2) !important;
  color: var(--shelf-text) !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease !important;
}
body.true-dark-mode #modal .modal-status-btn:active {
  transform: scale(0.985) !important;
  border-color: rgba(183,164,255,0.36) !important;
  background: rgba(183,164,255,0.11) !important;
}
body.true-dark-mode #modal .modal-status-confirm,
body.true-dark-mode #modal .add-shelf-rating-prompt,
body.true-dark-mode #modal .add-shelf-success-panel {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 13px !important;
  padding: 18px !important;
  text-align: left !important;
}
body.true-dark-mode #modal .modal-status-confirm-title {
  color: var(--shelf-text) !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 21px !important;
  font-weight: 720 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}
body.true-dark-mode #modal .add-shelf-confirm-summary {
  justify-content: flex-start !important;
}
body.true-dark-mode #modal .add-shelf-rating-prompt .discover-rating-stars {
  justify-content: center !important;
  margin: 12px 0 8px !important;
  gap: 5px !important;
}
body.true-dark-mode #modal .add-shelf-rating-prompt .star-btn {
  font-size: 30px !important;
}
body.true-dark-mode #modal .add-shelf-rating-prompt .star-label {
  color: #fbbf24 !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}
body.true-dark-mode #modal .modal-status-confirm-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}
body.true-dark-mode #modal .add-shelf-step-panel--rating .modal-status-confirm-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
body.true-dark-mode #modal .modal-status-confirm-actions .btn-secondary,
body.true-dark-mode #modal .modal-status-confirm-actions .btn-primary,
body.true-dark-mode #modal .modal-actions .btn-secondary {
  min-height: 46px !important;
  border-radius: 14px !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
body.true-dark-mode #modal .modal-status-confirm-actions .btn-primary {
  border: 1px solid rgba(183,164,255,0.38) !important;
  background: rgba(183,164,255,0.18) !important;
  color: #f7f2ff !important;
}
body.true-dark-mode #modal .modal-status-confirm-actions .btn-secondary,
body.true-dark-mode #modal .modal-actions .btn-secondary {
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.04) !important;
  color: rgba(246,244,251,0.74) !important;
}
body.true-dark-mode #modal .add-shelf-success-panel {
  align-items: center !important;
  text-align: center !important;
  margin-top: 10px !important;
  animation: addShelfStepIn 220ms ease both !important;
}
body.true-dark-mode #modal .add-shelf-success-mark {
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: rgba(34,211,238,0.12) !important;
  border: 1px solid rgba(34,211,238,0.24) !important;
  color: #7deeff !important;
  font-size: 23px !important;
  line-height: 1 !important;
}
body.true-dark-mode #modal .add-shelf-search-flash {
  margin: 0 0 10px !important;
  padding: 11px 13px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(34,211,238,0.20) !important;
  background: rgba(34,211,238,0.08) !important;
  color: #d9fbff !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 620 !important;
  letter-spacing: 0 !important;
}
body.true-dark-mode #modal .modal-actions {
  display: none !important;
}
body.true-dark-mode #modal #modal-status-picker {
  display: none !important;
}
body.true-dark-mode #modal .add-title-modal:not([data-add-shelf-step="search"]) h3 {
  display: none !important;
}
body.add-shelf-modal-open #mobile-bottom-nav,
body.add-shelf-modal-open .mobile-bottom-nav {
  display: none !important;
}
body.add-shelf-modal-open,
body.add-shelf-modal-open #app-container,
body.add-shelf-modal-open #mobile-bottom-nav,
body.add-shelf-modal-open .mobile-bottom-nav {
  background: #050506 !important;
}
body.add-shelf-modal-open #mobile-bottom-nav,
body.add-shelf-modal-open .mobile-bottom-nav {
  border-color: #050506 !important;
  box-shadow: none !important;
}
body.true-dark-mode #modal .add-shelf-step-shell {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 0 !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
}
body.true-dark-mode #modal .add-shelf-step-topbar {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) 56px !important;
  align-items: start !important;
  gap: 10px !important;
  padding: calc(var(--shelfd-safe-top, 0px) + 14px) 16px 10px !important;
}
body.true-dark-mode #modal .add-shelf-step-back,
body.true-dark-mode #modal .add-shelf-step-back-spacer,
body.true-dark-mode #modal .add-shelf-step-topbar-spacer {
  width: 56px !important;
  min-width: 56px !important;
}
body.true-dark-mode #modal .add-shelf-step-back {
  min-height: 34px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.04) !important;
  color: rgba(246,244,251,0.78) !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
}
body.true-dark-mode #modal .add-shelf-step-heading {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  text-align: center !important;
}
body.true-dark-mode #modal .add-shelf-step-kicker {
  color: rgba(183,164,255,0.8) !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: 0.12em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}
body.true-dark-mode #modal .add-shelf-step-title {
  color: #f6f4fb !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 25px !important;
  font-weight: 760 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.04 !important;
}
body.true-dark-mode #modal .add-shelf-step-subtitle {
  color: rgba(235,232,244,0.58) !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.38 !important;
}
body.true-dark-mode #modal .add-shelf-step-scroll {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 0 16px calc(env(safe-area-inset-bottom, 0px) + 20px) !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}
body.true-dark-mode #modal .add-shelf-selected-hero {
  display: grid !important;
  grid-template-columns: 108px minmax(0, 1fr) !important;
  gap: 14px !important;
  padding: 16px !important;
  border: 1px solid rgba(255,255,255,0.075) !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.028)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 18px 36px rgba(0,0,0,0.20) !important;
}
body.true-dark-mode #modal .add-shelf-selected-hero .add-shelf-selected-poster-wrap {
  width: 108px !important;
  aspect-ratio: 2 / 3 !important;
  border-radius: 16px !important;
  background: #19191d !important;
  box-shadow: none !important;
}
body.true-dark-mode #modal .add-shelf-selected-hero .add-shelf-selected-info {
  justify-content: center !important;
  gap: 9px !important;
}
body.true-dark-mode #modal .add-shelf-step-panel {
  margin-top: 14px !important;
  padding: 18px !important;
  border: 1px solid rgba(255,255,255,0.075) !important;
  border-radius: 22px !important;
  background: #101013 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 18px 36px rgba(0,0,0,0.18) !important;
}
body.true-dark-mode #modal .add-shelf-choice-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
body.true-dark-mode #modal .add-shelf-choice-btn {
  min-height: 58px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.04) !important;
}
body.true-dark-mode #modal .add-shelf-step-panel--success {
  padding: 20px !important;
}
body.true-dark-mode #modal .add-shelf-step-shell--rating .add-shelf-step-scroll {
  gap: 12px !important;
}
body.true-dark-mode #modal .add-shelf-step-shell--rating .add-shelf-selected-hero {
  gap: 12px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.true-dark-mode #modal .add-shelf-step-shell--rating .add-shelf-selected-hero .add-shelf-selected-poster-wrap {
  width: 92px !important;
  border-radius: 14px !important;
}
body.true-dark-mode #modal .add-shelf-step-shell--rating .add-shelf-selected-hero .add-shelf-selected-info {
  gap: 7px !important;
}
body.true-dark-mode #modal .add-shelf-step-shell--rating .add-shelf-selected-kicker {
  color: rgba(183,164,255,0.72) !important;
}
body.true-dark-mode #modal .add-shelf-step-shell--rating .tmdb-selected-title {
  font-size: 19px !important;
  line-height: 1.08 !important;
}
body.true-dark-mode #modal .add-shelf-step-shell--rating .add-shelf-selected-line {
  font-size: 12px !important;
  line-height: 1.3 !important;
}
body.true-dark-mode #modal .add-shelf-step-shell--rating .add-shelf-step-panel,
body.true-dark-mode #modal .add-shelf-step-shell--rating .add-shelf-rating-prompt {
  margin-top: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.true-dark-mode #modal .add-shelf-rating-flow {
  gap: 14px !important;
}
body.true-dark-mode #modal .add-shelf-rating-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 5px !important;
}
body.true-dark-mode #modal .add-shelf-rating-kicker {
  color: rgba(183,164,255,0.8) !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 680 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}
body.true-dark-mode #modal .add-shelf-rating-readout {
  color: rgba(246,244,251,0.92) !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
}
body.true-dark-mode #modal .add-shelf-rating-desc {
  color: rgba(235,232,244,0.5) !important;
  font-size: 12px !important;
}
/* v10.68: Success step — strip the same chrome as the Review step so the
   "Added to library" view reads clean. The check-mark circle is boosted in
   size (44px -> 64px) and given a slightly stronger ring + glow, since
   without the outer card frame it becomes the visual anchor of the page. */
body.true-dark-mode #modal .add-shelf-step-shell--success .add-shelf-selected-hero {
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.true-dark-mode #modal .add-shelf-step-shell--success .add-shelf-step-panel,
body.true-dark-mode #modal .add-shelf-step-shell--success .add-shelf-step-panel--success {
  margin-top: 28px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.true-dark-mode #modal .add-shelf-step-shell--success .add-shelf-selected-chip,
body.true-dark-mode #modal .add-shelf-step-shell--success .add-shelf-confirm-chip {
  border: none !important;
  background: rgba(255,255,255,0.05) !important;
}
body.true-dark-mode #modal .add-shelf-step-shell--success .add-shelf-success-panel {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 14px !important;
  padding: 0 !important;
}
body.true-dark-mode #modal .add-shelf-step-shell--success .add-shelf-success-mark {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: rgba(34,211,238,0.14) !important;
  border: 1px solid rgba(34,211,238,0.34) !important;
  box-shadow: 0 0 0 6px rgba(34,211,238,0.06), 0 10px 28px rgba(34,211,238,0.16) !important;
  color: #7deeff !important;
  font-size: 32px !important;
  line-height: 1 !important;
  display: grid !important;
  place-items: center !important;
}
body.true-dark-mode #modal .add-shelf-step-shell--success .add-shelf-success-panel .modal-status-confirm-title {
  margin: 4px 0 0 !important;
}
body.true-dark-mode #modal .add-shelf-step-shell--success .add-shelf-success-panel .modal-status-confirm-copy {
  max-width: 320px !important;
}

/* v10.67: Review (final confirm) step — strip ALL card chrome (borders,
   backgrounds, shadows) per user request. Keep ONLY the Back/Confirm
   buttons styled. Hero, chips, and panel become flat content on the page. */
body.true-dark-mode #modal .add-shelf-step-shell--confirm .add-shelf-selected-hero {
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.true-dark-mode #modal .add-shelf-step-shell--confirm .add-shelf-step-panel,
body.true-dark-mode #modal .add-shelf-step-shell--confirm .modal-status-confirm,
body.true-dark-mode #modal .add-shelf-step-shell--confirm .add-shelf-confirm-panel {
  margin-top: 14px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.true-dark-mode #modal .add-shelf-step-shell--confirm .add-shelf-selected-chip,
body.true-dark-mode #modal .add-shelf-step-shell--confirm .add-shelf-confirm-chip {
  border: none !important;
  background: rgba(255,255,255,0.05) !important;
}

body.true-dark-mode #modal .add-shelf-step-shell--rating .discover-rating-stars {
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 2px !important;
  width: 100% !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
}
body.true-dark-mode #modal .add-shelf-step-shell--rating .stars.rating-scale-five {
  gap: 2px !important;
}
body.true-dark-mode #modal .add-shelf-step-shell--rating .discover-rating-stars .star-btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  font-size: clamp(24px, 7vw, 30px) !important;
  line-height: 1 !important;
}
body.true-dark-mode #modal .add-shelf-step-shell--rating .stars.rating-scale-five .star-btn.half-step {
  width: 100% !important;
}
body.true-dark-mode #modal .add-shelf-step-shell--rating .discover-rating-stars .star-label {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  margin: 2px 0 0 !important;
  min-width: 0 !important;
  color: #f2bb53 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  text-align: center !important;
}
body.true-dark-mode #modal .add-shelf-rating-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 2px !important;
}
body.true-dark-mode #modal .add-shelf-rating-actions .btn-secondary,
body.true-dark-mode #modal .add-shelf-rating-actions .btn-primary {
  min-height: 40px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
}
body.true-dark-mode #modal .add-shelf-rating-actions .btn-secondary {
  min-width: 82px !important;
  background: rgba(255,255,255,0.035) !important;
}
body.true-dark-mode #modal .add-shelf-rating-actions .btn-primary {
  min-width: 102px !important;
  background: rgba(183,164,255,0.2) !important;
}
body.true-dark-mode #modal .add-shelf-rating-actions .btn-primary[disabled] {
  opacity: 0.42 !important;
}
body.true-dark-mode #modal .add-title-modal[data-add-shelf-step="status"] #tmdb-selected-area,
body.true-dark-mode #modal .add-title-modal[data-add-shelf-step="rating"] #tmdb-selected-area,
body.true-dark-mode #modal .add-title-modal[data-add-shelf-step="confirm"] #tmdb-selected-area,
body.true-dark-mode #modal .add-title-modal[data-add-shelf-step="success"] #tmdb-selected-area {
  animation: addShelfStepIn 220ms ease both !important;
}
@keyframes addShelfStepIn {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (min-width: 720px) {
  body.true-dark-mode #modal .add-title-modal {
    padding-left: max(22px, calc((100vw - 560px) / 2)) !important;
    padding-right: max(22px, calc((100vw - 560px) / 2)) !important;
  }
}
@media (max-width: 430px) {
  body.true-dark-mode #modal .add-title-modal h3 {
    font-size: 28px !important;
  }
  body.true-dark-mode #modal .modal-status-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* =============================================================
   v529: activity card type-scale tweaks + creator/creative-team
   tag pill removal.
   - Action/status line bumped one notch larger.
   - Media title shrunk two notches and recoloured to the muted
     premium purple #A78BFA so titles read as accent links rather
     than the previous yellow headline.
   - Creator-role and creative-team-role/profile-label tags lose
     their pill chrome (no padding, border, background, radius,
     shadow) ? only the colour is kept.
   ============================================================= */
/* v784: All UNSCOPED activity-card rules previously in this block were
   leaking light-mode-contrast.css styles into dark mode. They've been
   moved to 04-activity-feed.css (search for "v784: Consolidated") as
   the dark/base source of truth. Only body.true-dark-mode-scoped
   variants are kept here as explicit theme overrides. */
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-title,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-title {
  color: rgba(255,255,255,.97) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  text-shadow: none !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  line-height: 1.34 !important;
  letter-spacing: -.012em !important;
}
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-action-verb,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-action-verb {
  color: #f2c94c !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  line-height: 1.34 !important;
  letter-spacing: -.012em !important;
}
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-name,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-name {
  /* v10.662: username 16/600 → 15/500 per design pass. */
  font-size: 15px !important;
  font-weight: 500 !important;
  max-width: min(58vw, 300px) !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
  letter-spacing: -.012em !important;
}
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-name .creator-name-wrap,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-name .creator-name,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-name .creator-name-wrap,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-name .creator-name {
  color: #ffffff !important;
}

/* v890: keep activity card type size, tracking, and weights consistent in late overrides */
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-name,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-name .creator-name-wrap,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-name .creator-name,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-dot,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-action-verb,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-action-detail,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-status,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-score,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-comment,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-show-more,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-action-btn,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-stack-action-count,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-user-note,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-plain-note,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-name,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-name .creator-name-wrap,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-name .creator-name,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-dot,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-action-verb,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-action-detail,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-status,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-score,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-comment,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-show-more,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-action-btn,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-stack-action-count,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-user-note,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-plain-note {
  font-size: 16px !important;
  letter-spacing: -.01em !important;
}

body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-time,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-time {
  /* v10.662: timestamp 12px → 11px per design pass. */
  font-size: 11px !important;
  letter-spacing: -.01em !important;
}

body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-name,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-name .creator-name-wrap,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-name .creator-name,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-name,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-name .creator-name-wrap,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-name .creator-name {
  /* v10.662: username 600 → 500 per design pass. */
  font-weight: 500 !important;
}

/* v10.949: late override to ensure .sl-activity-name lands at 16.5px even
   though the shared v890 block above (font-size: 16px applied to the
   broader meta family) appears later in cascade. This rule comes AFTER
   the v890 block AND targets .sl-activity-name specifically, so it wins. */
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-name,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-name .creator-name-wrap,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-name .creator-name,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-name,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-name .creator-name-wrap,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-name .creator-name {
  font-size: 16.5px !important;
}

body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-time,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-dot,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-action-verb,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-title,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-action-detail,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-status,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-score,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-comment,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-show-more,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-action-btn,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-stack-action-count,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-user-note,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-plain-note,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-time,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-dot,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-action-verb,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-title,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-action-detail,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-status,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-score,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-comment,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-show-more,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-action-btn,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-stack-action-count,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-user-note,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-plain-note {
  font-weight: 400 !important;
}

body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-title,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-title {
  font-weight: 400 !important;
}

/* v10.950: parent activity-card media titles one weight heavier in true dark.
   Scoped away from child stacked cards so compact carousel typography stays unchanged. */
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-title,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-split-title,
body.true-dark-mode .activity-page .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-title,
body.true-dark-mode .activity-page .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-split-title {
  font-weight: 500 !important;
}

body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card.shelfd-episode-activity-card:not(.sl-activity-stack-compact-card) .sl-activity-action-line-split,
body.true-dark-mode .activity-page .shelfd-social-card.shelfd-episode-activity-card:not(.sl-activity-stack-compact-card) .sl-activity-action-line-split {
  gap: 6px !important;
}

body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card.shelfd-episode-activity-card:not(.sl-activity-stack-compact-card) .sl-activity-split-action,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card.shelfd-episode-activity-card:not(.sl-activity-stack-compact-card) .sl-activity-split-action-tail,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card.shelfd-episode-activity-card:not(.sl-activity-stack-compact-card) .sl-activity-split-pretitle,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card.shelfd-episode-activity-card:not(.sl-activity-stack-compact-card) .sl-activity-split-title,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card.shelfd-episode-activity-card:not(.sl-activity-stack-compact-card) .sl-activity-split-detail,
body.true-dark-mode .activity-page .shelfd-social-card.shelfd-episode-activity-card:not(.sl-activity-stack-compact-card) .sl-activity-split-action,
body.true-dark-mode .activity-page .shelfd-social-card.shelfd-episode-activity-card:not(.sl-activity-stack-compact-card) .sl-activity-split-action-tail,
body.true-dark-mode .activity-page .shelfd-social-card.shelfd-episode-activity-card:not(.sl-activity-stack-compact-card) .sl-activity-split-pretitle,
body.true-dark-mode .activity-page .shelfd-social-card.shelfd-episode-activity-card:not(.sl-activity-stack-compact-card) .sl-activity-split-title,
body.true-dark-mode .activity-page .shelfd-social-card.shelfd-episode-activity-card:not(.sl-activity-stack-compact-card) .sl-activity-split-detail {
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 18px !important;
}

/* v542: My Lists card footer polish
   1. Episodes button ? remove 1px border
   2. Watch-together + button ? remove 1px border
   3. Status pills ? 14px / 550 / white 100%
   4. Card-genre / categories ? 14px / 700 / white 100%
*/
body.true-dark-mode #mylist-view .card-action-row .ep-toggle-bar.card-footer-btn {
  border: none !important;
}
body.true-dark-mode #mylist-view .watch-together-add,
body.true-dark-mode .watch-together-add {
  border: none !important;
}
body.true-dark-mode #mylist-view .status-pill,
body.true-dark-mode #mylist-view .show-card .status-pill,
body.true-dark-mode #mylist-view .card .status-pill,
body.true-dark-mode #mylist-view .status-pills .status-pill,
body.true-dark-mode #mylist-view .game-status-options .status-pill,
body.true-dark-mode .status-pill {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}
body.true-dark-mode #mylist-view .card-genre {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

/* v544: shift activity items 15px further left by reducing left padding */
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card,
body.true-dark-mode .activity-page .shelfd-social-card {
  padding-left: 0 !important;
}

/* v553: shift activity text content 3px to the left as a block, keeping
   every line aligned (username, title, action verb, rating chip). */
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-copy-zone,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-copy-zone {
  transform: translateX(-3px) !important;
}

/* =============================================================
   v558: per-activity user note ("+" composer + rendered chip)
   ============================================================= */

/* + button ? sits left of comment/reply on user's own activity cards */
body.true-dark-mode .sl-activity-add-note-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,0.78) !important;
  cursor: pointer !important;
}
body.true-dark-mode .sl-activity-add-note-btn:hover {
  color: #ffffff !important;
}
body.true-dark-mode .sl-activity-add-note-btn svg {
  width: 20px !important;
  height: 20px !important;
}

/* v560: per-item activity note also appears on the my-list title card as
   the last text line. Same style language as the activity-card chip. */
body.true-dark-mode #mylist-view .card-activity-note {
  display: block !important;
  width: 100% !important;
  margin: 12px 0 4px !important;
  padding: 9px 12px !important;
  background: rgba(255,255,255,0.04) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: #f7f3ea !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
}

/* Rendered note chip ? sits below the rating on the activity card */
body.true-dark-mode .sl-activity-user-note {
  display: block !important;
  width: auto !important;
  max-width: min(100%, 420px) !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  color: rgba(232,226,255,.78) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.34 !important;
  letter-spacing: -.01em !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
}

#community-view #activity-tab-view .shelfd-social-card .sl-activity-plain-note,
.activity-page .shelfd-social-card .sl-activity-plain-note,
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-plain-note,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-plain-note {
  display: block !important;
  width: auto !important;
  max-width: min(100%, 420px) !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: rgba(232,226,255,.78) !important;
  font: 400 16px/1.34 'Sohne', 'DM Sans', sans-serif !important;
  letter-spacing: -.01em !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

body.light-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-plain-note,
body.light-mode .activity-page .shelfd-social-card .sl-activity-plain-note {
  color: rgba(38,27,69,.72) !important;
}

/* Bottom-sheet composer overlay */
.screenlist-activity-note-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483646 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  pointer-events: none !important;
}
.screenlist-activity-note-overlay.is-open { pointer-events: auto !important; }
.screenlist-activity-note-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.58) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  opacity: 0 !important;
  transition: opacity 220ms ease !important;
}
.screenlist-activity-note-overlay.is-open .screenlist-activity-note-backdrop { opacity: 1 !important; }
.screenlist-activity-note-sheet {
  position: relative !important;
  width: 100% !important;
  max-width: 560px !important;
  background: #1a1a1a !important;
  border-top-left-radius: 22px !important;
  border-top-right-radius: 22px !important;
  padding: 14px 18px max(20px, env(safe-area-inset-bottom, 16px)) !important;
  transform: translateY(100%) !important;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.55) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.screenlist-activity-note-overlay.is-open .screenlist-activity-note-sheet {
  transform: translateY(0) !important;
}
.screenlist-activity-note-handle {
  width: 38px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.20) !important;
  margin: 0 auto !important;
}
.screenlist-activity-note-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.screenlist-activity-note-title {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
.screenlist-activity-note-close {
  background: transparent !important;
  border: 0 !important;
  color: rgba(255,255,255,0.72) !important;
  font-size: 16px !important;
  cursor: pointer !important;
  padding: 4px 8px !important;
}
.screenlist-activity-note-input {
  width: 100% !important;
  min-height: 110px !important;
  resize: vertical !important;
  padding: 12px !important;
  border-radius: 12px !important;
  background: #0e0e0e !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #ffffff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  outline: none !important;
}
.screenlist-activity-note-input:focus {
  border-color: rgba(167,139,250,0.55) !important;
}
.screenlist-activity-note-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.screenlist-activity-note-counter {
  color: rgba(255,255,255,0.55) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
.screenlist-activity-note-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.screenlist-activity-note-remove {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.78) !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.screenlist-activity-note-save {
  background: #A78BFA !important;
  border: 0 !important;
  color: #0e0e0e !important;
  border-radius: 999px !important;
  padding: 9px 18px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
.screenlist-activity-note-save:hover { filter: brightness(1.06) !important; }

/* v554: compact "EP rated ? N" chip ? episode-rating display on merged
   watch+rate cards. */
body.true-dark-mode .sl-activity-rating-compact {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 4px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
}
body.true-dark-mode .sl-activity-rating-compact .sl-activity-rating-prefix {
  color: rgba(255,255,255,0.78) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}
body.true-dark-mode .sl-activity-rating-compact .sl-activity-stars-single {
  display: inline-flex !important;
  align-items: center !important;
}
body.true-dark-mode .sl-activity-rating-compact .sl-activity-stars-single .sl-rating-star {
  width: 16px !important;
  height: 16px !important;
}
body.true-dark-mode .sl-activity-rating-compact .sl-activity-score {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

/* v604: Activity/Shared Watch tab pills ? 800?600 weight, 11px?13px */
body.true-dark-mode .activity-shared-watch-pill,
body.true-dark-mode #activity-tab-view .activity-shared-watch-pill,
.activity-shared-watch-pill {
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* v604: Activity action buttons (like/reply/delete) ? 300 weight */
body.true-dark-mode #community-view #activity-tab-view .sl-activity-action-btn,
body.true-dark-mode .activity-page .sl-activity-action-btn,
#community-view #activity-tab-view .sl-activity-action-btn,
.activity-page .sl-activity-action-btn {
  font-size: 11px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
}
body.true-dark-mode #community-view #activity-tab-view .sl-activity-stack-action-count,
body.true-dark-mode .activity-page .sl-activity-stack-action-count {
  font-size: 13px !important;
  line-height: 1 !important;
}

/* v541: more vertical space between action row and the divider line */
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-bottom-safe,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-bottom-safe {
  padding-bottom: 20px !important;
}

/* v606: on Activity tab ? hide the top-left "Activity" tab button and its
   highlight line, then pull the page content up flush to the pills. */

/* Hide #ftab-activity button and its underline in all states */
body.main-tab-community:not(.shelfd-friends-list-mode) #ftab-activity,
body.true-dark-mode #community-view:not(.shelfd-friends-list-mode) #ftab-activity {
  display: none !important;
}
/* Collapse the entire friends-tabs bar on Activity tab ? it only contains
   #ftab-activity which is now hidden, so the bar is empty. */
body.main-tab-community:not(.shelfd-friends-list-mode) #community-view .friends-tabs,
body.true-dark-mode body.main-tab-community:not(.shelfd-friends-list-mode) .friends-tabs {
  display: none !important;
}
/* Hide activity-feed-heading text node */
body.main-tab-community:not(.shelfd-friends-list-mode) #activity-tab-view .activity-feed-heading,
body.true-dark-mode #activity-tab-view .activity-feed-heading {
  display: none !important;
}
/* Collapse the activity-feed-header top padding so pills sit at top of page */
body.main-tab-community:not(.shelfd-friends-list-mode) #activity-tab-view .activity-feed-header,
body.true-dark-mode body.main-tab-community:not(.shelfd-friends-list-mode) #activity-tab-view .activity-feed-header {
  padding: 8px 0 10px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 0 !important;
}
/* Remove any top spacing from #activity-tab-view itself */
body.main-tab-community:not(.shelfd-friends-list-mode) #activity-tab-view {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Creator + creative-team tag pill removal ? keep colour only. */
.creator-role,
body.light-mode .creator-role,
body.true-dark-mode .creator-role {
  display: inline !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.creative-team-role,
.creative-team-profile-label,
body.light-mode .creative-team-role,
body.light-mode .creative-team-profile-label,
body.true-dark-mode .creative-team-role,
body.true-dark-mode .creative-team-profile-label {
  display: inline !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* =============================================================
   v547 BATCH
   Discovery: remove section bg/border, hide trailer popup square,
   hide add-to-library button, shrink card.
   Activity: shift action row +20px right.
   My Lists: status pill 12/450, hide ep%, center episodes btn,
             top tabs 14/500, category buttons 16/600.
   ============================================================= */

/* Discovery section wrappers ? flat (no boxed border/bg) */
body.true-dark-mode #discover-view .discover-section-card,
body.true-dark-mode #discover-view .discover-rail,
body.true-dark-mode #discover-view .discover-section,
body.true-dark-mode #discover-view .discover-rail-item {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* v549: discovery title cards use the same dark surface as my-list cards */
/* v11.311: include #anime-discover-view — it was missing this rule, so anime
   discover cards fell back to ~#0a0a0a and blended into the page background
   (the body strip under the poster looked the same colour as the page).
   Now anime matches Movies/TV/Games with the #212121 card surface. */
body.true-dark-mode #discover-view .discover-card,
body.true-dark-mode #anime-discover-view .discover-card {
  background: #212121 !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}
body.true-dark-mode #discover-view .discover-card:not(.discover-card-expanded),
body.true-dark-mode #anime-discover-view .discover-card:not(.discover-card-expanded) {
  border-radius: 3px !important;
}

/* Hide trailer-popup square (top right of poster) */
body.true-dark-mode #discover-view .discover-expand-icon,
body.true-dark-mode .discover-expand-icon {
  display: none !important;
}

/* Hide the inline Add-to-Library / Watched / Watching pill on discovery cards */
body.true-dark-mode #discover-view .discover-add-btn {
  display: none !important;
}

/* Discovery card body shrinks now that the button is gone */
body.true-dark-mode #discover-view .discover-card .discover-card-body {
  padding-bottom: 8px !important;
}

/* ========== Activity action row metadata alignment ========== */
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-bottom-safe,
body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-bottom-safe {
  padding-left: calc(clamp(37px, 6.5vw, 46px) + clamp(8px, 1.3vw, 12px) - 3px) !important;
}

@media (max-width: 560px) {
  body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-bottom-safe,
  body.true-dark-mode .activity-page .shelfd-social-card .sl-activity-bottom-safe {
    padding-left: 50px !important;
  }
}

/* ========== My Lists ========== */

/* Status pill on title card ? 11px / 400 weight */
body.true-dark-mode #mylist-view .show-card .status-pill,
body.true-dark-mode #mylist-view .card .status-pill,
body.true-dark-mode #mylist-view .status-pills .status-pill {
  font-size: 11px !important;
  font-weight: 400 !important;
}
/* v549: per-state text color matches outline color */
body.true-dark-mode #mylist-view .status-pill.watching-active { color: #7c3aed !important; }
body.true-dark-mode #mylist-view .status-pill.planned-active  { color: #d97706 !important; }
body.true-dark-mode #mylist-view .status-pill.watched-active  { color: #0891b2 !important; }
body.true-dark-mode #mylist-view .status-pill.paused-active   { color: #c2410c !important; }
body.true-dark-mode #mylist-view .status-pill.dropped-active  { color: #dc2626 !important; }
body.true-dark-mode #mylist-view .status-pill.competitive-active { color: #4f46e5 !important; }
body.true-dark-mode #mylist-view .status-pill.wishlist-active { color: #be185d !important; }
body.true-dark-mode #mylist-view .status-pill.live-active     { color: #16a34a !important; }
/* Inactive pill: keep base muted color */
body.true-dark-mode #mylist-view .status-pill:not(.watching-active):not(.planned-active):not(.watched-active):not(.paused-active):not(.dropped-active):not(.wishlist-active):not(.live-active):not(.competitive-active) {
  color: rgba(255,255,255,0.55) !important;
}

/* Hide only the legacy episode % indicator inside the old progress meta row.
   The new inline bar-row percent for TV/Anime Watching/Paused must stay visible. */
body.true-dark-mode #mylist-view .progress-meta > [id^="progress-percent-"] {
  display: none !important;
}
body.true-dark-mode #mylist-view .progress-bar-row > .progress-percent-inline {
  display: block !important;
}

/* v549: revert v547 action-row centering (it broke Comments + WT+ layout).
   Episodes button stays in its natural grid cell within .card-footer-actions. */

/* Top status filter tabs ? 13px / 400 weight, -20% closer */
body.true-dark-mode #mylist-view #mylist-toolbar .tab-btn,
body.true-dark-mode #mylist-view .tabs .tab-btn {
  font-size: 13px !important;
  font-weight: 400 !important;
  padding: 6px 13px !important;
}
body.true-dark-mode #mylist-view #mylist-toolbar .tabs,
body.true-dark-mode #mylist-view .tabs {
  gap: 2px !important;
  justify-content: center !important;
}
/* v598: hide count on inactive tabs, show only on active */
body.true-dark-mode #mylist-view .tab-btn .tab-count,
#mylist-view .tab-btn .tab-count {
  display: none !important;
}
body.true-dark-mode #mylist-view .tab-btn.active .tab-count,
#mylist-view .tab-btn.active .tab-count {
  display: inline-flex !important;
}

/* Top category buttons ? 16px / 400 weight, -20% closer */
body.true-dark-mode .section-btn,
body.true-dark-mode .section-toggle .section-btn {
  font-size: 16px !important;
  font-weight: 400 !important;
  padding: 7px 11px !important;
}
body.true-dark-mode .section-toggle {
  gap: 3px !important;
}

/* v592: title card text ? genre, release date, where-to-watch */
body.true-dark-mode #mylist-view .card-genre,
#mylist-view .card-genre {
  font-size: 11px !important;
  font-weight: 400 !important;
  opacity: 0.45 !important;
}
body.true-dark-mode #mylist-view .games-wishlist-card .games-wishlist-card-genre,
#mylist-view .games-wishlist-card .games-wishlist-card-genre,
body.true-dark-mode #mylist-view .games-wishlist-card .games-wishlist-card-platforms,
#mylist-view .games-wishlist-card .games-wishlist-card-platforms {
  font-size: 12px !important;
  font-weight: 500 !important;
  opacity: 0.58 !important;
}
/* v10.707: watchlist release-date and "In theaters" lines bumped from
   11px/400 → 12px/500. Added the in-theaters selector to this rule so
   both states share one typographic treatment (previously in-theaters
   inherited 11px/400 from the card-availability-line cascade below).
   The where-to-watch line (with provider logos) is intentionally LEFT
   at 11px/400 — only release-date and in-theaters were in scope.
   v10.708: bumped again to 14px / 500. The 12px change was visually
   too subtle vs the prior 11px — at small sizes the Sohne 400→500
   step is easy to miss. 14px is the same size as the card title
   metadata so the watchlist availability state now reads as a proper
   sub-line rather than tiny meta text. */
body.true-dark-mode #mylist-view .card-release-date,
#mylist-view .card-release-date,
body.true-dark-mode #mylist-view .mylist-availability-release-date,
#mylist-view .mylist-availability-release-date,
body.true-dark-mode #mylist-view .mylist-availability-in-theaters,
#mylist-view .mylist-availability-in-theaters {
  font-size: 14px !important;
  font-weight: 500 !important;
}
/* v10.709: ROOT-CAUSE FIX for "In theaters / release-date font size not
   updating". The rule below matches .card-availability-line which is the
   SHARED base class on ALL three availability-line variants
   (release-date, in-theaters, where-to-watch). My v10.708 rule above
   bumped release-date + in-theaters to 14px/500 with (1,2,0)
   specificity and !important — but this rule has IDENTICAL (1,2,0)
   specificity, same !important, and comes LATER in source order,
   so cascade tiebreaker hands it the win and clobbers the 14px back
   to 11px on the in-theaters and release-date variants. Fix: scope
   this rule to ONLY .mylist-availability-where-to-watch (and its
   where-text descendant) by adding :not() filters on the base class
   selector. Now the rule no longer collides with the in-theaters /
   release-date variants. */
body.true-dark-mode #mylist-view .card-availability-line.mylist-availability-where-to-watch,
#mylist-view .card-availability-line.mylist-availability-where-to-watch,
body.true-dark-mode #mylist-view .mylist-availability-where-to-watch,
#mylist-view .mylist-availability-where-to-watch,
body.true-dark-mode #mylist-view .mylist-availability-where-text,
#mylist-view .mylist-availability-where-text {
  font-size: 11px !important;
  font-weight: 400 !important;
}
/* Episode count ? 400 weight */
body.true-dark-mode #mylist-view .progress-meta,
body.true-dark-mode #mylist-view .progress-meta span,
#mylist-view .progress-meta,
#mylist-view .progress-meta span,
body.true-dark-mode #mylist-view .progress-percent-inline,
#mylist-view .progress-percent-inline {
  font-size: 11px !important;
  font-weight: 400 !important;
}

/* v587: mylist title card typography */
/* Episode count "3/17 episodes" ? 11px 300 */
body.true-dark-mode #mylist-view .progress-meta,
body.true-dark-mode #mylist-view .progress-meta span,
body.true-dark-mode #mylist-view .progress-meta span:last-child,
body.true-dark-mode #mylist-view .progress-percent-inline {
  font-size: 11px !important;
  font-weight: 300 !important;
  /* v11.266: episode count "13/20 episodes" → brighter off-white grey
     (was muted #9990b3) for better visibility. */
  color: #cfcad8 !important;
}
/* v605: episode button + watch-together + sit in right-aligned cluster */
body.true-dark-mode #mylist-view .card-action-row,
#mylist-view .card-action-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
body.true-dark-mode #mylist-view .card-action-row.has-watch-priority,
#mylist-view .card-action-row.has-watch-priority {
  justify-content: space-between !important;
  gap: 8px !important;
}
body.true-dark-mode #mylist-view .card-action-row.has-next-episode,
#mylist-view .card-action-row.has-next-episode {
  justify-content: space-between !important;
  gap: 8px !important;
  padding-left: 14px !important;
  padding-right: 18px !important;
}
body.true-dark-mode #mylist-view .card-action-row.has-watch-priority .card-footer-actions,
#mylist-view .card-action-row.has-watch-priority .card-footer-actions,
body.true-dark-mode #mylist-view .card-action-row.has-next-episode .card-footer-actions,
#mylist-view .card-action-row.has-next-episode .card-footer-actions {
  justify-content: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
body.true-dark-mode #mylist-view .watchlist-priority-slot {
  background: rgba(8,8,12,0.88) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: rgba(232,227,243,0.72) !important;
}
body.true-dark-mode #mylist-view .watchlist-priority-input {
  color: #fbbf24 !important;
}
body.true-dark-mode #mylist-view .card-right-controls,
#mylist-view .card-right-controls {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
}
/* watch-together-slot sits naturally inline inside card-right-controls */
body.true-dark-mode #mylist-view .card-right-controls .watch-together-slot,
#mylist-view .card-right-controls .watch-together-slot {
  margin-left: 0 !important;
}

/* v605: import activity card ? 200 weight less */
.import-activity-title {
  font-weight: 700 !important;  /* was 900 */
}
.import-activity-status {
  font-weight: 550 !important;  /* was 750 */
}

/* v601: 9px gap between episode count/progress and star rating */
body.true-dark-mode #mylist-view .rating-area,
#mylist-view .rating-area {
  margin-top: 9px !important;
}

/* Rating label hidden ? stars are self-explanatory */
body.true-dark-mode #mylist-view .rating-label,
body.true-dark-mode #mylist-view .card .rating-label,
#mylist-view .rating-label,
#mylist-view .card .rating-label {
  display: none !important;
}
/* Episodes button ? 11px 500 */
/* v10.720: Episodes pill text shrunk to match the 27px button shrink in
   01-mylists-cards-episodes.css. This rule has (1,4,0) specificity vs the
   01-file's (1,3,0) so it's the actual cascade winner on production
   (every user is on body.true-dark-mode). Was 11px/500, now 10px/500. */
body.true-dark-mode #mylist-view .card-action-row .ep-toggle-bar.card-footer-btn,
body.true-dark-mode #mylist-view .card-action-row .ep-toggle-bar.card-footer-btn span:first-child {
  font-size: 10px !important;
  font-weight: 500 !important;
}

/* v602: my-lists title cards 0.3 shades darker (#272727 ? #242424) */
body.true-dark-mode #mylist-view .card,
body.true-dark-mode #mylist-view .show-card,
body.true-dark-mode #mylist-view .game-library-card {
  background: #242424 !important;
}

/* =============================================================
   v549: Friends list ? modern dark palette to match my-lists.
   Cards #212121 on the #0E0E0E page background, hairline border,
   no glow.
   ============================================================= */
body.true-dark-mode.shelfd-friends-list-mode #community-view {
  background: #0E0E0E !important;
}
body.true-dark-mode .friend-list-card,
body.true-dark-mode .friends-page .friend-list-card,
body.true-dark-mode #community-view .friend-list-card {
  background: #212121 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
body.true-dark-mode .friend-list-card .user-card-avatar,
body.true-dark-mode #community-view .friend-list-card .user-card-avatar {
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}
body.true-dark-mode .friend-list-card .friend-card-name,
body.true-dark-mode .friend-list-card .user-card-name,
body.true-dark-mode #community-view .friend-list-card .user-card-name {
  color: #ffffff !important;
  font-weight: 600 !important;
}
body.true-dark-mode .friend-list-card .friend-card-handle,
body.true-dark-mode .friend-list-card .user-card-handle,
body.true-dark-mode #community-view .friend-list-card .user-card-handle {
  color: rgba(255,255,255,0.55) !important;
}
/* Friend request rows match the same surface */
body.true-dark-mode .friend-request-card,
body.true-dark-mode #community-view .friend-request-card {
  background: #212121 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

/* v551: discover card ? shorter vertically, rating under poster top-right */

/* Narrower aspect ratio = shorter poster */
body.true-dark-mode #discover-view .discover-poster {
  aspect-ratio: 3 / 4 !important;
}

/* Smaller card body */
body.true-dark-mode #discover-view .discover-card-body,
body.true-dark-mode #discover-view .discover-card.games-discover-card .discover-card-body {
  min-height: 72px !important;
  padding: 6px 8px 8px !important;
  gap: 3px !important;
}

/* Rating ? sits at top-right of card body, below the poster */
body.true-dark-mode .discover-card .discover-card-rating {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 3px !important;
  width: 100% !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #ffffff !important;
  pointer-events: none !important;
}
body.true-dark-mode .discover-card .discover-card-rating-star {
  color: #f2c94c !important;
  font-size: 11px !important;
}
body.true-dark-mode .discover-card .discover-card-rating-value {
  color: rgba(255,255,255,0.85) !important;
}

/* =============================================================
   v567: Discover card body ? clean 3-line layout
   Line 1: title (left)  ? rating (right)
   Line 2: genre
   Line 3: Released / Releasing [date]
   ============================================================= */

/* Card body gets tight, minimal padding ? let the poster dominate */
.discover-card .discover-card-body {
  padding: 7px 8px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  min-height: 0 !important;
}

/* Hide elements we've replaced / no longer want in the compact body */
.discover-card .discover-card-overview,
.discover-card .discover-card-context,
.discover-card .discover-card-meta,
.discover-card .discover-card-heading-row {
  display: none !important;
}

/* Line 1: rating (own line, left-aligned) */
.discover-card .dc-rating {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.82) !important;
  white-space: nowrap !important;
  margin: 0 0 3px !important;
}
.discover-card .dc-rating-star {
  color: #f2c94c !important;
  font-size: 10px !important;
  line-height: 1 !important;
}
/* Line 2: title */
.discover-card .discover-card-title {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  /* v787: font-size removed ? controlled by #discover-view .discover-card-title
     in 14-live-update-discover-controls.css (specificity 0,1,1, wins). */
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: #ffffff !important;
  font-family: 'S?hne', 'DM Sans', sans-serif !important;
  letter-spacing: -0.01em !important;
  text-align: left !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  margin: 0 0 3px !important;
}
.discover-card .discover-title-profile-btn {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Line 2: genre */
.discover-card .discover-card-genre {
  font-size: 10px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.58) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.2 !important;
  margin: 0 0 3px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

/* Line 3: Released / Releasing date */
.discover-card .dc-release-line {
  font-size: 10px !important;
  font-weight: 500 !important;
  color: #C9A84C !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Hide the close-btn in the normal non-expanded state */
.discover-card:not(.discover-card-expanded) .discover-close-btn {
  display: none !important;
}

/* Remove old absolute-positioned rating chip from poster (v549 remnant) */
.discover-card .discover-poster .discover-card-rating {
  display: none !important;
}

/* =============================================================
   v576: Discover page uses S?hne (Sohne) for every text element.
   Applies to the main Movies & TV hub, Anime hub, and Games hub
   AND the full-page category view. The browser auto-picks the
   matching weight from the @font-face declarations in
   sohne-fonts.css based on each element's font-weight.
   ============================================================= */
#discover-view,
#discover-view *,
#anime-discover-view,
#anime-discover-view *,
#games-discover-view,
#games-discover-view *,
#discover-category-full-page,
#discover-category-full-page *,
#mylist-view,
#mylist-view *,
#mylist-header,
#mylist-header *,
#community-view,
#community-view *,
.activity-page,
.activity-page *,
.friends-list-view,
.friends-list-view *,
#friends-list-view,
#friends-list-view *,
#requests-view,
#requests-view *,
#activity-tab-view,
#activity-tab-view *,
.screenlist-stacked-activity-page,
.screenlist-stacked-activity-page * {
  font-family: 'Sohne', 'S?hne', 'DM Sans', system-ui, sans-serif !important;
}

/* =============================================================
   v625: Search bottom-nav button + full-page search overlay
   ============================================================= */

/* v626: Force bottom nav to single row of 5 (Discover / Activity / ?? / Friends / My Lists).
   The parent used flex:1 with bigger padding/font, which on narrow screens pushed
   "My Lists" to a second row. Switch to a true 5-column grid and tighten the type. */
@media (max-width: 700px) {
  .mobile-bottom-nav,
  #mobile-bottom-nav {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    flex-wrap: nowrap !important;
    width: min(calc(100vw - 16px), 580px) !important;
    max-width: 580px !important;
    gap: 0 !important;
    padding: 6px 6px !important;
    /* v653: glassy frosted blur ? stands out slightly from the page
       behind it without overpowering the content. */
    /* v950: was `blur(22px) saturate(1.4)` — capped to 10px and dropped saturate (2× GPU op).
       Bumped rgba alpha from 0.62 -> 0.72 so the bottom nav still reads opaque on iPhone. */
    background:
      linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.045) 46%, rgba(255,255,255,0.02)),
      radial-gradient(circle at 50% 0%, rgba(196,181,253,0.16), transparent 58%),
      rgba(18, 20, 24, 0.42) !important;
    backdrop-filter: blur(24px) saturate(170%) brightness(1.08) !important;
    -webkit-backdrop-filter: blur(24px) saturate(170%) brightness(1.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.24),
      inset 0 -1px 0 rgba(255,255,255,0.06),
      0 18px 48px rgba(0, 0, 0, 0.42),
      0 0 0 1px rgba(196,181,253,0.06) !important;
  }
  .mobile-bottom-nav .main-nav-btn,
  #mobile-bottom-nav .main-nav-btn {
    flex: initial !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 8px 2px !important;
    font-size: 12.5px !important;  /* v653: +1px (was 11.5) */
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
  }
  .mobile-bottom-nav #mobile-nav-mylist,
  #mobile-bottom-nav #mobile-nav-mylist {
    font-size: 12.5px !important;
    font-weight: 700 !important;
  }
}
/* v653: light-mode glass tint ? keeps the same frosted look on a
   warmer background. */
body.light-mode .mobile-bottom-nav,
body.light-mode #mobile-bottom-nav {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.32)),
    radial-gradient(circle at 50% 0%, rgba(120,90,200,0.12), transparent 58%),
    rgba(245, 243, 238, 0.56) !important;
  border-color: rgba(255, 255, 255, 0.58) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.82),
    inset 0 -1px 0 rgba(120,90,200,0.08),
    0 14px 34px rgba(0, 0, 0, 0.12) !important;
}

/* Center search button ? sits in the middle of the 5-col grid */
body .mobile-bottom-nav .nav-search-btn,
body #mobile-bottom-nav .nav-search-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 0 !important;
  color: #8ff2b8 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 400 !important;
  grid-column: 3 !important;
  order: 3 !important;
}
body .mobile-bottom-nav .nav-search-btn.active,
body .mobile-bottom-nav .nav-search-btn[aria-pressed="true"] {
  color: #b7ffd4 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
.mobile-bottom-nav .bottom-nav-icon-btn,
#mobile-bottom-nav .bottom-nav-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(231, 226, 244, 0.72) !important;
  -webkit-tap-highlight-color: transparent;
}
.mobile-bottom-nav .bottom-nav-icon-btn.active,
#mobile-bottom-nav .bottom-nav-icon-btn.active {
  color: #ffffff !important;
}
.mobile-bottom-nav #mobile-nav-mylist,
#mobile-bottom-nav #mobile-nav-mylist {
  color: rgba(231, 226, 244, 0.72) !important;
}
.mobile-bottom-nav #mobile-nav-mylist.active,
#mobile-bottom-nav #mobile-nav-mylist.active {
  color: #ffffff !important;
}
.bottom-nav-icon {
  display: block !important;
  width: 23px !important;
  height: 23px !important;
  flex: 0 0 auto !important;
  background: currentColor !important;
  opacity: 0.96;
  pointer-events: none !important;
  transform: translateZ(0);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.bottom-nav-icon-discover {
  -webkit-mask-image: url('/bottom-nav-icons/discover.svg');
  mask-image: url('/bottom-nav-icons/discover.svg');
}
.bottom-nav-icon-activity {
  -webkit-mask-image: url('/bottom-nav-icons/activity.svg');
  mask-image: url('/bottom-nav-icons/activity.svg');
}
.bottom-nav-icon-search {
  width: 23px !important;
  height: 23px !important;
  -webkit-mask-image: url('/bottom-nav-icons/circle-plus.svg');
  mask-image: url('/bottom-nav-icons/circle-plus.svg');
}
.bottom-nav-icon-friends {
  -webkit-mask-image: url('/bottom-nav-icons/friends.svg');
  mask-image: url('/bottom-nav-icons/friends.svg');
}
.bottom-nav-icon-mylist {
  width: 24px !important;
  height: 24px !important;
  -webkit-mask-image: url('/bottom-nav-icons/my-lists.svg?v=11275_splash_star_nav');
  mask-image: url('/bottom-nav-icons/my-lists.svg?v=11275_splash_star_nav');
}
body .mobile-bottom-nav .nav-search-btn,
body #mobile-bottom-nav .nav-search-btn {
  color: #8ff2b8 !important;
}
body .mobile-bottom-nav .nav-search-btn.active,
body .mobile-bottom-nav .nav-search-btn[aria-pressed="true"],
body #mobile-bottom-nav .nav-search-btn.active,
body #mobile-bottom-nav .nav-search-btn[aria-pressed="true"] {
  color: #b7ffd4 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
body.light-mode .mobile-bottom-nav .nav-search-btn,
body.light-mode #mobile-bottom-nav .nav-search-btn {
  color: #047857 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
body.light-mode .mobile-bottom-nav .nav-search-btn.active,
body.light-mode .mobile-bottom-nav .nav-search-btn[aria-pressed="true"],
body.light-mode #mobile-bottom-nav .nav-search-btn.active,
body.light-mode #mobile-bottom-nav .nav-search-btn[aria-pressed="true"] {
  color: #065f46 !important;
}
body.light-mode .mobile-bottom-nav .bottom-nav-icon-btn,
body.light-mode #mobile-bottom-nav .bottom-nav-icon-btn {
  color: rgba(62, 50, 90, 0.70) !important;
}
body.light-mode .mobile-bottom-nav .bottom-nav-icon-btn.active,
body.light-mode #mobile-bottom-nav .bottom-nav-icon-btn.active {
  color: #4c1d95 !important;
}
body.light-mode .mobile-bottom-nav #mobile-nav-mylist,
body.light-mode #mobile-bottom-nav #mobile-nav-mylist {
  color: rgba(62, 50, 90, 0.70) !important;
}
body.light-mode .mobile-bottom-nav #mobile-nav-mylist.active,
body.light-mode #mobile-bottom-nav #mobile-nav-mylist.active {
  color: #4c1d95 !important;
}
.nav-search-icon {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 1.6 !important;
  flex-shrink: 0 !important;
  pointer-events: none !important;
}

/* Full-page search overlay ? GPU-composited 120Hz spring slide.
   v628 fix: when fully open we remove the transform entirely so iOS Safari
   will bring up the on-screen keyboard for the search input. (iOS suppresses
   the keyboard when an input's ancestor has a non-identity transform.) */
.shelfd-search-page {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2100 !important;
  background: #181c20 !important;
  transform: translateY(100%) !important;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: transform !important;
  visibility: hidden !important;
  pointer-events: none !important;
  padding: max(var(--shelfd-safe-top, 0px), 0px) 0 max(env(safe-area-inset-bottom, 0px), 0px) !important;
}

/* v10.789: BODY LOCK while the universal search overlay is open.
   iOS WKWebView leaks the underlying body's scroll position into the
   overlay's `.shelfd-search-page-inner` (overflow-y: auto) when the
   overlay opens. Result: scrollTop ≈ body.scrollY → the non-sticky
   "+Add To Shelf" header at the top of the inner is pushed above the
   visible area while the sticky topbar appears anchored, so it looks
   like the header was never drawn. The fix is the same shape as the
   DM page body lock (v10.782): position:fixed the body during the
   overlay's life so iOS has no body scroll to bleed from. The negative
   `top` keeps the underlying page visually anchored at its pre-open
   scroll offset; JS saves and restores window.scrollY on open/close. */
body.shelfd-search-page-open {
  overflow: hidden;
  overscroll-behavior: none;
  position: fixed;
  top: var(--search-page-saved-scrollY, 0px);
  left: 0;
  right: 0;
  width: 100%;
}
.shelfd-search-page.is-open {
  transform: none !important;
  visibility: visible !important;
  pointer-events: auto !important;
  /* drop the GPU layer once we're at rest so iOS PWA stops treating
     descendants as living inside a transformed compositing layer */
  will-change: auto !important;
}
.shelfd-search-page.is-closing {
  visibility: visible !important;
  pointer-events: none !important;
  will-change: transform !important;
}
.shelfd-search-page-inner {
  width: 100% !important;
  height: 100% !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* =============================================================
   v571: Movies & TV combined hub ? filter pill + client-side filter
   ============================================================= */

.discover-mixed-filter-row {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  display: flex !important;
  gap: 6px !important;
  padding: 8px 0 12px !important;
  margin: 0 0 8px !important;
  background: inherit !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.discover-mixed-filter-btn {
  flex: 0 0 auto !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  background: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.78) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease !important;
}
.discover-mixed-filter-btn:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,0.08) !important;
}
.discover-mixed-filter-btn.active {
  background: #A78BFA !important;
  border-color: #A78BFA !important;
  color: #0e0e0e !important;
}

/* Light-mode flavour */
body.light-mode .discover-mixed-filter-btn {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: #181818 !important;
}
body.light-mode .discover-mixed-filter-btn.active {
  background: #181818 !important;
  border-color: #181818 !important;
  color: #f7f3ea !important;
}

/* Client-side filtering: hide cards whose data-media-type doesn't match */
#discover-view.discover-filter-movie .discover-card[data-media-type="tv"] { display: none !important; }
#discover-view.discover-filter-tv    .discover-card[data-media-type="movie"] { display: none !important; }
/* When filter=tv, hide movie-only sections entirely */
#discover-view.discover-filter-tv .discover-section-movies-only { display: none !important; }

/* v607 final cascade: Activity/Shared Watch tab contrast + friend name weight */
body.main-tab-community:not(.shelfd-friends-list-mode) #activity-tab-view .activity-shared-watch-pill.activity-feed-pill,
body.main-tab-community:not(.shelfd-friends-list-mode) #activity-tab-view .activity-shared-watch-pill.shared-watch-tab-pill,
body.main-tab-community:not(.shelfd-friends-list-mode) #activity-tab-view .activity-shared-watch-pill.activity-feed-pill.active,
body.main-tab-community:not(.shelfd-friends-list-mode) #activity-tab-view .activity-shared-watch-pill.shared-watch-tab-pill.active {
  font-size: 14px !important;
}

body.main-tab-community:not(.shelfd-friends-list-mode) #activity-tab-view .activity-shared-watch-pill.activity-feed-pill.secondary,
body.main-tab-community:not(.shelfd-friends-list-mode) #activity-tab-view .activity-shared-watch-pill.shared-watch-tab-pill.secondary {
  color: rgba(255,255,255,0.51) !important;
}

/* v10.136: keep the three Activity section tabs on one clean mobile row. */
body.main-tab-community:not(.shelfd-friends-list-mode) #activity-tab-view .activity-feed-header {
  width: 100% !important;
  align-items: center !important;
}

body.main-tab-community:not(.shelfd-friends-list-mode) #activity-tab-view .activity-feed-actions {
  width: min(100%, 680px) !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: end !important;
  justify-content: stretch !important;
  gap: clamp(4px, 1.4vw, 10px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}

body.main-tab-community:not(.shelfd-friends-list-mode) #activity-tab-view .activity-shared-watch-pill,
body.main-tab-community:not(.shelfd-friends-list-mode) #activity-tab-view .activity-shared-watch-pill.activity-feed-pill,
body.main-tab-community:not(.shelfd-friends-list-mode) #activity-tab-view .activity-shared-watch-pill.notifications-tab-pill,
body.main-tab-community:not(.shelfd-friends-list-mode) #activity-tab-view .activity-shared-watch-pill.shared-watch-tab-pill,
body.main-tab-community:not(.shelfd-friends-list-mode) #activity-tab-view .activity-shared-watch-pill.activity-feed-pill.active,
body.main-tab-community:not(.shelfd-friends-list-mode) #activity-tab-view .activity-shared-watch-pill.notifications-tab-pill.active,
body.main-tab-community:not(.shelfd-friends-list-mode) #activity-tab-view .activity-shared-watch-pill.shared-watch-tab-pill.active {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 34px !important;
  padding: 0 2px 7px !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: clamp(11px, 3.05vw, 13px) !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.main-tab-community:not(.shelfd-friends-list-mode) #activity-tab-view .activity-shared-watch-pill.active {
  border-bottom-color: rgba(167,139,250,0.9) !important;
}

@media (max-width: 380px) {
  body.main-tab-community:not(.shelfd-friends-list-mode) #activity-tab-view .activity-feed-actions {
    gap: 3px !important;
  }

  body.main-tab-community:not(.shelfd-friends-list-mode) #activity-tab-view .activity-shared-watch-pill,
  body.main-tab-community:not(.shelfd-friends-list-mode) #activity-tab-view .activity-shared-watch-pill.activity-feed-pill,
  body.main-tab-community:not(.shelfd-friends-list-mode) #activity-tab-view .activity-shared-watch-pill.notifications-tab-pill,
  body.main-tab-community:not(.shelfd-friends-list-mode) #activity-tab-view .activity-shared-watch-pill.shared-watch-tab-pill {
    font-size: 10.6px !important;
    letter-spacing: -0.045em !important;
  }
}

body.main-tab-community:not(.shelfd-friends-list-mode) #activity-tab-view .shared-watch-dashboard-people strong,
body.main-tab-community:not(.shelfd-friends-list-mode) #activity-tab-view .discover-friend-card-name,
body.main-tab-community:not(.shelfd-friends-list-mode) #activity-tab-view .discover-friends-modal-name {
  color: #ffffff !important;
  font-weight: 300 !important;
}

/* v609: Full-page user profile typography uses Sohne, capped at 600 weight. */
#profile-page,
#profile-page *:not(svg):not(path) {
  font-family: 'Sohne', 'S?hne', 'DM Sans', system-ui, sans-serif !important;
}

#profile-page *:not(svg):not(path) {
  font-weight: 400 !important;
}

#profile-page :is(
  .profile-topbar-title,
  .profile-settings-card-title,
  .profile-name-input,
  .profile-section-title,
  .profile-stat-value,
  .profile-stat-value *,
  .profile-card-lists-btn,
  .profile-creator-badge,
  .profile-creator-badge *,
  .profile-favorite-title,
  .profile-media-title,
  .profile-group-stat-value,
  .profile-fav-row-title,
  .profile-fav-name,
  .profile-fav-rating,
  .profile-picker-title,
  .profile-picker-selected-title,
  .profile-profile-display-name,
  .profile-link-field label,
  .profile-rating-option-copy strong,
  .profile-save-btn,
  .profile-share-btn,
  .profile-back-btn,
  .profile-mini-btn,
  .profile-social-count strong,
  .profile-social-counts strong,
  strong,
  b
) {
  font-weight: 600 !important;
}

#profile-page :is(
  .profile-topbar-sub,
  .profile-settings-card-sub,
  .profile-section-sub,
  .profile-stat-label,
  .profile-group-stat-label,
  .profile-fav-row-source,
  .profile-fav-empty,
  .profile-bio-input,
  .profile-rating-option-copy small,
  .theme-disabled-note,
  small
) {
  font-weight: 300 !important;
}

/* v612: Full-page user profile gold accent color */
#profile-page :is(
  .profile-eyebrow,
  .profile-creator-badge,
  .profile-creator-badge *,
  .profile-card-lists-btn,
  .profile-fav-rating,
  .profile-fav-rating *,
  .profile-fav-rating-star,
  .profile-rating-star,
  .profile-stat-value-star,
  .profile-stat-label-star,
  .profile-fav-empty-rating,
  .profile-fav-empty-rating *,
  .profile-picker-library-note,
  .profile-manual-rating,
  .profile-db-rating,
  .profile-character-editor-kicker,
  .screenlist-gold-star-icon,
  [data-profile-db-rating-preview],
  [data-profile-db-rating-preview] *,
  [data-manual-rating-preview],
  [data-manual-rating-preview] *
) {
  color: #C9A84C !important;
}

#profile-page :is(
  .profile-card-lists-btn,
  .profile-character-crop-mask
) {
  border-color: #C9A84C !important;
}

#profile-page :is(
  .profile-card-lists-btn:hover,
  .profile-character-search-tile:hover
) {
  border-color: #C9A84C !important;
}
/* When a section's grid is empty after filtering, hide its empty shell */
#discover-view.discover-filter-movie .discover-grid:not(:has(.discover-card[data-media-type="movie"])),
#discover-view.discover-filter-tv .discover-grid:not(:has(.discover-card[data-media-type="tv"])) {
  /* Don't actually hide ? let "Show more" still work ? but trim padding */
  min-height: 0 !important;
}

/* v613: Keep profile poster editor as the final 80% bottom sheet after contrast overrides. */
html.profile-character-editor-open,
body.profile-character-editor-open {
  overflow: hidden !important;
  overscroll-behavior: contain !important;
}

body.profile-character-editor-open #profile-page {
  overflow: hidden !important;
}

.profile-character-editor-overlay,
.profile-character-editor-overlay.open,
body.light-mode .profile-character-editor-overlay,
body.light-mode .profile-character-editor-overlay.open {
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 !important;
}

.profile-character-editor-modal,
body.light-mode .profile-character-editor-modal {
  width: 100% !important;
  max-width: 100% !important;
  height: 80dvh !important;
  max-height: 80dvh !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 24px 24px 0 0 !important;
  opacity: 1 !important;
  /* v616: NO static transform ? keyframes own the full timeline. */
  animation: profilePosterSheetInFinal 0.28s cubic-bezier(0.22, 0.82, 0.24, 1) forwards !important;
  /* v617: overflow-y scroll so iOS can scroll the input into view and
     raise the keyboard. overflow:hidden blocked keyboard on iOS. */
  overflow: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

@keyframes profilePosterSheetInFinal {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@media (min-width: 760px) {
  .profile-character-editor-modal,
  body.light-mode .profile-character-editor-modal {
    width: min(560px, 100vw) !important;
    max-width: 560px !important;
  }
}

.profile-character-preview-row,
.profile-character-section,
body.light-mode .profile-character-preview-row,
body.light-mode .profile-character-section {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.profile-character-field-input,
.profile-character-search-btn,
.profile-character-upload-btn,
.profile-character-search-empty,
body.light-mode .profile-character-field-input,
body.light-mode .profile-character-search-btn,
body.light-mode .profile-character-upload-btn,
body.light-mode .profile-character-search-empty {
  border: 0 !important;
  box-shadow: none !important;
}

/* v614: Floating share icon on each profile top-three card. */
#profile-page .profile-fav-share-btn,
body.light-mode #profile-page .profile-fav-share-btn {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 300 !important;
  opacity: 1 !important;
}

#profile-page .profile-fav-share-btn svg,
body.light-mode #profile-page .profile-fav-share-btn svg {
  color: #ffffff !important;
  stroke: currentColor !important;
}

#profile-page .profile-fav-shared-focus,
body.light-mode #profile-page .profile-fav-shared-focus {
  box-shadow: 0 0 0 1px rgba(201,168,76,0.84), 0 0 0 5px rgba(201,168,76,0.18), 0 18px 36px rgba(0,0,0,0.32) !important;
}

/* v626: Activity feed progressive load-more button */
.activity-feed-load-more-wrap {
  display: flex;
  justify-content: center;
  padding: 18px 16px 28px;
}
.activity-feed-load-more-btn {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.01em;
  padding: 11px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease, opacity 160ms ease;
  will-change: transform;
}
.activity-feed-load-more-btn:hover {
  background: rgba(255,255,255,0.10);
}
.activity-feed-load-more-btn:active {
  transform: scale(0.97);
}
.activity-feed-load-more-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
body.light-mode .activity-feed-load-more-btn {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.12);
  color: #111;
}
body.light-mode .activity-feed-load-more-btn:hover {
  background: rgba(0,0,0,0.08);
}

/* =============================================================
   v628: Search hub ? full UI inside .shelfd-search-page-inner.
   IMDb / Letterboxd-inspired, Shelfd-native palette.
   Animation rules: transform + opacity only. Stagger via per-row
   custom property --shelfd-row-delay.
   ============================================================= */

.shelfd-search-page-inner {
  display: flex !important;
  flex-direction: column !important;
  background: #181c20 !important;
  color: #ffffff !important;
  font-family: 'Sohne', 'DM Sans', system-ui, -apple-system, sans-serif !important;
  padding-top: 18px !important;
}

/* v10.758: "+Add To Shelf" identity header above the search bar */
.shelfd-search-page-header {
  padding: 0 20px 10px;
  flex-shrink: 0;
  text-align: center;
}
.shelfd-search-page-title {
  font-size: 18px;
  font-weight: 500;
  color: #f5f5f7;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* ---------- Sticky top bar ---------- */
.shelfd-search-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 8px;
  background: linear-gradient(180deg, #181c20 0%, rgba(24,28,32,0.92) 88%, rgba(24,28,32,0) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.shelfd-search-back-btn {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1), background 160ms ease;
  will-change: transform;
}
.shelfd-search-back-btn:hover { background: rgba(255,255,255,0.09); }
.shelfd-search-back-btn:active { transform: scale(0.92); }
.shelfd-search-back-btn svg { width: 18px; height: 18px; }

.shelfd-search-input-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(196,181,253,0.12);
  border-radius: 999px;
  padding: 0 10px 0 38px;
  height: 40px;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 200ms ease;
}
/* v10.70: focus-within visual feedback removed per user — was adding a
   lavender `box-shadow: 0 0 0 3px rgba(139,92,246,0.16)` ring (the
   "rectangular box" the user saw around the search pill on tap), plus a
   subtle background/border shift. Caret + keyboard already make focus
   obvious; no extra outline needed.

   v10.71: turns out that wasn't the only ring. The `<input>` itself also
   inherited a lavender 3px ring from two GLOBAL rules in 05-messages-early-
   polish.css:
     - L1780  `input:focus, .comment-textarea:focus { box-shadow: 0 0 0 3px rgba(139,92,246,0.12); ... }`
     - L2373  `*:focus-visible { box-shadow: 0 0 0 3px rgba(139,92,246,0.22), 0 0 0 1px rgba(196,181,253,0.42); ... }`
   The shadow is rectangular (the <input> has border-radius: 0), but the
   surrounding wrap is a pill (border-radius: 999px), so the shadow extends
   past the pill curves and reads as a "rectangular box around the search
   field" — exactly what the user reported.
   Three targeted overrides below kill ALL focus chrome on the search input
   (selector specificity 0,3,2 > the global 0,1,1 and 0,1,0). */
body.true-dark-mode .shelfd-search-input:focus,
body.true-dark-mode .shelfd-search-input:focus-visible,
body.true-dark-mode .shelfd-search-input:focus-within {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
}
.shelfd-search-input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: rgba(232,227,243,0.55);
  pointer-events: none;
}
.shelfd-search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.01em;
  font-family: inherit;
  padding: 0;
}
.shelfd-search-input::placeholder { color: rgba(232,227,243,0.42); }
.shelfd-search-input::-webkit-search-decoration,
.shelfd-search-input::-webkit-search-cancel-button { display: none; }
.shelfd-search-clear-btn {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.10);
  border: 0;
  color: #ffffff;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 140ms ease, background 160ms ease;
}
.shelfd-search-clear-btn:hover { background: rgba(255,255,255,0.18); }
.shelfd-search-clear-btn:active { transform: scale(0.88); }
.shelfd-search-clear-btn svg { width: 12px; height: 12px; }

.shelfd-search-filter-btn.discover-universal-search-filter-btn {
  flex: 0 0 auto;
  height: 40px;
  min-height: 40px;
  width: auto;
  min-width: 78px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.shelfd-search-filter-btn.discover-universal-search-filter-btn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* ---------- Filter chips ----------
   v646: hidden by default; .shelfd-search-chips--visible appears when the
   search input is focused or has a query. Chips fill the width evenly so
   all 5 fit on a single row without scroll on mobile. */
.shelfd-search-chips {
  display: none;
  gap: 5px;
  padding: 0 12px 12px;
  width: 100%;
  overflow: visible;
  /* Smooth height/opacity transition on appear */
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1), transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.shelfd-search-chips.shelfd-search-chips--visible {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}
.shelfd-search-chip {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 0;
  min-width: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.78);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 7px 6px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1), background 160ms ease, color 160ms ease, border-color 160ms ease;
  will-change: transform;
}
.shelfd-search-chip:hover { background: rgba(255,255,255,0.07); color: #ffffff; }
.shelfd-search-chip:active { transform: scale(0.96); }
.shelfd-search-chip.active {
  background: rgba(139,92,246,0.18);
  border-color: rgba(196,181,253,0.42);
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(139,92,246,0.15) inset;
}

/* ---------- Body region ---------- */
.shelfd-search-body {
  flex: 1;
  padding: 4px 12px 120px;
}

/* ---------- Sections (recents, browse, trending) ---------- */
.shelfd-search-section { margin-bottom: 22px; }
.shelfd-search-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 6px 4px 10px;
}
.shelfd-search-section-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(232,227,243,0.66);
}
.shelfd-search-section-meta {
  font-size: 11px;
  color: rgba(232,227,243,0.42);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.shelfd-search-section-action {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: rgba(196,181,253,0.78);
  letter-spacing: 0.02em;
  cursor: pointer;
  padding: 4px 6px;
  margin: -4px -6px;
}
.shelfd-search-section-action:hover { color: #c4b5fd; }

/* v10.760: Recent searches — vertical stack, plain text, no pill chrome */
.shelfd-search-recent-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.shelfd-search-recent-chip {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: rgba(235,232,244,0.78);
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.005em;
  padding: 10px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  text-align: left;
  transition: color 120ms ease;
}
.shelfd-search-recent-chip:hover { color: #ffffff; background: transparent; }
.shelfd-search-recent-chip:active { color: #ffffff; opacity: 0.7; }
.shelfd-search-recent-chip svg { display: none; }
.shelfd-search-recent-chip span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shelfd-search-browse-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.shelfd-search-browse-card {
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
  border: 1px solid rgba(196,181,253,0.10);
  border-radius: 14px;
  padding: 14px 12px;
  color: #ffffff;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), background 180ms ease, border-color 200ms ease;
  will-change: transform;
}
.shelfd-search-browse-card:hover {
  background: linear-gradient(160deg, rgba(139,92,246,0.10), rgba(139,92,246,0.04));
  border-color: rgba(196,181,253,0.24);
}
.shelfd-search-browse-card:active { transform: scale(0.98); }
.shelfd-search-browse-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(139,92,246,0.10);
  border: 1px solid rgba(196,181,253,0.16);
  color: #c4b5fd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.shelfd-search-browse-icon svg { width: 17px; height: 17px; }
.shelfd-search-browse-card:hover .shelfd-search-browse-icon {
  background: rgba(139,92,246,0.18);
  border-color: rgba(196,181,253,0.32);
  color: #ddd6fe;
}
.shelfd-search-browse-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.005em;
}
body.light-mode .shelfd-search-browse-icon {
  background: rgba(139,92,246,0.10);
  border-color: rgba(120,90,200,0.20);
  color: #6d4dc7;
}

.shelfd-search-trending-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 2px 0 10px;
  scrollbar-width: none;
}
.shelfd-search-trending-row::-webkit-scrollbar { display: none; }
.shelfd-search-trending-card {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
  width: 104px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scroll-snap-align: start;
  font-family: inherit;
  color: #ffffff;
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.shelfd-search-trending-card:hover { transform: translateY(-2px); }
.shelfd-search-trending-card:active { transform: scale(0.97); }
.shelfd-search-trending-card img,
.shelfd-search-trending-card-placeholder {
  width: 104px;
  height: 156px;
  object-fit: cover;
  border-radius: 9px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(196,181,253,0.10);
  display: block;
}
.shelfd-search-trending-card span {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.25;
  color: rgba(232,227,243,0.84);
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shelfd-search-trending-skeleton {
  flex: 0 0 auto;
  width: 104px;
  height: 156px;
  border-radius: 9px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.07), rgba(255,255,255,0.04));
  background-size: 200% 100%;
  animation: shelfdSearchShimmer 1.4s ease-in-out infinite;
}

/* ---------- Result rows ---------- */
.shelfd-search-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.shelfd-search-row {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 10px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: #ffffff;
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), background 180ms ease, border-color 200ms ease;
  will-change: transform, opacity;
  opacity: 0;
  transform: translateY(8px);
  animation: shelfdSearchRowIn 320ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--shelfd-row-delay, 0ms);
}
.shelfd-search-row:hover {
  background: rgba(139,92,246,0.06);
  border-color: rgba(196,181,253,0.18);
}
.shelfd-search-row:active { transform: scale(0.99); }
.shelfd-search-row-poster {
  width: 64px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  background: #2a2f36;
  border: 1px solid rgba(196,181,253,0.10);
  display: block;
}
.shelfd-search-row-poster--placeholder {
  background: linear-gradient(140deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}
/* v732: Actors filter ? circular avatar, square aspect ratio. */
.shelfd-search-row-poster--person {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  align-self: center;
  object-position: center 20%;
}
/* v10.236: music + artist rows always render the cover/avatar as a 1:1
   square — album art and artist photos should never be cropped to portrait. */
.shelfd-search-row[data-row-kind="music"] .shelfd-search-row-poster,
.shelfd-search-row[data-row-kind="artist"] .shelfd-search-row-poster {
  width: 72px !important;
  height: 72px !important;
  border-radius: 0 !important;
  align-self: center !important;
  object-fit: cover !important;
}
.shelfd-search-row[data-row-kind="artist"] .shelfd-search-row-poster {
  border-radius: 50% !important;
}
.shelfd-search-row-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.shelfd-search-row-title {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* v646: year and type each on their own row beneath the title */
.shelfd-search-row-year {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: rgba(232,227,243,0.66);
}
.shelfd-search-row-type {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
  color: rgba(196,181,253,0.78);
}
.shelfd-search-row-chevron {
  color: rgba(232,227,243,0.30);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 2px;
}
.shelfd-search-row-chevron svg { width: 14px; height: 14px; }
.shelfd-search-load-more-wrap {
  display: flex;
  justify-content: center;
  padding: 14px 0 28px;
}
.shelfd-search-load-more-btn {
  appearance: none;
  -webkit-appearance: none;
  min-width: 132px;
  min-height: 38px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, opacity 180ms ease, transform 160ms ease;
}
.shelfd-search-load-more-btn:active {
  transform: scale(0.98);
}
.shelfd-search-load-more-btn:disabled {
  cursor: default;
  opacity: 0.62;
}

/* ---------- Skeleton rows ---------- */
.shelfd-search-skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.shelfd-search-skeleton-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
}
.shelfd-search-skeleton-poster {
  width: 64px; height: 96px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.07), rgba(255,255,255,0.04));
  background-size: 200% 100%;
  animation: shelfdSearchShimmer 1.4s ease-in-out infinite;
}
.shelfd-search-skeleton-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.shelfd-search-skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.07), rgba(255,255,255,0.04));
  background-size: 200% 100%;
  animation: shelfdSearchShimmer 1.4s ease-in-out infinite;
}
.shelfd-search-skeleton-line--title { width: 70%; }
.shelfd-search-skeleton-line--meta  { width: 40%; height: 10px; }

/* ---------- No-results state ---------- */
.shelfd-search-noresults {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 60px 24px 30px;
  color: rgba(232,227,243,0.62);
}
.shelfd-search-noresults svg {
  width: 36px; height: 36px;
  color: rgba(196,181,253,0.34);
  margin-bottom: 12px;
}
.shelfd-search-noresults strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
}
.shelfd-search-noresults p {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  max-width: 280px;
}

/* =============================================================
   v10.145: Full Page Universal Search preset discovery hub.
   Scoped to the bottom-nav search page; uses transform-only right
   slide panels and compact 3-card title grids.
   ============================================================= */

.shelfd-search-page-inner {
  position: relative !important;
  overflow: hidden !important;
}

.shelfd-search-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* v10.215: stop iOS rubber-band from fighting pull-down-to-dismiss
     once the user reaches scrollTop = 0 */
  overscroll-behavior-y: contain;
}

.shelfd-search-preset-section {
  margin: 2px 0 24px;
}

.shelfd-search-preset-hero {
  margin: 2px 0 12px;
  padding: 18px 16px 16px;
  border-radius: 24px;
  border: 1px solid rgba(196,181,253,0.13);
  background:
    radial-gradient(circle at 18% 0%, rgba(196,181,253,0.18), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.026));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.shelfd-search-preset-kicker,
.shelfd-search-preset-panel-heading span,
.shelfd-search-preset-minihead {
  display: block;
  color: #c4b5fd;
  font-family: 'Sohne', 'DM Sans', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.shelfd-search-preset-hero h3 {
  margin: 8px 0 6px;
  color: #fff;
  font-family: 'Sohne', 'DM Sans', system-ui, sans-serif;
  font-size: clamp(24px, 8vw, 34px);
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.shelfd-search-preset-hero p {
  margin: 0;
  color: rgba(232,227,243,0.68);
  font-size: 13px;
  line-height: 1.45;
}

.shelfd-search-preset-list,
.shelfd-search-preset-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shelfd-search-preset-card,
.shelfd-search-preset-option {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 1px solid rgba(196,181,253,0.11);
  background: rgba(255,255,255,0.045);
  color: #fff;
  font-family: 'Sohne', 'DM Sans', system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 150ms cubic-bezier(.22,1,.36,1), border-color 180ms ease, background 180ms ease;
}

.shelfd-search-preset-card {
  min-height: 70px;
  border-radius: 18px;
  padding: 12px 12px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 18px;
  align-items: center;
  gap: 11px;
}

.shelfd-search-preset-card:active,
.shelfd-search-preset-option:active,
.shelfd-search-preset-title-card:active {
  transform: scale(0.985);
}

.shelfd-search-preset-card:hover,
.shelfd-search-preset-option:hover {
  background: rgba(139,92,246,0.10);
  border-color: rgba(196,181,253,0.28);
}

.shelfd-search-preset-card.is-locked {
  background: rgba(255,255,255,0.03);
}

.shelfd-search-preset-icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #d8b4fe;
  background: rgba(139,92,246,0.13);
  border: 1px solid rgba(196,181,253,0.16);
}

.shelfd-search-preset-icon svg,
.shelfd-search-preset-disabled-note svg,
.shelfd-search-preset-locked-state svg {
  width: 20px;
  height: 20px;
}

.shelfd-search-preset-copy,
.shelfd-search-preset-option span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.shelfd-search-preset-title,
.shelfd-search-preset-option strong {
  color: #fff;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.shelfd-search-preset-subtitle,
.shelfd-search-preset-option small {
  color: rgba(232,227,243,0.58);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.28;
}

.shelfd-search-preset-arrow,
.shelfd-search-preset-option-arrow {
  color: rgba(232,227,243,0.36);
  font-size: 24px;
  line-height: 1;
}

.shelfd-search-preset-stack {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  overflow: hidden;
}

.shelfd-search-preset-stack.is-open {
  pointer-events: auto;
}

.shelfd-search-preset-panel {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 0%, rgba(139,92,246,0.15), transparent 38%),
    #05040d;
  transform: translate3d(104%,0,0);
  transition: transform 300ms cubic-bezier(.16,1,.3,1);
  will-change: transform;
  box-shadow: -20px 0 55px rgba(0,0,0,0.34);
}

.shelfd-search-preset-panel.is-active {
  transform: translate3d(0,0,0);
}

.shelfd-search-preset-panel.is-under {
  transform: translate3d(-10%,0,0);
}

.shelfd-search-preset-panel.is-exiting {
  transform: translate3d(104%,0,0);
}

.shelfd-search-preset-panel-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: max(8px, var(--shelfd-safe-top, 0px)) 14px calc(28px + env(safe-area-inset-bottom, 0px));
}

.shelfd-search-preset-panel-topbar {
  z-index: 3;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 4px 0 8px;
  background: linear-gradient(180deg, #05040d 72%, rgba(5,4,13,0));
}

.shelfd-search-preset-back {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(196,181,253,0.12);
  background: rgba(255,255,255,0.055);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.shelfd-search-preset-back svg {
  width: 18px;
  height: 18px;
}

.shelfd-search-preset-panel-heading {
  min-width: 0;
  text-align: center;
}

.shelfd-search-preset-panel-heading strong {
  display: block;
  margin-top: 2px;
  color: #fff;
  font-size: 18px;
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -0.025em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shelfd-search-preset-panel-subtitle {
  margin: 0 4px 14px;
  color: rgba(232,227,243,0.62);
  font-size: 12.5px;
  line-height: 1.45;
  text-align: center;
}

.shelfd-search-preset-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.shelfd-search-preset-minihead {
  margin: 4px 4px 10px;
}

.shelfd-search-preset-option {
  min-height: 58px;
  border-radius: 16px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 18px;
  align-items: center;
  gap: 10px;
}

.shelfd-search-preset-option.is-disabled,
.shelfd-search-preset-option:disabled {
  opacity: 0.52;
  cursor: default;
}

.shelfd-search-preset-disabled-note,
.shelfd-search-preset-locked-state {
  margin-top: 14px;
  border: 1px solid rgba(251,191,36,0.18);
  background: rgba(251,191,36,0.055);
  border-radius: 18px;
  color: rgba(255,244,214,0.92);
}

.shelfd-search-preset-disabled-note {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  gap: 10px;
  padding: 13px;
}

.shelfd-search-preset-disabled-note svg,
.shelfd-search-preset-locked-state svg {
  color: #facc15;
}

.shelfd-search-preset-disabled-note span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.shelfd-search-preset-disabled-note strong,
.shelfd-search-preset-locked-state strong {
  color: #fde68a;
  font-size: 13px;
  font-weight: 800;
}

.shelfd-search-preset-disabled-note small,
.shelfd-search-preset-locked-state p {
  color: rgba(255,244,214,0.66);
  font-size: 12px;
  line-height: 1.38;
}

.shelfd-search-preset-locked-state {
  min-height: 240px;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
}

.shelfd-search-preset-locked-state svg {
  width: 34px;
  height: 34px;
}

.shelfd-search-preset-locked-state p {
  margin: 0;
  max-width: 270px;
}

.shelfd-search-preset-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 9px;
  padding: 2px 0 10px;
}

.shelfd-search-preset-title-card {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: #fff;
  font-family: 'Sohne', 'DM Sans', system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
  transition: transform 150ms cubic-bezier(.22,1,.36,1);
}

.shelfd-search-preset-poster {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(196,181,253,0.12);
}

.shelfd-search-preset-poster img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.shelfd-search-preset-rating {
  position: absolute;
  left: 5px;
  bottom: 5px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 19px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.72);
  color: #facc15;
  font-size: 10px;
  font-weight: 850;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.shelfd-search-preset-card-title {
  display: block;
  min-width: 0;
  margin-top: 6px;
  color: rgba(255,255,255,0.92);
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.18;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shelfd-search-preset-card-meta {
  display: block;
  min-width: 0;
  margin-top: 2px;
  color: rgba(232,227,243,0.48);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shelfd-search-preset-empty-state {
  margin: 42px auto;
  max-width: 280px;
  color: rgba(232,227,243,0.58);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

.shelfd-search-preset-card-skeleton {
  min-width: 0;
}

.shelfd-search-preset-card-skeleton span,
.shelfd-search-preset-card-skeleton i {
  display: block;
  background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.09), rgba(255,255,255,0.05));
  background-size: 200% 100%;
  animation: shelfdSearchShimmer 1.4s ease-in-out infinite;
}

.shelfd-search-preset-card-skeleton span {
  aspect-ratio: 2 / 3;
  border-radius: 8px;
}

.shelfd-search-preset-card-skeleton i {
  width: 82%;
  height: 10px;
  margin-top: 7px;
  border-radius: 999px;
}

/* v10.146: Shelfdline visual pass for bottom-nav search presets.
   Removes the legacy icon-card presentation and matches the flat
   Discovery Search / Filter UI language: text rows, dividers, small chevrons. */
.shelfd-search-preset-hero,
.shelfd-search-preset-icon,
.shelfd-search-preset-linehead,
.shelfd-search-preset-summary,
.shelfd-search-preset-option small {
  display: none !important;
}

.shelfd-search-preset-section {
  margin: 0 0 28px !important;
}

.shelfd-search-preset-linehead {
  margin: 2px 0 0 !important;
  padding: 2px 4px 12px !important;
  border-bottom: 1px solid rgba(232,227,243,0.14) !important;
}

.shelfd-search-preset-linehead span {
  display: block !important;
  color: rgba(248,244,255,0.42) !important;
  font-family: 'Sohne', 'DM Sans', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: 0.18em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.shelfd-search-preset-linehead h3 {
  margin: 8px 0 0 !important;
  color: #ffffff !important;
  font-family: 'Sohne', 'DM Sans', system-ui, sans-serif !important;
  font-size: 26px !important;
  font-weight: 850 !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
}

.shelfd-search-preset-list,
.shelfd-search-preset-options {
  gap: 0 !important;
}

.shelfd-search-preset-card,
.shelfd-search-preset-option {
  min-height: 64px !important;
  padding: 0 4px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(232,227,243,0.13) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 22px !important;
  align-items: center !important;
  gap: 10px !important;
}

.shelfd-search-preset-card:hover,
.shelfd-search-preset-option:hover {
  background: transparent !important;
  border-color: rgba(232,227,243,0.13) !important;
}

.shelfd-search-preset-card:active,
.shelfd-search-preset-option:active {
  transform: translate3d(0,1px,0) !important;
}

.shelfd-search-preset-copy {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: baseline !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.shelfd-search-preset-title,
.shelfd-search-preset-option strong {
  color: #ffffff !important;
  font-size: 16.1px !important;
  font-weight: 620 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
}

.shelfd-search-preset-title.is-lock-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.shelfd-search-preset-title.is-lock-title svg {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 auto !important;
  color: #c4b5fd !important;
}

.shelfd-search-preset-summary,
.shelfd-search-preset-option small {
  justify-self: end !important;
  max-width: 42vw !important;
  overflow: hidden !important;
  color: rgba(248,244,255,0.40) !important;
  font-size: 12px !important;
  font-weight: 720 !important;
  line-height: 1.15 !important;
  text-align: right !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.shelfd-search-preset-arrow,
.shelfd-search-preset-option-arrow {
  color: #c4b5fd !important;
  font-family: 'Sohne', 'DM Sans', system-ui, sans-serif !important;
  font-size: 26px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-align: right !important;
}

.shelfd-search-preset-card.is-locked {
  opacity: 0.82 !important;
}

.shelfd-search-preset-card.is-locked .shelfd-search-preset-summary {
  color: rgba(196,181,253,0.62) !important;
}

.shelfd-search-preset-panel {
  background: #181c20 !important;
  box-shadow: none !important;
}

.shelfd-search-preset-panel-inner {
  padding: max(10px, calc(var(--shelfd-safe-top, 0px) + 8px)) 18px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
  overflow: hidden !important;
}

.shelfd-search-preset-panel-topbar {
  min-height: 70px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid rgba(232,227,243,0.14) !important;
  background: #181c20 !important;
}

.shelfd-search-preset-back {
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #c4b5fd !important;
  box-shadow: none !important;
}

.shelfd-search-preset-panel-heading {
  text-align: center !important;
}

.shelfd-search-preset-panel-heading span {
  color: rgba(248,244,255,0.42) !important;
}

.shelfd-search-preset-panel-heading strong {
  color: #ffffff !important;
  font-size: 26px !important;
  font-weight: 650 !important;
  letter-spacing: -0.035em !important;
}

.shelfd-search-preset-panel-subtitle {
  display: none !important;
}

.shelfd-search-preset-panel-body {
  padding-top: 14px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.shelfd-search-preset-option span {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: baseline !important;
  gap: 12px !important;
}

.shelfd-search-preset-flat-note {
  padding: 22px 4px !important;
  border-bottom: 1px solid rgba(232,227,243,0.13) !important;
  color: rgba(248,244,255,0.58) !important;
}

.shelfd-search-preset-flat-note strong {
  display: block !important;
  margin-bottom: 8px !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 620 !important;
  letter-spacing: -0.02em !important;
}

.shelfd-search-preset-flat-note span {
  display: block !important;
  color: rgba(248,244,255,0.52) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.shelfd-search-premium-notice {
  position: fixed !important;
  inset: 0 !important;
  z-index: 85 !important;
  pointer-events: none !important;
}

.shelfd-search-premium-notice.is-open {
  pointer-events: auto !important;
}

.shelfd-search-premium-notice-backdrop {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  padding: 24px !important;
  background: rgba(5, 7, 10, 0.54) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  transition: opacity 180ms ease !important;
}

.shelfd-search-premium-notice.is-open .shelfd-search-premium-notice-backdrop {
  opacity: 1 !important;
}

.shelfd-search-premium-notice-card {
  width: min(320px, calc(100vw - 42px)) !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(196,181,253,0.18) !important;
  border-radius: 22px !important;
  background: #181c20 !important;
  box-shadow: 0 22px 60px rgba(0,0,0,0.34) !important;
  color: #ffffff !important;
  transform: translate3d(0, 10px, 0) scale(0.98) !important;
  transition: transform 180ms ease !important;
}

.shelfd-search-premium-notice.is-open .shelfd-search-premium-notice-card {
  transform: translate3d(0, 0, 0) scale(1) !important;
}

.shelfd-search-premium-notice-copy {
  display: block !important;
  color: #ffffff !important;
  font-family: 'Sohne', 'DM Sans', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.42 !important;
  letter-spacing: -0.015em !important;
  text-align: center !important;
}

/* ---------- Animations ---------- */
@keyframes shelfdSearchRowIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes shelfdSearchShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Light-mode overrides ---------- */
body.light-mode .shelfd-search-page-inner {
  background: #f5f3ee !important;
  color: #111111 !important;
}
body.light-mode .shelfd-search-topbar {
  background: linear-gradient(180deg, #f5f3ee 0%, rgba(245,243,238,0.92) 88%, rgba(245,243,238,0) 100%);
}
body.light-mode .shelfd-search-back-btn {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.10);
  color: #111111;
}
body.light-mode .shelfd-search-input-wrap {
  background: rgba(0,0,0,0.04);
  border-color: rgba(120,90,200,0.20);
}
body.light-mode .shelfd-search-input-wrap:focus-within {
  background: rgba(0,0,0,0.06);
  border-color: rgba(120,90,200,0.42);
}
body.light-mode .shelfd-search-input { color: #111111; }
body.light-mode .shelfd-search-input::placeholder { color: rgba(0,0,0,0.42); }
body.light-mode .shelfd-search-chip {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.10);
  color: rgba(0,0,0,0.72);
}
body.light-mode .shelfd-search-chip.active {
  background: rgba(139,92,246,0.16);
  border-color: rgba(120,90,200,0.42);
  color: #1a1130;
}
body.light-mode .shelfd-search-row {
  background: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.06);
  color: #111111;
}
body.light-mode .shelfd-search-row:hover {
  background: rgba(139,92,246,0.07);
  border-color: rgba(120,90,200,0.22);
}
body.light-mode .shelfd-search-row-title { color: #111111; }
body.light-mode .shelfd-search-row-meta { color: rgba(20,15,40,0.62); }
body.light-mode .shelfd-search-row-overview { color: rgba(20,15,40,0.55); }
body.light-mode .shelfd-search-noresults strong { color: #111111; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .shelfd-search-row { animation: none; opacity: 1; transform: none; }
  .shelfd-search-skeleton-poster,
  .shelfd-search-skeleton-line,
  .shelfd-search-trending-skeleton { animation: none; }
}

/* =============================================================
   v634: Google Identity Services (GIS) sign-in button styling
   ============================================================= */

/* v644: GIS-rendered button wrapper ? gives the Google button proper visual
   prominence on the landing page. The button HTML is owned by Google's iframe
   so we can't restyle it directly, but we can:
    1. Scale the iframe up via transform ? makes the entire button visually
       larger without relying on GIS's limited 'large' size option.
    2. Wrap it in a soft golden glow halo (drop-shadow) ? same warm-amber +
       cyan tint that the original .google-btn had.
    3. Add generous vertical breathing room so the CTA feels like the
       primary action on the page. */
/* v747: Restored a native, recognizable Google sign-in button.
   Three problems were making the previous version look fake:
     1. transform: scale(1.18) on the iframe blurred the pixel-perfect
        button rendering ? Google logo and text became fuzzy on Retina.
        Removed entirely. GIS's `large` size is 400px wide which is
        already a substantial CTA ? no scaling needed.
     2. Heavy golden drop-shadow halo made it read as "custom-skinned
        knockoff" instead of the trusted Google CTA users recognize.
        Replaced with a subtle elevation shadow ? same depth a real
        modern button would have.
     3. theme: filled_black (in JS) is rare and unrecognizable. Switched
        to filled_blue for dark mode and outline for light mode ? the
        two canonical Google-recommended variants. */
.gis-signin-target {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 44px;
  margin: 18px auto 22px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.32));
  transition: filter 200ms cubic-bezier(0.22, 1, 0.36, 1), transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
  /* v950: dropped `filter` from will-change — filter is non-compositable; only
     transform benefits from the layer hint. */
  will-change: transform;
}
.gis-signin-target:hover {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.40));
}
.gis-signin-target:active { transform: scale(0.985); }

.gis-signin-target:empty {
  min-height: 0;
  margin: 0 auto;
  filter: none;
}

body.light-mode .gis-signin-target {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12));
}
body.light-mode .gis-signin-target:hover {
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));
}

/* When GIS button is rendered, hide the legacy <button class="gis-legacy-btn"> */
.gis-legacy-btn.gis-replaced {
  display: none !important;
}
body.gis-active .gis-legacy-btn { display: none !important; }

/* Sign-in progress overlay (shown while signInWithCredential settles) */
.gis-signin-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(10, 8, 24, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #ffffff;
  font-family: 'Sohne', 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: auto;
}
.gis-signin-overlay.is-visible { opacity: 1; }
.gis-signin-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(196,181,253,0.22);
  border-top-color: #c4b5fd;
  animation: gisSpin 0.9s linear infinite;
}
@keyframes gisSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .gis-signin-spinner { animation: none; }
  .gis-signin-hint-dot { animation: none; }
}

/* v636: Inline hint that appears below the GIS button if the user came back
   from another app (Gmail / Authenticator) without sign-in completing. */
.gis-signin-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px auto 0;
  padding: 9px 14px;
  max-width: 360px;
  background: rgba(196, 181, 253, 0.08);
  border: 1px solid rgba(196, 181, 253, 0.22);
  border-radius: 12px;
  font-family: 'Sohne', 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.4;
  color: rgba(232,227,243,0.86);
  text-align: left;
  animation: gisHintIn 280ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}
.gis-signin-hint-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c4b5fd;
  box-shadow: 0 0 0 0 rgba(196,181,253,0.55);
  animation: gisHintPulse 1.6s ease-in-out infinite;
}
@keyframes gisHintIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes gisHintPulse {
  0%   { box-shadow: 0 0 0 0 rgba(196,181,253,0.55); }
  60%  { box-shadow: 0 0 0 8px rgba(196,181,253,0); }
  100% { box-shadow: 0 0 0 0 rgba(196,181,253,0); }
}
body.light-mode .gis-signin-hint {
  background: rgba(120,90,200,0.06);
  border-color: rgba(120,90,200,0.22);
  color: rgba(20,15,40,0.78);
}

/* =============================================================
   v645: Disable double-tap-to-zoom globally.
   touch-action: manipulation = pan + pinch-zoom + tap allowed,
   double-tap zoom disabled. Per CSS spec, the effective touch
   behavior for any element is the INTERSECTION of touch-action
   along the ancestor chain ? so specific elements that already
   declare pan-y / pan-x / none still keep those behaviors.
   ============================================================= */
* {
  touch-action: manipulation;
}

/* =============================================================
   v648: Multi-task UI refinements (My Lists header + toolbar,
   Friends page tabs / cards, Requests sub-tabs)
   ============================================================= */

/* (1) DM button vertically aligned with the cogwheel on mobile.
   Cogwheel uses transform: translateY(52px) on My Lists tab ?
   match it exactly so the two icons sit at the same baseline. */
@media (max-width: 700px) {
  body.main-tab-mylist .header-dm-btn {
    transform: translateY(52px) !important;
  }
}

/* (2a) Filter status pills (Watching/Watchlist/Watched/Paused)
   and the "+ Add to Shelf" button live on the SAME row.
   Previous rules forced both `.tabs` and `.toolbar-right` to
   width:100%, so each took a full row. Override that. */
body:not(.light-mode):not(.true-dark-mode) #mylist-view .tabs,
#mylist-view #mylist-toolbar .tabs {
  width: auto !important;
  flex: 1 1 auto !important;
}
#mylist-view #mylist-toolbar .toolbar-right {
  width: auto !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
}
#mylist-view #mylist-toolbar {
  flex-wrap: nowrap !important;
  align-items: center !important;
}

/* (2b) Drop "+ Add to Shelf" font-weight from 600 ? 400 */
#mylist-view #add-btn,
.btn-primary#add-btn {
  font-weight: 400 !important;
}

/* (3) v650: Sleek compact capsule borders on friend action buttons.
   Paper-white text, 11px / 400 weight, 1px lavender border, pill shape. */
#community-view .friend-action-btn,
#community-view .friend-screenlist-btn,
#community-view .friend-message-btn,
#community-view .friend-mobile-profile-btn,
#community-view .friend-profile-desktop-btn,
#community-view .friend-add-btn,
#community-view .friend-remove-btn,
#community-view .friend-accept-btn,
#friends-list-view .friend-list-card .friend-action-btn {
  background: transparent !important;
  border: 1px solid rgba(196, 181, 253, 0.32) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  padding: 4px 12px !important;
  min-height: 24px !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #F8F5EF !important;
  letter-spacing: 0 !important;
}
body.light-mode #community-view .friend-action-btn,
body.light-mode #community-view .friend-screenlist-btn,
body.light-mode #community-view .friend-message-btn,
body.light-mode #community-view .friend-mobile-profile-btn,
body.light-mode #community-view .friend-profile-desktop-btn,
body.light-mode #friends-list-view .friend-list-card .friend-action-btn {
  border-color: rgba(120, 90, 200, 0.32) !important;
  color: #1a1130 !important;
}

/* (4) Center the Friends-page tabs (Activity / Friends / Requests)
   horizontally on the page. Bump font +2px and drop weight -200. */
#community-view .friends-tabs {
  justify-content: center !important;
}
#community-view .friends-tab-btn {
  font-size: 16px !important;
  font-weight: 200 !important;
}

/* (5) v650: Friend name weight -100 again (500 ? 400) on the cards */
#friends-list-view .friend-list-card .user-card-name,
#community-view .user-card-name {
  font-weight: 400 !important;
}

/* (6) v652: Friend card height +20% vertical ? restore breathing room
   without going back to the original size. Padding 9 ? 13, avatar
   40 ? 48, gap 8 ? 11. */
@media (max-width: 700px) {
  #friends-list-view .friend-list-card {
    padding: 13px 40px 13px 15px !important;
    gap: 11px !important;
  }
  #friends-list-view .friend-list-card .friend-card-main {
    gap: 11px !important;
  }
  #friends-list-view .friend-list-card .user-card-avatar {
    width: 48px !important;
    height: 48px !important;
  }
  #friends-list-view .friend-list-card .friend-actions-group {
    gap: 6px !important;
    margin-top: 0 !important;
  }
  #friends-list-view .friend-list-card .friend-action-btn {
    min-height: 28px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }
}

/* (7) Requests sub-tabs (Friend Requests / Watch Together) ?
   weight 850 ? 650 (per "drop by 200"). Browsers will round to
   the nearest weight available in DM Sans. */
.request-subtab {
  font-weight: 650 !important;
}

/* =============================================================
   v649: Media profile + search results polish
   ============================================================= */

/* Bump "Stream:" / "Free:" / "With Ads:" label by 1px (9 ? 10).
   Provider name + 1px (11 ? 12). Provider trailing logo +1
   (16 ? 17). Same uplift on the row text itself for cohesion. */
.discover-media-watch-inline-row {
  font-size: 12px !important;
}
.discover-media-watch-inline-row span:first-child {
  font-size: 10px !important;
}
.discover-media-watch-inline-row .discover-media-watch-inline-provider-list,
.discover-media-watch-inline-row .discover-media-watch-inline-provider,
.discover-media-watch-inline-row .discover-provider-name-text,
.discover-media-watch-inline-row .discover-provider-trailing-logo {
  font-size: 12px !important;
}
.discover-media-watch-inline-row .discover-provider-trailing-logo {
  width: 17px !important;
  height: 17px !important;
  flex-basis: 17px !important;
}

/* (3) Hide "Series Profile" / "Movie Profile" / "Game Profile" kicker
   under the poster. Person/actor profile kicker (gender label) stays
   visible because it lives inside .discover-person-hero. */
.discover-media-hero:not(.discover-person-hero) .discover-media-kicker {
  display: none !important;
}

/* (4 + 5) Search result row tweaks:
   - title +2px (14.5 ? 16.5)
   - year +1px (12 ? 13)
   - type +1px (11 ? 12)
   - remove the rectangular border / background card around each row */
.shelfd-search-row {
  background: transparent !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.shelfd-search-row:hover {
  /* Soft highlight on hover instead of the bordered card look */
  background: rgba(139,92,246,0.06) !important;
  border-color: transparent !important;
}
.shelfd-search-row-title {
  font-size: 18.5px !important;  /* v651: +2px (was 16.5) */
}
.shelfd-search-row-year {
  font-size: 13px !important;
}
.shelfd-search-row-type {
  font-size: 12px !important;
}

/* v651: Combined "year ? type" meta row + "Directed by [name]" credit row.
   Increased line spacing in the row body so the 3 lines breathe. */
.shelfd-search-row-body {
  gap: 7px !important;  /* was 2px ? too compact */
}
.shelfd-search-row-meta {
  font-size: 13px !important;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: rgba(232,227,243,0.78);
  text-transform: none !important;
  line-height: 1.3;
}
.shelfd-search-row-shelf-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  padding: 2px 7px 2.5px;
  border-radius: 999px;
  border: 1px solid rgba(196,181,253,0.24);
  background: rgba(139,92,246,0.14);
  color: rgba(232,227,243,0.84);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
.shelfd-search-row-credit {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: rgba(232,227,243,0.62);
  line-height: 1.3;
}
.shelfd-search-row-credit-prefix {
  color: rgba(196,181,253,0.62);
}
body.light-mode .shelfd-search-row-meta {
  color: rgba(20,15,40,0.72);
}
body.light-mode .shelfd-search-row-shelf-pill {
  border-color: rgba(120,90,200,0.22);
  background: rgba(139,92,246,0.12);
  color: rgba(20,15,40,0.72);
}
body.light-mode .shelfd-search-row-credit {
  color: rgba(20,15,40,0.62);
}
body.light-mode .shelfd-search-row-credit-prefix {
  color: rgba(120,90,200,0.62);
}

/* v651: Browse section hidden from the search empty state. The 2x2 grid
   (Movies / TV Shows / Anime / Games) is no longer needed ? chips do the
   filtering job once the user starts typing. */
.shelfd-search-browse-grid,
.shelfd-search-empty .shelfd-search-section:has(.shelfd-search-browse-grid) {
  display: none !important;
}
body.light-mode .shelfd-search-row {
  background: transparent !important;
  border-color: transparent !important;
}
body.light-mode .shelfd-search-row:hover {
  background: rgba(139,92,246,0.07) !important;
  border-color: transparent !important;
}

/* =============================================================
   v650: Discover card +1px, My Lists card next-episode line,
   status pill compact, synopsis preview/expand, pull-down
   poster GPU layer fix.
   ============================================================= */

/* v787: discover-card-title font-size rules removed ? they were dead duplicates.
   The #discover-view-prefixed rule in 14-live-update-discover-controls.css has
   higher specificity (0,1,1 vs 0,0,1) and always wins. Source of truth lives in
   14-live-update-discover-controls.css "v787: Discover title-card title ? 16px". */
.discover-new-release-date {
  font-size: 12px !important;
}

/* My Lists TV/anime next-episode air-date footer line.
   v10.415: font-weight dropped by 100 on both variants per spec —
   750 -> 650 (default), 900 -> 800 (is-new today-state). */
.card-next-episode {
  flex: 0 0 auto;
  max-width: 46%;
  margin: 0;
  /* v11.248: next episode/season metadata — 11.1px / 500 (was 11px / 650). */
  font-size: 11.1px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  color: #22d3ee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-next-episode.is-new {
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #22d3ee;
  text-transform: uppercase;
}
body.light-mode .card-next-episode {
  color: #0891b2;
}
body.light-mode .card-next-episode.is-new {
  color: #0891b2;
}

/* Watchlist / Wishlist / Backlog future-release card: release
   date sits in the rating-area slot (replacing the stars). */
.card-future-release-area {
  margin-top: 6px;
}
.card-future-release-label {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(232, 227, 243, 0.55);
  margin-bottom: 3px;
}
.card-future-release-date {
  font-size: 13px;
  font-weight: 600;
  color: rgba(196, 181, 253, 0.92);
}
body.light-mode .card-future-release-label {
  color: rgba(20, 15, 40, 0.55);
}
body.light-mode .card-future-release-date {
  color: rgba(120, 90, 200, 0.92);
}

/* Status pill height reduction on My Lists title cards.
   Padding 3px ? 2px vertical (?25% shorter). */
#mylist-view .card .status-pill {
  padding: 2px 10px !important;
  min-height: 0 !important;
}

/* Synopsis preview/expand ? 4-line clamp by default, tap to
   expand to full text. */
.discover-media-synopsis {
  cursor: pointer;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: opacity 180ms ease;
  -webkit-tap-highlight-color: transparent;
}
.discover-media-synopsis:active { opacity: 0.7; }
.discover-media-synopsis.expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Pull-down gesture poster fix: ensure the poster img has its
   own GPU compositing layer that won't drop out when the parent
   page applies translate3d + scale during the pull-down gesture.
   v650: stronger isolation than the existing translateZ(0). */
.discover-media-profile-overlay .discover-media-poster,
.game-media-profile-overlay .discover-media-poster {
  isolation: isolate;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.discover-media-profile-overlay .discover-media-poster img,
.game-media-profile-overlay .discover-media-poster img {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

/* =============================================================
   v652: Media profile facts sizes + discover card sizes +
   "slightly higher" tweak for the rating-slot release date.
   ============================================================= */

/* Task 3: position the future-release line slightly higher than
   where the rating area normally sits. Reduce its top margin so
   it nudges up by ~6px relative to the rating slot baseline. */
.card-future-release-area {
  margin-top: 0 !important;
  transform: translateY(-4px);
}

/* Task 5: full media profile facts.
   Primary value (movie runtime, TV/anime seasons + episodes) +2px:
   16 ? 18. Labels (Runtime, Released, First Aired, Country, Type,
   Status, Seasons, Episodes) +1px: 9 ? 10. */
.discover-media-profile-overlay .discover-media-facts div.primary strong,
.game-media-profile-overlay .discover-media-facts div.primary strong {
  font-size: 18px !important;
}
.discover-media-profile-overlay .discover-media-facts .discover-media-fact-release-date strong,
.game-media-profile-overlay .discover-media-facts .discover-media-fact-release-date strong {
  color: #67e8f9 !important;
}
.discover-media-profile-overlay .discover-media-facts .discover-media-fact-runtime strong,
.game-media-profile-overlay .discover-media-facts .discover-media-fact-runtime strong {
  color: #ffffff !important;
  opacity: 1 !important;
}
.discover-media-profile-overlay .discover-media-facts span,
.discover-media-profile-overlay .discover-media-credits span,
.game-media-profile-overlay .discover-media-facts span {
  font-size: 10px !important;
}

/* v787: discover-card-title font-size duplicates removed ? dead.
   Source of truth is now 14-live-update-discover-controls.css with
   #discover-view .discover-card-title (specificity 0,1,1 ? wins). */
.discover-new-release-date {
  font-size: 13px !important;
  font-weight: 900 !important;
}
/* Clamp titles to 2 lines max; no min-height so single-line titles
   don't leave empty vertical space (v789 spacing fix). */
.discover-card-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =============================================================
   v692: My Lists toolbar ? search toggle button + inline search row.
   Row order (left ? right): [Sort btn] [Add to Shelf] [?? btn]
   ============================================================= */

/* =============================================================
   v10.917: Discover "View All" full-category page slides in from
   the right and exits to the right, matching iOS forward navigation.
   ============================================================= */

/* Default state: page is off-screen to the right. When JS sets
   display:block, it starts at translateX(100%) before 'is-open' is
   applied two rAFs later, so the transition fires cleanly. */
.discover-category-full-page {
  transform: translateX(100%) !important;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: transform !important;
}
/* Slid-in (visible) state. */
.discover-category-full-page.is-open {
  transform: translateX(0) !important;
}

/* Raise both movie/TV and game media profile overlays above the
   full-category page (z-index 5620) so a poster tap in "View All"
   actually surfaces the profile instead of hiding behind it. */
.discover-media-profile-overlay,
.game-media-profile-overlay {
  z-index: 6000 !important;
}

/* v10.918: media profiles launched from Discovery View All must sit above
   the still-open View All page so back returns Profile -> View All -> Discover. */
.discover-media-profile-overlay.discover-media-profile-from-view-all,
.game-media-profile-overlay.discover-media-profile-from-view-all {
  z-index: 12000 !important;
}

/* v10.948: media profiles launched from the My List full-page episode
   details must sit above that seasons overlay, then back returns to it. */
.discover-media-profile-overlay.discover-media-profile-from-mylist-episode,
.game-media-profile-overlay.discover-media-profile-from-mylist-episode {
  z-index: 12100 !important;
}

/* v10.958: game media profiles opened from the competitive profile poster
   must sit above that still-open profile page, then back returns to it. */
.discover-media-profile-overlay.game-media-profile-from-competitive,
.game-media-profile-overlay.game-media-profile-from-competitive {
  z-index: 12120 !important;
}

/* =============================================================
   v695: Discover > Games colour-scheme match + backloggd icon
   removal + section-header and filter-button weight reduction.
   ============================================================= */

/* 1. Games page ? true-dark-mode treatment matching Movies/TV. */
body.true-dark-mode #games-discover-view .discover-section-card,
body.true-dark-mode #games-discover-view .discover-rail,
body.true-dark-mode #games-discover-view .discover-section,
body.true-dark-mode #games-discover-view .discover-rail-item {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.true-dark-mode #games-discover-view .discover-card {
  background: #212121 !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}
body.true-dark-mode #games-discover-view .discover-card:not(.discover-card-expanded) {
  border-radius: 3px !important;
}
body.true-dark-mode #games-discover-view .discover-card .discover-card-body {
  background: transparent !important;
  padding-bottom: 8px !important;
}
body.true-dark-mode #games-discover-view .discover-expand-icon {
  display: none !important;
}
/* Fix game poster placeholder ? was #0b0818, now matches current app bg. */
body.true-dark-mode #games-discover-view .discover-poster,
body.true-dark-mode #games-discover-view .games-discover-card .discover-poster {
  background-color: #1c2028 !important;
}
/* v702: games hub toggle now uses the same transparent background as
   movies/TV and anime. The previous rgba(24,28,32,0.92) was too dark and
   made the border look like a solid black box on the games page.
   Keeping only search-input override (search bar IS deliberately darker). */
body.true-dark-mode #games-discover-view .discover-search-input {
  background: rgba(24, 28, 32, 0.92) !important;
  border-color: rgba(196, 181, 253, 0.18) !important;
  box-shadow: none !important;
}
/* Belt-and-suspenders: nuke any outline/ring on the toggle itself. */
.discover-hub-toggle:focus,
.discover-hub-toggle:focus-visible,
.discover-hub-toggle:focus-within {
  outline: none !important;
  box-shadow: none !important;
}
body.true-dark-mode #games-discover-view .discover-card-title { color: #ffffff !important; }
body.true-dark-mode #games-discover-view .discover-card-genre,
body.true-dark-mode #games-discover-view .discover-card-context,
body.true-dark-mode #games-discover-view .discover-card-meta {
  color: rgba(196, 181, 253, 0.72) !important;
}

/* 2. Remove Backloggd export icon everywhere (discover cards, profile page,
   external links bar, floating exports, My Lists cards). */
.game-discover-backloggd-icon,
#games-discover-view .game-discover-backloggd-icon,
.game-backloggd-icon,
.game-media-external-link.backloggd,
.game-media-profile-overlay .backloggd,
.game-media-profile-overlay a.backloggd {
  display: none !important;
}

/* Remove "Change Cover" button from the game full-page media profile. */
.screenlist-game-profile-cover-btn {
  display: none !important;
}

/* -- v696: Games discover card 5-row info layout ----------------------- */

/* All game discover cards: equal height across every row.
   height: 100% fills the grid cell; the cell height is the tallest
   card in that row, so all cards in the same row are identical.
   For cross-row uniformity the poster aspect-ratio anchors most of
   the variance; the body min-height catches the rest. */
#games-discover-view .discover-card.games-discover-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Body container ? vertical flex; add-btn always at the bottom. */
.games-dc-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 9px 9px 9px !important;
  flex: 1 !important;           /* fill remaining card height */
  min-height: 167px !important; /* v702: +10% (was 152px) */
}

/* Row 1: title ? clickable, 2-line clamp. */
.games-dc-title {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  font-family: 'Sohne', 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 0;
}
.games-dc-title:hover { color: #d4c5ff; }

/* Row 2: year. */
.games-dc-year {
  font-size: 11px;
  font-weight: 400;
  color: rgba(232, 227, 243, 0.60);
  line-height: 1.3;
}

/* Row 3: genres (max 3, plain text). */
.games-dc-genres {
  font-size: 11px;
  font-weight: 400;
  color: rgba(196, 181, 253, 0.70);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Row 4: hidden until Steam data fills it; revealed when live. */
.games-dc-rating {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
}
/* v698: empty = no space taken; once textContent is set, element shows. */
.games-dc-rating:empty { display: none !important; }
/* v697/698: Steam live data ? lavender, upright. */
.games-dc-rating.games-dc-rating--live {
  font-style: normal !important;
  color: rgba(196, 181, 253, 0.82) !important;
}
body.light-mode .games-dc-rating.games-dc-rating--live {
  color: rgba(100, 60, 180, 0.82) !important;
}

/* Spacer between info rows and the add button ? grows to fill available
   space (bottom-pinning the button) but is never less than 8px so the
   button always has breathing room even when content is dense. */
.games-dc-spacer {
  flex: 1 0 8px;  /* grow freely, minimum 8px */
}

/* Row 5: Add to Library ? position handled by .games-dc-spacer above. */
.games-dc-add-btn {
  margin-top: 0 !important;
  background: rgba(139, 92, 246, 0.14) !important;
  border: 1px solid rgba(196, 181, 253, 0.28) !important;
  border-radius: 999px !important;
  color: #d4c5ff !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  padding: 6px 10px !important;
  width: 100% !important;
  text-align: center !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background 160ms ease, border-color 160ms ease !important;
}
.games-dc-add-btn:hover {
  background: rgba(139, 92, 246, 0.24) !important;
  border-color: rgba(196, 181, 253, 0.46) !important;
}
.games-dc-add-btn.added {
  background: rgba(139, 92, 246, 0.08) !important;
  color: rgba(196, 181, 253, 0.55) !important;
  border-color: rgba(196, 181, 253, 0.16) !important;
}

/* "View All" button weight -100 (800 ? 700) on games discover rows. */
#games-discover-view .discover-expand-btn {
  font-weight: 700 !important;
}

body.light-mode .games-dc-title { color: #1a1130; }
body.light-mode .games-dc-year  { color: rgba(40, 20, 80, 0.60); }
body.light-mode .games-dc-genres { color: rgba(100, 60, 180, 0.70); }
body.light-mode .games-dc-rating { color: rgba(40, 20, 80, 0.36); }
body.light-mode .games-dc-add-btn {
  background: rgba(139, 92, 246, 0.12) !important;
  border-color: rgba(120, 90, 200, 0.30) !important;
  color: #5b21b6 !important;
}

/* 3. Section-header weight -100 (800 ? 700) ? Movies/TV and Games only.
   Anime (#anime-discover-view) intentionally excluded. */
#discover-view .discover-section-title,
#games-discover-view .discover-section-title {
  font-weight: 700 !important;
}

/* 4. "New This Week" / "New This Month" filter buttons weight -100 (800 ? 700). */
.discover-filter-btn {
  font-weight: 700 !important;
}

/* =============================================================
   v694: Discover hub tabs + version footer tweaks
   ============================================================= */

/* 1 & 5. Center the Movies & TV / Anime / Games pill row without making
   it full-width (width:100% caused the pill border to span the whole
   container, which looked like a thick rectangular box). fit-content
   + auto margins centres a shrink-wrapped pill cleanly. */
.discover-hub-toggle {
  display: flex !important;
  justify-content: center !important;
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 4. Remove browser default focus outline/ring on the hub buttons.
   The active-state background/border already signals selection clearly. */
.discover-hub-btn:focus,
.discover-hub-btn:focus-visible,
.discover-hub-btn:focus-within {
  outline: none !important;
  box-shadow: none !important;
}

/* 2. Hub tab text: +1px font, -100 weight, paper-white colour.
      Active tab: lavender/purple instead of plain white. */
.discover-hub-btn {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #F8F5EF !important;
}
.discover-hub-btn.active {
  color: #c4b5fd !important;
  background: rgba(139, 92, 246, 0.18) !important;
  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.22) !important;
}
body.light-mode .discover-hub-btn { color: rgba(60, 40, 100, 0.85) !important; }
body.light-mode .discover-hub-btn.active {
  color: #7c3aed !important;
  background: rgba(139, 92, 246, 0.14) !important;
}

/* 3. Version footer weight -200 (800 ? 600). */
.screenlist-version-footer {
  font-weight: 600 !important;
}

/* v703: Force toolbar-right to always be a single flex row.
   The mobile CSS in 11-patch-notes-friends-refinements.css:1653 overrides to
   display:grid with 2 columns, which caused the 3rd button (search toggle) to
   wrap to a second sub-row. This override beats that with higher specificity +
   !important and lays out: [Sort] [Add] [??] space-between across full width.
   The `flex: 0 0 auto` on outer children prevents any button from growing/shrinking
   except the add-btn which gets `flex: 0 1 auto` to yield a little if tight. */
#mylist-view #mylist-toolbar .toolbar-right,
body.main-tab-mylist #mylist-view #mylist-toolbar .toolbar-right {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 6px !important;
}
#mylist-view #mylist-toolbar .toolbar-right > * {
  flex-shrink: 0 !important;
}
#mylist-view #mylist-toolbar .toolbar-right #add-btn {
  flex: 0 1 auto !important; /* can shrink slightly if needed */
}

/* v693: Compact Add to Shelf button so Sort + Add + Search fit on one row.
   Tighter horizontal padding + smaller font. Scoped to the toolbar so no
   other btn-primary instances are affected. */
#mylist-view #mylist-toolbar #add-btn,
#mylist-view #mylist-toolbar .btn-primary#add-btn {
  padding: 6px 10px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

/* Magnifying-glass icon button ? matches sort button sizing. */
.mylist-search-toggle-btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  color: rgba(232, 227, 243, 0.72);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: color 160ms ease, background 160ms ease, transform 140ms ease;
}
.mylist-search-toggle-btn svg { width: 18px; height: 18px; }
.mylist-search-toggle-btn:hover { color: #ffffff; }
.mylist-search-toggle-btn:active { transform: scale(0.92); }
.mylist-search-toggle-btn.mylist-search-toggle-active {
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.14);
}
body.light-mode .mylist-search-toggle-btn { color: rgba(60, 40, 100, 0.72); }
body.light-mode .mylist-search-toggle-btn.mylist-search-toggle-active {
  color: #7c3aed;
  background: rgba(139, 92, 246, 0.10);
}

@media (min-width: 701px) and (hover: hover) and (pointer: fine) and (not (display-mode: standalone)) {
  body.main-tab-mylist #mylist-view #mylist-toolbar .toolbar-right:has(#sort-dropdown-btn):has(#mylist-search-toggle-btn) {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  body.main-tab-mylist #mylist-view #mylist-toolbar .toolbar-right:has(#sort-dropdown-btn):has(#mylist-search-toggle-btn) > * {
    min-width: 0 !important;
  }

  body.main-tab-mylist #mylist-view #mylist-toolbar .toolbar-right:has(#sort-dropdown-btn):has(#mylist-search-toggle-btn) #sort-dropdown-btn {
    grid-column: 1 !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
  }

  body.main-tab-mylist #mylist-view #mylist-toolbar .toolbar-right:has(#sort-dropdown-btn):has(#mylist-search-toggle-btn) #add-btn,
  body.main-tab-mylist #mylist-view #mylist-toolbar .toolbar-right:has(#sort-dropdown-btn):has(#mylist-search-toggle-btn) .btn-primary#add-btn {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body.main-tab-mylist #mylist-view #mylist-toolbar .toolbar-right:has(#sort-dropdown-btn):has(#mylist-search-toggle-btn) #mylist-search-toggle-btn {
    grid-column: 3 !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
  }
}

/* v781: Sort + Search ? matching circular icon-only controls in My Lists toolbar.
   Both buttons are 36?36 circles with identical border, background, and icon opacity.
   The sort label is always hidden in this context (handled separately).
   v847: default-state accent moved from neutral white to lavender so the
   filter/sort control reads as part of the app's lavender-purple system
   (matches the Add to Shelf button and the active state below). */
#mylist-view #mylist-toolbar #sort-dropdown-btn,
#mylist-view #mylist-toolbar #mylist-search-toggle-btn {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(196,181,253,0.28) !important;
  background: rgba(167,139,250,0.08) !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(196,181,253,0.78) !important;
  flex-shrink: 0 !important;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 140ms ease !important;
}
#mylist-view #mylist-toolbar #sort-dropdown-btn:hover,
#mylist-view #mylist-toolbar #mylist-search-toggle-btn:hover {
  color: #c4b5fd !important;
  background: rgba(167,139,250,0.14) !important;
  border-color: rgba(196,181,253,0.46) !important;
}
#mylist-view #mylist-toolbar #sort-dropdown-btn:active,
#mylist-view #mylist-toolbar #mylist-search-toggle-btn:active {
  transform: scale(0.92) !important;
}
/* Sort icon inherits the parent's rgba white color */
#mylist-view #mylist-toolbar #sort-dropdown-btn .sort-btn-icon {
  font-size: 17px !important;
  color: inherit !important;
}
/* Suppress sort label and active-sort purple tint in toolbar context */
#mylist-view #mylist-toolbar #sort-dropdown-btn .sort-btn-label { display: none !important; }
#mylist-view #mylist-toolbar #sort-dropdown-btn .sort-btn-icon.sort-active { color: inherit !important; }
/* Search SVG matches icon size */
#mylist-view #mylist-toolbar #mylist-search-toggle-btn svg {
  width: 17px !important;
  height: 17px !important;
}
/* Active state for Search still shows purple highlight */
#mylist-view #mylist-toolbar #mylist-search-toggle-btn.mylist-search-toggle-active {
  color: #c4b5fd !important;
  background: rgba(139,92,246,0.16) !important;
  border-color: rgba(139,92,246,0.40) !important;
}
/* Active state for Sort (non-default sort applied) shows purple highlight */
#mylist-view #mylist-toolbar #sort-dropdown-btn:has(.sort-btn-icon.sort-active) {
  color: #c4b5fd !important;
  background: rgba(139,92,246,0.16) !important;
  border-color: rgba(139,92,246,0.40) !important;
}
body.light-mode #mylist-view #mylist-toolbar #sort-dropdown-btn,
body.light-mode #mylist-view #mylist-toolbar #mylist-search-toggle-btn {
  border-color: rgba(0,0,0,0.18) !important;
  background: rgba(0,0,0,0.04) !important;
  color: rgba(30,10,70,0.60) !important;
}

/* Search row that slides below the toolbar when toggle is active. */
.mylist-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 4px;
  animation: mylistSearchIn 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mylist-search-row[hidden] { display: none !important; }
@keyframes mylistSearchIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Override the display:none set on the old inline search input ?
   the new input doesn't have that inline style. */
#mylist-view .mylist-search-row .search-input {
  display: block !important;
  flex: 1 !important;
  height: 36px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(196, 181, 253, 0.18) !important;
  border-radius: 999px !important;
  padding: 0 14px !important;
  font-size: 16px !important;
  color: #ffffff !important;
  font-family: inherit !important;
  outline: none !important;
  transition: border-color 180ms ease, box-shadow 180ms ease !important;
}
#mylist-view .mylist-search-row .search-input:focus {
  border-color: rgba(196, 181, 253, 0.42) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.14) !important;
}
#mylist-view .mylist-search-row .search-input::placeholder { color: rgba(196, 181, 253, 0.50) !important; }

/* Close (?) button inside the search row. */
.mylist-search-clear-btn {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: rgba(232, 227, 243, 0.72);
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms ease, transform 140ms ease;
}
.mylist-search-clear-btn svg { width: 13px; height: 13px; }
.mylist-search-clear-btn:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.mylist-search-clear-btn:active { transform: scale(0.92); }

body.light-mode .mylist-search-row .search-input {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(120, 90, 200, 0.22) !important;
  color: #1a1130 !important;
}
body.light-mode .mylist-search-clear-btn {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(60, 40, 100, 0.72);
}

/* =============================================================
   v689: Seasonal Anime "Add to Library" bottom sheet.
   Reusable component ? same patterns can be adapted for My Lists
   title cards and other surfaces in future.
   ============================================================= */

/* Semi-transparent backdrop */
.sas-backdrop {
  position: fixed;
  inset: 0;
  z-index: 4200;
  background: transparent;
  transition: background 300ms ease;
  -webkit-tap-highlight-color: transparent;
}
.sas-bd-open {
  background: rgba(0, 0, 0, 0.55);
}

/* Sheet ? max 75 % of viewport height, slides up from below */
.sas-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4201;
  max-height: 75vh;
  background: #181c20;
  border-top: 1px solid rgba(196, 181, 253, 0.18);
  border-radius: 20px 20px 0 0;
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sas-sheet-open {
  transform: translateY(0);
}

/* Drag handle pill */
.sas-handle {
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: rgba(196, 181, 253, 0.28);
  margin: 12px auto 0;
  flex-shrink: 0;
}

/* Scrollable body ? content centered */
.sas-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 28px 24px max(32px, env(safe-area-inset-bottom, 0px)) 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}

/* Anime info row: poster + title/meta */
.sas-anime-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.sas-poster {
  width: 58px;
  height: 82px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background: rgba(196, 181, 253, 0.08);
}
.sas-poster-placeholder {
  width: 58px;
  height: 82px;
  border-radius: 8px;
  background: rgba(196, 181, 253, 0.08);
  flex-shrink: 0;
}
.sas-anime-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.sas-title {
  font-family: 'Sohne', 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sas-meta {
  font-family: 'Sohne', 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: rgba(196, 181, 253, 0.68);
}

/* "Where do you want it?" */
.sas-prompt {
  font-family: 'Sohne', 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.60);
  text-align: center;
  letter-spacing: 0.01em;
}

/* Status buttons ? full width, stacked */
.sas-statuses {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.sas-status-btn {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 14px 20px;
  background: rgba(139, 92, 246, 0.10);
  border: 1px solid rgba(196, 181, 253, 0.22);
  border-radius: 14px;
  color: #F8F5EF;
  font-family: 'Sohne', 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.005em;
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 180ms ease, border-color 180ms ease, transform 120ms ease;
  will-change: transform;
}
.sas-status-btn:hover {
  background: rgba(139, 92, 246, 0.20);
  border-color: rgba(196, 181, 253, 0.42);
}
.sas-status-btn:active {
  transform: scale(0.98);
  background: rgba(139, 92, 246, 0.28);
}

/* Light-mode overrides */
body.light-mode .sas-sheet {
  background: #f5f3ee;
  border-color: rgba(120, 90, 200, 0.18);
}
body.light-mode .sas-handle { background: rgba(120, 90, 200, 0.28); }
body.light-mode .sas-title  { color: #1a1130; }
body.light-mode .sas-meta   { color: rgba(90, 60, 180, 0.68); }
body.light-mode .sas-prompt { color: rgba(20, 15, 40, 0.60); }
body.light-mode .sas-status-btn {
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(120, 90, 200, 0.26);
  color: #2d1b69;
}
body.light-mode .sas-status-btn:hover {
  background: rgba(139, 92, 246, 0.16);
  border-color: rgba(120, 90, 200, 0.46);
}

/* =============================================================
   v680: Anime sub-tabs (Top Anime / Seasonal Anime) and the
   seasonal navigation rows that only appear under Seasonal.
   ============================================================= */

/* Pill row sitting under the main "Movies & TV / Anime / Games" hub toggle. */
.anime-discover-subtabs {
  display: flex;
  gap: 4px;
  margin: 12px auto 14px;
  padding: 4px;
  width: fit-content;
  border: 1px solid rgba(196, 181, 253, 0.20);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}
.anime-discover-subtab-btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 7px 18px;
  border-radius: 999px;
  color: rgba(232, 227, 243, 0.62);
  font-family: 'Sohne', 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1), color 180ms ease, transform 140ms ease;
}
.anime-discover-subtab-btn:hover { color: #fff; }
.anime-discover-subtab-btn:active { transform: scale(0.96); }
.anime-discover-subtab-btn.active {
  background: rgba(139, 92, 246, 0.24);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.18);
}

/* Seasonal-only navigation rows (season selector + type filter). */
.anime-discover-seasonal-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px auto 14px;
}
.anime-discover-season-tabs,
.anime-discover-type-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.anime-discover-season-btn,
.anime-discover-type-btn {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(196, 181, 253, 0.18);
  padding: 6px 14px;
  border-radius: 999px;
  color: rgba(232, 227, 243, 0.78);
  font-family: 'Sohne', 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.005em;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 140ms ease;
}
.anime-discover-season-btn:hover,
.anime-discover-type-btn:hover {
  color: #fff;
  border-color: rgba(196, 181, 253, 0.32);
}
.anime-discover-season-btn:active,
.anime-discover-type-btn:active { transform: scale(0.96); }
.anime-discover-season-btn.active,
.anime-discover-type-btn.active {
  background: rgba(139, 92, 246, 0.22);
  border-color: rgba(196, 181, 253, 0.46);
  color: #ffffff;
}

/* Light-mode tints */
body.light-mode .anime-discover-subtabs {
  border-color: rgba(120, 90, 200, 0.22);
  background: rgba(0, 0, 0, 0.04);
}
body.light-mode .anime-discover-subtab-btn { color: rgba(20, 15, 40, 0.62); }
body.light-mode .anime-discover-subtab-btn.active {
  background: rgba(139, 92, 246, 0.16);
  color: #1a1130;
}
body.light-mode .anime-discover-season-btn,
body.light-mode .anime-discover-type-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(120, 90, 200, 0.20);
  color: rgba(20, 15, 40, 0.78);
}
body.light-mode .anime-discover-season-btn.active,
body.light-mode .anime-discover-type-btn.active {
  background: rgba(139, 92, 246, 0.16);
  border-color: rgba(120, 90, 200, 0.42);
  color: #1a1130;
}

/* =============================================================
   v681: Custom card layout for the Seasonal Anime grid.
   ============================================================= */

/* Override the discover-grid container so it's a standard CSS grid
   (not a horizontal scroller like standard discover grids). */
#anime-discover-seasonal-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  /* v684: +10px row gap (16 ? 26px). Column gap stays 12. */
  gap: 26px 12px !important;
  overflow: visible !important;
  overflow-x: visible !important;
  padding: 8px 0 12px !important;
  flex-wrap: unset !important;
}
@media (min-width: 701px) and (hover: hover) and (pointer: fine) and (not (display-mode: standalone)) {
  #anime-discover-seasonal-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
@media (max-width: 700px) {
  #anime-discover-seasonal-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px 10px !important;
  }
}

/* Individual seasonal card. */
.anime-seasonal-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* v688: paper-white border 1px, 30% opacity. */
  border: 1px solid rgba(248, 244, 255, 0.30);
  border-radius: 3px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.025);
}
.anime-seasonal-card.asc-hidden { display: none !important; }
body.light-mode .anime-seasonal-card {
  border-color: rgba(20, 15, 40, 0.22);
  background: rgba(0, 0, 0, 0.02);
}

/* Poster ? tall portrait with overlay. */
.anime-seasonal-card-poster {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 3px 3px 0 0;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.anime-seasonal-card-poster:hover { transform: scale(1.02); }
.anime-seasonal-card-poster:active { transform: scale(0.98); }
.anime-seasonal-card-poster img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.anime-seasonal-card-poster-placeholder {
  width: 100%;
  height: 100%;
  background: rgba(139, 92, 246, 0.08);
}
/* v683: Meta header sits ABOVE the poster (not as an overlay inside it).
   v684: centered. v685: paper-white at 51% opacity. */
.anime-seasonal-card-header {
  font-size: 10px;
  font-weight: 500;
  color: rgba(248, 244, 255, 0.51);
  letter-spacing: 0.02em;
  line-height: 1.3;
  padding: 0 2px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
body.light-mode .anime-seasonal-card-header {
  color: rgba(90, 60, 180, 0.72);
}

/* Info block below the poster ? equal-spaced flex column. */
.anime-seasonal-card-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 2px 6px;
  flex: 1;
}

/* v685: Genres row ? centered. */
.anime-seasonal-card-genres {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: center;
  min-width: 0;
}
/* v686: genres live in the header zone (above the poster). */
.anime-seasonal-card-genres--header {
  padding: 3px 2px 6px;
}

/* v685: Rating (left) + members (right) share the bottom info row. */
.anime-seasonal-card-rating-members-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}
.anime-seasonal-card-rating {
  font-size: 12px;
  font-weight: 600;
  color: #f5d27a;
  letter-spacing: 0;
  flex-shrink: 0;
}
.anime-seasonal-genre-chip {
  font-size: 9px;
  font-weight: 500;
  color: rgba(196, 181, 253, 0.88);
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(196, 181, 253, 0.22);
  border-radius: 999px;
  padding: 2px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 52px;
  flex-shrink: 1;
}
body.light-mode .anime-seasonal-genre-chip {
  color: #4a1d96;
  background: rgba(139, 92, 246, 0.10);
  border-color: rgba(120, 90, 200, 0.26);
}
.anime-seasonal-card-title-btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #F8F5EF;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.anime-seasonal-card-title-btn:hover { color: #d4c5ff; }
.anime-seasonal-card-members {
  font-size: 11px;
  color: rgba(196,181,253,0.78);
  letter-spacing: 0.005em;
}
.anime-seasonal-card-add-btn {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(139,92,246,0.12);
  border: 1px solid rgba(196,181,253,0.22);
  border-radius: 999px;
  color: #d4c5ff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  padding: 6px 10px;
  cursor: pointer;
  width: 100%;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 180ms ease, border-color 180ms ease;
  margin-top: auto;
}
.anime-seasonal-card-add-btn:hover {
  background: rgba(139,92,246,0.22);
  border-color: rgba(196,181,253,0.42);
}
.anime-seasonal-card-add-btn:active {
  transform: scale(0.97);
}

/* Load More wrapper + button. */
.anime-seasonal-load-more-wrap {
  display: flex;
  justify-content: center;
  padding: 18px 0 26px;
}
.anime-seasonal-load-more-btn {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(196,181,253,0.22);
  border-radius: 999px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  padding: 11px 28px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms ease, transform 140ms ease;
  will-change: transform;
}
.anime-seasonal-load-more-btn:hover { background: rgba(255,255,255,0.10); }
.anime-seasonal-load-more-btn:active { transform: scale(0.97); }

.mylist-load-more-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 0 30px;
}
.mylist-load-more-wrap[hidden] {
  display: none !important;
}
.mylist-load-more-btn {
  appearance: none;
  -webkit-appearance: none;
  min-width: min(220px, 72vw);
  border: 1px solid rgba(196,181,253,0.24);
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  color: #fff;
  font-family: 'Sohne', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 12px 24px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms ease, transform 140ms ease, border-color 160ms ease;
}
.mylist-load-more-btn:hover {
  background: rgba(255,255,255,0.11);
  border-color: rgba(196,181,253,0.36);
}
.mylist-load-more-btn:active {
  transform: scale(0.97);
}
.mylist-load-more-count {
  color: rgba(232,227,243,0.58);
  font-family: 'Sohne', sans-serif;
  font-size: 11px;
  font-weight: 600;
}
body.light-mode .mylist-load-more-btn {
  background: rgba(139,92,246,0.10);
  border-color: rgba(120,90,200,0.24);
  color: #342052;
}
body.light-mode .mylist-load-more-count {
  color: rgba(52,32,82,0.58);
}

/* Light-mode card tints. */
body.light-mode .anime-seasonal-card-poster-placeholder {
  background: rgba(120,90,200,0.08);
}
body.light-mode .anime-seasonal-card-title-btn { color: #1a1130; }
body.light-mode .anime-seasonal-card-title-btn:hover { color: #4a1d96; }
body.light-mode .anime-seasonal-card-members { color: rgba(90,60,180,0.72); }
body.light-mode .anime-seasonal-card-add-btn {
  background: rgba(139,92,246,0.10);
  border-color: rgba(120,90,200,0.26);
  color: #4a1d96;
}

/* Visibility ? default state is "Top Anime"; Seasonal hidden. */
#anime-discover-seasonal-controls,
#anime-discover-seasonal-section {
  display: none !important;
}
body.anime-subtab-seasonal #anime-discover-seasonal-controls {
  display: flex !important;
}
body.anime-subtab-seasonal #anime-discover-seasonal-section {
  display: block !important;
}
/* When Seasonal is active, hide the 6 standard rows + the search-results
   section (they're irrelevant when browsing by season). */
body.anime-subtab-seasonal #anime-discover-search-section,
body.anime-subtab-seasonal #anime-discover-new-section,
body.anime-subtab-seasonal #anime-discover-years-best-section,
body.anime-subtab-seasonal #anime-discover-popular-section,
body.anime-subtab-seasonal #anime-discover-rated-section,
body.anime-subtab-seasonal #anime-discover-trending-section,
body.anime-subtab-seasonal #anime-discover-anticipated-section {
  display: none !important;
}

/* v705: Game add sheet ? back chevron for two-level status flow.
   The .sas-prompt becomes a flex row containing the back arrow + label
   when the user drills into the "Playing" sub-screen. */
.sas-prompt:has(> .sas-back-btn) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
}
.sas-back-btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: background-color 120ms ease, color 120ms ease;
}
.sas-back-btn:active {
  background: rgba(255, 255, 255, 0.10);
}
body.light-mode .sas-back-btn {
  color: rgba(20, 15, 40, 0.78);
}
body.light-mode .sas-back-btn:active {
  background: rgba(20, 15, 40, 0.08);
}

/* =======================================================================
   v706 ? DM redesign ? Profile slide-from-right ? Followers bottom sheet
   ======================================================================= */

/* -- DM: Typography back to DM Sans / Sora (replaces v280 Aptos) ------- */
.direct-messages-page,
.direct-messages-page *,
.dm-compose-card,
.dm-compose-card * {
  font-family: 'Sohne', system-ui, -apple-system, sans-serif !important;
}
.direct-messages-title-wrap strong,
.direct-messages-title-wrap .creator-name,
.direct-messages-title-wrap .creator-name-wrap {
  font-family: 'Sohne', system-ui, sans-serif !important;
}

/* -- DM: Background ? matches app's standard dark canvas -------------- */
.direct-messages-page {
  background:
    radial-gradient(circle at 12% 8%,  rgba(245,158,11,0.08),  transparent 26%),
    radial-gradient(circle at 84% 10%, rgba(124,58,237,0.22),  transparent 30%),
    radial-gradient(circle at 60% 90%, rgba(34,211,238,0.06),  transparent 28%),
    linear-gradient(135deg, #050410 0%, #120d26 48%, #050410 100%) !important;
}

/* -- DM: Topbar ------------------------------------------------------- */
.direct-messages-topbar {
  background: rgba(5,4,16,0.86) !important;
  border-bottom: 1px solid rgba(167,139,250,0.14) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.direct-messages-close {
  background: rgba(255,255,255,0.055) !important;
  border: 1px solid rgba(196,181,253,0.20) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04) !important;
}
.direct-messages-close:active { transform: scale(0.90) !important; }

/* -- DM: Chat list rows ? app-standard glass card ---------------------- */
.direct-messages-page .dm-chat-row {
  background: linear-gradient(145deg, rgba(18,12,38,0.92), rgba(8,6,20,0.94)) !important;
  border: 1px solid rgba(167,139,250,0.18) !important;
  border-radius: 22px !important;
  padding: 13px 15px !important;
  margin-bottom: 9px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(255,255,255,0.03) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s cubic-bezier(0.22,1,0.36,1) !important;
}
.direct-messages-page .dm-chat-row:active {
  transform: scale(0.984) !important;
  background: linear-gradient(145deg, rgba(26,18,52,0.94), rgba(12,8,28,0.96)) !important;
}
.direct-messages-page .dm-chat-row img {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(167,139,250,0.28) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.12) !important;
}
.direct-messages-page .dm-chat-row.unread {
  border-color: rgba(167,139,250,0.32) !important;
  background: linear-gradient(145deg, rgba(28,16,58,0.94), rgba(12,8,28,0.96)) !important;
}
.direct-messages-page .dm-chat-row.unread img {
  border-color: rgba(167,139,250,0.50) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.22), 0 0 16px rgba(167,139,250,0.14) !important;
}

/* Chat copy typography ? name WHITE, 2px bigger than before */
.direct-messages-page .dm-chat-copy strong {
  font-size: 17.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.018em !important;
  color: #ffffff !important;
}
.direct-messages-page .dm-chat-copy strong::after { display: none !important; }
.direct-messages-page .dm-chat-row.unread .dm-chat-copy strong::after {
  display: inline-block !important;
  width: 7px !important; height: 7px !important;
  border-radius: 50% !important;
  background: #a78bfa !important;
  margin-left: 8px !important;
  vertical-align: middle !important;
  box-shadow: 0 0 10px rgba(167,139,250,0.60) !important;
}
/* Preview / last-message text ? app secondary text colour */
.direct-messages-page .dm-chat-copy span {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #8f86aa !important;
  margin-top: 3px !important;
}
/* Timestamp top-right */
.direct-messages-page .dm-chat-row em {
  position: absolute !important;
  top: 13px !important; right: 15px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  color: rgba(196,181,253,0.44) !important;
}

/* -- DM: Request cards ? same glass card language ---------------------- */
.direct-messages-page .dm-request-card {
  background: linear-gradient(145deg, rgba(18,12,38,0.92), rgba(8,6,20,0.94)) !important;
  border: 1px solid rgba(167,139,250,0.18) !important;
  border-radius: 22px !important;
  padding: 13px 15px !important;
  margin-bottom: 9px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.22) !important;
}
.direct-messages-page .dm-request-card.incoming {
  border-color: rgba(167,139,250,0.32) !important;
  background: linear-gradient(145deg, rgba(38,22,70,0.96), rgba(10,7,24,0.96)) !important;
}
/* Name in request cards */
.direct-messages-page .dm-request-copy strong {
  font-size: 17.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.018em !important;
}

/* -- DM: Message bubbles ---------------------------------------------- */
.direct-messages-page .dm-bubble-row { gap: 6px !important; }
.direct-messages-page .dm-bubble-row.mine .dm-bubble {
  /* Exact same purple gradient used everywhere in the app */
  background: linear-gradient(135deg, #7c3aed, #9333ea) !important;
  border-radius: 20px 20px 5px 20px !important;
  padding: 10px 15px 8px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.48 !important;
  box-shadow: 0 6px 22px rgba(124,58,237,0.30) !important;
  color: #fff !important;
}
.direct-messages-page .dm-bubble-row.theirs .dm-bubble {
  /* Matches the app's glass card style */
  background: linear-gradient(145deg, rgba(18,12,38,0.88), rgba(8,6,20,0.92)) !important;
  border: 1px solid rgba(167,139,250,0.18) !important;
  border-radius: 20px 20px 20px 5px !important;
  padding: 10px 15px 8px !important;
  color: #e8e3f3 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.48 !important;
}
.direct-messages-page .dm-bubble em {
  font-size: 11px !important; font-weight: 600 !important; font-style: normal !important;
  color: rgba(255,255,255,0.40) !important; margin-top: 5px !important;
  display: block !important; text-align: right !important;
}
.direct-messages-page .dm-bubble-row.theirs .dm-bubble em {
  color: rgba(196,181,253,0.42) !important;
}
.direct-messages-page .dm-message-list { gap: 9px !important; }

/* -- DM: Compose row ? matches app's floating glass pill --------------- */
.direct-messages-page .dm-compose-row {
  border: 1px solid rgba(167,139,250,0.18) !important;
  background: linear-gradient(145deg, rgba(12,9,28,0.94), rgba(6,4,16,0.96)) !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 44px rgba(0,0,0,0.42), inset 0 0 0 1px rgba(255,255,255,0.04) !important;
}
.direct-messages-page.dm-keyboard-active .dm-compose-row {
  border-color: rgba(167,139,250,0.26) !important;
  background: linear-gradient(145deg, rgba(16,11,36,0.96), rgba(8,6,20,0.98)) !important;
}
.direct-messages-page .dm-compose-row input {
  color: #F8F5EF !important;
  font-weight: 400 !important;
}
.direct-messages-page .dm-compose-row input::placeholder {
  color: #5a5074 !important;
}
/* Send button ? matches app's primary CTA */
.direct-messages-page .dm-send-btn {
  background: linear-gradient(135deg, #7c3aed, #9333ea) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px rgba(124,58,237,0.32) !important;
  border-radius: 999px !important;
}
.direct-messages-page .dm-photo-upload-btn {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(196,181,253,0.14) !important;
  color: #a99fc4 !important;
  border-radius: 999px !important;
}

/* -- DM: Subtabs ? underline style, app accent colour ----------------- */
.direct-messages-page .dm-subtabs {
  border-bottom-color: rgba(167,139,250,0.14) !important;
}
.direct-messages-page .dm-subtabs button {
  color: #8f86aa !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
}
.direct-messages-page .dm-subtabs button.active { color: #F8F5EF !important; }
.direct-messages-page .dm-subtabs button::after { background: #a78bfa !important; }

/* -- DM: Search strip -------------------------------------------------- */
.direct-messages-page .dm-search-strip {
  background: linear-gradient(145deg, rgba(18,12,38,0.88), rgba(8,6,20,0.92)) !important;
  border: 1px solid rgba(167,139,250,0.16) !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18) !important;
}
.direct-messages-page .dm-search-strip input {
  font-size: 15px !important;
  font-weight: 400 !important;
  padding: 13px 16px !important;
  color: #F8F5EF !important;
}
.direct-messages-page .dm-search-strip input::placeholder { color: #5a5074 !important; }

/* -- DM: Empty state ? app card look ----------------------------------- */
.direct-messages-page .dm-empty-card {
  background: linear-gradient(145deg, rgba(18,12,38,0.86), rgba(8,6,20,0.90)) !important;
  border: 1px solid rgba(167,139,250,0.16) !important;
  border-radius: 26px !important;
  box-shadow: 0 18px 46px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.03) !important;
  padding: 32px 22px !important;
}
.direct-messages-page .dm-empty-card strong {
  font-family: 'Sohne', system-ui, sans-serif !important;
  font-size: 19px !important; font-weight: 800 !important;
  letter-spacing: -0.02em !important; color: #fff !important;
  display: block !important; margin-bottom: 8px !important;
}
.direct-messages-page .dm-empty-card {
  color: #8f86aa !important;
  font-size: 13.5px !important; line-height: 1.55 !important;
}

/* -- DM: Section labels ? matches app eyebrow style ------------------- */
.direct-messages-page .dm-section-label {
  color: #a78bfa !important;
  font-size: 10.5px !important; font-weight: 900 !important;
  letter-spacing: 0.12em !important; padding: 12px 4px 5px !important;
  text-transform: uppercase !important;
}

/* -- DM: User search results ------------------------------------------- */
.direct-messages-page .dm-user-result strong {
  font-size: 17.5px !important; font-weight: 700 !important;
  letter-spacing: -0.018em !important; color: #ffffff !important;
}
.direct-messages-page .dm-user-result span {
  color: #8f86aa !important; font-size: 13px !important;
}

/* -- DM: Action buttons ? app purple CTA + ghost secondary ------------- */
.direct-messages-page .dm-action-accept,
.direct-messages-page .dm-action-open,
.direct-messages-page .dm-action.accept {
  background: linear-gradient(135deg, #7c3aed, #9333ea) !important;
  box-shadow: 0 4px 14px rgba(124,58,237,0.28) !important;
  font-weight: 700 !important; font-size: 13px !important;
  color: #fff !important;
}
.direct-messages-page .dm-action.decline,
.direct-messages-page .dm-action-sent {
  background: rgba(255,255,255,0.055) !important;
  border: 1px solid rgba(196,181,253,0.20) !important;
  color: #a99fc4 !important;
  font-weight: 700 !important; font-size: 13px !important;
}

/* -- DM: Thread head ? sticky user bar in chat view ------------------- */
.direct-messages-page .dm-thread-head {
  /* v950: dropped `backdrop-filter: blur(24px)` — element is position:sticky,
     so Safari was rasterizing blur every scroll frame. rgba 0.90 -> 0.94 keeps the look. */
  background: rgba(5,4,16,0.94) !important;
  border-bottom: 1px solid rgba(167,139,250,0.12) !important;
}

/* -- DM: Swipe-item wrapper ? fix clipped border-radius & spacing ------ */
/* 12-pwa-header-continuity.css sets overflow:hidden + border-radius:0 on
   .dm-chat-swipe-item, which squares off the card corners. We raise the
   wrapper's radius to match the card so overflow:hidden clips to the same
   rounded shape. Spacing goes here (not on the inner button) so it isn't
   swallowed by overflow:hidden. */
.direct-messages-page .dm-chat-swipe-item {
  border-radius: 22px !important;
  overflow: hidden !important;
  margin-bottom: 10px !important;
}
.direct-messages-page .dm-chat-swipe-item:last-child { margin-bottom: 0 !important; }
/* Kill gap on the list ? spacing now handled entirely by margin-bottom above */
.direct-messages-page .dm-chat-list { gap: 0 !important; }
/* Remove the margin-bottom from the inner button (can't escape overflow:hidden) */
.direct-messages-page .dm-chat-row {
  margin-bottom: 0 !important;
}

/* -- DM: Compose / new-chat button in topbar -------------------------- */
.direct-messages-new-btn {
  background: rgba(255,255,255,0.055) !important;
  border: 1px solid rgba(196,181,253,0.20) !important;
  border-radius: 14px !important;
  color: #F8F5EF !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04) !important;
  transition: background 0.15s ease, transform 0.15s cubic-bezier(0.22,1,0.36,1) !important;
}
.direct-messages-new-btn:active { transform: scale(0.91) !important; }
body.light-mode .direct-messages-new-btn {
  background: rgba(124,58,237,0.06) !important;
  border-color: rgba(20,20,20,0.10) !important;
  color: #5b21b6 !important;
}

/* -- DM: Light mode ---------------------------------------------------- */
body.light-mode .direct-messages-page {
  background:
    radial-gradient(circle at 12% 8%, rgba(245,158,11,0.10), transparent 26%),
    radial-gradient(circle at 84% 10%, rgba(124,58,237,0.12), transparent 30%),
    linear-gradient(135deg, #f4f1fb 0%, #ffffff 48%, #ede9fe 100%) !important;
}
body.light-mode .direct-messages-topbar {
  background: rgba(248,245,255,0.88) !important;
  border-bottom-color: rgba(124,58,237,0.12) !important;
}
body.light-mode .direct-messages-page .dm-chat-row {
  background: rgba(255,255,255,0.82) !important;
  border-color: rgba(124,58,237,0.14) !important;
  box-shadow: 0 8px 22px rgba(44,24,96,0.08), inset 0 0 0 1px rgba(255,255,255,0.60) !important;
}
body.light-mode .direct-messages-page .dm-chat-row.unread {
  background: rgba(237,233,254,0.75) !important;
  border-color: rgba(20,20,20,0.12) !important;
}
/* In light mode names should be dark, not white */
body.light-mode .direct-messages-page .dm-chat-copy strong { color: #171717 !important; }
body.light-mode .direct-messages-page .dm-chat-copy span  { color: #6b5b8f !important; }
body.light-mode .direct-messages-page .dm-chat-row em     { color: rgba(92,56,176,0.44) !important; }
body.light-mode .direct-messages-page .dm-request-copy strong { color: #171717 !important; }
body.light-mode .direct-messages-page .dm-request-card {
  background: rgba(255,255,255,0.82) !important;
  border-color: rgba(124,58,237,0.14) !important;
  box-shadow: 0 8px 22px rgba(44,24,96,0.08) !important;
}
body.light-mode .direct-messages-page .dm-request-card.incoming {
  background: rgba(237,233,254,0.65) !important;
  border-color: rgba(20,20,20,0.12) !important;
}
body.light-mode .direct-messages-page .dm-bubble-row.theirs .dm-bubble {
  background: rgba(255,255,255,0.88) !important;
  border-color: rgba(124,58,237,0.14) !important;
  color: #1a0f38 !important;
}
body.light-mode .direct-messages-page .dm-bubble em               { color: rgba(18,8,46,0.38) !important; }
body.light-mode .direct-messages-page .dm-bubble-row.theirs .dm-bubble em { color: rgba(92,56,176,0.40) !important; }
body.light-mode .direct-messages-page .dm-compose-row {
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(20,20,20,0.10) !important;
  box-shadow: 0 10px 32px rgba(44,24,96,0.10) !important;
}
body.light-mode .direct-messages-page .dm-compose-row input { color: #171717 !important; }
body.light-mode .direct-messages-page .dm-compose-row input::placeholder { color: #a090c0 !important; }
body.light-mode .direct-messages-page .dm-photo-upload-btn {
  background: rgba(124,58,237,0.06) !important; border-color: rgba(124,58,237,0.14) !important;
  color: #5b21b6 !important;
}
body.light-mode .direct-messages-page .dm-empty-card {
  background: rgba(255,255,255,0.78) !important; border-color: rgba(124,58,237,0.12) !important;
  box-shadow: 0 14px 36px rgba(44,24,96,0.10) !important;
}
body.light-mode .direct-messages-page .dm-empty-card strong { color: #171717 !important; }
body.light-mode .direct-messages-page .dm-empty-card        { color: #6b5b8f !important; }
body.light-mode .direct-messages-page .dm-search-strip {
  background: rgba(255,255,255,0.78) !important; border-color: rgba(124,58,237,0.12) !important;
}
body.light-mode .direct-messages-page .dm-search-strip input { color: #171717 !important; }
body.light-mode .direct-messages-page .dm-search-strip input::placeholder { color: #a090c0 !important; }
body.light-mode .direct-messages-page .dm-subtabs { border-bottom-color: rgba(124,58,237,0.14) !important; }
body.light-mode .direct-messages-page .dm-subtabs button       { color: #6b5b8f !important; }
body.light-mode .direct-messages-page .dm-subtabs button.active { color: #171717 !important; }
body.light-mode .direct-messages-page .dm-subtabs button::after { background: #7c3aed !important; }
body.light-mode .direct-messages-page .dm-section-label { color: #7c3aed !important; }
body.light-mode .direct-messages-page .dm-user-result strong { color: #171717 !important; }
body.light-mode .direct-messages-page .dm-user-result span   { color: #6b5b8f !important; }
body.light-mode .direct-messages-page .dm-thread-head {
  background: rgba(248,245,255,0.92) !important; border-bottom-color: rgba(124,58,237,0.10) !important;
}
body.light-mode .direct-messages-page .dm-action.decline,
body.light-mode .direct-messages-page .dm-action-sent {
  background: rgba(124,58,237,0.06) !important; border-color: rgba(124,58,237,0.14) !important;
  color: #5b21b6 !important;
}

/* -------------------------------------------------------------------------
   v706: Profile page ? slide in from right, slide out to right
   ------------------------------------------------------------------------- */
/* Base: page starts off-screen right whenever it is made display:block */
.profile-page {
  transform: translateX(100%);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  contain: layout paint style;
}

@keyframes profileEnterRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0);    }
}
/* v10.977: `@keyframes profileExitRight` removed. It used to drive the
   .profile-page-closing slide-out, but that path now runs through an
   inline JS transition in closeProfileWithAnimation() so the close
   interpolates smoothly from the page's current visual state instead
   of snapping to the keyframe's from-state for one paint frame
   (the "two back animations" bug). */

/* Triggered by openProfilePageShell via double-rAF */
.profile-page.profile-page-open {
  animation: profileEnterRight 0.40s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* v10.977: animation removed — the slide-out is now driven by inline
   transition in closeProfileWithAnimation(). The class itself is still
   needed as a re-entry guard (line 4143 of 15-profile-settings.js
   checks `profilePage.classList.contains('profile-page-closing')`) and
   to block accidental taps during the close. */
.profile-page.profile-page-closing {
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   v706: Followers / Following ? full-width bottom sheet, slides from bottom
   ------------------------------------------------------------------------- */
.profile-social-overlay {
  position: fixed;
  inset: 0;
  z-index: 5020;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: transparent;
  /* v950: dropped `backdrop-filter 0.28s` animation — animating GPU blur on a
     full-viewport overlay is one of the most expensive things you can do on iPhone.
     Now: open/close just toggles a fixed blur and the background fade does the work. */
  transition: background 0.28s ease;
  pointer-events: none;
}
.profile-social-overlay.profile-social-open {
  background: rgba(0,0,0,0.64);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: auto;
}

.profile-social-sheet-v2 {
  width: 100%;
  max-width: 560px;
  max-height: min(78dvh, 720px);
  min-height: 32dvh;
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.06), transparent 48%),
    linear-gradient(180deg, rgba(22,22,24,0.985) 0%, rgba(10,10,12,1) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-bottom: 0;
  border-radius: 30px 30px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 -24px 72px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.05);
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
}
.profile-social-overlay.profile-social-open .profile-social-sheet-v2 {
  transform: translateY(0);
}

.profile-social-drag-handle {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: 10px 0 2px;
  cursor: grab;
}
.profile-social-drag-handle:active { cursor: grabbing; }
.profile-social-drag-pip {
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
}

.profile-social-header-v2 {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.profile-social-heading-v2 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.profile-social-kicker-v2 {
  color: rgba(214,205,232,0.58);
  font-family: 'Sohne', 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  line-height: 1;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.profile-social-title-row-v2 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.profile-social-title-v2 {
  min-width: 0;
  color: #f5f5f7;
  font-family: 'Sohne', 'DM Sans', system-ui, sans-serif;
  font-size: clamp(22px, 5vw, 26px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.035em;
}
.profile-social-count-v2 {
  flex: 0 0 auto;
  min-width: 30px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(245,245,247,0.88);
  font-family: 'Sohne', 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  line-height: 28px;
  font-weight: 700;
  text-align: center;
}
.profile-social-summary-v2 {
  color: rgba(214,205,232,0.76);
  font-family: 'Sohne', 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 500;
}
.profile-social-close-v2 {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(245,245,247,0.72);
  transition: background 0.14s ease, transform 0.14s cubic-bezier(0.22,1,0.36,1), color 0.14s ease;
  flex-shrink: 0;
}
.profile-social-close-v2:active {
  transform: scale(0.92);
  background: rgba(255,255,255,0.11);
}

.profile-social-body-v2 {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px 8px;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.profile-social-body-v2::-webkit-scrollbar { display: none; }

/* User rows inside the new sheet (override the old .profile-social-user-row) */
.profile-social-body-v2 .profile-social-user-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center !important;
  gap: 12px 14px !important;
  padding: 14px !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  margin-bottom: 10px !important;
  justify-content: flex-start !important;
  transition: background 0.14s ease, transform 0.14s cubic-bezier(0.22,1,0.36,1), border-color 0.14s ease !important;
}
.profile-social-body-v2 .profile-social-user-row:active {
  transform: translateY(1px) scale(0.992) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.032)) !important;
  border-color: rgba(255,255,255,0.11) !important;
}
.profile-social-body-v2 .profile-social-avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.22) !important;
  flex: 0 0 auto !important;
  object-fit: cover !important;
}
.profile-social-body-v2 .profile-social-user-main {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #f5f5f7 !important;
  text-align: left !important;
  cursor: pointer !important;
}
.profile-social-body-v2 .profile-social-user-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.profile-social-body-v2 .profile-social-user-name {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #f5f5f7 !important;
  font-family: 'Sohne', 'DM Sans', system-ui, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: -0.018em !important;
}
.profile-social-body-v2 .profile-social-user-meta {
  display: block !important;
  color: rgba(214,205,232,0.62) !important;
  font-family: 'Sohne', 'DM Sans', system-ui, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}
.profile-social-body-v2 .friend-actions-group {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
.profile-social-body-v2 .profile-social-view-btn,
.profile-social-body-v2 .friend-action-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  background: rgba(255,255,255,0.05) !important;
  color: #f5f5f7 !important;
  font-family: 'Sohne', 'DM Sans', system-ui, sans-serif !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.12s cubic-bezier(0.22,1,0.36,1) !important;
}
.profile-social-body-v2 .profile-social-view-btn {
  background: rgba(255,255,255,0.05) !important;
  color: rgba(245,245,247,0.92) !important;
}
.profile-social-body-v2 .profile-social-view-btn:active,
.profile-social-body-v2 .friend-action-btn:active {
  transform: scale(0.97) !important;
}
.profile-social-body-v2 .friend-add-btn {
  background: rgba(167,139,250,0.14) !important;
  border-color: rgba(167,139,250,0.24) !important;
  color: #ece4ff !important;
}
.profile-social-body-v2 .friend-pending-btn {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: rgba(214,205,232,0.78) !important;
}
.profile-social-body-v2 .friend-pending-btn[disabled] {
  opacity: 1 !important;
}
.profile-social-body-v2 .friend-accept-btn {
  background: rgba(16,185,129,0.14) !important;
  border-color: rgba(16,185,129,0.26) !important;
  color: #bdf1dd !important;
}
.profile-social-state-card {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 22px 18px 30px;
  text-align: center;
  color: rgba(214,205,232,0.74);
  font-family: 'Sohne', 'DM Sans', system-ui, sans-serif;
}
.profile-social-state-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
}
.profile-social-state-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(245,245,247,0.85);
  font-size: 26px;
  line-height: 1;
}
.profile-social-state-spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.12);
  border-top-color: rgba(196,181,253,0.88);
  animation: profileSocialSpin 0.85s linear infinite;
}
@keyframes profileSocialSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 430px) {
  .profile-social-sheet-v2 {
    max-height: 82dvh;
  }
  .profile-social-header-v2 {
    padding: 14px 16px 15px;
  }
  .profile-social-body-v2 {
    padding: 12px 12px 6px;
  }
  .profile-social-body-v2 .profile-social-user-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .profile-social-body-v2 .friend-actions-group {
    width: 100% !important;
    justify-content: flex-start !important;
    padding-left: 60px;
  }
}

@media (max-width: 370px) {
  .profile-social-body-v2 .friend-actions-group {
    padding-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-social-overlay,
  .profile-social-sheet-v2,
  .profile-social-body-v2 .profile-social-user-row,
  .profile-social-body-v2 .profile-social-view-btn,
  .profile-social-body-v2 .friend-action-btn,
  .profile-social-close-v2 {
    transition: none !important;
    animation: none !important;
  }
}

/* Light mode ? followers/following sheet */
body.light-mode .profile-social-overlay.profile-social-open {
  background: rgba(15,23,42,0.16);
}
body.light-mode .profile-social-sheet-v2 {
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.88), transparent 48%),
    linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
  border-color: rgba(15,23,42,0.08);
  box-shadow: 0 -18px 48px rgba(15,23,42,0.12), inset 0 1px 0 rgba(255,255,255,0.9);
}
body.light-mode .profile-social-drag-pip { background: rgba(15,23,42,0.16); }
body.light-mode .profile-social-header-v2 { border-bottom-color: rgba(15,23,42,0.08); }
body.light-mode .profile-social-kicker-v2,
body.light-mode .profile-social-summary-v2 { color: rgba(15,23,42,0.58); }
body.light-mode .profile-social-title-v2 { color: #111827; }
body.light-mode .profile-social-count-v2 {
  background: rgba(15,23,42,0.05);
  border-color: rgba(15,23,42,0.08);
  color: #111827;
}
body.light-mode .profile-social-close-v2 {
  background: rgba(15,23,42,0.05);
  border-color: rgba(15,23,42,0.08);
  color: rgba(17,24,39,0.72);
}
body.light-mode .profile-social-body-v2 .profile-social-user-row {
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.84)) !important;
  border-color: rgba(15,23,42,0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 10px 24px rgba(15,23,42,0.05);
}
body.light-mode .profile-social-body-v2 .profile-social-avatar {
  border-color: rgba(15,23,42,0.08) !important;
}
body.light-mode .profile-social-body-v2 .profile-social-user-main,
body.light-mode .profile-social-body-v2 .profile-social-user-name { color: #111827 !important; }
body.light-mode .profile-social-body-v2 .profile-social-user-meta {
  color: rgba(55,65,81,0.68) !important;
}
body.light-mode .profile-social-body-v2 .profile-social-view-btn {
  background: rgba(15,23,42,0.04) !important;
  border-color: rgba(15,23,42,0.1) !important;
  color: #111827 !important;
}
body.light-mode .profile-social-body-v2 .friend-action-btn {
  background: rgba(15,23,42,0.04) !important;
  border-color: rgba(15,23,42,0.1) !important;
  color: #111827 !important;
}
body.light-mode .profile-social-body-v2 .friend-add-btn {
  background: rgba(124,58,237,0.08) !important;
  border-color: rgba(124,58,237,0.14) !important;
  color: #5b21b6 !important;
}
body.light-mode .profile-social-body-v2 .friend-accept-btn {
  background: rgba(16,185,129,0.1) !important;
  border-color: rgba(16,185,129,0.22) !important;
  color: #065f46 !important;
}
body.light-mode .profile-social-state-card {
  color: rgba(55,65,81,0.72);
}
body.light-mode .profile-social-state-icon {
  background: rgba(15,23,42,0.05);
  border-color: rgba(15,23,42,0.08);
  color: #111827;
}
body.light-mode .profile-social-state-spinner {
  border-color: rgba(15,23,42,0.12);
  border-top-color: rgba(91,33,182,0.78);
}

/* =========================================================================
   v712 ? DM page: sleek, modern, simple.
   #direct-messages-page (ID) beats every competing class rule everywhere.
   Design direction: clean flat rows + solid-color bubbles. No heavy gradients.
   ========================================================================= */

/* -- Page ------------------------------------------------------------ */
#direct-messages-page {
  background: #0c0a1e !important;
}

/* -- Fonts ----------------------------------------------------------- */
#direct-messages-page,
#direct-messages-page * {
  font-family: 'Sohne', system-ui, -apple-system, sans-serif !important;
}

/* -- Topbar ---------------------------------------------------------- */
#direct-messages-page .direct-messages-topbar {
  background: #0c0a1e !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#direct-messages-page .direct-messages-title-wrap {
  flex: 1 !important;
  justify-content: flex-start !important;
  padding-bottom: 0 !important;
}
#direct-messages-page .direct-messages-title-wrap strong,
#direct-messages-page .direct-messages-title-wrap .creator-name,
#direct-messages-page .direct-messages-title-wrap .creator-name-wrap {
  font-family: 'Sohne', system-ui, sans-serif !important;
  font-size: clamp(28px, 7vw, 34px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  color: #ffffff !important;
  line-height: 1 !important;
}
/* Icon buttons */
#direct-messages-page .direct-messages-close,
#direct-messages-page .direct-messages-new-btn {
  width: 40px !important;
  height: 40px !important;
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 12px !important;
  color: rgba(255,255,255,0.70) !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
  transition: background 0.14s ease !important;
}
#direct-messages-page .direct-messages-close:active,
#direct-messages-page .direct-messages-new-btn:active {
  background: rgba(255,255,255,0.11) !important;
}

/* -- Subtabs --------------------------------------------------------- */
#direct-messages-page .dm-subtabs {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
#direct-messages-page .dm-subtabs button {
  background: transparent !important;
  border-radius: 0 !important;
  color: rgba(255,255,255,0.35) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}
#direct-messages-page .dm-subtabs button.active { color: #ffffff !important; }
#direct-messages-page .dm-subtabs button::after { background: #F3EEE6 !important; }

/* -- Chat list ------------------------------------------------------- */
#direct-messages-page .dm-chat-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
#direct-messages-page .dm-chat-swipe-item {
  border-radius: 0 !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}

/* -- Chat row -------------------------------------------------------- */
#direct-messages-page .dm-chat-row {
  width: 100% !important;
  min-height: 80px !important;
  padding: 14px 6px 14px 2px !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  gap: 14px !important;
  transition: background 0.14s ease !important;
}
#direct-messages-page .dm-chat-row:active {
  transform: none !important;
  background: rgba(255,255,255,0.04) !important;
}
/* Unread ? faint left bar, very subtle fill */
#direct-messages-page .dm-chat-row.unread {
  background: rgba(139,92,246,0.06) !important;
  border-left: 2px solid rgba(167,139,250,0.50) !important;
  padding-left: 13px !important;
}

/* Avatar */
#direct-messages-page .dm-chat-row img {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
}
#direct-messages-page .dm-chat-row.unread img {
  border-color: rgba(167,139,250,0.28) !important;
}

/* -- Name ? the fix: `strong span` beats `span` in specificity ------- */
/* strong itself */
#direct-messages-page .dm-chat-copy strong {
  display: block !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  letter-spacing: -0.015em !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* span / creator-name INSIDE strong ? 1 extra element = wins over .dm-chat-copy span */
#direct-messages-page .dm-chat-copy strong span,
#direct-messages-page .dm-chat-copy strong .creator-name,
#direct-messages-page .dm-chat-copy strong .creator-name-wrap {
  color: #ffffff !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  display: inline !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Unread dot after name */
#direct-messages-page .dm-chat-copy strong::after { display: none !important; }
#direct-messages-page .dm-chat-row.unread .dm-chat-copy strong::after {
  content: '' !important;
  display: inline-block !important;
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  background: #a78bfa !important;
  margin-left: 7px !important;
  vertical-align: middle !important;
}

/* Preview text ? the DIRECT child span, not the one inside strong */
#direct-messages-page .dm-chat-copy > span,
#direct-messages-page .dm-chat-copy span:not(strong span) {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.40) !important;
  margin-top: 4px !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Timestamp */
#direct-messages-page .dm-chat-row em {
  position: absolute !important;
  top: 15px !important;
  right: 6px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  color: rgba(255,255,255,0.60) !important;
}

/* -- Request cards --------------------------------------------------- */
#direct-messages-page .dm-request-card {
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 0 !important;
  padding: 14px 6px !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#direct-messages-page .dm-request-card.incoming {
  background: rgba(139,92,246,0.07) !important;
  border-left: 3px solid #8b5cf6 !important;
  padding-left: 13px !important;
}
/* Request name ? same fix */
#direct-messages-page .dm-request-copy strong {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
}
#direct-messages-page .dm-request-copy strong span,
#direct-messages-page .dm-request-copy strong .creator-name {
  color: #ffffff !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}
#direct-messages-page .dm-request-copy em {
  color: rgba(255,255,255,0.40) !important;
  font-size: 13px !important;
  font-style: normal !important;
}

/* -- Message bubbles ------------------------------------------------- */
#direct-messages-page .dm-bubble-row { gap: 5px !important; }

/* Mine */
#direct-messages-page .dm-bubble-row.mine .dm-bubble {
  background: #7c3aed !important;
  border-radius: 18px 18px 4px 18px !important;
  padding: 11px 15px 10px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.50 !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Theirs ? just slightly lifted from background */
#direct-messages-page .dm-bubble-row.theirs .dm-bubble {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 18px 18px 18px 4px !important;
  padding: 11px 15px 10px !important;
  color: rgba(255,255,255,0.88) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.50 !important;
}

/* Timestamp inside bubble */
#direct-messages-page .dm-bubble em {
  font-size: 10.5px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  color: rgba(255,255,255,0.40) !important;
  margin-top: 4px !important;
  display: block !important;
  text-align: right !important;
}
#direct-messages-page .dm-bubble-row.theirs .dm-bubble em {
  color: rgba(196,181,253,0.45) !important;
}
#direct-messages-page .dm-message-list { gap: 8px !important; }

/* -- Chat screen: remove left/right safe zones ----------------------- */
/* The content wrapper had 12?14px horizontal padding acting as "safe zones".
   Zero it out so messages and the compose bar use the full width. */
#direct-messages-page .direct-messages-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Message list gets its own minimal padding so bubbles don't touch edges */
#direct-messages-page .dm-message-list {
  padding-left: 10px !important;
  padding-right: 10px !important;
}
/* Compose bar: extend edge-to-edge with only a 4px gap each side */
#direct-messages-page .dm-compose-row {
  width: min(calc(100% - 8px), 720px) !important;
}

/* -- Compose row ----------------------------------------------------- */
/* v720 keyboard-gate approach:
   TWO STATES, completely separate `bottom` rules:

   KEYBOARD OUT (:not(.dm-keyboard-active))
     ? `bottom` is FORCED to env(safe-area-inset-bottom) ? ignores
       --dm-keyboard-bottom entirely so a stale variable can't hold
       the bar up. Spring transition eases it back down.

   KEYBOARD UP (.dm-keyboard-active)
     ? `bottom` tracks --dm-keyboard-bottom with NO transition so it
       stays pixel-perfect flush with the keyboard on every frame.
*/
#direct-messages-page .dm-compose-row {
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
  will-change: bottom !important;
}

/* Keyboard OUT ? always at safe-area bottom, spring transition */
#direct-messages-page:not(.dm-keyboard-active) .dm-compose-row {
  bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
  transition:
    bottom 340ms cubic-bezier(0.22, 1, 0.36, 1),
    background 160ms ease,
    border-color 160ms ease !important;
}

/* Keyboard UP ? tracks variable, no bottom transition */
#direct-messages-page.dm-keyboard-active .dm-compose-row {
  bottom: calc(var(--dm-keyboard-bottom, 0px)) !important;
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(167,139,250,0.18) !important;
  transition: background 160ms ease, border-color 160ms ease !important;
}
#direct-messages-page .dm-compose-row input {
  color: #ffffff !important;
  font-weight: 400 !important;
  background: transparent !important;
  border: 0 !important;
}
#direct-messages-page .dm-compose-row input::placeholder {
  color: rgba(255,255,255,0.28) !important;
}
/* Send button */
#direct-messages-page .dm-send-btn {
  background: #7c3aed !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  border: 0 !important;
}
#direct-messages-page .dm-photo-upload-btn {
  background: transparent !important;
  border: 0 !important;
  color: rgba(255,255,255,0.45) !important;
}

/* -- Section labels -------------------------------------------------- */
#direct-messages-page .dm-section-label {
  color: rgba(255,255,255,0.32) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  padding: 14px 4px 6px !important;
}

/* -- Search strip ---------------------------------------------------- */
#direct-messages-page .dm-search-strip {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
#direct-messages-page .dm-search-strip input {
  color: #ffffff !important; font-size: 15px !important;
  font-weight: 400 !important; padding: 12px 16px !important;
}
#direct-messages-page .dm-search-strip input::placeholder { color: rgba(255,255,255,0.28) !important; }

/* -- User search results --------------------------------------------- */
#direct-messages-page .dm-user-result strong,
#direct-messages-page .dm-user-result strong * {
  font-size: 15.5px !important; font-weight: 600 !important;
  color: #ffffff !important; letter-spacing: -0.01em !important;
}
#direct-messages-page .dm-user-result span {
  color: rgba(255,255,255,0.40) !important; font-size: 13px !important;
}

/* -- Empty state ----------------------------------------------------- */
#direct-messages-page .dm-empty-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 20px !important;
  padding: 36px 24px !important;
  text-align: center !important;
  box-shadow: none !important;
}
#direct-messages-page .dm-empty-card strong {
  font-size: 18px !important; font-weight: 700 !important;
  color: #fff !important; display: block !important;
  margin-bottom: 8px !important; letter-spacing: -0.02em !important;
}
#direct-messages-page .dm-empty-card {
  color: rgba(255,255,255,0.38) !important;
  font-size: 13.5px !important; line-height: 1.55 !important;
}

/* -- Action buttons -------------------------------------------------- */
#direct-messages-page .dm-action-accept,
#direct-messages-page .dm-action-open,
#direct-messages-page .dm-action.accept {
  background: #7c3aed !important; color: #fff !important;
  font-weight: 600 !important; font-size: 13px !important;
  box-shadow: 0 2px 10px rgba(124,58,237,0.36) !important;
}
#direct-messages-page .dm-action.decline,
#direct-messages-page .dm-action-sent {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.11) !important;
  color: rgba(255,255,255,0.55) !important;
  font-weight: 600 !important; font-size: 13px !important;
}

/* -- Thread head ----------------------------------------------------- */
#direct-messages-page .dm-thread-head {
  /* v950: dropped blur — sticky element, was rasterizing on every scroll frame.
     rgba 0.96 alpha already reads opaque. */
  background: rgba(8,6,28,0.97) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

/* v921: Direct Messages true-dark redesign
   Keeps behavior intact, replaces the last legacy-looking layer with
   the same cleaner true-dark language used elsewhere in the app. */
#direct-messages-page {
  background: #0E0E0E !important;
}
#direct-messages-page .direct-messages-topbar {
  background: #0E0E0E !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  /* v950: was `blur(10px) saturate(120%)` — capped to 10px and dropped saturate (2× GPU op). */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
#direct-messages-page .direct-messages-title-wrap {
  gap: 4px !important;
}
#direct-messages-page .direct-messages-title-wrap strong,
#direct-messages-page .direct-messages-title-wrap .creator-name,
#direct-messages-page .direct-messages-title-wrap .creator-name-wrap {
  font-size: clamp(27px, 6.7vw, 33px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.05em !important;
  color: #f8f7f3 !important;
}
#direct-messages-page .direct-messages-subtitle,
#direct-messages-page .direct-messages-title-wrap span:not(.creator-role):not(.creative-team-role) {
  color: rgba(218,220,228,0.52) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}
#direct-messages-page .direct-messages-top-avatar,
#direct-messages-page .dm-thread-avatar-btn {
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: linear-gradient(180deg, rgba(27,29,37,0.96), rgba(15,16,22,0.98)) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.30) !important;
}
#direct-messages-page .direct-messages-top-avatar img,
#direct-messages-page .dm-thread-avatar-btn img {
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  border: 0 !important;
}
#direct-messages-page .direct-messages-close,
#direct-messages-page .direct-messages-new-btn,
#direct-messages-page .dm-thread-head > button:first-child {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: linear-gradient(180deg, rgba(28,31,40,0.96), rgba(17,19,26,0.98)) !important;
  color: rgba(245,246,248,0.88) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,0.24) !important;
}
#direct-messages-page .direct-messages-close,
#direct-messages-page .direct-messages-new-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
#direct-messages-page .dm-topbar-icon {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  flex: 0 0 auto !important;
  stroke: currentColor !important;
  pointer-events: none !important;
}
#direct-messages-page::before {
  background: transparent !important;
}
#direct-messages-page:not(.dm-thread-open) {
  --dm-main-topbar-h: 106px;
}
#direct-messages-page:not(.dm-thread-open) .direct-messages-topbar {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 44px !important;
  min-height: var(--dm-main-topbar-h) !important;
  height: var(--dm-main-topbar-h) !important;
  padding: calc(var(--shelfd-safe-top, 0px) + 16px) 16px 10px !important;
  align-items: center !important;
  gap: 12px !important;
}
#direct-messages-page:not(.dm-thread-open) .direct-messages-title-wrap {
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  align-self: center !important;
  padding-bottom: 0 !important;
}
#direct-messages-page:not(.dm-thread-open) .direct-messages-title-wrap strong,
#direct-messages-page:not(.dm-thread-open) .direct-messages-title-wrap .creator-name,
#direct-messages-page:not(.dm-thread-open) .direct-messages-title-wrap .creator-name-wrap {
  text-align: center !important;
}
#direct-messages-page:not(.dm-thread-open) .direct-messages-content {
  padding-top: 8px !important;
}
#direct-messages-page .direct-messages-content {
  padding-left: 12px !important;
  padding-right: 12px !important;
  padding-bottom: 132px !important;
}
@media (max-width: 700px) {
  #direct-messages-page:not(.dm-thread-open) {
    --dm-main-topbar-h: 108px;
  }
  #direct-messages-page:not(.dm-thread-open) .direct-messages-topbar {
    padding: calc(var(--shelfd-safe-top, 0px) + 17px) 13px 9px !important;
  }
}
#direct-messages-page .dm-subtabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin: 10px 0 14px !important;
  padding: 5px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,0.03) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;
}
#direct-messages-page .dm-subtabs button {
  min-height: 44px !important;
  border-radius: 14px !important;
  color: rgba(218,220,228,0.44) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
}
#direct-messages-page .dm-subtabs button.active {
  color: #f8f7f3 !important;
  background: linear-gradient(180deg, rgba(41,44,54,0.96), rgba(23,25,33,0.98)) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.20) !important;
  transform: translateY(-1px) !important;
}
#direct-messages-page .dm-subtabs button::after {
  display: none !important;
}
#direct-messages-page .dm-subtabs span {
  min-width: 18px !important;
  height: 18px !important;
  margin-left: 7px !important;
  background: #d36464 !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(11,13,18,0.90) !important;
}
#direct-messages-page .dm-chat-list {
  gap: 10px !important;
}
#direct-messages-page .dm-chat-swipe-item {
  border-radius: 20px !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
}
#direct-messages-page .dm-chat-row {
  min-height: 86px !important;
  padding: 16px 14px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(23,25,31,0.94), rgba(12,14,18,0.98)) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.18) !important;
  gap: 14px !important;
}
#direct-messages-page .dm-chat-row:active {
  background: linear-gradient(180deg, rgba(28,31,39,0.98), rgba(16,18,24,0.98)) !important;
}
#direct-messages-page .dm-chat-row.unread {
  background:
    linear-gradient(180deg, rgba(31,29,45,0.98), rgba(17,18,26,0.98)) !important;
  border: 1px solid rgba(183,168,255,0.18) !important;
  border-left: 1px solid rgba(183,168,255,0.18) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,0.20), inset 0 1px 0 rgba(194,182,255,0.05) !important;
  padding-left: 14px !important;
}
#direct-messages-page .dm-chat-row img {
  width: 56px !important;
  height: 56px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.24) !important;
}
#direct-messages-page .dm-chat-row.unread img {
  border-color: rgba(183,168,255,0.28) !important;
}
#direct-messages-page .dm-chat-copy strong {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #f8f7f3 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.16 !important;
}
#direct-messages-page .dm-chat-copy > span,
#direct-messages-page .dm-chat-copy span:not(strong span) {
  margin-top: 5px !important;
  color: rgba(214,217,225,0.48) !important;
  font-size: 13px !important;
  line-height: 1.22 !important;
}
#direct-messages-page .dm-chat-row em {
  top: 16px !important;
  right: 14px !important;
  color: rgba(214,217,225,0.50) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
#direct-messages-page .dm-chat-row.unread .dm-chat-copy strong::after {
  width: 7px !important;
  height: 7px !important;
  margin-left: 8px !important;
  background: #d2c6ff !important;
}
#direct-messages-page .dm-request-card {
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 20px !important;
  padding: 16px 14px !important;
  margin-bottom: 10px !important;
  background: linear-gradient(180deg, rgba(22,24,31,0.94), rgba(12,14,18,0.98)) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,0.16) !important;
}
#direct-messages-page .dm-request-card.incoming {
  background: linear-gradient(180deg, rgba(30,28,43,0.98), rgba(14,15,22,0.98)) !important;
  border: 1px solid rgba(183,168,255,0.16) !important;
  padding-left: 14px !important;
}
#direct-messages-page .dm-request-card > img {
  width: 54px !important;
  height: 54px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.20) !important;
}
#direct-messages-page .dm-request-copy strong {
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
}
#direct-messages-page .dm-request-copy em {
  margin-top: 5px !important;
  color: rgba(214,217,225,0.46) !important;
}
#direct-messages-page .dm-thread-panel {
  min-height: calc(100dvh - 176px) !important;
  padding-bottom: 112px !important;
}
#direct-messages-page .dm-thread-head {
  position: sticky !important;
  top: -6px !important;
  margin: -4px 0 0 !important;
  padding: 12px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(18,21,28,0.94), rgba(12,14,19,0.96)) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,0.24) !important;
  gap: 12px !important;
}
#direct-messages-page .dm-thread-head strong {
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  color: #f8f7f3 !important;
}
#direct-messages-page .dm-thread-head span {
  color: rgba(214,217,225,0.50) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
#direct-messages-page .dm-thread-empty {
  margin-top: 28px !important;
  padding: 22px 18px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,0.03) !important;
  color: rgba(214,217,225,0.46) !important;
  text-align: center !important;
}
#direct-messages-page .dm-message-list {
  gap: 12px !important;
  padding: 16px 4px 128px !important;
}
#direct-messages-page .dm-bubble-row {
  gap: 6px !important;
}
#direct-messages-page .dm-bubble-row.mine .dm-bubble,
#direct-messages-page .dm-bubble-row.theirs .dm-bubble {
  max-width: min(82vw, 430px) !important;
  padding: 12px 15px 10px !important;
  border-radius: 20px !important;
  font-size: 15px !important;
  line-height: 1.46 !important;
}
#direct-messages-page .dm-bubble-row.mine .dm-bubble {
  background: linear-gradient(180deg, #8a69ff 0%, #7355e6 100%) !important;
  color: #ffffff !important;
  border-radius: 20px 20px 8px 20px !important;
  box-shadow: 0 14px 28px rgba(73, 46, 173, 0.34) !important;
}
#direct-messages-page .dm-bubble-row.theirs .dm-bubble {
  background: linear-gradient(180deg, rgba(29,32,40,0.96), rgba(17,19,25,0.98)) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: rgba(245,246,248,0.92) !important;
  border-radius: 20px 20px 20px 8px !important;
  box-shadow: 0 12px 24px rgba(0,0,0,0.16) !important;
}
#direct-messages-page .dm-bubble small {
  display: block !important;
  margin-bottom: 7px !important;
  color: rgba(210,198,255,0.72) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}
#direct-messages-page .dm-bubble em {
  margin-top: 6px !important;
  color: rgba(255,255,255,0.52) !important;
  font-size: 10px !important;
}
#direct-messages-page .dm-bubble-row.theirs .dm-bubble em {
  color: rgba(214,217,225,0.40) !important;
}
#direct-messages-page .dm-compose-row {
  width: min(calc(100% - 16px), 720px) !important;
  padding: 8px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(18,21,28,0.94), rgba(11,13,18,0.98)) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.30) !important;
  gap: 8px !important;
}
#direct-messages-page:not(.dm-keyboard-active) .dm-compose-row {
  bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
}
#direct-messages-page .dm-photo-upload-btn {
  width: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.04) !important;
  color: rgba(245,246,248,0.74) !important;
}
#direct-messages-page .dm-compose-row input {
  min-height: 44px !important;
  padding: 0 14px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.03) !important;
  color: #f8f7f3 !important;
  font-size: 16px !important;
}
#direct-messages-page .dm-send-btn {
  min-width: 94px !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #8a69ff 0%, #7253e3 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  box-shadow: 0 12px 24px rgba(80, 58, 177, 0.34) !important;
}
#direct-messages-page .dm-search-strip {
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(21,23,30,0.94), rgba(13,15,20,0.98)) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
}
#direct-messages-page .dm-search-strip input {
  padding: 14px 16px !important;
}
#direct-messages-page .dm-user-result {
  padding: 12px 4px 0 !important;
}
#direct-messages-page .dm-empty-card {
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(20,22,28,0.92), rgba(11,13,18,0.98)) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,0.18) !important;
}
#direct-messages-page .dm-action-accept,
#direct-messages-page .dm-action-open,
#direct-messages-page .dm-action.accept {
  background: linear-gradient(180deg, #8a69ff 0%, #7253e3 100%) !important;
  box-shadow: 0 10px 20px rgba(80,58,177,0.30) !important;
}
#direct-messages-page .dm-action.decline,
#direct-messages-page .dm-action-sent {
  background: rgba(255,255,255,0.05) !important;
  color: rgba(245,246,248,0.62) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
#direct-messages-page .dm-chat-delete-action {
  background: linear-gradient(180deg, #bb5656 0%, #9e4040 100%) !important;
  color: #fff !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 22px rgba(104,25,25,0.26) !important;
}

/* -- Light mode ------------------------------------------------------ */
body.light-mode #direct-messages-page {
  background: #f5f3fc !important;
}
body.light-mode #direct-messages-page .direct-messages-topbar {
  background: rgba(245,243,252,0.96) !important;
  border-bottom-color: rgba(0,0,0,0.07) !important;
}
body.light-mode #direct-messages-page .direct-messages-close,
body.light-mode #direct-messages-page .direct-messages-new-btn {
  background: rgba(0,0,0,0.05) !important;
  border-color: rgba(0,0,0,0.10) !important;
  color: #171717 !important;
}
body.light-mode #direct-messages-page .direct-messages-title-wrap strong,
body.light-mode #direct-messages-page .direct-messages-title-wrap .creator-name { color: #171717 !important; }
body.light-mode #direct-messages-page .dm-subtabs {
  border-bottom-color: rgba(0,0,0,0.08) !important;
}
body.light-mode #direct-messages-page .dm-subtabs button { color: rgba(18,8,46,0.36) !important; }
body.light-mode #direct-messages-page .dm-subtabs button.active { color: #171717 !important; }
body.light-mode #direct-messages-page .dm-subtabs button::after { background: #171717 !important; }
body.light-mode #direct-messages-page .dm-chat-row {
  background: transparent !important; border-bottom-color: rgba(0,0,0,0.07) !important;
}
body.light-mode #direct-messages-page .dm-chat-row:active { background: rgba(0,0,0,0.04) !important; }
body.light-mode #direct-messages-page .dm-chat-row.unread { background: rgba(139,92,246,0.06) !important; }
body.light-mode #direct-messages-page .dm-chat-row img { border-color: rgba(0,0,0,0.10) !important; }
body.light-mode #direct-messages-page .dm-chat-copy strong { color: #171717 !important; }
body.light-mode #direct-messages-page .dm-chat-copy strong span,
body.light-mode #direct-messages-page .dm-chat-copy strong .creator-name { color: #171717 !important; }
body.light-mode #direct-messages-page .dm-chat-copy > span,
body.light-mode #direct-messages-page .dm-chat-copy span:not(strong span) { color: rgba(18,8,46,0.46) !important; }
body.light-mode #direct-messages-page .dm-chat-row em { color: rgba(18,8,46,0.36) !important; }
body.light-mode #direct-messages-page .dm-request-card {
  background: transparent !important; border-bottom-color: rgba(0,0,0,0.07) !important;
}
body.light-mode #direct-messages-page .dm-request-copy strong,
body.light-mode #direct-messages-page .dm-request-copy strong * { color: #171717 !important; }
body.light-mode #direct-messages-page .dm-request-copy em { color: rgba(18,8,46,0.46) !important; }
body.light-mode #direct-messages-page .dm-bubble-row.theirs .dm-bubble {
  background: rgba(0,0,0,0.07) !important; color: #171717 !important;
}
body.light-mode #direct-messages-page .dm-bubble em { color: rgba(255,255,255,0.52) !important; }
body.light-mode #direct-messages-page .dm-bubble-row.theirs .dm-bubble em { color: rgba(18,8,46,0.38) !important; }
body.light-mode #direct-messages-page .dm-compose-row {
  background: rgba(0,0,0,0.05) !important; border-color: rgba(0,0,0,0.10) !important;
}
body.light-mode #direct-messages-page .dm-compose-row input { color: #171717 !important; }
body.light-mode #direct-messages-page .dm-compose-row input::placeholder { color: rgba(18,8,46,0.30) !important; }
body.light-mode #direct-messages-page .dm-photo-upload-btn { color: rgba(18,8,46,0.40) !important; }
body.light-mode #direct-messages-page .dm-search-strip {
  background: rgba(0,0,0,0.05) !important; border-color: rgba(0,0,0,0.09) !important;
}
body.light-mode #direct-messages-page .dm-search-strip input { color: #171717 !important; }
body.light-mode #direct-messages-page .dm-search-strip input::placeholder { color: rgba(18,8,46,0.30) !important; }
body.light-mode #direct-messages-page .dm-section-label { color: rgba(18,8,46,0.36) !important; }
body.light-mode #direct-messages-page .dm-user-result strong,
body.light-mode #direct-messages-page .dm-user-result strong * { color: #171717 !important; }
body.light-mode #direct-messages-page .dm-user-result span { color: rgba(18,8,46,0.46) !important; }
body.light-mode #direct-messages-page .dm-empty-card {
  background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.08) !important;
}
body.light-mode #direct-messages-page .dm-empty-card strong { color: #171717 !important; }
body.light-mode #direct-messages-page .dm-empty-card { color: rgba(18,8,46,0.46) !important; }
body.light-mode #direct-messages-page .dm-action.decline,
body.light-mode #direct-messages-page .dm-action-sent {
  background: rgba(0,0,0,0.06) !important; border-color: rgba(0,0,0,0.10) !important; color: rgba(18,8,46,0.52) !important;
}
body.light-mode #direct-messages-page .dm-thread-head {
  background: rgba(245,243,252,0.96) !important; border-bottom-color: rgba(0,0,0,0.07) !important;
}

/* ===================================================================
   WARM PAPER SYSTEM ? comprehensive surface overrides
   Converts every hardcoded purple-tinted background that was missed by
   bulk replacements above. Loaded last so nothing overrides these.
   =================================================================== */

/* -- Page-level backgrounds --------------------------------------- */
body.light-mode,
body.light-mode #app-container,
body.light-mode #mylist-view,
body.light-mode #community-view,
body.light-mode #discover-view,
body.light-mode #anime-discover-view,
body.light-mode #games-discover-view,
body.light-mode .main-content { background: #F8F5EF !important; }

/* -- Navigation --------------------------------------------------- */
body.light-mode .mobile-bottom-nav,
body.light-mode .bottom-nav,
body.light-mode .nav-bar {
  background: var(--lm-surface-3) !important;
  border-top: 1px solid var(--lm-line) !important;
}
body.light-mode .mobile-bottom-nav .main-nav-btn,
body.light-mode .nav-btn,
body.light-mode .bottom-nav-btn { color: var(--lm-text-3) !important; }
body.light-mode .mobile-bottom-nav .main-nav-btn.active,
body.light-mode .nav-btn.active { color: #7c3aed !important; }

body.light-mode .mylist-header,
body.light-mode .mylist-section-header,
body.light-mode .list-header {
  background: #F8F5EF !important;
  border-bottom: 1px solid var(--lm-line) !important;
  color: var(--lm-text) !important;
}
body.light-mode .user-area,
body.light-mode .user-avatar-wrap { color: var(--lm-text) !important; }

/* -- Cards & panels ----------------------------------------------- */
body.light-mode .card,
body.light-mode .card.show-card,
body.light-mode .mylist-card,
body.light-mode .game-library-card,
body.light-mode .activity-card,
body.light-mode .shelfd-social-card,
body.light-mode .friend-card,
body.light-mode .user-card,
body.light-mode .list-card,
body.light-mode .discover-card,
body.light-mode .media-card,
body.light-mode .import-activity-card {
  background: var(--lm-surface-2) !important;
  border-color: var(--lm-line) !important;
  box-shadow: 0 1px 4px rgba(20,20,20,0.06), 0 4px 12px rgba(20,20,20,0.04) !important;
}
body.light-mode .activity-card,
body.light-mode .shelfd-social-card {
  background: var(--lm-surface-2) !important;
  border-color: var(--lm-line) !important;
}

/* -- Stacked activity layers -------------------------------------- */
body.light-mode .sl-activity-stack-layer {
  background: var(--lm-surface-3) !important;
  border-color: var(--lm-line) !important;
  box-shadow: 0 2px 8px rgba(20,20,20,0.05) !important;
}

/* -- Modals / sheets / drawers ------------------------------------ */
body.light-mode .modal,
body.light-mode .modal-card,
body.light-mode .sheet-card,
body.light-mode .plm-sheet,
body.light-mode .bottom-sheet,
body.light-mode .add-shelf-modal,
body.light-mode .sas-sheet,
body.light-mode .drawer,
body.light-mode .popover,
body.light-mode .dropdown-menu,
body.light-mode .context-menu {
  background: var(--lm-surface) !important;
  border-color: var(--lm-line) !important;
  box-shadow: 0 8px 32px rgba(20,20,20,0.12) !important;
}
body.light-mode .plm-overlay,
body.light-mode .modal-overlay,
body.light-mode .sheet-backdrop {
  background: rgba(20,20,20,0.28) !important;
}

/* -- Toasts ------------------------------------------------------- */
body.light-mode .toast,
body.light-mode .snackbar,
body.light-mode .toast-msg {
  background: var(--lm-surface-3) !important;
  color: var(--lm-text) !important;
  border: 1px solid var(--lm-line) !important;
  box-shadow: 0 4px 16px rgba(20,20,20,0.12) !important;
}

/* -- Inputs / form fields / search bars --------------------------- */
body.light-mode input,
body.light-mode textarea,
body.light-mode select,
body.light-mode .search-input,
body.light-mode .text-input,
body.light-mode .form-input {
  background: var(--lm-surface-2) !important;
  color: var(--lm-text) !important;
  border-color: var(--lm-line) !important;
}
body.light-mode input::placeholder,
body.light-mode textarea::placeholder,
body.light-mode .search-input::placeholder { color: var(--lm-text-4) !important; }
body.light-mode input:focus,
body.light-mode textarea:focus,
body.light-mode .search-input:focus { border-color: #7c3aed !important; }

/* -- Tabs / segmented controls ------------------------------------ */
body.light-mode .mylist-tabs,
body.light-mode .friends-tabs,
body.light-mode .tabs,
body.light-mode .tab-bar {
  background: var(--lm-surface-3) !important;
  border-bottom: 1px solid var(--lm-line) !important;
}
body.light-mode .mylist-tab,
body.light-mode .tab-btn,
body.light-mode .friends-tab-btn { color: var(--lm-text-3) !important; }
body.light-mode .mylist-tab.active,
body.light-mode .tab-btn.active,
body.light-mode .friends-tab-btn.active { color: #7c3aed !important; background: transparent !important; border-bottom: 2px solid #7c3aed !important; }

/* -- Buttons (keep purple on primary, warm on ghost/secondary) ----- */
body.light-mode .btn-secondary,
body.light-mode .button-ghost,
body.light-mode .outline-btn {
  background: var(--lm-surface-2) !important;
  color: var(--lm-text-2) !important;
  border-color: var(--lm-line) !important;
}
body.light-mode .btn-secondary:hover,
body.light-mode .button-ghost:hover { background: var(--lm-surface-3) !important; }

/* -- Badges / chips ----------------------------------------------- */
body.light-mode .chip,
body.light-mode .badge,
body.light-mode .tag:not(.badge-count):not(.tag-purple) {
  background: var(--lm-chip) !important;
  color: var(--lm-text-2) !important;
  border-color: var(--lm-line) !important;
}

/* -- Empty states ------------------------------------------------- */
body.light-mode .empty-state,
body.light-mode .friends-empty,
body.light-mode .list-empty,
body.light-mode [class*="-empty"] {
  color: var(--lm-text-3) !important;
}
body.light-mode .empty-state strong,
body.light-mode .friends-empty strong,
body.light-mode [class*="-empty"] strong { color: var(--lm-text) !important; }

/* -- Discover hub ------------------------------------------------- */
body.light-mode .discover-hub-toggle,
body.light-mode .discover-subtab-bar,
body.light-mode .discover-category-btn {
  background: var(--lm-surface-3) !important;
  color: var(--lm-text-2) !important;
  border-color: var(--lm-line) !important;
}
body.light-mode .discover-hub-toggle.active,
body.light-mode .discover-subtab-bar .active,
body.light-mode .discover-category-btn.active { color: #7c3aed !important; background: rgba(124,58,237,0.08) !important; }
body.light-mode .discover-section-head,
body.light-mode .discover-section-title { color: var(--lm-text) !important; }
body.light-mode .discover-see-all,
body.light-mode .discover-view-all { color: #7c3aed !important; }

/* -- Media profile overlay ---------------------------------------- */
body.light-mode .discover-media-profile-overlay,
body.light-mode .media-profile-page,
body.light-mode .media-profile-body {
  background: var(--lm-surface) !important;
  color: var(--lm-text) !important;
}
body.light-mode .media-profile-title,
body.light-mode .media-profile-name { color: var(--lm-text) !important; }
body.light-mode .media-profile-meta,
body.light-mode .media-profile-overview,
body.light-mode .media-profile-description { color: var(--lm-text-2) !important; }
body.light-mode .media-profile-year,
body.light-mode .media-profile-genre,
body.light-mode .media-profile-runtime { color: var(--lm-text-3) !important; }

/* -- Comments / activity full-screen pages ------------------------ */
body.light-mode .comments-page,
body.light-mode .activity-page,
body.light-mode .comments-shell {
  background: #F8F5EF !important;
  color: var(--lm-text) !important;
}
body.light-mode .comments-page-header,
body.light-mode .comments-topbar {
  background: var(--lm-surface-3) !important;
  border-bottom: 1px solid var(--lm-line) !important;
}
body.light-mode .comment-input-area,
body.light-mode .comment-compose {
  background: var(--lm-surface-2) !important;
  border-color: var(--lm-line) !important;
}
body.light-mode .comment-input,
body.light-mode .comment-textarea {
  background: var(--lm-surface-2) !important;
  color: var(--lm-text) !important;
  border-color: var(--lm-line) !important;
}

/* -- Profile page ------------------------------------------------- */
body.light-mode .profile-page { background: #F8F5EF !important; }
body.light-mode .profile-hero-card,
body.light-mode .profile-section-card,
body.light-mode .profile-media-group,
body.light-mode .profile-fav-poster-card,
body.light-mode .profile-stat-card,
body.light-mode .profile-favorite-group,
body.light-mode .profile-link-row {
  background: var(--lm-surface-2) !important;
  border-color: var(--lm-line) !important;
  box-shadow: 0 2px 8px rgba(20,20,20,0.05) !important;
}
body.light-mode .profile-settings-page {
  background: #F8F5EF !important;
}
body.light-mode .profile-settings-card {
  background: var(--lm-surface-2) !important;
  border-color: var(--lm-line) !important;
}
body.light-mode .profile-social-user-row {
  background: var(--lm-surface-2) !important;
  border-color: var(--lm-line) !important;
}

/* -- My Lists ----------------------------------------------------- */
body.light-mode .ep-list { background: var(--lm-surface-2) !important; }
body.light-mode .ep-row { background: transparent !important; border-bottom: 1px solid var(--lm-line-soft) !important; }
body.light-mode .season-block { background: var(--lm-surface-2) !important; border-color: var(--lm-line) !important; }
body.light-mode #mylist-view .my-list-search-input {
  background: var(--lm-surface-2) !important;
  border-color: var(--lm-line) !important;
  color: var(--lm-text) !important;
}
body.light-mode .mylist-sort-menu {
  background: var(--lm-surface) !important;
  border-color: var(--lm-line) !important;
  box-shadow: 0 8px 24px rgba(20,20,20,0.12) !important;
}

/* -- Add to shelf / search modals --------------------------------- */
body.light-mode .add-shelf-panel,
body.light-mode .tmdb-results,
body.light-mode .tmdb-result,
body.light-mode .shelf-search-wrap,
body.light-mode .cover-search-results {
  background: var(--lm-surface) !important;
  color: var(--lm-text) !important;
  border-color: var(--lm-line) !important;
}
body.light-mode .tmdb-result { border-bottom: 1px solid var(--lm-line-soft) !important; }
body.light-mode .tmdb-result-name,
body.light-mode .search-result-name { color: var(--lm-text) !important; }
body.light-mode .tmdb-result-year,
body.light-mode .search-result-year { color: var(--lm-text-3) !important; }

/* -- Friends / community ------------------------------------------ */
body.light-mode .friends-page,
body.light-mode .community-view { background: #F8F5EF !important; }
body.light-mode .friend-action-btn:not(.friend-accept-btn):not(.friend-primary-btn) {
  background: var(--lm-surface-2) !important;
  color: var(--lm-text-2) !important;
  border-color: var(--lm-line) !important;
}
body.light-mode .friend-pending-btn {
  background: var(--lm-surface-2) !important;
  color: var(--lm-text-3) !important;
  border-color: var(--lm-line) !important;
}

/* -- Discover: universal search overlay --------------------------- */
body.light-mode .shelfd-search-overlay,
body.light-mode .universal-search-page,
body.light-mode .search-overlay {
  background: #F8F5EF !important;
}
body.light-mode .shelfd-search-input,
body.light-mode .universal-search-input {
  background: var(--lm-surface-2) !important;
  color: var(--lm-text) !important;
  border-color: var(--lm-line) !important;
}
body.light-mode .shelfd-search-input::placeholder,
body.light-mode .universal-search-input::placeholder { color: var(--lm-text-4) !important; }
body.light-mode .search-result-card,
body.light-mode .shelfd-search-result {
  background: var(--lm-surface-2) !important;
  border-color: var(--lm-line) !important;
}

/* -- Animate-in pages (profile, media profile) -------------------- */
body.light-mode #profile-page { background: #F8F5EF !important; }

/* -- Inline purple-tinted gradients remaining on surfaces ---------
   Any leftover radial/linear gradients that still reference lavender
   tones get flattened to the warm card surface. */
body.light-mode .profile-hero-card {
  background: var(--lm-surface-2) !important;
}

/* -- Remaining header / topbar colours ---------------------------- */
body.light-mode .direct-messages-topbar,
body.light-mode .comments-page-header {
  background: var(--lm-surface-3) !important;
  border-bottom: 1px solid var(--lm-line) !important;
}
body.light-mode .direct-messages-title-wrap strong { color: var(--lm-text) !important; }

/* -- Link modal / PLM sheet --------------------------------------- */
body.light-mode .plm-overlay { background: rgba(20,20,20,0.30) !important; backdrop-filter: blur(4px) !important; }
body.light-mode .plm-title  { color: var(--lm-text)   !important; }
body.light-mode .plm-close  { color: var(--lm-text-3) !important; }

/* -- Seasonal anime / game discover cards ------------------------- */
body.light-mode .asc-card,
body.light-mode .game-discover-card,
body.light-mode .game-card {
  background: var(--lm-surface-2) !important;
  border-color: var(--lm-line) !important;
}
body.light-mode .asc-title,
body.light-mode .game-card-title,
body.light-mode .game-discover-title { color: var(--lm-text) !important; }
body.light-mode .asc-meta,
body.light-mode .game-card-meta { color: var(--lm-text-3) !important; }

/* -- Patch / changelog -------------------------------------------- */
body.light-mode .patch-notes-page,
body.light-mode .patch-notes-overlay {
  background: #F8F5EF !important;
  color: var(--lm-text) !important;
}

/* -- Import / sync pages ------------------------------------------ */
body.light-mode #import-view,
body.light-mode #steam-sync-view,
body.light-mode .import-shell {
  background: #F8F5EF !important;
}
body.light-mode .import-source-card,
body.light-mode .import-option {
  background: var(--lm-surface-2) !important;
  border-color: var(--lm-line) !important;
}

/* -- Scrollbar (webkit) ------------------------------------------- */
body.light-mode ::-webkit-scrollbar-thumb { background: rgba(20,20,20,0.18) !important; }
body.light-mode ::-webkit-scrollbar-track { background: transparent !important; }

/* v855: Discover + Activity page background was previously 0.3 shades
   lighter than the global body #0E0E0E (rgb 14,14,14 ? rgb 22,22,22 =
   #161616). v10.518 REVERTED that design choice per repeated user
   feedback that the shelf, friends, activity, and discovery pages
   should all share the exact same canonical Editorial-Dark surface.
   All three page surfaces now lock to `#0E0E0E` to match the shelf
   (`body.true-dark-mode #mylist-view` at 06-profile.css:1566). */
#discover-view,
#anime-discover-view,
#games-discover-view {
  background-color: #0E0E0E !important;
  min-height: 100%;
}
.activity-page,
#community-view {
  background-color: #0E0E0E !important;
}

/* v856: Header background matches the page surface on Discover and
   Activity/Community tabs so the full page blends seamlessly.
   v10.518: was `#161616` to match the v855 lighter page surface.
   Now locked to `#0E0E0E` to match the new unified surface. */
body.main-tab-discover:not(.viewing-other-user) .header,
body.main-tab-community:not(.viewing-other-user) .header {
  background: #0E0E0E !important;
}

body.viewing-other-user .header {
  background: #0E0E0E !important;
}

/* v980: iOS Safari/PWA zoom guard. Keep interactive search fields at the
   16px minimum so focusing them does not auto-zoom the page. */
#modal #inp-tmdb-search,
body.light-mode #modal #inp-tmdb-search,
body.true-dark-mode #modal #inp-tmdb-search,
#mylist-view .mylist-search-row .search-input,
body.light-mode #mylist-view .mylist-search-row .search-input {
  font-size: 16px !important;
}

/* v981: My Lists global shelf search. The composer now lives inside the
   toolbar, between Sort and the search button, and expands left from the
   magnifying glass instead of sliding down under the status tabs. */
#mylist-view #mylist-toolbar .toolbar-right,
body.main-tab-mylist #mylist-view #mylist-toolbar .toolbar-right,
body.main-tab-mylist #mylist-view #mylist-toolbar .toolbar-right:has(#sort-dropdown-btn):has(#mylist-search-toggle-btn) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 7px !important;
}

#mylist-view #mylist-toolbar #sort-dropdown-btn,
#mylist-view #mylist-toolbar #mylist-search-toggle-btn {
  flex: 0 0 36px !important;
}

#mylist-view #mylist-toolbar .toolbar-right #mylist-search-row {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 0 !important;
  width: auto !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 -7px 0 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transform: scaleX(0.08) translateX(8px) !important;
  transform-origin: right center !important;
  pointer-events: none !important;
  animation: none !important;
  will-change: max-width, opacity, transform !important;
  transition:
    max-width 220ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 150ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    margin 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

#mylist-view #mylist-toolbar .toolbar-right #mylist-search-row[hidden] {
  display: none !important;
}

#mylist-view #mylist-toolbar .toolbar-right #mylist-search-row.is-open {
  max-width: min(340px, calc(100vw - 106px)) !important;
  margin-right: 0 !important;
  opacity: 1 !important;
  transform: scaleX(1) translateX(0) !important;
  pointer-events: auto !important;
}

#mylist-view #mylist-toolbar .toolbar-right #mylist-search-row .search-input {
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 36px !important;
  padding: 0 13px !important;
}

#mylist-view #mylist-toolbar .toolbar-right #mylist-search-row .mylist-search-clear-btn {
  flex: 0 0 30px !important;
}

@media (max-width: 700px) {
  #mylist-view #mylist-toolbar .toolbar-right,
  body.main-tab-mylist #mylist-view #mylist-toolbar .toolbar-right,
  body.main-tab-mylist #mylist-view #mylist-toolbar .toolbar-right:has(#sort-dropdown-btn):has(#mylist-search-toggle-btn) {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 6px !important;
  }

  #mylist-view #mylist-toolbar .toolbar-right #mylist-search-row.is-open {
    max-width: min(100%, calc(100vw - 104px)) !important;
  }
}

.discover-friends-scroll-btn {
  display: none;
}

@media (min-width: 701px) and (hover: hover) and (pointer: fine) and (not (display-mode: standalone)) {
  #mobile-bottom-nav,
  .mobile-bottom-nav {
    position: fixed !important;
    left: 50% !important;
    top: auto !important;
    right: auto !important;
    bottom: 14px !important;
    transform: translateX(-50%) !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    width: min(calc(100vw - 40px), 640px) !important;
    max-width: 640px !important;
    margin: 0 !important;
    padding: 6px !important;
    gap: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.045) 46%, rgba(255,255,255,0.02)),
      radial-gradient(circle at 50% 0%, rgba(196,181,253,0.16), transparent 58%),
      rgba(18, 20, 24, 0.42) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.24),
      inset 0 -1px 0 rgba(255,255,255,0.06),
      0 18px 48px rgba(0,0,0,0.42),
      0 0 0 1px rgba(196,181,253,0.06) !important;
    backdrop-filter: blur(24px) saturate(170%) brightness(1.08) !important;
    -webkit-backdrop-filter: blur(24px) saturate(170%) brightness(1.08) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 5200 !important;
  }

  #mobile-bottom-nav .main-nav-btn,
  .mobile-bottom-nav .main-nav-btn {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 10px 4px !important;
    border-radius: 999px !important;
    border-bottom: 0 !important;
    background: transparent !important;
    color: rgba(255,255,255,0.9) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
    box-shadow: none !important;
  }

  #mobile-bottom-nav .main-nav-btn.active,
  .mobile-bottom-nav .main-nav-btn.active {
    color: #ffffff !important;
    background: rgba(139,92,246,0.16) !important;
    box-shadow: inset 0 0 0 1px rgba(196,181,253,0.16) !important;
  }

  #mobile-bottom-nav #mobile-nav-mylist,
  .mobile-bottom-nav #mobile-nav-mylist {
    color: rgba(231, 226, 244, 0.72) !important;
  }

  #mobile-bottom-nav #mobile-nav-mylist.active,
  .mobile-bottom-nav #mobile-nav-mylist.active {
    color: #ffffff !important;
  }

  #mobile-bottom-nav .nav-search-btn,
  .mobile-bottom-nav .nav-search-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-column: 3 !important;
    order: 3 !important;
    padding: 8px 0 !important;
    color: #8ff2b8 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  #mobile-bottom-nav .bottom-nav-icon-btn,
  .mobile-bottom-nav .bottom-nav-icon-btn {
    color: rgba(231, 226, 244, 0.72) !important;
  }

  #mobile-bottom-nav .bottom-nav-icon-btn.active,
  .mobile-bottom-nav .bottom-nav-icon-btn.active {
    color: #ffffff !important;
  }

  #mobile-bottom-nav #mobile-nav-mylist,
  .mobile-bottom-nav #mobile-nav-mylist {
    color: rgba(231, 226, 244, 0.72) !important;
  }

  #mobile-bottom-nav #mobile-nav-mylist.active,
  .mobile-bottom-nav #mobile-nav-mylist.active {
    color: #ffffff !important;
  }

  #mobile-bottom-nav .nav-search-btn,
  .mobile-bottom-nav .nav-search-btn {
    color: #8ff2b8 !important;
  }

  body .header,
  body.main-tab-mylist .header,
  body.main-tab-community .header,
  body.main-tab-discover .header {
    padding-top: 24px !important;
  }

  body .header .main-nav,
  body .main-nav,
  body.main-tab-mylist #mylist-view #mylist-profile-controls .mylist-desktop-quick-nav.mobile-bottom-nav {
    display: none !important;
  }

  #shelfd-search-page {
    z-index: 5100 !important;
  }

  #shelfd-search-page .shelfd-search-page-inner {
    padding-top: 0 !important;
  }

  .discover-universal-search-panel {
    margin-top: 48px !important;
  }

  #discover-view .discover-friends-row-shell {
    position: relative;
    padding-right: 26px;
  }
  #discover-view .discover-friends-row {
    padding-right: 84px;
  }
  #discover-view .discover-friends-scroll-btn {
    position: absolute;
    top: 50%;
    right: -18px;
    z-index: 5;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(196,181,253,0.18);
    border-radius: 999px;
    background: rgba(9, 8, 20, 0.92);
    color: #f8f4ff;
    box-shadow: 0 16px 30px rgba(0,0,0,0.3);
    transform: translateY(-50%);
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, opacity 160ms ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  #discover-view .discover-friends-scroll-btn svg {
    width: 18px;
    height: 18px;
  }
  #discover-view .discover-friends-scroll-btn:hover {
    background: rgba(124,58,237,0.22);
    border-color: rgba(196,181,253,0.4);
    transform: translateY(-50%) scale(1.04);
  }
  #discover-view .discover-friends-scroll-btn:active {
    transform: translateY(-50%) scale(0.96);
  }
  #discover-view .discover-friends-scroll-btn[hidden] {
    display: none !important;
  }

  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-body.discover-media-body-cinema {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-top: 24px;
    padding-bottom: 42px;
    color: #f5f1ff;
    font-family: 'Sohne', 'Söhne', 'DM Sans', system-ui, sans-serif;
  }

  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-detail-grid {
    display: grid;
    gap: 22px;
    padding: 0 2px 4px;
  }
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-detail-grid.has-trailer {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-detail-stack {
    display: grid;
    gap: 18px;
    align-content: start;
  }

  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-watch-inline-head strong {
    color: #ffffff;
    font-weight: 500;
  }
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-watch-inline-row,
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-watch-inline-row span:first-child,
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-watch-inline-row .discover-media-watch-inline-provider-list,
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-watch-inline-row .discover-media-watch-inline-provider,
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-watch-inline-row .discover-provider-name-text {
    font-weight: 400;
  }

  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-seasons-entry-copy h3,
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-seasons-entry-meta {
    font-weight: 400;
  }

  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-facts,
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-credits,
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-trailer-panel,
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-section-cast,
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-ai-more-section {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-facts div {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-facts strong {
    display: block;
    color: #ffffff;
    font-size: 21px;
    line-height: 1.05;
    font-weight: 400;
    letter-spacing: -0.04em;
  }
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-facts div.primary strong {
    color: #ffffff;
  }
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-facts .discover-media-fact-release-date strong {
    color: #67e8f9 !important;
  }
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-facts .discover-media-fact-runtime strong {
    color: #ffffff !important;
    opacity: 1 !important;
  }
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-facts span {
    display: block;
    margin-top: 7px;
    color: rgba(214, 205, 232, 0.6);
    font-size: 11px;
    line-height: 1.25;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-credits {
    display: grid;
    gap: 14px;
  }
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-credits div {
    padding: 14px 0 0;
    border: 0;
    border-top: 1px solid rgba(167, 139, 250, 0.12);
    border-radius: 0;
    background: transparent;
  }
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-credits div:first-child {
    padding-top: 0;
    border-top: 0;
  }
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-credits span {
    display: block;
    color: rgba(214, 205, 232, 0.56);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-credits strong {
    display: block;
    margin-top: 5px;
    color: #ffffff;
    font-size: 18px;
    line-height: 1.34;
    font-weight: 400;
    letter-spacing: -0.02em;
  }

  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-trailer-panel {
    display: flex;
    align-items: stretch;
    order: -1;
    width: 100%;
  }
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-trailer-panel iframe {
    width: 100%;
    min-height: 100%;
    aspect-ratio: 21 / 9;
    border: 0;
    border-radius: 22px;
    box-shadow: 0 16px 34px rgba(0,0,0,0.24);
  }

  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-section-cast,
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-ai-more-section {
    padding-top: 18px;
    border-top: 1px solid rgba(167, 139, 250, 0.1);
  }

  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-section-cast h3 {
    margin: 0 0 14px;
    color: #c9b2ff;
    font-family: 'Sohne', 'Söhne', 'DM Sans', system-ui, sans-serif;
    font-size: 13px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-cast {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 136px;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
    scrollbar-width: none;
    will-change: auto;
    transform: none;
  }

  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-cast::-webkit-scrollbar {
    display: none;
  }

  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-ai-more-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    overflow: visible;
    padding-bottom: 0;
    scrollbar-width: auto;
    will-change: auto;
    transform: none;
  }

  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-cast-card,
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-similar-card {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    font-family: 'Sohne', 'Söhne', 'DM Sans', system-ui, sans-serif;
  }

  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-cast-card {
    width: 136px;
    min-width: 136px;
  }

  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-cast-photo,
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-similar-card img {
    width: 100%;
    aspect-ratio: 2 / 3;
    display: block;
    object-fit: cover;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
  }

  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-cast-photo {
    position: relative;
    overflow: hidden;
  }
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-cast-card strong,
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-similar-card span {
    display: block;
    margin-top: 10px;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.28;
    font-weight: 400;
    letter-spacing: -0.01em;
  }
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-cast-card span,
  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-similar-card small {
    display: block;
    margin-top: 5px;
    color: rgba(214, 205, 232, 0.72);
    font-size: 12px;
    line-height: 1.38;
    font-weight: 450;
    letter-spacing: 0;
  }

  .discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-ai-more-list .discover-ai-more-loading {
    grid-column: 1 / -1;
    color: rgba(214, 205, 232, 0.72);
  }

  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-media-body.discover-media-body-cinema {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-top: 24px;
    padding-bottom: 42px;
    color: #f5f1ff;
    font-family: 'Sohne', 'Söhne', 'DM Sans', system-ui, sans-serif;
  }

  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-media-detail-grid {
    display: grid;
    gap: 22px;
    padding: 0 2px 4px;
  }
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-media-detail-grid.has-trailer {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-media-detail-stack {
    display: grid;
    gap: 18px;
    align-content: start;
  }
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-media-facts,
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-media-credits,
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-media-trailer-panel,
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-media-section-cast,
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-ai-more-section {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-media-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-media-facts div {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-media-facts strong {
    display: block;
    color: #ffffff;
    font-size: 21px;
    line-height: 1.05;
    font-weight: 650;
    letter-spacing: -0.04em;
  }
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-media-facts div.primary strong {
    color: #cfbcff;
  }
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-media-facts .discover-media-fact-release-date strong {
    color: #67e8f9 !important;
  }
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-media-facts span {
    display: block;
    margin-top: 7px;
    color: rgba(214, 205, 232, 0.6);
    font-size: 11px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-media-credits {
    display: grid;
    gap: 14px;
  }
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-media-credits div {
    padding: 14px 0 0;
    border: 0;
    border-top: 1px solid rgba(167, 139, 250, 0.12);
    border-radius: 0;
    background: transparent;
  }
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-media-credits div:first-child {
    padding-top: 0;
    border-top: 0;
  }
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-media-credits span {
    display: block;
    color: rgba(214, 205, 232, 0.56);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-media-credits strong {
    display: block;
    margin-top: 5px;
    color: #ffffff;
    font-size: 18px;
    line-height: 1.34;
    font-weight: 500;
    letter-spacing: -0.02em;
  }
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-media-trailer-panel {
    display: flex;
    align-items: stretch;
    order: -1;
    width: 100%;
  }
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-media-trailer-panel video {
    width: 100%;
    min-height: 100%;
    aspect-ratio: 21 / 9;
    border: 0;
    border-radius: 22px;
    box-shadow: 0 16px 34px rgba(0,0,0,0.24);
    object-fit: cover;
    background: #06060b;
  }
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-media-section-cast,
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-ai-more-section {
    padding-top: 18px;
    border-top: 1px solid rgba(167, 139, 250, 0.1);
  }
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-media-section h3 {
    margin: 0 0 14px;
    color: #c9b2ff;
    font-family: 'Sohne', 'Söhne', 'DM Sans', system-ui, sans-serif;
    font-size: 13px;
    line-height: 1;
    font-weight: 650;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-ai-more-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    overflow: visible;
    padding-bottom: 0;
    scrollbar-width: auto;
    will-change: auto;
    transform: none;
  }
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-media-similar-card {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    font-family: 'Sohne', 'Söhne', 'DM Sans', system-ui, sans-serif;
  }
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-ai-more-list .discover-media-similar-card img {
    width: 100%;
    aspect-ratio: 2 / 3;
    display: block;
    object-fit: cover;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
  }
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-media-similar-card span {
    display: block;
    margin-top: 10px;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.28;
    font-weight: 550;
    letter-spacing: -0.01em;
  }
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-media-similar-card small {
    display: block;
    margin-top: 5px;
    color: rgba(214, 205, 232, 0.72);
    font-size: 12px;
    line-height: 1.38;
    font-weight: 450;
    letter-spacing: 0;
  }
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .game-media-screenshots {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .game-media-screenshots::-webkit-scrollbar {
    display: none;
  }
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .game-media-screenshots .discover-media-similar-card {
    min-width: 260px;
  }
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .game-media-screenshots .discover-media-similar-card img {
    aspect-ratio: 16 / 9;
  }
  .game-media-profile-overlay .discover-media-page.discover-desktop-title-page .discover-ai-more-list .discover-ai-more-loading {
    grid-column: 1 / -1;
    color: rgba(214, 205, 232, 0.72);
  }

  .discover-media-profile-overlay .discover-media-page.discover-person-page-desktop-cinema .discover-media-body.discover-person-body-desktop-cinema {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 18px;
    padding-bottom: 34px;
  }

  .discover-media-profile-overlay .discover-media-page.discover-person-page-desktop-cinema .discover-person-overview-panel,
  .discover-media-profile-overlay .discover-media-page.discover-person-page-desktop-cinema .discover-person-section-card {
    margin: 0;
    padding: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.018)),
      rgba(7, 6, 16, 0.92);
    box-shadow: 0 18px 44px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.045);
  }

  .discover-media-profile-overlay .discover-media-page.discover-person-page-desktop-cinema .discover-person-overview-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
  .discover-media-profile-overlay .discover-media-page.discover-person-page-desktop-cinema .discover-person-overview-panel div {
    min-height: 76px;
    padding: 12px 13px;
    border-radius: 18px;
    background: rgba(255,255,255,0.028);
    border: 1px solid rgba(255,255,255,0.05);
  }
  .discover-media-profile-overlay .discover-media-page.discover-person-page-desktop-cinema .discover-person-overview-panel strong {
    font-size: 18px;
    line-height: 1.2;
  }
  .discover-media-profile-overlay .discover-media-page.discover-person-page-desktop-cinema .discover-person-overview-panel span {
    margin-top: 7px;
    font-size: 10px;
    letter-spacing: 1px;
  }
  .discover-media-profile-overlay .discover-media-page.discover-person-page-desktop-cinema .discover-person-section-card .discover-media-similar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    overflow: visible;
    padding-bottom: 0;
    scrollbar-width: auto;
    will-change: auto;
    transform: none;
  }
  .discover-media-profile-overlay .discover-media-page.discover-person-page-desktop-cinema .discover-person-credit-card {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
  }
  .discover-media-profile-overlay .discover-media-page.discover-person-page-desktop-cinema .discover-person-credit-card img {
    width: 100%;
    aspect-ratio: 2 / 3;
    display: block;
    object-fit: cover;
    border-radius: 16px;
    background: rgba(255,255,255,0.05);
    box-shadow: 0 18px 36px rgba(0,0,0,0.26);
  }
  .discover-media-profile-overlay .discover-media-page.discover-person-page-desktop-cinema .discover-person-credit-title {
    display: block;
    margin-top: 10px;
    color: #fff;
    font-size: 14px;
    line-height: 1.24;
    font-weight: 850;
  }
  .discover-media-profile-overlay .discover-media-page.discover-person-page-desktop-cinema .discover-person-credit-role {
    display: block;
    margin-top: 5px;
    color: #b8afd1;
    font-size: 12px;
    line-height: 1.36;
    font-weight: 600;
  }
  .discover-media-profile-overlay .discover-media-page.discover-person-page-desktop-cinema .discover-person-credit-rating {
    margin-top: 6px;
    font-size: 12px;
  }
  .discover-media-profile-overlay .discover-media-page.discover-person-page-desktop-cinema .discover-person-filmography-header {
    width: 100%;
    padding: 0;
    margin: 0 0 14px;
    border: 0;
    background: transparent;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }
  .discover-media-profile-overlay .discover-media-page.discover-person-page-desktop-cinema .discover-person-filmography-header svg {
    width: 18px;
    height: 18px;
    color: #c4b5fd;
  }
}

/* =============================================================================
   v10.73: Discover title ellipsis — UNIFIED rule.

   PROBLEM: title overflow was inconsistent across Discover card variants.
   "Regular Show: The Lost Tapes" rendered as "Regular Show: The L" (clipped
   to card edge, no ellipsis); "Zhan Zhao Adventures" rendered as
   "Zhan Zhao Adventur". Different Discover card renderers (Newest Releases,
   Trending, Popular, Most Anticipated, In Theaters, Anime, Games, View All,
   universal search) inherited slightly different parent flex contexts —
   notably .discover-new-release-card overrides .discover-card-info-row to
   `flex-direction: column !important; flex: 1 1 auto !important` which
   re-applied flex constraints WITHOUT re-declaring `min-width: 0`, letting
   the title button grow to its content width and overrun the card edge.
   .discover-title-profile-btn already had ellipsis rules with !important at
   line 4056, but in certain flex contexts those were undermined by the
   parent chain expanding to content.

   FIX: lock `min-width: 0` on every link in the flex chain (card / body /
   info-row / info-stack) AND restate the full single-line ellipsis stack
   on both `.discover-card-title` and `.discover-title-profile-btn` with
   high specificity (#view-id .discover-card .name) + !important so this
   block always wins over any per-variant override. Also explicitly unsets
   any stray `-webkit-line-clamp` / `-webkit-box-orient` from older 2-line-
   clamp rules (06-profile.css:3593) which used to compete with nowrap.
   ============================================================================= */
#discover-view .discover-card,
#anime-discover-view .discover-card,
#games-discover-view .discover-card,
.discover-category-full-page .discover-card,
.discover-friends-row .discover-card,
.discover-friends-full-grid .discover-card,
#discover-view .discover-card .discover-card-body,
#anime-discover-view .discover-card .discover-card-body,
#games-discover-view .discover-card .discover-card-body,
.discover-category-full-page .discover-card .discover-card-body,
#discover-view .discover-card .discover-card-info-row,
#anime-discover-view .discover-card .discover-card-info-row,
#games-discover-view .discover-card .discover-card-info-row,
.discover-category-full-page .discover-card .discover-card-info-row,
.discover-new-release-card .discover-card-info-row,
#discover-view .discover-card .discover-card-info-stack,
#anime-discover-view .discover-card .discover-card-info-stack,
#games-discover-view .discover-card .discover-card-info-stack,
.discover-category-full-page .discover-card .discover-card-info-stack,
.discover-new-release-card .discover-card-info-stack {
  min-width: 0 !important;
}

#discover-view .discover-card .discover-card-title,
#anime-discover-view .discover-card .discover-card-title,
#games-discover-view .discover-card .discover-card-title,
.discover-category-full-page .discover-card .discover-card-title,
.discover-new-release-card .discover-card-title,
#discover-view .discover-card .discover-title-profile-btn,
#anime-discover-view .discover-card .discover-title-profile-btn,
#games-discover-view .discover-card .discover-title-profile-btn,
.discover-category-full-page .discover-card .discover-title-profile-btn,
.discover-new-release-card .discover-title-profile-btn {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  /* Disable the legacy 2-line clamp (06-profile.css:3593) so it can't compete
     with nowrap+ellipsis. If a future design wants multi-line, re-enable
     locally on the variant — don't put it on the base. */
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}

/* =============================================================================
   v10.74: Discover title ellipsis — covers the variants v10.73 missed.

   WHY v10.73 DIDN'T FIX IT: v10.73 only targeted titles with class
   `.discover-card-title` and `.discover-title-profile-btn` (the Movies/TV/
   universal-search renderers). But the Discover Games hub uses a DIFFERENT
   title class — `.games-dc-title` (`11-discovery-...js:7344`) — and the
   Anime Seasonal renderer uses ANOTHER one — `.anime-seasonal-card-title-btn`
   (`11-discovery-...js:8336`). Both of those classes had `display: -webkit-box;
   -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;` —
   a 2-line clamp. When the parent flex chain didn't carry `min-width: 0`
   down to the title, the title's webkit-box grew to one wide line, the
   2-line clamp never triggered (only 1 line existed), and the line overran
   the card edge without ellipsis. That's the exact symptom in the screenshot
   ("Bug Behind Schedule", "The Right Way is the Wrong Way", "Regular Show:
   The Lost Tapes", "Zhan Zhao Adventures").

   FIX: select EVERY known Discover title-class by name with `body`-level
   scope (no `#discover-view` / `.discover-card` ancestor required — this
   rule wins even if the user is in a layout context where the previous
   selectors don't match). Force the full single-line ellipsis stack with
   `!important` on each, and explicitly `unset` the `-webkit-line-clamp`/
   `-webkit-box-orient` so the old clamp definition can't compete. Lock
   `min-width: 0` on every parent flex container in the chain.
   ============================================================================= */
body .discover-card-title,
body .discover-title-profile-btn,
body .games-dc-title,
body .anime-seasonal-card-title-btn,
body .discover-friend-watch-title,
body .discover-country-title {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  /* Buttons have a small intrinsic minimum-content width on some engines;
     force the flex/grid path to honor `min-width: 0` instead of intrinsic. */
  min-inline-size: 0 !important;
}

/* v10.928 / v10.929: Discovery Music Show All pages.
   Scope is intentionally music-only: the preview rows keep their existing
   Discover card language, while Show All uses a flat album-art grid.
   v10.929: the top bar owns the iOS safe-area and sticks to the true top. */
#music-discover-view,
#music-discover-view *,
.music-discover-show-all-page,
.music-discover-show-all-page * {
  font-family: 'Sohne', 'Söhne', 'DM Sans', system-ui, sans-serif !important;
}

#music-discover-view .discover-section-top {
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

#music-discover-view .music-discover-show-all-btn {
  appearance: none !important;
  border: 1px solid rgba(196, 181, 253, 0.16) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: rgba(216, 204, 255, 0.92) !important;
  min-height: 32px !important;
  padding: 0 13px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

#music-discover-view .music-discover-show-all-btn:active {
  transform: scale(0.97) !important;
}

body.music-discover-show-all-open {
  overflow: hidden !important;
}

.music-discover-show-all-page {
  position: fixed !important;
  inset: 0 !important;
  z-index: 7350 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  background: #0E0E0E !important;
  color: #f8f6ff !important;
  transform: translateX(100%) !important;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: transform !important;
  /* v11.066: hide the vertical scrollbar on the Music "Show All" full page
     (Popular This Week / New This Week) while keeping scroll functional.
     scrollbar-width covers standards; the ::-webkit-scrollbar rule below
     covers the iOS WKWebView (the primary target). */
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.music-discover-show-all-page::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.music-discover-show-all-page.is-open {
  transform: translateX(0) !important;
}

.music-discover-show-all-shell {
  width: 100% !important;
  min-height: 100% !important;
  padding: 0 18px calc(120px + var(--shelfd-safe-bottom, 0px)) !important;
  background: #0E0E0E !important;
}

.music-discover-show-all-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 44px !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 -18px 22px !important;
  padding: max(10px, calc(var(--shelfd-safe-top, 0px) + 10px)) 18px 14px !important;
  background: rgba(18, 18, 20, 0.92) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

.music-discover-show-all-back {
  appearance: none !important;
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(248, 246, 255, 0.94) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.music-discover-show-all-back svg {
  width: 28px !important;
  height: 28px !important;
}

.music-discover-show-all-topbar h2 {
  margin: 0 !important;
  color: #f4f1fb !important;
  font-size: 19px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.music-discover-show-all-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 18px !important;
  row-gap: 32px !important;
  align-items: start !important;
}

.music-discover-show-all-item {
  appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  color: inherit !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

.music-discover-show-all-cover {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  background-color: #181820 !important;
  background-size: cover !important;
  background-position: center !important;
  color: rgba(196, 181, 253, 0.60) !important;
  font-size: 30px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.music-discover-show-all-cover.no-img {
  background: linear-gradient(135deg, rgba(28, 24, 48, 0.98), rgba(15, 15, 20, 0.98)) !important;
}

.music-discover-show-all-name,
.music-discover-show-all-artist {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
}

.music-discover-show-all-name {
  margin-top: 11px !important;
  color: rgba(248, 246, 255, 0.94) !important;
  font-size: 15px !important;
  line-height: 1.18 !important;
  font-weight: 600 !important;
}

.music-discover-show-all-artist {
  margin-top: 5px !important;
  color: rgba(232, 227, 243, 0.58) !important;
  font-size: 13px !important;
  line-height: 1.18 !important;
  font-weight: 300 !important;
}

.music-discover-show-all-loader {
  display: flex !important;
  justify-content: center !important;
  padding: 28px 0 10px !important;
}

.music-discover-show-all-loader[hidden] {
  display: none !important;
}

.music-discover-show-all-loader span {
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(196, 181, 253, 0.22) !important;
  border-top-color: rgba(196, 181, 253, 0.92) !important;
  animation: musicDiscoverShowAllSpin 760ms linear infinite !important;
}

.music-discover-show-all-empty {
  grid-column: 1 / -1 !important;
}

@keyframes musicDiscoverShowAllSpin {
  to { transform: rotate(360deg); }
}

/* Parent flex chain — every container that wraps a Discover title gets
   `min-width: 0` so the title can shrink under its parent's width.
   `body` scope keeps these rules winning the cascade regardless of any
   per-variant override that re-sets flex on these classes. */
body .discover-card,
body .discover-card-body,
body .discover-card-info-row,
body .discover-card-info-stack,
body .games-dc-body,
body .games-discover-card,
body .anime-seasonal-card,
body .anime-seasonal-card-info,
body .discover-new-release-card,
body .discover-friend-watch-card,
body .discover-card-title-row {
  min-width: 0 !important;
}

/* v10.148: DM icon locked to a uniform size across all tabs.
   v10.150: bumped selector specificity to 0,3,0 so this rule beats
   the per-tab overrides (Discover 26px, Community 25/28px, My Lists
   24/25px, mobile-portrait 18px clamp).
   v10.151: size 15px → 18px (15px read too small).
   v10.814: heavier 1.5px stroke for the top-right DM glyph.
   v10.816: match cog scale with 24px glyph and 3px stroke.
   v10.817: tune stroke down to 2px. */
body .header-dm-icon,
body .header-dm-icon svg,
body.main-tab-discover .header-dm-icon,
body.main-tab-discover .header-dm-icon svg,
body.main-tab-community .header-dm-icon,
body.main-tab-community .header-dm-icon svg,
body.main-tab-mylist .header-dm-icon,
body.main-tab-mylist .header-dm-icon svg {
  width: 24px !important;
  height: 24px !important;
}
body .header-dm-icon svg,
body .header-dm-icon svg path,
body.main-tab-discover .header-dm-icon svg,
body.main-tab-discover .header-dm-icon svg path,
body.main-tab-community .header-dm-icon svg,
body.main-tab-community .header-dm-icon svg path,
body.main-tab-mylist .header-dm-icon svg,
body.main-tab-mylist .header-dm-icon svg path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* v10.757: Soft 1px divider between header and page body on
   Discover / Activity / Friends pages. Uses 3-class specificity to beat
   the `body.true-dark-mode .header { border-bottom: 0 !important }` rule
   in 12-pwa-header-continuity.css (which is only 2-class specificity). */
body.true-dark-mode.main-tab-discover .header,
body.true-dark-mode.main-tab-community .header {
  border-bottom: 1px solid rgba(255,255,255,0.6) !important;
}

/* v10.756 / v10.763: Hide Shelfd logo + wordmark on Discover / Activity /
   Friends pages — replaced by the plain page title text from
   updateMainHeaderPageTitle(). Also hides on viewing-other-user (a friend's
   mylist view), where the header carries the friend's display name.
   Loaded after 14-live-update-discover-controls.css + 15-universal-discovery-search.css
   so same-specificity !important rules here win the cascade. Both desktop and
   mobile versions needed (14/15 have both unscoped and @media rules). */
body.main-tab-discover .header-logo-block > img.site-logo-img,
body.main-tab-discover .header-logo-block > img.site-wordmark-img,
body.main-tab-community .header-logo-block > img.site-logo-img,
body.main-tab-community .header-logo-block > img.site-wordmark-img,
body.viewing-other-user .header-logo-block > img.site-logo-img,
body.viewing-other-user .header-logo-block > img.site-wordmark-img {
  display: none !important;
}
@media (max-width: 700px) {
  body.main-tab-discover .header-logo-block > img.site-logo-img,
  body.main-tab-discover .header-logo-block > img.site-wordmark-img,
  body.main-tab-community .header-logo-block > img.site-logo-img,
  body.main-tab-community .header-logo-block > img.site-wordmark-img,
  body.viewing-other-user .header-logo-block > img.site-logo-img,
  body.viewing-other-user .header-logo-block > img.site-wordmark-img {
    display: none !important;
  }
}

/* v10.763: @username display under the friend's avatar on their mylist view.
   The display NAME now lives in the top-of-screen header (replacing the
   Shelfd logo via updateMainHeaderPageTitle), so what sits below the
   avatar is the @handle — same hierarchy as Instagram/X/etc. */
.viewing-user-handle {
  font-size: 14px;
  font-weight: 500;
  color: rgba(235,232,244,0.65);
  letter-spacing: 0.005em;
  font-family: 'Sohne', 'DM Sans', system-ui, -apple-system, sans-serif;
  line-height: 1.2;
}

/* ════════════════════════════════════════════════════════════════════════
   v10.765 — Profile Settings borderless redesign.
   ════════════════════════════════════════════════════════════════════════
   Old: each .profile-settings-card had a 1px lavender border + 24px
        radius + rgba background. Looked like discrete bordered boxes.
   New: cards float — no border, no background, no shadow. Sections
        are separated by FULL-WIDTH 1px dividers that span edge-to-edge
        regardless of iPhone screen width (achieved via 100vw +
        translateX(-50%) trick which breaks out of the container padding).
   Also overrides body.true-dark-mode rules in 06-profile.css which set
   their own border/background. The :where(...) wrapper keeps specificity
   matched-or-higher than those existing rules.
   ════════════════════════════════════════════════════════════════════════ */

.profile-settings-card.profile-settings-card-floating,
body.true-dark-mode .profile-settings-card.profile-settings-card-floating {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 20px 0 !important;
  margin: 0 !important;
  position: relative;
}

/* Full-width divider above every card except the first. Uses 100vw +
   translateX trick to span edge-to-edge regardless of container padding
   or iPhone screen size (works on Base / Plus / Pro Max alike). */
.profile-settings-card-floating + .profile-settings-card-floating::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: rgba(255,255,255,0.08);
  pointer-events: none;
}

/* Tighten the container gap since dividers now handle the visual separation. */
.profile-settings-shell {
  gap: 0 !important;
}

/* ── Username + Display Name display rows ── */
.profile-settings-handle-row,
.profile-settings-displayname-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.profile-settings-handle-display,
.profile-settings-displayname-display {
  font-family: 'Sohne', 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #f5f5f7;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}

.profile-settings-edit-btn {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.06);
  border: 0;
  border-radius: 999px;
  color: #f5f5f7;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 7px 16px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 140ms ease, color 140ms ease, opacity 140ms ease;
}
.profile-settings-edit-btn:hover { background: rgba(255,255,255,0.1); }
.profile-settings-edit-btn:active { transform: scale(0.96); }
.profile-settings-edit-btn.is-locked,
.profile-settings-edit-btn[disabled] {
  background: rgba(255,255,255,0.04);
  color: rgba(235,232,244,0.45);
  cursor: not-allowed;
  opacity: 0.7;
}

/* ── Inline edit forms ── */
.profile-settings-handle-edit,
.profile-settings-displayname-edit {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* v10.772: respect the HTML `hidden` attribute. The display:flex above
   would otherwise OVERRIDE the browser-default `[hidden] { display: none }`,
   keeping the edit form visible even when JS set .hidden = true.
   That's why both the display row AND the edit form were showing at once
   on first paint. Same fix applies to the display row so clicking Edit
   actually hides it during inline editing. */
.profile-settings-handle-row[hidden],
.profile-settings-handle-edit[hidden],
.profile-settings-displayname-row[hidden],
.profile-settings-displayname-edit[hidden] {
  display: none !important;
}
.profile-settings-handle-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 0 12px;
  transition: border-color 140ms ease, background 140ms ease;
}
.profile-settings-handle-input-wrap:focus-within {
  border-color: rgba(167,139,250,0.55);
  background: rgba(255,255,255,0.07);
}
.profile-settings-handle-prefix {
  font-family: 'Sohne', 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: rgba(235,232,244,0.55);
  margin-right: 2px;
  user-select: none;
}
#profile-settings-handle-input,
#profile-settings-displayname-input {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: #f5f5f7;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 12px 0;
  width: 100%;
  outline: none;
}
#profile-settings-displayname-input {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color 140ms ease, background 140ms ease;
}
#profile-settings-displayname-input:focus {
  border-color: rgba(167,139,250,0.55);
  background: rgba(255,255,255,0.07);
}

.profile-settings-handle-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.profile-settings-cancel-btn,
.profile-settings-save-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 8px 18px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, transform 100ms ease;
}
.profile-settings-cancel-btn {
  background: rgba(255,255,255,0.05);
  color: #f5f5f7;
}
.profile-settings-cancel-btn:hover { background: rgba(255,255,255,0.09); }
.profile-settings-cancel-btn:active { transform: scale(0.96); }
.profile-settings-save-btn {
  background: linear-gradient(135deg, #a78bfa, #8b5cf6);
  color: #fff;
  box-shadow: 0 4px 14px rgba(124,58,237,0.25);
}
.profile-settings-save-btn:hover { filter: brightness(1.06); }
.profile-settings-save-btn:active { transform: scale(0.96); }
.profile-settings-save-btn[disabled] {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.5);
  cursor: not-allowed;
  box-shadow: none;
}
/* v10.766: brief green "Saved ✓" state to confirm the write landed. */
.profile-settings-save-btn.is-saved {
  background: linear-gradient(135deg, #34d399, #10b981) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(16,185,129,0.32) !important;
  transform: scale(1.02);
}

.profile-settings-edit-hint {
  font-family: 'Sohne', 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 12px;
  color: rgba(235,232,244,0.5);
  line-height: 1.4;
}
.profile-settings-edit-error {
  font-family: 'Sohne', 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #fb7185;
  line-height: 1.4;
}

/* v10.784: removed the FPMP dock star CSS (lines that handled
   .discover-media-library-stars / .star-btn / .lit / .rating-confirm /
   .skip / .confirm). The dock no longer has a rating row — Watched
   goes straight to the full-page write-a-review composer
   (openShelfLogComposer) which has its own canonical star UI. */

/* Triple-button choice row stays — three equal-width buttons
   (Watchlist / Watching / Watched) on the FPMP add dock. */
.discover-media-library-actions.discover-media-library-actions-triple {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}
.discover-media-library-actions-triple .discover-media-library-choice {
  width: 100%;
  min-width: 0;
}
.discover-media-library-actions-triple .discover-media-library-choice.watching {
  border-color: rgba(125, 211, 252, 0.55);
  background: linear-gradient(140deg, rgba(125,211,252,0.16), rgba(34,211,238,0.10));
}
.discover-media-library-actions-triple .discover-media-library-choice.watching:hover {
  border-color: rgba(125, 211, 252, 0.85);
}

/* v10.775: cooldown message shown under the username when user taps
   Edit during the 14-day lock. Replaces the previous "Locked Xd" button
   label — button now always says "Edit" and clicking it during cooldown
   surfaces this inline red message instead. */
.profile-settings-handle-locked-msg {
  margin-top: 6px;
  font-family: 'Sohne', 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 300;
  color: #fb7185;
  line-height: 1.4;
  letter-spacing: 0.005em;
}
.profile-settings-handle-locked-msg[hidden] {
  display: none !important;
}

/* v10.893: Friends Requests page - modern request pills + sent Watch Together cards. */
#requests-view .request-subtabs {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  width: 100% !important;
  margin: 0 0 18px !important;
  padding: 4px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(167, 139, 250, 0.14) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
}

#requests-view .request-subtab {
  flex: 1 1 0 !important;
  min-height: 38px !important;
  padding: 0 12px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(232, 227, 243, 0.66) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

#requests-view .request-subtab.active {
  background: rgba(167, 139, 250, 0.16) !important;
  border-color: rgba(196, 181, 253, 0.20) !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  box-shadow: 0 8px 20px rgba(7, 4, 18, 0.18) !important;
}

#requests-view .request-subtab-count {
  min-width: 19px !important;
  height: 19px !important;
  padding: 0 6px !important;
  margin-left: 6px !important;
  border-radius: 999px !important;
  background: rgba(216, 180, 254, 0.22) !important;
  color: #f5f0ff !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}

#requests-view .friend-watch-request-card.sent-request {
  grid-template-columns: 58px minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 12px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(167, 139, 250, 0.14) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.024)),
    rgba(9, 8, 18, 0.74) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18) !important;
}

#requests-view .friend-watch-request-card.sent-request .friend-watch-request-poster {
  width: 58px !important;
  height: 82px !important;
  border-radius: 12px !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

#requests-view .friend-watch-request-card.sent-request .friend-watch-request-kicker {
  gap: 5px !important;
  margin-bottom: 5px !important;
}

#requests-view .friend-watch-request-card.sent-request .friend-watch-request-kicker span,
#requests-view .friend-watch-request-card.sent-request .friend-watch-request-kicker em {
  min-height: 19px !important;
  padding: 0 7px !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12px !important;
  color: rgba(232, 227, 243, 0.82) !important;
}

#requests-view .friend-watch-request-card.sent-request .friend-watch-request-kicker span {
  background: rgba(167, 139, 250, 0.16) !important;
  border-color: rgba(196, 181, 253, 0.16) !important;
}

#requests-view .friend-watch-request-card.sent-request .friend-watch-request-kicker em {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  color: rgba(216, 208, 233, 0.70) !important;
}

#requests-view .friend-watch-request-card.sent-request .friend-watch-request-body h4 {
  color: #f7f3ff !important;
  font-size: 16px !important;
  line-height: 1.16 !important;
  font-weight: 600 !important;
  margin-bottom: 5px !important;
}

#requests-view .friend-watch-request-card.sent-request .friend-watch-request-body p {
  color: rgba(216, 208, 233, 0.66) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 300 !important;
}

#requests-view .friend-watch-request-card.sent-request .friend-watch-request-meta-row strong,
#requests-view .friend-watch-request-card.sent-request .friend-watch-request-approved span {
  color: rgba(196, 181, 253, 0.82) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}

#requests-view .friend-watch-request-card.sent-request .friend-watch-request-sent-to {
  gap: 6px !important;
  margin-top: 10px !important;
}

#requests-view .friend-watch-request-card.sent-request .friend-watch-request-sent-to > span {
  color: rgba(196, 181, 253, 0.68) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.28px !important;
}

#requests-view .friend-watch-request-card.sent-request .friend-watch-request-person-pill {
  min-height: 32px !important;
  gap: 7px !important;
  padding: 3px 9px 3px 3px !important;
  border: 1px solid rgba(196, 181, 253, 0.14) !important;
  background: rgba(167, 139, 250, 0.09) !important;
  color: rgba(247, 243, 255, 0.88) !important;
}

#requests-view .friend-watch-request-card.sent-request .friend-watch-request-person-pill img {
  width: 25px !important;
  height: 25px !important;
}

#requests-view .friend-watch-request-card.sent-request .friend-watch-request-person-pill strong {
  font-size: 11.5px !important;
  font-weight: 400 !important;
  color: rgba(247, 243, 255, 0.88) !important;
}

#requests-view .friend-watch-request-card.sent-request .friend-watch-request-person-pill em {
  color: rgba(248, 113, 113, 0.88) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

#requests-view .friend-watch-request-card.sent-request .friend-watch-request-actions {
  grid-column: 1 / -1 !important;
  margin-top: 1px !important;
}

#requests-view .friend-watch-request-card.sent-request .friend-watch-action.decline {
  min-height: 36px !important;
  border: 1px solid rgba(248, 113, 113, 0.18) !important;
  border-radius: 999px !important;
  background: rgba(239, 68, 68, 0.08) !important;
  color: rgba(254, 202, 202, 0.92) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

body.light-mode #requests-view .request-subtabs {
  background: rgba(124, 58, 237, 0.05) !important;
  border-color: rgba(20, 20, 20, 0.10) !important;
}

body.light-mode #requests-view .request-subtab {
  color: #5c526f !important;
}

body.light-mode #requests-view .request-subtab.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #7c3aed, #9333ea) !important;
  border-color: transparent !important;
}

body.light-mode #requests-view .friend-watch-request-card.sent-request {
  background: linear-gradient(145deg, #ffffff, #f8f4ff) !important;
  border-color: rgba(124, 58, 237, 0.14) !important;
  box-shadow: 0 12px 26px rgba(76, 29, 149, 0.08) !important;
}

body.light-mode #requests-view .friend-watch-request-card.sent-request .friend-watch-request-body h4 {
  color: #171717 !important;
}

body.light-mode #requests-view .friend-watch-request-card.sent-request .friend-watch-request-body p,
body.light-mode #requests-view .friend-watch-request-card.sent-request .friend-watch-request-meta-row strong {
  color: rgba(23, 23, 23, 0.68) !important;
}

body.light-mode #requests-view .friend-watch-request-card.sent-request .friend-watch-request-sent-to > span,
body.light-mode #requests-view .friend-watch-request-card.sent-request .friend-watch-request-kicker span,
body.light-mode #requests-view .friend-watch-request-card.sent-request .friend-watch-request-kicker em {
  color: #6d28d9 !important;
}

/* v10.927: Main Discovery hub categories stay in one glass pill. */
#discover-view .discover-hub-toggle,
#anime-discover-view .discover-hub-toggle,
#games-discover-view .discover-hub-toggle,
#music-discover-view .discover-hub-toggle,
body:not(.light-mode):not(.true-dark-mode) #discover-view .discover-hub-toggle,
body:not(.light-mode):not(.true-dark-mode) #anime-discover-view .discover-hub-toggle,
body:not(.light-mode):not(.true-dark-mode) #games-discover-view .discover-hub-toggle,
body:not(.light-mode):not(.true-dark-mode) #music-discover-view .discover-hub-toggle {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 2px !important;
  width: min(100%, 430px) !important;
  max-width: 100% !important;
  margin: 0 auto 18px !important;
  /* v11.058: remove the wrapping capsule entirely — no border, background,
     shadow or blur. The tab row is bare; the active underline is the only
     indicator. */
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

#discover-view .discover-hub-toggle::-webkit-scrollbar,
#anime-discover-view .discover-hub-toggle::-webkit-scrollbar,
#games-discover-view .discover-hub-toggle::-webkit-scrollbar,
#music-discover-view .discover-hub-toggle::-webkit-scrollbar {
  display: none !important;
}

#discover-view .discover-hub-btn,
#anime-discover-view .discover-hub-btn,
#games-discover-view .discover-hub-btn,
#music-discover-view .discover-hub-btn,
body:not(.light-mode):not(.true-dark-mode) #discover-view .discover-hub-btn,
body:not(.light-mode):not(.true-dark-mode) #anime-discover-view .discover-hub-btn,
body:not(.light-mode):not(.true-dark-mode) #games-discover-view .discover-hub-btn,
body:not(.light-mode):not(.true-dark-mode) #music-discover-view .discover-hub-btn,
#discover-view .discover-hub-btn.active,
#anime-discover-view .discover-hub-btn.active,
#games-discover-view .discover-hub-btn.active,
#music-discover-view .discover-hub-btn.active,
body:not(.light-mode):not(.true-dark-mode) #discover-view .discover-hub-btn.active,
body:not(.light-mode):not(.true-dark-mode) #anime-discover-view .discover-hub-btn.active,
body:not(.light-mode):not(.true-dark-mode) #games-discover-view .discover-hub-btn.active,
body:not(.light-mode):not(.true-dark-mode) #music-discover-view .discover-hub-btn.active {
  flex: 1 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 7px 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(248, 245, 239, 0.72) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

#discover-view .discover-hub-btn.active,
#anime-discover-view .discover-hub-btn.active,
#games-discover-view .discover-hub-btn.active,
#music-discover-view .discover-hub-btn.active,
body:not(.light-mode):not(.true-dark-mode) #discover-view .discover-hub-btn.active,
body:not(.light-mode):not(.true-dark-mode) #anime-discover-view .discover-hub-btn.active,
body:not(.light-mode):not(.true-dark-mode) #games-discover-view .discover-hub-btn.active,
body:not(.light-mode):not(.true-dark-mode) #music-discover-view .discover-hub-btn.active {
  /* v11.051: active tab = underline only. No pill background, no outline ring. */
  background: transparent !important;
  color: #ffffff !important;
  box-shadow: none !important;
  text-decoration: underline !important;
  text-decoration-color: #c4b5fd !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 7px !important;
}

body.light-mode #discover-view .discover-hub-toggle,
body.light-mode #anime-discover-view .discover-hub-toggle,
body.light-mode #games-discover-view .discover-hub-toggle,
body.light-mode #music-discover-view .discover-hub-toggle {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(18, 8, 46, 0.10) !important;
  box-shadow: 0 18px 34px rgba(76, 29, 149, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
}

body.light-mode #discover-view .discover-hub-btn,
body.light-mode #anime-discover-view .discover-hub-btn,
body.light-mode #games-discover-view .discover-hub-btn,
body.light-mode #music-discover-view .discover-hub-btn {
  color: rgba(36, 26, 58, 0.68) !important;
}

body.light-mode #discover-view .discover-hub-btn.active,
body.light-mode #anime-discover-view .discover-hub-btn.active,
body.light-mode #games-discover-view .discover-hub-btn.active,
body.light-mode #music-discover-view .discover-hub-btn.active {
  background: rgba(124, 58, 237, 0.14) !important;
  color: #6d28d9 !important;
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.18) !important;
}

/* v11.140: Full-page media profile title typography. Keep this late in
   the loaded CSS order so it wins over older movie/TV/anime/game/music
   profile title rules that live in earlier stylesheets. */
.discover-media-profile-overlay .discover-media-hero h2,
.game-media-profile-overlay .discover-media-hero h2,
.music-album-profile-page .music-album-profile-album-title,
.music-artist-profile-page .music-artist-profile-name {
  font-family: 'Sohne', 'DM Sans', system-ui, -apple-system, sans-serif !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}

.discover-media-profile-overlay .discover-media-tagline,
.game-media-profile-overlay .discover-media-tagline {
  font-weight: 500 !important;
}

/* v11.181: universal full-page media profile typography pass.
   Keep this late so it beats the older per-surface rules for movie/TV/anime,
   games, and the section-button styles that live in earlier stylesheets. */
.discover-media-profile-overlay .discover-media-hero p,
.game-media-profile-overlay .discover-media-hero p,
.music-artist-profile-page .music-artist-profile-disambig,
.music-album-profile-page .music-album-profile-artist {
  font-weight: 400 !important;
}

.discover-media-profile-overlay .discover-media-hero p,
.game-media-profile-overlay .discover-media-hero p {
  text-align: left !important;
}

.discover-media-profile-overlay .discover-media-watch-inline-head strong,
.game-media-profile-overlay .discover-media-watch-inline-head strong {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

.discover-media-profile-overlay .discover-media-watch-inline,
.game-media-profile-overlay .discover-media-watch-inline {
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  align-items: flex-start !important;
  text-align: left !important;
  margin: 8px 0 4px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255,255,255,0.18) !important;
}

.discover-media-profile-overlay .discover-media-watch-inline-head,
.game-media-profile-overlay .discover-media-watch-inline-head,
.discover-media-profile-overlay .discover-media-watch-inline-rows,
.game-media-profile-overlay .discover-media-watch-inline-rows {
  width: 100% !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.discover-media-profile-overlay .discover-media-watch-inline-head,
.game-media-profile-overlay .discover-media-watch-inline-head {
  width: 100% !important;
  gap: 2px !important;
}

.discover-media-profile-overlay .discover-media-watch-inline-rows,
.game-media-profile-overlay .discover-media-watch-inline-rows {
  justify-items: start !important;
  align-content: start !important;
  grid-auto-columns: minmax(0, max-content) !important;
  gap: 7px 18px !important;
}

.discover-media-profile-overlay .discover-media-watch-inline-head span,
.game-media-profile-overlay .discover-media-watch-inline-head span,
.discover-media-profile-overlay .discover-media-watch-inline-row,
.game-media-profile-overlay .discover-media-watch-inline-row,
.discover-media-profile-overlay .discover-media-watch-inline-row .discover-media-watch-inline-row-label,
.game-media-profile-overlay .discover-media-watch-inline-row .discover-media-watch-inline-row-label,
.discover-media-profile-overlay .discover-media-watch-inline-row .discover-media-watch-inline-provider-list,
.game-media-profile-overlay .discover-media-watch-inline-row .discover-media-watch-inline-provider-list,
.discover-media-profile-overlay .discover-media-watch-inline-row .discover-media-watch-inline-provider,
.game-media-profile-overlay .discover-media-watch-inline-row .discover-media-watch-inline-provider,
.discover-media-profile-overlay .discover-media-watch-inline-row .discover-provider-name-text,
.game-media-profile-overlay .discover-media-watch-inline-row .discover-provider-name-text {
  font-weight: 400 !important;
}

.discover-media-profile-overlay .discover-media-watch-inline-row .discover-media-watch-inline-row-label,
.game-media-profile-overlay .discover-media-watch-inline-row .discover-media-watch-inline-row-label,
.discover-media-profile-overlay .discover-media-watch-inline-row .discover-media-watch-inline-provider-list,
.game-media-profile-overlay .discover-media-watch-inline-row .discover-media-watch-inline-provider-list,
.discover-media-profile-overlay .discover-media-watch-inline-row .discover-media-watch-inline-provider,
.game-media-profile-overlay .discover-media-watch-inline-row .discover-media-watch-inline-provider,
.discover-media-profile-overlay .discover-media-watch-inline-row .discover-provider-name-text,
.game-media-profile-overlay .discover-media-watch-inline-row .discover-provider-name-text {
  font-size: 15px !important;
  line-height: 1.05 !important;
}

.discover-media-profile-overlay .discover-media-watch-inline-row .discover-media-watch-inline-row-label,
.game-media-profile-overlay .discover-media-watch-inline-row .discover-media-watch-inline-row-label {
  display: none !important;
}

.discover-media-profile-overlay .discover-media-facts strong,
.game-media-profile-overlay .discover-media-facts strong,
.discover-media-profile-overlay .discover-media-credits strong,
.game-media-profile-overlay .discover-media-credits strong {
  color: #ffffff !important;
  font-weight: 400 !important;
}

.discover-media-profile-overlay .discover-media-facts span,
.game-media-profile-overlay .discover-media-facts span,
.discover-media-profile-overlay .discover-media-credits span,
.game-media-profile-overlay .discover-media-credits span {
  font-weight: 400 !important;
}

.discover-media-profile-overlay .discover-media-score .discover-media-score-value,
.game-media-profile-overlay .discover-media-score .discover-media-score-value {
  font-weight: 600 !important;
}

.discover-media-profile-overlay .discover-media-score .discover-media-score-denominator,
.game-media-profile-overlay .discover-media-score .discover-media-score-denominator {
  font-weight: 400 !important;
}

.discover-media-profile-overlay .discover-media-chips span,
.game-media-profile-overlay .discover-media-chips span {
  color: #ffffff !important;
  font-weight: 400 !important;
}

.discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-credits div,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-section-cast,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-ai-more-section,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-seasons-entry {
  border-color: rgba(255,255,255,0.18) !important;
}

.discover-media-profile-overlay .discover-ai-more-section h3,
.game-media-profile-overlay .discover-ai-more-section h3,
.discover-media-profile-overlay .discover-media-section-cast h3,
.game-media-profile-overlay .discover-media-section-cast h3,
.discover-media-section-user-reviews .media-profile-user-reviews-button span {
  font-weight: 500 !important;
}

.discover-media-profile-overlay .discover-ai-more-section .discover-media-similar-card span,
.game-media-profile-overlay .discover-ai-more-section .discover-media-similar-card span {
  font-weight: 500 !important;
}

.discover-media-profile-overlay .discover-ai-more-section .discover-media-similar-card small,
.game-media-profile-overlay .discover-ai-more-section .discover-media-similar-card small {
  color: #ffffff !important;
  font-weight: 400 !important;
}

.discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-seasons-entry {
  padding: 16px 2px !important;
  margin-top: 2px !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.18) !important;
  border-bottom: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-seasons-entry:hover,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-seasons-entry:active {
  background: transparent !important;
}

.discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-seasons-entry-copy h3,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-seasons-entry-meta {
  font-weight: 600 !important;
}

.discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-facts strong {
  color: #ffffff !important;
  font-weight: 400 !important;
}

.discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-facts span {
  font-weight: 400 !important;
}

.discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-facts {
  margin-top: 15px !important;
}

/* v11.186: FPMP add-to-shelf dock + add-shelf modal typography ladder.
   Normalize the full flow to 400 body / 500 subheading / 600 header / 700 title. */
.discover-media-library-eyebrow {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
}

.discover-media-library-title,
.discover-media-library-success-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
}

.discover-media-library-added-note,
.discover-media-library-choice small,
.discover-media-library-success-sub {
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

.discover-media-library-choice span {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.12 !important;
}

.discover-media-library-close {
  font-size: 17px !important;
  font-weight: 600 !important;
}

body.true-dark-mode #modal .add-shelf-step-kicker,
body.true-dark-mode #modal .add-shelf-selected-kicker,
body.true-dark-mode #modal .modal-status-label,
body.true-dark-mode #modal .add-shelf-rating-kicker {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
}

body.true-dark-mode #modal .add-shelf-step-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
}

body.true-dark-mode #modal .tmdb-selected-title,
body.true-dark-mode #modal .add-shelf-confirm-readout,
body.true-dark-mode #modal .modal-status-confirm-title,
body.true-dark-mode #modal .add-shelf-rating-readout {
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  color: #f6f4fb !important;
}

body.true-dark-mode #modal .add-shelf-step-subtitle,
body.true-dark-mode #modal .add-shelf-selected-line,
body.true-dark-mode #modal .modal-status-confirm-copy,
body.true-dark-mode #modal .discover-rating-prompt .discover-add-desc,
body.true-dark-mode #modal .modal-status-subtitle,
body.true-dark-mode #modal .add-shelf-rating-desc,
body.true-dark-mode #modal .add-shelf-step-shell--success .add-shelf-success-panel .modal-status-confirm-copy {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.38 !important;
}

body.true-dark-mode #modal .add-shelf-selected-chip,
body.true-dark-mode #modal .add-shelf-confirm-chip,
body.true-dark-mode #modal .add-shelf-rating-prompt .star-label {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

body.true-dark-mode #modal .add-shelf-step-back,
body.true-dark-mode #modal .add-shelf-choice-btn,
body.true-dark-mode #modal .modal-status-btn,
body.true-dark-mode #modal .modal-status-confirm-actions .btn-secondary,
body.true-dark-mode #modal .modal-status-confirm-actions .btn-primary,
body.true-dark-mode #modal .modal-actions .btn-secondary,
body.true-dark-mode #modal .add-shelf-rating-actions .btn-secondary,
body.true-dark-mode #modal .add-shelf-rating-actions .btn-primary,
body.true-dark-mode #modal .add-shelf-selected-clear {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

body.true-dark-mode #modal .add-shelf-search-flash {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

.discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-facts .discover-media-fact-seasons strong,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-facts .discover-media-fact-episodes strong,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-facts .discover-media-fact-members strong {
  color: #ffffff !important;
  opacity: 1 !important;
}

.discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-credits span,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-credits strong {
  font-weight: 400 !important;
}

.discover-media-profile-overlay .discover-media-cast-card strong,
.game-media-profile-overlay .discover-media-cast-card strong,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-cast-card strong,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page .discover-media-cast-card span,
.discover-media-profile-overlay .discover-media-cast-card span,
.game-media-profile-overlay .discover-media-cast-card span {
  font-weight: 400 !important;
}

.discover-media-profile-overlay .discover-media-page.discover-person-page .discover-person-overview-panel div {
  display: flex !important;
  flex-direction: column !important;
}

.discover-media-profile-overlay .discover-media-page.discover-person-page .discover-person-overview-panel span {
  order: -1 !important;
  margin: 0 0 6px !important;
  font-weight: 300 !important;
}

.discover-media-profile-overlay .discover-media-page.discover-person-page .discover-person-overview-panel strong {
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;
}

.discover-media-profile-overlay .discover-media-page.discover-person-page .discover-media-hero p {
  font-weight: 400 !important;
}

.discover-media-profile-overlay .discover-media-page.discover-person-page .discover-person-most-known h3,
.discover-media-profile-overlay .discover-media-page.discover-person-page .discover-person-filmography-header h3 {
  font-weight: 600 !important;
}

.discover-media-profile-overlay .discover-media-page.discover-person-page .discover-person-credit-title {
  font-weight: 500 !important;
}

.discover-media-profile-overlay .discover-media-page.discover-person-page .discover-person-credit-role {
  color: #ffffff !important;
  font-weight: 400 !important;
}

/* v11.177: actor/person profile chrome + content stack move up 15px from the
   older +39px patch. Keep this late so it beats the earlier coordinated
   page/back/heart offsets in 11-patch-notes-friends-refinements.css and
   05-messages-early-polish.css. */
.discover-media-profile-overlay .discover-person-page {
  padding-top: 24px !important;
}

.discover-media-profile-overlay .discover-person-page > .discover-media-back.discover-media-back--icon,
.cast-fav-btn.cast-fav-btn--profile {
  top: max(38px, calc(var(--shelfd-safe-top, 0px) + 24px)) !important;
}

.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-tv .discover-media-facts .discover-media-fact-seasons,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-tv .discover-media-facts .discover-media-fact-episodes,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-tv .discover-media-facts .discover-media-fact-members,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-tv .discover-media-facts .discover-media-fact-first-aired,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-tv .discover-media-facts .discover-media-fact-country,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-tv .discover-media-facts .discover-media-fact-status,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-tv .discover-media-facts .discover-media-fact-type,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-tv .discover-media-facts .discover-media-fact-trailer-views,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-anime .discover-media-facts .discover-media-fact-seasons,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-anime .discover-media-facts .discover-media-fact-episodes,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-anime .discover-media-facts .discover-media-fact-members,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-anime .discover-media-facts .discover-media-fact-first-aired,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-anime .discover-media-facts .discover-media-fact-country,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-anime .discover-media-facts .discover-media-fact-status,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-anime .discover-media-facts .discover-media-fact-type,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-anime .discover-media-facts .discover-media-fact-trailer-views,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-movie .discover-media-facts .discover-media-fact-runtime,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-movie .discover-media-facts .discover-media-fact-release-date,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-movie .discover-media-facts .discover-media-fact-country,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-movie .discover-media-facts .discover-media-fact-status,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-movie .discover-media-facts .discover-media-fact-budget,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-movie .discover-media-facts .discover-media-fact-box-office,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-movie .discover-media-facts .discover-media-fact-members,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-movie .discover-media-facts .discover-media-fact-trailer-views {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 5px !important;
}

.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-tv .discover-media-facts .discover-media-fact-seasons strong,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-tv .discover-media-facts .discover-media-fact-episodes strong,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-tv .discover-media-facts .discover-media-fact-members strong,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-tv .discover-media-facts .discover-media-fact-first-aired strong,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-tv .discover-media-facts .discover-media-fact-country strong,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-tv .discover-media-facts .discover-media-fact-status strong,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-tv .discover-media-facts .discover-media-fact-type strong,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-tv .discover-media-facts .discover-media-fact-trailer-views strong,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-anime .discover-media-facts .discover-media-fact-seasons strong,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-anime .discover-media-facts .discover-media-fact-episodes strong,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-anime .discover-media-facts .discover-media-fact-members strong,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-anime .discover-media-facts .discover-media-fact-first-aired strong,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-anime .discover-media-facts .discover-media-fact-country strong,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-anime .discover-media-facts .discover-media-fact-status strong,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-anime .discover-media-facts .discover-media-fact-type strong,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-anime .discover-media-facts .discover-media-fact-trailer-views strong,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-movie .discover-media-facts .discover-media-fact-runtime strong,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-movie .discover-media-facts .discover-media-fact-release-date strong,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-movie .discover-media-facts .discover-media-fact-country strong,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-movie .discover-media-facts .discover-media-fact-status strong,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-movie .discover-media-facts .discover-media-fact-budget strong,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-movie .discover-media-facts .discover-media-fact-box-office strong,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-movie .discover-media-facts .discover-media-fact-members strong,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-movie .discover-media-facts .discover-media-fact-trailer-views strong {
  order: 2 !important;
  margin-top: 0 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 0.9 !important;
}

.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-tv .discover-media-facts .discover-media-fact-seasons span,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-tv .discover-media-facts .discover-media-fact-episodes span,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-tv .discover-media-facts .discover-media-fact-members span,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-tv .discover-media-facts .discover-media-fact-first-aired span,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-tv .discover-media-facts .discover-media-fact-country span,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-tv .discover-media-facts .discover-media-fact-status span,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-tv .discover-media-facts .discover-media-fact-type span,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-tv .discover-media-facts .discover-media-fact-trailer-views span,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-anime .discover-media-facts .discover-media-fact-seasons span,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-anime .discover-media-facts .discover-media-fact-episodes span,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-anime .discover-media-facts .discover-media-fact-members span,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-anime .discover-media-facts .discover-media-fact-first-aired span,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-anime .discover-media-facts .discover-media-fact-country span,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-anime .discover-media-facts .discover-media-fact-status span,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-anime .discover-media-facts .discover-media-fact-type span,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-anime .discover-media-facts .discover-media-fact-trailer-views span,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-movie .discover-media-facts .discover-media-fact-runtime span,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-movie .discover-media-facts .discover-media-fact-release-date span,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-movie .discover-media-facts .discover-media-fact-country span,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-movie .discover-media-facts .discover-media-fact-status span,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-movie .discover-media-facts .discover-media-fact-budget span,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-movie .discover-media-facts .discover-media-fact-box-office span,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-movie .discover-media-facts .discover-media-fact-members span,
.discover-media-profile-overlay .discover-media-page.discover-standard-title-page-movie .discover-media-facts .discover-media-fact-trailer-views span {
  order: 1 !important;
  margin-top: 0 !important;
  line-height: 0.9 !important;
}

/* v11.236: creator/dev account now shows the GLASS status button too.
   The old v11.190 block forced a flat French-Lilac pill on this account, which
   overrode the v11.233/234 glass design — so the creator never saw the glass.
   Rewritten: the visible current pill (`.game-status-current-pill`) renders the
   frosted-glass button (white base + per-status tint), matching the design
   shipped to everyone else. The pop-out OPTION pills stay simple/flat so the
   selector tray reads clean. 3-ID specificity preserved so it still wins. */
body.shelfd-dev-mylist-status-preview #mylist-view #cards-grid .card[data-library-section] .game-status-current-pill,
body.shelfd-dev-mylist-status-preview #mylist-view .card[data-library-section] .game-status-current-pill,
body.shelfd-dev-mylist-status-preview #mylist-view .status-pills.status-pills-selector-wrap.status-pills--under-title .game-status-current-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 20px !important;
  padding: 3.5px 10px !important;
  border: 1px solid rgba(225, 183, 229, 0.45) !important;
  border-radius: 7px !important;
  background: rgba(225, 183, 229, 0.10) !important;
  background-image: none !important;
  -webkit-backdrop-filter: blur(10px) saturate(125%) !important;
  backdrop-filter: blur(10px) saturate(125%) !important;
  box-shadow: none !important;
  filter: none !important;
  color: #e1b7e5 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  opacity: 1 !important;
  transition: transform 140ms ease, background 180ms ease, border-color 180ms ease !important;
  -webkit-tap-highlight-color: transparent;
}
body.shelfd-dev-mylist-status-preview #mylist-view #cards-grid .card[data-library-section] .game-status-current-pill:active,
body.shelfd-dev-mylist-status-preview #mylist-view .card[data-library-section] .game-status-current-pill:active {
  transform: scale(0.97);
  background: rgba(225, 183, 229, 0.16) !important;
}
/* v11.238: ALL statuses use the same French Lilac whisper-glass chip on the
   creator account — no per-status color. One rule covers every active state. */
body.shelfd-dev-mylist-status-preview #mylist-view #cards-grid .card[data-library-section] .game-status-current-pill.watching-active,
body.shelfd-dev-mylist-status-preview #mylist-view .card[data-library-section] .game-status-current-pill.watching-active,
body.shelfd-dev-mylist-status-preview #mylist-view #cards-grid .card[data-library-section] .game-status-current-pill.competitive-active,
body.shelfd-dev-mylist-status-preview #mylist-view .card[data-library-section] .game-status-current-pill.competitive-active,
body.shelfd-dev-mylist-status-preview #mylist-view #cards-grid .card[data-library-section] .game-status-current-pill.planned-active,
body.shelfd-dev-mylist-status-preview #mylist-view #cards-grid .card[data-library-section] .game-status-current-pill.wishlist-active,
body.shelfd-dev-mylist-status-preview #mylist-view .card[data-library-section] .game-status-current-pill.planned-active,
body.shelfd-dev-mylist-status-preview #mylist-view .card[data-library-section] .game-status-current-pill.wishlist-active,
body.shelfd-dev-mylist-status-preview #mylist-view #cards-grid .card[data-library-section] .game-status-current-pill.watched-active,
body.shelfd-dev-mylist-status-preview #mylist-view .card[data-library-section] .game-status-current-pill.watched-active,
body.shelfd-dev-mylist-status-preview #mylist-view #cards-grid .card[data-library-section] .game-status-current-pill.paused-active,
body.shelfd-dev-mylist-status-preview #mylist-view .card[data-library-section] .game-status-current-pill.paused-active,
body.shelfd-dev-mylist-status-preview #mylist-view #cards-grid .card[data-library-section] .game-status-current-pill.dropped-active,
body.shelfd-dev-mylist-status-preview #mylist-view .card[data-library-section] .game-status-current-pill.dropped-active,
body.shelfd-dev-mylist-status-preview #mylist-view #cards-grid .card[data-library-section] .game-status-current-pill.live-active,
body.shelfd-dev-mylist-status-preview #mylist-view .card[data-library-section] .game-status-current-pill.live-active {
  border-color: rgba(225, 183, 229, 0.45) !important;
  background: rgba(225, 183, 229, 0.10) !important;
  background-image: none !important;
  color: #e1b7e5 !important;
}
/* Pop-out OPTION pills stay simple flat lilac on the creator account. */
body.shelfd-dev-mylist-status-preview #mylist-view .game-status-options .status-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 20px !important;
  padding: 3px 9px !important;
  border: 1px solid rgba(225, 183, 229, 0.55) !important;
  border-radius: 999px !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  color: #e1b7e5 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  opacity: 0.9 !important;
}