/* ==========================================================================
   KAPTAIN'S BOUNTY — DESIGN SYSTEM
   ========================================================================== */

: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: #00f5a0;
  --accent-light: #6dfac4;
  --accent-subtle: rgba(0, 245, 160, 0.14);
  --accent-glow: rgba(0, 245, 160, 0.22);
  --accent-gradient: linear-gradient(135deg, #00f5a0 0%, #10d99a 100%);
  --on-accent: #04130d;
  
  /* 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-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: var(--on-accent);
  --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: #00805a;
  --accent-light: #006b4a;
  --accent-subtle: rgba(0, 128, 90, 0.12);
  --accent-glow: rgba(0, 128, 90, 0.18);
  --accent-gradient: linear-gradient(135deg, #00805a 0%, #006b4a 100%);
  --on-accent: #ffffff;
  --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: #6dfac4;
  --accent-light: #b6fde3;
  --accent-gradient: linear-gradient(135deg, #6dfac4 0%, #6dfac4 100%);
  --on-accent: #04130d;
  --accent-subtle: rgba(0, 245, 160, 0.18);
  --accent-glow: rgba(0, 245, 160, 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"] .backdrop-layer.is-thumb {
  filter: brightness(1.1) saturate(0.5);
}
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; }

/* A 96px thumbnail stretched over the screen is already soft, so it only needs
   the dimming. This skips the full-screen 40px blur, the costly part. */
.backdrop-layer.is-thumb { filter: brightness(0.12) saturate(0.85); }

/* Nothing to see: skip painting the backdrop while an opaque screen covers it.
   (Title screen is only solid once its poster wall is up and in dark themes;
   the wizard is translucent, so it is deliberately not listed.) */
html:not([data-theme="light"]) body:has(.title-screen-overlay.active > .hero-wall.is-ready) .backdrop-container,
body:has(.se-overlay.open) .backdrop-container,
body:has(.ps-overlay.active) .backdrop-container {
  visibility: hidden;
}

.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(var(--k-mint-rgb, 0, 245, 160), 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(var(--k-mint-rgb, 0, 245, 160), 0.12);
  border-color: rgba(var(--k-mint-rgb, 0, 245, 160), 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(var(--k-mint-rgb, 0, 245, 160), 0.3);
  background: linear-gradient(180deg, rgba(var(--k-mint-rgb, 0, 245, 160), 0.14), rgba(var(--k-mint-rgb, 0, 245, 160), 0.04));
  color: var(--accent-light);
  opacity: 0.7;
}
.sidebar-footer-btn-kofi:hover {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(var(--k-mint-rgb, 0, 245, 160), 0.24), rgba(var(--k-mint-rgb, 0, 245, 160), 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: max(0.75rem, 11.5px);
  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(var(--k-mint-rgb, 0, 245, 160), 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.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: var(--on-accent, #04130d);
  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 {
  margin-top: 2px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-muted);
}

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

.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(var(--k-mint-rgb, 0, 245, 160), 0.35);
  background-color: rgba(var(--k-mint-rgb, 0, 245, 160), 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: var(--on-accent, #04130d);
}

.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: max(0.72rem, 11.5px);
  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: var(--on-accent, #04130d);
  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(var(--k-mint-rgb, 0, 245, 160), 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: var(--on-accent, #04130d);
}

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

/* Plain visit to /: show the title screen from the very first paint (see the boot-title script in
   index.html) and keep the editor underneath out of sight until app.js takes over. */
html.boot-title .title-screen-overlay { opacity: 1; visibility: visible; transition: none; }

/* The editor (sidebar, card grid, backdrop) is built lazily by app.js ensureEditorBuilt(); until then
   its empty shell stays out of sight. html.editor-built is set when it is built. */
html:not(.editor-built) .app-screen,
html:not(.editor-built) .sidebar,
html:not(.editor-built) .sidebar-toggle,
html:not(.editor-built) .backdrop-container { visibility: hidden; }

.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-1024.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.06;
  filter: drop-shadow(0 0 80px rgba(var(--k-mint-rgb, 0, 245, 160), 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-logo { animation-delay: 0.2s; }
.title-screen-overlay.active .title-walkthrough-link { animation-delay: 0.6s; }

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

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

/* ==========================================================================
   HERO LIVE SOCIAL PROOF PILL (Option A)
   ========================================================================== */
.title-live-metrics-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 14px auto 18px;
  padding: 6px 16px;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: default;
  transition: all 0.2s ease;
  user-select: none;
}

.title-live-metrics-pill:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(15, 23, 42, 0.75);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 14px rgba(34, 197, 94, 0.2);
}

.live-metric-content {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: #94a3b8;
  letter-spacing: 0.01em;
}

.live-metric-cycling {
  display: inline-block;
  transition: opacity 0.25s ease, transform 0.25s ease;
  color: #7dd3fc;
}

.live-metric-cycling strong {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  color: #38bdf8;
  letter-spacing: 0.02em;
}

.live-stat-pulse {
  animation: stat-glow 0.6s ease;
}

@keyframes stat-glow {
  0% { color: #67e8f9; text-shadow: 0 0 10px rgba(103, 232, 249, 0.9); }
  100% { color: #38bdf8; text-shadow: none; }
}

@media (max-width: 580px) {
  .title-live-metrics-pill {
    padding: 5px 12px;
    margin: 10px auto 14px;
  }
  .live-metric-content {
    font-size: 0.74rem;
    gap: 6px;
  }
}

/* ==========================================================================
   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: 480px;
  margin: 0 auto;
}

.title-hero-primary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

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

.hero-btn-express {
  position: relative;
  width: 100%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 4px 18px rgba(var(--k-mint-rgb, 0, 245, 160), 0.35), 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  padding: 0 16px !important;
  min-height: 44px !important;
  height: 44px !important;
  border-radius: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-btn-express:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(var(--k-mint-rgb, 0, 245, 160), 0.5), 0 3px 8px rgba(0, 0, 0, 0.35) !important;
  filter: brightness(1.06);
}

.hero-btn-text {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
}

.title-hero-primary-btn {
  width: 100%;
  min-height: 44px;
  height: 44px;
  padding: 0 20px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(var(--k-mint-rgb, 0, 245, 160), 0.9) 0%, rgba(var(--k-mint-rgb, 0, 245, 160), 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 18px rgba(var(--k-mint-rgb, 0, 245, 160), 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(var(--k-mint-rgb, 0, 245, 160), 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(var(--k-mint-rgb, 0, 245, 160), 0.45);
  box-shadow: 0 4px 14px rgba(var(--k-mint-rgb, 0, 245, 160), 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(var(--k-mint-rgb, 0, 245, 160), 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: var(--accent);
  color: var(--on-accent, #04130d);
  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.78rem;
  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(var(--k-mint-rgb, 0, 245, 160), 0.28), transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 70%, rgba(var(--k-mint-rgb, 0, 245, 160), 0.18), transparent 55%),
    radial-gradient(ellipse 45% 35% at 80% 25%, rgba(var(--k-mint-rgb, 0, 245, 160), 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(var(--k-mint-rgb, 0, 245, 160), 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(var(--k-mint-rgb, 0, 245, 160), 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(var(--k-mint-rgb, 0, 245, 160), 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(var(--k-mint-rgb, 0, 245, 160), 0.08) 100%);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    0 0 0 1px rgba(var(--k-mint-rgb, 0, 245, 160), 0.18) inset,
    0 28px 90px rgba(0, 0, 0, 0.55),
    0 0 80px rgba(var(--k-mint-rgb, 0, 245, 160), 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;
  color: #f8fafc;
  text-shadow: none;
  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(var(--k-mint-rgb, 0, 245, 160), 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(var(--k-mint-rgb, 0, 245, 160), 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(var(--k-mint-rgb, 0, 245, 160), 0)); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); filter: drop-shadow(0 0 28px rgba(var(--k-mint-rgb, 0, 245, 160), 0.45)); }
}
@keyframes friendIntroFromRight {
  0% { opacity: 0; transform: translateX(58vw); filter: drop-shadow(0 0 0 rgba(var(--k-mint-rgb, 0, 245, 160), 0)); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); filter: drop-shadow(0 0 28px rgba(var(--k-mint-rgb, 0, 245, 160), 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(var(--k-mint-rgb, 0, 245, 160), 0.18) inset, 0 28px 90px rgba(0, 0, 0, 0.55), 0 0 80px rgba(var(--k-mint-rgb, 0, 245, 160), 0.22); }
  45% { box-shadow: 0 0 0 1px rgba(var(--k-mint-rgb, 0, 245, 160), 0.45) inset, 0 28px 90px rgba(0, 0, 0, 0.55), 0 0 120px rgba(var(--k-mint-rgb, 0, 245, 160), 0.5); }
  100% { box-shadow: 0 0 0 1px rgba(var(--k-mint-rgb, 0, 245, 160), 0.18) inset, 0 28px 90px rgba(0, 0, 0, 0.55), 0 0 80px rgba(var(--k-mint-rgb, 0, 245, 160), 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, var(--accent-light));
  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; }
}

/* "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. */

/* 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-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-version {
  display: block;
  margin-top: 28px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dark);
}

/* ==========================================================================
   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: var(--on-accent, #04130d);
}
.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). */

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

/* Category Row — Netflix-style horizontal scroll */

/* Horizontal scroll track */

/* Preview Card — clean, no controls */

.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.shape-poster .preview-card-logo {
  width: 65%;
  max-height: 28px;
}

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

/* 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: var(--on-accent, #04130d);
  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: var(--on-accent, #04130d);
    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: 25000 !important;
  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; z-index: 25000 !important; }

.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), width 0.25s cubic-bezier(0.16, 1, 0.3, 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;
}

/* 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: var(--on-accent, #04130d); }
.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: var(--on-accent, #04130d);
  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-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: var(--on-accent, #04130d);
}

/* 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: 164px 1fr;
  gap: 20px;
  align-items: start;
  background: linear-gradient(165deg, var(--bg-elevated), var(--bg-card));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 18px;
  position: relative;
}

.wiz-poster-studio-visual {
  position: sticky;
  top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.wiz-tv-preview-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 10px 8px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 28px rgba(0, 0, 0, 0.5);
}

.wiz-tv-movie-info {
  margin-top: 8px;
  text-align: center;
  width: 100%;
}

.wiz-tv-movie-title {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
  margin: 0 auto;
}

.wiz-poster-frame {
  position: relative;
  width: 144px;
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  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.12);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.7), 0 0 20px rgba(16, 185, 129, 0.1);
}

.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: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.74rem;
  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-row-warnable { flex-wrap: wrap; }

.wiz-opt-warn {
  flex: 1 1 100%;
  margin: 2px 0 0;
  padding: 8px 10px;
  font-size: 0.72rem;
  line-height: 1.4;
  color: #fcd34d;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 8px;
}

.wiz-opt-warn[hidden] { display: none; }

.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: 160px;
}

/* Below 580px, the two-column layout stacks vertically with poster centered on top */
@media (max-width: 580px) {
  .wiz-poster-studio {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 16px;
    padding: 14px;
  }
  .wiz-poster-studio-visual {
    position: static;
    margin-bottom: 4px;
  }
  .wiz-poster-frame {
    width: 130px;
  }
  .wiz-poster-studio-settings {
    width: 100%;
  }
  .wiz-opt-inline-select { max-width: none; }
}

/* ── Poster source picker (Bounty step) ── */
.wiz-poster-mode {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}

.wiz-poster-mode-btn {
  min-width: 0;
  padding: 9px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wiz-poster-mode-btn:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.04); }

.wiz-poster-mode-btn.is-active {
  color: var(--text-primary);
  background: var(--bg-card);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow, rgba(var(--k-mint-rgb, 0, 245, 160), 0.25));
}

.wiz-poster-mode-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.wiz-custom-poster .wiz-input { width: 100%; }

.wiz-custom-poster-status {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.wiz-custom-poster-status.is-ok { color: #34d399; }
.wiz-custom-poster-status.is-bad { color: #fbbf24; }

@media (max-width: 580px) {
  .wiz-poster-mode { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── WIP Badge & Subdued Mode Option ── */

/* ── Poster Fork: Clean Decision Cards ── */
.wiz-poster-fork {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 14px 0 18px 0;
}
.wiz-fork-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border-radius: 14px;
  background: linear-gradient(165deg, var(--bg-elevated, #1a1c26), var(--bg-card, #13141c));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  text-align: left;
  width: 100%;
  color: inherit;
  font: inherit;
}
.wiz-fork-card:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.wiz-fork-card-accent {
  border-color: rgba(16, 185, 129, 0.32);
  background: linear-gradient(165deg, rgba(16, 185, 129, 0.08), rgba(26, 28, 38, 0.95));
}
.wiz-fork-card-accent:hover {
  border-color: var(--accent, #10b981);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.18);
}
/* TMDB key prompt: same accent family as the suggested fork card, one step
   quieter, so it reads as part of the screen rather than a separate banner. */
.wiz-tmdb-card {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(16, 185, 129, 0.08), rgba(26, 28, 38, 0.95));
  border: 1px solid rgba(16, 185, 129, 0.32);
}
.wiz-tmdb-card .wiz-label { margin-bottom: 6px; }
.wiz-tmdb-card .wiz-hint { color: var(--accent, #10b981); font-weight: 600; }
.wiz-tmdb-card .wiz-note { margin: 8px 0 0; }
.wiz-tmdb-card .wiz-error { margin: 10px 0 0; }
.wiz-friend-tmdb-note { margin: 6px 0 0; }
.wiz-fork-info {
  flex: 1;
  min-width: 0;
}
.wiz-fork-title {
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
}
.wiz-fork-suggested-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 100px;
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
  margin-left: 8px;
}
.wiz-fork-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.35;
}
.wiz-fork-arrow {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  margin-left: 8px;
  transition: transform 0.15s ease, color 0.15s ease;
}
.wiz-fork-card:hover .wiz-fork-arrow {
  transform: translateX(3px);
  color: var(--text-primary);
}
.wiz-fork-card-accent .wiz-fork-arrow {
  color: #34d399;
}

/* ── Poster Source Selection Grid ── */
.wiz-poster-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.wiz-source-card {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border-radius: 11px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.16s ease;
  text-align: left;
  font: inherit;
  color: inherit;
  position: relative;
}
.wiz-source-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
}
.wiz-source-card.is-active {
  border-color: var(--accent, #10b981);
  background: rgba(16, 185, 129, 0.09);
  box-shadow: 0 0 0 1px var(--accent, #10b981), 0 4px 14px rgba(16, 185, 129, 0.14);
}
.wiz-source-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}
.wiz-source-card-name {
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wiz-source-card-desc {
  font-size: 0.71rem;
  color: var(--text-muted);
  line-height: 1.25;
}
.wiz-source-card.is-active .wiz-source-card-desc {
  color: var(--text-secondary);
}

.wiz-poster-reset-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 12px;
  transition: color 0.15s ease;
}
.wiz-poster-reset-link:hover {
  color: var(--accent, #10b981);
}

/* ── Poster Live Simulation Badges ── */
.wiz-poster-live-badges {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px;
  overflow: hidden;
  border-radius: 12px;
}
.wiz-advanced-details {
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 8px;
}
.wiz-advanced-summary {
  font-size: 0.76rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease;
}
.wiz-preset-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.wiz-site-links-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.wiz-site-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  font-size: 0.76rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.15s ease;
}
.wiz-site-link:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.2);
}

/* ── 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(var(--k-mint-rgb, 0, 245, 160), 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-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(var(--k-mint-rgb, 0, 245, 160), 0.12), rgba(var(--k-mint-rgb, 0, 245, 160), 0.03));
  border: 1px solid rgba(var(--k-mint-rgb, 0, 245, 160), 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: var(--on-accent, #04130d);
  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-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);
}
.wiz-reorder-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
}
.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-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: var(--on-accent, #04130d);
  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;
}
/* Labels alone get cramped on a phone; the bars still carry the progress. */

/* 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-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-sum-dot { color: var(--warning); flex-shrink: 0; font-weight: 700; font-size: 0.82rem; margin-top: 1px; }

/* Done state */

/* ---- Compact Ending Screen ---- */
.wiz-done-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 20px 16px;
}

.wiz-done-hero {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 10px;
}

.wiz-done-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.wiz-sum-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 5px 8px;
  border-radius: 6px;
  line-height: 1.25;
}
.wiz-sum-badge svg {
  width: 13px;
  height: 13px;
  stroke: #22c55e;
  flex-shrink: 0;
}
.wiz-sum-badge.todo {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.2);
}

.wiz-done-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 2px;
}

/* Action Cards for Done Screen */

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

/* ==========================================================================
   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-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-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-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.is-ready,
.nv-card.is-focused .nv-card-gif.is-ready { 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-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(var(--k-mint-rgb, 0, 245, 160), 0.08);
  border: 1px solid rgba(var(--k-mint-rgb, 0, 245, 160), 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, var(--accent-light));
  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 (Reddit, Discord, Ko-fi, Support, Credits) */
.title-screen-foot-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding: 4px 12px 16px;
}
.title-screen-foot-links .title-walkthrough-link {
  margin-top: 0;
  text-decoration: none;
}
.title-screen-foot-links .title-walkthrough-link:hover {
  color: #fff;
}
.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(var(--k-mint-rgb, 0, 245, 160), 0.3);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--k-mint-rgb, 0, 245, 160), 0.14), rgba(var(--k-mint-rgb, 0, 245, 160), 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 ===== */

/* ===== 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: var(--on-accent, #04130d); }
.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); flex: 0 1 42%; min-height: 0; }
  .se-collection { flex: 1 1 58%; min-height: 0; }
}

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

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

/* Subtitle text inside buttons (#2/#11) */

/* #2 — "or customize manually" divider */

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

/* "More options" disclosure — keeps the walkthrough and manual-build routes
   reachable without making a first-time visitor rule out four choices. */
.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-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. */
/* 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; }
/* 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; }

/* #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 */

/* 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(160, 100%, 48%, 0.3) !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  box-shadow: none !important;
}
.sidebar-footer-btn-kofi:hover {
  border-color: hsla(160, 100%, 48%, 0.5) !important;
  background: rgba(var(--k-mint-rgb, 0, 245, 160), 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 */

/* 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(var(--k-mint-rgb, 0, 245, 160), 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; }
.wiz-device-check-row input[type="radio"] {  width: 17px; height: 17px;  accent-color: var(--accent);  cursor: pointer;  flex-shrink: 0;}/* A row whose option cannot be used yet keeps its place and says why, instead of vanishing. */.wiz-device-check-row.is-disabled { opacity: 0.6; cursor: not-allowed; }.wiz-device-check-row.is-disabled:hover { border-color: var(--border); background: var(--bg-elevated); }.wiz-device-check-row.is-disabled input { cursor: not-allowed; }.wiz-device-check-row:has(input:focus-visible) { outline: 2px solid var(--accent-light); outline-offset: 2px; }

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

/* ====================================================================
   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; }
@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(160, 100%, 48%, 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-spinner-svg { animation: spin 1s linear infinite; display: block; margin: 0 auto 14px; color: var(--accent-light, var(--k-mint, #00f5a0)); }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.quiz-loading-text { color: var(--text-secondary); font-size: 0.9rem; }

/* ==========================================================================
   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: 25000 !important;
  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;
  z-index: 25000 !important;
}

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

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

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

/* Step Header */

.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(var(--k-mint-rgb, 0, 245, 160), 0.35) transparent;
}
.cust-step-content::-webkit-scrollbar {
  width: 5px;
}
.cust-step-content::-webkit-scrollbar-thumb {
  background: rgba(var(--k-mint-rgb, 0, 245, 160), 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;
}

/* ==========================================================================
   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: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(var(--k-mint-rgb, 0, 245, 160), 0.12);
  border: 1px solid rgba(var(--k-mint-rgb, 0, 245, 160), 0.25);
  color: var(--accent-light);
  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(var(--k-mint-rgb, 0, 245, 160), 0.5);
  background: rgba(18, 18, 28, 0.95);
}

.cust-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--k-mint-rgb, 0, 245, 160), 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, var(--accent), var(--accent));
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(var(--k-mint-rgb, 0, 245, 160), 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(var(--k-mint-rgb, 0, 245, 160), 0.1) 0%, rgba(var(--k-mint-rgb, 0, 245, 160), 0.06) 100%);
  border: 1px solid rgba(var(--k-mint-rgb, 0, 245, 160), 0.28);
  border-radius: 12px;
  margin-bottom: 12px;
}

.cust-info-icon {
  width: 22px;
  height: 22px;
  color: var(--accent-light);
  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: var(--accent-light);
  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(var(--k-mint-rgb, 0, 245, 160), 0.35);
  outline: 2px solid rgba(var(--k-mint-rgb, 0, 245, 160), 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: rgba(var(--k-mint-rgb, 0, 245, 160), 0.6);
}

.cust-visual-card:has(input:checked) .cust-card-check-badge {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent, #04130d);
}

.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: var(--accent);
  background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.12);
}

.cust-logo-card:has(input:checked) .cust-logo-title {
  color: var(--text-primary);
}

.cust-logo-card:has(input:checked) .cust-card-check-badge {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent, #04130d);
}

.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(var(--k-mint-rgb, 0, 245, 160), 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 {
  filter: drop-shadow(0 12px 40px rgba(var(--k-mint-rgb, 0, 245, 160), 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: var(--accent-light);
}

@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-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: max(0.72rem, 11.5px);
  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: max(0.72rem, 11.5px);
  color: var(--accent-light);
  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, var(--accent), var(--accent));
  color: #fff;
  padding: 5px 12px;
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 3px 12px rgba(var(--k-mint-rgb, 0, 245, 160), 0.35);
}

.portfolio-card:hover .port-btn-solid {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(var(--k-mint-rgb, 0, 245, 160), 0.5);
}

/* 01: Help Theme Accents */
.card-help:hover {
  border-color: rgba(var(--k-mint-rgb, 0, 245, 160), 0.4);
  box-shadow: 0 8px 24px rgba(var(--k-mint-rgb, 0, 245, 160), 0.12);
}

.card-help:hover .port-card-icon {
  background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.15);
  border-color: rgba(var(--k-mint-rgb, 0, 245, 160), 0.35);
  color: var(--accent-light);
}

/* 02: Customization Studio Accents */
.card-custom:hover {
  border-color: rgba(var(--k-mint-rgb, 0, 245, 160), 0.4);
  box-shadow: 0 8px 24px rgba(var(--k-mint-rgb, 0, 245, 160), 0.15);
}

.card-custom:hover .port-card-icon {
  background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.15);
  border-color: rgba(var(--k-mint-rgb, 0, 245, 160), 0.35);
  color: var(--accent-light);
}

/* Featured Hero Wizard Card */
.card-hero {
  background: linear-gradient(145deg, rgba(var(--k-mint-rgb, 0, 245, 160), 0.08) 0%, rgba(18, 20, 29, 0.7) 100%);
  border-color: rgba(var(--k-mint-rgb, 0, 245, 160), 0.3);
}

.card-hero:hover {
  border-color: rgba(var(--k-mint-rgb, 0, 245, 160), 0.6);
  box-shadow: 0 10px 30px rgba(var(--k-mint-rgb, 0, 245, 160), 0.25);
}

.card-hero .hero-pill {
  background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.18);
  border-color: rgba(var(--k-mint-rgb, 0, 245, 160), 0.4);
  color: #e9d5ff;
}

.card-hero .port-card-icon {
  background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.18);
  border-color: rgba(var(--k-mint-rgb, 0, 245, 160), 0.35);
  color: var(--accent-light);
}

/* 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: 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) {
  .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-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,
.ps-overlay.ps-fullpage {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 100000 !important;
  background: #08090d !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
  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,
#profile-studio-panel,
.ps-fullpage #profile-studio-panel,
.ps-fullpage .ps-panel {
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  background: #08090d !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
}
.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-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: var(--on-accent, #04130d);
  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-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-container {
  width: 100%;
  max-width: 1180px;
  margin: 12px auto 0;
  display: flex;
  flex-direction: column;
}
.ps-profiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
  margin: 12px 0 32px;
}
.ps-profile-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: #141926;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  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-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, var(--accent));
  color: #fff;
  box-shadow: 0 2px 12px rgba(var(--k-mint-rgb, 0, 245, 160), 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-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, var(--accent));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), 0 0 20px rgba(var(--k-mint-rgb, 0, 245, 160), 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-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-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(var(--k-mint-rgb, 0, 245, 160), 0.12);
  border-color: var(--accent, var(--accent));
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 12px rgba(var(--k-mint-rgb, 0, 245, 160), 0.25);
}

/* In-Card Quick Flippers */
.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, var(--accent));
  border-color: var(--accent-light);
  transform: scale(1.1);
  box-shadow: 0 4px 14px rgba(var(--k-mint-rgb, 0, 245, 160), 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(var(--k-mint-rgb, 0, 245, 160), 0.8), 0 0 24px rgba(var(--k-mint-rgb, 0, 245, 160), 0.6);
    transform: scale(0.98);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(var(--k-mint-rgb, 0, 245, 160), 0.9), 0 0 32px rgba(var(--k-mint-rgb, 0, 245, 160), 0.8);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), 0 0 20px rgba(var(--k-mint-rgb, 0, 245, 160), 0.3);
    transform: scale(1);
  }
}

