:root {
  --gap: 12px;
  --radius: 10px;
  --border: 1px solid #e5e7eb;
  --bg: #ffffff;
  --bg-subtle: #fafafa;
  --ink: #0f172a;
  --muted: #6b7280;
  --accent: #111827;
  --ring: 0 0 0 3px rgba(99,102,241,.25);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: ui-sans-serif, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans)}
header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.85);backdrop-filter:saturate(1.2) blur(6px);border-bottom:var(--border)}
header .bar{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;gap:12px;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.brand h1{font-size:1rem;margin:0}
.brand .pill{border:var(--border);padding:2px 8px;border-radius:999px;font-size:.75rem;color:var(--muted)}
main{max-width:1100px;margin:16px auto;padding:0 16px;display:grid;gap:16px;grid-template-columns:280px 1fr;grid-template-areas:"aside content"}
@media (max-width:860px){
  main{grid-template-columns:1fr;grid-template-areas:"aside" "content"}
}
aside{grid-area:aside;display:flex;flex-direction:column;gap:12px}
.card{background:var(--bg-subtle);border:var(--border);border-radius:var(--radius);box-shadow:0 1px 2px rgba(0,0,0,.03)}
.card .pad{padding:12px}
.card h2{margin:0 0 6px 0;font-size:.95rem}
.controls{display:grid;gap:8px}
select,button,input,textarea{font-family:var(--sans);font-size:.95rem}
select,input,textarea{width:100%;border:var(--border);border-radius:8px;padding:8px 10px;background:white}
textarea{min-height:32vh;font-family:var(--mono);line-height:1.35}
button{appearance:none;border:var(--border);background:#111827;color:#fff;border-radius:8px;padding:9px 12px;font-weight:600;cursor:pointer}
button.ghost{background:white;color:#111827}
button.inline{padding:6px 10px;font-size:.9rem}
.toolbar{display:flex;gap:8px;flex-wrap:wrap}
.content{grid-area:content;display:grid;gap:12px}
.section{display:grid;gap:8px}
pre.output{min-height:32vh;max-height:60vh;overflow:auto;border:var(--border);border-radius:8px;background:#0b1128;color:#e7ecff;padding:12px;font-family:var(--mono);font-size:.9rem}
.note{font-size:.85rem;color:var(--muted)}
.toast-wrap{position:fixed;top:12px;right:12px;display:flex;flex-direction:column;gap:8px;z-index:50;pointer-events:none}
.toast{pointer-events:auto;border-radius:10px;padding:10px 12px;color:#fff;box-shadow:0 10px 25px rgba(0,0,0,.25)}
.toast.ok{background:linear-gradient(135deg, rgba(16,185,129,.95), rgba(5,150,105,.95))}
.toast.warn{background:linear-gradient(135deg, rgba(245,158,11,.95), rgba(217,119,6,.95));color:#1b1305}
.toast.err{background:linear-gradient(135deg, rgba(239,68,68,.95), rgba(220,38,38,.95))}
.toast .trow{display:grid;grid-template-columns:20px 1fr auto;gap:8px;align-items:center}
.toast .title{font-weight:700}
.toast button{appearance:none;background:none;border:none;color:inherit;font-weight:700;cursor:pointer;opacity:.85}
.toast button:hover{opacity:1}