/* ================================================================
   RESET & ROOT
================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; font-family: inherit; }
html { scroll-behavior: smooth; }

/* ── Google Fonts: Plus Jakarta Sans ────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* ── Brand / accent ─────────────────────────────────────────── */
  --purple:     #a855f7;
  --purple-l:   #c084fc;
  --purple-dim: rgba(168,85,247,.18);
  --gold:       #06b6d4;
  --gold-dim:   rgba(6,182,212,.14);
  --red:        #f87171;
  --red-dim:    rgba(248,113,113,.12);
  --green:      #34d399;

  /* ── Neon accents ───────────────────────────────────────────── */
  --neon-purple:  #a855f7;
  --neon-cyan:    #06b6d4;
  --neon-pink:    #ec4899;
  --neon-green:   #34d399;
  --neon-orange:  #f59e0b;

  /* ── Dark surfaces (glassmorphism layers) ───────────────────── */
  --bg:   #06060f;
  --bg2:  #0a0a1a;
  --bgc:  #0e0e20;
  --bgch: #14142e;

  /* Glass surfaces — use with backdrop-filter */
  --glass-1: rgba(255,255,255,.06);
  --glass-2: rgba(255,255,255,.10);
  --glass-3: rgba(255,255,255,.15);
  --glass-border: rgba(255,255,255,.14);
  --glass-border-strong: rgba(168,85,247,.50);

  /* ── Text ───────────────────────────────────────────────────── */
  --txt:   #f0eeff;
  --txt2:  #c8c4e8;
  --muted: #b0acda;  /* WCAG AA: ~5.2:1 sobre --bg */
  --muted2:#8a87b8;  /* WCAG AA: ~3.6:1 — solo para texto grande (18px+) */

  /* ── Borders ────────────────────────────────────────────────── */
  --bdr:  #222244;
  --bdrs: #9b8de8;

  /* ── Radius ─────────────────────────────────────────────────── */
  --r:    14px;
  --rs:   9px;
  --r-sm: 6px;

  /* ── Layout ─────────────────────────────────────────────────── */
  --sidebar-w: 290px;
  --header-h:  56px;
  --bar-h:     110px;

  /* ── Motion ─────────────────────────────────────────────────── */
  --transition:      all .2s cubic-bezier(.4,0,.2,1);
  --transition-fast: all .12s cubic-bezier(.4,0,.2,1);
  --transition-slow: all .35s cubic-bezier(.4,0,.2,1);

  /* ── Glassmorphism helpers ──────────────────────────────────── */
  --blur-sm: blur(12px);
  --blur-md: blur(22px);
  --blur-lg: blur(36px);

  /* ── Typography ─────────────────────────────────────────────── */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* ── Shadows ────────────────────────────────────────────────── */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.3);
  --shadow-md: 0 4px 20px rgba(0,0,0,.45);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.55);
  --shadow-glow-purple: 0 0 24px rgba(168,85,247,.45);
  --shadow-glow-gold:   0 0 20px rgba(6,182,212,.35);
  --shadow-glow-pink:   0 0 20px rgba(236,72,153,.35);
}

/* ── Light mode token overrides ─────────────────────────────── */
:root[data-theme="light"] {
  --bg:   #e8e4f8;
  --bg2:  #ddd8f2;
  --bgc:  #f4f2ff;
  --bgch: #ede9fc;

  /* Glass en light: frosted white con borde de color neon */
  --glass-1: rgba(255,255,255,.45);
  --glass-2: rgba(255,255,255,.62);
  --glass-3: rgba(255,255,255,.80);
  --glass-border: rgba(168,85,247,.22);
  --glass-border-strong: rgba(168,85,247,.55);

  --txt:   #0f0c24;
  --txt2:  #2a2550;
  --muted: #3d3a6e;  /* WCAG AA: ~5.8:1 sobre light --bgc */
  --muted2:#5c5898;  /* WCAG AA: ~4.6:1 sobre light --bgc */
  --bdr:   rgba(168,85,247,.20);

  --shadow-sm: 0 2px 8px rgba(0,0,0,.10);
  --shadow-md: 0 4px 20px rgba(0,0,0,.15);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.20);
  --shadow-glow-purple: 0 0 28px rgba(168,85,247,.30);
  --shadow-glow-gold:   0 0 22px rgba(6,182,212,.25);
}

/* ── System dark/light detection (fallback when no data-theme) ── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:   #e8e4f8;
    --bg2:  #ddd8f2;
    --bgc:  #f4f2ff;
    --bgch: #ede9fc;
    --glass-1: rgba(255,255,255,.45);
    --glass-2: rgba(255,255,255,.62);
    --glass-3: rgba(255,255,255,.80);
    --glass-border: rgba(168,85,247,.22);
    --glass-border-strong: rgba(168,85,247,.55);
    --txt:   #0f0c24;
    --txt2:  #2a2550;
    --muted: #3d3a6e;  /* WCAG AA ~5.8:1 */
    --muted2:#5c5898;  /* WCAG AA ~4.6:1 */
    --bdr:   rgba(168,85,247,.20);
  }
}

/* ── Base reset & global body ───────────────────────────────── */
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--txt);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  /* Smooth font rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Asegura que todo el contenido quede sobre los orbes */
.site-header,
.app-layout,
.prompt-modal-overlay,
#toast-container {
  position: relative;
  z-index: 1;
}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 99px;
  transition: background .2s;
}
::-webkit-scrollbar-thumb:hover { background: rgba(168,85,247,.40); }
* { scrollbar-width: thin; scrollbar-color: var(--glass-border) transparent; }

/* ── Focus ring (a11y) ──────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Selection ──────────────────────────────────────────────── */
::selection {
  background: rgba(168,85,247,.30);
  color: var(--txt);
}

/* ================================================================
   BACKGROUND ORBS — glassmorphism substrate
   Estos orbes son el "contenido" detrás del vidrio.
   Sin ellos, backdrop-filter no tiene efecto visible.
================================================================ */
.bg-orbs {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-orbs::before,
.bg-orbs::after,
.bg-orbs .orb-1,
.bg-orbs .orb-2,
.bg-orbs .orb-3 {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
  animation: orb-float linear infinite;
}

/* Orbe principal — púrpura neon, esquina superior izquierda */
.bg-orbs::before {
  width: 700px;
  height: 700px;
  top: -200px;
  left: -150px;
  background: radial-gradient(circle, rgba(168,85,247,.65) 0%, rgba(109,40,217,.30) 50%, transparent 70%);
  animation-duration: 22s;
  animation-delay: 0s;
}

/* Orbe cyan — esquina inferior derecha */
.bg-orbs::after {
  width: 600px;
  height: 600px;
  bottom: -150px;
  right: -100px;
  background: radial-gradient(circle, rgba(6,182,212,.55) 0%, rgba(14,116,144,.25) 50%, transparent 70%);
  animation-duration: 28s;
  animation-delay: -8s;
}

/* Orbe pink/magenta — centro arriba */
.bg-orbs .orb-1 {
  width: 500px;
  height: 500px;
  top: 10%;
  left: 40%;
  background: radial-gradient(circle, rgba(236,72,153,.40) 0%, rgba(168,85,247,.20) 50%, transparent 70%);
  animation-duration: 35s;
  animation-delay: -14s;
}

/* Orbe violeta — centro izquierda */
.bg-orbs .orb-2 {
  width: 400px;
  height: 400px;
  top: 50%;
  left: 5%;
  background: radial-gradient(circle, rgba(139,92,246,.45) 0%, rgba(79,70,229,.20) 50%, transparent 70%);
  animation-duration: 30s;
  animation-delay: -5s;
}

/* Orbe teal/emerald — derecha media */
.bg-orbs .orb-3 {
  width: 450px;
  height: 450px;
  top: 30%;
  right: 8%;
  background: radial-gradient(circle, rgba(52,211,153,.35) 0%, rgba(6,182,212,.18) 50%, transparent 70%);
  animation-duration: 40s;
  animation-delay: -20s;
}

@keyframes orb-float {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(30px, -40px) scale(1.05); }
  50%  { transform: translate(-20px, 30px) scale(.95); }
  75%  { transform: translate(40px, 20px) scale(1.03); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Light mode — orbes saturados y visibles (el glass necesita contenido detras) */
:root[data-theme="light"] .bg-orbs::before {
  background: radial-gradient(circle, rgba(168,85,247,.55) 0%, rgba(109,40,217,.28) 50%, transparent 70%);
}
:root[data-theme="light"] .bg-orbs::after {
  background: radial-gradient(circle, rgba(6,182,212,.50) 0%, rgba(14,116,144,.22) 50%, transparent 70%);
}
:root[data-theme="light"] .bg-orbs .orb-1 {
  background: radial-gradient(circle, rgba(236,72,153,.42) 0%, rgba(168,85,247,.20) 50%, transparent 70%);
}
:root[data-theme="light"] .bg-orbs .orb-2 {
  background: radial-gradient(circle, rgba(139,92,246,.48) 0%, rgba(79,70,229,.22) 50%, transparent 70%);
}
:root[data-theme="light"] .bg-orbs .orb-3 {
  background: radial-gradient(circle, rgba(52,211,153,.38) 0%, rgba(6,182,212,.18) 50%, transparent 70%);
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ── Ripple effect ───────────────────────────────────────────── */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(168,85,247,.22);
  transform: scale(0);
  pointer-events: none;
  animation: ripple-expand .5s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes ripple-expand {
  to { transform: scale(1); opacity: 0; }
}

/* ── Entrance animations (Intersection Observer) ────────────── */
.micro-hidden {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1);
}
.micro-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger via nth-child */
.micro-hidden:nth-child(2) { transition-delay: .05s; }
.micro-hidden:nth-child(3) { transition-delay: .10s; }
.micro-hidden:nth-child(4) { transition-delay: .15s; }
.micro-hidden:nth-child(5) { transition-delay: .20s; }
.micro-hidden:nth-child(n+6) { transition-delay: .25s; }

/* ── Button success state ────────────────────────────────────── */
.btn-success {
  border-color: var(--green) !important;
  color: var(--green) !important;
  background: rgba(52,211,153,.10) !important;
}

/* ================================================================
   HEADER
================================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--header-h);
  background: rgba(6,6,15,.75);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 1px 0 rgba(255,255,255,.04), var(--shadow-sm);
}

:root[data-theme="light"] .site-header {
  background: rgba(255,255,255,.55);
  border-bottom-color: var(--glass-border);
  box-shadow: 0 1px 0 var(--glass-border), 0 4px 24px rgba(168,85,247,.12), var(--shadow-sm);
}

.header-inner {
  max-width: 1600px;
  margin: 0 auto;
  height: 100%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.logo-wordmark {
  font-family: 'Orbitron', var(--font-sans);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--txt);
  white-space: nowrap;
  position: relative;
  /* Subtle inner glow on the full word */
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, .45));
  transition: filter .2s ease;
}

.logo-wordmark:hover {
  filter: drop-shadow(0 0 14px rgba(168, 85, 247, .75));
}

.logo-x {
  /* The X pops with the neon gradient */
  background: linear-gradient(135deg, var(--neon-purple), var(--neon-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900;
  /* Extra glow just on the X */
  filter: drop-shadow(0 0 6px var(--neon-purple));
}

.mode-tabs {
  display: flex;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: 11px;
  padding: 4px;
  gap: 3px;
  flex-shrink: 0;
  margin-left: auto;
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
}

.mode-tab {
  padding: 6px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  transition: var(--transition);
  white-space: nowrap;
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.mode-tab svg {
  flex-shrink: 0;
  opacity: .7;
  transition: opacity .2s;
}

.mode-tab.active svg,
.mode-tab:hover svg {
  opacity: 1;
}

.mode-tab.active {
  background: var(--glass-3);
  color: var(--neon-purple);
  box-shadow: 0 0 16px rgba(168,85,247,.22), inset 0 1px 0 rgba(255,255,255,.12);
  border: 1px solid var(--glass-border-strong);
}

.mode-tab:hover:not(.active) {
  color: var(--txt);
  background: var(--glass-2);
}

.sidebar-toggle {
  margin-left: auto;
  display: none;
  padding: 7px 13px;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--rs);
  color: var(--purple-l);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  gap: 6px;
  align-items: center;
  transition: var(--transition);
  flex-shrink: 0;
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
}

.sidebar-toggle svg { display: block; flex-shrink: 0; opacity: .8; }

.sidebar-toggle:hover {
  border-color: var(--glass-border-strong);
  background: var(--glass-2);
  color: var(--neon-purple);
}

/* ── Header actions group ───────────────────────────────────── */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-actions .sidebar-toggle {
  margin-left: 0;
}

/* ── Theme toggle button ────────────────────────────────────── */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--rs);
  cursor: pointer;
  transition: var(--transition);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  font-size: 15px;
  flex-shrink: 0;
  color: var(--txt2);
}

.theme-toggle:hover {
  background: var(--glass-2);
  border-color: var(--glass-border-strong);
  color: var(--neon-purple);
}

/* Show/hide correct icon per theme */
:root[data-theme="dark"] .theme-icon--light  { display: none; }
:root[data-theme="dark"] .theme-icon--dark   { display: inline-flex; align-items: center; }
:root[data-theme="light"] .theme-icon--dark  { display: none; }
:root[data-theme="light"] .theme-icon--light { display: inline-flex; align-items: center; }

.theme-icon svg { display: block; }

/* ── Skip-to-content link (a11y) ────────────────────────────── */
.skip-link {
  position: absolute;
  top: -999px;
  left: 16px;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--purple);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--rs);
  text-decoration: none;
  transition: top .15s;
}
.skip-link:focus { top: 8px; }

/* ── Screen-reader only utility ─────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ================================================================
   LAYOUT
================================================================ */
.app-layout {
  display: flex;
  max-width: 1600px;
  margin: 0 auto;
  min-height: calc(100vh - var(--header-h));
  align-items: flex-start;
}

.app-main {
  flex: 1;
  min-width: 0;
  padding: 28px 24px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ================================================================
   SIDEBAR
================================================================ */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  overflow-x: hidden;
  border-left: 1px solid var(--glass-border);
  background: rgba(8,8,20,.70);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
}

:root[data-theme="light"] .sidebar {
  background: rgba(255,255,255,.50);
  border-left-color: var(--glass-border);
  box-shadow: -4px 0 24px rgba(168,85,247,.10);
}

.sidebar-inner {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 40px;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 299;
}

/* ================================================================
   SIDEBAR SECTIONS
================================================================ */
.sb-section {
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--r);
  overflow: hidden;
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  transition: border-color .2s;
}

.sb-section:hover { border-color: var(--glass-border-strong); }

.sb-section-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}

.sb-section-hd:hover { background: var(--glass-2); }

.sb-section-title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--neon-purple);
  display: flex;
  align-items: center;
  gap: 7px;
}

.sb-section-chev {
  font-size: 15px;
  color: var(--muted);
  transition: transform .2s;
  line-height: 1;
}

.sb-section-chev.open { transform: rotate(90deg); }

.sb-section-body {
  padding: 4px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Preset buttons */
.preset-btn {
  width: 100%;
  padding: 9px 12px;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--rs);
  color: var(--txt2);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: var(--transition);
  line-height: 1.4;
}

.preset-btn:hover {
  border-color: var(--glass-border-strong);
  background: var(--glass-2);
  color: var(--neon-purple);
  transform: translateX(2px);
  box-shadow: var(--shadow-sm);
}

.surprise-btn {
  width: 100%;
  padding: 9px 12px;
  background: var(--purple-dim);
  border: 1px dashed rgba(168,85,247,.4);
  border-radius: var(--rs);
  color: var(--neon-purple);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: var(--transition);
  letter-spacing: .3px;
}

.surprise-btn:hover {
  background: rgba(168,85,247,.20);
  border-color: var(--purple-l);
  box-shadow: var(--shadow-glow-purple);
}

/* Enhancer chips */
.enhancer-wrap { display: flex; flex-wrap: wrap; gap: 6px; }

.enhancer-chip {
  padding: 5px 11px;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  background: var(--glass-1);
  color: var(--muted);
  transition: var(--transition);
  letter-spacing: .2px;
}

.enhancer-chip:hover {
  border-color: rgba(6,182,212,.45);
  color: var(--neon-cyan);
  background: var(--gold-dim);
}
.enhancer-chip.active {
  border-color: rgba(6,182,212,.5);
  color: var(--neon-cyan);
  background: var(--gold-dim);
  box-shadow: 0 0 10px rgba(6,182,212,.18);
}

