/* Mitt Bryllupsunivers – Invitasjonsverktøy (komplett, med mobil-bottom-sheet) */

:root{
  --mbu-cream:#fffdf7; --mbu-ink:#222; --mbu-muted:#666a6d; --mbu-border:#e7e3da;
  --mbu-gold-bg:#faf7f2; --mbu-gold-text:#474242; --mbu-gold-border:#d4af37;
  --shadow-lg:0 10px 35px rgba(0,0,0,.08);
  --shadow-md:0 8px 20px rgba(0,0,0,.06);
  --shadow-sm:0 3px 8px rgba(0,0,0,.08);
  --ok:#2aa06a; --warn:#b7791f; --err:#d33a2c; --ink-soft:#2a2a2a;
}

/* Base + typografi */
#mbu-invitation-view,
#mbu-invitation-designer{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--mbu-ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern","liga","clig","calt";
}

/* Knapper */
.mbu-btn,
.mbu-inv-actions a {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid var(--mbu-border);
  background: #fff;
  color: var(--mbu-ink);
  border-radius: 12px;
  padding: 0 16px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: transform .08s, box-shadow .2s, background .2s,
              color .2s, border-color .2s, opacity .2s;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

.mbu-btn:hover,
.mbu-inv-actions a:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); text-decoration: none; }
.mbu-btn:active,
.mbu-inv-actions a:active { transform: translateY(0); box-shadow: none; }
.mbu-btn[disabled],
.mbu-inv-actions a[disabled] { opacity: .55; pointer-events: none; }

/* Fargetemaer */
.mbu-btn.gold,
.mbu-inv-actions a.gold { background: var(--mbu-gold-bg); color: var(--mbu-gold-text); border-color: var(--mbu-gold-border); }
.mbu-btn.ghost,
.mbu-inv-actions a.ghost { background: #fff; color: var(--mbu-muted); }
.mbu-btn.danger,
.mbu-inv-actions a.danger { background: #ffedeb; color: #000; }
.mbu-btn.tiny,
.mbu-inv-actions a.tiny { padding: 0 10px; font-size: 12px; border-radius: 10px; min-height: 32px; }

/* -------- Top banner (publisering) -------- */
.mbu-top-banner{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; margin:0 0 12px;
  border:1px dashed var(--mbu-gold-border);
  border-radius:14px; background: color-mix(in oklab, var(--mbu-gold-bg) 65%, white);
  box-shadow: var(--shadow-sm);
}
.mbu-top-banner .mbu-badge{
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--mbu-gold-bg); color: var(--mbu-gold-text);
  border:1px solid var(--mbu-gold-border);
  border-radius:999px; padding:6px 10px; font-size:12px; font-weight:700; letter-spacing:.25px;
}
.mbu-top-banner .mbu-note{ font-size:13px; color: var(--mbu-ink-soft); line-height:1.35; }
.mbu-top-banner .mbu-note b{ font-weight:700; }

/* -------- Designer layout -------- */
.mbu-inv-root{background:var(--mbu-cream);padding:18px}
.mbu-inv-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:4px 0 14px}
.mbu-inv-header h2{margin:0;font-size:20px;font-weight:700}
.mbu-inv-actions{display:flex;flex-wrap:wrap;gap:8px}

/* Forhåndsvisningsmerknad */
.mbu-preview-note{
  display:flex; align-items:center; gap:8px;
  color: var(--mbu-muted); font-size:12px;
}
.mbu-preview-note .dot{width:8px;height:8px;border-radius:999px;background:var(--warn);box-shadow:0 0 0 2px color-mix(in oklab, var(--warn) 20%, transparent);}

/* Publiseringspanel */
.mbu-publish-panel{
  display:grid; gap:10px; padding:12px;
  background:#fff; border:1px solid var(--mbu-border); border-radius:16px;
  box-shadow:var(--shadow-md);
}
.mbu-publish-panel .mbu-panel-title{
  padding:10px 12px;font-weight:700;font-size:13px;letter-spacing:.25px;
  border-bottom:1px solid var(--mbu-border);background:#efede2;border-top-left-radius:16px;border-top-right-radius:16px;margin:-12px -12px 8px -12px;
}
.mbu-slug-row{
  display:grid; grid-template-columns: 1fr auto; gap:8px; align-items:center;
}
.mbu-slug-row input[type="text"]{
  width:100%; padding:10px 12px; border:1px solid var(--mbu-border); border-radius:10px; background:#fff; font-size:14px;
}
.mbu-url-preview{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:8px 10px; border:1px dashed var(--mbu-border); border-radius:10px; background:var(--mbu-gold-bg);
  font-size:13px; color: var(--mbu-ink-soft);
}
.mbu-url-preview code{
  background:#fff; border:1px solid var(--mbu-border); border-radius:8px; padding:4px 8px; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size:12px;
}
.mbu-inline-alert{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 12px; border-radius:12px; font-size:13px; line-height:1.35;
  background: color-mix(in oklab, var(--warn) 16%, white);
  border:1px solid color-mix(in oklab, var(--warn) 30%, var(--mbu-border));
  color: color-mix(in oklab, var(--warn) 45%, var(--mbu-ink));
}
.mbu-inline-alert .icon{
  width:18px; height:18px; border-radius:999px; flex:0 0 auto;
  background: var(--warn);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--warn) 25%, transparent);
}

