/* ════════════════════════════════════════════════════════════════
   STATICS & SOCIAL QA — the PREVIEW ENVIRONMENT (2026-08-28)

   Owner: "they should able to see in preview environment … It should be able
   to see in desktop, tablet and mobile and look real device preview", plus a
   carousel of N cards and a shareable link.

   SEPARATE FILE FROM safeframe.css ON PURPOSE. That sheet dresses the overlay
   checker, whose geometry (isolation:isolate + layered z-indexes 1-5) was hard
   won — see the tool's notes. Nothing here touches .sf-frame or its layers.

   ⚠ EVERY CLASS IS sfe-*. Tool sheets are global to the studio; a bare
   `.device` or `.card` here would restyle somebody else's pane.

   ⚠ THIS SHEET IS ALSO SERVED ON THE SHARE PAGE (p.php), where none of the
   studio shell exists. So it may not inherit anything: colours, fonts and box
   sizing are all stated, and the dark rules key off html.dark, which p.php
   sets the same way the studio does.
   ════════════════════════════════════════════════════════════════ */

.sfe, .sfe *, .sfe *::before, .sfe *::after { box-sizing: border-box; }

/* ── the control strip ─────────────────────────────────────────────────── */
.sfe-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.sfe-seg{display:inline-flex;padding:3px;border:1px solid #dde3ec;border-radius:11px;background:#f4f7fc;gap:2px}
.sfe-seg button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:0;border-radius:8px;
                background:transparent;font:inherit;font-size:12.5px;font-weight:700;color:#5a6478;cursor:pointer;transition:.14s}
.sfe-seg button:hover{color:#2b3348}
.sfe-seg button.on{background:#fff;color:#4338ca;box-shadow:0 1px 3px rgba(20,30,60,.13)}
.sfe-seg button:focus-visible{outline:2px solid #4338ca;outline-offset:1px}
.sfe-seg svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sfe-spacer{flex:1 1 auto}

/* ── the stage the device sits on ──────────────────────────────────────── */
/* 🔴 A FIXED HEIGHT, NOT min-height — AND THAT IS A BUG FIX, NOT A STYLE CHOICE.
   fit() scales the device to the stage and then sets the scaler's height. With
   min-height the stage sized itself to that scaler, so the next fit() measured a
   box its own previous result had grown: the scale WALKED UPWARD on every call
   (measured 0.525 → 0.567 → 0.608 on three consecutive fits) and drifted on
   every window resize. A height that does not depend on the content breaks the
   loop, and fit() converges on the first try. */
/* ⚠ NOT flex-centred. A flex container that centres its child CLIPS the
   overflowing side when the child is wider than the box — so a 1180px desktop
   mock in a 323px column would have been unreachable on the left however far you
   scrolled. text-align + inline-block centres when it fits and scrolls from the
   left when it does not. */
.sfe-stage{position:relative;display:block;text-align:center;white-space:nowrap;
           height:clamp(360px,68vh,920px);padding:22px;border-radius:16px;overflow:auto;
           background:
             radial-gradient(circle at 22% 18%, rgba(99,102,241,.10), transparent 55%),
             radial-gradient(circle at 78% 82%, rgba(219,39,119,.09), transparent 55%),
             #eef1f7}
.sfe-scaler{display:inline-block;vertical-align:top;white-space:normal;transform-origin:top center;transition:transform .18s ease}

/* ── DEVICE SHELLS ─────────────────────────────────────────────────────────
   Drawn, not photographed: a picture of a phone would be a 400 KB asset that
   ages the moment the hardware does, and it could not scroll. The proportions
   that make it read as real are the bezel width, the corner radius and the
   screen's own aspect — those are what is set here. */
.sfe-device{position:relative;flex:none;background:#11141a;box-shadow:0 24px 60px rgba(17,22,40,.28),0 2px 6px rgba(17,22,40,.18)}
.sfe-screen{position:relative;overflow:hidden;background:#fff}

/* phone — 390×844 CSS px, iPhone-class proportions */
.sfe-device.is-mobile{width:414px;padding:12px;border-radius:46px}
.sfe-device.is-mobile .sfe-screen{width:390px;height:844px;border-radius:34px}
.sfe-notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:112px;height:30px;
           border-radius:16px;background:#11141a;z-index:6}
.sfe-home{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:134px;height:5px;
          border-radius:3px;background:rgba(20,24,32,.34);z-index:6}
.sfe-device.is-mobile .sfe-side{position:absolute;width:3px;border-radius:2px;background:#2a2f3a}
.sfe-device.is-mobile .sfe-side.v1{left:-3px;top:132px;height:32px}
.sfe-device.is-mobile .sfe-side.v2{left:-3px;top:180px;height:58px}
.sfe-device.is-mobile .sfe-side.v3{left:-3px;top:250px;height:58px}
.sfe-device.is-mobile .sfe-side.pw{right:-3px;top:196px;height:92px}

/* tablet — 820×1180 CSS px */
.sfe-device.is-tablet{width:872px;padding:26px;border-radius:34px}
.sfe-device.is-tablet .sfe-screen{width:820px;height:1080px;border-radius:12px}
.sfe-device.is-tablet .sfe-cam{position:absolute;top:12px;left:50%;transform:translateX(-50%);
                               width:7px;height:7px;border-radius:50%;background:#2f3541;z-index:6}

/* desktop — a browser window, because that is what a desktop feed IS */
.sfe-device.is-desktop{width:1180px;padding:0;border-radius:12px;background:#c9d0dd}
.sfe-device.is-desktop .sfe-chrome{display:flex;align-items:center;gap:9px;height:38px;padding:0 13px;
                                   border-radius:12px 12px 0 0;background:linear-gradient(#f2f4f8,#e6eaf1);border-bottom:1px solid #d3dae6}
.sfe-dot{width:11px;height:11px;border-radius:50%;flex:none}
.sfe-dot.r{background:#ff5f57}.sfe-dot.y{background:#febc2e}.sfe-dot.g{background:#28c840}
.sfe-url{flex:1 1 auto;height:23px;margin-left:8px;padding:0 11px;border-radius:7px;background:#fff;border:1px solid #dbe1ec;
         display:flex;align-items:center;gap:7px;font-size:11.5px;color:#7a8398;overflow:hidden;white-space:nowrap}
.sfe-url svg{width:11px;height:11px;flex:none;fill:none;stroke:currentColor;stroke-width:2}
.sfe-device.is-desktop .sfe-screen{width:1180px;height:760px;border-radius:0 0 12px 12px}

/* the scrollable page inside any screen */
.sfe-page{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;background:#fff;
          font:400 14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#0f1419;
          -webkit-overflow-scrolling:touch}
.sfe-page::-webkit-scrollbar{width:0;height:0}

/* status bar — only on the handhelds, where a real one exists */
.sfe-status{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 26px 0 30px;
            font-size:13px;font-weight:700;color:#0f1419;flex:none}
.sfe-status-r{display:flex;align-items:center;gap:5px}
.sfe-status-r svg{width:16px;height:11px;fill:currentColor}

/* ── the post ──────────────────────────────────────────────────────────── */
.sfe-post{border-bottom:1px solid #eceff3;padding-bottom:6px}
.sfe-post-head{display:flex;align-items:center;gap:10px;padding:11px 13px}
.sfe-av{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;
        font-weight:800;font-size:13px;background:linear-gradient(135deg,#7c3aed,#db2777)}
.sfe-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.sfe-who{min-width:0;flex:1 1 auto}
.sfe-name{font-weight:700;font-size:13.5px;color:#0f1419;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sfe-meta{font-size:11.5px;color:#65707f}
.sfe-more{flex:none;color:#65707f;font-weight:800;letter-spacing:1px;font-size:15px}

.sfe-media{position:relative;width:100%;background:#0b0d12;overflow:hidden}
.sfe-media img,.sfe-media video{display:block;width:100%;height:100%;object-fit:cover}
.sfe-empty{position:absolute;inset:0;display:grid;place-items:center;gap:6px;align-content:center;
           color:#8b93a5;background:repeating-conic-gradient(#f1f3f7 0% 25%,#e6eaf1 0% 50%) 50%/22px 22px}
.sfe-empty b{font-size:13px;color:#6b7488;font-weight:700}
.sfe-empty span{font-size:11.5px}

/* carousel */
.sfe-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.sfe-track::-webkit-scrollbar{display:none}
.sfe-slide{flex:0 0 100%;scroll-snap-align:center;position:relative}
.sfe-count{position:absolute;top:10px;right:10px;z-index:3;padding:3px 9px;border-radius:11px;
           background:rgba(12,16,24,.62);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.2px}
.sfe-dots{display:flex;align-items:center;justify-content:center;gap:5px;padding:9px 0 3px}
.sfe-dots i{width:6px;height:6px;border-radius:50%;background:#c8cfdb;transition:.15s}
.sfe-dots i.on{background:#4338ca;transform:scale(1.18)}
.sfe-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:30px;height:30px;border:0;border-radius:50%;
           display:grid;place-items:center;background:rgba(255,255,255,.92);color:#26303f;cursor:pointer;
           box-shadow:0 2px 8px rgba(12,20,40,.24)}
.sfe-arrow.l{left:8px}.sfe-arrow.r{right:8px}
.sfe-arrow svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sfe-arrow[disabled]{opacity:.32;cursor:default}

.sfe-actions{display:flex;align-items:center;gap:16px;padding:9px 13px 4px;color:#0f1419}
.sfe-actions svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sfe-actions .sfe-spacer{flex:1 1 auto}
.sfe-cta{margin:8px 13px 2px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;
         background:#0866ff;color:#fff;font-size:13.5px;font-weight:700}
.sfe-cap{padding:6px 13px 12px;font-size:13px;line-height:1.45;color:#0f1419}
.sfe-cap b{font-weight:700}
.sfe-cap span{color:#65707f}

/* desktop feed sits in a column, like every real desktop feed */
.sfe-col{max-width:520px;margin:0 auto;padding:18px 0 40px}
.sfe-deskbar{height:52px;background:#fff;border-bottom:1px solid #e4e8ef;display:flex;align-items:center;
             gap:14px;padding:0 22px;position:sticky;top:0;z-index:4}
.sfe-deskbar .sfe-logo{font-weight:800;font-size:17px;color:#4338ca;letter-spacing:-.02em}
.sfe-deskbar .sfe-search{flex:0 0 240px;height:30px;border-radius:15px;background:#f0f2f6;
                          display:flex;align-items:center;padding:0 13px;font-size:12.5px;color:#8b93a5}
.sfe-page.is-desk{background:#f0f2f5}

/* ── the notes strip under the stage ───────────────────────────────────── */
.sfe-notes{display:flex;flex-wrap:wrap;gap:8px;margin:13px 0 0}
.sfe-note{display:flex;align-items:flex-start;gap:8px;flex:1 1 260px;padding:9px 12px;border-radius:10px;
          font-size:12px;line-height:1.45;border:1px solid #dbe4f0;background:#f4f8fd;color:#3d4a60}
.sfe-note.warn{border-color:#f0d9a8;background:#fdf7e9;color:#7a5a12}
.sfe-note i{flex:none;margin-top:1px}
.sfe-note b{font-weight:700}

/* ── share ─────────────────────────────────────────────────────────────── */
.sfe-share{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:9px;border:0;
           background:linear-gradient(135deg,#4338ca,#6d28d9);color:#fff;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.sfe-share:hover{filter:brightness(1.08)}
.sfe-share[disabled]{opacity:.55;cursor:default;filter:none}
.sfe-share svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sfe-link{display:none;align-items:center;gap:8px;margin:12px 0 0;padding:10px 12px;border-radius:10px;
          border:1px solid #cfe3d4;background:#f1f9f3}
.sfe-link.show{display:flex}
.sfe-link input{flex:1 1 auto;min-width:0;height:32px;padding:0 10px;border:1px solid #cbd8e6;border-radius:8px;
                background:#fff;font:inherit;font-size:12.5px;color:#1a2233;margin:0}
.sfe-link button{flex:none;height:32px;padding:0 12px;border:1px solid #cbd8e6;border-radius:8px;background:#fff;
                 font:inherit;font-size:12.5px;font-weight:700;color:#2f6b46;cursor:pointer}

/* ── post details (brand handle + caption) ─────────────────────────────────
   🔴 margin:0 AND A SCOPED :focus ARE BOTH LOAD-BEARING, and both were learned
   the hard way on the feedback modal a few hours before this shipped:
     · the site-level agency sheet puts `margin:7px 15px 0 0` on every input, and
       that 15px pushes a full-width field past its container;
     · that sheet also carries `input[type="text"]:focus{box-shadow:none;
       outline:none}` at (0,2,1), which BEATS a bare `.sfe-in:focus` (0,2,0) and
       leaves the field with no focus state at all. `.sf-app .sfe-in:focus` is
       (0,3,0) and wins. Check the COMPUTED style, never the source. */
.sfe-in{display:block;width:100%;height:34px;margin:0 0 7px;padding:0 11px;border:1px solid #dde3ec;
        border-radius:9px;background:#fff;color:#1a2233;font:inherit;font-size:12.5px;box-sizing:border-box}
.sfe-in:last-child{margin-bottom:0}
.sfe-in::placeholder{color:#9aa3b5}
.sf-app .sfe-in:focus{outline:none;border-color:#4338ca;box-shadow:0 0 0 3px rgba(67,56,202,.13)}
.sfe-hint{margin:2px 0 0;font-size:11px;line-height:1.45;color:#8b93a5}
html.dark .sfe-in{background:#171c24;border-color:#2a3140;color:#e8edf6}
html.dark .sfe-in::placeholder{color:#6d788a}
html.dark .sf-app .sfe-in:focus{border-color:#6d63e8;box-shadow:0 0 0 3px rgba(109,99,232,.22)}
html.dark .sfe-hint{color:#7d8798}

/* ── carousel controls in the sidebar ──────────────────────────────────── */
.sfe-cards{display:flex;flex-wrap:wrap;gap:7px;margin:9px 0 0}
.sfe-card{position:relative;width:52px;height:52px;border-radius:8px;overflow:hidden;border:1px solid #dde3ec;background:#f3f5f9}
.sfe-card img{width:100%;height:100%;object-fit:cover;display:block}
.sfe-card b{position:absolute;left:3px;top:2px;font-size:9.5px;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.sfe-card button{position:absolute;top:2px;right:2px;width:16px;height:16px;border:0;border-radius:50%;
                 background:rgba(16,23,37,.76);color:#fff;font-size:11px;line-height:1;cursor:pointer;padding:0}
.sfe-card.add{display:grid;place-items:center;border-style:dashed;color:#8b93a5;cursor:pointer}
/* reordering — grab, ghost, and the line that says where it will land */
.sfe-card[draggable],.sfe-card.can-drag{cursor:grab;touch-action:none}
.sfe-card.is-dragging{opacity:.4;cursor:grabbing}
/* the card currently loaded into the Check board */
.sfe-card.is-shown{border-color:#4338ca;box-shadow:0 0 0 2px rgba(67,56,202,.25)}
html.dark .sfe-card.is-shown{border-color:#8d8bff;box-shadow:0 0 0 2px rgba(141,139,255,.3)}
.sfe-cards.is-reordering .sfe-card{transition:transform .12s ease}
.sfe-drop{flex:none;width:3px;align-self:stretch;border-radius:2px;background:#4338ca;
          box-shadow:0 0 0 2px rgba(67,56,202,.18)}
html.dark .sfe-drop{background:#8d8bff}
.sfe-card.add svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sfe-num{display:flex;align-items:center;gap:8px;margin:9px 0 0;font-size:12.5px;color:#5a6478}
.sfe-num input{width:62px;height:32px;margin:0;padding:0 8px;border:1px solid #dde3ec;border-radius:8px;
               background:#fff;font:inherit;font-size:13px;color:#1a2233}

/* ── THE SAVE DIALOG ───────────────────────────────────────────────────────
   Modelled on the Preview Generator's share dialog (owner: "same like preview
   generator"): decide where this is saved before a public URL exists, and be
   able to replace a link somebody already has rather than minting a second one.
   Its own scrim so it sits above the studio without borrowing .dl-modal, whose
   card is a 420px alert. */
.sfe-dlg{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;
         padding:20px;background:rgba(15,20,35,.55)}
.sfe-dlg.open{display:flex}
.sfe-dlg-card{position:relative;display:flex;flex-direction:column;width:100%;max-width:470px;
              max-height:calc(100vh - 40px);background:#fff;border:1px solid #e6e9f0;border-radius:16px;
              box-shadow:0 30px 70px rgba(0,0,0,.32)}
.sfe-dlg-head{display:flex;align-items:center;gap:11px;padding:19px 22px 0}
.sfe-dlg-head h3{margin:0;font-size:16px;font-weight:800;color:#1a2233;letter-spacing:-.01em}
.sfe-dlg-head p{margin:2px 0 0;font-size:12px;color:#6b7488}
.sfe-dlg-x{position:absolute;top:10px;right:10px;width:31px;height:31px;display:grid;place-items:center;
           border:0;border-radius:9px;background:transparent;color:#7a8398;font-size:20px;line-height:1;cursor:pointer}
.sfe-dlg-x:hover{background:#f1f3f7;color:#475063}
.sfe-dlg-body{flex:1 1 auto;overflow-y:auto;padding:15px 22px 4px}
.sfe-dlg-lbl{display:block;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
             color:#7a8398;margin:0 0 6px}
.sfe-dlg-row{margin:0 0 13px}
.sfe-dlg-row:last-child{margin-bottom:0}
.sfe-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sfe-radio{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border:1px solid #dde3ec;border-radius:10px;
           cursor:pointer;margin:0 0 8px;transition:.14s}
.sfe-radio:hover{background:#f6f8fc}
.sfe-radio.on{border-color:#4338ca;background:#eef3fe}
.sfe-radio input{margin:2px 0 0;flex:none;accent-color:#4338ca}
.sfe-radio b{display:block;font-size:13px;font-weight:700;color:#1a2233}
.sfe-radio span{display:block;font-size:11.5px;line-height:1.45;color:#6b7488;margin-top:1px}
/* 🔴 [hidden] MUST WIN, AND BY DEFAULT IT DOES NOT. `display:block` on a class
   is an AUTHOR rule; `[hidden]{display:none}` lives in the USER-AGENT sheet,
   and author beats UA regardless of specificity. So the link picker rendered in
   "A new link" mode with its hidden attribute set and nobody the wiser — caught
   by reading the computed style off a screenshot that looked wrong. Scoped to
   the dialog so every future hidden element in it is covered too, not just this
   one select. */
.sfe-dlg [hidden]{display:none}
.sfe-sel{display:block;width:100%;height:36px;margin:0;padding:0 10px;border:1px solid #dde3ec;border-radius:9px;
         background:#fff;color:#1a2233;font:inherit;font-size:12.5px;box-sizing:border-box}
.sf-app .sfe-sel:focus{outline:none;border-color:#4338ca;box-shadow:0 0 0 3px rgba(67,56,202,.13)}
.sfe-dlg-meter{display:flex;align-items:center;gap:8px;margin:2px 0 0;padding:9px 11px;border-radius:9px;
               background:#f4f7fc;border:1px solid #e2e8f2;font-size:11.5px;line-height:1.45;color:#4a5568}
.sfe-dlg-meter b{font-weight:700;color:#1a2233}
.sfe-dlg-note{margin:12px 0 0;padding:9px 12px;border-radius:9px;font-size:12.5px;line-height:1.5;display:none}
.sfe-dlg-note.show{display:block}
.sfe-dlg-note.is-err{background:#fdecec;border:1px solid #f3c9c9;color:#a5322a}
.sfe-dlg-note.is-ok{background:#eaf7ef;border:1px solid #c3e6d0;color:#1f6b40}
.sfe-dlg-foot{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:9px;
              padding:15px 22px 19px;border-top:1px solid #eef1f6;margin-top:15px}
.sfe-btn{height:37px;padding:0 15px;border-radius:9px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
         border:1px solid #dde3ec;background:#fff;color:#3a4458;transition:.15s}
.sfe-btn:hover{background:#f2f5fa}
.sfe-btn-go{background:linear-gradient(135deg,#4338ca,#6d28d9);border-color:transparent;color:#fff}
/* 🔴 RE-DECLARE THE BACKGROUND ON HOVER OR THE BUTTON DISAPPEARS.
   This element carries BOTH classes, and `.sfe-btn:hover{background:#f2f5fa}`
   is (0,2,0) while `.sfe-btn-go{background:<gradient>}` is only (0,1,0) — so
   hovering repainted the purple button near-white and left white text on it.
   The feedback modal's .dl-fb-send:hover already did this correctly; this one
   did not, which is exactly why a base class and a variant must never split a
   property across different specificities. */
.sfe-btn-go:hover{background:linear-gradient(135deg,#4338ca,#6d28d9);filter:brightness(1.1)}
.sfe-btn-go[disabled]{opacity:.55;cursor:default;filter:none}
.sfe-done{display:none;align-items:center;gap:8px;margin:12px 0 0}
.sfe-done.show{display:flex}
.sfe-done input{flex:1 1 auto;min-width:0;height:34px;margin:0;padding:0 10px;border:1px solid #cbd8e6;border-radius:8px;
                background:#fff;font:inherit;font-size:12.5px;color:#1a2233}
.sfe-done a{flex:none;height:34px;padding:0 11px;display:inline-flex;align-items:center;border:1px solid #cbd8e6;
            border-radius:8px;background:#fff;font-size:12.5px;font-weight:700;color:#4338ca;text-decoration:none}

html.dark .sfe-dlg-card{background:#12161c;border-color:#2a2f3a}
html.dark .sfe-dlg-head h3{color:#e8edf6}
html.dark .sfe-dlg-head p,html.dark .sfe-dlg-lbl{color:#8d97a9}
html.dark .sfe-dlg-x{color:#8d97a9}
html.dark .sfe-dlg-x:hover{background:#1c222c;color:#dbe3ef}
html.dark .sfe-radio{border-color:#2a3140}
html.dark .sfe-radio:hover{background:#1a212b}
html.dark .sfe-radio.on{border-color:#4b7fe0;background:#16233c}
html.dark .sfe-radio b{color:#e8edf6}
html.dark .sfe-radio span{color:#98a2b3}
html.dark .sfe-sel{background:#171c24;border-color:#2a3140;color:#e8edf6}
html.dark .sfe-dlg-meter{background:#161c26;border-color:#2a3444;color:#b6c2d4}
html.dark .sfe-dlg-meter b{color:#e8edf6}
html.dark .sfe-dlg-note.is-err{background:#2a1618;border-color:#5a2a2c;color:#ff9d94}
html.dark .sfe-dlg-note.is-ok{background:#12241a;border-color:#2c5540;color:#7fd8a4}
html.dark .sfe-dlg-foot{border-top-color:#242a34}
html.dark .sfe-btn{background:#171c24;border-color:#2a3140;color:#c3cbd9}
html.dark .sfe-btn:hover{background:#1d2430}
html.dark .sfe-btn-go:hover{background:linear-gradient(135deg,#5145e0,#7c3aed)}
html.dark .sfe-done input,html.dark .sfe-done a{background:#171c24;border-color:#2a3140;color:#e8edf6}

/* ── DARK ──────────────────────────────────────────────────────────────── */
html.dark .sfe-stage{background:radial-gradient(circle at 22% 18%,rgba(99,102,241,.14),transparent 55%),
                                radial-gradient(circle at 78% 82%,rgba(219,39,119,.12),transparent 55%),#151a21}
html.dark .sfe-seg{background:#171c24;border-color:#2a3140}
html.dark .sfe-seg button{color:#98a2b3}
html.dark .sfe-seg button:hover{color:#dbe3ef}
html.dark .sfe-seg button.on{background:#22293a;color:#a5b4fc;box-shadow:none}
html.dark .sfe-note{background:#161c26;border-color:#2a3444;color:#b6c2d4}
html.dark .sfe-note.warn{background:#241d10;border-color:#5a4620;color:#e6c37c}
html.dark .sfe-link{background:#12241a;border-color:#2c5540}
html.dark .sfe-link input{background:#171c24;border-color:#2a3140;color:#e8edf6}
html.dark .sfe-link button{background:#171c24;border-color:#2a3140;color:#7fd8a4}
html.dark .sfe-card{background:#1a1f28;border-color:#2a3140}
html.dark .sfe-card.add{color:#6d788a}
html.dark .sfe-num{color:#98a2b3}
html.dark .sfe-num input{background:#171c24;border-color:#2a3140;color:#e8edf6}
html.dark .sfe-device.is-desktop{background:#2a3140}
/* ⚠ THE SCREEN STAYS LIGHT IN DARK MODE, like the checker's stage does. It is a
   picture of somebody else's app; repainting it dark would show the reviewer a
   surface that does not exist and change how the creative reads against it. */

@media (max-width:720px){
  /* ⚠ height, NOT min-height — see the note on .sfe-stage above. Inert here
     today (the base clamp never falls below 360px, so a 320px minimum could
     never bite) but a min-height on this element is precisely what set the
     scale walking, and leaving one in the file invites the next person to
     restore the bug in a place nobody thinks to look. */
  .sfe-stage{padding:12px;height:clamp(300px,62vh,620px)}
  .sfe-bar{gap:8px}
}

/* The client / campaign / ad-folder bar, the link-domain chip and the
   "Your preview links" panel all moved to core/share-ctx.{js,css} — this tool
   was the second copy of that UI and Email QA would have been the third. */

/* The card strip repeated on the Check board itself — same cards, same handlers,
   drawn where the creative is rather than 200px below it in another column. */
.sfe-cards-check{justify-content:center;margin:0 0 10px;padding:8px 10px;border:1px solid #e2e8f2;
                 border-radius:10px;background:#f8fafd}
.sfe-cards-check[hidden]{display:none}
html.dark .sfe-cards-check{background:#151a21;border-color:#2a3140}