.studio-app { --studio-bg:#202120; --studio-panel:#282928; --studio-line:#40413d; --studio-text:#e5e2da; --studio-muted:#aaa99f; width:min(1180px,100%); margin:48px auto 0; border:1px solid #45443f; border-radius:14px; overflow:hidden; background:var(--studio-bg); color:var(--studio-text); box-shadow:0 24px 55px #24211a20; text-align:left; font:12px/1.4 Manrope,sans-serif; }
.studio-app * { box-sizing:border-box; }
.studio-app button { cursor:pointer; color:inherit; font:inherit; background:transparent; border:1px solid transparent; border-radius:6px; transition:background .15s,border-color .15s; }
.studio-app button:hover { background:#ffffff12; border-color:#ffffff25; }
.studio-app button:focus-visible,.studio-app input:focus-visible,.studio-app select:focus-visible { outline:2px solid #dfbf87; outline-offset:2px; }
.studio-app button:disabled { opacity:.3; cursor:default; }
.studio-app svg { width:17px; height:17px; display:block; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.studio-topbar { min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 14px; border-bottom:1px solid var(--studio-line); }
.studio-project { display:flex; align-items:center; gap:10px; font-size:10px; }
.studio-project strong { font-weight:500; }
.studio-mark { font:italic 22px Georgia,serif; color:#e5c89c; }
.studio-divider { margin:0 8px; color:#777; }
.studio-top-actions { display:flex; align-items:center; gap:5px; }
.studio-top-actions button { min-width:30px; height:30px; display:flex; align-items:center; justify-content:center; }
.studio-top-actions .studio-export { gap:8px; margin-left:6px; padding:0 10px; font-size:10px; border-color:#6d685e; }
.studio-body { display:grid; grid-template-columns:40px 116px minmax(0,1fr) 192px; min-height:520px; }
.studio-tools { display:flex; flex-direction:column; align-items:center; gap:8px; padding:13px 4px; border-right:1px solid var(--studio-line); }
.studio-tools button { width:30px; height:32px; display:grid; place-items:center; color:var(--studio-muted); }
.studio-tools button.is-active { background:#e3c68f20; color:#f0ce95; border-color:#d7b67a55; }
.studio-tool-spacer { flex:1; min-height:30px; }
.studio-references { padding:13px 9px; border-right:1px solid var(--studio-line); background:var(--studio-panel); min-width:0; }
.studio-panel-label { display:flex; align-items:center; justify-content:space-between; color:var(--studio-muted); font-size:8px; letter-spacing:.08em; margin-bottom:12px; }
.studio-panel-label button { padding:0 4px; font-size:9px; letter-spacing:0; }
#studio-frame-list { display:flex; flex-direction:column; gap:9px; max-height:430px; overflow:auto; }
.studio-frame { padding:0!important; text-align:left; border-color:var(--studio-line)!important; overflow:hidden; flex:none; }
.studio-frame.is-active { border-color:#e8c388!important; box-shadow:0 0 0 1px #e8c388; }
.studio-frame-preview { position:relative; display:block; height:70px; overflow:hidden; background:#cab697; }
.studio-frame-preview .studio-art { position:absolute; inset:0; }
.studio-frame > span:last-child { display:block; padding:5px 5px; font-size:8px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.studio-add-frame { width:100%; margin-top:12px; padding:7px 3px; font-size:9px!important; border:1px dashed #767365!important; }
.studio-center { min-width:0; display:flex; flex-direction:column; background:#191a19; }
.studio-scene-bar { min-height:34px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 10px; font-size:9px; color:var(--studio-muted); }
.studio-scene-bar > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.studio-scene-bar > div { display:flex; align-items:center; gap:4px; flex:none; }
.studio-scene-bar button { min-width:22px; height:24px; padding:2px 4px; }
.studio-scene-bar output { font:9px 'DM Mono',monospace; min-width:32px; text-align:center; }
.studio-scene { position:relative; flex:1; min-height:335px; overflow:hidden; touch-action:pan-y; background:#cab697; }
.studio-scene { background:#181918; }
.studio-viewport { position:absolute; inset:0; overflow:hidden; }
.studio-art { position:absolute; inset:0; overflow:hidden; transform:translate(var(--pan-x,0%),var(--pan-y,0%)) scale(var(--zoom,1)); transform-origin:center; }
.studio-photo { width:100%; height:100%; background:url('./assets/canvas-dashboard.png') 47.338% 43.636% / 171.136% 141.29% no-repeat; }
.studio-light,.studio-tint,.studio-crop-guides,.studio-notes { position:absolute; inset:0; pointer-events:none; }
.studio-light { background:linear-gradient(var(--light-angle,45deg),#00000020,transparent 60%,#fff4); mix-blend-mode:soft-light; }
.studio-tint { background:var(--mood,transparent); mix-blend-mode:color; opacity:.22; }
.studio-crop-guides { display:none; border:1px solid #fff9; background:linear-gradient(90deg,transparent 33.1%,#fff7 33.1%,#fff7 33.4%,transparent 33.4%,transparent 66.5%,#fff7 66.5%,#fff7 66.8%,transparent 66.8%),linear-gradient(0deg,transparent 33.1%,#fff7 33.1%,#fff7 33.4%,transparent 33.4%,transparent 66.5%,#fff7 66.5%,#fff7 66.8%,transparent 66.8%); }
.studio-app[data-tool="crop"] .studio-crop-guides { display:block; }
.studio-app[data-tool="pan"] .studio-scene { cursor:grab; touch-action:none; }
.studio-app[data-tool="pan"] .studio-scene:active { cursor:grabbing; }
.studio-app[data-tool="note"] .studio-scene { cursor:crosshair; }
.studio-note { position:absolute; width:110px; min-height:46px; padding:8px; border:1px solid #e2bc73; border-radius:5px; background:#f8e5b7; color:#42392a; font:11px/1.4 Manrope,sans-serif; pointer-events:auto; resize:vertical; box-shadow:0 4px 12px #0002; }
.studio-bottom { padding:11px 10px 7px; background:var(--studio-panel); border-top:1px solid var(--studio-line); }
#studio-save-form { display:flex; align-items:center; gap:8px; }
#studio-save-form > svg { color:#dabc86; flex:none; }
#studio-name { width:100%; min-width:0; height:32px; border:1px solid #56554f; border-radius:18px; padding:7px 12px; background:#ffffff09; color:var(--studio-text); font:10px Manrope,sans-serif; }
#studio-save-form button { display:flex; align-items:center; justify-content:center; gap:7px; flex:none; height:32px; padding:0 12px; background:linear-gradient(120deg,#f0d2a0,#c8a473); color:#292318; font-size:10px; }
#studio-status { min-height:24px; margin:7px 0 0; color:var(--studio-muted); font-size:9px; line-height:1.4; }
.studio-inspector { padding:13px 14px; border-left:1px solid var(--studio-line); background:var(--studio-panel); min-width:0; }
.studio-light-control { position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; margin-bottom:12px; color:var(--studio-muted); font-size:9px; }
.studio-light-control > input { width:100%; margin:5px 0; }
.studio-light-dial { position:relative; width:55px; height:55px; border:2px solid #77776e; border-top-color:#eddbb6; border-right-color:#eddbb6; border-radius:50%; transform:rotate(var(--dial-angle,45deg)); }
.studio-light-dial i { position:absolute; left:50%; top:-4px; width:7px; height:7px; margin-left:-3px; border-radius:50%; background:#efdeb9; }
.studio-light-dial,.studio-curve svg { cursor:ew-resize; touch-action:none; }
.studio-light-dial:focus-visible,.studio-curve svg:focus-visible { outline:2px solid #dfbf87; outline-offset:4px; }
.studio-app input[type="range"] { appearance:none; height:3px; background:#66665e; border-radius:3px; cursor:pointer; accent-color:#e5c89c; }
.studio-app input[type="range"]::-webkit-slider-thumb { appearance:none; width:10px; height:10px; border-radius:50%; background:#e6d2af; }
.studio-app input[type="range"]::-moz-range-thumb { width:10px; height:10px; border:0; border-radius:50%; background:#e6d2af; }
.studio-setting { display:grid; grid-template-columns:1fr auto; gap:8px; margin:0 0 13px; font-size:9px; color:var(--studio-muted); }
.studio-setting input { grid-column:1/-1; width:100%; margin:0; }
.studio-setting output { font:8px 'DM Mono',monospace; }
.studio-setting .studio-temperature { background:linear-gradient(90deg,#7eaadd,#bda491,#f2ad57); }
.studio-palette-label { display:flex; justify-content:space-between; align-items:center; font-size:9px; color:var(--studio-muted); }
.studio-palette-label button { font-size:9px; padding:0 4px; }
.studio-palette { display:flex; justify-content:space-between; margin:9px 0 14px; }
.studio-palette button { width:22px; height:22px; border-radius:50%; background:var(--swatch); border:2px solid transparent; }
.studio-palette button:hover,.studio-palette button.is-active { background:var(--swatch); border-color:white; box-shadow:0 0 0 2px #ffffff30; }
.studio-format { display:block; color:var(--studio-muted); font-size:9px; }
.studio-format select { display:block; width:100%; background:var(--studio-bg); color:var(--studio-text); border:1px solid var(--studio-line); border-radius:5px; padding:7px 4px; font:9px Manrope,sans-serif; margin-top:6px; }
.studio-curve { margin-top:14px; color:var(--studio-muted); font-size:8px; }
.studio-curve svg { margin-top:6px; width:100%; height:52px; border:1px solid var(--studio-line); stroke:#debe86; }
.studio-curve-grid { stroke:#ffffff10; stroke-width:1; }
.studio-app.is-light { --studio-bg:#e5e2da; --studio-panel:#f0ede6; --studio-line:#c7c3b9; --studio-text:#292824; --studio-muted:#666259; }
.studio-app.is-light .studio-center { background:#d3cec2; }
.studio-app.is-light .studio-tools button.is-active { color:#765029; }
.studio-app.is-expanded { position:fixed; inset:20px; width:auto; max-width:none; height:calc(100dvh - 40px); margin:0; z-index:60; display:flex; flex-direction:column; }
.studio-app.is-expanded .studio-body { flex:1; min-height:0; }
.studio-app.is-expanded .studio-scene { min-height:0; }
.studio-app.hide-settings .studio-body { grid-template-columns:40px 116px minmax(0,1fr); }
.studio-app.hide-settings .studio-inspector { display:none; }
@media(max-width:1000px) { .studio-body { grid-template-columns:34px 86px minmax(0,1fr) 158px; } .studio-inspector { padding:12px 10px; } .studio-tools button { width:26px; } .studio-frame-preview { height:60px; } .studio-project { font-size:9px; } .studio-app.hide-settings .studio-body { grid-template-columns:34px 86px minmax(0,1fr); } }
@media(max-width:760px) { .studio-app { margin-top:32px; } .studio-topbar { flex-wrap:wrap; gap:8px; padding:9px; } .studio-project { font-size:9px; } .studio-top-actions { margin-left:auto; } .studio-top-actions button { min-width:27px; } .studio-body,.studio-app.hide-settings .studio-body { grid-template-columns:34px minmax(0,1fr); min-height:0; } .studio-tools { grid-column:1; grid-row:1; } .studio-center { grid-column:2; grid-row:1; } .studio-scene { min-height:280px; } .studio-references { grid-column:1/-1; grid-row:2; border-top:1px solid var(--studio-line); border-right:0; padding:10px; } .studio-panel-label { margin-bottom:7px; } #studio-frame-list { flex-direction:row; max-height:none; gap:8px; } .studio-frame { width:80px; } .studio-frame-preview { height:55px; } .studio-add-frame { width:auto; margin-top:8px; padding:5px 10px; } .studio-inspector { grid-column:1/-1; grid-row:3; border-left:0; border-top:1px solid var(--studio-line); padding:14px; display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; } .studio-inspector > .studio-panel-label { grid-column:1/-1; } .studio-light-control { grid-row:2/5; } .studio-curve { margin-top:0; } .studio-palette { margin:0; align-items:center; } .studio-palette-label { grid-column:1; } .studio-format { grid-column:1; } .studio-setting { margin:0; align-self:center; } .studio-inspector .studio-setting:last-of-type { grid-column:2; } .studio-bottom { padding:9px 7px 5px; } #studio-save-form { gap:5px; } #studio-save-form > svg { display:none; } #studio-save-form button { padding:0 8px; font-size:9px; } #studio-save-form button svg { display:none; } #studio-status { font-size:9px; } .studio-app.is-expanded { inset:8px; height:calc(100dvh - 16px); overflow:auto; display:block; } }