/* Clear Report app styles — extracted from the v20 monolith (document order preserved). */
@font-face { font-family: "Inter"; src: url(inter.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* Clear Report brand */
      /* Light theme only: these win over the kit's theme rules, whatever data-theme says */
      :root, :root[data-theme] {
        color-scheme: light;
        --x-bg: #F7F7F5; --x-surface: #FFFFFF; --x-line: #E6E6E3; --x-field: #DADAD6; --x-ink: #111111; --x-ring: #111111;
        --x-amber: #B7791F; --x-blue: #2B6CB0; --x-green: #2F855A; --x-red: #C53030;
        --text-primary: #111111; --text-secondary: #6B6B6B; --text-primary-on: #FFFFFF;
        --fill-primary: #111111; --fill-primary-on: #F7F7F5; --fill-tertiary: #EFEFEC;
        --stroke-primary: #DADAD6; --stroke-secondary: #E6E6E3;
        --fill-system-green: #2F855A; --fill-system-orange: #B7791F; --fill-system-red: #C53030;
        --hark-shadow: 0 1px 2px rgba(0, 0, 0, .04);
        --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        --r-s: 10px; --r-m: 10px;
      }
      body { background: var(--x-bg); color: var(--x-ink); }
      .page { font-variant-numeric: tabular-nums; }
      .x-brandbar { max-width: 760px; margin: 0 auto; padding: 14px var(--gutter) 0; display: flex; align-items: center; gap: 10px; }
      .x-brandbar b { display: inline-flex; align-items: center; padding: 6px 14px; border: 1px solid #111; border-radius: 999px; font-family: var(--sans); font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: #111; }
      .x-app { max-width: 760px; margin: 0 auto; padding: 16px var(--gutter) 150px; }
      .x-h1 { font: var(--type-title); margin: 8px 0 4px; }
      .x-sub { font: var(--type-small); color: var(--text-secondary); margin: 0 0 16px; }
      .x-h3 { font: var(--type-heading); margin: 0 0 8px; }
      .x-big { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; border-radius: var(--r-m); border: 0; background: var(--fill-primary); color: var(--text-primary-on); font: var(--type-body); font-weight: var(--weight-medium); cursor: pointer; margin: 8px 0 16px; }
      .x-btn { min-height: var(--tap); padding: 8px 16px; border-radius: var(--r-s); border: 1px solid var(--stroke-primary); background: var(--fill-primary-on); color: var(--text-primary); font: var(--type-label); cursor: pointer; }
      .x-btn.x-on, .x-chip.x-on { background: var(--fill-primary); color: var(--text-primary-on); border-color: var(--fill-primary); }
      .x-big, .x-dock .x-btn.x-on, .x-dlg .x-btn.x-on { background: #111; color: #fff; border-color: #111; }
      .x-btn:disabled { opacity: .45; cursor: default; }
      .x-row2 { display: flex; gap: 8px; flex-wrap: wrap; }
      .x-row2 > * { flex: 1 1 140px; }
      .x-f { display: block; margin-bottom: 14px; font: var(--type-label); color: var(--text-secondary); }
      .x-f input, .x-f textarea, .x-in input, .x-search { display: block; width: 100%; box-sizing: border-box; min-height: 48px; margin-top: 6px; padding: 10px 14px; border-radius: var(--r-s); border: 1px solid var(--stroke-primary); background: var(--fill-primary-on); color: var(--text-primary); font: var(--type-body); font-size: 16px; }
      .x-f textarea { min-height: 80px; resize: vertical; }
      .x-in input { margin: 0; }
      input.x-calc { background: var(--fill-tertiary); color: var(--text-secondary); border-color: transparent; }
      .x-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--stroke-secondary); }
      .x-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--stroke-secondary); }
      .x-list li > div { flex: 1; min-width: 0; }
      .x-list b { display: block; font: var(--type-body); font-weight: var(--weight-medium); }
      .x-list small, .x-lab small { display: block; font: var(--type-small); color: var(--text-secondary); }
      .x-chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; margin: 8px 0; }
      .x-chip { flex: none; min-height: 40px; padding: 6px 14px; border-radius: var(--r-pill); border: 1px solid var(--stroke-primary); background: var(--fill-primary-on); color: var(--text-primary); font: var(--type-tag); cursor: pointer; white-space: nowrap; }
      .x-test { display: flex; width: 100%; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; margin-bottom: 8px; min-height: 56px; border-radius: var(--r-s); border: 1px solid var(--stroke-secondary); background: var(--fill-primary-on); color: var(--text-primary); font: var(--type-body); cursor: pointer; }
      .x-test span { flex: 1; }
      .x-test small { display: block; font: var(--type-small); color: var(--text-secondary); }
      .x-test.x-on { background: var(--fill-tertiary); border-color: var(--text-primary); }
      .x-test i { font-style: normal; width: 24px; text-align: center; }
      .x-dock { position: fixed; left: 0; right: 0; bottom: 64px; z-index: 5; background: var(--fill-primary-on); border-top: 1px solid var(--stroke-secondary); }
      .x-dock > div { max-width: 760px; margin: 0 auto; padding: 8px var(--gutter); display: flex; align-items: center; gap: 12px; }
      .x-dock b { flex: 1; font: var(--type-body); font-weight: var(--weight-medium); }
      .x-card { background: var(--fill-tertiary); border-radius: var(--r-m); padding: 16px; margin-bottom: 16px; }
      .x-r { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--stroke-secondary); }
      .x-lab { flex: 1 1 50%; font: var(--type-label); min-width: 0; }
      .x-in { flex: 1 1 50%; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
      .x-in input { flex: 1; min-width: 0; }
      .x-flag { font: var(--type-label); font-weight: var(--weight-bold); width: 18px; color: var(--fill-system-red); }
      .x-warn { font: var(--type-caption); color: var(--text-secondary); width: 100%; }
      .x-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; justify-content: center; background: var(--fill-primary-on); border-top: 1px solid var(--stroke-primary); padding-bottom: env(safe-area-inset-bottom); }
      .x-nav button { flex: 1; max-width: 130px; min-height: 64px; border: 0; background: none; color: var(--text-secondary); font: var(--type-caption); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
      .x-nav button span { font-size: 20px; line-height: 1; }
      .x-nav button.x-on { color: var(--text-primary); font-weight: var(--weight-bold); }
      .x-a4 { color-scheme: light; background: #fff; color: #000; width: 210mm; max-width: 100%; min-height: 200mm; box-sizing: border-box; padding: 14mm; margin: 0 auto 16px; border: 1px solid var(--stroke-primary); font: var(--type-small); }
      .x-a4 h2 { font: var(--type-heading); text-align: center; margin: 0; }
      .x-a4 .x-addr { text-align: center; margin: 2px 0 10px; }
      .x-lh { border-bottom: 2px solid #000; margin-bottom: 10px; }
      .x-lh.x-np { border-bottom-style: dashed; }
      .x-pt { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 16px; padding: 8px 0; border-bottom: 1px solid #000; margin-bottom: 8px; }
      .x-a4 table { width: 100%; border-collapse: collapse; }
      .x-a4 th, .x-a4 td { text-align: left; padding: 3px 4px; vertical-align: top; }
      .x-a4 thead th { border-bottom: 1px solid #000; }
      .x-a4 .x-cat td { padding-top: 10px; font-weight: var(--weight-bold); text-transform: uppercase; text-align: center; }
      .x-a4 .x-tn td { font-weight: var(--weight-medium); text-decoration: underline; padding-top: 6px; }
      .x-a4 .x-ab td { font-weight: var(--weight-bold); }
      .x-sig { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 40px; break-inside: avoid; page-break-inside: avoid; }
      .x-sg { flex: 1; max-width: 45%; text-align: center; }
      .x-sg img { display: block; height: 16mm; max-width: 100%; margin: 0 auto 2px; object-fit: contain; }
      .x-sl { border-top: 1px solid #000; padding-top: 4px; min-height: 0; }
      .x-top { display: flex; gap: 12px; align-items: flex-start; }
      .x-hd { flex: 1; min-width: 0; }
      .x-qr { flex: none; width: 22mm; margin-bottom: 8px; }
      .x-qr img, .x-qr canvas { width: 100% !important; height: auto !important; }
      .x-dig { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 10px; }
      .x-dig > div { min-width: 0; }
      .x-dig p { margin: 2px 0 0; }
      .x-logo { height: 20mm; max-width: 35mm; object-fit: contain; flex: none; }
      .x-word { display: block; max-height: 12mm; max-width: 100%; object-fit: contain; }
      .x-dn { font: var(--type-heading); }
      .x-a4.x-brand .x-lh, .x-a4:not(.x-brand) .x-dig { display: none; }
      .x-a4.x-pdf { width: auto; min-height: 0; padding: 0; margin: 0; border: 0; font-size: 12px; }
      .x-a4.x-pdf:not(.x-brand) .x-lh { display: block; border-bottom-style: solid; }
      .x-prev { min-height: 0; padding: 16px; margin: 6px 0 14px; }
      .x-prev .x-dig { margin: 0; }
      .x-up { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
      .x-up img { height: 48px; max-width: 140px; object-fit: contain; background: #fff; border: 1px solid var(--stroke-secondary); border-radius: var(--r-s); padding: 4px; }
      .x-up .x-btn { display: inline-flex; align-items: center; }
      .x-cb { display: flex; gap: 10px; align-items: center; min-height: var(--tap); }
      .x-f.x-cb input { width: 22px; min-height: 22px; height: 22px; margin: 0; flex: none; }
      .x-empty { color: var(--text-secondary); font: var(--type-body); padding: 24px 0; }
      .x-tw { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
      .x-tw .x-test { margin-bottom: 0; flex: 1; min-width: 0; }
      .x-tw .x-chip { min-height: var(--tap); }
      .x-in select, .x-f select { flex: 1; min-width: 0; width: 100%; min-height: 48px; padding: 10px 14px; border-radius: var(--r-s); border: 1px solid var(--stroke-primary); background: var(--fill-primary-on); color: var(--text-primary); font: var(--type-body); font-size: 16px; }
      .x-sir .x-btn { min-width: var(--tap); padding: 8px 12px; }
      .x-a4 .x-ast { width: 70%; margin: 4px 0 6px; }
      .x-a4 .x-att { display: block; max-width: 100%; max-height: 240mm; margin: 6px 0; break-inside: avoid; page-break-inside: avoid; }
      .x-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 12px; }
      .x-sum div { display: flex; flex-direction: column; }
      .x-sum b { font: var(--type-heading); }
      .x-sum span { font: var(--type-small); color: var(--text-secondary); }
      @media (min-width: 600px) { .x-sum { grid-template-columns: repeat(4, 1fr); } }
      .x-sumh { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
      .x-sumh input { min-height: var(--tap); padding: 6px 10px; border-radius: var(--r-s); border: 1px solid var(--stroke-primary); background: var(--fill-primary-on); color: var(--text-primary); font: var(--type-label); font-size: 16px; }
      .x-fig { font: var(--type-body); font-weight: var(--weight-medium); text-align: right; flex: 1; }
      .x-r.x-tot .x-lab, .x-r.x-tot .x-fig { font-weight: var(--weight-bold); }
      .x-list .chip { flex: none; }
      .x-meter { height: 8px; border-radius: var(--r-pill); background: var(--fill-primary-on); overflow: hidden; margin: 8px 0; }
      .x-meter i { display: block; height: 100%; background: var(--fill-primary); }
      .x-meter.x-hi i { background: var(--fill-system-red); }
      .x-ovr { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; flex: 1 1 100%; }
      .x-ovr input { min-height: 44px; font-size: 16px; padding: 8px 10px; }
      .x-cov summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; font: var(--type-label); color: var(--text-secondary); }
      .x-cov > div { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; padding-top: 6px; }
      .x-a4 .x-n { text-align: right; white-space: nowrap; }
      .x-a4 .x-tr td { border-top: 1px solid #000; font-weight: var(--weight-bold); }
      .x-a4 .x-st { white-space: nowrap; }
      .x-a4 .x-st .x-btn { margin-left: 6px; }
      #rcpt { display: none; }
      /* keyboard-first */
      .page :focus-visible, .x-dlg :focus-visible { outline: 2px solid var(--x-ring); outline-offset: 2px; border-radius: var(--r-s); }
      .page input:focus-visible, .page select:focus-visible, .page textarea:focus-visible { border-color: var(--x-ring); }
      .x-hl { outline: 2px solid var(--x-ring); outline-offset: -2px; background: var(--fill-tertiary); }
      .x-test, .x-app input, .x-app select, .x-app [data-grp], #hl li { scroll-margin: 80px 0 160px; }
      .x-k { display: inline-block; margin-left: 8px; padding: 0 5px; border: 1px solid currentColor; border-radius: 6px; font: var(--type-caption); font-family: var(--sans); opacity: .7; line-height: 18px; }
      .x-nav .x-k { margin: 0; font-size: var(--size-caption); }
      .x-seg { display: flex; gap: 8px; margin-top: 6px; }
      .x-seg > * { flex: 1; }
      .x-ta { position: relative; }
      .x-tal { position: absolute; left: 0; right: 0; top: 100%; z-index: 8; list-style: none; margin: 4px 0 0; padding: 4px; background: var(--fill-primary-on); border: 1px solid var(--stroke-primary); border-radius: var(--r-s); box-shadow: var(--hark-shadow); }
      .x-tal li { padding: 10px 12px; border-radius: var(--r-s); color: var(--text-primary); font: var(--type-body); cursor: pointer; }
      .x-tal small { display: block; font: var(--type-small); color: var(--text-secondary); }
      .x-sel { max-height: 168px; overflow: auto; list-style: none; margin: 8px 0; padding: 4px; border: 1px solid var(--stroke-secondary); border-radius: var(--r-s); font: var(--type-small); }
      .x-sel li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: var(--r-s); }
      .x-sel:not(:focus) .x-hl { outline: 0; background: none; }
      .x-sel p { margin: 6px 10px; color: var(--text-secondary); }
      #hl li:focus-visible { outline-offset: -3px; }
      .x-dlg { max-width: 520px; width: calc(100% - 32px); border: 1px solid var(--stroke-primary); border-radius: var(--r-l); padding: 24px; background: var(--fill-primary-on); color: var(--text-primary); box-shadow: var(--hark-shadow); }
      .x-dlg::backdrop { background: rgb(0 0 0 / .45); }
      .x-dlg dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 16px; font: var(--type-small); }
      .x-dlg dt { white-space: nowrap; }
      .x-dlg dt .x-k { margin: 0 4px 0 0; opacity: 1; }
      .x-dlg dd { margin: 0; color: var(--text-secondary); }
      .x-toast { position: fixed; left: 50%; bottom: 150px; transform: translateX(-50%); z-index: 9; margin: 0; padding: 8px 16px; border-radius: var(--r-pill); background: var(--fill-primary); color: var(--text-primary-on); font: var(--type-label); pointer-events: none; }
      .x-toast:empty { display: none; }
      @media (hover: none), (pointer: coarse) { .x-k, .x-kb { display: none !important; } }
      .x-rc { color-scheme: light; background: #fff; color: #000; width: 72mm; font: 12px/1.4 var(--sans); }
      .x-rc h2 { font-size: 15px; font-weight: var(--weight-bold); text-align: center; margin: 0; }
      .x-rc p { margin: 2px 0; text-align: center; }
      .x-rc table { width: 100%; border-collapse: collapse; margin: 6px 0; }
      .x-rc td { padding: 2px 0; vertical-align: top; }
      .x-rc td + td { text-align: right; white-space: nowrap; padding-left: 8px; }
      .x-rc .x-hr td { border-top: 1px dashed #000; }
      .x-rc .x-bd td { font-weight: var(--weight-bold); }
      @media (max-width: 599px) { .x-a4 { padding: 5mm; font-size: 11px; } }
      /* Clear Report surfaces: white cards, white fields, muted status colors */
      .x-card, .x-test, .x-dlg, .x-tal { background: var(--x-surface); border: 1px solid var(--x-line); border-radius: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
      .x-test.x-on { background: var(--x-surface); border-color: var(--x-ink); }
      .x-f input, .x-f textarea, .x-in input, .x-search, .x-in select, .x-f select, .x-sumh input { background: var(--x-surface); border-color: var(--x-field); }
      input.x-calc { background: var(--fill-tertiary); border-color: var(--x-field); }
      .x-btn, .x-chip { background: var(--x-surface); border-color: var(--x-field); }
      .x-btn.x-on, .x-chip.x-on { background: #111; color: #fff; border-color: #111; }
      .x-meter { background: var(--x-line); }
      .x-flag[data-f="H"] { color: var(--x-red); }
      .x-flag[data-f="L"] { color: var(--x-blue); }
      .x-app .chip { background: color-mix(in srgb, var(--x-amber) 10%, #fff); color: var(--x-amber); }
      .x-app .chip::before { box-shadow: none; background: var(--x-amber); }
      .x-app .chip.x-blue { background: color-mix(in srgb, var(--x-blue) 10%, #fff); color: var(--x-blue); }
      .x-app .chip.x-blue::before { background: var(--x-blue); }
      .x-app .chip.x-green, .x-app .chip--solid { background: color-mix(in srgb, var(--x-green) 10%, #fff); color: var(--x-green); }
      .x-app .chip.x-green::before, .x-app .chip--solid::before { background: var(--x-green); }
      /* Printed report: A4, 12 mm margins, Inter, black on white, one left/right grid */
      .x-rep { color-scheme: light; display: flex; flex-direction: column; box-sizing: border-box; width: 210mm; max-width: 100%; min-height: 297mm; padding: 12mm; margin: 0 auto 16px; background: #fff; color: #000; border: 1px solid var(--stroke-primary); --x-min: 12px; font: 400 max(var(--x-min), 10.5px)/1.4 Inter, var(--sans), sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
      .x-rep p { margin: 0; }
      .x-rh { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
      .x-rh__brand, .x-rh__dig { display: flex; align-items: center; gap: 12px; min-width: 0; }
      .x-rh__logo { height: 56px; width: auto; max-width: 160px; object-fit: contain; flex: none; }
      .x-rh__word { height: 40px; width: auto; max-width: 280px; object-fit: contain; }
      .x-rh__name { display: block; font-size: 20px; font-weight: 700; line-height: 1.2; color: #000; }
      .x-rh__info { max-width: 45%; margin-left: auto; text-align: right; font-size: max(var(--x-min), 10.5px); line-height: 1.5; color: #333; word-break: keep-all; overflow-wrap: normal; }
      .x-rh__info span { white-space: nowrap; }
      .x-rh__rule { border-top: 1.5px solid #111; margin: 8px 0 10px; }
      .x-rep:not(.x-brand) .x-rh__dig, .x-rep.x-brand .x-rh__txt { display: none; }
      .x-rep.x-lhm:not(.x-pdf) .x-rh, .x-rep.x-lhm:not(.x-pdf) .x-rh__rule { opacity: .35; }
      .x-rep.x-lhm:not(.x-pdf) .x-rh__rule { border-top-style: dashed; }
      .x-pb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 0 12px; align-items: start; border: 1px solid #111; border-radius: 0; padding: 8px 10px; margin: 0 0 12px; }
      .x-pb dl { margin: 0; }
      .x-pb dl div { display: flex; gap: 4px; font-size: max(var(--x-min), 11px); line-height: 1.6; }
      .x-pb dt { flex: none; width: 70px; color: #666; white-space: nowrap; }
      .x-pb dd { margin: 0; min-width: 0; color: #000; font-weight: 500; overflow-wrap: anywhere; }
      .x-pb__qr { width: 64px; height: 64px; }
      .x-pb__qr img, .x-pb__qr canvas { width: 64px !important; height: 64px !important; }
      .x-rt { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: max(var(--x-min), 10.5px); }
      .x-rt thead th { background: #F2F2F2; color: #111; font-size: max(var(--x-min), 9.5px); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; text-align: left; padding: 5px 6px; }
      .x-rt td { padding: 4px 6px; text-align: left; vertical-align: top; border-bottom: 1px solid #E5E5E5; overflow-wrap: anywhere; }
      .x-rt .x-rt__res { font-weight: 700; }
      .x-rt .x-rt__fl { margin-left: 4px; font-weight: 700; }
      .x-rt .x-rt__title th { padding: 12px 6px 4px; text-align: center; font-size: max(var(--x-min), 10.5px); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid #999; break-after: avoid; page-break-after: avoid; }
      .x-rt .x-rt__note td { padding-top: 3px; font-size: max(var(--x-min), 9px); color: #666; border-bottom: 0; }
      .x-rt .x-rt__empty { padding: 16px 6px; text-align: center; font-style: italic; border-bottom: 0; }
      .x-rt .x-ast { width: 60%; border-collapse: collapse; margin: 4px 0 2px; }
      .x-rt .x-ast th, .x-rt .x-ast td { padding: 3px 6px; text-align: left; font-size: max(var(--x-min), 10px); border-bottom: 1px solid #E5E5E5; }
      .x-rt .x-ast th { font-size: max(var(--x-min), 9.5px); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #666; }
      .x-rep .x-att { display: block; max-width: 100%; max-height: 240mm; margin: 6px 0; break-inside: avoid; page-break-inside: avoid; }
      .x-rep .x-rep__end { margin-top: 14px; text-align: center; font-size: max(var(--x-min), 9px); color: #666; }
      .x-rsig { display: flex; justify-content: space-between; gap: 24px; margin-top: auto; padding-top: 40px; break-inside: avoid; page-break-inside: avoid; }
      .x-rsig > div { display: flex; flex-direction: column; align-items: flex-start; }
      .x-rsig > div + div { align-items: flex-end; text-align: right; }
      .x-rsig img { height: 40px; width: auto; max-width: 160px; object-fit: contain; margin-bottom: 2px; }
      .x-rsig hr { width: 160px; margin: 0 0 4px; border: 0; border-top: 1px solid #111; }
      .x-rsig b { font-size: max(var(--x-min), 10.5px); font-weight: 700; }
      .x-rsig small { font-size: max(var(--x-min), 9.5px); color: #555; line-height: 1.4; }
      .x-rfoot { display: flex; gap: 12px; margin-top: 12px; padding-top: 4px; border-top: 0.5px solid #BBB; font-size: max(var(--x-min), 8.5px); color: #767676; }
      .x-rfoot span { flex: 1; }
      .x-rfoot span:nth-child(2) { flex: 2.5; text-align: center; }
      .x-rfoot span:last-child { text-align: right; }
      .x-rep.x-pdf { --x-min: 0px; width: auto; max-width: none; min-height: 270mm; padding: 0; margin: 0; border: 0; }
      .x-rep.x-pdf .x-rfoot { display: none; }
      @media screen and (max-width: 599px) {
        .x-rep { padding: 5mm; min-height: 0; }
        .x-rh { flex-wrap: wrap; }
        .x-rh__info { max-width: none; margin-left: 0; text-align: left; }
        .x-pb { grid-template-columns: minmax(0, 1fr) auto; }
        .x-pb__qr { grid-column: 2; grid-row: 1 / span 3; }
      }
      @media print {
        .x-np, .x-brandbar, .x-nav, .x-dock, .nav, .foot, .x-toast { display: none !important; }
        .x-rep { --x-min: 0px; width: auto; max-width: none; padding: 0; margin: 0; border: 0; }
        .x-rep.x-brand:not(.x-bp) .x-rh__dig { display: none; }
        .x-rep.x-brand:not(.x-bp) .x-rh__txt { display: block; }
        .x-rep.x-lhm .x-rh, .x-rep.x-lhm .x-rh__rule, .x-rfoot { display: none; }
        .x-a4:not(.x-bp) .x-dig, .x-a4.x-bp .x-lh { display: none !important; }
        .x-a4.x-brand:not(.x-bp) .x-lh { display: block; }
        html, body, .page, .x-app { margin: 0 !important; padding: 0 !important; max-width: none !important; background: #fff !important; }
        .x-a4 { width: auto; min-height: 0; padding: 0; margin: 0; border: 0; font-size: 12px; }
        body.x-rcp .x-app > * { display: none !important; }
        body.x-rcp #rcpt { display: block !important; }
      }

/* Desktop layout (≥1024px): queue column, top tabs, full-width main */
      #queue { display: none; }
      @media (min-width: 1024px) {
        .x-brandbar { position: fixed; top: 0; left: 0; right: 0; z-index: 7; max-width: none; height: 56px; padding: 0 var(--gutter); background: var(--x-surface); border-bottom: 1px solid var(--x-line); }
        .x-app { max-width: none; margin: 0 0 0 320px; padding-top: 124px; }
        .x-nav { top: 56px; bottom: auto; left: 320px; justify-content: flex-start; gap: 4px; height: 52px; padding: 0 var(--gutter); border-top: 0; border-bottom: 1px solid var(--x-line); background: var(--x-bg); }
        .x-nav button { flex: none; max-width: none; min-height: 52px; flex-direction: row; gap: 6px; padding: 0 14px; font: var(--type-label); border-bottom: 2px solid transparent; }
        .x-nav button span { font-size: 15px; }
        .x-nav button.x-on { border-bottom-color: var(--x-ink); }
        .x-dock { bottom: 0; left: 320px; }
        .x-dock > div { max-width: none; }
        .x-toast { left: calc(50% + 160px); }
        #queue { display: block; position: fixed; top: 56px; bottom: 0; left: 0; width: 320px; z-index: 6; overflow-y: auto; background: var(--x-surface); border-right: 1px solid var(--x-line); box-sizing: border-box; }
        .x-qh { position: sticky; top: 0; background: var(--x-surface); padding: 16px var(--gutter) 12px; border-bottom: 1px solid var(--x-line); }
        .x-qh p { display: flex; justify-content: space-between; margin: 0 0 8px; font: var(--type-label); font-weight: var(--weight-bold); }
        .x-qh p small { font: var(--type-small); color: var(--text-secondary); }
        .x-qh input { width: 100%; box-sizing: border-box; min-height: var(--tap); padding: 0 12px; border: 1px solid var(--x-field); border-radius: var(--r-s); background: var(--x-surface); color: var(--x-ink); font: var(--type-body); }
        .x-ql { list-style: none; margin: 0; padding: 0; }
        .x-ql li { padding: 12px var(--gutter); border-bottom: 1px solid var(--x-line); cursor: pointer; min-height: var(--tap); }
        .x-ql li:hover { background: var(--fill-tertiary); }
        .x-ql li:focus-visible { outline: 2px solid var(--x-ring); outline-offset: -2px; }
        .x-ql li.x-cur { background: var(--fill-tertiary); box-shadow: inset 3px 0 0 var(--x-ink); }
        .x-ql .x-l1 { margin: 0 0 4px; font: var(--type-body); }
        .x-ql .x-l1 b { font-weight: 600; }
        .x-ql .x-l1 span, .x-ql .x-l2 { color: var(--text-secondary); }
        .x-ql .x-l2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font: var(--type-small); }
        .x-qe { padding: 16px var(--gutter); margin: 0; font: var(--type-small); color: var(--text-secondary); }
      }
      @media print { #queue { display: none !important; } }

/* Patient status chips, queue filter pills, Save & next */
      .x-app .chip.x-amber, #queue .chip.x-amber { background: color-mix(in srgb, var(--x-amber) 10%, #fff); color: var(--x-amber); }
      .x-app .chip.x-amber::before, #queue .chip.x-amber::before { box-shadow: none; background: var(--x-amber); }
      #queue .chip { background: color-mix(in srgb, var(--x-amber) 10%, #fff); color: var(--x-amber); }
      #queue .chip::before { box-shadow: none; background: var(--x-amber); }
      #queue .chip.x-blue { background: color-mix(in srgb, var(--x-blue) 10%, #fff); color: var(--x-blue); }
      #queue .chip.x-blue::before { background: var(--x-blue); }
      #queue .chip.x-green { background: color-mix(in srgb, var(--x-green) 10%, #fff); color: var(--x-green); }
      #queue .chip.x-green::before { background: var(--x-green); }
      /* Readable chip text: dot keeps the status colour, text is darkened for 4.5:1 */
      .x-app .chip, #queue .chip, .x-app .chip.x-amber, #queue .chip.x-amber { background: color-mix(in srgb, var(--x-amber) 10%, #fff); color: color-mix(in srgb, var(--x-amber) 65%, #000); }
      .x-app .chip.x-green, .x-app .chip--solid, #queue .chip.x-green { color: color-mix(in srgb, var(--x-green) 80%, #000); }
      .x-app .chip.x-blue, #queue .chip.x-blue { color: color-mix(in srgb, var(--x-blue) 85%, #000); }
      .x-qf { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
      .x-qf .x-chip { min-height: 36px; padding: 4px 10px; }
      .x-qf .x-chip small { margin-left: 4px; font: var(--type-caption); opacity: .75; }
      .x-dock .x-snp { flex: none; }
      @media (max-width: 520px) { .x-dock > div { flex-wrap: wrap; } .x-dock b { flex-basis: 100%; } .x-dock .x-btn { flex: 1; } }
      /* Report footer: one line, three cells */
      .x-nav button { min-width: var(--tap); }
      /* On screen: readable 12px floor and AA grey; print and PDF (--x-min: 0) get the 8px #888/#999 spec */
      .x-rfoot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; white-space: nowrap; font-size: max(var(--x-min), 8px); line-height: 1.4; color: #6B6B6B; letter-spacing: .02em; border-top: 0.5px solid #BBB; }
      .x-rfoot span, .x-rfoot span:nth-child(2), .x-rfoot span:last-child { flex: none; min-width: 0; }
      .x-rfoot span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; text-align: center; }
      /* End of report mark */
      .x-rend { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px 0; }
      .x-rend i { flex: none; width: 40px; border-top: 0.5px solid #BBB; }
      .x-rend span { font-size: max(var(--x-min), 8px); line-height: 1; letter-spacing: .2em; color: #6B6B6B; }
      .x-rep.x-pdf .x-rend span { color: #999; }
      .x-rep.x-pdf .x-rfoot { color: #888; }
      @media print { .x-rend span { color: #999 !important; } .x-rfoot { color: #888 !important; } }
      /* Signatures */
      .x-rsig hr { width: 150px; border: 0; border-top: 0.75px solid #333; }
      .x-rsig > div:first-child { align-items: flex-start; text-align: left; }
      .x-rsig > div + div { align-items: flex-end; text-align: right; }
      /* Report screen: preview + compact actions */
      .x-rlay { display: flex; flex-direction: column; }
      .x-ract { order: -1; display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
      .x-ract .x-sub { margin-bottom: 8px; }
      .x-act { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: var(--tap); padding: 0 12px; border-radius: 8px; border: 1px solid var(--x-field); background: var(--x-surface); color: var(--x-ink); font: 500 13px/1.2 var(--sans); text-transform: none; letter-spacing: 0; text-align: left; cursor: pointer; }
      .x-act:hover { border-color: var(--x-ink); }
      .x-act--pri { background: #111; color: #fff; border-color: #111; }
      .x-act:disabled { opacity: .45; cursor: default; }
      .x-act .x-k { margin: 0; padding: 0; border: 0; opacity: 1; font: 400 12px/1 var(--sans); color: var(--text-secondary); }
      .x-act--pri .x-k { color: rgba(255, 255, 255, .72); }
      .x-rview .x-rep { margin: 0 auto; }
      @media (min-width: 1024px) {
        body:has(.x-rlay) { overflow: hidden; }
        .x-app:has(.x-rlay) { height: 100vh; box-sizing: border-box; padding-top: 108px; padding-bottom: 0; overflow: hidden; }
        .x-rlay { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; height: calc(100vh - 108px); padding: 16px 0; box-sizing: border-box; }
        .x-ract { order: 0; margin: 0; min-height: 0; overflow: hidden; }
        .x-ract .x-h1 { margin-top: 0; }
        .x-act { min-height: 36px; height: 36px; }
        .x-rview { min-width: 0; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
        .x-rscale { flex: none; overflow: hidden; }
        .x-rview .x-rep { width: 210mm; max-width: none; min-height: 297mm; margin: 0; transform-origin: 0 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
      }
      .x-rep.x-pdf { transform: none !important; }
      @media print {
        .x-rlay, .x-rview, .x-rscale { display: block !important; width: auto !important; height: auto !important; overflow: visible !important; padding: 0 !important; }
        .x-rep { transform: none !important; }
        body:has(.x-rlay), .x-app:has(.x-rlay) { height: auto !important; overflow: visible !important; }
      }

/* ===== Global visual polish: calm, dense clinical UI (overrides only) ===== */
      .page, .x-app, #queue { font-variant-numeric: tabular-nums; }
      .x-fig, .x-a4 .x-n, .x-rc td + td, .x-sel li > span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
      .x-test { font-variant-numeric: tabular-nums; }

      /* Buttons: sentence case, quiet secondary, solid primary, no slabs */
      .x-btn, .x-big, .x-act, .x-chip { text-transform: none; letter-spacing: 0; box-shadow: none; }
      .x-btn, .x-big, .x-act { display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; padding: 0 12px; border-radius: 6px; border: 1px solid #DCDCD8; background: #FFF; color: #111; font: 500 13px/1.2 var(--sans); transition: background-color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out); }
      .x-btn:hover:not(:disabled), .x-act:hover:not(:disabled) { background: #F4F4F1; border-color: #DCDCD8; }
      .x-big, .x-btn.x-on, .x-act--pri, .x-dock .x-btn.x-on, .x-dlg .x-btn.x-on { background: #111; color: #FFF; border-color: #111; }
      .x-big:hover:not(:disabled), .x-btn.x-on:hover:not(:disabled), .x-act--pri:hover:not(:disabled) { background: #2B2B2B; border-color: #2B2B2B; }
      .x-big { width: auto; min-height: 0; padding: 0 14px; margin: 4px 0 12px; }
      .x-row2 > .x-big, .x-seg > .x-btn, .x-ovr > * { width: 100%; }
      .x-act { justify-content: space-between; width: 100%; }

      /* Filter pills */
      .x-chip { border-radius: 999px; border: 1px solid #DCDCD8; background: #FFF; color: #111; font: 500 12px/1.2 var(--sans); }
      .x-chip:hover:not(.x-on) { background: #F4F4F1; }
      .x-chip.x-on { background: #111; color: #FFF; border-color: #111; }

      /* Status chips: small, soft tints, darker text */
      .x-app .chip, #queue .chip { height: 20px; box-sizing: border-box; padding: 0 8px 0 6px; gap: 4px; border-radius: 999px; font: 500 12px/20px var(--sans); white-space: nowrap; background: #FBF3E4; color: #8A5A12; }
      .x-app .chip::before, #queue .chip::before { width: 5px; height: 5px; box-shadow: none; background: #B7791F; }
      .x-app .chip.x-amber, #queue .chip.x-amber { background: #FBF3E4; color: #8A5A12; }
      .x-app .chip.x-blue, #queue .chip.x-blue { background: #EAF1FA; color: #22558C; }
      .x-app .chip.x-blue::before, #queue .chip.x-blue::before { background: #2B6CB0; }
      .x-app .chip.x-green, .x-app .chip--solid, #queue .chip.x-green { background: #E9F5EE; color: #246845; }
      .x-app .chip.x-green::before, .x-app .chip--solid::before, #queue .chip.x-green::before { background: #2F855A; }

      /* Keyboard hints */
      .x-k, .x-act .x-k, .x-nav .x-k { display: inline-block; margin: 0 0 0 6px; padding: 0 4px; border: 1px solid #E3E3DF; border-radius: 4px; background: transparent; color: #62625D; font: 400 12px/16px var(--sans); opacity: 1; letter-spacing: 0; text-transform: none; }
      .x-big .x-k, .x-btn.x-on .x-k, .x-act--pri .x-k { color: rgba(255, 255, 255, .62); border-color: rgba(255, 255, 255, .22); }
      .x-act .x-k, .x-nav .x-k { margin: 0; }
      .x-dlg dt .x-k { margin: 0 4px 0 0; }

      /* Cards, rows, gaps */
      .x-card { padding: 14px 16px; border-radius: 8px; border: 1px solid #EAEAE6; background: #FFF; box-shadow: none; margin-bottom: 12px; }
      .x-test { border-radius: 6px; border: 1px solid #EAEAE6; box-shadow: none; margin-bottom: 6px; }
      .x-test.x-on { border-color: #111; }
      .x-tal { border-radius: 8px; border-color: #EAEAE6; }
      .x-sub { margin-bottom: 12px; }
      .x-f { margin-bottom: 12px; }
      .x-list { border-top-color: #EFEFEB; }
      .x-list li { min-height: 40px; box-sizing: border-box; padding: 6px 0; border-bottom-color: #EFEFEB; }
      .x-r { min-height: 40px; box-sizing: border-box; padding: 6px 0; border-top-color: #EFEFEB; }
      .x-ql li { border-bottom-color: #EFEFEB; }
      .x-sel li { min-height: 32px; align-items: center; box-sizing: border-box; }

      /* Section titles */
      .x-h3 { font: 600 12px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: #6B6B6B; margin: 0 0 10px; }
      .x-h1 { font-weight: 600; letter-spacing: -0.01em; }

      /* Controls: white fields, hairline border, 6px radius */
      .x-f input, .x-f select, .x-f textarea, .x-in input, .x-in select, .x-search, .x-sumh input, .x-qh input { border-radius: 6px; border: 1px solid #DCDCD8; background: #FFF; box-shadow: none; }
      .x-f input.x-calc, .x-in input.x-calc { background: var(--fill-tertiary); }
      .x-f { font: 500 12px/1.4 var(--sans); color: #6B6B6B; }
      .x-f input, .x-f select, .x-f textarea { margin-top: 4px; }
      .x-f textarea { min-height: 56px; }
      .x-f.x-cb { font: 400 13px/1.4 var(--sans); color: #111; }
      .x-f.x-cb input { width: 16px; height: 16px; min-height: 16px; margin: 0; }

      /* Mobile (<1024px): 15px base, touch-sized controls, same styles */
      @media (max-width: 1023.98px) {
        .x-btn, .x-big, .x-act { min-height: var(--tap); }
        .x-seg .x-btn, [data-grp] .x-btn { min-height: var(--tap) !important; }
        .x-h1 { font-size: 20px; line-height: 1.3; margin: 4px 0 4px; }
      }

      /* Desktop (≥1024px): 13px base, 32px controls, 48px header, 40px tabs */
      @media (min-width: 1024px) {
        :root, :root[data-theme] { --size-body: 13px; --size-small: 12px; --size-meta: 12px; --size-heading: 14px; --size-title: 18px; --size-figure: 20px; --lh: 1.45; }
        body { font-size: 13px; line-height: 1.45; }
        .x-h1 { font: 600 18px/1.3 var(--sans); letter-spacing: -0.01em; margin: 0 0 4px; }
        .x-sub { font: 400 12.5px/1.45 var(--sans); }
        .x-btn, .x-act { height: 32px; min-height: 32px; max-height: 36px; }
        .x-big { height: 34px; min-height: 34px; max-height: 36px; }
        .x-seg .x-btn, [data-grp] .x-btn { min-height: 32px !important; height: 32px; }
        .x-sir .x-btn { min-width: 32px; padding: 0 10px; }
        .x-chip, .x-tw .x-chip, .x-qf .x-chip { min-height: 28px; height: 28px; padding: 0 10px; display: inline-flex; align-items: center; }
        .x-f input, .x-f select, .x-in input, .x-in select, .x-search, .x-sumh input, .x-qh input, .x-ovr input { height: 32px; min-height: 32px; padding: 0 10px; font: 400 13px/1.45 var(--sans); }
        .x-f textarea { min-height: 56px; padding: 6px 10px; font: 400 13px/1.45 var(--sans); }
        .x-f.x-cb { min-height: 32px; }
        .x-test { min-height: 40px; padding: 6px 12px; font: 400 13px/1.4 var(--sans); }
        .x-test small { font-size: 12px; color: #62625D; }
        .x-list b { font: 500 13px/1.4 var(--sans); }
        .x-list small, .x-lab small { font-size: 12px; color: #62625D; }
        .x-lab, .x-fig { font: 400 13px/1.4 var(--sans); }
        .x-r.x-tot .x-lab, .x-r.x-tot .x-fig { font-weight: 600; }
        .x-sum b { font: 600 16px/1.3 var(--sans); }
        .x-sum span { font: 500 12px/1.4 var(--sans); color: #6B6B6B; }
        .x-empty { font: 400 13px/1.45 var(--sans); padding: 16px 0; }
        .x-tal li { padding: 6px 10px; font: 400 13px/1.4 var(--sans); }

        /* Top header 48px, tabs 40px */
        .x-brandbar { height: 48px; }
        .x-brandbar b { padding: 3px 10px; font-size: 13px; }
        .x-nav { top: 48px; height: 40px; gap: 2px; }
        .x-nav button { min-height: 40px; height: 40px; padding: 0 12px; font: 500 13px/1 var(--sans); color: #6B6B6B; border-bottom: 2px solid transparent; }
        .x-nav button span { font-size: 13px; }
        .x-nav button:hover { color: #111; }
        .x-nav button.x-on { color: #111; font-weight: 600; border-bottom-color: #111; }
        .x-app { padding-top: 104px; }
        .x-app:has(.x-rlay) { padding-top: 88px; }
        .x-rlay { height: calc(100vh - 88px); }

        /* Left queue */
        #queue { top: 48px; }
        .x-qh { padding: 12px var(--gutter) 10px; }
        .x-qh p { font: 600 12px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: #6B6B6B; }
        .x-qh p small { font: 400 12px/1.3 var(--sans); text-transform: none; letter-spacing: 0; color: #62625D; }
        .x-ql li { min-height: 52px; box-sizing: border-box; padding: 8px var(--gutter); display: flex; flex-direction: column; justify-content: center; gap: 2px; }
        .x-ql .x-l1 { margin: 0; font: 400 12.5px/1.35 var(--sans); }
        .x-ql .x-l1 b { font-weight: 600; }
        .x-ql .x-l1 span, .x-ql .x-l2 { color: #5E5E59; }
        .x-ql .x-l2 { font: 400 12px/1.35 var(--sans); gap: 6px; }
        .x-qe { font: 400 12px/1.4 var(--sans); }
        .x-dock > div { padding: 8px var(--gutter); }
        .x-dock b { font: 500 13px/1.4 var(--sans); }
      }

/* Simple F-key scheme: bottom key strip (desktop only) and cheat-sheet note */
      .x-keynote { margin: 12px 0; font: 400 12px/1.4 var(--sans); color: #62625D; }
      .x-keynote .x-k { margin: 0 2px; }
      .x-keys { display: none; }
      @media (min-width: 1024px) {
        .x-keys { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; display: flex; align-items: center; gap: 2px; height: 32px; padding: 0 var(--gutter); box-sizing: border-box; background: var(--x-surface); border-top: 1px solid var(--x-line); overflow: hidden; }
        .x-keys button { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 31px; padding: 0 10px; border: 0; border-radius: 0; background: none; color: #4A4A46; font: 500 12px/1 var(--sans); white-space: nowrap; cursor: pointer; }
        .x-keys button:hover { background: var(--fill-tertiary); color: #111; }
        .x-keys button:focus-visible { outline: 2px solid var(--x-ring); outline-offset: -2px; }
        .x-keys kbd { display: inline-block; min-width: 14px; height: 18px; padding: 0 4px; box-sizing: content-box; border: 1px solid #DCDCD8; border-bottom-width: 2px; border-radius: 4px; background: var(--x-surface); color: #111; font: 600 12px/16px var(--sans); text-align: center; }
        #queue { bottom: 32px; }
        .x-dock { bottom: 32px; }
        .x-toast { bottom: 182px; }
        .x-app { padding-bottom: 182px; }
        .x-app:has(.x-rlay) { height: calc(100vh - 32px); padding-bottom: 0; }
        .x-rlay { height: calc(100vh - 120px); }
      }
      @media print { .x-keys { display: none !important; } }

/* Settings sub-menu (desktop only): one section at a time, panel scrolls, page does not */
      @media (min-width: 1024px) {
        body:has(.x-set) { overflow: hidden; }
        .x-app:has(.x-set) { display: flex; flex-direction: column; height: calc(100vh - 32px); box-sizing: border-box; padding-bottom: 0; overflow: hidden; }
        .x-set { flex: 1; min-height: 0; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; margin-top: 12px; }
        .x-smenu { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; padding: 0 12px 16px 0; border-right: 1px solid var(--x-line); }
        .x-smenu button { min-height: var(--tap); padding: 0 12px; border: 0; border-radius: var(--r-s); background: none; color: var(--text-secondary); font: var(--type-label); text-align: left; cursor: pointer; }
        .x-smenu button:hover { background: var(--fill-tertiary); color: var(--x-ink); }
        .x-smenu button:focus-visible { outline: 2px solid var(--x-ring); outline-offset: -2px; }
        .x-smenu button[aria-current="true"] { background: var(--fill-tertiary); color: var(--x-ink); font-weight: var(--weight-medium); box-shadow: inset 3px 0 0 var(--x-ink); }
        .x-spanel { min-height: 0; overflow-y: auto; padding: 0 8px 24px 0; }
        .x-spane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; align-content: start; }
        .x-spane[hidden] { display: none; }
        .x-spane > :not(.x-f), .x-spane > p.x-f, .x-spane > label.x-f:has(textarea) { grid-column: 1 / -1; }
        .x-spane > h2.x-h3 { margin-top: 0; }
        .x-spane > .x-btn { justify-self: start; }
        .x-spane .x-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
        .x-spane .x-card > :not(.x-f) { grid-column: 1 / -1; }
        .x-spane .x-card > .x-btn { justify-self: start; }
        .x-scl { list-style: none; margin: 0 0 16px; padding: 0; }
        .x-scl li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--x-line); font: var(--type-body); }
        .x-scl li span { color: var(--text-secondary); }
      }

/* Compact patient form */
      .x-pf .x-f { margin: 0; }
      .x-pfh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
      .x-pfh .x-h1 { margin: 0; }
      .x-pfid { font: var(--type-caption); color: var(--text-secondary); white-space: nowrap; }
      .x-pfid b { color: var(--text-primary); font-weight: var(--weight-medium); }
      .x-pfr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
      .x-pfr + .x-pfr { margin-top: 12px; }
      .x-pfa > label, .x-pfg > span { display: block; }
      .x-pfag { display: flex; margin-top: 6px; }
      .x-pf .x-pfag input { margin: 0; width: 96px; flex: none; border-top-right-radius: 0; border-bottom-right-radius: 0; -moz-appearance: textfield; appearance: textfield; }
      .x-pfag input::-webkit-outer-spin-button, .x-pfag input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
      .x-pf .x-pfu { margin: 0; gap: 0; flex: none; }
      .x-pf .x-pfu .x-btn { min-width: 44px; padding: 0 12px; border-radius: 0; margin-left: -1px; }
      .x-pf .x-pfu .x-btn:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
      .x-pf .x-pfs { gap: 0; }
      .x-pf .x-pfs .x-btn { min-width: 44px; padding: 0 12px; border-radius: 0; margin-left: -1px; }
      .x-pf .x-pfs .x-btn:first-child { margin-left: 0; border-radius: 6px 0 0 6px; }
      .x-pf .x-pfs .x-btn:last-child { border-radius: 0 6px 6px 0; }
      .x-pf .x-pfu .x-k, .x-pf .x-pfs .x-k { display: none; }
      .x-pfd { position: relative; }
      .x-pfd input { padding-right: 48px !important; }
      .x-pfplus { position: absolute; right: 4px; bottom: 2px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--text-primary); font: 500 18px/1 var(--sans); cursor: pointer; }
      .x-pfplus:hover { background: var(--fill-tertiary); }
      .x-pff { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--stroke-secondary); }
      .x-pff .x-big { width: auto; margin: 0; padding: 0 20px; border-radius: 6px; }
      .x-pfdel { min-height: var(--tap); padding: 0 8px; margin-left: -8px; border: 0; border-radius: 6px; background: transparent; color: var(--text-secondary); font: var(--type-label); cursor: pointer; }
      .x-pfdel:hover { color: var(--text-primary); text-decoration: underline; }
      .x-dd form { display: grid; gap: 12px; }
      .x-dd .x-f { margin: 0; }
      .x-dd h2 { margin: 0; }
      .x-dd .x-pff { margin-top: 4px; }
      .x-dd .x-pff div { display: flex; gap: 8px; margin-left: auto; }
      @media (min-width: 1024px) {
        .x-pf { max-width: 1100px; padding: 16px 20px; box-sizing: border-box; }
        .x-pf .x-f { font: 500 12px/1.4 var(--sans); }
        .x-pf .x-f input { margin-top: 6px; }
        .x-pfr1 { grid-template-columns: 40% auto auto; justify-content: start; column-gap: 16px; }
        .x-pfr2 { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; }
        .x-pf .x-pfag input { width: 64px; }
        .x-pf .x-pfu .x-btn, .x-pf .x-pfs .x-btn { min-width: 32px; padding: 0 10px; height: 32px; }
        .x-pfplus { right: 2px; bottom: 2px; width: 28px; height: 28px; font-size: 16px; }
        .x-pfd input { padding-right: 34px !important; }
        .x-pff { margin-top: 12px; }
        .x-pfdel { min-height: 32px; }
        .x-dd { max-width: 400px; padding: 20px; }
      }

/* Results entry: compact cards, dense grid rows, keyboard pickers */
      .x-rc { background: var(--x-surface); border: 1px solid var(--x-line); border-radius: 8px; margin: 0 0 10px; }
      .x-rch { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 32px; padding: 0 12px; box-sizing: border-box; border-bottom: 1px solid var(--x-line); background: var(--fill-tertiary); border-radius: 8px 8px 0 0; }
      .x-rch h2 { margin: 0; font: 600 13px/1.2 var(--sans); color: var(--x-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .x-rch span { flex: none; font: 400 12px/1 var(--sans); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
      .x-rch span.x-full { color: var(--x-green); }
      .x-gb, .x-rcu { padding: 0 12px; }
      .x-gw { display: grid; grid-template-columns: minmax(0, 1fr) 110px minmax(56px, .4fr) minmax(72px, .55fr) 20px; column-gap: 12px; align-items: center; min-height: 32px; box-sizing: border-box; border-top: 1px solid var(--x-line); break-inside: avoid; }
      .x-gb > .x-gw:first-child { border-top: 0; }
      .x-gp { font: 400 13px/1.3 var(--sans); color: var(--x-ink); min-width: 0; }
      .x-gm { display: contents; }
      .x-gu, .x-gr { font: 400 12px/1.3 var(--sans); color: var(--text-secondary); min-width: 0; overflow-wrap: anywhere; }
      .x-gw > .x-flag { width: auto; font: 700 13px/1 var(--sans); text-align: center; }
      .x-gw > .x-warn { grid-column: 1 / -1; padding: 0 0 6px; font: 400 12px/1.3 var(--sans); }
      .x-gw > .x-warn:empty { display: none; }
      .x-gi, .x-qv { box-sizing: border-box; width: 110px; height: 26px; margin: 0; padding: 0 8px; border: 1px solid var(--x-field); border-radius: 6px; background: var(--x-surface); color: var(--x-ink); font: 400 13px/1 var(--sans); font-variant-numeric: tabular-nums; }
      .x-gn { text-align: right; }
      .x-cv { padding: 0 9px; font: italic 400 13px/1 var(--sans); color: var(--text-secondary); text-align: right; font-variant-numeric: tabular-nums; }
      .x-gt > .x-gi { grid-column: 2 / -1; justify-self: start; width: 160px; transition: width var(--dur-quick) var(--ease-out); }
      .x-glong > .x-gi:focus { width: 100%; }
      .x-gq > .x-qc { grid-column: 2 / -1; }
      .x-qc { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 3px 0; }
      .x-qv { flex: none; caret-color: transparent; cursor: default; text-overflow: ellipsis; }
      .x-qv::selection { background: transparent; }
      .x-qv.x-dflt { color: var(--text-secondary); }
      .x-qps { display: flex; flex-wrap: wrap; gap: 4px; }
      .x-qp { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border: 1px solid var(--x-line); border-radius: 999px; background: var(--x-surface); color: var(--text-secondary); font: 500 12px/1 var(--sans); white-space: nowrap; cursor: pointer; }
      .x-qp b { font-weight: 600; color: var(--x-ink); }
      .x-qp:hover { border-color: var(--x-field); color: var(--x-ink); }
      .x-qp.x-qd { border-style: dashed; border-color: var(--x-field); }
      .x-qp[aria-pressed="true"] { background: var(--x-ink); border-color: var(--x-ink); color: var(--x-surface); }
      .x-qp[aria-pressed="true"] b { color: var(--x-surface); opacity: .7; }
      .x-rscr input { scroll-margin: 40px 0 40px; }
      .x-rft { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 10px 0; }
      .x-rft .x-big { width: auto; margin: 0; padding: 0 20px; }
      .x-rft p { margin: 0; font: 400 12px/1.4 var(--sans); color: var(--text-secondary); }
      @media (max-width: 1023.98px) {
        .x-gw { grid-template-columns: minmax(0, 1fr) 110px 20px; column-gap: 10px; padding: 6px 0; }
        .x-gw > .x-gp { grid-column: 1; grid-row: 1; }
        .x-gm { display: block; grid-column: 1; grid-row: 2; }
        .x-gu:not(:empty) + .x-gr:not(:empty)::before { content: " · "; }
        .x-gw > .x-gi, .x-gw > .x-cv { grid-column: 2; grid-row: 1 / span 2; }
        .x-gw > .x-flag { grid-column: 3; grid-row: 1 / span 2; }
        .x-gq > .x-qc, .x-gt > .x-gi { grid-column: 1 / -1; grid-row: auto; margin-top: 6px; }
        .x-gt > .x-gi { width: 100%; }
        .x-gi, .x-qv { height: var(--tap); font-size: 15px; }
        .x-qp { min-height: var(--tap); padding: 0 12px; font-size: 13px; }
      }
      @media (min-width: 1024px) {
        body:has(.x-res) { overflow: hidden; }
        .x-app:has(.x-res) { display: flex; flex-direction: column; height: calc(100vh - 32px); box-sizing: border-box; padding-bottom: 0; overflow: hidden; }
        .x-res { flex: 1; min-height: 0; display: flex; flex-direction: column; }
        .x-res .x-sub { margin-bottom: 10px; }
        .x-rscr { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 4px 12px 2px; }
        .x-rft { flex: none; border-top: 1px solid var(--x-line); }
        .x-rcu .x-r { min-height: 32px; padding: 3px 0; }
        .x-rcu .x-in input, .x-rcu .x-in select { height: 26px; min-height: 26px; }
        .x-rcu [data-grp] .x-btn, .x-rcu .x-btn { height: 26px !important; min-height: 26px !important; }
      }
      @media (min-width: 1400px) {
        .x-gb.x-two { columns: 2; column-gap: 32px; column-rule: 1px solid var(--x-line); }
        .x-gb.x-two > .x-gw { border-top: 0; border-bottom: 1px solid var(--x-line); }
      }

/* Tests screen, desktop (≥1024px): search + panels + 3-column list on the left, selected card on the right; no page scroll */
      @media (min-width: 1024px) {
        body:has(.x-tdk) { overflow: hidden; }
        .x-app:has(.x-tdk) { display: flex; flex-direction: column; height: calc(100vh - 32px); box-sizing: border-box; padding-bottom: 16px; overflow: hidden; }
        .x-tdk { flex: 1; min-height: 0; display: flex; gap: 16px; }
        .x-tdl { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
        .x-tdl .x-search { flex: none; width: 100%; box-sizing: border-box; height: 36px; min-height: 36px; margin: 0; }
        .x-tdp { flex: none; display: flex; flex-wrap: wrap; gap: 6px; }
        .x-tdp .x-chip { cursor: pointer; }
        .x-tdlist { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; columns: 3; column-gap: 24px; padding: 12px 12px 16px; box-sizing: border-box; background: var(--x-surface); border: 1px solid var(--x-line); border-radius: 8px; }
        .x-tdg h3 { margin: 0; padding: 12px 6px 4px; font: 600 11px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: #6B6B6B; break-after: avoid; }
        .x-tdg:first-child h3 { padding-top: 0; }
        .x-tdt { display: flex; align-items: center; gap: 8px; width: 100%; height: 28px; margin: 0; padding: 0 6px; box-sizing: border-box; border: 0; border-radius: 4px; background: none; color: var(--x-ink); font: 400 13px/1 var(--sans); text-align: left; cursor: pointer; break-inside: avoid; }
        .x-tdt:hover { background: var(--fill-tertiary); }
        .x-tdt.x-hl { background: var(--fill-tertiary); box-shadow: inset 0 0 0 1px var(--x-ink); }
        .x-tdt i { flex: none; width: 14px; height: 14px; box-sizing: border-box; border: 1px solid #A8A8A3; border-radius: 3px; background: var(--x-surface); }
        .x-tdt.x-on i { background: var(--x-ink); border-color: var(--x-ink); }
        .x-tdt.x-on i::after { content: ""; display: block; width: 3px; height: 7px; margin: 1px auto 0; border: solid #FFF; border-width: 0 2px 2px 0; transform: rotate(45deg); }
        .x-tdt span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .x-tdt small { flex: none; font: 400 12px/1 var(--sans); color: #6B6B6B; font-variant-numeric: tabular-nums; }
        .x-tdlist .x-empty { padding: 0 6px; }
        .x-tdr { flex: none; width: 300px; min-height: 0; display: flex; flex-direction: column; box-sizing: border-box; background: var(--x-surface); border: 1px solid var(--x-line); border-radius: 8px; }
        .x-tdh { flex: none; margin: 0; padding: 12px 16px; font: 600 13px/1.3 var(--sans); color: var(--x-ink); border-bottom: 1px solid var(--x-line); }
        .x-tdh span { font-weight: 400; color: #6B6B6B; }
        .x-tds { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; margin: 0; padding: 4px 0; }
        .x-tds li { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 6px 0 16px; font: 400 13px/1.3 var(--sans); }
        .x-tds li:hover { background: var(--fill-tertiary); }
        .x-tdn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .x-tdpr { flex: none; font: 400 12px/1 var(--sans); color: #6B6B6B; font-variant-numeric: tabular-nums; }
        .x-tdo { flex: none; height: 20px; padding: 0 6px; box-sizing: border-box; border: 1px dashed #C4C4BF; border-radius: 4px; background: none; color: #6B6B6B; font: 500 12px/18px var(--sans); cursor: pointer; }
        .x-tdo:hover { border-color: #6B6B6B; color: var(--x-ink); }
        .x-tdo.x-on { border: 1px solid #2B6CB0; background: #EAF1FA; color: #22558C; }
        .x-tdx { flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: none; color: #6B6B6B; font: 400 16px/1 var(--sans); cursor: pointer; }
        .x-tdx:hover { background: var(--x-line); color: var(--x-ink); }
        .x-tdt:focus-visible, .x-tdo:focus-visible, .x-tdx:focus-visible { outline: 2px solid var(--x-ring); outline-offset: -2px; }
        .x-tde { padding: 12px 16px !important; font: 400 12px/1.4 var(--sans) !important; color: #6B6B6B; }
        .x-tds li.x-tde:hover { background: none; }
        .x-tdf { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--x-line); }
        .x-tdsum { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 4px; font: 600 16px/1.3 var(--sans); color: var(--x-ink); font-variant-numeric: tabular-nums; }
        .x-tdsum span { font: 500 13px/1.3 var(--sans); color: #6B6B6B; }
        .x-tdf .x-btn { width: 100%; height: 36px; min-height: 36px; max-height: 36px; justify-content: space-between; }
      }
      /* Tests screen, mobile: same behaviour, quieter rows with a checkbox square */
      @media (max-width: 1023.98px) {
        .x-test { gap: 10px; min-height: 52px; padding: 8px 12px; border-color: #EAEAE6; background: var(--x-surface); }
        .x-test i { flex: none; width: 20px; height: 20px; display: grid; place-items: center; box-sizing: border-box; border: 1px solid #A8A8A3; border-radius: 5px; color: transparent; font: 600 12px/1 var(--sans); }
        .x-test.x-on { background: var(--x-surface); border-color: var(--x-ink); }
        .x-test.x-on i { background: var(--x-ink); border-color: var(--x-ink); color: #FFF; }
        .x-test.x-hl { box-shadow: inset 0 0 0 1px var(--x-ink); }
        .x-sel li { font: 400 14px/1.3 var(--sans); }
      }

/* Home, header and bill polish (desktop ≥1024px), Out toggle, no floating badge */
      .badge, [class*="powered" i], [id*="powered" i] { display: none !important; }
      .x-hdx { display: none; }
      @media (min-width: 1024px) {
        /* Tests: Out toggle + 12px category headings */
        .x-tdg h3 { font-size: 12px; }
        .x-tdo { border: 1px solid #C4C4BF; background: var(--x-surface); color: #6B6B6B; }
        .x-tdo:hover { border-color: #6B6B6B; color: var(--x-ink); }
        .x-tdo.x-on, .x-tdo.x-on:hover { border: 1px solid #111; background: #111; color: #FFF; }

        /* Header 48px: wordmark | search 360 | date, lab, New patient, Home, Settings */
        .x-brandbar { display: grid; grid-template-columns: minmax(0, 1fr) 360px minmax(0, 1fr); gap: 16px; align-items: center; height: 48px; }
        .x-brandbar > b { justify-self: start; }
        .x-hdx { display: flex; }
        .x-hs { position: relative; }
        .x-hs input { width: 360px; height: 32px; box-sizing: border-box; padding: 0 10px; border: 1px solid #DCDCD8; border-radius: 6px; background: var(--x-surface); color: var(--x-ink); font: 400 13px/1.45 var(--sans); }
        .x-hs input::placeholder { color: #6B6B6B; }
        .x-hs input:focus-visible { outline: 2px solid var(--x-ring); outline-offset: 2px; }
        .x-hsl { position: absolute; left: 0; right: 0; top: 36px; z-index: 9; list-style: none; margin: 0; padding: 4px; max-height: 320px; overflow-y: auto; background: var(--x-surface); border: 1px solid var(--x-line); border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, .08); }
        .x-hsl li { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border-radius: 4px; cursor: pointer; font: 400 13px/1.35 var(--sans); }
        .x-hsl li b { font-weight: 600; }
        .x-hsl li small { font: 400 12px/1.3 var(--sans); color: #62625D; }
        .x-hsl li:hover, .x-hsl li.x-hl { background: var(--fill-tertiary); outline: 0; }
        .x-hsl li.x-hse { cursor: default; color: #62625D; }
        .x-hr8 { justify-self: end; align-items: center; gap: 10px; min-width: 0; }
        .x-hdate { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 1px solid #DCDCD8; border-radius: 999px; font: 500 12px/1 var(--sans); color: var(--x-ink); white-space: nowrap; }
        .x-hlab { flex: none; white-space: nowrap; font: 400 12px/1.3 var(--sans); color: #62625D; }
        .x-brandbar { grid-template-columns: minmax(0, 1fr) 360px minmax(max-content, 1fr); }
        .x-hr8 { gap: 8px; }
        .x-hr8 .x-btn.x-on { flex: none; height: 30px; min-height: 30px; padding: 0 10px; font-size: 12px; }
        .x-hico { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: none; color: #4A4A46; cursor: pointer; }
        .x-hico:hover { background: var(--fill-tertiary); color: var(--x-ink); }
        .x-hico[aria-current="page"] { border-color: #DCDCD8; background: var(--fill-tertiary); color: var(--x-ink); }
        .x-hico:focus-visible { outline: 2px solid var(--x-ring); outline-offset: 2px; }
        .x-hico svg { width: 18px; height: 18px; }
        /* step tabs only */
        .x-nav [data-go="home"], .x-nav [data-go="settings"], .x-nav .x-kb { display: none !important; }

        /* Home */
        body:has(.x-hm), body:has(.x-bdk) { overflow: hidden; }
        .x-app:has(.x-hm), .x-app:has(.x-bdk) { display: flex; flex-direction: column; height: calc(100vh - 32px); box-sizing: border-box; padding-bottom: 16px; overflow: hidden; }
        .x-hm { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
        .x-hmh { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
        .x-hmh .x-h1 { margin: 0; }
        .x-hmh input { height: 32px; padding: 0 10px; border: 1px solid #DCDCD8; border-radius: 6px; background: var(--x-surface); color: var(--x-ink); font: 400 13px/1 var(--sans); }
        .x-tiles { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
        .x-tile { height: 72px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 16px; background: var(--x-surface); border: 1px solid var(--x-line); border-radius: 8px; }
        .x-tile b { font: 600 20px/1.2 var(--sans); font-variant-numeric: tabular-nums; color: var(--x-ink); }
        .x-tile span { font: 400 12px/1.3 var(--sans); color: #6B6B6B; }
        .x-hlinks { flex: none; display: flex; gap: 16px; margin: -4px 0 0; }
        .x-hlinks button { padding: 2px 0; border: 0; background: none; color: #4A4A46; font: 500 12px/1.4 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
        .x-hlinks button:hover { color: var(--x-ink); }
        .x-hp2 { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        .x-hpn { min-height: 0; display: flex; flex-direction: column; background: var(--x-surface); border: 1px solid var(--x-line); border-radius: 8px; }
        .x-hpn h2 { flex: none; margin: 0; padding: 12px 16px; font: 600 13px/1.3 var(--sans); color: var(--x-ink); border-bottom: 1px solid var(--x-line); }
        .x-hpn h2 span { font-weight: 400; color: #6B6B6B; }
        .x-hpn ul { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; margin: 0; padding: 0; }
        .x-hpn li { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px 0 0; border-bottom: 1px solid #EFEFEB; }
        .x-hpo { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 0 6px 16px; border: 0; background: none; color: var(--x-ink); text-align: left; cursor: pointer; font: 400 13px/1.35 var(--sans); }
        .x-hpo:hover { background: var(--fill-tertiary); }
        .x-hpo:focus-visible { outline: 2px solid var(--x-ring); outline-offset: -2px; }
        .x-hpo b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .x-hpo small { font: 400 12px/1.3 var(--sans); color: #62625D; }
        .x-hpn .chip { flex: none; }
        .x-hpn .x-hico { border-color: #DCDCD8; }
        .x-hpn .x-empty { padding: 16px; }

        /* Bill: line items left, payment card right */
        .x-bdk { flex: 1; min-height: 0; display: flex; gap: 16px; align-items: stretch; }
        .x-bdl { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--x-surface); border: 1px solid var(--x-line); border-radius: 8px; }
        .x-bdt { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
        .x-bdt table { width: 100%; border-collapse: collapse; font: 400 13px/1.4 var(--sans); }
        .x-bdt th { position: sticky; top: 0; background: var(--x-surface); padding: 10px 16px; text-align: left; font: 600 12px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: #6B6B6B; border-bottom: 1px solid var(--x-line); }
        .x-bdt td { height: 36px; padding: 0 16px; border-bottom: 1px solid #EFEFEB; }
        .x-bdt th:last-child, .x-bdt td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
        .x-bdt td small { margin-left: 6px; font: 500 12px/1 var(--sans); color: #62625D; }
        .x-bdsub { flex: none; display: flex; justify-content: space-between; align-items: baseline; padding: 12px 16px; border-top: 1px solid var(--x-line); font: 600 14px/1.3 var(--sans); font-variant-numeric: tabular-nums; }
        .x-bdsub span { font: 500 13px/1.3 var(--sans); color: #6B6B6B; }
        .x-bdr { flex: none; width: 340px; margin: 0; display: flex; flex-direction: column; overflow-y: auto; }
        .x-bdr .x-r:first-of-type { border-top: 0; }
        .x-bdr .x-in { flex: 0 1 60%; flex-wrap: nowrap; }
        .x-bdr .x-in input { width: 100%; }
        .x-bdr .x-bdm { flex: 1 1 60%; margin: 0; gap: 0; }
        .x-bdr .x-bdm .x-btn { border-radius: 0; margin-left: -1px; padding: 0 6px; }
        .x-bdr .x-bdm .x-btn:first-child { margin-left: 0; border-radius: 6px 0 0 6px; }
        .x-bdr .x-bdm .x-btn:last-child { border-radius: 0 6px 6px 0; }
        .x-bdr .x-bal .x-fig { font: 600 18px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
        .x-bdr .x-bal .x-lab { font-weight: 600; }
        .x-bdb { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; }
        .x-bdb .x-btn { flex: 1; }
      }
      @media print { .x-hdx { display: none !important; } }

/* ===== Bug-fix pass: results grid, tests list, patient row 1, header, queue filter, doctors ===== */
      /* 1. Results: the card shares .x-rc with the 72mm receipt; undo the receipt sizing here */
      .x-res .x-rscr, .x-res .x-rft { width: 100%; max-width: 1100px; box-sizing: border-box; }
      .x-res .x-rc { width: 100%; max-width: 1100px; box-sizing: border-box; color: var(--x-ink); font: 400 13px/1.4 var(--sans); }
      .x-res .x-rc p { text-align: left; }
      .x-res .x-rch { height: auto; min-height: 36px; padding: 6px 12px; }
      .x-res .x-rch h2 { flex: 1; min-width: 0; font: 600 13px/1.3 var(--sans); text-align: left; }
      @media (min-width: 1024px) {
        .x-res .x-gw { grid-template-columns: minmax(180px, 1.2fr) 150px 70px 120px 40px; column-gap: 12px; align-items: center; min-height: 32px; }
        .x-res .x-gp { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .x-res .x-gu, .x-res .x-gr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
        .x-res .x-gw > .x-gi { width: 100%; }
        .x-res .x-gt > .x-gi { grid-column: 2 / -1; width: 150px; }
        .x-res .x-glong > .x-gi:focus { width: 100%; }
        .x-res .x-gq > .x-qc { display: contents; }
        .x-res .x-gq .x-qv { grid-column: 2; width: 100%; }
        .x-res .x-gq .x-qps { grid-column: 3 / 6; display: flex; flex-wrap: nowrap; gap: 4px; min-width: 0; overflow-x: auto; overflow-y: hidden; padding: 4px 0; scrollbar-width: thin; }
        .x-res .x-gq .x-qp { flex: none; height: 22px; font-size: 12px; }
        .x-res .x-gb.x-two { columns: auto; }
        .x-res .x-gb.x-two > .x-gw { border-bottom: 0; border-top: 1px solid var(--x-line); }
        .x-res .x-gb.x-two > .x-gw:first-child { border-top: 0; }
      }
      /* 2. Tests list: short names, no truncation */
      .x-tdt span { overflow: visible; text-overflow: clip; }
      /* 3. Patient row 1: Name, Age group, Gender share one height and baseline */
      .x-pf .x-pfr1 { align-items: end; }
      .x-pf .x-pfa .x-pfag { display: flex; align-items: stretch; width: 128px; height: var(--tap); margin-top: 6px; box-sizing: border-box; border: 1px solid #DCDCD8; border-radius: 6px; background: var(--x-surface); overflow: hidden; }
      .x-pf .x-pfa .x-pfag:focus-within { border-color: var(--x-ring); }
      .x-pf .x-pfa .x-pfag input { flex: 1; width: auto; min-width: 0; height: 100%; min-height: 0; margin: 0; padding: 0 10px; border: 0; border-radius: 0; background: transparent; }
      .x-pf .x-pfa .x-pfag input:focus-visible { outline: 0; }
      .x-pf .x-pfa .x-pfu { display: flex; flex: none; margin: 0; gap: 0; }
      .x-pf .x-pfa .x-pfu .x-btn { height: 100% !important; min-height: 0 !important; width: auto; flex: none; min-width: 34px; margin: 0; padding: 0 10px; border: 0; border-left: 1px solid #DCDCD8; border-radius: 0; }
      .x-pf .x-pfa .x-pfu .x-btn:focus-visible { outline-offset: -2px; }
      .x-pf .x-pfg .x-pfs { margin-top: 6px; }
      .x-pf .x-pfg .x-pfs .x-btn { height: var(--tap) !important; min-height: var(--tap) !important; }
      .x-pf .x-pfn input { height: var(--tap); min-height: var(--tap); margin-top: 6px; }
      @media (min-width: 1024px) {
        .x-pf .x-pfa .x-pfag { height: 34px; }
        .x-pf .x-pfg .x-pfs .x-btn { height: 34px !important; min-height: 34px !important; }
        .x-pf .x-pfn input { height: 34px; min-height: 34px; }
      }
      /* 4. Header: wordmark is the Home button */
      .x-wm { display: inline-flex; padding: 0; margin: 0; border: 0; background: none; border-radius: 999px; cursor: pointer; justify-self: start; }
      .x-wm b { transition: background-color var(--dur-quick) var(--ease-out); }
      .x-wm:hover b { background: #F4F4F1; }
      .x-wm:focus-visible { outline: 2px solid var(--x-ring); outline-offset: 2px; }
      .x-wm { align-items: center; gap: 8px; }
      .x-wm b { font-size: 14px !important; font-weight: 650 !important; letter-spacing: -0.01em; }
      @media (max-width: 1023.98px) {
        .x-wm { min-height: var(--tap); align-items: center; }
        html, body { max-width: 100%; overflow-x: clip; }
        .x-brandbar, .x-app { box-sizing: border-box; max-width: min(760px, 100%); }
      }
      /* 5. Queue filter: one compact segmented row */
      .x-qf { display: flex; flex-wrap: nowrap; gap: 0; margin-top: 10px; border: 1px solid #DCDCD8; border-radius: 6px; overflow: hidden; }
      .x-qf .x-chip, .x-qf .x-chip:hover { flex: 1 1 0; min-width: 0; height: 28px; min-height: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 6px; margin: 0; border: 0; border-left: 1px solid #DCDCD8; border-radius: 0; font: 500 12px/1 var(--sans); white-space: nowrap; }
      .x-qf .x-chip:first-child { border-left: 0; }
      .x-qf .x-chip:hover:not(.x-on) { background: #F4F4F1; }
      .x-qf .x-chip small { margin: 0; font: 400 12px/1 var(--sans); opacity: .75; }
      .x-qf .x-chip.x-on { background: #111; color: #FFF; }
      /* 6. Doctors: compact table + modal */
      .x-dtw { width: 100%; overflow-x: auto; margin-bottom: 12px; border: 1px solid var(--x-line); border-radius: 8px; background: var(--x-surface); }
      .x-dt { width: 100%; border-collapse: collapse; font: 400 13px/1.4 var(--sans); }
      .x-dt th { padding: 8px 12px; text-align: left; font: 600 12px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: #6B6B6B; border-bottom: 1px solid var(--x-line); white-space: nowrap; }
      .x-dt td { height: 40px; padding: 0 12px; border-bottom: 1px solid #EFEFEB; white-space: nowrap; }
      .x-dt tr:last-child td { border-bottom: 0; }
      .x-dt td.x-dtm { color: #62625D; }
      .x-dt td small { margin-left: 6px; font: 400 12px/1 var(--sans); color: #62625D; }
      .x-dt th.x-dta, .x-dt td.x-dta { width: 1%; padding: 0 4px; text-align: center; }
      .x-dt td.x-dta:last-child, .x-dt th.x-dta:last-child { padding-right: 8px; }
      .x-dtb { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; background: none; color: #4A4A46; font: 500 13px/1 var(--sans); cursor: pointer; }
      .x-dtb:hover { background: #F4F4F1; color: var(--x-ink); border-color: #DCDCD8; }
      .x-dtb.x-del:hover { color: var(--x-red); }
      .x-dt tr.x-new td { background: #F4F4F1; }
      .x-dte { padding: 12px; margin: 0; font: 400 13px/1.4 var(--sans); color: #62625D; }
      .x-dd.x-dm { max-width: 520px; }
      .x-dm2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
      .x-dmc { display: flex; align-items: stretch; height: 34px; margin-top: 6px; box-sizing: border-box; border: 1px solid #DCDCD8; border-radius: 6px; background: var(--x-surface); overflow: hidden; }
      .x-dmc:focus-within { border-color: var(--x-ring); }
      .x-f .x-dmc input { flex: 1; min-width: 0; width: auto; height: 100%; min-height: 0; margin: 0; padding: 0 10px; border: 0; border-radius: 0; background: transparent; font: 400 13px/1 var(--sans); }
      .x-f .x-dmc input:focus-visible { outline: 0; }
      .x-dmc button { flex: none; min-width: 44px; padding: 0 12px; border: 0; border-left: 1px solid #DCDCD8; background: var(--x-surface); color: var(--x-ink); font: 500 13px/1 var(--sans); cursor: pointer; }
      .x-dmc button:hover { background: #F4F4F1; }
      .x-dmc button[aria-pressed="true"] { background: #111; color: #FFF; }
      .x-dmc button:focus-visible { outline-offset: -2px; }
      .x-dm .x-f small { display: block; margin-top: 4px; font: 400 12px/1.4 var(--sans); color: #62625D; }
      .x-dm .x-cov .x-f input { height: 32px; min-height: 32px; padding: 0 10px; font: 400 13px/1 var(--sans); }
      .x-dm .x-cov > div { max-height: 240px; overflow-y: auto; }
      @media (max-width: 1023.98px) { .x-dmc { height: var(--tap); } .x-dm2 { grid-template-columns: 1fr; } }

/* ===== Settings polish: upload tiles, branding grid, signature cards, live margin preview ===== */
      /* 1. Upload tile */
      .x-upt { min-width: 0; margin-bottom: 14px; }
      .x-upt__lab { display: block; margin-bottom: 6px; font: var(--type-label); color: var(--text-secondary); cursor: default; }
      .x-upt__box { position: relative; box-sizing: border-box; width: 100%; height: 96px; border: 1px dashed #D6D6D2; border-radius: 8px; background: var(--x-surface); overflow: hidden; transition: border-color var(--dur-quick) var(--ease-out), background-color var(--dur-quick) var(--ease-out); }
      .x-upt__box.is-over { border-color: var(--x-ink); background: #F4F4F1; }
      .x-upt__pick { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; height: 100%; padding: 8px 12px; border: 0; border-radius: 0; background: none; color: var(--x-ink); font: 500 13px/1.3 var(--sans); text-align: center; cursor: pointer; }
      .x-upt__pick:hover { background: #F7F7F5; }
      .x-upt__pick:focus-visible { outline-offset: -2px; }
      .x-upt__pick svg { width: 18px; height: 18px; margin-bottom: 2px; color: #6B6B6B; }
      .x-upt__pick small { font: 400 12px/1.4 var(--sans); color: #62625D; }
      .x-upt__box.is-filled { display: flex; align-items: center; justify-content: center; padding: 6px 12px 24px; background: repeating-conic-gradient(#F1F1EE 0 25%, #FFFFFF 0 50%) 0 0 / 12px 12px; }
      .x-upt__box.is-filled img { display: block; max-width: 100%; max-height: 64px; object-fit: contain; }
      .x-upt__acts { position: absolute; right: 4px; bottom: 4px; display: flex; gap: 2px; }
      .x-upt__acts button { height: 24px; padding: 0 8px; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .92); color: var(--x-ink); font: 500 12px/1 var(--sans); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
      .x-upt__acts button:hover { background: #F4F4F1; }
      .x-upt__acts .x-del:hover { color: var(--x-red); }
      .x-r > .x-upt { flex: 1; min-width: 0; margin: 0; }
      @media (max-width: 1023.98px) { .x-upt__acts button { height: 32px; } .x-upt__box.is-filled { padding-bottom: 32px; } .x-upt__box.is-filled img { max-height: 56px; } }
      /* 2. Branding grid */
      .x-bgrid { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; align-items: start; }
      .x-bgrid > .x-span2, .x-bgrid > .x-bsub { grid-column: 1 / -1; }
      .x-bsub { margin: 10px 0 10px; padding-top: 14px; border-top: 1px solid var(--x-line); font: 600 12px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: #6B6B6B; }
      .x-help { display: block; margin-top: 4px; font: 400 12px/1.4 var(--sans); color: #62625D; }
      @media (max-width: 520px) { .x-bgrid { grid-template-columns: minmax(0, 1fr); } }
      /* 4. Signature cards */
      .x-card.x-sgc, .x-spane .x-card.x-sgc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 4px 16px; align-items: start; padding: 14px 16px; }
      .x-sgc > h3 { grid-column: 1 / -1; margin: 0 0 4px; font: 600 13px/1.3 var(--sans); }
      .x-sgc .x-upt { margin: 0; }
      .x-sgc__f { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; align-content: start; }
      .x-sgc__f .x-f { margin-bottom: 10px; }
      .x-sgc__f .x-cb { align-self: end; margin-bottom: 10px; cursor: pointer; }
      .x-sgc .x-f.x-cb input { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 34px !important; height: 20px !important; min-height: 20px !important; margin: 0; padding: 0; border: 0; border-radius: 999px; background: #D6D6D2; cursor: pointer; transition: background-color var(--dur-quick) var(--ease-out); }
      .x-sgc .x-f.x-cb input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #FFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform var(--dur-quick) var(--ease-out); }
      .x-sgc .x-f.x-cb input:checked { background: var(--x-ink); }
      .x-sgc .x-f.x-cb input:checked::after { transform: translateX(14px); }
      @media (max-width: 600px) { .x-card.x-sgc, .x-spane .x-card.x-sgc { grid-template-columns: minmax(0, 1fr); } }
      /* 5. Print margins + live A4 preview */
      .x-pm { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: start; margin-bottom: 16px; }
      .x-pm__f > .x-btn { margin-top: 4px; }
      .x-pm__prev { margin: 0; }
      .x-pm__prev figcaption { margin-top: 6px; font: 400 12px/1.4 var(--sans); color: #62625D; text-align: center; }
      .x-sheet { color-scheme: light; position: relative; width: 210px; height: 297px; background: #FFF; border: 1px solid var(--x-line); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); overflow: hidden; }
      .x-sheet__m { position: absolute; background: repeating-linear-gradient(45deg, #D6D6D2 0 1px, #F4F4F1 1px 6px); }
      .x-sheet__m span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 500 12px/1 var(--sans); color: #4A4A46; }
      .x-sheet__m span b { padding: 2px 6px; border-radius: 4px; background: rgba(255, 255, 255, .85); font-weight: 500; }
      .x-sheet__a { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; padding: 4px; outline: 1px dashed #A8A8A3; overflow: hidden; transition: inset var(--dur-quick) var(--ease-out); }
      .x-sheet__a i { display: block; flex: none; height: 3px; border-radius: 1px; background: #C9C9C5; }
      .x-mh { display: flex; gap: 4px; align-items: flex-start; }
      .x-mh > b { flex: none; width: 12px; height: 12px; border-radius: 2px; background: #BDBDB8; }
      .x-mh > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
      .x-mh > div:nth-child(2) i:first-child { height: 5px; background: #8F8F8A; }
      .x-mh .x-mh__r { align-items: flex-end; }
      .x-sheet__a hr { flex: none; margin: 0; border: 0; border-top: 1px solid #8F8F8A; }
      .x-mp { display: flex; gap: 6px; padding: 3px; border: 1px solid #9A9A95; }
      .x-mp > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
      .x-mt { margin: 2px 0 0; } .x-mt i { height: 4px; background: #8F8F8A; }
      .x-mr { display: flex; justify-content: space-between; gap: 6px; }
      .x-ms { display: flex; justify-content: space-between; margin-top: auto; }
      .x-ms > div { width: 34%; padding-top: 4px; border-top: 1px solid #8F8F8A; }
      @media (max-width: 600px) { .x-pm { grid-template-columns: minmax(0, 1fr); } .x-pm__prev { justify-self: center; } }
      /* Test page (printed only) */
      #x-tp { display: none; }
      .x-tp__box { position: relative; box-sizing: border-box; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3mm; padding: 14mm; border: 0.5mm dashed #000; color: #000; background: #FFF; text-align: center; font: 400 11pt/1.45 Inter, Geist, sans-serif; break-inside: avoid; page-break-inside: avoid; }
      .x-tp__box b { font-size: 16pt; }
      .x-tp__box p { max-width: 130mm; margin: 0; }
      .x-tp__e { position: absolute; font: 500 9pt/1 Inter, Geist, sans-serif; color: #444; white-space: nowrap; }
      .x-tp__t { top: 2mm; left: 50%; transform: translateX(-50%); }
      .x-tp__b { bottom: 2mm; left: 50%; transform: translateX(-50%); }
      .x-tp__l { left: 2mm; top: 50%; }
      .x-tp__r { right: 2mm; top: 50%; }
      /* 3. Report header: registration on one line */
      .x-rh__reg { white-space: nowrap; }
      @media print {
        body.x-tpp > :not(#x-tp) { display: none !important; }
        body.x-tpp #x-tp { display: block !important; }
      }

/* Intro splash (v15): one shape. The mark is the wordmark pill collapsed to a circle around its own "C";
         on every app load the circle stretches open into the full "Clear Report" pill, then the app fades in. Tap or any key skips. */
      .x-intro { --fs: 44px; --bw: 2px; position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: #000; pointer-events: none; }
      @media (max-width: 640px) { .x-intro { --fs: 36px; --bw: 1.75px; } }
      @media (max-width: 359px) { .x-intro { --fs: 32px; --bw: 1.5px; } }
      .x-intro__pill { box-sizing: border-box; display: flex; align-items: center; flex: none; overflow: hidden; border: var(--bw) solid #fff; border-radius: 999px;
        font-family: var(--sans); font-size: var(--fs); font-weight: 600; line-height: 1; letter-spacing: -0.012em; color: #fff; white-space: pre; opacity: 0;
        font-feature-settings: "cv11", "ss03", "calt"; will-change: width, padding, transform, opacity; }
      .x-intro__pill > span { display: inline-flex; flex: none; }
      /* v19: the short pill holds "CR"; "lear " opens after the C and "eport" after the R, at the same time */
      .x-intro__m, .x-intro__g, .x-intro__t { overflow: hidden; will-change: width; }
      .x-intro__m i, .x-intro__t i { display: inline-block; flex: none; font-style: normal; opacity: 0; }
      .x-intro--skip { opacity: 0 !important; transition: opacity .2s linear; }
      .x-intro--out { opacity: 0; transition: opacity .38s cubic-bezier(.4, 0, .2, 1); }
      .x-replay { min-height: var(--tap); padding: 0; border: 0; background: none; font: var(--type-caption); color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; opacity: .6; cursor: pointer; }
      .x-replay:hover, .x-replay:focus-visible { opacity: 1; }
      @media print { .x-intro, .x-replay { display: none !important; } }

/* Delight pass 1: department colours, queue status glow, gliding step tab, flag pop */
      .x-dot { display: inline-block; flex: none; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--x-dc, transparent); vertical-align: middle; }
      .x-res .x-rc.x-dept { position: relative; }
      .x-res .x-rc.x-dept::before { content: ""; position: absolute; z-index: 1; left: -1px; top: -1px; bottom: -1px; width: 3px; border-radius: 8px 0 0 8px; background: var(--x-dc); pointer-events: none; }
      .x-tdg > h3 > .x-dot { margin-top: -2px; }
      .x-tds li > .x-tdn > .x-dot, #sel li > span:first-child > .x-dot { margin-right: 8px; }
      .x-chip > .x-dot { margin-right: 6px; }
      .x-qdots { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
      .x-qdots .x-dot { margin: 0; }
      .x-ql li[data-st] { position: relative; }
      .x-ql li[data-st]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background-color: var(--x-amber); transition: background-color 300ms ease; pointer-events: none; }
      .x-ql li[data-st="prog"]::before, .x-ql li[data-st="ready"]::before { background-color: var(--x-blue); }
      .x-ql li[data-st="sent"]::before { background-color: var(--x-green); }
      @keyframes x-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }
      #queue li[data-st="ready"] .chip.x-blue { animation: x-pulse 2.4s ease-in-out infinite; }
      .x-tabbar { display: none; }
      @media (min-width: 1024px) {
        .x-nav.x-glide { position: fixed; }
        .x-nav.x-glide button.x-on { border-bottom-color: transparent !important; }
        .x-nav.x-glide .x-tabbar { display: block; position: absolute; height: 2px; background: var(--x-ink, #111); pointer-events: none; transition: left 220ms cubic-bezier(.2,.8,.2,1), width 220ms cubic-bezier(.2,.8,.2,1); }
      }
      @keyframes x-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
      .x-flag.x-pop { display: inline-block; animation: x-pop 180ms ease-out; }
      @keyframes x-fl-H { 0% { background-color: color-mix(in srgb, var(--x-red) 16%, #fff); } 100% { background-color: transparent; } }
      @keyframes x-fl-L { 0% { background-color: color-mix(in srgb, var(--x-blue) 16%, #fff); } 100% { background-color: transparent; } }
      input.x-fl-H { animation: x-fl-H 600ms ease-out; }
      input.x-fl-L { animation: x-fl-L 600ms ease-out; }
      @media (prefers-reduced-motion: reduce) {
        .x-ql li[data-st]::before, .x-nav.x-glide .x-tabbar { transition: none !important; }
        #queue li[data-st="ready"] .chip.x-blue, .x-flag.x-pop, input.x-fl-H, input.x-fl-L { animation: none !important; }
      }
      @media print { .x-dot, .x-qdots, .x-tabbar { display: none !important; } .x-rc.x-dept::before { display: none !important; } }

/* Delight pass 2: save tick, sent swoosh, greeting, day-end card + confetti */
      .x-tick { position: fixed; z-index: 10; bottom: 198px; width: 48px; height: 48px; margin-left: -24px; border-radius: 50%; background: var(--fill-primary); color: var(--text-primary-on); display: grid; place-items: center; pointer-events: none; box-shadow: var(--hark-shadow); animation: x-tick-life 1000ms var(--ease-out) forwards; }
      .x-tick svg { width: 28px; height: 28px; }
      .x-tick path { fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: x-tick-draw 280ms var(--ease-out) 100ms forwards; }
      @keyframes x-tick-life { 0% { opacity: 0; transform: scale(.8); } 10% { opacity: 1; transform: scale(1); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
      @keyframes x-tick-draw { to { stroke-dashoffset: 0; } }
      .x-ql li.x-swoosh { overflow: hidden; }
      .x-plane { position: absolute; right: 40px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--x-green); pointer-events: none; animation: x-plane 300ms var(--ease-out) forwards; }
      @keyframes x-plane { 0% { opacity: 0; transform: translate(-12px, 4px) rotate(-8deg); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(44px, -6px) rotate(-8deg); } }
      #queue .chip.x-morph { animation: x-morph 420ms var(--ease-out); }
      @keyframes x-morph { 0% { background: color-mix(in srgb, var(--x-blue) 10%, #fff); color: var(--x-blue); transform: scale(.9); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
      .x-greet { margin: 0 0 16px; text-align: left; }
      .x-greet b { display: block; font: var(--weight-bold) 18px/1.3 var(--sans); color: var(--text-primary); }
      .x-greet span { display: block; margin-top: 2px; font: var(--weight-regular) 13px/1.4 var(--sans); color: var(--text-secondary); }
      .x-wrap-bg { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgb(0 0 0 / .45); animation: x-wrap-in 200ms var(--ease-out); }
      .x-wrap { width: 100%; max-width: 360px; padding: 24px; border: 1px solid var(--stroke-primary); border-radius: var(--r-l); background: var(--fill-primary-on); color: var(--text-primary); box-shadow: var(--hark-shadow); text-align: center; }
      .x-wrap h2 { margin: 0 0 4px; font: var(--type-heading); }
      .x-wrap > p { margin: 0 0 16px; font: var(--type-small); color: var(--text-secondary); }
      .x-wrap dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 20px; }
      .x-wrap dl div { padding: 12px 8px; border-radius: var(--r-s); background: var(--fill-tertiary); }
      .x-wrap dd { margin: 0; font: var(--weight-bold) 18px/1.3 var(--sans); }
      .x-wrap dt { margin-top: 2px; font: var(--type-caption); color: var(--text-secondary); }
      .x-wrap button { min-height: var(--tap); padding: 0 24px; border: 1px solid var(--fill-primary); border-radius: var(--r-pill); background: var(--fill-primary); color: var(--text-primary-on); font: var(--type-label); cursor: pointer; }
      @keyframes x-wrap-in { from { opacity: 0; } }
      .x-confetti { position: fixed; inset: 0; z-index: 41; width: 100%; height: 100%; pointer-events: none; }
      @media (prefers-reduced-motion: reduce) {
        .x-tick, .x-tick path, .x-plane, #queue .chip.x-morph, .x-wrap-bg { animation: none !important; }
        .x-tick path { stroke-dashoffset: 0; }
        .x-plane { display: none; }
      }
      @media print { .x-tick, .x-plane, .x-greet, .x-wrap-bg, .x-confetti { display: none !important; } }

/* Pre-printed letterhead: no grey fills, so the printed watermark shows through */
      .x-rep.x-lhm .x-pb, .x-rep.x-lhm .x-rt, .x-rep.x-lhm .x-rt th, .x-rep.x-lhm .x-rt td { background: transparent !important; }
      .x-rep.x-lhm .x-rt thead th { border-bottom: 1px solid #111; }
      /* PDF: header, footer and printed signature block left off (signatures drawn onto the PDF) */
      .x-rep.x-lhm.x-pdf { min-height: 0; background: transparent; }
      .x-rep.x-lhm.x-pdf .x-rh, .x-rep.x-lhm.x-pdf .x-rh__rule, .x-rep.x-lhm.x-pdf .x-rfoot, .x-rep.x-lhm.x-pdf .x-rsig { display: none !important; }
      @media print {
        .x-rep.x-lhm { background: transparent !important; min-height: 0 !important; }
        .x-rep.x-lhm .x-rh, .x-rep.x-lhm .x-rh__rule, .x-rep.x-lhm .x-rfoot { display: none !important; }
        /* Signature images only, on every sheet, bottom edge at 252 mm; MBBS left, Microbiologist right */
        .x-rep.x-lhm .x-rsig { position: fixed; left: 0; right: 0; bottom: var(--x-lhsb, -22mm); display: flex; justify-content: space-between; align-items: flex-end; gap: 0; margin: 0; padding: 0; break-inside: auto; }
        .x-rep.x-lhm .x-rsig hr, .x-rep.x-lhm .x-rsig b, .x-rep.x-lhm .x-rsig small { display: none !important; }
        .x-rep.x-lhm .x-rsig > div:first-child { order: 2; align-items: flex-end; }
        .x-rep.x-lhm .x-rsig > div + div { order: 1; align-items: flex-start; }
        .x-rep.x-lhm .x-rsig img { display: block; width: auto; height: auto; max-height: 18mm; max-width: 70mm; margin: 0; }
      }
      /* Settings preview: what the letterhead already prints */
      .x-sheet.x-lhp > .x-sheet__m:first-child span, .x-sheet.x-lhp .x-ms { display: none; }
      .x-lhb { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center; background: #E4E4E0; border-color: #8F8F8A; border-style: solid; border-width: 0; }
      .x-lhb--top { border-bottom-width: 1px; }
      .x-lhb--bot { border-top-width: 1px; }
      .x-lhb span, .x-lhs { font: 500 12px/1 var(--sans); color: #4A4A46; }
      .x-lhb span { padding: 2px 6px; border-radius: 4px; background: rgba(255, 255, 255, .85); text-align: center; }
      .x-lhs { position: absolute; box-sizing: border-box; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 2px; border: 1px dashed #6B6B66; border-radius: 2px; background: rgba(255, 255, 255, .85); white-space: nowrap; }
      .x-lhl { position: absolute; height: 2px; border-radius: 1px; background: #8F8F8A; }

/* ===== Liquid glass re-skin (screen only; print and PDF untouched) ===== */
      @media screen {
        :root, :root[data-theme] {
          --x-bg: #EEF2F7; --x-surface: #FFFFFF; --x-line: rgba(0, 0, 0, .08); --x-field: rgba(0, 0, 0, .12); --x-ink: #1D1D1F; --x-ring: rgba(0, 122, 255, .45);
          --x-amber: #8E8E93; --x-blue: #007AFF; --x-green: #34C759; --x-red: #C4291C;
          --text-primary: #1D1D1F; --text-secondary: #6E6E73; --text-primary-on: #FFFFFF;
          --fill-primary: #1D1D1F; --fill-primary-on: #FFFFFF; --fill-tertiary: rgba(118, 118, 128, .12);
          --stroke-primary: rgba(0, 0, 0, .12); --stroke-secondary: rgba(0, 0, 0, .08);
          --fill-system-green: #34C759; --fill-system-orange: #8E8E93; --fill-system-red: #C4291C;
          --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
          --x-glass: rgba(255, 255, 255, .55);
          --x-glass-edge: 1px solid rgba(255, 255, 255, .6);
          --x-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 8px 32px rgba(31, 38, 135, .08);
          --x-data: rgba(255, 255, 255, .92);
          --x-hair: rgba(0, 0, 0, .08);
          --x-lift: 0 1px 3px rgba(0, 0, 0, .10), 0 4px 12px rgba(0, 0, 0, .05);
        }
        html, body { background: #0B0D12; }
        body { color: #1D1D1F; font-family: var(--sans); }

        /* 3. Glass chrome */
        .x-brandbar, #queue, .x-nav, .x-keys, .x-dock, .x-dlg, .x-wrap, .x-toast {
          background: var(--x-glass) !important;
          -webkit-backdrop-filter: blur(28px) saturate(180%);
          backdrop-filter: blur(28px) saturate(180%);
          border: var(--x-glass-edge);
          box-shadow: var(--x-glass-shadow);
        }
        .x-dlg, .x-wrap { border-radius: 18px; color: #1D1D1F; }
        .x-dlg::backdrop, .x-wrap-bg { background: rgba(28, 28, 36, .22); }
        .x-toast { color: #1D1D1F; border-radius: 999px; }
        .x-wrap dl div { background: var(--x-data); border: 1px solid var(--x-hair); }
        .x-brandbar { border-radius: 18px; padding: 8px 12px; }
        .x-dock, .x-nav { border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; }
        .x-nav button { color: #6E6E73; }
        .x-nav button.x-on { color: #1D1D1F; }
        .x-dock b { color: #1D1D1F; }

        /* 4. Crisp data surfaces, no blur behind text */
        .x-card, .x-test, .x-res .x-rc, .x-tdlist, .x-tdr, .x-hpn, .x-bdl, .x-tile, .x-dtw, .x-sel, .x-tal, .x-hsl, .x-list {
          background: var(--x-data);
          border: 1px solid var(--x-hair);
          border-radius: 14px;
          box-shadow: none;
          -webkit-backdrop-filter: none; backdrop-filter: none;
        }
        .x-list { padding: 0 12px; }
        .x-tal, .x-hsl { background: #FFF; box-shadow: 0 8px 24px rgba(31, 38, 135, .10); }
        .x-test.x-on { background: #FFF; border-color: #1D1D1F; }
        .x-res .x-rch { border-radius: 14px 14px 0 0; background: rgba(118, 118, 128, .06); border-bottom-color: var(--x-hair); }
        .x-res .x-rc.x-dept::before { border-radius: 14px 0 0 14px; }
        .x-bdt th { background: #FFF; }
        .x-list, .x-list li, .x-r, .x-ql li, .x-hpn li, .x-bdt td, .x-dt td, .x-gw, .x-scl li { border-color: var(--x-hair); }
        .x-dt tr.x-new td { background: rgba(0, 122, 255, .06); }

        /* Inputs: white, 10px, hairline, blue focus ring */
        .x-f input, .x-f select, .x-f textarea, .x-in input, .x-in select, .x-search, .x-sumh input, .x-qh input, .x-hs input, .x-hmh input, .x-gi, .x-qv {
          background: #FFF; border: 1px solid var(--x-field); border-radius: 10px; color: #1D1D1F;
        }
        .x-f input.x-calc, .x-in input.x-calc { background: rgba(118, 118, 128, .10); }
        .x-f.x-cb input { border-radius: 4px; }
        .page input:focus-visible, .page select:focus-visible, .page textarea:focus-visible, .x-dlg input:focus-visible, .x-dlg select:focus-visible, .x-dlg textarea:focus-visible, .x-hs input:focus-visible {
          outline: 0; border-color: rgba(0, 122, 255, .6); box-shadow: 0 0 0 3px var(--x-ring);
        }
        .page :focus-visible, .x-dlg :focus-visible { outline-color: var(--x-ring); outline-width: 3px; }
        .x-pf .x-pfa .x-pfag, .x-dmc { border: 1px solid var(--x-field); border-radius: 10px; background: #FFF; }
        .x-pf .x-pfa .x-pfag:focus-within, .x-dmc:focus-within { border-color: rgba(0, 122, 255, .6); box-shadow: 0 0 0 3px var(--x-ring); }
        .x-pf .x-pfa .x-pfag input:focus-visible, .x-f .x-dmc input:focus-visible { box-shadow: none; border: 0; }
        .x-pf .x-pfa .x-pfu .x-btn, .x-dmc button { border-left-color: var(--x-hair); }
        .x-dmc button { background: #FFF; }
        .x-dmc button:hover { background: rgba(118, 118, 128, .08); }
        .x-dmc button[aria-pressed="true"] { background: #1D1D1F; color: #FFF; }

        /* 5. Buttons */
        .x-btn, .x-act { background: rgba(255, 255, 255, .7); border: 1px solid var(--x-hair); border-radius: 10px; color: #1D1D1F; }
        .x-btn:hover:not(:disabled), .x-act:hover:not(:disabled) { background: rgba(255, 255, 255, .92); border-color: rgba(0, 0, 0, .12); }
        .x-big, .x-btn.x-on, .x-act--pri, .x-dock .x-btn.x-on, .x-dlg .x-btn.x-on, .x-hr8 .x-btn.x-on { background: #1D1D1F; color: #FFF; border-color: #1D1D1F; border-radius: 10px; }
        .x-big:hover:not(:disabled), .x-btn.x-on:hover:not(:disabled), .x-act--pri:hover:not(:disabled) { background: #3A3A3C; border-color: #3A3A3C; }
        .x-pff .x-big, .x-pfdel, .x-pfplus { border-radius: 10px; }
        .x-pf .x-pfs .x-btn:first-child, .x-bdr .x-bdm .x-btn:first-child { border-radius: 10px 0 0 10px; }
        .x-pf .x-pfs .x-btn:last-child, .x-pf .x-pfu .x-btn:last-child, .x-bdr .x-bdm .x-btn:last-child { border-radius: 0 10px 10px 0; }
        .x-chip { background: rgba(255, 255, 255, .7); border: 1px solid var(--x-hair); color: #1D1D1F; }
        .x-chip:hover:not(.x-on) { background: rgba(255, 255, 255, .92); }
        .x-chip.x-on { background: #1D1D1F; color: #FFF; border-color: #1D1D1F; }
        .x-qp { border-color: var(--x-hair); }
        .x-qp[aria-pressed="true"] { background: #1D1D1F; border-color: #1D1D1F; color: #FFF; }
        .x-tdo { border-color: rgba(0, 0, 0, .18); }
        .x-tdo.x-on, .x-tdo.x-on:hover { background: #1D1D1F; border-color: #1D1D1F; color: #FFF; }
        .x-tdt i, .x-test i { border-color: #AEAEB2; }

        /* iOS segmented control: queue filter */
        .x-qf { gap: 2px; padding: 2px; border: 0; border-radius: 9px; background: #E6E6EB; overflow: visible; }
        .x-qf .x-chip, .x-qf .x-chip:hover { height: 24px; min-height: 24px; border: 0; border-radius: 7px; background: transparent; color: #1D1D1F; box-shadow: none; }
        .x-qf .x-chip:hover:not(.x-on) { background: rgba(255, 255, 255, .45); }
        .x-qf .x-chip.x-on, .x-qf .x-chip.x-on:hover { background: #FFF; color: #1D1D1F; box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .04); }

        /* 2. Status chips */
        .x-app .chip, #queue .chip { background: #FFEBEA; color: #C4291C; }
        .x-app .chip::before, #queue .chip::before { background: #FF3B30; box-shadow: none; }
        .x-app .chip.x-amber, #queue .chip.x-amber { background: #EEEEEF; color: #3A3A3C; }
        .x-app .chip.x-amber::before, #queue .chip.x-amber::before { background: #8E8E93; }
        .x-app .chip.x-blue, #queue .chip.x-blue { background: #E5F2FF; color: #0060C7; }
        .x-app .chip.x-blue::before, #queue .chip.x-blue::before { background: #007AFF; }
        .x-app .chip.x-green, .x-app .chip--solid, #queue .chip.x-green { background: #E2F7E8; color: #1E7A34; }
        .x-app .chip.x-green::before, .x-app .chip--solid::before, #queue .chip.x-green::before { background: #34C759; }
        .x-rch span.x-full { color: #1E7A34; }

        /* Neutral greys in place of warm ones */
        .x-k, .x-act .x-k, .x-nav .x-k { border-color: rgba(0, 0, 0, .12); color: #6E6E73; }
        .x-big .x-k, .x-btn.x-on .x-k, .x-act--pri .x-k { color: rgba(255, 255, 255, .65); border-color: rgba(255, 255, 255, .25); }
        .x-h3, .x-tdg h3, .x-bsub, .x-dt th, .x-bdt th, .x-qh p, .x-test small, .x-list small, .x-lab small, .x-ql .x-l1 span, .x-ql .x-l2, .x-hlab, .x-hsl li small, .x-hpo small, .x-keynote, .x-dt td.x-dtm, .x-dt td small, .x-help, .x-upt__pick small, .x-bdt td small, .x-pm__prev figcaption, .x-dte, .x-dm .x-f small, .x-tdt small, .x-tdpr, .x-tdh span, .x-tile span, .x-sum span, .x-f, .x-qh p small, .x-tde { color: #6E6E73; }
        .x-f.x-cb { color: #1D1D1F; }
        .x-keys button, .x-hico, .x-hlinks button, .x-dtb, .x-tdx { color: #3A3A3C; }
        .x-hico:hover, .x-dtb:hover, .x-tdx:hover { background: rgba(255, 255, 255, .7); border-color: var(--x-hair); color: #1D1D1F; }
        .x-hico[aria-current="page"], .x-hpn .x-hico { border-color: var(--x-hair); background: rgba(255, 255, 255, .75); }
        .x-hdate { border-color: var(--x-hair); background: rgba(255, 255, 255, .6); }
        .x-wm b { border-color: #1D1D1F; color: #1D1D1F; }
        .x-wm:hover b { background: rgba(255, 255, 255, .6); }
        .x-upt__box { border-color: rgba(0, 0, 0, .18); background: #FFF; }
        .x-upt__box.is-over { background: rgba(0, 122, 255, .06); border-color: #007AFF; }
        .x-upt__pick:hover, .x-upt__acts button:hover { background: rgba(118, 118, 128, .08); }
        .x-upt__pick svg { color: #6E6E73; }
        .x-upt__box.is-filled { background: repeating-conic-gradient(#F2F2F7 0 25%, #FFFFFF 0 50%) 0 0 / 12px 12px; }
        .x-sgc .x-f.x-cb input { background: rgba(120, 120, 128, .32); }
        .x-sgc .x-f.x-cb input:checked { background: #1D1D1F; }
        .x-sheet { border-color: var(--x-hair); }
        .x-sheet__m { background: repeating-linear-gradient(45deg, #D1D1D6 0 1px, #F2F2F7 1px 6px); }
        .x-lhb { background: #E5E5EA; }

        /* Mobile and tablet (<1024px): chrome stays edge-to-edge at the bottom */
        @media (max-width: 1023.98px) {
          .x-nav { border-top: var(--x-glass-edge); }
          .x-dock { border-top: var(--x-glass-edge); }
        }

        /* Desktop (≥1024px): floating panels with a 10px gap over the wallpaper */
        @media (min-width: 1024px) {
          .x-brandbar { border-radius: 0; padding: 0 var(--gutter); border-width: 0 0 1px; }
          #queue { top: 58px; left: 10px; bottom: 42px; width: 300px; border-radius: 18px; }
          .x-qh { background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--x-hair); }
          .x-qh input { background: #FFF; }
          .x-ql li:hover { background: rgba(255, 255, 255, .45); }
          .x-ql li.x-cur { background: rgba(255, 255, 255, .75); box-shadow: var(--x-lift); }
          .x-nav { top: 58px; left: 330px; right: 10px; border: var(--x-glass-edge); border-radius: 18px; padding: 0 8px; }
          .x-nav button.x-on { border-bottom-color: #1D1D1F; }
          .x-nav.x-glide button { position: relative; z-index: 1; }
          .x-nav.x-glide .x-tabbar { top: 5px !important; height: 30px; border-radius: 12px; background: #FFF; box-shadow: var(--x-lift); }
          .x-dock { left: 330px; right: 10px; bottom: 42px; border: var(--x-glass-edge); border-radius: 18px; }
          .x-keys { border-width: 1px 0 0; border-radius: 0; }
          .x-keys button:hover { background: rgba(255, 255, 255, .5); color: #1D1D1F; }
          .x-keys kbd { border-color: rgba(0, 0, 0, .14); background: #FFF; color: #1D1D1F; }
          .x-app { padding-top: 108px; }
          .x-app:has(.x-rlay) { padding-top: 98px; }
          .x-rlay { height: calc(100vh - 130px); }
          .x-app:has(.x-res), .x-app:has(.x-set) { padding-bottom: 10px; }
          .x-smenu { padding: 8px; border: var(--x-glass-edge); border-radius: 18px; background: var(--x-glass); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); box-shadow: var(--x-glass-shadow); }
          .x-smenu button { border-radius: 10px; color: #6E6E73; }
          .x-smenu button:hover { background: rgba(255, 255, 255, .45); color: #1D1D1F; }
          .x-smenu button[aria-current="true"] { background: rgba(255, 255, 255, .75); color: #1D1D1F; box-shadow: var(--x-lift); }
          .x-spanel { padding: 16px 20px 24px; background: var(--x-data); border: 1px solid var(--x-hair); border-radius: 14px; }
          .x-rft { border-top-color: var(--x-hair); }
          .x-tdt:hover, .x-tds li:hover, .x-hpo:hover, .x-hsl li:hover, .x-hsl li.x-hl { background: rgba(118, 118, 128, .08); }
          .x-tdt.x-hl { background: rgba(0, 122, 255, .06); box-shadow: inset 0 0 0 1px #007AFF; }
        }

        /* 8. Fallbacks: no backdrop blur, or reduced transparency → near-opaque */
        @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
          .x-brandbar, #queue, .x-nav, .x-keys, .x-dock, .x-dlg, .x-wrap, .x-toast, .x-smenu, .x-qh { background: rgba(255, 255, 255, .88) !important; }
        }
        @media (prefers-reduced-transparency: reduce) {
          .x-brandbar, #queue, .x-nav, .x-keys, .x-dock, .x-dlg, .x-wrap, .x-toast, .x-smenu, .x-qh { background: rgba(255, 255, 255, .88) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
        }
      }

/* ===== Liquid glass finishing pass (screen only; print, intro and layout untouched) ===== */
      @media screen {
        /* 1. Specular edge + top sheen on glass chrome */
        :where(.x-brandbar, .x-wrap) { position: relative; }
        .x-brandbar, .x-nav, .x-keys, .x-dock, .x-dlg, .x-wrap, .x-toast {
          border-color: transparent;
          background: linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 40%), var(--x-glass) !important;
        }
        .x-brandbar::before, .x-nav::before, .x-keys::before, .x-dock::before, .x-dlg::before, .x-wrap::before, .x-toast::before,
        .x-brandbar::after, .x-nav::after, .x-keys::after, .x-dock::after, .x-dlg::after, .x-wrap::after, .x-toast::after {
          content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
        }
        .x-brandbar::before, .x-nav::before, .x-keys::before, .x-dock::before, .x-dlg::before, .x-wrap::before, .x-toast::before, #queue::before, .x-smenu::before {
          z-index: 2; padding: 1px; box-sizing: border-box;
          background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .15) 40%, rgba(255, 255, 255, .05) 60%, rgba(255, 255, 255, .6));
          -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
        }
        /* 2. Pointer-follow light (hidden until hover; off for touch and reduced motion) */
        .x-brandbar::after, .x-nav::after, .x-keys::after, .x-dock::after, .x-dlg::after, .x-wrap::after, .x-toast::after, #queue::after, .x-smenu::after {
          z-index: 0; opacity: 0;
          background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0px), rgba(255, 255, 255, .28), transparent 70%);
          transition: opacity 200ms ease-out;
        }
        @media (hover: hover) and (prefers-reduced-motion: no-preference) {
          .x-brandbar:hover::after, .x-nav:hover::after, .x-keys:hover::after, .x-dock:hover::after, .x-dlg:hover::after, .x-wrap:hover::after, .x-toast:hover::after, #queue:hover::after, .x-smenu:hover::after { opacity: 1; }
        }
        @media (hover: none), (prefers-reduced-motion: reduce) {
          .x-brandbar::after, .x-nav::after, .x-keys::after, .x-dock::after, .x-dlg::after, .x-wrap::after, .x-toast::after, #queue::after, .x-smenu::after { display: none; }
        }
        .x-nav.x-glide .x-tabbar { z-index: 0; }

        /* 3. Concentric radii */
        .x-dlg, .x-wrap { border-radius: 24px; }
        .x-chip, .x-qf, .x-qf .x-chip, .x-qf .x-chip:hover, .x-qp, .x-tdo { border-radius: 999px; }

        /* 4. Standout actions as capsules */
        .x-brandbar [data-act="new"], .x-big[data-act="new"], [data-act="savenext"], .x-act--pri, .x-act[data-act="wa"], [data-act="rprint"], [data-act="cprint"], [data-act="cwa"] {
          height: 34px; min-height: 34px; padding: 0 16px; border-radius: 999px !important; font-weight: 600;
          box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 4px 12px rgba(0, 0, 0, .08);
          transition: transform 120ms cubic-bezier(.3, 1.5, .5, 1), background-color 120ms ease-out, border-color 120ms ease-out;
        }
        .x-brandbar [data-act="new"]:active:not(:disabled), .x-big[data-act="new"]:active, [data-act="savenext"]:active:not(:disabled), .x-act--pri:active:not(:disabled), .x-act[data-act="wa"]:active:not(:disabled), [data-act="rprint"]:active, [data-act="cprint"]:active, [data-act="cwa"]:active { transform: scale(.97); }
        @media (pointer: coarse), (max-width: 1023.98px) {
          .x-brandbar [data-act="new"], .x-big[data-act="new"], [data-act="savenext"], .x-act--pri, .x-act[data-act="wa"], [data-act="rprint"], [data-act="cprint"], [data-act="cwa"] { height: auto; min-height: var(--tap); }
        }
        @media (prefers-reduced-motion: reduce) {
          .x-brandbar [data-act="new"]:active, .x-big[data-act="new"]:active, [data-act="savenext"]:active, .x-act--pri:active, .x-act[data-act="wa"]:active, [data-act="rprint"]:active, [data-act="cprint"]:active, [data-act="cwa"]:active { transform: none; }
        }

        /* 5. Typography */
        body, .x-app { font-size: 13px; }
        .x-h1, .x-greet b { font-weight: 700; font-size: 22px; line-height: 23px; letter-spacing: -0.02em; text-align: left; }
        .x-tdg h3 { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: #8E8E93; }
        .x-res, .x-gi, .x-bdt, .x-bdl, .x-tdsum, .x-tds, .x-tiles, .x-dock, #rcpt, .x-rep { font-variant-numeric: tabular-nums; }

        /* 7. Dialog open */
        .x-dlg::backdrop, .x-wrap-bg { background: rgba(20, 24, 40, .18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
        @keyframes x-lg-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
        @keyframes x-lg-fade { from { opacity: 0; } to { opacity: 1; } }
        .x-dlg[open], .x-wrap { animation: x-lg-in 220ms cubic-bezier(.2, .9, .3, 1.2) both; }
        .x-dlg[open]::backdrop { animation: x-lg-fade 220ms ease-out both; }
        @media (prefers-reduced-motion: reduce) {
          .x-dlg[open], .x-wrap { animation: x-lg-fade 220ms ease-out both; }
        }

        /* 8. Hairlines and thin scrollbars */
        .x-list li, .x-r, .x-ql li, .x-hpn li, .x-bdt td, .x-dt td, .x-gw, .x-scl li, .x-tds li, .x-hsl li { border-color: rgba(0, 0, 0, .06); }
        * { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .18) transparent; }
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: rgba(0, 0, 0, .18) padding-box; }

        /* Desktop: floating panels at 20px, glass capsule step tabs, queue and settings menu rims */
        @media (min-width: 1024px) {
          #queue, .x-dock, .x-smenu { border-radius: 20px; }
          #queue, .x-smenu { border-color: transparent; }
          #queue { background: linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 40%), var(--x-glass) !important; container-type: size; }
          /* The queue scrolls, so its rim and light stay pinned to the visible box */
          #queue::before, #queue::after { content: ""; position: sticky; display: block; height: 100cqh; border-radius: inherit; pointer-events: none; }
          #queue::before { top: 0; margin-bottom: -100cqh; z-index: 4; }
          #queue::after { top: 0; bottom: 0; margin-top: -100cqh; z-index: 3; }
          .x-smenu { position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 40%), var(--x-glass); }
          .x-smenu::before, .x-smenu::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
          /* 6. Step tabs: glass capsule segmented control with a gliding white capsule */
          .x-nav { border-radius: 999px; padding: 0 5px; }
          .x-nav button { border-radius: 999px; transition: background-color 220ms cubic-bezier(.2, .8, .2, 1), color 220ms ease-out; }
          .x-nav.x-glide .x-tabbar { height: 30px; border-radius: 999px; background: #FFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .10), 0 4px 12px rgba(0, 0, 0, .06); }
          .x-nav:not(.x-glide) button.x-on { background: #FFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .10), 0 4px 12px rgba(0, 0, 0, .06); }
        }

        /* Fallbacks: no blur or reduced transparency stay near-opaque */
        @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
          .x-brandbar, #queue, .x-nav, .x-keys, .x-dock, .x-dlg, .x-wrap, .x-toast, .x-smenu { background: rgba(255, 255, 255, .88) !important; }
        }
        @media (prefers-reduced-transparency: reduce) {
          .x-brandbar, #queue, .x-nav, .x-keys, .x-dock, .x-dlg, .x-wrap, .x-toast, .x-smenu { background: rgba(255, 255, 255, .88) !important; }
          .x-dlg::backdrop, .x-wrap-bg { -webkit-backdrop-filter: none; backdrop-filter: none; }
        }
      }

/* ===== Crisp pass: bug fix, performance, clear glass, wallpapers (screen only; print and intro untouched) ===== */
      /* A. Hidden means hidden */
      [hidden] { display: none !important; }

      @media screen {
        /* B2 + D. Wallpaper on one fixed, composited layer; only the selected image is referenced */
        :root { --cr-wall: none; --cr-wall-c: #0B0D12; --cr-wall-pos: center; }
        html[data-wall="iridescent"] { --cr-wall: url(w-pearl.jpg?v=16); }
        html[data-wall="night"] { --cr-wall: url(cr-bg-night.jpg?v=16); }
        html[data-wall="ice"] { --cr-wall: url(w-ice.jpg?v=16); }
        html[data-wall="amethyst"] { --cr-wall: url(w-amethyst.jpg?v=16); }
        html[data-wall="labglass"] { --cr-wall: url(w-glassware.jpg?v=16); --cr-wall-pos: center right; }
        html[data-wall="helix"] { --cr-wall: url(w-helix.jpg?v=16); }
        html[data-wall="cells"] { --cr-wall: url(w-cells.jpg?v=16); }
        html[data-wall="plain"] { --cr-wall: none; --cr-wall-c: #F2F2F7; }
        html[data-wall="daylight"] { --cr-wall: url(l-daylight.jpg?v=16); --cr-wall-c: #F2F4F8; }
        html[data-wall="sky"] { --cr-wall: url(l-sky.jpg?v=16); --cr-wall-c: #F2F4F8; }
        html[data-wall="blossom"] { --cr-wall: url(l-blossom.jpg?v=16); --cr-wall-c: #F2F4F8; }
        html[data-wall="labmint"] { --cr-wall: url(l-labmint.jpg?v=16); --cr-wall-c: #F2F4F8; --cr-wall-pos: center right; }
        html[data-wall="molecule"] { --cr-wall: url(l-molecule.jpg?v=16); --cr-wall-c: #F2F4F8; }
        html[data-wall="fluted"] { --cr-wall: url(l-fluted.jpg?v=16); --cr-wall-c: #F2F4F8; }
        /* Phones and portrait tablets get tall artwork, so nothing is blown up or cropped soft */
        @media (orientation: portrait) and (max-width: 1100px) {
          html[data-wall="iridescent"] { --cr-wall: url(w-pearl-p.jpg?v=16); --cr-wall-pos: center; }
          html[data-wall="night"] { --cr-wall: url(cr-bg-night-p.jpg?v=16); --cr-wall-pos: center; }
          html[data-wall="ice"] { --cr-wall: url(w-ice-p.jpg?v=16); --cr-wall-pos: center; }
          html[data-wall="amethyst"] { --cr-wall: url(w-amethyst-p.jpg?v=16); --cr-wall-pos: center; }
          html[data-wall="labglass"] { --cr-wall: url(w-glassware-p.jpg?v=16); --cr-wall-pos: center; }
          html[data-wall="helix"] { --cr-wall: url(w-helix-p.jpg?v=16); --cr-wall-pos: center; }
          html[data-wall="cells"] { --cr-wall: url(w-cells-p.jpg?v=16); --cr-wall-pos: center; }
          html[data-wall="daylight"] { --cr-wall: url(l-daylight-p.jpg?v=16); --cr-wall-pos: center; }
          html[data-wall="sky"] { --cr-wall: url(l-sky-p.jpg?v=16); --cr-wall-pos: center; }
          html[data-wall="blossom"] { --cr-wall: url(l-blossom-p.jpg?v=16); --cr-wall-pos: center; }
          html[data-wall="labmint"] { --cr-wall: url(l-labmint-p.jpg?v=16); --cr-wall-pos: center; }
          html[data-wall="molecule"] { --cr-wall: url(l-molecule-p.jpg?v=16); --cr-wall-pos: center; }
          html[data-wall="fluted"] { --cr-wall: url(l-fluted-p.jpg?v=16); --cr-wall-pos: center; }
        }
        html { background: var(--cr-wall-c) !important; }
        body { background: transparent !important; }
        body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--cr-wall-c) var(--cr-wall) var(--cr-wall-pos) / cover no-repeat; transform: translateZ(0); pointer-events: none; }

        /* C. Clear glass on the big chrome surfaces only */
        :root, :root[data-theme] {
          --x-glass: rgba(255, 255, 255, .18);
          --x-glass-edge: 1px solid rgba(255, 255, 255, .45);
          --x-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 10px 30px rgba(0, 0, 0, .10);
          --x-sheen: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 40%);
          --x-glass-ink: #1D1D1F;
          --x-glass-ink-2: #3A3A3C;
          --x-glass-halo: 0 0 1px rgba(255, 255, 255, .6);
        }
        .x-brandbar, #queue, .x-nav, .x-keys, .x-dock {
          background: var(--x-sheen), var(--x-glass) !important;
          -webkit-backdrop-filter: blur(10px) saturate(190%) brightness(1.06);
          backdrop-filter: blur(10px) saturate(190%) brightness(1.06);
          border-color: rgba(255, 255, 255, .45);
          box-shadow: var(--x-glass-shadow);
          color: var(--x-glass-ink);
          text-shadow: var(--x-glass-halo);
        }
        /* Dialogs keep the clear-glass recipe with a denser fill so their forms stay readable */
        .x-dlg, .x-wrap {
          background: var(--x-sheen), rgba(255, 255, 255, .78) !important;
          -webkit-backdrop-filter: blur(10px) saturate(190%) brightness(1.06);
          backdrop-filter: blur(10px) saturate(190%) brightness(1.06);
          border-color: rgba(255, 255, 255, .45);
          box-shadow: var(--x-glass-shadow);
          color: #1D1D1F;
        }
        .x-dlg::backdrop, .x-wrap-bg { background: rgba(20, 24, 40, .25); -webkit-backdrop-filter: none; backdrop-filter: none; }
        :is(.x-brandbar, #queue, .x-nav, .x-keys, .x-dock) :is(input, select, textarea, kbd, .chip, .x-chip, .x-btn, .x-big, .x-act, .x-qf) { text-shadow: none; }
        .x-brandbar b, .x-dock b, .x-qh p, #queue .x-ql li { color: var(--x-glass-ink); }
        .x-keys button, .x-hico, .x-hlinks button { color: var(--x-glass-ink-2); }

        /* B3. No blur on small things: solid or semi-solid fills */
        .x-qh, .x-toast, .x-smenu, .x-smenu button, .x-chip, .x-qf, .x-qp, .x-btn, .x-act, .x-big, .x-tdo { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
        .x-qh { background: rgba(255, 255, 255, .72); }
        .x-toast { background: rgba(255, 255, 255, .94) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
        .x-smenu { background: rgba(255, 255, 255, .78) !important; }

        /* Queue rows on glass */
        #queue .x-ql li { background: transparent; }
        #queue .x-ql li:hover { background: rgba(255, 255, 255, .22); }
        #queue .x-ql li.x-cur { background: rgba(255, 255, 255, .55); }

        /* Content cards stay solid white, no blur */
        .x-card, .x-test, .x-res .x-rc, .x-tdlist, .x-tdr, .x-hpn, .x-bdl, .x-tile, .x-dtw, .x-sel, .x-list, .x-spanel { background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: none; backdrop-filter: none; }

        /* B1. Pointer-follow light removed */
        .x-brandbar::after, .x-nav::after, .x-keys::after, .x-dock::after, .x-dlg::after, .x-wrap::after, .x-toast::after, #queue::after, .x-smenu::after { display: none !important; }

        /* B4. Short, explicit transitions */
        .x-ql li[data-st]::before { transition: background-color 160ms ease-out; }
        .x-nav.x-glide .x-tabbar { transition: left 160ms ease-out, width 160ms ease-out; }
        .x-brandbar [data-act="new"], .x-big[data-act="new"], [data-act="savenext"], .x-act--pri, .x-act[data-act="wa"], [data-act="rprint"], [data-act="cprint"], [data-act="cwa"] {
          transition: transform 120ms ease-out, background-color 120ms ease-out, border-color 120ms ease-out, box-shadow 120ms ease-out;
        }
        .x-nav button { transition: background-color 160ms ease-out, color 160ms ease-out; }
        .x-flag.x-pop { animation-duration: 160ms; }
        .x-dlg[open], .x-wrap { animation: x-lg-in 160ms ease-out both; }
        .x-dlg[open]::backdrop { animation: x-lg-fade 160ms ease-out both; }

        /* B5. Containment */
        #queue-list, .x-rscr, #tl { contain: layout paint; }
        #queue .x-ql li { content-visibility: auto; contain-intrinsic-size: auto 52px; }

        /* Dark wallpaper: dark clear glass, light chrome text; content cards stay white */
        html.cr-dark {
          --x-glass: rgba(30, 30, 40, .28);
          --x-sheen: linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 40%);
          --x-glass-ink: #F5F5F7;
          --x-glass-ink-2: rgba(245, 245, 247, .82);
          --x-glass-halo: 0 0 1px rgba(0, 0, 0, .5);
        }
        html.cr-dark :is(.x-brandbar, #queue, .x-nav, .x-keys, .x-dock) { border-color: rgba(255, 255, 255, .18); }
        html.cr-dark :is(.x-brandbar, #queue, .x-nav, .x-keys, .x-dock)::before { opacity: .4; }
        html.cr-dark .x-qh { background: rgba(36, 36, 48, .72); }
        html.cr-dark .x-qh p, html.cr-dark .x-qh p small, html.cr-dark .x-ql .x-l1 span, html.cr-dark .x-ql .x-l2, html.cr-dark .x-nav button, html.cr-dark .x-keys .x-k { color: rgba(235, 235, 245, .6); }
        html.cr-dark :is(.x-brandbar, #queue .x-ql .x-l1, .x-keys button) { color: #F5F5F7; }
        html.cr-dark #queue .x-ql li:hover { background: rgba(255, 255, 255, .10); }
        html.cr-dark #queue .x-ql li.x-cur { background: rgba(255, 255, 255, .18); }
        html.cr-dark .x-nav button.x-on, html.cr-dark .x-keys button:hover { color: #F5F5F7; }
        html.cr-dark .x-keys .x-k { border-color: rgba(255, 255, 255, .25); }
        html.cr-dark .x-app :is(.x-h1, .x-sub, .x-empty, .x-greet, .x-rft p) { color: #F5F5F7; text-shadow: 0 0 1px rgba(0, 0, 0, .5); }
        html.cr-dark .x-app :is(.x-spanel, .x-card, .x-rc, .x-tile, .x-list, .x-rep) :is(.x-h1, .x-sub, .x-empty, .x-greet) { color: #1D1D1F; text-shadow: none; }
        html.cr-dark .x-app > .x-greet b, html.cr-dark .x-app .x-hm > .x-greet b { color: #F5F5F7; }
        html.cr-dark .x-app .x-hm > .x-greet span { color: rgba(235, 235, 245, .7); }
        html.cr-dark .x-app .x-hpn .x-empty { color: #6E6E73; text-shadow: none; }
        html.cr-dark .x-app > .x-greet span, html.cr-dark .x-app > .x-sumh .x-h3, html.cr-dark .x-app > .x-h3, html.cr-dark .x-hlab { color: rgba(235, 235, 245, .6); }
        html.cr-dark .x-nav .x-k { color: rgba(235, 235, 245, .6); border-color: rgba(255, 255, 255, .25); }
        html.cr-dark #queue .x-ql li.x-cur { background: #3A3A46; }
        html.cr-dark #queue .x-ql li.x-cur :is(.x-l1, .x-l1 b) { color: #F5F5F7; }
        html.cr-dark .x-nav button.x-on, html.cr-dark .x-nav button.x-on .x-k { color: #F5F5F7; text-shadow: none; }
        html.cr-dark .x-nav.x-glide .x-tabbar { background: #F5F5F7; }
        html.cr-dark .x-nav button.x-on { border-bottom-color: #F5F5F7; }
        @media (min-width: 1024px) {
          html.cr-dark .x-nav.x-glide .x-tabbar, html.cr-dark .x-nav:not(.x-glide) button.x-on { background: #3A3A46; }
        }

        /* Light wallpaper (html.cr-light): dark text on the wallpaper, whiter glass with a hairline edge */
        html.cr-light { --x-glass-ink: #1D1D1F; --x-glass-ink-2: rgba(60, 60, 67, .6); --x-glass: rgba(255, 255, 255, .32); }
        html.cr-light :is(.x-brandbar, #queue, .x-nav, .x-keys, .x-dock) { border-color: rgba(0, 0, 0, .08); box-shadow: var(--x-glass-shadow), 0 0 0 .5px rgba(0, 0, 0, .08); }
        html.cr-light[data-glass] :is(.x-brandbar, #queue, .x-nav, .x-keys, .x-dock, .x-toast) { background: var(--x-sheen), linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .14)), rgba(var(--gl-rgb), var(--gl-a)) !important; }
        html.cr-light :is(.x-brandbar, #queue .x-ql .x-l1, .x-keys button, .x-qh p, .x-nav button.x-on, .x-nav button.x-on .x-k) { color: #1D1D1F; }
        html.cr-light :is(.x-qh p small, .x-ql .x-l1 span, .x-ql .x-l2, .x-nav button, .x-keys .x-k, .x-nav .x-k, .x-hlab) { color: rgba(60, 60, 67, .6); }
        html.cr-light .x-app :is(.x-h1, .x-sub, .x-empty, .x-greet, .x-greet b, .x-rft p) { color: #1D1D1F; text-shadow: none; }
        html.cr-light .x-app > .x-greet span, html.cr-light .x-app > .x-sumh .x-h3, html.cr-light .x-app > .x-h3 { color: rgba(60, 60, 67, .6); }

        /* Fallbacks: no blur or reduced transparency stay near-opaque */
        @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
          .x-brandbar, #queue, .x-nav, .x-keys, .x-dock, .x-dlg, .x-wrap { background: rgba(255, 255, 255, .88) !important; }
          html.cr-dark :is(.x-brandbar, #queue, .x-nav, .x-keys, .x-dock) { background: rgba(30, 30, 40, .9) !important; }
        }
        @media (prefers-reduced-transparency: reduce) {
          .x-brandbar, #queue, .x-nav, .x-keys, .x-dock, .x-dlg, .x-wrap { background: rgba(255, 255, 255, .88) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
          html.cr-dark :is(.x-brandbar, #queue, .x-nav, .x-keys, .x-dock) { background: rgba(30, 30, 40, .9) !important; }
        }
        @media (prefers-reduced-motion: reduce) {
          .x-dlg[open], .x-wrap { animation: x-lg-fade 160ms ease-out both; }
        }

        /* D. Wallpaper picker */
        .x-wpc.x-card { padding: 16px; margin: 12px 0 16px; }
        .x-wpg { display: grid; grid-template-columns: repeat(auto-fill, 150px); gap: 16px 12px; margin-top: 12px; }
        .x-wpgl { margin: 16px 0 0; color: #6E6E73; font: 500 12px/1.3 var(--sans); letter-spacing: .02em; text-transform: uppercase; }
        .x-wpgl + .x-wpg { margin-top: 8px; }
        .x-wpt { display: flex; flex-direction: column; gap: 6px; width: 150px; padding: 0; border: 0; background: none; color: #1D1D1F; font: 500 13px/1.3 var(--sans); text-align: left; cursor: pointer; }
        .x-wpt__i { position: relative; display: block; width: 150px; height: 84px; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); transition: box-shadow 120ms ease-out; }
        .x-wpt__i img { display: block; width: 150px; height: 84px; object-fit: cover; }
        .x-wpt__i--plain { background: #F2F2F7; }
        .x-wpt:hover .x-wpt__i { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 0 0 2px rgba(0, 122, 255, .3); }
        .x-wpt[aria-pressed="true"] .x-wpt__i { overflow: visible; box-shadow: 0 0 0 2px #007AFF; }
        .x-wpt[aria-pressed="true"] .x-wpt__i img { border-radius: 12px; }
        .x-wpt[aria-pressed="true"] .x-wpt__i::after { content: "✓"; position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #007AFF; color: #FFF; font: 700 12px/1 var(--sans); box-shadow: 0 0 0 2px #FFF; }
        .x-wpt:focus-visible { outline: 0; }
        .x-wpt:focus-visible .x-wpt__i { box-shadow: 0 0 0 2px #007AFF, 0 0 0 5px var(--x-ring); }
      }

/* Glass transparency: html[data-glass] = clear | light | frosted | solid (screen only) */
      @media screen {
        html[data-glass] { --gl-rgb: 255, 255, 255; --gl-a: .18; --gl-bf: blur(10px) saturate(190%) brightness(1.06); --gl-dlg: .78; }
        html[data-glass="clear"] { --gl-a: .10; --gl-bf: blur(6px) saturate(190%) brightness(1.06); --gl-dlg: .70; }
        html[data-glass="frosted"] { --gl-a: .45; --gl-bf: blur(18px) saturate(180%) brightness(1.06); --gl-dlg: .85; }
        html[data-glass="solid"] { --gl-a: .92; --gl-bf: none; --gl-dlg: .95; }
        html.cr-dark[data-glass] { --gl-rgb: 30, 30, 40; }
        html[data-glass] :is(.x-brandbar, #queue, .x-nav, .x-keys, .x-dock, .x-toast) {
          background: var(--x-sheen), rgba(var(--gl-rgb), var(--gl-a)) !important;
          -webkit-backdrop-filter: var(--gl-bf) !important;
          backdrop-filter: var(--gl-bf) !important;
        }
        html[data-glass] .x-toast { color: var(--x-glass-ink); text-shadow: var(--x-glass-halo); }
        html[data-glass] :is(.x-dlg, .x-wrap) {
          background: var(--x-sheen), rgba(255, 255, 255, var(--gl-dlg)) !important;
          -webkit-backdrop-filter: var(--gl-bf) !important;
          backdrop-filter: var(--gl-bf) !important;
        }
        @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
          html[data-glass]:not([data-glass="solid"]) :is(.x-brandbar, #queue, .x-nav, .x-keys, .x-dock, .x-toast, .x-dlg, .x-wrap) { background: rgba(255, 255, 255, .88) !important; }
          html.cr-dark[data-glass]:not([data-glass="solid"]) :is(.x-brandbar, #queue, .x-nav, .x-keys, .x-dock, .x-toast) { background: rgba(30, 30, 40, .9) !important; }
        }
        @media (prefers-reduced-transparency: reduce) {
          html[data-glass]:not([data-glass="solid"]) :is(.x-brandbar, #queue, .x-nav, .x-keys, .x-dock, .x-toast, .x-dlg, .x-wrap) { background: rgba(255, 255, 255, .88) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
          html.cr-dark[data-glass]:not([data-glass="solid"]) :is(.x-brandbar, #queue, .x-nav, .x-keys, .x-dock, .x-toast) { background: rgba(30, 30, 40, .9) !important; }
        }

        /* Segmented control under the wallpaper tiles */
        .x-glc { margin-top: 20px; }
        .x-glc__l { margin: 0 0 8px; color: #1D1D1F; font: 500 13px/1.3 var(--sans); }
        .x-glseg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: #E6E6EB; max-width: 100%; box-sizing: border-box; }
        .x-glseg button { flex: 1 1 0; min-width: 72px; height: 32px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: #1D1D1F; font: 500 13px/1 var(--sans); cursor: pointer; transition: background-color 120ms ease-out, box-shadow 120ms ease-out; }
        .x-glseg button:hover:not([aria-pressed="true"]) { background: rgba(255, 255, 255, .45); }
        .x-glseg button[aria-pressed="true"] { background: #FFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .04); }
        .x-glseg button:focus-visible { outline: 2px solid #007AFF; outline-offset: 1px; }
        .x-glc__h { margin: 8px 0 0; color: #6E6E73; font: 400 12px/1.4 var(--sans); }
        @media (max-width: 1023px) { .x-glseg { display: flex; } .x-glseg button { min-width: 0; height: var(--tap); padding: 0 8px; } }
        @media (prefers-reduced-motion: reduce) { .x-glseg button { transition: none; } }
      }

/* Glass fine-tune: html[data-glass="custom"] reads --cr-glass-a (fill alpha) and --cr-glass-blur (px) from <html> inline style (screen only) */
      @media screen {
        html[data-glass="custom"] { --cr-glass-a: .171; --cr-glass-blur: 10px; --gl-a: var(--cr-glass-a); --gl-bf: blur(var(--cr-glass-blur)) saturate(180%); }
        html[data-glass="custom"] :is(.x-brandbar, #queue, .x-nav, .x-keys, .x-dock, .x-toast) {
          background: var(--x-sheen), rgba(var(--gl-rgb), var(--cr-glass-a)) !important;
          -webkit-backdrop-filter: blur(var(--cr-glass-blur)) saturate(180%) !important;
          backdrop-filter: blur(var(--cr-glass-blur)) saturate(180%) !important;
        }
        html[data-glass="custom"] :is(.x-dlg, .x-wrap) {
          background: var(--x-sheen), rgba(255, 255, 255, max(.7, var(--cr-glass-a))) !important;
          -webkit-backdrop-filter: blur(var(--cr-glass-blur)) saturate(180%) !important;
          backdrop-filter: blur(var(--cr-glass-blur)) saturate(180%) !important;
        }
        html[data-glass="custom"][data-glass-nb] :is(.x-brandbar, #queue, .x-nav, .x-keys, .x-dock, .x-toast, .x-dlg, .x-wrap) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

        .x-glf { margin-top: 18px; max-width: 420px; }
        .x-glf__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 4px; }
        .x-glf__top .x-glc__l { margin: 0; }
        .x-glf__reset { min-height: 32px; padding: 0 4px; border: 0; background: none; color: #007AFF; font: 500 13px/1 var(--sans); cursor: pointer; border-radius: 6px; }
        .x-glf__reset:hover { text-decoration: underline; }
        .x-glf__reset:focus-visible { outline: 2px solid #007AFF; outline-offset: 1px; }
        /* Control Centre module: one glass card, capsule sliders with no thumb */
        .x-glf__mod { display: grid; gap: 14px; padding: 14px 16px 16px; border: var(--x-glass-edge); border-radius: 20px; background: var(--x-sheen), rgba(118, 118, 128, .10); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); box-shadow: var(--x-glass-shadow), 0 0 0 .5px rgba(0, 0, 0, .06); }
        .x-glf__row { display: grid; gap: 6px; }
        .x-glf__row label { color: #1D1D1F; font: 600 13px/1.3 var(--sans); }
        .x-glf__ctl { display: grid; grid-template-columns: 1fr 44px; align-items: center; gap: 12px; }
        .x-glf__row output { color: #3A3A3C; font: 500 13px/1 var(--sans); font-variant-numeric: tabular-nums; text-align: right; }
        .x-glf__cap { --p: 50%; position: relative; height: 32px; }
        .x-glf__cap::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 28px; border-radius: 14px; transform: translateY(-50%); background: linear-gradient(90deg, #FFF var(--p), rgba(120, 120, 128, .16) var(--p)); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .06); transition: height 120ms ease-out, border-radius 120ms ease-out; pointer-events: none; }
        .x-glf__cap.is-drag::before { height: 32px; border-radius: 16px; }
        .x-glf__cap:has(input:focus-visible)::before { box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .06), 0 0 0 3px rgba(0, 122, 255, .45); }
        .x-glf__ico { position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: #3A3A3C; filter: drop-shadow(0 0 1px rgba(255, 255, 255, .7)); pointer-events: none; }
        .x-glf input[type="range"] { --p: 50%; position: relative; display: block; -webkit-appearance: none; appearance: none; width: 100%; height: 100%; margin: 0; padding: 0; border-radius: 14px; background: transparent; cursor: pointer; }
        .x-glf input[type="range"]::-webkit-slider-runnable-track { height: 100%; background: transparent; border: 0; }
        .x-glf input[type="range"]::-moz-range-track { height: 100%; background: transparent; border: 0; }
        .x-glf input[type="range"]::-moz-range-progress { background: transparent; }
        .x-glf input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 0; height: 100%; border: 0; background: transparent; box-shadow: none; }
        .x-glf input[type="range"]::-moz-range-thumb { width: 0; height: 100%; border: 0; background: transparent; box-shadow: none; opacity: 0; }
        .x-glf input[type="range"]:focus { outline: none; }
        html.cr-dark .x-glf__mod { background: var(--x-sheen), rgba(60, 60, 72, .14); }
        html.cr-dark .x-glf__row label, html.cr-dark .x-glf__row output { color: #1D1D1F; text-shadow: none; }
        html.cr-dark .x-glf__ico { color: #1D1D1F; }
        @media (max-width: 1023px) {
          .x-glf { max-width: none; }
          .x-glf__cap { height: var(--tap); }
          .x-glf__reset { min-height: var(--tap); }
        }
        @media (prefers-reduced-motion: reduce) { .x-glf__cap::before { transition: none; } }
      }

/* ===== v14: modern UI type (Inter, bundled) + wallpaper-adaptive text. Screen only; printed reports keep their own type ===== */
      @font-face { font-family: "CR Inter"; src: url(inter.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
      @media screen {
        :root, :root[data-theme], html[data-wall], html[data-wall][data-glass] { --sans: "CR Inter", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
        body { font-family: var(--sans); font-feature-settings: "cv11", "ss03", "calt"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-optical-sizing: auto; }
        button, input, select, textarea, optgroup { font-family: var(--sans); font-feature-settings: inherit; }
        /* numbers line up and read faster */
        :is(.x-tile, .x-dt, .x-ql, .x-qf, table, input, .x-rc) { font-variant-numeric: tabular-nums; }
        :is(.x-h1, .x-greet b, .x-h3, h1, h2, h3) { letter-spacing: -0.022em; }
        .x-greet b, .x-h1 { font-weight: 700; }
        /* printed report preview keeps the printed typeface so screen matches paper */
        .x-rep { --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif; font-feature-settings: normal; }
        .x-wm b { box-sizing: border-box; height: 2.05em !important; padding: 0 .78em !important; line-height: 1 !important; border: 1.5px solid currentColor !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: -0.012em; }
        .x-smenu button:not([aria-current="true"]) { color: #3A3A3C !important; font-weight: 500; }

        /* Adaptive ink: set per element from what is actually behind it (wallpaper + glass) */
        [data-ink] { transition: color .25s ease, text-shadow .25s ease; }
        [data-ink="d"] { color: #111114 !important; text-shadow: none !important; }
        [data-ink="d"][data-ink-s] { color: rgba(17, 17, 20, .74) !important; }
        [data-ink="d"][data-ink-b] { text-shadow: 0 0 2px rgba(255, 255, 255, .95), 0 0 10px rgba(255, 255, 255, .85), 0 0 18px rgba(255, 255, 255, .6) !important; }
        [data-ink="l"] { color: #FFFFFF !important; text-shadow: 0 1px 1px rgba(0, 0, 0, .22) !important; }
        [data-ink="l"][data-ink-s] { color: rgba(255, 255, 255, .82) !important; }
        [data-ink="l"][data-ink-b] { text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 0 10px rgba(0, 0, 0, .5), 0 0 18px rgba(0, 0, 0, .35) !important; }
        [data-ink] svg { color: inherit; }
      }

/* ===== v15: audit fixes (screen only) ===== */
      @media screen {
        .x-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
        .x-memwarn { color: #B42318 !important; font-weight: 600; }
        /* No-patient screens: pick a recent patient instead of a dead end */
        .x-pickh { margin: 28px 0 10px !important; }
        .x-pick { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 640px; }
        .x-pick button { box-sizing: border-box; width: 100%; min-height: 60px; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; row-gap: 2px; padding: 12px 16px; border: 1px solid rgba(0, 0, 0, .08); border-radius: 14px; background: #FFF; color: #1D1D1F; text-align: left; font: inherit; cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
        .x-pick button:hover { border-color: rgba(0, 0, 0, .22); }
        .x-pick button:active { transform: scale(.99); }
        .x-pick button:focus-visible { outline: 2px solid var(--x-ring, #007AFF); outline-offset: 2px; }
        .x-pick b { font-size: 15px; font-weight: 600; }
        .x-pick small { grid-column: 1; font-size: 13px; color: #6E6E73; font-variant-numeric: tabular-nums; }
        .x-pick span { grid-column: 2; grid-row: 1 / 3; font-size: 22px; line-height: 1; color: #8E8E93; }
        /* One type scale for form controls (no 13.33px browser default); 16px on phones so iOS never zooms */
        :where(input, select, textarea, button) { font-size: 13px; }
        /* Tap targets */
        .x-hlinks button { min-height: 32px; padding: 6px 2px !important; }
        input[type="checkbox"]:not([role="switch"]) { width: 18px; height: 18px; }
        /* Clear hierarchy: secondary actions are real buttons, primary stays solid */
        .x-act { background: #FFF !important; color: #1D1D1F !important; border: 1px solid rgba(0, 0, 0, .10) !important; text-shadow: none !important; }
        .x-act .x-k { color: #6E6E73 !important; }
        .x-act--pri { background: #111 !important; color: #FFF !important; border-color: #111 !important; }
        .x-act--pri .x-k { color: rgba(255, 255, 255, .72) !important; }
        .x-bdb .x-btn:not(.x-on) { background: #FFF !important; color: #1D1D1F !important; border: 1px solid rgba(0, 0, 0, .14) !important; }
        /* Report preview: A4 scaled to the column width, scroll for the rest of the page */
        .x-rview { overflow-x: hidden !important; overflow-y: auto !important; align-items: flex-start !important; justify-content: center !important; }
        .x-rscale { flex: none; overflow: hidden !important; margin: 0 auto; }
        .x-rview .x-rep { width: 210mm !important; max-width: none !important; min-height: 297mm; margin: 0 !important; transform-origin: 0 0; }
      }
      @media screen and (min-width: 1280px) {
        /* Use the screen: wider work column on large desktops */
        .page { max-width: none !important; margin: 0 !important; }
        .x-app { max-width: 1240px !important; margin-left: 320px !important; margin-right: 0 !important; }
        .x-rlay { grid-template-columns: minmax(0, 1fr) 240px !important; }
        .x-res { max-width: 980px; }
      }
      @media screen and (max-width: 1023.98px) {
        :where(input, select, textarea) { font-size: 16px; }
        .x-hlinks button, .x-sumh .x-btn { min-height: 44px; }
        .x-rview { overflow: hidden !important; display: block !important; }
        /* Bottom bar: five destinations (Tests is reached from Patient; Settings sits in the header) */
        #nav button[data-go="tests"], #nav button[data-go="settings"], #nav button[data-act="keys"] { display: none !important; }
        #nav .x-k, #nav kbd { display: none !important; }
        /* Header: wordmark, plus Settings as its own glass button */
        .x-brandbar .x-hr8 { display: flex !important; position: static !important; margin: 0 0 0 6px !important; gap: 0; flex: none; }
        .x-brandbar:has(.x-hr8) { display: flex !important; align-items: center; width: auto !important; }
        .x-brandbar .x-hr8 > :not(.x-hico[data-go="settings"]) { display: none !important; }
        .x-brandbar .x-hr8 .x-hico[data-go="settings"] { display: inline-grid !important; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: transparent; border: 0; color: inherit; }
        .x-brandbar .x-hr8 .x-hico svg { width: 20px; height: 20px; }
        /* Saved reports: name on its own line, status + action underneath */
        #hl .x-list li { display: grid !important; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 6px 8px; }
        #hl .x-list li > div { grid-column: 1 / -1; min-width: 0; }
        #hl .x-list li > div b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        #hl .x-list li > div small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        #hl .x-list li > .x-btn { grid-column: 4; min-height: 40px; }
      }
      /* Touch screens have no F-keys: hide shortcut chips */
      @media (hover: none) and (pointer: coarse), screen and (max-width: 640px) {
        .x-k, kbd.x-k { display: none !important; }
      }
          /* v19 phone layout: header is the bare wordmark, Settings takes Bill's tab, Billing lives inside Settings */
      @media screen and (max-width: 1023.98px) {
        #nav button[data-go="settings"] { display: flex !important; }
        #nav button[data-go="bill"] { display: none !important; }
        :root:root body header.x-brandbar:not(#cr-a):not(#cr-b) { background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
        body header.x-brandbar:not(#cr-a):not(#cr-b)::before, body header.x-brandbar:not(#cr-a):not(#cr-b)::after { display: none !important; }
        .x-setbill { display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box; margin: 0 0 14px; padding: 16px 18px; border: 1px solid rgba(0, 0, 0, .08); border-radius: 16px; background: #FFF; color: #1D1D1F; text-align: left; font: 400 14px/1.4 var(--sans); cursor: pointer; }
        .x-setbill .x-sbi { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #F2F2F7; font: 600 19px/1 var(--sans); }
        .x-setbill .x-sbt { flex: 1; min-width: 0; }
        .x-setbill b { display: block; font-weight: 650; font-size: 16px; }
        .x-setbill small { display: block; color: #6E6E73; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .x-setbill .x-sbc { flex: none; font-size: 22px; color: #8E8E93; }
      }
      @media screen and (min-width: 1024px) { .x-setbill { display: none !important; } }

/* ===== v16: critical values + payment at registration ===== */
      .x-flag[data-f="HH"], .x-flag[data-f="LL"] { display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 6px; background: #D70015; color: #FFF !important; font-weight: 700; font-size: 11px; letter-spacing: .02em; }
      .x-rt .x-rt__cfl { padding: 0 3px; border: 1.5px solid currentColor; border-radius: 3px; }
      .x-rt tr.x-rt__crit td { font-weight: 700; }
      .x-rcrit { margin: 10px 0 0; font-size: 9pt; color: inherit; }
      @media screen {
        .x-critb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: #FFF1F0; border: 1px solid #FFCCC7; color: #8A1C12; font: 500 13px/1.45 var(--sans); }
        .x-critb b { font-weight: 700; color: #B42318; }
        .x-critb span { flex: 1 1 260px; }
        .x-critb em { font-style: normal; font-weight: 600; color: #067647; }
        .chip.x-critc { background: #D70015 !important; color: #FFF !important; border-color: #D70015 !important; font-weight: 600; }
        .x-cdlg { width: min(440px, calc(100vw - 32px)); box-sizing: border-box; padding: 22px 22px 18px; border: 0; border-radius: 18px; background: #FFF; color: #1D1D1F; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); font: 400 14px/1.5 var(--sans); }
        .x-cdlg::backdrop { background: rgba(0, 0, 0, .35); }
        .x-cdlg h2 { margin: 0 0 6px; font: 700 18px/1.3 var(--sans); color: #B42318; letter-spacing: -0.01em; }
        .x-cdlg p { margin: 0 0 10px; color: #3A3A3C; }
        .x-cdlg ul { margin: 0 0 14px; padding: 0; list-style: none; border: 1px solid #FFCCC7; border-radius: 12px; overflow: hidden; }
        .x-cdlg li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; background: #FFF7F6; font-variant-numeric: tabular-nums; }
        .x-cdlg li + li { border-top: 1px solid #FFE1DD; }
        .x-cdlg li b { color: #B42318; }
        .x-cdlg .x-cdb { display: flex; justify-content: flex-end; gap: 8px; }
        .x-cdlg button { min-height: 40px; padding: 0 16px; border-radius: 999px; font: 600 14px/1 var(--sans); cursor: pointer; }
        .x-cdlg .x-cdc { background: #FFF; color: #1D1D1F; border: 1px solid rgba(0, 0, 0, .14); }
        .x-cdlg .x-cdo { background: #111; color: #FFF; border: 1px solid #111; }
        .x-cdlg button:focus-visible { outline: 2px solid #007AFF; outline-offset: 2px; }
        /* Payment at registration (desktop Tests) */
        .x-tdf .x-tdpay { display: grid !important; gap: 4px; margin: 0; padding: 8px 0 6px; border-top: 1px solid var(--x-line); }
        .x-tdf .x-tdpay .x-r { display: grid !important; grid-template-columns: 1fr auto; align-items: center; gap: 8px; min-height: 32px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
        .x-tdf .x-tdpay .x-lab { margin: 0 !important; font: 500 13px/1.3 var(--sans) !important; color: #3A3A3C; }
        .x-tdf .x-tdpay .x-in, .x-tdf .x-tdpay .x-seg { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; justify-content: flex-end; gap: 4px; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
        .x-tdf .x-tdpay input { flex: none !important; width: 72px !important; min-width: 0 !important; height: 30px !important; min-height: 0 !important; box-sizing: border-box; padding: 0 8px !important; text-align: right; }
        .x-tdf .x-tdpay .x-btn { flex: none !important; width: auto !important; min-width: 30px !important; min-height: 0 !important; height: 30px !important; padding: 0 9px !important; font-size: 12px !important; }
        .x-tdf .x-tdpay .x-btn .x-k { display: none !important; }
        .x-tdf .x-tdpay .x-fig { margin: 0 !important; font: 600 14px/1.3 var(--sans) !important; font-variant-numeric: tabular-nums; text-align: right; }
        .x-tdf .x-tdpay .x-due .x-fig { color: #B42318; }
        .x-tdf .x-tdpay .x-due.x-zero .x-fig { color: #067647; }
      }
      @media screen and (min-width: 1024px) { .x-ovr:has([data-k="c"]) { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .x-ovr:has([data-k="c"]) > label { width: auto !important; min-width: 0; } }
      @media screen and (max-width: 1023.98px) {
        /* Phone: headings centred under the centred wordmark */
        .x-app > .x-greet, .x-app .x-hm > .x-greet { text-align: center !important; margin: 4px auto 18px !important; max-width: 32ch; }
        .x-app > .x-greet b, .x-app .x-hm > .x-greet b { text-align: center !important; font-size: 24px !important; line-height: 1.2 !important; letter-spacing: -0.022em; text-wrap: balance; }
        .x-app > .x-greet span, .x-app .x-hm > .x-greet span { text-align: center !important; margin-top: 6px !important; font-size: 14px !important; }
        .x-app > .x-h1:not(.x-vh) { text-align: center !important; font-size: 24px !important; line-height: 1.2 !important; margin-top: 4px !important; text-wrap: balance; }
        .x-app > .x-h1:not(.x-vh) + .x-sub, .x-app > .x-ract .x-h1 { text-align: center !important; }
        .x-app > .x-h1:not(.x-vh) + .x-sub { margin: 4px auto 16px !important; max-width: 36ch; text-wrap: balance; }
        .x-ract > .x-h1, .x-ract > .x-h1 + .x-sub, .x-ract > .x-sub { text-align: center !important; }
      }
      @media print { .x-critb, .x-cdlg { display: none !important; } }

/* ===== v20: Appearance window, Settings on phones, desktop step bar, queue breathing room ===== */
      @media screen {
        /* Round wallpaper button: the way into Appearance (desktop + phone) */
        .x-apbtn { flex: none; position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
        .x-apbtn__i { width: 30px; height: 30px; border-radius: 50%; background: #F2F2F7 center / cover no-repeat; box-shadow: 0 0 0 2px #FFF, 0 0 0 3px rgba(0, 0, 0, .14), 0 2px 8px rgba(0, 0, 0, .18); transition: transform 180ms cubic-bezier(.2, .8, .2, 1), box-shadow 180ms ease; }
        .x-apbtn:hover .x-apbtn__i { transform: scale(1.06); }
        .x-apbtn:active .x-apbtn__i { transform: scale(.94); }
        .x-apbtn[aria-expanded="true"] .x-apbtn__i { box-shadow: 0 0 0 2px #FFF, 0 0 0 4px #007AFF, 0 2px 8px rgba(0, 0, 0, .18); }
        .x-apbtn:focus-visible { outline: 0; }
        .x-apbtn:focus-visible .x-apbtn__i { box-shadow: 0 0 0 2px #FFF, 0 0 0 4px var(--x-ring, #007AFF); }

        /* The floating window */
        .x-ap { position: fixed; z-index: 9000; width: 392px; max-width: calc(100vw - 24px); max-height: min(720px, calc(100dvh - var(--ap-top, 64px) - 16px)); display: flex; flex-direction: column; box-sizing: border-box;
          border-radius: 22px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
          box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12), 0 24px 70px rgba(0, 0, 0, .28), 0 4px 14px rgba(0, 0, 0, .10); color: #1D1D1F; font: 400 14px/1.4 var(--sans); overflow: hidden; will-change: transform, opacity; }
        .x-ap__hd { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 6px 20px; }
        .x-ap__hd b { font: 650 17px/1.2 var(--sans); letter-spacing: -0.01em; }
        .x-ap__x { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .06); color: #3A3A3C; font: 600 13px/1 var(--sans); cursor: pointer; }
        .x-ap__x:hover { background: rgba(0, 0, 0, .1); }
        .x-ap__bd { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 6px; }
        .x-ap__ft { flex: none; display: flex; justify-content: center; padding: 2px 20px 10px; }
        .x-ap__ft .x-replay { min-height: 36px; }
        .x-ap .x-wpc { margin: 0; }
        .x-ap .x-wpc > .x-h3 { display: none; }
        .x-ap .x-wpc > .x-sub { margin: 0 0 4px; color: #6E6E73; font: 400 12.5px/1.45 var(--sans); }
        .x-ap .x-wpgl { margin: 14px 0 0; }
        .x-ap .x-wpg { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
        .x-ap .x-wpt { width: auto; min-width: 0; font-size: 12px; }
        .x-ap .x-wpt__i, .x-ap .x-wpt__i img { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; }
        .x-ap .x-wpt__i picture { display: contents; }
        .x-ap .x-glc { margin-top: 18px; }
        .x-ap .x-glseg { display: flex; width: 100%; }
        .x-ap .x-glseg button { min-width: 0; }
        /* Portrait phones: tall thumbnails that match what the wallpaper looks like on the phone, in side-scrolling rows */
        @media (orientation: portrait) and (max-width: 1100px) {
          .x-ap .x-wpg { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; margin: 8px -20px 0 !important; padding: 4px 20px 6px !important; scroll-padding-inline: 20px; scrollbar-width: none; }
          .x-ap .x-wpg::-webkit-scrollbar { display: none; }
          .x-ap .x-wpt { flex: none; width: 76px; scroll-snap-align: start; }
          .x-ap .x-wpt__i, .x-ap .x-wpt__i img { width: 76px; aspect-ratio: 9 / 16; }
        }

        /* Desktop: Settings sits right after Report in the step bar; Bill lives inside Settings; the bar is only as wide as its tabs */
        @media (min-width: 1024px) {
          #nav.x-nav { width: fit-content !important; max-width: 100%; box-sizing: border-box; }
          #nav.x-nav button[data-go="settings"] { display: inline-flex !important; }
          #nav.x-nav button[data-go="bill"] { display: none !important; }
          .x-brandbar .x-hr8 .x-apbtn { margin-left: 2px; }
        }

        /* Settings menu: Billing + Appearance on top */
        .x-smq { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid rgba(0, 0, 0, .08); }
        .x-smgo { display: flex; align-items: center; gap: 10px; min-height: var(--tap, 40px); padding: 0 12px; border: 0; border-radius: var(--r-s, 10px); background: none; color: var(--x-ink, #1D1D1F); font: var(--type-label, 500 13px/1.3 var(--sans)); text-align: left; cursor: pointer; }
        .x-smgo i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: rgba(0, 0, 0, .06); font: 600 13px/1 var(--sans); font-style: normal; }
        .x-smgo:hover { background: var(--fill-tertiary, rgba(0, 0, 0, .05)); }

        /* Queue (desktop sidebar): count-over-label filters with real gaps, and rows with air between them */
        #queue #queue-f.x-qf { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px !important; margin-top: 12px; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
        #queue #queue-f .x-chip { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: auto !important; min-height: 46px !important; padding: 6px 2px !important; border-radius: 12px !important; border: 1px solid rgba(0, 0, 0, .08) !important; background: rgba(255, 255, 255, .7) !important; color: #3A3A3C !important; font: 500 11px/1.2 var(--sans) !important; letter-spacing: .01em; box-shadow: none !important; }
        #queue #queue-f .x-chip small { display: block; margin: 0 !important; font: 650 16px/1.1 var(--sans) !important; opacity: 1 !important; color: #1D1D1F; font-variant-numeric: tabular-nums; }
        #queue #queue-f .x-chip.x-on { background: #111 !important; border-color: #111 !important; color: rgba(255, 255, 255, .8) !important; }
        #queue #queue-f .x-chip.x-on small { color: #FFF; }
        #queue .x-ql { padding: 8px 10px 16px !important; display: flex; flex-direction: column; gap: 6px; }
        #queue .x-ql li[data-id] { padding: 11px 12px 11px 14px !important; border: 1px solid rgba(0, 0, 0, .06) !important; border-radius: 14px; background: rgba(255, 255, 255, .55); gap: 4px !important; overflow: hidden; }
        #queue .x-ql li[data-id]:hover { background: rgba(255, 255, 255, .85); }
        #queue .x-ql li.x-cur { background: #FFF !important; border-color: rgba(0, 0, 0, .14) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .08) !important; }
        #queue .x-ql li[data-id] .x-l2 { row-gap: 6px; }
        #queue .x-ql li.x-qe { border: 0 !important; background: none !important; }
        html.cr-dark #queue #queue-f .x-chip { background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .14) !important; color: rgba(255, 255, 255, .7) !important; }
        html.cr-dark #queue #queue-f .x-chip small { color: #FFF; }
        html.cr-dark #queue #queue-f .x-chip.x-on { background: #FFF !important; color: #3A3A3C !important; }
        html.cr-dark #queue #queue-f .x-chip.x-on small { color: #111; }
        html.cr-dark #queue .x-ql li[data-id] { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .10) !important; }
        html.cr-dark #queue .x-ql li[data-id]:hover { background: rgba(255, 255, 255, .11); }
        html.cr-dark #queue .x-ql li.x-cur { background: rgba(255, 255, 255, .16) !important; border-color: rgba(255, 255, 255, .24) !important; }
      }

      /* Phones and tablets */
      @media screen and (max-width: 1023.98px) {
        body header.x-brandbar:not(#cr-a) { position: relative !important; width: 100% !important; max-width: none !important; justify-content: center !important; box-sizing: border-box; }
        .x-brandbar .x-hr8 { display: flex !important; position: absolute !important; right: max(14px, var(--gutter, 16px)); top: 50%; transform: translateY(-50%); margin: 0 !important; }
        .x-brandbar .x-hr8 > :not(.x-apbtn) { display: none !important; }
        body .x-brandbar .x-hr8 > .x-apbtn.x-apbtn { display: inline-grid !important; }

        /* Settings: a list of sections; tap one to open it on its own page */
        /* Every screen uses the phone's full width (it was a narrow centred column) */
        .page { grid-template-columns: minmax(0, 1fr) !important; }
        .page > .x-app { width: 100% !important; max-width: 760px !important; justify-self: center !important; box-sizing: border-box; }
        .x-set.x-set--m { width: 100% !important; align-self: stretch !important; display: block !important; height: auto !important; max-height: none !important; overflow: visible !important; margin: 0 !important; }
        .x-set--m .x-smenu { display: flex !important; flex-direction: column; gap: 0 !important; height: auto !important; max-height: none !important; overflow: visible !important; padding: 6px !important; border: 1px solid rgba(0, 0, 0, .08) !important; border-radius: 18px !important; background: rgba(255, 255, 255, .92) !important; position: static !important; }
        .x-set--m .x-smq { padding-bottom: 6px; margin-bottom: 6px; }
        .x-set--m .x-smenu, .x-set--m .x-smenu button { width: 100% !important; box-sizing: border-box; }
        .x-set--m .x-smenu button { border: 0 !important; outline-offset: -2px; position: relative; display: flex !important; align-items: center; gap: 12px; width: 100%; min-height: 50px !important; padding: 0 34px 0 12px !important; border-radius: 12px !important; background: none !important; box-shadow: none !important; color: #1D1D1F !important; font: 500 16px/1.3 var(--sans) !important; text-align: left; }
        .x-set--m .x-smenu button::after { content: "›"; position: absolute; right: 14px; top: 50%; transform: translateY(-52%); color: #AEAEB2; font: 400 24px/1 var(--sans); }
        .x-set--m .x-smenu button[data-ssec] + button[data-ssec]::before { content: ""; position: absolute; left: 12px; right: 0; top: 0; height: 1px; background: rgba(0, 0, 0, .07); }
        .x-set--m .x-smenu button:active { background: rgba(0, 0, 0, .05) !important; }
        .x-set--m .x-smgo i { width: 30px; height: 30px; border-radius: 9px; font-size: 15px; }
        .x-set--m .x-spanel { display: none !important; }
        .x-set--m.is-open .x-smenu { display: none !important; }
        .x-set--m.is-open .x-spanel { display: block !important; height: auto !important; max-height: none !important; overflow: visible !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
        .x-app.x-set-open > .x-h1, .x-app.x-set-open > .x-sub { display: none !important; }
        .x-sback { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: 0 0 6px -6px; padding: 0 10px 0 4px; border: 0; border-radius: 12px; background: none; color: #007AFF; font: 500 16px/1 var(--sans); cursor: pointer; }
        .x-sback::before { content: "‹"; font: 400 28px/1 var(--sans); margin-top: -3px; }
        html.cr-dark .x-sback { color: #64B5FF; }
        .x-set--m .x-spane > .x-h3:first-of-type, .x-set--m .x-spane > h2:first-of-type { margin-top: 2px; font: 700 26px/1.2 var(--sans) !important; letter-spacing: -0.02em; text-transform: none !important; }

        /* Appearance window on phones: full width under the header */
        .x-ap { width: auto; left: 12px; right: 12px !important; max-width: none; max-height: calc(100dvh - var(--ap-top, 64px) - 92px); border-radius: 24px; }
      }
      @media (prefers-reduced-motion: reduce) { .x-apbtn__i { transition: none; } }
      @media print { .x-ap, .x-apbtn { display: none !important; } }

@media screen and (min-width: 1024px) { .x-bback { display: none !important; } } @media screen and (max-width: 1023.98px) { .x-app:has(> .x-bback) > .x-h1 { margin-top: 0; } }