:root{--text:#94a3b8;--text-h:#e2e8f0;--text-dim:#64748b;--bg:#0c0e14;--bg-raised:#10131a;--surface:#151820;--surface-hover:#1c1f2a;--border:#1e2230;--border-strong:#2a2e3e;--accent:#818cf8;--accent-dim:#818cf81f;--accent-strong:#6366f1;--mono:ui-monospace, "SF Mono", "Cascadia Code", "Fira Code", Consolas, monospace;--sans:system-ui, -apple-system, "Segoe UI", sans-serif;--radius:10px;--radius-sm:6px;font:14px/1.5 var(--sans);color:var(--text);background:var(--bg);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (prefers-color-scheme:light){:root{--text:#475569;--text-h:#0f172a;--text-dim:#94a3b8;--bg:#f1f5f9;--bg-raised:#f8fafc;--surface:#fff;--surface-hover:#f8fafc;--border:#e2e8f0;--border-strong:#cbd5e1;--accent:#6366f1;--accent-dim:#6366f114;--accent-strong:#4f46e5;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{margin:0}#app{flex-direction:column;height:100svh;display:flex;overflow:hidden}.header{border-bottom:1px solid var(--border);background:var(--bg-raised);flex-shrink:0;align-items:center;gap:12px;padding:10px 16px;display:flex}.header-title{font-family:var(--sans);color:var(--text-h);letter-spacing:-.2px;white-space:nowrap;font-size:14px;font-weight:600}.header-title svg{vertical-align:-2px;opacity:.5;margin-right:6px;display:inline-block}.header-sep{background:var(--border);flex-shrink:0;width:1px;height:16px}.current-type{font-family:var(--mono);color:var(--text-dim);white-space:nowrap;font-size:12px}.header-spacer{flex:1}.filters{flex-shrink:0;align-items:center;gap:4px;display:flex}.filter-pill{font-family:var(--mono);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;background:0 0;border-radius:4px;padding:2px 8px;font-size:11px;transition:all .15s}.filter-pill:hover{border-color:var(--border-strong);color:var(--text)}.filter-pill.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.btn{font-family:var(--sans);border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;white-space:nowrap;padding:4px 12px;font-size:12px;font-weight:500;transition:all .15s}.btn:hover{border-color:var(--border-strong);color:var(--text-h);background:var(--surface-hover)}.btn:active{transform:scale(.97)}.btn-danger:hover{color:#f87171;border-color:#f87171}.layout{flex:1;min-height:0;display:flex}.form-wrap{border-right:1px solid var(--border);flex-direction:column;flex:0 0 340px;display:flex}.panel-label{text-transform:uppercase;letter-spacing:.8px;color:var(--text-dim);border-bottom:1px solid var(--border);background:var(--bg-raised);padding:8px 12px;font-size:11px;font-weight:500}.form-scroll{flex-direction:column;flex:1;gap:14px;padding:16px;display:flex;overflow-y:auto}.field-label{text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim);margin-bottom:4px;font-size:10px;font-weight:500;display:block}.field-input,.field-textarea{width:100%;font-family:var(--mono);border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text-h);outline:none;padding:7px 10px;font-size:12px;transition:border-color .15s}.field-input:focus,.field-textarea:focus{border-color:var(--accent)}.field-input::placeholder,.field-textarea::placeholder{color:var(--text-dim)}.field-textarea{resize:vertical;min-height:80px;line-height:1.5}.field-row{align-items:center;gap:6px;display:flex}.password-toggle{font-family:var(--mono);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;white-space:nowrap;background:0 0;border-radius:4px;flex-shrink:0;padding:2px 8px;font-size:10px;transition:all .15s}.password-toggle:hover{border-color:var(--border-strong);color:var(--text)}.ec-section{border-top:1px solid var(--border);margin-top:auto;padding-top:14px}.ec-pills{gap:4px;display:flex}.ec-pill{font-family:var(--mono);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;background:0 0;border-radius:4px;padding:2px 8px;font-size:10px;transition:all .15s}.ec-pill:hover{border-color:var(--border-strong);color:var(--text)}.ec-pill.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.preview-wrap{flex-direction:column;flex:1;min-width:0;display:flex}#preview{background:var(--surface);flex:1;justify-content:center;align-items:center;min-height:0;display:flex;position:relative;overflow:hidden}#preview:before{content:"";background-image:radial-gradient(circle, var(--border) 1px, transparent 1px);pointer-events:none;background-size:24px 24px;position:absolute;inset:0}#preview canvas{z-index:1;border-radius:4px;position:relative}.preview-hint{pointer-events:none;color:var(--text-dim);opacity:1;z-index:1;justify-content:center;align-items:center;font-size:13px;transition:opacity .2s;display:flex;position:absolute;inset:0}.preview-hint.hidden{opacity:0}.preview-hint svg{opacity:.4;margin-right:6px}.form-scroll::-webkit-scrollbar{width:6px}.form-scroll::-webkit-scrollbar-track{background:0 0}.form-scroll::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}.form-scroll::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}@media (width<=900px){.layout{flex-direction:column}.form-wrap{border-right:none;border-bottom:1px solid var(--border);flex:none}.form-scroll{max-height:300px}.preview-wrap{min-height:280px}.filters{-webkit-overflow-scrolling:touch;overflow-x:auto}.header{flex-wrap:wrap;gap:8px}}@media (width<=600px){.form-wrap{flex:none}.header-title{font-size:13px}}@media (prefers-reduced-motion:reduce){.btn:active{transform:none}.field-input,.field-textarea,.preview-hint{transition:none}}