/* Shared studio design system. No editor state or export dimensions are changed. */
/* Keep the shell steady during navigation; interactions still animate. */
html[data-theme] :is(.studio-intro,.editing-panel,.preview-drawer,.photo-controls,.photo-preview,.gif-controls,.gif-previews>.preview-panel){animation:none!important}
html[data-theme]{--ui-bg:#f3f3fa;--ui-surface:#ffffff;--ui-soft:#f6f6fc;--ui-text:#25273e;--ui-muted:#666b83;--ui-border:#e0e2ef;--ui-accent:#6654d9;--studio-start:#7356e8;--studio-end:#4c78e4;--studio-glow:#8870e51a;--studio-shadow:0 8px 32px #26204707,0 1px 3px #26204705;--ui-shadow:var(--studio-shadow);background:var(--ui-bg)}
html[data-theme=dark]{--ui-bg:#10121c;--ui-surface:#191c2a;--ui-soft:#141723;--ui-text:#eceefa;--ui-muted:#a2abc4;--ui-border:#2e3349;--ui-accent:#b5a6ff;--studio-start:#7c5ce5;--studio-end:#587de2;--studio-glow:#8066ea16;--studio-shadow:0 12px 36px #00000025; color-scheme:dark}
html[data-theme=red]{--ui-bg:#170f17;--ui-surface:#261b26;--ui-soft:#201620;--ui-text:#fff0f4;--ui-muted:#c2a5b5;--ui-border:#463040;--ui-accent:#ffabc1;--studio-start:#c74774;--studio-end:#9251ac;--studio-glow:#d95f8818;--studio-shadow:0 12px 36px #00000025;color-scheme:dark}
html[data-theme] body{--line:var(--ui-border);--panel:var(--ui-surface);--muted:var(--ui-muted);--blue:var(--ui-accent);margin:0;color:var(--ui-text);background:radial-gradient(ellipse at 12% 0%,var(--studio-glow),transparent 48%),var(--ui-bg);font-family:'Segoe UI Variable','Segoe UI',Arial,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
html[data-theme] .studio-header{min-height:92px;padding:20px 3%;gap:30px;background:color-mix(in srgb,var(--ui-surface) 92%,transparent);border-bottom:1px solid var(--ui-border);align-items:center}
html[data-theme] .studio-header .brand{display:flex;align-items:center;gap:12px;color:var(--ui-text);font-size:1.1rem;font-weight:750;letter-spacing:-.045em}
.studio-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:linear-gradient(135deg,var(--studio-start),var(--studio-end));color:#fff;box-shadow:0 4px 14px var(--studio-glow);font-size:1.4rem;line-height:1;transform:rotate(-5deg)}
html[data-theme] .studio-header .credit{padding-left:52px;font-size:.68rem;letter-spacing:.045em;color:var(--ui-muted);margin-top:-4px}
html[data-theme] .studio-header .tool-tabs{gap:5px;padding:5px;border:1px solid var(--ui-border);border-radius:16px;background:var(--ui-soft);margin-left:auto;flex-wrap:wrap}
html[data-theme] .tool-tabs .tool-tab{border:1px solid transparent;outline:none;border-radius:11px;min-height:42px;padding:10px 20px;font-size:.8rem;font-weight:650;color:var(--ui-muted);transition:background .2s,color .2s,box-shadow .2s}
html[data-theme] .tool-tabs .tool-tab[aria-current=page]{background:var(--ui-surface);color:var(--ui-accent);border-color:var(--ui-border);box-shadow:0 3px 9px #0000000a}
html[data-theme] .tool-tabs .tool-tab:hover{color:var(--ui-text);background:var(--ui-surface)}
html[data-theme] .studio-toolbar{padding:12px 3%;background:color-mix(in srgb,var(--ui-surface) 70%,var(--ui-bg));border-bottom:1px solid var(--ui-border);gap:12px}
html[data-theme] .toolbar-project{padding:0;background:none;border:0;gap:8px}
html[data-theme] .studio-toolbar button{height:auto;min-height:36px;border-radius:10px;padding:8px 12px;font-size:.72rem}
html[data-theme] .studio-toolbar .icon-button{width:36px;padding:0;border-radius:10px}
html[data-theme] :is(.save-status,.tool-context,.credit){color:var(--ui-muted)}
html[data-theme] main{max-width:1800px;padding:0 3% 48px;margin:auto}
.studio-intro{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:32px 0 28px;animation:studio-arrive .45s ease both}
.studio-eyebrow{margin:0 0 10px;font-size:.64rem;font-weight:750;letter-spacing:.16em;color:var(--ui-accent)}
html[data-theme] .studio-intro h1{margin:0 0 10px;font-size:clamp(1.65rem,2.8vw,2.55rem);letter-spacing:-.05em;line-height:1.18;color:var(--ui-text);font-weight:720}
.studio-description{margin:0;max-width:660px;color:var(--ui-muted);font-size:.85rem;line-height:1.7}
.studio-local{font-size:.69rem;line-height:1.6;color:var(--ui-muted);padding:10px 14px;border:1px solid var(--ui-border);background:var(--ui-surface);border-radius:30px;flex-shrink:0}
body>.studio-intro{max-width:1800px;margin:auto;padding:32px 3% 28px}
html[data-theme] .workspace{grid-template-columns:minmax(330px,.85fr) minmax(0,1.15fr);gap:24px;align-items:start}
html[data-theme] :is(.editing-panel,.preview-drawer,.photo-controls,.photo-preview,.gif-controls,.gif-previews>.preview-panel){border:1px solid var(--ui-border);border-radius:20px;background:var(--ui-surface);box-shadow:var(--studio-shadow);overflow:hidden;min-width:0;animation:studio-arrive .5s ease both}
html[data-theme] .preview-stack{gap:24px;min-width:0}
html[data-theme] .preview-panel{background:var(--ui-surface);color:var(--ui-text)}
html[data-theme] :is(.panel-drawer>summary,.preview-drawer>summary,.style-drawer.panel-drawer>summary,.screenshot-drawer>summary){padding:18px 22px;background:var(--ui-surface);color:var(--ui-text);font-size:.85rem;line-height:1.5;transition:background .2s}
html[data-theme] .preview-drawer>summary{min-height:70px;border-bottom:1px solid var(--ui-border)}
html[data-theme] .panel-drawer>summary:hover{background:var(--ui-soft)}
html[data-theme] .preview-drawer .drawer-title{color:var(--ui-text);font-size:.96rem;font-weight:700;letter-spacing:-.02em}
html[data-theme] .panel-drawer .pane{padding:18px 22px 22px}
html[data-theme] .panel-drawer[open]>:not(summary){animation:studio-reveal .22s ease}
html[data-theme] :is(label,.control-label,.photo-tools-pane label){color:var(--ui-text);font-size:.77rem;line-height:1.5}
html[data-theme] :is(.hint,.compact-note,.color-caption,.preview-footer p,.photo-drop p,.gif-drop p,.photo-empty p){color:var(--ui-muted);line-height:1.65}
html[data-theme] :is(input:not([type=checkbox],[type=range],[type=color]),select,textarea){background:var(--ui-soft);color:var(--ui-text);border:1px solid var(--ui-border);border-radius:11px;padding:11px 13px;min-height:42px;transition:border-color .2s,box-shadow .2s;max-width:100%;min-width:0}
html[data-theme] :is(input,select,textarea):focus-visible{outline:2px solid var(--ui-accent);outline-offset:3px;border-color:var(--ui-accent);box-shadow:0 0 0 5px var(--studio-glow)}
html[data-theme] :is(input,textarea)::placeholder{color:var(--ui-muted);opacity:.8}
html[data-theme] #source{height:380px;min-height:220px;border-radius:14px;padding:18px;font-size:.83rem;line-height:1.85;background:var(--ui-soft);color:var(--ui-text)}
html[data-theme] :is(button,.button){border-radius:11px;line-height:1.4;transition:transform .18s,background .18s,border-color .18s,box-shadow .18s;white-space:normal}
html[data-theme] :is(button,.button):not(:disabled):hover{transform:translateY(-1px);filter:none}
html[data-theme] :is(button,.button):not(:disabled):active{transform:translateY(0) scale(.98)}
html[data-theme] :is(.quiet,.icon-button,.chip){background:var(--ui-soft);color:var(--ui-text);border:1px solid var(--ui-border);box-shadow:0 1px 2px #00000004}
html[data-theme] :is(.quiet,.icon-button,.chip):not(:disabled):hover{background:color-mix(in srgb,var(--ui-accent) 9%,var(--ui-surface));border-color:color-mix(in srgb,var(--ui-accent) 55%,var(--ui-border))}
html[data-theme] .primary,html[data-theme] .chip.active{background:linear-gradient(120deg,var(--studio-start),var(--studio-end));border:1px solid transparent;color:#fff;box-shadow:0 4px 12px var(--studio-glow)}
html[data-theme] .primary:not(:disabled):hover{background:linear-gradient(150deg,var(--studio-start),var(--studio-end));box-shadow:0 7px 20px var(--studio-glow);border-color:transparent}
html[data-theme] :is(button,a,summary):focus-visible{outline:2px solid var(--ui-accent);outline-offset:3px}
html[data-theme] button:disabled{opacity:.42;transform:none;cursor:not-allowed}
html[data-theme] .text-button{color:var(--ui-accent)}
html[data-theme] .text-colors{background:var(--ui-soft);border:1px solid var(--ui-border);border-radius:14px;padding:14px}
html[data-theme] .swatches{grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:7px}
html[data-theme] .color-swatch{background:var(--ui-surface);color:var(--ui-text);border:1px solid var(--ui-border);padding:8px;min-height:38px;font-size:.69rem;box-shadow:none}
html[data-theme] .color-swatch>span{height:12px;width:12px;box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-muted) 10%,transparent)}
html[data-theme] .pill{background:color-mix(in srgb,var(--ui-accent) 10%,var(--ui-surface));color:var(--ui-accent);border:1px solid color-mix(in srgb,var(--ui-accent) 20%,var(--ui-border));border-radius:7px;letter-spacing:.06em;font-size:.6rem;padding:5px 8px}
html[data-theme] .style-drawer.panel-drawer{margin:16px 16px 0;border:1px solid var(--ui-border);border-radius:12px;background:var(--ui-soft);overflow:hidden}
html[data-theme] .style-drawer.panel-drawer>summary{background:var(--ui-soft);padding:12px 16px;font-size:.75rem}
html[data-theme] :is(.style-bar,.preview-options){background:var(--ui-surface);border-color:var(--ui-border)}
html[data-theme] :is(.preview-stage,.photo-stage,.composition-stage,.gif-stage){border:1px solid var(--ui-border);border-radius:14px;box-shadow:inset 0 1px 7px #00000015}
html[data-theme] .preview-stage{background-color:#181c29;background-image:linear-gradient(45deg,#ffffff04 25%,transparent 25%),linear-gradient(-45deg,#ffffff04 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ffffff04 75%),linear-gradient(-45deg,transparent 75%,#ffffff04 75%);background-size:20px 20px}
html[data-theme] :is(.preview-footer,.photo-preview-footer){background:var(--ui-surface);border-color:var(--ui-border);padding:18px 20px;gap:10px;flex-wrap:wrap}
html[data-theme] .preview-footer p{font-size:.72rem}
html[data-theme] :is(.position-toolbar,.composer-tip,.photo-view-controls){background:var(--ui-soft);color:var(--ui-muted);border-color:var(--ui-border)}
html[data-theme] .screenshot-drawer,html[data-theme] .screenshot-drawer .inline-screenshot{background:var(--ui-surface)}
html[data-theme] .segment-item{background:var(--ui-soft);color:var(--ui-text);border:1px solid var(--ui-border);border-radius:12px}
html[data-theme] .segment-item.selected{border-color:var(--ui-accent);background:color-mix(in srgb,var(--ui-accent) 12%,var(--ui-surface))}
html[data-theme] :is(.gif-drop,.photo-drop,.upload-box){border:1px dashed color-mix(in srgb,var(--ui-accent) 45%,var(--ui-border));border-radius:16px;background:radial-gradient(ellipse at top,var(--studio-glow),transparent),var(--ui-soft);padding:28px 18px;text-align:center;transition:background .2s,border-color .2s}
html[data-theme] :is(.gif-drop,.photo-drop):hover{border-color:var(--ui-accent)}
html[data-theme] .gif-grid{grid-template-columns:minmax(310px,390px) minmax(0,1fr);gap:24px}
html[data-theme] .gif-controls{padding:24px}
html[data-theme] .gif-stage{margin:0 16px;min-height:280px;background:var(--ui-soft)}
html[data-theme] .photo-workspace{grid-template-columns:minmax(310px,365px) minmax(0,1fr);padding-top:0;gap:24px}
html[data-theme] .photo-controls .panel-drawer{border-color:var(--ui-border)}
html[data-theme] .photo-controls .panel-drawer>summary{background:var(--ui-surface);color:var(--ui-text);padding:18px 20px}
html[data-theme] .photo-controls .panel-drawer[open]>summary{background:var(--ui-soft)}
html[data-theme] :is(.photo-preview-heading,.preview-heading){background:var(--ui-surface);border-color:var(--ui-border);color:var(--ui-text);padding:20px 22px}
html[data-theme] :is(.photo-preview-heading h2,.preview-heading h2,.photo-empty h3){color:var(--ui-text);letter-spacing:-.025em}
html[data-theme] .photo-stage{background-color:var(--ui-soft)}
html[data-theme] input[type=range]{accent-color:var(--ui-accent);height:18px;cursor:pointer}
html[data-theme] input[type=checkbox]{accent-color:var(--studio-start);width:16px;height:16px}
html[data-theme] .chip{border-radius:8px;min-height:34px;font-size:.73rem}
html[data-theme] .chat-pagination{border-radius:12px;background:var(--ui-soft);padding:8px 10px;border-color:var(--ui-border)}
html[data-theme] .chat-preview-resizer{background:var(--ui-soft);color:var(--ui-muted);border-color:var(--ui-border);border-radius:10px;transform:none}
html[data-theme] dialog{background:var(--ui-surface);color:var(--ui-text);border:1px solid var(--ui-border);border-radius:22px;box-shadow:0 30px 100px #0005}
html[data-theme] dialog::backdrop{background:#080a186b;backdrop-filter:blur(5px)}
html[data-theme] dialog :is(p,li){color:var(--ui-muted)}
html[data-theme] #toast{border-radius:14px;box-shadow:var(--studio-shadow);border:1px solid var(--ui-border)}
html[data-theme] ::-webkit-scrollbar{width:8px;height:8px}
html[data-theme] ::-webkit-scrollbar-thumb{background:var(--ui-border);border:2px solid var(--ui-surface);border-radius:8px}
@keyframes studio-arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes studio-reveal{from{opacity:.5}to{opacity:1}}
@media(min-width:1500px){html[data-theme] .workspace{grid-template-columns:minmax(400px,.75fr) minmax(0,1.25fr)}}
@media(max-width:1100px){.studio-local{display:none}html[data-theme] .studio-header{gap:18px}html[data-theme] .tool-tabs .tool-tab{padding:10px 12px}.studio-intro{padding:26px 0}}
@media(max-width:850px){html[data-theme] :is(.workspace,.gif-grid,.photo-workspace){grid-template-columns:minmax(0,1fr)}html[data-theme] .studio-header .tool-tabs{margin-left:0;width:100%;justify-content:stretch}html[data-theme] .tool-tab{flex:1}html[data-theme] .studio-header{padding:18px 4%}.studio-intro{padding:24px 0}html[data-theme] .studio-toolbar{padding:10px 4%}html[data-theme] .photo-preview{position:static}html[data-theme] .toolbar-utilities{margin-left:0}html[data-theme] .save-status{display:none}}
@media(max-width:480px){html[data-theme] .tool-tabs .tool-tab{font-size:.68rem;min-height:44px;padding:8px 6px;white-space:normal;text-align:center}html[data-theme] main{padding-left:12px;padding-right:12px}.studio-description{font-size:.78rem}html[data-theme] .studio-toolbar button{font-size:.68rem;min-height:38px;padding:8px 10px}html[data-theme] :is(.panel-drawer>summary,.preview-drawer>summary){padding:15px 16px}html[data-theme] .panel-drawer .pane{padding:14px 16px}html[data-theme] .studio-intro h1{font-size:1.75rem}html[data-theme] .preview-drawer>summary{flex-wrap:wrap}html[data-theme] .preview-options{flex-wrap:wrap}html[data-theme] :is(.editing-panel,.preview-drawer,.photo-controls,.photo-preview){border-radius:16px}}
@media(prefers-reduced-motion:reduce){html[data-theme] *,html[data-theme] *::before,html[data-theme] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}