/* =============================================================================
   Clanksy Marketing Studio — dashboard designer (interna staff)
   Self-contained: NON dipende dal build Tailwind purgato (clanksy-dashboard.css).
   Palette warm dark Krinia. Font self-hosted in ./fonts (CSP font-src 'self').
   ============================================================================= */

/* ---- Font (riuso dei woff2 gia presenti in dashboard/assets/fonts) -------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('./fonts/archivo-400-latin.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('./fonts/archivo-500-latin.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('./fonts/archivo-600-latin.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('./fonts/archivo-700-latin.woff2') format('woff2');}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:600;font-display:swap;src:url('./fonts/unbounded-600-latin.woff2') format('woff2');}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('./fonts/instrument-serif-400-italic-latin.woff2') format('woff2');}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('./fonts/dm-mono-500-latin.woff2') format('woff2');}

:root{
  --bg:#15110e;
  --surface:#1f1a16;
  --raised:#2a2018;
  --raised-2:#332720;
  --text:#fdfaf3;
  --text-2:#e3d8c4;
  --text-3:#a89c8e;
  --border:hsla(35,40%,94%,.10);
  --border-2:hsla(35,40%,94%,.16);
  --border-strong:hsla(35,40%,94%,.26);
  --accent:#d67e67;
  --accent-strong:#c96a55;
  --blush:#f2c8be;
  --success:#7fa67f;
  --danger:#c47b6f;
  --warning:#dcab53;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 10px 40px -12px rgba(0,0,0,.55);
  --ease:cubic-bezier(.32,.72,0,1);
  --sans:'Archivo',ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:'Unbounded',var(--sans);
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  line-height:1.45;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;color:inherit}
::selection{background:var(--accent-strong);color:#fdfaf3}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
[hidden]{display:none !important}

/* ---- Tipo ----------------------------------------------------------------- */
.wordmark{font-family:var(--display);font-weight:600;letter-spacing:-.01em}
.wordmark .ia{font-family:var(--serif);font-style:italic;font-weight:400}
.serif{font-family:var(--serif);font-style:italic}
.mono{font-family:var(--mono)}
.muted{color:var(--text-3)}

/* =============================================================================
   LOGIN
   ============================================================================= */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{
  width:100%;max-width:380px;background:var(--surface);
  border:1px solid var(--border);border-radius:20px;padding:32px 28px;
  box-shadow:var(--shadow);animation:rise 480ms var(--ease)
}
.login-logo{width:46px;height:46px;border-radius:12px;background:var(--bg);
  display:grid;place-items:center;margin-bottom:18px;border:1px solid var(--border)}
.login-logo span{font-family:var(--serif);font-style:italic;font-size:24px;color:var(--blush)}
.login-card h1{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:4px}
.login-card .sub{color:var(--text-3);font-size:13.5px;margin-bottom:22px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--text-3);margin-bottom:6px;font-weight:500}
.input{
  width:100%;background:var(--bg);border:1px solid var(--border-2);
  border-radius:var(--radius-sm);padding:11px 13px;font-size:14.5px;color:var(--text);
  transition:border-color 180ms var(--ease),box-shadow 180ms var(--ease)
}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(214,126,103,.16)}
.input::placeholder{color:var(--text-3)}
.input.code{font-family:var(--mono);letter-spacing:.45em;text-align:center;font-size:20px;padding-left:.45em}

/* =============================================================================
   BOTTONI
   ============================================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--radius-sm);padding:10px 16px;font-size:14px;font-weight:600;
  transition:transform 120ms var(--ease),background 180ms var(--ease),opacity 180ms var(--ease);
  white-space:nowrap;border:1px solid transparent;text-decoration:none
}
a.btn,a.btn:hover{text-decoration:none}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--accent-strong);color:#fdfaf3}
.btn-primary:hover:not(:disabled){background:var(--accent)}
.btn-ghost{background:transparent;border-color:var(--border-2);color:var(--text-2)}
.btn-ghost:hover:not(:disabled){background:var(--raised);border-color:var(--border-strong)}
.btn-subtle{background:var(--raised);color:var(--text-2)}
.btn-subtle:hover:not(:disabled){background:var(--raised-2)}
.btn-block{width:100%}
.btn-sm{padding:7px 12px;font-size:13px}
.btn-danger{background:transparent;border-color:rgba(196,123,111,.4);color:var(--danger)}
.btn-danger:hover:not(:disabled){background:rgba(196,123,111,.12)}
.icon{width:16px;height:16px;flex:none}
.spinner{width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:spin .7s linear infinite;display:inline-block}

/* =============================================================================
   APP SHELL
   ============================================================================= */
.app{min-height:100vh;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--surface) 90%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--border);
  padding:11px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap
}
.topbar .brand{display:flex;align-items:center;gap:11px;margin-right:auto}
.topbar .logo{width:36px;height:36px;border-radius:10px;background:var(--bg);display:grid;place-items:center;border:1px solid var(--border)}
.topbar .logo span{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--blush)}
.topbar .title{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.1}
.topbar .title small{display:block;font-family:var(--sans);font-weight:400;font-size:11px;color:var(--text-3);letter-spacing:0}
.who{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text-3)}
.who .dot{width:7px;height:7px;border-radius:50%;background:var(--success);animation:pulse 2.4s ease-in-out infinite}