/* Negative chips */
.neg-wrap { display: flex; flex-wrap: wrap; gap: 6px; }

.neg-chip {
  padding: 5px 11px;
  border: 1px solid rgba(224,128,128,.25);
  border-radius: 16px;
  font-family: var(--font-sans);
  font-size: 10px;
  cursor: pointer;
  background: var(--red-dim);
  color: #e8a0a0;
  transition: var(--transition);
  font-weight: 500;
}

.neg-chip:hover { background: rgba(224,128,128,.16); border-color: var(--red); }
.neg-chip.active { background: rgba(224,128,128,.18); border-color: var(--red); color: #f0b8b8; }

.neg-textarea {
  width: 100%;
  padding: 8px 11px;
  background: rgba(224,128,128,.05);
  border: 1px solid rgba(224,128,128,.18);
  border-radius: var(--rs);
  color: #e8a0a0;
  font-family: var(--font-sans);
  font-size: 13px;
  resize: vertical;
  min-height: 52px;
  transition: border-color .2s;
  margin-top: 4px;
}

.neg-textarea:focus { outline: none; border-color: rgba(224,128,128,.45); }
.neg-textarea::placeholder { color: rgba(224,128,128,.35); }

/* ================================================================
   SECTION
================================================================ */
.section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sec-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.sec-icon { font-size: 24px; line-height: 1; flex-shrink: 0; }

.sec-title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--txt);
  letter-spacing: -.3px;
}

.sec-desc {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.6;
}

/* ================================================================
   SELECTED STRIP (always visible)
================================================================ */
.selected-strip {
  display: none;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px 14px;
  background: rgba(168,85,247,.06);
  border: 1px solid rgba(168,85,247,.20);
  border-radius: var(--rs);
  align-items: center;
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
}

.selected-strip.visible { display: flex; }

.sel-label {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--muted);
  flex-shrink: 0;
}

.sel-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 16px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.sel-badge.primary {
  background: rgba(168,85,247,.18);
  border: 1px solid rgba(168,85,247,.35);
  color: var(--neon-purple);
}

.sel-badge.secondary {
  background: rgba(6,182,212,.12);
  border: 1px solid rgba(6,182,212,.30);
  color: var(--neon-cyan);
}

.sel-badge:hover { opacity: .72; transform: scale(.97); }

.sel-badge-icon { font-size: 12px; }

.sel-badge-x {
  font-size: 12px;
  opacity: .6;
  font-weight: 400;
  line-height: 1;
}

.sel-divider {
  font-size: 13px;
  color: var(--muted2);
  flex-shrink: 0;
}

/* ================================================================
   SUBCATEGORY TABS
================================================================ */
.subcat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.subcat-tab {
  padding: 5px 13px;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: var(--glass-1);
  color: var(--muted);
  transition: var(--transition);
  user-select: none;
  white-space: nowrap;
  letter-spacing: .01em;
}

.subcat-tab:hover {
  border-color: rgba(168,85,247,.35);
  color: var(--txt);
  background: var(--glass-2);
}
.subcat-tab.active {
  background: var(--purple-dim);
  border-color: rgba(168,85,247,.40);
  color: var(--neon-purple);
  box-shadow: 0 0 12px rgba(168,85,247,.15);
}
.subcat-tab.has-selection { border-color: rgba(168,85,247,.30); }

/* ================================================================
   STYLES GRID & CARDS
================================================================ */
.styles-grid-wrap {
  display: none;
  flex-direction: column;
  gap: 12px;
  animation: fadeIn .22s cubic-bezier(.4,0,.2,1);
}

.styles-grid-wrap.visible { display: flex; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

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

.styles-grid.lg      { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.styles-grid.sm      { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.styles-grid.compact { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }

.style-card {
  border: 1px solid var(--glass-border);
  border-radius: var(--r);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
  background: var(--glass-1);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  position: relative;
  user-select: none;
}

.style-card:hover {
  border-color: rgba(168,85,247,.35);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), var(--shadow-glow-purple);
  background: var(--glass-2);
}

.style-card.primary {
  border-color: rgba(168,85,247,.45);
  background: var(--purple-dim);
  box-shadow: 0 0 0 2px rgba(168,85,247,.18), var(--shadow-glow-purple);
}

.style-card.secondary {
  border-color: rgba(6,182,212,.40);
  background: var(--gold-dim);
  box-shadow: 0 0 0 2px rgba(6,182,212,.15), var(--shadow-glow-gold);
}

.card-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 800;
  z-index: 3;
}

.card-badge.primary { background: var(--purple); color: #fff; }
.card-badge.secondary { background: var(--gold); color: #1a1200; }

.card-visual {
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  position: relative;
  overflow: hidden;
}

.card-visual svg { width: 100%; height: 100%; }

.card-info { padding: 8px 10px; text-align: center; }
.card-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--txt);
  line-height: 1.2;
  text-align: center;
}
.card-hint {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.4;
  text-align: center;
}

/* ================================================================
   MULTI-SUB SECTION (Composición)
================================================================ */
.multisub-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.multisub-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.multisub-group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--muted);
  padding-left: 2px;
}

/* ================================================================
   CHIPS (simple, non-subcategory)
================================================================ */
.chips-row { display: flex; flex-wrap: wrap; gap: 7px; }

.chip {
  padding: 6px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  font-family: var(--font-sans);
  font-size: 11px;
  cursor: pointer;
  background: var(--glass-1);
  color: var(--muted);
  transition: var(--transition);
  font-weight: 500;
  user-select: none;
  letter-spacing: .01em;
}

.chip:hover {
  border-color: rgba(168,85,247,.35);
  color: var(--txt);
  background: var(--glass-2);
}
.chip.active {
  background: rgba(168,85,247,.22);
  border-color: rgba(168,85,247,.45);
  color: var(--neon-purple);
  box-shadow: 0 0 10px rgba(168,85,247,.15);
}

.chip-multi.active {
  background: var(--purple-dim);
  border-color: rgba(168,85,247,.38);
  color: var(--neon-purple);
}

/* Auto-chips */
.chip-auto {
  padding: 4px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  font-family: var(--font-sans);
  font-size: 10px;
  background: var(--glass-1);
  color: var(--muted);
  cursor: default;
  font-weight: 500;
}

.sb-auto-note {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--muted);
  margin: 0 0 8px 0;
  opacity: 0.65;
  font-style: italic;
}

/* ================================================================
   VISUAL CARDS (ratio, palette, shot type SVG)
================================================================ */
.visual-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 9px;
}

.visual-card {
  border: 1px solid var(--glass-border);
  border-radius: var(--r);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
  background: var(--glass-1);
  position: relative;
  user-select: none;
}

.visual-card:hover {
  border-color: rgba(168,85,247,.35);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), var(--shadow-glow-purple);
  background: var(--glass-2);
}
.visual-card.active {
  border-color: rgba(168,85,247,.45);
  background: var(--purple-dim);
  box-shadow: 0 0 0 2px rgba(168,85,247,.18);
}
.visual-card.active::after {
  content: '✓';
  position: absolute; top: 5px; right: 5px;
  background: rgba(168,85,247,.35);
  border: 1px solid rgba(168,85,247,.55);
  color: var(--neon-purple);
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; z-index: 3;
  backdrop-filter: var(--blur-sm);
}

.vc-visual { height: 72px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.vc-info { padding: 7px 9px; }
.vc-label { font-family: var(--font-sans); font-size: 11px; font-weight: 700; color: var(--txt); }
.vc-hint { font-family: var(--font-sans); font-size: 11px; font-weight: 400; color: var(--muted); margin-top: 2px; line-height: 1.35; }

/* Palette visual */
.palette-swatches { display: flex; height: 50px; }
.palette-swatch { flex: 1; }

/* ================================================================
   TEXT INPUT
================================================================ */
.text-input-wrap { display: flex; flex-direction: column; gap: 9px; }

.text-input {
  width: 100%;
  padding: 11px 14px;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--r);
  color: var(--txt);
  font-family: var(--font-sans);
  font-size: 14px;
  transition: border-color .2s, background .2s, box-shadow .2s;
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
}

.text-input:focus {
  outline: none;
  border-color: rgba(168,85,247,.45);
  background: var(--glass-2);
  box-shadow: 0 0 0 3px rgba(168,85,247,.10);
}
.text-input::placeholder { color: var(--muted); opacity: .7; }

.quick-chips { display: flex; flex-wrap: wrap; gap: 5px; }

.quick-chip {
  padding: 4px 10px;
  border: 1px dashed var(--glass-border);
  border-radius: 14px;
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--muted);
  cursor: pointer;
  background: transparent;
  transition: var(--transition);
  user-select: none;
}

.quick-chip:hover {
  border-color: rgba(168,85,247,.40);
  color: var(--neon-purple);
  background: var(--purple-dim);
}

/* ================================================================
   REFERENCE CARDS (inherited from original)
================================================================ */
.ref-card {
  border: 1px solid var(--glass-border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--glass-1);
  transition: border-color .2s;
}

.ref-card.ref-active {
  border-color: rgba(168,85,247,.40);
  box-shadow: 0 0 0 2px rgba(168,85,247,.10);
}

.ref-card-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}

.ref-card-hd:hover { background: var(--glass-2); }

.ref-card-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--glass-2);
  border: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}

.ref-card-label { font-family: var(--font-sans); font-size: 12px; font-weight: 700; color: var(--txt); }
.ref-card-desc { font-family: var(--font-sans); font-size: 11px; font-weight: 400; color: var(--muted); margin-top: 2px; }

/* Toggle switch */
.ref-toggle-main {
  width: 38px; height: 20px; border-radius: 10px;
  background: rgba(255,255,255,.08);
  flex-shrink: 0; position: relative;
  cursor: pointer; transition: background .2s;
  border: 1px solid var(--glass-border);
}
.ref-toggle-main:hover { border-color: rgba(168,85,247,.35); }
.ref-toggle-dot {
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(255,255,255,.35);
  transition: all .2s cubic-bezier(.4,0,.2,1);
}
.ref-toggle-dot.on { background: var(--neon-purple); transform: translateX(17px); }
.ref-toggle-main:has(.on) {
  background: rgba(168,85,247,.25);
  border-color: rgba(168,85,247,.45);
}

.ref-chevron { font-size: 17px; color: var(--muted); transition: transform .25s, color .2s; line-height: 1; flex-shrink: 0; }

.ref-card-body { background: rgba(0,0,0,.10); border-top: 1px solid var(--glass-border); }
.ref-card-inner { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }

.ref-fid-chip {
  padding: 5px 11px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  font-family: var(--font-sans); font-size: 10px;
  cursor: pointer; background: var(--glass-1); color: var(--muted);
  transition: var(--transition); user-select: none;
  display: inline-flex; align-items: center; gap: 0;
}
.ref-fid-chip:hover { border-color: rgba(168,85,247,.35); color: var(--txt); background: var(--glass-2); }
.ref-fid-chip.active {
  background: var(--purple-dim);
  border-color: rgba(168,85,247,.42);
  color: var(--neon-purple);
}

.ref-toggle {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--glass-border); border-radius: var(--rs); cursor: pointer;
  transition: var(--transition); background: var(--glass-1); user-select: none;
}
.ref-toggle:hover { border-color: rgba(168,85,247,.30); background: var(--glass-2); }

.ref-toggle-indicator {
  width: 30px; height: 16px; border-radius: 8px;
  background: rgba(255,255,255,.08);
  flex-shrink: 0; position: relative; margin-top: 2px; transition: background .2s;
  border: 1px solid var(--glass-border);
}
.ref-toggle-indicator::after {
  content: ''; position: absolute; top: 1px; left: 1px; width: 12px; height: 12px;
  border-radius: 50%; background: rgba(255,255,255,.3); transition: transform .2s;
}

.ref-toggle-indicator.on {
  background: rgba(168,85,247,.30);
  border-color: rgba(168,85,247,.45);
}
.ref-toggle-indicator.on::after {
  transform: translateX(14px);
  background: var(--neon-purple);
}

/* ================================================================
   TIMELINE (video mode)
================================================================ */
.timeline-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tl-tab {
  padding: 5px 13px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  background: var(--glass-1);
  color: var(--muted);
  transition: var(--transition);
  letter-spacing: .3px;
}

.tl-tab.active {
  background: var(--purple-dim);
  border-color: rgba(168,85,247,.42);
  color: var(--neon-purple);
  box-shadow: var(--shadow-glow-purple);
}
.tl-arrow { color: var(--muted); font-size: 12px; }

.tl-mid-btn {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--neon-purple);
  cursor: pointer;
  background: none;
  border: 1px dashed rgba(168,85,247,.35);
  border-radius: 18px;
  padding: 4px 11px;
  transition: var(--transition);
}
.tl-mid-btn:hover { background: var(--purple-dim); border-color: rgba(168,85,247,.55); }

/* ================================================================
   PROMPT BAR (hidden — replaced by modal)
================================================================ */
.prompt-bar { display: none !important; }

/* keep copy-btn/reset-btn styles for any inline uses */
.copy-btn {
  padding: 9px 16px;
  background: rgba(168,85,247,.22);
  border: 1px solid rgba(168,85,247,.40);
  color: var(--neon-purple);
  border-radius: var(--rs);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  letter-spacing: .02em;
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
}
.copy-btn:hover {
  background: rgba(168,85,247,.32);
  border-color: rgba(168,85,247,.60);
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow-purple);
}
.copy-btn:active { transform: translateY(0); }
.copy-btn.ok { background: rgba(52,211,153,.20) !important; border-color: rgba(52,211,153,.40) !important; color: var(--neon-green) !important; }
.copy-btn.secondary {
  background: rgba(168,212,245,.18);
  border-color: rgba(168,212,245,.35);
  color: var(--neon-cyan);
}
.copy-btn.secondary:hover {
  background: rgba(168,212,245,.28);
  border-color: rgba(168,212,245,.55);
}

.reset-btn {
  padding: 9px 14px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--glass-border);
  border-radius: var(--rs);
  font-family: var(--font-sans);
  font-size: 12px;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.reset-btn:hover {
  border-color: rgba(224,128,128,.40);
  color: var(--red);
  background: var(--red-dim);
}

/* ================================================================
   VER PROMPT — sidebar button
================================================================ */
.sb-ver-prompt-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: calc(100% - 28px);
  margin: 12px 14px 4px;
  padding: 10px 14px;
  background: rgba(168,85,247,.20);
  border: 1px solid rgba(168,85,247,.40);
  border-radius: var(--rs);
  color: var(--neon-purple);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: .03em;
  white-space: nowrap;
  overflow: hidden;
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
}
.sb-ver-prompt-btn:hover {
  background: rgba(168,85,247,.30);
  border-color: rgba(168,85,247,.60);
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow-purple);
}
.sb-ver-prompt-btn:active { transform: translateY(0); }
.sb-ver-prompt-btn .btn-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(168,85,247,.4);
  flex-shrink: 0;
  transition: background .2s, box-shadow .2s;
  display: inline-block;
}
.sb-ver-prompt-btn.has-prompt .btn-dot {
  background: var(--neon-purple);
  box-shadow: 0 0 6px rgba(196,184,248,.8);
}
.sb-ver-prompt-btn .btn-text { flex: 1; text-align: left; }
.sb-ver-prompt-btn .btn-arrow { font-size: 11px; opacity: .7; flex-shrink: 0; }

/* Instrucciones para Claude — sidebar button */
.sb-claude-instr-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: calc(100% - 28px);
  margin: 4px 14px 4px;
  padding: 9px 14px;
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: var(--rs);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
}
.sb-claude-instr-btn:hover {
  background: var(--glass-1);
  border-color: rgba(168,85,247,.30);
  color: var(--neon-purple);
  transform: translateY(-1px);
}
.sb-claude-instr-btn .btn-arrow { font-size: 11px; opacity: .65; flex-shrink: 0; }

