/* ==========================================================================
   KAPTAIN'S MEGA COLLECTION — DESIGN SYSTEM
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800;900&display=swap');

:root {
  /* Deep Charcoal Theme */
  --bg-app: hsl(240, 10%, 4%);
  --bg-card: hsla(240, 10%, 8%, 0.6);
  --bg-card-hover: hsla(240, 10%, 12%, 0.7);
  --bg-sidebar: hsla(240, 10%, 6%, 0.85);
  --bg-elevated: hsl(240, 10%, 10%);
  --bg-drawer: hsl(240, 10%, 7%);
  
  /* Clean Accent Palette
     gradient = primary CTAs only | accent = interactive active states
     accent-light = decorative text/brand   | accent-subtle = background tints */
  --accent: hsl(250, 84%, 60%);
  --accent-light: hsl(250, 90%, 70%);
  --accent-subtle: hsla(250, 84%, 60%, 0.15);
  --accent-glow: hsla(250, 84%, 60%, 0.25);
  --accent-gradient: linear-gradient(135deg, hsl(250, 84%, 60%) 0%, hsl(280, 80%, 55%) 100%);
  
  /* Utility */
  --success: hsl(142, 70%, 45%);
  --success-glow: hsla(142, 70%, 45%, 0.15);
  --warning: hsl(38, 90%, 50%);
  --border: rgba(255, 255, 255, 0.05);
  --border-hover: rgba(255, 255, 255, 0.12);
  
  /* Typography */
  --text-primary: hsl(0, 0%, 98%);
  --text-secondary: hsl(240, 5%, 75%);
  --text-muted: hsl(240, 5%, 55%);
  --text-dark: hsl(240, 4%, 35%);

  /* Motion */
  --transition-fast: 0.15s cubic-bezier(0.2, 0, 0, 1);
  --transition-normal: 0.3s cubic-bezier(0.2, 0, 0, 1);
  --transition-slow: 0.5s cubic-bezier(0.2, 0, 0, 1);
  
  /* Effects */
  --blur: blur(20px);
  --blur-xs: blur(4px);   /* tiny chips/badges (checkbox, gear, meta pills) */
  --blur-sm: blur(6px);   /* dim layer behind detail/shortcut overlays */
  --blur-md: blur(10px);  /* modal overlays (popup, wizard, compat) */
  --blur-lg: blur(24px);  /* floating glass bars (control bar, preview bar) */
  --blur-xl: blur(28px);  /* sidebar glass */
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.4);

  /* ----------------------------------------------------------------------
     Z-INDEX SCALE — page-level layering only. Small per-component stacking
     (e.g. a card's own image/gradient/badge order) stays as local literals
     since those never need to out-rank another component's layer.
     ---------------------------------------------------------------------- */
  --z-backdrop: -2;
  --z-backdrop-overlay: -1;
  --z-control-bar: 30;
  --z-reorder-banner: 39;
  --z-topbar: 40;
  --z-drawer: 20;
  --z-sidebar-backdrop: 49;
  --z-sidebar: 50;
  --z-sidebar-toggle: 60;
  --z-quick-editor: 900;
  --z-detail: 1200;
  --z-shortcuts: 1400;
  --z-walkthrough: 10000;
  --z-walkthrough-tooltip: 10001;

  /* ----------------------------------------------------------------------
     MODAL & DIALOG SCALE (Must all sit in front of the Title Screen at 20000)
     Any modal overlay below 20000 gets trapped behind the title screen's
     dark opacity backdrop blur layer (rgba(3, 3, 6, 0.88) + blur(14px)).
     ---------------------------------------------------------------------- */
  --z-title-screen: 20000;
  --z-above-title: 21000;
  --z-popup: 21100;
  --z-compat: 21200;
  --z-wizard: 21300;
  --z-aio: 21400;
  --z-aio-tutorial: 21410;
  --z-aio-lightbox: 21420;
  --z-toast: 22000;

  /* ----------------------------------------------------------------------
     NUVIO TOKEN ALIASES
     Mirror the real Nuvio app's CSS-variable names (themeColors.js) onto our
     existing tokens so the TV-emulator styles read like Nuvio's own code.
     Everything ultimately resolves to --accent, so the [data-theme] blocks
     below only need to override the accent to re-skin the entire app.
     ---------------------------------------------------------------------- */
  --bg-color: var(--bg-app);
  --card-bg: var(--bg-card);
  --secondary-color: var(--accent);
  --secondary-variant: var(--accent-light);
  --secondary-glow: var(--accent-glow);
  --on-secondary: #ffffff;
  --text-color: var(--text-primary);
  --text-tertiary: var(--text-dark);
  --border-color: var(--border);
  --focus-color: var(--accent);
  --focus-bg: var(--accent-glow);
  /* TV-focus motion used across the emulator. Was an elastic/bounce curve
     (cubic-bezier(0.34,1.56,0.64,1)); switched to a clean ease-out per the
     visual overhaul's motion pass. */
  --spring: 300ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ----------------------------------------------------------------------
     LAYOUT — values other components must stay in sync with (e.g. the
     toast stack has to clear the floating control bar's height + offset).
     ---------------------------------------------------------------------- */
  --control-bar-bottom: 24px;
  --control-bar-height: 68px;
  --toast-bottom-offset: calc(var(--control-bar-bottom) + var(--control-bar-height) + 18px);
  --content-canvas-pad-x: 36px;
  --content-canvas-pad-top: 80px;
  --content-canvas-pad-bottom: 120px;
  --mobile-frame-width: 380px;
  --mobile-frame-height: 760px;
  --mobile-frame-bezel: 10px;
  --mobile-frame-radius: 42px;
  /* Updated by JS when the beta banner is visible */
  --kaptain-beta-banner-height: 0px;
}

html[data-theme="light"] {
  --bg-app: #f8fafc;
  --bg-card: hsla(210, 40%, 96%, 0.8);
  --bg-card-hover: hsla(210, 40%, 92%, 0.9);
  --bg-sidebar: hsla(215, 25%, 94%, 0.92);
  --bg-elevated: #eef2f7;
  --bg-drawer: #f1f5f9;
  --accent: hsl(250, 70%, 48%);
  --accent-light: hsl(250, 75%, 42%);
  --accent-subtle: hsla(250, 70%, 48%, 0.12);
  --accent-glow: hsla(250, 70%, 48%, 0.18);
  --success: hsl(142, 64%, 32%);
  --warning: hsl(32, 90%, 40%);
  --border: rgba(15, 23, 42, 0.14);
  --border-hover: rgba(15, 23, 42, 0.28);
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-dark: #475569;
  --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12);
  --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
  --on-secondary: #ffffff;
}

html[data-theme="high-contrast"] {
  --bg-app: #0f172a;
  --bg-card: #1e293b;
  --bg-card-hover: #334155;
  --bg-sidebar: #1e293b;
  --bg-elevated: #1e293b;
  --bg-drawer: #0f172a;
  --accent: #c4b5fd;
  --accent-light: #ddd6fe;
  --accent-subtle: rgba(196, 181, 253, 0.18);
  --accent-glow: rgba(196, 181, 253, 0.28);
  --success: #4ade80;
  --warning: #fbbf24;
  --border: rgba(248, 250, 252, 0.6);
  --border-hover: #f8fafc;
  --text-primary: #ffffff;
  --text-secondary: #f1f5f9;
  --text-muted: #e2e8f0;
  --text-dark: #cbd5e1;
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.7);
  --on-secondary: #0f172a;
}

html[data-theme="high-contrast"] body {
  font-weight: 500;
}
html[data-theme="high-contrast"] .theme-toggle-btn,
html[data-theme="high-contrast"] .cust-mini-btn,
html[data-theme="high-contrast"] .se-mini-btn,
html[data-theme="high-contrast"] .topbar-select,
html[data-theme="high-contrast"] .cust-slider-panel,
html[data-theme="high-contrast"] .se-cat-head,
html[data-theme="high-contrast"] .cust-filter-card,
html[data-theme="high-contrast"] button,
html[data-theme="high-contrast"] input,
html[data-theme="high-contrast"] select,
html[data-theme="high-contrast"] textarea,
html[data-theme="high-contrast"] .folder-card,
html[data-theme="high-contrast"] .nv-card,
html[data-theme="high-contrast"] .portfolio-card {
  border-width: 2px;
}

/* High Contrast is meant to be unmistakable, not a subtle dark-mode tint:
   every link and interactive control gets a visible outline/underline
   instead of relying on color alone. */
html[data-theme="high-contrast"] a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
html[data-theme="high-contrast"] a:focus-visible,
html[data-theme="high-contrast"] button:focus-visible,
html[data-theme="high-contrast"] input:focus-visible,
html[data-theme="high-contrast"] select:focus-visible,
html[data-theme="high-contrast"] textarea:focus-visible,
html[data-theme="high-contrast"] [tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
html[data-theme="light"] .btn-secondary:hover {
  color: var(--text-primary);
}
html[data-theme="light"] .backdrop-overlay {
  background: radial-gradient(circle at 55% 25%, transparent 0%, var(--bg-app) 70%),
              linear-gradient(to bottom, transparent 55%, var(--bg-app) 100%);
  opacity: 0.92;
}
html[data-theme="light"] .backdrop-layer {
  filter: blur(40px) brightness(1.1) saturate(0.5);
  opacity: 0.18;
}
html[data-theme="light"] .title-screen-overlay {
  background-color: rgba(248, 250, 252, 0.92);
}
/* Clean Light Mode in Cinematic Editor & Collection Browser */
html[data-theme="light"] .nv-scroll {
  background: transparent;
}
html[data-theme="light"] .nv-hero-scrim {
  background:
    linear-gradient(to top, var(--bg-app) 0%, rgba(248, 250, 252, 0.85) 15%, rgba(248, 250, 252, 0.4) 35%, transparent 65%),
    linear-gradient(to right, var(--bg-app) 0%, var(--bg-app) 28%, rgba(248, 250, 252, 0.5) 45%, transparent 70%);
}
html[data-theme="light"] .nv-hero-title {
  color: var(--text-primary);
  text-shadow: none;
}
html[data-theme="light"] .nv-hero-info {
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.15);
}
html[data-theme="light"] .nv-hero-play {
  background: #0f172a;
  color: #ffffff;
}
html[data-theme="light"] .top-bar.mode-browse {
  background: linear-gradient(to bottom, rgba(248,250,252,0.95) 0%, rgba(248,250,252,0.6) 75%, transparent 100%);
}
html[data-theme="light"] .nv-row-title {
  color: var(--text-primary);
  text-shadow: none;
}
html[data-theme="light"] .dashboard-title {
  color: var(--text-primary);
  text-shadow: none;
}
html[data-theme="light"] .dashboard-subtitle {
  color: var(--text-muted);
  text-shadow: none;
}

.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}
.theme-toggle-btn:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
}
.theme-toggle-btn svg {
  width: 17px;
  height: 17px;
  display: none;
}
.theme-toggle-btn .theme-icon-moon { display: block; }
.theme-toggle-btn[data-theme="light"] .theme-icon-moon { display: none; }
.theme-toggle-btn[data-theme="light"] .theme-icon-sun { display: block; }
.theme-toggle-btn[data-theme="high-contrast"] .theme-icon-moon { display: none; }
.theme-toggle-btn[data-theme="high-contrast"] .theme-icon-contrast { display: block; }
.title-theme-toggle {
  position: fixed;
  top: calc(12px + var(--kaptain-beta-banner-height, 0px));
  right: 64px;
  z-index: calc(var(--z-above-title) + 2);
}

/* ==========================================================================
   RESET
   ========================================================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-app), 0 0 0 4px var(--accent);
}

html, body {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--bg-app);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

button, input, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); }

/* Keyboard-only focus ring, consistent across every interactive element —
   including ones that disable the native outline for their own :focus
   styling (search field, selects, wizard inputs). Type+pseudo-class
   selectors here out-specificity a lone class selector, so this still wins
   even where e.g. `.search-field { outline: none }` is declared earlier. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="checkbox"]:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Respect the OS-level reduced-motion preference: shorten/remove
   non-essential motion (pulses, shimmers, spring entrances) site-wide. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   CINEMATIC BACKDROP
   ========================================================================== */

.backdrop-container {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  height: 100dvh;
  z-index: var(--z-backdrop);
  background-color: var(--bg-app);
  overflow: hidden;
  pointer-events: none;
}

.backdrop-layer {
  position: absolute;
  top: -10%; left: -10%;
  width: 120%; height: 120%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(40px) brightness(0.12) saturate(0.85);
  opacity: 0;
  transition: opacity var(--transition-slow) ease-in-out;
}

.backdrop-layer.active { opacity: 1; }

.backdrop-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  height: 100dvh;
  z-index: var(--z-backdrop-overlay);
  background: radial-gradient(circle at 55% 25%, transparent 0%, var(--bg-app) 70%),
              linear-gradient(to bottom, transparent 55%, var(--bg-app) 100%);
  pointer-events: none;
}

/* ==========================================================================
   APP LAYOUT
   ========================================================================== */

.app-screen {
  display: block;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: relative;
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: 300px;
  height: 100vh;
  height: 100dvh;
  background: hsla(240, 10%, 6%, 0.88);
  backdrop-filter: var(--blur-xl) saturate(1.6);
  -webkit-backdrop-filter: var(--blur-xl) saturate(1.6);
  display: flex;
  flex-direction: column;
  z-index: var(--z-sidebar);
  box-shadow: 4px 0 40px rgba(0,0,0,0.55);
  transform: translateX(-100%);
  transition: transform var(--transition-normal);
}
.sidebar.open { transform: translateX(0); }
.sidebar.open .brand-section { padding-top: 76px; }

/* Sidebar backdrop dim layer */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-sidebar-backdrop);
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}
.sidebar-backdrop.open { opacity: 1; visibility: visible; }

/* Hamburger toggle button */
.sidebar-toggle {
  position: fixed;
  top: calc(12px + var(--kaptain-beta-banner-height, 0px));
  left: max(16px, env(safe-area-inset-left));
  z-index: var(--z-sidebar-toggle);
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: hsla(240, 10%, 6%, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.sidebar-toggle svg { width: 18px; height: 18px; }
.sidebar-toggle:hover {
  background: hsla(240, 10%, 16%, 0.85);
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.15);
}

/* Brand Header */
.brand-section {
  padding: 22px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-icon {
  width: 32px;
  height: 32px;
  max-width: 32px;
  max-height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(168, 85, 247, 0.45));
  flex-shrink: 0;
}

.brand-text-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.brand-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  line-height: 1.1;
}

.brand-subtitle {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* Category List */
.category-scroller {
  flex: 1;
  overflow-y: auto;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cat-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 14px;
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-fast);
  color: var(--text-secondary);
  font-weight: 500;
}

/* Sidebar cluster dividers (Start Here / Browse by Source / etc.) — purely
   a rendering grouping, not a database category of its own. */
.cat-nav-group-label {
  padding: 14px 14px 4px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sidebar-sort-toolbar + .cat-nav-group-label { padding-top: 4px; }

.cat-nav-item:hover {
  background-color: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
}

.cat-nav-item.active {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  box-shadow: inset 3px 0 0 var(--accent-light);
  font-weight: 600;
}

.cat-info-combo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.cat-emoji { font-size: 1rem; flex-shrink: 0; }

.cat-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.9rem;
}

/* Category Right Side: badge + toggle */
.cat-right-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cat-badge {
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 50px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text-dark);
  font-weight: 600;
  white-space: nowrap;
}

.cat-nav-item.active .cat-badge {
  background-color: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.25);
  color: var(--accent-light);
}

/* Category Toggle Checkbox */
.cat-toggle {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  color: transparent;
}

.cat-toggle:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.05);
}

.cat-toggle svg {
  width: 11px;
  height: 11px;
  stroke-width: 3;
}

.cat-toggle.checked {
  background-color: var(--success);
  border-color: var(--success);
  color: #fff;
}

.cat-toggle.partial {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--text-secondary);
}

/* Sidebar Footer */
.sidebar-footer {
  padding: 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-footer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 9px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.sidebar-footer-btn:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text-secondary);
  border-color: var(--border-hover);
}

.sidebar-footer-btn-kofi {
  border-color: rgba(167, 139, 250, 0.3);
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.14), rgba(124, 58, 237, 0.04));
  color: var(--accent-light);
  opacity: 0.7;
}
.sidebar-footer-btn-kofi:hover {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.24), rgba(124, 58, 237, 0.08));
  color: #fff;
  opacity: 1;
}

.sidebar-footer-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ==========================================================================
   MAIN VIEWER
   ========================================================================== */

.main-viewer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* TOP BAR — floating transparent header */
.top-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 64px;
  padding: 0 68px 0 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to bottom, rgba(0,0,0,0.72) 0%, transparent 100%);
  flex-shrink: 0;
  z-index: var(--z-topbar);
  pointer-events: none;
}
.top-bar > * { pointer-events: auto; }

.top-bar.mode-browse {
  background: linear-gradient(to bottom, rgba(5,5,8,0.92) 0%, rgba(5,5,8,0.48) 80%, transparent 100%);
}

.top-bar-left {
  display: flex;
  flex-direction: column;
}

.title-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dashboard-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

.dashboard-subtitle {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 2px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* Category Action Buttons (All / None) */
.category-actions-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cat-action-btn {
  height: 26px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.3px;
}

.cat-action-btn:hover {
  background: rgba(255,255,255,0.07);
  color: var(--text-primary);
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

.cat-action-btn.active-all {
  background-color: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.2);
  color: var(--success);
}

.cat-action-btn.active-all:hover {
  background-color: rgba(34, 197, 94, 0.15);
}

.top-bar-right {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* Search */
.search-wrapper {
  position: relative;
  width: 230px;
}

.search-field {
  width: 100%;
  height: 38px;
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 16px 0 38px;
  outline: none;
  color: var(--text-primary);
  transition: all var(--transition-fast);
  font-size: 0.88rem;
}

.search-field:focus {
  background-color: rgba(0, 0, 0, 0.4);
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.12);
}

.search-icon-svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  pointer-events: none;
}

/* Zoom Controls */
.zoom-control-combo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 8px;
  height: 24px;
}

.zoom-slider {
  width: 80px;
  height: 4px;
  accent-color: var(--accent-light);
  cursor: pointer;
}

/* ==========================================================================
   CONTENT CANVAS
   ========================================================================== */

.content-canvas {
  flex: 1;
  overflow-y: auto;
  padding: var(--content-canvas-pad-x);
  padding-top: var(--content-canvas-pad-top);
  padding-bottom: var(--content-canvas-pad-bottom);
}

.media-grid {
  display: grid;
  gap: 28px;
  width: 100%;
  transition: all var(--transition-normal);
}

/* ==========================================================================
   FOLDER CARDS
   ========================================================================== */

.folder-card {
  position: relative;
  background-color: hsla(240, 10%, 6%, 0.35);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: all var(--transition-normal);
  aspect-ratio: 16/10;
}

/* Aspect Ratio Variants */
.folder-card.aspect-landscape { aspect-ratio: 16/10; }
.folder-card.aspect-poster { aspect-ratio: 2/3; }
.folder-card.aspect-square { aspect-ratio: 1/1; }

/* Card Artwork */
.card-artwork-wrapper {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
}

.card-cover-img,
.card-gif-img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.card-gif-img { opacity: 0; }

.card-overlay-gradient {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.55) 100%);
  z-index: 2;
  transition: opacity var(--transition-fast);
}

/* ── SELECTED CARD STATE (DEFAULT) ── */
.folder-card.selected {
  border-color: rgba(34, 197, 94, 0.55);
}

.folder-card.selected:hover {
  transform: translateY(-6px) scale(1.03);
  border-color: var(--accent-light);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7), 0 0 15px var(--accent-glow);
}

.folder-card.selected:hover .card-gif-img { opacity: 1; }
.folder-card.selected:hover .card-cover-img { opacity: 0.15; }
.folder-card.selected:hover .gear-button { opacity: 1; transform: scale(1); }

/* ── DESELECTED CARD STATE ──
   Full color at rest — selection is communicated by the green border on
   selected cards, not by dimming everything that isn't chosen. */
.folder-card:not(.selected) {
  border-color: transparent;
  box-shadow: none;
}

.folder-card:not(.selected):hover {
  transform: translateY(-3px) scale(1.01);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.folder-card:not(.selected):hover .card-gif-img { opacity: 0.6; }
.folder-card:not(.selected):hover .gear-button { opacity: 0.6; transform: scale(1); }

/* Deselected: checkbox shows as "+" icon style */
.folder-card:not(.selected) .checkbox-visual {
  border-color: rgba(255, 255, 255, 0.25);
  background-color: rgba(0, 0, 0, 0.5);
}

.folder-card:not(.selected):hover .checkbox-visual::after {
  content: '+';
  font-size: 0.85rem;
  line-height: 1;
  color: rgba(255,255,255,0.7);
}

/* Clear Logo / Title */
.card-logo-overlay {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
}

/* Landscape cards: tighter logo */
.folder-card.aspect-landscape .card-logo-overlay {
  width: 32%;
  height: 16px;
  bottom: 8px;
}

.card-logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.9)) drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.card-text-title {
  position: absolute;
  bottom: 16px;
  left: 16px; right: 16px;
  text-align: center;
  z-index: 3;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.85);
  pointer-events: none;
}

/* Card Controls Header */
.card-controls-header {
  position: absolute;
  top: 12px;
  left: 12px; right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 4;
}

/* Card Checkbox */
.custom-checkbox-wrapper {
  cursor: pointer;
  pointer-events: auto;
}

.checkbox-visual {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  color: transparent;
}

.checkbox-visual svg {
  width: 12px;
  height: 12px;
  stroke-width: 3.5;
}

.folder-card.selected .checkbox-visual {
  background-color: var(--success);
  border-color: var(--success);
  color: #fff;
  box-shadow: 0 0 10px var(--success-glow);
}

/* Gear Button */
.gear-button {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background-color: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  opacity: 0;
  transform: scale(0.9);
}

.gear-button:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-1px) scale(1.08);
}

/* Source Count Badge — matches sidebar cat-badge pill language */
.card-source-count-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 50px;
  background-color: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border);
  color: var(--text-dark);
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.folder-card.selected .card-source-count-badge {
  border-color: rgba(34, 197, 94, 0.3);
  color: var(--text-secondary);
}

/* Badge colour reacts to selection ratio */
.card-source-count-badge.badge-full {
  color: hsl(142, 70%, 65%);
  background-color: hsla(142, 70%, 45%, 0.15);
  border-color: hsla(142, 70%, 45%, 0.3);
}
.card-source-count-badge.badge-sparse {
  color: hsl(38, 90%, 65%);
  background-color: hsla(38, 90%, 50%, 0.12);
  border-color: hsla(38, 90%, 50%, 0.25);
}
.card-source-count-badge.badge-empty {
  color: var(--text-dark);
  border-color: rgba(255,255,255,0.03);
}

/* Spotlight card — first card in large categories spans two columns */
.folder-card.is-spotlight {
  grid-column: span 2;
}
.folder-card.is-spotlight .card-cover-img {
  object-position: center 30%;
}

/* "New" badge — top-right corner of trending/new folder cards */
.new-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  background: var(--accent);
  color: var(--on-secondary);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 20px;
  pointer-events: none;
}

/* ==========================================================================
   SOURCE CUSTOMIZATION DRAWER
   ========================================================================== */

.drawer-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: var(--blur-md);
  z-index: var(--z-drawer);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.drawer-overlay.open { opacity: 1; visibility: visible; }

.drawer-panel {
  position: absolute;
  top: 0; right: 0;
  width: 440px;
  max-width: 90vw;
  height: 100%;
  background-color: var(--bg-drawer);
  box-shadow: -20px 0 60px rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transition-normal);
}

.drawer-overlay.open .drawer-panel { transform: translateX(0); }

.drawer-header {
  padding: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.drawer-title-combo {
  display: flex;
  flex-direction: column;
}

.drawer-category-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-light);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.drawer-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  color: #fff;
  margin-top: 4px;
}

.drawer-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--text-muted);
}

.drawer-close-btn:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 30px;
}

.sources-list-label {
  display: none;
}

.sources-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.source-row-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background-color: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--border);
  padding: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.source-row-item:hover {
  border-color: var(--border-hover);
  background-color: rgba(255,255,255,0.03);
}

.source-row-item.selected {
  border-color: rgba(99, 102, 241, 0.35);
  background-color: rgba(99, 102, 241, 0.03);
}

.source-checkbox-container { margin-top: 2px; }

.source-checkbox-visual {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  color: transparent;
}

.source-checkbox-visual svg {
  width: 10px;
  height: 10px;
  stroke-width: 4;
}

.source-row-item.selected .source-checkbox-visual {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.source-info-combo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.source-row-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.source-meta-tag-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.source-meta-pill {
  font-size: 0.62rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  background-color: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-muted);
  text-transform: uppercase;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.source-meta-pill.provider-trakt {
  color: hsl(15, 95%, 70%);
  background-color: hsla(15, 95%, 70%, 0.08);
  border-color: hsla(15, 95%, 70%, 0.15);
}

.source-meta-pill.provider-tmdb {
  color: hsl(195, 95%, 55%);
  background-color: hsla(195, 95%, 55%, 0.08);
  border-color: hsla(195, 95%, 55%, 0.15);
}

/* ==========================================================================
   BOTTOM ACTION BAR
   ========================================================================== */

.control-center-bar {
  position: fixed;
  bottom: var(--control-bar-bottom);
  bottom: calc(var(--control-bar-bottom) + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  z-index: var(--z-control-bar);
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

/* Hidden on desktop; shown only at the mobile breakpoint (see media query). */
.mobile-fab { display: none; }

.control-center-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: auto;
  min-width: 480px;
  max-width: 900px;
  height: var(--control-bar-height);
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 0.5px rgba(255,255,255,0.06);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  pointer-events: auto;
  animation: barSlideUp 0.4s cubic-bezier(0.2, 0, 0, 1);
}

@keyframes barSlideUp {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.control-stats-area {
  display: flex;
  align-items: center;
  gap: 24px;
}

.control-stat-combo {
  display: flex;
  flex-direction: column;
}

.control-stat-val {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
  line-height: 1.1;
}

.control-stat-val span { color: var(--text-dark); }

.control-stat-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 1px;
}

.control-divider {
  width: 1px;
  height: 28px;
  background-color: var(--border);
}

.control-actions-combo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Shared button baseline — every variant below (.btn-primary, .btn-secondary,
   .cat-action-btn, .wiz-primary/.wiz-secondary, .nv-hero-btn, .title-screen-btn,
   .wt-btn-nav, .preview-back-btn) still sets its own size/color, but they all
   share the same cursor/font/transition timing and active-state press, so the
   site doesn't feel like five different button systems stitched together. */
.btn-primary, .btn-secondary, .cat-action-btn, .wiz-primary, .wiz-secondary,
.nv-hero-btn, .title-screen-btn, .wt-btn-nav, .preview-back-btn {
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    background var(--transition-fast), filter var(--transition-fast),
    border-color var(--transition-fast), color var(--transition-fast);
}
.btn-primary:active, .btn-secondary:active, .cat-action-btn:active,
.wiz-primary:active, .wiz-secondary:active, .title-screen-btn:active,
.wt-btn-nav:active, .preview-back-btn:active {
  transform: translateY(0);
}

.btn-primary {
  height: 40px;
  border-radius: 8px;
  padding: 0 18px;
  background: var(--accent);
  border: none;
  font-weight: 600;
  font-size: 0.88rem;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.btn-primary:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
  filter: brightness(1.08);
}

.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  height: 40px;
  border-radius: 8px;
  padding: 0 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--border-hover);
  color: #fff;
}

/* ==========================================================================
   TOP-BAR CONTROLS — VIEW MODE / SORT / REORDER
   ========================================================================== */

.topbar-control-combo {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 12px;
  height: 24px;
}

/* Wraps view-mode/sort/reorder/zoom — on desktop it's just an inline row;
   on phones (≤600px, see media query) it becomes a collapsible dropdown
   behind #topbar-more-toggle instead of disappearing outright. */
.topbar-more-panel {
  display: flex;
  align-items: center;
}
.topbar-more-toggle { display: none; }

/* View-based visibility: browse-only controls hide in Preview / Guide views.
   Driven by a class on .top-bar (never inline display) so the responsive
   rules below can still collapse non-essential controls. */
.top-bar.mode-preview .browse-only,
.top-bar.mode-guide .browse-only { display: none !important; }
.top-bar.mode-preview .top-bar-left { display: none; }

.topbar-select {
  height: 30px;
  background-color: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0 26px 0 10px;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: all var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2389899c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.topbar-select:hover {
  background-color: rgba(255,255,255,0.07);
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.topbar-select:focus {
  border-color: rgba(99, 102, 241, 0.5);
}

.topbar-select option {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
}

.reorder-toggle.active {
  background-color: var(--accent-glow);
  border-color: var(--accent);
  color: var(--accent-light);
}

/* Reorder arrows (used in sidebar, cards, drawer) */
.reorder-arrows {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.reorder-arrow {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--border-hover);
  background: rgba(0, 0, 0, 0.45);
  color: var(--text-primary);
  cursor: pointer;
  padding: 0;
  transition: all var(--transition-fast);
}

.reorder-arrow svg { width: 13px; height: 13px; }

.reorder-arrow:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.reorder-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Sidebar collection sort toolbar */
.sidebar-sort-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 12px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.sidebar-sort-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sidebar-sort-select { height: 28px; font-size: 0.72rem; }

/* Folder card while reordering */
.folder-card.reorder-active { cursor: default; }
.folder-card.reorder-active .card-controls-header { opacity: 1; }
.media-grid.reordering .folder-card:hover { transform: none; }

/* Drawer sources toolbar */
.drawer-sources-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.drawer-sort-select { height: 28px; font-size: 0.72rem; }

.drawer-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Drawer source search: same look as the top-bar folder search, scaled down
   to fit the narrower drawer panel. */
.drawer-search-wrapper {
  width: 100%;
  margin-bottom: 14px;
}

.drawer-search-wrapper .search-field {
  height: 34px;
  font-size: 0.82rem;
}

.source-row-item.reorder-active { cursor: default; }

/* ==========================================================================
   MOBILE COMPATIBILITY WARNING MODAL
   ========================================================================== */

.compat-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: var(--blur-md);
  z-index: var(--z-compat);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.compat-overlay.open { opacity: 1; visibility: visible; }

.compat-panel {
  width: 460px;
  max-width: 100%;
  background-color: var(--bg-drawer);
  border: 1px solid var(--border-hover);
  border-radius: 16px;
  padding: 28px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  transform: scale(0.95);
  transition: transform var(--transition-normal);
}

.compat-overlay.open .compat-panel { transform: scale(1); }

.compat-icon-badge {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(245, 158, 11, 0.12);
  color: var(--warning);
}

.compat-icon-badge svg { width: 28px; height: 28px; }

.compat-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.compat-sub {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 16px;
}

.compat-device-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.compat-device-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 6px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast, 0.15s ease);
}

.compat-device-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-hover, rgba(255, 255, 255, 0.25));
}

