:root{--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--success-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);--warning-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);--primary-color: #667eea;--primary-dark: #5a67d8;--primary-light: #a5b4fc;--secondary-color: #f093fb;--success-color: #38ef7d;--warning-color: #fbbf24;--error-color: #ef4444;--info-color: #3b82f6;--background-color: #f8fafc;--surface-color: #ffffff;--surface-elevated: #ffffff;--text-primary: #1e293b;--text-secondary: #64748b;--text-muted: #94a3b8;--divider-color: #e2e8f0;--border-color: #cbd5e1;--glass-bg: rgba(255, 255, 255, .2);--glass-border: rgba(0, 0, 0, .3);--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, .25);--glass-blur: blur(8px);--surface-transparent: rgba(255, 255, 255, .15);--surface-transparent-hover: rgba(255, 255, 255, .25);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .25);--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 9999px;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: "Fira Code", "Cascadia Code", "JetBrains Mono", monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .35s cubic-bezier(.4, 0, .2, 1);--z-base: 0;--z-canvas: 1;--z-toolbar: 10;--z-dropdown: 20;--z-overlay: 100;--z-modal: 1000;--z-tooltip: 1100;--z-notification: 1200}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);font-size:var(--text-base);color:var(--text-primary);background:#f8fafc;background-attachment:fixed;min-height:100vh;overflow:hidden;-webkit-user-select:none;user-select:none}#app{display:flex;flex-direction:column;height:100vh;width:100vw;position:relative;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}.app-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--glass-border);box-shadow:var(--glass-shadow);z-index:var(--z-toolbar)}.header-left,.header-center,.header-right{display:flex;align-items:center;gap:var(--space-md)}.header-left h1{font-size:var(--text-2xl);font-weight:700;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.025em}.header-actions,.header-files,.header-settings{display:flex;align-items:center;gap:var(--space-xs);padding:0 var(--space-sm);border-radius:var(--radius-lg);background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border)}.header-actions:hover,.header-files:hover,.header-settings:hover{background:var(--surface-color);border-color:var(--border-color)}.gesture-indicator{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);background:var(--surface-color);border-radius:var(--radius-full);box-shadow:var(--shadow-md);transition:all var(--transition-base);border:1px solid var(--border-color)}.auto-save-indicator{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:14px;border-radius:var(--radius-full);transition:all var(--transition-base);cursor:help}.auto-save-indicator.saved{background:#38ef7d1a;color:var(--success-color);animation:pulse .5s ease-in-out}.auto-save-indicator.error{background:#ef44441a;color:var(--error-color);animation:shake .5s ease-in-out}.auto-save-indicator.saving{background:#3b82f61a;color:var(--info-color);animation:rotate 1s linear infinite}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.gesture-indicator:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.gesture-indicator.active{background:linear-gradient(135deg,#38ef7d,#11998e);border-color:#10b981;animation:pulse 2s ease-in-out infinite}.gesture-indicator.paused{background:linear-gradient(135deg,#fbbf24,#f59e0b);border-color:#d97706}.gesture-icon{font-size:var(--text-xl);filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.gesture-name{font-size:var(--text-sm);font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.main-content{display:flex;flex:1;overflow:hidden;gap:var(--space-sm);padding:var(--space-sm)}.canvas-container{flex:1;position:relative;background:#fff;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-xl);border:1px solid var(--border-color)}.background-canvas,.drawing-canvas,.tracking-canvas{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:var(--radius-xl)}.background-canvas{z-index:calc(var(--z-base) - 1);background:#fff!important}.drawing-canvas{cursor:crosshair;z-index:var(--z-canvas);background:#fff}.tracking-canvas{pointer-events:none;z-index:calc(var(--z-canvas) + 1)}.tracking-canvas-global{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:999}.finger-pointer{position:fixed;width:40px;height:40px;pointer-events:none;z-index:1000;transform:translate(-50%,-50%);transition:opacity .2s ease;opacity:0}.finger-pointer.active{opacity:1}.finger-pointer.hovering .finger-pointer-dot{background:radial-gradient(circle,#38ef7d,#11998e);transform:translate(-50%,-50%) scale(1.2)}.finger-pointer.hovering .finger-pointer-ring{border-color:#38ef7d;animation:pulse-ring-fast .8s ease-out infinite}@keyframes pulse-ring-fast{0%{transform:translate(-50%,-50%) scale(.9);opacity:1}to{transform:translate(-50%,-50%) scale(1.2);opacity:0}}.finger-pointer-dot{position:absolute;top:50%;left:50%;width:12px;height:12px;background:radial-gradient(circle,#667eea,#764ba2);border:2px solid white;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 2px 8px #0000004d}.finger-pointer-ring{position:absolute;top:50%;left:50%;width:30px;height:30px;border:2px solid #667eea;border-radius:50%;transform:translate(-50%,-50%);animation:pulse-ring 1.5s ease-out infinite}@keyframes pulse-ring{0%{transform:translate(-50%,-50%) scale(.8);opacity:1}to{transform:translate(-50%,-50%) scale(1.3);opacity:0}}.brush-cursor{position:absolute;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);z-index:var(--z-overlay);border:2px solid var(--primary-color);box-shadow:0 0 0 1px #fff,0 2px 8px #0003;transition:all var(--transition-fast);mix-blend-mode:difference}button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-lg);border:none;border-radius:var(--radius-lg);font-family:inherit;font-size:var(--text-sm);font-weight:600;text-decoration:none;cursor:pointer;transition:all var(--transition-fast);position:relative;overflow:hidden;white-space:nowrap}button:before,.btn:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:#fff0;transition:background var(--transition-fast)}button:hover:before,.btn:hover:before{background:#ffffff1a}button:active,.btn:active{transform:scale(.98)}.btn-primary{background:var(--primary-gradient);color:#fff;box-shadow:var(--shadow-md)}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-secondary{background:var(--surface-color);color:var(--primary-color);border:2px solid var(--primary-color)}.btn-secondary:hover{background:var(--primary-light)}.btn-danger{background:linear-gradient(135deg,#fecaca,#fca5a5);color:#991b1b;border:1px solid #ef4444}.btn-danger:hover{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #ef44444d;border-color:transparent}.btn-icon{width:2.5rem;height:2.5rem;padding:0;background:linear-gradient(135deg,#f3f4f6,#e5e7eb);border-radius:var(--radius-lg);font-size:var(--text-lg);box-shadow:0 2px 4px #0000001a,inset 0 1px 2px #ffffff80;border:1px solid rgba(0,0,0,.15);color:#374151;transition:all .2s ease}.btn-icon:hover{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff!important;transform:translateY(-2px);box-shadow:0 4px 8px #667eea4d;border-color:transparent}#btnUndo,#btnRedo{color:#1f2937;font-weight:700}#btnUndo:hover,#btnRedo:hover{color:#fff!important}.btn-back{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);color:var(--text-secondary);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-lg);border:1px solid var(--glass-border)}.btn-back:hover{background:var(--surface-color);color:var(--primary-color);transform:translate(-4px)}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);opacity:0;visibility:hidden;transition:all var(--transition-base)}.loading-overlay.show{opacity:1;visibility:visible}.loading-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg);padding:var(--space-2xl);background:var(--surface-color);border-radius:var(--radius-2xl);box-shadow:var(--shadow-2xl)}.loading-spinner{width:3rem;height:3rem;border:3px solid var(--divider-color);border-top:3px solid var(--primary-color);border-radius:50%;animation:spin 1s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.status-message{position:fixed;top:var(--space-xl);right:var(--space-xl);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-lg);font-weight:600;font-size:var(--text-sm);z-index:var(--z-notification);transform:translate(calc(100% + var(--space-xl)));transition:transform var(--transition-base);box-shadow:var(--shadow-xl);display:flex;align-items:center;gap:var(--space-sm)}.status-message.show{transform:translate(0)}.status-message.success{background:var(--success-gradient);color:#fff}.status-message.error{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.status-message.info{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}.status-message.warning{background:var(--warning-gradient);color:#fff}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);opacity:0;visibility:hidden;transition:all var(--transition-base)}.modal.show{opacity:1;visibility:visible}.modal-content{background:var(--surface-color);border-radius:var(--radius-2xl);box-shadow:var(--shadow-2xl);max-width:90vw;max-height:90vh;overflow:hidden;transform:scale(.9) translateY(20px);transition:all var(--transition-base)}.modal.show .modal-content{transform:scale(1) translateY(0)}.modal-small{width:28rem}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-lg);border-bottom:1px solid var(--divider-color);background:var(--background-color)}.modal-header h2{font-size:var(--text-xl);font-weight:700;color:var(--text-primary)}.modal-body{padding:var(--space-lg);overflow-y:auto;max-height:calc(90vh - 5rem)}.btn-close{width:2rem;height:2rem;border:none;background:transparent;font-size:var(--text-xl);color:var(--text-muted);cursor:pointer;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.btn-close:hover{background:var(--error-color);color:#fff;transform:rotate(90deg)}input[type=text],input[type=number],select,textarea{width:100%;padding:var(--space-sm) var(--space-md);border:2px solid var(--border-color);border-radius:var(--radius-lg);font-family:inherit;font-size:var(--text-sm);transition:all var(--transition-fast);background:var(--surface-color)}input[type=text]:focus,input[type=number]:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #667eea1a}input[type=range]{width:100%;height:6px;border-radius:var(--radius-full);background:var(--divider-color);outline:none;-webkit-appearance:none;transition:all var(--transition-fast)}input[type=range]:hover{background:var(--border-color)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--primary-gradient);cursor:pointer;border:3px solid white;box-shadow:var(--shadow-md);transition:all var(--transition-fast)}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:var(--shadow-lg)}input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--primary-gradient);cursor:pointer;border:3px solid white;box-shadow:var(--shadow-md);transition:all var(--transition-fast)}input[type=range]::-moz-range-thumb:hover{transform:scale(1.2);box-shadow:var(--shadow-lg)}input[type=checkbox]{width:1.25rem;height:1.25rem;margin-right:var(--space-sm);cursor:pointer}label{display:flex;align-items:center;font-size:var(--text-sm);font-weight:500;cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-secondary)}.settings-group{padding:var(--space-md) 0;border-bottom:1px solid var(--divider-color)}.settings-group:last-child{border-bottom:none}.control-tabs{display:flex;gap:var(--space-xs);margin-bottom:var(--space-lg);border-bottom:1px solid var(--border-color)}.control-tab{padding:var(--space-sm) var(--space-lg);background:transparent;border:none;border-bottom:2px solid transparent;font-weight:600;color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);border-radius:var(--radius-md) var(--radius-md) 0 0}.control-tab:hover{color:var(--primary-color);background:var(--background-color)}.control-tab.active{color:var(--primary-color);border-bottom-color:var(--primary-color);background:var(--background-color)}.control-tab-content{display:none}.control-tab-content.active{display:block}.control-section{margin-bottom:var(--space-xl)}.control-section h3{font-size:var(--text-lg);font-weight:700;color:var(--text-primary);margin-bottom:var(--space-md);padding-bottom:var(--space-sm);border-bottom:1px solid var(--divider-color)}.gesture-guide{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-md)}.gesture-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:var(--background-color);border-radius:var(--radius-lg);border:1px solid var(--border-color);transition:all var(--transition-fast)}.gesture-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--primary-color)}.gesture-emoji{font-size:var(--text-2xl);filter:drop-shadow(0 2px 4px rgba(0,0,0,.1));min-width:40px;text-align:center}.gesture-info h4{font-size:var(--text-base);font-weight:600;color:var(--text-primary);margin-bottom:var(--space-xs)}.gesture-info p{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.5}.mouse-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-md)}.control-item{display:flex;align-items:flex-start;gap:var(--space-md);padding:var(--space-md);background:var(--surface-color);border-radius:var(--radius-lg);border:1px solid var(--border-color);transition:all var(--transition-fast)}.control-item:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);border-color:var(--info-color)}.control-icon{font-size:var(--text-xl);min-width:32px;text-align:center;color:var(--primary-color)}.control-info h4{font-size:var(--text-base);font-weight:600;color:var(--text-primary);margin-bottom:var(--space-xs)}.control-info p{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.5}.control-info strong{color:var(--primary-color);font-weight:600}.tips-list{display:flex;flex-direction:column;gap:var(--space-md)}.tip-item{display:flex;align-items:flex-start;gap:var(--space-md);padding:var(--space-md);background:linear-gradient(135deg,var(--background-color) 0%,var(--surface-color) 100%);border-radius:var(--radius-lg);border:1px solid var(--border-color);border-left:4px solid var(--warning-color)}.tip-icon{font-size:var(--text-lg);min-width:24px;text-align:center}.tip-item p{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.6;margin:0}.tip-item strong{color:var(--text-primary);font-weight:600}.input-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:var(--z-base);transform:scaleX(-1);border-radius:var(--radius-xl)}@media (max-width: 768px){.main-content{flex-direction:column}.header-center{display:none}.modal-content{width:95vw;border-radius:var(--radius-xl)}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.welcome-section{margin-bottom:var(--space-xl);padding-bottom:var(--space-lg);border-bottom:1px solid var(--divider-color)}.welcome-section:last-child{border-bottom:none}.welcome-section h3{font-size:var(--text-xl);font-weight:700;color:var(--text-primary);margin-bottom:var(--space-md);display:flex;align-items:center;gap:var(--space-sm)}.welcome-guide{display:flex;flex-direction:column;gap:var(--space-md)}.welcome-item{display:flex;align-items:flex-start;gap:var(--space-md);padding:var(--space-md);background:linear-gradient(135deg,var(--background-color) 0%,var(--surface-color) 100%);border-radius:var(--radius-lg);border:1px solid var(--border-color);transition:all var(--transition-fast)}.welcome-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--primary-color)}.welcome-emoji{font-size:var(--text-3xl);min-width:50px;text-align:center;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.welcome-info h4{font-size:var(--text-lg);font-weight:600;color:var(--text-primary);margin-bottom:var(--space-xs)}.welcome-info p{font-size:var(--text-base);color:var(--text-secondary);line-height:1.6;margin:0}.welcome-tips{display:flex;flex-direction:column;gap:var(--space-sm)}.welcome-tip{display:flex;align-items:flex-start;gap:var(--space-md);padding:var(--space-sm) var(--space-md);background:#fff;border-radius:var(--radius-lg);border:2px solid #000000}.welcome-tip p{font-size:var(--text-sm);color:#000;line-height:1.6;margin:0}.welcome-tip strong{color:#000;font-weight:600}.welcome-actions{display:flex;gap:var(--space-md);margin-top:var(--space-lg);justify-content:center}.btn-large{font-size:var(--text-lg);padding:var(--space-lg) var(--space-2xl);min-height:3rem}.btn-secondary{background:var(--surface-color);color:var(--text-secondary);border:2px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-md) var(--space-lg);cursor:pointer;transition:all var(--transition-fast);font-weight:600}.btn-secondary:hover{background:var(--background-color);color:var(--primary-color);border-color:var(--primary-color);transform:translateY(-2px);box-shadow:var(--shadow-md)}@media (max-width: 768px){.welcome-actions{flex-direction:column}.welcome-item{flex-direction:column;text-align:center}.welcome-emoji{align-self:center}}@media (prefers-color-scheme: dark){:root{--background-color: #0f172a;--surface-color: #1e293b;--surface-elevated: #334155;--text-primary: #f1f5f9;--text-secondary: #cbd5e1;--text-muted: #94a3b8;--divider-color: #334155;--border-color: #475569;--glass-bg: rgba(15, 23, 42, .8);--glass-border: rgba(255, 255, 255, .1)}}.canvas-container,.background-canvas{background-color:#fff!important}.drawing-canvas.drawing{cursor:none}.drawing-canvas.paused{cursor:not-allowed;opacity:.8}.canvas-grid-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:calc(var(--z-canvas) - 1);opacity:.05;background-image:linear-gradient(to right,var(--text-muted) 1px,transparent 1px),linear-gradient(to bottom,var(--text-muted) 1px,transparent 1px);background-size:20px 20px}.canvas-watermark{position:absolute;bottom:var(--space-md);right:var(--space-md);font-size:var(--text-xs);color:var(--text-muted);opacity:.3;pointer-events:none;z-index:calc(var(--z-canvas) + 2);font-weight:500}.canvas-performance{position:absolute;top:var(--space-md);left:var(--space-md);background:#000000b3;color:#fff;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-md);font-size:var(--text-xs);font-family:var(--font-mono);z-index:calc(var(--z-canvas) + 2);opacity:0;transition:opacity var(--transition-fast)}.canvas-performance.show{opacity:1}@media (hover: none) and (pointer: coarse){.drawing-canvas{cursor:auto}.canvas-container:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,transparent 49%,rgba(102,126,234,.05) 50%,transparent 51%);background-size:40px 40px;pointer-events:none;z-index:calc(var(--z-canvas) - 1)}}.toolbar{width:280px;background:#f8fafcf2;border-right:2px solid rgba(0,0,0,.1);padding:var(--space-lg);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--space-lg);z-index:var(--z-toolbar)}.tool-section{background:#ffffffe6;border-radius:var(--radius-xl);padding:var(--space-md);border:3px solid rgba(0,0,0,.4);transition:all var(--transition-base);position:relative}.tool-section:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--radius-xl);padding:3px;background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,transparent 30%,transparent 70%,rgba(255,255,255,.1) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.tool-section:hover{border-color:#0009;border-width:3px;box-shadow:inset 0 0 10px #667eea33}.tool-section h3{font-size:var(--text-base);font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:#000;text-shadow:0 0 3px rgba(255,255,255,1),0 0 6px rgba(255,255,255,.8),0 0 9px rgba(255,255,255,.6);margin-bottom:var(--space-md);display:flex;align-items:center;gap:var(--space-sm)}.tool-section h3:before{content:"";width:3px;height:1em;background:var(--primary-gradient);border-radius:var(--radius-full)}.brush-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md)}.tool-btn{aspect-ratio:1;min-width:80px;min-height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-xs);padding:var(--space-md);background:linear-gradient(135deg,#f9fafb,#f3f4f6);border:2px solid #9ca3af;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);position:relative;overflow:hidden;box-shadow:0 2px 4px #0000001a,inset 0 1px 2px #ffffffe6;color:#374151}.tool-btn:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--primary-gradient);opacity:0;transition:opacity var(--transition-fast)}.tool-btn:hover{transform:translateY(-2px);background:linear-gradient(135deg,#ddd6fe,#c7d2fe);box-shadow:0 4px 8px #667eea4d;border-color:#667eea;border-width:2px;color:#4c1d95}.tool-btn:hover:before{opacity:.1}.tool-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);border:2px solid #4c1d95;color:#fff;box-shadow:0 4px 12px #667eea66;transform:scale(1.05)}.tool-btn.active .tool-icon{filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.tool-btn.eraser-btn{background:linear-gradient(135deg,#fef3c7,#fed7aa);border-color:#ea580c;border-width:2px;color:#92400e}.tool-btn.eraser-btn:hover{background:#ffa50033;border-color:#ff4500;box-shadow:inset 0 0 10px #ff6b3566}.tool-btn.eraser-btn.active{background:#ff6b354d;border-color:#ff4500;border-width:4px;box-shadow:inset 0 0 15px #ff6b3580,0 0 10px #ff6b354d}.tool-icon{font-size:2.5rem;transition:all var(--transition-fast);filter:drop-shadow(0 0 3px rgba(255,255,255,1)) drop-shadow(0 0 6px rgba(255,255,255,.8)) drop-shadow(0 2px 4px rgba(0,0,0,.5))}.slider{width:100%;margin:var(--space-md) 0;height:20px;border-radius:10px;background:#ffffffe6;border:2px solid rgba(0,0,0,.5);box-shadow:inset 0 1px 3px #0000004d,0 0 5px #fffc;outline:none;-webkit-appearance:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:36px;height:36px;border-radius:50%;background:var(--primary-color);border:3px solid white;box-shadow:0 2px 6px #0000004d;cursor:pointer}.slider::-moz-range-thumb{width:36px;height:36px;border-radius:50%;background:var(--primary-color);border:3px solid white;box-shadow:0 2px 6px #0000004d;cursor:pointer}.value-display{display:inline-block;min-width:4em;text-align:center;padding:var(--space-sm) var(--space-md);background:#ffffffe6;border:2px solid rgba(0,0,0,.3);border-radius:var(--radius-md);font-size:var(--text-lg);font-weight:700;color:#1e293b;margin-left:var(--space-md);box-shadow:0 2px 4px #00000026}.color-picker{display:flex;gap:var(--space-sm);align-items:center;margin-bottom:var(--space-md)}.current-color{width:60px;height:60px;border-radius:var(--radius-lg);background:#000;box-shadow:0 0 8px #00000080;border:4px solid rgba(0,0,0,.6);cursor:pointer;transition:all var(--transition-fast);outline:2px solid rgba(255,255,255,.8);outline-offset:-2px}.current-color:hover{transform:scale(1.1);box-shadow:var(--shadow-lg)}.btn-color-wheel{flex:1;padding:var(--space-md);background:linear-gradient(135deg,#f9fafb,#f3f4f6);border:2px solid #9ca3af;border-radius:var(--radius-lg);font-size:var(--text-2xl);cursor:pointer;transition:all var(--transition-fast);min-height:60px}.btn-color-wheel:hover{background:linear-gradient(135deg,#667eea,#764ba2);border-color:var(--primary-color);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}.color-palette{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md)}.color-swatch{aspect-ratio:1;min-height:60px;min-width:60px;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);border:4px solid rgba(0,0,0,.5);position:relative;overflow:hidden;box-shadow:inset 0 0 3px #0000004d}.color-swatch:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#ffffff80;border-radius:50%;transform:translate(-50%,-50%);transition:all var(--transition-fast)}.color-swatch:hover{transform:scale(1.2);box-shadow:var(--shadow-md);border-color:var(--text-primary);z-index:1}.color-swatch:hover:before{width:100%;height:100%}.color-swatch.active{border-color:var(--primary-color);box-shadow:0 0 0 3px #667eea33}.btn-action{width:100%;padding:var(--space-md);margin:var(--space-xs) 0;background:var(--surface-color);border:2px solid var(--border-color);border-radius:var(--radius-lg);font-weight:600;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;gap:var(--space-sm)}.btn-action:hover{transform:translate(4px);box-shadow:var(--shadow-md)}.btn-action.btn-primary{background:var(--primary-gradient);color:#fff;border:none}.btn-action.btn-primary:hover{transform:translateY(-2px) translate(0);box-shadow:var(--shadow-lg)}.btn-action.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:none}.btn-action.btn-danger:hover{transform:translateY(-2px) translate(0);box-shadow:0 4px 12px #ef44444d}.toolbar-toggle{display:none;position:fixed;bottom:var(--space-lg);left:var(--space-lg);width:56px;height:56px;background:var(--primary-gradient);border-radius:50%;box-shadow:var(--shadow-xl);z-index:var(--z-toolbar);align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast)}.toolbar-toggle:hover{transform:scale(1.1);box-shadow:var(--shadow-2xl)}.toolbar.collapsed{transform:translate(-100%)}@media (max-width: 1024px){.toolbar{position:fixed;top:0;left:0;height:100vh;transform:translate(-100%);transition:transform var(--transition-base);z-index:var(--z-modal)}.toolbar.show{transform:translate(0)}.toolbar-toggle{display:flex}}@media (max-width: 768px){.toolbar{width:180px}.brush-grid{grid-template-columns:repeat(2,1fr)}}.toolbar::-webkit-scrollbar{width:6px}.toolbar::-webkit-scrollbar-track{background:transparent}.toolbar::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:var(--radius-full)}.toolbar::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.tool-section{animation:slideIn var(--transition-base) ease-out;animation-fill-mode:both}.tool-section:nth-child(1){animation-delay:0ms}.tool-section:nth-child(2){animation-delay:50ms}.tool-section:nth-child(3){animation-delay:.1s}.tool-section:nth-child(4){animation-delay:.15s}.tool-section:nth-child(5){animation-delay:.2s}.tool-section:nth-child(6){animation-delay:.25s}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-lg);padding:var(--space-lg);max-height:60vh;overflow-y:auto}.gallery-item{background:var(--surface-color);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;position:relative;border:1px solid var(--border-color)}.gallery-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:var(--primary-color)}.gallery-thumbnail{position:relative;width:100%;height:150px;overflow:hidden;background:var(--background-color);display:flex;align-items:center;justify-content:center}.gallery-thumbnail img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-base)}.gallery-item:hover .gallery-thumbnail img{transform:scale(1.05)}.gallery-thumbnail.empty{background:linear-gradient(45deg,var(--background-color) 25%,transparent 25%),linear-gradient(-45deg,var(--background-color) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--background-color) 75%),linear-gradient(-45deg,transparent 75%,var(--background-color) 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}.gallery-thumbnail.empty:after{content:"🎨";font-size:var(--text-3xl);opacity:.3}.gallery-info{padding:var(--space-md)}.gallery-title{font-size:var(--text-sm);font-weight:600;color:var(--text-primary);margin-bottom:var(--space-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gallery-meta{display:flex;justify-content:space-between;align-items:center;font-size:var(--text-xs);color:var(--text-muted)}.gallery-date{font-weight:500}.gallery-size{background:var(--background-color);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-md);font-weight:600}.gallery-actions{position:absolute;top:var(--space-sm);right:var(--space-sm);display:flex;gap:var(--space-xs);opacity:0;transition:opacity var(--transition-fast)}.gallery-item:hover .gallery-actions{opacity:1}.gallery-action{width:32px;height:32px;border:none;border-radius:var(--radius-md);background:#000000b3;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.gallery-action:hover{background:#000000e6;transform:scale(1.1)}.gallery-action.delete:hover{background:var(--error-color)}.gallery-action.favorite{background:#ffc107cc}.gallery-action.favorite:hover{background:#ffc107}.gallery-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-2xl);text-align:center;min-height:300px}.gallery-empty-icon{font-size:4rem;opacity:.3;margin-bottom:var(--space-lg)}.gallery-empty-title{font-size:var(--text-xl);font-weight:600;color:var(--text-secondary);margin-bottom:var(--space-sm)}.gallery-empty-description{font-size:var(--text-sm);color:var(--text-muted);max-width:300px;line-height:1.6}.gallery-loading{display:flex;align-items:center;justify-content:center;padding:var(--space-2xl);min-height:200px}.gallery-loading-spinner{width:40px;height:40px;border:3px solid var(--divider-color);border-top:3px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}.gallery-pagination{display:flex;justify-content:center;align-items:center;gap:var(--space-md);padding:var(--space-lg);border-top:1px solid var(--divider-color)}.gallery-page-btn{padding:var(--space-sm) var(--space-md);border:2px solid var(--border-color);border-radius:var(--radius-lg);background:var(--surface-color);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);font-weight:600}.gallery-page-btn:hover{border-color:var(--primary-color);background:var(--primary-light)}.gallery-page-btn.active{background:var(--primary-gradient);color:#fff;border-color:transparent}.gallery-page-btn:disabled{opacity:.5;cursor:not-allowed}.gallery-page-info{font-size:var(--text-sm);color:var(--text-muted);font-weight:500}.gallery-filters{display:flex;gap:var(--space-md);padding:var(--space-lg);border-bottom:1px solid var(--divider-color);flex-wrap:wrap;align-items:center}.gallery-search{flex:1;min-width:200px;padding:var(--space-sm) var(--space-md);border:2px solid var(--border-color);border-radius:var(--radius-lg);font-size:var(--text-sm);transition:all var(--transition-fast)}.gallery-search:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #667eea1a}.gallery-sort{padding:var(--space-sm) var(--space-md);border:2px solid var(--border-color);border-radius:var(--radius-lg);background:var(--surface-color);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-fast)}.gallery-sort:focus{outline:none;border-color:var(--primary-color)}.gallery-view-toggle{display:flex;gap:var(--space-xs)}.gallery-view-btn{width:40px;height:40px;border:2px solid var(--border-color);border-radius:var(--radius-md);background:var(--surface-color);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.gallery-view-btn:hover{border-color:var(--primary-color);background:var(--primary-light)}.gallery-view-btn.active{background:var(--primary-gradient);color:#fff;border-color:transparent}@media (max-width: 768px){.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-md);padding:var(--space-md)}.gallery-thumbnail{height:120px}.gallery-filters{flex-direction:column;align-items:stretch}.gallery-search{width:100%}.gallery-view-toggle{justify-content:center}}@media (max-width: 480px){.gallery-grid{grid-template-columns:repeat(2,1fr)}.gallery-thumbnail{height:100px}.gallery-info{padding:var(--space-sm)}.gallery-title{font-size:var(--text-xs)}.gallery-meta{font-size:10px}}.gallery-grid::-webkit-scrollbar{width:8px}.gallery-grid::-webkit-scrollbar-track{background:var(--background-color);border-radius:var(--radius-full)}.gallery-grid::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:var(--radius-full)}.gallery-grid::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.gallery-item{animation:fadeInUp var(--transition-base) ease-out;animation-fill-mode:both}.gallery-item:nth-child(1){animation-delay:0ms}.gallery-item:nth-child(2){animation-delay:50ms}.gallery-item:nth-child(3){animation-delay:.1s}.gallery-item:nth-child(4){animation-delay:.15s}.gallery-item:nth-child(5){animation-delay:.2s}.gallery-item:nth-child(6){animation-delay:.25s}.gallery-item:nth-child(7){animation-delay:.3s}.gallery-item:nth-child(8){animation-delay:.35s}