/* -------------------------------------------------------------
   Docked Visual Wardrobe Drawer
   ------------------------------------------------------------- */
.ps-art-card.is-inspecting {
  border-color: var(--accent-light) !important;
  box-shadow: 0 0 0 2px rgba(var(--k-mint-rgb, 0, 245, 160), 0.7), 0 8px 24px rgba(var(--k-mint-rgb, 0, 245, 160), 0.4) !important;
  transform: translateY(-2px);
}

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

.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, var(--accent));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.15);
  border: 1px solid rgba(var(--k-mint-rgb, 0, 245, 160), 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, var(--accent));
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 14px rgba(var(--k-mint-rgb, 0, 245, 160), 0.3);
}

.ps-drawer-card.is-active {
  border-color: var(--accent, var(--accent));
  box-shadow: 0 0 0 2px rgba(var(--k-mint-rgb, 0, 245, 160), 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, var(--accent));
  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(var(--k-mint-rgb, 0, 245, 160), 0.2);
  color: #fff;
}
.ps-row-target-option.is-new-row {
  color: var(--accent-light, var(--accent-light));
  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-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-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-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-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, var(--accent));
  border-color: var(--accent, var(--accent));
  box-shadow: 0 2px 10px rgba(var(--k-mint-rgb, 0, 245, 160), 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-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);
}

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

/* 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, var(--accent));
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(var(--k-mint-rgb, 0, 245, 160), 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(var(--k-mint-rgb, 0, 245, 160), 0.12);
  color: var(--accent-light);
  border: 1px solid rgba(var(--k-mint-rgb, 0, 245, 160), 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, var(--accent-light));
}
.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(--k-mint, #00f5a0);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}
.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(var(--k-mint-rgb, 0, 245, 160), 0.15);
  border-color: var(--k-mint, #00f5a0);
  color: var(--k-mint, #00f5a0);
}
.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(var(--k-mint-rgb, 0, 245, 160), 0.12);
  border-color: var(--k-mint, #00f5a0);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.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-pack {
  background: rgba(99, 102, 241, 0.18) !important;
  color: #a5b4fc !important;
  border: 1px solid rgba(99, 102, 241, 0.38) !important;
}
.ps-tag-studio {
  background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.18) !important;
  color: var(--accent-light) !important;
  border: 1px solid rgba(var(--k-mint-rgb, 0, 245, 160), 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, var(--accent));
    color: #fff;
    box-shadow: 0 2px 8px rgba(var(--k-mint-rgb, 0, 245, 160), 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(var(--k-mint-rgb, 0, 245, 160), 0.12);
  border-color: var(--k-mint, #00f5a0);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.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
   ========================================================================== */

/* ==========================================================================
   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(var(--k-mint-rgb, 0, 245, 160), 0.22);
  border: 1px solid rgba(var(--k-mint-rgb, 0, 245, 160), 0.45);
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--k-mint-rgb, 0, 245, 160), 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(var(--k-mint-rgb, 0, 245, 160), 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-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-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, var(--accent));
  box-shadow: 0 0 0 2px rgba(var(--k-mint-rgb, 0, 245, 160), 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-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, var(--accent));
  box-shadow: 0 0 0 2px rgba(var(--k-mint-rgb, 0, 245, 160), 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(var(--k-mint-rgb, 0, 245, 160), 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(var(--k-mint-rgb, 0, 245, 160), 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(var(--k-mint-rgb, 0, 245, 160), 0.22) !important;
  color: var(--accent-light) !important;
  border: 1px solid rgba(var(--k-mint-rgb, 0, 245, 160), 0.45) !important;
  font-weight: 700 !important;
  width: 100%;
}

.ps-btn-vault-swap:hover {
  background: var(--accent, var(--accent)) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(var(--k-mint-rgb, 0, 245, 160), 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;
}
@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-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, var(--accent));
  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(--k-mint, #00f5a0);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  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(--k-mint, #00f5a0);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  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, var(--accent));
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--k-mint-rgb, 0, 245, 160), 0.35);
}
.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(var(--k-mint-rgb, 0, 245, 160), 0.15);
  border-color: rgba(var(--k-mint-rgb, 0, 245, 160), 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;
}

/* 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: var(--accent-light);
  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;
}

/* 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-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-col-preview-rows-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.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: var(--accent-light);
  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: var(--accent-light);
  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(var(--k-mint-rgb, 0, 245, 160), 0.18);
  color: var(--accent-light);
  border: 1px solid rgba(var(--k-mint-rgb, 0, 245, 160), 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 */

/* Row Left Header Elements (Drag grip & arrows) */

/* Floating Action Button (+ Add Row) */

/* Wardrobe Drawer Folder Operations */

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

@keyframes psSettingsPop {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

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

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

.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-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: var(--on-accent, #04130d); }
.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: var(--on-accent, #04130d);
  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-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;
}
@media (max-width: 640px) {
  .ps-home-strip img { width: 44px; height: 26px; }
}

/* 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-container {
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.ps-rowfolder-list { display: flex; flex-direction: column; gap: 12px; }
.ps-rowfolder {
  display: flex; align-items: center; gap: 16px; padding: 14px 20px;
  background: #141926; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px;
}
.ps-rowfolder-art {
  border-radius: 8px; overflow: hidden;
  background: #0b0e16; display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #94a3b8; flex-shrink: 0;
}
.ps-rowfolder-art img { width: 100%; height: 100%; object-fit: cover; }
.ps-rowfolder-main { flex: 1; min-width: 0; }
.ps-rowfolder .ps-home-actions { margin-left: auto; flex-shrink: 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; }

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

/* Beta polish (2026-09): real-numbers pill, SVG hero icons, mobile title spacing */
.title-live-metrics-pill[hidden] { display: none; }
.hero-btn-icon svg,
.sub-btn-icon svg { display: block; }
@media (max-width: 600px) {
  /* Keep the eyebrow clear of the fixed theme / account buttons */
  .title-hero-stage { padding-top: 72px; }
}

/* ── Poster Stack & Preset Picture Cards (Unified Wizard & Bounty) ── */
.provider-row {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  margin-bottom: 6px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.provider-row:hover {
  border-color: rgba(255, 255, 255, 0.15);
}
.provider-row-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  gap: 12px;
}
.provider-info-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.provider-drag-controls {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.btn-reorder {
  width: 22px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #cbd5e1;
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.btn-reorder:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
.btn-reorder:disabled {
  opacity: 0.2;
  cursor: not-allowed;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.status-dot.amber,
.status-dot.needs-key {
  background: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}
.status-dot.down {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}
.provider-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.provider-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.provider-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #f8fafc;
  white-space: nowrap;
}
.provider-badge-primary {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.25);
  border: 1px solid rgba(var(--k-mint-rgb, 0, 245, 160), 0.5);
  color: var(--accent-light);
}
.provider-badge-amber {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: #fbbf24;
}
.provider-badge-locked {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94a3b8;
}
.provider-desc {
  font-size: 0.74rem;
  color: #94a3b8;
  line-height: 1.35;
  margin-top: 1px;
}
.provider-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.btn-toggle-options {
  padding: 5px 11px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.btn-toggle-options:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}
.btn-remove-provider {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 5px 7px;
  border-radius: 4px;
  transition: all 0.15s ease;
  line-height: 1;
}
.btn-remove-provider:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}
.provider-options-panel {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.22);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.provider-options-panel .wiz-opt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}
.wiz-add-provider-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-top: 2px;
}
.wiz-add-provider-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wiz-add-provider-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.wiz-btn-add-provider {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px dashed rgba(var(--k-mint-rgb, 0, 245, 160), 0.45);
  background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.08);
  color: var(--accent-light);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.wiz-btn-add-provider:hover {
  background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.2);
  border-color: var(--accent);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(var(--k-mint-rgb, 0, 245, 160), 0.3);
}

