/* CFD-SPH-BENCH — industrial instrument styling.
   Constraints: dark grey, right angles only, no shadows, monospace, no emoji. */
:root{
  --bg:#0d0d0d;
  --panel:#141414;
  --panel-hd:#191919;
  --line:#2b2b2b;
  --line-hi:#3f3f3f;
  --fg:#bdbdbd;
  --fg-hi:#e8e8e8;
  --fg-dim:#767676;
  --fg-dim2:#565656;
  --accent:#3fc1d3;
  --warn:#e0663c;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"DejaVu Sans Mono","Liberation Mono",Menlo,monospace;
}
*{margin:0;padding:0;box-sizing:border-box;border-radius:0;}
button,input,select,textarea,output,optgroup,option{font-family:inherit;}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:var(--mono);}
body{font-size:12px;color:var(--fg);-webkit-font-smoothing:antialiased;}
canvas#gl{position:fixed;inset:0;width:100%;height:100%;display:block;background:var(--bg);}
canvas#gl.locked{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);inset:auto;}

#topbar{position:fixed;left:0;right:0;top:0;height:24px;display:flex;align-items:center;
  justify-content:space-between;padding:0 8px;background:#111;border-bottom:1px solid var(--line);
  font-size:10px;letter-spacing:.1em;color:var(--fg-dim);white-space:nowrap;overflow:hidden;z-index:20;}
#topbar i{color:#3a3a3a;font-style:normal;padding:0 6px;}
#topbar .tb-r{color:var(--fg-dim);display:flex;align-items:center;gap:8px;}
#topbar button{width:auto;padding:1px 7px;font-size:9px;letter-spacing:.1em;}
#topbar .tb-r #tb-mode{color:var(--accent);}

#left{position:fixed;left:8px;top:32px;bottom:8px;width:266px;display:flex;flex-direction:column;
  gap:8px;z-index:10;pointer-events:none;}
#left .panel{pointer-events:auto;}
#left .spacer{flex:1 1 auto;min-height:8px;}
#right{position:fixed;right:8px;top:32px;bottom:8px;width:274px;display:flex;flex-direction:column;
  gap:7px;overflow-y:auto;overflow-x:hidden;z-index:10;padding-right:2px;}
#right::-webkit-scrollbar{width:8px;}
#right::-webkit-scrollbar-track{background:#101010;}
#right::-webkit-scrollbar-thumb{background:#333;}
#right::-webkit-scrollbar-thumb:hover{background:#454545;}

.panel{background:var(--panel);border:1px solid var(--line);}
.panel>header{font-size:10px;letter-spacing:.14em;color:#9d9d9d;padding:3px 8px;
  background:var(--panel-hd);border-bottom:1px solid var(--line);}
.panel>.body{padding:5px 8px 6px;}

