:root{
  --bg:#0f1115; --panel:#171a21; --line:#262b35; --txt:#e7e9ee; --muted:#9aa3b2;
  --accent:#5b8cff; --accent2:#7c5bff; --code:#11131a; --radius:14px;
  --err:#ff6b6b; --ok:#41d18b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--txt); line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1040px;margin:0 auto;padding:24px 18px 64px}
header h1{font-size:1.9rem;margin:8px 0 6px;letter-spacing:-.02em}
header p.lede{color:var(--muted);margin:0 0 22px;font-size:1.02rem}

/* converter */
.conv{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:12px}
.dir{display:inline-flex;background:#1d212b;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.dir button{background:transparent;border:0;color:var(--muted);border-radius:999px;padding:6px 14px;font-size:.84rem;cursor:pointer;font-weight:600}
.dir button.active{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff}
.opts{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.82rem}
.opts select{background:#1d212b;border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:5px 8px;font-size:.82rem}
.acts{display:flex;gap:8px}

.io{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:760px){.io{grid-template-columns:1fr 1fr}}
.pane{display:flex;flex-direction:column;min-width:0}
.pane-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-size:.8rem;color:var(--muted);font-weight:600}
.pane-btns{display:flex;gap:6px}
.pane textarea{
  width:100%;min-height:340px;background:var(--code);border:1px solid var(--line);border-radius:10px;
  color:#cfe3ff;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem;
  padding:12px;resize:vertical;line-height:1.5;tab-size:2
}
.pane textarea:focus{outline:none;border-color:var(--accent)}
.err{margin-top:12px;background:#2a1417;border:1px solid var(--err);color:#ffb4b4;border-radius:10px;padding:10px 12px;font-family:ui-monospace,monospace;font-size:.8rem;white-space:pre-wrap;word-break:break-word}

/* buttons */
.btn{background:linear-gradient(90deg,var(--accent),var(--accent2));border:0;color:#fff;border-radius:9px;padding:9px 14px;font-size:.85rem;cursor:pointer;font-weight:600}
.btn.sec{background:#1d212b;border:1px solid var(--line);color:var(--txt)}
.btn:active{transform:translateY(1px)}
.mini{background:#1d212b;border:1px solid var(--line);color:var(--txt);border-radius:7px;padding:4px 10px;font-size:.76rem;cursor:pointer;font-weight:600}
.mini:hover{border-color:var(--accent)}

/* content */
section.content{margin-top:48px;max-width:760px}
section.content h2{font-size:1.35rem;margin:34px 0 10px;letter-spacing:-.01em}
section.content h3{font-size:1.05rem;margin:22px 0 6px}
section.content p,section.content li{color:#d3d8e2}
code.inline{background:#1d212b;border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-family:ui-monospace,monospace;font-size:.85em}
pre.sample{background:var(--code);border:1px solid var(--line);border-radius:10px;padding:12px;overflow:auto;font-family:ui-monospace,monospace;font-size:.8rem;color:#cfe3ff}

footer{margin-top:56px;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line);padding-top:18px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#1d212b;border:1px solid var(--accent);color:#fff;padding:10px 16px;border-radius:10px;opacity:0;transition:opacity .2s;pointer-events:none;font-size:.85rem;z-index:10}
.toast.show{opacity:1}