/* Techni-Cope Systems operator screen. Dark theme with a purple accent. */
:root {
  --bg: #100e16; --panel: #18151f; --panel2: #201c2a; --alt: #322b40; --line: #4a2a7a;
  --accent: #b04dff; --accent2: #dcb3ff; --accent-dark: #6a1fb8; --text: #e8e4f0; --dim: #9d95ab;
  --disabled: #5a5468; --green: #2fbf4a; --red: #ff2020; --blue: #3a8bd6; --well: #0a0810;
  --btn-grad: linear-gradient(#3a3546, #2e2a3a 45%, #211e2a 55%, #131118);
  --btn-on: linear-gradient(#cf8dff, #b04dff 50%, #7f2fd6);
  --font: "DejaVu Sans", system-ui, sans-serif; --mono: "DejaVu Sans Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); font: 13px/1.25 var(--font);
  overflow: hidden; user-select: none; -webkit-user-select: none; }
body { display: flex; flex-direction: column; }
button, input, select, textarea { font: inherit; color: inherit; }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--alt); border-radius: 5px; }

/* header */
#top { height: 40px; display: flex; align-items: center; gap: 18px; padding: 0 12px; background: linear-gradient(#26202f, #100e16);
  border-bottom: 2px solid var(--accent); }
.brand { display: flex; align-items: baseline; gap: 8px; letter-spacing: 2px; }
.brand-main { font-weight: 800; font-size: 20px; color: var(--accent); }
.brand-sub { font-size: 12px; color: var(--dim); letter-spacing: 4px; }
.top-file { flex: 1; text-align: center; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-right { display: flex; align-items: center; gap: 14px; }
.top-vel { font-family: var(--mono); color: var(--dim); } .top-vel #vel { color: var(--text); font-weight: bold; }
.pill { padding: 3px 12px; border-radius: 12px; background: var(--alt); font-weight: bold; letter-spacing: 1px; min-width: 90px; text-align: center;
  border: 1px solid rgba(255,255,255,.25); box-shadow: 0 0 10px var(--alt), inset 0 1px 0 rgba(255,255,255,.2); text-shadow: 0 0 6px rgba(0,0,0,.6); }
.pill.estop { background: var(--red); color: #fff; box-shadow: 0 0 14px var(--red), inset 0 1px 0 rgba(255,255,255,.3); }
.pill.off { background: #555; box-shadow: 0 0 8px #777; }
.pill.idle { background: #2b6b3a; box-shadow: 0 0 12px #2fbf4a, inset 0 1px 0 rgba(255,255,255,.2); }
.pill.run { background: var(--green); color: #000; box-shadow: 0 0 16px var(--green), inset 0 1px 0 rgba(255,255,255,.4); text-shadow: none; }
.pill.pause { background: #d6a400; color: #000; box-shadow: 0 0 16px #ffc400, inset 0 1px 0 rgba(255,255,255,.4); text-shadow: none; }
.pill.busy { background: var(--accent); color: #fff; box-shadow: 0 0 16px var(--accent), inset 0 1px 0 rgba(255,255,255,.3); }
.clock { font-family: var(--mono); color: var(--dim); }

/* main grid */
#main { flex: 1; display: grid; grid-template-columns: 1fr 620px; gap: 6px; padding: 6px; min-height: 0; }
#left { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#panes { flex: 1; min-height: 0; position: relative; }
.pane { position: absolute; inset: 0; display: none; flex-direction: column; min-height: 0; }
.pane.active { display: flex; }
#tabs { display: flex; gap: 4px; margin-top: 6px; }
.tab { flex: 1; height: 30px; background: var(--btn-grad); border: 1px solid var(--accent); border-bottom: 2px solid var(--accent-dark);
  box-shadow: 0 0 8px rgba(176,77,255,.35), inset 0 1px 0 rgba(255,255,255,.08); text-shadow: 0 0 6px rgba(176,77,255,.6);
  border-radius: 6px; color: var(--accent); font-weight: bold; letter-spacing: 1px; cursor: pointer; }
.tab.active { background: var(--btn-on); color: #fff; box-shadow: 0 0 16px var(--accent), inset 0 1px 0 rgba(255,255,255,.35); text-shadow: 0 0 6px rgba(0,0,0,.5); }
.scroll { flex: 1; overflow: auto; min-height: 0; padding: 4px; }

/* side: one unified surface, groups separated by hairlines only */
#side { display: grid; grid-template-columns: 190px 1fr; gap: 0 10px; min-height: 0; background: linear-gradient(var(--panel2), var(--panel));
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.side-col { display: flex; flex-direction: column; gap: 6px; min-height: 0; min-width: 0; }
.group { display: flex; flex-direction: column; gap: 4px; padding: 6px 0 8px; border-bottom: 1px solid var(--alt); }
.group:last-child { border-bottom: none; }
.group.grow { flex: 1; min-height: 0; }
/* panels (tab panes) */
.panel { background: linear-gradient(var(--panel2), var(--panel)); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px 6px;
  display: flex; flex-direction: column; gap: 4px; }
.panel-title { background: var(--accent); color: #fff; font-weight: 800; letter-spacing: 1px; text-align: center; margin: -4px -6px 2px;
  border-radius: 5px 5px 0 0; padding: 2px; font-size: 12px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }

/* buttons */
.btn { background: var(--btn-grad); border: 1px solid var(--accent); border-bottom: 2px solid var(--accent-dark); border-radius: 6px;
  box-shadow: 0 0 8px rgba(176,77,255,.35), inset 0 1px 0 rgba(255,255,255,.08); text-shadow: 0 0 6px rgba(176,77,255,.6);
  transition: box-shadow .12s, text-shadow .12s;
  color: var(--accent); font-weight: bold; padding: 4px 6px; min-height: 36px; cursor: pointer; line-height: 1.15; letter-spacing: .5px; }
.btn:hover { color: var(--accent2); border-color: var(--accent2); box-shadow: 0 0 12px rgba(176,77,255,.6), inset 0 1px 0 rgba(255,255,255,.12); }
.btn:active, .btn.active { background: var(--btn-on); color: #fff; box-shadow: 0 0 16px var(--accent), inset 0 1px 0 rgba(255,255,255,.35); text-shadow: 0 0 6px rgba(0,0,0,.5); }
.btn:disabled, .btn.disabled { color: var(--disabled); border-color: var(--disabled); cursor: default; background: linear-gradient(#2a2a2e, #1a1a1c); box-shadow: none; text-shadow: none; }
.btn.tall { min-height: 40px; }
.btn.small { min-height: 26px; padding: 2px 8px; font-size: 12px; }
.btn.tiny { min-height: 22px; min-width: 22px; padding: 0 4px; }
.btn.accent { color: #ecd6ff; }
.btn.estop.active { background: linear-gradient(#ff6060, #ff2020 50%, #a00); color: #fff; border-color: #ff8080; box-shadow: 0 0 18px var(--red), inset 0 1px 0 rgba(255,255,255,.35); }
.btn.power.active { background: linear-gradient(#5ce07a, #2fbf4a 50%, #1d8a33); color: #000; border-color: #8f8; box-shadow: 0 0 18px var(--green), inset 0 1px 0 rgba(255,255,255,.4); text-shadow: none; }
.btn.danger { border-color: var(--red); color: var(--red); box-shadow: 0 0 8px rgba(255,32,32,.4); text-shadow: 0 0 6px rgba(255,32,32,.6); }
.btn.toggle.active { background: var(--btn-on); color: #fff; box-shadow: 0 0 16px var(--accent), inset 0 1px 0 rgba(255,255,255,.35); }

/* sliders: horizontal, lit track up to the thumb */
.sliders { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 2px 2px 4px; }
.slider { display: flex; flex-direction: column; gap: 2px; }
.slider-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; font-weight: bold; letter-spacing: 1px; color: var(--accent); }
.slider-head span:last-child { font-family: var(--mono); font-size: 13px; color: var(--text); letter-spacing: 0; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; margin: 0; background: transparent; --pct: 50%; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 12px; border-radius: 6px; border: 1px solid #3d3352;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent) var(--pct), transparent var(--pct)),
    repeating-linear-gradient(90deg, #2a2438 0 1px, transparent 1px 10%), #0c0a12;
  box-shadow: inset 0 1px 4px #000, 0 0 8px rgba(176,77,255,.25); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -7px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #f4e8ff, var(--accent) 48%, var(--accent-dark)); border: 2px solid #eadcff;
  box-shadow: 0 0 12px var(--accent), 0 2px 4px #000; }
input[type=range]:active::-webkit-slider-thumb { box-shadow: 0 0 18px var(--accent2), 0 2px 4px #000; }

/* indicators: a box with its name inside, the whole box glows yellow while the signal is active */
.led { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 0 10px; border-radius: 6px;
  background: #2a2a30; border: 1px solid #45454c; color: var(--dim); font-weight: bold; font-size: 12px; letter-spacing: .5px;
  box-shadow: inset 0 0 4px #000; transition: background .1s, box-shadow .1s, color .1s; white-space: nowrap; }
.led.on { background: #ffd23a; border-color: #fff2b0; color: #201800; text-shadow: none;
  box-shadow: 0 0 8px #ffd23a, 0 0 18px rgba(255,210,58,.75), 0 0 32px rgba(255,210,58,.4); }
.led.dot { min-height: 0; width: 14px; height: 14px; padding: 0; border-radius: 50%; }
.leds { display: grid; grid-template-columns: 1fr; gap: 5px; padding: 2px 6px; } .leds .led { min-height: 36px; font-size: 13px; }
.leds.two { grid-template-columns: 1fr 1fr; }
.chkrow { display: flex; align-items: center; gap: 8px; padding: 2px 6px; } .chkrow.right { justify-content: flex-end; }
/* every checkbox is a toggle: grey off, green on */
input[type=checkbox] { -webkit-appearance: none; appearance: none; flex: none; width: 46px; height: 26px; margin: 0; border-radius: 13px; position: relative;
  background: #55554f; border: 1px solid #3a3a36; cursor: pointer; box-shadow: inset 0 1px 3px #000; transition: background .15s, box-shadow .15s; vertical-align: middle; }
input[type=checkbox]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #d0d0c8; box-shadow: 0 1px 3px #000; transition: left .15s; }
input[type=checkbox]:checked { background: var(--green); border-color: #8fe6a0; box-shadow: 0 0 8px rgba(47,191,74,.7), inset 0 1px 3px rgba(0,0,0,.4); }
input[type=checkbox]:checked::after { left: 22px; background: #fff; }
input[type=checkbox]:disabled { opacity: .4; cursor: default; }
input[type=checkbox]:focus { outline: none; }
.plasma-state { margin-top: auto; text-align: center; color: var(--dim); font-family: var(--mono); font-size: 12px; padding: 4px;
  border-top: 1px solid var(--alt); }

/* arc / control */
.arc { display: grid; grid-template-columns: 118px 1fr; align-items: center; gap: 8px; padding: 0 6px 4px; }
.ctrlrow.leds-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.arc-volts { font-family: var(--mono); font-size: 34px; font-weight: bold; border: 2px solid var(--accent-dark); border-radius: 6px;
  text-align: center; padding: 2px; background: var(--well); color: var(--dim); transition: color .15s, text-shadow .15s, box-shadow .15s; }
.arc-volts.lit { color: var(--accent2); border-color: var(--accent); text-shadow: 0 0 6px var(--accent), 0 0 16px var(--accent);
  box-shadow: 0 0 12px var(--accent), inset 0 0 12px rgba(176,77,255,.25); }
.arc-ovr { display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: var(--dim); font-weight: bold; font-size: 14px; }
.group .ctrlrow { padding: 0 6px; min-width: 0; }
.ovr-label { text-align: right; line-height: 1.15; font-size: 13px; }
.ovr-btns { display: flex; align-items: center; gap: 8px; } #hovr-val { font-family: var(--mono); font-size: 22px; min-width: 56px; text-align: center; cursor: pointer; color: var(--text); }
.btn.ovr { width: 48px; height: 48px; min-height: 0; padding: 0; font-size: 12px; }
.ctrl { display: flex; flex-direction: column; gap: 3px; }
.ctrlrow { display: flex; align-items: center; gap: 6px; font-weight: bold; color: var(--dim); font-size: 12px; }
.ctrlrow .sp { flex: 1; }

/* dro */
.dro-top { display: flex; align-items: center; gap: 6px; } .dro-top .sp { flex: 1; }
.wcs { border: 1px solid var(--dim); border-radius: 4px; padding: 6px 8px; color: var(--dim); font-weight: bold; }
.dro-axis { display: grid; grid-template-columns: 52px 30px 1fr 34px; align-items: center; gap: 5px; }
.dro-axis .btn.home { min-height: 44px; font-size: 11px; padding: 2px; }
.dro-axis .btn.home.homed { background: linear-gradient(#5ce07a, #2fbf4a 50%, #1d8a33); color: #000; border-color: #8f8; box-shadow: 0 0 14px var(--green), inset 0 1px 0 rgba(255,255,255,.4); text-shadow: none; }
.axis-letter { font-size: 24px; font-weight: bold; text-align: center; background: var(--alt); border-radius: 4px; height: 44px; line-height: 44px; }
.dro-val { font-family: var(--mono); font-size: 30px; text-align: right; background: var(--well); border: 1px solid var(--accent-dark); border-radius: 5px;
  padding: 2px 8px; height: 44px; line-height: 38px; color: var(--accent2); text-shadow: 0 0 6px var(--accent), 0 0 14px rgba(176,77,255,.7);
  box-shadow: inset 0 0 10px rgba(176,77,255,.15), 0 0 6px rgba(176,77,255,.25); }
.dro-axis.unhomed .dro-val { color: #9a72d0; text-shadow: 0 0 6px rgba(176,77,255,.45); border-color: var(--alt); box-shadow: inset 0 0 10px rgba(176,77,255,.08); }
.dro-abs span:not(:first-child) { color: var(--accent2); text-shadow: 0 0 6px rgba(176,77,255,.7); }
.btn.zero { min-height: 44px; font-family: var(--mono); font-size: 18px; padding: 0; }
.dro-abs { display: grid; grid-template-columns: 70px 1fr 1fr 1fr; font-family: var(--mono); font-size: 11px; color: var(--dim); text-align: right; padding: 0 4px; }
.dro-abs span:first-child { text-align: left; }

/* jogging */
.jog-top { display: flex; gap: 6px; align-items: center; }
.jog-top select { flex: 1; height: 34px; background: var(--btn-grad); border: 1px solid var(--accent); border-radius: 6px; color: var(--accent); font-weight: bold; padding: 0 6px; }
.jog-top .btn { min-width: 70px; }
.jog-grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 4px; min-height: 0; padding: 4px 0;
  justify-items: center; align-items: center; }
.jog { width: 100%; max-height: 100%; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--btn-grad); border: 2px solid var(--accent);
  box-shadow: inset 0 -3px 0 var(--accent-dark), 0 0 10px rgba(176,77,255,.35), 0 2px 4px #000; color: var(--accent); cursor: pointer; touch-action: none; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; line-height: 1; }
.jog i { font-style: normal; font-size: 32px; }
.jog span { font-size: 14px; font-weight: bold; letter-spacing: 1px; }
.jog:hover { color: var(--accent2); border-color: var(--accent2); box-shadow: inset 0 -3px 0 var(--accent-dark), 0 0 16px rgba(176,77,255,.6), 0 2px 4px #000; }
.jog { text-shadow: 0 0 8px rgba(176,77,255,.7); }
.jog:active, .jog.active { background: var(--btn-on); color: #fff; box-shadow: inset 0 3px 6px #3d1070, 0 0 22px var(--accent); text-shadow: 0 0 6px rgba(0,0,0,.5); }
.jog:disabled { color: var(--disabled); border-color: var(--disabled); background: linear-gradient(#2a2a2e, #1a1a1c); box-shadow: none; cursor: default; }
/* + pattern: Y up/down in the middle column, X left/right, Z stacked on the right */
.jog.yplus { grid-row: 1; grid-column: 2; } .jog.yminus { grid-row: 3; grid-column: 2; }
.jog.xminus { grid-row: 2; grid-column: 1; } .jog.xplus { grid-row: 2; grid-column: 3; }
.jog.zplus { grid-row: 1; grid-column: 4; } .jog.zminus { grid-row: 3; grid-column: 4; }
/* main tab option bar */
.mlen { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--dim); font-weight: bold; font-size: 11px; letter-spacing: 1px; padding: 8px 6px; }
.mlen b { font-family: var(--mono); font-size: 18px; color: var(--accent2); text-shadow: 0 0 6px rgba(176,77,255,.7); }
.units { display: inline-flex; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.units button { background: transparent; border: 0; color: var(--dim); font-weight: bold; font-size: 11px; padding: 3px 12px; cursor: pointer; letter-spacing: 1px; }
.row2 .units { display: flex; grid-column: span 2; min-height: 30px; border-radius: 6px; border-color: var(--accent); } .row2 .units button { flex: 1; font-size: 13px; }
.units button.active { background: var(--accent-dark); color: #fff; box-shadow: 0 0 10px var(--accent), inset 0 0 6px rgba(255,255,255,.15); text-shadow: 0 0 6px rgba(255,255,255,.6); }
.dro-unit { margin-left: 6px; }
/* preview */
.preview-wrap { flex: 1; position: relative; background: var(--well); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
#plot { width: 100%; height: 100%; display: block; touch-action: none; }
#plot-home { position: absolute; right: 8px; top: 6px; min-height: 28px; padding: 0 8px; opacity: .7; }
.plot-info { position: absolute; left: 8px; top: 6px; color: var(--dim); font-family: var(--mono); font-size: 12px; pointer-events: none; }

/* status bar */
#job-save[hidden] { display: none; }
#job-save { margin-left: auto; min-height: 22px; padding: 0 10px; font-size: 11px; }
#statusbar { height: 26px; display: flex; align-items: center; gap: 12px; padding: 0 10px; background: #111; border-top: 1px solid var(--alt); font-size: 12px; }
.err { color: #ff6a7a; font-weight: bold; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 60%; }
.last-log { color: var(--dim); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: 1; }

/* settings sheet: one surface, parameters in three columns, hairlines between groups */
.sheet { background: linear-gradient(var(--panel2), var(--panel)); border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; }
.sheet .grp { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--alt); }
.sheet .grp:nth-last-child(-n+3) { border-bottom: none; }
.sheet .form-row { min-height: 34px; } .sheet .form-row span { color: var(--dim); font-weight: bold; }
.io-block { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; padding: 12px 0 4px; border-top: 1px solid var(--alt); }
.io-row { display: grid; grid-template-columns: 24px 200px 110px 110px 110px; align-items: center; gap: 10px; min-height: 34px; }
.io-row.io-head span { color: var(--dim); font-size: 11px; font-weight: bold; letter-spacing: 1px; }
.io-row .io-label { font-weight: bold; color: var(--text); }
.io-row.off .io-label { color: var(--dim); }
.io-row select { height: 30px; width: 80px; background: var(--well); border: 1px solid var(--alt); border-radius: 4px; color: var(--text); padding: 0 6px; }
.io-row select:focus { outline: none; border-color: var(--accent); }
.io-row.x2-row { grid-template-columns: 24px 420px 110px 150px 1fr; }
.calib-row { display: grid; grid-template-columns: 300px repeat(3, 150px); align-items: center; gap: 6px 14px; min-height: 32px; }
.calib-row.calib-head span { color: var(--dim); font-size: 11px; font-weight: bold; letter-spacing: 1px; text-align: right; }
.calib-row.calib-head span:first-child { text-align: left; }
.calib-label { font-weight: bold; color: var(--text); } .calib-label small { color: var(--dim); font-weight: normal; }
.calib-row input { height: 30px; background: var(--well); border: 1px solid var(--alt); border-radius: 4px; padding: 0 8px; color: var(--text); text-align: right; width: 100%; }
.calib-row input:focus { outline: none; border-color: var(--accent); }
.io-block .hint { color: var(--dim); font-size: 11px; padding-top: 6px; }
/* forms / tabs content */
.form { display: flex; flex-direction: column; gap: 6px; padding: 4px; }
.form-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.form-row input[type=number], .form-row input[type=text], .form-row select { width: 140px; height: 30px; background: var(--well); border: 1px solid var(--alt);
  border-radius: 4px; padding: 0 8px; color: var(--text); text-align: right; }
.form-row select { text-align: left; }
.form-row input:focus, .form-row select:focus { outline: none; border-color: var(--accent); }
.gcode-tools { display: flex; gap: 16px; align-items: center; padding: 4px 8px; color: var(--dim); }
.gcode { flex: 1; margin: 0; overflow: auto; background: var(--well); border: 1px solid var(--line); border-radius: 6px; font: 12px/1.35 var(--mono); padding: 6px; user-select: text; }
.gcode .ln { display: block; padding: 0 4px; } .gcode .ln .n { display: inline-block; width: 52px; color: var(--dim); text-align: right; margin-right: 10px; }
.gcode .ln.cur { background: var(--accent); color: #fff; } .gcode .ln.cur .n { color: #fff; }
.gcode .ln.done { color: var(--dim); }

/* warranty bar, lock, change log */
.warranty-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 4px 0 12px; border-bottom: 1px solid var(--alt); }
.warranty-bar .sp { flex: 1; }
.wpill { padding: 4px 14px; border-radius: 12px; font-weight: 800; letter-spacing: 1px; font-size: 12px; border: 1px solid rgba(255,255,255,.25); }
.wpill.active { background: #2b6b3a; color: #dfd; box-shadow: 0 0 12px var(--green); }
.wpill.void { background: var(--red); color: #fff; box-shadow: 0 0 12px var(--red); }
.wpill.expired { background: #555; color: #eee; }
.winfo { color: var(--dim); font-size: 12px; }
.sheet.locked .grp input, .sheet.locked .calib-row input, .sheet.locked .io-row input, .sheet.locked .io-row select { opacity: .45; }
.changelog .log { max-height: 220px; overflow: auto; font-family: var(--mono); font-size: 12px; background: var(--well); border: 1px solid var(--alt); border-radius: 4px; padding: 6px; }
.changelog .le { padding: 2px 4px; white-space: pre-wrap; } .changelog .le .t { color: var(--dim); margin-right: 10px; }
.changelog .le.unlock { color: #ffb020; } .changelog .le.factory { color: var(--accent2); } .changelog .le.activate { color: #8f8; }
.warn-text { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; font-size: 15px; line-height: 1.4; max-width: 560px; }
.warn-text .safety-icon { font-size: 34px; color: #ffb020; text-shadow: 0 0 10px rgba(255,176,32,.7); }
.warn-text b { color: #ffd070; } .warn-text .hint { margin-top: 8px; font-size: 12px; }
/* startup safety acknowledgement */
.safety { position: fixed; inset: 0; background: rgba(6,4,10,.94); display: flex; align-items: center; justify-content: center; z-index: 100; }
.safety-box { width: min(900px, 92vw); background: linear-gradient(var(--panel2), var(--panel)); border: 2px solid var(--accent); border-radius: 10px;
  box-shadow: 0 0 40px rgba(176,77,255,.45); padding: 22px 28px 24px; display: flex; flex-direction: column; gap: 14px; }
.safety-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--alt); padding-bottom: 10px; }
.safety-brand { font-weight: 800; font-size: 22px; letter-spacing: 2px; color: var(--accent); text-shadow: 0 0 10px var(--accent); }
.safety-brand small { font-size: 12px; color: var(--dim); letter-spacing: 4px; margin-left: 8px; }
.safety-title { font-weight: 800; letter-spacing: 2px; color: #ffb020; text-shadow: 0 0 10px rgba(255,176,32,.7); }
.safety-item { display: grid; grid-template-columns: 34px 40px 1fr; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--alt); border-radius: 8px;
  background: var(--well); font-size: 17px; line-height: 1.35; cursor: pointer; }
.safety-item .chk { width: 56px; height: 30px; } .safety-item .chk::after { width: 24px; height: 24px; } .safety-item .chk:checked::after { left: 28px; }
.safety-item .safety-icon { font-size: 30px; color: #ffb020; text-shadow: 0 0 10px rgba(255,176,32,.7); text-align: center; }
.safety-item b { color: #ffd070; }
.safety-item:has(.chk:checked) { border-color: var(--green); box-shadow: 0 0 10px rgba(47,191,74,.35); }
.safety-item:has(.chk:checked) .safety-icon { color: var(--green); text-shadow: 0 0 10px var(--green); }
.safety-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 6px; }
.safety-foot .btn.go { min-width: 220px; font-size: 18px; letter-spacing: 2px; }
.safety-foot .btn.go:disabled { background: linear-gradient(#2a2a2e, #1a1a1c); color: var(--disabled); border-color: var(--disabled); box-shadow: none; text-shadow: none; }
/* modal / toast */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal.hidden, .hidden { display: none !important; }
.modal-box { min-width: 420px; max-width: 80vw; max-height: 85vh; background: var(--panel); border: 2px solid var(--accent); border-radius: 8px; display: flex; flex-direction: column; }
.modal-title { background: var(--accent); color: #fff; font-weight: 800; padding: 6px 10px; border-radius: 6px 6px 0 0; letter-spacing: 1px; }
.modal-body { padding: 12px; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.modal-btns { display: flex; gap: 8px; justify-content: flex-end; padding: 8px 12px 12px; }
.modal-btns .btn { min-width: 110px; }
.file-list { max-height: 55vh; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.file-list .f { padding: 8px 10px; border: 1px solid var(--alt); border-radius: 4px; cursor: pointer; display: flex; justify-content: space-between; }
.file-list .f:hover, .file-list .f.sel { border-color: var(--accent); background: var(--alt); }
.file-list .f.dir { color: var(--accent); }
.file-list .meta { color: var(--dim); font-size: 11px; font-family: var(--mono); }
.mdi-hist { max-height: 160px; overflow: auto; font-family: var(--mono); font-size: 12px; color: var(--dim); }
.mdi-hist div { cursor: pointer; padding: 2px 4px; } .mdi-hist div:hover { color: var(--text); }
.modal-body input[type=text], .modal-body input[type=number] { height: 34px; background: var(--well); border: 1px solid var(--alt); border-radius: 4px; padding: 0 8px; color: var(--text); width: 100%; }
.toast { position: fixed; left: 50%; bottom: 44px; transform: translateX(-50%); background: var(--accent); color: #fff; font-weight: bold; padding: 8px 18px; border-radius: 20px; z-index: 60; }
.toast.err { background: var(--red); color: #fff; }

/* ===== COPE CREATE (FarmFab) ===== */
#cope-root { flex: 1; display: flex; flex-direction: column; min-height: 0; gap: 6px; }
.cope-head { display: flex; align-items: center; gap: 12px; padding: 4px 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.cope-head h2 { margin: 0; font-size: 16px; color: var(--accent); letter-spacing: 1px; flex: 1; }
.steps { display: flex; gap: 6px; }
.step-dot { padding: 4px 10px; border-radius: 12px; background: var(--alt); color: var(--dim); font-size: 11px; font-weight: bold; }
.step-dot.cur { background: var(--accent); color: #fff; } .step-dot.done { background: #2b6b3a; color: #dfd; }
.cope-body { flex: 1; min-height: 0; display: flex; gap: 6px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow: auto; }
.card h3 { margin: 2px 0 4px; font-size: 13px; color: var(--accent); letter-spacing: 1px; border-bottom: 1px solid var(--alt); padding-bottom: 3px; }
.card .hint { color: var(--dim); font-size: 12px; }
.mode-list { display: flex; flex-direction: column; gap: 6px; width: 300px; }
.mode-btn { text-align: left; padding: 10px 12px; background: var(--btn-grad); border: 1px solid var(--alt); border-radius: 6px; color: var(--text); cursor: pointer; }
.mode-btn.sel { border-color: var(--accent); color: var(--accent); background: var(--alt); }
.mode-btn small { display: block; color: var(--dim); font-weight: normal; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; align-content: start; }
.field { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; }
.field label { color: var(--dim); }
.field.bool { justify-content: flex-start; gap: 10px; cursor: pointer; }
.field.bool span { color: var(--text); }
.field input[type=number], .field select, .field input[type=text] { width: 150px; height: 32px; background: var(--well); border: 1px solid var(--alt); border-radius: 4px; padding: 0 8px; color: var(--text); text-align: right; font-size: 14px; }
.field select { text-align: left; }
.field input[type=checkbox] { align-self: flex-start; }
.field .frac { color: var(--dim); font-size: 11px; font-family: var(--mono); min-width: 60px; text-align: right; }
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); }
.field.wide { grid-column: 1 / 3; }
.od-banner { font-size: 26px; font-weight: bold; color: #dff; background: #1e3a55; border: 1px solid var(--blue); border-radius: 6px; padding: 8px 12px; text-align: center; }
.cope-nav { display: flex; justify-content: space-between; gap: 8px; padding: 2px 4px; }
.cope-nav .btn { min-width: 150px; min-height: 40px; }
.btn.go { background: linear-gradient(#5ce07a, #2fbf4a 50%, #1d8a33); color: #000; border-color: #8f8; font-size: 15px; min-height: 48px; box-shadow: 0 0 18px var(--green), inset 0 1px 0 rgba(255,255,255,.4); text-shadow: none; }
.summary { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 12px; } .summary span:nth-child(odd) { color: var(--dim); }
.stick-list { display: flex; flex-direction: column; gap: 3px; max-height: 120px; overflow: auto; }
.stick-list div { padding: 4px 8px; border: 1px solid var(--alt); border-radius: 4px; cursor: pointer; font-size: 12px; }
.stick-list div.sel { border-color: var(--accent); color: var(--accent); }
.mat-sets { display: flex; gap: 6px; align-items: center; }
.mat-sets select { flex: 1; height: 32px; background: var(--well); border: 1px solid var(--alt); border-radius: 4px; color: var(--text); }
.mat-list { height: 150px; overflow: auto; border: 1px solid var(--alt); border-radius: 4px; background: var(--well); }
.mat-list div { padding: 4px 8px; cursor: pointer; font-size: 12px; } .mat-list div.sel { background: var(--accent); color: #fff; }
.mat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.mat-grid label { display: flex; flex-direction: column; font-size: 10px; color: var(--dim); }
.mat-grid input { height: 28px; background: var(--well); border: 1px solid var(--alt); border-radius: 4px; padding: 0 6px; color: var(--text); text-align: right; width: 100%; }
.cope-preview { flex: 1; position: relative; background: var(--well); border: 1px solid var(--alt); border-radius: 6px; min-height: 200px; overflow: hidden; }
.cope-preview canvas { width: 100%; height: 100%; display: block; }
.cope-preview .cap { position: absolute; left: 8px; top: 6px; color: var(--dim); font-family: var(--mono); font-size: 12px; pointer-events: none; }
.zoom-bar { display: flex; gap: 6px; align-items: center; } .zoom-bar .btn { min-width: 44px; min-height: 30px; }
.zoom-bar .st { flex: 1; color: var(--dim); font-size: 12px; text-align: right; }
.parts-table { width: 100%; border-collapse: collapse; font-size: 12px; } .parts-table td, .parts-table th { padding: 3px 6px; border-bottom: 1px solid var(--alt); text-align: left; }
.parts-table input { width: 70px; height: 26px; background: var(--well); border: 1px solid var(--alt); border-radius: 4px; color: var(--text); text-align: right; }
.parts-table select { height: 26px; background: var(--well); border: 1px solid var(--alt); border-radius: 4px; color: var(--text); }
.steps-table { width: 100%; border-collapse: collapse; font-size: 12px; } .steps-table td, .steps-table th { padding: 3px 4px; border-bottom: 1px solid var(--alt); }
.steps-table input { width: 72px; height: 26px; background: var(--well); border: 1px solid var(--alt); border-radius: 4px; color: var(--text); text-align: right; }
.steps-table select { height: 26px; background: var(--well); border: 1px solid var(--alt); border-radius: 4px; color: var(--text); }
.steps-table tr.sel td { background: var(--alt); }
/* assembly: one row per step (only the boxes that step uses), then the 3D view of the finished pipe */
.asm-steps { display: flex; flex-direction: column; gap: 4px; }
.asm-steps { overflow-x: hidden; }
.asm-steps.scroll { max-height: 196px; overflow-y: auto; padding-right: 4px; flex: none; }
.asm-step { display: flex; align-items: center; gap: 8px; height: 36px; flex: none; padding: 0 6px; min-width: 0; overflow: hidden; background: var(--well); border: 1px solid var(--alt); border-radius: 6px; font-size: 12px; }
.asm-step .n { min-width: 22px; height: 22px; border-radius: 11px; background: var(--accent); color: #fff; font-weight: bold; display: flex; align-items: center; justify-content: center; }
.asm-step select, .asm-step input[type=number] { height: 28px; background: var(--panel); border: 1px solid var(--alt); border-radius: 4px; color: var(--text); font-size: 13px; }
.asm-step input[type=number] { width: 62px; text-align: right; }
.asm-step .mini { display: flex; align-items: center; gap: 4px; flex: none; } .asm-step .lbl { color: var(--dim); white-space: nowrap; }
.asm-step .frac { color: var(--dim); font-family: var(--mono); font-size: 10px; min-width: 30px; }
.asm-step input[type=checkbox] { width: 40px; height: 22px; } .asm-step input[type=checkbox]::after { width: 16px; height: 16px; } .asm-step input[type=checkbox]:checked::after { left: 20px; }
.asm-step .dxf-name { color: var(--accent2); font-family: var(--mono); font-size: 11px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asm-step .dup { margin-left: auto; min-height: 28px; min-width: 34px; padding: 0 8px; font-size: 15px; }
.asm-step .del { min-height: 28px; min-width: 34px; padding: 0 8px; }
.asm-3d { flex: 1; min-height: 240px; position: relative; background: var(--well); border: 1px solid var(--alt); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.asm-3d .view { flex: 1; position: relative; min-height: 0; }
.asm-3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.asm-3d .cap { position: absolute; left: 8px; top: 6px; color: var(--dim); font-family: var(--mono); font-size: 12px; pointer-events: none; }
.asm-3d .zoom-bar { padding: 4px 6px; background: var(--panel); border-top: 1px solid var(--alt); }
.radio-row { display: flex; gap: 14px; align-items: center; } .radio-row label { display: flex; align-items: center; gap: 6px; }
.radio-row input { width: 20px; height: 20px; accent-color: var(--accent); }

/* ---------- tutorial: one tip that follows the machine state ---------- */
#btn-tutorial.active { background: var(--btn-on); color: #fff; box-shadow: 0 0 16px var(--accent); }
.tut { position: fixed; z-index: 55; width: 300px; background: var(--panel); border: 2px solid var(--accent); border-radius: 8px;
  padding: 10px 12px 12px; color: var(--text); font-size: 15px; line-height: 1.35; box-shadow: 0 0 22px var(--accent), 0 8px 30px rgba(0,0,0,.6); }
.tut-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tut-step { font-size: 11px; letter-spacing: 3px; color: var(--accent2); font-weight: 800; }
.tut-close { background: none; border: 0; color: var(--dim); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px; }
.tut-close:hover { color: var(--accent2); }
.tut::after { content: ''; position: absolute; width: 0; height: 0; border: 12px solid transparent; }
.tut.left::after { left: 100%; top: var(--ay, 50%); margin-top: -12px; border-left-color: var(--accent); }
.tut.right::after { right: 100%; top: var(--ay, 50%); margin-top: -12px; border-right-color: var(--accent); }
.tut.above::after { top: 100%; left: var(--ax, 50%); margin-left: -12px; border-top-color: var(--accent); }
.tut.below::after { bottom: 100%; left: var(--ax, 50%); margin-left: -12px; border-bottom-color: var(--accent); }
.tut-target { animation: tut-pulse 1.1s ease-in-out infinite; border-radius: 6px; position: relative; z-index: 54; }
@keyframes tut-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--accent), 0 0 18px var(--accent); } 50% { box-shadow: 0 0 0 6px var(--accent2), 0 0 34px var(--accent2); } }
.tut-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.tut-btns .btn.small { min-height: 34px; }
.guide-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.guide-row h3 { flex: 1; margin: 0; }
#cope-guide.active { background: var(--btn-on); color: #fff; box-shadow: 0 0 16px var(--accent); }
.tut.inside::after { display: none; }
.tut-text ul { margin: 0; padding-left: 18px; }
.tut-text li { margin: 0 0 5px; }
.tut-text li:last-child { margin-bottom: 0; }
.fav-list .f { align-items: center; gap: 10px; }
.fav-list .fav-name { flex: 1; font-weight: bold; }
.fav-list .fav-del { min-height: 28px; min-width: 34px; padding: 0 8px; }
.tut-pick p { margin: 0 0 8px; line-height: 1.4; max-width: 520px; }
.tut-pick b { color: var(--accent); }

/* OPEN PROGRAM: one button per USB stick */
.usb-vols { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
#btn-open.usb:not(:disabled) { border-color: var(--accent); }
#cope-material .hint.err { color: #ff5a5a; font-weight: bold; white-space: normal; overflow: visible; text-overflow: clip; max-width: none; cursor: default; line-height: 1.35; margin: 6px 0; }
.btn.go:disabled { background: linear-gradient(#2a2a2e, #1a1a1c); color: var(--disabled); border-color: var(--disabled); box-shadow: none; }

/* job prompt (stick cut / job complete) */
.job-prompt { min-width: 420px; max-width: 620px; }
.job-prompt .hint { white-space: normal; line-height: 1.4; }
.job-prompt .job-line { display: flex; justify-content: space-between; gap: 20px; padding: 6px 0; border-bottom: 1px solid var(--alt); }
.job-prompt .job-line b { color: var(--accent2); font-family: var(--mono); }
.job-prompt .hint { margin-top: 10px; color: var(--dim); }

/* ---------- touch number pad ---------- */
.numpad { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 60; }
.numpad-box { width: 380px; background: var(--panel); border: 2px solid var(--accent); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.7); }
.numpad-label { color: var(--dim); font-size: 14px; letter-spacing: 1px; text-transform: uppercase; min-height: 18px; }
.numpad-display { display: flex; align-items: baseline; justify-content: flex-end; gap: 12px; background: var(--well); border: 1px solid var(--alt); border-radius: 6px; padding: 8px 12px; min-height: 52px; }
.numpad-display #numpad-value { font-family: var(--mono); font-size: 34px; color: var(--text); }
.numpad-display .numpad-frac { color: var(--dim); font-family: var(--mono); font-size: 15px; min-width: 70px; text-align: right; }
.numpad-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.numpad-keys button { height: 64px; font-size: 26px; font-weight: bold; background: var(--btn-grad); color: var(--text); border: 1px solid var(--alt); border-radius: 8px; cursor: pointer; }
.numpad-keys button:active { background: var(--alt); }
.numpad-keys button.fn { font-size: 16px; color: var(--accent2); }
.numpad-keys button.wide { grid-column: span 2; }
.numpad-keys button.ok { background: linear-gradient(#5ce07a, #2fbf4a 50%, #1d8a33); color: #000; border-color: #8f8; font-size: 22px; }
.numpad-cancel { height: 44px; background: none; border: 1px solid var(--alt); border-radius: 8px; color: var(--dim); font-weight: bold; letter-spacing: 1px; cursor: pointer; }

/* ---------- cut recovery (replaces the jog pad while paused): big touch targets ---------- */
.cutrec { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 4px 0; }
.cutrec-title { color: var(--accent2); font-weight: 800; letter-spacing: 2px; text-align: center; font-size: 15px; }
.cutrec-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 8px; flex: 1; min-height: 0; max-height: 360px; }
.cutrec-grid .btn { min-height: 0; height: 100%; font-size: 40px; line-height: 1; padding: 0; }
.cutrec-grid .cr-cancel { font-size: 15px; line-height: 1.15; letter-spacing: 1px; background: linear-gradient(#5ce07a, #2fbf4a 50%, #1d8a33); color: #000; border-color: #8f8; }
.cutrec-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--dim); letter-spacing: 1px; }
.cutrec-row b { color: var(--accent2); font-family: var(--mono); font-size: 16px; }
.cutrec-row input[type=range] { flex: 1; accent-color: var(--accent); height: 28px; }
.cutrec-row.motion { gap: 8px; }
.cutrec-row.motion .btn { flex: 1; min-height: 64px; font-size: 18px; touch-action: none; }
.cutrec-row.motion .btn.active { background: var(--btn-on); color: #fff; box-shadow: 0 0 16px var(--accent); }
.cutrec .hint { font-size: 12px; color: var(--dim); letter-spacing: 0; line-height: 1.3; }

/* power flyout (top right) */
.pwr { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--accent); background: var(--btn-grad); color: var(--accent2); font-size: 18px; line-height: 1; cursor: pointer;
  box-shadow: 0 0 8px rgba(176,77,255,.4); }
.pwr:active, .pwr.open { background: var(--accent-dark); color: #fff; }
.flyout { position: fixed; top: 44px; right: 10px; z-index: 70; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--panel); border: 2px solid var(--accent); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.7); }
.flyout .btn { min-height: 44px; min-width: 170px; }

/* screen lock */
.lockscreen { position: fixed; inset: 0; background: rgba(6,4,10,.97); display: flex; align-items: center; justify-content: center; z-index: 110; }
.lock-box { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 32px; border: 2px solid var(--accent); border-radius: 12px; background: var(--panel); box-shadow: 0 0 40px rgba(176,77,255,.35); }
.lock-title { font-weight: 800; letter-spacing: 3px; color: var(--dim); }
.lock-msg { color: var(--dim); font-size: 13px; min-height: 18px; } .lock-msg.bad { color: var(--red); }
.pinpad { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pin-dots { display: flex; gap: 14px; height: 24px; }
.pin-dots i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--accent); background: transparent; }
.pin-dots i.on { background: var(--accent2); box-shadow: 0 0 10px var(--accent); }
.pin-keys { display: grid; grid-template-columns: repeat(3, 72px); gap: 8px; }
.pin-keys button { height: 60px; font-size: 24px; font-weight: bold; background: var(--btn-grad); color: var(--text); border: 1px solid var(--alt); border-radius: 8px; cursor: pointer; }
.pin-keys button:active { background: var(--alt); } .pin-keys button.fn { font-size: 15px; color: var(--accent2); }