/* ═══════════════════════════════════════════════════════════════════════════
   MULTIFRAME HTML5 BUILDER — mf.css  (v1)
   Frame-based banner editor: hero band, toolbar, 3-column editor
   (frames+layers / canvas / inspector), preview overlay, own toast.
   ⚠ Shell zeroes nested section padding — panel padding re-asserted below.
   ═══════════════════════════════════════════════════════════════════════ */

.mf-app{display:flex;flex-direction:column;gap:16px}
.mf-app .panel{padding:18px 20px}   /* re-assert: shell zeroes nested section padding */

/* ── slim app-bar (replaces the marketing hero) ───────────────────────── */
.mf-appbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:11px 16px;border-radius:13px;background:linear-gradient(120deg,#0b1d33,#123056);color:#fff}
.mf-appbar-brand{display:flex;align-items:center;gap:11px;min-width:0}
.mf-appbar-ico{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;flex:none;
  background:linear-gradient(140deg,#8b5cf6,#6d28d9);color:#fff;font-size:14px;box-shadow:0 3px 10px rgba(109,40,217,.4)}
.mf-appbar-name{font-size:16px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.mf-appbar-name b{font-weight:800}
.mf-appbar-tag{font-size:11px;font-weight:600;color:#9db4d4;padding:3px 9px;border-radius:999px;
  background:rgba(255,255,255,.08);white-space:nowrap}
.mf-appbar-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mf-appbar-trust{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#9db4d4}
/* the shared Sample toggle sits on a dark bar here, same as 1 → 23 HTML5's */
.mf-appbar .dl-demo{margin-top:0}
.mf-appbar .dl-demo-txt{color:#cfe0f5}
.mf-appbar .dl-help-btn{color:#cfe0f5}
.mf-appbar .dl-help-btn b{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.1);color:#fff}
.mf-appbar .dl-help-btn:hover,.mf-appbar .dl-help-btn:hover b{color:#fff;border-color:#fff}
@media (max-width:640px){.mf-appbar-trust,.mf-appbar-tag{display:none}}

/* ── toolbar — row 1 settings (label above, control below), row 2 actions ── */
.mf-tb-actions{align-items:center;margin-top:14px}
.mf-toolbar .mf-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.mf-field-lbl{font-size:10.5px;font-weight:700;color:#5d6b81;text-transform:uppercase;letter-spacing:.04em;line-height:13px;white-space:nowrap}
/* every field control is one consistent height, so the row reads as a clean line */
.mf-toolbar select,.mf-toolbar input[type="text"],.mf-toolbar input[type="number"]{
  height:36px;margin:0;border:1px solid #d7dde8;border-radius:9px;background:#fff;padding:0 11px;font:inherit;font-size:13px;color:#1c2737;min-width:0;width:100%}
.mf-toolbar input[type="color"]{width:54px;height:36px;margin:0;padding:3px;border:1px solid #d7dde8;border-radius:9px;background:#fff;cursor:pointer}
.mf-f-size{flex:0 0 132px}
.mf-f-platform{flex:0 1 236px}
.mf-f-bg{flex:0 0 auto}   /* sizes to the "Background" label; swatch stays swatch-sized */
.mf-f-url{flex:1 1 220px}
.mf-f-loops{flex:0 0 74px}
.mf-f-toggle{flex:0 0 auto}
.mf-f-sync{flex:0 0 auto}
.mf-check{display:flex;align-items:center;gap:7px;height:36px;font-size:13px;font-weight:600;color:#37445a;text-transform:none;letter-spacing:0;white-space:nowrap;cursor:pointer}
.mf-check input{margin:0}
.mf-check.mf-disabled{opacity:.45;cursor:not-allowed}
.mf-check.mf-desynced{color:#6d3bff}   /* this size has its own content (unsynced) */
.mf-tb-div{flex:0 0 auto;width:1px;height:26px;background:#e3e8f1}
.mf-btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px;border-radius:9px;border:1px solid #d7dde8;
  background:#fff;color:#22314a;font:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.mf-btn:hover{background:#f3f6fb;border-color:#c3cddd}
.mf-btn i{font-size:12px}
.mf-btn-sm{height:30px;padding:0 11px;font-size:12px}
/* Undo / Redo — icon-only, square, and they lead the actions row */
.mf-btn-ico{padding:0;width:36px;justify-content:center;gap:0}
.mf-btn-ico i{font-size:13px}
.mf-btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}
.mf-tb-sep{width:1px;height:22px;background:#dde3ec;flex:none;margin:0 3px}
html.dark .mf-tb-sep{background:#2a3446}
.mf-btn-pri{background:#1159da;border-color:#1159da;color:#fff}
.mf-btn-pri:hover{background:#0e4cbc;border-color:#0e4cbc}
.mf-btn-play{background:#0b1d33;border-color:#0b1d33;color:#fff}
.mf-btn-play:hover{background:#12294a;border-color:#12294a}
.mf-btn:disabled{opacity:.55;cursor:default}
.mf-add-grp{display:flex;gap:7px;flex-wrap:wrap}

/* ── editor grid ──────────────────────────────────────────────────────── */
/* right column trimmed 264→248: the canvas is the workspace and the panel was
   the emptier of the two. */
/* Two columns since 2026-08-02: the 248px inspector was retired into the
   properties bar above the canvas, and the canvas took the width. */
.mf-editor{display:grid;grid-template-columns:216px minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:1100px){.mf-editor{grid-template-columns:1fr;}}

.mf-col-h{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#5d6b81;margin:0}
.mf-col-left,.mf-col-canvas,.mf-col-insp{min-width:0}

/* panel header row (Frames / Layers) with icon actions */
.mf-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px}
.mf-panel-head:not(:first-child){margin-top:2px}
.mf-panel-tools{display:flex;gap:2px}
.mf-icon-btn{display:grid;place-items:center;width:24px;height:24px;border:1px solid #dfe4ec;border-radius:7px;
  background:#fff;color:#5d6b81;cursor:pointer;font-size:11px;transition:background .12s,border-color .12s,color .12s}
.mf-icon-btn:hover{background:#eef4ff;border-color:#1159da;color:#1159da}
.mf-icon-btn.on{background:#eef4ff;border-color:#1159da;color:#1159da}
.mf-layer-filter{width:100%;border:1px solid #d7dde8;border-radius:8px;background:#fff;padding:6px 9px;font:inherit;
  font-size:12.5px;color:#1c2737;margin-bottom:8px}
.mf-layer-filter:focus{outline:none;border-color:#1159da;box-shadow:0 0 0 2px rgba(17,89,218,.12)}
.mf-layer-filter[hidden]{display:none}

/* frames strip */
.mf-frames{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.mf-frame{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 12px;border-radius:10px;
  border:1.5px solid #d7dde8;background:#fff;cursor:pointer;font:inherit;text-align:left;transition:border-color .15s,background .15s}
.mf-frame b{font-size:13px;color:#1c2737}
.mf-frame span{font-size:11.5px;color:#6b7890}
.mf-frame:hover{border-color:#b9c6da}
.mf-frame.active{border-color:#1159da;background:#eef4ff}
.mf-frame.active b{color:#1159da}
.mf-frame-add{display:flex;align-items:center;justify-content:center;gap:7px;padding:8px;border-radius:10px;
  border:1.5px dashed #c3cddd;background:none;color:#5d6b81;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.mf-frame-add:hover{border-color:#1159da;color:#1159da}
.mf-total{font-size:12px;color:#6b7890;margin:-6px 0 14px}
.mf-warn-txt{color:#c2410c}

/* layer list */
.mf-layers{display:flex;flex-direction:column;gap:5px}
.mf-layer{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:9px;border:1px solid transparent;
  background:#f5f7fb;cursor:pointer;user-select:none}
.mf-layer:hover{background:#eef2f9}
.mf-layer.active{border-color:#1159da;background:#eef4ff}
.mf-layer.off .mf-l-name,.mf-layer.off .mf-l-ico{opacity:.4}
.mf-layer.carried{background:rgba(124,92,255,.06)}
.mf-layer.carried .mf-eye{color:#7c5cff}
.mf-l-ico{font-size:11px;color:#5d6b81;width:14px;text-align:center}
.mf-l-name{flex:1;font-size:12.5px;font-weight:600;color:#22314a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-l-stay{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#7c5cff;
  background:rgba(124,92,255,.12);padding:1px 5px;border-radius:20px;margin-left:5px;vertical-align:1px}
.mf-eye{border:0;background:none;color:#5d6b81;cursor:pointer;font-size:12px;padding:2px}
.mf-eye:hover{color:#1159da}
.mf-l-btns{display:flex;gap:2px;opacity:0;transition:opacity .12s}
.mf-layer:hover .mf-l-btns,.mf-layer.active .mf-l-btns{opacity:1}
.mf-l-btns button{border:0;background:none;color:#6b7890;cursor:pointer;font-size:11px;padding:3px 4px;border-radius:5px}
.mf-l-btns button:hover{background:#dde6f3;color:#1c2737}
.mf-layer.locked{background:#f1f2f6}
.mf-layer.locked .mf-l-name{color:#8b96a8;font-style:italic}
.mf-layer.locked .mf-l-btns{opacity:1}
.mf-layer.locked .mf-l-btns [data-act="lock"]{color:#c2410c}
.mf-layers-empty{font-size:12.5px;color:#8b96a8;padding:10px 4px}

/* canvas */
/* ── contextual element toolbar, docked directly above the canvas ──────────
   The edits you reach for constantly, next to the thing you are editing, so a
   quick tweak is not a trip to the far right panel and back. Wraps to a second
   row rather than scrolling — a hidden control on a toolbar is a lost one. */
.mf-eltb{margin:0 0 8px;padding:8px 10px;border:1px solid #dfe5ee;border-radius:10px;background:#f7f9fd}
.mf-eltb[hidden]{display:none}
/* Two explicit rows rather than one wrapping strip: the constant edits must stay
   put on the top line instead of reshuffling every time a longer font name or an
   extra control changes how the flow wraps. */
.mf-eltb-r{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.mf-eltb-r2{margin-top:8px;padding-top:8px;border-top:1px solid #e6ecf5}
.mf-eltb-sub{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#8b96a8}
.mf-eltb-div{width:1px;height:20px;background:#dbe2ee}
.mf-eltb-grow{flex:1 1 240px}
.mf-eltb-grow input{width:100%}
.mf-eltb-chk{height:auto;font-size:12.5px;white-space:nowrap}
.mf-eltb-build{margin-left:auto;font-size:11.5px;font-weight:600;color:#7b8598;white-space:nowrap}
html.dark .mf-eltb-r2{border-top-color:#26304a}
html.dark .mf-eltb-sub,html.dark .mf-eltb-build{color:#93a1b8}
html.dark .mf-eltb-div{background:#2c3750}
.mf-eltb-lbl{font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#3b4a63;
  background:#e6ecf8;border-radius:999px;padding:3px 9px}
.mf-eltb-tag{font-size:9px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:#6d4bd8;
  background:#efe9ff;border-radius:999px;padding:2px 7px}
.mf-eltb-note{font-size:12px;color:#6b7686}
.mf-eltb-f{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:#7b8598}
.mf-eltb-f select,.mf-eltb-f input{margin:0;height:28px;padding:0 7px;border:1px solid #d7dde8;border-radius:7px;
  background:#fff;color:#22314a;font:inherit;font-size:12.5px;font-weight:600;text-transform:none;letter-spacing:0}
.mf-eltb-f input[type=number]{width:62px}
.mf-eltb-col input[type=color]{width:34px;padding:2px;cursor:pointer}
.mf-eltb-del{margin-left:auto;color:#b91c1c;border-color:#f0cccc}
.mf-eltb-del:hover{background:#fef2f2;border-color:#e2a8a8}
html.dark .mf-eltb{background:#131b2b;border-color:#2a3446}
html.dark .mf-eltb-lbl{background:#1e2942;color:#c7d2e6}
html.dark .mf-eltb-tag{background:#2a2140;color:#c2aeff}
html.dark .mf-eltb-note{color:#93a1b8}
html.dark .mf-eltb-f{color:#93a1b8}
html.dark .mf-eltb-f select,html.dark .mf-eltb-f input{background:#0f1725;border-color:#2c3750;color:#e6ecf7}
html.dark .mf-eltb-del{color:#f28b8b;border-color:#4a2a2a}
html.dark .mf-eltb-del:hover{background:#3a1c1c}

.mf-canvas-wrap{position:relative;min-height:460px;border-radius:12px;border:1px solid #dfe5ee;overflow:hidden;
  display:grid;grid-template:1fr / 1fr}
.mf-canvas-wrap.mf-has-rulers{grid-template:22px 1fr / 22px 1fr}
.mf-canvas-scroll{position:relative;overflow:auto;display:flex;align-items:center;justify-content:center;padding:20px;
  background:#eef1f6 repeating-conic-gradient(#e4e9f1 0% 25%, #eef1f6 0% 50%) 0 0/22px 22px}
.mf-canvas-wrap.mf-has-rulers .mf-canvas-scroll{grid-column:2;grid-row:2}
.mf-stage-outer{position:relative;flex:none;box-shadow:0 8px 24px rgba(15,30,60,.16)}
/* add-layer bar sits directly above the canvas so it's clear what it adds to */
.mf-canvas-tools{display:flex;align-items:center;gap:7px;margin-bottom:10px;flex-wrap:wrap}
.mf-canvas-tools-lbl{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#8b96a8;margin-right:2px}
.mf-stage{position:relative;overflow:hidden;transform-origin:0 0}
.mf-el{position:absolute;box-sizing:border-box;cursor:grab}
.mf-el:active{cursor:grabbing}
.mf-el.mf-sel{outline:1.5px solid #1159da;outline-offset:0}
.mf-el.mf-locked{pointer-events:none;cursor:default}
/* carried = a "stay on screen" layer shown on a later frame so its depth is visible (editor-only) */
/* typing straight on the canvas (double-click a text or button layer) — the
   caret needs a text cursor, not the grab hand, and a clear "you are editing
   this one" ring that reads against any artwork behind it */
.mf-el[contenteditable]{cursor:text;outline:2px solid #1159da;outline-offset:1px;
  box-shadow:0 0 0 4px rgba(17,89,218,.16)}
.mf-el[contenteditable]:focus{outline-color:#1159da}
.mf-el.mf-carried{cursor:pointer;outline:1.4px dashed rgba(124,92,255,.85);outline-offset:1px}
.mf-el.mf-carried.mf-sel{outline:1.6px solid #7c5cff}
.mf-keyline{position:absolute;inset:0;border:1px solid rgba(0,0,0,.3);pointer-events:none}
.mf-handle{position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid #1159da;
  transform:translate(-50%,-50%);z-index:5}
.mf-h-nw,.mf-h-se{cursor:nwse-resize}
/* rotate handle — floats above the top edge on a short stalk (a pseudo-element,
   so there is nothing extra for the render to position). Replaces the Rotate
   number field: you turn a thing by turning it. */
.mf-h-rot{cursor:grab;width:12px;height:12px}
.mf-h-rot:active{cursor:grabbing}
.mf-h-rot::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:12px;
  margin-left:-1px;background:#1159da;border-radius:1px}
.mf-h-rot::before{content:"\f2f1";font:900 7px/1 "Font Awesome 6 Free";position:absolute;
  left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;color:#1159da}
.mf-h-ne,.mf-h-sw{cursor:nesw-resize}

/* REPLACE, on a selected image. Sits just outside the top-right corner so it
   never covers the corner handle, and above everything so a big image cannot
   swallow it. Drawn with the handles, so it stays this size at any zoom. */
.mf-el-swap{position:absolute;z-index:7;transform:translate(6px,-50%);
  width:26px;height:26px;display:grid;place-items:center;padding:0;cursor:pointer;
  border:2px solid #1159da;border-radius:50%;background:#fff;color:#1159da;font-size:11px;
  box-shadow:0 2px 8px rgba(17,35,70,.22)}
.mf-el-swap:hover{background:#1159da;color:#fff}
html.dark .mf-el-swap{background:#111a2e;border-color:#5b8cff;color:#9dbcff}
html.dark .mf-el-swap:hover{background:#5b8cff;color:#0b1020}

/* ── top block: sizes | divider | export actions ───────────────────────
   ⚠ This only fits because the status chip LEFT this row (it moved down to
   its own panel). With it here the action column measured 427px of an 866px
   panel and the chips wrapped to EIGHT rows; without it the column is ~315px
   and the chips hold 4 — same as full width, and now the two areas are
   visually separated. */
.mf-topgrid{display:flex;align-items:stretch;gap:14px}
.mf-size-chips{display:flex;align-items:center;flex-wrap:wrap;align-content:flex-start;gap:6px;flex:1;min-width:0}
/* the rule between the two areas — a border on the actions column rather than
   an empty element, so there is nothing extra for flex to size or wrap */
.mf-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px;flex:none;
  padding-left:14px;border-left:1px solid #e3e8f1}
.mf-actions-row{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.mf-export-btn{justify-content:center;white-space:nowrap}
html.dark .mf-actions{border-left-color:#2a3446}
@media (max-width:760px){
  /* stacked: the rule turns horizontal, or it would be a stray vertical line */
  .mf-topgrid{flex-direction:column;gap:10px}
  .mf-actions{padding-left:0;padding-top:12px;border-left:0;border-top:1px solid #e3e8f1}
  .mf-actions-row{justify-content:flex-start;flex-wrap:wrap}
  html.dark .mf-actions{border-top-color:#2a3446}
}

/* the readiness chip on its own line, above the panel it opens */
.mf-statusline{display:flex;justify-content:flex-end;margin:10px 0 0}

/* export dialog: the size picker grid */
.mf-export-box{max-width:520px;width:100%}
.mf-export-quick{display:flex;gap:8px;margin:0 0 10px}
.mf-export-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px;max-height:300px;overflow-y:auto;
  padding:2px 2px 2px 0;margin:0 0 14px}
.mf-exp-size{display:flex;align-items:center;gap:7px;border:1px solid #d9dee8;border-radius:9px;padding:7px 9px;
  cursor:pointer;font-size:12px;font-weight:700;color:#3d4a5f;font-variant-numeric:tabular-nums;background:#fff}
.mf-exp-size:hover{border-color:#9db4dd}
.mf-exp-size input{accent-color:#1159da;width:14px;height:14px;margin:0;cursor:pointer;flex:none}
.mf-exp-size em{font-style:normal;font-size:8px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;opacity:.6;margin-left:auto}
.mf-exp-size.locked{opacity:.55;cursor:not-allowed}
.mf-exp-size.locked input{cursor:not-allowed}
html.dark .mf-exp-size{background:#131b2b;border-color:#2c3750;color:#c7d2e6}

/* carried-layer banner at the top of the inspector */
.mf-insp-carry{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:8px 10px;border:1px solid #d7ddf5;
  border-radius:9px;background:#f3f5fd;font-size:11.5px;color:#41506a;line-height:1.35}
.mf-insp-carry i{color:#1159da;flex:none}
.mf-insp-carry span{flex:1;min-width:0}
.mf-insp-carry .mf-btn{flex:none;white-space:nowrap}
html.dark .mf-insp-carry{background:#141c30;border-color:#2c3750;color:#a9b8d2}
.mf-size-lbl{font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#7b879b;margin-right:3px}
.mf-size-chip{position:relative;display:inline-flex;align-items:center;gap:5px;border:1px solid #d9dee8;
  background:#fff;color:#3d4a5f;font:inherit;font-size:11.5px;font-weight:700;border-radius:999px;
  padding:4px 11px;cursor:pointer;font-variant-numeric:tabular-nums;line-height:1;transition:.12s}
.mf-size-chip:hover{border-color:#9db4dd;color:#1159da}
.mf-size-chip.on{background:#1159da;border-color:#1159da;color:#fff}
.mf-size-chip em{font-style:normal;font-size:8px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;opacity:.6}
.mf-size-chip.on em{opacity:.85}
.mf-size-add{border-style:dashed;color:#1159da;background:transparent}
.mf-size-add:hover{border-color:#1159da}
/* the remove × on a custom chip — an <i>, not a nested button (invalid HTML);
   the row's delegated handler catches it before the chip switch runs */
.mf-chip-x{font-style:normal;display:inline-grid;place-items:center;width:14px;height:14px;margin:-2px -5px -2px 0;
  border-radius:50%;font-size:11px;line-height:1;opacity:.55}
.mf-chip-x:hover{opacity:1;background:rgba(0,0,0,.14)}
.mf-size-chip.on .mf-chip-x:hover{background:rgba(255,255,255,.25)}
html.dark .mf-size-chip{background:#131b2b;border-color:#2c3750;color:#c7d2e6}
html.dark .mf-size-chip:hover{border-color:#4a6db3;color:#8fb3ff}
html.dark .mf-size-chip.on{background:#2f6bff;border-color:#2f6bff;color:#fff}
html.dark .mf-size-lbl{color:#93a1b8}
html.dark .mf-size-add{background:transparent;color:#8fb3ff}

/* ── job dialog: client / campaign / name, shared by Save and Share ────── */
.mf-job-box{max-width:430px;width:100%}
.mf-job-f{display:block;margin:0 0 11px}
.mf-job-f>span:first-child{display:block;font-size:11px;font-weight:800;letter-spacing:.3px;
  text-transform:uppercase;color:#7b879b;margin:0 0 5px}
.mf-job-row{display:block}
.mf-job-row input{width:100%;box-sizing:border-box;border:1px solid #d9dee8;border-radius:9px;
  padding:9px 11px;font:inherit;font-size:13px;color:#1c2737;background:#fff}
.mf-job-row input:focus{outline:0;border-color:#1159da;box-shadow:0 0 0 3px rgba(17,89,218,.14)}
.mf-job-mode{margin:2px 0 12px;padding:10px 12px;border:1px solid #d9dee8;border-radius:10px;background:#f7f9fc}
.mf-job-mode[hidden]{display:none}
.mf-job-modelbl{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:#7b879b;margin:0 0 6px}
.mf-job-mode .mf-check{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#1c2737;margin:0 0 4px;cursor:pointer}
.mf-job-hint{margin:6px 0 0;font-size:11.5px;color:#7b879b;line-height:1.45}
.mf-job-acts{display:flex;justify-content:flex-end;gap:9px;margin-top:14px}
html.dark .mf-job-row input{background:#131b2b;border-color:#2c3750;color:#e6ecf7}
html.dark .mf-job-mode{background:#131b2b;border-color:#2c3750}
html.dark .mf-job-mode .mf-check{color:#e6ecf7}
html.dark .mf-job-f>span:first-child,html.dark .mf-job-modelbl,html.dark .mf-job-hint{color:#93a1b8}

/* "Sync to all sizes" now lives on the canvas bar, beside the size readout */
.mf-cbar-sync{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  color:#41506a;white-space:nowrap;cursor:pointer}
.mf-cbar-sync input{accent-color:#1159da;width:14px;height:14px;margin:0;cursor:pointer}
html.dark .mf-cbar-sync{color:#a9b8d2}

/* rulers along the WORKING AREA top+left (not the banner); ticks track the banner origin */
.mf-ruler-corner{grid-column:1;grid-row:1;background:#e9edf3;border-right:1px solid #d5dce6;border-bottom:1px solid #d5dce6}
.mf-canvas-wrap.mf-has-rulers .mf-ruler-top{grid-column:2;grid-row:1}
.mf-canvas-wrap.mf-has-rulers .mf-ruler-left{grid-column:1;grid-row:2}
.mf-ruler{position:relative;background:#eef1f6;overflow:hidden;cursor:crosshair;user-select:none;touch-action:none}
.mf-ruler-top{border-bottom:1px solid #d5dce6}
.mf-ruler-left{border-right:1px solid #d5dce6}
.mf-rtick{position:absolute;pointer-events:none}
.mf-ruler-top .mf-rtick{bottom:0;left:var(--p);width:1px;height:4px;background:#cbd3df}
.mf-ruler-top .mf-rtick.maj{height:7px;background:#9aa6b8}
.mf-ruler-top .mf-rtick.maj b{position:absolute;left:3px;top:-12px;font:600 9px/1 ui-sans-serif,system-ui;color:#8b96a8;font-style:normal;white-space:nowrap}
.mf-ruler-left .mf-rtick{right:0;top:var(--p);height:1px;width:4px;background:#cbd3df}
.mf-ruler-left .mf-rtick.maj{width:7px;background:#9aa6b8}
.mf-ruler-left .mf-rtick.maj b{position:absolute;right:9px;top:-5px;font:600 9px/1 ui-sans-serif,system-ui;color:#8b96a8;font-style:normal;white-space:nowrap;transform:rotate(-90deg);transform-origin:right center}
.mf-guides{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.mf-guide{position:absolute;pointer-events:auto}
.mf-guide.v{top:0;bottom:0;width:1px;background:#12b5cb;cursor:ew-resize}
.mf-guide.h{left:0;right:0;height:1px;background:#12b5cb;cursor:ns-resize}
.mf-guide::after{content:"";position:absolute}   /* wider invisible hit area for the 1px line */
.mf-guide.v::after{top:0;bottom:0;left:-4px;right:-4px}
.mf-guide.h::after{left:0;right:0;top:-4px;bottom:-4px}
.mf-guide-lbl{position:absolute;background:#12b5cb;color:#fff;font:600 10px/1 ui-sans-serif,system-ui;padding:2px 5px;
  border-radius:4px;opacity:0;pointer-events:none;white-space:nowrap;transition:opacity .1s}
.mf-guide.v .mf-guide-lbl{top:3px;left:4px}
.mf-guide.h .mf-guide-lbl{left:4px;top:3px}
.mf-guide:hover .mf-guide-lbl,.mf-guide.dragging .mf-guide-lbl,.mf-guide.creating .mf-guide-lbl{opacity:1}
.mf-guide.will-delete,.mf-guide.will-delete .mf-guide-lbl{background:#ef4444}
.mf-guide.mf-guide-off{display:none}
.mf-ruler-toggle.active{background:#1159da;border-color:#1159da;color:#fff}

/* canvas control bar */
.mf-canvas-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:9px;flex-wrap:wrap}
.mf-cbar-info{font-size:12px;color:#5d6b81;display:flex;align-items:center;gap:8px}
.mf-cbar-info b{color:#1c2737;font-variant-numeric:tabular-nums}
.mf-cbar-sep{color:#c3cddd}
/* ⚠ these used to be SOLID green / solid blue, which made them read as primary
   actions competing with Export — the one filled button on the page. They are
   view controls, so they are quiet now: outlined, with the colour carried by
   the icon alone. Export stays the only solid button in the editor. */
.mf-play-inline{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;
  border:1px solid #dfe4ec;border-radius:7px;background:#fff;color:#44526b;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:700;transition:border-color .12s,color .12s,background .12s}
.mf-play-inline:hover{background:#f5f8ff;border-color:#b9c9e6;color:#1c2737}
.mf-play-inline i{font-size:11px;color:#0e7d3f}          /* Play = green icon */
.mf-play-full i{color:#1159da}                            /* Preview = blue icon */
/* the two animation controls live together on the canvas bar: Play = this frame
   inline, Preview animation = the whole banner full-size */
.mf-cbar-play{display:flex;align-items:center;gap:6px}
html.dark .mf-play-inline{background:#131b2b;border-color:#2c3750;color:#c7d2e6}
html.dark .mf-play-inline:hover{background:#1a2437;border-color:#4a6db3;color:#e6ecf7}
html.dark .mf-play-inline i{color:#3fbf6a}
html.dark .mf-play-full i{color:#6f9dff}
.mf-cbar-zoom{display:flex;align-items:center;gap:4px}
.mf-zbtn{display:grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border:1px solid #dfe4ec;border-radius:7px;
  background:#fff;color:#44526b;cursor:pointer;font:inherit;font-size:13px;font-weight:600}
.mf-zbtn:hover{background:#eef4ff;border-color:#1159da;color:#1159da}
.mf-zpct{min-width:52px;height:28px;border:1px solid #dfe4ec;border-radius:7px;background:#fff;color:#1c2737;cursor:pointer;
  font:inherit;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.mf-zpct:hover{background:#eef4ff;border-color:#1159da;color:#1159da}
.mf-zfit{font-size:12px;font-weight:700}
.mf-zfit.active{background:#1159da;border-color:#1159da;color:#fff}
.mf-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:#8b96a8;text-align:center;padding:20px;pointer-events:none}
.mf-empty i{font-size:26px;color:#b6c0d2}
.mf-empty b{font-size:14px;color:#5d6b81}
.mf-empty span{font-size:12.5px;max-width:320px;line-height:1.5}

/* client / campaign context bar — names travel with a PRO server save */
.mf-ctx{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:9px 12px;border-top:1px solid #e8ecf4;
  background:#f7f9fd}
.mf-ctx-lbl{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;color:#6b7890;
  letter-spacing:.02em;text-transform:uppercase}
.mf-ctx-lbl:not(:first-child){margin-left:8px}
.mf-ctx-lbl i{color:#9aa6ba}
.mf-ctx-sel{max-width:190px;padding:5px 8px;border:1px solid #d8dfea;border-radius:7px;background:#fff;
  font:inherit;font-size:12.5px;color:#22304a}
.mf-ctx-sel:disabled{background:#eef1f7;color:#98a3b5}
.mf-ctx-name{flex:1;min-width:170px;padding:5px 9px;border:1px solid #d8dfea;border-radius:7px;background:#fff;
  font:inherit;font-size:12.5px;color:#22304a}
.mf-ctx-name:focus,.mf-ctx-sel:focus{outline:2px solid rgba(17,89,218,.35);outline-offset:1px;border-color:#1159da}
.mf-ctx-btn{width:26px;height:26px;flex:none;border:1px solid #d8dfea;border-radius:7px;background:#fff;cursor:pointer;
  color:#6b7890;font-size:12.5px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.mf-ctx-btn:hover{border-color:#1159da;color:#1159da}
.mf-btn-save.mf-pro-locked,.mf-btn-share.mf-pro-locked{opacity:.72}
.mf-btn-save.mf-pro-locked::after,.mf-btn-share.mf-pro-locked::after{content:"PRO";margin-left:6px;font-size:9.5px;
  font-weight:800;letter-spacing:.04em;background:#eef2fb;color:#1159da;border-radius:4px;padding:1px 4px;vertical-align:1px}

/* hosted preview link output */
.mf-share-out{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;padding:10px 12px;
  border:1px solid #cfe0ff;border-radius:10px;background:#f2f7ff}
.mf-share-lbl{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:#0f45a8;
  letter-spacing:.01em;white-space:nowrap}
.mf-share-out input{flex:1;min-width:200px;padding:6px 9px;border:1px solid #cbd8ee;border-radius:7px;background:#fff;
  font:inherit;font-size:12.5px;color:#22304a}
html.dark .mf-share-out{background:#111b2c;border-color:#2b4066}
html.dark .mf-share-lbl{color:#9dc2ff}
html.dark .mf-share-out input{background:#0f1725;border-color:#2a3547;color:#dfe7f5}

/* my saved banners */
.mf-open-box{max-width:640px;width:min(94vw,640px)}
.mf-open-list{margin-top:12px;max-height:min(56vh,420px);overflow:auto;display:flex;flex-direction:column;gap:7px}
.mf-open-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid #e3e8f1;border-radius:9px;
  background:#fff}
.mf-open-row:hover{border-color:#c9d5e8;background:#fbfcff}
.mf-open-main{min-width:0;display:flex;flex-direction:column;gap:1px}
.mf-open-main b{font-size:13px;color:#22304a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mf-open-who{font-size:11.5px;color:#7b8699}
.mf-open-meta{margin-left:auto;font-size:11px;color:#8b96a8;white-space:nowrap;flex:none}
.mf-open-acts{display:flex;gap:5px;flex:none}
.mf-open-acts .mf-btn{padding:5px 10px;font-size:12px}
.mf-open-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:34px 20px;
  text-align:center;color:#8b96a8}
.mf-open-empty i{font-size:24px;color:#b6c0d2}
.mf-open-empty b{font-size:13.5px;color:#5d6b81}
.mf-open-empty span{font-size:12.5px;max-width:360px;line-height:1.55}
html.dark .mf-ctx{background:#141c2a;border-top-color:#2a3547}
html.dark .mf-ctx-sel,html.dark .mf-ctx-name,html.dark .mf-ctx-btn{background:#0f1725;border-color:#2a3547;color:#dfe7f5}
html.dark .mf-ctx-sel:disabled{background:#151d2b;color:#6b7890}
html.dark .mf-open-row{background:#111a28;border-color:#2a3547}
html.dark .mf-open-row:hover{background:#152032;border-color:#38455c}
html.dark .mf-open-main b{color:#e6edf9}

/* drag & drop images onto the working area → new layers */
.mf-canvas-wrap.mf-drop-on{border-color:#1159da;box-shadow:inset 0 0 0 2px rgba(17,89,218,.35)}
.mf-canvas-wrap.mf-drop-on::after{content:"\f302\00a0\00a0Drop images to add layers";font-family:"Font Awesome 6 Free","Inter",system-ui,sans-serif;
  font-weight:900;position:absolute;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;
  background:rgba(17,89,218,.09);color:#0f45a8;font-size:14px;letter-spacing:.01em;pointer-events:none;
  backdrop-filter:blur(1px)}
html.dark .mf-canvas-wrap.mf-drop-on{border-color:#5b9bff;box-shadow:inset 0 0 0 2px rgba(91,155,255,.4)}
html.dark .mf-canvas-wrap.mf-drop-on::after{background:rgba(91,155,255,.14);color:#bcd6ff}

/* inspector — tabbed */
.mf-inspector{display:flex;flex-direction:column;gap:14px}
.mf-frame-dur{align-items:center}
.mf-frame-dur input{width:78px}
.mf-frame-dur .mf-unit{font-size:12px;color:#6b7890;font-weight:600}
.mf-frame-actions{margin-left:auto;display:flex;gap:6px}
.mf-mini-danger:hover{border-color:#dc7c5c;color:#c2410c}
.mf-bg-row{display:flex;align-items:center;gap:8px}
.mf-bg-row input[type="color"]{width:44px;flex:none}
.mf-bg-row input[type="text"]{flex:1;text-transform:uppercase;font-variant-numeric:tabular-nums}
.mf-insp-grp.mf-insp-quiet{border-color:transparent;background:#f5f7fb;color:#77839a;font-size:11.5px;font-weight:600;
  padding:9px 12px;display:flex;align-items:center;gap:7px}
.mf-insp-quiet i{color:#8b96a8}
.mf-insp-tip{font-size:11px;color:#8b96a8;line-height:1.5;margin:8px 0 0}
.mf-insp-grp{border:1px solid #e3e8f1;border-radius:12px;padding:12px 13px;background:#fbfcfe}
.mf-insp-h{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#44526b;margin:0 0 9px;
  display:flex;align-items:center;gap:7px}
.mf-insp-h i{color:#1159da;font-size:11px}
.mf-insp-none{font-size:12.5px;color:#77839a;line-height:1.55;padding:4px 2px}
.mf-insp-none .mf-btn{margin-top:8px}
.mf-hint{font-size:10.5px;color:#8b96a8;text-transform:none;letter-spacing:0;font-weight:500;align-self:center}
.mf-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.mf-row:last-child{margin-bottom:0}
.mf-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:8px}
.mf-grid2{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:8px}
.mf-grid2:last-child,.mf-grid4:last-child{margin-bottom:0}
.mf-inspector label{display:flex;flex-direction:column;gap:3px;font-size:10.5px;font-weight:700;color:#5d6b81;min-width:0}
.mf-inspector label.mf-wide{flex:1}
.mf-inspector .mf-row > .mf-btn.mf-wide{flex:1;justify-content:center}
.mf-inspector input,.mf-inspector select,.mf-inspector textarea{
  border:1px solid #d7dde8;border-radius:7px;background:#fff;padding:6px 8px;font:inherit;font-size:12.5px;color:#1c2737;min-width:0;width:100%}
.mf-inspector input[type="color"]{padding:2px;height:31px;cursor:pointer}
.mf-inspector textarea{resize:vertical;height:50px;min-height:50px;line-height:1.4}   /* ~2 lines — beats the site-global textarea{height:165px} */
.mf-inspector .mf-row label:not(.mf-wide) input{width:76px}
.mf-mini-btn{border:1px solid #d7dde8;background:#fff;border-radius:7px;padding:5px 9px;color:#44526b;cursor:pointer;font-size:11px}
.mf-mini-btn:hover{background:#f3f6fb}

/* ── preview overlay ──────────────────────────────────────────────────── */
.mf-prev-ov{position:fixed;inset:0;z-index:140;background:rgba(8,14,24,.78);display:flex;align-items:center;justify-content:center;padding:24px}
.mf-prev-ov[hidden]{display:none}   /* author display:flex would otherwise beat the [hidden] UA rule */
.mf-prev-box{background:#101a2b;border:1px solid #24344e;border-radius:16px;padding:22px;max-width:min(94vw,1100px);
  display:flex;flex-direction:column;align-items:center;gap:14px}
.mf-prev-stage-clip{position:relative;overflow:hidden;border-radius:4px;box-shadow:0 14px 40px rgba(0,0,0,.5)}
#mfPrevStage{transform-origin:0 0}
.mf-prev-cap{color:#9fb4cf;font-size:12.5px;min-height:16px}
.mf-prev-btns{display:flex;gap:10px}

/* ── custom size modal ────────────────────────────────────────────────── */
.mf-custom-ov{position:fixed;inset:0;z-index:150;background:rgba(8,14,24,.6);display:flex;align-items:center;justify-content:center;padding:24px}
.mf-custom-ov[hidden]{display:none}   /* same [hidden]-vs-display:flex guard as the preview overlay */
.mf-custom-box{position:relative;background:#fff;border-radius:14px;padding:20px 22px 22px;width:min(92vw,390px);box-shadow:0 18px 50px rgba(6,16,32,.35)}
.mf-custom-box h4{margin:0 26px 6px 0;font-size:15.5px;font-weight:800;color:#14202f;display:flex;align-items:center;gap:8px}
.mf-custom-box h4 i{color:#1159da;font-size:13px}
.mf-custom-note{margin:0 0 14px;font-size:12px;color:#6b7890;line-height:1.5}
.mf-custom-x{position:absolute;top:10px;right:10px;width:28px;height:28px;border:1px solid #dfe4ec;border-radius:8px;
  background:#fff;color:#5b6675;font-size:13px;cursor:pointer;display:grid;place-items:center}
.mf-custom-x:hover{color:#c2410c;border-color:#e7b9a5}
.mf-custom-fields{display:flex;align-items:flex-end;gap:10px;margin-bottom:16px}
.mf-custom-fields label{display:flex;flex-direction:column;gap:4px;flex:1;font-size:10.5px;font-weight:700;color:#5d6b81;
  text-transform:uppercase;letter-spacing:.04em}
.mf-custom-fields input{border:1px solid #d7dde8;border-radius:8px;background:#fff;padding:8px 10px;font:inherit;font-size:14px;color:#1c2737;width:100%}
.mf-custom-fields input:focus{outline:none;border-color:#1159da;box-shadow:0 0 0 2px rgba(17,89,218,.12)}
.mf-custom-times{color:#8b96a8;font-size:14px;font-weight:700;padding-bottom:9px}
.mf-custom-btns{display:flex;justify-content:flex-end;gap:9px}
html.dark .mf-custom-box{background:#141c29}
html.dark .mf-custom-box h4{color:#e7ecf5}
html.dark .mf-custom-x{background:#1a2333;border-color:#2a3547;color:#c3cddd}
html.dark .mf-custom-fields input{background:#171f2c;border-color:#2a3547;color:#e7ecf5}
html.dark .mf-custom-fields label{color:#93a1b8}
html.dark .mf-custom-note{color:#8b98ad}

/* ── CTA template picker (reuses .mf-custom-ov overlay) ────────────────── */
.mf-cta-box{width:min(94vw,520px)}
.mf-cta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.mf-cta-swatch{display:flex;flex-direction:column;align-items:center;gap:8px;padding:15px 10px;border:1px solid #dbe1ec;border-radius:11px;background:#f7f9fc;cursor:pointer;font:inherit;transition:border-color .12s,box-shadow .12s,transform .12s}
.mf-cta-swatch:hover{border-color:#1159da;box-shadow:0 5px 16px rgba(17,89,218,.16);transform:translateY(-1px)}
.mf-cta-chip{display:inline-flex;align-items:center;justify-content:center;min-width:108px;padding:9px 16px;font-size:13px;line-height:1;white-space:nowrap;box-sizing:border-box}
.mf-cta-swatch small{font-size:10.5px;font-weight:700;color:#5d6b81;text-transform:uppercase;letter-spacing:.05em}
html.dark .mf-cta-swatch{background:#141b26;border-color:#2a3547}
html.dark .mf-cta-swatch:hover{border-color:#3f76e0}
html.dark .mf-cta-swatch small{color:#93a1b8}
@media (max-width:420px){.mf-cta-grid{grid-template-columns:1fr}}

/* ── maximize (focus) mode — canvas column fills the window ────────────── */
body.mf-body-lock{overflow:hidden}
.tool.mf-maximized{position:fixed;inset:0;z-index:130;background:#eef1f6;overflow:auto;padding:14px 18px}
html.dark .tool.mf-maximized{background:#0f141c}
.tool.mf-maximized .mf-appbar,.tool.mf-maximized .mf-reqs-panel{display:none}
.tool.mf-maximized .mf-editor{grid-template-columns:200px minmax(0,1fr) 250px}
.tool.mf-maximized .mf-canvas-wrap{min-height:calc(100vh - 190px)}
/* visible exit affordance — only shown in full view (also: ⛶ flips to a compress icon, and Esc works) */
.mf-exit-full{display:none}
.tool.mf-maximized .mf-exit-full{display:inline-flex;align-items:center;gap:8px;position:fixed;top:14px;right:18px;z-index:141;
  height:38px;padding:0 15px;border-radius:10px;border:0;background:#0b1d33;color:#fff;font:inherit;font-size:13px;font-weight:700;
  cursor:pointer;box-shadow:0 6px 22px rgba(6,16,32,.32)}
.tool.mf-maximized .mf-exit-full:hover{background:#12294a}
.mf-exit-full kbd{font:inherit;font-size:11px;font-weight:700;background:rgba(255,255,255,.2);border-radius:5px;padding:1px 6px}

/* ── timeline (Phase 2) ───────────────────────────────────────────────── */
.mf-tl{display:flex;gap:20px;align-items:stretch}
@media (max-width:820px){.mf-tl{flex-direction:column}}
.mf-tl-main{flex:1;min-width:0}
.mf-tl-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.mf-tl-label{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#5d6b81;display:flex;align-items:center;gap:7px}
.mf-tl-label i{color:#1159da}
.mf-tl-total{font-size:12px;color:#6b7890;font-variant-numeric:tabular-nums}
.mf-tl-total .mf-warn-txt{color:#c2410c}
.mf-tl-ruler{position:relative;height:15px}
.mf-tl-tick{position:absolute;top:0;font-size:10px;color:#9aa6b8;transform:translateX(-1px);font-variant-numeric:tabular-nums}
.mf-tl-track{position:relative;height:52px;border-radius:10px;border:1px solid #dfe5ee;background:#f5f7fb;overflow:hidden;touch-action:none}
.mf-tl-guide{position:absolute;top:0;width:1px;height:100%;background:#e6eaf1;pointer-events:none}
.mf-tl-block{position:absolute;top:4px;height:44px;border-radius:8px;background:linear-gradient(180deg,#e9eefb,#dbe6fb);
  border:1.5px solid #b7ccf2;box-sizing:border-box;cursor:grab;overflow:hidden;user-select:none;transition:border-color .12s}
.mf-tl-block:hover{border-color:#7ea6ec}
/* "+" block, sitting in the track right after the last frame. Same footprint and
   corner radius as a frame so it reads as "another one goes here", but dashed and
   unfilled so it is clearly a slot rather than a frame you already have. */
.mf-tl-addblock{position:absolute;top:4px;height:44px;border-radius:8px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;
  border:1.5px dashed #b7ccf2;background:transparent;color:#7ea6ec;font-size:15px;
  transition:border-color .12s,color .12s,background .12s}
.mf-tl-addblock:hover{border-color:#1159da;color:#1159da;background:rgba(17,89,218,.06)}
html.dark .mf-tl-addblock{border-color:#31405c;color:#5b7cb8}
html.dark .mf-tl-addblock:hover{border-color:#5b8cff;color:#8fb3ff;background:rgba(91,140,255,.10)}
.mf-tl-block.active{background:linear-gradient(180deg,#dce8ff,#c3d8fb);border-color:#1159da;box-shadow:inset 0 0 0 1px #1159da}
.mf-tl-block.dragging{opacity:.55;cursor:grabbing}
.mf-tl-block.resizing{border-color:#1159da}
.mf-tl-bname{position:absolute;left:9px;top:7px;font-size:11.5px;font-weight:700;color:#22314a;white-space:nowrap;pointer-events:none}
.mf-tl-bdur{position:absolute;left:9px;bottom:6px;font-size:11px;color:#5d6b81;font-variant-numeric:tabular-nums;pointer-events:none}
.mf-tl-btools{position:absolute;right:12px;top:6px;display:flex;gap:3px;opacity:0;transition:opacity .12s}
.mf-tl-block:hover .mf-tl-btools{opacity:1}
.mf-tl-btools button{border:0;background:rgba(255,255,255,.75);color:#5d6b81;width:19px;height:19px;border-radius:5px;cursor:pointer;font-size:10px;display:grid;place-items:center}
.mf-tl-btools button:hover{background:#fff;color:#c2410c}
.mf-tl-resize{position:absolute;right:0;top:0;width:9px;height:100%;cursor:ew-resize;z-index:3}
.mf-tl-resize::after{content:"";position:absolute;right:2px;top:50%;transform:translateY(-50%);width:2px;height:18px;border-radius:2px;background:#9db4d4;transition:background .12s}
.mf-tl-block:hover .mf-tl-resize::after,.mf-tl-block.active .mf-tl-resize::after{background:#1159da}
.mf-tl-track.reordering .mf-tl-block{cursor:grabbing}
.mf-tl-drop{position:absolute;top:0;width:3px;height:100%;background:#1159da;border-radius:2px;z-index:6;pointer-events:none}
.mf-tl-drop[hidden]{display:none}
.mf-tl-hint{font-size:11px;color:#9aa6b8;margin-top:8px}
.mf-tl-controls{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;padding-top:23px}
.mf-tl-ctl{display:flex;flex-direction:column;gap:6px}
.mf-tl-ctl-lbl{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#8b96a8}
.mf-tl-dur{display:flex;align-items:center;gap:5px}
.mf-tl-dur input{width:66px;height:30px;border:1px solid #d7dde8;border-radius:8px;background:#fff;padding:0 9px;font:inherit;font-size:13px;color:#1c2737}
.mf-tl-dur span{font-size:12px;color:#6b7890}
.mf-tl-snaps{display:flex;flex-direction:column;gap:6px}
.mf-check-sm{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#44526b;cursor:pointer}

/* ── export requirements & platform compatibility ─────────────────────── */
.mf-app .mf-reqs-panel{padding:0}
.mf-reqs-panel details{padding:0}
.mf-reqs-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;list-style:none;
  padding:15px 20px;font-size:13px;font-weight:700;color:#2a3547}
.mf-reqs-summary::-webkit-details-marker{display:none}
.mf-reqs-summary > span{display:flex;align-items:center;gap:9px}
.mf-reqs-summary i:first-child{color:#1159da}
.mf-reqs-chev{transition:transform .2s;color:#8b96a8;font-size:12px}
.mf-reqs-panel details[open] .mf-reqs-chev{transform:rotate(180deg)}
.mf-reqs-body{padding:2px 20px 20px}
.mf-reqs-lead{font-size:12.5px;color:#5d6b81;line-height:1.55;margin:0 0 14px}
.mf-reqs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px 18px}
.mf-reqs-row{display:flex;gap:11px;align-items:flex-start}
.mf-reqs-row > i{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:8px;
  background:#eef4ff;color:#1159da;font-size:12px;margin-top:1px}
.mf-reqs-row b{display:block;font-size:12.5px;color:#1c2737;margin-bottom:2px}
.mf-reqs-row span{display:block;font-size:12px;color:#6b7890;line-height:1.5}
.mf-reqs-row code{background:#eef1f6;border-radius:4px;padding:1px 5px;font-size:11px;color:#334155;font-family:ui-monospace,Menlo,monospace}
.mf-reqs-flow{font-size:12px;color:#6b7890;line-height:1.6;margin:16px 0 0;border-top:1px solid #eef1f6;padding-top:12px}
.mf-reqs-flow i{color:#1159da;margin-right:5px}
.mf-reqs-terms{background:none;border:0;color:#1159da;font-size:12px;text-decoration:underline;cursor:pointer;padding:0;margin-left:4px}

/* ── toast (own id — shared .toast has a documented cross-tool collision) ── */
#mfToast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:200;max-width:min(92vw,560px);
  background:#10233b;color:#fff;font-size:13px;font-weight:600;padding:11px 18px;border-radius:11px;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 10px 30px rgba(6,16,32,.35)}
#mfToast.show{opacity:1;transform:translate(-50%,0)}
#mfToast.warn{background:#7c2d12}

/* ── dark mode ────────────────────────────────────────────────────────── */
html.dark .mf-app .panel{background:#141a24}
html.dark .mf-toolbar select,html.dark .mf-toolbar input[type="text"],html.dark .mf-toolbar input[type="number"],
html.dark .mf-toolbar input[type="color"],
html.dark .mf-inspector input,html.dark .mf-inspector select,html.dark .mf-inspector textarea{
  background:#171f2c;border-color:#2a3547;color:#e7ecf5}
html.dark .mf-toolbar .mf-field,html.dark .mf-field-lbl{color:#93a1b8}
html.dark .mf-tb-div{background:#2a3547}
html.dark .mf-check{color:#c3cddd}
html.dark .mf-btn{background:#1a2333;border-color:#2a3547;color:#dde5f2}
html.dark .mf-btn:hover{background:#212c40;border-color:#37455e}
html.dark .mf-btn-pri{background:#1159da;border-color:#1159da;color:#fff}
html.dark .mf-btn-play{background:#0b1d33;border-color:#24344e}
html.dark .mf-frame{background:#171f2c;border-color:#2a3547}
html.dark .mf-frame b{color:#e7ecf5}
html.dark .mf-frame.active{background:#14243d;border-color:#3f76e0}
html.dark .mf-frame.active b{color:#7aa5f2}
html.dark .mf-layer{background:#171f2c}
html.dark .mf-layer.active{background:#14243d;border-color:#3f76e0}
html.dark .mf-l-name{color:#dde5f2}
html.dark .mf-canvas-wrap{border-color:#2a3547;
  background:#0f1520 repeating-conic-gradient(#131b29 0% 25%, #0f1520 0% 50%) 0 0/22px 22px}
html.dark .mf-ruler,html.dark .mf-ruler-corner{background:#1b2431}
html.dark .mf-ruler-top,html.dark .mf-ruler-left,html.dark .mf-ruler-corner{border-color:#2a3547}
html.dark .mf-rtick{background:#3a4658}
html.dark .mf-rtick.maj{background:#5b6b86}
html.dark .mf-rtick.maj b{color:#8b98ad}
html.dark .mf-guide.v,html.dark .mf-guide.h{background:#22c7de}
html.dark .mf-guide-lbl{background:#0e8ea0}
html.dark .mf-ruler-toggle.active{background:#1159da;border-color:#1159da;color:#fff}
html.dark .mf-insp-grp{background:#141c29;border-color:#26324566}
html.dark .mf-insp-h{color:#aab7cc}
html.dark .mf-col-h{color:#93a1b8}
html.dark .mf-mini-btn{background:#1a2333;border-color:#2a3547;color:#c3cddd}
html.dark .mf-total{color:#8b98ad}
/* Phase-1 components — dark */
html.dark .mf-icon-btn,html.dark .mf-zbtn,html.dark .mf-zpct,html.dark .mf-layer-filter{background:#171f2c;border-color:#2a3547;color:#c3cddd}
html.dark .mf-icon-btn:hover,html.dark .mf-zbtn:hover,html.dark .mf-zpct:hover{background:#14243d;border-color:#3f76e0;color:#7aa5f2}
html.dark .mf-icon-btn.on,html.dark .mf-zfit.active{background:#1159da;border-color:#1159da;color:#fff}
html.dark .mf-cbar-info{color:#93a1b8}
html.dark .mf-cbar-info b{color:#e7ecf5}
html.dark .mf-cbar-sep{color:#3a4658}
html.dark .mf-frame-dur .mf-unit{color:#93a1b8}
html.dark .mf-insp-grp.mf-insp-quiet{background:#131a25;color:#8b98ad}
html.dark .mf-insp-tip,html.dark .mf-hint{color:#7d8ba0}
html.dark .mf-layer.locked{background:#141a24}
html.dark .mf-layer.locked .mf-l-name{color:#7d8ba0}
html.dark .mf-panel-tools .mf-icon-btn,html.dark .mf-panel-head .mf-icon-btn{background:#1a2333}
html.dark .mf-reqs-summary{color:#dde5f2}
html.dark .mf-reqs-lead,html.dark .mf-reqs-row span,html.dark .mf-reqs-flow{color:#93a1b8}
html.dark .mf-reqs-row b{color:#e7ecf5}
html.dark .mf-reqs-row > i{background:#14243d;color:#7aa5f2}
html.dark .mf-reqs-row code{background:#0f1520;color:#c3cddd}
html.dark .mf-reqs-flow{border-top-color:#26324566}
html.dark .mf-appbar-name,html.dark .mf-appbar-brand{color:#fff}
/* timeline — dark */
html.dark .mf-tl-label{color:#93a1b8}
html.dark .mf-tl-total,html.dark .mf-tl-hint,html.dark .mf-tl-tick{color:#7d8ba0}
html.dark .mf-tl-track{background:#131a25;border-color:#2a3547}
html.dark .mf-tl-guide{background:#222c3b}
html.dark .mf-tl-block{background:linear-gradient(180deg,#1c2842,#182238);border-color:#37507e}
html.dark .mf-tl-block.active{background:linear-gradient(180deg,#20335c,#1a2c4e);border-color:#3f76e0;box-shadow:inset 0 0 0 1px #3f76e0}
html.dark .mf-tl-bname{color:#dde5f2}
html.dark .mf-tl-bdur{color:#93a1b8}
html.dark .mf-tl-btools button{background:rgba(255,255,255,.12);color:#c3cddd}
html.dark .mf-tl-btools button:hover{background:rgba(255,255,255,.22);color:#ff9d7a}
html.dark .mf-tl-resize::after{background:#5b6b86}
html.dark .mf-tl-ctl-lbl{color:#7d8ba0}
html.dark .mf-tl-dur input{background:#171f2c;border-color:#2a3547;color:#e7ecf5}
html.dark .mf-tl-dur span,html.dark .mf-check-sm{color:#c3cddd}

/* ── REAL CLIENT WORK showcase ─────────────────────────────────────────── */
.mf-showcase{margin-top:14px}
.mf-sc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.mf-sc-headtext{min-width:0;flex:1 1 340px}
.mf-sc-kicker{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#6d3bff;background:rgba(124,92,255,.1);padding:3px 10px;border-radius:20px}
.mf-sc-title{margin:9px 0 4px;font-size:19px;font-weight:800;color:#14202f;line-height:1.2}
.mf-sc-title b{color:#1159da;font-weight:800}
.mf-sc-sub{margin:0;font-size:12.5px;color:#5d6b81;max-width:640px;line-height:1.5}
.mf-sc-cta{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:9px 16px;border-radius:10px;background:#6d3bff;color:#fff;font-size:12.5px;font-weight:700;text-decoration:none;transition:background .12s,transform .12s,box-shadow .12s;box-shadow:0 4px 14px rgba(109,59,255,.28)}
.mf-sc-cta:hover{background:#5a2be0;transform:translateY(-1px);box-shadow:0 6px 18px rgba(109,59,255,.36);color:#fff}
.mf-sc-nav{display:flex;gap:8px;flex:0 0 auto}
.mf-sc-arrow{width:38px;height:38px;border-radius:10px;border:1px solid #d7dde8;background:#fff;color:#37445a;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:border-color .12s,color .12s}
.mf-sc-arrow:hover{border-color:#1159da;color:#1159da}
.mf-sc-strip{display:flex;gap:16px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.mf-sc-strip::-webkit-scrollbar{height:8px}
.mf-sc-strip::-webkit-scrollbar-track{background:transparent}
.mf-sc-strip::-webkit-scrollbar-thumb{background:#cfd8e6;border-radius:8px}
.mf-sc-card{flex:0 0 auto;scroll-snap-align:start;display:flex;flex-direction:column;gap:9px}
.mf-sc-stage{height:240px;display:flex;align-items:center;justify-content:center}
.mf-sc-frame{position:relative;border-radius:10px;overflow:hidden;background:#0b1226;box-shadow:0 8px 22px rgba(16,26,48,.18);border:1px solid rgba(0,0,0,.06)}
.mf-sc-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#4a5a78;font-size:22px}
.mf-sc-cap{font-size:12px;color:#5d6b81;text-align:center;white-space:nowrap}
.mf-sc-cap b{color:#22314a;font-weight:800}
.mf-sc-cap span{opacity:.75;margin-left:2px}
html.dark .mf-sc-title{color:#eaf0fa}
html.dark .mf-sc-title b{color:#6ea8ff}
html.dark .mf-sc-sub{color:#93a1b8}
html.dark .mf-sc-arrow{background:#171f2c;border-color:#2a3547;color:#c3cddd}
html.dark .mf-sc-arrow:hover{border-color:#3f76e0;color:#6ea8ff}
html.dark .mf-sc-strip::-webkit-scrollbar-thumb{background:#2a3547}
html.dark .mf-sc-frame{border-color:rgba(255,255,255,.08);box-shadow:0 8px 22px rgba(0,0,0,.4)}
html.dark .mf-sc-cap{color:#93a1b8}
html.dark .mf-sc-cap b{color:#dde5f2}

/* ── BANNER view in the right panel (shown when no layer is selected) ──
   Read-outs that jump to the real control — deliberately NOT a second set of
   bound inputs, so one value can never have two owners. */
.mf-bn{padding-bottom:4px}
.mf-bn-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:7px 9px;border:0;border-radius:8px;background:transparent;font:inherit;font-size:12px;
  color:#22314a;cursor:pointer;text-align:left}
button.mf-bn-row:hover{background:#eef2f8}
.mf-bn-static{cursor:default}
.mf-bn-k{color:#7b8598;font-weight:600;white-space:nowrap}
.mf-bn-v{display:flex;align-items:center;gap:6px;min-width:0;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mf-bn-warn{color:#b45309}
.mf-bn-sw{width:12px;height:12px;flex:none;border-radius:3px;border:1px solid rgba(16,26,46,.18)}
.mf-bn-tip{margin:8px 2px 0;font-size:11px;line-height:1.5;color:#8b96a8}
/* the control you jumped to says so */
.mf-flash{outline:2px solid #7c5cff;outline-offset:2px;border-radius:8px;transition:outline-color .3s}

/* ── export-readiness chip + drawer ──────────────────────────────────────
   The requirements accordion says what each ad server WANTS; this says
   whether THIS banner is there yet, without opening anything. */
.mf-status{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:0;
  border-radius:999px;font:inherit;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap}
.mf-status i{font-size:11px}
.mf-st-ok{background:#e9f8ee;color:#15803d}
.mf-st-ok:hover{background:#daf2e3}
.mf-st-warn{background:#fef3c7;color:#92400e}
.mf-st-warn:hover{background:#fde9ab}
.mf-st-fail{background:#ffe4e6;color:#be123c}
.mf-st-fail:hover{background:#ffd0d5}
.mf-statusbody{display:flex;flex-direction:column;gap:5px;margin-top:10px;padding:11px 12px;
  border-radius:11px;background:#f7f9fc}
.mf-statusbody[hidden]{display:none}
.mf-stat-row{display:flex;align-items:baseline;gap:9px;font-size:12px;color:#42506a}
.mf-stat-row b{min-width:104px;flex:none;font-weight:700;color:#22314a}
.mf-stat-row span{min-width:0}
.mf-stat-row i{width:12px;flex:none;font-size:11px}
.mf-stat-pass i{color:#16a34a}
.mf-stat-warn i{color:#d97706}
.mf-stat-fail i{color:#e11d48}

/* ── ⋯ project menu ── */
.mf-more-wrap{position:relative;flex:none}
.mf-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:206px;padding:6px;
  border:1px solid #e0e6f0;border-radius:12px;background:#fff;box-shadow:0 14px 40px rgba(16,26,46,.18)}
.mf-menu[hidden]{display:none}
.mf-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;border-radius:8px;
  background:transparent;color:#22314a;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;text-align:left}
.mf-menu button:hover{background:#f4f7fc}
.mf-menu button i{width:14px;font-size:11px;color:#7b8598}
.mf-menu button em{margin-left:auto;font-style:normal;font-size:8px;font-weight:900;letter-spacing:.05em;
  padding:1px 5px;border-radius:999px;background:#fef3c7;color:#92400e}
/* Reset all wipes the whole banner, so it is set apart from the navigation
   items above it by a rule and red ink — you should not hit it reaching for
   "My share links". The confirm dialog is the real guard; this is the warning. */
.mf-menu-danger{margin-top:5px;border-top:1px solid #eef1f7 !important;padding-top:9px !important;
  border-radius:0 0 8px 8px !important;color:#b91c1c !important}
.mf-menu-danger:hover{background:#fef2f2 !important}
.mf-menu-danger i{color:#dc2626 !important}
/* the whole popover had no dark treatment — it stayed a white card floating on
   the dark editor. Measured while adding Reset all, fixed for every row. */
html.dark .mf-menu{background:#141c30;border-color:#2c3750;box-shadow:0 14px 40px rgba(0,0,0,.5)}
html.dark .mf-menu button{color:#dbe3f2}
html.dark .mf-menu button:hover{background:#1e2942}
html.dark .mf-menu button i{color:#8d9ab3}
html.dark .mf-menu button em{background:#3a2f10;color:#fcd34d}
html.dark .mf-menu-danger{border-top-color:#2c3750 !important;color:#f28b8b !important}
html.dark .mf-menu-danger:hover{background:#3a1c1c !important}
html.dark .mf-menu-danger i{color:#f87171 !important}
/* ⚠ Row 1 now carries Size + Sync AND the actions, so it must not let the
   left group grow — the spacer does the pushing, everything else stays natural
   width. (Merging the context row into the actions made both fight for space
   and wrap into three lines; the context has its own row again.) */
/* the readiness detail now sits under the timeline */
.mf-statusbody{margin:0}

/* Banner fields, now the real controls in the right panel */
.mf-bn-f{display:flex;flex-direction:column;gap:4px;margin-bottom:9px}
.mf-bn-f>span{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#7b8598}
.mf-bn-f select,.mf-bn-f input[type=text]{width:100%;padding:7px 9px;border:1px solid #e0e6f0;border-radius:8px;
  background:#fff;color:#22314a;font:inherit;font-size:12.5px}
.mf-bn-f input[type=color]{width:100%;height:32px;padding:2px;border:1px solid #e0e6f0;border-radius:8px;background:#fff}
.mf-bn-two{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.mf-bn-chk{margin-top:2px}

/* divider between the history controls and the add-tools on the canvas bar */
.mf-canvas-sep{width:1px;height:20px;flex:none;margin:0 4px;background:#e0e6f0}

/* ── vertical rhythm, now the cards are gone ──────────────────────────────
   ⚠ Flat panels still inherit the marketing `section{padding:30px 0}` — which
   frames nothing once there is no box, and leaves NO horizontal padding, so
   content sits flush against where the border used to be. Same fix as
   video-ad; the shell's flat separator is (0,4,0), so these must match it and
   rely on mf.css loading after shell.css. */
.tool[data-tool="multiframe-html5"] .panel{padding-top:0;padding-bottom:0}
.tool[data-tool="multiframe-html5"] .panel + .panel{margin-top:0;padding-top:14px}
.tool[data-tool="multiframe-html5"] .mf-app{gap:14px}