:root {
  --bg:#0b0f0a; --panel:#0e140d; --code-bg:#000; --fg:#c8e6c9; --dim:#7aa07e; --accent:#39ff14; --border:#1f2a1f;
  --bad:#ff7b72; --hl:rgba(57,255,20,.06); --sel:rgba(57,255,20,.2);
  --s0:#39ff14; --s1:#4fc3f7; --s2:#ffb74d;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--fg); font:14px/1.5 var(--mono); }
a { color:var(--accent); text-decoration:none; }
main { max-width:1200px; margin:0 auto; padding:0 16px 3rem; }
.dim { color:var(--dim); } .grow { flex:1; } .small { font-size:.8rem; }
.top { display:flex; align-items:center; gap:.5rem; padding:.7rem 0; border-bottom:1px solid var(--border); }
.coffee-link { border-bottom:1px dashed currentColor; white-space:nowrap; } .coffee-link:hover { border-bottom-style:solid; }
h1 { font-size:1.4rem; color:var(--accent); margin:1rem 0 .3rem; }
header p { margin:0 0 1rem; }
code { color:var(--accent); }
.banner { padding:.5rem 16px; background:rgba(57,255,20,.1); border-bottom:1px solid var(--accent); }

button, select, .btn, input, textarea { font:inherit; color:var(--accent); background:#000; border:1px solid var(--border); }
button, select, .btn { padding:.3rem .7rem; cursor:pointer; }
button:hover:not(:disabled), .btn:hover:not(.disabled) { border-color:var(--accent); }
button:disabled, select:disabled, .btn.disabled { opacity:.4; cursor:not-allowed; }
select { max-width:100%; }

.panel { border:1px solid var(--border); background:var(--panel); padding:1rem; margin-top:1rem; }
.toolbar, .actions { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.toolbar select { flex:1 1 200px; min-width:0; }
.drop { margin-top:.75rem; padding:.8rem; border:1px dashed var(--border); text-align:center; color:var(--dim); font-size:.85rem; }
.drop.over { border-color:var(--accent); color:var(--accent); }
.tables { margin-top:.6rem; display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; font-size:.85rem; }
.chip { padding:.15rem .5rem; font-size:.8rem; }

.editor-head { display:flex; gap:.5rem; align-items:baseline; margin-top:1rem; font-size:.85rem; }
.editor { height:220px; resize:vertical; overflow:hidden; border:1px solid var(--border); margin:.3rem 0 .7rem; }
.editor .cm-editor { height:100%; }
.actions .export { display:inline-flex; gap:.3rem; align-items:center; }
.status { margin-top:.6rem; min-height:1.4em; font-size:.85rem; }
.error { color:var(--bad); white-space:pre-wrap; margin:.5rem 0; font:inherit; font-size:.85rem; border-left:3px solid var(--bad); padding:.3rem .6rem; }

.hint { margin:.4rem 0; font-size:.85rem; color:var(--dim); }
.hint button { margin-left:.4rem; }
.chart-wrap { margin-top:.8rem; border:1px solid var(--border); background:#000; padding:.6rem; }
.builder { display:flex; flex-wrap:wrap; gap:.4rem .8rem; align-items:center; font-size:.8rem; color:var(--dim); padding-bottom:.5rem; border-bottom:1px solid var(--border); }
.builder label { display:inline-flex; gap:.3rem; align-items:center; }
.builder [hidden], .chart-wrap[hidden] { display:none; }  /* the display rules above must not beat [hidden] */
.builder select, .builder input, .builder button { font-size:.8rem; padding:.15rem .4rem; }
.builder input[type=number] { width:5em; }
.builder .grow-l { flex:1 1 160px; } .builder .grow-l input { flex:1; min-width:0; }
.builder .series { display:flex; flex-wrap:wrap; gap:.3rem .7rem; flex-basis:100%; }
.builder .series label { cursor:pointer; }
.builder .series .sw { display:inline-block; width:.7em; height:.7em; }
.builder-actions { display:flex; gap:.4rem; margin-left:auto; }
.chart-note { margin:.4rem 0 .2rem; min-height:1em; }
.chart-box:empty { display:none; }
svg.chart { width:100%; height:auto; display:block; }

.grid-wrap { margin-top:.8rem; max-height:520px; overflow:auto; border:1px solid var(--border); }
.grid-wrap:has(.grid:empty) { display:none; }
.grid { border-collapse:collapse; width:100%; font-size:13px; }
.grid th, .grid td { padding:.3rem .6rem; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; }
.grid th { position:sticky; top:0; background:var(--bg); color:var(--accent); cursor:pointer; user-select:none; }
.grid th:hover { text-decoration:underline; }
.grid .num { text-align:right; font-variant-numeric:tabular-nums; }
.grid td.null { color:var(--dim); font-style:italic; }
.grid tbody tr:hover { background:var(--hl); }

.guide h3 { margin:.2rem 0 .5rem; color:var(--accent); font-size:1rem; }
.guide ul { margin:0; padding-left:1.2rem; } .guide li { margin:.35rem 0; }

.dlg { background:var(--panel); color:var(--fg); border:1px solid var(--accent); width:min(720px, calc(100vw - 32px)); padding:1rem; }
.dlg::backdrop { background:rgba(0,0,0,.7); }
.dlg h3 { margin:0 0 .3rem; color:var(--accent); }
.dlg input { padding:.25rem .5rem; margin-left:.4rem; }
.dlg textarea { width:100%; margin:.6rem 0; padding:.5rem; color:var(--fg); resize:vertical; }

/* Touch screens (phones, tablets): finger-sized controls, no keyboard/drag hints. */
@media (pointer: coarse) {
  button, select, .btn, .toolbar select { min-height:40px; }
  .builder select, .builder input, .builder button, .chip { min-height:36px; }
  .builder .series label { min-height:36px; }
  .builder input[type=checkbox] { width:20px; height:20px; }
  .drop, .kbd-hint { display:none; }
  .grid th, .grid td { padding:.45rem .6rem; }
}

@media (max-width: 640px) {
  .editor { height:180px; }
  .actions .grow { display:none; }
  h1 { font-size:1.15rem; }
  .panel { padding:.7rem; }
  .builder label:not(.grow-l) { flex:1 1 45%; }
  .builder label select, .builder label input { flex:1; min-width:0; }
  .builder-actions { margin-left:0; flex-basis:100%; }
  .builder-actions button { flex:1; }
}