.compat-device-btn.active {
  background: rgba(229, 9, 20, 0.15);
  border-color: var(--accent, #e50914);
  box-shadow: 0 0 0 1px var(--accent, #e50914);
}

.compat-dev-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.compat-dev-name {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-primary);
}

.compat-dev-tag {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.compat-device-btn.active .compat-dev-tag {
  color: var(--accent-light, #ff5564);
  font-weight: 600;
}

.compat-body {
  /* Left-align: a centered icon+title reads fine as a header, but a
     multi-line centered paragraph is harder to read (ragged edges) and
     sat oddly above the already-left-aligned checkbox row below it. */
  text-align: left;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.compat-check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--border-hover);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-primary);
  margin-bottom: 20px;
}

.compat-check-row input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.compat-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.compat-btn { flex: 1; justify-content: center; }

.compat-link {
  display: inline-block;
  margin-top: 4px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.compat-link:hover { text-decoration: underline; }

/* ==========================================================================
   CINEMATIC TITLE SCREEN
   ========================================================================== */

.title-screen-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  /* Darker + blurred than a plain dim layer — the cinematic backdrop's own
     card titles/badges were legible enough through the old 0.8 opacity to
     visually compete with the title-screen copy sitting on top of them. */
  background-color: rgba(3, 3, 6, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: var(--z-title-screen);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px 80px;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-slow), visibility var(--transition-slow);
}

.title-screen-overlay::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.title-screen-overlay.active { opacity: 1; visibility: visible; }

.title-screen-panel {
  width: 100%;
  max-width: 1120px;
  text-align: center;
  padding: 0 10px;
  margin: 0 auto;
  transform: scale(0.96) translateY(12px);
  opacity: 0;
  transition: transform var(--spring), opacity var(--transition-slow);
}

.title-screen-overlay.active .title-screen-panel {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.title-hero-stage {
  min-height: calc(100vh - 70px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  padding: 30px 0 10px;
  box-sizing: border-box;
}

.title-hero-stage::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 720px;
  height: 720px;
  max-width: 150vw;
  max-height: 150vw;
  transform: translate(-50%, -50%);
  background-image: url('assets/kaptain-logo-mark.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.06;
  filter: drop-shadow(0 0 80px rgba(168, 85, 247, 0.35));
  pointer-events: none;
  z-index: -1;
}

.title-screen-eyebrow,
.title-screen-logo,
.title-screen-tagline,
.title-explainer,
.title-fork-label,
.title-screen-actions,
.title-cta-divider,
.title-walkthrough-link {
  opacity: 0;
  transform: translateY(14px);
  animation: titleScreenFadeUp 0.6s cubic-bezier(0.2, 0, 0, 1) forwards;
}

.title-screen-overlay.active .title-screen-eyebrow { animation-delay: 0.1s; }
.title-screen-overlay.active .title-screen-logo { animation-delay: 0.2s; }
.title-screen-overlay.active .title-screen-tagline { animation-delay: 0.3s; }
.title-screen-overlay.active .title-explainer { animation-delay: 0.36s; }
.title-screen-overlay.active .title-fork-label { animation-delay: 0.42s; }
.title-screen-overlay.active .title-screen-actions { animation-delay: 0.46s; }
.title-screen-overlay.active .title-cta-divider { animation-delay: 0.52s; }
.title-screen-overlay.active .title-walkthrough-link { animation-delay: 0.6s; }

.title-fork-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 8px;
}

.title-screen-walkthrough-cta {
  opacity: 0;
  transform: translateY(14px);
}
.title-screen-overlay.active .title-screen-walkthrough-cta {
  animation:
    titleScreenFadeUp 0.6s cubic-bezier(0.2, 0, 0, 1) 0.38s forwards,
    walkthroughPulse 2.4s ease-in-out 1.2s infinite;
}

@keyframes titleScreenFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

.title-screen-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.title-screen-logo {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  line-height: 1.08;
  color: var(--text-primary);
  text-shadow: 0 4px 20px rgba(0,0,0,0.85);
  margin-bottom: 10px;
}

.title-screen-logo span {
  display: block;
  color: var(--accent-light);
  text-shadow: 0 4px 20px rgba(0,0,0,0.85);
}

.title-screen-tagline {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.48;
  max-width: 480px;
  margin: 0 auto 16px;
}

.title-screen-walkthrough-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 28px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(167, 139, 250, 0.45);
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.18), rgba(124, 58, 237, 0.06));
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.title-screen-walkthrough-cta:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.28), rgba(124, 58, 237, 0.1));
}
.wt-cta-badge {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-gradient);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.wt-cta-arrow { color: var(--accent-light); transition: transform var(--transition-fast); }
.title-screen-walkthrough-cta:hover .wt-cta-arrow { transform: translateX(3px); }

@keyframes walkthroughPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.35); }
  50% { box-shadow: 0 0 0 7px rgba(167, 139, 250, 0); }
}

/* ==========================================================================
   HERO ACTIONS: OPTION 1 (Hero Centerpiece + 50/50 Dual Bar)
   ========================================================================== */
.title-screen-hero-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.title-hero-primary-btn {
  width: 100%;
  min-height: 44px;
  height: 44px;
  padding: 0 20px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.9) 0%, rgba(124, 58, 237, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 18px rgba(99, 102, 241, 0.28), 0 2px 6px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  font-size: 0.94rem;
  font-weight: 600;
  cursor: pointer;
  box-sizing: border-box;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.title-hero-primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.45), 0 3px 8px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.35);
  filter: brightness(1.05);
}

.title-hero-primary-btn:active {
  transform: translateY(0);
}

.hero-btn-icon {
  font-size: 1.1rem;
  display: flex;
  align-items: center;
}

.hero-btn-text {
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.hero-btn-arrow {
  font-size: 1.05rem;
  font-weight: 500;
  opacity: 0.85;
  transition: transform 0.18s ease;
}

.title-hero-primary-btn:hover .hero-btn-arrow {
  transform: translateX(3px);
  opacity: 1;
}

/* Secondary Row (Update Setup / Profile Studio / Quick Send) */
.title-hero-sub-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
}

@media (max-width: 580px) {
  .title-hero-sub-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.title-hero-sub-btn {
  min-height: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 19px;
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-sizing: border-box;
  text-decoration: none;
  transition: all 0.18s ease;
}

.title-hero-sub-btn:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--text-primary) 11%, transparent);
  border-color: var(--border-hover);
  color: var(--text-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.title-hero-sub-btn:active {
  transform: translateY(0);
}

.title-hero-sub-update:hover {
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.18);
  color: #10b981;
}

.title-hero-sub-studio:hover {
  border-color: rgba(99, 102, 241, 0.45);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.18);
}

.title-hero-sub-quick:hover {
  border-color: rgba(236, 72, 153, 0.45);
  box-shadow: 0 4px 14px rgba(236, 72, 153, 0.18);
}

.sub-btn-icon {
  font-size: 0.92rem;
  display: flex;
  align-items: center;
}

.sub-btn-text {
  white-space: nowrap;
}

@media (max-width: 480px) {
  .title-screen-hero-layout {
    max-width: 100%;
    padding: 0 8px;
  }
}

/* ── Test code unlock (title screen) ── */
.title-test-code {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.title-test-code-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 10px 12px;
  min-height: 44px;
}
.title-test-code-toggle:hover {
  color: var(--text-primary);
}
.title-test-code-panel {
  width: min(420px, 100%);
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
  text-align: left;
}
.title-test-code-lead {
  margin: 0 0 10px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.7);
}
.title-test-code-row {
  display: flex;
  gap: 8px;
}
.title-test-code-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.title-test-code-input:focus {
  outline: none;
  border-color: rgba(167, 139, 250, 0.7);
}
.title-test-code-apply {
  padding: 10px 14px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: var(--on-secondary);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}
.title-test-code-apply:hover { filter: brightness(1.08); }
.title-test-code-status {
  margin: 8px 0 0;
  font-size: 0.78rem;
  min-height: 1.1em;
  color: rgba(255,255,255,0.65);
}
.title-test-code-status.is-error { color: #fca5a5; }
.title-test-code-status.is-ok { color: #86efac; }

/* ── Beta banner (global when test channel active) ── */
.kaptain-beta-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Must clear title-screen (20000) or the hero blur hides it */
  z-index: calc(var(--z-above-title) + 5);
  background: #6d28d9;
  color: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.kaptain-beta-banner[hidden] {
  display: none !important;
}
.kaptain-beta-banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 12px;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: nowrap;
  min-height: 40px;
}
.kaptain-beta-pill {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
}
body.kaptain-friend-active .kaptain-beta-banner {
  background: linear-gradient(90deg, rgba(40, 90, 140, 0.95), rgba(30, 70, 110, 0.95));
}
body.kaptain-friend-active .kaptain-beta-pill {
  background: rgba(255,255,255,0.2);
}

.friends-chooser-overlay .friends-chooser-panel {
  max-width: 420px;
  width: calc(100% - 32px);
}
.friends-chooser-intro {
  margin: 0 0 16px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-secondary, #a8b0c0);
}
.friends-chooser-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.friends-chooser-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.friends-chooser-card:hover,
.friends-chooser-card:focus-visible {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.28);
  outline: none;
}
.friends-chooser-name {
  font-weight: 700;
  font-size: 1rem;
}
.friends-chooser-blurb {
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--text-secondary, #a8b0c0);
}
.friends-chooser-empty {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary, #a8b0c0);
}

/* Friends of Kaptain: premium Kaptain + Creator intro */
.friend-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-above-title, 1200) + 20);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 80% 55% at 50% 45%, rgba(124, 58, 237, 0.28), transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 70%, rgba(168, 85, 247, 0.18), transparent 55%),
    radial-gradient(ellipse 45% 35% at 80% 25%, rgba(99, 102, 241, 0.2), transparent 50%),
    rgba(3, 4, 10, 0.72);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  overflow: hidden;
}
.friend-intro-overlay.friend-intro-play {
  opacity: 1;
  pointer-events: auto;
}
.friend-intro-overlay.friend-intro-out {
  opacity: 0;
  transition-duration: 0.5s;
}
.friend-intro-stage {
  position: relative;
  width: min(960px, calc(100vw - 28px));
  display: flex;
  align-items: center;
  justify-content: center;
}
.friend-intro-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  opacity: 0;
}
.friend-intro-orb-a {
  width: min(420px, 70vw);
  height: min(420px, 70vw);
  left: 8%;
  top: 40%;
  transform: translate(-30%, -50%);
  background: radial-gradient(circle, rgba(124, 58, 237, 0.55), transparent 70%);
}
.friend-intro-orb-b {
  width: min(380px, 65vw);
  height: min(380px, 65vw);
  right: 6%;
  top: 48%;
  transform: translate(30%, -50%);
  background: radial-gradient(circle, rgba(192, 132, 252, 0.45), transparent 70%);
}
.friend-intro-rays {
  position: absolute;
  inset: -20% -10%;
  pointer-events: none;
  opacity: 0;
  background:
    conic-gradient(from 210deg at 50% 50%, transparent 0deg, rgba(255,255,255,0.08) 18deg, transparent 42deg, transparent 180deg, rgba(168,85,247,0.1) 205deg, transparent 240deg);
  mask-image: radial-gradient(circle at center, black 10%, transparent 68%);
  -webkit-mask-image: radial-gradient(circle at center, black 10%, transparent 68%);
}
.friend-intro-glass {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: clamp(36px, 7vw, 64px) clamp(22px, 5vw, 56px);
  border-radius: 24px;
  text-align: center;
  background:
    linear-gradient(155deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 42%, rgba(124,58,237,0.08) 100%);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    0 0 0 1px rgba(124, 58, 237, 0.18) inset,
    0 28px 90px rgba(0, 0, 0, 0.55),
    0 0 80px rgba(124, 58, 237, 0.22);
  overflow: hidden;
}
.friend-intro-glass::before {
  content: '';
  position: absolute;
  inset: -40% -20%;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.18) 48%, transparent 62%);
  transform: translateX(-60%);
  opacity: 0;
  pointer-events: none;
}
.friend-intro-eyebrow {
  margin: 0 0 18px;
  font-family: 'Outfit', Inter, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-light);
  opacity: 0;
  transform: translateY(8px);
}
.friend-intro-names {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: clamp(12px, 2.8vw, 26px);
  font-family: 'Outfit', Inter, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(2.35rem, 8vw, 4.25rem);
  width: 100%;
}
.friend-intro-name {
  display: block;
  opacity: 0;
  background: linear-gradient(135deg, #fff 10%, var(--accent-light) 55%, #e9d5ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 28px rgba(168, 85, 247, 0.35));
  white-space: nowrap;
}
.friend-intro-kaptain {
  justify-self: end;
  text-align: right;
  transform: translateX(-58vw);
}
.friend-intro-friend {
  justify-self: start;
  text-align: left;
  transform: translateX(58vw);
}
.friend-intro-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: 1.05em;
  height: 1.05em;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.35);
  background: var(--accent-gradient);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.25) inset,
    0 0 28px rgba(124, 58, 237, 0.65);
}
.friend-intro-plus-core {
  font-weight: 700;
  font-size: 0.55em;
  color: #fff;
  line-height: 1;
}
.friend-intro-underline {
  width: 0;
  height: 2px;
  margin: 22px auto 0;
  border-radius: 999px;
  background: var(--accent-gradient);
  box-shadow: 0 0 18px rgba(124, 58, 237, 0.7);
  opacity: 0;
}
.friend-intro-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.friend-intro-overlay.friend-intro-play .friend-intro-orb-a {
  animation: friendIntroOrbIn 1.2s ease forwards, friendIntroOrbDriftA 3.2s ease-in-out 0.4s infinite alternate;
}
.friend-intro-overlay.friend-intro-play .friend-intro-orb-b {
  animation: friendIntroOrbIn 1.2s ease 0.08s forwards, friendIntroOrbDriftB 3.4s ease-in-out 0.5s infinite alternate;
}
.friend-intro-overlay.friend-intro-play .friend-intro-rays {
  animation: friendIntroRays 2.2s ease forwards;
}
.friend-intro-overlay.friend-intro-play .friend-intro-eyebrow {
  animation: friendIntroFadeUp 0.55s ease 0.15s forwards;
}
.friend-intro-overlay.friend-intro-play .friend-intro-kaptain {
  animation: friendIntroFromLeft 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.friend-intro-overlay.friend-intro-play .friend-intro-friend {
  animation: friendIntroFromRight 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.friend-intro-overlay.friend-intro-play .friend-intro-plus {
  animation: friendIntroPlus 0.65s cubic-bezier(0.34, 1.4, 0.64, 1) 0.58s forwards;
}
.friend-intro-overlay.friend-intro-play .friend-intro-underline {
  animation: friendIntroLine 0.7s ease 1.05s forwards;
}
.friend-intro-overlay.friend-intro-play .friend-intro-glass::before {
  animation: friendIntroSheen 1.1s ease 1.05s forwards;
}
.friend-intro-overlay.friend-intro-play .friend-intro-glass {
  animation: friendIntroGlassPulse 0.9s ease 1.05s;
}
@keyframes friendIntroOrbIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes friendIntroOrbDriftA {
  from { transform: translate(-30%, -50%) scale(1); }
  to { transform: translate(-18%, -58%) scale(1.08); }
}
@keyframes friendIntroOrbDriftB {
  from { transform: translate(30%, -50%) scale(1); }
  to { transform: translate(18%, -42%) scale(1.06); }
}
@keyframes friendIntroRays {
  0% { opacity: 0; transform: scale(0.85) rotate(0deg); }
  40% { opacity: 0.7; }
  100% { opacity: 0.35; transform: scale(1.05) rotate(12deg); }
}
@keyframes friendIntroFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes friendIntroFromLeft {
  0% { opacity: 0; transform: translateX(-58vw); filter: drop-shadow(0 0 0 rgba(168, 85, 247, 0)); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); filter: drop-shadow(0 0 28px rgba(168, 85, 247, 0.45)); }
}
@keyframes friendIntroFromRight {
  0% { opacity: 0; transform: translateX(58vw); filter: drop-shadow(0 0 0 rgba(168, 85, 247, 0)); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); filter: drop-shadow(0 0 28px rgba(168, 85, 247, 0.45)); }
}
@keyframes friendIntroPlus {
  0% { opacity: 0; transform: scale(0.35); }
  70% { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes friendIntroLine {
  from { width: 0; opacity: 0; }
  to { width: min(220px, 48%); opacity: 1; }
}
@keyframes friendIntroSheen {
  0% { opacity: 0; transform: translateX(-70%); }
  35% { opacity: 0.9; }
  100% { opacity: 0; transform: translateX(70%); }
}
@keyframes friendIntroGlassPulse {
  0% { box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.18) inset, 0 28px 90px rgba(0, 0, 0, 0.55), 0 0 80px rgba(124, 58, 237, 0.22); }
  45% { box-shadow: 0 0 0 1px rgba(196, 181, 253, 0.45) inset, 0 28px 90px rgba(0, 0, 0, 0.55), 0 0 120px rgba(168, 85, 247, 0.5); }
  100% { box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.18) inset, 0 28px 90px rgba(0, 0, 0, 0.55), 0 0 80px rgba(124, 58, 237, 0.22); }
}
.friend-intro-overlay.friend-intro-reduced .friend-intro-name,
.friend-intro-overlay.friend-intro-reduced .friend-intro-plus,
.friend-intro-overlay.friend-intro-reduced .friend-intro-eyebrow,
.friend-intro-overlay.friend-intro-reduced .friend-intro-orb,
.friend-intro-overlay.friend-intro-reduced .friend-intro-rays,
.friend-intro-overlay.friend-intro-reduced .friend-intro-underline {
  opacity: 1;
  transform: none;
  animation: none;
  filter: none;
  width: auto;
}
.friend-intro-overlay.friend-intro-reduced .friend-intro-underline {
  width: min(220px, 48%);
}
@media (max-width: 520px) {
  .friend-intro-names {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 10px;
  }
  .friend-intro-kaptain,
  .friend-intro-friend {
    justify-self: center;
    text-align: center;
  }
  .friend-intro-plus {
    width: 0.85em;
    height: 0.85em;
  }
}

.kaptain-beta-banner-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kaptain-beta-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.kaptain-beta-notes,
.kaptain-beta-exit,
.kaptain-beta-hide {
  border: 1px solid rgba(255,255,255,0.45);
  background: rgba(0,0,0,0.25);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1.2;
}
.kaptain-beta-hide {
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kaptain-beta-notes:hover,
.kaptain-beta-exit:hover,
.kaptain-beta-hide:hover { background: rgba(0,0,0,0.4); }

/* Push page chrome below the banner. Fixed controls need explicit offsets —
   body padding alone does not move position:fixed hamburger / account FAB. */
body.kaptain-beta-active {
  padding-top: var(--kaptain-beta-banner-height, 40px);
}
body.kaptain-beta-active .title-screen-overlay {
  padding-top: calc(var(--kaptain-beta-banner-height, 40px) + 8px);
}
body.kaptain-beta-active .sidebar-toggle {
  top: calc(var(--kaptain-beta-banner-height, 40px) + 12px);
}
body.kaptain-beta-active .account-chrome,
body.kaptain-beta-active .title-theme-toggle {
  top: calc(var(--kaptain-beta-banner-height, 40px) + 12px);
}
/* .top-bar is absolute inside .app-screen; body padding already shifts the shell */
body.kaptain-beta-active .sidebar.open .brand-section {
  padding-top: calc(76px + var(--kaptain-beta-banner-height, 40px));
}

@media (max-width: 600px) {
  .kaptain-beta-banner-inner {
    gap: 8px;
    padding: 7px 10px;
  }
  .kaptain-beta-banner-text { font-size: 0.78rem; }
  .kaptain-beta-notes,
  .kaptain-beta-exit {
    padding: 4px 8px;
    font-size: 0.7rem;
  }
  .kaptain-beta-hide { width: 28px; height: 28px; }
  body.kaptain-beta-active .sidebar-toggle {
    top: calc(var(--kaptain-beta-banner-height, 40px) + 12px);
    left: 12px;
  }
}

.beta-notes-overlay.popup-overlay {
  z-index: calc(var(--z-above-title) + 6);
  align-items: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}
/* Must beat .popup-panel { text-align: center } (same element, later rule) */
.popup-panel.beta-notes-panel {
  width: min(580px, calc(100vw - 24px));
  max-width: 580px;
  max-height: min(92dvh, calc(100vh - 24px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  text-align: left;
  padding: 20px 22px 16px;
}
.beta-notes-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 8px;
}
.beta-notes-logo {
  display: block;
  width: auto;
  height: 38px;
  max-width: min(220px, 70%);
  object-fit: contain;
}
.popup-panel.beta-notes-panel .popup-title {
  margin: 0 0 10px;
  text-align: left;
  font-size: 1.15rem;
}
.beta-notes-intro {
  margin: 0 0 10px;
  font-size: 0.85rem;
  line-height: 1.45;
  text-align: left;
  color: var(--text-secondary, rgba(255,255,255,0.75));
}
.beta-notes-list {
  margin: 0 0 12px;
  padding: 0 0 0 1.2em;
  list-style: disc outside;
  font-size: 0.84rem;
  line-height: 1.45;
  text-align: left;
  color: var(--text-primary, #fff);
}
.beta-notes-list li {
  margin: 0 0 6px;
  padding-left: 0.15em;
  text-align: left;
}
.beta-notes-list li:last-child { margin-bottom: 0; }
.beta-notes-feedback {
  margin: 0 0 10px;
  font-size: 0.82rem;
  line-height: 1.4;
  text-align: left;
  color: var(--text-secondary, rgba(255,255,255,0.75));
}
.beta-notes-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  justify-content: center;
  margin: 0 0 14px;
}
.beta-notes-contacts a.beta-notes-link {
  color: var(--accent-light, #c4b5fd);
  font-weight: 600;
  font-size: 0.85rem;
}
.popup-panel.beta-notes-panel .beta-notes-close {
  display: block;
  margin: 16px auto 4px;
  position: static;
  padding: 10px 28px;
  border-radius: 10px;
}

@media (max-width: 600px) {
  .popup-panel.beta-notes-panel {
    padding: 18px 16px 14px;
  }
  .beta-notes-logo { height: 40px; }
  .beta-notes-intro,
  .beta-notes-list,
  .beta-notes-feedback { font-size: 0.84rem; }
}

.title-screen-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 26px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.title-screen-btn-secondary {
  border: 1px solid rgba(255,255,255,0.2);
  background: transparent;
  color: var(--text-primary);
}

.title-screen-btn-secondary:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.32);
  transform: translateY(-1px);
}

.title-screen-btn-primary {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: var(--accent);
  color: var(--on-secondary);
  box-shadow: 0 4px 18px var(--accent-glow), 0 2px 8px rgba(0, 0, 0, 0.4);
}

.title-screen-btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

/* "Profile Studio" pill — had no variant rule at all, so it fell through to
   bare browser button chrome (white box, stacked icon/text). Accent-outlined
   glass reads as the "new/featured" middle option without competing with
   the solid-fill primary CTA on its left. */
.title-screen-btn-studio {
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-subtle);
  color: var(--text-primary);
  backdrop-filter: var(--blur-xs);
  -webkit-backdrop-filter: var(--blur-xs);
}
.title-screen-btn-studio:hover {
  background: var(--accent-glow);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.title-screen-subaction {
  margin-top: 18px;
  font-size: 0.82rem;
  color: var(--text-dark);
  text-align: center;
  line-height: 1.55;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

/* Global telemetry stats — hover icon below the sidebar brand title */
.telemetry-icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: 2px 0 4px 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(255,255,255,0.02);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.telemetry-icon-btn:hover,
.telemetry-icon-btn:focus-visible {
  color: var(--accent-light);
  border-color: var(--accent);
  background: var(--accent-glow);
}

.telemetry-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  width: max-content;
  background: var(--bg-elevated);
  border: 1px solid var(--border-hover);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 5;
}
.telemetry-icon-btn:hover .telemetry-tooltip,
.telemetry-icon-btn:focus-visible .telemetry-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.telemetry-stat { display: none; }
.telemetry-value { display: none; }
.telemetry-label { display: none; }
.telemetry-divider { display: none; }

.telemetry-sentence {
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: nowrap;
  margin: 0;
  padding: 0;
}
.telemetry-sentence strong {
  color: var(--accent-light);
  font-weight: 700;
}

.title-screen-link {
  padding: 4px 2px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  transition: color var(--transition-fast, 0.15s);
}
.title-screen-link:hover { color: #fff; text-decoration: underline; }

.title-screen-version {
  display: block;
  margin-top: 28px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dark);
}

@media (max-width: 600px) {
  .title-screen-actions { flex-direction: column; width: 100%; }
  .title-screen-btn { width: 100%; }
}

/* ==========================================================================
   TOAST SYSTEM
   ========================================================================== */

.toast-container {
  position: fixed;
  bottom: var(--toast-bottom-offset, 110px);
  right: 36px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background-color: var(--bg-sidebar);
  border: 1px solid var(--border-hover);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  backdrop-filter: var(--blur);
  min-width: 280px;
  max-width: 420px;
  pointer-events: auto;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.2, 0, 0, 1);
}

.toast.show { transform: translateY(0); opacity: 1; }

.toast-icon { width: 16px; height: 16px; flex-shrink: 0; }
.toast-success .toast-icon { color: var(--success); }
.toast-info .toast-icon { color: var(--accent-light); }

.toast-message {
  font-size: 0.9rem;
  color: var(--text-primary);
  flex: 1;
}

.toast-close {
  background: transparent;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
  padding-left: 10px;
}

.toast-close:hover { color: #fff; }

/* ==========================================================================
   POPUP / LOADER
   ========================================================================== */

.popup-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: var(--blur-md);
  z-index: var(--z-popup);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.popup-overlay.open { opacity: 1; visibility: visible; }

.popup-panel {
  width: 440px;
  background-color: var(--bg-drawer);
  border: 1px solid var(--border-hover);
  border-radius: 16px;
  padding: 30px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  transform: scale(0.95);
  transition: transform var(--transition-normal);
}

.popup-overlay.open .popup-panel { transform: scale(1); }

/* Download confirmation — shown before anything is written to disk, so the
   visitor sees the filename and size first. Borrows the loader popup's
   surface so it doesn't read as a different app. */
/* Visibility flips outright rather than riding the shared popup transition:
   the dialog has to be focusable the instant .open lands, and only opacity
   needs to animate. */
.dl-confirm-overlay {
  z-index: var(--z-above-title);
  transition: opacity var(--transition-normal);
}
.dl-confirm-overlay.open { visibility: visible; }
.dl-confirm-panel { width: min(440px, calc(100vw - 32px)); text-align: left; }
.dl-confirm-file {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.dl-confirm-icon { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.dl-confirm-file-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dl-confirm-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.dl-confirm-meta { font-size: 0.78rem; color: var(--text-muted); }
.dl-confirm-note {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 18px;
}
.dl-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.dl-confirm-cancel, .dl-confirm-go, .dl-confirm-bingecat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.dl-confirm-cancel {
  background: transparent;
  border: 1px solid var(--border-hover);
  color: var(--text-secondary);
}
.dl-confirm-cancel:hover { color: var(--text-primary); border-color: var(--text-muted); }
.dl-confirm-go {
  background: var(--accent-gradient);
  border: 1px solid transparent;
  color: #fff;
}
.dl-confirm-go:hover { filter: brightness(1.08); }
.dl-confirm-bingecat {
  background: var(--bg-card);
  border: 1px solid var(--border-hover);
  color: var(--text-primary);
}
.dl-confirm-bingecat:hover {
  border-color: var(--accent);
  background: var(--bg-card-hover);
}
.dl-confirm-bingecat .bingecat-mark { width: 20px; border-radius: 4px; }
.dl-confirm-bingecat .bingecat-mark.no-logo::before { font-size: 0.72rem; }
.dl-confirm-cancel:focus-visible, .dl-confirm-go:focus-visible, .dl-confirm-bingecat:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 460px) {
  .dl-confirm-actions { flex-direction: column-reverse; align-items: stretch; }
  .dl-confirm-actions > button { width: 100%; }
}

.popup-spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.05);
  border-top-color: var(--accent-light);
  animation: spin 0.8s linear infinite;
  margin: 0 auto 20px auto;
}

/* Smaller variant for inline/compact loading contexts (vs. the full-size
   spinner used in the modal popup loader). */
.popup-spinner.spinner-sm {
  width: 26px;
  height: 26px;
  border-width: 2px;
  margin-bottom: 12px;
}

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

.popup-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  margin-bottom: 8px;
}

.popup-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ==========================================================================
   PREVIEW COLLECTION VIEW
   ========================================================================== */

.preview-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-bottom: 40px;
}

.preview-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.preview-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.preview-back-btn:hover {
  background: rgba(255,255,255,0.07);
  color: #fff;
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

.preview-back-btn svg {
  width: 14px;
  height: 14px;
}

.preview-hero {
  text-align: left;
}

.preview-hero-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}

.preview-hero-sub {
  font-size: 0.95rem;
  color: var(--text-muted);
}

.preview-hero-sub strong {
  color: var(--text-secondary);
}

/* Category Row — Netflix-style horizontal scroll */
.preview-category-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.preview-category-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.preview-category-emoji {
  font-size: 1.1rem;
}

.preview-category-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
}

.preview-category-count {
  font-size: 0.78rem;
  color: var(--text-dark);
  font-weight: 600;
  margin-left: 4px;
}

/* Horizontal scroll track */
.preview-scroll-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.preview-scroll-track::-webkit-scrollbar {
  height: 4px;
}

.preview-scroll-track::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
}

/* Preview Card — clean, no controls */
.preview-card {
  position: relative;
  flex-shrink: 0;
  width: 200px;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  scroll-snap-align: start;
  transition: all var(--transition-normal);
  cursor: default;
}

.preview-card.shape-landscape {
  width: 220px;
  aspect-ratio: 16/10;
}

.preview-card.shape-poster {
  width: 150px;
  aspect-ratio: 2/3;
}

.preview-card.shape-square {
  width: 170px;
  aspect-ratio: 1/1;
}

.preview-card:hover {
  transform: scale(1.05);
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 12px 30px rgba(0,0,0,0.6);
}

.preview-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.preview-card-gradient {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 50%;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
  pointer-events: none;
}

.preview-card-logo {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 55%;
  max-height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.9));
  pointer-events: none;
}

.preview-card.shape-poster .preview-card-logo {
  width: 65%;
  max-height: 28px;
}

.preview-card.shape-landscape .preview-card-logo {
  width: 35%;
  max-height: 16px;
  bottom: 8px;
}

.preview-card-title {
  position: absolute;
  bottom: 10px;
  left: 10px; right: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Empty preview */
.preview-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-muted);
}

/* Matches .no-results-icon below so any empty state (search, preview,
   no-sources) reads as one consistent pattern rather than two different
   ad hoc layouts. */
.preview-empty svg {
  width: 40px;
  height: 40px;
  color: var(--text-dark);
  margin: 0 auto 12px;
  display: block;
}

.preview-empty h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.preview-empty p {
  font-size: 0.95rem;
  max-width: 400px;
  margin: 0 auto;
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.no-results-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 250px;
  color: var(--text-muted);
  text-align: center;
  gap: 12px;
}

.no-results-icon {
  width: 40px;
  height: 40px;
  color: var(--text-dark);
}

.no-results-title {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 1.1rem;
}

.no-results-desc {
  font-size: 0.9rem;
  max-width: 320px;
}

/* ==========================================================================
   GUIDED WALKTHROUGH
   ========================================================================== */

.walkthrough-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: var(--z-walkthrough);
  pointer-events: auto;
  display: none;
  background: rgba(3, 3, 6, 0.6);
}

.walkthrough-overlay.active { display: block; }

/* Spotlight cutout — the box-shadow creates the dimming everywhere else */
.walkthrough-spotlight {
  position: fixed;
  z-index: var(--z-walkthrough);
  border-radius: 12px;
  box-shadow: 0 0 0 200vmax rgba(3, 3, 6, 0.88);
  transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.walkthrough-spotlight.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Tooltip card */
.walkthrough-tooltip {
  position: fixed;
  z-index: var(--z-walkthrough-tooltip);
  background-color: hsl(240, 10%, 10%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 28px 30px 24px;
  pointer-events: none;
  width: 380px;
  max-width: calc(100vw - 40px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 1px rgba(255,255,255,0.1);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease 0.15s, transform var(--spring) 0.15s;
}

.walkthrough-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Progress */
.wt-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.wt-step-label {
  display: none;
}

.wt-mini-counter {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  margin-left: auto;
}

.wt-dots {
  display: flex;
  gap: 6px;
}

.wt-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.12);
  transition: all 0.3s ease;
}

.wt-dot.active {
  background-color: var(--accent-light);
  box-shadow: 0 0 8px var(--accent-glow);
  transform: scale(1.2);
}

.wt-dot.done {
  background-color: var(--success);
}

/* Tooltip Content */
.wt-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.25;
}

