/* =============================================================
   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.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: #F3EEE6 !important; border-color: rgba(20,20,20,0.10) !important; color: #171717 !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.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;
}

/* -- 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 -- */
body.true-dark-mode #mylist-view .game-status-current-pill,
body.true-dark-mode #mylist-view .status-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.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: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 0 !important;
  box-shadow: none !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: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 0 !important;
  box-shadow: none !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: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 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;
  border-bottom: 1px solid rgba(255,255,255,0.15) !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;
}

body.true-dark-mode #modal .add-title-modal {
  width: 100% !important;
  max-width: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 100dvh !important;
  border-radius: 0 !important;
  background: #0E0E0E !important;
  border: none !important;
  box-shadow: none !important;
  padding: max(env(safe-area-inset-top, 20px), 20px) 20px 20px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !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;
}
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;
}

/* 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;
}

/* =============================================================
   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;
}
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: 400 !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !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 {
  font-size: 14px !important;
  font-weight: 500 !important;
  max-width: min(70vw, 320px) !important;
  color: #ffffff !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: 15px !important;
  letter-spacing: 0 !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 {
  font-size: 10px !important;
  letter-spacing: 0 !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 {
  font-weight: 600 !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: 500 !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;
}

/* 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: clamp(11.5px, 2.72vw, 13px) !important;
  font-weight: 650 !important;
  line-height: 1.35 !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: 650 clamp(13.5px, 2.72vw, 15px)/1.35 'DM Sans', sans-serif !important;
  letter-spacing: 0 !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-weight: 300 !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 */
body.true-dark-mode #discover-view .discover-card {
  background: #212121 !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 14px !important;
  overflow: hidden !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 shift +20px right ========== */
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: clamp(69px, calc(8.4vw + 20px), 84px) !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.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) {
  color: rgba(255,255,255,0.55) !important;
}

/* Hide episode % indicator on far right of progress meta row */
body.true-dark-mode #mylist-view [id^="progress-percent-"] {
  display: none !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 .card-release-date,
#mylist-view .card-release-date,
body.true-dark-mode #mylist-view .mylist-availability-release-date,
#mylist-view .mylist-availability-release-date {
  font-size: 11px !important;
  font-weight: 400 !important;
}
body.true-dark-mode #mylist-view .card-availability-line,
#mylist-view .card-availability-line,
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 {
  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 {
  font-size: 11px !important;
  font-weight: 300 !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-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 */
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: 11px !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. */
    background: rgba(24, 28, 32, 0.62) !important;
    backdrop-filter: blur(22px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.4) !important;
    border: 1px solid rgba(196, 181, 253, 0.10) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.34) !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: rgba(245, 243, 238, 0.72) !important;
  border-color: rgba(120, 90, 200, 0.18) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10) !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: rgba(255,255,255,0.92) !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: #ffffff !important;
  background: rgba(139,92,246,0.12) !important;
  box-shadow: inset 0 0 0 1px rgba(196,181,253,0.14) !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(env(safe-area-inset-top, 0px), 0px) 0 max(env(safe-area-inset-bottom, 0px), 0px) !important;
}
.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-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;
}

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;
}

/* ---------- 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(14px);
  -webkit-backdrop-filter: blur(14px);
}
.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;
}
.shelfd-search-input-wrap:focus-within {
  background: rgba(255,255,255,0.08);
  border-color: rgba(196,181,253,0.32);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.16);
}
.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; }

/* ---------- 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; }

.shelfd-search-recent-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.shelfd-search-recent-chip {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.005em;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 220px;
  transition: background 160ms ease, transform 140ms ease;
  will-change: transform;
}
.shelfd-search-recent-chip:hover { background: rgba(255,255,255,0.08); }
.shelfd-search-recent-chip:active { transform: scale(0.96); }
.shelfd-search-recent-chip svg { width: 13px; height: 13px; color: rgba(232,227,243,0.5); flex-shrink: 0; }
.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%;
}
.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; }

/* ---------- 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;
}

/* ---------- 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);
  will-change: filter, 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: 300 !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-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-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 Watching tab ? "Next Episode N/Total" line between
   progress bar and star rating. Equal vertical spacing on top
   and bottom. */