/* Preset Picture Cards */
.preset-picture-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 6px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  transition: all 0.2s ease;
}
.preset-picture-card:hover {
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}
.preset-picture-card.active {
  border-color: var(--accent);
  background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.15);
  box-shadow: 0 0 14px rgba(var(--k-mint-rgb, 0, 245, 160), 0.3);
}
.preset-card-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #f8fafc;
}
.preset-card-desc {
  font-size: 0.65rem;
  color: #94a3b8;
  line-height: 1.2;
}

/* ==========================================================================
   Profile Studio: Poster Look, Backups & Updates, update preview
   ========================================================================== */
.ps-btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ps-backups-message { margin: 0 0 10px; font-size: 0.88rem; color: #34d399; }
.ps-backups-actions { margin: 0 0 16px; }
.ps-backups-list { display: flex; flex-direction: column; gap: 8px; }
.ps-backup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}
.ps-backup-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ps-backup-label { font-weight: 600; font-size: 0.92rem; color: var(--text-primary); overflow-wrap: anywhere; }
.ps-backup-meta { font-size: 0.78rem; color: var(--text-muted); }
.ps-backup-buttons { display: flex; gap: 6px; flex: none; }
.ps-diff-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100010;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(3, 3, 6, 0.72);
}
.ps-diff-modal {
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.ps-diff-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; }
.ps-diff-head h3 { margin: 0; font-size: 1.1rem; }
.ps-diff-head .ps-close-btn { position: static; }
.ps-diff-body { padding: 6px 16px; overflow-y: auto; }
.ps-diff-actions { padding: 10px 16px 16px; margin-top: 0; justify-content: flex-end; }
.ps-diff-group { margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid; }
.ps-diff-added { border-color: rgba(52, 211, 153, 0.4); background: rgba(52, 211, 153, 0.07); }
.ps-diff-updated { border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.07); }
.ps-diff-custom { border-color: rgba(96, 165, 250, 0.4); background: rgba(96, 165, 250, 0.07); }
.ps-diff-group-title { font-weight: 700; font-size: 0.9rem; }
.ps-diff-count { margin-left: 4px; font-weight: 600; color: var(--text-muted); }
.ps-diff-list { margin: 6px 0 0; padding-left: 18px; font-size: 0.84rem; color: var(--text-secondary); }
.ps-diff-more { list-style: none; margin-left: -18px; color: var(--text-muted); }
.ps-diff-uptodate { font-size: 0.95rem; color: #34d399; }
@media (max-width: 580px) {
  .ps-backup-row { flex-direction: column; align-items: stretch; }
  .ps-backup-buttons { justify-content: flex-end; }
}

/* Studio line icons (replacing emoji) */
.ps-hub-icon, .ps-setup-icon, .ps-share-choice-icon { display: inline-flex; color: var(--accent, #8b7cff); }
.ps-hub-icon svg { width: 26px; height: 26px; }
.ps-setup-icon svg, .ps-share-choice-icon svg { width: 22px; height: 22px; }

/* Hover / focus explanation bubble */
.ps-tip-wrap { position: relative; display: inline-flex; }
.ps-tip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 5;
  width: 280px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #0b0e16;
  border: 1px solid var(--border);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-secondary);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  pointer-events: none;
}
.ps-tip-wrap:hover .ps-tip, .ps-tip-wrap:focus-within .ps-tip { opacity: 1; visibility: visible; transform: none; }

/* Update preview group markers */
.ps-diff-dot { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; vertical-align: 1px; }
.ps-diff-added .ps-diff-dot { background: #34d399; }
.ps-diff-updated .ps-diff-dot { background: #fbbf24; }
.ps-diff-custom .ps-diff-dot { background: #60a5fa; }

/* ==========================================================================
   Profile Studio: poster editor
   ========================================================================== */
.ps-pe { display: flex; flex-direction: column; gap: 16px; }
.ps-pe-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.ps-pe-now {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 16px; border-radius: 14px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  min-width: 0;
}
.ps-pe-now-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.ps-pe-now-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
.ps-pe-now-detail { font-size: 0.86rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.ps-pe-save { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ps-pe-save-state { font-size: 0.84rem; font-weight: 600; color: var(--text-muted); }
.ps-pe-save-state.is-dirty { color: #fbbf24; }
.ps-pe-problems { margin: 0; font-size: 0.86rem; color: #fbbf24; }
.ps-pe-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.ps-pe-section { display: flex; flex-direction: column; gap: 10px; }
.ps-pe-title { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.ps-pe-sub { margin: 0; font-size: 0.84rem; line-height: 1.45; color: var(--text-muted); }
.ps-pe-provider.is-first { border-color: var(--accent); }
.ps-pe-provider.is-net { background: transparent; border-style: dashed; }
.ps-pe-provider.is-first .ps-pe-rank { color: var(--accent-light); }
.ps-pe-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-pe-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--border-hover); background: var(--bg-elevated);
  font-size: 0.85rem; color: var(--text-secondary); cursor: pointer;
}
.ps-pe-toggle:has(input:checked) { color: var(--text-primary); border-color: var(--accent); background: var(--accent-subtle); }
.ps-pe-toggle input { accent-color: var(--accent); }
.ps-pe-field { display: flex; flex-direction: column; gap: 6px; font-size: 0.84rem; font-weight: 600; color: var(--text-secondary); }
.ps-pe-field span { font-weight: 400; color: var(--text-muted); }
.ps-pe-previews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ps-pe-poster { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ps-pe-poster img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px;
  background: var(--bg-elevated); border: 1px solid var(--border-hover); display: block;
}
.ps-pe-poster figcaption { font-size: 0.72rem; color: var(--text-muted); text-align: center; line-height: 1.3; }
.ps-pe-poster.is-broken img { opacity: 0.25; }
.ps-pe-poster.is-broken figcaption::after { content: ' (no poster)'; color: #fbbf24; }

/* Poster chain: the Bounty editor embedded in the Studio. */
.ps-pe-custom { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.ps-pe-problems:empty { display: none; }
@media (max-width: 900px) { .ps-pe-custom { grid-template-columns: minmax(0, 1fr); } }
/* Keep "Save poster look" in reach while scrolling through the editor. */
.ps-pe-top { position: sticky; top: 0; z-index: 5; padding: 10px 0; margin-top: -10px; background: var(--bg-drawer); }

/* ==========================================================================
   COLLECTION MIXER (Profile Studio -> My TV -> Combine & Swap Collection)
   ========================================================================== */
.ps-mixer-deck {
  background: rgba(18, 18, 28, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
.ps-mixer-input-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.ps-mixer-tabs {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
}
.ps-mixer-tab {
  background: transparent;
  border: 0;
  color: var(--text-muted, #94a3b8);
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ps-mixer-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
}
.ps-mixer-tab.active {
  background: var(--accent, var(--accent));
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(var(--k-mint-rgb, 0, 245, 160), 0.35);
}
.ps-mixer-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ps-mixer-row-input {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ps-mixer-textarea {
  width: 100%;
  min-height: 80px;
  max-height: 200px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #fff;
  padding: 10px 14px;
  font-family: monospace;
  font-size: 0.82rem;
  resize: vertical;
}
.ps-mixer-textarea:focus {
  outline: none;
  border-color: var(--accent, var(--accent));
  box-shadow: 0 0 0 2px rgba(var(--k-mint-rgb, 0, 245, 160), 0.25);
}
.ps-mixer-dropzone {
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.2s;
}
.ps-mixer-dropzone:hover {
  border-color: var(--accent, var(--accent));
  background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.05);
  color: #fff;
}
.ps-mixer-loaded-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #4ade80;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Magic Batch Actions Bar */
.ps-mixer-batch-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 16px;
}
.ps-mixer-batch-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ps-mixer-batch-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ps-mixer-batch-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}
.ps-mixer-batch-btn.primary {
  background: linear-gradient(135deg, rgba(var(--k-mint-rgb, 0, 245, 160), 0.35), rgba(var(--k-mint-rgb, 0, 245, 160), 0.35));
  border-color: rgba(var(--k-mint-rgb, 0, 245, 160), 0.4);
  color: #fff;
}
.ps-mixer-batch-btn.primary:hover {
  background: linear-gradient(135deg, rgba(var(--k-mint-rgb, 0, 245, 160), 0.5), rgba(var(--k-mint-rgb, 0, 245, 160), 0.5));
}

/* Comparison Workspace (Dual Columns) */
.ps-mixer-workspace {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ps-mixer-columns-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr);
  gap: 16px;
  padding: 0 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted, #94a3b8);
}
.ps-mixer-row-pair {
  background: rgba(18, 18, 28, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ps-mixer-row-pair:hover {
  border-color: rgba(255, 255, 255, 0.16);
}
.ps-mixer-row-pair.is-expanded {
  border-color: rgba(var(--k-mint-rgb, 0, 245, 160), 0.4);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.ps-mixer-row-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 16px;
  align-items: center;
}

/* Column Cards */
.ps-mixer-row-side {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ps-mixer-row-info {
  flex: 1;
  min-width: 0;
}
.ps-mixer-row-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ps-mixer-row-meta {
  font-size: 0.78rem;
  color: var(--text-muted, #94a3b8);
  margin-top: 2px;
}
.ps-mixer-row-thumbs {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.ps-mixer-row-thumbs img {
  width: 28px;
  height: 42px;
  object-fit: cover;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
}

/* Center Action Column */
.ps-mixer-row-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.ps-mixer-badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  display: inline-block;
}
.ps-mixer-badge.matched {
  background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.2);
  color: var(--accent-light);
  border: 1px solid rgba(var(--k-mint-rgb, 0, 245, 160), 0.4);
}
.ps-mixer-badge.new {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.4);
}
.ps-mixer-badge.user-only {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.3);
}
.ps-mixer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.ps-mixer-chip {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ps-mixer-chip:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}
.ps-mixer-chip.active {
  background: var(--accent, var(--accent));
  border-color: var(--accent, var(--accent));
  color: #fff;
}
.ps-mixer-expand-toggle {
  background: transparent;
  border: 0;
  color: var(--text-muted, #94a3b8);
  font-size: 0.75rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.ps-mixer-expand-toggle:hover {
  color: #fff;
}

/* Accordion Folder Drawer */
.ps-mixer-folder-drawer {
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 14px 18px;
}
.ps-mixer-folder-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 0.8rem;
  color: var(--text-muted, #94a3b8);
}
.ps-mixer-folder-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ps-mixer-folder-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 8px 12px;
}
.ps-mixer-folder-side {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ps-mixer-folder-art {
  width: 36px;
  height: 52px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ps-mixer-folder-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ps-mixer-folder-title {
  font-size: 0.86rem;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ps-mixer-folder-meta {
  font-size: 0.74rem;
  color: var(--text-muted, #94a3b8);
}

/* Floating Counter Dock */
.ps-mixer-dock {
  position: sticky;
  bottom: 12px;
  z-index: 10;
  margin-top: 24px;
  background: rgba(15, 15, 25, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.ps-mixer-dock-stats {
  font-size: 0.88rem;
  color: #cbd5e1;
}
.ps-mixer-dock-stats strong {
  color: #fff;
}
.ps-mixer-dock-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Review & Confirmation Modal */
.ps-mixer-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 22000;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ps-mixer-modal {
  background: #141420;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.7);
  padding: 24px;
  color: #fff;
}
.ps-mixer-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.ps-mixer-modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}
.ps-mixer-summary-list {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.88rem;
}
.ps-mixer-save-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}
.ps-mixer-save-opt {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.ps-mixer-save-opt:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}
.ps-mixer-save-opt.primary {
  border-color: rgba(var(--k-mint-rgb, 0, 245, 160), 0.4);
  background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.08);
}
.ps-mixer-save-opt.primary:hover {
  background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.15);
  border-color: var(--accent, var(--accent));
}

@media (max-width: 900px) {
  .ps-mixer-columns-header {
    display: none;
  }
  .ps-mixer-row-grid, .ps-mixer-folder-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .ps-mixer-row-actions {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding: 8px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
}

/* ==========================================================================
   OVERHAUL — Private Screening Room (mint on obsidian)
   Layered last so it wins over the earlier violet-era rules. Section 1: hero.
   ========================================================================== */

.title-screen-overlay {
  background-color: rgba(3, 4, 7, 0.72);
  background-image: radial-gradient(ellipse 70% 60% at 50% 42%, rgba(3, 4, 7, 0.55) 0%, rgba(3, 4, 7, 0.92) 100%);
  backdrop-filter: blur(5px) saturate(1.15);
  -webkit-backdrop-filter: blur(5px) saturate(1.15);
}

.title-hero-stage { max-width: 640px; }

.title-screen-logo {
  font-size: clamp(2.6rem, 7vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: 18px;
  text-wrap: balance;
}
.title-screen-logo span { color: var(--accent); }

.title-screen-tagline {
  font-size: clamp(0.95rem, 1.6vw, 1.08rem);
  max-width: 52ch;
  line-height: 1.55;
  margin-bottom: 26px;
  text-wrap: pretty;
}
.title-screen-tagline strong { color: var(--text-primary); font-weight: 600; }

.title-live-metrics-pill {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--text-muted);
  margin-bottom: 22px;
}
.title-live-metrics-pill .live-stat-tally,
.title-live-metrics-pill strong { color: var(--text-secondary); font-weight: 600; }
/* The pill links to /stats: quiet at rest, a drawn chevron says it is a link, and the hit area is roomier than the text. Hover keeps it flat. */
a.title-live-metrics-pill { position: relative; text-decoration: none; cursor: pointer; transition: opacity 0.2s ease; }
a.title-live-metrics-pill::before { content: ''; position: absolute; inset: -10px -6px; }
a.title-live-metrics-pill:hover { background: transparent; border-color: transparent; box-shadow: none; }
a.title-live-metrics-pill .live-metric-cycling { color: var(--text-muted); }
.live-pill-chev { flex: none; width: 12px; height: 12px; color: var(--text-muted); }
a.title-live-metrics-pill:hover .live-metric-cycling strong { text-decoration: underline; text-underline-offset: 3px; }
a.title-live-metrics-pill:focus-visible { outline: 2px solid var(--accent-text, #6dfac4); outline-offset: 3px; border-radius: 9999px; }

.title-hero-primary-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

.title-hero-primary-btn.hero-btn-express {
  height: 54px;
  min-height: 54px;
  border-radius: 14px;
  background: var(--accent);
  border: 0;
  color: var(--on-accent, #04130d);
  font-size: 1.02rem;
  font-weight: 700;
  box-shadow: 0 14px 34px -10px rgba(var(--k-mint-rgb, 0, 245, 160), 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
}
.hero-btn-express .hero-btn-text,
.hero-btn-express .hero-btn-icon,
.hero-btn-express .hero-btn-arrow { color: var(--on-accent, #04130d); opacity: 1; }
.hero-btn-express:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 18px 38px -10px rgba(var(--k-mint-rgb, 0, 245, 160), 0.65), 0 3px 8px rgba(0, 0, 0, 0.4) !important;
}
.hero-btn-express:focus-visible,
.hero-btn-custom:focus-visible,
.title-hero-sub-btn:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 3px;
}

/* Custom setup becomes a quiet text action under the primary */

.hero-reassure {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 40ch;
  margin: 10px auto 26px;
  text-wrap: balance;
}

.title-hero-sub-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 4px;
  width: 100%;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.title-hero-returning-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-right: 6px;
}
.title-hero-sub-btn {
  height: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: var(--text-secondary);
  font-size: 0.86rem;
  font-weight: 500;
}
.title-hero-sub-btn:hover,
.title-hero-sub-update:hover,
.title-hero-sub-bounty:hover,
.title-hero-sub-studio:hover {
  transform: none;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--accent-light) !important;
}
@media (max-width: 580px) {
  .title-hero-sub-row { flex-direction: column; gap: 0; }
  .title-hero-returning-label { margin: 0 0 2px; }
  .title-hero-sub-btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   OVERHAUL — Section 2: full-bleed wizard + customize, accessibility floor
   ========================================================================== */

/* Browser surfaces that shipped with defaults */
:root { accent-color: var(--accent); color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
::selection { background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.28); color: var(--text-primary); }
input, textarea, select { caret-color: var(--accent); }
.wizard-overlay, #customize-overlay { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; scrollbar-gutter: stable both-edges; }
/* The title screen hides its scrollbar. Re-showing it pushes everything left of the header's centre line. */
.title-screen-overlay { scrollbar-width: none; scrollbar-gutter: auto; }

/* The wizard is the product. It gets the whole screen, not a 480px card. */
.wizard-overlay,
#customize-overlay {
  padding: 0;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  background-color: #07080c;
  background-image:
    radial-gradient(ellipse 90% 50% at 50% -10%, rgba(var(--k-mint-rgb, 0, 245, 160), 0.10) 0%, transparent 62%),
    radial-gradient(ellipse 70% 40% at 50% 110%, rgba(var(--k-mint-rgb, 0, 245, 160), 0.05) 0%, transparent 70%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.wizard-panel {
  width: min(680px, 100%);
  max-width: 100%;
  max-height: none;
  min-height: 100dvh;
  overflow: visible;
  margin: 0 auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: clamp(8px, 3vh, 36px) clamp(16px, 4vw, 28px) 48px;
  box-sizing: border-box;
  transform: translateY(14px);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.wizard-overlay.open .wizard-panel { transform: none; opacity: 1; }
.wizard-panel.wiz-panel-wide,
.wizard-panel:has(.wiz-poster-studio) { width: min(1040px, 100%); max-width: 100%; }
.wizard-panel:focus, .cust-panel:focus { outline: none; }

.wiz-header {
  padding: 18px 0 18px;
  border-bottom: 0;
  gap: 14px;
}
.wiz-title {
  font-size: clamp(1.55rem, 3.4vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-wrap: balance;
}
.wiz-sub {
  margin-top: 8px;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 56ch;
  text-wrap: pretty;
}
.wiz-back, .wiz-close, .wiz-help-btn { min-width: 44px; height: 44px; border-radius: 12px; }
.wiz-close { width: 44px; }

/* Progress rail: readable at a glance, mint not green */
.wiz-progress { padding: 4px 0 12px; gap: 8px; }
.wiz-prog-bar { height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.10); }
.wiz-prog-label { font-size: 0.8rem; color: var(--text-muted); }
.wiz-prog-step.done .wiz-prog-bar { background: var(--accent-glow); background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.45); }
.wiz-prog-step.done .wiz-prog-label { color: var(--text-secondary); }
.wiz-prog-step.current .wiz-prog-bar { background: var(--accent); box-shadow: 0 0 14px -2px rgba(var(--k-mint-rgb, 0, 245, 160), 0.55); }
.wiz-prog-step.current .wiz-prog-label { color: var(--text-primary); font-weight: 700; }
@media (max-width: 420px) { .wiz-prog-label { font-size: 0.75rem; } }

/* Customize: a full-height stage that gives tiles room */
.cust-panel {
  width: min(1120px, 100%);
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: translateY(14px);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}
#customize-overlay.open .cust-panel { transform: none; opacity: 1; }
.cust-title { font-size: clamp(1.3rem, 2.6vw, 1.75rem); letter-spacing: -0.02em; }
.cust-title span { color: var(--accent); }
.cust-body { padding-left: clamp(14px, 3vw, 32px); padding-right: clamp(14px, 3vw, 32px); }
.cust-visual-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.cust-visual-card { height: 96px; }
@media (max-width: 600px) {
  #customize-overlay { padding: 0; }
  .cust-panel { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .cust-visual-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* Tile checkboxes were display:none, so keyboard users could not reach them.
   Visually hidden but focusable, with the focus shown on the tile itself. */
.cust-filter-card input,
.cust-visual-card input,
.cust-logo-card input {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}
.cust-filter-card { position: relative; }
.cust-filter-card:has(input:focus-visible),
.cust-visual-card:has(input:focus-visible),
.cust-logo-card:has(input:focus-visible) {
  outline: 2px solid var(--accent-light);
  outline-offset: 3px;
}
.cust-filter-emoji { color: var(--accent-light); display: flex; align-items: center; }
.cust-filter-badge .badge-off { color: var(--text-secondary); }

.wiz-body { padding-left: 0; padding-right: 0; }

/* Setup mode: Native is the path, AIO is an opt-in disclosure */
.wiz-advanced { margin: 4px 0 12px; }
.wiz-advanced-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-radius: 10px;
}
.wiz-advanced-summary::-webkit-details-marker { display: none; }
.wiz-advanced-summary::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: rgba(255,255,255,0.07); color: var(--accent-light); font-weight: 700; }
.wiz-advanced[open] .wiz-advanced-summary::before { content: "\2212"; }
.wiz-advanced-summary:hover { color: var(--text-primary); }
.wiz-advanced-summary:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.wiz-option-chip.wiz-option-chip-rec { background: var(--accent); color: var(--on-accent, #04130d); border-color: transparent; font-weight: 700; margin-left: 8px; }

/* ==========================================================================
   OVERHAUL — Section 3: type floor and touch targets
   ========================================================================== */

.cat-badge, .nv-row-count, .control-stat-label, .brand-subtitle, .sidebar-sort-label,
.sidebar-version-label, .nv-hero-eyebrow, .shortcut-or, kbd { font-size: max(11.5px, 0.72rem); }
.nv-card-meta { font-size: max(11.5px, 0.72rem); }

.nv-hero-dot::after,
#telemetry-icon::after,
#preview-help::after {
  content: "";
  position: absolute;
  inset: -14px -6px;
}
#telemetry-icon::after, #preview-help::after { inset: -9px; }

.title-walkthrough-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
}
.title-test-code-toggle { min-height: 44px; }

/* ==========================================================================
   OVERHAUL — Section 4: themes (light, high contrast) for the new surfaces
   ========================================================================== */
html[data-theme="light"] .title-screen-overlay {
  background-image: radial-gradient(ellipse 70% 60% at 50% 42%, rgba(248, 250, 252, 0.55) 0%, rgba(248, 250, 252, 0.96) 100%);
}
html[data-theme="light"] .title-screen-logo { text-shadow: none; }
html[data-theme="light"] .title-screen-logo span { color: var(--accent); text-shadow: none; }
html[data-theme="light"] .hero-btn-express { box-shadow: 0 14px 30px -12px rgba(0, 128, 90, 0.5), 0 2px 6px rgba(15, 23, 42, 0.15); }
html[data-theme="light"] .title-hero-sub-btn:hover { background: rgba(15, 23, 42, 0.06) !important; }
html[data-theme="light"] .wizard-overlay,
html[data-theme="light"] #customize-overlay {
  background-color: var(--bg-app);
  background-image: radial-gradient(ellipse 90% 50% at 50% -10%, rgba(0, 128, 90, 0.10) 0%, transparent 62%);
}
html[data-theme="light"] .wiz-prog-bar { background: rgba(15, 23, 42, 0.12); }
html[data-theme="light"] .wiz-prog-step.done .wiz-prog-bar { background: rgba(0, 128, 90, 0.45); }
html[data-theme="high-contrast"] .title-screen-overlay,
html[data-theme="high-contrast"] .wizard-overlay,
html[data-theme="high-contrast"] #customize-overlay { background-color: var(--bg-app); background-image: none; }
html[data-theme="high-contrast"] .wiz-prog-bar { background: rgba(248, 250, 252, 0.35); }

/* ==========================================================================
   OVERHAUL — Section 5: centering and the desktop wizard
   ========================================================================== */

/* "Already set up?" sits on its own line so the three links centre as a group */
.title-hero-returning-label { flex-basis: 100%; text-align: center; margin: 0 0 2px; }
.title-hero-sub-row { justify-content: center; }
.title-screen-panel, .title-hero-stage { margin-left: auto; margin-right: auto; }

/* ---- Desktop: two panes. Story and progress on the left, the step on the right ---- */
@media (min-width: 1024px) {
  .wizard-overlay { align-items: flex-start; }

  .wizard-panel:not(.wiz-panel-wide):not(:has(.wiz-poster-studio)):has(> .wiz-header) {
    width: min(clamp(940px, 64vw, 1140px), 100%);
    display: grid;
    grid-template-columns: clamp(270px, 23vw, 360px) minmax(0, 600px);
    justify-content: center;
    grid-template-rows: auto auto auto auto;
    align-content: center;
    column-gap: 0;
    padding: 88px clamp(28px, 4vw, 64px) 64px;
  }
  .wizard-panel:not(.wiz-panel-wide):not(:has(.wiz-poster-studio)):has(> .wiz-header) > .wiz-header { display: contents; }

  /* Left pane */
  .wizard-panel:not(.wiz-panel-wide):not(:has(.wiz-poster-studio)):has(> .wiz-header) .wiz-back {
    grid-column: 1; grid-row: 1; justify-self: start; margin-bottom: 28px;
  }
  .wizard-panel:not(.wiz-panel-wide):not(:has(.wiz-poster-studio)):has(> .wiz-header) .wiz-header-text {
    grid-column: 1; grid-row: 2; padding-right: clamp(32px, 4vw, 64px);
  }
  .wizard-panel:not(.wiz-panel-wide):not(:has(.wiz-poster-studio)):has(> .wiz-header) .wiz-title {
    font-size: clamp(1.8rem, 2.3vw, 2.35rem);
    line-height: 1.08;
  }
  .wizard-panel:not(.wiz-panel-wide):not(:has(.wiz-poster-studio)):has(> .wiz-header) .wiz-sub { font-size: 0.95rem; margin-top: 10px; line-height: 1.5; }

  /* Progress becomes a vertical stepper */
  .wizard-panel:not(.wiz-panel-wide):not(:has(.wiz-poster-studio)):has(> .wiz-header) > .wiz-progress {
    grid-column: 1; grid-row: 3;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 36px clamp(32px, 4vw, 64px) 0 0;
  }
  .wizard-panel:not(.wiz-panel-wide):not(:has(.wiz-poster-studio)):has(> .wiz-header) .wiz-prog-step {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    min-height: 34px;
    position: relative;
  }
  .wizard-panel:not(.wiz-panel-wide):not(:has(.wiz-poster-studio)):has(> .wiz-header) .wiz-prog-bar {
    width: 11px; height: 11px; border-radius: 50%; flex: 0 0 11px;
    background: transparent; border: 2px solid rgba(255, 255, 255, 0.22);
    box-shadow: none;
    position: relative;
  }
  .wizard-panel:not(.wiz-panel-wide):not(:has(.wiz-poster-studio)):has(> .wiz-header) .wiz-prog-step:not(:last-child) .wiz-prog-bar::after {
    content: ""; position: absolute; left: 50%; top: 13px; width: 2px; height: 22px;
    transform: translateX(-50%); background: rgba(255, 255, 255, 0.12);
  }
  .wizard-panel:not(.wiz-panel-wide):not(:has(.wiz-poster-studio)):has(> .wiz-header) .wiz-prog-step.done .wiz-prog-bar {
    background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.5); border-color: transparent;
  }
  .wizard-panel:not(.wiz-panel-wide):not(:has(.wiz-poster-studio)):has(> .wiz-header) .wiz-prog-step.done .wiz-prog-bar::after { background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.35); }
  .wizard-panel:not(.wiz-panel-wide):not(:has(.wiz-poster-studio)):has(> .wiz-header) .wiz-prog-step.current .wiz-prog-bar {
    background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--k-mint-rgb, 0, 245, 160), 0.16);
  }
  .wizard-panel:not(.wiz-panel-wide):not(:has(.wiz-poster-studio)):has(> .wiz-header) .wiz-prog-label { font-size: 0.875rem; }

  /* Right pane: the step itself, divided from the story by one hairline */
  .wizard-panel:not(.wiz-panel-wide):not(:has(.wiz-poster-studio)):has(> .wiz-header) > .wiz-body {
    grid-column: 2; grid-row: 1 / -1;
    align-self: center;
    padding: 4px 0 4px clamp(32px, 4vw, 64px);
    border-left: 1px solid var(--border);
    max-width: 600px;
    width: 100%;
    box-sizing: border-box;
  }
  .wizard-panel:not(.wiz-panel-wide):not(:has(.wiz-poster-studio)):has(> .wiz-header) > .wiz-glossary-panel { grid-column: 1 / -1; grid-row: 5; }

  /* Help and close live in the screen corner, not inside the story column */
  .wizard-overlay.open .wiz-close,
  .wizard-overlay.open .wiz-help-btn { position: fixed; top: 24px; z-index: 5; }
  .wizard-overlay.open .wiz-close { right: clamp(20px, 3vw, 40px); }
  .wizard-overlay.open .wiz-help-btn { right: calc(clamp(20px, 3vw, 40px) + 56px); }
  .wizard-overlay .wiz-glossary-panel:not([hidden]) {
    position: fixed; top: 80px; right: clamp(20px, 3vw, 40px); z-index: 5;
    width: min(420px, calc(100vw - 40px)); max-height: calc(100dvh - 112px); overflow: auto;
    background: var(--bg-drawer); border: 1px solid var(--border-hover); border-radius: 16px;
    padding: 18px 20px; box-shadow: var(--shadow-lg);
  }

  /* Brand anchor, top left, so the empty margin reads as composition */
  #wizard-overlay.open::before {
    content: "Kaptain's Collection";
    position: fixed; top: 28px; left: clamp(24px, 3.4vw, 48px);
    font: 800 0.95rem/1 'Outfit', sans-serif; letter-spacing: -0.01em;
    color: var(--text-primary);
    padding-left: 30px;
    background: url('../assets/kaptain-logo-mark-256.webp') left center / 22px 22px no-repeat;
    z-index: 5;
  }
  #wizard-overlay.open::after {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(ellipse 40% 55% at 12% 55%, rgba(var(--k-mint-rgb, 0, 245, 160), 0.07), transparent 70%);
  }
  #wizard-overlay .wizard-panel { position: relative; z-index: 1; }
}

/* Steps without a header (pushing, loading): one centred column, no empty left pane */
.wizard-panel:not(:has(> .wiz-header)) {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.wizard-panel:not(:has(> .wiz-header)) > .wiz-body { width: 100%; max-width: 520px; border: 0; padding-left: 0; padding-right: 0; }
.wiz-center .wiz-title, .wiz-center .wiz-sub { margin-left: auto; margin-right: auto; text-align: center; }
.wiz-center .wiz-title { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.wiz-center .popup-spinner { margin: 0 auto 18px; }

/* Tablet: centre short steps vertically instead of hugging the top edge */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .wizard-panel:not(.wiz-panel-wide):not(:has(.wiz-poster-studio)) {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Very large displays: a modest lift only, never a magnifier */
@media (min-width: 2400px) {
  .wizard-panel { --wz: 1.15; zoom: var(--wz); min-height: calc(100dvh / var(--wz)); }
  .cust-panel { --wz: 1.1; zoom: var(--wz); height: calc(100dvh / var(--wz)); max-height: calc(100dvh / var(--wz)); }
}

/* Landing hero: calmer scale */
.title-screen-logo { font-size: clamp(2.3rem, 5.4vw, 3.6rem); margin-bottom: 14px; }
.title-screen-tagline { font-size: clamp(0.92rem, 1.2vw, 1rem); max-width: 48ch; margin-bottom: 22px; }
.title-hero-primary-grid { max-width: 330px; }
.title-hero-primary-btn.hero-btn-express { height: 50px; min-height: 50px; font-size: 0.97rem; border-radius: 13px; }
.title-hero-sub-btn { font-size: 0.82rem; }
.hero-reassure { font-size: 0.78rem; }

/* Width changes between steps must not animate: it reads as the layout wobbling off-centre. */
.wizard-panel { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease; }

/* ==========================================================================
   OVERHAUL — Section 7: the finish line (one centred column, one accent)
   ========================================================================== */
#wizard-panel:has(.wiz-done-body) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(600px, 100%);
  padding: 72px 20px 56px;
}
#wizard-panel:has(.wiz-done-body) > .wiz-header {
  display: flex; justify-content: center; text-align: center; padding: 0 0 20px; width: 100%;
}
#wizard-panel:has(.wiz-done-body) .wiz-header-text { padding: 0; text-align: center; }
#wizard-panel:has(.wiz-done-body) .wiz-title { font-size: clamp(1.7rem, 2.6vw, 2.2rem); text-align: center; }
#wizard-panel:has(.wiz-done-body) > .wiz-body.wiz-done-body {
  border: 0; padding: 0; max-width: 520px; width: 100%; gap: 12px; align-self: center;
}
.wiz-done-hero {
  background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.08);
  border-color: rgba(var(--k-mint-rgb, 0, 245, 160), 0.28);
  padding: 12px 14px; gap: 12px; border-radius: 12px;
}
/* Support links: one quiet family instead of red, green, blue and indigo */

/* Finish screen on small screens: the title owns the row, help and close pin to the corner */
.wizard-overlay.open #wizard-panel:has(.wiz-done-body) .wiz-close,
.wizard-overlay.open #wizard-panel:has(.wiz-done-body) .wiz-help-btn { position: fixed; top: 16px; z-index: 5; }
.wizard-overlay.open #wizard-panel:has(.wiz-done-body) .wiz-close { right: 16px; }
.wizard-overlay.open #wizard-panel:has(.wiz-done-body) .wiz-help-btn { right: 68px; }

/* Desktop wizard: the left pane stays in view while a tall step scrolls (see wizard-layout.js) */
@media (min-width: 1024px) {
  #wizard-panel > .wiz-side {
    grid-column: 1; grid-row: 1 / -1;
    align-self: start;
    position: sticky; top: 88px;
    padding-right: clamp(32px, 4vw, 64px);
    display: flex; flex-direction: column; align-items: flex-start;
  }
  #wizard-panel > .wiz-side .wiz-header-text { padding-right: 0; }
  #wizard-panel > .wiz-side .wiz-back { margin-bottom: 28px; }
  #wizard-panel > .wiz-side > .wiz-progress {
    flex-direction: column; align-items: flex-start; gap: 0; padding: 36px 0 0 0;
  }
  #wizard-panel > .wiz-side .wiz-prog-step { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 14px; min-height: 34px; position: relative; }
}

/* ==========================================================================
   OVERHAUL — Section 11: the global header stays on top of the wizard
   ========================================================================== */
:root { --kap-header-h: 56px; }
#kaptain-global-header:empty { min-height: var(--kap-header-h); }
html body .kap-global-header { z-index: 25100 !important; }

/* The source drawer joins them: it used to start at the very top, so its title sat behind the header. */
.wizard-overlay,
#customize-overlay,
.drawer-overlay {
  top: var(--kap-header-h);
  height: calc(100vh - var(--kap-header-h));
  height: calc(100dvh - var(--kap-header-h));
}
.wizard-panel { min-height: calc(100dvh - var(--kap-header-h)); }
.cust-panel { height: calc(100dvh - var(--kap-header-h)); max-height: calc(100dvh - var(--kap-header-h)); }
@media (max-width: 600px) {
  .cust-panel { height: calc(100dvh - var(--kap-header-h)); max-height: calc(100dvh - var(--kap-header-h)); }
}

@media (min-width: 1024px) {
  /* The header already carries the brand; drop the duplicate mark */
  #wizard-overlay.open::before { content: none; }
  #wizard-overlay.open::after { top: var(--kap-header-h); }
  .wizard-overlay.open .wiz-close,
  .wizard-overlay.open .wiz-help-btn { top: calc(var(--kap-header-h) + 16px); }
  .wizard-overlay .wiz-glossary-panel:not([hidden]) { top: calc(var(--kap-header-h) + 72px); max-height: calc(100dvh - var(--kap-header-h) - 96px); }
  #wizard-panel > .wiz-side { top: calc(var(--kap-header-h) + 32px); }
  .wizard-panel:not(.wiz-panel-wide):not(:has(.wiz-poster-studio)):has(> .wiz-header) { padding-top: 56px; }
}
.wizard-overlay.open #wizard-panel:has(.wiz-done-body) .wiz-close,
.wizard-overlay.open #wizard-panel:has(.wiz-done-body) .wiz-help-btn { top: calc(var(--kap-header-h) + 12px); }

@media (min-width: 2400px) {
  .wizard-panel { min-height: calc((100dvh - var(--kap-header-h)) / var(--wz, 1)); }
  .cust-panel { height: calc((100dvh - var(--kap-header-h)) / var(--wz, 1)); max-height: calc((100dvh - var(--kap-header-h)) / var(--wz, 1)); }
}

/* ==========================================================================
   OVERHAUL — Section 12: poster setup (a stage for the poster, not a form with a thumbnail)
   ========================================================================== */

/* ---- Fork: two poster cards ---- */
.wiz-poster-fork { flex-direction: column; gap: 14px; }
@media (min-width: 560px) { .wiz-poster-fork { flex-direction: row; align-items: stretch; } }
.wiz-poster-fork .wiz-fork-card {
  flex: 1 0 auto; min-width: 0;
  flex-direction: column; align-items: stretch; gap: 0;
  padding: 0; overflow: hidden; border-radius: 16px;
}
@media (min-width: 560px) { .wiz-poster-fork .wiz-fork-card { flex: 1 1 0; } }
.wiz-poster-fork .wiz-fork-art {
  position: relative; height: 188px; overflow: hidden;
  display: grid; place-items: center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 55%, rgba(var(--k-mint-rgb, 0, 245, 160), 0.10), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.25));
  border-bottom: 1px solid var(--border);
}
.wiz-poster-fork .wiz-fork-card-accent .wiz-fork-art {
  background:
    radial-gradient(ellipse 70% 60% at 50% 55%, rgba(var(--k-mint-rgb, 0, 245, 160), 0.22), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.25));
}
.wiz-mini-poster {
  position: absolute; left: 50%; width: 96px; aspect-ratio: 2 / 3; border-radius: 9px;
  background:
    radial-gradient(circle at 70% 26%, rgba(255,255,255,0.28), transparent 38%),
    linear-gradient(165deg, #25454a 0%, #121c26 62%, #0a0e14 100%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 14px 26px -8px rgba(0,0,0,0.75);
}
.wiz-mini-poster.is-front { z-index: 2; width: 108px; top: 24px; transform: translateX(-50%); }
.wiz-mini-poster.is-back { top: 44px; opacity: 0.9; border-color: rgba(255,255,255,0.2); }
.wiz-mini-poster.is-left { transform: translateX(calc(-50% - 70px)) rotate(-8deg) scale(0.88); background: linear-gradient(165deg, #4a3d5c, #1c2030 70%); }
.wiz-mini-poster.is-right { transform: translateX(calc(-50% + 70px)) rotate(8deg) scale(0.88); background: linear-gradient(165deg, #35564a, #172326 70%); }
.wiz-mini-badge {
  position: absolute; font: 700 0.7rem/1 'Inter', sans-serif; letter-spacing: 0.02em;
  padding: 3px 6px; border-radius: 5px; color: #f1f5f9;
  background: rgba(8, 10, 14, 0.78); border: 1px solid rgba(255,255,255,0.16);
}
.wiz-mini-badge.is-quality { top: 6px; right: 6px; color: var(--accent-light); }
.wiz-mini-badge.is-rating { left: 6px; bottom: 28px; }
.wiz-mini-badge.is-rating::before { content: "\2605"; color: #fbbf24; margin-right: 3px; }
.wiz-mini-badge.is-genre { left: 6px; bottom: 6px; color: var(--text-secondary); }
.wiz-poster-fork .wiz-fork-info { padding: 16px 18px 4px; flex: 1; }
.wiz-poster-fork .wiz-fork-arrow { padding: 8px 18px 16px; display: block; margin-top: auto; }
.wiz-poster-fork .wiz-fork-title { flex-wrap: wrap; row-gap: 6px; }

/* ---- Studio: poster stage left, controls right ---- */
.wiz-section:has(> #wiz-poster-grid) > .wiz-poster-studio {
  background: none; border: 0; padding: 0; margin: 0; gap: 0;
}
.wiz-section:has(> #wiz-poster-grid) .wiz-tv-preview-frame {
  position: relative; isolation: isolate;
  background: none; border: 0; box-shadow: none;
  padding: 30px 10px 12px;
}
.wiz-section:has(> #wiz-poster-grid) .wiz-tv-preview-frame::before {
  content: ""; position: absolute; inset: 0 -8% 8% -8%; z-index: -1;
  background: radial-gradient(ellipse at 50% 38%, rgba(var(--k-mint-rgb, 0, 245, 160), 0.16), transparent 68%);
  background-image: var(--poster-url, none), radial-gradient(ellipse at 50% 38%, rgba(var(--k-mint-rgb, 0, 245, 160), 0.16), transparent 68%);
  background-size: cover, auto; background-position: center;
  filter: blur(42px) saturate(1.5) brightness(0.6);
  opacity: 0.85; border-radius: 32px;
  transition: opacity 0.5s ease;
}
.wiz-section:has(> #wiz-poster-grid) .wiz-poster-frame {
  width: clamp(190px, 18vw, 250px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 30px 60px -18px rgba(0,0,0,0.9), 0 0 0 1px rgba(0,0,0,0.5);
}
.wiz-section:has(> #wiz-poster-grid) .wiz-tv-movie-info { margin-top: 18px; }
.wiz-section:has(> #wiz-poster-grid) .wiz-tv-movie-title { font-size: 1rem; max-width: 100%; letter-spacing: -0.01em; }
.wiz-section:has(> #wiz-poster-grid) .wiz-poster-studio-settings {
  background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 16px; padding: 4px 20px;
}
.wiz-section:has(> #wiz-poster-grid) .wiz-poster-source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; }
.wiz-section:has(> #wiz-poster-grid) .wiz-source-card { min-height: 64px; }

@media (min-width: 900px) {
  .wiz-section:has(> #wiz-poster-grid) {
    display: grid;
    grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
    column-gap: clamp(36px, 5vw, 72px);
    align-items: start;
  }
  .wiz-section:has(> #wiz-poster-grid) > div:first-child { grid-column: 1 / -1; }
  .wiz-section:has(> #wiz-poster-grid) > #wiz-poster-grid { grid-column: 2; grid-row: 2; }
  .wiz-section:has(> #wiz-poster-grid) > .wiz-poster-studio { display: contents; }
  .wiz-section:has(> #wiz-poster-grid) .wiz-poster-studio-visual {
    grid-column: 1; grid-row: 2 / span 2; align-self: start;
    position: sticky; top: calc(var(--kap-header-h) + 24px);
  }
  .wiz-section:has(> #wiz-poster-grid) .wiz-poster-studio-settings { grid-column: 2; grid-row: 3; }
}

/* ==========================================================================
   OVERHAUL — Section 13: Where Should It Go (a tidy ledger, not a wall of cards)
   ========================================================================== */
.wiz-gap-banner, .wiz-gap-banner.is-caught-up {
  background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.06);
  border: 1px solid rgba(var(--k-mint-rgb, 0, 245, 160), 0.22);
  color: var(--text-secondary);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.88rem;
  line-height: 1.45;
}
.wiz-gap-banner strong, .wiz-gap-banner.is-caught-up strong { color: var(--accent-light); }

/* ==========================================================================
   OVERHAUL — Section 14: real artwork on the fork, the poster stack, the finish line
   ========================================================================== */

/* ---- Fork cards now carry real posters ---- */
.wiz-mini-poster.has-art { background-size: cover; background-position: center; background-color: #0b0d12; }
.wiz-mini-poster.has-art .wiz-mini-badge { display: none; }
.wiz-poster-fork .wiz-fork-art .wiz-mini-poster.is-front { width: 112px; }

/* ---- Studio poster is a button that opens the stack ---- */
.wiz-poster-frame[role="button"] { cursor: zoom-in; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease; }
.wiz-poster-frame[role="button"]:hover { transform: translateY(-4px) scale(1.015); }
.wiz-poster-frame[role="button"]:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 4px; }
.wiz-poster-frame-hint {
  position: absolute; left: 50%; bottom: 12px; transform: translate(-50%, 6px);
  padding: 7px 12px; border-radius: 999px; white-space: nowrap;
  font: 600 0.78rem/1 'Inter', sans-serif; color: #f1f5f9;
  background: rgba(8, 10, 14, 0.78); border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.2s ease, transform 0.25s ease;
  pointer-events: none;
}
.wiz-poster-frame:hover .wiz-poster-frame-hint,
.wiz-poster-frame:focus-visible .wiz-poster-frame-hint { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .wiz-poster-frame-hint { opacity: 1; transform: translate(-50%, 0); } }

/* ---- Poster stack ---- */
.wiz-stack-overlay {
  position: fixed; inset: 0; z-index: 26000;
  display: grid; grid-template-rows: 1fr auto auto; justify-items: center;
  padding: clamp(56px, 8vh, 88px) 20px 28px;
  background: #05060a; color: var(--text-primary);
  opacity: 0; transition: opacity 0.3s ease;
}
.wiz-stack-overlay.is-open { opacity: 1; }
.wiz-stack-bgs { position: absolute; inset: 0; overflow: hidden; }
.wiz-stack-bg {
  position: absolute; inset: -10%; background-size: cover; background-position: center;
  filter: blur(56px) saturate(1.5) brightness(0.5); opacity: 0; transition: opacity 0.6s ease;
}
.wiz-stack-bg.is-on { opacity: 1; }
.wiz-stack-bgs::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 42%, transparent 20%, rgba(5, 6, 10, 0.78) 100%); }
.wiz-stack-close {
  position: absolute; top: 16px; right: 16px; z-index: 3; width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,0.08); border: 1px solid var(--border-hover); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.wiz-stack-close:hover { background: rgba(255,255,255,0.14); }
.wiz-stack-stage { position: relative; z-index: 2; width: 100%; display: grid; place-items: center; min-height: 0; }
.wiz-stack { position: relative; width: min(100%, 560px); height: 100%; min-height: 300px; max-height: 70vh; display: grid; place-items: center; touch-action: pan-y; }
.wiz-stack-card {
  --w: min(380px, 62vw, calc((100dvh - 330px) / 1.5));
  position: absolute; margin: 0; width: var(--w); aspect-ratio: 2 / 3; border-radius: 16px; overflow: hidden;
  background: linear-gradient(160deg, #1b2330, #0c1118);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 34px 70px -22px rgba(0,0,0,0.95), 0 0 0 1px rgba(0,0,0,0.4);
  transform: translate3d(var(--tx, 0), var(--ty, 0), 0) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  will-change: transform; cursor: pointer;
}
.wiz-stack-card img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.4s ease; }
.wiz-stack-card.is-loaded img { opacity: 1; }
.wiz-stack-card:not(.is-loaded)::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.07) 50%, transparent 70%);
  background-size: 200% 100%; animation: wizStackShimmer 1.4s linear infinite;
}
@keyframes wizStackShimmer { to { background-position: -200% 0; } }
.wiz-stack-card[data-depth="0"] { box-shadow: 0 44px 90px -24px rgba(0,0,0,0.98), 0 0 60px -10px rgba(var(--k-mint-rgb, 0, 245, 160), 0.18), 0 0 0 1px rgba(0,0,0,0.4); }
.wiz-stack-card.is-leaving { transform: translate3d(70%, -6%, 0) rotate(14deg) scale(1) !important; opacity: 0 !important; transition: transform 0.38s cubic-bezier(0.4, 0, 0.9, 0.5), opacity 0.34s ease; }
.wiz-stack-card:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 4px; }
.wiz-stack-caption { position: relative; z-index: 2; text-align: center; padding-top: 28px; max-width: 640px; }
.wiz-stack-title { font: 800 clamp(1.3rem, 2.4vw, 1.8rem)/1.15 'Outfit', sans-serif; letter-spacing: -0.02em; text-wrap: balance; }
.wiz-stack-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.wiz-stack-chip {
  font-size: 0.78rem; font-weight: 600; color: var(--text-secondary);
  padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,0.07); border: 1px solid var(--border-hover);
}
.wiz-stack-chip:first-child { color: var(--accent-light); border-color: rgba(var(--k-mint-rgb, 0, 245, 160), 0.35); background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.08); }
.wiz-stack-controls { position: relative; z-index: 2; display: flex; align-items: center; gap: 18px; padding-top: 20px; }
.wiz-stack-nav {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,0.08); border: 1px solid var(--border-hover); color: #fff; font-size: 1.1rem;
  transition: background 0.15s ease, transform 0.15s ease;
}
.wiz-stack-nav:hover { background: rgba(255,255,255,0.16); transform: scale(1.06); }
.wiz-stack-nav:focus-visible, .wiz-stack-close:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }
.wiz-stack-count { min-width: 56px; text-align: center; font: 600 0.9rem/1 'Inter', sans-serif; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
@media (max-height: 700px) { .wiz-stack-overlay { padding-top: 48px; } .wiz-stack-caption { padding-top: 16px; } }
@media (prefers-reduced-motion: reduce) { .wiz-stack-card, .wiz-stack-bg { transition-duration: 0.01s !important; } }

/* ---- Finish line ---- */
#wizard-panel:has(.wiz-done-body) { width: min(560px, 100%); padding: 40px 20px 56px; justify-content: flex-start; }
#wizard-panel:has(.wiz-done-body) > .wiz-header { display: contents; }
#wizard-panel:has(.wiz-done-body) > .wiz-header .wiz-header-text { display: none; }
#wizard-panel:has(.wiz-done-body) > .wiz-body.wiz-done-body { max-width: 520px; gap: 16px; }
.wiz-done-body .wiz-done-hero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: none; border: 0; padding: 8px 0 8px; gap: 0;
}
.wiz-done-ring { width: 76px; height: 76px; margin-bottom: 20px; position: relative; }
.wiz-done-ring svg { width: 100%; height: 100%; overflow: visible; }
.wiz-ring-track { fill: rgba(var(--k-mint-rgb, 0, 245, 160), 0.08); stroke: rgba(var(--k-mint-rgb, 0, 245, 160), 0.18); stroke-width: 2; }
.wiz-ring-draw {
  fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 145; stroke-dashoffset: 145; transform: rotate(-90deg); transform-origin: 26px 26px;
  animation: wizRingDraw 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}
.wiz-ring-tick {
  fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 34; stroke-dashoffset: 34; animation: wizRingDraw 0.5s ease 0.7s forwards;
}
@keyframes wizRingDraw { to { stroke-dashoffset: 0; } }
.wiz-done-ring::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--k-mint-rgb, 0, 245, 160), 0.18), transparent 68%); z-index: -1; }
.wiz-done-headline { font: 800 clamp(1.8rem, 3.2vw, 2.3rem)/1.1 'Outfit', sans-serif; letter-spacing: -0.02em; margin: 0; }
.wiz-done-lede { margin: 10px 0 0; color: var(--text-secondary); font-size: 1rem; line-height: 1.5; max-width: 44ch; text-wrap: balance; }
.wiz-done-lede strong { color: var(--text-primary); font-weight: 600; }
.wiz-done-card {
  border: 1px solid var(--border); border-radius: 16px; background: rgba(255, 255, 255, 0.025); padding: 16px 18px;
}
.wiz-done-card-title { margin: 0 0 12px; font: 600 0.8rem/1 'Inter', sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.wiz-done-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: flex; flex-direction: column; gap: 10px; }
.wiz-done-steps li { counter-increment: s; display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: 0.95rem; line-height: 1.45; color: var(--text-secondary); }
.wiz-done-steps li::before {
  content: counter(s); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font: 700 0.8rem/1 'Inter', sans-serif; color: var(--accent-light); background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.1); border: 1px solid rgba(var(--k-mint-rgb, 0, 245, 160), 0.3);
}
.wiz-done-steps strong { color: var(--text-primary); font-weight: 600; }
.wiz-done-card .wiz-done-grid { grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.wiz-done-card .wiz-sum-badge { background: none; border: 0; padding: 0; font-size: 0.88rem; color: var(--text-secondary); gap: 8px; align-items: flex-start; }
.wiz-done-card .wiz-sum-badge svg { color: var(--accent); width: 15px; height: 15px; flex: none; margin-top: 2px; }
.wiz-done-card .wiz-sum-badge.todo { color: var(--text-muted); }
.wiz-done-card .wiz-sum-dot { color: var(--text-muted); width: 15px; text-align: center; flex: none; }

/* AIO Metadata login card (Done screen) */
.wiz-login-card .wiz-hint { margin: 0 0 12px; }
.wiz-login-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; flex-wrap: wrap; }
.wiz-login-label { flex: 0 0 76px; font-size: 0.88rem; color: var(--text-muted); }
.wiz-login-value { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; font: 500 0.88rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text-primary); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 10px 12px; }
.wiz-login-btn { min-height: 44px; min-width: 56px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); color: var(--text-secondary); font: 600 0.88rem Inter, sans-serif; cursor: pointer; transition: background 0.15s cubic-bezier(0.2,0,0,1), color 0.15s cubic-bezier(0.2,0,0,1); }
.wiz-login-btn:hover { background: rgba(255,255,255,0.07); color: var(--text-primary); }
.wiz-login-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wiz-login-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
@media (max-width: 520px) { .wiz-done-card .wiz-done-grid { grid-template-columns: 1fr; } }
.wiz-done-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.wiz-done-actions .wiz-primary { width: 100%; height: 50px; }
.wiz-done-secondary { display: flex; gap: 10px; }
.wiz-done-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; padding-top: 6px; }
.wiz-done-links a {
  font-size: 0.85rem; font-weight: 500; color: var(--text-muted); text-decoration: none; padding: 10px 12px; border-radius: 8px;
}
.wiz-done-links a:hover { color: var(--accent-light); background: rgba(255,255,255,0.05); }
.wiz-done-links a:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.wiz-done-links a + a::before { content: none; }
@media (prefers-reduced-motion: reduce) { .wiz-ring-draw, .wiz-ring-tick { animation-duration: 0.01s; animation-delay: 0s; } }

#wizard-panel:focus, #wizard-panel:focus-visible, #customize-panel:focus, #customize-panel:focus-visible { outline: none; }

/* ==========================================================================
   OVERHAUL — Section 15: landing atmosphere (poster wall, spotlight, reveal)
   ========================================================================== */
@property --beam-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---- Poster wall ---- */
.hero-wall { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; perspective: 1500px; }
.hero-wall.is-ready { opacity: var(--wall-fade, 1); }
.title-screen-overlay:not(.active) .hero-wall *,
.title-screen-overlay.wall-paused .hero-wall * { animation-play-state: paused !important; }
html:not([data-theme="light"]) .title-screen-overlay:has(> .hero-wall.is-ready) {
  background-color: #05060a; background-image: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-theme="light"] .hero-wall { display: none; }

.hero-wall-plane {
  position: absolute; inset: -30% -18%;
  display: grid; grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 22px);
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--px, 0) * -22px), calc(var(--py, 0) * -14px), 0) rotateX(24deg) rotateZ(-11deg) scale(1.02);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
/* One dim per column (about 10 layers) instead of a filter + shadow on each of ~150 posters. */
.hero-wall-col { overflow: hidden; opacity: 0.58; }
.hero-wall-list { display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 22px); animation: wallUp var(--dur, 80s) linear var(--off, 0s) infinite; will-change: transform; }
.hero-wall-col.is-down .hero-wall-list { animation-name: wallDown; }
@keyframes wallUp { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }
@keyframes wallDown { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(0, 0, 0); } }
.hero-wall-list img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 12px; display: block;
  background: #0d1118; opacity: 0; transform: scale(0.96);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-wall-list img.is-in { opacity: 1; transform: none; }

