feat(web): UI component layer + dark-theme reskin

The TRM tokens were good but every screen hand-rolled inputs and buttons as
bare outlines on near-black panels, so fields, cards and buttons were
visually indistinguishable. Add a component layer (.input/.select/.textarea
as recessed slots, .btn family with a FILLED primary, .card scaffolding) and
adopt it across the booth/shift/login/tariff/site screens — several of which
were still light-theme inline styles dropped on a dark background.

Claude-Session: https://claude.ai/code/session_01Xcm6ikLgGoCxxHrxtjkk5V

apps/web/src/BoothScreen.tsx

@@ -111,12 +111,9 @@ function TicketInput({ onSubmit }: { onSubmit: (identity: string) => void }) {
         onChange={(e) => setValue(e.target.value)}
         placeholder={t("booth.scanPlaceholder")}
         inputMode="numeric"
-        className="flex-1 rounded-term border border-term-border bg-term-bg px-3 py-2 text-lg tabular-nums text-term-text placeholder:text-term-muted focus:border-term-amber"
+        className="input h-11 flex-1 px-3 text-lg tabular-nums"
       />
-      <button
-        type="submit"
-        className="rounded-term border border-term-amber bg-term-amber/10 px-4 py-2 text-[12px] font-semibold uppercase tracking-wider text-term-amber"
-      >
+      <button type="submit" className="btn btn-primary btn-lg">
         {t("booth.open")}
       </button>
     </form>