/* ============================================================
   Aud UI — skin of the Auth server's Razor views. One file, no build
   step on the Razor side.

   Contents, in order:
     1. design tokens (:root --uc-*) — the same values the React app uses
     2. mini base-reset — Razor has no Tailwind preflight
     3. base rules + uc-* component primitives

   GENERATED FILE — edit src/UIs/react/design/tokens.json (then run
   "npm run build:tokens") or src/UIs/react/razor-skin/primitives.css,
   and run "npm run build:ui".
   The Razor copy at src/IdentityServer/Aud.Auth.IdentityServer/wwwroot/
   css/aud-ui.css is synced by an MSBuild Copy target at build time.
   ============================================================ */

@layer base, components;

:root {
  /* ======================= primitive ======================= */
  /* Bảng màu thô; chỉ tầng semantic được tham chiếu. Nhóm theme chứa nguyên văn khối :root của preset kit shadcnblocks (bản gốc /tailwind/globals.css, lấy ngày 17/10/2026); đổi preset chỉ thay nhóm này. Nhóm zinc là họ trung tính của preset gốc, dùng cho các vai mà preset không có. slate giữ lại để không phá tên cũ. */
  --uc-blue-50: #eff6ff;
  --uc-blue-100: #dbeafe;
  --uc-blue-200: #bfdbfe;
  --uc-blue-300: #93c5fd;
  --uc-blue-400: #60a5fa;
  --uc-blue-600: #2563eb;
  --uc-blue-700: #1d4ed8;
  --uc-blue-800: #1e40af;
  --uc-slate-50: #f8fafc;
  --uc-slate-100: #f1f5f9;
  --uc-slate-200: #e2e8f0;
  --uc-slate-300: #cbd5e1;
  --uc-slate-400: #94a3b8;
  --uc-slate-500: #64748b;
  --uc-slate-600: #475569;
  --uc-slate-700: #334155;
  --uc-slate-800: #1e293b;
  --uc-slate-900: #0f172a;
  --uc-green-100: #dcfce7;
  --uc-green-300: #86efac;
  --uc-green-600: #16a34a;
  --uc-green-700: #15803d;
  --uc-green-800: #166534;
  --uc-amber-100: #fef3c7;
  --uc-amber-300: #fcd34d;
  --uc-amber-600: #d97706;
  --uc-amber-700: #b45309;
  --uc-amber-800: #92400e;
  --uc-red-100: #fee2e2;
  --uc-red-200: #fecaca;
  --uc-red-300: #fca5a5;
  --uc-red-600: #dc2626;
  --uc-red-700: #b91c1c;
  --uc-red-800: #991b1b;
  --uc-sky-100: #e0f2fe;
  --uc-sky-300: #7dd3fc;
  --uc-sky-600: #0284c7;
  --uc-sky-700: #0369a1;
  --uc-sky-800: #075985;
  --uc-violet-100: #ede9fe;
  --uc-violet-600: #7c3aed;
  --uc-white: #ffffff;
  /* Không tô. */
  --uc-transparent: transparent;
  /* Màu trong suốt dựng từ một màu của bảng (quầng focus, lớp phủ). */
  --uc-alpha-blue-600-18: rgb(37 99 235 / 0.18);
  --uc-alpha-aud-blue-600-18: rgb(11 87 166 / 0.18);
  --uc-alpha-red-600-18: rgb(220 38 38 / 0.18);
  --uc-alpha-zinc-950-35: rgb(9 9 11 / 0.35);
  --uc-zinc-50: oklch(0.985 0 0);
  --uc-zinc-100: oklch(0.967 0.001 286.375);
  --uc-zinc-200: oklch(0.92 0.004 286.32);
  --uc-zinc-300: oklch(0.871 0.006 286.286);
  --uc-zinc-400: oklch(0.705 0.015 286.067);
  --uc-zinc-500: oklch(0.552 0.016 285.938);
  --uc-zinc-600: oklch(0.442 0.017 285.786);
  --uc-zinc-700: oklch(0.37 0.013 285.805);
  --uc-zinc-800: oklch(0.274 0.006 286.033);
  --uc-zinc-900: oklch(0.21 0.006 285.885);
  --uc-zinc-950: oklch(0.141 0.005 285.823);
  /* Bảng màu của theme đang dùng, theo khóa của kit. Mặc định là nguyên văn :root của preset kit (theme AUD giữ màu nhấn xanh ở tầng ngữ nghĩa); mỗi theme của design/themes.json đặt lại cả nhóm cùng các vai ngữ nghĩa suy ra (src/styles/themes.css). */
  --uc-theme-background: oklch(1 0 0);
  --uc-theme-foreground: oklch(0.141 0.005 285.823);
  --uc-theme-card: oklch(1 0 0);
  --uc-theme-card-foreground: oklch(0.141 0.005 285.823);
  --uc-theme-popover: oklch(1 0 0);
  --uc-theme-popover-foreground: oklch(0.141 0.005 285.823);
  --uc-theme-primary: oklch(0.21 0.006 285.885);
  --uc-theme-primary-foreground: oklch(0.985 0 0);
  --uc-theme-secondary: oklch(0.967 0.001 286.375);
  --uc-theme-secondary-foreground: oklch(0.21 0.006 285.885);
  --uc-theme-muted: oklch(0.967 0.001 286.375);
  --uc-theme-muted-foreground: oklch(0.552 0.016 285.938);
  --uc-theme-accent: oklch(0.967 0.001 286.375);
  --uc-theme-accent-foreground: oklch(0.21 0.006 285.885);
  --uc-theme-destructive: oklch(0.577 0.245 27.325);
  --uc-theme-border: oklch(0.92 0.004 286.32);
  --uc-theme-input: oklch(0.92 0.004 286.32);
  --uc-theme-ring: oklch(0.705 0.015 286.067);
  --uc-theme-chart-1: oklch(0.646 0.222 41.116);
  --uc-theme-chart-2: oklch(0.6 0.118 184.704);
  --uc-theme-chart-3: oklch(0.398 0.07 227.392);
  --uc-theme-chart-4: oklch(0.828 0.189 84.429);
  --uc-theme-chart-5: oklch(0.769 0.188 70.08);
  --uc-theme-sidebar: oklch(0.985 0 0);
  --uc-theme-sidebar-foreground: oklch(0.141 0.005 285.823);
  --uc-theme-sidebar-primary: oklch(0.21 0.006 285.885);
  --uc-theme-sidebar-primary-foreground: oklch(0.985 0 0);
  --uc-theme-sidebar-accent: oklch(0.967 0.001 286.375);
  --uc-theme-sidebar-accent-foreground: oklch(0.21 0.006 285.885);
  --uc-theme-sidebar-border: oklch(0.92 0.004 286.32);
  --uc-theme-sidebar-ring: oklch(0.705 0.015 286.067);
  /* Chỉ để tham chiếu: gốc --uc-radius giữ 6 px (quyết định 17/10). */
  --uc-theme-radius: 8px;
  --uc-theme-shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --uc-theme-shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --uc-theme-shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --uc-theme-shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --uc-theme-shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
  --uc-theme-shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
  --uc-theme-shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
  --uc-theme-shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
  /* Bảng màu của theme AUD (navy), dựng từ hai màu logo #0098e8 và #004098; chủ dự án chọn 17/10. Nhấn xanh navy, xám lạnh, thanh bên navy đậm, trạng thái nền nhạt. Theme của kit không dùng nhóm này. */
  /* Xanh sáng của logo: 3,15:1 trên trắng nên không làm chữ hay nút; làm điểm nhấn trên navy (vòng focus của thanh bên) và chart-1. */
  --uc-aud-logo-sky: #0098e8;
  /* Navy của logo: nền nút chính khi nhấn. */
  --uc-aud-logo-navy: #004098;
  --uc-aud-blue-50: #e7f0fb;
  --uc-aud-blue-100: #cfe0f6;
  --uc-aud-blue-200: #a9c7ea;
  /* Màu nhấn, giữa hai màu logo: chữ trắng 7,17:1. */
  --uc-aud-blue-600: #0b57a6;
  --uc-aud-blue-700: #084a8f;
  /* Chữ trên thanh bên navy: 10,7:1. */
  --uc-aud-navy-100: #d6deea;
  /* Nhãn nhóm và chữ phụ trên thanh bên: 6,6:1. */
  --uc-aud-navy-300: #9fb0c6;
  /* Mục đang chọn trên thanh bên: chữ trắng 6,4:1. */
  --uc-aud-navy-500: #1f5fa8;
  --uc-aud-navy-700: #173a66;
  --uc-aud-navy-800: #1d3a60;
  /* Nền thanh bên: tách khỏi thẻ trắng 14,5:1. */
  --uc-aud-navy-900: #0f2a4a;
  --uc-aud-steel-50: #f7f9fc;
  --uc-aud-steel-100: #f3f5f8;
  --uc-aud-steel-150: #eef1f5;
  /* Nền trang của theme AUD từ 21/10/2026: đậm hơn steel-100 một bậc để thẻ trắng tách nền như hệ thống tham chiếu (1,2:1). */
  --uc-aud-steel-175: #e9ecf1;
  --uc-aud-steel-200: #d9dee6;
  --uc-aud-steel-300: #c3cbd6;
  /* Viền ô nhập: 4,59:1 trên trắng, giữ ngưỡng ≥ 3:1 của quyết định 17/10. */
  --uc-aud-steel-500: #6b7689;
  --uc-aud-steel-600: #5b6679;
  --uc-aud-steel-700: #3b4759;
  /* Chữ: xanh đen thay đen tuyệt đối, 16,3:1. */
  --uc-aud-steel-900: #172033;
  --uc-aud-green-50: #e3f3e6;
  --uc-aud-green-600: #1e8e3e;
  --uc-aud-green-800: #1b5e20;
  --uc-aud-amber-50: #fff1d6;
  --uc-aud-amber-600: #c77700;
  --uc-aud-amber-800: #8a4b00;
  --uc-aud-red-50: #fde4e4;
  /* Đỏ trên trắng 5,62:1. */
  --uc-aud-red-600: #c62828;
  --uc-aud-red-800: #9b1c1c;
  --uc-aud-sky-50: #e1f0fa;
  --uc-aud-sky-600: #0b7fc2;
  --uc-aud-sky-800: #0b4f7a;
  /* Thang khoảng cách 4 px. unit gắn vào --spacing của Tailwind v4 để p-2, gap-3… đọc cùng một gốc. */
  --uc-space-0: 0;
  --uc-space-1: 0.25rem;
  --uc-space-2: 0.5rem;
  --uc-space-3: 0.75rem;
  --uc-space-4: 1rem;
  --uc-space-5: 1.25rem;
  --uc-space-6: 1.5rem;
  --uc-space-8: 2rem;
  --uc-space-10: 2.5rem;
  --uc-space-12: 3rem;
  --uc-space-unit: 0.25rem;
  --uc-space-px: 1px;
  --uc-space-0-5: 0.125rem;
  --uc-space-1-5: 0.375rem;
  --uc-space-2-5: 0.625rem;
  --uc-weight-regular: 400;
  --uc-weight-medium: 500;
  --uc-weight-semibold: 600;
  --uc-weight-bold: 700;
  /* MASTER mục 5: 1,4 cho vùng dày, 1,5 cho đoạn văn; 1,3 cho tiêu đề trang (đang ghi trong @theme). */
  --uc-leading-dense: 1.4;
  --uc-leading-heading: 1.3;
  --uc-leading-body: 1.5;
  --uc-opacity-disabled: 0.5;
  --uc-duration-100: 100ms;
  --uc-duration-150: 150ms;
  --uc-duration-200: 200ms;
  --uc-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --uc-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --uc-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ======================= semantic ======================= */
  /* Một màu nhấn duy nhất (MASTER mục 2): xanh navy #0b57a6 giữa hai màu logo, chủ dự án chọn 17/10. */
  --uc-primary: var(--uc-aud-blue-600);
  --uc-primary-hover: var(--uc-aud-blue-700);
  --uc-primary-active: var(--uc-aud-logo-navy);
  /* Chữ màu nhấn trên nền nhạt: mục đang chọn của thanh bên, menu, Select, badge, chip, trang hiện tại. Tách khỏi primary-hover (nền nút khi rê chuột) vì theme có màu nhấn sáng cần hai hướng ngược nhau. */
  --uc-primary-text: var(--uc-aud-blue-600);
  --uc-primary-soft: var(--uc-aud-blue-50);
  --uc-primary-softer: var(--uc-aud-blue-100);
  --uc-primary-soft-border: var(--uc-aud-blue-200);
  --uc-on-primary: var(--uc-white);
  /* Nền trang: theme AUD xám lạnh nhạt #f3f5f8, thẻ trắng tách nền 1,09:1 nhờ viền và bóng (chủ dự án chốt 26/10/2026, đảo #e9ecf1 của 21/10 vì đậm), tách vùng làm việc khỏi bề mặt trắng (MASTER mục 4). Theme của kit lấy vai --muted của preset. */
  --uc-bg: var(--uc-aud-steel-100);
  --uc-surface: var(--uc-theme-card);
  --uc-surface-subtle: var(--uc-aud-steel-50);
  /* Nền xám nhạt của dòng Cộng và huy hiệu trung tính. */
  --uc-surface-muted: var(--uc-aud-steel-150);
  --uc-surface-hover: var(--uc-theme-accent);
  --uc-surface-active: var(--uc-zinc-200);
  --uc-surface-selected: var(--uc-aud-blue-50);
  --uc-surface-disabled: var(--uc-zinc-100);
  /* Chỉ đọc khác vô hiệu (ui-ux-pro-max read-only-distinction): nền nhạt, chữ giữ màu thường, viền mảnh. */
  --uc-surface-readonly: var(--uc-zinc-50);
  --uc-surface-inverse: var(--uc-zinc-900);
  /* Nền đậm trung tính cho một con số cần nổi mà không mang nghĩa trạng thái hay màu nhấn (huy hiệu số đếm). Chữ trên nó là --uc-text-inverse (9,4:1). Chủ dự án chọn ngày 20/10/2026. */
  --uc-surface-emphasis: var(--uc-aud-steel-700);
  --uc-surface-emphasis-hover: var(--uc-aud-steel-900);
  --uc-border: var(--uc-aud-steel-200);
  --uc-border-strong: var(--uc-aud-steel-300);
  /* Viền ô nhập, ô chọn, textarea (--input của React, .uc-input của Razor). Nhạt như kit gốc, bằng màu đường kẻ: chủ dự án chốt ngày 20/10/2026, đảo mức zinc-500 ngày 17/10 (MASTER mục 2). Theme của kit dùng input của preset. */
  --uc-border-control: var(--uc-aud-steel-200);
  /* Viền control khi rê chuột, đậm hơn viền thường một bậc. */
  --uc-border-control-hover: var(--uc-aud-steel-300);
  /* Viền checkbox, radio, rãnh công tắc tắt: nhạt như kit gốc, cùng màu viền ô nhập (chủ dự án chốt ngày 20/10/2026). */
  --uc-border-checkable: var(--uc-aud-steel-200);
  --uc-border-checkable-hover: var(--uc-aud-steel-300);
  /* Con trượt của thanh cuộn mảnh (styles/index.css) lúc nghỉ: nhạt, không tranh với nội dung (chủ dự án chốt 26/10/2026, đảo mức steel-500 ≥ 3:1). */
  --uc-scrollbar-thumb: var(--uc-aud-steel-300);
  /* Con trượt khi rê chuột vào: ≥ 3:1 trên nền trang, thẻ và thanh bên ở mọi theme. */
  --uc-scrollbar-thumb-hover: var(--uc-aud-steel-500);
  --uc-border-focus: var(--uc-primary);
  --uc-border-invalid: var(--uc-aud-red-600);
  /* Nền nút phụ. Không lấy --secondary của preset (bằng màu nền trang của aud-work). */
  --uc-control-bg: var(--uc-zinc-200);
  --uc-control-bg-hover: var(--uc-zinc-300);
  --uc-text: var(--uc-aud-steel-900);
  --uc-text-secondary: var(--uc-aud-steel-700);
  /* Chữ mờ ≥ 4,5:1 trên --uc-bg (theme AUD #5b6679: 5,3:1 trên nền trang). --muted-foreground của preset (zinc-500) chỉ đạt khoảng 4,4:1 trên nền xám. */
  --uc-muted: var(--uc-aud-steel-600);
  --uc-text-disabled: var(--uc-zinc-500);
  /* zinc-500: khoảng 4,8:1 trên nền trắng. */
  --uc-text-placeholder: var(--uc-zinc-500);
  --uc-text-link: var(--uc-primary);
  --uc-text-link-hover: var(--uc-primary-hover);
  --uc-text-inverse: var(--uc-white);
  /* Bộ năm của mỗi trạng thái: solid / soft (nền) / text (chữ trên soft) / border / strong (nền đặc mang chữ trắng, ≥ 4,5:1). */
  --uc-success: var(--uc-aud-green-600);
  --uc-success-soft: var(--uc-aud-green-50);
  --uc-success-text: var(--uc-aud-green-800);
  --uc-success-border: var(--uc-green-300);
  --uc-warning: var(--uc-aud-amber-600);
  --uc-warning-soft: var(--uc-aud-amber-50);
  --uc-warning-text: var(--uc-aud-amber-800);
  --uc-warning-border: var(--uc-amber-300);
  /* Theme AUD: đỏ #c62828 (5,62:1 trên trắng), cũng là viền lỗi. Nền nút xóa khi rê chuột và khi nhấn giữ red-700, red-800 của Tailwind (cùng sắc, đậm hơn); quầng lỗi là red-600 ở 18 %. Theme của kit đặt lại bằng destructive của theme. */
  --uc-danger: var(--uc-aud-red-600);
  --uc-danger-soft: var(--uc-aud-red-50);
  --uc-danger-soft-hover: var(--uc-red-200);
  --uc-danger-text: var(--uc-aud-red-800);
  --uc-danger-border: var(--uc-red-300);
  --uc-danger-hover: var(--uc-red-700);
  --uc-danger-active: var(--uc-red-800);
  --uc-info: var(--uc-aud-sky-600);
  --uc-info-soft: var(--uc-aud-sky-50);
  --uc-info-text: var(--uc-aud-sky-800);
  --uc-info-border: var(--uc-sky-300);
  --uc-violet: var(--uc-violet-600);
  --uc-violet-soft: var(--uc-violet-100);
  --uc-on-strong: var(--uc-white);
  /* Dải thông báo trong trang (nguồn đã đổi, lỗi lệnh, chỉ đọc). Thay bg-amber-100/text-amber-950 ở reference-ui.tsx. */
  --uc-alert-info-bg: var(--uc-info-soft);
  --uc-alert-info-border: var(--uc-info-border);
  --uc-alert-info-text: var(--uc-info-text);
  --uc-alert-success-bg: var(--uc-success-soft);
  --uc-alert-success-border: var(--uc-success-border);
  --uc-alert-success-text: var(--uc-success-text);
  --uc-alert-warning-bg: var(--uc-warning-soft);
  --uc-alert-warning-border: var(--uc-warning-border);
  --uc-alert-warning-text: var(--uc-warning-text);
  --uc-alert-danger-bg: var(--uc-danger-soft);
  --uc-alert-danger-border: var(--uc-danger-border);
  --uc-alert-danger-text: var(--uc-danger-text);
  /* Phần riêng của giấy kiểm toán (MASTER mục 4). */
  --uc-total-bg: var(--uc-surface-muted);
  --uc-total-text: var(--uc-text);
  --uc-total-border: var(--uc-aud-steel-500);
  /* Số âm trong ngoặc, không tô đỏ (ADR 0006 mục 4). */
  --uc-amount-negative: var(--uc-text);
  --uc-sign-done-bg: var(--uc-success-soft);
  --uc-sign-done-text: var(--uc-success-text);
  --uc-sign-next-bg: var(--uc-info-soft);
  --uc-sign-next-text: var(--uc-info-text);
  --uc-sign-pending-text: var(--uc-muted);
  /* Bước bị trả lại. */
  --uc-sign-returned-bg: var(--uc-danger-soft);
  --uc-sign-returned-text: var(--uc-danger-text);
  /* Giấy đã ký nhưng nguồn đổi: 'Cần soát xét lại' (docs/ui/specs/README.md mục 3). */
  --uc-sign-stale-bg: var(--uc-warning-soft);
  --uc-sign-stale-text: var(--uc-warning-text);
  /* Thanh bên của vỏ ứng dụng. Theme AUD tô navy đậm để vỏ tách khỏi nội dung; theme của kit giữ thanh bên sáng của bảng màu mình ($extensions.kit). */
  --uc-nav-bg: var(--uc-aud-navy-900);
  --uc-nav-hover: var(--uc-aud-navy-700);
  /* Mục đang mở. Kit tô mục này như khi rê chuột; AUD tô xanh đậm hơn nền rê chuột. */
  --uc-nav-active: var(--uc-aud-navy-500);
  --uc-nav-active-text: var(--uc-white);
  --uc-nav-text: var(--uc-aud-navy-100);
  --uc-nav-muted: var(--uc-aud-navy-300);
  /* Chữ trên nền rê chuột. */
  --uc-nav-on: var(--uc-white);
  --uc-nav-border: var(--uc-aud-navy-800);
  /* Vòng focus trên thanh bên: xanh sáng của logo, 4,6:1 trên navy. */
  --uc-nav-ring: var(--uc-aud-logo-sky);
  /* Ô vuông sau biểu tượng logo: trong suốt trên thanh bên navy (logo trắng, nền rê chuột của dòng hiện qua), một thẻ trắng trên thanh bên sáng. */
  --uc-nav-logo-bg: var(--uc-transparent);
  /* Mật độ như hệ thống tham chiếu (chủ dự án chốt 21/10/2026, đảo 'theo kit' ngày 17/10): nút và ô nhập 32 px, nhỏ 28 px, lớn 40 px. React đọc qua h-control, size-control (MASTER mục 6). */
  /* 32 px – nút, ô nhập, ô chọn, danh sách tab (h-control) */
  --uc-control-h: 2rem;
  /* 28 px – nút nhỏ (h-control-sm); trong thanh lọc của danh sách nút nhỏ vẽ theo h-control cho bằng ô tìm và dải tab */
  --uc-control-h-sm: 1.75rem;
  /* 24 px – nút rất nhỏ trong dòng (h-6 của kit) */
  --uc-control-h-xs: 1.5rem;
  /* 40 px – nút lớn (h-10 của kit) */
  --uc-control-h-lg: 2.5rem;
  /* 10 px – bề dày thanh cuộn (Chromium, Safari); con trượt cách mép --uc-scrollbar-inset nên rộng 6 px. */
  --uc-scrollbar-size: 0.625rem;
  /* 2 px – khoảng trong suốt quanh con trượt của thanh cuộn. */
  --uc-scrollbar-inset: 0.125rem;
  /* Vùng bấm tối thiểu 24 × 24 px cho nút biểu tượng nhỏ trong lưới (WCAG 2.2 mục 2.5.8, docs/ui/specs/README.md mục 8a). */
  --uc-hit-min: 1.5rem;
  /* 16 px – lề ngang của vùng nội dung (21/10/2026, trước đó 20) */
  --uc-page-px: 1rem;
  /* 12 px – lề dọc của vùng nội dung (21/10/2026, trước đó 16) */
  --uc-page-py: 0.75rem;
  /* 372 px – bề rộng tối đa một cột của lưới form ba cột (FormGrid), như form của hệ thống tham chiếu; co lại khi khung hẹp. */
  --uc-form-col-w: 23.25rem;
  --uc-section-gap: 0.75rem;
  /* Focus theo kit: viền control đổi sang --uc-focus-ring-color (focus-visible:border-ring, đạt ≥ 3:1) kèm quầng ring-3 ring-ring/50 chỉ để trang trí. Skin Razor vẽ viền đó cộng quầng --uc-ring. */
  /* Quầng nhạt quanh control đang focus của skin Razor; viền mới là chỉ báo chính. */
  --uc-ring: var(--uc-alpha-aud-blue-600-18);
  --uc-ring-danger: var(--uc-alpha-red-600-18);
  --uc-focus-ring-color: var(--uc-primary);
  /* Phân tầng bằng viền mảnh; bóng chỉ cho lớp nổi (menu, hộp thoại, toast). */
  --uc-shadow-sm: var(--uc-theme-shadow-xs);
  --uc-shadow-md: var(--uc-theme-shadow-lg);
  /* Bậc bóng lớn nhất; trang Auth nền sáng dùng shadow-overlay. */
  --uc-shadow-lg: var(--uc-theme-shadow-xl);
  --uc-shadow-raised: var(--uc-shadow-sm);
  --uc-shadow-overlay: var(--uc-shadow-md);
  /* Nền mờ dưới hộp thoại và ngăn phải (zinc-950 35 %); không làm mờ kính (MASTER mục 9). */
  --uc-backdrop: var(--uc-alpha-zinc-950-35);
  /* ĐỔI có chủ ý: trước là nền tối slate-900 có hai quầng gradient; theo MASTER mục 2 và 9 trang đăng nhập dùng nền sáng như ứng dụng. */
  --uc-auth-bg: var(--uc-bg);
  --uc-auth-card-shadow: var(--uc-shadow-overlay);
  --uc-font-sans: "Noto Sans Variable", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --uc-font-heading: var(--uc-font-sans);
  --uc-font-mono: "Noto Sans Mono Variable", Consolas, monospace;
  /* 12px – chú thích, ghi chú dưới lưới, huy hiệu, chip. Không có cỡ nào nhỏ hơn. */
  --uc-text-xs: 0.75rem;
  /* 14px – lưới, danh sách, thanh công cụ giấy, thanh bên (như tham chiếu, chủ dự án chốt 22/10/2026; trước đó 13) */
  --uc-text-dense: 0.875rem;
  /* 14px – form, đoạn văn, nút, tab (text-sm; như tham chiếu, chủ dự án chốt 22/10/2026, đảo 13 của 21/10). Ô nhập trên màn hẹp giữ 16 px để iOS không phóng to. */
  --uc-text-base: 0.875rem;
  /* 16px – tiêu đề giấy trong tab, tiêu đề mục, tiêu đề hộp thoại */
  --uc-text-title: 1rem;
  /* 20px – tiêu đề trang */
  --uc-text-page: 1.25rem;
  /* 24px – chỉ màn đăng nhập (hiện text-2xl). */
  --uc-text-display: 1.5rem;
  /* Gốc --uc-radius 6 px (MASTER, quyết định 17/10). Các bậc theo thang của kit (sm = gốc − 2 px, lg = gốc + 2 px, xl = gốc + 6 px), nên khớp mặc định của kit: 4 / 6 / 8 / 12 px. Tailwind dùng cùng tên: rounded-sm, -md, -lg, -xl. */
  --uc-radius: 0.375rem;
  /* 4 px – mục menu, checkbox, chip */
  --uc-radius-sm: calc(var(--uc-radius) - 2px);
  /* 6 px – nút, ô nhập, ô chọn, popover, menu thả, tooltip (rounded-md của kit) */
  --uc-radius-md: var(--uc-radius);
  /* 8 px – hộp thoại (rounded-lg của kit); khung có viền dùng radius-card */
  --uc-radius-lg: calc(var(--uc-radius) + 2px);
  /* 12 px – bậc rounded-xl của kit; Card và mọi khung có viền dùng radius-card */
  --uc-radius-xl: calc(var(--uc-radius) + 6px);
  /* Bo góc chung của mọi khung có viền: thẻ (Card), khối, section, lưới danh sách, panel, khung thông báo và ô nằm trong thẻ, theo theme (chủ dự án chốt 26/10/2026). Theme AUD: bằng gốc, 6 px như thẻ đo trên hệ thống tham chiếu (21/10). Theme của kit: đúng radius mà theme khai (--uc-theme-radius, bậc thẻ trong thiết kế của theme), nên theme bo lớn có thẻ bo lớn, theme khai 0 có thẻ vuông. React đọc qua rounded-card; không dùng bậc thô rounded-lg/-xl cho khung (check-tokens chặn). */
  --uc-radius-card: var(--uc-radius);
  --uc-radius-full: 999px;
  --uc-duration: 0.2s;
  /* Vào của popover và hộp thoại. */
  --uc-duration-fast: 0.1s;
  --uc-ease: ease;
  --uc-ease-enter: var(--uc-ease-out);
  --uc-ease-exit: var(--uc-ease-in);
  /* Thang z-index có thứ tự; React đang dùng z-10, z-50 thô. Popover và tooltip phải nằm trên hộp thoại vì Radix portal ra body. */
  /* Đầu trang dính, chân form dính, tiêu đề lưới dính. */
  --uc-z-raised: 10;
  --uc-z-dropdown: 1000;
  --uc-z-sticky: 1020;
  --uc-z-fixed: 1030;
  --uc-z-modal-backdrop: 1040;
  --uc-z-modal: 1050;
  /* Select, combobox, lịch, menu mở từ trong hộp thoại hoặc ngăn phải. */
  --uc-z-popover: 1060;
  --uc-z-tooltip: 1070;
  --uc-z-toast: 1090;
  /* Chuỗi màu biểu đồ; --uc-chart-1 là màu nhấn. Chỉ dùng khi biểu đồ đã qua kiểm CSP (MASTER mục 11). */
  --uc-chart-1: var(--uc-aud-logo-sky);
  --uc-chart-2: var(--uc-theme-chart-2);
  --uc-chart-3: var(--uc-theme-chart-3);
  --uc-chart-4: var(--uc-theme-chart-4);
  --uc-chart-5: var(--uc-theme-chart-5);

  /* ======================= component ======================= */
  /* Ba chấm màu của một theme trong bộ chọn "Giao diện" (menu người dùng): màu nhấn, nền thanh bên, nền trang. Mặc định là của AUD; src/styles/theme-swatches.css (sinh cùng themes.css, luôn nạp với menu người dùng) khai lại cho từng [data-theme-swatch] bằng màu cố định, nên chấm nào cũng hiện đúng theme của nó dù app đang ở theme nào. */
  --uc-swatch-primary: var(--uc-primary);
  --uc-swatch-sidebar: var(--uc-sidebar-bg);
  --uc-swatch-page: var(--uc-bg);
  --uc-sidebar-bg: var(--uc-nav-bg);
  --uc-sidebar-border: var(--uc-nav-border);
  --uc-sidebar-hover: var(--uc-nav-hover);
  --uc-sidebar-active: var(--uc-nav-active);
  --uc-sidebar-active-text: var(--uc-nav-active-text);
  --uc-sidebar-text: var(--uc-nav-text);
  --uc-sidebar-muted: var(--uc-nav-muted);
  --uc-sidebar-on: var(--uc-nav-on);
  --uc-sidebar-icon-hover: var(--uc-nav-on);
  --uc-sidebar-divider: var(--uc-nav-border);
  --uc-sidebar-ring: var(--uc-nav-ring);
  /* Đường kẻ hiện khi rê chuột lên rail: trên navy dùng màu nhãn nhóm, vì viền navy chỉ đạt 1,3:1. */
  --uc-sidebar-rail: var(--uc-nav-muted);
  --uc-sidebar-logo-bg: var(--uc-nav-logo-bg);
  /* Logo trắng trên thanh bên navy: logo màu của AUD không nổi trên nền navy. Theme của kit giữ logo màu. */
  --uc-sidebar-logo-filter: brightness(0) invert(1);
  /* Rộng thanh bên của kit (SIDEBAR_WIDTH 16rem). */
  --uc-sidebar-w: 16rem;
  /* Thanh bên thu về biểu tượng (SIDEBAR_WIDTH_ICON 3rem). */
  --uc-sidebar-w-collapsed: 3rem;
  /* Rộng thanh bên khi mở thành ngăn trên di động (SIDEBAR_WIDTH_MOBILE của kit). */
  --uc-sidebar-w-mobile: 18rem;
  /* Đầu trang của vỏ ứng dụng: 48 px như hệ thống tham chiếu (chủ dự án chốt 21/10/2026, đảo h-16 64 px của kit ngày 17/10). */
  --uc-topbar-h: 3rem;
  /* Nền đầu trang: trắng trên theme AUD, tách khỏi nền trang xám lạnh; theme của kit giữ nền trang như kit. */
  --uc-topbar-bg: var(--uc-surface);
  --uc-button-radius: var(--uc-radius-md);
  --uc-button-h-sm: var(--uc-control-h-sm);
  --uc-button-h-md: var(--uc-control-h);
  /* px-4 của kit cho cỡ mặc định; nút có biểu tượng dùng px-3. */
  --uc-button-px: var(--uc-space-4);
  /* px-3 của nút nhỏ. */
  --uc-button-px-sm: var(--uc-space-3);
  /* gap-2 giữa biểu tượng và chữ (nút nhỏ gap-1.5). */
  --uc-button-gap: var(--uc-space-2);
  --uc-button-font-size: var(--uc-text-base);
  /* Nút nhỏ của kit vẫn text-sm (14 px). */
  --uc-button-font-size-sm: var(--uc-text-base);
  --uc-button-font-weight: var(--uc-weight-medium);
  --uc-button-outline-bg: var(--uc-surface);
  --uc-button-outline-bg-hover: var(--uc-surface-hover);
  --uc-button-outline-fg: var(--uc-text);
  --uc-button-ghost-bg-hover: var(--uc-surface-hover);
  --uc-button-ghost-fg: var(--uc-text);
  --uc-button-destructive-fg: var(--uc-on-strong);
  /* Dùng chung cho Input, Textarea, nút mở của Select, Combobox, DatePicker và ô chọn tệp. */
  --uc-input-h: var(--uc-control-h);
  /* px-3 của kit. */
  --uc-input-px: var(--uc-space-3);
  /* shadow-xs của kit dưới viền ô nhập. */
  --uc-input-shadow: var(--uc-shadow-sm);
  --uc-input-radius: var(--uc-radius-md);
  --uc-input-font-size: var(--uc-text-base);
  --uc-input-bg: var(--uc-surface);
  --uc-input-border: var(--uc-border-control);
  --uc-input-border-focus: var(--uc-border-focus);
  --uc-input-fg: var(--uc-text);
  --uc-input-placeholder: var(--uc-text-placeholder);
  --uc-input-ring-focus: var(--uc-ring);
  /* Checkbox; radio dùng cùng bộ với bo tròn đầy. */
  --uc-check-radius: var(--uc-radius-sm);
  /* Ô chưa chọn phải thấy được (≥ 3:1): theme AUD 4,59:1, theme của kit zinc-500 khoảng 4,8:1. */
  --uc-check-border: var(--uc-border-checkable);
  --uc-badge-h: 1.25rem;
  --uc-badge-px: var(--uc-space-2);
  --uc-badge-font-size: var(--uc-text-xs);
  --uc-badge-neutral-bg: var(--uc-surface-muted);
  --uc-badge-neutral-fg: var(--uc-text-secondary);
  --uc-badge-outline-border: var(--uc-border-strong);
  --uc-badge-outline-fg: var(--uc-text-secondary);
  /* Trạng thái đang làm của giấy: nền nhạt thay nền xanh đặc, để màu nhấn đặc chỉ còn ở nút chính. */
  --uc-badge-primary-bg: var(--uc-primary-soft);
  --uc-badge-primary-fg: var(--uc-primary-text);
  --uc-badge-success-bg: var(--uc-success-soft);
  --uc-badge-success-fg: var(--uc-success-text);
  --uc-badge-warning-bg: var(--uc-warning-soft);
  --uc-badge-warning-fg: var(--uc-warning-text);
  --uc-badge-danger-bg: var(--uc-danger-soft);
  --uc-badge-danger-fg: var(--uc-danger-text);
  --uc-badge-info-bg: var(--uc-info-soft);
  --uc-badge-info-fg: var(--uc-info-text);
  /* Biến thể default, secondary, destructive của Badge trong kit. Theme AUD vẽ trạng thái trên nền nhạt (MASTER mục 2.3: màu nhấn không làm màu trạng thái); theme của kit giữ nền đặc của kit. */
  --uc-badge-default-bg: var(--uc-surface-emphasis);
  --uc-badge-default-bg-hover: var(--uc-surface-emphasis-hover);
  --uc-badge-default-fg: var(--uc-text-inverse);
  --uc-badge-secondary-bg: var(--uc-badge-neutral-bg);
  --uc-badge-secondary-fg: var(--uc-badge-neutral-fg);
  --uc-badge-destructive-bg: var(--uc-badge-danger-bg);
  --uc-badge-destructive-bg-hover: var(--uc-danger-soft-hover);
  --uc-badge-destructive-fg: var(--uc-badge-danger-fg);
  --uc-menu-item-bg-selected: var(--uc-surface-selected);
  --uc-menu-item-fg-selected: var(--uc-primary-text);
  --uc-dialog-bg: var(--uc-surface);
  --uc-dialog-border: var(--uc-border);
  /* Ngăn phải (drawer) cho review note, lịch sử và bản ghi danh mục (docs/ui/specs/README.md mục 2, rộng 400 px). Mọi drawer đệm 10 px và bo góc theo theme (chủ dự án chốt 27/10/2026). */
  --uc-sheet-w: 25rem;
  /* Drawer có bảng hoặc nhiều chi tiết; nút phóng to nhân đôi độ rộng này, không quá bề ngang cửa sổ. */
  --uc-sheet-w-wide: 40rem;
  --uc-sheet-bg: var(--uc-dialog-bg);
  --uc-sheet-border: var(--uc-dialog-border);
  --uc-sheet-shadow: var(--uc-shadow-overlay);
  --uc-sheet-padding: var(--uc-space-2-5);
  --uc-tooltip-bg: var(--uc-surface-inverse);
  --uc-tooltip-fg: var(--uc-text-inverse);
  --uc-breadcrumb-fg: var(--uc-muted);
  /* Lưới (components/data-grid/grid-theme.css, ADR 0005 phụ lục 21/10/2026): một dáng cho lưới số, danh sách và bảng nhúng; hàng 37 px (ô 32 + đệm 2 x 2 + kẻ 1), chữ 14 px như tham chiếu đo bằng getComputedStyle (chủ dự án chốt 22/10/2026, đảo 30/13 của 21/10); tiêu đề một dòng 32 px trên nền surface-muted; rê chuột tô cả dòng nhạt. */
  --uc-grid-row-h: 37px;
  --uc-grid-header-h: 32px;
  --uc-grid-font-size: 14px;
  /* Tô cả dòng khi rê chuột, như tham chiếu. Đậm hơn nền ô sửa được (primary-soft) một bậc: ô sửa được tự vẽ nền riêng nên vẫn phân biệt với dòng đang rê. */
  --uc-grid-row-hover-bg: var(--uc-primary-softer);
  --uc-grid-cell-px: 8px;
  --uc-grid-header-bg: var(--uc-surface-muted);
  --uc-grid-header-text: var(--uc-text-secondary);
  --uc-grid-cell-editable-bg: var(--uc-primary-soft);
  --uc-grid-cell-editing-bg: var(--uc-surface);
  /* Khung ô đang chọn và ô đang sửa của lưới: màu focus, đạt 3:1 trên nền ô ở mọi theme (tokens.test.ts). */
  --uc-grid-cell-editing-border: var(--uc-focus-ring-color);
  --uc-grid-cell-invalid-border: var(--uc-danger);
  /* Bóng mờ ở mép phải các cột ghim trái của lưới danh sách, thay đường kẻ cao hết: báo phía sau còn cột chưa cuộn tới (chủ dự án chốt 26/10/2026). Spread 6 px (lùi 2 px để mép bóng vẫn ở +4 px): hình bóng cao hơn hàng 6 px mỗi đầu nên phần nhòe dọc nằm ngoài vùng clip-path giữ trong chiều cao của hàng; mỗi hàng vẽ đoạn bóng đậm đều từ trên xuống, các đoạn nối liền thành một dải. */
  --uc-grid-pinned-shadow-left: -2px 0 6px 6px hsl(0 0% 0% / 0.10);
  /* Bóng mờ ở mép trái các cột ghim phải của lưới danh sách. */
  --uc-grid-pinned-shadow-right: 2px 0 6px 6px hsl(0 0% 0% / 0.10);
  /* 12 px – bóng của mép cột ghim được tràn ngang tới đâu (clip-path giữ bóng trong chiều cao của hàng, cho tràn ngang chừng này). */
  --uc-grid-pinned-shadow-reach: 0.75rem;
  /* Vạch ngắn chia cột trên tiêu đề lưới danh sách: cao 40% ô tiêu đề, không cao hết như mép cột ghim (chủ dự án chốt 26/10/2026, đảo 'không vạch' của 21/10). */
  --uc-grid-header-separator-h: 40%;
  --uc-grid-cell-readonly-bg: var(--uc-surface);
  /* Khung giấy SAS (components/paper). Bố cục toàn màn là làn khác; đây chỉ là token. */
  --uc-paper-gap: var(--uc-section-gap);
  --uc-paper-title-size: var(--uc-text-title);
  --uc-paper-title-size-page: var(--uc-text-display);
  --uc-paper-meta-size: var(--uc-text-dense);
  --uc-paper-meta-fg: var(--uc-muted);
  /* 32 px, chữ 14/500 như nút của tham chiếu (chủ dự án chốt 22/10/2026, đảo 28 của 17/10). */
  --uc-paper-toolbar-h: 2rem;
  --uc-paper-toolbar-gap: var(--uc-space-2);
  --uc-paper-notice-radius: var(--uc-radius-md);
  --uc-paper-notice-px: var(--uc-space-3);
  --uc-paper-notice-py: var(--uc-space-2);
  /* Dải ký (PaperSignStrip). Màu nằm ở semantic._paper.sign-*. */
  --uc-sign-chip-h: 1.75rem;
  --uc-sign-chip-px: var(--uc-space-2);
  --uc-sign-chip-radius: var(--uc-radius-md);
  --uc-sign-chip-font-size: var(--uc-text-dense);
  --uc-sign-pending-border: var(--uc-border);
  --uc-sign-next-border: var(--uc-info-border);
}