.tabs{display:flex;gap:4px;background:var(--surface);border-bottom:1px solid var(--border);padding:0 14px}
.tab{padding:13px 16px;font-size:14px;font-weight:600;color:var(--text-3);border-bottom:2px solid transparent;
  transition:color 160ms var(--ease),border-color 160ms var(--ease)}
.tab:hover{color:var(--text-2)}
.tab.active{color:var(--text);border-bottom-color:var(--accent)}
.tab .count{font-family:var(--mono);font-size:11px;background:var(--raised);color:var(--text-3);
  padding:1px 7px;border-radius:99px;margin-left:7px}

.main{flex:1;max-width:1280px;width:100%;margin:0 auto;padding:18px;padding-bottom:60px}

/* ---- Filtri --------------------------------------------------------------- */
.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.select{
  background:var(--raised);border:1px solid var(--border-2);border-radius:var(--radius-sm);
  padding:8px 30px 8px 12px;font-size:13.5px;color:var(--text);cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23a89c8e' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center
}
.select:focus{outline:none;border-color:var(--accent)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:7px 13px;font-size:13px;font-weight:500;border-radius:99px;background:var(--raised);
  color:var(--text-3);border:1px solid transparent;transition:all 160ms var(--ease)}
.chip:hover{color:var(--text-2)}
.chip.active{background:rgba(214,126,103,.14);color:var(--blush);border-color:rgba(214,126,103,.35)}
.filters .grow{margin-left:auto}

/* =============================================================================
   GRID BOZZE
   ============================================================================= */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;cursor:pointer;transition:transform 200ms var(--ease),border-color 200ms var(--ease),box-shadow 200ms var(--ease);
  display:flex;flex-direction:column
}
.card:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow)}
.thumb{aspect-ratio:4/5;background:var(--raised);position:relative;overflow:hidden;display:grid;place-items:center}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .ph{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-3);font-size:12px;text-align:center;padding:16px}
.thumb .ph svg{width:30px;height:30px;opacity:.5}
.thumb .badge-img{position:absolute;top:8px;right:8px}
.card-body{padding:12px 13px;display:flex;flex-direction:column;gap:7px;flex:1}
.card-biz{font-size:11px;font-weight:600;color:var(--blush);text-transform:uppercase;letter-spacing:.04em}
.card-concept{font-size:13.5px;color:var(--text-2);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:4px}
.card-foot .when{font-size:11px;color:var(--text-3)}

.badge{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:99px;white-space:nowrap}
.badge.pending{background:rgba(220,171,83,.16);color:var(--warning)}
.badge.approved{background:rgba(127,166,127,.16);color:var(--success)}
.badge.published{background:rgba(127,166,127,.22);color:var(--success)}
.badge.rejected{background:rgba(196,123,111,.16);color:var(--danger)}
.badge.neutral{background:var(--raised-2);color:var(--text-3)}
.badge.gen{background:rgba(214,126,103,.16);color:var(--blush)}

/* ---- Stati vuoti / skeleton ---------------------------------------------- */
.empty{text-align:center;padding:60px 20px;color:var(--text-3)}
.empty svg{width:42px;height:42px;opacity:.4;margin-bottom:12px}
.empty p{font-size:14px}
.skel{background:linear-gradient(90deg,var(--raised) 25%,var(--raised-2) 50%,var(--raised) 75%);
  background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--radius)}
.skel.card{height:330px;cursor:default}

/* =============================================================================
   SLIDE-OVER EDITOR
   ============================================================================= */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);z-index:40;
  opacity:0;animation:fade 220ms var(--ease) forwards}
.panel{
  position:fixed;top:0;right:0;bottom:0;width:min(560px,100vw);background:var(--surface);
  border-left:1px solid var(--border);z-index:50;display:flex;flex-direction:column;
  box-shadow:var(--shadow);transform:translateX(100%);animation:slidein 320ms var(--ease) forwards
}
.panel-head{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:2}
.panel-head .x{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--text-3);transition:background 160ms}
.panel-head .x:hover{background:var(--raised);color:var(--text)}
.panel-head h2{font-size:15px;font-weight:600;flex:1}
.panel-body{flex:1;overflow-y:auto;overflow-x:hidden;min-width:0;padding:18px;display:flex;flex-direction:column;gap:18px}
/* panel-body e' un flex column: i figli sono flex item con min-width:auto e potrebbero
   gonfiarsi fino al proprio min-content sfondando il pannello. min-width:0 glielo impedisce
   (root del bug overflow editor: strumenti, note e toggle). */
.panel-body>*{min-width:0;max-width:100%}
.panel-foot{padding:14px 18px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:10px;background:var(--surface)}

.preview{aspect-ratio:4/5;width:100%;max-width:300px;margin:0 auto;border-radius:var(--radius);overflow:hidden;
  background:var(--raised);position:relative;display:grid;place-items:center;flex:none}