/* Claude instructions modal */
/* ── Claude Instructions Modal (popup) ─────────────────────── */
.cim-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cim-overlay.open { display: flex; }
.cim-modal {
  background: rgba(12,10,28,.82);
  border: 1px solid rgba(168,85,247,.55);
  border-radius: 18px;
  width: 100%;
  max-width: 720px;
  max-height: min(82vh, 640px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg),
              0 0 0 1px rgba(168,85,247,.20),
              0 0 60px rgba(168,85,247,.15),
              inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(36px) saturate(180%);
  -webkit-backdrop-filter: blur(36px) saturate(180%);
  animation: modalIn .22s cubic-bezier(.4,0,.2,1);
}
:root[data-theme="light"] .cim-modal {
  background: rgba(255,255,255,.92);
  border-color: rgba(168,85,247,.55);
  box-shadow: var(--shadow-lg),
              0 0 0 1px rgba(168,85,247,.25),
              0 0 60px rgba(168,85,247,.12),
              inset 0 1px 0 rgba(255,255,255,.80);
}
.cim-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}
.cim-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 800;
  color: var(--txt);
  letter-spacing: -.2px;
}
.cim-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 15px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
  flex-shrink: 0;
}
.cim-close:hover { background: var(--glass-2); color: var(--txt); }
.cim-tabs {
  display: flex;
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}
.cim-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--glass-border);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: left;
}
.cim-tab:last-child { border-right: none; }
.cim-tab.active {
  background: var(--purple-dim);
  color: var(--neon-purple);
}
.cim-tab:hover:not(.active) {
  background: var(--glass-2);
  color: var(--txt);
}
.cim-tab-hint {
  font-size: 9px;
  font-weight: 400;
  opacity: .6;
}
.cim-body {
  flex: 1;
  overflow-y: auto;
  background: rgba(0,0,0,.18);
}
:root[data-theme="light"] .cim-body { background: rgba(0,0,0,.04); }
.cim-pre {
  margin: 0;
  padding: 16px 20px;
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.75;
  color: var(--txt);
  white-space: pre-wrap;
  word-break: break-word;
  tab-size: 2;
}
.cim-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--glass-border);
  flex-shrink: 0;
}
.cim-copy-btn {
  width: 100%;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(168,85,247,.38);
  background: rgba(168,85,247,.12);
  color: var(--neon-purple);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.cim-copy-btn:hover {
  background: rgba(168,85,247,.22);
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow-purple);
}

/* Limpiar todo — sidebar bottom */
.sb-reset-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: calc(100% - 28px);
  margin: 8px 14px 20px;
  padding: 9px 14px;
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: var(--rs);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 11px;
  cursor: pointer;
  transition: var(--transition);
}
.sb-reset-btn:hover {
  border-color: rgba(224,128,128,.38);
  color: var(--red);
  background: var(--red-dim);
}

/* ================================================================
   USER PRESETS — Sidebar buttons
================================================================ */
.sb-user-presets-section {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 6px;
}

.sb-user-presets-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  padding: 8px 11px;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--rs);
  color: var(--txt2);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.sb-user-presets-btn:hover {
  border-color: rgba(168,85,247,.4);
  color: var(--neon-purple);
  background: var(--glass-2);
  box-shadow: 0 0 8px rgba(168,85,247,.12);
}
.sb-presets-count {
  margin-left: auto;
  background: rgba(168,85,247,.18);
  color: var(--neon-purple);
  border-radius: 8px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
}

.sb-save-preset-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  background: rgba(168,85,247,.1);
  border: 1px solid rgba(168,85,247,.3);
  border-radius: var(--rs);
  color: var(--neon-purple);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.sb-save-preset-btn:hover {
  background: rgba(168,85,247,.18);
  border-color: rgba(168,85,247,.55);
  box-shadow: 0 0 10px rgba(168,85,247,.18);
}

/* ================================================================
   USER PRESETS MODAL
================================================================ */
.upm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.upm-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.upm-modal {
  width: min(460px, 94vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: rgba(14,10,35,.88);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--glass-border-strong);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  transform: translateY(8px) scale(.98);
  transition: transform .22s cubic-bezier(.22,1,.36,1);
}
:root[data-theme="light"] .upm-modal {
  background: rgba(242,240,252,.96);
  box-shadow: 0 24px 64px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.8);
}
:root[data-theme="light"] .upm-overlay {
  background: rgba(80,60,140,.25);
}
.upm-overlay.open .upm-modal {
  transform: translateY(0) scale(1);
}

.upm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}
.upm-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--txt);
}
.upm-title svg { color: var(--neon-purple); }
.upm-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 6px;
  transition: var(--transition);
}
.upm-close:hover { color: var(--txt); background: var(--glass-1); }

/* Save section */
.upm-save-section {
  padding: 14px 16px 12px;
  flex-shrink: 0;
}
.upm-save-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--neon-purple);
  margin-bottom: 8px;
}
.upm-save-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.upm-name-input {
  flex: 1;
  min-width: 0;
  padding: 8px 11px;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--rs);
  color: var(--txt);
  font-family: var(--font-sans);
  font-size: 12px;
  outline: none;
  transition: var(--transition);
}
.upm-name-input::placeholder { color: var(--muted); }
.upm-name-input:focus {
  border-color: rgba(168,85,247,.5);
  box-shadow: 0 0 0 2px rgba(168,85,247,.12);
}
.upm-save-btns {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.upm-global-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--txt2);
  cursor: pointer;
  user-select: none;
}
.upm-global-chk {
  accent-color: var(--neon-purple);
  width: 13px;
  height: 13px;
  cursor: pointer;
}
.upm-save-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  background: rgba(168,85,247,.14);
  border: 1px solid rgba(168,85,247,.35);
  border-radius: var(--rs);
  color: var(--neon-purple);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}
.upm-save-btn:hover {
  background: rgba(168,85,247,.22);
  border-color: rgba(168,85,247,.6);
  box-shadow: 0 0 12px rgba(168,85,247,.2);
}
.upm-save-hint {
  margin-top: 7px;
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--muted);
  line-height: 1.45;
}
.upm-save-hint strong { color: var(--txt2); }

.upm-divider {
  height: 1px;
  background: var(--glass-border);
  margin: 0;
  flex-shrink: 0;
}

/* List section */
.upm-list-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  padding: 12px 16px 14px;
}
.upm-list-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--neon-cyan, #06b6d4);
  margin-bottom: 8px;
  flex-shrink: 0;
}
.upm-count {
  font-weight: 400;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}
.upm-list {
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  scrollbar-width: thin;
  scrollbar-color: var(--glass-border) transparent;
}
.upm-empty {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.5;
  text-align: center;
  padding: 18px 0;
}
.upm-empty strong { color: var(--txt2); font-style: normal; }

.upm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--rs);
  transition: var(--transition);
}
.upm-item:hover { border-color: rgba(168,85,247,.3); background: var(--glass-2); }

.upm-item-info {
  flex: 1;
  min-width: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.upm-item-name {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upm-item-info:hover .upm-item-name { color: var(--neon-purple); }
.upm-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--muted);
}
.upm-badge {
  background: rgba(168,85,247,.14);
  color: var(--neon-purple);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.upm-badge--global {
  background: rgba(16,185,129,.14);
  color: #10b981;
}

.upm-delete-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 5px;
  border-radius: 5px;
  transition: var(--transition);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.upm-delete-btn:hover { color: var(--red, #ef4444); background: rgba(239,68,68,.1); }

/* ================================================================
   PROMPT MODAL
================================================================ */
.prompt-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  /* Overlay sutil — deja ver los orbs detrás */
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.prompt-modal-overlay.open { display: flex; }

.prompt-modal {
  /* Glass real: semitransparente para ver el aurora detrás */
  background: rgba(12,10,28,.82);
  border: 1px solid rgba(168,85,247,.55);
  border-radius: 18px;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg),
              0 0 0 1px rgba(168,85,247,.20),
              0 0 60px rgba(168,85,247,.15),
              inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(36px) saturate(180%);
  -webkit-backdrop-filter: blur(36px) saturate(180%);
  animation: modalIn .22s cubic-bezier(.4,0,.2,1);
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(.96) translateY(10px); }
  to   { opacity: 1; transform: none; }
}

:root[data-theme="light"] .prompt-modal {
  background: rgba(255,255,255,.92);
  border-color: rgba(168,85,247,.55);
  box-shadow: var(--shadow-lg),
              0 0 0 1px rgba(168,85,247,.25),
              0 0 60px rgba(168,85,247,.12),
              inset 0 1px 0 rgba(255,255,255,.80);
}

:root[data-theme="light"] .prompt-modal-overlay {
  background: rgba(10,8,30,.20);
}

.prompt-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}
.prompt-modal-title {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 800;
  color: var(--txt);
  letter-spacing: -.2px;
}
.prompt-modal-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
  display: flex; align-items: center; justify-content: center;
}
.prompt-modal-close:hover {
  border-color: rgba(224,128,128,.38);
  color: var(--red);
  background: var(--red-dim);
}

.prompt-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pm-section { display: flex; flex-direction: column; gap: 8px; }
.pm-section--prompt { flex: 1; }

/* ── Modal param sections ── */
.pm-section--params { padding: 12px 20px; border-top: 1px solid var(--border); }
.pm-chips-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pm-quality-chip, .pm-neg-chip, .pm-mj-ver-btn, .pm-mj-q-btn {
  padding: 5px 12px; border-radius: 20px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.75rem; font-family: inherit; font-weight: 500;
  cursor: pointer; transition: all 0.15s;
  opacity: 0.55;
  line-height: 1.4;
  appearance: none; -webkit-appearance: none;
}
.pm-quality-chip:hover, .pm-neg-chip:hover, .pm-mj-ver-btn:hover, .pm-mj-q-btn:hover {
  opacity: 0.85;
  border-color: #ef4444;
  color: #ef4444;
}
.pm-quality-chip.active, .pm-neg-chip.active, .pm-mj-ver-btn.active, .pm-mj-q-btn.active {
  background: #ef4444;
  border-color: #ef4444;
  color: #fff;
  opacity: 1;
}
.pm-mj-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; align-items: flex-start; }
.pm-mj-row--chips { margin-top: 12px; }
.pm-mj-group { display: flex; flex-direction: column; gap: 6px; }
.pm-mj-param { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 160px; }
.pm-mj-param-label { font-size: 0.72rem; color: var(--text-secondary); font-family: monospace; }
.pm-mj-slider { width: 100%; accent-color: var(--accent); cursor: pointer; }

.pm-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: var(--txt2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.pm-tool-label {
  font-weight: 600;
  color: var(--neon-purple);
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
}

/* Lang buttons */
.pm-lang-row { display: flex; gap: 8px; }
.pm-lang-btn {
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--rs);
  border: 1px solid var(--glass-border);
  background: var(--glass-1);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.pm-lang-btn:hover { border-color: rgba(168,85,247,.35); color: var(--txt); background: var(--glass-2); }
.pm-lang-btn.active {
  border-color: rgba(168,85,247,.40);
  background: var(--purple-dim);
  color: var(--neon-purple);
}

/* Tool buttons */
.pm-tools-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-tool-btn {
  padding: 5px 11px;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  background: var(--glass-1);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.pm-tool-btn:hover { border-color: rgba(168,85,247,.35); color: var(--txt); background: var(--glass-2); }
.pm-tool-btn.active {
  border-color: rgba(168,85,247,.40);
  background: var(--purple-dim);
  color: var(--neon-purple);
}

/* Prompt box */
.pm-prompt-box {
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(168,85,247,.30);
  border-radius: var(--rs);
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--txt);
  line-height: 1.75;
  min-height: 120px;
  max-height: 320px;
  overflow-y: auto;
  word-break: break-word;
  white-space: pre-wrap;
  flex: 1;
}
:root[data-theme="light"] .pm-prompt-box {
  background: rgba(168,85,247,.06);
  border-color: rgba(168,85,247,.25);
}
.pm-prompt-box.empty {
  color: var(--muted);
  font-style: italic;
}
.pm-prompt-box:has(.formatted-prompt) {
  white-space: normal;
}

/* Footer */
.prompt-modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--glass-border);
  flex-shrink: 0;
}
.pm-copy-btn {
  width: 100%;
  padding: 11px;
  border-radius: var(--rs);
  border: 1px solid rgba(168,85,247,.40);
  background: rgba(168,85,247,.20);
  color: var(--neon-purple);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: .03em;
}
.pm-copy-btn:hover {
  background: rgba(168,85,247,.30);
  border-color: rgba(168,85,247,.60);
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow-purple);
}
.pm-copy-btn:active { transform: translateY(0); }
.pm-copy-btn.copied {
  background: rgba(52,211,153,.20);
  border-color: rgba(52,211,153,.40);
  color: var(--neon-green);
}

/* Web mode — two copy buttons */
.pm-web-btns { display: flex; gap: .6rem; }
.pm-web-btns .pm-copy-btn { flex: 1; font-size: 12px; padding: 10px 8px; }
.pm-copy-btn--visual {
  background: transparent;
  border: 1px solid rgba(168,85,247,.30);
  color: var(--muted);
}
.pm-copy-btn--visual:hover {
  background: var(--purple-dim);
  border-color: rgba(168,85,247,.50);
  color: var(--neon-purple);
}

/* Web — visual prompt block */
.pm-section--visual {
  border-top: 1px dashed var(--glass-border);
  padding-top: .75rem;
  margin-top: .25rem;
}
.pm-visual-hint {
  font-size: 10px;
  font-weight: 400;
  opacity: .55;
  margin-left: .4rem;
}

/* Light theme */
:root[data-theme="light"] .pm-lang-btn,
:root[data-theme="light"] .pm-tool-btn {
  background: var(--glass-1);
  border-color: var(--glass-border);
  color: var(--muted);
}
:root[data-theme="light"] .pm-lang-btn.active,
:root[data-theme="light"] .pm-tool-btn.active {
  background: var(--purple-dim);
  border-color: rgba(168,85,247,.38);
  color: var(--purple);
}
:root[data-theme="light"] .sb-reset-btn { color: var(--muted); }

/* ================================================================
   UTILITY
================================================================ */
.hidden { display: none !important; }

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 960px) {
  .sidebar {
    position: fixed;
    top: 0; right: -100%; bottom: 0;
    width: min(var(--sidebar-w), 90vw);
    z-index: 300;
    height: 100vh;
    border-left-color: rgba(168,85,247,.30);
    transition: right .3s cubic-bezier(.4,0,.2,1);
  }

  .sidebar.open { right: 0; }
  .sidebar-overlay.visible { display: block; }
  .sidebar-toggle { display: flex; }

  .app-main { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 600px) {
  .mode-tabs { gap: 2px; }
  .mode-tab { padding: 5px 9px; font-size: 11px; }
  .logo-wordmark { font-size: 16px; letter-spacing: 1.5px; }
  .styles-grid { grid-template-columns: repeat(2, 1fr); }
  .prompt-bar-inner { flex-direction: column; gap: 10px; }
  .prompt-actions { flex-direction: row; flex-wrap: wrap; }
  .copy-row { flex-direction: row; }
}

/* ================================================================
   ADDENDUM — New class names used by the rebuilt JS
================================================================ */

/* Fix: styles-grid-wrap and selected-strip display by default */
.styles-grid-wrap { display: flex !important; flex-direction: column; gap: 10px; }
.selected-strip   { display: flex !important; }

/* App sections */
.app-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--r);
  padding: 16px 18px;
  transition: border-color .22s, box-shadow .22s;
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
}

.app-section:hover {
  border-color: rgba(168,85,247,.22);
  box-shadow: 0 2px 16px rgba(0,0,0,.18);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.section-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 800;
  color: var(--txt);
  letter-spacing: -.2px;
}

.section-hint {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 3px 9px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Style cards (new layout) */
.style-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 10px 10px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r);
  cursor: pointer;
  transition: var(--transition);
  background: var(--glass-1);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  text-align: center;
  user-select: none;
  min-height: 70px;
  width: 100%;
}

/* styles-grid-wrap is a column container; inner .styles-grid handles the card columns */
.styles-grid-wrap {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
}

.style-card:hover {
  border-color: rgba(168,85,247,.32);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), var(--shadow-glow-purple);
  background: var(--glass-2);
}

.style-card.primary {
  border-color: rgba(168,85,247,.42);
  background: var(--purple-dim);
  box-shadow: 0 0 0 2px rgba(168,85,247,.15), var(--shadow-glow-purple);
}

.style-card.secondary {
  border-color: rgba(6,182,212,.38);
  background: var(--gold-dim);
  box-shadow: 0 0 0 2px rgba(6,182,212,.15), var(--shadow-glow-gold);
}

.style-svg {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  flex-shrink: 0;
}

.style-card.primary  .style-svg { color: var(--neon-purple); }
.style-card.secondary .style-svg { color: var(--neon-cyan); }

.style-svg svg { width: 100%; height: 100%; }

.style-card.has-svg { flex-direction: column; padding: 10px 8px 8px; }

.style-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--txt);
  line-height: 1.3;
  text-align: center;
}

/* Compact style-card for text-only attribute layers (no thumbnail) */
.styles-grid.compact .style-card {
  min-height: 36px;
  padding: 7px 8px;
  gap: 3px;
}
.styles-grid.compact .style-label {
  font-size: 10.5px;
}

