.editor-toolbar{padding:var(--space-3)var(--space-5);background:var(--studio-bg-primary);border-bottom:1px solid var(--studio-border);justify-content:space-between;align-items:center;gap:var(--space-4);flex-shrink:0;height:64px;display:flex}.editor-toolbar__tabs{align-items:center;gap:var(--space-2);display:flex}.editor-toolbar__tab{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-4);border-radius:var(--radius-lg);color:var(--studio-text-secondary);font-family:var(--font-body);font-size:var(--text-small);font-weight:var(--weight-medium);cursor:pointer;transition:all var(--duration-fast)var(--ease-out);white-space:nowrap;background:0 0;border:1px solid #0000;display:flex}.editor-toolbar__tab:hover:not(:disabled){background:var(--studio-bg-hover);color:var(--studio-text-primary)}.editor-toolbar__tab:disabled{opacity:.4;cursor:not-allowed}.editor-toolbar__tab--active{background:var(--studio-accent-muted);border-color:var(--studio-border-accent);color:var(--studio-accent)}.editor-toolbar__tab--active:hover:not(:disabled){background:var(--studio-accent-muted);color:var(--studio-accent)}.editor-toolbar__tab-icon{justify-content:center;align-items:center;width:20px;height:20px;display:flex}.editor-toolbar__tab-icon svg{width:100%;height:100%}.editor-toolbar__actions{align-items:center;gap:var(--space-3);display:flex}.editor-toolbar__action{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-4);border-radius:var(--radius-lg);font-family:var(--font-body);font-size:var(--text-small);font-weight:var(--weight-semibold);cursor:pointer;transition:all var(--duration-fast)var(--ease-out);white-space:nowrap;border:none;display:flex}.editor-toolbar__action:disabled{opacity:.4;cursor:not-allowed}.editor-toolbar__action svg{width:18px;height:18px}.editor-toolbar__action--upload{color:var(--studio-text-secondary);border:1px solid var(--studio-border);background:0 0}.editor-toolbar__action--upload:hover:not(:disabled){background:var(--studio-bg-hover);color:var(--studio-text-primary);border-color:var(--studio-border-strong)}.editor-toolbar__action--primary{background:var(--studio-accent);color:var(--studio-text-inverse);box-shadow:var(--shadow-sm)}.editor-toolbar__action--primary:hover:not(:disabled){background:var(--studio-accent-hover);box-shadow:var(--shadow-glow-sm);transform:translateY(-1px)}.editor-toolbar__action--primary:active:not(:disabled){transform:translateY(0)}.editor-toolbar__spinner{border:2px solid;border-top-color:#0000;border-radius:50%;width:18px;height:18px;animation:.8s linear infinite toolbar-spin}@keyframes toolbar-spin{to{transform:rotate(360deg)}}@media (max-width:768px){.editor-toolbar{height:auto;padding:var(--space-3)var(--space-4);padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom,0px));border-bottom:none;border-top:1px solid var(--studio-border);z-index:var(--z-sticky);justify-content:center;gap:var(--space-2);background:var(--studio-bg-elevated);flex-direction:row;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 16px #0000004d}.editor-toolbar__tabs{gap:var(--space-1)}.editor-toolbar__tab{gap:var(--space-1);padding:var(--space-2);border-radius:var(--radius-md);flex-direction:column;min-width:64px}.editor-toolbar__tab-icon{width:24px;height:24px}.editor-toolbar__tab-label{font-size:var(--text-micro)}.editor-toolbar__actions{gap:var(--space-1)}.editor-toolbar__action{gap:var(--space-1);padding:var(--space-2);flex-direction:column;min-width:64px}.editor-toolbar__action svg{width:24px;height:24px}.editor-toolbar__action-label{font-size:var(--text-micro);font-weight:var(--weight-medium)}.editor-toolbar__action--upload{border:none}.editor-toolbar__action--primary{border-radius:var(--radius-md)}.editor-toolbar__spinner{width:24px;height:24px}}@media (max-width:400px){.editor-toolbar__tab,.editor-toolbar__action{min-width:56px;padding:var(--space-2)var(--space-1)}}[data-theme=light] .editor-toolbar{box-shadow:0 1px 3px #0000000d}@media (max-width:768px){[data-theme=light] .editor-toolbar{box-shadow:0 -4px 16px #0000001a}}@media (prefers-reduced-motion:reduce){.editor-toolbar__tab,.editor-toolbar__action{transition:none}.editor-toolbar__action--primary:hover:not(:disabled){transform:none}.editor-toolbar__spinner{animation:none}}
.tool-panel-backdrop{display:none}@media (max-width:768px){.tool-panel-backdrop{opacity:0;visibility:hidden;transition:opacity var(--duration-base)var(--ease-out),visibility var(--duration-base)var(--ease-out);z-index:var(--z-overlay);-webkit-backdrop-filter:var(--blur-sm);background:#00000080;display:block;position:fixed;inset:0}.tool-panel-backdrop--visible{opacity:1;visibility:visible}}.tool-panel{background:var(--studio-bg-primary);border-left:1px solid var(--studio-border);flex-direction:column;width:320px;height:100%;display:flex;overflow:hidden}.tool-panel__header{padding:var(--space-4)var(--space-5);border-bottom:1px solid var(--studio-border);background:var(--studio-bg-elevated);flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.tool-panel__title{font-family:var(--font-body);font-size:var(--text-h4);font-weight:var(--weight-semibold);color:var(--studio-text-primary);letter-spacing:var(--tracking-tight);margin:0}.tool-panel__close{border-radius:var(--radius-md);width:36px;height:36px;color:var(--studio-text-secondary);cursor:pointer;transition:all var(--duration-fast)var(--ease-out);background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:none}.tool-panel__close:hover{background:var(--studio-bg-hover);color:var(--studio-text-primary)}.tool-panel__close:active{transform:scale(.95)}.tool-panel__close svg{width:20px;height:20px}.tool-panel__content{padding:var(--space-5);overscroll-behavior:contain;flex:1;overflow:hidden auto}.tool-panel__content::-webkit-scrollbar{width:6px}.tool-panel__content::-webkit-scrollbar-track{background:0 0}.tool-panel__content::-webkit-scrollbar-thumb{background:var(--studio-border-strong);border-radius:var(--radius-full)}.tool-panel__content::-webkit-scrollbar-thumb:hover{background:var(--studio-text-muted)}@media (max-width:768px){.tool-panel{border-left:none;border-top:1px solid var(--studio-border);border-radius:var(--radius-2xl)var(--radius-2xl)0 0;width:100%;height:auto;max-height:60vh;transition:transform var(--duration-base)cubic-bezier(.32,.72,0,1);z-index:var(--z-modal);position:fixed;bottom:0;left:0;right:0;transform:translateY(100%);box-shadow:0 -8px 32px #0006}.tool-panel--open{transform:translateY(0)}.tool-panel__close{display:flex}.tool-panel:before{content:"";top:var(--space-2);background:var(--studio-border-strong);border-radius:var(--radius-full);width:40px;height:4px;position:absolute;left:50%;transform:translate(-50%)}.tool-panel__header{padding-top:var(--space-6)}.tool-panel__content{padding-bottom:calc(var(--space-6) + env(safe-area-inset-bottom,0px))}}[data-theme=light] .tool-panel{box-shadow:-4px 0 24px #0000001a}@media (max-width:768px){[data-theme=light] .tool-panel{box-shadow:0 -8px 32px #00000026}}@media (prefers-reduced-motion:reduce){.tool-panel-backdrop,.tool-panel{transition:none}.tool-panel__close:active{transform:none}}
.color-picker{width:100%}.color-picker--disabled{opacity:.5;pointer-events:none}.color-picker__grid{gap:var(--space-2);grid-template-columns:repeat(4,1fr);display:grid}.color-button{aspect-ratio:1;border-radius:var(--radius-lg);cursor:pointer;width:100%;min-width:48px;min-height:48px;transition:all var(--duration-fast)var(--ease-out);background-color:var(--button-color,var(--studio-bg-surface));border:none;outline:none;position:relative;overflow:hidden}.color-button:before{content:"";border-radius:inherit;transition:border-color var(--duration-fast)var(--ease-out);pointer-events:none;border:2px solid #0000;position:absolute;inset:0}.color-button:hover:not(:disabled){box-shadow:var(--shadow-lg);transform:scale(1.05)}.color-button:active:not(:disabled){transform:scale(.98)}.color-button:focus-visible{box-shadow:0 0 0 2px var(--studio-bg-primary),0 0 0 4px var(--studio-accent)}.color-button--selected{transform:scale(1.02)}.color-button--selected:before{border-color:var(--studio-accent);border-width:3px}.color-button--selected:after{content:"";background:var(--studio-accent);width:16px;height:16px;box-shadow:var(--shadow-sm);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:10px;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;top:4px;right:4px}.color-button--transparent{background-image:linear-gradient(45deg,var(--checkerboard-color-1)25%,transparent 25%),linear-gradient(-45deg,var(--checkerboard-color-1)25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checkerboard-color-1)75%),linear-gradient(-45deg,transparent 75%,var(--checkerboard-color-1)75%);background-position:0 0,6px 0,6px -6px,0 6px;background-size:12px 12px;background-color:var(--checkerboard-color-2)}.color-button--transparent svg{width:50%;height:50%;color:var(--studio-text-muted);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.color-button--custom{background:0 0;padding:4px}.color-button--custom.color-button--selected{background-color:var(--custom-color)}.color-wheel{border-radius:calc(var(--radius-lg) - 4px);background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);width:100%;height:100%;position:relative}.color-wheel:after{content:"";background:radial-gradient(circle,#fff 0%,#0000 70%);border-radius:50%;position:absolute;inset:30%}.color-button--custom.color-button--selected .color-wheel{display:none}.color-button-wrapper{aspect-ratio:1;width:100%;min-width:48px;min-height:48px;position:relative}.color-button-wrapper .color-button{width:100%;height:100%}.color-input-overlay{opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;border:none;width:100%;height:100%;margin:0;padding:0;position:absolute;inset:0}.color-input-overlay:disabled{cursor:not-allowed}.color-button[style*="--button-color: #FFFFFF"]:before,.color-button[style*="--button-color: #ffffff"]:before{border-color:var(--studio-border);border-width:1px}.color-button[style*="--button-color: #FFFFFF"].color-button--selected:before,.color-button[style*="--button-color: #ffffff"].color-button--selected:before{border-color:var(--studio-accent);border-width:3px}.color-picker__divider{align-items:center;gap:var(--space-3);margin:var(--space-4)0;display:flex}.color-picker__divider:before,.color-picker__divider:after{content:"";background:var(--studio-border);flex:1;height:1px}.color-picker__divider-text{font-family:var(--font-body);font-size:var(--text-small);color:var(--studio-text-muted);text-transform:uppercase;letter-spacing:.05em}.color-picker__image-section{gap:var(--space-3);flex-direction:column;display:flex}.color-picker__file-input{display:none}.color-picker__image-upload-btn{justify-content:center;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-3)var(--space-4);background:var(--studio-bg-surface);border:2px dashed var(--studio-border);border-radius:var(--radius-lg);color:var(--studio-text-secondary);font-family:var(--font-body);font-size:var(--text-small);font-weight:var(--weight-medium);cursor:pointer;transition:all var(--duration-fast)var(--ease-out);display:flex}.color-picker__image-upload-btn svg{flex-shrink:0}.color-picker__image-upload-btn:hover:not(:disabled){border-color:var(--studio-accent);color:var(--studio-accent);background:var(--studio-bg-elevated)}.color-picker__image-upload-btn:disabled{opacity:.5;cursor:not-allowed}.color-picker__image-preview-wrapper{gap:var(--space-2);flex-direction:column;display:flex}.color-picker__image-preview{aspect-ratio:16/9;border-radius:var(--radius-lg);cursor:pointer;border:2px solid var(--studio-accent);width:100%;position:relative;overflow:hidden}.color-picker__image-preview:focus-visible{box-shadow:0 0 0 2px var(--studio-bg-primary),0 0 0 4px var(--studio-accent)}.color-picker__image-thumbnail{object-fit:cover;width:100%;height:100%;display:block}.color-picker__image-overlay{color:#fff;font-family:var(--font-body);font-size:var(--text-small);font-weight:var(--weight-medium);opacity:0;transition:opacity var(--duration-fast)var(--ease-out);background:#00000080;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.color-picker__image-preview:hover .color-picker__image-overlay{opacity:1}.color-picker__image-remove{justify-content:center;align-items:center;gap:var(--space-1);padding:var(--space-2);border:1px solid var(--studio-border);border-radius:var(--radius-md);color:var(--studio-text-muted);font-family:var(--font-body);font-size:var(--text-xs);cursor:pointer;transition:all var(--duration-fast)var(--ease-out);background:0 0;display:flex}.color-picker__image-remove svg{flex-shrink:0}.color-picker__image-remove:hover:not(:disabled){color:var(--studio-danger,#ef4444);border-color:var(--studio-danger,#ef4444)}.color-picker__image-remove:disabled{opacity:.5;cursor:not-allowed}.color-picker__image-error{padding:var(--space-2)var(--space-3);font-family:var(--font-body);font-size:var(--text-xs);color:var(--studio-danger,#ef4444);background:color-mix(in srgb,var(--studio-danger,#ef4444)10%,transparent);border-radius:var(--radius-md);margin:0;line-height:1.4}[data-theme=light] .color-button--transparent svg{color:var(--studio-text-secondary)}[data-theme=light] .color-button--selected:after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}@media (max-width:768px){.color-picker__grid{gap:var(--space-3);grid-template-columns:repeat(4,1fr)}.color-button,.color-button-wrapper{min-width:56px;min-height:56px}.color-picker__image-upload-btn{padding:var(--space-4);min-height:48px}}@media (max-width:480px){.color-picker__grid{gap:var(--space-2)}.color-button{border-radius:var(--radius-md);min-width:48px;min-height:48px}.color-button-wrapper{min-width:48px;min-height:48px}}@media (prefers-reduced-motion:reduce){.color-button{transition:none}.color-button:hover:not(:disabled),.color-button:active:not(:disabled){transform:none}.color-picker__image-overlay,.color-picker__image-upload-btn,.color-picker__image-remove{transition:none}}
.canvas-container{padding:var(--space-8)var(--space-6);margin:var(--space-4)auto;flex-direction:column;justify-content:flex-start;align-items:center;width:auto;max-width:90vw;display:flex;position:relative;overflow:hidden}.canvas-wrapper{border-radius:var(--radius-2xl);background:var(--studio-bg-elevated);padding:var(--space-6);border:1px solid var(--studio-border);box-shadow:var(--shadow-xl);transition:all var(--duration-base)var(--ease-out-expo);box-sizing:border-box;justify-content:center;align-items:flex-start;width:100%;max-width:100%;display:flex;position:relative;overflow:hidden}.canvas-wrapper:before{content:"";border-radius:var(--radius-2xl);opacity:var(--grain-opacity);pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");position:absolute;inset:0}.canvas-wrapper:hover{box-shadow:var(--shadow-2xl);border-color:var(--studio-border-strong);transform:translateY(-2px)}.canvas-stack{border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);background-color:var(--studio-bg-deep);background-image:linear-gradient(45deg,var(--studio-bg-surface)25%,transparent 25%),linear-gradient(-45deg,var(--studio-bg-surface)25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--studio-bg-surface)75%),linear-gradient(-45deg,transparent 75%,var(--studio-bg-surface)75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;display:block;position:relative;overflow:hidden}.canvas-stack.transitioning{box-shadow:var(--shadow-lg),var(--shadow-glow-sm)}.image-canvas{border-radius:var(--radius-xl);transition:opacity var(--duration-base)var(--ease-out);object-fit:contain;background:0 0;display:block;position:relative}.overlay-canvas{border-radius:var(--radius-xl);pointer-events:auto;cursor:crosshair;transition:cursor .1s ease-out,opacity var(--duration-base)var(--ease-out);object-fit:contain;position:absolute;top:0;left:0}.overlay-canvas:hover{transition:cursor 50ms ease-in}.overlay-canvas.mode-add{cursor:url("data:image/svg+xml;utf8,<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg\"><defs><filter id=\"shadow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\"><feDropShadow dx=\"0.5\" dy=\"0.5\" stdDeviation=\"0.5\" flood-color=\"rgba(0,0,0,0.3)\"/></filter></defs><circle cx=\"6\" cy=\"6\" r=\"5\" fill=\"%2322c55e\" stroke=\"%230f1015\" stroke-width=\"1.5\" filter=\"url(%23shadow)\" opacity=\"0.9\"/><path d=\"M3.5 6h5M6 3.5v5\" stroke=\"%230f1015\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>") 6 6,copy}.overlay-canvas.mode-remove{cursor:url("data:image/svg+xml;utf8,<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg\"><defs><filter id=\"shadow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\"><feDropShadow dx=\"0.5\" dy=\"0.5\" stdDeviation=\"0.5\" flood-color=\"rgba(0,0,0,0.3)\"/></filter></defs><circle cx=\"6\" cy=\"6\" r=\"5\" fill=\"%23ef4444\" stroke=\"%230f1015\" stroke-width=\"1.5\" filter=\"url(%23shadow)\" opacity=\"0.9\"/><path d=\"M3.5 6h5\" stroke=\"%230f1015\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>") 6 6,no-drop}.overlay-canvas.mode-add:hover{cursor:url("data:image/svg+xml;utf8,<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\"><defs><filter id=\"glow\"><feGaussianBlur stdDeviation=\"1\" result=\"coloredBlur\"/><feMerge><feMergeNode in=\"coloredBlur\"/><feMergeNode in=\"SourceGraphic\"/></feMerge></filter><filter id=\"shadow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\"><feDropShadow dx=\"0.5\" dy=\"1\" stdDeviation=\"1\" flood-color=\"rgba(0,0,0,0.4)\"/></filter></defs><circle cx=\"7\" cy=\"7\" r=\"5.5\" fill=\"%2322c55e\" stroke=\"%230f1015\" stroke-width=\"1.5\" filter=\"url(%23shadow)\" opacity=\"0.95\"/><circle cx=\"7\" cy=\"7\" r=\"5.5\" fill=\"%2322c55e\" stroke=\"%230f1015\" stroke-width=\"1.5\" filter=\"url(%23glow)\" opacity=\"0.95\"/><path d=\"M4 7h6M7 4v6\" stroke=\"%230f1015\" stroke-width=\"1.75\" stroke-linecap=\"round\"/></svg>") 7 7,copy}.overlay-canvas.mode-remove:hover{cursor:url("data:image/svg+xml;utf8,<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\"><defs><filter id=\"glow\"><feGaussianBlur stdDeviation=\"1\" result=\"coloredBlur\"/><feMerge><feMergeNode in=\"coloredBlur\"/><feMergeNode in=\"SourceGraphic\"/></feMerge></filter><filter id=\"shadow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\"><feDropShadow dx=\"0.5\" dy=\"1\" stdDeviation=\"1\" flood-color=\"rgba(0,0,0,0.4)\"/></filter></defs><circle cx=\"7\" cy=\"7\" r=\"5.5\" fill=\"%23ef4444\" stroke=\"%230f1015\" stroke-width=\"1.5\" filter=\"url(%23shadow)\" opacity=\"0.95\"/><circle cx=\"7\" cy=\"7\" r=\"5.5\" fill=\"%23ef4444\" stroke=\"%230f1015\" stroke-width=\"1.5\" filter=\"url(%23glow)\" opacity=\"0.95\"/><path d=\"M4 7h6\" stroke=\"%230f1015\" stroke-width=\"1.75\" stroke-linecap=\"round\"/></svg>") 7 7,no-drop}.overlay-canvas.disabled{cursor:not-allowed;opacity:.5}.canvas-wrapper.processing{pointer-events:none}.canvas-wrapper.processing .overlay-canvas{cursor:wait}.canvas-loading-overlay{backdrop-filter:blur(4px);border-radius:var(--radius-2xl);z-index:10;transition:opacity var(--duration-base)var(--ease-out);background:#0f1015cc;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.canvas-loading-spinner{border:3px solid var(--studio-border);border-top-color:var(--studio-accent);border-radius:var(--radius-full);width:32px;height:32px;margin-bottom:var(--space-3);animation:1s linear infinite spin}.canvas-loading-text{font-family:var(--font-body);font-size:var(--text-small);font-weight:var(--weight-medium);color:var(--studio-text-secondary);text-align:center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.segmented-canvas{border-radius:var(--radius-xl);clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);object-fit:contain;background:0 0;transition:none;position:absolute;top:0;left:0}.segmented-canvas.reveal{animation:revealFromRight 2s var(--ease-out-expo)forwards}.segmented-canvas.reveal:after{content:"";background:var(--studio-accent);width:3px;box-shadow:0 0 16px var(--studio-accent-glow),0 0 32px var(--studio-accent-glow);animation:revealLine 2s var(--ease-out-expo)forwards;position:absolute;top:0;bottom:0}@keyframes revealFromRight{0%{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}@keyframes revealLine{0%{opacity:1;right:0}90%{opacity:1}to{opacity:0;right:100%}}.segmented-canvas.visible{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.segmented-canvas.hidden,.image-canvas.hidden{display:none}.canvas-status-badge{top:var(--space-4);right:var(--space-4);background:var(--studio-bg-elevated);border:1px solid var(--studio-border);border-radius:var(--radius-full);padding:var(--space-1)var(--space-3);font-family:var(--font-body);font-size:var(--text-micro);font-weight:var(--weight-semibold);backdrop-filter:blur(8px);z-index:5;transition:all var(--duration-base)var(--ease-out);text-transform:uppercase;letter-spacing:var(--tracking-wider);position:absolute}.canvas-status-badge.ready{color:var(--studio-success);background:#22c55e1a;border-color:#22c55e4d}.canvas-status-badge.processing{color:var(--studio-warning);background:#f59e0b1a;border-color:#f59e0b4d}.canvas-status-badge.queued{color:var(--studio-secondary);background:#8b5cf61a;border-color:#8b5cf64d}.canvas-instructions{bottom:var(--space-4);background:var(--studio-bg-elevated);border:1px solid var(--studio-border);border-radius:var(--radius-lg);padding:var(--space-2)var(--space-4);font-family:var(--font-body);font-size:var(--text-micro);color:var(--studio-text-muted);backdrop-filter:blur(8px);z-index:5;opacity:0;transition:opacity var(--duration-base)var(--ease-out);pointer-events:none;position:absolute;left:50%;transform:translate(-50%)}.canvas-wrapper:hover .canvas-instructions{opacity:1}[data-theme=light] .canvas-wrapper{background:var(--studio-bg-elevated)}[data-theme=light] .canvas-stack{background-color:var(--studio-bg-surface);background-image:linear-gradient(45deg,#0000000d 25%,#0000 25%),linear-gradient(-45deg,#0000000d 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#0000000d 75%),linear-gradient(-45deg,#0000 75%,#0000000d 75%)}[data-theme=light] .canvas-loading-overlay{background:#f8fafce6}[data-theme=light] .canvas-status-badge,[data-theme=light] .canvas-instructions{background:var(--studio-bg-elevated)}[data-theme=light] .overlay-canvas.mode-add{cursor:url("data:image/svg+xml;utf8,<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg\"><defs><filter id=\"shadow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\"><feDropShadow dx=\"0.5\" dy=\"0.5\" stdDeviation=\"0.5\" flood-color=\"rgba(0,0,0,0.2)\"/></filter></defs><circle cx=\"6\" cy=\"6\" r=\"5\" fill=\"%2322c55e\" stroke=\"white\" stroke-width=\"1.5\" filter=\"url(%23shadow)\" opacity=\"0.9\"/><path d=\"M3.5 6h5M6 3.5v5\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>") 6 6,copy}[data-theme=light] .overlay-canvas.mode-remove{cursor:url("data:image/svg+xml;utf8,<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg\"><defs><filter id=\"shadow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\"><feDropShadow dx=\"0.5\" dy=\"0.5\" stdDeviation=\"0.5\" flood-color=\"rgba(0,0,0,0.2)\"/></filter></defs><circle cx=\"6\" cy=\"6\" r=\"5\" fill=\"%23ef4444\" stroke=\"white\" stroke-width=\"1.5\" filter=\"url(%23shadow)\" opacity=\"0.9\"/><path d=\"M3.5 6h5\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>") 6 6,no-drop}@media (max-width:768px){.canvas-container{padding:var(--space-4);margin:var(--space-4)auto;max-width:95vw}.canvas-wrapper{padding:var(--space-4);max-width:100%}.canvas-status-badge{top:var(--space-2);right:var(--space-2);padding:var(--space-1)var(--space-2);font-size:10px}}@media (max-width:480px){.canvas-container{padding:var(--space-3);margin:var(--space-3)auto;max-width:98vw}.canvas-wrapper{padding:var(--space-3)}.canvas-stack{background-position:0 0,0 6px,6px -6px,-6px 0;background-size:12px 12px;max-width:90vw}}@media (max-width:320px){.canvas-container{padding:var(--space-2);margin:var(--space-2)auto;max-width:100vw}.canvas-wrapper{padding:var(--space-2)}}@media (prefers-reduced-motion:reduce){.canvas-wrapper,.canvas-loading-overlay,.canvas-instructions{transition:none}.segmented-canvas.reveal{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);animation:none}.canvas-loading-spinner{border-top-color:var(--studio-accent);animation:none}}
.editor-layout{height:calc(100vh - var(--header-height));margin-top:var(--header-height);background:var(--studio-bg-deep);flex-direction:column;display:flex;overflow:hidden}.editor-layout__main{flex:1;min-height:0;display:flex;overflow:hidden}.editor-layout__canvas-area{padding:var(--space-6);flex-direction:column;flex:1;justify-content:center;align-items:center;min-height:0;display:flex;position:relative;overflow:auto}.editor-layout__canvas-area .canvas-wrapper{max-width:100%;max-height:calc(100vh - 280px)}.editor-layout__panel-section{gap:var(--space-4);flex-direction:column;display:flex}.editor-layout__panel-hint{font-family:var(--font-body);font-size:var(--text-small);color:var(--studio-text-muted);line-height:var(--leading-relaxed);margin:0}.editor-layout__preview-toggle{gap:var(--space-2);background:var(--studio-bg-surface);padding:var(--space-1);border-radius:var(--radius-lg);display:flex}.editor-layout__preview-btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3)var(--space-4);border-radius:var(--radius-md);color:var(--studio-text-secondary);font-family:var(--font-body);font-size:var(--text-small);font-weight:var(--weight-medium);cursor:pointer;transition:all var(--duration-fast)var(--ease-out);background:0 0;border:none;flex:1;display:flex}.editor-layout__preview-btn svg{width:18px;height:18px}.editor-layout__preview-btn:hover:not(:disabled){color:var(--studio-text-primary)}.editor-layout__preview-btn:disabled{opacity:.4;cursor:not-allowed}.editor-layout__preview-btn--active{background:var(--studio-bg-elevated);color:var(--studio-accent);box-shadow:var(--shadow-sm)}.editor-layout__preview-btn--active:hover:not(:disabled){color:var(--studio-accent)}@media (max-width:768px){.editor-layout{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}.editor-layout__main{flex-direction:column}.editor-layout__canvas-area{padding:var(--space-4);flex:1;min-height:0}.editor-layout__canvas-area .canvas-wrapper{max-height:calc(100vh - 200px)}}@media (max-width:400px){.editor-layout__canvas-area{padding:var(--space-3)}}.editor-layout--processing .editor-layout__canvas-area{pointer-events:none}[data-theme=light] .editor-layout__preview-toggle{background:var(--studio-bg-elevated)}[data-theme=light] .editor-layout__preview-btn--active{background:var(--studio-bg-primary)}@media (prefers-reduced-motion:reduce){.editor-layout__preview-btn{transition:none}}
.feedback-modal-backdrop{-webkit-backdrop-filter:blur(4px);z-index:1000;background:#0009;animation:.2s ease-out feedbackFadeIn;position:fixed;inset:0}@keyframes feedbackFadeIn{0%{opacity:0}to{opacity:1}}.feedback-modal{z-index:1001;background:var(--studio-bg-elevated);box-shadow:var(--shadow-xl);animation:.3s ease-out feedbackSlideUp;position:fixed;overflow:hidden}@keyframes feedbackSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (min-width:769px){.feedback-modal{border-radius:var(--radius-xl);border:1px solid var(--studio-border-strong);width:100%;max-width:480px;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes feedbackSlideUp{0%{opacity:0;transform:translate(-50%,-50%)scale(.95)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}}@media (max-width:768px){.feedback-modal{border-radius:var(--radius-2xl)var(--radius-2xl)0 0;border-top:1px solid var(--studio-border-strong);width:100%;padding-bottom:env(safe-area-inset-bottom,0);max-height:85vh;bottom:0;left:0;right:0;overflow-y:auto}@keyframes feedbackSlideUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}}.feedback-modal__close{width:32px;height:32px;color:var(--studio-text-muted);cursor:pointer;border-radius:var(--radius-md);z-index:1;background:0 0;border:none;justify-content:center;align-items:center;transition:all .15s;display:flex;position:absolute;top:12px;right:12px}.feedback-modal__close:hover{background:var(--studio-bg-surface);color:var(--studio-text-secondary)}.feedback-modal__close svg{width:18px;height:18px}.feedback-modal__content{padding:28px 24px 24px}.feedback-modal__content--success{text-align:center;padding:40px 24px}.feedback-modal__header{text-align:center;margin-bottom:20px}.feedback-modal__title{color:var(--studio-text-primary);margin:0 0 6px;font-size:20px;font-weight:600}.feedback-modal__subtitle{color:var(--studio-text-secondary);margin:0;font-size:14px}.feedback-modal__rating{gap:12px;margin-bottom:20px;display:flex}.feedback-modal__rating-btn{border:2px solid var(--studio-border-strong);border-radius:var(--radius-lg);background:var(--studio-bg-surface);cursor:pointer;color:var(--studio-text-primary);flex:1;justify-content:center;align-items:center;gap:8px;padding:12px 20px;font-size:15px;font-weight:500;transition:all .2s;display:flex}.feedback-modal__rating-btn svg{flex-shrink:0;width:22px;height:22px}.feedback-modal__rating-btn:hover:not(:disabled){border-color:var(--studio-text-muted);background:var(--studio-bg-hover)}.feedback-modal__rating-btn:disabled{opacity:.5;cursor:not-allowed}.feedback-modal__rating-btn--like.active{background:var(--studio-success-muted);border-color:var(--studio-success);color:var(--studio-success)}.feedback-modal__rating-btn--like.active svg{fill:var(--studio-success)}.feedback-modal__rating-btn--dislike.active{background:var(--studio-error-muted);border-color:var(--studio-error);color:var(--studio-error)}.feedback-modal__rating-btn--dislike.active svg{fill:var(--studio-error)}.feedback-modal__suggestions{margin-bottom:16px}.feedback-modal__suggestions-title{color:var(--studio-text-primary);margin:0 0 4px;font-size:.9375rem;font-weight:600}.feedback-modal__suggestions-subtitle{color:var(--studio-text-muted);margin:0 0 12px;font-size:.8125rem}.feedback-modal__chips{flex-wrap:wrap;gap:8px;display:flex}.feedback-modal__chip{border:1px solid var(--studio-border-strong);border-radius:var(--radius-full);background:var(--studio-bg-surface);color:var(--studio-text-secondary);cursor:pointer;white-space:nowrap;padding:7px 14px;font-family:inherit;font-size:.8125rem;font-weight:500;transition:all .15s}.feedback-modal__chip:hover:not(:disabled){border-color:var(--studio-accent);color:var(--studio-accent);background:var(--studio-bg-hover)}.feedback-modal__chip--selected{background:var(--studio-accent-muted);border-color:var(--studio-accent);color:var(--studio-accent);font-weight:600}.feedback-modal__chip:disabled{opacity:.5;cursor:not-allowed}.feedback-modal__text{margin-bottom:16px;position:relative}.feedback-modal__textarea{border:1px solid var(--studio-border-strong);border-radius:var(--radius-lg);resize:none;box-sizing:border-box;background:var(--studio-bg-surface);width:100%;color:var(--studio-text-primary);padding:10px 14px 24px;font-family:inherit;font-size:14px;line-height:1.5;transition:border-color .2s}.feedback-modal__textarea:focus{border-color:var(--studio-accent);outline:none}.feedback-modal__textarea:disabled{opacity:.5;cursor:not-allowed}.feedback-modal__textarea::placeholder{color:var(--studio-text-muted)}.feedback-modal__char-count{color:var(--studio-text-muted);font-size:12px;position:absolute;bottom:6px;right:12px}.feedback-modal__error{background:var(--studio-error-muted);border:1px solid var(--studio-error);border-radius:var(--radius-md);color:var(--studio-error);margin-bottom:16px;padding:10px 14px;font-size:14px}.feedback-modal__actions{gap:12px;display:flex}.feedback-modal__btn{border-radius:var(--radius-lg);cursor:pointer;border:none;flex:1;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-size:15px;font-weight:600;transition:all .2s;display:flex}.feedback-modal__btn:disabled{opacity:.5;cursor:not-allowed}.feedback-modal__btn--skip{background:var(--studio-bg-surface);color:var(--studio-text-secondary);border:1px solid var(--studio-border-strong)}.feedback-modal__btn--skip:hover:not(:disabled){background:var(--studio-bg-hover)}.feedback-modal__btn--submit{background:var(--studio-accent);color:var(--studio-text-inverse);box-shadow:var(--shadow-glow-sm)}.feedback-modal__btn--submit:hover:not(:disabled){background:var(--studio-accent-hover);box-shadow:var(--shadow-glow)}.feedback-modal__spinner{border:2px solid rgba(var(--studio-white-rgb,255,255,255),.3);border-top-color:var(--studio-text-inverse,#fff);border-radius:50%;width:16px;height:16px;animation:.8s linear infinite feedbackSpin}@keyframes feedbackSpin{to{transform:rotate(360deg)}}.feedback-modal__success-icon{background:var(--studio-success);border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;margin:0 auto 16px;animation:.4s ease-out feedbackPop;display:flex}@keyframes feedbackPop{0%{transform:scale(0)}50%{transform:scale(1.1)}to{transform:scale(1)}}.feedback-modal__success-icon svg{width:28px;height:28px;color:var(--studio-text-inverse,#fff)}.feedback-modal__success-title{color:var(--studio-text-primary);margin:0 0 6px;font-size:18px;font-weight:600}.feedback-modal__success-subtitle{color:var(--studio-text-secondary);margin:0;font-size:14px}@media (prefers-reduced-motion:reduce){.feedback-modal,.feedback-modal-backdrop,.feedback-modal__rating-btn,.feedback-modal__chip,.feedback-modal__textarea,.feedback-modal__btn,.feedback-modal__close{transition:none;animation:none}}