.creative-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  width: 100%;
}

.creative-card {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}

.creative-frame {
  display: grid;
  place-items: center;
  height: 230px;
  padding: 12px;
  overflow: hidden;
  background: #f8fafc;
}

.creative-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.creative-card figcaption {
  overflow: hidden;
  padding: 10px 12px;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creative-card figcaption span { display: block; overflow: hidden; text-overflow: ellipsis; }
.creative-card figcaption a { display: block; margin-top: 8px; color: #0891b2; }
.creative-type { display: inline-block; margin-top: 7px; padding: 4px 7px; border-radius: 99px; background: #e2e8f0; color: #334155; font-size: 10px; font-style: normal; text-transform: uppercase; }
.creative-type.redirect { background: #cffafe; color: #155e75; }
.creative-type.unsubscribe { background: #fee2e2; color: #991b1b; }
.creative-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
.crop-stage { position: relative; display: inline-block; max-width: 100%; line-height: 0; cursor: crosshair; user-select: none; touch-action: none; }
.crop-stage img { display: block; max-width: 100%; max-height: 75vh; width: auto; height: auto; }
.crop-selection { position: absolute; border: 2px solid #22d3ee; background: #22d3ee33; box-shadow: 0 0 0 9999px #0f172a55; pointer-events: none; }
.crop-help,.crop-readout { color: #64748b; font-size: 12px; }
.editor-tools { position: sticky; top: 108px; }
.editor-tools hr { margin: 24px 0; border: 0; border-top: 1px solid #e2e8f0; }
.derived-list { display: grid; gap: 8px; }
.derived-list a { display: flex; justify-content: space-between; gap: 8px; padding: 9px; border: 1px solid #e2e8f0; border-radius: 8px; }
@media(max-width:900px){.creative-editor-layout{grid-template-columns:1fr}.editor-tools{position:static}}
.row-actions form,.chips form,.creative-card figcaption form{margin:0}
.action.danger{color:#b91c1c;border-color:#fecaca;cursor:pointer}
.action.danger:hover{background:#fef2f2;border-color:#ef4444;color:#991b1b}
.chips>span{display:inline-flex;align-items:center;gap:6px}
.chip-delete{border:0;background:transparent;color:#b91c1c;font-size:16px;line-height:1;cursor:pointer;padding:0 2px}
.html-actions{display:flex;flex-wrap:wrap;gap:8px}.html-source{width:100%;box-sizing:border-box;padding:16px;border:1px solid #cbd5e1;border-radius:8px;background:#0f172a;color:#e2e8f0;font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;resize:vertical;white-space:pre}
.creative-preview-grid{grid-column:2;grid-template-columns:repeat(2,minmax(220px,1fr))}.creative-preview-grid .creative-frame{height:360px}.creative-preview-grid figcaption small{display:block;margin-bottom:4px;color:#64748b;text-transform:uppercase;letter-spacing:.05em}
@media(max-width:900px){.creative-preview-grid{grid-column:1;grid-template-columns:1fr}.creative-preview-grid .creative-frame{height:300px}}
.template-actions{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px}.creative-card figcaption .template-actions a{display:inline;margin:0}
.template-selection{display:inline-flex;align-items:center;gap:7px;color:#334155;font-size:12px;font-weight:800;cursor:pointer}.template-selection input{width:16px;height:16px;margin:0;accent-color:#0891b2}
.creative-review-workspace{grid-column:2;display:grid;grid-template-columns:minmax(280px,.8fr) minmax(420px,1.2fr);gap:18px;align-items:start}.creative-review-workspace .creative-preview-grid{grid-column:auto;grid-template-columns:1fr}.html-preview-panel{position:sticky;top:100px;min-width:0;padding:16px;border:1px solid #cbd5e1;border-radius:12px;background:#f8fafc}.html-preview-panel .panel-head{margin-bottom:12px}.html-preview-panel .panel-head small{color:#64748b;font-size:10px;letter-spacing:.08em}.html-preview-panel .panel-head h3{margin:3px 0}.html-preview-panel iframe{display:block;width:100%;height:480px;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:8px;background:#fff}.html-preview-panel label{display:grid;gap:6px;margin-top:14px;color:#475569;font-size:12px;font-weight:800}.template-actions button.selected{border-color:#0891b2;background:#cffafe;color:#155e75}
@media(max-width:1200px){.creative-review-workspace{grid-template-columns:1fr}.html-preview-panel{position:static}}@media(max-width:900px){.creative-review-workspace{grid-column:1}.html-preview-panel iframe{height:400px}}
.offer-creative-section{display:grid;grid-template-columns:minmax(300px,.85fr) minmax(420px,1.15fr);gap:18px;align-items:start}.offer-creative-section>.panel-head,.offer-creative-section>.filters{grid-column:1/-1}.offer-creative-section>.creative-gallery{grid-column:1;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.offer-html-preview-panel{grid-column:2}.offer-html-preview-panel+script{display:none}@media(max-width:1100px){.offer-creative-section{grid-template-columns:1fr}.offer-creative-section>.creative-gallery,.offer-html-preview-panel{grid-column:1}}