*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-size-adjust:100%;scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-family-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif);line-height:1.6;color:var(--color-text-primary, #171717);background:var(--gradient-backdrop, linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%));font-size:var(--font-size-base, 16px);font-weight:var(--font-weight-normal, 400);min-height:100vh;overflow-x:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:focus{outline:2px solid var(--color-border-accent, #0ea5e9);outline-offset:2px;border-radius:var(--border-radius-sm, 4px)}:focus:not(:focus-visible){outline:none}:focus-visible{outline:2px solid var(--color-border-accent, #0ea5e9);outline-offset:2px;border-radius:var(--border-radius-sm, 4px);box-shadow:var(--shadow-glow, 0 0 0 1px rgba(14, 165, 233, .1), 0 4px 6px -1px rgba(14, 165, 233, .1), 0 2px 4px -2px rgba(14, 165, 233, .06))}.app{min-height:100vh;display:flex;flex-direction:column;align-items:flex-start;max-width:1400px;margin:0 auto;padding:var(--spacing-6, 24px);background:transparent;position:relative}.app-header{text-align:center;margin-bottom:var(--spacing-8, 32px);padding:var(--spacing-6, 24px) 0;position:relative}.app-header h1{font-size:var(--font-size-3xl, 30px);font-weight:var(--font-weight-bold, 700);background:var(--gradient-hero, linear-gradient(135deg, #0ea5e9 0%, #a855f7 50%, #3b82f6 100%));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--spacing-2, 8px);line-height:1.2;letter-spacing:-.02em}.app-main{width:100%;max-width:1000px;text-align:center;position:relative;padding:0 var(--spacing-4, 16px);box-sizing:border-box}.app-workspace{display:flex;flex:1;width:100%;height:calc(100vh - 120px);max-width:none;margin:0;padding:0;overflow:hidden}.app-main-workspace{flex:1;display:flex;flex-direction:column;padding:var(--spacing-6, 24px);overflow:auto;background:var(--color-surface-primary, #ffffff);position:relative}.app-main-workspace .canvas-container{flex:1;display:flex;align-items:flex-start;justify-content:flex-start;min-height:0;padding-top:var(--spacing-4, 16px)}.app-main p{font-size:var(--font-size-lg, 18px);color:var(--color-text-secondary, #525252);margin-bottom:var(--spacing-8, 32px);line-height:1.7;font-weight:var(--font-weight-medium, 500)}.status-indicator{font-weight:var(--font-weight-medium, 500);display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm, 8px);font-size:var(--font-size-sm, 14px)}button{background:var(--gradient-primary, linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%));color:var(--color-text-inverse, #ffffff);border:none;border-radius:var(--border-radius-lg, 12px);padding:var(--spacing-3, 12px) var(--spacing-6, 24px);font-size:var(--font-size-base, 16px);font-weight:var(--font-weight-semibold, 600);font-family:inherit;cursor:pointer;transition:var(--transition-base, .2s cubic-bezier(.4, 0, .2, 1));display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2, 8px);text-decoration:none;line-height:1.2;min-height:var(--button-height-base, 44px);position:relative;overflow:hidden;box-shadow:var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .04));letter-spacing:-.01em}button:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#ffffff1a,#ffffff0d);opacity:0;transition:var(--transition-base, .2s cubic-bezier(.4, 0, .2, 1))}button:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-glow-hover, 0 0 0 1px rgba(14, 165, 233, .2), 0 8px 15px -3px rgba(14, 165, 233, .15), 0 4px 6px -4px rgba(14, 165, 233, .08));filter:brightness(1.05)}button:hover:not(:disabled):before{opacity:1}button:active:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-glow, 0 0 0 1px rgba(14, 165, 233, .1), 0 4px 6px -1px rgba(14, 165, 233, .1), 0 2px 4px -2px rgba(14, 165, 233, .06))}button:disabled{background:linear-gradient(135deg,#a3a3a3,#737373);cursor:not-allowed;transform:none;opacity:.6;box-shadow:none}button:disabled:before{display:none}.button--secondary{background:var(--color-surface-elevated, rgba(255, 255, 255, .95));color:var(--color-text-primary, #171717);border:1px solid var(--color-border-primary, #e5e5e5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.button--secondary:hover:not(:disabled){background:var(--color-surface-primary, #ffffff);border-color:var(--color-border-accent, #0ea5e9);box-shadow:var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .04))}.button--danger{background:var(--gradient-error, linear-gradient(135deg, #ef4444 0%, #dc2626 100%))}.button--danger:hover:not(:disabled){box-shadow:0 0 0 1px #ef444433,0 8px 15px -3px #ef444426,0 4px 6px -4px #ef444414}.button--success{background:var(--gradient-success, linear-gradient(135deg, #10b981 0%, #059669 100%))}.button--success:hover:not(:disabled){box-shadow:0 0 0 1px #10b98133,0 8px 15px -3px #10b98126,0 4px 6px -4px #10b98114}.button--sm{min-height:var(--button-height-sm, 36px);padding:var(--spacing-2, 8px) var(--spacing-4, 16px);font-size:var(--font-size-sm, 14px);border-radius:var(--border-radius-md, 8px)}.button--lg{min-height:var(--button-height-lg, 52px);padding:var(--spacing-4, 16px) var(--spacing-8, 32px);font-size:var(--font-size-lg, 18px);border-radius:var(--border-radius-xl, 16px)}input[type=text],input[type=email],input[type=password],input[type=file],select,textarea{background:var(--color-surface-elevated, rgba(255, 255, 255, .95));border:1px solid var(--color-border-primary, #e5e5e5);border-radius:var(--border-radius-lg, 12px);padding:var(--spacing-3, 12px) var(--spacing-4, 16px);font-size:var(--font-size-base, 16px);font-family:inherit;color:var(--color-text-primary, #171717);transition:var(--transition-base, .2s cubic-bezier(.4, 0, .2, 1));min-height:var(--button-height-base, 44px);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .03), 0 1px 3px 0 rgba(0, 0, 0, .03))}input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=file]:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-border-accent, #0ea5e9);box-shadow:var(--shadow-glow, 0 0 0 1px rgba(14, 165, 233, .1), 0 4px 6px -1px rgba(14, 165, 233, .1), 0 2px 4px -2px rgba(14, 165, 233, .06));background:var(--color-surface-primary, #ffffff)}@media(max-width:768px){.app{padding:var(--spacing-4, 16px);max-width:100%}.app-header{margin-bottom:var(--spacing-6, 24px);padding:var(--spacing-4, 16px) 0}.app-header h1{font-size:var(--font-size-2xl, 24px)}.app-main{max-width:100%;padding:0 var(--spacing-3, 12px)}.app-main p{font-size:var(--font-size-base, 16px);margin-bottom:var(--spacing-6, 24px)}.app-workspace{flex-direction:column;height:auto;min-height:calc(100vh - 120px)}.app-main-workspace{padding:var(--spacing-4, 16px)}button{padding:var(--spacing-2, 8px) var(--spacing-4, 16px);font-size:var(--font-size-sm, 14px);min-height:40px}.button--lg{min-height:48px;padding:var(--spacing-3, 12px) var(--spacing-6, 24px);font-size:var(--font-size-base, 16px)}}@media(max-width:480px){.app{padding:var(--spacing-3, 12px)}.app-header h1{font-size:var(--font-size-xl, 20px)}.app-main{padding:0 var(--spacing-2, 8px)}.app-main p{font-size:var(--font-size-sm, 14px)}button{padding:var(--spacing-2, 8px) var(--spacing-3, 12px);font-size:var(--font-size-sm, 14px);min-height:36px}}@media(prefers-color-scheme:dark){body{color-scheme:dark}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media(prefers-contrast:high){button{border:2px solid transparent}input[type=text],input[type=email],input[type=password],input[type=file],select,textarea{border-width:2px}}.image-upload-container{max-width:700px;margin:0 auto;position:relative}.dropzone{border:2px dashed var(--color-border-accent, rgba(14, 165, 233, .3));border-radius:var(--border-radius-xl, 20px);padding:var(--spacing-12, 48px) var(--spacing-8, 32px);text-align:center;cursor:pointer;transition:var(--transition-base, .2s cubic-bezier(.4, 0, .2, 1));background:var(--color-surface-primary, #ffffff);position:relative;overflow:hidden;box-shadow:var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .04))}.dropzone:before{content:"";position:absolute;inset:0;background:var(--gradient-glass, linear-gradient(135deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .05) 100%));border-radius:var(--border-radius-xl, 20px);pointer-events:none}.dropzone:hover{border-color:var(--color-border-accent, #0ea5e9);background:var(--color-surface-primary, #ffffff);transform:translateY(-2px) scale(1.01);box-shadow:var(--shadow-2xl, 0 25px 50px -12px rgba(0, 0, 0, .12))}.dropzone-dragging{border-color:var(--color-primary, #0ea5e9);background:var(--color-primary-light, #f0f9ff);transform:translateY(-4px) scale(1.02);box-shadow:var(--shadow-glow-hover, 0 0 0 1px rgba(14, 165, 233, .2), 0 8px 15px -3px rgba(14, 165, 233, .15), 0 4px 6px -4px rgba(14, 165, 233, .08))}.dropzone-content{position:relative;z-index:1}.dropzone-content h3{color:var(--color-text-primary, #171717);margin:var(--spacing-4, 16px) 0 var(--spacing-2, 8px) 0;font-size:var(--font-size-2xl, 24px);font-weight:var(--font-weight-bold, 700);letter-spacing:-.02em;background:var(--gradient-hero, linear-gradient(135deg, #0ea5e9 0%, #a855f7 50%, #3b82f6 100%));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.dropzone-content p{color:var(--color-text-secondary, #525252);margin:var(--spacing-2, 8px) 0;font-size:var(--font-size-base, 16px);font-weight:var(--font-weight-medium, 500);line-height:1.6}.browse-link{color:var(--color-primary, #0ea5e9);font-weight:var(--font-weight-semibold, 600);text-decoration:none;border-bottom:1px solid transparent;transition:var(--transition-base, .2s cubic-bezier(.4, 0, .2, 1))}.browse-link:hover{border-bottom-color:var(--color-primary, #0ea5e9)}.upload-icon{margin-bottom:var(--spacing-4, 16px);opacity:.8;display:flex;justify-content:center;align-items:center;filter:drop-shadow(0 2px 4px rgba(14,165,233,.1))}.upload-icon svg{width:64px;height:64px;color:var(--color-primary, #0ea5e9);transition:var(--transition-base, .2s cubic-bezier(.4, 0, .2, 1))}.dropzone:hover .upload-icon svg{color:var(--color-primary-hover, #0284c7);transform:scale(1.1)}.file-info{font-size:var(--font-size-sm, 14px);color:var(--color-text-muted, #a3a3a3);margin-top:var(--spacing-4, 16px);font-weight:var(--font-weight-medium, 500)}.upload-preview-container{background:var(--color-surface-elevated, rgba(255, 255, 255, .95));border:1px solid var(--color-border-primary, rgba(0, 0, 0, .04));border-radius:var(--border-radius-xl, 16px);padding:var(--spacing-6, 24px);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .04));margin-top:var(--spacing-6, 24px);position:relative}.upload-preview-container:before{content:"";position:absolute;inset:0;background:var(--gradient-glass, linear-gradient(135deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .05) 100%));border-radius:var(--border-radius-xl, 16px);pointer-events:none}.preview-section{display:flex;align-items:center;gap:var(--spacing-6, 24px);margin-bottom:var(--spacing-6, 24px);position:relative;z-index:1}.preview-image{width:140px;height:140px;object-fit:cover;border-radius:var(--border-radius-lg, 12px);border:2px solid var(--color-border-primary, rgba(0, 0, 0, .04));box-shadow:var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .04));transition:var(--transition-base, .2s cubic-bezier(.4, 0, .2, 1))}.preview-image:hover{transform:scale(1.05);box-shadow:var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .04))}.file-info-section{flex:1;position:relative;z-index:1}.file-name{font-weight:var(--font-weight-bold, 700);color:var(--color-text-primary, #171717);margin:0 0 var(--spacing-2, 8px) 0;font-size:var(--font-size-lg, 18px);letter-spacing:-.01em}.file-size{color:var(--color-text-secondary, #525252);margin:0;font-size:var(--font-size-sm, 14px);font-weight:var(--font-weight-medium, 500)}.upload-actions{display:flex;gap:var(--spacing-3, 12px);justify-content:flex-end;position:relative;z-index:1}.btn{padding:var(--spacing-3, 12px) var(--spacing-6, 24px);border-radius:var(--border-radius-lg, 12px);font-weight:var(--font-weight-semibold, 600);font-size:var(--font-size-sm, 14px);cursor:pointer;border:none;transition:var(--transition-base, .2s cubic-bezier(.4, 0, .2, 1));display:flex;align-items:center;gap:var(--spacing-2, 8px);min-height:var(--button-height-base, 44px);position:relative;overflow:hidden;letter-spacing:-.01em}.btn:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#ffffff1a,#ffffff0d);opacity:0;transition:var(--transition-base, .2s cubic-bezier(.4, 0, .2, 1))}.btn:hover:not(:disabled):before{opacity:1}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-secondary{background:var(--color-surface-elevated, rgba(255, 255, 255, .95));color:var(--color-text-primary, #171717);border:1px solid var(--color-border-primary, rgba(0, 0, 0, .08));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--shadow-base, 0 1px 3px 0 rgba(0, 0, 0, .06), 0 1px 2px -1px rgba(0, 0, 0, .04))}.btn-secondary:hover:not(:disabled){background:var(--color-surface-primary, #ffffff);border-color:var(--color-border-accent, #0ea5e9);transform:translateY(-1px);box-shadow:var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .04))}.btn-primary{background:var(--gradient-primary, linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%));color:var(--color-text-inverse, #ffffff);box-shadow:var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .04))}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-glow-hover, 0 0 0 1px rgba(14, 165, 233, .2), 0 8px 15px -3px rgba(14, 165, 233, .15), 0 4px 6px -4px rgba(14, 165, 233, .08));filter:brightness(1.05)}.loading-spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite}.error-message{background:var(--color-error-light, #fef2f2);border:1px solid var(--color-error, rgba(239, 68, 68, .2));color:var(--color-error, #ef4444);padding:var(--spacing-3, 12px) var(--spacing-4, 16px);border-radius:var(--border-radius-lg, 12px);margin-top:var(--spacing-4, 16px);display:flex;align-items:center;gap:var(--spacing-2, 8px);font-size:var(--font-size-sm, 14px);font-weight:var(--font-weight-medium, 500);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .03), 0 1px 3px 0 rgba(0, 0, 0, .03))}.error-icon{font-size:var(--font-size-base, 16px)}@media(max-width:768px){.image-upload-container{max-width:100%;margin:0 var(--spacing-4, 16px)}.dropzone{padding:var(--spacing-10, 40px) var(--spacing-6, 24px)}.dropzone-content h3{font-size:var(--font-size-xl, 20px)}.preview-section{flex-direction:column;align-items:center;text-align:center;gap:var(--spacing-4, 16px)}.upload-actions{flex-direction:column}.btn{width:100%;justify-content:center}}@media(max-width:480px){.dropzone{padding:var(--spacing-8, 32px) var(--spacing-4, 16px)}.upload-icon{font-size:3rem}.dropzone-content h3{font-size:var(--font-size-lg, 18px)}.dropzone-content p{font-size:var(--font-size-sm, 14px)}}.app-header{background:var(--color-surface-elevated, rgba(255, 255, 255, .95));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--color-border-primary, rgba(0, 0, 0, .04));padding:var(--spacing-6, 24px) var(--spacing-8, 32px);margin-bottom:var(--spacing-10, 40px);box-shadow:var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .03), 0 1px 3px 0 rgba(0, 0, 0, .03));position:relative}.header-content{display:flex;justify-content:space-between;align-items:center;max-width:1400px;margin:0 auto;position:relative;width:100%;box-sizing:border-box}.title-section{display:flex;flex-direction:column;align-items:center;flex:1}.title-section h1{margin:0;background:var(--gradient-hero, linear-gradient(135deg, #0ea5e9 0%, #a855f7 50%, #3b82f6 100%));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:var(--font-size-3xl, 30px);font-weight:var(--font-weight-bold, 700);letter-spacing:-.02em;text-align:center}.status-indicator{font-weight:var(--font-weight-medium, 500);font-size:var(--font-size-sm, 14px);margin-top:var(--spacing-2, 8px);padding:var(--spacing-1, 4px) var(--spacing-3, 12px);border-radius:var(--border-radius-full, 9999px);background:var(--color-surface-secondary, rgba(255, 255, 255, .8));border:1px solid var(--color-border-primary, rgba(0, 0, 0, .04));display:flex;align-items:center;gap:var(--spacing-2, 8px);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.status-indicator:before{content:"";width:8px;height:8px;border-radius:50%;background-color:currentColor;opacity:.8}.start-over-btn{background:var(--color-surface-elevated, rgba(255, 255, 255, .95));color:var(--color-text-secondary, #525252);border:1px solid var(--color-border-primary, rgba(0, 0, 0, .08));border-radius:var(--border-radius-lg, 12px);padding:var(--spacing-3, 12px) var(--spacing-6, 24px);font-size:var(--font-size-sm, 14px);font-weight:var(--font-weight-medium, 500);transition:var(--transition-base, .2s cubic-bezier(.4, 0, .2, 1));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--shadow-base, 0 1px 3px 0 rgba(0, 0, 0, .06), 0 1px 2px -1px rgba(0, 0, 0, .04));display:flex;align-items:center;gap:var(--spacing-2, 8px);cursor:pointer;white-space:nowrap;flex-shrink:0}.start-over-btn:before{content:"↻";font-size:var(--font-size-base, 16px);opacity:.7;transition:var(--transition-base, .2s cubic-bezier(.4, 0, .2, 1))}.start-over-btn:hover{background:var(--color-surface-primary, #ffffff);color:var(--color-text-primary, #171717);border-color:var(--color-border-accent, #0ea5e9);box-shadow:var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .04));transform:translateY(-1px)}.start-over-btn:hover:before{opacity:1;transform:rotate(180deg)}.start-over-btn:active{transform:translateY(0);box-shadow:var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .03), 0 1px 3px 0 rgba(0, 0, 0, .03))}@media(max-width:768px){.app-header{padding:var(--spacing-4, 16px)}.header-content{flex-direction:column;align-items:center;gap:var(--spacing-4, 16px);text-align:center}.title-section{align-items:center;width:100%}.title-section h1{font-size:var(--font-size-2xl, 24px)}.start-over-btn{align-self:center;justify-content:center;min-width:140px}}@media(max-width:640px){.header-content{gap:var(--spacing-3, 12px)}.start-over-btn{padding:var(--spacing-2, 8px) var(--spacing-4, 16px);font-size:var(--font-size-xs, 12px)}}@media(max-width:480px){.title-section h1{font-size:var(--font-size-xl, 20px)}}.canvas-container{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding:var(--spacing-8, 32px) var(--spacing-6, 24px);margin:var(--spacing-4, 16px) auto;position:relative;width:100%;max-width:min(90vw,900px);overflow:hidden}.canvas-wrapper{position:relative;border-radius:var(--border-radius-xl, 16px);background:var(--color-surface-elevated, rgba(255, 255, 255, .95));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:var(--spacing-6, 24px);border:1px solid var(--color-border-primary, rgba(0, 0, 0, .04));box-shadow:var(--shadow-floating, 0 16px 32px -8px rgba(0, 0, 0, .1), 0 0 0 1px rgba(255, 255, 255, .05));transition:var(--transition-base, .2s cubic-bezier(.4, 0, .2, 1));width:100%;max-width:100%;display:flex;justify-content:center;align-items:flex-start;box-sizing:border-box}.canvas-wrapper:before{content:"";position:absolute;inset:0;border-radius:var(--border-radius-xl, 16px);background:var(--gradient-glass, linear-gradient(135deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .05) 100%));pointer-events:none}.canvas-wrapper:hover{transform:translateY(-2px);box-shadow:var(--shadow-2xl, 0 25px 50px -12px rgba(0, 0, 0, .12));border-color:var(--color-border-accent, rgba(14, 165, 233, .2))}.canvas-stack{position:relative;border-radius:var(--border-radius-lg, 12px);overflow:hidden;box-shadow:var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .04));max-width:100%;max-height:70vh;display:flex;justify-content:center;align-items:flex-start}.image-canvas{display:block;border-radius:var(--border-radius-lg, 12px);background:var(--color-surface-primary, #ffffff);position:relative;transition:var(--transition-base, .2s cubic-bezier(.4, 0, .2, 1));max-width:100%;max-height:100%;object-fit:contain}.overlay-canvas{position:absolute;top:0;left:0;border-radius:var(--border-radius-lg, 12px);pointer-events:auto;cursor:crosshair;transition:var(--transition-base, .2s cubic-bezier(.4, 0, .2, 1));max-width:100%;max-height:100%}.overlay-canvas{transition:cursor .1s ease-out,opacity .2s ease-out}.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.2)"/></filter></defs><circle cx="6" cy="6" r="5" fill="%234CAF50" stroke="white" stroke-width="1.5" filter="url(%23shadow)" opacity="0.85"/><circle cx="6" cy="6" r="5" fill="%234CAF50" stroke="white" stroke-width="1.5" opacity="0.85"/><path d="M3.5 6h5M6 3.5v5" stroke="white" 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.2)"/></filter></defs><circle cx="6" cy="6" r="5" fill="%23F44336" stroke="white" stroke-width="1.5" filter="url(%23shadow)" opacity="0.85"/><circle cx="6" cy="6" r="5" fill="%23F44336" stroke="white" stroke-width="1.5" opacity="0.85"/><path d="M3.5 6h5" stroke="white" 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.3)"/></filter></defs><circle cx="7" cy="7" r="5.5" fill="%234CAF50" stroke="white" stroke-width="1.5" filter="url(%23shadow)" opacity="0.9"/><circle cx="7" cy="7" r="5.5" fill="%234CAF50" stroke="white" stroke-width="1.5" filter="url(%23glow)" opacity="0.9"/><path d="M4 7h6M7 4v6" stroke="white" 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.3)"/></filter></defs><circle cx="7" cy="7" r="5.5" fill="%23F44336" stroke="white" stroke-width="1.5" filter="url(%23shadow)" opacity="0.9"/><circle cx="7" cy="7" r="5.5" fill="%23F44336" stroke="white" stroke-width="1.5" filter="url(%23glow)" opacity="0.9"/><path d="M4 7h6" stroke="white" stroke-width="1.75" stroke-linecap="round"/></svg>') 7 7,no-drop}.overlay-canvas.disabled{cursor:not-allowed;opacity:.6}.canvas-wrapper.processing{pointer-events:none}.canvas-wrapper.processing .overlay-canvas{cursor:wait}.canvas-loading-overlay{position:absolute;inset:0;background:var(--color-surface-glass, rgba(255, 255, 255, .1));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:var(--border-radius-xl, 16px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;transition:var(--transition-base, .2s cubic-bezier(.4, 0, .2, 1))}.canvas-loading-spinner{width:32px;height:32px;border:3px solid var(--color-border-primary, rgba(0, 0, 0, .1));border-top-color:var(--color-primary, #0ea5e9);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:var(--spacing-3, 12px)}.canvas-loading-text{font-size:var(--font-size-sm, 14px);font-weight:var(--font-weight-medium, 500);color:var(--color-text-secondary, #525252);text-align:center}.canvas-status-badge{position:absolute;top:var(--spacing-4, 16px);right:var(--spacing-4, 16px);background:var(--color-surface-elevated, rgba(255, 255, 255, .95));border:1px solid var(--color-border-primary, rgba(0, 0, 0, .04));border-radius:var(--border-radius-full, 9999px);padding:var(--spacing-1, 4px) var(--spacing-3, 12px);font-size:var(--font-size-xs, 12px);font-weight:var(--font-weight-medium, 500);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:5;transition:var(--transition-base, .2s cubic-bezier(.4, 0, .2, 1))}.canvas-status-badge.ready{color:var(--color-success, #10b981);border-color:var(--color-success, rgba(16, 185, 129, .2))}.canvas-status-badge.processing{color:var(--color-warning, #f59e0b);border-color:var(--color-warning, rgba(245, 158, 11, .2))}.canvas-status-badge.queued{color:var(--color-secondary, #a855f7);border-color:var(--color-secondary, rgba(168, 85, 247, .2))}.canvas-instructions{position:absolute;bottom:var(--spacing-4, 16px);left:50%;transform:translate(-50%);background:var(--color-surface-elevated, rgba(255, 255, 255, .95));border:1px solid var(--color-border-primary, rgba(0, 0, 0, .04));border-radius:var(--border-radius-lg, 12px);padding:var(--spacing-2, 8px) var(--spacing-4, 16px);font-size:var(--font-size-xs, 12px);color:var(--color-text-tertiary, #737373);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:5;opacity:0;transition:var(--transition-base, .2s cubic-bezier(.4, 0, .2, 1));pointer-events:none}.canvas-wrapper:hover .canvas-instructions{opacity:1}@media(max-width:768px){.canvas-container{padding:var(--spacing-4, 16px);margin:var(--spacing-4, 16px) auto;max-width:min(95vw,700px)}.canvas-wrapper{padding:var(--spacing-4, 16px);max-width:100%}.canvas-stack{max-height:60vh}.canvas-status-badge{top:var(--spacing-2, 8px);right:var(--spacing-2, 8px);padding:var(--spacing-1, 4px) var(--spacing-2, 8px)}}@media(max-width:480px){.canvas-container{padding:var(--spacing-3, 12px);margin:var(--spacing-3, 12px) auto;max-width:min(98vw,400px)}.canvas-wrapper{padding:var(--spacing-3, 12px)}.canvas-stack{max-height:50vh}}@media(max-width:320px){.canvas-container{padding:var(--spacing-2, 8px);margin:var(--spacing-2, 8px) auto;max-width:min(100vw,300px)}.canvas-wrapper{padding:var(--spacing-2, 8px)}}.download-button-container{display:flex;flex-direction:column;align-items:center;gap:8px}.download-button{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 24px;font-size:18px;font-weight:600;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #667eea66;min-width:200px;min-height:56px}.download-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #667eea80;background:linear-gradient(135deg,#5a6fd8,#6a4190)}.download-button:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 8px #667eea66}.download-button:disabled{opacity:.5;cursor:not-allowed;background:#9ca3af;box-shadow:none}.download-icon{width:20px;height:20px;flex-shrink:0}.spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.download-error{display:flex;align-items:center;gap:8px;padding:8px 12px;background-color:#fee2e2;color:#dc2626;border:1px solid #fca5a5;border-radius:6px;font-size:14px;max-width:300px;text-align:center}.error-close{background:none;border:none;color:#dc2626;cursor:pointer;font-size:18px;line-height:1;padding:0;margin-left:4px}.error-close:hover{color:#991b1b}.download-hint{font-size:14px;color:#6b7280;text-align:center;max-width:300px;padding:8px;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:6px}.sidebar{width:320px;min-height:100vh;background:var(--color-surface-elevated, rgba(255, 255, 255, .98));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-right:1px solid var(--color-border-primary, rgba(0, 0, 0, .08));box-shadow:var(--shadow-sidebar, 2px 0 16px rgba(0, 0, 0, .04));display:flex;flex-direction:column;overflow-y:auto;position:relative;z-index:10}.sidebar:before{content:"";position:absolute;top:0;right:0;width:1px;height:100%;background:var(--gradient-glass, linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .05) 100%))}.sidebar-header{padding:var(--spacing-6, 24px) var(--spacing-6, 24px) var(--spacing-4, 16px);border-bottom:1px solid var(--color-border-primary, rgba(0, 0, 0, .06));background:var(--gradient-header, linear-gradient(135deg, rgba(14, 165, 233, .02) 0%, rgba(59, 130, 246, .02) 100%));position:sticky;top:0;z-index:5;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.sidebar-title{font-size:var(--font-size-xl, 20px);font-weight:var(--font-weight-bold, 700);color:var(--color-text-primary, #171717);margin:0 0 var(--spacing-3, 12px);display:flex;align-items:center;gap:var(--spacing-2, 8px);letter-spacing:-.02em}.sidebar-title-icon{font-size:var(--font-size-lg, 18px);opacity:.8}.sidebar-section{padding:var(--spacing-4, 16px) var(--spacing-6, 24px);border-bottom:1px solid var(--color-border-secondary, rgba(0, 0, 0, .04));transition:var(--transition-base, .2s cubic-bezier(.4, 0, .2, 1))}.sidebar-section:hover{background:var(--color-surface-hover, rgba(248, 250, 252, .5))}.sidebar-section:last-child{border-bottom:none}.sidebar-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-3, 12px)}.sidebar-section-title{font-size:var(--font-size-sm, 14px);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-secondary, #525252);text-transform:uppercase;letter-spacing:.05em;margin:0}.sidebar-section-content{display:flex;flex-direction:column;gap:var(--spacing-3, 12px)}.points-counter{background:var(--gradient-primary, linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%));color:var(--color-text-inverse, #ffffff);font-size:var(--font-size-xs, 12px);font-weight:var(--font-weight-bold, 700);padding:var(--spacing-1, 4px) var(--spacing-2, 8px);border-radius:var(--border-radius-full, 9999px);min-width:24px;height:24px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .03), 0 1px 3px 0 rgba(0, 0, 0, .03))}.sidebar-button{background:var(--color-surface-primary, #ffffff);border:1px solid var(--color-border-primary, rgba(0, 0, 0, .08));border-radius:var(--border-radius-lg, 12px);padding:var(--spacing-3, 12px) var(--spacing-4, 16px);font-size:var(--font-size-sm, 14px);font-weight:var(--font-weight-medium, 500);color:var(--color-text-primary, #171717);cursor:pointer;transition:var(--transition-base, .2s cubic-bezier(.4, 0, .2, 1));display:flex;align-items:center;justify-content:center;gap:var(--spacing-2, 8px);min-height:40px;width:100%;font-family:inherit;box-shadow:var(--shadow-xs, 0 1px 2px 0 rgba(0, 0, 0, .02))}.sidebar-button:hover:not(:disabled){background:var(--color-surface-hover, #fafafa);border-color:var(--color-border-accent, #0ea5e9);transform:translateY(-1px);box-shadow:var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .04))}.sidebar-button:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .03))}.sidebar-button:disabled{opacity:.5;cursor:not-allowed;transform:none;background:var(--color-surface-disabled, #f5f5f5)}.sidebar-button--danger{background:var(--color-error-light, #fef2f2);color:var(--color-error, #ef4444);border-color:var(--color-error-border, rgba(239, 68, 68, .2))}.sidebar-button--danger:hover:not(:disabled){background:var(--color-error, #ef4444);color:var(--color-text-inverse, #ffffff);border-color:var(--color-error, #ef4444)}.sidebar-button--secondary{background:var(--color-surface-secondary, rgba(248, 250, 252, .8));border-color:var(--color-border-secondary, #e2e8f0)}.sidebar-button--icon{flex:1;min-width:0;justify-content:flex-start}.undo-redo-controls{display:flex;gap:var(--spacing-2, 8px)}.undo-icon,.redo-icon{font-size:var(--font-size-base, 16px);opacity:.7}.action-buttons{display:flex;flex-direction:column;gap:var(--spacing-2, 8px)}.start-over-icon{width:16px;height:16px;opacity:.7}.points-actions{display:flex;flex-direction:column}.mask-toggle-container{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-3, 12px);background:var(--color-surface-secondary, rgba(248, 250, 252, .5));border-radius:var(--border-radius-lg, 12px);border:1px solid var(--color-border-primary, rgba(0, 0, 0, .06))}.mask-toggle-container:not(:last-child){margin-bottom:var(--spacing-2, 8px)}.mask-toggle-label{font-size:var(--font-size-sm, 14px);font-weight:var(--font-weight-medium, 500);color:var(--color-text-primary, #171717)}.toggle-switch{position:relative;display:inline-block;width:44px;height:24px;background:var(--color-border-secondary, #d4d4d4);border-radius:var(--border-radius-full, 9999px);border:1px solid var(--color-border-primary, rgba(0, 0, 0, .04));cursor:pointer;transition:var(--transition-base, .2s cubic-bezier(.4, 0, .2, 1))}.toggle-switch:before{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;background:var(--color-surface-primary, #ffffff);border-radius:50%;transition:var(--transition-spring, .25s cubic-bezier(.34, 1.56, .64, 1));box-shadow:var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .03), 0 1px 3px 0 rgba(0, 0, 0, .03))}.toggle-switch.active{background:var(--gradient-primary, linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%));border-color:var(--color-border-accent, #0ea5e9)}.toggle-switch.active:before{transform:translate(20px)}.toggle-switch.disabled{opacity:.5;cursor:not-allowed}.sidebar-collapse-button{background:transparent;border:none;color:var(--color-text-tertiary, #737373);cursor:pointer;padding:var(--spacing-1, 4px);border-radius:var(--border-radius-sm, 4px);transition:var(--transition-base, .2s cubic-bezier(.4, 0, .2, 1));font-size:var(--font-size-xs, 12px);min-width:24px;height:24px;display:flex;align-items:center;justify-content:center}.sidebar-collapse-button:hover{background:var(--color-surface-hover, rgba(248, 250, 252, .8));color:var(--color-text-primary, #171717)}.points-list{max-height:240px;overflow-y:auto;border:1px solid var(--color-border-primary, rgba(0, 0, 0, .08));border-radius:var(--border-radius-lg, 12px);background:var(--color-surface-secondary, rgba(248, 250, 252, .5))}.point-item{padding:var(--spacing-3, 12px);border-bottom:1px solid var(--color-border-primary, rgba(0, 0, 0, .06));display:flex;align-items:center;justify-content:space-between;transition:var(--transition-base, .2s cubic-bezier(.4, 0, .2, 1))}.point-item:last-child{border-bottom:none}.point-item:hover{background:var(--color-surface-hover, rgba(248, 250, 252, .8))}.point-info{display:flex;align-items:center;gap:var(--spacing-2, 8px);flex:1;min-width:0}.point-indicator{width:12px;height:12px;border-radius:50%;border:2px solid white;box-shadow:var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .1));flex-shrink:0}.point-indicator--add{background:var(--color-success, #10b981)}.point-indicator--remove{background:var(--color-error, #ef4444)}.point-details{font-size:var(--font-size-xs, 12px);color:var(--color-text-secondary, #525252);font-weight:var(--font-weight-medium, 500);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.point-type{font-size:var(--font-size-xs, 12px);font-weight:var(--font-weight-bold, 700);padding:var(--spacing-1, 4px) var(--spacing-2, 8px);border-radius:var(--border-radius-full, 9999px);text-transform:uppercase;letter-spacing:.05em;flex-shrink:0}.point-type--add{background:var(--color-success-light, #d1fae5);color:var(--color-success-dark, #059669)}.point-type--remove{background:var(--color-error-light, #fee2e2);color:var(--color-error-dark, #dc2626)}.point-remove-button{background:var(--color-error, #ef4444);color:var(--color-text-inverse, #ffffff);border:none;border-radius:var(--border-radius-sm, 4px);width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition-base, .2s cubic-bezier(.4, 0, .2, 1));font-size:var(--font-size-sm, 14px);font-weight:var(--font-weight-bold, 700);flex-shrink:0;margin-left:var(--spacing-2, 8px)}.point-remove-button:hover{background:var(--color-error-hover, #dc2626);transform:scale(1.05)}.empty-state{padding:var(--spacing-6, 24px) var(--spacing-4, 16px);text-align:center;border:2px dashed var(--color-border-secondary, #e2e8f0);border-radius:var(--border-radius-lg, 12px);background:var(--color-surface-secondary, rgba(248, 250, 252, .3))}.empty-state-text{font-size:var(--font-size-sm, 14px);color:var(--color-text-tertiary, #737373);font-style:italic;margin:0;line-height:1.5}.sidebar-footer{margin-top:auto;padding:var(--spacing-6, 24px);border-top:1px solid var(--color-border-primary, rgba(0, 0, 0, .06));background:var(--color-surface-secondary, rgba(248, 250, 252, .3))}.instructions{text-align:center}.instructions-text{font-size:var(--font-size-xs, 12px);color:var(--color-text-muted, #a3a3a3);margin:0;line-height:1.4;font-style:italic}@media(max-width:1024px){.sidebar{width:280px}.sidebar-section{padding:var(--spacing-3, 12px) var(--spacing-4, 16px)}.sidebar-header{padding:var(--spacing-4, 16px) var(--spacing-4, 16px) var(--spacing-3, 12px)}}@media(max-width:768px){.sidebar{width:100%;min-height:auto;max-height:400px;border-right:none;border-bottom:1px solid var(--color-border-primary, rgba(0, 0, 0, .08));box-shadow:var(--shadow-bottom, 0 2px 16px rgba(0, 0, 0, .04))}.sidebar:before{display:none}.undo-redo-controls{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-2, 8px)}.points-list{max-height:160px}.point-details{font-size:var(--font-size-xs, 11px)}}@media(max-width:480px){.sidebar-header{padding:var(--spacing-3, 12px)}.sidebar-section{padding:var(--spacing-2, 8px) var(--spacing-3, 12px)}.sidebar-title{font-size:var(--font-size-lg, 18px)}.action-buttons{gap:var(--spacing-1, 4px)}.sidebar-button{min-height:36px;padding:var(--spacing-2, 8px) var(--spacing-3, 12px);font-size:var(--font-size-xs, 12px)}}