.burger,.close-menu{font-size:1.35rem;line-height:1;cursor:pointer;background:rgba(0,0,0,0);border:1px solid var(--border-color);color:var(--text-color);display:none;border-radius:10px;padding:8px 10px;transition:background .2s ease,border-color .2s ease,transform .1s ease}.burger:hover,.close-menu:hover{background:var(--bg-hover);border-color:color-mix(in oklab, var(--text-color) 25%, var(--border-color))}.burger:active,.close-menu:active{transform:translateY(1px)}html[data-theme=dark] .menu{background:var(--card-bg)}.nav{position:relative}.nav .menu{list-style:none;display:flex;gap:6px;padding:6px;border-radius:12px;background:var(--card-bg)}.nav .menu li a{position:relative;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;text-decoration:none;color:var(--text-color);font-weight:600;font-size:.95rem;transition:background .2s ease,color .2s ease}.nav .menu li a:hover{background:var(--bg-hover)}.nav .menu li a::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:2px;background:var(--accent-color);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;opacity:.85}.nav .menu li a:hover::after,.nav .menu li a:focus-visible::after,.nav .menu li a.active::after{transform:scaleX(1)}@media(max-width: 768px){.burger{display:block;z-index:2100;position:relative}.nav{display:flex;flex-direction:column;justify-content:center;align-items:center;position:fixed;top:0;left:0;right:0;bottom:0;background:color-mix(in oklab, var(--card-bg) 92%, transparent);backdrop-filter:blur(8px);z-index:2000;pointer-events:none;transform:translateX(-100%);transition:transform .35s ease}.nav.show{transform:translateX(0);display:flex;pointer-events:auto}.nav .close-menu{display:block;position:absolute;top:1rem;right:1rem;border:1px solid var(--border-color);border-radius:10px;padding:8px 10px;background:var(--card-bg);color:var(--text-color);cursor:pointer;z-index:2101}.nav .close-menu:hover{background:var(--bg-hover)}.nav .menu{flex-direction:column;list-style:none;padding:1.25rem;margin:0;gap:10px;width:min(92%,520px);border-radius:14px;background:var(--card-bg);box-shadow:0 6px 18px rgba(0,0,0,.15)}.nav .menu li{margin:1rem 0;font-size:1.05rem}.nav .menu li a{color:var(--text-color);text-decoration:none;font-weight:600;font-size:1.15rem;padding:12px 14px;border-radius:12px;border:1px solid var(--border-color);background:var(--card-bg);transition:background .2s ease,transform .1s ease}.nav .menu li a:hover{background:var(--bg-hover);transform:translateY(-1px)}}.dropzone-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:3000;backdrop-filter:blur(6px);background:color-mix(in oklab, var(--bg-color) 70%, transparent);border:2px dashed color-mix(in oklab, var(--text-color) 30%, var(--highlight));outline:9999px solid color-mix(in oklab, var(--bg-color) 45%, transparent);transition:opacity .15s ease,transform .15s ease;opacity:0;transform:scale(0.995)}.dropzone-overlay.is-visible{display:flex;opacity:1;transform:scale(1)}.dropzone-overlay.is-active{border-style:solid;background:color-mix(in oklab, var(--highlight) 12%, var(--bg-color))}.dropzone-overlay .dz-panel{width:min(680px,92vw);max-width:92vw;text-align:center;background:var(--card-bg);color:var(--text-color);padding:clamp(1rem,4vw,2rem);border-radius:1.25rem;box-shadow:0 10px 40px rgba(0,0,0,.15);display:grid;gap:.75rem;pointer-events:none}.dropzone-overlay .dz-icon{font-size:clamp(2.5rem,6vw,4rem);line-height:1;opacity:.9;user-select:none}.dropzone-overlay .dz-title{font-weight:800;font-size:clamp(1.25rem,3.5vw,1.75rem);letter-spacing:.2px}.dropzone-overlay .dz-sub{font-size:.95rem;opacity:.8}.dropzone-overlay .dz-hint{font-size:.85rem;opacity:.7}.dropzone-overlay .dz-badges{display:inline-flex;gap:.4rem;flex-wrap:wrap;justify-content:center;margin-top:.25rem}.dropzone-overlay .dz-badges .badge{font-size:.8rem;padding:.25rem .5rem;border-radius:999px;background:color-mix(in oklab, var(--highlight) 16%, var(--card-bg));color:var(--text-color)}@media(prefers-reduced-motion: reduce){.dropzone-overlay{transition:none}}input[type=text],[type=text].range,.input,input[type=email],[type=email].range,input[type=url],[type=url].range,input[type=number],[type=number].range,input[type=search],[type=search].range,input[type=password],[type=password].range,textarea,select,.select{padding:6px 10px;border:1px solid var(--border-color, #444);border-radius:6px;background:var(--bg-secondary, #222);color:var(--text-color, #fff);font-size:.95rem}select,.select{cursor:pointer;transition:border-color .2s ease,background .2s ease}select:hover,.select:hover{border-color:var(--accent-color, #0af);background:var(--bg-hover, #333)}input:focus,.range:focus,select:focus,textarea:focus,.input:focus,.select:focus{outline:none;border-color:var(--accent-color, #0af);box-shadow:0 0 0 3px color-mix(in oklab, var(--accent-color) 35%, transparent)}input[type=range],.range,[type=range].input{width:100%;cursor:pointer;accent-color:var(--accent-color, #0af);background:rgba(0,0,0,0)}input[type=range]::-webkit-slider-runnable-track,.range::-webkit-slider-runnable-track,[type=range].input::-webkit-slider-runnable-track{height:6px;background:color-mix(in oklab, var(--text-color) 20%, transparent);border-radius:999px}input[type=range]::-webkit-slider-thumb,.range::-webkit-slider-thumb,[type=range].input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-5px;border-radius:50%;background:var(--accent-color, #0af);border:0}input[type=range]::-moz-range-track,.range::-moz-range-track,[type=range].input::-moz-range-track{height:6px;background:color-mix(in oklab, var(--text-color) 20%, transparent);border-radius:999px}input[type=range]::-moz-range-thumb,.range::-moz-range-thumb,[type=range].input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent-color, #0af);border:0}button,input[type=submit],[type=submit].range,[type=submit].input,input[type=button],[type=button].range,[type=button].input{display:inline-block;padding:10px 16px;border:none;border-radius:6px;background:var(--accent-color, #0af);color:#fff;font-size:1rem;font-weight:600;text-align:center;cursor:pointer;transition:background .2s ease,transform .1s ease}#convertBtn{width:100%}button:hover,input[type=submit]:hover,[type=submit].range:hover,[type=submit].input:hover,input[type=button]:hover,[type=button].range:hover,[type=button].input:hover{background:var(--accent-hover, #08c);transform:translateY(-2px)}button:active,input[type=submit]:active,[type=submit].range:active,[type=submit].input:active,input[type=button]:active,[type=button].range:active,[type=button].input:active{transform:translateY(0);background:var(--accent-active, #06a)}button:disabled,input[type=submit]:disabled,[type=submit].range:disabled,[type=submit].input:disabled,input[type=button]:disabled,[type=button].range:disabled,[type=button].input:disabled{background:var(--bg-disabled, #555);color:#aaa;cursor:not-allowed}#outputFormat,#batchFormat{width:100%}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border:none;border-radius:8px;font-size:1rem;font-weight:600;line-height:1.2;cursor:pointer;transition:background .2s ease,transform .1s ease,box-shadow .2s ease}.btn-primary{background:var(--accent-color, #0af);color:#fff}.btn-primary:hover{background:var(--accent-hover, #08c);transform:translateY(-2px)}.btn-primary:active{background:var(--accent-active, #06a);transform:translateY(0)}.btn:disabled{background:var(--bg-disabled, #555);color:#aaa;cursor:not-allowed}.btn-block{width:100%}.form-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:12px 16px;align-items:end}.form-group{display:flex;flex-direction:column;gap:6px}.form-label{font-weight:600;font-size:.9rem}.form-hint{color:var(--text-muted, #aaa);font-size:.85rem;text-align:right}#image-preview{display:flex;align-items:flex-start}#parameters{flex:0 1 clamp(260px,28vw,360px);max-width:clamp(260px,32vw,380px);min-width:clamp(260px,32vw,280px);width:100%;padding:15px;background:var(--color-bg-secondary, #2a2a2a);border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.25);color:var(--text-color, #fff);position:sticky;top:calc(var(--header-height, 72px) + 16px);max-height:calc(100vh - (var(--header-height, 72px) + 32px));overflow-y:auto;align-self:stretch;margin-left:0;min-height:0}#parameters .param-item{margin-bottom:12px}#parameters .param-divider{height:1px;background:hsla(0,0%,100%,.1);margin:16px 0}#parameters .param-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}#parameters .param-heading h3{font-size:.95rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted, #bbb)}#parameters .link-button{background:none;border:none;color:var(--accent-color, #818cf8);font-size:.85rem;cursor:pointer;padding:0;text-decoration:underline}#parameters .link-button:hover{color:var(--accent-hover, #6366f1)}#parameters .param-slider{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}#parameters .param-slider label{grid-column:1/-1;font-size:.85rem}#parameters .param-slider input[type=range]{grid-column:1/-1}#parameters .param-slider .slider-value{font-size:.8rem;color:var(--text-muted, #bbb);justify-self:end}#parameters .param-toggles{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:.85rem}#parameters .param-toggles label{display:inline-flex;align-items:center;gap:6px}#parameters .curves-wrapper{display:flex;flex-direction:column;gap:12px}#parameters .curves-tabs{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:8px}#parameters .curve-tab{background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.12);border-radius:6px;color:inherit;cursor:pointer;font-size:.8rem;padding:6px 8px;text-transform:uppercase;letter-spacing:.06em;transition:background .2s,border-color .2s}#parameters .curve-tab.active{background:rgba(129,140,248,.25);border-color:rgba(129,140,248,.6)}#parameters .curve-tab:hover{border-color:rgba(129,140,248,.4)}#parameters .curve-canvas-box{position:relative;padding:12px;border-radius:10px;background:rgba(0,0,0,.25);border:1px solid hsla(0,0%,100%,.08)}#parameters .curve-canvas-box canvas{width:100%;height:auto;display:block;cursor:crosshair;aspect-ratio:1/1;touch-action:none}#parameters .curves-hint{font-size:.75rem;color:var(--text-muted, #bbb);line-height:1.4}#parameters .tool-group{border:1px solid hsla(0,0%,100%,.08);border-radius:12px;padding:12px 14px;margin-bottom:16px;background:rgba(17,24,39,.35)}#parameters .tool-group .tool-toggle{display:none}#parameters .tool-group .tool-header{display:none}#parameters .tool-group .tool-content{display:block}#parameters .tool-content-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}#parameters .tool-content-heading h3{font-size:.95rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted, #bbb)}#parameters h2{font-size:1.2rem;margin-bottom:12px}.switch{position:relative;display:inline-block;width:50px;height:26px;margin-right:8px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;border-radius:34px;transition:.4s}.slider:before{position:absolute;content:"";height:18px;width:18px;left:4px;bottom:4px;background:#fff;border-radius:50%;transition:.4s}input:checked+.slider{background-color:#4caf50}input:checked+.slider:before{transform:translateX(24px)}.slider-container{margin-top:20px}#imageQuantitySlider{width:100%}.parameters-btn{display:none;position:fixed;bottom:20px;right:20px;padding:12px 18px;border-radius:50%;background:#2a271e;color:#fff;font-size:4.2rem;border:none;cursor:pointer;z-index:1000;box-shadow:0 2px 8px rgba(0,0,0,.25);width:100px;height:100px}#parameters.parameters-panel{transition:transform .3s ease-in-out}#parameters .parameters-header{display:flex;justify-content:space-between;align-items:center}#parameters .parameters-header #closeParameters{display:none}.close-btn{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer}#parameters #imageQuantityValue{width:100%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #444;padding-bottom:12px}@media(max-width: 1024px){#parameters.parameters-panel{position:fixed;top:0;right:0;height:100%;width:80%;max-width:320px;background:var(--color-bg-secondary, #2a2a2a);transform:translateX(100%);z-index:1100;max-height:none;overflow-y:auto}#parameters.parameters-panel.active{transform:translateX(0)}.parameters-btn{display:block}#parameters .parameters-header #closeParameters{display:block}#parameters{padding-bottom:140px}#parameters .tool-group{background:rgba(15,23,42,.9);border:1px solid rgba(129,140,248,.2);margin-bottom:12px}#parameters .tool-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 4px;font-size:.95rem;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;color:#fff;position:relative}#parameters .tool-header:after{content:"";width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s ease}#parameters .tool-header .tool-subtitle{font-size:.7rem;text-transform:none;letter-spacing:.05em;opacity:.7}#parameters .tool-header .link-button{font-size:.75rem;letter-spacing:normal;text-transform:none}#parameters .tool-content{display:none;padding-top:10px}#parameters .tool-content-heading h3{font-size:.85rem}#parameters .tool-content-heading .link-button{font-size:.75rem}#parameters .tool-toggle:checked+.tool-header::after{transform:rotate(-135deg)}#parameters .tool-toggle:checked+.tool-header+.tool-content{display:block}}#qualityContainer{width:100%;margin-top:12px}#qualityContainer .quality-label{display:block;margin-bottom:6px;font-size:.9rem;color:var(--text-color, #fff);font-weight:500}#qualityContainer .quality-info{text-align:right;margin-top:4px;font-size:.85rem;color:var(--text-muted, #aaa)}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.65);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-size:1rem;font-weight:600;z-index:999}.loading-overlay .spinner{width:40px;height:40px;border:4px solid hsla(0,0%,100%,.3);border-top:4px solid var(--accent-color, #0af);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:12px}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}#image-preview{position:relative}.parameters-panel.parameters-inline{display:flex;align-items:flex-end;gap:16px;padding:8px 0;overflow-x:auto;scrollbar-width:thin}.parameters-inline #batchFormat,.parameters-inline #batchQuality,.parameters-inline #batchConvertBtn{width:auto}#batchQualityContainer .quality-label{display:block;margin-bottom:6px;font-weight:500}#batchQualityContainer .quality-info{text-align:right;margin-top:4px;font-size:.85rem;color:var(--text-muted, #aaa)}#batchProgress ul{list-style:none;padding:0;margin:0}.file-row{padding:10px 0;border-bottom:1px solid var(--border-color, #444);display:grid;grid-template-columns:1fr 120px;column-gap:12px;align-items:start}.file-row .top{display:flex;align-items:center;justify-content:space-between;gap:12px}.file-row .thumb-box{grid-column:2;grid-row:1/span 4;align-self:start;justify-self:end}.file-row .thumb{width:120px;height:90px;object-fit:cover;border-radius:8px;border:1px solid var(--border-color, #444);background:var(--card-bg)}.file-row .name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-row .meta{margin-top:4px;font-size:.85rem;color:var(--text-muted, #aaa);display:flex;gap:12px;flex-wrap:wrap}.file-row .bar{width:100%;height:6px;background:#333;border-radius:3px;overflow:hidden;margin-top:8px}.file-row .fill{width:0%;height:100%;background:var(--accent-color, #0af);transition:width .25s ease}.file-row .status{margin-top:6px;font-size:.85rem;color:var(--text-muted, #aaa)}.file-row.done .status{color:#4caf50}.file-row.error .status{color:#f44336}.file-row .details{margin-top:8px;display:none;border-left:2px solid var(--border-color, #444);padding-left:10px;font-size:.85rem;color:var(--text-color, #ddd)}.file-row .toggle{margin-left:auto;font-size:.85rem;cursor:pointer;color:var(--accent-color, #0af)}.file-row.open .details{display:block}@media(max-width: 768px){.file-row{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;row-gap:6px}.file-row .thumb-box{order:1;flex:0 0 48px}.file-row .thumb{width:48px;height:48px;border-radius:6px}.file-row .top{order:2;flex:1 1 calc(100% - 60px)}.file-row .meta,.file-row .bar,.file-row .status,.file-row .details{order:3;flex-basis:100%}}.convert-main{max-width:none;width:100%;margin-top:1px}.convert-main #fileList{width:100%;display:block}.convert-main #batchProgress{background:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;overflow:hidden;width:0;max-height:0;opacity:0;padding:0;border-width:0;transition:width .25s ease,max-height .25s ease,opacity .25s ease,padding .25s ease,border-width .25s ease}.convert-main #batchProgress.has-files{width:100%;max-height:5000px;opacity:1;padding:12px 16px;border-width:1px}.convert-main .controls-row{display:flex;flex-direction:column;align-items:stretch;gap:16px}.convert-main .uploader-block{flex:1 1 auto;min-width:0;width:100%;order:1}.convert-main .parameters-panel{flex:1 1 auto;max-width:none;width:100%;margin-left:0;display:grid;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));gap:14px 18px;align-items:center;justify-content:center;justify-items:center;text-align:center;background:var(--color-bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:12px 16px;order:0}.convert-main #batchFormat,.convert-main #batchQuality,.convert-main #batchConvertBtn{width:100%}.convert-main .parameters-panel .param-item{display:flex;flex-direction:column;gap:8px;align-items:center;width:100%;max-width:320px}.convert-main #batchConvertBtn{width:100%;max-width:320px;padding:10px 16px;align-self:center}@media(max-width: 640px){.convert-main #batchConvertBtn{width:100%}}.convert-main .parameters-panel .param-item select,.convert-main .parameters-panel .param-item input[type=range],.convert-main .parameters-panel .param-item button{width:100%;max-width:320px}.convert-main #batchQualityContainer .quality-info{text-align:center}:root{--bg-color: #ffffff;--text-color: #000000;--card-bg: #f9f9f9;--header-height: 72px;--highlight: #4f46e5;--accent-color: #4f46e5;--accent-hover: #4338ca;--accent-active: #3730a3;--bg-secondary: #ffffff;--bg-hover: #f3f4f6;--border-color: #e5e7eb;--bg-disabled: #e5e7eb;--text-muted: #6b7280;--color-bg-secondary: #f5f5f5}html[data-theme=dark]{--bg-color: #121212;--text-color: #f5f5f5;--card-bg: #1e1e1e;--highlight: #818cf8;--accent-color: #818cf8;--accent-hover: #6366f1;--accent-active: #4f46e5;--bg-secondary: #222222;--bg-hover: #333333;--border-color: #444444;--bg-disabled: #555555;--text-muted: #aaaaaa;--color-bg-secondary: #2a2a2a}html[data-theme=dark] body{background-color:var(--bg-color);color:var(--text-color)}html[data-theme=dark] header,html[data-theme=dark] footer{background:var(--card-bg);box-shadow:0 2px 4px rgba(0,0,0,.6)}html[data-theme=dark] .colors .color-swatch{border:2px solid var(--text-color);box-shadow:0 2px 6px rgba(0,0,0,.8)}html[data-theme=dark] #canvas{border:2px solid var(--text-color);box-shadow:0 2px 6px rgba(0,0,0,.8)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-color);font-family:"Inter",sans-serif;line-height:1.6;display:flex;flex-direction:column;min-height:100vh}header,footer{padding:1rem;background:var(--card-bg);display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 4px rgba(0,0,0,.1)}header{min-height:var(--header-height, 72px)}header h1{font-size:1.2rem}footer{text-align:center;font-size:.8rem}#theme-toggle{border:none;padding:.5rem 1rem;border-radius:8px;cursor:pointer;background:var(--highlight);color:#fff;font-size:.9rem;transition:background .3s}#theme-toggle:hover{background:#3730a3}main{display:flex;flex-direction:column;align-items:stretch;gap:1.5rem;padding:1.5rem;width:1400px;margin:auto;box-sizing:border-box}@media(max-width: 1440px){main{width:min(1300px,100%)}}@media(max-width: 1360px){main{width:min(1200px,100%)}}.uploader{margin-bottom:1.5rem;text-align:center}.uploader .upload-label{display:block;font-size:1rem;margin-bottom:.5rem;font-weight:500}.uploader #image-input{display:inline-block;padding:.4rem}#image-preview{width:100%;display:flex;flex-wrap:nowrap;align-items:flex-start;justify-content:center;gap:1.5rem;padding-bottom:3rem;position:relative}#image-preview #canvas{flex:0 0 auto;border-radius:10px;border:2px solid var(--text-color);box-shadow:0 2px 6px rgba(0,0,0,.1);transition:transform .2s;cursor:crosshair;max-width:100%;margin-top:2px;display:block}#image-preview #canvas:hover{transform:scale(1.02)}#image-preview #canvas.preview-highlight{box-shadow:0 0 0 3px rgba(129,140,248,.45),0 0 22px rgba(129,140,248,.45)}#image-preview .preview-feedback{position:absolute;top:12px;left:50%;transform:translate(-50%, -8px);padding:6px 16px;border-radius:999px;background:rgba(15,23,42,.8);color:var(--text-color);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease}#image-preview .preview-feedback.is-visible{opacity:1;transform:translate(-50%, 0)}@media(max-width: 1024px){#image-preview{flex-wrap:wrap;gap:1rem}}.colors{width:100%;display:grid;grid-template-columns:repeat(auto-fit, 80px);gap:12px;margin:0 auto}.colors .color-swatch{width:100%;max-height:86px;padding-top:100%;border-radius:12px;border:2px solid var(--text-color);position:relative;box-shadow:0 2px 6px rgba(0,0,0,.1);transition:transform .2s;text-shadow:0 0 4px #fff;cursor:pointer}.colors .color-swatch:hover{transform:scale(1.05)}.colors .color-swatch span{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);font-size:.85rem;font-weight:500;color:var(--text-color)}#colorDisplay.color-swatch{margin:20px auto;height:30px}.top-toolbelt{width:100%;margin:0 auto 24px;padding:12px 0;border-top:1px solid hsla(0,0%,100%,.08);border-bottom:1px solid hsla(0,0%,100%,.08)}.top-toolbelt .toolbelt-inner{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}.top-toolbelt .toolbelt-group{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.top-toolbelt .toolbelt-btn{padding:10px 16px;border-radius:999px;border:1px solid hsla(0,0%,100%,.25);background:rgba(15,23,42,.45);color:var(--text-color);font-size:.85rem;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .2s ease}.top-toolbelt .toolbelt-btn:hover{background:rgba(129,140,248,.25);border-color:rgba(129,140,248,.55);transform:translateY(-1px)}.top-toolbelt .toolbelt-btn.primary{background:var(--accent-color, #6366f1);color:#fff;border-color:rgba(0,0,0,0)}.top-toolbelt .toolbelt-btn.primary:hover{background:var(--accent-hover, #4f46e5)}.top-toolbelt .toolbelt-toggle .switch{transform:scale(0.9)}.top-toolbelt .toolbelt-label{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}.top-toolbelt .toolbelt-colors{gap:8px}.top-toolbelt .toolbelt-colors input[type=range]{width:160px}.top-toolbelt .toolbelt-colors #imageQuantityValue{display:flex;justify-content:space-between;width:100%;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;opacity:.7}@media(max-width: 768px){header{flex-wrap:wrap;justify-content:space-between}main{padding:.5rem;max-width:100%}.colors{grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));gap:10px}.colors{grid-template-columns:repeat(auto-fit, minmax(100px, 1fr))}#image-preview #canvas{height:auto;touch-action:none;margin:auto}}