.ai-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-modal {
  background: white;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-modal);
  padding: var(--sp-6);
  max-width: 880px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

.ai-modal .ai-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.ai-modal .ai-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ai) 0%, var(--ai-2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 800;
}

.ai-modal .ai-title {
  font-weight: 700;
  font-size: var(--fs-xl);
}

.ai-modal .ai-desc {
  font-size: var(--fs-md);
  color: var(--ink-3);
}

.ai-options {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.ai-opt {
  background: var(--bg-soft);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  padding: var(--sp-4);
  cursor: pointer;
}

.ai-opt:hover { border-color: var(--ai); }
.ai-opt.selected { border-color: var(--ai); background: var(--ai-bg); }

.ai-opt-name { font-weight: 700; font-size: var(--fs-md); margin-bottom: var(--sp-3); }

.ai-opt-preview {
  background: white;
  border-radius: var(--r-sm);
  padding: var(--sp-2);
  display: grid;
  gap: 3px;
}

.ai-opt-preview .row { display: flex; gap: 3px; }
.ai-opt-preview .cell { background: var(--border-soft); height: 22px; flex: 1; border-radius: 2px; }
.ai-opt-preview .cell.hero { height: 36px; }

/* Anteprima layout: mini-pagine che leggono come pagine di volantino */
.ai-opt-preview.flyer-spread {
  background: var(--bg-canvas);
  padding: 7px 7px 8px;
  grid-template-columns: 1fr 1fr;
  gap: 2px;                 /* grondaia stretta → spread sfogliabile */
  align-items: stretch;
}
.flyer-page {
  background: #fff;
  border-radius: 2px;
  box-shadow: var(--shadow-sm);
  padding: 0 4px 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.flyer-masthead {
  background: var(--coop-red);
  color: #fff;
  margin: 0 -4px 4px;
  padding: 3px 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.flyer-bug {
  background: #fff; color: var(--coop-red);
  font-weight: 800; font-size: 7px; line-height: 1;
  padding: 2px 4px; border-radius: var(--r-pill); letter-spacing: -.3px;
  flex: none;
}
.flyer-mast-title {
  font-size: 7px; font-weight: 800; letter-spacing: .2px;
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.flyer-grid { display: grid; gap: 2px; flex: 1; }
.flyer-cell {
  position: relative;
  background: #f4f3f1;
  border: 1px solid #e7e5e1;
  border-radius: 2px;
  min-height: 17px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.flyer-cell.hero { min-height: 40px; }
.flyer-cell .fc-name {
  font-size: 6px; font-weight: 700; color: #333;
  text-align: center; padding: 0 2px; line-height: 1.1;
  max-height: 100%; overflow: hidden;
}
.flyer-cell.hero .fc-name { font-size: 8px; }
/* pastiglia prezzo: segnale "volantino" anche a cella vuota */
.flyer-cell::after {
  content: "€";
  position: absolute; right: 2px; bottom: 2px;
  width: 9px; height: 9px;
  background: var(--coop-red); color: #fff;
  font-size: 6px; font-weight: 800; line-height: 9px; text-align: center;
  border-radius: 50%; box-shadow: 0 0 0 1px #fff;
}
.flyer-cell.hero::after { width: 13px; height: 13px; font-size: 8px; line-height: 13px; }
.flyer-pageno {
  align-self: center; margin-top: 3px;
  font-size: 6px; font-weight: 600; color: var(--ink-4);
}

.ai-opt-reason {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin-top: var(--sp-3);
  line-height: 1.4;
}

.ai-actions {
  display: flex;
  gap: var(--sp-3);
  justify-content: flex-end;
}

.ai-actions button {
  padding: var(--sp-3) var(--sp-5);
  border: none;
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
}

.ai-actions button.ghost {
  background: transparent;
  color: var(--ink-3);
}

.ai-actions button.primary {
  background: var(--ai);
  color: white;
}

@keyframes shimmer {
  to { background-position: -200% 0 }
}

@media (prefers-reduced-motion: reduce) {
  .ai-shimmer {
    animation: none !important;
  }
}

/* Backdrop del modale di creazione (separato da .ai-overlay, che l'editor rimuove ai re-render) */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:50; }
.modal-form { display:flex; flex-direction:column; gap:10px; margin:12px 0; }
.modal-form label { display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:700; color:#555; text-transform:uppercase; letter-spacing:.4px; }
.modal-form input, .modal-form select { font:inherit; font-size:13px; padding:7px 9px; border:1px solid #ddd; border-radius:5px; text-transform:none; font-weight:400; }
.modal-form .mf-row { display:flex; gap:10px; }
.modal-form .mf-row label { flex:1; }
.modal-form .mf-chips { display:flex; flex-wrap:wrap; gap:10px; }
.modal-form .mf-chips label { flex-direction:row; align-items:center; gap:5px; text-transform:none; font-weight:500; color:#333; }
.modal-form .mf-fp { display:flex; align-items:center; gap:8px; }
.modal-form .mf-fp span { font-size:11px; font-weight:700; color:#666; }
.modal-form .mf-fp select { width:56px; }
.tb-newpromo, .scorta-add { font-size:11px; font-weight:600; cursor:pointer; border:1px solid #3a3a3a; background:var(--bg-dark-2,#2a2a2a); color:#fff; border-radius:5px; padding:4px 8px; }
.scorta-add { float:right; border-color:#ddd; background:#fff; color:var(--coop-red); }