/* ── BASE DESIGN TOKENS — LIGHT INDUSTRIAL ─────────────────── */
    :root {
      --bg:        #eef3f7;
      --surface:   #ffffff;
      --panel:     #f8fbfd;
      --surface-soft: #f8fbfd;
      --surface-muted: #f2f6f9;
      --border:    #d6e0e8;
      --border-lt: #bfd0dc;
      --border-strong: #bfd0dc;
      --text:      #233243;
      --muted:     #627588;
      --dim:       #7b8d9f;
      --primary:   #2f698f;
      --primary-dark: #244f6d;
      --accent:    #2f698f;
      --accent-dk: #244f6d;
      --red:       #b42318;
      --green:     #23654d;
      --amber:     #996600;
      --purple:    #6d4fb3;
      --teal:      #1f7a74;
      --shadow:    0 14px 28px rgba(15,23,42,0.08);
      --shadow-soft: 0 6px 14px rgba(15,23,42,0.06);
      --shadow-strong: 0 20px 48px rgba(15,23,42,0.18);
      --mono:      ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
      --sans:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      --radius:    10px;
      --radius-lg: 16px;
    }

    .weld-map-app *, .weld-map-app *::before, .weld-map-app *::after { box-sizing: border-box; margin: 0; padding: 0; }

    .weld-map-app {
      font-family: var(--sans);
      background: var(--bg);
      color: var(--text);
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* ── HEADER (kept for backward compat; we don't actually render this header in the Astro port — Base.astro provides the site header) ─── */
    .weld-map-app header {
      display: flex;
      align-items: center;
      gap: 16px;
      height: 64px;
      padding: 0 22px;
      background: linear-gradient(135deg, #24384b 0%, #31556f 58%, #4f7692 100%);
      border-bottom: none;
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
      color: #f8fbfd;
      flex-shrink: 0;
      position: relative;
      z-index: 10;
    }
    .hdr-logo {
      font-family: var(--sans);
      font-size: 19px;
      font-weight: 800;
      letter-spacing: 0.01em;
      color: #f8fbfd;
      white-space: nowrap;
    }
    .hdr-logo .iq { color: #9ed0ef; }
    .hdr-logo .q-wrap { position: relative; display: inline-block; }
    .hdr-logo .q-cross { position: absolute; left: 48.5%; top: 51%; width: 0.40em; height: 0.40em; transform: translate(-50%, -50%); pointer-events: none; }
    .hdr-sub {
      font-size: 11px;
      color: #d7e4ef;
      font-family: var(--mono);
    }
    .beta-badge {
      display: inline-block;
      padding: 2px 7px;
      margin-left: 2px;
      background: #f59e0b;
      color: #1a1200;
      border-radius: 999px;
      font-family: var(--sans);
      font-size: 9.5px;
      font-weight: 900;
      letter-spacing: 0.08em;
      vertical-align: middle;
      text-transform: uppercase;
    }
    #status {
      font-size: 11px;
      color: #d7e4ef;
      font-family: var(--mono);
      flex: 1;
      max-width: 340px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .hdr-right {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .status-summary {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      align-items: center;
    }
    .summary-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 9px;
      border-radius: 999px;
      font-size: 11px;
      font-family: var(--mono);
      font-weight: 700;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.10);
      color: #eef5fb;
    }
    .summary-pill strong { font-weight: 800; }
    .summary-pill.summary-Accepted  { background: rgba(35,101,77,0.35); border-color: rgba(185,224,202,0.55); color: #eaf7ef; }
    .summary-pill.summary-Rejected  { background: rgba(180,35,24,0.34); border-color: rgba(255,190,190,0.55); color: #fff2f2; }
    .summary-pill.summary-Repaired  { background: rgba(153,102,0,0.34); border-color: rgba(230,190,98,0.55); color: #fff8e8; }
    .summary-pill.summary-Pending   { background: rgba(47,105,143,0.35); border-color: rgba(158,208,239,0.55); color: #edf5fb; }
    .summary-pill.summary-Waived    { background: rgba(109,79,179,0.30); border-color: rgba(212,199,245,0.55); color: #f4f0ff; }

    /* ── TOOLBAR ──────────────────────────────────────────────── */
    .toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 12px 14px;
      background: #ffffff;
      border-bottom: 1px solid var(--border);
      box-shadow: 0 1px 4px rgba(15,23,42,0.04);
      flex-shrink: 0;
      align-items: center;
    }
    .toolbar-group {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 5px 8px;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius);
    }
    .tg-label {
      font-size: 9px;
      font-weight: 800;
      font-family: var(--mono);
      color: #55697d;
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-right: 2px;
      white-space: nowrap;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 10px;
      min-height: 30px;
      border: 1px solid var(--border-lt);
      border-radius: 8px;
      background: #f8fbfd;
      color: #233243;
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      white-space: nowrap;
      transition: all .15s;
      box-shadow: inset 0 1px 1px rgba(255,255,255,0.65);
    }
    .btn:hover { border-color: #78a4c0; color: var(--accent); background: #eef5f9; }
    .btn.primary { background: linear-gradient(180deg, #4e93bc 0%, #2f698f 100%); color: #fff; border-color: #2f698f; box-shadow: 0 8px 16px rgba(47,105,143,0.15); }
    .btn.primary:hover { background: var(--accent-dk); color: #fff; }
    .btn.active { background: linear-gradient(180deg, #4e93bc 0%, #2f698f 100%); border-color: #2f698f; color: #fff; }
    .btn.danger { color: var(--red); background: #fff7f7; border-color: #f0c8c8; }
    .btn.danger:hover { border-color: var(--red); }
    .btn-icon { padding: 5px 8px; min-width: 30px; justify-content: center; }
    .btn-danger {
      color: #b42318;
      border-color: #f0c8c8;
      background: linear-gradient(180deg, #fff 0%, #fdf3f3 100%);
    }
    .btn-danger:hover { background: #fdecec; border-color: #e0a8a8; }
    /* ─ Split-screen full panels (BDT measurement report + WMT weld register) ─ */
    #bdtFullTablePanel, #fullTablePanel.split-mode {
      /* Default split: top half = drawing (visible behind), bottom half = report.
         No !important here — the divider drag sets an inline `top` that must win.
         Flex column so the title stays fixed and only the data zone scrolls. */
      top: 50%;
      flex-direction: column;
      padding: 0;
      overflow: hidden;
    }
    /* Fixed (non-scrolling) title zone at the top of each split panel */
    .full-panel-fixed { flex: 0 0 auto; padding: 14px 16px 10px; }
    /* Scrolling data zone — its top edge is where the sticky header freezes */
    .full-panel-scroll { flex: 1 1 auto; overflow: auto; padding: 0 16px 16px; }
    #bdtFullPanelDivider, #wmtFullPanelDivider {
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 14px;
      cursor: row-resize;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(180deg, rgba(15,23,42,0.08) 0%, rgba(15,23,42,0) 100%);
    }
    #bdtFullPanelDivider::before, #wmtFullPanelDivider::before {
      content: "";
      display: block;
      width: 60px;
      height: 4px;
      background: #9fb8cb;
      border-radius: 4px;
      transition: background 0.12s;
    }
    #bdtFullPanelDivider:hover::before, #bdtFullPanelDivider.dragging::before,
    #wmtFullPanelDivider:hover::before, #wmtFullPanelDivider.dragging::before { background: #1a56db; }
    #bdtFullPanelDivider.dragging, #wmtFullPanelDivider.dragging { background: rgba(26,86,219,0.08); }
    body.bdt-full-resize, body.wmt-full-resize { cursor: row-resize !important; user-select: none; }

    /* ─ Sticky table headers — header row freezes at top while body scrolls ─ */
    .bulk-table thead th,
    .full-table thead th {
      position: sticky;
      top: 0;
      z-index: 5;
      background: #f7fafc;
      box-shadow: 0 1px 0 #cbd8e2, inset 0 -1px 0 #cbd8e2;
    }
    /* Continuous pulse for the currently selected balloon — gentle "breathing" so it
       stays easy to spot in the drawing without being visually noisy. */
    @keyframes balloon-pulse {
      0%   { filter: drop-shadow(0 0 0   rgba(26,86,219,0));   transform: translate(-50%,-50%) scale(1);    }
      50%  { filter: drop-shadow(0 0 10px rgba(26,86,219,0.7)); transform: translate(-50%,-50%) scale(1.12); }
      100% { filter: drop-shadow(0 0 0   rgba(26,86,219,0));   transform: translate(-50%,-50%) scale(1);    }
    }
    .balloon-pulse { animation: balloon-pulse 1.4s ease-in-out infinite; }

    /* ─ GD&T Feature Control Frame ─ */
    .fcf {
      display: inline-flex;
      align-items: stretch;
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 700;
      color: #0a1828;
      border: 1.5px solid #0a1828;
      border-radius: 2px;
      background: #fff;
      line-height: 1;
      vertical-align: middle;
    }
    .fcf-cell {
      padding: 5px 9px;
      border-right: 1.5px solid #0a1828;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 22px;
    }
    .fcf-cell:last-child { border-right: none; }
    .fcf-cell.fcf-sym { font-size: 15px; }
    .fcf-preview-box {
      padding: 8px 12px;
      background: #f7fafc;
      border: 1px dashed #bfd0dc;
      border-radius: 6px;
      min-height: 40px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .fcf-preview-box .fcf-empty { color: var(--muted); font-style: italic; font-size: 11px; }
    .gdt-fields { display: none; }
    .gdt-fields.active { display: contents; }   /* let children participate in the grid */
    .dim-fields.hidden { display: none; }
    .gdt-datum-row { display: flex; gap: 4px; align-items: center; }
    .gdt-datum-row input { flex: 1 1 auto; width: auto !important; }
    .gdt-datum-row select { flex: 0 0 auto; width: 56px !important; padding-right: 4px !important; }
    .meas-type-toggle {
      display: inline-flex;
      gap: 0;
      border: 1px solid #bfd0dc;
      border-radius: 8px;
      overflow: hidden;
    }
    .meas-type-toggle button {
      padding: 6px 14px;
      background: #fff;
      border: none;
      cursor: pointer;
      font-size: 12px;
      font-weight: 700;
      color: #4d647a;
    }
    .meas-type-toggle button.active { background: #1a56db; color: #fff; }
    .meas-type-toggle button:hover:not(.active) { background: #f2f4f7; color: #0a1828; }

    /* ─ Bulk table: GD&T row variant ─ */
    tr.bulk-row-gdt { background: linear-gradient(90deg, rgba(26,86,219,0.04) 0%, rgba(26,86,219,0) 8%); }
    tr.bulk-row-gdt > td:first-child { box-shadow: inset 3px 0 0 #1a56db; }
    .bulk-fcf-cell { padding: 3px 6px !important; text-align: center; }
    .export-marked-wrap { position:relative; display:inline-block; }
    .export-fmt-menu { display:none; position:absolute; top:calc(100% + 4px); left:0; background:#fff; border:1px solid #d0d5dd; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,0.13); z-index:300; min-width:130px; padding:4px 0; }
    .export-fmt-menu.open { display:block; }
    .export-fmt-btn { display:block; width:100%; padding:8px 16px; background:none; border:none; text-align:left; cursor:pointer; font-size:13px; font-family:var(--sans); font-weight:600; color:#344054; white-space:nowrap; }
    .export-fmt-btn:hover { background:#f2f4f7; color:#0a1828; }
    .ann-size-wrap { position:relative; display:inline-flex; align-items:center; gap:0; }
    .ann-size-input { width:54px; padding:5px 4px 5px 8px; border:1px solid #bfd0dc; border-right:none; border-radius:6px 0 0 6px; font-size:13px; font-family:var(--sans); font-weight:700; color:#0a1828; background:#fff; text-align:center; -moz-appearance:textfield; }
    .ann-size-input::-webkit-outer-spin-button, .ann-size-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
    .ann-size-input:focus { outline:none; border-color:#1a56db; }
    .ann-size-dd-btn { padding:5px 7px; border:1px solid #bfd0dc; border-radius:0 6px 6px 0; background:#f8fbfd; color:#233243; cursor:pointer; font-size:11px; font-weight:700; line-height:1; height:28px; }
    .ann-size-dd-btn:hover { background:#eaf3fb; }
    .ann-size-menu { display:none; position:absolute; top:calc(100% + 4px); left:0; background:#fff; border:1px solid #d0d5dd; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,0.13); z-index:300; min-width:90px; max-height:260px; overflow-y:auto; padding:4px 0; }
    .ann-size-menu.open { display:block; }
    .ann-size-opt { display:block; width:100%; padding:6px 14px; background:none; border:none; text-align:left; cursor:pointer; font-size:13px; font-family:var(--sans); font-weight:600; color:#344054; }
    .ann-size-opt:hover { background:#f2f4f7; color:#0a1828; }
    .file-label {
      display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px;
      min-height: 30px; border: 1px solid #bfd0dc; border-radius: 10px;
      background: #f8fbfd; color: #233243; font-family: var(--sans);
      font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap;
      transition: all .15s; box-shadow: inset 0 1px 1px rgba(255,255,255,0.65);
    }
    .file-label:hover { border-color: #78a4c0; color: var(--accent); background: #eef5f9; }
    input[type="file"] { display: none; }
    .zoom-val {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--text);
      width: 46px;
      min-width: 46px;
      text-align: center;
      padding: 4px 2px;
      border: 1px solid #bfd0dc;
      border-radius: 6px;
      background: #fff;
    }
    .zoom-val:focus { outline: none; border-color: #1a56db; }
    .page-val {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted);
      min-width: 48px;
      text-align: center;
    }
    .kbd {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 22px;
      height: 22px;
      padding: 0 7px;
      border: 1px solid #bfd0dc;
      border-bottom-width: 2px;
      border-radius: 5px;
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 700;
      color: #233243;
      background: linear-gradient(180deg, #ffffff 0%, #f3f7fa 100%);
      box-shadow: 0 1px 0 rgba(15,23,42,0.04), inset 0 -1px 0 rgba(15,23,42,0.04);
      white-space: nowrap;
      line-height: 1;
    }
    /* Collapsible instruction sections */
    details.help-section {
      margin-bottom: 10px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: #ffffff;
      box-shadow: 0 1px 3px rgba(15,23,42,0.05);
      overflow: hidden;
    }
    details.help-section summary {
      list-style: none;
      cursor: pointer;
      padding: 10px 14px;
      font-size: 12px;
      font-weight: 800;
      color: var(--text);
      background: linear-gradient(180deg,#f7fafc 0%,#eef3f7 100%);
      border-bottom: 1px solid transparent;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      user-select: none;
      transition: background .15s;
    }
    details.help-section summary::-webkit-details-marker { display: none; }
    details.help-section summary:hover { background: linear-gradient(180deg,#eef4f8 0%,#e3ebf2 100%); }
    details.help-section summary::after {
      content: "▸";
      font-size: 11px;
      color: var(--muted);
      transition: transform .18s;
    }
    details.help-section[open] summary { border-bottom-color: var(--border); }
    details.help-section[open] summary::after { transform: rotate(90deg); }
    details.help-section .help-body { padding: 12px 14px; font-size: 12px; color: var(--text); line-height: 1.7; }
    details.help-section .help-body b.hl { color: var(--accent); }
    details.help-section .help-body ul { margin: 4px 0 8px 18px; padding: 0; color: var(--muted); }
    details.help-section .help-body ul li { margin: 2px 0; }
    details.help-section .help-body ul li b { color: var(--text); }
    .sc-row {
      /* Override: kbd column takes its natural width, description fills the rest */
      justify-content: flex-start !important;
      gap: 10px !important;
    }
    .sc-row .kbd { flex: 0 0 auto; }
    .sc-row .sc-desc { flex: 1 1 auto; text-align: left; }

    /* ── LAYOUT ───────────────────────────────────────────────── */
    .app {
      --side-panel-width: 440px;
      display: grid;
      grid-template-columns: minmax(320px,1fr) 8px var(--side-panel-width);
      flex: 1;
      overflow: hidden;
      transition: grid-template-columns 220ms ease;
    }

    /* ── PANEL RESIZER ──────────────────────────────────────────── */
    .panel-resizer {
      width: 8px;
      background: linear-gradient(180deg, #d7e4ef 0%, #edf5fb 100%);
      border-left: 1px solid var(--border);
      border-right: 1px solid var(--border);
      cursor: col-resize;
      position: relative;
      z-index: 20;
      transition: background 160ms ease, box-shadow 160ms ease;
    }
    .panel-resizer::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 3px;
      height: 44px;
      border-radius: 999px;
      transform: translate(-50%, -50%);
      background: #9fb8cb;
      box-shadow: 0 -8px 0 #9fb8cb, 0 8px 0 #9fb8cb;
      opacity: 0.75;
    }
    .panel-resizer:hover,
    .app.resizing .panel-resizer {
      background: linear-gradient(180deg, #c7ddee 0%, #dceaf4 100%);
      box-shadow: 0 0 0 3px rgba(47,105,143,0.10);
    }
    .app.resizing { transition: none; user-select: none; }

    /* ── CANVAS ───────────────────────────────────────────────── */
    .drawing-panel {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: #eef3f7;
      border-right: 1px solid var(--border-strong);
      min-width: 0;
    }
    .canvas-wrap {
      flex: 1;
      overflow: auto;
      position: relative;
      background: radial-gradient(circle, #ccd9e2 1px, transparent 1px);
      background-size: 24px 24px;
      background-color: #f3f7fa;
      cursor: default;
    }
    .canvas-wrap.place-mode { cursor: crosshair; }
    .canvas-wrap.panning { cursor: grabbing !important; }
    .canvas-wrap.pan-ready { cursor: grab; }
    #wmtStageScaler, #bdtStageScaler {
      position: relative;
      transform-origin: top left;
      padding: 32px;
      display: inline-block;
    }
    #wmtDrawingStage, #bdtDrawingStage {
      position: relative;
      background: #ffffff;
      box-shadow: 0 18px 42px rgba(15,23,42,0.16), 0 0 0 1px #cbd8e2;
      border-radius: 3px;
      transform-origin: top left;
    }
    #wmtDrawingImage, #bdtDrawingImage {
      display: block;
      user-select: none;
      -webkit-user-drag: none;
    }
    #leaderSvg, #bdtLeaderSvg {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: visible;
    }
    .empty-stage {
      position: absolute;
      inset: 0;
      display: grid;
      place-content: center;
      text-align: center;
      color: var(--dim);
      gap: 12px;
      padding: 40px;
      cursor: pointer;
    }
    .empty-icon {
      font-size: 64px;
      line-height: 1;
      color: #bfd0dc;
    }
    .empty-stage h2 { font-size: 20px; color: #4d647a; }
    .empty-stage p  { font-size: 13px; color: #627588; max-width: 280px; margin: 0 auto; }

    /* ── WELD MARKERS ─────────────────────────────────────────── */
    .marker {
      position: absolute;
      min-width: 44px;
      height: 32px;
      padding: 0 10px;
      border: 2.5px solid var(--red);
      border-radius: 999px;
      background: rgba(255,255,255,0.96);
      color: var(--red);
      display: grid;
      place-items: center;
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 800;
      transform: translate(-50%,-50%);
      cursor: grab;
      pointer-events: auto;
      user-select: none;
      white-space: nowrap;
      transition: border-color .15s, box-shadow .15s;
      z-index: 2;
      box-shadow: 0 2px 8px rgba(15,23,42,0.15);
    }
    .marker:hover { box-shadow: 0 0 0 3px rgba(180,35,24,0.18), 0 2px 8px rgba(15,23,42,0.15); }
    .marker.selected { border-color: var(--red); color: var(--red); box-shadow: 0 0 0 3px rgba(180,35,24,0.18), 0 2px 8px rgba(15,23,42,0.15); }
    .marker.dragging { cursor: grabbing; opacity: .8; z-index: 10; }

    .place-ghost {
      position: absolute;
      min-width: 44px;
      height: 32px;
      padding: 0 10px;
      border: 2px dashed var(--red);
      border-radius: 999px;
      background: rgba(255,255,255,0.7);
      color: var(--red);
      display: grid;
      place-items: center;
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 800;
      transform: translate(-50%,-50%);
      pointer-events: none;
      opacity: 0.6;
      z-index: 3;
    }

    .anchor {
      position: absolute;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: rgba(180,35,24,0.85);
      border: 2px solid #fff;
      box-shadow: 0 2px 6px rgba(0,0,0,0.35);
      transform: translate(-50%,-50%);
      cursor: grab;
      pointer-events: auto;
      z-index: 5;
    }
    .anchor:hover { box-shadow: 0 0 0 4px rgba(180,35,24,0.25), 0 2px 6px rgba(0,0,0,0.35); }
    .anchor.dragging { cursor: grabbing; }

    /* Legend */
    .legend {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      padding: 8px 14px;
      background: #ffffff;
      border-top: 1px solid var(--border);
      flex-shrink: 0;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-family: var(--mono);
      color: var(--muted);
      font-weight: 600;
    }
    .legend-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    /* ── SIDE PANEL ───────────────────────────────────────────── */
    .side-panel {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: #f3f7fa;
      border-left: 1px solid var(--border);
      min-width: 0;
    }
    .side-tabs {
      display: flex;
      border-bottom: 1px solid var(--border);
      background: #ffffff;
      flex-shrink: 0;
      padding: 0 8px;
    }
    .tab-btn {
      flex: 1;
      padding: 10px 4px;
      border: none;
      border-bottom: 3px solid transparent;
      background: transparent;
      color: #627588;
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
      transition: all .15s;
    }
    .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); background: linear-gradient(180deg, rgba(47,105,143,0.04), rgba(47,105,143,0.10)); }
    .tab-pane { display: none; flex: 1; overflow-y: auto; padding: 14px; }
    .tab-pane.active { display: block; }

    /* ── FIELD BLOCKS ──────────────────────────────────────────── */
    .field-block {
      margin-bottom: 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      background: linear-gradient(180deg,#ffffff 0%,#fbfdfe 100%);
      box-shadow: 0 1px 3px rgba(15,23,42,0.06);
    }
    .field-block-title {
      padding: 7px 12px;
      font-size: 9px;
      font-weight: 800;
      font-family: var(--mono);
      text-transform: uppercase;
      letter-spacing: .1em;
      color: #55697d;
      background: #f2f6f9;
      border-bottom: 1px solid var(--border);
    }
    .field-block-body {
      padding: 12px;
      background: #ffffff;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .field-block-body.single { grid-template-columns: 1fr; }
    .f-wide { grid-column: 1/-1; }

    label {
      display: block;
      font-size: 10px;
      font-weight: 800;
      font-family: var(--mono);
      color: #55697d;
      margin-bottom: 4px;
      text-transform: uppercase;
      letter-spacing: .06em;
    }
    .weld-map-app input, .weld-map-app select, .weld-map-app textarea {
      width: 100%;
      padding: 7px 10px;
      border: 1px solid #bfd0dc;
      border-radius: 10px;
      background: #f8fbfd;
      color: #233243;
      font-family: var(--sans);
      font-size: 12.5px;
      font-weight: 600;
      outline: none;
      transition: border-color .15s;
      box-shadow: inset 0 1px 1px rgba(255,255,255,0.65);
    }
    /* Form-area inputs (Project Details panel, edit cards) get the extra breathing room. */
    .weld-map-app .project-field input,
    .weld-map-app .project-field select,
    .weld-map-app .project-field textarea,
    .weld-map-app .input-group input,
    .weld-map-app .input-group select,
    .weld-map-app .input-group textarea {
      padding: 9px 13px;
      font-size: 13.5px;
    }
    /* Toolbar inputs (zoom percentage, search) keep their compact, fixed-width sizing. */
    .weld-map-app .zoom-val { width: 46px !important; min-width: 46px; padding: 4px 6px; font-size: 11px; }
    .weld-map-app input:focus, .weld-map-app select:focus, .weld-map-app textarea:focus { border-color: #78a4c0; box-shadow: 0 0 0 3px rgba(82,132,164,0.15); }
    .weld-map-app input:disabled { opacity: 0.5; cursor: not-allowed; }
    .weld-map-app select option { background: #ffffff; color: #233243; }
    .weld-map-app textarea { min-height: 64px; resize: vertical; }
    .toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      cursor: pointer;
      padding: 4px 6px;
      border-radius: 6px;
      transition: background .15s;
    }
    .toggle:hover { background: #eef5f9; }
    .toggle input[type="checkbox"] { width: auto; accent-color: var(--accent); cursor: pointer; }

    /* ── WELD SUMMARY TABLE ─────────────────────────────────────── */
    .weld-table-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; background: #ffffff; }
    table { width: 100%; border-collapse: collapse; }
    th {
      padding: 7px 6px;
      background: #f2f6f9;
      color: #55697d;
      font-size: 9px;
      font-weight: 800;
      font-family: var(--mono);
      text-transform: uppercase;
      letter-spacing: .08em;
      border-bottom: 1px solid var(--border);
    }
    td {
      padding: 6px 5px;
      font-size: 12px;
      border-bottom: 1px solid #e5edf3;
      text-align: center;
      vertical-align: middle;
      color: #233243;
    }
    tr:last-child td { border-bottom: none; }
    tr:hover td { background: #f8fbfd; }
    tr.selected-row td { background: #edf5fb; }

    .status-pill {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      min-width: 68px;
      padding: 3px 7px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 700;
      font-family: var(--mono);
    }

    /* ── EDIT CARD ─────────────────────────────────────────────── */
    .edit-card {
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: var(--panel);
      margin-bottom: 14px;
    }
    .edit-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      background: #f2f6f9;
      border-bottom: 1px solid var(--border);
      gap: 8px;
    }
    .edit-num {
      font-family: var(--mono);
      font-size: 15px;
      font-weight: 800;
      color: var(--red);
      padding: 3px 12px;
      border: 2px solid rgba(180,35,24,.35);
      border-radius: 999px;
      background: #fff7f7;
    }
    .edit-body { padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: #ffffff; }
    .e-wide { grid-column: 1/-1; }
    .edit-footer {
      display: flex;
      gap: 8px;
      padding: 10px 12px;
      background: #f2f6f9;
      border-top: 1px solid var(--border);
    }
    .edit-footer .btn.danger { margin-left: auto; }

    /* NDT rows */
    .ndt-row {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      margin-bottom: 8px;
      background: var(--panel);
    }
    .ndt-row-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 10px;
      background: #f2f6f9;
      border-bottom: 1px solid var(--border);
    }
    .ndt-row-title {
      font-size: 10px;
      font-weight: 800;
      font-family: var(--mono);
      color: #55697d;
      text-transform: uppercase;
      letter-spacing: .06em;
    }
    .ndt-row-grid {
      padding: 10px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .ndt-row-grid .full { grid-column: 1/-1; }

    /* ── SHORTCUTS GRID ─────────────────────────────────────────── */
    .shortcuts-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      font-size: 11px;
    }
    .sc-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 4px;
      padding: 5px 8px;
      border-radius: 6px;
      background: linear-gradient(180deg,#ffffff 0%,#fbfdfe 100%);
      border: 1px solid var(--border);
      box-shadow: 0 1px 3px rgba(15,23,42,0.06);
    }
    .sc-desc { color: var(--muted); }

    /* ── FULL WELD TABLE ────────────────────────────────────────── */
    .full-table-wrap {
      /* In split-screen the panel itself is the scroll container (needed for sticky
         headers). When NOT in split mode this still scrolls horizontally on its own. */
      overflow-x: auto;
      overflow-y: visible;
      padding-bottom: 10px;
    }
    /* When the panel is in split mode, let it own both scroll axes so sticky th works */
    #fullTablePanel.split-mode .full-table-wrap { overflow: visible; }
    #bdtFullTablePanel .measurement-table-scroll { overflow: visible; }
    .full-table-wrap::-webkit-scrollbar { height: 11px; }
    .full-table-wrap::-webkit-scrollbar-track { background: #edf5fb; border-radius: 999px; }
    .full-table-wrap::-webkit-scrollbar-thumb { background: #9fb8cb; border-radius: 999px; border: 2px solid #edf5fb; }
    .full-table { min-width: 900px; table-layout: auto; }
    .full-table th, .full-table td { white-space: nowrap; }
    /* Clickable rows in the read-only weld register → jump to edit in side panel */
    .ftbl-row { cursor: pointer; }
    .ftbl-row:hover { background: #eef4fb; }
    .table-tools {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }
    .table-search-input {
      flex: 1;
      min-width: 200px;
    }

    /* ── TOAST ──────────────────────────────────────────────────── */
    #toast {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%) translateY(10px);
      background: #ffffff;
      border: 1px solid #bfd0dc;
      color: #233243;
      padding: 8px 16px;
      border-radius: 999px;
      font-size: 12px;
      font-family: var(--mono);
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s, transform .2s;
      z-index: 1000;
      white-space: nowrap;
      box-shadow: 0 12px 30px rgba(15,23,42,0.18);
    }
    #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* ── MODAL ──────────────────────────────────────────────────── */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(15,23,42,0.5);
      z-index: 200;
      display: none;
      align-items: center;
      justify-content: center;
    }
    .modal-box {
      background: #ffffff;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-strong);
      width: min(580px, 95vw);
      max-height: 85vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      background: #f2f6f9;
      border-bottom: 1px solid var(--border);
    }
    .modal-head h2 { font-size: 15px; color: var(--text); }
    .modal-close-btn { background: none; border: none; cursor: pointer; font-size: 18px; color: var(--muted); padding: 2px 6px; border-radius: 6px; }
    .modal-close-btn:hover { background: #eef5f9; color: var(--text); }
    .modal-body { flex: 1; overflow-y: auto; padding: 16px 18px; }
    .modal-foot {
      display: flex;
      gap: 8px;
      align-items: center;
      padding: 12px 18px;
      border-top: 1px solid var(--border);
      background: #f8fbfd;
    }
    .modal-section { margin-bottom: 16px; }
    .modal-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
    .modal-section-title { font-size: 12px; font-weight: 800; color: var(--text); font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; }
    .modal-select-btns { display: flex; gap: 4px; }
    .modal-source-label { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
    .modal-field-grid {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .modal-field-grid label {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--panel);
      cursor: pointer;
      text-transform: none;
      letter-spacing: 0;
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
    }
    .modal-field-grid label input[type="checkbox"] { width: auto; flex-shrink: 0; }
    .modal-field-grid label:hover { background: #eef5f9; }
    .modal-weld-list { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; }
    .modal-weld-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--panel);
      cursor: pointer;
    }
    .modal-weld-row:hover { background: #eef5f9; }
    .modal-weld-row input[type="checkbox"] { width: auto; flex-shrink: 0; }
    .weld-row-label { font-size: 12px; font-weight: 800; font-family: var(--mono); color: var(--text); }
    .weld-row-status { padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; font-family: var(--mono); }
    .modal-apply-hint { font-size: 11px; color: var(--muted); font-family: var(--mono); margin-left: auto; }

    /* ── PRINT ──────────────────────────────────────────────────── */
    @media print {
      @page { size: A4 landscape; margin: 6mm; }
      header, .toolbar, .side-panel, .panel-resizer, .legend { display: none !important; }
      body { background: #ffffff !important; height: auto; overflow: visible; }
      .app, .drawing-panel, .canvas-wrap { display: block !important; background: #ffffff !important; border: 0 !important; overflow: visible !important; }
      #wmtStageScaler, #bdtStageScaler { transform: none !important; padding: 0 !important; }
      #wmtDrawingStage, #bdtDrawingStage { box-shadow: none !important; border: 1px solid #bfd0dc !important; border-radius: 0 !important; }
      #wmtDrawingImage, #bdtDrawingImage { max-width: 100%; }
    }

    /* scrollbar */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border-lt); border-radius: 3px; }

    @media (max-width: 900px) {
      .app { display: flex; flex-direction: column; }
      .panel-resizer { display: none; }
      .side-panel { min-height: 55vh; }
    }
    /* v2.5.11a cleanup styles */
    .legend { display: none !important; }

    .register-summary-block {
      margin-bottom: 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .register-summary-title {
      padding: 7px 12px;
      font-size: 9px;
      font-weight: 700;
      font-family: var(--mono);
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--dim);
      background: var(--panel);
      border-bottom: 1px solid var(--border);
    }
    .register-summary-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      padding: 12px;
      background: var(--surface);
    }
    .reg-sum-card {
      padding: 10px 8px;
      border-radius: var(--radius);
      text-align: center;
      border: 1px solid var(--border);
      background: var(--panel);
      min-width: 0;
    }
    .reg-sum-card .num {
      font-size: 22px;
      font-weight: 800;
      line-height: 1;
    }
    .reg-sum-card .lbl {
      margin-top: 3px;
      font-size: 10px;
      color: var(--muted);
      font-family: var(--mono);
    }
    .reg-sum-card.total   { border-color: rgba(47,105,143,.25); background: rgba(47,105,143,.06); }
    .reg-sum-card.total .num { color: var(--accent); }
    .reg-sum-card.accepted { border-color: rgba(35,101,77,.25); background: rgba(35,101,77,.06); }
    .reg-sum-card.accepted .num { color: var(--green); }
    .reg-sum-card.rejected { border-color: rgba(180,35,24,.25); background: rgba(180,35,24,.06); }
    .reg-sum-card.rejected .num { color: var(--red); }
    .reg-sum-card.pending  { border-color: rgba(153,102,0,.25); background: rgba(153,102,0,.06); }
    .reg-sum-card.pending .num { color: var(--amber); }
    .reg-sum-card.repaired { border-color: rgba(153,102,0,.20); background: rgba(153,102,0,.04); }
    .reg-sum-card.repaired .num { color: var(--amber); }
    .reg-sum-card.waived   { border-color: rgba(109,79,179,.25); background: rgba(109,79,179,.06); }
    .reg-sum-card.waived .num { color: var(--purple); }

    .register-actions-strip {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 14px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--panel);
    }
    .register-actions-strip span {
      color: var(--muted);
      font-size: 11px;
      line-height: 1.4;
      flex: 1 1 220px;
    }
    @media (max-width: 720px) {
      .register-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    /* v2.5.11b toolbar/table/header cleanup */
    .conformance-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      border-radius: 999px;
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 800;
      border: 1px solid rgba(255,255,255,0.20);
      background: rgba(255,255,255,0.12);
      color: #eef5fb;
      white-space: nowrap;
    }
    .conformance-badge::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: currentColor;
      flex: 0 0 auto;
    }
    .conformance-badge.Conforming {
      color: #eaf7ef;
      border-color: rgba(185,224,202,0.70);
      background: rgba(35,101,77,0.35);
    }
    .conformance-badge.Non-Conforming {
      color: #fff2f2;
      border-color: rgba(255,190,190,0.65);
      background: rgba(180,35,24,0.34);
    }
    .conformance-badge.Incomplete {
      color: #fff8e8;
      border-color: rgba(230,190,98,0.70);
      background: rgba(153,102,0,0.34);
    }
    .ref-tools { margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
    .ref-tools-head { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:10px 12px; background:#edf5fb; border-bottom:1px solid var(--border); }
    .ref-tools-head h3 { margin:0 0 2px 0; color:var(--primary); font-size:13px; font-weight:700; }
    .ref-tools-head p { margin:0; color:var(--muted); font-size:11px; }
    .ref-tools-body { padding:10px 12px; display:grid; grid-template-columns: 1fr 1fr auto; gap:10px; align-items:end; }
    .ref-tools-body label { margin-bottom:4px; }
    #updateGridRefsBtn { justify-content:center; min-width:170px; }
    .ref-tools-note { padding:8px 12px 10px; font-size:11px; color:var(--muted); }
    .grid-direction-help {
      margin: 0 12px 12px;
      padding: 10px 12px;
      background: #f4f8fb;
      border: 1px dashed #c0d2df;
      border-radius: 8px;
      font-size: 11.5px;
      color: var(--text);
      line-height: 1.55;
    }
    .grid-direction-help__title {
      font-weight: 800;
      color: var(--accent);
      margin-bottom: 6px;
      font-size: 12px;
    }
    .grid-direction-help ul { margin: 0; padding-left: 18px; }
    .grid-direction-help li { margin: 3px 0; color: var(--muted); }
    .grid-direction-help li b { color: var(--text); }
    .grid-direction-help code {
      display: inline-block;
      padding: 1px 5px;
      background: #ffffff;
      border: 1px solid #c8d8e3;
      border-radius: 4px;
      font-family: var(--mono);
      font-size: 11px;
      color: #233243;
    }
    @media (max-width:900px) { .ref-tools-body { grid-template-columns:1fr; } }
    .ref-badge {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      min-width: 42px;
      max-width: 72px;
      padding: 3px 7px;
      border-radius: 999px;
      background: #edf5fb;
      border: 1px solid #c7ddee;
      color: #274560;
      font-family: var(--mono);
      font-size: 10.5px;
      font-weight: 800;
      overflow: hidden;
      text-overflow: ellipsis;
    }
.toolbar-group,
      .toolbar-group.export-group {
        width: auto;
      }

    /* ── MODE SWITCHING ──────────────────────────────────────── */
    body.mode-weld   .balloon-only { display: none !important; }
    body.mode-balloon .weld-only   { display: none !important; }

    .mode-switcher {
      display: flex; gap: 3px;
      background: rgba(255,255,255,0.10);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 8px; padding: 3px;
    }
    .mode-switcher .btn {
      background: transparent; border: none; color: #d7e4ef;
      font-size: 11.5px; font-weight: 700; padding: 4px 10px;
      min-height: 24px; border-radius: 5px; box-shadow: none;
    }
    .mode-switcher .btn:hover  { background: rgba(255,255,255,0.12); color: #fff; }
    .mode-switcher .btn.active { background: rgba(255,255,255,0.18); color: #fff; }

    /* ── BALLOON MARKERS ─────────────────────────────────────── */
    #bdtBalloonLayer {
      position: absolute; inset: 0;
      pointer-events: none; z-index: 2;
    }
    .balloon {
      position: absolute; min-width: 32px; height: 32px; padding: 0 8px;
      border: 2.5px solid var(--red); border-radius: 999px;
      background: rgba(255,255,255,0.96); color: var(--red);
      display: grid; place-items: center;
      font-family: var(--mono); font-size: 12px; font-weight: 800;
      transform: translate(-50%,-50%); cursor: grab;
      pointer-events: auto; user-select: none; white-space: nowrap;
      box-shadow: 0 2px 8px rgba(15,23,42,0.15); z-index: 2;
      transform-origin: center center;
    }
    .balloon:hover { box-shadow: 0 0 0 3px rgba(180,35,24,.18), 0 2px 8px rgba(15,23,42,.15); }
    .balloon.selected { border-color: var(--red); color: var(--red);
      box-shadow: 0 0 0 3px rgba(180,35,24,.18), 0 2px 8px rgba(15,23,42,.15); }
    .balloon.dragging { cursor: grabbing; opacity: .8; z-index: 10; }
    .balloon[class*="status-"] { border-color: var(--red); color: var(--red); }
    .leader-anchor {
      position: absolute; width: 14px; height: 14px; border-radius: 50%;
      background: rgba(180,35,24,0.85); border: 2px solid #fff;
      box-shadow: 0 2px 6px rgba(0,0,0,0.35);
      transform: translate(-50%,-50%); cursor: grab;
      pointer-events: auto; z-index: 5;
      transform-origin: center center;
    }
    .leader-anchor:hover { box-shadow: 0 0 0 4px rgba(180,35,24,0.25), 0 2px 6px rgba(0,0,0,0.35); }
    .leader-anchor.dragging { cursor: grabbing; }

    /* ── BALLOON RESULT PILLS ────────────────────────────────── */
    .spill {
      display: inline-flex; justify-content: center; align-items: center;
      min-width: 68px; padding: 3px 7px; border-radius: 999px;
      font-size: 10px; font-weight: 700; font-family: var(--mono);
    }
    .spill-Pending    { background: #edf5fb; color: var(--accent); }
    .spill-Accepted   { background: #eaf7ef; color: var(--green); }
    .spill-Rejected   { background: #fff2f2; color: var(--red); }
    .spill-Waived     { background: #f4f0ff; color: var(--purple); }
    .spill-Incomplete { background: #fff8e8; color: var(--amber); border: 1px dashed rgba(153,102,0,.4); }

    /* ── SUMMARY BAR (balloon) ───────────────────────────────── */
    .summary-bar { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 14px; }
    .sum-pill { padding: 10px 8px; border-radius: var(--radius); text-align: center; border: 1px solid var(--border); background: var(--panel); }
    .sum-pill .num { font-size: 22px; font-weight: 800; line-height: 1; }
    .sum-pill .lbl { font-size: 10px; color: var(--muted); margin-top: 3px; font-family: var(--mono); }
    .sum-pill.ok   { border-color: rgba(35,101,77,.25); background: rgba(35,101,77,.06); }
    .sum-pill.ok .num { color: var(--green); }
    .sum-pill.fail { border-color: rgba(180,35,24,.25); background: rgba(180,35,24,.06); }
    .sum-pill.fail .num { color: var(--red); }
    .sum-pill.pend { border-color: rgba(153,102,0,.25); background: rgba(153,102,0,.06); }
    .sum-pill.pend .num { color: var(--amber); }
    .sum-pill.waiv { border-color: rgba(109,79,179,.25); background: rgba(109,79,179,.06); }
    .sum-pill.waiv .num { color: var(--purple); }

    /* ── BALLOON RESULT PREVIEW (edit card) ──────────────────── */
    .result-preview-box { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; background:var(--panel); border:1px solid var(--border); }
    .result-preview { flex:1; font-family:var(--mono); font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; text-align:center; }
    .result-preview.Pending    { background:#edf5fb; color:var(--accent); }
    .result-preview.Accepted   { background:#eaf7ef; color:var(--green); }
    .result-preview.Rejected   { background:#fff2f2; color:var(--red); }
    .result-preview.Waived     { background:#f4f0ff; color:var(--purple); }
    .result-preview.Incomplete { background:#fff8e8; color:var(--amber); }
    .manual-result-row { display: none; }
    .manual-result-row.visible { display: block; }

    /* ── TOLERANCE TOOLS ─────────────────────────────────────── */
    .tolerance-tools { border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:14px; }
    .tolerance-head { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; background:var(--panel); border-bottom:1px solid var(--border); }
    .tolerance-head h3 { margin:0 0 2px; font-size:13px; font-weight:700; color:var(--text); }
    .tolerance-head p  { margin:0; font-size:11px; color:var(--muted); }
    .tolerance-actions { display:flex; gap:6px; }
    .tolerance-body { padding:10px; background:var(--surface); }
    .tolerance-table input { min-height:28px; padding:4px 6px; font-size:11px; border-radius:6px; }
    .tol-note { margin-top:8px; color:var(--muted); font-size:11px; line-height:1.4; }

    /* ── BULK / MEASUREMENT TABLE ────────────────────────────── */
    .measurement-table-scroll { overflow-x:scroll; overflow-y:visible; padding-bottom:10px; }
    .measurement-table-scroll::-webkit-scrollbar { height:11px; }
    .measurement-table-scroll::-webkit-scrollbar-track { background:#edf5fb; border-radius:999px; }
    .measurement-table-scroll::-webkit-scrollbar-thumb { background:#9fb8cb; border-radius:999px; border:2px solid #edf5fb; }
    .bulk-table { width:100%; min-width:780px; table-layout:fixed; border-collapse:collapse; }
    .bulk-table th, .bulk-table td { white-space:nowrap; padding:5px 6px; font-size:11px; vertical-align:middle; }
    .bulk-table td { min-height:44px; height:44px; }
    .bulk-table th:nth-child(1), .bulk-table td:nth-child(1) { width:4%; min-width:32px; text-align:center; }
    .bulk-table th:nth-child(2), .bulk-table td:nth-child(2) { width:8%; min-width:64px; white-space:normal; line-height:1.15; }
    .bulk-table th:nth-child(3), .bulk-table td:nth-child(3) { width:17%; }
    .bulk-table th:nth-child(4), .bulk-table td:nth-child(4),
    .bulk-table th:nth-child(5), .bulk-table td:nth-child(5),
    .bulk-table th:nth-child(6), .bulk-table td:nth-child(6),
    .bulk-table th:nth-child(7), .bulk-table td:nth-child(7) { width:7%; }
    .bulk-table th:nth-child(8), .bulk-table td:nth-child(8) { width:10%; min-width:88px; text-align:center; padding-right:10px; }
    .bulk-table th:nth-child(9), .bulk-table td:nth-child(9) { width:13%; }
    .bulk-table th:nth-child(10),.bulk-table td:nth-child(10){ width:20%; }
    .bulk-table td.ref-location-cell { text-align:center; }
    .bulk-table td input { width:100%; box-sizing:border-box; min-height:30px; padding:4px 5px; font-size:11px; border-radius:5px; }
    .bulk-table td.result-cell { text-align:center; padding-right:10px !important; }
    .bulk-table td input.bulk-characteristic,
    .bulk-table td input.bulk-small,
    .bulk-table td input.bulk-instrument,
    .bulk-table td input.bulk-note { width:100%; min-width:0; }


    /* ── ANNOTATION TOOLBAR (horizontal, Acrobat-style) ───────── */
    .ann-toolbar {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      padding: 6px 12px;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      box-shadow: 0 1px 4px rgba(15,23,42,0.06);
      flex: none;
      z-index: 10;
    }
    .ann-section {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: wrap;
    }
    .ann-section__label {
      font-size: 9px;
      font-weight: 800;
      color: var(--dim);
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-right: 2px;
      font-family: var(--mono);
      white-space: nowrap;
    }
    .ann-sep {
      width: 1px;
      height: 24px;
      background: var(--border);
      margin: 0 2px;
      flex: none;
    }
    .ann-val {
      font-size: 11px;
      font-weight: 700;
      color: var(--text);
      min-width: 28px;
      font-family: var(--mono);
    }
    .ann-stamp-row {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: wrap;
      padding: 4px 8px;
      background: var(--surface-2, #f8fafc);
      border-top: 1px solid var(--border);
      width: 100%;
    }
    .ann-shapes { display: flex; gap: 4px; flex-wrap: wrap; }
    .ann-shape-btn {
      width: 28px; height: 28px;
      border: 1px solid var(--border-lt);
      border-radius: 6px;
      background: var(--panel);
      color: var(--text);
      font-size: 14px;
      cursor: pointer;
      display: grid; place-items: center;
      transition: all .15s;
    }
    .ann-shape-btn:hover { border-color: var(--accent); color: var(--accent); }
    .ann-shape-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
    .ann-btn {
      height: 28px;
      min-width: 28px;
      padding: 0 8px;
      border: 1px solid var(--border-lt);
      border-radius: 6px;
      background: var(--panel);
      color: var(--text);
      font-size: 13px;
      cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      transition: all .15s;
      font-family: inherit;
    }
    .ann-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--surface); }
    .ann-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
    .ann-tool-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
    .ann-stamp-btn {
      height: 24px;
      padding: 0 6px;
      font-size: 10px;
      font-weight: 700;
      border: 1px solid;
      border-radius: 4px;
      background: transparent;
      cursor: pointer;
      font-family: var(--mono);
      transition: all .15s;
    }
    .ann-stamp-btn:hover { opacity: 0.75; }

    /* ── SHAPE CSS FOR MARKERS ─────────────────────────────────── */
    .marker-shape-circle    { border-radius: 999px; }
    .marker-shape-rectangle { border-radius: 4px; }
    .marker-shape-hexagon   { clip-path: polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%); border-radius: 0; }
    .marker-shape-triangle  { clip-path: polygon(50% 5%,95% 95%,5% 95%); border-radius: 0; }
    .marker-shape-diamond   { clip-path: polygon(50% 5%,95% 50%,50% 95%,5% 50%); border-radius: 0; }
    .marker-shape-slotted   { border-radius: 999px; min-width: 140% !important; }

    /* ── ANNOTATION ELEMENTS (SVG-rendered, these are for hit-test divs) ── */
    .ann-hit {
      position: absolute;
      cursor: pointer;
      pointer-events: auto;
    }
    .ann-hit.selected { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
    .ann-hit:hover { outline: 1.5px dashed var(--accent); outline-offset: 3px; border-radius: 3px; }

    /* ── RESIZE HANDLES ─────────────────────────────────────────── */
    .resize-wrap { position:absolute; pointer-events:none; transform:translate(-50%,-50%); z-index:10; }
    .ann-handle {
      position:absolute; width:8px; height:8px;
      background:#fff; border:1.5px solid #e11d48; border-radius:2px;
      z-index:20; box-sizing:border-box; pointer-events:auto;
    }
    .ann-handle[data-r="nw"] { top:-5px;  left:-5px;  cursor:nw-resize; }
    .ann-handle[data-r="n"]  { top:-5px;  left:calc(50% - 4px); cursor:n-resize; }
    .ann-handle[data-r="ne"] { top:-5px;  right:-5px; cursor:ne-resize; }
    .ann-handle[data-r="e"]  { top:calc(50% - 4px); right:-5px; cursor:e-resize; }
    .ann-handle[data-r="se"] { bottom:-5px; right:-5px; cursor:se-resize; }
    .ann-handle[data-r="s"]  { bottom:-5px; left:calc(50% - 4px); cursor:s-resize; }
    .ann-handle[data-r="sw"] { bottom:-5px; left:-5px;  cursor:sw-resize; }
    .ann-handle[data-r="w"]  { top:calc(50% - 4px); left:-5px;  cursor:w-resize; }

    /* ── CONTEXT MENU ───────────────────────────────────────────── */
    #fabContextMenu { user-select:none; }
    .ctx-title { font-size:10px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px 5px; }
    .ctx-sep   { height:1px;background:#e5e7eb;margin:4px 0; }
    .ctx-row   { display:flex;align-items:center;gap:6px;padding:3px 8px 4px; }
    .ctx-label { font-size:12px;color:#374151;min-width:60px; }
    .ctx-btn   { display:block;width:100%;text-align:left;background:none;border:none;padding:6px 10px;font-size:12px;color:#374151;border-radius:5px;cursor:pointer; }
    .ctx-btn:hover       { background:#f3f4f6; }
    .ctx-btn-delete      { color:#dc2626; }
    .ctx-btn-delete:hover{ background:#fee2e2; }
    .ctx-select { font-size:12px;padding:3px 5px;border:1px solid #d1d5db;border-radius:5px;background:#f9fafb;color:#374151;cursor:pointer;flex:1; }
    .ctx-input  { font-size:12px;padding:3px 5px;border:1px solid #d1d5db;border-radius:5px;width:62px;background:#f9fafb;color:#374151; }