*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
      body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; height: 100vh; overflow: hidden; }
      #root { height: 100vh; }
      ::-webkit-scrollbar { width: 5px; }
      ::-webkit-scrollbar-track { background: #f0f4f8; }
      ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

      /* ── Dark mode CSS overrides ──────────────────────────────────────
         React inline styles (K.bg, K.white, K.text etc.) update when AR()
         re-renders with the new theme. These CSS rules handle browser-native
         elements that inline styles can't reach: the document body,
         scrollbars, form autofill highlights, and selection colour.
      ─────────────────────────────────────────────────────────────────── */
      [data-theme='dark'] body { background: #0f172a; color: #e2e8f0; }
      [data-theme='dark'] ::-webkit-scrollbar-track { background: #1e293b; }
      [data-theme='dark'] ::-webkit-scrollbar-thumb { background: #475569; }
      [data-theme='dark'] input:-webkit-autofill,
      [data-theme='dark'] input:-webkit-autofill:hover,
      [data-theme='dark'] input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 30px #1e293b inset !important;
        -webkit-text-fill-color: #e2e8f0 !important;
      }
      [data-theme='dark'] ::selection { background: #334155; }
      /* Print always uses light colours regardless of theme */
      @media print { ::-webkit-scrollbar-track { background: #f0f4f8 !important; } }
      input, select, textarea, button { font-family: inherit; }

      /* ── Tablet / touch ergonomics ────────────────────────────────────
         44px is Apple's and Google's minimum tap target recommendation.
         Most form elements in this app rendered at 33–35px by default,
         causing frequent missed taps on real tablets. This sets a global
         minimum height for all interactive elements and increases the
         padding inside inputs and selects to make them easier to tap.
         Nav buttons get extra vertical padding too.
         These rules only apply on touch-capable devices (hover: none)
         to avoid changing the look on desktop where smaller elements are
         fine.
      ────────────────────────────────────────────────────────────────── */
      @media (hover: none) and (pointer: coarse) {
        input, select, textarea {
          min-height: 44px;
          padding-top: 8px;
          padding-bottom: 8px;
          font-size: 15px;
        }
        button {
          min-height: 44px;
          padding-top: 8px;
          padding-bottom: 8px;
        }
        /* Tiny icon-only buttons in the header (close ✕, lock, hamburger)
           still need a tap-friendly target even though they look small */
        button[style*="background:none"], button[style*="background: none"] {
          min-height: 44px;
          min-width: 44px;
        }
      }