/* =========================================================================
   Mockup · Modal de geração de mídia (split-panel desktop / bottom-sheet mobile)
   Tokens em ../../../../assets/css/tokens/livro.css
   Estados controlados via body[data-state="idle|empty|loading|result|error"]
   Viewport simulado via body[data-viewport="desktop|mobile"]
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100dvh;
  background:var(--paper-cave);
  color:var(--fg);
  font-family:var(--font-body);font-size:var(--text-md);line-height:var(--lead-relaxed);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
button{font-family:inherit}

/* ===== Demo bar (controles do mockup) ===== */
.demo-bar{
  position:sticky;top:0;z-index:200;
  background:#1C1C1A;color:var(--paper);
  padding:var(--space-3) var(--space-4);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;
  border-bottom:1px solid #2A2A26;
}
.demo-bar__brand{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm);font-weight:600}
.demo-bar__brand-logo{height:24px;width:auto;filter:brightness(0) invert(1)}
.demo-bar__brand-meta{opacity:.6;font-weight:400;font-size:var(--text-xs);font-family:var(--font-mono)}
.demo-bar__group{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.demo-bar__label{font-size:10px;letter-spacing:var(--track-widest);text-transform:uppercase;opacity:.5;margin-right:var(--space-2)}
.state-chip,.vp-chip{
  font-size:11px;font-weight:600;letter-spacing:var(--track-wide);text-transform:uppercase;
  padding:6px 12px;border-radius:var(--radius-pill);
  background:transparent;border:1px solid #3a3a36;color:var(--paper);
  cursor:pointer;transition:all var(--dur-fast);
}
.state-chip:hover,.vp-chip:hover{border-color:var(--sage-soft);color:var(--sage-soft)}
.state-chip.is-active,.vp-chip.is-active{background:var(--sage-soft);color:#1C1C1A;border-color:var(--sage-soft)}

/* ===== Background grid (preview do contexto) ===== */
.bg-grid{
  padding:var(--space-6) var(--space-8);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);
  opacity:.35;filter:blur(1px);pointer-events:none;
  max-width:1400px;margin:0 auto;
}
.bg-card{
  background:var(--paper);border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);
  padding:var(--space-4);min-height:240px;
}
.bg-card[data-type="org"]{border-left:3px solid var(--sage)}
.bg-card[data-type="ads"]{border-left:3px solid #C9A87C}

/* ===== Modal overlay ===== */
.modal-overlay{
  position:fixed;inset:0;z-index:100;
  background:rgba(28,28,26,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  padding:var(--space-4);
}

/* ===== Modal shell (split-panel desktop) ===== */
.modal{
  width:min(1080px, 96vw);
  height:min(680px, 90dvh);
  background:var(--paper);
  border-radius:var(--radius-lg);
  border:1px solid var(--line-soft);
  box-shadow:var(--shadow-page);
  display:grid;
  grid-template-rows:auto 1fr auto;
  overflow:hidden;
}

/* ===== Header ===== */
.modal__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-3) var(--space-5);
  background:var(--paper-warm);
  border-bottom:1px solid var(--line-soft);
}
.modal__head-card{display:flex;align-items:center;gap:var(--space-3);min-width:0;flex:1}
.modal__card-thumb{
  width:32px;height:48px;border-radius:6px;flex-shrink:0;
  background:linear-gradient(135deg,#3a3a36,#1C1C1A);
  color:var(--sage-soft);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;
}
.modal__card-info{min-width:0;display:flex;flex-direction:column;gap:2px}
.modal__card-badge{
  font-size:10px;letter-spacing:var(--track-widest);text-transform:uppercase;
  color:var(--accent-deep);font-weight:700;
}
.modal__title{
  font-family:var(--font-display);font-weight:400;font-size:var(--text-lg);
  margin:0;line-height:var(--lead-snug);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.modal__title em{color:var(--fg-soft);font-style:italic;font-weight:400}
.modal__head-meta{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0}
.modal__esc{
  font-family:var(--font-mono);font-size:11px;color:var(--fg-softer);
  border:1px solid var(--line);padding:2px 6px;border-radius:4px;
}
.modal__close{
  width:32px;height:32px;border-radius:50%;
  background:transparent;border:1px solid transparent;
  font-size:20px;color:var(--fg-soft);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--dur-fast);
}
.modal__close:hover{background:var(--paper-deep);border-color:var(--line)}

/* ===== Body (split: gallery + forja) ===== */
.modal__body{
  display:grid;
  grid-template-columns:320px 1px 1fr;
  min-height:0;
  overflow:hidden;
}
.modal__divisor{
  background:linear-gradient(180deg, transparent, var(--sand) 12%, var(--sand) 88%, transparent);
}

/* ===== Gallery (left panel) ===== */
.modal__gallery{
  display:flex;flex-direction:column;
  background:var(--paper-warm);
  min-width:0;overflow:hidden;
}
.gallery__head{
  padding:var(--space-4) var(--space-4) var(--space-2);
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);
}
.gallery__eyebrow{
  font-size:10px;letter-spacing:var(--track-widest);text-transform:uppercase;
  color:var(--accent-deep);font-weight:700;margin:0;
}
.gallery__count{
  font-size:11px;color:var(--fg-softer);font-family:var(--font-mono);
}
.gallery__search{
  margin:0 var(--space-4) var(--space-3);
  font-family:var(--font-body);font-size:12px;
  padding:7px 10px;border-radius:var(--radius-pill);
  border:1px solid var(--line-soft);background:var(--paper);
  color:var(--fg);
}
.gallery__search:focus{outline:none;border-color:var(--accent)}
.gallery__grid{
  list-style:none;margin:0;padding:0 var(--space-4);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);
  overflow-y:auto;flex:1;
}
.gallery__grid::-webkit-scrollbar{width:4px}
.gallery__grid::-webkit-scrollbar-track{background:transparent}
.gallery__grid::-webkit-scrollbar-thumb{background:var(--sand-soft);border-radius:2px}

