/* WIZ STUDIO — Dark Theme & Grid Revamp */
:root{
  color-scheme: light dark;
  /* Dark mode (default quando nessuna preferenza) */
  --bg:#030814;
  --panel:#02060f;
  --panel-1:#040d1c;
  --panel-2:#051226;
  --panel-3:#071a33;
  --panel-4:#0a2442;
  --panel-5:#0d2d52;
  --scene-block-bg:#040f24;
  --scene-block-border:rgba(106,157,255,.24);
  --ink-1:#f5f6ff;
  --ink-2:#c5cce0;
  --ink-3:#8b94aa;
  --line-1:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.16);
  /* Palette coerente: 3 varianti blu/azzurro */
  --blue:#6a9dff;              /* Primary: bottoni, azioni principali */
  --blue-light:#8fc8ff;        /* Secondary: hover, focus leggeri */
  --cyan:#5fd5ff;              /* Accent: selezioni, evidenziazioni */
  --warn:#ffd37a;
  --red:#b13241;
  --red-strong:#8e2634;
  --red-soft:rgba(233,88,105,.45);
  --green-soft:rgba(90,214,183,.22);

  --page-max:2050px;
  --layout-left-fr:0.75;
  --layout-right-fr:0.25;
  --layout-gap:clamp(32px, 3vw, 50px);
  --layout-pad:clamp(20px, 4vw, 64px);
  --header-h:85px;
  --footer-h:69px;
  --safe-bottom:96px;

  --radius:18px;
  --shadow-sm:0 4px 12px rgba(2,6,18,.4);
  --scrollbar-thumb:rgba(106,157,255,.6);
  --scrollbar-track:rgba(6,14,30,.4);

  --grid-gap:16px;
  --chip-gap:16px;
  --card-min-h:120px;
  --chip-container-height:400px;
  --chip-max-rows:2;
  --inset-pad:14px;
  --card-container-max:var(--chip-container-height);
  --card-tag-row-gap:10px;
  --card-tag-row-height:24px;
  --card-tag-max-rows:1;
  --card-grid-row-height:var(--card-min-h);
  --card-grid-max-rows:2;
  --preview-column-max:calc(100vh - var(--header-h) - 60px);

  --dual-cards-fr:0.6fr;
  --dual-preview-min:320px;
  --dual-preview-fr:0.4fr;

  --dropdown-gap-min:16px;
  --dropdown-gap-max:50px;
  --dropdown-width-min:130px;
  --dropdown-width-max:180px;
  --dropdown-wide-max:180px;
  --control-max-width:180px;
  --db-width-min:90px;
  --db-width-max:102px;
  --db-gap:16px;

  --control-height:30px;
  --control-pad-x:10px;
  --control-radius:8px;
  --control-font-size:12.5px;

  --chip-pill-height:22px;
  --chip-pill-pad:8px;
  --chip-card-pad:10px;
  --chip-card-pad-scene:10px;
  --chip-card-gap-title-desc:8px;
  --chip-card-gap-desc-tags:8px;
  --chip-card-gap-tags-cta:8px;
  --chip-card-max-width:380px;

  --chip-shell-visible-height:calc((var(--card-min-h) * var(--chip-max-rows)) + (var(--grid-gap) * (var(--chip-max-rows) - 1)));
  --chip-shell-bg:#030b19;
  --chip-shell-border:rgba(106,157,255,.4);
  --chip-shell-radius:22px;
  --chip-shell-pad:19px;
  --chip-shell-gap:13px;
  --chip-shell-shadow:0 4px 16px rgba(2,6,18,.5);
  --chip-shell-scroll-thumb:rgba(106,157,255,.45);
  --chip-shell-title:#e3f2ff;
  --chip-shell-text:#ffffff;
  --chip-card-bg:#06162f;
  --chip-card-border:rgba(106,157,255,.25);
  --chip-card-shadow:0 2px 8px rgba(2,8,22,.4);
  --chip-card-selected-border:var(--cyan);
  --chip-card-selected-bg:rgba(95,213,255,.16);
  --chip-card-selected-glow:0 0 0 2px rgba(95,213,255,.6), 0 4px 12px rgba(12,50,98,.3);
  --chip-card-selected-title:#f6f9ff;
  --chip-card-selected-subtext:#95aacc;
  --chip-card-title:#f6f9ff;
  --chip-card-subtext:#95aacc;

  --pill-border:rgba(255,255,255,.22);
  --pill-bg:rgba(255,255,255,.05);
  --pill-hover-bg:rgba(255,255,255,.09);
  --pill-shadow:0 2px 6px rgba(1,6,14,.3);
}

/* Fallback nativo: senza data-theme, segue prefers-color-scheme (prima del JS) */
@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    --bg:#f5f7fa;
    --panel:#ffffff;
    --panel-1:#f8f9fb;
    --panel-2:#f0f2f5;
    --panel-3:#e8ebef;
    --panel-4:#e0e4e9;
    --panel-5:#d8dce2;
    --scene-block-bg:#f8f9fb;
    --ink-1:#1a1f2e;
    --ink-2:#2d3548;
    --ink-3:#4b5563;
    --line-1:rgba(0,0,0,.08);
    --line-2:rgba(0,0,0,.12);
    --blue:#4a7cff;
    --blue-light:#6a9dff;
    --scrollbar-thumb:rgba(74,124,255,.65);
    --scrollbar-track:rgba(200,205,212,.6);
    --chip-shell-bg:#4a5568;
    --chip-shell-border:rgba(74,124,255,.4);
    --chip-card-bg:#e8ebef;
    --chip-card-border:rgba(74,124,255,.15);
    --chip-card-title:#1a1f2e;
    --chip-card-subtext:#4b5563;
    --chip-card-selected-title:#1a1f2e;
    --chip-card-selected-subtext:#4b5563;
    --chip-shell-title:#e3f2ff;
    --chip-shell-text:#ffffff;
  }
}

  /* Light mode - forced via data-theme */
  :root[data-theme="light"] {
    --bg:#f5f7fa;
    --panel:#ffffff;
    --panel-1:#f8f9fb;
    --panel-2:#f0f2f5;
    --panel-3:#e8ebef;
    --panel-4:#e0e4e9;
    --panel-5:#d8dce2;
    --scene-block-bg:#f8f9fb;
    --scene-block-border:rgba(74,124,255,.25);
    --ink-1:#1a1f2e;
    --ink-2:#2d3548;
    --ink-3:#4b5563;
    --line-1:rgba(0,0,0,.08);
    --line-2:rgba(0,0,0,.12);
    /* Palette coerente: 3 varianti blu/azzurro */
    --blue:#4a7cff;              /* Primary: bottoni, azioni principali */
    --blue-light:#6a9dff;        /* Secondary: hover, focus leggeri */
    --cyan:#5fd5ff;              /* Accent: selezioni, evidenziazioni */
    --warn:#e6a800;
    --red:#c53030;
    --red-strong:#9b1c1c;
    --red-soft:rgba(220,38,38,.25);
    --green-soft:rgba(16,185,129,.15);

    --shadow-sm:none;
    --scrollbar-thumb:rgba(74,124,255,.65);
    --scrollbar-track:rgba(200,205,212,.6);

    --chip-shell-bg:#4a5568;
    --chip-shell-border:rgba(74,124,255,.4);
    --chip-card-bg:#e8ebef;
    --chip-card-border:rgba(74,124,255,.15);
    --chip-card-shadow:0 2px 8px rgba(0,0,0,.06);
    --chip-card-selected-border:var(--cyan);
    --chip-card-selected-bg:#ffffff;
    --chip-card-selected-glow:0 0 0 2px rgba(95,213,255,.8), 0 2px 8px rgba(95,213,255,.2);
    --chip-card-title:#1a1f2e;
    --chip-card-subtext:#4b5563;
    --chip-card-selected-title:#1a1f2e;
    --chip-card-selected-subtext:#4b5563;
    --chip-shell-title:#e3f2ff;
    --chip-shell-text:#ffffff;

    --pill-border:var(--blue);
    --pill-bg:transparent;
    --pill-hover-bg:rgba(74,124,255,.1);
    --pill-shadow:0 2px 6px rgba(0,0,0,.08);
    --pill-text:var(--blue);
    --pill-active-bg:var(--blue);
    --pill-active-text:#ffffff;
    --chip-bg:#ffffff;
    --chip-border:var(--blue);
    --chip-text:var(--blue);
    --chip-active-bg:var(--blue);
    --chip-active-border:var(--blue);
    --chip-active-text:#ffffff;
  }

  /* Dark mode - forced via data-theme */
  :root[data-theme="dark"] {
    /* Dark mode usa le stesse variabili del :root base */
  }

/* Light mode: SOLO colorazione diversa - layout, posizioni, dimensioni, scrollbar IDENTICI a dark mode */
:root[data-theme="light"] {
  color:var(--ink-1);
}

:root[data-theme="light"] *{
  color:inherit;
}

:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4,
:root[data-theme="light"] h5,
:root[data-theme="light"] h6,
:root[data-theme="light"] p,
:root[data-theme="light"] span,
:root[data-theme="light"] label,
:root[data-theme="light"] .label{
  color:var(--ink-1) !important;
}

  /* SOLO box editabili (textarea, input, select) bianchi in light mode - contenitori preview grigi chiari */
  :root[data-theme="light"] .tab-body__preview textarea,
  :root[data-theme="light"] .tab-body__preview .preview-textarea,
  :root[data-theme="light"] .tab-body__preview .arch-preview-card__textarea,
  :root[data-theme="light"] .tab-body__preview input[type="text"],
  :root[data-theme="light"] .tab-body__preview input[type="search"],
  :root[data-theme="light"] select{
    background:#ffffff !important;
    border-color:rgba(0,0,0,.12) !important;
    color:var(--ink-1) !important;
  }

  /* Regola generale light mode: testi scuri su fondo chiaro */
  /* Le card non selezionate hanno fondo chiaro, quindi testi scuri */
  /* Le variabili --chip-card-title e --chip-card-subtext sono già scure in light mode */

  /* Bottoni dei blocchi finali e titoli: stesso azzurro dei bottoni salva/applica */
  .card-actions .btn:not(.danger),
  .card .cta .btn:not(.danger),
  .props-card__cta .btn:not(.danger),
  .props-preview-actions .btn:not(.danger),
  .preview-actions .btn:not(.danger),
  .action-row .btn:not(.danger),
  .section-title + .btn:not(.danger),
  h1 + .btn:not(.danger),
  h2 + .btn:not(.danger),
  h3 + .btn:not(.danger),
  .preview-block-header .btn:not(.danger),
  .preview-block .btn:not(.danger){
    background:var(--blue) !important;
    border-color:var(--blue) !important;
    color:#ffffff !important;
  }
  .card-actions .btn:not(.danger):hover,
  .card .cta .btn:not(.danger):hover,
  .props-card__cta .btn:not(.danger):hover,
  .props-preview-actions .btn:not(.danger):hover,
  .preview-actions .btn:not(.danger):hover,
  .action-row .btn:not(.danger):hover,
  .section-title + .btn:not(.danger):hover,
  h1 + .btn:not(.danger):hover,
  h2 + .btn:not(.danger):hover,
  h3 + .btn:not(.danger):hover,
  .preview-block-header .btn:not(.danger):hover,
  .preview-block .btn:not(.danger):hover{
    background:var(--blue-light) !important;
    border-color:var(--blue-light) !important;
  }

  /* Testi scuri sui contenitori chiari in light mode - come Props */
  :root[data-theme="light"] .chip-panel .chip-panel__title,
  :root[data-theme="light"] .chip-panel .section-title,
  :root[data-theme="light"] .chip-panel .chip-panel__eyebrow,
  :root[data-theme="light"] .chip-panel h1,
  :root[data-theme="light"] .chip-panel h2,
  :root[data-theme="light"] .chip-panel h3,
  :root[data-theme="light"] .chip-panel h4,
  :root[data-theme="light"] .chip-panel h5,
  :root[data-theme="light"] .chip-panel h6{
    color:var(--ink-1);
  }
  :root[data-theme="light"] .chip-panel p,
  :root[data-theme="light"] .chip-panel .desc:not(.card .desc),
  :root[data-theme="light"] .chip-panel .text,
  :root[data-theme="light"] .chip-panel span:not(.chip):not(.tag):not(.pill):not(.chip-label){
    color:var(--ink-2);
  }

  :root[data-theme="light"] .cards-scroll{
    background:var(--panel-2);
    border:1px solid var(--line-1);
    box-shadow:none !important;
  }

  /* LIGHT MODE: RIMUOVI TUTTE LE OMBRE E GLOW */
  :root[data-theme="light"] *{
    box-shadow:none !important;
  }

  /* ECCEZIONE: card selected può avere bordo ma no ombra */
  :root[data-theme="light"] .card.selected{
    box-shadow:0 0 0 2px var(--chip-card-selected-border) !important;
  }

  .cards-scroll.horizontal-x{
    border:1px solid var(--line-1);
  }

  /* Grooming light: contenitore grigio chiaro, box anteprima prompt bianchi */
  :root[data-theme="light"] #tab-grooming .tab-body__preview,
  :root[data-theme="light"] #tab-grooming .grooming-preview-panel.section-block{
    background:var(--panel-2) !important;
  }
  :root[data-theme="light"] #tab-grooming .grooming-preview-box .preview-textarea:focus,
  :root[data-theme="light"] #tab-grooming .grooming-preview-box__textarea:focus{
    border-color:var(--cyan);
    box-shadow:0 0 0 2px var(--cyan);
  }

  /* Reinforce: contenitore grigio chiaro, SOLO textarea bianchi */
  #tab-negative .tab-body__preview,
  #tab-negative .rn-preview{
    background:var(--panel-2) !important;
  }

  :root[data-theme="light"] .grooming-preview-row{
    background:var(--panel-2);
  }

  :root[data-theme="light"] .grooming-preview-row .arch-preview-card__textarea,
  :root[data-theme="light"] .grooming-preview-row .preview-textarea{
    background:#ffffff !important;
    border-color:rgba(0,0,0,.12) !important;
    color:#000000 !important;
  }

  :root[data-theme="light"] .grooming-preview-row .preview-textarea:focus{
    border-color:var(--cyan);
    box-shadow:0 0 0 2px var(--cyan);
  }

  /* Unificazione colori blu/azzurro per light mode - rimossa duplicazione, già definito sopra */

  .grooming-preview-head{
    border-bottom:1px solid rgba(74,124,255,.12);
  }

  .grooming-target-toggle .btn-pill.active{
    background:var(--blue);
    border-color:var(--blue);
    color:#fff;
  }

  /* Bordi unificati per light mode */
  .grooming-preview-head{
    border-bottom:1px solid rgba(74,124,255,.12);
  }

  .chip-panel__scroll{
    border:1px dashed rgba(74,124,255,.25);
  }

  .vs-detail-accordion details{
    border:1px solid rgba(74,124,255,.1);
  }

  .vs-detail-accordion details summary{
    border-bottom:1px solid rgba(74,124,255,.08);
  }

  .outfit-preview-shell{
    border-bottom:1px solid rgba(74,124,255,.12);
  }

  .outfit-preview-card__head{
    border-bottom:1px solid rgba(74,124,255,.12);
  }

  .outfit-preview-card__remove{
    border-top:1px solid rgba(74,124,255,.12);
  }

  /* Scene/Luci: contenitori grigi chiari, SOLO textarea bianchi */
  :root[data-theme="light"] .scene-preview,
  :root[data-theme="light"] .scene-preview-stack{
    background:var(--panel-2) !important;
    border:1px solid var(--line-1) !important;
  }
  :root[data-theme="light"] .scene-preview *,
  :root[data-theme="light"] .scene-preview-stack *{
    background:var(--panel-2) !important;
  }
  :root[data-theme="light"] .scene-preview .preview-textarea{
    background:#ffffff !important;
    border-color:rgba(0,0,0,.12) !important;
    color:var(--ink-1) !important;
  }
  /* Testi a nero in Light Mode */
  :root[data-theme="light"] .scene-preview__head h4{
    color:var(--ink-1) !important;
  }
  :root[data-theme="light"] .scene-preview__empty{
    color:var(--ink-2) !important;
  }
  :root[data-theme="light"] .scene-preview-section__title{
    color:var(--ink-1) !important;
  }
  :root[data-theme="light"] .scene-preview__body h5{
    color:var(--ink-2) !important;
  }
  :root[data-theme="light"] .scene-preview__body .field .label{
    color:var(--ink-1) !important;
  }
  /* Forza tutti i testi a nero */
  :root[data-theme="light"] .scene-preview,
  :root[data-theme="light"] .scene-preview *{
    color:var(--ink-1) !important;
  }

  /* Grooming: contenitori grigi chiari, SOLO textarea bianchi */
  :root[data-theme="light"] #tab-grooming .tab-body__preview,
  :root[data-theme="light"] .grooming-preview-panel.section-block,
  :root[data-theme="light"] #tab-grooming .grooming-preview-panel{
    background:var(--panel-2) !important;
    border:1px solid var(--line-1) !important;
    box-shadow:none !important;
  }
  :root[data-theme="light"] #tab-grooming .tab-body__preview *,
  :root[data-theme="light"] .grooming-preview-panel *,
  :root[data-theme="light"] #tab-grooming .grooming-preview-panel *{
    background:var(--panel-2) !important;
    color:var(--ink-1) !important;
  }
  :root[data-theme="light"] .grooming-preview-row{
    background:var(--panel-2) !important;
    border:1px solid var(--line-1) !important;
  }
  :root[data-theme="light"] .grooming-preview-row .arch-preview-card__textarea,
  :root[data-theme="light"] .grooming-preview-row .preview-textarea,
  :root[data-theme="light"] #tab-grooming .grooming-preview-row .preview-textarea{
    background:#ffffff !important;
  }
  :root[data-theme="light"] #tab-grooming .grooming-preview-box,
  :root[data-theme="light"] #tab-grooming .grooming-preview-box__header,
  :root[data-theme="light"] #tab-grooming .grooming-preview-box__header *,
  :root[data-theme="light"] #tab-grooming .grooming-preview-box__toggle{
    background:var(--panel-4) !important;
  }
  :root[data-theme="light"] #tab-grooming .grooming-preview-box .arch-preview-card__textarea,
  :root[data-theme="light"] #tab-grooming .grooming-preview-box .preview-textarea,
  :root[data-theme="light"] #tab-grooming .grooming-preview-box__textarea{
    background:#ffffff !important;
    border-color:rgba(0,0,0,.12) !important;
    color:#000000 !important;
  }
  :root[data-theme="light"] .grooming-preview-row .preview-text,
  :root[data-theme="light"] .grooming-preview-row .arch-preview-card__textarea,
  :root[data-theme="light"] .grooming-preview-row .preview-textarea,
  :root[data-theme="light"] #tab-grooming .grooming-preview-box__textarea{
    color:#000000 !important;
  }
  :root[data-theme="light"] .grooming-preview-chip{
    color:var(--ink-2) !important;
  }
  :root[data-theme="light"] .grooming-preview-item{
    background:#ffffff !important;
    border:1px solid var(--line-1) !important;
    color:var(--ink-1) !important;
  }
  /* Forza anche grooming-preview-head e altri elementi */
  :root[data-theme="light"] .grooming-preview-head,
  :root[data-theme="light"] .grooming-preview-head *,
  :root[data-theme="light"] .grooming-preview-list,
  :root[data-theme="light"] .grooming-preview-list *{
    background:#ffffff !important;
    color:var(--ink-1) !important;
  }

  /* Arch Preview Board: fondo bianco obbligatorio */
  :root[data-theme="light"] .arch-preview-board,
  :root[data-theme="light"] #tab-archetypes .arch-preview-board,
  :root[data-theme="light"] #tab-bodymorph .arch-preview-board,
  :root[data-theme="light"] #tab-archetypes .arch-preview-board *,
  :root[data-theme="light"] #tab-bodymorph .arch-preview-board *{
    background:var(--panel-2) !important;
  }
  :root[data-theme="light"] #tab-archetypes .arch-preview-cards,
  :root[data-theme="light"] #tab-bodymorph .arch-preview-cards{
    background:var(--panel-2) !important;
  }
  /* Override chip-shell variables for preview boards in Light Mode */
  :root[data-theme="light"] #tab-archetypes .arch-preview-board__context-label,
  :root[data-theme="light"] #tab-bodymorph .arch-preview-board__context-label{
    color:var(--ink-2) !important;
  }
  :root[data-theme="light"] #tab-archetypes .arch-preview-board__context-value,
  :root[data-theme="light"] #tab-bodymorph .arch-preview-board__context-value{
    color:var(--ink-1) !important;
  }
  :root[data-theme="light"] #tab-archetypes .arch-preview-board__empty,
  :root[data-theme="light"] #tab-bodymorph .arch-preview-board__empty{
    color:var(--ink-2) !important;
  }

  /* Arch Preview Card: grigio chiaro, SOLO textarea bianchi */
  :root[data-theme="light"] .arch-preview-card,
  :root[data-theme="light"] #tab-dynamics .arch-preview-card,
  :root[data-theme="light"] #tab-reinforce .arch-preview-card,
  :root[data-theme="light"] #tab-archetypes .arch-preview-card,
  :root[data-theme="light"] #tab-bodymorph .arch-preview-card{
    background:var(--panel-2) !important;
    border:1px solid var(--line-1) !important;
  }
  :root[data-theme="light"] .arch-preview-card__label,
  :root[data-theme="light"] #tab-dynamics .arch-preview-card__label,
  :root[data-theme="light"] #tab-archetypes .arch-preview-card__label,
  :root[data-theme="light"] #tab-bodymorph .arch-preview-card__label{
    color:var(--ink-2) !important;
  }
  :root[data-theme="light"] .arch-preview-card__textarea,
  :root[data-theme="light"] #tab-dynamics .arch-preview-card__textarea,
  :root[data-theme="light"] #tab-archetypes .arch-preview-card__textarea,
  :root[data-theme="light"] #tab-bodymorph .arch-preview-card__textarea,
  :root[data-theme="light"] #tab-scene .arch-preview-card__textarea{
    background:#ffffff !important;
    border:1px solid var(--line-1) !important;
    color:#000000 !important;
    color:var(--ink-1) !important;
  }
  :root[data-theme="light"] .arch-preview-card__lang,
  :root[data-theme="light"] #tab-archetypes .arch-preview-card__lang,
  :root[data-theme="light"] #tab-bodymorph .arch-preview-card__lang{
    border:1px solid var(--line-1) !important;
    color:var(--ink-2) !important;
  }
  :root[data-theme="light"] .arch-preview-board__header h3,
  :root[data-theme="light"] #tab-dynamics .arch-preview-board__header h3,
  :root[data-theme="light"] #tab-archetypes .arch-preview-board__header h3,
  :root[data-theme="light"] #tab-bodymorph .arch-preview-board__header h3{
    color:var(--ink-1) !important;
  }
  :root[data-theme="light"] .arch-panel__eyebrow,
  :root[data-theme="light"] #tab-dynamics .arch-panel__eyebrow,
  :root[data-theme="light"] #tab-archetypes .arch-panel__eyebrow,
  :root[data-theme="light"] #tab-bodymorph .arch-panel__eyebrow{
    color:var(--ink-2) !important;
  }
  :root[data-theme="light"] .arch-preview-board__context-label,
  :root[data-theme="light"] #tab-archetypes .arch-preview-board__context-label,
  :root[data-theme="light"] #tab-bodymorph .arch-preview-board__context-label{
    color:var(--ink-2) !important;
  }
  :root[data-theme="light"] .arch-preview-board__context-value,
  :root[data-theme="light"] #tab-archetypes .arch-preview-board__context-value,
  :root[data-theme="light"] #tab-bodymorph .arch-preview-board__context-value{
    color:var(--ink-1) !important;
  }
  :root[data-theme="light"] .arch-preview-board__empty,
  :root[data-theme="light"] #tab-archetypes .arch-preview-board__empty,
  :root[data-theme="light"] #tab-bodymorph .arch-preview-board__empty{
    color:var(--ink-2) !important;
  }
  :root[data-theme="light"] .arch-preview-card__dismiss,
  :root[data-theme="light"] #tab-archetypes .arch-preview-card__dismiss,
  :root[data-theme="light"] #tab-bodymorph .arch-preview-card__dismiss{
    color:var(--ink-2) !important;
  }
  :root[data-theme="light"] .arch-preview-card__dismiss:hover,
  :root[data-theme="light"] #tab-archetypes .arch-preview-card__dismiss:hover,
  :root[data-theme="light"] #tab-bodymorph .arch-preview-card__dismiss:hover{
    color:var(--ink-1) !important;
  }
  /* Body Morph specific preview text colors */
  :root[data-theme="light"] #tab-bodymorph .arch-preview-board__label{
    color:var(--ink-2) !important;
  }
  :root[data-theme="light"] #tab-bodymorph .arch-preview-board__subtitle{
    color:var(--ink-1) !important;
  }
  /* Override chip-shell variables for Light Mode in Archetipi and Body Morph */
  :root[data-theme="light"] #tab-archetypes .arch-preview-board__context-label,
  :root[data-theme="light"] #tab-bodymorph .arch-preview-board__context-label{
    color:var(--ink-2) !important;
  }
  :root[data-theme="light"] #tab-archetypes .arch-preview-board__context-value,
  :root[data-theme="light"] #tab-bodymorph .arch-preview-board__context-value{
    color:var(--ink-1) !important;
  }
  :root[data-theme="light"] #tab-archetypes .arch-preview-card__label,
  :root[data-theme="light"] #tab-bodymorph .arch-preview-card__label{
    color:var(--ink-2) !important;
  }
  /* FORZA TUTTI I TESTI A NERO nelle anteprime Archetipi e Body Morph */
  :root[data-theme="light"] #tab-archetypes .tab-body__preview,
  :root[data-theme="light"] #tab-bodymorph .tab-body__preview{
    color:var(--ink-1) !important;
  }
  :root[data-theme="light"] #tab-archetypes .tab-body__preview *:not(.btn):not(button):not(a):not(input):not(textarea):not(select),
  :root[data-theme="light"] #tab-bodymorph .tab-body__preview *:not(.btn):not(button):not(a):not(input):not(textarea):not(select){
    color:var(--ink-1) !important;
  }
  /* Override per input e textarea (già gestiti sopra ma per sicurezza) */
  :root[data-theme="light"] #tab-archetypes .tab-body__preview input:not([type="button"]):not([type="submit"]):not([type="reset"]),
  :root[data-theme="light"] #tab-bodymorph .tab-body__preview input:not([type="button"]):not([type="submit"]):not([type="reset"]){
    color:var(--ink-1) !important;
  }
  /* Override specifico per elementi che potrebbero usare variabili chiare */
  :root[data-theme="light"] #tab-archetypes .tab-body__preview p,
  :root[data-theme="light"] #tab-bodymorph .tab-body__preview p,
  :root[data-theme="light"] #tab-archetypes .tab-body__preview span,
  :root[data-theme="light"] #tab-bodymorph .tab-body__preview span,
  :root[data-theme="light"] #tab-archetypes .tab-body__preview div,
  :root[data-theme="light"] #tab-bodymorph .tab-body__preview div,
  :root[data-theme="light"] #tab-archetypes .tab-body__preview h1,
  :root[data-theme="light"] #tab-bodymorph .tab-body__preview h1,
  :root[data-theme="light"] #tab-archetypes .tab-body__preview h2,
  :root[data-theme="light"] #tab-bodymorph .tab-body__preview h2,
  :root[data-theme="light"] #tab-archetypes .tab-body__preview h3,
  :root[data-theme="light"] #tab-bodymorph .tab-body__preview h3,
  :root[data-theme="light"] #tab-archetypes .tab-body__preview h4,
  :root[data-theme="light"] #tab-bodymorph .tab-body__preview h4,
  :root[data-theme="light"] #tab-archetypes .tab-body__preview h5,
  :root[data-theme="light"] #tab-bodymorph .tab-body__preview h5,
  :root[data-theme="light"] #tab-archetypes .tab-body__preview h6,
  :root[data-theme="light"] #tab-bodymorph .tab-body__preview h6{
    color:var(--ink-1) !important;
  }
  /* Override per elementi secondari (label, subtitle, etc) */
  :root[data-theme="light"] #tab-archetypes .tab-body__preview .label,
  :root[data-theme="light"] #tab-bodymorph .tab-body__preview .label,
  :root[data-theme="light"] #tab-archetypes .tab-body__preview [class*="label"],
  :root[data-theme="light"] #tab-bodymorph .tab-body__preview [class*="label"],
  :root[data-theme="light"] #tab-archetypes .tab-body__preview [class*="subtitle"],
  :root[data-theme="light"] #tab-bodymorph .tab-body__preview [class*="subtitle"],
  :root[data-theme="light"] #tab-archetypes .tab-body__preview [class*="text"],
  :root[data-theme="light"] #tab-bodymorph .tab-body__preview [class*="text"]{
    color:var(--ink-2) !important;
  }
  /* Override per arch-preview-board__meta e chips */
  :root[data-theme="light"] #tab-archetypes .arch-preview-board__meta,
  :root[data-theme="light"] #tab-bodymorph .arch-preview-board__meta,
  :root[data-theme="light"] #tab-archetypes .arch-preview-board__meta *,
  :root[data-theme="light"] #tab-bodymorph .arch-preview-board__meta *,
  :root[data-theme="light"] #tab-archetypes .arch-preview-board__chips,
  :root[data-theme="light"] #tab-bodymorph .arch-preview-board__chips,
  :root[data-theme="light"] #tab-archetypes .arch-preview-board__chips *,
  :root[data-theme="light"] #tab-bodymorph .arch-preview-board__chips *,
  :root[data-theme="light"] #tab-archetypes .arch-preview-board__chips-list,
  :root[data-theme="light"] #tab-bodymorph .arch-preview-board__chips-list,
  :root[data-theme="light"] #tab-archetypes .arch-preview-board__chips-list *,
  :root[data-theme="light"] #tab-bodymorph .arch-preview-board__chips-list *{
    color:var(--ink-1) !important;
  }
  /* Override per chip elements dentro le anteprime */
  :root[data-theme="light"] #tab-archetypes .tab-body__preview .chip,
  :root[data-theme="light"] #tab-bodymorph .tab-body__preview .chip{
    color:var(--ink-1) !important;
  }
  /* Override ULTRA-AGGRESSIVO: forza TUTTI i testi che usano variabili chip-shell a nero */
  :root[data-theme="light"] #tab-archetypes [style*="--chip-shell-text"],
  :root[data-theme="light"] #tab-bodymorph [style*="--chip-shell-text"],
  :root[data-theme="light"] #tab-archetypes .tab-body__preview [style*="color"],
  :root[data-theme="light"] #tab-bodymorph .tab-body__preview [style*="color"]{
    color:var(--ink-1) !important;
  }

  /* Dynamics Preview Board: grigio chiaro, SOLO textarea bianchi */
  :root[data-theme="light"] .dyn-preview-board,
  :root[data-theme="light"] #tab-dynamics .dyn-preview-board{
    background:var(--panel-2) !important;
    border:1px solid var(--line-1);
  }
  :root[data-theme="light"] .dyn-preview__empty,
  :root[data-theme="light"] #tab-dynamics .dyn-preview__empty{
    color:var(--ink-2);
    border-color:var(--line-1);
  }
  :root[data-theme="light"] .dyn-preview__label{
    color:var(--ink-2);
  }
  :root[data-theme="light"] .dyn-preview__subtitle{
    color:var(--ink-1);
  }
  :root[data-theme="light"] .dyn-preview__text .label,
  :root[data-theme="light"] .dyn-preview__text .preview-textarea{
    color:var(--ink-1);
  }

  /* Reinforce Preview: contenitori grigi chiari, SOLO textarea bianchi */
  :root[data-theme="light"] #tab-negative .tab-body__preview,
  :root[data-theme="light"] .rn-preview,
  :root[data-theme="light"] #tab-negative .rn-preview{
    background:var(--panel-2) !important;
    border:1px solid var(--line-1) !important;
    box-shadow:none !important;
  }
  :root[data-theme="light"] #tab-negative .tab-body__preview *,
  :root[data-theme="light"] .rn-preview *,
  :root[data-theme="light"] #tab-negative .rn-preview *{
    background:var(--panel-2) !important;
    color:var(--ink-1) !important;
  }
  /* Forza textarea a sfondo bianco */
  :root[data-theme="light"] #tab-negative .rn-preview__body .preview-textarea,
  :root[data-theme="light"] .rn-preview__body .preview-textarea,
  :root[data-theme="light"] #tab-negative .preview-textarea{
    background:#ffffff !important;
    border-color:rgba(0,0,0,.12) !important;
    color:var(--ink-1) !important;
  }
  /* Forza label e altri elementi di testo */
  :root[data-theme="light"] .rn-preview__head h4,
  :root[data-theme="light"] #tab-negative .rn-preview__head h4{
    color:var(--ink-1) !important;
  }
  :root[data-theme="light"] .rn-preview__empty,
  :root[data-theme="light"] #tab-negative .rn-preview__empty{
    color:var(--ink-2) !important;
  }
  :root[data-theme="light"] .rn-preview__body .label,
  :root[data-theme="light"] #tab-negative .rn-preview__body .label{
    color:var(--ink-1) !important;
  }
  :root[data-theme="light"] .rn-preview__body .preview-textarea,
  :root[data-theme="light"] #tab-negative .rn-preview__body .preview-textarea{
    color:var(--ink-1) !important;
  }
  :root[data-theme="light"] #tab-negative .rn-selected,
  :root[data-theme="light"] #tab-negative .rn-selected *,
  :root[data-theme="light"] #tab-negative .rn-selected__grid,
  :root[data-theme="light"] #tab-negative .rn-selected__grid *{
    background:var(--panel-2) !important;
    color:var(--ink-1) !important;
  }

  /* Preview Column: contenitori grigi chiari, SOLO box editabili bianchi */
  :root[data-theme="light"] #tab-visualstyles .tab-body__preview,
  :root[data-theme="light"] #tab-visualstyles .tab-body__preview.vs-detail,
  :root[data-theme="light"] #tab-grooming .tab-body__preview,
  :root[data-theme="light"] #tab-negative .tab-body__preview,
  :root[data-theme="light"] #tab-dynamics .tab-body__preview,
  :root[data-theme="light"] #tab-archetypes .tab-body__preview,
  :root[data-theme="light"] #tab-bodymorph .tab-body__preview,
  :root[data-theme="light"] #tab-props .tab-body__preview,
  :root[data-theme="light"] #tab-outfit .tab-body__preview,
  :root[data-theme="light"] #tab-archetypes .tab-body__preview *,
  :root[data-theme="light"] #tab-bodymorph .tab-body__preview *,
  :root[data-theme="light"] #tab-props .tab-body__preview *,
  :root[data-theme="light"] #tab-outfit .tab-body__preview *{
    background:var(--panel-2) !important;
  }

  /* ECCEZIONI CRITICHE per outfit - elementi che NON devono essere grigi */
  :root[data-theme="light"] #tab-outfit .tab-body__preview .btn-pill.active,
  :root[data-theme="light"] #tab-outfit .tab-body__preview .btn.prim,
  :root[data-theme="light"] #tab-outfit .tab-body__preview .btn.primary,
  :root[data-theme="light"] #tab-outfit .tab-body__preview .btn:not(.danger):not(.ghost){
    background:var(--blue) !important;
    border-color:var(--blue) !important;
    color:#ffffff !important;
  }

  /* ECCEZIONE CRITICA: textarea DEVE essere bianco */
  :root[data-theme="light"] #tab-archetypes .arch-preview-card__textarea,
  :root[data-theme="light"] #tab-bodymorph .arch-preview-card__textarea{
    background:#ffffff !important;
    border:1px solid var(--line-1) !important;
  }
  /* Props light: textarea trasparente (sfondo e testo) così si vede l’overlay sotto con il testo leggibile */
  :root[data-theme="light"] #tab-props .props-preview-editor .preview-textarea,
  :root[data-theme="light"] #tab-props #propsPreview.preview-textarea{
    background:#ffffff !important;
    border-color:rgba(0,0,0,.12) !important;
    color:transparent !important;
    -webkit-text-fill-color:transparent !important;
  }
  :root[data-theme="light"] #tab-props .props-target-toggle .btn-pill.active{
    background:var(--blue) !important;
    border-color:var(--blue) !important;
    color:#fff !important;
  }
  /* Grooming light: P1/P2 stesso blu delle altre tab */
  :root[data-theme="light"] #tab-grooming .grooming-target-toggle .btn-pill.active{
    background:var(--blue) !important;
    border-color:var(--blue) !important;
    color:#fff !important;
  }
  /* Grooming Creator: pill come Outfit (aree + genere) */
  :root[data-theme="light"] #tab-grooming .grooming-create-flags .outfit-target-toggle .btn-pill.active,
  :root[data-theme="light"] #tab-grooming .grooming-create-flags .outfit-gender-toggle .btn-pill.active{
    background:var(--blue) !important;
    border-color:var(--blue) !important;
    color:#fff !important;
  }
  /* Archetipi light: P1/P2 stesso blu delle altre tab */
  :root[data-theme="light"] #tab-archetypes #archTargetToggle .btn-pill.active,
  :root[data-theme="light"] #tab-archetypes .outfit-target-toggle .btn-pill.active{
    background:var(--blue) !important;
    border-color:var(--blue) !important;
    color:#fff !important;
  }
  /* Body Morph light: P1/P2 stesso blu delle altre tab */
  :root[data-theme="light"] #tab-bodymorph #bodyMorphTargetToggle .btn-pill.active,
  :root[data-theme="light"] #tab-bodymorph .outfit-target-toggle .btn-pill.active{
    background:var(--blue) !important;
    border-color:var(--blue) !important;
    color:#fff !important;
  }
  /* Eccezione: bottoni azzurri nelle preview */
  :root[data-theme="light"] .tab-body__preview .btn:not(.danger):not(.ghost),
  :root[data-theme="light"] .btn.prim,
  :root[data-theme="light"] .btn.primary{
    background:var(--blue) !important;
    border-color:var(--blue) !important;
    color:#ffffff !important;
  }
  /* Props: In scena / Sul soggetto - fondo azzurro attivo, leggibile inattivo */
  :root[data-theme="light"] #tab-props .props-config-mode__btn.active{
    background:var(--blue) !important;
    color:#ffffff !important;
    border-color:var(--blue) !important;
  }
  :root[data-theme="light"] #tab-props .props-config-mode__btn:not(.active){
    background:rgba(255,255,255,.9) !important;
    color:var(--ink-1) !important;
    border-color:var(--line-2) !important;
  }
  :root[data-theme="light"] #tab-props .props-config-mode__btn:hover{
    background:rgba(74,124,255,.15) !important;
    color:var(--blue) !important;
  }
  #sceneSmartGenerate.btn.ghost{
    background:var(--blue) !important;
    color:#ffffff !important;
    border-color:var(--blue) !important;
  }
  #sceneSmartGenerate.btn.ghost:hover{
    background:var(--blue-light) !important;
    border-color:var(--blue-light) !important;
  }
  :root[data-theme="light"] #tab-archetypes .tab-body__preview .section-block,
  :root[data-theme="light"] #tab-bodymorph .tab-body__preview .section-block{
    background:var(--panel-2) !important;
  }

  /* Visual Styles: contenitori grigi chiari, SOLO textarea bianchi */
  :root[data-theme="light"] .wiz-visualstyles .tab-body__preview,
  :root[data-theme="light"] .wiz-visualstyles .tab-body__preview.vs-detail,
  :root[data-theme="light"] #tab-visualstyles .tab-body__preview,
  :root[data-theme="light"] #tab-visualstyles .tab-body__preview.vs-detail{
    background:var(--panel-2) !important;
    border:1px solid var(--line-1) !important;
  }
  /* RIMOSSO wildcard * che interferiva con scroll container */
  :root[data-theme="light"] .wiz-visualstyles .vs-detail-content,
  :root[data-theme="light"] .wiz-visualstyles .vs-detail-accordion,
  :root[data-theme="light"] .wiz-visualstyles .vs-detail-accordion details{
    background:var(--panel-2) !important;
    border-color:var(--line-1) !important;
  }
  /* Forza testi a nero in Light Mode per Visual Styles preview */
  :root[data-theme="light"] .wiz-visualstyles .tab-body__preview,
  :root[data-theme="light"] #tab-visualstyles .tab-body__preview{
    color:var(--ink-1) !important;
  }
  :root[data-theme="light"] .wiz-visualstyles .tab-body__preview .label,
  :root[data-theme="light"] .wiz-visualstyles .tab-body__preview h3,
  :root[data-theme="light"] .wiz-visualstyles .tab-body__preview h4,
  :root[data-theme="light"] .wiz-visualstyles .tab-body__preview p,
  :root[data-theme="light"] .wiz-visualstyles .tab-body__preview span{
    color:var(--ink-1) !important;
  }
  /* RIMOSSO wildcard * */
  /* Override per elementi secondari */
  :root[data-theme="light"] .wiz-visualstyles .vs-detail__section-title,
  :root[data-theme="light"] .wiz-visualstyles .vs-constraint__header,
  :root[data-theme="light"] .wiz-visualstyles .vs-constraint__label,
  :root[data-theme="light"] .wiz-visualstyles .vs-detail-accordion details summary{
    color:var(--ink-1) !important;
  }

  /* FORZA: SOLO box editabili bianchi - override regole * che potrebbero sovrascrivere */
  :root[data-theme="light"] .tab-body__preview textarea,
  :root[data-theme="light"] .tab-body__preview .preview-textarea,
  :root[data-theme="light"] .tab-body__preview .arch-preview-card__textarea,
  :root[data-theme="light"] .tab-body__preview input[type="text"],
  :root[data-theme="light"] .tab-body__preview input[type="search"],
  :root[data-theme="light"] #tab-visualstyles .tab-body__preview textarea,
  :root[data-theme="light"] #tab-visualstyles .tab-body__preview .preview-textarea,
  :root[data-theme="light"] #tab-negative .tab-body__preview textarea,
  :root[data-theme="light"] #tab-negative .tab-body__preview .preview-textarea,
  :root[data-theme="light"] .rn-preview textarea,
  :root[data-theme="light"] .rn-preview .preview-textarea{
    background:#ffffff !important;
    border-color:rgba(0,0,0,.12) !important;
    color:var(--ink-1) !important;
  }

  /* OUTFIT TAB: LIGHT MODE FIXES */
  /* Bottoni P1/P2 azzurri quando attivi */
  :root[data-theme="light"] .outfit-target-toggle .btn-pill.active,
  :root[data-theme="light"] .outfit-gender-toggle .btn-pill.active{
    background:var(--blue) !important;
    color:#ffffff !important;
    border-color:var(--blue) !important;
  }

  /* Preview textarea bianco in outfit */
  :root[data-theme="light"] #tab-outfit .preview-textarea,
  :root[data-theme="light"] #tab-outfit #outfitPreviewPerson1,
  :root[data-theme="light"] #tab-outfit #outfitPreviewPerson2{
    background:#ffffff !important;
    border-color:rgba(0,0,0,.12) !important;
    color:var(--ink-1) !important;
  }

  /* Bottone Salva azzurro in outfit preview */
  :root[data-theme="light"] #tab-outfit .outfit-preview-card__save-btn,
  :root[data-theme="light"] #tab-outfit .outfit-editor-item__save-btn{
    background:var(--blue) !important;
    border-color:var(--blue) !important;
    color:#ffffff !important;
  }
}

/* RIMOSSO: conflitto con pattern uniforme */
:root:not([data-theme="light"]) #tab-scene .cards-scroll,
:root[data-theme="dark"] #tab-scene .cards-scroll,
:root:not([data-theme="light"]) #tab-archetypes .cards-scroll,
:root[data-theme="dark"] #tab-archetypes .cards-scroll{
  overflow-y:auto;
  overflow-x:hidden;
  border-radius:calc(var(--chip-shell-radius) - 6px);
  border:1px solid rgba(106,157,255,.12);
  background:var(--chip-shell-bg);
  box-shadow:inset 0 0 0 1px rgba(30,60,108,.25);
  scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);
}
/* Dark mode cards-scroll - increased specificity to avoid !important */
:root:not([data-theme="light"]) #tab-grooming .cards-scroll,
:root[data-theme="dark"] #tab-grooming .cards-scroll,
:root:not([data-theme="light"]) #tab-dynamics .cards-scroll,
:root[data-theme="dark"] #tab-dynamics .cards-scroll,
:root:not([data-theme="light"]) #tab-presets .cards-scroll,
:root[data-theme="dark"] #tab-presets .cards-scroll{
  overflow-y:auto;
  overflow-x:hidden;
  border-radius:calc(var(--chip-shell-radius) - 6px);
  border:1px solid rgba(106,157,255,.12);
  background:var(--chip-shell-bg);
  box-shadow:inset 0 0 0 1px rgba(30,60,108,.25);
  scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);
}
.cards-scroll.horizontal-x{
  overflow-x:auto;
  overflow-y:hidden;
  height:calc(var(--card-min-h) + (var(--inset-pad) * 2));
  min-width:0;
  padding:var(--inset-pad) 0;
  border:1px solid rgba(106,157,255,.18);
  scrollbar-width:auto;
  scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);
}
.cards-scroll.reduced{ max-height:var(--card-container-max); }
.cards-scroll::-webkit-scrollbar{ width:8px; height:8px; }
.cards-scroll::-webkit-scrollbar-thumb{ background:var(--scrollbar-thumb); border-radius:4px; }
.cards-scroll::-webkit-scrollbar-track{ background:var(--scrollbar-track); }

.cards-wrap{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, var(--chip-card-max-width)));
  gap:var(--grid-gap);
  justify-content:flex-start;
  justify-items:flex-start;
  align-content:flex-start;
  grid-auto-rows:auto;
  padding:var(--inset-pad);
  min-height:0;
}
.cards-wrap > *{
  min-width:0;
  width:100%;
  max-width:var(--chip-card-max-width);
}
@media (max-width:820px){
  .cards-wrap{
    grid-template-columns:minmax(0, var(--chip-card-max-width));
    justify-content:center;
  }
}

.preset-flag{
  position:relative;
  display:inline-flex;
  width:auto;
  min-width:0;
  justify-self:flex-start;
}
.preset-flag--wide{
  flex:0 0 auto;
}
.preset-flag--wide span{
  min-width:210px;
  max-width:320px;
}
.preset-flag input{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}
.preset-flag span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  height:auto;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
  font-size:10.75px;
  font-weight:600;
  color:var(--ink-1);
  text-align:center;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  margin-bottom: 20px;
  transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ height:100vh; margin:0; overflow:hidden; }
body{
  height:100%;
  margin:0;
  overflow:hidden;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  min-height:0;
  background:var(--bg);
  color:var(--ink-1);
  font: 14.5px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --chip-bg:rgba(48,109,187,.22);
  --chip-border:var(--cyan);
  --chip-text:#e3f2ff;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

*{
  scrollbar-width:auto;
  scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);
}
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-thumb{
  background:var(--scrollbar-thumb);
  border-radius:4px;
}
*::-webkit-scrollbar-track{
  background:var(--scrollbar-track);
}

/* Guarantee that [hidden] actually hides elements even if other display rules exist */
[hidden]{ display:none !important; }

:focus-visible{ outline:2px solid var(--blue-light); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0s !important; transition:none !important; scroll-behavior:auto !important; }
}

a{ color:inherit; }

.wiz-header{
  flex-shrink:0;
  position:sticky;
  top:0;
  z-index:60;
  background:var(--panel-2);
  border-bottom:1px solid var(--line-1);
  padding:16px 0 11px 0;
  min-height:53px;
  display:flex;
  align-items:center;
  overflow:visible;
}
.wiz-header__group{
  width:100%;
  max-width:var(--page-max);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding:0 var(--layout-pad);
}
.wiz-header__left,
.wiz-header__right{
  display:flex;
  align-items:center;
}
.wiz-header__left{
  gap:24px;
  justify-content:flex-start;
  min-width:0;
  flex:1;
  overflow:hidden;
}
.wiz-nav{
  flex:1;
  margin-left:0;
  overflow:visible;
  min-width:0;
  position:relative;
  z-index:10;
}
.wiz-nav__item{
  position:relative;
  z-index:11;
}
.wiz-header__right{
  justify-content:flex-end;
  gap:16px;
  flex-wrap:nowrap;
  min-width:0;
  flex-shrink:0;
  position:relative;
  z-index:5;
}
.btn-create-card{
  border-color:var(--blue) !important;
  border-width:2px !important;
  font-weight:700 !important;
}
.wiz-logo{
  border:none;
  border-radius:0;
  background:transparent;
  padding:0;
  min-width:auto;
  min-height:auto;
  color:var(--ink-1);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .2s ease, transform .2s ease;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
}
.wiz-logo--compact{
  padding:0;
  min-width:auto;
  min-height:auto;
  font-size:20px;
  font-weight:700;
  letter-spacing:0.02em;
}
.wiz-logo:hover{ opacity:0.8; transform:translateY(-1px); }
.wiz-logo:active{ transform:scale(.97); }
.wiz-logo__text{ pointer-events:none; }
.wiz-logo:focus-visible{ outline:2px solid var(--blue-light); outline-offset:2px; border-radius:14px; }
.btn#appClose{ margin-left:8px; }
.wiz-health{
  padding:4px 10px; border:1px solid var(--line-1); border-radius:999px;
  background:rgba(255,255,255,.02); color:#cfe7ff; font-weight:600;
  font-size:11px;
  white-space:nowrap;
}
.wiz-health--compact{
  padding:3px 8px;
  font-size:10px;
}
.prompt-column .wiz-health{
  margin-top:6px;
  flex-shrink:0;
  align-self:flex-start;
}
.wiz-nav{
  flex:1;
  margin-left:20px;
  overflow:visible;
  min-width:0;
}
.wiz-nav__list{
  display:flex;
  gap:8px;
  list-style:none;
  margin:0;
  padding:0;
  align-items:stretch;
  flex-wrap:nowrap;
  justify-content:flex-start;
  max-width:100%;
}
.wiz-nav__item{
  padding:8px 12px;
  border:none;
  border-radius:0;
  background:transparent;
  color:var(--ink-2);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:background .2s ease, color .2s ease, transform .1s ease, border-radius .2s ease;
  flex-shrink:0;
  position:relative;
  z-index:11;
}
  line-height:1.2;
  flex-shrink:0;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.wiz-nav__item:hover{
  color:var(--ink-1);
  transform:translateY(-1px);
}
.wiz-nav__item.active{
  background:var(--blue);
  color:#fff;
  border:none;
  border-radius:999px;
  font-weight:700;
}
.wiz-nav__item:active{
  transform:scale(.97);
}
.wiz-nav__item:focus-visible{
  outline:2px solid var(--blue-light);
  outline-offset:2px;
  border-radius:8px;
}
.app-closed-screen{
  min-height:100vh;
  padding:60px 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
}
.app-closed-card{
  width:100%;
  max-width:460px;
  text-align:center;
  background:var(--panel-2);
  border:1px solid var(--line-1);
  border-radius:18px;
  padding:48px 40px;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.app-closed-card h1{
  margin:0 0 12px;
  font-size:26px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.app-closed-card p{
  margin:0 0 26px;
  color:var(--ink-2);
  line-height:1.5;
}
.app-closed-card .btn{ width:100%; }
.lang-toggle{
  display:inline-flex;
  gap:4px;
  padding:4px;
  border:1px solid var(--line-1);
  border-radius:999px;
  background:var(--panel-3);
  align-items:center;
}
.lang-toggle__btn{
  border:none;
  background:transparent;
  color:var(--ink-2);
  font-weight:600;
  font-size:12.5px;
  line-height:1;
  padding:0 10px;
  min-height:20px;
  height:20px;
  max-height:20px;
  border-radius:999px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease, color .15s ease;
}
.lang-toggle__btn.active{
  background:var(--blue-light);
  color:#0c1723;
}
.lang-toggle__btn:focus-visible{ outline:2px solid var(--blue-light); outline-offset:2px; }

.theme-toggle{
  display:inline-flex;
  gap:4px;
  align-items:center;
  border-radius:8px;
  padding:2px;
  background:var(--panel-3);
  border:1px solid var(--line-1);
}
.theme-toggle__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:0;
  border:none;
  border-radius:6px;
  background:transparent;
  color:var(--ink-2);
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.theme-toggle__btn:hover{
  background:var(--panel-4);
  color:var(--ink-1);
}
.theme-toggle__btn.active{
  background:var(--blue);
  color:#ffffff;
}
.theme-toggle__btn:focus-visible{ outline:2px solid var(--blue-light); outline-offset:2px; }
.theme-toggle__btn svg{
  width:16px;
  height:16px;
  stroke:currentColor;
  fill:none;
}

.library-panel-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 12px;
  min-width:auto;
  border-radius:8px;
  border:1px solid var(--line-1);
  background:var(--panel-3);
  color:var(--ink-1);
  cursor:pointer;
  text-align:left;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.library-panel-toggle:hover{
  border-color:var(--blue);
  box-shadow:0 2px 8px rgba(0,0,0,.2);
  transform:translateY(-1px);
}
.library-panel-toggle:focus-visible{
  outline:2px solid var(--blue-light);
  outline-offset:3px;
}
.library-panel-toggle__icon{
  width:28px;
  height:28px;
  border-radius:6px;
  background:rgba(71,132,255,.14);
  color:var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.library-panel-toggle__icon svg{ width:16px; height:16px; }
.library-panel-toggle__icon svg rect{
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
  opacity:.9;
}
.library-panel-toggle__copy{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:0;
  min-width:0;
}
.library-panel-toggle__eyebrow{
  margin:0;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink-2);
  white-space:nowrap;
}
.library-panel-toggle__badge{
  margin-left:auto;
  min-width:40px;
  height:22px;
  border-radius:999px;
  border:1px solid var(--line-1);
  background:var(--panel-4);
  color:var(--ink-2);
  display:inline-flex;
  font-size:10px;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  padding:0 12px;
}
.library-panel-toggle__badge::before{ content:"ALL"; }
.library-panel-toggle[data-disabled-count]:not([data-disabled-count=""]) .library-panel-toggle__badge{
  border-color:var(--red);
  background:rgba(226,92,105,.18);
  color:var(--red);
}
.library-panel-toggle[data-disabled-count]:not([data-disabled-count=""]) .library-panel-toggle__badge::before{
  content:attr(data-disabled-count) " OFF";
}
@media (max-width:720px){
  .library-panel-toggle{ width:100%; }
}
.library-panel{
  border:1px solid var(--line-1);
  border-radius:22px;
  background:var(--panel-2);
  padding:20px 22px;
  display:flex;
  flex-direction:column;
  gap:16px;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
  margin-top:4px;
}
.library-panel[hidden]{ display:none; }
.library-panel__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.library-panel__eyebrow{
  margin:0;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink-3);
}
.library-panel__subtitle{
  margin:6px 0 0;
  font-size:12.5px;
  color:var(--ink-3);
}
.library-panel__close{
  border:1px solid var(--line-1);
  border-radius:999px;
  width:34px;
  height:34px;
  background:var(--panel-3);
  color:var(--ink-1);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
}
.library-panel__close:hover{ border-color:var(--blue); }
.library-panel__list{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:min(50vh, var(--card-container-max));
  overflow:auto;
  padding-right:6px;
}
.library-panel__list::-webkit-scrollbar{ width:8px; }
.library-panel__list::-webkit-scrollbar-thumb{ background:var(--scrollbar-thumb); }
.library-panel__list::-webkit-scrollbar-track{ background:var(--scrollbar-track); }
.library-panel__empty{
  margin:0;
  padding:24px;
  text-align:center;
  border:1px dashed var(--line-1);
  border-radius:16px;
  font-size:13px;
  color:var(--ink-3);
}
.library-card{
  border:1px solid var(--line-1);
  border-radius:18px;
  background:var(--panel-3);
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.library-card--base{
  border-color:var(--blue);
  box-shadow:0 0 0 1px rgba(71,132,255,.35);
}
.library-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.library-card__title{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.library-card__eyebrow{
  margin-top: 25px;
  margin-bottom: 4px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
}
  .vs-detail__section > .vs-constraints > .vs-constraint:first-child > .vs-constraint__header {
    margin-top: 25px;
  }
.library-card__version{
  font-size:12px;
  color:var(--ink-3);
}
.library-card__toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:600;
  color:var(--ink-2);
  cursor:pointer;
}
.library-card__toggle input{
  width:36px;
  height:20px;
  appearance:none;
  border-radius:999px;
  border:1px solid var(--line-1);
  background:rgba(255,255,255,.08);
  position:relative;
  transition:background .2s ease, border-color .2s ease;
}
.library-card__toggle input::after{
  content:"";
  position:absolute;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff;
  top:50%;
  left:3px;
  transform:translate(0,-50%);
  transition:transform .2s ease, background .2s ease;
}
.library-card__toggle input:checked{
  background:var(--blue);
  border-color:var(--blue);
}
.library-card__toggle input:checked::after{
  transform:translate(14px,-50%);
  background:#0c1723;
}
.library-card__toggle span{ pointer-events:none; }
.library-card__desc{
  margin:0;
  font-size:12.5px;
  color:var(--ink-2);
  line-height:1.5;
}
.library-card__stats{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.library-card__stats li{
  border:1px solid var(--line-1);
  border-radius:999px;
  padding:4px 10px;
  font-size:11.5px;
  color:var(--ink-2);
  background:var(--panel-4);
}
.dropdown-field-set{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(10px, 1.6vw, 18px);
  align-items:flex-end;
  justify-content:flex-start;
  overflow-x:hidden;
  min-width:0;
}
.dropdown-field-set.is-inline-labels{
  align-items:center;
}

/* Inline label + select (requested for compact filter rows) */
.dropdown-field-set > .field.is-inline,
.dropdown-field-set .field.is-inline{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  min-width:0;
}
.dropdown-field-set > .field.is-inline > .label,
.dropdown-field-set .field.is-inline > .label{
  margin:0;
  white-space:nowrap;
}
.dropdown-field-set > .field.is-inline > select,
.dropdown-field-set .field.is-inline > select,
.dropdown-field-set > .field.is-inline > input[type="text"],
.dropdown-field-set .field.is-inline > input[type="text"],
.dropdown-field-set > .field.is-inline > input[type="search"],
.dropdown-field-set .field.is-inline > input[type="search"]{
  flex:1 1 auto;
  min-width:0;
}
.dropdown-field-set.is-nowrap{
  flex-wrap:nowrap;
}

/* Grooming: when we force a single-row layout, allow horizontal scroll (hidden) instead of clipping/wrapping */
.grooming-subtoolbar .dropdown-field-set.is-nowrap{
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
}
.grooming-subtoolbar .dropdown-field-set.is-nowrap::-webkit-scrollbar{ display:none; }

/* Grooming: match screenshot dropdown compact width */
.grooming-subtoolbar #groomingBodyGroomType,
.grooming-subtoolbar #groomingBodyGroomColor,
.grooming-subtoolbar #groomingMakeupSubtype,
.grooming-subtoolbar #groomingMakeupType,
.grooming-subtoolbar #groomingMakeupColor{
  width:120px;
  max-width:120px;
}
.dropdown-field-set > .field{
  flex:0 1 var(--control-max-width);
  min-width:var(--dropdown-width-min);
  max-width:var(--control-max-width);
}
.dropdown-field-set > .field.field--wide{
  flex:0 1 var(--control-max-width);
  max-width:var(--control-max-width);
}
.dropdown-field-set > .field.field--stretch,
.dropdown-field-set > .field.field--actions,
.dropdown-field-set > .field.field--full{
  flex:0 0 auto;
  max-width:none;
}
.dropdown-field-set > .filters-service-cta{
  margin-left:auto;
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
  flex:0 0 auto;
  align-self:center;
}

/* Scene & Luci: UNA SOLA RIGA - titoli Scene/Luci, filtri, Applica/Pulisci a destra */
.scene-header--single .scene-header__row{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:var(--dropdown-gap-min) !important;
  width:100% !important;
}
.scene-header--single .scene-view-toggle{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  flex:0 0 auto !important;
}
.scene-header--single .filters-service-cta{
  margin-left:auto !important;
  flex:0 0 auto !important;
}

/* Grooming: align Apply/Clear with dropdowns (bottom aligned like screenshot) */
.grooming-subtoolbar #groomingDynamicFiltersRow.dropdown-field-set > .filters-service-cta{
  margin-left:auto;
  flex:0 0 auto;
  align-self:center;
  align-items:center;
}

/* Body Groom: align dropdowns + Apply/Clear with the chip row (raise them slightly) */
.grooming-subtoolbar #groomingDynamicFiltersRow.is-bodygroom{
  align-items:center;
}
.grooming-subtoolbar #groomingDynamicFiltersRow.is-bodygroom > .filters-service-cta{
  align-self:center;
  align-items:center;
}
.dropdown-field-set > .filters-service-cta .btn{
  width:auto;
  min-width:auto;
  max-width:none;
  white-space:nowrap;
}
.dropdown-field-set select,
.dropdown-field-set input[type="search"]{
  width:100%;
  max-width:var(--control-max-width);
}
select,
input[type="search"]{
  width:100%;
  max-width:var(--control-max-width);
}

/* Optional narrower field sizes (used in Scene & Luci to keep everything on one row) */
.dropdown-field-set > .field.field--xs{ flex:0 1 120px; min-width:90px; max-width:120px; }
.dropdown-field-set > .field.field--sm{ flex:0 1 140px; min-width:110px; max-width:140px; }
.dropdown-field-set > .field.field--md{ flex:0 1 160px; min-width:120px; max-width:160px; }
/* Compact database selectors: optimized for space - UNIFORME PER TUTTE LE TAB */
.db-pair,
.arch-db{
  display:flex !important;
  gap:18px !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  overflow-x:hidden;
  min-width:0;
  margin:0 !important;
}

.db-pair.is-compact,
.arch-db.is-compact{
  gap:18px !important;
}

/* Uniformità database in tutte le tab: larghezza, allineamento, distanza */
.db-pair > div,
.db-pair > .field,
.arch-db > div,
.arch-db > .field{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:6px !important;
  flex:0 0 auto !important;
  min-width:auto !important;
  max-width:none !important;
  width:auto !important;
  margin:0 !important;
  margin-right:0 !important;
  flex-shrink:0 !important;
}

/* Consolidated select rules - removed duplicate */
.db-pair > div > select,
.db-pair > .field > select,
.arch-db > div > select,
.arch-db > .field > select{
  flex:0 0 var(--db-width-max);
  min-width:var(--db-width-min);
  max-width:var(--db-width-max);
  width:var(--db-width-max);
}

.db-pair.is-compact > div,
.db-pair.is-compact > .field{
  flex-direction:row;
  align-items:center;
  gap:6px;
}

/* Increased specificity for label.sm to avoid !important */
.db-pair > div > .label.sm,
.db-pair > .field > .label.sm,
.arch-db > div > .label.sm,
.arch-db > .field > .label.sm,
.db-pair .label.sm.label,
.arch-db .label.sm.label{
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--ink-3);
  white-space:nowrap;
  margin:0;
  min-width:auto;
  display:block;
  visibility:visible;
  opacity:1;
}

/* Increased specificity for select to avoid !important */
.db-pair > div > select,
.db-pair > .field > select,
.arch-db > div > select,
.arch-db > .field > select,
.db-pair select[class],
.arch-db select[class]{
  max-width:var(--db-width-max);
  min-width:var(--db-width-min);
  width:var(--db-width-max);
  font-size:12px;
  padding:6px 24px 6px 8px;
  height:28px;
  appearance:auto;
  -webkit-appearance:menulist;
  -moz-appearance:menulist;
  background-image:none;
}

@media (max-width:1200px){
  .dropdown-field-set.is-nowrap{ flex-wrap:wrap; }
  .db-pair{ flex-wrap:wrap; }
}

/* Keep Grooming single-row bars stable even under the global <1200px wrap rule */
.grooming-subtoolbar .dropdown-field-set.is-nowrap{ flex-wrap:nowrap; }

.dropdown-field-set > .db-pair{
  flex:2 1 0;
  min-width:0;
}

.dropdown-field-set > .dyn-db{
  flex:2 1 0;
  min-width:0;
}

.dropdown-field-set > .scene-view-toggle,
.dropdown-field-set > .props-mode{
  flex:0 0 auto;
  min-width:0;
}

.dropdown-field-set > .grooming-filters{
  display:contents;
}

.grooming-filters[hidden]{
  display:none !important;
}

.filters-divider{
  width:1px;
  min-width:1px;
  background:var(--line-1);
  align-self:stretch;
  opacity:.9;
}

.wiz-acc-divider{
  height:1px;
  background:var(--line-1);
  margin:6px 0;
}

.wiz-acc{
  background:var(--panel-2);
  border:1px solid var(--line-1);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.wiz-acc + .wiz-acc{ margin-top:0; }
.wiz-acc summary{
  list-style:none;
  cursor:pointer;
  padding:12px 18px;
  font-weight:700;
  font-size:14px;
  line-height:1.25;
  letter-spacing:.02em;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--panel-2);
  color:var(--ink-1);
}
.wiz-acc summary::-webkit-details-marker{ display:none; }
.wiz-acc summary::after{
  content:"^";
  font-size:11px;
  transform:rotate(180deg);
  transition:transform .2s ease;
}
.wiz-acc[open] summary::after{ transform:rotate(0deg); }
.wiz-acc:focus-visible,
.wiz-acc summary:focus-visible{ outline:2px solid var(--blue-light); outline-offset:2px; }

.wiz-leftcol{
  display:flex;
  flex-direction:column;
  min-height:0;
  max-height:100%;
  width:100%;
  min-width:0;
}
.wiz-panel{
  background:var(--panel-2);
  border:1px solid var(--line-1);
  border-radius:22px;
  padding:18px;
  margin:0;
  box-shadow:var(--shadow-sm);
  display:none !important;
  flex:1 1 auto;
  min-height:0;
  min-width:0;
  width:100%;
  max-width:100%;
  overflow:hidden;
}
.wiz-panel.active{
  display:flex !important;
  flex-direction:column;
}

/* Layout standard uniforme per tutte le tab */
/* Standard tab header: uniform padding, spacing, and layout */
.tab-header{
  flex-shrink:0;
  margin-bottom:10px;
  padding:8px 12px;
  border:1px solid var(--line-1);
  border-radius:10px;
  background:var(--panel-4);
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Database Row (identica per tutte le tab) */
.tab-header__databases{
  background:var(--panel-3);
  border:1px solid var(--line-2);
  border-radius:12px;
  padding:12px 12px 12px 16px;
  margin-bottom:6px;
}

.db-row{
  display:flex;
  flex-wrap:nowrap;
  gap:var(--db-gap);
  align-items:center;
  justify-content:space-between;
}

.db-row > .field{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
}

.db-row__all-caps{ flex:0 0 auto; align-items:center; }
#tab-outfit .db-row .db-row__gender{
  flex:0 0 auto;
  display:flex;
  align-items:center;
}
#tab-outfit .db-row .db-row__gender .outfit-gender-toggle{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:8px;
}
#tab-outfit .db-row .db-row__gender .outfit-gender-toggle .btn-pill{
  min-width:64px;
  padding:0 12px;
  font-size:12px;
  flex:0 0 auto;
}
/* Stessa distanza All Caps–Tutti e Unisex–Cerca: niente margin-left auto sul search in outfit */
#tab-outfit .db-row > .field.field--search{
  margin-left:0;
}
.db-row__all-caps-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  font-size:12px;
  color:var(--ink-2);
  white-space:nowrap;
}
.db-row__all-caps-label input{ margin:0; }
.db-row > .field.field--search{
  flex:0 0 auto;
  margin-left:auto;
  min-width:200px;
  max-width:280px;
  margin-right:0;
}

.db-row > .field > .label{
  font-size:11px;
  font-weight:600;
  color:var(--ink-3);
  text-transform:uppercase;
  letter-spacing:0.04em;
  white-space:nowrap;
  margin:0;
  min-width:26px;
}

.db-row > .field > select{
  min-width:var(--db-width-min);
  max-width:120px;
  flex:1;
  height:var(--control-height);
  padding:0 var(--control-pad-x);
  font-size:var(--control-font-size);
  border-radius:var(--control-radius);
  background:var(--panel-1);
  border:1px solid var(--line-1);
  color:var(--ink-2);
}

.db-row > .field--search > input[type="search"]{
  width:100%;
  height:var(--control-height);
  padding:0 var(--control-pad-x);
  font-size:var(--control-font-size);
  border-radius:var(--control-radius);
  background:var(--panel-1);
  border:1px solid var(--line-1);
  color:var(--ink-2);
}

/* Archetipi: box database più fine/compatto */
#tab-archetypes .arch-toolbar__db-box{
  padding:8px 12px;
  border:1px solid var(--line-1);
  border-radius:10px;
  background:var(--panel-3);
  box-shadow:var(--shadow-xs);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-bottom:0;
}


#tab-archetypes .arch-toolbar__bottom{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:10px;
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
}

#tab-archetypes .arch-toolbar__bottom .arch-view-switch{
  flex:0 0 auto;
  margin-right:0;
}

#tab-archetypes .arch-toolbar__bottom .arch-mode{
  flex:0 0 auto;
}

#tab-archetypes .arch-toolbar__bottom .arch-filters{
  flex:1 1 auto;
  min-width:0;
}

#tab-archetypes .arch-toolbar__bottom .filters-service-cta{
  flex:0 0 auto;
}
/* Layout unificato come Scene e Luci: 1.5fr + 1fr per colonna cards e preview */
.tab-body{
  display:grid;
  grid-template-columns:minmax(0, 1.5fr) minmax(320px, 1fr);
  grid-template-rows:minmax(0, 1fr);
  gap:20px;
  align-items:stretch;
  flex:1;
  min-height:0;
  overflow:hidden;
  width:100%;
}
.tab-body__cards{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  overflow:hidden;
}
/* PREVIEW: regole base per tutti i preview panel */
.tab-body__preview{
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:var(--chip-shell-pad);
  background:var(--panel-3);
  border:1px solid var(--line-1);
  border-radius:var(--chip-shell-radius);
  scrollbar-width:thin;
  scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);
}
:root[data-theme="light"] .tab-body__preview{
  background:var(--panel-2);
}
.tab-body__preview::-webkit-scrollbar{ width:8px; }
.tab-body__preview::-webkit-scrollbar-thumb{
  background:var(--scrollbar-thumb);
  border-radius:4px;
}
.tab-body__preview::-webkit-scrollbar-track{
  background:var(--scrollbar-track);
}
:root[data-theme="light"] .tab-body__preview::-webkit-scrollbar-track{
  background:rgba(180,185,195,.9);
}

/* Assicura che chip-panel dentro tab-body__cards abbia altezza corretta */
.tab-body__cards > .chip-panel{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}
.tab-body__cards > .chip-panel > .chip-panel__body{
  flex:1;
  min-height:0;
  overflow:hidden;
}
.tab-body__cards > .arch-panel{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}
.tab-body__cards > .arch-panel > .arch-card-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
}
/* Body Morph: container card */
#tab-bodymorph .tab-body__cards > .chip-panel > .chip-panel__body > .chip-panel__scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
}
/* ARCHETIPI: .arch-preview-board riempie tutto lo spazio disponibile */
.arch-preview-board{
  background:var(--panel-4);
  border:1px solid var(--line-1);
  border-radius:12px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:16px;
  flex:1 1 auto;
  min-height:0;
}
:root[data-theme="light"] .arch-preview-board,
:root[data-theme="light"] #tab-archetypes .arch-preview-board{
  background:var(--panel-3);
  border:1px solid var(--line-1);
}
/* Archetipi: TUTTI i container devono espandersi verticalmente */
#tab-archetypes .tab-body__preview{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  min-width:0;
  overflow:hidden;
}
#tab-archetypes .tab-body__preview > .section-block{
  min-width:0;
}
#tab-archetypes .arch-preview-board{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  padding:12px;
  gap:10px;
}
#tab-archetypes .arch-preview-board__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-shrink:0;
  margin-bottom:0;
}
#tab-archetypes .arch-preview-board__header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
#archPreviewSave{
  height:26px;
  padding:0 8px;
  font-size:11px;
  background:var(--blue) !important;
  border-color:var(--blue) !important;
  color:#fff !important;
}
:root[data-theme="light"] #tab-archetypes #archPreviewSave,
:root[data-theme="light"] #archPreviewSave{
  background:var(--blue) !important;
  border-color:var(--blue) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
#tab-archetypes .arch-preview-board__label{
  margin:0;
  font-size:12px;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--ink-2);
}
#tab-archetypes .arch-preview-cards{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
  min-height:0;
  min-width:0;
  overflow-y:auto;
  overflow-x:clip;
}
#tab-archetypes .arch-preview-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px 12px;
  border:1px solid var(--line-1);
  border-radius:8px;
  background:var(--panel-3);
  flex-shrink:0;
  min-width:0;
}
#tab-archetypes .arch-preview-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
#tab-archetypes .arch-preview-card__label{
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--ink-2);
}
#tab-archetypes .arch-preview-card__body{
  display:flex;
  flex-direction:column;
  gap:0;
  min-height:0;
}
#tab-archetypes .arch-preview-card__textarea{
  min-width:0;
  min-height:90px;
  max-height:50vh;
  resize:vertical;
  font-size:12px;
  box-sizing:border-box;
}
#tab-archetypes .arch-preview-card[data-placeholder="true"]{
  padding:8px 12px;
}
#tab-archetypes .arch-preview-card[data-placeholder="true"] .arch-preview-card__body{
  margin:0;
}
.rn-panel{
  margin-top:0;
}
.wiz-main{
  --layout-track-available:calc(100% - var(--layout-gap));
  --layout-left-col:calc(var(--layout-track-available) * var(--layout-left-fr));
  --layout-right-col:calc(var(--layout-track-available) * var(--layout-right-fr));
  flex:1;
  min-height:0;
  overflow:hidden;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,var(--layout-left-col)) minmax(0,var(--layout-right-col));
  gap:var(--layout-gap);
  align-items:stretch;
  padding:clamp(12px,2vw,24px) var(--layout-pad) 150px;
  max-width:var(--page-max);
  margin-inline:auto;
  box-sizing:border-box;
}
.wiz-rightcol{ min-width:0; min-height:0; overflow:hidden; width:100%; }
.prompt-column{
  position:sticky;
  top:8px;
  max-height:100%;
  width:100%;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-bottom:8px;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
}

/* Compact layout: meno spazio verticale, textarea prompt finale più alta */
.prompt-column--compact{ gap:4px; }

/* Titolo PROMPT FINALE più piccolo e più in alto (occupa meno spazio) */
.prompt-column__header--compact .prompt-column__title--compact{
  margin:0; padding:0; line-height:1;
}
.prompt-column__title--compact h3{
  font-size:10px;
  letter-spacing:.05em;
  margin:0;
  padding:0 0 2px 0;
}

.prompt-column__header--compact{
  gap:4px;
  padding-inline:clamp(8px, 2vw, 20px);
}
.prompt-column__header--compact .prompt-column__toprow{ gap:6px; align-items:center; }
.prompt-column__header--compact .prompt-mode-toggle__btn{
  font-size:11px; padding:0 8px; min-height:20px; height:20px; max-height:20px; line-height:1;
}
/* Svuota tutto e RESET 30px altezza (override .btn.tiny che viene dopo) */
.prompt-column--compact .prompt-column__actions .btn,
.prompt-column--compact .prompt-column__actions .btn.tiny,
.prompt-column--compact .prompt-column__actions .btn.danger,
.prompt-column--compact .prompt-column__actions .btn.ghost{
  font-size:11px;
  padding:0 10px;
  min-height:30px !important;
  height:30px !important;
  max-height:30px !important;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.prompt-column__header--compact .prompt-column__secondrow{ padding:2px 0 4px; }
.prompt-column__header--compact .prompt-automatic-grid{ padding:6px; gap:6px; }
.prompt-column__header--compact .prompt-automatic-grid .prompt-mode-toggle__btn{
  font-size:10px;
  min-height:30px;
  padding:0 6px;
}
.prompt-column__header--compact .prompt-prefix-secondrow-inner{ gap:6px; }
.prompt-column__header--compact .prompt-prefix-target-row{
  padding:8px 10px;
  gap:6px;
  font-size:10px;
}
.prompt-column__header--compact .prompt-prefix-target-row__label{ font-size:9px; }
.prompt-column__header--compact .prompt-prefix-target-chip{
  padding:2px 6px;
  min-height:18px;
  font-size:10px;
}
.prompt-column__header--compact .prompt-prefix-target-override-input{
  padding:2px 6px;
  font-size:10px;
  max-width:110px;
}
.prompt-column__header--compact .prompt-prefix-target-row__sep{ height:12px; }

/* Distanza tra bottoni principali (Crea/Trasforma/SOLO/Svuota/RESET) e blocchi azzurri nascondi/mostra */
.prompt-column--compact #promptSectionToggles{ margin-top:10px; }
/* Distanza tra blocchetto nascondi/mostra e blocchetto titoletti sotto */
.prompt-column--compact #promptSectionTitleToggles{ margin-top:8px; }

.prompt-column .prompt-section-toggle-row--compact{
  padding:4px 8px;
  gap:3px;
}
.prompt-column .prompt-section-toggle-row--compact .prompt-section-toggle-row__line{ gap:4px; }
.prompt-column .prompt-section-toggle-row--compact .prompt-section-toggle-btn{
  min-height:18px; height:18px; max-height:18px;
  padding:0 8px; font-size:10px;
}
.prompt-column .prompt-section-toggle-row--compact .prompt-section-title-btn{
  min-height:18px; height:18px; padding:0 8px; font-size:10px;
}
.prompt-column .prompt-alias-row--compact{
  padding:4px 8px;
  gap:6px;
}
.prompt-column .prompt-box{
  flex:1 1 0;
  min-height:160px;
  margin-bottom:4px;
  padding:6px 8px;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.prompt-column .prompt-box-header{ margin-bottom:4px; flex-shrink:0; }
.prompt-column .prompt-box-body{ flex:1 1 0; min-height:0; display:flex; flex-direction:column; }
.prompt-column .prompt-box-body .prompt-highlight-wrap{ flex:1 1 0; min-height:120px; }
.prompt-column .prompt-box-body #promptIT{ min-height:120px; height:100%; }

.prompt-column__header{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
  padding-inline:clamp(10px, 3vw, 24px);
}
.prompt-column__toprow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.prompt-column__secondrow{
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding:2px 0;
}
.prompt-prefix-secondrow-inner{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  width:100%;
  min-width:0;
}

/* Griglia 4×4: template automatici (stessa altezza, stessa larghezza colonna) */
.prompt-automatic-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
  width:100%;
  min-width:0;
  padding:10px;
  box-sizing:border-box;
  background:var(--bg-subtle);
  border:1px solid var(--line-1);
  border-radius:10px;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
.prompt-automatic-grid .prompt-prefix-row__slot{
  min-width:0;
  display:flex;
  align-items:stretch;
}
.prompt-automatic-grid .prompt-automatic-grid__cell{
  width:100%;
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  padding:0;
  border-radius:8px;
  overflow:hidden;
  background:var(--bg);
  border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  transition:border-color .15s, box-shadow .15s;
}
.prompt-automatic-grid .prompt-automatic-grid__cell:hover{
  border-color:color-mix(in srgb, var(--blue) 35%, var(--border));
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.prompt-automatic-grid .prompt-automatic-grid__cell .prompt-mode-toggle__btn{
  flex:1;
  width:100%;
  min-width:0;
  min-height:36px;
  height:auto;
  max-height:none;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.02em;
  border-radius:0;
  border:none;
  padding:8px 6px;
  line-height:1.15;
  white-space:normal;
  text-align:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.prompt-automatic-grid .prompt-mode-toggle__btn.active,
.prompt-automatic-grid .prompt-mode-toggle__btn[aria-pressed="true"]{
  background:linear-gradient(180deg, color-mix(in srgb, var(--blue) 22%, var(--bg)) 0%, color-mix(in srgb, var(--blue) 12%, var(--bg)) 100%);
  color:var(--fg);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--blue) 45%, transparent);
}

.prompt-column__secondrow .prompt-prefix-row{
  display:flex;
  flex-wrap:wrap;
  width:100%;
  max-width:100%;
  gap:8px;
  justify-content:flex-start;
  align-items:center;
  min-height:26px;
  overflow-x:visible;
  overflow-y:visible;
  box-sizing:border-box;
}

/* Toolbar preset sotto la griglia: pulsanti allineati in altezza */
.prompt-preset-toolbar{
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--line-1);
  background:var(--bg-subtle);
}
.prompt-preset-toolbar__modes{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  flex:1;
  min-width:0;
}

/* Pannelli contestuali (grooming, target, preset): layout e azioni Applica / Pulisci distinte */
.prompt-context-panel{
  border-left:3px solid var(--blue);
  box-shadow:0 1px 3px rgba(0,0,0,.07);
}
.prompt-context-panel__main{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  flex:1;
  min-width:0;
}
.prompt-context-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  align-self:center;
  margin-left:auto;
  padding:2px 0 2px 12px;
  border-left:1px solid var(--line-1);
}
.prompt-context-segment{
  border-radius:8px;
  padding:2px;
  background:var(--panel-2);
  border:1px solid var(--line-1);
}
.prompt-context-chips,
.prompt-context-flags{
  gap:5px;
}
.prompt-context-btn{
  min-height:30px;
  padding:0 12px;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.02em;
  border-radius:8px;
}
.prompt-context-btn--apply.btn.prim,
.btn.prim.prompt-context-btn--apply{
  border:none;
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 2px 6px rgba(0,80,200,.2);
}
.prompt-context-btn--clear{
  background:transparent !important;
  color:var(--ink-2) !important;
  border:1px dashed var(--border) !important;
  font-weight:600;
}
.prompt-context-btn--clear:hover,
.prompt-context-btn--clear:focus-visible{
  color:var(--red) !important;
  border-color:var(--red-soft) !important;
  border-style:solid !important;
  background:rgba(177,50,65,.1) !important;
}
:root[data-theme="light"] .prompt-context-btn--clear:hover,
:root[data-theme="light"] .prompt-context-btn--clear:focus-visible{
  background:#fdeef0 !important;
}
.prompt-preset-rn-toggle{
  font-size:10px;
  font-weight:700;
  padding:0 8px;
  min-height:26px;
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--panel-3);
}
.prompt-preset-rn-toggle.active,
.prompt-preset-rn-toggle[aria-pressed="true"]{
  background:var(--panel-3);
  border-color:var(--blue);
  color:var(--fg);
  box-shadow:0 0 0 1px var(--blue);
}
@media (max-width:420px){
  .prompt-context-actions{
    margin-left:0;
    width:100%;
    justify-content:flex-end;
    border-left:none;
    border-top:1px solid var(--line-1);
    padding:8px 0 0;
  }
}

/* Barra Preset (Crea/Trasforma, R/N, Applica / Pulisci) */
#promptPresetRow.prompt-grooming-row.prompt-preset-toolbar{
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  min-height:0;
}
#promptPresetRow .prompt-grooming-row__sep{
  height:14px;
  margin:0 2px;
  flex-shrink:0;
}
#promptPresetRow .prompt-grooming-mode{
  flex-shrink:0;
  padding:2px;
  gap:3px;
}
#promptPresetRow .prompt-grooming-mode .prompt-mode-toggle__btn{
  font-size:10px;
  padding:0 8px;
  min-height:26px;
  height:auto;
  max-height:none;
  font-weight:600;
}
/* Selezione Crea / Trasforma: stato attivo ben visibile */
#promptPresetRow .prompt-grooming-mode .prompt-mode-toggle__btn.active,
#promptPresetRow .prompt-grooming-mode .prompt-mode-toggle__btn[aria-pressed="true"]{
  background:var(--blue, #4a7cff) !important;
  color:#fff !important;
  box-shadow:0 0 0 1px var(--blue, #4a7cff);
}
#promptPresetRow .prompt-grooming-mode .prompt-mode-toggle__btn:not(.active)[aria-pressed="false"]{
  background:transparent;
  color:var(--ink-2, var(--fg));
}
:root[data-theme="light"] #promptPresetRow .prompt-grooming-mode .prompt-mode-toggle__btn.active,
:root[data-theme="light"] #promptPresetRow .prompt-grooming-mode .prompt-mode-toggle__btn[aria-pressed="true"]{
  background:#4a7cff !important;
  color:#fff !important;
  box-shadow:0 0 0 1px #4a7cff;
}
#promptPresetRow .prompt-preset-row__action.prompt-context-btn--apply{
  min-height:32px;
  padding:0 16px;
  font-size:11px;
}
#promptPresetRow .prompt-preset-row__action.prompt-context-btn--clear{
  min-height:32px;
  padding:0 14px;
  font-size:11px;
}
.prompt-column__header--compact #promptPresetRow.prompt-grooming-row.prompt-preset-toolbar{
  padding:8px 10px;
  gap:8px;
}
.prompt-column__header--compact #promptPresetRow .prompt-grooming-mode .prompt-mode-toggle__btn{
  font-size:9px;
  padding:0 6px;
  min-height:24px;
}
.prompt-column__header--compact #promptPresetRow .prompt-preset-rn-toggle{
  font-size:9px;
  min-height:24px;
  padding:0 6px;
}
.prompt-column__header--compact #promptPresetRow .prompt-preset-row__action.prompt-context-btn--apply,
.prompt-column__header--compact #promptPresetRow .prompt-preset-row__action.prompt-context-btn--clear{
  min-height:28px;
  font-size:10px;
  padding:0 12px;
}
.prompt-prefix-row{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
}
.prompt-prefix-row__slot{ min-width:0; flex:0 0 auto; display:flex; align-items:center; overflow:visible; }
.prompt-prefix-row__slot .prompt-mode-toggle__btn{ position:relative; z-index:1; cursor:pointer; pointer-events:auto; }
.prompt-prefix-row__slot--left{ justify-self:auto; }
.prompt-prefix-row__slot--center{ justify-self:auto; }
.prompt-prefix-row__slot--right{ justify-self:auto; }
.prompt-mode-toggle--solo{
  padding:2px;
  display:inline-flex;
  align-items:center;
}

.prompt-column__secondrow .prompt-prefix-row{ gap:6px; }
.prompt-column__secondrow .prompt-prefix-row__slot{ flex:0 0 auto; min-width:0; }
/* #promptPrefixToggle è ora .prompt-automatic-grid: stili nel blocco .prompt-automatic-grid sopra */
.prompt-prefix-target-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  min-width:0;
  padding:10px 12px;
  font-size:10px;
  line-height:1.2;
  background:var(--bg-subtle);
  border:1px solid var(--line-1);
  border-radius:10px;
  box-sizing:border-box;
}
.prompt-prefix-target-row.prompt-context-panel{
  justify-content:space-between;
}
.prompt-prefix-target-layout{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
}
.prompt-prefix-target-rowline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  width:100%;
}
.prompt-prefix-target-rowline--top .prompt-prefix-target-override-input{
  flex:1 1 240px;
  min-width:180px;
}
.prompt-prefix-target-row__label{
  color:var(--muted);
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  flex-shrink:0;
}
.prompt-prefix-target-chips{
  display:flex;
  gap:4px;
  align-items:center;
  flex-shrink:0;
}
.prompt-prefix-target-chip{
  padding:2px 6px;
  min-height:20px;
  border-radius:4px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--fg);
  cursor:pointer;
  font-size:10px;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .15s, border-color .15s, color .15s;
}
.prompt-prefix-target-chip:hover{ background:var(--bg-hover); border-color:var(--border); }
.prompt-prefix-target-chip.active{
  font-weight:700;
}
.prompt-prefix-target-chip[data-target="person1"].active{
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
  box-shadow:0 0 0 2px var(--blue);
}
.prompt-prefix-target-chip[data-target="person2"].active{
  background:var(--cyan);
  color:#030814;
  border-color:var(--cyan);
  box-shadow:0 0 0 2px var(--cyan);
}
.prompt-prefix-target-chip[data-target="both"].active{
  background:var(--warn);
  color:#1a1500;
  border-color:var(--warn);
  box-shadow:0 0 0 2px var(--warn);
}
.prompt-pose-scope-chips{
  gap:6px;
}
.prompt-pose-scope-chip{
  min-height:28px;
  padding:4px 12px;
  border-radius:8px;
  font-size:12px;
  font-weight:700;
}
.prompt-pose-scope-chip.active,
.prompt-pose-scope-chip[aria-pressed="true"]{
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--blue) 65%, transparent);
}
.prompt-column__header--compact .prompt-pose-scope-chip{
  min-height:28px !important;
  padding:4px 12px !important;
  font-size:12px !important;
  border-radius:8px !important;
}
#promptPrefixTargetActions{
  flex-direction:column;
  align-items:stretch;
  gap:6px;
}
#promptPrefixTargetActions .prompt-context-btn{
  width:100%;
  justify-content:center;
  min-width:98px;
}
.prompt-prefix-target-row__sep{
  width:1px;
  height:16px;
  background:var(--line-1);
  flex-shrink:0;
  margin:0 2px;
}
.prompt-prefix-target-override-label{
  color:var(--muted);
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  flex-shrink:0;
}
.prompt-prefix-target-override-input{
  width:100%;
  min-width:60px;
  max-width:100px;
  padding:2px 6px;
  font-size:10px;
  border:1px solid var(--border);
  border-radius:4px;
  background:var(--bg);
  color:var(--fg);
  box-sizing:border-box;
}
.prompt-prefix-target-override-input::placeholder{ color:var(--muted); }
.prompt-prefix-target-override-input:focus{
  outline:none;
  border-color:var(--accent);
}
.prompt-prefix-target-apply.prompt-context-btn--apply{
  flex-shrink:0;
}
.prompt-prefix-target-clear.prompt-context-btn--clear{
  flex-shrink:0;
}
@media (max-width:380px){
  .prompt-prefix-target-row{ flex-wrap:wrap; gap:4px; }
}
.prompt-grooming-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  min-width:0;
  padding:10px 12px;
  font-size:10px;
  line-height:1.2;
  background:var(--bg-subtle);
  border:1px solid var(--line-1);
  border-radius:10px;
  box-sizing:border-box;
}
.prompt-grooming-row.prompt-context-panel{
  align-items:center;
}
.prompt-grooming-row .prompt-context-panel__main{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 8px;
  min-width:0;
  overflow-x:hidden;
}
.prompt-grooming-rowline{
  display:flex;
  align-items:center;
  gap:6px;
  flex:1 1 100%;
  min-width:0;
}
.prompt-grooming-row__label{
  color:var(--muted);
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  flex-shrink:0;
}
.prompt-grooming-row .prompt-prefix-target-chips{
  display:flex;
  flex-wrap:nowrap;
  gap:4px;
  flex-shrink:0;
}
.prompt-grooming-row .prompt-prefix-target-chip[data-groom-target].active{
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--blue) 65%, transparent);
  font-weight:700;
}
.prompt-grooming-row__sep{
  width:1px;
  height:14px;
  background:var(--line-1);
  flex-shrink:0;
  margin:0 2px;
}
.prompt-grooming-row .prompt-grooming-mode .prompt-mode-toggle__btn{
  font-size:10px;
  padding:0 8px;
  min-height:26px;
  height:auto;
}
.prompt-grooming-flags{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  align-items:center;
}
.prompt-grooming-flag{
  padding:4px 10px;
  min-height:26px;
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--panel-2, var(--bg));
  color:var(--ink-2, var(--fg));
  cursor:pointer;
  font-size:10px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.prompt-grooming-flag:hover{
  background:var(--panel-3, var(--bg-hover));
  border-color:var(--blue, #4a7cff);
}
.prompt-grooming-flag[aria-pressed="true"],
.prompt-grooming-flag.active{
  background:var(--blue, #4a7cff);
  color:#fff;
  border-color:var(--blue, #4a7cff);
  box-shadow:0 0 0 1px var(--blue, #4a7cff);
}
.prompt-grooming-flag--coherence{
  margin-left:2px;
  padding-left:10px;
  border-left-width:3px;
  border-left-color:var(--line-2, rgba(0,0,0,.22));
}
:root[data-theme="light"] .prompt-grooming-flag{
  border-color:#b0b8c4;
  background:#fff;
  color:#1a1f2e;
}
:root[data-theme="light"] .prompt-grooming-flag:hover{
  border-color:#4a7cff;
  background:#e8eeff;
}
:root[data-theme="light"] .prompt-grooming-flag[aria-pressed="true"],
:root[data-theme="light"] .prompt-grooming-flag.active{
  background:#4a7cff;
  color:#fff;
  border-color:#4a7cff;
  box-shadow:0 0 0 2px rgba(74,124,255,.35);
}
.prompt-grooming-apply.prompt-context-btn--apply{
  flex-shrink:0;
}
.prompt-column__header--compact .prompt-grooming-row.prompt-context-panel{ padding:8px 10px; gap:8px; }
.prompt-column__header--compact .prompt-grooming-flag{ font-size:9px; padding:3px 7px; min-height:22px; }
.prompt-column__header--compact .prompt-context-btn{ min-height:28px; font-size:10px; padding:0 10px; }
.prompt-column__actions{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-end;
  flex-shrink:0;
}
.prompt-column__title{
  min-width:0;
  text-align:center;
}
.prompt-column__header h3{ margin:0; font-size:15px; letter-spacing:.10em; text-transform:uppercase; }
.prompt-column__header .btn{ flex-shrink:0; }
.prompt-section-toggle-row{
  border:1px solid var(--line-1);
  border-radius:14px;
  padding:10px 12px;
  background:rgba(8,17,32,.35);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.prompt-section-toggle-row--titles{
  padding:6px 10px;
  gap:5px;
  background:rgba(8,17,32,.25);
}
/* Light Mode: box grigio chiaro per blocchi finali, titoli, riferimenti */
:root[data-theme="light"] .prompt-section-toggle-row,
:root[data-theme="light"] .prompt-section-toggle-row--titles{
  background:var(--panel-2) !important;
  border:1px solid var(--line-1) !important;
}
.prompt-section-toggle-row__label{
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.prompt-section-toggle-row__list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:center;
}
.prompt-section-toggle-row__list--final{
  flex-direction:column;
  flex-wrap:nowrap;
  align-items:stretch;
}
.prompt-section-toggle-row__line{
  display:flex;
  gap:6px;
  justify-content:center;
  width:100%;
}
.prompt-section-toggle-row__line--three .prompt-section-toggle-btn{
  flex:0 0 calc((100% - 12px) / 3);
}
.prompt-section-toggle-row__line--four .prompt-section-toggle-btn{
  flex:0 0 calc((100% - 18px) / 4);
}
.prompt-section-toggle-row__line--five .prompt-section-toggle-btn{
  flex:0 0 calc((100% - 24px) / 5);
}
.prompt-section-toggle-row__line--six .prompt-section-toggle-btn{
  flex:0 0 calc((100% - 30px) / 6);
}
.prompt-section-toggle-btn{
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
  color:var(--ink-1);
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  padding:0 10px;
  min-height:20px;
  height:20px;
  max-height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  border-radius:999px;
  flex:0 0 calc((100% - 16px) / 3);
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.prompt-section-toggle-btn[aria-pressed="true"]{
  background:rgba(63,111,155,.25);
  border-color:rgba(63,111,155,.9);
  color:#e8f3ff;
  box-shadow:0 0 0 2px rgba(63,111,155,.4);
}
/* Light Mode: bottoni attivi con fondo azzurro pieno */
:root[data-theme="light"] .prompt-section-toggle-btn[aria-pressed="true"]{
  background:var(--blue) !important;
  border-color:var(--blue) !important;
  color:#ffffff !important;
  box-shadow:none !important;
}
.prompt-section-toggle-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.prompt-section-toggle-btn:focus-visible{
  outline:2px solid var(--blue-light);
  outline-offset:2px;
}
.prompt-section-title-btn{
  min-width:40px;
  padding:4px 12px;
  border-radius:12px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  justify-content:center;
  display:inline-flex;
  align-items:center;
}

.prompt-base-pose-row{
  padding:10px 12px;
  gap:8px;
}
.prompt-base-pose-row__list{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:8px;
}
.prompt-base-pose-row select{
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
  border-radius:8px;
  padding:6px 10px;
  font-size:13px;
  color:var(--text-1);
  min-width:140px;
}
.prompt-alias-row{
  padding:10px 12px;
  gap:8px;
  background:rgba(8,17,32,.25);
}
.prompt-alias-row__label-visible{
  position:static;
  width:auto;
  height:auto;
  padding:0;
  margin:0 8px 0 0;
  overflow:visible;
  clip:auto;
  clip-path:none;
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  flex-shrink:0;
}
.prompt-alias-row__list{
  display:flex;
  flex-wrap:nowrap;
  gap:18px;
  align-items:center;
  justify-content:center;
  width:100%;
}
.prompt-alias-row select,
.prompt-alias-row input{
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
  color:var(--ink-1);
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  padding:0 10px;
  min-height:20px;
  height:20px;
  max-height:20px;
  width:140px;
  max-width:140px;
  border-radius:999px;
  cursor:pointer;
}

#promptPersonAliasApply{
  min-height:20px;
  height:20px;
  padding:0 12px;
  font-size:11px;
}

@media (max-width:520px){
  .prompt-column__toprow{ flex-wrap:wrap; justify-content:center; }
  .prompt-column__actions{ width:100%; justify-content:center; }
}
.prompt-alias-row select:focus-visible,
.prompt-alias-row input:focus-visible{
  outline:2px solid var(--blue-light);
  outline-offset:2px;
}
.prompt-mode{
  grid-area:mode;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  width:100%;
  flex-wrap:nowrap;
}
.prompt-mode__label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink-3);
}
.prompt-mode-toggle{
  display:inline-flex;
  gap:4px;
  padding:4px;
  border-radius:999px;
  border:1px solid var(--line-1);
  background:var(--panel-3);
}
.prompt-mode-toggle__btn{
  border:none;
  background:transparent;
  color:var(--ink-2);
  font-weight:600;
  font-size:12px;
  text-transform:uppercase;
  padding:0 10px;
  min-height:20px;
  height:20px;
  max-height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  border-radius:999px;
  white-space:nowrap;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.prompt-mode-toggle__btn.active{
  background:var(--blue-light);
  color:#0c1723;
}
.prompt-mode-toggle__btn:focus-visible{
  outline:2px solid var(--blue-light);
  outline-offset:2px;
}
/* Balloon tooltip al passaggio del mouse */
.hover-balloon{
  position:fixed;
  z-index:10000;
  max-width:min(320px, 90vw);
  padding:10px 12px;
  font-size:12px;
  line-height:1.4;
  color:#0c1723;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:var(--control-radius);
  box-shadow:var(--shadow-sm);
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .15s ease, visibility .15s ease;
}
.hover-balloon.visible{
  opacity:1;
  visibility:visible;
}
.prompt-mode__clear{
  border:1px solid var(--red-soft);
  background:var(--red);
  color:#ffffff;
  font-weight:700;
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  cursor:pointer;
  transition:color .15s ease, background .15s ease;
}
.prompt-mode__clear:hover{
  color:#ffffff;
  background:var(--red-strong);
}
.prompt-mode__clear:focus-visible{
  outline:2px solid var(--blue-light);
  outline-offset:2px;
}
.prompt-mode__clear[disabled]{
  opacity:.4;
  cursor:default;
}

@media (max-width:1280px){
  .wiz-header__group{ gap:20px; }
  .wiz-header__right{ flex-wrap:wrap; justify-content:flex-start; }
}

.wiz-toast{
  position:fixed;
  left:50%;
  bottom:calc(var(--footer-h) + 20px);
  transform:translateX(-50%);
  background:var(--panel);
  border:1px solid var(--line-1);
  border-radius:999px;
  padding:10px 20px;
  color:var(--ink-1);
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  max-width:min(720px, 92vw);
  text-align:center;
  font-size:13px;
  line-height:1.4;
  z-index:20002;
  white-space:pre-line;
}
.wiz-toast[hidden]{ display:none; }
.wiz-toast[data-level="success"]{ border-color:var(--green, #4caf50); background:rgba(76, 175, 80, 0.1); }
.wiz-toast[data-level="warn"]{ border-color:#f0af43; }
.wiz-toast[data-level="error"]{ border-color:var(--red); background:var(--red); color:#fff; }
.wiz-toast[data-level="info"]{ border-color:var(--blue); }
@media (max-width:960px){
  .prompt-column{
    position:static;
    max-height:none;
    padding-bottom:24px;
  }
}

.wiz-panel h2{ margin:0 0 8px; font-size:14px; letter-spacing:.02em; color:var(--ink-1); }
.micro{ color:var(--ink-3); margin:0 0 12px; font-size:12px; }
.label{ color:var(--ink-2); font-size:12.5px; display:block; margin-bottom:6px; }
.label.sm{ font-size:11px; font-weight:600; margin-bottom:3px; }
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  border:0;
  white-space:nowrap;
}
.row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* Removed duplicate .db-pair rules - now handled above */

.dyn-db.is-compact{
  display:flex;
  flex-wrap:wrap;
  gap:var(--db-gap);
  align-items:center;
}
.dyn-db.is-compact .field{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
}
.dyn-db.is-compact .label{ margin:0; white-space:nowrap; }

.props-db.is-compact .field{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
}
.props-db.is-compact .label{ margin:0; white-space:nowrap; }
.db-pair > div{
  flex:0 0 var(--db-width-max);
  min-width:var(--db-width-min);
  max-width:var(--db-width-max);
}
@media (max-width:960px){
  .db-pair{ flex-wrap:wrap; }
  .db-pair > div{ flex:0 0 var(--db-width-max); }
}
#refreshCapsules{ min-width:160px; }
.wiz-header__right button,
.wiz-header__right .lang-toggle,
.wiz-header__right .theme-toggle{ flex-shrink:0; }
#refreshCapsules{ min-width:160px; }
@media (max-width:520px){
  .lang-toggle{ width:100%; justify-content:center; }
}
@media (max-width:960px){
  .library-panel,
  .library-panel__list{ max-height:none; }
}
/* Compact DB row for Scene & Luci */
.filters-db{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(var(--dropdown-gap-min), 3vw, var(--dropdown-gap-max));
  align-items:flex-end;
}
.mt{ margin-top:12px; }
.mt-sm{ margin-top:8px; }
.results{ display:flex; align-items:center; justify-content:space-between; }
.count-badge{ color:var(--ink-2); font-size:12.5px; }
.scroll-panel{ margin-top:12px; }

/* Tiny badge used inside filter buttons */
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 6px; margin-left:6px;
  border-radius:999px; background:var(--panel-4); color:var(--ink-2);
  border:1px solid var(--line-1); font-size:11px; line-height:1;
}

/* Inline labels for checkboxes with compact spacing */
.label-inline{ display:inline-flex; align-items:center; gap:6px; color:var(--ink-2); font-size:12.5px; }
.flag-row{ margin-top:12px; display:flex; flex-wrap:wrap; gap:12px; }
.flag-row .label-inline{ margin:0; }
.ml{ margin-left:8px; }

.makeup-area-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
  margin-bottom:20px;
}

/* Grooming: match the compact header screenshots */
.grooming-subtoolbar .makeup-area-chips{ margin:0; }
.grooming-subtoolbar .body-groom-type-picker{ margin-top:0; margin-bottom:0; }
#groomingBodyGroomNote.micro,
#groomingMakeupNote.micro{ margin:0; }

/* Grooming: make Make-up chips compact and keep them on one row */
.grooming-subtoolbar .makeup-area-chips{
  flex-wrap:nowrap;
  gap:6px;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
}
.grooming-subtoolbar .makeup-area-chips::-webkit-scrollbar{ display:none; }

.grooming-subtoolbar .makeup-area-chips .chip-toggle{
  min-width:0;
  padding:5px 14px;
  font-size:12px;
  text-align:center;
  white-space:nowrap;
}

/* Grooming: when filters are rendered via display:contents, these become direct flex children */
.dropdown-field-set > .makeup-area-chips,
.dropdown-field-set > .body-groom-type-picker,
.dropdown-field-set > #groomingMakeupNote,
.dropdown-field-set > #groomingBodyGroomNote{
  flex:0 1 auto;
  min-width:0;
}

.dropdown-field-set > #groomingMakeupNote,
.dropdown-field-set > #groomingBodyGroomNote{
  flex:1 1 100%;
}
.chip-toggle{
  border:1px solid transparent;
  background:var(--chip-bg);
  color:var(--chip-text);
  border-radius:999px;
  padding:6px 18px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  box-shadow:none;
}
.chip-toggle[aria-pressed="true"],
.chip-toggle.active{
  background:var(--chip-active-bg, var(--chip-card-selected-bg));
  color:var(--chip-active-text, var(--chip-card-selected-title, var(--chip-card-title)));
  border:1px solid var(--chip-active-border, var(--chip-card-selected-border));
  box-shadow:0 0 0 1px var(--chip-active-border, var(--chip-card-selected-border)), 0 2px 8px rgba(6,40,78,.3);
}
/* Ensure unselected chip-toggle buttons have no visible border or shadow */
.chip-toggle:not([aria-pressed="true"]):not(.active){
  border:1px solid transparent;
  box-shadow:none;
}
.chip-toggle:focus-visible{ outline:2px solid var(--blue-light); outline-offset:2px; }

/* Utility to align items to the end of grid cell */
.self-end{ align-self:end; }

select,
input[type="text"],
input[type="search"]{
  height:var(--control-height);
  padding:0 var(--control-pad-x);
  border-radius:var(--control-radius);
  background:var(--panel-4); color:var(--ink-1); border:1px solid var(--line-1);
  font-size:var(--control-font-size);
}
textarea{
  padding:8px 10px;
  min-height:180px;
  background:var(--panel-2);
  color:var(--ink-1);
  border:1px solid var(--line-1);
  border-radius:8px;
  resize:vertical;
}

.btn{
  border-radius:8px; height:32px; padding:0 12px; border:1px solid var(--line-1);
  background:var(--panel-3); color:var(--ink-1); cursor:pointer; font-weight:600;
}
.btn.small{ height:30px; padding:0 10px; font-size:12.5px; }
.btn.ghost{ border-color:var(--blue); }

/* Reinforce & Negative */
.rn-panel{ margin-top:12px; }
.rn-columns{ display:grid; grid-template-columns:minmax(0,var(--dual-cards-fr)) minmax(var(--dual-preview-min), var(--dual-preview-fr)); gap:24px; align-items:flex-start; }
@media (max-width:1200px){ .rn-columns{ grid-template-columns:1fr; } }
.rn-section{ background:var(--panel-2); border:1px solid var(--line-1); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:14px; }
.rn-overline{
  margin:0;
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:none;
  color:var(--ink-3);
}
.rn-section__head h3{
  margin:2px 0 4px;
  font-size:16px;
  font-weight:600;
  color:var(--ink-1);
}
.rn-section__desc{
  margin:0;
  color:var(--ink-3);
  font-size:12.5px;
  line-height:1.45;
  font-weight:400;
}
.rn-categorybar{ display:flex; flex-wrap:wrap; gap:8px; }
.rn-categorybar .btn-pill[disabled],
.rn-categorybar .btn-pill.is-disabled{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
}
.rn-placeholderbar{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:10px;
}
#tab-negative .rn-placeholderbar .field.is-inline{
  margin:0;
  min-width:120px;
}
#tab-negative .rn-placeholderbar .field.is-inline > select{
  min-width:100px;
}

/* Reinforce: categorie nella colonna sinistra */
#tab-negative .tab-body__cards .rn-categorybar{
  margin-bottom:16px;
}

/* Reinforce: tab-body come le altre tab - usa le stesse variabili */
#tab-negative .tab-body{
  display:grid;
  grid-template-columns:minmax(0,var(--dual-cards-fr)) minmax(var(--dual-preview-min), var(--dual-preview-fr));
  gap:24px;
  align-items:stretch;
  flex:1;
  min-height:0;
}

#tab-negative .tab-body__cards{
  flex:1;
  min-height:0;
}

#tab-negative .tab-body__cards > .chip-panel{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  height:100%;
}

#tab-negative .tab-body__cards > .chip-panel > .chip-panel__body{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

#tab-negative .tab-body__cards > .chip-panel > .chip-panel__body > .chip-panel__scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
}

#tab-negative .tab-body__cards > .chip-panel > .chip-panel__body > .chip-panel__scroll > .rn-modular{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* Reinforce: preview come Visual Styles (vs-detail) */
#tab-negative .tab-body__preview{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  height:100%;
  background:var(--panel-2);
}
.rn-modular{ display:block; }

/* RN cards: same layout rules as Outfit (2 per row, expanded height) */
.cards-scroll.rn-scroll{
  --rn-card-row-height:154px;
  --card-grid-row-height:var(--rn-card-row-height);
  /* max-height removed to allow full expansion */
}

#rnOptionList.cards-wrap{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-auto-rows:minmax(var(--card-grid-row-height), auto);
  gap:var(--grid-gap);
  align-content:flex-start;
}
@media (max-width:900px){
  #rnOptionList.cards-wrap{ grid-template-columns:1fr; }
}

.rn-cardlist .card{ min-height:120px; }

/* RN cards: match Outfit card styling */
#rnOptionList .card{
  display:flex;
  flex-direction:column;
  gap:0;
  min-height:120px;
  border-radius:14px;
  padding:var(--chip-card-pad);
  background:var(--chip-card-bg);
  border:1px solid var(--chip-card-border);
  box-shadow:var(--chip-card-shadow);
  cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
#rnOptionList .card.active{
  border-color:var(--chip-card-selected-border);
  box-shadow:var(--chip-card-selected-glow);
  background:var(--chip-card-selected-bg);
}
#rnOptionList .card.active .title{
  color:var(--chip-card-selected-title, var(--chip-card-title));
}
#rnOptionList .card.active .desc{
  color:var(--chip-card-selected-subtext, var(--chip-card-subtext));
}
.rn-cardlist .card .desc{
  color:var(--chip-card-subtext);
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:0;
  margin-top:var(--chip-card-gap-title-desc);
}
#rnOptionList .card .meta{
  margin-top:var(--chip-card-gap-desc-tags);
  margin-bottom:0;
  display:flex;
  flex-wrap:wrap;
  gap:var(--card-tag-row-gap);
  align-items:center;
}
#rnOptionList .card .meta .chip{
  flex:0 1 auto;
  padding:0 var(--chip-pill-pad);
  height:var(--chip-pill-height);
  min-height:var(--chip-pill-height);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.rn-selected{ display:block; }
.rn-selected__grid{ display:grid; grid-template-columns:1fr; gap:10px; }
.rn-selected__grid .outfit-preview-card{ min-height:96px; }
/* Reinforce: use compact cookie-style cards - 1/3 height, full width */
.rn-selected__grid .outfit-preview-card--compact{
  min-height:auto;
  height:auto;
  padding:2px 10px;
  width:100%;
}

/* RN selected (mini-cards): compact cookie-style - 1/3 height, full width */
.cards-scroll.rn-selected-scroll{
  --rn-selected-row-height:40px; /* 1/3 of 120px */
  --rn-selected-max-rows:2;
  max-height:calc((var(--rn-selected-row-height) * var(--rn-selected-max-rows)) + (10px * (var(--rn-selected-max-rows) - 1)) + (var(--inset-pad) * 2));
  background:var(--chip-shell-bg);
  border:1px solid var(--chip-shell-border);
  box-shadow:var(--chip-shell-shadow);
}
.rn-selected-scroll .rn-selected__grid{
  padding:var(--inset-pad);
  align-content:flex-start;
}
.rn-selected-scroll .outfit-preview-card{
  min-height:var(--rn-selected-row-height);
}
.rn-selected-scroll .outfit-preview-card--compact{
  min-height:var(--rn-selected-row-height);
  height:var(--rn-selected-row-height);
}
.rn-status{ margin-top:12px; font-size:12.5px; color:var(--ink-2); }
.rn-preview{ background:var(--panel-2); border:1px solid var(--line-1); border-radius:var(--chip-shell-radius); padding:var(--chip-shell-pad); display:flex; flex-direction:column; gap:var(--chip-shell-gap); box-shadow:none; flex:1; min-height:0; height:100%; }
.rn-preview__head h4{
  margin:0;
  font-size:15px;
  font-weight:600;
  color:var(--chip-shell-title);
}
.rn-preview__body{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
@media (max-width:520px){ .rn-preview__body{ grid-template-columns:1fr; } }
.rn-preview__empty{ background:transparent; border-radius:12px; padding:16px; font-size:13px; color:var(--chip-shell-text); }
.rn-actions{ margin:0 0 16px; display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; width:100%; }
.rn-actions .btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn.prim, .btn.primary{ background:var(--blue); border:none; color:#fff; }
.btn.danger{
  background:var(--red);
  border:1px solid var(--red-soft);
  color:#fff;
}
:root[data-theme="dark"] .btn.danger,
:root:not([data-theme="light"]) .btn.danger{
  box-shadow:0 2px 8px rgba(177,50,65,.2);
}
.btn.danger:hover,
.btn.danger:focus-visible{
  background:var(--red-strong);
  border-color:rgba(177,38,52,.65);
}
.btn:disabled{ opacity:.6; pointer-events:none; }
#refreshCapsules.busy{ opacity:.6; position:relative; }
#refreshCapsules.busy::after{ content:'⏳'; position:absolute; right:8px; top:50%; transform:translateY(-50%); }

.scroll-panel{
  max-height:var(--card-container-max);
  overflow:auto;
  padding: var(--inset-pad);
  min-height:0;
}

.scroll-panel dense{ max-height:calc((var(--card-min-h) * 2) + var(--grid-gap)); }

.cards-wrap{
  --card-grid-columns:2;
  display:grid;
  grid-template-columns:repeat(var(--card-grid-columns), minmax(0, var(--chip-card-max-width)));
  gap:var(--grid-gap);
  align-content:flex-start;
  justify-content:flex-start;
  justify-items:flex-start;
  grid-auto-rows:auto;
  padding:var(--inset-pad);
  min-height:0;
}
.cards-wrap > *{
  min-width:0;
  width:100%;
  max-width:var(--chip-card-max-width);
}
@media (max-width:520px){
  .prompt-column__header{
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "actions"
      "mode";
    row-gap:14px;
  }
  .prompt-column__actions{ justify-self:start; }
}
    justify-content:center;
  }
}
@media (min-width:1280px){
  .cards-wrap{ --card-grid-columns:3; }
}
@media (min-width:1600px){
  .cards-wrap{ --card-grid-columns:4; }
}

#vsCardList.cards-wrap,
#vsTransformList.cards-wrap,
#sceneList.cards-wrap,
#lightList.cards-wrap,
/* Increased specificity for card grids to avoid !important */
#archPresetList.cards-wrap[class],
#outfitList.cards-wrap[class],
#dynList.cards-wrap[class],
#propsCardGrid.cards-wrap[class],
#presetList.cards-wrap[class],
#rnPresetList.cards-wrap[class],
#groomingHairList.cards-wrap[class],
#groomingBeardList.cards-wrap[class],
#groomingMakeupList.cards-wrap[class],
#groomingBodyGroomList.cards-wrap[class],
#bodyMorphList.cards-wrap[class]{
  --card-grid-columns:2;
  grid-template-columns:repeat(2, minmax(0, var(--chip-card-max-width)));
}

/* Forza sempre 2 card per riga per Grooming, anche con media queries */
@media (min-width:1280px){
  #groomingHairList.cards-wrap[class],
  #groomingBeardList.cards-wrap[class],
  #groomingMakeupList.cards-wrap[class],
  #groomingBodyGroomList.cards-wrap[class]{
    --card-grid-columns:2;
    grid-template-columns:repeat(2, minmax(0, var(--chip-card-max-width)));
  }
}

@media (min-width:1600px){
  #groomingHairList.cards-wrap[class],
  #groomingBeardList.cards-wrap[class],
  #groomingMakeupList.cards-wrap[class],
  #groomingBodyGroomList.cards-wrap[class]{
    --card-grid-columns:2;
    grid-template-columns:repeat(2, minmax(0, var(--chip-card-max-width)));
  }
}

.card{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:var(--chip-card-pad);
  border-radius:16px;
  border:1px solid var(--chip-card-border);
  background:var(--chip-card-bg);
  min-height:var(--card-min-h);
  box-shadow:var(--chip-card-shadow);
  cursor:pointer;
  text-align:left;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.card:hover{
  border-color:var(--chip-card-selected-border);
  box-shadow:var(--chip-card-shadow), 0 0 0 1px var(--chip-card-selected-border);
}
.card:focus-visible{
  outline:2px solid var(--chip-card-selected-border);
  outline-offset:2px;
  border-color:var(--chip-card-selected-border);
}
.card .title{
  font-size:14px;
  font-weight:700;
  margin:0;
  line-height:1.35;
  overflow-wrap:anywhere;
  color:var(--chip-card-title);
}
.card .desc{
  font-size:12.5px;
  color:var(--chip-card-subtext);
  margin:0;
  line-height:1.35;
  overflow-wrap:anywhere;
  display:block;
}
.card .desc:empty{ display:none; }

/* Scene/Luci/Body Morph: keep cards compact (max 4 lines of description) */
#sceneList.cards-wrap .card .desc,
#lightList.cards-wrap .card .desc,
#bodyMorphList.cards-wrap .card .desc{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  max-height:calc(1.35em * 4);
}
.card .meta{
  display:flex;
  flex-wrap:nowrap;
  gap:var(--card-tag-row-gap);
  align-items:center;
  width:100%;
  max-height:var(--chip-pill-height);
  overflow:hidden;
  margin-top:var(--chip-card-gap-desc-tags);
  padding:0;
  box-sizing:border-box;
}
.card .meta .chip{
  flex:0 1 auto;
  min-width:0;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.card .meta:empty{ display:none; }
.card .meta + .meta{ margin-top:var(--chip-card-gap-desc-tags); }
.card > *:last-child{ margin-bottom:0; }
.card .meta .chip:nth-of-type(n+3){
  display:none;
}

.card .meta[data-chip-max="2"]{
  display:flex;
  flex-wrap:nowrap;
}
.card .meta[data-chip-max="2"] .chip:nth-of-type(n+3){
  display:none !important;
}
.scene-column .card{
  background:var(--chip-card-bg);
  border-color:var(--chip-card-border);
  box-shadow:var(--chip-card-shadow);
  padding:var(--chip-card-pad-scene);
  min-height:120px;
}
#sceneList.cards-wrap .card,
#lightList.cards-wrap .card{
  background:var(--chip-card-bg);
  border-color:var(--chip-card-border);
  box-shadow:var(--chip-card-shadow);
  padding:var(--chip-card-pad-scene);
  min-height:120px;
}
#sceneList.cards-wrap .card .title,
#lightList.cards-wrap .card .title{
  font-size:13px;
  line-height:1.3;
  margin-bottom:var(--chip-card-gap-title-desc);
}
#sceneList.cards-wrap .card .desc,
#lightList.cards-wrap .card .desc{
  font-size:12px;
  line-height:1.4;
  margin-bottom:var(--chip-card-gap-desc-tags);
}
.card [data-card-tags]{
  display:flex;
  flex-wrap:nowrap;
  gap:var(--card-tag-row-gap);
  align-items:center;
  width:100%;
  max-height:var(--chip-pill-height);
  margin-top:var(--chip-card-gap-desc-tags);
  overflow:hidden;
}
.card [data-card-tags] .chip{
  width:auto;
  min-width:0;
  max-width:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.card [data-card-tags] .chip:nth-of-type(n+3){ display:none; }
.rn-preview__body{ display:grid; grid-template-columns:1fr; gap:16px; }
.card-meta-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  width:100%;
}
.card-meta-row .card-chipline{
  flex:1 1 auto;
  min-width:0;
}
.card-footer{ width:100%; }
.card-tags{
  display:flex;
  flex-wrap:wrap;
  gap:var(--card-tag-row-gap);
  align-content:flex-start;
}
.card-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
.card-actions .btn{
  height:32px;
  padding:0 14px;
  font-size:12.5px;
}
/* FORZA card selected visibile in entrambi i temi */
.card.selected{
  border-color:var(--chip-card-selected-border) !important;
  box-shadow:0 0 0 2px var(--chip-card-selected-border), var(--chip-card-shadow) !important;
  background:var(--chip-card-selected-bg) !important;
}
.card.selected .title{
  color:var(--chip-card-selected-title, var(--chip-card-title));
}
.card.selected .desc{
  color:var(--chip-card-selected-subtext, var(--chip-card-subtext));
}
/* Light mode: card selected più visibile con background colorato (NO OMBRA) */
:root[data-theme="light"] .card.selected{
  box-shadow:0 0 0 2px var(--chip-card-selected-border) !important;
  background:rgba(95,213,255,.08) !important;
}
/* Dark mode: card selected con glow più intenso */
:root[data-theme="dark"] .card.selected,
:root:not([data-theme="light"]) .card.selected{
  box-shadow:0 0 0 2px var(--chip-card-selected-border), 0 0 16px rgba(95,213,255,.4) !important;
  background:rgba(95,213,255,.16) !important;
}

.card.card--split{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:18px;
  row-gap:10px;
  align-items:flex-start;
}
.card.card--split .title,
.card.card--split .desc,
.card.card--split .meta:not([data-card-tags]){
  grid-column:1 / -1;
}
.card.card--split [data-card-tags]{
  grid-column:1;
  max-height:calc((var(--card-tag-row-height) * var(--card-tag-max-rows)) + var(--card-tag-row-gap));
  overflow:hidden;
}
.card.card--split .cta{
  grid-column:2;
  grid-row:auto;
  align-self:flex-start;
}

@media (max-width:640px){
  .card.card--split{ grid-template-columns:1fr; }
  .card.card--split .cta{
    grid-column:1;
    align-self:flex-start;
  }
  .card-meta-row{
    flex-direction:column;
    align-items:stretch;
  }
  .card-meta-row .cta{
    width:100%;
    justify-content:flex-start;
  }
}

.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  background:var(--chip-bg);
  color:var(--chip-text);
  border:1px solid var(--chip-border);
  border-radius:999px;
  padding:0 var(--chip-pill-pad);
  font-size:11px;
  line-height:var(--chip-pill-height);
  font-weight:600;
  letter-spacing:.03em;
  height:var(--chip-pill-height);
  min-height:var(--chip-pill-height);
  min-width:0;
  width:auto;
  max-width:100%;
  white-space:nowrap;
  text-align:center;
  text-overflow:ellipsis;
  overflow:hidden;
  text-transform:none;
}
.chip[data-chip-type="tag"]{
  display:none !important;
}
.chip-toggle{ max-width:none; }
.chip-status{ font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.chip-status--applied{
  background:rgba(106,157,255,.22);
  border-color:var(--blue);
  color:var(--blue-light);
}
.chip-status--pending{
  background:var(--chip-bg);
  border-color:var(--chip-border);
  color:var(--chip-text);
}
.card-tags .chip{ max-width:100%; }
.chip .chip-label{
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.preset-chipline,
.outfit-chipline,
.selected-chips,
.context-chips,
.props-chipline,
.body-groom-type-chips{
  gap:var(--chip-gap);
  padding:var(--chip-gap);
}

.card .meta.preset-chipline,
.card .meta.outfit-chipline,
.card .meta.props-chipline,
.card .meta.body-groom-type-chips{
  padding:0;
}

/* Outfit cards: show exactly 3 chips (source + category + area) */
.card .meta.outfit-chipline{
  display:flex !important;
  flex-wrap:nowrap;
  align-items:center;
  gap:6px;
  width:100%;
  max-height:var(--chip-pill-height);
  overflow:hidden;
}
.card .meta.outfit-chipline .chip{
  width:auto !important;
  max-width:100% !important;
  padding:0 10px;
  flex:0 1 auto;
  min-width:0;
}
.card .meta.outfit-chipline .chip:nth-of-type(n+3){
  display:inline-flex;
}
.card .meta.outfit-chipline .chip:nth-of-type(n+4){
  display:none;
}
.chips-wrap{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--chip-gap);
  padding:var(--chip-gap);
  align-content:flex-start;
  justify-content:flex-start;
  background:var(--chip-shell-bg);
  border:1px solid var(--chip-shell-border);
  border-radius:var(--chip-shell-radius);
  box-shadow:var(--chip-shell-shadow);
  max-height:none;
  overflow:hidden;
}
@media (max-width:560px){
  .chips-wrap{ grid-template-columns:1fr; }
}
.chip-source{ color:var(--cyan); border-color:var(--cyan); }
.chip-category{ color:var(--ink-2); }
.chip-mode{
  background:rgba(118,170,255,.15);
  border-color:rgba(118,170,255,.5);
  color:#e0ecff;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.chip-body{
  border-color:rgba(255,255,255,.35);
  color:var(--ink-1);
}
.chip-gender{
  border-color:rgba(255,255,255,.35);
  color:var(--ink-2);
  font-weight:600;
}
.chip-bag-gender{
  background:rgba(186,148,230,.12);
  border-color:rgba(186,148,230,.45);
  color:var(--ink-1);
}
/* presetList meta: flex layout like other tabs, chips content-sized (not wide) */
#presetList .card .meta.meta,
#presetList .card .meta[class]{
  display:flex;
  flex-wrap:wrap;
  gap:var(--card-tag-row-gap);
  align-items:center;
}
#presetList .card .meta .chip.chip,
#presetList .card .meta .chip[class]{
  flex:0 1 auto;
  width:auto;
  min-width:0;
  max-width:100%;
  padding:0 var(--chip-pill-pad);
  height:var(--chip-pill-height);
  min-height:var(--chip-pill-height);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Increased specificity for chipline to avoid !important */
.card .meta.preset-chipline,
.card .meta.outfit-chipline,
.preset-chipline[class],
.outfit-chipline[class]{
  display:flex;
  flex-wrap:wrap;
  gap:var(--card-tag-row-gap);
  width:100%;
  align-items:center;
}
.card .meta.preset-chipline .chip,
.card .meta.outfit-chipline .chip,
.preset-chipline .chip[class],
.outfit-chipline .chip[class]{
  width:auto;
  max-width:100%;
  min-width:0;
  justify-content:center;
  flex:0 1 auto;
}

/* Outfit list: chips must be content-width and single-row (no grid / no full-width pills) */
/* Increased specificity to avoid !important */
#outfitList .card .meta.outfit-chipline.outfit-chipline,
#outfitList .card .meta.outfit-chipline[class]{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:6px;
  width:100%;
  max-height:var(--chip-pill-height);
  overflow:hidden;
}
#outfitList .card .meta.outfit-chipline .chip.chip,
#outfitList .card .meta.outfit-chipline .chip[class]{
  width:auto;
  max-width:100%;
  padding:0 10px;
  flex:0 1 auto;
  min-width:0;
}
#outfitList .card .meta.outfit-chipline .chip:nth-of-type(n+3){
  display:inline-flex;
}
#outfitList .card .meta.outfit-chipline .chip:nth-of-type(n+4){
  display:none !important;
}

/* Chip variants for compatibility flags */
.chip-flag{ border-color:var(--line-2); background:rgba(255,255,255,.04); }
.chip-compat{ cursor:pointer; }
.chip-with-icon .chip-icon{ display:none; }

.chip-remove{
  margin-left:6px;
  border:none;
  background:none;
  color:var(--ink-3);
  cursor:pointer;
  font-size:12px;
  padding:0 2px;
}
.chip-remove:focus-visible{ outline:2px solid var(--blue-light); border-radius:4px; }

.selected-chips,
.context-chips{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(90px, max-content));
  gap:6px;
  margin-top:12px;
  align-content:flex-start;
  justify-content:flex-start;
}

/* Props Tab */
.wiz-props{ display:flex; flex-direction:column; gap:18px; }
/* Props: box database più fine/compatto come Archetipi */
#tab-props .props-toolbar__db-box{
  padding:8px 12px;
  border:1px solid var(--line-1);
  border-radius:10px;
  background:var(--panel-3);
  box-shadow:var(--shadow-xs);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-bottom:0;
}


#tab-props .props-toolbar__db-box .db-pair > div:not(:last-child),
#tab-props .props-toolbar__db-box .db-pair > .field:not(:last-child){
  margin-right:0;
}

#tab-props .props-toolbar__bottom{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:10px;
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
}

#tab-props .props-toolbar__bottom .props-filters{
  flex:1 1 auto;
  min-width:0;
}

#tab-props .props-toolbar__bottom .props-filters .field.is-inline:not(.props-search){
  flex:0 0 auto;
  min-width:102px;
  max-width:153px;
}

#tab-props .props-toolbar__bottom .props-filters .field.is-inline:not(.props-search) > select{
  max-width:100%;
  width:100%;
}

#tab-props .props-toolbar__bottom .props-filters .field.props-search{
  flex:1 1 auto;
  min-width:150px;
  max-width:180px;
}

#tab-props .props-toolbar__bottom .filters-service-cta{
  margin-left:auto;
  flex-shrink:0;
}
/* Removed .props-db - now using standard .db-pair */
  align-items:flex-end;
  min-width:0;
}
.props-db .field{
  min-width:0;
  max-width:var(--db-width-max);
  flex:0 1 var(--db-width-max);
}
.props-mode{
  display:inline-flex;
  gap:6px;
  padding:4px;
  border-radius:999px;
  border:1px solid var(--pill-border);
  background:var(--panel-4);
}
.props-mode__btn{
  border:1px solid transparent;
  background:var(--pill-bg);
  border-radius:999px;
  padding:0 var(--chip-pill-pad);
  min-height:var(--chip-pill-height);
  height:var(--chip-pill-height);
  max-height:var(--chip-pill-height);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-size:13px;
  font-weight:600;
  color:var(--pill-text, var(--ink-2));
  cursor:pointer;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.props-mode__btn:hover{ color:var(--ink-1); background:var(--pill-hover-bg); }
.props-mode__btn.active{
  background:var(--pill-active-bg, var(--blue));
  color:var(--pill-active-text, #fff);
  border-color:var(--blue);
  box-shadow:var(--pill-shadow);
}
.props-mode__btn:disabled{ opacity:.4; cursor:not-allowed; }

.props-filters{
  --control-max-width:150px;
  padding:16px 18px;
  border:1px solid var(--line-1);
  border-radius:16px;
  background:var(--panel-4);
  box-shadow:var(--shadow-sm);
}
.props-filters.dropdown-field-set{
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
}
.props-filters.dropdown-field-set::-webkit-scrollbar{ display:none; }

/* Props filters: avoid overlap when using inline labels (label + select) */
#tab-props .props-filters.dropdown-field-set{ gap:14px; }
#tab-props .props-filters.dropdown-field-set.is-inline-labels > .field.is-inline{
  flex:0 0 auto;
  min-width:auto;
  max-width:none;
}
#tab-props .props-filters.dropdown-field-set.is-inline-labels > .field.is-inline{
  gap:8px;
}
#tab-props .props-filters.dropdown-field-set.is-inline-labels > .field.is-inline > select{
  width:130px;
  min-width:120px;
  max-width:130px;
  flex:0 0 130px;
}
/* Materiale, Colore, Stampe: leggermente più stretti per far stare tutto su una riga */
#tab-props #propVariantMaterial,
#tab-props #propVariantColor,
#tab-props #propVariantPrint{
  width:110px;
  min-width:100px;
  max-width:110px;
  flex:0 0 110px;
}
#tab-props .props-filters.dropdown-field-set.is-inline-labels > .field.is-inline > .label{
  flex:0 0 auto;
  white-space:nowrap;
}
.props-filters > .field.props-variant-color{ margin-left:25px; }
.props-filters .label{ font-size:12.5px; color:var(--ink-3); margin-bottom:4px; display:block; }
.props-search{
  flex:1 1 auto;
  min-width:150px;
  max-width:200px;
}
.props-search input{ width:100%; }

/* Props: unify dropdown widths (requested: 130px max, min 120px) */
#tab-props select{ width:130px; min-width:120px; max-width:130px; }

/* Props: cap results list + card height - now handled by tab-body__cards */
#tab-props .props-results .cards-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
}
#tab-props #propsCardGrid .card{
  min-height:0;
  max-height:140px;
  overflow:hidden;
}
#tab-props #propsCardGrid .card .desc{
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

/* Scene & Luci: removed max-height constraint to allow more cards */
.scene-stack{
  /* max-height removed - now controlled by #sceneScroll min-height */
}
.scene-stack .cards-scroll{
  flex:1 1 auto;
  max-height:none;
}
.scene-stack .chip-panel__empty{
  flex:1 1 auto;
  min-height:0;
}

.props-guard{
  margin:0;
  padding:14px 16px;
  border:1px dashed rgba(240,175,67,.6);
  border-radius:var(--radius);
  background:rgba(240,175,67,.15);
  color:#ffd9a8;
  font-size:13px;
}

/* Props: Use tab-body structure like other tabs */
#tab-props .tab-body{
  display:grid;
  grid-template-columns:minmax(0,var(--dual-cards-fr)) minmax(var(--dual-preview-min), var(--dual-preview-fr));
  gap:24px;
  flex:1;
  min-height:0;
}

#tab-props .tab-body__cards{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}

#tab-props .tab-body__preview{
  display:flex;
  flex-direction:column;
  min-height:0;
  gap:16px;
  overflow:hidden;
}

#tab-props .tab-body__cards > .chip-panel{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}

#tab-props .tab-body__cards > .chip-panel > .chip-panel__body{
  flex:1;
  min-height:0;
  overflow:hidden;
}

#tab-props .tab-body__cards > .chip-panel > .chip-panel__body > .cards-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
}

/* Props config section - now in preview column above preview */
.props-config__section{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:16px 18px;
  border:1px solid var(--line-1);
  border-radius:16px;
  background:var(--panel-4);
  box-shadow:var(--shadow-sm);
}

.props-config__section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}

.props-section-kicker{
  font-size:0.65rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--ink-3);
  margin:0 0 4px 0;
}

.props-config__section h4{
  font-size:1.1rem;
  font-weight:600;
  color:var(--ink-1);
  margin:0 0 4px 0;
}

.props-section-desc{
  font-size:0.82rem;
  color:var(--ink-3);
  margin:0;
}

.props-section-controls{
  display:inline-flex;
  gap:6px;
  padding:4px;
  border-radius:999px;
  border:1px solid var(--pill-border);
  background:var(--panel-4);
  flex-shrink:0;
}

.props-config-mode__btn{
  border:1px solid transparent;
  background:var(--pill-bg);
  border-radius:999px;
  padding:0 var(--chip-pill-pad);
  min-height:var(--chip-pill-height);
  height:var(--chip-pill-height);
  max-height:var(--chip-pill-height);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-size:13px;
  font-weight:600;
  color:var(--ink-2);
  cursor:pointer;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.props-config-mode__btn:hover{
  color:var(--ink-1);
  background:var(--pill-hover-bg);
}

.props-config-mode__btn.active{
  background:var(--blue) !important;
  color:#fff !important;
  border-color:var(--blue) !important;
  box-shadow:var(--pill-shadow);
}

.props-config__body{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.props-config-panel{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.props-config-grid{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Tab Props – colonna preview: i 3 dropdown Posizionamento su una sola riga */
#tab-props .tab-body__preview .props-config-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.props-content{
  display:grid;
  grid-template-columns:minmax(0,var(--dual-cards-fr)) minmax(var(--dual-preview-min), var(--dual-preview-fr));
  gap:20px;
  align-items:start;
}

.props-left{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.props-left-config{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* Props results now uses flex layout in tab-body__cards */
#tab-props .props-results{
  min-height:0;
  flex:1;
  display:flex;
  flex-direction:column;
}
.props-results__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.props-results__head .count-badge{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.props-empty{
  padding:32px;
  text-align:center;
  border:1px dashed var(--line-2);
  border-radius:var(--radius);
  color:var(--ink-3);
  background:rgba(255,255,255,.02);
}

.props-card{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:var(--chip-card-pad);
  border:1px solid var(--chip-card-border);
  border-radius:16px;
  background:var(--chip-card-bg);
  min-height:var(--card-min-h);
  position:relative;
  box-shadow:var(--chip-card-shadow);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.props-card:hover{
  border-color:var(--chip-card-selected-border);
  box-shadow:var(--chip-card-shadow), 0 0 0 1px var(--chip-card-selected-border);
}
.props-card.active{
  border-color:var(--chip-card-selected-border);
  box-shadow:var(--chip-card-selected-glow);
  background:var(--chip-card-selected-bg);
}
.props-card.active .props-card__title{
  color:var(--chip-card-selected-title, var(--chip-card-title));
}
.props-card.active .props-card__desc,
.props-card.active .props-card__desc--alt{
  color:var(--chip-card-selected-subtext, var(--chip-card-subtext));
}
.props-card__title{ margin:0; font-size:15px; letter-spacing:.02em; color:var(--chip-card-title); }
.props-card__desc{
  margin:var(--chip-card-gap-title-desc) 0 0;
  color:var(--chip-card-subtext);
  line-height:1.45;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
}
.props-card__desc--alt{ color:var(--chip-card-subtext); font-style:italic; }
.props-card__cta{
  margin-top:var(--chip-card-gap-tags-cta);
  display:flex;
  justify-content:flex-end;
}
.props-card__cta .btn{
  width:auto;
  min-width:90px;
  max-width:120px;
  text-align:center;
}
.props-card .card-chipline,
.props-card [data-card-tags]{
  margin-top:var(--chip-card-gap-desc-tags);
}
.props-card .card-chipline .chip:nth-of-type(n+4){ display:none; }

.props-config{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:18px;
  border:1px solid var(--line-1);
  border-radius:var(--radius);
  background:var(--panel-4);
  box-shadow:0 8px 18px rgba(0,0,0,.25);
  min-height:320px;
}
.props-config__section{
  border:1px solid var(--line-1);
  border-radius:var(--radius);
  padding:16px;
  background:var(--panel-3);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.props-config__section-head{
  display:grid;
  grid-template-columns:minmax(0, 1fr) max-content;
  align-items:flex-start;
  gap:16px;
}
.props-section-controls{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:max-content;
  align-items:center;
  justify-content:end;
  gap:10px;
}
.props-config__section--single .props-section-controls{
  display:inline-flex;
  gap:6px;
  padding:4px;
  border-radius:999px;
  border:1px solid var(--pill-border);
  background:var(--panel-4);
}
.props-config-mode__btn{
  border:1px solid transparent;
  background:var(--pill-bg);
  border-radius:999px;
  padding:0 var(--chip-pill-pad);
  min-height:var(--chip-pill-height);
  height:var(--chip-pill-height);
  max-height:var(--chip-pill-height);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-size:13px;
  font-weight:600;
  color:var(--ink-2);
  cursor:pointer;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.props-config-mode__btn:hover{ color:var(--ink-1); background:var(--pill-hover-bg); }
.props-config-mode__btn.active{ background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:var(--pill-shadow); }
.props-section-kicker{
  margin:0;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
    margin-top: 25px;
    margin-bottom: 4px;
}
.props-config__body{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.props-config__body[hidden]{ display:none; }
.props-config__section.is-collapsed .props-config__body{ display:none; }
.props-section-desc{
  margin:6px 0 0;
  font-size:12.5px;
  color:var(--ink-3);
  line-height:1.4;
}
.props-section-toggle{
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid var(--line-1);
  background:var(--panel-4);
  color:var(--ink-2);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.props-section-toggle::before{
  content:'-';
  font-size:18px;
  line-height:1;
}
.props-config__section.is-collapsed .props-section-toggle{
  color:var(--ink-3);
}
.props-config__section.is-collapsed .props-section-toggle::before{ content:'+'; }
.props-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line-1);
  background:var(--panel-4);
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
  flex:0 0 auto;
  white-space:nowrap;
}
.props-section-toggle{ flex:0 0 auto; }

@media (max-width:520px){
  .props-config__section-head{ grid-template-columns:1fr; }
  .props-section-controls{ justify-content:start; }
}
.props-toggle input{
  accent-color:var(--blue);
}
.props-toggle span{ color:var(--ink-2); }
.props-config-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px,1fr));
  gap:10px;
}

/* Quando "Sul soggetto/i" è attivo, i 3 dropdown devono essere in una riga */
/* Increased specificity to avoid !important */
#propsConfigCharacter:not([hidden]) .props-config-grid[class]{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px !important;
}
.props-config-grid--two{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.props-config-grid--two > .field:last-child{
  grid-column:span 2;
}
.props-config-placement-custom{
  margin-top:10px;
}
.props-config-placement-custom .field{ width:100%; }
.props-placement-custom-textarea{
  width:100%;
  min-height:56px;
  background:#fff;
  box-sizing:border-box;
}
@media (max-width:680px){
  .props-config-grid--two{ grid-template-columns:1fr; }
  .props-config-grid--two > .field{ grid-column:auto; }
  #propsConfigCharacter:not([hidden]) .props-config-grid--placement-row{ grid-template-columns:1fr; }
}
.props-config__section h4{ margin:0; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); }
.props-config__section .field{ display:flex; flex-direction:column; gap:6px; }
.props-config__section select,
.props-config__section input[type="checkbox"],
.props-config__section input[type="search"]{ width:100%; }
.props-position-row,
.props-inline-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding-bottom:0;
}
.props-inline-row{
  align-items:flex-end;
  overflow:visible;
}
.props-position-row .field,
.props-inline-row__select{ flex:1 1 0; min-width:0; }
.props-flag-row{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  align-items:stretch;
  overflow:visible;
  padding-bottom:0;
}
.props-flag-row .preset-flag{
  width:100%;
  max-width:none;
  flex:none;
}
.props-inline-flag{
  flex:1 1 160px;
  min-width:0;
  max-width:220px;
  width:auto;
}
.props-flag-row .preset-flag span,
.props-inline-flag span{
  white-space:normal;
  min-height:36px;
  line-height:1.25;
}
.preset-flag--compact{ width:auto; }
.preset-flag--compact span{
  width:100%;
  min-height:38px;
  padding:8px 16px;
}
.props-chipline{
  max-height:64px;
  overflow:hidden;
}
@media (max-width: 640px){
  .props-flag-row{
    grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  }
}

.props-preview-column{ display:flex; flex-direction:column; gap:16px; }
.props-preview-actions{ display:flex; justify-content:flex-end; gap:12px; flex-wrap:wrap; }
.props-preview-actions .btn{
  min-width:var(--dropdown-width-min);
  max-width:var(--dropdown-width-max);
}

.props-preview-board{
  border:1px solid var(--chip-shell-border);
  border-radius:var(--chip-shell-radius);
  background:var(--chip-shell-bg);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  position:sticky;
  top:120px;
  box-shadow:var(--chip-shell-shadow);
}
.scene-preview{
  border:1px solid var(--chip-shell-border);
  border-radius:var(--chip-shell-radius);
  background:var(--chip-shell-bg);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  box-shadow:var(--chip-shell-shadow);
}
/* Light Mode: FORZA scene-preview a sfondo chiaro - ULTRA-AGGRESSIVO */
:root[data-theme="light"] .scene-preview{
  background:var(--panel-2) !important;
  border:1px solid var(--line-1) !important;
  box-shadow:none !important;
}
.props-preview__header,
.scene-preview__head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.props-preview__label,
.scene-preview__head h4{ margin:0; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--chip-shell-title, var(--chip-card-subtext)); }
.props-preview__empty,
.scene-preview__empty{ color:var(--chip-shell-text, var(--chip-card-subtext)); font-style:italic; }
.props-preview__body{ display:flex; flex-direction:column; gap:14px; }
.scene-preview__body{
  display:flex;
  flex-direction:column;
  gap:28px;
}
.scene-preview-section{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.scene-preview-section:first-child{
  margin-bottom:8px;
}
.scene-preview-section__title{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink-2);
  margin:0 0 12px 0;
  font-weight:600;
}
.scene-preview-section__content{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
  min-height:0;
}
.scene-preview-section__content .field{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}
.field-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.field-label-row .label{
  margin:0;
  flex:1;
}
.scene-preview-section__content .preview-textarea{
  flex:1;
  min-height:0;
  resize:vertical;
}
.props-preview-context{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:10px;
}
.props-preview-context[hidden]{ display:none; }
.props-preview-context__group{
  border:1px solid var(--line-2);
  border-radius:12px;
  padding:12px;
  background:var(--panel-4);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.props-preview-context__group[hidden]{ display:none; }
.props-preview-context__label{
  margin:0;
  font-size:11px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.props-preview-context__value{
  margin:0;
  font-size:13px;
  color:var(--ink-1);
  line-height:1.45;
  white-space:pre-line;
}
.scene-preview__body h5{ margin:0 0 4px; font-size:12px; letter-spacing:.04em; color:var(--ink-3); }
.props-preview-editor,
.scene-preview__body .field,
.dyn-preview__text .field,
.rn-preview__body .field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.props-preview-editor .field + .field{ margin-top:12px; }
.props-preview-editor[hidden]{ display:none; }
.props-preview-editor .label,
.dyn-preview__text .label,
.rn-preview__body .label{ font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-2); }
.props-preview-editor .preview-textarea,
.dyn-preview__text .preview-textarea,
.rn-preview__body .preview-textarea{ min-height:140px; }
#tab-negative .rn-preview__body .preview-textarea{ min-height:50vh; }

/* Props: altezza minima anteprima */
#tab-props #propsPreview.preview-textarea{
  min-height:250px;
}

/* Props Preview Overlay for highlighting placeholders */
#tab-props .field[data-preview-person]{
  position:relative;
}

#tab-props .props-preview-overlay{
  position:absolute;
  left:0;
  right:0;
  top:calc(12px + 22px);
  bottom:0;
  padding:12px;
  border-radius:12px;
  border:1px solid transparent;
  background:var(--panel-2);
  font-size:15px;
  line-height:1.5;
  white-space:pre-wrap;
  word-break:break-word;
  overflow:auto;
  pointer-events:none;
  z-index:1;
}
/* Dark mode: testo chiaro leggibile (forzato con :root per vincere qualsiasi override) */
:root:not([data-theme="light"]) #tab-props .props-preview-overlay,
:root:not([data-theme="light"]) #tab-props .props-preview-overlay *:not(.props-preview-overlay__hl){
  color:#f5f6ff !important;
}
:root:not([data-theme="light"]) #tab-props .props-preview-context__value,
:root:not([data-theme="light"]) #tab-props .props-preview-context__label{
  color:#e8eaf0 !important;
}
:root[data-theme="light"] #tab-props .props-preview-overlay{
  background:transparent !important;
  z-index:3;
}
:root[data-theme="light"] #tab-props .props-preview-overlay,
:root[data-theme="light"] #tab-props .props-preview-overlay *:not(.props-preview-overlay__hl){
  color:#1a1f2e !important;
  -webkit-text-fill-color:#1a1f2e !important;
}
:root[data-theme="light"] #tab-props .props-preview-context__value{
  color:#1a1f2e !important;
}
:root[data-theme="light"] #tab-props .props-preview-context__label{
  color:#4b5563 !important;
}

#tab-props .props-preview-overlay .props-preview-overlay__hl{
  color:var(--warn);
}

/* Props Preview: textarea trasparente così si vede solo l’overlay (testo con highlight, un solo strato) */
#tab-props #propsPreview.preview-textarea{
  font-size:15px;
  line-height:1.5;
  background:transparent !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  caret-color:#f5f6ff;
  position:relative;
  z-index:2;
}
:root[data-theme="light"] #tab-props #propsPreview.preview-textarea{
  caret-color:#1a1f2e;
}

#tab-props #propsPreview.preview-textarea:disabled{
  opacity:1;
  cursor:default;
  background:transparent !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}

#tab-props #propsPreview.preview-textarea::placeholder{
  color:var(--ink-3);
  opacity:1;
}

@media (max-width:1180px){
  .props-content{ grid-template-columns:1fr; }
  .props-preview-board{ position:static; }
}
@media (max-width:720px){
  .props-toolbar,
  .props-filters{ padding:14px; }
  .props-config__section .checkbox-group{ flex-direction:column; align-items:flex-start; }
  .props-preview-actions{ flex-direction:column; }
  .props-preview-actions .btn{ width:100%; }
}

.table-like{ width:100%; border-collapse:collapse; font-size:12.5px; }
.table-like thead th{ text-align:left; font-weight:600; color:var(--ink-2); padding:6px; border-bottom:1px solid var(--line-1); }
.table-like tbody td{ padding:6px; border-bottom:1px solid var(--line-1); vertical-align:middle; }
.table-like tbody tr:last-child td{ border-bottom:none; }
.matrix-method{ display:flex; gap:6px; }
.matrix-method button{
  height:30px;
  border-radius:6px;
  border:1px solid var(--line-1);
  background:var(--panel-4);
  color:var(--ink-1);
  padding:0 10px;
  cursor:pointer;
  font-size:12px;
}
.matrix-method button.active{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
}

/* BASE section-block - UGUALE per dark e light mode */
.section-block{
  background:var(--panel-2);
  border:1px solid var(--line-1);
  border-radius:var(--chip-shell-radius);
  padding:var(--chip-shell-pad);
  box-shadow:var(--chip-card-shadow);
  display:flex;
  flex-direction:column;
  gap:0;
  min-height:0;
}

/* Dark mode override - solo se serve background diverso */
:root:not([data-theme="light"]) .section-block,
:root[data-theme="dark"] .section-block{
  background:var(--panel-2) !important;
}

/* chip-panel in light e dark mode */
:root:not([data-theme="light"]) .chip-panel,
:root[data-theme="light"] .chip-panel{
  background:var(--panel-2) !important;
  border:1px solid var(--line-1);
  border-radius:var(--chip-shell-radius);
  padding:var(--chip-shell-pad);
  box-shadow:var(--chip-card-shadow);
  display:flex;
  flex-direction:column;
  gap:0;
  min-height:0;
}

:root[data-theme="dark"] .chip-panel{
  background:var(--chip-shell-bg) !important;
  border:1px solid var(--chip-shell-border);
  border-radius:var(--chip-shell-radius);
  padding:var(--chip-shell-pad);
  box-shadow:var(--chip-shell-shadow);
  display:flex;
  flex-direction:column;
  gap:0;
  min-height:0;
}
.chip-panel__head,
.chip-panel .results{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.chip-panel__head{
  padding-bottom:8px;
  margin-bottom:8px;
  border-bottom:1px solid rgba(106,157,255,.16);
}
.chip-panel__info{
  flex:1 1 auto;
  min-width:0;
}
.chip-panel__title{
  margin:0;
  font-size:14px;
  font-weight:600;
  color:var(--chip-shell-title);
  line-height:1.2;
}
.chip-panel__eyebrow{
  margin:0 0 2px;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
  line-height:1.2;
}
.chip-panel__count{
  display:inline-flex;
  align-items:center;
  gap:0;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:10px;
  line-height:1.2;
  color:var(--ink-3);
  font-size:11px;
  font-weight:600;
}
.chip-panel__count-label{
  font-size:inherit;
  font-weight:inherit;
}
.chip-panel__count-label::after{
  content:':';
  margin:0 4px 0 2px;
  color:inherit;
}
.chip-panel__count-value{
  font-size:inherit;
  line-height:1;
  font-weight:inherit;
  color:var(--ink-1);
}
.chip-panel__body{
  display:flex;
  flex-direction:column;
  gap:var(--chip-shell-gap);
  min-height:0;
}
.chip-panel__body > *{ min-height:0; }
/* Consolidated into main rule at line 6137 */
.chip-panel__scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  border-radius:calc(var(--chip-shell-radius) - 10px);
  padding:0;
  background:transparent;
  border:none;
  box-shadow:none;
  scrollbar-width:thin;
  scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);
}
/* Consolidated: Visual Styles scroll container */
.wiz-visualstyles .chip-panel__scroll{
  height:auto !important;
  flex:1 !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}
.chip-panel__scroll::-webkit-scrollbar{ width:6px; height:8px; }
.chip-panel__scroll::-webkit-scrollbar-thumb{ background:var(--scrollbar-thumb); border-radius:4px; }
.chip-panel__scroll::-webkit-scrollbar-track{ background:var(--scrollbar-track); }
.chip-panel__grid{
  align-content:flex-start;
  grid-auto-rows:auto;
}
.chip-panel__empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:10px;
  padding:20px;
  min-height:var(--chip-container-height);
  color:var(--ink-3);
  border:1px dashed rgba(106,157,255,.35);
  border-radius:calc(var(--chip-shell-radius) - 10px);
  font-size:13px;
  letter-spacing:.02em;
}

.section-title{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--chip-shell-title, var(--ink-2)); margin-bottom:8px; }

.style-toggle-group{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.grooming-layout{
  margin-top:16px;
}

.grooming-left{
  background:var(--panel-3);
  border:1px solid var(--line-1);
  border-radius:14px;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:16px;
  box-shadow:var(--shadow-sm);
}

#tab-grooming .tab-header__controls{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
  justify-content:flex-start;
  padding:10px 12px;
  border:1px solid var(--line-1);
  border-radius:10px;
  background:var(--panel-4);
  box-shadow:var(--shadow-sm);
}

.preset-toolbar{
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border:1px solid var(--line-1);
  border-radius:10px;
  background:var(--panel-4);
  box-shadow:var(--shadow-sm);
}

.scene-header,
/* Scene Preset: box database più fine/compatto come Archetipi */
#tab-presets .preset-toolbar__db-box{
  padding:8px 12px;
  border:1px solid var(--line-1);
  border-radius:10px;
  background:var(--panel-3);
  box-shadow:var(--shadow-xs);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-bottom:0;
}


#tab-presets .preset-header__bottom{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:10px;
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
}

#tab-presets .preset-header__bottom .preset-mode{
  flex:0 0 auto;
  margin:0;
}

#tab-presets .preset-header__bottom .field{
  flex:0 0 auto;
}

#tab-presets .preset-header__bottom .filters-service-cta{
  flex:0 0 auto;
  margin-left:auto;
}

/* Scene preset: una riga sola (vietato wrap) — scroll orizzontale su tutta la toolbar */
.preset-header__toolbar{
  width:100%;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid var(--line-1);
}
.preset-toolbar__scroll{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
  gap:10px;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  padding-bottom:3px;
}
.preset-toolbar__scroll::-webkit-scrollbar{
  height:4px;
}
.preset-toolbar__scroll::-webkit-scrollbar-thumb{
  background:var(--scrollbar-thumb);
  border-radius:2px;
}
.preset-toolbar__vs{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.preset-toolbar__vs-label{
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-2);
  white-space:nowrap;
  flex-shrink:0;
}
/* Stessi pill della riga Singolo/Coppia (.props-mode__btn: 13px, --chip-pill-height) */
#tab-presets .preset-mode--toolbar.props-mode{
  flex-shrink:0;
  margin:0;
}
#tab-presets .preset-toolbar__vs-select{
  min-width:130px;
  max-width:var(--dropdown-wide-max);
  width:auto;
  flex-shrink:0;
  height:var(--control-height);
  padding:0 var(--control-pad-x);
  font-size:var(--control-font-size);
  line-height:1.2;
  border-radius:var(--control-radius);
  background:var(--panel-1);
  border:1px solid var(--line-1);
  color:var(--ink-2);
}
.preset-toolbar__divider{
  flex-shrink:0;
  width:1px;
  height:var(--control-height);
  align-self:center;
  background:var(--line-1);
}
/* Flag blocchi: stessa riga; testi come .btn.small della tab (12.5px / 30px) */
.preset-toolbar__block-toggles.preset-block-toggles,
.preset-block-toggles{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:6px;
  align-items:center;
  flex:0 0 auto;
  min-width:0;
  overflow:visible;
  padding:0;
}
#tab-presets .preset-toolbar__block-toggles .preset-block-toggle{
  flex-shrink:0;
  white-space:nowrap;
}
#tab-presets .preset-toolbar__block-toggles .preset-block-toggle:not(.active){
  opacity:0.5;
}

#tab-presets .preset-preview-block--visual-lead .preview-textarea{
  opacity:0.92;
  min-height:calc(3 * 1.5 * 1em);
  resize:none;
}
/* Anteprima: Scene + Dinamica con altezza minima ~3 righe così la terza riga è in vista senza espandere */
.preset-preview-grid .preset-preview-block:not(.preset-preview-block--visual-lead) .preview-textarea{
  min-height:calc(3 * 1.45 * 1em);
}

.preset-header,
.dyn-header{
  padding:10px 14px;
  border:1px solid var(--line-1);
  border-radius:10px;
  background:var(--panel-4);
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  gap:10px;
}

#tab-grooming .grooming-filters-inline{
  display:flex;
  flex:1;
  min-width:0;
}
#tab-grooming #groomingDynamicFiltersRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  flex:1;
  min-width:0;
}

/* Dynamics: header IDENTICO a Props - stessa struttura e larghezza */
/* Dynamics header: usa struttura standard tab-header */
#tab-dynamics .tab-header{
  /* Usa stili standard .tab-header */
}

#tab-dynamics .tab-header__controls{
  /* Usa stili standard */
}

#tab-dynamics .tab-header__controls > .dropdown-field-set{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--dropdown-gap-min);
  flex:1 1 auto;
  min-width:0;
}

/* Outfit: barra materiali/stampa/colore nascosta (usa Card Creator) */
#tab-outfit .outfit-header-box--row1.outfit-pins-bar--hidden,
#tab-outfit .outfit-materials-bar--hidden{
  display:none !important;
}

/* Grooming Tab - 3 righe: tipo | area corpo | dropdown + azioni */
.grooming-header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: var(--bg-2);
  border-top: 1px solid var(--line-1);
  min-height: 0;
}

.grooming-header-row:first-of-type {
  border-top: none;
}

.grooming-header-row .dropdown-field-set {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Anteprima: 5 box separate (Capelli, Barba, Peluria, Makeup, Body groom) — compatto */
.grooming-preview-boxes.section-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Header compatto */
.grooming-preview-boxes .arch-preview-board__header {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-1);
}

.grooming-preview-box {
  border: 1px solid var(--line-1);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--panel-4);
  min-width: 0;
}
.grooming-preview-box__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  margin-bottom: 6px;
  background: transparent;
}
.grooming-preview-box.is-collapsed .grooming-preview-box__header {
  margin-bottom: 0;
}
.grooming-preview-box__title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  flex: 1;
  min-width: 0;
  background: transparent;
}
.grooming-preview-box__header-actions{
  display:flex;
  align-items:center;
  gap:4px;
  flex-shrink:0;
}
.grooming-preview-box__reroll{
  width:24px;
  height:24px;
  padding:0;
  border-radius:50%;
  border:1px solid var(--line-2);
  background:rgba(106,157,255,.12);
  color:var(--cyan);
  font-size:14px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:background .15s ease, border-color .15s ease;
}
.grooming-preview-box__reroll:hover{
  background:rgba(106,157,255,.2);
  border-color:rgba(95,213,255,.45);
}
.grooming-preview-box__reroll:focus-visible{
  outline:none;
  border-color:var(--cyan);
  box-shadow:0 0 0 1px rgba(95,213,255,.35);
}
.grooming-preview-box__toggle {
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--panel-4);
  color: var(--ink-1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s;
}
.grooming-preview-box__toggle:hover { background: var(--panel-1); }
.grooming-preview-box__toggle::before { content: '-'; font-size: 14px; line-height: 1; }
.grooming-preview-box__toggle[aria-expanded="false"]::before { content: '+'; }
.grooming-preview-box__fields {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.grooming-preview-box.is-collapsed .grooming-preview-box__fields { display: none !important; }
.grooming-preview-box__textarea {
  width: 100%;
  max-width: 100%;
  min-height: 90px;
  resize: vertical;
  font-size: 12px;
  box-sizing: border-box;
}

.grooming-preview-meta {
  padding: 1rem;
  border-bottom: 1px solid var(--line-1);
}

.grooming-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.grooming-preview-header h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-1);
}

.grooming-preview-badges {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.grooming-preview-desc {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-2);
  line-height: 1.5;
}

.grooming-gender-block {
  display: flex;
  align-items: center;
}

/* RIGA 1: tipo (Capelli, Barba, Makeup, Peluria, Body Groom) */
.grooming-header-row--type {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
.grooming-create-tools{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:nowrap;
  align-items:center;
  min-width:0;
  max-width:100%;
  padding:6px 8px;
  border:1px solid var(--line-1);
  border-radius:10px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 92%, transparent), color-mix(in srgb, var(--bg-3) 92%, transparent));
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
}
.grooming-create-tools__label{
  flex:0 0 auto;
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-3);
  padding-right:6px;
  border-right:1px solid var(--line-1);
}
.grooming-create-actions{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:nowrap;
  flex:0 0 auto;
}
/* Stessi pill dell’Outfit (target + genere), con più aria tra gruppi */
.grooming-create-flags.grooming-create-flags--outfit-style{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:20px;
  flex:0 0 auto;
}
.grooming-create-actions--primary{
  margin-left:auto;
  flex-wrap:nowrap;
  gap:6px;
  padding-left:14px;
}
#groomingCreateAll{
  font-weight:700;
  min-height:22px;
  padding:0 8px;
  font-size:9px;
  letter-spacing:.02em;
}
.grooming-create-actions .btn.small{
  min-height:22px;
  font-size:9px;
  padding:0 6px;
  border-radius:6px;
}
.grooming-create-actions--primary .grooming-pel-color-btn{
  margin-left:0;
}
/* Solo colore peli: arancio vivace, più basso dei .btn.small vicini */
.grooming-create-actions .grooming-pel-color-btn{
  min-height:16px;
  height:auto;
  padding:0 5px;
  line-height:1.1;
  font-size:8px;
  border-radius:5px;
  background:linear-gradient(180deg, #ffb04a 0%, #ff8c14 42%, #e86800 100%);
  border:1px solid #ffc266;
  color:#1a0c00;
  font-weight:700;
  letter-spacing:.02em;
  box-shadow:0 1px 2px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.28);
}
:root[data-theme="light"] .grooming-create-actions .grooming-pel-color-btn{
  background:linear-gradient(180deg, #ffc14d 0%, #ff9a1a 45%, #f07800 100%);
  border-color:#e88810;
  color:#1e1000;
  box-shadow:0 1px 2px rgba(180,90,0,.2), inset 0 1px 0 rgba(255,255,255,.45);
}
.grooming-create-actions .grooming-pel-color-btn:hover,
.grooming-create-actions .grooming-pel-color-btn:focus-visible{
  background:linear-gradient(180deg, #ffc060 0%, #ff9818 40%, #f07300 100%);
  border-color:#ffd080;
  color:#140800;
  outline:none;
}
:root[data-theme="light"] .grooming-create-actions .grooming-pel-color-btn:hover,
:root[data-theme="light"] .grooming-create-actions .grooming-pel-color-btn:focus-visible{
  background:linear-gradient(180deg, #ffd080 0%, #ffa526 45%, #f08000 100%);
  border-color:#d97a00;
  color:#160c00;
}

/* RIGA 2: area del corpo (solo Peluria / Body Groom) */
.grooming-header-row--area {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

.grooming-area-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-right: 0.35rem;
  flex-shrink: 0;
}

.grooming-header-row--area .grooming-area-pills {
  margin: 0;
}

/* RIGA 3: dropdown + Applica/Pulisci */
.grooming-header-row--controls {
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}

.grooming-header-row--controls .grooming-gender-toggle {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}

.grooming-header-row--controls .grooming-gender-toggle .btn-pill {
  min-width: 56px;
  padding: 0 10px;
  font-size: 12px;
}

.grooming-header-row--controls .grooming-placeholder-fields {
  flex: 1 1 auto;
  min-width: 0;
}

.grooming-actions {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

/* Grooming Selections Panel */
.grooming-selections-panel {
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
}

.grooming-selections-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  margin: 0 0 0.5rem 0;
  text-transform: uppercase;
}

.grooming-selections-empty {
  font-size: 13px;
  color: var(--ink-3);
  font-style: italic;
  margin: 0;
}

.grooming-selections-panel .selections-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.grooming-selections-panel .selection-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
}

.grooming-selections-panel .selection-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
}

.grooming-selections-panel .selection-value {
  font-size: 13px;
  color: var(--ink-1);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grooming-selections-panel .btn-icon {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 0.25rem;
  color: var(--ink-3);
  transition: color 0.2s;
}

.grooming-selections-panel .btn-icon:hover {
  color: var(--ink-1);
}

.grooming-selections-panel .selection-edit {
  color: var(--accent);
}

.grooming-selections-panel .selection-remove {
  color: var(--danger);
}

/* Tab Grooming: tab-body ha 3 figli → grid 2 righe, panel a tutta larghezza */
#tab-grooming .tab-body {
  display: grid;
  grid-template-columns: minmax(0, var(--dual-cards-fr)) minmax(var(--dual-preview-min), var(--dual-preview-fr));
  grid-template-rows: auto minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}

#tab-grooming .tab-body #groomingSelectionsPanel {
  grid-column: 1 / -1;
  margin: 0;
}

#tab-grooming .tab-body .tab-body__cards {
  grid-row: 2;
  grid-column: 1;
}

#tab-grooming .tab-body__cards > .chip-panel > .cards-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

#tab-grooming .tab-body .tab-body__preview {
  grid-row: 2;
  grid-column: 2;
}

.grooming-type-toggle,
.grooming-area-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}

.grooming-area-pills {
  margin-right: 0.75rem;
}

.grooming-type-toggle .btn-pill,
.grooming-area-pills .btn-pill {
  border-radius: 999px;
  padding: 0 var(--chip-pill-pad);
  min-height: var(--chip-pill-height);
  height: var(--chip-pill-height);
  max-height: var(--chip-pill-height);
  border: 1px solid var(--pill-border);
  background: var(--pill-bg);
  color: var(--pill-text, var(--ink-2));
  font-size: 12.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.2s;
  min-width: auto;
  white-space: nowrap;
}

.grooming-type-toggle .btn-pill.active,
.grooming-area-pills .btn-pill.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.grooming-placeholder-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  flex: 1 1 auto;
}

.grooming-placeholder-fields .field.is-inline {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.grooming-placeholder-fields .label {
  font-size: 0.813rem;
  white-space: nowrap;
  margin: 0;
}

.grooming-placeholder-fields .field-select,
.grooming-placeholder-fields .field-input {
  font-size: 0.813rem;
  padding: 0.375rem 0.5rem;
  min-width: 120px;
  width: 120px;
}

.grooming-placeholder-fields .field-hint {
  margin: 0;
  padding: 0.5rem 0;
  color: var(--text-3);
  font-size: 0.875rem;
  font-style: italic;
}

.grooming-area-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.grooming-area-field .label {
  margin: 0;
  white-space: nowrap;
}

/* Grooming preview styles */
#groomingList.cards-wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 900px) {
  #groomingList.cards-wrap {
    grid-template-columns: 1fr;
  }
}

/* Grooming card active state */
#groomingList .card.active {
  border-color: var(--chip-card-selected-border);
  box-shadow: var(--chip-card-selected-glow);
  background: var(--chip-card-selected-bg);
}
#groomingList .card.active .title {
  color: var(--chip-card-selected-title, var(--chip-card-title));
}
#groomingList .card.active .desc {
  color: var(--chip-card-selected-subtext, var(--chip-card-subtext));
}

/* Grooming preview styles (preview panel) */
:root[data-theme="light"] .grooming-type-toggle .btn-pill.active,
:root[data-theme="light"] .grooming-area-pills .btn-pill.active {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
}

#tab-dynamics .filters-service-cta{
  margin-left:auto;
  flex-shrink:0;
}

/* Body Morph header: uses standard .tab-header styles */
#tab-bodymorph .tab-header{
  /* Inherits from .tab-header */
}

#tab-bodymorph .tab-header .body-morph-areas{
  margin:0;
}

/* Keep toolbars visually consistent with the darker headers */
.props-toolbar,
/* Outfit header: uses standard .tab-header styles but with custom boxes */
#tab-outfit .tab-header{
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  margin-bottom:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.outfit-header-box{
  padding:10px 14px;
  border:1px solid var(--line-1);
  border-radius:10px;
  background:var(--panel-4);
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:10px;
}

/* Box 1: DB + Pins in una riga */
.outfit-header-box--row1{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  width:100%;
}

.outfit-header-box--row1 .outfit-db-line{
  margin:0;
}

.outfit-header-box--row1 .outfit-pins-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(10px, 1.6vw, 18px);
  margin-left:auto;
}

.outfit-header-box--row1 .outfit-pins-row > .field{
  flex:0 1 auto;
  min-width:0;
}

.outfit-header-box--row1 .outfit-pins-row .filters-service-cta{
  margin-left:auto;
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
  flex:0 0 auto;
}

/* Box 2: Tutto su una riga compatta (Generi + Dropdown + Bottoni) */
.outfit-header-box--row2{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  width:100%;
  align-items:center;
}

#tab-outfit .outfit-header-box--row2 .dropdown-field-set{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  flex:1;
  min-width:0;
}
.outfit-header-box--row2 .dropdown-field-set{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
  flex:1;
  min-width:0;
}

/* Outfit row2: layout a gruppi [Categoria Brand Area] | [Mat1 Col1] | [Stampa] | [Mat2 Col2] (larghezze base; stacked override sotto) */
#tab-outfit .outfit-header-box--row2 .dropdown-field-set:not(.outfit-filters-stacked) .field{
  flex:0 1 140px;
  min-width:120px;
  max-width:140px;
}
#tab-outfit .outfit-header-box--row2 .dropdown-field-set:not(.outfit-filters-stacked) .field:nth-child(2){
  flex:0 1 100px;
  min-width:85px;
  max-width:100px;
}
#tab-outfit .outfit-header-box--row2 .dropdown-field-set:not(.outfit-filters-stacked) .field:nth-child(n+3){
  flex:0 1 130px;
  min-width:110px;
  max-width:130px;
}
.outfit-header-box--row2 .dropdown-field-set .field{
  flex:0 1 105px;
  min-width:85px;
  max-width:115px;
}

/* Outfit filtri: label sopra, larghezze uguali, 3 blocchi (Categoria+Tema+Area | Mat1+Col1+Stampa | Mat2+Col2) */
#tab-outfit .outfit-header-box--row2 .dropdown-field-set.outfit-filters-stacked{
  align-items:flex-end;
  gap:6px 10px;
}
#tab-outfit .outfit-header-box--row2 .dropdown-field-set.outfit-filters-stacked .field.is-inline{
  flex-direction:column;
  align-items:stretch;
  gap:2px;
  flex:0 0 98px;
  min-width:98px;
  max-width:98px;
}
/* Blocco 1: Categoria, Tema/Brand, Area — spazio normale tra loro */
#tab-outfit .outfit-header-box--row2 .dropdown-field-set.outfit-filters-stacked .field.is-inline:nth-child(4){
  margin-left:20px;
}
/* Blocco 2: Materiale 1, Colore 1, Stampa — vicini */
#tab-outfit .outfit-header-box--row2 .dropdown-field-set.outfit-filters-stacked .field.is-inline:nth-child(7){
  margin-left:20px;
}
/* Blocco 3: Materiale 2, Colore 2 — vicini */
#tab-outfit .outfit-header-box--row2 .dropdown-field-set.outfit-filters-stacked .field.is-inline > .label{
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.02em;
  color:var(--text-2);
  margin:0;
  white-space:nowrap;
}
#tab-outfit .outfit-header-box--row2 .dropdown-field-set.outfit-filters-stacked .field.is-inline > select,
#tab-outfit .outfit-header-box--row2 .dropdown-field-set.outfit-filters-stacked .field.is-inline > input[type="text"]{
  width:100%;
  min-width:0;
  padding:4px 6px;
  font-size:12px;
}
#tab-outfit .outfit-header-box--row2 .dropdown-field-set.outfit-filters-stacked .filters-service-cta{
  align-self:flex-end;
}

.outfit-header-box--row2 .filters-service-cta{
  margin-left:auto;
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  justify-content:flex-end;
  align-items:center;
  flex:0 0 auto;
}
.outfit-header-box--row2 .filters-service-cta .btn{
  padding:0 12px;
  font-size:12px;
}

#tab-outfit .outfit-header-box--look-builder{
  width:100%;
  margin-top:6px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.08);
}
.outfit-look-builder__row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
  width:100%;
}
.outfit-look-builder__title{
  flex:0 0 auto;
  margin:0;
  opacity:.85;
}
.outfit-look-builder__areas{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 14px;
  flex:1 1 200px;
}
.outfit-look-builder__chk{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
.outfit-look-builder__chk input{
  margin:0;
}
.outfit-look-builder__chk--total-mode{
  font-weight:600;
  padding:0 2px 0 0;
  border-right:1px solid var(--line-1);
  margin-right:2px;
}
.outfit-look-builder__chk--dimmed{
  opacity:0.42;
  cursor:not-allowed;
}
#tab-outfit .outfit-header-box--look-builder .outfit-look-builder__tail{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
  margin-left:auto;
  flex:0 1 auto;
  justify-content:flex-end;
}
#tab-outfit .outfit-header-box--look-builder .outfit-look-builder__tail .btn.small.prim{
  flex:0 0 auto;
  margin-left:0;
}
.outfit-look-builder__guide-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:0 0 auto;
  min-width:220px;
}
.outfit-look-builder__guide-field--inline-label{
  flex-direction:row;
  align-items:center;
  gap:8px 10px;
  flex-wrap:wrap;
  min-width:0;
  max-width:min(100%,28rem);
}
.outfit-look-builder__guide-field--inline-label .outfit-look-builder__guide-label{
  margin:0;
  flex:0 0 auto;
  white-space:nowrap;
  align-self:center;
}
.outfit-look-builder__guide-field--inline-label .outfit-look-builder__guide-select{
  flex:1 1 12rem;
  min-width:10rem;
  max-width:20rem;
}

.outfit-look-builder__guide-label{
  opacity:.85;
}

.outfit-look-builder__guide-select{
  background:var(--panel-2);
  border:1px solid var(--line-2);
  border-radius:8px;
  color:var(--ink-1);
  padding:6px 10px;
  font-size:12px;
  outline:none;
}

.outfit-look-builder__guide-select:focus{
  border-color:rgba(118,170,255,.8);
  box-shadow:0 0 0 2px rgba(118,170,255,.15);
}
.outfit-header-box--look-builder{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:stretch;
}
.outfit-look-builder__acc-subs-wrap{
  width:100%;
  padding-left:2px;
  padding-top:4px;
}
.outfit-look-builder__acc-subs-label{
  display:block;
  margin-bottom:4px;
}
.outfit-look-builder__acc-subs-hint{
  margin:0 0 8px;
  font-size:11px;
  line-height:1.35;
  opacity:.75;
  max-width:52rem;
}
.outfit-look-builder__acc-subs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 14px;
}
.outfit-look-builder__guide-cluster{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
  flex:0 1 auto;
  min-width:0;
}
.outfit-look-builder__guide-cluster .outfit-look-builder__chk--print-flag{
  flex:0 0 auto;
  align-self:center;
  font-size:12px;
  white-space:nowrap;
}
.outfit-look-builder__guide-cluster .outfit-look-builder__guide-field{
  flex:0 1 auto;
  min-width:0;
}

/* Legacy classes (for backward compatibility) */
.outfit-header-box--db{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:flex-start;
  gap:10px;
}

.outfit-header-box--filters{
  display:flex;
  flex-direction:column;
  gap:clamp(10px, 1.5vw, 16px);
  width:100%;
}

.outfit-header-box--filters > .dropdown-field-set{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(10px, 1.6vw, 18px);
  align-items:flex-end;
  justify-content:flex-start;
  width:100%;
}

.outfit-header-box--filters > .dropdown-field-set.is-inline-labels{
  align-items:center;
}

.outfit-header-box--filters .label{
  margin-bottom:3px;
}

.outfit-header-box--filters .dropdown-field-set > .field{
  flex:0 1 150px;
  min-width:0;
  max-width:150px;
}

.outfit-header-box--filters > .dropdown-field-set:last-of-type{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:flex-start;
  width:100%;
}

.outfit-header-box--filters > .dropdown-field-set:last-of-type > .filters-service-cta{
  margin-left:auto;
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
  flex:0 0 auto;
}

.outfit-header-box--pins{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.outfit-header-box--pins .outfit-pins-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(16px, 2vw, 26px);
  width:100%;
}

.outfit-header-box--pins .outfit-pins-row > .filters-service-cta{
  margin-left:auto;
}

#tab-outfit .tab-header .outfit-db-line{
  margin-left:0;
  margin-right:0;
}

#tab-outfit .tab-header .outfit-gender-block{
  margin-left:0;
}

/* Outfit: DB must be on the far left (override legacy auto-push rule) */
#tab-outfit .outfit-db-line{ margin-left:0; }

.dyn-header .dyn-db,
/* Dynamics: preview styling */
#tab-dynamics .tab-body__preview{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  overflow:hidden;
}

#tab-dynamics .arch-preview-board{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  background:var(--panel-3);
  border:1px solid var(--line-1);
  border-radius:var(--chip-shell-radius);
  padding:var(--chip-shell-pad);
}

:root[data-theme="light"] #tab-dynamics .arch-preview-board{
  background:var(--panel-2);
}

/* Dynamics: rimuovi override specifici obsoleti */

#tab-grooming .grooming-tabstrip{
  flex:0 0 auto;
  min-width:0;
}
#tab-grooming #groomingDynamicFiltersRow .filters-service-cta{
  margin-left:auto;
}

.preset-toolbar__db{ flex:0 0 auto; min-width:0; }
.preset-toolbar__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
  flex:0 0 auto;
}
.preset-toolbar__actions .btn{
  width:auto;
  min-width:auto;
  max-width:none;
  white-space:nowrap;
}

@media (max-width:1200px){
  .grooming-toolbar,
  .preset-toolbar{ flex-wrap:wrap; }
  .grooming-toolbar__db,
  .preset-toolbar__db{ flex:1 1 100%; }
  .grooming-toolbar__db,
  .preset-toolbar__db{ justify-content:flex-start; }
  .grooming-toolbar__db,
  .preset-toolbar__db,
  .db-pair{ flex-wrap:wrap; }
  .db-pair > div{ flex:1 1 var(--dropdown-width-max); }
}

.grooming-tabstrip{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
}

.grooming-tabstrip::-webkit-scrollbar{ display:none; }

.grooming-tab{
  border-radius:999px;
  border:1px solid var(--pill-border);
  background:var(--pill-bg);
  color:var(--ink-2);
  padding:0 10px;
  height:20px;
  min-height:20px;
  max-height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-size:11.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  cursor:pointer;
  transition:all .2s ease;
}
.grooming-tab:hover{ color:var(--ink-1); background:var(--pill-hover-bg); }
.grooming-tab.active{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
  box-shadow:var(--pill-shadow);
}
.grooming-tab.disabled{
  opacity:.35;
  cursor:not-allowed;
}

.grooming-tab-panels{
  position:relative;
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}

.grooming-tab-panel{
  display:none;
  flex-direction:column;
  margin-top:8px;
  flex:1;
  min-height:0;
}

.grooming-tab-panel.active{
  display:flex;
  flex:1;
  min-height:0;
}

.grooming-panel-body{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}


.grooming-panel-header .filters-row{
  margin-bottom:20px;
}

#groomingMakeupSection .filters-row > [hidden]{
  display:none !important;
}

#groomingMakeupBodyAreaField{
  width:100%;
  margin-top:16px;
  margin-bottom:20px;
}

#groomingBodyGroomBodyAreaField{
  width:100%;
  margin-top:0;
  margin-bottom:0;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
}

#groomingBodyGroomBodyAreaField .filters-service-cta{
  margin-left:auto;
  flex:0 0 auto;
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
}

/* Nascondi i bottoni nella seconda riga quando Body Groom è attivo (terza riga visibile) */
#groomingDynamicFiltersRow:has(~ #groomingBodyGroomBodyAreaField:not([hidden])) .filters-service-cta.grooming-toolbar__actions{
  display:none !important;
}

#groomingBodyGroomBodyAreaField .grooming-target-mount{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex:0 0 auto;
}

/* Body Morph — header bar matches reference (TESTA/CORPO rows) */
.body-morph-areas{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.body-morph-areas__row{
  align-items:center;
  gap:14px;
  flex-wrap:nowrap;
}

/* Body Morph: una sola riga filtri (come Grooming); scroll orizzontale sotto i 1200px invece di spezzare Maschile/Femminile */
#tab-bodymorph .body-morph-areas__row.dropdown-field-set.is-nowrap{
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  margin-inline-start:clamp(12px, 2vw, 28px);
}
#tab-bodymorph .body-morph-areas__row.dropdown-field-set.is-nowrap::-webkit-scrollbar{ display:none; }
#tab-bodymorph .field--petto-gender.field.is-inline{
  flex:0 0 auto;
  flex-wrap:nowrap;
  white-space:nowrap;
}

/* Body Morph: separazione maggiore tra sottocategoria e database */
#tab-bodymorph .body-morph-areas__row .db-pair{
  margin-left:clamp(24px, 3vw, 40px) !important;
  margin-right:auto !important;
}

/* Body Morph: keep dropdowns compact like other tabs */
#tab-bodymorph #bodyMorphDB1,
#tab-bodymorph #bodyMorphDB2,
#tab-bodymorph #bodyMorphDB3{
  width:100px;
  max-width:100px;
}
#tab-bodymorph #bodyMorphGroup,
#tab-bodymorph #bodyMorphCategory,
#tab-bodymorph #bodyMorphSubcategory{
  width:124px;
  max-width:124px;
}
#tab-bodymorph .body-morph-petto-gender{
  display:inline-flex;
  gap:6px;
  flex-wrap:nowrap;
  align-items:center;
}
#tab-bodymorph .body-morph-petto-gender .btn.active{
  background:var(--blue) !important;
  color:#fff !important;
  border-color:var(--blue) !important;
}
#tab-bodymorph #bodyMorphLevel{
  width:90px;
  max-width:90px;
}

/* Body Morph: select opzione — spinto a destra (auto) e larghezza fissa per non invadere i toggle Stile */
#tab-bodymorph #bodyMorphOptionWrap.field.is-inline{
  flex:0 0 auto;
  min-width:0;
  margin-inline-start:auto;
  padding-inline-start:clamp(10px, 1.5vw, 24px);
}

/* Override .dropdown-field-set flex:1 sui select: evita overflow del morph option */
#tab-bodymorph #bodyMorphOptionWrap.field.is-inline > select,
#tab-bodymorph #bodyMorphOptionSelect{
  flex:0 0 auto !important;
  min-width:0;
  width:140px;
  max-width:140px;
}

/* Archetipi: P1/P2 toggle stesso blu delle altre tab */
#tab-archetypes #archTargetToggle .btn-pill.active,
#tab-archetypes .outfit-target-toggle .btn-pill.active{
  background:var(--blue) !important;
  color:#fff !important;
  border-color:var(--blue) !important;
}

/* Body Morph: P1/P2 toggle è in colonna anteprima, stesso blu delle altre tab */
#tab-bodymorph #bodyMorphTargetToggle .btn-pill.active,
#tab-bodymorph .outfit-target-toggle .btn-pill.active{
  background:var(--blue) !important;
  color:#fff !important;
  border-color:var(--blue) !important;
}

.body-morph-areas__level{
  margin-left:0;
  flex:0 0 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}

.body-morph-areas__mini-label{
  flex:0 0 auto;
  font-weight:800;
  letter-spacing:.05em;
  color:var(--ink-2);
  text-transform:uppercase;
  white-space:nowrap;
  font-size:11px;
  line-height:1;
}

.body-morph-areas__level select{
  height:calc(var(--control-height) - 10px);
  padding:0 10px;
  border-radius:var(--control-radius);
  background:var(--panel-4);
  color:var(--ink-1);
  border:1px solid var(--line-1);
  font-size:11.5px;
  width:200px;
  min-width:200px;
  max-width:200px;
}

#groomingBodyGroomBodyAreaField #groomingBodyGroomBodyArea.body-area-flags{
  flex:1 1 auto;
  min-width:0;
}

.body-groom-type-picker{
  margin-top:12px;
  margin-bottom:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.body-groom-type-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.body-groom-type-chips .chip-toggle{
  min-width:0;
  padding:5px 14px;
  font-size:12px;
  text-align:center;
}

.body-groom-type-chips .chip-toggle[disabled],
.body-groom-type-chips .chip-toggle.is-disabled{
  opacity:.4;
  cursor:not-allowed;
}

.grooming-inline-actions{
  display:flex;
  gap:10px;
  align-items:flex-end;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.grooming-actions-field{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  padding-top:6px;
}

#groomingBodyGroomSection .filters-row .grooming-actions-field{
  min-width:260px;
}

#groomingBodyGroomSection .filters-row .grooming-inline-actions .btn{
  width:auto;
  min-width:var(--dropdown-width-min);
  max-width:var(--dropdown-width-max);
  white-space:nowrap;
}

.body-area-field .label{
  margin-bottom:8px;
}

#groomingMakeupBodyArea.body-area-flags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  width:100%;
  max-width:none;
  justify-content:flex-start;
  overflow:visible;
}

#groomingBodyGroomBodyArea.body-area-flags{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  padding:8px 10px;
  border:1px solid var(--line-2);
  border-radius:14px;
  background:var(--panel-4);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
}


@media (max-width:1200px){
  #groomingMakeupBodyArea.body-area-flags{
    gap:7px;
  }
}

.body-area-option{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:max-content;
  flex:0 0 auto;
  white-space:nowrap;
  cursor:pointer;
}

#groomingBodyGroomBodyArea .body-area-option{
  justify-content:center;
  width:auto;
  min-width:max-content;
  padding:0;
}

.body-area-option input[type="checkbox"]{
  position:absolute;
  inset:0;
  opacity:0;
  margin:0;
}

.body-area-option > span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:4px 9px;
  border:1px solid var(--line-1);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  color:var(--ink-2);
  font-size:11.5px;
  font-weight:600;
  transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

#groomingBodyGroomBodyArea .body-area-option > span{
  padding:5px 10px;
  font-size:12px;
}

.body-area-option input[type="checkbox"]:focus-visible + span{
  outline:2px solid var(--blue-light);
  outline-offset:2px;
}

.body-area-option input[type="checkbox"]:checked + span{
  background:var(--chip-card-selected-bg);
  color:var(--chip-card-title);
  border-color:var(--chip-card-selected-border);
  box-shadow:0 0 0 1px var(--chip-card-selected-border);
}

.body-area-option:hover > span{
  border-color:var(--chip-card-selected-border);
  background:rgba(95,213,255,.1);
  color:var(--ink-1);
}

.body-area-option[data-disabled="true"]{
  opacity:.45;
  border-style:dashed;
}

/* Scene header legacy (se presente) */
.scene-header__top{
  display:flex !important;
  align-items:flex-end;
  justify-content:flex-start !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
  width:100% !important;
}

/* Outfit: DB on the far right, search after gender */
.outfit-db-line{ margin-left:auto; }

@media (max-width:1080px){
  #groomingMakeupSection .filters-row{
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

@media (max-width:640px){
  #groomingMakeupSection .filters-row{
    grid-template-columns:1fr;
  }
}

@media (max-width:960px){
  .library-panel__list{ max-height:none; }
}
/* True horizontal single-row mode: flex row that scrolls inside the scroller */
.cards-scroll.horizontal-x .cards-wrap{ display:flex !important; flex-wrap:nowrap; gap:14px; }
.cards-scroll.horizontal-x .cards-wrap::before,
.cards-scroll.horizontal-x .cards-wrap::after{ content:""; flex:0 0 var(--inset-pad); }
.cards-scroll.horizontal-x .cards-wrap .card{ flex:0 0 var(--chip-card-max-width); max-width:var(--chip-card-max-width); }
.cards-scroll.horizontal-x .cards-wrap .card .desc{ display:block; overflow:visible; }

/* Makeup: 2 card per riga nel contenitore scrollabile verticale */
/* Increased specificity to avoid !important */
#groomingMakeupSection .cards-scroll .cards-wrap[class]{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, var(--chip-card-max-width)));
  gap:min(var(--grid-gap), 25px);
  align-content:flex-start;
  justify-content:flex-start;
  justify-items:flex-start;
}
@media (max-width:1100px){
  #groomingMakeupSection .cards-scroll .cards-wrap[class]{ grid-template-columns:repeat(2, minmax(0, var(--chip-card-max-width))); }
}
@media (max-width:900px){
  #groomingMakeupSection .cards-scroll .cards-wrap{ grid-template-columns:repeat(2, minmax(0, var(--chip-card-max-width))); }
}
@media (max-width:640px){
  #groomingMakeupSection .cards-scroll .cards-wrap{ grid-template-columns:1fr; }
}

/* Hair & Beard: 4 card per riga con fallback mobile */
#groomingHairSection,
#groomingBeardSection{
  --card-min-h:160px;
  --chip-card-pad:14px;
  --chip-card-gap-title-desc:10px;
  --chip-card-gap-desc-tags:12px;
}

#groomingHairScroll,
#groomingBeardScroll{
  max-height:min(500px, calc((var(--card-min-h) * 2) + var(--grid-gap) + (var(--inset-pad) * 2)));
}

#groomingHairSection .card .desc,
#groomingBeardSection .card .desc{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Body Groom & Make-up: match Hair/Beard compactness and scroller height */
#groomingBodyGroomSection,
#groomingMakeupSection{
  --card-min-h:160px;
  --chip-card-pad:14px;
  --chip-card-gap-title-desc:10px;
  --chip-card-gap-desc-tags:12px;
}

#groomingBodyGroomScroll,
#groomingMakeupScroll{
  max-height:min(500px, calc((var(--card-min-h) * 2) + var(--grid-gap) + (var(--inset-pad) * 2)));
}

#groomingBodyGroomSection .card .desc,
#groomingMakeupSection .card .desc{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Show tag chips inside Grooming cards (tags are hidden globally elsewhere) */
.grooming-tab-panels .card .chip[data-chip-type="tag"]{
  display:inline-flex !important;
}

/* Increased specificity to avoid !important */
#groomingHairSection .cards-scroll .cards-wrap[class],
#groomingBeardSection .cards-scroll .cards-wrap[class]{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, var(--chip-card-max-width)));
  gap:min(var(--grid-gap), 25px);
  align-content:flex-start;
  justify-content:flex-start;
  justify-items:flex-start;
}
@media (max-width:1100px){
  #groomingHairSection .cards-scroll .cards-wrap[class],
  #groomingBeardSection .cards-scroll .cards-wrap[class]{ grid-template-columns:repeat(2, minmax(0, var(--chip-card-max-width))); }
}
@media (max-width:900px){
  #groomingHairSection .cards-scroll .cards-wrap,
  #groomingBeardSection .cards-scroll .cards-wrap{ grid-template-columns:repeat(2, minmax(0, var(--chip-card-max-width))); }
}
@media (max-width:640px){
  #groomingHairSection .cards-scroll .cards-wrap,
  #groomingBeardSection .cards-scroll .cards-wrap{ grid-template-columns:1fr; }
}

/* Grooming scrollers inherit global --card-container-max */

.grooming-makeup-group{
  display:inline-flex;
  gap:8px;
}
.grooming-makeup-group .btn.tab{
  border-radius:999px;
  border:1px solid var(--pill-border);
  background:var(--pill-bg);
  color:var(--ink-2);
  height:20px;
  min-height:20px;
  max-height:20px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-size:12px;
  cursor:pointer;
}
.grooming-makeup-group .btn.tab:hover{ color:var(--ink-1); background:var(--pill-hover-bg); }
.grooming-makeup-group .btn.tab.active{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
  box-shadow:var(--pill-shadow);
}

.grooming-makeup-subcats{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}

.grooming-makeup-subcats button{
  border-radius:10px;
  border:1px solid var(--line-2);
  background:var(--panel-4);
  color:var(--ink-2);
  font-size:11.5px;
  padding:4px 12px;
  cursor:pointer;
  transition:all .2s ease;
}

.grooming-makeup-subcats button.active{
  background:var(--ink-3);
  color:#fff;
  border-color:var(--ink-3);
}

.grooming-panel-header .filters-row,
.grooming-panel-header .inline-inputs{
  margin-top:0;
}

#groomingBodyGroomSection .grooming-inline-actions{
  width:100%;
  gap:10px;
}

#groomingBodyGroomSection .grooming-inline-actions .btn{
  width:auto;
  flex:0 0 auto;
  min-width:var(--dropdown-width-min);
  max-width:var(--dropdown-width-max);
}

@media (max-width:960px){
  #groomingBodyGroomSection .grooming-actions-field{
    flex:1 1 100%;
    justify-content:flex-start;
  }
  .grooming-inline-actions{
    justify-content:flex-start;
    flex-wrap:wrap;
  }
}



/* Increased specificity to avoid !important */
#groomingBodyGroomList.cards-wrap[class]{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, var(--chip-card-max-width)));
  gap:min(var(--grid-gap), 25px);
  justify-content:flex-start;
  justify-items:flex-start;
}

#groomingBodyGroomList.cards-wrap > .card{
  min-width:0;
}

/* Forza sempre 2 card per riga per Body Groom */
/* Increased specificity to avoid !important */
@media (max-width:1400px){
  #groomingBodyGroomList.cards-wrap[class]{ grid-template-columns:repeat(2, minmax(0, var(--chip-card-max-width))); }
}

@media (max-width:1024px){
  #groomingBodyGroomList.cards-wrap[class]{ grid-template-columns:repeat(2, minmax(0, var(--chip-card-max-width))); }
}

@media (max-width:640px){
  #groomingBodyGroomList.cards-wrap[class]{ grid-template-columns:1fr; }
  #groomingBodyGroomSection .filters-row .grooming-inline-actions .btn{ width:100%; }
}

.inline-actions{
  display:flex;
  gap:8px;
  justify-content:flex-start;
  align-items:center;
}

.inline-actions .btn{
  width:auto;
  flex:0 0 auto;
  min-width:var(--dropdown-width-min);
  max-width:var(--dropdown-width-max);
}

.bodyhair-scroll{
  max-height:none;
  overflow:visible;
  padding: var(--inset-pad);
  background:var(--panel-3);
  border:1px solid var(--line-1);
  border-radius:12px;
}

.bodyhair-table{
  width:100%;
  border-collapse:collapse;
  font-size:12.5px;
}
.bodyhair-table thead th{
  text-align:left;
  padding:8px;
  background:rgba(255,255,255,.04);
  color:var(--ink-2);
  font-weight:600;
}
.bodyhair-table tbody td{
  border-top:1px solid var(--line-1);
  padding:6px;
}
.bodyhair-table select{ width:100%; }
.bodyhair-table button{ width:100%; }

/* GROOMING: .grooming-preview-panel wrapper, .grooming-preview-list scroll container */
.grooming-preview-panel.section-block{
  margin-top:0;
  background:var(--panel-3);
  border:1px solid var(--line-1);
  border-radius:var(--chip-shell-radius);
  padding:var(--chip-shell-pad);
  display:flex;
  flex-direction:column;
  gap:0;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}
.grooming-preview-panel.section-block > .grooming-preview-list{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);
}
.grooming-preview-panel.section-block > .grooming-preview-list::-webkit-scrollbar{ width:8px; }
.grooming-preview-panel.section-block > .grooming-preview-list::-webkit-scrollbar-thumb{
  background:var(--scrollbar-thumb);
  border-radius:4px;
}
.grooming-preview-panel.section-block > .grooming-preview-list::-webkit-scrollbar-track{
  background:var(--scrollbar-track);
}
:root[data-theme="light"] .grooming-preview-panel.section-block{
  background:var(--panel-2);
}
:root[data-theme="light"] .grooming-preview-panel.section-block > .grooming-preview-list::-webkit-scrollbar-track{
  background:rgba(180,185,195,.9);
}
/* Grooming preview: compatto, scroll interno */
#tab-grooming .tab-body__preview{
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:12px 14px;
}
#tab-grooming .tab-body__preview .section-block{
  min-width:0;
  overflow-x:hidden;
}

/* Grooming: cards-scroll con min-height per 4 righe */
.grooming-panel-body > .cards-scroll{
  flex:1;
  min-height:748px;
  overflow-y:auto;
  overflow-x:hidden;
}


.grooming-preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(106,157,255,.16);
}

.grooming-preview-head .grooming-preview-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:nowrap;
  margin-top:0;
}

.grooming-preview-p1p2{
  display:flex;
  justify-content:flex-end;
  margin-bottom:16px;
}

.grooming-target-toggle{
  display:flex;
  gap:8px;
}

.grooming-target-toggle .btn-pill{
  cursor:pointer;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.grooming-target-toggle .btn-pill:hover{
  color:var(--ink-1);
  background:var(--pill-hover-bg);
}

.grooming-target-toggle .btn-pill.active{
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
  box-shadow:var(--pill-shadow);
}

.grooming-preview-list{
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:stretch;
  flex:1 1 auto;
  min-height:0;
}

.grooming-preview-row{
  border:1px solid var(--line-2);
  border-radius:12px;
  background:var(--panel-3);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
  flex:0 0 auto;
  max-height:400px;
}
.grooming-preview-row.is-collapsed{
  padding:10px 14px;
  max-height:none;
}

.grooming-preview-row__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  cursor:pointer;
}
.grooming-preview-row.is-collapsed .grooming-preview-row__head{
  margin-bottom:0;
}
.grooming-preview-toggle{
  border:none;
  background:none;
  color:var(--ink-2);
  font-size:12px;
  line-height:1;
  cursor:pointer;
  padding:4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s ease, color .2s ease;
  flex-shrink:0;
}
.grooming-preview-toggle:hover{
  color:var(--ink-1);
}
.grooming-preview-toggle__icon{
  display:inline-block;
  transition:transform .2s ease;
}
.grooming-preview-row.is-collapsed .grooming-preview-toggle__icon{
  transform:rotate(-90deg);
}
.grooming-preview-row__body{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
  min-height:0;
  overflow-y:auto;
}
.grooming-preview-row.is-collapsed .grooming-preview-row__body{
  display:none !important;
}

.grooming-preview-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:var(--ink-2);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.grooming-preview-row .preview-text{
  margin:0;
  font-size:12.5px;
  line-height:1.5;
}

.grooming-preview-row .field{
  margin:0;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}

/* Dark mode: box testo sfondo scuro, testo bianco */
.grooming-preview-row .arch-preview-card__textarea,
.grooming-preview-row .preview-textarea{
  padding:10px !important;
  font-size:13.5px !important;
  line-height:1.5 !important;
  border-radius:10px !important;
  resize:vertical !important;
  flex:1 1 auto;
  min-height:280px;
  border:1px solid var(--line-1);
  background:var(--panel-3);
  color:#ffffff;
  width:100%;
}
.grooming-preview-row .arch-preview-card__textarea:focus,
.grooming-preview-row .preview-textarea:focus{
  outline:none;
  border-color:var(--blue-light);
  box-shadow:0 0 0 1px var(--blue-light);
}

.grooming-preview-items{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.grooming-preview-item{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);
  color:var(--ink-1);
  font-size:12.5px;
  line-height:1.35;
  max-width:100%;
}

.grooming-preview-item__label{
  flex:1;
  min-width:0;
  word-break:break-word;
}

.grooming-preview-item__remove{
  border:none;
  background:none;
  color:var(--ink-3);
  font-size:15px;
  line-height:1;
  cursor:pointer;
  padding:0;
}

.grooming-preview-item__remove:focus-visible{
  outline:2px solid var(--blue-light);
  border-radius:4px;
}

.grooming-preview-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}

.preview-block{
  background:var(--panel-3);
  border:1px solid var(--line-2);
  border-radius:12px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:120px;
}

.preview-block-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.preview-block-header h4{
  margin:0;
  font-size:13px;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.preview-text{
  margin:0;
  white-space:pre-line;
  color:var(--ink-1);
  font-size:12.5px;
  line-height:1.45;
}
.preview-text.empty{ color:var(--ink-3); }

.preview-close{
  border:none;
  background:none;
  color:var(--ink-3);
  font-size:16px;
  line-height:1;
  cursor:pointer;
  padding:0 4px;
}
.preview-close:disabled{
  opacity:.35;
  cursor:default;
}

.btn.tiny{
  height:26px;
  padding:0 8px;
  font-size:11.5px;
}

.timeline-filters{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
  gap:10px;
  margin-top:12px;
}

.filters-row{ margin-top:12px; }

/* Unified filters bar (Scene & Luci) */
.filters-unified{
  background:var(--panel-3);
  border:1px solid var(--line-1);
  border-radius:12px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
/* Tighten and prevent overflow */
.filters-unified .filters-line{
  width:100%;
}
/* Ensure fields can shrink without forcing horizontal scroll */
.filters-unified .filters-line .field{
  flex:1 1 0;
  min-width:0;
  max-width:none;
}
/* Flatten group wrappers so each field becomes a direct flex child */
.filters-unified .filters-group{ display:contents; }
.filters-unified .filters-group .field{ min-width:0; }
.filters-unified .filters-spacer{
  flex:0 0 12px;
  height:1px;
}
.filters-unified .filters-service{ width:100%; }
.filters-unified .filters-service .field{ min-width:0; }
.filters-service-cta{
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  justify-content:flex-end;
  align-items:flex-end;
  overflow-x:hidden;
  padding-bottom:0;
  min-width:0;
}
.filters-service-cta .btn{
  width:auto;
  min-width:auto;
  max-width:none;
  white-space:nowrap;
}

/* Visual Styles: preview action row (Save + VAR buttons) lives on the left side of the preview column. */
.wiz-visualstyles .vs-preview-actions{
  justify-content:space-between;
  align-items:center;
  overflow-x:auto;
  margin-bottom:18px;
}
.wiz-visualstyles .vs-preview-actions__variants{
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  align-items:center;
  min-width:0;
  margin-left:auto;
}
.filters-unified input[type="search"]{ width:100%; }
.filters-unified select{ width:100%; }
.group-scene{ margin-right:0; }
.group-lights{ margin-right:0; }

@media (max-width:900px){
  .filters-service-cta{
    width:100%;
    justify-content:flex-end;
    flex-wrap:wrap;
  }

  /* Visual Styles actions must stay on a single row (scroll if needed). */
  .wiz-visualstyles .vs-preview-actions{
    flex-wrap:nowrap;
    justify-content:flex-start;
  }
}

/* Horizontal proposals scroller */
.cards-scroll-x{
  overflow-x:auto;
  overflow-y:hidden;
  padding: var(--inset-pad) 0; /* top/bottom only; laterals via spacers */
  background:var(--panel-4);
  border:1px solid var(--line-1);
  border-radius:12px;
}
.cards-scroll-x::-webkit-scrollbar{ height:6px; }
.cards-scroll-x::-webkit-scrollbar-thumb{ background:var(--scrollbar-thumb); border-radius:4px; }
.cards-scroll-x .cards-wrap{ display:flex; flex-wrap:nowrap; gap:12px; }
.cards-scroll-x .cards-wrap::before,
.cards-scroll-x .cards-wrap::after{ content:""; flex:0 0 var(--inset-pad); }
.cards-scroll-x .cards-wrap .card{ min-width:300px; }

.scene-columns-grid{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}
.tab-body__cards > .scene-columns-grid > .scene-stack{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  overflow:visible;
}
/* Quando una sezione è nascosta, quella visibile si espande al massimo */
#tab-scene[data-scene-view="scene"] .scene-stack[data-column="scene"],
#tab-scene[data-scene-view="lights"] .scene-stack[data-column="lights"]{
  flex:1;
}
/* Quando entrambe sono visibili, dividono lo spazio equamente */
#tab-scene[data-scene-view="both"] .scene-stack[data-column="scene"],
#tab-scene[data-scene-view="both"] .scene-stack[data-column="lights"]{
  flex:1;
}
.tab-body__cards > .scene-columns-grid > .scene-stack > .cards-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:var(--inset-pad);
}

/* Scene scroll: increased height to show ~4 rows of cards */
#sceneScroll.cards-scroll {
  min-height: 600px;
  max-height: none;
}

@media (max-height: 900px) {
  #sceneScroll.cards-scroll {
    min-height: 500px;
  }
}

@media (max-height: 768px) {
  #sceneScroll.cards-scroll {
    min-height: 400px;
  }
}
.tab-body__preview{
  flex:1;
}
/* SCENE & LUCI: mantiene grid 2 colonne per larghezza corretta anche senza preview */
/* SCENE TAB: layout 2 colonne */
#tab-scene .tab-body{
  display:grid;
  grid-template-columns:minmax(0, 1.5fr) minmax(320px, 1fr);
  gap:20px;
  align-items:start;
  flex:1;
  min-height:0;
}
#tab-scene .scene-columns-grid{
  display:contents;
}
#tab-scene .tab-body__cards{
  flex:1;
  min-height:0;
  overflow:hidden;
}
#tab-scene .tab-body__preview{
  display:flex;
  flex-direction:column;
  min-height:0;
  height:100%;
  position:sticky;
  top:0;
  overflow:visible;
  padding:0;
  background:transparent;
  border:none;
}
#tab-scene .section-block{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  padding:0;
  background:transparent;
  border:none;
  box-shadow:none;
  margin:0;
}
#tab-scene .arch-preview-card{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  gap:10px;
  padding:var(--chip-shell-pad);
  background:var(--panel-3);
  border:1px solid var(--line-1);
  border-radius:var(--chip-shell-radius);
}
:root[data-theme="light"] #tab-scene .arch-preview-card{
  background:var(--panel-2);
}
#tab-scene .arch-preview-card > .field{
  display:flex;
  flex-direction:column;
  min-height:0;
}
#tab-scene .arch-preview-card > .field:last-child{
  flex:1;
}
#tab-scene .arch-preview-card__textarea{
  flex:1 1 auto;
  width:100%;
  min-height:60px;
  resize:vertical;
  border-radius:10px;
  border:1px solid var(--line-1);
  background:var(--panel-3);
  color:var(--ink-1);
  font-size:12.5px;
  line-height:1.5;
  padding:10px;
  font-family:ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  transition:border-color .15s ease, box-shadow .15s ease;
}
:root[data-theme="light"] #tab-scene .arch-preview-card__textarea{
  background:#fff;
  color:var(--ink-1);
}
:root[data-theme="dark"] #tab-scene .arch-preview-card__textarea{
  background:var(--panel-3);
}
/* Scene: elementi preview */
.scene-suggestions-wrap{
  display:flex;
  flex-direction:column;
  min-height:100px;
}
.scene-preview-split{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  gap:10px;
}
.scene-preview-split .scene-preview-box{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.scene-preview-split .scene-preview-box:first-child{
  flex:3 1 60%;
}
.scene-preview-split .scene-preview-box:last-child{
  flex:1 1 40%;
}
.scene-preview-split .scene-preview-box .field{
  display:flex;
  flex-direction:column;
  min-height:0;
}
.scene-preview-split .scene-preview-box .field:last-child{
  flex:1;
}
.scene-preview-split .scene-preview-box:last-child .field:first-child{
  flex:0 0 auto;
}
.scene-preview-split .scene-preview-box:last-child.arch-preview-card{
  gap:6px;
}
.scene-preview-split #scenePreviewScene,
.scene-preview-split #scenePreviewLights{
  flex:1;
  min-height:60px;
  resize:none;
  overflow-y:auto;
}
#tab-scene .arch-preview-board__header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:12px;
}
#tab-scene .arch-preview-board__label{
  font-size:0.65rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--ink-3);
  margin:0 0 4px 0;
}
#tab-scene .arch-preview-card__textarea:focus{
  outline:none;
  border-color:var(--blue-light);
  box-shadow:0 0 0 1px var(--blue-light);
}
/* Scene cards scroll: max 4 rows */
#sceneScroll.cards-scroll,
#tab-scene .scene-stack .cards-scroll{
  max-height:750px;
  min-height:750px;
}
.scene-stack{
  display:flex;
  flex-direction:column;
  min-height:0;
}
.scene-stack .cards-scroll{
  flex:1;
  overflow-y:auto;
}
@media (max-width:1040px){
  .scene-columns-grid{ grid-template-columns:1fr; }
}
.scene-toolbar{
  display:flex;
  flex-wrap:nowrap;
  gap:10px 16px;
  justify-content:space-between;
  align-items:center;
  padding-bottom:8px;
  margin-bottom:4px;
    margin-top: 25px;
    margin-bottom: 4px;
  overflow-x:hidden;
  min-width:0;
}
.scene-toolbar__cluster{ flex:0 1 auto; min-width:0; }
.scene-toolbar__db{
  flex:1 1 0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(0, 1fr));
  gap:10px;
}
.scene-view-toggle{
  display:inline-flex;
  gap:6px;
  padding:4px;
  border:1px solid var(--line-1);
  border-radius:999px;
  background:var(--panel-3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.scene-view-btn{
  border:none;
  border-radius:999px;
  padding:0 12px;
  height:var(--control-height);
  font-size:12.5px;
  font-weight:600;
  background:transparent;
  color:var(--ink-2);
  cursor:pointer;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
.scene-view-btn:hover{ color:var(--ink-1); }
.scene-view-btn.active{
  background:var(--blue);
  color:#fff;
  box-shadow:0 2px 8px rgba(23,71,125,.25);
}
.scene-view-btn:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
}
.scene-toolbar .db-pair{ margin:0; }
.scene-toolbar .db-pair > div{ min-width:var(--dropdown-width-min); }
.scene-toolbar .db-pair select{ width:100%; }
#tab-scene[data-scene-view="scene"] .scene-columns-grid,
#tab-scene[data-scene-view="lights"] .scene-columns-grid{ grid-template-columns:1fr; }
#tab-scene[data-scene-view="scene"] .scene-stack[data-column="lights"],
#tab-scene[data-scene-view="lights"] .scene-stack[data-column="scene"]{ display:none; }
.scene-divider{
  height:1px;
  background:var(--line-1);
  margin:12px 0 8px;
}
.scene-stack{
  display:flex;
  flex-direction:column;
  gap:var(--chip-shell-gap);
  min-height:0;
}
.scene-stack__head{ padding:0 2px 4px; border-bottom:1px solid rgba(255,255,255,.08); }
.scene-stack__head .chip-panel__eyebrow{
  display:none;
}
.scene-stack__label{
  display:flex;
  align-items:flex-end;
  gap:4px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink-3);
}
.scene-stack__label span:first-child{
  font-size:16px;
  letter-spacing:0;
  color:var(--ink-1);
  font-weight:600;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.scene-stack__label span:last-child{
  color:var(--ink-3);
  font-weight:600;
  letter-spacing:.15em;
  font-size:9px;
  text-transform:uppercase;
}
/* Scroll universale: contenuti overflow in preview */
.tab-body__preview .preview-textarea,
.tab-body__preview .arch-preview-card__textarea,
.tab-body__preview textarea{
  font-size:13.5px;
  line-height:1.5;
  resize:vertical;
  min-height:80px;
}
/* Scene Suggestions: box normale in flow, senza flex/min-height vincoli */
.scene-smart-list{
  background:var(--panel-3);
  border:1px solid var(--line-1);
  border-radius:12px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.scene-smart-list .smart-card{
  background:var(--panel-3);
  border:1px solid var(--line-2);
  border-radius:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  min-width:0;
  width:100%;
  box-sizing:border-box;
  overflow:hidden;
}
/* Badge rank (Match prioritario, Opzione consigliata, etc.) */
.scene-smart-list .smart-card > .chip.chip-flag{
  align-self:flex-start;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:4px 10px;
  margin-bottom:2px;
  flex-shrink:0;
  white-space:nowrap;
}
/* Titolo principale */
.scene-smart-list .smart-card .title{
  font-size:14px;
  font-weight:700;
  color:var(--ink-1);
  margin:0;
  line-height:1.4;
  margin-bottom:4px;
  word-wrap:break-word;
  overflow-wrap:break-word;
  min-width:0;
}
/* Descrizione */
.scene-smart-list .smart-card .desc{
  color:var(--ink-2);
  font-size:12px;
  line-height:1.5;
  margin:0;
  margin-bottom:8px;
  word-wrap:break-word;
  overflow-wrap:break-word;
  min-width:0;
}
/* Informazioni dettagliate (Scena, Luci, Stagione/Meteo) */
.scene-smart-list .smart-card .micro{
  font-size:11px;
  color:var(--ink-2);
  margin:0;
  line-height:1.5;
  padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
  word-wrap:break-word;
  overflow-wrap:break-word;
  min-width:0;
}
.scene-smart-list .smart-card .micro:last-of-type{
  border-bottom:none;
  margin-bottom:4px;
}
/* Footer con chips e azioni */
.scene-smart-list .smart-card__footer{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:space-between;
  min-width:0;
}
.scene-smart-list .smart-card__footer .meta{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.scene-smart-list .smart-card__footer .meta .chip{
  flex-shrink:0;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}
.scene-smart-list .smart-card__footer--compact{
  justify-content:flex-end;
}
.scene-smart-list .smart-card__footer .meta{
  flex:1 1 auto;
}
.scene-smart-list .smart-card__cta{ flex:0 0 auto; margin-left:auto; }

.scene-compat-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
  align-content:flex-start;
  max-height:calc((var(--card-tag-row-height) * var(--card-tag-max-rows)) + var(--card-tag-row-gap));
  overflow:hidden;
}
.scene-compat-tags > *{ flex:0 0 auto; }
.scene-compat-tags::-webkit-scrollbar{ display:none; }
.scene-compat-tags .tag{ background:var(--panel-4); border:1px solid var(--line-2); }
.count-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 10px;
  border-radius:999px;
  border:1px solid var(--line-2);
  font-size:11px;
  font-weight:600;
  color:var(--ink-2);
  background:var(--panel-4);
}
.scene-notes-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
  gap:16px;
  align-items:end;
  margin-top:20px;
}
.scene-notes-row input{ width:100%; }
@media (max-width:1100px){
  .scene-notes-row{ grid-template-columns:1fr; }
  .scene-compat-inline{ justify-content:flex-start; }
}
.scene-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.scene-compat-inline{
  display:flex;
  align-items:center;
  gap:6px;
  justify-content:flex-end;
  font-size:12.5px;
  color:var(--ink-3);
}
.scene-compat-inline__label{ text-transform:uppercase; letter-spacing:.06em; }
.scene-compat-inline__sep{ color:var(--ink-2); }
.scene-suggestions .cards-scroll-x{ margin-top:12px; }
.scene-suggestions .chips-wrap{ margin-top:8px; }
.scene-bottom-grid{
  display:grid;
  grid-template-columns:minmax(0,var(--dual-cards-fr)) minmax(var(--dual-preview-min), var(--dual-preview-fr));
  gap:16px;
  align-items:stretch;
}
@media (max-width:1200px){
  .scene-bottom-grid{ grid-template-columns:1fr; }
}
.scene-preview-stack{
  background:var(--panel-3);
  border:1px solid var(--line-1);
  border-radius:12px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.scene-actions--preview{
  display:flex;
  flex-direction:row;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
}
.scene-actions--preview .btn{
  width:min(100%,180px);
  max-width:180px;
}
.scene-preview-stack .scene-notes-row{
  margin-top:0;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
}
.scene-preview-stack .scene-compat-tags{
  margin-top:0;
}
.scene-suggestions__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:8px;
}

/* Scene Presets Tab */
.preset-filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-end;
}
.preset-filter-row > div{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1 1 200px;
  min-width:180px;
  max-width:260px;
}
@media (max-width: 640px){
  .preset-filter-row{
    gap:10px;
  }
  .preset-filter-row > div{
    flex:1 1 100%;
    max-width:none;
  }
}
.preset-content-grid{
  display:grid;
  grid-template-columns:minmax(0,var(--dual-cards-fr)) minmax(var(--dual-preview-min), var(--dual-preview-fr));
  gap:24px;
  align-items:stretch;
  flex:1;
  min-height:0;
}

/* Apply tab-body height rules to presets tab - MUST extend to bottom */
#tab-presets .tab-body,
#tab-presets .preset-content-grid{
  flex:1 !important;
  min-height:0 !important;
  display:grid !important;
  align-items:stretch !important;
}

#tab-presets .tab-body__cards,
#tab-presets .preset-column--list{
  flex:1 !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
}

#tab-presets .tab-body__cards > .chip-panel,
#tab-presets .preset-column--list.chip-panel{
  flex:1 !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
}

#tab-presets .tab-body__cards > .chip-panel > .chip-panel__head{
  flex-shrink:0 !important;
}

#tab-presets .tab-body__cards > .chip-panel > .chip-panel__body{
  flex:1 !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}

#tab-presets .tab-body__cards > .chip-panel > .chip-panel__body > .cards-scroll{
  flex:1 !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

/* Override general .cards-scroll for presets */
#tab-presets .cards-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
}

/* Ensure presetList cards-wrap doesn't have height restrictions */
#tab-presets #presetList.cards-wrap{
  max-height:none !important;
  height:auto !important;
}

/* Reduce preset card height, compact padding tag-to-bottom */
#tab-presets #presetList .card{
  min-height:100px !important;
  padding:8px 10px !important;
}
#tab-presets #presetList .card .meta{
  margin-bottom:0;
}

#tab-presets .tab-body__preview{
  flex:1;
  min-height:0;
  padding:12px 14px;
}
@media (max-width:1200px){
  .preset-content-grid{ grid-template-columns:1fr; }
}
.preset-column--list{
  display:flex;
  flex-direction:column;
  gap:16px;
  flex:1;
  min-height:0;
}

/* Scene Presets: remove max-height restrictions, use same height rules as other tabs */
/* Scene Presets: compatto come grooming, scroll interno */
.preset-preview-panel{
  background:var(--panel-2);
  border:1px solid var(--line-1);
  border-radius:var(--chip-shell-radius);
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}
.preset-preview-panel > .preset-preview-layout{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);
}
.preset-preview-panel > .preset-preview-layout::-webkit-scrollbar{ width:8px; }
.preset-preview-panel > .preset-preview-layout::-webkit-scrollbar-thumb{
  background:var(--scrollbar-thumb);
  border-radius:4px;
}
.preset-preview-panel > .preset-preview-layout::-webkit-scrollbar-track{
  background:var(--scrollbar-track);
}
:root[data-theme="light"] .preset-preview-panel > .preset-preview-layout::-webkit-scrollbar-track{
  background:rgba(180,185,195,.9);
}
.preset-preview-panel__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
  flex-shrink:0;
}
.preset-preview-panel__actions{
  display:flex;
  gap:6px;
  flex:0 0 auto;
}

.preset-save-status{
  align-self:center;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  padding:6px 10px;
  border-radius:999px;
  background:var(--green-soft);
  color:var(--ink-1);
  border:1px solid rgba(90,214,183,.35);
}
.preset-preview__hint{
  margin:2px 0 0;
  font-size:11px;
  color:var(--ink-3);
  line-height:1.35;
}
.preset-preview-layout{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.chip-warn{
  background:rgba(255, 184, 0, 0.16);
  color:var(--ink-1);
  border:1px solid rgba(255, 184, 0, 0.35);
}

.preset-preview-empty{
  margin:0;
  padding:24px 14px;
  text-align:center;
  border:1px dashed var(--line-2);
  border-radius:10px;
  color:var(--ink-3);
  font-size:12px;
}
/* Preset: layout identico a Grooming — compatto, stessi stili */
.preset-preview-editor{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:0;
  border:none;
  background:transparent;
}
.preset-preview-group{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:0;
  border:none;
  background:transparent;
}
.preset-preview-group + .preset-preview-group{
  padding-top:8px;
  margin-top:0;
  border-top:1px solid var(--line-1);
}
.preset-preview-group__head h4{
  margin:0;
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--ink-1);
}
.preset-preview-group__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.preset-preview-group__eyebrow{
  margin:0;
  font-size:11.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.preset-preview-group__head h4{
  margin:2px 0 0;
  font-size:16px;
  letter-spacing:.02em;
}
.preset-preview-group__hint{
  margin:0;
  font-size:12.5px;
  color:var(--ink-3);
  max-width:none;
  flex:1 1 220px;
}
.preset-preview-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:8px;
}
/* Blocco preset = grooming-preview-box (stesso stile) */
.preset-preview-block{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid var(--line-1);
  background:var(--panel-4);
  width:100%;
  min-width:0;
}
.preset-preview-block__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  cursor:pointer;
  margin-bottom:6px;
  background:transparent;
}
.preset-preview-block.is-collapsed .preset-preview-block__header{
  margin-bottom:0;
}
.preset-preview-block__heading{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1;
  min-width:0;
}
.preset-preview-block header h5,
.preset-preview-block__heading h5{
  margin:0;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--ink-1);
}
.preset-preview-block__eyebrow{
  margin:0;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink-3);
}
/* Toggle identico a grooming-preview-box__toggle */
.preset-preview-block__toggle{
  border:none;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--panel-4);
  color:var(--ink-1);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:background .2s;
}
.preset-preview-block__toggle:hover{ background:var(--panel-1); }
.preset-preview-block__toggle:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
}
.preset-preview-block__toggle::before{ content:'-'; font-size:14px; line-height:1; }
.preset-preview-block__toggle[aria-expanded="false"]::before{ content:'+'; }
.preset-preview-block__fields{
  display:flex;
  flex-direction:column;
  gap:0;
}
.preset-preview-block.is-collapsed .preset-preview-block__fields{ display:none !important; }
.preset-preview-block__fields--stacked{
  grid-template-columns:1fr;
  gap:8px;
}
.preset-preview-block--character .preset-preview-block__fields{
  grid-template-columns:1fr;
}
.preset-preview-block__subfield{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.preset-preview-block__subfield-label{
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--ink-3);
  margin:0;
}
.preset-preview-block__subfield .preview-textarea{
  min-height:90px;
  resize:vertical;
}
.preset-character-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:8px;
}
.preset-preview-group--characters[data-subject-mode="single"] [data-character="person1-body"],
.preset-preview-group--characters[data-subject-mode="single"] [data-character="person1-grooming"],
.preset-preview-group--characters[data-subject-mode="single"] [data-character="person1-outfit"],
.preset-preview-group--characters[data-subject-mode="single"] [data-character="person2-body"],
.preset-preview-group--characters[data-subject-mode="single"] [data-character="person2-grooming"],
.preset-preview-group--characters[data-subject-mode="single"] [data-character="person2-outfit"]{
  display:none;
}
.preset-preview-group--characters[data-subject-mode="pair"] [data-character="single-body"],
.preset-preview-group--characters[data-subject-mode="pair"] [data-character="single-grooming"],
.preset-preview-group--characters[data-subject-mode="pair"] [data-character="single-outfit"]{
  display:none;
}
.preset-preview-final-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:10px;
}
.preset-preview-final-grid .preview-textarea{
  min-height:90px;
  resize:vertical;
}
/* Grooming + Preset: textarea anteprima min 90px, espandibili, font coerente con altre preview */
#tab-grooming .grooming-preview-box__textarea,
#tab-grooming .preview-textarea,
#tab-presets .preview-textarea{
  min-height:90px;
  resize:vertical;
  font-size:13.5px;
  line-height:1.5;
}
.preview-textarea{
  width:100%;
  min-height:100px;
  border:1px solid var(--line-1);
  border-radius:10px;
  background:var(--panel-3);
  color:var(--ink-1);
  font-size:13.5px;
  line-height:1.5;
  padding:10px;
  resize:vertical;
  transition:border-color .2s ease, box-shadow .2s ease;
  font-family:inherit;
}
.preview-textarea:focus{
  outline:none;
  border-color:var(--blue-light);
  box-shadow:0 0 0 1px var(--blue-light);
}
.preview-textarea:disabled{
  opacity:.7;
  cursor:not-allowed;
  resize:none;
}

.vs-variant-title{
  width:100%;
  border:1px solid var(--line-1);
  border-radius:12px;
  background:var(--panel-3);
  color:var(--ink-1);
  font-size:12px;
  line-height:1.2;
  padding:8px 10px;
  height:34px;
}
.vs-variant-title:focus{
  outline:none;
  border-color:var(--blue-light);
  box-shadow:0 0 0 1px var(--blue-light);
}
/* Visual Styles Tab */
.wiz-visualstyles{
  display:flex;
  flex-direction:column;
  gap:20px;
  flex:1;
  min-height:0;
}
.vs-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  gap:clamp(14px, 1.8vw, 20px);
  padding:clamp(8px, 1vw, 10px) clamp(10px, 1.1vw, 12px);
  border:1px solid var(--line-1);
  border-radius:10px;
  background:var(--panel-4);
  box-shadow:var(--shadow-sm);
  min-width:0;
  --vs-pill-h:clamp(21px, 2.2vw, 25px);
  --vs-subject-single-w:clamp(66px, 6.8vw, 82px);
  /* Requirement: SINGLE and MULTI must be identical width. */
  --vs-subject-pair-w:clamp(66px, 6.8vw, 82px);
  /* Requirement: CREATE button ~40% narrower than before. */
  --vs-mode-create-w:clamp(40px, 4vw, 52px);
  --vs-mode-transform-w:clamp(68px, 6.8vw, 86px);
  --vs-family-2d-w:clamp(58px, 6vw, 74px);
  --vs-family-3d-w:clamp(58px, 6vw, 74px);
  /* Requirement: PHOTO must match 2D/3D width. */
  --vs-family-photo-w:clamp(58px, 6vw, 74px);
  --vs-search-w:clamp(92px, 12vw, 140px);
}
/* Nascondi bottoni Core/Special */
#vsCollectionToggle{
  display:none !important;
}

.vs-toolbar__spacer{
  flex:0 0 0;
  width:0;
  min-width:0;
}

.vs-toolbar__actions{
  display:flex;
  align-items:center;
  gap:clamp(6px, .75vw, 10px);
  flex:0 0 auto;
  margin-left:auto;
}

.vs-applied{ margin:0; font-size:12.5px; color:var(--ink-3); min-height:18px; }

.vs-controls{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px; padding:16px 18px; border:1px solid var(--line-1); border-radius:var(--radius); background:var(--panel-4); }
.vs-controls__inputs{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; flex:1 1 360px; }
.vs-controls__inputs .field{ display:flex; flex-direction:column; gap:6px; min-width:180px; max-width:240px; }
.vs-controls__info{ margin:0; font-size:12.5px; color:var(--ink-3); min-height:18px; flex:1 1 220px; }
.vs-controls__actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
.vs-controls__actions .btn{ min-width:140px; }
.vs-controls .label{ font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-3); }
.vs-controls select{
  width:100%;
  height:var(--control-height);
  padding:0 var(--control-pad-x);
  border-radius:12px;
  border:1px solid var(--line-1);
  background:var(--panel-3);
  color:var(--ink-1);
  font-size:var(--control-font-size);
}
.vs-controls select:disabled{ opacity:.45; cursor:not-allowed; }
.vs-controls .vs-subject-toggle{ margin-right:4px; }
@media (max-width: 1280px){
  .vs-controls{ flex-direction:column; align-items:stretch; }
  .vs-controls__inputs{ width:100%; }
  .vs-controls__actions{ justify-content:stretch; }
  .vs-controls__actions .btn{ flex:1 1 200px; min-width:0; }
}
.vs-header{ display:flex; flex-direction:column; gap:12px; }
.vs-header__info h2{ margin:0; font-size:20px; letter-spacing:.03em; }
.vs-subtitle{ margin:6px 0 0; font-size:13px; color:var(--ink-3); line-height:1.4; max-width:520px; }
.vs-family-description{ margin:4px 0 0; font-size:12.5px; color:var(--ink-3); line-height:1.35; max-width:520px; }
.vs-family-description.is-empty{ display:none; }
.vs-header__controls{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.vs-panel-section{
  display:flex;
  flex-direction:column;
  gap:18px;
  flex:1;
  min-height:0;
}
.vs-mode-toggle{ display:inline-flex; gap:6px; padding:4px; border-radius:999px; border:1px solid var(--line-1); background:var(--panel-4); }
.vs-mode__btn{
  border:1px solid var(--pill-border);
  border-radius:999px;
  padding:0 var(--chip-pill-pad);
  min-height:var(--chip-pill-height);
  height:var(--chip-pill-height);
  max-height:var(--chip-pill-height);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-size:13px;
  font-weight:600;
  color:var(--pill-text, var(--ink-2));
  background:var(--pill-bg);
  cursor:pointer;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.vs-mode__btn:hover{ color:var(--ink-1); background:var(--pill-hover-bg); }
.vs-mode__btn.active{
  background:var(--pill-active-bg, var(--blue));
  color:var(--pill-active-text, #fff);
  border-color:var(--blue);
  box-shadow:var(--pill-shadow);
}
.vs-mode__btn:disabled{ opacity:.45; cursor:not-allowed; }
.vs-toolbar .vs-mode__btn,
.vs-toolbar .vs-toggle__btn{
  height:auto;
  max-height:none;
  min-height:var(--vs-pill-h);
  padding:0 10px;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1;
  text-align:center;
  font-size:12px;
}

.vs-toolbar .vs-mode-toggle,
.vs-toolbar .vs-toggle{ padding:3px; }
.vs-toolbar .vs-mode-toggle{ gap:4px; }
.vs-toolbar .vs-toggle{ gap:3px; }
.vs-toolbar .vs-subject-toggle{ gap:10px; padding:3px 10px; }
.vs-toolbar .vs-subject-toggle__buttons{ gap:4px; }
.vs-toolbar .vs-subject-toggle .vs-mode__btn{ padding:0 10px; }
.vs-toolbar .vs-subject-toggle__buttons .vs-mode__btn[data-subject="single"]{ width:var(--vs-subject-single-w); min-width:var(--vs-subject-single-w); }
.vs-toolbar .vs-subject-toggle__buttons .vs-mode__btn[data-subject="pair"]{ width:var(--vs-subject-pair-w); min-width:var(--vs-subject-pair-w); }
.vs-toolbar .vs-mode-toggle .vs-mode__btn[data-mode="create"]{ width:var(--vs-mode-create-w); min-width:var(--vs-mode-create-w); }
.vs-toolbar .vs-mode-toggle .vs-mode__btn[data-mode="transform"]{ width:var(--vs-mode-transform-w); min-width:var(--vs-mode-transform-w); }
.vs-toolbar .vs-toggle .vs-toggle__btn[data-family="2d"]{ width:var(--vs-family-2d-w); min-width:var(--vs-family-2d-w); }
.vs-toolbar .vs-toggle .vs-toggle__btn[data-family="3d"]{ width:var(--vs-family-3d-w); min-width:var(--vs-family-3d-w); }
.vs-toolbar .vs-toggle .vs-toggle__btn[data-family="photographic"]{ width:var(--vs-family-photo-w); min-width:var(--vs-family-photo-w); }
.vs-mode__btn:hover{ color:var(--ink-1); background:var(--pill-hover-bg); }
.vs-mode__btn.active{ background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:var(--pill-shadow); }
.vs-mode__btn:disabled{ opacity:.45; cursor:not-allowed; }
.vs-toggle{ display:inline-flex; gap:4px; padding:4px; border-radius:999px; border:1px solid var(--line-1); background:var(--panel-4); }
.vs-toggle__btn{
  border:1px solid var(--pill-border);
  border-radius:999px;
  padding:0 var(--chip-pill-pad);
  min-height:var(--chip-pill-height);
  height:var(--chip-pill-height);
  max-height:var(--chip-pill-height);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-size:13px;
  font-weight:600;
  color:var(--pill-text, var(--ink-2));
  background:var(--pill-bg);
  cursor:pointer;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.vs-toggle__btn:hover{ color:var(--ink-1); background:var(--pill-hover-bg); }
.vs-toggle__btn.active{
  background:var(--pill-active-bg, var(--blue));
  color:var(--pill-active-text, #fff);
  border-color:var(--blue);
  box-shadow:var(--pill-shadow);
}
.vs-toggle__btn:disabled{ opacity:.45; cursor:not-allowed; }
.vs-search{
  flex:1 1 var(--vs-search-w);
  width:var(--vs-search-w);
  max-width:var(--vs-search-w);
  min-width:96px;
  min-height:var(--vs-pill-h);
  display:flex;
  align-items:center;
}
.vs-search input{
  background:var(--panel-4);
  border:1px solid var(--line-1);
  border-radius:999px;
  padding:0 10px;
  height:var(--vs-pill-h);
  min-height:var(--vs-pill-h);
  color:var(--ink-1);
  min-width:0;
}
.vs-search input::placeholder{ color:var(--ink-3); }
.vs-status{ font-size:12.5px; min-height:18px; color:var(--ink-3); }
.vs-status.is-loading{ color:var(--ink-2); }
.vs-status.is-error{ color:#ff9aa8; }
.vs-status.is-warning{ color:#ffd37a; }
.vs-subject-toggle{ display:flex; flex-wrap:nowrap; align-items:center; gap:12px; padding:4px 12px; border:1px solid var(--line-1); border-radius:999px; background:var(--panel-4); width:fit-content; }
.vs-subject-toggle__label{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.vs-subject-toggle__buttons{ display:inline-flex; gap:6px; }
.vs-subject-toggle .vs-mode__btn{ padding:6px 16px; }
.vs-body{
  display:grid;
  grid-template-columns:minmax(0,var(--dual-cards-fr)) minmax(var(--dual-preview-min), var(--dual-preview-fr));
  gap:24px;
  align-items:stretch;
  flex:1;
  min-height:0;
  overflow:hidden;
}

/* Visual Styles: grid vincolato per scroll interno colonna preview */
.wiz-visualstyles .tab-body,
.wiz-visualstyles .vs-body{
  flex:1 !important;
  min-height:0 !important;
  display:grid !important;
}
.wiz-visualstyles .tab-body__cards{
  flex:1 !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:visible !important;
}
.wiz-visualstyles .tab-body__cards > .chip-panel{
  display:flex !important;
  flex-direction:column !important;
  flex:1 !important;
  min-height:0 !important;
  margin-top:0;
}
.wiz-visualstyles .chip-panel__body{
  flex:1 !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:visible !important;
}
.wiz-visualstyles .chip-panel__body > .chip-panel__scroll{
  flex:1 !important;
  min-height:0 !important;
  height:auto !important;
  display:flex !important;
  flex-direction:column !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}
/* Visual Styles tab-body__preview già gestito dalle regole globali */
/* Empty state centratura */
#vsDetailEmpty{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:200px;
}
/* Hide empty chips in header */
.wiz-visualstyles .vs-detail__chips .chip:empty{
  display:none !important;
}
/* When empty state is shown, ensure content is completely hidden */
.wiz-visualstyles #vsDetailContent[hidden]{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  overflow:hidden !important;
  margin:0 !important;
  padding:0 !important;
}
.wiz-visualstyles .vs-detail-content{
  display:flex !important;
  flex-direction:column !important;
  gap:18px !important;
  flex:1 1 auto !important;
  min-height:auto !important;
}
.wiz-visualstyles .vs-detail-accordion{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  flex:1 1 auto !important;
  min-height:auto !important;
}
.wiz-visualstyles .vs-detail-accordion > details{
  flex:0 0 auto !important;
  min-height:auto !important;
  max-height:none !important;
}
.wiz-visualstyles .vs-constraints{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:12px !important;
  flex:0 0 auto !important;
  min-height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}
.wiz-visualstyles .vs-variant-accordion{
  flex:0 0 auto !important;
  min-height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}
.wiz-visualstyles .vs-variant-accordion > .vs-constraint{
  flex:0 0 auto !important;
  min-height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}

.wiz-visualstyles .chip-panel__empty{
  flex:1;
  min-height:calc((var(--card-min-h) * 3) + (var(--grid-gap) * 2) + (var(--inset-pad) * 2));
  display:flex;
  align-items:center;
  justify-content:center;
}
.vs-transform-summary{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--ink-3); margin:8px 0 4px; }
.vs-transform-summary p{ margin:0; }
.vs-card--transform{ min-height:0; }
.vs-cards{
  grid-auto-rows:auto;
  align-content:flex-start;
}
.vs-card{ position:relative; display:flex; flex-direction:column; gap:0; padding:var(--chip-card-pad); border-radius:var(--radius); border:1px solid var(--line-1); background:var(--chip-card-bg); cursor:pointer; text-align:left; transition:border-color .2s ease, box-shadow .2s ease; }
.vs-card:hover{ border-color:var(--line-2); }
.vs-card__head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:10px;
  row-gap:4px;
  align-items:flex-start;
}
.vs-card__head h3,
.vs-card__head .vs-card__subtitle{ grid-column:1; }
.vs-card__family{
  grid-column:2;
  justify-self:end;
}
.vs-card h3{ margin:0; font-size:15px; letter-spacing:.02em; color:var(--chip-card-title); }
.vs-card__subtitle{ margin:var(--chip-card-gap-title-desc) 0 0; font-size:12px; color:var(--chip-card-subtext); line-height:1.4; }
.vs-card p{ margin:0; font-size:12.5px; color:var(--chip-card-subtext); line-height:1.45; }
.vs-card__scope{
  color:var(--chip-card-subtext);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  line-clamp:4;
  overflow:hidden;
  min-height:calc(4 * 1.45em);
}
.vs-card__badge{ font-size:11px; letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; border-radius:999px; background:var(--panel-4); color:var(--chip-card-subtext); }
.vs-card__tags{
  display:flex;
  flex-wrap:nowrap;
  gap:var(--card-tag-row-gap);
  align-items:center;
  max-height:var(--chip-pill-height);
  overflow:hidden;
  margin-top:var(--chip-card-gap-desc-tags);
  box-sizing:border-box;
}
.vs-card__tags .chip{
  justify-self:flex-start;
  width:auto;
  max-width:none;
  background:var(--panel-4);
  color:var(--ink-1);
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  justify-content:center;
}
.vs-card__tags .chip.chip--full{
  flex:1 1 auto;
}
.vs-card__tags .chip:nth-of-type(n+4){ display:none; }
.vs-card__tags .chip-type{
  letter-spacing:.08em;
  text-transform:uppercase;
}
.vs-card__tags .chip-library{
  justify-content:flex-start;
  letter-spacing:.03em;
}
.vs-card__tags .chip-feature{
  font-weight:500;
  letter-spacing:.02em;
}
.vs-card.is-selected{
  border-color:var(--chip-card-selected-border);
  box-shadow:var(--chip-card-selected-glow);
  background:var(--chip-card-selected-bg);
}
.vs-card.is-selected h3{
  color:var(--chip-card-selected-title, var(--chip-card-title));
}
.vs-card.is-selected .vs-card__subtitle,
.vs-card.is-selected p,
.vs-card.is-selected .vs-card__scope{
  color:var(--chip-card-selected-subtext, var(--chip-card-subtext));
}
.vs-card.is-applied::after{
  content:attr(data-applied-label);
  position:absolute;
  bottom:var(--chip-card-pad);
  right:var(--chip-card-pad);
  font-size:11px;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:3px 9px;
  border-radius:999px;
  background:rgba(63,111,155,.35);
  color:#d3ecff;
}
.vs-card.is-applied .vs-card__tags{ padding-right:96px; }
.vs-card.is-applied.is-selected::after{ background:var(--blue); color:#fff; }
.vs-detail{
  position:relative;
  top:auto;
  display:flex;
  flex-direction:column;
  gap:18px;
  flex:1;
  min-height:0;
  padding:var(--chip-shell-pad);
  padding-bottom:calc(var(--chip-shell-pad) + 32px);
  background:var(--chip-shell-bg);
  border:1px solid var(--chip-shell-border);
  border-radius:var(--chip-shell-radius);
}

/* Keep flex:1 1 auto and min-height:auto so layout works outside .wiz-visualstyles (e.g. Transform panel) */
.vs-detail-accordion{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-bottom:0;
  margin-bottom:0;
  flex:1 1 auto;
  min-height:auto;
  overflow:visible;
}
.vs-detail-accordion details{
  border:1px solid rgba(106,157,255,.14);
  border-radius:14px;
  background:rgba(4,13,28,.55);
  overflow:visible;
  flex:0 0 auto;
  min-height:auto;
  max-height:none;
}
/* Light Mode: forza accordion details a sfondo chiaro */
:root[data-theme="light"] .wiz-visualstyles .vs-detail-accordion details,
:root[data-theme="light"] #tab-visualstyles .vs-detail-accordion details{
  background:var(--panel-2) !important;
  border-color:var(--line-1) !important;
}
.vs-detail-accordion details > summary{
  list-style:none;
  cursor:pointer;
  padding:10px 12px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:var(--panel-3);
  border-bottom:1px solid rgba(106,157,255,.12);
}
.vs-detail-accordion details > summary::-webkit-details-marker{ display:none; }
.vs-detail-accordion details > summary::after{
  content:"▾";
  font-size:12px;
  color:var(--ink-3);
  transform:rotate(-90deg);
  transition:transform .18s ease;
}
.vs-detail-accordion details[open] > summary::after{ transform:rotate(0deg); }
.vs-detail-accordion details > .vs-detail__section{ padding:12px; }

/* Visual Styles: Variant accordions */
.vs-variant-accordion{
  border:1px solid rgba(106,157,255,.14);
  border-radius:14px;
  background:rgba(4,13,28,.55);
  overflow:visible;
  margin-bottom:10px;
  flex:0 0 auto;
  min-height:auto;
  max-height:none;
}
.vs-variant-accordion > summary{
  list-style:none;
  cursor:pointer;
  padding:10px 12px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:var(--panel-3);
  border-bottom:1px solid rgba(106,157,255,.12);
}
.vs-variant-accordion > summary::-webkit-details-marker{ display:none; }
.vs-variant-accordion > summary::after{
  content:"▾";
  font-size:12px;
  color:var(--ink-3);
  transform:rotate(-90deg);
  transition:transform .18s ease;
}
.vs-variant-accordion[open] > summary::after{ transform:rotate(0deg); }
.vs-variant-accordion > .vs-constraint{ padding:12px; }
.vs-variant-accordion__summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
}
.vs-variant-accordion__summary .vs-constraint__label{
  margin:0;
  flex:1;
}
.vs-variant-accordion__summary .vs-variant-remove{
  flex-shrink:0;
  background:transparent;
  border:none;
  color:var(--ink-3);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  padding:0;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
}
.vs-variant-accordion__summary .vs-variant-remove:hover{
  background:rgba(255,255,255,.1);
  color:var(--ink-2);
}

.vs-constraints{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  flex:0 0 auto;
  min-height:auto;
  max-height:none;
  overflow:visible;
}
.vs-constraint{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.vs-constraint__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.vs-constraint__label{
  margin:0;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
  flex:1;
}
.vs-variant-remove{
  background:none;
  border:none;
  color:var(--ink-3);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  padding:0;
  width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0.6;
  transition:opacity 0.2s;
  flex-shrink:0;
}
.vs-variant-remove:hover{
  opacity:1;
  color:var(--ink-1);
}
.vs-variant-remove:active{
  opacity:0.8;
}

/* Spazio extra solo tra il prompt base e la prima variante */
.vs-detail__section > .vs-constraints > .vs-constraint:first-child > .vs-constraint__header {
  margin-top: 25px;
}
.vs-detail__header{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:8px; }
.vs-detail__header-title-row{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px;
}
.vs-detail__header h3{ margin:0; font-size:18px; letter-spacing:.02em; }
.vs-detail__header-subtitle,
.vs-detail__header p{ margin:0; color:var(--ink-3); font-size:13px; line-height:1.4; }
.vs-detail__chips{ display:flex; flex-wrap:wrap; gap:6px; }

/* Remix Randomizer Buttons */
/* Still Life: Singolo oggetto / Multi oggetto */
.vs-stilllife-object-mode{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  margin-bottom:8px;
  border:1px solid var(--line-1);
  border-radius:10px;
  background:var(--panel-3);
}
.vs-stilllife-object-mode__label{
  font-size:12px;
  font-weight:600;
  color:var(--ink-2);
}
.vs-stilllife-object-mode__buttons{
  display:flex;
  gap:8px;
}
.vs-stilllife-obj-btn{
  border:1px solid var(--pill-border);
  background:var(--pill-bg);
  color:var(--pill-text, var(--ink-2));
  box-shadow:none;
}
.vs-stilllife-obj-btn:hover{
  color:var(--ink-1);
  background:var(--pill-hover-bg);
}
:root[data-theme="light"] .tab-body__preview .vs-stilllife-object-mode .vs-stilllife-obj-btn:not(.active){
  background:var(--pill-bg) !important;
  border-color:var(--pill-border) !important;
  color:var(--pill-text, var(--blue)) !important;
}
:root[data-theme="light"] .tab-body__preview .vs-stilllife-object-mode .vs-stilllife-obj-btn.active{
  background:var(--blue) !important;
  color:#fff !important;
  border-color:var(--blue) !important;
}
.vs-stilllife-obj-btn.active{
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
}

.vs-remix-randomizers{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:7px 8px 8px;
  border:1px solid var(--line-1);
  border-radius:8px;
  background:var(--panel-3);
  margin-bottom:8px;
  overflow:hidden;
}
.vs-remix-randomizers__label{
  font-size:10px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-3);
  text-align:center;
  width:100%;
}
.vs-remix-randomizers__buttons{
  display:flex;
  flex-wrap:nowrap;
  gap:3px;
  width:100%;
  justify-content:center;
  overflow:hidden;
}
.vs-remix-randomizers__buttons .btn{
  flex:1 1 0;
  min-width:0;
  height:24px;
  font-size:10.5px;
  padding:0 4px;
  border-radius:5px;
  line-height:24px;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Remix Placeholders – layout compatto (titolo "Placeholder nei prompt" rimosso) */
.vs-remix-placeholders-wrap{
  margin-bottom:10px;
}
.vs-remix-placeholders__empty{
  font-size:12px;
  color:var(--ink-3);
  margin:0;
  padding:8px 0;
  line-height:1.5;
}
.vs-remix-placeholders__empty code{ font-size:11px; background:var(--panel-2); padding:2px 6px; border-radius:4px; }
.vs-remix-placeholders{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 12px;
  border:1px solid var(--line-1);
  border-radius:10px;
  background:var(--panel-3);
}
.vs-remix-placeholder-item{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.vs-remix-placeholder-card{
  background:var(--panel-2);
  border:1px solid var(--line-1);
  border-radius:8px;
  padding:8px 10px;
  gap:6px;
}
.vs-remix-placeholder__header{
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
  color:var(--ink-1);
  margin-bottom:2px;
}
.vs-remix-placeholder__field-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
  flex-wrap:wrap;
}
/* Un solo dropdown: label + select + Applica/Pulisci sulla stessa riga */
.vs-remix-placeholder__field-row--single{
  align-items:center;
  gap:8px 12px;
}
.vs-remix-placeholder__field-row--single .vs-remix-placeholder__select{
  flex:1;
  min-width:140px;
  max-width:220px;
}
.vs-remix-placeholder__field-row--single .vs-remix-placeholder__actions{
  flex-shrink:0;
}
.vs-remix-placeholder__field-label{
  font-size:11px;
  font-weight:500;
  color:var(--ink-2);
  flex-shrink:0;
}
/* Griglia 2 colonne x 3 righe per i 6 placeholder Tipo materiale */
.vs-remix-placeholder__subcats--grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 14px;
  width:100%;
  max-width:100%;
}
.vs-remix-placeholder__subcats--grid .vs-remix-placeholder__subcat{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.vs-remix-placeholder__subcats--grid .vs-remix-placeholder__field-label{
  font-size:11px;
}
/* I 6 dropdown in griglia ereditano altezza/padding dal select base (uguali agli altri placeholder) */
.vs-remix-placeholder__subcats--grid .vs-remix-placeholder__select{
  width:100%;
  max-width:100%;
}
.vs-remix-placeholder__select{
  flex:1;
  min-width:120px;
  max-width:240px;
  height:34px;
  min-height:34px;
  font-size:11px;
  padding:6px 28px 6px 8px;
  box-sizing:border-box;
  background:var(--panel-3);
  color:var(--ink-1);
  border:1px solid var(--line-1);
  border-radius:6px;
  appearance:menulist;
  -webkit-appearance:menulist;
  -moz-appearance:menulist;
  cursor:pointer;
}
.vs-remix-placeholder__input-row{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:nowrap;
}
/* Solo textarea (caso 1 dropdown: textarea sotto dropdown+bottoni) */
.vs-remix-placeholder__input-row--textarea-only{
  margin-top:4px;
}
/* === Block card: compact unified layout === */
.vs-remix-block-card{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:6px 8px 5px;
  width:100%;
  box-sizing:border-box;
}
.vs-remix-block-card__header{
  font-size:9px;
  font-weight:700;
  letter-spacing:.07em;
  color:var(--ink-3);
  text-transform:uppercase;
  line-height:1;
}
/* Variant select + ph-options on same row */
.vs-remix-block-card__selects-row{
  display:flex;
  flex-direction:row;
  gap:4px;
  align-items:flex-start;
  width:100%;
}
.vs-remix-block-card__select{
  flex:2 1 100px;
  min-width:0;
  height:26px;
  min-height:26px;
  font-size:10.5px;
  padding:3px 20px 3px 6px;
  box-sizing:border-box;
  background:var(--panel-3);
  color:var(--ink-1);
  border:1px solid var(--line-1);
  border-radius:5px;
  appearance:menulist;
  -webkit-appearance:menulist;
  cursor:pointer;
}
/* Placeholder sub-rows (revealed when variant has {{tokens}}) */
.vs-remix-block-card__ph-options{
  display:flex;
  flex-direction:column;
  gap:3px;
  flex:1 1 80px;
  min-width:0;
}
.vs-remix-block-card__ph-options[hidden]{
  display:none;
}
.vs-remix-block-card__ph-row{
  display:flex;
  align-items:center;
  gap:4px;
  width:100%;
}
.vs-remix-block-card__ph-label{
  font-size:9px;
  font-weight:500;
  color:var(--ink-3);
  flex-shrink:0;
  max-width:52px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.vs-remix-block-card__ph-row .vs-remix-block-card__ph-select{
  flex:1;
  width:0;
  min-width:0;
  height:26px;
  min-height:26px;
  font-size:10px;
  padding:3px 18px 3px 5px;
  box-sizing:border-box;
  background:var(--panel-3);
  color:var(--ink-1);
  border:1px solid var(--line-1);
  border-radius:5px;
  appearance:menulist;
  -webkit-appearance:menulist;
  cursor:pointer;
}
.vs-remix-block-card__ph-row .vs-remix-placeholder__subcats--grid{
  flex:1;
  width:0;
  min-width:0;
  gap:3px 8px;
}
.vs-remix-block-card__ph-row .vs-remix-placeholder__subcat{
  min-width:0;
  gap:2px;
}
.vs-remix-block-card__ph-row .vs-remix-placeholder__subcat select{
  width:100%;
  height:24px;
  min-height:24px;
  font-size:10px;
  padding:2px 16px 2px 5px;
  appearance:menulist;
  -webkit-appearance:menulist;
}
.vs-remix-block-card__ph-row .vs-remix-block-card__ph-label + .vs-remix-placeholder__subcats--grid{
  margin-top:0;
}
/* Preview row: textarea left + buttons stacked right */
.vs-remix-block-card__preview-row{
  display:flex;
  flex-direction:row;
  gap:5px;
  align-items:stretch;
}
.vs-remix-block-card__preview{
  flex:1;
  min-width:0;
  height:5.4em;
  min-height:5.4em !important;
  max-height:160px;
  font-size:10.5px;
  padding:3px 6px;
  line-height:1.35;
  box-sizing:border-box;
  resize:vertical;
  overflow:auto;
  background:var(--panel-3);
  color:var(--ink-2);
  border:1px solid var(--line-1);
  border-radius:5px;
}
/* Action buttons: stacked vertically to the right of the textarea */
.vs-remix-block-card__actions{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex-shrink:0;
  justify-content:flex-start;
}
.vs-remix-block-card__actions .btn{
  height:20px;
  padding:0 7px;
  font-size:10px;
  line-height:20px;
  border-radius:4px;
  white-space:nowrap;
}
.vs-remix-placeholder__input-row--textarea-only .vs-remix-placeholder__input{
  width:100%;
}
/* Altezza ~2 righe; min-height !important sovrascrive globale 180px; height senza !important così resize handle funziona */
.vs-remix-placeholders .vs-remix-placeholder__input{
  flex:1;
  min-width:0;
  height:2.8em;
  min-height:2.8em !important;
  font-size:12px;
  padding:4px 8px;
  line-height:1.35;
  resize:vertical;
  overflow:auto;
  background:var(--panel-3);
  color:var(--ink-1);
  border:1px solid var(--line-1);
  border-radius:6px;
  box-sizing:border-box;
}
.vs-remix-placeholders .vs-remix-placeholder__input--compact{
  height:2.8em;
  min-height:2.8em !important;
  max-height:120px;
  font-size:11px;
  padding:4px 8px;
  line-height:1.35;
  resize:vertical;
  overflow:auto;
  box-sizing:border-box;
}
.vs-remix-placeholder__actions{
  display:flex;
  flex-direction:row;
  gap:6px;
  flex-shrink:0;
}
.vs-remix-placeholder__confirm{ white-space:nowrap; }
.vs-remix-placeholder__clear{
  white-space:nowrap;
  background:var(--red, #c53030);
  color:#fff;
  border-color:var(--red, #c53030);
}
.vs-remix-placeholder__clear:hover{
  filter:brightness(1.1);
}

.chip-muted{ background:var(--panel-2); color:var(--ink-3); border:1px solid var(--line-1); }
.vs-detail__section{ display:flex; flex-direction:column; gap:8px; }
.vs-detail__section h4{ margin:0; font-size:13px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-2); }
.vs-detail__section h5{ margin:0; font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-3); }
.vs-detail__section p{ margin:0; font-size:13px; line-height:1.5; }
.vs-detail-empty{
  text-align:center;
  color:var(--ink-3);
  padding:60px 16px;
  border:1px dashed var(--line-1);
  border-radius:var(--radius);
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:0;
  margin:0;
}
.vs-detail-empty p{
  margin:0;
}
.vs-overview__item{ padding:10px 0; border-bottom:1px solid var(--line-1); }
.vs-overview__item:last-child{ border-bottom:none; }
.vs-overview__item h5{ margin:0 0 4px; font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-3); }
.vs-overview__item p{ margin:0; font-size:13px; line-height:1.45; color:var(--ink-1); }
.vs-preview-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.vs-preview__lang{ padding:12px; border:1px solid var(--line-1); border-radius:var(--radius); background:var(--panel-3); display:flex; flex-direction:column; gap:6px; }
.vs-preview__lang h4{ margin:0; font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-2); }
.vs-preview__lang .preview-text{ margin:0; font-size:13px; line-height:1.45; color:var(--ink-1); }
.vs-preview__lang .preview-text.empty{ color:var(--ink-3); }
.vs-detail dl{ margin:0; display:grid; grid-template-columns:minmax(0,160px) minmax(0,1fr); gap:8px 12px; }
.vs-detail dt{ margin:0; font-size:12.5px; font-weight:600; color:var(--ink-2); }
.vs-detail dd{ margin:0; font-size:13px; line-height:1.45; color:var(--ink-1); }

@media (max-width:720px){
  .vs-header{ flex-direction:column; align-items:flex-start; }
  .vs-header__controls{ width:100%; justify-content:space-between; }
  .vs-search input{ width:100%; }
  .vs-detail__footer{ position:sticky; bottom:0; background:var(--panel-4); padding-bottom:16px; }
}

/* Visual Dynamics Tab */
.wiz-dynamics{ display:flex; flex-direction:column; gap:18px; }
/* Dynamics: rimossi stili .dyn-toolbar obsoleti - usa tab-header standard */
.dyn-mode{ display:inline-flex; gap:6px; padding:4px; border-radius:999px; border:1px solid var(--pill-border); background:var(--panel-4); }
.dyn-mode__btn{
  border:1px solid transparent;
  background:var(--pill-bg);
  border-radius:999px;
  padding:0 var(--chip-pill-pad);
  min-height:var(--chip-pill-height);
  height:var(--chip-pill-height);
  max-height:var(--chip-pill-height);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-size:13px;
  font-weight:600;
  color:var(--ink-2);
  cursor:pointer;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dyn-mode__btn:hover{ color:var(--ink-1); background:var(--pill-hover-bg); }
.dyn-mode__btn.active{ background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:var(--pill-shadow); }
.dyn-mode__btn:disabled{ opacity:.5; cursor:not-allowed; }
.dyn-filters{
  padding:16px 20px;
  border:1px solid var(--line-1);
  border-radius:var(--radius);
  background:var(--panel-4);
  box-shadow:var(--shadow-sm);
}
.dyn-filters .dyn-search{
  flex:1 1 clamp(220px, 40vw, var(--dropdown-wide-max));
  max-width:var(--dropdown-wide-max);
}
.dyn-filters .label{ font-size:12.5px; color:var(--ink-3); margin-bottom:4px; display:block; }
.dyn-search input{ width:100%; }
/* Dynamics: usa tab-body come Archetipi */
#tab-dynamics .tab-body{
  display:grid;
  grid-template-columns:minmax(0,var(--dual-cards-fr)) minmax(var(--dual-preview-min), var(--dual-preview-fr));
  gap:24px;
  align-items:stretch;
  flex:1;
  min-height:0;
}

#tab-dynamics .tab-body__cards{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}

#tab-dynamics .tab-body__cards > .dyn-results.chip-panel{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  height:100%;
}

#tab-dynamics .tab-body__cards > .dyn-results.chip-panel > .chip-panel__body{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}

#tab-dynamics .tab-body__cards > .dyn-results.chip-panel > .chip-panel__body > .cards-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
}

.dyn-results{ min-height:340px; }
.dyn-results__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dyn-results__head .count-badge{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.dyn-card-grid{}
.dyn-card{ display:flex; flex-direction:column; gap:0; padding:var(--chip-card-pad); border:1px solid var(--line-1); border-radius:14px; background:var(--chip-card-bg); min-height:120px; position:relative; transition:border-color .2s ease, box-shadow .2s ease; }
.dyn-card--suggested{
  border-color: rgba(51,125,255,.62);
  box-shadow: 0 0 0 1px rgba(51,125,255,.28);
}
.dyn-card.selected{
  border-color:var(--chip-card-selected-border);
  box-shadow:var(--chip-card-selected-glow);
  background:var(--chip-card-selected-bg);
}
.dyn-card.selected .dyn-card__title{
  color:var(--chip-card-selected-title, var(--chip-card-title));
}
.dyn-card.selected .dyn-card__subtitle,
.dyn-card.selected .dyn-card__desc{
  color:var(--chip-card-selected-subtext, var(--chip-card-subtext));
}
.dyn-card.applied{ border-color:rgba(73,153,120,.7); box-shadow:0 0 0 1px rgba(73,153,120,.35); }
.dyn-card__title{ margin:0; font-size:15px; letter-spacing:.03em; color:var(--chip-card-title); }
.dyn-card__subtitle{ margin:0; font-size:12px; color:var(--chip-card-subtext); }
.dyn-card__desc{ margin:var(--chip-card-gap-title-desc) 0 0; font-size:12.5px; color:var(--chip-card-subtext); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:calc(1.5em * 2); }
.dyn-card__chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--chip-card-gap-desc-tags); margin-bottom:0; }
.dyn-card > *:last-child{ margin-bottom:0; }
.dyn-card__chips .chip:nth-of-type(n+4){ display:none; }
.dyn-card__suggested-badge{
  position:absolute;
  top:8px;
  right:10px;
  z-index:2;
  font-size:10px;
  line-height:1;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:700;
  padding:5px 7px;
  border-radius:999px;
  background:rgba(51,125,255,.18);
  border:1px solid rgba(51,125,255,.5);
  color:#b8d2ff;
}
.dyn-card__cta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  margin-top:var(--chip-card-gap-tags-cta);
}
.dyn-card__cta .chip-status{ background:rgba(73,153,120,.2); color:#d2ffe7; font-size:11px; letter-spacing:.05em; text-transform:uppercase; }
.dyn-guard{ margin:0; font-size:12.5px; color:var(--ink-3); }
.dyn-guard[hidden]{ display:none; }
#tab-dynamics .tab-body__preview{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
}

/* Dynamics preview: usa arch-preview-card come Archetipi */
#tab-dynamics .dyn-preview-board{
  padding:var(--chip-shell-pad);
  border:1px solid var(--chip-shell-border);
  border-radius:var(--chip-shell-radius);
  background:var(--chip-shell-bg);
  display:flex;
  flex-direction:column;
  gap:var(--chip-shell-gap);
  position:static;
  box-shadow:var(--chip-shell-shadow);
  flex:1;
  min-height:0;
  overflow:hidden;
}

#tab-dynamics .dyn-preview__empty{
  text-align:center;
  padding:40px 16px;
  border:1px dashed var(--chip-shell-border);
  border-radius:var(--radius);
  color:var(--chip-shell-text);
}

#tab-dynamics .arch-preview-cards{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
  min-height:0;
}

#tab-dynamics .arch-preview-card{
  border:1px solid var(--line-2,#2b2b2b);
  border-radius:12px;
  background:var(--panel-3,#1f1f1f);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
  min-height:0;
}

#tab-dynamics .arch-preview-card__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

#tab-dynamics .arch-preview-card__meta{
  display:flex;
  align-items:center;
  gap:8px;
}

#tab-dynamics .arch-preview-card__label{
  font-size:0.7rem;
  color:var(--ink-3,#999);
  letter-spacing:0.05em;
  text-transform:uppercase;
}

#tab-dynamics .arch-preview-card__lang{
  font-size:0.64rem;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--line-2,#2b2b2b);
  color:var(--ink-2,#ccc);
}

#tab-dynamics .arch-preview-card__body{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  gap:10px;
}

#tab-dynamics .arch-preview-card__button-row{
  position:relative;
  display:flex;
  justify-content:flex-end;
}

/* Titolo sezione: max 2 righe, molto sottile; handler per allungare */
#tab-dynamics .dyn-section-title-wrap{
  margin-bottom:2px;
  flex:0 0 auto;
}
#tab-dynamics .dyn-section-title-wrap .label{ margin-bottom:2px; }
#tab-dynamics #dynSectionTitle.dyn-section-title-input,
#tab-dynamics .dyn-section-title-input.arch-preview-card__textarea{
  height:38px !important;
  min-height:38px !important;
  max-height:8em;
  flex:none;
  resize:vertical;
  overflow-y:auto;
  font-size:0.82rem;
  line-height:1.35;
  padding:6px 10px;
  box-sizing:border-box;
}

#tab-dynamics .arch-preview-card__textarea{
  width:100%;
  min-height:60px;
  max-height:50vh;
  flex:1;
  border-radius:10px;
  border:1px solid var(--line-2,#2b2b2b);
  background:var(--panel-2);
  color:var(--ink-1);
  font-size:0.82rem;
  line-height:1.4;
  padding:10px 12px;
  resize:none;
  overflow-y:auto;
  transition:border-color .2s ease, box-shadow .2s ease;
  font-family:inherit;
}

/* Ensure Dynamics preview board matches Archetipi exactly */
#tab-dynamics .arch-preview-board{
  display:flex;
  flex-direction:column;
  gap:16px;
  position:relative;
  min-width:0;
  flex:1;
  min-height:0;
  overflow:hidden;
}

#tab-dynamics .arch-preview-board__header{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  margin-bottom:0;
}

#tab-dynamics .dyn-preview-header-stack{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  min-width:0;
}

#tab-dynamics #dynTargetToggle{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  width:100%;
  flex-shrink:0;
  overflow-x:auto;
  scrollbar-width:thin;
}
#tab-dynamics #dynTargetToggle .btn-pill{
  flex:1 1 0;
  min-width:64px;
  max-width:none;
}

#tab-dynamics .arch-panel__eyebrow{
  font-size:0.65rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--ink-3,#999);
  margin:0 0 4px 0;
}

#tab-dynamics .arch-preview-board__header h3{
  font-size:1.1rem;
  font-weight:600;
  color:var(--ink-1,#fff);
  margin:0;
}

/* Selezioni pose/espressione: chip più leggibili e spaziate nel blocco preview */
#tab-dynamics .arch-preview-board__header #dynPreviewChips{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  row-gap:8px;
  margin:10px 0 0;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line-1);
  background:rgba(255,255,255,.04);
  min-height:44px;
  box-sizing:border-box;
}
#tab-dynamics .arch-preview-board__header #dynPreviewChips .chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px 6px 12px;
  font-size:13px;
  line-height:1.25;
  font-weight:500;
  color:var(--ink-1,#eee);
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.07);
}
#tab-dynamics .arch-preview-board__header #dynPreviewChips .chip.active{
  border-color:var(--blue);
  background:rgba(59,130,246,.12);
}
#tab-dynamics .arch-preview-board__header #dynPreviewChips .chip-remove{
  margin-left:4px;
  font-size:16px;
  line-height:1;
  padding:2px 6px;
  color:var(--ink-2);
  border-radius:6px;
}
#tab-dynamics .arch-preview-board__header #dynPreviewChips .chip-remove:hover{
  color:var(--ink-1);
  background:rgba(255,255,255,.08);
}

#tab-dynamics .arch-preview-card__textarea:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 2px var(--blue-light);
}

#tab-dynamics .arch-preview-card__textarea:disabled{
  opacity:0.6;
  cursor:not-allowed;
}

#tab-dynamics .dyn-preview-single .field[data-preview-person="active"]{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  gap:0;
}

#tab-dynamics .dyn-preview-single .dyn-preview-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:2px;
  margin-bottom:2px;
  flex:0 0 auto;
}

#tab-dynamics .dyn-preview-single .dyn-preview-toolbar .label{
  margin:0;
}

.dyn-preview-column{ display:flex; flex-direction:column; gap:16px; }
.dyn-preview-actions{ display:flex; justify-content:flex-end; gap:12px; flex-wrap:wrap; }
.dyn-preview-actions .btn{
  min-width:var(--dropdown-width-min);
  max-width:var(--dropdown-width-max);
}
.dyn-preview-board{
  padding:20px;
  border:1px solid var(--line-1);
  border-radius:16px;
  background:var(--panel-4);
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:16px;
  position:static;
  max-height:none;
  overflow:visible;
}
.dyn-preview__empty{ text-align:center; padding:40px 16px; border:1px dashed var(--line-1); border-radius:var(--radius); color:var(--ink-3); }
.dyn-preview__body{ display:flex; flex-direction:column; gap:18px; }
.dyn-preview__header{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:start;
  gap:14px;
}

/* Dynamics preview should focus on the editable text blocks (no card-like metadata). */
.dyn-preview__header #dynPreviewTitle,
.dyn-preview__header #dynPreviewSubtitle,
.dyn-preview__header #dynPreviewChips{
  display:none;
}

.dyn-preview__header > :last-child{ justify-self:end; }
.dyn-preview__label{ margin:0; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3); }
.dyn-preview__subtitle{ margin:4px 0 0; font-size:13px; color:var(--ink-2); }
.dyn-preview__chips{ display:flex; flex-wrap:wrap; gap:6px; }
.dyn-preview-editor{ display:flex; flex-direction:column; gap:8px; }
.dyn-preview-editor[hidden]{ display:none; }
.dyn-preview-editor .preview-textarea{ min-height:90px; }

/* Body Morph preview: usa arch-preview-board come Archetipi */
#tab-bodymorph .arch-preview-board__header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:16px;
}

#tab-bodymorph .arch-preview-board__label{
  font-size:0.7rem;
  color:var(--ink-3,#999);
  letter-spacing:0.05em;
  text-transform:uppercase;
  margin:0 0 4px;
}

#tab-bodymorph .arch-preview-board__subtitle{
  margin:4px 0 0;
  font-size:13px;
  color:var(--ink-2);
}

#tab-bodymorph .arch-preview-board__chips{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}

#tab-bodymorph .arch-preview-board__chips-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-end;
}

#tab-bodymorph .arch-preview-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
  min-height:0;
}

#tab-bodymorph .arch-preview-card__textarea{
  min-height:200px;
  flex:1;
  resize:none;
  overflow-y:auto;
}

/* Body Morph preview: scrollbar per scorrere tutto, contenimento come grooming */
#tab-bodymorph .tab-body__preview{
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
}

#tab-bodymorph .tab-body__preview .section-block{
  min-width:0;
  overflow-x:hidden;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  min-height:0;
}

#tab-bodymorph #bodyMorphPreviewBody{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}

#tab-bodymorph .arch-preview-card > .field{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}

#tab-bodymorph .arch-preview-card > .field .arch-preview-card__textarea{
  flex:1;
  min-height:120px;
}

@media (max-width:1200px){
  #tab-dynamics .tab-body{ grid-template-columns:1fr; }
  #tab-dynamics .tab-body__preview{ order:2; }
  .dyn-content{ grid-template-columns:1fr; }
  .dyn-preview-column{ order:2; }
  .dyn-db{
    width:100%;
    grid-template-columns:repeat(auto-fit, minmax(var(--dropdown-width-min), 1fr));
  }
}

@media (max-width:720px){
  .dyn-toolbar, .dyn-filters{ padding:14px; }
  .dyn-mode{ width:100%; justify-content:space-between; }
  .dyn-mode__btn{ flex:1 1 50%; text-align:center; }
  .dyn-preview-actions{ flex-direction:row; justify-content:flex-end; flex-wrap:wrap; }
  .dyn-preview-actions .btn{ width:auto; }
  .dyn-preview-board{ position:static; }
}

/* Scene mode button group */
.scene-mode-group{ display:inline-flex; gap:8px; }
.scene-mode-group .btn-pill{ background:var(--pill-bg); border-color:var(--pill-border); color:var(--pill-text, var(--ink-2)); }
.scene-mode-group .btn-pill.active{ background:var(--blue); color:#fff; border-color:var(--blue); }

/* Generic preview line text (used in Scene & Luci) */
.preview-line{ margin:2px 0; color:var(--ink-1); font-size:12.5px; }

.grooming-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.grooming-table th,
.grooming-table td{ border:1px solid var(--line-1); padding:6px; text-align:left; }
.grooming-table th{ background:rgba(255,255,255,.02); color:var(--ink-2); font-weight:600; }
.grooming-table select{ width:100%; }

.inline-inputs{ display:flex; gap:12px; flex-wrap:wrap; }
/* Outfit tab */
.outfit-toolbar{
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  align-items:flex-end;
  justify-content:flex-start;
  border:1px solid var(--line-1);
}
.outfit-gender-block{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.outfit-gender-toggle{ display:flex; flex-wrap:nowrap; gap:4px; }
.outfit-gender-toggle .btn-pill{ min-width:52px; padding:0 8px; font-size:12px; }
.outfit-gender-toggle .btn-pill.active{
  background:var(--blue) !important;
  color:#fff !important;
  border-color:var(--blue) !important;
}
.outfit-target-toggle,
.props-target-toggle{ display:flex; flex-wrap:wrap; gap:10px; }
.outfit-target-toggle .btn-pill,
.props-target-toggle .btn-pill{ min-width:72px; }
.outfit-target-toggle .btn-pill.active,
.props-target-toggle .btn-pill.active{
  background:var(--blue) !important;
  color:#fff !important;
  border-color:var(--blue) !important;
}
.outfit-db-line{
  width:auto;
  max-width:none;
  flex:0 0 auto;
  gap:8px;
}
.outfit-db-line .field{
  min-width:var(--dropdown-width-min);
  max-width:var(--dropdown-width-max);
}

@media (max-width:1200px){
  .outfit-toolbar{ flex-wrap:wrap; }
  .outfit-db-line{
    width:100%;
    flex-wrap:wrap;
  }
}

/* Scene & Luci: show dividers and tune spacing/widths for a clearer grouping */
.scene-header__bottom .filters-divider{ display:block; }

/* Scene & Luci bottom bar: slightly lower height and tighter layout */
#sceneFiltersBottom{
  padding:10px 14px;
  gap:8px;
}
#sceneFiltersBottom .scene-header__bottom{
  display:flex !important;
  align-items:center;
  justify-content:flex-start !important;
  gap:10px;
  flex-wrap:nowrap;
  width:100% !important;
}

#sceneFiltersBottom .scene-header__bottom > .filters-divider{
  width:2px;
  height:28px;
  align-self:center;
  background:var(--blue);
  opacity:.55;
  border-radius:2px;
  flex-shrink:0;
}

/* Scene & Luci: label a lato (is-inline) invece che sopra */
#sceneFiltersBottom .scene-header__bottom > .field.is-inline{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  min-width:0;
}

#sceneFiltersBottom .scene-header__bottom > .field.is-inline > .label{
  font-size:11px;
  margin:0;
  white-space:nowrap;
  flex-shrink:0;
}

#sceneFiltersBottom .scene-header__bottom > .field > select{
  height:28px;
  font-size:12px;
  padding:4px 8px;
}

#sceneFiltersBottom #sceneArchitecture,
#sceneFiltersBottom #sceneSubcategory{
  width:140px;
  min-width:140px;
  max-width:140px;
}

#sceneFiltersBottom .scene-header__bottom > .field.field--xs{
  width:110px;
  min-width:110px;
  max-width:110px;
}


/* Allineamento uniforme: tutti gli elementi centrati verticalmente */
#sceneFiltersBottom .scene-header__bottom > .field,
#sceneFiltersBottom .scene-header__bottom > .arch-mode{
  align-self:center;
  margin:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
  flex:0 0 auto !important;
}

#sceneFiltersBottom .scene-header__bottom > .filters-service-cta{
  align-self:center !important;
  margin:0 !important;
  margin-left:auto !important;
  margin-right:0 !important;
  flex:0 0 auto !important;
  order:999 !important;
}

#sceneFiltersBottom .scene-header__bottom > .arch-mode{
  flex:0 0 auto;
  align-self:center;
}

/* Separazione uniforme tra i 3 blocchetti principali */
#sceneFiltersBottom .scene-header__bottom > .filters-divider:nth-child(3){
  margin:0 18px;
}

#sceneFiltersBottom .scene-header__bottom > .filters-divider:nth-child(5){
  margin:0 18px;
}

#sceneFiltersBottom .scene-header__bottom > .filters-divider:nth-child(7){
  margin:0 18px;
}

.dyn-db .field{
  min-width:var(--dropdown-width-min);
  max-width:var(--dropdown-width-max);
}

.outfit-filters-line{
  gap:clamp(14px, 2vw, 24px);
  display:flex;
  flex-direction:column;
}
.outfit-filters-line .label{ margin-bottom:3px; }

/* Outfit: add slight separation between (Stampa) and (Materiale 2), and before Posizione */
.outfit-header-box--filters > .dropdown-field-set.is-inline-labels:nth-child(2) > .field:nth-child(4),
.outfit-header-box--filters > .dropdown-field-set.is-inline-labels:nth-child(2) > .field:nth-child(6),
#tab-outfit .outfit-filters-line > .dropdown-field-set.is-inline-labels:nth-child(2) > .field:nth-child(4),
#tab-outfit .outfit-filters-line > .dropdown-field-set.is-inline-labels:nth-child(2) > .field:nth-child(6){
  margin-left:14px;
}


/* Outfit: live mapping hint inside preview editor */
#tab-outfit .outfit-preview__hint{
  color:var(--warn);
}

/* Outfit: highlight only placeholders + chosen values inside the preview box.
   This uses an overlay so we can style substrings while keeping the textarea editable. */
#tab-outfit .outfit-pair-preview .field{
  position:relative;
  display:flex;
  flex-direction:column;
  flex:1 1 0;
  min-height:0;
  overflow:hidden;
}
#tab-outfit .outfit-pair-preview .field > .label,
#tab-outfit .outfit-pair-preview .field > .preset-preview__hint{
  flex:0 0 auto;
}
#tab-outfit .outfit-pair-preview .field .preview-textarea{
  flex:1 1 0;
  min-height:0;
  overflow:auto;
}

#tab-outfit .outfit-preview-overlay{
  position:absolute;
  left:0;
  right:0;
  /* Align with .preview-textarea padding */
  top:calc(12px + 22px);
  bottom:0;
  padding:12px;
  border-radius:12px;
  border:1px solid transparent;
  background:var(--panel-2);
  color:var(--ink-1);
  font-size:15px;
  line-height:1.5;
  white-space:pre-wrap;
  word-break:break-word;
  overflow:auto;
  pointer-events:none;
  z-index:1;
}
/* Dark mode: testo overlay leggibile + placeholder gialli (come tab Props) */
:root:not([data-theme="light"]) #tab-outfit .outfit-preview-overlay,
:root:not([data-theme="light"]) #tab-outfit .outfit-preview-overlay *:not(.outfit-preview-overlay__hl){
  color:#f5f6ff !important;
}
:root[data-theme="light"] #tab-outfit .outfit-preview-overlay{
  background:transparent !important;
  z-index:3;
}
:root[data-theme="light"] #tab-outfit .outfit-preview-overlay,
:root[data-theme="light"] #tab-outfit .outfit-preview-overlay *:not(.outfit-preview-overlay__hl){
  color:#1a1f2e !important;
  -webkit-text-fill-color:#1a1f2e !important;
}
/* Placeholder ({{PRIMARY_MATERIAL}}, {{POSITION}}, ecc.): giallo dark, ambra light — id overlay per massima specificità */
#outfitPreviewOverlay.outfit-preview-overlay .outfit-preview-overlay__hl,
#tab-outfit #outfitPreviewOverlay .outfit-preview-overlay__hl,
#tab-outfit .outfit-preview-overlay span.outfit-preview-overlay__hl{
  color:#ffd37a !important;
  -webkit-text-fill-color:#ffd37a !important;
}
:root[data-theme="light"] #outfitPreviewOverlay.outfit-preview-overlay .outfit-preview-overlay__hl,
:root[data-theme="light"] #tab-outfit #outfitPreviewOverlay .outfit-preview-overlay__hl,
:root[data-theme="light"] #tab-outfit .outfit-preview-overlay .outfit-preview-overlay__hl{
  color:#b45309 !important;
  -webkit-text-fill-color:#b45309 !important;
}

/* Outfit preview: textarea trasparente così si vede l’overlay (testo + placeholder gialli), come Props */
#tab-outfit #outfitPreview.preview-textarea,
#tab-outfit #outfitPreviewPerson1.preview-textarea,
#tab-outfit #outfitPreviewPerson2.preview-textarea{
  font-size:15px;
  line-height:1.5;
  background:transparent !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  caret-color:var(--ink-1);
  position:relative;
  z-index:2;
}
:root[data-theme="light"] #tab-outfit #outfitPreview.preview-textarea,
:root[data-theme="light"] #tab-outfit #outfitPreviewPerson1.preview-textarea,
:root[data-theme="light"] #tab-outfit #outfitPreviewPerson2.preview-textarea{
  background:transparent !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  caret-color:#1a1f2e;
}
#tab-outfit #outfitPreview.preview-textarea:disabled,
#tab-outfit #outfitPreviewPerson1.preview-textarea:disabled,
#tab-outfit #outfitPreviewPerson2.preview-textarea:disabled{
  opacity:1;
  cursor:default;
  background:transparent !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}

#tab-outfit #outfitPreviewPerson1,
#tab-outfit #outfitPreviewPerson2{
  resize:vertical !important;
  pointer-events:auto !important;
}
#tab-outfit #outfitPreviewPerson1:disabled,
#tab-outfit #outfitPreviewPerson2:disabled{
  opacity:1 !important;
  cursor:default !important;
  resize:vertical !important;
  pointer-events:auto !important;
}

/* Body Morph: preview overlay con placeholder in giallo (come Outfit) */
#tab-bodymorph .body-morph-preview-field{
  position:relative;
  display:flex;
  flex-direction:column;
  flex:1 1 0;
  min-height:0;
  overflow:hidden;
}
#tab-bodymorph .body-morph-preview-field .body-morph-preview-textarea{
  flex:1 1 0;
  min-height:0;
}
#tab-bodymorph .body-morph-preview-overlay{
  position:absolute;
  left:0;
  right:0;
  top:calc(12px + 22px);
  bottom:0;
  padding:12px;
  border-radius:12px;
  border:1px solid transparent;
  background:var(--panel-2);
  color:var(--ink-1);
  font-size:15px;
  line-height:1.5;
  white-space:pre-wrap;
  word-break:break-word;
  overflow:auto;
  pointer-events:none;
  z-index:1;
}
#tab-bodymorph .body-morph-preview-overlay .body-morph-ph{
  color:#ffd37a !important;
  -webkit-text-fill-color:#ffd37a !important;
}
:root[data-theme="light"] #tab-bodymorph .body-morph-preview-overlay{
  background:transparent !important;
  z-index:3;
}
:root[data-theme="light"] #tab-bodymorph .body-morph-preview-overlay .body-morph-ph{
  color:#b45309 !important;
  -webkit-text-fill-color:#b45309 !important;
}
#tab-bodymorph .body-morph-preview-textarea.body-morph-preview-textarea--overlay{
  background:transparent !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  caret-color:var(--ink-1);
  position:relative;
  z-index:2;
}
:root[data-theme="light"] #tab-bodymorph .body-morph-preview-textarea.body-morph-preview-textarea--overlay{
  caret-color:#1a1f2e;
}

/* Outfit: pins row (material / color / print) compact widths */
.outfit-pins-row{
  gap:clamp(16px, 2vw, 26px);
  align-items:center;
}
.outfit-pins-row > .field{
  flex:0 0 auto;
  min-width:0;
}
.outfit-pins-row > .field > .label{
  max-width:none;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
  flex:0 0 auto;
}

/* Outfit: cap free-text inputs so CTA buttons stay on the same row */
.outfit-pins-row > .field > input[type="text"]{
  width:150px;
  max-width:150px;
}

.outfit-pins-row > .outfit-pins-hint{
  flex:1 1 auto;
  min-width:240px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.outfit-pins-row > .outfit-pins-hint > #outfitPinHint{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Outfit: keep hint between inputs and buttons (no auto-push on the CTA cluster) */
.outfit-pins-row.dropdown-field-set > .filters-service-cta{
  margin-left:0;
}

/* Outfit: keep filter dropdowns compact (requested max width 150px) */
.outfit-filters-line.dropdown-field-set > .field,
.outfit-filters-line .dropdown-field-set > .field{
  flex:0 1 150px;
  min-width:0;
  max-width:150px;
}

/* Outfit: usa tab-body come le altre tab */
#tab-outfit .tab-body{
  display:grid;
  grid-template-columns:minmax(0,var(--dual-cards-fr)) minmax(var(--dual-preview-min), var(--dual-preview-fr));
  gap:24px;
  align-items:stretch;
  flex:1;
  min-height:0;
  overflow:hidden;
}
#tab-outfit .tab-body__preview{
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}
#tab-outfit .tab-body__preview .section-block{
  flex:1 1 0;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

#tab-outfit .tab-body__cards > .outfit-results{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}

#tab-outfit .tab-body__cards > .outfit-results > .chip-panel__body > .chip-panel__scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
}

.outfit-content{
  margin-top:14px;
  display:grid;
  grid-template-columns:minmax(0,var(--dual-cards-fr)) minmax(var(--dual-preview-min), var(--dual-preview-fr));
  gap:24px;
  align-items:flex-start;
}
@media (max-width:1100px){
  .outfit-content{ grid-template-columns:1fr; }
}
.outfit-results{ min-height:0; }

.outfit-results-head{ display:flex; justify-content:space-between; align-items:center; margin:18px 0 10px; }
.outfit-results-head .count-badge{ font-size:14px; text-transform:uppercase; letter-spacing:.08em; color:#d4deff; }

.cards-scroll.outfit-scroll{
  /* massimo due righe visibili prima dello scroll (ref TAB_OUTFIT) */
  --outfit-card-row-height:154px;
  --card-grid-row-height:var(--outfit-card-row-height);
}
#outfitList.cards-wrap{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, var(--chip-card-max-width)));
  grid-auto-rows:minmax(var(--card-grid-row-height), auto);
  gap:var(--grid-gap);
  align-content:flex-start;
  justify-content:flex-start;
}
@media (max-width:900px){
  #outfitList.cards-wrap{ grid-template-columns:1fr; }
}
#outfitList .card{
  display:flex;
  flex-direction:column;
  gap:0;
  min-height:120px;
  border-radius:14px;
  padding:8px 10px;
  background:var(--panel-3);
  border:1px solid var(--line-1);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
#outfitList .card .cta{
  align-self:flex-end;
  margin-top:6px;
  justify-content:flex-end;
}
#outfitList .card .desc{
  color:var(--ink-2);
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:0;
  margin-top:var(--chip-card-gap-title-desc);
}
#outfitList .card .meta{
  display:flex !important;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  margin-top:6px;
  margin-bottom:0;
  padding:0;
  width:100%;
}
#outfitList .card .meta .chip{
  width:auto !important;
  max-width:calc(50% - 3px) !important;
  min-width:0;
  padding:0 10px;
  flex:0 1 auto;
  justify-content:center;
}
#outfitList .card .meta .chip:nth-of-type(n+5){ display:none; }
@media (max-width:480px){
  #outfitList .card .meta{ grid-template-columns:1fr; }
}
#outfitList .card.active{
  border-color:var(--chip-card-selected-border);
  box-shadow:var(--chip-card-selected-glow);
  background:var(--chip-card-selected-bg);
}
#outfitList .card.active .title{
  color:var(--chip-card-selected-title, var(--chip-card-title));
}
#outfitList .card.active .desc{
  color:var(--chip-card-selected-subtext, var(--chip-card-subtext));
}

.outfit-preview-shell{
  margin-top:0;
  padding:var(--chip-shell-pad);
  border-radius:var(--chip-shell-radius);
  border:1px solid var(--chip-shell-border);
  background:var(--chip-shell-bg);
  box-shadow:var(--chip-shell-shadow);
  position:sticky;
  top:120px;
}
@media (max-width:1100px){
  .outfit-preview-shell{ position:static; }
}
.outfit-preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

#tab-outfit .outfit-preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(106,157,255,.16);
}

.outfit-preview-head > :last-child{ justify-self:end; }

/* Outfit: placement dropdown lives in preview header */
.outfit-preview-placement{
  min-width:0;
}

.outfit-preview-placement select{
  width:160px;
  max-width:160px;
}
.outfit-preview-body{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  gap:8px;
}

#tab-outfit .outfit-preview-body{
  display:flex;
  flex-direction:column;
  flex:1 1 0;
  min-height:0;
  gap:8px;
  overflow:hidden;
}

@media (max-width:900px){
  .outfit-preview-body{ flex-direction:column; }
}
.outfit-preview-grid:not(:has(.outfit-preview-card--compact)){
  flex:1 1 0;
  min-width:260px;
  min-height:160px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
@media (max-width:520px){
  .outfit-preview-grid:not(:has(.outfit-preview-card--compact)){ grid-template-columns:1fr; }
}
.outfit-preview-card{
  border:1px solid var(--chip-card-border);
  border-radius:14px;
  padding:14px;
  background:var(--chip-card-bg);
  box-shadow:var(--chip-card-shadow);
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:120px;
}
.outfit-preview-card--compact{
  flex-direction:row;
  align-items:center;
  gap:8px;
  min-height:auto;
  height:auto;
  padding:4px 10px;
  border-radius:12px;
  width:100%;
}

.outfit-preview-grid:has(.outfit-preview-card--compact){
  flex:0 0 auto;
  min-width:260px;
  min-height:auto;
  margin-bottom:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.outfit-preview-card.active{
  border-color:var(--chip-card-selected-border);
  box-shadow:0 0 0 1px var(--chip-card-selected-border), 0 10px 30px rgba(0,0,0,.3);
}
.outfit-preview-card--compact.active{
  box-shadow:0 0 0 1px var(--chip-card-selected-border), 0 1px 4px rgba(0,0,0,.2);
}
.outfit-preview-card__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(106,157,255,.16);
}
.outfit-preview-card--compact .outfit-preview-card__head{
  display:none;
}
.outfit-preview-card--compact .outfit-preview-card__title{
  font-size:12px;
  font-weight:500;
  color:var(--ink-1);
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1.4;
}
.outfit-preview-card--compact .outfit-preview-card__tag{
  font-size:10px;
  color:var(--ink-3);
  background:rgba(255,255,255,.06);
  border:1px solid var(--line-2);
  border-radius:10px;
  padding:2px 8px;
  white-space:nowrap;
  flex:0 0 auto;
  line-height:1.4;
  height:auto;
}
.outfit-preview-card--compact .outfit-preview-card__tag.outfit-preview-card__bag-gender{
  background:rgba(186,148,230,.14);
  border-color:rgba(186,148,230,.4);
  color:var(--ink-2);
  font-weight:600;
}
.outfit-preview-card--compact .outfit-preview-card__placement{
  flex:0 0 auto;
  padding:2px 6px;
  font-size:9px;
  min-width:60px;
  max-width:70px;
  width:auto;
  height:auto;
  line-height:1.3;
  border:1px solid var(--line-2);
  border-radius:6px;
  background:var(--panel-3);
  color:var(--ink-1);
  cursor:pointer;
  overflow:hidden;
  text-overflow:ellipsis;
}
.outfit-preview-card--compact .outfit-preview-card__placement:focus{
  outline:none;
  border-color:var(--chip-card-selected-border);
  box-shadow:0 0 0 1px var(--chip-card-selected-border);
}
.outfit-preview-card--compact .outfit-preview-card__placement option{
  font-size:11px;
  padding:4px;
}
.outfit-preview-card--compact .outfit-preview-card__save-btn{
  flex:0 0 auto;
  padding:4px 12px;
  font-size:11px;
  min-width:auto;
  height:auto;
  line-height:1.4;
}
.outfit-preview-card--compact .outfit-preview-card__save-btn:disabled{
  pointer-events:none;
}
.outfit-preview-card--compact .outfit-preview-card__remove{
  flex:0 0 auto;
  margin-left:0;
  width:20px;
  height:20px;
  font-size:14px;
  padding:0;
  line-height:1;
}
.outfit-preview-card--compact .outfit-preview-card__reroll-slot{
  flex:0 0 auto;
  margin-left:auto;
  width:20px;
  height:20px;
  font-size:14px;
  padding:0;
  line-height:1;
  border-radius:8px;
  border:1px solid var(--line-2);
  background:rgba(106,157,255,.12);
  color:var(--cyan);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.outfit-preview-card--compact .outfit-preview-card__reroll-slot:hover{
  opacity:0.95;
  border-color:rgba(95,213,255,.55);
}
.outfit-preview-card--compact .outfit-preview-card__reroll-slot:focus{
  outline:none;
  border-color:var(--cyan);
  box-shadow:0 0 0 1px rgba(95,213,255,.35);
}

.outfit-preview-card__remove{
  flex:0 0 auto;
  width:24px;
  height:24px;
  border-radius:10px;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.04);
  color:var(--ink-2);
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  padding:0;
  cursor:pointer;
}
.outfit-preview-card__remove:hover{
  color:var(--ink-1);
  border-color:var(--line-1);
}
.outfit-preview-card__remove:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 1px rgba(58,90,120,.4);
}

.outfit-preview-card__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-content:flex-start;
  max-height:none;
  overflow:visible;
  margin-top:4px;
  padding-top:8px;
  border-top:1px solid rgba(106,157,255,.16);
}

/* Outfit preview chips: padding corretto dai bottoni sopra */
.outfit-preview-card__meta .chip{
  background:rgba(255,255,255,.08);
  border:1px solid var(--line-2);
  font-size:11px;
  height:24px;
  min-height:24px;
  line-height:24px;
  padding:0 10px;
  border-radius:12px;
  flex:0 0 auto;
  min-width:0;
}

.outfit-preview-card__editor{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:4px;
}

.outfit-editors-container{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:0;
  flex:1 1 0;
  min-height:0;
  overflow:hidden;
}
#tab-outfit .outfit-preview-copy{
  flex:1 1 0;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
#tab-outfit .outfit-preview-copy .outfit-pair-preview{
  flex:1 1 0;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
#tab-outfit .outfit-preview-copy .outfit-pair-preview > .field{
  flex:1 1 0;
  min-height:0;
  overflow:hidden;
}
#tab-outfit .outfit-preview-copy #outfitEditorsContainer{
  flex:1 1 0;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.outfit-editor-item{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1 1 0;
  min-height:0;
  overflow:hidden;
}

.outfit-editor-item__header{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}

.outfit-editor-item__body{
  display:flex;
  flex-direction:column;
  gap:0;
  flex:1 1 0;
  min-height:0;
  overflow:hidden;
}

.outfit-editor-item__actions{
  display:flex;
  flex-direction:row;
  justify-content:flex-end;
  gap:8px;
  margin-top:8px;
}

.outfit-editor-item__label{
  font-size:13px;
  font-weight:600;
  color:var(--ink-1);
  flex:0 0 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.outfit-editor-item__save-btn{
  flex:0 0 auto;
  padding:6px 16px;
  font-size:12px;
  min-width:auto;
}

.outfit-editor-item__title{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--line-1);
  background:var(--panel-3);
  color:var(--ink-1);
  font-size:14px;
  font-weight:500;
  font-family:inherit;
  transition:border-color .2s ease, background .2s ease;
}

.outfit-editor-item__title:focus{
  outline:none;
  border-color:var(--chip-card-selected-border);
  background:var(--panel-2);
  box-shadow:0 0 0 1px var(--chip-card-selected-border);
}

/* Grid editor: wrapper per overlay + textarea (placeholder gialli come main preview) */
#tab-outfit .outfit-editor-item__field{
  position:relative;
  display:flex;
  flex-direction:column;
  flex:1 1 0;
  min-height:0;
  overflow:hidden;
}
#tab-outfit .outfit-editor-item__overlay{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  padding:12px;
  border-radius:10px;
  border:1px solid transparent;
  background:var(--panel-2);
  color:var(--ink-1);
  font-size:15px;
  line-height:1.5;
  white-space:pre-wrap;
  word-break:break-word;
  overflow:auto;
  pointer-events:none;
  z-index:1;
  box-sizing:border-box;
}
:root:not([data-theme="light"]) #tab-outfit .outfit-editor-item__overlay{
  color:#f5f6ff !important;
}
:root[data-theme="light"] #tab-outfit .outfit-editor-item__overlay{
  color:#1a1f2e !important;
}
#tab-outfit .outfit-editor-item__overlay .outfit-preview-overlay__hl{
  color:#ffd37a !important;
  -webkit-text-fill-color:#ffd37a !important;
}
:root[data-theme="light"] #tab-outfit .outfit-editor-item__overlay .outfit-preview-overlay__hl{
  color:#b45309 !important;
  -webkit-text-fill-color:#b45309 !important;
}
#tab-outfit .outfit-editor-item__textarea{
  width:100%;
  flex:1 1 0;
  min-height:100px;
  padding:12px;
  border-radius:10px;
  border:1px solid var(--line-1);
  background:transparent !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  caret-color:var(--ink-1);
  font-size:15px;
  line-height:1.5;
  font-family:inherit;
  resize:none;
  overflow:auto;
  position:relative;
  z-index:2;
  transition:border-color .2s ease;
  box-sizing:border-box;
}
:root[data-theme="light"] #tab-outfit .outfit-editor-item__textarea{
  caret-color:#1a1f2e;
}
.outfit-editor-item__textarea:focus{
  outline:none;
  border-color:var(--chip-card-selected-border);
  box-shadow:0 0 0 1px var(--chip-card-selected-border);
}

.outfit-editors-actions{
  margin-bottom:16px;
  display:flex;
  justify-content:flex-end;
}

.outfit-editors-actions .btn:disabled{
  opacity:0.5;
  cursor:not-allowed;
}
  justify-content:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.outfit-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}
.outfit-actions .btn{
  min-width:150px;
  min-height:44px;
  font-size:13px;
  text-align:center;
}
.outfit-preview-copy{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1 1 340px;
  min-width:260px;
  min-height:0;
  overflow:hidden;
}

/* When the preview copy wraps below the cards, use the full available width */
@media (max-width:1200px){
  .outfit-preview-copy{ flex-basis:100%; min-width:0; }
}
.outfit-pair-preview{ display:flex; flex-direction:column; gap:12px; }
.outfit-preview-copy .label{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
  color:var(--ink-2);
}
.preview-textarea{
  width:100%;
  min-height:120px;
  flex:0 1 auto;
  border-radius:12px;
  border:1px solid var(--line-1);
  background:var(--panel-3);
  color:var(--ink-1);
  font-size:13.5px;
  line-height:1.5;
  padding:12px;
  resize:vertical;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.preview-textarea:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 1px rgba(58,90,120,.4);
}

.style-results{ margin-top:12px; }

.empty{ color:var(--ink-3); font-size:12px; padding:12px 0; }

/* Skeleton */
.card.skeleton{ position:relative; overflow:hidden; }
.skeleton-line{ height:10px; background:rgba(255,255,255,.08); border-radius:6px; margin:6px 0; }
.card.skeleton::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer{ 100% { transform:translateX(100%); } }

.btn-pill{
  border-radius:999px;
  padding:0 var(--chip-pill-pad);
  min-height:var(--chip-pill-height);
  height:var(--chip-pill-height);
  max-height:var(--chip-pill-height);
  border:1px solid var(--pill-border);
  background:var(--pill-bg);
  color:var(--pill-text, var(--ink-2));
  font-size:12.5px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.btn-pill:hover{ color:var(--pill-text, var(--ink-1)); background:var(--pill-hover-bg); }
.btn-pill.active{
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
  box-shadow:var(--pill-shadow);
}

.sticky-title{ font-size:13px; font-weight:700; margin:0 0 10px; }

.wiz-sidenav::-webkit-scrollbar{ width:6px; height:6px; }
.wiz-sidenav::-webkit-scrollbar-thumb{ background:var(--scrollbar-thumb); border-radius:4px; }
.wiz-sidenav::-webkit-scrollbar-track{ background:var(--scrollbar-track); }

.prompt-box{
  background:var(--panel); border:1px solid var(--line-1); border-radius:10px; padding:10px; margin-bottom:8px;
}
.prompt-box-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; gap:6px; flex-wrap:wrap; }
.prompt-box-actions{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:nowrap;
  position:relative;
  min-height:32px;
}
.prompt-rules-btn.active{
  background:rgba(59,130,246,.2);
  border-color:var(--blue);
  color:var(--ink-1);
}
:root[data-theme="light"] .prompt-rules-btn.active{
  background:rgba(59,130,246,.15);
  color:var(--ink-1) !important;
}
.prompt-copy-btn{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
}
:root[data-theme="light"] .prompt-copy-btn{
  color:#fff !important;
}
.prompt-copy-btn:hover,
.prompt-copy-btn:focus-visible{
  background:var(--blue-light);
  border-color:var(--blue-light);
  color:#0c1723;
}
.copy-confirm{
  background:var(--green-soft);
  color:#c2ffe2;
  border:1px solid rgba(47,143,106,.5);
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
  font-weight:600;
  position:absolute;
  right:calc(100% + 8px);
  top:50%;
  transform:translateY(-50%);
  white-space:nowrap;
  pointer-events:none;
}
.prompt-box-body{
  transition:max-height 0.3s ease-out, opacity 0.2s ease-out, margin 0.3s ease-out, padding 0.3s ease-out;
  overflow:hidden;
}
.prompt-box-body--collapsed{
  max-height:0 !important;
  opacity:0;
  margin:0 !important;
  padding:0 !important;
}
.prompt-box-body:not(.prompt-box-body--collapsed){
  margin-top:0;
}
.prompt-box-toggle{
  padding:4px 8px;
  min-width:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.prompt-box-toggle .toggle-icon{
  font-size:10px;
  transition:transform 0.2s ease;
  display:inline-block;
}
.prompt-box-toggle[aria-expanded="false"] .toggle-icon{
  transform:rotate(-90deg);
}
/* Wrapper: textarea + overlay devono avere stili identici per allineamento perfetto */
.prompt-highlight-wrap{
  position:relative;
  width:100%;
}

/* Overlay: stessi padding/font/line-height della textarea (padding 10px 12px usato da entrambi) */
.prompt-highlight{
  position:absolute;
  inset:0;
  padding:10px 12px;
  box-sizing:border-box;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12.5px;
  line-height:1.4;
  letter-spacing:normal;
  word-spacing:normal;
  white-space:pre-wrap;
  word-break:normal;
  overflow:auto;
  color:transparent;
  border-radius:8px;
  border:1px solid transparent;
  z-index:2;
  pointer-events:none;
}

/* Dark mode: verde, testo bianco */
.prompt-highlight .prompt-ph{
  color:#fff;
  background:#2d7d46;
  border-radius:2px;
  padding:0 2px;
  white-space:nowrap;
}

:root[data-theme="dark"] .prompt-highlight .prompt-ph{
  background:#2d7d46;
  color:#fff;
}

/* Light mode: sottolineatura gialla, testo nero */
:root[data-theme="light"] .prompt-highlight .prompt-ph{
  background:#fef08a;
  color:#1a1f2e;
  border-bottom:2px solid #eab308;
  border-radius:2px;
  padding:0 2px;
  white-space:nowrap;
}

/* Textarea: stessi valori dell'overlay per allineamento 1:1 */
#promptIT,
#promptEN{
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  background:var(--panel-2);
  color:var(--ink-1);
  border:1px solid var(--line-1);
  border-radius:8px;
  min-height:35vh;
  max-height:60vh;
  overflow:auto;
  resize:vertical;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12.5px;
  line-height:1.4;
  letter-spacing:normal;
  word-spacing:normal;
  white-space:pre-wrap;
  word-break:normal;
}

.prompt-highlight-wrap #promptIT{
  position:relative;
  z-index:1;
}

/* Light mode: testo sempre leggibile (scuro su sfondo chiaro) */
:root[data-theme="light"] .prompt-highlight-wrap #promptIT,
:root[data-theme="light"] .prompt-highlight-wrap #promptEN{
  background:#fff;
  color:#1a1f2e;
  -webkit-text-fill-color:#1a1f2e;
  border-color:rgba(0,0,0,.12);
}
:root[data-theme="light"] .prompt-highlight-wrap #promptIT::placeholder,
:root[data-theme="light"] .prompt-highlight-wrap #promptEN::placeholder{
  color:#6b7280;
}
.prompt-workspace{ margin-top:8px; display:flex; flex-direction:column; gap:5px; }
.prompt-workspace__label{ font-size:12px; color:var(--ink-2); }
.prompt-workspace__textarea{
  width:100%; min-height:60px; resize:vertical;
  background:var(--panel-2); color:var(--ink-1); border:1px solid var(--line-1);
  border-radius:8px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12.5px; line-height:1.4; white-space:pre-wrap;
  padding:8px;
}
.qa-overlay{
  position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
}
.qa-overlay[hidden]{ display:none; }
.qa-overlay__panel{
  background:var(--panel); border:1px solid var(--line-1); border-radius:10px;
  width:min(900px, 92vw); max-height:80vh; overflow:auto; padding:16px;
}
.qa-overlay__header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
#qaReportJson{
  white-space:pre-wrap; color:#e8f1ff; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12.5px;
}

/* ============================================
   CARD CREATION OVERLAY
   ============================================ */
.card-creation-overlay{
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
}
.card-creation-overlay[hidden]{ display:none; }
.card-creation-overlay__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(4px);
}
.card-creation-overlay__panel{
  position:relative; z-index:1;
  background:var(--panel); border:1px solid var(--line-1); border-radius:12px;
  width:min(1300px, 98vw); min-height:400px; max-height:90vh;
  display:flex; flex-direction:column;
  box-shadow:0 12px 48px rgba(0,0,0,.15), 0 4px 16px rgba(0,0,0,.08);
  overflow:hidden;
}

/* Form / Archive / Remix: allargata e leggermente più alta */
.card-creation-overlay__panel--form,
.card-creation-overlay__panel--archive,
.card-creation-overlay__panel--remix{
  max-height:min(1020px, 90vh);
  min-height:720px;
  width:min(1320px, 98vw);
}

/* Unified Header — compatto */
.card-creation-unified-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 16px;
  border-bottom:1px solid var(--line-1);
  background:var(--panel);
}

.card-creation-unified-header__tabs{
  display:flex;
  gap:8px;
  flex:1;
  justify-content:center;
}

.card-creation-back-btn,
.card-creation-close-btn{
  min-width:80px;
  opacity:0.8;
  transition:opacity 0.2s;
}

.card-creation-back-btn:hover,
.card-creation-close-btn:hover{
  opacity:1;
}

.card-creation-back-btn[hidden]{
  visibility:hidden;
}

/* Tabs — stile Remix (remix-mode-buttons) */
.card-creation-tab{
  padding:10px 24px;
  background:transparent;
  border:1px solid transparent;
  color:var(--ink-3);
  border-radius:6px;
  cursor:pointer;
  transition:all .2s;
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
}

.card-creation-tab:hover{
  background:var(--panel-1);
  color:var(--ink-2);
}

.card-creation-tab.active{
  background:var(--panel-2);
  color:var(--blue);
  border-color:var(--line-1);
  box-shadow:none;
}

.card-creation-tab-content{
  flex:1; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column;
  min-height:0; -webkit-overflow-scrolling:touch;
}

/* Header (nascosto - ora usa unified header) */
.card-creation-overlay__header{
  display:none;
}

/* Step containers */
.card-creation-capsule-selector,
.card-creation-type-selector,
.card-creation-mode-selector,
.card-creation-form-container{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  overflow:hidden;
}

/* Body — scroll interno, nessun taglio */
.card-creation-overlay__body{
  flex:1; overflow-y:auto; overflow-x:hidden; padding:20px 24px;
  width:100%; min-width:0; min-height:0; -webkit-overflow-scrolling:touch;
}

.card-creation-overlay__body *{
  box-sizing:border-box;
}

/* Type Selector Grid */
.card-creation-type-selector__intro{
  margin:0 0 24px; color:var(--ink-2); font-size:14px;
}
.card-creation-type-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 220px));
  gap:16px;
  max-width:1000px;
  margin:0 auto;
  justify-content:center;
}
.card-creation-type-card{
  background:var(--panel-1); border:2px solid var(--line-1); border-radius:12px;
  padding:16px 20px; cursor:pointer; transition:all .2s;
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
}
.card-creation-type-card:hover{
  background:var(--panel-2); border-color:var(--blue); transform:translateY(-2px);
}
.card-creation-type-card__icon{ font-size:32px; }
.card-creation-type-card__name{ font-size:15px; font-weight:600; color:var(--ink-1); }
.card-creation-type-card__desc{ font-size:12px; color:var(--ink-3); }

/* Mode Selector — compatto */
.card-creation-mode-selector__intro{
  margin:0 0 16px; color:var(--ink-3); font-size:13px;
}
.card-creation-mode-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; max-width:400px; margin:0 auto;
}
.card-creation-mode-card{
  background:var(--panel-1);
  border:1px solid var(--line-1);
  border-radius:8px;
  padding:16px 20px;
  cursor:pointer;
  transition:border-color .2s, background .2s, box-shadow .2s;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
}
.card-creation-mode-card:hover{
  background:var(--panel-2);
  border-color:var(--blue);
  box-shadow:0 2px 8px rgba(74,124,255,.1);
}
.card-creation-mode-card__icon{
  font-size:32px;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
}
.card-creation-mode-card__icon svg{
  width:100%; height:100%;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.card-creation-mode-card__name{ font-size:14px; font-weight:600; color:var(--ink-1); }
.card-creation-mode-card__desc{ font-size:12px; color:var(--ink-3); }

/* Form */
.card-creation-form{ display:flex; flex-direction:column; gap:16px; }
.card-creation-form .dyn-section-title-input{
  height:150px; min-height:150px; max-height:8em; resize:vertical; overflow-y:auto; box-sizing:border-box;
}
.contesto-form-tabs{ display:flex; gap:8px; margin-bottom:12px; }
.contesto-form-tab.active{ background:var(--accent-1); color:#fff; border-color:var(--accent-1); }
.contesto-form-panel{ margin-top:0; }
.contesto-config-section .section-hint{ margin-bottom:12px; }
.contesto-config-block{ margin-bottom:16px; }
.contesto-config-block h5{ margin:0 0 8px 0; font-size:0.875rem; }
.contesto-config-list{ display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.contesto-config-row{ display:flex; align-items:center; gap:8px; }
.contesto-config-row__label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:0.875rem; }
.contesto-config-actions{ margin-top:16px; }
.card-creation-form__section{
  background:var(--panel-5);
  border:1px solid var(--line-1);
  border-radius:8px;
  padding:16px 20px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:12px 16px;
}

/* Layout Outfit 2 colonne */
.card-creation-form__outfit-layout{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.card-creation-form__outfit-left,
.card-creation-form__outfit-right{
  display:flex;
  flex-direction:column;
  gap: 16px;
}

/* Outfit sections: grid 2 colonne interno */
.card-creation-form__section--outfit-base,
.card-creation-form__section--outfit-details {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px 16px;
  align-items: start;
}

/* Sezione Prompt e Tag: 1 colonna (verticale) */
.card-creation-form__section--prompt-tags {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px;
}

.card-creation-form__section--outfit-base h4,
.card-creation-form__section--outfit-details h4 {
  grid-column: 1 / -1;
  margin: 0 0 8px 0;
}

.form-field--half {
  grid-column: span 1;
}

.form-field--full {
  grid-column: 1 / -1;
}

/* Dual field: dropdown + custom input */
.form-field-dual {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  width: 100%;
  align-items: center;
}
.form-field-dual .btn.small { min-width: 4.5rem; }

.field-dual-select,
.field-dual-input {
  min-width: 0;
  font-size: 14px;
  padding: 8px;
  border: 1px solid var(--line-1);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--ink-1);
}

.field-dual-select:focus,
.field-dual-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* Checkbox branded allineata in basso a destra */
.outfit-branded-checkbox {
  display: flex;
  align-items: flex-end;
  padding-bottom: 4px;
}

/* Liste compatte per branded */
.field-array-list--compact {
  max-height: 110px;
  overflow-y: auto;
  font-size: 12px;
  line-height: 1.3;
}

.field-array-list--compact .field-array-item {
  padding: 3px 8px;
  font-size: 12px;
  line-height: 1.3;
  margin-bottom: 3px;
}

.field-array-list--compact .field-array-item__remove {
  padding: 2px 6px;
  font-size: 11px;
  line-height: 1;
}

@media (max-width: 768px) {
  .card-creation-form__section--outfit-base,
  .card-creation-form__section--outfit-details {
    grid-template-columns: 1fr;
  }

  .form-field--half {
    grid-column: 1;
  }
}

@media (max-width: 1024px) {
  .card-creation-form__outfit-layout{
    grid-template-columns: 1fr;
  }
}

/* Props: Materials/Colors/Tags su una riga */
.card-creation-form__section--props-arrays{
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.card-creation-form__section--props-arrays h4{
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .card-creation-form__section--props-arrays{
    grid-template-columns: 1fr;
  }
}

/* Props form compact: meno spazio verticale, layout ottimizzato */
.card-creation-form__section--props-compact{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card-creation-form__section--props-compact h4{
  margin: 0 0 6px 0;
  font-size: 13px;
}
.card-creation-form__section--props-compact .form-subsection-title{
  margin: 12px 0 6px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
.form-grid--compact{
  gap: 10px 14px;
}
.form-grid--compact .form-field{
  margin-bottom: 0;
}
.form-field--compact{
  margin-bottom: 0;
}
.form-field--compact .form-field-with-buttons textarea.field{
  min-height: 64px;
}
.form-field--span2{
  grid-column: span 2;
}
@media (max-width: 700px) {
  .form-field--span2{ grid-column: span 1; }
}

/* Branded checkbox styling */
.checkbox-label{
  display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
}

.checkbox{
  width:18px; height:18px; cursor:pointer; accent-color:var(--accent-2);
}

/* Capsule Selector Grid */
.card-creation-step__header{
  text-align:center;
  margin:16px 0 24px;
  padding:0 16px;
}

.card-creation-step__header h3{
  font-size:18px;
  font-weight:700;
  color:var(--ink-1);
  margin:0 0 6px;
  letter-spacing:0.05em;
  text-transform:uppercase;
}

.card-creation-step__header p{
  font-size:13px;
  color:var(--ink-3);
  margin-top:4px;
  margin:0;
  font-weight:400;
}

.capsule-selector-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap:10px;
  padding:0;
  margin:0 auto 24px;
  max-width:900px;
  justify-content:center;
}

.capsule-selector-grid.capsule-selector-grid--capsules{
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  margin-top:0;
  padding-top:0;
  border-top:none;
  gap:10px;
}

.capsule-selector-grid.capsule-selector-grid--card-types{
  grid-template-columns: repeat(4, minmax(220px, 240px));
  gap:16px;
  margin-bottom:32px;
  justify-content:center;
}

.capsule-selector-grid.capsule-selector-grid--card-types-5{
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  gap:14px;
  margin:0 auto 20px;
  max-width:1100px;
  width:100%;
  justify-content:center;
}

/* Card asset (Archetypes, Body Morph...) CON ICONE */
.capsule-selector-grid.capsule-selector-grid--asset-cards{
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap:12px;
  margin:0 auto 20px;
  max-width:1000px;
  width:100%;
  justify-content:center;
}

.capsule-card.capsule-card--no-icon .capsule-card__content{
  flex:1;
  gap:2px;
  text-align:center;
}

/* Database cards (no icon) — solo titolo, leggermente più grandi */
.capsule-card.capsule-card--no-icon{
  min-height:58px;
  max-height:none;
  max-width:none;
  min-width:180px;
  padding:14px 18px;
  border-radius:8px;
  border:1px solid var(--line-1);
  background:var(--panel-1);
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition:border-color .2s, background .2s, box-shadow .2s;
}

.capsule-selector-grid.capsule-selector-grid--grooming{
  grid-template-columns: repeat(4, minmax(220px, 240px));
  gap:16px;
  margin-top:32px;
  padding-top:32px;
  border-top:1px solid rgba(51, 65, 85, 0.4);
  justify-content:center;
}

.capsule-card{
  position:relative;
  background:var(--panel-1);
  border:1px solid var(--line-1);
  border-radius:8px;
  padding:14px 16px;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
  cursor:pointer;
  transition:border-color .2s, background .2s, box-shadow .2s;
  min-height:56px;
  min-width:0;
  width:100%;
}

/* Asset cards (con icona) — nessun max-width */
.capsule-selector-grid--asset-cards .capsule-card{
  max-width:none;
  max-height:none;
}

.capsule-card.capsule-card--compact{
  min-height:50px;
  max-height:60px;
  padding:15px 15px;
}

.capsule-card.capsule-card--compact .capsule-card__title{
  font-size:16px;
  letter-spacing:0.3px;
  white-space:nowrap;
}

.capsule-card:hover{
  border-color:var(--blue);
  background:var(--panel-2);
  box-shadow:0 2px 8px rgba(74,124,255,.1);
}

.capsule-card.selected{
  border-color:var(--blue);
  background:var(--panel-2);
  box-shadow:0 0 0 2px var(--blue);
}

.capsule-card.capsule-card--no-icon:hover,
.capsule-card.capsule-card--no-icon.selected{
  border-color:var(--blue);
  background:var(--panel-2);
  box-shadow:0 2px 8px rgba(74,124,255,.1);
}

.capsule-card.capsule-card--no-icon.selected{
  box-shadow:0 0 0 2px var(--blue);
}

.capsule-card__icon{
  font-size:42px;
  line-height:1;
  opacity:0.95;
  transition:all 0.25s ease;
  flex-shrink:0;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.capsule-card__icon svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.capsule-card:hover .capsule-card__icon,
.capsule-card.selected .capsule-card__icon{
  opacity:1;
  filter:drop-shadow(0 0 12px rgba(56, 189, 248, 0.5));
}

.capsule-card__content{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  text-align:left;
}

.capsule-card__title{
  font-size:21px;
  font-weight:900;
  color:var(--ink-1);
  text-transform:uppercase;
  letter-spacing:0.2px;
  line-height:1.15;
  margin:0;
}

.capsule-card.capsule-card--no-icon .capsule-card__title{
  font-size:14px;
  font-weight:600;
  letter-spacing:0.3px;
}

/* Dataset cards: solo titolo, niente descrizione */
.capsule-card.capsule-card--no-icon .capsule-card__desc{
  display:none;
}

.capsule-card__desc{
  font-size:9px;
  color:var(--ink-3);
  text-transform:uppercase;
  letter-spacing:0.2px;
  line-height:1.25;
  font-weight:700;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.capsule-card__badge{
  position:absolute;
  top:12px;
  right:12px;
  background:linear-gradient(135deg, var(--blue) 0%, var(--accent-2) 100%);
  color:#fff;
  font-size:10px;
  font-weight:700;
  padding:5px 10px;
  border-radius:6px;
  text-transform:uppercase;
  letter-spacing:0.8px;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
}

@media (max-width: 1200px) {
  .capsule-selector-grid{
    grid-template-columns: repeat(2, 1fr);
    gap:20px;
    max-width:700px;
  }

  .capsule-selector-grid.capsule-selector-grid--capsules,
  .capsule-selector-grid.capsule-selector-grid--card-types,
  .capsule-selector-grid.capsule-selector-grid--grooming{
    grid-template-columns: repeat(2, 1fr);
    max-width:700px;
  }
}

@media (max-width: 768px) {
  .capsule-selector-grid,
  .capsule-selector-grid.capsule-selector-grid--capsules,
  .capsule-selector-grid.capsule-selector-grid--card-types,
  .capsule-selector-grid.capsule-selector-grid--grooming{
    grid-template-columns: 1fr;
    gap:16px;
    max-width:500px;
  }

  .capsule-card{
    min-height:90px;
    padding:20px 24px;
    gap:16px;
  }

  .capsule-card__icon{
    font-size:52px;
    width:60px;
    height:60px;
  }

  .capsule-card__title{
    font-size:16px;
  }

  .capsule-card__desc{
    font-size:12px;
  }

  .card-creation-step__header h3{
    font-size:26px;
  }
}
/* Titolo principale form (seconda schermata, con icona) */
.card-creation-form__title{
  margin:0 0 24px; font-size:20px; color:var(--ink-1); font-weight:700;
  padding-bottom:16px; border-bottom:2px solid var(--gray-200);
  display:flex; align-items:center; gap:12px;
}
.card-creation-form__icon{
  flex-shrink:0;
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  opacity:0.9;
}
.card-creation-form__icon svg{
  width:100%; height:100%;
  fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.card-creation-form__section h4{
  margin:0 0 8px; font-size:14px; color:var(--ink-1); font-weight:600;
  grid-column: 1 / -1; /* Full width */
}
.section-hint{
  margin:0 0 12px; font-size:12px; color:var(--ink-3); grid-column: 1 / -1;
}
.form-field{ margin-bottom:0; }
.form-field label{
  display:block; margin-bottom:4px; font-size:12.5px; color:var(--ink-2); font-weight:500;
}
.form-field small{
  display:block; margin-top:4px; font-size:11.5px; color:var(--ink-3);
}
/* Full width per campi grandi */
.form-field.full-width{
  grid-column: 1 / -1;
}
/* Grid 2 colonne per varianti */
.form-variants-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 16px;
  grid-column: 1 / -1;
}
/* Grid 2 colonne per campi base compatti */
.form-grid-2col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 16px;
  grid-column: 1 / -1;
}
.form-grid-3col{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px 16px;
  grid-column: 1 / -1;
}
/* Blocchi modulari preset: full width da bordo a bordo */
.preset-blocks-section{
  grid-column: 1 / -1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.preset-blocks-section h4,
.preset-blocks-section small{
  margin: 0;
}
.preset-blocks-grid{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px 16px;
}
/* Responsive: 1 colonna su mobile */
@media (max-width: 768px) {
  .card-creation-form__section{
    grid-template-columns: 1fr;
  }
}
.form-field .field{
  width:100%; padding:10px 12px; background:var(--panel-2); border:1px solid var(--line-1);
  border-radius:6px; color:var(--ink-1); font-size:14px; font-family:inherit;
}
/* Light mode: campi bianchi */
:root[data-theme="light"] .form-field .field{
  background:#ffffff;
}
:root[data-theme="light"] .form-field .field:focus{
  background:#ffffff;
}
.form-field .field:focus{
  outline:none; border-color:var(--blue); background:var(--panel-3);
}
.form-field .field--error{
  border-color:var(--red); background:rgba(177,50,65,.1);
}
.form-field textarea.field{
  resize:vertical; min-height:80px;
}
/* Input con datalist: aggiungi freccia dropdown */
.form-field input.field[list]{
  padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:12px;
  cursor:pointer;
}
:root[data-theme="light"] .form-field input.field[list]{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23444' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
}

/* Placeholder Buttons */
.placeholder-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
  justify-content:center;
}
.placeholder-buttons .btn{
  font-size:13px; padding:6px 12px;
}

/* Array Fields */
.form-field-array{
  display:flex; gap:8px;
}
.form-field-array .field{
  flex:1;
}
.field-array-list{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;
}
.field-array-item{
  display:flex; align-items:center; gap:3px;
  background:var(--panel-2); border:1px solid var(--line-1); border-radius:4px;
  padding:2px 6px; font-size:11px; color:var(--ink-1);
  line-height:1.2;
}
.field-array-item button{
  background:transparent; border:none; color:var(--ink-3); cursor:pointer;
  padding:0; font-size:12px; line-height:1; transition:color .2s;
}
.field-array-item button:hover{ color:var(--red); }

/* Form Actions */
.card-creation-form__actions{
  display:flex; justify-content:space-between; gap:12px;
  padding:14px 20px; border-top:1px solid var(--line-1);
  background:var(--panel-2);
  position:sticky; bottom:0; background:var(--panel); z-index:10;
}

/* Capsule Selector */
.card-creation-capsule-selector__intro{
  margin:0 0 24px; color:var(--ink-2); font-size:14px;
}
.card-creation-capsule-list{
  display:flex; flex-direction:column; gap:12px; margin-bottom:24px;
}
.card-creation-capsule-item{
  background:var(--panel-1); border:2px solid var(--line-1); border-radius:10px;
  padding:16px; cursor:pointer; transition:all .2s;
  display:flex; align-items:center; gap:12px; text-align:left;
}
.card-creation-capsule-item:hover{
  background:var(--panel-2); border-color:var(--blue-light);
}
.card-creation-capsule-item.selected{
  border-color:var(--blue); background:var(--panel-2);
}
.card-creation-capsule-item__icon{ font-size:24px; }
.card-creation-capsule-item__info{ flex:1; }
.card-creation-capsule-item__name{ display:block; font-size:15px; font-weight:600; color:var(--ink-1); }
.card-creation-capsule-item__desc{ display:block; font-size:13px; color:var(--ink-3); margin-top:2px; }

.card-creation-capsule-selector__actions{
  display:flex; justify-content:space-between; gap:12px;
}

/* Archive — filtri su una riga con titoletti */
.card-archive-filters{
  margin-bottom:12px;
  width:100%;
  min-width:0;
}
.card-archive-filters-row{
  display:grid;
  grid-template-columns:minmax(70px,1fr) minmax(90px,1fr) minmax(90px,1fr) minmax(70px,1fr) minmax(100px,1.5fr);
  gap:12px;
  width:100%;
  align-items:end;
}
.card-archive-filter-cell{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:6px;
  min-width:0;
  overflow:visible;
}
.card-archive-filter-cell--search{
  min-width:0;
}
.card-archive-filter-label{
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--ink-2);
  white-space:nowrap;
  flex-shrink:0;
}
.card-archive-filter-cell .card-archive-select,
.card-archive-filter-cell .card-archive-search{
  flex:1;
  min-width:0;
}
.card-archive-select{
  min-width:0;
  height:30px;
  font-size:12px;
  padding:0 6px;
}
.card-archive-filters .field{
  min-width:0;
}
.card-archive-filters input[type="search"],
.card-archive-search{
  min-width:0;
  height:30px;
  font-size:12px;
  padding:0 8px;
}
.card-archive-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  width:100%;
  min-width:0;
}
.card-archive-item{
  background:var(--panel-1);
  border:1px solid var(--line-1);
  border-radius:8px;
  padding:5px 8px;
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.card-archive-item:hover{
  background:var(--panel-2);
  border-color:var(--line-2);
  box-shadow:0 2px 8px rgba(74,124,255,.08);
}
.card-archive-item--user-created{
  border-left:3px solid var(--blue);
  background:linear-gradient(90deg, rgba(74,124,255,0.08) 0%, var(--panel-1) 20px);
}
.card-archive-item--user-created:hover{
  background:linear-gradient(90deg, rgba(74,124,255,0.12) 0%, var(--panel-2) 20px);
}
.card-archive-badge{
  display:inline-block;
  font-size:10px;
  font-weight:700;
  padding:2px 6px;
  border-radius:3px;
  margin-left:6px;
  vertical-align:middle;
}
.card-archive-badge--new{
  background:var(--blue);
  color:#fff;
}
.card-archive-item__info{
  flex:1;
  overflow:hidden;
  min-width:0;
}
.card-archive-item__title{
  font-size:12px;
  font-weight:500;
  color:var(--ink-1);
  white-space:normal;
  overflow:visible;
  word-break:break-word;
  flex:1;
  min-width:0;
}
.card-archive-capsule{
  display:inline-block;
  background:var(--panel-2);
  border:1px solid var(--line-1);
  border-radius:3px;
  padding:1px 5px;
  font-size:10px;
  font-weight:700;
  color:var(--ink-2);
  text-transform:uppercase;
  margin-right:6px;
}
.card-archive-mode{
  display:inline-block;
  background:var(--blue);
  border-radius:4px;
  padding:1px 6px;
  font-size:9px;
  font-weight:700;
  color:#fff;
  text-transform:uppercase;
  margin-left:6px;
}
.card-archive-item__meta{
  display:none;
}
.card-archive-item__actions{
  display:flex;
  gap:6px;
  flex-shrink:0;
}
.card-archive-item__actions .btn{
  padding:4px 8px;
  font-size:10px;
  min-width:60px;
  white-space:nowrap;
}
.card-archive-empty{
  text-align:center; padding:60px 20px; color:var(--ink-3);
}

/* Responsive */
@media(max-width:768px){
  .card-creation-type-grid{
    grid-template-columns:repeat(2, 1fr);
  }
  .card-creation-mode-grid{
    grid-template-columns:1fr;
  }
  .card-archive-filters-row{
    grid-template-columns:1fr 1fr;
  }
  .card-archive-list{
    grid-template-columns:1fr;
  }
}

/* ============================================================================
   REMIX TAB STYLES
   ============================================================================ */

/* Toolbar principale con CREA/ARCHIVIO — compatto */
.remix-main-toolbar{
  padding:10px 14px;
  background:var(--panel-2);
  border-bottom:1px solid var(--line-1);
  margin-bottom:0;
}

.remix-mode-buttons{
  display:flex;
  gap:8px;
}

.remix-mode-buttons .btn{
  min-width:90px;
  font-size:12px;
  font-weight:600;
  padding:8px 16px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

/* Sezione controlli — 2 righe per evitare sovrapposizione STILE/PHOTO */
.remix-controls-section{
  display:grid;
  grid-template-columns: auto 1fr auto 1fr;
  grid-template-rows: auto auto;
  align-items:center;
  gap:12px 24px;
  margin-bottom:14px;
  padding:12px 18px;
  background:var(--panel-4);
  border:1px solid var(--line-1);
  border-radius:8px;
  min-height:auto;
  width:100%;
  min-width:0;
}

.remix-controls-section > *{
  min-width:0;
}

.remix-controls-spacer{
  display:none;
}

.remix-group-label{
  font-size:11px;
  font-weight:700;
  color:var(--ink-2);
  white-space:nowrap;
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-right:4px;
}

.remix-control-select{
  min-width:0;
  width:100%;
  max-width:100%;
  height:30px;
  font-size:12px;
}

.remix-modality-buttons,
.remix-mix-type-buttons,
.remix-family-buttons{
  display:flex;
  gap:4px;
}

.remix-modality-buttons .btn,
.remix-mix-type-buttons .btn,
.remix-family-buttons .btn{
  min-width:58px;
  font-size:11px;
  height:30px;
  padding:0 10px;
}

.remix-modality-buttons .btn.active,
.remix-mix-type-buttons .btn.active,
.remix-family-buttons .btn.active{
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
}

.remix-placeholder-buttons-wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  margin:12px 0;
  padding:10px 0;
  border-bottom:1px solid var(--line-1, rgba(0,0,0,.08));
}
.remix-placeholder-buttons-label{ font-size:12px; color:var(--ink-2); }
.remix-placeholder-buttons{ display:flex; flex-wrap:wrap; gap:6px; }
.remix-placeholder-buttons .remix-ph-btn{ font-size:11px; }
.remix-placeholder-hint{ font-size:11px; color:var(--ink-3); margin-left:8px; }

.remix-material-subcategory-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  margin:10px 0;
  padding:8px 0;
  border-bottom:1px solid var(--line-1, rgba(0,0,0,.08));
}
.remix-material-subcategory-row .remix-control-select{ max-width:220px; }
.remix-material-subcategory-row .remix-placeholder-hint{ flex-basis:100%; margin-left:0; margin-top:2px; }

.remix-material-custom-placeholder-row{ margin:10px 0; padding:8px 0; }
.remix-material-custom-placeholder-row .remix-group-label{ display:block; margin-bottom:6px; }
.remix-custom-ph-input-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.remix-custom-ph-input-row .remix-control-input{ flex:1; min-width:180px; max-width:280px; }

.remix-placeholder-options-section{ margin:12px 0; }
.remix-ph-options-details{ border:1px solid var(--line-1); border-radius:8px; padding:12px; background:var(--panel-2, rgba(0,0,0,.02)); }
.remix-ph-opt-group{ margin-bottom:18px; }
.remix-ph-opt-group:last-child{ margin-bottom:0; }
.remix-ph-opt-group-title{ margin:0 0 10px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2); border-bottom:1px solid var(--line-1); padding-bottom:6px; }
.remix-ph-opt-group-inner{ display:flex; flex-direction:column; gap:12px; }
.remix-ph-options-details summary{ cursor:pointer; font-size:12px; font-weight:600; text-transform:uppercase; color:var(--ink-2); }
.remix-placeholder-options-inner{ display:flex; flex-direction:column; gap:16px; margin-top:12px; }
.remix-ph-opt-block{ display:flex; flex-direction:column; gap:8px; padding:10px; background:var(--panel-3, rgba(0,0,0,.03)); border-radius:6px; }
.remix-ph-opt-title{ margin:0; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-2); font-family:monospace; }
.remix-ph-opt-list{ display:flex; flex-direction:column; gap:6px; }
.remix-ph-opt-row{ display:flex; gap:8px; align-items:center; }
.remix-ph-opt-row .remix-ph-opt-title-input{ flex:0 0 140px; min-width:0; }
.remix-ph-opt-row .remix-ph-opt-text-input{ flex:1; min-width:0; }
.remix-ph-opt-row .remix-ph-opt-remove{ flex:0 0 auto; width:28px; padding:4px; font-size:16px; line-height:1; }
.remix-ph-opt-hint{ font-size:11px; color:var(--ink-3); margin:0; }

.remix-two-columns-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin:16px 0;
}

.remix-column{
  border:1px solid rgba(0,0,0,0.1);
  border-radius:8px;
  padding:14px;
  background:rgba(0,0,0,0.02);
}

.remix-column-title{
  margin:0 0 10px 0;
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  color:var(--ink-2);
}

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

.remix-column .remix-content-textarea{
  min-height:120px;
  resize:vertical;
}

.remix-pair-p1p2-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.remix-pair-slot{ display:flex; flex-direction:column; gap:8px; }
.remix-pair-slot-title{ margin:0 0 4px; font-size:11px; font-weight:600; text-transform:uppercase; color:var(--ink-2); }
.remix-pair-single-wrap .field-group{ display:flex; flex-direction:column; gap:8px; }

.remix-edit-wrap{
  margin:16px 0;
}
.remix-edit-placeholder-options{
  margin:12px 0;
  padding:12px;
  background:var(--panel-2);
  border:1px solid var(--line-1);
  border-radius:10px;
}
.remix-edit-placeholder-options__title{ margin:0 0 6px; font-size:13px; }
.remix-edit-placeholder-options__hint{ margin:0 0 10px; font-size:11px; color:var(--ink-2); }
.remix-edit-placeholder-row{ margin:8px 0; font-size:12px; }
.remix-edit-placeholder-row code{ font-size:11px; background:var(--panel-3); padding:2px 6px; border-radius:4px; }
.remix-edit-placeholder-opts{ color:var(--ink-2); }
.remix-edit-placeholder-options__empty{ margin:0; font-size:12px; color:var(--ink-2); }
.remix-edit-placeholder-group{ margin:16px 0; padding:12px; background:var(--panel-3); border:1px solid var(--line-1); border-radius:8px; }
.remix-edit-placeholder-group__title{ margin:0 0 10px; font-size:12px; }
.remix-edit-ph-option-rows{ display:flex; flex-direction:column; gap:12px; margin-bottom:10px; }
.remix-edit-ph-option-row{ padding:10px; background:var(--panel-2); border:1px solid var(--line-1); border-radius:6px; }
.remix-edit-ph-option-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.remix-edit-ph-option-header label{ font-size:11px; color:var(--ink-2); }
.remix-edit-ph-title{ width:100%; margin-bottom:6px; font-size:12px; }
.remix-edit-ph-text{ width:100%; min-height:60px; font-size:12px; resize:vertical; }

.remix-placeholder-editor-content{ display:flex; flex-direction:column; gap:16px; padding:12px 0; }
.remix-placeholder-editor-header{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.remix-placeholder-editor-title{ margin:0; font-size:14px; font-weight:600; }
.remix-placeholder-editor-filters{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; }
.remix-placeholder-editor-filters .remix-group-label{ margin:0; white-space:nowrap; }
.remix-placeholder-editor-filters .remix-control-select{ min-width:140px; }
.remix-placeholder-editor-body{ max-height:60vh; overflow-y:auto; display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; align-content:start; }
.remix-placeholder-editor-body .remix-edit-placeholder-group{ margin:0; min-width:0; }
.remix-placeholder-editor-actions{ flex-shrink:0; }
@media(max-width:700px){
  .remix-placeholder-editor-body{ grid-template-columns:1fr; }
}

.remix-controls-section .btn.prim{
  min-width:90px;
  padding:8px 14px;
  font-size:12px;
}

@media(max-width:900px){
  .remix-controls-section{
    grid-template-columns: auto 1fr;
    gap:10px 16px;
  }
}

/* Remix tab: nessun taglio, scroll interno, centrato, no overflow orizzontale */
#cardCreationTabRemixContent .card-creation-overlay__body,
#cardCreationTabArchiveContent .card-creation-overlay__body{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:hidden;
  padding:14px 20px 20px;
  box-sizing:border-box;
}

#remixCreateContent{
  max-width:1100px;
  margin:0 auto;
  padding:14px 18px;
  width:100%;
}

.remix-form{
  max-width:900px;
  margin:0 auto;
  padding:0;
}

.remix-content-group{
  margin-bottom:14px;
  padding:12px 14px;
  background:var(--panel-5);
  border:1px solid var(--line-1);
  border-radius:8px;
}

.remix-content-group label{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--ink-2);
  margin-bottom:8px !important;
}

.remix-content-textarea{
  width:100% !important;
  min-height:140px;
  resize:vertical;
  font-family:monospace;
  font-size:13px;
  line-height:1.5;
  padding:10px;
}

.remix-actions{
  display:flex;
  gap:8px;
  justify-content:flex-start;
  margin:0 0 16px 0;
  padding:10px 14px;
  background:var(--panel-5);
  border:1px solid var(--line-1);
  border-radius:8px;
}

.remix-actions .btn{
  min-width:90px;
  height:32px;
  font-size:12px;
  font-weight:600;
  padding:0 14px;
}

.field-group{
  margin-bottom:20px;
}

.field-group label{
  display:block;
  font-weight:600;
  margin-bottom:8px;
  color:var(--ink-1);
}

.textarea-remix{
  min-height:150px;
  resize:vertical;
  font-family:monospace;
  font-size:13px;
}

.remix-pending-section{
  margin-top:0;
  padding:12px 14px;
  background:var(--panel-5);
  border:1px solid var(--line-1);
  border-radius:8px;
}

.remix-pending-section h4{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:10px;
  color:var(--ink-2);
}

.remix-pending-list{
  margin-bottom:12px;
  max-height:280px;
  overflow-y:auto;
}

.remix-pending-card{
  background:var(--panel-3);
  border:1px solid var(--line-1);
  border-radius:6px;
  padding:10px 12px;
  margin-bottom:8px;
  transition:all .2s ease;
}

.remix-pending-card:hover{
  border-color:var(--blue);
  box-shadow:0 2px 8px rgba(74,124,255,.1);
}

.remix-pending-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  gap:10px;
}

.remix-pending-label{
  font-size:11px;
  font-weight:700;
  color:var(--blue);
  text-transform:uppercase;
  letter-spacing:0.05em;
}

.remix-pending-remove{
  background:var(--panel-1);
  border:1px solid var(--line-1);
  border-radius:4px;
  cursor:pointer;
  font-size:14px;
  padding:4px 8px;
  color:var(--ink-2);
  transition:all .2s ease;
  min-width:32px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.remix-pending-remove:hover{
  background:var(--red);
  border-color:var(--red);
  color:#fff;
}

.remix-pending-preview{
  font-size:13px;
  color:var(--ink-2);
  line-height:1.6;
  font-family:monospace;
  background:var(--panel-1);
  padding:10px;
  border-radius:4px;
  border:1px solid var(--line-1);
}

.remix-empty{
  text-align:center;
  padding:30px 20px;
  color:var(--ink-3);
  font-size:13px;
}

.remix-archive-content{
  max-width:100%;
  margin:0 auto;
  padding:14px 20px;
  width:100%;
  min-width:0;
  overflow-x:hidden;
}

.remix-archive-filters{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:12px;
  margin-bottom:20px;
  padding:12px 16px;
  background:var(--panel-4);
  border:1px solid var(--line-1);
  border-radius:8px;
  min-height:68px;
}

.remix-archive-filter-group{
  display:flex;
  align-items:center;
  gap:6px;
  flex:1;
  min-width:0;
}

.remix-archive-filter-group .remix-group-label{
  white-space:nowrap;
  flex-shrink:0;
}

.remix-archive-filter-mix-type{
  flex-shrink:0;
}

.remix-archive-mix-type-buttons{
  display:flex;
  gap:6px;
}

.remix-archive-mix-type-buttons .btn.active{
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
}

.remix-archive-filter-buttons{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1;
  min-width:0;
}

.remix-archive-select{
  flex:1;
  min-width:0;
  max-width:200px;
}

@media(max-width:900px){
  .remix-archive-filters{
    flex-wrap:wrap;
  }
  .remix-archive-filter-group{
    min-width:140px;
  }
}

.remix-archive-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  max-height:600px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:var(--inset-pad);
  min-width:0;
}

.remix-archive-item{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  background:var(--panel-3);
  border:1px solid var(--line-1);
  border-radius:8px;
  min-height:auto;
  min-width:0;
}

.remix-archive-header{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto auto;
  align-items:center;
  gap:8px;
  min-width:0;
}

.remix-archive-badge{
  font-size:10px;
  font-weight:600;
  padding:4px 8px;
  background:rgba(60,100,160,0.3);
  border:1px solid rgba(106,157,255,0.25);
  border-radius:4px;
  color:var(--blue);
  white-space:nowrap;
  text-transform:uppercase;
}

.remix-archive-badge--still{
  background:rgba(120,80,160,0.25);
  border-color:rgba(160,120,200,0.3);
  color:var(--purple, #8b6bb1);
}

.remix-archive-name{
  font-size:13px;
  font-weight:600;
  color:var(--ink-1);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}

.remix-archive-modality{
  font-size:11px;
  padding:4px 8px;
  background:rgba(106,157,255,0.15);
  border:1px solid rgba(106,157,255,0.2);
  border-radius:4px;
  color:var(--ink-2);
  white-space:nowrap;
}

.remix-archive-actions{
  display:flex;
  gap:6px;
  flex-shrink:0;
}

.remix-archive-item .btn{
  white-space:nowrap;
  padding:6px 10px;
  font-size:12px;
  min-width:auto;
}

.remix-archive-meta{
  display:flex;
  gap:6px;
  align-items:center;
}

.remix-archive-block-type{
  font-size:11px;
  font-weight:600;
  padding:4px 10px;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--line-2);
  border-radius:4px;
  color:var(--ink-2);
  text-transform:uppercase;
}

.remix-archive-preview{
  font-family:'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
  font-size:11.5px;
  line-height:1.5;
  color:var(--ink-2);
  background:rgba(0,0,0,0.2);
  border:1px solid var(--line-2);
  border-radius:4px;
  padding:10px;
  white-space:pre-wrap;
  word-wrap:break-word;
  overflow-wrap:break-word;
  overflow:hidden;
  max-height:110px;
  min-width:0;
}

@media (max-width:1200px){
  .remix-archive-list{
    grid-template-columns:1fr;
  }

  .remix-archive-header{
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "badge modality"
      "name name"
      "actions actions";
    gap:8px;
  }

  .remix-archive-badge{ grid-area:badge; }
  .remix-archive-name{ grid-area:name; }
  .remix-archive-modality{ grid-area:modality; justify-self:end; }
  .remix-archive-actions{ grid-area:actions; justify-self:stretch; }
  .remix-archive-actions .btn{ flex:1; }
}

.remix-archive-card{
  background:var(--panel-1);
  border:1px solid var(--line-1);
  border-radius:8px;
  padding:14px;
  transition:all .2s;
}

.remix-archive-card:hover{
  background:var(--panel-2);
  border-color:var(--line-2);
}

.remix-archive-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

.remix-archive-label{
  font-size:12px;
  font-weight:700;
  color:#3b82f6;
  text-transform:uppercase;
}

.remix-archive-actions{
  display:flex;
  gap:8px;
}

.remix-archive-edit,
.remix-archive-delete{
  background:transparent;
  border:1px solid var(--line-1);
  border-radius:4px;
  padding:6px 10px;
  cursor:pointer;
  font-size:14px;
  transition:all .2s;
}

.remix-archive-edit:hover{
  background:var(--panel-2);
  border-color:#3b82f6;
}

.remix-archive-delete:hover{
  background:var(--panel-2);
  border-color:#ef4444;
}

.remix-archive-preview{
  font-size:13px;
  color:var(--ink-2);
  line-height:1.6;
}

/* Responsive */
@media(max-width:768px){
  .remix-controls-section{
    grid-template-columns: auto 1fr;
    gap:10px;
  }

  .remix-form{
    padding:0;
  }

  .remix-actions{
    flex-direction:column;
    padding:12px 16px;
  }

  .remix-actions .btn{
    width:100%;
    min-width:0;
  }

  .remix-archive-list{
    grid-template-columns:1fr;
  }

/* === Variante Luce (Scene & Luci): stesso layout dei btn-pill del sito === */
.scene-light-variant-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.scene-light-variant-toggle .btn-pill {
  min-width: 72px;
}
.scene-light-variant-toggle .btn-pill.active {
  background: var(--blue) !important;
  color: #fff !important;
  border-color: var(--blue) !important;
}
:root[data-theme="light"] #tab-scene .scene-light-variant-toggle .btn-pill.active {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #fff !important;
}