.style-desc {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--muted);
  line-height: 1.4;
  text-align: center;
}

/* ================================================================
   STYLE-CARD THUMBNAIL
================================================================ */
.style-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: var(--glass-1);
  flex-shrink: 0;
}

.style-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.style-card:hover .style-thumb img,
.gs-btn--thumb:hover .style-thumb img {
  transform: scale(1.06);
}

.style-thumb-zoom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity .2s ease;
  cursor: zoom-in;
}

.style-thumb-zoom svg {
  width: 26px;
  height: 26px;
  color: #fff;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.6));
  pointer-events: none;
}

.style-card:hover .style-thumb-zoom,
.gs-btn--thumb:hover .style-thumb-zoom {
  opacity: 1;
}

/* Style-card with thumbnail: stack thumbnail on top, labels below */
.style-card.has-thumb {
  padding: 0;
  overflow: hidden;
  gap: 0;
}

.style-card.has-thumb .style-thumb-body {
  padding: 8px 10px 9px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  align-items: center;
}

/* ================================================================
   LIGHTBOX
================================================================ */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.88);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  backdrop-filter: blur(8px);
}

.lightbox-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.lightbox-inner {
  position: relative;
  max-width: min(90vw, 860px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: lbIn .25s ease;
}

@keyframes lbIn {
  from { transform: scale(.92); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.lightbox-inner img {
  max-width: 100%;
  max-height: 75vh;
  border-radius: 12px;
  box-shadow: 0 20px 80px rgba(0,0,0,.7);
  object-fit: contain;
}

.lightbox-caption {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  opacity: .85;
}

.lightbox-close {
  position: absolute;
  top: -38px;
  right: 0;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background .15s;
}

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

/* Badges — selected style indicators in the strip above each section */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 12px;
  border-radius: 20px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid transparent;
  user-select: none;
}

.badge-primary {
  background: rgba(168,85,247,.15);
  border-color: rgba(168,85,247,.38);
  color: var(--neon-purple);
}

.badge-primary:hover {
  background: rgba(168,85,247,.24);
}

.badge-secondary {
  background: rgba(6,182,212,.12);
  border-color: rgba(6,182,212,.32);
  color: var(--neon-cyan);
}

.badge-secondary:hover {
  background: rgba(6,182,212,.20);
}

/* Badge close */
.badge-close {
  font-size: 12px;
  opacity: .55;
  font-weight: 400;
  line-height: 1;
}

/* Subcat tab has-value indicator */
.subcat-tab.has-value {
  border-color: var(--gold);
  color: var(--gold);
}

/* Subject wrap & label */
.subject-wrap { padding: 1rem 1.5rem 0; }
.subject-label {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .4rem;
}
.subject-label-hint {
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  opacity: .7;
}
.visual-extra-prompts .subject-input {
  border-style: dashed;
  font-size: 12px;
  min-height: 50px;
}

.visual-import-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .5rem;
  font-size: .78rem;
  font-family: inherit;
  padding: .35rem .85rem;
  border-radius: 6px;
  border: 1px solid rgba(168,85,247,.40);
  background: rgba(168,85,247,.10);
  color: var(--neon-purple);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.visual-import-btn:hover {
  background: rgba(168,85,247,.22);
  border-color: var(--purple);
}
.visual-import-btn:active { transform: scale(.96); }

/* Reference image checkbox */
.ref-image-wrap {
  padding: .75rem 1.5rem .25rem;
}
.ref-image-toggle {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1rem;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color .2s, background .2s;
  user-select: none;
  position: relative;
}
.ref-image-toggle:hover {
  border-color: var(--acc);
}
.ref-image-toggle.active {
  border-color: var(--acc);
  background: color-mix(in srgb, var(--acc) 8%, var(--glass-1));
}
.ref-image-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--acc);
  cursor: pointer;
  flex-shrink: 0;
}
.ref-image-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}
.ref-image-text {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  flex: 1;
  min-width: 0;
}
.ref-image-text strong {
  font-size: 13px;
  color: var(--txt);
  font-weight: 600;
}
.ref-image-hint {
  font-size: 11.5px;
  color: var(--txt2);
  line-height: 1.4;
}
.ref-image-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .2em .55em;
  border-radius: 99px;
  background: var(--acc);
  color: #fff;
  opacity: 0;
  transition: opacity .2s;
  flex-shrink: 0;
}
.ref-image-badge.visible {
  opacity: 1;
}
.ref-image-toggle--sub {
  margin-top: .5rem;
  margin-left: 1.5rem;
  border-style: dashed;
  opacity: .92;
}

/* Subject input */
.subject-input {
  width: 100%;
  padding: 11px 14px;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--r);
  color: var(--txt);
  font-family: var(--font-sans);
  font-size: 12px;
  resize: vertical;
  min-height: 58px;
  transition: border-color .2s, background .2s, box-shadow .2s;
  line-height: 1.6;
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
}

.subject-input:focus {
  outline: none;
  border-color: rgba(168,85,247,.45);
  background: var(--glass-2);
  box-shadow: 0 0 0 3px rgba(168,85,247,.10);
}
.subject-input::placeholder { color: var(--muted); opacity: .65; }

/* Negative custom input */
.neg-custom-input {
  width: 100%;
  padding: 8px 11px;
  background: rgba(224,128,128,.05);
  border: 1px solid rgba(224,128,128,.18);
  border-radius: var(--rs);
  color: #e8a0a0;
  font-family: var(--font-sans);
  font-size: 11px;
  resize: vertical;
  min-height: 50px;
  transition: border-color .2s;
  margin-top: 4px;
  line-height: 1.55;
}

.neg-custom-input:focus { outline: none; border-color: rgba(224,128,128,.45); }
.neg-custom-input::placeholder { color: rgba(224,128,128,.35); }

/* Sidebar section (flat, no accordion) */
.sb-section {
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 2px;
}

.sb-section:last-child { border-bottom: none; }

.sb-section-header {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: var(--neon-purple);
  padding: 12px 14px 6px;
}

/* Preset cards */
.presets-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 14px 12px;
}

.preset-card {
  width: 100%;
  padding: 10px 12px;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--rs);
  color: var(--txt2);
  cursor: pointer;
  text-align: left;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.preset-card:hover {
  border-color: rgba(168,85,247,.32);
  background: var(--glass-2);
  color: var(--txt);
  transform: translateX(2px);
  box-shadow: var(--shadow-sm);
}

.preset-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  color: inherit;
  line-height: 1.3;
}

.preset-desc {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--muted);
  line-height: 1.35;
}

/* Sidebar chips (reuse .chip styles, but smaller padding) */
.sb-section-body {
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sb-empty {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--muted);
  font-style: italic;
  padding: 4px 0;
}

/* Prompt text inner spans */
.prompt-main { color: var(--txt); }
.prompt-neg-label { color: var(--muted); margin-left: 4px; }
.prompt-neg { color: #f87171; }

/* Copy button copied state */
.copy-btn.copied { background: var(--green); }

/* Sidebar overlay active state */
.sidebar-overlay.active {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 250;
  backdrop-filter: blur(2px);
}

/* Ratio section */
.ratio-section, .quality-section { margin: 0; }

/* App main layout */
.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 22px 40px 22px;
  max-width: calc(100% - var(--sidebar-w));
  overflow-y: auto;
}

@media (max-width: 960px) {
  .app-main { max-width: 100%; padding-left: 16px; padding-right: 16px; }
}

/* App layout flex */
.app-layout {
  display: flex;
  min-height: calc(100vh - var(--header-h));
  align-items: flex-start;
}

/* Sidebar base */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  background: rgba(8,8,20,.70);
  border-left: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
}

:root[data-theme="light"] .sidebar { background: rgba(255,255,255,.50); }

.sidebar-inner {
  display: flex;
  flex-direction: column;
  padding-bottom: 8px;
}

/* Sidebar toggle — hidden on desktop */
.sidebar-toggle {
  display: none;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 6px 13px;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--txt2);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}

.sidebar-toggle:hover {
  border-color: rgba(168,85,247,.32);
  color: var(--neon-purple);
  background: var(--glass-2);
}

/* Sidebar overlay base */
.sidebar-overlay {
  display: none;
}


/* ============================================================
   NUEVOS ESTILOS — 3D Dual Panel + Web Flow + General
   ============================================================ */

/* ── Dual panel layout (3D mode) ────────────────────────────── */
.dual-panel-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  align-items: start;
}
@media (max-width: 900px) {
  .dual-panel-layout { grid-template-columns: 1fr; }
}
.panel {
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  overflow: hidden;
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  transition: border-color .2s;
}
.panel:hover { border-color: rgba(168,85,247,.20); }
.panel-hdr {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--glass-border);
  background: var(--glass-1);
}
.panel-badge {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(168,85,247,.25);
  border: 1px solid rgba(168,85,247,.35);
  color: var(--neon-purple);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-weight: 700; font-size: .85rem;
  flex-shrink: 0;
}
.panel-badge-b {
  background: rgba(6,182,212,.20);
  border-color: rgba(6,182,212,.35);
  color: var(--neon-cyan);
}
.panel-title {
  font-family: var(--font-sans);
  font-size: .9rem;
  font-weight: 600;
  color: var(--txt);
}
.panel-desc  {
  font-family: var(--font-sans);
  font-size: .73rem;
  color: var(--muted);
  margin-top: 2px;
}
.panel-body  { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.panel-empty {
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: .8rem;
  text-align: center;
  padding: 1.5rem;
  border: 1px dashed var(--glass-border);
  border-radius: 8px;
}

/* ── Config group ───────────────────────────────────────────── */
.cfg-group { display: flex; flex-direction: column; gap: .5rem; }
.cfg-label { font-size: .8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cfg-hint  { font-size: .75rem; font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; margin-left: .5rem; }

/* ── Radio / button grids ───────────────────────────────────── */
.radio-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.radio-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.radio-btn {
  padding: .4rem .75rem;
  border-radius: 7px;
  border: 1px solid var(--glass-border);
  background: var(--glass-1);
  color: var(--txt2);
  font-family: var(--font-sans);
  font-size: .78rem;
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: left;
}
.radio-btn:hover { border-color: rgba(168,85,247,.30); background: var(--glass-2); color: var(--txt); }
.radio-btn.active { border-color: rgba(168,85,247,.42); background: var(--purple-dim); color: var(--neon-purple); }

/* ── Views grid ─────────────────────────────────────────────── */
.views-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .4rem;
}
@media (max-width: 500px) { .views-grid { grid-template-columns: repeat(2, 1fr); } }
.view-btn {
  padding: .55rem .5rem;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--txt2);
  font-size: .8rem;
  cursor: pointer;
  transition: all .15s;
  text-align: center;
}
.view-btn:hover { border-color: rgba(168,85,247,.5); }
.view-btn.active { border-color: var(--purple); background: rgba(168,85,247,.20); color: var(--neon-purple); }

/* ── View prompt cards ──────────────────────────────────────── */
.view-prompt-cards { display: flex; flex-direction: column; gap: .75rem; }
.view-prompt-card {
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: .85rem 1rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.vpc-label { font-size: .78rem; font-weight: 600; color: var(--gold); text-transform: uppercase; letter-spacing: .04em; }
.vpc-prompt { font-size: .82rem; color: var(--txt); line-height: 1.5; font-family: var(--font-sans); word-break: break-all; }
.vpc-neg { font-size: .75rem; color: rgba(255,80,80,0.8); }
.vpc-copy { align-self: flex-end; }

/* ── Panel B prompt display ─────────────────────────────────── */
.panel-b-prompt {
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: .85rem 1rem;
  font-size: .82rem;
  font-family: var(--font-sans);
  color: var(--txt);
  line-height: 1.5;
  word-break: break-all;
}

/* ── HDRI keyword chips ─────────────────────────────────────── */
.hdri-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.hdri-chip {
  font-size: .75rem;
  padding: .3rem .65rem;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
  font-family: var(--font-sans);
  line-height: 1;
}
.hdri-chip:hover { border-color: var(--glass-border-strong); color: var(--txt); }
.hdri-chip.active { border-color: var(--purple); background: rgba(168,85,247,.15); color: var(--neon-purple); }
.hdri-chip-warn { border-color: rgba(239,68,68,0.3); color: rgba(239,68,68,0.6); }
.hdri-chip-warn:hover { border-color: rgba(239,68,68,0.6); color: rgba(239,68,68,0.9); }
.hdri-chip-warn.active { border-color: #ef4444; background: rgba(239,68,68,0.15); color: #fca5a5; }
.cfg-hint-warn { color: rgba(239,68,68,0.6) !important; }

/* ── HDRI entorno import ────────────────────────────────────── */
.hdri-entorno-import {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.hdri-entorno-textarea {
  width: 100%;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: .65rem .85rem;
  font-size: .8rem;
  font-family: var(--font-sans);
  color: var(--txt);
  resize: vertical;
  line-height: 1.5;
  box-sizing: border-box;
}
.hdri-entorno-textarea:focus { outline: none; border-color: var(--purple); }
.hdri-import-btn {
  align-self: flex-start;
  font-size: .78rem;
  padding: .35rem .8rem;
  border-radius: 6px;
  border: 1px solid rgba(168,85,247,.40);
  background: rgba(168,85,247,.10);
  color: var(--neon-purple);
  cursor: pointer;
  transition: all .15s;
}
.hdri-import-btn:hover { background: rgba(168,85,247,.20); border-color: var(--purple); }

/* ── Engine note ────────────────────────────────────────────── */
.engine-note { font-size: .75rem; color: var(--muted); padding-left: .25rem; }

/* ── Copy all button ────────────────────────────────────────── */
.copy-all-btn {
  width: 100%;
  padding: .7rem;
  border-radius: 9px;
  border: 1px solid rgba(168,85,247,.40);
  background: rgba(168,85,247,.10);
  color: var(--neon-purple);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  margin-top: .5rem;
}
.copy-all-btn:hover { background: rgba(168,85,247,.20); border-color: var(--purple); }
.copy-all-btn.copied { background: rgba(34,197,94,0.15); border-color: #22c55e; color: #4ade80; }

/* ── Claude instructions card ───────────────────────────────── */
.claude-instr-card {
  border: 1px solid var(--glass-border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--glass-1);
}
.claude-instr-tabs {
  display: flex;
  border-bottom: 1.5px solid var(--glass-border);
}
.claude-instr-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  padding: .75rem 1rem;
  background: transparent;
  border: none;
  color: var(--txt2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
  border-right: 1.5px solid var(--glass-border);
  text-align: left;
}
.claude-instr-tab:last-child { border-right: none; }
.claude-instr-tab.active {
  background: color-mix(in srgb, var(--acc) 8%, var(--glass-1));
  color: var(--acc);
}
.claude-instr-tab:hover:not(.active) { background: var(--bgb); color: var(--txt); }
.claude-instr-tab-hint {
  font-size: 10.5px;
  font-weight: 400;
  opacity: .65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.claude-instr-body {
  max-height: 360px;
  overflow-y: auto;
  background: var(--bgb);
}
.claude-instr-pre {
  margin: 0;
  padding: 1rem 1.25rem;
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--txt);
  white-space: pre-wrap;
  word-break: break-word;
}
.claude-instr-footer {
  padding: .75rem 1rem;
  border-top: 1.5px solid var(--glass-border);
}
.copy-claude-instr-btn {
  width: 100%;
  padding: .65rem;
  border-radius: 8px;
  border: 1.5px solid var(--acc);
  background: color-mix(in srgb, var(--acc) 12%, transparent);
  color: var(--acc);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.copy-claude-instr-btn:hover { background: color-mix(in srgb, var(--acc) 22%, transparent); }

/* ── Web flow ───────────────────────────────────────────────── */
.web-flow { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 2rem; }
.web-step { display: flex; flex-direction: column; gap: 1rem; }
.step-hdr { display: flex; align-items: center; gap: .75rem; }
.step-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--purple);
  color: #fff; font-weight: 700;
  font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.step-title { font-size: 1rem; font-weight: 600; color: var(--txt); }
.step-desc  { font-size: .8rem; color: var(--muted); margin-left: auto; }

/* ── Project type cards ─────────────────────────────────────── */
.project-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .65rem;
}
.pt-card {
  padding: .85rem 1rem;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.1);
  background: transparent;
  color: var(--txt);
  cursor: pointer;
  text-align: left;
  transition: all .15s;
}
.pt-card:hover { border-color: rgba(168,85,247,.40); background: rgba(168,85,247,.05); }
.pt-card.active { border-color: var(--purple); background: rgba(168,85,247,.12); }
.pt-label { font-size: .88rem; font-weight: 600; }
.pt-desc  { font-size: .75rem; color: var(--muted); margin-top: .2rem; }

/* ── Global style selectors ─────────────────────────────────── */
.gs-section   { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .2rem; }
.gs-label     { font-size: .78rem; font-weight: 700; color: var(--txt); letter-spacing: .01em; display: flex; align-items: baseline; gap: .5rem; }
.gs-hint      { font-size: .72rem; font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }
.gs-btn       { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; padding: .45rem .75rem; text-align: left; min-height: unset; }
.gs-btn-desc  { font-size: .68rem; color: var(--muted); font-weight: 400; line-height: 1.3; white-space: normal; opacity: .85; }
.gs-btn.active .gs-btn-desc { color: inherit; opacity: .9; }

/* Brand colors picker */
.brand-colors-wrap {
  margin-top: .6rem;
  padding: .75rem 1rem;
  background: var(--surface2, var(--surface));
  border: 1px solid var(--border);
  border-radius: .75rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  animation: fadeSlideIn .18s ease;
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.brand-colors-label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--txt);
  display: flex;
  align-items: baseline;
  gap: .4rem;
}
.brand-colors-hint {
  font-size: .7rem;
  font-weight: 400;
  color: var(--muted);
}
.brand-colors-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.brand-color-item {
  display: flex;
  align-items: center;
  gap: .3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: .3rem .5rem;
}
.brand-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: .35rem;
  border: 2px solid var(--border);
  cursor: pointer;
  display: block;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  transition: border-color .15s;
}
.brand-color-swatch:hover { border-color: var(--accent); }
.brand-color-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  padding: 0;
  border: none;
}
.brand-color-hex {
  font-size: .72rem;
  font-family: var(--font-mono, monospace);
  color: var(--muted);
  letter-spacing: .02em;
  min-width: 4.5ch;
}
.brand-color-remove {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0 .15rem;
  font-size: .75rem;
  line-height: 1;
  border-radius: .25rem;
  transition: color .15s, background .15s;
}
.brand-color-remove:hover { color: #ef4444; background: rgba(239,68,68,.1); }
.brand-color-add {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .65rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px dashed var(--accent);
  border-radius: .5rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.brand-color-add:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }

/* radio-grid con thumbnails */
.radio-grid--thumb {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .5rem;
}

.gs-btn--thumb {
  padding: 0;
  overflow: hidden;
  border-radius: var(--r);
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  cursor: pointer;
}

.gs-btn--thumb .style-thumb {
  border-radius: 0;
}

.gs-btn--thumb .style-thumb-body {
  padding: 6px 8px 8px;
}

.gs-btn--thumb .style-label {
  font-size: 11px;
}

.gs-btn--thumb .style-desc {
  font-size: 10px;
}

/* ── Web pages grid ─────────────────────────────────────────── */
.web-pages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .6rem;
}
.page-card {
  padding: .8rem 1rem;
  border-radius: 9px;
  border: 1.5px solid var(--glass-border);
  background: transparent;
  color: var(--txt);
  cursor: pointer;
  text-align: center;
  transition: all .15s;
}
.page-card:hover { border-color: rgba(245,158,11,0.4); }
.page-card.active { border-color: var(--gold); background: rgba(245,158,11,0.1); }
.page-card-title { font-size: .85rem; font-weight: 600; }
.page-card-desc  { font-size: .75rem; color: var(--muted); margin-top: .15rem; }