/* ======================= mini base-reset =======================
   Razor views have no Tailwind preflight, so this file carries its own defaults. */

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html {
    -webkit-text-size-adjust: 100%;
  }
  body {
    margin: 0;
  }
  h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 600;
    line-height: 1.3;
  }
  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.2rem; }
  h3 { font-size: 1.05rem; }
  h4 { font-size: 0.95rem; }
  p {
    margin-top: 0;
    margin-bottom: 0.75rem;
  }
  ul, ol, dl {
    margin-top: 0;
    margin-bottom: 0.75rem;
    padding-left: 1.25rem;
  }
  dd {
    margin-left: 0;
  }
  hr {
    margin: 1rem 0;
    border: 0;
    border-top: 1px solid var(--uc-border);
  }
  input, button, select, textarea {
    font: inherit;
    color: inherit;
    margin: 0;
  }
  button {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
  }
  img {
    max-width: 100%;
    height: auto;
  }
  table {
    border-collapse: collapse;
  }
  [hidden] {
    display: none !important;
  }
}

@layer base {
  body {
    background: var(--uc-bg);
    color: var(--uc-text);
    font-family: var(--uc-font-sans);
    font-size: var(--uc-text-base);
    line-height: var(--uc-leading-body);
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* Headings in the heading family, as in the React app (MASTER.md §5). */
  h1,
  h2,
  h3 {
    font-family: var(--uc-font-heading);
  }

  a {
    color: var(--uc-primary);
  }

  :focus-visible {
    outline: 2px solid var(--uc-primary);
    outline-offset: 2px;
  }

  /* Chrome/Safari draw their own cancel button inside type=search — ours lives
     on the component so it must not double up. */
  input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
    }
  }
}

