:root{--bg: #0f1724;--card: #0b1220;--accent: #60a5fa;--muted: #9ca3af;--text: #e6eef8;--container-bg: rgba(255, 255, 255, .02);--container-border: rgba(255, 255, 255, .03)}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;background:var(--bg);color:var(--text);height:calc(100vh - 48px);display:flex;align-items:center;justify-content:center;padding:24px}.Card{background:var(--container-bg);border-radius:8px;padding:20px;border:1px solid var(--container-border)}h1{margin:0 0 12px;font-size:20px}.Buttons{display:flex;gap:12px;align-items:center;margin-bottom:12px;flex-wrap:wrap}.Buttons label{display:flex;font-size:14px;gap:10px;justify-content:center;align-items:center}.Buttons select,.Buttons input{padding:2px;border:1px solid #ccc;border-radius:6px;font-size:14px}#InterfaceName,#OutputStyle{padding:6px 8px;border-radius:6px;border:1px solid rgba(255,255,255,.04);background:transparent;color:var(--text);width:140px}#OutputStyle option{color:#000}.Actions{display:flex;gap:8px;align-items:center}button{padding:8px 10px;border-radius:8px;background:linear-gradient(180deg,var(--accent),#3586e6);border:none;color:#fff;cursor:pointer;font-weight:600;box-shadow:0 6px 16px #325aa026}button:active{transform:translateY(1px)}button.secondary{background:transparent;border:1px solid rgba(255,255,255,.04);color:var(--muted);box-shadow:none}.Input-Output{display:flex;gap:12px;margin-top:8px}.Field{flex:1;min-width:300px;background:var(--card);border-radius:8px;padding:12px;border:1px solid rgba(255,255,255,.02)}.Field h3{color:var(--muted);margin:0 0 12px}textarea{width:100%;height:calc(100% - 35px);background:transparent;color:var(--text);border:none;outline:none;resize:vertical;font-size:13px}.Output{width:100%;height:380px;overflow:auto;background:transparent;border:none;color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Roboto Mono,monospace;font-size:13px;white-space:pre-wrap}footer{margin-top:12px;color:var(--muted)}