/* custom page card */
.page-card--custom { padding: 0; display: flex; align-items: stretch; overflow: hidden; }
.page-card--custom .page-card-inner { flex: 1; min-width: 0; padding: .8rem 1rem; background: transparent; border: none; color: var(--txt); cursor: pointer; text-align: left; }
.page-card-remove { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2rem; background: none; border: none; border-left: 1px solid var(--glass-border); color: var(--muted); cursor: pointer; transition: color .15s, background .15s; }
.page-card-remove:hover { color: #f87171; background: rgba(248,113,113,.08); }

/* add custom page row */
.page-card-add { display: flex; align-items: center; gap: .5rem; border: 1.5px dashed var(--glass-border); border-radius: 9px; padding: .55rem .8rem; }
.page-card-add-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--txt); font-size: .85rem; font-family: inherit; }
.page-card-add-input::placeholder { color: var(--muted); }
.page-card-add-btn { flex-shrink: 0; display: flex; align-items: center; gap: .3rem; background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.3); color: var(--gold); border-radius: 6px; padding: .28rem .65rem; font-size: .8rem; cursor: pointer; white-space: nowrap; transition: background .15s; }
.page-card-add-btn:hover { background: rgba(245,158,11,.22); }

/* custom badge + remove in page card header */
.wpc-custom-badge { font-size: .65rem; font-weight: 500; color: var(--gold); background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.25); border-radius: 4px; padding: .1rem .4rem; vertical-align: middle; margin-left: .4rem; }
.wpc-remove-btn { background: none; border: none; color: var(--muted); font-size: 1.2rem; cursor: pointer; padding: .2rem .4rem; border-radius: 5px; transition: color .15s, background .15s; line-height: 1; }
.wpc-remove-btn:hover { color: #f87171; background: rgba(248,113,113,.12); }


/* ── Web page cards (step 4) ────────────────────────────────── */
.web-hf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .web-hf-grid { grid-template-columns: 1fr; } }
.web-page-cards { display: flex; flex-direction: column; gap: 1.25rem; }
.web-page-card {
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.wpc-header { display: flex; align-items: flex-start; justify-content: space-between; }
.wpc-title  { font-size: .95rem; font-weight: 600; }
.wpc-desc   { font-size: .78rem; color: var(--muted); margin-top: .15rem; }

/* ── Component zones ────────────────────────────────────────── */
.wpc-components { display: flex; flex-direction: column; gap: .75rem; }
.comp-zone {}
.comp-zone-label { font-size: .75rem; font-weight: 600; color: var(--muted); margin-bottom: .35rem; }
.comp-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.comp-chip {
  padding: .3rem .65rem;
  border-radius: 6px;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--txt2);
  font-size: .75rem;
  cursor: pointer;
  transition: all .12s;
}
.comp-chip:hover { border-color: rgba(245,158,11,0.4); }
.comp-chip.active { border-color: var(--gold); background: rgba(245,158,11,0.12); color: #fbbf24; }
.comp-chip-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: .3rem;
  font-size: .7rem;
  opacity: .45;
  transition: opacity .12s, transform .12s;
  line-height: 1;
  vertical-align: middle;
}
.comp-chip:hover .comp-chip-preview { opacity: .9; transform: scale(1.15); }
.comp-chip.active .comp-chip-preview { opacity: .7; }

/* ── Web page prompt output ─────────────────────────────────── */
.wpc-prompt-label { font-size: .75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.wpc-prompt {
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 7px;
  padding: .75rem .9rem;
  font-size: .75rem;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  color: var(--txt);
  line-height: 1.6;
  word-break: break-word;
  white-space: pre-wrap;
  max-height: 420px;
  overflow-y: auto;
}
.wpc-copy { align-self: flex-end; }

/* ── Completion bar ─────────────────────────────────────────── */
.completion-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  margin-bottom: .4rem;
}
.completion-bar-inner {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--purple), var(--gold));
  transition: width .4s ease;
}
.completion-label { font-size: .75rem; color: var(--muted); }

/* ── History items ──────────────────────────────────────────── */
.history-item {
  padding: .55rem .75rem;
  border-radius: 7px;
  border: 1px solid var(--glass-border);
  cursor: pointer;
  transition: all .12s;
  margin-bottom: .35rem;
}
.history-item:hover { background: var(--glass-1); border-color: var(--glass-border-strong); }
.history-item-label { font-size: .8rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-item-meta  { font-size: .7rem; color: var(--muted); margin-top: 2px; }

/* ── Neg chips row ──────────────────────────────────────────── */
.neg-chips-row { margin-bottom: .5rem; }

/* ── Ratio/quality wrapper ──────────────────────────────────── */
.ratio-section-wrap {
  padding: 0 0 0.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ratio-cards-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0.6rem 1.5rem 1rem;
}
.ratio-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 10px 8px;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--rs);
  cursor: pointer;
  transition: var(--transition);
  min-width: 80px;
  max-width: 110px;
  flex: 1 1 80px;
  text-align: center;
  color: var(--muted);
  position: relative;
  overflow: hidden;
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
}
.ratio-card:hover {
  border-color: rgba(168,85,247,.32);
  background: var(--glass-2);
  color: var(--txt);
  transform: translateY(-1px);
}
.ratio-card.active {
  border-color: rgba(168,85,247,.42);
  background: var(--purple-dim);
  color: var(--neon-purple);
  box-shadow: var(--shadow-glow-purple);
}
.ratio-card__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 44px;
}
.ratio-card__preview svg {
  display: block;
  color: inherit;
}
.ratio-card__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  color: inherit;
  line-height: 1;
}
.ratio-card__name {
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1;
}
.ratio-card.active .ratio-card__name {
  color: var(--purple-l);
  opacity: 1;
}
.ratio-card__uses {
  font-size: 9.5px;
  color: var(--muted2);
  line-height: 1.4;
  max-width: 100px;
  display: block;
}
.ratio-card.active .ratio-card__uses {
  color: var(--purple-l);
  opacity: 0.9;
}

.ratio-quality-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.rq-group { display: flex; flex-direction: column; gap: .4rem; }
.rq-label { font-size: .75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* ── Quality cards ───────────────────────────────────────────── */
.quality-cards-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.quality-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 12px;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--rs);
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
  color: var(--muted);
  min-width: 100px;
  flex: 1 1 120px;
  max-width: 200px;
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
}
.quality-card:hover {
  border-color: rgba(168,85,247,.32);
  background: var(--glass-2);
  color: var(--txt);
}
.quality-card.active {
  border-color: rgba(168,85,247,.42);
  background: var(--purple-dim);
  color: var(--neon-purple);
}
.quality-card__label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: inherit;
}
.quality-card__desc {
  font-size: 10px;
  color: var(--muted2);
  line-height: 1.4;
}
.quality-card.active .quality-card__desc {
  color: var(--purple-l);
  opacity: 0.75;
}

/* ── Video Timeline ──────────────────────────────────────────── */
.tl-section { padding-bottom: .5rem; }

.tl-grid {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 0 1rem 1rem;
  overflow-x: auto;
}

.tl-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 44px;
  flex-shrink: 0;
  width: 28px;
  gap: 2px;
}
.tl-connector-line {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--glass-border), var(--purple-dim));
  border-radius: 2px;
}
.tl-connector-arrow {
  font-size: 14px;
  color: var(--purple-l);
  opacity: 0.5;
  margin-top: -10px;
  line-height: 1;
}

.tl-col {
  flex: 1 1 0;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tl-col-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 2px;
}
.tl-col-icon {
  font-size: 11px;
  opacity: 0.5;
}
.tl-col-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.tl-col--filled .tl-col-label {
  color: var(--neon-purple);
}

/* ── Subject action field ── */
.tl-action-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tl-action-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted2);
}
.tl-action-input {
  width: 100%;
  padding: 7px 10px;
  background: var(--glass-1);
  border: 1px dashed var(--glass-border);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text);
  outline: none;
  resize: vertical;
  min-height: 54px;
  transition: border-color .2s, background .2s, box-shadow .2s;
  box-sizing: border-box;
}
.tl-action-input::placeholder {
  color: var(--muted2);
  font-style: italic;
}
.tl-action-input:focus {
  border-color: var(--neon-cyan);
  border-style: solid;
  background: var(--glass-2);
  box-shadow: 0 0 0 2px rgba(34,211,238,.12);
}
.tl-action-input.has-value {
  border-color: rgba(34,211,238,.35);
  border-style: solid;
  color: var(--neon-cyan);
}

.tl-selected-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 10px;
  background: var(--purple-dim);
  border: 1px solid rgba(168,85,247,.40);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--neon-purple);
  min-height: 30px;
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
}
.tl-selected-badge--empty {
  background: transparent;
  border-color: var(--glass-border);
  border-style: dashed;
  color: var(--muted2);
  font-weight: 400;
  font-style: italic;
}
.tl-badge-x {
  cursor: pointer;
  opacity: 0.6;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  transition: opacity .15s;
}
.tl-badge-x:hover { opacity: 1; }

.tl-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tl-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  transition: var(--transition);
  color: var(--muted);
  width: 100%;
}
.tl-option:hover {
  border-color: rgba(168,85,247,.32);
  background: var(--glass-2);
  color: var(--txt);
}
.tl-option.active {
  border-color: rgba(168,85,247,.42);
  background: var(--purple-dim);
  color: var(--neon-purple);
  box-shadow: var(--shadow-glow-purple);
}
.tl-option__label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: inherit;
}
.tl-option__desc {
  font-family: var(--font-sans);
  font-size: 9px;
  color: var(--muted2);
  line-height: 1.4;
}
.tl-option.active .tl-option__desc {
  color: var(--neon-purple);
  opacity: 0.65;
}