@layer components {
  /* ============================== Accessibility ============================== */

  .uc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .uc-skip-link {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: var(--uc-z-toast);
    padding: 0.5rem 0.9rem;
    border-radius: var(--uc-radius-sm);
    background: var(--uc-sidebar-bg);
    color: var(--uc-sidebar-on);
    font-size: 0.85rem;
    text-decoration: none;
    transform: translateY(-140%);
    transition: transform var(--uc-duration) var(--uc-ease);
  }
  .uc-skip-link:focus-visible {
    transform: none;
    outline-offset: 3px;
  }

  /* ============================== App shell ============================== */

  .uc-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--uc-sidebar-w);
    background: var(--uc-sidebar-bg);
    color: var(--uc-sidebar-text);
    display: flex;
    flex-direction: column;
    z-index: var(--uc-z-fixed);
    transition: width var(--uc-duration) var(--uc-ease);
  }
  .uc-sidebar .brand {
    height: var(--uc-topbar-h);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 1rem;
    color: var(--uc-sidebar-on);
    font-weight: 600;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--uc-sidebar-divider);
    text-decoration: none;
  }
  .uc-sidebar .brand small {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--uc-sidebar-muted);
    letter-spacing: 0.04em;
  }
  .uc-sidebar .sidebar-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--uc-sidebar-divider);
    font-size: 0.75rem;
    color: var(--uc-sidebar-muted);
  }
  /* Desktop rail toggle — sits above the footer; hidden while the viewport is
     narrow because there the hamburger drives the overlay instead. */
  .uc-sidebar .rail-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: calc(100% - 1rem);
    margin: 0.35rem 0.5rem;
    padding: 0.5rem 0;
    border: none;
    border-radius: var(--uc-radius-sm);
    background: transparent;
    color: var(--uc-sidebar-muted);
    cursor: pointer;
    font-family: inherit;
  }
  .uc-sidebar .rail-toggle:hover {
    background: var(--uc-sidebar-hover);
    color: var(--uc-sidebar-on);
  }

  .uc-nav {
    padding: 0.75rem 0.5rem;
    overflow-y: auto;
    flex: 1;
  }
  .uc-nav .nav-section {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--uc-sidebar-muted);
    padding: 0.9rem 0.75rem 0.35rem;
  }
  .uc-nav .nav-sub {
    color: var(--uc-sidebar-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
    padding: 0.55rem 0.75rem 0.15rem;
  }
  .uc-nav a,
  .uc-nav summary {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--uc-radius-sm);
    color: var(--uc-sidebar-text);
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1.4;
    cursor: pointer;
  }
  .uc-nav summary {
    list-style: none;
  }
  .uc-nav summary::-webkit-details-marker {
    display: none;
  }
  .uc-nav a .uc-icon,
  .uc-nav a ng-icon,
  .uc-nav summary .uc-icon,
  .uc-nav summary ng-icon {
    width: 18px;
    text-align: center;
    color: var(--uc-sidebar-muted);
  }
  .uc-nav a:hover,
  .uc-nav summary:hover {
    background: var(--uc-sidebar-hover);
    color: var(--uc-sidebar-on);
  }
  .uc-nav a:hover .uc-icon,
  .uc-nav a:hover ng-icon,
  .uc-nav summary:hover .uc-icon,
  .uc-nav summary:hover ng-icon {
    color: var(--uc-sidebar-icon-hover);
  }
  .uc-nav a.active {
    background: var(--uc-sidebar-active);
    color: var(--uc-sidebar-on);
  }
  .uc-nav a.active .uc-icon,
  .uc-nav a.active ng-icon {
    color: var(--uc-sidebar-on);
  }
  .uc-nav details[open] > summary .caret {
    transform: rotate(180deg);
  }
  .uc-nav .nav-group-items {
    margin-left: 1.05rem;
    border-left: 1px solid var(--uc-sidebar-divider);
    padding-left: 0.4rem;
  }
  .uc-nav .nav-group-items a {
    font-size: 0.83rem;
    padding: 0.35rem 0.75rem;
  }
  .uc-nav .caret {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--uc-sidebar-muted);
    transition: transform var(--uc-duration) var(--uc-ease);
  }

  .uc-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: var(--uc-backdrop);
    z-index: calc(var(--uc-z-fixed) - 1);
    animation: uc-fade-in var(--uc-duration) var(--uc-ease);
  }

  .uc-main {
    margin-left: var(--uc-sidebar-w);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    transition: margin-left var(--uc-duration) var(--uc-ease);
    /* While the sidebar animates between rail and full width the content is briefly
       wider than the viewport; clip (not hidden) so no scroll container is created
       and the sticky topbar keeps working. */
    overflow-x: clip;
  }
  .uc-main:focus-visible {
    outline: none;
  }

  .uc-topbar {
    height: var(--uc-topbar-h);
    background: var(--uc-surface);
    border-bottom: 1px solid var(--uc-border);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.25rem;
    position: sticky;
    top: 0;
    z-index: var(--uc-z-sticky);
  }
  .uc-topbar .env-badge {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: var(--uc-warning-soft);
    color: var(--uc-warning-text);
    border: 1px solid var(--uc-warning-border);
  }
  .uc-topbar .icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: var(--uc-radius-md);
    border: none;
    background: transparent;
    color: var(--uc-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .uc-topbar .icon-btn:hover,
  .uc-topbar .icon-btn[aria-expanded="true"] {
    background: var(--uc-bg);
    color: var(--uc-text);
  }
  .uc-topbar .icon-btn .badge-dot {
    position: absolute;
    top: 6px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--uc-danger);
    border: 2px solid var(--uc-surface);
  }
  .uc-topbar .hamburger {
    display: none;
  }
  .uc-topbar .uc-breadcrumb {
    margin-bottom: 0;
    overflow: hidden;
    white-space: nowrap;
  }
  .uc-topbar-end {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }
  .uc-bell-list {
    min-width: 17rem;
    max-width: 22rem;
  }
  .uc-bell-list .uc-dropdown-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.9rem;
    border-bottom: 1px solid var(--uc-border);
    font-size: 0.82rem;
    color: var(--uc-text);
    white-space: normal;
  }
  .uc-bell-list .uc-dropdown-text:last-child {
    border-bottom: none;
  }
  .uc-bell-list .at {
    font-size: 0.72rem;
    color: var(--uc-muted);
  }

  .uc-user-chip {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0.5rem;
    border-radius: var(--uc-radius-md);
    cursor: pointer;
    border: none;
    background: transparent;
  }
  .uc-user-chip:hover,
  .uc-user-chip[aria-expanded="true"] {
    background: var(--uc-bg);
  }
  .uc-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--uc-primary);
    color: var(--uc-on-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 600;
  }
  .uc-user-chip .who {
    text-align: left;
    line-height: 1.2;
  }
  .uc-user-chip .who .name {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--uc-text);
  }
  .uc-user-chip .who .role {
    font-size: 0.75rem;
    color: var(--uc-muted);
  }

  .uc-content {
    padding: 1.25rem 1.5rem 2rem;
    flex: 1;
  }

  /* ============================== Page head ============================== */

  .uc-breadcrumb {
    font-size: 0.8rem;
    color: var(--uc-muted);
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    min-width: 0;
  }
  .uc-breadcrumb ol {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .uc-breadcrumb li {
    display: inline-flex;
    align-items: center;
    min-width: 0;
  }
  .uc-breadcrumb .sep {
    color: var(--uc-sidebar-muted);
  }
  .uc-breadcrumb a {
    color: var(--uc-muted);
    text-decoration: none;
  }
  .uc-breadcrumb a:hover {
    color: var(--uc-primary);
  }
  .uc-breadcrumb .current {
    color: var(--uc-text);
    font-weight: 600;
  }
  .uc-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
  }
  .uc-page-head h1 {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
    text-wrap: balance;
  }
  .uc-page-head .sub {
    color: var(--uc-muted);
    font-size: 0.82rem;
    margin-top: 0.15rem;
    text-wrap: pretty;
  }
  .uc-page-head-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
  }

  /* ============================== Card / toolbar ============================== */

  .uc-card {
    background: var(--uc-surface);
    border: 1px solid var(--uc-border);
    border-radius: var(--uc-radius-xl);
    box-shadow: var(--uc-shadow-sm);
    /* As a grid/flex item a card must be allowed to shrink below its content
       (min-width:auto) so a .uc-table-wrap inside scrolls instead of pushing the page. */
    min-width: 0;
  }
  .uc-card .uc-card-head {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--uc-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-weight: 600;
  }
  .uc-card .uc-card-body {
    padding: 1rem;
  }
  /* Muted footer band (save/cancel bars) — the bottom corners follow the card radius. */
  .uc-card .uc-card-foot {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--uc-border);
    background: var(--uc-surface-subtle);
    border-radius: 0 0 calc(var(--uc-radius-xl) - 1px) calc(var(--uc-radius-xl) - 1px);
  }
  /* Heading inside a card head/body (h2/h3) — preflight resets headings to
     inherit, so without this the title reads as body text. */
  .uc-card-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
  }

  .uc-toolbar {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--uc-border);
  }
  /* Icon-decorated search input (uc-search-input renders this markup). Grows to
     fill the toolbar slot on desktop, shrinks to full row width on mobile.
     The <uc-icon> host carries the .uc-icon class, so it is the direct child. */
  .uc-search-box {
    position: relative;
    flex: 1 1 14rem;
    max-width: 22rem;
    min-width: 9rem;
  }
  .uc-search-box > .uc-icon {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--uc-muted);
    font-size: 0.8rem;
    pointer-events: none;
  }
  .uc-search-box input {
    padding-left: 2rem;
    padding-right: 1.9rem;
  }
  .uc-search-box .clear {
    position: absolute;
    right: 0.3rem;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border: none;
    border-radius: var(--uc-radius-sm);
    background: transparent;
    color: var(--uc-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
  }
  .uc-search-box .clear:hover {
    background: var(--uc-control-bg);
    color: var(--uc-text);
  }

  /* Kept for screens still on the pre-component markup — removed in Phase 04. */
  .uc-toolbar .search-box {
    position: relative;
    flex: 1 1 14rem;
    max-width: 22rem;
    min-width: 9rem;
  }
  .uc-toolbar .search-box .uc-icon,
  .uc-toolbar .search-box ng-icon {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--uc-muted);
    font-size: 0.8rem;
    pointer-events: none;
  }
  .uc-toolbar .search-box input {
    padding-left: 2rem;
  }

  /* Toolbar selects/buttons keep natural width instead of stretching. */
  .uc-toolbar .uc-select {
    width: auto;
    min-width: 8rem;
  }

  /* ============================== Buttons ============================== */

  /* The kit's Button: 36 px high, px-4, text-sm medium, gap-2 (component.button of design/tokens.json). */
  .uc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--uc-button-gap);
    min-height: var(--uc-button-h-md);
    font-size: var(--uc-button-font-size);
    font-weight: var(--uc-button-font-weight);
    font-family: inherit;
    line-height: 1.25;
    padding: var(--uc-space-1) var(--uc-button-px);
    border-radius: var(--uc-button-radius);
    border: 1px solid transparent;
    background: transparent;
    color: var(--uc-text);
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    white-space: nowrap;
    transition:
      background-color var(--uc-duration) var(--uc-ease),
      border-color var(--uc-duration) var(--uc-ease),
      color var(--uc-duration) var(--uc-ease);
  }
  /* Press feedback: the button sinks one pixel while held (no transition on purpose). */
  .uc-btn:active:not(:disabled) {
    transform: translateY(1px);
  }
  /* Same focus ring as inputs — border tint + 3px soft ring instead of the outline. */
  .uc-btn:focus-visible {
    outline: none;
    border-color: var(--uc-primary);
    box-shadow: 0 0 0 3px var(--uc-ring);
  }
  .uc-btn.danger:focus-visible {
    border-color: var(--uc-danger-hover);
    box-shadow: 0 0 0 3px var(--uc-ring-danger);
  }
  .uc-btn:disabled,
  .uc-btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
  }
  .uc-btn.primary {
    background: var(--uc-primary);
    border-color: var(--uc-primary);
    color: var(--uc-on-primary);
  }
  .uc-btn.primary:hover {
    background: var(--uc-primary-hover);
    border-color: var(--uc-primary-hover);
    color: var(--uc-on-primary);
  }
  .uc-btn.secondary {
    background: var(--uc-control-bg);
    border-color: var(--uc-control-bg);
    color: var(--uc-text);
  }
  .uc-btn.secondary:hover {
    background: var(--uc-control-bg-hover);
    border-color: var(--uc-control-bg-hover);
  }
  .uc-btn.outline {
    border-color: var(--uc-border);
    color: var(--uc-button-outline-fg);
    background: var(--uc-button-outline-bg);
    box-shadow: var(--uc-shadow-sm);
  }
  .uc-btn.outline:hover {
    background: var(--uc-button-outline-bg-hover);
  }
  .uc-btn.danger {
    background: var(--uc-danger);
    border-color: var(--uc-danger);
    color: var(--uc-on-strong);
  }
  .uc-btn.danger:hover {
    background: var(--uc-danger-hover);
    border-color: var(--uc-danger-hover);
    color: var(--uc-on-strong);
  }
  /* Outline danger: a destructive action in a list row, quieter than the solid button of its confirmation page. */
  .uc-btn.danger.outline {
    background: var(--uc-button-outline-bg);
    border-color: var(--uc-danger-border);
    color: var(--uc-danger-text);
  }
  .uc-btn.danger.outline:hover {
    background: var(--uc-danger-soft);
    border-color: var(--uc-danger);
    color: var(--uc-danger-text);
  }
  /* Warning = soft amber (dark amber text keeps AA contrast — a solid amber
     button with white text fails it). */
  .uc-btn.warning {
    background: var(--uc-warning-soft);
    border-color: var(--uc-warning-border);
    color: var(--uc-warning-text);
  }
  .uc-btn.warning:hover {
    background: var(--uc-warning-border);
    border-color: var(--uc-warning-border);
    color: var(--uc-warning-text);
  }
  /* Icon-only variant for dense row actions — square padding, muted glyph. */
  .uc-btn.icon {
    padding: 0;
    min-width: var(--uc-button-h-md);
  }
  .uc-btn.icon.sm {
    padding: 0;
    min-height: var(--uc-button-h-sm);
    min-width: var(--uc-button-h-sm);
  }
  .uc-btn.ghost {
    color: var(--uc-muted);
  }
  .uc-btn.ghost:hover {
    background: var(--uc-button-ghost-bg-hover);
    color: var(--uc-button-ghost-fg);
  }
  /* The trigger of an open menu stays visibly pressed while its list is open. */
  .uc-btn.outline[aria-expanded="true"],
  .uc-btn.secondary[aria-expanded="true"],
  .uc-btn.ghost[aria-expanded="true"] {
    background: var(--uc-control-bg);
    color: var(--uc-text);
  }
  .uc-btn.sm {
    font-size: var(--uc-button-font-size-sm);
    gap: var(--uc-space-1-5);
    padding: var(--uc-space-1) var(--uc-button-px-sm);
    min-height: var(--uc-button-h-sm);
  }

  /* ============================== Forms ============================== */

  .uc-field {
    margin-bottom: 0.9rem;
  }
  /* The kit's Label: text-sm medium, gap-2 above the control. */
  .uc-label {
    display: block;
    font-size: var(--uc-text-base);
    font-weight: var(--uc-weight-medium);
    line-height: 1;
    color: var(--uc-text);
    margin-bottom: var(--uc-space-2);
  }
  .req::after {
    content: " *";
    color: var(--uc-danger);
  }
  .uc-hint {
    font-size: 0.75rem;
    color: var(--uc-muted);
    margin-top: 0.25rem;
  }
  .uc-field-error {
    color: var(--uc-danger);
    font-size: 0.75rem;
    margin-top: 0.25rem;
  }

  .uc-input,
  .uc-select,
  .uc-textarea {
    display: block;
    width: 100%;
    font-family: inherit;
    min-height: var(--uc-input-h);
    font-size: var(--uc-input-font-size);
    line-height: 1.45;
    padding: var(--uc-space-1-5) var(--uc-input-px);
    color: var(--uc-input-fg);
    background: var(--uc-input-bg);
    border: 1px solid var(--uc-input-border);
    border-radius: var(--uc-input-radius);
    box-shadow: var(--uc-input-shadow);
    transition:
      border-color 0.15s var(--uc-ease),
      box-shadow 0.15s var(--uc-ease);
  }
  .uc-input::placeholder,
  .uc-textarea::placeholder {
    color: var(--uc-input-placeholder);
  }
  .uc-input:focus,
  .uc-select:focus,
  .uc-textarea:focus {
    outline: none;
    border-color: var(--uc-input-border-focus);
    box-shadow: 0 0 0 3px var(--uc-input-ring-focus);
  }
  .uc-input:disabled,
  .uc-select:disabled,
  .uc-textarea:disabled {
    background: var(--uc-bg);
    color: var(--uc-muted);
    cursor: not-allowed;
  }
  .uc-input[readonly],
  .uc-textarea[readonly] {
    background: var(--uc-bg);
  }
  .uc-input.is-invalid,
  .uc-select.is-invalid,
  .uc-textarea.is-invalid {
    border-color: var(--uc-danger);
  }
  .uc-input.is-invalid:focus,
  .uc-select.is-invalid:focus,
  .uc-textarea.is-invalid:focus {
    border-color: var(--uc-danger);
    box-shadow: 0 0 0 3px var(--uc-ring-danger);
  }
  /* invalid-feedback semantics: error text only shows next to an invalid control */
  .uc-field-error:not(.always) {
    display: none;
  }
  .is-invalid ~ .uc-field-error,
  .uc-field-error.always {
    display: block;
  }

  .uc-select {
    appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='2' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 0.8rem;
  }

  .uc-check {
    appearance: none;
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    border: 1px solid var(--uc-check-border);
    border-radius: var(--uc-check-radius);
    background: var(--uc-surface);
    cursor: pointer;
    vertical-align: -0.15em;
    transition:
      background-color 0.15s var(--uc-ease),
      border-color 0.15s var(--uc-ease);
  }
  .uc-check:checked {
    background-color: var(--uc-primary);
    border-color: var(--uc-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='m3 8.5 3.2 3.2L13 4.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.75rem;
  }
  .uc-check[type="radio"] {
    border-radius: 50%;
  }
  .uc-check[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.4' fill='%23fff'/%3E%3C/svg%3E");
  }
  .uc-check:disabled {
    background-color: var(--uc-bg);
    cursor: not-allowed;
  }
  .uc-check-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.875rem;
    cursor: pointer;
  }

  /* lookup combobox — typeahead for large master lists */
  .uc-combo {
    position: relative;
  }
  .uc-combo .uc-input {
    padding-right: 1.7rem;
  }
  .uc-combo .clear {
    position: absolute;
    right: 0.3rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    border: 0;
    background: transparent;
    color: var(--uc-muted);
    padding: 0.2rem;
    border-radius: var(--uc-radius-sm);
    cursor: pointer;
  }
  .uc-combo .clear:hover {
    color: var(--uc-text);
    background: var(--uc-bg);
  }
  .uc-combo-list {
    position: absolute;
    z-index: var(--uc-z-dropdown);
    top: 100%;
    left: 0;
    right: 0;
    background: var(--uc-surface);
    border: 1px solid var(--uc-border);
    border-radius: var(--uc-radius-lg);
    margin-top: 4px;
    box-shadow: var(--uc-shadow-md);
    animation: uc-pop-in var(--uc-duration-fast) var(--uc-ease);
    max-height: 224px;
    overflow-y: auto;
    font-size: 0.85rem;
    list-style: none;
    padding: 0.25rem 0;
  }
  .uc-combo-list .opt {
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }
  .uc-combo-list .opt:hover,
  .uc-combo-list .opt.sel {
    background: var(--uc-primary-soft);
  }
  .uc-combo-list .opt .code {
    font-family: var(--uc-font-mono);
    font-size: 0.75rem;
    color: var(--uc-muted);
  }
  .uc-combo-list .opt-more {
    padding: 0.4rem 0.75rem;
    color: var(--uc-muted);
    font-size: 0.75rem;
  }
  /* invalid-feedback semantics for uc-combo: is-invalid lives on its inner input */
  .uc-combo:has(.is-invalid) ~ .uc-field-error {
    display: block;
  }

  /* ============================== Data table ============================== */

  /* Wide tables scroll inside their card or modal instead of pushing the page. */
  .uc-table-wrap {
    overflow-x: auto;
  }
  .uc-table {
    width: 100%;
    margin: 0;
    font-size: 0.855rem;
    border-collapse: collapse;
    caption-side: bottom;
  }
  .uc-table thead th {
    background: var(--uc-surface-subtle);
    color: var(--uc-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    text-align: left;
    border-bottom: 1px solid var(--uc-border);
    padding: 0.6rem 1rem;
    white-space: nowrap;
  }
  .uc-table tbody td {
    padding: 0.6rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--uc-border);
  }
  .uc-table tbody tr:hover {
    background: var(--uc-primary-soft);
  }
  .uc-table tbody tr:last-child td {
    border-bottom: none;
  }
  .uc-table .code {
    font-family: var(--uc-font-mono);
    font-size: 0.82rem;
    font-weight: 600;
  }
  .uc-table .row-actions {
    white-space: nowrap;
    text-align: right;
  }
  .uc-table .row-actions .uc-btn {
    margin-left: 0.25rem;
  }
  .uc-table tr.diff td {
    background: var(--uc-warning-soft);
  }
  /* Audit/diff line highlight: a value that differs from the previous entry. */
  .uc-diff {
    background: var(--uc-warning-soft);
    border-radius: var(--uc-radius-sm);
    padding: 0 0.3rem;
  }
  .uc-table .is-inactive td {
    color: var(--uc-muted);
  }

  /* ============================== Badges / chips / callouts ============================== */

  .uc-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.18rem 0.55rem;
    border-radius: var(--uc-radius-full);
    white-space: nowrap;
  }
  /* Text colours sit on soft backgrounds, so each uses the *_text token (≥4.5:1). */
  .uc-badge.success {
    background: var(--uc-success-soft);
    color: var(--uc-success-text);
  }
  .uc-badge.muted {
    background: var(--uc-control-bg);
    color: var(--uc-text);
  }
  .uc-badge.warning {
    background: var(--uc-warning-soft);
    color: var(--uc-warning-text);
  }
  .uc-badge.danger {
    background: var(--uc-danger-soft);
    color: var(--uc-danger-text);
  }
  .uc-badge.info {
    background: var(--uc-info-soft);
    color: var(--uc-info-text);
  }
  .uc-badge.primary {
    background: var(--uc-primary-soft);
    color: var(--uc-primary);
  }
  /* Status badges additionally carry a leading dot so state never depends on
     colour alone (the grid's status column adds .status). */
  .uc-badge.status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
  }

  .uc-chip {
    display: inline-flex;
    align-items: center;
    font-family: var(--uc-font-mono);
    font-size: 0.75rem;
    background: var(--uc-bg);
    border: 1px solid var(--uc-border);
    color: var(--uc-text);
    padding: 0.15rem 0.5rem;
    border-radius: 5px;
    margin: 0.1rem 0.15rem 0.1rem 0;
  }

  .uc-callout {
    display: flex;
    gap: 0.7rem;
    padding: 0.8rem 1rem;
    border-radius: var(--uc-radius-md);
    font-size: 0.83rem;
    text-wrap: pretty;
    border: 1px solid;
    align-items: flex-start;
  }
  .uc-callout .uc-icon,
  .uc-callout ng-icon {
    margin-top: 0.15rem;
    flex: 0 0 auto;
  }
  .uc-callout.info {
    background: var(--uc-info-soft);
    border-color: var(--uc-info-border);
    color: var(--uc-info-text);
  }
  .uc-callout.success {
    background: var(--uc-success-soft);
    border-color: var(--uc-success-border);
    color: var(--uc-success-text);
  }
  .uc-callout.warning {
    background: var(--uc-warning-soft);
    border-color: var(--uc-warning-border);
    color: var(--uc-warning-text);
  }
  .uc-callout.danger {
    background: var(--uc-danger-soft);
    border-color: var(--uc-danger-border);
    color: var(--uc-danger-text);
  }

  /* ============================== Tabs / defs / list ============================== */

  .uc-tabs {
    border-bottom: 1px solid var(--uc-border);
    padding: 0 1rem;
    display: flex;
    gap: 0.15rem;
  }
  .uc-tabs .uc-tab {
    border: none;
    background: transparent;
    color: var(--uc-muted);
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    padding: 0.7rem 0.9rem;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
  }
  .uc-tabs .uc-tab:hover {
    color: var(--uc-text);
  }
  .uc-tabs .uc-tab.active {
    color: var(--uc-primary);
    border-bottom-color: var(--uc-primary);
  }

  .uc-defs {
    display: grid;
    grid-template-columns: 180px 1fr;
    row-gap: 0.55rem;
    column-gap: 1rem;
    font-size: 0.875rem;
    margin: 0;
  }
  .uc-defs dt {
    color: var(--uc-muted);
    font-weight: 500;
  }
  .uc-defs dd {
    margin: 0;
  }

  .uc-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .uc-list .uc-list-item {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--uc-border);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.875rem;
  }
  .uc-list .uc-list-item:last-child {
    border-bottom: none;
  }

  /* ============================== Pagination / misc ============================== */

  .uc-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.82rem;
    color: var(--uc-muted);
  }
  .uc-pagination .pages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    /* narrow viewports: let the page-size select drop to its own line */
    justify-content: flex-end;
  }
  .uc-pagination .pages a,
  .uc-pagination .pages button {
    min-width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--uc-radius-sm);
    border: 1px solid var(--uc-border);
    background: var(--uc-surface);
    color: var(--uc-text);
    text-decoration: none;
    font-size: 0.8rem;
    padding: 0 0.4rem;
    cursor: pointer;
  }
  .uc-pagination .pages a:hover,
  .uc-pagination .pages button:hover {
    background: var(--uc-bg);
  }
  .uc-pagination .pages .active a,
  .uc-pagination .pages .active button,
  .uc-pagination .pages a.active,
  .uc-pagination .pages button.active {
    background: var(--uc-primary);
    border-color: var(--uc-primary);
    color: var(--uc-on-primary);
  }
  .uc-pagination .pages .disabled a,
  .uc-pagination .pages .disabled button {
    opacity: 0.5;
    pointer-events: none;
  }
  .uc-pagination .pages button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .uc-pagination .page-size {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: 0.75rem;
  }
  .uc-pagination .page-size .uc-select {
    width: auto;
    padding: 0.2rem 1.9rem 0.2rem 0.55rem;
    font-size: 0.8rem;
  }

  .uc-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--uc-muted);
    font-size: 0.875rem;
    text-wrap: pretty;
  }
  /* Full empty-state (icon + title + hint + action slot) — uc-empty-state and
     the grid no-rows overlay share this look. */
  .uc-empty .empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--uc-control-bg);
    color: var(--uc-muted);
    margin-bottom: 0.7rem;
  }
  .uc-empty .empty-title {
    color: var(--uc-text);
    font-weight: 600;
    font-size: 0.9rem;
  }
  .uc-empty .empty-hint {
    margin-top: 0.15rem;
    font-size: 0.78rem;
  }
  /* Projected actions sit directly under the hint/title. */
  .uc-empty > a,
  .uc-empty > button,
  .uc-empty > .uc-btn {
    margin-top: 0.8rem;
  }

  .uc-spinner {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--uc-border);
    border-top-color: var(--uc-primary);
    border-radius: 50%;
    display: inline-block;
    animation: uc-spin 0.7s linear infinite;
  }
  @keyframes uc-spin {
    to {
      transform: rotate(360deg);
    }
  }

  .uc-skeleton {
    background: linear-gradient(90deg, var(--uc-bg) 25%, var(--uc-control-bg) 50%, var(--uc-bg) 75%);
    background-size: 200% 100%;
    animation: uc-shimmer 1.4s infinite;
    border-radius: 4px;
    min-height: 1em;
  }
  @keyframes uc-shimmer {
    to {
      background-position: -200% 0;
    }
  }

  /* Progress bar: <div class="uc-progress" role="progressbar"><div class="bar"></div></div>.
     A determinate bar sets the width of .bar (Angular: [style.width.%]); .indeterminate
     sweeps instead. */
  .uc-progress {
    position: relative;
    height: 4px;
    overflow: hidden;
    border-radius: var(--uc-radius-full);
    background: var(--uc-control-bg);
  }
  .uc-progress > .bar {
    height: 100%;
    border-radius: inherit;
    background: var(--uc-primary);
    transition: width var(--uc-duration) var(--uc-ease);
  }
  .uc-progress.indeterminate > .bar {
    width: 50%;
    animation: uc-indeterminate 1.6s ease-in-out infinite;
  }
  @keyframes uc-indeterminate {
    from {
      transform: translateX(-100%) scaleX(0.5);
    }
    to {
      transform: translateX(200%) scaleX(0.5);
    }
  }

  /* ============================== Dropdown ============================== */

  .uc-dropdown {
    position: relative;
  }
  .uc-dropdown summary {
    list-style: none;
    cursor: pointer;
  }
  .uc-dropdown summary::-webkit-details-marker {
    display: none;
  }
  .uc-dropdown-list {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 12rem;
    background: var(--uc-surface);
    border: 1px solid var(--uc-border);
    border-radius: var(--uc-radius-lg);
    box-shadow: var(--uc-shadow-md);
    padding: 0.25rem;
    margin: 0;
    list-style: none;
    z-index: var(--uc-z-dropdown);
  }
  .uc-dropdown-list .uc-dropdown-item,
  .uc-dropdown-list li a,
  .uc-dropdown-list li button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4rem 0.6rem;
    border-radius: var(--uc-radius-sm);
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--uc-text);
    background: none;
    border: none;
    text-decoration: none;
    cursor: pointer;
    text-align: left;
  }
  .uc-dropdown-list .uc-dropdown-item:hover,
  .uc-dropdown-list li a:hover,
  .uc-dropdown-list li button:hover {
    background: var(--uc-bg);
  }
  .uc-dropdown-list li a.danger,
  .uc-dropdown-list li button.danger {
    color: var(--uc-danger-text);
  }
  .uc-dropdown-list li a.danger:hover,
  .uc-dropdown-list li button.danger:hover {
    background: var(--uc-danger-soft);
    color: var(--uc-danger-text);
  }
  .uc-dropdown-list .divider {
    border-top: 1px solid var(--uc-border);
    margin: 0.25rem -0.25rem;
  }
  .uc-dropdown-list .uc-dropdown-text {
    padding: 0.4rem 0.6rem;
    font-size: 0.78rem;
    color: var(--uc-muted);
  }
  .uc-dropdown-list {
    animation: uc-pop-in var(--uc-duration-fast) var(--uc-ease);
  }
  /* Popovers drop in from their trigger; modals zoom in from centre (95 %). */
  @keyframes uc-pop-in {
    from {
      opacity: 0;
      transform: scale(0.96) translateY(-4px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes uc-zoom-in {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes uc-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* ============================== Modal skin ==============================
     shared/ui/modal/uc-modal.component.ts + uc-confirm.service.ts render the
     behaviour (backdrop/Escape/focus trap); these classes carry the skin. */

  .uc-modal {
    position: fixed;
    inset: 0;
    z-index: var(--uc-z-modal);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh 1rem 1.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* uc-modal / uc-confirm add this while a dialog is open (see modal/scroll-lock.ts). */
  body.uc-modal-open {
    overflow: hidden;
  }
  .uc-modal-dialog {
    width: 100%;
    max-width: 520px;
  }
  .uc-modal-dialog.lg {
    max-width: 800px;
  }
  .uc-modal-dialog.xl {
    max-width: 1140px;
  }
  .uc-modal-content {
    background: var(--uc-surface);
    border: 1px solid var(--uc-border);
    border-radius: var(--uc-radius-xl);
    box-shadow: var(--uc-shadow-md);
    display: flex;
    flex-direction: column;
    max-height: 82vh;
    animation: uc-zoom-in var(--uc-duration-fast) var(--uc-ease);
  }
  .uc-modal-backdrop {
    animation: uc-fade-in var(--uc-duration) var(--uc-ease);
  }
  .uc-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--uc-border);
  }
  .uc-modal-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    text-wrap: balance;
  }
  .uc-modal-close {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--uc-radius-sm);
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--uc-muted);
    flex: 0 0 auto;
  }
  .uc-modal-close:hover {
    background: var(--uc-bg);
    color: var(--uc-text);
  }
  .uc-modal-body {
    padding: 1rem;
    overflow-y: auto;
  }
  .uc-modal-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--uc-border);
    background: var(--uc-surface-subtle);
    border-radius: 0 0 calc(var(--uc-radius-xl) - 1px) calc(var(--uc-radius-xl) - 1px);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
  }
  .uc-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--uc-z-modal-backdrop);
    background: var(--uc-backdrop);
    backdrop-filter: blur(2px);
  }

  /* ============================== KPI ============================== */

  .uc-kpi {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
  }
  .uc-kpi .kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--uc-radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
  }
  .uc-kpi .kpi-icon.blue {
    background: var(--uc-primary-soft);
    color: var(--uc-primary);
  }
  .uc-kpi .kpi-icon.green {
    background: var(--uc-success-soft);
    color: var(--uc-success);
  }
  .uc-kpi .kpi-icon.amber {
    background: var(--uc-warning-soft);
    color: var(--uc-warning);
  }
  .uc-kpi .kpi-icon.violet {
    background: var(--uc-violet-soft);
    color: var(--uc-violet);
  }
  .uc-kpi .kpi-value {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.1;
  }
  .uc-kpi .kpi-label {
    font-size: 0.75rem;
    color: var(--uc-muted);
  }
  .uc-kpi .kpi-trend {
    font-size: 0.75rem;
    margin-left: auto;
    align-self: flex-start;
  }

  /* ============================== Auth pages ============================== */

  /* The login layout of the kit (login2): a light page, the logo and product name above a bordered card, links under
     it. One accent only; no dark canvas, no gradient (MASTER.md §2, §9). */
  .uc-auth-wrap {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--uc-space-6);
    background: var(--uc-auth-bg);
    padding: var(--uc-space-8) var(--uc-space-4);
  }
  .uc-auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--uc-space-2);
    text-align: center;
  }
  .uc-auth-brand .logo-img {
    height: var(--uc-space-10);
    width: auto;
  }
  .uc-auth-brand .t1 {
    font-family: var(--uc-font-heading);
    font-weight: 600;
    font-size: var(--uc-text-title);
    color: var(--uc-text);
  }
  .uc-auth-card {
    width: 24rem;
    max-width: 100%;
    background: var(--uc-surface);
    border: 1px solid var(--uc-border);
    border-radius: var(--uc-radius-lg);
    box-shadow: var(--uc-auth-card-shadow);
    padding: var(--uc-space-8) var(--uc-space-6);
  }
  .uc-auth-foot {
    font-size: var(--uc-text-xs);
    color: var(--uc-muted);
    text-align: center;
  }

  /* ============================== Dev gallery helpers ============================== */

  .uc-arch-box {
    border: 1px solid var(--uc-border);
    border-radius: var(--uc-radius);
    background: var(--uc-surface);
    padding: 0.9rem 1rem;
  }
  .uc-arch-box .t {
    font-weight: 600;
    font-size: 0.9rem;
  }
  .uc-arch-box .d {
    font-size: 0.75rem;
    color: var(--uc-muted);
  }
  .uc-screen-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--uc-border);
    border-radius: var(--uc-radius);
    background: var(--uc-surface);
    overflow: hidden;
    transition:
      box-shadow var(--uc-duration) var(--uc-ease),
      transform var(--uc-duration) var(--uc-ease);
  }
  .uc-screen-card:hover {
    box-shadow: var(--uc-shadow-md);
    transform: translateY(-2px);
    color: inherit;
  }
  .uc-screen-card .thumb {
    height: 110px;
    background: linear-gradient(135deg, var(--uc-sidebar-hover), var(--uc-sidebar-bg));
    color: var(--uc-sidebar-icon-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
  }
  .uc-screen-card .thumb.light {
    background: linear-gradient(135deg, var(--uc-primary-soft), var(--uc-primary-softer));
    color: var(--uc-primary);
  }
  .uc-screen-card .body {
    padding: 0.8rem 1rem;
  }
  .uc-screen-card .body .t {
    font-weight: 600;
    font-size: 0.9rem;
  }
  .uc-screen-card .body .d {
    font-size: 0.75rem;
    color: var(--uc-muted);
  }

  /* ============================== Responsive shell ==============================
     The icon rail is class-driven (.rail on .uc-sidebar/.uc-main), applied by
     LayoutService: always on ≤991px viewports, on desktop by the rail toggle.
     .open on the sidebar expands it as a floating overlay (narrow viewports
     only — on a collapsed desktop a group tap just un-collapses). */

  .uc-sidebar.rail {
    width: var(--uc-sidebar-w-collapsed);
  }
  .uc-sidebar.rail .brand .label,
  .uc-sidebar.rail .uc-nav .txt,
  .uc-sidebar.rail .uc-nav .nav-section,
  .uc-sidebar.rail .uc-nav .nav-sub,
  .uc-sidebar.rail .uc-nav .caret,
  .uc-sidebar.rail .sidebar-footer {
    display: none;
  }
  .uc-sidebar.rail .uc-nav a,
  .uc-sidebar.rail .uc-nav summary {
    justify-content: center;
  }
  /* Sub-items don't fit the icon rail — tapping the group opens the overlay. */
  .uc-sidebar.rail .uc-nav .nav-group-items {
    display: none;
  }
  .uc-main.rail {
    margin-left: var(--uc-sidebar-w-collapsed);
  }

  /* Expanded overlay state — full sidebar floats over a backdrop. */
  .uc-sidebar.rail.open {
    width: var(--uc-sidebar-w);
    box-shadow: var(--uc-shadow-lg);
  }
  .uc-sidebar.rail.open .brand .label,
  .uc-sidebar.rail.open .uc-nav .txt {
    display: block;
  }
  .uc-sidebar.rail.open .uc-nav .nav-section,
  .uc-sidebar.rail.open .uc-nav .nav-sub,
  .uc-sidebar.rail.open .uc-nav .nav-group-items,
  .uc-sidebar.rail.open .sidebar-footer {
    display: block;
  }
  .uc-sidebar.rail.open .uc-nav .caret {
    display: inline-flex;
  }
  .uc-sidebar.rail.open .uc-nav a,
  .uc-sidebar.rail.open .uc-nav summary {
    justify-content: flex-start;
  }

  @media (min-width: 992px) {
    /* Overlay mechanics are narrow-only; the toggle button is hidden there. */
    .uc-sidebar-backdrop {
      display: none;
    }
  }
  @media (max-width: 991px) {
    .uc-sidebar .rail-toggle {
      display: none;
    }
    .uc-topbar .hamburger {
      display: inline-flex;
    }
  }

  @media (max-width: 640px) {
    .uc-topbar .uc-breadcrumb {
      display: none;
    }
    .uc-topbar .who {
      display: none;
    }
  }

  /* Coarse pointers: interactive targets go to 44px (WCAG 2.5.8 / Apple HIG). */
  @media (pointer: coarse) {
    .uc-btn {
      min-height: 40px;
    }
    .uc-btn.sm {
      min-height: 36px;
    }
    .uc-topbar .icon-btn {
      width: 44px;
      height: 44px;
    }
    .uc-nav a,
    .uc-nav summary {
      min-height: 44px;
    }
    .uc-input,
    .uc-select {
      min-height: 42px;
    }
    .uc-pagination .pages a,
    .uc-pagination .pages button {
      min-width: 40px;
      height: 40px;
    }
  }
}