/* Theme-aware creative workspace. */
.radio-content-studio { display:flex; flex-direction:column; padding:0; overflow:hidden; }
.design-studio { --explorer-width:240px; --preview-height:300px; display:flex; flex-direction:column; flex:1; width:100%; height:100%; min-height:0; box-sizing:border-box; border:1px solid var(--border); background:var(--bg-surface); overflow:hidden; color:var(--text-primary); }
.design-toolbar { display:flex; flex-shrink:0; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.design-toolbar strong { display:flex; gap:8px; align-items:center; margin-right:auto; }
.design-studio button,.design-import { color:var(--text-secondary); background:var(--bg-surface-2); border:1px solid var(--border); border-radius:6px; padding:6px 10px; cursor:pointer; font:inherit; font-size:12px; }
.design-studio button:hover,.design-studio button.active { color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--bg-surface)); border-color:var(--accent); }
.design-studio button:disabled { opacity:.4; cursor:default; }
.design-studio input { background:var(--bg-surface-2); color:var(--text-primary); border:1px solid var(--border); border-radius:6px; padding:7px; min-width:0; font:inherit; font-size:12px; accent-color:var(--accent); }
.design-studio input[type=range] { padding:0; width:100%; }
.design-toolbar input { width:180px; }
.design-import {position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;}
.design-import input[type=file] {position:absolute;inset:0;width:100%;height:100%;min-width:0;min-height:0;padding:0;border:0;opacity:0;cursor:pointer;}
.design-import:focus-within {outline:2px solid var(--accent);outline-offset:2px;}
.design-workspace { display:grid; grid-template-columns:var(--explorer-width) 6px minmax(0,1fr); min-height:0; flex:1; }
.design-explorer { min-width:0; overflow:auto; padding:12px; }
.design-explorer h4 { color:var(--text-tertiary); font-size:10px; letter-spacing:.14em; margin:0 0 16px; }
.design-explorer details { margin-bottom:18px; }
.design-explorer summary { padding:8px 0; cursor:pointer; font-size:12px; font-weight:600; }
.design-explorer input { width:100%; box-sizing:border-box; }
.design-studio .design-file { display:flex; align-items:center; gap:6px; width:100%; text-align:left; border:0; background:transparent; margin:3px 0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.design-library { margin-top:6px; }
.design-main { min-width:0; min-height:0; display:flex; flex-direction:column; }
.design-preview-slot {height:min(var(--preview-height),calc(100% - 200px));min-height:96px;position:relative;flex-shrink:0;}
.design-preview { height:100%; min-height:96px; position:relative; background:#040609; overflow:hidden; }
.design-preview canvas { position:absolute; inset:0; width:100%; height:100%; }
.design-preview-caption { position:absolute; top:8px; left:12px; right:8px; display:flex; gap:10px; align-items:center; font:10px monospace; color:#ffffffaa; pointer-events:none; }
.design-preview-state {margin-left:auto;}.design-studio .design-preview-dock {pointer-events:auto;display:flex;align-items:center;justify-content:center;width:28px;height:26px;padding:3px;background:#090c12aa;color:#eee;border-color:#ffffff22;}.design-preview-dock .icon {width:14px;height:14px;}
.design-explorer-collapsed .design-workspace {grid-template-columns:minmax(0,1fr);}
.design-explorer-collapsed .design-explorer,.design-explorer-collapsed .design-workspace>.design-split {display:none;}
.design-studio .design-explorer-collapse {padding:5px;display:flex;align-items:center;justify-content:center;}.design-explorer-collapse .icon {width:16px;height:16px;}
.design-preview-floating .design-preview-slot {height:38px;min-height:38px;}
.design-preview-floating .design-preview {position:fixed;z-index:95;top:96px;right:24px;width:min(640px,calc(100vw - 48px));height:360px;min-width:260px;min-height:180px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);resize:both;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--border));border-radius:12px;box-shadow:0 20px 80px #0009;}
.design-preview-floating .design-preview-caption {top:0;left:0;right:0;padding:6px 8px 6px 12px;background:linear-gradient(#080b12cc,#080b1288);pointer-events:auto;cursor:move;touch-action:none;user-select:none;}
.design-preview-floating .design-preview-caption:focus-visible {outline:1px solid var(--accent);outline-offset:-1px;}
.design-studio .design-preview-placeholder {display:block;border:0;border-radius:0;width:100%;height:38px;font-size:10px;background:transparent;color:var(--text-tertiary);}
.design-preview-floating .design-main>.design-split {display:none;}
.design-split { background:var(--border); cursor:col-resize; touch-action:none; }
.design-main>.design-split { height:6px; flex-shrink:0; cursor:row-resize; }
.design-split:hover,.design-split:focus-visible { background:var(--accent); outline:0; }
.design-inspector { flex:1; min-height:0; overflow:auto; }
.design-inspector-code { display:flex; flex-direction:column; overflow:hidden; }
.design-inspector-code>.design-tabs,.design-inspector-code>.design-code-actions,.design-inspector-code>.design-help { flex-shrink:0; }
.design-tabs { display:flex; gap:4px; padding:8px 12px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg-surface); z-index:2; overflow-x:auto; }.design-tabs button {flex-shrink:0;}
.design-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px 20px; padding:18px; }
.design-field { display:grid; grid-template-columns:1fr 68px; gap:7px 10px; align-items:center; font-size:12px; }
.design-field>span { grid-column:1/-1; color:var(--text-secondary); }
.design-field input[type=checkbox] { justify-self:start; }
.design-color { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; }
.design-color input { width:60px; height:40px; padding:3px; }
.design-help { font-size:11px; color:var(--text-tertiary); line-height:1.6; margin:12px 18px; }
.design-targets,.design-object-actions,.design-recipes { display:flex; gap:6px; padding:12px 18px 0; flex-wrap:wrap; }
.design-object-actions span { align-self:center; font-size:11px; color:var(--text-tertiary); }
.design-studio .design-remove { margin:0 18px 18px; color:var(--text-secondary); }
.design-code { flex:1; min-height:60px; overflow:hidden; }
.design-code-actions { display:flex; align-items:center; padding:5px 10px; gap:5px; font-size:10px; color:var(--text-tertiary); border-bottom:1px solid var(--border); }
.design-code-selectors {display:flex;gap:1px;min-width:0;border:1px solid var(--border);border-radius:6px;overflow:hidden;background:var(--border);}
.design-code-actions .design-code-selectors select {width:auto;max-width:180px;min-width:0;height:28px;min-height:0;border:0;border-radius:0;padding:3px 23px 3px 7px;font-size:11px;}
.design-studio .design-code-actions .design-format {height:28px;min-height:0;padding:3px 7px;font:11px monospace;}
.design-live-indicator {display:flex;align-items:center;gap:4px;padding:0 5px;white-space:nowrap;}.design-live-indicator>span {width:4px;height:4px;border-radius:50%;background:var(--accent);box-shadow:0 0 5px color-mix(in srgb,var(--accent) 40%,transparent);}
.design-inspector-code>.design-help {margin:5px 12px;font-size:10px;}
.design-status { flex-shrink:0; font-size:11px; background:color-mix(in srgb,var(--accent) 10%,var(--bg-surface)); padding:8px 12px; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:12px; }
.design-status span { color:var(--text-tertiary); }.design-status.error { color:#ef7777; }
.design-source-tabs {display:flex;gap:4px;position:sticky;top:-12px;padding:0 0 12px;background:var(--bg-surface);z-index:2;}
.design-source-tabs button {flex:1;padding:7px 3px;}
.design-library-note {color:var(--text-tertiary);font-size:11px;line-height:1.6;margin:8px 0 14px;}
.design-search {display:flex;gap:5px;}.design-search input {flex:1;min-width:0;}
.design-sample {display:flex;gap:9px;align-items:center;width:100%;text-align:left;margin:7px 0;white-space:normal;line-height:1.5;}
.design-step-number {display:grid;place-items:center;min-width:23px;height:23px;border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,var(--bg-surface));color:var(--accent);}
.design-studio .design-original {display:flex;flex-direction:column;gap:8px;text-align:left;width:100%;padding:12px;margin:10px 0;line-height:1.6;}.design-original strong {color:var(--text-primary);}.design-original span {font-size:11px;}
.design-guide {max-width:820px;margin:0 auto;padding:20px 22px;color:var(--text-secondary);font-size:13px;line-height:1.75;}
.design-guide h2 {margin:4px 0 12px;font-size:24px;line-height:1.3;color:var(--text-primary);}.design-guide h3 {font-size:14px;color:var(--text-primary);margin-top:20px;}
.design-guide-kicker {color:var(--accent);font-size:10px;letter-spacing:.12em;}.design-guide-concept {color:var(--text-primary);font-size:15px;}
.design-guide ol {padding-left:22px;}.design-guide li {margin:8px 0;}
.design-guide-actions {display:flex;gap:8px;flex-wrap:wrap;margin:16px 0;}
.design-challenge {border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--bg-surface));padding:12px 16px;}.design-challenge strong {color:var(--accent);}.design-challenge p {margin:5px 0;}
.design-studio .design-more {width:100%;margin-top:10px;}
.design-studio .design-explorer-toggle,.design-drawer-header,.design-studio .design-drawer-backdrop {display:none;}
@media(max-width:700px),(max-height:520px) {
    .design-studio .design-explorer-collapse {display:none;}
    .design-preview-dock,.design-preview-placeholder {display:none !important;}
    .design-explorer-collapsed.design-browser-open .design-explorer {display:block;}
    .design-workspace {grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);position:relative;}
    .design-explorer {display:none;}
    .design-browser-open .design-explorer {display:block;position:absolute;inset:0 auto 0 0;width:min(340px,calc(100% - 32px));box-sizing:border-box;z-index:21;padding:12px;background:var(--bg-surface);border-right:1px solid var(--accent);box-shadow:12px 0 40px #0006;overscroll-behavior:contain;}
    .design-studio .design-drawer-backdrop {display:block;position:absolute;inset:0;z-index:20;border:0;border-radius:0;padding:0;background:#0008;}
    .design-drawer-header {display:flex;position:sticky;top:0;z-index:4;justify-content:space-between;align-items:center;gap:10px;margin-bottom:0;padding-bottom:8px;background:var(--bg-surface);box-shadow:0 -12px 0 var(--bg-surface);}
    .design-source-tabs {top:52px;padding:8px 0;background:var(--bg-surface);}
    .design-studio .design-explorer-toggle {display:block;}
    .design-workspace>.design-split,.design-main>.design-split {display:none;}
    .design-status span {display:none;}
    .design-toolbar {gap:6px;padding:8px;}
    .design-toolbar strong {flex:1;font-size:13px;}
    .design-toolbar input:not([type=file]) {width:auto;flex:1;min-width:130px;min-height:40px;box-sizing:border-box;}
    .design-studio button,.design-import {min-height:44px;box-sizing:border-box;}
    .design-explorer input {min-height:40px;box-sizing:border-box;}
    .design-drawer-close {min-width:44px;}
    .design-studio .design-file {white-space:normal;overflow-wrap:anywhere;line-height:1.5;padding:9px 8px;}
    .design-main {overflow:auto;overscroll-behavior:contain;}
    .design-preview {height:clamp(110px,26dvh,190px);min-height:110px;}
    .design-inspector {min-height:220px;overscroll-behavior:contain;}
    .design-inspector-code {min-height:280px;overflow:auto;}
    .design-inspector-code>.design-help {display:none;}
    .design-inspector .design-code-actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px;}
    .design-code-actions label {min-width:0;}.design-code-actions select {width:100%;max-width:100%;box-sizing:border-box;min-height:40px;}
    .design-tabs {padding:6px;}.design-tabs button {padding:6px 9px;}
    .design-fields {grid-template-columns:minmax(0,1fr);padding:14px;}
    .design-guide {padding:16px;overflow-wrap:anywhere;}.design-guide h2 {font-size:21px;}
    .design-guide-actions button {flex:1 1 120px;white-space:normal;}
}