.wt-body {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
}

/* Actions */
.wt-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wt-btn-skip {
  background: none;
  border: none;
  color: var(--text-dark);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 2px;
  transition: color 0.15s;
}

.wt-btn-skip:hover { color: var(--text-secondary); }

.wt-nav-group {
  display: flex;
  gap: 8px;
}

.wt-btn-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 18px;
  border-radius: 8px;
  border: 1px solid var(--border-hover);
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.wt-btn-nav:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
  transform: translateY(-1px);
}

.wt-btn-next-primary {
  background: var(--accent);
  border: none;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.wt-btn-next-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Mid-range: the header now carries view-mode / sort / reorder controls, so
   drop the non-essential card-size slider and tighten search before things
   get cramped. */
@media (max-width: 1300px) {
  .top-bar #zoom-container { display: none; }
  .search-wrapper { width: 190px; }
}

@media (max-width: 992px) {
  /* Sidebar stays as overlay — just narrow it on small screens */
  .sidebar { width: min(300px, 85vw); }

  .sidebar-toggle { top: 10px; left: 16px; }
  .account-chrome, .title-theme-toggle { top: 10px; }

  .control-center-panel {
    height: 60px;
    border-radius: 12px;
    min-width: 320px;
  }

  .control-stats-area { gap: 16px; }

  .top-bar {
    padding: 0 60px 0 60px;
    height: 60px;
  }

  .search-wrapper { width: 160px; }
  .content-canvas { padding: 20px; padding-top: 70px; padding-bottom: 100px; }

  .walkthrough-tooltip { width: 320px; }
}

@media (max-width: 600px) {
  /* Search stays visible; view-mode/sort/reorder/zoom collapse behind the
     ⋯ toggle instead of vanishing (previously the whole top-bar-right,
     search included, was hidden outright on phones). */
  .search-wrapper { width: 150px; }
  .topbar-more-toggle.browse-only { display: inline-flex; }
  .topbar-more-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 220px;
    padding: 14px;
    background: hsla(240, 10%, 6%, 0.92);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.6);
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
  }
  .topbar-more-panel.open { display: flex; }
  .topbar-more-panel .topbar-control-combo,
  .topbar-more-panel .zoom-control-combo {
    padding-left: 0;
    height: auto;
    justify-content: space-between;
  }
  .topbar-more-panel .topbar-select,
  .topbar-more-panel .zoom-slider { flex: 1; }

  .control-divider { display: none; }

  /* Shared floating action button — collapses a bottom hotbar down to one
     small circular button on phones. Used by #control-fab and #preview-fab. */
  .mobile-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: var(--accent-gradient);
    color: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 0 0.5px rgba(255,255,255,0.1);
    cursor: pointer;
    transition: transform var(--transition-fast);
  }
  .mobile-fab svg { width: 20px; height: 20px; }
  .mobile-fab:active { transform: scale(0.94); }
  .mobile-fab[aria-expanded="true"] { transform: rotate(45deg); }

  .control-stat-combo:nth-child(2),
  .control-stat-combo:nth-child(3) { display: none; }

  /* Bottom action bar collapses to a single floating button — tap it to
     pop the Folders/Sources/Size stats + Download + Send to Nuvio up as a
     compact panel instead of permanently occupying the screen edge. */
  .control-center-bar {
    left: auto;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    transform: none;
    display: block;
    pointer-events: auto;
  }

  .control-center-panel {
    display: none;
    width: auto;
    min-width: 240px;
    max-width: calc(100vw - 32px);
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    position: absolute;
    right: 0;
    bottom: 64px;
    padding: 16px;
  }
  #control-center-bar.open .control-center-panel { display: flex; }

  .control-stats-area { justify-content: center; }
  .control-actions-combo { flex-direction: column; }
  .control-actions-combo .btn-primary,
  .control-actions-combo .btn-secondary { width: 100%; justify-content: center; }

  .content-canvas {
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
  }

  .drawer-panel { width: 100vw; }

  .category-actions-group { display: none; }

  .walkthrough-tooltip {
    width: calc(100vw - 32px);
    left: 16px !important;
    right: 16px !important;
  }
}

/* ==========================================================================
   NUVIO SETUP WIZARD
   ========================================================================== */

.wizard-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: var(--blur-md);
  z-index: var(--z-wizard);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.wizard-overlay.open { opacity: 1; visibility: visible; }

.wizard-panel {
  width: 480px;
  max-width: 100%;
  max-height: 94vh;
  overflow-y: auto;
  background-color: var(--bg-drawer);
  border: 1px solid var(--border-hover);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  transform: scale(0.96);
  /* Same overshoot spring as the emulator's own TV-focus motion (see
     --spring), so the wizard's entrance reads as the same app, not a
     generic modal pop. */
  transition: transform var(--spring);
}

.wizard-overlay.open .wizard-panel { transform: scale(1); }

.wiz-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 26px 18px;
  border-bottom: 1px solid var(--border);
}

.wiz-header-text { flex: 1; min-width: 0; }

.wiz-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--text-primary);
  line-height: 1.2;
}

.wiz-sub {
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* These two were near-invisible: a dark chip on a dark panel with a muted
   glyph and no words. Raised the surface, border and text contrast, grew the
   hit target to the 40px touch minimum, and the back arrow now carries a
   readable "Back" label wherever there's room for it. */
.wiz-back, .wiz-close {
  flex-shrink: 0;
  background: rgba(255,255,255,0.09);
  border: 1px solid var(--border-hover);
  color: var(--text-primary);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all var(--transition-fast);
}
.wiz-help-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(255,255,255,0.09);
  border: 1px solid var(--border-hover);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.wiz-help-btn:hover { background: rgba(255,255,255,0.16); border-color: var(--accent); color: #fff; }
.wiz-help-btn.open { background: var(--accent-gradient); border-color: transparent; color: #fff; }
.wiz-help-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Glossary drawer — one definition list, reachable from every screen. */
.wiz-glossary-panel {
  max-height: 46vh;
  overflow-y: auto;
  margin: 0 20px;
  padding: 4px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.wiz-glossary-panel[hidden] { display: none; }
.wiz-glossary-list { margin: 0; }
.wiz-glossary-row { padding: 10px 0; border-bottom: 1px solid var(--border); }
.wiz-glossary-row:last-child { border-bottom: none; }
.wiz-glossary-row dt {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 3px;
}
.wiz-glossary-row dd {
  margin: 0;
  font-size: 0.79rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.wiz-back { min-width: 40px; height: 40px; padding: 0 10px; font-size: 0.82rem; font-weight: 600; }
.wiz-back svg { width: 16px; height: 16px; }
.wiz-back-label { letter-spacing: 0.01em; }
.wiz-close { width: 40px; height: 40px; font-size: 1.5rem; line-height: 1; }
.wiz-back:hover, .wiz-close:hover {
  background: rgba(255,255,255,0.16);
  border-color: var(--accent);
  color: #fff;
}
.wiz-back:focus-visible, .wiz-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Narrow panels keep the icon-only chip so the header title still fits. */
@media (max-width: 460px) {
  .wiz-back { min-width: 40px; padding: 0; }
  .wiz-back-label { display: none; }
}

.wiz-body { padding: 22px 26px 26px; }
.wiz-center { text-align: center; padding-top: 34px; padding-bottom: 34px; }

/* Choice cards */
.wiz-option {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  padding: 18px;
  margin-bottom: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.wiz-option:last-child { margin-bottom: 0; }
/* Same double-ring "Nuvio spring" focus treatment .nv-card uses in the main
   grid (inner ring cuts against the panel's own background, outer ring is
   the accent), so picking a setup mode feels like picking a folder. */
.wiz-option:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
  transform: translateY(-2px);
  transition: all var(--spring);
  box-shadow: 0 0 0 2px var(--bg-drawer), 0 0 0 4px var(--secondary-color), 0 10px 26px rgba(0,0,0,0.5);
}

.wiz-option-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}
.wiz-option-icon.accent {
  background: var(--accent-gradient);
  color: #fff;
  box-shadow: 0 4px 14px var(--accent-glow);
}
.wiz-option-icon svg { width: 20px; height: 20px; }

.wiz-option-text { display: flex; flex-direction: column; gap: 4px; }
.wiz-option-title { font-weight: 700; font-size: 0.98rem; color: var(--text-primary); }
.wiz-option-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.45; }

.wiz-option-title-row { display: flex; align-items: center; gap: 8px; }
.wiz-option-pill {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent-gradient);
  color: #fff;
}
.wiz-option-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.wiz-option-chip {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

/* Setup Mode's collapsed "which should I pick" detail */
.wiz-mode-expander {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 4px;
  margin-top: 6px;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.wiz-mode-expander:hover { color: var(--text-primary); }
.wiz-mode-expander-caret { display: inline-block; transition: transform var(--transition-fast); }
.wiz-mode-expander-caret.open { transform: rotate(180deg); }
.wiz-mode-expander-body {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.55;
  padding: 4px 4px 8px;
}
.wiz-mode-expander-body p { margin: 0 0 10px; }
.wiz-mode-expander-body p:last-child { margin-bottom: 0; }

/* Quiet full-width text action under a set of real choices (was named for the
   Bingecat export, which has since moved to the title screen's More options). */
.wiz-quiet-link {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 14px;
  padding: 8px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.wiz-quiet-link:hover { color: var(--accent-light); }
.wiz-quiet-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* Mode toggle */
.wiz-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
.wiz-toggle-btn {
  flex: 1;
  padding: 10px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  transition: all var(--transition-fast);
}
.wiz-toggle-btn.active {
  background: var(--accent-gradient);
  border-color: transparent;
  color: #fff;
}

/* Inputs */
.wiz-label {
  display: block;
  margin-bottom: 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.wiz-hint { font-weight: 400; color: var(--text-muted); font-size: 0.78rem; margin-left: 4px; }
.wiz-input {
  margin-top: 7px;
  width: 100%;
  padding: 11px 13px;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 9px;
  outline: none;
  transition: border-color var(--transition-fast);
}
.wiz-input:focus { border-color: var(--accent); }
select.wiz-input { cursor: pointer; }

/* Pill/switch toggle (matches bttr.cc's own settings UI style) */
.wiz-pill-toggle {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}
.wiz-pill-toggle input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.wiz-pill-toggle .wiz-pill-track {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  transition: background var(--transition-fast, 0.15s ease);
  pointer-events: none;
}
.wiz-pill-toggle .wiz-pill-track::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform var(--transition-fast, 0.15s ease);
}
.wiz-pill-toggle input:checked + .wiz-pill-track { background: var(--accent); }
.wiz-pill-toggle input:checked + .wiz-pill-track::before { transform: translateX(18px); }
.wiz-pill-toggle input:focus-visible + .wiz-pill-track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Segmented Pill Buttons */
.wiz-pill {
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.wiz-pill:hover {
  background: rgba(255,255,255,0.1);
}
.wiz-pill.active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  font-weight: 600;
}

/* ── Poster Studio: live preview + settings side by side ── */
.wiz-poster-studio {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 16px;
  align-items: start;
  background: linear-gradient(165deg, var(--bg-elevated), var(--bg-card));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 18px;
}

.wiz-poster-studio-visual {
  position: sticky;
  top: 0;
}

.wiz-poster-frame {
  position: relative;
  width: 108px;
  aspect-ratio: 2 / 3;
  border-radius: 11px;
  overflow: hidden;
  background: radial-gradient(120% 140% at 30% 0%, rgba(255,255,255,0.06), transparent 60%), #0b0b0f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55), 0 0 22px var(--accent-glow, rgba(124,58,237,0.25));
}

.wiz-poster-frame-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.wiz-poster-frame-img.is-loaded {
  opacity: 1;
  transform: scale(1);
}

.wiz-poster-caption {
  margin-top: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.35;
  overflow-wrap: break-word;
}

.wiz-poster-studio-settings {
  min-width: 0;
}

.wiz-opt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
}

.wiz-opt-row + .wiz-opt-row {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.wiz-opt-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.wiz-opt-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.wiz-opt-sub {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.wiz-opt-inline-select {
  padding: 7px 10px;
  font-size: 0.8rem;
  border-radius: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-primary);
  cursor: pointer;
  max-width: 132px;
}

/* Below this the two-column layout gets too tight to read comfortably —
   fall back to poster-on-top, settings-below like the rest of the wizard. */
@media (max-width: 380px) {
  .wiz-poster-studio {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .wiz-poster-studio-settings {
    width: 100%;
  }
  .wiz-opt-inline-select { max-width: none; }
}

/* ── Formatter Studio: full-width mock stream row, settings below ── */
.wiz-formatter-studio {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 2px;
}

.wiz-formatter-preview {
  position: relative;
  background: linear-gradient(165deg, var(--bg-elevated), var(--bg-card));
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), 0 0 14px var(--accent-glow, rgba(124,58,237,0.18));
  max-height: 160px;
  overflow-y: auto;
}

.wiz-formatter-preview-name {
  /* System stack instead of 'Outfit' — these preview strings include
     stylized Unicode (superscripts, ligature-like glyphs) that a geometric
     display font doesn't fully cover, causing visible font-fallback mixing. */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.01em;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.35;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wiz-formatter-preview-desc {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

.wiz-formatter-studio-settings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  min-width: 0;
}

.wiz-formatter-studio-settings .wiz-label {
  margin-bottom: 0;
}

@media (max-width: 380px) {
  .wiz-formatter-studio-settings {
    grid-template-columns: 1fr;
  }
}

/* Privacy / notes */
.wiz-privacy {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--success-glow);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 4px 0 18px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.wiz-privacy-icon { flex-shrink: 0; color: var(--success); }
.wiz-privacy-icon svg { width: 16px; height: 16px; }

.wiz-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 16px;
}
.wiz-gap-banner {
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.35);
  color: #d1fae5;
  font-size: 0.88rem;
  line-height: 1.45;
}
.wiz-gap-banner strong { color: #34d399; }
.wiz-gap-banner.is-caught-up {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.35);
  color: #bfdbfe;
}
.wiz-gap-banner.is-caught-up strong { color: #60a5fa; }
.wiz-note strong { color: var(--warning); }

.wiz-note-custom { margin-bottom: 0; }

.wiz-torbox-promo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 14px 16px;
  margin-bottom: 18px;
  text-align: center;
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.12), rgba(124, 58, 237, 0.03));
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 11px;
}
.wiz-torbox-promo-copy { display: flex; flex-direction: column; gap: 3px; }
.wiz-torbox-promo-title { font-size: 0.86rem; font-weight: 700; color: var(--text-primary); }
.wiz-torbox-promo-text { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.45; max-width: 360px; }
.wiz-torbox-promo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 9px;
  background: var(--accent-gradient);
  color: #fff;
  font-weight: 700;
  font-size: 0.86rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 15px var(--accent-glow);
  transition: all var(--transition-fast);
}
.wiz-torbox-promo-btn:hover { transform: translateY(-1.5px); filter: brightness(1.08); box-shadow: 0 6px 20px var(--accent-glow); }
.wiz-torbox-promo-arrow { transition: transform var(--transition-fast); }
.wiz-torbox-promo-btn:hover .wiz-torbox-promo-arrow { transform: translateX(3px); }
.wiz-torbox-promo-skip {
  font-size: 0.76rem;
  color: var(--text-muted);
  text-decoration: none;
}
.wiz-torbox-promo-skip:hover { color: var(--text-secondary); text-decoration: underline; }

.wiz-error {
  background: hsla(0, 70%, 50%, 0.12);
  border: 1px solid hsla(0, 70%, 55%, 0.35);
  color: hsl(0, 80%, 75%);
  border-radius: 9px;
  padding: 11px 13px;
  font-size: 0.82rem;
  line-height: 1.45;
  margin-bottom: 14px;
}

/* Per-field validation message, sits directly under the offending input. */
.wiz-field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: hsl(0, 85%, 78%);
}
.wiz-field-error::before {
  content: '!';
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  border-radius: 50%;
  background: hsla(0, 75%, 55%, 0.9);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
}
.wiz-input[aria-invalid="true"] {
  border-color: hsla(0, 75%, 58%, 0.75);
  background: hsla(0, 70%, 50%, 0.07);
}

.wiz-note-danger {
  background: hsla(0, 70%, 50%, 0.12);
  border: 1px solid hsla(0, 70%, 55%, 0.35);
  color: hsl(0, 80%, 80%);
  border-radius: 9px;
  padding: 11px 13px;
  margin-bottom: 12px;
}
.wiz-note-danger strong { color: hsl(0, 85%, 82%); }

.wiz-confirm-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 16px;
  cursor: pointer;
}
.wiz-confirm-check input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}

.wiz-reorder-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  background: rgba(255,255,255,0.02);
}
/* Placement screen rows stack title/arrows, then one action control, then an
   optional warning — a fixed vertical shape so a row never reflows
   differently depending on how much content it carries, unlike the old
   single wrapping flex line. */
.wiz-reorder-row.wiz-placement-row {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.wiz-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.wiz-row-replace-warning {
  padding: 7px 9px;
  font-size: 0.72rem;
  line-height: 1.4;
  color: hsl(0, 80%, 82%);
  background: hsla(0, 70%, 50%, 0.1);
  border: 1px solid hsla(0, 70%, 55%, 0.3);
  border-radius: 7px;
}
.wiz-reorder-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
}
.wiz-placement-tag {
  display: inline-block;
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
}
.wiz-placement-tag.is-new {
  background: var(--accent-glow);
  color: var(--accent-light);
}
.wiz-placement-tag.is-custom {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
}
.wiz-placement-tag.is-updating {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #60a5fa;
}
.wiz-placement-tag.is-updating.has-new-folders {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(52, 211, 153, 0.35);
}
.wiz-placement-tag .wiz-count-incoming.has-new {
  color: #34d399;
}
.wiz-placement-tag.is-excluded {
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
}
.wiz-reorder-row {
  cursor: grab;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wiz-reorder-row.is-dragging {
  opacity: 0.55;
  cursor: grabbing;
  transform: scale(0.98);
  outline: 2px solid var(--accent);
  box-shadow: 0 8px 24px var(--accent-glow);
}
.wiz-reorder-row.is-excluded {
  opacity: 0.6;
}
.wiz-folders-details {
  margin-top: 4px;
}
.wiz-folders-preview-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-light, #a78bfa);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 0;
  user-select: none;
}
.wiz-folders-preview-toggle:hover {
  color: #fff;
}
.wiz-folders-preview-drawer {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-top: 4px;
  max-height: 120px;
  overflow-y: auto;
  word-break: break-word;
}
.wiz-placement-exclude {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
}
.wiz-placement-exclude input {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--accent);
}

.wiz-merge-choice {
  display: flex;
  gap: 6px;
}
.wiz-merge-choice-btn {
  flex: 1;
  padding: 9px 8px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  transition: all var(--transition-fast);
}
.wiz-merge-choice-btn:hover {
  border-color: var(--border-hover);
  color: var(--text-secondary);
}
.wiz-merge-choice-btn.active {
  background: var(--accent-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 10px var(--accent-glow);
}

.wiz-glossary-term {
  border-bottom: 1px dotted var(--text-secondary);
  cursor: help;
  position: relative;
}
.wiz-glossary-term:hover, .wiz-glossary-term:focus {
  border-bottom-color: var(--accent-light);
  outline: none;
}
.wiz-glossary-term:hover::after,
.wiz-glossary-term:focus::after {
  content: attr(data-tip);
  position: absolute;
  top: 130%;
  left: 0;
  max-width: 220px;
  width: max-content;
  padding: 8px 10px;
  border-radius: 8px;
  background: #1a1a1f;
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  z-index: 10;
  white-space: normal;
}

/* Buttons */
.wiz-primary {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 10px;
  background: var(--accent-gradient);
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 15px var(--accent-glow);
}
.wiz-primary:hover { transform: translateY(-1.5px); filter: brightness(1.08); box-shadow: 0 6px 20px var(--accent-glow); }
.wiz-primary:active { transform: translateY(0); }
.wiz-primary:disabled,
.wiz-primary[disabled] {
  opacity: 0.42;
  filter: grayscale(0.35);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  pointer-events: none;
}
.wiz-primary:disabled:hover,
.wiz-primary[disabled]:hover {
  transform: none;
  filter: grayscale(0.35);
  box-shadow: none;
}

.wiz-secondary {
  width: 100%;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.wiz-secondary:hover { background: rgba(255,255,255,0.07); color: #fff; border-color: var(--border-hover); }

.wiz-btn-row { display: flex; gap: 10px; }
.wiz-btn-row .wiz-primary, .wiz-btn-row .wiz-secondary { flex: 1; }

/* Streaming setup — addon list */
.wiz-addon-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.wiz-addon-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
}
.wiz-addon-row:hover { border-color: var(--border-hover); }
.wiz-addon-check { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.wiz-addon-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.wiz-addon-name { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); }
.wiz-addon-note { font-size: 0.76rem; color: var(--text-muted); }
.wiz-addon-remove {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.wiz-addon-remove:hover { background: rgba(255,255,255,0.07); color: var(--warning); }
.wiz-addon-add {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 9px;
}
.wiz-addon-add .wiz-input { margin-top: 0; }
.wiz-addon-add .wiz-input::placeholder { color: var(--text-muted); }
.wiz-addon-add-btn { margin-top: 2px; }

/* Scraper addon config section */
.wiz-scraper-section { display: flex; flex-direction: column; gap: 0; margin-bottom: 14px; }
.wiz-scraper-label { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.wiz-comet-instance-wrap { padding: 6px 0 0 28px; }
.wiz-scraper-customize-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; padding: 6px 0; margin-top: 8px;
  font-size: 0.82rem; color: var(--text-muted); cursor: pointer;
  transition: color 0.15s;
}
.wiz-scraper-customize-toggle:hover { color: var(--text-primary); }
#wiz-scraper-customize { padding: 10px 0 0; display: flex; flex-direction: column; gap: 0; }
.wiz-scraper-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.wiz-scraper-toggles { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.wiz-scraper-toggle-row { display: flex; align-items: center; gap: 8px; font-size: 0.83rem; color: var(--text-secondary); cursor: pointer; }
.wiz-scraper-toggle-row input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
.wiz-scraper-res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 4px; }
.wiz-scraper-res-item { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-secondary); cursor: pointer; }
.wiz-scraper-res-item input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
.wiz-scraper-res-shortcuts { display: flex; gap: 8px; margin-top: 8px; }
.wiz-scraper-shortcut {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-secondary); font-size: 0.78rem; padding: 4px 12px;
  border-radius: 4px; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.wiz-scraper-shortcut:hover { background: rgba(255,255,255,0.13); color: var(--text-primary); }
@media (max-width: 480px) {
  .wiz-scraper-fields { grid-template-columns: 1fr; }
  .wiz-scraper-res-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Step progress (Account → Profile → Streaming) */
/* A progress rail, not a tab strip. The old numbered circles joined by
   connector lines read as a clickable stepper and invited clicks that did
   nothing; flat segments with a label underneath say "here's how far along
   you are" and promise no interaction. */
.wiz-progress {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 22px 4px;
}
.wiz-prog-step {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
  cursor: default;
}
.wiz-prog-bar {
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  transition: background var(--transition-fast);
}
.wiz-prog-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wiz-prog-step.done .wiz-prog-bar { background: var(--success); }
.wiz-prog-step.done .wiz-prog-label { color: var(--text-muted); }
.wiz-prog-step.current .wiz-prog-bar { background: var(--accent-gradient); }
.wiz-prog-step.current .wiz-prog-label { color: var(--text-primary); }
/* Labels alone get cramped on a phone; the bars still carry the progress. */
@media (max-width: 420px) {
  .wiz-prog-label { font-size: 0.66rem; }
}

/* Password show/hide + generic input affordance */
.wiz-input-wrap { position: relative; display: block; }
.wiz-input-wrap .wiz-input { padding-right: 62px; }
.wiz-input-toggle {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 0.78rem; font-weight: 600;
  color: var(--accent); padding: 4px 6px;
}
.wiz-input-toggle:hover { color: #fff; }

/* Live Torbox key status */
.wiz-key-status { margin: -8px 0 14px; font-size: 0.78rem; line-height: 1.45; min-height: 1px; }
.wiz-key-status:empty { margin: 0; }
.wiz-key-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--success); font-weight: 600; }
.wiz-key-ok svg { width: 14px; height: 14px; }
.wiz-key-bad { color: var(--warning); }
.wiz-key-bad code { background: rgba(255,255,255,0.07); padding: 1px 5px; border-radius: 4px; font-size: 0.74rem; }

/* Finish summary checklist */
.wiz-summary { list-style: none; margin: 12px 0 16px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.wiz-summary li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.82rem; color: var(--text-secondary); line-height: 1.3; }
.wiz-summary li strong { color: var(--text-primary); }
.wiz-sum-ok svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--success); margin-top: 1px; }
.wiz-sum-dot { color: var(--warning); flex-shrink: 0; font-weight: 700; font-size: 0.82rem; margin-top: 1px; }
.wiz-nextsteps { margin-top: 12px; font-size: 0.85rem; background: rgba(255,255,255,0.03); padding: 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.06); line-height: 1.4; }
.wiz-nextsteps strong { color: var(--text-primary); }

.wiz-donation-block {
  margin-top: 12px;
  padding: 14px 15px;
  border-radius: 8px;
  background: var(--bg-elevated, rgba(255,255,255,0.03));
  border: 1px solid var(--border);
  text-align: center;
}
.wiz-donation-lede { margin: 0 0 6px; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.4; }
.wiz-donation-sub { margin: 0; font-size: 0.8rem; color: var(--text-muted); line-height: 1.4; }
.wiz-donation-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.wiz-donation-btn { flex: 1; min-width: 140px; text-decoration: none; display: inline-flex; justify-content: center; align-items: center; }
.wiz-tip-confirm { margin-top: 10px; padding: 10px; border-radius: 8px; background: rgba(0,0,0,0.2); font-size: 0.85rem; text-align: left; }
.wiz-inline-code { background: rgba(255,255,255,0.08); padding: 1px 6px; border-radius: 4px; font-size: 0.8rem; }
.wiz-credits-nudge {
  margin: 14px 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.wiz-credits-nudge a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.wiz-credits-nudge a:hover { color: var(--text-primary); }
.wiz-credits-nudge button {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 0.9rem; line-height: 1; padding: 0 2px;
}
.wiz-credits-nudge button:hover { color: var(--text-secondary); }

/* Done state */
.wiz-success-badge {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--success-glow);
  border: 2px solid var(--success);
  color: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.wiz-success-badge svg { width: 24px; height: 24px; }

/* Action Cards for Done Screen */
.wiz-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
  margin-bottom: 16px;
}
.wiz-action-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 10px 6px;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.wiz-action-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.wiz-action-card strong {
  color: var(--text-primary);
  font-size: 0.85rem;
  margin-bottom: 2px;
}
.wiz-action-card span {
  color: var(--text-secondary);
  font-size: 0.75rem;
}
.wiz-done-text {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 22px;
}
.wiz-done-text strong { color: var(--accent-light); }

@media (max-width: 600px) {
  .wizard-overlay { padding: 8px; }
  .wizard-panel {
    width: 100%;
    max-height: calc(100dvh - 16px);
    border-radius: 14px;
  }
  .wiz-header { padding: 16px 16px 12px; }
  .wiz-body { padding: 14px 16px 16px; }
}

/* ==========================================================================
   AIO METADATA SETUP MODAL + TUTORIAL OVERLAY
   Cross-origin iframe, so I can't reach into its DOM. The "tutorial" is just
   floating pointers/tooltips drawn on top, positioned by guesswork about
   where AIO Metadata's own UI tends to put things.
   ========================================================================== */

.aio-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: var(--blur-md);
  z-index: var(--z-aio);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.aio-overlay.open { opacity: 1; visibility: visible; }

.aio-panel {
  width: 920px;
  max-width: 100%;
  height: 680px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-drawer);
  border: 1px solid var(--border-hover);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: scale(0.96);
  transition: transform var(--transition-normal);
}

.aio-overlay.open .aio-panel { transform: scale(1); }

.aio-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.aio-header-text { flex: 1; min-width: 0; }

.aio-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--text-primary);
  line-height: 1.2;
}

.aio-sub {
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--text-muted);
  max-width: 65ch;
}

.aio-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.aio-close:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

.aio-frame-wrap {
  position: relative;
  flex: 1;
  background: #0b0b10;
}

.aio-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Sits over the iframe. pointer-events:none on the container so clicks pass
   through to the iframe everywhere except the pointer dot / tooltip card,
   which opt back in individually. */
.aio-tutorial {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-aio-tutorial);
}


.aio-pointer {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--accent-light);
  box-shadow: 0 0 0 6px var(--accent-glow), 0 0 18px var(--accent-glow);
  animation: aio-pulse 1.6s ease-in-out infinite;
  pointer-events: none;
}

/* Used instead of the dot when I need to outline a whole area (like the full
   sidebar) rather than point at one spot. Hidden by default, shown per-state. */
.aio-region {
  position: absolute;
  display: none;
  border: 2px solid var(--accent-light);
  border-radius: 10px;
  box-shadow: 0 0 0 4px var(--accent-glow), 0 0 16px var(--accent-glow);
  animation: aio-region-pulse 1.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes aio-region-pulse {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}

@keyframes aio-pulse {
  0%, 100% { transform: scale(0.85); opacity: 0.85; }
  50% { transform: scale(1.15); opacity: 1; }
}

.aio-tooltip {
  position: absolute;
  width: 300px;
  max-width: calc(100% - 32px);
  background-color: hsl(240, 10%, 10%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 18px 20px 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
  pointer-events: auto;
}

.aio-tooltip-step {
  font-size: 0.7rem;
  color: var(--text-dark);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.aio-tooltip-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
  line-height: 1.25;
}

.aio-tooltip-body {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 14px;
}

.aio-tooltip-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* The tooltip reuses .wiz-primary/.wiz-secondary so the buttons match my
   wizard's theme, but those are full-width by default — narrow them down so
   two can sit side by side in a 300px card. */
.aio-tooltip-actions .wiz-primary,
.aio-tooltip-actions .wiz-secondary {
  width: auto;
  padding: 9px 16px;
  font-size: 0.82rem;
}

/* A real screenshot of where to click, cropped and zoomed toward the
   relevant spot via object-position. This is the actual fix for tutorial
   accuracy, since it's not a guess like the pointer position is. */
.aio-tooltip-ref {
  position: relative;
  width: 100%;
  height: 130px;
  margin-bottom: 14px;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid var(--border-hover);
  cursor: zoom-in;
  background: var(--bg-elevated);
}

.aio-tooltip-ref img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.aio-tooltip-ref-hint {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: var(--text-secondary);
  font-size: 0.68rem;
  font-weight: 600;
  pointer-events: none;
}

.aio-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-aio-lightbox);
  /* No backdrop-filter here on purpose: this already sits on top of the AIO
     modal's own blurred backdrop, and stacking a second blur layer over a
     live iframe was enough to wedge the renderer in testing. Solid dark is
     plenty given how opaque it already is. */
  background: rgba(5, 5, 8, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.aio-lightbox.open { opacity: 1; visibility: visible; }

.aio-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  min-width: 120px;
  min-height: 80px;
  background: var(--bg-elevated);
  border-radius: 10px;
  border: 1px solid var(--border-hover);
  box-shadow: var(--shadow-lg);
}

.aio-lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.aio-lightbox-close:hover { background: rgba(255, 255, 255, 0.15); }

/* Drag handle strip at the top of the tooltip card, so I can nudge it out of
   the way of whatever it's covering on the real page underneath. Negative
   margins stretch it to the card's edges, matching the card's own padding. */
.aio-tooltip-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  margin: -18px -20px 8px;
  border-radius: 14px 14px 0 0;
  cursor: grab;
  touch-action: none;
}

.aio-tooltip-handle:hover { background: rgba(255, 255, 255, 0.04); }