/* ── Light mode overrides ───────────────────────────────────── */
:root[data-theme="light"] .panel,
:root[data-theme="light"] .view-prompt-card,
:root[data-theme="light"] .web-page-card,
:root[data-theme="light"] .panel-b-prompt,
:root[data-theme="light"] .wpc-prompt {
  background: var(--glass-2);
  border-color: var(--glass-border);
}
:root[data-theme="light"] .radio-btn { border-color: var(--glass-border); color: var(--txt2); }
:root[data-theme="light"] .hdri-chip { border-color: var(--glass-border); color: var(--muted); }
:root[data-theme="light"] .hdri-chip:hover { border-color: rgba(107,86,220,.3); color: var(--txt); }
:root[data-theme="light"] .hdri-chip.active { border-color: rgba(107,86,220,.4); background: rgba(107,86,220,.10); color: var(--purple); }
:root[data-theme="light"] .hdri-entorno-textarea { background: var(--glass-1); border-color: var(--glass-border); color: var(--txt); }
:root[data-theme="light"] .hdri-import-btn { border-color: rgba(107,86,220,.35); background: rgba(107,86,220,.07); color: var(--purple); }
:root[data-theme="light"] .visual-import-btn { border-color: rgba(107,86,220,.35); background: rgba(107,86,220,.07); color: var(--purple); }
:root[data-theme="light"] .radio-btn:hover { background: var(--glass-2); color: var(--txt); }
:root[data-theme="light"] .radio-btn.active { background: rgba(107,86,220,.18); color: #3b1fa8; border-color: rgba(107,86,220,.5); }
:root[data-theme="light"] .ratio-card { background: var(--glass-2); border-color: var(--glass-border); color: var(--muted); }
:root[data-theme="light"] .ratio-card:hover { background: var(--glass-3); border-color: rgba(107,86,220,.3); color: var(--txt); }
:root[data-theme="light"] .ratio-card.active { background: rgba(107,86,220,.15); border-color: rgba(107,86,220,.6); color: #3b1fa8; }
:root[data-theme="light"] .ratio-card.active .ratio-card__name,
:root[data-theme="light"] .ratio-card.active .ratio-card__uses { color: #5b3fd4; opacity: 1; }
:root[data-theme="light"] .quality-card { background: var(--glass-2); border-color: var(--glass-border); color: var(--muted); }
:root[data-theme="light"] .quality-card:hover { background: var(--glass-3); border-color: rgba(107,86,220,.3); color: var(--txt); }
:root[data-theme="light"] .quality-card.active { background: rgba(107,86,220,.15); border-color: rgba(107,86,220,.6); color: #3b1fa8; }
:root[data-theme="light"] .tl-option { background: var(--glass-2); border-color: var(--glass-border); color: var(--muted); }
:root[data-theme="light"] .tl-option:hover { background: var(--glass-3); border-color: rgba(107,86,220,.3); color: var(--txt); }
:root[data-theme="light"] .tl-option.active { background: rgba(107,86,220,.15); border-color: rgba(107,86,220,.6); color: #3b1fa8; }
:root[data-theme="light"] .tl-option.active .tl-option__desc { color: #5b3fd4; }
:root[data-theme="light"] .view-btn { border-color: var(--glass-border); color: var(--txt2); }
:root[data-theme="light"] .view-btn.active { border-color: rgba(107,86,220,.5); background: rgba(107,86,220,.15); color: #3b1fa8; }
:root[data-theme="light"] .pt-card { border-color: var(--glass-border); color: var(--txt); }
:root[data-theme="light"] .pt-card.active { border-color: rgba(107,86,220,.35); background: var(--purple-dim); }
:root[data-theme="light"] .page-card { border-color: var(--glass-border); color: var(--txt); }
:root[data-theme="light"] .page-card.active { border-color: rgba(6,182,212,.40); background: var(--gold-dim); }
:root[data-theme="light"] .comp-chip { border-color: var(--glass-border); color: var(--muted); }
:root[data-theme="light"] .comp-chip.active { border-color: rgba(6,182,212,.40); background: var(--gold-dim); color: #8b5a20; }
:root[data-theme="light"] .completion-bar { background: var(--glass-border); }


/* ================================================================
   VIDEO SECTION ARC (Arco de estilos por sección)
================================================================ */
.arc-section-wrap {
  margin-top: 1.5rem;
  border-top: 1px solid var(--glass-border);
  padding-top: 1.25rem;
}
.arc-section-title {
  font-size: .85rem;
  font-weight: 700;
  color: var(--purple-l);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.arc-section-hint {
  font-size: .72rem;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
}

/* ── Arc row (one per section) ───────────────────────────────── */
.arc-rows { display: flex; flex-direction: column; gap: .5rem; }

.arc-row {
  border: 1px solid var(--glass-border);
  border-radius: var(--rs);
  background: var(--glass-1);
  overflow: hidden;
  transition: var(--transition);
}
.arc-row--has-value {
  border-color: var(--purple);
  background: var(--purple-dim);
}
.arc-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem 1rem;
  cursor: pointer;
  user-select: none;
  gap: .75rem;
}
.arc-row-header:hover { background: rgba(168,85,247,.08); }

.arc-row-left {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
}
.arc-row-title {
  font-size: .82rem;
  font-weight: 600;
  color: var(--txt);
}
.arc-mini-row {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.arc-mini {
  font-size: .68rem;
  padding: .15rem .45rem;
  border-radius: 4px;
  font-weight: 600;
  white-space: nowrap;
}
.arc-mini--start  { background: rgba(74,222,128,.18); color: #4ade80; border: 1px solid rgba(74,222,128,.35); }
.arc-mini--mid    { background: rgba(250,204,21,.15); color: #facc15; border: 1px solid rgba(250,204,21,.3); }
.arc-mini--end    { background: rgba(248,113,113,.15); color: #f87171; border: 1px solid rgba(248,113,113,.3); }
.arc-mini--empty  { color: var(--muted); font-style: italic; font-weight: 400; }

.arc-row-chevron {
  font-size: 1.1rem;
  color: var(--muted);
  transition: transform .2s ease;
  flex-shrink: 0;
}
.arc-row-chevron.open { transform: rotate(90deg); color: var(--purple-l); }

/* ── Arc panel (expanded) ──────────────────────────────────────── */
.arc-panel {
  border-top: 1px solid var(--glass-border);
  padding: .9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.arc-summary {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.arc-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  padding: .2rem .55rem;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.03);
  color: var(--txt);
}
.arc-badge strong { font-weight: 700; }
.arc-badge--empty { color: var(--muted); font-style: italic; }
.arc-badge-x {
  cursor: pointer;
  opacity: .6;
  font-size: .85rem;
  line-height: 1;
  transition: opacity .15s;
}
.arc-badge-x:hover { opacity: 1; }
.arc-clear-btn {
  align-self: flex-start;
  font-size: .7rem;
  padding: .2rem .6rem;
  border-radius: 6px;
  border: 1px solid var(--red-dim);
  background: transparent;
  color: var(--red);
  cursor: pointer;
  transition: var(--transition);
}
.arc-clear-btn:hover { background: var(--red-dim); }

.arc-subcat-tabs { margin: 0; }

.arc-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .5rem;
}

/* ── Arc style card ───────────────────────────────────────────── */
.arc-style-card {
  border: 1px solid var(--glass-border);
  border-radius: var(--rs);
  background: var(--glass-2);
  padding: .6rem .7rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  transition: var(--transition);
}
.arc-style-card.arc-active {
  border-color: var(--purple);
  background: var(--purple-dim);
}
.arc-style-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--txt);
  line-height: 1.2;
  text-align: center;
}
.arc-style-desc {
  font-size: .68rem;
  color: var(--muted);
  line-height: 1.35;
  text-align: center;
}

/* ── Segment buttons inside each card ─────────────────────────── */
.arc-seg-row {
  display: flex;
  gap: .25rem;
  margin-top: .15rem;
  flex-wrap: wrap;
}
.arc-seg-btn {
  flex: 1;
  min-width: 0;
  font-size: .64rem;
  font-weight: 700;
  padding: .22rem .3rem;
  border-radius: 5px;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  text-align: center;
}
.arc-seg-btn:hover { border-color: var(--purple); color: var(--purple-l); }
.arc-seg-btn.active { font-weight: 800; }

/* ── Light mode ───────────────────────────────────────────────── */
:root[data-theme="light"] .arc-row { border-color: var(--glass-border); background: var(--glass-1); }
:root[data-theme="light"] .arc-row--has-value { border-color: rgba(107,86,220,.35); background: var(--purple-dim); }
:root[data-theme="light"] .arc-style-card { background: var(--glass-2); border-color: var(--glass-border); }
:root[data-theme="light"] .arc-style-card.arc-active { background: var(--purple-dim); border-color: rgba(107,86,220,.35); }
:root[data-theme="light"] .arc-seg-btn { color: var(--muted); border-color: var(--glass-border); }
:root[data-theme="light"] .arc-seg-btn:hover { border-color: rgba(107,86,220,.35); color: var(--purple); }

/* ================================================================
   3D — PANEL C: MATERIALES & TEXTURAS PBR
================================================================ */

/* Triple panel layout (A + B + C) */
.triple-panel-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  align-items: start;
}
@media (max-width: 1280px) {
  .triple-panel-layout { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .triple-panel-layout { grid-template-columns: 1fr; }
}

/* Panel C badge */
.panel-badge-c {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
}

/* ── Material family pills ──────────────────────────────────── */
.mat-family-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.mat-family-btn {
  padding: .38rem .7rem;
  border-radius: 20px;
  border: 1.5px solid rgba(255,255,255,0.12);
  background: transparent;
  color: var(--txt);
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.mat-family-btn:hover { border-color: rgba(16,185,129,0.5); background: rgba(16,185,129,0.07); }
.mat-family-btn.active { font-weight: 700; }

/* ── Material specific cards ────────────────────────────────── */
.mat-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .4rem;
}
.mat-card {
  padding: .55rem .7rem;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: var(--glass-1);
  color: var(--txt);
  font-size: .78rem;
  cursor: pointer;
  text-align: left;
  transition: all .15s;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.mat-card:hover { border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.05); }
.mat-card.active { border-color: #10b981; background: rgba(16,185,129,0.12); }
.mat-card-label { font-weight: 700; font-size: .8rem; }
.mat-card-pbr {
  font-size: .65rem;
  color: var(--muted);
  font-family: var(--font-sans);
  line-height: 1.3;
}
.mat-card.active .mat-card-pbr { color: rgba(110,231,183,0.7); }

/* Custom description input */
.mat-custom-input { font-size: .82rem !important; padding: .55rem .8rem !important; }

/* ── Map type chips ─────────────────────────────────────────── */
.mat-map-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: .4rem;
}
.mat-map-chip {
  padding: .5rem .65rem;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--txt);
  font-size: .75rem;
  cursor: pointer;
  text-align: left;
  transition: all .15s;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.mat-map-chip:hover { border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.05); }
.mat-map-chip.active { border-color: #10b981; background: rgba(16,185,129,0.12); }
.mat-map-icon { font-size: 1rem; }
.mat-map-name { font-weight: 700; font-size: .78rem; }
.mat-map-desc { font-size: .68rem; color: var(--muted); }
.mat-map-chip.active .mat-map-desc { color: rgba(110,231,183,0.6); }

/* ── Settings row ───────────────────────────────────────────── */
.mat-settings-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.mat-settings-col { /* inherits cfg-group */ }

/* ── Prompt output cards ────────────────────────────────────── */
.mat-prompt-cards { display: flex; flex-direction: column; gap: .65rem; }
.mat-prompt-card {
  background: rgba(16,185,129,0.04);
  border: 1px solid rgba(16,185,129,0.2);
  border-radius: 10px;
  padding: .85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.mat-prompt-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.mat-prompt-icon { font-size: 1rem; }
.mat-prompt-map  { font-size: .8rem; font-weight: 700; color: #6ee7b7; }
.mat-prompt-pbr  {
  font-size: .65rem;
  font-family: var(--font-sans);
  color: rgba(110,231,183,0.55);
  background: rgba(0,0,0,0.2);
  padding: .1rem .4rem;
  border-radius: 4px;
  margin-left: auto;
}
.mat-prompt-text {
  font-size: .78rem;
  font-family: var(--font-sans);
  color: var(--txt);
  line-height: 1.5;
  word-break: break-all;
  background: rgba(0,0,0,0.15);
  border-radius: 6px;
  padding: .5rem .65rem;
}
.mat-copy-btn { align-self: flex-end; }

/* ── Light mode overrides ───────────────────────────────────── */
:root[data-theme="light"] .mat-family-btn { border-color: var(--glass-border); color: var(--txt2); }
:root[data-theme="light"] .mat-family-btn:hover { border-color: rgba(16,185,129,.45); background: rgba(16,185,129,.05); }
:root[data-theme="light"] .mat-card { background: var(--glass-2); border-color: var(--glass-border); }
:root[data-theme="light"] .mat-card:hover { border-color: rgba(16,185,129,.4); }
:root[data-theme="light"] .mat-card.active { border-color: rgba(16,185,129,.5); background: rgba(16,185,129,.10); }
:root[data-theme="light"] .mat-map-chip { border-color: var(--glass-border); }
:root[data-theme="light"] .mat-map-chip.active { border-color: rgba(16,185,129,.5); background: rgba(16,185,129,.10); }
:root[data-theme="light"] .mat-prompt-card { background: rgba(16,185,129,.04); border-color: rgba(16,185,129,.22); }
:root[data-theme="light"] .mat-prompt-text { background: var(--glass-1); }

/* ── Landing unified card sections ─────────────────────────── */
.landing-section-block { margin-bottom: 1rem; border-top: 1px solid var(--border, rgba(255,255,255,0.08)); padding-top: .75rem; }
.landing-section-block:first-child { border-top: none; padding-top: 0; }
.landing-section-title { font-size: .82rem; font-weight: 600; color: var(--txt); margin-bottom: .4rem; }
.landing-section-desc { font-size: .72rem; font-weight: 400; color: var(--muted); margin-left: .4rem; }
.landing-section-comps { padding-left: .25rem; }

/* ── Platform / Tech selector ───────────────────────────────── */
/* ── Platform tabs ──────────────────────────────────────────── */
.platform-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: .6rem;
}
.platform-tab-btn {
  padding: 5px 13px;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: var(--glass-1);
  color: var(--muted);
  transition: var(--transition);
  white-space: nowrap;
  letter-spacing: .01em;
}
.platform-tab-btn:hover {
  border-color: rgba(168,85,247,.35);
  color: var(--txt);
  background: var(--glass-2);
}
.platform-tab-btn.active {
  background: var(--purple-dim);
  border-color: rgba(168,85,247,.40);
  color: var(--neon-purple);
  box-shadow: 0 0 12px rgba(168,85,247,.15);
}

.platform-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.platform-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: .4rem .75rem;
  border-radius: 7px;
  border: 1px solid var(--glass-border);
  background: var(--glass-1);
  color: var(--txt2);
  font-family: var(--font-sans);
  font-size: .78rem;
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: left;
  width: 100%;
}
.platform-btn:hover { border-color: rgba(168,85,247,.30); background: var(--glass-2); color: var(--txt); }
.platform-btn.active { border-color: rgba(168,85,247,.42); background: var(--purple-dim); color: var(--neon-purple); }
.platform-label { flex: 1; font-weight: 500; }
.platform-badge {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(168,85,247,.20);
  color: var(--purple-l);
  letter-spacing: 0.3px;
  white-space: nowrap;
  text-transform: uppercase;
}
.platform-badge.code {
  background: rgba(34,197,94,0.15);
  color: #4ade80;
}
:root[data-theme="light"] .platform-badge { background: rgba(168,85,247,.12); color: var(--purple); }
:root[data-theme="light"] .platform-badge.code { background: rgba(22,163,74,0.1); color: #16a34a; }

/* ── UI Libraries panel (animated reveal) ──────────────────── */
.ui-libs-panel {
  animation: uiLibsSlideDown 0.2s ease forwards;
  overflow: hidden;
}
@keyframes uiLibsSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ui-libs-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: .85rem;
  margin-bottom: .45rem;
  padding-top: .7rem;
  border-top: 1px solid var(--glass-border);
}
.ui-libs-title {
  font-size: .7rem;
  font-weight: 700;
  color: var(--txt2);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ui-libs-badge {
  font-size: .65rem;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--glass-2);
  color: var(--muted);
  font-weight: 500;
}

/* ── SEO selector chips ─────────────────────────────────────── */
.seo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.seo-chip {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--txt);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.seo-chip:hover { border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.05); }
.seo-chip.active {
  border-color: #22c55e;
  background: rgba(34,197,94,0.12);
  color: #4ade80;
}
:root[data-theme="light"] .seo-chip { border-color: rgba(0,0,0,0.12); color: #333; }
:root[data-theme="light"] .seo-chip:hover { border-color: rgba(22,163,74,0.4); background: rgba(22,163,74,0.05); }
:root[data-theme="light"] .seo-chip.active { border-color: #16a34a; background: rgba(22,163,74,0.1); color: #15803d; }

/* Sección auto-SEO */
.seo-auto-section {
  background: rgba(34,197,94,0.06);
  border: 1px solid rgba(34,197,94,0.2);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.seo-auto-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.seo-auto-icon { font-size: 14px; }
.seo-auto-title {
  font-size: 12px;
  font-weight: 600;
  color: #4ade80;
}
:root[data-theme="light"] .seo-auto-title { color: #16a34a; }
.seo-auto-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.seo-auto-badge {
  display: inline-block;
  font-size: 10.5px;
  color: var(--muted);
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.15);
  border-radius: 14px;
  padding: 3px 9px;
}
.seo-advanced-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  padding-top: 4px;
}

/* Modelo recomendado en sidebar */
.rec-model-card {
  background: var(--purple-dim);
  border: 1px solid rgba(168,85,247,.30);
  border-radius: 10px;
  padding: 12px 14px;
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
}
.rec-model-name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--neon-purple);
  margin-bottom: 5px;
}
.rec-model-reason {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--muted);
  line-height: 1.55;
}

.rec-model-card + .rec-model-card {
  margin-top: 8px;
}
.rec-model-magnific {
  background: rgba(236,72,153,.08);
  border-color: rgba(236,72,153,.30);
}
.rec-model-magnific .rec-model-name {
  color: #ec4899;
}
.rec-model-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  color: #ec4899;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
  opacity: .8;
}

/* ── Formatted Prompt Display ──────────────────────────────── */
.formatted-prompt {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 4px;
  align-items: flex-start;
  line-height: 1.6;
}

.prompt-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 8px 4px 4px;
  border-radius: 8px;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  margin: 1px 0;
}

.prompt-group-label {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.80;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--glass-2);
  white-space: nowrap;
  flex-shrink: 0;
}

.prompt-token {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--txt);
  line-height: 1.5;
  display: inline-flex;
  align-items: center;
}

.prompt-token:not(:last-child)::after {
  content: ',';
  color: rgba(255,255,255,0.25);
  margin-right: 3px;
}

/* Between groups: add visual separator */
.prompt-group + .prompt-group::before {
  display: none;
}

/* Negative group special style */
.prompt-group:has(.prompt-group-label[style*="#ef4444"]) {
  border-color: rgba(239,68,68,0.2);
  background: rgba(239,68,68,0.04);
}

/* Light theme overrides */
:root[data-theme="light"] .prompt-group {
  background: var(--glass-1);
  border-color: var(--glass-border);
}
:root[data-theme="light"] .prompt-group-label {
  background: var(--glass-2);
}
:root[data-theme="light"] .prompt-token {
  color: var(--txt);
}
:root[data-theme="light"] .prompt-token:not(:last-child)::after {
  color: rgba(0,0,0,0.22);
}
:root[data-theme="light"] .prompt-group:has(.prompt-group-label[style*="#ef4444"]) {
  background: rgba(224,128,128,.04);
  border-color: rgba(224,128,128,.15);
}

/* prompt-text stub (used in modal) */
.prompt-text {
  min-height: 40px;
}

/* ================================================================
   SUBJECT BUILDER
================================================================ */
.subject-builder-wrap {
  margin: 0 1.5rem 0.5rem;
  border-radius: var(--r);
  overflow: hidden;
}

/* Toggle button */
.sb-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--r);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
}
.sb-toggle:hover {
  border-color: var(--purple);
  color: var(--purple-l);
  background: var(--purple-dim);
}
.sb-toggle.open {
  border-radius: var(--r) var(--r) 0 0;
  border-color: var(--purple);
  color: var(--purple-l);
  background: var(--purple-dim);
  border-bottom-color: transparent;
}
.sb-toggle-icon { font-size: 15px; }
.sb-toggle-arrow { margin-left: auto; font-size: 10px; opacity: .7; }

/* Body */
.sb-body {
  background: var(--glass-1);
  border: 1px solid var(--purple);
  border-top: none;
  border-radius: 0 0 var(--r) var(--r);
  padding: 12px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Group */
.sb-group {}
.sb-group-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}

/* Pills */
.sb-text-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: var(--glass-1);
  color: var(--txt);
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  outline: none;
  transition: var(--transition);
  box-sizing: border-box;
}
.sb-text-input::placeholder {
  color: var(--txt-muted);
  opacity: 0.6;
}
.sb-text-input:focus {
  border-color: var(--purple);
  background: var(--glass-2);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--purple) 20%, transparent);
}

