/* ---------- Image Studio ---------- */
        .studio-shell { width: min(100% - 32px, 1440px); }
        .studio { --line: rgba(255,255,255,.08); --line2: rgba(255,255,255,.14); --muted: #a1a1aa; --dim: #6b6b76; --cyan: #22d3ee; --violet: #a78bfa;
            display: flex; flex-direction: column; height: max(560px, calc(100vh - 210px)); overflow: hidden;
            border: 1px solid var(--line); border-radius: 22px; background: rgba(6,6,9,.82); box-shadow: 0 30px 80px rgba(0,0,0,.45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
        .studio svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
        .st-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); background: rgba(0,0,0,.35); }
        .st-file { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
        .st-file b { overflow: hidden; color: #fff; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
        .st-file small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
        .st-opts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
        .st-swatches { display: flex; gap: 6px; }
        .st-swatch { width: 22px; height: 22px; padding: 0; border: 2px solid rgba(255,255,255,.15); border-radius: 50%; cursor: pointer; transition: transform .15s; }
        .st-swatch[aria-pressed="true"] { border-color: #fff; transform: scale(1.15); box-shadow: 0 0 0 3px rgba(255,255,255,.12); }
        .st-size { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
        .st-size input { width: 110px; accent-color: var(--cyan); }
        .st-acts { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
        .st-icon { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--muted); cursor: pointer; }
        .st-icon:hover:not(:disabled) { background: rgba(255,255,255,.07); color: #fff; }
        .st-icon:disabled { opacity: .35; cursor: default; }
        .st-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border: 1px solid var(--line2); border-radius: 10px;
            background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); color: #fff; font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer;
            box-shadow: 0 2px 0 rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12); transition: filter .2s, transform .12s; }
        .st-btn:hover { filter: brightness(1.12); } .st-btn:active { transform: translateY(1px); }
        .st-btn:disabled { opacity: .4; cursor: default; filter: none; }
        .st-main { border-color: #fff; background: linear-gradient(180deg, #fff 0%, #eef1f5 55%, #d9dee6 100%); color: #0a0a0c; box-shadow: 0 2px 0 #9aa3af, 0 8px 22px rgba(0,0,0,.45), inset 0 1px 0 #fff; }
        .st-body { flex: 1; min-height: 0; display: flex; }

        /* Tool rail: icons only, or click the arrow to show the tool names. The choice is remembered. */
        .st-rail { display: flex; flex-direction: column; gap: 5px; width: 64px; padding: 12px 10px; overflow-x: hidden; overflow-y: auto; border-right: 1px solid var(--line); background: rgba(0,0,0,.28);
            transition: width .28s cubic-bezier(.16,1,.3,1); scrollbar-width: none; }
        .st-rail.open { width: 178px; }
        .st-tool, .st-expand { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 0 11px; border: 1px solid transparent; border-radius: 11px;
            background: none; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
        .st-tool svg { width: 19px; height: 19px; }
        .st-tool span, .st-expand span { opacity: 0; transition: opacity .18s; }
        .st-rail.open .st-tool span, .st-rail.open .st-expand span { opacity: 1; transition-delay: .08s; }
        .st-tool kbd { position: absolute; right: 4px; bottom: 3px; color: var(--dim); font: 600 8.5px/1 system-ui; }
        .st-rail.open .st-tool kbd { top: 50%; bottom: auto; right: 10px; transform: translateY(-50%); padding: 3px 6px; border: 1px solid var(--line2); border-radius: 5px; font-size: 10px; }
        .st-tool:hover, .st-expand:hover { background: rgba(255,255,255,.06); color: #fff; }
        .st-tool[aria-pressed="true"] { border-color: rgba(34,211,238,.45); background: rgba(34,211,238,.12); color: #67e8f9; }
        .st-expand { min-height: 34px; margin-bottom: 4px; color: var(--dim); font-size: 12px; }
        .st-expand svg { width: 16px; height: 16px; margin: 0 1px; transition: transform .28s; }
        .st-rail.open .st-expand svg { transform: rotate(180deg); }
        .st-rail hr { width: 100%; margin: 6px 0; border: 0; border-top: 1px solid var(--line); }

        .st-stage { position: relative; flex: 1; min-width: 0; display: grid; place-items: center; padding: 26px; overflow: auto;
            background: repeating-conic-gradient(#101016 0 25%, #0b0b10 0 50%) 0 0/22px 22px; }
        .st-stage.drag::after { content: ""; position: absolute; inset: 12px; border: 2px dashed var(--cyan); border-radius: 16px; background: rgba(34,211,238,.06); pointer-events: none; }
        .st-canvases { position: relative; line-height: 0; border-radius: 6px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); animation: st-in .35s cubic-bezier(.16,1,.3,1); }
        .studio [hidden] { display: none !important; }
        .st-canvases canvas { display: block; }
        #st-overlay { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; cursor: crosshair; touch-action: none; }
        @keyframes st-in { from { opacity: 0; transform: scale(.97); } }
        .st-drop { display: grid; justify-items: center; gap: 8px; width: min(460px, 100%); padding: 44px 24px; border: 1.5px dashed rgba(255,255,255,.2); border-radius: 20px;
            background: rgba(0,0,0,.35); color: var(--muted); font: inherit; font-size: 13px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
        .st-drop:hover { border-color: rgba(34,211,238,.6); background: rgba(34,211,238,.05); }
        .st-drop b { color: #fff; font-size: 16px; }
        .st-drop small { color: var(--dim); letter-spacing: .06em; }
        .st-drop-ic { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 4px; border-radius: 16px; background: linear-gradient(135deg, rgba(34,211,238,.18), rgba(167,139,250,.18)); color: #67e8f9; }
        .st-drop-ic svg { width: 26px; height: 26px; }
        .st-text { position: absolute; z-index: 5; min-width: 120px; padding: 2px 4px; border: 1px dashed rgba(255,255,255,.6); border-radius: 4px; outline: 0; background: rgba(0,0,0,.25); font-weight: 700; line-height: 1.2; }
        .st-cropbar { position: absolute; left: 50%; bottom: 18px; z-index: 6; display: flex; gap: 8px; transform: translateX(-50%); padding: 6px; border: 1px solid var(--line2); border-radius: 12px; background: rgba(17,17,22,.92); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
        .st-toast { position: fixed; left: 50%; bottom: 24px; z-index: 2000; max-width: min(520px, calc(100vw - 32px)); margin: 0; padding: 10px 16px; border-radius: 999px; background: #fff; color: #0a0a0c; font-size: 13px; font-weight: 700;
            box-shadow: 0 10px 30px rgba(0,0,0,.5); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: .25s cubic-bezier(.16,1,.3,1); }
        .st-toast.on { transform: translate(-50%, 0); opacity: 1; }
        .st-toast.error { background: #fb7185; color: #fff; }
        .studio:not(.has-pic) .st-opts, .studio:not(.has-pic) .st-acts > :not(#st-new) { visibility: hidden; }
        .studio:not(.has-pic) #st-new { display: none; }

        /* Phones and small tablets: tools become a scrolling strip under the top bar */
        @media (max-width: 760px) {
            .studio-shell { width: calc(100% - 20px); }
            .studio { height: auto; min-height: 520px; }
            .st-top { padding: 10px 12px; gap: 10px; }
            .st-acts { width: 100%; }
            .st-acts .st-btn { flex: 1; justify-content: center; padding: 0 8px; }
            .st-body { flex-direction: column; }
            .st-rail, .st-rail.open { flex-direction: row; width: auto; padding: 8px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--line); }
            .st-expand, .st-tool kbd, .st-rail hr { display: none; }
            .st-tool { flex: none; width: 46px; justify-content: center; padding: 0; }
            .st-tool span { display: none; }
            .st-stage { min-height: 380px; padding: 14px; }
        }
        @media (prefers-reduced-motion: reduce) { .st-rail, .st-tool span, .st-expand svg, .st-canvases, .st-toast { transition: none; animation: none; } }

/* Removal-specific controls; the frame above matches Image Studio. */
.st-rail { flex-shrink:0; }
.bg-check { background:repeating-conic-gradient(#777 0 25%,#eee 0 50%) 0 0/10px 10px; }
.st-stage[data-preview="white"] { background:#fff; }
.st-stage[data-preview="dark"] { background:#18181b; }
.bg-view-label { position:absolute;top:12px;right:14px;padding:5px 10px;border-radius:20px;background:#09090ddd;color:#d4d4d8;font-size:11px;pointer-events:none; }
.studio:not(.has-pic) .bg-view-label { display:none; }
.bg-loading { position:absolute;inset:0;z-index:10;display:grid;place-items:center;padding:18px;background:rgba(6,6,12,.68);backdrop-filter:blur(7px); }
.bg-error { margin:16px 0;padding:16px 20px;border:1px solid #fb718555;border-radius:16px;background:#30121cbf;color:#fecdd3; }
.bg-error[hidden] { display:none; }
.bg-error p { margin:6px 0 0;font-size:13px;line-height:1.6; }
.studio.is-loading #st-overlay { pointer-events:none; }
.studio button:focus-visible { outline:2px solid var(--cyan);outline-offset:3px; }
.st-tool:disabled { opacity:.35;cursor:default; }
@media(max-width:760px) { .st-opts { width:100%;justify-content:space-between; } .st-acts { gap:6px; } .st-acts .st-btn { flex:1 0 auto; } .st-acts #st-studio { flex-basis:40%; } }
.bg-loading-content { display:grid;justify-items:center;gap:14px;width:min(440px,100%);padding:20px 12px;text-align:center;animation:st-in .35s ease; }
.bg-loading-content b { margin-top:10px;color:#fff;font-size:17px;text-shadow:0 2px 12px #000; }
.bg-loading-content p { margin:0;color:#d4d4df;font-size:13px;line-height:1.6;max-width:360px;text-shadow:0 2px 10px #000; }
.bg-loading-content small { color:#a1a1b5;min-height:16px;font-size:12px;font-variant-numeric:tabular-nums; }
        .ai-loader {
            position: relative;
            width: 112px;
            height: 112px;
            display: grid;
            place-items: center;
        }

        .ai-loader::before,
        .ai-loader::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 2px solid transparent;
        }

        .ai-loader::before {
            border-top-color: #60a5fa;
            border-right-color: rgba(96, 165, 250, 0.25);
            animation: ai-spin 1.1s linear infinite;
            box-shadow: 0 0 30px rgba(59, 130, 246, 0.2);
        }

        .ai-loader::after {
            inset: 13px;
            border-bottom-color: #a78bfa;
            border-left-color: rgba(167, 139, 250, 0.25);
            animation: ai-spin-reverse 1.7s linear infinite;
        }

        .ai-core {
            width: 54px;
            height: 54px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            color: #dbeafe;
            font: 800 12px/1 'JetBrains Mono', monospace;
            letter-spacing: 0.12em;
            background: radial-gradient(circle at 35% 30%, #2563eb, #111827 70%);
            box-shadow: 0 0 28px rgba(37, 99, 235, 0.6), inset 0 0 18px rgba(255,255,255,0.08);
            animation: ai-pulse 1.8s ease-in-out infinite;
        }

        .ai-particles { position: absolute; inset: -28px; pointer-events: none; }
        .ai-particles span {
            position: absolute;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: #60a5fa;
            box-shadow: 0 0 10px #3b82f6;
            animation: particle-float 2.4s ease-in-out infinite;
        }
        .ai-particles span:nth-child(1) { left: 10%; top: 45%; animation-delay: -0.2s; }
        .ai-particles span:nth-child(2) { left: 25%; top: 8%; animation-delay: -1.1s; }
        .ai-particles span:nth-child(3) { right: 16%; top: 18%; animation-delay: -0.7s; }
        .ai-particles span:nth-child(4) { right: 4%; top: 58%; animation-delay: -1.7s; }
        .ai-particles span:nth-child(5) { right: 26%; bottom: 4%; animation-delay: -0.4s; }
        .ai-particles span:nth-child(6) { left: 18%; bottom: 14%; animation-delay: -1.4s; }

        @keyframes ai-spin { to { transform: rotate(360deg); } }
        @keyframes ai-spin-reverse { to { transform: rotate(-360deg); } }
        @keyframes ai-pulse { 50% { transform: scale(0.92); filter: brightness(1.25); } }
        @keyframes particle-float { 0%, 100% { transform: translateY(0) scale(0.7); opacity: 0.25; } 50% { transform: translateY(-12px) scale(1.25); opacity: 1; } }

        @media (prefers-reduced-motion: reduce) {
            .ai-loader::before, .ai-loader::after, .ai-core, .ai-particles span { animation: none; }
        }


.ai-core { position:relative;width:64px;height:64px;overflow:hidden;border:1px solid rgba(103,232,249,.28);background:#061019;box-shadow:0 0 30px rgba(34,211,238,.26),inset 0 0 18px rgba(255,255,255,.06); }
.ai-core img { position:absolute;top:50%;left:50%;display:block;width:70px;height:70px;max-width:none;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 0 7px rgba(34,211,238,.35)); }
@media(prefers-reduced-motion:reduce) { .bg-loading-content { animation:none; } }
.bg-engine-bar { display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px;color:#e5e7eb;font-size:13px; }
.bg-engine-bar label { font-weight:700; }
.bg-engine-bar select { border:1px solid #ffffff26;border-radius:10px;padding:10px 12px;background:#101321;color:#f5f5fa;max-width:100%;font:inherit; }
.bg-engine-bar select:focus-visible { outline:2px solid #22d3ee;outline-offset:3px; }
.bg-engine-bar a { color:#67e8f9;text-underline-offset:3px; }
.bg-engine-bar #bg-allowance { color:#b7bbc9;flex:1; }
.bg-engine-help { margin:0 0 18px;color:#aeb5c5;font-size:12px;line-height:1.6; }
.bg-upgrade { display:flex;gap:16px;align-items:center;padding:18px 20px;margin-top:18px;border:1px solid #eab30845;border-radius:16px;background:linear-gradient(120deg,#201b12,#121526); }
.bg-upgrade[hidden] { display:none; }
.bg-upgrade div { flex:1; }.bg-upgrade b { color:#fde68a; }.bg-upgrade p { margin:6px 0 0;color:#bfc4d3;font-size:13px;line-height:1.5; }
.bg-upgrade a { text-decoration:none;white-space:nowrap; }
@media(max-width:760px) { .bg-engine-bar select { flex:1; }.bg-engine-bar #bg-allowance { flex-basis:100%; }.bg-upgrade { flex-wrap:wrap; }.bg-upgrade div { flex-basis:100%; } }