:root { --ink:#090a0d; --panel:#13141a; --field:#0d0e12; --line:#222530; --text:#f4f4f7; --muted:#8b8f9e; --lime:#c7fe3b; --purple:#a463ff; --danger:#ff5c5c; }
* { box-sizing:border-box; }
html, body { height:100%; margin:0; }
body { background:var(--ink); color:var(--text); font-family:"Lexend",system-ui,sans-serif; display:flex; flex-direction:column; }
header { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; margin-right:auto; }
.brand svg { height:20px; width:auto; }
.brand b { font-size:16px; font-weight:600; }
.brand small { color:var(--muted); font-size:12px; border-left:1px solid var(--line); padding-left:10px; }
button { font:inherit; font-size:13px; padding:7px 14px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--text); cursor:pointer; }
button:hover { border-color:#343846; }
button:disabled { opacity:.5; cursor:default; }
button.primary { background:var(--lime); color:#090b01; border-color:var(--lime); font-weight:600; }
button.stop { background:var(--danger); border-color:var(--danger); color:#fff; font-weight:600; }
main { flex:1; display:grid; grid-template-columns:1fr 1fr; min-height:0; }
.editor { display:flex; flex-direction:column; border-right:1px solid var(--line); min-height:0; min-width:0; }
.label { display:flex; align-items:center; justify-content:space-between; padding:8px 14px; font-size:12px; color:var(--muted);
  background:var(--panel); border-bottom:1px solid var(--line); text-transform:uppercase; letter-spacing:.06em; }
.label button { padding:3px 10px; font-size:12px; text-transform:none; letter-spacing:0; }
#code { flex:1; min-height:0; }
.CodeMirror { height:100%; font:14px/1.6 ui-monospace,Menlo,Consolas,monospace; }
.cm-s-dracula.CodeMirror, .cm-s-dracula .CodeMirror-gutters { background:var(--field) !important; }
.cm-s-dracula .CodeMirror-gutters { border-right:1px solid var(--line); }
.CodeMirror-hints { background:var(--panel); border:1px solid var(--line); font:13px ui-monospace,Menlo,monospace; z-index:50; }
.CodeMirror-hint { color:var(--text); }
li.CodeMirror-hint-active { background:var(--purple); color:#fff; }
.side { display:flex; flex-direction:column; min-height:0; min-width:0; }
#stdin { height:90px; resize:vertical; border:0; outline:0; padding:10px 14px; background:var(--field); color:var(--text);
  font:13px/1.5 ui-monospace,Menlo,monospace; border-bottom:1px solid var(--line); }
#out { flex:1; margin:0; padding:12px 14px; overflow:auto; background:#050608; font:13px/1.55 ui-monospace,Menlo,monospace; white-space:pre-wrap; word-break:break-word; }
#out .err { color:var(--danger); }
#out .info { color:var(--muted); }
footer { display:flex; align-items:center; justify-content:center; gap:8px; padding:8px 16px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
footer svg { height:12px; width:auto; }
footer a { color:var(--lime); text-decoration:none; }
@media (max-width:760px) {
  main { grid-template-columns:1fr; grid-template-rows:1.2fr 1fr; }
  .editor { border-right:0; border-bottom:1px solid var(--line); }
  .brand small { display:none; }
}
#out table { border-collapse:collapse; margin:4px 0 6px; font-size:13px; }
#out th, #out td { border:1px solid var(--line); padding:5px 12px; text-align:left; }
#out th { background:var(--panel); color:var(--lime); font-weight:600; }
#out td { color:var(--text); }
.schema { padding:10px 14px; font:12.5px/1.7 ui-monospace,Menlo,monospace; color:var(--muted); border-bottom:1px solid var(--line); }
.schema b { color:var(--lime); font-weight:600; }
.schema { max-height:150px; overflow:auto; }
.tbl { display:block; width:100%; text-align:left; background:none; border:0; border-radius:6px; padding:4px 8px; margin:0 -8px;
  font:inherit; color:var(--muted); cursor:pointer; }
.tbl:hover { background:var(--panel); color:var(--text); }

button.share-btn { background: #2563eb; color: #fff; border-color: #2563eb; font-weight: 600; }
@media (max-width: 600px) {
  header { gap: 6px; padding: 6px 10px; }
  .brand { display: none !important; }
  button { font-size: 11px; padding: 5px 9px; border-radius: 6px; }
}