/* Visual refinement. Existing panel order and interaction model stay intact. */
html{--ui-bg:#f5f6f9;--ui-surface:#fff;--ui-soft:#f8f9fc;--ui-text:#263249;--ui-muted:#65738a;--ui-border:#e2e7ef;--ui-accent:#4965df;--ui-shadow:0 2px 4px #172c4b03,0 12px 32px #172c4b06}
html[data-theme=dark]{--ui-bg:#111722;--ui-surface:#1a2230;--ui-soft:#161e2b;--ui-text:#e3eaf5;--ui-muted:#a4b2c8;--ui-border:#303d51;--ui-accent:#a0b5ff;--ui-shadow:0 8px 28px #0002}
html[data-theme=red]{--ui-bg:#200d14;--ui-surface:#301720;--ui-soft:#29131b;--ui-text:#ffe5e9;--ui-muted:#d6a6af;--ui-border:#60313e;--ui-accent:#ff94a2;--ui-shadow:0 8px 28px #14030933}
html[data-theme] body{background:var(--ui-bg);color:var(--ui-text);font-family:Inter,"Segoe UI",Arial,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;--line:var(--ui-border);--panel:var(--ui-surface);--muted:var(--ui-muted);--blue:var(--ui-accent)}
html[data-theme] .studio-header{padding:22px max(24px,3%);gap:32px;background:var(--ui-surface);border-bottom:1px solid var(--ui-border)}
.studio-header .brand{font-size:1.2rem;letter-spacing:-.035em;font-weight:750}
.studio-header .brand-group{gap:2px}.studio-header .credit{margin:0;font-size:.75rem;letter-spacing:.02em}
.studio-header .tool-tabs{gap:4px;flex-wrap:wrap}
html[data-theme] .tool-tabs .tool-tab{font-size:.8125rem;min-height:42px;border-radius:10px;padding:10px 14px}
html[data-theme] .tool-tabs .tool-tab[aria-current=page]{box-shadow:none;border-color:var(--ui-border);background:var(--ui-soft);color:var(--ui-accent)}
html[data-theme] .studio-toolbar{padding:12px max(24px,3%);background:var(--ui-surface);gap:12px;border-color:var(--ui-border)}
html[data-theme] .toolbar-project{padding:0;border:0;background:transparent;gap:8px}
html[data-theme] .studio-toolbar button{min-height:38px;height:auto;padding:8px 12px;font-size:.75rem;line-height:1.35}
html[data-theme] main{max-width:1800px;padding:24px 3% 36px}
html[data-theme] .workspace{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
html[data-theme] .editing-panel,html[data-theme] .preview-drawer{background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:16px;box-shadow:var(--ui-shadow)}
html[data-theme] .preview-stack{gap:20px;scrollbar-gutter:stable;scrollbar-color:var(--ui-border) transparent}
html[data-theme] .panel-drawer>summary,html[data-theme] .preview-drawer>summary,html[data-theme] .style-drawer.panel-drawer>summary,html[data-theme] .screenshot-drawer>summary{background:var(--ui-surface);color:var(--ui-text);padding:16px 20px;line-height:1.5;font-size:.875rem}
html[data-theme] .preview-drawer>summary{min-height:62px;gap:10px}
html[data-theme] .preview-drawer .drawer-title{color:var(--ui-text);font-size:.9375rem;letter-spacing:-.015em}
html[data-theme] .panel-drawer>summary:hover{background:var(--ui-soft)}
html[data-theme] .panel-drawer .pane{padding:16px 20px 20px}
html[data-theme] .chat-drawer .drawer-actions{margin-bottom:8px}
html[data-theme] .editing-panel .two-fields,html[data-theme] .inline-screenshot .two-fields{background:transparent;border:0;padding:0;gap:14px;margin:14px 0;grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-theme] label,html[data-theme] .editing-panel label,html[data-theme] .style-bar label,html[data-theme] .preview-options label{color:var(--ui-text);font-size:.8125rem;line-height:1.45;gap:7px}
html[data-theme] .hint,html[data-theme] .compact-note,html[data-theme] .color-caption,html[data-theme] .chat-drawer .compact-note,html[data-theme] .preview-footer p{color:var(--ui-muted);font-size:.75rem;line-height:1.65}
html[data-theme] input:not([type=checkbox],[type=range]),html[data-theme] select,html[data-theme] textarea{background:var(--ui-surface);color:var(--ui-text);border:1px solid var(--ui-border);border-radius:9px;padding:10px 12px;min-height:42px;transition:border-color .15s,box-shadow .15s}
html[data-theme] input::placeholder,html[data-theme] textarea::placeholder{color:var(--ui-muted);opacity:.85}
html[data-theme] input:not([type=checkbox],[type=range]):focus,html[data-theme] select:focus,html[data-theme] textarea:focus{border-color:var(--ui-accent);outline:2px solid color-mix(in srgb,var(--ui-accent) 25%,transparent);outline-offset:2px;box-shadow:none}
html[data-theme] :is(button,a,summary,input[type=checkbox],input[type=range],canvas):focus-visible{outline:2px solid var(--ui-accent);outline-offset:3px}
html[data-theme] #source{background:var(--ui-soft);height:310px;min-height:220px;border-radius:12px;font-size:.875rem;line-height:1.85;padding:15px}
html[data-theme] .quiet,html[data-theme] .icon-button{background:var(--ui-soft);color:var(--ui-text);border:1px solid var(--ui-border);box-shadow:none}
html[data-theme] button,html[data-theme] .button{border-radius:9px;transition:background .15s,border-color .15s,box-shadow .15s;line-height:1.4}
html[data-theme] button:not(:disabled):hover,html[data-theme] .button:hover{filter:none;border-color:var(--ui-accent)}
html[data-theme] .primary{background:#4863d9;color:#fff;box-shadow:0 2px 3px #263c8e14;border:1px solid transparent}
html[data-theme=red] .primary{background:#bd3650}
html[data-theme] .primary:not(:disabled):hover{background:#3b53c0;box-shadow:0 3px 10px #263c8e22}
html[data-theme=red] .primary:not(:disabled):hover{background:#a62d44}
html[data-theme] .editor-toolbar{background:transparent;border:0;padding:4px 0;margin:10px 0 14px;gap:8px}
html[data-theme] .editor-toolbar .quiet{height:36px;min-height:36px}
html[data-theme] .editor-toolbar .text-button:hover{background:var(--ui-soft)}
html[data-theme] .text-colors{background:var(--ui-soft);padding:12px;border-radius:12px;border-color:var(--ui-border)}
html[data-theme] .color-caption{font-weight:500;margin-bottom:10px}
html[data-theme] .swatches{grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:8px}
html[data-theme] .color-swatch{background:var(--ui-surface);color:var(--ui-text);border-color:var(--ui-border);font-size:.75rem;min-height:38px;padding:8px;gap:8px;box-shadow:none}
html[data-theme] .color-swatch>span{width:14px;height:14px}
html[data-theme] .syntax span{border:0;background:transparent;color:var(--ui-muted);padding:3px 0;font-size:.75rem}
html[data-theme] .syntax{gap:12px;margin:12px 0}
html[data-theme] .syntax code{background:var(--ui-soft);color:var(--ui-accent);font-size:.75rem}
html[data-theme] .style-drawer.panel-drawer{margin:16px 16px 0;border-color:var(--ui-border);border-radius:12px;background:var(--ui-surface)}
html[data-theme] .style-drawer.panel-drawer>summary{background:var(--ui-soft);padding:12px 14px;font-size:.8125rem}
html[data-theme] .style-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));padding:14px;gap:14px;background:var(--ui-surface)}
html[data-theme] .style-bar label{min-width:0;margin:0}
html[data-theme] .style-bar input{max-width:none}
html[data-theme] .preview-options{background:var(--ui-surface);border-color:var(--ui-border);padding:12px 14px 14px;gap:14px}
html[data-theme] .preview-options .opacity-label{flex-wrap:wrap;margin-left:0}
html[data-theme] .preview-stage{border-radius:12px;margin:16px 16px 0;min-height:210px;box-shadow:none}
html[data-theme] .preview-footer{background:var(--ui-surface);border-color:var(--ui-border);padding:16px;gap:12px;flex-wrap:wrap;align-items:center;margin-top:16px}
html[data-theme] .preview-footer>p{flex:1 1 180px}
html[data-theme] .chat-preview-actions{flex:1 1 100%;gap:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-theme] .chat-preview-actions button{min-height:40px;height:auto;padding:10px;font-size:.75rem}
html[data-theme] .screenshot-drawer,html[data-theme] .screenshot-drawer .inline-screenshot{background:var(--ui-surface)}
html[data-theme] .screenshot-drawer .inline-screenshot{padding:12px 20px 20px}
html[data-theme] .inline-screenshot .screenshot-upload{height:auto;min-height:42px;border-style:dashed;padding:10px 16px;margin:0 0 8px}
html[data-theme] .position-toolbar{background:var(--ui-soft);padding:14px 20px;gap:12px 18px}
html[data-theme] .position-toolbar>.hint{flex-basis:100%;margin:0;line-height:1.6}
html[data-theme] .preview-stack .composition-stage{padding:20px;background:var(--ui-soft);min-height:220px}
html[data-theme] .composer-tip{background:var(--ui-surface);color:var(--ui-muted);padding:12px 20px 18px}
html[data-theme] .segment-item{background:var(--ui-soft);color:var(--ui-text);border-color:var(--ui-border);padding:12px;gap:12px;border-radius:10px}
html[data-theme] .segment-item>span{overflow-wrap:anywhere;min-width:0}
html[data-theme] .segment-item small{color:var(--ui-muted);white-space:normal;text-align:right}
html[data-theme] .segment-item.selected{background:var(--ui-soft);border-color:var(--ui-accent);color:var(--ui-accent);box-shadow:inset 3px 0 var(--ui-accent)}
html[data-theme] .pill,html[data-theme] .preview-drawer .pill{background:var(--ui-soft);color:var(--ui-muted);border:1px solid var(--ui-border);font-size:.6875rem;font-weight:600;letter-spacing:.015em;border-radius:6px}
html[data-theme] dialog{background:var(--ui-surface);color:var(--ui-text);border-color:var(--ui-border);border-radius:16px;padding:28px}
html[data-theme] dialog p,html[data-theme] dialog li{color:var(--ui-muted)}
html[data-theme] .fullscreen-chrome{background:var(--ui-surface)}
@media(max-width:1100px){html[data-theme] .studio-header{gap:20px}html[data-theme] .workspace{gap:18px}html[data-theme] main{padding:20px 20px 32px}.toolbar-utilities{margin-left:0}html[data-theme] .studio-toolbar{justify-content:space-between}html[data-theme] .style-bar{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){html[data-theme] .workspace{grid-template-columns:minmax(0,1fr)}html[data-theme] .preview-stack{position:static;max-height:none;overflow:visible;scrollbar-gutter:auto}html[data-theme] .studio-header,html[data-theme] .studio-toolbar{padding:16px 20px}html[data-theme] .studio-header .tool-tabs{width:100%;gap:6px}html[data-theme] .tool-tabs .tool-tab{flex:1;white-space:normal;text-align:center;padding:10px}html[data-theme] .toolbar-project{flex-wrap:wrap}html[data-theme] .style-bar{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:480px){html[data-theme] main{padding:16px 12px 28px}html[data-theme] .studio-header,html[data-theme] .studio-toolbar{padding:14px 16px}html[data-theme] .studio-header .brand{font-size:1.125rem}html[data-theme] .tool-tabs .tool-tab{font-size:.75rem;padding:9px 6px}html[data-theme] .toolbar-project{display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr))}html[data-theme] .toolbar-project button{white-space:normal}html[data-theme] #new-project{grid-column:1 / -1}html[data-theme] .toolbar-utilities{width:100%;justify-content:flex-end;gap:8px}html[data-theme] .panel-drawer>summary,html[data-theme] .preview-drawer>summary{padding:14px 16px}html[data-theme] .panel-drawer .pane{padding:14px 16px 18px}html[data-theme] .style-bar{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}html[data-theme] .style-drawer.panel-drawer>summary .hint{display:block;margin-top:4px}html[data-theme] .preview-drawer .summary-actions{margin-left:0}html[data-theme] .preview-footer{padding:14px}html[data-theme] .swatches{grid-template-columns:repeat(2,minmax(0,1fr))}html[data-theme] button,html[data-theme] .button,html[data-theme] .color-swatch,html[data-theme] .editor-toolbar .quiet,html[data-theme] .chat-preview-actions button{min-height:44px;height:auto}html[data-theme] .studio-toolbar .icon-button{width:44px}html[data-theme] input:not([type=checkbox],[type=range]),html[data-theme] select,html[data-theme] textarea{font-size:16px}html[data-theme] .inline-check{min-height:36px}html[data-theme] .editing-panel .two-fields,html[data-theme] .inline-screenshot .two-fields{gap:10px}html[data-theme] .screenshot-drawer .inline-screenshot{padding:12px 16px 18px}html[data-theme] .position-toolbar{padding:12px 16px}html[data-theme] .preview-stack .composition-stage{padding:12px}html[data-theme] .fullscreen-chrome-title .hint{display:none}html[data-theme] footer{overflow-wrap:anywhere}html[data-theme] dialog{padding:20px;max-width:calc(100vw - 24px)}}
@media(prefers-reduced-motion:reduce){html[data-theme] *,html[data-theme] *::before,html[data-theme] *::after{transition:none!important;animation:none!important}}

/* Final visual pass: expressive surfaces and modern controls, with no layout changes. */
html[data-theme] body{background-image:radial-gradient(circle at 12% -8%,color-mix(in srgb,var(--ui-accent) 10%,transparent),transparent 32%),radial-gradient(circle at 92% 0%,color-mix(in srgb,var(--ui-accent) 6%,transparent),transparent 28%)}
html[data-theme] .studio-header{background:color-mix(in srgb,var(--ui-surface) 94%,var(--ui-accent));box-shadow:0 1px 0 color-mix(in srgb,var(--ui-accent) 18%,transparent)}
html[data-theme] .brand{color:var(--ui-text);text-shadow:0 1px 0 color-mix(in srgb,var(--ui-surface) 50%,transparent)}
html[data-theme] .tool-tabs .tool-tab{border:1px solid transparent;transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease}
html[data-theme] .tool-tabs .tool-tab:hover{transform:translateY(-1px);background:color-mix(in srgb,var(--ui-accent) 10%,var(--ui-surface));border-color:color-mix(in srgb,var(--ui-accent) 24%,var(--ui-border))}
html[data-theme] .tool-tabs .tool-tab[aria-current=page]{background:linear-gradient(135deg,color-mix(in srgb,var(--ui-accent) 17%,var(--ui-surface)),var(--ui-soft));border-color:color-mix(in srgb,var(--ui-accent) 36%,var(--ui-border));box-shadow:0 4px 12px color-mix(in srgb,var(--ui-accent) 16%,transparent)}
html[data-theme] .studio-toolbar{background:color-mix(in srgb,var(--ui-surface) 90%,var(--ui-soft));backdrop-filter:blur(12px)}
html[data-theme] .editing-panel,html[data-theme] .preview-drawer{box-shadow:0 1px 2px #172c4b08,0 16px 42px color-mix(in srgb,var(--ui-accent) 8%,transparent);}
html[data-theme] .panel-drawer>summary,html[data-theme] .preview-drawer>summary{transition:background .18s ease,color .18s ease}
html[data-theme] .panel-drawer>summary:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--ui-accent) 8%,var(--ui-surface)),var(--ui-surface))}
html[data-theme] .quiet,html[data-theme] .icon-button{background:linear-gradient(180deg,var(--ui-surface),var(--ui-soft));box-shadow:0 1px 2px #172c4b0a}
html[data-theme] .quiet:not(:disabled):hover,html[data-theme] .icon-button:not(:disabled):hover{background:color-mix(in srgb,var(--ui-accent) 10%,var(--ui-surface));box-shadow:0 4px 12px color-mix(in srgb,var(--ui-accent) 12%,transparent);transform:translateY(-1px)}
html[data-theme] .primary{background:linear-gradient(135deg,color-mix(in srgb,var(--ui-accent) 92%,#fff),color-mix(in srgb,var(--ui-accent) 78%,#111));border-color:color-mix(in srgb,var(--ui-accent) 70%,#111);box-shadow:0 5px 14px color-mix(in srgb,var(--ui-accent) 24%,transparent)}
html[data-theme] .primary:not(:disabled):hover{background:linear-gradient(135deg,color-mix(in srgb,var(--ui-accent) 82%,#fff),color-mix(in srgb,var(--ui-accent) 68%,#111));box-shadow:0 7px 18px color-mix(in srgb,var(--ui-accent) 30%,transparent);transform:translateY(-1px)}
html[data-theme] button,html[data-theme] .button{transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}
html[data-theme] input:not([type=checkbox],[type=range]),html[data-theme] select,html[data-theme] textarea{box-shadow:inset 0 1px 2px #172c4b08}
html[data-theme] .text-colors,html[data-theme] .style-drawer.panel-drawer,html[data-theme] .segment-item{box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 55%,transparent)}
html[data-theme] .color-swatch{background:linear-gradient(180deg,var(--ui-surface),var(--ui-soft));transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
html[data-theme] .color-swatch:hover{transform:translateY(-2px);box-shadow:0 5px 12px color-mix(in srgb,var(--ui-accent) 14%,transparent)}
html[data-theme] .preview-stage{border-color:color-mix(in srgb,var(--ui-accent) 18%,#2a3342);box-shadow:inset 0 0 30px #0002}
html[data-theme] .pill{box-shadow:inset 0 1px 0 #fff3}
html[data-theme=dark] body{background-image:radial-gradient(circle at 12% -8%,#4f6ed11a,transparent 32%),radial-gradient(circle at 92% 0%,#7e95ff0d,transparent 28%)}
html[data-theme=red] body{background-image:radial-gradient(circle at 12% -8%,#ff718d2b,transparent 32%),radial-gradient(circle at 92% 0%,#ff365e1c,transparent 28%)}