.aio-tooltip.dragging .aio-tooltip-handle { cursor: grabbing; }

.aio-tooltip-handle-grip {
  width: 32px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.15);
}

/* While dragging I set left/top directly in JS, so the transition that
   normally eases the card in would fight every pointermove update. */
.aio-tooltip.dragging { transition: none; }

/* Positions below are my best read of the real AIO Metadata page from
   screenshots, not pixel-exact (it's a cross-origin iframe, and the page's
   own scroll position shifts what's actually visible). The drag handle above
   is the real fix when a guess is off for someone's screen. */

/* State 1: open Catalogs. The actual sidebar item shifts depending on scroll
   position I can't see, so I outline the whole sidebar instead of pointing
   at one spot, and keep the tooltip centered in the remaining space so it's
   never clipped against the panel's bottom edge. */
.aio-tutorial.state-1 .aio-pointer { display: none; }
.aio-tutorial.state-1 .aio-region { display: block; top: 0; left: 0; width: 24%; height: 100%; }
.aio-tutorial.state-1 .aio-tooltip { top: 50%; left: 64%; transform: translate(-50%, -50%); }

/* State 2: "Start from Scratch" card, right side. Pointer stays right; tooltip
   moves LEFT so it doesn't cover the card the user needs to click. */
.aio-tutorial.state-2 .aio-pointer { top: 47%; left: 80%; transform: translate(-50%, -50%); }
.aio-tutorial.state-2 .aio-tooltip { top: auto; bottom: 3%; left: 5%; transform: none; }

/* State 3: close the "Build Your Catalog" popup, its own X near the top
   right of that popup. */
.aio-tutorial.state-3 .aio-pointer { top: 12%; left: 94%; transform: translate(-50%, -50%); }
.aio-tutorial.state-3 .aio-tooltip { top: calc(12% + 20px); left: 94%; transform: translateX(-70%); }

/* State 4: "Import Setup" button, top right. Pointer stays right; tooltip moves
   LEFT to avoid covering the button row. */
.aio-tutorial.state-4 .aio-pointer { top: 22%; left: 88%; transform: translate(-50%, -50%); }
.aio-tutorial.state-4 .aio-tooltip { top: calc(22% + 20px); left: 5%; transform: none; }

/* State 5: "Import" button, bottom right of the Import Catalog modal. Pointer
   stays bottom-right; tooltip anchors from the BOTTOM so it can never clip off
   the panel edge, and moves left to stay clear of the modal. */
.aio-tutorial.state-5 .aio-pointer { top: 70%; left: 73%; transform: translate(-50%, -50%); }
.aio-tutorial.state-5 .aio-tooltip { top: auto; bottom: 3%; left: 5%; transform: none; }

/* State 6: the Trakt icon (pink checkmark) in the row of service icons. */
.aio-tutorial.state-6 .aio-pointer { top: 30%; left: 36%; transform: translate(-50%, -50%); }
.aio-tutorial.state-6 .aio-tooltip { top: auto; bottom: 3%; left: 5%; transform: none; }

/* State 7: "Authorize with Trakt" + the Token ID box just below it. */
.aio-tutorial.state-7 .aio-pointer { top: 37%; left: 30%; transform: translate(-50%, -50%); }
.aio-tutorial.state-7 .aio-tooltip { top: auto; bottom: 3%; left: 5%; transform: none; }

/* State 8: the Trakt Integration box's own close X, top right of that box.
   Tightened from -82% to -75% to prevent the right edge clipping past the panel. */
.aio-tutorial.state-8 .aio-pointer { top: 13%; left: 95%; transform: translate(-50%, -50%); }
.aio-tutorial.state-8 .aio-tooltip { top: calc(13% + 20px); left: 95%; transform: translateX(-75%); }

/* State 9: "Configuration" in the sidebar, then "Save Configuration".
   Anchored from the bottom so the tooltip can't clip past the panel edge. */
.aio-tutorial.state-9 .aio-pointer { top: 68%; left: 16%; transform: translate(-50%, -50%); }
.aio-tutorial.state-9 .aio-tooltip { top: auto; bottom: 3%; right: 5%; left: auto; transform: none; }

/* State 10: the "Create Password" box, centered. */
.aio-tutorial.state-10 .aio-pointer { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.aio-tutorial.state-10 .aio-tooltip { top: calc(50% + 20px); left: 50%; transform: translateX(-50%); }

/* State 11: the "Install URL" field, further down the Configuration page. */
.aio-tutorial.state-11 .aio-pointer { top: 80%; left: 88%; transform: translate(-50%, -50%); }
.aio-tutorial.state-11 .aio-tooltip { top: calc(80% + 20px); left: 88%; transform: translateX(-78%); }


@media (max-width: 640px) {
  .aio-overlay { padding: 0; }
  .aio-panel { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  .aio-header { padding: 16px 16px 12px; }

  /* Collapse every state's tooltip to the same bottom-anchored spot on a
     small screen, so it never overflows or clips. The pointer dot stays put.
     Dragging still works from here too, this is just the starting position.
     The [class*="state-"] attribute selector matches every state and keeps
     this rule's specificity equal to the per-state desktop rules above, so
     it actually overrides them instead of silently losing on specificity. */
  .aio-tutorial[class*="state-"] .aio-tooltip {
    top: auto;
    right: auto;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    width: calc(100% - 32px);
  }
}

/* ==========================================================================
   NUVIO TV / MOBILE EMULATOR  (Preview view)
   A faithful mock of the real Nuvio home screen — hero carousel, catalog
   rows, contentCard styling, TV focus engine, and a device-frame toggle.
   ========================================================================== */

/* Preview: full-bleed — hero fills from top edge, emulator handles its own scroll.
   overflow-y:auto (not hidden) so a viewport shorter than the fixed-height
   Phone frame can still pan down to reveal the rest of the device. */
.top-bar.mode-preview ~ .content-canvas {
  padding: 0;
  overflow-y: auto;
}

.nv-emulator {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 16px;
  /* default card metrics; per-device + per-layout overrides below */
  --nv-poster-w: 158px;
  --nv-land-w: 280px;
  --nv-gap: 22px;
  --nv-radius: 14px;
}
.device-tv .nv-emulator,
.nv-emulator.device-tv { gap: 0; }

/* ---- Preview bar — floating bottom pill ---- */
.nv-preview-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-control-bar);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0 20px;
  height: 56px;
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
.nv-preview-content {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nv-preview-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nv-preview-actions::before {
  content: '';
  display: block;
  width: 1px;
  height: 24px;
  background: rgba(255,255,255,0.1);
  margin-right: 2px;
  flex-shrink: 0;
}
.nv-preview-secondary {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nv-preview-secondary::before {
  content: '';
  display: block;
  width: 1px;
  height: 24px;
  background: rgba(255,255,255,0.1);
  margin-right: 2px;
  flex-shrink: 0;
}
/* Collapsed-toolbar entry point — only shown on phones (see mobile block below) */
.nv-more-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.nv-more-toggle:hover { background: rgba(255,255,255,0.08); color: #fff; }
.nv-more-toggle.active { background: var(--accent); color: var(--on-secondary); border-color: transparent; }
.nv-layout-tag {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
}
.nv-mini-btn { height: 34px; padding: 0 14px; font-size: 0.8rem; }

.nv-device-toggle {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.nv-device-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.nv-device-opt svg { width: 15px; height: 15px; }
.nv-device-opt:hover { color: var(--text-secondary); }
.nv-device-opt.active {
  background: var(--accent);
  color: var(--on-secondary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* ---- Device frame ---- */
.nv-frame {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
/* TV: frameless full-bleed — the page IS the screen */
.device-tv .nv-frame {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  padding: 0;
}
.nv-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
}
/* TV screen: no bezel, no border, fill the frame */
.device-tv .nv-screen {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.nv-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  padding-top: 10px;
  background: linear-gradient(to bottom, transparent 0%, rgba(5,5,8,0.6) 18%);
}

.device-tv .nv-scroll { padding-bottom: 80px; }
.device-tv .nv-statusbar,
.device-tv .nv-tabbar { display: none; }

/* Clears the floating .nv-preview-bar on the desktop "Phone" toggle too, not
   just real narrow viewports (see the max-width:600px rule further down,
   which only fires on actual phones). */
.device-mobile .nv-scroll { padding-bottom: 100px; }

/* Mobile: centered phone with bezel, status bar + bottom tabs.
   The phone is a fixed tall device that scrolls internally, so the emulator
   grows to its height and the canvas scrolls to reveal the whole handset. */
.nv-emulator.device-mobile { height: auto; min-height: 100%; }
.device-mobile .nv-frame { flex: 0 0 auto; align-items: flex-start; padding: 6px 0 20px; }
.device-mobile .nv-screen {
  width: var(--mobile-frame-width);
  max-width: 100%;
  height: var(--mobile-frame-height);
  border-radius: var(--mobile-frame-radius);
  border: var(--mobile-frame-bezel) solid #000;
  box-shadow: 0 30px 70px rgba(0,0,0,0.7), 0 0 0 2px rgba(255,255,255,0.06);
}
.device-mobile { --nv-poster-w: 118px; --nv-land-w: 208px; --nv-gap: 12px; }

/* A real phone turned sideways is short and wide — the fixed-height frame
   would otherwise overflow and force scrolling just to see the whole
   "device". Scale it to fit the viewport height instead. Gated on actual
   short+wide viewports so the desktop "Phone" preview toggle (tall window)
   is untouched. */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .device-mobile .nv-frame { padding: 6px 0; }
  .device-mobile .nv-screen {
    width: auto;
    height: min(var(--mobile-frame-height), 86vh);
    aspect-ratio: 380 / 760;
  }
}

/* ---- Mobile status bar ---- */
.nv-statusbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
}
.nv-status-icons { display: flex; align-items: center; gap: 6px; }

/* ---- Mobile bottom tab bar ---- */
.nv-tabbar {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 6px 14px;
  background: rgba(10,10,14,0.9);
  border-top: 1px solid var(--border);
  backdrop-filter: var(--blur);
}
.nv-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 0.6rem;
  color: var(--text-muted);
}
.nv-tab svg { width: 20px; height: 20px; }
.nv-tab.active { color: var(--accent-light); }

/* ---- Hero carousel ---- */
.nv-hero {
  position: relative;
  flex: 0 0 auto;          /* pinned pane — never scrolls away */
  height: 44%;
  min-height: 248px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.device-tv .nv-hero { height: 44vh; min-height: 260px; max-height: 440px; }
.device-mobile .nv-hero { height: 42%; min-height: 300px; }
.nv-hero-bg {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 68%;
  background-size: cover;
  background-position: center right;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.4) 15%, #000 40%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.4) 15%, #000 40%);
  transform: scale(1.02);
}
.device-mobile .nv-hero-bg {
  inset: 0;
  width: 100%;
  background-position: center 18%;
  -webkit-mask-image: none;
  mask-image: none;
}
.nv-hero-scrim {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, var(--bg-color) 0%, rgba(0,0,0,0.2) 18%, transparent 50%),
    linear-gradient(to right, var(--bg-color) 0%, var(--bg-color) 26%, rgba(0,0,0,0.3) 42%, transparent 70%);
}
.device-mobile .nv-hero-scrim {
  background:
    linear-gradient(to top, var(--bg-color) 2%, rgba(0,0,0,0.35) 45%, transparent 75%),
    linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.25) 50%, transparent 80%);
}
.nv-hero-content {
  position: relative;
  z-index: 2;
  padding: 40px 48px 36px;
  max-width: 500px;
}
.device-tv .nv-hero-content {
  padding: 0 52px 32px;
  max-width: 520px;
}
.device-mobile .nv-hero-content { padding: 28px 24px 22px; text-align: center; margin: 0 auto; }
.nv-hero-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 12px;
}
.nv-hero-logo {
  display: block;
  max-width: 240px;
  max-height: 80px;
  width: auto;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.85));
  margin-bottom: 10px;
}
.device-mobile .nv-hero-logo { max-width: 190px; max-height: 78px; margin: 0 auto 10px; object-position: center; }
.nv-hero-title {
  font-family: 'Outfit', sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 14px;
  text-shadow: 0 4px 16px rgba(0,0,0,0.8);
}
.nv-hero-meta { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; }
.device-mobile .nv-hero-meta { justify-content: center; }
.nv-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-light); flex-shrink: 0; }
.nv-hero-meta #nv-hero-meta { color: var(--accent-light); font-weight: 700; font-size: 0.82rem; }
.nv-hero-desc {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 10px 0 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nv-hero-actions { display: flex; gap: 12px; }
.device-mobile .nv-hero-actions { justify-content: center; }
.nv-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--spring), box-shadow var(--spring), background var(--transition-fast);
}
.nv-hero-play { background: #fff; color: #0d0d0d; }
.nv-hero-info { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.2); }
.nv-hero-btn:hover { transform: scale(1.04); }
.nv-hero-btn.is-focused {
  transform: scale(1.08);
  box-shadow: 0 0 0 3px var(--bg-color), 0 0 0 5px var(--secondary-color);
}

/* ---- Catalog rows ---- */
.nv-row { padding: 6px 0; }
.nv-row-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 48px 12px;
}
.device-mobile .nv-row-header { padding: 0 18px 10px; }
.nv-row-icon { font-size: 1.1rem; }
.nv-row-title {
  font-family: 'Outfit', sans-serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.device-mobile .nv-row-title { font-size: 18px; }
.nv-row-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  background: rgba(255,255,255,0.06);
  padding: 2px 9px;
  border-radius: 999px;
}
.nv-track {
  display: flex;
  gap: var(--nv-gap);
  overflow-x: auto;
  overflow-y: hidden;
  /* generous vertical padding so a focused card's scale + ring isn't clipped */
  padding: 16px 48px 22px;
  scrollbar-width: none;
}
.nv-track::-webkit-scrollbar { display: none; }
.device-mobile .nv-track { padding: 6px 18px 12px; }

/* ---- Content card ---- */
.nv-card {
  position: relative;
  flex: 0 0 auto;
  border-radius: var(--nv-radius);
  overflow: hidden;
  cursor: pointer;
  background: var(--card-bg);
  /* Inset box-shadow instead of a real border: the hover/focus state below
     swaps the whole box-shadow list anyway, so this avoids animating two
     separate paint properties (border-color + box-shadow) for one ring. */
  box-shadow: inset 0 0 0 1px var(--border);
  transition: transform var(--spring), box-shadow var(--spring);
}
.nv-card.shape-landscape { width: var(--nv-land-w); aspect-ratio: 16 / 10; }
.nv-card.shape-poster    { width: var(--nv-poster-w); aspect-ratio: 2 / 3; }
.nv-card.shape-square    { width: var(--nv-poster-w); aspect-ratio: 1 / 1; }
.nv-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nv-card-gif {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--transition-normal);
}
.nv-card:hover .nv-card-gif,
.nv-card.is-focused .nv-card-gif { opacity: 1; }
.nv-card-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.72) 100%);
}
html[data-theme="light"] .nv-card-gradient {
  display: none;
}
.nv-card-logo {
  position: absolute;
  left: 50%; bottom: 12%;
  transform: translateX(-50%);
  max-width: 72%; max-height: 34%;
  object-fit: contain;
  z-index: 2;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8));
}
.nv-card-title {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 2;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9);
}
.nv-card-meta {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 3;
  font-size: 0.64rem;
  font-weight: 800;
  color: #fff;
  background: rgba(0,0,0,0.82);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  padding: 2px 6px;
  backdrop-filter: blur(4px);
}
.nv-card.is-featured { box-shadow: inset 0 0 0 1px var(--accent); }

/* Focus / hover treatment (Nuvio spring). Kept modest so the scaled card
   doesn't collide with its neighbours, and lifted above them via z-index. */
.nv-card:hover,
.nv-card.is-focused {
  transform: scale(1.05);
  z-index: 20;
  box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--secondary-color), 0 14px 34px rgba(0,0,0,0.65);
}

/* Inline curation actions */
.nv-card-actions {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 5;
  display: flex;
  gap: 6px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.nv-card:hover .nv-card-actions,
.nv-card.is-focused .nv-card-actions { opacity: 1; transform: translateY(0); }
.nv-card-act {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.55);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.nv-card-act svg { width: 13px; height: 13px; }
.nv-card-act:hover { transform: scale(1.12); background: rgba(0,0,0,0.8); }
.nv-card-act.act-feature.on { background: var(--accent); border-color: var(--accent); }
.nv-card-act.act-feature.on svg { fill: currentColor; }
.nv-card-act.act-toggle:hover { background: var(--warning); border-color: var(--warning); }

/* Folder not in the collection: full color, accent "add" button signals it's available. */
.nv-card.nv-off .nv-card-img { opacity: 1; filter: none; }
.nv-card.nv-off .act-toggle { background: var(--accent); border-color: var(--accent); color: var(--on-secondary); }
.nv-card.nv-off .act-toggle:hover { background: var(--accent-light); border-color: var(--accent-light); }
/* Keep the add/remove button always visible on dimmed cards so it's discoverable */
.nv-card.nv-off .nv-card-actions { opacity: 1; transform: none; }

/* View-mode selector in the preview bar */
.nv-viewmode-combo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
}
.nv-viewmode-combo .topbar-select { border: none; background: transparent; padding: 0; height: auto; }

/* Reorder toggle (preview bar) */
.nv-reorder-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.nv-reorder-toggle:hover { color: var(--text-primary); border-color: var(--border-hover); }
.nv-reorder-toggle.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-secondary);
  box-shadow: 0 4px 14px var(--accent-glow);
}

/* Persistent indicator shown in the top bar while reorderMode is active,
   regardless of Browse vs Preview view (the subtitle text is browse-only). */
.reorder-mode-banner {
  position: absolute;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--accent-glow);
  border: 1px solid var(--accent);
  color: var(--accent-light);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  z-index: var(--z-reorder-banner);
  pointer-events: none;
}

.reorder-mode-banner[hidden] {
  display: none;
}

@media (max-width: 600px) {
  .reorder-mode-banner {
    font-size: 0.7rem;
    padding: 5px 10px;
    white-space: normal;
    max-width: calc(100vw - 32px);
    text-align: center;
    border-radius: 10px;
  }
}

/* Per-row quick-sort menu */
.nv-row-sort { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
.nv-row-sort .nv-row-sort-select {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 4px 8px;
  font-size: 0.76rem;
  color: var(--text-secondary);
}

/* Card reorder arrows (shown in reorder mode, always visible) */
.nv-card-actions.nv-card-reorder { opacity: 1; transform: none; }
.nv-card-reorder .reorder-arrows { display: flex; flex-direction: column; gap: 4px; }
.nv-card-reorder .reorder-arrow {
  width: 27px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.65);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.nv-card-reorder .reorder-arrow svg { width: 13px; height: 13px; }
.nv-card-reorder .reorder-arrow:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
.nv-card-reorder .reorder-arrow:disabled { opacity: 0.35; cursor: default; }

/* ---- "Inside this folder" layout demo (detail sheet) ----
   The View Mode controls how a folder's own catalogs lay out when opened —
   demonstrated here, not on the home-screen cards. */
.nv-detail-inside { margin: 6px 0 22px; }
.nv-detail-inside-head {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 12px;
}
.nv-inside-hint { color: var(--text-muted); font-weight: 500; font-size: 0.76rem; }
.nv-faux-stage {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  padding: 14px;
}
.nv-faux-row { margin-bottom: 14px; }
.nv-faux-row:last-child { margin-bottom: 0; }
.nv-faux-row-label { display: block; font-size: 0.74rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 7px; }
.nv-faux-strip { display: flex; gap: 8px; overflow: hidden; }
.nv-faux-strip .nv-faux-tile { flex: 0 0 auto; width: 62px; }
.nv-faux-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.nv-faux-tab { font-size: 0.74rem; font-weight: 600; color: var(--text-muted); padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border); }
.nv-faux-tab.on { color: var(--on-secondary); background: var(--accent); border-color: var(--accent); }
.nv-faux-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
/* Generic shimmer placeholder — reusable anywhere a loading tile is needed,
   not just the "inside this folder" demo grid it originally shipped with. */
.skeleton-block,
.nv-faux-tile {
  background: linear-gradient(100deg, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.04) 70%);
  background-size: 220% 100%;
  animation: nv-shimmer 1.6s ease-in-out infinite;
}

.nv-faux-tile {
  aspect-ratio: 2 / 3;
  border-radius: 7px;
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}
.nv-faux-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.nv-faux-tile img.loaded { opacity: 1; }
@keyframes nv-shimmer {
  0% { background-position: 130% 0; }
  100% { background-position: -130% 0; }
}
@media (max-width: 600px) { .nv-faux-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---- Detail sheet ---- */
.nv-detail-overlay {
  position: fixed; inset: 0;
  z-index: var(--z-detail);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: var(--blur-sm);
  opacity: 0;
  transition: opacity var(--transition-normal);
}
.nv-detail-overlay.open { opacity: 1; }
.nv-detail-sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  max-height: 88vh;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--border-hover);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-lg);
  transform: scale(0.96);
  transition: transform var(--transition-normal);
}
.nv-detail-overlay.open .nv-detail-sheet { transform: scale(1); }
.nv-detail-banner { position: relative; flex: 0 0 auto; height: 200px; }
.nv-detail-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.nv-detail-scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.15), var(--bg-elevated) 96%); }
.nv-detail-close {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 34px; height: 34px; border-radius: 50%;
  border: none; background: rgba(0,0,0,0.55); color: #fff;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
/* The body scrolls, so folders with many sources (e.g. Streaming) are fully reachable */
.nv-detail-scrollable {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 32px 28px;
  margin-top: -56px;
  position: relative;
  z-index: 2;
}
.nv-detail-logo { display: block; max-width: 260px; max-height: 100px; object-fit: contain; object-position: left; margin-bottom: 12px; }
.nv-detail-title { font-family: 'Outfit', sans-serif; font-size: 2rem; font-weight: 800; margin-bottom: 12px; }
.nv-detail-section-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: 10px 0 8px; }
.nv-faux-note { font-size: 0.74rem; color: var(--text-muted); margin-top: 10px; font-style: italic; }
.nv-detail-meta { color: var(--accent-light); font-weight: 600; font-size: 0.86rem; margin-bottom: 12px; }
.nv-detail-desc { color: var(--text-secondary); line-height: 1.6; margin-bottom: 18px; }
.nv-detail-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.nv-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
}
.nv-chip.off { opacity: 0.45; }
.nv-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.nv-chip-dot.provider-trakt { background: #ed1c24; }
.nv-chip-dot.provider-tmdb { background: #01b4e4; }
.nv-detail-empty { color: var(--text-muted); font-size: 0.85rem; }
.nv-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 600px) {
  .nv-row-header, .nv-track { padding-left: 18px; padding-right: 18px; }
  .nv-hero-content { padding: 28px 22px 22px; }
  .nv-hero-title { font-size: 1.8rem; }

  /* On a real phone, the simulated bezel + fake status bar is a phone
     drawn inside your actual phone — pure clutter. Let the preview fill
     the real screen edge-to-edge; the visitor's own OS chrome already
     does this job. (Desktop's "Phone" preview toggle is untouched —
     this query only fires at real narrow viewports.) */
  .device-mobile .nv-frame { padding: 0; }
  .device-mobile .nv-screen {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .device-mobile .nv-statusbar { display: none; }

  /* Reserve room so the last row of folders never sits behind the bar. */
  .device-mobile .nv-scroll { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }

  /* The preview's own bottom bar used to pack 6 controls (device toggle,
     reorder, editor view, view-mode select, help, Download, Send to
     Nuvio) into one row that didn't fit a phone width. It now collapses
     entirely behind a single FAB (#preview-fab) — tapping it reveals
     ⋯ / Download / Send to Nuvio, and the ⋯ button still nests the
     device/reorder/editor-view/layout/help row one level deeper. */
  .nv-preview-bar {
    left: auto;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    transform: none;
    width: auto;
    height: auto;
    display: block;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nv-preview-content {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    position: absolute;
    right: 0;
    bottom: 64px;
    background: hsla(240, 10%, 6%, 0.78);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 10px 14px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  }
  .nv-preview-bar.open .nv-preview-content { display: flex; }
  .nv-preview-actions {
    width: 100%;
    margin-left: 0;
    justify-content: center;
  }
  .nv-more-toggle { display: inline-flex; }
  .nv-preview-secondary {
    display: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .nv-preview-secondary.open { display: flex; }
  .nv-preview-secondary .nv-reorder-toggle,
  .nv-preview-secondary .nv-help-btn,
  .nv-preview-secondary .nv-device-toggle { min-height: 40px; }
  #preview-fab { display: flex; }
}

/* ==========================================================================
   UX POLISH — carousel dots, toggle pulse, search clear/highlight,
   shortcuts panel, empty-collection hint, category progress rings
   ========================================================================== */

/* ---- Search: clear button + highlight ---- */
.search-clear-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.search-clear-btn svg { width: 12px; height: 12px; }
.search-clear-btn:hover { background: rgba(255,255,255,0.16); color: var(--text-primary); }
.search-wrapper.has-value .search-field { padding-right: 36px; }
.search-wrapper.has-value .search-clear-btn { display: inline-flex; }
.card-text-title mark {
  background: rgba(251, 191, 36, 0.38);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
}

/* ---- Hero carousel dots ---- */
.nv-hero-dots {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.device-mobile .nv-hero-dots { justify-content: center; }
.nv-hero-dot {
  position: relative;
  width: 8px; height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast), width var(--transition-normal);
}
.nv-hero-dot::after {
  content: '';
  position: absolute;
  inset: -12px;
}
.nv-hero-dot:hover { background: rgba(255,255,255,0.6); transform: scale(1.2); }
.nv-hero-dot.active {
  width: 22px;
  border-radius: 999px;
  background: var(--accent-light);
}

/* ---- Card add/remove pulse ---- */
@keyframes cardPulseIn {
  0% { transform: scale(1); }
  45% { transform: scale(1.07); }
  100% { transform: scale(1.05); }
}
@keyframes cardPulseOut {
  0% { transform: scale(1.05); }
  40% { transform: scale(0.94); }
  100% { transform: scale(1); }
}
/* The pulse only needs to run while hovered/focused (cards sit at scale 1.05
   then); override that transform with a short keyframe and let it settle back. */
.nv-card.card-added { animation: cardPulseIn 0.36s cubic-bezier(0.16, 1, 0.3, 1); }
.nv-card.card-removed { animation: cardPulseOut 0.36s cubic-bezier(0.16, 1, 0.3, 1); }

/* ---- Stat counter bump (bottom control pill) ---- */
@keyframes statBump {
  0% { transform: translateY(0); }
  40% { transform: translateY(-3px); color: var(--accent-light); }
  100% { transform: translateY(0); }
}
.control-stat-val { display: inline-block; }
.control-stat-val.stat-bumped { animation: statBump 0.34s ease; }

/* ---- Keyboard shortcuts panel ---- */
.shortcut-overlay {
  position: fixed; inset: 0;
  z-index: var(--z-shortcuts);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: var(--blur-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}
.shortcut-overlay.open { opacity: 1; pointer-events: auto; }
.shortcut-panel {
  width: min(460px, 100%);
  border-radius: 18px;
  border: 1px solid var(--border-hover);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-lg);
  transform: scale(0.96);
  transition: transform var(--transition-normal);
  overflow: hidden;
}
.shortcut-overlay.open .shortcut-panel { transform: scale(1); }
.shortcut-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--border);
}
.shortcut-title { font-family: 'Outfit', sans-serif; font-size: 1.2rem; font-weight: 700; }
.shortcut-close-btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: none; background: rgba(255,255,255,0.06); color: var(--text-secondary);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  transition: background var(--transition-fast);
}
.shortcut-close-btn:hover { background: rgba(255,255,255,0.14); color: #fff; }
.shortcut-grid { padding: 12px 24px 22px; }
.shortcut-row {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.shortcut-row:last-child { border-bottom: none; }
.shortcut-keys { display: flex; align-items: center; gap: 5px; flex: 0 0 132px; }
.shortcut-or { font-size: 0.72rem; color: var(--text-muted); }
.shortcut-desc { font-size: 0.86rem; color: var(--text-secondary); }
kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px;
  padding: 0 7px;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem; font-weight: 600;
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-hover);
  border-bottom-width: 2px;
  border-radius: 6px;
}

/* ---- Support & Tips modal ---- */
.support-panel {
  max-width: 440px;
}
.support-modal-body {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.support-modal-lede {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  margin: 0;
}
.support-modal-sub {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}
.support-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.support-modal-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
}
.support-nuvio-btn {
  background: var(--accent);
  color: var(--on-secondary);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.support-nuvio-btn:hover {
  filter: brightness(1.1);
  color: #fff;
}
.support-gate-box {
  margin-top: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.25);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.support-gate-prompt {
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--text-primary);
  margin: 0;
}
.support-gate-link {
  color: var(--accent-light, #a78bfa);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.support-gate-link:hover {
  color: #fff;
}

/* Support & Credits are now also reachable from the title screen (before the
   picker chrome exists), so they need to render above it, not at the
   picker-scoped .shortcut-overlay z-index. */
#support-overlay, #credits-overlay {
  z-index: var(--z-above-title);
}

/* Credits page */
.credits-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.credits-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
}
.credits-name {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary);
}
.credits-role {
  font-size: 0.76rem;
  color: var(--text-secondary);
}
.credits-note {
  font-size: 0.74rem;
  color: var(--text-muted);
}

/* Streaming Services tier chooser — opens from inside the picker (after a
   category is selected), never from the title screen, so it stays at the
   default .shortcut-overlay z-index rather than var(--z-above-title). */
.streaming-tier-panel {
  max-width: 460px;
}
.streaming-tier-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.streaming-tier-option {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition-fast);
}
.streaming-tier-option:hover,
.streaming-tier-option:focus-visible {
  border-color: var(--border-hover);
  background: rgba(255, 255, 255, 0.06);
}
.streaming-tier-option-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}
.streaming-tier-option-sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Title-screen footer links (Support, Credits) */
.title-screen-foot-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.title-screen-foot-links .title-walkthrough-link { margin-top: 0; }
.title-foot-link-sep {
  color: var(--text-muted);
  font-size: 0.8rem;
  opacity: 0.5;
}

/* "?" help button in the preview bar */
.nv-help-btn {
  width: 30px; height: 30px;
  flex: 0 0 auto;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.nv-help-btn:hover { background: var(--accent-glow); border-color: var(--accent); color: var(--text-primary); }

/* ---- Empty-collection hint banner (preview) ---- */
.nv-empty-hint {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 4px 48px 8px;
  padding: 16px 20px;
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(99,102,241,0.14), rgba(99,102,241,0.04));
  backdrop-filter: blur(8px);
}
.device-mobile .nv-empty-hint { margin: 4px 18px 8px; padding: 14px 16px; gap: 12px; }
.nv-empty-hint > svg { width: 26px; height: 26px; color: var(--accent-light); flex: 0 0 auto; }
.nv-empty-hint-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.nv-empty-hint-text strong { font-family: 'Outfit', sans-serif; font-size: 0.96rem; font-weight: 700; }
.nv-empty-hint-text span { font-size: 0.82rem; color: var(--text-secondary); }
.nv-empty-hint-btn {
  flex: 0 0 auto;
  padding: 9px 16px;
  border-radius: 9px;
  border: none;
  background: var(--accent);
  color: var(--on-secondary);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.nv-empty-hint-btn:hover { background: var(--accent-light); transform: translateY(-1px); }
@media (max-width: 600px) {
  .nv-empty-hint { flex-wrap: wrap; }
  .nv-empty-hint-btn { width: 100%; }
}

/* ---- Sidebar category progress ring ---- */
.cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cat-ring {
  width: 16px; height: 16px;
  flex: 0 0 auto;
  transform: rotate(-90deg);   /* start the fill at 12 o'clock */
}
.cat-ring-track {
  fill: none;
  stroke: rgba(255,255,255,0.12);
  stroke-width: 3;
}
.cat-ring-fill {
  fill: none;
  stroke: var(--accent-light);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--transition-normal) ease, stroke var(--transition-fast);
}
.cat-ring.full .cat-ring-fill { stroke: var(--success); }