.preview img{width:100%;height:100%;object-fit:cover}
.preview .ph{color:var(--text-3);font-size:13px;text-align:center;padding:20px;display:flex;flex-direction:column;gap:10px;align-items:center}
.preview .ph svg{width:34px;height:34px;opacity:.5}
.preview .loading{position:absolute;inset:0;background:rgba(21,17,14,.7);display:grid;place-items:center;gap:10px;color:var(--text-2);font-size:13px}

.row{display:flex;gap:10px;align-items:center}
.row.between{justify-content:space-between}
.meta-line{font-size:12px;color:var(--text-3);display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.meta-line b{color:var(--text-2);font-weight:600}

.lbl{font-size:12px;font-weight:600;color:var(--text-3);margin-bottom:7px;display:flex;justify-content:space-between;align-items:center}
.lbl .ct{font-family:var(--mono);font-size:11px;color:var(--text-3)}
.lbl .ct.over{color:var(--danger)}
.textarea{width:100%;background:var(--bg);border:1px solid var(--border-2);border-radius:var(--radius-sm);
  padding:11px 13px;font-size:14px;line-height:1.5;color:var(--text);resize:vertical;min-height:96px}
.textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(214,126,103,.14)}

.tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.tag{display:inline-flex;align-items:center;gap:5px;background:var(--raised);border:1px solid var(--border-2);
  border-radius:99px;padding:4px 5px 4px 11px;font-size:12.5px;color:var(--text-2);font-family:var(--mono)}
.tag button{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;color:var(--text-3);font-size:14px;line-height:1}
.tag button:hover{background:var(--raised-2);color:var(--danger)}

