/* Defensive: the studio never causes sideways scroll. */
      html, body { overflow-x: hidden; max-width: 100vw; }

      /* --- Toasts (non-blocking notifications, replace alert()) ----------- */
      #toast-host {
        position: fixed;
        left: 50%;
        bottom: 24px;
        transform: translateX(-50%);
        z-index: 10050;
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
        pointer-events: none;
        max-width: min(92vw, 440px);
      }
      .toast {
        pointer-events: auto;
        background: #1e3a8a;
        color: #fff;
        padding: 11px 16px;
        border-radius: 10px;
        font-size: 14px;
        line-height: 1.4;
        box-shadow: 0 8px 24px rgba(30, 58, 138, 0.28);
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.25s ease, transform 0.25s ease;
        max-width: 100%;
      }
      .toast--show { opacity: 1; transform: translateY(0); }
      .toast--error { background: #b91c1c; box-shadow: 0 8px 24px rgba(185, 28, 28, 0.28); }
      .toast--success { background: #047857; box-shadow: 0 8px 24px rgba(4, 120, 87, 0.28); }
      @media (prefers-reduced-motion: reduce) {
        .toast { transition: opacity 0.2s ease; transform: none; }
        .toast--show { transform: none; }
      }

      /* --- Stagify+ gate dialog (signed-in free users) --------------------- */
      .ms-pro-gate {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 300;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: rgba(30, 58, 138, 0.45);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
      }
      .ms-pro-gate.active { display: flex; }
      .ms-pro-gate__card {
        max-width: 480px;
        width: 100%;
        max-height: calc(100vh - 48px);
        overflow-y: auto;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 16px;
        padding: 32px 28px;
        box-shadow: 0 24px 60px rgba(30, 58, 138, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.7);
        text-align: center;
      }
      .ms-pro-gate__card h2 { margin: 0 0 12px; color: #1e3a8a; font-size: 1.5rem; }
      .ms-pro-gate__card p { margin: 0 0 20px; color: #4b5563; line-height: 1.55; font-size: 15px; }
      .ms-pro-gate__actions { display: flex; flex-direction: column; gap: 10px; }
      .ms-pro-gate__actions a { text-decoration: none; }

      /* --- Studio layout ---------------------------------------------------- */
      .ms-shell { width: 100%; max-width: 1400px; margin: 0 auto; }
      .ms-intro { text-align: center; margin: 4px auto 18px; max-width: 760px; }
      .ms-intro h1 {
        margin: 0 0 8px;
        font-size: clamp(26px, 3.2vw, 38px);
        font-weight: 800;
        letter-spacing: -0.5px;
        color: #1e3a8a;
      }
      .ms-intro p { margin: 0; color: #374151; font-size: 15px; line-height: 1.55; }

      /* The site's default buttons shout in uppercase; inside the studio (and
         its gate) they read as tool controls, so use sentence case. */
      .ms-shell .btn, .ms-pro-gate .btn {
        text-transform: none;
        letter-spacing: normal;
        font-weight: 600;
        border-radius: 10px;
      }
      #ms-generate { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

      .ms-grid {
        display: grid;
        grid-template-columns: 380px 1fr;
        gap: 20px;
        align-items: start;
      }

      /* Frosted glass panel recipe used across the site. */
      .ms-panel {
        background: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(16px) saturate(170%);
        -webkit-backdrop-filter: blur(16px) saturate(170%);
        border: 1px solid rgba(255, 255, 255, 0.55);
        border-radius: 16px;
        box-shadow: 0 14px 40px rgba(30, 58, 138, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
      }

      .ms-toolbar { padding: 20px; display: flex; flex-direction: column; position: relative; }
      .ms-help-btn {
        position: absolute;
        top: 14px; right: 14px;
        width: 26px; height: 26px;
        border: 1.5px solid var(--border);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.8);
        color: #1d4ed8;
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .ms-help-btn:hover { border-color: #2563eb; background: #eff6ff; }
      .ms-help-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
      .ms-toolbar button, .ms-workspace button { font-family: inherit; }
      .ms-block { padding: 16px 0; border-top: 1px dashed rgba(37, 99, 235, 0.22); }
      .ms-block:first-child { padding-top: 0; border-top: none; }
      .ms-block-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
      .ms-block-head h2 { margin: 0; font-size: 15px; font-weight: 700; color: #111827; }
      .ms-step {
        flex: 0 0 auto;
        width: 22px; height: 22px;
        border-radius: 50%;
        background: #2563eb;
        color: #fff;
        font-size: 12px; font-weight: 700;
        display: inline-flex; align-items: center; justify-content: center;
      }
      .ms-hint { margin: 10px 0 0; font-size: 12px; color: #6b7280; line-height: 1.5; }

      /* Uploaded-photo card: the whole thumbnail is the replace button. */
      .ms-photo-card {
        position: relative;
        display: block;
        width: 100%;
        padding: 0;
        border: 1.5px solid var(--border);
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
        cursor: pointer;
        line-height: 0;
      }
      .ms-photo-card img { width: 100%; height: 92px; object-fit: cover; display: block; }
      .ms-photo-card__overlay {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 7px 8px;
        background: linear-gradient(to top, rgba(17, 24, 39, 0.72), rgba(17, 24, 39, 0.25));
        color: #fff;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.3;
      }
      .ms-photo-card:hover { border-color: #93c5fd; }
      .ms-photo-card:hover .ms-photo-card__overlay { background: linear-gradient(to top, rgba(30, 58, 138, 0.82), rgba(30, 58, 138, 0.35)); }
      .ms-photo-card:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
      .ms-photo-card:disabled { opacity: 0.6; cursor: default; }

      /* --- Layer cards ------------------------------------------------------ */
      .ms-layer-list { display: flex; flex-direction: column; gap: 10px; }
      .ms-layer {
        border: 1.5px solid var(--border);
        border-left: 5px solid var(--layer-color, #2563eb);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.72);
        padding: 10px 12px;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
      }
      .ms-layer:hover { border-color: color-mix(in srgb, var(--layer-color, #2563eb) 45%, #e5e7eb); }
      .ms-layer.is-active {
        border-color: var(--layer-color, #2563eb);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--layer-color, #2563eb) 18%, transparent);
      }
      .ms-layer-head {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        user-select: none;
      }
      .ms-layer-dot {
        flex: 0 0 auto;
        width: 14px; height: 14px;
        border-radius: 50%;
        background: var(--layer-color, #2563eb);
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
      }
      .ms-layer-name { font-weight: 700; font-size: 14px; color: #111827; }
      /* One-line peek at the area's prompt (or furniture file) in the header. */
      .ms-layer-preview {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        color: #6b7280;
      }
      .ms-layer-caret {
        flex: 0 0 auto;
        display: inline-flex;
        color: #9ca3af;
        transition: transform 0.15s ease;
      }
      .ms-layer.is-active .ms-layer-caret { transform: rotate(90deg); color: #6b7280; }
      @media (prefers-reduced-motion: reduce) {
        .ms-layer-caret { transition: none; }
      }
      .ms-layer-rename {
        flex: 0 0 auto;
        width: 22px; height: 22px;
        border: none;
        border-radius: 6px;
        background: transparent;
        color: #9ca3af;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.12s ease;
      }
      .ms-layer:hover .ms-layer-rename, .ms-layer-rename:focus-visible { opacity: 1; }
      .ms-layer-rename:hover { color: #1d4ed8; background: rgba(37, 99, 235, 0.08); }
      .ms-layer-name-input {
        flex: 1;
        min-width: 0;
        font-family: inherit;
        font-weight: 700;
        font-size: 14px;
        color: #111827;
        border: 1px solid #93c5fd;
        border-radius: 6px;
        padding: 2px 6px;
      }
      @media (prefers-reduced-motion: reduce) {
        .ms-layer-rename { transition: none; }
      }
      .ms-layer-status {
        font-size: 11px;
        font-weight: 600;
        padding: 3px 8px;
        border-radius: 999px;
        background: #eef2ff;
        color: #4b5563;
        white-space: nowrap;
        /* Long statuses ellipsize so the header's prompt peek keeps room. */
        flex-shrink: 0;
        max-width: 88px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .ms-layer-status--ready { background: #dcfce7; color: #047857; }
      .ms-layer-status--generating { background: #dbeafe; color: #1d4ed8; }
      .ms-layer-status--done { background: #047857; color: #fff; }
      .ms-layer-status--failed { background: #fee2e2; color: #b91c1c; }
      .ms-layer-remove {
        flex: 0 0 auto;
        width: 24px; height: 24px;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: #6b7280;
        font-size: 16px;
        line-height: 1;
        cursor: pointer;
      }
      .ms-layer-remove:hover { background: rgba(185, 28, 28, 0.1); color: #b91c1c; }
      .ms-layer-body { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
      .ms-layer-prompt { resize: vertical; min-height: 44px; font-size: 13px; }
      .ms-furniture-add {
        align-self: flex-start;
        padding: 6px 12px;
        border: 1.5px dashed #93c5fd;
        border-radius: 8px;
        background: rgba(219, 234, 254, 0.4);
        color: #1d4ed8;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
      }
      .ms-furniture-add:hover, .ms-furniture-add.is-drag-over { background: rgba(191, 219, 254, 0.7); }
      .ms-furniture-preview { position: relative; display: inline-flex; align-self: flex-start; }
      .ms-furniture-preview img {
        width: 84px; height: 64px;
        object-fit: cover;
        border-radius: 8px;
        border: 1px solid var(--border);
        background: #fff;
      }
      .ms-furniture-remove {
        position: absolute;
        top: -7px; right: -7px;
        width: 20px; height: 20px;
        border: none;
        border-radius: 50%;
        background: #1f2937;
        color: #fff;
        font-size: 12px;
        line-height: 1;
        cursor: pointer;
      }
      /* One-click prompt ideas: a little + reveals the chips on demand. */
      .ms-preset-toggle {
        align-self: flex-start;
        width: 22px; height: 22px;
        border: 1.5px dashed #93c5fd;
        border-radius: 50%;
        background: rgba(219, 234, 254, 0.35);
        color: #1d4ed8;
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
      }
      .ms-preset-toggle:hover { background: rgba(191, 219, 254, 0.7); }
      .ms-preset-toggle:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
      .ms-preset-row { display: flex; flex-wrap: wrap; gap: 5px; }
      .ms-preset {
        padding: 3px 10px;
        border: 1px dashed #93c5fd;
        border-radius: 999px;
        background: rgba(219, 234, 254, 0.35);
        color: #1d4ed8;
        font-size: 11.5px;
        font-weight: 600;
        cursor: pointer;
      }
      .ms-preset:hover { background: rgba(191, 219, 254, 0.7); }

      /* Per-area mode: stage furniture vs. remove what's there. */
      .ms-mode-row {
        display: inline-flex;
        align-self: flex-start;
        border: 1px solid var(--border);
        border-radius: 999px;
        overflow: hidden;
        background: #fff;
      }
      .ms-mode-btn {
        padding: 4px 12px;
        border: none;
        background: transparent;
        color: #6b7280;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
        cursor: pointer;
      }
      .ms-mode-btn + .ms-mode-btn { border-left: 1px solid var(--border); }
      .ms-mode-btn.is-on { background: #1d4ed8; color: #fff; cursor: default; }
      .ms-mode-btn:not(.is-on):hover { background: rgba(219, 234, 254, 0.5); color: #1d4ed8; }
      .ms-mode-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
      .ms-mode-hint { color: #6b7280; font-size: 12px; line-height: 1.45; margin: 0; }
      .ms-preset:focus-visible, .ms-clear-btn:focus-visible, .ms-version-btn:focus-visible,
      .ms-layer-retry:focus-visible, .ms-furniture-add:focus-visible {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
      }
      .ms-clear-btn {
        align-self: flex-start;
        border: none;
        background: none;
        padding: 2px 0;
        color: #6b7280;
        font-size: 12px;
        text-decoration: underline;
        text-underline-offset: 2px;
        cursor: pointer;
      }
      .ms-clear-btn:hover { color: #b91c1c; }

      /* Version picker for areas with more than one generated result. */
      .ms-version-row { display: flex; align-items: center; gap: 6px; }
      .ms-version-btn {
        width: 24px; height: 24px;
        border: 1.5px solid var(--border);
        border-radius: 6px;
        background: #fff;
        color: #374151;
        font-size: 13px;
        line-height: 1;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .ms-version-btn:hover { border-color: #2563eb; color: #1d4ed8; }
      .ms-version-label { font-size: 12px; color: #374151; font-weight: 600; }
      .ms-layer-error { font-size: 12px; color: #b91c1c; }
      .ms-layer-retry {
        align-self: flex-start;
        padding: 6px 12px;
        border: 1px solid #b91c1c;
        border-radius: 8px;
        background: #fff;
        color: #b91c1c;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
      }
      .ms-layer-retry:hover { background: #fee2e2; }
      .ms-add-layer { width: 100%; margin-top: 10px; }

      /* --- Brush controls ---------------------------------------------------- */
      .ms-tools { display: inline-flex; gap: 6px; flex-wrap: wrap; }
      .ms-tool-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        border: 1.5px solid var(--border);
        border-radius: 999px;
        background: #fff;
        color: #374151;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
      }
      .ms-tool-btn.is-active { border-color: #2563eb; background: #2563eb; color: #fff; }
      .ms-tool-btn:disabled { opacity: 0.45; cursor: default; }
      .ms-tool-btn:focus-visible, .ms-chip:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
      .ms-brush-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
      .ms-brush-row label { font-size: 13px; color: #374151; white-space: nowrap; }
      .ms-brush-row input[type="range"] { flex: 1; accent-color: #2563eb; }
      .ms-brush-size { font-size: 12px; color: #6b7280; min-width: 46px; text-align: right; }

      /* --- Magic select (Gemini segmentation) -------------------------------- */
      .ms-wand-row { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
      .ms-wand-row.hidden { display: none; }
      .ms-wand-hint { font-size: 12.5px; color: #374151; margin: 0; line-height: 1.45; }
      .ms-wand-busy { font-size: 12px; color: #2563eb; margin: 0; display: flex; align-items: center; gap: 7px; }
      .ms-wand-busy::before {
        content: '';
        width: 12px; height: 12px;
        border-radius: 50%;
        border: 2px solid rgba(37, 99, 235, 0.25);
        border-top-color: #2563eb;
        animation: ms-spin 0.9s linear infinite;
        flex-shrink: 0;
      }
      .ms-wand-busy.hidden { display: none; }
      .ms-stack.is-analyzing { cursor: progress; }

      /* --- Generate CTA ------------------------------------------------------ */
      .ms-cta {
        display: flex; flex-direction: column; gap: 10px; align-items: stretch; text-align: center;
        padding-top: 16px;
        border-top: 1px dashed rgba(37, 99, 235, 0.22);
      }
      .ms-cta .btn { width: 100%; }
      .ms-progress-text { font-size: 13px; color: #374151; font-style: italic; min-height: 18px; }

      /* --- Help dialog -------------------------------------------------------- */
      .ms-help-card { text-align: left; max-width: 540px; position: relative; }
      .ms-help-card h2 { font-size: 1.25rem; padding-right: 30px; }
      .ms-help-steps {
        margin: 0 0 18px;
        padding-left: 22px;
        color: #374151;
        font-size: 14px;
        line-height: 1.6;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .ms-help-card h3 { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: #111827; }
      .ms-help-close {
        position: absolute;
        top: 10px; right: 10px;
        width: 28px; height: 28px;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: #6b7280;
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
      }
      .ms-help-close:hover { background: rgba(17, 24, 39, 0.06); color: #111827; }
      .ms-help-done { margin-top: 18px; width: 100%; }

      /* --- Keyboard shortcut hint (inside the help dialog) --------------------- */
      .ms-kbd-hint { margin: 10px 0 0; font-size: 11.5px; color: #6b7280; line-height: 1.9; }
      .ms-help-card .ms-kbd-hint { margin: 0; font-size: 13px; }
      .ms-kbd-hint kbd {
        font-family: inherit;
        background: #eef2ff;
        border: 1px solid #c7d2fe;
        border-bottom-width: 2px;
        border-radius: 5px;
        padding: 1px 6px;
        font-size: 11px;
        color: #1e3a8a;
      }

      /* --- Area quick-switch chips over the canvas ----------------------------- */
      .ms-chipbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
      .ms-chip {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 6px 12px;
        border-radius: 999px;
        border: 1.5px solid var(--border);
        background: rgba(255, 255, 255, 0.75);
        font-size: 13px;
        font-weight: 600;
        color: #374151;
        cursor: pointer;
        transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
      }
      .ms-chip:hover { transform: translateY(-1px); }
      .ms-chip .ms-layer-dot { width: 12px; height: 12px; }
      .ms-chip.is-active {
        border-color: var(--layer-color, #2563eb);
        color: #111827;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--layer-color, #2563eb) 20%, transparent);
      }
      .ms-chip--add { border-style: dashed; border-color: #93c5fd; background: rgba(219, 234, 254, 0.4); color: #1d4ed8; }
      @media (prefers-reduced-motion: reduce) {
        .ms-chip { transition: none; }
        .ms-chip:hover { transform: none; }
      }

      /* --- Brush cursor preview -------------------------------------------------- */
      .ms-cursor {
        position: absolute;
        border: 2px solid var(--cursor-color, #2563eb);
        background: color-mix(in srgb, var(--cursor-color, #2563eb) 14%, transparent);
        border-radius: 50%;
        pointer-events: none;
        transform: translate(-50%, -50%);
        z-index: 5;
        display: none;
      }
      .ms-cursor.is-erase { border-style: dashed; border-color: #6b7280; background: rgba(107, 114, 128, 0.12); }

      /* Marquee preview while dragging out a rectangle highlight. */
      .ms-rect-preview {
        position: absolute;
        display: none;
        border: 2px dashed var(--cursor-color, #2563eb);
        background: color-mix(in srgb, var(--cursor-color, #2563eb) 18%, transparent);
        pointer-events: none;
        z-index: 6;
      }

      /* --- Workspace ---------------------------------------------------------- */
      /* min-width:0 stops the grid item from growing to fit a zoomed canvas —
         the viewer scrolls instead. */
      .ms-workspace { padding: 18px; display: flex; flex-direction: column; gap: 14px; min-height: 480px; min-width: 0; }
      .ms-viewer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        min-height: 40px;
      }
      .ms-draw-hint { margin: 0; font-size: 13px; color: #374151; }
      .ms-viewer-actions { display: flex; gap: 8px; flex-wrap: wrap; }
      /* margin:auto (not flex centering) keeps zoomed content scrollable.
         Scrollbars only exist while zoomed — at 100% the photo always fits,
         and overlays that poke past its edge (compare grip, brush cursor)
         must not spawn them. */
      .ms-viewer { flex: 1; display: flex; overflow: hidden; max-height: 76vh; }
      .ms-viewer.is-zoomed { overflow: auto; }
      /* While zoomed the stack must grow with the widened canvas — if it
         stayed clamped to the viewer width, every inset:0 overlay (highlights,
         result, compare divider) would render squeezed while the photo
         overflowed, misaligning strokes from the cursor. */
      .ms-viewer.is-zoomed .ms-stack { max-width: none; }
      .ms-stack { margin: auto; }

      .ms-stack.is-pan { cursor: grab; }
      .ms-stack.is-pan:active { cursor: grabbing; }

      .ms-dropzone {
        width: 100%;
        min-height: 563px;
        border: 2px dashed #93c5fd;
        border-radius: 14px;
        display: grid;
        place-items: center;
        text-align: center;
        cursor: pointer;
        background: rgba(255, 255, 255, 0.35);
        padding: 24px;
      }
      .ms-dropzone { transition: border-color 0.15s ease, background 0.15s ease; }
      .ms-dropzone:hover, .ms-dropzone.is-drag-over { border-color: #2563eb; background: rgba(219, 234, 254, 0.45); }
      .ms-dropzone:focus-visible { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
      .ms-dz-icon { color: #2563eb; margin-bottom: 10px; }
      .ms-dz-icon svg { transition: transform 0.2s ease; }
      .ms-dropzone:hover .ms-dz-icon svg, .ms-dropzone.is-drag-over .ms-dz-icon svg { transform: translateY(-3px) scale(1.06); }
      @media (prefers-reduced-motion: reduce) {
        .ms-dropzone, .ms-dz-icon svg { transition: none; }
        .ms-dropzone:hover .ms-dz-icon svg { transform: none; }
      }
      .ms-dz-text { font-weight: 700; color: #111827; font-size: 16px; }
      .ms-dz-sub { color: #6b7280; font-size: 13px; margin-top: 6px; }
      .ms-dz-dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
      .ms-dz-dots span {
        width: 13px; height: 13px;
        border-radius: 50%;
        opacity: 0.85;
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
        animation: ms-dz-bob 2.8s ease-in-out infinite;
      }
      /* Staggered delays turn the shared keyframes into a left-to-right wave. */
      .ms-dz-dots span:nth-child(2) { animation-delay: 0.35s; }
      .ms-dz-dots span:nth-child(3) { animation-delay: 0.7s; }
      .ms-dz-dots span:nth-child(4) { animation-delay: 1.05s; }
      @keyframes ms-dz-bob {
        0%, 55%, 100% { transform: translateY(0) scale(1); opacity: 0.85; }
        12% { transform: translateY(-7px) scale(1.18); opacity: 1; }
        24% { transform: translateY(1px) scale(0.94); }
        34% { transform: translateY(0) scale(1); }
      }
      @media (prefers-reduced-motion: reduce) {
        .ms-dz-dots span { animation: none; }
      }

      .ms-stack { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
      .ms-stack canvas { border-radius: 12px; }
      #ms-base-canvas {
        display: block;
        max-width: 100%;
        max-height: 72vh;
        width: auto;
        height: auto;
        background: #fff;
        box-shadow: 0 10px 30px rgba(30, 58, 138, 0.15);
      }
      .ms-layer-canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0.5;
        mix-blend-mode: multiply;
        pointer-events: none;
        transition: opacity 0.12s ease;
      }
      /* Hold H to peek at the photo under the highlights. */
      .ms-stack.is-peek .ms-layer-canvas { opacity: 0; }
      @media (prefers-reduced-motion: reduce) {
        .ms-layer-canvas { transition: none; }
      }
      #ms-result-canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
      }
      .ms-stack.can-draw { cursor: crosshair; touch-action: none; }
      .ms-stack.is-compare { cursor: ew-resize; touch-action: none; }
      /* Soft enough that progressively composited areas visibly land mid-run. */
      .ms-stack.is-busy canvas { filter: blur(2.5px) brightness(0.98); }
      /* An area that already finished mid-run: drop its highlight so the
         freshly composited result underneath is what the user sees. */
      .ms-stack.is-busy .ms-layer-canvas.is-landed { opacity: 0.12; }

      /* --- Before/After compare slider (review phase) -------------------------- */
      .ms-compare { position: absolute; top: 0; bottom: 0; width: 0; z-index: 7; }
      .ms-compare-line {
        position: absolute;
        top: 0; bottom: 0; left: -1.5px;
        width: 3px;
        background: #fff;
        box-shadow: 0 0 8px rgba(17, 24, 39, 0.4);
        pointer-events: none;
      }
      .ms-compare-grip {
        position: absolute;
        top: 50%; left: 0;
        transform: translate(-50%, -50%);
        width: 38px; height: 38px;
        border: none;
        border-radius: 50%;
        background: #fff;
        color: #1e3a8a;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 14px rgba(30, 58, 138, 0.35);
        cursor: ew-resize;
        touch-action: none;
      }
      .ms-compare-grip:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.5); outline-offset: 2px; }
      .ms-compare-label {
        position: absolute;
        top: 10px;
        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(17, 24, 39, 0.62);
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
        z-index: 7;
        pointer-events: none;
      }
      .ms-compare-label--before { left: 10px; }
      .ms-compare-label--after { right: 10px; }

      .ms-busy-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 14px;
        background: rgba(255, 255, 255, 0.28);
        z-index: 6;
        border-radius: 12px;
      }
      .ms-busy-overlay.hidden { display: none; }
      .ms-busy-spin {
        width: 46px; height: 46px;
        border-radius: 50%;
        border: 4px solid rgba(37, 99, 235, 0.25);
        border-top-color: #2563eb;
        animation: ms-spin 0.9s linear infinite;
      }
      .ms-busy-msg {
        font-weight: 600;
        color: #1f2937;
        font-size: 14px;
        text-align: center;
        max-width: 80%;
        padding: 0 12px;
        line-height: 1.4;
      }
      @keyframes ms-spin { to { transform: rotate(360deg); } }
      .ms-busy-dots { display: flex; gap: 10px; }
      .ms-busy-dot {
        width: 20px; height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
      }
      .ms-busy-dot--running { animation: ms-dot-pulse 1.1s ease-in-out infinite; }
      @keyframes ms-dot-pulse {
        0%, 100% { transform: scale(1); opacity: 0.6; }
        50% { transform: scale(1.25); opacity: 1; }
      }
      @media (prefers-reduced-motion: reduce) {
        .ms-busy-spin { animation-duration: 2.4s; }
        .ms-busy-dot--running { animation: none; opacity: 0.75; }
      }

      .ms-visually-hidden {
        position: absolute !important;
        width: 1px; height: 1px;
        margin: -1px; padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
      }

      /* Tall windows: keep the controls in view while the photo scrolls. */
      @media (min-height: 900px) {
        .ms-toolbar { position: sticky; top: 16px; }
      }

      /* --- Narrow desktop windows: stack the panels --------------------------- */
      @media (max-width: 900px) {
        .ms-grid { grid-template-columns: 1fr; }
        .ms-workspace { order: 1; min-height: 0; }
        .ms-toolbar { order: 2; position: static; }
        #ms-base-canvas { max-height: 58vh; }
        .ms-dropzone { min-height: 260px; }
      }

      /* --- Phones: same tool, compact spacing (single column via ≤900px) ------- */
      @media (max-width: 768px) {
        .ms-toolbar { padding: 14px; }
        .ms-workspace { padding: 12px; min-height: 0; }
        #ms-base-canvas { max-height: 52vh; }
        .ms-viewer { max-height: 62vh; }
        .ms-dropzone { min-height: 220px; }
        .ms-viewer-header { flex-wrap: wrap; row-gap: 8px; }
        .ms-tools { flex-wrap: wrap; }
      }