/* ===== Title-screen sub-actions row ===== */
.title-screen-actions-sub { margin-top: 18px; }

/* ===== Quick (KISS) editor ===== */
.se-overlay {
  position: fixed; inset: 0; z-index: var(--z-quick-editor);
  background: var(--bg-elevated);
  display: none;
  flex-direction: column;
}
.se-overlay.open { display: flex; }

.se-topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-sidebar);
  flex-wrap: wrap;
}
.se-back {
  background: none; border: 1px solid var(--border); color: var(--text-secondary);
  border-radius: 8px; padding: 7px 12px; font: inherit; font-weight: 600; cursor: pointer;
}
.se-back:hover { color: #fff; border-color: var(--border-hover); }
.se-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.se-search {
  flex: 1; min-width: 160px;
  padding: 9px 13px; font: inherit; font-size: 0.9rem;
  color: var(--text-primary); background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: 9px; outline: none;
}
.se-search:focus { border-color: var(--accent); }
.se-topbar-actions { display: flex; align-items: center; gap: 8px; }
.se-mini-btn {
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-secondary);
  border-radius: 7px; padding: 6px 11px; font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
.se-mini-btn:hover { color: #fff; border-color: var(--border-hover); }
.se-send-btn {
  border: none; border-radius: 9px; padding: 9px 18px;
  background: var(--accent); color: var(--on-secondary);
  font: inherit; font-weight: 700; cursor: pointer;
}
.se-send-btn:hover { filter: brightness(1.1); box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4); }

.se-body { flex: 1; display: flex; min-height: 0; }
.se-collection { flex: 1; overflow-y: auto; padding: 16px 20px 60px; }
.se-settings {
  width: 360px; flex-shrink: 0; overflow-y: auto;
  padding: 16px 20px 60px;
  border-left: 1px solid var(--border);
  background: var(--bg-sidebar);
}

.se-cat { margin-bottom: 14px; }
.se-cat-head {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 6px; position: sticky; top: 0; z-index: 1;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}
.se-cat-name { font-weight: 700; font-size: 0.92rem; color: var(--text-primary); flex: 1; }
.se-cat-count { font-size: 0.78rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.se-folders { padding-top: 4px; }
.se-folder { border-bottom: 1px solid var(--border); }
.se-folder-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; transition: background var(--transition-fast); }
.se-folder-row:hover { background: rgba(255,255,255,0.04); }
.se-folder-main { display: flex; align-items: center; gap: 10px; flex: 1; cursor: pointer; min-width: 0; }
.se-folder-check, .se-source-check, .se-addon-check { width: 15px; height: 15px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
.se-folder-title { font-size: 0.88rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.se-folder.on .se-folder-title { color: var(--text-primary); }
.se-folder-count { font-size: 0.76rem; color: var(--text-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.se-folder-expand { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.8rem; padding: 2px 6px; flex-shrink: 0; }
.se-folder-expand:hover { color: var(--accent); }
.se-sources { padding: 2px 0 8px 32px; display: flex; flex-direction: column; gap: 4px; }
.se-source { display: flex; align-items: center; gap: 9px; font-size: 0.82rem; color: var(--text-secondary); cursor: pointer; }
.se-source-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.se-source-meta { font-size: 0.72rem; color: var(--text-muted); flex-shrink: 0; }
.se-empty { color: var(--text-muted); padding: 30px; text-align: center; }

/* settings panel */
.se-sec-title { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em; color: var(--text-dark); margin: 18px 0 10px; }
.se-sec-title:first-child { margin-top: 0; }
/* Plain-language gloss on each group heading, so "Scrapers" or
   "Recommendations" doesn't have to carry the explanation on its own. */
.se-sec-sub { font-weight: 400; color: var(--text-dark); opacity: 0.75; }

/* Basic / Advanced switch at the top of the settings panel. */
.se-mode-toggle {
  display: flex;
  gap: 4px;
  padding: 3px;
  margin-bottom: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 9px;
}
.se-mode-btn {
  flex: 1;
  padding: 7px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.se-mode-btn:hover { color: var(--text-secondary); }
.se-mode-btn.active { background: var(--accent-gradient); color: #fff; }
.se-mode-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Key field + its inline Test button. */
.se-input-wrap { position: relative; display: block; }
.se-input-wrap .se-input { padding-right: 58px; }
.se-key-test {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  padding: 4px 8px;
  border: 1px solid var(--border-hover);
  border-radius: 6px;
  background: var(--bg-elevated);
  color: var(--accent-light);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.se-key-test:hover { color: #fff; border-color: var(--accent); }
.se-key-test:disabled { opacity: 0.6; cursor: default; }
.se-key-test:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.se-advanced-block code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.07);
  font-size: 0.92em;
}
.se-field { display: block; margin-bottom: 12px; font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); }
.se-field-label { display: block; margin-bottom: 6px; }
.se-hint { font-weight: 400; color: var(--text-muted); }
.se-input {
  margin-top: 6px; width: 100%; padding: 9px 11px; font: inherit; font-size: 0.86rem;
  color: var(--text-primary); background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: 8px; outline: none;
}
.se-input:focus { border-color: var(--accent); }
.se-avatar-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.se-avatar-wrap { margin-bottom: 12px; }
.se-avatar-row .se-avatar-wrap { margin-bottom: 0; }
.se-avatar-preview { display: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); }
.se-key-status { font-size: 0.76rem; margin: -6px 0 12px; }
.se-note { font-size: 0.76rem; color: var(--text-muted); line-height: 1.45; }
.se-settings-intro { font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; margin: 0 0 14px; }
.se-genre-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; max-height: 220px; overflow-y: auto; }
.se-genre-row { display: flex; align-items: center; gap: 9px; font-size: 0.84rem; color: var(--text-secondary); cursor: pointer; }
.se-dedup-actions { display: flex; gap: 8px; margin: 6px 0 4px; }
.se-dedup-actions .se-mini-btn { flex: 1; padding: 8px 10px; }
.se-addon-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.se-addon { display: flex; align-items: center; gap: 9px; font-size: 0.84rem; color: var(--text-secondary); }
.se-addon-name { flex: 1; }
.se-addon-rm { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.05rem; line-height: 1; }
.se-addon-rm:hover { color: var(--warning); }
.se-addon-add { display: flex; gap: 6px; margin-top: 6px; }
.se-addon-add .se-input { margin-top: 0; }

@media (max-width: 760px) {
  .se-body { flex-direction: column; }
  .se-settings { width: auto; border-left: none; border-top: 1px solid var(--border); }
}

/* Narrow-phone tightening — the 760px breakpoint alone left the topbar's
   search + 3 action buttons cramped below ~480px wide. */
@media (max-width: 480px) {
  .se-topbar { padding: 10px 12px; gap: 8px; }
  .se-title { display: none; }
  .se-search { min-width: 0; flex-basis: 100%; order: 3; }
  .se-topbar-actions { width: 100%; justify-content: space-between; }
  .se-collection, .se-settings { padding: 12px 14px 50px; }
}

/* ==========================================================================
   UX OVERHAUL — v22 additions
   ========================================================================== */

/* #1 — Nuvio one-liner explainer */
.title-explainer {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin: -20px auto 28px;
  max-width: 380px;
  text-align: center;
  line-height: 1.5;
}

/* C3 — "what's new since your last visit" dismissible banner */
.title-changelog {
  position: relative;
  text-align: left;
  max-width: 400px;
  margin: -8px auto 24px;
  padding: 14px 34px 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-elevated, rgba(255,255,255,0.05));
}
.title-changelog-head {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.title-changelog-list {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.6;
}
.title-changelog-dismiss {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.title-changelog-dismiss:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
}

/* #2/#3 — CTA hierarchy: dominant primary button */
.title-cta-primary {
  width: auto;
  max-width: none;
  padding: 11px 24px;
  font-size: 0.94rem;
  box-shadow: 0 6px 24px var(--accent-glow), 0 2px 8px rgba(0,0,0,0.4);
}
.title-cta-primary:hover {
  box-shadow: 0 8px 32px var(--accent-glow), 0 4px 12px rgba(0,0,0,0.5);
}

/* Subtitle text inside buttons (#2/#11) */
.btn-sub {
  display: block;
  font-size: 0.73rem;
  font-weight: 400;
  color: rgba(255,255,255,0.65);
  margin-top: 4px;
  letter-spacing: 0.01em;
}
.title-screen-btn-secondary .btn-sub {
  color: var(--text-dark);
}

/* #2 — "or customize manually" divider */
.title-cta-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px auto 4px;
  width: 100%;
  max-width: 360px;
  color: var(--text-muted);
  /* Root font-size here is 15px, not the usual 16px assumption, so 0.75rem
     was actually rendering at 11.25px. 0.8rem = 12px at this root. */
  font-size: 0.8rem;
}
.title-cta-divider::before,
.title-cta-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.title-cta-divider span { white-space: nowrap; }

/* #2 — walkthrough as a subtle ghost link below secondary buttons */
.title-walkthrough-link {
  display: inline-block;
  margin-top: 20px;
  padding: 6px 10px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.title-walkthrough-link:hover { color: var(--text-secondary); }
.walkthrough-arrow { opacity: 0.5; margin-left: 3px; }

/* "More options" disclosure — keeps the walkthrough and manual-build routes
   reachable without making a first-time visitor rule out four choices. */
.title-more { margin-top: 22px; }
.title-more-toggle {
  background: none;
  border: none;
  padding: 6px 10px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.title-more-toggle:hover { color: var(--text-secondary); }
.title-more-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
.title-more-caret {
  display: inline-block;
  margin-left: 4px;
  transition: transform var(--transition-fast);
}
.title-more-toggle.open .title-more-caret { transform: rotate(180deg); }
.title-more-panel {
  margin-top: 10px;
  width: 100%;
}
.title-more-panel[hidden] { display: none; }

/* Three peer tiles. They were previously two grey text links and one bordered
   card, which made the links read as captions rather than choices — same
   affordance for all three now, and all lighter than the two primary CTAs so
   they still sit clearly below them. */
.title-more-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
/* FAQ is launched from the title screen — same stacking + instant-visibility
   treatment as Bingecat choice / download confirm, or it opens under the hero. */
.faq-overlay {
  z-index: var(--z-above-title);
  transition: opacity var(--transition-normal);
}
.faq-overlay.open { visibility: visible; }
.faq-panel {
  max-width: 520px;
  text-align: left;
}
.faq-body {
  max-height: min(60vh, 420px);
  overflow: auto;
  margin: 12px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted, #a8b3c7);
}
.faq-body strong { color: var(--text, #e8eef8); }
.faq-body p { margin: 0; }
.more-tile-icon .bingecat-mark { width: 100%; }

.title-more-desc { display: none; }

@media (max-width: 560px) {
  .title-more-grid { grid-template-columns: 1fr; max-width: 360px; }
  .title-more-desc { display: none; }
}
/* Shared Bingecat mark. Holds the real logo when assets/bingecat-logo.png is
   present; the .no-logo class is added by the img's own onerror so a missing
   file degrades to a glyph instead of a broken image icon. */
/* The official logo is one file used at four sizes, windowed rather than
   redrawn or re-exported. Measured from assets/bingecat-logo.png itself:
   450x435 canvas, illustration at x59-398 / y17-270, wordmark begins row 271,
   whole lockup's content box x59-398 / y17-362.

   The window takes the artwork's own aspect rather than being square: a
   square frame around a 340x254 illustration has to fill the leftover height
   from somewhere, and the only thing below the illustration is the wordmark,
   which bled a sliver of "bingecat" into every small mark. */
.bingecat-mark {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  aspect-ratio: 340 / 254;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
}
.bingecat-mark img {
  position: absolute;
  max-width: none;
  height: auto;
  width: 132.35%;    /* 450/340 — illustration spans the full window width */
  left: -17.35%;     /* pulls x59 to the left edge */
  top: -6.69%;       /* pulls y17 to the top edge */
}
/* Roomy placements show the whole lockup, trimmed to its content box. Same
   horizontal window; only the height and top offset change. */
.bingecat-mark--full {
  aspect-ratio: 340 / 346;
}
.bingecat-mark--full img { top: -4.91%; }
.bingecat-mark.no-logo::before {
  content: '🐱';
  font-size: 1.1rem;
  line-height: 1;
}
.bingecat-mark.no-logo {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
}

/* Inline Bingecat action, used in the bottom bar and the preview bar. */
.btn-bingecat { display: inline-flex; align-items: center; gap: 7px; }
.btn-bingecat .bingecat-mark { width: 24px; border-radius: 5px; }
.btn-bingecat .bingecat-mark.no-logo::before { font-size: 0.82rem; }
.se-bingecat-btn { display: inline-flex; align-items: center; gap: 6px; }
.se-bingecat-btn .bingecat-mark { width: 22px; border-radius: 5px; }
.se-bingecat-btn .bingecat-mark.no-logo::before { font-size: 0.78rem; }

/* "Full collection or edit first?" prompt from the title screen. Visibility
   flips outright rather than riding the shared popup transition so the dialog
   is focusable the instant it opens. */
.bc-choice-overlay {
  z-index: var(--z-above-title);
  transition: opacity var(--transition-normal);
}
.bc-choice-overlay.open { visibility: visible; }
.bc-choice-panel { text-align: left; }
.bc-choice-mark {
  width: 64px;
  margin-bottom: 10px;
  border-radius: 10px;
}
.bc-choice-mark.no-logo::before { font-size: 1.8rem; }
.bc-choice-note {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 6px 0 16px;
}
.bc-choice-opt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  text-align: left;
  padding: 13px 15px;
  margin-bottom: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.bc-choice-opt:hover {
  border-color: var(--accent);
  background: var(--bg-elevated);
  transform: translateY(-1px);
}
.bc-choice-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bc-choice-opt-title { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); }
.bc-choice-opt-desc { font-size: 0.77rem; line-height: 1.45; color: var(--text-muted); }
.bc-choice-cancel {
  display: block;
  width: 100%;
  margin-top: 2px;
  padding: 8px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.bc-choice-cancel:hover { color: var(--text-primary); }
.bc-choice-cancel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.title-bingecat-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.title-bingecat-name { font-size: 0.86rem; font-weight: 700; color: var(--text-primary); }
.title-bingecat-sub { font-size: 0.74rem; line-height: 1.45; color: var(--text-muted); }

/* #5 — CSS tooltip pattern for icon-only toolbar buttons */
[data-tooltip] { position: relative; }
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: hsl(240, 10%, 14%);
  color: var(--text-primary);
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-hover);
  pointer-events: none;
  z-index: 9999;
  box-shadow: var(--shadow-md);
  transition-delay: 100ms;
}

/* #6 — drawer context hint (now dynamic status, injected by JS) */
.drawer-context-hint {
  font-size: 0.79rem;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 10px 20px 0;
  margin: 0;
  min-height: 1.5em;
}
.drawer-context-hint:empty {
  display: none;
}

/* Drawer header All/None actions */
.drawer-header-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
  margin-right: 10px;
}

/* Replay Tour — recovery action, dimmed at rest */
.replay-tour-btn {
  opacity: 0.72;
}
.replay-tour-btn:hover {
  opacity: 1 !important;
}

/* Title screen manual-build text link */
.title-manual-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 6px 2px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}
.title-manual-link:hover {
  color: var(--text-secondary);
}

/* Version label — shown in sidebar footer, not pinned to corner */
.sidebar-version-label {
  font-size: 0.68rem;
  color: var(--text-dark);
  letter-spacing: 0.04em;
}
.sidebar-version-row {
  padding: 4px 0 8px;
  opacity: 0.6;
}

/* #14 — Ko-fi button demoted to outline style */
.sidebar-footer-btn-kofi {
  border-color: hsla(250, 40%, 60%, 0.3) !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  box-shadow: none !important;
}
.sidebar-footer-btn-kofi:hover {
  border-color: hsla(250, 60%, 65%, 0.5) !important;
  background: rgba(124, 58, 237, 0.08) !important;
  color: var(--text-secondary) !important;
}

/* #4 — Rows mode inline warning badge */
.rows-warn-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--warning);
  background: hsla(38, 90%, 50%, 0.1);
  border: 1px solid hsla(38, 90%, 50%, 0.25);
  border-radius: 6px;
  padding: 2px 7px;
  margin-left: 6px;
  white-space: nowrap;
  vertical-align: middle;
}

/* #10 — undo toast */
.toast-undo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.toast-undo-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.toast-undo-btn:hover { background: rgba(255,255,255,0.1); }

/* ==========================================================================
   WIZARD UX OVERHAUL — v23 additions
   ========================================================================== */

/* Ghost button for title screen */
.title-screen-btn-ghost {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 11px 22px;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  backdrop-filter: blur(10px);
  transition: all var(--transition-fast);
}
.title-screen-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--text-primary);
  transform: translateY(-2px);
}

/* Device selection step */
.wiz-device-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.wiz-device-check-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
}
.wiz-device-check-row:hover { border-color: var(--border-hover); background: var(--bg-card-hover); }
.wiz-device-check-row.checked { border-color: var(--accent); background: rgba(124,58,237,0.08); }
.wiz-device-check-row input[type="checkbox"] {
  width: 17px; height: 17px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.wiz-device-label { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); letter-spacing: 0.01em; }
.wiz-device-text { display: flex; flex-direction: column; gap: 2px; }
.wiz-device-desc { font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; font-weight: 400; }

/* Rows-mode warning inside device step */
.wiz-rows-warning {
  background: hsla(38, 80%, 18%, 0.7);
  border: 1px solid hsla(38, 90%, 50%, 0.3);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 0.82rem;
  color: hsl(38, 80%, 80%);
  line-height: 1.5;
}
.wiz-rows-warning strong { color: hsl(38, 90%, 70%); }
.wiz-rows-warning-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  cursor: pointer;
}
.wiz-rows-warning-check input[type="checkbox"] {
  width: 15px; height: 15px;
  accent-color: hsl(38, 90%, 60%);
  cursor: pointer;
}

/* Streaming prompt (yes/no question screens) */
.wiz-streaming-prompt { padding-top: 28px; padding-bottom: 28px; }
.wiz-prompt-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: 12px;
}

/* Inline link inside wiz-note (e.g. TMDB key link) */
.wiz-link {
  color: var(--accent-light);
  text-decoration: none;
  font-weight: 600;
  /* Some of these are full addon "configure" URLs, which are long enough to
     push past the panel on a 375px phone if they refuse to wrap. */
  overflow-wrap: anywhere;
}
.wiz-link:hover { text-decoration: underline; }

/* ====================================================================
   FEATURE B: SYNC STATE DOT
   ==================================================================== */
.sync-dot {
  position: absolute;
  top: 7px; right: 7px;
  width: 8px; height: 8px;
  border-radius: 50%;
  display: none;
  pointer-events: none;
  z-index: 2;
  transition: background 0.3s;
}
.sync-dot.synced {
  display: block;
  background: hsl(142, 70%, 55%);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.3);
}
.sync-dot.out-of-sync {
  display: block;
  background: hsl(38, 90%, 55%);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.3);
  animation: sync-pulse 2s ease-in-out infinite;
}
@keyframes sync-pulse {
  0%, 100% { box-shadow: 0 0 0 0 hsla(38, 90%, 50%, 0.5); }
  50% { box-shadow: 0 0 0 6px hsla(38, 90%, 50%, 0); }
}

/* Quick Push Confirmation Modal */
.quick-push-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  z-index: 14500;
  display: flex; align-items: center; justify-content: center;
}
.quick-push-overlay[hidden] { display: none; }
.quick-push-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border-hover);
  border-radius: 18px;
  padding: 28px 28px 22px;
  max-width: 340px; width: 90vw;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: fadeInUp 0.2s ease;
}
.quick-push-icon { font-size: 2rem; margin-bottom: 10px; }
.quick-push-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin: 0 0 8px; }
.quick-push-desc { font-size: 0.84rem; color: var(--text-secondary); margin: 0 0 22px; line-height: 1.55; }
.quick-push-actions { display: flex; gap: 10px; justify-content: center; }
.quick-push-btn-primary {
  background: var(--accent); color: var(--on-secondary); border: none; border-radius: 10px;
  padding: 10px 22px; font-size: 0.9rem; font-weight: 600; cursor: pointer;
  transition: opacity 0.15s;
}
.quick-push-btn-primary:hover { opacity: 0.85; }
.quick-push-btn-primary:disabled { opacity: 0.5; cursor: default; }
.quick-push-btn-secondary {
  background: rgba(255,255,255,0.06); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 22px; font-size: 0.9rem; cursor: pointer;
  transition: background 0.15s;
}
.quick-push-btn-secondary:hover { background: rgba(255,255,255,0.1); }

/* ====================================================================
   FEATURE C: COMMAND PALETTE
   ==================================================================== */
.command-palette-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  z-index: 21500;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 14vh;
}
.command-palette-overlay[hidden] { display: none; }
.command-palette-panel {
  width: 520px; max-width: 92vw;
  background: var(--bg-elevated);
  border: 1px solid var(--border-hover);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: fadeInDown 0.15s ease;
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.command-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.command-input-icon { color: var(--text-muted); flex-shrink: 0; }
.command-input {
  flex: 1; background: transparent; border: none; outline: none;
  font-size: 1rem; color: var(--text-primary);
}
.command-input::placeholder { color: var(--text-dark); }
.command-kbd-hint {
  font-size: 0.72rem; color: var(--text-dark);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 5px; padding: 2px 7px;
  white-space: nowrap; flex-shrink: 0;
}
.command-results {
  max-height: 320px;
  overflow-y: auto;
  padding: 6px 0;
}
.command-results:empty::after {
  content: 'No commands match that.';
  display: block; padding: 14px 18px;
  color: var(--text-dark); font-size: 0.85rem;
}
.command-group-label {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-dark);
  padding: 8px 18px 4px;
}
.command-result {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; cursor: pointer;
  font-size: 0.9rem; color: var(--text-secondary);
  transition: background 0.1s;
}
.command-result:hover, .command-result.highlighted {
  background: var(--accent-subtle, rgba(99,71,214,0.15));
  color: var(--text-primary);
}
.command-result-icon {
  width: 28px; height: 28px;
  background: rgba(255,255,255,0.06);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; flex-shrink: 0;
}
.command-result-label { flex: 1; }
.command-result-shortcut {
  font-size: 0.72rem; color: var(--text-dark);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 5px; padding: 2px 7px;
}

/* ====================================================================
   FEATURE A: SMART START QUIZ
   ==================================================================== */
.quiz-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(12px);
  z-index: 21000;
  display: flex; align-items: center; justify-content: center;
}
.quiz-overlay[hidden] { display: none; }
.quiz-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border-hover);
  border-radius: 22px;
  padding: 36px 32px 28px;
  max-width: 440px; width: 92vw;
  position: relative;
  box-shadow: var(--shadow-lg);
  animation: fadeInUp 0.25s var(--spring);
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.quiz-step { display: none; }
.quiz-step.active { display: block; animation: fadeInUp 0.2s ease; }
.quiz-progress {
  display: flex; gap: 6px; margin-bottom: 24px;
}
.quiz-progress-dot {
  height: 3px; flex: 1; border-radius: 2px;
  background: rgba(255,255,255,0.12);
  transition: background 0.3s;
}
.quiz-progress-dot.done { background: var(--accent); }
.quiz-eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-light);
  margin: 0 0 8px;
}
.quiz-question {
  font-size: 1.25rem; font-weight: 700; color: var(--text-primary);
  margin: 0 0 22px; line-height: 1.3;
}
.quiz-pill-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 28px;
}
.quiz-pill {
  padding: 8px 18px;
  border: 1px solid var(--border-hover);
  border-radius: 30px;
  font-size: 0.88rem; font-weight: 500;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.04);
  cursor: pointer; transition: all 0.15s;
  user-select: none;
}
.quiz-pill:hover { border-color: var(--accent); color: var(--text-primary); }
.quiz-pill.selected {
  background: hsla(250,84%,60%,0.2);
  border-color: var(--accent);
  color: var(--accent-light);
  font-weight: 600;
}
.quiz-actions { display: flex; gap: 10px; justify-content: space-between; align-items: center; }
.quiz-skip { background: none; border: none; color: var(--text-dark); font-size: 0.82rem; cursor: pointer; }
.quiz-skip:hover { color: var(--text-secondary); }
.quiz-next {
  background: var(--accent); color: var(--on-secondary); border: none;
  border-radius: 10px; padding: 10px 24px;
  font-size: 0.9rem; font-weight: 600; cursor: pointer;
  transition: opacity 0.15s;
}
.quiz-next:hover { opacity: 0.85; }
.quiz-loading { text-align: center; padding: 20px 0; }
.quiz-loading-emoji { font-size: 2.5rem; animation: spin 1.5s linear infinite; display: block; margin-bottom: 12px; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.quiz-loading-text { color: var(--text-secondary); font-size: 0.9rem; }


/* ---- Optional Account Save (feature-flagged) ---- */
.account-chrome {
  position: fixed;
  top: calc(12px + var(--kaptain-beta-banner-height, 0px));
  right: max(16px, env(safe-area-inset-right));
  z-index: calc(var(--z-above-title) + 2);
}
.account-fab {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(18, 18, 18, 0.82);
  color: #eee;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  position: relative;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.account-fab svg { width: 19px; height: 19px; }
.account-fab:hover,
.account-fab[aria-expanded="true"] {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.account-fab.is-unlocked {
  border-color: rgba(120, 200, 150, 0.55);
}
.account-fab-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6dcf8c;
  box-shadow: 0 0 0 2px rgba(18, 18, 18, 0.9);
}
.account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(280px, calc(100vw - 24px));
  background: #161616;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}
.account-menu-status {
  margin: 4px 8px 10px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #9a9a9a;
}
.account-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: #eee;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.account-menu-item[hidden] { display: none !important; }
.account-menu-item:hover { background: rgba(255,255,255,0.06); }
.account-menu-item-quiet { color: #b0b0b0; font-weight: 500; font-size: 0.82rem; }
.account-menu-item-danger { color: #f0a0a0; font-weight: 500; font-size: 0.82rem; }
.account-fab-dot[hidden] { display: none !important; }
.account-chrome[hidden] { display: none !important; }

.account-overlay {
  position: fixed; inset: 0; z-index: var(--z-above-title);
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.62); padding: 20px;
}
.account-overlay.open { display: flex; }
.account-panel {
  position: relative;
  width: min(460px, 100%);
  max-height: min(90vh, 760px);
  overflow: auto;
  background: #141414;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 22px 22px 18px;
  color: #eee;
  box-shadow: 0 24px 80px rgba(0,0,0,0.45);
}
.account-close {
  position: absolute; top: 10px; right: 12px;
  background: transparent; border: 0; color: #aaa;
  font-size: 1.4rem; cursor: pointer; line-height: 1;
}
.account-title { margin: 0 28px 8px 0; font-size: 1.2rem; }
.account-lead, .account-note { color: #a8a8a8; font-size: 0.88rem; line-height: 1.45; margin: 0 0 14px; }
.account-callout {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 14px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #bdbdbd;
}
.account-callout strong { display: block; color: #eee; margin-bottom: 6px; font-size: 0.88rem; }
.account-callout p { margin: 0 0 8px; }
.account-text-link {
  background: none; border: 0; padding: 0; color: #9ec0ff;
  cursor: pointer; font-size: 0.82rem; text-decoration: underline;
}
.account-label {
  display: block; font-size: 0.78rem; color: #bbb; margin-bottom: 12px; position: relative;
}
.account-optional { color: #888; font-weight: 400; }
.account-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 6px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25); color: #bbb; font-size: 0.68rem;
  cursor: help; vertical-align: middle; position: relative;
}
.account-tip-bubble {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: min(220px, 70vw); background: #1f1f1f; color: #ddd;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 8px;
  padding: 8px 10px; font-size: 0.75rem; line-height: 1.35; font-weight: 400;
  z-index: 2; box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
.account-input {
  display: block; width: 100%; margin-top: 4px;
  background: #0d0d0d; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; color: #fff; padding: 10px 12px; font-size: 0.92rem;
}
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.account-btn {
  border-radius: 8px; border: 1px solid rgba(255,255,255,0.14);
  padding: 9px 12px; cursor: pointer; font-weight: 600; font-size: 0.85rem;
}
.account-btn-primary { background: #fff; color: #111; border-color: #fff; }
.account-btn-ghost { background: transparent; color: #ddd; }
.account-btn-danger { background: transparent; color: #f08888; border-color: rgba(240,136,136,0.35); }
.account-error { color: #ff8e8e; font-size: 0.85rem; margin: 0 0 10px; }
.account-privacy-list {
  margin: 0 0 14px; padding-left: 1.1rem; color: #b5b5b5;
  font-size: 0.88rem; line-height: 1.5;
}
.account-privacy-list li { margin-bottom: 8px; }

/* ==========================================================================
   FEATURE A: SIMPLE CUSTOMIZE WIZARD (ULTRA-PREMIUM REDESIGN)
   ========================================================================== */

#customize-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background-color: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: var(--z-above-title, 21000);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
  box-sizing: border-box;
}

#customize-overlay.open {
  opacity: 1;
  visibility: visible;
}

.cust-panel {
  width: 700px;
  max-width: 95vw;
  height: min(640px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  background: linear-gradient(155deg, rgba(22, 22, 32, 0.97) 0%, rgba(12, 12, 18, 0.99) 100%);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.96);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

#customize-overlay.open .cust-panel {
  transform: scale(1);
}

/* Modal Header */
.cust-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
}

.cust-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cust-header-badge {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(99, 102, 241, 0.15));
  border: 1px solid rgba(124, 58, 237, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c084fc;
  box-shadow: 0 0 14px rgba(124, 58, 237, 0.3);
  flex-shrink: 0;
}

.cust-header-badge svg {
  width: 20px;
  height: 20px;
}

.cust-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cust-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.22rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}

.cust-title span {
  background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cust-subtitle {
  font-size: 0.8rem;
  color: #94a3b8;
  margin: 0;
  line-height: 1.2;
}

.cust-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  padding: 0;
}

.cust-close-btn svg {
  width: 15px;
  height: 15px;
}

.cust-close-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
  transform: rotate(90deg);
}

/* Modal Body */
.cust-body {
  padding: 14px 22px 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.cust-step {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  gap: 10px;
}

/* Stepper Progress Bar */
.cust-prog-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 2px;
  flex-shrink: 0;
}

.cust-prog-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  width: 100%;
}

.cust-prog-seg {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
  transition: background 0.3s ease;
}

.cust-prog-seg.active {
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.5);
}

.cust-prog-seg.done {
  background: #7c3aed;
}

.cust-prog-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cust-prog-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #a78bfa;
}

.cust-prog-name {
  font-size: 0.76rem;
  font-weight: 600;
  color: #cbd5e1;
}

/* Step Header */
.cust-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 2px;
  flex-shrink: 0;
}

.cust-step-head-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cust-step-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}

.cust-step-sub {
  font-size: 0.84rem;
  color: #94a3b8;
  margin: 0;
  line-height: 1.3;
}

.cust-quick-toggles {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}

.cust-mini-btn {
  padding: 5px 11px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  color: #cbd5e1;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cust-mini-btn.is-active,
.se-mini-btn.is-active {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--text-primary);
}

.cust-slider-panel {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cust-slider-head h4 {
  margin: 0 0 4px;
  font-size: 0.88rem;
  color: var(--text-primary);
}
.cust-slider-head p {
  margin: 0;
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.cust-slider-row {
  display: grid;
  grid-template-columns: 140px 1fr 64px;
  align-items: center;
  gap: 10px;
}
.cust-slider-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.cust-slider-row input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}
.cust-slider-example {
  margin: -4px 0 4px;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.35;
}
@media (max-width: 600px) {
  .cust-slider-row {
    grid-template-columns: 1fr 56px;
  }
  .cust-slider-label { grid-column: 1 / -1; }
}

/* Step Content Container */
.cust-step-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.35) transparent;
}
.cust-step-content::-webkit-scrollbar {
  width: 5px;
}
.cust-step-content::-webkit-scrollbar-thumb {
  background: rgba(124, 58, 237, 0.35);
  border-radius: 4px;
}

