:root{--bg:#0b0d10;--panel:#14181d;--panel-2:#1b2026;--border:#2a313a;--border-strong:#3a444f;--text:#e7eaef;--text-dim:#9aa3ad;--accent:#6ee7b7;--accent-2:#38bdf8;--danger:#f87171;--radius:14px}*{box-sizing:border-box}body,html{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}a{color:var(--accent-2);text-decoration:none}button{font:inherit;color:inherit;background:var(--panel-2);border:1px solid var(--border-strong);border-radius:8px;padding:6px 12px;cursor:pointer;transition:background .12s ease,border-color .12s ease}button:hover:not(:disabled){background:#232a31;border-color:#4a5560}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:var(--accent);color:#0b0d10;border-color:var(--accent);font-weight:600}button.primary:hover:not(:disabled){background:#5fd8a5}input[type=text]{font:inherit;color:inherit;background:var(--panel-2);border:1px solid var(--border-strong);border-radius:8px;padding:6px 10px;width:100%}input[type=text]:focus{outline:none;border-color:var(--accent-2)}.app{max-width:980px;margin:0 auto;padding:40px 24px 80px}.toolbox{display:flex;gap:8px;padding:6px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:20px}.tool-tab{flex:1 1;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;background:transparent;border:1px solid transparent;border-radius:10px;text-align:left;cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease}.tool-tab:hover:not(.active){background:var(--panel-2);border-color:var(--border)}.tool-tab.active{background:var(--panel-2);border-color:var(--accent)}.tool-tab .tool-label{font-size:14px;font-weight:600;letter-spacing:-.005em}.tool-tab.active .tool-label{color:var(--accent)}.tool-tab .tool-blurb{font-size:11px;color:var(--text-dim)}.bar-message{margin:-16px 0 16px;padding:0 4px}.bar-message .error,.bar-message .status{margin:0}.app-header{margin-bottom:28px}.app-header h1{margin:0;font-size:22px;font-weight:600;letter-spacing:-.01em}.app-header p{margin:6px 0 0;color:var(--text-dim)}.config-bar{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:24px;flex-wrap:wrap}.config-bar .label{color:var(--text-dim);font-size:13px}.config-bar .folder{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Monaco,Consolas,monospace;font-size:12px;background:var(--panel-2);padding:4px 8px;border-radius:6px;border:1px solid var(--border)}.dropzones{display:grid;grid-template-columns:1fr 1fr;grid-gap:16px;gap:16px;margin-bottom:24px}.dropzones.single{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto}@media (max-width:720px){.dropzones{grid-template-columns:1fr}}.dropzone{position:relative;background:var(--panel);border:2px dashed var(--border-strong);border-radius:var(--radius);padding:24px;min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;transition:border-color .12s ease,background .12s ease}.dropzone:hover{border-color:#5a6573}.dropzone.drag-over{border-color:var(--accent);background:#18221d}.dropzone.has-file{border-style:solid;border-color:var(--border);background:var(--panel-2)}.dropzone .role{position:absolute;top:12px;left:14px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}.dropzone .preview{width:96px;height:96px;display:flex;align-items:center;justify-content:center;background:var(--bg);border-radius:12px;padding:8px;margin-bottom:12px}.dropzone .preview svg{width:100%;height:100%}.dropzone .filename{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Monaco,Consolas,monospace;font-size:12px;color:var(--text);word-break:break-all}.dropzone .hint{color:var(--text-dim);font-size:13px}.dropzone .clear{position:absolute;top:10px;right:10px;background:transparent;border:none;color:var(--text-dim);padding:4px 8px;font-size:14px}.dropzone .clear:hover{color:var(--text)}.preview-section{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:24px;display:grid;grid-template-columns:256px 1fr;grid-gap:24px;gap:24px;align-items:center}@media (max-width:720px){.preview-section{grid-template-columns:1fr}}.preview-section .canvas{width:256px;height:256px;background:var(--bg);border-radius:16px;padding:12px}.preview-section .canvas svg{width:100%;height:100%;display:block}.preview-section .meta{display:flex;flex-direction:column;gap:12px}.preview-section .filename-row{display:flex;gap:8px;align-items:center}.actions{display:flex;gap:10px;flex-wrap:wrap}.error{color:var(--danger);font-size:13px;margin-top:4px}.status{margin-top:4px;min-height:1.2em}.footer-note,.status{color:var(--text-dim);font-size:12px}.footer-note{margin-top:32px;line-height:1.6}kbd{background:var(--panel-2);border:1px solid var(--border);border-radius:4px;padding:1px 6px;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Monaco,Consolas,monospace;font-size:11px}