:root{--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);--accent-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);--primary-color: #667eea;--primary-hover: #5568d3;--primary-light: #e0e7ff;--secondary-color: #f5576c;--success-color: #4facfe;--accent-color: #43e97b;--body-bg: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);--main-bg: #ffffff;--fieldset-bg: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);--fieldset-hover: #f8f9fa;--text-primary: #2d3748;--text-secondary: #718096;--text-muted: #a0aec0;--border-color: #e2e8f0;--border-hover: #cbd5e1;--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--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-colored: 0 10px 40px rgba(102, 126, 234, .3)}*{box-sizing:border-box}body{margin:0;padding:32px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,system-ui,sans-serif;background:var(--body-bg);background-attachment:fixed;color:var(--text-primary);min-height:100vh;line-height:1.6}.header{margin-bottom:2.5rem}.logo{display:flex;align-items:center;justify-content:center;gap:1.5rem;padding:2rem 1.5rem;background:var(--main-bg);border-radius:20px;box-shadow:var(--shadow-xl);border:1px solid var(--border-color)}.logo-icon{width:64px;height:64px;color:var(--primary-color);filter:drop-shadow(0 4px 8px rgba(102,126,234,.3))}.logo-text{text-align:left}.logo-text h1{margin:0;font-size:2.5rem;font-weight:700;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em}.logo-text .subtitle{margin:.25rem 0 0;font-size:1.125rem;color:var(--text-secondary);font-weight:500;letter-spacing:.05em}button{padding:.75rem 1.5rem;border:none;border-radius:10px;margin-bottom:8px;white-space:nowrap;cursor:pointer;font-size:.9375rem;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);font-family:inherit;box-shadow:var(--shadow-sm)}button:disabled{opacity:.5;cursor:not-allowed;transform:none!important}button.primary{color:#fff;background:var(--primary-gradient);box-shadow:var(--shadow-colored)}button.primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 40px #667eea66}button.secondary{color:var(--text-primary);background:var(--fieldset-bg);border:1px solid var(--border-color)}button.secondary:hover:not(:disabled){background:var(--fieldset-hover);border-color:var(--border-hover);transform:translateY(-1px)}h3{padding:0 0 1.5rem;margin:0 0 2.5rem;border-bottom:3px solid transparent;border-image:var(--primary-gradient) 1;text-align:center;font-size:2.25rem;font-weight:700;letter-spacing:-.02em;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}fieldset{border:1px solid var(--border-color);background:var(--fieldset-bg);padding:2rem;margin-bottom:1.5rem;border-radius:16px;box-shadow:var(--shadow-md);transition:all .3s ease;position:relative;overflow:hidden}fieldset:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--primary-gradient);opacity:0;transition:opacity .3s ease}fieldset:hover:before{opacity:1}fieldset:hover{border-color:var(--primary-color);box-shadow:var(--shadow-lg);transform:translateY(-2px)}fieldset legend{font-weight:700;color:var(--text-primary);font-size:1.125rem;text-transform:none;letter-spacing:0;padding:0 1rem;display:flex;align-items:center;gap:.5rem}fieldset legend .icon{width:20px;height:20px;color:var(--primary-color)}code{padding:.3em .5em;margin:0;font-size:.875rem;background:var(--primary-light);color:var(--primary-color);border-radius:6px;font-family:Monaco,Menlo,Consolas,Courier New,monospace;font-weight:600}input[type=text],input[type=number],select{font-size:.9375rem;font-weight:400;line-height:1.5;color:var(--text-primary);background:#fff;border:2px solid var(--border-color);border-radius:8px;padding:.625rem .875rem;max-width:100%;transition:all .3s ease;font-family:inherit}input[type=file]{font-size:.9375rem;font-weight:500;line-height:1.5;color:var(--text-primary);max-width:100%;padding:.75rem;border:2px dashed var(--border-color);border-radius:8px;background:#fff;cursor:pointer;transition:all .3s ease}input[type=file]:hover{border-color:var(--primary-color);background:var(--primary-light)}input::file-selector-button{font-size:.875rem;font-weight:600;line-height:1.5;border:none;border-radius:6px;cursor:pointer;background:var(--primary-gradient);color:#fff;padding:.5rem 1rem;margin-right:1rem;transition:all .3s ease;box-shadow:var(--shadow-sm)}input::file-selector-button:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}select{padding:.625rem 2.5rem .625rem .875rem}input:focus,select:focus{border-color:var(--primary-color);box-shadow:0 0 0 4px #667eea26;outline:0}input[type=text]:disabled,input[type=number]:disabled,select:disabled{opacity:.6;cursor:not-allowed;background-color:#f7fafc;color:var(--text-muted)}label{margin-right:.625rem;white-space:nowrap;color:var(--text-secondary);font-size:.9375rem;font-weight:600}#ditherStrengthValue,#ditherContrastValue{display:inline-flex;align-items:center;justify-content:center;min-width:48px;padding:.375rem .75rem;background:var(--primary-gradient);color:#fff;border-radius:8px;font-weight:700;font-size:.875rem;box-shadow:var(--shadow-sm);margin-left:.25rem}.main{width:100%;max-width:1280px;margin:0 auto;padding:0}.flex-container{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px}.flex-group{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.flex-group.right{margin-left:auto}.debug{display:none!important}.log-container{width:100%;min-height:140px;max-height:320px;margin:0;padding:1.25rem;background:#fff;border:2px solid var(--border-color);border-radius:10px;overflow-y:auto;overflow-x:hidden;font-family:Monaco,Menlo,Courier New,Consolas,monospace;font-size:.875rem;word-break:break-word;line-height:1.6;box-shadow:inset 0 2px 4px #0000000f}.log-container .log-line{padding:4px 0}.log-container .time,.log-container .action{display:inline-block;white-space:nowrap}.log-container .time{color:var(--primary-color);margin-right:.75em;font-weight:700}.log-container .action{color:var(--text-secondary);margin-right:.75em;font-weight:600}.canvas-container canvas{border:3px solid var(--border-color);border-radius:12px;max-width:100%;height:auto;display:block;margin:0 auto;box-shadow:var(--shadow-lg);background:#fff;transition:all .3s ease}.canvas-container canvas:hover{box-shadow:var(--shadow-xl)}.canvas-container.crop-mode canvas{border:3px dashed var(--primary-color);cursor:grab}.status-bar{display:none;font-size:.9375rem;color:var(--text-secondary);margin-bottom:14px;padding:.875rem 1rem;background:var(--primary-light);border-left:4px solid var(--primary-color);border-radius:6px}canvas.text-placement-mode{border:3px dashed var(--primary-color)!important;cursor:text!important}.canvas-title{display:none;text-align:center;margin-bottom:12px;color:var(--primary-color);font-weight:700;font-size:1.125rem}.canvas-tools{margin-top:16px;justify-content:center}.brush-tools,.text-tools,.crop-tools{display:none}.canvas-container.brush-mode .brush-tools,.canvas-container.text-mode .brush-tools,.canvas-container.eraser-mode .brush-tools,.canvas-container.text-mode .text-tools,.canvas-container.crop-mode .crop-tools{display:flex}.canvas-container.crop-mode .tool-buttons,.canvas-container.crop-mode .brush-tools,.canvas-container.crop-mode .text-tools{display:none}.tool-button{width:44px;height:44px;font-size:1.25rem;display:inline-flex;align-items:center;justify-content:center;margin-right:8px;background:linear-gradient(135deg,#fff,#f7fafc);border:2px solid var(--border-color);border-radius:10px;padding:0;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-sm)}.tool-button:hover{background:var(--fieldset-hover);border-color:var(--primary-color);transform:translateY(-2px);box-shadow:var(--shadow-md)}.tool-button.active{background:var(--primary-gradient);color:#fff;border-color:var(--primary-color);box-shadow:var(--shadow-colored)}.tool-button.hide{display:none}input[type=range]{-webkit-appearance:none;appearance:none;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer;width:160px;height:12px;border-radius:6px;border:2px solid #5568d3;box-shadow:0 2px 4px #00000026,inset 0 1px 2px #0000001a}input[type=range]::-webkit-slider-track{background:transparent;height:12px;border-radius:6px}input[type=range]::-moz-range-track{background:transparent;height:12px;border-radius:6px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#fff;height:26px;width:26px;border-radius:50%;border:4px solid #667eea;box-shadow:0 3px 10px #0000004d,0 0 0 2px #667eea33;transition:all .3s ease;cursor:grab}input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(.95)}input[type=range]::-moz-range-thumb{border:4px solid #667eea;background:#fff;height:26px;width:26px;border-radius:50%;box-shadow:0 3px 10px #0000004d,0 0 0 2px #667eea33;transition:all .3s ease;cursor:grab}input[type=range]::-moz-range-thumb:active{cursor:grabbing;transform:scale(.95)}input[type=range]:hover{box-shadow:0 3px 8px #00000040,inset 0 1px 2px #00000026}input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 4px 14px #0006,0 0 0 3px #667eea66;transform:scale(1.1)}input[type=range]:hover::-moz-range-thumb{box-shadow:0 4px 14px #0006,0 0 0 3px #667eea66;transform:scale(1.1)}input[type=range]:focus{outline:none;box-shadow:0 3px 8px #00000040,0 0 0 3px #667eea4d}input[type=range]:focus::-webkit-slider-thumb{box-shadow:0 4px 14px #0006,0 0 0 4px #667eea4d}input[type=range]:focus::-moz-range-thumb{box-shadow:0 4px 14px #0006,0 0 0 4px #667eea4d}.log-container::-webkit-scrollbar{width:10px}.log-container::-webkit-scrollbar-track{background:#f7fafc;border-radius:5px}.log-container::-webkit-scrollbar-thumb{background:var(--primary-gradient);border-radius:5px;box-shadow:var(--shadow-sm)}.log-container::-webkit-scrollbar-thumb:hover{box-shadow:var(--shadow-md)}@media (max-width: 768px){body{padding:20px 12px}.header{margin-bottom:1.5rem}.logo{flex-direction:column;gap:1rem;padding:1.5rem 1rem;border-radius:16px}.logo-icon{width:48px;height:48px}.logo-text{text-align:center}.logo-text h1{font-size:1.875rem}.logo-text .subtitle{font-size:1rem}fieldset{padding:1.25rem;margin-bottom:1.25rem;border-radius:12px}fieldset legend{font-size:1rem;padding:0 .75rem}fieldset legend .icon{width:18px;height:18px}.flex-container{flex-direction:column;gap:12px}.flex-container.options .flex-group label{min-width:90px}.flex-group.right{margin-left:0}.canvas-tools.flex-container{flex-direction:row;flex-wrap:wrap;justify-content:center}.canvas-tools .flex-group{justify-content:center;width:100%}.log-container{min-height:120px;max-height:220px;margin-top:12px}button{width:auto;padding:.625rem 1.25rem;font-size:.875rem}input[type=text],input[type=number],select{max-width:100%;margin-bottom:6px}}body.dark-mode .debug{display:flex!important}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.main>*{animation:fadeIn .5s ease-out forwards}.main>*:nth-child(1){animation-delay:.1s}.main>*:nth-child(2){animation-delay:.2s}.main>*:nth-child(3){animation-delay:.3s}.main>*:nth-child(4){animation-delay:.4s}@media print{body{background:#fff}.main{box-shadow:none}button{display:none}fieldset:before{display:none}}