/* Step Footer */
.cust-step-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.cust-btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #94a3b8;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cust-btn-back svg {
  width: 16px;
  height: 16px;
}

.cust-btn-back:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  transform: translateX(-2px);
}

.cust-btn-back:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cust-btn-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.45);
}

.cust-btn-next svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.cust-btn-next:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 22px rgba(124, 58, 237, 0.6);
  transform: translateY(-1px);
}

.cust-btn-next:hover svg {
  transform: translateX(2px);
}

.cust-btn-next:active {
  transform: translateY(0);
}

/* ==========================================================================
   STEP 1: REGION & LANGUAGE FORM CARDS
   ========================================================================== */

.cust-step-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cust-field-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  transition: all 0.2s ease;
}
.cust-field-card-regions {
  align-items: flex-start;
}
.cust-field-main-stack {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.cust-region-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cust-region-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 10, 16, 0.85);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}
.cust-region-chip input {
  width: 16px;
  height: 16px;
  accent-color: #8b5cf6;
  margin: 0;
  cursor: pointer;
}
.cust-region-chip:has(input:checked) {
  border-color: rgba(139, 92, 246, 0.7);
  background: rgba(124, 58, 237, 0.22);
}

.cust-field-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
}

.cust-field-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(124, 58, 237, 0.25);
  color: #a78bfa;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cust-field-icon-wrap svg {
  width: 20px;
  height: 20px;
}

.cust-field-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cust-field-labels {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cust-field-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.cust-field-hint {
  font-size: 0.78rem;
  color: #94a3b8;
  margin: 0;
  line-height: 1.3;
}

.cust-select-wrap {
  position: relative;
  min-width: 170px;
}

.cust-select {
  width: 100%;
  padding: 9px 32px 9px 12px;
  background: rgba(10, 10, 16, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  color: #fff;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: all 0.2s ease;
}

.cust-select:hover {
  border-color: rgba(124, 58, 237, 0.5);
  background: rgba(18, 18, 28, 0.95);
}

.cust-select:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
}

.cust-select-arrow {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: #94a3b8;
  pointer-events: none;
}

/* iOS-Style Toggle Switch */
.cust-toggle-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.cust-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}

.cust-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cust-slider {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.cust-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: #fff;
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.cust-switch input:checked + .cust-slider {
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  border-color: #8b5cf6;
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.4);
}

.cust-switch input:checked + .cust-slider:before {
  transform: translateX(20px);
}

/* ==========================================================================
   STEP 2: NEGATIVE FILTERS
   ========================================================================== */

.cust-info-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(124, 58, 237, 0.06) 100%);
  border: 1px solid rgba(99, 102, 241, 0.28);
  border-radius: 12px;
  margin-bottom: 12px;
}

.cust-info-icon {
  width: 22px;
  height: 22px;
  color: #818cf8;
  flex-shrink: 0;
  margin-top: 1px;
}

.cust-info-icon svg {
  width: 100%;
  height: 100%;
}

.cust-info-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cust-info-text strong {
  font-size: 0.84rem;
  color: #e0e7ff;
}

.cust-info-text p {
  font-size: 0.78rem;
  color: #a5b4fc;
  margin: 0;
  line-height: 1.35;
}

.cust-filter-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cust-filter-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.cust-filter-card input {
  display: none;
}

.cust-filter-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

.cust-filter-body {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cust-filter-emoji {
  font-size: 1.25rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  flex-shrink: 0;
}

.cust-filter-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cust-filter-text h4 {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.cust-filter-text p {
  font-size: 0.76rem;
  color: #94a3b8;
  margin: 0;
  line-height: 1.25;
}

.cust-filter-badge {
  display: flex;
  align-items: center;
}

.cust-filter-badge .badge-off {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: #64748b;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.cust-filter-badge .badge-on {
  display: none;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(244, 63, 94, 0.18);
  color: #fda4af;
  border: 1px solid rgba(244, 63, 94, 0.45);
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.25);
}

.cust-filter-card:has(input:checked) {
  background: rgba(244, 63, 94, 0.06);
  border-color: rgba(244, 63, 94, 0.4);
}

.cust-filter-card:has(input:checked) .badge-off {
  display: none;
}

.cust-filter-card:has(input:checked) .badge-on {
  display: block;
}

/* ==========================================================================
   STEP 3: CATEGORY VISUAL POSTER CARDS
   ========================================================================== */

.cust-visual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  gap: 9px;
}

.cust-drag-item {
  cursor: grab;
}
.cust-drag-item.is-dragging {
  opacity: 0.6;
  cursor: grabbing;
  transform: scale(0.98);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.35);
  outline: 2px solid rgba(168, 85, 247, 0.55);
  z-index: 2;
}
.cust-reorder-tip {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--text-muted);
  align-self: center;
  font-style: italic;
}

.cust-visual-card {
  position: relative;
  height: 76px;
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  background: rgba(18, 18, 26, 0.9);
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  padding: 9px 10px;
  box-sizing: border-box;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.cust-visual-card input {
  display: none;
}

.cust-visual-card-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.65) saturate(0.9);
  transition: transform 0.35s ease, filter 0.25s ease;
}

.cust-visual-card:hover .cust-visual-card-bg {
  transform: scale(1.06);
  filter: brightness(0.8) saturate(1.1);
}

.cust-visual-card-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(8, 8, 14, 0.92) 0%, rgba(8, 8, 14, 0.35) 60%, transparent 100%);
  pointer-events: none;
}

.cust-visual-card-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cust-visual-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}

.cust-visual-card-count {
  font-size: 0.68rem;
  color: #cbd5e1;
  opacity: 0.85;
}

.cust-card-check-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 3;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all 0.2s ease;
}

.cust-card-check-badge svg {
  width: 11px;
  height: 11px;
}

.cust-visual-card:has(input:checked) {
  border-color: #8b5cf6;
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.45);
}

.cust-visual-card:has(input:checked) .cust-card-check-badge {
  background: #7c3aed;
  border-color: #8b5cf6;
  color: #fff;
}

.cust-visual-card:not(:has(input:checked)) {
  opacity: 0.48;
  filter: grayscale(0.55);
}

.cust-visual-card:not(:has(input:checked)):hover {
  opacity: 0.75;
  filter: grayscale(0.2);
}

/* ==========================================================================
   STEPS 4 & 5: STREAMING SERVICES & TV NETWORKS LOGO TILES
   ========================================================================== */

.cust-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}

.cust-logo-card {
  position: relative;
  min-height: 72px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 10px 8px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, filter 0.2s ease, transform 0.15s ease;
  user-select: none;
}

.cust-logo-card input {
  display: none;
}

.cust-logo-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
}

.cust-logo-wrap {
  flex: 1;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 88%;
}

.cust-logo-wrap img {
  max-height: 30px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
  transition: transform 0.2s ease;
}

.cust-logo-card:hover .cust-logo-wrap img {
  transform: scale(1.08);
}

.cust-logo-fallback {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.2;
  padding: 0 2px;
}

.cust-logo-title {
  font-size: 0.68rem;
  font-weight: 600;
  color: #94a3b8;
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  word-break: break-word;
}

.cust-logo-card:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
}

.cust-logo-card:has(input:checked) {
  border-color: #8b5cf6;
  background: rgba(124, 58, 237, 0.12);
  box-shadow: 0 0 14px rgba(124, 58, 237, 0.35);
}

.cust-logo-card:has(input:checked) .cust-logo-title {
  color: #fff;
}

.cust-logo-card:has(input:checked) .cust-card-check-badge {
  background: #7c3aed;
  border-color: #8b5cf6;
  color: #fff;
}

.cust-logo-card:not(:has(input:checked)) {
  opacity: 0.48;
  filter: grayscale(0.55);
}

.cust-logo-card:not(:has(input:checked)):hover {
  opacity: 0.75;
  filter: grayscale(0.2);
}

/* ==========================================================================
   TITLE SCREEN: CINEMATIC PORTFOLIO SHOWCASE (SCROLL-DOWN HERO CARDS)
   ========================================================================== */

/* Stage 1: Brand Emblem (Zero layout impact, prominent size in the gap) & Scroll Indicator */
.title-hero-logo-emblem {
  position: relative;
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
}

.title-hero-logo-img {
  width: 84px;
  height: 84px;
  max-width: 84px;
  max-height: 84px;
  object-fit: contain;
  filter: drop-shadow(0 6px 22px rgba(168, 85, 247, 0.55));
  animation: emblemFloat 4s ease-in-out infinite;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
  display: block;
}

.title-hero-logo-img:hover {
  transform: scale(1.06);
  filter: drop-shadow(0 12px 40px rgba(168, 85, 247, 0.8));
}

@keyframes emblemFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.title-scroll-indicator {
  margin-top: 4px;
  margin-bottom: 8px;
  transform: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: color 0.25s ease, opacity 0.25s ease;
  user-select: none;
  outline: none;
  white-space: nowrap;
}

.title-scroll-indicator:hover,
.title-scroll-indicator:focus-visible {
  color: var(--text-primary);
}

.scroll-ind-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--text-muted);
  animation: slowChevronBounce 2.4s ease-in-out infinite;
  transition: color 0.25s ease, transform 0.25s ease;
}

.scroll-ind-chevron svg {
  width: 18px;
  height: 18px;
}

.title-scroll-indicator:hover .scroll-ind-chevron {
  color: #a78bfa;
}

@keyframes slowChevronBounce {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.55;
  }
  50% {
    transform: translateY(7px);
    opacity: 1;
  }
}

/* Stage 2: Portfolio Showcase (Peeks just above bottom edge) */
.title-portfolio-showcase {
  width: 100%;
  max-width: 1060px;
  margin: 10px auto 80px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  text-align: left;
  opacity: 1;
  transform: translateY(0);
  filter: none;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.45s ease;
}

/* Softly dimmed peek when page is at the top */
.title-portfolio-showcase.is-peeking {
  opacity: 0.38;
  filter: blur(0.6px);
  transform: translateY(8px);
}

.title-portfolio-showcase:hover {
  opacity: 1 !important;
  filter: none !important;
  transform: translateY(0) !important;
}

/* Section Header (Minimalist & Editorial) */
.portfolio-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.portfolio-sec-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

.portfolio-sec-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}

.portfolio-sec-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 400;
}

/* Portfolio Card Grids */
.portfolio-grid {
  display: grid;
  gap: 14px;
  width: 100%;
}

.portfolio-grid.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.portfolio-grid.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.portfolio-grid.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Human-Crafted Modern Card */
.portfolio-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 18px;
  border-radius: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.22s ease,
              border-color 0.22s ease,
              box-shadow 0.22s ease;
  box-sizing: border-box;
  outline: none;
  text-decoration: none;
}

.portfolio-card:hover,
.portfolio-card:focus-visible {
  transform: translateY(-3px);
  background: var(--bg-card-hover);
}

.port-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.port-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.port-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.port-card-icon svg {
  width: 16px;
  height: 16px;
}

.portfolio-card:hover .port-card-icon {
  transform: scale(1.06);
}

.port-pill {
  font-family: 'Outfit', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.port-card-content {
  flex: 1 1 auto;
}

.port-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.port-card-desc {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-secondary);
  margin: 0;
}

.port-steps-preview {
  margin-top: 10px;
  font-size: 0.72rem;
  color: #c084fc;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.port-card-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.port-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: color 0.2s ease, gap 0.2s ease;
}

.port-link .arrow {
  transition: transform 0.2s ease;
}

.portfolio-card:hover .port-link {
  color: var(--text-primary);
}

.portfolio-card:hover .port-link .arrow {
  transform: translateX(3px);
}

.port-btn-solid {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
  padding: 5px 12px;
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 3px 12px rgba(168, 85, 247, 0.35);
}

.portfolio-card:hover .port-btn-solid {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.5);
}

/* 01: Help Theme Accents */
.card-help:hover {
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.12);
}

.card-help:hover .port-card-icon {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.35);
  color: #a5b4fc;
}

/* 02: Customization Studio Accents */
.card-custom:hover {
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.15);
}

.card-custom:hover .port-card-icon {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.35);
  color: #c084fc;
}

/* Featured Hero Wizard Card */
.card-hero {
  background: linear-gradient(145deg, rgba(168, 85, 247, 0.08) 0%, rgba(18, 20, 29, 0.7) 100%);
  border-color: rgba(168, 85, 247, 0.3);
}

.card-hero:hover {
  border-color: rgba(168, 85, 247, 0.6);
  box-shadow: 0 10px 30px rgba(168, 85, 247, 0.25);
}

.card-hero .hero-pill {
  background: rgba(168, 85, 247, 0.18);
  border-color: rgba(168, 85, 247, 0.4);
  color: #e9d5ff;
}

.card-hero .port-card-icon {
  background: rgba(168, 85, 247, 0.18);
  border-color: rgba(168, 85, 247, 0.35);
  color: #d8b4fe;
}

/* 03: Addons & Hosting Accents */
.card-hosting:hover {
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.12);
}

.amber-pill {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.28);
  color: #fbbf24;
}

.amber-icon {
  color: #fbbf24;
}

.card-hosting:hover .amber-icon {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.35);
}

.amber-link {
  color: #fbbf24;
}

/* Bingecat Mascot */
.port-card-mascot {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.port-bingecat-img {
  max-height: 36px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 3px 10px rgba(245, 158, 11, 0.45));
  animation: catBounce 1.25s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
}

@keyframes catBounce {
  0%, 100% {
    transform: translateY(0) scale(1, 1);
  }
  30% {
    transform: translateY(-6px) scale(1.02, 0.98);
  }
  50% {
    transform: translateY(-8px) scale(0.99, 1.02);
  }
  75% {
    transform: translateY(-3px) scale(1, 1);
  }
  90% {
    transform: translateY(0) scale(1.04, 0.96);
  }
}

/* Responsive */
@media (max-width: 900px) {
  .portfolio-grid.grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  .portfolio-grid.grid-2,
  .portfolio-grid.grid-3 {
    grid-template-columns: 1fr;
  }
  .portfolio-sec-header {
    flex-direction: column;
    gap: 2px;
  }
}

@media (max-width: 600px) {
  #customize-overlay {
    padding: 8px;
  }
  .cust-panel {
    width: 100%;
    max-width: 100%;
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 16px;
  }
  .cust-header {
    padding: 12px 14px;
  }
  .cust-title {
    font-size: 1.05rem;
  }
  .cust-subtitle {
    font-size: 0.74rem;
  }
  .cust-body {
    padding: 10px 12px 12px;
  }
  .cust-step-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .cust-step-title {
    font-size: 1.08rem;
  }
  .cust-step-sub {
    font-size: 0.76rem;
  }
  .cust-quick-toggles {
    width: 100%;
    justify-content: flex-start;
    gap: 6px;
  }
  .cust-reorder-tip {
    font-size: 0.68rem;
  }
  .cust-field-card {
    padding: 10px 12px;
    gap: 10px;
  }
  .cust-field-icon-wrap {
    width: 32px;
    height: 32px;
  }
  .cust-field-icon-wrap svg {
    width: 16px;
    height: 16px;
  }
  .cust-field-main:not(.cust-toggle-main) {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .cust-select-wrap {
    min-width: 100%;
    width: 100%;
  }
  .cust-visual-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
  }
  .cust-logo-grid {
    grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
    gap: 8px;
  }
  .cust-step-footer {
    padding-top: 10px;
  }
  .cust-btn-back,
  .cust-btn-next {
    min-height: 42px;
    padding: 8px 14px;
    font-size: 0.84rem;
  }
}



/* ==========================================================================
   PROFILE STUDIO (Cinematic Collection Organizer & Vault Cherry-Picker)
   Palette rides the site's own tokens (--accent/--bg-elevated/--text-*)
   instead of a bolted-on hex set, so the modal reads as part of Kaptain.
   ========================================================================== */
.ps-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000 !important;
  background: rgba(3, 5, 11, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.ps-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.ps-panel {
  width: min(96vw, 1380px);
  height: min(92vh, 900px);
  background: var(--bg-drawer);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.04);
  position: relative;
}
.ps-panel:focus {
  outline: none;
}

.ps-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  flex: 1;
}

.ps-toast {
  position: absolute;
  top: 64px;
  right: 24px;
  background: var(--success);
  color: #fff;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  z-index: 1000;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.ps-toast.active {
  opacity: 1;
  transform: translateY(0);
}

/* Header */
.ps-header {
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--bg-elevated);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.ps-header-center {
  text-align: center;
  align-items: center;
  padding: 30px 24px 16px;
}
.ps-header-compact {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 13px 22px;
}
.ps-header-left,
.ps-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ps-header-profile-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  font-size: 0.84rem;
  color: #f1f5f9;
}
.ps-avatar-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 6px currentColor;
}
.ps-profile-label {
  color: #8fa0b5;
  font-size: 0.78rem;
}
.ps-profile-name-text {
  color: #fff;
  font-weight: 700;
}

.ps-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
}
.ps-subtitle {
  font-size: 0.86rem;
  color: #8fa0b5;
  margin: 0;
}
.ps-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-subtle);
  color: var(--accent-light);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  width: fit-content;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ps-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 0.84rem;
  line-height: 1.4;
  margin-bottom: 14px;
}
.ps-alert-error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}

.ps-privacy-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}
.ps-privacy-box svg {
  color: var(--accent-light);
  margin-top: 1px;
}

.ps-form-actions {
  margin-top: 4px;
}
.ps-footer-actions {
  margin-top: 18px;
  text-align: center;
}

.ps-close-btn {
  font-size: 1.5rem;
  line-height: 1;
  color: #8fa0b5;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.ps-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.ps-header:not(.ps-header-compact) .ps-close-btn {
  position: absolute;
  top: 16px;
  right: 18px;
}

.ps-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ps-login-body {
  max-width: 440px;
  margin: 20px auto;
  width: 100%;
}
.ps-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ps-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ps-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #b0bec5;
}
.ps-input {
  width: 100%;
  padding: 11px 14px;
  background: #141926;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #fff;
  font-size: 0.92rem;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ps-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

/* Button System */
.ps-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 0.86rem;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.ps-btn-block {
  width: 100%;
}
.ps-btn-lg {
  padding: 13px 26px;
  font-size: 0.96rem;
  border-radius: 11px;
}
.ps-btn-primary {
  background: var(--accent-gradient);
  color: #fff;
  box-shadow: 0 4px 14px var(--accent-glow);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.ps-btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 18px var(--accent-glow);
  transform: translateY(-1px);
}
.ps-btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.ps-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.ps-btn-ghost {
  background: transparent;
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.ps-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #f1f5f9;
}
.ps-btn-ghost:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ps-btn-link {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  padding: 4px;
}
.ps-btn-link:hover {
  color: var(--accent-light);
}
.ps-btn-chip {
  padding: 4px 10px;
  font-size: 0.72rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.15s ease;
}
.ps-btn-chip.is-pinned {
  background: var(--warning-glow, rgba(245, 158, 11, 0.15));
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.35);
  font-weight: 600;
}
.ps-btn-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  cursor: pointer;
  font-size: 0.75rem;
  transition: all 0.15s ease;
}
.ps-btn-icon svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.ps-btn-icon:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.ps-btn-icon:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.ps-btn-danger:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.4);
}

/* Artwork button: No additional art available indicator */
.ps-btn-wardrobe.is-no-alt-art {
  position: relative;
  opacity: 0.38;
  color: #64748b;
  border-color: rgba(255, 255, 255, 0.04);
}

.ps-btn-wardrobe.is-no-alt-art:hover,
.ps-btn-wardrobe.is-no-alt-art.is-hovered,
.ps-btn-wardrobe.is-no-alt-art:focus-visible {
  opacity: 0.95;
  color: #94a3b8;
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.08);
}

/* Minimal diagonal strike line through the palette icon */
.ps-btn-wardrobe.is-no-alt-art::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 1.5px;
  background: #ef4444;
  transform: translate(-50%, -50%) rotate(-45deg);
  border-radius: 1px;
  box-shadow: 0 0 4px rgba(239, 68, 68, 0.65);
  pointer-events: none;
  z-index: 2;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.ps-btn-wardrobe.is-no-alt-art:hover::before,
.ps-btn-wardrobe.is-no-alt-art.is-hovered::before,
.ps-btn-wardrobe.is-no-alt-art:focus-visible::before {
  background: #f87171;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.9);
  transform: translate(-50%, -50%) rotate(-45deg) scale(1.1);
}

/* Tooltip on hover */
.ps-btn-wardrobe.is-no-alt-art[data-tooltip]:hover::after,
.ps-btn-wardrobe.is-no-alt-art[data-tooltip].is-hovered::after,
.ps-btn-wardrobe.is-no-alt-art[data-tooltip]:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #0d111d;
  color: #f1f5f9;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(239, 68, 68, 0.4);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.8), 0 0 10px rgba(239, 68, 68, 0.2);
  pointer-events: none;
  z-index: 10000;
  animation: psTooltipFadeIn 0.15s ease-out;
}

@keyframes psTooltipFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, 4px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.ps-shelf-empty-hint {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 0.76rem;
  color: #94a3b8;
  line-height: 1.45;
}

.ps-btn-sm {
  padding: 6px 12px;
  font-size: 0.8rem;
}

/* Keyboard focus — the only :focus rule used to be the login inputs */
.ps-btn:focus-visible,
.ps-btn-icon:focus-visible,
.ps-close-btn:focus-visible,
.ps-vault-tab:focus-visible,
.ps-actions-item:focus-visible,
.ps-profile-card:focus-visible,
.ps-vault-card:focus-visible,
.ps-cat-header:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
}

/* Step 2: Profiles Grid */
.ps-profiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin: 10px 0 20px;
}
.ps-profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: #141926;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ps-profile-card:hover,
.ps-profile-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: #171f30;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.ps-profile-pick-btn {
  flex-shrink: 0;
  pointer-events: none;
}
.ps-profile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.2);
}
.ps-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ps-profile-info {
  flex: 1;
  min-width: 0;
}
.ps-profile-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ps-profile-meta {
  font-size: 0.8rem;
  color: #94a3b8;
}

/* ==========================================================================
   STEP 3: STUDIO CANVAS (3-Tab Modular Architecture)
   ========================================================================== */
.ps-mode-nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px 10px;
  background: rgba(10, 14, 24, 0.65);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.ps-mode-tabs {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
}
.ps-mode-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9px;
  background: transparent;
  border: none;
  color: var(--text-muted, #94a3b8);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
  white-space: nowrap;
}
.ps-mode-tab svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
  color: inherit;
}
.ps-mode-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.ps-mode-tab.active {
  background: var(--accent, #6366f1);
  color: #fff;
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.45);
}
.ps-mode-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  color: inherit;
}
.ps-mode-tab.active .ps-mode-badge {
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
}

.ps-canvas-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 14px 20px;
  overflow: hidden;
}

.ps-mode-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  background: #111623;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  overflow: hidden;
}

.ps-mode-view.ps-art-studio-view {
  overflow-y: auto;
}

/* Art & Themes Studio */
.ps-art-carousels-container {
  overflow: visible;
  padding: 4px 20px 30px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ps-art-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ps-art-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}
.ps-art-row-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ps-art-row-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.ps-art-row-badge {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-light, #a78bfa);
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  padding: 2px 8px;
  border-radius: 10px;
}
.ps-art-carousel-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 4px 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.ps-art-card {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  background: #161c2c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.ps-art-card.is-poster {
  flex: 0 0 170px;
}
.ps-art-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: var(--accent, #6366f1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), 0 0 20px rgba(99, 102, 241, 0.3);
}
.ps-art-card-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  background: #080c16;
  overflow: hidden;
}
.ps-art-card.is-poster .ps-art-card-thumb {
  aspect-ratio: 2 / 3;
}
.ps-art-base-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ps-art-hover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ps-art-card:hover .ps-art-hover-img {
  opacity: 1;
}
.ps-art-card-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 0.62rem;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(4px);
  color: #cbd5e1;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  z-index: 5;
}
.ps-art-card-meta {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.ps-art-card-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ps-art-card-sub {
  font-size: 0.68rem;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
}

/* -------------------------------------------------------------
   Art & Themes Mode: Theme Deck & In-Card Quick Flippers
   ------------------------------------------------------------- */
.ps-theme-deck {
  background: rgba(18, 24, 38, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0 20px 18px;
  backdrop-filter: blur(12px);
}
.ps-theme-deck-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ps-theme-deck-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ps-theme-deck-kicker {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--accent, #6366f1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ps-theme-deck-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.ps-theme-deck-sub {
  font-size: 0.78rem;
  color: var(--text-muted, #94a3b8);
}
.ps-theme-deck-chips {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ps-theme-deck-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
  color: #fff;
}
.ps-theme-deck-chip:hover {
  background: rgba(99, 102, 241, 0.12);
  border-color: var(--accent, #6366f1);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 12px rgba(99, 102, 241, 0.25);
}
.ps-deck-chip-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px currentColor;
}
.ps-deck-chip-text {
  display: flex;
  flex-direction: column;
}
.ps-deck-chip-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #f1f5f9;
}
.ps-deck-chip-count {
  font-size: 0.68rem;
  color: var(--text-muted, #94a3b8);
}

/* In-Card Quick Flippers */
.ps-card-quick-flippers {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 15;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.ps-art-card:hover .ps-card-quick-flippers {
  opacity: 1;
  pointer-events: auto;
}
.ps-card-flip-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(10, 14, 26, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}
.ps-card-flip-btn:hover {
  background: var(--accent, #6366f1);
  border-color: #818cf8;
  transform: scale(1.1);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.6);
}
.ps-card-style-indicator {
  font-size: 0.64rem;
  font-weight: 800;
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  padding: 3px 8px;
  border-radius: 5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}
.ps-card-just-flipped {
  animation: cardFlipGlow 0.45s ease;
}
@keyframes cardFlipGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.8), 0 0 24px rgba(99, 102, 241, 0.6);
    transform: scale(0.98);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.9), 0 0 32px rgba(99, 102, 241, 0.8);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), 0 0 20px rgba(99, 102, 241, 0.3);
    transform: scale(1);
  }
}

/* -------------------------------------------------------------
   Docked Visual Wardrobe Drawer
   ------------------------------------------------------------- */
.ps-art-card.is-inspecting {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.7), 0 8px 24px rgba(99, 102, 241, 0.4) !important;
  transform: translateY(-2px);
}