.gallery__item{
  position:relative;cursor:pointer;
  border-radius:8px;overflow:hidden;
  border:2px solid transparent;
  transition:transform var(--dur-fast),border-color var(--dur-fast),box-shadow var(--dur-fast);
}
.gallery__item:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.gallery__item.is-in-use{border-color:var(--accent)}
.gallery__item.is-ref{border-color:var(--accent);box-shadow:0 0 0 3px rgba(92,143,122,.18)}
.gallery__visual{
  position:relative;
  background:linear-gradient(135deg,#EFE6CE,#E3D8C8);
  display:flex;align-items:center;justify-content:center;
  color:var(--fg-softer);
}
.gallery__visual[data-ar="9/16"]{aspect-ratio:9/16}
.gallery__visual[data-ar="1/1"]{aspect-ratio:1/1}
.gallery__hint{
  font-family:var(--font-mono);font-size:10px;
  background:rgba(255,255,255,.78);color:var(--fg-soft);
  padding:2px 6px;border-radius:var(--radius-pill);
}
.gallery__used{
  position:absolute;top:6px;left:6px;
  font-size:9px;letter-spacing:var(--track-wide);text-transform:uppercase;font-weight:700;
  background:var(--accent);color:var(--paper);
  padding:2px 6px;border-radius:4px;
}
.gallery__ref-badge{
  position:absolute;top:6px;left:6px;
  font-size:9px;letter-spacing:var(--track-wide);text-transform:uppercase;font-weight:700;
  background:var(--accent-deep);color:var(--paper);
  padding:2px 6px;border-radius:4px;
}
.gallery__item-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(28,28,26,.7), transparent 60%);
  opacity:0;transition:opacity var(--dur-fast);
  display:flex;align-items:flex-end;justify-content:center;gap:6px;
  padding:8px;
}
.gallery__item:hover .gallery__item-overlay{opacity:1}
.gallery__action{
  font-size:10px;font-weight:700;letter-spacing:var(--track-wide);text-transform:uppercase;
  background:rgba(255,255,255,.92);color:var(--ink);
  padding:3px 6px;border-radius:4px;cursor:pointer;border:none;
}
.gallery__caption{
  font-family:var(--font-mono);font-size:10px;color:var(--fg-softer);
  margin:4px 0 0;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gallery__filters{
  display:flex;gap:6px;padding:var(--space-3) var(--space-4);
  border-top:1px solid var(--line-soft);
}
.gallery__filter{
  font-size:10px;font-weight:600;letter-spacing:var(--track-wide);text-transform:uppercase;
  padding:5px 9px;border-radius:var(--radius-pill);
  background:transparent;border:1px solid var(--line-soft);color:var(--fg-soft);
  cursor:pointer;transition:all var(--dur-fast);
}
.gallery__filter:hover{border-color:var(--accent);color:var(--accent-deep)}
.gallery__filter.is-active{background:var(--accent);color:var(--paper);border-color:var(--accent)}

.gallery__empty{
  display:none;
  flex:1;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--space-6);text-align:center;gap:var(--space-3);
}
.empty-frame{
  font-size:48px;color:var(--accent-soft);
  border:2px dashed var(--accent-soft);
  width:80px;height:120px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
}
.empty-text{
  font-family:var(--font-display);font-size:13px;font-style:italic;
  color:var(--fg-soft);margin:0;line-height:var(--lead-snug);max-width:200px;
}

