.mx-screen{height:100dvh;min-height:0;display:flex;flex-direction:column;background:#0c0d10;color:#eef0f3}
.mx-screen .topbar{flex:none}
.mx-screen .title small{display:block;font-size:11px;color:#9aa1ad;margin-top:4px}
.mx-editor{overflow-y:auto;flex:1;min-height:0;display:flex;flex-direction:column;gap:16px;padding:12px 16px 24px}
.mx-preview{position:relative;aspect-ratio:16/9;flex:none;overflow:hidden;border:1px solid #262b33;border-radius:14px;background:#15171b}
.mx-preview video,.mx-preview [data-mixer-overlay],.mx-preview [data-live-status]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mx-preview [data-live-status]{display:grid;place-items:center;font-size:12px}
.mx-preview-label{position:absolute;top:10px;left:10px;padding:5px 8px;border-radius:5px;background:#0c0d10cc;font:10px var(--mono);max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mx-card{padding:16px;border:1px solid #24272e;border-radius:14px;background:#15171b;display:grid;gap:12px}
.mx-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mx-editor h2,.mx-heading>label{margin:0;font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#9aa1ad}
.mx-heading button,.mx-template-edit{border:0;background:transparent;color:#60a5fa;min-height:36px;font:600 12px var(--sans)}
.mx-editor small,.mx-heading>span{font-size:11px;color:#9aa1ad}
.mx-tvs{display:flex;flex-wrap:wrap;gap:6px}
.mx-tv{display:flex;align-items:center;gap:6px;min-height:44px;padding:6px 10px;border-radius:9px;background:#0c0d10;border:1px solid #2a2e36;color:#eef0f3;max-width:100%;text-align:left}
.mx-tv strong{display:block;font-size:12px;overflow-wrap:anywhere}
.mx-tv small{display:block;font-size:10px}
.mx-check{font-size:11px;width:15px;height:15px;border:1px solid #4a505b;border-radius:4px;flex:none;text-align:center}
.mx-tv[aria-pressed=true]{background:#172238;border-color:#3b82f6}
.mx-tv[aria-pressed=true] .mx-check{background:#3b82f6;border-color:#3b82f6}
.mx-editor button:disabled,.mx-footer button:disabled{opacity:.45;cursor:not-allowed}
.mx-templates{display:flex;gap:8px;overflow-x:auto;padding:8px 0}
.mx-template{flex:0 0 145px;min-width:0;border:1px solid #24272e;border-radius:12px;background:#15171b;overflow:hidden}
.mx-template>button:first-child{width:100%;border:1px solid transparent;border-radius:11px;display:grid;gap:8px;padding:10px;color:#eef0f3;background:transparent;text-align:left}
.mx-template>button[aria-pressed=true]{border-color:#3b82f6}
.mx-template strong{font-size:13px;overflow-wrap:anywhere}
.mx-template-edit{padding:0 10px;min-height:32px}
.mx-swatch{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:5px;font-size:10px;padding:6px}
.mx-editor input:not([type=range]):not([type=checkbox]):not([type=color]){width:100%;min-width:0;box-sizing:border-box;border:1px solid #303640;border-radius:9px;background:#0c0d10;color:#eef0f3;padding:11px;font-size:14px}
.mx-emojis{display:flex;gap:6px}
.mx-emojis button{background:transparent;border:0;min-width:36px;min-height:36px}
.mx-segments{display:flex;gap:6px}
.mx-segments button{flex:1;min-width:0;min-height:44px;border:1px solid #2a2e36;border-radius:9px;background:#0c0d10;color:#eef0f3;font:600 12px var(--sans);padding:8px 4px}
.mx-segments button[aria-pressed=true]{background:#1b2e41;border-color:#60a5fa}
.mx-palettes{display:flex;gap:10px}
.mx-palettes button{width:44px;height:44px;border:2px solid #343943;border-radius:10px;background:var(--swatch-bg);color:var(--swatch-fg);font-weight:700}
.mx-palettes button[aria-pressed=true]{outline:2px solid #60a5fa;outline-offset:2px}
.mx-editor details{border-top:1px solid #24272e;padding-top:10px}
.mx-editor summary{font-size:12px;color:#9aa1ad;cursor:pointer;padding:5px 0}
.mx-custom{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:10px}
.mx-editor label{font-size:12px}
.mx-custom input{display:block;max-width:100%;margin-top:8px}
.mx-editor input[type=range]{width:100%;accent-color:#3b82f6}
.mx-switch{display:flex;justify-content:space-between;align-items:center;min-height:32px;gap:12px}
.mx-switch input{appearance:none;width:40px;height:24px;border-radius:20px;background:#3a3f49;position:relative;flex:none;cursor:pointer}
.mx-switch input:before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%}
.mx-switch input:checked{background:#22c55e}
.mx-switch input:checked:before{left:19px}
.mx-switch input:disabled{opacity:.4}
.mx-footer{flex:none;display:flex;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid #24272e;background:#0c0d10}
.mx-footer .btn-primary{flex:1}
.mx-result{border:1px solid #1f6b3e;border-radius:10px;background:#0f2a1b;padding:12px;color:#bbf7d0;font-size:12px}
.mx-result.mx-error{border-color:#a34848;background:#321919;color:#ffb3b3}
.mx-screen button:focus-visible,.mx-screen input:focus-visible,.mx-screen summary:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}

.mx-tvs[hidden]{display:none}

.mx-screen .topbar .back{border:0;background:transparent;min-width:44px;min-height:44px;padding:8px;color:#eef0f3}
.mx-screen .topbar .title{font-size:16px;color:#eef0f3}
.mx-editor>section{flex-shrink:0}
.mx-footer .btn{min-height:48px;padding:12px 18px;border-radius:10px}
.mx-heading .mx-switch{font-size:12px;color:#eef0f3}
.mx-palettes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;padding-bottom:18px}
.mx-palettes button{width:100%;position:relative;min-height:44px}
.mx-palettes button span{position:absolute;top:48px;left:50%;transform:translateX(-50%);font-size:9px;color:#b2bac6;font-weight:400}
.mx-photo-picker{display:flex;align-items:center;gap:12px;min-width:0}
.mx-photo-picker>img,.mx-photo-empty{width:72px;height:72px;object-fit:cover;border-radius:9px;flex:none;background:#222a2c}
.mx-photo-empty{display:grid;place-items:center;font-size:24px;color:#7ba193}
.mx-photo-picker label{min-width:0;flex:1}
.mx-photo-picker select{display:block;width:100%;min-width:0;margin-top:7px;min-height:44px;background:#0c0d10;color:#eef0f3;border:1px solid #303640;border-radius:8px;padding:8px}
.mx-upload{min-height:44px;display:flex;align-items:center;padding:0 12px;border:1px solid #39454c;border-radius:9px;cursor:pointer;color:#9de8c8}
.mx-banner-fields>label{display:grid;gap:7px}
.content-texts{margin:0 0 18px;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:0 14px}
.content-texts>summary{min-height:52px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-weight:600;list-style:none}
.content-texts>summary::-webkit-details-marker{display:none}
.content-texts>summary:after{content:'⌄';font-size:18px;transition:transform .15s}
.content-texts[open]>summary:after{transform:rotate(180deg)}
.content-texts>.btn{display:flex;justify-content:space-between;width:100%;min-height:48px;margin-bottom:14px}
.content-mixer-picker{max-height:80dvh;overflow:auto}
.content-mixer-picker p{color:var(--ink-dimmer);font-size:13px}
.content-mixer-tvs{display:grid;gap:8px}
.content-mixer-tvs>button{display:grid;gap:5px;text-align:left;padding:14px;min-height:64px;background:var(--card);border:1px solid var(--line);border-radius:10px;color:var(--ink);cursor:pointer}
.content-mixer-tvs small{color:var(--ink-dimmer)}
.content-mixer-tvs>button:disabled{opacity:.45;cursor:default}
@media(min-width:900px){.mx-editor{width:100%;max-width:760px;box-sizing:border-box;margin:auto}.mx-preview{max-height:380px}.mx-footer{justify-content:center}.mx-footer .btn-primary{max-width:580px}}

.mx-controls{display:contents}
@media(max-width:899px){.mx-screen .mx-editor{overflow:hidden;padding-bottom:0}.mx-screen .mx-preview{align-self:center;width:min(100%,53.333dvh);max-height:30dvh;box-sizing:border-box}.mx-controls{display:flex;flex:1;min-height:0;flex-direction:column;gap:16px;overflow-y:auto;overscroll-behavior:contain;padding:2px 2px 20px;scroll-padding-block:12px}.mx-controls>section,.mx-controls>.mx-result{flex:none}}