/* Keep the middle calm: the copy always sits on a dark pool of light */
.hero-wall-shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 58% 66% at 50% 48%, rgba(5, 6, 10, 0.96) 0%, rgba(5, 6, 10, 0.84) 50%, rgba(5, 6, 10, 0.1) 100%),
    linear-gradient(180deg, rgba(5, 6, 10, 0.8) 0%, transparent 18%, transparent 76%, rgba(5, 6, 10, 0.92) 100%);
}
.hero-spot {
  position: absolute; inset: 0;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 40%), rgba(var(--k-mint-rgb, 0, 245, 160), 0.13), transparent 62%);
  mix-blend-mode: screen; transition: background-position 0.2s ease;
}
.hero-grain {
  position: absolute; inset: -50%; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.title-screen-panel { position: relative; z-index: 1; }
.title-screen-overlay > .theme-toggle-btn { z-index: 2; }
.title-hero-stage::before { opacity: 0.035; }

/* ---- Headline: words rise out of a clip ---- */
.title-screen-logo.fx-split .fx-word { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0.04em 0.12em; margin: -0.06em -0.04em -0.12em; }
.title-screen-logo.fx-split .fx-word > span {
  display: inline-block; transform: translateY(105%); filter: blur(8px); opacity: 0;
  animation: fxWordIn 1s cubic-bezier(0.16, 1, 0.3, 1) calc(0.15s + var(--i, 0) * 0.14s) forwards;
}
.title-screen-logo .fx-word, .title-screen-logo .fx-word > span { color: inherit; text-shadow: inherit; }
.title-screen-logo span .fx-word { display: block; }
.title-screen-logo span:has(> .fx-word) { display: block; }
@keyframes fxWordIn { to { transform: none; filter: blur(0); opacity: 1; } }
.title-screen-logo.fx-split .fx-word:nth-child(n) { white-space: nowrap; }

/* ---- Primary button: travelling light on the edge, magnetic lean, slow breathing glow ---- */
.title-hero-primary-btn.hero-btn-express {
  position: relative; isolation: isolate;
  transform: translate3d(var(--bx, 0px), var(--by, 0px), 0);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, filter 0.2s ease;
  animation: expressBreath 4.2s ease-in-out infinite;
}
.title-hero-primary-btn.hero-btn-express::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; z-index: 1; pointer-events: none;
  background: conic-gradient(from var(--beam-a), transparent 0 72%, rgba(255, 255, 255, 0.9) 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: beamSpin 3.6s linear infinite;
}
@keyframes beamSpin { to { --beam-a: 360deg; } }
@keyframes expressBreath {
  0%, 100% { box-shadow: 0 14px 34px -10px rgba(var(--k-mint-rgb, 0, 245, 160), 0.5), 0 2px 6px rgba(0, 0, 0, 0.35); }
  50% { box-shadow: 0 18px 46px -8px rgba(var(--k-mint-rgb, 0, 245, 160), 0.72), 0 2px 6px rgba(0, 0, 0, 0.35); }
}
.hero-btn-express .hero-btn-arrow { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.hero-btn-express:hover .hero-btn-arrow { transform: translateX(5px); }

/* ---- Staggered entrance for the rest of the hero ---- */
.title-screen-overlay.active .title-screen-tagline { animation-delay: 0.7s; }
.title-screen-overlay.active .title-live-metrics-pill { animation: titleScreenFadeUp 0.7s cubic-bezier(0.2, 0, 0, 1) 0.85s both; }
.title-screen-overlay.active .title-hero-primary-grid { animation: titleScreenFadeUp 0.8s cubic-bezier(0.2, 0, 0, 1) 1s both; }
.title-screen-overlay.active .hero-reassure,
.title-screen-overlay.active .title-hero-sub-row,
.title-screen-overlay.active .hero-tip-btn { animation: titleScreenFadeUp 0.8s cubic-bezier(0.2, 0, 0, 1) 1.25s both; }

/* ---- Tip button: present, warm, never pushy ---- */
.hero-tip-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; height: 44px; padding: 0 18px;
  border-radius: 999px; text-decoration: none; font: 600 0.88rem/1 'Inter', sans-serif;
  color: var(--accent-light); background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.07); border: 1px solid rgba(var(--k-mint-rgb, 0, 245, 160), 0.34);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}
