diff --git a/.claude/skills/frontend-designer/SKILL.md b/.claude/skills/frontend-designer/SKILL.md
index 2c02d3a..2a20b12 100644
--- a/.claude/skills/frontend-designer/SKILL.md
+++ b/.claude/skills/frontend-designer/SKILL.md
@@ -28,10 +28,24 @@ Balinyaar is a **trust-first home-nursing marketplace in Iran**. The visual tone
 calm, warm, clinical-but-human — not a cold medical dashboard. Default audience is
 Persian (RTL); English is secondary.
 
-**Logo mark** (`product/balinyaar.html` seed deck): deep-teal square, lowercase
-display glyph in cream, a single terracotta dot. That trio — **teal ground, cream
-text, terracotta accent** — is the whole identity. Use terracotta sparingly as the
-single accent; teal carries everything else.
+**Logo mark** — this skill is the construction source of truth (the original
+`product/balinyaar.html` seed deck no longer exists in the repo): a deep-teal
+rounded-square ground (`var(--bal-primary)`), a cream lowercase "b" glyph built
+from a stem + a ring bowl (`var(--bal-primary-contrast)`), and a single
+terracotta dot accent (`var(--bal-secondary)`). That trio — **teal ground, cream
+glyph, terracotta accent** — is the whole identity. Use terracotta sparingly as
+the single accent; teal carries everything else. Implemented as two SVGs under
+`components/common/AppIcon/icons/`:
+- `LogoMark.tsx` — a monochrome `currentColor` version of just the glyph (no
+  ground square), registered as `ICONS.logo`. Use via `<AppIcon icon="logo">`
+  anywhere an inline, recolorable brand glyph is needed.
+- `LogoLockup.tsx` — the full-color mark (ground + glyph + dot, token-driven so
+  it tracks the color scheme) for `BrandMark` (auth splash). The wordmark next
+  to it stays real, translated `<Typography>` — never bake locale text into an SVG.
+- The favicon (`src/app/favicon.ico`) and `public/img/favicon/*.png` are
+  rasterized from the same construction (fixed brand hex, not CSS vars — static
+  binary assets are the one place a literal hex is correct). Regenerate with a
+  `sharp`-based script if the mark ever changes; don't hand-edit the PNGs/ICO.
 
 | Role | Light | Dark |
 |------|-------|------|
@@ -67,21 +81,54 @@ Colors exist in **two mirrored places** that must stay in sync. Pick the right o
 - Adding/changing a color means editing `tokens.css` **and** `colors.ts` together (the
   file headers call out the sync requirement).
 
+**Beyond color** — `tokens.css` also defines non-palette tokens (`colors.ts` never needs
+these; they're define-only in CSS):
+- **Radius** — `--bal-radius-sm` (4px, controls: buttons/inputs), `--bal-radius-md`
+  (10px = `theme.shape.borderRadius`, the house default: cards/paper), `--bal-radius-lg`
+  (16px: dialogs). Reference the token/constant, never invent a new radius.
+- **Elevation** — `--bal-shadow-1/2/3`, teal-tinted (black-teal in dark mode) shadow
+  steps that back `theme.ts`'s `shadows` array — every MUI elevation (Paper, Dialog,
+  Menu, Popover, AppBar) resolves through these, never MUI's default grey stack.
+- **Motion** — `--bal-motion-fast/base/slow` (120/200/300ms) + `--bal-easing-standard`.
+  Consumed by the phase-12 app-wide motion pass; use them for any transition you add now.
+- **Focus** — `--bal-focus-ring`, the 2px ring `MuiCssBaseline`'s global `:focus-visible`
+  override uses. Don't hand-roll a focus style; it's already uniform everywhere.
+- **Rating** — `--bal-rating` / `--bal-rating-empty` (filled/empty star colors) —
+  `RatingInput` uses these, not `--bal-warning`.
+- **Trust** — `--bal-trust` / `--bal-trust-soft`, a distinct identity (not
+  primary/success) for verified marks — `TrustBadge` and any future verification UI.
+- **Money emphasis** — `--bal-money-emphasis`, an AA-contrast-safe color for emphasized
+  money text. `--bal-secondary` (terracotta) fails AA contrast at small sizes on light
+  backgrounds — never use it for money text, use this token instead.
+
 ---
 
 ## 3. Typography & fonts
 
-- `shape.borderRadius: 10` (set in `src/theme/theme.ts`) — the house corner radius.
-  Don't override per-component unless deliberate; prefer multiples that read as related.
-- Buttons: `textTransform: 'none'`, weight 600 (set globally in `typography.ts`). Never
+- `shape.borderRadius: 10` (set in `src/theme/theme.ts`) — the house corner radius
+  (= `--bal-radius-md`). Don't override per-component unless deliberate; the radius
+  *scale* is `--bal-radius-sm` (4, controls) / `-md` (10, cards) / `-lg` (16, dialogs).
+- **Weight system — never write `fontWeight: 600`.** Mikhak and Space Grotesk both load
+  only 400/500/700 (no 600 face), so a requested 600 silently renders full Bold. Use
+  **700** for headings (`h1`–`h6`) and buttons/strong emphasis, **500** for lighter
+  in-text emphasis (subtitles, row labels, chip text). This is enforced globally in
+  `typography.ts`; match it in any new `sx` you write.
+- Buttons: `textTransform: 'none'`, weight 700 (set globally in `typography.ts`). Never
   re-uppercase button text.
-- Headings (`h1`–`h6`) use the display font; `h6` is weight 600, the rest 700.
+- Persian type scale (`TYPOGRAPHY_RTL`): `letterSpacing: 0` on every variant (Persian is
+  a joined script — tracking breaks glyph connections), body line-height ≥1.7, heading
+  line-height ~1.4–1.5 (room for ascenders/descenders), and `responsiveFontSizes()`
+  wraps both themes (`theme.ts`) so heading sizes scale down on small viewports —
+  don't hand-roll per-breakpoint `fontSize` overrides.
 - **Fonts are loaded per-locale in `src/app/[locale]/layout.tsx` only** — Mikhak
-  (`--font-mikhak`) for `fa`, system stack for `en` (Space Grotesk `--font-space-grotesk`
-  is declared but not yet wired). **Never load a font in a component or page.**
+  (`--font-mikhak`) for `fa`, **Space Grotesk** (`--font-space-grotesk`, via
+  `next/font/google`, self-hosted at build time) for `en`. Both `preload: false` with a
+  conditional `.variable` className so neither ships to the other locale.
+  **Never load a font in a component or page.**
 - Use `<Typography variant=…>` for text — it inherits the correct direction-aware family
-  (`TYPOGRAPHY_RTL` = Mikhak everywhere for full Persian glyph coverage; `TYPOGRAPHY_LTR`).
-  Import neither directly in components; let the theme apply them.
+  (`TYPOGRAPHY_RTL` = Mikhak everywhere for full Persian glyph coverage; `TYPOGRAPHY_LTR`
+  = Space Grotesk headings + system-stack body). Import neither directly in components;
+  let the theme apply them.
 
 ---
 
@@ -141,13 +188,30 @@ Icons are a **name registry**, not free imports. `src/components/common/AppIcon/
 maps lowercase names → MUI/SVG components. Render with `<AppIcon icon="home" />` or pass
 the name to `AppButton`/`AppIconButton` (`icon="search"`).
 
-Currently registered: `default, logo, close, menu, settings, visibilityon,
-visibilityoff, daynight, night, day, search, info, home, account, signup, login,
-logout, notifications, error`.
+**One visual family: MUI `*Rounded`.** Every registered icon is the `Rounded` variant of
+`@mui/icons-material` (warmer, softer strokes than the old filled/outlined mix — fits
+"clinical-but-human"). When adding an icon, import the `*Rounded` version; don't mix in a
+Filled/Outlined/Sharp/TwoTone icon next to it. ~90 names are registered today, spanning
+navigation, catalog, verification, booking, payments, admin, and messaging — read
+`AppIcon/config.ts` directly for the full list rather than duplicating it here (it drifts
+too fast for a skill doc to track reliably); the two structural rules below don't.
 
-**Need a new icon:** import it into `config.ts`, add a **lowercase** key to `ICONS`, then
-reference by that name. Custom SVGs go in `AppIcon/icons/`. An unregistered name logs a
-warning and falls back to `default` — never pass a raw MUI icon where a name is expected.
+**`size` actually resizes now.** `AppIcon` drives size via `style.fontSize` (the basis for
+MUI SvgIcon's internal `1em` sizing) instead of `width`/`height` attributes, which MUI's
+own CSS used to beat. `<AppIcon icon="verified" size={48} />` renders 48px — no more
+silent 24px flattening.
+
+**Directional icons mirror automatically.** Icons authored for LTR that must flip under
+RTL (`back`, `chevron_start`) are registered in `AppIcon/config.ts`'s `DIRECTIONAL_ICONS`
+set. `AppIcon` stamps `data-icon-directional` on those, and one CSS rule
+(`app/globals.css`) does `[dir='rtl'] [data-icon-directional] { transform: scaleX(-1); }`.
+Adding a new directional icon is a one-line registry addition — never hand-roll a
+per-component flip.
+
+**Need a new icon:** import the `*Rounded` version into `config.ts`, add a **lowercase**
+key to `ICONS`, then reference by that name. Custom SVGs (the brand mark) go in
+`AppIcon/icons/`. An unregistered name logs a dev-only warning and falls back to
+`default` — never pass a raw MUI icon where a name is expected.
 
 ---
 
diff --git a/client/CLAUDE.md b/client/CLAUDE.md
index f04908b..9ed8951 100644
--- a/client/CLAUDE.md
+++ b/client/CLAUDE.md
@@ -319,13 +319,12 @@ client/
     │   └── auth/          # AuthContext — AuthProvider (server-seeded) + reducer + useAuth
     ├── theme/
     │   ├── ThemeProvider.tsx      # MuiThemeProvider wrapper (RTL cache) + ColorSchemeCookieSync
-    │   ├── colors.ts              # BRAND, LIGHT_PALETTE, DARK_PALETTE
-    │   ├── light.ts / dark.ts     # LIGHT_THEME / DARK_THEME ThemeOptions (consumed by theme.ts)
+    │   ├── colors.ts              # BRAND, LIGHT_PALETTE, DARK_PALETTE (incl. success/error/warning/info)
     │   ├── direction.ts           # getDirection(locale) → 'ltr' | 'rtl'
-    │   ├── theme.ts               # APP_THEME_LTR / APP_THEME_RTL (static, created once)
-    │   ├── tokens.css             # CSS custom properties — [data-mui-color-scheme] selectors
-    │   ├── typography.ts          # TYPOGRAPHY_LTR (Space Grotesk) / TYPOGRAPHY_RTL (Mikhak)
-    │   └── index.ts               # Public re-exports (ThemeProvider, getDirection, APP_THEME_*) — note: no ColorSchemeScript is exported/rendered today (doc drift below)
+    │   ├── theme.ts               # APP_THEME_LTR / APP_THEME_RTL (static, created once) — the `components` brand pass + teal-tinted `shadows` array + responsiveFontSizes()
+    │   ├── tokens.css             # CSS custom properties — [data-mui-color-scheme] selectors + the dark @media fallback (no-flash boot, no script — see "Theme System" below)
+    │   ├── typography.ts          # TYPOGRAPHY_LTR (Space Grotesk) / TYPOGRAPHY_RTL (Mikhak) — shared size scale, 500/700 weight system
+    │   └── index.ts               # Public re-exports (ThemeProvider, getDirection, APP_THEME_*)
     ├── constants/         # App-wide constants (routes.ts w/ actor paths, roles.ts, headers.ts)
     ├── hooks/             # incl. auth.ts → useIsAuthenticated / useActorRole (role-aware chrome)
     ├── utils/             # incl. money.ts (IRR/Toman, integer-safe) + date.ts (Shamsi display) + toEnglishDigits
@@ -458,15 +457,42 @@ Rules:
 
 ## Theme System
 
-### How it works (end-to-end, no-flash)
+### How it works (end-to-end, no-flash — CSS only, no boot script)
 
-1. **Request arrives** → `getThemeMode()` reads `'color-scheme'` cookie → returns `{ colorScheme, defaultMode }`
-2. **Root layout** sets `data-mui-color-scheme={colorScheme}` on `<html>` server-side
-3. **`<ColorSchemeScript />`** in `<head>` runs before any paint:
-   - Reads the same cookie, sets `data-mui-color-scheme` (handles edge cases where server attr might differ)
-   - Patches `Storage.prototype` — routes MUI's `localStorage` writes for key `'mode'` to our cookie; reads return `null` so MUI always trusts the `defaultMode` prop
-4. **`<MuiThemeProvider defaultMode={defaultMode}>`** mounts — uses the server-derived mode, not localStorage
-5. **`ColorSchemeCookieSync`** in ThemeProvider writes the cookie via `useColorScheme().colorScheme` on mount (safety net for first-visit system mode)
+The no-flash mechanism is **pure CSS**, matching how every other color decision in this
+app is made — no inline `<script>`, no `Storage.prototype` patching. Two visitor cases:
+
+**Returning visitor (cookie present):**
+1. `getThemeMode()` (`lib/cookies/server.ts`) reads the `'color-scheme'` cookie → returns
+   `{ colorScheme: 'light'|'dark', defaultMode: colorScheme }`.
+2. Root layout sets `data-mui-color-scheme={colorScheme}` on `<html>` server-side.
+3. `tokens.css`'s explicit `[data-mui-color-scheme='light'|'dark']` blocks match
+   immediately — correct on the very first paint, before any JS runs.
+
+**First-ever visitor (no cookie yet):**
+1. `getThemeMode()` returns `{ colorScheme: undefined, defaultMode: 'system' }`.
+2. Root layout renders `<html>` **without** the `data-mui-color-scheme` attribute at all
+   (`data-mui-color-scheme={undefined}` — React omits it).
+3. `tokens.css` has a `@media (prefers-color-scheme: dark)` block scoped to
+   `:root:not([data-mui-color-scheme])` — it only applies while the attribute is absent,
+   and paints the OS-preferred scheme immediately, with zero JS.
+4. Once React hydrates, `<MuiThemeProvider defaultMode="system">` resolves the *same*
+   media query and stamps the attribute itself. The CSS values already match what was
+   painted, so there is nothing to visibly flip.
+5. `ColorSchemeCookieSync` in `ThemeProvider.tsx` writes the cookie via
+   `useColorScheme().colorScheme` on mount, so the next visit is a "returning visitor".
+
+**Trade-off, by design:** this covers the dominant visual surface — every `--bal-*` token
+(page/paper background, text, dividers, all brand colors) — because that's what
+`tokens.css`'s media-query fallback drives. MUI's own generated `--mui-palette-*`
+variables (consumed by a bare `color="primary"` fill, e.g. a contained Button, or the
+default `MuiTabs` indicator) do **not** get the same free fallback — MUI's
+`colorSchemeSelector` supports either attribute-based *or* `'media'`-based generation,
+not both at once — so on a cookie-less first visit with OS dark on, a raw MUI-primary
+fill can very briefly show the light value until hydration (self-corrects same frame;
+`disableTransitionOnChange` means it snaps, never animates). Prefer sourcing colors from
+`var(--bal-*)` over `theme.vars.palette.*` in new `styleOverrides` — most of `theme.ts`'s
+`components` block already does — to keep this gap as small as possible.
 
 ### Critical MUI v9 rules
 
@@ -484,7 +510,10 @@ The shorthand `'data'` in MUI v9 generates `[data-%s]` → `data-dark=""` / `dat
 In MUI v9's `localStorageManager`, the check is `if (!storageWindow && typeof window !== 'undefined')` — `null` is falsy, so it silently overrides to `window`. This prop is a no-op in browsers. The `Storage.prototype` patch in `ColorSchemeScript` is the correct intercept.
 
 **Never use MUI's `InitColorSchemeScript`:**
-It reads from localStorage which diverges from our cookie (especially in 'system' mode). Use `ColorSchemeScript` from `@/theme` instead.
+It reads from localStorage, which diverges from our cookie (especially in 'system' mode),
+and it's a script — this app's no-flash boot is CSS-only (see "How it works" above). Don't
+add any pre-paint script for color scheme; extend the `tokens.css` media-query fallback
+instead if a new token needs the same first-visit treatment.
 
 **MUI v9 localStorage key defaults (different from v5/v6):**
 - Mode key: `'mode'` (was `'mui-mode'`)
@@ -536,18 +565,22 @@ Fonts are loaded **per locale** — the Persian face is never shipped to English
 | Locale | Font | CSS variable | Source | Loaded when |
 |--------|------|--------------|--------|-------------|
 | `fa` (RTL) | **Mikhak** | `--font-mikhak` | `next/font/local` — woff2 files in `src/app/fonts/` | only on `fa` routes |
-| `en` (LTR) | **Space Grotesk** | `--font-space-grotesk` | (not currently wired — falls back to the system stack) | — |
+| `en` (LTR) | **Space Grotesk** | `--font-space-grotesk` | `next/font/google` — self-hosted at build time, `preload: false` | only on `en` routes |
 
 **Typography exports:**
 - `TYPOGRAPHY_LTR` — Space Grotesk headings, system font body (used by `APP_THEME_LTR`)
 - `TYPOGRAPHY_RTL` — Mikhak for all text including body (used by `APP_THEME_RTL`, ensures full Persian glyph coverage)
