/* Laser Maker Studio: a copy of cnc/assets/css/send.css (22 Oct 2026), with the laser's own at the end. */
/* Send to machine (send.php), 18 Oct 2026. Uses the tools stylesheet's colours: --panel, --panel-2, --line,
   --ink, --ink-dim, --accent, --ok, --bad, --warn. */
.send-page .baud { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-dim); }
.send-page .baud select { width: auto; }
.send-page .conn { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.send-page .statechip { display: inline-block; min-width: 92px; text-align: center; padding: 6px 14px; border-radius: 999px;
    font-weight: 700; letter-spacing: .02em; border: 2px solid var(--line); background: var(--panel-2); color: var(--ink); }
.send-page .statechip.idle { border-color: var(--ok); color: var(--ok); }
.send-page .statechip.run, .send-page .statechip.jog, .send-page .statechip.home { border-color: var(--accent); color: var(--accent); }
.send-page .statechip.hold { border-color: #ffd54a; color: #ffd54a; }
.send-page .statechip.alarm, .send-page .statechip.door { border-color: var(--bad); color: var(--bad); }

.send-page .dro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 4px; }
.send-page .dro .axis { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px;
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.send-page .dro b { font-size: 18px; color: var(--ink-dim); }
.send-page .dro em { font-style: normal; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.send-page .dro small { color: var(--ink-dim); font-variant-numeric: tabular-nums; margin-left: auto; }

.send-page .machine-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px; margin-top: 12px; }
@media (max-width: 760px) { .send-page .machine-grid { grid-template-columns: 216px minmax(0, 1fr); gap: 16px; }
.send-page .sendgrid .jogpad { grid-template-columns: repeat(4, 50px); grid-auto-rows: 46px; gap: 5px; }
.send-page .sendgrid .jogopts input, .send-page .sendgrid .jogopts select { width: 96px; }
.send-page .sendgrid .zero .actions button { padding: 7px 10px; }
@media (max-width: 1180px) { .send-page .machine-grid { grid-template-columns: 1fr; } } .send-page .dro em { font-size: 22px; } }
.send-page .jogpad { display: grid; grid-template-columns: repeat(4, 60px); grid-auto-rows: 52px; gap: 6px; }
.send-page .jogb { border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); border-radius: 10px;
    font-weight: 700; font-size: 15px; cursor: pointer; }
.send-page .jogb:hover:not([disabled]) { border-color: var(--accent); }
.send-page .jogb.zb { background: color-mix(in srgb, var(--panel-2) 80%, var(--accent) 20%); }
.send-page .jogb[disabled] { opacity: .4; cursor: not-allowed; }
.send-page .jogdot { display: flex; align-items: center; justify-content: center; color: var(--ink-dim); }
.send-page .jogopts { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.send-page .jogopts label, .send-page .safez { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-dim); }
.send-page .jogopts input, .send-page .jogopts select { width: 120px; }
.send-page .safez input { width: 120px; }

.send-page .jobhead { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.send-page .stage.path { aspect-ratio: 16 / 9; max-height: 560px; box-sizing: border-box; }
.send-page .stage.path canvas { width: 100%; height: 100%; }

/* the number boxes and lists, in the page's colours */
.send-page select, .send-page input[type=number], .send-page input[type=text] {
    background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; font: inherit; }
.send-page select:focus, .send-page input:focus { outline: none; border-color: var(--accent); }
.send-page .jogopts label > span, .send-page .safez > span { white-space: nowrap; }
.send-page .unit { color: var(--ink-dim); font-size: 12px; }

.send-page .progressline { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; flex-wrap: wrap; }
.send-page .progressline .bar { flex: 1 1 260px; height: 12px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; }
.send-page .progressline .bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.send-page button.danger { background: #d9342b; color: #fff; border: 0; border-radius: 10px; padding: 10px 18px; font-weight: 700; cursor: pointer; }
.send-page button.danger[disabled] { opacity: .45; cursor: not-allowed; }
.send-page .ovr { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; }
.send-page .ovr > div { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.send-page .ovr em { font-style: normal; font-weight: 700; min-width: 46px; font-variant-numeric: tabular-nums; }

.send-page .console { height: 220px; overflow: auto; background: #0b1220; color: #cfe3ff; border-radius: 10px; padding: 10px 12px;
    font-size: 12.5px; line-height: 1.45; white-space: pre-wrap; margin-bottom: 10px; }
.send-page .console .tx { color: #8fb3ff; }
.send-page .console .er { color: #ff8a80; }
.send-page .console .ms { color: #ffd54a; }
.send-page #cmd { flex: 1 1 260px; }
.send-page .chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-dim); }

.checklist-ov { position: fixed; inset: 0; z-index: 1050; background: rgba(0, 0, 0, .55); display: flex; align-items: center;
    justify-content: center; padding: 16px; }
.checklist-ov.hidden { display: none; }
.checklist { width: 100%; max-width: 520px; background: var(--card-bg, #13233a); color: var(--text, #e8eef7); border: 1px solid var(--border, #2a3d5a);
    border-radius: 14px; padding: 18px 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); }
.checklist h3 { font-size: 18px; margin: 0 0 12px; }
.checklist label { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; line-height: 1.35; cursor: pointer; }
.checklist label input { margin-top: 3px; }
.send-page .spin-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-right: 6px;
    vertical-align: 0; animation: sendpulse 1s ease-in-out infinite; }
@keyframes sendpulse { 50% { opacity: .25; transform: scale(.7); } }
.send-page button.primary[disabled] { opacity: .5; cursor: not-allowed; }

/* Live / Simulator (19 Oct 2026) */
.send-page .modeswitch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 3px;
    background: var(--panel-2); margin-bottom: 12px; }
.send-page .modeswitch button { border: 0; background: transparent; color: var(--ink-dim); padding: 7px 16px; border-radius: 999px;
    font-weight: 700; cursor: pointer; font: inherit; font-weight: 700; }
.send-page .modeswitch button[aria-checked="true"] { background: var(--accent); color: #fff; }
.send-page .modeswitch button[data-mode="sim"][aria-checked="true"] { background: #b26cff; }
.send-page .modeswitch button[disabled] { opacity: .45; cursor: not-allowed; }
.send-page .simbanner { position: sticky; top: 8px; z-index: 20; margin: 0 0 14px; padding: 8px 14px; border-radius: 10px;
    background: #b26cff; color: #fff; text-align: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.send-page .simbanner.hidden { display: none; }

/* Your machine */
.send-page .machinecard > summary { list-style: none; cursor: pointer; }
.send-page .machinecard > summary::-webkit-details-marker { display: none; }
.send-page .machinecard > summary h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 0; }
.send-page .machinecard[open] > summary h2 { margin-bottom: 12px; }
.send-page .machinecard > summary h2 .est { font-size: 13px; font-weight: 400; margin: 0; }
.send-page .setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.send-page .setup-grid label { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; font-size: 13px; color: var(--ink-dim); }
.send-page .setup-grid input, .send-page .setup-grid select { width: 100%; box-sizing: border-box; }
.send-page .revrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--ink-dim); }
.send-page .revrow > span { flex: 1 1 260px; }
.send-page .revrow .chk { font-weight: 700; color: var(--ink); }

/* the job: a file or the editor (19 Oct 2026) */
.send-page .jobsrc button[aria-checked="true"] { background: var(--accent); }
.send-page .gced { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #0b1220; height: 340px; }
.send-page .gced:focus-within { border-color: var(--accent); }
.send-page .gced-nums { margin: 0; padding: 10px 8px 10px 10px; min-width: 44px; text-align: right; color: #5d7598; background: #0e182b;
    font: 13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; overflow: hidden; user-select: none; white-space: pre; }
.send-page #ed { flex: 1 1 auto; margin: 0; border: 0; outline: none; resize: none; padding: 10px 12px; background: transparent; color: #cfe3ff;
    font: 13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre; overflow: auto; tab-size: 4; }
.send-page #ed::placeholder { color: #4d6283; }
.send-page #ed-name { width: 150px; }

/* the job on the bed */
.send-page .fitrow { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 12px; flex-wrap: wrap; }
.send-page #bedmap { width: 220px; height: 220px; border-radius: 10px; border: 1px solid var(--line); flex: 0 0 auto; }
.send-page #j-fit { flex: 1 1 260px; margin: 0; }

/* ---- two halves (19 Oct 2026): the controls on the left, a tab at a time; the preview on the right ---------------- */
.send-page.sendwide { max-width: 1900px; margin: 0 auto; padding: 10px 16px 16px; box-sizing: border-box; }
.send-page .sendgrid { display: grid; grid-template-columns: minmax(400px, 540px) minmax(0, 1fr); gap: 16px; align-items: start; }
.send-page .leftpane, .send-page .rightpane { height: max(420px, calc(100vh - var(--gridtop, 120px) - var(--footh, 0px) - 18px)); box-sizing: border-box;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; min-width: 0; }
.send-page .leftpane { overflow: hidden; }
.send-page .rightpane { padding: 12px; }
.send-page .simbanner { position: static; margin: 0; border-radius: 0; box-shadow: none; padding: 6px 12px; }

/* the bar that never goes away */
.send-page .livebar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--line);
    background: var(--panel-2); }
.send-page .livebar .statechip { min-width: 72px; padding: 4px 10px; font-size: 13px; }
.send-page .liveaxes { display: flex; gap: 6px; align-items: baseline; font-variant-numeric: tabular-nums; font-size: 13px; }
.send-page .liveaxes b { color: var(--ink-dim); font-weight: 600; }
.send-page .liveaxes em { font-style: normal; font-weight: 700; min-width: 58px; color: var(--ink); }
.send-page .livebtns { display: flex; gap: 6px; margin-left: auto; }
.send-page button.danger.sm { padding: 6px 14px; font-size: 14px; }
.send-page #alarm { margin: 8px 12px 0; }

/* the tabs */
.send-page .sendtabs { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.send-page .sendtabs button { border: 0; background: transparent; color: var(--ink-dim); padding: 8px 2px 7px; cursor: pointer; font: inherit;
    font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 3px; border-bottom: 3px solid transparent; position: relative; }
.send-page .sendtabs button i { font-size: 15px; }
.send-page .sendtabs button:hover { color: var(--ink); }
.send-page .sendtabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 700; }
.send-page .sendtabs button.attn::after { content: ''; position: absolute; top: 5px; right: calc(50% - 16px); width: 8px; height: 8px;
    border-radius: 50%; background: #ffb020; box-shadow: 0 0 0 2px var(--panel); }
.send-page .tabpanes { flex: 1 1 auto; overflow: auto; min-height: 0; }
.send-page .tabpane { padding: 14px; display: none; }
.send-page .tabpane.on { display: block; }
.send-page .panehead { font-size: 16px; font-weight: 600; margin: 0 0 12px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.send-page .panehead .est { font-size: 13px; font-weight: 400; margin: 0; }
.send-page .helplist { padding-left: 18px; margin: 0; } .send-page .helplist li { margin-bottom: 8px; }
.send-page .needconn, .send-page .needjob { display: none; }
.send-page.offline .needconn, .send-page.nojob .needjob { display: block; }
.send-page .machine-grid { grid-template-columns: 216px minmax(0, 1fr); gap: 16px; }
.send-page .sendgrid .jogpad { grid-template-columns: repeat(4, 50px); grid-auto-rows: 46px; gap: 5px; }
.send-page .sendgrid .jogopts input, .send-page .sendgrid .jogopts select { width: 96px; }
.send-page .sendgrid .zero .actions button { padding: 7px 10px; }
@media (max-width: 1180px) { .send-page .machine-grid { grid-template-columns: 1fr; } }
.send-page .dro .axis { padding: 8px 10px; }
.send-page .dro em { font-size: 22px; }
.send-page .gced { height: max(220px, calc(100vh - var(--gridtop, 120px) - var(--footh, 0px) - 406px)); }
.send-page .console { height: max(220px, calc(100vh - var(--gridtop, 120px) - var(--footh, 0px) - 256px)); }

/* the preview fills the right half */
.send-page #job-info:not(.hidden) { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.send-page .rightpane .jobhead { margin: 0 0 10px; }
.send-page .rightpane .stage.path { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; max-height: none; margin: 0; }
.send-page .rightpane .progressline { margin: 10px 0 4px; }
.send-page .prevempty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    color: var(--ink-dim); border: 2px dashed var(--line); border-radius: var(--radius); }
.send-page .prevempty i { font-size: 42px; margin-bottom: 10px; opacity: .6; }

/* narrow screens: one above the other, the page scrolls */
@media (max-width: 999px) {
    .send-page .sendgrid { grid-template-columns: 1fr; }
    .send-page .leftpane, .send-page .rightpane { position: static; height: auto; }
    .send-page .rightpane { height: 70vh; }
    .send-page .gced { height: 300px; } .send-page .console { height: 260px; }
    .send-page .sendtabs button span { font-size: 11px; }
}

/* the G-code help popup (19 Oct 2026, assets/js/gcode-help.js) */
.gch-ov { position: fixed; inset: 0; z-index: 1060; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.gch-ov.hidden, .gch-ov .hidden { display: none !important; }
.gch { width: 100%; max-width: 980px; height: min(88vh, 900px); display: flex; flex-direction: column; background: var(--card-bg, #13233a);
    color: var(--text, #e8eef7); border: 1px solid var(--border, #2a3d5a); border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); }
.gch-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px 8px; flex-wrap: wrap; }
.gch-head h3 { font-size: 18px; margin: 0; white-space: nowrap; }
.gch-find { flex: 1 1 240px; background: var(--card-muted-bg, #0f1b2d); color: inherit; border: 1px solid var(--border, #2a3d5a); border-radius: 8px; padding: 7px 10px; font: inherit; }
.gch-find:focus { outline: none; border-color: var(--primary, #2f8cff); }
.gch-x { border: 0; background: transparent; color: inherit; font-size: 20px; cursor: pointer; padding: 2px 8px; opacity: .8; }
.gch-x:hover { opacity: 1; }
.gch-note { margin: 0; padding: 0 18px 10px; font-size: 12.5px; color: var(--text-muted, #9fb3cc); border-bottom: 1px solid var(--border, #2a3d5a); }
.gch-body { overflow: auto; padding: 6px 18px 18px; flex: 1 1 auto; min-height: 0; }
.gch-group h4 { font-size: 14px; margin: 16px 0 6px; color: var(--text-muted, #9fb3cc); text-transform: uppercase; letter-spacing: .04em; }
.gch-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) minmax(0, 300px); gap: 12px; align-items: start; padding: 9px 0;
    border-top: 1px solid var(--border, #2a3d5a); font-size: 13.5px; line-height: 1.4; }
.gch-row.gch-tpl { grid-template-columns: minmax(0, 1fr); }
.gch-code { font: 700 14px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; color: #8fd1ff; }
.gch-no .gch-code, .gch-no .gch-what { opacity: .7; }
.gch-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #5a2a2a; color: #ffb4a8; }
.gch-badge.page { background: #2a3f5a; color: #a8d4ff; }
.gch-ex pre, .gch-prog { margin: 0 0 6px; padding: 7px 9px; border-radius: 8px; background: #0b1220; color: #cfe3ff;
    font: 12.5px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre; overflow-x: auto; }
.gch-prog { margin-top: 8px; max-height: 260px; overflow: auto; }
.gch-btns { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.gch-tpl .gch-btns { margin-left: 10px; vertical-align: middle; }
.gch-btns button { border: 1px solid var(--border, #2a3d5a); background: var(--card-muted-bg, #0f1b2d); color: inherit; border-radius: 7px;
    padding: 3px 9px; font-size: 12.5px; cursor: pointer; }
.gch-btns button:hover { border-color: var(--primary, #2f8cff); }
.gch-btns .gch-ins { background: var(--primary, #2f8cff); border-color: var(--primary, #2f8cff); color: #fff; }
.gch-empty { padding: 20px; text-align: center; color: var(--text-muted, #9fb3cc); }
@media (max-width: 760px) { .gch-row { grid-template-columns: 70px minmax(0, 1fr); } .gch-row .gch-ex { grid-column: 1 / -1; } }

/* the live view (19 Oct 2026) and the chip buttons */
.send-page #live-view:not(.hidden) { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.send-page .rightpane #live-view .stage.path { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; max-height: none; margin: 0 0 8px; }
.send-page .rightpane #live-view .stage.path canvas { width: 100%; height: 100%; }
.send-page .chipbtn { cursor: pointer; font: inherit; color: inherit; }
.send-page .chipbtn:hover { border-color: var(--accent); }

/* zoom on both previews (19 Oct 2026) */
.send-page .rightpane .stage.path { position: relative; }
.send-page .rightpane .stage.path canvas { cursor: grab; touch-action: none; }
.send-page .rightpane .stage.path canvas.grabbing { cursor: grabbing; }
.send-page .zoombar { position: absolute; top: 10px; left: 10px; display: flex; gap: 4px; z-index: 2; }
.send-page .zoombar button { border: 1px solid var(--line); background: color-mix(in srgb, var(--panel-2) 88%, transparent); color: var(--ink);
    border-radius: 7px; min-width: 30px; height: 28px; padding: 0 9px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.send-page .zoombar button:hover { border-color: var(--accent); }
.send-page .zoombar button.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Move on the preview (19 Oct 2026) */
.send-page .zoombar .mvbtn { margin-left: 6px; }
.send-page .zoombar .mvbtn.on { background: #b26cff; border-color: #b26cff; }
.send-page .zoombar button[disabled] { opacity: .45; cursor: not-allowed; }
.send-page .rightpane .stage.path canvas.moving { cursor: crosshair; }
.send-page .movebar { position: absolute; bottom: 26px; left: 10px; max-width: calc(100% - 132px); z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
    padding: 5px 8px; border-radius: 9px; font-size: 12.5px; background: rgba(178,108,255,.92); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.send-page .movebar.hidden { display: none; }
.send-page .movebar.cutting { background: rgba(217,95,20,.95); }
.send-page .movebar label { display: inline-flex; align-items: center; gap: 5px; margin: 0; }
.send-page .movebar input { width: 78px; padding: 2px 6px; border-radius: 6px; border: 0; color: #111; background: #fff; }
.send-page .movebar .mvstop { border: 0; border-radius: 7px; padding: 4px 10px; font: inherit; font-weight: 700; background: #fff; color: #b3261e; cursor: pointer; }
.send-page .movebar .mvstate { font-style: italic; opacity: .9; }
.send-page .movebar .mvhelp { flex-basis: 100%; opacity: .9; font-size: 11.5px; }
.send-page .movebar .mvstate.refused { font-style: normal; font-weight: 700; background: #b3261e; color: #fff; padding: 2px 8px; border-radius: 6px; }

/* Draw, then cut (19 Oct 2026) */
.send-page .drawgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px 12px; margin: 10px 0; }
.send-page .drawgrid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-dim); margin: 0; }
.send-page .drawgrid .wide { grid-column: 1 / -1; }
.send-page .drawgrid input, .send-page .drawgrid select { width: 100%; box-sizing: border-box; }
.send-page .drawgrid .lbl { display: block; font-size: 13px; color: var(--ink-dim); margin-bottom: 4px; }
.send-page .drawhow { margin: 0; }
.send-page .drawhow button[aria-checked="true"] { background: var(--accent); }
.send-page .sidepick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.send-page .sidepick label { flex-direction: row; align-items: flex-start; gap: 7px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; color: var(--ink); background: var(--panel-2); }
.send-page .sidepick label:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.send-page .sidepick label.off { opacity: .4; cursor: not-allowed; }
.send-page .sidepick small { display: block; color: var(--ink-dim); font-size: 11.5px; line-height: 1.25; }
.send-page .sidepick input { margin-top: 3px; width: auto; flex: 0 0 auto; }
.send-page .zoombar .drawbtn.on { background: #1fa37a; border-color: #1fa37a; color: #fff; }
.send-page .rightpane .stage.path canvas.drawing { cursor: crosshair; }
.send-page .revnow { flex-basis: 100%; font-size: 12.5px; color: var(--ink-dim); }
.send-page .revnow.ok { color: var(--ok); }
.send-page .revnow.warn { color: #ffb020; font-weight: 600; }
.send-page .boardat { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-dim); margin: 12px 0 0; }
.send-page .boardat select { width: 100%; }
.send-page .limrow { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.send-page .limrow .lbl { font-size: 13px; color: var(--ink-dim); }
.send-page .limrow .chk { align-items: flex-start; color: var(--ink); }
.send-page .limrow .chk input { margin-top: 3px; }
/* Controls tab: "Let me move below X0 and Y0" (25 Oct 2026), under the jog pad */
.send-page #jogBelow-row { display: flex; align-items: flex-start; margin-top: 10px; color: var(--ink); }
.send-page #jogBelow-row input { margin-top: 3px; }
.send-page #jogBelow-row small { display: block; color: var(--ink-dim); }
.send-page .limrow small { display: block; color: var(--ink-dim); font-size: 11.5px; }
.send-page .switchnow { font-size: 12.5px; color: var(--ink-dim); }
.send-page .switchnow.ok { color: var(--ok); }
.send-page .switchnow.warn { color: #ffb020; font-weight: 700; }
.send-page #m-limreport { align-self: flex-start; }
.send-page .outbtns { display: inline-flex; gap: 6px; margin-left: auto; }
/* the footer, small, so the page fits the window (19 Oct 2026) */
.laser-foot { margin-top: 0; padding: 5px 0 6px; font-size: 12.5px; }
.laser-foot p { margin: 0; }
/* no room kept for the V3 badge (the site keeps 112 px for it on wide screens): the logo sits at the left edge */
.navbar .brand-link { padding-left: 0; }
.navbar .container-fluid { padding-left: 12px; }
/* the Output strip under every tab (19 Oct 2026) */
.send-page .outdock { flex: none; border-top: 1px solid var(--line); background: var(--panel-2); }
.send-page .outdock-head { display: flex; align-items: center; justify-content: space-between; padding: 3px 10px; }
.send-page .outdock-head button { border: 0; background: transparent; color: var(--ink-dim); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 3px 4px; }
.send-page .outdock-head button:hover { color: var(--ink); }
.send-page .outdock-toggle i { transition: transform .15s; }
.send-page .outdock.closed .outdock-toggle i { transform: rotate(-90deg); }
.send-page .console.mini { height: 128px; margin: 0; border-radius: 0; padding: 6px 10px; font-size: 12px; line-height: 1.4; }
.send-page .outdock.closed .console.mini { display: none; }

/* CNC Router Studio plan line on the Cut it tab (19 Oct 2026) */
.send-page .planline { margin: .5rem 0; font-size: .85rem; color: var(--ink-dim); }
.send-page .planline:empty { display: none; }
.send-page .planline i { margin-right: .3rem; }
.send-page .planline.ok i { color: var(--ok); }
.send-page .planline.out { color: var(--warn); }
.send-page .planline a { font-weight: 600; }
/* the Height map tab (22 Oct 2026) */
.send-page .hmgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px 12px; margin: 10px 0; }
.send-page .hmgrid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-dim); margin: 0; }
.send-page .hmgrid input { width: 100%; box-sizing: border-box; }
.send-page .hmmap { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin: 10px 0; }
.send-page .hmmap canvas { width: 360px; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: #0b1118; }
.send-page .hminfo { flex: 1 1 180px; font-size: 13px; color: var(--ink-dim); }
.send-page .hminfo b { color: var(--ink); }
.send-page .hminfo .bad { color: #ff6b6b; }

/* ---- the laser's own (22 Oct 2026) ---- */
/* no motorised Z: no Z anywhere (the Machine tab's "My laser has a motorised Z axis") */
#app.noz .zonly { display: none !important; }
#app.noz .dro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#app.noz .jogpad .zb { visibility: hidden; }
.send-page .dotbox { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.send-page .dotbox .panehead { font-size: 15px; margin: 0 0 8px; }
.send-page .dotbox input[type=number] { width: 70px; }
.send-page #fire { user-select: none; touch-action: none; }
.send-page #fire.on { background: #6a5cff; border-color: #6a5cff; color: #fff; box-shadow: 0 0 0 4px rgba(106,92,255,.35), 0 0 22px rgba(106,92,255,.7); }
.send-page .laserchip.lit { border-color: #6a5cff; color: #b9b2ff; box-shadow: 0 0 10px rgba(106,92,255,.5); }
[data-theme="light"] .send-page .laserchip.lit { color: #4a3ce0; }
.send-page .warnline { color: var(--bad, #d9342b); }
.send-page .switchnow.warn { color: var(--bad, #d9342b); }

/* Settings: every $ setting of the board (24 Oct 2026) */
.send-page .gs-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.send-page .gs-files { display: flex; gap: 8px; margin-left: auto; }
.send-page .gs-find { width: 100%; box-sizing: border-box; margin: 0 0 10px; padding: 7px 10px; border-radius: 8px; font: inherit; font-size: 14px;
    background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); }
.send-page .gs-find:focus { outline: none; border-color: var(--accent); }
.send-page .gs-group { margin: 0 0 14px; }
.send-page .gs-group h3 { font-size: 14px; font-weight: 600; margin: 0 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.send-page .gs-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 220px); gap: 4px 12px; align-items: center;
    padding: 7px 8px; border-radius: 8px; border-left: 3px solid transparent; }
.send-page .gs-row + .gs-row { border-top: 1px solid var(--line); }
.send-page .gs-name code { color: var(--accent); font-weight: 600; }
.send-page .gs-name b { font-weight: 600; }
.send-page .gs-name small { display: block; color: var(--ink-dim); font-size: 12px; line-height: 1.35; margin-top: 2px; }
.send-page .gs-care { font-size: 11px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--warn); color: var(--warn); }
.send-page .gs-val { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.send-page .gs-val input[type="text"] { width: 110px; font-family: ui-monospace, Consolas, monospace; }
.send-page .gs-val .unit { font-size: 12px; }
.send-page .gs-bits { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.send-page .gs-bits .chk, .send-page .gs-val > .chk { margin: 0; font-size: 13px; }
.send-page .gs-mask { font-size: 12px; color: var(--ink-dim); font-family: ui-monospace, Consolas, monospace; }
.send-page .gs-was { grid-column: 2; font-size: 12px; color: var(--ink-dim); }
.send-page .gs-was:empty { display: none; }
.send-page .gs-row.changed { border-left-color: var(--accent); background: var(--panel-2); }
.send-page .gs-row.changed .gs-was { color: var(--accent); }
.send-page .gs-row.bad { border-left-color: var(--bad); }
.send-page .gs-row.bad .gs-was { color: var(--bad); }
.send-page .gs-row.flash { box-shadow: 0 0 0 2px var(--accent); }
@media (max-width: 1180px) { .send-page .gs-row { grid-template-columns: 1fr; } .send-page .gs-was { grid-column: 1; } .send-page .gs-files { margin-left: 0; } }

/* the stepper calculator on the Help tab (24 Oct 2026) */
.send-page .calc { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.send-page .calc-head { font-size: 15px; font-weight: 600; margin: 0 0 10px; display: flex; gap: 8px; align-items: baseline; }
.send-page .calc-box { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 0 0 10px; }
.send-page .calc-box > b { display: block; margin-bottom: 6px; }
.send-page .calc-box .est { margin-bottom: 8px; }
.send-page .calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.send-page .calc-grid label { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; font-size: 13px; color: var(--ink-dim); }
.send-page .calc-grid input, .send-page .calc-grid select { width: 100%; box-sizing: border-box; }
.send-page .calc-out { display: flex; flex-direction: column; gap: 3px; margin: 10px 0 4px; font-size: 13px; color: var(--ink-dim); }
.send-page .calc-out .calc-big { font-size: 20px; color: var(--ink); }
.send-page .calc-out .warn { color: var(--warn); }
.send-page .calc-out .ok { color: var(--ok); }
.send-page .calc-put { margin: 6px 0 0; align-items: center; }
.send-page .calc-put .est { margin: 0; }

/* right click on the output (24 Oct 2026) */
.send-page .outmenu { position: fixed; z-index: 1000; min-width: 210px; padding: 4px; border-radius: 10px; background: var(--panel);
    border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); display: flex; flex-direction: column; }
.send-page .outmenu.hidden { display: none; }
.send-page .outmenu button { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--ink); font: inherit;
    font-size: 13px; text-align: left; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.send-page .outmenu button i { width: 16px; color: var(--ink-dim); }
.send-page .outmenu button kbd { margin-left: auto; font-size: 11px; color: var(--ink-dim); background: none; border: 0; padding: 0; }
.send-page .outmenu button:hover:not(:disabled), .send-page .outmenu button:focus-visible { background: var(--panel-2); outline: none; }
.send-page .outmenu button:disabled { opacity: .45; cursor: default; }