.hero-tip-btn svg { width: 16px; height: 16px; fill: currentColor; animation: tipBeat 2.8s ease-in-out infinite; transform-origin: center; }
@keyframes tipBeat { 0%, 100% { transform: scale(1); } 8% { transform: scale(1.22); } 16% { transform: scale(1); } 24% { transform: scale(1.14); } 34% { transform: scale(1); } }
.hero-tip-btn:hover { background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.16); border-color: rgba(var(--k-mint-rgb, 0, 245, 160), 0.6); transform: translateY(-2px); box-shadow: 0 10px 26px -10px rgba(var(--k-mint-rgb, 0, 245, 160), 0.5); }
.hero-tip-btn:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }
html[data-theme="light"] .hero-tip-btn { color: var(--accent); }

/* ---- Finish screen: tip button beside Studio ---- */
.wiz-tip-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--accent-light) !important; border-color: rgba(var(--k-mint-rgb, 0, 245, 160), 0.34) !important; background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.07) !important; text-decoration: none; }
.wiz-tip-btn svg { width: 15px; height: 15px; fill: currentColor; }
.wiz-tip-btn:hover { background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.16) !important; border-color: rgba(var(--k-mint-rgb, 0, 245, 160), 0.6) !important; }

/* ---- Small screens and reduced motion ---- */
@media (max-width: 760px) {
  .hero-wall-plane { inset: -20% -40%; transform: rotateX(20deg) rotateZ(-9deg) scale(1.05); }
  .hero-wall-shade { background: radial-gradient(ellipse 80% 60% at 50% 46%, rgba(5,6,10,0.94) 0%, rgba(5,6,10,0.8) 55%, rgba(5,6,10,0.35) 100%), linear-gradient(180deg, rgba(5,6,10,0.85) 0%, transparent 18%, transparent 72%, rgba(5,6,10,0.95) 100%); }
}
/* iOS / Safari (html.perf-lite, set in index.html head): WebKit chokes on 3D tilt, blend modes, SVG-noise grain and per-poster filters.
   Flat 2D wall, one dim overlay instead of per-image filter + shadow. */