-- `TYPOGRAPHY` — alias for `TYPOGRAPHY_LTR` (deprecated, prefer the explicit exports)
+- Both share one size/line-height scale (`SIZE_SCALE` in `typography.ts`), wrapped in
+  `responsiveFontSizes()` (`theme.ts`) for per-breakpoint heading scaling. Weight system:
+  **700** for headings + buttons, **500** for in-text emphasis (subtitles, labels), **400**
+  body — never `600`, neither font loads that weight (see `typography.ts`'s header comment).
+- There is no `TYPOGRAPHY` alias anymore — import `TYPOGRAPHY_LTR`/`TYPOGRAPHY_RTL` explicitly.
 
 **Rules:**
-- Mikhak is declared with `preload: false`, and its `.variable` class is attached to `<html>` **only when `locale === 'fa'`**. Both are required: a `next/font` loader called in the root layout would otherwise preload on every route (including `/en`), and `preload: false` ensures the woff2 only downloads when Persian text actually renders.
-- Font files live in `src/app/fonts/` (not `public/`). next/font/local resolves paths relative to the calling file (`src/app/[locale]/layout.tsx`) at build time.
+- Both fonts are declared with `preload: false`, and each `.variable` class is attached to `<html>` **only for its own locale** (Mikhak on `fa`, Space Grotesk on `en`) — never both, never neither. A `next/font` loader called in the root layout would otherwise preload on every route, and `preload: false` ensures the font file only downloads when its locale actually renders.
+- Mikhak's woff2 files live in `src/app/fonts/` (not `public/`) — next/font/local resolves paths relative to the calling file (`src/app/[locale]/layout.tsx`) at build time. Space Grotesk needs no local files — next/font/google fetches + self-hosts it at build time.
 - Never load fonts inside components — all font loading lives in `src/app/[locale]/layout.tsx`.
-- To add a new font, add woff2 files to `src/app/fonts/`, declare via `localFont`/`localFont`-equivalent in `src/app/[locale]/layout.tsx`, attach its `.variable` class conditionally on the matching locale, and update `BRAND_FONT_VARIABLE_*` constants in `typography.ts`.
+- To add a new local font, add woff2 files to `src/app/fonts/`, declare via `localFont` in `src/app/[locale]/layout.tsx`, attach its `.variable` class conditionally on the matching locale, and update the `BRAND_FONT_VARIABLE_*` constants in `typography.ts`.
 
 ---
 
diff --git a/client/public/img/favicon/16x16.png b/client/public/img/favicon/16x16.png
index 2ece9a6..8de4a00 100644
Binary files a/client/public/img/favicon/16x16.png and b/client/public/img/favicon/16x16.png differ
diff --git a/client/public/img/favicon/180x180.png b/client/public/img/favicon/180x180.png
index d12ce74..796222e 100644
Binary files a/client/public/img/favicon/180x180.png and b/client/public/img/favicon/180x180.png differ
diff --git a/client/public/img/favicon/192x192.png b/client/public/img/favicon/192x192.png
index 51d82a1..c56f068 100644
Binary files a/client/public/img/favicon/192x192.png and b/client/public/img/favicon/192x192.png differ
diff --git a/client/public/img/favicon/32x32.png b/client/public/img/favicon/32x32.png
index e302b42..07ada2f 100644
Binary files a/client/public/img/favicon/32x32.png and b/client/public/img/favicon/32x32.png differ
diff --git a/client/public/img/favicon/48x48.png b/client/public/img/favicon/48x48.png
new file mode 100644
index 0000000..99f8b96
Binary files /dev/null and b/client/public/img/favicon/48x48.png differ
diff --git a/client/public/img/favicon/512x512.png b/client/public/img/favicon/512x512.png
index 8ba6699..ea65635 100644
Binary files a/client/public/img/favicon/512x512.png and b/client/public/img/favicon/512x512.png differ
diff --git a/client/public/img/logo.svg b/client/public/img/logo.svg
index 362252c..6ef4c51 100644
--- a/client/public/img/logo.svg
+++ b/client/public/img/logo.svg
@@ -1,2 +1,8 @@
-
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#D99E82" d="M35.222 33.598c-.647-2.101-1.705-6.059-2.325-7.566-.501-1.216-.969-2.438-1.544-3.014-.575-.575-1.553-.53-2.143.058 0 0-2.469 1.675-3.354 2.783-1.108.882-2.785 3.357-2.785 3.357-.59.59-.635 1.567-.06 2.143.576.575 1.798 1.043 3.015 1.544 1.506.62 5.465 1.676 7.566 2.325.359.11 1.74-1.271 1.63-1.63z"/><path fill="#EA596E" d="M13.643 5.308c1.151 1.151 1.151 3.016 0 4.167l-4.167 4.168c-1.151 1.15-3.018 1.15-4.167 0L1.141 9.475c-1.15-1.151-1.15-3.016 0-4.167l4.167-4.167c1.15-1.151 3.016-1.151 4.167 0l4.168 4.167z"/><path fill="#FFCC4D" d="M31.353 23.018l-4.17 4.17-4.163 4.165L7.392 15.726l8.335-8.334 15.626 15.626z"/><path fill="#292F33" d="M32.078 34.763s2.709 1.489 3.441.757c.732-.732-.765-3.435-.765-3.435s-2.566.048-2.676 2.678z"/><path fill="#CCD6DD" d="M2.183 10.517l8.335-8.335 5.208 5.209-8.334 8.335z"/><path fill="#99AAB5" d="M3.225 11.558l8.334-8.334 1.042 1.042L4.267 12.6zm2.083 2.086l8.335-8.335 1.042 1.042-8.335 8.334z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+  <rect width="40" height="40" rx="10" fill="#1d4a40" />
+  <path fill="#f3efe9" fill-rule="evenodd" clip-rule="evenodd"
+    d="M21,17 A7.5,7.5 0 1,0 21,32 A7.5,7.5 0 1,0 21,17 Z
+       M21,20.8 A3.7,3.7 0 1,0 21,28.2 A3.7,3.7 0 1,0 21,20.8 Z" />
+  <rect x="12.9" y="9" width="4.8" height="22" rx="2.4" fill="#f3efe9" />
+  <circle cx="28.5" cy="10.5" r="2.6" fill="#d98c6a" />
+</svg>
diff --git a/client/public/site.webmanifest b/client/public/site.webmanifest
index c68685e..abf800d 100644
--- a/client/public/site.webmanifest
+++ b/client/public/site.webmanifest
@@ -1,22 +1,19 @@
 {
   "name": "Balinyaar",
   "short_name": "Balinyaar",
-  "description": "Balinyaar web application",
+  "description": "Balinyaar — trust-first home nursing marketplace",
   "start_url": ".",
-  "theme_color": "#000000",
-  "background_color": "#ffffff",
+  "theme_color": "#1d4a40",
+  "background_color": "#faf9f5",
   "display": "standalone",
   "orientation": "portrait",
   "icons": [
-    {
-      "src": "favicon.ico?v=1.0",
-      "sizes": "48x48 32x32 16x16",
-      "type": "image/x-icon"
-    },
-    { "src": "img/favicon/16x16.png?v=1.0", "sizes": "16x16", "type": "image/png" },
-    { "src": "img/favicon/32x32.png?v=1.0", "sizes": "32x32", "type": "image/png" },
-    { "src": "img/favicon/180x180.png?v=1.0", "sizes": "180x180", "type": "image/png" },
-    { "src": "img/favicon/192x192.png?v=1.0", "sizes": "192x192", "type": "image/png" },
-    { "src": "img/favicon/512x512.png?v=1.0", "sizes": "512x512", "type": "image/png" }
+    { "src": "favicon.ico?v=2", "sizes": "48x48 32x32 16x16", "type": "image/x-icon" },
+    { "src": "img/favicon/16x16.png?v=2", "sizes": "16x16", "type": "image/png" },
+    { "src": "img/favicon/32x32.png?v=2", "sizes": "32x32", "type": "image/png" },
+    { "src": "img/favicon/48x48.png?v=2", "sizes": "48x48", "type": "image/png" },
+    { "src": "img/favicon/180x180.png?v=2", "sizes": "180x180", "type": "image/png" },
+    { "src": "img/favicon/192x192.png?v=2", "sizes": "192x192", "type": "image/png" },
+    { "src": "img/favicon/512x512.png?v=2", "sizes": "512x512", "type": "image/png" }
   ]
 }
diff --git a/client/src/app/[locale]/(private-routes)/(customer)/addresses/page.tsx b/client/src/app/[locale]/(private-routes)/(customer)/addresses/page.tsx
index a407244..6fc1478 100644
--- a/client/src/app/[locale]/(private-routes)/(customer)/addresses/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/(customer)/addresses/page.tsx
@@ -102,7 +102,7 @@ export default function AddressesPage() {
           </Typography>
         </Box>
         {!isEmpty ? (
-          <AppButton color="primary" variant="contained" startIcon="add" onClick={openAdd} sx={{ m: 0, flexShrink: 0 }}>
+          <AppButton color="primary" variant="contained" startIcon="add" onClick={openAdd} sx={{ flexShrink: 0 }}>
             {t('add')}
           </AppButton>
         ) : null}
diff --git a/client/src/app/[locale]/(private-routes)/(customer)/bookings/[id]/cancel/page.tsx b/client/src/app/[locale]/(private-routes)/(customer)/bookings/[id]/cancel/page.tsx
index acbdbdf..f8bc96f 100644
--- a/client/src/app/[locale]/(private-routes)/(customer)/bookings/[id]/cancel/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/(customer)/bookings/[id]/cancel/page.tsx
@@ -93,11 +93,10 @@ export default function CancelBookingPage() {
             variant="contained"
             color="primary"
             onClick={() => router.push(`/${locale}${bookingRefundStatusPath(bookingId)}`)}
-            sx={{ m: 0 }}
           >
             {t('view_refund_status')}
           </AppButton>
-          <AppButton variant="text" color="inherit" onClick={() => router.push(bookingHref)} sx={{ m: 0 }}>
+          <AppButton variant="text" color="inherit" onClick={() => router.push(bookingHref)}>
             {t('back_to_booking')}
           </AppButton>
         </Stack>
@@ -157,7 +156,7 @@ export default function CancelBookingPage() {
           />
 
           <Stack direction="row" sx={{ gap: 1, justifyContent: 'space-between', flexWrap: 'wrap' }}>
-            <AppButton variant="text" color="inherit" onClick={() => router.push(bookingHref)} sx={{ m: 0 }}>
+            <AppButton variant="text" color="inherit" onClick={() => router.push(bookingHref)}>
               {t('back_to_booking')}
             </AppButton>
             <AppButton
@@ -165,7 +164,6 @@ export default function CancelBookingPage() {
               color="primary"
               disabled={!acknowledged}
               onClick={() => setStep(1)}
-              sx={{ m: 0 }}
             >
               {t('continue_cta')}
             </AppButton>
@@ -192,7 +190,6 @@ export default function CancelBookingPage() {
               color="inherit"
               onClick={() => setStep(0)}
               disabled={cancel.isPending}
-              sx={{ m: 0 }}
             >
               {tc('back')}
             </AppButton>
@@ -201,7 +198,6 @@ export default function CancelBookingPage() {
               color="error"
               onClick={submit}
               disabled={cancel.isPending}
-              sx={{ m: 0 }}
             >
               {cancel.isPending ? t('submitting') : t('confirm_cta')}
             </AppButton>
diff --git a/client/src/app/[locale]/(private-routes)/(customer)/bookings/[id]/invoice/page.tsx b/client/src/app/[locale]/(private-routes)/(customer)/bookings/[id]/invoice/page.tsx
index 042b9e4..cc50748 100644
--- a/client/src/app/[locale]/(private-routes)/(customer)/bookings/[id]/invoice/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/(customer)/bookings/[id]/invoice/page.tsx
@@ -51,7 +51,7 @@ export default function BookingInvoicePage() {
           <Typography variant="body2" sx={{ color: 'text.secondary' }}>
             {t('invalid_link_body')}
           </Typography>
-          <AppButton variant="contained" onClick={() => router.push(`/${locale}${ROUTES.BOOKINGS}`)} sx={{ m: 0 }}>
+          <AppButton variant="contained" onClick={() => router.push(`/${locale}${ROUTES.BOOKINGS}`)}>
             {t('view_booking')}
           </AppButton>
         </Stack>
@@ -82,11 +82,11 @@ export default function BookingInvoicePage() {
             {notIssued ? t('invoice_not_issued_body') : t('error_body')}
           </Typography>
           {notIssued ? (
-            <AppButton variant="contained" onClick={() => router.push(`/${locale}${ROUTES.BOOKINGS}/${bookingId}`)} sx={{ m: 0 }}>
+            <AppButton variant="contained" onClick={() => router.push(`/${locale}${ROUTES.BOOKINGS}/${bookingId}`)}>
               {t('view_booking')}
             </AppButton>
           ) : (
-            <AppButton variant="contained" onClick={() => refetch()} sx={{ m: 0 }}>
+            <AppButton variant="contained" onClick={() => refetch()}>
               {tc('retry')}
             </AppButton>
           )}
@@ -185,15 +185,15 @@ export default function BookingInvoicePage() {
 
       <Stack sx={{ gap: 1 }}>
         {invoice.pdfUrl ? (
-          <AppButton color="primary" variant="contained" startIcon="document" href={invoice.pdfUrl} openInNewTab sx={{ m: 0 }}>
+          <AppButton color="primary" variant="contained" startIcon="document" href={invoice.pdfUrl} openInNewTab>
             {t('download_invoice')}
           </AppButton>
         ) : (
-          <AppButton color="primary" variant="contained" startIcon="document" onClick={handlePrint} sx={{ m: 0 }}>
+          <AppButton color="primary" variant="contained" startIcon="document" onClick={handlePrint}>
             {t('print_invoice')}
           </AppButton>
         )}
-        <AppButton variant="text" onClick={() => router.push(`/${locale}${ROUTES.BOOKINGS}/${bookingId}`)} sx={{ m: 0 }}>
+        <AppButton variant="text" onClick={() => router.push(`/${locale}${ROUTES.BOOKINGS}/${bookingId}`)}>
           {t('view_booking')}
         </AppButton>
       </Stack>
@@ -207,7 +207,7 @@ function MetaRow({ label, value, ltr }: { label: string; value: string; ltr?: bo
       <Typography variant="body2" sx={{ color: 'text.secondary' }}>
         {label}
       </Typography>
-      <Typography variant="body2" sx={{ fontWeight: 600 }} dir={ltr ? 'ltr' : undefined}>
+      <Typography variant="body2" sx={{ fontWeight: 500 }} dir={ltr ? 'ltr' : undefined}>
         {value}
       </Typography>
     </Stack>
diff --git a/client/src/app/[locale]/(private-routes)/(customer)/bookings/[id]/page.tsx b/client/src/app/[locale]/(private-routes)/(customer)/bookings/[id]/page.tsx
index 6bcb0cd..4eb90e7 100644
--- a/client/src/app/[locale]/(private-routes)/(customer)/bookings/[id]/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/(customer)/bookings/[id]/page.tsx
@@ -63,7 +63,6 @@ function LeaveReviewCta({ bookingId }: { bookingId: number }) {
         color="primary"
         startIcon="star"
         onClick={() => router.push(`/${locale}${bookingReviewPath(bookingId)}`)}
-        sx={{ m: 0 }}
       >
         {alreadyReviewed ? (underReview ? t('cta_under_review') : t('cta_view_review')) : t('cta_leave')}
       </AppButton>
@@ -95,7 +94,6 @@ function CustomerBookingActions({ bookingId }: { bookingId: number }) {
           color="error"
           startIcon="rejected"
           onClick={() => router.push(`/${locale}${bookingCancelPath(bookingId)}`)}
-          sx={{ m: 0 }}
         >
           {t('cancel_booking_cta')}
         </AppButton>
@@ -114,7 +112,7 @@ function CustomerBookingActions({ bookingId }: { bookingId: number }) {
           variant="text"
           color="primary"
           onClick={() => router.push(`/${locale}${bookingRefundStatusPath(bookingId)}`)}
-          sx={{ m: 0, alignSelf: 'flex-start' }}
+          sx={{ alignSelf: 'flex-start' }}
         >
           {t('view_refund_status')}
         </AppButton>
diff --git a/client/src/app/[locale]/(private-routes)/(customer)/bookings/[id]/refund_status/page.tsx b/client/src/app/[locale]/(private-routes)/(customer)/bookings/[id]/refund_status/page.tsx
index b6261d4..7db9031 100644
--- a/client/src/app/[locale]/(private-routes)/(customer)/bookings/[id]/refund_status/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/(customer)/bookings/[id]/refund_status/page.tsx
@@ -66,7 +66,7 @@ export default function RefundStatusPage() {
         variant="text"
         color="inherit"
         onClick={() => router.push(`/${locale}${ROUTES.BOOKINGS}/${bookingId}`)}
-        sx={{ m: 0, alignSelf: 'flex-start' }}
+        sx={{ alignSelf: 'flex-start' }}
       >
         {t('back_to_booking')}
       </AppButton>
diff --git a/client/src/app/[locale]/(private-routes)/(customer)/bookings/[id]/review/page.tsx b/client/src/app/[locale]/(private-routes)/(customer)/bookings/[id]/review/page.tsx
index 7ea0d34..1dd4f04 100644
--- a/client/src/app/[locale]/(private-routes)/(customer)/bookings/[id]/review/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/(customer)/bookings/[id]/review/page.tsx
@@ -95,7 +95,7 @@ export default function LeaveReviewPage() {
             ) : null}
           </Stack>
         </Paper>
-        <AppButton variant="outlined" color="primary" onClick={() => router.back()} sx={{ m: 0, alignSelf: 'flex-start' }}>
+        <AppButton variant="outlined" color="primary" onClick={() => router.back()} sx={{ alignSelf: 'flex-start' }}>
           {tc('back')}
         </AppButton>
       </Stack>
@@ -124,7 +124,7 @@ export default function LeaveReviewPage() {
             {t(`reason_${reason}`)}
           </Typography>
         </Paper>
-        <AppButton variant="outlined" color="primary" onClick={() => router.back()} sx={{ m: 0, alignSelf: 'flex-start' }}>
+        <AppButton variant="outlined" color="primary" onClick={() => router.back()} sx={{ alignSelf: 'flex-start' }}>
           {tc('back')}
         </AppButton>
       </Stack>
@@ -167,7 +167,7 @@ export default function LeaveReviewPage() {
       </Stack>
 
       <Stack direction="row" sx={{ gap: 1, justifyContent: 'flex-end' }}>
-        <AppButton variant="text" color="primary" onClick={() => router.back()} sx={{ m: 0 }} disabled={createReview.isPending}>
+        <AppButton variant="text" color="primary" onClick={() => router.back()} disabled={createReview.isPending}>
           {tc('cancel')}
         </AppButton>
         <AppButton
@@ -176,7 +176,6 @@ export default function LeaveReviewPage() {
           onClick={submit}
           disabled={rating < 1 || createReview.isPending}
           startIcon="star"
-          sx={{ m: 0 }}
         >
           {createReview.isPending ? t('submitting') : t('submit')}
         </AppButton>
diff --git a/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/EligibilityStep.tsx b/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/EligibilityStep.tsx
index 9310c05..c7b1fbb 100644
--- a/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/EligibilityStep.tsx
+++ b/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/EligibilityStep.tsx
@@ -86,7 +86,7 @@ const EligibilityStep: FunctionComponent<EligibilityStepProps> = ({
             ) : null}
           </Stack>
         </Paper>
-        <AppButton color="secondary" variant="contained" size="large" onClick={() => onApproved(result)} sx={{ m: 0 }}>
+        <AppButton color="secondary" variant="contained" size="large" onClick={() => onApproved(result)}>
           {t('approve_continue')}
         </AppButton>
       </Stack>
@@ -162,11 +162,10 @@ const EligibilityStep: FunctionComponent<EligibilityStepProps> = ({
           size="large"
           disabled={!consent || check.isPending}
           onClick={handleSubmit}
-          sx={{ m: 0 }}
         >
           {t('check_eligibility')}
         </AppButton>
-        <AppButton variant="text" color="primary" onClick={onPayWithCard} sx={{ m: 0 }}>
+        <AppButton variant="text" color="primary" onClick={onPayWithCard}>
           {t('pay_with_card')}
         </AppButton>
       </Stack>
@@ -207,11 +206,11 @@ function DeclinedPanel({
       </Paper>
       <Stack sx={{ gap: 1 }}>
         {onRetry && retryLabel ? (
-          <AppButton variant="outlined" color="secondary" onClick={onRetry} sx={{ m: 0 }}>
+          <AppButton variant="outlined" color="secondary" onClick={onRetry}>
             {retryLabel}
           </AppButton>
         ) : null}
-        <AppButton color="primary" variant="contained" size="large" onClick={onPayWithCard} sx={{ m: 0 }}>
+        <AppButton color="primary" variant="contained" size="large" onClick={onPayWithCard}>
           {cardLabel}
         </AppButton>
       </Stack>
diff --git a/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/MethodStep.tsx b/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/MethodStep.tsx
index 66212bb..9a05827 100644
--- a/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/MethodStep.tsx
+++ b/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/MethodStep.tsx
@@ -109,7 +109,6 @@ const MethodStep: FunctionComponent<MethodStepProps> = ({
             size="large"
             disabled={selectedProvider == null}
             onClick={onContinue}
-            sx={{ m: 0 }}
           >
             {selectedProvider
               ? t('continue_with', { provider: t(`provider_${selectedProvider}`) })
diff --git a/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/PlanStep.tsx b/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/PlanStep.tsx
index 0332924..ffa9c81 100644
--- a/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/PlanStep.tsx
+++ b/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/PlanStep.tsx
@@ -44,7 +44,7 @@ const PlanStep: FunctionComponent<PlanStepProps> = ({
             {t('no_plans_body')}
           </Typography>
         </Paper>
-        <AppButton variant="outlined" color="primary" onClick={onBack} sx={{ m: 0 }}>
+        <AppButton variant="outlined" color="primary" onClick={onBack}>
           {t('back_to_providers')}
         </AppButton>
       </Stack>
@@ -93,11 +93,10 @@ const PlanStep: FunctionComponent<PlanStepProps> = ({
           size="large"
           disabled={selectedPlanId == null}
           onClick={onContinue}
-          sx={{ m: 0 }}
         >
           {t('continue')}
         </AppButton>
-        <AppButton variant="text" color="primary" onClick={onBack} sx={{ m: 0 }}>
+        <AppButton variant="text" color="primary" onClick={onBack}>
           {tc('back')}
         </AppButton>
       </Stack>
diff --git a/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/ScheduleStep.tsx b/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/ScheduleStep.tsx
index 07c351f..98ae8b8 100644
--- a/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/ScheduleStep.tsx
+++ b/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/ScheduleStep.tsx
@@ -82,7 +82,7 @@ const ScheduleStep: FunctionComponent<ScheduleStepProps> = ({
         <AppAlert severity="error" variant="outlined" sx={{ marginY: 0 }}>
           {t('error_body')}
         </AppAlert>
-        <AppButton variant="outlined" color="secondary" onClick={() => refetch()} sx={{ m: 0 }}>
+        <AppButton variant="outlined" color="secondary" onClick={() => refetch()}>
           {tc('retry')}
         </AppButton>
       </Stack>
@@ -146,11 +146,11 @@ const ScheduleStep: FunctionComponent<ScheduleStepProps> = ({
           size="large"
           disabled={!accepted}
           onClick={handleConfirm}
-          sx={{ m: 0, py: 1.25 }}
+          sx={{ py: 1.25 }}
         >
           {t('pay_down_payment')}
         </AppButton>
-        <AppButton variant="text" color="primary" onClick={onBack} sx={{ m: 0 }}>
+        <AppButton variant="text" color="primary" onClick={onBack}>
           {tc('back')}
         </AppButton>
       </Stack>
diff --git a/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/gateway/page.tsx b/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/gateway/page.tsx
index cc5a809..79d4b52 100644
--- a/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/gateway/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/gateway/page.tsx
@@ -61,10 +61,10 @@ function BnplGatewayScreen() {
         <Typography variant="body2" sx={{ color: 'text.secondary' }}>
           {t('handoff_body', { provider: providerName })}
         </Typography>
-        <AppButton color="secondary" variant="contained" size="large" onClick={() => returnWith('success')} sx={{ m: 0 }}>
+        <AppButton color="secondary" variant="contained" size="large" onClick={() => returnWith('success')}>
           {t('handoff_pay_success')}
         </AppButton>
-        <AppButton variant="text" color="error" onClick={() => returnWith('failure')} sx={{ m: 0 }}>
+        <AppButton variant="text" color="error" onClick={() => returnWith('failure')}>
           {t('handoff_pay_fail')}
         </AppButton>
       </Stack>
diff --git a/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/page.tsx b/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/page.tsx
index 6648b6b..a2b8b5a 100644
--- a/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/page.tsx
@@ -201,7 +201,7 @@ function MessageCard({
           {body}
         </Typography>
       ) : null}
-      <AppButton variant="contained" color="primary" onClick={onCta} sx={{ m: 0 }}>
+      <AppButton variant="contained" color="primary" onClick={onCta}>
         {ctaLabel}
       </AppButton>
     </Paper>
diff --git a/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/return/page.tsx b/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/return/page.tsx
index a0b5ea8..a378f3d 100644
--- a/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/return/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/return/page.tsx
@@ -98,7 +98,7 @@ function BnplReturnScreen() {
   if (!validId) {
     return (
       <StateCard icon="error" tone="var(--bal-error)" title={t('error_title')}>
-        <AppButton variant="contained" onClick={() => router.replace(`/${locale}${ROUTES.BOOKINGS}`)} sx={{ m: 0 }}>
+        <AppButton variant="contained" onClick={() => router.replace(`/${locale}${ROUTES.BOOKINGS}`)}>
           {t('pay_with_card')}
         </AppButton>
       </StateCard>
@@ -113,7 +113,6 @@ function BnplReturnScreen() {
         <AppButton
           variant="contained"
           onClick={() => router.replace(`/${locale}${ROUTES.BOOKING_REQUEST_STATUS}/${requestId}`)}
-          sx={{ m: 0 }}
         >
           {tp('back_to_request')}
         </AppButton>
@@ -129,14 +128,12 @@ function BnplReturnScreen() {
           variant="contained"
           size="large"
           onClick={() => router.replace(`/${locale}${ROUTES.CHECKOUT_BNPL}?${BNPL_QUERY_REQUEST_ID}=${requestId}`)}
-          sx={{ m: 0 }}
         >
           {t('retry_installments')}
         </AppButton>
         <AppButton
           variant="text"
           onClick={() => router.replace(`/${locale}${ROUTES.CHECKOUT}?${CHECKOUT_QUERY_REQUEST_ID}=${requestId}`)}
-          sx={{ m: 0 }}
         >
           {t('pay_with_card')}
         </AppButton>
@@ -148,7 +145,7 @@ function BnplReturnScreen() {
   return (
     <StateCard icon="installments" tone="var(--bal-secondary)" title={t('settling_title')} body={t('settling_body')}>
       <CircularProgress color="secondary" size="2.5rem" />
-      <AppButton variant="text" disabled={orderQuery.isFetching} onClick={() => orderQuery.refetch()} sx={{ m: 0 }}>
+      <AppButton variant="text" disabled={orderQuery.isFetching} onClick={() => orderQuery.refetch()}>
         {t('check_again')}
       </AppButton>
     </StateCard>
diff --git a/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/confirmation/page.tsx b/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/confirmation/page.tsx
index 8d6b7bb..22c6657 100644
--- a/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/confirmation/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/confirmation/page.tsx
@@ -76,7 +76,7 @@ function ConfirmationScreen() {
               {summary.variantLabel} · {summary.nurseName}
             </Typography>
             {isBnpl ? (
-              <Typography variant="caption" sx={{ color: 'var(--bal-secondary)', fontWeight: 600, mt: 0.5 }}>
+              <Typography variant="caption" sx={{ color: 'var(--bal-secondary)', fontWeight: 500, mt: 0.5 }}>
                 {tBnpl('paid_via_installments', {
                   provider: bnplProvider ? tBnpl(`provider_${bnplProvider}`) : tBnpl('installments_heading'),
                 })}
@@ -94,7 +94,6 @@ function ConfirmationScreen() {
           onClick={() =>
             router.push(`/${locale}${bookingId != null ? `${ROUTES.BOOKINGS}/${bookingId}` : ROUTES.BOOKINGS}`)
           }
-          sx={{ m: 0 }}
         >
           {t('view_booking')}
         </AppButton>
@@ -104,7 +103,6 @@ function ConfirmationScreen() {
             color="primary"
             startIcon="document"
             onClick={() => router.push(`/${locale}${bookingInvoicePath(bookingId)}`)}
-            sx={{ m: 0 }}
           >
             {t('download_invoice')}
           </AppButton>
diff --git a/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/page.tsx b/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/page.tsx
index 850d62a..79d70b1 100644
--- a/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/page.tsx
@@ -206,7 +206,7 @@ function CheckoutScreen() {
           size="large"
           disabled={busy}
           onClick={handlePay}
-          sx={{ m: 0, py: 1.25 }}
+          sx={{ py: 1.25 }}
         >
           {initiate.isPending ? t('state_initiating') : initiate.isSuccess ? t('state_redirecting') : t('cta_pay')}
         </AppButton>
@@ -217,7 +217,6 @@ function CheckoutScreen() {
             color="secondary"
             startIcon="installments"
             onClick={() => router.push(`/${locale}${ROUTES.CHECKOUT_BNPL}?${CHECKOUT_QUERY_REQUEST_ID}=${requestId}`)}
-            sx={{ m: 0 }}
           >
             {t('bnpl_option')}
           </AppButton>
@@ -278,7 +277,7 @@ function MessageCard({
           {body}
         </Typography>
       ) : null}
-      <AppButton variant="contained" color="primary" onClick={onCta} sx={{ m: 0 }}>
+      <AppButton variant="contained" color="primary" onClick={onCta}>
         {ctaLabel}
       </AppButton>
     </Paper>
diff --git a/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/return/page.tsx b/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/return/page.tsx
index 6e9c3b4..1b0cb11 100644
--- a/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/return/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/return/page.tsx
@@ -88,7 +88,7 @@ function ReturnScreen() {
   if (!validId) {
     return (
       <StateCard icon="error" tone="var(--bal-error)" title={t('error_title')}>
-        <AppButton variant="contained" onClick={() => router.replace(`/${locale}${ROUTES.BOOKINGS}`)} sx={{ m: 0 }}>
+        <AppButton variant="contained" onClick={() => router.replace(`/${locale}${ROUTES.BOOKINGS}`)}>
           {t('view_booking')}
         </AppButton>
       </StateCard>
@@ -101,7 +101,6 @@ function ReturnScreen() {
         <AppButton
           variant="contained"
           onClick={() => router.replace(`/${locale}${ROUTES.BOOKING_REQUEST_STATUS}/${requestId}`)}
-          sx={{ m: 0 }}
         >
           {t('back_to_request')}
         </AppButton>
@@ -120,14 +119,12 @@ function ReturnScreen() {
           onClick={() =>
             router.replace(`/${locale}${ROUTES.CHECKOUT}?${CHECKOUT_QUERY_REQUEST_ID}=${requestId}`)
           }
-          sx={{ m: 0 }}
         >
           {t('retry_payment')}
         </AppButton>
         <AppButton
           variant="text"
           onClick={() => router.replace(`/${locale}${ROUTES.BOOKING_REQUEST_STATUS}/${requestId}`)}
-          sx={{ m: 0 }}
         >
           {t('back_to_request')}
         </AppButton>
@@ -141,7 +138,7 @@ function ReturnScreen() {
       <CircularProgress color="primary" size="2.5rem" />
       <PaymentStatusBadge status="pending" />
       {/* Manual re-check — covers the bounded poll giving up on a very slow callback. */}
-      <AppButton variant="text" disabled={outcomeQuery.isFetching} onClick={() => outcomeQuery.refetch()} sx={{ m: 0 }}>
+      <AppButton variant="text" disabled={outcomeQuery.isFetching} onClick={() => outcomeQuery.refetch()}>
         {t('check_again')}
       </AppButton>
     </StateCard>
diff --git a/client/src/app/[locale]/(private-routes)/(customer)/bookings/page.tsx b/client/src/app/[locale]/(private-routes)/(customer)/bookings/page.tsx
index d85e32c..d1f8687 100644
--- a/client/src/app/[locale]/(private-routes)/(customer)/bookings/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/(customer)/bookings/page.tsx
@@ -93,7 +93,6 @@ function BookingRow({ item }: { item: BookingListItemDto }) {
             color="primary"
             endIcon="bookings"
             onClick={() => router.push(`/${locale}${ROUTES.BOOKINGS}/${item.id}`)}
-            sx={{ m: 0 }}
           >
             {t('view_booking')}
           </AppButton>
diff --git a/client/src/app/[locale]/(private-routes)/(customer)/bookings/request/[id]/page.tsx b/client/src/app/[locale]/(private-routes)/(customer)/bookings/request/[id]/page.tsx
index 780b06f..7abe07f 100644
--- a/client/src/app/[locale]/(private-routes)/(customer)/bookings/request/[id]/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/(customer)/bookings/request/[id]/page.tsx
@@ -185,7 +185,7 @@ export default function BookingRequestStatusPage() {
               size="large"
               endIcon="payment"
               onClick={() => router.push(`/${locale}${ROUTES.CHECKOUT}?request_id=${request.id}`)}
-              sx={{ m: 0, py: 1.25 }}
+              sx={{ py: 1.25 }}
             >
               {t('continue_payment')}
             </AppButton>
@@ -207,7 +207,7 @@ export default function BookingRequestStatusPage() {
         color="error"
         disabled={cancelRequest.isPending}
         onClick={() => setConfirmCancel(true)}
-        sx={{ m: 0, alignSelf: 'center' }}
+        sx={{ alignSelf: 'center' }}
       >
         {cancelRequest.isPending ? t('cancelling') : t('cancel_request')}
       </AppButton>
@@ -273,7 +273,7 @@ function TerminalCard({
           {body}
         </Typography>
       ) : null}
-      <AppButton variant="contained" color="primary" onClick={onCta} sx={{ m: 0 }}>
+      <AppButton variant="contained" color="primary" onClick={onCta}>
         {ctaLabel}
       </AppButton>
     </Paper>
diff --git a/client/src/app/[locale]/(private-routes)/(customer)/bookings/request/page.tsx b/client/src/app/[locale]/(private-routes)/(customer)/bookings/request/page.tsx
index 4b04cc3..d068865 100644
--- a/client/src/app/[locale]/(private-routes)/(customer)/bookings/request/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/(customer)/bookings/request/page.tsx
@@ -384,7 +384,7 @@ function BookingRequestForm() {
             '& .MuiToggleButton-root': {
               flex: 1,
               py: 1.25,
-              fontWeight: 600,
+              fontWeight: 700,
               borderColor: attempted && gender === '' ? 'var(--bal-error)' : undefined,
             },
           }}
@@ -438,7 +438,7 @@ function BookingRequestForm() {
         startIcon="requests"
         disabled={!requiredChosen || genderMismatch || createRequest.isPending}
         onClick={handleSubmit}
-        sx={{ m: 0, py: 1.5 }}
+        sx={{ py: 1.5 }}
       >
         {createRequest.isPending ? t('submitting') : t('submit')}
       </AppButton>
@@ -494,7 +494,7 @@ function FieldEmpty({
           <Typography variant="body2" sx={{ color: 'text.secondary' }}>
             {message}
           </Typography>
-          <AppButton variant="outlined" color="primary" startIcon="add" onClick={onCta} sx={{ m: 0 }}>
+          <AppButton variant="outlined" color="primary" startIcon="add" onClick={onCta}>
             {ctaLabel}
           </AppButton>
         </Stack>
@@ -525,7 +525,7 @@ function EmptyState({
       <Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
         {body}
       </Typography>
-      <AppButton variant="contained" color="primary" onClick={onCta} sx={{ m: 0 }}>
+      <AppButton variant="contained" color="primary" onClick={onCta}>
         {ctaLabel}
       </AppButton>
     </Paper>
diff --git a/client/src/app/[locale]/(private-routes)/(customer)/onboarding/page.tsx b/client/src/app/[locale]/(private-routes)/(customer)/onboarding/page.tsx
index 652ef9d..cd8572b 100644
--- a/client/src/app/[locale]/(private-routes)/(customer)/onboarding/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/(customer)/onboarding/page.tsx
@@ -67,7 +67,6 @@ export default function OnboardingPage() {
             fullWidth
             disabled={!relation}
             onClick={() => setStep(1)}
-            sx={{ m: 0 }}
           >
             {t('continue')}
           </AppButton>
diff --git a/client/src/app/[locale]/(private-routes)/(customer)/page.tsx b/client/src/app/[locale]/(private-routes)/(customer)/page.tsx
index 2c8344d..5257508 100644
--- a/client/src/app/[locale]/(private-routes)/(customer)/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/(customer)/page.tsx
@@ -33,7 +33,7 @@ const NudgeCard: FunctionComponent<NudgeCardProps> = ({ icon, title, body, ctaLa
           {body}
         </Typography>
       </Stack>
-      <AppButton color="primary" variant="outlined" to={to} sx={{ m: 0, alignSelf: 'flex-start' }}>
+      <AppButton color="primary" variant="outlined" to={to} sx={{ alignSelf: 'flex-start' }}>
         {ctaLabel}
       </AppButton>
     </Stack>
@@ -180,7 +180,7 @@ const CategoryGrid: FunctionComponent<{ onSelect: (categoryId: number) => void }
           <Typography variant="body2" sx={{ color: 'text.secondary', mb: 1 }}>
             {t('categories_error')}
           </Typography>
-          <AppButton variant="outlined" color="primary" onClick={() => refetch()} sx={{ m: 0 }}>
+          <AppButton variant="outlined" color="primary" onClick={() => refetch()}>
             {tc('retry')}
           </AppButton>
         </Paper>
diff --git a/client/src/app/[locale]/(private-routes)/(customer)/patients/[id]/record/page.tsx b/client/src/app/[locale]/(private-routes)/(customer)/patients/[id]/record/page.tsx
index 101d4a3..bfdb386 100644
--- a/client/src/app/[locale]/(private-routes)/(customer)/patients/[id]/record/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/(customer)/patients/[id]/record/page.tsx
@@ -110,7 +110,7 @@ export default function PatientRecordPage() {
         sx={{ p: 2, borderRadius: 2, backgroundColor: 'var(--bal-primary-soft)', display: 'flex', gap: 1, alignItems: 'center' }}
       >
         <AppIcon icon="family" size={22} color="var(--bal-primary)" />
-        <Typography variant="body2" sx={{ color: 'var(--bal-primary)', fontWeight: 600 }}>
+        <Typography variant="body2" sx={{ color: 'var(--bal-primary)', fontWeight: 500 }}>
           {t('ownership_banner')}
         </Typography>
       </Paper>
@@ -435,13 +435,13 @@ function HistoryTab({ patientId }: { patientId: number }) {
       ))}
       {totalPages > 1 ? (
         <Stack direction="row" sx={{ gap: 1, justifyContent: 'center', alignItems: 'center' }}>
-          <AppButton variant="text" color="primary" disabled={page <= 1 || history.isFetching} onClick={() => setPage((n) => Math.max(1, n - 1))} sx={{ m: 0 }}>
+          <AppButton variant="text" color="primary" disabled={page <= 1 || history.isFetching} onClick={() => setPage((n) => Math.max(1, n - 1))}>
             {t('prev')}
           </AppButton>
           <Typography variant="caption" sx={{ color: 'text.secondary' }}>
             {t('page_of', { page, total: totalPages })}
           </Typography>
-          <AppButton variant="text" color="primary" disabled={page >= totalPages || history.isFetching} onClick={() => setPage((n) => n + 1)} sx={{ m: 0 }}>
+          <AppButton variant="text" color="primary" disabled={page >= totalPages || history.isFetching} onClick={() => setPage((n) => n + 1)}>
             {t('next')}
           </AppButton>
         </Stack>
@@ -468,7 +468,7 @@ function SectionShell({
   return (
     <Stack sx={{ gap: 1.5 }}>
       {canEdit ? (
-        <AppButton variant="text" color="primary" startIcon="edit" onClick={onEdit} sx={{ m: 0, alignSelf: 'flex-end' }}>
+        <AppButton variant="text" color="primary" startIcon="edit" onClick={onEdit} sx={{ alignSelf: 'flex-end' }}>
           {tc('edit')}
         </AppButton>
       ) : null}
@@ -500,14 +500,14 @@ function EditActions({
   const tc = useTranslations('common');
   return (
     <Stack sx={{ gap: 1 }}>
-      <AppButton variant="outlined" color="primary" startIcon="add" onClick={onAdd} sx={{ m: 0, alignSelf: 'flex-start' }}>
+      <AppButton variant="outlined" color="primary" startIcon="add" onClick={onAdd} sx={{ alignSelf: 'flex-start' }}>
         {t('add_item')}
       </AppButton>
       <Stack direction="row" sx={{ gap: 1, justifyContent: 'flex-end' }}>
-        <AppButton variant="text" color="primary" onClick={onCancel} disabled={saving} sx={{ m: 0 }}>
+        <AppButton variant="text" color="primary" onClick={onCancel} disabled={saving}>
           {tc('cancel')}
         </AppButton>
-        <AppButton variant="contained" color="primary" onClick={onSave} disabled={saving || !canSave} sx={{ m: 0 }}>
+        <AppButton variant="contained" color="primary" onClick={onSave} disabled={saving || !canSave}>
           {saving ? tc('saving') : tc('save')}
         </AppButton>
       </Stack>
@@ -524,7 +524,7 @@ function BackToPatients() {
       variant="outlined"
       color="primary"
       onClick={() => router.push(`/${locale}${ROUTES.PATIENTS}`)}
-      sx={{ m: 0, alignSelf: 'flex-start' }}
+      sx={{ alignSelf: 'flex-start' }}
     >
       {t('back_to_patients')}
     </AppButton>
diff --git a/client/src/app/[locale]/(private-routes)/(customer)/patients/page.tsx b/client/src/app/[locale]/(private-routes)/(customer)/patients/page.tsx
index 9313623..665615d 100644
--- a/client/src/app/[locale]/(private-routes)/(customer)/patients/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/(customer)/patients/page.tsx
@@ -94,7 +94,7 @@ export default function PatientsPage() {
           </Typography>
         </Box>
         {!isEmpty ? (
-          <AppButton color="primary" variant="contained" startIcon="add" onClick={openAdd} sx={{ m: 0, flexShrink: 0 }}>
+          <AppButton color="primary" variant="contained" startIcon="add" onClick={openAdd} sx={{ flexShrink: 0 }}>
             {t('add')}
           </AppButton>
         ) : null}
diff --git a/client/src/app/[locale]/(private-routes)/(customer)/profile/page.tsx b/client/src/app/[locale]/(private-routes)/(customer)/profile/page.tsx
index c481acf..4033546 100644
--- a/client/src/app/[locale]/(private-routes)/(customer)/profile/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/(customer)/profile/page.tsx
@@ -131,7 +131,7 @@ const CustomerProfileForm: FunctionComponent<{
         variant="contained"
         onClick={handleSave}
         disabled={upsert.isPending}
-        sx={{ m: 0, alignSelf: 'flex-start' }}
+        sx={{ alignSelf: 'flex-start' }}
       >
         {upsert.isPending ? tc('saving') : t('save')}
       </AppButton>
@@ -156,7 +156,7 @@ const CustomerProfileForm: FunctionComponent<{
             variant="outlined"
             startIcon="location"
             to={`/${locale}${ROUTES.ADDRESSES}`}
-            sx={{ m: 0, alignSelf: 'flex-start' }}
+            sx={{ alignSelf: 'flex-start' }}
           >
             {ta('manage_cta')}
           </AppButton>
diff --git a/client/src/app/[locale]/(private-routes)/(customer)/search/nurse/[nurseId]/page.tsx b/client/src/app/[locale]/(private-routes)/(customer)/search/nurse/[nurseId]/page.tsx
index 3876d25..c91da08 100644
--- a/client/src/app/[locale]/(private-routes)/(customer)/search/nurse/[nurseId]/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/(customer)/search/nurse/[nurseId]/page.tsx
@@ -49,7 +49,6 @@ export default function NurseProfilePage() {
           variant="outlined"
           color="primary"
           onClick={() => (notFound ? router.push(`/${locale}${ROUTES.SEARCH}`) : refetch())}
-          sx={{ m: 0 }}
         >
           {notFound ? t('profile_not_found_cta') : t('retry')}
         </AppButton>
@@ -95,7 +94,7 @@ export default function NurseProfilePage() {
         size="large"
         onClick={requestBooking}
         startIcon="bookings"
-        sx={{ m: 0, py: 1.5 }}
+        sx={{ py: 1.5 }}
       >
         {t('request_booking')}
       </AppButton>
@@ -230,7 +229,7 @@ function ReviewsPanel({ nurseId }: { nurseId: number }) {
         <Typography variant="body2" sx={{ color: 'text.secondary', mb: 1.5 }}>
           {t('load_error')}
         </Typography>
-        <AppButton variant="outlined" color="primary" onClick={() => refetch()} sx={{ m: 0 }}>
+        <AppButton variant="outlined" color="primary" onClick={() => refetch()}>
           {t('retry')}
         </AppButton>
       </Paper>
@@ -278,7 +277,7 @@ function ReviewsPanel({ nurseId }: { nurseId: number }) {
           color="primary"
           onClick={() => fetchNextPage()}
           disabled={isFetchingNextPage}
-          sx={{ m: 0, alignSelf: 'center' }}
+          sx={{ alignSelf: 'center' }}
         >
           {isFetchingNextPage ? t('loading') : t('load_more')}
         </AppButton>
diff --git a/client/src/app/[locale]/(private-routes)/(customer)/search/page.tsx b/client/src/app/[locale]/(private-routes)/(customer)/search/page.tsx
index 3c2c7ad..db54852 100644
--- a/client/src/app/[locale]/(private-routes)/(customer)/search/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/(customer)/search/page.tsx
@@ -134,7 +134,7 @@ function SearchFilterScreen() {
         disabled={!controller.isReady}
         onClick={goToResults}
         startIcon="search"
-        sx={{ m: 0, py: 1.5 }}
+        sx={{ py: 1.5 }}
       >
         {ctaLabel}
       </AppButton>
diff --git a/client/src/app/[locale]/(private-routes)/(customer)/search/results/page.tsx b/client/src/app/[locale]/(private-routes)/(customer)/search/results/page.tsx
index e3aa608..e8ddb91 100644
--- a/client/src/app/[locale]/(private-routes)/(customer)/search/results/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/(customer)/search/results/page.tsx
@@ -80,7 +80,7 @@ function ResultsScreen() {
           <Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
             {t('results_error')}
           </Typography>
-          <AppButton variant="outlined" color="primary" onClick={() => refetch()} sx={{ m: 0 }}>
+          <AppButton variant="outlined" color="primary" onClick={() => refetch()}>
             {t('retry')}
           </AppButton>
         </Paper>
@@ -97,7 +97,7 @@ function ResultsScreen() {
               color="primary"
               onClick={() => setPageSize((size) => size + SEARCH_PAGE_SIZE)}
               disabled={isFetching}
-              sx={{ m: 0, alignSelf: 'center' }}
+              sx={{ alignSelf: 'center' }}
             >
               {t('load_more')}
             </AppButton>
@@ -128,7 +128,7 @@ function EmptyState({ onRelax }: { onRelax: () => void }) {
           {t('empty_suggest_city')}
         </Typography>
       </Stack>
-      <AppButton variant="contained" color="primary" onClick={onRelax} startIcon="tune" sx={{ m: 0 }}>
+      <AppButton variant="contained" color="primary" onClick={onRelax} startIcon="tune">
         {t('empty_cta')}
       </AppButton>
     </Paper>
diff --git a/client/src/app/[locale]/(private-routes)/(customer)/wallet/WalletInstallments.tsx b/client/src/app/[locale]/(private-routes)/(customer)/wallet/WalletInstallments.tsx
index 9074b61..ff40795 100644
--- a/client/src/app/[locale]/(private-routes)/(customer)/wallet/WalletInstallments.tsx
+++ b/client/src/app/[locale]/(private-routes)/(customer)/wallet/WalletInstallments.tsx
@@ -42,7 +42,7 @@ const WalletInstallments: FunctionComponent = () => {
             <Typography variant="body2" sx={{ color: 'text.secondary' }}>
               {t('wallet_error_body')}
             </Typography>
-            <AppButton variant="outlined" color="secondary" onClick={() => refetch()} sx={{ m: 0, mt: 1 }}>
+            <AppButton variant="outlined" color="secondary" onClick={() => refetch()} sx={{ mt: 1 }}>
               {tc('retry')}
             </AppButton>
           </Stack>
@@ -106,7 +106,7 @@ function InstallmentPlanSection({ plan }: { plan: WalletInstallmentPlan }) {
                 variant="contained"
                 size="small"
                 onClick={handleEarlyPay}
-                sx={{ m: 0, flex: 'none' }}
+                sx={{ flex: 'none' }}
               >
                 {t('early_pay')}
               </AppButton>
diff --git a/client/src/app/[locale]/(private-routes)/admin/audit/page.tsx b/client/src/app/[locale]/(private-routes)/admin/audit/page.tsx
index 8fcf1a0..b7370a4 100644
--- a/client/src/app/[locale]/(private-routes)/admin/audit/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/admin/audit/page.tsx
@@ -76,10 +76,10 @@ export default function AdminAuditPage() {
           onChange={(e) => setDraft((d) => ({ ...d, to: e.target.value || undefined }))}
           slotProps={{ inputLabel: { shrink: true } }}
         />
-        <AppButton variant="contained" color="primary" onClick={apply} sx={{ m: 0 }}>
+        <AppButton variant="contained" color="primary" onClick={apply}>
           {t('apply')}
         </AppButton>
-        <AppButton variant="text" color="inherit" onClick={clear} sx={{ m: 0 }}>
+        <AppButton variant="text" color="inherit" onClick={clear}>
           {t('clear')}
         </AppButton>
       </Stack>
diff --git a/client/src/app/[locale]/(private-routes)/admin/config/page.tsx b/client/src/app/[locale]/(private-routes)/admin/config/page.tsx
index b691764..66ed78c 100644
--- a/client/src/app/[locale]/(private-routes)/admin/config/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/admin/config/page.tsx
@@ -159,15 +159,15 @@ function ConfigEditDialog({ config, onClose }: { config: PlatformConfig; onClose
           />
         )}
 
-        <DialogContentText sx={{ mt: 2, color: 'var(--bal-warning)', fontWeight: 600 }}>
+        <DialogContentText sx={{ mt: 2, color: 'var(--bal-warning)', fontWeight: 500 }}>
           {t('cfg_save_confirm_body')}
         </DialogContentText>
       </DialogContent>
       <DialogActions sx={{ px: 3, pb: 2 }}>
-        <AppButton variant="text" color="inherit" onClick={onClose} disabled={update.isPending} sx={{ m: 0 }}>
+        <AppButton variant="text" color="inherit" onClick={onClose} disabled={update.isPending}>
           {t('cancel')}
         </AppButton>
-        <AppButton variant="contained" color="primary" onClick={onSave} disabled={!!errorKey || update.isPending} sx={{ m: 0 }}>
+        <AppButton variant="contained" color="primary" onClick={onSave} disabled={!!errorKey || update.isPending}>
           {update.isPending ? t('saving') : t('save')}
         </AppButton>
       </DialogActions>
@@ -187,7 +187,7 @@ function ConfigHistoryDrawer({ configKey, onClose }: { configKey: string | null;
     <Drawer anchor={anchor} open={configKey != null} onClose={onClose} slotProps={{ paper: { sx: { width: { xs: '100%', sm: 420 }, p: 3 } } }}>
       <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
         <Typography variant="h6">{configKey ? t('cfg_history_title', { key: configKey }) : ''}</Typography>
-        <AppButton variant="text" color="inherit" onClick={onClose} sx={{ m: 0, minWidth: 0 }}>
+        <AppButton variant="text" color="inherit" onClick={onClose} sx={{ minWidth: 0 }}>
           <AppIcon icon="close" />
         </AppButton>
       </Stack>
diff --git a/client/src/app/[locale]/(private-routes)/admin/holidays/page.tsx b/client/src/app/[locale]/(private-routes)/admin/holidays/page.tsx
index 1ef081a..9779039 100644
--- a/client/src/app/[locale]/(private-routes)/admin/holidays/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/admin/holidays/page.tsx
@@ -63,7 +63,7 @@ export default function AdminHolidaysPage() {
             key: 'actions',
             header: '',
             render: (h: Holiday) => (
-              <AppButton variant="text" color="primary" startIcon="edit" onClick={() => setEditing(h)} sx={{ m: 0 }}>
+              <AppButton variant="text" color="primary" startIcon="edit" onClick={() => setEditing(h)}>
                 {t('cfg_edit')}
               </AppButton>
             ),
@@ -79,7 +79,7 @@ export default function AdminHolidaysPage() {
         subtitle={t('hol_subtitle')}
         actions={
           caps.canConfig ? (
-            <AppButton variant="contained" color="primary" startIcon="add" onClick={() => setEditing('new')} sx={{ m: 0 }}>
+            <AppButton variant="contained" color="primary" startIcon="add" onClick={() => setEditing('new')}>
               {t('hol_add')}
             </AppButton>
           ) : undefined
@@ -168,10 +168,10 @@ function HolidayDialog({ holiday, onClose }: { holiday: Holiday | null; onClose:
         </Stack>
       </DialogContent>
       <DialogActions sx={{ px: 3, pb: 2 }}>
-        <AppButton variant="text" color="inherit" onClick={onClose} disabled={upsert.isPending} sx={{ m: 0 }}>
+        <AppButton variant="text" color="inherit" onClick={onClose} disabled={upsert.isPending}>
           {t('cancel')}
         </AppButton>
-        <AppButton variant="contained" color="primary" onClick={onSave} disabled={!valid || upsert.isPending} sx={{ m: 0 }}>
+        <AppButton variant="contained" color="primary" onClick={onSave} disabled={!valid || upsert.isPending}>
           {upsert.isPending ? t('saving') : t('save')}
         </AppButton>
       </DialogActions>
diff --git a/client/src/app/[locale]/(private-routes)/admin/partners/[id]/page.tsx b/client/src/app/[locale]/(private-routes)/admin/partners/[id]/page.tsx
index 05718f9..bdd5e79 100644
--- a/client/src/app/[locale]/(private-routes)/admin/partners/[id]/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/admin/partners/[id]/page.tsx
@@ -83,7 +83,7 @@ export default function AdminPartnerCenterDetailPage() {
       color="primary"
       startIcon="partners"
       onClick={() => router.push(`/${locale}${ROUTES.ADMIN_PARTNERS}`)}
-      sx={{ m: 0, alignSelf: 'flex-start' }}
+      sx={{ alignSelf: 'flex-start' }}
     >
       {t('back')}
     </AppButton>
@@ -162,7 +162,6 @@ export default function AdminPartnerCenterDetailPage() {
               startIcon="verified"
               onClick={() => setConfirmVerify(true)}
               disabled={verify.isPending}
-              sx={{ m: 0 }}
             >
               {t('partner_verify')}
             </AppButton>
@@ -172,11 +171,10 @@ export default function AdminPartnerCenterDetailPage() {
             color="primary"
             onClick={() => setActive.mutate(!data.isActive)}
             disabled={setActive.isPending}
-            sx={{ m: 0 }}
           >
             {t(data.isActive ? 'partner_suspend' : 'partner_activate')}
           </AppButton>
-          <AppButton variant="outlined" color="inherit" startIcon="edit" onClick={() => setEditing(true)} sx={{ m: 0 }}>
+          <AppButton variant="outlined" color="inherit" startIcon="edit" onClick={() => setEditing(true)}>
             {t('partner_edit')}
           </AppButton>
         </Stack>
@@ -211,7 +209,6 @@ export default function AdminPartnerCenterDetailPage() {
                       startIcon="delete"
                       onClick={() => onRemove(nurse.nurseProfileId)}
                       disabled={assignNurse.isPending}
-                      sx={{ m: 0 }}
                     >
                       {t('partner_unlink_nurse')}
                     </AppButton>
@@ -239,7 +236,7 @@ export default function AdminPartnerCenterDetailPage() {
               startIcon="assign"
               onClick={onAssign}
               disabled={assignNurse.isPending || Number(assignId) <= 0}
-              sx={{ m: 0, mt: 0.25 }}
+              sx={{ mt: 0.25 }}
             >
               {t('partner_assign_nurse')}
             </AppButton>
@@ -270,7 +267,7 @@ function DetailRow({ label, children }: { label: string; children: ReactNode })
       <Typography variant="body2" sx={{ color: 'text.secondary' }}>
         {label}
       </Typography>
-      <Typography variant="body2" component="div" sx={{ fontWeight: 600, textAlign: 'end' }}>
+      <Typography variant="body2" component="div" sx={{ fontWeight: 500, textAlign: 'end' }}>
         {children}
       </Typography>
     </Stack>
diff --git a/client/src/app/[locale]/(private-routes)/admin/partners/page.tsx b/client/src/app/[locale]/(private-routes)/admin/partners/page.tsx
index f81d33a..b0859b3 100644
--- a/client/src/app/[locale]/(private-routes)/admin/partners/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/admin/partners/page.tsx
@@ -77,7 +77,7 @@ export default function AdminPartnersPage() {
         subtitle={t('partner_subtitle')}
         actions={
           caps.canManagePartners ? (
-            <AppButton variant="contained" color="primary" startIcon="add" onClick={() => setCreating(true)} sx={{ m: 0 }}>
+            <AppButton variant="contained" color="primary" startIcon="add" onClick={() => setCreating(true)}>
               {t('partner_create')}
             </AppButton>
           ) : undefined
@@ -245,10 +245,10 @@ export function PartnerCenterFormDialog({ center, onClose }: { center: PartnerCe
         </Stack>
       </DialogContent>
       <DialogActions sx={{ px: 3, pb: 2 }}>
-        <AppButton variant="text" color="inherit" onClick={onClose} disabled={mutation.isPending} sx={{ m: 0 }}>
+        <AppButton variant="text" color="inherit" onClick={onClose} disabled={mutation.isPending}>
           {t('cancel')}
         </AppButton>
-        <AppButton variant="contained" color="primary" onClick={onSave} disabled={!valid || mutation.isPending} sx={{ m: 0 }}>
+        <AppButton variant="contained" color="primary" onClick={onSave} disabled={!valid || mutation.isPending}>
           {mutation.isPending ? t('saving') : t('save')}
         </AppButton>
       </DialogActions>
diff --git a/client/src/app/[locale]/(private-routes)/admin/payouts/[batchId]/page.tsx b/client/src/app/[locale]/(private-routes)/admin/payouts/[batchId]/page.tsx
index 4d46415..dd10ffe 100644
--- a/client/src/app/[locale]/(private-routes)/admin/payouts/[batchId]/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/admin/payouts/[batchId]/page.tsx
@@ -54,7 +54,7 @@ export default function AdminPayoutBatchDetailPage() {
           variant="text"
           color="primary"
           onClick={() => router.push(`/${locale}${ROUTES.ADMIN_PAYOUTS}`)}
-          sx={{ m: 0, alignSelf: 'flex-start' }}
+          sx={{ alignSelf: 'flex-start' }}
         >
           {t('back')}
         </AppButton>
@@ -92,7 +92,7 @@ export default function AdminPayoutBatchDetailPage() {
                     <Chip
                       size="small"
                       label={t('payout_holiday_shift')}
-                      sx={{ bgcolor: 'var(--bal-warning)', color: 'var(--bal-warning-contrast)', fontWeight: 600 }}
+                      sx={{ bgcolor: 'var(--bal-warning)', color: 'var(--bal-warning-contrast)', fontWeight: 500 }}
                     />
                   ) : null}
                 </Stack>
@@ -226,7 +226,6 @@ const PayoutRowCard: FunctionComponent<{ row: AdminPayoutRow; batchId: number; c
                   color="error"
                   onClick={() => setRetryOpen(true)}
                   disabled={retry.isPending}
-                  sx={{ m: 0 }}
                 >
                   {t('payout_retry')}
                 </AppButton>
@@ -251,7 +250,6 @@ const PayoutRowCard: FunctionComponent<{ row: AdminPayoutRow; batchId: number; c
               color="primary"
               onClick={onRecord}
               disabled={reference.trim().length === 0 || record.isPending}
-              sx={{ m: 0 }}
             >
               {record.isPending ? t('saving') : t('save')}
             </AppButton>
@@ -279,7 +277,7 @@ const MetaLine: FunctionComponent<{ label: string; children: ReactNode }> = ({ l
     <Typography variant="body2" sx={{ color: 'text.secondary' }}>
       {label}
     </Typography>
-    <Box sx={{ fontWeight: 600, typography: 'body2' }}>{children}</Box>
+    <Box sx={{ fontWeight: 500, typography: 'body2' }}>{children}</Box>
   </Stack>
 );
 
@@ -288,7 +286,7 @@ const Field: FunctionComponent<{ label: string; children: ReactNode }> = ({ labe
     <Typography variant="caption" sx={{ color: 'text.secondary' }}>
       {label}
     </Typography>
-    <Typography variant="body2" sx={{ fontWeight: 600 }}>
+    <Typography variant="body2" sx={{ fontWeight: 500 }}>
       {children}
     </Typography>
   </Stack>
diff --git a/client/src/app/[locale]/(private-routes)/admin/payouts/page.tsx b/client/src/app/[locale]/(private-routes)/admin/payouts/page.tsx
index 505388c..3ce81dd 100644
--- a/client/src/app/[locale]/(private-routes)/admin/payouts/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/admin/payouts/page.tsx
@@ -109,7 +109,7 @@ export default function AdminPayoutsPage() {
             <Chip
               size="small"
               label={t('payout_holiday_shift')}
-              sx={{ bgcolor: 'var(--bal-warning)', color: 'var(--bal-warning-contrast)', fontWeight: 600 }}
+              sx={{ bgcolor: 'var(--bal-warning)', color: 'var(--bal-warning-contrast)', fontWeight: 500 }}
             />
           ) : null}
         </Stack>
@@ -143,7 +143,7 @@ export default function AdminPayoutsPage() {
               ))}
             </TextField>
             {caps.canPayout ? (
-              <AppButton variant="contained" color="primary" onClick={() => setPreviewOpen(true)} sx={{ m: 0 }}>
+              <AppButton variant="contained" color="primary" onClick={() => setPreviewOpen(true)}>
                 {t('payout_preview')}
               </AppButton>
             ) : null}
@@ -253,7 +253,6 @@ function PreviewBatchDialog({ canPayout, onClose }: { canPayout: boolean; onClos
             color="primary"
             onClick={onPreview}
             disabled={!periodStart || !periodEnd || preview.isPending}
-            sx={{ m: 0 }}
           >
             {t('payout_preview')}
           </AppButton>
@@ -272,7 +271,7 @@ function PreviewBatchDialog({ canPayout, onClose }: { canPayout: boolean; onClos
                 <Chip
                   size="small"
                   label={t('payout_holiday_shift')}
-                  sx={{ bgcolor: 'var(--bal-warning)', color: 'var(--bal-warning-contrast)', fontWeight: 600 }}
+                  sx={{ bgcolor: 'var(--bal-warning)', color: 'var(--bal-warning-contrast)', fontWeight: 500 }}
                 />
               ) : null}
             </Stack>
@@ -300,7 +299,7 @@ function PreviewBatchDialog({ canPayout, onClose }: { canPayout: boolean; onClos
                           <Chip
                             size="small"
                             label={t('payout_no_iban')}
-                            sx={{ bgcolor: 'var(--bal-error)', color: 'var(--bal-error-contrast)', fontWeight: 600 }}
+                            sx={{ bgcolor: 'var(--bal-error)', color: 'var(--bal-error-contrast)', fontWeight: 500 }}
                           />
                         ) : null}
                       </Stack>
@@ -346,7 +345,7 @@ function PreviewBatchDialog({ canPayout, onClose }: { canPayout: boolean; onClos
         ) : null}
       </DialogContent>
       <DialogActions sx={{ px: 3, pb: 2 }}>
-        <AppButton variant="text" color="inherit" onClick={onClose} disabled={run.isPending} sx={{ m: 0 }}>
+        <AppButton variant="text" color="inherit" onClick={onClose} disabled={run.isPending}>
           {t('cancel')}
         </AppButton>
         {canPayout ? (
@@ -355,7 +354,6 @@ function PreviewBatchDialog({ canPayout, onClose }: { canPayout: boolean; onClos
             color="primary"
             onClick={() => setRunConfirmOpen(true)}
             disabled={!result || run.isPending}
-            sx={{ m: 0 }}
           >
             {t('payout_run')}
           </AppButton>
diff --git a/client/src/app/[locale]/(private-routes)/admin/reviews/page.tsx b/client/src/app/[locale]/(private-routes)/admin/reviews/page.tsx
index 9da8d1f..e86537a 100644
--- a/client/src/app/[locale]/(private-routes)/admin/reviews/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/admin/reviews/page.tsx
@@ -182,13 +182,13 @@ function ModerationCard({
 
       {canModerate ? (
         <Stack direction="row" sx={{ gap: 1, flexWrap: 'wrap' }}>
-          <AppButton variant="contained" color="primary" startIcon="publish" onClick={() => onAct('publish')} sx={{ m: 0 }}>
+          <AppButton variant="contained" color="primary" startIcon="publish" onClick={() => onAct('publish')}>
             {t('mod_publish')}
           </AppButton>
-          <AppButton variant="outlined" color="inherit" onClick={() => onAct('hide')} sx={{ m: 0 }}>
+          <AppButton variant="outlined" color="inherit" onClick={() => onAct('hide')}>
             {t('mod_hide')}
           </AppButton>
-          <AppButton variant="outlined" color="error" onClick={() => onAct('reject')} sx={{ m: 0 }}>
+          <AppButton variant="outlined" color="error" onClick={() => onAct('reject')}>
             {t('mod_reject')}
           </AppButton>
         </Stack>
diff --git a/client/src/app/[locale]/(private-routes)/admin/roles/page.tsx b/client/src/app/[locale]/(private-routes)/admin/roles/page.tsx
index 8a3be1b..e0630bf 100644
--- a/client/src/app/[locale]/(private-routes)/admin/roles/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/admin/roles/page.tsx
@@ -71,7 +71,7 @@ export default function AdminRolesPage() {
             header: '',
             align: 'right',
             render: (g: RoleGrant) => (
-              <AppButton variant="text" color="error" startIcon="delete" onClick={() => setRevoking(g)} sx={{ m: 0 }}>
+              <AppButton variant="text" color="error" startIcon="delete" onClick={() => setRevoking(g)}>
                 {t('role_revoke')}
               </AppButton>
             ),
@@ -100,7 +100,7 @@ export default function AdminRolesPage() {
         subtitle={t('role_subtitle')}
         actions={
           caps.canManageRoles ? (
-            <AppButton variant="contained" color="primary" startIcon="add" onClick={() => setGranting(true)} sx={{ m: 0 }}>
+            <AppButton variant="contained" color="primary" startIcon="add" onClick={() => setGranting(true)}>
               {t('role_grant')}
             </AppButton>
           ) : undefined
@@ -193,10 +193,10 @@ function GrantRoleDialog({ onClose }: { onClose: () => void }) {
         </Stack>
       </DialogContent>
       <DialogActions sx={{ px: 3, pb: 2 }}>
-        <AppButton variant="text" color="inherit" onClick={onClose} disabled={grant.isPending} sx={{ m: 0 }}>
+        <AppButton variant="text" color="inherit" onClick={onClose} disabled={grant.isPending}>
           {t('cancel')}
         </AppButton>
-        <AppButton variant="contained" color="primary" onClick={onGrant} disabled={!valid || grant.isPending} sx={{ m: 0 }}>
+        <AppButton variant="contained" color="primary" onClick={onGrant} disabled={!valid || grant.isPending}>
           {grant.isPending ? t('saving') : t('confirm')}
         </AppButton>
       </DialogActions>
diff --git a/client/src/app/[locale]/(private-routes)/admin/tickets/[id]/page.tsx b/client/src/app/[locale]/(private-routes)/admin/tickets/[id]/page.tsx
index 9bd4d2f..a81bc17 100644
--- a/client/src/app/[locale]/(private-routes)/admin/tickets/[id]/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/admin/tickets/[id]/page.tsx
@@ -88,7 +88,7 @@ export default function AdminTicketThreadPage() {
         variant="text"
         color="primary"
         onClick={() => router.push(`/${locale}${ROUTES.ADMIN_TICKETS}`)}
-        sx={{ m: 0, alignSelf: 'flex-start' }}
+        sx={{ alignSelf: 'flex-start' }}
       >
         {t('back')}
       </AppButton>
@@ -133,7 +133,6 @@ export default function AdminTicketThreadPage() {
                     color="primary"
                     startIcon="refunds"
                     onClick={() => setRefundShown((v) => !v)}
-                    sx={{ m: 0 }}
                   >
                     {t('refund_open')}
                   </AppButton>
@@ -184,7 +183,7 @@ export default function AdminTicketThreadPage() {
                   startIcon="send"
                   onClick={send}
                   disabled={post.isPending || body.trim().length === 0}
-                  sx={{ m: 0, alignSelf: 'flex-start' }}
+                  sx={{ alignSelf: 'flex-start' }}
                 >
                   {t('ticket_send')}
                 </AppButton>
diff --git a/client/src/app/[locale]/(private-routes)/admin/tickets/page.tsx b/client/src/app/[locale]/(private-routes)/admin/tickets/page.tsx
index 7e83122..cb8ca44 100644
--- a/client/src/app/[locale]/(private-routes)/admin/tickets/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/admin/tickets/page.tsx
@@ -124,10 +124,10 @@ export default function AdminTicketsPage() {
           onChange={(e) => setDraft((d) => ({ ...d, referenceCode: e.target.value || undefined }))}
           sx={{ minWidth: 220 }}
         />
-        <AppButton variant="contained" color="primary" onClick={apply} sx={{ m: 0 }}>
+        <AppButton variant="contained" color="primary" onClick={apply}>
           {t('apply')}
         </AppButton>
-        <AppButton variant="text" color="inherit" onClick={clear} sx={{ m: 0 }}>
+        <AppButton variant="text" color="inherit" onClick={clear}>
           {t('clear')}
         </AppButton>
       </Stack>
diff --git a/client/src/app/[locale]/(private-routes)/admin/verification/[nurseId]/page.tsx b/client/src/app/[locale]/(private-routes)/admin/verification/[nurseId]/page.tsx
index 54d5f1c..7944e77 100644
--- a/client/src/app/[locale]/(private-routes)/admin/verification/[nurseId]/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/admin/verification/[nurseId]/page.tsx
@@ -104,7 +104,7 @@ export default function AdminVerificationCasePage() {
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
       <Stack sx={{ gap: 1 }}>
-        <AppButton variant="text" color="primary" onClick={backToQueue} sx={{ m: 0, alignSelf: 'flex-start' }}>
+        <AppButton variant="text" color="primary" onClick={backToQueue} sx={{ alignSelf: 'flex-start' }}>
           {t('back')}
         </AppButton>
         <AdminPageHeader title={t('ver_case_title')} />
@@ -177,7 +177,6 @@ export default function AdminVerificationCasePage() {
                 color="primary"
                 onClick={() => setApproveOpen(true)}
                 disabled={!allPassed || !caps.canVerify}
-                sx={{ m: 0 }}
               >
                 {t('ver_approve')}
               </AppButton>
@@ -186,7 +185,6 @@ export default function AdminVerificationCasePage() {
                 color="error"
                 onClick={() => setRejectOpen(true)}
                 disabled={!caps.canVerify}
-                sx={{ m: 0 }}
               >
                 {t('ver_reject_all')}
               </AppButton>
@@ -274,7 +272,7 @@ function StepCard({
         </Typography>
         <StatusChip status={STEP_STATUS_KIND[step.status]} label={t(`step_${step.status}`)} />
         {step.isAutomated ? (
-          <Chip size="small" label={t('ver_automated_badge')} sx={{ bgcolor: 'action.hover', fontWeight: 600 }} />
+          <Chip size="small" label={t('ver_automated_badge')} sx={{ bgcolor: 'action.hover', fontWeight: 500 }} />
         ) : null}
       </Stack>
 
@@ -303,7 +301,6 @@ function StepCard({
             color="primary"
             onClick={() => (isCredentialStep ? setCredentialOpen(true) : onPass())}
             disabled={decide.isPending}
-            sx={{ m: 0 }}
           >
             {t('ver_pass')}
           </AppButton>
@@ -312,7 +309,6 @@ function StepCard({
             color="error"
             onClick={() => setRejectOpen(true)}
             disabled={decide.isPending}
-            sx={{ m: 0 }}
           >
             {t('ver_reject')}
           </AppButton>
@@ -434,7 +430,7 @@ function CredentialDialog({
         </Stack>
       </DialogContent>
       <DialogActions sx={{ px: 3, pb: 2 }}>
-        <AppButton variant="text" color="inherit" onClick={onClose} disabled={decide.isPending} sx={{ m: 0 }}>
+        <AppButton variant="text" color="inherit" onClick={onClose} disabled={decide.isPending}>
           {t('cancel')}
         </AppButton>
         <AppButton
@@ -442,7 +438,6 @@ function CredentialDialog({
           color="primary"
           onClick={onSubmit}
           disabled={decide.isPending || expiryMissing}
-          sx={{ m: 0 }}
         >
           {decide.isPending ? t('saving') : t('save')}
         </AppButton>
diff --git a/client/src/app/[locale]/(private-routes)/admin/verification/page.tsx b/client/src/app/[locale]/(private-routes)/admin/verification/page.tsx
index d2573be..cf1d9d6 100644
--- a/client/src/app/[locale]/(private-routes)/admin/verification/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/admin/verification/page.tsx
@@ -63,7 +63,7 @@ export default function AdminVerificationQueuePage() {
               size="small"
               icon={<AppIcon icon="warning" size={14} color="var(--bal-warning-contrast)" />}
               label={t('ver_expiring_warning')}
-              sx={{ bgcolor: 'var(--bal-warning)', color: 'var(--bal-warning-contrast)', fontWeight: 600 }}
+              sx={{ bgcolor: 'var(--bal-warning)', color: 'var(--bal-warning-contrast)', fontWeight: 500 }}
             />
           ) : null}
         </Stack>
diff --git a/client/src/app/[locale]/(private-routes)/nurse/bank/page.tsx b/client/src/app/[locale]/(private-routes)/nurse/bank/page.tsx
index d366fdd..fd88849 100644
--- a/client/src/app/[locale]/(private-routes)/nurse/bank/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/nurse/bank/page.tsx
@@ -92,7 +92,7 @@ export default function NurseBankPage() {
                     onSuccess: () => enqueueSnackbar(t('primary_set'), { variant: 'success' }),
                   })
                 }
-                sx={{ m: 0, alignSelf: 'flex-start' }}
+                sx={{ alignSelf: 'flex-start' }}
               >
                 {t('make_primary')}
               </AppButton>
@@ -147,7 +147,7 @@ export default function NurseBankPage() {
             startIcon="bank"
             onClick={submit}
             disabled={addAccount.isPending}
-            sx={{ m: 0, alignSelf: 'flex-start' }}
+            sx={{ alignSelf: 'flex-start' }}
           >
             {addAccount.isPending ? t('submitting') : t('submit')}
           </AppButton>
diff --git a/client/src/app/[locale]/(private-routes)/nurse/coverage/page.tsx b/client/src/app/[locale]/(private-routes)/nurse/coverage/page.tsx
index 7cca6c2..867323e 100644
--- a/client/src/app/[locale]/(private-routes)/nurse/coverage/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/nurse/coverage/page.tsx
@@ -154,7 +154,7 @@ export default function NurseCoveragePage() {
                 key={area.id}
                 label={chipLabel(area)}
                 onDelete={() => setRemoveTarget(area)}
-                sx={{ bgcolor: 'var(--bal-primary-soft)', fontWeight: 600 }}
+                sx={{ bgcolor: 'var(--bal-primary-soft)', fontWeight: 500 }}
               />
             ))}
           </Box>
@@ -237,7 +237,7 @@ export default function NurseCoveragePage() {
             startIcon="add"
             onClick={handleAdd}
             disabled={addArea.isPending}
-            sx={{ m: 0, alignSelf: 'flex-start' }}
+            sx={{ alignSelf: 'flex-start' }}
           >
             {addArea.isPending ? t('adding') : t('add')}
           </AppButton>
diff --git a/client/src/app/[locale]/(private-routes)/nurse/earnings/page.tsx b/client/src/app/[locale]/(private-routes)/nurse/earnings/page.tsx
index 1d6e771..2c022cb 100644
--- a/client/src/app/[locale]/(private-routes)/nurse/earnings/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/nurse/earnings/page.tsx
@@ -173,7 +173,7 @@ function ErrorPanel({ message, onRetry, retryLabel }: { message: string; onRetry
       <Typography variant="body2" sx={{ color: 'text.secondary', mb: 1.5 }}>
         {message}
       </Typography>
-      <AppButton variant="outlined" color="primary" startIcon="refresh" onClick={onRetry} sx={{ m: 0 }}>
+      <AppButton variant="outlined" color="primary" startIcon="refresh" onClick={onRetry}>
         {retryLabel}
       </AppButton>
     </Paper>
@@ -199,13 +199,13 @@ function Pager({
 
   return (
     <Stack direction="row" sx={{ gap: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <AppButton variant="text" color="primary" onClick={onPrev} disabled={page <= 1} sx={{ m: 0 }}>
+      <AppButton variant="text" color="primary" onClick={onPrev} disabled={page <= 1}>
         {t('page_prev')}
       </AppButton>
       <Typography variant="body2" sx={{ color: 'text.secondary' }}>
         {t('page_indicator', { page: fmt(page), total: fmt(pageCount) })}
       </Typography>
-      <AppButton variant="text" color="primary" onClick={onNext} disabled={page >= pageCount} sx={{ m: 0 }}>
+      <AppButton variant="text" color="primary" onClick={onNext} disabled={page >= pageCount}>
         {t('page_next')}
       </AppButton>
     </Stack>
diff --git a/client/src/app/[locale]/(private-routes)/nurse/earnings/payouts/[id]/page.tsx b/client/src/app/[locale]/(private-routes)/nurse/earnings/payouts/[id]/page.tsx
index 70c6526..f8da36e 100644
--- a/client/src/app/[locale]/(private-routes)/nurse/earnings/payouts/[id]/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/nurse/earnings/payouts/[id]/page.tsx
@@ -50,7 +50,7 @@ export default function NursePayoutDetailPage() {
           color="primary"
           startIcon="wallet"
           onClick={() => router.push(`/${locale}${ROUTES.NURSE_EARNINGS_PAYOUTS}`)}
-          sx={{ m: 0, alignSelf: 'flex-start' }}
+          sx={{ alignSelf: 'flex-start' }}
         >
           {t('back_to_history')}
         </AppButton>
@@ -193,7 +193,6 @@ export default function NursePayoutDetailPage() {
                       color="primary"
                       endIcon="visits"
                       onClick={() => router.push(`/${locale}${nurseBookingDetailPath(link.bookingId)}`)}
-                      sx={{ m: 0 }}
                     >
                       {t('view_booking')}
                     </AppButton>
@@ -213,7 +212,7 @@ const MetaLine: FunctionComponent<{ label: string; children: ReactNode }> = ({ l
     <Typography variant="body2" sx={{ color: 'text.secondary' }}>
       {label}
     </Typography>
-    <Typography variant="body2" sx={{ fontWeight: 600 }}>
+    <Typography variant="body2" sx={{ fontWeight: 500 }}>
       {children}
     </Typography>
   </Stack>
diff --git a/client/src/app/[locale]/(private-routes)/nurse/earnings/payouts/page.tsx b/client/src/app/[locale]/(private-routes)/nurse/earnings/payouts/page.tsx
index 08512fc..13ae148 100644
--- a/client/src/app/[locale]/(private-routes)/nurse/earnings/payouts/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/nurse/earnings/payouts/page.tsx
@@ -35,7 +35,7 @@ export default function NursePayoutHistoryPage() {
           color="primary"
           startIcon="earnings"
           onClick={() => router.push(`/${locale}${ROUTES.NURSE_EARNINGS}`)}
-          sx={{ m: 0, alignSelf: 'flex-start' }}
+          sx={{ alignSelf: 'flex-start' }}
         >
           {t('back_to_earnings')}
         </AppButton>
@@ -58,7 +58,7 @@ export default function NursePayoutHistoryPage() {
           <Typography variant="body2" sx={{ color: 'text.secondary', mb: 1.5 }}>
             {t('history_error')}
           </Typography>
-          <AppButton variant="outlined" color="primary" startIcon="refresh" onClick={() => history.refetch()} sx={{ m: 0 }}>
+          <AppButton variant="outlined" color="primary" startIcon="refresh" onClick={() => history.refetch()}>
             {t('retry')}
           </AppButton>
         </Paper>
@@ -86,13 +86,13 @@ export default function NursePayoutHistoryPage() {
 
       {pageCount > 1 ? (
         <Stack direction="row" sx={{ gap: 1, alignItems: 'center', justifyContent: 'center' }}>
-          <AppButton variant="text" color="primary" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1} sx={{ m: 0 }}>
+          <AppButton variant="text" color="primary" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1}>
             {t('page_prev')}
           </AppButton>
           <Typography variant="body2" sx={{ color: 'text.secondary' }}>
             {t('page_indicator', { page: fmt(page), total: fmt(pageCount) })}
           </Typography>
-          <AppButton variant="text" color="primary" onClick={() => setPage((p) => Math.min(pageCount, p + 1))} disabled={page >= pageCount} sx={{ m: 0 }}>
+          <AppButton variant="text" color="primary" onClick={() => setPage((p) => Math.min(pageCount, p + 1))} disabled={page >= pageCount}>
             {t('page_next')}
           </AppButton>
         </Stack>
diff --git a/client/src/app/[locale]/(private-routes)/nurse/profile/page.tsx b/client/src/app/[locale]/(private-routes)/nurse/profile/page.tsx
index 8b84c19..b41bd6f 100644
--- a/client/src/app/[locale]/(private-routes)/nurse/profile/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/nurse/profile/page.tsx
@@ -100,7 +100,7 @@ const NurseProfileForm: FunctionComponent<{ initial: NurseProfile | null }> = ({
                 color="primary"
                 variant="outlined"
                 to={`/${locale}${ROUTES.NURSE_VERIFICATION}`}
-                sx={{ m: 0, alignSelf: 'flex-start' }}
+                sx={{ alignSelf: 'flex-start' }}
               >
                 {t('unverified_cta')}
               </AppButton>
@@ -126,7 +126,7 @@ const NurseProfileForm: FunctionComponent<{ initial: NurseProfile | null }> = ({
             startIcon="camera"
             onClick={pickFile}
             disabled={uploadAvatar.isPending}
-            sx={{ m: 0, mt: 0.5, alignSelf: 'flex-start' }}
+            sx={{ mt: 0.5, alignSelf: 'flex-start' }}
           >
             {uploadAvatar.isPending ? t('uploading') : t('upload')}
           </AppButton>
@@ -166,7 +166,7 @@ const NurseProfileForm: FunctionComponent<{ initial: NurseProfile | null }> = ({
         variant="contained"
         onClick={handleSave}
         disabled={upsert.isPending}
-        sx={{ m: 0, alignSelf: 'flex-start' }}
+        sx={{ alignSelf: 'flex-start' }}
       >
         {upsert.isPending ? tc('saving') : t('save')}
       </AppButton>
diff --git a/client/src/app/[locale]/(private-routes)/nurse/requests/[id]/page.tsx b/client/src/app/[locale]/(private-routes)/nurse/requests/[id]/page.tsx
index ca39f29..66cfe98 100644
--- a/client/src/app/[locale]/(private-routes)/nurse/requests/[id]/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/nurse/requests/[id]/page.tsx
@@ -66,7 +66,7 @@ export default function NurseRequestDetailPage() {
         <Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
           {t('not_found_body')}
         </Typography>
-        <AppButton variant="outlined" color="primary" onClick={() => router.push(`/${locale}${ROUTES.NURSE_REQUESTS}`)} sx={{ m: 0 }}>
+        <AppButton variant="outlined" color="primary" onClick={() => router.push(`/${locale}${ROUTES.NURSE_REQUESTS}`)}>
           {t('inbox_title')}
         </AppButton>
       </Paper>
@@ -132,13 +132,13 @@ export default function NurseRequestDetailPage() {
       <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
         <Stack sx={{ gap: 1.5 }}>
           <DetailRow caption={t('summary_patient')}>
-            <Typography variant="body2" sx={{ fontWeight: 600 }}>
+            <Typography variant="body2" sx={{ fontWeight: 500 }}>
               {request.patientName}
             </Typography>
           </DetailRow>
           <DetailRow caption={t('summary_service')}>
             <Stack sx={{ gap: 0.25, alignItems: 'flex-end' }}>
-              <Typography variant="body2" sx={{ fontWeight: 600 }}>
+              <Typography variant="body2" sx={{ fontWeight: 500 }}>
                 {request.variantLabel}
               </Typography>
               {request.variantPrice ? (
@@ -147,12 +147,12 @@ export default function NurseRequestDetailPage() {
             </Stack>
           </DetailRow>
           <DetailRow caption={t('location_label')}>
-            <Typography variant="body2" sx={{ fontWeight: 600, textAlign: 'end' }}>
+            <Typography variant="body2" sx={{ fontWeight: 500, textAlign: 'end' }}>
               {location}
             </Typography>
           </DetailRow>
           <DetailRow caption={t('summary_when')}>
-            <Typography variant="body2" sx={{ fontWeight: 600, textAlign: 'end' }}>
+            <Typography variant="body2" sx={{ fontWeight: 500, textAlign: 'end' }}>
               {whenLabel}
             </Typography>
           </DetailRow>
@@ -161,7 +161,7 @@ export default function NurseRequestDetailPage() {
               <Chip
                 size="small"
                 label={t(`gender_${request.requiredCaregiverGender}`)}
-                sx={{ bgcolor: 'var(--bal-primary-soft)', color: 'var(--bal-primary)', fontWeight: 600 }}
+                sx={{ bgcolor: 'var(--bal-primary-soft)', color: 'var(--bal-primary)', fontWeight: 500 }}
               />
             </DetailRow>
           ) : null}
@@ -202,7 +202,7 @@ export default function NurseRequestDetailPage() {
               startIcon="verified"
               disabled={acceptRequest.isPending}
               onClick={handleAccept}
-              sx={{ m: 0, flex: 1, py: 1.25 }}
+              sx={{ flex: 1, py: 1.25 }}
             >
               {acceptRequest.isPending ? t('accepting') : t('accept')}
             </AppButton>
@@ -212,7 +212,7 @@ export default function NurseRequestDetailPage() {
               startIcon="rejected"
               disabled={acceptRequest.isPending}
               onClick={() => setRejectOpen(true)}
-              sx={{ m: 0, flex: 1, py: 1.25 }}
+              sx={{ flex: 1, py: 1.25 }}
             >
               {t('reject')}
             </AppButton>
diff --git a/client/src/app/[locale]/(private-routes)/nurse/requests/page.tsx b/client/src/app/[locale]/(private-routes)/nurse/requests/page.tsx
index 8cc52e3..e6ad240 100644
--- a/client/src/app/[locale]/(private-routes)/nurse/requests/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/nurse/requests/page.tsx
@@ -84,7 +84,7 @@ function InboxCard({ item }: { item: BookingRequestListItem }) {
             <Chip
               size="small"
               label={t('required_gender_chip', { gender: t(`gender_${item.requiredCaregiverGender}`) })}
-              sx={{ bgcolor: 'var(--bal-primary-soft)', color: 'var(--bal-primary)', fontWeight: 600 }}
+              sx={{ bgcolor: 'var(--bal-primary-soft)', color: 'var(--bal-primary)', fontWeight: 500 }}
             />
           </Box>
         ) : null}
@@ -105,7 +105,7 @@ function InboxCard({ item }: { item: BookingRequestListItem }) {
           color="primary"
           endIcon="requests"
           onClick={() => router.push(`/${locale}${ROUTES.NURSE_REQUESTS}/${item.id}`)}
-          sx={{ m: 0, alignSelf: 'flex-start' }}
+          sx={{ alignSelf: 'flex-start' }}
         >
           {t('open_detail')}
         </AppButton>
diff --git a/client/src/app/[locale]/(private-routes)/nurse/services/MyServicesList.tsx b/client/src/app/[locale]/(private-routes)/nurse/services/MyServicesList.tsx
index 53759df..dc4205e 100644
--- a/client/src/app/[locale]/(private-routes)/nurse/services/MyServicesList.tsx
+++ b/client/src/app/[locale]/(private-routes)/nurse/services/MyServicesList.tsx
@@ -81,7 +81,7 @@ const MyServicesList: FunctionComponent<MyServicesListProps> = ({ onAdd, onEdit
           </Typography>
         </Box>
         {!isEmpty && !isLoading ? (
-          <AppButton color="primary" variant="contained" startIcon="add" onClick={onAdd} sx={{ m: 0, flexShrink: 0 }}>
+          <AppButton color="primary" variant="contained" startIcon="add" onClick={onAdd} sx={{ flexShrink: 0 }}>
             {t('add')}
           </AppButton>
         ) : null}
diff --git a/client/src/app/[locale]/(private-routes)/nurse/services/PublishGate.tsx b/client/src/app/[locale]/(private-routes)/nurse/services/PublishGate.tsx
index d9fe89d..a920cc8 100644
--- a/client/src/app/[locale]/(private-routes)/nurse/services/PublishGate.tsx
+++ b/client/src/app/[locale]/(private-routes)/nurse/services/PublishGate.tsx
@@ -62,7 +62,6 @@ const PublishGate: FunctionComponent = () => {
           startIcon="publish"
           disabled={!approved}
           onClick={() => enqueueSnackbar(t('publish_done'), { variant: 'success' })}
-          sx={{ m: 0 }}
         >
           {t('publish_cta')}
         </AppButton>
@@ -71,7 +70,6 @@ const PublishGate: FunctionComponent = () => {
             variant="outlined"
             color="primary"
             to={`/${locale}${ROUTES.NURSE_VERIFICATION}`}
-            sx={{ m: 0 }}
           >
             {t('publish_complete_verification')}
           </AppButton>
diff --git a/client/src/app/[locale]/(private-routes)/nurse/services/VariantBuilder.tsx b/client/src/app/[locale]/(private-routes)/nurse/services/VariantBuilder.tsx
index aa0ec69..f2d5879 100644
--- a/client/src/app/[locale]/(private-routes)/nurse/services/VariantBuilder.tsx
+++ b/client/src/app/[locale]/(private-routes)/nurse/services/VariantBuilder.tsx
@@ -260,7 +260,7 @@ const VariantBuilder: FunctionComponent<VariantBuilderProps> = ({ initial, onDon
             borderInlineStartColor: 'var(--bal-warning)',
           }}
         >
-          <Typography variant="body2" sx={{ color: 'var(--bal-warning)', fontWeight: 600 }}>
+          <Typography variant="body2" sx={{ color: 'var(--bal-warning)', fontWeight: 500 }}>
             {t('duplicate_warning')}
           </Typography>
         </Paper>
@@ -306,10 +306,10 @@ const VariantBuilder: FunctionComponent<VariantBuilderProps> = ({ initial, onDon
         {priceStep}
 
         <Stack direction="row" sx={{ gap: 1, justifyContent: 'flex-end' }}>
-          <AppButton variant="text" onClick={onCancel} disabled={submitting} sx={{ m: 0 }}>
+          <AppButton variant="text" onClick={onCancel} disabled={submitting}>
             {tc('cancel')}
           </AppButton>
-          <AppButton color="primary" variant="contained" onClick={submit} disabled={submitting} sx={{ m: 0 }}>
+          <AppButton color="primary" variant="contained" onClick={submit} disabled={submitting}>
             {submitting ? tc('saving') : t('submit_save')}
           </AppButton>
         </Stack>
@@ -350,7 +350,7 @@ const VariantBuilder: FunctionComponent<VariantBuilderProps> = ({ initial, onDon
               <Typography variant="body2" sx={{ color: 'text.secondary' }}>
                 {t('categories_error')}
               </Typography>
-              <AppButton variant="outlined" color="primary" onClick={() => categoriesQuery.refetch()} sx={{ m: 0 }}>
+              <AppButton variant="outlined" color="primary" onClick={() => categoriesQuery.refetch()}>
                 {tc('retry')}
               </AppButton>
             </Stack>
@@ -411,7 +411,7 @@ const VariantBuilder: FunctionComponent<VariantBuilderProps> = ({ initial, onDon
                           : group.isRequired
                             ? 'var(--bal-primary)'
                             : 'text.secondary',
-                        fontWeight: 600,
+                        fontWeight: 500,
                       }}
                     />
                   </Stack>
@@ -435,7 +435,7 @@ const VariantBuilder: FunctionComponent<VariantBuilderProps> = ({ initial, onDon
           )}
 
           {optionsError && missingRequiredGroups.length > 0 ? (
-            <Typography variant="body2" sx={{ color: 'var(--bal-error)', fontWeight: 600 }}>
+            <Typography variant="body2" sx={{ color: 'var(--bal-error)', fontWeight: 500 }}>
               {t('options_incomplete')}
             </Typography>
           ) : null}
@@ -458,7 +458,6 @@ const VariantBuilder: FunctionComponent<VariantBuilderProps> = ({ initial, onDon
           variant="text"
           onClick={activeStep === 0 ? onCancel : () => setActiveStep((step) => step - 1)}
           disabled={submitting}
-          sx={{ m: 0 }}
         >
           {activeStep === 0 ? tc('cancel') : tc('back')}
         </AppButton>
@@ -469,16 +468,15 @@ const VariantBuilder: FunctionComponent<VariantBuilderProps> = ({ initial, onDon
             variant="contained"
             onClick={() => setActiveStep(1)}
             disabled={categoryId == null}
-            sx={{ m: 0 }}
           >
             {t('next')}
           </AppButton>
         ) : activeStep === 1 ? (
-          <AppButton color="primary" variant="contained" onClick={goNextFromOptions} sx={{ m: 0 }}>
+          <AppButton color="primary" variant="contained" onClick={goNextFromOptions}>
             {t('next')}
           </AppButton>
         ) : (
-          <AppButton color="primary" variant="contained" onClick={submit} disabled={submitting} sx={{ m: 0 }}>
+          <AppButton color="primary" variant="contained" onClick={submit} disabled={submitting}>
             {submitting ? tc('saving') : t('submit_create')}
           </AppButton>
         )}
diff --git a/client/src/app/[locale]/(private-routes)/nurse/verification/VerificationChecklist.tsx b/client/src/app/[locale]/(private-routes)/nurse/verification/VerificationChecklist.tsx
index a31239d..8306cb6 100644
--- a/client/src/app/[locale]/(private-routes)/nurse/verification/VerificationChecklist.tsx
+++ b/client/src/app/[locale]/(private-routes)/nurse/verification/VerificationChecklist.tsx
@@ -126,7 +126,7 @@ const StepRow: FunctionComponent<{ step: VerificationStep; highlighted: boolean
           color="primary"
           endIcon="edit"
           to={`/${locale}${route}`}
-          sx={{ m: 0, alignSelf: 'flex-start' }}
+          sx={{ alignSelf: 'flex-start' }}
         >
           {step.status === 'failed' || step.status === 'expired' ? t('row_fix') : t('row_go')}
         </AppButton>
diff --git a/client/src/app/[locale]/(private-routes)/nurse/verification/credentials/page.tsx b/client/src/app/[locale]/(private-routes)/nurse/verification/credentials/page.tsx
index 23957af..26d178f 100644
--- a/client/src/app/[locale]/(private-routes)/nurse/verification/credentials/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/nurse/verification/credentials/page.tsx
@@ -96,7 +96,7 @@ export default function CredentialsSubmitPage() {
         <Typography variant="body2" sx={{ color: 'text.secondary' }}>
           {t('credentials_needs_start')}
         </Typography>
-        <AppButton color="primary" variant="contained" to={`/${locale}${ROUTES.NURSE_VERIFICATION}`} sx={{ m: 0, alignSelf: 'flex-start' }}>
+        <AppButton color="primary" variant="contained" to={`/${locale}${ROUTES.NURSE_VERIFICATION}`} sx={{ alignSelf: 'flex-start' }}>
           {t('back_to_checklist')}
         </AppButton>
       </Box>
@@ -168,7 +168,7 @@ export default function CredentialsSubmitPage() {
                 label={t.has(`specialty_${preset}`) ? t(`specialty_${preset}`) : preset}
                 onClick={() => toggleSpecialty(preset)}
                 sx={{
-                  fontWeight: 600,
+                  fontWeight: 500,
                   backgroundColor: selected ? 'var(--bal-primary)' : 'var(--bal-primary-soft)',
                   color: selected ? 'var(--bal-primary-contrast)' : 'var(--bal-primary)',
                 }}
@@ -182,7 +182,7 @@ export default function CredentialsSubmitPage() {
                 key={value}
                 label={value}
                 onDelete={() => toggleSpecialty(value)}
-                sx={{ fontWeight: 600, backgroundColor: 'var(--bal-primary)', color: 'var(--bal-primary-contrast)' }}
+                sx={{ fontWeight: 500, backgroundColor: 'var(--bal-primary)', color: 'var(--bal-primary-contrast)' }}
               />
             ))}
         </Stack>
@@ -199,7 +199,7 @@ export default function CredentialsSubmitPage() {
               }
             }}
           />
-          <AppButton variant="outlined" color="primary" startIcon="add" onClick={addCustomSpecialty} sx={{ m: 0 }}>
+          <AppButton variant="outlined" color="primary" startIcon="add" onClick={addCustomSpecialty}>
             {t('specialty_add')}
           </AppButton>
         </Stack>
@@ -253,11 +253,10 @@ export default function CredentialsSubmitPage() {
           startIcon="license"
           onClick={handleSubmit}
           disabled={submitCredentials.isPending || !anyUploaded}
-          sx={{ m: 0 }}
         >
           {submitCredentials.isPending ? t('credentials_submitting') : t('credentials_submit')}
         </AppButton>
-        <AppButton variant="text" color="primary" to={`/${locale}${ROUTES.NURSE_VERIFICATION}`} sx={{ m: 0 }}>
+        <AppButton variant="text" color="primary" to={`/${locale}${ROUTES.NURSE_VERIFICATION}`}>
           {t('back_to_checklist')}
         </AppButton>
       </Stack>
diff --git a/client/src/app/[locale]/(private-routes)/nurse/verification/identity/page.tsx b/client/src/app/[locale]/(private-routes)/nurse/verification/identity/page.tsx
index f0116f9..aab47fc 100644
--- a/client/src/app/[locale]/(private-routes)/nurse/verification/identity/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/nurse/verification/identity/page.tsx
@@ -143,11 +143,10 @@ export default function IdentitySubmitPage() {
           startIcon="identity"
           onClick={handleSubmit}
           disabled={!canSubmit}
-          sx={{ m: 0 }}
         >
           {submitIdentity.isPending ? t('identity_submitting') : t('identity_submit')}
         </AppButton>
-        <AppButton variant="text" color="primary" to={`/${locale}${ROUTES.NURSE_VERIFICATION}`} sx={{ m: 0 }}>
+        <AppButton variant="text" color="primary" to={`/${locale}${ROUTES.NURSE_VERIFICATION}`}>
           {t('back_to_checklist')}
         </AppButton>
       </Stack>
diff --git a/client/src/app/[locale]/(private-routes)/nurse/verification/page.tsx b/client/src/app/[locale]/(private-routes)/nurse/verification/page.tsx
index 15291e4..f6bfaf4 100644
--- a/client/src/app/[locale]/(private-routes)/nurse/verification/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/nurse/verification/page.tsx
@@ -65,7 +65,7 @@ export default function NurseVerificationPage() {
         <AppAlert
           severity="error"
           action={
-            <AppButton variant="text" color="inherit" onClick={() => refetch()} sx={{ m: 0 }}>
+            <AppButton variant="text" color="inherit" onClick={() => refetch()}>
               {t('retry')}
             </AppButton>
           }
@@ -170,7 +170,7 @@ function Approved({ onPublish }: { onPublish: () => void }) {
         variant="contained"
         startIcon="publish"
         onClick={onPublish}
-        sx={{ m: 0, alignSelf: 'flex-start' }}
+        sx={{ alignSelf: 'flex-start' }}
       >
         {t('approved_cta')}
       </AppButton>
@@ -200,7 +200,7 @@ function ContinueCta({
   const route = nextActionRoute(status);
   if (route == null) return null;
   return (
-    <AppButton color="primary" variant="contained" onClick={onContinue} sx={{ m: 0, alignSelf: 'flex-start' }}>
+    <AppButton color="primary" variant="contained" onClick={onContinue} sx={{ alignSelf: 'flex-start' }}>
       {index != null ? t('continue_step', { n: index }) : t('continue')}
     </AppButton>
   );
@@ -225,10 +225,10 @@ function MockAdminControls({ onApprove, onReject }: { onApprove: () => void; onR
         {t('mock_admin_title')}
       </Typography>
       <Stack direction="row" sx={{ gap: 1, flexWrap: 'wrap' }}>
-        <AppButton variant="outlined" color="primary" onClick={onApprove} sx={{ m: 0 }}>
+        <AppButton variant="outlined" color="primary" onClick={onApprove}>
           {t('mock_admin_approve')}
         </AppButton>
-        <AppButton variant="outlined" color="error" onClick={onReject} sx={{ m: 0 }}>
+        <AppButton variant="outlined" color="error" onClick={onReject}>
           {t('mock_admin_reject')}
         </AppButton>
       </Stack>
diff --git a/client/src/app/[locale]/(private-routes)/nurse/verification/review/page.tsx b/client/src/app/[locale]/(private-routes)/nurse/verification/review/page.tsx
index 0d32eca..59dc652 100644
--- a/client/src/app/[locale]/(private-routes)/nurse/verification/review/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/nurse/verification/review/page.tsx
@@ -52,7 +52,7 @@ export default function UnderReviewPage() {
           {isApproved ? t('review_approved_body') : t('review_body')}
         </Typography>
         {!isApproved ? (
-          <Typography variant="body2" sx={{ fontWeight: 600, color: 'var(--bal-warning)' }}>
+          <Typography variant="body2" sx={{ fontWeight: 500, color: 'var(--bal-warning)' }}>
             {t('review_eta')}
           </Typography>
         ) : null}
@@ -83,7 +83,7 @@ export default function UnderReviewPage() {
         variant="contained"
         startIcon="verification"
         to={`/${locale}${ROUTES.NURSE_VERIFICATION}`}
-        sx={{ m: 0, alignSelf: 'flex-start' }}
+        sx={{ alignSelf: 'flex-start' }}
       >
         {t('review_view_status')}
       </AppButton>
diff --git a/client/src/app/[locale]/(private-routes)/nurse/visits/[id]/NurseVisitNotesPanel.tsx b/client/src/app/[locale]/(private-routes)/nurse/visits/[id]/NurseVisitNotesPanel.tsx
index 2426717..1ceab9f 100644
--- a/client/src/app/[locale]/(private-routes)/nurse/visits/[id]/NurseVisitNotesPanel.tsx
+++ b/client/src/app/[locale]/(private-routes)/nurse/visits/[id]/NurseVisitNotesPanel.tsx
@@ -120,7 +120,7 @@ export default function NurseVisitNotesPanel({ bookingId }: { bookingId: number
               startIcon="notes"
               onClick={submit}
               disabled={createNote.isPending || !note.trim()}
-              sx={{ m: 0, alignSelf: 'flex-end' }}
+              sx={{ alignSelf: 'flex-end' }}
             >
               {createNote.isPending ? tc('saving') : t('note_submit')}
             </AppButton>
diff --git a/client/src/app/[locale]/(private-routes)/nurse/visits/page.tsx b/client/src/app/[locale]/(private-routes)/nurse/visits/page.tsx
index fc36620..b6ecc9d 100644
--- a/client/src/app/[locale]/(private-routes)/nurse/visits/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/nurse/visits/page.tsx
@@ -89,7 +89,7 @@ function TodayVisitCard({ item, evv }: { item: BookingSessionListItemDto; evv: R
         color="primary"
         endIcon="bookings"
         onClick={() => router.push(`/${locale}${ROUTES.NURSE_VISITS}/${item.bookingId}`)}
-        sx={{ m: 0, alignSelf: 'flex-start' }}
+        sx={{ alignSelf: 'flex-start' }}
       >
         {t('view_booking')}
       </AppButton>
diff --git a/client/src/app/[locale]/(private-routes)/partner/page.tsx b/client/src/app/[locale]/(private-routes)/partner/page.tsx
index 7dc4c4e..3a22272 100644
--- a/client/src/app/[locale]/(private-routes)/partner/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/partner/page.tsx
@@ -117,11 +117,11 @@ function DetailRow({ label, value, ltr }: { label: string; value: string | null;
         {label}
       </Typography>
       {ltr ? (
-        <Typography component="span" dir="ltr" variant="body2" sx={{ fontWeight: 600, fontFamily: 'monospace' }}>
+        <Typography component="span" dir="ltr" variant="body2" sx={{ fontWeight: 500, fontFamily: 'monospace' }}>
           {value ?? '—'}
         </Typography>
       ) : (
-        <Typography variant="body2" sx={{ fontWeight: 600 }}>
+        <Typography variant="body2" sx={{ fontWeight: 500 }}>
           {value ?? '—'}
         </Typography>
       )}
diff --git a/client/src/app/[locale]/(private-routes)/partner/settlement/page.tsx b/client/src/app/[locale]/(private-routes)/partner/settlement/page.tsx
index 1b08c8e..741d9da 100644
--- a/client/src/app/[locale]/(private-routes)/partner/settlement/page.tsx
+++ b/client/src/app/[locale]/(private-routes)/partner/settlement/page.tsx
@@ -65,7 +65,7 @@ export default function PartnerSettlementPage() {
           <Typography variant="body2" sx={{ color: 'text.secondary' }}>
             {t('settlement_iban')}
           </Typography>
-          <Typography component="span" dir="ltr" variant="body2" sx={{ fontWeight: 600, fontFamily: 'monospace' }}>
+          <Typography component="span" dir="ltr" variant="body2" sx={{ fontWeight: 500, fontFamily: 'monospace' }}>
             {c.settlementIbanMasked ?? '—'}
           </Typography>
         </Stack>
diff --git a/client/src/app/[locale]/layout.tsx b/client/src/app/[locale]/layout.tsx
index 8ab32fc..f7468b1 100644
--- a/client/src/app/[locale]/layout.tsx
+++ b/client/src/app/[locale]/layout.tsx
@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import type { Metadata, Viewport } from 'next';
 import localFont from 'next/font/local';
+import { Space_Grotesk } from 'next/font/google';
 import { setRequestLocale, getMessages } from 'next-intl/server';
 import { NextIntlClientProvider } from 'next-intl';
 import { getThemeMode } from '@/lib/cookies/server';
@@ -47,8 +48,22 @@ const mikhak = localFont({
   preload: false,
 });
 
+// EN brand font — Space Grotesk. Self-hosted by next/font/google at build
+// time (no runtime Google Fonts request). Same discipline as Mikhak:
+// preload: false + conditional className below so it is only fetched on `en`.
+const spaceGrotesk = Space_Grotesk({
+  subsets: ['latin'],
+  weight: ['400', '500', '700'],
+  display: 'swap',
+  variable: '--font-space-grotesk',
+  preload: false,
+});
+
 export const viewport: Viewport = {
-  themeColor: BRAND.teal,
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: BRAND.teal },
+    { media: '(prefers-color-scheme: dark)', color: BRAND.tealDeep },
+  ],
 };
 
 export const metadata: Metadata = {
@@ -77,9 +92,9 @@ export default async function LocaleLayout({
   const authState = await getServerAuthState();
   const dir = getDirection(safeLocale);
 
-  // Only attach the Mikhak font variable on RTL (Persian) routes so the
-  // Persian typeface is not loaded for English pages.
-  const fontClassName = safeLocale === 'fa' ? mikhak.variable : undefined;
+  // Each locale's brand font variable is attached only on its own routes —
+  // Mikhak never ships to /en, Space Grotesk never ships to /fa.
+  const fontClassName = safeLocale === 'fa' ? mikhak.variable : spaceGrotesk.variable;
 
   return (
     <html
diff --git a/client/src/app/favicon.ico b/client/src/app/favicon.ico
index a298d56..6589b8a 100644
Binary files a/client/src/app/favicon.ico and b/client/src/app/favicon.ico differ
diff --git a/client/src/app/globals.css b/client/src/app/globals.css
index 30b6834..bb8d5fb 100644
--- a/client/src/app/globals.css
+++ b/client/src/app/globals.css
@@ -4,14 +4,27 @@
   margin: 0;
 }
 
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-  max-height: 100vh;
-}
-
+/*
+ * AppLink is the only place link affordance (color, underline) is decided —
+ * this reset keeps a bare <a> (e.g. inside rich text) from inheriting the
+ * browser's default blue/underline before AppLink's own styling applies.
+ */
 a {
   color: inherit;
   text-decoration: none;
 }
+
+::selection {
+  background-color: var(--bal-primary-soft);
+  color: var(--bal-text-primary);
+}
+
+/*
+ * Directional icons (back/chevron_start, …) are authored for LTR and mirror
+ * under RTL. AppIcon sets `data-icon-directional` for every name registered
+ * in AppIcon/config.ts's DIRECTIONAL_ICONS — this is the only flip rule in
+ * the app; never hand-roll a per-component mirror.
+ */
+[dir='rtl'] [data-icon-directional] {
+  transform: scaleX(-1);
+}
diff --git a/client/src/components/BankStatusPanel/BankStatusPanel.tsx b/client/src/components/BankStatusPanel/BankStatusPanel.tsx
index aa84749..ce74db5 100644
--- a/client/src/components/BankStatusPanel/BankStatusPanel.tsx
+++ b/client/src/components/BankStatusPanel/BankStatusPanel.tsx
@@ -93,7 +93,7 @@ const BankStatusPanel: FunctionComponent<BankStatusPanelProps> = ({
               {ibanLabel}
             </Typography>
           ) : null}
-          <Typography sx={{ fontWeight: 600, letterSpacing: 1 }} dir="ltr">
+          <Typography sx={{ fontWeight: 500, letterSpacing: 1 }} dir="ltr">
             {ibanMasked}
           </Typography>
           {bankName ? (
@@ -105,7 +105,7 @@ const BankStatusPanel: FunctionComponent<BankStatusPanelProps> = ({
       ) : null}
 
       {status === 'mismatch' && onReenter && reenterLabel ? (
-        <AppButton color="primary" variant="outlined" startIcon="bank" onClick={onReenter} sx={{ m: 0, alignSelf: 'flex-start' }}>
+        <AppButton color="primary" variant="outlined" startIcon="bank" onClick={onReenter} sx={{ alignSelf: 'flex-start' }}>
           {reenterLabel}
         </AppButton>
       ) : null}
diff --git a/client/src/components/BookingRequestSummaryCard/BookingRequestSummaryCard.tsx b/client/src/components/BookingRequestSummaryCard/BookingRequestSummaryCard.tsx
index f021b56..3b2dc38 100644
--- a/client/src/components/BookingRequestSummaryCard/BookingRequestSummaryCard.tsx
+++ b/client/src/components/BookingRequestSummaryCard/BookingRequestSummaryCard.tsx
@@ -96,14 +96,14 @@ const BookingRequestSummaryCard: FunctionComponent<BookingRequestSummaryCardProp
 
         <Stack sx={{ gap: 1.5 }}>
           <SummaryRow caption={t('summary_patient')}>
-            <Typography variant="body2" sx={{ fontWeight: 600 }}>
+            <Typography variant="body2" sx={{ fontWeight: 500 }}>
               {patientName}
             </Typography>
           </SummaryRow>
 
           <SummaryRow caption={t('summary_service')}>
             <Stack sx={{ gap: 0.25, alignItems: 'flex-end' }}>
-              <Typography variant="body2" sx={{ fontWeight: 600 }}>
+              <Typography variant="body2" sx={{ fontWeight: 500 }}>
                 {variantLabel}
               </Typography>
               {variantPrice ? (
@@ -113,13 +113,13 @@ const BookingRequestSummaryCard: FunctionComponent<BookingRequestSummaryCardProp
           </SummaryRow>
 
           <SummaryRow caption={t('summary_address')}>
-            <Typography variant="body2" sx={{ fontWeight: 600, textAlign: 'end' }}>
+            <Typography variant="body2" sx={{ fontWeight: 500, textAlign: 'end' }}>
               {addressLabel}
             </Typography>
           </SummaryRow>
 
           <SummaryRow caption={t('summary_when')}>
-            <Typography variant="body2" sx={{ fontWeight: 600, textAlign: 'end' }}>
+            <Typography variant="body2" sx={{ fontWeight: 500, textAlign: 'end' }}>
               {whenLabel}
             </Typography>
           </SummaryRow>
diff --git a/client/src/components/CancellationPolicyDisclosure/CancellationPolicyDisclosure.tsx b/client/src/components/CancellationPolicyDisclosure/CancellationPolicyDisclosure.tsx
index 59531d5..86978b0 100644
--- a/client/src/components/CancellationPolicyDisclosure/CancellationPolicyDisclosure.tsx
+++ b/client/src/components/CancellationPolicyDisclosure/CancellationPolicyDisclosure.tsx
@@ -52,7 +52,7 @@ const CancellationPolicyDisclosure: FunctionComponent<CancellationPolicyDisclosu
           <Typography variant="body2" sx={{ color: 'text.secondary' }}>
             {t(`lead_${preview.leadTimeLabel}`)}
           </Typography>
-          <Typography variant="body2" sx={{ color: 'var(--bal-secondary)', fontWeight: 600 }}>
+          <Typography variant="body2" sx={{ color: 'var(--bal-secondary)', fontWeight: 500 }}>
             {t('fee_percent', { percent: feePercent })}
           </Typography>
         </Stack>
diff --git a/client/src/components/CountdownTimer/CountdownTimer.tsx b/client/src/components/CountdownTimer/CountdownTimer.tsx
index 5a5d024..40a5336 100644
--- a/client/src/components/CountdownTimer/CountdownTimer.tsx
+++ b/client/src/components/CountdownTimer/CountdownTimer.tsx
@@ -69,7 +69,7 @@ const CountdownTimer: FunctionComponent<CountdownTimerProps> = ({
     return (
       <Stack direction="row" sx={{ gap: 0.75, alignItems: 'center', color: 'text.secondary' }}>
         <AppIcon icon="pending" size={18} color="var(--bal-text-secondary)" />
-        <Typography variant="body2" sx={{ fontWeight: 600 }}>
+        <Typography variant="body2" sx={{ fontWeight: 500 }}>
           {elapsedText}
         </Typography>
       </Stack>
@@ -92,7 +92,7 @@ const CountdownTimer: FunctionComponent<CountdownTimerProps> = ({
   return (
     <Stack sx={{ gap: 0.25, alignItems: 'center' }}>
       {label ? (
-        <Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 600 }}>
+        <Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 500 }}>
           {label}
         </Typography>
       ) : null}
diff --git a/client/src/components/DocumentUpload/DocumentUpload.tsx b/client/src/components/DocumentUpload/DocumentUpload.tsx
index 71fb6dd..8388bbe 100644
--- a/client/src/components/DocumentUpload/DocumentUpload.tsx
+++ b/client/src/components/DocumentUpload/DocumentUpload.tsx
@@ -185,7 +185,7 @@ const DocumentUpload: FunctionComponent<DocumentUploadProps> = ({
             startIcon="upload"
             onClick={openPicker}
             disabled={disabled}
-            sx={{ m: 0, alignSelf: 'flex-start' }}
+            sx={{ alignSelf: 'flex-start' }}
           >
             {t('upload_reupload')}
           </AppButton>
@@ -194,7 +194,7 @@ const DocumentUpload: FunctionComponent<DocumentUploadProps> = ({
         <Paper elevation={0} data-upload-state="uploading" sx={uploadedSx}>
           <Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
             <AppIcon icon="upload" size={20} color="var(--bal-primary)" />
-            <Typography variant="body2" sx={{ fontWeight: 600, flexGrow: 1, wordBreak: 'break-all' }}>
+            <Typography variant="body2" sx={{ fontWeight: 500, flexGrow: 1, wordBreak: 'break-all' }}>
               {fileName}
             </Typography>
             <Typography variant="caption" sx={{ color: 'text.secondary' }}>
@@ -220,7 +220,7 @@ const DocumentUpload: FunctionComponent<DocumentUploadProps> = ({
               <AppIcon icon="document" size={28} color="var(--bal-primary)" />
             )}
             <Stack sx={{ gap: 0.25, flexGrow: 1, minWidth: 0 }}>
-              <Typography variant="body2" sx={{ fontWeight: 600, wordBreak: 'break-all' }}>
+              <Typography variant="body2" sx={{ fontWeight: 500, wordBreak: 'break-all' }}>
                 {uploadedName}
               </Typography>
               <Stack direction="row" sx={{ gap: 0.5, alignItems: 'center' }}>
@@ -230,7 +230,7 @@ const DocumentUpload: FunctionComponent<DocumentUploadProps> = ({
                 </Typography>
               </Stack>
             </Stack>
-            <AppButton variant="text" color="primary" onClick={openPicker} disabled={disabled} sx={{ m: 0 }}>
+            <AppButton variant="text" color="primary" onClick={openPicker} disabled={disabled}>
               {t('upload_change')}
             </AppButton>
           </Stack>
@@ -253,7 +253,7 @@ const DocumentUpload: FunctionComponent<DocumentUploadProps> = ({
             startIcon="refresh"
             onClick={openPicker}
             disabled={disabled}
-            sx={{ m: 0, alignSelf: 'flex-start' }}
+            sx={{ alignSelf: 'flex-start' }}
           >
             {t('upload_retry')}
           </AppButton>
@@ -287,7 +287,7 @@ const DocumentUpload: FunctionComponent<DocumentUploadProps> = ({
           }}
         >
           <AppIcon icon={capture ? 'camera' : 'upload'} size={28} color="var(--bal-primary)" />
-          <Typography variant="body2" sx={{ fontWeight: 600 }}>
+          <Typography variant="body2" sx={{ fontWeight: 700 }}>
             {capture ? t('upload_capture') : t('upload_choose')}
           </Typography>
           <Typography variant="caption" sx={{ color: 'text.secondary' }}>
diff --git a/client/src/components/EarningsBalanceHeader/EarningsBalanceHeader.tsx b/client/src/components/EarningsBalanceHeader/EarningsBalanceHeader.tsx
index d0b6aed..e8355b9 100644
--- a/client/src/components/EarningsBalanceHeader/EarningsBalanceHeader.tsx
+++ b/client/src/components/EarningsBalanceHeader/EarningsBalanceHeader.tsx
@@ -59,7 +59,7 @@ const EarningsBalanceHeader: FunctionComponent<EarningsBalanceHeaderProps> = ({
         <Stack sx={{ gap: 0.75 }}>
           <Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
             <AppIcon icon={isOwed ? 'warning' : 'wallet'} size={20} color={accent} />
-            <Typography variant="subtitle2" sx={{ color: 'text.secondary', fontWeight: 600 }}>
+            <Typography variant="subtitle2" sx={{ color: 'text.secondary', fontWeight: 500 }}>
               {isOwed ? t('balance_owed_label') : t('balance_net_label')}
             </Typography>
           </Stack>
@@ -67,7 +67,7 @@ const EarningsBalanceHeader: FunctionComponent<EarningsBalanceHeaderProps> = ({
             <Typography component="span" sx={{ fontWeight: 800, fontSize: '2rem', color: accent }}>
               {formatIrrToToman(magnitude, locale)}
             </Typography>
-            <Typography component="span" variant="subtitle1" sx={{ color: 'text.secondary', fontWeight: 600 }}>
+            <Typography component="span" variant="subtitle1" sx={{ color: 'text.secondary', fontWeight: 500 }}>
               {tc('currency_toman')}
             </Typography>
           </Stack>
@@ -101,7 +101,7 @@ const EarningsBalanceHeader: FunctionComponent<EarningsBalanceHeaderProps> = ({
             <Stack sx={{ gap: 0.75 }}>
               <Stack direction="row" sx={{ gap: 0.75, alignItems: 'center' }}>
                 <AppIcon icon={bucket.icon} size={16} color={bucket.token} />
-                <Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 600 }}>
+                <Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 500 }}>
                   {t(`bucket_${bucket.key}`)}
                 </Typography>
               </Stack>
diff --git a/client/src/components/EarningsRow/EarningsRow.tsx b/client/src/components/EarningsRow/EarningsRow.tsx
index cfc1427..1300936 100644
--- a/client/src/components/EarningsRow/EarningsRow.tsx
+++ b/client/src/components/EarningsRow/EarningsRow.tsx
@@ -105,7 +105,6 @@ const EarningsRow: FunctionComponent<EarningsRowProps> = ({ item, onViewBooking,
             color="primary"
             endIcon="visits"
             onClick={() => onViewBooking(item.bookingId)}
-            sx={{ m: 0 }}
           >
             {t('view_booking')}
           </AppButton>
@@ -178,7 +177,6 @@ const StateAffordance: FunctionComponent<{
               color="primary"
               endIcon="wallet"
               onClick={() => onViewPayout(item.nursePayoutId as number)}
-              sx={{ m: 0 }}
             >
               {t('view_payout')}
             </AppButton>
diff --git a/client/src/components/GenderToggle/GenderToggle.tsx b/client/src/components/GenderToggle/GenderToggle.tsx
index 5c20c1a..7868042 100644
--- a/client/src/components/GenderToggle/GenderToggle.tsx
+++ b/client/src/components/GenderToggle/GenderToggle.tsx
@@ -44,7 +44,7 @@ const GenderToggle: FunctionComponent<GenderToggleProps> = ({
       '& .MuiToggleButton-root': {
         flex: 1,
         py: 1.25,
-        fontWeight: 600,
+        fontWeight: 700,
         borderColor: error ? 'var(--bal-error)' : undefined,
       },
     }}
diff --git a/client/src/components/PatientForm/PatientForm.tsx b/client/src/components/PatientForm/PatientForm.tsx
index 515d964..fe61a7c 100644
--- a/client/src/components/PatientForm/PatientForm.tsx
+++ b/client/src/components/PatientForm/PatientForm.tsx
@@ -161,7 +161,7 @@ const PatientForm: FunctionComponent<PatientFormProps> = ({
 
       <Stack direction="row" sx={{ gap: 1, justifyContent: 'flex-end' }}>
         {onCancel ? (
-          <AppButton variant="text" onClick={onCancel} disabled={submitting} sx={{ m: 0 }}>
+          <AppButton variant="text" onClick={onCancel} disabled={submitting}>
             {cancelLabel}
           </AppButton>
         ) : null}
@@ -170,7 +170,6 @@ const PatientForm: FunctionComponent<PatientFormProps> = ({
           variant="contained"
           onClick={handleSubmit}
           disabled={submitting}
-          sx={{ m: 0 }}
         >
           {submitLabel}
         </AppButton>
diff --git a/client/src/components/PatientHeader/PatientHeader.tsx b/client/src/components/PatientHeader/PatientHeader.tsx
index 6e57f01..7408508 100644
--- a/client/src/components/PatientHeader/PatientHeader.tsx
+++ b/client/src/components/PatientHeader/PatientHeader.tsx
@@ -43,7 +43,7 @@ const PatientHeader: FunctionComponent<PatientHeaderProps> = ({
           {displayName}
         </Typography>
         {relationLabel ? (
-          <Chip size="small" label={relationLabel} sx={{ bgcolor: 'var(--bal-primary-soft)', fontWeight: 600 }} />
+          <Chip size="small" label={relationLabel} sx={{ bgcolor: 'var(--bal-primary-soft)', fontWeight: 500 }} />
         ) : null}
       </Stack>
 
diff --git a/client/src/components/PayoutHistoryRow/PayoutHistoryRow.tsx b/client/src/components/PayoutHistoryRow/PayoutHistoryRow.tsx
index 2b33924..0d7ce47 100644
--- a/client/src/components/PayoutHistoryRow/PayoutHistoryRow.tsx
+++ b/client/src/components/PayoutHistoryRow/PayoutHistoryRow.tsx
@@ -47,7 +47,7 @@ const PayoutHistoryRow: FunctionComponent<PayoutHistoryRowProps> = ({ item, onOp
           sx={{ justifyContent: 'space-between', alignItems: 'flex-start', gap: 1.5, flexWrap: 'wrap' }}
         >
           <Stack sx={{ gap: 0.25, minWidth: 0 }}>
-            <Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 600 }}>
+            <Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 500 }}>
               {t('payout_net_amount')}
             </Typography>
             <Typography variant="subtitle1" sx={{ fontWeight: 800 }}>
@@ -110,7 +110,7 @@ const PayoutHistoryRow: FunctionComponent<PayoutHistoryRowProps> = ({ item, onOp
         ) : null}
 
         <Stack direction="row" sx={{ justifyContent: 'flex-end' }}>
-          <AppButton variant="text" color="primary" endIcon="wallet" onClick={() => onOpen(item.id)} sx={{ m: 0 }}>
+          <AppButton variant="text" color="primary" endIcon="wallet" onClick={() => onOpen(item.id)}>
             {t('view_payout_detail')}
           </AppButton>
         </Stack>
@@ -124,7 +124,7 @@ const MetaLine: FunctionComponent<{ label: string; children: ReactNode }> = ({ l
     <Typography variant="body2" sx={{ color: 'text.secondary' }}>
       {label}
     </Typography>
-    <Typography variant="body2" sx={{ fontWeight: 600 }}>
+    <Typography variant="body2" sx={{ fontWeight: 500 }}>
       {children}
     </Typography>
   </Stack>
diff --git a/client/src/components/PriceBreakdown/PriceBreakdown.tsx b/client/src/components/PriceBreakdown/PriceBreakdown.tsx
index 123ac56..0c01ce8 100644
--- a/client/src/components/PriceBreakdown/PriceBreakdown.tsx
+++ b/client/src/components/PriceBreakdown/PriceBreakdown.tsx
@@ -49,7 +49,7 @@ const PriceBreakdown: FunctionComponent<PriceBreakdownProps> = ({ rows, totalLab
             <Typography variant="body2" sx={{ color: 'text.secondary' }}>
               {row.label}
             </Typography>
-            <Typography variant="body2" sx={{ fontWeight: 600 }}>
+            <Typography variant="body2" sx={{ fontWeight: 500 }}>
               {formatIrrToToman(row.amountIrr, locale)}
             </Typography>
           </Stack>
diff --git a/client/src/components/PriceDisplay/PriceDisplay.tsx b/client/src/components/PriceDisplay/PriceDisplay.tsx
index a43927d..bae3074 100644
--- a/client/src/components/PriceDisplay/PriceDisplay.tsx
+++ b/client/src/components/PriceDisplay/PriceDisplay.tsx
@@ -47,12 +47,12 @@ const PriceDisplay: FunctionComponent<PriceDisplayProps> = ({
     <Stack sx={{ gap: 0.25, alignItems: align === 'center' ? 'center' : 'flex-start' }}>
       <Typography component="p" sx={{ fontWeight: 700 }}>
         {amount} {tc('currency_toman')}{' '}
-        <Typography component="span" variant="body2" sx={{ color: 'text.secondary', fontWeight: 600 }}>
+        <Typography component="span" variant="body2" sx={{ color: 'text.secondary', fontWeight: 500 }}>
           {unitLabel}
         </Typography>
       </Typography>
       {hasEstimate ? (
-        <Typography variant="caption" sx={{ color: 'var(--bal-primary)', fontWeight: 600 }}>
+        <Typography variant="caption" sx={{ color: 'var(--bal-primary)', fontWeight: 500 }}>
           {t('estimate_label')}: {total} {tc('currency_toman')} ·{' '}
           {t('estimate_for', { count: countLabel, unit: t(`count_${priceUnit}`) })}
         </Typography>
diff --git a/client/src/components/RefundEtaBanner/RefundEtaBanner.tsx b/client/src/components/RefundEtaBanner/RefundEtaBanner.tsx
index dd13878..f5b0d1f 100644
--- a/client/src/components/RefundEtaBanner/RefundEtaBanner.tsx
+++ b/client/src/components/RefundEtaBanner/RefundEtaBanner.tsx
@@ -52,7 +52,7 @@ const RefundEtaBanner: FunctionComponent<RefundEtaBannerProps> = ({ channel, eta
         </Typography>
         <Typography variant="body2">{t(copy.bodyKey)}</Typography>
         {channel === 'bnpl_revert' && (
-          <Typography variant="caption" sx={{ fontWeight: 600 }} data-testid="refund-eta-window">
+          <Typography variant="caption" sx={{ fontWeight: 500 }} data-testid="refund-eta-window">
             {t('eta_business_days')}
             {eta ? ` · ${t('eta_expected_label', { date: formatShamsiDate(eta, locale) })}` : ''}
           </Typography>
diff --git a/client/src/components/RefundStatusCard/RefundStatusCard.tsx b/client/src/components/RefundStatusCard/RefundStatusCard.tsx
index 0bba06c..072dd7b 100644
--- a/client/src/components/RefundStatusCard/RefundStatusCard.tsx
+++ b/client/src/components/RefundStatusCard/RefundStatusCard.tsx
@@ -62,7 +62,7 @@ const RefundStatusCard: FunctionComponent<RefundStatusCardProps> = ({ refund })
             </Typography>
             <Typography variant="body2">{t('failed_body')}</Typography>
             {refund.externalRevertReference && (
-              <Typography variant="caption" sx={{ fontWeight: 600, direction: 'ltr' }}>
+              <Typography variant="caption" sx={{ fontWeight: 500, direction: 'ltr' }}>
                 {t('reference_label')}: {refund.externalRevertReference}
               </Typography>
             )}
@@ -97,7 +97,7 @@ const RefundStatusCard: FunctionComponent<RefundStatusCardProps> = ({ refund })
                     <Typography variant="body2" sx={{ color: 'text.secondary' }}>
                       {t('reference_label')}
                     </Typography>
-                    <Typography variant="body2" sx={{ fontWeight: 600, direction: 'ltr' }}>
+                    <Typography variant="body2" sx={{ fontWeight: 500, direction: 'ltr' }}>
                       {refund.externalRevertReference}
                     </Typography>
                   </Stack>
diff --git a/client/src/components/RelationSelect/RelationSelect.tsx b/client/src/components/RelationSelect/RelationSelect.tsx
index a7ce0fb..9420ae7 100644
--- a/client/src/components/RelationSelect/RelationSelect.tsx
+++ b/client/src/components/RelationSelect/RelationSelect.tsx
@@ -56,7 +56,7 @@ const RelationSelect: FunctionComponent<RelationSelectProps> = ({ options, value
           }}
         >
           {option.icon ? <AppIcon icon={option.icon} size={26} color="var(--bal-primary)" /> : null}
-          <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
+          <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
             {option.label}
           </Typography>
         </Paper>
diff --git a/client/src/components/ServicePriceRow/ServicePriceRow.tsx b/client/src/components/ServicePriceRow/ServicePriceRow.tsx
index a5b9668..a11a155 100644
--- a/client/src/components/ServicePriceRow/ServicePriceRow.tsx
+++ b/client/src/components/ServicePriceRow/ServicePriceRow.tsx
@@ -38,7 +38,7 @@ const ServicePriceRow: FunctionComponent<ServicePriceRowProps> = ({
       borderColor: 'divider',
     }}
   >
-    <Typography variant="body1" sx={{ fontWeight: 600, flexGrow: 1 }}>
+    <Typography variant="body1" sx={{ fontWeight: 500, flexGrow: 1 }}>
       {displayName}
     </Typography>
     <PriceDisplay price={priceIrr} priceUnit={priceUnit} sessionCount={sessionCount} align="start" />
diff --git a/client/src/components/StatusChip/StatusChip.tsx b/client/src/components/StatusChip/StatusChip.tsx
index dcfe126..850b328 100644
--- a/client/src/components/StatusChip/StatusChip.tsx
+++ b/client/src/components/StatusChip/StatusChip.tsx
@@ -41,7 +41,7 @@ const StatusChip: FunctionComponent<StatusChipProps> = ({ status, label, size =
       size={size}
       label={label}
       icon={<AppIcon icon={style.icon} size={16} color={style.fg} />}
-      sx={{ backgroundColor: style.bg, color: style.fg, fontWeight: 600, ...sx }}
+      sx={{ backgroundColor: style.bg, color: style.fg, fontWeight: 500, ...sx }}
       {...rest}
     />
   );
diff --git a/client/src/components/VariantCard/VariantCard.tsx b/client/src/components/VariantCard/VariantCard.tsx
index 43435d1..40bb610 100644
--- a/client/src/components/VariantCard/VariantCard.tsx
+++ b/client/src/components/VariantCard/VariantCard.tsx
@@ -76,7 +76,7 @@ const VariantCard: FunctionComponent<VariantCardProps> = ({ variant, onEdit, onT
         ) : null}
 
         <Stack direction="row" sx={{ gap: 1, flexWrap: 'wrap' }}>
-          <AppButton variant="outlined" color="primary" startIcon="edit" onClick={onEdit} sx={{ m: 0 }}>
+          <AppButton variant="outlined" color="primary" startIcon="edit" onClick={onEdit}>
             {t('edit')}
           </AppButton>
           <AppButton
@@ -84,7 +84,6 @@ const VariantCard: FunctionComponent<VariantCardProps> = ({ variant, onEdit, onT
             color={active ? 'inherit' : 'primary'}
             startIcon={active ? 'visibilityoff' : 'visibilityon'}
             onClick={onToggleActive}
-            sx={{ m: 0 }}
           >
             {active ? t('deactivate') : t('activate')}
           </AppButton>
diff --git a/client/src/components/admin/AdminErrorState.tsx b/client/src/components/admin/AdminErrorState.tsx
index 8a878a7..9c24ed5 100644
--- a/client/src/components/admin/AdminErrorState.tsx
+++ b/client/src/components/admin/AdminErrorState.tsx
@@ -23,7 +23,7 @@ const AdminErrorState: FunctionComponent<AdminErrorStateProps> = ({ message, ret
     <Typography variant="body2" sx={{ color: 'text.secondary', mb: 1.5 }}>
       {message}
     </Typography>
-    <AppButton variant="outlined" color="primary" startIcon="refresh" onClick={onRetry} sx={{ m: 0 }}>
+    <AppButton variant="outlined" color="primary" startIcon="refresh" onClick={onRetry}>
       {retryLabel}
     </AppButton>
   </Paper>
diff --git a/client/src/components/admin/AdminPager.tsx b/client/src/components/admin/AdminPager.tsx
index b899ca1..6f704af 100644
--- a/client/src/components/admin/AdminPager.tsx
+++ b/client/src/components/admin/AdminPager.tsx
@@ -32,13 +32,13 @@ const AdminPager: FunctionComponent<AdminPagerProps> = ({
   if (pageCount <= 1) return null;
   return (
     <Stack direction="row" sx={{ gap: 1, alignItems: 'center', justifyContent: 'center', mt: 1 }}>
-      <AppButton variant="text" color="primary" onClick={onPrev} disabled={page <= 1} sx={{ m: 0 }}>
+      <AppButton variant="text" color="primary" onClick={onPrev} disabled={page <= 1}>
         {prevLabel}
       </AppButton>
       <Typography variant="body2" sx={{ color: 'text.secondary' }}>
         {indicator}
       </Typography>
-      <AppButton variant="text" color="primary" onClick={onNext} disabled={page >= pageCount} sx={{ m: 0 }}>
+      <AppButton variant="text" color="primary" onClick={onNext} disabled={page >= pageCount}>
         {nextLabel}
       </AppButton>
     </Stack>
diff --git a/client/src/components/admin/AuditLogRow.tsx b/client/src/components/admin/AuditLogRow.tsx
index e0e3e60..840d3d7 100644
--- a/client/src/components/admin/AuditLogRow.tsx
+++ b/client/src/components/admin/AuditLogRow.tsx
@@ -69,7 +69,7 @@ const AuditLogRow: FunctionComponent<AuditLogRowProps> = ({ entry }) => {
             <TableBody>
               {fields.map(([field, delta]) => (
                 <TableRow key={field}>
-                  <TableCell sx={{ fontWeight: 600 }}>{field}</TableCell>
+                  <TableCell sx={{ fontWeight: 500 }}>{field}</TableCell>
                   <TableCell sx={{ color: 'text.secondary' }}>{displayValue(delta.old)}</TableCell>
                   <TableCell>{displayValue(delta.new)}</TableCell>
                 </TableRow>
diff --git a/client/src/components/admin/ConfigRow.tsx b/client/src/components/admin/ConfigRow.tsx
index d3a7960..42696ab 100644
--- a/client/src/components/admin/ConfigRow.tsx
+++ b/client/src/components/admin/ConfigRow.tsx
@@ -47,11 +47,11 @@ const ConfigRow: FunctionComponent<ConfigRowProps> = ({ config, canEdit = false,
         </Box>
 
         <Stack direction="row" sx={{ gap: 1, flexWrap: 'wrap' }}>
-          <AppButton variant="text" color="primary" startIcon="history" onClick={() => onHistory?.(config)} sx={{ m: 0 }}>
+          <AppButton variant="text" color="primary" startIcon="history" onClick={() => onHistory?.(config)}>
             {t('cfg_history')}
           </AppButton>
           {canEdit ? (
-            <AppButton variant="outlined" color="primary" startIcon="edit" onClick={() => onEdit?.(config)} sx={{ m: 0 }}>
+            <AppButton variant="outlined" color="primary" startIcon="edit" onClick={() => onEdit?.(config)}>
               {t('cfg_edit')}
             </AppButton>
           ) : null}
diff --git a/client/src/components/admin/ConfirmDialog.tsx b/client/src/components/admin/ConfirmDialog.tsx
index 72435c3..4b157e9 100644
--- a/client/src/components/admin/ConfirmDialog.tsx
+++ b/client/src/components/admin/ConfirmDialog.tsx
@@ -93,7 +93,7 @@ const ConfirmDialog: FunctionComponent<ConfirmDialogProps> = ({
         ) : null}
       </DialogContent>
       <DialogActions sx={{ px: 3, pb: 2 }}>
-        <AppButton variant="text" color="inherit" onClick={close} disabled={loading} sx={{ m: 0 }}>
+        <AppButton variant="text" color="inherit" onClick={close} disabled={loading}>
           {cancelLabel}
         </AppButton>
         <AppButton
@@ -102,7 +102,6 @@ const ConfirmDialog: FunctionComponent<ConfirmDialogProps> = ({
           onClick={confirm}
           disabled={confirmDisabled}
           startIcon={loading ? <CircularProgress size={16} color="inherit" /> : undefined}
-          sx={{ m: 0 }}
         >
           {confirmLabel}
         </AppButton>
diff --git a/client/src/components/admin/DocumentViewer.tsx b/client/src/components/admin/DocumentViewer.tsx
index b3792ce..876aac1 100644
--- a/client/src/components/admin/DocumentViewer.tsx
+++ b/client/src/components/admin/DocumentViewer.tsx
@@ -38,7 +38,7 @@ const DocumentViewer: FunctionComponent<DocumentViewerProps> = ({ document }) =>
     >
       <Stack direction="row" sx={{ gap: 1, alignItems: 'center', mb: 1 }}>
         <AppIcon icon="document" size={18} color="var(--bal-text-secondary)" />
-        <Typography variant="body2" sx={{ fontWeight: 600, flexGrow: 1, wordBreak: 'break-all' }}>
+        <Typography variant="body2" sx={{ fontWeight: 500, flexGrow: 1, wordBreak: 'break-all' }}>
           {t('doc_file_meta', { name: document.originalFileName ?? `#${document.id}`, size: formatSize(document.fileSizeBytes) })}
         </Typography>
         <AppButton
@@ -47,7 +47,7 @@ const DocumentViewer: FunctionComponent<DocumentViewerProps> = ({ document }) =>
           startIcon="refresh"
           onClick={() => signed.refetch()}
           disabled={signed.isFetching}
-          sx={{ m: 0, minWidth: 0 }}
+          sx={{ minWidth: 0 }}
         >
           {t('doc_reload')}
         </AppButton>
@@ -60,7 +60,7 @@ const DocumentViewer: FunctionComponent<DocumentViewerProps> = ({ document }) =>
           <Typography variant="body2" sx={{ color: 'var(--bal-error)' }}>
             {t('doc_error')}
           </Typography>
-          <AppButton variant="outlined" color="primary" startIcon="refresh" onClick={() => signed.refetch()} sx={{ m: 0 }}>
+          <AppButton variant="outlined" color="primary" startIcon="refresh" onClick={() => signed.refetch()}>
             {t('doc_reload')}
           </AppButton>
         </Stack>
@@ -74,7 +74,7 @@ const DocumentViewer: FunctionComponent<DocumentViewerProps> = ({ document }) =>
             sx={{ maxWidth: '100%', maxHeight: 320, borderRadius: 1, display: 'block' }}
           />
         ) : (
-          <AppButton variant="outlined" color="primary" endIcon="external" href={signed.data.url} openInNewTab sx={{ m: 0 }}>
+          <AppButton variant="outlined" color="primary" endIcon="external" href={signed.data.url} openInNewTab>
             {t('doc_open_new')}
           </AppButton>
         )
diff --git a/client/src/components/admin/PartnerSettlementRow.tsx b/client/src/components/admin/PartnerSettlementRow.tsx
index eceb934..24a03bd 100644
--- a/client/src/components/admin/PartnerSettlementRow.tsx
+++ b/client/src/components/admin/PartnerSettlementRow.tsx
@@ -74,11 +74,11 @@ const PartnerSettlementRow: FunctionComponent<PartnerSettlementRowProps> = ({ in
         />
         {invoice.pdfUrl ? (
           downloadError ? (
-            <AppButton variant="outlined" color="error" startIcon="refresh" onClick={() => onRetryDownload?.(invoice)} sx={{ m: 0 }}>
+            <AppButton variant="outlined" color="error" startIcon="refresh" onClick={() => onRetryDownload?.(invoice)}>
               {t('invoice_pdf_error')}
             </AppButton>
           ) : (
-            <AppButton variant="outlined" color="primary" startIcon="download" onClick={() => onDownloadPdf?.(invoice)} sx={{ m: 0 }}>
+            <AppButton variant="outlined" color="primary" startIcon="download" onClick={() => onDownloadPdf?.(invoice)}>
               {t('invoice_download')}
             </AppButton>
           )
diff --git a/client/src/components/admin/RefundPanel.tsx b/client/src/components/admin/RefundPanel.tsx
index 90c9a88..c19e25a 100644
--- a/client/src/components/admin/RefundPanel.tsx
+++ b/client/src/components/admin/RefundPanel.tsx
@@ -160,7 +160,7 @@ const RefundPanel: FunctionComponent<RefundPanelProps> = ({ bookingId, ticketId,
             minRows={2}
           />
 
-          <AppButton variant="contained" color="primary" startIcon="refunds" onClick={() => setConfirmOpen(true)} disabled={busy} sx={{ m: 0, alignSelf: 'flex-start' }}>
+          <AppButton variant="contained" color="primary" startIcon="refunds" onClick={() => setConfirmOpen(true)} disabled={busy} sx={{ alignSelf: 'flex-start' }}>
             {t('refund_initiate')}
           </AppButton>
         </>
@@ -170,10 +170,10 @@ const RefundPanel: FunctionComponent<RefundPanelProps> = ({ bookingId, ticketId,
             {t('refund_provider_failed')}
           </Alert>
           <Stack direction="row" sx={{ gap: 1 }}>
-            <AppButton variant="contained" color="primary" startIcon="refresh" onClick={doRetry} disabled={busy} sx={{ m: 0 }}>
+            <AppButton variant="contained" color="primary" startIcon="refresh" onClick={doRetry} disabled={busy}>
               {t('refund_approve')}
             </AppButton>
-            <AppButton variant="outlined" color="error" onClick={() => setRejectOpen(true)} disabled={busy} sx={{ m: 0 }}>
+            <AppButton variant="outlined" color="error" onClick={() => setRejectOpen(true)} disabled={busy}>
               {t('refund_reject')}
             </AppButton>
           </Stack>
diff --git a/client/src/components/admin/SupportAlertCard.tsx b/client/src/components/admin/SupportAlertCard.tsx
index d4e7924..1291469 100644
--- a/client/src/components/admin/SupportAlertCard.tsx
+++ b/client/src/components/admin/SupportAlertCard.tsx
@@ -85,11 +85,11 @@ const SupportAlertCard: FunctionComponent<SupportAlertCardProps> = ({ alert, can
       {canAct && alert.status !== 'resolved' ? (
         <Stack direction="row" sx={{ gap: 1, mt: 1.5, flexWrap: 'wrap' }}>
           {alert.status === 'open' ? (
-            <AppButton variant="outlined" color="primary" startIcon="assign" onClick={() => onAssignSelf?.(alert)} sx={{ m: 0 }}>
+            <AppButton variant="outlined" color="primary" startIcon="assign" onClick={() => onAssignSelf?.(alert)}>
               {t('alert_assign_me')}
             </AppButton>
           ) : null}
-          <AppButton variant="contained" color="primary" startIcon="verified" onClick={() => onResolve?.(alert)} sx={{ m: 0 }}>
+          <AppButton variant="contained" color="primary" startIcon="verified" onClick={() => onResolve?.(alert)}>
             {t('alert_resolve')}
           </AppButton>
         </Stack>
diff --git a/client/src/components/auth/BrandMark.tsx b/client/src/components/auth/BrandMark.tsx
index f96a48e..65353e9 100644
--- a/client/src/components/auth/BrandMark.tsx
+++ b/client/src/components/auth/BrandMark.tsx
@@ -2,7 +2,7 @@
 import { FunctionComponent } from 'react';
 import { Stack, Typography } from '@mui/material';
 import { useTranslations } from 'next-intl';
-import AppIcon from '../common/AppIcon';
+import LogoLockup from '../common/AppIcon/icons/LogoLockup';
 
 interface BrandMarkProps {
   /** Show the brand tagline under the wordmark. */
@@ -18,7 +18,8 @@ const BrandMark: FunctionComponent<BrandMarkProps> = ({ withTagline }) => {
   const t = useTranslations('common');
   return (
     <Stack sx={{ alignItems: 'center', gap: 1 }}>
-      <AppIcon icon="logo" size={56} color="var(--bal-primary)" />
+      {/* Decorative — the wordmark below already announces "Balinyaar" to AT. */}
+      <LogoLockup size={56} aria-hidden="true" />
       <Typography variant="h5" component="p" sx={{ fontWeight: 700, color: 'primary.main' }}>
         {t('brand')}
       </Typography>
diff --git a/client/src/components/auth/OtpStep.tsx b/client/src/components/auth/OtpStep.tsx
index f2ccc42..451ef93 100644
--- a/client/src/components/auth/OtpStep.tsx
+++ b/client/src/components/auth/OtpStep.tsx
@@ -129,7 +129,6 @@ const OtpStep: FunctionComponent<OtpStepProps> = ({
         fullWidth
         disabled={code.length !== OTP_CODE_LENGTH || verifyOtp.isPending || locked}
         startIcon={verifyOtp.isPending ? <CircularProgress size={18} color="inherit" /> : undefined}
-        sx={{ m: 0 }}
       >
         {isNurse ? t('otp_verify_nurse') : t('otp_verify_customer')}
       </AppButton>
diff --git a/client/src/components/auth/PhoneStep.tsx b/client/src/components/auth/PhoneStep.tsx
index 73768f3..fb2baad 100644
--- a/client/src/components/auth/PhoneStep.tsx
+++ b/client/src/components/auth/PhoneStep.tsx
@@ -85,7 +85,6 @@ const PhoneStep: FunctionComponent<PhoneStepProps> = ({ intendedRole, onSwitchRo
         fullWidth
         disabled={requestOtp.isPending}
         startIcon={requestOtp.isPending ? <CircularProgress size={18} color="inherit" /> : undefined}
-        sx={{ m: 0 }}
       >
         {t('request_code')}
       </AppButton>
diff --git a/client/src/components/auth/SelectRole.tsx b/client/src/components/auth/SelectRole.tsx
index 2e99568..1bef958 100644
--- a/client/src/components/auth/SelectRole.tsx
+++ b/client/src/components/auth/SelectRole.tsx
@@ -84,7 +84,7 @@ const SelectRole: FunctionComponent<SelectRoleProps> = ({ initialRole }) => {
               >
                 <AppIcon icon={icon} size={28} color="var(--bal-primary)" />
                 <Stack sx={{ gap: 0.25 }}>
-                  <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
+                  <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
                     {t(`role_${role}`)}
                   </Typography>
                   <Typography variant="body2" sx={{ color: 'text.secondary' }}>
@@ -103,7 +103,6 @@ const SelectRole: FunctionComponent<SelectRoleProps> = ({ initialRole }) => {
           onClick={confirm}
           disabled={selectRole.isPending}
           startIcon={selectRole.isPending ? <CircularProgress size={18} color="inherit" /> : undefined}
-          sx={{ m: 0 }}
         >
           {t('continue')}
         </AppButton>
diff --git a/client/src/components/booking/BookingDetailView/BookingDetailView.tsx b/client/src/components/booking/BookingDetailView/BookingDetailView.tsx
index 6de354f..ca8e557 100644
--- a/client/src/components/booking/BookingDetailView/BookingDetailView.tsx
+++ b/client/src/components/booking/BookingDetailView/BookingDetailView.tsx
@@ -133,7 +133,7 @@ function HeaderFact({ label, value }: { label: string; value: string }) {
       <Typography variant="caption" sx={{ color: 'text.secondary' }}>
         {label}
       </Typography>
-      <Typography variant="body2" sx={{ fontWeight: 600 }}>
+      <Typography variant="body2" sx={{ fontWeight: 500 }}>
         {value}
       </Typography>
     </Stack>
diff --git a/client/src/components/booking/BookingStatusTimeline/BookingStatusTimeline.tsx b/client/src/components/booking/BookingStatusTimeline/BookingStatusTimeline.tsx
index 1c52ee3..7d24096 100644
--- a/client/src/components/booking/BookingStatusTimeline/BookingStatusTimeline.tsx
+++ b/client/src/components/booking/BookingStatusTimeline/BookingStatusTimeline.tsx
@@ -45,7 +45,7 @@ const BookingStatusTimeline: FunctionComponent<BookingStatusTimelineProps> = ({
           sx={{ gap: 1, alignItems: 'center', px: 1.5, py: 1.25, borderRadius: 2, bgcolor: 'var(--bal-primary-soft)' }}
         >
           <AppIcon icon="rejected" size={20} color="var(--bal-text-secondary)" />
-          <Typography variant="body2" sx={{ fontWeight: 600, color: 'text.secondary' }}>
+          <Typography variant="body2" sx={{ fontWeight: 500, color: 'text.secondary' }}>
             {t('bstatus_cancelled')}
           </Typography>
         </Stack>
diff --git a/client/src/components/booking/SessionCard/SessionCard.tsx b/client/src/components/booking/SessionCard/SessionCard.tsx
index a1c050f..e71a8bd 100644
--- a/client/src/components/booking/SessionCard/SessionCard.tsx
+++ b/client/src/components/booking/SessionCard/SessionCard.tsx
@@ -89,7 +89,7 @@ const SessionCard: FunctionComponent<SessionCardProps> = ({
           </Typography>
         ) : null}
         <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center', gap: 1 }}>
-          <Typography variant="subtitle2" sx={{ fontWeight: title ? 600 : 700, color: title ? 'text.secondary' : 'text.primary' }}>
+          <Typography variant="subtitle2" sx={{ fontWeight: title ? 500 : 700, color: title ? 'text.secondary' : 'text.primary' }}>
             {t('session_index', { n: sessionIndex })}
           </Typography>
           <StatusChip status={SESSION_STATUS_KIND[status]} label={t(`sstatus_${status}`)} />
@@ -109,7 +109,7 @@ const SessionCard: FunctionComponent<SessionCardProps> = ({
         ) : null}
 
         {showPayout && visitPayoutAmount ? (
-          <Typography variant="caption" sx={{ color: 'var(--bal-secondary-dark)', fontWeight: 600 }}>
+          <Typography variant="caption" sx={{ color: 'var(--bal-secondary-dark)', fontWeight: 500 }}>
             {t('session_payout')}: {formatIrrToToman(visitPayoutAmount, locale)} {tc('currency_toman')}
           </Typography>
         ) : null}
@@ -121,7 +121,7 @@ const SessionCard: FunctionComponent<SessionCardProps> = ({
             startIcon={acquiringLocation ? 'gps' : 'check_in'}
             disabled={busy}
             onClick={onCheckIn}
-            sx={{ m: 0, alignSelf: 'flex-start', py: 1 }}
+            sx={{ alignSelf: 'flex-start', py: 1 }}
           >
             {acquiringLocation ? t('evv_acquiring_location') : evvPending ? t('evv_checking_in') : t('evv_check_in')}
           </AppButton>
@@ -134,7 +134,7 @@ const SessionCard: FunctionComponent<SessionCardProps> = ({
             startIcon={acquiringLocation ? 'gps' : 'check_out'}
             disabled={busy}
             onClick={onCheckOut}
-            sx={{ m: 0, alignSelf: 'flex-start', py: 1 }}
+            sx={{ alignSelf: 'flex-start', py: 1 }}
           >
             {acquiringLocation ? t('evv_acquiring_location') : evvPending ? t('evv_checking_out') : t('evv_check_out')}
           </AppButton>
diff --git a/client/src/components/common/AppButton/AppButton.test.tsx b/client/src/components/common/AppButton/AppButton.test.tsx
index 1a60ab6..23c107a 100644
--- a/client/src/components/common/AppButton/AppButton.test.tsx
+++ b/client/src/components/common/AppButton/AppButton.test.tsx
@@ -60,14 +60,17 @@ describe('<AppButton/> component', () => {
     expect(button).toHaveAttribute('type', 'button'); // not "submit" or "input" by default
   });
 
-  it('has .margin style by default', () => {
-    let text = 'button with default margin';
+  it('does not force a default margin, and passes a custom sx through untouched', () => {
     const testId = randomText(8);
-    render(<ComponentToTest data-testid={testId}>{text}</ComponentToTest>);
+    render(
+      <ComponentToTest data-testid={testId} sx={{ marginInlineStart: 2 }}>
+        button with custom sx
+      </ComponentToTest>
+    );
     const button = screen.getByTestId(testId);
     expect(button).toBeDefined();
-    // MUI v9 + cssVariables: spacing is emitted as CSS vars (not resolved in jsdom).
-    // Verify the sx margin is applied via class rather than inline style.
+    // Regression guard for the removed starter DEFAULT_SX_VALUES={ margin: 1 }:
+    // AppButton must not silently drop or merge over a caller-provided sx.
     expect(button).toHaveClass('MuiButton-root');
   });
 
@@ -127,7 +130,7 @@ describe('<AppButton/> component', () => {
     let text = 'button with start icon';
     render(<ComponentToTest text={text} startIcon="default" />);
     let button = screen.getByText(text);
-    let icon = within(button).getByTestId('MoreHorizIcon'); //Note: this is valid only when "default" icon is <MoreHorizIcon />
+    let icon = within(button).getByTestId('MoreHorizRoundedIcon'); //Note: this is valid only when "default" icon is <MoreHorizRoundedIcon />
     expect(icon).toBeDefined();
     let span = icon.closest('span');
     expect(span).toHaveClass('MuiButton-startIcon');
@@ -137,7 +140,7 @@ describe('<AppButton/> component', () => {
     let text = 'button with end icon as string';
     render(<ComponentToTest text={text} endIcon="default" />);
     let button = screen.getByText(text);
-    let icon = within(button).getByTestId('MoreHorizIcon'); //Note: this is valid only when "default" icon is <MoreHorizIcon />
+    let icon = within(button).getByTestId('MoreHorizRoundedIcon'); //Note: this is valid only when "default" icon is <MoreHorizRoundedIcon />
     expect(icon).toBeDefined();
     let span = icon.closest('span');
     expect(span).toHaveClass('MuiButton-endIcon');
diff --git a/client/src/components/common/AppButton/AppButton.tsx b/client/src/components/common/AppButton/AppButton.tsx
index 3ba9d37..aabef38 100644
--- a/client/src/components/common/AppButton/AppButton.tsx
+++ b/client/src/components/common/AppButton/AppButton.tsx
@@ -6,26 +6,20 @@ import { APP_BUTTON_VARIANT } from '../../config';
 
 const MUI_BUTTON_COLORS = ['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'];
 
-const DEFAULT_SX_VALUES = {
-  margin: 1, // By default the AppButton has theme.spacing(1) margin on all sides
-};
-
 export interface AppButtonProps extends Omit<ButtonProps, 'color' | 'endIcon' | 'startIcon'> {
   color?: string; // Not only 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning',
   endIcon?: string | ReactNode;
   label?: string; // Alternate to .text
   text?: string; // Alternate to .label
   startIcon?: string | ReactNode;
-  // Missing props
   component?: ElementType; // Could be RouterLink, AppLink, <a>, etc.
   to?: string; // Link prop
   href?: string; // Link prop
   openInNewTab?: boolean; // Link prop
-  underline?: 'none' | 'hover' | 'always'; // Link prop
 }
 
 /**
- * Application styled Material UI Button with Box around to specify margins using props
+ * Application-styled Material UI Button.
  * @component AppButton
  * @param {string} [color] - when passing MUI value ('primary', 'secondary', and so on), it is color of the button body, otherwise it is color of text and icons
  * @param {string} [children] - content to render, overrides .label and .text props
@@ -37,7 +31,6 @@ export interface AppButtonProps extends Omit<ButtonProps, 'color' | 'endIcon' |
  * @param {Array<func| object| bool> | func | object} [sx] - additional CSS styles to apply to the button
  * @param {string} [text] - text to render, alternate to .label
  * @param {string} [to] - internal link URI
- * @param {string} [underline] - controls underline style when button used as link, one of 'none', 'hover', or 'always'
  * @param {string} [variant] - MUI variant of the button, one of 'text', 'outlined', or 'contained'
  */
 const AppButton: FunctionComponent<AppButtonProps> = ({
@@ -47,9 +40,7 @@ const AppButton: FunctionComponent<AppButtonProps> = ({
   endIcon,
   label,
   startIcon,
-  sx: propSx = DEFAULT_SX_VALUES,
   text,
-  underline = 'none',
   variant = APP_BUTTON_VARIANT,
   ...restOfProps
 }) => {
@@ -69,10 +60,7 @@ const AppButton: FunctionComponent<AppButtonProps> = ({
     !propComponent && (restOfProps?.href || restOfProps?.to) ? AppLink : propComponent ?? Button;
 
   const colorToRender = isMuiColor ? (propColor as ButtonProps['color']) : 'inherit';
-  const sxToRender = {
-    ...propSx,
-    ...(isMuiColor ? {} : { color: propColor }),
-  };
+  const sxToRender = isMuiColor ? restOfProps.sx : { ...restOfProps.sx, color: propColor };
 
   return (
     <Button
@@ -80,9 +68,9 @@ const AppButton: FunctionComponent<AppButtonProps> = ({
       color={colorToRender}
       endIcon={iconEnd}
       startIcon={iconStart}
-      sx={sxToRender}
       variant={variant}
-      {...{ ...restOfProps, underline }}
+      {...restOfProps}
+      sx={sxToRender}
     >
       {children || label || text}
     </Button>
diff --git a/client/src/components/common/AppIcon/AppIcon.test.tsx b/client/src/components/common/AppIcon/AppIcon.test.tsx
index bfc5e02..bc1f9f3 100644
--- a/client/src/components/common/AppIcon/AppIcon.test.tsx
+++ b/client/src/components/common/AppIcon/AppIcon.test.tsx
@@ -16,9 +16,11 @@ describe('<AppIcon/> component', () => {
     const svg = screen.getByTestId(testId);
     expect(svg).toBeDefined();
     expect(svg).toHaveAttribute('data-icon', 'default');
-    expect(svg).toHaveAttribute('size', String(APP_ICON_SIZE)); // default size
     expect(svg).toHaveAttribute('height', String(APP_ICON_SIZE)); // default size when .size is not set
     expect(svg).toHaveAttribute('width', String(APP_ICON_SIZE)); // default size when .size is not se
+    // Size is actually driven by fontSize (MUI SvgIcon's `1em` sizing beats
+    // width/height attributes) — never assert a `size` DOM attribute, it's invalid.
+    expect(svg).toHaveStyle(`font-size: ${APP_ICON_SIZE}px`);
   });
 
   it('supports .color property', () => {
@@ -48,9 +50,11 @@ describe('<AppIcon/> component', () => {
     const size = Math.floor(Math.random() * 128) + 1;
     render(<ComponentToTest data-testid={testId} size={size} />);
     const svg = screen.getByTestId(testId);
-    expect(svg).toHaveAttribute('size', String(size));
     expect(svg).toHaveAttribute('height', String(size));
     expect(svg).toHaveAttribute('width', String(size));
+    // The bug this regression-guards: MUI SvgIcon's own CSS sets width/height:1em,
+    // which beats plain width/height attributes — only fontSize actually resizes it.
+    expect(svg).toHaveStyle(`font-size: ${size}px`);
   });
 
   it('supports .title property', () => {
diff --git a/client/src/components/common/AppIcon/AppIcon.tsx b/client/src/components/common/AppIcon/AppIcon.tsx
index 4c19dba..4bfc6d6 100644
--- a/client/src/components/common/AppIcon/AppIcon.tsx
+++ b/client/src/components/common/AppIcon/AppIcon.tsx
@@ -1,6 +1,6 @@
 import { ComponentType, FunctionComponent, SVGAttributes } from 'react';
 import { APP_ICON_SIZE } from '../../config';
-import { IconName, ICONS } from './config';
+import { IconName, ICONS, DIRECTIONAL_ICONS } from './config';
 
 /**
  * Props of the AppIcon component, also can be used for SVG icons
@@ -31,21 +31,35 @@ const AppIcon: FunctionComponent<Props> = ({
 
   let ComponentToRender: ComponentType = ICONS[iconName];
   if (!ComponentToRender) {
-    console.warn(`AppIcon: icon "${iconName}" is not found!`);
-    ComponentToRender = ICONS.default; // ICONS['default'];
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(`AppIcon: icon "${iconName}" is not found!`);
+    }
+    ComponentToRender = ICONS.default;
   }
 
+  const sizeValue = typeof size === 'number' ? `${size}px` : size;
+
+  // MUI's SvgIcon sets width/height:1em via its own class, which beats plain
+  // width/height attributes — driving size through fontSize (the basis for 1em)
+  // is what actually resizes MUI-registry icons. Custom raw <svg> icons (the
+  // brand mark) aren't MUI SvgIcon-based, so they keep scaling off the explicit
+  // width/height attributes below; the extra fontSize style is harmless for them.
   const propsToRender = {
     height: size,
+    width: size,
     color,
     fill: color && 'currentColor',
-    size,
-    style: { ...style, color },
-    width: size,
+    style: { ...style, color, fontSize: sizeValue },
     ...restOfProps,
   };
 
-  return <ComponentToRender data-icon={iconName} {...propsToRender} />;
+  // Directional icons (back/chevron_start, …) are authored for LTR and mirror
+  // under RTL via the single CSS rule in tokens.css keyed on this attribute —
+  // registering a name in DIRECTIONAL_ICONS (config.ts) is the only step a
+  // later phase needs; never hand-roll a flip at the call site.
+  const directionalProps = DIRECTIONAL_ICONS.has(iconName) ? { 'data-icon-directional': true } : undefined;
+
+  return <ComponentToRender data-icon={iconName} {...directionalProps} {...propsToRender} />;
 };
 
 export default AppIcon;
diff --git a/client/src/components/common/AppIcon/config.ts b/client/src/components/common/AppIcon/config.ts
index a9d398d..e3d3e4a 100644
--- a/client/src/components/common/AppIcon/config.ts
+++ b/client/src/components/common/AppIcon/config.ts
@@ -1,101 +1,103 @@
-// SVG assets
-import PencilIcon from './icons/PencilIcon';
-// MUI Icons
-import DefaultIcon from '@mui/icons-material/MoreHoriz';
-import SettingsIcon from '@mui/icons-material/Settings';
-import VisibilityIcon from '@mui/icons-material/Visibility';
-import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
-import MenuIcon from '@mui/icons-material/Menu';
-import CloseIcon from '@mui/icons-material/Close';
-import DayNightIcon from '@mui/icons-material/Brightness4';
-import NightIcon from '@mui/icons-material/Brightness3';
-import DayIcon from '@mui/icons-material/Brightness5';
-import SearchIcon from '@mui/icons-material/Search';
-import InfoIcon from '@mui/icons-material/Info';
-import HomeIcon from '@mui/icons-material/Home';
-import AccountCircle from '@mui/icons-material/AccountCircle';
-import PersonAddIcon from '@mui/icons-material/PersonAdd';
-import PersonIcon from '@mui/icons-material/Person';
-import ExitToAppIcon from '@mui/icons-material/ExitToApp';
-import NotificationsIcon from '@mui/icons-material/NotificationsOutlined';
-import DangerousIcon from '@mui/icons-material/Dangerous';
-import EventNoteIcon from '@mui/icons-material/EventNote';
-import GroupsIcon from '@mui/icons-material/Groups';
-import PeopleAltIcon from '@mui/icons-material/PeopleAlt';
-import WalletIcon from '@mui/icons-material/AccountBalanceWallet';
-import PersonOutlineIcon from '@mui/icons-material/AccountCircleOutlined';
-import DashboardIcon from '@mui/icons-material/Dashboard';
-import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import HourglassEmptyIcon from '@mui/icons-material/HourglassEmpty';
-import CancelIcon from '@mui/icons-material/Cancel';
-import MedicalServicesIcon from '@mui/icons-material/MedicalServices';
-import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
-import AddIcon from '@mui/icons-material/Add';
-import EditIcon from '@mui/icons-material/EditOutlined';
-import ArchiveIcon from '@mui/icons-material/Inventory2Outlined';
-import BankIcon from '@mui/icons-material/AccountBalanceOutlined';
-import CameraIcon from '@mui/icons-material/PhotoCameraOutlined';
-import WarningIcon from '@mui/icons-material/WarningAmberOutlined';
-import LocationIcon from '@mui/icons-material/LocationOnOutlined';
-import DeleteIcon from '@mui/icons-material/DeleteOutlined';
-import CoverageIcon from '@mui/icons-material/MapOutlined';
+// SVG assets — the Balinyaar brand mark
+import LogoMark from './icons/LogoMark';
+// MUI Icons — normalized to ONE visual family (Rounded): warmer, softer strokes
+// than the filled/outlined mix this registry used to carry, fitting the
+// clinical-but-human tone. Adding an icon = import here + one lowercase key
+// below; never import a raw MUI icon anywhere else in the app.
+import DefaultIcon from '@mui/icons-material/MoreHorizRounded';
+import CloseIcon from '@mui/icons-material/CloseRounded';
+import MenuIcon from '@mui/icons-material/MenuRounded';
+import SearchIcon from '@mui/icons-material/SearchRounded';
+import InfoIcon from '@mui/icons-material/InfoRounded';
+import HomeIcon from '@mui/icons-material/HomeRounded';
+import AccountCircleIcon from '@mui/icons-material/AccountCircleRounded';
+import ExitToAppIcon from '@mui/icons-material/ExitToAppRounded';
+import NotificationsIcon from '@mui/icons-material/NotificationsRounded';
+import DangerousIcon from '@mui/icons-material/DangerousRounded';
+import EventNoteIcon from '@mui/icons-material/EventNoteRounded';
+import GroupsIcon from '@mui/icons-material/GroupsRounded';
+import PeopleAltIcon from '@mui/icons-material/PeopleAltRounded';
+import WalletIcon from '@mui/icons-material/AccountBalanceWalletRounded';
+import DashboardIcon from '@mui/icons-material/DashboardRounded';
+import VerifiedUserIcon from '@mui/icons-material/VerifiedUserRounded';
+import CheckCircleIcon from '@mui/icons-material/CheckCircleRounded';
+import HourglassEmptyIcon from '@mui/icons-material/HourglassEmptyRounded';
+import CancelIcon from '@mui/icons-material/CancelRounded';
+import MedicalServicesIcon from '@mui/icons-material/MedicalServicesRounded';
+import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettingsRounded';
+import AddIcon from '@mui/icons-material/AddRounded';
+import EditIcon from '@mui/icons-material/EditRounded';
+import ArchiveIcon from '@mui/icons-material/Inventory2Rounded';
+import BankIcon from '@mui/icons-material/AccountBalanceRounded';
+import CameraIcon from '@mui/icons-material/PhotoCameraRounded';
+import WarningIcon from '@mui/icons-material/WarningAmberRounded';
+import LocationIcon from '@mui/icons-material/LocationOnRounded';
+import DeleteIcon from '@mui/icons-material/DeleteRounded';
+import CoverageIcon from '@mui/icons-material/MapRounded';
 // Catalog — nurse services surface + the customer Home service-category grid (f4/b5)
-import ServicesIcon from '@mui/icons-material/LocalOfferOutlined';
-import CategoryIcon from '@mui/icons-material/CategoryOutlined';
-import ElderlyIcon from '@mui/icons-material/ElderlyOutlined';
-import PostSurgeryIcon from '@mui/icons-material/HealingOutlined';
-import InfantIcon from '@mui/icons-material/ChildCareOutlined';
-import ChronicIcon from '@mui/icons-material/MonitorHeartOutlined';
-import CompanionshipIcon from '@mui/icons-material/VolunteerActivismOutlined';
+import ServicesIcon from '@mui/icons-material/LocalOfferRounded';
+import CategoryIcon from '@mui/icons-material/CategoryRounded';
+import ElderlyIcon from '@mui/icons-material/ElderlyRounded';
+import PostSurgeryIcon from '@mui/icons-material/HealingRounded';
+import InfantIcon from '@mui/icons-material/ChildCareRounded';
+import ChronicIcon from '@mui/icons-material/MonitorHeartRounded';
+import CompanionshipIcon from '@mui/icons-material/VolunteerActivismRounded';
 // Verification — nurse trust flow (f5/b6): document upload, credential + identity, re-upload
-import UploadIcon from '@mui/icons-material/CloudUploadOutlined';
-import DocumentIcon from '@mui/icons-material/InsertDriveFileOutlined';
-import RefreshIcon from '@mui/icons-material/RefreshOutlined';
-import IdentityIcon from '@mui/icons-material/BadgeOutlined';
-import LicenseIcon from '@mui/icons-material/WorkspacePremiumOutlined';
-import PublishIcon from '@mui/icons-material/RocketLaunchOutlined';
+import UploadIcon from '@mui/icons-material/CloudUploadRounded';
+import DocumentIcon from '@mui/icons-material/InsertDriveFileRounded';
+import RefreshIcon from '@mui/icons-material/RefreshRounded';
+import IdentityIcon from '@mui/icons-material/BadgeRounded';
+import LicenseIcon from '@mui/icons-material/WorkspacePremiumRounded';
+import PublishIcon from '@mui/icons-material/RocketLaunchRounded';
 // Search & discovery — the customer nurse-finding flow (f6/b7): rating star, filter controls
-import StarIcon from '@mui/icons-material/Star';
-import TuneIcon from '@mui/icons-material/TuneOutlined';
+import StarIcon from '@mui/icons-material/StarRounded';
+import StarHalfIcon from '@mui/icons-material/StarHalfRounded';
+import TuneIcon from '@mui/icons-material/TuneRounded';
+import SortIcon from '@mui/icons-material/SortRounded';
 // Booking requests — the pre-payment intent flow (f7/b8): nurse inbox + the pay-&-continue handoff
-import RequestsIcon from '@mui/icons-material/AssignmentOutlined';
-import PaymentIcon from '@mui/icons-material/CreditCardOutlined';
+import RequestsIcon from '@mui/icons-material/AssignmentRounded';
+import PaymentIcon from '@mui/icons-material/CreditCardRounded';
 // Bookings, sessions & EVV — the post-payment engagement (f8/b9): check-in/out, GPS, care instructions
-import CheckInIcon from '@mui/icons-material/LoginOutlined';
-import CheckOutIcon from '@mui/icons-material/LogoutOutlined';
-import GpsIcon from '@mui/icons-material/MyLocationOutlined';
-import ScheduleIcon from '@mui/icons-material/ScheduleOutlined';
-import ClinicalIcon from '@mui/icons-material/HealthAndSafetyOutlined';
-import MedicationIcon from '@mui/icons-material/MedicationOutlined';
-import EmergencyIcon from '@mui/icons-material/LocalPhoneOutlined';
-import LockIcon from '@mui/icons-material/LockOutlined';
+import CheckInIcon from '@mui/icons-material/LoginRounded';
+import CheckOutIcon from '@mui/icons-material/LogoutRounded';
+import GpsIcon from '@mui/icons-material/MyLocationRounded';
+import ScheduleIcon from '@mui/icons-material/ScheduleRounded';
+import ClinicalIcon from '@mui/icons-material/HealthAndSafetyRounded';
+import MedicationIcon from '@mui/icons-material/MedicationRounded';
+import EmergencyIcon from '@mui/icons-material/LocalPhoneRounded';
+import PhoneIcon from '@mui/icons-material/PhoneRounded';
+import LockIcon from '@mui/icons-material/LockRounded';
+import NavigateIcon from '@mui/icons-material/NavigationRounded';
 // BNPL — the installment-checkout surface (f11/b12): installment plans + repayment schedule
-import InstallmentsIcon from '@mui/icons-material/PaymentsOutlined';
+import InstallmentsIcon from '@mui/icons-material/PaymentsRounded';
 // Payouts — the nurse earnings & payout-history surface (f12/b13)
-import EarningsIcon from '@mui/icons-material/PaidOutlined';
+import EarningsIcon from '@mui/icons-material/PaidRounded';
 // Reviews & patient care records (f13/b14): visit-note authoring, record tabs, family-ownership banner
-import NotesIcon from '@mui/icons-material/NoteAltOutlined';
-import RoutineIcon from '@mui/icons-material/EventRepeatOutlined';
-import TasksIcon from '@mui/icons-material/ChecklistOutlined';
-import HistoryIcon from '@mui/icons-material/HistoryOutlined';
-import FamilyIcon from '@mui/icons-material/FamilyRestroomOutlined';
+import NotesIcon from '@mui/icons-material/NoteAltRounded';
+import RoutineIcon from '@mui/icons-material/EventRepeatRounded';
+import TasksIcon from '@mui/icons-material/ChecklistRounded';
+import HistoryIcon from '@mui/icons-material/HistoryRounded';
+import FamilyIcon from '@mui/icons-material/FamilyRestroomRounded';
 // Messaging (tickets) & notifications (f14/b15): support inbox + the message-send action
-import SupportIcon from '@mui/icons-material/SupportAgentOutlined';
-import SendIcon from '@mui/icons-material/SendOutlined';
+import SupportIcon from '@mui/icons-material/SupportAgentRounded';
+import SendIcon from '@mui/icons-material/SendRounded';
 // Admin backoffice & partner consoles (f15/b15): config, holidays, audit, alerts, moderation, partners, refunds
-import ConfigIcon from '@mui/icons-material/TuneOutlined';
-import CalendarIcon from '@mui/icons-material/CalendarMonthOutlined';
-import AuditIcon from '@mui/icons-material/FactCheckOutlined';
-import AlertsIcon from '@mui/icons-material/NotificationImportantOutlined';
-import ModerationIcon from '@mui/icons-material/GavelOutlined';
-import PartnersIcon from '@mui/icons-material/ApartmentOutlined';
-import RolesIcon from '@mui/icons-material/ManageAccountsOutlined';
-import RefundsIcon from '@mui/icons-material/CurrencyExchangeOutlined';
-import DownloadIcon from '@mui/icons-material/FileDownloadOutlined';
-import ExpandIcon from '@mui/icons-material/ExpandMoreOutlined';
-import ExternalIcon from '@mui/icons-material/OpenInNewOutlined';
-import AssignIcon from '@mui/icons-material/AssignmentIndOutlined';
+import CalendarIcon from '@mui/icons-material/CalendarMonthRounded';
+import AuditIcon from '@mui/icons-material/FactCheckRounded';
+import AlertsIcon from '@mui/icons-material/NotificationImportantRounded';
+import ModerationIcon from '@mui/icons-material/GavelRounded';
+import PartnersIcon from '@mui/icons-material/ApartmentRounded';
+import RolesIcon from '@mui/icons-material/ManageAccountsRounded';
+import RefundsIcon from '@mui/icons-material/CurrencyExchangeRounded';
+import DownloadIcon from '@mui/icons-material/FileDownloadRounded';
+import ExpandIcon from '@mui/icons-material/ExpandMoreRounded';
+import ExternalIcon from '@mui/icons-material/OpenInNewRounded';
+import AssignIcon from '@mui/icons-material/AssignmentIndRounded';
+// Cross-cutting affordances: back navigation, share/copy, attachments
+import BackIcon from '@mui/icons-material/ArrowBackRounded';
+import ShareIcon from '@mui/icons-material/ShareRounded';
+import CopyIcon from '@mui/icons-material/ContentCopyRounded';
+import AttachmentIcon from '@mui/icons-material/AttachFileRounded';
 
 /**
  * List of all available Icon names
@@ -112,21 +114,13 @@ export type IconName = keyof typeof ICONS;
  */
 export const ICONS /* Note: Setting type disables property autocomplete :( was - : Record<string, ComponentType> */ = {
   default: DefaultIcon,
-  logo: PencilIcon,
+  logo: LogoMark,
   close: CloseIcon,
   menu: MenuIcon,
-  settings: SettingsIcon,
-  visibilityon: VisibilityIcon,
-  visibilityoff: VisibilityOffIcon,
-  daynight: DayNightIcon,
-  night: NightIcon,
-  day: DayIcon,
   search: SearchIcon,
   info: InfoIcon,
   home: HomeIcon,
-  account: AccountCircle,
-  signup: PersonAddIcon,
-  login: PersonIcon,
+  account: AccountCircleIcon,
   logout: ExitToAppIcon,
   notifications: NotificationsIcon,
   error: DangerousIcon,
@@ -134,7 +128,7 @@ export const ICONS /* Note: Setting type disables property autocomplete :( was -
   patients: GroupsIcon,
   users: PeopleAltIcon,
   wallet: WalletIcon,
-  profile: PersonOutlineIcon,
+  profile: AccountCircleIcon,
   dashboard: DashboardIcon,
   verification: VerifiedUserIcon,
   verified: CheckCircleIcon,
@@ -165,7 +159,9 @@ export const ICONS /* Note: Setting type disables property autocomplete :( was -
   license: LicenseIcon,
   publish: PublishIcon,
   star: StarIcon,
+  star_half: StarHalfIcon,
   tune: TuneIcon,
+  sort: SortIcon,
   requests: RequestsIcon,
   payment: PaymentIcon,
   check_in: CheckInIcon,
@@ -175,7 +171,9 @@ export const ICONS /* Note: Setting type disables property autocomplete :( was -
   clinical: ClinicalIcon,
   medication: MedicationIcon,
   emergency: EmergencyIcon,
+  phone: PhoneIcon,
   lock: LockIcon,
+  navigate: NavigateIcon,
   installments: InstallmentsIcon,
   earnings: EarningsIcon,
   notes: NotesIcon,
@@ -185,7 +183,7 @@ export const ICONS /* Note: Setting type disables property autocomplete :( was -
   family: FamilyIcon,
   support: SupportIcon,
   send: SendIcon,
-  config: ConfigIcon,
+  config: TuneIcon,
   calendar: CalendarIcon,
   audit: AuditIcon,
   alerts: AlertsIcon,
@@ -197,4 +195,16 @@ export const ICONS /* Note: Setting type disables property autocomplete :( was -
   expand: ExpandIcon,
   external: ExternalIcon,
   assign: AssignIcon,
+  back: BackIcon,
+  chevron_start: BackIcon,
+  share: ShareIcon,
+  copy: CopyIcon,
+  attachment: AttachmentIcon,
 };
+
+/**
+ * Icons authored for LTR that must mirror horizontally under RTL (back arrows,
+ * chevrons pointing "start"). AppIcon applies the flip via a `data-icon-directional`
+ * attribute + the single CSS rule in globals.css — add a name here, nothing else.
+ */
+export const DIRECTIONAL_ICONS = new Set<IconName>(['back', 'chevron_start']);
diff --git a/client/src/components/common/AppIcon/icons/LogoLockup.tsx b/client/src/components/common/AppIcon/icons/LogoLockup.tsx
new file mode 100644
index 0000000..e6b5208
--- /dev/null
+++ b/client/src/components/common/AppIcon/icons/LogoLockup.tsx
@@ -0,0 +1,30 @@
+import { FunctionComponent } from 'react';
+import { IconProps } from '../utils';
+
+/**
+ * The full-color Balinyaar mark: deep-teal rounded-square ground, cream
+ * lowercase "b" glyph, single terracotta dot — the brand identity described
+ * in the frontend-designer skill. Colors are `var(--bal-*)` tokens (never a
+ * hex literal), so the mark tracks the color scheme like everything else.
+ * Used directly by BrandMark next to the translated wordmark — the wordmark
+ * stays real `<Typography>` text (not baked into the SVG) so it still
+ * switches with the locale. For an inline, single-color icon (e.g. inside a
+ * button) use AppIcon's `logo` name (LogoMark) instead.
+ * @component LogoLockup
+ */
+const LogoLockup: FunctionComponent<IconProps> = ({ size = 56, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width={size} height={size} {...props}>
+    <rect width="40" height="40" rx="10" fill="var(--bal-primary)" />
+    <path
+      fill="var(--bal-primary-contrast)"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M21,17 A7.5,7.5 0 1,0 21,32 A7.5,7.5 0 1,0 21,17 Z
+         M21,20.8 A3.7,3.7 0 1,0 21,28.2 A3.7,3.7 0 1,0 21,20.8 Z"
+    />
+    <rect x="12.9" y="9" width="4.8" height="22" rx="2.4" fill="var(--bal-primary-contrast)" />
+    <circle cx="28.5" cy="10.5" r="2.6" fill="var(--bal-secondary)" />
+  </svg>
+);
+
+export default LogoLockup;
diff --git a/client/src/components/common/AppIcon/icons/LogoMark.tsx b/client/src/components/common/AppIcon/icons/LogoMark.tsx
new file mode 100644
index 0000000..4c94411
--- /dev/null
+++ b/client/src/components/common/AppIcon/icons/LogoMark.tsx
@@ -0,0 +1,28 @@
+import { FunctionComponent } from 'react';
+import { IconProps } from '../utils';
+
+/**
+ * The Balinyaar monochrome mark — a lowercase "b" (stem + bowl) reduced to a
+ * single `currentColor` fill so it works like any other AppIcon: it recolors
+ * via the `color` prop and therefore for free across the light/dark scheme.
+ * The bowl's counter is a true transparent hole (evenodd fill-rule on two
+ * concentric circles), not a background-color cutout — it reads correctly on
+ * any surface. For the full-color brand lockup (auth splash, TopBar) see
+ * LogoLockup.tsx instead.
+ * @component LogoMark
+ */
+const LogoMark: FunctionComponent<IconProps> = ({ color = 'currentColor', ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" {...props}>
+    <path
+      fill={color}
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M19.5,15.3 A7.2,7.2 0 1,0 19.5,29.7 A7.2,7.2 0 1,0 19.5,15.3 Z
+         M19.5,18.9 A3.6,3.6 0 1,0 19.5,26.1 A3.6,3.6 0 1,0 19.5,18.9 Z"
+    />
+    <rect x="10.9" y="8" width="4.6" height="21" rx="2.3" fill={color} />
+    <circle cx="27" cy="10" r="2.4" fill={color} />
+  </svg>
+);
+
+export default LogoMark;
diff --git a/client/src/components/common/AppIcon/icons/PencilIcon.tsx b/client/src/components/common/AppIcon/icons/PencilIcon.tsx
deleted file mode 100644
index d992599..0000000
--- a/client/src/components/common/AppIcon/icons/PencilIcon.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { FunctionComponent } from 'react';
-import { IconProps } from '../utils';
-
-const PencilIcon: FunctionComponent<IconProps> = (props) => {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 36 36" {...props}>
-      <path
-        fill="#D99E82"
-        d="M35.222 33.598c-.647-2.101-1.705-6.059-2.325-7.566-.501-1.216-.969-2.438-1.544-3.014-.575-.575-1.553-.53-2.143.058 0 0-2.469 1.675-3.354 2.783-1.108.882-2.785 3.357-2.785 3.357-.59.59-.635 1.567-.06 2.143.576.575 1.798 1.043 3.015 1.544 1.506.62 5.465 1.676 7.566 2.325.359.11 1.74-1.271 1.63-1.63z"
-      />
-      <path
-        fill="#EA596E"
-        d="M13.643 5.308c1.151 1.151 1.151 3.016 0 4.167l-4.167 4.168c-1.151 1.15-3.018 1.15-4.167 0L1.141 9.475c-1.15-1.151-1.15-3.016 0-4.167l4.167-4.167c1.15-1.151 3.016-1.151 4.167 0l4.168 4.167z"
-      />
-      <path fill="#FFCC4D" d="M31.353 23.018l-4.17 4.17-4.163 4.165L7.392 15.726l8.335-8.334 15.626 15.626z" />
-      <path
-        fill="#292F33"
-        d="M32.078 34.763s2.709 1.489 3.441.757c.732-.732-.765-3.435-.765-3.435s-2.566.048-2.676 2.678z"
-      />
-      <path fill="#CCD6DD" d="M2.183 10.517l8.335-8.335 5.208 5.209-8.334 8.335z" />
-      <path
-        fill="#99AAB5"
-        d="M3.225 11.558l8.334-8.334 1.042 1.042L4.267 12.6zm2.083 2.086l8.335-8.335 1.042 1.042-8.335 8.334z"
-      />
-    </svg>
-  );
-};
-
-export default PencilIcon;
diff --git a/client/src/components/common/AppIconButton/AppIconButton.test.tsx b/client/src/components/common/AppIconButton/AppIconButton.test.tsx
index a985db7..eb7f06b 100644
--- a/client/src/components/common/AppIconButton/AppIconButton.test.tsx
+++ b/client/src/components/common/AppIconButton/AppIconButton.test.tsx
@@ -36,9 +36,10 @@ describe('<AppIconButton/> component', () => {
     const svg = button.querySelector('svg');
     expect(svg).toBeDefined();
     expect(svg).toHaveAttribute('data-icon', 'default'); // default icon
-    expect(svg).toHaveAttribute('size', String(APP_ICON_SIZE)); // default size
     expect(svg).toHaveAttribute('height', String(APP_ICON_SIZE)); // default size when .size is not set
     expect(svg).toHaveAttribute('width', String(APP_ICON_SIZE)); // default size when .size is not se
+    // Size is actually driven by fontSize, not a `size` DOM attribute (invalid on <svg>).
+    expect(svg).toHaveStyle(`font-size: ${APP_ICON_SIZE}px`);
   });
 
   it('supports .color property', () => {
diff --git a/client/src/components/common/AppImage/AppImage.test.tsx b/client/src/components/common/AppImage/AppImage.test.tsx
deleted file mode 100644
index afc7539..0000000
--- a/client/src/components/common/AppImage/AppImage.test.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { randomText } from '@/utils';
-import AppImage from './AppImage';
-
-const ComponentToTest = AppImage;
-
-/**
- * Tests for <AppImage/> component
- */
-describe('<AppImage/> component', () => {
-  const src = 'https:/domain.com/image.jpg';
-
-  it('renders itself', () => {
-    const testId = randomText(8);
-    render(<ComponentToTest data-testid={testId} src={src} />);
-    const image = screen.getByTestId(testId);
-    expect(image).toBeDefined();
-    expect(image).toHaveAttribute('src', src);
-    expect(image).toHaveAttribute('alt', 'Image'); // Default prop value
-    expect(image).toHaveAttribute('height', '256'); // Default prop value
-    expect(image).toHaveAttribute('width', '256'); // Default prop value
-  });
-
-  it('supports .width and .height props', () => {
-    const testId = randomText(8);
-    const height = 345;
-    const width = 123;
-    render(<ComponentToTest data-testid={testId} height={height} src={src} width={width} />);
-    const image = screen.getByTestId(testId);
-    expect(image).toBeDefined();
-    expect(image).toHaveAttribute('height', String(height));
-    expect(image).toHaveAttribute('width', String(width));
-  });
-
-  it('supports .title property', () => {
-    const testId = randomText(8);
-    const title = randomText(16);
-    render(<ComponentToTest data-testid={testId} src={src} title={title} />);
-    const image = screen.getByTestId(testId);
-    expect(image).toBeDefined();
-    expect(image).toHaveAttribute('title', title);
-    expect(image).toHaveAttribute('alt', title); // When title is provided, it is used as alt
-  });
-
-  it('supports .alt property even when .title is provided', () => {
-    const testId = randomText(8);
-    const title = randomText(16);
-    const alt = randomText(32);
-    render(<ComponentToTest alt={alt} data-testid={testId} src={src} title={title} />);
-    const image = screen.getByTestId(testId);
-    expect(image).toBeDefined();
-    expect(image).toHaveAttribute('alt', alt);
-    expect(image).toHaveAttribute('title', title);
-  });
-});
diff --git a/client/src/components/common/AppImage/AppImage.tsx b/client/src/components/common/AppImage/AppImage.tsx
deleted file mode 100644
index 9136e1d..0000000
--- a/client/src/components/common/AppImage/AppImage.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { FunctionComponent } from 'react';
-import NextImage, { ImageProps } from 'next/image';
-
-interface AppImageProps extends Omit<ImageProps, 'alt'> {
-  alt?: string; // Make property optional as it was before NextJs v13
-}
-
-/**
- * Application wrapper around NextJS image with some default props
- * @component AppImage
- */
-const AppImage: FunctionComponent<AppImageProps> = ({
-  title, // Note: value has be destructed before usage as default value for other property
-  alt = title ?? 'Image',
-  height = 256,
-  width = 256,
-  ...restOfProps
-}) => {
-  // Uses custom loader + unoptimized="true" to avoid NextImage warning https://nextjs.org/docs/api-reference/next/image#unoptimized
-  return <NextImage alt={alt} height={height} title={title} unoptimized={true} width={width} {...restOfProps} />;
-};
-
-export default AppImage;
diff --git a/client/src/components/common/AppImage/index.tsx b/client/src/components/common/AppImage/index.tsx
deleted file mode 100644
index 04d5e0c..0000000
--- a/client/src/components/common/AppImage/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import AppImage from './AppImage';
-
-export { AppImage as default, AppImage };
diff --git a/client/src/components/common/index.tsx b/client/src/components/common/index.tsx
index ace3ece..b3e1996 100644
--- a/client/src/components/common/index.tsx
+++ b/client/src/components/common/index.tsx
@@ -2,9 +2,8 @@ import AppAlert from './AppAlert';
 import AppButton from './AppButton';
 import AppIcon from './AppIcon';
 import AppIconButton from './AppIconButton';
-import AppImage from './AppImage';
 import AppLink from './AppLink';
 import AppLoading from './AppLoading';
 import ErrorBoundary from './ErrorBoundary';
 
-export { ErrorBoundary, AppAlert, AppButton, AppIcon, AppIconButton, AppImage, AppLink, AppLoading };
+export { ErrorBoundary, AppAlert, AppButton, AppIcon, AppIconButton, AppLink, AppLoading };
diff --git a/client/src/components/config.ts b/client/src/components/config.ts
index a4ae27d..1266d0c 100644
--- a/client/src/components/config.ts
+++ b/client/src/components/config.ts
@@ -2,19 +2,24 @@
  * Components configuration
  */
 export const CONTENT_MAX_WIDTH = 800;
-export const CONTENT_MIN_WIDTH = 320; // CONTENT_MAX_WIDTH - Sidebar width
+// The reading-width column (800) does not derive from the sidebar width (240,
+// see layout/config.ts SIDE_BAR_WIDTH) — they're independent decisions. 320 is
+// a standalone minimum so narrow viewports never squeeze content unreadably.
+export const CONTENT_MIN_WIDTH = 320;
 
 /**
- * AppAlert and AppSnackBarAlert components
+ * AppAlert and AppSnackBarAlert components.
+ * A bare <AppAlert> defaults to a calm, non-alarming baseline — genuinely
+ * error-severity call-sites must pass severity="error" explicitly. `standard`
+ * pairs with the semantic palette (colors.ts) so inline alerts match toasts.
  */
-export const APP_ALERT_SEVERITY = 'error'; // 'error' | 'info'| 'success' | 'warning'
-export const APP_ALERT_VARIANT = 'filled'; // 'filled' | 'outlined' | 'standard'
+export const APP_ALERT_SEVERITY = 'info'; // 'error' | 'info'| 'success' | 'warning'
+export const APP_ALERT_VARIANT = 'standard'; // 'filled' | 'outlined' | 'standard'
 
 /**
  * AppButton component
  */
 export const APP_BUTTON_VARIANT = 'contained'; // | 'text' | 'outlined'
-export const APP_BUTTON_MARGIN = 1;
 
 /**
  * AppIcon component
diff --git a/client/src/components/geography/AddressCard.tsx b/client/src/components/geography/AddressCard.tsx
index 957a9d1..d39339f 100644
--- a/client/src/components/geography/AddressCard.tsx
+++ b/client/src/components/geography/AddressCard.tsx
@@ -70,7 +70,7 @@ const AddressCard: FunctionComponent<AddressCardProps> = ({
             color="primary"
             disabled={settingPrimary}
             onClick={onSetPrimary}
-            sx={{ m: 0, mt: 0.25, alignSelf: 'flex-start' }}
+            sx={{ mt: 0.25, alignSelf: 'flex-start' }}
           >
             {setPrimaryLabel}
           </AppButton>
diff --git a/client/src/components/geography/AddressForm.tsx b/client/src/components/geography/AddressForm.tsx
index f846c7c..4cc0861 100644
--- a/client/src/components/geography/AddressForm.tsx
+++ b/client/src/components/geography/AddressForm.tsx
@@ -149,11 +149,11 @@ const AddressForm: FunctionComponent<AddressFormProps> = ({ initial, submitting
 
       <Stack direction="row" sx={{ gap: 1, justifyContent: 'flex-end' }}>
         {onCancel ? (
-          <AppButton variant="text" onClick={onCancel} disabled={submitting} sx={{ m: 0 }}>
+          <AppButton variant="text" onClick={onCancel} disabled={submitting}>
             {tc('cancel')}
           </AppButton>
         ) : null}
-        <AppButton color="primary" variant="contained" onClick={handleSubmit} disabled={submitting} sx={{ m: 0 }}>
+        <AppButton color="primary" variant="contained" onClick={handleSubmit} disabled={submitting}>
           {submitting ? tc('saving') : tc('save')}
         </AppButton>
       </Stack>
diff --git a/client/src/components/messaging/BookingSupportEntry.tsx b/client/src/components/messaging/BookingSupportEntry.tsx
index 19ea44d..fd5bf38 100644
--- a/client/src/components/messaging/BookingSupportEntry.tsx
+++ b/client/src/components/messaging/BookingSupportEntry.tsx
@@ -53,7 +53,6 @@ const BookingSupportEntry: FunctionComponent<BookingSupportEntryProps> = ({ book
         color="primary"
         startIcon="support"
         onClick={() => setDialogOpen(true)}
-        sx={{ m: 0 }}
       >
         {t('open_from_booking')}
       </AppButton>
diff --git a/client/src/components/messaging/TicketInboxScreen.tsx b/client/src/components/messaging/TicketInboxScreen.tsx
index 007e031..0e1949f 100644
--- a/client/src/components/messaging/TicketInboxScreen.tsx
+++ b/client/src/components/messaging/TicketInboxScreen.tsx
@@ -48,7 +48,6 @@ const TicketInboxScreen: FunctionComponent<TicketInboxScreenProps> = ({ role })
           color="primary"
           startIcon="support"
           onClick={() => setDialogOpen(true)}
-          sx={{ m: 0 }}
         >
           {t('contact_support')}
         </AppButton>
diff --git a/client/src/components/messaging/TicketThreadScreen.tsx b/client/src/components/messaging/TicketThreadScreen.tsx
index 2051fa3..16b8831 100644
--- a/client/src/components/messaging/TicketThreadScreen.tsx
+++ b/client/src/components/messaging/TicketThreadScreen.tsx
@@ -43,7 +43,7 @@ const TicketThreadScreen: FunctionComponent<TicketThreadScreenProps> = ({ role,
 
   return (
     <Stack sx={{ gap: 2, maxWidth: 720, mx: 'auto', width: '100%' }}>
-      <AppButton variant="text" color="primary" onClick={goBack} sx={{ m: 0, alignSelf: 'flex-start' }}>
+      <AppButton variant="text" color="primary" onClick={goBack} sx={{ alignSelf: 'flex-start' }}>
         {t('back_to_tickets')}
       </AppButton>
 
diff --git a/client/src/components/notifications/NotificationCenter.tsx b/client/src/components/notifications/NotificationCenter.tsx
index 7fb19f6..b6afd54 100644
--- a/client/src/components/notifications/NotificationCenter.tsx
+++ b/client/src/components/notifications/NotificationCenter.tsx
@@ -61,7 +61,6 @@ const NotificationCenter: FunctionComponent<NotificationCenterProps> = ({ role }
             color="primary"
             onClick={() => markAll.mutate()}
             disabled={markAll.isPending}
-            sx={{ m: 0 }}
           >
             {t('mark_all_read')}
           </AppButton>
diff --git a/client/src/lib/cookies/server.ts b/client/src/lib/cookies/server.ts
index a6a709e..c87f59d 100644
--- a/client/src/lib/cookies/server.ts
+++ b/client/src/lib/cookies/server.ts
@@ -27,29 +27,32 @@ export async function getServerCookie(name: string): Promise<string | undefined>
  * Read the persisted color scheme from the request cookie and return the two
  * values the root layout needs:
  *
- *   colorScheme  — 'light' | 'dark'   for data-mui-color-scheme on <html>
- *   defaultMode  — 'light' | 'dark' | 'system'  for ThemeProvider's defaultMode
+ *   colorScheme  — 'light' | 'dark' | undefined   for data-mui-color-scheme on <html>
+ *   defaultMode  — 'light' | 'dark' | 'system'     for ThemeProvider's defaultMode
  *
- * When the cookie is absent (first ever visit) defaultMode is 'system' so
- * MUI uses the OS preference as its starting point, matching what
- * ColorSchemeScript does in the inline browser script.
- * On all subsequent visits the stored value is used for both fields, making
- * the server, the inline script, and MUI agree before the first paint.
+ * When the cookie is absent (first ever visit), colorScheme is `undefined` so
+ * the layout renders <html> WITHOUT a data-mui-color-scheme attribute at all —
+ * tokens.css then falls through to its `@media (prefers-color-scheme: dark)`
+ * block (scoped to the attribute being absent) for the very first paint,
+ * with zero JS. defaultMode stays 'system' so MUI resolves the same OS
+ * preference once it hydrates and stamps the attribute itself — CSS and MUI
+ * agree, so there is nothing to visibly flip.
+ * On all subsequent visits the stored value is used for both fields.
  */
 export async function getThemeMode(): Promise<{
-  colorScheme: 'light' | 'dark';
+  colorScheme: 'light' | 'dark' | undefined;
   defaultMode: 'light' | 'dark' | 'system';
 }> {
   const value = await getServerCookie(COOKIE_NAMES.COLOR_SCHEME);
   if (value === 'dark') return { colorScheme: 'dark', defaultMode: 'dark' };
   if (value === 'light') return { colorScheme: 'light', defaultMode: 'light' };
-  return { colorScheme: 'light', defaultMode: 'system' };
+  return { colorScheme: undefined, defaultMode: 'system' };
 }
 
 /** @deprecated Use getThemeMode() instead */
 export async function getColorSchemeCookie(): Promise<'light' | 'dark'> {
   const { colorScheme } = await getThemeMode();
-  return colorScheme;
+  return colorScheme ?? 'light';
 }
 
 /**
diff --git a/client/src/theme/ThemeProvider.tsx b/client/src/theme/ThemeProvider.tsx
index 8036d16..861d551 100644
--- a/client/src/theme/ThemeProvider.tsx
+++ b/client/src/theme/ThemeProvider.tsx
@@ -11,9 +11,11 @@ import { APP_THEME_LTR, APP_THEME_RTL } from './theme';
 
 /**
  * Writes the resolved color scheme to our cookie whenever MUI's state changes.
- * Acts as a safety net for the first-visit / system-mode case where the
- * Storage.prototype intercept in ColorSchemeScript has nothing to intercept yet
- * (no setItem call fires until the user explicitly toggles).
+ * On a cookie-less first visit the server never learns the OS-resolved scheme
+ * (tokens.css's `@media (prefers-color-scheme: dark)` fallback paints it, but
+ * that's CSS-only — nothing tells the server) — this is what turns that visit
+ * into a "returning visitor" with an explicit cookie next time, even before
+ * the user ever manually toggles.
  */
 function ColorSchemeCookieSync() {
   const { colorScheme } = useColorScheme();
diff --git a/client/src/theme/colors.ts b/client/src/theme/colors.ts
index 0aa88c8..f309db7 100644
--- a/client/src/theme/colors.ts
+++ b/client/src/theme/colors.ts
@@ -26,6 +26,26 @@ export const BRAND = {
   tealSurface:       '#16302a',
 } as const;
 
+/*
+ * Semantic feedback colors — mirrors tokens.css --bal-{success,error,warning,info}.
+ * Feeds MUI's palette.{success,error,warning,info} so Alert/Chip/Badge/LinearProgress
+ * render brand-harmonized instead of MUI's stock green/red — the same colors the
+ * notistack toasts already use (NotistackProvider reads the CSS tokens directly).
+ */
+const LIGHT_FEEDBACK: PaletteOptions = {
+  success: { main: '#1f6b50', contrastText: '#f3efe9' },
+  error:   { main: '#a8392a', contrastText: '#f3efe9' },
+  warning: { main: '#8a6418', contrastText: '#f3efe9' },
+  info:    { main: '#1d4a40', contrastText: '#f3efe9' },
+};
+
+const DARK_FEEDBACK: PaletteOptions = {
+  success: { main: '#257659', contrastText: '#f3efe9' },
+  error:   { main: '#b5402f', contrastText: '#f3efe9' },
+  warning: { main: '#97701f', contrastText: '#f3efe9' },
+  info:    { main: '#2f6b5e', contrastText: '#f3efe9' },
+};
+
 export const LIGHT_PALETTE: PaletteOptions = {
   primary: {
     main:         BRAND.teal,
@@ -48,6 +68,7 @@ export const LIGHT_PALETTE: PaletteOptions = {
     secondary: '#5b655f',
   },
   divider: 'rgba(29, 74, 64, 0.14)',
+  ...LIGHT_FEEDBACK,
 };
 
 export const DARK_PALETTE: PaletteOptions = {
@@ -72,4 +93,5 @@ export const DARK_PALETTE: PaletteOptions = {
     secondary: '#9fb0a9',
   },
   divider: 'rgba(243, 239, 233, 0.14)',
+  ...DARK_FEEDBACK,
 };
diff --git a/client/src/theme/dark.ts b/client/src/theme/dark.ts
deleted file mode 100644
index 5597a70..0000000
--- a/client/src/theme/dark.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ThemeOptions } from '@mui/material';
-import { DARK_PALETTE } from './colors';
-import { TYPOGRAPHY } from './typography';
-
-export const DARK_THEME: ThemeOptions = {
-  palette: { mode: 'dark', ...DARK_PALETTE },
-  typography: TYPOGRAPHY,
-  shape: { borderRadius: 10 },
-};
-
-export default DARK_THEME;
diff --git a/client/src/theme/index.ts b/client/src/theme/index.ts
index ef58670..7550c94 100644
--- a/client/src/theme/index.ts
+++ b/client/src/theme/index.ts
@@ -1,17 +1,10 @@
 import AppThemeProvider from './ThemeProvider';
-import { LIGHT_THEME } from './light';
-import { DARK_THEME } from './dark';
-import APP_THEME, { APP_THEME_LTR, APP_THEME_RTL } from './theme';
+import { APP_THEME_LTR, APP_THEME_RTL } from './theme';
 import { getDirection } from './direction';
 
-
 export {
-  APP_THEME,
   APP_THEME_LTR,
   APP_THEME_RTL,
-  LIGHT_THEME,
-  DARK_THEME,
-  LIGHT_THEME as default,
   AppThemeProvider as ThemeProvider,
   getDirection,
 };
diff --git a/client/src/theme/light.ts b/client/src/theme/light.ts
deleted file mode 100644
index 615ee9f..0000000
--- a/client/src/theme/light.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ThemeOptions } from '@mui/material';
-import { LIGHT_PALETTE } from './colors';
-import { TYPOGRAPHY } from './typography';
-
-export const LIGHT_THEME: ThemeOptions = {
-  palette: { mode: 'light', ...LIGHT_PALETTE },
-  typography: TYPOGRAPHY,
-  shape: { borderRadius: 10 },
-};
-
-export default LIGHT_THEME;
diff --git a/client/src/theme/theme.ts b/client/src/theme/theme.ts
index c0cf763..fe9aa29 100644
--- a/client/src/theme/theme.ts
+++ b/client/src/theme/theme.ts
@@ -1,7 +1,22 @@
-import { createTheme } from '@mui/material/styles';
+import { createTheme, responsiveFontSizes, Shadows } from '@mui/material/styles';
 import { LIGHT_PALETTE, DARK_PALETTE } from './colors';
 import { TYPOGRAPHY_LTR, TYPOGRAPHY_RTL } from './typography';
 
+/*
+ * Teal-tinted elevation — replaces MUI's default grey shadow stack across
+ * EVERY component that reads theme.shadows[n] (Paper, Card, Dialog, Menu,
+ * Popover, AppBar elevation, Autocomplete…), not just the ones this file
+ * overrides directly. Tiered onto the three --bal-shadow-* steps (tokens.css)
+ * so low elevations (cards) stay subtle and high ones (dialogs, menus) read
+ * clearly raised without ever going stock-MUI grey.
+ */
+const TEAL_SHADOWS = Array.from({ length: 25 }, (_, index) => {
+  if (index === 0) return 'none';
+  if (index <= 4) return 'var(--bal-shadow-1)';
+  if (index <= 12) return 'var(--bal-shadow-2)';
+  return 'var(--bal-shadow-3)';
+}) as unknown as Shadows;
+
 /*
  * Theme factory — called twice at module load (ltr + rtl) so components can
  * pick the right theme without re-creating it on every render.
@@ -15,9 +30,13 @@ import { TYPOGRAPHY_LTR, TYPOGRAPHY_RTL } from './typography';
  *   → MUI flips inline-start/end padding for components that care.
  *   → ThemeProvider pairs this with a direction-aware Emotion cache that
  *     runs stylis-plugin-rtl so all generated CSS is mirrored correctly.
+ *
+ * Every override below references `var(--bal-*)` tokens (tokens.css) — never
+ * a raw hex — and only logical CSS properties, so the same override is
+ * correct in both APP_THEME_LTR and APP_THEME_RTL.
  */
 function createAppTheme(direction: 'ltr' | 'rtl') {
-  return createTheme({
+  const theme = createTheme({
     cssVariables: {
       // MUI v9: 'data' produces boolean attrs (data-dark / data-light) which our
       // CSS never matches. An explicit attribute name produces the keyed form:
@@ -30,9 +49,149 @@ function createAppTheme(direction: 'ltr' | 'rtl') {
     },
     defaultColorScheme: 'light',
     typography: direction === 'rtl' ? TYPOGRAPHY_RTL : TYPOGRAPHY_LTR,
-    shape: { borderRadius: 10 },
+    shape: { borderRadius: 10 }, // house radius — mirrors --bal-radius-md
     direction,
+    shadows: TEAL_SHADOWS,
+    components: {
+      MuiCssBaseline: {
+        styleOverrides: {
+          // Today exactly one hand-rolled :focus-visible rule exists in the app
+          // (NurseResultCard). This makes keyboard focus uniform everywhere.
+          '*:focus-visible': {
+            outline: '2px solid var(--bal-focus-ring)',
+            outlineOffset: '2px',
+          },
+        },
+      },
+      MuiButton: {
+        defaultProps: { disableElevation: true },
+        styleOverrides: {
+          root: {
+            borderRadius: 'var(--bal-radius-sm)',
+            paddingInline: 20,
+            paddingBlock: 9,
+          },
+        },
+      },
+      MuiPaper: {
+        styleOverrides: {
+          root: {
+            backgroundImage: 'none',
+            border: '1px solid var(--bal-divider)',
+          },
+        },
+      },
+      MuiAppBar: {
+        defaultProps: { color: 'transparent', elevation: 0 },
+        styleOverrides: {
+          root: {
+            backgroundColor: 'var(--bal-bg-paper)',
+            backgroundImage: 'none',
+            color: 'var(--bal-text-primary)',
+            borderBottom: '1px solid var(--bal-divider)',
+          },
+        },
+      },
+      MuiOutlinedInput: {
+        styleOverrides: {
+          root: {
+            borderRadius: 'var(--bal-radius-sm)',
+            '& .MuiOutlinedInput-notchedOutline': { borderColor: 'var(--bal-divider)' },
+            '&:hover .MuiOutlinedInput-notchedOutline': { borderColor: 'var(--bal-primary)' },
+          },
+        },
+      },
+      MuiChip: {
+        styleOverrides: {
+          root: { fontWeight: 500, borderRadius: 'var(--bal-radius-sm)' },
+          outlined: { borderColor: 'var(--bal-divider)' },
+          filled: ({ ownerState }: { ownerState: { color?: string } }) =>
+            !ownerState.color || ownerState.color === 'default'
+              ? { backgroundColor: 'var(--bal-primary-soft)', color: 'var(--bal-primary)' }
+              : {},
+        },
+      },
+      MuiToggleButton: {
+        styleOverrides: {
+          root: {
+            border: '1px solid var(--bal-divider)',
+            textTransform: 'none',
+            '&.Mui-selected': {
+              backgroundColor: 'var(--bal-primary-soft)',
+              color: 'var(--bal-primary)',
+            },
+            '&.Mui-selected:hover': { backgroundColor: 'var(--bal-primary-soft)' },
+          },
+        },
+      },
+      MuiListItemButton: {
+        styleOverrides: {
+          root: {
+            borderRadius: 'var(--bal-radius-sm)',
+            '&.Mui-selected': {
+              backgroundColor: 'var(--bal-primary-soft)',
+              color: 'var(--bal-primary)',
+            },
+            '&.Mui-selected:hover': { backgroundColor: 'var(--bal-primary-soft)' },
+          },
+        },
+      },
+      MuiDialog: {
+        styleOverrides: {
+          paper: {
+            borderRadius: 'var(--bal-radius-lg)',
+            margin: 16,
+            width: 'calc(100% - 32px)',
+          },
+        },
+      },
+      MuiTabs: {
+        styleOverrides: {
+          indicator: {
+            height: 3,
+            borderRadius: '3px 3px 0 0',
+          },
+        },
+      },
+      MuiTab: {
+        styleOverrides: {
+          root: { minHeight: 48, textTransform: 'none' },
+        },
+      },
+      MuiAlert: {
+        styleOverrides: {
+          root: { borderRadius: 'var(--bal-radius-sm)' },
+        },
+      },
+      MuiStepIcon: {
+        styleOverrides: {
+          root: {
+            color: 'var(--bal-divider)',
+            '&.Mui-active': { color: 'var(--bal-primary)' },
+            '&.Mui-completed': { color: 'var(--bal-primary)' },
+          },
+        },
+      },
+      MuiSkeleton: {
+        styleOverrides: {
+          root: { backgroundColor: 'var(--bal-primary-soft)' },
+        },
+      },
+      MuiTooltip: {
+        styleOverrides: {
+          tooltip: {
+            backgroundColor: 'var(--bal-text-primary)',
+            color: 'var(--bal-bg-paper)',
+            borderRadius: 'var(--bal-radius-sm)',
+            fontSize: '0.75rem',
+          },
+          arrow: { color: 'var(--bal-text-primary)' },
+        },
+      },
+    },
   });
+
+  return responsiveFontSizes(theme);
 }
 
 export const APP_THEME_LTR = createAppTheme('ltr');
diff --git a/client/src/theme/tokens.css b/client/src/theme/tokens.css
index 094cfe5..de51dd1 100644
--- a/client/src/theme/tokens.css
+++ b/client/src/theme/tokens.css
@@ -1,23 +1,57 @@
 /*
  * Balinyaar brand color tokens — source of truth for all colors.
  *
- * Palette extracted from the seed-deck proposal (balinyaar.html):
+ * Brand identity (construction + rationale): .claude/skills/frontend-designer/SKILL.md.
  *   #1d4a40  deep teal / forest-green  → brand primary
  *   #d98c6a  terracotta                → brand accent (secondary)
  *   #f3efe9  soft cream                → text-on-dark / glyph fill
  *   #faf9f5  cream                     → page surface
  *
  * MUI sets  data-mui-color-scheme="dark"  on <html> when dark mode is active
- * (colorSchemeSelector: 'data' in createTheme).  The same attribute drives
- * every custom CSS rule in this file.  You never need to read or write
- * this attribute manually — MUI's useColorScheme() does it for you.
+ * (colorSchemeSelector: 'data-mui-color-scheme' in createTheme). The same
+ * attribute drives every custom CSS rule in this file. You never need to
+ * read or write this attribute manually — MUI's useColorScheme() does it for
+ * you at runtime.
+ *
+ * No-flash boot (no JS): when a returning visitor's `color-scheme` cookie is
+ * present, the server stamps the attribute directly and the explicit
+ * `[data-mui-color-scheme]` blocks below apply immediately — zero flash. On a
+ * cookie-less FIRST visit the server renders <html> WITHOUT the attribute
+ * (see lib/cookies/server.ts getThemeMode()), so the `@media
+ * (prefers-color-scheme: dark)` block below — scoped to the attribute being
+ * absent — paints the OS-preferred scheme immediately, with no script. Once
+ * MUI hydrates (ThemeProvider defaultMode="system") it resolves the same
+ * media query and stamps the attribute itself; the values already match, so
+ * there is nothing to visibly flip. The dark values therefore appear twice
+ * below (the media-query fallback + the explicit attribute block) — keep
+ * both in sync when changing a dark-scheme value.
  *
  * Usage in custom CSS outside MUI:
  *   color: var(--bal-primary);          ← resolves to the active scheme value
  *   background: var(--bal-bg-default);
+ *
+ * Sync rule: any color added/changed here also lands in colors.ts (LIGHT_PALETTE/
+ * DARK_PALETTE) when it's palette-level (success/error/warning/info, primary,
+ * secondary…). Non-palette tokens (elevation, radius, motion, focus, rating,
+ * trust, money-emphasis) are define-only here — colors.ts never needs them.
  */
 
-/* ── Light scheme (default) ────────────────────────────────────────────── */
+/* ── Scheme-independent tokens (radius scale, motion) ──────────────────── */
+:root {
+  /* Radius scale — controls / cards / dialogs. shape.borderRadius (theme.ts)
+     mirrors --bal-radius-md; never invent a radius per component. */
+  --bal-radius-sm: 4px;
+  --bal-radius-md: 10px;
+  --bal-radius-lg: 16px;
+
+  /* Motion — durations + easing, consumed by the phase-12 motion pass */
+  --bal-motion-fast: 120ms;
+  --bal-motion-base: 200ms;
+  --bal-motion-slow: 300ms;
+  --bal-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ── Light scheme — the unconditional default ──────────────────────────── */
 :root,
 [data-mui-color-scheme='light'] {
   /* Primary — deep teal */
@@ -56,16 +90,86 @@
   --bal-warning-contrast: #f3efe9;
   --bal-info:             #1d4a40;
   --bal-info-contrast:    #f3efe9;
+
+  /* Elevation — teal-tinted shadow steps (replaces MUI's grey default stack).
+     Consumed by theme.ts's `shadows` array + the MuiPaper/MuiDialog overrides. */
+  --bal-shadow-1: 0 1px 2px rgba(29, 74, 64, 0.06), 0 1px 1px rgba(29, 74, 64, 0.04);
+  --bal-shadow-2: 0 4px 12px rgba(29, 74, 64, 0.10), 0 2px 4px rgba(29, 74, 64, 0.06);
+  --bal-shadow-3: 0 12px 32px rgba(29, 74, 64, 0.14), 0 4px 8px rgba(29, 74, 64, 0.08);
+
+  /* Focus ring — global :focus-visible treatment (MuiCssBaseline, theme.ts) */
+  --bal-focus-ring: #1d4a40;
+
+  /* Rating stars — RatingInput's star fill/empty (retires the muddy --bal-warning use) */
+  --bal-rating:       #c8971e;
+  --bal-rating-empty: rgba(29, 74, 64, 0.20);
+
+  /* Trust — a distinct identity for verified marks, separate from primary/success */
+  --bal-trust:      #2b6ca8;
+  --bal-trust-soft: rgba(43, 108, 168, 0.12);
+
+  /* Money emphasis — AA-contrast-safe money-text color (terracotta itself fails
+     AA at small sizes on white: #d98c6a ≈ 2:1). Never use --bal-secondary for
+     small money text; use this instead. */
+  --bal-money-emphasis: #8a4a2f;
 }
 
-/* ── Dark scheme ────────────────────────────────────────────────────────── */
+/* ── Dark scheme — OS-preference fallback for the cookie-less first visit ── */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mui-color-scheme]) {
+    --bal-primary:          #6fc0ac;
+    --bal-primary-light:    #8fd2c1;
+    --bal-primary-dark:     #3f8a78;
+    --bal-primary-contrast: #06120f;
+    --bal-primary-soft:     rgba(111, 192, 172, 0.16);
+
+    --bal-secondary:          #e6a98a;
+    --bal-secondary-light:    #f0bfa3;
+    --bal-secondary-dark:     #d98c6a;
+    --bal-secondary-contrast: #2a1a12;
+    --bal-secondary-soft:     rgba(230, 169, 138, 0.18);
+
+    --bal-bg-default: #0f1c19;
+    --bal-bg-paper:   #16302a;
+
+    --bal-text-primary:   #f3efe9;
+    --bal-text-secondary: #9fb0a9;
+
+    --bal-divider: rgba(243, 239, 233, 0.14);
+
+    --bal-success:          #257659;
+    --bal-success-contrast: #f3efe9;
+    --bal-error:            #b5402f;
+    --bal-error-contrast:   #f3efe9;
+    --bal-warning:          #97701f;
+    --bal-warning-contrast: #f3efe9;
+    --bal-info:             #2f6b5e;
+    --bal-info-contrast:    #f3efe9;
+
+    --bal-shadow-1: 0 1px 2px rgba(6, 18, 15, 0.24), 0 1px 1px rgba(6, 18, 15, 0.16);
+    --bal-shadow-2: 0 4px 12px rgba(6, 18, 15, 0.32), 0 2px 4px rgba(6, 18, 15, 0.20);
+    --bal-shadow-3: 0 12px 32px rgba(6, 18, 15, 0.40), 0 4px 8px rgba(6, 18, 15, 0.24);
+
+    --bal-focus-ring: #6fc0ac;
+
+    --bal-rating:       #e0b542;
+    --bal-rating-empty: rgba(243, 239, 233, 0.20);
+
+    --bal-trust:      #7fb8e6;
+    --bal-trust-soft: rgba(127, 184, 230, 0.18);
+
+    --bal-money-emphasis: #f0bfa3;
+  }
+}
+
+/* ── Dark scheme — explicit (cookie present, or after MUI hydrates/toggles).
+      Keep every value identical to the @media block above. ──────────────── */
 [data-mui-color-scheme='dark'] {
   /* Primary — lifted teal (readable on dark surfaces) */
   --bal-primary:          #6fc0ac;
   --bal-primary-light:    #8fd2c1;
   --bal-primary-dark:     #3f8a78;
   --bal-primary-contrast: #06120f;
-  /* Soft primary tint — selected chips, subtle info panels */
   --bal-primary-soft:     rgba(111, 192, 172, 0.16);
 
   /* Secondary — warm terracotta-light */
@@ -73,7 +177,6 @@
   --bal-secondary-light:    #f0bfa3;
   --bal-secondary-dark:     #d98c6a;
   --bal-secondary-contrast: #2a1a12;
-  /* Soft terracotta tint — the "نمای پرستار" nurse-view chip + EVV/financial affordances */
   --bal-secondary-soft:     rgba(230, 169, 138, 0.18);
 
   /* Surfaces — deep teal */
@@ -96,4 +199,23 @@
   --bal-warning-contrast: #f3efe9;
   --bal-info:             #2f6b5e;
   --bal-info-contrast:    #f3efe9;
+
+  /* Elevation — black-teal shadow steps (deeper + darker than light scheme) */
+  --bal-shadow-1: 0 1px 2px rgba(6, 18, 15, 0.24), 0 1px 1px rgba(6, 18, 15, 0.16);
+  --bal-shadow-2: 0 4px 12px rgba(6, 18, 15, 0.32), 0 2px 4px rgba(6, 18, 15, 0.20);
+  --bal-shadow-3: 0 12px 32px rgba(6, 18, 15, 0.40), 0 4px 8px rgba(6, 18, 15, 0.24);
+
+  /* Focus ring */
+  --bal-focus-ring: #6fc0ac;
+
+  /* Rating stars */
+  --bal-rating:       #e0b542;
+  --bal-rating-empty: rgba(243, 239, 233, 0.20);
+
+  /* Trust */
+  --bal-trust:      #7fb8e6;
+  --bal-trust-soft: rgba(127, 184, 230, 0.18);
+
+  /* Money emphasis — lifted warm tone, readable on dark surfaces */
+  --bal-money-emphasis: #f0bfa3;
 }
diff --git a/client/src/theme/typography.ts b/client/src/theme/typography.ts
index b033efa..dbd368b 100644
--- a/client/src/theme/typography.ts
+++ b/client/src/theme/typography.ts
@@ -1,7 +1,8 @@
 import { TypographyVariantsOptions } from '@mui/material';
 
-/** Space Grotesk CSS variable. Not currently wired to a font loader; the LTR
- *  stack falls back to the system fonts until it is added to the locale layout. */
+/** Space Grotesk CSS variable, wired via next/font/google in
+ *  src/app/[locale]/layout.tsx, attached to <html> only on `en` routes
+ *  (mirrors the Mikhak/`fa` pattern — never loaded in a component). */
 export const BRAND_FONT_VARIABLE_EN = '--font-space-grotesk';
 
 /** CSS variable injected by next/font/local (Mikhak), attached to <html> only
@@ -24,32 +25,82 @@ const DISPLAY_FONT_LTR = `var(${BRAND_FONT_VARIABLE_EN}), "Space Grotesk", ${SYS
 /** Persian display + body font with graceful fallbacks. */
 const DISPLAY_FONT_RTL = `var(${BRAND_FONT_VARIABLE_FA}), "Mikhak", "Tahoma", "Arial Unicode MS", sans-serif`;
 
-const displayHeadingLtr = { fontFamily: DISPLAY_FONT_LTR, fontWeight: 700 } as const;
-const displayHeadingRtl = { fontFamily: DISPLAY_FONT_RTL, fontWeight: 700 } as const;
+/*
+ * Weight system: both Mikhak (fa) and Space Grotesk (en) load only 400/500/700
+ * (see the font declarations in app/[locale]/layout.tsx) — there is no 600
+ * face in either family, so a theme/sx `fontWeight: 600` silently renders 700
+ * (CSS font-matching resolves upward to the nearest loaded weight). This theme
+ * therefore never requests 600: headings + buttons use 700, in-text emphasis
+ * (subtitles, chip labels, stat emphasis) uses 500. Follow this convention in
+ * new component styles instead of reintroducing 600.
+ */
+const WEIGHT_HEADING = 700;
+const WEIGHT_EMPHASIS = 500;
+const WEIGHT_BODY = 400;
 
-/** LTR typography — Space Grotesk headings, system font body. */
+/*
+ * Shared size/line-height scale (both directions). Replaces MUI's Latin-tuned
+ * defaults (e.g. a 6rem h1, tight h4 line-height of 1.235) with sizes actually
+ * used in the app and headroom for Persian ascenders/descenders. Multiplied
+ * across breakpoints by responsiveFontSizes() in theme.ts — do not hand-roll
+ * per-breakpoint sizes here.
+ */
+const SIZE_SCALE = {
+  h1: { fontSize: '2.5rem', lineHeight: 1.45 },
+  h2: { fontSize: '2.125rem', lineHeight: 1.45 },
+  h3: { fontSize: '1.75rem', lineHeight: 1.45 },
+  h4: { fontSize: '1.5rem', lineHeight: 1.45 },
+  h5: { fontSize: '1.25rem', lineHeight: 1.45 },
+  h6: { fontSize: '1.125rem', lineHeight: 1.4 },
+  subtitle1: { fontSize: '1rem', lineHeight: 1.6 },
+  subtitle2: { fontSize: '0.875rem', lineHeight: 1.6 },
+  body1: { fontSize: '1rem', lineHeight: 1.7 },
+  body2: { fontSize: '0.875rem', lineHeight: 1.7 },
+  button: { fontSize: '0.9375rem', lineHeight: 1.5 },
+  caption: { fontSize: '0.75rem', lineHeight: 1.6 },
+  overline: { fontSize: '0.75rem', lineHeight: 1.6 },
+} as const;
+
+/**
+ * @param headingFamily font for h1–h6 + button (the display/brand voice)
+ * @param bodyFamily font for subtitle/body/caption/overline
+ * @param extra shared overrides (e.g. letterSpacing) applied to every variant
+ */
+function buildScale(headingFamily: string, bodyFamily: string, extra?: { letterSpacing: number }) {
+  const heading = extra ? { fontFamily: headingFamily, ...extra } : { fontFamily: headingFamily };
+  const body = extra ? { fontFamily: bodyFamily, ...extra } : { fontFamily: bodyFamily };
+  return {
+    h1: { ...heading, ...SIZE_SCALE.h1, fontWeight: WEIGHT_HEADING },
+    h2: { ...heading, ...SIZE_SCALE.h2, fontWeight: WEIGHT_HEADING },
+    h3: { ...heading, ...SIZE_SCALE.h3, fontWeight: WEIGHT_HEADING },
+    h4: { ...heading, ...SIZE_SCALE.h4, fontWeight: WEIGHT_HEADING },
+    h5: { ...heading, ...SIZE_SCALE.h5, fontWeight: WEIGHT_HEADING },
+    h6: { ...heading, ...SIZE_SCALE.h6, fontWeight: WEIGHT_HEADING },
+    subtitle1: { ...body, ...SIZE_SCALE.subtitle1, fontWeight: WEIGHT_EMPHASIS },
+    subtitle2: { ...body, ...SIZE_SCALE.subtitle2, fontWeight: WEIGHT_EMPHASIS },
+    body1: { ...body, ...SIZE_SCALE.body1, fontWeight: WEIGHT_BODY },
+    body2: { ...body, ...SIZE_SCALE.body2, fontWeight: WEIGHT_BODY },
+    button: { ...heading, ...SIZE_SCALE.button, fontWeight: WEIGHT_HEADING, textTransform: 'none' as const },
+    caption: { ...body, ...SIZE_SCALE.caption, fontWeight: WEIGHT_BODY },
+    overline: { ...body, ...SIZE_SCALE.overline, fontWeight: WEIGHT_EMPHASIS },
+  };
+}
+
+/** LTR typography — Space Grotesk headings, system font body (unchanged split;
+ *  MUI's Latin letter-spacing defaults are fine as-is, so `extra` is omitted). */
 export const TYPOGRAPHY_LTR: TypographyVariantsOptions = {
   fontFamily: SYSTEM_FONT_STACK,
-  h1: displayHeadingLtr,
-  h2: displayHeadingLtr,
-  h3: displayHeadingLtr,
-  h4: displayHeadingLtr,
-  h5: displayHeadingLtr,
-  h6: { ...displayHeadingLtr, fontWeight: 600 },
-  button: { fontWeight: 600, textTransform: 'none' },
+  ...buildScale(DISPLAY_FONT_LTR, SYSTEM_FONT_STACK),
 };
 
-/** RTL typography — Mikhak for all text (headings + body) to ensure full Persian glyph coverage. */
+/**
+ * RTL typography — Mikhak for all text (headings + body) to ensure full Persian
+ * glyph coverage. `letterSpacing: 0` on every variant: Persian is a joined
+ * (cursive) script and any tracking breaks Mikhak's glyph connections — MUI's
+ * Latin defaults set non-zero spacing on body1/body2/button/caption/overline,
+ * which is wrong here.
+ */
 export const TYPOGRAPHY_RTL: TypographyVariantsOptions = {
   fontFamily: DISPLAY_FONT_RTL,
-  h1: displayHeadingRtl,
-  h2: displayHeadingRtl,
-  h3: displayHeadingRtl,
-  h4: displayHeadingRtl,
-  h5: displayHeadingRtl,
-  h6: { ...displayHeadingRtl, fontWeight: 600 },
-  button: { fontWeight: 600, textTransform: 'none' },
+  ...buildScale(DISPLAY_FONT_RTL, DISPLAY_FONT_RTL, { letterSpacing: 0 }),
 };
-
-/** @deprecated use TYPOGRAPHY_LTR or TYPOGRAPHY_RTL */
-export const TYPOGRAPHY = TYPOGRAPHY_LTR;
diff --git a/dev/shared-working-context/reports/ui-phase-0-report.md b/dev/shared-working-context/reports/ui-phase-0-report.md
new file mode 100644
index 0000000..02d4a07
--- /dev/null
+++ b/dev/shared-working-context/reports/ui-phase-0-report.md
@@ -0,0 +1,197 @@
+# UI Phase 0 — Design language & theme foundation — Report (2026-07-17)
+
+## What was built
+
+### `theme.components` pass (the highest-leverage change)
+`client/src/theme/theme.ts` now carries a `components` block covering `MuiCssBaseline`
+(global `:focus-visible` → 2px `var(--bal-focus-ring)`), `MuiButton` (`disableElevation`,
+`--bal-radius-sm`, comfortable padding), `MuiPaper` (hairline `var(--bal-divider)` border,
+`backgroundImage: none`), `MuiAppBar` (cream/paper surface + hairline bottom border,
+`color="transparent"` default — no more solid teal slab), `MuiOutlinedInput` (house radius +
+calmer resting border + primary hover), `MuiChip` (soft `--bal-primary-soft` fill for
+default-color filled chips only — `ownerState`-scoped so `color="success"`/`"error"` chips
+are untouched), `MuiToggleButton`/`MuiListItemButton` (`.Mui-selected` → primary-soft fill +
+primary text), `MuiDialog` (`--bal-radius-lg`, tighter mobile margins), `MuiTabs`/`MuiTab`
+(3px indicator, 48px min-height), `MuiAlert` (house radius — severities now come from the
+palette, see below), `MuiStepIcon` (brand active/completed), `MuiSkeleton` (warm
+`primary-soft` tint), `MuiTooltip` (ink/cream inversion). Every value is `var(--bal-*)` or a
+logical CSS property — zero raw hex, zero physical direction props.
+
+A `theme.shadows` array (`TEAL_SHADOWS`, 25 entries tiered onto `--bal-shadow-1/2/3`)
+replaces MUI's default grey stack **globally** — every component that reads
+`theme.shadows[n]` (Dialog, Menu, Popover, AppBar elevation, Autocomplete…) gets teal-tinted
+shadows for free, not just the ones this file overrides directly. Both themes are wrapped in
+`responsiveFontSizes()` for per-breakpoint heading scaling.
+
+### Semantic palette
+`LIGHT_PALETTE`/`DARK_PALETTE` (`colors.ts`) now define `success`/`error`/`warning`/`info`
+(main + contrastText), sourced from the same values as the `--bal-*` feedback tokens — an
+inline `<Alert severity="success">` and a success toast are now the same color family in
+both schemes. `AppAlert`'s defaults flipped from the footgun (`severity="error"
+variant="filled"`) to a calm baseline (`severity="info" variant="standard"`) — every
+existing call-site already passed an explicit severity+variant, so this was a safe default
+change with zero call-site migration needed (verified by grep before changing).
+
+### Persian type scale
+`typography.ts` rewritten: `letterSpacing: 0` on every `TYPOGRAPHY_RTL` variant, a shared
+size/line-height scale (`SIZE_SCALE` — body line-height 1.7, headings 1.4–1.5, no more
+6rem default h1), and the weight decision: **700 for headings/buttons, 500 for in-text
+emphasis, 400 body — never 600** (neither Mikhak nor Space Grotesk loads a 600 face; a
+requested 600 silently rendered full Bold). Swept **64** `fontWeight: 600` sx call-sites
+across 42 files to 500/700 by this rule (9→700, 55→500; judgment calls documented in the
+commit — e.g. selection-card titles → 700, chip/row labels → 500). LTR keeps its original
+split (Space Grotesk headings, system-font body); RTL keeps Mikhak everywhere (full glyph
+coverage). Space Grotesk is now genuinely wired via `next/font/google` in
+`app/[locale]/layout.tsx` (self-hosted at build time, `preload: false`, attached only on
+`en` — mirrors the Mikhak/`fa` discipline exactly); the dead "not currently wired" comment
+is gone.
+
+### Token extension (`tokens.css` + `colors.ts` mirror where palette-level)
+Added, both scheme blocks: `--bal-radius-sm/md/lg` (4/10/16 — controls/cards/dialogs),
+`--bal-motion-fast/base/slow` + `--bal-easing-standard` (for phase 12), `--bal-shadow-1/2/3`
+(teal-tinted light, black-teal dark), `--bal-focus-ring`, `--bal-rating`/`--bal-rating-empty`
+(retiring the muddy `--bal-warning` star fill — phase 1 wires this into `RatingInput`),
+`--bal-trust`/`--bal-trust-soft` (a distinct blue identity for verified marks, separate from
+primary/success — phases 1/4/8 consume this), `--bal-money-emphasis` (AA-contrast-safe;
+`--bal-secondary` fails AA at small sizes on white, ~2:1). `tokens.css`'s header now points
+at the frontend-designer skill instead of the deleted `product/balinyaar.html`.
+
+### Brand mark — the pencil is gone
+Two new SVGs under `AppIcon/icons/`: **`LogoMark.tsx`** (monochrome `currentColor` "b" glyph
+— stem + a true evenodd-ring bowl, no background square — registered as `ICONS.logo`, used
+anywhere via `<AppIcon icon="logo">`, recolors for free in dark mode) and **`LogoLockup.tsx`**
+(the full-color mark: deep-teal rounded-square ground, cream glyph, terracotta dot, all
+`var(--bal-*)`-driven) used directly by `BrandMark.tsx` next to the (still translated,
+never-baked-into-SVG) wordmark. `PencilIcon.tsx` (the Twemoji starter pencil, the app's last
+hard-coded-hex SVG) is deleted. Favicon + webmanifest regenerated from the same construction
+via a one-off `sharp` script (fixed brand hex — the one place a literal hex is correct, since
+it's a static binary asset, not app code): `src/app/favicon.ico` (real multi-size PNG-in-ICO,
+16/32/48) and `public/img/favicon/{16,32,48,180,192,512}.png` all now render the actual mark;
+`site.webmanifest`'s `theme_color`/`background_color` are the real brand teal/cream (were
+starter `#000000`/`#ffffff`), and every referenced icon file now genuinely exists.
+
+### Icon system
+- **Size bug fixed**: `AppIcon.tsx` drives size via `style.fontSize` (which MUI SvgIcon's
+  `1em`-based CSS actually respects) instead of `width`/`height` *attributes* (which that
+  same CSS silently beat) — all ~40 existing `size={14..56}` call-sites now render at the
+  requested size. The invalid `size` DOM attribute is no longer spread onto the SVG; the
+  unknown-icon `console.warn` is dev-only.
+- **One visual family**: the ~90-entry registry (`AppIcon/config.ts`) is now 100% MUI
+  `*Rounded` — every filled/outlined starter icon was swapped. The 8 dead starter entries
+  (`daynight`/`night`/`day`/`visibilityon`/`visibilityoff`/`signup`/`login`/`settings`) are
+  deleted (re-verified zero usages before deleting).
+- **New vocabulary**: `back`/`chevron_start`, `share`, `copy`, `phone`, `navigate`, `sort`,
+  `attachment`, `star_half`.
+- **Directional mirroring**: `back`/`chevron_start` are registered in a new
+  `DIRECTIONAL_ICONS` set; `AppIcon` stamps `data-icon-directional` on those, and one CSS
+  rule (`app/globals.css`) does the flip (`[dir='rtl'] [data-icon-directional] { transform:
+  scaleX(-1) }`) — adding a future directional icon is a one-line registry addition, never a
+  per-component flip.
+
+### AppButton de-startering
+Removed `DEFAULT_SX_VALUES = { margin: 1 }` and the dead `underline`/`label`/`text` prop
+cruft (`text`/`label` duplicate props stay — 238 call-sites use them — only the invalid
+`underline` spread onto non-link buttons and the false "Box around to specify margins" JSDoc
+were removed). Swept the now-redundant `sx={{ m: 0 }}` neutralization at **192** call sites
+across ~68 files (6 parallel batches, verified against the original 213-occurrence/82-file
+audit count — the ~21 difference is re-count timing, not missed sites); **3** genuine
+non-AppButton `m: 0` uses (on `FormControlLabel`, an unrelated real layout decision) were
+correctly left alone. Outer spacing is now the parent's job (Stack/Box gaps), as intended.
+
+### Starter residue purge
+Deleted `theme/light.ts` + `theme/dark.ts` (+ their `theme/index.ts` exports:
+`APP_THEME`/`LIGHT_THEME`/`DARK_THEME`/`LIGHT_THEME as default` — nothing imported them) and
+the deprecated `TYPOGRAPHY` alias. Deleted the unused `AppImage` component + its test +
+barrel exports (zero product usages, verified). Rewrote `globals.css` as an intentional
+minimal base: kept the `box-sizing` reset, dropped `max-height: 100vh` and the
+`max-width: 100vw; overflow-x: hidden` mask, added `::selection` in brand colors + the
+directional-icon CSS rule, and a commented decision on the `a { color: inherit }` reset.
+Fixed the false `CONTENT_MIN_WIDTH` comment and the starter commented-alternatives style in
+`components/config.ts`.
+
+### No-flash color-scheme boot — CSS only, no boot script
+The original phase spec called for an inline pre-paint `<script>` (a `ColorSchemeScript`,
+matching what `client/CLAUDE.md`'s Theme System section had — inaccurately — already
+documented). **Built, then deliberately reverted per explicit user direction mid-session**:
+a hand-rolled script (cookie parsing + `Storage.prototype` patching) didn't fit a codebase
+where every other theme decision is CSS-variable-driven. The shipped mechanism is pure CSS:
+- Returning visitor (cookie present): unchanged — server stamps `data-mui-color-scheme`,
+  the explicit `tokens.css` blocks match immediately.
+- First-ever visitor (no cookie): `getThemeMode()` now returns `colorScheme: undefined`, so
+  the server renders `<html>` **without** the attribute at all. `tokens.css` gained a
+  `@media (prefers-color-scheme: dark)` block scoped to `:root:not([data-mui-color-scheme])`
+  that paints the OS-preferred scheme immediately, zero JS. Once React hydrates,
+  `defaultMode="system"` resolves the same media query and MUI stamps the attribute itself —
+  the CSS values already match, so nothing visibly flips.
+- **Known trade-off** (documented in `client/CLAUDE.md`): this covers every `--bal-*` token
+  (the dominant visual surface — page/paper background, text, dividers, all brand colors).
+  MUI's own `--mui-palette-*` variables don't get the same free fallback (MUI's
+  `colorSchemeSelector` supports attribute-based *or* `'media'`-based generation, not both),
+  so a bare `color="primary"` fill (e.g. a contained Button) can very briefly show the light
+  value on a cookie-less dark-OS first visit before hydration — self-corrects same frame,
+  never animates (`disableTransitionOnChange`). Acceptable trade-off given the alternative
+  was a hand-rolled script the codebase's own conventions argue against.
+
+`viewport.themeColor` is now the media-query array form (light → `BRAND.teal`, dark →
+`BRAND.tealDeep`) so browser chrome matches the page in both schemes.
+
+## What is now testable (and exactly how)
+1. `npm run dev`, open `/fa/login` in a private window with OS dark on and no cookies: dark
+   paint from first frame (no light flash on the `--bal-*` surface), the new Balinyaar mark
+   (not a pencil) on the auth splash, recoloring correctly if you toggle dark/light.
+2. `/fa` customer home: flat buttons with comfortable padding, hairline-bordered cards with
+   soft teal shadows (not grey), soft-tinted chips. Tab through the page — every focusable
+   element shows the same 2px brand focus ring.
+3. `/fa/nurse` and `/fa/admin` (seeded accounts): top bar is a cream/paper surface with a
+   hairline divider, not a solid teal slab; sidebar icons are one Rounded family; selected
+   nav item uses the soft-primary fill.
+4. Trigger an inline form-error `AppAlert` and a toast on the same screen — same
+   brand-harmonized color family, both schemes.
+5. `/fa` Persian text: no letter-spacing gaps inside joined words, headings don't clip;
+   compare `/en` — Space Grotesk headings render (network tab shows the self-hosted font
+   file only on `/en`, never on `/fa`).
+6. Browser tab: favicon is the new mark; toggling OS dark mode flips `theme-color`
+   (deep-teal) in supporting browsers.
+7. `npm run check` (type + lint) and `npm run test:ci` — both green (see Gate below).
+
+## What is mocked / waiting on a real service
+None — this phase is pure client theming, no service seams, no mock flags (per the phase's
+own §4).
+
+## Docs updated
+- `.claude/skills/frontend-designer/SKILL.md` — brand-mark construction (now the source of
+  truth, `product/balinyaar.html` is gone), the new token categories + when to use each, the
+  weight-500/700 decision (the old "buttons weight 600" line was wrong the moment this phase
+  landed), the Rounded icon family + directional-mirroring rule + the size-bug fix, dropped
+  the stale ~19-icon "currently registered" list (pointed at `AppIcon/config.ts` directly
+  instead — it drifts too fast for a skill doc to enumerate reliably).
+- `client/CLAUDE.md` — Theme System section rewritten for the CSS-only no-flash mechanism
+  (replacing the doc-drift `ColorSchemeScript` description that never matched reality), the
+  Fonts table (Space Grotesk now wired), the `theme/` entries in Project Structure
+  (`light.ts`/`dark.ts` removed).
+
+## Follow-ups for later phases
+- Phase 1: wire `--bal-rating`/`--bal-rating-empty` into `RatingInput` (currently still uses
+  `--bal-warning`), build EmptyState/ErrorState/PageHeader/`<Money>`/Jalali picker/skeleton
+  twins/route-level `loading.tsx`/`error.tsx`/404 — all deferred here per the phase's own
+  scope boundary.
+- Phase 2: TopBar/SideBar chrome, `UserInfo`, nav grouping, SSR mobile-first flash — the
+  physical `paddingLeft`/`paddingRight` in `TopBarAndSideBarLayout.tsx` and the hard-coded
+  English "Open Sidebar" tooltip are pre-existing shell issues, deliberately untouched here
+  (no page/shell redesigns in phase 0).
+- Phase 4/8: `--bal-trust`/`--bal-trust-soft` are defined but not yet consumed by
+  `TrustBadge`/verification UI — that's a content decision for those phases, not a token gap.
+- Phase 12: the app-wide motion pass consumes `--bal-motion-*`/`--bal-easing-standard`,
+  defined but unused here (define-only per this phase's scope).
+- No REQs filed — this phase never touches `server/` or any contract.
+
+## Gate
+- `npm run check` (type + lint): **green**, zero errors/warnings.
+- `npm run test:ci`: **329/329 tests, 79/79 suites green.** Three pre-existing shared-component
+  tests (`AppIcon.test.tsx`, `AppIconButton.test.tsx`, `AppButton.test.tsx`) asserted the
+  exact bugs this phase fixes (an invalid `size` DOM attribute; the pre-Rounded-swap
+  `MoreHorizIcon` testid) — updated in the same change to assert the corrected behavior
+  (`style.fontSize`, `MoreHorizRoundedIcon`) rather than the old bug.
+- `en.json`/`fa.json`: untouched — this phase added no new user-facing strings (the brand
+  mark's alt text reuses the existing `common.brand` key via `BrandMark`'s adjacent
+  `<Typography>`; the SVG itself is `aria-hidden`).