[data-studio]{--s-bg:#141210;--s-panel:#1e1c1a;--s-surface:#252220;--s-surface-2:#2e2b28;--s-border:#383330;--s-border-2:#4a4540;--s-text:#f0ede8;--s-muted:#9a9288;--s-faint:#5c5550;--s-accent:#e8a045;--s-accent-dim:#c47f28;--s-accent-glow:#e8a04526;--s-danger:#e05a5a;--s-success:#5aaa7a;--s-warning:#e8a045;--s-info:#5a9ae0;--s-toolbar-h:48px;--s-pages-h:88px;--s-left-w:240px;--s-right-w:260px;--s-radius:6px;--s-radius-sm:4px;--s-transition:.15s ease;color:var(--s-text);font-family:Inter,system-ui,sans-serif;font-size:13px;line-height:1.5}[data-studio] *,[data-studio] :before,[data-studio] :after{box-sizing:border-box;margin:0;padding:0}[data-studio] button{font:inherit;cursor:pointer;color:inherit;background:0 0;border:none}[data-studio] input,[data-studio] select,[data-studio] textarea{font:inherit;color:var(--s-text)}.studio-root{background:var(--s-bg);flex-direction:column;width:100dvw;height:100dvh;display:flex;overflow:hidden}.studio-toolbar{height:var(--s-toolbar-h);min-height:var(--s-toolbar-h);background:var(--s-panel);border-bottom:1px solid var(--s-border);z-index:100;flex-shrink:0;align-items:center;gap:4px;padding:0 8px;display:flex}.studio-toolbar__sep{background:var(--s-border);flex-shrink:0;width:1px;height:20px;margin:0 4px}.studio-toolbar__spacer{flex:1}.studio-toolbar__project-name{border-radius:var(--s-radius-sm);color:var(--s-text);min-width:120px;max-width:200px;transition:border-color var(--s-transition);white-space:nowrap;text-overflow:ellipsis;background:0 0;border:1px solid #0000;padding:3px 8px;font-size:13px;font-weight:600;overflow:hidden}.studio-toolbar__project-name:focus{border-color:var(--s-border-2);background:var(--s-surface);outline:none}.studio-toolbar__format{color:var(--s-muted);white-space:nowrap;padding:0 4px;font-size:11px}.studio-toolbar__save-status{color:var(--s-muted);white-space:nowrap;font-size:11px}.studio-toolbar__save-status.saving{color:var(--s-accent)}.studio-toolbar__save-status.saved{color:var(--s-success)}.studio-toolbar__save-status.unsaved{color:var(--s-warning)}.studio-mode-badge{letter-spacing:.06em;text-transform:uppercase;background:var(--s-surface);color:var(--s-muted);border:1px solid var(--s-border);border-radius:3px;padding:2px 7px;font-size:10px;font-weight:700}.studio-mode-badge.edit{color:var(--s-accent);border-color:var(--s-accent-dim);background:var(--s-accent-glow)}.studio-mode-badge.view{color:var(--s-info);border-color:var(--s-info);background:#5a9ae01f}.studio-mode-badge.upload{color:var(--s-success);border-color:var(--s-success);background:#5aaa7a1f}.s-btn{border-radius:var(--s-radius-sm);color:var(--s-text);transition:background var(--s-transition),color var(--s-transition),border-color var(--s-transition);white-space:nowrap;background:0 0;border:1px solid #0000;flex-shrink:0;justify-content:center;align-items:center;gap:5px;padding:5px 10px;font-size:12px;font-weight:500;display:inline-flex}.s-btn:hover:not(:disabled){background:var(--s-surface-2);border-color:var(--s-border)}.s-btn:active:not(:disabled){background:var(--s-surface)}.s-btn:disabled{opacity:.4;cursor:not-allowed}.s-btn--icon{width:30px;height:30px;padding:5px}.s-btn--accent{background:var(--s-accent);color:#1a1007;border-color:var(--s-accent);font-weight:600}.s-btn--accent:hover:not(:disabled){background:var(--s-accent-dim);border-color:var(--s-accent-dim)}.s-btn--danger{color:var(--s-danger)}.s-btn--danger:hover:not(:disabled){border-color:var(--s-danger);background:#e05a5a1a}.s-btn--ghost{color:var(--s-muted)}.s-btn--ghost:hover:not(:disabled){color:var(--s-text);background:var(--s-surface)}.studio-body{flex:1;min-height:0;display:flex;overflow:hidden}.studio-left-dock{width:var(--s-left-w);min-width:var(--s-left-w);background:var(--s-panel);border-right:1px solid var(--s-border);flex-direction:column;display:flex;overflow:hidden}.dock-tabs{border-bottom:1px solid var(--s-border);flex-shrink:0;display:flex}.dock-tab{color:var(--s-muted);text-align:center;cursor:pointer;transition:color var(--s-transition),border-color var(--s-transition);white-space:nowrap;border-bottom:2px solid #0000;flex:1;padding:9px 4px;font-size:11px;font-weight:500}.dock-tab:hover{color:var(--s-text)}.dock-tab.active{color:var(--s-accent);border-color:var(--s-accent)}.dock-content{scrollbar-width:thin;scrollbar-color:var(--s-border)transparent;flex:1;padding:10px;overflow:hidden auto}.dock-content::-webkit-scrollbar{width:4px}.dock-content::-webkit-scrollbar-thumb{background:var(--s-border);border-radius:2px}.upload-zone{border:2px dashed var(--s-border);border-radius:var(--s-radius);text-align:center;cursor:pointer;transition:border-color var(--s-transition),background var(--s-transition);margin-bottom:10px;padding:20px 12px}.upload-zone:hover,.upload-zone.drag-over{border-color:var(--s-accent);background:var(--s-accent-glow)}.upload-zone__icon{color:var(--s-muted);margin-bottom:6px}.upload-zone__label{font-size:12px;font-weight:500}.upload-zone__hint{color:var(--s-muted);margin-top:3px;font-size:11px}.photo-count{color:var(--s-muted);margin-bottom:8px;font-size:11px}.photo-grid{grid-template-columns:repeat(3,1fr);gap:4px;display:grid}.photo-thumb{aspect-ratio:1;border-radius:var(--s-radius-sm);cursor:grab;background:var(--s-surface);transition:border-color var(--s-transition),transform var(--s-transition);border:1px solid #0000;position:relative;overflow:hidden}.photo-thumb:hover{border-color:var(--s-accent);transform:scale(1.03)}.photo-thumb:active{cursor:grabbing}.photo-thumb img{-o-object-fit:cover;object-fit:cover;width:100%;height:100%;display:block}.photo-thumb__warn{background:var(--s-warning);color:#1a1007;border-radius:50%;justify-content:center;align-items:center;width:14px;height:14px;font-size:9px;font-weight:700;display:flex;position:absolute;bottom:2px;right:2px}.dock-stub{text-align:center;color:var(--s-muted);flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:40px 16px;display:flex}.dock-stub__icon{opacity:.4}.dock-stub__label{font-size:12px}.studio-canvas-area{background:var(--s-bg);flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.studio-zoom-controls{background:var(--s-panel);border:1px solid var(--s-border);border-radius:var(--s-radius);z-index:10;align-items:center;gap:4px;padding:4px;display:flex;position:absolute;bottom:12px;right:12px}.studio-zoom-controls span{color:var(--s-muted);text-align:center;min-width:40px;font-size:11px}.canvas-drop-overlay{border:2px dashed var(--s-accent);border-radius:var(--s-radius);background:var(--s-accent-glow);pointer-events:none;z-index:50;color:var(--s-accent);justify-content:center;align-items:center;font-size:14px;font-weight:600;display:flex;position:absolute;inset:0}.canvas-page-wrapper{transform-origin:50%;-webkit-user-select:none;user-select:none;background:#fff;position:relative;box-shadow:0 4px 32px #0009,0 2px 8px #0006}.canvas-safe-zone{pointer-events:none;z-index:1;border:1px dashed #64a0ff59;position:absolute;inset:12px}.canvas-object{cursor:move;-webkit-user-select:none;user-select:none;transform-origin:50%;position:absolute}.canvas-object.selected{outline:2px solid var(--s-accent);outline-offset:1px}.canvas-object img{-o-object-fit:cover;object-fit:cover;pointer-events:none;width:100%;height:100%;display:block}.canvas-object.text-obj{cursor:text}.resize-handle{background:var(--s-accent);z-index:10;border:1px solid #fff;border-radius:2px;width:8px;height:8px;position:absolute}.resize-handle.nw{cursor:nw-resize;top:-4px;left:-4px}.resize-handle.ne{cursor:ne-resize;top:-4px;right:-4px}.resize-handle.sw{cursor:sw-resize;bottom:-4px;left:-4px}.resize-handle.se{cursor:se-resize;bottom:-4px;right:-4px}.studio-right-dock{width:var(--s-right-w);min-width:var(--s-right-w);background:var(--s-panel);border-left:1px solid var(--s-border);flex-direction:column;display:flex;overflow:hidden}.right-dock-header{color:var(--s-muted);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--s-border);flex-shrink:0;padding:10px 12px 8px;font-size:11px;font-weight:600}.right-dock-body{scrollbar-width:thin;scrollbar-color:var(--s-border)transparent;flex:1;padding:12px;overflow:hidden auto}.right-dock-body::-webkit-scrollbar{width:4px}.right-dock-body::-webkit-scrollbar-thumb{background:var(--s-border);border-radius:2px}.prop-group{margin-bottom:14px}.prop-group__label{color:var(--s-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;font-size:10px;font-weight:600}.prop-row{align-items:center;gap:6px;margin-bottom:6px;display:flex}.prop-row label{color:var(--s-muted);flex-shrink:0;min-width:64px;font-size:11px}.prop-input{background:var(--s-surface);border:1px solid var(--s-border);border-radius:var(--s-radius-sm);color:var(--s-text);transition:border-color var(--s-transition);flex:1;min-width:0;padding:4px 8px;font-size:12px}.prop-input:focus{border-color:var(--s-accent);outline:none}.prop-input[type=color]{cursor:pointer;width:40px;padding:2px 4px}.prop-input[type=range]{accent-color:var(--s-accent);cursor:pointer;padding:0}.prop-input-pair{gap:4px;display:flex}.prop-input-pair .prop-input{min-width:0}.align-btns{gap:3px;display:flex}.align-btn{border-radius:var(--s-radius-sm);border:1px solid var(--s-border);background:var(--s-surface);color:var(--s-muted);transition:all var(--s-transition);flex:1;padding:5px;font-size:11px}.align-btn:hover{color:var(--s-text);border-color:var(--s-border-2)}.align-btn.active{color:var(--s-accent);border-color:var(--s-accent);background:var(--s-accent-glow)}.layer-btns{gap:4px;display:flex}.layer-btns .s-btn{flex:1;justify-content:center;font-size:11px}.right-dock-empty{text-align:center;height:100%;color:var(--s-faint);flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:20px;display:flex}.right-dock-empty__icon{opacity:.3}.right-dock-empty__label{font-size:12px}.studio-pages-panel{height:var(--s-pages-h);min-height:var(--s-pages-h);background:var(--s-panel);border-top:1px solid var(--s-border);flex-shrink:0;align-items:center;gap:0;display:flex;overflow:hidden}.pages-panel__controls{border-right:1px solid var(--s-border);flex-shrink:0;align-items:center;gap:6px;padding:0 12px;display:flex}.pages-panel__zoom-label{color:var(--s-muted);text-align:center;min-width:36px;font-size:11px}.pages-panel__strip{scrollbar-width:thin;scrollbar-color:var(--s-border)transparent;flex:1;align-items:center;gap:6px;padding:8px 12px;display:flex;overflow:auto hidden}.pages-panel__strip::-webkit-scrollbar{height:4px}.pages-panel__strip::-webkit-scrollbar-thumb{background:var(--s-border);border-radius:2px}.page-thumb-item{cursor:pointer;flex-direction:column;flex-shrink:0;align-items:center;gap:4px;display:flex}.page-thumb-item__canvas{background:var(--s-surface);border:2px solid var(--s-border);width:52px;height:52px;color:var(--s-faint);transition:border-color var(--s-transition);border-radius:3px;justify-content:center;align-items:center;font-size:9px;display:flex;position:relative;overflow:hidden}.page-thumb-item.active .page-thumb-item__canvas{border-color:var(--s-accent);background:var(--s-accent-glow)}.page-thumb-item:hover .page-thumb-item__canvas{border-color:var(--s-border-2)}.page-thumb-item__label{color:var(--s-faint);white-space:nowrap;font-size:9px}.page-thumb-item.active .page-thumb-item__label{color:var(--s-accent)}.page-type-badge{text-transform:uppercase;color:var(--s-muted);background:var(--s-panel);border-radius:2px;padding:1px 3px;font-size:7px;font-weight:700;position:absolute;top:2px;left:2px}.pages-panel__add-btn{border:2px dashed var(--s-border);width:52px;height:52px;color:var(--s-faint);cursor:pointer;transition:border-color var(--s-transition),color var(--s-transition);background:0 0;border-radius:3px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.pages-panel__add-btn:hover{border-color:var(--s-accent);color:var(--s-accent)}.pages-panel__info{border-left:1px solid var(--s-border);color:var(--s-muted);white-space:nowrap;flex-shrink:0;padding:0 12px;font-size:11px}.studio-view-overlay{z-index:200;pointer-events:none;background:0 0;position:absolute;inset:0}@media (max-width:900px){.studio-right-dock{display:none}}@media (max-width:680px){[data-studio]{--s-left-w:200px}.studio-toolbar__format{display:none}}