:root { --bg:#0b0b0e; --card:#121218; --muted:#9aa0a6; --text:#e6e9ef; --brand:#6d8cff; --border:#232333; }
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font:16px/1.5 system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
.wrap{max-width:860px;margin:0 auto;padding:32px 16px}
.head{margin-bottom:16px}
h1{margin:0 0 4px 0;font-weight:700;font-size:28px}
.sub{margin:0;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;margin-top:16px}
.h2{margin:0 0 8px 0;font-size:18px}
.mode{display:flex;gap:8px;margin-bottom:8px}
.tab{padding:8px 12px;border:1px solid var(--border);background:#0f0f14;border-radius:10px;color:var(--text);cursor:pointer}
.tab.active{background:#171725;box-shadow:0 0 0 1px #222}
.label{display:block;margin:12px 0 6px;color:var(--muted);font-size:14px}
.input,.textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#0f0f14;color:var(--text)}
.textarea{resize:vertical}
.btn{margin-top:10px;padding:10px 14px;border:1px solid var(--border);border-radius:10px;background:var(--brand);color:white;cursor:pointer}
.btn.ghost{background:transparent}
.status{margin:12px 0 0 0;color:var(--muted);min-height:1.2em}
.output{white-space:pre-wrap;background:#0b0b10;border:1px dashed #2a2a3a;border-radius:10px;padding:12px;margin-top:10px;max-height:420px;overflow:auto}
.row{display:flex;gap:10px;align-items:center;margin-top:8px}
.muted{color:var(--muted)}
.foot{margin-top:16px;color:var(--muted)}
.hidden{display:none}