.sb-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sb-pill {
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  background: var(--glass-1);
  color: var(--txt);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.sb-pill:hover {
  border-color: var(--purple);
  color: var(--purple-l);
}
.sb-pill.active {
  border-color: var(--purple);
  background: var(--purple-dim);
  color: var(--purple-l);
  font-weight: 700;
}

/* Custom input */
.sb-custom-input {
  width: 100%;
  padding: 8px 12px;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--rs);
  color: var(--txt);
  font-size: 13px;
  transition: var(--transition);
}
.sb-custom-input:focus {
  outline: none;
  border-color: var(--purple);
}

/* Clear row */
.sb-clear-row {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}
.sb-clear-btn {
  padding: 5px 12px;
  border-radius: var(--rs);
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  transition: var(--transition);
}
.sb-clear-btn:hover {
  border-color: var(--red);
  color: var(--red);
}

/* Light theme overrides */
:root[data-theme="light"] .sb-toggle {
  background: var(--glass-1);
  border-color: var(--glass-border);
  color: var(--muted);
}
:root[data-theme="light"] .sb-toggle.open,
:root[data-theme="light"] .sb-toggle:hover {
  background: rgba(168,85,247,.07);
  border-color: var(--purple);
  color: var(--purple);
}
:root[data-theme="light"] .sb-body {
  background: var(--glass-1);
}
:root[data-theme="light"] .sb-pill {
  background: var(--glass-2);
  border-color: var(--glass-border);
  color: var(--txt);
}
:root[data-theme="light"] .sb-pill.active {
  background: rgba(168,85,247,.10);
  color: var(--purple);
  border-color: var(--purple);
}

/* ================================================================
   TARGET TOOL SYSTEM
================================================================ */

/* Sidebar section hint */
.sb-tool-hint {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 10px;
  line-height: 1.5;
}

/* Tool cards grid */
.tool-select {
  width: 100%;
  background: var(--glass-bg);
  border: 1px solid rgba(168,85,247,.25);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 9px 12px;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a855f7' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  transition: border-color .2s, box-shadow .2s;
}
.tool-select:hover { border-color: rgba(168,85,247,.5); }
.tool-select:focus { border-color: var(--neon-purple); box-shadow: 0 0 0 2px rgba(168,85,247,.15); }
.tool-select option { background: #1a1025; color: var(--text-primary); }

.tool-select-info {
  margin-top: 8px;
  background: rgba(0,0,0,.2);
  border: 1px solid color-mix(in srgb, var(--tc, #a855f7) 30%, transparent);
  border-radius: 8px;
  padding: 10px 12px;
  animation: fadeIn .15s ease;
}
.tool-select-info-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.tool-select-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 1px;
}
.tool-select-desc {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.5;
}
.tool-select-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.tool-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.tool-card {
  padding: 10px 12px;
  border-radius: var(--rs);
  border: 1px solid var(--glass-border);
  background: var(--glass-1);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
}
.tool-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--tc, var(--purple));
  opacity: 0;
  transition: opacity .2s;
}
.tool-card:hover {
  border-color: var(--tc, rgba(168,85,247,.40));
  background: var(--glass-2);
}
.tool-card:hover::before { opacity: 1; }
.tool-card.active {
  border-color: var(--tc, rgba(168,85,247,.40));
  background: color-mix(in srgb, var(--tc, #9b8de8) 10%, var(--glass-1));
}
.tool-card.active::before { opacity: 1; }

.tool-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.tool-card-icon { font-size: 14px; }
.tool-card-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--txt);
  flex: 1;
}
.tool-card-badge {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: .05em;
  white-space: nowrap;
}
.tool-card-desc {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: 5px;
}
.tool-card-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 9px;
  color: var(--muted);
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  padding: 2px 6px;
  margin: 2px 2px 0 0;
}
.tool-card.active .tool-card-tag {
  border-color: color-mix(in srgb, var(--tc,var(--purple)) 40%, transparent);
  color: color-mix(in srgb, var(--tc,var(--purple)) 80%, var(--txt));
}

/* ── Prompt bar adaptado ─────────────────────────────────────── */
.tool-copy-row {
  gap: 6px;
}

.tool-copy-btn {
  background: color-mix(in srgb, var(--tool-color, var(--purple)) 15%, var(--glass-1)) !important;
  border-color: var(--tool-color, var(--purple)) !important;
  color: var(--tool-color, var(--purple)) !important;
  font-weight: 700;
}
.tool-copy-btn:hover {
  background: color-mix(in srgb, var(--tool-color, var(--purple)) 25%, var(--glass-1)) !important;
}
.tool-copy-btn.copied {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: #fff !important;
}

.neg-copy-btn {
  background: rgba(239,68,68,.12) !important;
  border-color: #ef4444 !important;
  color: #ef4444 !important;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: var(--rs);
  border: 1px solid;
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition);
  white-space: nowrap;
}
.neg-copy-btn:hover {
  background: rgba(239,68,68,.22) !important;
}
.neg-copy-btn.copied {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: #fff !important;
}

/* ── Prompt text adaptado ─────────────────────────────────────── */
.tool-prompt-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tool-prompt-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  width: fit-content;
  letter-spacing: .03em;
}
.tool-prompt-text {
  font-size: 13px;
  color: var(--txt);
  line-height: 1.55;
  word-break: break-word;
}
.tool-prompt-pre {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--txt);
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--rs);
  padding: 8px 10px;
  margin: 0;
  line-height: 1.6;
}
.tool-prompt-neg {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
  padding: 4px 8px;
  background: rgba(239,68,68,.06);
  border: 1px solid rgba(239,68,68,.18);
  border-radius: var(--rs);
}
.tool-neg-label {
  font-weight: 700;
  margin-right: 4px;
}

/* Sidebar tool section highlight */
.sb-tool-section .sb-section-header {
  background: linear-gradient(90deg, rgba(168,85,247,.15), transparent);
}

/* Light theme */
:root[data-theme="light"] .tool-card {
  background: var(--glass-2);
  border-color: var(--glass-border);
}
:root[data-theme="light"] .tool-card:hover,
:root[data-theme="light"] .tool-card.active {
  background: color-mix(in srgb, var(--tc,#9b8de8) 8%, var(--glass-2));
}
:root[data-theme="light"] .tool-card-tag {
  background: var(--glass-1);
  border-color: var(--glass-border);
  color: var(--muted);
}
:root[data-theme="light"] .tool-prompt-pre {
  background: var(--glass-1);
  border-color: var(--glass-border);
}

/* ================================================================
   SUBJECT BUILDER & ENVIRONMENT BUILDER — NUEVOS MODOS
================================================================ */

/* Intro section de modo */
.subject-mode-intro .section-header { margin-bottom: 1rem; }

/* Category grid */
.subj-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  padding: 0 0 0.5rem;
}
.subj-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--r);
  cursor: pointer;
  transition: var(--transition);
  color: var(--txt);
  text-align: center;
}
.subj-cat-card:hover {
  border-color: var(--purple);
  background: var(--glass-2);
}
.subj-cat-card.active {
  border-color: var(--purple);
  background: var(--purple-dim);
  box-shadow: 0 0 0 2px rgba(168,85,247,.25);
}
.subj-cat-icon { font-size: 22px; }
.subj-cat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--txt);
  line-height: 1.3;
}

/* Subgroup header between subject grids */
.subj-subgroup-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 12px 0 4px;
  border-top: 1px solid var(--glass-border);
  margin-top: 8px;
}
.subj-subgroup-header:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

/* Subject / Env cards grid */
.subj-subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.subj-subject-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--r);
  cursor: pointer;
  transition: var(--transition);
  color: var(--txt);
  text-align: left;
}
.subj-subject-card:hover {
  border-color: var(--purple);
  background: var(--glass-2);
}
.subj-subject-card.active {
  border-color: var(--purple);
  background: var(--purple-dim);
  box-shadow: 0 0 0 2px rgba(168,85,247,.2);
}
.subj-subject-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--txt);
}
.subj-subject-desc {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}

/* Light theme overrides for new components */
:root[data-theme="light"] .subj-cat-card,
:root[data-theme="light"] .subj-subject-card {
  background: var(--glass-2);
  border-color: var(--glass-border);
  color: var(--txt);
}
:root[data-theme="light"] .subj-cat-card:hover,
:root[data-theme="light"] .subj-subject-card:hover {
  background: var(--glass-3);
  border-color: rgba(107,86,220,.30);
}
:root[data-theme="light"] .subj-cat-card.active,
:root[data-theme="light"] .subj-subject-card.active {
  background: var(--purple-dim);
  border-color: rgba(107,86,220,.35);
}

/* Responsive */
@media (max-width: 640px) {
  .subj-cat-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .subj-subject-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ================================================================
   VIDEO MODE — SELECTOR DE TIEMPOS (dentro del timeline)
================================================================ */

.tl-tiempos-selector {
  display: flex;
  gap: .5rem;
  padding: 0 1.5rem .75rem;
}

.tl-tiempo-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  padding: .55rem .9rem;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  min-width: 90px;
  text-align: center;
}
.tl-tiempo-btn:hover {
  border-color: var(--purple);
  background: var(--glass-2);
}
.tl-tiempo-btn.active {
  border-color: var(--purple);
  background: var(--purple-dim);
}
.tl-tiempo-num {
  font-size: .82rem;
  font-weight: 700;
  color: var(--txt);
}
.tl-tiempo-btn.active .tl-tiempo-num {
  color: var(--purple-l);
}
.tl-tiempo-desc {
  font-size: .68rem;
  color: var(--muted);
  line-height: 1.3;
}

/* Light mode overrides */
:root[data-theme="light"] .tl-tiempo-btn { background: var(--glass-1); border-color: rgba(0,0,0,0.12); }
:root[data-theme="light"] .tl-tiempo-btn:hover { background: var(--glass-2); border-color: var(--purple); }
:root[data-theme="light"] .tl-tiempo-btn.active { background: rgba(168,85,247,.10); border-color: var(--purple); }
:root[data-theme="light"] .tl-tiempo-num { color: #333; }
:root[data-theme="light"] .tl-tiempo-btn.active .tl-tiempo-num { color: var(--purple); }
:root[data-theme="light"] .tl-tiempo-desc { color: #666; }

/* ================================================================
   VIDEO MODE — (legacy kept for structure, now unused)
   Map legacy variables to the design system tokens
================================================================ */
.video-tiempos-grid, .video-lenguajes-slots, .video-lenguaje-slot {
  --text-primary:   var(--txt);
  --text-secondary: var(--muted);
  --accent:         var(--neon-purple);
  --accent-alpha:   var(--purple-dim);
  --card-bg:        var(--glass-1);
  --border:         var(--glass-border);
}

/* Selector de tiempos (standalone, unused) */
.video-tiempos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  padding: 0 1.5rem 1.5rem;
}

.video-tiempo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  padding: 1rem .75rem;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s;
  text-align: center;
}
.video-tiempo-card:hover {
  border-color: var(--accent);
  background: var(--card-hover);
  transform: translateY(-1px);
}
.video-tiempo-card.active {
  border-color: var(--accent);
  background: var(--accent-alpha);
}
.video-tiempo-num {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-primary);
}
.video-tiempo-card.active .video-tiempo-num {
  color: var(--accent);
}
.video-tiempo-desc {
  font-size: .72rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

/* Slots de lenguaje visual */
.video-lenguajes-slots {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0 1.5rem 1.5rem;
}

.video-lenguaje-slot {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.video-slot-label {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
  padding-left: .1rem;
}

.video-lenguaje-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .5rem;
}

.video-lenguaje-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  padding: .7rem .8rem;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s;
  text-align: left;
}
.video-lenguaje-card:hover {
  border-color: var(--accent);
  background: var(--card-hover);
  transform: translateY(-1px);
}
.video-lenguaje-card.active {
  border-color: var(--accent);
  background: var(--accent-alpha);
}
.vl-icon {
  font-size: 1.2rem;
}
.vl-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-primary);
}
.video-lenguaje-card.active .vl-label {
  color: var(--accent);
}
.vl-desc {
  font-size: .7rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

/* Combinaciones sugeridas */
.video-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .6rem;
  padding: 0 1.5rem 1.5rem;
}

.video-preset-card {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .75rem 1rem;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color .2s, background .2s, transform .15s;
}
.video-preset-card:hover {
  border-color: var(--accent);
  background: var(--card-hover);
  transform: translateY(-1px);
}
.video-preset-card.active {
  border-color: var(--accent);
  background: var(--accent-alpha);
}
.vp-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-primary);
}
.video-preset-card.active .vp-label {
  color: var(--accent);
}
.vp-desc {
  font-size: .7rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

@media (max-width: 640px) {
  .video-tiempos-grid { grid-template-columns: 1fr; }
  .video-lenguaje-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .video-preset-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   WEB SELECTION SUMMARY
================================================================ */
.sb-web-summary .wsm-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Group label (SEO, Extras, Estilo global) */
.wsm-group-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin: 10px 0 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--glass-border);
}

/* Each row (tipo de proyecto, plataforma, style field) */
.wsm-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.wsm-row:last-child { border-bottom: none; }
.wsm-row.wsm-sub { padding: 4px 0 4px 8px; }

.wsm-cat {
  font-size: .7rem;
  color: var(--muted);
  font-weight: 600;
}

.wsm-val {
  font-size: .75rem;
  font-weight: 600;
  padding: 2px 0 0 20px;
}
.wsm-selected {
  color: #34d399; /* green — selected */
}
.wsm-secondary {
  color: var(--muted);
  font-weight: 400;
}
.wsm-pending {
  color: var(--muted2);
  font-style: italic;
  font-weight: 400;
}

/* Bullet list format for multi-segment values (video timeline, arc) */
.wsm-bullet-val {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wsm-bullet-item {
  font-size: .72rem;
  color: #34d399;
  font-weight: 500;
  padding-left: 4px;
}
.wsm-bullet-label {
  color: var(--muted);
  font-weight: 600;
  font-size: .68rem;
}

/* Subgroup inside SEO / Extras */
.wsm-subgroup {
  margin-bottom: 6px;
}
.wsm-subgroup-label {
  font-size: .65rem;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 600;
}

/* Tag chips */
.wsm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.wsm-tag {
  font-size: .62rem;
  padding: 2px 7px;
  border-radius: 20px;
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid transparent;
}
/* Selected — green tint */
.wsm-tag-sel {
  background: rgba(52, 211, 153, .15);
  color: #34d399;
  border-color: rgba(52, 211, 153, .3);
}
/* Pending — muted */
.wsm-tag-pen {
  background: rgba(255,255,255,.04);
  color: var(--muted);
  border-color: var(--glass-border);
}

/* ================================================================
   WCAG 2.1 AA — ACCESSIBILITY FIXES
   Raises minimum font sizes and enforces contrast floors.
   All sizes use px floors (not em) so user browser zoom works.
================================================================ */

/* ── Minimum font size: nothing interactive or readable below 12px ── */
.sb-section-title,
.card-label,
.card-hint,
.vc-hint,
.ref-card-desc,
.sidebar-toggle,
.mode-tab { font-size: max(12px, 0.75rem); }

/* Labels/hints at 11px → 12px */
.sel-badge,
.cim-tab { font-size: max(12px, 0.75rem); }

/* Critical: 9px elements → 11px minimum */
.sel-label,
.cim-tab-hint { font-size: max(11px, 0.69rem); }

/* wsm-tag was .62rem (~9.9px) */
.wsm-tag { font-size: max(11px, 0.69rem); }

/* ── Contrast: ensure --muted is legible on glass surfaces ──── */
/* Dark mode: boost muted text on very dark glass backgrounds */
:root[data-theme="dark"] .card-hint,
:root[data-theme="dark"] .vc-hint,
:root[data-theme="dark"] .ref-card-desc,
:root[data-theme="dark"] .wsm-tag-pen { color: var(--muted); } /* already boosted in :root */

/* ── Focus indicators: ensure 3px offset for keyboard nav ──── */
:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
}

