:root {
  --bg: #020711;
  --panel: #071522;
  --line: #17679f;
  --blue: #25a7ff;
  --green: #21dd78;
  --yellow: #ffb52b;
  --red: #f04455;
  --text: #f5f9fc;
  --muted: #7790a5;
  --space-1: 4px;
  --space-2: 7px;
  --space-3: 11px;
  --font-helper: 11px;
  --font-label: 11px;
  --font-section: 14px;
  --font-value: 16px;
  --control-h: 48px;
  --shadow: 0 12px 28px rgba(0, 0, 0, .35);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; overflow-x: hidden; }
body { margin: 0; min-width: 320px; min-height: 100vh; overflow-x: hidden; background: radial-gradient(circle at 50% -10%, #123557 0, transparent 35%), linear-gradient(#050c16, #01050b); color: var(--text); font-family: Inter, "Segoe UI", Arial, sans-serif; }
body.drag-active { touch-action: none; overscroll-behavior: none; }
.hidden { display: none !important; }
button, input { max-width: 100%; font: inherit; }
button { cursor: pointer; }
.shell { width: 100%; max-width: 760px; min-height: 100vh; margin: 0 auto; padding: 0 10px env(safe-area-inset-bottom); }

.brandbar { position: sticky; top: 0; z-index: 20; padding: 9px 2px 8px; border-bottom: 1px solid #164269; background: rgba(3, 9, 20, .96); backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: 8px; }
.brand-k { display: grid; width: 34px; height: 34px; place-items: center; flex: 0 0 auto; border: 2px solid var(--blue); color: var(--blue); font-size: 19px; font-weight: 900; }
.brand b { display: block; font-size: 14px; letter-spacing: .1em; }
.brand i, .modal-brand i { color: var(--blue); font-style: normal; }
.brand small { display: block; margin-top: 2px; color: #7591a8; font-size: var(--font-helper); letter-spacing: .2em; }
.compact-status { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, .7fr); gap: var(--space-1); margin-top: 8px; }
.compact-status > div, .compact-status > button { min-width: 0; padding: 5px 7px; border: 1px solid #143b59; background: #06111d; color: white; text-align: left; }
.compact-status small { display: block; color: #617f98; font-size: var(--font-helper); letter-spacing: .11em; }
.compact-status strong { display: block; margin-top: 2px; overflow: hidden; color: var(--green); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.compact-status .offline { color: var(--red); }

main { padding: 10px 0 16px; }
.panel { width: 100%; margin-bottom: 10px; padding: var(--space-3); border: 1px solid #174d75; background: linear-gradient(145deg, rgba(10, 29, 46, .98), rgba(4, 13, 23, .98)); box-shadow: var(--shadow); }
.panel-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.workflow-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; margin-bottom: 8px; }
.workflow-steps b { padding: 7px 3px; border-bottom: 2px solid #29475d; color: #71889a; font-size: 9px; text-align: center; }
.workflow-steps b.active { border-color: var(--green); color: #a8f8ca; }
.panel-heading > span { flex: 0 0 auto; color: var(--blue); font-size: 9px; font-weight: 900; }
.panel-heading > div { min-width: 0; flex: 1; }
.panel-heading h1, .panel-heading h2 { margin: 0; font-size: var(--font-section); letter-spacing: .13em; }
.panel-heading p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.panel-heading > button { flex: 0 0 auto; padding: 6px 8px; border: 1px solid #265a7f; background: #071725; color: #83c9f9; font-size: 10px; font-weight: 800; }
.panel-heading > b { margin-left: auto; color: var(--blue); font-size: 18px; }

#gesture-pad { display: block; width: 100%; border: 1px solid #174b70; background: radial-gradient(circle, #0b2840, #040c14); touch-action: none; }
.gesture-guide { fill: none; stroke: #1a4b6b; stroke-width: 4; stroke-dasharray: 8 9; opacity: .55; }
#gesture-path { fill: none; stroke: var(--yellow); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(255, 181, 43, .5)); }
#gesture-pad text { fill: #537188; font-size: 10px; letter-spacing: 2px; }
.recognition { min-height: 30px; padding: 9px 4px 0; color: #6d8ca4; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-align: center; }
.recognition.success { color: var(--green); }
.recognition.error { color: var(--red); }
.operation-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.operation-shortcuts button { min-width: 0; height: 48px; padding: 2px; border: 1px solid #246a99; background: #071726; color: #9bc9e8; font-size: 10px; font-weight: 900; }
.operation-shortcuts span { display: block; margin-bottom: 2px; color: var(--blue); font-size: 17px; }

.editor { position: relative; display: grid; gap: var(--space-2); }
.editor-title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 42px; padding: 6px 8px; border: 1px solid #173e5c; background: #06131f; }
.editor-title-row > div { display: grid; grid-template-columns: auto 1fr; min-width: 0; align-items: baseline; gap: 7px; }
.editor-title-row span { color: var(--blue); font-size: 9px; font-weight: 900; }
.editor-title-row h2 { margin: 0; font-size: var(--font-section); letter-spacing: .1em; white-space: nowrap; }
.editor-title-row p { grid-column: 2; margin: 1px 0 0; color: var(--muted); font-size: 9px; }
.editor-title-row > button { flex: 0 0 auto; height: 32px; padding: 0 9px; border: 1px solid #265a7f; background: #071725; color: #83c9f9; font-size: 9px; font-weight: 800; }
.history-toggle { width: 100%; height: 38px; border: 1px solid #23658f; background: #062039; color: #8ed1ff; font-size: 10px; font-weight: 900; }
.history-toggle b { margin-left: 5px; color: white; }

.plate-size-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 6px; }
.plate-size-row > label { min-width: 0; color: #7894aa; font-size: var(--font-label); }
.plate-size-row > label span { display: flex; min-width: 0; align-items: center; gap: 3px; margin-top: 4px; color: #7894aa; }
.plate-size-row input, .dimension-panel input, .hole-parameters input, .position-controls input, .feed-control b input {
  width: 100%; min-width: 0; height: var(--control-h); padding: 0 8px; border: 1px solid #23658f;
  border-radius: 3px; background: #03101b; color: white; font-size: var(--font-value); font-weight: 800;
}
.dimension-panel input, .hole-parameters input, .position-controls input { min-inline-size: 5ch; }
.plate-size-row > b { padding-bottom: 9px; color: #527890; }

.workspace-wrap { position: relative; display: grid; width: 100%; min-height: clamp(210px, 57vw, 315px); align-items: center; overflow: hidden; border: 1px solid #1d5e88; background: #020914; }
.expand-drawing { position: absolute; top: 6px; right: 6px; z-index: 8; width: 34px; height: 34px; padding: 0; border: 1px solid #4385ad; border-radius: 4px; background: rgba(3,15,25,.88); color: #bde6ff; font-size: 22px; line-height: 1; }
.workspace-wrap svg { display: block; width: 100%; height: auto; max-height: 55vh; touch-action: pan-y; }
.workspace-wrap.dragging svg, .workspace-wrap.position-editing svg { touch-action: none; }
#cut-drawing { touch-action: none; }
.work-area { stroke: #2b85be; stroke-width: 3; }
.machine-axis { stroke-width: 9; }
.axis-x { stroke: #ff4658; }
.axis-y { stroke: #28dc78; }
.axis-title { font-size: 42px; font-weight: 900; text-anchor: middle; letter-spacing: 1px; paint-order: stroke; stroke: #020914; stroke-width: 7px; }
.axis-x-label, .axis-x-number { fill: #ff6675; }
.axis-y-label, .axis-y-number { fill: #42e78c; }
.axis-number { font-size: 34px; font-weight: 900; paint-order: stroke; stroke: #020914; stroke-width: 6px; }
.dimension-line { stroke: var(--blue); stroke-width: 4; marker-start: url(#arrow); marker-end: url(#arrow); }
.dimension-value { fill: #d5efff; stroke: #03101c; stroke-width: 10px; font-size: 40px; font-weight: 900; text-anchor: middle; paint-order: stroke; cursor: pointer; }
.waste-shape, .hole-waste { fill: #f0a62c; fill-opacity: .34; stroke: #e5a12d; stroke-width: 3; }
.waste-hatch { fill: url(#waste-hatch); stroke: none; pointer-events: none; }
.waste-label { fill: #ffe1a0; font-size: 46px; font-weight: 900; letter-spacing: 2px; paint-order: stroke; stroke: rgba(38,24,4,.78); stroke-width: 5px; }
.previous-cut { fill: none; stroke: #6f8da2; stroke-width: 6; opacity: .55; }
.previous-hole { fill: rgba(255, 181, 43, .08); stroke: #7f91a0; stroke-width: 5; opacity: .65; }
.cut-line { fill: none; stroke: #e74354; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.cut-hit { fill: none; stroke: transparent; stroke-width: 220; pointer-events: stroke; touch-action: none; user-select: none; -webkit-user-select: none; }
.cut-line, .hole-path, .hole-contour, .waste-shape, .waste-hatch, .hole-waste, .waste-label, .dimension-line, .previous-cut, .previous-hole { pointer-events: none; }
.correction-editing .cut-line { stroke: var(--yellow); }
.hole-path { fill: none; stroke: #f1a52a; stroke-width: 7; stroke-dasharray: 15 10; }
.hole-contour { fill: none; stroke: #f04455; stroke-width: 10; }
.hole-body-hit { fill: transparent; stroke: none; pointer-events: all; touch-action: none; cursor: grab; }
.drag-handle { cursor: grab; touch-action: none; }
.drag-handle:active { cursor: grabbing; }
.touch-target { fill: transparent !important; stroke: none !important; pointer-events: all; touch-action: none; }
.start-marker, .vertex-handle, .cut-handle, .hole-handle { color: var(--blue); }
.start-marker .handle-ring { fill: #061a2b; stroke: currentColor; stroke-width: 6; }
.start-marker path { stroke: currentColor; stroke-width: 5; pointer-events: none; }
.vertex-handle .handle-ring, .cut-handle .handle-ring, .hole-handle .handle-ring { fill: #04101a; stroke: currentColor; stroke-width: 6; pointer-events: none; }
.vertex-handle .handle-dot, .cut-handle .handle-dot, .hole-handle .handle-dot { fill: currentColor; pointer-events: none; }
.position-editing .start-marker, .correction-editing .vertex-handle, .correction-editing .cut-handle { color: var(--yellow); }
.start-guide { stroke: var(--yellow); stroke-width: 3; stroke-dasharray: 12 9; opacity: .8; }
.start-coordinate { fill: var(--yellow); stroke: #020914; stroke-width: 7px; font-size: 32px; font-weight: 900; paint-order: stroke; }
.hole-position-guide { stroke: #37a9e9; stroke-width: 3; stroke-dasharray: 12 12; opacity: .58; pointer-events: none; }
.hole-center-marker { color: #51c4ff; pointer-events: none; }
.hole-center-marker circle { fill: #061827; stroke: currentColor; stroke-width: 5; }
.hole-center-marker path { stroke: currentColor; stroke-width: 4; }
.drag-readout { position: fixed; z-index: 95; display: none; min-width: 132px; padding: 9px 12px; border: 2px solid var(--yellow); border-radius: 5px; background: rgba(3,13,23,.96); color: white; box-shadow: 0 7px 22px #000; pointer-events: none; transform: translate(-50%, -100%); text-align: center; }
.drag-readout.visible { display: block; }
.drag-readout i { position: absolute; left: 50%; bottom: -8px; width: 14px; height: 14px; border-right: 2px solid var(--yellow); border-bottom: 2px solid var(--yellow); background: #030d17; transform: translateX(-50%) rotate(45deg); }
.drag-readout strong { position: relative; display: block; font-size: 17px; line-height: 1.3; white-space: pre-line; }

.dimension-panel, .hole-parameters, .position-controls, .corner-picker, .vertex-mode, .feed-control, .heat-control { width: 100%; border: 1px solid #174460; background: #06131f; }
.dimension-panel { padding: 7px 8px; }
.dimension-panel > b { display: block; margin-bottom: 5px; color: #7190a7; font-size: var(--font-label); letter-spacing: .1em; }
.dimension-rows { display: grid; gap: 5px; }
.dimension-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 5px; }
.dimension-panel:not(.correction-open) .dimension-row > label { grid-column: 1 / -1; }
.dimension-row label { display: flex; min-width: 0; align-items: center; gap: 5px; color: var(--blue); font-size: 11px; font-weight: 900; }
.dimension-row label span { position: relative; display: flex; min-width: 0; flex: 1; align-items: center; color: #6ca9d0; font-size: 9px; }
.dimension-panel input { border-color: var(--blue); text-align: right; }
.dimension-scrub-input { touch-action: none; user-select: none; -webkit-user-select: none; }
.dimension-scrub-input.value-input-dragging { border-color: var(--yellow) !important; background: #2a210d !important; color: #fff3c6; box-shadow: 0 0 0 2px rgba(255,190,45,.2), 0 0 13px rgba(255,190,45,.2); }
.dimension-row > label.dimension-axis-selected { color: var(--yellow); }
.dimension-row > label.dimension-axis-selected input { border-color: var(--yellow); background: #2a210d; color: #fff3c6; box-shadow: 0 0 0 2px rgba(255,190,45,.2), 0 0 13px rgba(255,190,45,.2); }
.dimension-panel.correction-open .dimension-row { grid-template-columns: minmax(0, 1fr); padding: 5px; border: 1px solid #173f5d; background: #04101a; }
.dimension-rows > #correction-mode { width: 100%; height: 40px; border: 1px solid var(--blue); background: #071827; color: #8dcef7; font-size: 10px; font-weight: 900; }
.dimension-rows > #correction-mode.active { border-color: var(--yellow); background: #30230b; color: #ffd26d; }
.dimension-rows > #confirm-dimensions { width: 100%; height: 44px; border: 1px solid var(--green); background: #0a683d; color: white; font-size: 12px; font-weight: 900; }
.dimension-panel.dimensions-locked { padding: 0; border-color: var(--blue); background: transparent; }
.dimension-panel.dimensions-locked > b, .dimension-panel.dimensions-locked .dimension-row, .dimension-panel.dimensions-locked #correction-mode { display: none; }
.dimension-panel.dimensions-locked .dimension-rows { gap: 0; }
.dimension-panel.dimensions-locked #confirm-dimensions { height: 46px; border-color: var(--blue); background: #071827; color: #9dd7fb; }
.correction-field { display: grid; width: 100%; min-width: 0; grid-template-columns: 40px minmax(0, 1fr) 40px 40px; align-items: start; gap: 4px; }
.correction-field > button { width: 40px; height: var(--control-h); padding: 0; border: 1px solid #9c7724; background: #251c08; color: #ffd26d; font-size: 17px; font-weight: 900; }
.correction-field label { min-width: 0; }
.correction-field label span { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
.correction-field small { position: static; grid-column: 1 / -1; color: #d9a43c; font-size: var(--font-helper); text-align: right; white-space: nowrap; }
.correction-field.correction-axis-selected label { color: var(--yellow); }
.correction-field.correction-axis-selected input { border-color: var(--yellow); background: #2a210d; color: #fff3c6; box-shadow: 0 0 0 2px rgba(255,190,45,.2), 0 0 13px rgba(255,190,45,.2); }
.correction-editing .dimension-panel { border-color: var(--yellow); }
.drawing-error { min-height: 16px; color: #ff6c79; font-size: 10px; font-weight: 800; }

.hole-mode, .hole-shape { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.hole-mode button, .hole-shape button { min-width: 0; min-height: 42px; padding: 4px; border: 1px solid #2a668e; background: #061725; color: #8dbbd7; font-size: 10px; font-weight: 900; }
.hole-mode button.active, .hole-shape button.active { border-color: var(--green); background: #0b653c; color: white; box-shadow: 0 0 12px rgba(33, 221, 120, .25); }
.hole-parameters { display: grid; gap: 7px; padding: 8px; }
.hole-parameters section { display: grid; gap: 5px; min-width: 0; }
.hole-parameters section + section { padding-top: 7px; border-top: 1px solid #174460; }
.hole-parameters section > b { color: #7ba0b8; font-size: var(--font-label); letter-spacing: .07em; }
.hole-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.hole-fields label:only-child { grid-column: 1 / -1; }
#hole-diameter-label { grid-column: 1 / -1; }
.hole-parameters label { display: grid; min-width: 0; gap: 3px; color: var(--blue); font-size: var(--font-label); }
.hole-parameters label span { display: flex; min-width: 0; align-items: center; color: #7393a8; font-size: 9px; }
.hole-parameters input { border-color: var(--blue); text-align: right; }
.hole-parameters > #confirm-hole-dimensions { width: 100%; height: 44px; border: 1px solid var(--green); background: #0a683d; color: white; font-size: 12px; font-weight: 900; }
.hole-parameters.dimensions-locked #hole-size-section, .hole-parameters.dimensions-locked #hole-position-section { display: none; }
.hole-parameters.dimensions-locked > #confirm-hole-dimensions { border-color: var(--blue); background: #071827; color: #9dd7fb; }
.hole-shape.dimensions-locked { display: none; }

.geometry-toolbar { display: flex; width: 100%; min-width: 0; justify-content: flex-end; align-items: stretch; gap: 6px; }
.geometry-toolbar.position-editing .corner-picker, .geometry-toolbar.position-editing .add-next-cut { display: none; }
.geometry-toolbar > .add-next-cut { width: 68px; min-width: 58px; flex: 0 1 68px; padding: 2px; border: 1px solid var(--green); background: #0a613a; color: white; font-size: 8px; font-weight: 900; }
.position-controls { display: grid; width: 44px; flex: 0 0 auto; grid-template-columns: minmax(0, 1.6fr) minmax(0, .7fr) minmax(0, .7fr); gap: 5px; padding: 0; border: 0; background: none; }
.position-controls.editing { width: 100%; flex: 1 1 100%; }
.position-controls:not(.editing) > #position-mode { grid-column: 1 / -1; }
.position-controls:not(.editing) > label, .position-controls:not(.editing) > #reset-start-position, .position-controls:not(.editing) > .position-readout { display: none; }
.position-controls:not(.editing) #position-mode { display: grid; width: 44px; padding: 0; place-items: center; border-color: #2b709e; }
.position-controls:not(.editing) #position-mode > b, .position-controls:not(.editing) #position-mode > small { display: none; }
.position-controls > button { display: grid; height: 45px; min-width: 0; grid-template-columns: auto 1fr; grid-template-rows: 1fr 1fr; column-gap: 7px; align-items: center; padding: 5px 8px; border: 1px solid var(--blue); background: #071827; color: #9dd7fb; text-align: left; }
.position-controls > #reset-start-position { display: block; height: 40px; grid-column: 1 / -1; padding: 0 10px; border-color: #356784; background: #07131e; color: #8fb9d2; font-size: 10px; font-weight: 900; text-align: center; }
.position-controls > #reset-start-position:active { border-color: var(--yellow); color: var(--yellow); }
.position-controls > button > span { grid-row: 1 / 3; color: var(--blue); font-size: 20px; }
.position-controls:not(.editing) > button > span { grid-row: auto; font-size: 24px; }
.position-controls button b { font-size: 9px; }
.position-controls button small { color: #63839c; font-size: var(--font-helper); }
.position-controls button.editing { border-color: var(--yellow); color: #ffd376; }
.position-controls button.editing > span { color: var(--yellow); }
.position-controls > label { min-width: 0; color: #6f8ca3; font-size: var(--font-label); }
.position-controls label input { margin-top: 3px; }
.position-readout { grid-column: 1 / -1; padding: 0 3px; color: #67bdf4; font-size: 12px; font-weight: 900; text-align: right; }
.corner-picker, .vertex-mode { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; }
.corner-picker > span, .vertex-mode > span { color: #6b8ba4; font-size: var(--font-label); }
.corner-picker { width: auto; min-width: 0; margin-left: auto; }
.corner-picker > div { display: grid; grid-template-columns: repeat(4, 44px); gap: 3px; }
.corner-picker button { width: 44px; height: 44px; padding: 0; border: 1px solid #245d84; background: #071929; color: #7fafd0; font-size: 18px; }
.corner-picker button.active { border-color: var(--yellow); background: #29200d; color: var(--yellow); }
.vertex-mode b { color: var(--blue); letter-spacing: .08em; }
.correction-editing .vertex-mode b { color: var(--yellow); }

.process-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.feed-control, .heat-control { min-width: 0; padding: 8px; }
.feed-control > span, .heat-control > span { display: block; color: #7190a7; font-size: var(--font-label); letter-spacing: .1em; }
.feed-control > input { width: 100%; margin: 8px 0 4px; accent-color: var(--blue); }
.feed-control > b { display: flex; align-items: center; justify-content: flex-end; color: #78bff0; font-size: 10px; }
.feed-control b input { width: 82px; min-width: 5ch; text-align: right; }
.heat-control > div { display: flex; gap: 4px; margin: 8px 0 6px; }
.heat-control button { min-width: 0; height: 44px; flex: 1; padding: 0; border: 1px solid #295c7c; background: #06111c; color: #6f91a8; font-size: 15px; font-weight: 900; }
.heat-control button.on { color: #8eaabd; background: #0a1a28; }
.heat-control button.active { border-color: #25ea80; background: linear-gradient(180deg, #22c96e, #0b8044); color: white; box-shadow: 0 0 12px rgba(33, 221, 120, .35); }
.heat-control > b { display: block; color: #7594aa; font-size: 9px; text-align: right; }
.heat-control i { color: var(--yellow); font-style: normal; }
.draft-actions { position: sticky; bottom: max(0px,env(safe-area-inset-bottom)); z-index: 18; display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.8fr); gap: 5px; padding: 6px; border: 1px solid #1c4f71; background: rgba(3,12,21,.97); box-shadow: 0 -8px 20px rgba(0,0,0,.35); }
.draft-actions > button { min-width: 0; height: 52px; }
.draft-actions > button { border: 1px solid #2b5f80; background: #071725; color: #9acff0; font-size: 9px; font-weight: 900; }
#cancel-draft { border-color: #a22f3b; background: #210b11; color: #ff7884; }
.add-job { border: 0; background: linear-gradient(135deg, #0a9f50, #20df79); color: white; font-weight: 900; letter-spacing: .08em; }
.add-job span { margin-right: 8px; font-size: 20px; }

.history-backdrop { position: fixed; inset: 0; z-index: 69; visibility: hidden; background: rgba(0, 4, 10, .62); opacity: 0; pointer-events: none; transition: opacity .18s, visibility .18s; }
.history-backdrop.open { visibility: visible; opacity: 1; pointer-events: auto; }
.cut-history { position: fixed; top: 0; bottom: 0; left: 0; z-index: 70; width: min(82vw, 300px); padding: 12px; overflow-y: auto; border-right: 1px solid var(--blue); background: #04101b; box-shadow: 12px 0 35px #000; transform: translateX(-105%); transition: transform .18s; pointer-events: none; }
.cut-history.open { transform: translateX(0); pointer-events: auto; }
.cut-history header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; color: #8ed1ff; font-size: 10px; }
.cut-history header button { width: 38px; height: 38px; border: 1px solid #28688f; background: #071827; color: white; }
.plate-cut-row { display: grid; grid-template-columns: minmax(0, 1fr) 36px; align-items: center; border-top: 1px solid #123550; }
.plate-cut-row button { min-width: 0; min-height: 43px; border: 0; background: transparent; color: #b9d9ed; font-size: 10px; text-align: left; }
.plate-cut-row .select-cut { overflow-wrap: anywhere; }
.plate-cut-row.active { border-left: 3px solid var(--yellow); background: #241b09; }
.plate-cut-row.active button { color: var(--yellow); }
.plate-cut-row .delete-cut { color: #ff7180; font-size: 16px; text-align: center; }

.editor.drawing-expanded { position: fixed; inset: 0; z-index: 90; display: grid; margin: 0; padding: 5px; overflow: auto; background: #020711; }
.editor.drawing-expanded > :not(.editor-title-row):not(.workspace-wrap) { display: none !important; }
.editor.drawing-expanded .workspace-wrap { height: calc(100vh - 110px); border-color: var(--yellow); }
.editor.drawing-expanded .workspace-wrap svg { height: 100%; max-height: 100%; }

.queue-list { display: grid; gap: 4px; }
.queue-toggle { width: 100%; min-height: 48px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.queue-toggle > i { margin-left: 3px; color: #7ca9c5; font-size: 10px; font-style: normal; transition: transform .18s; }
.queue-toggle[aria-expanded="false"] { margin-bottom: 0; }
.queue-toggle[aria-expanded="false"] > i { transform: rotate(-90deg); }
.queue-row { border: 1px solid #176da5; background: #071a2b; }
.queue-row.active { border-color: var(--green); background: linear-gradient(90deg, #0b5c36, #07301f); }
.queue-main { display: grid; width: 100%; height: 50px; min-width: 0; grid-template-columns: 44px 38px minmax(0, 1fr) auto; align-items: center; gap: 5px; padding: 4px 6px; border: 0; background: transparent; color: white; text-align: left; }
.queue-row.active .queue-main { height: 54px; }
.queue-thumb { width: 41px; height: 33px; }
.queue-thumb rect { fill: #d8e3e8; stroke: #6ca8cc; }
.queue-thumb path { fill: none; stroke: #e74b58; stroke-width: 3; }
.queue-number { color: #6fc5ff; font-size: 12px; font-weight: 900; }
.active .queue-number { color: #9bffc5; }
.queue-summary { min-width: 0; }
.queue-summary b, .queue-summary small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-summary b { font-size: 11px; letter-spacing: .04em; }
.queue-summary small { margin-top: 3px; color: #799ab1; font-size: var(--font-helper); }
.active .queue-summary small { color: #83c8a2; }
.queue-operator { max-width: 70px; overflow: hidden; color: #b8d9ee; font-size: 10px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.queue-details { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 8px; border-top: 1px solid rgba(73, 151, 203, .25); color: #8bacbf; font-size: 10px; overflow-wrap: anywhere; }
.queue-row.expanded .queue-details { display: grid; }
.queue-details b { color: white; }
.queue-empty { padding: 22px; border: 1px dashed #245270; color: #55758d; font-size: 9px; text-align: center; }
.saved-history-panel { padding: 8px; }
.saved-history-toggle { display: grid; width: 100%; min-height: 48px; grid-template-columns: 32px minmax(0,1fr) 24px; grid-template-rows: 1fr 1fr; align-items: center; padding: 5px 8px; border: 1px solid #245d84; background: #061725; color: #91cef5; text-align: left; }
.saved-history-toggle > span { grid-row: 1 / 3; font-size: 22px; }
.saved-history-toggle > b { font-size: 11px; letter-spacing: .08em; }
.saved-history-toggle > small { color: #66849a; font-size: 8px; }
.saved-history-toggle > i { grid-column: 3; grid-row: 1 / 3; font-size: 10px; font-style: normal; text-align: center; transition: transform .18s; }
.saved-history-toggle[aria-expanded="true"] > i { transform: rotate(180deg); }
.saved-history-list { display: grid; gap: 5px; margin-top: 7px; }
.saved-history-row { display: grid; grid-template-columns: 42px minmax(0,1fr) 42px auto; align-items: center; gap: 6px; padding: 6px; border: 1px solid #174e72; background: #06131f; }
.saved-history-row > span { display: grid; min-width: 0; gap: 2px; }
.saved-history-row > span b { overflow: hidden; color: #d7ecf8; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.saved-history-row > span small, .saved-history-row > span em { overflow: hidden; color: #718da1; font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.reuse-history-job { min-width: 66px; min-height: 42px; padding: 4px 6px; border: 1px solid var(--green); background: #0a613a; color: white; font-size: 8px; font-weight: 900; }
.favorite-history-job { width: 42px; height: 42px; padding: 0; border: 1px solid #8c6c22; background: #211a08; color: var(--yellow); font-size: 20px; }
.history-filters { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px; margin-bottom: 6px; }
.history-filters input,.history-filters button { min-height: 44px; border: 1px solid #285f83; background: #04101b; color: white; }
.history-filters input { min-width: 0; padding: 0 9px; font-size: 12px; }
.history-filters button { color: var(--yellow); font-size: 9px; font-weight: 900; }
.history-filters button[aria-pressed="true"] { background: #39290a; }
.review-card { width: min(94vw,520px); max-height: 92vh; overflow: auto; }
.review-card h2 { margin: 0; color: var(--green); }
#review-summary { display: grid; gap: 7px; padding: 10px; border: 1px solid #285f83; background: #06131f; }
#review-summary b { color: white; font-size: 16px; } #review-summary span { color: #9ab5c7; font-size: 12px; }
#preflight-sequence { display: grid; gap: 4px; margin: 8px 0; }
#preflight-sequence i { padding: 8px; border-left: 3px solid #31536b; background: #06131f; color: #7893a6; font-size: 11px; font-style: normal; transition: .2s; }
#preflight-sequence i.active { border-color: var(--yellow); background: #30230b; color: #ffe09a; transform: translateX(4px); }
#play-preflight { width: 100%; min-height: 46px; border: 1px solid var(--blue); background: #071827; color: #9ed8fa; font-weight: 900; }
.review-actions { display: grid; grid-template-columns: .8fr 1.3fr; gap: 6px; margin-top: 8px; }.review-actions button { min-height: 52px; border: 1px solid #2b6285; background: #071725; color: white; font-weight: 900; }.review-actions #add-job { border-color: var(--green); background: #0a7b45; }
#skip-queue-animation { min-height: 44px; margin-top: 8px; padding: 0 18px; border: 1px solid #52758c; background: #07131e; color: #a6bdcb; font-size: 10px; font-weight: 900; }
.input-confirm-bar { position: fixed; right: 8px; bottom: max(8px,env(safe-area-inset-bottom)); left: 8px; z-index: 320; display: grid; max-width: 520px; min-height: 58px; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 8px; margin: auto; padding: 7px; border: 1px solid var(--green); background: #03121d; box-shadow: 0 -8px 30px rgba(0,0,0,.7); }
.input-confirm-bar span { padding-left: 5px; color: #84a1b5; font-size: 9px; font-weight: 900; }
.input-confirm-bar button { min-height: 44px; border: 0; background: #0a8a4c; color: white; font-size: 12px; font-weight: 950; }
.active-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px; margin-top: 3px; }
.active-progress-track { height: 4px; overflow: hidden; border-radius: 4px; background: #032015; }
.active-progress-fill { display: block; height: 100%; background: #4cff99; }
.active-progress > em { color: #9affc2; font-size: var(--font-helper); font-style: normal; font-weight: 900; }

.test-controls { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 7px; }
.test-controls button { height: 45px; border: 0; color: white; font-weight: 900; }
.test-controls button:first-child { background: #12753f; }
.test-controls button:last-child { background: #a52232; }
.test-controls small { display: block; font-size: var(--font-helper); opacity: .7; }
.toast { position: fixed; bottom: 18px; left: 50%; z-index: 50; width: min(calc(100% - 24px), 500px); padding: 11px; border: 1px solid var(--green); background: #08251a; color: #9affc4; font-size: 10px; font-weight: 800; transform: translate(-50%, 130%); transition: .2s; }
.toast.show { transform: translate(-50%, 0); }
.toast.error { border-color: var(--red); background: #2c0c13; color: #ff9aa3; }
footer { padding: 18px 4px; color: #597186; font-size: var(--font-helper); letter-spacing: .11em; text-align: center; }
footer b { display: block; margin-top: 5px; color: var(--blue); }

.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; background: rgba(0, 5, 11, .92); }
.modal-card { width: min(100%, 360px); padding: 24px; border: 1px solid var(--blue); background: linear-gradient(145deg, #0b2033, #040b13); box-shadow: 0 25px 70px #000; text-align: center; }
.modal-brand { font-size: 22px; font-weight: 900; letter-spacing: .12em; }
.modal-card > small { color: #66839a; font-size: 8px; letter-spacing: .2em; }
.modal-card h2 { margin: 25px 0 10px; font-size: 13px; }
.modal-card input { width: 100%; height: 48px; padding: 0 12px; border: 1px solid #2b719d; background: #020a12; color: white; font-size: 16px; }
.modal-card button { width: 100%; height: 48px; margin-top: 9px; border: 0; background: var(--blue); color: white; font-weight: 900; }
.confirm-card p { color: #849bad; font-size: 10px; line-height: 1.5; }
.confirm-card > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 7px; }
.confirm-card > div button:first-child { border: 1px solid #2d6d98; background: #071725; }
.confirm-card > div button:last-child { background: var(--red); }

body.queue-confirmation-active { overflow: hidden; }
.queue-cut-animation { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: #020711; color: white; }
.queue-cut-animation.active { animation: queue-confirmation 2.35s ease both; }
.queue-cut-stage { display: grid; width: min(100%, 430px); justify-items: center; gap: 9px; text-align: center; }
.queue-cut-brand { color: white; font-size: 21px; font-weight: 950; letter-spacing: .13em; }
.queue-cut-brand i { color: var(--blue); font-style: normal; }
.queue-cut-stage > strong { color: var(--green); font-size: 18px; letter-spacing: .08em; }
.queue-cut-stage > small { color: #8fd2fb; font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.queue-cut-stage > span { color: #637f94; font-size: 8px; font-weight: 800; letter-spacing: .06em; }
.queue-cut-visual { position: relative; width: min(82vw, 330px); height: 150px; margin: 16px 0; overflow: hidden; border: 1px solid #1e628e; background: #04101b; box-shadow: 0 0 28px rgba(32,165,241,.12); }
.queue-foam-block { position: absolute; inset: 24px 28px; border: 2px solid #9fb4be; background: radial-gradient(circle at 20% 30%,#b7c6cc 0 2px,transparent 3px),radial-gradient(circle at 70% 66%,#f9fbfc 0 2px,transparent 3px),#dde7eb; background-size: 23px 23px,29px 29px,auto; }
.queue-hot-wire { position: absolute; z-index: 2; top: 13px; bottom: 13px; left: 27px; width: 3px; background: #fff5cf; box-shadow: 0 0 5px #fff,0 0 13px #ffbd32,0 0 25px #ff6338; animation: hot-wire-pass 1.55s .28s ease-in-out both; }
.queue-cut-trace { position: absolute; z-index: 1; top: 24px; bottom: 24px; left: 29px; width: 0; border-bottom: 2px solid rgba(255,98,51,.55); background: rgba(240,68,85,.16); animation: cut-trace 1.55s .28s ease-in-out both; }
@keyframes hot-wire-pass { 0% { left: 27px; } 100% { left: calc(100% - 30px); } }
@keyframes cut-trace { 0% { width: 0; } 100% { width: calc(100% - 58px); } }
@keyframes queue-confirmation { 0% { opacity: 0; } 10%,82% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .queue-cut-animation.active { animation-duration: 1.2s; } .queue-hot-wire, .queue-cut-trace { animation-duration: .6s; } }

@media (max-width: 430px) {
  .shell { padding-inline: 8px; }
  .panel { padding: 9px; }
  .feed-control, .heat-control { padding: 7px 6px; }
  .heat-control > div { gap: 2px; }
}

@media (max-width: 380px) {
  .shell { padding-inline: 6px; }
  .panel { padding: 8px; }
  .corner-picker > span { display: none; }
  .editor-title-row h2 { font-size: 12px; letter-spacing: .07em; }
  .operation-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operation-shortcuts button { font-size: 10px; }
  .dimension-row { gap: 5px; }
  .dimension-panel input { padding-inline: 4px; }
  .correction-field { grid-template-columns: 38px minmax(0, 1fr) 38px 38px; gap: 3px; }
  .correction-field > button { width: 38px; }
  .position-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .position-controls > button { grid-column: 1 / -1; padding-inline: 8px; }
  .draft-actions { grid-template-columns: minmax(0, 1fr); }
  .queue-main { grid-template-columns: 40px 34px minmax(0, 1fr) auto; padding-inline: 4px; }
  .queue-operator { max-width: 55px; }
}

@media (min-width: 600px) {
  body { padding: 18px; }
  .shell { padding-inline: 18px; border: 1px solid #153b58; }
}