.card-next-episode {
  margin: 8px 0;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(232, 227, 243, 0.78);
}
body.light-mode .card-next-episode {
  color: rgba(20, 15, 40, 0.72);
}

/* 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 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]
   ============================================================= */

/* =============================================================
   v704: Discover "View All" full-category page ? slide-in from left
   + media profile z-index fix so tapping a poster opens the profile.
   ============================================================= */

/* Default state: page is off-screen to the left.
   When JS sets display:block, it's 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;
}

/* =============================================================
   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 .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);
}

/* 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: 14px !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 (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: 10px;
  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: 8px;
  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); }

/* 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(26px) !important;
  -webkit-backdrop-filter: blur(26px) !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(14px) !important;
  -webkit-backdrop-filter: blur(14px) !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 {
  background: rgba(5,4,16,0.90) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !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);    }
}
@keyframes profileExitRight {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(100%); opacity: 0.7; }
}

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

/* Triggered by closeProfileWithAnimation() (back-button path) */
.profile-page.profile-page-closing {
  animation: profileExitRight 0.28s cubic-bezier(0.40, 0, 1, 0.80) both;
  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;
  transition: background 0.30s ease, backdrop-filter 0.30s ease;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  pointer-events: none;
}
.profile-social-overlay.profile-social-open {
  background: rgba(0,0,0,0.52);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  pointer-events: auto;
}

.profile-social-sheet-v2 {
  width: 100%;
  max-width: 680px;
  max-height: 88dvh;
  min-height: 42dvh;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(124,58,237,0.14) 0%, transparent 44%),
    linear-gradient(180deg, rgba(14,10,34,0.98) 0%, rgba(8,6,20,0.99) 100%);
  border: 1px solid rgba(167,139,250,0.16);
  border-bottom: 0;
  border-radius: 28px 28px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 -14px 52px rgba(0,0,0,0.44), inset 0 1px 0 rgba(167,139,250,0.12);
  padding-bottom: 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 0;
  cursor: grab;
}
.profile-social-drag-handle:active { cursor: grabbing; }
.profile-social-drag-pip {
  width: 38px; height: 5px;
  border-radius: 999px;
  background: rgba(167,139,250,0.22);
}

.profile-social-header-v2 {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 13px;
  border-bottom: 1px solid rgba(167,139,250,0.09);
}
.profile-social-title-v2 {
  font-family: 'Sohne', system-ui, sans-serif;
  font-size: 21px; font-weight: 900;
  letter-spacing: -0.025em; color: #f4f0ff; line-height: 1;
}
.profile-social-close-v2 {
  appearance: none; -webkit-appearance: none;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(196,181,253,0.16);
  border-radius: 50%;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: rgba(196,181,253,0.72);
  transition: background 0.14s ease, transform 0.14s cubic-bezier(0.22,1,0.36,1);
  flex-shrink: 0;
}
.profile-social-close-v2:active { transform: scale(0.88); }