/* Estado: galeria vazia */
body[data-state="empty"] .gallery__grid,
body[data-state="empty"] .gallery__filters,
body[data-state="empty"] .gallery__search{display:none}
body[data-state="empty"] .gallery__empty{display:flex}

/* ===== Forja (right panel) ===== */
.modal__forja{
  display:flex;flex-direction:column;
  min-width:0;overflow:hidden;
  position:relative;
}
.forja__scroll{
  flex:1;overflow-y:auto;
  padding:var(--space-5) var(--space-6);
  display:flex;flex-direction:column;gap:var(--space-5);
}
.forja__scroll::-webkit-scrollbar{width:6px}
.forja__scroll::-webkit-scrollbar-track{background:transparent}
.forja__scroll::-webkit-scrollbar-thumb{background:var(--sand-soft);border-radius:3px}

.forja__eyebrow{
  font-size:10px;letter-spacing:var(--track-widest);text-transform:uppercase;
  color:var(--accent-deep);font-weight:700;margin:0 0 var(--space-2);
}

/* Textarea hero */
.forja__textarea-wrap{position:relative}
.forja__textarea{
  width:100%;min-height:120px;
  font-family:var(--font-body);font-size:15px;line-height:var(--lead-normal);
  padding:var(--space-3) var(--space-4);
  border:1px solid var(--line-soft);border-radius:var(--radius-md);
  background:var(--paper);color:var(--fg);
  resize:vertical;
}
.forja__textarea::placeholder{
  font-family:var(--font-display);font-style:italic;color:var(--fg-softer);font-size:14px;
}
.forja__textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(92,143,122,.12)}
.forja__counter{
  position:absolute;bottom:8px;right:12px;
  font-family:var(--font-mono);font-size:11px;color:var(--fg-softer);
}

/* Chips de sugestões */
.forja__chips-wrap{
  position:relative;
}
.forja__chips{
  display:flex;gap:var(--space-2);overflow-x:auto;
  padding-bottom:6px;
  scroll-snap-type:x mandatory;
}
.forja__chips::-webkit-scrollbar{height:4px}
.forja__chips::-webkit-scrollbar-thumb{background:var(--sand-soft);border-radius:2px}
.forja__chips-wrap::after{
  content:"";position:absolute;top:0;right:0;bottom:6px;width:40px;
  background:linear-gradient(to right, transparent, var(--paper));
  pointer-events:none;
}
.chip{
  flex-shrink:0;scroll-snap-align:start;
  max-width:280px;
  font-size:12px;line-height:var(--lead-snug);
  padding:10px 14px;border-radius:var(--radius-pill);
  background:var(--paper-warm);border:1px solid var(--line-soft);color:var(--fg-soft);
  text-align:left;cursor:pointer;transition:all var(--dur-fast);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chip:hover{border-color:var(--accent);background:var(--paper);color:var(--fg);transform:translateY(-1px)}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--paper);border-color:var(--accent)}

/* Referência inline */
.forja__ref{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3);background:var(--paper-warm);
  border-radius:var(--radius-md);border:1px solid var(--line-soft);
}
.ref__drop{
  flex-shrink:0;width:80px;height:80px;
  border:1.5px dashed var(--line);border-radius:var(--radius-sm);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  text-align:center;color:var(--fg-softer);cursor:pointer;
  transition:all var(--dur-fast);
}
.ref__drop:hover{border-color:var(--accent);background:var(--paper);color:var(--accent-deep)}
.ref__icon{font-size:18px}
.ref__hint{font-size:10px;line-height:1.2;font-weight:600}
.ref__or{
  font-family:var(--font-mono);font-size:11px;color:var(--fg-softer);
  letter-spacing:var(--track-wide);
}
.ref__galleryhint{
  font-size:12px;color:var(--fg-soft);font-style:italic;line-height:var(--lead-snug);
}
.ref__shortcut{
  font-family:var(--font-mono);font-size:10px;color:var(--fg-softer);
  margin-top:6px;display:block;
}