/* ---- Toggle premium ------------------------------------------------------- */
.toggle-row{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:12px 14px}
.toggle-row .info{flex:1;min-width:0}
.toggle-row .info .t{font-size:13.5px;font-weight:600}
.toggle-row .info .d{font-size:11.5px;color:var(--text-3);margin-top:2px;overflow-wrap:break-word}
.switch{width:44px;height:25px;border-radius:99px;background:var(--raised-2);position:relative;flex:none;transition:background 200ms var(--ease)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:var(--text-2);transition:transform 220ms var(--ease)}
.switch.on{background:var(--accent-strong)}
.switch.on::after{transform:translateX(19px);background:#fdfaf3}

.note{font-size:12px;color:var(--text-3);background:var(--raised);border:1px dashed var(--border-2);
  border-radius:var(--radius-sm);padding:10px 12px;display:flex;gap:9px;align-items:flex-start}
.note svg{width:15px;height:15px;flex:none;margin-top:1px;color:var(--accent)}
.note>span{min-width:0;overflow-wrap:break-word}
.note.ok{color:var(--text-2);background:rgba(127,166,127,.10);border-color:rgba(127,166,127,.4)}
.note.ok svg{color:var(--success)}
.note.ok a{color:var(--success);font-weight:600}

/* Pubblicazione delegata */
.btn-publish{background:var(--accent-strong);color:#fdfaf3}
.btn-publish:hover:not(:disabled){background:var(--accent)}
.btn-publish .icon{width:15px;height:15px;margin-right:6px}
.badge.can-pub{background:rgba(214,126,103,.18);color:var(--accent)}
.pub-preview{aspect-ratio:4/5;width:100%;max-width:220px;margin:0 auto;border-radius:var(--radius);overflow:hidden;background:var(--raised);flex:none}
.pub-preview img{width:100%;height:100%;object-fit:cover;display:block}
.pub-preview.ph{display:grid;place-items:center;color:var(--text-3);font-size:12px}
.pub-q{font-size:14px;color:var(--text);margin:0;text-align:center}
.pub-cap{font-size:12.5px;color:var(--text-3);background:var(--raised);border-radius:var(--radius-sm);
  padding:10px 12px;max-height:90px;overflow:auto;white-space:pre-wrap}

/* =============================================================================
   STILI (Recraft)
   ============================================================================= */
.style-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:12px}
.style-card .sc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.style-card .sc-name{font-size:14.5px;font-weight:600}
.style-card .sc-meta{font-size:11.5px;color:var(--text-3);font-family:var(--mono);margin-top:3px;word-break:break-all}
.style-card .sc-actions{display:flex;gap:8px;flex-wrap:wrap}
/* Sezione Logo nelle card Stili */
.style-card .sc-logo{border-top:1px solid var(--border);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.style-card .sc-logo-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.style-card .sc-logo-label{font-size:12.5px;font-weight:600;color:var(--text-2)}
.style-card .sc-logo-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.style-card .sc-logo-thumb{width:40px;height:40px;object-fit:contain;background:var(--raised,#221c18);border:1px solid var(--border);border-radius:8px;padding:3px}
.style-card .sc-logo-row .select{width:auto;min-width:110px}
.style-card .sc-logo-empty{font-size:12.5px}
.style-card .sc-logo-hint{font-size:11px;margin:0;line-height:1.4}
.grid-styles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}

.dropzone{border:1.5px dashed var(--border-2);border-radius:var(--radius-sm);padding:22px;text-align:center;
  color:var(--text-3);font-size:13px;transition:border-color 160ms,background 160ms;cursor:pointer}
.dropzone:hover,.dropzone.drag{border-color:var(--accent);background:rgba(214,126,103,.06);color:var(--text-2)}
.dropzone svg{width:28px;height:28px;opacity:.5;margin-bottom:8px}
.ref-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px}
.ref-thumb{aspect-ratio:1;border-radius:8px;overflow:hidden;position:relative;background:var(--raised)}
.ref-thumb img{width:100%;height:100%;object-fit:cover}
.ref-thumb button{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:rgba(21,17,14,.75);color:#fff;display:grid;place-items:center;font-size:13px}
.ref-thumb .up{position:absolute;inset:0;display:grid;place-items:center;background:rgba(21,17,14,.6)}

/* =============================================================================
   MODALE generica (crea stile / prova prompt / set-active)
   ============================================================================= */
.modal-wrap{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;
  background:rgba(0,0,0,.55);backdrop-filter:blur(2px);opacity:0;animation:fade 200ms var(--ease) forwards}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:18px;width:100%;max-width:460px;
  max-height:90vh;overflow-y:auto;box-shadow:var(--shadow);animation:rise 320ms var(--ease)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border)}
.modal-head h3{font-size:15px;font-weight:600}
.modal-body{padding:18px;display:flex;flex-direction:column;gap:14px}
.modal-foot{padding:14px 18px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:flex-end}
.modal-foot .btn{min-width:0}
/* Modale con molti bottoni (es. Asset Studio): griglia 2 colonne ordinata, azioni
   secondarie a coppie e primario full-width in fondo. Niente bottoni tagliati o spaiati. */
.modal-foot.multi{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}
.modal-foot.multi .btn{width:100%;margin:0;justify-content:center}
.modal-foot.multi .btn-primary{grid-column:1 / -1}

/* =============================================================================
   TOAST
   ============================================================================= */
.toasts{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center;width:max-content;max-width:92vw}
.toast{background:var(--raised-2);border:1px solid var(--border-2);border-radius:var(--radius-sm);padding:11px 16px;
  font-size:13.5px;color:var(--text);box-shadow:var(--shadow);display:flex;gap:9px;align-items:center;animation:rise 260ms var(--ease)}
.toast.ok{border-color:rgba(127,166,127,.4)}
.toast.ok svg{color:var(--success)}
.toast.err{border-color:rgba(196,123,111,.4)}
.toast.err svg{color:var(--danger)}
.toast svg{width:16px;height:16px;flex:none}

.err-text{color:var(--danger);font-size:12.5px;margin-top:8px;min-height:16px}

/* =============================================================================
   ANIMAZIONI
   ============================================================================= */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes fade{to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes slidein{to{transform:translateX(0)}}
@keyframes shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width:640px){
  .main{padding:14px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .panel{width:100vw}
  .ref-grid{grid-template-columns:repeat(3,1fr)}
  .topbar .title small{display:none}
}

/* ---- Strumenti immagine (editor bozza) ---------------------------------- */
.tools{margin-top:14px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px}
.tools-title{font-size:12px;color:var(--text-3);font-weight:600;margin-bottom:10px;text-transform:uppercase;letter-spacing:.04em}
/* 2 colonne. white-space:normal sul .tool (sotto) e' necessario perche' i <button>
   non mandano a capo il testo di default. minmax(0,1fr) evita che il contenuto gonfi le
   tracce oltre il contenitore. */
.tools-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
/* white-space:normal: i <button> hanno nowrap di default nel browser, quindi le scritte
   degli strumenti non andavano a capo e ogni card pretendeva la sua larghezza piena,
   facendo finire i 7 strumenti su una sola riga che sfondava il pannello. */
.tool{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  white-space:normal;overflow-wrap:break-word;
  background:var(--raised);border:1px solid var(--border-2);border-radius:var(--radius-sm);
  padding:9px 11px;color:var(--text);cursor:pointer;transition:background .15s,border-color .15s}
.tool:hover:not(:disabled){background:var(--raised-2);border-color:var(--border-strong)}
.tool:disabled{opacity:.5;cursor:not-allowed}
.tool-name{font-size:13px;font-weight:600}
.tool-hint{font-size:11px;color:var(--text-3)}
.tool-warn{border-color:hsla(43,66%,60%,.35)}
.tool-warn .tool-name{color:var(--warning)}
.tools-note{font-size:11px;color:var(--text-3);margin-top:10px;overflow-wrap:break-word}

/* ---- Canvas maschera inpaint -------------------------------------------- */
.inpaint-stage{position:relative;width:100%;max-width:340px;margin:0 auto 12px;border-radius:var(--radius-sm);
  overflow:hidden;background:var(--bg);border:1px solid var(--border-2);line-height:0;flex:none}
.inpaint-stage img{width:100%;display:block}
.inpaint-stage canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;
  opacity:.5;touch-action:none}
.inpaint-ctrl{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.inpaint-ctrl .ip-brush{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-3);flex:1}
.inpaint-ctrl .ip-brush input{flex:1;accent-color:var(--accent)}

/* =============================================================================
   VISTA SALONI (overview bozze) + dettaglio
   ============================================================================= */
.section-hint{font-size:13px;color:var(--text-3);margin-bottom:14px}
.grid-salons{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.salon-card{display:flex;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px;cursor:pointer;align-items:center;transition:transform 180ms var(--ease),border-color 180ms var(--ease),box-shadow 180ms var(--ease)}
.salon-card:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow)}
.salon-thumb{width:70px;height:88px;flex:none;border-radius:var(--radius-sm);overflow:hidden;background:var(--raised);display:grid;place-items:center}
.salon-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.salon-thumb .ph svg{width:26px;height:26px;opacity:.4;color:var(--text-3)}
.salon-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.salon-name{font-size:15px;font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.salon-counts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sc-total{font-size:12px;color:var(--text-3)}
.salon-pend{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:99px;
  background:rgba(220,171,83,.16);color:var(--warning)}
.salon-pend.done{background:rgba(127,166,127,.16);color:var(--success)}
.salon-bar{display:flex;height:6px;border-radius:99px;overflow:hidden;background:var(--raised-2)}
.salon-bar .seg{display:block;min-width:0}
.salon-bar .seg.pend{background:var(--warning)}
.salon-bar .seg.appr{background:var(--success)}
.salon-bar .seg.pub{background:var(--accent)}
.salon-bar .seg.empty{background:var(--raised-2)}
.detail-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.detail-head h2{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.01em}
#filter-status{margin-bottom:16px}

/* ---- Azioni immagine nell'editor ----------------------------------------- */
.img-actions{display:flex;gap:8px;justify-content:center;margin-top:-4px}
.link-btn{font-size:12px;color:var(--accent);font-weight:600;background:none;border:none;padding:0}
.link-btn:hover{color:var(--blush);text-decoration:underline}

/* ---- Fullscreen immagine -------------------------------------------------- */
.fs-overlay{position:fixed;inset:0;z-index:90;background:rgba(8,6,5,.92);display:grid;place-items:center;padding:24px;
  cursor:zoom-out;opacity:0;animation:fade 200ms var(--ease) forwards}
.fs-overlay img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;box-shadow:var(--shadow)}
.fs-close{position:fixed;top:16px;right:18px;width:40px;height:40px;border-radius:50%;background:rgba(42,32,24,.8);
  color:var(--text);font-size:24px;line-height:1;display:grid;place-items:center;border:1px solid var(--border-2)}