html.perf-lite .hero-wall { perspective: none; }
html.perf-lite .hero-wall-plane { transform-style: flat; transform: rotate(-11deg) skewX(-3deg) scale(1.08); transition: none; }
html.perf-lite .hero-wall-list { will-change: auto; }
html.perf-lite .hero-wall-col { opacity: 1; }
html.perf-lite .hero-wall-list img { filter: none; box-shadow: none; transition: opacity 0.6s ease; transform: none; opacity: 0; }
html.perf-lite .hero-wall-list img.is-in { opacity: 0.58; }
html.perf-lite .hero-grain { display: none; }
/* static brand glow: same look as the pointer spotlight, no blend mode, no tracking */
html.perf-lite .hero-spot { mix-blend-mode: normal; background: radial-gradient(70% 38% at 50% 62%, rgba(var(--k-mint-rgb, 0, 245, 160), 0.14), transparent 70%); }
@media (prefers-reduced-motion: reduce) {
  .hero-wall-list, .title-hero-primary-btn.hero-btn-express, .title-hero-primary-btn.hero-btn-express::before, .hero-tip-btn svg { animation: none !important; }
  .title-screen-logo.fx-split .fx-word > span { animation-duration: 0.01s; animation-delay: 0s; }
  .hero-wall-plane { transition: none; }
}

.wiz-done-secondary { flex-wrap: wrap; }
.wiz-done-secondary > * { flex: 1 1 140px; }

/* ==========================================================================
   OVERHAUL — Section 16: desktop hero composition, quiet home tip, loud finish tip
   ========================================================================== */

/* Home: the tip is a whisper, not a button */
.hero-tip-btn {
  height: 44px; padding: 0 12px; margin-top: 4px; gap: 7px;
  background: none; border: 0; border-radius: 10px; box-shadow: none;
  color: var(--text-muted); font-size: 0.82rem; font-weight: 500;
}
.hero-tip-btn svg { width: 14px; height: 14px; color: var(--accent); opacity: 0.75; animation: none; }
.hero-tip-btn:hover { background: rgba(255, 255, 255, 0.05); border: 0; transform: none; box-shadow: none; color: var(--accent-light); }
.hero-tip-btn:hover svg { opacity: 1; animation: tipBeat 1.4s ease-in-out infinite; }

/* Finish: the tip is a real button, right under Done */
.wiz-tip-btn.is-prominent {
  width: 100%; height: 50px; border-radius: 12px; font-size: 0.98rem; font-weight: 700; letter-spacing: 0.005em;
  color: var(--accent-light) !important; background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.12) !important; border: 1px solid rgba(var(--k-mint-rgb, 0, 245, 160), 0.5) !important;
  box-shadow: 0 10px 28px -14px rgba(var(--k-mint-rgb, 0, 245, 160), 0.55);
}
.wiz-tip-btn.is-prominent svg { width: 17px; height: 17px; animation: tipBeat 2.8s ease-in-out infinite; }
.wiz-tip-btn.is-prominent:hover { background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.2) !important; border-color: var(--accent) !important; transform: translateY(-1px); }