/* Estilo de marca (3 radio-cards) */
.forja__styles{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-2);
}
.style-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:var(--space-3);
  background:var(--paper);border:1.5px solid var(--line-soft);border-radius:var(--radius-md);
  cursor:pointer;transition:all var(--dur-fast);text-align:left;
  position:relative;
}
.style-card:hover{border-color:var(--accent-soft)}
.style-card.is-active{
  border-color:var(--accent);background:var(--paper-deep);
}
.style-card.is-active::after{
  content:"✓";position:absolute;top:8px;right:10px;
  color:var(--accent);font-weight:700;font-size:14px;
}
.style-card__swatch{
  width:28px;height:28px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:14px;font-weight:600;
}
.style-card__swatch--livro{
  background:linear-gradient(135deg,#FAF6EC,#A8C4B5);
  color:#3D5A45;
}
.style-card__swatch--app{
  background:linear-gradient(135deg,#1C1C1A,#3D5A45);
  color:#A8C4B5;
}
.style-card__swatch--future{
  background:linear-gradient(135deg,#B8A8E3,#7AC4D4,#E3B8C9);
  color:#FAF6EC;
}
.style-card__name{
  font-family:var(--font-display);font-size:14px;font-weight:500;
  color:var(--fg);
}
.style-card__sub{
  font-size:11px;color:var(--fg-softer);
}

/* Parâmetros (chips inline) */
.forja__params{
  display:flex;gap:var(--space-2);flex-wrap:wrap;
}
.param-chip{
  font-size:12px;font-weight:600;
  padding:7px 12px;border-radius:var(--radius-pill);
  background:var(--paper);border:1px solid var(--line-soft);color:var(--fg-soft);
  cursor:pointer;transition:all var(--dur-fast);
  display:inline-flex;align-items:center;gap:6px;
}
.param-chip:hover{border-color:var(--accent);color:var(--accent-deep)}
.param-chip.is-disabled{opacity:.4;cursor:not-allowed}

/* ===== Estados de view (loading / result / error) ===== */
.forja__view{
  display:none;
  padding:var(--space-5) var(--space-6);
  flex:1;overflow-y:auto;
}
body[data-state="loading"] .forja__scroll{display:none}
body[data-state="loading"] .forja__view[data-view="loading"]{display:flex;flex-direction:column;gap:var(--space-4);align-items:center;justify-content:center}

body[data-state="result"] .forja__scroll{display:none}
body[data-state="result"] .forja__view[data-view="result"]{display:flex;flex-direction:column;gap:var(--space-3)}

body[data-state="error"] .forja__scroll{display:none}
body[data-state="error"] .forja__view[data-view="error"]{display:flex;flex-direction:column;gap:var(--space-4);align-items:center;justify-content:center}

/* Loading state */
.loading__skeleton{
  width:240px;max-width:60%;
  background:linear-gradient(135deg,#EFE6CE,#E3D8C8);
  border-radius:var(--radius-md);
  position:relative;overflow:hidden;
  border:1px solid var(--line-soft);
}
.loading__skeleton[data-ar="9/16"]{aspect-ratio:9/16}
.loading__shimmer{
  position:absolute;inset:0;
  background:linear-gradient(90deg, transparent, rgba(168,196,181,.4), transparent);
  animation:shimmer 1.6s linear infinite;
}
@keyframes shimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}
.loading__text{
  font-family:var(--font-display);font-style:italic;font-size:14px;
  color:var(--fg-soft);text-align:center;max-width:340px;margin:0;
}
.loading__progress{
  width:200px;height:3px;background:var(--paper-warm);border-radius:2px;
  overflow:hidden;position:relative;
}
.loading__progress::after{
  content:"";position:absolute;inset:0;width:35%;
  background:var(--accent);border-radius:2px;
  animation:progress 1.4s ease-in-out infinite;
}
@keyframes progress{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(300%)}
}

/* Result state */
.result__collapsed{
  display:flex;align-items:center;gap:var(--space-2);
  background:var(--paper-warm);border:1px solid var(--line-soft);
  border-radius:var(--radius-pill);padding:6px 12px;
  font-size:12px;color:var(--fg-soft);
}
.result__chevron{color:var(--accent);cursor:pointer}
.result__prompt-preview{
  flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-style:italic;
}
.result__edit{
  background:transparent;border:none;color:var(--accent-deep);
  font-size:11px;font-weight:600;letter-spacing:var(--track-wide);text-transform:uppercase;
  cursor:pointer;
}
.result__media{
  max-width:280px;align-self:center;
  background:linear-gradient(135deg,#A8C4B5,#5C8F7A);
  border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  color:var(--paper);font-family:var(--font-mono);font-size:11px;
  border:1px solid var(--line-soft);
}
.result__media[data-ar="9/16"]{aspect-ratio:9/16}
.result__meta{
  font-family:var(--font-mono);font-size:11px;color:var(--fg-softer);
  margin:0;text-align:center;
}
.result__actions{
  display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:center;
}

/* Error state */
.error__card{
  max-width:380px;text-align:center;
  background:var(--paper-warm);border:1px solid #C9A87C;border-radius:var(--radius-md);
  padding:var(--space-5);
}
.error__icon{font-size:32px;color:#C9A87C;display:block;margin-bottom:var(--space-2)}
.error__title{
  font-family:var(--font-display);font-weight:400;font-size:var(--text-xl);
  margin:0 0 var(--space-2);
}
.error__msg{font-size:14px;color:var(--fg-soft);margin:0 0 var(--space-2)}
.error__code{
  font-family:var(--font-mono);font-size:11px;color:var(--fg-softer);
  margin:0 0 var(--space-4);
}
.error__actions{display:flex;gap:var(--space-2);justify-content:center;flex-wrap:wrap}

/* Buttons */
.btn{
  font-family:var(--font-body);font-size:13px;font-weight:600;
  padding:9px 16px;border-radius:var(--radius-pill);
  cursor:pointer;transition:all var(--dur-fast);border:1px solid transparent;
}
.btn--primary{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.btn--primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.btn--ghost{background:transparent;color:var(--accent-deep);border-color:var(--accent-soft)}
.btn--ghost:hover{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.btn--text{background:transparent;color:var(--fg-softer);border:none;text-decoration:underline}
.btn--text:hover{color:var(--fg)}
.btn--right{margin-left:auto}

/* ===== Footer (sticky CTA) ===== */
.modal__foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-3) var(--space-5);
  background:var(--paper-warm);
  border-top:1px solid var(--line-soft);
}
.foot__cost{display:flex;flex-direction:column;gap:2px;min-width:0}
.foot__estimate{font-size:13px;color:var(--fg-soft)}
.foot__estimate strong{font-family:var(--font-display);font-size:16px;color:var(--fg)}
.foot__cumulative{font-family:var(--font-mono);font-size:10px;color:var(--fg-softer)}
.foot__cta{
  background:var(--accent);color:var(--paper);border:none;
  font-family:var(--font-display);font-size:16px;font-weight:500;
  padding:12px 28px;border-radius:var(--radius-pill);cursor:pointer;
  transition:all var(--dur-fast);min-width:140px;
  box-shadow:0 3px 14px rgba(92,143,122,.32);
}
.foot__cta:hover{background:var(--accent-deep);box-shadow:0 5px 20px rgba(60,90,69,.4)}

/* Loading footer */
.foot--loading{display:none}
body[data-state="loading"] .modal__foot:not(.foot--loading){display:none}
body[data-state="loading"] .foot--loading{display:flex}
.foot__progress-bar{flex:1;height:6px;background:var(--paper);border-radius:3px;overflow:hidden;position:relative}
.foot__progress-bar::after{
  content:"";position:absolute;inset:0;width:42%;background:var(--accent);
  animation:progress 1.4s ease-in-out infinite;
}
.foot__cancel-warn{font-size:11px;color:var(--fg-softer);font-style:italic;margin-right:var(--space-2)}

/* Result/Error: esconder footer principal */
body[data-state="result"] .modal__foot,
body[data-state="error"] .modal__foot{display:none}

/* ===== Notes panel (debaixo do modal) ===== */
.notes{
  position:relative;z-index:50;
  max-width:1080px;margin:var(--space-6) auto var(--space-12);
  padding:var(--space-6);
  background:var(--paper);border:1px dashed var(--line);border-radius:var(--radius-lg);
}
.notes h3{
  font-family:var(--font-display);font-weight:400;font-size:var(--text-xl);
  margin:0 0 var(--space-3);
}
.notes ul{margin:0 0 var(--space-4);padding-left:1.4em;line-height:var(--lead-relaxed)}
.notes li{margin-bottom:6px;color:var(--fg-soft);font-size:14px}
.notes li strong{color:var(--fg)}
.notes__back{
  display:inline-block;margin-top:var(--space-3);
  font-size:11px;font-weight:600;letter-spacing:var(--track-wide);text-transform:uppercase;
  text-decoration:none;color:var(--fg-soft);
  border:1px dashed var(--line);padding:6px 12px;border-radius:var(--radius-pill);
}
.notes__back:hover{color:var(--accent-deep);border-color:var(--accent);border-style:solid}

/* =========================================================================
   VIEWPORT: MOBILE (bottom-sheet)
   Triggered via body[data-viewport="mobile"]
   ========================================================================= */
body[data-viewport="mobile"] .bg-grid{display:none}
body[data-viewport="mobile"] .modal-overlay{
  align-items:flex-end;padding:0;
  background:rgba(28,28,26,.65);
}
body[data-viewport="mobile"] .modal{
  width:100%;max-width:480px;
  height:92dvh;
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  grid-template-rows:auto 1fr auto;
}
body[data-viewport="mobile"] .modal::before{
  content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:36px;height:4px;border-radius:2px;background:var(--line);
  z-index:2;
}
body[data-viewport="mobile"] .modal__head{padding-top:var(--space-4)}
body[data-viewport="mobile"] .modal__esc{display:none}

/* Body vira coluna única: forja primeiro, galeria depois */
body[data-viewport="mobile"] .modal__body{
  grid-template-columns:1fr;
  grid-template-rows:1fr;
  overflow-y:auto;
}
body[data-viewport="mobile"] .modal__divisor{display:none}
body[data-viewport="mobile"] .modal__gallery{
  order:2;
  background:var(--paper);
  border-top:1px solid var(--line-soft);
}
body[data-viewport="mobile"] .modal__forja{order:1}

body[data-viewport="mobile"] .gallery__grid{
  display:flex;grid-template-columns:none;
  overflow-x:auto;overflow-y:hidden;
  padding:0 var(--space-4) var(--space-3);gap:var(--space-2);
  scroll-snap-type:x mandatory;
}
body[data-viewport="mobile"] .gallery__item{
  width:140px;flex-shrink:0;scroll-snap-align:start;
}
body[data-viewport="mobile"] .gallery__filters{padding:var(--space-2) var(--space-4)}

/* Forja mobile: drop-zone vira 2 botões */
body[data-viewport="mobile"] .forja__ref{flex-direction:row}
body[data-viewport="mobile"] .ref__drop{
  width:auto;height:auto;flex:1;flex-direction:row;
  padding:10px 12px;border-radius:var(--radius-pill);
}
body[data-viewport="mobile"] .ref__hint{font-size:11px;font-weight:600}
body[data-viewport="mobile"] .ref__or{display:none}
body[data-viewport="mobile"] .ref__galleryhint{
  flex:1;text-align:center;font-size:11px;
  padding:10px 12px;border:1.5px dashed var(--line);border-radius:var(--radius-pill);cursor:pointer;
}

body[data-viewport="mobile"] .forja__styles{grid-template-columns:1fr 1fr 1fr;gap:6px}
body[data-viewport="mobile"] .style-card{padding:var(--space-2);gap:4px}
body[data-viewport="mobile"] .style-card__sub{display:none}

body[data-viewport="mobile"] .modal__foot{padding:var(--space-3) var(--space-4)}
body[data-viewport="mobile"] .foot__cta{padding:10px 20px;font-size:14px}

/* Notes em viewport mobile não muda */

/* =========================================================================
   Responsivo real (não mockup-viewport): se a janela do navegador for pequena
   o demo bar também colapsa, mas o modal continua escutando data-viewport.
   ========================================================================= */
@media (max-width:760px){
  .demo-bar{flex-direction:column;align-items:stretch}
  .demo-bar__brand,.demo-bar__group{justify-content:center}
  .bg-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .bg-grid{grid-template-columns:1fr}
}