/* The preview fits its pane; only the parameter list or preset drawer scrolls. */
@media(max-width:700px),(max-height:520px) {
    .design-studio button,.design-import {min-height:34px;}
    .design-code-actions select {min-height:32px;}
    .design-toolbar {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding:6px;}
    .design-toolbar strong {grid-column:span 3;font-size:12px;min-width:0;gap:5px;}
    .design-toolbar .design-explorer-toggle {grid-column:span 3;justify-self:stretch;}
    .design-toolbar input:not([type=file]) {grid-column:span 4;min-width:0;width:100%;min-height:30px;height:30px;padding:5px;font-size:11px;}
    .design-toolbar .primary,.design-toolbar>button[title="Export design"],.design-toolbar>.design-import {grid-column:span 2;}
    .design-toolbar button,.design-toolbar .design-import {min-height:30px;padding:4px 5px;font-size:11px;}
    .design-main {overflow:hidden;}
    .design-preview-slot,.design-preview-floating .design-preview-slot {height:clamp(96px,23dvh,170px);min-height:96px;max-height:45%;}
    .design-preview {height:100%;min-height:0;max-height:none;}
    .design-preview-floating .design-preview {position:relative;top:auto !important;right:auto !important;left:auto !important;width:100% !important;height:100% !important;min-width:0;min-height:96px;max-width:none;max-height:none;border:0;border-radius:0;box-shadow:none;resize:none;}
    .design-preview-caption {top:8px;left:9px;right:9px;font-size:9px;}
    .design-inspector,.design-inspector-code {min-height:0;overflow:auto;}
    .design-inspector-code {overflow:hidden;}
    .design-tabs {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;padding:5px;overflow:visible;}
    .design-tabs:has(>button:nth-child(6)) {grid-template-columns:repeat(6,minmax(0,1fr));}
    .design-tabs button {min-width:0;min-height:30px;padding:4px 2px;font-size:10px;}
    .design-status {padding:5px 8px;font-size:10px;}
    .design-field {font-size:11px;gap:5px 8px;}.design-fields {padding:10px;gap:12px;}
    .design-inspector .design-code-actions {display:flex;gap:4px;padding:4px 5px;}
    .design-code-actions .design-code-selectors {flex:1;}
    .design-code-actions .design-code-selectors select {flex:1;width:0;max-width:none;font-size:10px;padding-left:5px;padding-right:19px;}
    .design-live-indicator {font-size:9px;padding:0 2px;}
}