.ps-docked-drawer {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: linear-gradient(180deg, rgba(14, 20, 34, 0.98) 0%, rgba(9, 13, 22, 0.99) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.8), 0 -2px 12px rgba(99, 102, 241, 0.2);
  border-radius: 16px 16px 0 0;
  padding: 12px 20px 16px;
  z-index: 50;
  backdrop-filter: blur(16px);
  display: none;
  flex-direction: column;
  gap: 10px;
  animation: slideUpDrawer 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUpDrawer {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.ps-docked-drawer.is-open {
  display: flex;
}

.ps-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.ps-drawer-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ps-drawer-kicker {
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--accent, #6366f1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  padding: 2px 7px;
  border-radius: 4px;
}

.ps-drawer-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.ps-drawer-meta {
  font-size: 0.74rem;
  color: var(--text-muted, #94a3b8);
}

.ps-drawer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ps-drawer-shelf {
  display: flex;
  align-items: stretch;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.ps-drawer-shelf::-webkit-scrollbar {
  height: 6px;
}

.ps-drawer-shelf::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.ps-drawer-card {
  flex: 0 0 170px;
  display: flex;
  flex-direction: column;
  background: rgba(22, 28, 44, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.ps-drawer-card.is-poster {
  flex: 0 0 120px;
}

.ps-drawer-card:hover {
  border-color: var(--accent, #6366f1);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 14px rgba(99, 102, 241, 0.3);
}

.ps-drawer-card.is-active {
  border-color: var(--accent, #6366f1);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.6), 0 8px 24px rgba(0, 0, 0, 0.7);
  background: rgba(30, 38, 60, 0.95);
}

.ps-drawer-card-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  background: #080c16;
  overflow: hidden;
}

.ps-drawer-card.is-poster .ps-drawer-card-thumb {
  aspect-ratio: 2 / 3;
}

.ps-drawer-base-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ps-drawer-hover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ps-drawer-card:hover .ps-drawer-hover-img {
  opacity: 1;
}

.ps-drawer-badge-inuse {
  position: absolute;
  top: 6px;
  left: 6px;
  background: var(--accent, #6366f1);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  z-index: 5;
}

.ps-drawer-badge-style {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(4px);
  color: #e2e8f0;
  font-size: 0.58rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  z-index: 5;
}

.ps-drawer-card-meta {
  padding: 6px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ps-drawer-card-title {
  font-size: 0.74rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ps-drawer-card-sub {
  font-size: 0.64rem;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
}

.ps-drawer-empty {
  padding: 24px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted, #94a3b8);
  font-style: italic;
}

/* Smart Row Target Popover */
.ps-row-target-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #182033;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9);
  padding: 8px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: popoverFadeIn 0.18s ease;
}
@keyframes popoverFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.ps-row-target-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 6px;
}
.ps-row-target-list {
  max-height: 180px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ps-row-target-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 10px;
  border-radius: 7px;
  background: transparent;
  border: none;
  color: #e2e8f0;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease;
  font-family: inherit;
}
.ps-row-target-option:hover {
  background: rgba(99, 102, 241, 0.2);
  color: #fff;
}
.ps-row-target-option.is-new-row {
  color: var(--accent-light, #a78bfa);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 3px;
  padding-top: 8px;
}
.ps-row-target-count {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted, #94a3b8);
}

.ps-column {
  display: flex;
  flex-direction: column;
  background: #111623;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  overflow: hidden;
  min-height: 0;
  height: 100%;
}

.ps-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
}
.ps-col-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
}
.ps-col-subtitle {
  font-size: 0.78rem;
  color: #8fa0b5;
  margin-top: 2px;
  display: block;
}

/* Left Column: Categories List */
.ps-categories-scroller {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.ps-cat-card {
  background: #161c2c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  min-height: 52px;
  transition: all 0.18s ease;
}
.ps-cat-card:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: #182032;
}
.ps-cat-card.is-expanded {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: #141928;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.ps-cat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  user-select: none;
  min-height: 50px;
  box-sizing: border-box;
}
.ps-cat-drag-handle {
  display: flex;
  gap: 4px;
}
.ps-cat-title-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ps-cat-title {
  font-size: 0.94rem;
  font-weight: 600;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ps-cat-count {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--accent-light);
  background: var(--accent-subtle);
  padding: 2px 8px;
  border-radius: 10px;
}
.ps-cat-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Actions kebab — collapses the pin/delete/jump-to-position controls out of
   the always-visible row so titles keep their space at narrow widths, and
   gives reordering a top/bottom shortcut instead of only single-step ▲▼. */
.ps-actions-menu {
  position: relative;
  display: inline-flex;
}
.ps-actions-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 168px;
  background: #1a2033;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}
.ps-actions-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.ps-actions-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 7px;
  background: transparent;
  border: none;
  color: #e2e8f0;
  font-size: 0.82rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.ps-actions-item svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: #94a3b8;
}
.ps-actions-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.ps-actions-item.ps-actions-item-danger {
  color: #f87171;
}
.ps-actions-item.ps-actions-item-danger svg {
  color: #f87171;
}
.ps-actions-item.ps-actions-item-danger:hover {
  background: rgba(239, 68, 68, 0.15);
}
.ps-actions-item.is-active svg {
  color: #fbbf24;
}
.ps-cat-body {
  padding: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: rgba(0, 0, 0, 0.28);
}
.ps-folder-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #192033;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 9px;
  flex-shrink: 0;
  min-height: 54px;
  box-sizing: border-box;
  transition: background 0.15s ease;
}
.ps-folder-row:hover {
  background: #1e263d;
  border-color: rgba(255, 255, 255, 0.12);
}
.ps-folder-thumb {
  width: 58px;
  height: 38px;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.ps-folder-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ps-folder-info {
  flex: 1;
  min-width: 0;
}
.ps-folder-title {
  font-size: 0.86rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ps-folder-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: #94a3b8;
  margin-top: 2px;
}
.ps-badge-shape {
  font-size: 0.65rem;
  padding: 1px 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  font-weight: 600;
  color: #cbd5e1;
}
.ps-badge-sources {
  font-size: 0.72rem;
  color: #64748b;
}
.ps-folder-reorder {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Right Column: Kaptain's Vault */
.ps-vault-toolbar {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.015);
}
.ps-vault-search {
  padding: 10px 14px;
  font-size: 0.88rem;
  background: #161c2c;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #fff;
}
.ps-vault-tabs-scroller {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ps-vault-tabs-scroller::-webkit-scrollbar {
  display: none;
}
.ps-vault-tabs-wrap {
  position: relative;
}
.ps-vault-tabs-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 4px;
  width: 28px;
  background: linear-gradient(to right, transparent, #111623);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.15s ease;
}
.ps-vault-tabs-wrap.at-end::after {
  opacity: 0;
}
.ps-vault-tab {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.76rem;
  background: rgba(255, 255, 255, 0.05);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.ps-vault-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.ps-vault-tab.active {
  background: var(--accent);
  color: var(--on-secondary);
  border-color: var(--accent);
  font-weight: 600;
  box-shadow: 0 2px 10px var(--accent-glow);
}
.ps-vault-grid {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 12px;
  align-content: start;
  min-height: 0;
}
.ps-vault-card {
  display: flex;
  flex-direction: column;
  background: #161c2c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  flex-shrink: 0;
  min-height: 220px;
  height: auto;
  box-sizing: border-box;
}
.ps-vault-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  background: #192033;
}
.ps-vault-card.is-added {
  border-color: rgba(34, 197, 94, 0.4);
}
.ps-vault-added-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(22, 163, 74, 0.9);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.ps-vault-added-badge svg {
  width: 12px;
  height: 12px;
}
.ps-vault-cover {
  width: 100%;
  height: 105px;
  min-height: 105px;
  flex-shrink: 0;
  position: relative;
  background: #000;
  overflow: hidden;
}
.ps-vault-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ps-vault-cat-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(6px);
  color: #cbd5e1;
  font-size: 0.64rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ps-vault-info {
  padding: 10px 10px 6px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
}
.ps-vault-title {
  font-size: 0.84rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ps-vault-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: #94a3b8;
}
.ps-btn-vault-add {
  margin: 0 8px 8px;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--accent-subtle);
  color: var(--accent-light);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  cursor: pointer;
  transition: all 0.15s ease;
}
.ps-btn-vault-add:hover {
  background: var(--accent);
  color: var(--on-secondary);
  border-color: var(--accent);
  box-shadow: 0 2px 8px var(--accent-glow);
}

/* Bottom Bar */
.ps-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #101522;
  flex-shrink: 0;
}
.ps-diff-summary {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ps-diff-pill {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
}
.ps-diff-added {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.ps-diff-removed {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.ps-diff-reordered {
  background: var(--accent-subtle);
  color: var(--accent-light);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Custom Scrollbars */
.ps-categories-scroller::-webkit-scrollbar,
.ps-vault-grid::-webkit-scrollbar {
  width: 6px;
}
.ps-categories-scroller::-webkit-scrollbar-track,
.ps-vault-grid::-webkit-scrollbar-track {
  background: transparent;
}
.ps-categories-scroller::-webkit-scrollbar-thumb,
.ps-vault-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}
.ps-categories-scroller::-webkit-scrollbar-thumb:hover,
.ps-vault-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* Loading & Empty States */
.ps-empty-state,
.ps-empty-category,
.ps-empty-vault {
  padding: 24px;
  text-align: center;
  color: #64748b;
  font-size: 0.84rem;
}
.ps-loading-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 16px;
  padding: 60px 20px;
}
.ps-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: ps-spin 0.8s linear infinite;
}
@keyframes ps-spin {
  to {
    transform: rotate(360deg);
  }
}
.ps-loading-text {
  font-size: 0.95rem;
  color: #94a3b8;
  margin: 0;
}

/* ==========================================================================
   STEP 4: CONFIRM & PUSH — the highest-stakes screen (irreversible write to
   a real TV) had zero CSS beyond the shared button system; it rendered as a
   bare stacked text list. This is the screen that should feel MOST
   reassuring, not least.
   ========================================================================== */
.ps-confirm-body {
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
  gap: 18px;
}
.ps-summary-card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background: var(--bg-elevated);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px 10px;
}
.ps-summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}
.ps-stat-value {
  font-size: 1.7rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}
.ps-stat-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ps-stat-added .ps-stat-value {
  color: #4ade80;
}
.ps-stat-removed .ps-stat-value {
  color: #f87171;
}

.ps-backup-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--accent-subtle);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.5;
}
.ps-backup-notice svg {
  color: var(--accent-light);
  margin-top: 1px;
}

.ps-confirm-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 0.84rem;
}

.ps-diff-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ps-diff-detail h4 {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ps-diffchip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ps-diffchip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 5px;
  background: #161c2c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  max-width: 220px;
}
.ps-diffchip-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  background: #000;
  flex-shrink: 0;
}
.ps-diffchip-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ps-diffchip-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ps-diffchip.is-added {
  border-color: rgba(34, 197, 94, 0.35);
}
.ps-diffchip.is-added .ps-diffchip-title {
  color: #86efac;
}
.ps-diffchip.is-removed {
  border-color: rgba(239, 68, 68, 0.3);
}
.ps-diffchip.is-removed .ps-diffchip-title {
  color: #fca5a5;
  text-decoration: line-through;
  text-decoration-color: rgba(252, 165, 165, 0.5);
}
.ps-diffchip-more {
  align-self: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: 5px 4px;
}

.ps-categories-preview h4 {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ps-order-list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #cbd5e1;
  font-size: 0.86rem;
}
.ps-order-list li strong {
  color: #fff;
}

.ps-confirm-actions,
.ps-confirm-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/* ==========================================================================
   STEP 5: SUCCESS
   ========================================================================== */
.ps-success-icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 4px;
  filter: drop-shadow(0 4px 16px var(--accent-glow));
}
.ps-success-body {
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
  gap: 18px;
  align-items: stretch;
}
.ps-success-tip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: var(--text-secondary);
  font-size: 0.86rem;
  line-height: 1.5;
}
.ps-success-tip svg {
  color: var(--accent-light);
  margin-top: 2px;
  flex-shrink: 0;
}
.ps-success-tip strong {
  color: #fff;
  display: block;
  margin-bottom: 2px;
}
.ps-success-tip p {
  margin: 0;
}
.ps-success-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Responsive */
@media (max-width: 768px) {
  .ps-mode-tab {
    padding: 6px 12px;
    font-size: 0.78rem;
    gap: 6px;
  }
  .ps-mode-tab svg {
    width: 15px;
    height: 15px;
  }
  .ps-art-card {
    flex: 0 0 200px;
  }
  .ps-canvas-layout {
    padding: 10px 12px;
  }
  .ps-panel {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    max-height: none;
  }
  .ps-overlay {
    padding: 0;
  }
  .ps-summary-card {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 16px;
  }
}

@media (max-width: 520px) {
  .ps-mode-nav-bar {
    padding: 6px 10px 8px;
  }
  .ps-mode-tabs {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .ps-mode-tab {
    padding: 6px 8px;
    font-size: 0.72rem;
    gap: 4px;
    flex: 1;
    justify-content: center;
  }
  .ps-art-card {
    flex: 0 0 170px;
  }
  /* Icon clusters were eating almost all the horizontal room, truncating
     "Continue Watching" down to "Co…". The kebab menu already moved the
     rarer actions out of the row; here the two that remain visible (▲▼)
     get tighter, and titles are allowed to wrap instead of vanishing. */
  .ps-cat-title,
  .ps-folder-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ps-cat-header {
    align-items: flex-start;
    flex-wrap: nowrap;
  }
  .ps-btn-icon {
    width: 30px;
    height: 30px;
  }
  .ps-folder-thumb {
    width: 46px;
    height: 32px;
  }
  .ps-vault-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

/* ==========================================================================
   Profile Studio Marketplace: Curated Shelves, Artwork Wardrobe & Drops
   ========================================================================== */

/* Marketplace Navigation Bar */
.ps-market-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 12px;
  background: rgba(10, 14, 24, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.ps-market-tab {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-muted, #94a3b8);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.18s ease;
}
.ps-market-tab:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.05);
}
.ps-market-tab.active {
  color: #fff;
  background: var(--accent, #6366f1);
  border-color: var(--accent, #6366f1);
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.4);
}

/* Creator Filter Pills */
.ps-creator-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px 6px;
}
.ps-creator-pills {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ps-creator-pill {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.76rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  transition: all 0.15s ease;
}
.ps-creator-pill:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.ps-creator-pill.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
}
.ps-creator-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ps-creator-tag-kaptain {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}
.ps-creator-tag-kaoxt {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
}
.ps-creator-tag-community {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.4);
}

/* Curated Shelves Grid */
.ps-shelves-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 18px 24px;
  overflow-y: auto;
  flex: 1;
}
.ps-shelf-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.ps-shelf-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}
.ps-shelf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ps-shelf-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ps-shelf-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.ps-shelf-count {
  font-size: 0.76rem;
  color: var(--text-muted, #94a3b8);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: 10px;
}
.ps-shelf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ps-shelf-chip {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.ps-shelf-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Community Drops (Recipes) Grid */
.ps-drops-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 18px 24px;
  overflow-y: auto;
  flex: 1;
}
.ps-drops-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ps-drop-card {
  background: linear-gradient(135deg, rgba(30, 38, 58, 0.5) 0%, rgba(15, 20, 32, 0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  transition: all 0.22s ease;
}
.ps-drop-card:hover {
  border-color: var(--accent, #6366f1);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(99, 102, 241, 0.15);
}
.ps-drop-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: #f59e0b;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ps-drop-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.ps-drop-creator {
  font-size: 0.78rem;
  color: var(--text-muted, #94a3b8);
}
.ps-drop-tagline {
  font-size: 0.82rem;
  color: #cbd5e1;
  line-height: 1.4;
  margin: 0;
}
.ps-drop-rows {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.ps-drop-row-pill {
  font-size: 0.72rem;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(99, 102, 241, 0.12);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.25);
  font-weight: 500;
}
.ps-drop-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  justify-content: flex-end;
}

/* Artwork Wardrobe Modal */
.ps-wardrobe-overlay {
  position: absolute;
  inset: 0;
  z-index: 100020;
  background: rgba(4, 7, 16, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.ps-wardrobe-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.ps-wardrobe-panel {
  width: min(94vw, 860px);
  max-height: min(92vh, 800px);
  background: var(--bg-elevated, #0f1422);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.ps-wardrobe-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ps-wardrobe-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ps-wardrobe-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.ps-wardrobe-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted, #94a3b8);
}
.ps-wardrobe-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Hero Comparison Stage (Large, Beautiful Side-by-Side) */
.ps-hero-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.ps-hero-card-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ps-hero-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #94a3b8);
}
.ps-hero-card-header .is-accent {
  color: var(--accent-light, #a5b4fc);
}
.ps-hero-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #090d18;
  border: 1.5px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.ps-hero-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7);
}
.ps-hero-card.is-candidate {
  border-color: var(--accent, #6366f1);
  box-shadow: 0 0 28px rgba(99, 102, 241, 0.28), 0 8px 30px rgba(0, 0, 0, 0.5);
}
.ps-hero-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #05070e;
}
.ps-hero-card.is-poster .ps-hero-thumb {
  aspect-ratio: 2 / 3;
}
.ps-hero-base-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ps-hero-hover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.ps-hero-card:hover .ps-hero-hover-img {
  opacity: 1;
}
.ps-hero-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.75);
  color: rgba(255, 255, 255, 0.9);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.ps-hero-card-meta {
  padding: 10px 14px;
  background: rgba(13, 18, 30, 0.95);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.ps-hero-card-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
}
.ps-hero-card-sub {
  font-size: 0.72rem;
  color: var(--text-muted, #94a3b8);
}

/* Style Selector Shelf */
.ps-shelf-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ps-shelf-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ps-shelf-section-title {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  margin: 0;
}
.ps-shelf-tab-bar {
  display: flex;
  gap: 6px;
}
.ps-shelf-tab {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted, #94a3b8);
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ps-shelf-tab.active {
  background: rgba(99, 102, 241, 0.15);
  border-color: var(--accent, #6366f1);
  color: #fff;
}
.ps-shelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.ps-shelf-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.15s ease;
  position: relative;
}
.ps-shelf-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}
.ps-shelf-item.is-selected {
  background: rgba(99, 102, 241, 0.12);
  border-color: var(--accent, #6366f1);
  box-shadow: 0 0 14px rgba(99, 102, 241, 0.3);
}
.ps-shelf-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ps-shelf-item-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ps-shelf-item-meta {
  font-size: 0.7rem;
  color: var(--text-muted, #94a3b8);
}
.ps-current-pill {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(34, 197, 94, 0.22);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.45);
  padding: 2px 7px;
  border-radius: 4px;
}
.ps-tag-kaptain {
  background: rgba(245, 158, 11, 0.18) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
}
.ps-tag-kaptain-v1 {
  background: rgba(234, 88, 12, 0.18) !important;
  color: #fdba74 !important;
  border: 1px solid rgba(234, 88, 12, 0.35) !important;
}
.ps-tag-kaoxt {
  background: rgba(56, 189, 248, 0.18) !important;
  color: #7dd3fc !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
}
.ps-tag-studio {
  background: rgba(168, 85, 247, 0.18) !important;
  color: #d8b4fe !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
}

/* Wardrobe Footer */
.ps-wardrobe-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 14, 24, 0.6);
}
.ps-wardrobe-footer-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Custom Art Form */
.ps-custom-art-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 500px;
}

/* Mobile Segmented Toggle (hidden on desktop, visible on <= 640px) */
.ps-mobile-stage-toggle {
  display: none;
}

@media (max-width: 640px) {
  .ps-wardrobe-panel {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
  }
  .ps-wardrobe-header {
    padding: 12px 16px;
  }
  .ps-wardrobe-body {
    padding: 14px 16px;
    gap: 14px;
  }
  .ps-mobile-stage-toggle {
    display: flex;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 3px;
    gap: 4px;
    margin-bottom: 2px;
  }
  .ps-mobile-toggle-btn {
    flex: 1;
    padding: 7px 10px;
    border: none;
    background: transparent;
    color: var(--text-muted, #94a3b8);
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease;
  }
  .ps-mobile-toggle-btn.active {
    background: var(--accent, #6366f1);
    color: #fff;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
  }
  .ps-hero-stage {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .ps-hero-card-wrap.ps-mobile-hidden {
    display: none !important;
  }
  .ps-shelf-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .ps-wardrobe-footer {
    padding: 12px 16px;
    flex-direction: column-reverse;
    gap: 10px;
  }
  .ps-wardrobe-footer-right {
    width: 100%;
    justify-content: flex-end;
  }
  .ps-wardrobe-footer-right button {
    flex: 1;
  }
  #ps-btn-wardrobe-apply-row {
    width: 100%;
    text-align: center;
  }
}

/* ==========================================================================
   FULLSCREEN HIGH-RES LIGHTBOX MODAL
   ========================================================================== */
.ps-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 100050;
  background: rgba(2, 4, 10, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.ps-lightbox-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.ps-lightbox-panel {
  width: min(94vw, 1180px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ps-lightbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}
.ps-lightbox-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ps-lightbox-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.ps-lightbox-meta {
  font-size: 0.8rem;
  color: var(--text-muted, #94a3b8);
}
.ps-lightbox-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ps-lightbox-viewport {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  max-height: 68vh;
  background: radial-gradient(circle at center, rgba(30, 41, 69, 0.4) 0%, rgba(8, 12, 22, 0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.85);
}
.ps-lightbox-display-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s ease;
}
.ps-lightbox-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px;
}

/* ==========================================================================
   BATCH ARTWORK STYLE SWAPPER MODAL
   ========================================================================== */
.ps-batch-art-overlay {
  position: fixed;
  inset: 0;
  z-index: 100040;
  background: rgba(3, 6, 14, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.ps-batch-art-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.ps-batch-art-panel {
  width: min(94vw, 760px);
  max-height: min(90vh, 740px);
  background: var(--bg-elevated, #101626);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.95);
}
.ps-batch-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ps-batch-body {
  padding: 20px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ps-batch-section-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  margin: 0;
}
.ps-batch-style-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.ps-batch-style-card {
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.18s ease;
}
.ps-batch-style-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}
.ps-batch-style-card.is-active {
  background: rgba(99, 102, 241, 0.12);
  border-color: var(--accent, #6366f1);
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.3);
}
.ps-batch-style-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
}
.ps-batch-style-desc {
  font-size: 0.72rem;
  color: var(--text-muted, #94a3b8);
  line-height: 1.35;
}
.ps-batch-impact-box {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ps-batch-stat-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ps-batch-stat-pill {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
}
.ps-batch-stat-pill.is-update {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #86efac;
}
.ps-batch-stat-pill.is-unchanged {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted, #94a3b8);
}
.ps-batch-stat-num {
  font-size: 1.3rem;
  font-weight: 800;
  color: inherit;
}
.ps-batch-stat-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: inherit;
}
.ps-batch-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 140px;
  overflow-y: auto;
  padding-right: 4px;
}
.ps-batch-chip {
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}
.ps-batch-chip.is-updated {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.3);
  color: #86efac;
}
.ps-batch-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 14, 24, 0.6);
}

/* ==========================================================================
   Art Studio Sub-View Toggle & Universal Art Vault Lookbook
   ========================================================================== */
.ps-subview-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 3px;
  gap: 3px;
}

.ps-subview-toggle-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 20px;
  background: transparent;
  border: none;
  color: var(--text-muted, #94a3b8);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
}

.ps-subview-toggle-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.ps-subview-toggle-btn.active {
  background: var(--accent, #6366f1);
  color: #fff;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.4);
}

.ps-subview-count {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
}

.ps-subview-toggle-btn.active .ps-subview-count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.ps-vault-count-badge {
  background: rgba(245, 158, 11, 0.25) !important;
  color: #fbbf24 !important;
}

.ps-subview-toggle-btn.active .ps-vault-count-badge {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
}

/* ==========================================================================
   ART VAULT: CLEAN HYBRID GALLERY (Option C)
   Compact 2-Row Toolbar (~75px), Unified Aesthetics, My TV Filter, Shape Toggles
   ========================================================================== */

/* Art Vault Container */
.ps-art-vault-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: 0 18px 24px;
  gap: 14px;
}

/* Compact 2-Row Sticky Toolbar */
.ps-vault-compact-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Row 1: Aesthetics Tabs + Actions (My TV, Shape, Total Count) */
.ps-vault-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Aesthetic Filter Tabs (Segmented Control) */
.ps-vault-style-tabs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(0, 0, 0, 0.35);
  padding: 3px 4px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}

.ps-vault-style-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.16s ease;
  font-family: inherit;
  white-space: nowrap;
}

.ps-vault-style-tab:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

.ps-vault-style-tab.active {
  background: rgba(99, 102, 241, 0.22);
  border: 1px solid rgba(99, 102, 241, 0.45);
  color: #fff;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.ps-vault-style-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ps-vault-style-count {
  font-size: 0.67rem;
  color: #64748b;
  background: rgba(0, 0, 0, 0.35);
  padding: 1px 6px;
  border-radius: 10px;
}

.ps-vault-style-tab.active .ps-vault-style-count {
  color: #c7d2fe;
  background: rgba(99, 102, 241, 0.35);
}

/* Top Right Actions Group */
.ps-vault-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* "My TV Folders Only" Toggle Button */
.ps-btn-vault-mytv {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #cbd5e1;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
  white-space: nowrap;
}

.ps-btn-vault-mytv:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
}

.ps-btn-vault-mytv.is-active {
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(34, 197, 94, 0.55);
  color: #4ade80;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.25);
}

.ps-mytv-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #64748b;
  transition: all 0.2s ease;
}

.ps-btn-vault-mytv.is-active .ps-mytv-dot {
  background: #4ade80;
  box-shadow: 0 0 6px #4ade80;
}

/* Aspect Ratio Selector (All / Landscape / Poster) */
.ps-vault-shape-selector {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(0, 0, 0, 0.35);
  padding: 2px 3px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ps-vault-shape-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.14s ease;
  font-family: inherit;
}

.ps-vault-shape-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.ps-vault-shape-btn.active {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-weight: 700;
}

/* Results Count Badge */
.ps-vault-results-badge {
  font-size: 0.72rem;
  font-weight: 600;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}

/* Row 2: Search Input + Category Chips */
.ps-vault-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ps-vault-search-box {
  position: relative;
  flex: 0 0 260px;
  max-width: 320px;
}

.ps-vault-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--text-muted, #94a3b8);
  pointer-events: none;
}

.ps-art-col-header {
  padding: 10px 20px 10px 20px !important;
  margin-bottom: 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ps-art-tools-cluster {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ps-btn-toggle-motion {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  font-size: 0.77rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.16s ease;
  font-family: inherit;
}

.ps-btn-toggle-motion:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.ps-btn-toggle-motion.is-disabled-active {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

.ps-btn-toggle-motion.is-disabled-active:hover {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.5);
  color: #fef3c7;
}

.ps-motion-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.ps-motion-dot.is-motion {
  background: #38bdf8;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.75);
}

.ps-motion-dot.is-disabled {
  background: #f59e0b;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.75);
}

.ps-btn-batch-swapper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.77rem;
  padding: 5px 12px;
  border-radius: 8px;
}

.ps-btn-row-toggle-gifs {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.73rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
}

.ps-btn-row-toggle-gifs.is-disabled-active {
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: #fbbf24 !important;
}

.ps-btn-row-toggle-gifs.is-disabled-active:hover {
  background: rgba(245, 158, 11, 0.18) !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
  color: #fef3c7 !important;
}

.ps-vault-search-compact {
  width: 100%;
  height: 30px;
  padding: 5px 28px 5px 34px !important;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  color: #fff;
  font-size: 0.77rem;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color 0.16s ease;
}

.ps-vault-search-compact:focus {
  outline: none;
  border-color: var(--accent, #6366f1);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.ps-vault-search-clear {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted, #94a3b8);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 1px 5px;
  line-height: 1;
}

.ps-vault-category-chips {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}

.ps-vault-category-chips::-webkit-scrollbar {
  display: none;
}

.ps-vault-cat-chip {
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted, #94a3b8);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.14s ease;
  font-family: inherit;
}

.ps-vault-cat-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.ps-vault-cat-chip.active {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.26);
  color: #fff;
  font-weight: 600;
}

/* Compact Dropdown Selector for Discover Vault & Art Lookbook */
.ps-select-compact {
  height: 30px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  color: #e2e8f0;
  font-size: 0.77rem;
  font-weight: 600;
  padding: 4px 28px 4px 10px;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 13px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
  flex-shrink: 0;
}

.ps-select-compact:hover {
  border-color: rgba(255, 255, 255, 0.22);
}

.ps-select-compact:focus {
  outline: none;
  border-color: var(--accent, #6366f1);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.ps-select-compact option {
  background: #0f172a;
  color: #fff;
  padding: 6px;
}

/* Streamlined Folders & Art Vault Bars */
.ps-folders-unified-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  flex-wrap: wrap;
}

.ps-folders-filter-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ps-vault-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Art Vault Grid */
.ps-art-vault-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: 13px;
}

.ps-vault-card {
  background: #141a29;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  position: relative;
}

.ps-vault-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
}

.ps-vault-card.is-active {
  border-color: rgba(34, 197, 94, 0.55);
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.16);
}

.ps-vault-card.in-profile {
  border-color: rgba(99, 102, 241, 0.35);
}

.ps-vault-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.ps-vault-card.is-poster .ps-vault-card-thumb {
  aspect-ratio: 2 / 3;
}

.ps-vault-base-img,
.ps-vault-hover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ps-vault-hover-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.ps-vault-card:hover .ps-vault-hover-img {
  opacity: 1;
}

.ps-vault-badge-tag {
  position: absolute;
  top: 7px;
  left: 7px;
  background: rgba(7, 10, 19, 0.86);
  backdrop-filter: blur(6px);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.63rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ps-vault-badge-active {
  position: absolute;
  top: 7px;
  right: 32px;
  background: rgba(22, 163, 74, 0.92);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}

.ps-vault-badge-inprofile {
  position: absolute;
  top: 7px;
  right: 32px;
  background: rgba(99, 102, 241, 0.88);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}

.ps-vault-zoom-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.ps-vault-zoom-btn:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.92);
  color: #fff;
}

.ps-vault-card-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  flex: 1;
}

.ps-vault-card-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ps-vault-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.ps-vault-card-title {
  font-size: 0.83rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

/* In-Card Style Variant Dots */
.ps-vault-variants-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 2px 5px;
  flex-shrink: 0;
}

.ps-vault-variant-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.6;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.ps-vault-variant-dot.is-current {
  opacity: 1;
  transform: scale(1.25);
}

.ps-vault-card-meta {
  font-size: 0.68rem;
  color: var(--text-muted, #94a3b8);
}

.ps-vault-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ps-vault-status-text {
  font-size: 0.72rem;
  font-weight: 600;
  color: #4ade80;
}

.ps-btn-vault-swap {
  background: rgba(99, 102, 241, 0.22) !important;
  color: #a5b4fc !important;
  border: 1px solid rgba(99, 102, 241, 0.45) !important;
  font-weight: 700 !important;
  width: 100%;
}

.ps-btn-vault-swap:hover {
  background: var(--accent, #6366f1) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.4) !important;
}

.ps-btn-vault-add {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-weight: 600 !important;
  width: 100%;
}

.ps-btn-vault-add:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}

.ps-vault-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
}

.ps-vault-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ps-vault-empty h4 {
  margin: 0;
  font-size: 1rem;
  color: #fff;
}

.ps-vault-empty p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted, #94a3b8);
  max-width: 400px;
}

/* ==========================================================================
   PROFILE STUDIO: UNIFIED HEADER, DRAG & DROP, COMPACT MARKETPLACE & COLLECTIONS
   ========================================================================== */

/* Unified Compact Header: Centered Mode Tabs (Eliminates extra nav bar) */
.ps-header-unified {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  padding: 10px 20px !important;
  position: relative;
  min-height: 52px;
  background: var(--bg-elevated, #141926);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  gap: 12px;
}
.ps-header-unified .ps-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.ps-header-unified .ps-header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
}
.ps-header-unified .ps-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ps-header-unified .ps-btn-unified-close {
  position: static !important;
  flex-shrink: 0;
}
@media (max-width: 980px) {
  .ps-header-unified {
    display: grid !important;
    grid-template-columns: 1fr auto auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "left actions close"
      "center center center" !important;
    gap: 8px 10px !important;
    padding: 10px 16px !important;
  }
  .ps-header-unified .ps-header-left {
    grid-area: left;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .ps-header-unified .ps-header-left #ps-btn-back-profiles {
    font-size: 0.76rem !important;
    padding: 4px 8px !important;
    white-space: nowrap !important;
  }
  .ps-header-unified .ps-header-profile-badge {
    padding: 3px 8px !important;
    font-size: 0.74rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 220px !important;
  }
  .ps-header-unified .ps-header-right {
    grid-area: actions;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .ps-header-unified .ps-header-right .ps-btn {
    font-size: 0.76rem !important;
    padding: 4px 10px !important;
    white-space: nowrap !important;
  }
  .ps-header-unified .ps-btn-unified-close {
    grid-area: close;
    position: static !important;
    align-self: center !important;
    justify-self: end !important;
  }
  .ps-header-unified .ps-header-center {
    grid-area: center;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin: 2px 0 0 !important;
  }
  .ps-header-unified .ps-mode-tabs {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    padding: 3px !important;
  }
  .ps-header-unified .ps-mode-tab {
    flex: 1 !important;
    justify-content: center !important;
    padding: 6px 8px !important;
    font-size: 0.76rem !important;
    gap: 5px !important;
  }
  .ps-header-unified .ps-mode-tab svg {
    width: 14px !important;
    height: 14px !important;
  }
}

.ps-back-text-short,
.ps-mode-text-short {
  display: none;
}

@media (max-width: 600px) {
  .ps-back-text-full,
  .ps-mode-text-full {
    display: none !important;
  }
  .ps-back-text-short,
  .ps-mode-text-short {
    display: inline !important;
  }
  .ps-header-profile-badge .ps-profile-label {
    display: none !important;
  }
  .ps-header-unified .ps-header-left #ps-btn-back-profiles {
    font-size: 0.72rem !important;
    padding: 3px 6px !important;
  }
  .ps-header-unified .ps-header-profile-badge {
    padding: 2px 6px !important;
    font-size: 0.72rem !important;
    max-width: 120px !important;
  }
  .ps-header-unified .ps-mode-tab {
    padding: 5px 3px !important;
    font-size: 0.72rem !important;
    gap: 3px !important;
  }
  .ps-header-unified .ps-mode-tab svg {
    width: 12px !important;
    height: 12px !important;
  }
  .ps-header-unified .ps-mode-badge {
    font-size: 0.65rem !important;
    padding: 1px 4px !important;
  }
}

/* Drag and Drop Indicators & Grips */
.ps-drag-grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 24px;
  color: #64748b;
  cursor: grab;
  flex-shrink: 0;
  transition: color 0.15s ease;
  user-select: none;
  margin-right: 2px;
}
.ps-drag-grip svg {
  width: 15px;
  height: 15px;
}
.ps-cat-card:hover .ps-drag-grip,
.ps-folder-row:hover .ps-drag-grip {
  color: #cbd5e1;
}
.ps-drag-grip:active {
  cursor: grabbing;
}
.ps-cat-card[draggable="true"],
.ps-folder-row[draggable="true"] {
  cursor: default;
}
.ps-cat-card.is-dragging,
.ps-folder-row.is-dragging {
  opacity: 0.45;
  border-style: dashed;
  border-color: var(--accent, #6366f1);
  transform: scale(0.99);
}
.ps-drop-above {
  position: relative;
}
.ps-drop-above::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 6px;
  right: 6px;
  height: 4px;
  background: var(--accent, #6366f1);
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.8);
  pointer-events: none;
  z-index: 20;
}
.ps-drop-below {
  position: relative;
}
.ps-drop-below::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 6px;
  right: 6px;
  height: 4px;
  background: var(--accent, #6366f1);
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.8);
  pointer-events: none;
  z-index: 20;
}

/* Marketplace Consolidated Navigation Bar */
.ps-market-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: rgba(13, 17, 28, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  gap: 8px;
  flex-shrink: 0;
  min-height: 42px;
}
.ps-market-subnav {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  padding: 2px;
  gap: 2px;
}
.ps-market-subtab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--text-muted, #94a3b8);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  white-space: nowrap;
}
.ps-market-subtab svg {
  width: 13px;
  height: 13px;
}
.ps-market-subtab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.ps-market-subtab.active {
  background: var(--accent, #6366f1);
  color: #fff;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}

.ps-creator-pills-compact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ps-creator-label {
  font-size: 0.7rem;
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
}
.ps-creator-pill {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ps-creator-pill:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.ps-creator-pill.active {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.ps-market-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Hide Installed Toggle Switch */
.ps-btn-hide-installed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  user-select: none;
  white-space: nowrap;
}
.ps-btn-hide-installed:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}
.ps-btn-hide-installed.is-hiding {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.35);
  color: #c7d2fe;
}
.ps-hide-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #64748b;
  transition: background 0.15s ease;
}
.ps-btn-hide-installed.is-hiding .ps-hide-dot {
  background: #4ade80;
  box-shadow: 0 0 6px #4ade80;
}

