:root{
  --bg:#0f172a;
  --card:#111827;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --accent:#22d3ee;
  --green:#10b981;
  --red:#ef4444;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; padding:0; background:linear-gradient(180deg,#0b1021,#0b1328 30%,#0a182e 80%);
  color:var(--text); font-family:var(--sans);
}
header{max-width:980px;margin:24px auto 0;padding:0 16px}
h1{margin:0 0 4px;font-weight:800}
.sub{margin:0;color:var(--muted)}
main{max-width:980px;margin:20px auto;padding:0 16px}
.panel{
  background:rgba(17,24,39,.7);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px; padding:16px 16px 20px; margin:14px 0;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}
label{display:block;margin:8px 0 6px;color:#cbd5e1}
textarea, input, select, button{
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.08);
  background:#0b1222; color:var(--text);
}
textarea#inputText{min-height:140px;resize:vertical}
textarea#outputText{min-height:100px;resize:vertical}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (max-width:720px){ .grid{grid-template-columns:1fr} }
button{cursor:pointer; margin:10px 8px 0 0; width:auto; display:inline-block}
button#runBtn{background:var(--accent);border:none;color:#001018;font-weight:700}
button:disabled{opacity:.5;cursor:not-allowed}
.outwrap{margin-top:16px}
pre#log{
  background:#0a1020;border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:12px; min-height:100px; overflow:auto; font-family:var(--mono); white-space:pre-wrap;
}
footer{max-width:980px;margin:20px auto 40px;padding:0 16px;color:var(--muted);text-align:center}