html,
      body {
        scrollbar-gutter: stable both-edges;
      }

      /* Dark mode: track matches body (gray-900); thumb is lighter grey so the bar is visible */
      .dark ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
      }
      .dark ::-webkit-scrollbar-track {
        background: #111827;
      }
      .dark ::-webkit-scrollbar-thumb {
        background: #4b5563;
        border-radius: 6px;
      }
      .dark ::-webkit-scrollbar-thumb:hover {
        background: #6b7280;
      }
      .dark {
        scrollbar-color: #4b5563 #111827;
        scrollbar-width: thin;
      }

      body { font-weight: 400; }
      .font-semibold { font-weight: 500 !important; }
      .font-bold { font-weight: 600 !important; }
      .material-icons { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; vertical-align: middle; font-feature-settings: 'liga'; font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
      :where(.material-icons) { display: inline-flex; align-items: center; justify-content: center; }
      .material-icons.size-4 { font-size: 1rem; }
      .material-icons.size-5 { font-size: 1.25rem; }

      /* iOS Safari zoom guard: keep interactive form controls at >= 16px on small screens. */
      @media (max-width: 767px) {
        :where(
          input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
          select,
          textarea
        ) {
          font-size: 16px !important;
          line-height: 1.5;
        }
      }