.fs-close:hover{background:var(--raised-2)}

/* =============================================================================
   TAB STUDIO — generazione immagini e video fal.ai
   ============================================================================= */

/* Layout principale */
.studio-root{display:flex;flex-direction:column;gap:24px}
.studio-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.studio-section-title{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);margin-bottom:14px}
.studio-section-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.studio-section-title-row .studio-section-title{margin-bottom:0}

/* Top bar salone */
.studio-top-bar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px}
.studio-biz-wrap{display:flex;flex-direction:column;gap:8px}
.studio-biz-label{font-size:12px;font-weight:600;color:var(--text-3)}
.studio-biz-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.studio-biz-badge{font-size:11px}

/* Picker modello */
.studio-model-picker{display:flex;flex-direction:column;gap:16px}
.studio-model-group{}
.studio-model-group-label{font-size:12px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.studio-async-badge{font-size:10px;padding:2px 7px}
.studio-model-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.studio-model-card{
  display:flex;flex-direction:column;gap:6px;text-align:left;background:var(--bg);
  border:1px solid var(--border-2);border-radius:var(--radius-sm);padding:12px 14px;
  cursor:pointer;transition:border-color 160ms var(--ease),background 160ms var(--ease);color:var(--text)
}
.studio-model-card:hover:not(:disabled){background:var(--raised);border-color:var(--border-strong)}
.studio-model-card.selected{border-color:var(--accent);background:rgba(214,126,103,.08)}
.smc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.smc-name{font-size:13.5px;font-weight:600}
.smc-price{font-size:11px;font-family:var(--mono);color:var(--text-3);white-space:nowrap}
.smc-what{font-size:12px;color:var(--text-3);line-height:1.45}

/* Form generazione */
.studio-source-wrap{margin-bottom:14px}
.studio-source-label{font-size:12px;font-weight:600;color:var(--text-3);margin-bottom:7px}
.studio-source-preview{position:relative;width:100%;max-width:200px;margin-top:8px;display:flex;flex-direction:column;gap:6px}
.studio-source-preview img{width:100%;border-radius:var(--radius-sm);object-fit:cover;aspect-ratio:1;border:1px solid var(--border-2)}
.studio-source-uploading{position:absolute;inset:0;display:grid;place-items:center;background:rgba(21,17,14,.6);border-radius:var(--radius-sm)}
.studio-ct{font-family:var(--mono);font-size:11px;color:var(--text-3);float:right}
.studio-video-opts{display:flex;gap:12px;margin-bottom:12px}
.studio-cost-est{font-size:13px;color:var(--text-3);margin-bottom:10px;font-family:var(--mono)}
.studio-gen-row{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.studio-gen-result{margin-top:10px;width:100%}
.studio-result-wrap{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;display:flex;flex-direction:column;gap:10px}
.studio-result-img{width:100%;max-width:280px}
.studio-result-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Card job video in lavorazione */
.studio-jobs-list{display:flex;flex-direction:column;gap:8px}
.studio-job-card{background:var(--bg);border:1px solid var(--border-2);border-radius:var(--radius-sm);padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.studio-job-card.failed{border-color:rgba(196,123,111,.35);background:rgba(196,123,111,.05)}
.studio-job-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.studio-job-model{font-size:13px;font-weight:600}
.studio-job-status{font-size:12px;display:flex;align-items:center;gap:6px;color:var(--text-3)}
.studio-job-status.spinning{color:var(--warning)}
.studio-job-status.done{color:var(--success)}
.studio-job-status.failed{color:var(--danger)}
.studio-job-prompt{font-size:12.5px;color:var(--text-2);line-height:1.4}
.studio-job-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.studio-job-time{font-size:11px;color:var(--text-3)}
.studio-job-cost{font-size:11px;font-family:var(--mono);color:var(--text-3)}

/* Grid libreria asset */
.studio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.studio-asset-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;cursor:pointer;transition:transform 200ms var(--ease),border-color 200ms var(--ease),box-shadow 200ms var(--ease);
  display:flex;flex-direction:column}
.studio-asset-card:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow)}
.studio-asset-thumb{aspect-ratio:1;background:var(--raised);overflow:hidden;display:grid;place-items:center;position:relative}
.studio-asset-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.studio-asset-thumb.video-thumb img{width:100%;height:100%;object-fit:cover}
.video-play-overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.3)}
.video-play-overlay svg{width:36px;height:36px;color:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.studio-asset-thumb.video-ph,.studio-asset-thumb.img-ph{color:var(--text-3)}
.studio-asset-thumb.video-ph svg,.studio-asset-thumb.img-ph svg{width:32px;height:32px;opacity:.4}
.studio-asset-info{padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.studio-asset-model{font-size:10.5px;color:var(--text-3);font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.studio-asset-cost{font-size:11px;font-family:var(--mono);color:var(--text-2)}
.studio-asset-time{font-size:11px;color:var(--text-3)}
.studio-asset-label{font-size:12px;color:var(--blush);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Modal dettaglio asset */
.studio-asset-media{width:100%;margin-bottom:12px}
.studio-asset-media img,.studio-asset-media video{width:100%;border-radius:var(--radius-sm);display:block;max-height:360px;object-fit:contain}
.studio-asset-prompt-full{font-size:13px;color:var(--text-2);background:var(--bg);border-radius:var(--radius-sm);padding:10px 12px;line-height:1.5;margin-bottom:10px}
.studio-asset-meta{font-size:12.5px;color:var(--text-3);display:flex;flex-direction:column;gap:4px}
.studio-asset-meta b{color:var(--text-2);font-weight:600}

/* Backend attivazione note */
.studio-backend-note{border-color:rgba(220,171,83,.4);color:var(--warning)}
.studio-backend-note svg{color:var(--warning)}

/* Responsive */
@media (max-width:640px){
  .studio-model-cards{grid-template-columns:1fr 1fr}
  .studio-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .studio-video-opts{flex-direction:column}
}

/* =============================================================================
   TAB MODELLI — catalogo (mantenuto per compatibilita')
   ============================================================================= */
.cat-block{margin-bottom:26px}
.cat-head{margin-bottom:12px}
.cat-head h3{font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:-.01em}
.cat-head p{font-size:12.5px;color:var(--text-3);margin-top:3px}
.models-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.model-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:7px}
.mc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mc-name{font-size:14px;font-weight:600}
.mc-slug{font-size:11px;color:var(--text-3);word-break:break-all}
.mc-what{font-size:13px;color:var(--text-2);line-height:1.45}
.mc-when{font-size:12.5px;color:var(--text-3);line-height:1.45;border-top:1px solid var(--border);padding-top:7px;margin-top:1px}
.mc-when span{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);margin-right:6px}

/* =============================================================================
   TAB GUIDA
   ============================================================================= */
#guide-content{max-width:760px}
.guide-hero{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:22px}
.guide-hero h2{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.guide-hero p{font-size:14px;color:var(--text-2);line-height:1.6}
.guide-sec{margin-bottom:26px}
.guide-sec h3{font-family:var(--display);font-size:15px;font-weight:600;margin-bottom:12px;letter-spacing:-.01em}
.guide-step{display:flex;gap:12px;margin-bottom:12px;align-items:flex-start}
.gs-n{flex:none;width:26px;height:26px;border-radius:50%;background:rgba(214,126,103,.16);color:var(--blush);
  font-size:13px;font-weight:700;display:grid;place-items:center;font-family:var(--mono)}
.gs-t{font-size:14px;font-weight:600;margin-bottom:2px}
.gs-b{font-size:13px;color:var(--text-3);line-height:1.55}
.guide-list{list-style:none;display:flex;flex-direction:column;gap:9px}
.guide-list li{font-size:13.5px;color:var(--text-2);line-height:1.55;padding-left:18px;position:relative}
.guide-list li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.guide-list li b{color:var(--text)}
.guide-list li i{color:var(--text-3);font-style:normal;font-weight:600}
.guide-fam{font-size:13.5px;font-weight:600;color:var(--text);margin:16px 0 8px}
.guide-fam:first-child{margin-top:0}
.guide-fam .muted{font-weight:400;font-size:12.5px}

/* === Workbench "Modo Brand" (Studio) === */
.studio-brand-toggle{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;margin-bottom:14px;
  background:var(--raised);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer}
.studio-brand-toggle input{width:16px;height:16px;accent-color:var(--blush);flex:none}
.studio-brand-toggle .sbt-label{font-weight:600;font-size:13px;color:var(--text-2)}
.studio-brand-toggle .sbt-hint{font-size:12px;color:var(--text-3)}
.studio-wb{display:flex;flex-direction:column;gap:14px}
.studio-wb-panel{background:var(--raised);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px}
.studio-wb-ptitle{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wb-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wb-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.wb-check{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--text-2);cursor:pointer;margin-top:4px}
.wb-check input{accent-color:var(--blush);flex:none}
.wb-check-hint{color:var(--text-3);font-size:11.5px}
.wb-badges{display:inline-flex;gap:6px;flex-wrap:wrap}
.wb-prompt{font-family:var(--mono,ui-monospace,monospace);font-size:12px;line-height:1.5}
.wb-prompt-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.wb-link{font-size:12.5px;color:var(--blush);cursor:pointer;text-decoration:none}
.wb-link:hover{text-decoration:underline}
.wb-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.wb-ov-controls{margin-top:12px}
.wb-color{width:100%;height:38px;padding:2px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer}
.wb-note{font-size:11.5px;margin-top:10px;line-height:1.45}
/* Stage overlay (anteprima live) */
.studio-ov-figure{position:relative;width:100%;max-width:340px;margin:0 auto;aspect-ratio:4/5;border-radius:14px;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.28)}
.studio-ov-figure img{width:100%;height:100%;object-fit:cover;display:block}
/* Logo overlay: selettore piu' specifico per battere la regola img sopra; nascosto finche' applyOverlayLive non lo mostra (niente flash di img rotta) */
.studio-ov-figure img.studio-ov-logo{display:none;position:absolute;width:18%;height:auto;object-fit:contain;pointer-events:none;z-index:3;filter:drop-shadow(0 1px 4px rgba(0,0,0,.42))}
.studio-ov-logo.logo-top-left{top:5%;left:5%}
.studio-ov-logo.logo-top-right{top:5%;right:5%}
.studio-ov-logo.logo-bottom-left{bottom:5%;left:5%}
.studio-ov-logo.logo-bottom-right{bottom:5%;right:5%}
.wb-logo-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wb-logo-thumb{width:34px;height:34px;object-fit:contain;background:var(--raised,#221c18);border-radius:6px;padding:2px}
.studio-ov-scrim{position:absolute;left:0;right:0;height:48%;pointer-events:none}
.studio-ov-scrim.pos-top{top:0}
.studio-ov-scrim.pos-center{top:26%}
.studio-ov-scrim.pos-bottom{bottom:0}
.studio-ov-cap{position:absolute;left:22px;right:22px;color:#F5F0E7;pointer-events:none}
.studio-ov-cap.pos-top{top:20px}
.studio-ov-cap.pos-center{top:50%;transform:translateY(-50%)}
.studio-ov-cap.pos-bottom{bottom:20px}
.studio-ov-kicker{font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;opacity:.95}
.studio-ov-rule{width:32px;height:1px;background:currentColor;opacity:.7;margin:10px 0}
.studio-ov-head{font-size:27px;line-height:1.07;font-weight:500;text-shadow:0 1px 12px rgba(20,26,18,.3)}
@media (max-width:560px){ .wb-grid3{grid-template-columns:1fr 1fr} }

/* =============================================================================
   TAB "CREA" — 3 colonne: SX salone+categoria, CENTRO immagini, DX modelli
   ============================================================================= */
.crea-shell{display:grid;grid-template-columns:230px minmax(0,1fr) 360px;gap:22px;align-items:start}

/* SX: salone + nuova + categorie (sticky) */
.crea-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px;min-width:0}
.crea-new-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.crea-new-btn .icon{width:16px;height:16px}
.crea-cat{display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:8px}
.crea-cat-label{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);padding:7px 10px 9px}
.crea-cat-item{display:block;width:100%;text-align:left;padding:9px 11px;font-size:13.5px;font-weight:500;color:var(--text-2);border-radius:var(--radius-sm);transition:background 140ms var(--ease),color 140ms var(--ease)}
.crea-cat-item:hover{background:var(--raised);color:var(--text)}
.crea-cat-item.active{background:rgba(214,126,103,.14);color:var(--blush)}

/* CENTRO: immagini protagoniste (scroll naturale di pagina, niente clip) */
.crea-main{min-width:0;display:flex;flex-direction:column;gap:16px}
.crea-main-head h2{font-family:var(--display);font-size:19px;font-weight:600}
.crea-lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:14px}
.crea-lib .empty{padding:48px 16px;grid-column:1/-1}
.crea-lib .skel{aspect-ratio:4/5;border-radius:var(--radius-sm)}
.crea-lib-card{cursor:pointer;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border);background:var(--surface);transition:border-color 160ms var(--ease),transform 160ms var(--ease)}
.crea-lib-card:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.crea-lib-card.is-selected{border-color:var(--blush);box-shadow:0 0 0 1px var(--blush)}
.crea-lib-thumb{position:relative;aspect-ratio:4/5;background:var(--raised);display:grid;place-items:center;overflow:hidden}
.crea-lib-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.crea-lib-thumb .ph{color:var(--text-3);opacity:.5}
.crea-lib-thumb .ph svg{width:30px;height:30px}
.crea-lib-badge{position:absolute;top:7px;left:7px;font-size:10px;padding:3px 7px;backdrop-filter:blur(6px)}
.crea-lib-play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;pointer-events:none}
.crea-lib-play svg{width:32px;height:32px;filter:drop-shadow(0 1px 4px rgba(0,0,0,.5))}
.crea-lib-when{font-size:11px;color:var(--text-3);padding:7px 9px}