/* Desktop: a composed hero, not a phone layout on a big screen */
@media (min-width: 1024px) {
  .title-screen-panel { max-width: 1120px; }
  .title-hero-stage { max-width: 1040px; padding-bottom: 120px; }

  /* CTAs sit side by side */
  .title-screen-hero-layout { max-width: 760px; gap: 14px; }
  .title-hero-primary-grid {
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    gap: 12px; max-width: none; width: auto; margin: 0 auto;
  }
  .title-hero-primary-btn.hero-btn-express { width: 272px; }
  .hero-reassure { margin: 4px auto 22px; max-width: none; }

  /* "Already set up?" becomes a single glass bar */
  .title-hero-sub-row {
    display: inline-flex; flex-wrap: nowrap; width: auto; align-items: center; justify-content: center;
    gap: 2px; padding: 4px 6px 4px 6px; margin: 0 auto;
    border: 1px solid var(--border-hover); border-top: 1px solid var(--border-hover); border-radius: 16px;
    background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .title-hero-returning-label {
    flex-basis: auto; margin: 0 8px 0 0; padding: 0 16px 0 12px; border-right: 1px solid var(--border-hover);
    line-height: 32px; font-size: 0.82rem; white-space: nowrap;
  }
  .title-hero-sub-btn { height: 40px; min-height: 40px; padding: 0 14px; border-radius: 11px; white-space: nowrap; }

  /* Footer band: quiet utilities pinned to the bottom edge, ship cue in the middle */
  .title-test-code { position: absolute; left: 0; bottom: 22px; margin: 0; align-items: flex-start; z-index: 6; }
  .title-test-code-toggle { color: var(--text-muted); font-size: 0.8rem; text-decoration-color: rgba(255,255,255,0.25); }
  .title-test-code-panel {
    position: absolute; bottom: 100%; left: 0; margin-bottom: 8px; width: 360px; z-index: 7;
    background: rgba(8, 10, 14, 0.92); backdrop-filter: blur(16px); box-shadow: var(--shadow-lg);
  }
  .hero-tip-btn { position: absolute; right: 0; bottom: 22px; margin: 0; z-index: 6; }
  .title-hero-logo-emblem { position: absolute; left: 50%; bottom: 78px; margin: 0; transform: translateX(-50%); }
  .title-hero-logo-img { width: 52px; height: 52px; max-width: 52px; max-height: 52px; }
  .title-scroll-indicator { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); margin: 0; flex-direction: row; gap: 8px; }
  .title-scroll-indicator .scroll-ind-text { font-size: 0.78rem; }
}

/* Avatar field in the wizard's new-profile steps */
.wiz-avatar-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.wiz-avatar-preview { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); background: rgba(255,255,255,0.03); flex: none; }
.wiz-avatar-btn { min-height: 44px; }
@media (max-width: 480px) {
  .wiz-login-label { flex-basis: 100%; }
  .wiz-login-value { flex: 1 1 0; }
}

/* Supporter thank-you celebration */

