.template-shot { display:block; width:100%; height:auto; object-fit:cover; object-position:top; }
.detail .card-actions { display:none; }
.preview-stage { direction:ltr; }
dialog[open] { display:flex; flex-direction:column; overflow:hidden; }
.preview-toolbar { flex:none; }
.preview-stage { flex:1; min-height:0; height:auto; }
#preview-frame { min-height:0; }
/* Gallery controls meet the shared minimum touch target at every breakpoint. */
.filters button, .card-actions :is(a,button), .preview-toolbar :is(a,button) { min-block-size:44px; display:inline-flex; align-items:center; justify-content:center; }
.preview-toolbar button { min-inline-size:44px; }
.preview-toolbar { height:auto; min-block-size:64px; }
.preview-toolbar strong { min-inline-size:0; overflow-wrap:anywhere; }
.art-source-note { display:block; margin-block-start:var(--v-ui-space-2); color:var(--v-ui-muted); font-size:12px; line-height:1.8; }
.template-card>.art-source-note { min-block-size:0; }
.showcase-top [data-preview] { margin-inline-start:auto; font-size:11px; }
.cream-button { display:inline-flex; align-items:center; min-block-size:44px; }
.card-actions [data-preview] { color:var(--v-ui-text); }
#preview { background:var(--v-ui-bg); }
.preview-toolbar { display:grid; grid-template-columns:44px minmax(0,1fr) auto auto; gap:var(--v-ui-space-3); padding:var(--v-ui-space-3) var(--v-ui-space-4); }
.preview-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:var(--v-ui-space-3); }
.preview-actions a { font-size:12px; text-align:center; }
.preview-actions .primary { min-block-size:44px; padding:var(--v-ui-space-2) var(--v-ui-space-4); }
.preview-feedback { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--v-ui-space-2) var(--v-ui-space-4); padding:var(--v-ui-space-2) var(--v-ui-space-4); border-block-end:1px solid var(--v-ui-border); color:var(--v-ui-muted); background:var(--v-ui-surface); font-size:12px; flex:none; }
.preview-stage { position:relative; overflow:hidden; padding:var(--v-ui-space-4); align-items:stretch; }
.preview-viewport { position:relative; min-inline-size:0; block-size:100%; flex:none; }
#preview-frame { position:absolute; top:0; left:0; max-width:none; min-width:0; min-height:0; transform-origin:top left; transition:none; }
#preview-frame.mobile { max-width:none; }
.preview-error { direction:rtl; align-self:center; inline-size:min(100%,520px); padding:var(--v-ui-space-6); border:1px solid var(--v-ui-border); border-radius:var(--v-ui-radius-md); background:var(--v-ui-surface); text-align:center; }
.preview-error h2 { font-size:20px; }
.preview-error p { margin-block:var(--v-ui-space-3) var(--v-ui-space-4); color:var(--v-ui-muted); font-size:14px; }
.preview-error :is(a,button) { min-block-size:44px; margin:var(--v-ui-space-1); }
#preview[data-preview-state="error"] .preview-stage { overflow:auto; }
#preview[data-preview-state="error"] .preview-error { align-self:flex-start; }
#preview[data-preview-state="loading"] .preview-stage::before { content:'در حال آماده‌سازی…'; align-self:center; color:var(--v-ui-muted); direction:rtl; padding:var(--v-ui-space-6); }
@media (max-width:850px) {
  .preview-toolbar { grid-template-columns:44px minmax(0,1fr); gap:var(--v-ui-space-2); }
  .preview-toolbar strong { grid-column:2; }
  .preview-toolbar .device-buttons { grid-column:1/-1; justify-self:center; margin:0; }
  .preview-actions { grid-column:1/-1; justify-content:space-between; }
}
@media (max-width:640px) {
  .preview-toolbar { height:auto; padding:var(--v-ui-space-2) var(--v-ui-space-3); }
  .preview-stage { padding:0; }
  .preview-stage:has(#preview-frame:not(.mobile)) { justify-content:center; }
  #preview-frame:not(.mobile) { min-width:0; }
  .preview-feedback { font-size:11px; padding:var(--v-ui-space-2) var(--v-ui-space-3); }
  .preview-error { margin:var(--v-ui-space-3); inline-size:calc(100% - 24px); }
}