/* DX: modelli (sfoglia) o proprieta' design (editor) — card sticky con scroll */
.crea-aside{position:sticky;top:96px;max-height:calc(100vh - 112px);overflow-y:auto;overflow-x:hidden;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;min-width:0}
.crea-aside:empty{display:none}
.crea-aside-head{margin-bottom:12px}
.crea-aside-head h3{font-family:var(--display);font-size:15px;font-weight:600}
.crea-aside .studio-model-cards{grid-template-columns:1fr}
.crea-aside .crea-ov-panel{background:transparent;border:0;padding:0}

/* Head editor (back + titolo + badge) */
.crea-detail-head{display:flex;align-items:flex-start;gap:12px}
.crea-detail-head h2{font-family:var(--display);font-size:18px;font-weight:600}
.crea-head-titles{flex:1;min-width:0}
.crea-detail-sub{font-size:12.5px;color:var(--text-3);margin-top:4px;line-height:1.45}
.crea-back{flex-shrink:0;margin-top:2px}

/* Vista generazione: blocchi piatti nel pannello destro */
.crea-gen-block{margin-bottom:22px}
.crea-gen-block:last-child{margin-bottom:0}
.crea-gen-block .studio-section-title{margin-bottom:12px}

/* Onboarding senza salone */
.crea-onboard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:72px 24px;color:var(--text-3)}
.crea-onboard svg{width:46px;height:46px;opacity:.35;margin-bottom:6px}
.crea-onboard h2{font-family:var(--display);font-size:18px;font-weight:600;color:var(--text-2)}
.crea-onboard p{font-size:13px;max-width:400px;line-height:1.5}