/* Hovedgrid */
.mbu-inv-main{
  display:grid; grid-template-columns:280px 1fr; gap:18px; min-height:70vh;
  align-items:start;
}

/* Sidebar */
.mbu-inv-sidebar{display:grid;align-content:start;gap:12px}
.mbu-panel{background:#fff;border:1px solid var(--mbu-border);border-radius:16px;box-shadow:var(--shadow-md);overflow:clip}
.mbu-publish-panel .mbu-panel{ overflow: visible; }
.mbu-panel-title{padding:10px 12px;font-weight:600;font-size:13px;letter-spacing:.2px;border-bottom:1px solid var(--mbu-border);background:#efede2}
.mbu-pages{padding:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mbu-page-tab{border:1px solid var(--mbu-border);background:#aba486;border-radius:10px;padding:8px 10px;font-size:13px;cursor:pointer}
.mbu-page-tab.active{
  background:#fff; color:#000; border-color:var(--mbu-gold-border);
  box-shadow:0 0 0 2px color-mix(in oklab, var(--mbu-gold-bg) 40%, transparent), 0 2px 10px rgba(0,0,0,.08);
  font-weight:700;
}

/* Egenskaper */
.mbu-props{padding:10px;display:grid;gap:10px}
.mbu-props .row{display:flex;align-items:center;gap:8px;min-width:0}
.mbu-props label,
.mbu-props .lbl{font-size:12px;color:var(--mbu-muted);min-width:86px;flex:0 0 86px}
.mbu-props .fld{flex:1 1 auto;min-width:0}
.mbu-props input[type="text"],
.mbu-props input[type="number"],
.mbu-props input[type="color"],
.mbu-props select{
  width:100%;padding:8px 10px;border:1px solid var(--mbu-border);
  border-radius:10px;background:#fff;font-size:13px;box-sizing:border-box;
}
/* Range med prosentfelt som ikke bryter linjer */
.mbu-props .fld-range{display:flex;align-items:center;gap:8px;min-width:0}
.mbu-props .fld-range input[type="range"]{flex:1 1 auto;min-width:0}
.mbu-props .fld-range .ovl-pct{flex:0 0 44px;max-width:44px;text-align:right;font-size:12px;color:var(--mbu-muted)}

/* Canvas-område */
.mbu-inv-canvas-wrap{background:#fff;border:1px solid var(--mbu-border);border-radius:20px;box-shadow:var(--shadow-lg);padding:12px;display:grid;gap:10px}
.mbu-inv-canvas-toolbar{display:flex;align-items:center;gap:10px;border:1px solid var(--mbu-border);border-radius:12px;padding:8px 10px;background:#efede2;font-size:13px}

.mbu-inv-canvas{
  height:100dvh;
  min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:0;padding:0;
}

/* Kort (6:11) */
.mbu-card{
  height:100dvh; max-height:100dvh;
  width:min(500px, calc(100dvh * 5 / 7));
  max-width:100vw;
  aspect-ratio:5 / 7;
  background:#fff; border-radius:0px; box-shadow:var(--shadow-lg);
  position:relative; overflow:hidden;
}

/* Dropzone og overlay */
.mbu-dropzone{position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat;}
.mbu-overlay {position:absolute; inset:0; pointer-events:none; background:transparent; opacity:0; z-index:1}

/* Grid */
.mbu-grid{
  position:absolute; inset:0; pointer-events:none; z-index:2; display:none;
  background:
    repeating-linear-gradient(0deg,  transparent, transparent 24px, rgba(0,0,0,.22) 25px),
    repeating-linear-gradient(90deg, transparent, transparent 24px, rgba(0,0,0,.22) 25px),
    repeating-linear-gradient(0deg,  transparent 23px, rgba(255,255,255,.28) 24px, transparent 25px),
    repeating-linear-gradient(90deg, transparent 23px, rgba(255,255,255,.28) 24px, transparent 25px);
}
.mbu-dropzone.has-grid .mbu-grid{ display:block; }

/* Elementer i canvas */
.mbu-el{position:absolute;user-select:none;cursor:move;outline:1px dashed transparent;transition:box-shadow .12s, outline-color .12s;white-space:pre-wrap;line-height:1.25}
.mbu-el img{display:block;width:100%;height:100%;object-fit:cover}
.mbu-el.selected{
  outline: 1px dashed rgba(201,162,39,0.95);
  outline-offset: 1px;
  box-shadow:0 0 0 2px rgba(201,162,39,0.75), 0 0 6px rgba(0,0,0,0.25), 0 0 8px rgba(255,255,255,0.6);
  mix-blend-mode: normal;
}
.mbu-el .mbu-handle{position:absolute;width:10px;height:10px;background:#fff;border:1px solid var(--mbu-gold-border);border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.06);display:none}
.mbu-el.selected .mbu-handle{display:block}
.mbu-handle.se{right:-6px;bottom:-6px;cursor:nwse-resize}

/* Roteringshåndtak */
.mbu-handle.rot{
  bottom:-18px; left:50%; transform:translateX(-50%);
  cursor:grab; width:14px; height:14px; border-radius:999px;
  background:#fff; border:1px solid var(--mbu-gold-border);
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}
.mbu-el.selected .mbu-handle.rot{ display:block; }
.mbu-handle.rot:active{ cursor:grabbing; }

/* Mini toolbar */
.mbu-mini-toolbar{
  position:absolute; background:#fff; border:1px solid var(--mbu-border);
  border-radius:10px; box-shadow:var(--shadow-sm);
  display:flex; gap:6px; padding:6px; z-index:30; backdrop-filter: blur(2px);
}
.mbu-mini-toolbar .mbu-btn{padding:6px 8px;font-size:12px}

/* Offentlig visning / print */
#mbu-invitation-view .mbu-view-wrap{min-height:100vh;background:var(--mbu-cream);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0}
#mbu-invitation-view .mbu-card-view{
  height:100dvh;max-height:100dvh;
  width:min(500px, calc(100dvh * 5 / 7));max-width:100vw;
  aspect-ratio:5/7;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.08);
  margin:0;position:relative;overflow:hidden;background-size:cover;background-position:center;background-repeat:no-repeat;
}
#mbu-invitation-view .mbu-el-layer{position:absolute;inset:0 auto auto 0;width:820px;height:1148px;transform-origin:0 0}
#mbu-invitation-view .mbu-el{position:absolute;white-space:pre-wrap;user-select:text;line-height:1.25}
#mbu-invitation-view .mbu-el img{display:block;width:100%;height:100%;object-fit:cover}

.mbu-el-layer { z-index:3; }

/* Mini dupliseringsknapp (legacy) */
.mbu-el .mbu-dup-btn{ position:absolute; top:-10px; left:-10px; width:20px; height:20px; border-radius:50%;
  background:#fff; border:1px solid var(--mbu-gold-border); box-shadow:0 1px 2px rgba(0,0,0,.12);
  display:none; align-items:center; justify-content:center; font-size:12px; line-height:1; cursor:pointer; user-select:none;
}
.mbu-el.selected .mbu-dup-btn{ display:flex; }
.mbu-el .mbu-dup-btn:hover{ transform:translateY(-1px); }

/* Print */
@media print{
  html,body{background:#fff!important}
  #mbu-invitation-view .mbu-view-wrap{padding:0}
  #mbu-invitation-view .mbu-card-view{height:auto;width:100%;margin:0 0 24mm 0;box-shadow:none;border:none;page-break-after:always}
  #mbu-invitation-view .mbu-el-layer{transform:none!important;width:auto;height:auto;position:static}
}

/* Små skjermer (behold desktop-layout over 980px) */
@media (max-width:980px){
  .mbu-inv-main{grid-template-columns:1fr; gap:16px}
  .mbu-inv-sidebar{display:none} /* Sidepanelet skjules – bottom sheet brukes */
  .mbu-inv-canvas-wrap{order:1; padding:8px}
}

/* Ekstra liten skjerm – knapper m.m. */
@media (max-width:560px){
  .mbu-inv-actions{gap:6px}
  .mbu-btn{padding:8px 12px}
  .mbu-slug-row{ grid-template-columns: 1fr; }
}

/* --- Låst designer når publisert --- */
.mbu-inv-main-wrap { position: relative; }
.mbu-locked-overlay{
  position:absolute; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  background: color-mix(in oklab, #fffdf7 70%, #0000);
  backdrop-filter: blur(2px);
  pointer-events: auto;
}
.mbu-locked-box{
  background:#fff; border:1px solid var(--mbu-border);
  border-radius:14px; box-shadow:var(--shadow-md);
  padding:14px; max-width:560px; width:min(92%, 560px); text-align:center;
}
.mbu-inv-main-wrap[data-locked="1"] .mbu-inv-main{
  filter: grayscale(.25) opacity(.6);
  pointer-events: none;
}
.mbu-inv-main-wrap[data-locked="1"] .mbu-inv-canvas-toolbar,
.mbu-inv-main-wrap[data-locked="1"] .mbu-inv-sidebar,
.mbu-inv-main-wrap[data-locked="1"] .mbu-inv-actions .mbu-btn[data-action]{
  user-select: none;
}

/* ---------------------------
   MOBIL-FAB + BOTTOM SHEET
----------------------------*/
.mbu-fab{
  position:fixed; right:16px; bottom:16px;
  width:56px; height:56px; border-radius:999px;
  background:var(--mbu-gold-bg); color:#000; border:1px solid var(--mbu-gold-border);
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  font-size:22px; display:none; align-items:center; justify-content:center; z-index:70;
}
.mbu-fab:hover{ transform: translateY(-1px); }

.mbu-mobile-panel{
  position:fixed; left:0; right:0; bottom:0; z-index:69;
  background:#fff; border-top-left-radius:18px; border-top-right-radius:18px;
  box-shadow:0 -12px 30px rgba(0,0,0,.25);
  max-height:50vh; overflow:auto;
  transform:translateY(100%); transition:transform .28s ease;
}
.mbu-mobile-panel.open{ transform:translateY(0) }
.mbu-mobile-panel .handle{ width:44px; height:5px; background:#d0d0d0; border-radius:4px; margin:10px auto }
.mbu-mobile-panel .content{ padding:12px }
@media (max-width:980px){
  .mbu-fab{ display:flex }
}

/* ====== MOBILE POLISH / HOTFIX ====== */

/* Unngå horisontal scroll på smale skjermer */
html, body { overflow-x: hidden; }

/* 760px: Header og verktøylinje pakker seg pent */
@media (max-width: 760px) {
  .mbu-inv-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .mbu-inv-header h2 {
    font-size: 18px;
    margin: 0;
  }
  .mbu-inv-actions {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
  }
  .mbu-inv-actions .mbu-btn,
  .mbu-inv-actions a.mbu-btn {
    min-height: 36px;
    font-size: 12px;
    padding: 8px 10px;
    white-space: normal;     /* tillat linjebryting i lange knapper */
    line-height: 1.2;
    flex: 1 1 calc(50% - 6px); /* 2 kolonner */
  }
  .mbu-inv-canvas-toolbar {
    flex-wrap: wrap;
    gap: 6px;
  }
  /* publiseringspanelet: inputs skal alltid fylle bredden */
  .mbu-slug-row {
    grid-template-columns: 1fr; /* legg knapp under input */
  }
  .mbu-publish-panel input[type="text"] {
    width: 100%;
  }
}

/* 560px: Tett inn kanter, 2 kolonner -> 2 / 1 etter behov */
@media (max-width: 560px) {
  .mbu-inv-root { padding: 12px; }
  .mbu-inv-main { gap: 12px; }
  .mbu-inv-canvas-wrap { padding: 6px; }
  .mbu-card { width: 92vw; max-width: 420px; }
  .mbu-inv-actions .mbu-btn,
  .mbu-inv-actions a.mbu-btn {
    flex: 1 1 calc(50% - 6px);
  }
  /* Egenskaps-rader (i bottom sheet) – kolonne-layout og smale etiketter */
  .mbu-props .row {
    align-items: center;
  }
  .mbu-props .lbl { min-width: 84px; flex: 0 0 84px; }
  .mbu-props .fld { min-width: 0; }
  .mbu-props input,
  .mbu-props select { width: 100%; }
  .mbu-props .fld-range .ovl-pct { flex: 0 0 44px; max-width: 44px; }
}

/* 420px: Knapper i én kolonne, kort bredde strammes */
@media (max-width: 420px) {
  .mbu-card { width: 94vw; max-width: 360px; }
  .mbu-inv-actions .mbu-btn,
  .mbu-inv-actions a.mbu-btn {
    flex: 1 1 100%; /* 1 kolonne */
  }
  .mbu-inv-header h2 { font-size: 16px; }
}

/* 360px: Minimale marginer/tekststørrelser */
@media (max-width: 360px) {
  .mbu-card { width: 96vw; max-width: 330px; }
  .mbu-inv-root { padding: 10px; }
  .mbu-inv-actions { gap: 5px; }
  .mbu-inv-actions .mbu-btn,
  .mbu-inv-actions a.mbu-btn {
    min-height: 34px;
    font-size: 11.5px;
    padding: 7px 8px;
  }
}

/* ==== Mobil kort-velger i toolbar ==== */
.mbu-mobile-card-select-wrap {
  display: none;            /* skjult som default – vises på mobil under */
  align-items: center;
  gap: 8px;
  margin-left: auto;        /* skyv til høyre i toolbaren */
}
.mbu-mobile-card-select-wrap .lbl {
  font-size: 12px;
  color: var(--mbu-muted);
  white-space: nowrap;
}
.mbu-mobile-card-select {
  appearance: none;
  border: 1px solid var(--mbu-border);
  background: #fff;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.2;
  min-width: 110px;
  box-shadow: var(--shadow-sm);
}

/* Vis velgeren når sidepanelet er skjult på mobil */
@media (max-width: 980px){
  .mbu-mobile-card-select-wrap { display: inline-flex; }
}

/* Plasser + Tekst / + Rektangel nederst på mobil (nærmest kortet) */
@media (max-width: 760px){
  .mbu-inv-actions { display:flex; flex-wrap:wrap; }
  .mbu-inv-actions .mbu-btn[data-action="add-text"],
  .mbu-inv-actions .mbu-btn[data-action="add-rect"]{
    order: 99;              /* legg dem sist */
    flex: 1 1 100%;         /* egen rad */
  }
}

/* --- iOS switch (publisering m.m.) --- */
.mbu-ios-switch{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none;
}
.mbu-ios-switch .txt{ font-size:14px; color:#333; }
.mbu-ios-switch input{ position:absolute; opacity:0; pointer-events:none; }
.mbu-ios-switch .slider{
  width:40px; height:22px; border-radius:999px;
  background:#ddd; position:relative; transition:background .2s;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.mbu-ios-switch .slider::after{
  content:""; position:absolute; top:2px; left:2px; width:18px; height:18px;
  background:#fff; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.25);
  transition:transform .2s;
}
.mbu-ios-switch input:checked + .slider{ background:#22c55e; }
.mbu-ios-switch input:checked + .slider::after{ transform: translateX(18px); }
.mbu-inline-alert{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 12px; border-radius:12px; font-size:13px; line-height:1.35;
  background: color-mix(in oklab, #b7791f 16%, #fff); border:1px solid color-mix(in oklab, #b7791f 30%, var(--mbu-border)); color:#533f1a;
}
.mbu-inline-alert .icon{ width:18px; height:18px; border-radius:999px; background:#b7791f; box-shadow:0 0 0 2px color-mix(in oklab, #b7791f 25%, transparent); }

/* --- Publish panel UI --- */
.mbu-url-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mbu-url-chip{display:flex;align-items:center;gap:8px;background:#faf7f2;border:1px solid var(--mbu-border);border-radius:12px;padding:10px 12px;min-width:260px;flex:1}
.mbu-url-chip .ico{opacity:.75}
.mbu-url-chip .url{color:#1565d8;text-decoration:underline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%}
.mbu-slug-edit{display:flex;align-items:center;gap:6px;flex-basis:100%;margin-top:6px}
.mbu-slug-edit .base{color:#777;font-size:13px}
.mbu-slug-edit input{flex:1;min-width:160px;padding:8px 10px;border:1px solid var(--mbu-border);border-radius:8px}
.mbu-tip{font-size:12px;color:#666;margin-top:4px}
.mbu-switches{display:grid;gap:10px;margin-top:12px}
.mbu-switch-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--mbu-border);border-radius:12px;background:#fff}
.mbu-switch{position:relative;display:inline-block;width:46px;height:26px}
.mbu-switch input{display:none}
.mbu-switch .slider{position:absolute;cursor:pointer;inset:0;background:#e5e5ea;border-radius:999px;transition:.2s}
.mbu-switch .slider:before{content:"";position:absolute;height:22px;width:22px;left:2px;top:2px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.2s}
.mbu-switch input:checked + .slider{background:#34c759}
.mbu-switch input:checked + .slider:before{transform:translateX(20px)}
.mbu-copy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:8px}
.copy-card{border:1px solid var(--mbu-border);border-radius:12px;background:#fff;display:grid;gap:6px;padding:8px}
.copy-card .hdr{font-weight:600;font-size:13px}
.copy-card textarea{width:100%;min-height:120px;border:1px solid var(--mbu-border);border-radius:10px;padding:8px;font-size:13px;background:#fafafa}
.copy-card .copy-btn{align-self:start}