.kv{display:flex;align-items:baseline;justify-content:space-between;gap:8px;line-height:1.6;font-size:11px;}
.kv>span{color:var(--fg-dim);letter-spacing:.04em;}
.kv>b{color:var(--fg-hi);font-weight:400;font-variant-numeric:tabular-nums;white-space:nowrap;}
.kv.big>b{color:#fff;}
.kv.sub>span{padding-left:9px;color:var(--fg-dim2);}
.kv.sub>b{color:#9a9a9a;}
.axis{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.06em;color:var(--fg-dim2);margin-top:3px;}
#spark{display:block;width:100%;height:46px;margin-top:7px;border:1px solid #242424;background:#0f0f0f;}
#ramp{display:block;width:100%;height:10px;border:1px solid #242424;}

.ctl{margin-bottom:6px;}
.ctl:last-child{margin-bottom:2px;}
.ctl-hd{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;
  letter-spacing:.07em;color:var(--fg-dim);margin-bottom:3px;}
.ctl-hd output{color:var(--accent);font-variant-numeric:tabular-nums;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.note{font-size:9px;line-height:1.5;letter-spacing:.05em;color:var(--fg-dim2);
  border-left:1px solid #2f2f2f;padding-left:6px;margin:2px 0 7px;}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:12px;background:transparent;cursor:pointer;display:block;}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:#333;border:0;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:8px;height:12px;margin-top:-5px;background:#8d8d8d;border:0;}
input[type=range]:hover::-webkit-slider-thumb{background:var(--accent);}
input[type=range]::-moz-range-track{height:2px;background:#333;border:0;}
input[type=range]::-moz-range-thumb{width:8px;height:12px;background:#8d8d8d;border:0;border-radius:0;}
input[type=range]:hover::-moz-range-thumb{background:var(--accent);}
select,input[type=number]{width:100%;background:#1a1a1a;color:var(--fg);border:1px solid var(--line-hi);
  font-family:inherit;font-size:11px;padding:3px 4px;}
select:focus,input[type=number]:focus{outline:1px solid var(--accent);}
.chk{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.06em;color:var(--fg-dim);
  margin:0 0 6px;cursor:pointer;}
.chkrow{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.chkrow .chk{margin-bottom:2px;}
.keys{font-size:9px;line-height:1.6;letter-spacing:.04em;color:var(--fg-dim2);margin-top:7px;
  border-top:1px solid #232323;padding-top:5px;}
.keys b{color:#8f8f8f;font-weight:400;}
.chk input{appearance:none;-webkit-appearance:none;width:10px;height:10px;border:1px solid var(--line-hi);background:#1a1a1a;}
.chk input:checked{background:var(--accent);border-color:var(--accent);}

button{font-family:inherit;font-size:10px;letter-spacing:.09em;background:#1d1d1d;color:#cbcbcb;
  border:1px solid var(--line-hi);padding:5px 4px;cursor:pointer;width:100%;}
button:hover:not(:disabled){background:#272727;border-color:#585858;color:#fff;}
button:active:not(:disabled){background:#151515;}
button:disabled{color:#4d4d4d;border-color:#252525;cursor:default;}
button.primary{color:var(--accent);border-color:#2e6b74;}
button.primary:hover:not(:disabled){color:#fff;border-color:var(--accent);background:#17282b;}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:5px;}

.status{font-size:10px;letter-spacing:.08em;color:var(--fg-dim);margin:5px 0 3px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.status.run{color:var(--accent);}
.status.err{color:var(--warn);}
.bar{height:4px;background:#1c1c1c;border:1px solid #2c2c2c;}
.bar>i{display:block;height:100%;width:0;background:var(--accent);}
table#b-res{width:100%;border-collapse:collapse;font-size:10px;margin-top:7px;}
table#b-res td{padding:2px 0;border-top:1px solid #232323;color:var(--fg-dim);letter-spacing:.04em;}
table#b-res td+td{text-align:right;color:var(--fg-hi);font-variant-numeric:tabular-nums;}
table#b-res tr.hi td+td{color:var(--accent);}

#right.busy>.panel{opacity:.42;pointer-events:none;}
#right.busy>#benchpanel{opacity:1;pointer-events:auto;}

#fatal{position:fixed;inset:0;background:rgba(8,8,8,.90);z-index:100;display:flex;
  align-items:center;justify-content:center;}
#fatal[hidden]{display:none;}
#fatal .fbox{width:min(760px,86vw);background:var(--panel);border:1px solid var(--warn);}
#fatal header{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:10px;letter-spacing:.16em;color:var(--warn);padding:4px 4px 4px 8px;
  border-bottom:1px solid var(--warn);}
#fatal header button{width:auto;padding:3px 8px;border-color:var(--warn);color:var(--warn);}
#fatal header button:hover{background:#2a1512;color:#fff;}
#fatal pre{padding:10px;font-family:var(--mono);font-size:11px;line-height:1.55;color:#d8d8d8;
  white-space:pre-wrap;word-break:break-word;max-height:52vh;overflow:auto;}
#fatal .fbtns{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:0 10px 8px;}
#fatal .fhint{font-size:9px;letter-spacing:.08em;color:var(--fg-dim2);padding:0 10px 8px;}
#alert{position:fixed;left:50%;transform:translateX(-50%);bottom:10px;z-index:90;
  display:flex;align-items:center;gap:10px;max-width:66vw;padding:5px 6px 5px 10px;
  background:#1d1512;border:1px solid var(--warn);font-size:10px;letter-spacing:.06em;color:#e6b8a8;}
#alert[hidden]{display:none;}
#alert button{width:auto;padding:3px 7px;border-color:#5a3a2f;color:#e0a08c;}
#alert span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}