html,body,#root{min-height:100%;margin:0}body{font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{--bg:#111318;--panel:#191c23;--border:#2b2f3a;--text:#e8eaf0;--text-dim:#9aa0ae;--accent:#5b8def;--accent-text:#0a0d14;color:var(--text);background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box}body{background:var(--bg);margin:0}.app{max-width:1100px;margin:0 auto;padding:24px 16px 64px}.app-header h1{margin:0 0 4px;font-size:28px}.app-header p{color:var(--text-dim);margin:0 0 20px}.dropzone{border:2px dashed var(--border);text-align:center;cursor:pointer;color:var(--text-dim);border-radius:12px;padding:28px;transition:border-color .15s,background .15s}.dropzone.drag-over{border-color:var(--accent);background:#5b8def14}.thumb-strip{gap:8px;margin-top:12px;padding-bottom:4px;display:flex;overflow-x:auto}.thumb{background:var(--panel);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;text-overflow:ellipsis;white-space:nowrap;border-radius:8px;flex:none;align-items:center;gap:6px;max-width:160px;padding:6px 10px;font-size:12px;display:flex;overflow:hidden}.thumb.active{border-color:var(--accent);color:var(--text)}.thumb-remove{color:var(--text-dim);font-weight:700}.thumb-remove:hover{color:var(--text)}.main-layout{grid-template-columns:1.3fr 1fr;gap:24px;margin-top:20px;display:grid}@media (width<=800px){.main-layout{grid-template-columns:1fr}}.preview-pane{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px}.preview-compare{background:linear-gradient(45deg,#2a2d36 25%,#0000 25%) -8px 0/16px 16px,linear-gradient(-45deg,#2a2d36 25%,#0000 25%) -8px 0/16px 16px,linear-gradient(45deg,#0000 75%,#2a2d36 75%) 0 0/16px 16px,#1d2026 linear-gradient(-45deg,#0000 75%,#2a2d36 75%) 0 0/16px 16px;border-radius:8px;width:100%;position:relative;overflow:hidden}.preview-layer{width:100%;height:100%;position:absolute;inset:0}.preview-before{object-fit:contain}.preview-after :is(svg){width:100%;height:100%;display:block}.preview-divider{background:var(--accent);pointer-events:none;width:2px;position:absolute;top:0;bottom:0}.compare-slider{width:100%;margin-top:10px}.preview-stats{color:var(--text-dim);margin-top:8px;font-size:13px}.stat-error{color:#e06666}.controls-pane{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px}.mode-toggle,.color-presets,.bg-options,.export-bar,.preset-bar{flex-wrap:wrap;gap:8px;display:flex}.mode-toggle{margin-bottom:14px}.mode-toggle button,.color-presets button,.bg-options button,.export-bar button,.preset-bar button,.batch-bar button{border:1px solid var(--border);color:var(--text);cursor:pointer;background:#21242c;border-radius:8px;padding:8px 12px;font-size:13px}.mode-toggle button.active,.color-presets button.active,.bg-options button.active,.custom-color.active{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}.preset-bar{margin-bottom:16px}.preset-bar button{color:var(--text-dim);font-size:12px}.control-group{flex-direction:column;gap:14px;display:flex}.slider{flex-direction:column;gap:4px;font-size:13px;display:flex}.slider-row{justify-content:space-between;display:flex}.slider-value{color:var(--text-dim)}.slider input[type=range]{width:100%}.checkbox-row{color:var(--text-dim);align-items:center;gap:8px;font-size:13px;display:flex}.background-picker{flex-direction:column;gap:6px;font-size:13px;display:flex}.custom-color{border:1px solid var(--border);border-radius:8px;align-items:center;padding:4px 8px;display:flex}.custom-color input{background:0 0;border:none;width:24px;height:20px;padding:0}.export-bar{margin-top:18px}.batch-bar{margin-top:10px}.batch-bar button,.export-bar button{text-align:center;flex:1}