.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background-color:var(--surface-color);border-bottom:2px solid var(--primary-color);padding:var(--spacing-md) 0;box-shadow:var(--shadow-sm)}.app-header .container{display:flex;flex-direction:column;align-items:center;text-align:center}.app-title{font-size:2rem;font-weight:700;color:var(--primary-color);margin-bottom:var(--spacing-xs)}.app-subtitle{color:var(--text-secondary);font-size:1rem}.app-main{flex:1;padding:0}.home-page{min-height:calc(100vh - 200px)}.image-uploader{max-width:800px;margin:0 auto;padding:var(--spacing-xl)}.dropzone{border:2px dashed var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-xl);text-align:center;cursor:pointer;transition:all .3s ease;background-color:var(--surface-color)}.dropzone:hover{border-color:var(--primary-color)}.dropzone-active{border-color:var(--primary-color);background-color:#e600280d}.dropzone-content{padding:var(--spacing-xl)}.dropzone-icon{width:64px;height:64px;color:var(--text-secondary);margin-bottom:var(--spacing-md)}.dropzone-text{font-size:1.25rem;color:var(--text-primary);margin-bottom:var(--spacing-sm)}.dropzone-hint{font-size:.875rem;color:var(--text-secondary)}.image-editor{display:flex;flex-direction:column;height:100vh}.toolbar{background-color:var(--surface-color);border-bottom:1px solid var(--border-color);padding:var(--spacing-md);display:flex;gap:var(--spacing-lg);align-items:center;box-shadow:var(--shadow-sm);flex-wrap:wrap}.toolbar-section{display:flex;gap:var(--spacing-sm)}.toolbar-button{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:.875rem;font-weight:500}.toolbar-button:hover{background-color:var(--background-color)}.toolbar-button.primary{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color)}.toolbar-button.primary:hover{background-color:var(--primary-dark)}.toolbar-button.success{background-color:var(--success-color);color:#fff;border-color:var(--success-color)}.toolbar-button.success:hover{background-color:#229954}.toolbar-button.danger{background-color:#dc3545;color:#fff;border-color:#dc3545}.toolbar-button.danger:hover{background-color:#c82333}.toolbar-button.icon-only{padding:var(--spacing-sm);width:36px;height:36px}.toolbar-button.icon-only .icon{width:20px;height:20px}.toolbar-hint{font-size:.875rem;color:var(--text-secondary);font-style:italic;display:flex;align-items:center}.toolbar-section.detection-options{display:flex;align-items:center;gap:var(--spacing-md)}.checkbox-label{display:flex;align-items:center;gap:var(--spacing-xs);cursor:pointer;font-size:.875rem;color:var(--text-primary)}.checkbox-label input[type=checkbox]{cursor:pointer;width:16px;height:16px;accent-color:var(--primary-color)}.editor-main{flex:1;display:flex;gap:var(--spacing-md);padding:var(--spacing-md);overflow:hidden}.image-gallery{width:200px;background-color:var(--surface-color);border-radius:var(--radius-md);padding:var(--spacing-md);overflow-y:auto;box-shadow:var(--shadow-sm)}.gallery-title{font-size:1rem;font-weight:600;margin-bottom:var(--spacing-md);color:var(--text-primary)}.gallery-items{display:flex;flex-direction:column;gap:var(--spacing-sm)}.gallery-item{cursor:pointer;padding:var(--spacing-sm);border-radius:var(--radius-sm);transition:all .2s ease;border:2px solid transparent}.gallery-item:hover{background-color:var(--background-color)}.gallery-item.selected{border-color:var(--primary-color);background-color:#e600280d}.gallery-thumbnail{width:100%;height:auto;border-radius:var(--radius-sm);margin-bottom:var(--spacing-xs)}.gallery-filename{font-size:.75rem;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.canvas-container{flex:1;background-color:var(--surface-color);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;overflow:auto;box-shadow:var(--shadow-sm);position:relative;min-height:400px;transition:all .2s ease}.canvas-container.empty-state{border:2px dashed var(--border-color);cursor:pointer}.canvas-container.empty-state:hover{border-color:var(--primary-color);background-color:#e6002805}.canvas-container.drag-active{border-color:var(--primary-color);background-color:#e600280d}.drag-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#e60028e6;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;border-radius:var(--radius-md)}.drag-overlay .dropzone-icon,.drag-overlay .dropzone-text{color:#fff}.konvajs-content{border:1px solid var(--border-color);border-radius:var(--radius-sm)}.drawing-indicator{position:absolute;top:var(--spacing-md);left:50%;transform:translate(-50%);background-color:var(--primary-color);color:#fff;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);font-weight:500;z-index:10;animation:pulse 2s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.7}to{opacity:1}}.detection-categories{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);align-items:center}.toolbar-section.blur-settings{display:flex;align-items:center;min-width:180px}.slider-label{display:flex;flex-direction:column;gap:4px;width:100%}.slider-text{font-size:.75rem;font-weight:500;color:var(--text-primary);white-space:nowrap}.blur-slider{width:100%;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--border-color);border-radius:3px;outline:none;cursor:pointer}.blur-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:var(--primary-color);border-radius:50%;cursor:pointer;transition:transform .1s ease}.blur-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.blur-slider::-moz-range-thumb{width:16px;height:16px;background:var(--primary-color);border-radius:50%;cursor:pointer;border:none}.toolbar-button:disabled{opacity:.5;cursor:not-allowed}.toolbar-button.primary:disabled{background-color:var(--primary-color)}.toolbar-section.provider-selector{display:flex;align-items:center}.provider-dropdown{padding:var(--spacing-sm) var(--spacing-md);background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:.875rem;font-weight:500;cursor:pointer;min-width:140px}.provider-dropdown:hover{border-color:var(--primary-color)}.provider-dropdown:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #e600281a}.provider-dropdown option:disabled{color:var(--text-secondary)}.status-toast{position:fixed;bottom:var(--spacing-xl);left:50%;transform:translate(-50%);background-color:var(--surface-color);color:var(--text-primary);padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);border:1px solid var(--border-color);z-index:1000;animation:slideUp .3s ease;max-width:90%;text-align:center}.status-toast.error{border-color:#dc3545;background-color:#fff5f5}.status-toast.success{border-color:var(--success-color);background-color:#f0fff4}@keyframes slideUp{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}:root{--primary-color: #e60028;--primary-dark: #c70023;--secondary-color: #2c3e50;--background-color: #f5f5f5;--surface-color: #ffffff;--text-primary: #2c3e50;--text-secondary: #7f8c8d;--border-color: #e1e4e8;--success-color: #27ae60;--warning-color: #f39c12;--error-color: #e74c3c;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--background-color);color:var(--text-primary);line-height:1.5}#root{min-height:100vh;display:flex;flex-direction:column}.container{width:100%;max-width:1400px;margin:0 auto;padding:0 var(--spacing-lg)}.icon{width:20px;height:20px}button{cursor:pointer;font-family:inherit;font-size:inherit;border:none;outline:none;transition:all .2s ease}button:disabled{opacity:.6;cursor:not-allowed}