.profile-social-body-v2 {
  flex: 1 1 auto;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 14px 14px 24px;
  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: flex !important;
  align-items: center !important;
  gap: 13px !important;
  padding: 13px 14px !important;
  border: 1px solid rgba(167,139,250,0.09) !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,0.035) !important;
  margin-bottom: 8px !important;
  justify-content: flex-start !important;
  transition: background 0.14s ease, transform 0.14s cubic-bezier(0.22,1,0.36,1) !important;
}
.profile-social-body-v2 .profile-social-user-row:active {
  transform: scale(0.984) !important;
  background: rgba(255,255,255,0.06) !important;
}
.profile-social-body-v2 .profile-social-avatar {
  width: 50px !important; height: 50px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(167,139,250,0.20) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22) !important;
  flex: 0 0 auto !important;
}
.profile-social-body-v2 .profile-social-user-main {
  flex: 1 !important; min-width: 0 !important;
  font-family: 'Sohne', system-ui, sans-serif !important;
  font-size: 15.5px !important; font-weight: 800 !important;
  letter-spacing: -0.015em !important; color: #f0ecff !important;
  display: flex !important; align-items: center !important;
  gap: 11px !important;
}
.profile-social-body-v2 .friend-actions-group {
  display: flex !important; gap: 8px !important;
  align-items: center !important; flex-shrink: 0 !important;
}
.profile-social-body-v2 .profile-social-view-btn {
  background: rgba(139,92,246,0.12) !important;
  border: 1px solid rgba(139,92,246,0.22) !important;
  border-radius: 999px !important;
  padding: 9px 18px !important;
  color: #c4b5fd !important; font-size: 12.5px !important;
  font-weight: 800 !important;
  font-family: 'Sohne', system-ui, sans-serif !important;
  cursor: pointer !important;
  transition: background 0.14s ease, transform 0.12s cubic-bezier(0.22,1,0.36,1) !important;
}
.profile-social-body-v2 .profile-social-view-btn:active {
  transform: scale(0.91) !important;
  background: rgba(139,92,246,0.22) !important;
}

/* Light mode ? followers/following sheet */
body.light-mode .profile-social-overlay.profile-social-open {
  background: rgba(0,0,0,0.26);
}
body.light-mode .profile-social-sheet-v2 {
  background: linear-gradient(180deg, #f8f5ff 0%, #f4f0fb 100%);
  border-color: rgba(124,58,237,0.14);
  box-shadow: 0 -10px 40px rgba(30,20,60,0.12), inset 0 1px 0 rgba(124,58,237,0.10);
}
body.light-mode .profile-social-drag-pip { background: rgba(124,58,237,0.18); }
body.light-mode .profile-social-header-v2 { border-bottom-color: rgba(124,58,237,0.09); }
body.light-mode .profile-social-title-v2 { color: #171717; }
body.light-mode .profile-social-close-v2 {
  background: rgba(124,58,237,0.06); border-color: rgba(124,58,237,0.14);
  color: rgba(92,56,176,0.72);
}
body.light-mode .profile-social-body-v2 .profile-social-user-row {
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(124,58,237,0.09) !important;
}
body.light-mode .profile-social-body-v2 .profile-social-user-main { color: #171717 !important; }
body.light-mode .profile-social-body-v2 .profile-social-view-btn {
  background: rgba(124,58,237,0.07) !important;
  border-color: rgba(20,20,20,0.10) !important;
  color: #5b21b6 !important;
}

/* =========================================================================
   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 {
  background: rgba(8,6,28,0.96) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !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:
    radial-gradient(circle at top, rgba(120, 119, 198, 0.12), transparent 34%),
    linear-gradient(180deg, #07080d 0%, #0b0d12 42%, #090b10 100%) !important;
}
#direct-messages-page .direct-messages-topbar {
  background: linear-gradient(180deg, rgba(10, 12, 18, 0.96), rgba(10, 12, 18, 0.82)) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(26px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(120%) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.28) !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-content {
  padding-left: 12px !important;
  padding-right: 12px !important;
  padding-bottom: 132px !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 0.3 shades lighter than
   the global body #0E0E0E (rgb 14,14,14 ? rgb 22,22,22 = #161616).
   Only these two page surfaces are targeted; nothing else is touched. */
#discover-view,
#anime-discover-view,
#games-discover-view {
  background-color: #161616 !important;
  min-height: 100%;
}
.activity-page,
#community-view {
  background-color: #161616 !important;
}

/* v856: Header background matches the lighter #161616 on Discover and
   Activity/Community tabs so the full page blends seamlessly.
   Two cases to cover:
   ? Mobile browser: 12-pwa-header-continuity.css sets
     body.true-dark-mode .header { background: #0E0E0E !important }.
     We override that for the two affected tabs.
   ? PWA standalone: header is transparent (inherits body bg which is
     still #0E0E0E). We explicitly pin it to #161616 on those tabs so
     the header surface matches the page surface below it. */
body.main-tab-discover .header,
body.main-tab-community .header {
  background: #161616 !important;
}