@better-forge/ui 0.1.0 → 0.1.1

package/styles/base.css

@@ -1,521 +1,521 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* Fonts are bundled with the app (Manrope, Inter, JetBrains Mono: SIL OFL; Material Symbols: Apache 2.0),
-   so opening the interface makes no request to Google. */
-@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/manrope-latin-ext-4.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
-@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/manrope-latin-ext-4.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
-@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/manrope-latin-ext-4.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
-@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('./fonts/manrope-latin-ext-4.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
-@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/manrope-latin-5.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
-@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/manrope-latin-5.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
-@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/manrope-latin-5.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
-@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('./fonts/manrope-latin-5.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
-@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
-@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
-@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
-@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/inter-latin-1.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
-@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/inter-latin-1.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
-@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/inter-latin-1.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
-@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/jetbrains-mono-latin-ext-2.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
-@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/jetbrains-mono-latin-ext-2.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
-@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/jetbrains-mono-latin-3.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
-@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/jetbrains-mono-latin-3.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
-
-/* ── M3 Color Tokens — Light (exact from mockup) ─────────────────── */
-:root {
-  --m3-surface:                  #f5f6f9;
-  --m3-surface-dim:              #d7dce5;
-  --m3-surface-bright:           #f5f6f9;
-  --m3-surface-container-lowest: #fafbfc;
-  --m3-surface-container-low:    #eef0f5;
-  --m3-surface-container:        #e7eaf0;
-  --m3-surface-container-high:   #dfe3ea;
-  --m3-surface-container-highest:#d7dce5;
-  --m3-on-surface:               #1c2333;
-  --m3-on-surface-variant:       #45464d;
-  --m3-secondary:                #566174;
-  --m3-outline:                  #7c828e;
-  --m3-outline-variant:          #d3d7df;
-  --m3-primary:                  #000000;
-  --m3-on-primary:               #ffffff;
-  --m3-on-primary-container:     #497cff;
-  --m3-primary-fixed:            #dbe7ff;
-  --m3-primary-fixed-dim:        #b4c5ff;
-  --m3-primary-container:        #00174b;
-  --m3-surface-tint:             #0053db;
-  --m3-inverse-primary:          #b4c5ff;
-  --m3-secondary-container:      #d0e1fb;
-  --m3-on-secondary-container:   #54647a;
-  --m3-secondary-fixed:          #b7c8e1;
-  --m3-error:                    #ba1a1a;
-  --m3-error-container:          #ffdad6;
-  --m3-on-error-container:       #93000a;
-
-  /* Status colors matching mockup badges */
-  --m3-up:        #166534;
-  --m3-up-bg:     rgba(34, 197, 94, 0.12);
-  --m3-up-bar:    #22c55e;
-  --m3-down:      #ba1a1a;
-  --m3-down-bg:   #ffdad6;
-  --m3-degraded:  #854d0e;
-  --m3-degraded-bg: rgba(234, 179, 8, 0.12);
-  --m3-degraded-bar: #eab308;
-  --m3-partial:   #9a3412;
-  --m3-partial-bg: rgba(249, 115, 22, 0.12);
-  --m3-partial-bar: #f97316;
-
-  /* Branding colours; an application may point them at its own tokens. */
-  --color-primary: var(--m3-primary);
-  --color-accent:  var(--m3-on-primary-container);
-
-  /* Semantic action colors stay neutral and consistent across admin pages. */
-  --admin-action-primary:       #dbe7ff;
-  --admin-action-primary-hover: #c9d9ff;
-  --admin-on-action-primary:    #172033;
-  --admin-action-focus:         rgba(73, 124, 255, 0.28);
-  --admin-selection:            var(--m3-primary-fixed);
-  --admin-selection-hover:      #c9d9ff;
-  --admin-on-selection:         var(--m3-primary);
-  --admin-selection-border:     #a9bfe6;
-  --admin-control-accent:       #4b5563;
-  --admin-control-on:           #ffffff;
-  --admin-icon-container:       #e4e7ec;
-  --admin-icon-color:           #4b5563;
-  --audit-create-bg:            #d1fae5;
-  --audit-create-text:          #065f46;
-  --audit-update-bg:            #e0e7ff;
-  --audit-update-text:          #3730a3;
-  --audit-delete-bg:            #fee2e2;
-  --audit-delete-text:          #991b1b;
-}
-
-/* ── M3 Color Tokens — Dark ───────────────────────────────────────── */
-html.dark {
-  --m3-surface:                  #20232a;
-  --m3-surface-dim:              #1a1c22;
-  --m3-surface-bright:           #383c46;
-  --m3-surface-container-lowest: #252830;
-  --m3-surface-container-low:    #1a1c22;
-  --m3-surface-container:        #282b33;
-  --m3-surface-container-high:   #30343d;
-  --m3-surface-container-highest:#383c46;
-  --m3-on-surface:               #e3e5ea;
-  --m3-on-surface-variant:       #c5cad3;
-  --m3-secondary:                #aab0bb;
-  --m3-outline:                  #80868f;
-  --m3-outline-variant:          #3a3e48;
-  --m3-primary:                  #b4c5ff;
-  --m3-on-primary:               #111318;
-  --m3-on-primary-container:     #aac7ff;
-  --m3-primary-container:        #30333b;
-  --m3-secondary-container:      #2a3a4d;
-  --m3-on-secondary-container:   #c0cedd;
-  --m3-secondary-fixed:          #3a4d62;
-  --m3-error:                    #ffb4ab;
-  --m3-error-container:          #93000a;
-  --m3-on-error-container:       #ffdad6;
-  --m3-primary-fixed:            #3a3d46;
-  --m3-primary-fixed-dim:        #30333b;
-  --m3-surface-tint:             #b4c5ff;
-  --m3-inverse-primary:          #0053db;
-
-  --admin-action-primary:       #e5e7eb;
-  --admin-action-primary-hover: #ffffff;
-  --admin-on-action-primary:    #111318;
-  --admin-action-focus:         rgba(229, 231, 235, 0.28);
-  --admin-selection:            #3a3d46;
-  --admin-selection-hover:      #454953;
-  --admin-on-selection:         #f0f1f3;
-  --admin-selection-border:     #777e8b;
-  --admin-control-accent:       #c3c8d1;
-  --admin-control-on:           #1a1c22;
-  --admin-icon-container:       #30343d;
-  --admin-icon-color:           #d6d9df;
-  --audit-create-bg:            #164e3b;
-  --audit-create-text:          #a7f3d0;
-  --audit-update-bg:            #37366d;
-  --audit-update-text:          #d8d7ff;
-  --audit-delete-bg:            #692d32;
-  --audit-delete-text:          #fecaca;
-
-  --m3-up:        #4ade80;
-  --m3-up-bg:     rgba(74, 222, 128, 0.12);
-  --m3-up-bar:    #4ade80;
-  --m3-down:      #ffb4ab;
-  --m3-down-bg:   rgba(147, 0, 10, 0.25);
-  --m3-degraded:  #ffb950;
-  --m3-degraded-bg: rgba(234, 179, 8, 0.15);
-  --m3-degraded-bar: #fbbf24;
-  --m3-partial:   #fb923c;
-  --m3-partial-bg: rgba(249, 115, 22, 0.15);
-  --m3-partial-bar: #f97316;
-}
-
-/* ── Base ─────────────────────────────────────────────────────────── */
-* { box-sizing: border-box; }
-
-body {
-  margin: 0;
-  font-family: 'Inter', system-ui, sans-serif;
-  background: var(--m3-surface);
-  color: var(--m3-on-surface);
-}
-
-input[type='checkbox'],
-input[type='radio'] {
-  accent-color: var(--admin-control-accent);
-}
-
-/*
- * Button system. Compose a shape with a variant: `btn btn-primary`, `btn btn-secondary`,
- * `btn btn-ghost`, `btn btn-outline`, `btn btn-danger` (filled, for confirmations) or
- * `btn btn-danger-outline`; add `btn-sm` for compact rows.
- * `btn-icon` is a standalone square icon button. These live in the components layer so page-level
- * utilities (e.g. `px-5`, `rounded-full`, `w-full`) still win.
- */
-@layer components {
-  .btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    border: 1px solid transparent;
-    border-radius: 0.75rem;
-    padding: 0.625rem 1rem;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    font-weight: 600;
-    white-space: nowrap;
-    cursor: pointer;
-    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease,
-      box-shadow 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
-  }
-  .btn:active:not(:disabled) { transform: scale(0.98); }
-  .btn:disabled { opacity: 0.5; cursor: not-allowed; }
-  .btn .material-symbols-outlined { font-size: 18px; }
-
-  .btn-sm {
-    gap: 0.375rem;
-    border-radius: 0.5rem;
-    padding: 0.375rem 0.75rem;
-    font-size: 0.75rem;
-    line-height: 1rem;
-  }
-  .btn-sm .material-symbols-outlined { font-size: 16px; }
-
-  /* Outlined in light mode so the filled primary button is the only filled action. */
-  .btn-secondary {
-    background: transparent;
-    border-color: var(--m3-outline-variant);
-    color: var(--m3-on-surface);
-  }
-  .btn-secondary:hover:not(:disabled) { background: var(--m3-surface-container); }
-  html.dark .btn-secondary {
-    background: var(--m3-surface-container-high);
-    border-color: transparent;
-  }
-  html.dark .btn-secondary:hover:not(:disabled) { background: var(--m3-surface-container-highest); }
-
-  .btn-ghost {
-    background: transparent;
-    color: var(--m3-secondary);
-  }
-  .btn-ghost:hover:not(:disabled) {
-    background: var(--m3-surface-container);
-    color: var(--m3-on-surface);
-  }
-
-  .btn-outline {
-    background: transparent;
-    color: var(--m3-secondary);
-    border-color: var(--m3-outline-variant);
-  }
-  .btn-outline:hover:not(:disabled) {
-    background: var(--m3-surface-container);
-    color: var(--m3-on-surface);
-  }
-
-  .btn-danger {
-    background: var(--m3-error-container);
-    color: var(--m3-on-error-container);
-    border-color: color-mix(in srgb, var(--m3-error) 45%, transparent);
-  }
-  .btn-danger:hover:not(:disabled) {
-    border-color: var(--m3-error);
-  }
-  .btn-danger:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--m3-down) 25%, transparent);
-  }
-
-  .btn-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    width: 2rem;
-    height: 2rem;
-    border-radius: 0.5rem;
-    color: var(--m3-secondary);
-    background: transparent;
-    cursor: pointer;
-    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
-  }
-  .btn-icon:hover:not(:disabled) {
-    background: var(--m3-surface-container);
-    color: var(--m3-on-surface);
-  }
-  .btn-icon:disabled { opacity: 0.5; cursor: not-allowed; }
-  .btn-icon .material-symbols-outlined { font-size: 20px; }
-
-  .focus-ring:focus-visible,
-  .btn-secondary:focus-visible,
-  .btn-ghost:focus-visible,
-  .btn-outline:focus-visible,
-  .btn-icon:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px var(--admin-action-focus);
-  }
-}
-
-/* Primary admin action: one contrast-safe appearance in every feature. */
-.btn-primary {
-  background: var(--admin-action-primary) !important;
-  color: var(--admin-on-action-primary) !important;
-  border-color: transparent !important;
-  transition: background-color 0.18s ease, box-shadow 0.18s ease,
-    opacity 0.18s ease, transform 0.18s ease;
-}
-.btn-primary:hover:not(:disabled) {
-  background: var(--admin-action-primary-hover) !important;
-}
-.btn-primary:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 3px var(--admin-action-focus);
-}
-.btn-primary:disabled {
-  opacity: 0.5 !important;
-  cursor: not-allowed !important;
-}
-
-.btn-danger-outline {
-  color: var(--m3-down);
-  border: 1px solid var(--m3-outline-variant);
-  transition: background-color 0.18s ease, border-color 0.18s ease,
-    box-shadow 0.18s ease, transform 0.18s ease;
-}
-.btn-danger-outline:hover:not(:disabled) {
-  background: var(--m3-down-bg);
-  border-color: color-mix(in srgb, var(--m3-down) 45%, var(--m3-outline-variant));
-}
-.btn-danger-outline:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--m3-down) 25%, transparent);
-}
-.btn-danger-outline:active:not(:disabled) {
-  transform: scale(0.98);
-}
-.btn-danger-outline:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.copy-feedback-button {
-  background: var(--m3-surface-container-high);
-  color: var(--m3-on-surface);
-  border: 1px solid var(--m3-outline-variant);
-  transition: background-color 0.18s ease, border-color 0.18s ease,
-    color 0.18s ease, transform 0.18s ease;
-}
-.copy-feedback-button:hover {
-  background: var(--m3-surface-container-highest);
-}
-.copy-feedback-button[data-copied] {
-  background: var(--m3-up-bg);
-  border-color: color-mix(in srgb, var(--m3-up) 35%, var(--m3-outline-variant));
-  color: var(--m3-up);
-}
-.copy-feedback-button[data-failed] {
-  background: var(--m3-down-bg);
-  border-color: color-mix(in srgb, var(--m3-down) 35%, var(--m3-outline-variant));
-  color: var(--m3-down);
-}
-.copy-feedback-button:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 3px var(--admin-action-focus);
-}
-.copy-feedback-button:active {
-  transform: scale(0.98);
-}
-
-.selection-active {
-  background: var(--admin-selection) !important;
-  color: var(--admin-on-selection) !important;
-  border-color: var(--admin-selection-border) !important;
-}
-.selection-active:hover {
-  background: var(--admin-selection-hover) !important;
-}
-
-html.dark .side-tab-active {
-  background: var(--admin-selection) !important;
-  color: var(--admin-on-selection) !important;
-}
-
-html.dark .side-tab-badge-active {
-  background: var(--admin-on-selection) !important;
-  color: var(--admin-selection) !important;
-}
-
-/* ── Navigation (sidebar + mobile drawer) ─────────────────────────── */
-.admin-nav-item {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.625rem 1rem;
-  border-radius: 0.75rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  color: var(--m3-secondary);
-  text-align: left;
-  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
-}
-.admin-nav-item:hover { transform: translateX(0.25rem); }
-.admin-nav-item:not([aria-current='page']):hover {
-  background: rgba(0, 0, 0, 0.04);
-  color: var(--m3-on-surface);
-}
-html.dark .admin-nav-item:not([aria-current='page']):hover { background: rgba(255, 255, 255, 0.08); }
-.admin-nav-item[aria-current='page'] {
-  background: var(--m3-surface-container-lowest);
-  color: var(--m3-on-surface);
-  font-weight: 600;
-  box-shadow: 0 1px 4px rgba(19, 27, 46, 0.08);
-}
-.admin-nav-item.admin-nav-danger:hover,
-html.dark .admin-nav-item.admin-nav-danger:hover {
-  background: var(--m3-error-container);
-  color: var(--m3-on-error-container);
-}
-.admin-nav-item:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 3px var(--admin-action-focus);
-}
-
-@keyframes drawer-in {
-  from { transform: translateX(-100%); }
-  to   { transform: translateX(0); }
-}
-@keyframes overlay-in {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-.admin-drawer-panel { animation: drawer-in 0.22s ease-out; }
-.admin-drawer-overlay { animation: overlay-in 0.22s ease-out; }
-
-@keyframes toast-in {
-  from { opacity: 0; transform: translateY(8px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-.admin-toast { animation: toast-in 0.2s ease-out; }
-
-@media (prefers-reduced-motion: reduce) {
-  .admin-drawer-panel, .admin-drawer-overlay, .admin-toast { animation: none; }
-  .admin-nav-item:hover { transform: none; }
-}
-
-/* ── Input style ──────────────────────────────────────────────────── */
-.input-m3 {
-  width: 100%;
-  background: var(--m3-surface-container-lowest);
-  border: 1.5px solid var(--m3-outline-variant);
-  border-radius: 10px;
-  padding: 9px 13px;
-  color: var(--m3-on-surface);
-  font-family: 'Inter', system-ui, sans-serif;
-  font-size: 14px;
-  outline: none;
-  transition: border-color 0.18s ease, box-shadow 0.18s ease;
-}
-.input-m3::placeholder { color: var(--m3-secondary); }
-.input-m3:focus {
-  border-color: var(--m3-primary);
-  box-shadow: 0 0 0 3px rgba(0, 83, 219, 0.12);
-}
-html.dark .input-m3:focus {
-  box-shadow: 0 0 0 3px rgba(180, 197, 255, 0.15);
-}
-.input-m3:disabled { opacity: 0.45; cursor: not-allowed; }
-select.input-m3 {
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2376777d' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 12px center;
-  padding-right: 32px;
-}
-
-input.input-m3:is([type='date'], [type='time'], [type='datetime-local']),
-input.input-sig:is([type='date'], [type='time'], [type='datetime-local']) {
-  color-scheme: light;
-}
-
-html.dark input.input-m3:is([type='date'], [type='time'], [type='datetime-local']),
-html.dark input.input-sig:is([type='date'], [type='time'], [type='datetime-local']) {
-  color-scheme: dark;
-}
-
-input.input-m3:is([type='date'], [type='time'], [type='datetime-local'])::-webkit-calendar-picker-indicator,
-input.input-sig:is([type='date'], [type='time'], [type='datetime-local'])::-webkit-calendar-picker-indicator {
-  cursor: pointer;
-  opacity: 1;
-}
-
-/* Legacy alias */
-.input-sig { @apply input-m3; }
-
-/* ── Entrance animation ───────────────────────────────────────────── */
-@keyframes fadeUp {
-  from { opacity: 0; transform: translateY(10px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-.fade-up { opacity: 0; animation: fadeUp 0.4s ease forwards; }
-
-/* ── Card hover ───────────────────────────────────────────────────── */
-.card-hover {
-  transition: box-shadow 0.2s ease, border-color 0.2s ease;
-}
-.card-hover:hover {
-  box-shadow: 0 2px 12px rgba(0, 83, 219, 0.08);
-  border-color: var(--m3-outline);
-}
-html.dark .card-hover:hover {
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
-}
-
-/* ── Material Symbols ─────────────────────────────────────────────── */
-.material-symbols-outlined {
-  font-family: 'Material Symbols Outlined';
-  font-weight: normal;
-  font-style: normal;
-  display: inline-block;
-  letter-spacing: normal;
-  text-transform: none;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
-  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
-  font-size: inherit;
-  line-height: 1;
-  vertical-align: middle;
-}
-
-/* ── Scrollbar ────────────────────────────────────────────────────── */
-::-webkit-scrollbar { width: 6px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--m3-outline-variant); border-radius: 3px; }
-
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Fonts are bundled with the app (Manrope, Inter, JetBrains Mono: SIL OFL; Material Symbols: Apache 2.0),
+   so opening the interface makes no request to Google. */
+@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/manrope-latin-ext-4.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/manrope-latin-ext-4.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/manrope-latin-ext-4.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('./fonts/manrope-latin-ext-4.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/manrope-latin-5.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/manrope-latin-5.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/manrope-latin-5.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('./fonts/manrope-latin-5.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/inter-latin-1.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/inter-latin-1.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/inter-latin-1.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/jetbrains-mono-latin-ext-2.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/jetbrains-mono-latin-ext-2.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/jetbrains-mono-latin-3.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/jetbrains-mono-latin-3.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+
+/* ── M3 Color Tokens — Light (exact from mockup) ─────────────────── */
+:root {
+  --m3-surface:                  #f5f6f9;
+  --m3-surface-dim:              #d7dce5;
+  --m3-surface-bright:           #f5f6f9;
+  --m3-surface-container-lowest: #fafbfc;
+  --m3-surface-container-low:    #eef0f5;
+  --m3-surface-container:        #e7eaf0;
+  --m3-surface-container-high:   #dfe3ea;
+  --m3-surface-container-highest:#d7dce5;
+  --m3-on-surface:               #1c2333;
+  --m3-on-surface-variant:       #45464d;
+  --m3-secondary:                #566174;
+  --m3-outline:                  #7c828e;
+  --m3-outline-variant:          #d3d7df;
+  --m3-primary:                  #000000;
+  --m3-on-primary:               #ffffff;
+  --m3-on-primary-container:     #497cff;
+  --m3-primary-fixed:            #dbe7ff;
+  --m3-primary-fixed-dim:        #b4c5ff;
+  --m3-primary-container:        #00174b;
+  --m3-surface-tint:             #0053db;
+  --m3-inverse-primary:          #b4c5ff;
+  --m3-secondary-container:      #d0e1fb;
+  --m3-on-secondary-container:   #54647a;
+  --m3-secondary-fixed:          #b7c8e1;
+  --m3-error:                    #ba1a1a;
+  --m3-error-container:          #ffdad6;
+  --m3-on-error-container:       #93000a;
+
+  /* Status colors matching mockup badges */
+  --m3-up:        #166534;
+  --m3-up-bg:     rgba(34, 197, 94, 0.12);
+  --m3-up-bar:    #22c55e;
+  --m3-down:      #ba1a1a;
+  --m3-down-bg:   #ffdad6;
+  --m3-degraded:  #854d0e;
+  --m3-degraded-bg: rgba(234, 179, 8, 0.12);
+  --m3-degraded-bar: #eab308;
+  --m3-partial:   #9a3412;
+  --m3-partial-bg: rgba(249, 115, 22, 0.12);
+  --m3-partial-bar: #f97316;
+
+  /* Branding colours; an application may point them at its own tokens. */
+  --color-primary: var(--m3-primary);
+  --color-accent:  var(--m3-on-primary-container);
+
+  /* Semantic action colors stay neutral and consistent across admin pages. */
+  --admin-action-primary:       #dbe7ff;
+  --admin-action-primary-hover: #c9d9ff;
+  --admin-on-action-primary:    #172033;
+  --admin-action-focus:         rgba(73, 124, 255, 0.28);
+  --admin-selection:            var(--m3-primary-fixed);
+  --admin-selection-hover:      #c9d9ff;
+  --admin-on-selection:         var(--m3-primary);
+  --admin-selection-border:     #a9bfe6;
+  --admin-control-accent:       #4b5563;
+  --admin-control-on:           #ffffff;
+  --admin-icon-container:       #e4e7ec;
+  --admin-icon-color:           #4b5563;
+  --audit-create-bg:            #d1fae5;
+  --audit-create-text:          #065f46;
+  --audit-update-bg:            #e0e7ff;
+  --audit-update-text:          #3730a3;
+  --audit-delete-bg:            #fee2e2;
+  --audit-delete-text:          #991b1b;
+}
+
+/* ── M3 Color Tokens — Dark ───────────────────────────────────────── */
+html.dark {
+  --m3-surface:                  #20232a;
+  --m3-surface-dim:              #1a1c22;
+  --m3-surface-bright:           #383c46;
+  --m3-surface-container-lowest: #252830;
+  --m3-surface-container-low:    #1a1c22;
+  --m3-surface-container:        #282b33;
+  --m3-surface-container-high:   #30343d;
+  --m3-surface-container-highest:#383c46;
+  --m3-on-surface:               #e3e5ea;
+  --m3-on-surface-variant:       #c5cad3;
+  --m3-secondary:                #aab0bb;
+  --m3-outline:                  #80868f;
+  --m3-outline-variant:          #3a3e48;
+  --m3-primary:                  #b4c5ff;
+  --m3-on-primary:               #111318;
+  --m3-on-primary-container:     #aac7ff;
+  --m3-primary-container:        #30333b;
+  --m3-secondary-container:      #2a3a4d;
+  --m3-on-secondary-container:   #c0cedd;
+  --m3-secondary-fixed:          #3a4d62;
+  --m3-error:                    #ffb4ab;
+  --m3-error-container:          #93000a;
+  --m3-on-error-container:       #ffdad6;
+  --m3-primary-fixed:            #3a3d46;
+  --m3-primary-fixed-dim:        #30333b;
+  --m3-surface-tint:             #b4c5ff;
+  --m3-inverse-primary:          #0053db;
+
+  --admin-action-primary:       #e5e7eb;
+  --admin-action-primary-hover: #ffffff;
+  --admin-on-action-primary:    #111318;
+  --admin-action-focus:         rgba(229, 231, 235, 0.28);
+  --admin-selection:            #3a3d46;
+  --admin-selection-hover:      #454953;
+  --admin-on-selection:         #f0f1f3;
+  --admin-selection-border:     #777e8b;
+  --admin-control-accent:       #c3c8d1;
+  --admin-control-on:           #1a1c22;
+  --admin-icon-container:       #30343d;
+  --admin-icon-color:           #d6d9df;
+  --audit-create-bg:            #164e3b;
+  --audit-create-text:          #a7f3d0;
+  --audit-update-bg:            #37366d;
+  --audit-update-text:          #d8d7ff;
+  --audit-delete-bg:            #692d32;
+  --audit-delete-text:          #fecaca;
+
+  --m3-up:        #4ade80;
+  --m3-up-bg:     rgba(74, 222, 128, 0.12);
+  --m3-up-bar:    #4ade80;
+  --m3-down:      #ffb4ab;
+  --m3-down-bg:   rgba(147, 0, 10, 0.25);
+  --m3-degraded:  #ffb950;
+  --m3-degraded-bg: rgba(234, 179, 8, 0.15);
+  --m3-degraded-bar: #fbbf24;
+  --m3-partial:   #fb923c;
+  --m3-partial-bg: rgba(249, 115, 22, 0.15);
+  --m3-partial-bar: #f97316;
+}
+
+/* ── Base ─────────────────────────────────────────────────────────── */
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  font-family: 'Inter', system-ui, sans-serif;
+  background: var(--m3-surface);
+  color: var(--m3-on-surface);
+}
+
+input[type='checkbox'],
+input[type='radio'] {
+  accent-color: var(--admin-control-accent);
+}
+
+/*
+ * Button system. Compose a shape with a variant: `btn btn-primary`, `btn btn-secondary`,
+ * `btn btn-ghost`, `btn btn-outline`, `btn btn-danger` (filled, for confirmations) or
+ * `btn btn-danger-outline`; add `btn-sm` for compact rows.
+ * `btn-icon` is a standalone square icon button. These live in the components layer so page-level
+ * utilities (e.g. `px-5`, `rounded-full`, `w-full`) still win.
+ */
+@layer components {
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    border: 1px solid transparent;
+    border-radius: 0.75rem;
+    padding: 0.625rem 1rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 600;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease,
+      box-shadow 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
+  }
+  .btn:active:not(:disabled) { transform: scale(0.98); }
+  .btn:disabled { opacity: 0.5; cursor: not-allowed; }
+  .btn .material-symbols-outlined { font-size: 18px; }
+
+  .btn-sm {
+    gap: 0.375rem;
+    border-radius: 0.5rem;
+    padding: 0.375rem 0.75rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+  .btn-sm .material-symbols-outlined { font-size: 16px; }
+
+  /* Outlined in light mode so the filled primary button is the only filled action. */
+  .btn-secondary {
+    background: transparent;
+    border-color: var(--m3-outline-variant);
+    color: var(--m3-on-surface);
+  }
+  .btn-secondary:hover:not(:disabled) { background: var(--m3-surface-container); }
+  html.dark .btn-secondary {
+    background: var(--m3-surface-container-high);
+    border-color: transparent;
+  }
+  html.dark .btn-secondary:hover:not(:disabled) { background: var(--m3-surface-container-highest); }
+
+  .btn-ghost {
+    background: transparent;
+    color: var(--m3-secondary);
+  }
+  .btn-ghost:hover:not(:disabled) {
+    background: var(--m3-surface-container);
+    color: var(--m3-on-surface);
+  }
+
+  .btn-outline {
+    background: transparent;
+    color: var(--m3-secondary);
+    border-color: var(--m3-outline-variant);
+  }
+  .btn-outline:hover:not(:disabled) {
+    background: var(--m3-surface-container);
+    color: var(--m3-on-surface);
+  }
+
+  .btn-danger {
+    background: var(--m3-error-container);
+    color: var(--m3-on-error-container);
+    border-color: color-mix(in srgb, var(--m3-error) 45%, transparent);
+  }
+  .btn-danger:hover:not(:disabled) {
+    border-color: var(--m3-error);
+  }
+  .btn-danger:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--m3-down) 25%, transparent);
+  }
+
+  .btn-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 0.5rem;
+    color: var(--m3-secondary);
+    background: transparent;
+    cursor: pointer;
+    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
+  }
+  .btn-icon:hover:not(:disabled) {
+    background: var(--m3-surface-container);
+    color: var(--m3-on-surface);
+  }
+  .btn-icon:disabled { opacity: 0.5; cursor: not-allowed; }
+  .btn-icon .material-symbols-outlined { font-size: 20px; }
+
+  .focus-ring:focus-visible,
+  .btn-secondary:focus-visible,
+  .btn-ghost:focus-visible,
+  .btn-outline:focus-visible,
+  .btn-icon:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px var(--admin-action-focus);
+  }
+}
+
+/* Primary admin action: one contrast-safe appearance in every feature. */
+.btn-primary {
+  background: var(--admin-action-primary) !important;
+  color: var(--admin-on-action-primary) !important;
+  border-color: transparent !important;
+  transition: background-color 0.18s ease, box-shadow 0.18s ease,
+    opacity 0.18s ease, transform 0.18s ease;
+}
+.btn-primary:hover:not(:disabled) {
+  background: var(--admin-action-primary-hover) !important;
+}
+.btn-primary:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--admin-action-focus);
+}
+.btn-primary:disabled {
+  opacity: 0.5 !important;
+  cursor: not-allowed !important;
+}
+
+.btn-danger-outline {
+  color: var(--m3-down);
+  border: 1px solid var(--m3-outline-variant);
+  transition: background-color 0.18s ease, border-color 0.18s ease,
+    box-shadow 0.18s ease, transform 0.18s ease;
+}
+.btn-danger-outline:hover:not(:disabled) {
+  background: var(--m3-down-bg);
+  border-color: color-mix(in srgb, var(--m3-down) 45%, var(--m3-outline-variant));
+}
+.btn-danger-outline:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--m3-down) 25%, transparent);
+}
+.btn-danger-outline:active:not(:disabled) {
+  transform: scale(0.98);
+}
+.btn-danger-outline:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.copy-feedback-button {
+  background: var(--m3-surface-container-high);
+  color: var(--m3-on-surface);
+  border: 1px solid var(--m3-outline-variant);
+  transition: background-color 0.18s ease, border-color 0.18s ease,
+    color 0.18s ease, transform 0.18s ease;
+}
+.copy-feedback-button:hover {
+  background: var(--m3-surface-container-highest);
+}
+.copy-feedback-button[data-copied] {
+  background: var(--m3-up-bg);
+  border-color: color-mix(in srgb, var(--m3-up) 35%, var(--m3-outline-variant));
+  color: var(--m3-up);
+}
+.copy-feedback-button[data-failed] {
+  background: var(--m3-down-bg);
+  border-color: color-mix(in srgb, var(--m3-down) 35%, var(--m3-outline-variant));
+  color: var(--m3-down);
+}
+.copy-feedback-button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--admin-action-focus);
+}
+.copy-feedback-button:active {
+  transform: scale(0.98);
+}
+
+.selection-active {
+  background: var(--admin-selection) !important;
+  color: var(--admin-on-selection) !important;
+  border-color: var(--admin-selection-border) !important;
+}
+.selection-active:hover {
+  background: var(--admin-selection-hover) !important;
+}
+
+html.dark .side-tab-active {
+  background: var(--admin-selection) !important;
+  color: var(--admin-on-selection) !important;
+}
+
+html.dark .side-tab-badge-active {
+  background: var(--admin-on-selection) !important;
+  color: var(--admin-selection) !important;
+}
+
+/* ── Navigation (sidebar + mobile drawer) ─────────────────────────── */
+.admin-nav-item {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.625rem 1rem;
+  border-radius: 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--m3-secondary);
+  text-align: left;
+  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+}
+.admin-nav-item:hover { transform: translateX(0.25rem); }
+.admin-nav-item:not([aria-current='page']):hover {
+  background: rgba(0, 0, 0, 0.04);
+  color: var(--m3-on-surface);
+}
+html.dark .admin-nav-item:not([aria-current='page']):hover { background: rgba(255, 255, 255, 0.08); }
+.admin-nav-item[aria-current='page'] {
+  background: var(--m3-surface-container-lowest);
+  color: var(--m3-on-surface);
+  font-weight: 600;
+  box-shadow: 0 1px 4px rgba(19, 27, 46, 0.08);
+}
+.admin-nav-item.admin-nav-danger:hover,
+html.dark .admin-nav-item.admin-nav-danger:hover {
+  background: var(--m3-error-container);
+  color: var(--m3-on-error-container);
+}
+.admin-nav-item:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--admin-action-focus);
+}
+
+@keyframes drawer-in {
+  from { transform: translateX(-100%); }
+  to   { transform: translateX(0); }
+}
+@keyframes overlay-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+.admin-drawer-panel { animation: drawer-in 0.22s ease-out; }
+.admin-drawer-overlay { animation: overlay-in 0.22s ease-out; }
+
+@keyframes toast-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.admin-toast { animation: toast-in 0.2s ease-out; }
+
+@media (prefers-reduced-motion: reduce) {
+  .admin-drawer-panel, .admin-drawer-overlay, .admin-toast { animation: none; }
+  .admin-nav-item:hover { transform: none; }
+}
+
+/* ── Input style ──────────────────────────────────────────────────── */
+.input-m3 {
+  width: 100%;
+  background: var(--m3-surface-container-lowest);
+  border: 1.5px solid var(--m3-outline-variant);
+  border-radius: 10px;
+  padding: 9px 13px;
+  color: var(--m3-on-surface);
+  font-family: 'Inter', system-ui, sans-serif;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.18s ease, box-shadow 0.18s ease;
+}
+.input-m3::placeholder { color: var(--m3-secondary); }
+.input-m3:focus {
+  border-color: var(--m3-primary);
+  box-shadow: 0 0 0 3px rgba(0, 83, 219, 0.12);
+}
+html.dark .input-m3:focus {
+  box-shadow: 0 0 0 3px rgba(180, 197, 255, 0.15);
+}
+.input-m3:disabled { opacity: 0.45; cursor: not-allowed; }
+select.input-m3 {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2376777d' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  padding-right: 32px;
+}
+
+input.input-m3:is([type='date'], [type='time'], [type='datetime-local']),
+input.input-sig:is([type='date'], [type='time'], [type='datetime-local']) {
+  color-scheme: light;
+}
+
+html.dark input.input-m3:is([type='date'], [type='time'], [type='datetime-local']),
+html.dark input.input-sig:is([type='date'], [type='time'], [type='datetime-local']) {
+  color-scheme: dark;
+}
+
+input.input-m3:is([type='date'], [type='time'], [type='datetime-local'])::-webkit-calendar-picker-indicator,
+input.input-sig:is([type='date'], [type='time'], [type='datetime-local'])::-webkit-calendar-picker-indicator {
+  cursor: pointer;
+  opacity: 1;
+}
+
+/* Legacy alias */
+.input-sig { @apply input-m3; }
+
+/* ── Entrance animation ───────────────────────────────────────────── */
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(10px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.fade-up { opacity: 0; animation: fadeUp 0.4s ease forwards; }
+
+/* ── Card hover ───────────────────────────────────────────────────── */
+.card-hover {
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
+}
+.card-hover:hover {
+  box-shadow: 0 2px 12px rgba(0, 83, 219, 0.08);
+  border-color: var(--m3-outline);
+}
+html.dark .card-hover:hover {
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
+}
+
+/* ── Material Symbols ─────────────────────────────────────────────── */
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  display: inline-block;
+  letter-spacing: normal;
+  text-transform: none;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+  font-size: inherit;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+/* ── Scrollbar ────────────────────────────────────────────────────── */
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--m3-outline-variant); border-radius: 3px; }
+