.ps-market-count-badge {
  font-size: 0.72rem;
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
  white-space: nowrap;
}

/* Compact Search & Category Chips Row */
.ps-market-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: rgba(17, 22, 35, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.ps-market-search-box {
  flex: 0 0 240px;
}
.ps-vault-search-compact {
  width: 100%;
  padding: 6px 12px;
  font-size: 0.78rem;
  background: #141926;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
}
.ps-vault-tabs-scroller-compact {
  flex: 1;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ps-vault-tabs-scroller-compact::-webkit-scrollbar {
  display: none;
}

/* Collections Showcase View */
.ps-collections-view {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ps-collections-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ps-collections-heading {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
}
.ps-collections-subheading {
  font-size: 0.8rem;
  color: var(--text-muted, #94a3b8);
  margin: 3px 0 0;
  max-width: 720px;
}
.ps-collections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 18px;
}
.ps-collection-card {
  background: #141928;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.ps-collection-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}
.ps-collection-card-hero {
  padding: 14px 16px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ps-collection-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.ps-collection-badge {
  font-size: 0.64rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ps-collection-author-pill {
  font-size: 0.72rem;
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
}
.ps-collection-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
}
.ps-collection-tagline {
  font-size: 0.74rem;
  color: #a5b4fc;
  margin: 4px 0 0;
  font-weight: 500;
}
.ps-collection-card-body {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.ps-collection-desc {
  font-size: 0.78rem;
  color: #cbd5e1;
  line-height: 1.45;
  margin: 0;
}
.ps-collection-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 9px;
  padding: 8px 10px;
}
.ps-spec-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ps-spec-label {
  font-size: 0.62rem;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ps-spec-value {
  font-size: 0.76rem;
  color: #fff;
  font-weight: 700;
}
.ps-collection-preview-strip {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ps-preview-strip-label {
  font-size: 0.68rem;
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ps-preview-strip-track {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ps-preview-strip-track::-webkit-scrollbar {
  display: none;
}
.ps-preview-thumb {
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.ps-preview-thumb.is-landscape {
  width: 90px;
  height: 50px;
}
.ps-preview-thumb.is-poster {
  width: 42px;
  height: 60px;
}
.ps-preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ps-collection-card-actions {
  display: flex;
  gap: 8px;
  padding-top: 4px;
}
.ps-collection-card-actions .ps-btn {
  flex: 1;
}

/* Full Collection Cinematic Preview Modal */
.ps-collection-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 5, 12, 0.88);
  backdrop-filter: blur(14px);
  z-index: 21500; /* title screen rule: >20000 */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  padding: 24px;
  box-sizing: border-box;
}
.ps-collection-modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.ps-col-modal-dialog {
  width: min(94vw, 1100px);
  max-height: 90vh;
  background: #0f1422;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.95);
  animation: colModalScale 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes colModalScale {
  from { transform: scale(0.96) translateY(8px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.ps-col-modal-header {
  padding: 16px 22px;
  background: #141a2a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ps-col-modal-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}
.ps-col-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ps-col-author-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 18px;
  gap: 16px;
}
.ps-col-author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ps-col-author-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}
.ps-col-author-bio {
  font-size: 0.78rem;
  color: #94a3b8;
  max-width: 560px;
  margin: 2px 0 0;
}
.ps-col-author-links {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.ps-author-link-pill {
  font-size: 0.72rem;
  color: #cbd5e1;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.06);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.15s ease;
}
.ps-author-link-pill:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.ps-btn-donate-author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ff5e5b;
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(255, 94, 91, 0.4);
}
.ps-btn-donate-author:hover {
  background: #ff4744;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255, 94, 91, 0.6);
}

.ps-col-preview-rows-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ps-preview-row-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ps-preview-row-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ps-preview-row-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
}
.ps-preview-row-badge {
  font-size: 0.68rem;
  color: var(--accent-light, #a78bfa);
  background: var(--accent-subtle, rgba(99, 102, 241, 0.15));
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 600;
}
.ps-preview-row-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.ps-preview-card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ps-preview-card.is-landscape {
  width: 170px;
}
.ps-preview-card.is-poster {
  width: 105px;
}
.ps-preview-card-thumb {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.ps-preview-card.is-landscape .ps-preview-card-thumb {
  aspect-ratio: 16 / 9;
}
.ps-preview-card.is-poster .ps-preview-card-thumb {
  aspect-ratio: 2 / 3;
}
.ps-preview-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ps-preview-shape-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  background: rgba(0, 0, 0, 0.75);
  color: #cbd5e1;
  font-size: 0.55rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
}
.ps-preview-card-title {
  font-size: 0.74rem;
  font-weight: 600;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ps-col-modal-footer {
  padding: 14px 22px;
  background: #141a2a;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ps-col-modal-footer-note {
  font-size: 0.74rem;
  color: var(--text-muted, #94a3b8);
}
.ps-col-modal-footer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Modal Split Grid & Content Layout */
.ps-col-modal-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ps-col-modal-badge-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.ps-col-modal-author {
  font-size: 0.76rem;
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
}
.ps-col-modal-subtitle {
  font-size: 0.78rem;
  color: #a5b4fc;
  margin: 3px 0 0;
  font-weight: 500;
}

.ps-col-modal-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 820px) {
  .ps-col-modal-split {
    grid-template-columns: 1fr;
  }
}

.ps-col-modal-pane {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ps-col-pane-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
}
.ps-col-pane-text {
  font-size: 0.8rem;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0;
}

.ps-col-spec-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.ps-col-spec-card {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ps-col-spec-val {
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
}

/* Author Profile Box inside Modal */
.ps-author-profile-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ps-author-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ps-author-avatar-badge {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.ps-author-name {
  font-size: 0.96rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}
.ps-author-role {
  font-size: 0.72rem;
  color: #a5b4fc;
  font-weight: 600;
}
.ps-author-bio {
  font-size: 0.78rem;
  color: #cbd5e1;
  line-height: 1.5;
  margin: 0;
}
.ps-author-contact-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.ps-contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
}
.ps-contact-chip:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.ps-author-donate-wrap {
  margin-top: 4px;
}
.ps-btn-donate-author {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ff5e5b;
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(255, 94, 91, 0.35);
  transition: all 0.18s ease;
}
.ps-btn-donate-author:hover {
  background: #ff4744;
  box-shadow: 0 6px 18px rgba(255, 94, 91, 0.55);
  transform: translateY(-1px);
}
.ps-donate-pill {
  background: rgba(0, 0, 0, 0.25);
  padding: 1px 7px;
  border-radius: 6px;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Modal Bottom Preview Section */
.ps-col-modal-preview-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ps-col-preview-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ps-col-preview-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 10px 14px;
}
.ps-preview-row-title-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ps-preview-row-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: #fff;
}
.ps-preview-row-badge {
  font-size: 0.64rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(99, 102, 241, 0.18);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.3);
  text-transform: uppercase;
}
.ps-preview-row-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.ps-preview-card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ps-preview-card.is-landscape {
  width: 140px;
}
.ps-preview-card.is-poster {
  width: 90px;
}
.ps-preview-card-thumb {
  position: relative;
  border-radius: 7px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.ps-preview-card.is-landscape .ps-preview-card-thumb {
  aspect-ratio: 16 / 9;
}
.ps-preview-card.is-poster .ps-preview-card-thumb {
  aspect-ratio: 2 / 3;
}
.ps-preview-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ps-preview-card-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   UNIFIED TV MIRROR (WYSIWYG ARCHITECTURE)
   ========================================================================== */

/* Top Header Pill */
.ps-tv-mirror-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.28);
  padding: 5px 14px;
  border-radius: 20px;
}

.ps-live-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
  animation: psLivePulse 2s infinite ease-in-out;
}

@keyframes psLivePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.ps-tv-mirror-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}

.ps-tv-mirror-count {
  font-size: 0.72rem;
  color: #a5b4fc;
  font-weight: 500;
}

.ps-btn-header-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}

.ps-btn-settings {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

/* Row Left Header Elements (Drag grip & arrows) */
.ps-art-row-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ps-row-drag-handle {
  cursor: grab;
  color: #64748b;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}

.ps-row-drag-handle:hover {
  color: #fff;
}

.ps-art-row.is-dragging {
  opacity: 0.4;
}

.ps-art-row.ps-drop-above {
  border-top: 2px solid #6366f1;
}

.ps-art-row.ps-drop-below {
  border-bottom: 2px solid #6366f1;
}

.ps-row-arrows {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.ps-row-arrows .ps-btn-icon {
  width: 22px;
  height: 22px;
  padding: 2px;
}

/* Floating Action Button (+ Add Row) */
.ps-fab-add-row {
  position: fixed;
  bottom: 84px;
  right: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #6366f1, #4338ca);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 28px;
  padding: 10px 20px;
  font-size: 0.86rem;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.45);
  cursor: pointer;
  z-index: 20050;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
}

.ps-fab-add-row:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 30px rgba(99, 102, 241, 0.6);
  background: linear-gradient(135deg, #4f46e5, #3730a3);
}

@media (max-width: 768px) {
  .ps-fab-add-row {
    display: none !important;
  }
  .ps-art-row-header {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .ps-art-row-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .ps-art-row-title-wrap {
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }
  .ps-art-row-title {
    font-size: 0.95rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .ps-art-row-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }
}

.ps-mirror-bottom-add {
  display: flex;
  justify-content: center;
  padding: 24px 0 60px;
}

/* Wardrobe Drawer Folder Operations */
.ps-drawer-folder-ops {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   SETTINGS MODAL OVERLAY (Z-Index > 20000)
   ========================================================================== */
.ps-settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 7, 15, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 21200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ps-settings-overlay.active {
  display: flex;
}

.ps-settings-card {
  width: 100%;
  max-width: 520px;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  animation: psSettingsPop 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes psSettingsPop {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.ps-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.ps-settings-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}

.ps-settings-title-wrap h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.ps-settings-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ps-settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}

.ps-settings-item-info {
  flex: 1;
  min-width: 0;
}

.ps-settings-item-title {
  display: block;
  font-size: 0.86rem;
  color: #fff;
  margin-bottom: 4px;
}

.ps-settings-item-desc {
  margin: 0;
  font-size: 0.75rem;
  color: #94a3b8;
  line-height: 1.4;
}

/* ==========================================================================
   DISCOVER OVERLAY SHEET (Unified Store & Art Lookbook, Z-Index > 20000)
   ========================================================================== */
.ps-discover-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 6, 14, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 21100;
  display: none;
  align-items: flex-end;
  justify-content: center;
}

.ps-discover-overlay.active {
  display: flex;
}

.ps-discover-panel {
  width: 95vw;
  max-width: 1440px;
  height: 92vh;
  background: #090e1a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.8);
  animation: psSheetSlideUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes psSheetSlideUp {
  from { transform: translateY(60px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.ps-discover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.95);
  flex-shrink: 0;
  gap: 16px;
  flex-wrap: wrap;
}

.ps-discover-header-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

.ps-discover-title-wrap {
  display: flex;
  flex-direction: column;
}

.ps-discover-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}

.ps-discover-subtitle {
  font-size: 0.73rem;
  color: #94a3b8;
  margin-top: 2px;
}

.ps-discover-tab-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 3px;
  gap: 3px;
}

.ps-discover-tab-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 20px;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.16s ease;
  font-family: inherit;
}

.ps-discover-tab-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.ps-discover-tab-btn.active {
  background: var(--accent, #6366f1);
  color: #fff;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.4);
}

.ps-discover-count-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.25);
  color: #fbbf24;
}

.ps-discover-tab-btn.active .ps-discover-count-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.ps-discover-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  position: relative;
}

.ps-art-vault-wrapper {
  height: 100%;
  overflow-y: auto;
}

/* ==========================================================================
   3-Tab Architecture Views: Layout & Art Studio Toolbars
   ========================================================================== */
.ps-layout-studio-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.ps-layout-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: rgba(13, 17, 28, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  gap: 12px;
  flex-shrink: 0;
}

.ps-layout-title-wrap {
  display: flex;
  flex-direction: column;
}

.ps-layout-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ps-categories-bottom-add {
  padding: 12px 0 24px;
}
.ps-categories-bottom-add .ps-btn {
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ps-categories-bottom-add .ps-btn svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
}

.ps-art-studio-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px;
  background: rgba(13, 17, 28, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  gap: 12px;
  flex-shrink: 0;
  min-height: 44px;
}

.ps-art-subview-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  padding: 2px;
  gap: 2px;
}

.ps-subview-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 7px;
  background: transparent;
  border: none;
  color: var(--text-muted, #94a3b8);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  white-space: nowrap;
}

.ps-subview-toggle-btn svg {
  width: 14px;
  height: 14px;
}

.ps-subview-toggle-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.ps-subview-toggle-btn.active {
  background: var(--accent, #6366f1);
  color: #fff;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}

.ps-art-top-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 768px) {
  .ps-layout-top-bar,
  .ps-art-studio-top-bar {
    padding: 8px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .ps-art-top-controls {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
}


/* ==========================================================================
   Avatar picker ("Change picture") — avatar-picker.js
   Sits above every overlay, including Profile Studio (.ps-overlay: 100000).
   ========================================================================== */
.kap-av-overlay {
  position: fixed;
  inset: 0;
  z-index: 100100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(3, 5, 11, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.kap-av-overlay.is-open { opacity: 1; }
.kap-av-sheet {
  position: relative;
  width: min(640px, 100%);
  max-height: min(88vh, 760px);
  display: flex;
  flex-direction: column;
  background: #10141f;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.kap-av-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.kap-av-close:hover { background: rgba(255, 255, 255, 0.14); }
.kap-av-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 56px 16px 22px;
}
.kap-av-preview { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.kap-av-preview-circle {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
}
.kap-av-preview-circle img { width: 100%; height: 100%; object-fit: cover; }
.kap-av-preview-name {
  max-width: 110px;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kap-av-title { margin: 0 0 4px; font-size: 1.25rem; font-weight: 700; }
.kap-av-sub { margin: 0; font-size: 0.86rem; color: var(--text-muted); }
.kap-av-tabs {
  display: flex;
  gap: 6px;
  padding: 0 22px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow-x: auto;
}
.kap-av-tab {
  flex-shrink: 0;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: transparent;
  color: #cbd5e1;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}
.kap-av-tab.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.kap-av-head,
.kap-av-tabs,
.kap-av-foot { flex-shrink: 0; }
.kap-av-body { padding: 16px 22px; overflow-y: auto; flex: 1; min-height: 180px; }
.kap-av-group + .kap-av-group { margin-top: 16px; }
.kap-av-group-title {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.kap-av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 10px; }
.kap-av-tile {
  aspect-ratio: 1;
  padding: 0;
  border: 3px solid transparent;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.kap-av-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kap-av-tile:hover,
.kap-av-tile:focus-visible { transform: scale(1.06); }
.kap-av-tile.is-on { border-color: #fff; box-shadow: 0 0 0 3px var(--accent); }
.kap-av-field { display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem; font-weight: 600; }
.kap-av-input {
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: #0b0e16;
  color: #fff;
  font-size: 0.92rem;
}
.kap-av-input:focus { outline: none; border-color: var(--accent); }
.kap-av-status { display: block; margin-top: 8px; font-size: 0.84rem; color: var(--text-muted); }
.kap-av-status.is-ok { color: var(--success); }
.kap-av-status.is-bad { color: #fca5a5; }
.kap-av-note { margin: 10px 0 0; font-size: 0.84rem; color: var(--text-muted); }
.kap-av-link { border: 0; background: none; color: var(--accent); font-weight: 600; cursor: pointer; padding: 0; }
.kap-av-colors { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; margin-top: 12px; }
.kap-av-swatch {
  aspect-ratio: 1;
  border: 3px solid transparent;
  border-radius: 50%;
  cursor: pointer;
}
.kap-av-swatch.is-on { border-color: #fff; box-shadow: 0 0 0 3px var(--accent); }
.kap-av-error { margin: 0 22px; font-size: 0.86rem; color: #fca5a5; }
.kap-av-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.kap-av-btn-primary,
.kap-av-btn-secondary {
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}
.kap-av-btn-primary {
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: var(--accent-gradient, var(--accent));
  color: #fff;
}
.kap-av-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.kap-av-btn-secondary { border: 1px solid rgba(255, 255, 255, 0.16); background: transparent; color: #fff; }
@media (max-width: 520px) {
  .kap-av-head { flex-direction: column; text-align: center; padding-right: 22px; }
  .kap-av-tabs { flex-wrap: wrap; justify-content: center; }
  .kap-av-colors { grid-template-columns: repeat(4, 1fr); }
}
/* Short screens: shrink the header so Save always stays on screen. */
@media (max-height: 620px) {
  .kap-av-sheet { max-height: calc(100vh - 16px); }
  .kap-av-head { padding-top: 12px; padding-bottom: 8px; gap: 12px; }
  .kap-av-preview-circle { width: 52px; height: 52px; font-size: 1.3rem; }
  .kap-av-sub { display: none; }
  .kap-av-body { min-height: 0; }
}

/* Profile Studio profile cards: "change picture" badge on the avatar */
.ps-profile-avatar-wrap { position: relative; flex-shrink: 0; }
.ps-profile-avatar-edit {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #141926;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.ps-profile-avatar-edit:hover,
.ps-profile-avatar-edit:focus-visible { transform: scale(1.12); }
.ps-toast-undo {
  margin-left: 12px;
  padding: 2px 10px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  pointer-events: auto;
}
.ps-toast.active:has(.ps-toast-undo) { pointer-events: auto; }

/* ==========================================================================
   Profile Hub (Profile Studio v2) — "what do you want to do with this profile?"
   ========================================================================== */
.ps-hub-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
  background: #141926;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}
.ps-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.ps-hub-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 16px;
  text-align: left;
  background: #141926;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: #fff;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.ps-hub-tile:hover,
.ps-hub-tile:focus-visible {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.ps-hub-icon { font-size: 1.6rem; line-height: 1; }
.ps-hub-title { font-size: 1.02rem; font-weight: 700; }
.ps-hub-line { font-size: 0.84rem; color: var(--text-muted); }
.ps-hub-changes {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ps-hub-changes-title {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ps-hub-change {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 0.88rem;
}
.ps-hub-change em { color: var(--text-muted); font-style: normal; }

/* ==========================================================================
   My Add-ons (Profile Studio v2) — add-on URLs are never shown, they can
   contain private keys.
   ========================================================================== */
.ps-addons-hint { margin: 0 0 12px; font-size: 0.86rem; color: var(--text-muted); }
.ps-addons-warn {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(250, 204, 21, 0.35);
  border-radius: 10px;
  background: rgba(250, 204, 21, 0.08);
  font-size: 0.88rem;
}
.ps-addon-list { display: flex; flex-direction: column; gap: 10px; }
.ps-addon-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #141926;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
.ps-addon-row.is-off { opacity: 0.55; }
.ps-addon-move { display: flex; flex-direction: column; gap: 2px; }
.ps-addon-arrow {
  width: 22px; height: 18px; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 5px;
  background: transparent; color: #cbd5e1;
  font-size: 0.6rem; cursor: pointer;
}
.ps-addon-arrow:disabled { opacity: 0.3; cursor: default; }
.ps-addon-logo {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #0b0e16; border-radius: 9px; overflow: hidden;
  font-weight: 700; color: #94a3b8;
}
.ps-addon-logo img { width: 100%; height: 100%; object-fit: contain; }
.ps-addon-info { flex: 1; min-width: 0; }
.ps-addon-name { font-weight: 700; font-size: 0.96rem; }
.ps-addon-line { font-size: 0.82rem; color: var(--text-muted); }
.ps-addon-status { font-size: 0.78rem; white-space: nowrap; color: var(--text-muted); }
.ps-addon-status::before { content: '● '; }
.ps-addon-status.is-ok { color: var(--success); }
.ps-addon-status.is-slow { color: #fbbf24; }
.ps-addon-status.is-down { color: #f87171; }
.ps-addon-toggle { position: relative; width: 40px; height: 22px; flex-shrink: 0; cursor: pointer; }
.ps-addon-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ps-addon-toggle span {
  position: absolute; inset: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.18); transition: background 0.18s ease;
}
.ps-addon-toggle span::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transition: transform 0.18s ease;
}
.ps-addon-toggle input:checked + span { background: var(--accent); }
.ps-addon-toggle input:checked + span::after { transform: translateX(18px); }
.ps-addon-menu-btn {
  width: 30px; height: 30px; flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px;
  background: transparent; color: #cbd5e1; cursor: pointer;
}
.ps-addon-menu-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.ps-addon-suggest { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ps-addon-suggest-row {
  display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; text-align: left;
  background: #0b0e16; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px;
  color: #fff; cursor: pointer;
}
.ps-addon-suggest-row:hover { border-color: var(--accent); }
.ps-addon-suggest-row span { font-size: 0.82rem; color: var(--text-muted); }
.ps-addon-target {
  display: flex; align-items: center; gap: 10px; padding: 9px 4px;
  font-size: 0.92rem; cursor: pointer;
}
.ps-profile-name-sm { font-weight: 700; }

/* ---- Profile Studio: Home screen (PS-5) ---- */
.ps-home-list { display: flex; flex-direction: column; gap: 10px; }
.ps-home-list.is-hidden-list { opacity: 0.7; margin-top: 8px; }
.ps-home-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #141926;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
.ps-home-row.is-hidden-row { opacity: 0.55; }
.ps-home-row.is-dragging { opacity: 0.4; }
.ps-home-row.is-drop-target { border-color: var(--accent, #4f9cff); }
.ps-home-row[draggable="true"] { cursor: grab; }
.ps-home-move { display: flex; flex-direction: column; gap: 2px; width: 22px; flex-shrink: 0; }
.ps-home-main { flex: 1; min-width: 0; }
.ps-home-titleline { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ps-home-title { font-weight: 700; font-size: 0.95rem; }
.ps-home-source { font-size: 0.76rem; color: var(--text-muted); }
.ps-home-rename {
  flex: 1; min-width: 140px;
  padding: 4px 8px;
  background: #0b0e16; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 7px;
  font-size: 0.9rem;
}
.ps-home-strip { display: flex; gap: 4px; margin-top: 6px; min-height: 34px; }
.ps-home-strip img {
  height: 34px; width: 58px; object-fit: cover;
  border-radius: 4px; background: #0b0e16;
}
.ps-home-strip img.is-logo { width: 34px; object-fit: contain; }
.ps-home-hidden-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 18px;
  font-size: 0.85rem; color: var(--text-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 12px;
}
.ps-home-options { margin-top: 20px; }
.ps-home-option { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; cursor: pointer; }
.ps-home-tidy-counts { list-style: none; margin: 12px 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; }
.ps-home-tidy-counts strong { font-size: 1.2rem; }
.ps-home-tidy-preview {
  background: #0b0e16; border-radius: 10px; padding: 10px 12px;
  font-size: 0.85rem; display: flex; flex-direction: column; gap: 4px;
}
.ps-home-tidy-line em { color: var(--text-muted); font-style: normal; font-size: 0.78rem; }
@media (max-width: 640px) {
  .ps-home-strip img { width: 44px; height: 26px; }
  .ps-home-source { width: 100%; }
}

/* A Save button with nothing to save reads as unavailable. */
.ps-btn:disabled { opacity: 0.45; cursor: default; box-shadow: none; }

/* ---- Profile Studio: Quick Setup (PS-3) ---- */
.ps-setup-grid {
  display: grid; gap: 12px; margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.ps-setup-card {
  background: #141926; border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 6px;
}
.ps-setup-card.is-on { border-color: var(--accent, #4f9cff); box-shadow: 0 0 0 1px var(--accent, #4f9cff) inset; }
.ps-setup-pick {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  background: transparent; border: 0; color: inherit; cursor: pointer; padding: 0;
}
.ps-setup-icon { font-size: 1.5rem; }
.ps-setup-name { font-weight: 700; font-size: 1rem; }
.ps-setup-name em { font-style: normal; font-size: 0.72rem; color: var(--accent, #4f9cff); }
.ps-setup-blurb { font-size: 0.83rem; color: var(--text-muted); line-height: 1.35; }
.ps-setup-more { align-self: flex-start; font-size: 0.78rem; }
.ps-setup-details {
  margin: 4px 0 0; padding-left: 18px; font-size: 0.8rem;
  color: var(--text-muted); display: flex; flex-direction: column; gap: 3px;
}
.ps-setup-customize-toggle { display: inline-block; margin-top: 16px; }
.ps-setup-custom {
  margin-top: 10px; background: #0b0e16; border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.ps-setup-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.9rem; }
.ps-setup-row select {
  background: #141926; color: #fff; border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px; padding: 5px 8px; font-size: 0.85rem; max-width: 60%;
}
.ps-setup-badge-mock {
  display: flex; flex-direction: column; gap: 6px;
  background: #141926; border-radius: 10px; padding: 10px;
}
.ps-setup-mock-title { font-size: 0.8rem; color: var(--text-muted); }
.ps-setup-mock-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.ps-setup-mock-badges em {
  font-style: normal; font-size: 0.7rem; font-weight: 700; color: #fff;
  padding: 2px 7px; border-radius: 999px;
}
.ps-setup-preview-title { margin: 6px 0 12px; font-size: 1.1rem; }
.ps-setup-changes {
  margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 7px;
  font-size: 0.92rem;
}

/* ---- Profile Studio: All Settings (Workstream 3) — theme picker ---- */
.ps-theme-grid {
  display: grid; gap: 10px; margin: 10px 0 14px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.ps-theme-swatch {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 8px; background: #141926; border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px; color: #fff; cursor: pointer; font-size: 0.8rem;
}
.ps-theme-swatch:hover { border-color: rgba(255, 255, 255, 0.25); }
.ps-theme-swatch.is-selected { border-color: var(--accent, #4f9cff); box-shadow: 0 0 0 1px var(--accent, #4f9cff) inset; }
.ps-theme-swatch.is-locked { opacity: 0.6; cursor: pointer; }
.ps-theme-dot {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--swatch-color, #888); border: 1px solid rgba(255, 255, 255, 0.25);
}
.ps-theme-name { font-size: 0.78rem; text-align: center; }
.ps-theme-lock { position: absolute; top: 6px; right: 8px; font-size: 0.78rem; }

/* ---- Profile Studio: Make a copy (PS-1) ---- */
.ps-copy-grid {
  display: grid; gap: 12px; margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.ps-copy-tile {
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
  background: #141926; border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px; padding: 12px; color: inherit; cursor: pointer; text-align: left;
}
.ps-copy-tile.is-on { border-color: var(--accent, #4f9cff); box-shadow: 0 0 0 1px var(--accent, #4f9cff) inset; }
.ps-copy-tile.is-disabled { opacity: 0.6; cursor: default; }
.ps-copy-tile-title { font-weight: 700; font-size: 0.95rem; }
.ps-copy-tile-line { font-size: 0.8rem; color: var(--text-muted); }
.ps-copy-avatar {
  width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.ps-copy-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ps-copy-name, .ps-copy-merge { margin-top: 16px; }
.ps-copy-external { margin-top: 18px; }
.ps-copy-preview {
  background: #141926; border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px; padding: 14px; margin-bottom: 12px;
}
.ps-copy-preview-title { margin: 0 0 10px; font-size: 1rem; }
.ps-copy-part { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; cursor: pointer; }
.ps-copy-part input { margin-top: 3px; }
.ps-copy-part-main { display: flex; flex-direction: column; }
.ps-copy-part-title { font-weight: 600; font-size: 0.92rem; }
.ps-copy-part-line { font-size: 0.8rem; color: var(--text-muted); }
.ps-copy-part.is-risky .ps-copy-part-title { color: #fbbf24; }
.ps-copy-keywarn { margin-top: 6px; }
.ps-copy-steps { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ps-copy-steps li { display: flex; gap: 10px; align-items: center; font-size: 0.95rem; color: var(--text-muted); }
.ps-copy-steps li.is-ok { color: inherit; }
.ps-copy-steps li.is-fail { color: #f87171; }
.ps-copy-step-mark { width: 18px; text-align: center; }
.ps-copy-steps li.is-ok .ps-copy-step-mark { color: var(--success, #10b981); }

/* ---- Profile Studio: Share (PS-4) ---- */
.ps-share-choice {
  display: flex; gap: 14px; align-items: flex-start; width: 100%;
  background: #141926; border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px; padding: 16px; margin-top: 12px;
  color: inherit; text-align: left; cursor: pointer;
}
.ps-share-choice.is-lead { border-color: var(--accent, #4f9cff); }
.ps-share-choice:hover { background: #18202f; }
.ps-share-choice-icon { font-size: 1.7rem; line-height: 1; }
.ps-share-choice-main { display: flex; flex-direction: column; gap: 5px; }
.ps-share-choice-title { font-weight: 700; font-size: 1rem; }
.ps-share-choice-title em { font-style: normal; font-size: 0.72rem; color: var(--accent, #4f9cff); margin-left: 6px; }
.ps-share-choice-line { font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; }
.ps-share-result { margin-top: 20px; }
.ps-share-result-title { margin: 0 0 10px; font-size: 1rem; }
.ps-share-linkbox { display: flex; gap: 8px; align-items: center; }
.ps-share-linkbox input { flex: 1; min-width: 0; }
.ps-share-contents { margin-top: 16px; font-size: 0.88rem; }
.ps-share-contents h5 { margin: 14px 0 6px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.ps-share-contents ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; }
.ps-share-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* ---- Profile Studio: My TV, inside a row ---- */
.ps-canvas-title { font-weight: 700; font-size: 1rem; }
.ps-rowfolder-list { display: flex; flex-direction: column; gap: 8px; }
.ps-rowfolder {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  background: #141926; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px;
}
.ps-rowfolder-art {
  width: 70px; height: 40px; flex-shrink: 0; border-radius: 6px; overflow: hidden;
  background: #0b0e16; display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #94a3b8;
}
.ps-rowfolder-art img { width: 100%; height: 100%; object-fit: cover; }
.ps-rowfolder-main { flex: 1; min-width: 0; }
.ps-rowfolder-foot { margin-top: 20px; }
.ps-rowfolder-danger { color: #f87171; }

/* ---- Profile Studio: Artwork workbench ---- */
.ps-art-workbench-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ps-art-search {
  min-width: 180px; padding: 6px 10px; border-radius: 8px;
  background: #0b0e16; color: #fff; border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.85rem;
}
.ps-art-rowfilter {
  padding: 6px 8px; border-radius: 8px; font-size: 0.85rem;
  background: #0b0e16; color: #fff; border: 1px solid rgba(255, 255, 255, 0.18);
  max-width: 180px;
}
.ps-art-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 5px 10px; border-radius: 999px; font-size: 0.8rem;
  background: #0b0e16; border: 1px solid rgba(255, 255, 255, 0.14); color: var(--text-muted);
}
.ps-art-chip.is-on { border-color: var(--accent, #4f9cff); color: #fff; }
.ps-art-chip input { margin: 0; }
.ps-art-grid {
  display: grid; gap: 12px; padding: 4px 12px 16px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.ps-art-workbench .ps-art-card { width: auto; }
.ps-art-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.ps-art-workbench .ps-art-row-header { position: sticky; top: 0; z-index: 2; background: #0b0e16; }
.ps-art-workbench .ps-art-card-sub { text-transform: none; letter-spacing: 0; }

/* ---- "Put my picks back" bar (selection saved before a pack update) ---- */
.kap-restore-bar {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 10050; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: min(680px, calc(100vw - 32px));
  padding: 12px 16px; border-radius: 14px;
  background: #141926; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  font-size: 0.9rem;
}
.kap-restore-bar button {
  padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 0.85rem; font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.18); background: transparent; color: #cbd5e1;
}
.kap-restore-bar .kap-restore-yes {
  background: var(--accent, #4f9cff); border-color: transparent; color: #fff;
}