:root{--bg:#f6f7f9;--surface:#fff;--surface-2:#f1f3f6;--border:#e2e5ea;--text:#1f2430;--text-muted:#6b7280;--accent:#2563eb;--accent-hover:#1d4ed8;--accent-soft:#2563eb1a;--danger:#dc2626;--danger-soft:#dc26261a;--success:#16a34a;--shadow-sm:0 1px 2px #1018280f;--shadow-md:0 4px 16px #10182814;--radius:10px;--radius-sm:6px;--sans:system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--mono:ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:var(--sans);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--bg:#0f1115;--surface:#171a21;--surface-2:#1f232c;--border:#2a2f3a;--text:#e6e8ec;--text-muted:#9aa3b2;--accent:#60a5fa;--accent-hover:#93c5fd;--accent-soft:#60a5fa24;--danger:#f87171;--danger-soft:#f8717124;--success:#4ade80;--shadow-sm:0 1px 2px #0006;--shadow-md:0 4px 16px #00000073}}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{min-height:100svh}button{font-family:inherit}code{font-family:var(--mono);background:var(--surface-2);border-radius:4px;padding:1px 5px;font-size:.9em}.app{flex-direction:column;gap:20px;max-width:720px;margin:0 auto;padding:32px 20px 48px;display:flex}.app-header{align-items:center;gap:14px;display:flex}.app-logo{color:#fff;background:linear-gradient(135deg, var(--accent), #7c3aed);width:48px;height:48px;box-shadow:var(--shadow-md);border-radius:12px;flex-shrink:0;place-items:center;display:grid}.app-title{letter-spacing:-.3px;margin:0;font-size:22px;font-weight:700}.app-subtitle{color:var(--text-muted);margin:2px 0 0;font-size:14px}.app-main{flex-direction:column;gap:16px;display:flex}.app-intro{color:var(--text-muted);margin:0;font-size:15px;line-height:1.6}.app-footer{text-align:center;color:var(--text-muted);margin-top:8px;font-size:13px}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:16px}.panel-title{margin:0;font-size:15px;font-weight:600}.tabs{background:var(--surface-2);border-radius:var(--radius-sm);gap:4px;margin-bottom:14px;padding:4px;display:flex}.tab{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:5px;flex:1;padding:8px 10px;font-size:14px;font-weight:500;transition:background .15s,color .15s}.tab:hover:not(:disabled){color:var(--text)}.tab.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}.tab:disabled{opacity:.6;cursor:not-allowed}.svg-textarea{resize:vertical;width:100%;min-height:220px;font-family:var(--mono);color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);outline:none;padding:12px;font-size:13px;line-height:1.5;transition:border-color .15s,box-shadow .15s}.svg-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.svg-textarea:disabled{opacity:.7}.url-input{width:100%;font-family:var(--mono);color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);outline:none;padding:11px 12px;font-size:13px;transition:border-color .15s,box-shadow .15s}.url-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.url-input:disabled{opacity:.7}.field-stack{flex-direction:column;gap:8px;display:flex}.field-toolbar{justify-content:space-between;align-items:center;gap:8px;display:flex}.field-label{color:var(--text-muted);font-size:13px;font-weight:600}.btn-paste{white-space:nowrap}.url-field{align-items:stretch;gap:8px;display:flex}.url-field .url-input{flex:1;min-width:0}.field-hint{color:var(--success);margin:0;font-size:13px}.dropzone{border:2px dashed var(--border);border-radius:var(--radius-sm);text-align:center;cursor:pointer;outline:none;padding:28px 16px;transition:border-color .15s,background .15s}.dropzone:hover,.dropzone:focus-visible,.dropzone.dragging{border-color:var(--accent);background:var(--accent-soft)}.dropzone.disabled{opacity:.6;cursor:not-allowed}.dropzone-icon{color:var(--text-muted);margin-bottom:8px}.dropzone-text,.dropzone-file{flex-direction:column;gap:2px;margin:0;display:flex}.dropzone-text strong,.dropzone-file strong{font-size:15px;font-weight:600}.dropzone-hint{color:var(--text-muted);font-size:13px}.dropzone-error{color:var(--danger);margin:10px 0 0;font-size:13px}.btn{border-radius:var(--radius-sm);cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding:10px 16px;font-size:14px;font-weight:600;text-decoration:none;transition:background .15s,border-color .15s,color .15s,box-shadow .15s;display:inline-flex}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border)}.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}.btn-ghost{background:var(--surface-2);color:var(--text);border-color:var(--border);padding:8px 12px;font-size:13px}.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}.convert-row{justify-content:center;display:flex}.btn-convert{min-width:200px;padding:12px 24px;font-size:15px}.result-head{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px;display:flex}.result-filename{font-family:var(--mono);color:var(--text-muted);font-size:13px}.result-stale{color:var(--text-muted);background:var(--surface-2);border:1px dashed var(--border);border-radius:var(--radius-sm);margin:0 0 12px;padding:8px 12px;font-size:13px}.result-actions{flex-wrap:wrap;gap:10px;margin-bottom:18px;display:flex}.data-uri-block{border-top:1px solid var(--border);padding-top:14px}.data-uri-label{color:var(--text-muted);margin-bottom:6px;font-size:13px;font-weight:600;display:block}.data-uri-row{gap:8px;display:flex}.data-uri-input{min-width:0;font-family:var(--mono);color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);outline:none;flex:1;padding:9px 10px;font-size:12px}.data-uri-input:focus{border-color:var(--accent)}.status{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);align-items:center;gap:8px;padding:10px 14px;font-size:14px;display:flex}.status-idle{color:var(--text-muted)}.status-dot{background:var(--success);border-radius:50%;flex-shrink:0;width:8px;height:8px}.status-working{color:var(--text)}.status-error{color:var(--danger);background:var(--danger-soft);border-color:#0000}.spinner{border:2px solid var(--accent-soft);border-top-color:var(--accent);border-radius:50%;flex-shrink:0;width:16px;height:16px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.info-panel{margin-top:8px}.info-panel .panel-title{margin-bottom:12px}.steps{color:var(--text);flex-direction:column;gap:8px;margin:0;padding-left:20px;font-size:14px;line-height:1.6;display:flex}.steps code{font-family:var(--mono);background:var(--surface-2);border:1px solid var(--border);border-radius:4px;padding:1px 5px;font-size:12px}.connectivity-gate{min-height:100vh;position:relative}.connectivity-app{pointer-events:none;-webkit-user-select:none;user-select:none;filter:grayscale(.6);opacity:.55}.connectivity-overlay{z-index:1000;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0f0f148c;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.connectivity-card{text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:100%;max-width:380px;box-shadow:var(--shadow-md);flex-direction:column;align-items:center;gap:12px;padding:32px 24px;display:flex}.connectivity-card svg{color:var(--accent)}.connectivity-title{margin:0;font-size:20px;font-weight:700}.connectivity-text{color:var(--text-muted);margin:0;font-size:14px;line-height:1.6}.connectivity-card .btn{margin-top:8px}@media (width<=640px){.app{gap:16px;padding:20px 14px 36px}.app-header{gap:12px}.app-logo{border-radius:10px;width:40px;height:40px}.app-title{font-size:19px}.app-subtitle{font-size:13px}.app-main{gap:14px}.app-intro{font-size:14px}.panel{padding:14px}.tabs{gap:3px;padding:3px}.tab{white-space:nowrap;padding:8px 6px;font-size:13px}.svg-textarea{min-height:180px;font-size:16px}.url-input,.data-uri-input{font-size:16px}.convert-row{justify-content:stretch}.btn-convert{width:100%;min-width:0}.btn{min-height:44px}.btn-ghost{min-height:40px}.result-head{flex-wrap:wrap;row-gap:4px}.result-filename{overflow-wrap:anywhere;width:100%}.data-uri-row{align-items:stretch}.data-uri-input{min-width:0}.dropzone{padding:22px 12px}}@media (width<=400px){.app{padding:16px 12px 32px}.tab{padding:8px 4px;font-size:12px}}