:root{
  --bg:#0b1220; --card:#111a2e; --text:#f5f7fb; --muted:#9fb0c3; --border:#22304b; --accent:#7aa2ff;
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--text); font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial}
header{padding:20px}
h1{margin:0 0 6px 0; font-size:22px}
.subtitle{margin:0; color:var(--muted); font-size:14px}
.controls{display:flex; gap:12px; align-items:center; padding:12px 20px; border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.controls label, select{color:var(--muted); font-size:14px}
select, button, textarea{background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:10px}
button{padding:8px 12px; cursor:pointer}
button:hover{border-color:var(--accent)}
.panes{display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:16px 20px}
.pane{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px}
.pane h2{margin:4px 0 10px 0; color:var(--accent); font-size:16px}
textarea{width:100%; height:260px; padding:10px; resize:vertical}
pre{white-space:pre-wrap; min-height:260px; padding:10px; border:1px dashed var(--border); border-radius:10px}