/* Editor: stage immagine (centro) + contenuto del post sotto.
   NB: lo stage NON e' sticky: in colonna singola la caption gli scorrerebbe
   sotto sovrapponendosi. Scorre con il resto del contenuto centrale. */
.crea-ed-stage{display:flex;flex-direction:column;gap:12px}
.crea-ed-stage .studio-ov-figure{max-width:380px;margin:0}
.crea-ed-content{display:flex;flex-direction:column;gap:16px}
.crea-stage .crea-stage-busy{position:absolute;inset:0;display:none;place-items:center;background:rgba(20,16,12,.55);z-index:4}
.crea-stage.is-busy .crea-stage-busy{display:grid}
.crea-ov-panel{background:var(--raised);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px}
.crea-ov-panel .wb-ov-controls{margin-top:0}
.crea-actions{display:flex;flex-wrap:wrap;gap:8px}
.crea-foot{display:flex;flex-wrap:wrap;gap:10px;padding-top:14px;border-top:1px solid var(--border)}
.crea-note{font-size:12px;line-height:1.45}
.crea-media{width:100%;max-width:380px;border-radius:14px;overflow:hidden;background:var(--raised)}
.crea-media video{width:100%;display:block}
.crea-media.ph{aspect-ratio:4/5;display:grid;place-items:center;color:var(--text-3);font-size:12.5px}
.crea-inline{display:flex;gap:8px;align-items:center}
.crea-inline .input{flex:1}
.crea-prompt{background:var(--raised);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;font-size:12.5px}
.crea-prompt summary{cursor:pointer;color:var(--text-3);font-weight:600}
.crea-prompt>div{margin-top:8px;color:var(--text-2);line-height:1.5;white-space:pre-wrap}

/* Responsive */
@media (max-width:1160px){
  .crea-shell{grid-template-columns:200px minmax(0,1fr) 320px;gap:16px}
}
@media (max-width:980px){
  .crea-shell{grid-template-columns:190px minmax(0,1fr)}
  .crea-aside{grid-column:1 / -1;position:static;max-height:none}
  .crea-aside .studio-model-cards{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}
@media (max-width:680px){
  .crea-shell{grid-template-columns:1fr}
  .crea-side{position:static;top:auto}
  .crea-lib{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}