:root {
    /* Agilent brand palette (light theme — default) */
    --agilent-blue: #0072CE;
    --agilent-blue-dark: #005A9E;
    --agilent-blue-darker: #003F70;
    --agilent-blue-soft: #E6F2FB;

    --bg: #f5f7fa;
    --surface: #ffffff;
    --surface-2: #f9fafb;
    --line: #e4e8ee;
    --line-strong: #c8d0da;
    --ink: #1a2233;
    --ink-2: #4a5468;
    --muted: #7b8595;
    --primary: var(--agilent-blue);
    --primary-dark: var(--agilent-blue-dark);
    --primary-soft: var(--agilent-blue-soft);
    --accent: #ea580c;
    --success: #15803d;
    --success-soft: #dcfce7;
    --warn: #b45309;
    --warn-soft: #fef3c7;
    --danger: #b91c1c;
    --danger-soft: #fee2e2;
    --info: var(--agilent-blue-dark);
    --info-soft: var(--agilent-blue-soft);
    --purple: #6d28d9;
    --purple-soft: #ede9fe;
    --shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.04);
    --shadow-lg: 0 8px 28px rgba(15,23,42,.12);
    --radius: 8px;
    --radius-sm: 6px;
    /* Metadata and status labels are compact tags, not capsules. Reserve
       fully round geometry for counters, avatars, and progress indicators. */
    --chip-radius: 5px;

    /* ===== Emulated "glass" via color contrast =====
       Rather than literal blur/translucency (which looks hazy on dense data
       UIs), each theme emulates tinted/frosted glass through deliberate color
       layering: a distinct header bar (--surface-top), slightly deeper frames
       (--frame), and accent-tinted panel borders (--line-strong). Themes
       override these to control how "tinted" vs "frosted" they feel. */
    --surface-top: var(--surface);     /* sticky header tint */
    --tab-surface: var(--surface-top); /* navigation matches the top banner */
    --workspace-header: var(--tab-surface); /* in-page workspace identity */
    --frame: var(--surface-2);         /* pills, popover fills */
    --frame-border: var(--line-strong);/* pill / popover edges */
  }

  /* ===== THEME VARIANTS ===== */
  /* Each overrides the CSS variables from :root. The body[data-theme]
     attribute is set by the client based on the user's preference. */

  /* Agilent Web — a deliberately utilitarian blue system inspired by the
     company site: bright navigation, crisp white work surfaces, and one
     deep blue used for hierarchy rather than decorative colour. */
  [data-theme="agilent-web-light"] {
    --bg:#edf3f6; --surface:#ffffff; --surface-top:#0085d5; --tab-surface:#0085d5; --workspace-header:#0085d5; --surface-2:#f2f6f8; --line:#cbd9e0; --line-strong:#aabfc9;
    --ink:#17232b; --ink-2:#50646f; --muted:#71838d; --primary:#008fd3; --primary-dark:#006f9f; --primary-soft:#dff3fc;
    --accent:#f4b000; --success:#187b4d; --success-soft:#def4e8; --warn:#a85f00; --warn-soft:#fff0d3; --danger:#b42318; --danger-soft:#fde8e6;
    --info:#006f9f; --info-soft:#dff3fc; --purple:#5e4db2; --purple-soft:#ebe9fa; --frame:#eef6fa; --frame-border:#b9d7e6;
    --shadow:0 1px 2px rgba(11,57,78,.08),0 4px 12px rgba(11,57,78,.08); --shadow-lg:0 10px 28px rgba(11,57,78,.17);
  }
  [data-theme="agilent-web-dark"] {
    --bg:#071d2a; --surface:#102f3f; --surface-top:#006c9f; --tab-surface:#006c9f; --workspace-header:#006c9f; --surface-2:#173c4e; --line:#28566b; --line-strong:#3d7289;
    --ink:#edf8fc; --ink-2:#b8d1dc; --muted:#83a7b7; --primary:#21b7ed; --primary-dark:#0085bd; --primary-soft:#15465a;
    --accent:#ffc34d; --success:#51d28d; --success-soft:#163f31; --warn:#ffd169; --warn-soft:#4b3917; --danger:#ff7f76; --danger-soft:#4b292b;
    --info:#21b7ed; --info-soft:#15465a; --purple:#b5a8ff; --purple-soft:#352d68; --frame:#12384a; --frame-border:#397087;
    --shadow:0 2px 4px rgba(0,0,0,.42),0 8px 22px rgba(0,0,0,.32); --shadow-lg:0 14px 34px rgba(0,0,0,.55);
  }

  /* The official internal palette is intentionally limited to Agilent Light and Agilent Dark. */
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  .control-w-240 { max-width:240px; }
  .field-w-420 { max-width:420px; }
  .modal-w-380 { max-width:380px; }
  .modal-w-440 { max-width:440px; }
  .modal-w-460 { max-width:460px; }
  .modal-w-480 { max-width:480px; }
  .modal-w-500 { max-width:500px; }
  .modal-w-520 { max-width:520px; }
  .modal-w-560 { max-width:560px; }
  .modal-w-580 { max-width:580px; }
  .modal-w-600 { max-width:600px; }
  .modal-w-620 { max-width:620px; }
  .modal-w-650 { max-width:650px; }
  .modal-w-680 { max-width:680px; }
  .modal-w-780 { max-width:780px; }
  .modal-w-850 { max-width:850px; }
  .modal-w-900 { max-width:900px; }
  .m-0 { margin:0; }
  .mt-2 { margin-top:8px; }
  .mt-3 { margin-top:12px; }
  .mt-3-5 { margin-top:14px; }
  .mb-4 { margin-bottom:16px; }
  .p-0, .modal-body.p-0 { padding:0; }
  .p-3, .modal-body.p-3 { padding:12px; }
  .cursor-pointer { cursor:pointer; }
  .flex-1 { flex:1; }
  .row-wrap { gap:8px; flex-wrap:wrap; }
  .stack-14 { display:grid; gap:14px; }
  .justify-end { display:flex; justify-content:flex-end; }
  .row-start-6 { display:flex; gap:6px; align-items:flex-start; }
  .row-center-8 { display:flex; gap:8px; align-items:center; }
  .row-center-wrap { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .row-center-10 { display:flex; gap:10px; }
  .playbook-heading { margin:0 0 12px; }
  .playbook-steps { margin:0; padding-left:20px; line-height:1.7; }
  .playbook-section { margin:12px 0; }
  .playbook-last { margin:12px 0 0; }
  .table-scroll-70vh { max-height:70vh; overflow-y:auto; }
  .scroll-40vh { max-height:40vh; overflow-y:auto; }
  .scroll-50vh { max-height:50vh; overflow-y:auto; }
  .scroll-200 { max-height:200px; overflow-y:auto; }
  .scroll-300 { max-height:300px; overflow-y:auto; }
  .vertical-space-14 { margin:14px 0; }
  .top-copy { margin:12px 0 0; }
  .pickup-photo { display:block; max-width:100%; max-height:68vh; margin:auto; border-radius:var(--radius); }
  .top-10 { margin-top:10px; }
  .small-top-copy { margin:4px 0 0; }
  .declaration-checkbox[type="checkbox"] { width:auto; margin-right:7px; }
  .full-control { width:100%; padding:8px; }
  .space-preview-manager { margin:0; min-height:30px; }
  /* Runtime-rendered markup uses named classes so fixed presentation does not
     depend on CSP-permitted style attributes. */
  .runtime-list-message { padding:8px; }
  .undo-option { text-align:left; flex-direction:column; align-items:flex-start; gap:2px; }
  .undo-option-title { font-weight:600; }
  .activity-restored { opacity:.5; }
  .text-italic { font-style:italic; }
  .ready-request-parts, .stock-request-source-summary { margin-top:6px; }
  .stock-request-source-meta { margin-top:10px; }
  .request-photo-action { margin-top:8px; }
  .replenishment-summary { margin-top:5px; }
  .request-queue-entry { padding:12px 0; border-bottom:1px solid var(--line); }
  .request-queue-head { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .request-queue-items { margin:8px 0 0 18px; }
  .kiosk-request-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
  .kiosk-pin-note { margin:-8px 0 16px; }
  .kiosk-ready-note { margin:0 0 14px; }
  .kiosk-request-action { width:100%; min-height:52px; font-size:17px; }
  .kiosk-request-card { padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-2); box-shadow:var(--shadow); }
  .kiosk-request-title { font-size:24px; margin:4px 0 14px; }
  .kiosk-request-items { margin:0 0 20px; padding-left:20px; line-height:1.6; }
  .quick-choice-disposition { margin-left:6px; }
  .kiosk-lock-note { text-align:center; margin:0; }
  .kiosk-condition-copy { margin:5px 0 10px; }
  .inventory-board-copy { margin:4px 0 0; }
  .home-actions-panel { padding:14px; max-width:none; }
  .kiosk-home-open { padding:16px; }
  .kiosk-home-open button { width:100%; min-height:72px; font-size:18px; }
  .impact-donut-number { fill:var(--ink); font:800 30px system-ui,sans-serif; }
  .impact-exact-track.stacked { display:block; width:100%; }
  .impact-exact-track.stacked .track-bg { fill:var(--surface-2); }
  .impact-exact-track.stacked .same-day { fill:var(--success); }
  .impact-exact-track.stacked .later-day { fill:var(--accent); }
  .ai-source-sap { color:#0072CE; }
  .ai-source-uncertain { color:#c80; }
  .ai-source-confident { color:#2e7d32; }
  .ai-source-none { color:#999; }
  .gemini-spin { display:inline-block; animation:gem-spin 1s linear infinite; }
  .review-choice { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--line); cursor:pointer; font-size:13px; }
  .editable-control { cursor:pointer; }
  .sap-source-tag { color:#0072CE; }
  .sb-tracking-row { display:flex; align-items:center; gap:6px; flex:0 1 auto; }
  .history-event-label { font-weight:600; }
  .history-event-control { min-height:30px; max-width:280px; }
  .travel-history.travel-history-detail { margin-top:8px; border-top:1px solid var(--line); padding-top:8px; }
  .travel-history-title { font-weight:600; margin-bottom:4px; }
  .space-delete-summary { margin-top:4px; }
  .space-delete-destination { margin-top:9px; width:100%; }
  .move-qty-label { display:flex; align-items:center; gap:4px; white-space:nowrap; }
  .move-qty-input { width:60px; text-align:right; padding:3px 6px; }
  .read-only-text-cursor { cursor:text; }
  #colMapPreviewHead th.selected-column { background:var(--primary-soft); }
  .notification-menu.runtime-positioned { position:fixed; }
  .ehs-signature-preview { justify-content:flex-start; }
  #confirmModal .modal-foot.undo-finalize-choice #confirmOk { order:1; }
  #confirmModal .modal-foot.undo-finalize-choice #undoFinalizeBtn { order:2; }
  #confirmModal .modal-foot.undo-finalize-choice #confirmCancel { order:3; }
  .theme-swatch-segment-agilent-web-light-0 { background:#fff; }
  .theme-swatch-segment-agilent-web-light-1 { background:#008fd3; }
  .theme-swatch-segment-agilent-web-light-2 { background:#f4b000; }
  .theme-swatch-segment-agilent-web-light-3 { background:#006f9f; }
  .theme-swatch-segment-agilent-web-dark-0 { background:#102f3f; }
  .theme-swatch-segment-agilent-web-dark-1 { background:#21b7ed; }
  .theme-swatch-segment-agilent-web-dark-2 { background:#ffc34d; }
  .theme-swatch-segment-agilent-web-dark-3 { background:#0085bd; }
  .space-preview-copy { margin:0 2px; }
  .checkbox-field { display:flex; flex-direction:row; align-items:flex-start; gap:8px; }
  .checkbox-control[type="checkbox"] { width:auto; margin-top:2px; }
  .description-editor { flex:1; resize:vertical; }
  .nowrap-auto { white-space:nowrap; min-width:auto; }
  .catalog-toolbar { display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; align-items:center; }
  .catalog-search { flex:1; min-width:200px; }
  .min-w-160 { min-width:160px; }
  .catalog-actions { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); display:flex; gap:8px; align-items:center; }
  .import-actions { margin-top:12px; display:flex; gap:10px; }
  .two-column-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .section-divider { margin-top:16px; border-top:1px solid var(--line); padding-top:12px; }
  .text-11 { font-size:11px; }
  .invite-copy { margin:0 0 14px; }
  .activity-action-filter { min-width:160px; max-height:32px; }
  .activity-account-filter { min-width:140px; max-height:32px; }
  .profile-help { margin:5px 0 10px; line-height:1.4; }
  .profile-help-tight { margin:5px 0 0; line-height:1.4; }
  .profile-action-row { gap:8px; flex-wrap:wrap; margin-top:9px; }
  .profile-placement-help { margin:4px 0 0; line-height:1.4; }
  .profile-placement-note { margin:8px 0 0; }
  .profile-account-note { margin:10px 0 0; line-height:1.45; }
  .profile-crop-help { margin-top:0; line-height:1.45; }
  .inline-danger { color:var(--danger); font-size:12px; margin-top:8px; }
  .sap-badge { color:#0072CE; font-weight:700; }
  /* iOS reveals and samples the root/body canvas around its standalone
     scroll edge. Keep that substrate on the same blue as the app header;
     the separate workspace canvas owns the ordinary page background. */
  /* `overflow-x:hidden` creates a scrolling ancestor in WebKit/Chromium and
     silently defeats position:sticky. `clip` prevents horizontal paint spill
     without taking ownership of vertical scrolling, so the blue shell can
     remain genuinely anchored. */
  html { margin:0; padding:0; background:#0085d5; width:100%; min-height:100%; overflow-x:clip; touch-action:manipulation; }
  html[data-theme="agilent-web-light"] { background:#0085d5; }
  html[data-theme="agilent-web-dark"] { background:#006c9f; }
  body { margin: 0; padding: 0; width:100%; min-height:100dvh; overflow-x:clip; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: var(--ink);
    background: var(--surface-top);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
  }
  .app-shell { min-height:100dvh; display:flex; flex-direction:column; }
  .workspace-canvas { flex:1 0 auto; background:var(--bg); }
  button, input, select, textarea { font: inherit; color: inherit; }
  button {
    cursor: pointer;
    border: 1px solid var(--primary);
    background: var(--primary);
    color: white;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: background .12s, border-color .12s, transform .05s;
    min-height: 34px;
    white-space: nowrap;
  }
  button:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
  button:active { transform: translateY(1px); }
  button.secondary {
    background: var(--surface);
    color: var(--primary-dark);
    border-color: var(--line-strong);
  }
  button.secondary:hover { background: var(--surface-2); border-color: var(--primary); color: var(--primary); }
  button.ghost {
    background: transparent;
    color: var(--ink-2);
    border-color: transparent;
  }
  button.ghost:hover { background: var(--surface-2); color: var(--ink); }
  /* This is a primary navigation affordance, not a subtle toolbar action.
     Ink/surface pairing keeps it legible even in highly saturated themes. */
  button.back-to-inventory-spaces {
    min-height: 38px;
    padding: 7px 13px;
    background: var(--ink);
    color: var(--surface);
    border-color: var(--ink);
    box-shadow: var(--shadow);
    font-weight: 750;
  }
  button.back-to-inventory-spaces:hover {
    background: var(--primary-dark);
    color: white;
    border-color: var(--primary-dark);
    box-shadow: var(--shadow-lg);
  }
  button.back-to-inventory-spaces:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
  }
  button.danger {
    background: var(--danger);
    border-color: var(--danger);
    color: white;
  }
  button.danger:hover { background: #991b1b; }
  button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
  button.tiny { min-height: 26px; padding: 3px 8px; font-size: 12px; }
  input[type="text"], input[type="number"], input[type="search"], input[type="tel"], input[type="date"], select, textarea {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    min-height: 34px;
    color: var(--ink);
    width: 100%;
  }
  input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
    border-color: var(--primary);
  }
  input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
  label.field {
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
  }

  /* ===== Header ===== */
  header.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--surface-top);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .topbar-row {
    display: flex;
    position: relative;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    flex-wrap: wrap;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
  }
  /* Approved Agilent source artwork, locally served so it is exact, fast, and
     does not depend on a third-party request. The crop retains only the
     corporate starburst and wordmark; the app owns its own title/tagline. */
  .agilent-corporate-mark {
    display: block;
    width: 137px;
    height: 53px;
    flex: none;
    overflow: hidden;
  }
  .agilent-corporate-mark img {
    display: block;
    width: 248px;
    max-width: none;
    height: 53px;
  }
  .brand-divider {
    width: 1px;
    height: 28px;
    background: var(--line-strong);
  }
  /* Account-scoped authority indicator. This keeps the workspace header clean
     while making the current operating role obvious beside the signed-in user. */
  .admin-mode-badge {
    position:static; z-index:2; display:inline-flex; align-items:center; gap:5px;
    margin:0; padding:2px 7px 2px 6px; transform:none; border-radius:3px;
    background:#fff; color:#075f91; font-size:10px; font-weight:850; letter-spacing:.08em; text-transform:uppercase;
    border-left:3px solid #f4b000; box-shadow:0 1px 4px rgba(0,37,55,.16); white-space:nowrap;
  }
  .admin-mode-badge.management-mode { border-left-color:#73e2ff; color:#075f91; }
  .admin-mode-badge-dot { width:7px; height:7px; flex:none; border-radius:1px; background:#f4b000; }
  .management-mode .admin-mode-badge-dot { background:#008fd3; }
  .brand h1 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
  }
  .brand .tagline {
    font-size: 11px;
    color: var(--muted);
    margin-top: 1px;
  }
  /* The internal tool uses the same clear blue, two-tier visual language as
     Agilent's public web header, with an intentionally compact app identity. */
  header.topbar { position:sticky; top:0; z-index:100; background: var(--surface-top); border-bottom-color: rgba(255,255,255,.28); box-shadow:none; }
  .topbar-row { background: var(--surface-top); padding-top: 8px; padding-bottom: 6px; }
  .brand h1 { color: #fff; }
  .brand-divider { background: rgba(255,255,255,.55); }
  .brand .tagline { color: rgba(255,255,255,.82); }
  nav.tabs { background: var(--tab-surface); border-bottom-color: rgba(255,255,255,.2); }
  .tab-btn { color: rgba(255,255,255,.88); }
  .tab-btn:hover { background: rgba(0,0,0,.12); color: #fff; }
  .tab-btn.active { color: #fff; border-bottom-color: var(--accent); background: rgba(0,0,0,.08); }
  .tab-btn .count { background: rgba(255,255,255,.18); color: #fff; }
  .tab-btn.active .count { background: var(--accent); color: #17313f; }
  header.topbar .ghost { color: #fff; }
  header.topbar .ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
  /* Page-level Back belongs to the application shell. It hangs from the
     persistent blue header, so it remains reachable while the workspace
     beneath it scrolls. Task dialogs retain their own Back/Cancel semantics
     and therefore cannot accidentally discard an in-progress form. */
  .universal-back-tab {
    position:absolute;
    left:18px;
    bottom:-36px;
    z-index:4;
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:36px;
    padding:7px 14px 8px;
    border:1px solid rgba(255,255,255,.38);
    border-top:0;
    border-radius:0 0 7px 7px;
    /* Continue the anchored header's blue into the hanging Back tab. */
    background:var(--tab-surface);
    color:#fff;
    box-shadow:none;
    font-size:13px;
    font-weight:800;
    letter-spacing:.01em;
  }
  .universal-back-tab:hover,
  .universal-back-tab:focus-visible { background:color-mix(in srgb, var(--tab-surface) 84%, #fff); color:#fff; border-color:rgba(255,255,255,.65); }
  .universal-back-tab[hidden] { display:none !important; }
  body.has-universal-back main { padding-top:54px; }
  /* In landscape there is room to separate Back from the tab selection
     notch. That preserves the official-site cutout illusion rather than
     making two header affordances compete for the same edge. */
  @media (min-width:700px), (orientation:landscape) and (min-width:480px) {
    .universal-back-tab {
      bottom:-58px;
      border:1px solid var(--line-strong);
      border-radius:var(--radius-sm);
      background:var(--surface);
      color:var(--primary-dark);
      box-shadow:var(--shadow);
    }
    .universal-back-tab:hover,
    .universal-back-tab:focus-visible { background:var(--primary-soft); color:var(--primary-dark); border-color:var(--primary); }
    body.has-universal-back main { padding-top:78px; }
  }
  .topbar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
  }
  .engineer-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 10px;
    background: rgba(0,48,73,.2);
    box-shadow: inset 0 1px rgba(255,255,255,.08), 0 1px 3px rgba(0,48,73,.16);
  }
  .engineer-pill-label {
    padding-left: 7px;
    color: rgba(255,255,255,.8);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .engineer-select-wrap { position:relative; display:flex; align-items:center; }
  .engineer-select-wrap::after {
    content:"";
    position:absolute;
    right:10px;
    width:6px;
    height:6px;
    border-right:1.5px solid rgba(255,255,255,.9);
    border-bottom:1.5px solid rgba(255,255,255,.9);
    transform:rotate(45deg) translateY(-2px);
    pointer-events:none;
  }
  .engineer-pill select {
    min-height: 32px;
    padding: 3px 29px 3px 10px;
    border: 1px solid rgba(255,255,255,.27);
    border-radius: 7px;
    background: rgba(255,255,255,.14);
    color: #fff;
    font-size: 13px;
    font-weight: 750;
    width: auto;
    min-width: 158px;
    max-width: min(230px, 30vw);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
  }
  /* Style the select option dropdown to match theme */
  .engineer-pill select option {
    background: var(--surface);
    color: var(--ink);
  }
  .engineer-pill select:hover { background: rgba(255,255,255,.21); }
  .engineer-pill select:focus { outline: 2px solid rgba(255,255,255,.72); outline-offset:1px; }
  body[data-theme="agilent-web-dark"] .engineer-pill { background: rgba(0,20,32,.3); border-color: rgba(184,230,246,.28); }
  body[data-theme="agilent-web-dark"] .engineer-pill select { background: rgba(255,255,255,.11); }

  /* The two supported palettes need one direct light/dark control, not a
     selector. */
  .theme-picker { position:relative; display:inline-flex; }
  .theme-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 90;
    min-width: 208px;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--frame-border);
    background: var(--surface-top);
    box-shadow: var(--shadow-lg);
    animation: themeMenuIn .12s ease-out;
  }
  @keyframes themeMenuIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .theme-menu .menu-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted); padding: 4px 8px 6px;
  }
  .modal.accounts-modal { width:min(1080px, calc(100vw - 28px)); max-width:1080px; }
  .modal.integrations-workspace-modal { width:min(1060px, calc(100vw - 28px)); max-width:1060px; }
  .modal.create-account-modal { width:min(620px, calc(100vw - 28px)); max-width:620px; }
  .accounts-modal .modal-head h2, .integrations-workspace-modal .modal-head h2 { margin:0; }
  .accounts-modal .modal-head p, .integrations-workspace-modal .modal-head p { margin:3px 0 0; }
  .accounts-modal-body { padding-bottom:22px; }
  .accounts-workspace-tabs { display:flex; align-items:center; gap:4px; margin:0 0 14px; padding:4px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); }
  .accounts-workspace-tabs button { min-height:34px; padding:6px 12px; border:0; border-radius:6px; background:transparent; color:var(--ink-2); font-size:12px; font-weight:780; }
  .accounts-workspace-tabs button:hover { background:var(--surface); color:var(--ink); }
  .accounts-workspace-tabs button.active { background:var(--surface); color:var(--primary-dark); box-shadow:0 1px 4px color-mix(in srgb, var(--ink) 12%, transparent); }
  .accounts-workspace-tabs .spacer { flex:1; }
  .accounts-workspace-tabs .badge { margin-right:4px; }
  .accounts-advanced { margin-top:14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); }
  .accounts-advanced > summary { padding:12px 14px; color:var(--ink-2); font-size:12px; font-weight:780; cursor:pointer; list-style:none; }
  .accounts-advanced > summary::-webkit-details-marker { display:none; }
  .accounts-advanced > summary::after { content:'+'; float:right; color:var(--primary-dark); font-size:16px; line-height:1; }
  .accounts-advanced[open] > summary { border-bottom:1px solid var(--line); color:var(--ink); }
  .accounts-advanced[open] > summary::after { content:'−'; }
  .accounts-advanced-body { display:grid; gap:12px; padding:14px; }
  .accounts-advanced-copy { margin:0; color:var(--muted); font-size:12px; line-height:1.45; }
  .custom-role-directory { display:grid; gap:7px; }
  .custom-role-directory:empty { display:none; }
  .custom-role-row { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); }
  .custom-role-row strong { display:block; color:var(--ink); font-size:13px; }
  .custom-role-row small { display:block; margin-top:3px; color:var(--muted); font-size:11px; }
  .custom-role-row-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
  .accounts-roles-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; }
  .access-role-card { display:grid; gap:10px; min-width:0; padding:13px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); text-align:left; color:var(--ink); box-shadow:0 1px 0 color-mix(in srgb, var(--ink) 5%, transparent); }
  .access-role-card:hover, .access-role-card.active { border-color:var(--primary); background:var(--primary-soft); box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 14%, transparent); }
  .access-role-card .role-card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
  .access-role-card strong { font-size:13px; }
  .access-role-card small { color:var(--muted); font-size:11px; line-height:1.35; }
  .access-role-card .role-count { display:inline-grid; min-width:24px; height:24px; place-items:center; border-radius:999px; background:var(--surface-2); color:var(--primary-dark); font-size:12px; font-weight:800; }
  .accounts-role-detail { margin-top:10px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); }
  .accounts-role-detail strong { font-size:13px; }
  .accounts-role-detail p { margin:4px 0 9px; color:var(--muted); font-size:12px; }
  .role-capability-list { display:flex; flex-wrap:wrap; gap:6px; }
  .role-capability-list span { padding:4px 7px; border:1px solid var(--line); border-radius:var(--chip-radius); background:var(--surface); color:var(--ink-2); font-size:11px; font-weight:700; }
  .accounts-people-section[hidden], .accounts-roles-section[hidden] { display:none; }
  .accounts-directory-toolbar { display:flex; align-items:end; gap:10px; flex-wrap:wrap; padding:14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); }
  .accounts-directory-toolbar .field { flex:1 1 260px; max-width:430px; }
  .accounts-directory-toolbar .field.account-role-filter { flex:0 0 170px; }
  .district-create-form { display:grid; grid-template-columns:minmax(180px,.8fr) minmax(220px,1fr) auto; gap:10px; align-items:end; margin:14px 0 8px; }
  .district-create-form .field { max-width:none; }
  .district-registry-list { display:grid; gap:9px; margin-top:14px; }
  .district-registry-row { display:flex; gap:12px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); }
  .district-registry-row > div:first-child { min-width:0; flex:1; display:grid; gap:3px; }
  .district-registry-row small { color:var(--muted); }
  .accounts-directory-toolbar .badge { margin:0 2px 7px auto; }
  .accounts-directory-toolbar button { margin-bottom:1px; }
  .accounts-directory-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:16px 0 9px; }
  .accounts-directory-meta h3 { margin:0; font-size:16px; }
  .accounts-directory-meta p { margin:3px 0 0; }
  .accounts-reset-queue { margin:0 0 18px; border:1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); border-left:4px solid var(--warn); border-radius:var(--radius-sm); background:color-mix(in srgb, var(--warn-soft) 40%, var(--surface)); overflow:hidden; }
  .accounts-reset-queue-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:14px 16px 11px; border-bottom:1px solid color-mix(in srgb, var(--warn) 25%, var(--line)); }
  .accounts-reset-queue-head h3 { margin:0; color:var(--ink); font-size:15px; }
  .accounts-reset-queue-head p { margin:4px 0 0; color:var(--ink-2); font-size:12px; line-height:1.35; }
  .accounts-reset-queue-head .badge { margin-top:1px; }
  .accounts-reset-content { padding:10px; }
  .reset-request-list { display:grid; gap:8px; }
  .reset-request-row { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:12px; padding:11px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); }
  .reset-request-name { color:var(--ink); font-size:13px; font-weight:780; }
  .reset-request-email, .reset-request-time { margin-top:3px; color:var(--muted); font-size:12px; }
  .reset-request-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
  @media (max-width:620px) { .accounts-reset-queue-head, .reset-request-row { display:block; } .accounts-reset-queue-head .badge { display:inline-flex; margin-top:9px; } .reset-request-actions { justify-content:flex-start; margin-top:10px; } }
  .accounts-directory-wrap { width:100%; }
  .accounts-directory-list { display:grid; gap:8px; }
  .accounts-directory-section { display:grid; gap:9px; }
  .accounts-directory-section + .accounts-directory-section { margin-top:18px; padding-top:17px; border-top:1px solid var(--line); }
  .accounts-directory-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
  .accounts-directory-section-head h4 { margin:0; color:var(--ink); font-size:14px; }
  .accounts-directory-section-head p { margin:3px 0 0; color:var(--muted); font-size:12px; line-height:1.4; }
  .account-invite-row { grid-template-columns:minmax(0,1fr) minmax(190px,.7fr) minmax(220px,.72fr); border-left:4px solid var(--warn); background:color-mix(in srgb, var(--warn-soft) 24%, var(--surface)); }
  .account-invite-row > * { min-width:0; }
  .account-invite-status { display:grid; justify-items:start; gap:3px; min-width:150px; }
  .account-invite-status small { color:var(--muted); font-size:11px; line-height:1.3; white-space:normal; overflow-wrap:anywhere; }
  .account-directory-row { display:grid; grid-template-columns:minmax(220px, 1fr) auto auto; gap:12px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); box-shadow:0 1px 0 rgba(0,0,0,.02); }
  .account-directory-row.has-kiosk-location { grid-template-columns:minmax(220px, 1.22fr) minmax(150px, .54fr) minmax(190px, .82fr) minmax(210px, .86fr); }
  .account-directory-row:hover { border-color:color-mix(in srgb, var(--primary) 32%, var(--line)); background:color-mix(in srgb, var(--primary-soft) 30%, var(--surface)); }
  .account-directory-row .account-identity { display:flex; align-items:center; gap:11px; min-width:0; overflow:visible; color:var(--ink); font-size:inherit; font-weight:inherit; white-space:normal; }
  .account-identity-copy { min-width:0; }
  .directory-avatar { width:38px; height:38px; display:grid; place-items:center; flex:none; overflow:hidden; border-radius:50%; background:var(--primary); color:#fff; box-shadow:0 2px 5px color-mix(in srgb, var(--primary) 28%, transparent); font-size:12px; font-weight:800; letter-spacing:.03em; }
  .directory-avatar img { width:100%; height:100%; display:block; object-fit:cover; }
  .account-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:780; color:var(--ink); }
  .account-email { margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2); font-size:12px; }
  .account-directory-field { display:grid; gap:4px; min-width:0; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
  .account-directory-field select { min-width:0; min-height:34px; color:var(--ink); font-size:12px; font-weight:500; letter-spacing:normal; text-transform:none; }
  .account-role-static { align-self:start; }
  .account-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
  .account-invite-row .account-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; }
  .account-invite-row .account-actions button { min-width:0; white-space:nowrap; }
  .account-actions .tiny { min-height:30px; }
  .account-role-chip { display:inline-flex; align-items:center; min-height:27px; padding:3px 8px; border:1px solid var(--line); border-radius:var(--chip-radius); color:var(--ink-2); background:var(--surface-2); font-size:11px; font-weight:780; white-space:nowrap; }
  .account-open-btn { min-height:30px; padding:5px 10px; }
  .account-detail-drawer { position:fixed; inset:0; z-index:120; display:flex; justify-content:flex-end; background:color-mix(in srgb, var(--ink) 32%, transparent); cursor:pointer; }
  .account-detail-drawer[hidden] { display:none; }
  .account-detail-panel { width:min(480px, 100vw); height:100%; overflow:auto; border-left:1px solid var(--line); background:var(--surface); box-shadow:-12px 0 30px color-mix(in srgb, var(--ink) 20%, transparent); cursor:default; overscroll-behavior:contain; }
  .account-detail-head { display:flex; align-items:flex-start; gap:12px; padding:18px; border-bottom:1px solid var(--line); }
  .account-detail-head .directory-avatar { width:44px; height:44px; font-size:13px; }
  .account-detail-head h3 { margin:1px 0 0; font-size:17px; }
  .account-detail-head p { margin:3px 0 0; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
  .account-detail-body { display:grid; gap:16px; padding:18px; }
  .account-detail-section { padding:14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); }
  .account-detail-section h4 { margin:0 0 5px; font-size:13px; }
  .account-detail-section p { margin:0 0 11px; color:var(--muted); font-size:12px; line-height:1.4; }
  .account-detail-section .field { max-width:none; }
  .account-detail-actions { display:flex; gap:8px; flex-wrap:wrap; }
  .access-override-grid { display:grid; grid-template-columns:minmax(0,1fr) 140px; gap:9px 12px; align-items:center; }
  .access-override-grid label { color:var(--ink); font-size:12px; font-weight:700; }
  .access-override-grid label span { color:var(--muted); font-size:11px; font-weight:500; }
  .access-override-grid select { min-height:34px; }
  .accounts-empty { padding:30px 18px; text-align:center; color:var(--muted); }
  .accounts-pagination { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:10px; color:var(--muted); font-size:12px; }
  .create-account-intro { margin:0 0 16px; color:var(--muted); font-size:13px; line-height:1.45; }
  .create-account-result { margin-top:14px; padding:11px 12px; border:1px solid color-mix(in srgb, var(--success) 42%, var(--line)); border-radius:var(--radius-sm); background:color-mix(in srgb, var(--success) 8%, var(--surface)); color:var(--ink); }
  .create-account-invitation { margin-top:18px; padding:14px; border:1px solid var(--line); border-left:4px solid var(--primary); border-radius:var(--radius-sm); background:var(--surface-2); }
  .create-account-invitation-head { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
  .create-account-invitation h3 { margin:0; font-size:14px; }
  .create-account-invitation p { margin:4px 0 10px; color:var(--muted); font-size:12px; line-height:1.4; }
  .create-account-invitation textarea { width:100%; box-sizing:border-box; min-height:190px; margin:0; font-size:12px; line-height:1.4; resize:vertical; background:var(--surface); }
  .create-account-invitation-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:9px; }
  .integrations-workspace-body { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; padding:20px; }
  .integrations-overview { grid-column:1 / -1; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:14px 16px; border:1px solid var(--line); border-left:4px solid var(--primary); border-radius:var(--radius-sm); background:var(--surface-2); }
  .integrations-overview h3 { margin:0 0 4px; font-size:15px; }
  .integrations-overview p { margin:0; color:var(--muted); font-size:13px; line-height:1.45; }
  .integration-card { min-width:0; padding:18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
  .integration-card.integration-card-primary { grid-column:span 2; }
  .integration-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
  .integration-card-head .eyebrow { margin-bottom:4px; }
  .integration-card-head h3 { margin:0; font-size:17px; }
  .integration-card-head p { margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.4; }
  .integration-provider-links { display:flex; flex-wrap:wrap; gap:8px 12px; margin:9px 0 0; }
  .integration-provider-links a { color:var(--primary-dark); font-size:12px; font-weight:750; text-decoration:none; }
  .integration-provider-links a:hover { text-decoration:underline; }
  .integration-status { display:inline-flex; align-items:center; min-height:27px; padding:4px 9px; border:1px solid var(--line); border-radius:var(--chip-radius); color:var(--muted); background:var(--surface-2); font-size:11px; font-weight:700; white-space:nowrap; }
  .integration-status.ready { color:var(--success); border-color:color-mix(in srgb, var(--success) 38%, var(--line)); background:var(--success-soft); }
  .integration-status.incomplete { color:var(--warn); border-color:color-mix(in srgb, var(--warn) 38%, var(--line)); background:var(--warn-soft); }
  .integration-form-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
  .integration-form-grid .full { grid-column:1 / -1; }
  .integration-actions { display:flex; align-items:center; gap:8px; margin-top:14px; flex-wrap:wrap; }
  .integration-actions .spacer { flex:1; }
  .integration-key-field { display:flex; align-items:center; gap:6px; }
  .integration-key-field input { min-width:0; flex:1; }
  .integration-note { margin:14px 0 0; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.45; }
  .integration-environment { display:grid; gap:4px; color:var(--muted); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
  .integration-environment select { min-height:34px; text-transform:none; letter-spacing:normal; font-weight:400; }
  .integration-api-scopes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px; }
  .integration-api-scope { display:flex; align-items:center; gap:8px; min-height:42px; padding:8px 10px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); color:var(--ink); font-size:12px; font-weight:700; text-transform:none; letter-spacing:normal; }
  .integration-api-scope input { width:18px; height:18px; margin:0; }
  .integration-client-list { display:grid; gap:8px; margin-top:14px; }
  .integration-client-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:11px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); }
  .integration-client-row strong { display:block; font-size:13px; }
  .integration-client-row p { margin:3px 0 0; color:var(--muted); font-size:11px; line-height:1.4; overflow-wrap:anywhere; }
  .integration-client-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
  .integration-secret { margin-top:14px; padding:13px; border:2px solid color-mix(in srgb, var(--warn) 55%, var(--line)); border-radius:var(--radius-sm); background:var(--warn-soft); }
  .integration-secret strong { display:block; margin-bottom:4px; }
  .integration-secret textarea { width:100%; min-height:74px; margin:8px 0; box-sizing:border-box; resize:none; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:12px; overflow-wrap:anywhere; }
  .integration-secret-actions { display:flex; justify-content:flex-end; gap:8px; }
  @media (max-width:760px) { .integrations-workspace-body { grid-template-columns:1fr; padding:16px; } .integration-card.integration-card-primary, .integrations-overview { grid-column:auto; } .integration-form-grid { grid-template-columns:1fr; } .integration-form-grid .full { grid-column:auto; } .integrations-overview { display:block; } .integration-status { margin-top:10px; } .integration-api-scopes { grid-template-columns:1fr; } .integration-client-row { grid-template-columns:1fr; } .integration-client-actions { justify-content:flex-start; } }
  @media (max-width:850px) { .accounts-roles-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
  @media (min-width:761px) and (max-width:920px) {
    .account-invite-row { grid-template-columns:minmax(0,1fr) minmax(190px,auto); }
    .account-invite-status { grid-column:1; grid-row:2; }
    .account-invite-row .account-actions { grid-column:2; grid-row:1 / span 2; grid-template-columns:1fr; align-self:stretch; }
    .account-invite-row .account-actions button { width:100%; }
  }
  @media (max-width:760px) { .account-directory-row, .account-directory-row.has-kiosk-location { grid-template-columns:1fr auto; gap:10px; padding:12px; } .account-role-chip { grid-row:2; grid-column:1; width:max-content; } .account-actions { grid-column:2; grid-row:1 / span 2; justify-content:flex-end; } .access-override-grid { grid-template-columns:1fr; } .account-detail-panel { width:calc(100vw - 18px); height:100dvh; border-left:0; } .account-detail-head { position:sticky; top:0; z-index:2; padding:calc(12px + env(safe-area-inset-top, 0px)) 14px 12px; background:var(--surface); border-bottom:1px solid var(--line); } }
  @media (max-width:760px) { .account-invite-row { grid-template-columns:1fr; } .account-invite-status { grid-row:auto; grid-column:auto; min-width:0; } .account-invite-row .account-actions { grid-row:auto; grid-column:auto; grid-template-columns:minmax(0,1fr) auto; justify-content:flex-start; } .accounts-directory-section-head { display:block; } .accounts-directory-section-head .badge { margin-top:8px; } }
  @media (max-width:700px) {
    #accountsModal { padding:0; place-items:stretch; }
    #accountsModal .accounts-modal { width:100%; max-width:none; max-height:100dvh; height:100dvh; border:0; border-radius:0; }
    #accountsModal .modal-head { flex:none; padding:13px 15px; }
    #accountsModal .accounts-modal-body { min-height:0; padding:12px; }
    .accounts-workspace-tabs { position:sticky; top:-12px; z-index:3; flex-wrap:wrap; margin:0 0 12px; padding:5px; }
    .accounts-workspace-tabs .spacer { display:none; }
    .accounts-workspace-tabs .badge { margin-left:auto; }
    .accounts-workspace-tabs #openCreateAccountModal { flex:1 1 100%; }
    .accounts-directory-toolbar .field, .accounts-directory-toolbar .field.account-role-filter { flex:1 1 100%; max-width:none; }
    .district-create-form { grid-template-columns:1fr; }
    .accounts-directory-toolbar .badge { margin:0; }
    .accounts-directory-toolbar button { width:100%; }
    .accounts-roles-grid { grid-template-columns:1fr; }
    .custom-role-row { grid-template-columns:1fr; }
    .custom-role-row-actions { justify-content:flex-start; }
    .account-detail-panel { border-left:0; }
  }
  /* Work queue / notification center. This intentionally surfaces only
     actionable work, keeping the header calm while replacing scattered
     request, count, intake, and account-alert panels. */
  .notification-center { position: relative; display: inline-flex; }
  .notification-btn { position: relative; min-width: 36px; min-height: 34px; padding: 6px 8px; }
  .notification-btn svg { display: block; width: 20px; height: 20px; }
  .notification-btn.quiet { opacity:.5; }
  .notification-btn.quiet:hover, .notification-btn.quiet:focus-visible { opacity:1; }
  .notification-count {
    position: absolute; top: 2px; right: 3px; transform:translate(28%,-28%); min-width: 17px; height: 17px;
    display: grid; place-items: center; padding: 0 4px; border-radius: 999px;
    background: var(--danger); color: #fff; border: 2px solid var(--surface-top);
    font-size: 10px; font-weight: 800; line-height: 1;
  }
  /* The live menu is a direct child of the header, rather than the horizontally
     scrollable tab strip. This lets it float over content instead of being
     clipped by the tab frame. */
  header.topbar > .notification-menu {
    position:absolute; top:58px; right:18px; z-index:95;
    width: min(390px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 120px)); overflow: auto;
    background: var(--surface); color: var(--ink); border: 1px solid var(--frame-border);
    border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:8px; animation:themeMenuIn .12s ease-out;
  }
  .notification-center .notification-menu {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 95;
    width: min(390px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 120px)); overflow: auto;
    background: var(--surface); color: var(--ink); border: 1px solid var(--frame-border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 8px;
  }
  .notification-menu-head { display:flex; align-items:baseline; gap:8px; padding:8px 9px 10px; border-bottom:1px solid var(--line); }
  .notification-menu-head h2 { margin:0; font-size:16px; }
  .notification-list { display:grid; gap:6px; padding-top:8px; }
  .notification-item { border:1px solid var(--line); border-left:4px solid var(--info); border-radius:var(--radius-sm); padding:10px; background:var(--surface-2); }
  .notification-item.action { border-left-color:var(--primary); }
  .notification-item.warning { border-left-color:var(--warn); }
  .notification-item.opportunity { border-left-color:var(--success); }
  .notification-item-top { display:flex; align-items:flex-start; gap:8px; }
  .notification-item-title { font-size:13px; font-weight:750; color:var(--ink); }
  .notification-item-copy { margin-top:3px; color:var(--ink-2); font-size:12px; line-height:1.35; }
  .notification-item-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
  /* Dismissal is an intentional decision, not a tiny hidden “×”. The soft-red
     treatment remains visible against both the white and dark queue panels. */
  .notification-dismiss, .notification-dismiss-all {
    flex:0 0 auto; min-height:28px; padding:4px 9px;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid color-mix(in srgb, var(--primary) 48%, var(--line)); border-radius:7px;
    background:var(--primary-soft); color:var(--primary-dark); font-size:11px; line-height:1; font-weight:750;
  }
  .notification-dismiss { margin:-2px -2px 0 auto; }
  .notification-dismiss-all { margin-left:auto; align-self:center; }
  .notification-dismiss:hover, .notification-dismiss:focus-visible,
  .notification-dismiss-all:hover, .notification-dismiss-all:focus-visible { background:var(--primary); color:#fff; border-color:var(--primary); }
  .notification-empty { padding:24px 14px; text-align:center; color:var(--muted); font-size:13px; }
  header.topbar .notification-btn.ghost { color:#fff; }
  .notification-count { border-color:var(--surface-top); }
  /* Account controls live in one compact, familiar profile menu rather than
     occupying the header with a row of infrequent account-management buttons. */
  .account-menu { position:relative; display:inline-flex; }
  .account-btn {
    display:inline-flex; align-items:center; gap:8px; max-width:220px; min-height:34px;
    padding:3px 7px 3px 4px; border:1px solid transparent; border-radius:999px;
    background:transparent; color:#fff; cursor:pointer;
  }
  .account-btn:hover, .account-btn[aria-expanded="true"] { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28); }
  .account-avatar {
    width:29px; height:29px; display:grid; place-items:center; flex:none; border-radius:50%;
    overflow:hidden; background:#fff; color:var(--primary-dark); font-size:11px; font-weight:800; letter-spacing:.02em;
    box-shadow:0 1px 3px rgba(0,37,55,.28);
  }
  .account-avatar img { width:100%; height:100%; display:block; object-fit:cover; }
  .account-identity { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:650; color:#fff; }
  .account-menu .admin-mode-badge { position:absolute; top:50%; right:calc(100% + 9px); transform:translateY(-50%); margin:0; font-size:8px; letter-spacing:.07em; }
  /* Only authority views reserve horizontal room for their role marker. That
     moves the ordinary utilities left without wasting header space for field
     engineers, and the whole control group remains hidden on mobile. */
  @media (min-width:769px) { .account-menu.has-authority-badge { margin-left:118px; } }
  .account-panel {
    position:absolute; top:calc(100% + 10px); right:0; z-index:96; width:min(310px, calc(100vw - 24px));
    overflow:hidden; border:1px solid var(--frame-border); border-radius:var(--radius); background:var(--surface);
    color:var(--ink); box-shadow:var(--shadow-lg); animation:themeMenuIn .12s ease-out;
  }
  .account-panel-head { display:flex; align-items:center; gap:11px; padding:14px; background:var(--surface-2); border-bottom:1px solid var(--line); }
  .account-panel-head .account-avatar { width:40px; height:40px; font-size:13px; background:var(--primary); color:#fff; }
  .account-panel-name { display:block; color:var(--ink); font-size:14px; font-weight:780; }
  .account-panel-email { display:block; max-width:210px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:12px; margin-top:2px; }
  .account-panel-actions { padding:6px; display:grid; }
  .account-menu-action { width:100%; min-height:36px; padding:8px 10px; border:0; border-radius:8px; background:transparent; color:var(--ink-2); cursor:pointer; text-align:left; font:inherit; font-size:13px; font-weight:600; }
  /* A transient menu owns the next outside tap. The real full-screen surface
     prevents click-through instead of trying to cancel a synthetic click after
     the control underneath has already received pointer events. The navigation
     drawer deliberately keeps its independent scrim and is never included. */
  .transient-menu-scrim[hidden] { display:none !important; }
  .transient-menu-scrim { position:fixed; inset:0; z-index:98; background:transparent; }
  body.transient-menu-open header.topbar { pointer-events:none; }
  body.transient-menu-open #accountPanel,
  body.transient-menu-open #notificationsPanel { pointer-events:auto; }
  .column-picker.transient-surface-open { z-index:99; pointer-events:auto; }
  .quick-toggle-pill, .edit-toggle-pill { display:inline-flex !important; align-items:center; gap:5px; }
  .quick-toggle-pill::after { content:'\21BB'; opacity:.62; font-size:.78em; line-height:1; }
  .edit-toggle-pill::after { content:'\270E'; opacity:.58; font-size:.72em; line-height:1; transform:rotate(90deg); }
  .account-menu-action:hover { background:var(--surface-2); color:var(--ink); }
  header.topbar > .account-panel { top:58px; right:18px; }
  .profile-photo-editor { display:flex; align-items:center; gap:16px; margin:0 0 18px; padding:14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); }
  .profile-photo-control { position:relative; width:76px; height:76px; flex:none; }
  .profile-photo-preview { width:76px; height:76px; display:grid; place-items:center; flex:none; overflow:hidden; border-radius:50%; background:var(--primary); color:#fff; font-size:22px; font-weight:800; box-shadow:0 3px 10px rgba(0,37,55,.18); }
  .profile-photo-preview img { width:100%; height:100%; display:block; object-fit:cover; }
  .profile-photo-edit { position:absolute; right:-2px; bottom:-2px; width:30px; height:30px; display:grid; place-items:center; padding:0; border:2px solid var(--surface-2); border-radius:50%; background:var(--primary-dark); color:#fff; box-shadow:0 2px 7px rgba(0,37,55,.28); font-size:16px; line-height:1; opacity:0; transform:scale(.82); transition:opacity .16s ease, transform .16s ease, background .16s ease; cursor:pointer; }
  .profile-photo-control:hover .profile-photo-edit, .profile-photo-control:focus-within .profile-photo-edit { opacity:1; transform:scale(1); }
  .profile-photo-edit:hover, .profile-photo-edit:focus-visible { background:var(--primary); }
  .profile-photo-actions { display:grid; gap:7px; min-width:0; }
  .profile-photo-actions p { margin:0; color:var(--muted); font-size:12px; line-height:1.4; }
  .profile-image-crop-stage { position:relative; width:min(100%, 360px); aspect-ratio:1; margin:2px auto 14px; overflow:hidden; border:1px solid var(--line-strong); border-radius:50%; background:var(--surface-2); touch-action:none; cursor:grab; box-shadow:inset 0 0 0 1px rgba(0,0,0,.04); }
  .profile-image-crop-stage:active { cursor:grabbing; }
  .profile-image-crop-stage img { position:absolute; max-width:none; user-select:none; -webkit-user-drag:none; pointer-events:none; transform:translate(-50%, -50%); }
  .profile-image-crop-controls { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; color:var(--ink-2); font-size:13px; }
  .profile-image-crop-controls input[type="range"] { width:100%; accent-color:var(--primary); }
  @media (max-width:560px) { .profile-photo-editor { align-items:flex-start; } .profile-image-crop-stage { width:min(78vw, 330px); } }
  @media (hover:none) { .profile-photo-edit { opacity:1; transform:scale(1); } }
  .profile-signature-editor { margin-top:14px; padding:14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); }
  .profile-signature-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
  .input-with-suffix { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; overflow:hidden; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--surface); }
  .input-with-suffix:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent); }
  .input-with-suffix input { min-width:0; border:0 !important; border-radius:0; background:transparent; box-shadow:none !important; }
  .input-with-suffix span { padding:0 11px; color:var(--muted); font-size:12px; font-weight:700; }
  .profile-signature-preview { display:flex; align-items:center; min-height:58px; margin:10px 0; padding:8px 12px; border:1px dashed var(--line-strong); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink-2); font-family:cursive; font-size:23px; }
  .signature-placement-editor { margin-top:12px; padding:11px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); }
  .signature-placement-stage { position:relative; height:112px; margin:9px 0 10px; overflow:hidden; border:1px solid var(--line-strong); border-radius:7px; background:#fff; touch-action:none; cursor:grab; }
  .signature-placement-stage:active { cursor:grabbing; }
  .signature-placement-line { position:absolute; left:9%; right:9%; top:73%; border-top:1px solid #5e6d73; pointer-events:none; }
  .signature-placement-label { position:absolute; left:9%; top:calc(73% + 4px); color:#72828a; font-size:9px; letter-spacing:.04em; text-transform:uppercase; pointer-events:none; }
  .signature-placement-visual { position:absolute; display:flex; align-items:center; justify-content:center; color:#182830; font-family:cursive; font-size:24px; white-space:nowrap; user-select:none; pointer-events:none; transform-origin:top left; }
  .signature-placement-visual img { display:block; width:100%; height:100%; object-fit:contain; }
  .signature-placement-controls { display:grid; grid-template-columns:auto 1fr auto auto; gap:9px; align-items:center; color:var(--ink-2); font-size:12px; }
  .signature-placement-controls input[type="range"] { width:100%; accent-color:var(--primary); }
  .profile-signature-preview img { display:block; max-width:100%; max-height:50px; object-fit:contain; }
  #signaturePadModal { padding:0; background:#f4f8fb; }
  .signature-pad-modal { width:100vw; max-width:none; height:100dvh; max-height:none; border:0; border-radius:0; display:flex; flex-direction:column; box-shadow:none; }
  .signature-pad-modal .modal-head { flex:none; padding:12px 18px; background:var(--workspace-header); border-color:color-mix(in srgb, var(--workspace-header) 76%, #000); color:#fff; }
  .signature-pad-modal .modal-head h2 { font-size:17px; }
  .signature-pad-modal .modal-head .ghost { color:#fff; border-color:rgba(255,255,255,.62); }
  .signature-pad-modal .modal-body { flex:1; min-height:0; padding:0; overflow:hidden; display:flex; }
  .signature-pad-workspace { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; gap:10px; padding:clamp(16px,3vw,34px); background:linear-gradient(135deg,#eaf4fa,#fff 42%,#eef7fc); }
  .signature-pad-guidance { margin:0; color:var(--ink-2); font-size:13px; }
  .signature-pad-surface { flex:1; min-height:0; position:relative; border:1px solid var(--line-strong); border-radius:12px; background:#fff; box-shadow:inset 0 1px 0 rgba(0,0,0,.03), 0 6px 18px rgba(8,55,82,.09); overflow:hidden; }
  .signature-pad-surface::after { content:''; position:absolute; left:8%; right:8%; bottom:38px; border-top:1px solid #a9b8c1; pointer-events:none; }
  .signature-pad-canvas { display:block; width:100%; height:100%; touch-action:none; cursor:crosshair; }
  .signature-pad-rotate { display:none; }
  .signature-pad-modal .modal-foot { flex:none; padding:12px 18px; background:var(--surface); }
  @media (max-width:760px) and (orientation:portrait) {
    .signature-pad-workspace { display:none; }
    .signature-pad-rotate { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:28px; text-align:center; color:var(--ink-2); font-size:16px; }
    .signature-pad-rotate strong { color:var(--ink); font-size:21px; }
    .signature-pad-modal .modal-foot { justify-content:center; }
    .signature-pad-modal .modal-foot #clearSignaturePad, .signature-pad-modal .modal-foot #saveSignaturePad { display:none; }
  }
  .account-menu-action.sign-out { margin-top:5px; padding-top:11px; border-top:1px solid var(--line); color:var(--danger); }
  .account-menu-action.sign-out:hover { background:var(--danger-soft); color:var(--danger); }
  @media (max-width: 680px) { .account-identity { display:none; } .account-btn { padding-right:4px; } }
  .theme-opt {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 7px 8px;
    border: none;
    background: transparent;
    color: var(--ink-2);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    min-height: 0;
    cursor: pointer;
    text-align: left;
  }
  .theme-opt:hover { background: var(--surface-2); color: var(--ink); }
  .theme-opt[aria-checked="true"] { background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; }
  .theme-opt[aria-checked="true"] .theme-check { opacity: 1; }
  .theme-swatch {
    width: 22px; height: 22px; border-radius: 7px; flex: none;
    border: 1px solid var(--frame-border);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .theme-opt .opt-name { flex: 1; }
  .theme-check {
    opacity: 0; color: var(--primary); font-size: 14px; font-weight: 700;
  }

  /* ===== Tabs ===== */
  nav.tabs {
    display: flex;
    position:relative;
    gap: 0;
    padding: 0 20px;
    background: var(--tab-surface);
    border-bottom: 0;
    overflow-x: auto;
  }
  .tab-spacer { flex:1 0 16px; }
  .tab-utilities { margin-left:auto; display:flex; align-items:center; gap:4px; flex:none; padding-left:8px; }
  .tab-utilities .ghost { color:rgba(255,255,255,.92); }
  .tab-utilities .ghost:hover { color:#fff; background:rgba(0,0,0,.14); }
  .theme-toggle {
    display:inline-grid; place-items:center; width:36px; min-height:34px; padding:0;
    border:0; border-radius:8px; background:transparent; color:#fff; cursor:pointer;
  }
  /* Theme state is communicated by the sun itself. Keep the desktop control
     physically still so Windows never paints a second hover/click tile around it. */
  .theme-toggle:hover, .theme-toggle:active, .theme-toggle:focus { background:transparent; box-shadow:none; transform:none; }
  .theme-toggle svg { width:21px; height:21px; }
  /* The same sun keeps the control familiar. In dark mode it shares the
     no-work bell's exact quiet state, so both controls recede consistently. */
  body[data-theme="agilent-web-light"] .theme-toggle { color:#fff; }
  body[data-theme="agilent-web-dark"] .theme-toggle { color:#fff; opacity:.5; }
  body[data-theme="agilent-web-dark"] .theme-toggle:hover,
  body[data-theme="agilent-web-dark"] .theme-toggle:focus-visible { opacity:.5; }
  .theme-toggle, .mobile-header-theme { transition:color 160ms ease, opacity 160ms ease, filter 160ms ease; }
  body.theme-icon-transitioning .theme-toggle,
  body.theme-icon-transitioning .mobile-header-theme { opacity:.48; filter:brightness(.82); }
  /* The control changes state before the surfaces do: a dim blue sun cues
     dark mode, while a bright white sun cues light mode. */
  body.theme-icon-transitioning[data-theme-intent="agilent-web-dark"] .theme-toggle,
  body.theme-icon-transitioning[data-theme-intent="agilent-web-dark"] .mobile-header-theme { color:#2a88b2 !important; opacity:1; filter:none; }
  body.theme-icon-transitioning[data-theme-intent="agilent-web-light"] .theme-toggle,
  body.theme-icon-transitioning[data-theme-intent="agilent-web-light"] .mobile-header-theme { color:#fff !important; opacity:1; filter:none; }
  .tab-btn {
    background: transparent;
    border: none;
    color: var(--muted);
    padding: 0 15px;
    min-height: 42px;
    border-radius: 0;
    font-family: "Arial Narrow", "Roboto Condensed", "Liberation Sans Narrow", "Segoe UI", sans-serif;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .055em;
    text-transform: uppercase;
    font-stretch:condensed;
    white-space: nowrap;
  }
  .tab-btn:hover { background: transparent; color: #fff; }
  .tab-btn.active {
    color: #fff;
    background: transparent;
  }
  .tab-btn .count {
    display: inline-block;
    background: var(--surface-2);
    color: var(--muted);
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 6px;
  }
  .tab-btn.active .count { background: var(--primary-soft); color: var(--primary-dark); }
  /* One page-colour notch moves between destinations instead of appearing anew
     on each tab. It keeps the Agilent-style cut-out feeling without a jump. */
  .tab-indicator {
    position:absolute; z-index:3; left:0; bottom:-1px; width:20px; height:10px;
    background:var(--bg); clip-path:polygon(50% 0, 0 100%, 100% 100%);
    opacity:0; pointer-events:none;
    transition:transform 240ms cubic-bezier(.2,.75,.2,1), opacity 120ms ease, background-color 220ms ease;
  }
  .tab-indicator.visible { opacity:1; }
  /* Navigation is always on the Agilent blue band. Keep its labels and
     counters independent from page-surface text variables in both modes. */
  nav.tabs .tab-btn { color:rgba(255,255,255,.88); }
  nav.tabs .tab-btn:hover { color:#fff; background:transparent; }
  nav.tabs .tab-btn.active { color:#fff; background:transparent; }
  nav.tabs .tab-btn:hover, nav.tabs .tab-btn.active { border-radius:0; }
  nav.tabs .tab-btn .count { background:rgba(255,255,255,.2); color:#fff; }
  nav.tabs .tab-btn.active .count { background:var(--accent); color:#17313f; }

  /* ===== Main ===== */
  main { padding: 18px; max-width: 1500px; margin: 0 auto; }
  .tab-panel { display: none; }
  .tab-panel.active { display: block; }

  .panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 16px;
  }
  .panel-head {
    padding: 14px 18px;
    border-bottom: 1px solid color-mix(in srgb, var(--workspace-header) 58%, var(--line));
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
    /* Solid header bands are calmer and more legible than a wash of theme
       gradients, especially when dense tables sit directly below them. */
    background: var(--workspace-header);
    color: #fff;
    box-shadow: inset 0 -1px rgba(255,255,255,.10), 0 5px 14px color-mix(in srgb, var(--workspace-header) 14%, transparent);
  }
  .panel-head h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
  }
  .panel-head .desc {
    color: rgba(255,255,255,.74);
    font-size: 12px;
    margin-top: 2px;
  }
  /* Header metadata sits on the themed dark surface, so the general muted
     text token is too faint here on several light palettes. */
  .panel-head .text-muted { color: rgba(255,255,255,.88); }
  .panel-head .spacer { flex: 1; }
  .panel-body { padding: 16px 18px; }
  .panel-body.flush { padding: 0; }

  /* A stock-space is a destination, not just another table. Give it an
     unmistakable solid identity band so users always know where they are. */
  .stock-space-header {
    padding: 22px 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(350px, .82fr);
    align-items: end;
    column-gap: 34px;
    row-gap: 16px;
    background: var(--workspace-header);
    color: #fff;
    border-bottom: 1px solid color-mix(in srgb, var(--workspace-header) 70%, #000);
    box-shadow: inset 0 -1px rgba(255,255,255,.12), 0 7px 18px color-mix(in srgb, var(--workspace-header) 26%, transparent);
  }
  /* The inventory-space identity follows the space everywhere it appears.
     The hero therefore uses the same protected photo/default artwork and the
     same saved light/dark readability gradient as its directory cards. */
  .stock-space-header.space-visual-card { position:relative; isolation:isolate; overflow:hidden; background-position:center; background-size:cover; }
  .stock-space-header.space-visual-card.has-space-background { background-image:none; }
  .stock-space-header.space-visual-card.has-space-background::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(155deg,rgba(255,255,255,.22),transparent 28%,rgba(255,255,255,.07) 29%,transparent 58%); }
  .stock-space-header.space-visual-card > :not(.space-background-media) { position:relative; z-index:2; }
  .stock-space-header.space-visual-card h1,
  .stock-space-header.space-visual-card .eyebrow,
  .stock-space-header.space-visual-card .stock-space-owner { color:var(--space-caption-text) !important; text-shadow:var(--space-caption-shadow); }
  .stock-space-identity { min-width: 0; }
  .stock-space-identity .back-to-inventory-spaces { min-height:30px; padding:4px 10px; margin:0 0 9px; font-size:12px; }
  .stock-space-header .eyebrow { color: rgba(255,255,255,.74); }
  .stock-space-header h1 { margin: 3px 0 4px; color: #fff; font-size: clamp(28px, 4vw, 40px); line-height: 1.05; letter-spacing: -.035em; }
  .stock-space-title { display:flex; align-items:center; gap:8px; min-width:0; }
  .stock-space-title > span { overflow-wrap:anywhere; }
  button.rename-space-pencil {
    min-width:30px; min-height:30px; padding:3px 7px; border:0; border-radius:999px;
    background:rgba(255,255,255,.14); color:#fff; font-size:18px; line-height:1;
    opacity:0; transform:translateX(-3px); pointer-events:none;
    transition:opacity .14s ease, transform .14s ease, background .14s ease;
  }
  .stock-space-title:hover button.rename-space-pencil,
  .stock-space-title:focus-within button.rename-space-pencil { opacity:1; transform:translateX(0); pointer-events:auto; }
  button.rename-space-pencil:hover { background:rgba(255,255,255,.27); border:0; }
  button.rename-space-pencil:focus-visible { opacity:1; transform:translateX(0); pointer-events:auto; outline:3px solid #fff; outline-offset:2px; }
  @media (hover: none) { button.rename-space-pencil { opacity:1; transform:none; pointer-events:auto; } }
  .stock-space-header .stock-space-owner { margin: 0; display:flex; align-items:center; flex-wrap:wrap; gap:7px; color: rgba(255,255,255,.9); font-size: 14px; font-weight: 650; }
  .stock-manager-pill { display:inline-flex; align-items:center; gap:6px; min-height:23px; padding:2px 8px; border:1px solid rgba(255,255,255,.22); border-radius:var(--chip-radius); background:rgba(0,41,67,.17); color:#fff; font-size:12px; font-weight:720; }
  .stock-manager-pill-label { color:rgba(255,255,255,.7); font-size:9px; font-weight:820; letter-spacing:.07em; text-transform:uppercase; }
  .stock-space-owner #contactStockManagerBtn { min-height:27px; padding:3px 8px; border-color:rgba(255,255,255,.55); color:#fff; background:rgba(0,41,67,.14); }
  .stock-space-owner #contactStockManagerBtn:hover { background:rgba(255,255,255,.16); border-color:#fff; }
  .stock-space-actions {
    display:grid;
    gap:9px;
    justify-items:end;
    min-width:0;
  }
  .stock-action-primary, .stock-action-utilities { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
  .stock-action-primary > button:first-child { min-height:40px; font-size:15px; font-weight:780; padding-inline:16px; }
  .stock-action-utilities { gap:6px; }
  .stock-space-header .stock-space-actions button:not(.danger) { background: var(--surface); color: var(--primary-dark); border-color: var(--surface); }
  .stock-space-header .stock-space-actions button:not(.danger):hover { background: var(--primary-soft); border-color: var(--primary-soft); color: var(--primary-dark); }
  .stock-space-header .back-to-inventory-spaces { background: rgba(255,255,255,.16) !important; color: #fff !important; border-color: rgba(255,255,255,.5) !important; box-shadow: none; }
  .stock-space-header .back-to-inventory-spaces:hover { background: rgba(255,255,255,.27) !important; border-color: #fff !important; box-shadow: none; }
  @media (max-width: 720px) {
    .stock-space-header { grid-template-columns:1fr; padding: 18px; gap: 14px; }
    .stock-space-actions { justify-items:start; }
    .stock-action-primary, .stock-action-utilities { justify-content:flex-start; }
    .stock-space-header h1 { font-size: 30px; }
  }

  /* The home view gives people an immediate next action; specialist tools
     carry their own weight in dedicated workspaces. */
  #panel-dashboard > .panel { overflow: hidden; box-shadow: var(--shadow-lg); }
  #panel-dashboard .panel:has(#leaderboardTable) .panel-head h2 { letter-spacing: .01em; }
  #panel-dashboard .panel:has(#leaderboardTable) .panel-head .badge { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.25); }
  .home-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 24px; margin-bottom: 16px; border-radius: calc(var(--radius) + 2px);
    border: 1px solid var(--workspace-header);
    background: var(--workspace-header);
    color: #fff;
    box-shadow: inset 0 -1px rgba(255,255,255,.1), var(--shadow-lg);
  }
  .home-hero h1 { margin: 3px 0 6px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.035em; color: #fff; }
  .home-hero p { margin: 0; color: rgba(255,255,255,.84); max-width: 570px; }
  .home-hero .eyebrow { color: rgba(255,255,255,.72); }
  /* Home actions use the same blue / light-blue interaction language as
     Inventory Spaces. Yellow remains a small accent, never an action hover. */
  .eyebrow { color: var(--primary-dark); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
  .home-actions { display:grid; grid-template-columns:repeat(2, minmax(180px, 1fr)); gap:10px; min-width:min(100%, 470px); }
  button.home-action-tile { min-height:82px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:4px; padding:13px 15px; text-align:left; white-space:normal; background:var(--surface); border-color:rgba(255,255,255,.88); color:var(--primary-dark); box-shadow:0 2px 6px rgba(0,47,72,.14); }
  button.home-action-tile:hover, button.home-action-tile:focus-visible { transform:translateY(-2px); background:var(--primary-soft); border-color:var(--primary); color:var(--primary-dark); box-shadow:var(--shadow-lg); }
  [data-theme="agilent-web-dark"] button.home-action-tile { background:#1d4a5e; border-color:#67c7e9; color:#f5fcff; box-shadow:0 3px 10px rgba(0,0,0,.28); }
  [data-theme="agilent-web-dark"] button.home-action-tile:hover, [data-theme="agilent-web-dark"] button.home-action-tile:focus-visible { background:#24617a; border-color:#a6e9ff; color:#fff; }
  [data-theme="agilent-web-dark"] .home-action-copy { color:#d0e8f2; }
  .home-action-title { font-size:15px; font-weight:800; line-height:1.12; }
  .home-action-copy { color:var(--ink-2); font-size:12px; font-weight:600; line-height:1.25; }
  /* A single dashboard action is a deliberate next step, not a stretched
     pseudo-panel. Keep its familiar tile size and lock it to the right edge
     of District Pulse; on phone layouts it returns to the full-width target. */
  #homeActions:has(> [data-home-tab="inventory"]:only-child) {
    grid-template-columns:minmax(280px, 316px);
    min-width:0;
    width:min(100%, 316px);
    justify-content:end;
  }
  #homeActions [data-home-tab="inventory"]:only-child { width:100%; justify-self:end; }
  .home-impact-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin:0 0 16px; }
  .home-impact-card { min-height:116px; padding:17px 18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
  .home-impact-card:nth-child(1) { border-top:4px solid var(--primary); }
  .home-impact-card:nth-child(2) { border-top:4px solid var(--success); }
  .home-impact-card:nth-child(3) { border-top:4px solid var(--accent); }
  .home-impact-label { color:var(--ink-2); font-size:12px; font-weight:750; }
  .home-impact-value { margin-top:7px; color:var(--ink); font-size:27px; font-weight:820; line-height:1; letter-spacing:-.035em; }
  .home-impact-copy { margin-top:7px; color:var(--muted); font-size:12px; line-height:1.32; }
  .home-work-grid { display:grid; grid-template-columns:minmax(0, 1fr); gap:16px; margin-bottom:16px; }
  .home-work-grid .panel { margin:0; }
  .home-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 18px 12px; border-bottom:1px solid var(--line); }
  .home-section-head h2 { margin:2px 0 0; color:var(--ink); font-size:18px; }
  .home-section-copy { margin:4px 0 0; color:var(--ink-2); font-size:13px; line-height:1.35; }
  .home-work-list { display:grid; gap:8px; padding:10px; }
  .home-work-item { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:11px 12px; border:1px solid var(--line); border-left:4px solid var(--info); border-radius:var(--radius-sm); background:var(--surface-2); }
  .home-work-item.action { border-left-color:var(--primary); }
  .home-work-item.warning { border-left-color:var(--warn); }
  .home-work-item.opportunity { border-left-color:var(--success); }
  .home-work-item-title { color:var(--ink); font-size:13px; font-weight:780; }
  .home-work-item-copy { margin-top:3px; color:var(--ink-2); font-size:12px; line-height:1.35; }
  .home-work-empty { padding:29px 18px; color:var(--muted); text-align:center; font-size:13px; }
  .home-space-list { display:grid; gap:12px; padding:10px; }
  .home-space-group { display:grid; gap:8px; }
  .home-space-group + .home-space-group { margin-top:8px; padding-top:12px; border-top:1px solid var(--line); }
  .home-space-group-title { color:var(--primary-dark); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
  .home-space-card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap:12px; }
  .home-space-card { width:100%; min-height:190px; max-height:290px; aspect-ratio:2 / 1; padding:20px; position:relative; isolation:isolate; display:flex; flex-direction:column; gap:7px; overflow:hidden; text-align:left; color:var(--ink); background-color:var(--surface-2); background-position:center; background-size:cover; border:1px solid var(--line); border-radius:var(--radius); cursor:pointer; }
  .home-space-card:hover { background-color:var(--primary-soft); border-color:var(--primary); color:var(--ink); }
  .home-space-kind { display:block; color:var(--primary-dark); font-size:11px; font-weight:820; letter-spacing:.08em; line-height:1.2; text-transform:uppercase; }
  .home-space-name { display:block; color:var(--ink); font-size:clamp(21px,2vw,26px); font-weight:820; line-height:1.12; letter-spacing:-.025em; overflow-wrap:anywhere; }
  .home-space-manager { display:block; color:var(--muted); font-size:13px; font-weight:650; line-height:1.35; }
  .home-space-qty { display:flex; align-items:baseline; gap:6px; margin-top:auto; color:var(--primary-dark); font-size:44px; font-weight:850; line-height:.95; letter-spacing:-.045em; white-space:nowrap; }
  .home-space-qty small { color:inherit; font-size:12px; font-weight:760; letter-spacing:0; text-transform:lowercase; }
  /* Inventory imagery is identification, not decoration. Custom photos stay
     visible while a dark caption zone protects the name and quantity. The
     fallback artwork gives common space types a recognizable identity before
     anyone uploads a photograph. */
  .home-space-card.has-space-background,
  .inventory-space-card.has-space-background,
  .space-settings-preview.has-space-background { position:relative; isolation:isolate; background-image:none; background-color:#073d57; border-color:rgba(0,91,132,.42); box-shadow:0 7px 20px rgba(0,44,70,.18); }
  .space-visual-card {
    /* Light mode keeps the underlying image intact, but uses a calm blue
       caption wash on the left so white inventory labels remain readable. */
    --space-caption-light-rgb:39,106,167;
    --space-caption-light-text:#fff;
    --space-caption-light-opacity:.76;
    --space-caption-light-shadow:0 1px 4px rgba(0,25,48,.72);
    --space-caption-dark-rgb:2,24,38;
    --space-caption-dark-text:#fff;
    --space-caption-dark-opacity:.82;
    --space-caption-dark-shadow:0 1px 4px rgba(0,16,28,.88);
    --space-caption-rgb:var(--space-caption-light-rgb);
    --space-caption-text:var(--space-caption-light-text);
    --space-caption-opacity:var(--space-caption-light-opacity);
    --space-caption-shadow:var(--space-caption-light-shadow);
    --space-image-light-x:50%;
    --space-image-light-y:50%;
    --space-image-light-scale:1;
    --space-image-dark-x:50%;
    --space-image-dark-y:50%;
    --space-image-dark-scale:1;
    --space-image-x:var(--space-image-light-x);
    --space-image-y:var(--space-image-light-y);
    --space-image-scale:var(--space-image-light-scale);
  }
  body[data-theme="agilent-web-dark"] .space-visual-card,
  .space-settings-preview.preview-dark {
    --space-caption-rgb:var(--space-caption-dark-rgb);
    --space-caption-text:var(--space-caption-dark-text);
    --space-caption-opacity:var(--space-caption-dark-opacity);
    --space-caption-shadow:var(--space-caption-dark-shadow);
    --space-image-x:var(--space-image-dark-x);
    --space-image-y:var(--space-image-dark-y);
    --space-image-scale:var(--space-image-dark-scale);
  }
  body[data-theme="agilent-web-dark"] .space-settings-preview.preview-light {
    --space-caption-rgb:var(--space-caption-light-rgb);
    --space-caption-text:var(--space-caption-light-text);
    --space-caption-opacity:var(--space-caption-light-opacity);
    --space-caption-shadow:var(--space-caption-light-shadow);
    --space-image-x:var(--space-image-light-x);
    --space-image-y:var(--space-image-light-y);
    --space-image-scale:var(--space-image-light-scale);
  }
  .space-background-media { position:absolute !important; inset:0; z-index:0 !important; width:100%; height:100%; max-width:none; object-fit:cover; object-position:var(--space-image-x) var(--space-image-y); transform:scale(var(--space-image-scale)); transform-origin:var(--space-image-x) var(--space-image-y); pointer-events:none; user-select:none; }
  .space-visual-card::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg,rgba(var(--space-caption-rgb),var(--space-caption-opacity)) 0%,rgba(var(--space-caption-rgb),calc(var(--space-caption-opacity) * .78)) 38%,rgba(var(--space-caption-rgb),calc(var(--space-caption-opacity) * .22)) 72%,transparent 100%),linear-gradient(0deg,rgba(var(--space-caption-rgb),calc(var(--space-caption-opacity) * .72)) 0%,transparent 62%); }
  .home-space-card.has-space-background::after,
  .inventory-space-card.has-space-background::after,
  .space-settings-preview.has-space-background::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(155deg,rgba(255,255,255,.24),transparent 28%,rgba(255,255,255,.08) 29%,transparent 58%); }
  .home-space-card.has-space-background > :not(.space-background-media),
  .inventory-space-card.has-space-background > :not(.space-background-media),
  .space-settings-preview.has-space-background > :not(.space-background-media) { position:relative; z-index:2; }
  .home-space-card.has-space-background:hover,
  .inventory-space-card.has-space-background:hover { border-color:var(--primary); filter:saturate(1.04) brightness(1.01); }
  .space-visual-card strong,
  .space-visual-card small,
  .space-visual-card h2,
  .space-visual-card .home-space-kind,
  .space-visual-card .home-space-name,
  .space-visual-card .home-space-manager,
  .space-visual-card .eyebrow,
  .space-visual-card .text-muted,
  .space-visual-card .home-space-qty,
  .space-visual-card .inventory-space-qty { color:var(--space-caption-text) !important; text-shadow:var(--space-caption-shadow); }
  body[data-theme="agilent-web-dark"] .home-space-card.has-space-background,
  body[data-theme="agilent-web-dark"] .inventory-space-card.has-space-background,
  body[data-theme="agilent-web-dark"] .space-settings-preview.has-space-background { color:#fff; background-color:#07557d; border-color:rgba(255,255,255,.42); box-shadow:0 7px 20px rgba(0,0,0,.3); }
  body[data-theme="agilent-web-dark"] .home-space-card.has-space-background:hover,
  body[data-theme="agilent-web-dark"] .inventory-space-card.has-space-background:hover { color:#fff; border-color:#fff; filter:saturate(1.06) brightness(1.04); }
  body[data-theme="agilent-web-dark"] .space-visual-card strong,
  body[data-theme="agilent-web-dark"] .space-visual-card small,
  body[data-theme="agilent-web-dark"] .space-visual-card h2,
  body[data-theme="agilent-web-dark"] .space-visual-card .home-space-kind,
  body[data-theme="agilent-web-dark"] .space-visual-card .home-space-name,
  body[data-theme="agilent-web-dark"] .space-visual-card .home-space-manager,
  body[data-theme="agilent-web-dark"] .space-visual-card .eyebrow,
  body[data-theme="agilent-web-dark"] .space-visual-card .text-muted,
  body[data-theme="agilent-web-dark"] .space-visual-card .home-space-qty,
  body[data-theme="agilent-web-dark"] .space-visual-card .inventory-space-qty { color:var(--space-caption-text) !important; text-shadow:var(--space-caption-shadow); }
  .space-art-black:not(.has-space-background),
  .space-art-trunk:not(.has-space-background),
  .space-art-managed:not(.has-space-background),
  .space-art-public:not(.has-space-background) { position:relative; isolation:isolate; overflow:hidden; color:#fff; border-color:rgba(255,255,255,.28); }
  .space-art-black:not(.has-space-background) { background-color:#dcecf4; background-image:url('/assets/space-black-default-light.webp'); background-repeat:no-repeat; background-position:center; background-size:cover; }
  .space-art-trunk:not(.has-space-background) { background-color:#d8e5ec; background-image:url('/assets/space-trunk-default-light.webp'); background-repeat:no-repeat; background-position:center; background-size:cover; }
  body[data-theme="agilent-web-dark"] .space-art-black:not(.has-space-background),
  .space-settings-preview.preview-dark.space-art-black:not(.has-space-background) { background-color:#080d13; background-image:url('/assets/space-black-default.webp'); }
  body[data-theme="agilent-web-dark"] .space-art-trunk:not(.has-space-background),
  .space-settings-preview.preview-dark.space-art-trunk:not(.has-space-background) { background-color:#18344a; background-image:url('/assets/space-trunk-default.webp'); }
  body[data-theme="agilent-web-dark"] .space-settings-preview.preview-light.space-art-black:not(.has-space-background) { background-color:#dcecf4; background-image:url('/assets/space-black-default-light.webp'); }
  body[data-theme="agilent-web-dark"] .space-settings-preview.preview-light.space-art-trunk:not(.has-space-background) { background-color:#d8e5ec; background-image:url('/assets/space-trunk-default-light.webp'); }
  .space-art-managed:not(.has-space-background) { background-color:#07547c; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 150'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.19' stroke-width='3'%3E%3Cpath d='M120 12v126M170 12v126M220 12v126M88 40h150M88 77h150M88 114h150'/%3E%3Cpath d='M18 128V72l34-25 34 25v56zM34 128V91h36v37'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(130deg,#063a59,#087aae 62%,#1aa3d5); background-repeat:no-repeat; background-position:right bottom,center; background-size:72% auto,cover; }
  .space-art-public:not(.has-space-background) { background-color:#075a83; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 150'%3E%3Cg fill='%23ffffff' fill-opacity='.22'%3E%3Ccircle cx='178' cy='75' r='12'/%3E%3Ccircle cx='145' cy='75' r='9'/%3E%3Ccircle cx='116' cy='75' r='6'/%3E%3Ccircle cx='91' cy='75' r='3'/%3E%3Ccircle cx='211' cy='75' r='9'/%3E%3Ccircle cx='238' cy='75' r='5'/%3E%3Ccircle cx='178' cy='42' r='9'/%3E%3Ccircle cx='178' cy='13' r='5'/%3E%3Ccircle cx='178' cy='108' r='9'/%3E%3Ccircle cx='178' cy='137' r='5'/%3E%3Ccircle cx='151' cy='48' r='8'/%3E%3Ccircle cx='129' cy='27' r='4'/%3E%3Ccircle cx='205' cy='48' r='8'/%3E%3Ccircle cx='227' cy='27' r='4'/%3E%3Ccircle cx='151' cy='102' r='8'/%3E%3Ccircle cx='129' cy='123' r='4'/%3E%3Ccircle cx='205' cy='102' r='8'/%3E%3Ccircle cx='227' cy='123' r='4'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(130deg,#064466,#0787bd 58%,#20a8d9); background-repeat:no-repeat; background-position:right bottom,center; background-size:75% auto,cover; }
  .space-art-black:not(.has-space-background) > *,
  .space-art-trunk:not(.has-space-background) > *,
  .space-art-managed:not(.has-space-background) > *,
  .space-art-public:not(.has-space-background) > * { position:relative; z-index:1; }
  .space-art-black:not(.has-space-background) strong,
  .space-art-black:not(.has-space-background) small,
  .space-art-black:not(.has-space-background) h2,
  .space-art-black:not(.has-space-background) .home-space-kind,
  .space-art-black:not(.has-space-background) .home-space-name,
  .space-art-black:not(.has-space-background) .home-space-manager,
  .space-art-black:not(.has-space-background) .eyebrow,
  .space-art-black:not(.has-space-background) .text-muted,
  .space-art-trunk:not(.has-space-background) strong,
  .space-art-trunk:not(.has-space-background) small,
  .space-art-trunk:not(.has-space-background) h2,
  .space-art-trunk:not(.has-space-background) .home-space-kind,
  .space-art-trunk:not(.has-space-background) .home-space-name,
  .space-art-trunk:not(.has-space-background) .home-space-manager,
  .space-art-trunk:not(.has-space-background) .eyebrow,
  .space-art-trunk:not(.has-space-background) .text-muted,
  .space-art-managed:not(.has-space-background) strong,
  .space-art-managed:not(.has-space-background) small,
  .space-art-managed:not(.has-space-background) h2,
  .space-art-managed:not(.has-space-background) .home-space-kind,
  .space-art-managed:not(.has-space-background) .home-space-name,
  .space-art-managed:not(.has-space-background) .home-space-manager,
  .space-art-managed:not(.has-space-background) .eyebrow,
  .space-art-managed:not(.has-space-background) .text-muted,
  .space-art-public:not(.has-space-background) strong,
  .space-art-public:not(.has-space-background) small,
  .space-art-public:not(.has-space-background) h2,
  .space-art-public:not(.has-space-background) .home-space-kind,
  .space-art-public:not(.has-space-background) .home-space-name,
  .space-art-public:not(.has-space-background) .home-space-manager,
  .space-art-public:not(.has-space-background) .eyebrow,
  .space-art-public:not(.has-space-background) .text-muted { color:var(--space-caption-text) !important; text-shadow:var(--space-caption-shadow); }
  .space-art-black:not(.has-space-background) .home-space-qty,
  .space-art-trunk:not(.has-space-background) .home-space-qty,
  .space-art-managed:not(.has-space-background) .home-space-qty,
  .space-art-public:not(.has-space-background) .home-space-qty,
  .space-art-black:not(.has-space-background) .inventory-space-qty,
  .space-art-trunk:not(.has-space-background) .inventory-space-qty,
  .space-art-managed:not(.has-space-background) .inventory-space-qty,
  .space-art-public:not(.has-space-background) .inventory-space-qty,
  .has-space-background .home-space-qty,
  .has-space-background .inventory-space-qty { color:var(--space-caption-text); text-shadow:var(--space-caption-shadow); }
  .home-activity-panel { margin:0 0 16px; }
  .home-activity-list { display:grid; gap:0; padding:4px 18px 12px; }
  button.home-activity-row { width:100%; display:grid; grid-template-columns:96px minmax(0, 1fr) 18px; gap:12px; align-items:center; padding:12px 4px; border:0; border-bottom:1px solid var(--line); border-radius:0; color:var(--ink-2); background:transparent; box-shadow:none; font-size:13px; text-align:left; }
  button.home-activity-row:last-child { border-bottom:0; }
  button.home-activity-row:hover, button.home-activity-row:focus-visible { color:var(--ink); background:var(--primary-soft); outline:0; }
  .home-activity-time { color:var(--muted); font-size:11px; line-height:1.35; }
  .home-activity-summary { min-width:0; color:inherit; font-weight:650; line-height:1.35; white-space:normal; overflow-wrap:anywhere; word-break:normal; }
  .home-activity-chevron { color:var(--primary); font-size:20px; font-weight:500; text-align:right; }
  .activity-detail-modal { max-width:640px; }
  .activity-detail-body { display:grid; gap:16px; padding:20px; }
  .activity-detail-intro { padding:16px; border-radius:var(--radius-sm); background:var(--primary-soft); border-left:4px solid var(--primary); }
  .activity-detail-intro .eyebrow { margin-bottom:5px; }
  .activity-detail-intro h3 { margin:0; color:var(--ink); font-size:18px; line-height:1.22; }
  .activity-detail-intro p { margin:6px 0 0; color:var(--ink-2); font-size:13px; line-height:1.45; }
  .activity-detail-facts { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin:0; }
  .activity-detail-fact { min-width:0; padding:12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); }
  .activity-detail-fact.full { grid-column:1 / -1; }
  .activity-detail-fact dt { margin:0 0 4px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
  .activity-detail-fact dd { margin:0; color:var(--ink); font-size:13px; font-weight:700; line-height:1.4; overflow-wrap:anywhere; }
  .activity-detail-items { display:grid; gap:8px; }
  .activity-detail-item { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:12px; align-items:center; padding:11px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); }
  .activity-detail-item strong { display:block; color:var(--ink); font-size:13px; }
  .activity-detail-item span { display:block; margin-top:3px; color:var(--muted); font-size:12px; line-height:1.35; }
  .activity-detail-qty { color:var(--primary-dark); font-size:14px; font-weight:800; white-space:nowrap; }
  @media (max-width:560px) {
    /* Activity rows remain readable on a narrow handset: summary first,
       timestamp below.  A three-column desktop row caused the two strings
       to collide whenever a timestamp or part description was long. */
    button.home-activity-row { grid-template-columns:minmax(0, 1fr) 16px; grid-template-areas:"summary chevron" "time chevron"; gap:4px 8px; padding:13px 4px; }
    .home-activity-summary { grid-area:summary; overflow-wrap:anywhere; }
    .home-activity-time { grid-area:time; overflow-wrap:anywhere; }
    .home-activity-chevron { grid-area:chevron; align-self:center; }
    .activity-detail-body { padding:16px; }
    .activity-detail-facts { grid-template-columns:1fr; }
    .activity-detail-fact.full { grid-column:auto; }
  }
  .home-review-panel { margin:0 0 16px; overflow:hidden; }
  .home-review-panel[hidden] { display:none; }
  .dashboard-hero-actions { display:flex; flex-direction:column; align-items:flex-end; gap:9px; min-width:0; }
  .dashboard-hero-customize {
    min-height:38px; padding:8px 13px; border:1px solid #fff; border-radius:7px;
    background:#fff; color:var(--primary-dark); box-shadow:0 3px 9px rgba(0,41,67,.16); font-size:12px; font-weight:760;
  }
  .dashboard-hero-customize:hover,
  .dashboard-hero-customize:focus-visible { background:var(--primary-soft); border-color:#fff; color:var(--primary-dark); box-shadow:0 4px 12px rgba(0,41,67,.22); transform:none; }
  .dashboard-hero-customize[aria-pressed="true"] { background:var(--primary-soft); border-color:#fff; color:var(--primary-dark); }
  .dashboard-customize {
    display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 20px; align-items:center; margin:0 0 12px; padding:15px 16px;
    border:1px solid var(--primary); border-radius:var(--radius); background:var(--primary-soft); box-shadow:var(--shadow);
  }
  .dashboard-customize[hidden] { display:none; }
  .dashboard-customize strong { color:var(--ink); font-size:15px; }
  .dashboard-customize p { margin:3px 0 0; color:var(--ink-2); font-size:12px; }
  .dashboard-customize-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
  .dashboard-widget-picker { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; padding-top:12px; border-top:1px solid color-mix(in srgb,var(--primary) 28%,var(--line)); }
  .dashboard-widget-picker[hidden] { display:none; }
  .dashboard-widget-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
  .dashboard-widget { position:relative; min-width:0; grid-column:span 6; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
  .dashboard-widget[data-widget-size="compact"] { grid-column:span 4; }
  .dashboard-widget[data-widget-size="wide"] { grid-column:span 6; }
  .dashboard-widget[data-widget-size="full"] { grid-column:1 / -1; }
  .dashboard-widget.is-dragging { opacity:.45; transform:scale(.985); }
  .dashboard-widget.drag-before { box-shadow:-6px 0 0 var(--primary),var(--shadow-lg); }
  .dashboard-widget.drag-after { box-shadow:6px 0 0 var(--primary),var(--shadow-lg); }
  .dashboard-widget-editor { display:none; align-items:center; flex-wrap:wrap; gap:5px; min-height:42px; padding:6px 8px; border-bottom:1px solid var(--line); background:var(--surface-2); }
  .dashboard-widget-grid.is-editing .dashboard-widget-editor { display:flex; }
  .dashboard-widget-grid.is-editing .dashboard-widget-body { pointer-events:none; opacity:.88; }
  .dashboard-widget-grip { display:inline-flex; flex:1 1 140px; align-items:center; gap:7px; margin-right:auto; color:var(--ink-2); font-size:12px; font-weight:760; cursor:grab; touch-action:none; user-select:none; }
  .dashboard-widget-grip::before { content:'⋮⋮'; color:var(--primary); font-size:19px; letter-spacing:-5px; }
  .dashboard-widget-editor button { min-width:36px; min-height:32px; padding:4px 8px; }
  .dashboard-widget-editor .dashboard-empty-toggle[aria-pressed="true"] { border-color:var(--primary); background:var(--primary-soft); color:var(--primary-dark); }
  .dashboard-widget.is-empty-preview .dashboard-widget-body { opacity:.48; filter:saturate(.55); }
  .dashboard-widget-body { min-width:0; }
  .dashboard-widget.metric .dashboard-widget-body { min-height:116px; padding:17px 18px; border-top:4px solid var(--primary); }
  .dashboard-widget.metric[data-dashboard-action] { cursor:pointer; }
  .dashboard-widget.metric[data-dashboard-action]:hover { border-color:color-mix(in srgb,var(--primary) 48%,var(--line)); box-shadow:var(--shadow-lg); transform:translateY(-1px); }
  .dashboard-widget.metric[data-dashboard-action]:focus-visible { outline:3px solid color-mix(in srgb,var(--primary) 34%,transparent); outline-offset:3px; }
  .dashboard-widget-grid.is-editing .dashboard-widget[data-dashboard-action] { cursor:default; transform:none; }
  .dashboard-widget.metric.success .dashboard-widget-body { border-top-color:var(--success); }
  .dashboard-widget.metric.accent .dashboard-widget-body { border-top-color:var(--accent); }
  .dashboard-widget .home-review-panel,.dashboard-widget .home-activity-panel,.dashboard-widget .home-work-grid { margin:0; border:0; border-radius:0; box-shadow:none; }
  .dashboard-widget .home-space-list { padding:10px; }
  .dashboard-widget-list { display:grid; gap:0; padding:4px 14px 12px; }
  .dashboard-summary-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 4px; border-bottom:1px solid var(--line); }
  .dashboard-summary-row:last-child { border-bottom:0; }
  .dashboard-summary-row strong { display:block; color:var(--ink); font-size:13px; }
  .dashboard-summary-row span { display:block; margin-top:3px; color:var(--muted); font-size:12px; line-height:1.35; }
  .dashboard-summary-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
  .dashboard-request-history-row { width:100%; color:inherit; text-align:left; background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none; cursor:pointer; }
  .dashboard-request-history-row:hover { background:var(--surface-2); transform:none; }
  .dashboard-request-history-row:focus-visible { outline:3px solid color-mix(in srgb,var(--primary) 30%,transparent); outline-offset:-3px; }
  .dashboard-request-history-row:last-child { border-bottom:0; }
  .request-detail-modal { max-width:700px; }
  .request-detail-status { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:15px; border:1px solid var(--line); border-left:4px solid var(--primary); border-radius:var(--radius-sm); background:var(--surface-2); }
  .request-detail-status h3 { margin:0; color:var(--ink); font-size:18px; }
  .request-detail-status p { margin:5px 0 0; color:var(--ink-2); font-size:13px; line-height:1.4; }
  .request-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px; }
  .request-detail-fact { min-width:0; padding:11px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); }
  .request-detail-fact span { display:block; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
  .request-detail-fact strong { display:block; margin-top:4px; color:var(--ink); font-size:13px; overflow-wrap:anywhere; }
  .request-detail-items { display:grid; gap:10px; margin-top:14px; }
  .request-detail-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:13px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); }
  .request-detail-item h4 { margin:0; color:var(--ink); font-size:14px; }
  .request-detail-item p { margin:4px 0 0; color:var(--ink-2); font-size:12px; line-height:1.4; }
  .request-detail-item-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
  .request-detail-item-meta span { margin:0; }
  .request-detail-note { margin-top:12px; padding:12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); color:var(--ink-2); font-size:13px; line-height:1.45; white-space:pre-wrap; }
  .personal-wip-widget-head { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:10px 14px 0; }
  .personal-wip-widget-head button { min-height:36px; }
  .personal-wip-modal { max-width:980px; }
  .personal-wip-modal .modal-head > div { min-width:0; }
  .personal-wip-modal .modal-head p { margin:3px 0 0; color:var(--muted); font-size:12px; line-height:1.4; }
  .personal-wip-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
  .personal-wip-stat { min-width:0; padding:13px 14px; border:1px solid var(--line); border-top:4px solid var(--primary); border-radius:var(--radius-sm); background:var(--surface-2); }
  .personal-wip-stat.warning { border-top-color:var(--accent); }
  .personal-wip-stat.urgent { border-top-color:var(--danger); }
  .personal-wip-stat span { display:block; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
  .personal-wip-stat strong { display:block; margin-top:4px; color:var(--ink); font-size:24px; line-height:1; }
  .personal-wip-toolbar { position:sticky; top:0; z-index:3; display:grid; grid-template-columns:minmax(180px,1fr) auto; gap:10px; align-items:center; margin:0 0 12px; padding:10px; border:1px solid var(--line); border-radius:var(--radius-sm); background:color-mix(in srgb,var(--surface) 94%,transparent); box-shadow:var(--shadow-sm); backdrop-filter:blur(8px); }
  .personal-wip-toolbar input { width:100%; }
  .personal-wip-guidance { margin-bottom:14px; padding:12px 14px; border:1px solid color-mix(in srgb,var(--primary) 28%,var(--line)); border-radius:var(--radius-sm); background:var(--primary-soft); color:var(--ink-2); font-size:12px; line-height:1.5; }
  .personal-wip-guidance strong { color:var(--ink); }
  .personal-wip-legend { display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }
  .personal-wip-age { display:inline-flex; align-items:center; min-height:24px; padding:3px 8px; border:1px solid var(--line); border-radius:6px; background:var(--surface-2); color:var(--ink-2); font-size:10px; font-weight:800; white-space:nowrap; }
  .personal-wip-age.current { border-color:color-mix(in srgb,var(--success) 42%,var(--line)); background:color-mix(in srgb,var(--success) 12%,var(--surface)); color:var(--success-dark); }
  .personal-wip-age.caution { border-color:color-mix(in srgb,var(--accent) 50%,var(--line)); background:color-mix(in srgb,var(--accent) 15%,var(--surface)); color:color-mix(in srgb,var(--accent) 70%,var(--ink)); }
  .personal-wip-age.urgent { border-color:color-mix(in srgb,var(--danger) 42%,var(--line)); background:color-mix(in srgb,var(--danger) 10%,var(--surface)); color:var(--danger); }
  .personal-wip-groups { display:grid; gap:12px; }
  .personal-wip-so { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-sm); }
  .personal-wip-so-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:13px 15px; border-bottom:1px solid var(--line); background:var(--surface-2); }
  .personal-wip-so-head h3 { margin:0; color:var(--ink); font-size:16px; }
  .personal-wip-so-head p { margin:3px 0 0; color:var(--muted); font-size:11px; }
  .personal-wip-so-total { color:var(--ink-2); font-size:12px; font-weight:800; white-space:nowrap; }
  .personal-wip-row { display:grid; grid-template-columns:minmax(160px,.8fr) minmax(220px,1.3fr) minmax(150px,.7fr); gap:14px; align-items:center; padding:13px 15px; border-bottom:1px solid var(--line); }
  .personal-wip-row:last-child { border-bottom:0; }
  .personal-wip-part strong { display:block; color:var(--ink); font:750 13px ui-monospace,SFMono-Regular,Consolas,monospace; }
  .personal-wip-part span,.personal-wip-copy span { display:block; margin-top:4px; color:var(--muted); font-size:11px; line-height:1.4; }
  .personal-wip-copy strong { display:block; color:var(--ink); font-size:13px; line-height:1.35; }
  .personal-wip-status { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
  .personal-wip-status .badge { margin:0; }
  .personal-wip-empty { padding:34px 20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-2); color:var(--muted); text-align:center; }
  @media (max-width:1000px) {
    .dashboard-widget[data-widget-size="compact"] { grid-column:span 6; }
  }
  @media (max-width:720px) {
    .dashboard-hero-actions { width:100%; align-items:flex-start; }
    .dashboard-hero-customize { min-height:40px; }
    .dashboard-customize { grid-template-columns:1fr; }
    .dashboard-customize-actions { justify-content:flex-start; }
    .dashboard-widget,.dashboard-widget[data-widget-size="compact"],.dashboard-widget[data-widget-size="wide"],.dashboard-widget[data-widget-size="full"] { grid-column:1 / -1; }
    .dashboard-widget-editor button { min-width:42px; min-height:38px; }
    .dashboard-summary-row { grid-template-columns:1fr; }
    .dashboard-summary-actions { justify-content:flex-start; }
    .request-detail-grid { grid-template-columns:1fr; }
    .request-detail-item { grid-template-columns:1fr; }
    .request-detail-item button { width:100%; min-height:44px; }
    .personal-wip-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .personal-wip-toolbar { grid-template-columns:1fr; }
    .personal-wip-toolbar button { width:100%; }
    .personal-wip-row { grid-template-columns:1fr; gap:8px; }
    .personal-wip-status { justify-content:flex-start; }
  }
  .home-admin-tools { margin:0 0 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-lg); overflow:hidden; }
  .home-admin-tools-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:18px; background:var(--surface-2); border-bottom:1px solid var(--line); }
  .home-admin-tools-head h2 { margin:2px 0 0; font-size:20px; color:var(--ink); }
  .home-admin-tools-head p { margin:5px 0 0; color:var(--ink-2); font-size:13px; line-height:1.35; }
  .operations-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; padding:14px; }
  .home-admin-tools.management-tools .operations-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .operations-card { min-height:178px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:15px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); }
  .operations-card h3 { margin:0; color:var(--ink); font-size:16px; }
  .operations-card p { margin:0 0 2px; color:var(--ink-2); font-size:12px; line-height:1.36; }
  .operations-card .operations-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; }
  .operations-card .operations-actions button { border-color:var(--line-strong); }
  .operations-advanced { width:100%; margin-top:4px; border-top:1px solid var(--line); }
  .operations-advanced > summary { padding:10px 0 0; color:var(--primary-dark); font-size:11px; font-weight:780; cursor:pointer; }
  .operations-advanced[open] > summary { margin-bottom:9px; }
  .operations-advanced .operations-actions { margin-top:0; }

  /* ===== Management impact dashboard ===== */
  .management-impact-modal { width:min(1180px, calc(100vw - 28px)); max-width:1180px; }
  .management-impact-modal .modal-head { align-items:flex-start; }
  .management-impact-modal .modal-head p { margin:3px 0 0; color:var(--muted); font-size:13px; }
  .management-impact-body { display:grid; gap:20px; padding:20px; }
  .impact-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; padding-bottom:10px; border-bottom:1px solid var(--line); }
  .impact-section-head h3 { margin:0; color:var(--ink); font-size:18px; }
  .impact-section-head p { max-width:660px; margin:4px 0 0; color:var(--muted); font-size:12px; line-height:1.45; }
  .impact-story { display:grid; grid-template-columns:minmax(0, 1.45fr) repeat(2, minmax(150px, .55fr)); gap:1px; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--line); box-shadow:var(--shadow-sm); }
  .impact-story-main, .impact-story-fact { min-width:0; padding:18px; background:var(--surface); }
  .impact-story-main { background:var(--primary); color:#fff; }
  .impact-story-eyebrow { font-size:11px; font-weight:850; letter-spacing:.09em; text-transform:uppercase; opacity:.78; }
  .impact-story-value { margin-top:6px; font-size:clamp(30px, 4vw, 48px); font-weight:850; line-height:1; letter-spacing:-.045em; }
  .impact-story-copy { max-width:520px; margin-top:8px; font-size:13px; line-height:1.45; opacity:.88; }
  .impact-story-fact { display:flex; flex-direction:column; justify-content:center; }
  .impact-story-fact strong { color:var(--ink); font-size:27px; line-height:1; letter-spacing:-.025em; }
  .impact-story-fact span { margin-top:7px; color:var(--ink-2); font-size:12px; line-height:1.35; }
  .impact-kpis { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
  .impact-kpi { position:relative; min-width:0; overflow:hidden; padding:15px 14px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); }
  .impact-kpi::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:var(--primary); }
  .impact-kpi:nth-child(3n + 2)::before { background:var(--success); }
  .impact-kpi:nth-child(3n)::before { background:var(--accent); }
  .impact-kpi-label { color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
  .impact-kpi-value { margin-top:5px; color:var(--ink); font-size:25px; font-weight:800; line-height:1.05; letter-spacing:-.03em; }
  .impact-kpi-copy { margin-top:5px; color:var(--ink-2); font-size:12px; line-height:1.35; }
  .impact-chart-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
  .impact-chart { min-width:0; padding:15px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); }
  .impact-chart.wide { grid-column:1 / -1; }
  .impact-chart h3 { margin:0; color:var(--ink); font-size:15px; }
  .impact-chart p { margin:3px 0 12px; color:var(--muted); font-size:12px; line-height:1.35; }
  .impact-chart-visual { width:100%; min-width:0; overflow-x:auto; overscroll-behavior-inline:contain; }
  .impact-chart svg { display:block; width:100%; height:auto; overflow:visible; }
  .impact-chart .impact-grid-line { stroke:var(--line); stroke-width:1; }
  .impact-chart .impact-axis-text { fill:var(--muted); font:11px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
  .impact-chart .impact-value-text { fill:var(--ink-2); font:600 11px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
  .impact-chart .impact-bar { fill:var(--primary); }
  .impact-chart .impact-line { fill:none; stroke:var(--primary); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }
  .impact-chart .impact-line-dot { fill:var(--surface); stroke:var(--primary); stroke-width:3; }
  .impact-chart .impact-secondary { fill:var(--accent); }
  .impact-chart .impact-donut-main { fill:var(--primary); }
  .impact-chart .impact-donut-rest { fill:var(--line-strong); }
  .impact-mobile-visual { display:none; margin:4px 0 8px; }
  .impact-mobile-visual svg { width:100%; height:72px; }
  .impact-mobile-visual .impact-mobile-area { fill:var(--primary-soft); }
  .impact-mobile-visual .impact-mobile-line { fill:none; stroke:var(--primary); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
  .impact-mobile-progress { display:none; width:100%; height:12px; margin:4px 0 10px; overflow:hidden; border:0; border-radius:999px; background:var(--line-strong); appearance:none; }
  .impact-mobile-progress::-webkit-progress-bar { border-radius:999px; background:var(--line-strong); }
  .impact-mobile-progress::-webkit-progress-value { border-radius:999px; background:var(--primary); }
  .impact-mobile-progress::-moz-progress-bar { border-radius:999px; background:var(--primary); }
  .impact-legend { display:flex; flex-wrap:wrap; gap:12px; margin-top:7px; color:var(--ink-2); font-size:12px; }
  .impact-legend span { display:inline-flex; align-items:center; gap:6px; }
  .impact-legend i { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--primary); }
  .impact-legend i.rest { background:var(--line-strong); }
  .impact-legend i.accent { background:var(--accent); }
  .impact-empty { min-height:160px; display:grid; place-items:center; padding:20px; color:var(--muted); font-size:13px; text-align:center; }
  .impact-mobile-data { display:none; margin:0; }
  .impact-mobile-row { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); }
  .impact-mobile-row:last-child { border-bottom:0; }
  .impact-mobile-row dt { min-width:0; margin:0; color:var(--ink-2); font-size:12px; line-height:1.35; }
  .impact-mobile-row dd { margin:0; color:var(--ink); font-size:12px; font-weight:800; text-align:right; white-space:nowrap; }
  .impact-method { margin:0; padding:12px 14px; border-left:3px solid var(--primary); background:var(--primary-soft); color:var(--ink-2); font-size:12px; line-height:1.45; }
  .impact-readable-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .impact-readable-card { min-width:0; overflow:hidden; padding:16px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); }
  .impact-readable-card.wide { grid-column:1 / -1; }
  .impact-readable-card h3 { margin:0; color:var(--ink); font-size:16px; }
  .impact-readable-card > p { margin:4px 0 14px; color:var(--muted); font-size:12px; line-height:1.45; }
  .impact-status-grid { display:grid; grid-template-columns:minmax(150px,.55fr) minmax(0,1fr); gap:18px; align-items:center; }
  .impact-status-rate { display:grid; place-items:center; min-height:150px; border-radius:var(--radius-sm); background:var(--primary-soft); text-align:center; }
  .impact-status-rate strong { display:block; color:var(--primary); font-size:44px; line-height:1; letter-spacing:-.05em; }
  .impact-status-rate span { display:block; margin-top:7px; color:var(--ink-2); font-size:12px; }
  .impact-exact-list { display:grid; gap:10px; }
  .impact-exact-row { display:grid; grid-template-columns:minmax(70px,90px) minmax(44px,1fr) minmax(0,max-content); gap:8px; align-items:center; }
  .impact-exact-row-label { color:var(--ink-2); font-size:12px; font-weight:700; }
  progress.impact-exact-track { width:100%; height:10px; overflow:hidden; border:0; border-radius:999px; background:var(--surface-2); appearance:none; }
  progress.impact-exact-track::-webkit-progress-bar { border-radius:999px; background:var(--surface-2); }
  progress.impact-exact-track::-webkit-progress-value { min-width:2px; border-radius:999px; background:var(--primary); }
  progress.impact-exact-track::-moz-progress-bar { min-width:2px; border-radius:999px; background:var(--primary); }
  .impact-exact-row-value { min-width:0; color:var(--ink); font-size:12px; font-weight:800; text-align:right; white-space:normal; overflow-wrap:anywhere; }
  .impact-exact-list.accent progress.impact-exact-track::-webkit-progress-value { background:var(--accent); }
  .impact-exact-list.accent progress.impact-exact-track::-moz-progress-bar { background:var(--accent); }
  .impact-exact-list.success progress.impact-exact-track::-webkit-progress-value { background:var(--success); }
  .impact-exact-list.success progress.impact-exact-track::-moz-progress-bar { background:var(--success); }
  .impact-source-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .impact-source-summary > div { padding:12px; border-radius:var(--radius-sm); background:var(--surface-2); }
  .impact-source-summary strong { display:block; color:var(--ink); font-size:20px; }
  .impact-source-summary span { display:block; margin-top:4px; color:var(--muted); font-size:11px; line-height:1.35; }

  .spl-creator-modal { width:min(940px,calc(100vw - 28px)); max-width:940px; }
  .spl-creator-modal .modal-head p { margin:3px 0 0; }
  .spl-creator-modal .modal-body { display:grid; gap:16px; min-height:0; }
  #splCeEmployeeBadge { max-width:190px; padding:6px 9px; border-radius:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* SPL batch scanning deliberately mirrors the compact Add Parts receipt,
     using theme surfaces rather than the retired dark terminal treatment. */
  .spl-scan-console { overflow:hidden; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); }
  .spl-scan-status { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:42px; padding:10px 14px; background:var(--primary-soft); color:var(--ink); border-bottom:1px solid var(--line); font-size:12px; }
  .spl-scan-status span:first-child { display:flex; align-items:center; gap:8px; font-weight:800; }
  .spl-scan-status i { width:9px; height:9px; border-radius:50%; background:#61e5ad; box-shadow:0 0 0 4px rgba(97,229,173,.17); animation:scanReadyPulse 2s ease-in-out infinite; }
  .spl-scan-status span:first-child { color:var(--ink); }
  .spl-scan-status span:last-child { color:var(--muted); }
  .spl-scan-grid { display:grid; grid-template-columns:1fr; gap:11px; padding:14px; background:transparent; }
  .spl-scan-grid .field { gap:6px; }
  .spl-scan-grid .field > :first-child, .spl-scan-condition legend { color:var(--muted); }
  .spl-scan-condition { margin:0; padding:0; border:0; min-width:0; }
  .spl-scan-condition legend { margin-bottom:6px; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
  .spl-condition-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
  .spl-condition-choice { position:relative; display:flex; align-items:center; justify-content:center; min-height:39px; padding:6px 8px; border:1px solid var(--line-strong); border-radius:6px; background:var(--surface-2); color:var(--ink-2); font-size:11px; font-weight:800; text-align:center; cursor:pointer; }
  .spl-condition-choice input { position:absolute; opacity:0; pointer-events:none; }
  .spl-condition-choice:hover { background:var(--primary-soft); }
  .spl-condition-choice:has(input:checked) { border-color:var(--primary); background:var(--surface); color:var(--primary-dark); box-shadow:0 2px 8px rgba(0,72,118,.12); }
  .spl-condition-choice:focus-within { outline:2px solid color-mix(in srgb,var(--primary) 45%,transparent); outline-offset:2px; }
  .spl-field-guidance { display:block; min-width:0; max-width:100%; color:var(--muted); font-size:11px; font-weight:500; line-height:1.4; text-transform:none; letter-spacing:0; white-space:normal; overflow-wrap:anywhere; }
  .spl-scan-console > p { margin:0; padding:9px 14px 11px; color:var(--muted); background:var(--surface-2); border-top:1px solid var(--line); white-space:normal; overflow-wrap:anywhere; }
  .spl-input-action { display:grid; grid-template-columns:minmax(0,1fr) 76px; gap:8px; }
  .spl-input-action input, .spl-service-order-entry input { min-width:0; min-height:48px; border-color:var(--line-strong); border-radius:8px; background:var(--surface); color:var(--ink); box-shadow:none; }
  .spl-input-action input { padding-left:42px; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:17px; font-weight:700; letter-spacing:.025em; }
  .spl-input-action input::placeholder, .spl-service-order-entry input::placeholder { color:#6c8394; }
  .spl-input-action input:focus, .spl-service-order-entry input:focus { border-color:var(--primary); outline:3px solid color-mix(in srgb,var(--primary) 22%,transparent); outline-offset:1px; }
  .spl-input-action button { width:76px; min-width:76px; min-height:48px; padding:0 12px; border-color:var(--primary); background:var(--primary); color:#fff; font-weight:800; }
  .spl-input-action button:hover { background:var(--primary-dark); color:#fff; }
  .spl-input-wrap { position:relative; min-width:0; }
  .spl-input-wrap input { width:100%; box-sizing:border-box; }
  .spl-input-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#0879b4; font-size:17px; line-height:1; pointer-events:none; }
  .spl-batch-head { display:flex; align-items:end; justify-content:space-between; gap:12px; }
  .spl-batch-head h3 { margin:3px 0 0; font-size:18px; }
  .spl-batch-list { min-height:100px; max-height:min(42vh,440px); overflow:auto; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); }
  .spl-empty { display:grid; place-items:center; min-height:100px; padding:20px; color:var(--muted); text-align:center; }
  .spl-batch-row { display:grid; grid-template-columns:minmax(130px,.7fr) minmax(210px,1.5fr) minmax(150px,.75fr) auto auto auto auto; gap:10px; align-items:center; padding:11px 12px; border-bottom:1px solid var(--line); }
  .spl-batch-row:last-child { border-bottom:0; }
  .spl-batch-row.is-missing { background:color-mix(in srgb,var(--warn) 8%,var(--surface)); }
  .spl-batch-part { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-weight:800; color:var(--ink); }
  .spl-row-input { min-width:0; width:100%; height:36px; padding:7px 9px; font-size:12px; }
  .spl-disposition-button { min-width:102px; padding:7px 9px; border-radius:var(--chip-radius); font-size:11px; font-weight:800; }
  .spl-far-button { min-width:74px; padding:7px 8px; border-radius:5px; font-size:10px; font-weight:800; white-space:nowrap; }
  .spl-far-button[aria-pressed="false"] { border-color:var(--line-strong); background:var(--surface-2); color:var(--ink-2); }
  .spl-far-button[aria-pressed="true"] { border-color:#c42026; background:#c42026; color:#fff; box-shadow:0 0 0 2px color-mix(in srgb,#c42026 22%,transparent); }
  .spl-far-default { display:flex; align-items:center; gap:9px; min-height:40px; padding:8px 10px; border:1px solid var(--line); border-radius:7px; background:var(--surface-2); color:var(--ink); font-size:11px; font-weight:800; cursor:pointer; }
  .spl-far-default input { width:18px; height:18px; margin:0; accent-color:#c42026; }
  .spl-qty-stepper { display:grid; grid-template-columns:32px 32px 32px; align-items:center; }
  .spl-qty-stepper button { min-width:0; height:32px; padding:0; }
  .spl-qty-stepper strong { text-align:center; font-size:12px; }
  .spl-remove { width:36px; min-width:36px; height:36px; padding:0; color:var(--danger); }
  .spl-batch-footer { display:flex; align-items:center; gap:16px; justify-content:space-between; }
  .spl-batch-footer button { min-width:150px; }

  .wip-source-guidance { display:grid; gap:3px; max-width:850px; }
  .wip-source-guidance strong { color:var(--ink); font-size:13px; }
  .wip-source-guidance span { color:var(--muted); font-size:12px; line-height:1.4; }
  .wip-filter-toolbar { background:var(--surface-2); }
  .home-work-item.notification-focus { position:relative; border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 20%,transparent),var(--shadow-sm); animation:notificationFocusPulse 1.25s ease-in-out 2; }
  .notification-landing-banner { margin:0 0 10px; padding:11px 13px; border-radius:var(--radius-sm); background:var(--primary); color:#fff; font-size:13px; font-weight:800; }
  @keyframes notificationFocusPulse { 50% { transform:translateY(-2px); box-shadow:0 0 0 7px color-mix(in srgb,var(--primary) 14%,transparent),var(--shadow); } }
  @media (max-width:760px) {
    #managementImpactModal { padding:0; place-items:stretch; }
    #managementImpactModal .management-impact-modal { width:100%; max-width:none; height:100dvh; max-height:100dvh; border:0; border-radius:0; }
    #managementImpactModal .modal-head { flex:none; padding:13px 15px; }
    #managementImpactModal .modal-foot { flex:none; padding:10px 12px; }
    #managementImpactModal .modal-foot .tiny { display:none; }
    .impact-kpis { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .impact-chart-grid { grid-template-columns:1fr; }
    .impact-chart.wide { grid-column:auto; }
    .management-impact-body { padding:14px; gap:16px; }
    .impact-section-head { display:block; }
    .impact-chart { padding:13px; }
    .impact-chart-visual { display:none; }
    .impact-story { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .impact-story-main { grid-column:1 / -1; }
    .impact-story-main, .impact-story-fact { padding:15px; }
    .impact-story-fact strong { font-size:23px; }
    .impact-mobile-visual, .impact-mobile-progress { display:block; }
    .impact-mobile-data { display:block; }
    .impact-empty { min-height:90px; }
    .impact-readable-grid { grid-template-columns:1fr; }
    .impact-readable-card.wide { grid-column:auto; }
    .impact-status-grid { grid-template-columns:1fr; }
    .impact-status-rate { min-height:115px; }
    .impact-source-summary { grid-template-columns:1fr; }
    .spl-creator-modal { width:100%; max-width:none; height:100dvh; max-height:100dvh; border:0; border-radius:0; }
    .spl-creator-modal .modal-head { flex:none; }
    .spl-creator-modal .modal-head .badge { display:none; }
    .spl-creator-modal .modal-body { overflow:hidden; grid-template-rows:auto auto minmax(0,1fr) auto; padding:10px; gap:10px; }
    .spl-scan-grid { grid-template-columns:1fr; padding:10px 10px 6px; gap:8px; }
    .spl-condition-options { grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
    .spl-condition-choice { min-height:40px; padding:5px 3px; font-size:10px; }
    .spl-scan-console > p { padding:0 10px 9px; }
    .spl-scan-status { padding:8px 10px; }
    .spl-scan-status span:last-child { white-space:normal; text-align:right; }
    .spl-field-guidance { font-size:10px; line-height:1.35; }
    .spl-batch-head { align-items:center; }
    .spl-batch-head button { padding:8px 10px; font-size:11px; }
    .spl-batch-list { max-height:none; min-height:0; }
    .spl-batch-row { grid-template-columns:minmax(0,1fr) auto auto; gap:7px; padding:10px; }
    .spl-batch-part { grid-column:1; }
    .spl-batch-row .spl-description { grid-column:1 / -1; grid-row:2; }
    .spl-batch-row .spl-service-order { grid-column:1 / -1; grid-row:3; }
    .spl-disposition-button { grid-column:1; grid-row:4; justify-self:start; }
    .spl-far-button { grid-column:2; grid-row:4; }
    .spl-qty-stepper { grid-column:1 / 3; grid-row:5; }
    .spl-remove { grid-column:3; grid-row:4; }
    .spl-batch-footer { gap:9px; }
    .spl-batch-footer span { display:none; }
    .spl-batch-footer button { width:100%; }
    .wip-filter-toolbar { align-items:stretch; }
    .wip-filter-toolbar .search, .wip-filter-toolbar select { width:100%; max-width:none !important; }
  }
  @media (max-width:420px) { .impact-kpis { grid-template-columns:1fr; } .impact-story { grid-template-columns:1fr; } .impact-story-main { grid-column:auto; } }
  @media (max-width:860px) { .operations-grid { grid-template-columns:1fr; } }
  @media (max-width: 860px) { .home-impact-grid, .home-work-grid { grid-template-columns:1fr; } .home-impact-card { min-height:0; } }
  #panel-inventory .home-hero { min-height:0; }
  .inventory-spaces-hero { display:flex; align-items:center; justify-content:space-between; gap:18px; }
  .inventory-spaces-hero > div { min-width:0; }
  .inventory-spaces-hero #inventoryCreateSpaceBtn { display:flex; flex:none; align-items:center; gap:12px; align-self:center; min-width:230px; min-height:68px; padding:12px 18px; margin:0; border:1px solid rgba(255,255,255,.92); border-radius:10px; color:var(--primary-dark); background:#fff; box-shadow:0 9px 22px rgba(0,41,67,.2); text-align:left; }
  .inventory-spaces-hero #inventoryCreateSpaceBtn:hover { color:var(--primary-dark); background:#fff8dc; border-color:#fff8dc; box-shadow:0 11px 26px rgba(0,41,67,.28); transform:translateY(-1px); }
  body[data-theme="agilent-web-dark"] .inventory-spaces-hero #inventoryCreateSpaceBtn { color:#f5fcff; background:#173f52; border-color:#70d4f4; box-shadow:0 9px 24px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.04); }
  body[data-theme="agilent-web-dark"] .inventory-spaces-hero #inventoryCreateSpaceBtn:hover,
  body[data-theme="agilent-web-dark"] .inventory-spaces-hero #inventoryCreateSpaceBtn:focus-visible { color:#fff; background:#205a72; border-color:#b8efff; box-shadow:0 11px 28px rgba(0,0,0,.42), 0 0 0 2px rgba(112,212,244,.16); }
  body[data-theme="agilent-web-dark"] .inventory-spaces-hero #inventoryCreateSpaceBtn .inventory-create-plus { color:#073247; background:#8ee4ff; }
  body[data-theme="agilent-web-dark"] .inventory-spaces-hero #inventoryCreateSpaceBtn .inventory-create-copy small { color:#cceaf4; }
  .inventory-create-plus { position:relative; display:block; flex:0 0 34px; width:34px; height:34px; border-radius:50%; color:#fff; background:var(--primary); }
  .inventory-create-plus::before,
  .inventory-create-plus::after { content:""; position:absolute; top:50%; left:50%; border-radius:999px; background:currentColor; transform:translate(-50%,-50%); }
  .inventory-create-plus::before { width:14px; height:2px; }
  .inventory-create-plus::after { width:2px; height:14px; }
  .inventory-create-copy { display:grid; gap:2px; min-width:0; }
  .inventory-create-copy strong { font-size:16px; font-weight:800; line-height:1.15; }
  .inventory-create-copy small { color:var(--muted); font-size:11px; font-weight:650; line-height:1.25; }
  .tab-section-hero { min-height:0; }
  @media (max-width:560px) { .inventory-spaces-hero { align-items:flex-start; flex-direction:column; gap:14px; } .inventory-spaces-hero #inventoryCreateSpaceBtn { align-self:stretch; width:100%; min-width:0; min-height:62px; } }
  .inventory-directory { display:grid; gap:22px; }
  .inventory-directory-group { display:grid; gap:10px; }
  .inventory-directory-head { display:flex; align-items:baseline; gap:10px; padding:2px 2px 0; }
  .inventory-directory-head h2 { margin:0; color:var(--ink); font-size:20px; letter-spacing:-.02em; }
  .inventory-directory-head p { margin:0; color:var(--muted); font-size:12px; }
  .inventory-directory-empty { padding:14px 2px 2px; color:var(--muted); font-size:13px; }
  #panel-district .panel { overflow: hidden; box-shadow: var(--shadow-lg); }
  .district-search-bar { padding: 16px 18px; background: var(--surface-2); }
  #districtSearch { width: 100%; box-shadow: 0 6px 16px color-mix(in srgb, var(--primary-dark) 12%, transparent); }
  @media (max-width: 700px) { .home-hero { align-items: flex-start; flex-direction: column; } .home-actions, #homeActions:has(> [data-home-tab="inventory"]:only-child) { width:100%; min-width:0; } }
  @media (max-width: 480px) { .home-actions { grid-template-columns:1fr; } button.home-action-tile { min-height:70px; } }

  /* ===== Public cage kiosk ===== */
  .cage-quick-move {
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--primary) 36%, var(--line));
    border-radius: calc(var(--radius) + 2px);
    background: var(--primary-soft);
    box-shadow: var(--shadow);
  }
  .cage-quick-title { margin: 0; font-size: 19px; color: var(--ink); }
  .cage-quick-copy { margin: 4px 0 14px; color: var(--ink-2); }
  .cage-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
  .cage-quick-mode { min-height: 48px; font-size: 15px; font-weight: 750; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
  .cage-quick-mode.active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 5px 14px color-mix(in srgb, var(--primary) 30%, transparent); }
  .cage-quick-input { width: 100%; min-height: 54px; box-sizing: border-box; font-family: var(--mono); font-size: 18px; font-weight: 700; letter-spacing: .02em; text-align: center; }
  .cage-quick-hint { margin: 8px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
  .cage-quick-feedback { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--success-soft); color: var(--success); font-weight: 650; }
  .cage-quick-choices { display: grid; gap: 8px; margin-top: 12px; }
  .cage-quick-choice { width: 100%; min-height: 48px; text-align: left; background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
  .cage-quick-choice:hover { border-color: var(--primary); background: var(--primary-soft); }
  @media (max-width: 420px) { .cage-quick-actions { grid-template-columns: 1fr; } }

  /* ===== Stats ===== */
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
  }
  .stat-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow);
  }
  .stat-card .label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
  }
  .stat-card .value {
    font-size: 26px;
    font-weight: 700;
    color: var(--ink);
    margin-top: 4px;
    line-height: 1.1;
  }
  .stat-card .sub {
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
  }
  .stat-card.accent { border-color: var(--primary); background: var(--primary-soft); }
  .stat-card.accent .value { color: var(--primary-dark); }
  .stat-card.success { border-color: var(--success); }
  .stat-card.success .value { color: var(--success); }

  /* ===== Tables ===== */
  .table-wrap { overflow-x: auto; background:var(--surface); border-radius:var(--radius-sm); }
  table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background:var(--surface);
  }
  table.data thead th {
    text-align: left;
    padding: 9px 12px;
    background: var(--surface-2);
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    position: sticky;
    top: 0;
    cursor: default;
  }
  table.data thead th.sortable { cursor: pointer; user-select: none; }
  table.data thead th.sortable:hover { color: var(--ink); }
  table.data thead th .arrow { opacity: .5; margin-left: 4px; font-size: 10px; }
  table.data thead th.sorted .arrow { opacity: 1; color: var(--primary); }
  table.data tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
  }
  table.data tbody tr { transition:background .13s ease; }
  table.data tbody tr:last-child td { border-bottom:0; }
  table.data tbody tr:hover { background: var(--surface-2); }
  table.data tbody tr.selected { background: var(--success-soft); }
  /* A district write-off match is an attention state, not a light-theme-only yellow fill. */
  table.data tbody tr.matched { background:color-mix(in srgb, var(--warn-soft) 62%, var(--surface)); }
  table.data tbody tr.matched:hover { background:color-mix(in srgb, var(--warn-soft) 84%, var(--surface)); }
  table.data .pn { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; color: var(--ink); }
  table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
  table.data .empty-row td { text-align: center; color: var(--muted); padding: 28px 12px; }
  table.data .muted { color: var(--muted); }

  /* Operational lists share the staged-return table language: a calm header
     band, generous row rhythm, and a stable column grid.  A list should never
     turn into a compressed, half-hidden desktop table on a phone. */
  table.data.operational-list { border-collapse:separate; border-spacing:0; }
  table.data.operational-list thead th { padding:10px 16px; background:var(--surface-2); }
  table.data.operational-list tbody td { padding:10px 16px; }
  table.data.operational-list tbody tr:hover { background:var(--surface-2); }

  /* ===== Badges ===== */
  .badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--chip-radius);
    font-size: 11px;
    font-weight: 600;
    background: var(--surface-2);
    color: var(--ink-2);
    border: 1px solid var(--line);
  }
  .badge.success { background: var(--success-soft); color: var(--success); border-color: #bbf7d0; }
  .badge.warn    { background: var(--warn-soft);    color: var(--warn);    border-color: #fde68a; }
  .badge.danger  { background: var(--danger-soft);  color: var(--danger);  border-color: #fecaca; }
  .badge.info    { background: var(--info-soft);    color: var(--info);    border-color: #bfdbfe; }
  .badge.purple  { background: var(--purple-soft);  color: var(--purple);  border-color: #ddd6fe; }
  .badge.accent  { background: var(--primary-soft); color: var(--primary-dark); border-color: #b6dfea; }

  /* Disposition chips */
  .gemini-suggest { display: inline-block; margin-left: 4px; font-size: 13px;
    opacity: 0.65; transition: opacity .12s; vertical-align: middle; }
  .gemini-suggest:hover { opacity: 1; filter: drop-shadow(0 0 2px #5B9BD5); }
  .gemini-suggest.gemini-spin { animation: gem-spin 1s linear infinite; opacity: 1; }
  @keyframes gem-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
  /* Description cell: clickable to open full edit modal, amber for unverified */
  .desc-cell { position: relative; cursor: pointer; }
  .missing-description { color:var(--warn); background:var(--warn-soft); border:1px dashed color-mix(in srgb, var(--warn) 45%, var(--line)); border-radius:5px; padding:3px 6px; font-style:italic; font-weight:650; }
  .stock-trace { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
  .stock-trace .badge { font-size:10px; }
  .stock-expired { color:var(--danger); background:var(--danger-soft); border-color:color-mix(in srgb,var(--danger) 42%,var(--line)); }
  .stock-expiring { color:var(--warn); background:var(--warn-soft); border-color:color-mix(in srgb,var(--warn) 42%,var(--line)); }
  .desc-unverified { background: #fff8e1; border-radius: 4px; padding: 1px 4px; }
  .desc-unverified .warn-mark { color: #c80; font-weight: 700; margin-right: 2px; }
  /* Bulk review list */
  .review-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
  .review-item .ri-mat { font-family: var(--mono); font-weight: 600; min-width: 120px; }
  .review-item .ri-desc { flex: 1; }
  .review-item .ri-conf { font-size: 11px; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
  .ri-conf.confident { background: #e8f5e9; color: #2e7d32; }
  .ri-conf.uncertain { background: #fff8e1; color: #c80; }
  .ri-conf.none { background: #fafafa; color: #999; }
  /* FedEx tracking status badges */
  .track-badge { font-size: 11px; padding: 2px 8px; border-radius: 4px; white-space: nowrap; font-weight: 600; }
  .track-delivered { background: var(--success-soft); color: var(--success); }
  .track-intransit { background: var(--info-soft); color: var(--info); }
  .track-pending { background: var(--warn-soft); color: var(--warn); }
  .track-error { background: var(--danger-soft); color: var(--danger); }
  .track-unknown { background: #f0f0f0; color: #888; }
  /* Travel history list */
  .travel-history { max-height: 200px; overflow-y: auto; margin-top: 6px; }
  .travel-event { display: flex; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
  .travel-event .te-date { color: var(--muted); min-width: 130px; }
  .travel-event .te-loc { color: var(--ink-2); margin-left: auto; }
  .disp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 2px 8px;
    width: 124px;
    min-width: 124px;
    text-align: center;
    white-space: nowrap;
    border-radius: var(--chip-radius);
    font-size: 12px;
    font-weight: 720;
    border: 1px solid;
    box-sizing: border-box;
  }
  .disp::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
  }
  .disp-new      { background: var(--success-soft); color: var(--success); border-color: #bbf7d0; }
  .disp-open     { background: var(--warn-soft);    color: var(--warn);    border-color: #fde68a; }
  .disp-defoa    { background: var(--purple-soft);  color: var(--purple);  border-color: #ddd6fe; }
  .disp-bad      { background: var(--danger-soft);  color: var(--danger);  border-color: #fecaca; }
  .disp[style*="cursor"] { transition: transform .1s, box-shadow .1s; }
  .disp[style*="cursor"]:hover { transform: scale(1.05); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
  /* Same hover animation for shared/private badges that are clickable */
  .badge[style*="cursor"] { transition: transform .1s, box-shadow .1s; }
  .badge[style*="cursor"]:hover { transform: scale(1.05); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
  /* Qty cell — plain number in the table. Click to enter "editing" mode
     (highlighted), then arrow up/down to change. Click elsewhere or Enter to commit. */
  .qty-cell { text-align: right; cursor: pointer; user-select: none; }
  .qty-cell.editing {
    background: var(--primary-soft);
    border-radius: 4px;
    box-shadow: inset 0 0 0 1.5px var(--primary);
  }
  .qty-cell.editing strong { color: var(--primary-dark); }
  .stock-qty-trigger {
    display:inline-flex; align-items:center; justify-content:center; gap:5px;
    min-width:48px; min-height:38px; padding:6px 9px;
    border:1px solid var(--line-strong); border-radius:7px;
    background:var(--surface); color:var(--primary-dark); box-shadow:none;
    font-variant-numeric:tabular-nums;
  }
  .stock-qty-trigger::after { content:'\270E'; color:var(--muted); font-size:11px; transform:rotate(90deg); }
  .stock-qty-trigger:hover, .stock-qty-trigger:focus-visible { background:var(--primary-soft); border-color:var(--primary); transform:none; }
  .stock-qty-trigger strong { font-size:15px; }
  .claimed-row { opacity: .45; }
  .claimed-row td { text-decoration: line-through; }

  /* ===== Toolbar ===== */
  .toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
  }
  .toolbar .search {
    flex: 1;
    min-width: 200px;
    max-width: 380px;
  }
  .toolbar .spacer { flex: 1; }
  .column-picker { position: relative; }
  .column-picker summary { list-style:none; cursor:pointer; white-space:nowrap; }
  .column-picker summary::-webkit-details-marker { display: none; }
  .column-picker-trigger { display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:7px 11px; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface); color:var(--primary-dark); box-shadow:var(--shadow-sm); font-size:12px; font-weight:760; }
  .column-picker-trigger::before { content:'\2637'; font-size:15px; line-height:1; }
  .column-picker-trigger::after { content:'\25BE'; color:var(--muted); font-size:10px; }
  .column-picker[open] .column-picker-trigger, .column-picker-trigger:hover { border-color:var(--primary); background:var(--primary-soft); }
  .column-picker-menu {
    position: absolute; right: 0; z-index: 12; min-width: 150px;
    padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--surface); box-shadow: var(--shadow); white-space: nowrap;
  }
  .column-picker-menu label { display: flex; gap: 7px; align-items: center; font-size: 13px; }
  .stock-selection-bar { display:flex; flex:1 0 100%; width:100%; align-items:flex-end; gap:12px; padding:12px; border:1px solid var(--line); border-left:4px solid var(--primary); border-radius:8px; background:var(--surface); box-shadow:var(--shadow-sm); }
  .stock-selection-summary { flex:1 1 210px; min-width:190px; }
  .stock-selection-summary strong { display:block; margin-top:2px; color:var(--ink); font-size:14px; }
  .stock-selection-summary small { display:block; margin-top:3px; color:var(--muted); font-size:11px; line-height:1.3; }
  .stock-selection-action { display:grid; flex:0 1 390px; gap:5px; min-width:260px; }
  .stock-selection-action > label { color:var(--ink-2); font-size:11px; font-weight:780; line-height:1.2; }
  .stock-selection-action > label small { margin-left:4px; color:var(--muted); font-size:10px; font-weight:600; }
  .stock-selection-controls { display:flex; align-items:center; gap:6px; min-width:0; }
  .stock-selection-controls select { min-width:0; min-height:36px; flex:1 1 auto; padding:6px 9px; }
  .stock-selection-controls button { flex:none; min-height:36px; }
  .stock-selection-delete { flex:none; min-height:36px; }
  .stock-visibility-col { width:118px; min-width:118px; }
  .stock-visibility-col .badge { display:inline-flex; align-items:center; white-space:nowrap; }
  @media (max-width:900px) {
    .stock-selection-bar { align-items:stretch; flex-direction:column; }
    .stock-selection-summary, .stock-selection-action { flex:none; width:100%; min-width:0; }
    .stock-selection-delete { align-self:flex-start; }
  }
  input[type="search"]::-webkit-search-cancel-button { display:none; -webkit-appearance:none; appearance:none; }
  .part-search-results { min-width:0; }
  .part-search-heading { margin:0; padding:12px 16px; background:var(--primary-soft); color:var(--primary-dark); border-bottom:1px solid var(--line-strong); font-size:12px; font-weight:850; letter-spacing:.04em; }
  .part-search-section + .part-search-section { border-top:1px solid var(--line-strong); }
  .part-search-list { display:grid; }
  .part-search-result { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 3fr); align-items:center; gap:8px 20px; width:100%; min-width:0; min-height:60px; padding:14px 16px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:var(--surface); color:var(--ink); box-shadow:none; text-align:left; white-space:normal; }
  .part-search-result:last-child { border-bottom:0; }
  .part-search-result:hover { background:var(--primary-soft); transform:none; box-shadow:none; }
  .part-search-result:focus-visible { outline:2px solid var(--primary); outline-offset:-3px; background:var(--primary-soft); }
  .part-search-number { min-width:0; overflow-wrap:anywhere; white-space:normal; font-weight:800; }
  .part-search-description { min-width:0; overflow-wrap:anywhere; color:var(--muted); font-size:14px; line-height:1.4; font-weight:400; }
  .part-search-empty { margin:16px; padding:20px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--surface-2); color:var(--ink); overflow-wrap:anywhere; }
  .part-search-empty p { margin:6px 0 0; color:var(--muted); font-size:14px; line-height:1.5; }
  @media (max-width:620px) { .part-search-result { grid-template-columns:minmax(0, 1fr); gap:4px; padding:13px 14px; } .part-search-heading { padding:11px 14px; } .part-search-empty { margin:12px; padding:16px; } }
  .advanced-filter-trigger { display:inline-flex; align-items:center; gap:7px; min-height:36px; white-space:nowrap; }
  .advanced-filter-trigger.is-active { border-color:var(--primary); background:var(--primary-soft); }
  .advanced-filter-form { display:grid; gap:14px; }
  .advanced-filter-row { display:grid; grid-template-columns:minmax(150px, .75fr) minmax(0, 1.25fr); gap:14px; align-items:end; padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); }
  .advanced-filter-enable { display:flex; align-items:center; gap:9px; min-height:42px; font-weight:750; }
  .advanced-filter-enable input { width:auto; }
  .stock-manager-capability { width:100%; margin-top:2px; color:rgba(255,255,255,.78); font-size:11px; line-height:1.35; }
  .space-config-trigger { min-height:38px; padding:7px 12px !important; display:inline-flex !important; align-items:center; justify-content:center; gap:7px; border-radius:var(--radius-sm) !important; font-size:12px !important; font-weight:750; line-height:1; }
  .space-config-trigger .space-config-icon { font-size:16px; line-height:1; }
  .space-settings-modal { width:min(760px, calc(100vw - 28px)); max-width:760px; }
  .space-appearance-modal { width:min(720px, calc(100vw - 28px)); max-width:720px; }
  .space-settings-layout { display:grid; gap:14px; }
  .space-settings-showcase { display:grid; gap:8px; }
  .space-settings-preview { min-height:200px; max-height:none; aspect-ratio:2 / 1; cursor:grab; touch-action:none; }
  .space-settings-preview.is-dragging { cursor:grabbing; }
  .space-settings-preview:focus-visible { outline:3px solid color-mix(in srgb,var(--primary) 55%,transparent); outline-offset:3px; }
  .space-settings-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .space-settings-group { min-height:128px; padding:14px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); }
  .space-settings-group h3 { margin:0 0 4px; font-size:14px; color:var(--ink); }
  .space-settings-group p { margin:0 0 11px; color:var(--muted); font-size:12px; line-height:1.4; }
  .space-settings-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
  .space-settings-actions button { min-height:38px; }
  .stock-locations-modal { width:min(700px, calc(100vw - 28px)); max-width:700px; }
  .stock-locations-summary { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
  .stock-locations-list { display:grid; gap:8px; }
  .stock-location-manager-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:14px; padding:13px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); }
  .stock-location-manager-copy { min-width:0; }
  .stock-location-manager-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; color:var(--ink); }
  .stock-location-manager-copy small { display:block; margin-top:3px; color:var(--muted); }
  .stock-location-manager-row.is-unassigned { border-style:dashed; }
  .stock-locations-empty { padding:24px; text-align:center; border:1px dashed var(--line-strong); border-radius:var(--radius-sm); color:var(--muted); }
  .space-appearance-layout { display:grid; gap:14px; }
  .space-appearance-editor { padding:14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); }
  .space-appearance-editor-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
  .space-appearance-editor-head h3 { margin:0 0 3px; color:var(--ink); font-size:15px; }
  .space-appearance-editor-head p { margin:0; color:var(--muted); font-size:12px; line-height:1.4; }
  .space-theme-badge { flex:none; padding:5px 9px; border:1px solid var(--line-strong); border-radius:var(--chip-radius); background:var(--surface); color:var(--primary-dark); font-size:11px; font-weight:800; }
  .space-photo-actions { display:flex; flex-wrap:wrap; gap:8px; }
  .space-image-placement { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; align-items:end; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
  .space-image-placement label { display:grid; gap:6px; min-width:0; }
  .space-image-placement label > span { display:flex; justify-content:space-between; gap:10px; color:var(--ink-2); font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
  .space-image-placement input[type="range"] { width:100%; min-height:36px; accent-color:var(--primary); }
  .space-placement-status { grid-column:1 / -1; margin:0; color:var(--muted); font-size:11px; line-height:1.4; }
  .space-caption-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:3px; }
  .space-caption-control { display:grid; gap:6px; min-width:0; }
  .space-caption-control > span { color:var(--ink-2); font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
  .space-caption-choice { display:grid; grid-template-columns:minmax(0,1fr) 46px; gap:7px; }
  .space-caption-choice input[type="color"] { width:46px; min-width:46px; height:40px; padding:3px; border-radius:var(--radius-sm); cursor:pointer; }
  .space-caption-choice input[type="color"]:disabled { opacity:.42; cursor:not-allowed; }
  .space-caption-strength { grid-column:1 / -1; }
  .space-caption-strength-head { display:flex; justify-content:space-between; gap:10px; }
  .space-caption-strength input[type="range"] { width:100%; accent-color:var(--primary); }
  .space-settings-danger { border-color:color-mix(in srgb, var(--danger) 34%, var(--line)); }
  .space-delete-summary { padding:13px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); }
  .space-delete-options { display:grid; gap:10px; margin-top:14px; }
  .space-delete-option { display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:flex-start; padding:13px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); }
  .space-delete-option input { margin-top:3px; }
  .space-delete-option strong, .space-delete-option small { display:block; }
  .space-delete-option small { margin-top:4px; color:var(--muted); line-height:1.35; }
  .email-compose-fields { display:grid; gap:12px; }
  .email-compose-fields textarea { min-height:220px; resize:vertical; }
  @media (max-width:700px) { .space-settings-modal, .space-appearance-modal, .stock-locations-modal { width:min(100vw - 20px, 620px); } .space-settings-preview { min-height:164px; aspect-ratio:1.85 / 1; } .space-settings-groups, .space-caption-controls { grid-template-columns:1fr; } .space-settings-group { min-height:0; } .space-appearance-editor-head { align-items:stretch; flex-direction:column; } .space-caption-strength { grid-column:1; } .space-theme-badge { align-self:flex-start; } .stock-location-manager-row { grid-template-columns:1fr; } .stock-location-manager-row button { width:100%; } }
  #stockTable.stock-notes-hidden .stock-notes-col { display: none; }
  #stockTable.stock-location-hidden .stock-location-col { display: none; }
  #stockTable.stock-visibility-hidden .stock-visibility-col { display: none; }
  #stockTable.stock-serial-hidden .stock-serial-col { display:none; }
  #stockTable.stock-lot-hidden .stock-lot-col { display:none; }
  #stockTable.stock-expiration-hidden .stock-expiration-col { display:none; }
  #stockTable.stock-replenishment-hidden .stock-replenishment-col { display:none; }
  .stock-mobile-location { display:none; }
  .replenishment-destination { padding:13px; border:1px solid var(--line); border-left:4px solid var(--primary); border-radius:var(--radius-sm); background:var(--primary-soft); }
  .replenishment-destination strong { display:block; color:var(--ink); font-size:13px; }
  .replenishment-destination p { margin:5px 0 0; color:var(--ink-2); white-space:pre-wrap; font-size:13px; line-height:1.42; }
  .replenishment-destination .tiny { margin:0 0 5px; }

  /* ===== Empty state ===== */
  .empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--muted);
  }
  .empty-state .icon {
    font-size: 40px;
    color: var(--line-strong);
    margin-bottom: 8px;
  }
  .empty-state h3 {
    margin: 0 0 6px;
    color: var(--ink);
    font-size: 16px;
  }
  .empty-state p { margin: 0 0 14px; max-width: 480px; margin-left: auto; margin-right: auto; }
  .empty-state .actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

  /* ===== Modal ===== */
  .modal-backdrop {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--ink) 42%, transparent);
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 16px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  /* Confirm and prompt dialogs can be triggered from inside another modal
     (notably People & Access). They must stack above both that modal and its
     account-detail drawer (z-index 120), otherwise the action succeeds but
     the resulting dialog is hidden and appears to do nothing. */
  #confirmModal { z-index: 150; }
  #promptModal { z-index: 160; }
  /* These dialogs are launched from Inventory Space Settings. Keep them above
     their parent surface while leaving confirmation/prompt dialogs on top. */
  #shareListModal,
  #fulfillmentPolicyModal,
  #replenishmentSettingsModal { z-index: 130; }
  .modal {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .modal.wide { max-width: 820px; }
  .space-create-modal { width:min(680px, calc(100vw - 28px)); max-width:680px; }
  .space-create-modal .modal-head { align-items:flex-start; padding:18px 20px 15px; }
  .space-create-modal .modal-head h2 { font-size:20px; letter-spacing:-.02em; }
  .space-create-modal .modal-head p { margin:4px 0 0; color:var(--muted); font-size:13px; }
  .space-create-body { display:grid; gap:20px; padding:20px; }
  .space-create-name { max-width:none; }
  .space-choice-set { margin:0; padding:0; border:0; min-width:0; }
  .space-choice-set legend { padding:0; margin:0 0 9px; color:var(--ink); font-size:13px; font-weight:800; }
  .space-choice-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .space-scope-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .space-choice-card { display:block; min-width:0; cursor:pointer; }
  .space-choice-card > input { position:absolute; opacity:0; pointer-events:none; }
  .space-choice-copy { display:grid; gap:4px; min-height:102px; padding:14px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--surface-2); color:var(--ink); transition:border-color .15s, background .15s, box-shadow .15s, transform .15s; }
  .space-choice-copy strong { font-size:14px; }
  .space-choice-copy small { color:var(--muted); font-size:12px; line-height:1.35; }
  .space-choice-card:hover .space-choice-copy { border-color:var(--primary); transform:translateY(-1px); }
  .space-choice-card:has(input:checked) .space-choice-copy { border-color:var(--primary); background:var(--primary-soft); box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent); }
  .space-choice-card:has(input:focus-visible) .space-choice-copy { outline:3px solid color-mix(in srgb, var(--primary) 52%, transparent); outline-offset:2px; }
  .space-create-toggle { display:flex; align-items:flex-start; gap:10px; padding:13px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); cursor:pointer; }
  .space-create-toggle input { flex:none; margin-top:2px; }
  .space-create-toggle span { display:grid; gap:3px; }
  .space-create-toggle strong { color:var(--ink); font-size:13px; }
  .space-create-toggle small, .space-create-note { color:var(--muted); font-size:12px; line-height:1.4; }
  .space-create-note { margin:-10px 0 0; padding:0 2px; }
  @media (max-width:620px) { .space-scope-grid, .space-choice-grid { grid-template-columns:1fr; } .space-choice-copy { min-height:0; } .space-create-body { gap:16px; padding:18px; } }
  .modal-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
  }
  .modal-head h2 { margin: 0; font-size: 16px; font-weight: 700; }
  .modal-head .spacer { flex: 1; }
  /* One window-close language across every CSS dialog. Closing a dialog is
     navigation, not a destructive action, so it mirrors the compact Back
     control instead of borrowing the red danger treatment used for deletes. */
  .modal-backdrop .modal-head button[id^="close"],
  .modal-backdrop .modal-head #promptClose {
    display:inline-grid;
    place-items:center;
    flex:none;
    width:auto;
    min-width:0;
    height:auto;
    min-height:34px;
    padding:6px 11px;
    border:1px solid var(--line-strong);
    border-radius:5px;
    background:var(--surface);
    color:var(--primary-dark);
    font-family:"Segoe UI Symbol", "Segoe UI", sans-serif;
    font-size:12px;
    font-weight:780;
    line-height:1;
    box-shadow:none;
    transform:none;
  }
  .modal-backdrop .modal-head button[id^="close"]:hover,
  .modal-backdrop .modal-head button[id^="close"]:active,
  .modal-backdrop .modal-head button[id^="close"]:focus,
  .modal-backdrop .modal-head #promptClose:hover,
  .modal-backdrop .modal-head #promptClose:active,
  .modal-backdrop .modal-head #promptClose:focus {
    background:var(--surface-2);
    border-color:var(--primary);
    color:var(--primary-dark);
    box-shadow:none;
    transform:none;
  }
  .modal-body { padding: 18px; overflow-y: auto; flex: 1; position: relative; }
  .modal-foot {
    padding: 12px 18px;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    background: var(--surface-2);
    position: relative;
  }
  .modal-foot .spacer { flex: 1; }

  /* A phone/PWA must never centre a tall dialog beyond the visible viewport:
     the heading is the user's escape route, so make every task surface a
     complete, independently scrollable screen on narrow viewports. */
  .modal-back { flex:none; min-height:34px; padding:6px 11px; border-color:var(--primary-dark); background:var(--primary-dark); color:#fff; font-size:12px; font-weight:780; white-space:nowrap; }
  .modal-back:hover, .modal-back:focus-visible { background:#00466e; border-color:#00466e; color:#fff; }
  @media (max-width:700px) {
    .modal-backdrop:not(#confirmModal) { align-items:stretch; justify-items:stretch; padding:0; overflow:hidden; overscroll-behavior:contain; }
    .modal-backdrop:not(#confirmModal) > .modal { width:100%; max-width:none !important; height:100dvh; max-height:100dvh; min-height:100dvh; border:0; border-radius:0; }
    .modal-backdrop:not(#confirmModal) > .modal > .modal-head { flex:none; min-height:54px; padding:calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; }
    .modal-backdrop:not(#confirmModal) > .modal > .modal-body { min-height:0; overflow:auto; overscroll-behavior:contain; padding:14px 12px; }
    .modal-backdrop:not(#confirmModal) > .modal > .modal-foot { flex:none; flex-wrap:wrap; padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
    .modal-backdrop:not(#confirmModal) > .modal > .modal-foot button { min-width:0; flex:1 1 140px; white-space:normal; }
    .modal-backdrop:not(#confirmModal) .modal-body button,
    .modal-backdrop:not(#confirmModal) .modal-body input,
    .modal-backdrop:not(#confirmModal) .modal-body select,
    .modal-backdrop:not(#confirmModal) .modal-body textarea { max-width:100%; }
    .operations-card button, .home-admin-tools button { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
  }

  /* Audit history is an administrative reading task, not a desktop-only data
     grid. On a phone each event becomes a labeled record while desktop keeps
     the compact sortable-table rhythm used elsewhere. */
  .activity-log-modal { max-width:1000px; }
  @media (max-width:700px) {
    #activityLogModal { padding:0; place-items:stretch; }
    #activityLogModal .activity-log-modal { width:100%; max-width:none !important; height:100dvh; max-height:100dvh; border:0; border-radius:0; }
    #activityLogModal .modal-head { flex-wrap:wrap; padding:12px; }
    #activityLogModal .modal-head h2 { flex:1; }
    #activityLogModal .modal-head .spacer { display:none; }
    #activityLogModal .modal-head select { flex:1 1 calc(50% - 5px); min-width:0 !important; max-width:none; }
    #activityLogModal .modal-body { padding:10px !important; background:var(--surface-2); }
    #activityLogTable, #activityLogTable tbody, #activityLogTable tr, #activityLogTable td { display:block; width:100%; min-width:0; }
    #activityLogTable.operational-list { min-width:0 !important; }
    #activityLogTable thead { display:none; }
    #activityLogTable tbody { display:grid; gap:9px; }
    #activityLogTable tbody tr { padding:12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); }
    #activityLogTable tbody tr.empty-row { padding:0; }
    #activityLogTable tbody td { display:grid; grid-template-columns:88px minmax(0, 1fr); gap:10px; padding:5px 0; border:0; overflow-wrap:anywhere; }
    #activityLogTable tbody td::before { content:attr(data-label); color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
    #activityLogTable tbody .empty-row td { display:block; padding:28px 12px; }
    #activityLogTable tbody .empty-row td::before { display:none; }
    #activityLogModal .modal-foot { padding:10px 12px; }
  }

  /* District request source picker. Source, condition, and quantity are kept
     as separate visual facts instead of being concatenated into a long native
     select option that becomes unreadable on a phone. */
  .stock-request-part-heading { display:grid; gap:6px; padding:13px 14px; border:1px solid var(--line-strong); border-left:4px solid var(--primary); border-radius:var(--radius-sm); background:var(--primary-soft); }
  .stock-request-material { color:var(--ink); font-size:clamp(26px, 7vw, 34px); font-weight:900; line-height:1.05; letter-spacing:.015em; overflow-wrap:anywhere; }
  .stock-request-material:focus { outline:none; }
  .stock-request-description { color:var(--ink-2); font-size:16px; font-weight:750; line-height:1.35; overflow-wrap:anywhere; }
  .stock-request-source-label { display:block; margin:14px 0 8px; color:var(--muted); font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
  .stock-request-source-list { display:grid; gap:8px; }
  .stock-request-source { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:7px 12px; align-items:center; width:100%; min-height:64px; padding:11px 13px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--surface-2); color:var(--ink); text-align:left; box-shadow:none; }
  .stock-request-source:hover { border-color:var(--primary); background:var(--primary-soft); transform:none; }
  .stock-request-source[aria-pressed="true"] { border-color:var(--primary); background:var(--primary-soft); box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 17%, transparent); }
  .stock-request-source-copy { min-width:0; display:grid; gap:3px; }
  .stock-request-source-title { color:var(--ink); font-size:14px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .stock-request-source-meta { color:var(--muted); font-size:12px; line-height:1.25; }
  .stock-request-source-facts { display:flex; justify-content:flex-end; align-items:center; gap:5px; flex-wrap:wrap; }
  .stock-request-source-facts .disp, .stock-request-source-facts .badge { margin:0; white-space:nowrap; }
  .stock-request-source-check { grid-column:2; color:var(--primary); font-size:18px; font-weight:900; line-height:1; opacity:0; }
  .stock-request-source[aria-pressed="true"] .stock-request-source-check { opacity:1; }
  .stock-request-expiry-warning { margin-top:10px; padding:9px 10px; border:1px solid color-mix(in srgb,var(--danger) 42%,var(--line)); border-radius:var(--radius-sm); background:var(--danger-soft); color:var(--danger); font-size:12px; font-weight:750; line-height:1.35; }
  @media (max-width:620px) { .stock-request-part-heading { gap:5px; padding:12px; } .stock-request-description { font-size:15px; } .stock-request-source { min-height:58px; padding:10px 11px; gap:5px 8px; } .stock-request-source-title { font-size:13px; } .stock-request-source-meta { font-size:11px; } .stock-request-source-facts { grid-column:1; justify-content:flex-start; } .stock-request-source-check { grid-row:1 / span 2; align-self:center; } }

  /* ===== Cycle Count ===== */
  .cycle-count-modal { max-width: 960px; }
  .cycle-count-modal .modal-body { display:flex; flex-direction:column; min-height:0; }
  .cycle-count-scanner { position:sticky; top:0; z-index:4; display:grid; gap:7px; padding:13px; margin:0 0 12px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--surface); box-shadow:0 5px 16px color-mix(in srgb, var(--ink) 10%, transparent); }
  .cycle-count-scanner > label span { color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
  .cycle-count-entry { display:grid; grid-template-columns:minmax(0,1fr) 96px auto; gap:8px; align-items:stretch; }
  .cycle-count-entry > input { min-width:0; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:18px; font-weight:700; }
  .cycle-count-qty { display:grid; grid-template-columns:auto 1fr; gap:5px; align-items:center; padding:0 8px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; background:var(--surface-2); }
  .cycle-count-qty input { width:48px; min-width:0; padding:6px 2px; border:0; background:transparent; color:var(--ink); font-weight:800; text-align:center; }
  .cycle-count-scanner small { color:var(--muted); }
  .cycle-count-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 14px;
  }
  .cycle-count-table-wrap { margin-top: 14px; max-height: min(51vh, 540px); overflow-y: auto; overflow-x:hidden; }
  .cycle-count-input { width: 90px; text-align: right; font-weight: 700; }
  .cycle-count-diff { font-weight: 800; }
  .cycle-count-diff.match { color: var(--success); }
  .cycle-count-diff.mismatch { color: var(--danger); }
  .cycle-count-diff.pending { color: var(--muted); font-weight: 600; }
  .cycle-count-row { transition:background-color .22s ease, transform .22s ease, opacity .22s ease; }
  .cycle-count-row.cycle-count-missing { background:color-mix(in srgb, var(--danger) 8%, var(--surface)); }
  .cycle-count-row.cycle-count-partial { background:color-mix(in srgb, var(--warning) 11%, var(--surface)); }
  .cycle-count-row.cycle-count-over { background:color-mix(in srgb, var(--danger) 15%, var(--surface)); }
  .cycle-count-row.cycle-count-matched { background:color-mix(in srgb, var(--success) 15%, var(--surface)); }
  .cycle-count-status { display:inline-grid; place-items:center; width:25px; height:25px; border-radius:50%; border:1px solid var(--line-strong); color:var(--muted); font-weight:900; }
  .cycle-count-matched .cycle-count-status { color:#fff; border-color:var(--success); background:var(--success); animation:cycleCheck .48s cubic-bezier(.2,1.7,.4,1); }
  .cycle-count-over .cycle-count-status { color:#fff; border-color:var(--danger); background:var(--danger); }
  .cycle-count-hit { animation:cycleHit .55s cubic-bezier(.2,1.45,.4,1); }
  .cycle-count-adjust { display:inline-grid; grid-template-columns:34px minmax(34px,auto) 34px; align-items:center; justify-content:end; }
  .cycle-count-adjust button { min-width:34px; min-height:34px; padding:0; }
  .cycle-count-adjust strong { text-align:center; }
  @keyframes cycleHit { 0%{transform:scale(1)} 42%{transform:scale(1.018)} 75%{transform:scale(.995)} 100%{transform:scale(1)} }
  @keyframes cycleCheck { 0%{transform:scale(.3) rotate(-18deg)} 70%{transform:scale(1.22) rotate(3deg)} 100%{transform:scale(1) rotate(0)} }
  .stock-expectation-summary { margin:0; padding:13px 16px; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--warning) 9%, var(--surface)); }
  .stock-expectation-head { display:flex; justify-content:space-between; gap:12px; align-items:center; }
  .stock-expectation-head > div { display:grid; gap:3px; }
  .stock-expectation-head small { color:var(--muted); }
  .stock-expectation-items { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:8px; margin-top:10px; }
  .stock-expectation-item { display:flex; justify-content:space-between; align-items:center; gap:12px; min-width:0; padding:10px 12px; border:1px solid color-mix(in srgb,var(--warning) 45%,var(--line)); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); text-align:left; box-shadow:none; }
  .stock-expectation-item:hover { transform:none; border-color:var(--primary); background:var(--primary-soft); }
  .stock-expectation-item > span { display:grid; min-width:0; gap:2px; }
  .stock-expectation-item > span:last-child { flex:0 0 auto; text-align:right; }
  .stock-expectation-item small { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #stockTable tr.stock-row-deficient { background:color-mix(in srgb,var(--warning) 9%,var(--surface)); }
  .stock-qty-deficit { margin-top:4px; color:color-mix(in srgb,var(--danger) 80%,var(--ink)); font-size:10px; font-weight:800; line-height:1.2; white-space:nowrap; }
  @media (max-width:620px) {
    .cycle-count-entry { grid-template-columns:minmax(0,1fr) 82px; }
    .cycle-count-entry > button { grid-column:1 / -1; }
    .cycle-count-scanner { top:-1px; padding:11px; }
    .cycle-count-table-wrap { max-height:min(52vh,520px); padding:0 1px; }
    .cycle-count-table-wrap table,
    .cycle-count-table-wrap tbody { display:block; width:100%; min-width:0; }
    .cycle-count-table-wrap thead { display:none; }
    .cycle-count-table-wrap tbody { display:grid; gap:8px; }
    .cycle-count-table-wrap .cycle-count-row {
      display:grid;
      grid-template-columns:30px minmax(0,1fr) auto;
      grid-template-areas:
        "status part expected"
        "status description scanned"
        "status description variance";
      gap:3px 9px;
      align-items:center;
      padding:10px;
      border:1px solid var(--line);
      border-radius:var(--radius-sm);
    }
    .cycle-count-table-wrap .cycle-count-row > td { min-width:0; padding:0; border:0; text-align:left; }
    .cycle-count-table-wrap .cycle-count-row > td:nth-child(1) { grid-area:status; align-self:start; }
    .cycle-count-table-wrap .cycle-count-row > td:nth-child(2) { grid-area:part; }
    .cycle-count-table-wrap .cycle-count-row > td:nth-child(3) { grid-area:description; color:var(--muted); font-size:12px; line-height:1.3; }
    .cycle-count-table-wrap .cycle-count-row > td:nth-child(4) { grid-area:expected; }
    .cycle-count-table-wrap .cycle-count-row > td:nth-child(5) { grid-area:scanned; }
    .cycle-count-table-wrap .cycle-count-row > td:nth-child(6) { grid-area:variance; }
    .cycle-count-table-wrap .cycle-count-row > td:nth-child(4)::before,
    .cycle-count-table-wrap .cycle-count-row > td:nth-child(5)::before,
    .cycle-count-table-wrap .cycle-count-row > td:nth-child(6)::before {
      display:block;
      color:var(--muted);
      font-size:9px;
      font-weight:800;
      letter-spacing:.06em;
      line-height:1.1;
      text-align:right;
      text-transform:uppercase;
    }
    .cycle-count-table-wrap .cycle-count-row > td:nth-child(4)::before { content:"Expected"; }
    .cycle-count-table-wrap .cycle-count-row > td:nth-child(5)::before { content:"Scanned"; }
    .cycle-count-table-wrap .cycle-count-row > td:nth-child(6)::before { content:"Variance"; }
    .cycle-count-table-wrap .cycle-count-adjust { grid-template-columns:40px minmax(34px,auto) 40px; }
    .cycle-count-table-wrap .cycle-count-adjust button { min-width:40px; min-height:40px; }
    .cycle-count-table-wrap .empty-row { display:block; }
    .cycle-count-table-wrap .empty-row td { display:block; padding:18px 12px; }
    .stock-expectation-head { align-items:flex-start; flex-direction:column; }
    .stock-expectation-items { grid-template-columns:1fr; }
  }

  /* ===== Scan / Add Parts Modal ===== */
  .scan-modal { max-width: 860px; }
  .scan-modal .modal-body { padding: 16px; }
  .scan-console {
    background: linear-gradient(135deg, #062d4d 0%, #075d96 58%, #087bb8 100%);
    color: #fff;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 12px 28px rgba(2,45,75,.18);
    overflow: hidden;
  }
  .scan-console-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; background:rgba(1,25,47,.26); border-bottom:1px solid rgba(255,255,255,.16); }
  .scan-ready { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.03em; }
  .scan-ready-dot { width:8px; height:8px; border-radius:50%; background:#61e5ad; box-shadow:0 0 0 4px rgba(97,229,173,.17); animation:scanReadyPulse 2s ease-in-out infinite; }
  @keyframes scanReadyPulse { 50% { box-shadow:0 0 0 7px rgba(97,229,173,.06); } }
  .scan-console-context { color:#d8efff; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .scan-console-main { padding:18px; }
  .scan-display .scan-label { font-size:11px; color:#a9d8f5; text-transform:uppercase; letter-spacing:.08em; margin-bottom:5px; font-weight:700; }
  .scan-display .scan-pn { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:28px; line-height:1.05; font-weight:750; color:#fff; letter-spacing:.02em; word-break:break-all; min-height:30px; }
  .scan-display .scan-desc { font-size:14px; color:#d8efff; margin-top:7px; min-height:19px; }
  .scan-display .scan-meta { display:flex; gap:7px; margin-top:10px; flex-wrap:wrap; }
  .scan-display .scan-meta .badge { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.26); }
  .scan-entry-row { display:flex; gap:10px; margin-top:16px; align-items:stretch; }
  .scan-input-wrap { position:relative; flex:1; }
  .scan-input-icon { position:absolute; left:15px; top:50%; transform:translateY(-50%); color:#78d7ff; font-size:18px; line-height:1; pointer-events:none; }
  .scan-entry-row input#scanPartInput { width:100%; box-sizing:border-box; font-size:20px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background:rgba(0,18,36,.44); color:#fff; border:1px solid rgba(255,255,255,.34); border-radius:8px; padding:12px 14px 12px 43px; min-height:54px; text-align:left; letter-spacing:.02em; }
  .scan-entry-row input#scanPartInput::placeholder { color:#a6c6da; }
  .scan-entry-row input#scanPartInput:focus { outline:3px solid rgba(135,218,255,.38); outline-offset:1px; border-color:#fff; background:rgba(0,18,36,.6); }
  .scan-entry-row button#scanConfirmManualBtn { background:#fff; color:#005c98; border:1px solid #fff; border-radius:8px; padding:0 20px; min-height:54px; font-weight:800; font-size:14px; white-space:nowrap; }
  .scan-entry-row button#scanConfirmManualBtn:hover { background:#dff4ff; color:#004f84; }
  .scan-entry-row button#scanConfirmManualBtn kbd { margin-left:5px; color:#44738e; font-size:10px; }
  .scan-control-deck { display:grid; grid-template-columns:minmax(125px,.8fr) minmax(270px,1.75fr) minmax(125px,.8fr); gap:12px; padding:15px 18px 17px; border-top:1px solid rgba(255,255,255,.16); background:rgba(1,31,58,.22); }
  .scan-control { min-width:0; }
  .scan-control-label { display:flex; align-items:center; justify-content:space-between; color:#bae2f8; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin:0 0 7px; }
  .scan-key { font-size:10px; letter-spacing:0; color:#d9effc; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22); padding:2px 5px; border-radius:4px; text-transform:none; }
  .scan-qty-stepper { display:flex; align-items:stretch; height:39px; border:1px solid rgba(255,255,255,.32); border-radius:7px; overflow:hidden; background:rgba(0,20,38,.34); }
  .scan-qty-stepper button { width:38px; min-height:37px; padding:0; border:0; border-radius:0; background:rgba(255,255,255,.1); color:#fff; font-size:21px; font-weight:500; }
  .scan-qty-stepper button:hover { background:rgba(255,255,255,.2); }
  .scan-qty-stepper input { flex:1; min-width:0; border:0; border-left:1px solid rgba(255,255,255,.2); border-right:1px solid rgba(255,255,255,.2); border-radius:0; background:transparent; color:#fff; padding:4px 6px; text-align:center; font-size:16px; font-weight:750; }
  .scan-qty-stepper input:focus { outline:2px solid rgba(135,218,255,.6); outline-offset:-2px; }
  .scan-disposition-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
  .scan-disposition-choice { min-height:39px; padding:5px 6px; border:1px solid rgba(255,255,255,.28); border-radius:6px; background:rgba(0,20,38,.24); color:#e7f7ff; font-weight:700; font-size:11px; line-height:1.1; }
  .scan-disposition-choice small { display:block; color:#a8d8f3; font-size:9px; font-weight:600; margin-top:3px; }
  .scan-disposition-choice:hover { background:rgba(255,255,255,.13); }
  .scan-disposition-choice.selected { background:#fff; border-color:#fff; color:#005b92; box-shadow:0 2px 8px rgba(0,0,0,.18); }
  .scan-disposition-choice.selected small { color:#397292; }
  .scan-location-input { width:100%; box-sizing:border-box; min-height:39px; border:1px solid rgba(255,255,255,.32); border-radius:7px; background:rgba(0,20,38,.34); color:#fff; padding:7px 9px; font-size:12px; }
  .scan-location-input::placeholder { color:#a6c6da; }
  .scan-location-input:focus { outline:2px solid rgba(135,218,255,.6); outline-offset:1px; border-color:#fff; }
  .scan-location-control { position:relative; }
  .scan-location-control::after { content:'⌄'; position:absolute; right:10px; bottom:9px; color:#bfe8ff; font-size:16px; line-height:1; pointer-events:none; }
  .scan-location-input { padding-right:30px; }
  .scan-input-row, .scan-row, .qty-stepper { display:none; }
  .scan-recent {
    border-top: 1px solid var(--line);
    padding-top: 12px;
    margin-top: 4px;
  }
  .scan-recent h4 {
    margin: 0 0 8px;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--muted);
    letter-spacing: .05em;
    font-weight: 600;
  }
  .scan-recent-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overscroll-behavior: contain;
    scroll-behavior: smooth;
  }
  .scan-recent-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
  }
  .scan-recent-item:last-child { border-bottom: none; }
  .scan-recent-item .pn { font-family: ui-monospace, monospace; font-weight: 600; min-width: 130px; }
  .scan-recent-item .desc { flex: 1; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .scan-recent-item .qty { font-weight: 700; }
  .scan-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 13px; }
  .scan-hint { display:flex; align-items:center; flex-wrap:wrap; gap:7px 12px; background:var(--info-soft); border:1px solid color-mix(in srgb, var(--primary) 24%, var(--line)); border-radius:var(--radius-sm); padding:9px 12px; font-size:12px; color:var(--ink-2); margin-bottom:12px; }
  .scan-hint strong { color:var(--ink); }
  .scan-hint kbd { border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); padding:1px 5px; border-radius:4px; font:700 10px ui-monospace,monospace; }
  .scan-session-line { display:flex; align-items:center; gap:10px; padding:10px 2px 2px; }
  .scan-session-line .scan-session-destination { font-weight:700; color:var(--ink); }
  @media (max-width:680px) {
    .modal-backdrop:has(.scan-modal) { padding:8px; overflow:hidden; }
    .scan-modal { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); }
    .scan-modal .modal-body { min-height:0; overflow:hidden; display:flex; flex-direction:column; }
    .scan-recent { min-height:0; flex:1 1 auto; display:flex; flex-direction:column; }
    .scan-recent-list { min-height:104px; max-height:none; flex:1 1 auto; }
    .scan-control-deck { grid-template-columns:1fr 1fr; }
    .scan-control-disposition { grid-column:1 / -1; }
    .scan-entry-row button#scanConfirmManualBtn { padding:0 13px; }
  }
  @media (max-width:460px) {
    .scan-modal .modal-head { padding:12px 14px; }
    .scan-modal .modal-head h2 { font-size:15px; }
    .scan-modal .modal-body { padding:9px 10px 10px; }
    .scan-hint { display:none; }
    .scan-console-top { padding:9px 12px; }
    .scan-console-context { display:none; }
    .scan-console-main { padding:11px 12px 12px; }
    .scan-display .scan-label { margin-bottom:3px; }
    .scan-display .scan-pn { min-height:24px; font-size:22px; }
    .scan-display .scan-desc { min-height:0; max-width:100%; margin-top:3px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px; }
    .scan-display .scan-meta { display:none; }
    .scan-entry-row { gap:7px; margin-top:10px; }
    .scan-entry-row input#scanPartInput { min-height:47px; padding-top:9px; padding-bottom:9px; font-size:16px; }
    .scan-entry-row button#scanConfirmManualBtn { min-height:47px; font-size:12px; }
    .scan-entry-row button#scanConfirmManualBtn kbd { display:none; }
    .scan-control-deck { grid-template-columns:minmax(92px,.68fr) minmax(0,1.32fr); padding:10px 12px 11px; gap:10px; }
    .scan-control-disposition { grid-column:1 / -1; }
    .scan-control-label { margin-bottom:5px; }
    .scan-qty-stepper { height:35px; }
    .scan-qty-stepper button { min-height:33px; width:34px; }
    .scan-qty-stepper input { font-size:14px; }
    .scan-location-input { min-height:35px; padding:7px 9px; font-size:12px; }
    .scan-disposition-grid { gap:5px; }
    .scan-disposition-choice { min-height:42px; padding:5px 3px; font-size:11px; }
    .scan-disposition-choice small { margin-top:1px; font-size:8px; }
    .scan-session-line { padding:7px 2px 2px; }
    .scan-recent { padding-top:9px; margin-top:2px; }
    .scan-recent h4 { margin-bottom:6px; }
    .scan-recent-list { min-height:118px; }
    .scan-recent-item { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:5px 7px; padding:8px 10px; align-items:center; }
    .scan-recent-item .pn { min-width:0; font-size:12px; }
    .scan-recent-item .desc { display:none; }
    .scan-recent-item .disp { font-size:11px; }
    .scan-recent-item .tiny { display:none; }
    .scan-recent-item .dr-remove { grid-column:3; grid-row:1; }
    .scan-modal .modal-foot { padding:10px 14px; }
  }

  /* Scanner: a little instrumentation, not a spaceship. The one field that
     receives a scan is intentionally the brightest, most obvious control. */
  .scan-console { background:linear-gradient(135deg,#063450,#0876ae); }
  .scan-entry-row input#scanPartInput { background:#fff; color:#17324a; border-color:#fff; box-shadow:0 2px 0 rgba(0,0,0,.12); }
  .scan-entry-row input#scanPartInput::placeholder { color:#6c8394; }
  .scan-entry-row input#scanPartInput:focus { background:#fff; border-color:#fff; outline-color:rgba(255,255,255,.56); }
  .scan-input-icon { color:#0879b4; }
  .scan-location-input { background:#fff; color:#17324a; border-color:#fff; }
  .scan-location-input::placeholder { color:#6c8394; }
  .scan-utility-deck { grid-template-columns:130px minmax(180px,1fr) 150px; }
  .scan-recent-item > .ghost.tiny { align-self:center; white-space:nowrap; }
  .scan-recent-legacy-item > [data-scan-recent-details] { grid-column:1 / 3; grid-row:3; justify-self:start; padding:3px 7px; min-height:0; font-size:11px; }
  @media (max-width:460px) { .scan-utility-deck { grid-template-columns:96px minmax(0,1fr); } .scan-recent-legacy-item > [data-scan-recent-details] { grid-column:1 / 3; grid-row:3; } }

  /* Compact scanner workspace: the console signals a dedicated barcode task,
     while the actual workflow stays one scan, one quantity, one confirmation.
     Condition changes intentionally live on the recently-added row instead of
     competing with the primary scan action. */
  .scan-modal { max-width:780px; }
  .scan-modal .modal-body { display:flex; flex-direction:column; gap:12px; }
  .scan-hint { margin:0; }
  .scan-console { border-radius:10px; box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 8px 20px rgba(2,45,75,.16); }
  .scan-console-main { padding:14px 16px 13px; }
  .scan-entry-label { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px; color:#bae2f8; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
  .scan-entry-row { margin-top:0; }
  .scan-preview { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:7px 10px; min-height:31px; margin-top:9px; color:#d8efff; }
  .scan-preview-pn { color:#fff; font:750 14px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space:nowrap; }
  .scan-preview-desc { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
  .scan-preview-meta { display:flex; gap:5px; justify-content:flex-end; flex-wrap:wrap; }
  .scan-preview-meta .badge { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.26); }
  .scan-utility-deck { display:grid; grid-template-columns:130px minmax(180px,1fr) 120px; gap:10px; padding:11px 16px 12px; border-top:1px solid rgba(255,255,255,.16); background:rgba(1,31,58,.22); }
  .scan-control-disposition { grid-column:1 / -1; min-width:0; }
  .scan-control-disposition .scan-control-label { margin-bottom:6px; }
  .scan-control-disposition .scan-disposition-grid { width:100%; }
  .scan-utility-deck .scan-control-label { margin-bottom:6px; }
  .scan-recent { margin-top:0; }
  .scan-recent-list { max-height:230px; }
  .scan-recent-item { display:grid; grid-template-columns:minmax(150px,1fr) auto auto; gap:8px 10px; padding:10px 12px; align-items:center; }
  .scan-recent-legacy-item { grid-template-columns:minmax(150px,1fr) auto auto 28px; }
  .scan-recent-part { min-width:0; display:grid; gap:3px; }
  .scan-recent-item .pn { min-width:0; }
  .scan-recent-item .desc { min-width:0; }
  .scan-recent-location { color:var(--muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .scan-recent-state { display:flex; align-items:center; justify-content:flex-end; gap:5px; flex-wrap:wrap; }
  .scan-recent-disposition { margin:0; cursor:pointer; font:inherit; }
  .scan-recent-qty { font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .scan-recent-remove { appearance:none; width:28px; height:28px; min-height:28px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--muted); font-size:20px; line-height:1; }
  .scan-recent-remove:hover { background:var(--danger-soft); color:var(--danger); }
  .scan-recent-condition-picker { grid-column:1 / -1; display:flex; gap:6px; flex-wrap:wrap; padding-top:2px; }
  .scan-recent-condition-picker button { cursor:pointer; margin:0; font:inherit; }
  .scan-recent-condition-picker button[aria-pressed="true"] { box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 28%, transparent); }
  /* The renderer keeps the existing recent-row data model, but presents it as
     a compact receipt: identity on the left, status and quantity on the right. */
  .scan-recent-legacy-item > .pn { grid-column:1; grid-row:1; }
  .scan-recent-legacy-item > .desc { grid-column:1; grid-row:2; }
  .scan-recent-legacy-item > .badge:nth-child(3) { grid-column:2; grid-row:1; }
  .scan-recent-legacy-item > .disp { grid-column:2; grid-row:2; width:124px; min-width:124px; margin:0; white-space:nowrap; cursor:pointer; }
  .scan-recent-legacy-item > .badge:nth-child(5) { grid-column:3; grid-row:1; }
  .scan-recent-legacy-item > .qty { grid-column:3; grid-row:2; font-weight:800; white-space:nowrap; }
  .scan-recent-legacy-item > .tiny { display:none; }
  .scan-recent-legacy-item > .dr-remove { grid-column:4; grid-row:1 / span 2; align-self:center; width:28px; height:28px; padding:0; border-radius:6px; color:var(--muted); font-size:20px; line-height:1; text-align:center; cursor:pointer; }
  .scan-recent-legacy-item > .dr-remove:hover { background:var(--danger-soft); color:var(--danger); }
  @media (max-width:680px) {
    .scan-modal .modal-body { gap:9px; }
    .scan-utility-deck { grid-template-columns:116px minmax(0,1fr); padding:10px 12px; }
  }
  @media (max-width:460px) {
    .scan-console-main { padding:11px 12px; }
    .scan-entry-label { margin-bottom:6px; }
    .scan-preview { grid-template-columns:minmax(0,1fr) auto; margin-top:7px; }
    .scan-preview-desc { grid-column:1 / -1; }
    .scan-preview-meta { display:none; }
    .scan-utility-deck { grid-template-columns:104px minmax(0,1fr); gap:8px; padding:9px 12px; }
    .scan-recent-item { grid-template-columns:minmax(0,1fr) auto auto; gap:7px; padding:9px 10px; }
    .scan-recent-legacy-item { grid-template-columns:minmax(0,1fr) auto auto 28px; }
    .scan-recent-state { grid-column:1 / -1; justify-content:flex-start; }
    .scan-recent-condition-picker { gap:5px; }
  }

  /* Keep staged-return controls inside the blue header on narrow screens. */
  @media (max-width:620px) {
    .staged-box-head { padding:10px 42px 10px 12px; gap:8px; }
    .staged-box-head .sb-return-title { flex:1 1 100%; }
    .staged-box-head .sb-tracking-input { flex:1 1 100%; width:100%; }
    .staged-box-head .sb-stats { gap:8px; }
  }

  /* Quantity changes need a clear but tidy physical cue. These animate as a
     single spring-like row event—no per-cell glow or scaling, so tables do
     not jitter or briefly grow a horizontal scrollbar. */
  #stockBody tr.stock-motion-split td { animation:rowSplitSpring 560ms cubic-bezier(.22,.8,.28,1.18) both; }
  #stockBody tr.stock-motion-target td { animation:rowArrivalSpring 560ms cubic-bezier(.18,.86,.25,1.16) both; }
  #stockBody tr.stock-motion-merge td { animation:rowMergeSpring 600ms cubic-bezier(.2,.86,.3,1.16) both; }
  #stockBody tr.stock-motion-update td { animation:rowConditionUpdate 680ms ease-out both; }
  #returnsBody tr.stock-motion-split td { animation:rowSplitSpring 560ms cubic-bezier(.22,.8,.28,1.18) both; }
  #returnsBody tr.stock-motion-target td { animation:rowArrivalSpring 560ms cubic-bezier(.18,.86,.25,1.16) both; }
  #returnsBody tr.stock-motion-merge td { animation:rowMergeSpring 600ms cubic-bezier(.2,.86,.3,1.16) both; }
  #returnsBody tr.stock-motion-update td { animation:rowConditionUpdate 680ms ease-out both; }
  .staged-box-parts .staged-return-row.staged-motion-split { animation:rowSplitSpring 560ms cubic-bezier(.22,.8,.28,1.18) both; }
  .staged-box-parts .staged-return-row.staged-motion-target { animation:rowArrivalSpring 560ms cubic-bezier(.18,.86,.25,1.16) both; }
  .staged-box-parts .staged-return-row.staged-motion-merge { animation:rowMergeSpring 600ms cubic-bezier(.2,.86,.3,1.16) both; }
  @keyframes rowSplitSpring {
    0% { opacity:.72; transform:translateY(0); background-color:transparent; }
    30% { opacity:1; transform:translateY(-3px); background-color:color-mix(in srgb, var(--primary) 14%, transparent); }
    58% { transform:translateY(1px); background-color:color-mix(in srgb, var(--primary) 7%, transparent); }
    100% { transform:translateY(0); background-color:transparent; }
  }
  @keyframes rowConditionUpdate {
    0% { background-color:color-mix(in srgb, var(--primary) 38%, var(--surface)); }
    42% { background-color:color-mix(in srgb, var(--primary) 17%, var(--surface)); }
    100% { background-color:transparent; }
  }
  @keyframes rowArrivalSpring {
    0% { opacity:.18; transform:translateY(-7px); background-color:color-mix(in srgb, var(--primary) 18%, transparent); }
    48% { opacity:1; transform:translateY(2px); background-color:color-mix(in srgb, var(--primary) 9%, transparent); }
    72% { transform:translateY(-1px); }
    100% { transform:translateY(0); background-color:transparent; }
  }
  @keyframes rowMergeSpring {
    0% { background-color:color-mix(in srgb, var(--success) 16%, transparent); transform:translateY(-2px); }
    42% { background-color:color-mix(in srgb, var(--success) 10%, transparent); transform:translateY(3px); }
    70% { transform:translateY(-1px); }
    100% { background-color:transparent; transform:translateY(0); }
  }

  /* ===== Forms ===== */
  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .form-grid .full { grid-column: 1 / -1; }

  /* ===== Part details editor ===== */
  .part-edit-modal { max-width:720px; max-height:min(860px,calc(100dvh - 24px)); }
  .part-edit-modal .modal-head,
  .part-edit-modal .modal-foot { flex:none; }
  .part-edit-modal .modal-body { min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .part-edit-body { display:grid; gap:14px; padding:16px 18px 18px; background:var(--surface-2); }
  .part-edit-section,
  .part-edit-optional { margin:0; padding:15px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
  .part-edit-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:0 0 12px; }
  .part-edit-section-head h3 { margin:0; color:var(--ink); font-size:14px; line-height:1.2; }
  .part-edit-section-head p { margin:3px 0 0; color:var(--muted); font-size:12px; line-height:1.35; }
  .part-edit-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(130px,.34fr); gap:11px 14px; }
  .part-edit-grid .full { grid-column:1 / -1; }
  .part-edit-grid.behavior { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .part-edit-variants { margin:0 0 14px; padding:0 0 14px; border-bottom:1px solid var(--line); }
  .part-edit-variants .part-edit-section-head { margin-bottom:9px; }
  .part-edit-variant-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:8px; }
  .part-edit-variant { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 9px; align-items:center; min-height:58px; padding:9px 11px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--surface-2); color:var(--ink); text-align:left; box-shadow:none; }
  .part-edit-variant:hover { transform:none; border-color:var(--primary); background:var(--primary-soft); }
  .part-edit-variant[aria-pressed="true"] { border-color:var(--primary); background:var(--primary-soft); box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 18%,transparent); }
  .part-edit-variant strong { font-size:13px; }
  .part-edit-variant small { grid-column:1 / -1; color:var(--muted); font-size:11px; }
  .part-edit-variant .badge { margin:0; white-space:nowrap; }
  #partPN[readonly] { background:var(--surface-2); color:var(--muted); cursor:default; }
  .part-number-correction { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; }
  .part-number-correction button { min-height:42px; white-space:nowrap; }
  .part-number-help { margin-top:4px; color:var(--muted); font-size:11px; line-height:1.35; }
  .import-material-review { margin-top:16px; padding:13px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); }
  .import-material-review[hidden] { display:none; }
  .import-material-review h3 { margin:0; font-size:14px; }
  .import-material-review > p { margin:4px 0 10px; color:var(--muted); font-size:12px; line-height:1.4; }
  .import-material-review-list { display:grid; gap:7px; }
  .import-material-review-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
  .import-material-review-row input { width:20px; height:20px; }
  .import-material-review-row strong { display:block; font-family:var(--mono); font-size:12px; }
  .import-material-review-row small { display:block; margin-top:2px; color:var(--muted); line-height:1.3; }
  .import-material-review-confidence { color:var(--primary); font-size:11px; font-weight:800; text-transform:uppercase; white-space:nowrap; }
  @media (max-width: 520px) {
    .part-number-correction { grid-template-columns:minmax(0,1fr) auto; }
    .part-number-correction button { min-width:96px; padding-inline:12px; }
    .import-material-review-row { grid-template-columns:auto minmax(0,1fr); }
    .import-material-review-confidence { grid-column:2; }
  }
  .part-edit-condition { display:grid; align-content:start; gap:5px; }
  .part-edit-condition > span:first-child,
  .part-edit-control-title { color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
  .part-edit-condition .disp { display:inline-flex; justify-content:center; align-items:center; width:150px; min-height:38px; margin:0; padding:7px 12px !important; white-space:nowrap; }
  .part-edit-apply { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; margin-top:2px; padding:11px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--primary-soft); }
  .part-edit-apply strong { display:block; color:var(--ink); font-size:13px; }
  .part-edit-apply small { display:block; margin-top:2px; color:var(--muted); font-size:11px; line-height:1.35; }
  .part-edit-apply-stepper { display:grid; grid-template-columns:42px 58px 42px; min-height:42px; }
  .part-edit-apply-stepper button { min-width:0; padding:7px; border-radius:0; }
  .part-edit-apply-stepper button:first-child { border-radius:8px 0 0 8px; }
  .part-edit-apply-stepper button:last-child { border-radius:0 8px 8px 0; }
  .part-edit-apply-stepper input { width:58px; min-width:0; padding:7px 4px; border-radius:0; text-align:center; font-weight:800; }
  .part-edit-control-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px; }
  .part-edit-control { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 12px; align-items:center; min-height:78px; padding:12px 13px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); }
  .part-edit-control strong { color:var(--ink); font-size:13px; }
  .part-edit-control small { grid-column:1 / -1; color:var(--muted); font-size:11px; line-height:1.35; }
  .part-edit-control button { min-width:92px; }
  .part-edit-control input[type="checkbox"] { width:20px; height:20px; }
  .part-edit-minimum { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) 110px; gap:12px; align-items:end; margin-top:1px; }
  .part-edit-minimum-copy { align-self:center; }
  .part-edit-minimum-copy strong { display:block; color:var(--ink); font-size:13px; }
  .part-edit-minimum-copy small { display:block; margin-top:2px; color:var(--muted); font-size:11px; line-height:1.35; }
  .part-edit-traceability { padding:0; overflow:visible; }
  .part-edit-trace-toggle { display:flex; align-items:center; width:100%; min-height:56px; gap:10px; padding:12px 15px; border:0; border-radius:var(--radius); background:transparent; color:var(--ink); text-align:left; box-shadow:none; }
  .part-edit-trace-toggle:hover { transform:none; background:var(--primary-soft); }
  .part-edit-trace-toggle::before { content:'›'; flex:none; color:var(--primary); font-size:22px; font-weight:800; line-height:1; transform:rotate(0deg); transition:transform .16s ease; }
  .part-edit-trace-toggle[aria-expanded="true"]::before { transform:rotate(90deg); }
  .part-edit-trace-toggle strong { display:block; font-size:14px; }
  .part-edit-trace-toggle span { display:block; margin-top:2px; color:var(--muted); font-size:11px; font-weight:500; }
  .part-edit-trace-status { margin-left:auto; white-space:nowrap; }
  .part-edit-trace-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px 14px; padding:14px 15px 15px; border-top:1px solid var(--line); }
  .part-edit-trace-grid .serial { grid-column:1 / -1; }
  .part-edit-trace-help { grid-column:1 / -1; margin:0; color:var(--muted); font-size:11px; line-height:1.4; }
  .part-expiration-field input[type="date"] { min-height:42px; border:2px solid color-mix(in srgb,var(--primary) 42%,var(--line-strong)); background:var(--surface); color:var(--ink); color-scheme:light; cursor:pointer; }
  body[data-theme="agilent-web-dark"] .part-expiration-field input[type="date"] { color-scheme:dark; }
  .part-expiration-field input[type="date"]::-webkit-calendar-picker-indicator { min-width:24px; min-height:24px; padding:4px; border-radius:6px; background-color:var(--primary-soft); cursor:pointer; }
  @media (max-width:620px) {
    .part-edit-modal { width:100%; height:100dvh; max-height:100dvh; }
    .part-edit-body { gap:10px; padding:10px; }
    .part-edit-section { padding:13px; }
    .part-edit-grid,
    .part-edit-grid.behavior,
    .part-edit-control-grid,
    .part-edit-trace-grid { grid-template-columns:1fr; }
    .part-edit-grid .full,
    .part-edit-trace-grid .serial { grid-column:auto; }
    .part-edit-core-grid { grid-template-columns:minmax(0,1fr) 92px; }
    .part-edit-core-grid .full { grid-column:1 / -1; }
    .part-edit-condition { grid-column:1 / -1; }
    .part-edit-condition .disp { width:100%; }
    .part-edit-apply { grid-template-columns:1fr; }
    .part-edit-apply-stepper { grid-template-columns:52px minmax(70px,1fr) 52px; width:100%; }
    .part-edit-apply-stepper input { width:100%; }
    .part-edit-control { min-height:72px; }
    .part-edit-minimum { grid-template-columns:minmax(0,1fr) 94px; }
    .part-edit-variant-list { grid-template-columns:1fr; }
    .part-expiration-field input[type="date"] { min-height:46px; }
  }

  /* ===== Toast ===== */
  #toast {
    position: fixed;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: white;
    width:max-content;
    min-width:180px;
    max-width:min(560px, calc(100vw - 28px));
    padding:11px 15px;
    border:1px solid color-mix(in srgb, currentColor 24%, transparent);
    border-radius:9px;
    box-sizing:border-box;
    overflow-wrap:anywhere;
    white-space:normal;
    font-size: 13px;
    font-weight: 500;
    line-height:1.38;
    text-align:center;
    box-shadow: var(--shadow-lg);
    z-index: 200;
    opacity: 0;
    transition: opacity .2s, transform .2s;
    pointer-events: none;
  }
  #toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
  #toast.error { background: var(--danger); }
  #toast.success { background: var(--success); }
  /* Completion celebration: intentionally brief and earned. Rockets rise
     from below the viewport, then resolve into the Agilent starburst rather
     than generic confetti. The layer dims the workspace just long enough to
     make a real accomplishment feel noticed without interrupting work. */
  #celebrationLayer {
    position:fixed; inset:0; pointer-events:none; z-index:220; overflow:hidden;
    visibility:hidden; opacity:0; background:rgba(0,24,45,0); transition:opacity .16s ease, background .16s ease;
  }
  #celebrationLayer.is-active { visibility:visible; opacity:1; animation:celebrationExposure 3.5s cubic-bezier(.2,.7,.2,1) forwards; }
  #celebrationLayer.is-awaiting-dismiss { pointer-events:auto; cursor:pointer; animation:none; background:rgba(255,255,255,.055); }
  .celebration-message {
    position:absolute; isolation:isolate; top:clamp(58px,12vh,132px); left:50%; width:min(440px,calc(100vw - 42px));
    transform:translateX(-50%) translateY(-8px); padding:25px 34px 39px; border:4px solid #b47617;
    border-radius:18px; color:#fff; text-align:center; background:linear-gradient(142deg,rgba(0,82,130,.94),rgba(0,39,71,.94));
    box-shadow:0 19px 48px rgba(0,0,0,.34), 0 0 0 2px #ffe6a5, 0 0 0 6px #8b5712, 0 0 0 8px rgba(255,222,137,.5), inset 0 2px #fff3c7, inset 0 -2px #71450e, inset 0 -16px 30px rgba(0,15,39,.21); backdrop-filter:blur(10px);
    opacity:0; pointer-events:none;
  }
  .celebration-message::before {
    content:""; position:absolute; z-index:-1; inset:7px; border:1px solid #f8d986; border-radius:10px;
    background:linear-gradient(90deg,transparent 0 7%,rgba(255,232,166,.13) 18% 82%,transparent 93%);
    box-shadow:inset 0 1px rgba(255,255,255,.31), inset 0 -1px rgba(255,224,143,.37), 0 0 0 2px rgba(96,57,6,.68);
  }
  .celebration-message::after {
    content:"❦  ✦  ❦"; position:absolute; z-index:1; left:50%; bottom:8px; transform:translateX(-50%); color:#f7d77c;
    font-family:Georgia,"Times New Roman",serif; font-size:15px; font-weight:700; line-height:1; letter-spacing:.32em; white-space:nowrap;
    text-shadow:0 0 7px rgba(255,229,150,.62);
  }
  #celebrationLayer.is-awaiting-dismiss .celebration-message { animation:celebrationMessageIn .28s cubic-bezier(.18,.78,.22,1) forwards; }
  .celebration-message strong { display:flex; align-items:center; justify-content:center; gap:11px; margin-bottom:5px; font-size:15px; letter-spacing:.1em; text-transform:uppercase; font-family:Georgia,"Times New Roman",serif; }
  .celebration-message strong::before, .celebration-message strong::after { content:"❦"; color:#ffe49b; font-size:17px; line-height:.8; text-shadow:0 0 8px rgba(255,234,165,.75); }
  .celebration-message span { display:block; font-size:13px; font-weight:650; line-height:1.38; color:rgba(255,255,255,.93); }
  /* Light mode gets a clean, high-legibility acknowledgement surface instead
     of carrying over the dark glass treatment used against the night burst. */
  body[data-theme="agilent-web-light"] .celebration-message {
    color:#064f78; background:linear-gradient(142deg,rgba(255,255,255,.99),rgba(232,247,255,.98)); border-color:#b47617;
    box-shadow:0 18px 46px rgba(0,56,86,.22), 0 0 0 2px #ffe6a5, 0 0 0 6px #8b5712, 0 0 0 8px rgba(255,222,137,.56), inset 0 2px #fff, inset 0 -2px #cf941f;
  }
  body[data-theme="agilent-web-light"] .celebration-message::before { border-color:#d6a33c; background:linear-gradient(90deg,transparent 0 7%,rgba(255,202,80,.1) 18% 82%,transparent 93%); box-shadow:inset 0 1px #fff, inset 0 -1px #f0c96c, 0 0 0 2px rgba(118,74,11,.5); }
  body[data-theme="agilent-web-light"] .celebration-message::after { color:#9a6614; text-shadow:0 0 6px rgba(201,148,36,.22); }
  body[data-theme="agilent-web-light"] .celebration-message strong::before, body[data-theme="agilent-web-light"] .celebration-message strong::after { color:#b47617; text-shadow:0 0 8px rgba(201,148,36,.25); }
  body[data-theme="agilent-web-light"] .celebration-message span { color:#28627f; }
  .celebration-rocket { position:absolute; left:var(--launch-x); bottom:-32px; width:12px; height:12px; color:var(--firework-color); opacity:0; }
  .celebration-rocket::before {
    /* The tail is below the rising rocket—not in front of it. */
    content:""; position:absolute; z-index:-1; left:5px; top:7px; width:3px; height:clamp(92px,18vh,190px);
    border-radius:99px; background:linear-gradient(to bottom, currentColor 0%, color-mix(in srgb, currentColor 34%, transparent) 32%, transparent 100%);
    box-shadow:0 0 8px currentColor; transform-origin:50% 0;
  }
  .celebration-rocket::after { content:""; position:absolute; inset:2px; border-radius:50%; background:#fff7d1; box-shadow:0 0 6px 2px currentColor, 0 0 15px 4px color-mix(in srgb, currentColor 55%, transparent); }
  .celebration-rocket.launch { animation:rocketRise .72s cubic-bezier(.13,.78,.24,1) forwards; animation-delay:var(--launch-delay,0ms); }
  .celebration-rocket.launch::before { animation:rocketTrail .72s ease-out forwards; animation-delay:var(--launch-delay,0ms); }
  .agilent-skyburst {
    position:absolute; left:var(--burst-x); top:var(--burst-y); width:1px; height:1px; color:var(--firework-color);
    opacity:0; animation:burstPresence 2.35s ease-out forwards;
  }
  .agilent-skyburst-logo {
    position:absolute; left:50%; top:50%; width:var(--burst-size,168px); height:var(--burst-size,168px); transform:translate(-50%,-50%) scale(.08);
    filter:brightness(1.9) saturate(1.42) drop-shadow(0 0 7px #fff) drop-shadow(0 0 18px currentColor); animation:agilentBurstLogo 1.94s cubic-bezier(.11,.84,.19,1) forwards;
  }
  .agilent-skyburst-logo * { fill:currentColor; }
  .agilent-skyburst-logo .agilent-mark-dot {
    opacity:1; transform-origin:84px 84px; animation:agilentMarkDotFizzle var(--mark-life,1120ms) ease-in forwards; animation-delay:var(--mark-delay,0ms);
  }
  .agilent-burst-dot {
    position:absolute; left:50%; top:50%; width:var(--dot-size); height:var(--dot-size); border-radius:50%; background:currentColor;
    box-shadow:0 0 10px 2px #fff, 0 0 18px 5px currentColor; opacity:0; animation:agilentBurstDot var(--spark-life,1.65s) cubic-bezier(.1,.76,.22,1) forwards; animation-delay:var(--dot-delay);
  }
  /* Static celebration geometry preserves the five launch patterns without
     runtime style attributes, allowing CSP to remain narrow. */
  .celebration-launch-0 { --launch-x:16%; --rocket-rise:calc(100vh - 32vh); --firework-color:#72e3ff; --launch-delay:0ms; }
  .agilent-skyburst.celebration-launch-0 { --burst-x:16%; --burst-y:32%; --burst-size:96px; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-0 .agilent-mark-dot.mark-dot-0 { --mark-delay:0ms; --mark-life:980ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-0 .agilent-mark-dot.mark-dot-1 { --mark-delay:71ms; --mark-life:1063ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-0 .agilent-mark-dot.mark-dot-2 { --mark-delay:142ms; --mark-life:1146ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-0 .agilent-mark-dot.mark-dot-3 { --mark-delay:213ms; --mark-life:1229ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-1 .agilent-mark-dot.mark-dot-0 { --mark-delay:43ms; --mark-life:1039ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-1 .agilent-mark-dot.mark-dot-1 { --mark-delay:114ms; --mark-life:1122ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-1 .agilent-mark-dot.mark-dot-2 { --mark-delay:185ms; --mark-life:1205ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-1 .agilent-mark-dot.mark-dot-3 { --mark-delay:256ms; --mark-life:1288ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-2 .agilent-mark-dot.mark-dot-0 { --mark-delay:86ms; --mark-life:1098ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-2 .agilent-mark-dot.mark-dot-1 { --mark-delay:157ms; --mark-life:1181ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-2 .agilent-mark-dot.mark-dot-2 { --mark-delay:228ms; --mark-life:1264ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-2 .agilent-mark-dot.mark-dot-3 { --mark-delay:299ms; --mark-life:1347ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-3 .agilent-mark-dot.mark-dot-0 { --mark-delay:129ms; --mark-life:1157ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-3 .agilent-mark-dot.mark-dot-1 { --mark-delay:200ms; --mark-life:1240ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-3 .agilent-mark-dot.mark-dot-2 { --mark-delay:271ms; --mark-life:1323ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-3 .agilent-mark-dot.mark-dot-3 { --mark-delay:32ms; --mark-life:1036ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-4 .agilent-mark-dot.mark-dot-0 { --mark-delay:172ms; --mark-life:1216ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-4 .agilent-mark-dot.mark-dot-1 { --mark-delay:243ms; --mark-life:1299ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-4 .agilent-mark-dot.mark-dot-2 { --mark-delay:4ms; --mark-life:1012ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-4 .agilent-mark-dot.mark-dot-3 { --mark-delay:75ms; --mark-life:1095ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-5 .agilent-mark-dot.mark-dot-0 { --mark-delay:215ms; --mark-life:1275ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-5 .agilent-mark-dot.mark-dot-1 { --mark-delay:286ms; --mark-life:988ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-5 .agilent-mark-dot.mark-dot-2 { --mark-delay:47ms; --mark-life:1071ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-5 .agilent-mark-dot.mark-dot-3 { --mark-delay:118ms; --mark-life:1154ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-6 .agilent-mark-dot.mark-dot-0 { --mark-delay:258ms; --mark-life:1334ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-6 .agilent-mark-dot.mark-dot-1 { --mark-delay:19ms; --mark-life:1047ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-6 .agilent-mark-dot.mark-dot-2 { --mark-delay:90ms; --mark-life:1130ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-6 .agilent-mark-dot.mark-dot-3 { --mark-delay:161ms; --mark-life:1213ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-7 .agilent-mark-dot.mark-dot-0 { --mark-delay:301ms; --mark-life:1023ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-7 .agilent-mark-dot.mark-dot-1 { --mark-delay:62ms; --mark-life:1106ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-7 .agilent-mark-dot.mark-dot-2 { --mark-delay:133ms; --mark-life:1189ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-mark-arm.arm-7 .agilent-mark-dot.mark-dot-3 { --mark-delay:204ms; --mark-life:1272ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-0 { --dot-x:75.4286px; --dot-y:0px; --dot-x-mid:61.8514px; --dot-y-mid:0px; --dot-x-near:34.6971px; --dot-y-near:0px; --dot-size:5.76px; --dot-delay:0ms; --spark-life:1320ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-1 { --dot-x:94.9271px; --dot-y:17.745px; --dot-x-mid:77.8402px; --dot-y-mid:14.5509px; --dot-x-near:43.6665px; --dot-y-near:8.1627px; --dot-size:2.16px; --dot-delay:19ms; --spark-life:1403ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-2 { --dot-x:109.7653px; --dot-y:42.5233px; --dot-x-mid:90.0075px; --dot-y-mid:34.8691px; --dot-x-near:50.492px; --dot-y-near:19.5607px; --dot-size:2.16px; --dot-delay:38ms; --spark-life:1486ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-3 { --dot-x:118.0587px; --dot-y:73.0989px; --dot-x-mid:96.8082px; --dot-y-mid:59.9411px; --dot-x-near:54.307px; --dot-y-near:33.6255px; --dot-size:3.6px; --dot-delay:57ms; --spark-life:1569ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-4 { --dot-x:118.2414px; --dot-y:107.7913px; --dot-x-mid:96.958px; --dot-y-mid:88.3889px; --dot-x-near:54.3911px; --dot-y-near:49.584px; --dot-size:2.16px; --dot-delay:76ms; --spark-life:1652ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-5 { --dot-x:56.1311px; --dot-y:74.3296px; --dot-x-mid:46.0275px; --dot-y-mid:60.9503px; --dot-x-near:25.8203px; --dot-y-near:34.1916px; --dot-size:2.16px; --dot-delay:95ms; --spark-life:1735ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-6 { --dot-x:50.9415px; --dot-y:102.3044px; --dot-x-mid:41.7721px; --dot-y-mid:83.8896px; --dot-x-near:23.4331px; --dot-y-near:47.06px; --dot-size:3.6px; --dot-delay:114ms; --spark-life:1818ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-7 { --dot-x:37.0618px; --dot-y:130.2587px; --dot-x-mid:30.3907px; --dot-y-mid:106.8121px; --dot-x-near:17.0484px; --dot-y-near:59.919px; --dot-size:5.76px; --dot-delay:133ms; --spark-life:1901ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-8 { --dot-x:14.4466px; --dot-y:155.9035px; --dot-x-mid:11.8462px; --dot-y-mid:127.8409px; --dot-x-near:6.6454px; --dot-y-near:71.7156px; --dot-size:2.16px; --dot-delay:152ms; --spark-life:1984ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-9 { --dot-x:-8.2778px; --dot-y:89.3316px; --dot-x-mid:-6.7878px; --dot-y-mid:73.2519px; --dot-x-near:-3.8078px; --dot-y-near:41.0925px; --dot-size:3.6px; --dot-delay:171ms; --spark-life:1347ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-10 { --dot-x:-30.3375px; --dot-y:106.6252px; --dot-x-mid:-24.8767px; --dot-y-mid:87.4327px; --dot-x-near:-13.9552px; --dot-y-near:49.0476px; --dot-size:2.16px; --dot-delay:190ms; --spark-life:1430ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-11 { --dot-x:-58.8375px; --dot-y:118.1616px; --dot-x-mid:-48.2467px; --dot-y-mid:96.8925px; --dot-x-near:-27.0652px; --dot-y-near:54.3543px; --dot-size:2.16px; --dot-delay:209ms; --spark-life:1513ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-12 { --dot-x:-92.2892px; --dot-y:122.2106px; --dot-x-mid:-75.6771px; --dot-y-mid:100.2127px; --dot-x-near:-42.453px; --dot-y-near:56.2169px; --dot-size:3.6px; --dot-delay:18ms; --spark-life:1596ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-13 { --dot-x:-63.7659px; --dot-y:58.1303px; --dot-x-mid:-52.288px; --dot-y-mid:47.6669px; --dot-x-near:-29.3323px; --dot-y-near:26.7399px; --dot-size:2.16px; --dot-delay:37ms; --spark-life:1679ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-14 { --dot-x:-91.3376px; --dot-y:56.5539px; --dot-x-mid:-74.8968px; --dot-y-mid:46.3742px; --dot-x-near:-42.0153px; --dot-y-near:26.0148px; --dot-size:5.76px; --dot-delay:56ms; --spark-life:1762ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-15 { --dot-x:-119.8893px; --dot-y:46.4454px; --dot-x-mid:-98.3092px; --dot-y-mid:38.0852px; --dot-x-near:-55.1491px; --dot-y-near:21.3649px; --dot-size:3.6px; --dot-delay:75ms; --spark-life:1845ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-16 { --dot-x:-147.1651px; --dot-y:27.5099px; --dot-x-mid:-120.6754px; --dot-y-mid:22.5581px; --dot-x-near:-67.696px; --dot-y-near:12.6546px; --dot-size:2.16px; --dot-delay:94ms; --spark-life:1928ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-17 { --dot-x:-82.8571px; --dot-y:0px; --dot-x-mid:-67.9429px; --dot-y-mid:0px; --dot-x-near:-38.1143px; --dot-y-near:0px; --dot-size:2.16px; --dot-delay:113ms; --spark-life:2011ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-18 { --dot-x:-102.2292px; --dot-y:-19.1099px; --dot-x-mid:-83.8279px; --dot-y-mid:-15.6702px; --dot-x-near:-47.0254px; --dot-y-near:-8.7906px; --dot-size:3.6px; --dot-delay:132ms; --spark-life:1374ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-19 { --dot-x:-116.6922px; --dot-y:-45.2068px; --dot-x-mid:-95.6876px; --dot-y-mid:-37.0696px; --dot-x-near:-53.6784px; --dot-y-near:-20.7951px; --dot-size:2.16px; --dot-delay:151ms; --spark-life:1457ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-20 { --dot-x:-124.3746px; --dot-y:-77.0095px; --dot-x-mid:-101.9872px; --dot-y-mid:-63.1478px; --dot-x-near:-57.2123px; --dot-y-near:-35.4244px; --dot-size:2.16px; --dot-delay:170ms; --spark-life:1540ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-21 { --dot-x:-58.6984px; --dot-y:-53.5107px; --dot-x-mid:-48.1327px; --dot-y-mid:-43.8788px; --dot-x-near:-27.0013px; --dot-y-near:-24.6149px; --dot-size:5.76px; --dot-delay:189ms; --spark-life:1623ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-22 { --dot-x:-60.6078px; --dot-y:-80.2577px; --dot-x-mid:-49.6984px; --dot-y-mid:-65.8113px; --dot-x-near:-27.8796px; --dot-y-near:-36.9186px; --dot-size:2.16px; --dot-delay:208ms; --spark-life:1706ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-23 { --dot-x:-54.2527px; --dot-y:-108.9542px; --dot-x-mid:-44.4872px; --dot-y-mid:-89.3424px; --dot-x-near:-24.9563px; --dot-y-near:-50.1189px; --dot-size:2.16px; --dot-delay:17ms; --spark-life:1789ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-24 { --dot-x:-39.0947px; --dot-y:-137.4037px; --dot-x-mid:-32.0577px; --dot-y-mid:-112.671px; --dot-x-near:-17.9836px; --dot-y-near:-63.2057px; --dot-size:3.6px; --dot-delay:36ms; --spark-life:1872ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-25 { --dot-x:-7.0124px; --dot-y:-75.6758px; --dot-x-mid:-5.7502px; --dot-y-mid:-62.0542px; --dot-x-near:-3.2257px; --dot-y-near:-34.8109px; --dot-size:2.16px; --dot-delay:55ms; --spark-life:1955ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-26 { --dot-x:8.9632px; --dot-y:-96.7285px; --dot-x-mid:7.3498px; --dot-y-mid:-79.3173px; --dot-x-near:4.1231px; --dot-y-near:-44.4951px; --dot-size:2.16px; --dot-delay:74ms; --spark-life:2038ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-27 { --dot-x:32.3704px; --dot-y:-113.7702px; --dot-x-mid:26.5437px; --dot-y-mid:-93.2916px; --dot-x-near:14.8904px; --dot-y-near:-52.3343px; --dot-size:3.6px; --dot-delay:93ms; --spark-life:1401ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-28 { --dot-x:62.1487px; --dot-y:-124.8113px; --dot-x-mid:50.9619px; --dot-y-mid:-102.3453px; --dot-x-near:28.5884px; --dot-y-near:-57.4132px; --dot-size:5.76px; --dot-delay:112ms; --spark-life:1484ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-29 { --dot-x:96.7659px; --dot-y:-128.1388px; --dot-x-mid:79.348px; --dot-y-mid:-105.0738px; --dot-x-near:44.5123px; --dot-y-near:-58.9438px; --dot-size:2.16px; --dot-delay:131ms; --spark-life:1567ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-30 { --dot-x:69.2557px; --dot-y:-63.1349px; --dot-x-mid:56.7897px; --dot-y-mid:-51.7706px; --dot-x-near:31.8576px; --dot-y-near:-29.0421px; --dot-size:3.6px; --dot-delay:150ms; --spark-life:1650ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-31 { --dot-x:97.6535px; --dot-y:-60.4645px; --dot-x-mid:80.0759px; --dot-y-mid:-49.5809px; --dot-x-near:44.9206px; --dot-y-near:-27.8137px; --dot-size:2.16px; --dot-delay:169ms; --spark-life:1733ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-32 { --dot-x:126.8162px; --dot-y:-49.1289px; --dot-x-mid:103.9893px; --dot-y-mid:-40.2857px; --dot-x-near:58.3355px; --dot-y-near:-22.5993px; --dot-size:2.16px; --dot-delay:188ms; --spark-life:1816ms; }
  .agilent-skyburst.celebration-launch-0 .agilent-burst-dot.dot-33 { --dot-x:154.4672px; --dot-y:-28.8749px; --dot-x-mid:126.6631px; --dot-y-mid:-23.6774px; --dot-x-near:71.0549px; --dot-y-near:-13.2825px; --dot-size:3.6px; --dot-delay:207ms; --spark-life:1899ms; }
  .celebration-launch-1 { --launch-x:38%; --rocket-rise:calc(100vh - 23vh); --firework-color:#ffcc58; --launch-delay:150ms; }
  .agilent-skyburst.celebration-launch-1 { --burst-x:38%; --burst-y:23%; --burst-size:138px; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-0 .agilent-mark-dot.mark-dot-0 { --mark-delay:29ms; --mark-life:1021ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-0 .agilent-mark-dot.mark-dot-1 { --mark-delay:100ms; --mark-life:1104ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-0 .agilent-mark-dot.mark-dot-2 { --mark-delay:171ms; --mark-life:1187ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-0 .agilent-mark-dot.mark-dot-3 { --mark-delay:242ms; --mark-life:1270ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-1 .agilent-mark-dot.mark-dot-0 { --mark-delay:72ms; --mark-life:1080ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-1 .agilent-mark-dot.mark-dot-1 { --mark-delay:143ms; --mark-life:1163ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-1 .agilent-mark-dot.mark-dot-2 { --mark-delay:214ms; --mark-life:1246ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-1 .agilent-mark-dot.mark-dot-3 { --mark-delay:285ms; --mark-life:1329ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-2 .agilent-mark-dot.mark-dot-0 { --mark-delay:115ms; --mark-life:1139ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-2 .agilent-mark-dot.mark-dot-1 { --mark-delay:186ms; --mark-life:1222ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-2 .agilent-mark-dot.mark-dot-2 { --mark-delay:257ms; --mark-life:1305ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-2 .agilent-mark-dot.mark-dot-3 { --mark-delay:18ms; --mark-life:1018ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-3 .agilent-mark-dot.mark-dot-0 { --mark-delay:158ms; --mark-life:1198ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-3 .agilent-mark-dot.mark-dot-1 { --mark-delay:229ms; --mark-life:1281ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-3 .agilent-mark-dot.mark-dot-2 { --mark-delay:300ms; --mark-life:994ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-3 .agilent-mark-dot.mark-dot-3 { --mark-delay:61ms; --mark-life:1077ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-4 .agilent-mark-dot.mark-dot-0 { --mark-delay:201ms; --mark-life:1257ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-4 .agilent-mark-dot.mark-dot-1 { --mark-delay:272ms; --mark-life:1340ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-4 .agilent-mark-dot.mark-dot-2 { --mark-delay:33ms; --mark-life:1053ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-4 .agilent-mark-dot.mark-dot-3 { --mark-delay:104ms; --mark-life:1136ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-5 .agilent-mark-dot.mark-dot-0 { --mark-delay:244ms; --mark-life:1316ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-5 .agilent-mark-dot.mark-dot-1 { --mark-delay:5ms; --mark-life:1029ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-5 .agilent-mark-dot.mark-dot-2 { --mark-delay:76ms; --mark-life:1112ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-5 .agilent-mark-dot.mark-dot-3 { --mark-delay:147ms; --mark-life:1195ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-6 .agilent-mark-dot.mark-dot-0 { --mark-delay:287ms; --mark-life:1005ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-6 .agilent-mark-dot.mark-dot-1 { --mark-delay:48ms; --mark-life:1088ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-6 .agilent-mark-dot.mark-dot-2 { --mark-delay:119ms; --mark-life:1171ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-6 .agilent-mark-dot.mark-dot-3 { --mark-delay:190ms; --mark-life:1254ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-7 .agilent-mark-dot.mark-dot-0 { --mark-delay:20ms; --mark-life:1064ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-7 .agilent-mark-dot.mark-dot-1 { --mark-delay:91ms; --mark-life:1147ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-7 .agilent-mark-dot.mark-dot-2 { --mark-delay:162ms; --mark-life:1230ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-mark-arm.arm-7 .agilent-mark-dot.mark-dot-3 { --mark-delay:233ms; --mark-life:1313ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-0 { --dot-x:127.0996px; --dot-y:36.548px; --dot-x-mid:104.2217px; --dot-y-mid:29.9694px; --dot-x-near:58.4658px; --dot-y-near:16.8121px; --dot-size:6.5714px; --dot-delay:31ms; --spark-life:1387ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-1 { --dot-x:145.3883px; --dot-y:72.9036px; --dot-x-mid:119.2184px; --dot-y-mid:59.781px; --dot-x-near:66.8786px; --dot-y-near:33.5357px; --dot-size:2.4643px; --dot-delay:50ms; --spark-life:1470ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-2 { --dot-x:153.7194px; --dot-y:116.761px; --dot-x-mid:126.0499px; --dot-y-mid:95.744px; --dot-x-near:70.7109px; --dot-y-near:53.7101px; --dot-size:2.4643px; --dot-delay:69ms; --spark-life:1553ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-3 { --dot-x:150.0598px; --dot-y:165.5366px; --dot-x-mid:123.0491px; --dot-y-mid:135.74px; --dot-x-near:69.0275px; --dot-y-near:76.1468px; --dot-size:4.1071px; --dot-delay:88ms; --spark-life:1636ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-4 { --dot-x:66.7227px; --dot-y:108.4382px; --dot-x-mid:54.7126px; --dot-y-mid:88.9193px; --dot-x-near:30.6924px; --dot-y-near:49.8815px; --dot-size:2.4643px; --dot-delay:107ms; --spark-life:1719ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-5 { --dot-x:56.5609px; --dot-y:147.2232px; --dot-x-mid:46.3799px; --dot-y-mid:120.723px; --dot-x-near:26.018px; --dot-y-near:67.7227px; --dot-size:2.4643px; --dot-delay:126ms; --spark-life:1802ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-6 { --dot-x:34.0466px; --dot-y:185.0003px; --dot-x-mid:27.9182px; --dot-y-mid:151.7003px; --dot-x-near:15.6614px; --dot-y-near:85.1002px; --dot-size:4.1071px; --dot-delay:145ms; --spark-life:1885ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-7 { --dot-x:-0.6119px; --dot-y:218.4991px; --dot-x-mid:-0.5018px; --dot-y-mid:179.1693px; --dot-x-near:-0.2815px; --dot-y-near:100.5096px; --dot-size:6.5714px; --dot-delay:164ms; --spark-life:1968ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-8 { --dot-x:-22.8265px; --dot-y:120.2454px; --dot-x-mid:-18.7177px; --dot-y-mid:98.6013px; --dot-x-near:-10.5002px; --dot-y-near:55.3129px; --dot-size:2.4643px; --dot-delay:183ms; --spark-life:1331ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-9 { --dot-x:-55.5914px; --dot-y:142.3133px; --dot-x-mid:-45.5849px; --dot-y-mid:116.6969px; --dot-x-near:-25.572px; --dot-y-near:65.4641px; --dot-size:4.1071px; --dot-delay:202ms; --spark-life:1414ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-10 { --dot-x:-96.8669px; --dot-y:155.4709px; --dot-x-mid:-79.4308px; --dot-y-mid:127.4861px; --dot-x-near:-44.5588px; --dot-y-near:71.5166px; --dot-size:2.4643px; --dot-delay:11ms; --spark-life:1497ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-11 { --dot-x:-144.3236px; --dot-y:157.4276px; --dot-x-mid:-118.3454px; --dot-y-mid:129.0906px; --dot-x-near:-66.3889px; --dot-y-near:72.4167px; --dot-size:2.4643px; --dot-delay:30ms; --spark-life:1580ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-12 { --dot-x:-93.9364px; --dot-y:70.5252px; --dot-x-mid:-77.0279px; --dot-y-mid:57.8307px; --dot-x-near:-43.2107px; --dot-y-near:32.4416px; --dot-size:4.1071px; --dot-delay:49ms; --spark-life:1663ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-13 { --dot-x:-132.5403px; --dot-y:65.5347px; --dot-x-mid:-108.6831px; --dot-y-mid:53.7384px; --dot-x-near:-60.9686px; --dot-y-near:30.1459px; --dot-size:2.4643px; --dot-delay:68ms; --spark-life:1746ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-14 { --dot-x:-171.5814px; --dot-y:48.3001px; --dot-x-mid:-140.6967px; --dot-y-mid:39.6061px; --dot-x-near:-78.9274px; --dot-y-near:22.218px; --dot-size:6.5714px; --dot-delay:87ms; --spark-life:1829ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-15 { --dot-x:-207.8059px; --dot-y:18.6692px; --dot-x-mid:-170.4009px; --dot-y-mid:15.3088px; --dot-x-near:-95.5907px; --dot-y-near:8.5878px; --dot-size:4.1071px; --dot-delay:106ms; --spark-life:1912ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-16 { --dot-x:-112.0261px; --dot-y:-10.6973px; --dot-x-mid:-91.8614px; --dot-y-mid:-8.7718px; --dot-x-near:-51.532px; --dot-y-near:-4.9207px; --dot-size:2.4643px; --dot-delay:125ms; --spark-life:1995ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-17 { --dot-x:-137.3623px; --dot-y:-39.4991px; --dot-x-mid:-112.6371px; --dot-y-mid:-32.3893px; --dot-x-near:-63.1866px; --dot-y-near:-18.1696px; --dot-size:2.4643px; --dot-delay:144ms; --spark-life:1358ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-18 { --dot-x:-154.934px; --dot-y:-77.6902px; --dot-x-mid:-127.0459px; --dot-y-mid:-63.706px; --dot-x-near:-71.2696px; --dot-y-near:-35.7375px; --dot-size:4.1071px; --dot-delay:163ms; --spark-life:1441ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-19 { --dot-x:-162.223px; --dot-y:-123.2201px; --dot-x-mid:-133.0229px; --dot-y-mid:-101.0405px; --dot-x-near:-74.6226px; --dot-y-near:-56.6812px; --dot-size:2.4643px; --dot-delay:182ms; --spark-life:1524ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-20 { --dot-x:-157.2318px; --dot-y:-173.4483px; --dot-x-mid:-128.9301px; --dot-y-mid:-142.2276px; --dot-x-near:-72.3266px; --dot-y-near:-79.7862px; --dot-size:2.4643px; --dot-delay:201ms; --spark-life:1607ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-21 { --dot-x:-72.3188px; --dot-y:-117.533px; --dot-x-mid:-59.3014px; --dot-y-mid:-96.377px; --dot-x-near:-33.2666px; --dot-y-near:-54.0652px; --dot-size:6.5714px; --dot-delay:10ms; --spark-life:1690ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-22 { --dot-x:-60.3905px; --dot-y:-157.1914px; --dot-x-mid:-49.5202px; --dot-y-mid:-128.897px; --dot-x-near:-27.7796px; --dot-y-near:-72.308px; --dot-size:2.4643px; --dot-delay:29ms; --spark-life:1773ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-23 { --dot-x:-35.9794px; --dot-y:-195.5025px; --dot-x-mid:-29.5031px; --dot-y-mid:-160.3121px; --dot-x-near:-16.5505px; --dot-y-near:-89.9312px; --dot-size:2.4643px; --dot-delay:48ms; --spark-life:1856ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-24 { --dot-x:0.6418px; --dot-y:-229.1777px; --dot-x-mid:0.5263px; --dot-y-mid:-187.9257px; --dot-x-near:0.2952px; --dot-y-near:-105.4217px; --dot-size:4.1071px; --dot-delay:67ms; --spark-life:1939ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-25 { --dot-x:24.8181px; --dot-y:-130.7366px; --dot-x-mid:20.3508px; --dot-y-mid:-107.204px; --dot-x-near:11.4163px; --dot-y-near:-60.1389px; --dot-size:2.4643px; --dot-delay:86ms; --spark-life:2022ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-26 { --dot-x:59.4768px; --dot-y:-152.2599px; --dot-x-mid:48.771px; --dot-y-mid:-124.8531px; --dot-x-near:27.3593px; --dot-y-near:-70.0396px; --dot-size:2.4643px; --dot-delay:105ms; --spark-life:1385ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-27 { --dot-x:102.5138px; --dot-y:-164.5342px; --dot-x-mid:84.0613px; --dot-y-mid:-134.918px; --dot-x-near:47.1564px; --dot-y-near:-75.6857px; --dot-size:4.1071px; --dot-delay:124ms; --spark-life:1468ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-28 { --dot-x:151.5398px; --dot-y:-165.299px; --dot-x-mid:124.2626px; --dot-y-mid:-135.5452px; --dot-x-near:69.7083px; --dot-y-near:-76.0375px; --dot-size:6.5714px; --dot-delay:143ms; --spark-life:1551ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-29 { --dot-x:102.4761px; --dot-y:-76.9366px; --dot-x-mid:84.0304px; --dot-y-mid:-63.088px; --dot-x-near:47.139px; --dot-y-near:-35.3908px; --dot-size:2.4643px; --dot-delay:162ms; --spark-life:1634ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-30 { --dot-x:142.1127px; --dot-y:-70.2677px; --dot-x-mid:116.5324px; --dot-y-mid:-57.6195px; --dot-x-near:65.3718px; --dot-y-near:-32.3231px; --dot-size:4.1071px; --dot-delay:181ms; --spark-life:1717ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-31 { --dot-x:181.8604px; --dot-y:-51.1936px; --dot-x-mid:149.1256px; --dot-y-mid:-41.9788px; --dot-x-near:83.6558px; --dot-y-near:-23.5491px; --dot-size:2.4643px; --dot-delay:200ms; --spark-life:1800ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-32 { --dot-x:218.4417px; --dot-y:-19.6247px; --dot-x-mid:179.1222px; --dot-y-mid:-16.0923px; --dot-x-near:100.4832px; --dot-y-near:-9.0274px; --dot-size:2.4643px; --dot-delay:9ms; --spark-life:1883ms; }
  .agilent-skyburst.celebration-launch-1 .agilent-burst-dot.dot-33 { --dot-x:122.6564px; --dot-y:11.7123px; --dot-x-mid:100.5782px; --dot-y-mid:9.6041px; --dot-x-near:56.4219px; --dot-y-near:5.3877px; --dot-size:4.1071px; --dot-delay:28ms; --spark-life:1966ms; }
  .celebration-launch-2 { --launch-x:65%; --rocket-rise:calc(100vh - 33vh); --firework-color:#f477a5; --launch-delay:300ms; }
  .agilent-skyburst.celebration-launch-2 { --burst-x:65%; --burst-y:33%; --burst-size:178px; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-0 .agilent-mark-dot.mark-dot-0 { --mark-delay:58ms; --mark-life:1062ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-0 .agilent-mark-dot.mark-dot-1 { --mark-delay:129ms; --mark-life:1145ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-0 .agilent-mark-dot.mark-dot-2 { --mark-delay:200ms; --mark-life:1228ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-0 .agilent-mark-dot.mark-dot-3 { --mark-delay:271ms; --mark-life:1311ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-1 .agilent-mark-dot.mark-dot-0 { --mark-delay:101ms; --mark-life:1121ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-1 .agilent-mark-dot.mark-dot-1 { --mark-delay:172ms; --mark-life:1204ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-1 .agilent-mark-dot.mark-dot-2 { --mark-delay:243ms; --mark-life:1287ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-1 .agilent-mark-dot.mark-dot-3 { --mark-delay:4ms; --mark-life:1000ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-2 .agilent-mark-dot.mark-dot-0 { --mark-delay:144ms; --mark-life:1180ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-2 .agilent-mark-dot.mark-dot-1 { --mark-delay:215ms; --mark-life:1263ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-2 .agilent-mark-dot.mark-dot-2 { --mark-delay:286ms; --mark-life:1346ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-2 .agilent-mark-dot.mark-dot-3 { --mark-delay:47ms; --mark-life:1059ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-3 .agilent-mark-dot.mark-dot-0 { --mark-delay:187ms; --mark-life:1239ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-3 .agilent-mark-dot.mark-dot-1 { --mark-delay:258ms; --mark-life:1322ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-3 .agilent-mark-dot.mark-dot-2 { --mark-delay:19ms; --mark-life:1035ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-3 .agilent-mark-dot.mark-dot-3 { --mark-delay:90ms; --mark-life:1118ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-4 .agilent-mark-dot.mark-dot-0 { --mark-delay:230ms; --mark-life:1298ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-4 .agilent-mark-dot.mark-dot-1 { --mark-delay:301ms; --mark-life:1011ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-4 .agilent-mark-dot.mark-dot-2 { --mark-delay:62ms; --mark-life:1094ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-4 .agilent-mark-dot.mark-dot-3 { --mark-delay:133ms; --mark-life:1177ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-5 .agilent-mark-dot.mark-dot-0 { --mark-delay:273ms; --mark-life:987ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-5 .agilent-mark-dot.mark-dot-1 { --mark-delay:34ms; --mark-life:1070ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-5 .agilent-mark-dot.mark-dot-2 { --mark-delay:105ms; --mark-life:1153ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-5 .agilent-mark-dot.mark-dot-3 { --mark-delay:176ms; --mark-life:1236ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-6 .agilent-mark-dot.mark-dot-0 { --mark-delay:6ms; --mark-life:1046ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-6 .agilent-mark-dot.mark-dot-1 { --mark-delay:77ms; --mark-life:1129ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-6 .agilent-mark-dot.mark-dot-2 { --mark-delay:148ms; --mark-life:1212ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-6 .agilent-mark-dot.mark-dot-3 { --mark-delay:219ms; --mark-life:1295ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-7 .agilent-mark-dot.mark-dot-0 { --mark-delay:49ms; --mark-life:1105ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-7 .agilent-mark-dot.mark-dot-1 { --mark-delay:120ms; --mark-life:1188ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-7 .agilent-mark-dot.mark-dot-2 { --mark-delay:191ms; --mark-life:1271ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-mark-arm.arm-7 .agilent-mark-dot.mark-dot-3 { --mark-delay:262ms; --mark-life:984ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-0 { --dot-x:170.5605px; --dot-y:106.9328px; --dot-x-mid:139.8596px; --dot-y-mid:87.6849px; --dot-x-near:78.4578px; --dot-y-near:49.1891px; --dot-size:8.4762px; --dot-delay:62ms; --spark-life:1454ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-1 { --dot-x:176.8301px; --dot-y:163.0249px; --dot-x-mid:145.0007px; --dot-y-mid:133.6804px; --dot-x-near:81.3418px; --dot-y-near:74.9914px; --dot-size:3.1786px; --dot-delay:81ms; --spark-life:1537ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-2 { --dot-x:167.3126px; --dot-y:224.1575px; --dot-x-mid:137.1963px; --dot-y-mid:183.8091px; --dot-x-near:76.9638px; --dot-y-near:103.1124px; --dot-size:3.1786px; --dot-delay:100ms; --spark-life:1620ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-3 { --dot-x:68.6417px; --dot-y:139.8084px; --dot-x-mid:56.2862px; --dot-y-mid:114.6429px; --dot-x-near:31.5752px; --dot-y-near:64.3118px; --dot-size:5.2976px; --dot-delay:119ms; --spark-life:1703ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-4 { --dot-x:52.3001px; --dot-y:187.8061px; --dot-x-mid:42.8861px; --dot-y-mid:154.001px; --dot-x-near:24.0581px; --dot-y-near:86.3908px; --dot-size:3.1786px; --dot-delay:138ms; --spark-life:1786ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-5 { --dot-x:20.2988px; --dot-y:233.2733px; --dot-x-mid:16.645px; --dot-y-mid:191.2841px; --dot-x-near:9.3374px; --dot-y-near:107.3057px; --dot-size:3.1786px; --dot-delay:157ms; --spark-life:1869ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-6 { --dot-x:-26.7464px; --dot-y:272.0455px; --dot-x-mid:-21.9321px; --dot-y-mid:223.0773px; --dot-x-near:-12.3034px; --dot-y-near:125.1409px; --dot-size:5.2976px; --dot-delay:176ms; --spark-life:1952ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-7 { --dot-x:-41.6875px; --dot-y:143.4586px; --dot-x-mid:-34.1838px; --dot-y-mid:117.6361px; --dot-x-near:-19.1763px; --dot-y-near:65.991px; --dot-size:8.4762px; --dot-delay:195ms; --spark-life:2035ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-8 { --dot-x:-85.0084px; --dot-y:168.35px; --dot-x-mid:-69.7069px; --dot-y-mid:138.047px; --dot-x-near:-39.1039px; --dot-y-near:77.441px; --dot-size:3.1786px; --dot-delay:4ms; --spark-life:1398ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-9 { --dot-x:-138.2948px; --dot-y:181.0146px; --dot-x-mid:-113.4017px; --dot-y-mid:148.432px; --dot-x-near:-63.6156px; --dot-y-near:83.2667px; --dot-size:5.2976px; --dot-delay:23ms; --spark-life:1481ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-10 { --dot-x:-198.3198px; --dot-y:178.7687px; --dot-x-mid:-162.6223px; --dot-y-mid:146.5903px; --dot-x-near:-91.2271px; --dot-y-near:82.2336px; --dot-size:3.1786px; --dot-delay:42ms; --spark-life:1564ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-11 { --dot-x:-122.0313px; --dot-y:74.6162px; --dot-x-mid:-100.0656px; --dot-y-mid:61.1853px; --dot-x-near:-56.1344px; --dot-y-near:34.3235px; --dot-size:3.1786px; --dot-delay:61ms; --spark-life:1647ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-12 { --dot-x:-170.298px; --dot-y:64.8791px; --dot-x-mid:-139.6444px; --dot-y-mid:53.2009px; --dot-x-near:-78.3371px; --dot-y-near:29.8444px; --dot-size:5.2976px; --dot-delay:80ms; --spark-life:1730ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-13 { --dot-x:-217.8945px; --dot-y:39.4697px; --dot-x-mid:-178.6735px; --dot-y-mid:32.3652px; --dot-x-near:-100.2315px; --dot-y-near:18.1561px; --dot-size:3.1786px; --dot-delay:99ms; --spark-life:1813ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-14 { --dot-x:-260.6388px; --dot-y:-1.4599px; --dot-x-mid:-213.7238px; --dot-y-mid:-1.1971px; --dot-x-near:-119.8938px; --dot-y-near:-0.6716px; --dot-size:8.4762px; --dot-delay:118ms; --spark-life:1896ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-15 { --dot-x:-294.4266px; --dot-y:-56.7465px; --dot-x-mid:-241.4298px; --dot-y-mid:-46.5321px; --dot-x-near:-135.4362px; --dot-y-near:-26.1034px; --dot-size:5.2976px; --dot-delay:137ms; --spark-life:1979ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-16 { --dot-x:-163.6457px; --dot-y:-64.4532px; --dot-x-mid:-134.1894px; --dot-y-mid:-52.8516px; --dot-x-near:-75.277px; --dot-y-near:-29.6485px; --dot-size:3.1786px; --dot-delay:156ms; --spark-life:1342ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-17 { --dot-x:-182.2305px; --dot-y:-114.2493px; --dot-x-mid:-149.429px; --dot-y-mid:-93.6844px; --dot-x-near:-83.826px; --dot-y-near:-52.5547px; --dot-size:3.1786px; --dot-delay:175ms; --spark-life:1425ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-18 { --dot-x:-186.9569px; --dot-y:-172.3611px; --dot-x-mid:-153.3047px; --dot-y-mid:-141.3361px; --dot-x-near:-86.0002px; --dot-y-near:-79.2861px; --dot-size:5.2976px; --dot-delay:194ms; --spark-life:1508ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-19 { --dot-x:-175.5515px; --dot-y:-235.1956px; --dot-x-mid:-143.9522px; --dot-y-mid:-192.8604px; --dot-x-near:-80.7537px; --dot-y-near:-108.19px; --dot-size:3.1786px; --dot-delay:3ms; --spark-life:1591ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-20 { --dot-x:-74.7121px; --dot-y:-152.1724px; --dot-x-mid:-61.2639px; --dot-y-mid:-124.7813px; --dot-x-near:-34.3676px; --dot-y-near:-69.9993px; --dot-size:3.1786px; --dot-delay:22ms; --spark-life:1674ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-21 { --dot-x:-55.9952px; --dot-y:-201.075px; --dot-x-mid:-45.9161px; --dot-y-mid:-164.8815px; --dot-x-near:-25.7578px; --dot-y-near:-92.4945px; --dot-size:8.4762px; --dot-delay:41ms; --spark-life:1757ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-22 { --dot-x:-21.4928px; --dot-y:-246.9952px; --dot-x-mid:-17.6241px; --dot-y-mid:-202.5361px; --dot-x-near:-9.8867px; --dot-y-near:-113.6178px; --dot-size:3.1786px; --dot-delay:60ms; --spark-life:1840ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-23 { --dot-x:28.0941px; --dot-y:-285.7532px; --dot-x-mid:23.0372px; --dot-y-mid:-234.3176px; --dot-x-near:12.9233px; --dot-y-near:-131.4465px; --dot-size:3.1786px; --dot-delay:79ms; --spark-life:1923ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-24 { --dot-x:45.531px; --dot-y:-156.6853px; --dot-x-mid:37.3354px; --dot-y-mid:-128.482px; --dot-x-near:20.9443px; --dot-y-near:-72.0752px; --dot-size:5.2976px; --dot-delay:98ms; --spark-life:2006ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-25 { --dot-x:91.2169px; --dot-y:-180.6452px; --dot-x-mid:74.7979px; --dot-y-mid:-148.1291px; --dot-x-near:41.9598px; --dot-y-near:-83.0968px; --dot-size:3.1786px; --dot-delay:117ms; --spark-life:1369ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-26 { --dot-x:146.6568px; --dot-y:-191.9597px; --dot-x-mid:120.2586px; --dot-y-mid:-157.407px; --dot-x-near:67.4621px; --dot-y-near:-88.3015px; --dot-size:3.1786px; --dot-delay:136ms; --spark-life:1452ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-27 { --dot-x:208.5506px; --dot-y:-187.9909px; --dot-x-mid:171.0115px; --dot-y-mid:-154.1525px; --dot-x-near:95.9333px; --dot-y-near:-86.4758px; --dot-size:5.2976px; --dot-delay:155ms; --spark-life:1535ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-28 { --dot-x:133.7824px; --dot-y:-81.8015px; --dot-x-mid:109.7016px; --dot-y-mid:-67.0772px; --dot-x-near:61.5399px; --dot-y-near:-37.6287px; --dot-size:8.4762px; --dot-delay:174ms; --spark-life:1618ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-29 { --dot-x:183.1694px; --dot-y:-69.7828px; --dot-x-mid:150.1989px; --dot-y-mid:-57.2219px; --dot-x-near:84.2579px; --dot-y-near:-32.1001px; --dot-size:3.1786px; --dot-delay:193ms; --spark-life:1701ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-30 { --dot-x:231.4478px; --dot-y:-41.9248px; --dot-x-mid:189.7872px; --dot-y-mid:-34.3783px; --dot-x-near:106.466px; --dot-y-near:-19.2854px; --dot-size:5.2976px; --dot-delay:2ms; --spark-life:1784ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-31 { --dot-x:274.4124px; --dot-y:1.5371px; --dot-x-mid:225.0181px; --dot-y-mid:1.2604px; --dot-x-near:126.2297px; --dot-y-near:0.7071px; --dot-size:3.1786px; --dot-delay:21ms; --spark-life:1867ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-32 { --dot-x:147.7335px; --dot-y:28.4735px; --dot-x-mid:121.1414px; --dot-y-mid:23.3483px; --dot-x-near:67.9574px; --dot-y-near:13.0978px; --dot-size:3.1786px; --dot-delay:40ms; --spark-life:1950ms; }
  .agilent-skyburst.celebration-launch-2 .agilent-burst-dot.dot-33 { --dot-x:176.4613px; --dot-y:69.5007px; --dot-x-mid:144.6982px; --dot-y-mid:56.9906px; --dot-x-near:81.1722px; --dot-y-near:31.9703px; --dot-size:5.2976px; --dot-delay:59ms; --spark-life:2033ms; }
  .celebration-launch-3 { --launch-x:84%; --rocket-rise:calc(100vh - 22vh); --firework-color:#ad8cff; --launch-delay:470ms; }
  .agilent-skyburst.celebration-launch-3 { --burst-x:84%; --burst-y:22%; --burst-size:222px; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-0 .agilent-mark-dot.mark-dot-0 { --mark-delay:87ms; --mark-life:1103ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-0 .agilent-mark-dot.mark-dot-1 { --mark-delay:158ms; --mark-life:1186ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-0 .agilent-mark-dot.mark-dot-2 { --mark-delay:229ms; --mark-life:1269ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-0 .agilent-mark-dot.mark-dot-3 { --mark-delay:300ms; --mark-life:982ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-1 .agilent-mark-dot.mark-dot-0 { --mark-delay:130ms; --mark-life:1162ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-1 .agilent-mark-dot.mark-dot-1 { --mark-delay:201ms; --mark-life:1245ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-1 .agilent-mark-dot.mark-dot-2 { --mark-delay:272ms; --mark-life:1328ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-1 .agilent-mark-dot.mark-dot-3 { --mark-delay:33ms; --mark-life:1041ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-2 .agilent-mark-dot.mark-dot-0 { --mark-delay:173ms; --mark-life:1221ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-2 .agilent-mark-dot.mark-dot-1 { --mark-delay:244ms; --mark-life:1304ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-2 .agilent-mark-dot.mark-dot-2 { --mark-delay:5ms; --mark-life:1017ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-2 .agilent-mark-dot.mark-dot-3 { --mark-delay:76ms; --mark-life:1100ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-3 .agilent-mark-dot.mark-dot-0 { --mark-delay:216ms; --mark-life:1280ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-3 .agilent-mark-dot.mark-dot-1 { --mark-delay:287ms; --mark-life:993ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-3 .agilent-mark-dot.mark-dot-2 { --mark-delay:48ms; --mark-life:1076ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-3 .agilent-mark-dot.mark-dot-3 { --mark-delay:119ms; --mark-life:1159ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-4 .agilent-mark-dot.mark-dot-0 { --mark-delay:259ms; --mark-life:1339ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-4 .agilent-mark-dot.mark-dot-1 { --mark-delay:20ms; --mark-life:1052ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-4 .agilent-mark-dot.mark-dot-2 { --mark-delay:91ms; --mark-life:1135ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-4 .agilent-mark-dot.mark-dot-3 { --mark-delay:162ms; --mark-life:1218ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-5 .agilent-mark-dot.mark-dot-0 { --mark-delay:302ms; --mark-life:1028ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-5 .agilent-mark-dot.mark-dot-1 { --mark-delay:63ms; --mark-life:1111ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-5 .agilent-mark-dot.mark-dot-2 { --mark-delay:134ms; --mark-life:1194ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-5 .agilent-mark-dot.mark-dot-3 { --mark-delay:205ms; --mark-life:1277ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-6 .agilent-mark-dot.mark-dot-0 { --mark-delay:35ms; --mark-life:1087ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-6 .agilent-mark-dot.mark-dot-1 { --mark-delay:106ms; --mark-life:1170ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-6 .agilent-mark-dot.mark-dot-2 { --mark-delay:177ms; --mark-life:1253ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-6 .agilent-mark-dot.mark-dot-3 { --mark-delay:248ms; --mark-life:1336ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-7 .agilent-mark-dot.mark-dot-0 { --mark-delay:78ms; --mark-life:1146ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-7 .agilent-mark-dot.mark-dot-1 { --mark-delay:149ms; --mark-life:1229ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-7 .agilent-mark-dot.mark-dot-2 { --mark-delay:220ms; --mark-life:1312ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-mark-arm.arm-7 .agilent-mark-dot.mark-dot-3 { --mark-delay:291ms; --mark-life:1025ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-0 { --dot-x:193.159px; --dot-y:215.4944px; --dot-x-mid:158.3904px; --dot-y-mid:176.7054px; --dot-x-near:88.8531px; --dot-y-near:99.1274px; --dot-size:10.5714px; --dot-delay:93ms; --spark-life:1521ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-1 { --dot-x:175.6617px; --dot-y:289.1024px; --dot-x-mid:144.0426px; --dot-y-mid:237.064px; --dot-x-near:80.8044px; --dot-y-near:132.9871px; --dot-size:3.9643px; --dot-delay:112ms; --spark-life:1604ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-2 { --dot-x:64.911px; --dot-y:171.8266px; --dot-x-mid:53.227px; --dot-y-mid:140.8978px; --dot-x-near:29.8591px; --dot-y-near:79.0402px; --dot-size:3.9643px; --dot-delay:131ms; --spark-life:1687ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-3 { --dot-x:40.8126px; --dot-y:228.9624px; --dot-x-mid:33.4663px; --dot-y-mid:187.7492px; --dot-x-near:18.7738px; --dot-y-near:105.3227px; --dot-size:6.6071px; --dot-delay:150ms; --spark-life:1770ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-4 { --dot-x:-2.3648px; --dot-y:281.4544px; --dot-x-mid:-1.9392px; --dot-y-mid:230.7926px; --dot-x-near:-1.0878px; --dot-y-near:129.469px; --dot-size:3.9643px; --dot-delay:169ms; --spark-life:1853ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-5 { --dot-x:-63.4292px; --dot-y:324.2107px; --dot-x-mid:-52.0119px; --dot-y-mid:265.8528px; --dot-x-near:-29.1774px; --dot-y-near:149.1369px; --dot-size:3.9643px; --dot-delay:188ms; --spark-life:1936ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-6 { --dot-x:-64.8629px; --dot-y:163.3428px; --dot-x-mid:-53.1876px; --dot-y-mid:133.9411px; --dot-x-near:-29.8369px; --dot-y-near:75.1377px; --dot-size:6.6071px; --dot-delay:207ms; --spark-life:2019ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-7 { --dot-x:-119.8598px; --dot-y:189.9949px; --dot-x-mid:-98.285px; --dot-y-mid:155.7958px; --dot-x-near:-55.1355px; --dot-y-near:87.3976px; --dot-size:10.5714px; --dot-delay:16ms; --spark-life:1382ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-8 { --dot-x:-185.9717px; --dot-y:200.5899px; --dot-x-mid:-152.4968px; --dot-y-mid:164.4837px; --dot-x-near:-85.547px; --dot-y-near:92.2714px; --dot-size:3.9643px; --dot-delay:35ms; --spark-life:1465ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-9 { --dot-x:-258.927px; --dot-y:192.1379px; --dot-x-mid:-212.3201px; --dot-y-mid:157.5531px; --dot-x-near:-119.1064px; --dot-y-near:88.3835px; --dot-size:6.6071px; --dot-delay:54ms; --spark-life:1548ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-10 { --dot-x:-333.7722px; --dot-y:162.7136px; --dot-x-mid:-273.6932px; --dot-y-mid:133.4252px; --dot-x-near:-153.5352px; --dot-y-near:74.8483px; --dot-size:3.9643px; --dot-delay:73ms; --spark-life:1631ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-11 { --dot-x:-208.9323px; --dot-y:57.5533px; --dot-x-mid:-171.3245px; --dot-y-mid:47.1937px; --dot-x-near:-96.1089px; --dot-y-near:26.4745px; --dot-size:3.9643px; --dot-delay:92ms; --spark-life:1714ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-12 { --dot-x:-264.6707px; --dot-y:22.2842px; --dot-x-mid:-217.03px; --dot-y-mid:18.273px; --dot-x-near:-121.7485px; --dot-y-near:10.2507px; --dot-size:6.6071px; --dot-delay:111ms; --spark-life:1797ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-13 { --dot-x:-312.9035px; --dot-y:-31.6485px; --dot-x-mid:-256.5809px; --dot-y-mid:-25.9518px; --dot-x-near:-143.9356px; --dot-y-near:-14.5583px; --dot-size:3.9643px; --dot-delay:130ms; --spark-life:1880ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-14 { --dot-x:-348.6727px; --dot-y:-102.3803px; --dot-x-mid:-285.9116px; --dot-y-mid:-83.9518px; --dot-x-near:-160.3894px; --dot-y-near:-47.0949px; --dot-size:10.5714px; --dot-delay:149ms; --spark-life:1963ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-15 { --dot-x:-186.1088px; --dot-y:-94.6308px; --dot-x-mid:-152.6092px; --dot-y-mid:-77.5973px; --dot-x-near:-85.61px; --dot-y-near:-43.5302px; --dot-size:6.6071px; --dot-delay:168ms; --spark-life:1326ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-16 { --dot-x:-204.32px; --dot-y:-157.0082px; --dot-x-mid:-167.5424px; --dot-y-mid:-128.7468px; --dot-x-near:-93.9872px; --dot-y-near:-72.2238px; --dot-size:3.9643px; --dot-delay:187ms; --spark-life:1409ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-17 { --dot-x:-204.625px; --dot-y:-228.2863px; --dot-x-mid:-167.7925px; --dot-y-mid:-187.1948px; --dot-x-near:-94.1275px; --dot-y-near:-105.0117px; --dot-size:3.9643px; --dot-delay:206ms; --spark-life:1492ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-18 { --dot-x:-184.582px; --dot-y:-303.7834px; --dot-x-mid:-151.3572px; --dot-y-mid:-249.1024px; --dot-x-near:-84.9077px; --dot-y-near:-139.7404px; --dot-size:6.6071px; --dot-delay:15ms; --spark-life:1575ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-19 { --dot-x:-70.9818px; --dot-y:-187.8967px; --dot-x-mid:-58.2051px; --dot-y-mid:-154.0753px; --dot-x-near:-32.6516px; --dot-y-near:-86.4325px; --dot-size:3.9643px; --dot-delay:34ms; --spark-life:1658ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-20 { --dot-x:-43.8272px; --dot-y:-245.8744px; --dot-x-mid:-35.9383px; --dot-y-mid:-201.617px; --dot-x-near:-20.1605px; --dot-y-near:-113.1022px; --dot-size:3.9643px; --dot-delay:53ms; --spark-life:1741ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-21 { --dot-x:2.5092px; --dot-y:-298.6323px; --dot-x-mid:2.0575px; --dot-y-mid:-244.8785px; --dot-x-near:1.1542px; --dot-y-near:-137.3709px; --dot-size:10.5714px; --dot-delay:72ms; --spark-life:1824ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-22 { --dot-x:66.7275px; --dot-y:-341.0697px; --dot-x-mid:54.7165px; --dot-y-mid:-279.6771px; --dot-x-near:30.6946px; --dot-y-near:-156.892px; --dot-size:3.9643px; --dot-delay:91ms; --spark-life:1907ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-23 { --dot-x:71.2029px; --dot-y:-179.3086px; --dot-x-mid:58.3864px; --dot-y-mid:-147.0331px; --dot-x-near:32.7533px; --dot-y-near:-82.482px; --dot-size:3.9643px; --dot-delay:110ms; --spark-life:1990ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-24 { --dot-x:129.0255px; --dot-y:-204.5239px; --dot-x-mid:105.8009px; --dot-y-mid:-167.7096px; --dot-x-near:59.3517px; --dot-y-near:-94.081px; --dot-size:6.6071px; --dot-delay:129ms; --spark-life:1353ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-25 { --dot-x:197.6511px; --dot-y:-213.1873px; --dot-x-mid:162.0739px; --dot-y-mid:-174.8136px; --dot-x-near:90.9195px; --dot-y-near:-98.0662px; --dot-size:3.9643px; --dot-delay:148ms; --spark-life:1436ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-26 { --dot-x:272.7223px; --dot-y:-202.3748px; --dot-x-mid:223.6323px; --dot-y-mid:-165.9473px; --dot-x-near:125.4523px; --dot-y-near:-93.0924px; --dot-size:3.9643px; --dot-delay:167ms; --spark-life:1519ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-27 { --dot-x:166.2922px; --dot-y:-81.0673px; --dot-x-mid:136.3596px; --dot-y-mid:-66.4752px; --dot-x-near:76.4944px; --dot-y-near:-37.291px; --dot-size:6.6071px; --dot-delay:186ms; --spark-life:1602ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-28 { --dot-x:225.494px; --dot-y:-62.1154px; --dot-x-mid:184.9051px; --dot-y-mid:-50.9347px; --dot-x-near:103.7272px; --dot-y-near:-28.5731px; --dot-size:10.5714px; --dot-delay:205ms; --spark-life:1685ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-29 { --dot-x:281.7887px; --dot-y:-23.7255px; --dot-x-mid:231.0667px; --dot-y-mid:-19.4549px; --dot-x-near:129.6228px; --dot-y-near:-10.9137px; --dot-size:3.9643px; --dot-delay:14ms; --spark-life:1768ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-30 { --dot-x:329.9949px; --dot-y:33.3772px; --dot-x-mid:270.5958px; --dot-y-mid:27.3693px; --dot-x-near:151.7977px; --dot-y-near:15.3535px; --dot-size:6.6071px; --dot-delay:33ms; --spark-life:1851ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-31 { --dot-x:169.8987px; --dot-y:49.8871px; --dot-x-mid:139.3169px; --dot-y-mid:40.9074px; --dot-x-near:78.1534px; --dot-y-near:22.9481px; --dot-size:3.9643px; --dot-delay:52ms; --spark-life:1934ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-32 { --dot-x:201.4216px; --dot-y:102.4169px; --dot-x-mid:165.1657px; --dot-y-mid:83.9818px; --dot-x-near:92.6539px; --dot-y-near:47.1118px; --dot-size:3.9643px; --dot-delay:71ms; --spark-life:2017ms; }
  .agilent-skyburst.celebration-launch-3 .agilent-burst-dot.dot-33 { --dot-x:217.9413px; --dot-y:167.4755px; --dot-x-mid:178.7119px; --dot-y-mid:137.3299px; --dot-x-near:100.253px; --dot-y-near:77.0387px; --dot-size:6.6071px; --dot-delay:90ms; --spark-life:1380ms; }
  .celebration-launch-4 { --launch-x:54%; --rocket-rise:calc(100vh - 47vh); --firework-color:#6ee0a8; --launch-delay:560ms; }
  .agilent-skyburst.celebration-launch-4 { --burst-x:54%; --burst-y:47%; --burst-size:268px; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-0 .agilent-mark-dot.mark-dot-0 { --mark-delay:116ms; --mark-life:1144ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-0 .agilent-mark-dot.mark-dot-1 { --mark-delay:187ms; --mark-life:1227ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-0 .agilent-mark-dot.mark-dot-2 { --mark-delay:258ms; --mark-life:1310ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-0 .agilent-mark-dot.mark-dot-3 { --mark-delay:19ms; --mark-life:1023ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-1 .agilent-mark-dot.mark-dot-0 { --mark-delay:159ms; --mark-life:1203ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-1 .agilent-mark-dot.mark-dot-1 { --mark-delay:230ms; --mark-life:1286ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-1 .agilent-mark-dot.mark-dot-2 { --mark-delay:301ms; --mark-life:999ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-1 .agilent-mark-dot.mark-dot-3 { --mark-delay:62ms; --mark-life:1082ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-2 .agilent-mark-dot.mark-dot-0 { --mark-delay:202ms; --mark-life:1262ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-2 .agilent-mark-dot.mark-dot-1 { --mark-delay:273ms; --mark-life:1345ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-2 .agilent-mark-dot.mark-dot-2 { --mark-delay:34ms; --mark-life:1058ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-2 .agilent-mark-dot.mark-dot-3 { --mark-delay:105ms; --mark-life:1141ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-3 .agilent-mark-dot.mark-dot-0 { --mark-delay:245ms; --mark-life:1321ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-3 .agilent-mark-dot.mark-dot-1 { --mark-delay:6ms; --mark-life:1034ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-3 .agilent-mark-dot.mark-dot-2 { --mark-delay:77ms; --mark-life:1117ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-3 .agilent-mark-dot.mark-dot-3 { --mark-delay:148ms; --mark-life:1200ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-4 .agilent-mark-dot.mark-dot-0 { --mark-delay:288ms; --mark-life:1010ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-4 .agilent-mark-dot.mark-dot-1 { --mark-delay:49ms; --mark-life:1093ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-4 .agilent-mark-dot.mark-dot-2 { --mark-delay:120ms; --mark-life:1176ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-4 .agilent-mark-dot.mark-dot-3 { --mark-delay:191ms; --mark-life:1259ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-5 .agilent-mark-dot.mark-dot-0 { --mark-delay:21ms; --mark-life:1069ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-5 .agilent-mark-dot.mark-dot-1 { --mark-delay:92ms; --mark-life:1152ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-5 .agilent-mark-dot.mark-dot-2 { --mark-delay:163ms; --mark-life:1235ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-5 .agilent-mark-dot.mark-dot-3 { --mark-delay:234ms; --mark-life:1318ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-6 .agilent-mark-dot.mark-dot-0 { --mark-delay:64ms; --mark-life:1128ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-6 .agilent-mark-dot.mark-dot-1 { --mark-delay:135ms; --mark-life:1211ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-6 .agilent-mark-dot.mark-dot-2 { --mark-delay:206ms; --mark-life:1294ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-6 .agilent-mark-dot.mark-dot-3 { --mark-delay:277ms; --mark-life:1007ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-7 .agilent-mark-dot.mark-dot-0 { --mark-delay:107ms; --mark-life:1187ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-7 .agilent-mark-dot.mark-dot-1 { --mark-delay:178ms; --mark-life:1270ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-7 .agilent-mark-dot.mark-dot-2 { --mark-delay:249ms; --mark-life:983ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-mark-arm.arm-7 .agilent-mark-dot.mark-dot-3 { --mark-delay:10ms; --mark-life:1066ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-0 { --dot-x:172.3643px; --dot-y:356.0969px; --dot-x-mid:141.3387px; --dot-y-mid:291.9994px; --dot-x-near:79.2876px; --dot-y-near:163.8046px; --dot-size:10.8px; --dot-delay:124ms; --spark-life:1588ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-1 { --dot-x:119.5125px; --dot-y:438.6535px; --dot-x-mid:98.0002px; --dot-y-mid:359.6959px; --dot-x-near:54.9757px; --dot-y-near:201.7806px; --dot-size:4.05px; --dot-delay:143ms; --spark-life:1671ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-2 { --dot-x:21.7369px; --dot-y:267.117px; --dot-x-mid:17.8243px; --dot-y-mid:219.036px; --dot-x-near:9.999px; --dot-y-near:122.8738px; --dot-size:4.05px; --dot-delay:162ms; --spark-life:1754ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-3 { --dot-x:-33.8199px; --dot-y:325.2703px; --dot-x-mid:-27.7323px; --dot-y-mid:266.7217px; --dot-x-near:-15.5571px; --dot-y-near:149.6244px; --dot-size:6.75px; --dot-delay:181ms; --spark-life:1837ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-4 { --dot-x:-109.7999px; --dot-y:370.1037px; --dot-x-mid:-90.0359px; --dot-y-mid:303.485px; --dot-x-near:-50.5079px; --dot-y-near:170.2477px; --dot-size:4.05px; --dot-delay:200ms; --spark-life:1920ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-5 { --dot-x:-202.8361px; --dot-y:396.1642px; --dot-x-mid:-166.3256px; --dot-y-mid:324.8547px; --dot-x-near:-93.3046px; --dot-y-near:182.2355px; --dot-size:4.05px; --dot-delay:9ms; --spark-life:2003ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-6 { --dot-x:-158.0385px; --dot-y:204.4729px; --dot-x-mid:-129.5916px; --dot-y-mid:167.6678px; --dot-x-near:-72.6977px; --dot-y-near:94.0575px; --dot-size:6.75px; --dot-delay:28ms; --spark-life:1366ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-7 { --dot-x:-236.9812px; --dot-y:211.2248px; --dot-x-mid:-194.3246px; --dot-y-mid:173.2043px; --dot-x-near:-109.0114px; --dot-y-near:97.1634px; --dot-size:10.8px; --dot-delay:47ms; --spark-life:1449ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-8 { --dot-x:-322.2866px; --dot-y:194.591px; --dot-x-mid:-264.275px; --dot-y-mid:159.5646px; --dot-x-near:-148.2518px; --dot-y-near:89.5119px; --dot-size:4.05px; --dot-delay:66ms; --spark-life:1532ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-9 { --dot-x:-407.8285px; --dot-y:152.7617px; --dot-x-mid:-334.4194px; --dot-y-mid:125.2646px; --dot-x-near:-187.6011px; --dot-y-near:70.2704px; --dot-size:6.75px; --dot-delay:85ms; --spark-life:1615ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-10 { --dot-x:-245.1168px; --dot-y:42.9842px; --dot-x-mid:-200.9958px; --dot-y-mid:35.247px; --dot-x-near:-112.7537px; --dot-y-near:19.7727px; --dot-size:4.05px; --dot-delay:104ms; --spark-life:1698ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-11 { --dot-x:-307.8616px; --dot-y:-3.449px; --dot-x-mid:-252.4465px; --dot-y-mid:-2.8282px; --dot-x-near:-141.6164px; --dot-y-near:-1.5865px; --dot-size:4.05px; --dot-delay:123ms; --spark-life:1781ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-12 { --dot-x:-359.8796px; --dot-y:-71.4546px; --dot-x-mid:-295.1013px; --dot-y-mid:-58.5927px; --dot-x-near:-165.5446px; --dot-y-near:-32.8691px; --dot-size:6.75px; --dot-delay:142ms; --spark-life:1864ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-13 { --dot-x:-395.418px; --dot-y:-158.3027px; --dot-x-mid:-324.2428px; --dot-y-mid:-129.8082px; --dot-x-near:-181.8923px; --dot-y-near:-72.8192px; --dot-size:4.05px; --dot-delay:161ms; --spark-life:1947ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-14 { --dot-x:-202.0209px; --dot-y:-128.2389px; --dot-x-mid:-165.6571px; --dot-y-mid:-105.1559px; --dot-x-near:-92.9296px; --dot-y-near:-58.9899px; --dot-size:10.8px; --dot-delay:180ms; --spark-life:2030ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-15 { --dot-x:-218.1882px; --dot-y:-203.4268px; --dot-x-mid:-178.9143px; --dot-y-mid:-166.81px; --dot-x-near:-100.3666px; --dot-y-near:-93.5763px; --dot-size:6.75px; --dot-delay:199ms; --spark-life:1393ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-16 { --dot-x:-212.1335px; --dot-y:-287.5526px; --dot-x-mid:-173.9495px; --dot-y-mid:-235.7931px; --dot-x-near:-97.5814px; --dot-y-near:-132.2742px; --dot-size:4.05px; --dot-delay:8ms; --spark-life:1476ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-17 { --dot-x:-181.3995px; --dot-y:-374.7632px; --dot-x-mid:-148.7476px; --dot-y-mid:-307.3059px; --dot-x-near:-83.4438px; --dot-y-near:-172.3911px; --dot-size:4.05px; --dot-delay:27ms; --spark-life:1559ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-18 { --dot-x:-60.3852px; --dot-y:-221.6355px; --dot-x-mid:-49.5159px; --dot-y-mid:-181.7411px; --dot-x-near:-27.7772px; --dot-y-near:-101.9523px; --dot-size:6.75px; --dot-delay:46ms; --spark-life:1642ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-19 { --dot-x:-23.419px; --dot-y:-287.7868px; --dot-x-mid:-19.2036px; --dot-y-mid:-235.9852px; --dot-x-near:-10.7727px; --dot-y-near:-132.3819px; --dot-size:4.05px; --dot-delay:65ms; --spark-life:1725ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-20 { --dot-x:35.9645px; --dot-y:-345.8972px; --dot-x-mid:29.4909px; --dot-y-mid:-283.6357px; --dot-x-near:16.5437px; --dot-y-near:-159.1127px; --dot-size:4.05px; --dot-delay:84ms; --spark-life:1808ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-21 { --dot-x:115.6982px; --dot-y:-389.9853px; --dot-x-mid:94.8725px; --dot-y-mid:-319.788px; --dot-x-near:53.2212px; --dot-y-near:-179.3932px; --dot-size:10.8px; --dot-delay:103ms; --spark-life:1891ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-22 { --dot-x:100.3275px; --dot-y:-195.9522px; --dot-x-mid:82.2686px; --dot-y-mid:-160.6808px; --dot-x-near:46.1507px; --dot-y-near:-90.138px; --dot-size:4.05px; --dot-delay:122ms; --spark-life:1974ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-23 { --dot-x:170.7206px; --dot-y:-220.8812px; --dot-x-mid:139.9909px; --dot-y-mid:-181.1226px; --dot-x-near:78.5315px; --dot-y-near:-101.6054px; --dot-size:4.05px; --dot-delay:141ms; --spark-life:1337ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-24 { --dot-x:252.4624px; --dot-y:-225.0234px; --dot-x-mid:207.0192px; --dot-y-mid:-184.5192px; --dot-x-near:116.1327px; --dot-y-near:-103.5108px; --dot-size:6.75px; --dot-delay:160ms; --spark-life:1420ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-25 { --dot-x:340.0397px; --dot-y:-205.31px; --dot-x-mid:278.8325px; --dot-y-mid:-168.3542px; --dot-x-near:156.4183px; --dot-y-near:-94.4426px; --dot-size:4.05px; --dot-delay:179ms; --spark-life:1503ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-26 { --dot-x:197.1918px; --dot-y:-73.8628px; --dot-x-mid:161.6973px; --dot-y-mid:-60.5675px; --dot-x-near:90.7082px; --dot-y-near:-33.9769px; --dot-size:4.05px; --dot-delay:198ms; --spark-life:1586ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-27 { --dot-x:265.5432px; --dot-y:-46.5662px; --dot-x-mid:217.7454px; --dot-y-mid:-38.1843px; --dot-x-near:122.1499px; --dot-y-near:-21.4205px; --dot-size:6.75px; --dot-delay:7ms; --spark-life:1669ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-28 { --dot-x:328.5984px; --dot-y:3.6813px; --dot-x-mid:269.4507px; --dot-y-mid:3.0187px; --dot-x-near:151.1553px; --dot-y-near:1.6934px; --dot-size:10.8px; --dot-delay:26ms; --spark-life:1752ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-29 { --dot-x:380.2207px; --dot-y:75.4933px; --dot-x-mid:311.7809px; --dot-y-mid:61.9045px; --dot-x-near:174.9015px; --dot-y-near:34.7269px; --dot-size:4.05px; --dot-delay:45ms; --spark-life:1835ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-30 { --dot-x:414.6706px; --dot-y:166.0103px; --dot-x-mid:340.0299px; --dot-y-mid:136.1285px; --dot-x-near:190.7485px; --dot-y-near:76.3647px; --dot-size:6.75px; --dot-delay:64ms; --spark-life:1918ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-31 { --dot-x:219.5294px; --dot-y:139.3529px; --dot-x-mid:180.0141px; --dot-y-mid:114.2694px; --dot-x-near:100.9835px; --dot-y-near:64.1023px; --dot-size:4.05px; --dot-delay:83ms; --spark-life:2001ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-32 { --dot-x:233.3564px; --dot-y:217.5688px; --dot-x-mid:191.3522px; --dot-y-mid:178.4064px; --dot-x-near:107.3439px; --dot-y-near:100.0816px; --dot-size:4.05px; --dot-delay:102ms; --spark-life:1364ms; }
  .agilent-skyburst.celebration-launch-4 .agilent-burst-dot.dot-33 { --dot-x:224.4448px; --dot-y:304.2409px; --dot-x-mid:184.0447px; --dot-y-mid:249.4776px; --dot-x-near:103.2446px; --dot-y-near:139.9508px; --dot-size:6.75px; --dot-delay:121ms; --spark-life:1447ms; }
  @keyframes celebrationMessageIn { from { opacity:0; transform:translateX(-50%) translateY(-8px) scale(.97); } to { opacity:1; transform:translateX(-50%) translateY(0) scale(1); } }
  /* A quick camera-like exposure correction: a tiny ignition flash, dark
     enough contrast while the burst is brightest, then a clean return to the
     surrounding page as the last sparks fade. */
  @keyframes celebrationExposure {
    0% { background:rgba(255,255,255,0); }
    7% { background:rgba(255,255,255,.18); }
    19% { background:rgba(0,18,35,.33); }
    35% { background:rgba(0,18,35,.54); }
    62% { background:rgba(0,18,35,.29); }
    84% { background:rgba(255,255,255,.07); }
    100% { background:rgba(255,255,255,.02); }
  }
  @keyframes rocketRise { 0% { opacity:0; transform:translate(-50%,0) scale(.72); } 8% { opacity:1; } 82% { opacity:1; transform:translate(-50%,calc(-1 * var(--rocket-rise))) scale(1); } 100% { opacity:0; transform:translate(-50%,calc(-1 * var(--rocket-rise))) scale(.4); } }
  @keyframes rocketTrail { 0% { opacity:0; transform:scaleY(.12); } 13%,76% { opacity:1; transform:scaleY(1); } 100% { opacity:0; transform:scaleY(.32); } }
  @keyframes burstPresence { 0% { opacity:0; } 4%,70% { opacity:1; } 100% { opacity:0; } }
  @keyframes agilentBurstLogo { 0% { opacity:0; transform:translate(-50%,-50%) scale(.04); } 8% { opacity:1; transform:translate(-50%,-50%) scale(1.15); } 22% { opacity:1; transform:translate(-50%,-50%) scale(1); } 67% { opacity:1; transform:translate(-50%,-50%) scale(1.45); } 100% { opacity:1; transform:translate(-50%,-50%) scale(1.72); } }
  @keyframes agilentMarkDotFizzle { 0%,43% { opacity:1; } 52% { opacity:.16; } 58% { opacity:1; } 67% { opacity:.32; } 73% { opacity:.96; } 82% { opacity:.12; } 89% { opacity:.78; } 100% { opacity:0; } }
  @keyframes agilentBurstDot {
    0% { opacity:0; transform:translate(-50%,-50%) scale(.2); }
    8% { opacity:1; }
    34% { opacity:.96; transform:translate(calc(-50% + var(--dot-x-near)),calc(-50% + var(--dot-y-near))) scale(1); }
    72% { opacity:.72; transform:translate(calc(-50% + var(--dot-x-mid)),calc(-50% + var(--dot-y-mid))) scale(.72); }
    81% { opacity:1; box-shadow:0 0 14px 2px currentColor; }
    100% { opacity:0; transform:translate(calc(-50% + var(--dot-x)),calc(-50% + var(--dot-y))) scale(.16); box-shadow:0 0 2px currentColor; }
  }
  @media (max-width:620px) { .celebration-message { top:46px; padding:13px 15px 28px; } .celebration-message::after { bottom:6px; font-size:12px; } .agilent-skyburst-logo { width:min(var(--burst-size,116px),150px); height:min(var(--burst-size,116px),150px); } }

  /* ===== History box cards ===== */
  .history-empty { color: var(--muted); padding: 32px 0; text-align: center; }
  .history-box-card { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 10px; }
  .history-box-card-head {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 13px;
    flex-wrap: wrap;
  }
  .history-box-card-head[data-toggle-box-parts] { cursor:pointer; }
  .history-box-card-head[data-toggle-box-parts]:hover { background:color-mix(in srgb, var(--surface-2) 82%, var(--primary-soft)); }
  .history-box-card-head[data-toggle-box-parts]:focus-visible { outline:3px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset:-3px; }
  .history-disclosure-triangle { display:inline-grid; place-items:center; width:12px; color:var(--primary-dark); font-size:13px; line-height:1; }
  .history-box-card-head .hb-name { font-weight: 700; }
  .history-box-card-head .hb-tracking { font-family: monospace; font-size: 12px; color: var(--ink-2); }
  .history-box-card-head .hb-date { color: var(--muted); font-size: 11px; }
  .history-box-card-head .hb-engineer { color: var(--ink-2); font-size: 12px; }
  .history-box-card-head .hb-count { color: var(--muted); font-size: 12px; }
  .history-box-card-head .hb-stats { display: flex; gap: 10px; margin-left: auto; font-size: 12px; color: var(--ink-2); }
  .history-box-card-head .hb-stats strong { color: var(--ink); }
  .history-box-card-actions { display: flex; align-items: center; gap: 4px; }
  .history-box-card-actions .history-lock-state { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 8px; box-sizing: border-box; }
  .inventory-space-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:14px; }
  .inventory-space-card { width:100%; min-height:200px; max-height:290px; aspect-ratio:2 / 1; padding:20px; position:relative; isolation:isolate; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background-color:var(--surface-2); background-position:center; background-size:cover; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px; }
  .inventory-space-card.is-openable { cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
  .inventory-space-card.is-openable:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:var(--primary); }
  .inventory-space-card.is-openable:focus-visible { outline:3px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset:3px; }
  .inventory-space-card.inventory-space-create {
    min-height: 178px;
    justify-content: center;
    align-items: flex-start;
    border: 2px dashed var(--primary);
    background: var(--primary-soft);
  }
  .inventory-space-card.inventory-space-create .create-space-mark { font-size: 34px; line-height: 1; color: var(--primary-dark); font-weight: 400; }
  .inventory-space-card.inventory-space-create h2 { font-size: 21px; color: var(--ink); }
  .inventory-space-card h2 { margin:0; font-size:19px; }
  .inventory-space-qty { margin-top:auto; font-size:28px; font-weight:800; color:var(--primary); }
  .inventory-space-card .inventory-space-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
  .inventory-intake-board { margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
  .inventory-intake-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:12px; }
  .inventory-intake-head h2 { margin:0; font-size:18px; }
  .inventory-intake-list { display:grid; gap:10px; }
  .inventory-intake-card { display:flex; align-items:center; gap:14px; padding:13px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); }
  .inventory-intake-card .intake-main { min-width:0; flex:1; }
  .inventory-intake-card .intake-name { font-weight:750; }
  .inventory-intake-card .intake-meta { margin-top:3px; font-size:12px; color:var(--muted); }
  .inventory-intake-card .intake-note { margin-top:4px; font-size:12px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .inventory-cycle-board { margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
  .inventory-cycle-row { display:flex; align-items:center; gap:14px; padding:13px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); }
  .inventory-cycle-row .cycle-main { min-width:0; flex:1; }
  .inventory-cycle-row .cycle-name { font-weight:750; }
  .inventory-cycle-row .cycle-meta { margin-top:3px; font-size:12px; color:var(--muted); }
  @media (max-width: 640px) {
    #homeActions [data-home-tab="inventory"]:only-child { width:100%; justify-self:stretch; }
    .home-space-card-grid,
    .inventory-space-grid { grid-template-columns:1fr; gap:10px; }
    .home-space-card { width:100%; min-height:184px; aspect-ratio:1.85 / 1; padding:17px; }
    .home-space-name { font-size:23px; }
    .home-space-qty { font-size:42px; }
    .inventory-space-card { width:100%; min-height:164px; aspect-ratio:1.85 / 1; padding:16px; }
    .inventory-space-card h2 { font-size:19px; }
    .inventory-space-card .inventory-space-actions { gap:5px; }
    .inventory-intake-head { align-items:flex-start; flex-direction:column; }
    .inventory-intake-card { align-items:flex-start; flex-wrap:wrap; }
    .inventory-intake-card .intake-action { width:100%; }
    .inventory-cycle-row { align-items:flex-start; flex-wrap:wrap; }
    .inventory-cycle-row button { width:100%; }
  }
  @media (max-width: 350px) { .home-space-card, .inventory-space-card { min-height:150px; aspect-ratio:1.55 / 1; } }
  .history-box-parts { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
  .history-box-parts.open { max-height: 600px; overflow-y: auto; }
  .history-label-selection-bar { display:flex; align-items:center; gap:10px; min-height:48px; padding:8px 10px; border-bottom:1px solid var(--line); background:var(--surface); }
  .history-label-selection-summary { color:var(--muted); font-size:12px; }
  .history-label-selection-summary strong { color:var(--ink); }
  .history-label-selection-bar .spacer { flex:1; }
  .history-label-selection-bar button[disabled] { opacity:.48; }
  .history-box-parts .history-label-select-col { width:36px; padding-left:14px; padding-right:4px; text-align:center; }
  .history-box-parts td.history-label-select-col { vertical-align:middle; }
  .history-box-parts tr:has(.history-label-select:checked) td { background:var(--primary-soft); }
  .history-box-parts .history-label-select { width:16px; height:16px; }
  .history-box-parts table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .history-box-parts th { text-align: left; padding: 6px 10px; background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; position: sticky; top: 0; }
  .history-box-parts td { padding: 5px 10px; border-bottom: 1px solid var(--line); }
  .history-box-parts tr:last-child td { border-bottom: none; }
  .history-box-parts .monospace { font-family: "Courier New", monospace; font-size: 11px; }
  /* Shipment details use the same table grammar as the rest of the app. */
  .history-box-parts table.data { font-size:13px; }
  .history-box-parts table.data th { padding:9px 12px; background:var(--surface-2); color:var(--muted); font-size:11px; }
  .history-box-parts table.data td { padding:9px 12px; }

  /* Kiosk is a deliberately separate, location-locked touch interface. */
  .touch-kiosk { max-width:980px; margin:0 auto; display:grid; gap:18px; }
  .touch-kiosk-home { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
  .touch-kiosk-tile { min-height:220px; padding:24px; border:0; border-radius:var(--radius); background:var(--surface); color:var(--ink); text-align:left; box-shadow:var(--shadow-lg); cursor:pointer; display:flex; flex-direction:column; justify-content:flex-end; gap:9px; }
  .touch-kiosk-tile strong { font-size:25px; line-height:1.08; color:var(--primary-dark); }
  .touch-kiosk-tile span { color:var(--ink-2); font-size:15px; line-height:1.4; }
  .touch-kiosk-tile .touch-kiosk-icon { font-size:42px; margin-bottom:auto; }
  .touch-kiosk-tile.pickup { background:var(--primary); color:#fff; }
  .touch-kiosk-tile.pickup strong,.touch-kiosk-tile.pickup span { color:#fff; }
  .touch-kiosk-screen { padding:24px; border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-lg); }
  .touch-kiosk-screen-head { display:flex; align-items:flex-start; gap:14px; margin-bottom:20px; }
  .touch-kiosk-screen-head h2 { margin:0; font-size:28px; }
  .touch-kiosk-screen-head p { margin:5px 0 0; color:var(--ink-2); }
  .touch-kiosk-back { margin-left:auto; min-height:44px; }
  .touch-kiosk-people { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; }
  .touch-kiosk-person { min-height:110px; padding:18px; text-align:left; background:var(--surface-2); color:var(--ink); border:1px solid var(--line-strong); }
  .touch-kiosk-person strong { display:block; font-size:20px; color:var(--primary-dark); }
  .touch-kiosk-person span { display:block; margin-top:6px; color:var(--ink-2); }
  .touch-kiosk-part { display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); }
  .touch-kiosk-part.is-scanned { color:var(--success); background:var(--success-soft); margin:0 -10px; padding:13px 10px; border-radius:8px; }
  .touch-kiosk-part .touch-kiosk-check { margin-left:auto; font-size:24px; font-weight:900; }
  .touch-kiosk-scan { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; margin:18px 0; }
  .touch-kiosk-scan input { min-height:62px; font:700 21px ui-monospace,SFMono-Regular,Consolas,monospace; }
  .touch-kiosk-scan button { min-height:62px; min-width:116px; font-size:17px; }
  .touch-kiosk-controls { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
  .touch-kiosk-controls button { min-height:52px; font-size:16px; }
  .touch-kiosk-add-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .touch-kiosk-add-grid .wide { grid-column:1 / -1; }
  @media (max-width:768px) { .touch-kiosk-home { grid-template-columns:1fr; } .touch-kiosk-tile { min-height:142px; } .touch-kiosk-tile strong { font-size:23px; } .touch-kiosk-screen { padding:18px; } .touch-kiosk-screen-head h2 { font-size:23px; } .touch-kiosk-add-grid { grid-template-columns:1fr; } .touch-kiosk-add-grid .wide { grid-column:auto; } }

  /* ===== Staged box cards (Returns tab) ===== */
  .staged-box-card { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 12px; background: var(--surface); box-shadow: var(--shadow); }
  .staged-box-head { display:flex; align-items:center; gap:10px; padding:10px 42px 10px 14px; background:var(--workspace-header); border-bottom:1px solid color-mix(in srgb, var(--workspace-header) 68%, #000); color:#fff; flex-wrap:wrap; }
  .staged-box-head .sb-return-title { font-size:14px; font-weight:820; letter-spacing:.01em; white-space:nowrap; }
  .staged-box-head .sb-tracking-input { width:260px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; padding:5px 8px; min-height:30px; flex:0 1 300px; color:var(--ink); background:var(--surface); border-color:rgba(255,255,255,.72); }
  .staged-box-head .sb-stats { margin-left:auto; font-size:12px; color:rgba(255,255,255,.82); display:flex; gap:10px; }
  /* Return Qty cell — add left padding so it's not cramped against disposition. */
  .return-qty-cell { padding-left: 16px !important; }
  .return-qty-control { display:inline-flex; align-items:center; justify-content:flex-end; min-height:34px; border:1px solid var(--line-strong); border-radius:7px; overflow:hidden; background:var(--surface); font-variant-numeric:tabular-nums; }
  .return-qty-step { width:32px; min-height:32px; padding:0; border:0; border-radius:0; background:var(--surface-2); color:var(--primary-dark); font-size:20px; font-weight:700; line-height:1; }
  .return-qty-step:hover, .return-qty-step:focus-visible { background:var(--primary-soft); color:var(--primary); transform:none; }
  .return-qty-readout { min-width:58px; padding:0 8px; color:var(--ink-2); font-size:12px; text-align:center; white-space:nowrap; }
  .return-qty-readout strong { color:var(--ink); font-size:14px; }
  .staged-box-head .sb-stats strong { color:#fff; }
  /* Sequential box number shown in the header (untitled boxes are still distinguishable). */
  .staged-box-head .sb-num { font-weight: 800; font-size: 14px; color: var(--primary-dark);
    background: var(--primary-soft); border: 1px solid var(--primary); border-radius: 6px; padding: 3px 10px; white-space: nowrap; }
  /* Box delete button — absolutely positioned at the top-right corner of the
     card frame, always visible (red by default so it's easy to spot). */
  .staged-box-card { position: relative; }
  .box-close-btn { position: absolute; top: 6px; right: 6px; z-index: 5;
    width: 26px; height: 26px; min-height: 26px; padding: 0;
    border: 1px solid #c00; border-radius: 6px; background: #fff5f5;
    color: #c00; font-size: 18px; line-height: 1; cursor: pointer; transition: all .12s;
    display: inline-flex; align-items: center; justify-content: center; }
  .box-close-btn:hover { background: #c00; border-color: #a00; color: #fff; }
  .staged-box-empty { padding: 24px; text-align: center; color: var(--muted); font-size: 13px; border: 2px dashed var(--line); border-radius: var(--radius-sm); margin: 8px; min-height: 60px; display: flex; align-items: center; justify-content: center; }
  /* Staged returns intentionally use a compact grid rather than a literal
     table so the tracking controls remain attached to the shipment. Its
     typography, spacing, and row treatment mirror table.data. */
  .staged-box-parts .staged-return-row { display:grid; grid-template-columns:120px minmax(180px,1fr) 128px 56px 82px 22px; align-items:center; column-gap:10px; min-height:42px; padding:8px 16px; border-bottom:1px solid var(--line); background:var(--surface); cursor:default; transition:background .13s ease; }
  .staged-box-parts .staged-return-row:last-child { border-bottom: none; }
  .staged-box-parts .staged-return-row:hover { background:var(--surface-2); }
  .staged-return-row .dr-material { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; font-weight:600; color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .staged-return-row .dr-desc { display:flex; align-items:center; gap:5px; min-width:0; padding:0 8px; font-size:12px; }
  .staged-return-row .dr-desc-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .staged-return-row .dr-disp { display:flex; align-items:center; flex-wrap:wrap; gap:3px; min-width:0; font-size:12px; }
  .staged-return-row .dr-qty { text-align:left; font-weight:600; font-size:13px; padding-left:2px; font-variant-numeric:tabular-nums; }
  .staged-return-row .dr-usd { text-align:right; font-size:12px; padding-right:4px; font-variant-numeric:tabular-nums; }
  /* Column header row for staged box parts — matches table.data headers. */
  .staged-box-headrow { display:grid; grid-template-columns:120px minmax(180px,1fr) 128px 56px 82px 22px; align-items:center; column-gap:10px; min-height:42px; padding:8px 16px; background:var(--surface-2); border-bottom:1px solid var(--line); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:var(--muted); }
  .staged-box-headrow > .dr-desc { min-width:0; padding:0 8px; }
  .staged-box-headrow > .dr-disp { min-width:0; }
  .staged-box-headrow > .dr-qty { text-align:left; padding-left:2px; }
  .staged-box-headrow > .dr-usd { text-align:right; padding-right:4px; }
  .staged-sort { appearance:none; border:0; background:transparent; color:inherit; font:inherit; text-transform:inherit; letter-spacing:inherit; padding:0; cursor:pointer; white-space:nowrap; text-align:left; }
  .staged-sort.dr-usd { width:100%; text-align:right; }
  @media (max-width:760px) { .staged-box-parts { overflow-x:auto; } .staged-box-parts .staged-return-row, .staged-box-headrow { min-width:700px; } .staged-box-head .sb-stats { margin-left:0; width:100%; } }
  /* Sort controls are intentionally visually quiet: a header should not turn
     into a dark-blue button merely because a pointer crosses it. */
  .staged-sort:hover { background:transparent; border-color:transparent; color:inherit; text-decoration:none; transform:none; }
  .staged-sort:focus-visible { background:transparent; border-color:transparent; color:inherit; outline:2px solid var(--primary); outline-offset:3px; text-decoration:none; }
  .staged-sort-indicator { display:inline-block; min-width:10px; margin-left:2px; font-size:11px; }
  .staged-return-row .dr-remove { cursor: pointer; color: var(--muted); padding: 0 4px; font-size: 16px; line-height: 1; }
  .staged-return-row .dr-remove:hover { color: var(--danger); }
  .far-return-badge { display:inline-flex; align-items:center; gap:4px; min-height:24px; padding:3px 7px; border:1px solid #b52025; border-radius:4px; background:#fff1f1; color:#9d151a; font-weight:800; font-size:10px; line-height:1.15; white-space:nowrap; }
  .far-return-badge.complete { background:#9d151a; color:#fff; }
  .dmt-question-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .dmt-question-grid label { display:flex; align-items:center; gap:8px; min-height:46px; padding:9px 11px; border:1px solid var(--line); border-radius:6px; background:var(--surface-2); }
  .dmt-question-grid input { width:auto; }
  @media (max-width:640px) { .dmt-question-grid { grid-template-columns:1fr; } }
  .ehs-return-badge { position:relative; display:inline-flex; align-items:center; box-sizing:border-box; min-height:14px; height:14px; margin:0; padding:0 5px; border:1px solid color-mix(in srgb, var(--warn) 55%, var(--line)); border-radius:2px; background:var(--warn-soft); color:var(--warn); font-size:8px; font-weight:850; line-height:1; vertical-align:middle; white-space:nowrap; }
  .ehs-return-badge::after { content:""; position:absolute; top:-5px; right:-7px; width:14px; height:12px; background:var(--warn); clip-path:polygon(0 43%,15% 27%,37% 56%,79% 0,100% 12%,39% 92%,18% 65%,8% 77%); filter:drop-shadow(0 0 1px var(--surface)); }
  button.ehs-return-badge { cursor:pointer; }
  button.ehs-return-badge:hover { filter:brightness(.96); transform:none; }
  .history-description-with-ehs { display:inline-flex; align-items:center; gap:7px; min-width:0; }
  .history-description-with-ehs > span { min-width:0; }
  @media (max-width:620px) {
    .staged-box-head { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:9px 8px; padding:13px 48px 13px 14px; }
    .staged-box-head .sb-return-title { grid-column:1; grid-row:1; min-width:0; }
    .staged-box-head .sb-tracking-row { grid-column:1 / -1; display:grid !important; grid-template-columns:minmax(0,1fr) auto; gap:7px !important; width:100%; }
    .staged-box-head .sb-tracking-input { grid-column:1 / -1; width:100%; min-width:0; min-height:42px; font-size:13px; }
    .staged-box-head .sb-tracking-row button { min-height:38px; white-space:nowrap; }
    .staged-box-head .sb-stats { grid-column:1 / -1; margin:0; width:auto; gap:10px; font-size:12px; flex-wrap:wrap; }
    .staged-box-card .box-close-btn { top:12px; right:12px; }
    .ehs-wizard { width:100%; max-width:calc(100vw - 32px); max-height:calc(100dvh - 16px); display:flex; flex-direction:column; }
    .ehs-wizard .modal-body { min-width:0; min-height:0; padding:14px; overflow-x:hidden; }
    .ehs-wizard .form-grid, .ehs-wizard label, .ehs-wizard input, .ehs-wizard select, .ehs-wizard textarea { min-width:0; max-width:100%; }
    .ehs-wizard .modal-foot { flex:none; display:grid; grid-template-columns:1fr 1fr; padding:10px 12px; gap:8px; }
    .ehs-wizard .modal-foot .spacer { display:none; }
    .ehs-wizard #ehsSaveHint, .ehs-wizard #saveEhsBtn { grid-column:1 / -1; min-height:0; }
    .ehs-wizard .modal-foot button { min-width:0; min-height:42px; padding:8px 10px; font-size:13px; }
    .ehs-wizard #cancelEhsModal { grid-column:1 / -1; justify-self:start; }
    .ehs-declaration-note { margin-bottom:4px; line-height:1.45; }
    .ehs-hazard-toggle { align-items:flex-start; }
  }
  .returns-bottom-bar { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
  .returns-bottom-bar label { font-weight: 600; white-space: nowrap; font-size: 13px; }
  .returns-bottom-bar select { min-height: 32px; padding: 4px 8px; }
  .return-source-note { margin-top:4px; color:var(--muted); font-size:11px; line-height:1.35; }
  .return-source-note strong { color:var(--ink-soft); font-weight:800; }

  /* ===== Print: history label sheets ===== */
  @media print {
    /* Hidden application surfaces still participate in pagination when only
       visibility is changed. Removing them from print layout prevents iOS
       Safari from appending an otherwise blank sheet. */
    body > *:not(#printArea) { display:none !important; }
    body * { visibility: hidden; }
    #printArea, #printArea * { visibility: visible; }
    #printArea {
      position: absolute;
      inset: 0 auto auto 0;
      width: 100%;
      height: auto;
      min-height: 0;
      overflow: visible;
      display: block !important;
    }
    /* Safari is unreliable with :last-of-type here and can emit an empty
       sheet after a perfectly valid last label page. Scope the rule to the
       direct label pages and only force a break between actual siblings. */
    #printArea > .label-page:not(:last-child),
    .mobile-print-paper > .label-page:not(:last-child),
    .mobile-print-paper > .mobile-print-page-frame:not(:last-child) { break-after: page; page-break-after: always; }
    #printArea > .label-page:last-child,
    .mobile-print-paper > .label-page:last-child,
    .mobile-print-paper > .mobile-print-page-frame:last-child { break-after: avoid; page-break-after: avoid; }
    /* Suppress any trailing whitespace that could create a blank page. */
    #printArea::after { content: none; }
    @page {
      size: auto;
      margin: 8mm;
    }
  }
  #printArea { display: none; }
  .mobile-print-open { overflow:hidden; }
  #printArea.mobile-print-active { position:fixed; inset:0; z-index:500; display:block !important; width:100%; height:100vh; height:100dvh; max-width:100%; box-sizing:border-box; overflow:auto; overscroll-behavior:contain; background:#eef3f6; color:#111; -webkit-overflow-scrolling:touch; }
  .mobile-print-toolbar { position:sticky; top:0; z-index:2; display:flex; align-items:center; width:100%; min-width:0; box-sizing:border-box; gap:8px; padding:calc(8px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) 8px calc(12px + env(safe-area-inset-left, 0px)); background:#0072ce; color:#fff; box-shadow:0 1px 5px rgba(0,0,0,.22); font:700 15px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
  .mobile-print-toolbar-title { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; }
  .mobile-print-toolbar button, .mobile-print-toolbar a { flex:0 0 auto; min-width:60px; min-height:40px; border:1px solid rgba(255,255,255,.8); border-radius:6px; background:#fff; color:#005b92; padding:7px 10px; font:800 13px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:24px; text-align:center; text-decoration:none; }
  .mobile-print-toolbar a[aria-disabled="true"] { opacity:.65; }
  .mobile-print-toolbar .mobile-print-close { background:transparent; color:#fff; }
  .mobile-print-paper { min-height:100%; box-sizing:border-box; padding:12px max(12px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); background:#f1f4f6; overflow:hidden; }
  .mobile-print-page-frame { position:relative; margin:0 auto 16px; overflow:visible; }
  .mobile-print-page-frame > .label-page { width:7.5in; max-width:none; margin:0; background:#fff; transform-origin:top left; }
  @media print {
    body.mobile-print-open { overflow:visible; }
    #printArea.mobile-print-active { position:absolute; inset:0 auto auto 0; width:100%; height:auto; min-height:0; overflow:visible; background:#fff; }
    .mobile-print-toolbar { display:none !important; }
    .mobile-print-paper { min-height:0; padding:0; background:#fff; overflow:visible; }
    .mobile-print-page-frame { width:7.5in !important; height:10.1in !important; min-height:10.1in !important; margin:0 !important; overflow:hidden; break-inside:avoid; page-break-inside:avoid; }
    .mobile-print-page-frame + .mobile-print-page-frame { break-before:page; page-break-before:always; }
    .mobile-print-page-frame > .label-page { width:7.5in; height:10.1in; min-height:10.1in; max-width:none; margin:0; overflow:hidden; transform:none !important; }
  }

  /* Reconciliation report (printable) */
  .report { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; color: #000; padding: 8px; }
  .report-title { font-size: 20px; font-weight: 700; margin-bottom: 2px; }
  .report-meta { font-size: 12px; color: #555; margin-bottom: 18px; }
  .report h3 { font-size: 14px; font-weight: 700; margin: 18px 0 6px; padding-bottom: 3px; border-bottom: 2px solid #0072CE; color: #003F70; }
  .report h3 .report-sub { font-weight: 400; font-size: 12px; color: #666; }
  .report-table { width: 100%; border-collapse: collapse; font-size: 11px; }
  .report-table th { text-align: left; padding: 5px 8px; background: #f0f4f8; border-bottom: 1px solid #c8d0da; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: #4a5468; }
  .report-table td { padding: 4px 8px; border-bottom: 1px solid #e4e8ee; vertical-align: top; }
  .report-table .mono { font-family: ui-monospace, "Courier New", monospace; font-size: 10px; }
  .report-table .num { text-align: right; }

  /* On-screen preview (when not printing) */
  .label-page-preview {
    background: white;
    padding: 9mm;
    margin: 0 auto 16px;
    max-width: 215mm;
    border: 1px solid #ddd;
    box-shadow: var(--shadow);
  }
  .label-page-preview-wrapper .label-page {
    background: white;
    padding: 9mm;
    margin: 0 auto 16px;
    max-width: 215mm;
    border: 1px solid #ddd;
    box-shadow: var(--shadow);
  }

  /* Each "label-page" represents ONE printed sheet — credit-card portrait labels */
  .label-page {
    width:7.5in;
    height:10.1in;
    min-height:10.1in;
    overflow:hidden;
    background: white;
    font-family: "Arial", "Helvetica", sans-serif;
    color: #000;
  }
  .label-grid-9 {
    display:grid;
    grid-template-columns:repeat(2, 3.69in);
    grid-auto-rows:2.435in;
    align-content:flex-start;
    justify-content:flex-start;
    column-gap:3mm;
    row-gap:3mm;
    width: 100%;
    height:10.1in;
    min-height:10.1in;
    overflow:hidden;
  }
  .label-card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    width: 3.69in;
    height:2.435in;
    break-inside:avoid;
    page-break-inside:avoid;
    background: #fff;
    color: #000;
    border: 1px solid #111;
    border-radius: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 6.3pt;
    line-height: 1.05;
  }

  /* Mirrors the physical SPL form: black-on-white, compact rules and fields. */
  .lbl-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 2mm;
    padding: 1.3mm 1.5mm 0.8mm;
    border-bottom: 1px solid #111;
  }
  .lbl-title { min-width: 0; }
  .lbl-company {
    font-size: 5.8pt;
    font-weight: 400;
    letter-spacing: .015em;
  }
  .lbl-doctype {
    font-size: 9pt;
    font-weight: 700;
    text-transform: none;
    letter-spacing: .01em;
    margin-top: .25mm;
  }
  .lbl-box {
    max-width: 1.3in;
    font-size: 5pt;
    line-height: 1.1;
    text-align: right;
    overflow-wrap: anywhere;
  }
  .lbl-box::before { content: "Box / delivery"; display: block; font-size: 4.3pt; font-weight: 700; text-transform: uppercase; margin-bottom: .25mm; }

  .lbl-body {
    display: grid;
    grid-template-columns: 1.65fr 1fr;
    flex: 1;
    min-height: 0;
  }
  .lbl-left {
    display: flex;
    flex-direction: column;
    gap: .75mm;
    padding: 1.1mm 1.4mm;
    border-right: 1px solid #111;
  }
  .lbl-right {
    display: flex;
    flex-direction: column;
    gap: .55mm;
    padding: 1.1mm 1.2mm;
  }
  .lbl-field { display: flex; flex-direction: column; gap: .25mm; min-height: 0; }
  .lbl-field-label,
  .lbl-return-type-label {
    color: #111;
    font-size: 4.3pt;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1;
    text-transform: none;
  }
  .lbl-field-value {
    box-sizing: border-box;
    border: 1px solid #777;
    border-radius: 0;
    padding: .45mm .7mm;
    min-height: 3.9mm;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 6.2pt;
    font-weight: 600;
    line-height: 1.05;
    overflow-wrap: anywhere;
  }
  .lbl-field-value.mono { font-family: "Courier New", monospace; font-size: 7pt; font-weight: 700; letter-spacing: .02em; }
  .lbl-field-value.small { min-height: 5.2mm; font-size: 5.3pt; font-weight: 400; line-height: 1.12; }
  .lbl-barcode {
    display: block;
    width: calc(100% - 1mm);
    /* 2.2 mm was visually tidy but unnecessarily short for handheld
       scanners.  Keep the exact Code 128 module sequence; give it enough
       vertical height to print and scan reliably from an SPL label. */
    height: 4.6mm;
    margin: .5mm .5mm .15mm;
    background: #fff;
  }
  .lbl-barcode-caption { font-family: "Courier New", monospace; font-size: 4.2pt; letter-spacing: .08em; text-align: center; margin-top: .1mm; }

  .lbl-return-type-label { margin-bottom: .35mm; font-size: 5.4pt; }
  .lbl-check { display: flex; align-items: flex-start; gap: .65mm; font-size: 5.25pt; line-height: 1.12; }
  .lbl-check-mark {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 2.35mm;
    height: 2.35mm;
    border: 1px solid #111;
    border-radius: 0;
    flex-shrink: 0;
    font-size: 6.5pt;
    font-weight: 700;
    line-height: 1;
    overflow: visible;
  }
  .lbl-check-mark.checked::before { content:"✓"; position:absolute; left:-.35mm; top:-1.35mm; color:#111; font-family:Arial,Helvetica,sans-serif; font-size:8.5pt; font-weight:900; line-height:1; }
  .lbl-check-text { flex: 1; padding-top: .1mm; }

  .lbl-footer {
    display: grid;
    grid-template-columns: 1.15fr .85fr 1fr;
    gap: .8mm;
    padding: .8mm 1.4mm 1mm;
    border-top: 1px solid #111;
  }
  .lbl-footer-storage,
  .lbl-footer-meta { display: flex; flex-direction: column; gap: .25mm; min-width: 0; }
  .lbl-footer .lbl-field-label { font-size: 3.9pt; }
  .lbl-footer-storage .lbl-storage-box,
  .lbl-footer-meta-value {
    border: 1px solid #777;
    min-height: 3.3mm;
    box-sizing: border-box;
    padding: .45mm .6mm;
    font-size: 5.5pt;
    font-weight: 700;
    text-align: center;
    overflow-wrap: anywhere;
  }
  .lbl-footer-text { font-size: 4.15pt; font-style: italic; line-height: 1.12; align-self: end; text-align: right; overflow-wrap: anywhere; }

  /* SPL labels intentionally retain the printed form's black rules. These
     selectors are kept separate from the EHS PDF styling, whose form-widget
     outlines are intentionally hidden in the generated document. */
  #printArea .label-card { border:1px solid #111 !important; }
  #printArea .lbl-header { border-bottom:1px solid #111 !important; }
  #printArea .lbl-left { border-right:1px solid #111 !important; }
  #printArea .lbl-footer { border-top:1px solid #111 !important; }
  #printArea .lbl-field-value,
  #printArea .lbl-footer-storage .lbl-storage-box,
  #printArea .lbl-footer-meta-value,
  #printArea .lbl-check-mark { border:1px solid #111 !important; }

  /* ===== Utility ===== */
  .row { display: flex; gap: 8px; align-items: center; }
  .col { display: flex; flex-direction: column; gap: 8px; }
  .grow { flex: 1; }
  .text-muted { color: var(--muted); }
  .text-danger { color: var(--danger); }
  .text-success { color: var(--success); }
  .text-warn { color: var(--warn); }
  .nowrap { white-space: nowrap; }
  /* Inventory row actions need a real touch target even when the glyph is
     visually small. Keep them grouped at the edge of the row. */
  #stockTable td.nowrap { white-space:nowrap; }
  #stockTable td.nowrap > button { display:inline-grid; place-items:center; min-width:38px; min-height:36px; padding:6px 9px; line-height:1; vertical-align:middle; }
  #stockTable td.nowrap > button[data-edit], #stockTable td.nowrap > button[data-delete-stock] { width:38px; padding:6px; font-size:18px; }
  .center { text-align: center; }
  .mt-0 { margin-top: 0; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
  .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
  .small { font-size: 12px; }
  .tiny { font-size: 11px; }
  .monospace { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

  /* confirm modal */
  .confirm-msg { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
  /* Split editor: a small, deliberate decision surface shared by condition
     and visibility changes. It makes the "keep / change" outcome explicit. */
  .split-editor { max-width:460px !important; overflow:hidden; }
  .split-editor .modal-head { padding:18px 20px 12px; align-items:flex-start; }
  .split-mode { margin:0 0 4px; color:var(--primary); font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
  .split-editor .modal-head h2 { margin:0; font-size:21px; line-height:1.15; }
  .split-summary { margin:0 0 16px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); color:var(--ink-2); font-size:13px; line-height:1.45; }
  .split-choice-label { margin:0 0 8px; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
  #dispSplitPills { display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px !important; margin:0 0 18px !important; }
  #dispSplitPills.single-choice { grid-template-columns:minmax(0,1fr); }
  .split-choice { min-height:46px; display:inline-flex; align-items:center; justify-content:center; border:2px solid transparent; border-radius:var(--radius-sm); font:inherit; font-size:13px; font-weight:700; cursor:pointer; transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
  .split-choice:hover { transform:translateY(-1px); box-shadow:var(--shadow-sm); }
  .split-choice:active { transform:scale(.98); }
  .split-choice.selected { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
  .split-quantity { padding:14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); }
  .split-quantity-head { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
  .split-quantity-shortcut { margin-left:auto; color:var(--muted); font-size:10px; font-weight:700; white-space:nowrap; }
  .split-quantity-shortcut kbd { color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line-strong); border-radius:4px; padding:1px 4px; font:700 10px ui-monospace,monospace; }
  .split-stepper { display:flex; align-items:center; gap:10px; margin-top:10px; }
  .split-stepper button { width:42px; min-width:42px; min-height:42px; padding:0; font-size:22px; }
  #dispSplitQty { width:76px; min-height:42px; margin:0; text-align:center; font-size:19px; font-weight:800; -moz-appearance:textfield; }
  #dispSplitQty::-webkit-outer-spin-button, #dispSplitQty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .split-preview { margin:12px 0 0; color:var(--ink-2); font-size:12px; line-height:1.4; }
  .split-preview strong { color:var(--ink); }
  .stock-quantity-editor { max-width:560px !important; overflow:hidden; }
  .stock-quantity-editor .modal-body { display:grid; gap:12px; }
  .stock-quantity-intro { margin:0; color:var(--ink-2); font-size:13px; line-height:1.45; }
  .stock-quantity-lines { display:grid; gap:9px; max-height:min(54vh, 520px); overflow:auto; padding:1px; }
  .stock-quantity-line { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); }
  .stock-quantity-identity { min-width:0; }
  .stock-quantity-identity strong { display:block; color:var(--ink); font-size:13px; }
  .stock-quantity-meta { display:flex; gap:5px; align-items:center; flex-wrap:wrap; margin-top:5px; }
  .stock-quantity-meta .badge { white-space:nowrap; }
  .stock-quantity-stepper { display:grid; grid-template-columns:42px 72px 42px; align-items:stretch; }
  .stock-quantity-stepper button { min-width:42px; min-height:42px; padding:0; border-radius:0; font-size:21px; }
  .stock-quantity-stepper button:first-child { border-radius:7px 0 0 7px; }
  .stock-quantity-stepper button:last-child { border-radius:0 7px 7px 0; }
  .stock-quantity-stepper input { width:72px; min-height:42px; margin:0; border-left:0; border-right:0; border-radius:0; text-align:center; font-size:17px; font-weight:800; -moz-appearance:textfield; }
  .stock-quantity-stepper input::-webkit-outer-spin-button, .stock-quantity-stepper input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
  .stock-quantity-total { display:flex; justify-content:space-between; gap:12px; padding:11px 13px; border-top:1px solid var(--line); color:var(--ink-2); font-size:13px; }
  .stock-quantity-total strong { color:var(--ink); font-size:15px; }
  @media (max-width:560px) {
    .stock-quantity-line { grid-template-columns:1fr; }
    .stock-quantity-stepper { grid-template-columns:48px minmax(72px,1fr) 48px; }
    .stock-quantity-stepper input { width:100%; }
    .stock-quantity-stepper button { min-width:48px; min-height:46px; }
  }
  /* EHS declaration wizard: compact when there is no contamination, but
     deliberately explicit when a hazardous return needs documentation. */
  .ehs-wizard { max-width:760px; }
  .ehs-wizard-intro { padding:12px 14px; border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2); font-size:13px; }
  .ehs-hazard-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin-top:12px; }
  .ehs-hazard-toggle { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:8px 10px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); font-size:12px; }
  .ehs-hazard-toggle > span { line-height:1.2; }
  .ehs-hazard-choice { display:inline-flex; gap:4px; flex:none; }
  .ehs-hazard-choice label { display:inline-flex; align-items:center; gap:3px; padding:4px 5px; border-radius:6px; cursor:pointer; color:var(--ink-2); }
  .ehs-hazard-choice input { width:auto; margin:0; }
  .ehs-conditional { margin-top:14px; padding:14px; border:1px solid var(--warn); border-radius:var(--radius-sm); background:var(--warn-soft); }
  .ehs-conditional[hidden] { display:none; }
  .ehs-declaration-note { display:flex; align-items:flex-start; gap:8px; width:100%; box-sizing:border-box; margin-top:12px; padding:10px 12px; border-left:3px solid var(--primary); background:var(--surface-2); color:var(--ink-2); font-size:12px; line-height:1.45; }
  .ehs-declaration-note input { flex:none; margin:2px 0 0 !important; }
  .ehs-signature-preview { grid-column:1 / -1; min-height:54px; padding:8px 10px; border:1px dashed var(--line-strong); border-radius:var(--radius-sm); background:var(--surface); display:flex; align-items:center; font-family:cursive; font-size:21px; }
  .ehs-signature-preview img { max-width:100%; max-height:38px; object-fit:contain; }
  .ehs-actions { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
  .ehs-pdf-modal { width:min(920px, calc(100vw - 32px)); max-width:920px; height:min(900px, calc(100dvh - 32px)); }
  .ehs-pdf-modal .modal-head { flex:none; }
  .ehs-pdf-modal .modal-body { position:relative; min-width:0; min-height:240px; padding:0; overflow:hidden; background:var(--surface-2); }
  .ehs-pdf-frame { display:block; width:100%; height:100%; min-width:0; border:0; background:var(--surface-2); }
  .ehs-pdf-status { position:absolute; inset:0; display:grid; place-items:center; padding:24px; color:var(--ink-2); text-align:center; }
  .ehs-pdf-status[hidden] { display:none; }
  .pdf-preview-fallback { position:absolute; inset:0; display:grid; place-items:center; padding:24px; text-align:center; }
  .pdf-preview-fallback[hidden] { display:none; }
  .pdf-preview-fallback-card { width:min(440px, 100%); padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-sm); }
  .pdf-preview-fallback-card strong { display:block; margin-bottom:7px; color:var(--ink); font-size:17px; }
  .pdf-preview-fallback-card span { display:block; color:var(--muted); font-size:13px; line-height:1.45; }
  .ehs-pdf-modal .modal-foot { flex:none; align-items:center; }
  .ehs-pdf-modal .modal-foot .tiny { max-width:430px; line-height:1.35; }
  @media (max-width:620px) {
    .modal-backdrop:has(.ehs-pdf-modal) {
      align-items:stretch;
      padding:max(8px, env(safe-area-inset-top, 0px)) 8px max(8px, env(safe-area-inset-bottom, 0px));
      overflow:hidden;
    }
    .ehs-pdf-modal { width:100%; height:100%; max-width:none; max-height:none; border-radius:10px; }
    .ehs-pdf-modal .modal-head { min-height:52px; padding:10px 12px; }
    .ehs-pdf-modal .modal-head h2 { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; }
    .ehs-pdf-modal .modal-body { min-height:0; }
    .ehs-pdf-modal .modal-foot { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:10px 12px; }
    .ehs-pdf-modal .modal-foot .spacer { display:none; }
    .ehs-pdf-modal .modal-foot .tiny { grid-column:1 / -1; max-width:none; }
    .ehs-pdf-modal .modal-foot button { min-width:0; min-height:42px; padding:8px 10px; }
  }
  @media (max-width:620px) { .ehs-hazard-grid { grid-template-columns:1fr; } .ehs-wizard .form-grid { grid-template-columns:1fr; } }
  .confirm-msg { font-size: 14px; line-height: 1.5; color: var(--ink-2); }

  /* ===== Agilent-style responsive navigation ===== */
  .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .desktop-part-search { position:relative; width:100%; max-width:558px; margin-left:auto; }
  .desktop-part-search input { box-sizing:border-box; width:100%; height:32px; min-height:32px; border:0; border-radius:3px; padding:4px 40px 4px 14px; box-shadow:0 1px 0 rgba(0,0,0,.12); font-size:14px; }
  .desktop-part-search::after { content:'⌕'; position:absolute; top:50%; right:13px; transform:translateY(-53%); color:var(--primary-dark); font-size:22px; pointer-events:none; }
  .header-search-clear { position:absolute; z-index:3; top:50%; right:5px; transform:translateY(-50%); display:grid; place-items:center; width:34px; height:34px; min-height:0; margin:0; padding:0; border:0; border-radius:50%; background:rgba(0,79,132,.11); color:var(--primary-dark); font-size:22px; line-height:1; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; pointer-events:auto; }
  .header-search-clear:hover, .header-search-clear:focus-visible { background:rgba(0,79,132,.2); color:var(--primary-dark); }
  .desktop-part-search:has(.header-search-clear:not([hidden]))::after, .mobile-persistent-search:has(.header-search-clear:not([hidden]))::after { display:none; }
  .mobile-nav-trigger, .mobile-header-theme, .mobile-nav-drawer, .mobile-nav-scrim, .mobile-utility-bar { display:none; }
  .header-search-tray { position:absolute; z-index:49; top:100%; left:18px; right:18px; max-height:min(60vh, 520px); overflow:auto; background:var(--surface); color:var(--ink); border:1px solid var(--line-strong); border-top:0; box-shadow:var(--shadow-lg); }
  .header-search-tray .table-wrap { overflow:visible; }
  .header-search-tray .data { min-width:720px; }
  @media (min-width:769px) {
    .topbar-row { display:grid; grid-template-columns:minmax(330px, 1fr) minmax(400px, 558px); grid-template-rows:auto auto; align-items:center; column-gap:18px; row-gap:2px; }
    .brand { grid-column:1; grid-row:1 / span 2; margin-right:0; }
    .topbar-actions { grid-column:2; grid-row:1; justify-content:flex-end; }
    .desktop-part-search { grid-column:2; grid-row:2; justify-self:end; }
    nav.tabs { overflow:visible; }
    nav.tabs .tab-btn { position:relative; }
    nav.tabs .tab-btn.active { overflow:visible; }
  }
  /* A deliberate theme switch fades without animating layout or interactions.
     Do not include repeated history or table rows here: animating dozens of
     shadows at once made the theme control hitch on shipment-heavy screens. */
  body.theme-transitioning,
  body.theme-transitioning header.topbar,
  body.theme-transitioning .tab-panel,
  body.theme-transitioning .panel,
  body.theme-transitioning .panel-head,
  body.theme-transitioning .home-hero,
  body.theme-transitioning .home-impact-card,
  body.theme-transitioning .inventory-space-card,
  body.theme-transitioning .modal,
  body.theme-transitioning .notification-menu,
  body.theme-transitioning .account-panel {
    transition-property:background-color, color, border-color, box-shadow !important;
    transition-duration:220ms !important;
    transition-timing-function:ease !important;
  }
  @media (prefers-reduced-motion:reduce) {
    body.theme-transitioning,
    body.theme-transitioning header.topbar,
    body.theme-transitioning .tab-panel,
    body.theme-transitioning .panel,
    body.theme-transitioning .panel-head,
    body.theme-transitioning .home-hero,
    body.theme-transitioning .home-impact-card,
    body.theme-transitioning .inventory-space-card,
    body.theme-transitioning .modal,
    body.theme-transitioning .notification-menu,
    body.theme-transitioning .account-panel { transition-duration:0ms !important; }
  }
  .district-locations { color:var(--ink-2); font-size:12px; line-height:1.45; }
  .district-locations div + div { margin-top:3px; }
  @media (max-width:768px) {
    .advanced-filter-row { grid-template-columns:1fr; gap:8px; }
    /* Standalone iOS runs content beneath the translucent status bar.  The
       first header row must reserve that space or the brand/menu controls are
       effectively pushed behind the system chrome. */
    header.topbar { position:sticky; top:0; z-index:100; padding-top:env(safe-area-inset-top, 0px); background:var(--surface-top); }
    .topbar-row { min-height:62px; display:flex; flex-wrap:nowrap; padding:8px 14px 4px; gap:10px; }
    .brand { min-width:0; margin-right:auto; }
    .admin-mode-badge, .desktop-part-search, nav.tabs { display:none !important; }
    .topbar-actions { display:none !important; }
    .brand { gap:8px; }
    .brand-divider { display:block !important; height:32px; background:rgba(255,255,255,.55); }
    .brand > div:not(.agilent-corporate-mark):not(.brand-divider) { display:block !important; min-width:0; }
    .brand h1 { font-size:14px; line-height:1.08; white-space:nowrap; }
    .brand .tagline { display:block !important; margin-top:3px; color:rgba(255,255,255,.82); font-size:10px; white-space:nowrap; }
    .agilent-corporate-mark { width:106px; height:41px; }
    .agilent-corporate-mark img { width:192px; height:41px; }
    .mobile-header-theme { display:grid; place-items:center; flex:none; width:42px; min-height:44px; padding:0; border:0; border-radius:3px; background:transparent; color:#fff; -webkit-tap-highlight-color:transparent; }
    .mobile-header-theme:hover, .mobile-header-theme:focus-visible, .mobile-header-theme:active { background:transparent; outline:none; }
    .mobile-header-theme svg { width:22px; height:22px; }
    body[data-theme="agilent-web-dark"] .mobile-header-theme { color:#2a88b2; }
    .mobile-nav-trigger { display:grid; place-content:center; gap:4px; flex:none; width:48px; min-height:44px; padding:0; border:0; border-radius:3px; background:transparent; color:#fff; -webkit-tap-highlight-color:transparent; }
    .mobile-nav-trigger { transform:translateY(-2px); }
    .mobile-nav-trigger:hover, .mobile-nav-trigger:focus-visible, .mobile-nav-trigger:active { background:transparent; outline:none; }
    .mobile-nav-trigger span { display:block; width:28px; height:3px; border-radius:2px; background:currentColor; }
    /* The search/utility row is part of the same persistent blue header, not
       a second brighter strip. This also avoids a visible seam in the PWA. */
    .mobile-utility-bar { display:grid; grid-template-columns:minmax(0, 1fr) 44px 44px; align-items:center; gap:8px; padding:4px 14px 12px; background:var(--surface-top); }
    .mobile-utility-bar.kiosk { grid-template-columns:minmax(0, 1fr); }
    .mobile-persistent-search { position:relative; min-width:0; }
    .mobile-persistent-search label { display:block; }
    .mobile-persistent-search::after { content:'⌕'; position:absolute; top:5px; right:11px; color:var(--primary-dark); font-size:23px; pointer-events:none; }
    .mobile-persistent-search input { width:100%; min-height:42px; border:0; border-radius:3px; padding:8px 36px 8px 12px; background:#fff; color:#17313f; font-size:15px; box-shadow:0 1px 0 rgba(0,0,0,.14); }
    .mobile-persistent-search .header-search-clear { right:3px; width:38px; height:38px; }
    /* These two controls sit on saturated blue hero/header surfaces. In dark
       mode a white field reads as an accidental light-theme fragment, so the
       mobile versions use the normal dark surfaces while keeping a crisp blue
       focus state. Desktop and the light palette intentionally stay white. */
    body[data-theme="agilent-web-dark"] .mobile-persistent-search input {
      border:1px solid var(--line-strong);
      background:var(--surface);
      color:var(--ink);
      box-shadow:0 2px 8px rgba(0,0,0,.24);
      -webkit-appearance:none;
      appearance:none;
    }
    body[data-theme="agilent-web-dark"] .mobile-persistent-search input::placeholder { color:var(--muted); opacity:1; }
    body[data-theme="agilent-web-dark"] .mobile-persistent-search input:focus { border-color:var(--primary); box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 30%,transparent),0 2px 8px rgba(0,0,0,.24); }
    body[data-theme="agilent-web-dark"] .mobile-persistent-search::after { color:var(--primary); }
    body[data-theme="agilent-web-dark"] .mobile-persistent-search .header-search-clear {
      background:color-mix(in srgb,var(--primary) 16%,var(--surface));
      color:var(--primary);
    }
    body[data-theme="agilent-web-dark"] .mobile-persistent-search .header-search-clear:hover,
    body[data-theme="agilent-web-dark"] .mobile-persistent-search .header-search-clear:focus-visible { background:color-mix(in srgb,var(--primary) 25%,var(--surface)); color:var(--ink); }
    body[data-theme="agilent-web-dark"] .dashboard-hero-customize {
      border-color:var(--line-strong);
      background:var(--surface);
      color:var(--ink);
      box-shadow:0 3px 10px rgba(0,0,0,.3);
    }
    body[data-theme="agilent-web-dark"] .dashboard-hero-customize:hover,
    body[data-theme="agilent-web-dark"] .dashboard-hero-customize:focus-visible,
    body[data-theme="agilent-web-dark"] .dashboard-hero-customize[aria-pressed="true"] { border-color:var(--primary); background:var(--primary-soft); color:var(--ink); }
    .mobile-utility-button { position:relative; display:grid; place-items:center; width:44px; height:42px; padding:0; border:0; border-radius:3px; background:transparent; color:#fff; }
    .mobile-utility-button { -webkit-tap-highlight-color:transparent; }
    .mobile-utility-button:hover, .mobile-utility-button:focus-visible, .mobile-utility-button:active { background:transparent; outline:none; }
    .mobile-utility-button svg { width:24px; height:24px; }
    .mobile-account-button .account-avatar { width:31px; height:31px; font-size:10px; background:#fff; color:var(--primary-dark); }
    .mobile-utility-button .notification-count { top:1px; right:1px; }
    .mobile-nav-scrim[hidden], .mobile-nav-drawer[hidden] { display:none !important; }
    .mobile-nav-scrim { display:block; position:fixed; inset:0; z-index:100; background:rgba(0,47,76,.64); backdrop-filter:blur(1px); }
    /* The navigation itself is the drawer's header. There is no redundant
       close/title rail; touching the dimmed page closes it. Start just below
       the persistent header and preserve a generous dismissal target on the
       left, including on narrow iPhones. */
    .mobile-nav-drawer { display:flex; position:fixed; z-index:101; inset:calc(env(safe-area-inset-top, 0px) + 124px) 0 0 auto; width:min(68vw, 330px); padding-top:0; background:var(--surface-top); color:#fff; box-shadow:-12px 0 34px rgba(0,30,52,.25); animation:mobileDrawerIn .18s ease-out; }
    @keyframes mobileDrawerIn { from { transform:translateX(32px); opacity:.55; } to { transform:translateX(0); opacity:1; } }
    .mobile-nav-content { flex:1; min-width:0; overflow:auto; padding:0 0 calc(22px + env(safe-area-inset-bottom, 0px)); }
    .mobile-nav-title { display:none; }
    .mobile-nav-links { display:grid; border-top:1px solid rgba(0,69,114,.25); }
    .mobile-nav-links button { display:flex; justify-content:space-between; align-items:center; width:100%; min-height:64px; padding:15px 24px; border:0; border-bottom:1px solid rgba(0,69,114,.25); border-radius:0; background:transparent; color:#fff; text-align:left; font-size:18px; font-weight:650; }
    .mobile-nav-links button::after { content:'›'; font-size:28px; font-weight:300; opacity:.85; }
    .mobile-nav-links button.active { background:rgba(0,80,130,.28); }
    .mobile-nav-label { display:inline-flex; align-items:center; gap:9px; min-width:0; }
    .mobile-nav-count { display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 7px; border-radius:999px; background:rgba(255,255,255,.2); color:#fff; font-size:12px; font-weight:800; line-height:1; }
    .mobile-nav-links button.active .mobile-nav-count { background:var(--accent); color:#17313f; }
    /* Dropdowns visually belong to their utility buttons, so use a four-pixel
       gap below that row instead of the drawer's lower starting edge. */
    .notification-menu, .account-panel { position:fixed !important; top:calc(env(safe-area-inset-top, 0px) + 112px) !important; right:12px !important; left:12px !important; width:auto !important; max-width:none !important; max-height:calc(100dvh - env(safe-area-inset-top, 0px) - 128px); overflow:auto; }
    main { padding:12px; }
    .universal-back-tab { left:12px; bottom:-38px; min-height:38px; padding:8px 15px 9px; border-radius:0 0 8px 8px; font-size:14px; }
    body.has-universal-back main { padding-top:54px; }
    .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
    /* Use the same horizontally-scrollable, full-information grid as Staged
       Returns on phones.  Previously these three operational lists tried to
       fit a desktop table into portrait width by hiding fields and narrowing
       columns until the rows became hard to read. */
    table.data { min-width:640px; }
    table.data.operational-list { table-layout:auto; }
    #stockTable.operational-list { min-width:960px; }
    #returnsTable.operational-list { min-width:680px; }
    .history-box-parts table.data.operational-list { min-width:940px; }
    #wipTable.operational-list { min-width:920px; }
    #activityLogTable.operational-list { min-width:860px; }
    table.data.operational-list th { white-space:nowrap; font-size:11px; letter-spacing:.04em; }
    table.data.operational-list td { padding:10px 16px; vertical-align:middle; }
    table.data.operational-list .pn { overflow-wrap:normal; white-space:nowrap; }
    table.data.operational-list .disp { max-width:none; margin:2px 0; padding:5px 8px; font-size:11px; line-height:1.15; }
    table.data.operational-list .badge { border-radius:6px; padding:3px 7px; font-size:10px; line-height:1.2; }
    #stockTable.operational-list .stock-mobile-location { display:none; }
    #stockTable.operational-list .nowrap { white-space:nowrap; }
    #stockTable.operational-list td.nowrap > button { min-width:44px; min-height:44px; padding:8px 10px; font-size:13px; }
    #stockTable.operational-list td.nowrap > button[data-edit], #stockTable.operational-list td.nowrap > button[data-delete-stock] { width:44px; padding:8px; font-size:20px; }
    #returnsTable.operational-list .empty-row { white-space:normal; text-align:center; padding:24px 14px; }
    .returns-bottom-bar > button { width:100%; }
    .disp { display:inline-flex; margin:2px 3px 2px 0; white-space:nowrap; }

    /* Opening a submitted shipment becomes a focused mobile detail view.
       The persistent header remains fixed in place; the card occupies the
       exact remaining viewport and its rows scroll inside the card. */
    #panel-history:has(.history-box-parts.open) > .panel {
      height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 144px);
      min-height:0;
      margin-bottom:0;
      display:flex;
      flex-direction:column;
      overflow:hidden;
    }
    #panel-history:has(.history-box-parts.open) > .panel > .panel-head { flex:none; }
    #panel-history:has(.history-box-parts.open) #historyContainer {
      flex:1;
      min-height:0;
      padding:12px;
      overflow:hidden;
      display:flex;
      flex-direction:column;
    }
    #panel-history:has(.history-box-parts.open) .history-event-selector { display:none; }
    #historyContainer:has(.history-box-parts.open) .history-box-card:not(:has(.history-box-parts.open)) { display:none; }
    #historyContainer .history-box-card:has(.history-box-parts.open) {
      height:auto;
      flex:1;
      min-height:0;
      margin:0;
      display:flex;
      flex-direction:column;
    }
    #historyContainer .history-box-card:has(.history-box-parts.open) > .history-box-card-head { flex:none; }
    #historyContainer .history-box-parts.open {
      flex:1;
      min-height:0;
      max-height:none;
      overflow:auto;
      -webkit-overflow-scrolling:touch;
    }
    #historyContainer .history-box-parts.open .history-label-selection-bar {
      position:sticky;
      top:0;
      z-index:3;
    }
    #historyContainer .history-box-parts.open th { position:static; }
  }
  @media (orientation:landscape) and (max-height:600px) {
    .modal-backdrop:has(.scan-modal) { align-items:stretch; padding:5px; overflow:hidden; }
    .scan-modal { width:min(940px, calc(100vw - 10px)); height:calc(100dvh - 10px); max-height:none; display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
    .scan-modal .modal-head, .scan-modal .modal-foot { padding:8px 14px; }
    .scan-modal .modal-body { min-height:0; overflow-y:auto !important; padding:8px 14px; gap:7px; }
    .scan-modal .scan-hint { display:none; }
    .scan-console-main { padding:9px 12px; }
    .scan-display { display:none; }
    .scan-recent-list { min-height:86px; max-height:116px; }
    .scan-session-line { padding:5px 2px 0; }
  }
  /* Landscape phones have enough width to keep the scan instrument and its
     receipt side by side. This removes the tall stacked surface that hid the
     latest scan beneath the keyboard or footer. */
  @media (orientation:landscape) and (max-height:600px) and (min-width:621px) {
    .scan-modal .modal-body { display:grid; grid-template-columns:minmax(0, 1.45fr) minmax(216px, .75fr); grid-template-rows:auto minmax(0, 1fr); align-items:start; column-gap:12px; overflow:hidden !important; }
    .scan-modal .scan-console { grid-column:1; grid-row:1 / span 2; }
    .scan-modal .scan-console-top { padding:7px 12px; }
    .scan-modal .scan-console-main { padding:8px 12px; }
    .scan-modal .scan-entry-label, .scan-modal .scan-preview { display:none; }
    .scan-modal .scan-entry-row { margin:0; gap:7px; }
    .scan-modal .scan-entry-row input#scanPartInput,
    .scan-modal .scan-entry-row button#scanConfirmManualBtn { min-height:42px; }
    .scan-modal .scan-entry-row input#scanPartInput { font-size:16px; padding-top:8px; padding-bottom:8px; }
    .scan-modal .scan-entry-row button#scanConfirmManualBtn { padding:0 13px; }
    .scan-modal .scan-utility-deck { grid-template-columns:100px minmax(0, 1fr) 118px; gap:8px; padding:8px 12px; }
    .scan-modal .scan-control-label { margin-bottom:4px; }
    .scan-modal .scan-qty-stepper, .scan-modal .scan-location-input { height:34px; min-height:34px; }
    .scan-modal .scan-qty-stepper button { min-height:32px; width:31px; }
    .scan-modal .scan-session-line { grid-column:2; grid-row:1; display:grid; grid-template-columns:auto 1fr; gap:3px 7px; margin:0; padding:2px 0 8px; }
    .scan-modal .scan-session-line .grow { display:none; }
    .scan-modal #scanSessionStats { grid-column:1 / -1; }
    .scan-modal .scan-recent { grid-column:2; grid-row:2; min-height:0; margin:0; padding-top:7px; display:flex; flex-direction:column; }
    .scan-modal .scan-recent-list { min-height:0; max-height:none; flex:1 1 auto; overflow:auto; }
    .scan-modal .scan-recent-item { grid-template-columns:minmax(0,1fr) auto 25px; gap:5px 7px; padding:7px 8px; }
    .scan-modal .scan-recent-legacy-item { grid-template-columns:minmax(0,1fr) auto 25px; }
    .scan-modal .scan-recent-legacy-item > .badge:nth-child(3),
    .scan-modal .scan-recent-legacy-item > .disp,
    .scan-modal .scan-recent-legacy-item > .qty { grid-column:2; grid-row:auto; width:auto; min-width:0; }
    .scan-modal .scan-recent-legacy-item > .dr-remove { grid-column:3; grid-row:1 / span 2; }
    .scan-modal .scan-recent-legacy-item > [data-scan-recent-details] { grid-column:1 / -1; grid-row:auto; }
  }
  @media (min-width:769px) and (max-width:1050px) { .topbar-row { grid-template-columns:minmax(220px, 1fr) minmax(260px, 1fr); } .brand h1 { font-size:14px; } }
  @media (orientation:landscape) and (max-width:920px) { #stockTable th:nth-child(6), #stockTable td:nth-child(6), #stockTable th:nth-child(7), #stockTable td:nth-child(7), #stockTable th:nth-child(8), #stockTable td:nth-child(8) { display:table-cell; } #districtSearchTable th:nth-child(3), #districtSearchTable td:nth-child(3) { display:table-cell; } #stockTable .stock-mobile-location { display:none; } }

  /* responsive */
  @media (max-width: 768px) {
    .topbar-row { padding: 8px 12px; }
    /* Safari zooms a page when focusing a control below 16px. Keep the
       document scale stable during barcode, quantity, and sign-in workflows
       without disabling a user's normal pinch-zoom accessibility control. */
    input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size:16px !important; }
    .admin-mode-badge { position:static; transform:none; margin-left:0; font-size:9px; padding:5px 9px; }
    .engineer-pill-label { display:none; }
    .engineer-pill select { min-width:132px; }
    main { padding: 12px; }
    .form-grid { grid-template-columns: 1fr; }
    .scan-row { grid-template-columns: 1fr; }
  }

  /* Fresh scanner workspace. This deliberately uses the same quiet surfaces,
     borders, and controls as the rest of the app: scanning is a fast form,
     not a simulated piece of laboratory equipment. */
  .scan-modal { max-width:760px; }
  .scan-modal .modal-body { display:flex; flex-direction:column; gap:12px; padding:18px; background:var(--surface); }
  .scan-modal .scan-hint { display:none; }
  .scan-console {
    color:var(--ink);
    background:var(--surface-2);
    border:1px solid var(--line-strong);
    border-radius:var(--radius);
    box-shadow:0 6px 18px rgba(0,47,76,.08);
    overflow:hidden;
  }
  .scan-console-top {
    min-height:42px;
    padding:10px 14px;
    color:var(--ink);
    background:var(--primary-soft);
    border-bottom:1px solid var(--line);
  }
  .scan-ready { color:var(--primary-dark); font-size:12px; letter-spacing:0; }
  .scan-ready-dot { width:8px; height:8px; background:var(--success); box-shadow:0 0 0 4px color-mix(in srgb, var(--success) 17%, transparent); }
  .scan-console-context { color:var(--muted); font-size:12px; }
  .scan-console-main { padding:15px 14px 12px; background:var(--surface); }
  .scan-entry-label { margin:0 0 7px; color:var(--ink); font-size:12px; font-weight:800; letter-spacing:0; text-transform:none; }
  .scan-entry-label > span:last-child { color:var(--muted); font-size:11px; font-weight:500; }
  .scan-entry-row { gap:8px; margin:0; }
  .scan-input-wrap { min-width:0; }
  .scan-input-icon { left:14px; color:var(--primary); font-size:17px; }
  .scan-entry-row input#scanPartInput {
    min-height:48px;
    padding:10px 12px 10px 40px;
    color:var(--ink);
    background:var(--surface);
    border:1px solid var(--line-strong);
    border-radius:var(--radius-sm);
    box-shadow:none;
    font:600 17px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing:.01em;
  }
  .scan-entry-row input#scanPartInput::placeholder { color:var(--muted); }
  .scan-entry-row input#scanPartInput:focus { background:var(--surface); border-color:var(--primary); outline:3px solid color-mix(in srgb, var(--primary) 18%, transparent); }
  .scan-entry-row button#scanConfirmManualBtn {
    min-height:48px;
    padding:0 16px;
    color:#fff;
    background:var(--primary);
    border-color:var(--primary);
    border-radius:var(--radius-sm);
    box-shadow:none;
    font-size:14px;
  }
  .scan-entry-row button#scanConfirmManualBtn:hover { color:#fff; background:var(--primary-dark); border-color:var(--primary-dark); }
  .scan-button-key { margin-left:7px; padding-left:7px; border-left:1px solid rgba(255,255,255,.45); font-size:10px; font-weight:700; opacity:.9; }
  .scan-preview {
    grid-template-columns:auto minmax(0,1fr) auto;
    min-height:28px;
    margin-top:9px;
    color:var(--muted);
    gap:6px 9px;
  }
  .scan-preview-pn { color:var(--ink); font:700 13px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
  .scan-preview-desc { color:var(--muted); font-size:12px; }
  .scan-preview-meta .badge { color:var(--ink); background:var(--surface-2); border-color:var(--line); }
  .scan-utility-deck {
    grid-template-columns:132px minmax(0,1fr);
    gap:10px;
    padding:12px 14px 14px;
    background:var(--surface-2);
    border-top:1px solid var(--line);
  }
  .scan-control-label { margin:0 0 6px; color:var(--muted); font-size:10px; }
  .scan-key { color:var(--muted); background:transparent; border:0; padding:0; border-radius:0; font-size:10px; }
  .scan-qty-stepper {
    height:38px;
    border:1px solid var(--line-strong);
    border-radius:var(--radius-sm);
    background:var(--surface);
  }
  .scan-qty-stepper button { width:36px; min-height:36px; color:var(--primary-dark); background:var(--surface); font-size:19px; font-weight:700; }
  .scan-qty-stepper button:hover { color:#fff; background:var(--primary); }
  .scan-qty-stepper input {
    color:var(--ink);
    background:var(--surface);
    border-color:var(--line);
    font-size:15px;
    font-weight:800;
    appearance:textfield;
    -moz-appearance:textfield;
  }
  .scan-qty-stepper input::-webkit-outer-spin-button,
  .scan-qty-stepper input::-webkit-inner-spin-button { margin:0; appearance:none; -webkit-appearance:none; }
  .scan-qty-stepper input:focus { outline:2px solid color-mix(in srgb, var(--primary) 34%, transparent); outline-offset:-2px; }
  .scan-location-input {
    min-height:38px;
    color:var(--ink);
    background:var(--surface);
    border:1px solid var(--line-strong);
    border-radius:var(--radius-sm);
    box-shadow:none;
    font-size:13px;
  }
  .scan-location-input::placeholder { color:var(--muted); }
  .scan-location-input:focus { border-color:var(--primary); outline:2px solid color-mix(in srgb, var(--primary) 18%, transparent); outline-offset:0; }
  .scan-session-line { min-height:25px; margin:0; padding:0 2px; }
  .scan-session-line .scan-session-destination { color:var(--ink); }
  .scan-recent { margin:0; padding-top:2px; }
  .scan-recent h4 { margin-bottom:7px; color:var(--ink-2); font-size:11px; font-weight:800; letter-spacing:.07em; }
  .scan-recent-list { max-height:240px; background:var(--surface); border-color:var(--line-strong); border-radius:var(--radius-sm); }
  .scan-recent-item { background:var(--surface); }
  .scan-recent-legacy-item > .disp { width:124px; min-width:124px; }

  @media (max-width:680px) {
    .modal-backdrop:has(.scan-modal) { padding:8px; }
    .scan-modal { width:calc(100vw - 16px); }
    .scan-modal .modal-body { padding:12px; gap:10px; overflow-y:auto; }
    .scan-utility-deck { grid-template-columns:112px minmax(0,1fr); padding:11px 12px 12px; }
    .scan-recent-list { max-height:min(250px, 32vh); }
  }
  @media (max-width:460px) {
    .scan-modal .modal-head, .scan-modal .modal-foot { padding:11px 14px; }
    .scan-modal .modal-body { padding:10px; }
    .scan-console-top { min-height:38px; padding:8px 11px; }
    .scan-console-context { display:none; }
    .scan-console-main { padding:12px 11px 10px; }
    .scan-entry-label > span:last-child { display:none; }
    .scan-entry-row input#scanPartInput { min-height:47px; font-size:16px; }
    .scan-entry-row button#scanConfirmManualBtn { min-height:47px; padding:0 13px; }
    .scan-button-key { display:none; }
    .scan-preview { grid-template-columns:minmax(0,1fr) auto; }
    .scan-preview-desc { grid-column:1 / -1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .scan-preview-meta { display:none; }
    .scan-utility-deck { grid-template-columns:105px minmax(0,1fr); gap:8px; }
    .scan-recent-list { max-height:31vh; }
  }
  @media (orientation:landscape) and (max-height:600px) and (min-width:621px) {
    .scan-modal .modal-body {
      display:grid !important;
      grid-template-columns:minmax(0, 1.16fr) minmax(230px, .84fr);
      grid-template-rows:auto minmax(0,1fr);
      align-items:start;
      gap:10px 12px;
      overflow:hidden !important;
    }
    .scan-modal .scan-console { grid-column:1; grid-row:1 / span 2; }
    .scan-modal .scan-session-line { grid-column:2; grid-row:1; padding-top:4px; }
    .scan-modal .scan-recent { grid-column:2; grid-row:2; min-height:0; display:flex; flex-direction:column; }
    .scan-modal .scan-recent-list { min-height:0; max-height:none; flex:1 1 auto; }
    .scan-modal .scan-console-main { padding:10px 12px; }
    .scan-modal .scan-entry-row input#scanPartInput,
    .scan-modal .scan-entry-row button#scanConfirmManualBtn { min-height:42px; }
    .scan-modal .scan-utility-deck { grid-template-columns:104px minmax(0,1fr); padding:10px 12px; }
  }

  @media (max-width:768px) {
    .mobile-nav-links button { justify-content:flex-start; gap:13px; }
    .mobile-nav-links button::after { display:none; }
    .mobile-nav-links button::before { content:'‹'; flex:none; font-size:28px; font-weight:300; line-height:1; opacity:.9; }

    /* Primary inventory actions form one deliberate pair. Utilities occupy a
       quieter second row and never inherit the larger primary-button style. */
    .stock-action-primary > button {
      min-height:40px;
      min-width:142px;
      padding:0 16px;
      font-size:14px;
      font-weight:760;
    }
    .stock-action-utilities > button {
      min-height:34px;
      padding:6px 10px;
      font-size:12px;
      font-weight:720;
    }
  }
  @media (min-width:769px) {
    .stock-action-primary > button {
      min-height:40px;
      min-width:142px;
      padding:0 16px;
      font-size:14px;
      font-weight:760;
    }
    .stock-action-utilities > button {
      min-height:34px;
      padding:6px 10px;
      font-size:12px;
      font-weight:720;
    }
  }

  /* Shared condition selector language. Inactive choices stay neutral so the
     single selected condition is unmistakable; only that choice receives its
     semantic color and focus frame. */
  .condition-choice-grid,
  .scan-disposition-grid,
  .spl-condition-options {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;
  }
  .condition-choice,
  .scan-disposition-choice {
    --condition-color:#0876ae;
    min-width:0;
    min-height:40px;
    padding:6px 7px;
    border:2px solid var(--line-strong);
    border-radius:7px;
    background:var(--surface-2);
    color:var(--ink-2);
    font-size:11px;
    font-weight:800;
    line-height:1.1;
    text-align:center;
    cursor:pointer;
    box-shadow:none;
  }
  .condition-choice[data-part-disp="New/Unused"],
  .scan-disposition-choice[data-scan-disp="New/Unused"],
  .spl-condition-choice:has(input[value="New/Unused"]) { --condition-color:#168657; }
  .condition-choice[data-part-disp="Open Return"],
  .scan-disposition-choice[data-scan-disp="Open Return"],
  .spl-condition-choice:has(input[value="Open Return"]) { --condition-color:#b87300; }
  .condition-choice[data-part-disp="DEFOA"],
  .scan-disposition-choice[data-scan-disp="DEFOA"],
  .spl-condition-choice:has(input[value="DEFOA"]) { --condition-color:#5266b8; }
  .condition-choice[data-part-disp="Bad"],
  .scan-disposition-choice[data-scan-disp="Bad"],
  .spl-condition-choice:has(input[value="Bad"]) { --condition-color:#bf3e36; }
  .condition-choice:hover,
  .scan-disposition-choice:hover {
    border-color:var(--muted);
    background:color-mix(in srgb,var(--ink) 6%,var(--surface));
    color:var(--ink);
  }
  .condition-choice.selected,
  .scan-disposition-choice.selected,
  .spl-condition-choice:has(input:checked) {
    border-color:var(--condition-color);
    background:var(--condition-color);
    color:#fff;
    box-shadow:0 0 0 2px color-mix(in srgb,var(--condition-color) 58%,transparent),0 3px 9px color-mix(in srgb,var(--condition-color) 30%,transparent);
  }
  .part-edit-condition { display:grid; gap:7px; }
  .part-edit-condition > span:first-child { color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
  .part-condition-options { width:100%; }

  /* Guidance belongs to its field and must grow with translated or narrow
     copy. No fixed scanner row is allowed to crop the instructions. */
  .spl-scan-grid { align-content:start; }
  .spl-scan-grid .field,
  .spl-scan-condition { min-width:0; }
  .spl-scan-condition .spl-field-guidance { margin-top:6px; }
  .spl-scan-console > p { line-height:1.4; }
  @media (max-width:760px) {
    .spl-input-action { grid-template-columns:minmax(0,1fr) 76px; }
    .spl-input-action button { width:76px; min-width:76px; padding:0 12px; }
    .spl-input-action input { font-size:13px; letter-spacing:0; }
    .spl-scan-console > p { padding:8px 10px 9px; }
    .spl-field-guidance { display:block; margin:0; }
    .part-condition-options { gap:5px; }
    .part-condition-options .condition-choice { min-height:44px; padding:6px 3px; }
  }

    /* A calm, vertical sign-in card: the product identity leads, then the
       account task follows below it. */
    .auth-overlay {
      position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
      padding:clamp(18px, 4vw, 54px); background:var(--bg);
    }
    .auth-card {
      width:min(440px, 100%); min-height:0; display:block;
      overflow:hidden; border:1px solid rgba(0,99,157,.22); border-radius:30px; background:var(--surface);
      box-shadow:0 18px 52px rgba(0,55,83,.16), 0 0 0 1px rgba(255,255,255,.65) inset;
    }
    .auth-header { display:flex; align-items:center; justify-content:center; min-height:230px; padding:28px 30px 25px; background:#078bd0; text-align:center; }
    .auth-brand-content { width:min(100%, 340px); }
    .auth-brand-rule { height:1px; margin:18px 0 17px; background:rgba(255,255,255,.7); }
    .auth-product-name { color:#fff; font-size:24px; font-weight:780; line-height:1.08; letter-spacing:-.025em; }
    .auth-product-context { margin-top:7px; color:rgba(255,255,255,.83); font-size:14px; font-weight:480; letter-spacing:-.01em; }
    .auth-body { max-width:390px; margin:0 auto; padding:26px 30px 28px; }
    .auth-subtitle { margin:0 0 22px; color:var(--ink-2); font-size:15px; line-height:1.4; text-align:center; }
    /* Login overlay input styling — ensures password fields match username */
    #loginOverlay input[type="text"], #loginOverlay input[type="email"], #loginOverlay input[type="password"] {
      width: 100%; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 8px;
      background: var(--surface); color: var(--ink); font-size: 14px; font-family: inherit; box-sizing: border-box;
      -webkit-text-fill-color: var(--ink); /* overrides autofill white */
      transition: border-color .15s;
    }
    #loginOverlay input[type="text"]:focus, #loginOverlay input[type="email"]:focus, #loginOverlay input[type="password"]:focus {
      outline: none; border-color: var(--primary);
    }
    /* Larger password dots for readability */
    #loginOverlay input[type="password"] { letter-spacing: 0.15em; font-size: 16px; }
    #loginOverlay .field { margin-bottom:8px; text-align:left; }
    .auth-setup-fields, .auth-register-fields { margin-bottom:6px; }
    .auth-field-group { margin-bottom:0; }
    .auth-setup-copy { margin:0 0 14px; font-size:13px; text-align:center; }
    .auth-help { margin:0 0 8px; }
    #loginOverlay .auth-login-input { font-size:14px; }
    .auth-primary-action { width:100%; margin-top:10px; padding:10px; font-size:15px; font-weight:700; }
    .auth-secondary-action { width:100%; margin-top:8px; }
    .auth-error { margin-top:10px; color:var(--danger); font-size:12px; text-align:center; }
    .auth-links { display:flex; flex-direction:column; gap:8px; margin-top:18px; padding-top:14px; border-top:1px solid var(--line); font-size:13px; text-align:center; }
    .auth-link { padding:6px; font-weight:600; color:var(--primary); }
    .auth-link-muted { padding:4px; color:var(--ink-2); font-weight:400; }
    /* Autofill background fix (Chrome/Safari force white on autofill) */
    #loginOverlay input:-webkit-autofill,
    #loginOverlay input:-webkit-autofill:hover,
    #loginOverlay input:-webkit-autofill:focus {
      -webkit-box-shadow: 0 0 0 100px var(--surface) inset;
      -webkit-text-fill-color: var(--ink);
    }
    /* The source lockup includes the starburst at left, so centering its
       bounding box makes the wordmark look right-heavy. Offset it optically
       so “Agilent” shares the center line with the product copy below. */
    #loginOverlay .agilent-corporate-mark { width:248px; height:96px; margin:0 auto; transform:none; }
    #loginOverlay .agilent-corporate-mark img { width:448px; height:96px; }
    @media (max-width:760px) {
      /* Keep the full sign-in card centered in both a browser tab and the
         iOS standalone viewport; scrolling remains available if a keyboard
         or a very short screen leaves less vertical room. */
      .auth-overlay { align-items:center; justify-content:center; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
      .auth-overlay.keyboard-active { align-items:flex-start; justify-content:center; }
      /* The ordinary card uses auto vertical margins to look centered. Those
         margins win against flex alignment on iOS, leaving a focused email
         field beneath the keyboard. Remove them only while editing. */
      .auth-overlay.keyboard-active .auth-card { margin:0; }
      .auth-card { margin:auto 0; }
      .auth-card { min-height:0; border-radius:24px; }
      .auth-header { min-height:220px; padding:28px; }
      .auth-body { padding:28px 28px 30px; }
      .auth-subtitle { text-align:center; }
      #loginOverlay .agilent-corporate-mark { width:220px; height:86px; transform:none; }
      #loginOverlay .agilent-corporate-mark img { width:398px; height:86px; }
      .auth-brand-rule { margin:20px 0; }
      .auth-product-name { font-size:23px; }
      .auth-product-context { margin-top:7px; font-size:14px; }
    }
    @media (max-width:480px) {
      .auth-overlay { padding:14px; }
      .auth-body { padding:22px 24px; }
      .auth-header { min-height:238px; padding:26px 20px; }
      #loginOverlay .agilent-corporate-mark { width:190px; height:74px; transform:none; }
      #loginOverlay .agilent-corporate-mark img { width:344px; height:74px; }
      .auth-product-name { font-size:21px; }
      .auth-product-context { font-size:13px; }
    }