@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700;800&display=swap');
:root{
 --bg:#080c14;--surface:#0f1520;--input:#0a0e18;--border:#1c2940;
 --text:#e2e8f0;--muted:#64748b;--cyan:#00f2ff;--orange:#f59e0b;
}
*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif}
button,input,textarea,select{font:inherit}.container{max-width:920px;margin:auto;padding:28px 16px}
.panel{background:var(--surface);border:1px dashed var(--border);border-radius:10px}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;margin-bottom:20px}
.brand{display:flex;align-items:center;gap:12px;font-family:"JetBrains Mono",monospace}.brand-mark{font-size:30px;color:var(--cyan)}
.brand b{display:block;letter-spacing:.12em}.brand span{display:block;color:var(--muted);font-size:11px;letter-spacing:.35em;margin-top:4px}
.top-actions{display:flex;gap:8px;align-items:center}.badge,.icon-btn{border:1px solid var(--border);background:var(--input);color:var(--cyan);padding:9px 14px;border-radius:5px;font-weight:800}
.icon-btn{cursor:pointer}.status{padding:15px;text-align:center;color:var(--cyan);font:800 14px "JetBrains Mono",monospace;letter-spacing:.15em;margin-bottom:20px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-panel{padding:26px}
h2{font:800 12px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--cyan);margin:0 0 22px}
label{display:block;color:#52657f;font:800 10px "JetBrains Mono",monospace;letter-spacing:.14em;margin:15px 0 7px}
input,textarea,select{width:100%;border:1px dashed var(--border);outline:0;background:var(--input);color:var(--text);border-radius:4px;padding:12px;font-family:"JetBrains Mono",monospace}
textarea{resize:vertical}input:focus,textarea:focus,select:focus{border-color:var(--cyan)}
.row2,.row3{display:grid;grid-template-columns:1fr 1fr;gap:10px}.row3{grid-template-columns:.8fr .8fr 1.8fr;align-items:stretch;margin-top:16px}
button{cursor:pointer}.toggle,.row3 select{background:var(--input);color:var(--text);border:1px dashed var(--border);border-radius:4px;padding:10px;font:800 11px "JetBrains Mono",monospace}
.toggle.active{color:var(--cyan);border-color:var(--cyan)}.primary{background:var(--cyan);border:0;border-radius:4px;color:#061018;font:900 12px "JetBrains Mono",monospace}
.output{min-height:58px;margin-top:18px;padding:16px;display:flex;align-items:center;justify-content:center;border:1px dashed var(--border);background:var(--input);color:#52657f;font:12px "JetBrains Mono",monospace;word-break:break-all}
.preview{margin-top:20px;padding:18px;border:1px dashed var(--border);background:var(--input);border-radius:5px}
.preview small{color:var(--cyan);font:800 10px "JetBrains Mono",monospace;letter-spacing:.12em}
.preview-image{height:190px;margin:12px 0;border:1px dashed var(--border);display:flex;align-items:center;justify-content:center;color:#64748b;background:#0d1420;background-size:cover;background-position:center}
.preview h3{margin:8px 0;font-size:18px}.preview p{margin:0;color:#94a3b8}
.history{margin-top:16px;padding:22px}.history-item{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:12px;border-bottom:1px dashed var(--border);font:12px "JetBrains Mono",monospace}.history-item a{color:var(--cyan);word-break:break-all}
@media(max-width:700px){.grid{grid-template-columns:1fr}.row3{grid-template-columns:1fr}.container{padding:12px}.form-panel{padding:18px}}
[data-theme="light"]{--bg:#f1f5f9;--surface:#fff;--input:#f1f5f9;--border:#dbe3ed;--text:#0f172a}
[data-theme="light"] label{color:#64748b}.theme-note{color:#64748b}