/* Self-hosted fonts (OFL; vendored via scripts/fetch-fonts.mjs, served at
     /admin/fonts/*). Same families/weights the Google Fonts link provided. */
  @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/admin/fonts/inter-400.woff2') format('woff2'); }
  @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/admin/fonts/inter-500.woff2') format('woff2'); }
  @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/admin/fonts/inter-600.woff2') format('woff2'); }
  @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/admin/fonts/inter-700.woff2') format('woff2'); }
  @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/admin/fonts/jetbrainsmono-400.woff2') format('woff2'); }
  @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/admin/fonts/jetbrainsmono-500.woff2') format('woff2'); }
  @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/admin/fonts/jetbrainsmono-600.woff2') format('woff2'); }
  /* ------------------------------------------------------------------ */
  /* Design tokens — dual mode (DESIGN.md). Night default; [data-theme=   */
  /* arms-light] flips the same variables for paper-day. color-scheme is  */
  /* set per mode so native inputs/scrollbars agree with the page.        */
  /* ------------------------------------------------------------------ */
  :root, [data-theme="arms"] {
    color-scheme: dark;
    --bg-base: oklch(0.13 0.012 135);
    --bg-surface: oklch(0.17 0.014 135);
    --bg-elevated: oklch(0.22 0.015 135);
    --bg-hover: oklch(0.28 0.016 135);
    --border-color: oklch(0.3 0.015 135);
    --text-primary: oklch(0.97 0.006 135);
    --text-muted: oklch(0.8 0.015 135);
    --color-primary: oklch(0.78 0.15 130);
    --on-primary: oklch(0.17 0.03 130);
    /* Semantic states (night): bright text-grade colors + dark chip content.
       Kept as literals so the theme-sync test can audit both sources. */
    --color-secondary: oklch(0.78 0.14 75);
    --content-secondary: oklch(0.2 0.03 75);
    --color-accent: oklch(0.78 0.1 190);
    --content-accent: oklch(0.16 0.02 190);
    --content-success: oklch(0.16 0.02 150);
    --content-warning: oklch(0.2 0.03 80);
    --content-error: oklch(0.16 0.02 25);
    --content-info: oklch(0.16 0.02 215);
    --color-success: oklch(0.76 0.17 150);
    --color-warning: oklch(0.8 0.15 80);
    --color-error: oklch(0.66 0.22 25);
    --color-info: oklch(0.78 0.1 215);
    --chip-bg-success: oklch(0.3 0.08 150);
    --chip-border-success: oklch(0.42 0.1 150);
    --chip-bg-warning: oklch(0.3 0.08 80);
    --chip-border-warning: oklch(0.42 0.1 80);
    --chip-bg-error: oklch(0.3 0.08 25);
    --chip-border-error: oklch(0.42 0.1 25);
    --chip-bg-info: oklch(0.3 0.06 215);
    --chip-border-info: oklch(0.42 0.08 215);
    --nav-active-bg: oklch(0.78 0.15 130 / 0.16);
    --nav-active-text: oklch(0.95 0.02 130);
    --nav-active-border: oklch(0.78 0.15 130 / 0.4);
    --overlay-scrim: rgba(0, 0, 0, 0.65);
    --shadow-color: rgba(0, 0, 0, 0.4);
    --scrollbar-thumb: oklch(0.32 0.015 135);
    --row-alt: oklch(0.19 0.014 135 / 0.5);
    --row-hover: oklch(0.26 0.016 135 / 0.7);
    --focus-ring: 0 0 0 1px var(--bg-base), 0 0 0 3px oklch(0.78 0.15 130 / 0.5);
    --elev-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.55), 0 4px 12px -4px rgba(0, 0, 0, 0.4);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  }

  [data-theme="arms-light"] {
    color-scheme: light;
    --bg-base: oklch(0.985 0.004 120);
    --bg-surface: oklch(0.962 0.007 122);
    --bg-elevated: oklch(0.93 0.01 124);
    --bg-hover: oklch(0.9 0.012 126);
    --border-color: oklch(0.86 0.014 128);
    --text-primary: oklch(0.185 0.02 145);
    --text-muted: oklch(0.34 0.032 144);
    --color-primary: oklch(0.46 0.125 148);
    --on-primary: oklch(0.98 0.01 130);
    --color-secondary: oklch(0.47 0.105 72);
    --color-accent: oklch(0.47 0.09 205);
    --color-success: oklch(0.47 0.13 152);
    --color-warning: oklch(0.44 0.1 68);
    --color-error: oklch(0.45 0.19 27);
    --color-info: oklch(0.47 0.11 235);
    --content-secondary: oklch(0.98 0.008 75);
    --content-accent: oklch(0.98 0.008 195);
    --content-success: oklch(0.98 0.008 150);
    --content-warning: oklch(0.98 0.008 70);
    --content-error: oklch(0.98 0.008 25);
    --content-info: oklch(0.98 0.008 230);
    --chip-bg-success: oklch(0.93 0.03 152);
    --chip-border-success: oklch(0.72 0.09 152);
    --chip-bg-warning: oklch(0.94 0.04 85);
    --chip-border-warning: oklch(0.75 0.08 78);
    --chip-bg-error: oklch(0.94 0.035 27);
    --chip-border-error: oklch(0.76 0.11 27);
    --chip-bg-info: oklch(0.93 0.03 235);
    --chip-border-info: oklch(0.74 0.08 232);
    --nav-active-bg: oklch(0.46 0.125 148 / 0.12);
    --nav-active-text: oklch(0.36 0.1 148);
    --nav-active-border: oklch(0.46 0.125 148 / 0.35);
    --overlay-scrim: rgba(20, 30, 24, 0.45);
    --shadow-color: rgba(40, 50, 44, 0.18);
    --scrollbar-thumb: oklch(0.8 0.012 128);
    --row-alt: oklch(0.955 0.006 121 / 0.6);
    --row-hover: oklch(0.92 0.014 125 / 0.8);
    --focus-ring: 0 0 0 1px var(--bg-base), 0 0 0 3px oklch(0.46 0.125 148 / 0.45);
    --elev-shadow: 0 12px 32px -8px rgba(40, 50, 44, 0.22), 0 4px 12px -4px rgba(40, 50, 44, 0.14);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  }

  *, *::before, *::after { box-sizing: border-box; }
  html, body { height: 100%; margin: 0; padding: 0; background: var(--bg-base); color: var(--text-primary); }
  body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    line-height: 1.5;
  }
  .font-mono, code, kbd, .tabular { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; }

  /* Mandatory display utility fallback */
  .hidden, [hidden] { display: none !important; }

  .sidebar {
    background: var(--bg-surface);
    border-right: 1px solid var(--border-color);
  }
  .nav-item {
    position: relative;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    transition:
      background-color 0.15s var(--ease-out),
      color 0.15s var(--ease-out),
      border-color 0.15s var(--ease-out);
    cursor: pointer;
    background: transparent;
    color: var(--text-muted);
    min-height: 2.25rem;
    display: flex;
    align-items: center;
  }
  .nav-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
  }
  .nav-item.active {
    background: var(--nav-active-bg);
    color: var(--nav-active-text);
    border-color: var(--nav-active-border);
    font-weight: 600;
  }
  .nav-item.active::before {
    content: '';
    position: absolute;
    left: -0.625rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.1rem;
    border-radius: 2px;
    background: var(--color-primary);
  }

  .tool-row { border-bottom: 1px solid var(--border-color); }
  .tool-row:last-child { border-bottom: none; }

  /* Status swatch colors */
  .swatch-active { background: var(--color-success); }
  .swatch-mutation { background: var(--color-warning); }

  /* Theme toggle icons: show the mode you'll switch TO. */
  .theme-icon-night { display: none; }
  .theme-icon-day { display: inline-block; }
  [data-theme="arms-light"] .theme-icon-day { display: none; }
  [data-theme="arms-light"] .theme-icon-night { display: inline-block; }

  .scroll-thin { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
  .scroll-thin::-webkit-scrollbar { width: 6px; height: 6px; }
  .scroll-thin::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 6px; }

  /* Right live telemetry rail */
  .telemetry-rail {
    width: 288px;
    flex-shrink: 0;
    border-left: 1px solid var(--border-color);
    background: var(--bg-surface);
    overflow-y: auto;
  }
  .telemetry-rail.hidden-rail { display: none; }

  /* Mobile drawer and rail backdrops */
  .drawer-backdrop, .rail-backdrop {
    position: fixed;
    inset: 0;
    background: var(--overlay-scrim);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 45;
    transition: opacity 0.2s ease;
  }

  /* Live pulse dot */
  @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
  .live-dot { animation: pulse-dot 2s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) {
    .live-dot { animation: none; }
    .nav-item { transition: none; }
    .btn { transition: none; }
  }

  /* Keyboard focus visibility — one consistent ring everywhere */
  :focus-visible { outline: none; box-shadow: var(--focus-ring); }
  /* Focus ring parity (mandate §6): every control gets the same ring.
     Text-entry controls use :focus-visible so mouse clicks stay quiet. */
  input:focus-visible, textarea:focus-visible, select:focus-visible {
    box-shadow: var(--focus-ring);
    border-color: var(--color-primary);
  }
  ::selection { background: oklch(0.78 0.15 130 / 0.28); }
  [data-theme="arms-light"] ::selection { background: oklch(0.46 0.125 148 / 0.2); }
  .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 80;
    background: var(--color-primary);
    color: var(--on-primary);
    padding: 0.5rem 1rem;
    border-radius: 0 0 0.5rem 0;
    font-size: 0.8125rem;
    font-weight: 600;
  }
  .skip-link:focus { left: 0; }

  /* ------------------------------------------------------------------ */
  /* DaisyUI fallbacks (used only when compiled.css is unavailable)      */
  /* ------------------------------------------------------------------ */

  .bg-base-100 { background-color: var(--bg-base); }
  .bg-base-200 { background-color: var(--bg-surface); }
  .bg-base-300 { background-color: var(--bg-elevated); }
  .text-primary { color: var(--color-primary); }
  .text-success { color: var(--color-success); }
  .text-warning { color: var(--color-warning); }
  .text-error { color: var(--color-error); }
  .text-info { color: var(--color-info); }

  .border { border-style: solid; border-width: 1px; border-color: var(--border-color); }
  .border-base-100 { border-color: var(--bg-base); }
  .border-base-200 { border-color: var(--bg-surface); }
  .border-base-300 { border-color: var(--border-color); }
  .rounded-box { border-radius: 0.75rem; }
  .rounded-lg { border-radius: 0.5rem; }
  .rounded-md { border-radius: 0.375rem; }
  .rounded-full { border-radius: 9999px; }

  /* ------------------------------------------------------------------ */
  /* Buttons — Linear-grade hierarchy & motion                          */
  /* One solid primary per surface; ghost = quiet; outline = on-surface  */
  /* secondary; unified 150ms ease-out; visible focus ring everywhere.   */
  /* ------------------------------------------------------------------ */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.8125rem;
    font-weight: 550;
    line-height: 1.2;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    background: var(--bg-elevated);
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
    transition:
      background-color 0.15s var(--ease-out),
      border-color 0.15s var(--ease-out),
      color 0.15s var(--ease-out),
      box-shadow 0.15s var(--ease-out),
      transform 0.12s var(--ease-out);
    touch-action: manipulation;
  }
  .btn:hover { background: var(--bg-hover); border-color: var(--border-color); }
  .btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    z-index: 1;
  }
  .btn:active { transform: translateY(0.5px); transition-duration: 0.06s; }
  .btn:disabled, .btn.btn-disabled {
    cursor: not-allowed;
    opacity: 0.55;
    box-shadow: none;
    transform: none;
    pointer-events: none;
  }

  /* Primary — the one solid accent action on a surface. */
  .btn-primary {
    background: var(--color-primary);
    color: var(--on-primary);
    border-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px var(--shadow-color);
  }
  .btn-primary:hover {
    background: var(--color-primary);
    filter: brightness(1.09) saturate(1.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 2px 8px -2px var(--shadow-color);
  }
  .btn-primary:active { filter: brightness(0.97); }
  .btn-success { background: var(--color-success); color: var(--on-primary); border-color: transparent; }
  .btn-success:hover { background: var(--color-success); filter: brightness(1.08); }
  .btn-warning { background: var(--color-warning); color: var(--on-primary); border-color: transparent; }
  .btn-warning:hover { background: var(--color-warning); filter: brightness(1.08); }
  .btn-error { background: var(--color-error); color: var(--on-primary); border-color: transparent; }
  .btn-error:hover { background: var(--color-error); filter: brightness(1.08); }
  .btn-info { background: var(--color-info); color: var(--on-primary); border-color: transparent; }
  .btn-info:hover { background: var(--color-info); filter: brightness(1.08); }
  .btn-xs { padding: 0.22rem 0.55rem; font-size: 0.72rem; border-radius: 0.375rem; gap: 0.25rem; }
  .btn-sm { padding: 0.32rem 0.7rem; font-size: 0.78rem; }
  .btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); font-weight: 520; }
  .btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
  .btn-outline {
    background: transparent;
    border-color: var(--border-color);
    color: var(--text-primary);
    font-weight: 520;
  }
  .btn-outline:hover {
    background: var(--bg-hover);
    border-color: var(--color-primary);
    color: var(--text-primary);
  }
  .btn-square { padding: 0.25rem; width: 2.25rem; height: 2.25rem; }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 520;
    line-height: 1.35;
    border-radius: 9999px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    white-space: nowrap;
    transition: border-color 0.15s var(--ease-out), background-color 0.15s var(--ease-out);
  }
  .badge-primary { background: var(--color-primary); color: var(--on-primary); }
  .badge-success { background: var(--chip-bg-success); color: var(--color-success); border: 1px solid var(--chip-border-success); }
  .badge-warning { background: var(--chip-bg-warning); color: var(--color-warning); border: 1px solid var(--chip-border-warning); }
  .badge-error { background: var(--chip-bg-error); color: var(--color-error); border: 1px solid var(--chip-border-error); }
  .badge-info { background: var(--chip-bg-info); color: var(--color-info); border: 1px solid var(--chip-border-info); }
  .badge-accent { background: var(--color-primary); color: var(--on-primary); }
  .badge-secondary { background: var(--bg-elevated); color: var(--text-muted); }
  .badge-ghost { background: var(--bg-elevated); opacity: 0.75; }
  .badge-outline { background: transparent; border: 1px solid var(--border-color); }
  .badge-sm { font-size: 0.75rem; padding: 0.1rem 0.4rem; }
  .badge-xs { font-size: 0.65rem; padding: 0.05rem 0.3rem; }

  .input, .select, .textarea {
    background: var(--bg-base);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.4rem 0.65rem;
    font-size: 0.8125rem;
    outline: none;
    transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
  }
  .input:focus, .select:focus, .textarea:focus {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
  }
  .input::placeholder, .textarea::placeholder { color: var(--text-muted); opacity: 0.75; }
  .input-sm, .select-sm { padding: 0.3rem 0.55rem; font-size: 0.75rem; }

  .table { width: 100%; border-collapse: collapse; text-align: left; }
  .table th, .table td { padding: 0.45rem 0.65rem; border-bottom: 1px solid var(--border-color); }
  .table tbody tr { transition: background-color 0.12s var(--ease-out); }
  .table tbody tr:hover { background: var(--row-hover); }
  .table th { font-weight: 600; opacity: 0.7; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; }
  .table-zebra tbody tr:nth-child(even) { background: var(--row-alt); }

  /* Dropdown (details/summary based) */
  .dropdown { position: relative; display: inline-block; }
  .dropdown-content {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 0.5rem);
    min-width: 10rem;
    display: none;
    z-index: 30;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 0.625rem;
    box-shadow: var(--elev-shadow);
    animation: pop-in 0.14s var(--ease-out);
    transform-origin: top right;
  }
  @keyframes pop-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  .dropdown.open .dropdown-content,
  .dropdown[open] .dropdown-content,
  details.dropdown[open] .dropdown-content { display: block; }
  details.dropdown summary { list-style: none; cursor: pointer; }
  details.dropdown summary::-webkit-details-marker { display: none; }

  /* Menu */
  .menu { display: flex; flex-direction: column; gap: 0.25rem; list-style: none; padding: 0.5rem; margin: 0; }
  .menu li > * { border-radius: 0.5rem; }
  .menu-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.6; padding: 0.5rem 0.75rem 0.25rem; }
  .menu :where(li) { width: 100%; }

  /* Card */
  .card {
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border-radius: 0.75rem;
    transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
  }
  .card-body { padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
  .card-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; letter-spacing: -0.01em; }

  /* Stat */
  .stat { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 0.5rem; position: relative; transition: border-color 0.2s var(--ease-out); }
  .stat:hover { border-color: color-mix(in oklab, var(--color-primary) 35%, var(--border-color)); }
  .stat-title { grid-column: 1 / -1; font-size: 0.65rem; }
  .stat-value { font-weight: 650; letter-spacing: -0.02em; }
  .stat-desc { grid-column: 1 / -1; }
  .stat-figure { grid-row: 1 / 4; grid-column: 2; align-self: center; display: flex; align-items: center; justify-content: center; }

  /* Navbar */
  .navbar { display: flex; align-items: center; gap: 0.75rem; }
  .navbar-start { display: flex; align-items: center; flex: 1 1 0%; }
  .navbar-end { display: flex; align-items: center; gap: 0.5rem; }

  /* Alert / Toast */
  .alert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-primary);
  }
  .alert-error { border-color: var(--chip-border-error); background: var(--chip-bg-error); color: var(--color-error); }
  .alert-success { border-color: var(--chip-border-success); background: var(--chip-bg-success); color: var(--color-success); }
  .alert-info { border-color: var(--chip-border-info); background: var(--chip-bg-info); color: var(--color-info); }

  /* Toggle / Checkbox — smooth knob travel, theme-aware */
  .toggle {
    appearance: none;
    width: 2.4rem;
    height: 1.25rem;
    border-radius: 9999px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    position: relative;
    cursor: pointer;
    transition: background-color 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
    vertical-align: middle;
    touch-action: manipulation;
  }
  .toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 9999px;
    background: var(--text-muted);
    transition: transform 0.18s var(--ease-out), background-color 0.18s var(--ease-out);
  }
  .toggle:checked { background: var(--color-primary); border-color: transparent; }
  .toggle:checked::after { transform: translateX(1.15rem); background: var(--on-primary); box-shadow: 0 1px 2px var(--shadow-color); }
  .toggle:hover:not(:disabled)::after { background: var(--text-primary); }
  .toggle:checked:hover:not(:disabled)::after { background: var(--on-primary); }
  .toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .toggle-warning:checked { background: var(--color-warning); }
  .toggle-success:checked { background: var(--color-success); }
  .toggle-error:checked { background: var(--color-error); }
  .toggle-xs { width: 2rem; height: 1.05rem; }
  .toggle-xs::after { width: 0.65rem; height: 0.65rem; }
  .toggle-xs:checked::after { transform: translateX(0.95rem); }
  .toggle-sm { width: 2.2rem; height: 1.15rem; }

  .checkbox {
    appearance: none;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 0.3rem;
    border: 1px solid var(--border-color);
    background: var(--bg-base);
    cursor: pointer;
    vertical-align: middle;
    touch-action: manipulation;
    transition: background-color 0.12s var(--ease-out), border-color 0.12s var(--ease-out);
  }
  .checkbox:hover:not(:disabled) { border-color: var(--color-primary); }
  .checkbox:checked { background: var(--color-primary); border-color: transparent; position: relative; animation: check-pop 0.16s var(--ease-out); }
  /* Tick is centered with translate so it never clips at any checkbox size
     (xs → lg). daisyUI centers its tick the same way. */
  .checkbox:checked::after,
  .checkbox:indeterminate::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    height: 9px;
    border: solid var(--on-primary);
    transform-origin: center;
    pointer-events: none;
  }
  .checkbox:checked::after {
    width: 4.5px;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -65%) rotate(45deg);
  }
  .checkbox:indeterminate {
    background: var(--color-primary);
    border-color: transparent;
  }
  .checkbox:indeterminate::after {
    width: 8px;
    border-width: 0 0 2px 0;
    transform: translate(-50%, -50%);
  }
  @keyframes check-pop {
    0% { transform: scale(0.85); }
    60% { transform: scale(1.05); }
    100% { transform: scale(1); }
  }
  .checkbox:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .checkbox-xs { width: 0.9rem; height: 0.9rem; }

  /* Loading — daisyUI class contract: <span class="loading loading-spinner" />.
     The spinner variant goes on the SPAN, never on buttons (mandate §7). */
  .loading {
    pointer-events: none;
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: middle;
  }
  .loading-spinner {
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 9999px;
    animation: spin 0.8s linear infinite;
  }
  .loading-ring {
    border: 3px solid var(--border-color);
    border-top-color: currentColor;
    border-radius: 9999px;
    animation: spin 0.8s linear infinite;
  }
  .loading-dots {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 9999px;
    background: currentColor;
    box-shadow: -0.65rem 0 currentColor, 0.65rem 0 currentColor;
    animation: dots-pulse 0.9s ease-in-out infinite alternate;
  }
  @keyframes dots-pulse {
    from { opacity: 1; }
    to { opacity: 0.35; }
  }
  .loading-xs { width: 0.9rem; height: 0.9rem; }
  .loading-sm { width: 1.1rem; height: 1.1rem; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* Progress meters (daisyUI .progress / .progress-*) — token-driven.
     Color rides on currentColor so each variant is one line. */
  progress.progress {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 0.5rem;
    border: none;
    border-radius: 9999px;
    overflow: hidden;
    color: var(--color-primary);
    vertical-align: middle;
  }
  progress.progress::-webkit-progress-bar { background: var(--bg-elevated); }
  progress.progress::-webkit-progress-value { background-color: currentColor; transition: inline-size 0.2s var(--ease-out); }
  progress.progress::-moz-progress-bar { background-color: currentColor; }
  .progress-primary { color: var(--color-primary); }
  .progress-success { color: var(--color-success); }
  .progress-warning { color: var(--color-warning); }
  .progress-error { color: var(--color-error); }
  .progress-info { color: var(--color-info); }

  /* Radio (daisyUI recipe): filled disc with a contrasting center dot,
     same focus/disabled discipline as checkbox. */
  .radio {
    appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 9999px;
    border: 1px solid var(--border-color);
    background: var(--bg-base);
    cursor: pointer;
    vertical-align: middle;
    touch-action: manipulation;
    transition: background-color 0.12s var(--ease-out), border-color 0.12s var(--ease-out);
  }
  .radio:hover:not(:disabled) { border-color: var(--color-primary); }
  .radio:checked { background: var(--color-primary); border-color: transparent; animation: check-pop 0.16s var(--ease-out); }
  .radio:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 9999px;
    transform: translate(-50%, -50%);
    background: var(--on-primary);
    pointer-events: none;
  }
  .radio:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .radio:disabled { cursor: not-allowed; opacity: 0.55; }

  /* Label (repo-owned since DaisyUI 5 removed .label-text) */
  .label { display: flex; align-items: center; gap: 0.5rem; }
  .label-text { font-size: 0.8125rem; }
  .form-control { display: flex; flex-direction: column; }

  /* Tooltip fallback — shows on hover AND on keyboard focus (mandate §9) */
  .tooltip { position: relative; }
  .tooltip[data-tip]:hover::after,
  .tooltip[data-tip]:focus-visible::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 0.4rem);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.7rem;
    white-space: nowrap;
    z-index: 80;
  }

  /* Modal fallback styling */
  dialog.modal:not([open]), dialog:not([open]) { display: none !important; }
  dialog.modal[open], dialog[open] {
    display: flex !important;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 60;
    align-items: center;
    justify-content: center;
    background: var(--overlay-scrim);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: none;
    margin: 0;
    padding: 1rem;
  }
  .modal-backdrop { position: fixed; inset: 0; z-index: 55; background: transparent; }
  .modal-backdrop button { width: 100%; height: 100%; background: transparent; border: none; cursor: default; }
  .modal-box {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.25rem;
    width: 100%;
    max-width: 32rem;
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    box-shadow: var(--elev-shadow);
    animation: modal-in 0.18s var(--ease-out);
  }
  @keyframes modal-in {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  .modal-action { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
  .z-toast { z-index: 70; }
  .toast { pointer-events: none; }
  .toast > * { pointer-events: auto; }
  .modal-open { display: flex !important; }
  .stat-value, .font-mono { font-variant-numeric: tabular-nums; }
  button:active, .btn:active { transform: translateY(0.5px); }
  .btn:disabled, .toggle:disabled, .checkbox:disabled { cursor: not-allowed; opacity: 0.55; }

  /* Toast entrance — slides in from the bottom edge */
  .toast > .alert { animation: toast-in 0.2s var(--ease-out); }
  @keyframes toast-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .bg-base-100\/85 { background-color: color-mix(in oklab, var(--bg-base) 85%, transparent); }
  .backdrop-blur { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .shadow { box-shadow: 0 1px 3px var(--shadow-color); }
  .shadow-sm { box-shadow: 0 1px 2px var(--shadow-color); }

  /* ------------------------------------------------------------------ */
  /* Responsive Breakpoints & Mobile Optimization                       */
  /* ------------------------------------------------------------------ */

  /* Screens < 1280px: Live Telemetry Rail becomes an off-canvas drawer */
  @media (max-width: 1279px) {
    .telemetry-rail {
      position: fixed;
      top: 0;
      bottom: 0;
      right: 0;
      width: min(22rem, 88vw);
      max-height: 100dvh;
      z-index: 50;
      border-left: 1px solid var(--border-color);
      transform: translateX(100%);
      transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: -10px 0 30px rgba(0, 0, 0, 0.6);
      display: block !important;
    }
    .telemetry-rail.open-rail {
      transform: translateX(0);
    }
    .telemetry-rail.hidden-rail,
    .telemetry-rail:not(.open-rail) {
      transform: translateX(100%);
      pointer-events: none;
      visibility: hidden;
    }
  }

  /* Screens < 1024px: Sidebar becomes an off-canvas slide-out drawer */
  @media (max-width: 1023px) {
    .sidebar {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      width: min(18rem, 85vw);
      height: 100dvh;
      z-index: 50;
      transform: translateX(-100%);
      transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 10px 0 30px rgba(0, 0, 0, 0.6);
    }
    .sidebar.drawer-open {
      transform: translateX(0);
    }
  }

  /* Screens >= 1024px: Persistent desktop sidebar */
  @media (min-width: 1024px) {
    .drawer-backdrop { display: none !important; }
    .sidebar { transform: none !important; }
  }

  @media (max-width: 640px) {
    body { font-size: 13px; }
    .card-body { padding: 0.85rem; }
    .stat { padding: 0.75rem; }
    .table th, .table td { padding: 0.35rem 0.5rem; }
    .overflow-x-auto {
      scrollbar-width: thin;
      -webkit-overflow-scrolling: touch;
    }
    .toast {
      inset-inline: 0.75rem;
      bottom: 0.75rem;
      width: auto;
      max-width: calc(100vw - 1.5rem);
    }
    .modal-box {
      padding: 1rem;
      margin: 0.5rem;
      max-width: calc(100vw - 1rem);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
    .btn:focus-visible, .input:focus, .input:focus-visible, .toggle:focus-visible,
    .checkbox:focus-visible, .radio:focus-visible {
      box-shadow: 0 0 0 2px var(--color-primary);
    }
  }