/* Cinematic Editor: Art Theater side panel */
.ps-spatial-side { position: absolute; top: 72px; right: 20px; bottom: 96px; width: 300px; overflow-y: auto; padding: 18px; background: rgba(14, 17, 24, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; z-index: 30; }
.nv-side-title { margin: 0 0 4px; font: 700 1.1rem Outfit, Inter, sans-serif; color: #fff; }
.nv-side-meta { margin: 0 0 14px; font-size: 0.8rem; color: #94a3b8; }
.nv-side-switches { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.nv-side-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: transparent; color: #e2e8f0; font: 600 0.88rem Inter, sans-serif; cursor: pointer; }
.nv-side-switch i { width: 38px; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); position: relative; flex: none; }
.nv-side-switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.15s ease; }
.nv-side-switch[aria-checked="true"] i { background: var(--accent, var(--k-mint, #00f5a0)); }
.nv-side-switch[aria-checked="true"] i::after { transform: translateX(16px); background: var(--on-accent, #04130d); }
.nv-side-switch:focus-visible, .nv-side-link:focus-visible { outline: 2px solid var(--accent, var(--k-mint, #00f5a0)); outline-offset: 2px; }
.nv-side-label { margin: 0 0 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; }
.nv-side-link { margin-top: 14px; min-height: 44px; padding: 0 14px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; color: #fff; font: 600 0.88rem Inter, sans-serif; cursor: pointer; width: 100%; }
@media (max-width: 760px) { .ps-spatial-side { position: static; width: auto; margin: 0 12px 8px; max-height: 32vh; } .ps-spatial-theater.is-open { overflow-y: auto; } }

/* Embedded "my collection" view: just the editor, no site chrome. */
html.is-embed #kaptain-global-header, html.is-embed #title-screen-overlay, html.is-embed .kcv-pill,
html.is-embed .nv-preview-bar, html.is-embed #preview-fab, html.is-embed .top-bar-right { display: none !important; }

/* "View my collection" pill + overlay. Above the wizard (25000) and the full-page Studio (100000). */
.kcv-pill { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom) + var(--kcv-offset, 0px)); z-index: 100050; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: rgba(14, 17, 24, 0.94); color: #f8fafc; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); font: 600 0.88rem Inter, sans-serif; cursor: pointer; }
.kcv-pill[hidden] { display: none; }
.kcv-pill svg { color: var(--accent, var(--k-mint, #00f5a0)); }
.kcv-pill:hover { border-color: rgba(var(--k-mint-rgb, 0, 245, 160), 0.45); }
.kcv-pill:focus-visible, .kcv-close:focus-visible { outline: 2px solid var(--accent, var(--k-mint, #00f5a0)); outline-offset: 3px; }
.kcv-overlay { position: fixed; inset: 0; z-index: 100500; background: #08090d; }
.kcv-frame { width: 100%; height: 100%; border: 0; display: block; }
.kcv-close { position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 100501; min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--accent, var(--k-mint, #00f5a0)); color: var(--on-accent, #04130d); font: 600 0.92rem Inter, sans-serif; cursor: pointer; }
html.kcv-locked { overflow: hidden; }
html:has(#wizard-overlay.open), html:has(.ps-qe-footer), html:has(.nv-preview-bar) { --kcv-offset: 76px; }
@media (max-width: 400px) { .kcv-pill span { display: none; } .kcv-pill { padding: 0 14px; } }

/* Done screen: the three actions stay on screen (sticky footer), the rest scrolls above them. */
#wizard-panel:has(.wiz-done-body) { padding-top: 28px; padding-bottom: 0; }
.wiz-done-body { padding-bottom: 0; }
.wiz-done-body .wiz-done-hero { padding: 0; }
.wiz-done-ring { width: 56px; height: 56px; margin-bottom: 12px; }
.wiz-done-headline { font-size: clamp(1.5rem, 3vw, 1.9rem); }
.wiz-done-lede { margin-top: 6px; font-size: 0.95rem; }
.wiz-done-details > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; min-height: 28px; margin: 0; }
.wiz-done-details > summary::-webkit-details-marker { display: none; }
.wiz-done-details > summary::after { content: '\25BE'; margin-left: 8px; opacity: 0.7; }
.wiz-done-details[open] > summary::after { content: '\25B4'; }
.wiz-done-details[open] > summary { margin-bottom: 12px; }
.wiz-done-details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.wiz-done-count { margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,0.08); font-size: 0.72rem; letter-spacing: 0; }
.wiz-done-details > summary { justify-content: flex-start; }
.wiz-done-details > summary::after { margin-left: auto; }
.wiz-done-footer {
  position: sticky; bottom: 0; z-index: 3; margin: 0 -20px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg-app, #0a0b10) 78%, rgba(10, 11, 16, 0));
  display: flex; flex-direction: column; gap: 8px;
}
.wiz-done-footer .wiz-done-actions { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; margin: 0; align-items: stretch; }
.wiz-done-footer .wiz-done-actions .wiz-primary { width: 100%; height: 46px; }
.wiz-done-footer .wiz-tip-btn.is-prominent { height: 46px; width: 100%; margin: 0; }
.wiz-done-footer .wiz-done-secondary { display: contents; }
.wiz-done-footer .wiz-done-secondary > * { height: 46px; min-width: 0; flex: none; }
@media (max-width: 480px) {
  .wiz-done-footer .wiz-done-actions { grid-template-columns: 1fr 1fr; }
  .wiz-done-footer .wiz-done-actions .wiz-primary { grid-column: 1 / -1; }
}
@media (max-width: 480px) { html:has(.wiz-done-footer) { --kcv-offset: 132px; } }

/* Wizard streaming: one question per screen */
.wiz-stream-how .wiz-option, .wiz-stream-grid .wiz-option { margin-bottom: 10px; }
.wiz-stream-grid { display: flex; flex-direction: column; }
.wiz-stream-svc-card, .wiz-stream-bundle-card { min-height: 64px; align-items: center; }
.wiz-stream-svc-card[aria-checked="true"], .wiz-stream-bundle-card[aria-checked="true"] { border-color: var(--accent); background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.06); }
.wiz-stream-saved { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-weight: 600; font-size: 0.92rem; color: var(--accent); }
.wiz-stream-saved svg, .wiz-stream-svc-card .wiz-option-chip svg { width: 14px; height: 14px; stroke: currentColor; flex: none; }
.wiz-inline-link { display: inline; padding: 0; min-height: 0; }
.wiz-note .wiz-inline-link { display: inline; width: auto; margin: 0; color: var(--accent); text-decoration: underline; font: inherit; }

/* Cinematic hero: fill the left with meaning (setup status, description, sources, quick switches) */
.nv-hero-setup { margin: 12px 0 0; font-size: max(0.74rem, 11.5px); font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.nv-hero-setup:empty { display: none; }
.device-mobile .nv-hero-setup { text-align: center; }
.nv-hero-desc { margin: 0 0 10px; max-width: 46ch; font-size: 0.9rem; line-height: 1.45; color: rgba(255, 255, 255, 0.82); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); }
.nv-hero-desc:empty { display: none; }
.nv-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.nv-hero-chips:empty { display: none; }
.device-mobile .nv-hero-chips { justify-content: center; }
.nv-hero-chip { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.14); font-size: max(0.72rem, 11.5px); font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.nv-hero-toggles { margin-top: 10px; gap: 8px; }
.nv-hero-toggle { min-height: 36px; padding: 0 14px; font-size: 0.8rem; background: rgba(255, 255, 255, 0.08); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); }
.nv-hero-toggle[aria-checked="true"] { background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.16); border-color: var(--accent); color: var(--accent-light); }
.nv-hero-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 760px) { .nv-hero-desc { display: none; } }

.nv-hero { min-height: 340px; }
.device-tv .nv-hero { min-height: 380px; }
.nv-hero-dots { margin-top: 12px; }
@media (max-height: 800px) { .nv-hero-desc { display: none; } }

/* ==========================================================================
   RESILIENCE + LOW-END + TOUCH (performance audit follow-ups)
   Nothing here changes how the site looks on a capable device with a mouse.
   ========================================================================== */

/* Catalog could not load: a clear message and a retry, above the title screen (z-index 20000). */
#catalog-unavailable {
  position: fixed;
  top: calc(var(--kap-header-h, 56px) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 21500;
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(560px, calc(100% - 24px));
  padding: 14px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-hover);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  color: var(--text-primary);
  font-size: 0.9rem;
  line-height: 1.45;
}
#catalog-unavailable .catalog-unavailable-text { flex: 1; min-width: 0; }
#catalog-unavailable .catalog-unavailable-why { color: var(--text-secondary); }
#catalog-unavailable .catalog-unavailable-retry {
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #04130d;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
#catalog-unavailable .catalog-unavailable-retry:hover { background: var(--accent-light); }
#catalog-unavailable .catalog-unavailable-retry:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
@media (max-width: 480px) {
  #catalog-unavailable { flex-direction: column; align-items: stretch; }
}

/* Low-end devices only (html.perf-low, set in the index.html head): no blur on the ~3,000 small card parts,
   and the decorative infinite loops rest. */
html.perf-low .folder-card *,
html.perf-low .nv-card * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html.perf-low .title-hero-logo-img,
html.perf-low .hero-btn-express,
html.perf-low .scroll-ind-chevron,
html.perf-low .port-bingecat-img { animation: none !important; }

/* People who ask for less motion: decorative infinite loops rest (state changes and feedback keep working). */
@media (prefers-reduced-motion: reduce) {
  .hero-wall-list,
  .title-hero-logo-img,
  .hero-btn-express,
  .scroll-ind-chevron,
  .port-bingecat-img { animation: none !important; }
}

/* Touch screens: bigger invisible tap areas (44px) with no change to what is drawn. */
@media (pointer: coarse) {
  .kap-hamburger-btn,
  .kap-center-hub-btn,
  .kap-auth-btn { position: relative; }
  .kap-hamburger-btn::after { content: ''; position: absolute; inset: -5px; }
  .kap-center-hub-btn::after,
  .kap-auth-btn::after { content: ''; position: absolute; inset: -6px -1px; }
  .telemetry-icon-btn::after { content: ''; position: absolute; inset: -10px; }
  .sidebar-toggle::after { content: ''; position: absolute; inset: -3px; }
  .nv-hero-dot::after { inset: -18px -4px; }
}

/* Wizard: scraper chips under the style cards */
.wiz-scraper-pick { margin-top: 16px; }
.wiz-scraper-pick-title { margin: 0 0 8px; font: 600 0.9rem/1.3 'Inter', sans-serif; color: var(--text-secondary); }
.wiz-scraper-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wiz-scraper-chip { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); color: var(--text-secondary); font-weight: 600; font-size: 0.92rem; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.wiz-scraper-chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.wiz-scraper-chip:has(input:checked) { border-color: rgba(0,245,160,0.45); background: rgba(0,245,160,0.1); color: var(--text-primary); }
.wiz-scraper-chip:has(input:checked)::before { content: ""; width: 14px; height: 14px; margin-right: 8px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236dfac4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.wiz-scraper-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.wiz-scraper-chip.is-disabled { opacity: 0.5; cursor: not-allowed; }

/* ==========================================================================
   Customize Collection: same footprint as the setup wizard
   Title and a progress rail on the left, the step on the right. Below 1024px
   it stacks: title, bar rail, step.
   ========================================================================== */
.cust-panel { position: relative; }
.cust-side { flex: 0 0 auto; }
.cust-header { padding: 18px clamp(16px, 3vw, 32px) 0; border-bottom: 0; background: transparent; }
.cust-header-text { padding-right: 56px; gap: 4px; }
.cust-title { font-weight: 700; color: var(--text-primary); line-height: 1.15; }
.cust-subtitle { font-size: 0.88rem; line-height: 1.4; color: var(--text-secondary); }
.cust-rail { padding: 14px clamp(14px, 3vw, 32px) 8px; }
.cust-close-btn {
  position: absolute; top: 14px; right: clamp(12px, 3vw, 28px); z-index: 5;
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border);
  color: var(--text-secondary);
}
.cust-close-btn svg { width: 18px; height: 18px; }
.cust-close-btn:hover { transform: none; background: rgba(255, 255, 255, 0.08); border-color: var(--border-hover); color: var(--text-primary); }
.cust-close-btn:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }

@media (min-width: 1024px) {
  .cust-panel {
    display: grid;
    grid-template-columns: clamp(270px, 23vw, 340px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    width: min(1240px, 100%);
    margin-inline: auto;
    padding: 56px clamp(28px, 4vw, 64px) 28px;
    box-sizing: border-box;
  }
  .cust-side { align-self: start; padding-right: clamp(32px, 4vw, 64px); }
  .cust-header { padding: 0; }
  .cust-header-text { padding-right: 0; }
  .cust-title { font-size: clamp(1.8rem, 2.3vw, 2.35rem); line-height: 1.08; }
  .cust-subtitle { font-size: 0.95rem; margin-top: 6px; }

  /* Progress becomes a vertical stepper, as in the wizard */
  .cust-rail { flex-direction: column; align-items: flex-start; gap: 0; padding: 36px 0 0; }
  .cust-rail .wiz-prog-step { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 14px; min-height: 34px; position: relative; }
  .cust-rail .wiz-prog-bar {
    width: 11px; height: 11px; flex: 0 0 11px; border-radius: 50%;
    background: transparent; border: 2px solid var(--border-hover); box-shadow: none; position: relative;
  }
  .cust-rail .wiz-prog-step:not(:last-child) .wiz-prog-bar::after {
    content: ""; position: absolute; left: 50%; top: 13px; width: 2px; height: 22px;
    transform: translateX(-50%); background: var(--border);
  }
  .cust-rail .wiz-prog-step.done .wiz-prog-bar { background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.5); border-color: transparent; }
  .cust-rail .wiz-prog-step.done .wiz-prog-bar::after { background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.35); }
  .cust-rail .wiz-prog-step.current .wiz-prog-bar { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--k-mint-rgb, 0, 245, 160), 0.16); }
  .cust-rail .wiz-prog-label { font-size: 0.875rem; }

  /* The step, divided from the story by one hairline */
  .cust-body { padding: 0 0 0 clamp(32px, 4vw, 64px); border-left: 1px solid var(--border); }
  .cust-close-btn { position: fixed; top: calc(var(--kap-header-h) + 16px); right: 16px; }
}
/* Folder art style picker (Customize, step 1) */
.cust-art-looks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cust-art-look {
  display: flex; flex-direction: column; gap: 6px; padding: 6px; text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; color: #cbd5e1;
  font: inherit; transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}
.cust-art-look:hover { border-color: rgba(0, 245, 160, 0.25); transform: translateY(-1px); }
.cust-art-look:focus-visible { outline: 2px solid #00f5a0; outline-offset: 2px; }
.cust-art-look.is-on { border-color: rgba(0, 245, 160, 0.55); background: rgba(0, 245, 160, 0.07); color: #fff; }
.cust-art-ratio { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cust-art-ratio-opt { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.cust-art-ratio-opt:hover { border-color: rgba(0, 245, 160, 0.25); }
.cust-art-ratio-opt:focus-visible { outline: 2px solid #00f5a0; outline-offset: 2px; }
.cust-art-ratio-opt.is-on { border-color: rgba(0, 245, 160, 0.55); background: rgba(0, 245, 160, 0.07); color: #fff; }
.cust-art-ratio-opt:disabled { opacity: 0.4; cursor: not-allowed; }
.cust-art-thumb { display: block; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #0e1118; }
.cust-art-thumb img, .cust-art-tile img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s cubic-bezier(0.2, 0, 0, 1); }
.cust-art-thumb img.is-loaded, .cust-art-tile img.is-loaded { opacity: 1; }
.cust-art-name { font-size: 0.78rem; font-weight: 600; padding: 0 2px 2px; }
.cust-art-step { display: flex; flex-direction: column; gap: 22px; }
.cust-art-look.is-unavailable { position: relative; opacity: 0.4; cursor: not-allowed; }
.cust-art-look.is-unavailable:hover { opacity: 0.75; border-color: rgba(255, 255, 255, 0.08); transform: none; }
.cust-art-look.is-unavailable:hover::after, .cust-art-look.is-unavailable:focus-visible::after {
  content: attr(data-tip); position: absolute; inset: 6px 6px auto; padding: 8px 10px; border-radius: 8px;
  background: rgba(8, 9, 13, 0.94); border: 1px solid var(--border-hover); color: var(--text-primary);
  font-size: 0.74rem; font-weight: 600; line-height: 1.35; text-align: center; pointer-events: none; z-index: 2;
}
.cust-art-preview-block { display: flex; flex-direction: column; gap: 10px; }
.cust-art-preview-label { margin: 0; font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); }
.cust-art-preview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; transition: opacity 0.2s ease; }
.cust-art-preview.is-loading { opacity: 0.45; }
.cust-art-tile { display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #0e1118; border: 1px solid rgba(255, 255, 255, 0.06); }
@media (max-width: 600px) { .cust-art-looks, .cust-art-preview { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .cust-art-look, .cust-art-preview, .cust-art-thumb img, .cust-art-tile img { transition: none; } .cust-art-look:hover { transform: none; } }

/* ==========================================================================
   Customize shares the wizard's header and primary button
   Back sits above the title like the wizard's own, the step's title and line
   live on the left, and Continue is the wizard's full-width mint button.
   ========================================================================== */
.cust-back { margin: 14px clamp(16px, 3vw, 32px) 0; }
.cust-back[hidden] { display: none; }
.cust-title { font-weight: 800; }
.cust-step-tools { flex-shrink: 0; padding-bottom: 4px; }
.cust-step-content { padding-bottom: 12px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent); }
.cust-step-footer { display: block; border-top: 0; padding-top: 12px; }
.cust-step-footer .cust-btn-next { min-height: 46px; }
@media (min-width: 1024px) {
  .cust-back { margin: 0 0 22px; }
}

/* The floating "View my collection" pill sits bottom-right on every page: lift it above Customize's Apply & continue bar while that is open. */
html:has(#customize-overlay.open) { --kcv-offset: 76px; }

/* Customize, last step: offer the Create Folder tool in a new tab and list what it made. */
.cust-folders-main { flex-direction: column; align-items: flex-start; gap: 12px; }
.cust-folders-open { min-height: 46px; padding: 0 24px; }
.cust-folders-note { margin: 0; }
.cust-folders-made { padding: 14px 16px; border-radius: 14px; background: rgba(0, 245, 160, 0.07); border: 1px solid rgba(0, 245, 160, 0.3); }
.cust-folders-made[hidden] { display: none; }
.cust-folders-made-count { margin: 0 0 6px; font-weight: 700; font-size: 0.92rem; }
.cust-folders-made ul { margin: 0; padding-left: 18px; color: var(--text-secondary, #cbd5e1); font-size: 0.9rem; }

/* "What changed" receipt (Kaptain Stream): shown after a write, built from names and counts only */
.write-receipt h3 { margin: 0 0 8px; font-size: 1rem; }
.write-receipt-profile { margin: 0 0 8px; }
.write-receipt-profile ul { margin: 4px 0 0; padding-left: 18px; font-size: 0.9rem; opacity: 0.9; }
.write-receipt-untouched { margin: 6px 0 0; font-size: 0.88rem; opacity: 0.8; }

/* Ignore this update: quiet text button beside the Update link, shown only while an update waits. */
.title-hero-sub-ignore { background: transparent; opacity: 0.75; }
.title-hero-sub-ignore:hover { opacity: 1; }
.title-hero-sub-ignore[hidden] { display: none; }

/* ==========================================================================
   Setup wizard: "Where should it go?" (placement step)
   ========================================================================== */

.wiz-place .wiz-device-options { margin-bottom: 0; }
.wiz-place-meta { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
/* Only the destructive choice ever uses a warm colour on this screen. */
.wiz-device-check-row.wiz-place-danger.checked { border-color: hsla(8, 78%, 62%, 0.6); background: hsla(8, 78%, 62%, 0.08); }
.wiz-place-danger .wiz-device-desc { color: hsl(8, 62%, 80%); }

.wiz-place-section { margin-top: 20px; }
.wiz-place-heading { margin: 0 0 4px; font-size: 1.05rem; }
.wiz-place-section .wiz-note { margin-bottom: 10px; }

.wiz-place-list { list-style: none; margin: 8px 0 12px; padding: 0; border-top: 1px solid var(--border); }
.wiz-place-item { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.wiz-place-item-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wiz-place-item-title { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.wiz-place-item-status { font-size: 0.8rem; color: var(--text-muted); }
.wiz-place-item-status.is-fresh { color: var(--accent-light); }
.wiz-place-item.is-skipped .wiz-place-item-title { opacity: 0.6; }
.wiz-place-item-choice { display: block; }
.wiz-place-item .wiz-input { margin-top: 0; }
.wiz-place-warn { margin: 0; font-size: 0.8rem; line-height: 1.45; color: hsl(8, 62%, 80%); }
@media (min-width: 640px) {
  .wiz-place-item { grid-template-columns: minmax(0, 1fr) minmax(220px, 270px); align-items: center; column-gap: 16px; }
  .wiz-place-warn { grid-column: 1 / -1; }
}

.wiz-place-group { margin: 2px 0 0; }
.wiz-place-plain { list-style: none; margin: 2px 0 8px 28px; padding: 0; font-size: 0.85rem; line-height: 1.7; color: var(--text-muted); }
@media (min-width: 640px) { .wiz-place-plain { columns: 2; column-gap: 24px; } }

.wiz-place-reorder-toggle { width: 100%; }
.wiz-place-order { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.wiz-place-order-row {
  display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 6px 0 2px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.wiz-place-order-row.is-dragging { border-color: var(--accent); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.wiz-place-order-row.is-grabbed { border-color: var(--accent); background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.08); }
.wiz-place-order-title { flex: 1; min-width: 0; font-size: 0.9rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiz-place-tag { flex: none; font-size: 0.75rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-secondary); }
.wiz-place-moves { flex: none; display: inline-flex; }
.wiz-place-handle, .wiz-place-move {
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  background: none; border: 0; border-radius: 8px; color: var(--text-muted); cursor: pointer;
}
.wiz-place-handle { cursor: grab; touch-action: none; }
.wiz-place-order-row.is-dragging .wiz-place-handle { cursor: grabbing; }
.wiz-place-handle:hover, .wiz-place-move:hover:not(:disabled) { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }
.wiz-place-move:disabled { opacity: 0.25; cursor: default; }
.wiz-place-handle:focus-visible, .wiz-place-move:focus-visible { outline: 2px solid var(--accent-light); outline-offset: -2px; }
.wiz-place-sr, .wiz-place-live {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Setup wizard: AIO Streams screens (Connect, Streams, Look)
   ========================================================================== */

.wiz-aio-keyblock { margin-bottom: 16px; }
.wiz-aio-status { margin: 6px 0 0; min-height: 1.4em; }
.wiz-aio-status.is-ok { color: var(--accent-light); }
.wiz-aio-status.is-bad { color: hsl(8, 70%, 72%); }
.wiz-aio-fine { display: grid; gap: 12px; margin-top: 8px; }
.wiz-aio-fine .wiz-label { margin-bottom: 0; }
.wiz-aio-fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.wiz-aio-fieldset legend { padding: 0; margin-bottom: 6px; }
.wiz-aio-langs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 12px; }
.wiz-aio-lang { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 0.9rem; color: var(--text-secondary); cursor: pointer; }
.wiz-aio-lang input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.wiz-aio-lang input:disabled { cursor: not-allowed; }
.wiz-aio-summary { margin: 8px 0 0; display: grid; border-top: 1px solid var(--border); }
.wiz-aio-summary-row { display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.wiz-aio-summary dt { color: var(--text-muted); }
.wiz-aio-summary dd { margin: 0; color: var(--text-primary); overflow-wrap: anywhere; }
@media (max-width: 520px) { .wiz-aio-summary-row { grid-template-columns: 5.5rem minmax(0, 1fr); } .wiz-aio-summary-row dd:last-child { grid-column: 2; } }

.wiz-aio-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.wiz-aio-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg-elevated);
  color: var(--text-primary); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.wiz-aio-chip:hover { border-color: var(--border-hover); background: var(--bg-card-hover); }
.wiz-aio-chip[aria-checked="true"] { border-color: var(--accent); background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.1); }
.wiz-aio-chip:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.wiz-aio-chip-tag { font-size: 0.75rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--accent); color: var(--on-accent, #04130d); }

/* AIO style picker (Kaptain Stream): five tiles instead of five paragraphs, the chosen style explains itself once below */
.wiz-aio-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.wiz-aio-tile {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 64px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elevated); cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.wiz-aio-tile:hover { border-color: var(--border-hover); background: var(--bg-card-hover); }
.wiz-aio-tile.checked { border-color: var(--accent); background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.1); }
.wiz-aio-tile:has(input:focus-visible) { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.wiz-aio-tile input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wiz-aio-tile-name { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); }
.wiz-aio-tile .wiz-option-chip { align-self: flex-start; }
.wiz-aio-style-card { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); }
.wiz-aio-style-blurb { margin: 0 0 6px; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.45; text-wrap: pretty; }
.wiz-aio-style-chips { margin: 0 0 8px; font-size: 0.8rem; color: var(--text-muted); }
.wiz-aio-style-card .wiz-note { margin: 0; }
.wiz-aio-fine-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.wiz-advanced + .wiz-advanced { margin-top: 8px; }

/* AIO Streams setup on phones (Kaptain Stream): one quiet top bar, a one-line progress counter, open rows with a single lit card, a pinned action bar.
   Scoped to the AIO rail so the other wizards keep their frame. */
.wiz-prog-count { display: none; }
@media (max-width: 640px) {
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) {
    --aio-gutter: 20px;
    padding-inline: var(--aio-gutter);
  }
  /* Top bar: back, eyebrow, help, close. The long intro line moves out of the way. */
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) > .wiz-header {
    align-items: center; gap: 4px; padding: 8px 0 4px;
  }
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) .wiz-back,
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) .wiz-help-btn,
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) .wiz-close {
    min-width: 40px; width: 40px; height: 40px; border: 0; background: transparent; box-shadow: none; padding: 0;
  }
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) .wiz-back-label { display: none; }
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) .wiz-header-text { flex: 1; text-align: center; }
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) .wiz-title {
    font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); line-height: 1.2;
  }
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) .wiz-sub { display: none; }

  /* Progress: a hairline of six segments with the step named above it */
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) > .wiz-progress {
    flex-wrap: wrap; gap: 4px; padding: 6px 0 14px;
  }
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) .wiz-prog-count {
    display: block; flex: 0 0 100%; margin-bottom: 6px; font-size: 0.85rem; color: var(--text-muted);
  }
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) .wiz-prog-count b { color: var(--text-primary); font-weight: 700; margin-left: 4px; }
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) .wiz-prog-label { display: none; }
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) .wiz-prog-bar { height: 3px; }

  /* Question first, more air around it */
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) .wiz-place-heading {
    font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; margin: 6px 0 10px; color: var(--text-primary);
  }
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) .wiz-section { margin-bottom: 28px; }

  /* Options: unselected ones are plain rows divided by hairlines, the chosen one is the only card */
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) .wiz-aio-tiles { grid-template-columns: 1fr; gap: 0; }
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) .wiz-aio-tile,
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) .wiz-device-check-row {
    min-height: 56px; padding: 14px 4px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); border-radius: 0; background: transparent;
    flex-direction: row; align-items: center; gap: 12px;
  }
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) .wiz-aio-tile { justify-content: space-between; }
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) .wiz-aio-tile.checked,
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) .wiz-device-check-row.checked {
    padding-inline: 14px; margin-block: 4px; border: 1px solid var(--accent); border-radius: 14px;
    background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.09);
  }
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) .wiz-aio-tile-name { font-size: 1.02rem; }
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) .wiz-option-chip,
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) .wiz-aio-chip-tag { white-space: nowrap; flex: 0 0 auto; }
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) .wiz-aio-style-card {
    margin-top: 14px; padding: 2px 4px 0; background: transparent;
  }
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) .wiz-aio-chip {
    border-color: transparent; background: rgba(255, 255, 255, 0.06);
  }
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) .wiz-aio-chip[aria-checked="true"] {
    border-color: var(--accent); background: rgba(var(--k-mint-rgb, 0, 245, 160), 0.12);
  }

  /* Folds read as quiet links, not boxes */
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) .wiz-advanced { margin: 6px 0 4px; }
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) .wiz-advanced-summary { font-size: 0.92rem; color: var(--text-secondary); padding: 10px 0; }

  /* Actions stay in reach: Back is a text link, Continue is the one loud thing */
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) .wiz-btn-row {
    position: sticky; bottom: 0; z-index: 2; align-items: center; gap: 8px;
    padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to bottom, transparent, var(--bg-drawer, #0b0f14) 38%);
  }
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) .wiz-btn-row .wiz-secondary {
    flex: 0 0 auto; width: auto; border: 0; background: transparent; padding-inline: 14px; color: var(--text-secondary);
  }
  .wizard-panel:has(> .wiz-progress[aria-label="AIO Streams setup progress"]) .wiz-btn-row .wiz-primary { flex: 1; }
}