/* ── Sidebar toggle: color contrast fix ─────────────────────── */
.sidebar-toggle { color: var(--txt2); }
.sidebar-toggle:hover { color: var(--neon-purple); }

/* ── Mode-tab inactive: readable at rest ───────────────────── */
.mode-tab { color: var(--txt2); }
.mode-tab.active { color: var(--neon-purple); }

/* ================================================================
   USER BUTTON & AVATAR
================================================================ */
.user-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--glass-border-strong);
  background: linear-gradient(135deg, rgba(168,85,247,.30), rgba(6,182,212,.25));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
  position: relative;
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  box-shadow: 0 0 0 2px rgba(168,85,247,.12), var(--shadow-sm);
}

.user-btn:hover {
  border-color: var(--neon-purple);
  box-shadow: 0 0 0 3px rgba(168,85,247,.20), var(--shadow-glow-purple);
  transform: scale(1.05);
}

.user-avatar {
  font-family: 'Orbitron', var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--neon-purple);
  line-height: 1;
  letter-spacing: 0;
}

/* ================================================================
   USER PANEL OVERLAY + PANEL
================================================================ */
.user-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: none;
  align-items: flex-start;
  justify-content: flex-end;
  padding: calc(var(--header-h) + 8px) 16px 20px;
  pointer-events: none;
}

.user-panel-overlay.open {
  display: flex;
  pointer-events: all;
}

/* Backdrop click target — invisible full-screen layer */
.user-panel-overlay::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
}

.user-panel {
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - var(--header-h) - 28px);
  background: rgba(10,8,28,.90);
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  border: 1px solid var(--glass-border-strong);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg),
              0 0 0 1px rgba(168,85,247,.15),
              0 0 60px rgba(168,85,247,.18),
              inset 0 1px 0 rgba(255,255,255,.07);
  transform: translateY(-8px) scale(.97);
  opacity: 0;
  transition: transform .25s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}

.user-panel-overlay.open .user-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

:root[data-theme="light"] .user-panel {
  background: rgba(248,246,255,.96);
  box-shadow: var(--shadow-lg),
              0 0 0 1px rgba(168,85,247,.22),
              0 0 50px rgba(168,85,247,.12),
              inset 0 1px 0 rgba(255,255,255,.85);
}

/* ── Panel header ──────────────────────────────────────────── */
.up-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}

.up-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.up-avatar-lg {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--glass-border-strong);
  background: linear-gradient(135deg, rgba(168,85,247,.35), rgba(6,182,212,.28));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--neon-purple);
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(168,85,247,.25);
}

.up-user-info { min-width: 0; }

.up-username {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.up-email {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.up-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
  flex-shrink: 0;
}
.up-close:hover { background: var(--glass-2); color: var(--txt); }

/* ── Plan bar ──────────────────────────────────────────────── */
.up-plan-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 18px;
  background: rgba(168,85,247,.07);
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}

.up-plan-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.up-plan-badge {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 6px;
  padding: 3px 7px;
  text-transform: uppercase;
}

.up-plan-free {
  background: rgba(255,255,255,.10);
  color: var(--muted);
  border: 1px solid var(--glass-border);
}

.up-plan-pro {
  background: linear-gradient(135deg, rgba(168,85,247,.35), rgba(6,182,212,.30));
  color: #fff;
  border: 1px solid rgba(168,85,247,.55);
  box-shadow: 0 0 10px rgba(168,85,247,.25);
}

.up-plan-text {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--muted);
}

.up-upgrade-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: linear-gradient(135deg, rgba(168,85,247,.28), rgba(6,182,212,.20));
  border: 1px solid rgba(168,85,247,.45);
  border-radius: 8px;
  color: var(--neon-purple);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}

.up-upgrade-btn:hover {
  background: linear-gradient(135deg, rgba(168,85,247,.42), rgba(6,182,212,.32));
  border-color: rgba(168,85,247,.70);
  box-shadow: var(--shadow-glow-purple);
  transform: translateY(-1px);
}

/* ── Tabs ──────────────────────────────────────────────────── */
.up-tabs {
  display: flex;
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.up-tabs::-webkit-scrollbar { display: none; }

.up-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 10px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.up-tab.active {
  color: var(--neon-purple);
  border-bottom-color: var(--neon-purple);
  background: rgba(168,85,247,.05);
}

.up-tab:hover:not(.active) {
  color: var(--txt);
  background: var(--glass-1);
}

/* ── Body / tab contents ───────────────────────────────────── */
.up-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--glass-border) transparent;
}

.up-tab-content {
  display: none;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px;
  animation: fadeIn .18s ease;
}

.up-tab-content.active { display: flex; }

/* ── Form fields ───────────────────────────────────────────── */
.up-field-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.up-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--neon-purple);
}

.up-input {
  width: 100%;
  padding: 9px 12px;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--rs);
  color: var(--txt);
  font-family: var(--font-sans);
  font-size: 13px;
  outline: none;
  transition: var(--transition);
}

.up-input:focus {
  border-color: rgba(168,85,247,.50);
  background: var(--glass-2);
  box-shadow: 0 0 0 2px rgba(168,85,247,.10);
}

.up-input[readonly] {
  opacity: .55;
  cursor: not-allowed;
}

.up-textarea {
  min-height: 72px;
  resize: vertical;
  font-size: 12px;
  line-height: 1.6;
}

.up-field-hint {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--muted);
  opacity: .7;
}

.up-save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  background: rgba(168,85,247,.18);
  border: 1px solid rgba(168,85,247,.40);
  border-radius: var(--rs);
  color: var(--neon-purple);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  width: 100%;
  margin-top: 4px;
}

.up-save-btn:hover {
  background: rgba(168,85,247,.28);
  border-color: rgba(168,85,247,.65);
  box-shadow: var(--shadow-glow-purple);
  transform: translateY(-1px);
}

/* ── Presets tab ───────────────────────────────────────────── */
.up-presets-stats {
  display: flex;
  gap: 12px;
}

.up-stat {
  flex: 1;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--r);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.up-stat-n {
  font-family: 'Orbitron', var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  color: var(--neon-purple);
  line-height: 1;
}

.up-stat-l {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--muted);
}

.up-presets-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 60px;
}

.up-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
  text-align: center;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.6;
}

.up-presets-actions {
  display: flex;
  gap: 8px;
}

.up-action-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--rs);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.up-action-btn:hover {
  background: var(--glass-2);
  border-color: rgba(168,85,247,.30);
  color: var(--txt);
}

.up-action-btn--danger:hover {
  border-color: rgba(248,113,113,.40);
  color: var(--red);
  background: var(--red-dim);
}

/* Preset item in user panel */
.up-preset-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--rs);
  transition: var(--transition);
}

.up-preset-item:hover { border-color: rgba(168,85,247,.30); background: var(--glass-2); }

.up-preset-name {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.up-preset-name:hover { color: var(--neon-purple); }

.up-preset-del {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 5px;
  transition: var(--transition);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.up-preset-del:hover { color: var(--red); background: var(--red-dim); }

/* ── Preferences tab ───────────────────────────────────────── */
.up-pref-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--glass-border);
}
.up-pref-section:last-of-type { border-bottom: none; padding-bottom: 0; }

.up-pref-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--neon-purple);
}

.up-pref-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.up-pref-chip {
  padding: 5px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: var(--glass-1);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.up-pref-chip:hover { border-color: rgba(168,85,247,.35); color: var(--txt); }
.up-pref-chip.active {
  background: var(--purple-dim);
  border-color: rgba(168,85,247,.45);
  color: var(--neon-purple);
}

/* Toggle rows */
.up-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}

.up-toggle-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.up-toggle-name {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--txt);
}

.up-toggle-desc {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--muted);
  line-height: 1.4;
}

.up-toggle {
  width: 38px;
  height: 22px;
  border-radius: 11px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.08);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background .2s, border-color .2s;
}

.up-toggle.on {
  background: rgba(168,85,247,.30);
  border-color: rgba(168,85,247,.55);
  box-shadow: 0 0 8px rgba(168,85,247,.20);
}

.up-toggle-dot {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  transition: transform .22s cubic-bezier(.4,0,.2,1), background .2s;
}

.up-toggle.on .up-toggle-dot {
  background: var(--neon-purple);
  transform: translateX(16px);
}

/* ── Plan tab ──────────────────────────────────────────────── */
.up-plan-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.up-plan-card {
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--r);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.up-plan-card--current {
  opacity: .75;
}

.up-plan-card--pro {
  border-color: rgba(168,85,247,.45);
  background: rgba(168,85,247,.07);
  box-shadow: 0 0 0 1px rgba(168,85,247,.15), 0 0 30px rgba(168,85,247,.10);
}

.up-plan-card-badge {
  display: inline-flex;
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  background: rgba(255,255,255,.10);
  color: var(--muted);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  padding: 2px 7px;
}

.up-plan-card-badge--pro {
  background: linear-gradient(135deg, rgba(168,85,247,.35), rgba(6,182,212,.25));
  color: #e0d0ff;
  border-color: rgba(168,85,247,.45);
}

.up-plan-card-name {
  font-family: 'Orbitron', var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--txt);
  letter-spacing: 1px;
}

.up-plan-card-price {
  font-family: 'Orbitron', var(--font-sans);
  font-size: 26px;
  font-weight: 900;
  color: var(--neon-purple);
  line-height: 1;
}
.up-plan-card-price span {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  font-family: var(--font-sans);
  letter-spacing: 0;
}

.up-plan-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.up-plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--txt2);
  line-height: 1.4;
}

.up-plan-features li svg {
  flex-shrink: 0;
  color: var(--neon-green);
  margin-top: 1px;
}

.up-feature-off { opacity: .4; }
.up-feature-off svg { color: var(--muted); }

.up-upgrade-btn--full {
  margin-top: 4px;
  width: 100%;
  justify-content: center;
  padding: 8px 12px;
  font-size: 12px;
  background: linear-gradient(135deg, rgba(168,85,247,.35), rgba(6,182,212,.25));
  border: 1px solid rgba(168,85,247,.55);
  border-radius: var(--rs);
  color: #fff;
}

.up-upgrade-btn--full:hover {
  background: linear-gradient(135deg, rgba(168,85,247,.55), rgba(6,182,212,.40));
  box-shadow: var(--shadow-glow-purple);
}

.up-usage-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}

.up-usage-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--muted);
}

.up-usage-labels strong { color: var(--neon-purple); }

.up-usage-track {
  width: 100%;
  height: 6px;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: 99px;
  overflow: hidden;
}

.up-usage-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--neon-purple), var(--neon-cyan));
  border-radius: 99px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}

/* ── Footer ────────────────────────────────────────────────── */
.up-footer {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 10px 18px;
  border-top: 1px solid var(--glass-border);
  flex-shrink: 0;
  background: rgba(0,0,0,.12);
}

.up-footer-link {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--muted);
  text-decoration: none;
  padding: 3px 7px;
  border-radius: 5px;
  transition: var(--transition-fast);
}
.up-footer-link:hover { color: var(--txt); background: var(--glass-1); }

.up-logout-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  background: transparent;
  border: 1px solid rgba(248,113,113,.25);
  border-radius: var(--rs);
  color: #e8a0a0;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.up-logout-btn:hover {
  background: var(--red-dim);
  border-color: rgba(248,113,113,.50);
  color: var(--red);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .up-plan-cards { grid-template-columns: 1fr; }
  .user-panel-overlay { padding: calc(var(--header-h) + 4px) 8px 12px; }
}

/* ================================================================
   MOBILE RESPONSIVE — COMPREHENSIVE
================================================================ */

/* ── Tablet (≤768px) ────────────────────────────────────────── */
@media (max-width: 768px) {
  .app-section { padding: 14px; }
  .dual-panel-layout { grid-template-columns: 1fr; gap: 1rem; padding: 0.75rem; }
  .triple-panel-layout { grid-template-columns: 1fr !important; }
  .mat-cards-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .mat-map-chips { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .mat-settings-row { grid-template-columns: 1fr; }
  .styles-grid.lg { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ── Mobile header: 2-row layout + full fixes (≤600px) ─────── */
@media (max-width: 600px) {
  /* Header 2 rows: logo+actions / tabs */
  :root { --header-h: 92px; }
  .site-header { height: auto; }
  .header-inner {
    flex-wrap: wrap;
    padding: 0 10px;
    height: auto;
    align-items: stretch;
  }
  .logo {
    order: 1;
    height: 48px;
    display: flex;
    align-items: center;
  }
  .logo img { height: 26px !important; }
  .header-actions {
    order: 2;
    margin-left: auto;
    height: 48px;
    align-items: center;
    gap: 6px;
  }
  /* Hide sidebar-toggle text, keep icon */
  .sidebar-toggle span[data-i18n] { display: none; }
  .sidebar-toggle { padding: 7px 9px; margin-left: 0; }

  /* Mode tabs: full-width 2nd row, horizontally scrollable */
  .mode-tabs {
    order: 3;
    width: 100%;
    flex: 0 0 100%;
    margin-left: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    border-top: 1px solid var(--glass-border);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 5px 8px;
    height: 44px;
    justify-content: flex-start;
    gap: 4px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .mode-tabs::-webkit-scrollbar { display: none; }
  .mode-tab {
    flex-shrink: 0;
    padding: 5px 10px;
    font-size: 11px;
    white-space: nowrap;
  }

  /* Main content area */
  .app-main { padding: 12px 10px 48px; gap: 16px; }
  .app-section { padding: 12px; }

  /* Style grids */
  .styles-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px; }
  .visual-cards { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .subj-cat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .subj-subject-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Typography */
  .section-title { font-size: 13px; }
  .sec-title { font-size: 14px; }
  .sec-desc { font-size: 12px; }

  /* Prevent iOS zoom on inputs (min 16px) */
  .text-input,
  .neg-textarea,
  .upm-name-input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea,
  select { font-size: 16px !important; }

  /* Chips */
  .chips-row { gap: 5px; }
  .chip { padding: 5px 11px; font-size: 10px; }
  .subcat-tabs { gap: 5px; }
  .subcat-tab { padding: 5px 11px; font-size: 10px; }

  /* Prompt modal: slide from bottom on mobile */
  .prompt-modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .prompt-modal {
    border-radius: 16px 16px 0 0;
    max-height: 92vh;
    max-width: 100%;
  }
  .prompt-modal-header { padding: 12px 14px; }
  .prompt-modal-title { font-size: 13px; }

  /* CIM modal */
  .cim-modal { max-height: 90vh; border-radius: 16px 16px 0 0; }
  .cim-overlay { align-items: flex-end; padding: 0; }

  /* UPM modal */
  .upm-modal { width: 100%; border-radius: 16px 16px 0 0; }
  .upm-overlay { align-items: flex-end; }

  /* Timeline times */
  .tl-tiempos-selector { padding: 0 0.5rem 0.5rem; gap: 0.3rem; }
  .tl-tiempo-btn { min-width: 70px; padding: 0.4rem 0.5rem; }

  /* User panel top padding adjustment */
  .user-panel-overlay { padding: calc(var(--header-h) + 4px) 8px 10px; }
}

/* ── Very small (≤400px) ────────────────────────────────────── */
@media (max-width: 400px) {
  .mode-tab { padding: 4px 8px; font-size: 10px; }
  .header-actions { gap: 4px; }
  .theme-toggle { width: 30px; height: 30px; }
  .app-section { padding: 10px; }
  .chip { padding: 4px 9px; font-size: 10px; }
  .styles-grid { gap: 5px; }
  .visual-cards { gap: 5px; }
}