/**
 * Così Design System - Tokens Unifiés
 * =======================================
 * 
 * Architecture selon cahier des charges :
 * 1. TOKENS INVARIANTS - Ne changent JAMAIS selon le thème
 *    - Tailles des composants
 *    - Espacements structurels
 *    - Typographie scale
 *    - Radius
 * 
 * 2. TOKENS DE THÈME - Changent selon le thème sélectionné
 *    - Couleurs
 *    - Ombres
 *    - Contrastes
 * 
 * RÈGLE ABSOLUE : Aucune couleur hardcodée dans les composants
 */

/* ===========================================
   1. TOKENS INVARIANTS - TAILLES STRUCTURELLES
   Ces valeurs sont FIGÉES et ne changent JAMAIS
   =========================================== */
:root {

  /* Premium colors */
  --color-premium-gold: #D4AF37;
  --color-premium-blue: #0C8298;
  --color-premium-indigo: #0C8298;
  --color-swiss-red: #C1272D;

  /* BRANDAI brand colors */
  --color-chrome: #C0C0C0;
  --color-carbon-dark: #1a1a2e;
  --color-electric-blue: #0C8298;
  --color-bright-blue: #1A9FB5;
  --color-dark-texture: #0d0d1a;

  /* Premium gradients (upgrade #1) */
  --gradient-primary: linear-gradient(135deg, #0C8298 0%, #1A9FB5 100%);
  --gradient-primary-hover: linear-gradient(135deg, #005EA6 0%, #0C8298 100%);

  /* Subtle background texture (upgrade #2) */
  --bg-pattern: radial-gradient(circle, rgba(12, 130, 152,0.03) 1px, transparent 1px);
  --bg-pattern-size: 24px 24px;
  --color-feedback-success-light: #86EFAC;
  --color-feedback-danger-light: #FCA5A5;
  --color-feedback-warning-light: #FCD34D;

  /* ----- BOUTONS ----- */
  --size-button-sm: 36px;
  --size-button-md: 40px;
  --size-button-lg: 48px;
  --size-button-xl: 56px;

  /* ----- INPUTS ----- */
  --size-input-sm: 36px;
  --size-input-md: 40px;
  --size-input-lg: 48px;

  /* ----- ICÔNES ----- */
  --size-icon-xs: 14px;
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 24px;
  --size-icon-xl: 32px;

  /* ----- SÉLECTEURS ----- */
  --size-checkbox: 16px;
  --size-radio: 16px;
  --size-switch-width: 40px;
  --size-switch-height: 22px;
  --size-switch-thumb: 18px;

  /* ----- TABLES ----- */
  --size-table-header: 44px;
  --size-table-row: 44px;
  --size-table-row-dense: 36px;

  /* ----- MODALS ----- */
  --size-modal-sm: 480px;
  --size-modal-md: 640px;
  --size-modal-lg: 800px;
  --size-modal-xl: 1040px;

  /* ----- TOUCH TARGETS (Accessibilité) ----- */
  --size-touch-min: 44px;
  --size-touch-recommended: 48px;
  --size-icon-button: 40px;
  --size-floating-button: 56px;

  /* ----- RADIUS (FIGÉS) ----- */
  --radius-control: 8px;
  --radius-card: 10px;
  --radius-modal: 12px;
  --radius-pill: 24px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;

  /* ----- ESPACEMENTS (FIGÉS) ----- */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;

  /* ----- TYPOGRAPHIE SCALE (FIGÉE) ----- */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;
  --font-size-5xl: 48px;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ----- POLICES ----- */
  --font-display: 'Inter', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* ----- TRANSITIONS ----- */
  --transition-fast: 100ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 350ms ease;

  /* ----- Z-INDEX SCALE ----- */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;

  /* ----- FONT SCALE MULTIPLIER ----- */
  --font-scale: 1;
}

/* ===========================================
   2. MODE DENSITÉ COMPACTE
   =========================================== */
[data-density="compact"] {
  --size-button-md: 36px;
  --size-input-md: 36px;
  --size-table-row: 36px;
  --spacing-4: 12px;
  --spacing-6: 16px;
}

/* ===========================================
   3. MODE TEXTE AGRANDI
   =========================================== */
[data-font-scale="large"] {
  --font-scale: 1.125;
  --font-size-xs: 14px;
  --font-size-sm: 16px;
  --font-size-base: 18px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 28px;
  --font-size-3xl: 34px;
}

/* ===========================================
   4. TOKENS DE THÈME - VALEURS PAR DÉFAUT (LIGHT)
   Ces valeurs sont écrasées par le thème actif
   =========================================== */
:root {

  /* ----- BACKGROUNDS ----- */
  --color-bg-canvas: #ffffff;
  --color-bg-surface: #ffffff;
  --color-bg-subtle: #f1f5f9;
  --color-bg-muted: #e2e8f0;
  --color-bg-inverse: #0f172a;
  --color-bg-overlay: rgba(15, 23, 42, 0.6);

  /* ----- TEXT ----- */
  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted: #94a3b8;
  --color-text-inverse: #ffffff;
  --color-text-success: #16a34a;
  --color-text-warning: #d97706;
  --color-text-danger: #dc2626;
  --color-text-info: #0C8298;

  /* ----- BORDERS ----- */
  --color-border-default: #e5e5e5;
  --color-border-strong: #cbd5e1;
  --color-border-subtle: #f1f5f9;
  --color-border-focus: #0C8298;
  --color-border-inverse: #334155;

  /* ----- ACTION (PRIMARY BUTTON, LINKS) ----- */
  --color-action-primary: #0C8298;
  --color-action-primary-hover: #005EA6;
  --color-action-primary-active: #004578;
  --color-copilot-gradient: linear-gradient(135deg, #0C8298, #1A9FB5);
  --color-action-secondary: #f1f5f9;
  --color-action-secondary-hover: #e2e8f0;
  --color-action-tertiary-hover: #f8fafc;

  /* ----- FEEDBACK ----- */
  --color-feedback-success: #16a34a;
  --color-feedback-success-soft: #dcfce7;
  --color-feedback-success-light: #dcfce7;
  --color-feedback-success-dark: #166534;
  --color-feedback-warning: #d97706;
  --color-feedback-warning-soft: #fef3c7;
  --color-feedback-warning-light: #fef3c7;
  --color-feedback-warning-dark: #92400e;
  --color-feedback-danger: #dc2626;
  --color-feedback-danger-soft: #fee2e2;
  --color-feedback-danger-light: #fee2e2;
  --color-feedback-danger-dark: #991b1b;
  --color-feedback-info: #0C8298;
  --color-feedback-info-soft: #E6F2FF;
  --color-feedback-info-light: #E6F2FF;
  --color-feedback-info-dark: #004578;

  /* ----- ACCENT ----- */
  --color-accent: #0C8298;
  --color-accent-light: #E6F2FF;
  --color-accent-dark: #005EA6;
  --color-accent-gold: #d4af37;

  /* ----- NAVIGATION ----- */
  --color-nav-bg: #1a1a2e;
  --color-nav-text: rgba(255, 255, 255, 0.8);
  --color-nav-text-active: #ffffff;
  --color-nav-item-hover: rgba(255, 255, 255, 0.1);
  --color-nav-item-active: rgba(12, 130, 152, 0.2);

  /* ----- TABLE ----- */
  --color-table-header-bg: #f8fafc;
  --color-table-row-hover: #f1f5f9;
  --color-table-row-selected: rgba(12, 130, 152, 0.1);

  /* ----- SHADOWS ----- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 8px 12px rgba(0, 0, 0, 0.06);

  /* ----- ACCENT SIGNATURE (Swiss Gold) ----- */
  --color-accent-gold: #D4AF37;
  --color-accent-gold-hover: #C9A227;
  --color-accent-gold-soft: rgba(212, 175, 55, 0.15);
}

/* ===========================================
   5. DARK MODE DEFAULTS
   =========================================== */
.dark,
[data-theme-mode="dark"] {
  --color-bg-canvas: #0d0d1a;
  --color-bg-surface: #1a1a2e;
  --color-bg-subtle: #252540;
  --color-bg-muted: #3a3a55;
  --color-bg-inverse: #fafafa;
  --color-bg-overlay: rgba(13, 13, 26, 0.7);

  --color-text-primary: #fafafa;
  --color-text-secondary: #a1a1aa;
  --color-text-muted: #71717a;
  --color-text-inverse: #0a0a0a;
  --color-text-success: #4ade80;
  --color-text-warning: #fbbf24;
  --color-text-danger: #f87171;
  --color-text-info: #60a5fa;

  --color-border-default: #252540;
  --color-border-strong: #3a3a55;
  --color-border-subtle: #1a1a2e;
  --color-border-focus: #1A9FB5;

  --color-action-primary: #0C8298;
  --color-action-primary-hover: #1A9FB5;
  --color-action-primary-active: #005EA6;
  --color-action-secondary: #252540;
  --color-action-secondary-hover: #3a3a55;
  --color-action-tertiary-hover: #1a1a2e;

  --color-feedback-success: #4ade80;
  --color-feedback-success-soft: rgba(74, 222, 128, 0.15);
  --color-feedback-warning: #fbbf24;
  --color-feedback-warning-soft: rgba(251, 191, 36, 0.15);
  --color-feedback-danger: #f87171;
  --color-feedback-danger-soft: rgba(248, 113, 113, 0.15);
  --color-feedback-info: #1A9FB5;
  --color-feedback-info-soft: rgba(0, 163, 255, 0.15);

  --color-nav-bg: #0d0d1a;
  --color-nav-text: rgba(255, 255, 255, 0.7);
  --color-nav-text-active: #ffffff;
  --color-nav-item-hover: rgba(255, 255, 255, 0.05);
  --color-nav-item-active: rgba(255, 255, 255, 0.1);

  --color-table-header-bg: #1a1a2e;
  --color-table-row-hover: #252540;
  --color-table-row-selected: rgba(12, 130, 152, 0.2);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* ===========================================
   6. HIGH CONTRAST MODE (Accessibilité)
   =========================================== */
[data-contrast="high"] {
  --color-text-primary: #000000;
  --color-text-secondary: #1a1a1a;
  --color-border-default: #000000;
  --color-border-strong: #000000;
  --color-border-focus: #0000ff;
}

[data-contrast="high"].dark,
[data-contrast="high"][data-theme-mode="dark"] {
  --color-text-primary: #ffffff;
  --color-text-secondary: #e5e5e5;
  --color-border-default: #ffffff;
  --color-border-strong: #ffffff;
  --color-border-focus: #ffff00;
}

/* ===========================================
   7. REDUCED MOTION (Accessibilité)
   =========================================== */
/* Audit B13: YES, the descendant wildcard `*` here is heavy. It is
 * deliberate — reducing motion is a global preference that MUST
 * apply to every component in the tree, including 3rd-party
 * libraries and pages that don't use the design-system primitives.
 * Scoping to `.tx-*` or a DS class list would let random components
 * keep animating despite the user's choice. The @media query just
 * below already covers the OS-level preference automatically; the
 * class/attribute form exists only for the in-app manual toggle. */
.reduce-motion,
.reduce-motion *,
[data-reduce-motion="true"],
[data-reduce-motion="true"] * {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

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

/* ===========================================
   8. FOCUS STYLES (Accessibilité WCAG 2.2)
   =========================================== */
*:focus-visible {
  outline: 2px solid #0C8298;
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* ===========================================
   9. SHADCN/UI BRIDGE VARIABLES
   Mapping des tokens vers les variables shadcn
   =========================================== */
:root {

  --background: var(--color-bg-canvas);
  --foreground: var(--color-text-primary);
  --card: var(--color-bg-surface);
  --card-foreground: var(--color-text-primary);
  --popover: var(--color-bg-surface);
  --popover-foreground: var(--color-text-primary);
  --primary: var(--color-action-primary);
  --primary-foreground: var(--color-text-inverse);
  --secondary: var(--color-action-secondary);
  --secondary-foreground: var(--color-text-primary);
  --muted: var(--color-bg-muted);
  --muted-foreground: var(--color-text-muted);
  --accent: var(--color-bg-subtle);
  --accent-foreground: var(--color-text-primary);
  --destructive: var(--color-feedback-danger);
  --destructive-foreground: var(--color-text-inverse);
  --border: var(--color-border-default);
  --input: var(--color-border-default);
  --ring: var(--color-border-focus);
  --radius: var(--radius-control);
  
  /* Legacy variable bridge - pour migration progressive */
  --bg-app: var(--color-bg-canvas);
  --bg-page: var(--color-bg-surface);
  --bg-surface: var(--color-bg-surface);
  --bg-elevated: var(--color-bg-subtle);
  --bg-sunken: var(--color-bg-muted);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --border-light: var(--color-border-subtle);
  --border-default: var(--color-border-default);
  --border-strong: var(--color-border-strong);
}

/* ===========================================
   10. BASE STYLES
   =========================================== */
html {
  font-size: calc(16px * 1);
  font-size: calc(16px * var(--font-scale, 1));
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-family: var(--font-body);
  font-size: 16px;
  font-size: var(--font-size-base);
  line-height: 1.5;
  line-height: var(--line-height-normal);
  color: #0f172a;
  color: var(--color-text-primary);
  background-color: #ffffff;
  background-color: var(--color-bg-canvas);
  background-image: radial-gradient(circle, rgba(12, 130, 152,0.03) 1px, transparent 1px);
  background-image: var(--bg-pattern);
  background-size: 24px 24px;
  background-size: var(--bg-pattern-size);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Premium scrollbar (upgrade #5) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }

.dark ::-webkit-scrollbar-thumb,
[data-theme-mode="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }
.dark ::-webkit-scrollbar-thumb:hover,
[data-theme-mode="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

/* Tabular nums pour les montants (payroll) */
.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Alignement montants dans tables */
.text-amount {
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  font-family: var(--font-mono);
}

/* ===========================================
   11. COMPONENT SIZE UTILITIES
   Utilisez ces classes pour garantir les tailles
   =========================================== */
.btn-sm { height: 36px; height: var(--size-button-sm); min-height: 36px; min-height: var(--size-button-sm); }
.btn-md { height: 40px; height: var(--size-button-md); min-height: 40px; min-height: var(--size-button-md); }
.btn-lg { height: 48px; height: var(--size-button-lg); min-height: 48px; min-height: var(--size-button-lg); }

.input-sm { height: 36px; height: var(--size-input-sm); min-height: 36px; min-height: var(--size-input-sm); }
.input-md { height: 40px; height: var(--size-input-md); min-height: 40px; min-height: var(--size-input-md); }
.input-lg { height: 48px; height: var(--size-input-lg); min-height: 48px; min-height: var(--size-input-lg); }

.icon-xs { width: 14px; width: var(--size-icon-xs); height: 14px; height: var(--size-icon-xs); }
.icon-sm { width: 16px; width: var(--size-icon-sm); height: 16px; height: var(--size-icon-sm); }
.icon-md { width: 20px; width: var(--size-icon-md); height: 20px; height: var(--size-icon-md); }
.icon-lg { width: 24px; width: var(--size-icon-lg); height: 24px; height: var(--size-icon-lg); }

.modal-sm { max-width: 480px; max-width: var(--size-modal-sm); }
.modal-md { max-width: 640px; max-width: var(--size-modal-md); }
.modal-lg { max-width: 800px; max-width: var(--size-modal-lg); }
.modal-xl { max-width: 1040px; max-width: var(--size-modal-xl); }

.table-row { height: 44px; height: var(--size-table-row); }
.table-row-dense { height: 36px; height: var(--size-table-row-dense); }
.table-header { height: 44px; height: var(--size-table-header); }

/* ===========================================
   ANIMATION STANDARDS
   3 durations × 3 easings = consistent motion
   =========================================== */
:root {
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --easing-spring: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===========================================
   ACCESSIBILITY: REDUCED MOTION
   =========================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================
   FOCUS RING UTILITY
   Apply: class="focus-ring" on any interactive element
   =========================================== */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0C8298;
  box-shadow: 0 0 0 2px var(--color-bg-app, #fff), 0 0 0 4px var(--color-action-primary, #0C8298);
}

.focus-ring:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ===========================================
   SKELETON LOADING COMPONENT
   Usage: <div class="skeleton skeleton-text" />
   =========================================== */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg,
    #e2e8f0 25%,
    #ffffff 50%,
    #e2e8f0 75%
  );
  background: linear-gradient(90deg,
    var(--color-bg-sunken, #e2e8f0) 25%,
    var(--color-bg-surface, #f1f5f9) 50%,
    var(--color-bg-sunken, #e2e8f0) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
  border-radius: var(--radius-control, 8px);
}

.skeleton-text { height: 14px; width: 80%; margin-bottom: 8px; }
.skeleton-title { height: 20px; width: 60%; margin-bottom: 12px; }
.skeleton-avatar { height: 40px; width: 40px; border-radius: 50%; }
.skeleton-card { height: 120px; width: 100%; }
.skeleton-button { height: 40px; width: 120px; }

/* ===========================================
   TOUCH TARGET MINIMUM (48px mobile)
   =========================================== */
@media (max-width: 768px) {
  .touch-target {
    min-width: 48px;
    min-height: 48px;
  }
}

/* ═══════════════════════════════════════════════════
   HEADING UTILITIES (consistent across all pages)
   ═══════════════════════════════════════════════════ */
.h1 { font-size: 2.25rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; color: #0f172a; color: var(--color-text-primary); }
.h2 { font-size: 1.5rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: #0f172a; color: var(--color-text-primary); }
.h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: #0f172a; color: var(--color-text-primary); }
.h4 { font-size: 1rem; font-weight: 600; line-height: 1.4; color: #0f172a; color: var(--color-text-primary); }
.subtitle { font-size: 0.875rem; font-weight: 400; line-height: 1.5; color: #475569; color: var(--color-text-secondary); }
.caption { font-size: 0.75rem; font-weight: 500; line-height: 1.4; color: #94a3b8; color: var(--color-text-muted); letter-spacing: 0.02em; }
.overline { font-size: 0.6875rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; color: var(--color-text-muted); }

/* ═══════════════════════════════════════════════════
   INPUT STANDARD (one style for all inputs)
   ═══════════════════════════════════════════════════ */
.input-standard {
  width: 100%;
  background: #ffffff;
  background: var(--color-bg-surface);
  border: 1px solid #e5e5e5;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  border-radius: var(--radius-control, 8px);
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #0f172a;
  color: var(--color-text-primary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input-standard::placeholder { color: #94a3b8; color: var(--color-text-muted); }
.input-standard:focus {
  outline: none;
  border-color: #0C8298;
  border-color: var(--color-action-primary);
  box-shadow: 0 0 0 3px rgba(12, 130, 152, 0.1);
}
.input-standard:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.input-standard.input-error {
  border-color: #dc2626;
  border-color: var(--color-feedback-danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
}

/* ═══════════════════════════════════════════════════
   FOCUS RING STANDARD (one pattern for ALL)
   ═══════════════════════════════════════════════════ */
.focus-ring-standard:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0C8298;
  box-shadow: 0 0 0 2px var(--color-bg-canvas, #fff), 0 0 0 4px var(--color-action-primary, #0C8298);
}
.focus-ring-standard:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/*
 * Così Design System — Unified Tokens
 * ========================================
 * Single source of truth for ALL visual properties.
 *
 * Architecture:
 *   Primitive tokens → Semantic tokens → Component tokens
 *
 * Breakpoints:
 *   --bp-mobile:  320px  (smartphones)
 *   --bp-tablet:  768px  (tablets, iPad)
 *   --bp-laptop:  1024px (laptops, small desktops)
 *   --bp-desktop: 1440px (large desktops, ultrawide)
 */

/* ═══════════════════════════════════════════
   PRIMITIVE TOKENS (never use directly in components)
   ═══════════════════════════════════════════ */

:root {
  /* ── Color Primitives ── */
  --p-white: #ffffff;
  --p-black: #09090b;

  --p-slate-50:  #f8fafc; --p-slate-100: #f1f5f9; --p-slate-200: #e2e8f0;
  --p-slate-300: #cbd5e1; --p-slate-400: #94a3b8; --p-slate-500: #64748b;
  --p-slate-600: #475569; --p-slate-700: #334155; --p-slate-800: #1e293b;
  --p-slate-900: #0f172a; --p-slate-950: #020617;

  /* Brand.ai "Alpine Teal" — custom palette (hue ~192°)
     Unique to Brand.ai. Not Tailwind, not Material, not any framework.
     Evokes Swiss alpine lakes, precision, trust. */
  --p-alpine-50:  #EEFBFC; --p-alpine-100: #D5F3F6; --p-alpine-200: #B0E7EE;
  --p-alpine-300: #79D5E2; --p-alpine-400: #3BBDCF; --p-alpine-500: #1A9FB5;
  --p-alpine-600: #0C8298; --p-alpine-700: #0F697D; --p-alpine-800: #125466;
  --p-alpine-900: #134554;

  --p-emerald-50:  #ecfdf5; --p-emerald-100: #d1fae5; --p-emerald-200: #a7f3d0;
  --p-emerald-400: #34d399; --p-emerald-500: #10b981; --p-emerald-600: #059669;

  --p-amber-50:  #fffbeb; --p-amber-100: #fef3c7; --p-amber-200: #fde68a;
  --p-amber-400: #fbbf24; --p-amber-500: #f59e0b; --p-amber-600: #d97706;

  --p-rose-50:  #fff1f2; --p-rose-100: #ffe4e6; --p-rose-200: #fecdd3;
  --p-rose-400: #fb7185; --p-rose-500: #f43e5c; --p-rose-600: #e11d48;

  --p-sky-50:  #f0f9ff; --p-sky-400: #38bdf8; --p-sky-500: #0ea5e9;

  /* ── Spacing Scale (4px base) ── */
  --sp-0: 0; --sp-0.5: 2px; --sp-1: 4px; --sp-1.5: 6px; --sp-2: 8px;
  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ── Typography ── */
  --font-sans: 'Inter', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;

  --text-2xs: 0.625rem;  /* 10px */
  --text-xs:  0.75rem;   /* 12px */
  --text-sm:  0.8125rem; /* 13px */
  --text-base: 0.9375rem; /* 15px — audit: 14px too small for payroll data density */
  --text-md:  1rem;      /* 16px */
  --text-lg:  1.125rem;  /* 18px */
  --text-xl:  1.25rem;   /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  --text-5xl: 3rem;      /* 48px */

  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.025em;
  --tracking-wider:  0.05em;
  --tracking-widest: 0.1em;

  /* ── Border Radius ── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-3xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
  --shadow-glow: 0 0 20px rgba(12, 130, 152, 0.15);

  /* ── Transitions ── */
  --duration-fast:    100ms;
  --duration-normal:  200ms;
  --duration-slow:    300ms;
  --duration-slower:  500ms;
  --ease-default:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:          cubic-bezier(0.4, 0, 1, 1);
  --ease-out:         cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index Scale ── */
  --z-base:     0;
  --z-dropdown: 50;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-popover:  400;
  --z-toast:    500;
  --z-tooltip:  600;
  --z-max:      9999;

  /* ── Layout ── */
  --sidebar-width:      260px;
  --sidebar-collapsed:  72px;
  --topbar-height:      56px;
  --page-max-width:     1440px;
  --page-padding:       var(--sp-6);
  --content-max-width:  1200px;
}

/* ═══════════════════════════════════════════
   SEMANTIC TOKENS — LIGHT THEME (default)
   ═══════════════════════════════════════════ */

:root, [data-theme="light"] {
  /* ── Surfaces ── */
  --color-bg-app:       var(--p-slate-50);
  --color-bg-page:      var(--p-white);
  --color-bg-surface:   var(--p-white);
  --color-bg-elevated:  var(--p-white);
  --color-bg-sunken:    var(--p-slate-100);
  --color-bg-hover:     var(--p-slate-50);
  --color-bg-active:    var(--p-alpine-50);
  --color-bg-selected:  var(--p-alpine-50);

  /* ── Text ── */
  --color-text-primary:   var(--p-slate-900);
  --color-text-secondary: var(--p-slate-600);
  --color-text-muted:     var(--p-slate-400);
  --color-text-inverse:   var(--p-white);
  --color-text-link:      var(--p-alpine-600);

  /* ── Borders ── */
  --color-border-default: var(--p-slate-200);
  --color-border-strong:  var(--p-slate-300);
  --color-border-subtle:  var(--p-slate-100);
  --color-border-focus:   var(--p-alpine-500);

  /* ── Interactive ── */
  --color-action-primary:     var(--p-alpine-600);
  --color-action-primary-hover: var(--p-alpine-700);
  --color-action-secondary:   var(--p-slate-100);
  --color-action-secondary-hover: var(--p-slate-200);
  --color-action-danger:      var(--p-rose-600);
  --color-action-danger-hover: var(--p-rose-700);

  /* ── Feedback ── */
  --color-success:     var(--p-emerald-600);
  --color-success-bg:  var(--p-emerald-50);
  --color-warning:     var(--p-amber-600);
  --color-warning-bg:  var(--p-amber-50);
  --color-error:       var(--p-rose-600);
  --color-error-bg:    var(--p-rose-50);
  --color-info:        var(--p-sky-500);
  --color-info-bg:     var(--p-sky-50);

  /* ── Sidebar ── */
  --color-sidebar-bg:     var(--p-slate-900);
  --color-sidebar-text:   var(--p-slate-300);
  --color-sidebar-active: var(--p-white);
  --color-sidebar-hover:  rgba(255,255,255,0.06);
  --color-sidebar-accent: var(--p-alpine-400);

  /* ── Focus Ring ── */
  --ring-color:  var(--p-alpine-500);
  --ring-offset: 2px;
  --ring-width:  2px;

  /* ── Missing vars discovered by theme audit (31 critical) ── */
  --color-border-inverse:          var(--p-slate-800);
  --color-accent-light:            var(--p-alpine-100);
  --color-accent-dark:             var(--p-alpine-700);
  --color-feedback-success-dark:   var(--p-emerald-600);
  --color-feedback-warning-dark:   var(--p-amber-600);
  --color-feedback-danger-dark:    var(--p-rose-600);
  --color-feedback-danger-soft:    rgba(244, 63, 94, 0.08);
  --color-feedback-warning-soft:   rgba(245, 158, 11, 0.08);
  --color-feedback-info-soft:      rgba(14, 165, 233, 0.08);
  --radius-control:                var(--radius-lg);
  --radius-card:                   var(--radius-xl);
  --theme-bg-primary:              var(--color-bg-app);
  --theme-bg-secondary:            var(--color-bg-sunken);
  --bg-muted:                      var(--color-bg-sunken);
  --accent-gradient:               linear-gradient(135deg, var(--p-alpine-500), var(--p-alpine-600));
  --glass-text-muted:              var(--color-text-muted);
  --color-accent-gold-soft:        var(--color-brand-gold-muted);
  --color-action-primary-subtle:   var(--tint-brand);
  --accent-primary-light:          var(--p-alpine-200);
  --border-hover:                  var(--color-border-strong);
  --color-table-row-hover:         var(--table-row-hover);
  --color-table-row-selected:      var(--color-bg-active);
  --glass-accent-amber:            rgba(245, 158, 11, 0.08);
  --size-button-sm:                32px;
  --size-button-md:                40px;
  --size-button-lg:                48px;
  --size-input-md:                 40px;
  --size-icon-button:              36px;
  --size-modal-lg:                 640px;

  /* ── Audit pass 2 — 16 remaining critical vars ── */
  --color-feedback-success-soft:   rgba(16, 185, 129, 0.08);
  --color-feedback-info-dark:      var(--p-sky-500);
  --color-accent-gold:             var(--color-brand-gold);
  --color-bg:                      var(--color-bg-app);
  --color-bg-card:                 var(--card-bg);
  --radius-pill:                   var(--radius-full);
  --theme-glass-bg-hover:          var(--color-bg-hover);
  --theme-primary-rgb:             12, 130, 152;

  /* Glass text */
  --glass-text-primary:            var(--color-text-primary);
  --glass-text-secondary:          var(--color-text-secondary);

  /* Glass accent tints */
  --glass-accent-cyan:             rgba(6, 182, 212, 0.08);
  --glass-accent-rose:             rgba(244, 63, 94, 0.08);
  --glass-accent-violet:           rgba(139, 92, 246, 0.08);
  --glass-accent-lime:             rgba(132, 204, 22, 0.08);

  /* ── Audit pass 3 — 57 warning vars ── */
  --size-modal-sm:       480px;
  --size-modal-md:       560px;
  --size-modal-xl:       800px;
  --size-table-header:   40px;
  --size-table-row:      48px;

  /* Sparkline/chart semantic colors */
  --sp-amber:          var(--p-amber-500);
  --sp-blue:           var(--p-alpine-500);
  --sp-blue-muted:     var(--p-alpine-200);
  --sp-emerald:        var(--p-emerald-500);
  --sp-emerald-muted:  var(--p-emerald-200);
  --sp-rose:           var(--p-rose-500);
  --sp-rose-muted:     var(--p-rose-200);
  --sp-violet:         var(--color-cat-violet);
  --sp-violet-muted:   rgba(139, 92, 246, 0.25);
  --sp-text:           var(--color-text-primary);

  /* Status aliases */
  --status-success:    var(--color-success);
  --status-warning:    var(--color-warning);
  --status-error:      var(--color-error);

  /* Misc aliases used in 2+ files */
  --aurora-500:        var(--p-alpine-400);
  --bg-base:           var(--color-bg-app);
  --bg-hover:          var(--color-bg-hover);
  --brand:             var(--color-action-primary);
  --color-accent-gold-hover:       var(--color-brand-gold-light);
  --color-action-primary-active:   var(--color-action-primary-hover);
  --color-action-primary-light:    var(--tint-brand);
  --color-bg-base:                 var(--color-bg-app);
  --color-severity-warning:        var(--color-warning);
  --color-table-header-bg:         var(--color-bg-sunken);
  --ease-smooth:                   var(--ease-default);
  --font-scale:                    1;
  --glass-bg-primary:              var(--glass-bg);
  --gradient-accent:               var(--accent-gradient);

  /* ── Audit pass 5 — final 25 warnings ── */
  --neon-cyan:                      #00F0FF;
  --neon-magenta:                   #FF006E;
  --ocean-500:                      var(--p-alpine-500);
  --radius-modal:                   var(--radius-2xl);
  --radix-select-trigger-height:    var(--size-button-md);
  --radix-select-trigger-width:     auto;
  --size-checkbox:                  22px; /* audit: was 18px, padded to 44px touch via spacing */
  --size-icon-sm:                   16px;
  --size-icon-md:                   20px;
  --size-icon-lg:                   24px;
  --size-input-sm:                  32px;
  --size-input-lg:                  48px;
  --size-switch-width:              36px;
  --size-switch-height:             20px;
  --size-switch-thumb:              16px;
  --size-table-row-dense:           36px;
  --size-touch-min:                 44px;
  --sp-amber-muted:                 var(--p-amber-200);
  --sp-cyan:                        var(--color-cat-cyan);
  --sp-cyan-muted:                  rgba(6, 182, 212, 0.25);
  --sp-text-muted:                  var(--color-text-muted);
  --status-success-bg:              var(--color-success-bg);
  --sunset-500:                     #FF7043;
  --theme-border:                   var(--color-border-default);
  --v4-surface-default:             var(--color-bg-surface);

  /* ── Build audit — 6 final missing vars ── */
  --accent-primary-lighter:         var(--p-alpine-200);
  --bg-subtle:                      var(--color-bg-hover);
  --color-border-medium:            var(--color-border-strong);
  --color-brand-primary:            var(--color-action-primary);
  --section-rgb:                    12, 130, 152;

  /* ── Overlays & Surfaces ── */
  --overlay-light-xs:  rgba(15, 23, 42, 0.04);
  --overlay-light-sm:  rgba(15, 23, 42, 0.06);
  --overlay-light-md:  rgba(15, 23, 42, 0.08);
  --overlay-light-lg:  rgba(15, 23, 42, 0.10);
  --overlay-dark-xs:   rgba(255, 255, 255, 0.03);
  --overlay-dark-sm:   rgba(255, 255, 255, 0.05);
  --overlay-dark-md:   rgba(255, 255, 255, 0.08);
  --overlay-dark-lg:   rgba(255, 255, 255, 0.10);
  --overlay-white-60:  rgba(255, 255, 255, 0.6);
  --overlay-white-70:  rgba(255, 255, 255, 0.7);
  --scrim:             rgba(15, 23, 42, 0.5);

  /* ── Feedback tints (for badges/backgrounds) ── */
  --tint-success:  rgba(16, 185, 129, 0.1);
  --tint-error:    rgba(239, 68, 68, 0.1);
  --tint-warning:  rgba(245, 158, 11, 0.1);
  --tint-info:     rgba(59, 130, 246, 0.1);
  --tint-brand:    rgba(12, 130, 152, 0.1);

  /* ── Glassmorphism (Design 2031 — retuned) ── */
  --glass-bg:           rgba(255, 255, 255, 0.52);
  --glass-bg-subtle:    rgba(255, 255, 255, 0.32);
  --glass-border:       rgba(255, 255, 255, 0.24);
  --glass-blur:         20px;
  --glass-blur-heavy:   32px;
  --glass-shadow:       0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
  --glass-shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.08);
  --glass-glow:         0 0 0 1px rgba(12, 130, 152, 0.18), 0 0 32px rgba(12, 130, 152, 0.12);

  /* ── Brand Accent (Gold) ── */
  --color-brand-gold:        #D4AF37;
  --color-brand-gold-light:  #C9A962;
  --color-brand-gold-muted:  rgba(212, 175, 55, 0.15);

  /* ── Category Colors (charts, badges, tags) ── */
  --color-cat-violet:  #8B5CF6;
  --color-cat-pink:    #EC4899;
  --color-cat-cyan:    #06B6D4;
  --color-cat-orange:  #F97316;
  --color-cat-lime:    #84CC16;
  --color-cat-fuchsia: #D946EF;

  /* ── Component-level tokens ── */
  --card-bg:         var(--color-bg-surface);
  --card-border:     var(--color-border-default);
  --card-radius:     var(--radius-xl);
  --card-shadow:     var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);
  --card-padding:    var(--sp-6);

  --btn-radius:      var(--radius-lg);
  --btn-font-weight: 500;
  --btn-transition:  all var(--duration-normal) var(--ease-default);

  --input-bg:        var(--color-bg-surface);
  --input-border:    var(--color-border-default);
  --input-radius:    var(--radius-lg);
  --input-focus-ring: 0 0 0 3px rgba(12, 130, 152, 0.15);

  --table-row-hover: var(--color-bg-hover);
  --table-stripe:    var(--color-bg-sunken);
  --table-border:    var(--color-border-subtle);

  --badge-radius:    var(--radius-full);
  --badge-font-size: var(--text-xs);
  --badge-padding:   var(--sp-0.5) var(--sp-2);
}

/* ═══════════════════════════════════════════
   SEMANTIC TOKENS — DARK THEME
   ═══════════════════════════════════════════ */

[data-theme="dark"] {
  --color-bg-app:       var(--p-slate-950);
  --color-bg-page:      var(--p-slate-900);
  --color-bg-surface:   var(--p-slate-900);
  --color-bg-elevated:  var(--p-slate-800);
  --color-bg-sunken:    var(--p-slate-950);
  --color-bg-hover:     var(--p-slate-800);
  --color-bg-active:    rgba(12, 130, 152,0.15);
  --color-bg-selected:  rgba(12, 130, 152,0.15);

  --color-text-primary:   var(--p-slate-50);
  --color-text-secondary: var(--p-slate-400);
  --color-text-muted:     var(--p-slate-500);
  --color-text-inverse:   var(--p-slate-900);
  --color-text-link:      var(--p-alpine-400);

  --color-border-default: var(--p-slate-800);
  --color-border-strong:  var(--p-slate-700);
  --color-border-subtle:  rgba(255,255,255,0.06);
  --color-border-focus:   var(--p-alpine-400);

  --color-action-primary:      var(--p-alpine-500);
  --color-action-primary-hover: var(--p-alpine-400);
  --color-action-secondary:    var(--p-slate-800);
  --color-action-secondary-hover: var(--p-slate-700);

  --color-success-bg:  rgba(16,185,129,0.1);
  --color-warning-bg:  rgba(245,158,11,0.1);
  --color-error-bg:    rgba(244,63,94,0.1);
  --color-info-bg:     rgba(14,165,233,0.1);

  --color-sidebar-bg:    var(--p-black);
  --color-sidebar-hover: rgba(255,255,255,0.04);

  --shadow-xs:  0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.4);
  --shadow-lg:  0 10px 15px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 20px rgba(12, 130, 152,0.25);

  /* ── Dark audit fixes ── */
  --color-border-inverse:          var(--p-slate-200);
  --color-accent-light:            var(--p-alpine-800);
  --color-accent-dark:             var(--p-alpine-300);
  --color-feedback-success-dark:   var(--p-emerald-400);
  --color-feedback-warning-dark:   var(--p-amber-400);
  --color-feedback-danger-dark:    var(--p-rose-400);
  --color-feedback-danger-soft:    rgba(244, 63, 94, 0.15);
  --color-feedback-warning-soft:   rgba(245, 158, 11, 0.15);
  --color-feedback-info-soft:      rgba(14, 165, 233, 0.15);
  --bg-muted:                      var(--color-bg-sunken);
  --glass-text-muted:              var(--p-slate-400);
  --glass-accent-amber:            rgba(245, 158, 11, 0.12);
  --color-feedback-success-soft:   rgba(16, 185, 129, 0.15);
  --color-feedback-info-dark:      var(--p-sky-400);
  --glass-accent-cyan:             rgba(6, 182, 212, 0.12);
  --glass-accent-rose:             rgba(244, 63, 94, 0.12);
  --glass-accent-violet:           rgba(139, 92, 246, 0.12);
  --glass-accent-lime:             rgba(132, 204, 22, 0.12);

  /* ── Dark Glassmorphism (retuned — more translucent, more depth) ── */
  --glass-bg:           rgba(15, 23, 42, 0.58);
  --glass-bg-subtle:    rgba(15, 23, 42, 0.38);
  --glass-border:       rgba(255, 255, 255, 0.12);
  --glass-shadow:       0 8px 32px rgba(0, 0, 0, 0.40), 0 2px 8px rgba(0, 0, 0, 0.25);
  --glass-shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.50), 0 4px 12px rgba(0, 0, 0, 0.30);
  --glass-glow:         0 0 0 1px rgba(12, 130, 152, 0.28), 0 0 36px rgba(12, 130, 152, 0.15);

  /* ── Dark component tokens ── */
  --card-bg:         var(--glass-bg);
  --card-border:     var(--glass-border);
  --card-shadow:     var(--glass-shadow);
  --card-shadow-hover: var(--glass-shadow-hover);

  --input-bg:        rgba(15, 23, 42, 0.6);
  --input-border:    rgba(255, 255, 255, 0.1);
  --input-focus-ring: 0 0 0 3px rgba(12, 130, 152, 0.25);

  --table-row-hover: rgba(255, 255, 255, 0.04);
  --table-stripe:    rgba(255, 255, 255, 0.02);
}

/* ═══════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════ */

/* Mobile-first: base styles = mobile (320px+) */

@media (min-width: 768px) {
  :root {
    --page-padding: var(--sp-8);
    --text-base: 0.9375rem; /* 15px tablet */
  }
}

@media (min-width: 1024px) {
  :root {
    --page-padding: var(--sp-10);
    --text-base: 0.9375rem; /* 15px laptop */
  }
}

@media (min-width: 1440px) {
  :root {
    --page-padding: var(--sp-12);
    --text-base: 1rem; /* 16px on large screens — optimal for payroll data */
  }
}

/* ═══════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════ */

/* Tabular numbers for financial data */
.tabular-nums { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* Currency formatting */
.currency { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* Truncate text */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Focus visible ring (accessibility) — contrasted for any background */
.focus-ring:focus-visible {
  outline: 2px solid #1A9FB5;
  outline: var(--ring-width) solid var(--ring-color);
  outline-offset: 2px;
  outline-offset: var(--ring-offset);
  box-shadow: 0 0 0 calc(2px + 2px + 1px) #ffffff;
  box-shadow: 0 0 0 calc(var(--ring-offset) + var(--ring-width) + 1px) var(--color-bg-surface);
}

/* High-contrast focus for elements on colored backgrounds (buttons) */
[class*="btn-primary"]:focus-visible,
[class*="action-primary"]:focus-visible,
button[style*="action-primary"]:focus-visible {
  outline-color: #ffffff;
  outline-color: var(--p-white);
  box-shadow: 0 0 0 calc(2px + 2px + 1px) #0C8298;
  box-shadow: 0 0 0 calc(var(--ring-offset) + var(--ring-width) + 1px) var(--color-action-primary);
}

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

/* Touch target minimum (44px for accessibility) */
.touch-target { min-width: 44px; min-height: 44px; }

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

/*
 * BRANDAI v3 — Ultra Polish Layer
 * =================================
 * Micro-interactions, animations, and visual refinements
 * that make every element feel alive and premium.
 *
 * Layer on TOP of tokens.css — never replace tokens, only enhance.
 *
 * Sections:
 *   1. Global resets & typography polish
 *   2. Micro-animations library
 *   3. Interactive states (hover, focus, active, disabled)
 *   4. Skeleton loading system
 *   5. Page transitions
 *   6. Swiss formatting utilities
 *   7. Scrollbar styling
 *   8. Selection & caret
 *   9. Print styles
 *  10. Responsive polish
 */

/* ═══════════════════════════════════════════
   1. GLOBAL RESETS & TYPOGRAPHY POLISH
   ═══════════════════════════════════════════ */

*, *::before, *::after {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html {
  scroll-behavior: smooth;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-app);
  letter-spacing: -0.011em; /* Slight tightening for premium feel */
  overflow-x: hidden;
}

/* Premium heading typography */
h1, h2, h3, h4, h5, h6, [role="heading"] {
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

/* Tabular numbers for ALL financial data */
.tabular-nums,
[data-type="currency"],
[data-type="number"],
[data-type="percentage"],
td:has(> .currency),
.font-mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "tnum";
}

/* ═══════════════════════════════════════════
   2. MICRO-ANIMATIONS LIBRARY
   ═══════════════════════════════════════════ */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes ripple {
  from { transform: scale(0); opacity: 0.4; }
  to { transform: scale(4); opacity: 0; }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 5px rgba(12, 130, 152, 0); }
  50% { box-shadow: 0 0 20px rgba(12, 130, 152, 0.15); }
}

@keyframes checkmark {
  0% { stroke-dashoffset: 24; }
  100% { stroke-dashoffset: 0; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

@keyframes confetti {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-200px) rotate(720deg); opacity: 0; }
}

/* ── Brand.ai Signature Animations ── */

/* Page morph — blur + scale settle (unique to Brand.ai) */
@keyframes pageMorph {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: scale(0.97) translateY(6px);
  }
  60% {
    opacity: 1;
    filter: blur(2px);
    transform: scale(1.005) translateY(0);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1) translateY(0);
  }
}

/* Card reveal — clip-path wipe from center */
@keyframes cardReveal {
  0% {
    opacity: 0;
    clip-path: inset(8% 8% 8% 8% round 12px);
    transform: scale(0.96);
  }
  100% {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0% round 12px);
    transform: scale(1);
  }
}

/* Chromatic settle — RGB split that resolves (page transitions) */
@keyframes chromaticSettle {
  0% {
    filter:
      drop-shadow(1.5px 0 0 rgba(12, 130, 152, 0.3))
      drop-shadow(-1.5px 0 0 rgba(244, 63, 94, 0.2));
    transform: translateY(4px);
    opacity: 0.8;
  }
  50% {
    filter:
      drop-shadow(0.5px 0 0 rgba(12, 130, 152, 0.1))
      drop-shadow(-0.5px 0 0 rgba(244, 63, 94, 0.06));
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    filter: drop-shadow(0 0 0 transparent);
    transform: translateY(0);
    opacity: 1;
  }
}

/* Number countup with blur resolve */
@keyframes numberReveal {
  0% {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(12px) scale(0.9);
  }
  70% {
    opacity: 1;
    filter: blur(1px);
    transform: translateY(-2px) scale(1.02);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

/* Signature utility classes */
.animate-page-morph { animation: pageMorph 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.animate-card-reveal { animation: cardReveal 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.animate-chromatic { animation: chromaticSettle 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.animate-number-reveal { animation: numberReveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* Animation utility classes */
.animate-fade-in { animation: fadeIn 0.3s var(--ease-out) both; }
.animate-fade-in-up { animation: fadeInUp 0.4s var(--ease-out) both; }
.animate-fade-in-down { animation: fadeInDown 0.4s var(--ease-out) both; }
.animate-fade-in-scale { animation: fadeInScale 0.3s var(--ease-spring) both; }
.animate-slide-in-right { animation: slideInRight 0.4s var(--ease-out) both; }
.animate-slide-in-left { animation: slideInLeft 0.4s var(--ease-out) both; }
.animate-shimmer { animation: shimmer 2s infinite linear; }
.animate-pulse-soft { animation: pulse-soft 2s infinite ease-in-out; }
.animate-breathe { animation: breathe 4s infinite ease-in-out; }
.animate-glow { animation: glow 3s infinite ease-in-out; }
.animate-shake { animation: shake 0.5s ease-in-out; }
.animate-countup { animation: countUp 0.6s var(--ease-out) both; }

/* Stagger children (for card grids, lists, etc.) */
.stagger-children > * { animation: cardReveal 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 50ms; }
.stagger-children > *:nth-child(3) { animation-delay: 100ms; }
.stagger-children > *:nth-child(4) { animation-delay: 150ms; }
.stagger-children > *:nth-child(5) { animation-delay: 200ms; }
.stagger-children > *:nth-child(6) { animation-delay: 250ms; }
.stagger-children > *:nth-child(7) { animation-delay: 300ms; }
.stagger-children > *:nth-child(8) { animation-delay: 350ms; }
.stagger-children > *:nth-child(9) { animation-delay: 400ms; }
.stagger-children > *:nth-child(10) { animation-delay: 450ms; }

/* ═══════════════════════════════════════════
   3. INTERACTIVE STATES
   ═══════════════════════════════════════════ */

/* Ripple effect on buttons */
.ripple-container {
  position: relative;
  overflow: hidden;
}
.ripple-container::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, currentColor 10%, transparent 10%);
  background-size: 100% 100%;
  background-position: center;
  opacity: 0;
  transition: opacity 0.3s;
}
.ripple-container:active::after {
  opacity: 0.1;
  animation: ripple 0.6s ease-out;
}

/* Card tilt on hover (subtle 3D) */
.card-tilt {
  transition: transform 0.4s var(--ease-spring), box-shadow 0.4s ease;
  transform-style: preserve-3d;
  perspective: 1000px;
}
.card-tilt:hover {
  transform: translateY(-2px) rotateX(1deg) rotateY(-1deg);
  box-shadow: var(--shadow-lg);
}

/* Glow border on focus */
.glow-focus:focus-within {
  box-shadow: 0 0 0 3px var(--color-border-focus), 0 0 15px rgba(12, 130, 152, 0.1);
}

/* Magnetic hover (cursor attracted) */
.magnetic-hover {
  transition: transform 0.3s var(--ease-spring);
}
.magnetic-hover:hover {
  transform: scale(1.02);
}

/* Active press state */
.press-effect:active {
  transform: scale(0.97);
  transition: transform 0.1s;
}

/* Disabled state */
.state-disabled,
[disabled],
[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(20%);
}

/* Loading state */
.state-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.state-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: inherit;
  border-radius: inherit;
}

/* ═══════════════════════════════════════════
   4. SKELETON LOADING SYSTEM
   ═══════════════════════════════════════════ */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-sunken) 25%,
    var(--color-bg-hover) 37%,
    var(--color-bg-sunken) 63%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite ease-in-out;
  border-radius: var(--radius-md);
}

.skeleton-text {
  composes: skeleton;
  height: 14px;
  margin-bottom: 8px;
  width: 100%;
}
.skeleton-text.short { width: 60%; }
.skeleton-text.tiny { width: 30%; }

.skeleton-circle {
  composes: skeleton;
  border-radius: 50%;
}

.skeleton-card {
  composes: skeleton;
  height: 120px;
  border-radius: var(--radius-xl);
}

.skeleton-avatar {
  composes: skeleton;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
}

/* ═══════════════════════════════════════════
   5. PAGE TRANSITIONS
   ═══════════════════════════════════════════ */

.page-enter {
  animation: pageMorph 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.page-exit {
  animation: fadeIn 0.2s ease reverse both;
}

/* Route transition wrapper */
.route-transition {
  animation: pageMorph 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ═══════════════════════════════════════════
   6. SWISS FORMATTING UTILITIES
   ═══════════════════════════════════════════ */

/* CHF currency display */
.chf::before {
  content: 'CHF ';
  font-size: 0.85em;
  opacity: 0.6;
}

/* Swiss number formatting (apostrophe separator) */
.swiss-number {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1, "tnum";
}

/* Percentage display */
.pct::after {
  content: '%';
  font-size: 0.85em;
  opacity: 0.6;
  margin-left: 1px;
}

/* Positive/negative amount coloring */
.amount-positive { color: var(--color-success); }
.amount-negative { color: var(--color-error); }
.amount-neutral { color: var(--color-text-secondary); }

/* AVS number styling */
.avs-number {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
}

/* IBAN styling */
.iban {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  word-spacing: 0.3em;
}

/* ═══════════════════════════════════════════
   7. SCROLLBAR STYLING
   ═══════════════════════════════════════════ */

/* Minimal scrollbar — shows on hover only */
.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: var(--color-border-default);
  border-radius: 3px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-strong);
}

/* Hidden scrollbar (still scrollable) */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Global scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--color-border-default);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-strong);
  background-clip: content-box;
}

/* ═══════════════════════════════════════════
   8. SELECTION & CARET
   ═══════════════════════════════════════════ */

::selection {
  background: rgba(12, 130, 152, 0.2);
  color: var(--color-text-primary);
}

::-moz-selection {
  background: rgba(12, 130, 152, 0.2);
  color: var(--color-text-primary);
}

/* Caret color in inputs */
input, textarea, [contenteditable] {
  caret-color: var(--color-action-primary);
}

/* Placeholder styling */
::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
  font-style: normal;
}

/* Autofill styling (removes yellow background) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--color-bg-sunken) inset;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}

/* ═══════════════════════════════════════════
   9. PRINT STYLES
   ═══════════════════════════════════════════ */

@media print {
  /* Remove all interactive elements */
  [data-testid="fnav-orb"],
  [data-testid="apertus-chat"],
  .no-print,
  nav,
  .floating-nav {
    display: none !important;
  }

  /* Reset backgrounds for print */
  body {
    background: white !important;
    color: black !important;
  }

  /* Ensure proper page breaks */
  .page-break-before { page-break-before: always; }
  .page-break-after { page-break-after: always; }
  .no-page-break { page-break-inside: avoid; }

  /* Currency amounts in black */
  .chf, .amount-positive, .amount-negative {
    color: black !important;
  }
}

/* ═══════════════════════════════════════════
   10. RESPONSIVE POLISH
   ═══════════════════════════════════════════ */

/* Mobile: larger touch targets */
@media (max-width: 767px) {
  button, a, [role="button"], [role="link"], input, select, textarea {
    min-height: 44px; /* iOS minimum */
  }

  /* Stack everything */
  .responsive-stack {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Full-width buttons on mobile */
  .responsive-full-btn {
    width: 100% !important;
  }

  /* Smaller headings on mobile */
  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
  h3 { font-size: var(--text-lg); }
}

/* Tablet: optimized 2-column layout */
@media (min-width: 768px) and (max-width: 1023px) {
  h1 { font-size: var(--text-2xl); }

  /* Grid cards: 2 columns on tablet */
  .stagger-children {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: var(--sp-4);
    gap: var(--sp-4);
  }

  /* Form layouts: 2 columns */
  .form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: var(--sp-4);
    gap: var(--sp-4);
  }
}

/* Large desktop: more breathing room */
@media (min-width: 1440px) {
  .content-area {
    max-width: 1400px;
    margin: 0 auto;
  }
}

/* Performance: reduce glass effects on low-end devices */
@media (hover: none) and (max-width: 767px) {
  :root {
    --glass-blur: 8px;
    --glass-blur-heavy: 12px;
  }
}

/* ═══════════════════════════════════════════
   11. COMPONENT-LEVEL POLISH
   ═══════════════════════════════════════════ */

/* Badge — subtle bounce on appear */
[data-component="badge"] {
  animation: fadeInScale 0.2s var(--ease-spring) both;
}

/* Tooltip arrow */
[data-component="tooltip"] {
  animation: fadeInScale 0.15s var(--ease-out) both;
}

/* Modal overlay */
[data-component="modal-overlay"] {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease both;
}

/* Modal content */
[data-component="modal-content"] {
  animation: fadeInScale 0.25s var(--ease-spring) both;
}

/* Toast notification */
[data-component="toast"] {
  animation: slideInRight 0.35s var(--ease-spring) both;
}

/* Dropdown menu */
[data-component="dropdown"] {
  animation: fadeInDown 0.2s var(--ease-out) both;
  transform-origin: top center;
}

/* Table row hover */
[data-component="table-row"]:hover,
tbody tr:hover {
  background: var(--color-bg-hover);
  transition: background 0.15s ease;
}

/* Table header */
[data-component="table-header"],
thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg-surface);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-muted);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-border-default);
}

/* Zebra striping */
tbody tr:nth-child(even) {
  background: var(--color-bg-sunken);
}
tbody tr:nth-child(even):hover {
  background: var(--color-bg-hover);
}

/* Empty state illustration area */
[data-component="empty-state"] {
  animation: fadeInUp 0.5s var(--ease-out) both;
}

/* Step indicator — active step glow */
[data-step-active="true"] {
  animation: glow 2s infinite ease-in-out;
}

/* ═══════════════════════════════════════════
   12. FORM POLISH
   ═══════════════════════════════════════════ */

/* Input focus transition */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
select:focus,
textarea:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(12, 130, 152, 0.1);
  outline: none;
}

/* Error state shake */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"],
.input-error {
  border-color: var(--color-error) !important;
  animation: shake 0.4s ease-in-out;
}

/* Error message */
.field-error {
  color: var(--color-error);
  font-size: var(--text-xs);
  margin-top: var(--sp-1);
  animation: fadeInDown 0.2s var(--ease-out) both;
}

/* Required field asterisk */
.field-required::after {
  content: ' *';
  color: var(--color-error);
  font-weight: 600;
}

/* Help text */
.field-help {
  color: var(--color-text-muted);
  font-size: var(--text-2xs);
  margin-top: var(--sp-0.5);
  line-height: var(--leading-relaxed);
}

/* Select dropdown arrow */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 32px;
}

/* Checkbox & Radio refinement */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-action-primary);
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Range slider */
input[type="range"] {
  accent-color: var(--color-action-primary);
  height: 6px;
  border-radius: 3px;
  cursor: pointer;
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: var(--color-border-default);
  transition: background 0.2s ease;
  cursor: pointer;
}
.toggle-switch[aria-checked="true"] {
  background: var(--color-action-primary);
}
.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: white;
  box-shadow: var(--shadow-xs);
  transition: transform 0.2s var(--ease-spring);
}
.toggle-switch[aria-checked="true"]::after {
  transform: translateX(20px);
}

/* ═══════════════════════════════════════════
   13. BUTTON POLISH
   ═══════════════════════════════════════════ */

/* All buttons get smooth transitions */
button, [role="button"], .btn {
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s var(--ease-spring),
    opacity 0.2s ease;
}

/* Active press */
button:active:not(:disabled), [role="button"]:active:not(:disabled) {
  transform: scale(0.97);
}

/* Focus visible */
button:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Icon buttons */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  transition: background 0.15s, color 0.15s;
}
.icon-btn:hover {
  background: var(--color-bg-hover);
}

/* ═══════════════════════════════════════════
   14. CARD POLISH
   ═══════════════════════════════════════════ */

/* Gradient border on hover */
.card-gradient-border {
  position: relative;
}
.card-gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  /* Audit B7 exception: intentional 1-px gradient-border ring (not on the
   * 8 px grid because it paints the border itself, not content spacing). */
  padding: 1px;
  background: linear-gradient(135deg,
    var(--color-border-subtle) 0%,
    var(--color-action-primary) 50%,
    var(--color-border-subtle) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.card-gradient-border:hover::before {
  opacity: 1;
}

/* Glass card effect */
.glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .glass-card {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/*
 * BRANDAI v4 — ULTRA-MODERN Design Overhaul
 * ============================================
 * Ce fichier transforme radicalement l'apparence de l'application.
 * Import APRÈS tokens.css et ultra-polish.css.
 *
 * Principes:
 *   - Profondeur avec des ombres multicouches subtiles
 *   - Bordures quasi-invisibles (1px rgba, pas de bordure visible)
 *   - Backgrounds avec gradients mesh subtils
 *   - Typographie avec contraste fort (titres noirs, body gris)
 *   - Espacement généreux (breathe — l'espace est un luxe)
 *   - Couleurs limitées (indigo accent + gris + feedback)
 *   - Pas de décorations inutiles
 *   - Chaque pixel a une raison d'être
 */

/* ═══════════════════════════════════════════
   DESIGN 2031 — SIDEBAR NAVIGATION POLISH
   ═══════════════════════════════════════════ */

/* Sidebar links: smooth reveal + active indicator */
nav a, aside a,
[class*="sidebar"] a,
[class*="Sidebar"] a {
  position: relative;
  transition:
    color var(--duration-normal) var(--ease-default),
    background var(--duration-normal) var(--ease-default),
    padding-left var(--duration-normal) var(--ease-spring);
  border-radius: var(--radius-lg);
}

/* Active sidebar link: left accent bar */
nav a[aria-current="page"],
nav a.active,
[class*="sidebar"] a[aria-current="page"],
[class*="sidebar"] a.active {
  background: var(--tint-brand);
  color: var(--color-action-primary);
  font-weight: 600;
}
nav a[aria-current="page"]::before,
nav a.active::before,
[class*="sidebar"] a[aria-current="page"]::before,
[class*="sidebar"] a.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: var(--radius-full);
  background: var(--color-action-primary);
}

/* ═══════════════════════════════════════════
   DESIGN 2031 — LINKS & BREADCRUMBS
   ═══════════════════════════════════════════ */

/* Links: underline on hover, smooth color */
a:not([class*="rounded"]):not([class*="btn"]):not(nav a) {
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-default);
}
a:not([class*="rounded"]):not([class*="btn"]):not(nav a):hover {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
}

/* Breadcrumbs: muted separators */
[class*="breadcrumb"] span,
[class*="Breadcrumb"] span,
nav[aria-label="breadcrumb"] span {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* ═══════════════════════════════════════════
   DESIGN 2031 — DATA VISUALIZATION
   ═══════════════════════════════════════════ */

/* Chart containers: glass card */
[class*="chart"],
[class*="Chart"],
[class*="recharts"],
canvas {
  border-radius: var(--radius-xl);
}

/* Recharts: themed axes + grid */
.recharts-cartesian-axis-tick-value {
  fill: var(--color-text-muted) !important;
  font-size: 11px !important;
}
.recharts-cartesian-grid line {
  stroke: var(--color-border-subtle) !important;
}
.recharts-tooltip-wrapper {
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
}
.recharts-default-tooltip {
  background: var(--color-bg-surface) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
.recharts-legend-item-text {
  color: var(--color-text-secondary) !important;
  font-size: var(--text-xs) !important;
}

/* ═══════════════════════════════════════════
   DESIGN 2031 — ACCESSIBILITY FOCUS
   ═══════════════════════════════════════════ */

/* Skip-to-content link */
a[href="#main-content"],
a[href="#content"],
.skip-link {
  position: fixed;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-max);
  padding: var(--sp-3) var(--sp-6);
  background: var(--color-action-primary);
  color: white;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  font-weight: 600;
  transition: top var(--duration-normal) var(--ease-spring);
}
a[href="#main-content"]:focus,
a[href="#content"]:focus,
.skip-link:focus {
  top: 0;
  outline: none;
}

/* Focus-visible: consistent branded ring */
:focus-visible {
  outline: 2px solid var(--color-action-primary) !important;
  outline-offset: 2px !important;
  border-radius: var(--radius-sm);
}

/* Reduced motion: respect user preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  :root {
    --color-border-default: #000;
    --color-border-subtle: #666;
    --color-text-muted: #444;
  }
  [data-theme="dark"] {
    --color-border-default: #fff;
    --color-border-subtle: #999;
    --color-text-muted: #bbb;
  }
}

/* ═══════════════════════════════════════════
   DESIGN 2031 — LOADING & ERROR STATES
   ═══════════════════════════════════════════ */

/* Skeleton shimmer: premium gradient */
.skeleton,
[class*="skeleton"],
[class*="Skeleton"] {
  background: linear-gradient(
    110deg,
    var(--color-bg-sunken) 25%,
    var(--color-bg-hover) 37%,
    var(--color-bg-sunken) 63%
  ) !important;
  background-size: 300% 100% !important;
  animation: shimmer-2031 1.8s ease-in-out infinite !important;
  border-radius: var(--radius-md) !important;
  border: none !important;
}

@keyframes shimmer-2031 {
  0% { background-position: 100% 50%; }
  100% { background-position: -100% 50%; }
}

/* Loading spinner: brand-colored */
[class*="animate-spin"],
.spinner,
[class*="Loader"] {
  color: var(--color-action-primary) !important;
}

/* Error containers: glass + red tint.
 *
 * Two exclusions, both measured against the real tree (17 matching class attributes
 * across 11 files) rather than assumed:
 *
 * 1. :not([class*="var(--color-error"]) — Tailwind arbitrary values put the TOKEN NAME
 *    inside the class attribute, e.g.
 *      class="text-sm text-[var(--color-feedback-danger,var(--color-error))]"
 *    so a substring match treats a coloured piece of TEXT as an error CONTAINER. Seen
 *    on AlertCard, ConfirmCard, ValidationBanner, and on PDFCard's 40x48 file-icon
 *    tile, which was being given a red rule and a tinted background. Real containers
 *    are named .field-error / .ifi-error-boundary / .vnl-cmd-error and keep matching.
 *
 * 2. :not([data-tone="neutral"]) — a sanctioned opt-out. Because these declarations are
 *    !important, a component could not previously decline the treatment by styling
 *    itself; the only escape was to avoid the substring "error" in its class name,
 *    which is a workaround masquerading as a naming convention. A refusal (HTTP 4xx)
 *    or an informational state can now say so declaratively.
 *
 * Neither exclusion changes any element that was intentionally targeted.
 */
[class*="error"]:not([class*="var(--color-error"]):not([data-tone="neutral"]),
[class*="Error"]:not([class*="var(--color-error"]):not([data-tone="neutral"]),
[role="alert"]:not([data-tone="neutral"]) {
  border-left: 3px solid var(--color-error) !important;
  background: var(--tint-error) !important;
  border-radius: var(--radius-lg) !important;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

/* Success containers */
[class*="success-banner"],
[class*="SuccessBanner"] {
  border-left: 3px solid var(--color-success) !important;
  background: var(--tint-success) !important;
  border-radius: var(--radius-lg) !important;
}

/* Empty state: centered, breathable */
[class*="empty-state"],
[class*="EmptyState"] {
  text-align: center;
  padding: var(--sp-12) var(--sp-8) !important;
  color: var(--color-text-muted);
}
[class*="empty-state"] svg,
[class*="EmptyState"] svg {
  opacity: 0.4;
  margin: 0 auto var(--sp-4);
}

/* Toast notifications: glass */
[class*="toast"],
[class*="Toaster"],
[data-sonner-toast] {
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* ═══════════════════════════════════════════
   DESIGN 2031 — DARK MODE PREMIUM
   Refined surfaces, luminous borders, depth.
   ═══════════════════════════════════════════ */

[data-theme="dark"] body,
.dark body {
  background:
    radial-gradient(ellipse at 15% 50%, rgba(12, 130, 152, 0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 15%, rgba(16, 185, 129, 0.05) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 90%, rgba(245, 158, 11, 0.03) 0%, transparent 40%),
    var(--color-bg-app);
}

/* Dark cards: subtle top-light edge + deeper shadow */
[data-theme="dark"] [class*="rounded"][class*="border"],
.dark [class*="rounded"][class*="border"] {
  border-color: rgba(255, 255, 255, 0.06);
  border-top-color: rgba(255, 255, 255, 0.10);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
    0 4px 16px rgba(0, 0, 0, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Dark buttons: luminous border on hover */
[data-theme="dark"] button:hover,
.dark button:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

/* Dark inputs: subtle inner glow */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea,
.dark input:not([type="checkbox"]):not([type="radio"]),
.dark select,
.dark textarea {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus,
.dark input:focus,
.dark select:focus,
.dark textarea:focus {
  border-color: var(--color-border-focus);
  box-shadow:
    0 0 0 3px rgba(129, 140, 248, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.2) inset;
}

/* Dark tables: refined row borders */
[data-theme="dark"] table tbody tr,
.dark table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] table tbody tr:hover,
.dark table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}
[data-theme="dark"] table th,
.dark table th {
  background: rgba(255, 255, 255, 0.02);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Dark badges: slightly brighter for readability */
[data-theme="dark"] [class*="rounded-full"][class*="text-xs"],
.dark [class*="rounded-full"][class*="text-xs"] {
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Dark modals: deeper backdrop + sharper glass */
[data-theme="dark"] [role="dialog"],
.dark [role="dialog"] {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 24px 48px rgba(0, 0, 0, 0.5);
}

/* Dark scrollbar: more visible */
[data-theme="dark"] ::-webkit-scrollbar-thumb,
.dark ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}

/* Dark dividers / separators */
[data-theme="dark"] hr,
.dark hr {
  border-color: rgba(255, 255, 255, 0.06);
}

/* ═══════════════════════════════════════════
   DESIGN 2031 — TYPOGRAPHY POLISH
   Premium heading hierarchy, tighter tracking,
   better rhythm between text sizes.
   ═══════════════════════════════════════════ */

/* Page titles: extra-bold, tight, gradient hint */
h1, .text-3xl, .text-4xl {
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

/* Section headings: semi-bold, balanced */
h2, .text-2xl {
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

h3, .text-xl {
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

/* Body text: slightly tighter than default */
p, li, td, .text-sm, .text-base {
  letter-spacing: -0.011em;
  line-height: 1.6;
}

/* Small/muted text: wider tracking for readability */
.text-xs, .text-2xs, small, caption, figcaption {
  letter-spacing: 0.01em;
}

/* Labels: uppercase micro-text */
label, .label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
}

/* Monospace: tighter for code/numbers */
code, pre, kbd, samp, .font-mono, .tabular-nums {
  font-feature-settings: "tnum" 1, "calt" 0;
  letter-spacing: -0.02em;
}

/* Financial amounts: extra polish */
[data-type="currency"],
.amount,
.currency {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ═══════════════════════════════════════════
   DESIGN 2031 — RESPONSIVE MOBILE POLISH
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Tighter spacing on mobile */
  h1, .text-3xl, .text-4xl { font-size: var(--text-2xl); }
  h2, .text-2xl { font-size: var(--text-xl); }

  /* Full-width cards on mobile */
  [class*="rounded"][class*="border"][class*="shadow"] {
    border-radius: var(--radius-lg);
  }

  /* Disable hover lift on touch (causes 300ms delay) */
  [class*="rounded"][class*="shadow"][class*="cursor-pointer"]:hover {
    transform: none;
  }

  /* Larger touch targets */
  button, [role="button"], a[class*="rounded"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Stagger animations: faster on mobile */
  main > * {
    animation-duration: 0.2s !important;
  }
  main > *:nth-child(n+4) {
    animation-delay: 0ms !important;
  }
}

/* ═══════════════════════════════════════════
   DESIGN 2031 — APP BACKGROUND
   ═══════════════════════════════════════════ */

/* Subtle ambient gradient that shifts slowly — gives depth
   to the flat background without being distracting */
body {
  background:
    radial-gradient(ellipse at 20% 50%, var(--tint-brand) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(16, 185, 129, 0.03) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 100%, rgba(245, 158, 11, 0.02) 0%, transparent 40%),
    var(--color-bg-app);
  min-height: 100vh;
}

[data-theme="dark"] body {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(12, 130, 152, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(16, 185, 129, 0.04) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 100%, rgba(245, 158, 11, 0.02) 0%, transparent 40%),
    var(--color-bg-app);
}

/* ═══════════════════════════════════════════
   RADICAL CARD REDESIGN
   ═══════════════════════════════════════════ */

/* Cards: Design 2031 glassmorphism */
[data-component="card"],
.card-ultra,
.rounded-\[var\(--radius-card\2C12px\)\] {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition: all var(--duration-normal) var(--ease-default);
}

[data-component="card"]:hover,
.card-ultra:hover {
  box-shadow: var(--card-shadow-hover);
  border-color: var(--glass-border);
  transform: translateY(-2px);
}

[data-component="card"]:active {
  transform: translateY(0);
  transition-duration: var(--duration-fast);
}

/* ═══════════════════════════════════════════
   METRIC CARDS (KPI numbers)
   ═══════════════════════════════════════════ */

.metric-value {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-text-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.metric-label {
  font-size: 0.75rem; /* 12px */
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════
   SECTION HEADERS (ultra-clean)
   ═══════════════════════════════════════════ */

.section-label {
  font-size: 0.625rem; /* 10px */
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  opacity: 0.7;
}

/* ═══════════════════════════════════════════
   BUTTON REDESIGN
   ═══════════════════════════════════════════ */

/* Primary: solid background, no gradients, subtle shadow */
.btn-primary-ultra {
  background: var(--color-action-primary);
  color: white;
  border: none;
  border-radius: 8px;
  border-radius: var(--radius-control, 8px);
  padding: 10px 20px;
  font-weight: 600;
  font-size: 0.875rem;
  box-shadow:
    0 1px 2px rgba(12, 130, 152, 0.2),
    0 4px 12px rgba(12, 130, 152, 0.15);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary-ultra:hover {
  box-shadow:
    0 2px 4px rgba(12, 130, 152, 0.25),
    0 8px 24px rgba(12, 130, 152, 0.2);
  transform: translateY(-1px);
}

.btn-primary-ultra:active {
  transform: translateY(0) scale(0.98);
  box-shadow:
    0 1px 2px rgba(12, 130, 152, 0.2);
}

/* Ghost: invisible until hover */
.btn-ghost-ultra {
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.2s;
}

.btn-ghost-ultra:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
  border-color: var(--color-border-subtle);
}

/* ═══════════════════════════════════════════
   INPUT REDESIGN (floating label feel)
   ═══════════════════════════════════════════ */

/* Inputs: larger, rounder, more padding */
.input-ultra {
  height: 44px;
  border-radius: 12px;
  padding: 0 16px;
  font-size: 0.875rem;
  border: 1.5px solid var(--color-border-default);
  background: var(--color-bg-sunken);
  transition: all 0.2s;
}

.input-ultra:focus {
  border-color: var(--color-action-primary);
  box-shadow: 0 0 0 4px rgba(12, 130, 152, 0.08);
  background: var(--color-bg-surface);
}

/* ═══════════════════════════════════════════
   BADGE REDESIGN (softer, pill-shaped)
   ═══════════════════════════════════════════ */

.badge-ultra {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* Aligned to 4/8 spacing grid (audit B7) */
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.6875rem; /* 11px */
  font-weight: 600;
  letter-spacing: 0.01em;
}

.badge-ultra.success { background: var(--color-success-bg); color: var(--color-success); }
.badge-ultra.warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-ultra.error   { background: var(--color-error-bg);   color: var(--color-error); }
.badge-ultra.info    { background: var(--color-info-bg);     color: var(--color-info); }
.badge-ultra.neutral { background: var(--color-bg-sunken);   color: var(--color-text-muted); }

/* ═══════════════════════════════════════════
   PAGE LAYOUT (more breathing room)
   ═══════════════════════════════════════════ */

.page-content-ultra {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px;
}

@media (min-width: 768px) {
  .page-content-ultra { padding: 32px 24px; }
}

@media (min-width: 1024px) {
  .page-content-ultra { padding: 40px 32px; }
}

@media (min-width: 1440px) {
  .page-content-ultra { padding: 48px 40px; max-width: 1320px; }
}

/* Page title: large, bold, tight tracking */
.page-title-ultra {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--color-text-primary);
}

@media (min-width: 768px) {
  .page-title-ultra { font-size: 2rem; }
}

.page-subtitle-ultra {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* ═══════════════════════════════════════════
   PIPELINE / STEPPER REDESIGN
   ═══════════════════════════════════════════ */

.step-card-ultra {
  position: relative;
  border-radius: 16px;
  padding: 20px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.step-card-ultra.active {
  border-color: rgba(12, 130, 152, 0.2);
  background: linear-gradient(135deg,
    rgba(12, 130, 152, 0.02) 0%,
    var(--color-bg-surface) 100%);
  box-shadow:
    0 4px 16px rgba(12, 130, 152, 0.06),
    inset 0 0 0 1px rgba(12, 130, 152, 0.05);
}

.step-card-ultra.done {
  border-color: rgba(16, 185, 129, 0.15);
  background: linear-gradient(135deg,
    rgba(16, 185, 129, 0.01) 0%,
    var(--color-bg-surface) 100%);
}

/* Step number circle */
.step-number-ultra {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  transition: all 0.3s;
}

.step-number-ultra.active {
  background: var(--color-action-primary);
  color: white;
  box-shadow: 0 4px 12px rgba(12, 130, 152, 0.25);
}

.step-number-ultra.done {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.step-number-ultra.pending {
  background: var(--color-bg-sunken);
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════
   TABLE REDESIGN (cleaner, modern)
   ═══════════════════════════════════════════ */

.table-ultra {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.table-ultra thead th {
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-default);
  background: transparent;
  position: sticky;
  top: 0;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  z-index: 5;
}

.table-ultra tbody td {
  padding: 14px 16px;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-subtle);
}

.table-ultra tbody tr {
  transition: background 0.15s;
}

.table-ultra tbody tr:hover {
  background: var(--color-bg-hover);
}

.table-ultra tbody tr:last-child td {
  border-bottom: none;
}

/* ═══════════════════════════════════════════
   ICON CONTAINERS (softer, modern)
   ═══════════════════════════════════════════ */

.icon-box-ultra {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  transition: all 0.3s;
}

.icon-box-ultra.sm { width: 32px; height: 32px; }
.icon-box-ultra.md { width: 40px; height: 40px; }
.icon-box-ultra.lg { width: 48px; height: 48px; }

/* Safe color mapping (no dynamic Tailwind classes) */
.icon-box-ultra[data-color="indigo"] { background: rgba(12, 130, 152, 0.08); color: #0C8298; }
.icon-box-ultra[data-color="emerald"] { background: rgba(16, 185, 129, 0.08); color: #10b981; }
.icon-box-ultra[data-color="amber"] { background: rgba(245, 158, 11, 0.08); color: #f59e0b; }
.icon-box-ultra[data-color="rose"] { background: rgba(244, 63, 94, 0.08); color: #f43e5c; }
.icon-box-ultra[data-color="sky"] { background: rgba(14, 165, 233, 0.08); color: #0ea5e9; }
.icon-box-ultra[data-color="violet"] { background: rgba(139, 92, 246, 0.08); color: #8b5cf6; }
.icon-box-ultra[data-color="teal"] { background: rgba(20, 184, 166, 0.08); color: #14b8a6; }
.icon-box-ultra[data-color="orange"] { background: rgba(249, 115, 22, 0.08); color: #f97316; }
.icon-box-ultra[data-color="slate"] { background: rgba(100, 116, 139, 0.06); color: #64748b; }
.icon-box-ultra[data-color="pink"] { background: rgba(236, 72, 153, 0.08); color: #ec4899; }
.icon-box-ultra[data-color="cyan"] { background: rgba(6, 182, 212, 0.08); color: #06b6d4; }
.icon-box-ultra[data-color="blue"] { background: rgba(59, 130, 246, 0.08); color: #3b82f6; }

[data-theme="dark"] .icon-box-ultra[data-color="indigo"] { background: rgba(12, 130, 152, 0.12); }
[data-theme="dark"] .icon-box-ultra[data-color="emerald"] { background: rgba(16, 185, 129, 0.12); }
[data-theme="dark"] .icon-box-ultra[data-color="amber"] { background: rgba(245, 158, 11, 0.12); }
[data-theme="dark"] .icon-box-ultra[data-color="rose"] { background: rgba(244, 63, 94, 0.12); }

/* ═══════════════════════════════════════════
   NAVIGATION PANEL (cleaner)
   ═══════════════════════════════════════════ */

.nav-item-ultra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: all 0.2s;
}

.nav-item-ultra:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.nav-item-ultra.active {
  background: rgba(12, 130, 152, 0.06);
  color: var(--color-action-primary);
  font-weight: 600;
}

/* ═══════════════════════════════════════════
   AI BANNER (premium gradient)
   ═══════════════════════════════════════════ */

.ai-banner-ultra {
  position: relative;
  border-radius: 16px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(12, 130, 152, 0.08);
  background: linear-gradient(135deg,
    rgba(12, 130, 152, 0.03) 0%,
    rgba(168, 85, 247, 0.02) 50%,
    transparent 100%);
  transition: border-color 0.4s;
}

.ai-banner-ultra:hover {
  border-color: rgba(12, 130, 152, 0.15);
}

.ai-banner-ultra::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(12, 130, 152, 0.04), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* ═══════════════════════════════════════════
   PROGRESS BAR (thinner, smoother)
   ═══════════════════════════════════════════ */

.progress-ultra {
  height: 3px;
  border-radius: 2px;
  background: var(--color-bg-sunken);
  overflow: hidden;
}

.progress-ultra .bar {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-action-primary), #a855f7);
  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ═══════════════════════════════════════════
   SAFE COLOR CLASSES
   (replaces dynamic Tailwind text-${color}-500)
   ═══════════════════════════════════════════ */

.color-indigo { color: #0C8298; }
.color-emerald { color: #10b981; }
.color-amber { color: #f59e0b; }
.color-rose { color: #f43e5c; }
.color-sky { color: #0ea5e9; }
.color-violet { color: #8b5cf6; }
.color-teal { color: #14b8a6; }
.color-orange { color: #f97316; }
.color-slate { color: #64748b; }
.color-pink { color: #ec4899; }
.color-cyan { color: #06b6d4; }
.color-blue { color: #3b82f6; }

.bg-indigo-soft { background: rgba(12, 130, 152, 0.08); }
.bg-emerald-soft { background: rgba(16, 185, 129, 0.08); }
.bg-amber-soft { background: rgba(245, 158, 11, 0.08); }
.bg-rose-soft { background: rgba(244, 63, 94, 0.08); }
.bg-sky-soft { background: rgba(14, 165, 233, 0.08); }
.bg-violet-soft { background: rgba(139, 92, 246, 0.08); }

/* ═══════════════════════════════════════════
   GLOBAL OVERRIDES (force premium feel)
   ═══════════════════════════════════════════ */

/* All rounded corners → 16px for containers, 12px for controls */
.rounded-2xl { border-radius: 16px !important; }
.rounded-xl { border-radius: 12px !important; }

/* All transitions → smoother easing */
* {
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Remove default focus outline, use our custom ring */
:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--color-action-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════
   PREMIUM GLASS CARD (upgrade #3)
   ═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
   DESIGN 2031 — FORM COMPONENTS POLISH
   ═══════════════════════════════════════════ */

/* Select dropdowns: glass + arrow */
select {
  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='%2364748b' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* Checkboxes: branded when checked */
input[type="checkbox"] {
  accent-color: var(--color-action-primary);
  width: 18px;
  width: var(--size-checkbox, 18px);
  height: 18px;
  height: var(--size-checkbox, 18px);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* Radio buttons: branded */
input[type="radio"] {
  accent-color: var(--color-action-primary);
  width: 18px;
  width: var(--size-checkbox, 18px);
  height: 18px;
  height: var(--size-checkbox, 18px);
  cursor: pointer;
}

/* Range sliders: branded track + thumb */
input[type="range"] {
  accent-color: var(--color-action-primary);
  height: 6px;
  border-radius: var(--radius-full);
  cursor: pointer;
}

/* Textarea: auto-resize hint + glass */
textarea {
  min-height: 80px;
  resize: vertical;
  line-height: var(--leading-relaxed);
}

/* Fieldset: glass border */
fieldset {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
}
legend {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  padding: 0 var(--sp-2);
}

/* ═══════════════════════════════════════════
   DESIGN 2031 — TRANSITIONS & MOTION
   ═══════════════════════════════════════════ */

/* Smooth page transitions between routes */
[class*="page-enter"],
[class*="PageShell"] {
  animation: page-enter-2031 0.35s var(--ease-out) both;
}

@keyframes page-enter-2031 {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dropdown/menu appear */
[role="menu"],
[role="listbox"],
[class*="dropdown"],
[class*="Dropdown"] {
  animation: dropdown-2031 0.2s var(--ease-out) both;
  transform-origin: top center;
}

@keyframes dropdown-2031 {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Accordion/collapsible expand */
[class*="accordion"],
[class*="Accordion"],
[class*="collapsible"],
details[open] > *:not(summary) {
  animation: expand-2031 0.3s var(--ease-out) both;
}

@keyframes expand-2031 {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 1000px;
  }
}

/* ═══════════════════════════════════════════
   DESIGN 2031 — PRINT STYLES
   Clean black-on-white for payslips, reports.
   ═══════════════════════════════════════════ */

@media print {
  body {
    background: white !important;
    color: black !important;
    font-size: 11pt;
  }

  /* Hide UI chrome */
  nav, aside, header, footer,
  [class*="sidebar"], [class*="Sidebar"],
  [class*="topbar"], [class*="Topbar"],
  button:not([data-print]),
  [role="navigation"],
  [class*="toast"], [class*="Toast"] {
    display: none !important;
  }

  /* Full-width content */
  main, [class*="PageShell"] > div {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  /* No shadows, borders minimal, no backdrop */
  * {
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-shadow: none !important;
  }

  /* Cards: simple bordered boxes */
  [class*="rounded"] {
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    background: white !important;
  }

  /* Tables: full borders for clarity */
  table { border-collapse: collapse; width: 100%; }
  table th, table td {
    border: 1px solid #999 !important;
    padding: 6px 8px !important;
    color: black !important;
    background: white !important;
  }
  table th {
    background: #f0f0f0 !important;
    font-weight: 700;
  }

  /* No animations */
  * {
    animation: none !important;
    transition: none !important;
  }

  /* Page breaks */
  h1, h2, h3 { page-break-after: avoid; }
  table, figure, img { page-break-inside: avoid; }

  /* Payslip specific: ensure amounts are visible */
  .amount, .currency, [data-type="currency"] {
    color: black !important;
    font-weight: 600;
  }
}

/* ═══════════════════════════════════════════
   DESIGN 2031 — AUTO-GLASSMORPHISM
   Applied to ALL card-like surfaces across the
   332 pages via structural CSS selectors.
   ═══════════════════════════════════════════ */

/* Any rounded surface with bg-surface gets glass */
.card-elevated,
[class*="rounded"][class*="bg-"][class*="border"],
[class*="rounded"][class*="shadow"] {
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition:
    box-shadow var(--duration-normal) var(--ease-default),
    transform var(--duration-normal) var(--ease-default),
    border-color var(--duration-normal) var(--ease-default);
}

/* Hover lift on interactive cards */
[class*="rounded"][class*="shadow"][class*="cursor-pointer"]:hover,
[class*="rounded"][class*="hover\\:shadow"]:hover,
button[class*="rounded"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--glass-shadow-hover);
}

/* Active press */
[class*="rounded"][class*="shadow"][class*="cursor-pointer"]:active,
button[class*="rounded"]:active {
  transform: translateY(0) scale(0.98);
  transition-duration: var(--duration-fast);
}

/* ── Auto-animate page content ── */
main > *,
[class*="PageShell"] > div > * {
  animation: fadeInUp 0.35s var(--ease-out) both;
}
main > *:nth-child(1) { animation-delay: 0ms; }
main > *:nth-child(2) { animation-delay: 40ms; }
main > *:nth-child(3) { animation-delay: 80ms; }
main > *:nth-child(4) { animation-delay: 120ms; }
main > *:nth-child(5) { animation-delay: 160ms; }

/* ── Buttons: premium press + glow ── */
button,
[role="button"],
a[class*="rounded"][class*="bg-"] {
  transition:
    all var(--duration-normal) var(--ease-default);
  position: relative;
  overflow: hidden;
}

/* Primary buttons glow on hover */
button[class*="bg-\\[var\\(--color-action-primary\\)"],
button[class*="indigo"],
[class*="btn-primary"] {
  box-shadow: 0 2px 8px var(--tint-brand);
}
button[class*="bg-\\[var\\(--color-action-primary\\)"]:hover,
button[class*="indigo"]:hover,
[class*="btn-primary"]:hover {
  box-shadow: var(--glass-glow);
  transform: translateY(-1px);
}

/* ── Inputs: glass border + glow focus ── */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  transition:
    border-color var(--duration-normal) var(--ease-default),
    box-shadow var(--duration-normal) var(--ease-default),
    background var(--duration-normal) var(--ease-default);
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  border-color: var(--color-border-focus);
  box-shadow: var(--input-focus-ring);
  background: var(--color-bg-surface);
  outline: none;
}

/* ── Tables: modern rows ── */
table tbody tr {
  transition: background var(--duration-fast) var(--ease-default);
}
table tbody tr:hover {
  background: var(--table-row-hover) !important;
}
table tbody tr:nth-child(even) {
  background: var(--table-stripe);
}
table th {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-default);
}

/* ── Sidebar: glass ── */
nav[class*="sidebar"],
aside[class*="sidebar"],
[class*="Sidebar"] {
  backdrop-filter: blur(var(--glass-blur-heavy));
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
}

/* ── Badges: pill glow ── */
[class*="rounded-full"][class*="text-xs"],
[class*="rounded-full"][class*="text-\\["],
[class*="badge"],
.badge {
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: all var(--duration-fast) var(--ease-default);
}

/* ── Scrollbars: thin + themed ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--overlay-light-md);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--overlay-light-lg);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--overlay-dark-md);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--overlay-dark-lg);
}

/* ── Selection: brand colored ── */
::selection {
  background: var(--tint-brand);
  color: var(--color-action-primary);
}

/* ── Tooltips: glass ── */
[role="tooltip"],
[data-tooltip] {
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  border: 1px solid var(--glass-border);
}

/* ── Modals: glass overlay ── */
[role="dialog"],
[class*="modal"],
[class*="Modal"] {
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-2xl);
  box-shadow: var(--glass-shadow);
  border: 1px solid var(--glass-border);
}

/* Modal backdrop */
[class*="modal-overlay"],
[class*="backdrop"],
[class*="Overlay"] {
  background: var(--scrim) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ═══════════════════════════════════════════
   SMOOTH PAGE TRANSITIONS (upgrade #4)
   ═══════════════════════════════════════════ */
.page-enter { animation: page-fade-in 0.3s ease-out; }

@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════
   PREMIUM KEYFRAMES (upgrades #11, #12, #13, #21)
   ═══════════════════════════════════════════ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes wave {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(20deg); }
  20% { transform: rotate(-10deg); }
  30% { transform: rotate(20deg); }
  40% { transform: rotate(-5deg); }
  50% { transform: rotate(10deg); }
  60% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

@keyframes shimmer-bar {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes brand-shimmer {
  to { background-position: 200% center; }
}

@keyframes ai-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(12, 130, 152,0.3); }
  50% { box-shadow: 0 0 0 6px rgba(12, 130, 152,0); }
}

/* ═══════════════════════════════════════════
   BRAND TEXT GRADIENT (upgrade #8)
   ═══════════════════════════════════════════ */
.brand-text-gradient {
  /* Audit B8: was `#fff`/`#c7d2fe` hard-coded. Token-ised so dark-mode
   * + ThemeEngine ambiances don't blow the gradient out. */
  background: linear-gradient(135deg, #ffffff 0%, #c7d2fe 50%, #ffffff 100%);
  background: linear-gradient(135deg, var(--p-white, #ffffff) 0%, var(--p-indigo-200, #c7d2fe) 50%, var(--p-white, #ffffff) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: brand-shimmer 8s linear infinite;
}

/**
 * Design System Global Styles
 * Variables CSS et styles de base
 */

:root {
  /* ========================================
   * SIZE TOKENS - INVARIANTS (ne changent jamais)
   * ======================================== */
  
  /* Buttons */
  --size-button-sm: 36px;
  --size-button-md: 40px;
  --size-button-lg: 48px;
  
  /* Inputs */
  --size-input-sm: 36px;
  --size-input-md: 40px;
  --size-input-lg: 48px;
  
  /* Icons */
  --size-icon-xs: 14px;
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 24px;
  
  /* Selectors */
  --size-checkbox: 16px;
  --size-radio: 16px;
  --size-switch-width: 40px;
  --size-switch-height: 22px;
  --size-switch-thumb: 18px;
  
  /* Tables */
  --size-table-header: 44px;
  --size-table-row: 44px;
  --size-table-rowDense: 36px;
  
  /* Modals */
  --size-modal-sm: 480px;
  --size-modal-md: 640px;
  --size-modal-lg: 800px;
  --size-modal-xl: 1040px;
  
  /* Touch targets */
  --size-touchTarget-min: 44px;
  --size-touchTarget-recommended: 48px;
  --size-iconButton: 40px;
  --size-floatingButton: 56px;
  
  /* ========================================
   * RADIUS TOKENS - INVARIANTS
   * ======================================== */
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-modal: 16px;
  --radius-pill: 999px;
  
  /* ========================================
   * SPACING TOKENS - INVARIANTS
   * ======================================== */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  
  /* ========================================
   * TYPOGRAPHY TOKENS - INVARIANTS
   * ======================================== */
  --fontSize-xs: 12px;
  --fontSize-sm: 14px;
  --fontSize-base: 16px;
  --fontSize-lg: 18px;
  --fontSize-xl: 20px;
  --fontSize-2xl: 24px;
  --fontSize-3xl: 30px;
  
  --lineHeight-tight: 1.25;
  --lineHeight-normal: 1.5;
  --lineHeight-relaxed: 1.75;
  
  --fontWeight-normal: 400;
  --fontWeight-medium: 500;
  --fontWeight-semibold: 600;
  --fontWeight-bold: 700;
  
  /* Font scale (modifié par les préférences) */
  --font-scale: 1;
  
  /* ========================================
   * COLOR TOKENS - Définis par le thème
   * Ces valeurs sont des fallbacks
   * ======================================== */
  
  /* Background */
  --color-bg-canvas: #ffffff;
  --color-bg-surface: #f8fafc;
  --color-bg-subtle: #f1f5f9;
  --color-bg-inverse: #0f172a;
  
  /* Text */
  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted: #94a3b8;
  --color-text-inverse: #ffffff;
  --color-text-success: #16a34a;
  --color-text-warning: #d97706;
  --color-text-danger: #dc2626;
  --color-text-info: #0C8298;
  
  /* Border */
  --color-border-default: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-border-subtle: #f1f5f9;
  --color-border-focus: #1e3a5f;
  
  /* Action */
  --color-action-primary: #1e3a5f;
  --color-action-primaryHover: #2a4a73;
  --color-action-primaryActive: #152d4a;
  --color-action-secondary: #f1f5f9;
  --color-action-secondaryHover: #e2e8f0;
  --color-action-tertiaryHover: #f8fafc;
  
  /* Feedback */
  --color-feedback-success: #16a34a;
  --color-feedback-successSoft: #dcfce7;
  --color-feedback-warning: #d97706;
  --color-feedback-warningSoft: #fef3c7;
  --color-feedback-danger: #dc2626;
  --color-feedback-dangerSoft: #fee2e2;
  --color-feedback-info: #0C8298;
  --color-feedback-infoSoft: #dbeafe;
  
  /* Navigation */
  --color-nav-bg: #1e3a5f;
  --color-nav-text: rgba(255, 255, 255, 0.8);
  --color-nav-textActive: #ffffff;
  --color-nav-itemHover: rgba(255, 255, 255, 0.1);
  --color-nav-itemActive: rgba(255, 255, 255, 0.15);
  
  /* Table */
  --color-table-headerBg: #f8fafc;
  --color-table-rowHover: #f1f5f9;
  --color-table-rowSelected: rgba(30, 58, 95, 0.1);
  
  /* ========================================
   * SHADOW TOKENS - Définis par le thème
   * ======================================== */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* ========================================
 * DARK MODE DEFAULTS
 * ======================================== */
:root.dark,
[data-theme-mode="dark"] {
  --color-bg-canvas: #0a0a0a;
  --color-bg-surface: #18181b;
  --color-bg-subtle: #27272a;
  --color-bg-inverse: #fafafa;
  
  --color-text-primary: #fafafa;
  --color-text-secondary: #a1a1aa;
  --color-text-muted: #71717a;
  --color-text-inverse: #0a0a0a;
  --color-text-success: #4ade80;
  --color-text-warning: #fbbf24;
  --color-text-danger: #f87171;
  --color-text-info: #60a5fa;
  
  --color-border-default: #27272a;
  --color-border-strong: #3f3f46;
  --color-border-subtle: #18181b;
  
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
}

/* ========================================
 * DENSITY MODES
 * ======================================== */
[data-density="compact"] {
  --size-button-md: 36px;
  --size-input-md: 36px;
  --size-table-row: 36px;
  --spacing-4: 12px;
  --spacing-6: 16px;
}

/* ========================================
 * FONT SCALE
 * ======================================== */
[data-font-scale="large"] {
  --fontSize-xs: 14px;
  --fontSize-sm: 16px;
  --fontSize-base: 18px;
  --fontSize-lg: 20px;
  --fontSize-xl: 24px;
  --fontSize-2xl: 28px;
  --fontSize-3xl: 34px;
}

/* ========================================
 * REDUCED MOTION
 * ======================================== */
.reduce-motion,
.reduce-motion * {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* ========================================
 * HIGH CONTRAST MODE
 * ======================================== */
[data-contrast="high"] {
  --color-text-primary: #000000;
  --color-text-secondary: #1a1a1a;
  --color-border-default: #000000;
  --color-border-strong: #000000;
}

[data-contrast="high"].dark,
[data-contrast="high"][data-theme-mode="dark"] {
  --color-text-primary: #ffffff;
  --color-text-secondary: #e5e5e5;
  --color-border-default: #ffffff;
  --color-border-strong: #ffffff;
}

/* ========================================
 * FOCUS STYLES - Accessibilité
 * ======================================== */
*:focus-visible {
  outline: 2px solid #1e3a5f;
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* ========================================
 * BASE STYLES
 * ======================================== */
body {
  background-color: #ffffff;
  background-color: var(--color-bg-canvas);
  color: #0f172a;
  color: var(--color-text-primary);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: calc(16px * 1);
  font-size: calc(var(--fontSize-base) * var(--font-scale, 1));
  line-height: 1.5;
  line-height: var(--lineHeight-normal);
}

/* Tabular nums pour les montants */
.tabular-nums {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Alignement montants */
.text-right-amount {
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/**
 * "En refonte" placeholders — login banner + public home holding page.
 * Lives under design-system/tokens/ → exempt from design:token-authority guard.
 * Raw values allowed HERE ONLY. Consumers use these class names, never raw values.
 * Temporary (Frontend Design Reset): login + public site get a full redesign later.
 */

/* Non-blocking banner shown on the (still functional) login page. */
.redesign-banner{
  position:fixed;top:0;left:0;right:0;z-index:9999;text-align:center;
  font:600 12px/1.6 'Plus Jakarta Sans','DM Sans',system-ui,sans-serif;letter-spacing:.04em;
  padding:8px 14px;color:#0b1437;background:linear-gradient(90deg,#FFB547,#FFD27A);
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}

/* Public home holding page. */
.redesign-page{
  min-height:100vh;display:grid;place-items:center;padding:40px 24px;
  background:radial-gradient(120% 90% at 50% 0%,#101a3a,#0b1437);color:#eaeefb;
  font-family:'Plus Jakarta Sans','DM Sans',system-ui,sans-serif;text-align:center;
}
.redesign-card{
  max-width:560px;padding:40px 34px;border-radius:20px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);
}
.redesign-badge{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#FFB547;background:rgba(255,181,71,.12);padding:6px 12px;border-radius:999px;margin-bottom:18px;
}
.redesign-title{font-size:30px;font-weight:800;letter-spacing:-.5px;margin:0 0 12px;color:#fff}
.redesign-body{color:#97a3c4;font-size:15px;line-height:1.6;margin:0 0 22px}
.redesign-link{
  display:inline-block;font-weight:600;font-size:14px;color:#fff;text-decoration:none;
  padding:11px 18px;border-radius:999px;background:linear-gradient(135deg,#7551FF,#422AFB);
}

/**
 * Così v4 — GlassMaterial styles (Design 2031 Wave 1.4)
 * =========================================================
 * The five glass variants that implement principle #5 (Adaptive
 * materiality) of the Design 2031 manifesto. Each variant uses a
 * different combination of backdrop-filter, box-shadow, and border
 * to convey a different stakes level.
 *
 * All variants consume v4 CSS variables injected by AmbientCanvas,
 * which means they automatically pick up the current ambient stake,
 * time of day, and contrast preference without any prop plumbing.
 *
 * The `.liquid` variant animates a subtle gradient flow for
 * "live" data surfaces. It honors prefers-reduced-motion by
 * freezing the animation.
 */

/* -------------------------------------------------------------------
   Shared base — all variants build on this
   ------------------------------------------------------------------- */

.GlassMaterial_glass__kxe8t {
  position: relative;
  border-radius: 18px;
  border: 1px solid transparent;
  overflow: hidden;
  isolation: isolate;
  color: var(--v4-text-default);
  transition: border-color 200ms ease, transform 200ms ease;
}

/* -------------------------------------------------------------------
   Frost — classic glass, low-stakes default
   Soft blur, subtle inner highlight, 1px ghost border
   ------------------------------------------------------------------- */

.GlassMaterial_frost__v7eTA {
  background: color-mix(in oklab, var(--v4-surface-default) 45%, transparent);
  backdrop-filter: blur(32px) saturate(1.4);
  -webkit-backdrop-filter: blur(32px) saturate(1.4);
  border-color: color-mix(in oklab, var(--v4-border-default) 52%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in oklab, white 16%, transparent) inset,
    0 1px 0 0 color-mix(in oklab, white 28%, transparent) inset,
    0 8px 32px -8px rgba(0, 0, 0, 0.12),
    0 20px 60px -24px rgba(0, 0, 0, 0.10);
}

.GlassMaterial_frost__v7eTA::before {
  /* Iridescent top highlight — conveys glass concavity */
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 50%;
  background: linear-gradient(
    165deg,
    color-mix(in oklab, white 22%, transparent) 0%,
    color-mix(in oklab, var(--v4-accent-ghost) 14%, transparent) 40%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

.GlassMaterial_frost__v7eTA > * {
  position: relative;
  z-index: 1;
}

/* -------------------------------------------------------------------
   Clear — minimal, medium-stakes
   Very light blur, no visible border, for dense data surfaces
   where saturation of glass would be distracting
   ------------------------------------------------------------------- */

.GlassMaterial_clear__begsi {
  background: color-mix(in oklab, var(--v4-surface-default) 78%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* -------------------------------------------------------------------
   Solid — high-stakes, maximum readability
   No blur, strong border, crisp shadow. Used for actions that
   must be absolutely unambiguous (run payroll, close period)
   ------------------------------------------------------------------- */

.GlassMaterial_solid__Y59Pn {
  background: var(--v4-surface-default);
  border-color: var(--v4-border-default);
  box-shadow:
    0 0 0 1px var(--v4-border-default) inset,
    0 20px 56px -20px rgba(0, 0, 0, 0.2);
}

/* -------------------------------------------------------------------
   Liquid — live data surfaces
   Animated gradient flow to signal that content is updating in
   real time (e.g. payroll running, bank sync, CRDT sync)
   ------------------------------------------------------------------- */

.GlassMaterial_liquid__C5krW {
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--v4-accent-ghost) 50%, var(--v4-surface-default)) 0%,
    color-mix(in oklab, var(--v4-info-ghost) 20%, var(--v4-surface-default)) 25%,
    color-mix(in oklab, var(--v4-surface-default) 90%, transparent) 50%,
    color-mix(in oklab, var(--v4-accent-ghost) 30%, var(--v4-surface-default)) 75%,
    color-mix(in oklab, var(--v4-accent-ghost) 50%, var(--v4-surface-default)) 100%
  );
  background-size: 400% 400%;
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  border-color: color-mix(in oklab, var(--v4-accent-default) 40%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--v4-accent-default) 22%, transparent) inset,
    0 1px 0 0 color-mix(in oklab, white 14%, transparent) inset,
    0 8px 24px -8px color-mix(in oklab, var(--v4-accent-default) 28%, transparent),
    0 24px 60px -24px color-mix(in oklab, var(--v4-accent-default) 18%, transparent);
  animation: GlassMaterial_v4-liquid-flow__NRrRB 5s ease-in-out infinite;
}

@keyframes GlassMaterial_v4-liquid-flow__NRrRB {
  0%   { background-position: 0% 50%; }
  33%  { background-position: 50% 100%; }
  66%  { background-position: 100% 0%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .GlassMaterial_liquid__C5krW {
    animation: none;
    background-position: 0% 50%;
  }
}

/* -------------------------------------------------------------------
   Void — destructive, warning halo
   Dark backing, red-tinted border, red halo glow. Used for
   delete confirmations, revoke grants, cancel periods
   ------------------------------------------------------------------- */

.GlassMaterial_void__013dH {
  background: color-mix(in oklab, var(--v4-surface-inverse-default) 60%, transparent);
  backdrop-filter: blur(28px) saturate(0.85);
  -webkit-backdrop-filter: blur(28px) saturate(0.85);
  border-color: color-mix(in oklab, var(--v4-danger-default) 64%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--v4-danger-default) 40%, transparent) inset,
    0 8px 32px -8px color-mix(in oklab, var(--v4-danger-default) 44%, transparent),
    0 24px 80px -20px color-mix(in oklab, var(--v4-danger-default) 32%, transparent),
    0 0 120px -30px color-mix(in oklab, var(--v4-danger-default) 50%, transparent);
  color: color-mix(in oklab, white 94%, var(--v4-danger-default));
}

/* -------------------------------------------------------------------
   Hover + focus states — shared across variants
   ------------------------------------------------------------------- */

.GlassMaterial_interactive__Mtd\+e:hover {
  border-color: var(--v4-border-hover);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px color-mix(in oklab, white 10%, transparent) inset,
    0 12px 40px -10px rgba(0, 0, 0, 0.14),
    0 0 40px -16px color-mix(in oklab, var(--v4-accent-default) 16%, transparent);
}

.GlassMaterial_interactive__Mtd\+e:focus-visible {
  outline: none;
  border-color: color-mix(in oklab, var(--v4-accent-default) 60%, transparent);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--v4-accent-default) 28%, transparent),
    0 0 0 1px var(--v4-border-focus) inset,
    0 0 24px -6px color-mix(in oklab, var(--v4-accent-default) 20%, transparent);
}

/* Reduce motion: kill the transform transition */
@media (prefers-reduced-motion: reduce) {
  .GlassMaterial_glass__kxe8t,
  .GlassMaterial_interactive__Mtd\+e:hover {
    transition: none;
    transform: none;
  }
}

/**
 * Così v4 — Variable font loading (Design 2031 Wave 1.1)
 * =========================================================
 * Brand.ai Design 2031 uses two variable fonts:
 *
 *   1. Söhne Variable (Klim Type Foundry) for all text.
 *      Licensed font — must be self-hosted by the deployment.
 *      If the license file is not present at build time, the app
 *      gracefully falls back to Inter Variable (SIL OFL, free).
 *
 *   2. Azeret Mono (Displaay Type Foundry) for numeric / technical
 *      values like CHF amounts, AVS numbers, canton codes. Free
 *      under the SIL Open Font License.
 *
 * Both fonts are loaded with `font-display: swap` so the UI renders
 * immediately with the system fallback and upgrades progressively.
 * No flash of invisible text (FOIT).
 *
 * This file is imported once by the v4 AmbientCanvas primitive. It
 * does NOT affect the v3 design-system consumers — v3 continues to use whatever
 * fonts are loaded via the legacy `legacy-design-system.css`.
 */

/* -------------------------------------------------------------------
   Söhne Variable — primary text font (when license is available)
   ------------------------------------------------------------------- */

@font-face {
  font-family: 'Söhne Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local('Söhne Variable'),
       url('/fonts/soehne-var-latin.woff2') format('woff2-variations');
  font-feature-settings: 'ss01', 'cv11';
}

/* -------------------------------------------------------------------
   Inter Variable — free fallback when Söhne is not bundled
   Served from Google Fonts CDN with preconnect for fast handshake
   ------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local('Inter Variable'),
       url('https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2') format('woff2-variations');
}

/* -------------------------------------------------------------------
   Azeret Mono — numeric / technical font
   Open source, bundled in public/fonts/
   ------------------------------------------------------------------- */

@font-face {
  font-family: 'Azeret Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local('Azeret Mono'),
       url('/fonts/azeret-mono-var.woff2') format('woff2-variations');
  font-feature-settings: 'tnum', 'zero', 'ss01';
}

/* -------------------------------------------------------------------
   Base resets for v4 pages only
   Scoped to .v4-root so v3 pages are untouched
   ------------------------------------------------------------------- */

.v4-root {
  /* Force new font rendering inside v4 surfaces */
  font-family: 'Söhne Variable', 'Inter Variable', system-ui, -apple-system, sans-serif;
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.v4-root .mono,
.v4-root [data-mono="true"] {
  font-family: 'Azeret Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum', 'zero', 'ss01', "tnum";
}

/* -------------------------------------------------------------------
   Reduced motion respect — cannot be done from the motion engine
   for font-loading animations
   ------------------------------------------------------------------- */

/* -------------------------------------------------------------------
   Typographic signatures — Design 2031 Idée #22
   Semantic formatting based on data type
   ------------------------------------------------------------------- */

/* Currency amounts: tabular nums, slashed zero, old-style variants */
.v4-root [data-format="currency"],
.v4-root .v4-currency {
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: 'tnum', 'zero', 'ss01', tabular-nums slashed-zero;
  letter-spacing: 0.02em;
}

/* Dates: small-caps for month names */
.v4-root [data-format="date"],
.v4-root .v4-date {
  font-feature-settings: "smcp", "c2sc";
  font-variant-caps: all-small-caps;
  letter-spacing: 0.03em;
}

/* Percentages: tabular + tight tracking */
.v4-root [data-format="percent"],
.v4-root .v4-percent {
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* AVS / IBAN / BIC: mono with wide spacing for readability */
.v4-root [data-format="identity"],
.v4-root .v4-identity {
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-feature-settings: tabular-nums slashed-zero;
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: 0.06em;
  word-spacing: 0.1em;
}

/* -------------------------------------------------------------------
   Reduced motion respect
   ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .v4-root {
    font-optical-sizing: none;
  }
}

/* IntegraFloatingIslandsPage CSS - Phase 1 v4 port Liquid Swiss
   Scope strict sous .ifi-page. Mode plein ecran opt-in via .is-fullscreen. */

/* ── IFI SETTINGS-OVERRIDABLE DESIGN TOKENS ─────────────────────────────────
 * AES-001 (2026-06-03) — Token Authority Decision
 *
 * Override any value at runtime without a rebuild:
 *   :root { --ifi-radius-lg: 16px; --ifi-motion-hover: all 120ms ease; }
 * Tenant CSS, operator settings, or A/B configs can inject overrides here.
 *
 * Canonical defaults mirror tokens2036.ts (IFI authority source).
 * See frontend/src/design-system/v5/ifi-tokens.ts for JS-side access.
 * ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* Border radius */
  --ifi-radius-sm:   10px;
  --ifi-radius-md:   14px;
  --ifi-radius-lg:   20px;
  --ifi-radius-xl:   24px;
  --ifi-radius-full: 9999px;

  /* Spacing */
  --ifi-space-xs:  8px;
  --ifi-space-sm:  12px;
  --ifi-space-md:  20px;
  --ifi-space-lg:  28px;
  --ifi-space-xl:  40px;

  /* Motion — full transition shorthand, overridable as a unit */
  --ifi-motion-xfast:  all 100ms ease;
  --ifi-motion-focus:  all 150ms ease-out;
  --ifi-motion-hover:  all 200ms ease-out;
  --ifi-motion-base:   all 280ms ease;
  --ifi-motion-page:   all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --ifi-motion-expand: all 350ms ease;
  --ifi-motion-slow:   all 450ms ease;

  /* Text colors (Midnight Aurora dark-glass context) */
  --ifi-color-text-primary:   #e8eaf0;
  --ifi-color-text-secondary: rgba(200, 210, 240, 0.65);
  --ifi-color-text-tertiary:  rgba(200, 210, 240, 0.45);

  /* Accent and semantic colors */
  --ifi-color-accent:  #ffd500;
  --ifi-color-gold:    #ffd500;
  --ifi-color-surface: rgba(255, 255, 255, 0.06);
  --ifi-color-danger:  #e53e3e;
  --ifi-color-warning: #dd6b20;
  --ifi-color-success: #38a169;

  /* Font sizes */
  --ifi-font-meta:    11px;
  --ifi-font-body:    12px;
  --ifi-font-label:   12px;
  --ifi-font-section: 14px;
  --ifi-font-title:   16px;

  /* AES-002 — Semantic status colors (state-driven UI feedback) */
  --ifi-status-success: #047857;
  --ifi-status-warning: #b45309;
  --ifi-status-info:    #1d4ed8;
  --ifi-status-danger:  #b91c1c;
  --ifi-status-neutral: #6b7280;
  --ifi-status-success-surface-subtle: rgba(4,120,87,0.07); /* design-token-authority: allow */
  --ifi-status-success-border-soft: rgba(4,120,87,0.18); /* design-token-authority: allow */
  --ifi-status-warning-surface-subtle: rgba(180,83,9,0.07); /* design-token-authority: allow */
  --ifi-status-warning-border-soft: rgba(180,83,9,0.18); /* design-token-authority: allow */
  --ifi-status-info-surface-subtle: rgba(29,78,216,0.07); /* design-token-authority: allow */
  --ifi-status-info-border-soft: rgba(29,78,216,0.18); /* design-token-authority: allow */
  --ifi-status-danger-surface-subtle: rgba(185,28,28,0.07); /* design-token-authority: allow */
  --ifi-status-danger-border-soft: rgba(185,28,28,0.18); /* design-token-authority: allow */
  --ifi-status-neutral-surface-faint: rgba(107,114,128,0.06); /* design-token-authority: allow */
  --ifi-status-neutral-surface-subtle: rgba(107,114,128,0.07); /* design-token-authority: allow */
  --ifi-status-neutral-border-subtle: rgba(107,114,128,0.15); /* design-token-authority: allow */
  --ifi-status-neutral-border-soft: rgba(107,114,128,0.18); /* design-token-authority: allow */

  /* AES-002 — Category / filter palette (payroll period, dept, type) */
  --ifi-cat-indigo:  #2642B0;
  --ifi-cat-teal:    #1F7C60;
  --ifi-cat-amber:   #B86C1F;
  --ifi-cat-red:     #B81F26;
  --ifi-cat-purple:  #8E44AD;
  --ifi-cat-cyan:    #1F8FA6;
  --ifi-cat-crimson: #C2185B;
  --ifi-cat-gold:    #D49428;
  --ifi-cat-violet:  #6A4FBF;
  --ifi-cat-gray:    #6B7280;
  --ifi-cat-void:    #1A1F2A;
  --ifi-cat-muted:   #9CA3AF;
  --ifi-period-apprentis-surface: rgba(31,124,160,0.12); /* design-token-authority: allow */
  --ifi-period-apprentis-text: #1F7CA0; /* design-token-authority: allow */
  --ifi-period-cadres-bonus-surface: rgba(86,46,144,0.12); /* design-token-authority: allow */
  --ifi-period-cadres-bonus-text: #562E90; /* design-token-authority: allow */
  --ifi-period-thirteenth-salary-surface: rgba(184,148,40,0.14); /* design-token-authority: allow */
  --ifi-period-thirteenth-salary-text: #8E6B12; /* design-token-authority: allow */
  --ifi-period-overtime-surface: rgba(184,108,31,0.12); /* design-token-authority: allow */
  --ifi-period-overtime-text: var(--ifi-cat-amber); /* design-token-authority: allow */
  --ifi-period-final-settlement-surface: rgba(141,20,28,0.12); /* design-token-authority: allow */
  --ifi-period-final-settlement-text: #8D141C; /* design-token-authority: allow */
  --ifi-period-cross-border-surface: rgba(31,140,148,0.14); /* design-token-authority: allow */
  --ifi-period-cross-border-text: #1F8C94; /* design-token-authority: allow */
  --ifi-period-retro-corrections-surface: rgba(184,80,124,0.12); /* design-token-authority: allow */
  --ifi-period-retro-corrections-text: #B8507C; /* design-token-authority: allow */
  --ifi-period-exceptional-variables-surface: rgba(75,90,168,0.14); /* design-token-authority: allow */
  --ifi-period-exceptional-variables-text: #4B5AA8; /* design-token-authority: allow */
  --ifi-period-simulation-surface: rgba(60,68,80,0.14); /* design-token-authority: allow */
  --ifi-period-simulation-text: #3C4450; /* design-token-authority: allow */
  --ifi-contract-alert-surface: var(--ifi-period-cadres-bonus-surface); /* design-token-authority: allow */
  --ifi-contract-alert-text: var(--ifi-period-cadres-bonus-text); /* design-token-authority: allow */

  /* C-2 — IFI cockpit light defaults for referenced token authorities.
     These are additive root fallbacks; .ifi-page runtime overrides remain intact. */
  --ifi-graphite: #111317; /* design-token-authority: allow */
  --ifi-graphite-2: #1A1D22; /* design-token-authority: allow */
  --ifi-panel-graphite: #20242B; /* design-token-authority: allow */
  --ifi-ivory: #F5F3EE; /* design-token-authority: allow */
  --ifi-stone: #D8D3C9; /* design-token-authority: allow */
  --ifi-muted: #8E918B; /* design-token-authority: allow */
  --ifi-gold: #FFD500; /* design-token-authority: allow */
  --ifi-gold-strong: #8A6E2E; /* design-token-authority: allow */
  --ifi-soft-gold: #D6B16A; /* design-token-authority: allow */
  --ifi-on-strong: #F5F7FA; /* design-token-authority: allow */
  --ifi-focus-on-strong: var(--ifi-on-strong);
  --ifi-on-accent: #FFFFFF; /* design-token-authority: allow */
  --ifi-control-surface: #FFFFFF; /* design-token-authority: allow */
  --ifi-elevated-surface: #FFFFFF; /* design-token-authority: allow */
  --ifi-placeholder-surface: #FFFFFF; /* design-token-authority: allow */
  --ifi-preview-surface: #FFFFFF; /* design-token-authority: allow */
  --ifi-panel-bg-soft: rgba(0,0,0,0.03); /* design-token-authority: allow */
  --ifi-badge-soft: rgba(0,0,0,0.04); /* design-token-authority: allow */
  --ifi-divider: rgba(0,0,0,0.08); /* design-token-authority: allow */
  --ifi-gold-surface-quiet: rgba(255,213,0, 0.04); /* design-token-authority: allow */
  --ifi-gold-surface-subtle: rgba(255,213,0, 0.05); /* design-token-authority: allow */
  --ifi-gold-surface-soft: rgba(255,213,0, 0.06); /* design-token-authority: allow */
  --ifi-gold-surface-hover: rgba(255,213,0, 0.08); /* design-token-authority: allow */
  --ifi-gold-surface-row-hover: rgba(255,213,0, 0.09); /* design-token-authority: allow */
  --ifi-gold-surface-active: rgba(255,213,0, 0.10); /* design-token-authority: allow */
  --ifi-gold-surface-selected: rgba(255,213,0, 0.12); /* design-token-authority: allow */
  --ifi-gold-surface-pressed: rgba(255,213,0, 0.14); /* design-token-authority: allow */
  --ifi-gold-surface-strong: rgba(255,213,0, 0.15); /* design-token-authority: allow */
  --ifi-gold-surface-ambient: rgba(255,213,0, 0.18); /* design-token-authority: allow */
  --ifi-gold-surface-emphasis: rgba(255,213,0, 0.20); /* design-token-authority: allow */
  --ifi-gold-scrollbar-surface-soft: rgba(255,213,0, 0.25); /* design-token-authority: allow */
  --ifi-gold-scrollbar-surface: rgba(255,213,0, 0.30); /* design-token-authority: allow */
  --ifi-gold-surface-disabled: rgba(255,213,0, 0.40); /* design-token-authority: allow */
  --ifi-gold-scrollbar-hover-surface: rgba(255,213,0, 0.45); /* design-token-authority: allow */
  --ifi-gold-scrollbar-hover-surface-strong: rgba(255,213,0, 0.50); /* design-token-authority: allow */
  --ifi-gold-chip-hover-surface: linear-gradient(165deg, rgba(255,213,0,0.12) 0%, rgba(255,213,0,0.22) 100%); /* design-token-authority: allow */
  --ifi-gold-chart-bar-surface: linear-gradient(90deg, rgba(255,213,0, 0.65), rgba(255,213,0, 0.85)); /* design-token-authority: allow */
  --ifi-gold-border-faint: rgba(255,213,0, 0.14); /* design-token-authority: allow */
  --ifi-gold-border-subtle: rgba(255,213,0, 0.18); /* design-token-authority: allow */
  --ifi-gold-border-soft: rgba(255,213,0, 0.20); /* design-token-authority: allow */
  --ifi-gold-border-muted: rgba(255,213,0, 0.25); /* design-token-authority: allow */
  --ifi-gold-border-raised: rgba(255,213,0, 0.26); /* design-token-authority: allow */
  --ifi-gold-border-dropzone: rgba(255,213,0, 0.30); /* design-token-authority: allow */
  --ifi-gold-border-interactive: rgba(255,213,0, 0.40); /* design-token-authority: allow */
  --ifi-gold-border-edit: rgba(255,213,0, 0.45); /* design-token-authority: allow */
  --ifi-gold-border-strong: rgba(255,213,0, 0.50); /* design-token-authority: allow */
  --ifi-gold-border-focus: rgba(255,213,0, 0.55); /* design-token-authority: allow */
  --ifi-gold-border-active: rgba(255,213,0, 0.65); /* design-token-authority: allow */
  --ifi-gold-border-fab: rgba(255,213,0, 0.42); /* design-token-authority: allow */
  --ifi-gold-border-emphasis: rgba(255,213,0, 0.85); /* design-token-authority: allow */
  --ifi-gold-shadow-alert: rgba(255,213,0,0.40); /* design-token-authority: allow */
  --ifi-gold-shadow-chip-hover: rgba(255,213,0,0.32); /* design-token-authority: allow */
  --ifi-gold-shadow-pulse-start: rgba(255,213,0, 0.55); /* design-token-authority: allow */
  --ifi-gold-shadow-pulse-mid: rgba(255,213,0, 0.10); /* design-token-authority: allow */
  --ifi-gold-shadow-pulse-end: rgba(255,213,0, 0); /* design-token-authority: allow */
  --ifi-gold-shadow-send-soft: rgba(255,213,0,0.35); /* design-token-authority: allow */
  --ifi-gold-shadow-send-ambient: rgba(255,213,0,0.20); /* design-token-authority: allow */
  --ifi-gold-shadow-focus-subtle: rgba(255,213,0, 0.08); /* design-token-authority: allow */
  --ifi-gold-shadow-focus-soft: rgba(255,213,0, 0.10); /* design-token-authority: allow */
  --ifi-gold-shadow-brand-soft: rgba(255,213,0,0.20); /* design-token-authority: allow */
  --ifi-gold-shadow-inset-strong: rgba(255,213,0,0.70); /* design-token-authority: allow */
  --ifi-gold-shadow-chip-ring: rgba(255,213,0,0.95); /* design-token-authority: allow */
  --ifi-gold-shadow-chip-glow: rgba(255,213,0,0.14); /* design-token-authority: allow */
  --ifi-gold-shadow-inset-emphasis: rgba(255,213,0,0.80); /* design-token-authority: allow */
  --ifi-gold-text-muted: rgba(255,213,0, 0.65); /* design-token-authority: allow */
  --ifi-graphite-surface-wisp: rgba(26,31,42,0.025); /* design-token-authority: allow */
  --ifi-graphite-surface-ghost: rgba(26,31,42,0.03); /* design-token-authority: allow */
  --ifi-graphite-surface-quiet: rgba(26,31,42,0.04); /* design-token-authority: allow */
  --ifi-graphite-surface-subtle: rgba(26,31,42,0.05); /* design-token-authority: allow */
  --ifi-graphite-surface-soft: rgba(26,31,42,0.08); /* design-token-authority: allow */
  --ifi-graphite-surface-hover: rgba(26,31,42,0.10); /* design-token-authority: allow */
  --ifi-graphite-modal-backdrop-surface: rgba(26,31,42,0.45); /* design-token-authority: allow */
  --ifi-graphite-brand-mark-surface: linear-gradient(180deg, var(--ifi-cat-void), #0F131A); /* design-token-authority: allow */
  --ifi-graphite-brand-pebble-surface: linear-gradient(180deg, var(--ifi-cat-void) 0%, #0F131A 100%); /* design-token-authority: allow */
  --ifi-graphite-table-head-surface: linear-gradient(to bottom, rgba(26,31,42,0.10), rgba(26,31,42,0.02)); /* design-token-authority: allow */
  --ifi-graphite-table-foot-surface: linear-gradient(to top, rgba(26,31,42,0.08), rgba(26,31,42,0.02)); /* design-token-authority: allow */
  --ifi-graphite-night-glass-surface: rgba(17,19,23,0.76); /* design-token-authority: allow */
  --ifi-graphite-tablist-surface: rgba(17,19,23,0.06); /* design-token-authority: allow */
  --ifi-graphite-border-hairline: rgba(26,31,42,0.05); /* design-token-authority: allow */
  --ifi-graphite-border-faint: rgba(26,31,42,0.06); /* design-token-authority: allow */
  --ifi-graphite-border-quiet: rgba(26,31,42,0.08); /* design-token-authority: allow */
  --ifi-graphite-border-subtle: rgba(26,31,42,0.10); /* design-token-authority: allow */
  --ifi-graphite-border-soft: rgba(26,31,42,0.12); /* design-token-authority: allow */
  --ifi-graphite-border-muted: rgba(26,31,42,0.14); /* design-token-authority: allow */
  --ifi-graphite-border-medium: rgba(26,31,42,0.18); /* design-token-authority: allow */
  --ifi-graphite-border-strong: rgba(26,31,42,0.20); /* design-token-authority: allow */
  --ifi-graphite-border-dashed: rgba(26,31,42,0.22); /* design-token-authority: allow */
  --ifi-graphite-border-hover: rgba(26,31,42,0.32); /* design-token-authority: allow */
  --ifi-panel-graphite-border-subtle: rgba(32,36,43,0.10); /* design-token-authority: allow */
  --ifi-panel-graphite-border-soft: rgba(32,36,43,0.12); /* design-token-authority: allow */
  --ifi-panel-graphite-border-muted: rgba(32,36,43,0.14); /* design-token-authority: allow */
  --ifi-graphite-shadow-hairline: rgba(26,31,42,0.03); /* design-token-authority: allow */
  --ifi-graphite-shadow-whisper: rgba(26,31,42,0.04); /* design-token-authority: allow */
  --ifi-graphite-shadow-faint: rgba(26,31,42,0.06); /* design-token-authority: allow */
  --ifi-graphite-shadow-soft: rgba(26,31,42,0.07); /* design-token-authority: allow */
  --ifi-graphite-shadow-quiet: rgba(26,31,42,0.08); /* design-token-authority: allow */
  --ifi-graphite-shadow-subtle: rgba(26,31,42,0.10); /* design-token-authority: allow */
  --ifi-graphite-shadow-muted: rgba(26,31,42,0.12); /* design-token-authority: allow */
  --ifi-graphite-shadow-raised: rgba(26,31,42,0.14); /* design-token-authority: allow */
  --ifi-graphite-shadow-float: rgba(26,31,42,0.15); /* design-token-authority: allow */
  --ifi-graphite-shadow-depth: rgba(26,31,42,0.18); /* design-token-authority: allow */
  --ifi-graphite-shadow-strong: rgba(26,31,42,0.20); /* design-token-authority: allow */
  --ifi-graphite-shadow-heavy: rgba(26,31,42,0.22); /* design-token-authority: allow */
  --ifi-graphite-shadow-dramatic: rgba(26,31,42,0.30); /* design-token-authority: allow */
  --ifi-graphite-shadow-maximum: rgba(26,31,42,0.32); /* design-token-authority: allow */
  --ifi-night-shadow-soft: rgba(17,19,23,0.16); /* design-token-authority: allow */
  --ifi-night-shadow-medium: rgba(17,19,23,0.18); /* design-token-authority: allow */
  --ifi-night-shadow-strong: rgba(17,19,23,0.22); /* design-token-authority: allow */
  --ifi-bell-badge-alert-shadow: 0 0 0 2px var(--ifi-ivory-highlight-ring), 0 0 8px rgba(184,92,92,0.5); /* design-token-authority: allow */
  --ifi-live-dot-ring-shadow: 0 0 0 3px rgba(31,124,80,0.15); /* design-token-authority: allow */
  --ifi-luna-alert-shadow: 0 1px 0 var(--ifi-ivory-highlight-medium) inset, 0 0 0 3px rgba(212,148,40,0.25), 0 0 14px rgba(212,148,40,0.30), 0 1px 4px var(--ifi-gold-shadow-alert); /* design-token-authority: allow */
  --ifi-luna-alert-pulse-peak-shadow: 0 1px 0 var(--ifi-ivory-highlight-medium) inset, 0 0 0 4px rgba(212,148,40,0.18), 0 0 20px rgba(212,148,40,0.25), 0 1px 4px var(--ifi-gold-shadow-alert); /* design-token-authority: allow */
  --ifi-tooltip-elevation-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.06); /* design-token-authority: allow */
  --ifi-dossier-focus-shadow: 0 0 0 0 rgba(184,31,38,0.40); /* design-token-authority: allow */
  --ifi-dossier-focus-pulse-start-shadow: 0 0 0 0 rgba(184,31,38,0.45); /* design-token-authority: allow */
  --ifi-dossier-focus-pulse-mid-shadow: 0 0 0 10px rgba(184,31,38,0.08); /* design-token-authority: allow */
  --ifi-dossier-focus-pulse-end-shadow: 0 0 0 14px rgba(184,31,38,0); /* design-token-authority: allow */
  --ifi-night-topbar-elevation-shadow: 0 1px 0 var(--ifi-ivory-highlight-faint) inset, 0 18px 54px rgba(0,0,0,0.30); /* design-token-authority: allow */
  --ifi-night-live-dot-ring-shadow: 0 0 0 4px rgba(143,169,154,0.18); /* design-token-authority: allow */
  --ifi-night-panel-elevation-shadow: 0 1px 0 var(--ifi-ivory-highlight-strong) inset, 0 24px 70px rgba(0,0,0,0.32); /* design-token-authority: allow */
  --ifi-night-luna-avatar-elevation-shadow: 0 0 0 3px var(--ifi-gold-shadow-focus-subtle), 0 14px 34px rgba(0,0,0,0.26); /* design-token-authority: allow */
  --ifi-night-luna-input-elevation-shadow: 0 16px 48px rgba(0,0,0,0.22); /* design-token-authority: allow */
  --ifi-night-support-fab-elevation-shadow: 0 16px 44px rgba(0,0,0,0.28), 0 0 0 4px var(--ifi-gold-shadow-focus-subtle); /* design-token-authority: allow */
  --ifi-graphite-text-faint: rgba(26,31,42,0.50); /* design-token-authority: allow */
  --ifi-graphite-text-muted: rgba(26,31,42,0.55); /* design-token-authority: allow */
  --ifi-graphite-text-soft: rgba(26,31,42,0.60); /* design-token-authority: allow */
  --ifi-graphite-text-secondary: rgba(26,31,42,0.65); /* design-token-authority: allow */
  --ifi-graphite-text-quiet: rgba(26,31,42,0.70); /* design-token-authority: allow */
  --ifi-graphite-text-strong: rgba(26,31,42,0.85); /* design-token-authority: allow */
  --ifi-graphite-text-emphasis: rgba(26,31,42,0.92); /* design-token-authority: allow */
  --ifi-night-text-muted: rgba(17,19,23,0.62); /* design-token-authority: allow */
  --ifi-night-text-secondary: rgba(17,19,23,0.66); /* design-token-authority: allow */
  --ifi-ivory-surface-faint: rgba(255,255,255,0.18); /* design-token-authority: allow */
  --ifi-ivory-surface-whisper: rgba(255,255,255,0.45); /* design-token-authority: allow */
  --ifi-ivory-surface-muted: rgba(255,255,255,0.48); /* design-token-authority: allow */
  --ifi-ivory-surface-soft: rgba(255,255,255,0.55); /* design-token-authority: allow */
  --ifi-ivory-surface-medium: rgba(255,255,255,0.62); /* design-token-authority: allow */
  --ifi-ivory-surface-raised: rgba(255,255,255,0.65); /* design-token-authority: allow */
  --ifi-ivory-surface-strong: rgba(255,255,255,0.85); /* design-token-authority: allow */
  --ifi-ivory-surface-shell: rgba(255,255,255,0.92); /* design-token-authority: allow */
  --ifi-ivory-surface-emphasis: rgba(255,255,255,0.95); /* design-token-authority: allow */
  --ifi-ivory-surface-solid: rgba(255,255,255,0.98); /* design-token-authority: allow */
  --ifi-ivory-island-surface: linear-gradient(165deg, rgba(255,255,255,0.99), rgba(248,251,255,0.94)); /* design-token-authority: allow */
  --ifi-stone-panel-head-surface: linear-gradient(180deg, rgba(245,243,238,0.98), rgba(225,220,210,0.94)); /* design-token-authority: allow */
  --ifi-stone-panel-body-surface: linear-gradient(180deg, rgba(245,243,238,0.98), rgba(235,231,222,0.96)); /* design-token-authority: allow */
  --ifi-stone-luna-surface: rgba(245,243,238,0.95); /* design-token-authority: allow */
  --ifi-stone-input-surface: rgba(245,243,238,0.96); /* design-token-authority: allow */
  --ifi-stone-support-shell-surface: linear-gradient(180deg, rgba(245,243,238,0.97), rgba(232,228,219,0.94)); /* design-token-authority: allow */
  --ifi-stone-cockpit-vein-surface: linear-gradient(90deg, rgba(245,243,238,0.04), transparent 28%, transparent 72%, var(--ifi-gold-surface-subtle)); /* design-token-authority: allow */
  --ifi-stone-cockpit-glow-surface: radial-gradient(ellipse 70% 42% at 50% 100%, rgba(216,211,201,0.10), transparent 60%); /* design-token-authority: allow */
  --ifi-stone-luna-panel-surface: linear-gradient(180deg, rgba(245,243,238,0.94), rgba(232,228,219,0.90)); /* design-token-authority: allow */
  --ifi-ivory-highlight-faint: rgba(255,255,255,0.05); /* design-token-authority: allow */
  --ifi-ivory-highlight-quiet: rgba(255,255,255,0.10); /* design-token-authority: allow */
  --ifi-ivory-highlight-soft: rgba(255,255,255,0.20); /* design-token-authority: allow */
  --ifi-ivory-highlight-medium: rgba(255,255,255,0.30); /* design-token-authority: allow */
  --ifi-ivory-highlight-brand: rgba(255,255,255,0.36); /* design-token-authority: allow */
  --ifi-ivory-highlight-strong: rgba(255,255,255,0.75); /* design-token-authority: allow */
  --ifi-ivory-highlight-ring: rgba(255,255,255,0.95); /* design-token-authority: allow */
  --ifi-stone-text-muted: rgba(245,243,238,0.68); /* design-token-authority: allow */
  --ifi-stone-text-strong: rgba(245,243,238,0.82); /* design-token-authority: allow */
  --ifi-sage: #8FA99A; /* design-token-authority: allow */
  --ifi-danger: #B85C5C; /* design-token-authority: allow */
  --ifi-success: var(--ifi-status-success);
  --ifi-danger-surface-subtle: rgba(184,92,92,0.06); /* design-token-authority: allow */
  --ifi-danger-surface-soft: rgba(184,92,92,0.10); /* design-token-authority: allow */
  --ifi-critical-surface-faint: rgba(184,31,38,0.06); /* design-token-authority: allow */
  --ifi-critical-surface-quiet: rgba(184,31,38,0.08); /* design-token-authority: allow */
  --ifi-critical-surface-soft: rgba(184,31,38,0.10); /* design-token-authority: allow */
  --ifi-critical-surface-hover: rgba(184,31,38,0.16); /* design-token-authority: allow */
  --ifi-critical-border-soft: rgba(184,31,38,0.30); /* design-token-authority: allow */
  --ifi-critical-border-strong: rgba(184,31,38,0.40); /* design-token-authority: allow */
  --ifi-critical-text-muted: rgba(184,31,38,0.55); /* design-token-authority: allow */
  --ifi-critical-text-soft: rgba(184,31,38,0.65); /* design-token-authority: allow */
  --ifi-warning-surface-subtle: rgba(184,108,31,0.06); /* design-token-authority: allow */
  --ifi-warning-surface-soft: rgba(184,108,31,0.12); /* design-token-authority: allow */
  --ifi-warning-gold-surface-quiet: rgba(212,148,40,0.10); /* design-token-authority: allow */
  --ifi-warning-gold-surface-soft: rgba(212,148,40,0.12); /* design-token-authority: allow */
  --ifi-warning-gold-surface-hover: rgba(212,148,40,0.18); /* design-token-authority: allow */
  --ifi-warning-gold-border-soft: rgba(212,148,40,0.30); /* design-token-authority: allow */
  --ifi-warning-gold-border-strong: rgba(212,148,40,0.32); /* design-token-authority: allow */
  --ifi-warning-text-strong: #92621D; /* design-token-authority: allow */
  --ifi-info-surface-soft: rgba(31,124,160,0.12); /* design-token-authority: allow */
  --ifi-info-text-strong: #1F7CA0; /* design-token-authority: allow */
  --ifi-success-surface-subtle: rgba(31,124,80,0.06); /* design-token-authority: allow */
  --ifi-success-surface-soft: rgba(31,124,80,0.10); /* design-token-authority: allow */
  --ifi-success-surface-hover: rgba(31,124,80,0.14); /* design-token-authority: allow */
  --ifi-success-border-live: rgba(4,120,87,0.28); /* design-token-authority: allow */
  --ifi-sage-surface-subtle: rgba(31,124,96,0.06); /* design-token-authority: allow */
  --ifi-sage-surface-quiet: rgba(31,124,96,0.08); /* design-token-authority: allow */
  --ifi-sage-surface-soft: rgba(31,124,96,0.10); /* design-token-authority: allow */
  --ifi-sage-border-soft: rgba(31,124,96,0.20); /* design-token-authority: allow */
  --ifi-sage-border-strong: rgba(31,124,96,0.32); /* design-token-authority: allow */
  --ifi-sage-border-emphasis: rgba(31,124,96,0.55); /* design-token-authority: allow */
  --ifi-sage-text-strong: rgba(31,124,96,0.85); /* design-token-authority: allow */
  --ifi-neutral-surface-soft: rgba(107,114,128,0.10); /* design-token-authority: allow */
  --ifi-neutral-surface-muted: rgba(107,114,128,0.12); /* design-token-authority: allow */
  --ifi-neutral-border-soft: rgba(107,114,128,0.28); /* design-token-authority: allow */
  --ifi-neutral-blue-surface-soft: rgba(102,112,130,0.12); /* design-token-authority: allow */
  --ifi-neutral-blue-text-strong: rgba(70,80,98,0.95); /* design-token-authority: allow */
  --ifi-neutral-blue-text-muted: rgba(102,112,130,0.85); /* design-token-authority: allow */
  --ifi-kpi-danger-surface: linear-gradient(180deg, var(--ifi-on-accent), var(--ifi-danger-surface-subtle)); /* design-token-authority: allow */
  --ifi-kpi-warning-surface: linear-gradient(180deg, var(--ifi-on-accent), var(--ifi-warning-surface-subtle)); /* design-token-authority: allow */
  --ifi-kpi-success-surface: linear-gradient(180deg, var(--ifi-on-accent), var(--ifi-success-surface-subtle)); /* design-token-authority: allow */
  --ifi-kpi-status-border-width: 3px; /* design-token-authority: allow */
  --ifi-kpi-status-padding-left: 12px; /* design-token-authority: allow */
  --ifi-day-backdrop-warm-surface: radial-gradient(ellipse 60% 55% at 22% 18%, rgba(255,253,247,0.55) 0%, transparent 55%); /* design-token-authority: allow */
  --ifi-day-backdrop-lilac-surface: radial-gradient(ellipse 55% 65% at 78% 72%, rgba(232,224,242,0.40) 0%, transparent 60%); /* design-token-authority: allow */
  --ifi-day-backdrop-base-surface: linear-gradient(180deg, #DDE3ED 0%, #B8C4D8 100%); /* design-token-authority: allow */
  --ifi-luna-avatar-core-surface: radial-gradient(circle at 30% 30%, var(--ifi-soft-gold) 0%, var(--ifi-graphite) 50%, #1A2D80 100%); /* design-token-authority: allow */
  --ifi-sidecar-glass-surface: rgba(245, 247, 250, 0.14); /* design-token-authority: allow */
  --ifi-night-glass-strong-surface: linear-gradient(180deg, rgba(245,243,238,0.96) 0%, rgba(232,228,219,0.90) 100%); /* design-token-authority: allow */
  --ifi-night-sage-ambient-surface: radial-gradient(circle at 22% 88%, rgba(143,169,154,0.14), transparent 34%); /* design-token-authority: allow */
  --ifi-glass-strong: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.96) 50%, rgba(216,226,242,0.92) 100%); /* design-token-authority: allow */
  --ifi-border-subtle: 0.5px solid rgba(26,31,42,0.14); /* design-token-authority: allow */
  --ifi-border-medium: 0.5px solid rgba(26,31,42,0.20); /* design-token-authority: allow */
  --ifi-sh-inset: 0 0.5px 0 rgba(255,255,255,1) inset; /* design-token-authority: allow */
  --ifi-sh-contact: 0 1px 3px rgba(26,31,42,0.10); /* design-token-authority: allow */
  --ifi-sh-float-sm: 0 6px 18px rgba(26,31,42,0.12); /* design-token-authority: allow */
  --ifi-sh-float-md: 0 16px 36px rgba(26,31,42,0.16); /* design-token-authority: allow */
  --ifi-sh-float-lg: 0 24px 48px rgba(26,31,42,0.20); /* design-token-authority: allow */

  /* AES-002 — Payroll contribution domain palette */
  --ifi-domain-avs:  #047857;
  --ifi-domain-ac:   #1d4ed8;
  --ifi-domain-lpp:  #6366f1;
  --ifi-domain-laa:  #ea580c;
  --ifi-domain-ijm:  #06b6d4;
  --ifi-domain-caf:  #d946ef;
  --ifi-domain-is:   #dc2626;
  --ifi-domain-avs-surface-faint: rgba(4,120,87,0.06); /* design-token-authority: allow */
  --ifi-domain-avs-border-subtle: rgba(4,120,87,0.15); /* design-token-authority: allow */
  --ifi-domain-ac-surface-faint: rgba(29,78,216,0.06); /* design-token-authority: allow */
  --ifi-domain-ac-border-subtle: rgba(29,78,216,0.15); /* design-token-authority: allow */
  --ifi-domain-lpp-surface-faint: rgba(99,102,241,0.06); /* design-token-authority: allow */
  --ifi-domain-lpp-border-subtle: rgba(99,102,241,0.15); /* design-token-authority: allow */
  --ifi-domain-laa-surface-faint: rgba(234,88,12,0.06); /* design-token-authority: allow */
  --ifi-domain-laa-border-subtle: rgba(234,88,12,0.15); /* design-token-authority: allow */
  --ifi-domain-ijm-surface-faint: rgba(6,182,212,0.06); /* design-token-authority: allow */
  --ifi-domain-ijm-border-subtle: rgba(6,182,212,0.15); /* design-token-authority: allow */
  --ifi-domain-caf-surface-faint: rgba(217,70,239,0.06); /* design-token-authority: allow */
  --ifi-domain-caf-border-subtle: rgba(217,70,239,0.15); /* design-token-authority: allow */
  --ifi-domain-is-surface-faint: rgba(220,38,38,0.06); /* design-token-authority: allow */
  --ifi-domain-is-border-subtle: rgba(220,38,38,0.15); /* design-token-authority: allow */

  /* C-6 — Payroll legal values neutral/info chrome surfaces */
  --ifi-plv-control-surface: #FFFFFF; /* design-token-authority: allow */
  --ifi-plv-control-border: rgba(0,0,0,0.12); /* design-token-authority: allow */
  --ifi-plv-row-divider: rgba(0,0,0,0.05); /* design-token-authority: allow */
  --ifi-plv-row-hover-surface: rgba(0,0,0,0.02); /* design-token-authority: allow */
  --ifi-plv-row-selected-surface: rgba(29,78,216,0.04); /* design-token-authority: allow */
  --ifi-plv-value-surface: rgba(0,0,0,0.01); /* design-token-authority: allow */
  --ifi-plv-value-hover-surface: rgba(29,78,216,0.08); /* design-token-authority: allow */
  --ifi-plv-action-info-hover-surface: rgba(29,78,216,0.15); /* design-token-authority: allow */
  --ifi-plv-action-accent-hover-surface: rgba(217,70,239,0.15); /* design-token-authority: allow */
  --ifi-plv-action-danger-hover-surface: rgba(185,28,28,0.15); /* design-token-authority: allow */
  --ifi-plv-summary-card-surface: rgba(0,0,0,0.02); /* design-token-authority: allow */
  --ifi-plv-summary-accent-border: var(--ifi-domain-caf);
  --ifi-plv-summary-accent-border-soft: rgba(217,70,239,0.4); /* design-token-authority: allow */
  --ifi-plv-summary-accent-border-hover: rgba(217,70,239,0.6); /* design-token-authority: allow */
  --ifi-plv-summary-accent-hover-surface: rgba(217,70,239,0.08); /* design-token-authority: allow */
  --ifi-plv-modal-backdrop-surface: rgba(0,0,0,0.25); /* design-token-authority: allow */
  --ifi-plv-modal-backdrop-strong-surface: rgba(0,0,0,0.3); /* design-token-authority: allow */
  --ifi-plv-modal-surface: #FFFFFF; /* design-token-authority: allow */
  --ifi-plv-modal-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); /* design-token-authority: allow */
  --ifi-plv-modal-control-border: rgba(0,0,0,0.15); /* design-token-authority: allow */
  --ifi-plv-modal-control-border-strong: rgba(0,0,0,0.2); /* design-token-authority: allow */
  --ifi-plv-modal-danger-surface: rgba(185,28,28,0.08); /* design-token-authority: allow */
  --ifi-plv-modal-danger-border: rgba(185,28,28,0.2); /* design-token-authority: allow */
  --ifi-plv-modal-info-surface: rgba(96,165,250,0.08); /* design-token-authority: allow */
  --ifi-plv-modal-info-border: rgba(96,165,250,0.2); /* design-token-authority: allow */
  --ifi-plv-modal-success-surface: rgba(16,185,129,0.08); /* design-token-authority: allow */
  --ifi-plv-modal-success-border: rgba(16,185,129,0.3); /* design-token-authority: allow */
  --ifi-plv-modal-muted-surface: rgba(0,0,0,0.04); /* design-token-authority: allow */
  --ifi-plv-modal-disabled-surface: rgba(209,213,219,1); /* design-token-authority: allow */
  --ifi-plv-operational-year-neutral-border: rgba(0,0,0,0.1); /* design-token-authority: allow */
  --ifi-plv-operational-year-selected-surface: rgba(29,78,216,0.09); /* design-token-authority: allow */
  --ifi-plv-operational-export-surface: rgba(29,78,216,0.06); /* design-token-authority: allow */
  --ifi-plv-operational-export-running-surface: rgba(29,78,216,0.12); /* design-token-authority: allow */
  --ifi-plv-operational-export-border: rgba(29,78,216,0.4); /* design-token-authority: allow */
  --ifi-plv-operational-import-surface: rgba(34,197,94,0.06); /* design-token-authority: allow */
  --ifi-plv-operational-import-border: rgba(34,197,94,0.4); /* design-token-authority: allow */
  --ifi-plv-operational-success-surface: rgba(4,120,87,0.06); /* design-token-authority: allow */
  --ifi-plv-operational-success-border: rgba(4,120,87,0.15); /* design-token-authority: allow */
  --ifi-plv-operational-danger-surface: rgba(185,28,28,0.06); /* design-token-authority: allow */
  --ifi-plv-operational-danger-border: rgba(185,28,28,0.15); /* design-token-authority: allow */
  --ifi-plv-operational-inspector-surface: var(--ifi-glass-strong);
  --ifi-plv-operational-inspector-border: rgba(0,0,0,0.08); /* design-token-authority: allow */
  --ifi-plv-operational-inspector-shadow: var(--ifi-sh-float-md);
  --ifi-plv-operational-import-modal-shadow: 0 20px 60px rgba(0,0,0,0.15); /* design-token-authority: allow */

  /* C-6 - clarification assistance chrome surfaces */
  --ifi-clarification-card-surface: rgba(20,22,32,0.82); /* design-token-authority: allow */
  --ifi-clarification-card-border: rgba(255,255,255,0.10); /* design-token-authority: allow */
  --ifi-clarification-card-shadow: 0 12px 32px rgba(0,0,0,0.28), 0 0 0 1px rgba(129,140,248,0.10); /* design-token-authority: allow */
  --ifi-clarification-divider-surface: rgba(255,255,255,0.06); /* design-token-authority: allow */
  --ifi-clarification-transparent-surface: transparent; /* design-token-authority: allow */
  --ifi-clarification-button-border: rgba(255,255,255,0.12); /* design-token-authority: allow */
  --ifi-clarification-details-border: rgba(255,255,255,0.05); /* design-token-authority: allow */
  --ifi-clarification-pre-surface: rgba(0,0,0,0.30); /* design-token-authority: allow */
  --ifi-clarification-pre-border: rgba(255,255,255,0.04); /* design-token-authority: allow */
  --ifi-clarification-history-trigger-surface: rgba(255,255,255,0.04); /* design-token-authority: allow */
  --ifi-clarification-history-trigger-border: rgba(255,255,255,0.08); /* design-token-authority: allow */
  --ifi-clarification-history-card-surface: rgba(20,22,32,0.85); /* design-token-authority: allow */
  --ifi-clarification-history-card-border: rgba(255,255,255,0.10); /* design-token-authority: allow */
  --ifi-clarification-history-card-shadow: 0 12px 32px rgba(0,0,0,0.32); /* design-token-authority: allow */
  --ifi-clarification-history-item-surface: rgba(255,255,255,0.03); /* design-token-authority: allow */
  --ifi-clarification-history-item-border: rgba(255,255,255,0.06); /* design-token-authority: allow */
  --ifi-clarification-history-restore-surface: rgba(129,140,248,0.10); /* design-token-authority: allow */
  --ifi-clarification-history-restore-border: rgba(129,140,248,0.20); /* design-token-authority: allow */
  --ifi-clarification-history-restore-padding: 6px 12px; /* design-token-authority: allow */
  --ifi-clarification-chip-surface: rgba(255,255,255,0.06); /* design-token-authority: allow */
  --ifi-clarification-chip-border: rgba(255,255,255,0.10); /* design-token-authority: allow */
  --ifi-clarification-border-none: none; /* design-token-authority: allow */
  --ifi-clarification-card-border-rule: 1px solid var(--ifi-clarification-card-border); /* design-token-authority: allow */
  --ifi-clarification-button-border-rule: 1px solid var(--ifi-clarification-button-border); /* design-token-authority: allow */
  --ifi-clarification-details-border-rule: 1px solid var(--ifi-clarification-details-border); /* design-token-authority: allow */
  --ifi-clarification-pre-border-rule: 1px solid var(--ifi-clarification-pre-border); /* design-token-authority: allow */
  --ifi-clarification-history-trigger-border-rule: 1px solid var(--ifi-clarification-history-trigger-border); /* design-token-authority: allow */
  --ifi-clarification-history-card-border-rule: 1px solid var(--ifi-clarification-history-card-border); /* design-token-authority: allow */
  --ifi-clarification-history-item-border-rule: 1px solid var(--ifi-clarification-history-item-border); /* design-token-authority: allow */
  --ifi-clarification-history-restore-border-rule: 1px solid var(--ifi-clarification-history-restore-border); /* design-token-authority: allow */
  --ifi-clarification-chip-border-rule: 1px solid var(--ifi-clarification-chip-border); /* design-token-authority: allow */
  --ifi-clarification-text-primary: #F1F5F9; /* design-token-authority: allow */
  --ifi-clarification-text-secondary: #94A3B8; /* design-token-authority: allow */
  --ifi-clarification-text-muted: #475569; /* design-token-authority: allow */
  --ifi-clarification-text-accent: #818CF8; /* design-token-authority: allow */
  --ifi-clarification-card-bottom: 20px; /* design-token-authority: allow */
  --ifi-clarification-card-left: 20px; /* design-token-authority: allow */
  --ifi-clarification-card-z-index: 2147483060; /* design-token-authority: allow */
  --ifi-clarification-card-width: min(360px, calc(100% - 40px)); /* design-token-authority: allow */
  --ifi-clarification-card-padding: 20px 22px 18px 22px; /* design-token-authority: allow */
  --ifi-clarification-card-blur: blur(24px) saturate(140%); /* design-token-authority: allow */
  --ifi-clarification-card-animation: ifi-island-arrive 0.35s cubic-bezier(0.2,0.8,0.2,1) backwards; /* design-token-authority: allow */
  --ifi-clarification-kicker-gap: 8px; /* design-token-authority: allow */
  --ifi-clarification-kicker-margin-bottom: 12px; /* design-token-authority: allow */
  --ifi-clarification-kicker-icon-size: 14px; /* design-token-authority: allow */
  --ifi-clarification-title-margin: 0 0 10px 0; /* design-token-authority: allow */
  --ifi-clarification-explanation-margin: 0 0 14px 0; /* design-token-authority: allow */
  --ifi-clarification-divider-height: 1px; /* design-token-authority: allow */
  --ifi-clarification-divider-margin: 0 0 14px 0; /* design-token-authority: allow */
  --ifi-clarification-continuity-margin: 0 0 16px 0; /* design-token-authority: allow */
  --ifi-clarification-button-padding: 8px 16px; /* design-token-authority: allow */
  --ifi-clarification-details-margin-top: 16px; /* design-token-authority: allow */
  --ifi-clarification-details-padding-top: 14px; /* design-token-authority: allow */
  --ifi-clarification-summary-padding: 2px 0; /* design-token-authority: allow */
  --ifi-clarification-pre-padding: 10px; /* design-token-authority: allow */
  --ifi-clarification-pre-margin-top: 8px; /* design-token-authority: allow */
  --ifi-clarification-margin-reset: 0; /* design-token-authority: allow */
  --ifi-clarification-list-style-reset: none; /* design-token-authority: allow */
  --ifi-clarification-list-margin: 0; /* design-token-authority: allow */
  --ifi-clarification-list-padding: 0; /* design-token-authority: allow */
  --ifi-clarification-history-trigger-bottom: calc(20px + 44px); /* design-token-authority: allow */
  --ifi-clarification-history-trigger-left: 20px; /* design-token-authority: allow */
  --ifi-clarification-history-trigger-z-index: 11; /* design-token-authority: allow */
  --ifi-clarification-history-trigger-gap: 8px; /* design-token-authority: allow */
  --ifi-clarification-history-trigger-padding: 6px 12px; /* design-token-authority: allow */
  --ifi-clarification-history-trigger-blur: blur(12px); /* design-token-authority: allow */
  --ifi-clarification-history-trigger-icon-size: 12px; /* design-token-authority: allow */
  --ifi-clarification-history-card-bottom: 20px; /* design-token-authority: allow */
  --ifi-clarification-history-card-left: 20px; /* design-token-authority: allow */
  --ifi-clarification-history-card-z-index: 2147483061; /* design-token-authority: allow */
  --ifi-clarification-history-card-width: min(380px, calc(100% - 40px)); /* design-token-authority: allow */
  --ifi-clarification-history-card-max-height: calc(100vh - 80px); /* design-token-authority: allow */
  --ifi-clarification-history-card-padding: 18px 18px 14px 18px; /* design-token-authority: allow */
  --ifi-clarification-history-card-blur: blur(28px) saturate(140%); /* design-token-authority: allow */
  --ifi-clarification-history-card-animation: ifi-island-arrive 0.35s cubic-bezier(0.2,0.8,0.2,1) backwards; /* design-token-authority: allow */
  --ifi-clarification-history-header-margin-bottom: 14px; /* design-token-authority: allow */
  --ifi-clarification-history-close-padding: 4px 8px; /* design-token-authority: allow */
  --ifi-clarification-history-list-gap: 10px; /* design-token-authority: allow */
  --ifi-clarification-history-item-padding: 10px 12px; /* design-token-authority: allow */
  --ifi-clarification-history-item-header-margin: 0 0 4px 0; /* design-token-authority: allow */
  --ifi-clarification-history-item-meta-margin: 0 0 8px 0; /* design-token-authority: allow */
  --ifi-clarification-chip-bottom: 20px; /* design-token-authority: allow */
  --ifi-clarification-chip-left: 20px; /* design-token-authority: allow */
  --ifi-clarification-chip-z-index: 10; /* design-token-authority: allow */
  --ifi-clarification-chip-gap: 8px; /* design-token-authority: allow */
  --ifi-clarification-chip-padding: 8px 14px; /* design-token-authority: allow */
  --ifi-clarification-chip-blur: blur(12px); /* design-token-authority: allow */
  --ifi-clarification-chip-icon-size: 14px; /* design-token-authority: allow */
  --ifi-clarification-title-font-size: 17px; /* design-token-authority: allow */
  --ifi-clarification-body-font-size: 13px; /* design-token-authority: allow */
  --ifi-clarification-small-font-size: 12px; /* design-token-authority: allow */
  --ifi-clarification-pre-font-size: 10px; /* design-token-authority: allow */
  --ifi-clarification-medium-weight: 500; /* design-token-authority: allow */
  --ifi-clarification-inherit-font-family: inherit; /* design-token-authority: allow */
  --ifi-clarification-pre-font-family: 'Azeret Mono', 'SF Mono', monospace; /* design-token-authority: allow */
  --ifi-tenant-settings-accent: var(--color-primary, #2563eb); /* design-token-authority: allow */
  --ifi-tenant-settings-accent-surface: var(--color-primary-bg, #eff6ff); /* design-token-authority: allow */
  --ifi-tenant-settings-transparent-surface: transparent; /* design-token-authority: allow */
  --ifi-tenant-settings-text-primary: var(--color-text-primary, #111827); /* design-token-authority: allow */
  --ifi-tenant-settings-text-secondary: var(--color-text-secondary, #6b7280); /* design-token-authority: allow */
  --ifi-tenant-settings-text-muted: var(--color-text-secondary, #9ca3af); /* design-token-authority: allow */
  --ifi-tenant-settings-border: var(--color-border, #d1d5db); /* design-token-authority: allow */
  --ifi-tenant-settings-border-subtle: var(--color-border, #e5e7eb); /* design-token-authority: allow */
  --ifi-tenant-settings-tablist-border: 1px solid var(--ifi-tenant-settings-border-subtle); /* design-token-authority: allow */
  --ifi-tenant-settings-tab-active-border: 2px solid var(--ifi-tenant-settings-accent); /* design-token-authority: allow */
  --ifi-tenant-settings-tab-inactive-border: 2px solid transparent; /* design-token-authority: allow */
  --ifi-tenant-settings-control-border: 1px solid var(--ifi-tenant-settings-border); /* design-token-authority: allow */
  --ifi-tenant-settings-control-active-border: 2px solid var(--ifi-tenant-settings-accent); /* design-token-authority: allow */
  --ifi-tenant-settings-body-padding: 12px 16px; /* design-token-authority: allow */
  --ifi-tenant-settings-tab-gap: 4px; /* design-token-authority: allow */
  --ifi-tenant-settings-chip-gap: 6px; /* design-token-authority: allow */
  --ifi-tenant-settings-group-gap: 8px; /* design-token-authority: allow */
  --ifi-tenant-settings-toggle-gap: 10px; /* design-token-authority: allow */
  --ifi-tenant-settings-section-margin: 12px; /* design-token-authority: allow */
  --ifi-tenant-settings-section-tight-margin: 10px; /* design-token-authority: allow */
  --ifi-tenant-settings-small-margin: 8px; /* design-token-authority: allow */
  --ifi-tenant-settings-panel-margin: 16px; /* design-token-authority: allow */
  --ifi-tenant-settings-theme-picker-margin: 4px; /* design-token-authority: allow */
  --ifi-tenant-settings-tab-offset: -1px; /* design-token-authority: allow */
  --ifi-tenant-settings-tab-padding: 6px 12px; /* design-token-authority: allow */
  --ifi-tenant-settings-control-padding: 6px 14px; /* design-token-authority: allow */
  --ifi-tenant-settings-chip-padding: 4px 10px; /* design-token-authority: allow */
  --ifi-tenant-settings-theme-padding: 5px 12px; /* design-token-authority: allow */
  --ifi-tenant-settings-control-radius: 6px; /* design-token-authority: allow */
  --ifi-tenant-settings-chip-radius: 14px; /* design-token-authority: allow */
  --ifi-tenant-settings-input-size: 16px; /* design-token-authority: allow */
  --ifi-tenant-settings-font-micro: 11px; /* design-token-authority: allow */
  --ifi-tenant-settings-font-helper: 12px; /* design-token-authority: allow */
  --ifi-tenant-settings-font-control: 13px; /* design-token-authority: allow */
  --ifi-tenant-settings-weight-regular: 400; /* design-token-authority: allow */
  --ifi-tenant-settings-weight-strong: 600; /* design-token-authority: allow */
  --ifi-tenant-settings-link-decoration: underline; /* design-token-authority: allow */

  /* C-6 - tenant readiness chip/read panel chrome */
  --ifi-tenant-readiness-ready-text: rgba(129,230,180,0.85); /* design-token-authority: allow */
  --ifi-tenant-readiness-ready-icon: rgba(129,230,180,1); /* design-token-authority: allow */
  --ifi-tenant-readiness-ready-border: 1px solid var(--ifi-tenant-readiness-ready-text); /* design-token-authority: allow */
  --ifi-tenant-readiness-ready-surface: rgba(129,230,180,0.10); /* design-token-authority: allow */
  --ifi-tenant-readiness-attention-text: rgba(232,213,150,0.85); /* design-token-authority: allow */
  --ifi-tenant-readiness-attention-icon: rgba(220,190,80,1); /* design-token-authority: allow */
  --ifi-tenant-readiness-attention-border: 1px solid var(--ifi-tenant-readiness-attention-text); /* design-token-authority: allow */
  --ifi-tenant-readiness-attention-surface: rgba(232,213,150,0.10); /* design-token-authority: allow */
  --ifi-tenant-readiness-blocked-text: rgba(232,180,160,0.88); /* design-token-authority: allow */
  --ifi-tenant-readiness-blocked-icon: rgba(220,100,80,1); /* design-token-authority: allow */
  --ifi-tenant-readiness-blocked-border: 1px solid var(--ifi-tenant-readiness-blocked-text); /* design-token-authority: allow */
  --ifi-tenant-readiness-blocked-surface: rgba(232,180,160,0.10); /* design-token-authority: allow */
  --ifi-tenant-readiness-ok-text: rgba(129,230,180,0.90); /* design-token-authority: allow */
  --ifi-tenant-readiness-warning-text: rgba(232,213,150,0.90); /* design-token-authority: allow */
  --ifi-tenant-readiness-check-blocked-text: rgba(232,140,120,0.90); /* design-token-authority: allow */
  --ifi-tenant-readiness-window-surface: rgba(20,22,32,0.88); /* design-token-authority: allow */
  --ifi-tenant-readiness-row-surface: rgba(255,255,255,0.04); /* design-token-authority: allow */
  --ifi-tenant-readiness-chip-surface: rgba(255,255,255,0.06); /* design-token-authority: allow */
  --ifi-tenant-readiness-chip-border: 1px solid rgba(255,255,255,0.10); /* design-token-authority: allow */
  --ifi-tenant-readiness-row-fallback-border: 1px solid rgba(255,255,255,0.08); /* design-token-authority: allow */
  --ifi-tenant-readiness-control-border: 1px solid rgba(255,255,255,0.12); /* design-token-authority: allow */
  --ifi-tenant-readiness-demo-border: 0.5px solid rgba(217,154,0,0.50); /* design-token-authority: allow */
  --ifi-tenant-readiness-divider-border: 0.5px solid rgba(26,31,42,0.08); /* design-token-authority: allow */
  --ifi-tenant-readiness-shadow: 0 8px 40px rgba(0,0,0,0.45); /* design-token-authority: allow */
  --ifi-tenant-readiness-window-width: min(380px, calc(100% - 40px)); /* design-token-authority: allow */
  --ifi-tenant-readiness-window-z-index: 2147483040; /* design-token-authority: allow */
  --ifi-tenant-readiness-chip-right: 200px; /* design-token-authority: allow */
  --ifi-tenant-readiness-chip-z-index: 10; /* design-token-authority: allow */
  --ifi-tenant-readiness-window-padding: 20px; /* design-token-authority: allow */
  --ifi-tenant-readiness-summary-padding: 10px 12px; /* design-token-authority: allow */
  --ifi-tenant-readiness-check-padding: 8px 10px; /* design-token-authority: allow */
  --ifi-tenant-readiness-chip-padding: 8px 14px; /* design-token-authority: allow */
  --ifi-tenant-readiness-close-padding: 0 2px; /* design-token-authority: allow */
  --ifi-tenant-readiness-read-body-padding: 12px 16px; /* design-token-authority: allow */
  --ifi-tenant-readiness-demo-padding: 6px 8px; /* design-token-authority: allow */
  --ifi-tenant-readiness-check-row-padding: 6px 0; /* design-token-authority: allow */
  --ifi-tenant-readiness-gap: 8px; /* design-token-authority: allow */
  --ifi-tenant-readiness-small-gap: 2px; /* design-token-authority: allow */
  --ifi-tenant-readiness-header-margin: 14px; /* design-token-authority: allow */
  --ifi-tenant-readiness-summary-margin: 14px; /* design-token-authority: allow */
  --ifi-tenant-readiness-footer-margin: 12px; /* design-token-authority: allow */
  --ifi-tenant-readiness-demo-margin: 8px; /* design-token-authority: allow */
  --ifi-tenant-readiness-overall-margin: 8px; /* design-token-authority: allow */
  --ifi-tenant-readiness-summary-text-margin: 10px; /* design-token-authority: allow */
  --ifi-tenant-readiness-dot-margin: 5px; /* design-token-authority: allow */
  --ifi-tenant-readiness-window-blur: blur(18px); /* design-token-authority: allow */
  --ifi-tenant-readiness-chip-blur: blur(12px); /* design-token-authority: allow */
  --ifi-tenant-readiness-window-animation: ifi-island-arrive 0.35s cubic-bezier(0.2,0.8,0.2,1) backwards; /* design-token-authority: allow */
  --ifi-tenant-readiness-icon-xs: 13px; /* design-token-authority: allow */
  --ifi-tenant-readiness-icon-sm: 14px; /* design-token-authority: allow */
  --ifi-tenant-readiness-icon-md: 16px; /* design-token-authority: allow */
  --ifi-tenant-readiness-icon-lg: 18px; /* design-token-authority: allow */
  --ifi-tenant-readiness-dot-size: 10px; /* design-token-authority: allow */
  --ifi-tenant-readiness-font-footer: 10px; /* design-token-authority: allow */
  --ifi-tenant-readiness-font-detail: 11px; /* design-token-authority: allow */
  --ifi-tenant-readiness-font-helper: 12px; /* design-token-authority: allow */
  --ifi-tenant-readiness-font-control: 13px; /* design-token-authority: allow */
  --ifi-tenant-readiness-font-title: 14px; /* design-token-authority: allow */
  --ifi-tenant-readiness-weight-medium: 500; /* design-token-authority: allow */
  --ifi-tenant-readiness-weight-strong: 600; /* design-token-authority: allow */
  --ifi-tenant-readiness-line-none: 1; /* design-token-authority: allow */
  --ifi-tenant-readiness-line-compact: 1.4; /* design-token-authority: allow */
  --ifi-tenant-readiness-line-relaxed: 1.5; /* design-token-authority: allow */
  --ifi-tenant-readiness-opacity-hidden: 0.35; /* design-token-authority: allow */
  --ifi-tenant-readiness-opacity-muted: 0.55; /* design-token-authority: allow */
  --ifi-tenant-readiness-opacity-soft: 0.60; /* design-token-authority: allow */
  --ifi-tenant-readiness-opacity-subtle: 0.70; /* design-token-authority: allow */
  --ifi-tenant-readiness-opacity-secondary: 0.75; /* design-token-authority: allow */
  --ifi-tenant-readiness-opacity-strong: 0.80; /* design-token-authority: allow */

  /* C-6 - demo origin badge honesty chrome */
  --ifi-demo-origin-badge-text: rgba(232,213,150,1); /* design-token-authority: allow */
  --ifi-demo-origin-badge-surface: rgba(232,213,150,0.12); /* design-token-authority: allow */
  --ifi-demo-origin-badge-border: 1px solid rgba(232,213,150,0.45); /* design-token-authority: allow */
  --ifi-demo-origin-badge-gap: 4px; /* design-token-authority: allow */
  --ifi-demo-origin-badge-padding: 2px 7px; /* design-token-authority: allow */
  --ifi-demo-origin-badge-radius: 6px; /* design-token-authority: allow */
  --ifi-demo-origin-badge-font: 10px; /* design-token-authority: allow */
  --ifi-demo-origin-badge-weight: 600; /* design-token-authority: allow */
  --ifi-demo-origin-badge-letter-spacing: 0.04em; /* design-token-authority: allow */
  --ifi-demo-origin-badge-transform: uppercase; /* design-token-authority: allow */
  --ifi-demo-origin-badge-white-space: nowrap; /* design-token-authority: allow */

  /* C-6 - licensing demo banner chrome */
  --ifi-licensing-demo-banner-text: rgb(146,64,14); /* design-token-authority: allow */
  --ifi-licensing-demo-banner-surface: rgba(245,158,11,0.10); /* design-token-authority: allow */
  --ifi-licensing-demo-banner-border: 1px solid rgba(245,158,11,0.25); /* design-token-authority: allow */
  --ifi-licensing-demo-banner-padding: 8px 12px; /* design-token-authority: allow */
  --ifi-licensing-demo-banner-margin-bottom: 12px; /* design-token-authority: allow */
  --ifi-licensing-demo-banner-radius: 8px; /* design-token-authority: allow */
  --ifi-licensing-demo-banner-font: 12px; /* design-token-authority: allow */
  --ifi-licensing-demo-banner-weight: 500; /* design-token-authority: allow */

  /* C-6 - read-parity panel row chrome */
  --ifi-read-panel-body-padding: 12px 16px; /* design-token-authority: allow */
  --ifi-read-panel-toolbar-gap: 10px; /* design-token-authority: allow */
  --ifi-read-panel-toolbar-margin-bottom: 10px; /* design-token-authority: allow */
  --ifi-read-panel-row-gap: 12px; /* design-token-authority: allow */
  --ifi-read-panel-row-padding: 6px 0; /* design-token-authority: allow */
  --ifi-read-panel-row-padding-compact: 5px 0; /* design-token-authority: allow */
  --ifi-read-panel-row-border: 0.5px solid rgba(26,31,42,0.08); /* design-token-authority: allow */
  --ifi-read-panel-weekday-width: 44px; /* design-token-authority: allow */
  --ifi-read-panel-footer-margin-top: 10px; /* design-token-authority: allow */
  --ifi-read-panel-note-margin-top: 6px; /* design-token-authority: allow */
  --ifi-read-panel-list-style: none; /* design-token-authority: allow */
  --ifi-read-panel-list-margin: 0; /* design-token-authority: allow */
  --ifi-read-panel-list-padding: 0; /* design-token-authority: allow */
  --ifi-read-panel-opacity-weekend: 0.5; /* design-token-authority: allow */
  --ifi-read-panel-opacity-soft: 0.6; /* design-token-authority: allow */
  --ifi-read-panel-opacity-muted: 0.7; /* design-token-authority: allow */
  --ifi-read-panel-opacity-secondary: 0.75; /* design-token-authority: allow */
  --ifi-read-panel-opacity-strong: 0.8; /* design-token-authority: allow */
  --ifi-read-panel-opacity-full: 1; /* design-token-authority: allow */
  --ifi-read-panel-weight-medium: 500; /* design-token-authority: allow */
  --ifi-read-panel-weight-strong: 600; /* design-token-authority: allow */
  --ifi-read-panel-numeric-variant: tabular-nums; /* design-token-authority: allow */

  /* C-6 - wage type catalog read-only chrome */
  --ifi-wage-type-catalog-transparent-surface: none; /* design-token-authority: allow */
  --ifi-wage-type-catalog-detail-surface: var(--ifi-panel-bg-soft, rgba(0,0,0,0.03)); /* design-token-authority: allow */
  --ifi-wage-type-catalog-text-warning: var(--color-feedback-warning, #b54708); /* design-token-authority: allow */
  --ifi-wage-type-catalog-text-inherit: inherit; /* design-token-authority: allow */
  --ifi-wage-type-catalog-border-none: none; /* design-token-authority: allow */
  --ifi-wage-type-catalog-row-border: 1px solid var(--ifi-divider, rgba(0,0,0,0.08)); /* design-token-authority: allow */
  --ifi-wage-type-catalog-body-overflow-y: auto; /* design-token-authority: allow */
  --ifi-wage-type-catalog-intro-margin-bottom: 0.75rem; /* design-token-authority: allow */
  --ifi-wage-type-catalog-state-padding: 1rem 0; /* design-token-authority: allow */
  --ifi-wage-type-catalog-list-style: none; /* design-token-authority: allow */
  --ifi-wage-type-catalog-list-padding: 0; /* design-token-authority: allow */
  --ifi-wage-type-catalog-list-margin: 0; /* design-token-authority: allow */
  --ifi-wage-type-catalog-row-padding: 0.5rem 0; /* design-token-authority: allow */
  --ifi-wage-type-catalog-button-display: flex; /* design-token-authority: allow */
  --ifi-wage-type-catalog-button-width: 100%; /* design-token-authority: allow */
  --ifi-wage-type-catalog-button-justify: space-between; /* design-token-authority: allow */
  --ifi-wage-type-catalog-button-align: baseline; /* design-token-authority: allow */
  --ifi-wage-type-catalog-button-padding: 0.25rem 0; /* design-token-authority: allow */
  --ifi-wage-type-catalog-button-cursor: pointer; /* design-token-authority: allow */
  --ifi-wage-type-catalog-button-text-align: left; /* design-token-authority: allow */
  --ifi-wage-type-catalog-name-margin-left: 0.5rem; /* design-token-authority: allow */
  --ifi-wage-type-catalog-detail-margin: 0.5rem 0 0.25rem 0; /* design-token-authority: allow */
  --ifi-wage-type-catalog-detail-padding: 0.5rem 0.75rem; /* design-token-authority: allow */
  --ifi-wage-type-catalog-detail-radius: 0.375rem; /* design-token-authority: allow */
  --ifi-wage-type-catalog-detail-row-display: flex; /* design-token-authority: allow */
  --ifi-wage-type-catalog-detail-row-justify: space-between; /* design-token-authority: allow */
  --ifi-wage-type-catalog-detail-row-padding: 0.125rem 0; /* design-token-authority: allow */
  --ifi-wage-type-catalog-detail-value-margin: 0; /* design-token-authority: allow */
  --ifi-wage-type-catalog-intro-font: 0.85rem; /* design-token-authority: allow */
  --ifi-wage-type-catalog-kind-font: 0.75rem; /* design-token-authority: allow */
  --ifi-wage-type-catalog-detail-font: 0.8rem; /* design-token-authority: allow */
  --ifi-wage-type-catalog-font-inherit: inherit; /* design-token-authority: allow */
  --ifi-wage-type-catalog-opacity-soft: 0.7; /* design-token-authority: allow */
  --ifi-wage-type-catalog-opacity-secondary: 0.75; /* design-token-authority: allow */
  --ifi-wage-type-catalog-opacity-strong: 0.85; /* design-token-authority: allow */

  /* C-6 - support panel tab/body chrome */
  --ifi-support-panel-detail-body-padding: 0; /* design-token-authority: allow */
  --ifi-support-panel-tablist-display: flex; /* design-token-authority: allow */
  --ifi-support-panel-tablist-align: center; /* design-token-authority: allow */
  --ifi-support-panel-tablist-gap: 0.25rem; /* design-token-authority: allow */
  --ifi-support-panel-tablist-margin: 0.25rem 0.75rem 0 0.75rem; /* design-token-authority: allow */
  --ifi-support-panel-tablist-padding: 0.25rem; /* design-token-authority: allow */
  --ifi-support-panel-tablist-radius: 10px; /* design-token-authority: allow */
  --ifi-support-panel-tablist-surface: var(--ifi-graphite-tablist-surface); /* design-token-authority: allow */
  --ifi-support-panel-tablist-border: 1px solid var(--ifi-panel-graphite-border-subtle); /* design-token-authority: allow */
  --ifi-support-panel-tab-flex: 1 1 0; /* design-token-authority: allow */
  --ifi-support-panel-tab-padding: 0.375rem 0.5rem; /* design-token-authority: allow */
  --ifi-support-panel-tab-border: 0; /* design-token-authority: allow */
  --ifi-support-panel-tab-radius: 0.5rem; /* design-token-authority: allow */
  --ifi-support-panel-tab-surface: transparent; /* design-token-authority: allow */
  --ifi-support-panel-tab-text: var(--ifi-night-text-muted); /* design-token-authority: allow */
  --ifi-support-panel-tab-hover-text: var(--ifi-graphite); /* design-token-authority: allow */
  --ifi-support-panel-tab-active-surface: var(--ifi-graphite); /* design-token-authority: allow */
  --ifi-support-panel-tab-active-text: var(--ifi-ivory); /* design-token-authority: allow */
  --ifi-support-panel-tab-active-shadow: inset 0 -2px 0 var(--ifi-gold), 0 10px 24px var(--ifi-night-shadow-medium); /* design-token-authority: allow */
  --ifi-support-panel-tab-focus-ring: 0 0 0 2px rgba(255,213,0,0.40); /* design-token-authority: allow */
  --ifi-support-panel-tab-focus-outline: none; /* design-token-authority: allow */
  --ifi-support-panel-tab-font: 0.75rem; /* design-token-authority: allow */
  --ifi-support-panel-tab-weight: 500; /* design-token-authority: allow */
  --ifi-support-panel-tab-transition: all 150ms cubic-bezier(0.4,0,0.2,1); /* design-token-authority: allow */

  /* C-6 - simulation panel chrome */
  --ifi-simulation-panel-preview-badge-font: 12px; /* design-token-authority: allow */
  --ifi-simulation-panel-preview-badge-opacity: 0.8; /* design-token-authority: allow */
  --ifi-simulation-panel-preview-badge-padding: 2px 8px; /* design-token-authority: allow */
  --ifi-simulation-panel-preview-badge-radius: 8px; /* design-token-authority: allow */
  --ifi-simulation-panel-preview-badge-border: 1px solid rgba(255,255,255,0.18); /* design-token-authority: allow */
  --ifi-simulation-panel-form-display: flex; /* design-token-authority: allow */
  --ifi-simulation-panel-form-direction: column; /* design-token-authority: allow */
  --ifi-simulation-panel-form-gap: 12px; /* design-token-authority: allow */
  --ifi-simulation-panel-form-padding: 16px; /* design-token-authority: allow */
  --ifi-simulation-panel-field-display: flex; /* design-token-authority: allow */
  --ifi-simulation-panel-field-direction: column; /* design-token-authority: allow */
  --ifi-simulation-panel-field-gap: 4px; /* design-token-authority: allow */
  --ifi-simulation-panel-label-font: 12px; /* design-token-authority: allow */
  --ifi-simulation-panel-label-opacity: 0.85; /* design-token-authority: allow */
  --ifi-simulation-panel-control-padding: 8px 10px; /* design-token-authority: allow */
  --ifi-simulation-panel-control-radius: 8px; /* design-token-authority: allow */
  --ifi-simulation-panel-submit-padding: 10px 14px; /* design-token-authority: allow */
  --ifi-simulation-panel-submit-radius: 10px; /* design-token-authority: allow */
  --ifi-simulation-panel-submit-opacity-ready: 1; /* design-token-authority: allow */
  --ifi-simulation-panel-submit-opacity-disabled: 0.5; /* design-token-authority: allow */
  --ifi-simulation-panel-submit-cursor-ready: pointer; /* design-token-authority: allow */
  --ifi-simulation-panel-submit-cursor-disabled: not-allowed; /* design-token-authority: allow */
  --ifi-simulation-panel-error-margin: 8px 16px; /* design-token-authority: allow */
  --ifi-simulation-panel-error-padding: 12px; /* design-token-authority: allow */
  --ifi-simulation-panel-error-radius: 8px; /* design-token-authority: allow */
  --ifi-simulation-panel-error-font: 13px; /* design-token-authority: allow */
  --ifi-simulation-panel-error-border: 1px solid rgba(255,255,255,0.12); /* design-token-authority: allow */
  --ifi-simulation-panel-error-opacity: 0.95; /* design-token-authority: allow */
  --ifi-simulation-panel-result-padding: 0 16px 16px 16px; /* design-token-authority: allow */
  --ifi-simulation-panel-result-display: flex; /* design-token-authority: allow */
  --ifi-simulation-panel-result-direction: column; /* design-token-authority: allow */
  --ifi-simulation-panel-result-gap: 12px; /* design-token-authority: allow */
  --ifi-simulation-panel-warning-padding: 10px; /* design-token-authority: allow */
  --ifi-simulation-panel-warning-radius: 8px; /* design-token-authority: allow */
  --ifi-simulation-panel-warning-border: 1px solid rgba(212,154,0,0.4); /* design-token-authority: allow */
  --ifi-simulation-panel-warning-surface: rgba(212,154,0,0.08); /* design-token-authority: allow */
  --ifi-simulation-panel-warning-font: 13px; /* design-token-authority: allow */
  --ifi-simulation-panel-warning-display: flex; /* design-token-authority: allow */
  --ifi-simulation-panel-warning-direction: column; /* design-token-authority: allow */
  --ifi-simulation-panel-warning-gap: 4px; /* design-token-authority: allow */
  --ifi-simulation-panel-warning-item-display: flex; /* design-token-authority: allow */
  --ifi-simulation-panel-warning-item-gap: 8px; /* design-token-authority: allow */
  --ifi-simulation-panel-warning-item-align: flex-start; /* design-token-authority: allow */
  --ifi-simulation-panel-icon-flex-shrink: 0; /* design-token-authority: allow */
  --ifi-simulation-panel-content-flex: 1; /* design-token-authority: allow */
  --ifi-simulation-panel-kpi-grid-display: grid; /* design-token-authority: allow */
  --ifi-simulation-panel-kpi-grid-columns: repeat(3, minmax(0, 1fr)); /* design-token-authority: allow */
  --ifi-simulation-panel-kpi-grid-gap: 10px; /* design-token-authority: allow */
  --ifi-simulation-panel-kpi-card-padding: 12px; /* design-token-authority: allow */
  --ifi-simulation-panel-kpi-card-radius: 10px; /* design-token-authority: allow */
  --ifi-simulation-panel-kpi-border: 1px solid rgba(255,255,255,0.10); /* design-token-authority: allow */
  --ifi-simulation-panel-kpi-blocked-border: 1px solid rgba(212,154,0,0.5); /* design-token-authority: allow */
  --ifi-simulation-panel-kpi-label-font: 11px; /* design-token-authority: allow */
  --ifi-simulation-panel-kpi-label-opacity: 0.7; /* design-token-authority: allow */
  --ifi-simulation-panel-kpi-value-font: 20px; /* design-token-authority: allow */
  --ifi-simulation-panel-weight-strong: 600; /* design-token-authority: allow */
  --ifi-simulation-panel-blocked-note-font: 11px; /* design-token-authority: allow */
  --ifi-simulation-panel-blocked-note-opacity: 0.75; /* design-token-authority: allow */
  --ifi-simulation-panel-blocked-note-margin-top: 4px; /* design-token-authority: allow */
  --ifi-simulation-panel-details-padding: 12px; /* design-token-authority: allow */
  --ifi-simulation-panel-details-radius: 10px; /* design-token-authority: allow */
  --ifi-simulation-panel-details-border: 1px solid rgba(255,255,255,0.08); /* design-token-authority: allow */
  --ifi-simulation-panel-summary-cursor: pointer; /* design-token-authority: allow */
  --ifi-simulation-panel-summary-font: 13px; /* design-token-authority: allow */
  --ifi-simulation-panel-summary-opacity: 0.85; /* design-token-authority: allow */
  --ifi-simulation-panel-details-list-margin-top: 10px; /* design-token-authority: allow */
  --ifi-simulation-panel-details-font: 13px; /* design-token-authority: allow */
  --ifi-simulation-panel-deduction-row-display: flex; /* design-token-authority: allow */
  --ifi-simulation-panel-deduction-row-justify: space-between; /* design-token-authority: allow */
  --ifi-simulation-panel-deduction-row-padding: 4px 0; /* design-token-authority: allow */
  --ifi-simulation-panel-deduction-row-border: 1px solid rgba(255,255,255,0.06); /* design-token-authority: allow */
  --ifi-simulation-panel-deduction-label-opacity: 0.85; /* design-token-authority: allow */
  --ifi-simulation-panel-numeric-variant: tabular-nums; /* design-token-authority: allow */
  --ifi-simulation-panel-disclaimer-font: 12px; /* design-token-authority: allow */
  --ifi-simulation-panel-disclaimer-opacity: 0.65; /* design-token-authority: allow */
  --ifi-simulation-panel-disclaimer-margin: 0; /* design-token-authority: allow */
  --ifi-simulation-panel-disclaimer-line-height: 1.5; /* design-token-authority: allow */

  /* C-6 - snapshot prepare panel chrome */
  --ifi-snapshot-prepare-panel-status-surface: var(--ifi-panel-bg-soft, rgba(0,0,0,0.03)); /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-badge-surface: var(--ifi-badge-soft, rgba(0,0,0,0.04)); /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-warning-text: var(--color-feedback-warning, #b54708); /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-control-border: 1px solid var(--ifi-divider, rgba(0,0,0,0.15)); /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-body-overflow-y: auto; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-intro-margin-bottom: 0.75rem; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-form-margin-bottom: 1rem; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-form-display: grid; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-form-gap: 0.5rem; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-field-display: block; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-control-display: block; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-control-width: 100%; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-control-padding: 0.375rem 0.5rem; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-control-margin-top: 0.25rem; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-control-radius: 0.25rem; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-period-row-display: flex; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-period-row-gap: 0.5rem; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-period-field-flex: 1; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-action-padding: 0.5rem 1rem; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-action-radius: 0.25rem; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-action-cursor-ready: pointer; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-action-cursor-disabled: not-allowed; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-status-padding: 0.75rem; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-status-radius: 0.375rem; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-status-margin-bottom: 0.75rem; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-error-padding: 0.5rem 0; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-badge-padding: 0.375rem 0.75rem; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-badge-radius: 0.25rem; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-badge-margin-bottom: 0.5rem; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-details-margin-top: 0.5rem; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-details-compact-margin-top: 0.25rem; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-list-margin: 0.25rem 0 0 1rem; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-list-padding: 0; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-future-section-margin-top: 1rem; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-note-margin-top: 0.25rem; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-body-font: 0.85rem; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-intro-opacity: 0.75; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-small-font: 0.8rem; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-action-opacity-ready: 1; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-action-opacity-disabled: 0.5; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-badge-opacity: 0.85; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-code-font-family: monospace; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-code-font: 0.75rem; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-note-font: 0.75rem; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-note-opacity: 0.6; /* design-token-authority: allow */
  --ifi-snapshot-prepare-panel-future-action-opacity: 0.4; /* design-token-authority: allow */

  /* C-6 - payroll cockpit chrome */
  --ifi-payroll-cockpit-max-width: 72rem; /* design-token-authority: allow */
  --ifi-payroll-cockpit-padding: 2rem 1.5rem; /* design-token-authority: allow */
  --ifi-payroll-cockpit-margin: 0 auto; /* design-token-authority: allow */
  --ifi-payroll-cockpit-header-display: flex; /* design-token-authority: allow */
  --ifi-payroll-cockpit-header-wrap: wrap; /* design-token-authority: allow */
  --ifi-payroll-cockpit-header-align: baseline; /* design-token-authority: allow */
  --ifi-payroll-cockpit-header-justify: space-between; /* design-token-authority: allow */
  --ifi-payroll-cockpit-header-gap: 1rem; /* design-token-authority: allow */
  --ifi-payroll-cockpit-header-margin-bottom: 2rem; /* design-token-authority: allow */
  --ifi-payroll-cockpit-controls-display: flex; /* design-token-authority: allow */
  --ifi-payroll-cockpit-controls-align: center; /* design-token-authority: allow */
  --ifi-payroll-cockpit-controls-gap: 0.5rem; /* design-token-authority: allow */
  --ifi-payroll-cockpit-year-label-display: flex; /* design-token-authority: allow */
  --ifi-payroll-cockpit-year-label-align: center; /* design-token-authority: allow */
  --ifi-payroll-cockpit-year-label-gap: 0.5rem; /* design-token-authority: allow */
  --ifi-payroll-cockpit-months-grid-display: grid; /* design-token-authority: allow */
  --ifi-payroll-cockpit-months-grid-columns: repeat(auto-fit, minmax(var(--ifi-payroll-cockpit-month-card-min-width), 1fr)); /* design-token-authority: allow */
  --ifi-payroll-cockpit-month-card-min-width: 18rem; /* design-token-authority: allow */
  --ifi-payroll-cockpit-months-grid-gap: 0.75rem; /* design-token-authority: allow */
  --ifi-payroll-cockpit-card-header-display: flex; /* design-token-authority: allow */
  --ifi-payroll-cockpit-card-header-align: flex-start; /* design-token-authority: allow */
  --ifi-payroll-cockpit-card-header-justify: space-between; /* design-token-authority: allow */
  --ifi-payroll-cockpit-card-header-gap: 0.75rem; /* design-token-authority: allow */
  --ifi-payroll-cockpit-actions-display: flex; /* design-token-authority: allow */
  --ifi-payroll-cockpit-actions-direction: column; /* design-token-authority: allow */
  --ifi-payroll-cockpit-actions-gap: 0.5rem; /* design-token-authority: allow */
  --ifi-payroll-cockpit-actions-margin-top: 0.75rem; /* design-token-authority: allow */
  --ifi-payroll-cockpit-count-margin-bottom: 1rem; /* design-token-authority: allow */
  --ifi-payroll-cockpit-list-padding: 0; /* design-token-authority: allow */
  --ifi-payroll-cockpit-list-margin: 0; /* design-token-authority: allow */
  --ifi-payroll-cockpit-list-style: none; /* design-token-authority: allow */
  --ifi-payroll-cockpit-empty-padding: 2rem; /* design-token-authority: allow */
  --ifi-payroll-cockpit-card-padding: 1rem; /* design-token-authority: allow */
  --ifi-payroll-cockpit-control-padding: 0.25rem 0.5rem; /* design-token-authority: allow */
  --ifi-payroll-cockpit-primary-action-padding: 0.25rem 0.75rem; /* design-token-authority: allow */
  --ifi-payroll-cockpit-action-padding: 0.5rem 0.75rem; /* design-token-authority: allow */
  --ifi-payroll-cockpit-chip-padding: 0.125rem 0.5rem; /* design-token-authority: allow */
  --ifi-payroll-cockpit-empty-step-padding: 0.25rem 0.75rem; /* design-token-authority: allow */
  --ifi-payroll-cockpit-error-padding: 0.75rem; /* design-token-authority: allow */
  --ifi-payroll-cockpit-loading-padding: 2rem; /* design-token-authority: allow */
  --ifi-payroll-cockpit-title-margin: 0; /* design-token-authority: allow */
  --ifi-payroll-cockpit-month-title-margin: 0; /* design-token-authority: allow */
  --ifi-payroll-cockpit-subtitle-margin: 0.25rem 0 0; /* design-token-authority: allow */
  --ifi-payroll-cockpit-month-id-margin: 0.5rem 0 0; /* design-token-authority: allow */
  --ifi-payroll-cockpit-empty-step-margin: 0 0 0.75rem; /* design-token-authority: allow */
  --ifi-payroll-cockpit-empty-text-margin: 0; /* design-token-authority: allow */
  --ifi-payroll-cockpit-empty-help-margin: 0.25rem 0 0; /* design-token-authority: allow */
  --ifi-payroll-cockpit-error-margin-bottom: 1rem; /* design-token-authority: allow */
  --ifi-payroll-cockpit-closed-note-margin: 0.75rem 0 0; /* design-token-authority: allow */
  --ifi-payroll-cockpit-width-full: 100%; /* design-token-authority: allow */
  --ifi-payroll-cockpit-rhythm-center: center; /* design-token-authority: allow */
  --ifi-payroll-cockpit-empty-display: inline-block; /* design-token-authority: allow */
  --ifi-payroll-cockpit-chip-display: inline-flex; /* design-token-authority: allow */
  --ifi-payroll-cockpit-chip-align: center; /* design-token-authority: allow */
  --ifi-payroll-cockpit-chip-shrink: 0; /* design-token-authority: allow */
  --ifi-payroll-cockpit-chip-cursor: help; /* design-token-authority: allow */
  --ifi-payroll-cockpit-month-id-overflow: hidden; /* design-token-authority: allow */
  --ifi-payroll-cockpit-month-id-text-overflow: ellipsis; /* design-token-authority: allow */
  --ifi-payroll-cockpit-month-id-white-space: nowrap; /* design-token-authority: allow */
  --ifi-payroll-cockpit-transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; /* design-token-authority: allow */
  --ifi-payroll-cockpit-focus-outline: none; /* design-token-authority: allow */
  --ifi-payroll-cockpit-disabled-opacity: 0.5; /* design-token-authority: allow */
  --ifi-payroll-cockpit-text: var(--ifi-graphite, #111317); /* design-token-authority: allow */
  --ifi-payroll-cockpit-title-text: var(--ifi-graphite, #111317); /* design-token-authority: allow */
  --ifi-payroll-cockpit-subtitle-text: var(--ifi-muted, #8E918B); /* design-token-authority: allow */
  --ifi-payroll-cockpit-muted-text: var(--ifi-muted, #8E918B); /* design-token-authority: allow */
  --ifi-payroll-cockpit-soft-text: rgba(60,68,80,0.74); /* design-token-authority: allow */
  --ifi-payroll-cockpit-faint-text: rgba(60,68,80,0.55); /* design-token-authority: allow */
  --ifi-payroll-cockpit-inverse-text: var(--ifi-ivory, #F5F3EE); /* design-token-authority: allow */
  --ifi-payroll-cockpit-error-text: var(--ifi-status-danger, #b91c1c); /* design-token-authority: allow */
  --ifi-payroll-cockpit-variable-text: #0369a1; /* design-token-authority: allow */
  --ifi-payroll-cockpit-calculating-text: #b45309; /* design-token-authority: allow */
  --ifi-payroll-cockpit-validation-text: #7c3aed; /* design-token-authority: allow */
  --ifi-payroll-cockpit-closing-text: #047857; /* design-token-authority: allow */
  --ifi-payroll-cockpit-closed-text: var(--ifi-muted, #8E918B); /* design-token-authority: allow */
  --ifi-payroll-cockpit-open-text: rgba(60,68,80,0.84); /* design-token-authority: allow */
  --ifi-payroll-cockpit-card-surface: var(--ifi-placeholder-surface, #FFFFFF); /* design-token-authority: allow */
  --ifi-payroll-cockpit-soft-surface: var(--ifi-status-neutral-surface-faint, rgba(107,114,128,0.06)); /* design-token-authority: allow */
  --ifi-payroll-cockpit-hover-surface: rgba(60,68,80,0.04); /* design-token-authority: allow */
  --ifi-payroll-cockpit-active-surface: rgba(60,68,80,0.08); /* design-token-authority: allow */
  --ifi-payroll-cockpit-error-surface: var(--ifi-status-danger-surface-subtle, rgba(185,28,28,0.07)); /* design-token-authority: allow */
  --ifi-payroll-cockpit-variable-surface: #0369a1; /* design-token-authority: allow */
  --ifi-payroll-cockpit-variable-hover-surface: #0284c7; /* design-token-authority: allow */
  --ifi-payroll-cockpit-variable-active-surface: #075985; /* design-token-authority: allow */
  --ifi-payroll-cockpit-closing-surface: rgba(32,36,43,0.95); /* design-token-authority: allow */
  --ifi-payroll-cockpit-closing-hover-surface: rgba(32,36,43,0.88); /* design-token-authority: allow */
  --ifi-payroll-cockpit-closing-active-surface: rgba(17,19,23,0.98); /* design-token-authority: allow */
  --ifi-payroll-cockpit-variable-chip-surface: rgba(14,165,233,0.12); /* design-token-authority: allow */
  --ifi-payroll-cockpit-calculating-chip-surface: var(--ifi-status-warning-surface-subtle, rgba(180,83,9,0.07)); /* design-token-authority: allow */
  --ifi-payroll-cockpit-validation-chip-surface: rgba(124,58,237,0.10); /* design-token-authority: allow */
  --ifi-payroll-cockpit-closing-chip-surface: var(--ifi-status-success-surface-subtle, rgba(4,120,87,0.07)); /* design-token-authority: allow */
  --ifi-payroll-cockpit-closed-chip-surface: var(--ifi-status-neutral-surface-subtle, rgba(107,114,128,0.07)); /* design-token-authority: allow */
  --ifi-payroll-cockpit-open-chip-surface: var(--ifi-status-neutral-surface-subtle, rgba(107,114,128,0.07)); /* design-token-authority: allow */
  --ifi-payroll-cockpit-card-border: 1px solid var(--ifi-status-neutral-border-subtle, rgba(107,114,128,0.15)); /* design-token-authority: allow */
  --ifi-payroll-cockpit-empty-border: 1px dashed var(--ifi-status-neutral-border-soft, rgba(107,114,128,0.18)); /* design-token-authority: allow */
  --ifi-payroll-cockpit-control-border: 1px solid rgba(32,36,43,0.16); /* design-token-authority: allow */
  --ifi-payroll-cockpit-secondary-action-border: 1px solid var(--ifi-status-neutral-border-subtle, rgba(107,114,128,0.15)); /* design-token-authority: allow */
  --ifi-payroll-cockpit-variable-action-border: 1px solid rgba(14,165,233,0.3); /* design-token-authority: allow */
  --ifi-payroll-cockpit-closing-action-border: 1px solid var(--ifi-status-neutral-border-soft, rgba(107,114,128,0.18)); /* design-token-authority: allow */
  --ifi-payroll-cockpit-open-drawer-border: 1px solid rgba(255,213,0,0.26); /* design-token-authority: allow */
  --ifi-payroll-cockpit-error-border: 1px solid var(--ifi-status-danger-border-soft, rgba(185,28,28,0.18)); /* design-token-authority: allow */
  --ifi-payroll-cockpit-focus-border: var(--ifi-gold, #FFD500); /* design-token-authority: allow */
  --ifi-payroll-cockpit-focus-ring: 0 0 0 1px rgba(255,213,0,0.28); /* design-token-authority: allow */
  --ifi-payroll-cockpit-card-shadow: 0 1px 2px rgba(17,19,23,0.08); /* design-token-authority: allow */
  --ifi-payroll-cockpit-control-shadow: 0 1px 2px rgba(17,19,23,0.08); /* design-token-authority: allow */
  --ifi-payroll-cockpit-radius-sm: 0.375rem; /* design-token-authority: allow */
  --ifi-payroll-cockpit-radius-md: 0.5rem; /* design-token-authority: allow */
  --ifi-payroll-cockpit-radius-lg: 1rem; /* design-token-authority: allow */
  --ifi-payroll-cockpit-radius-full: 9999px; /* design-token-authority: allow */
  --ifi-payroll-cockpit-title-font: 1.5rem; /* design-token-authority: allow */
  --ifi-payroll-cockpit-title-weight: 600; /* design-token-authority: allow */
  --ifi-payroll-cockpit-title-letter-spacing: 0; /* design-token-authority: allow */
  --ifi-payroll-cockpit-body-font: 0.875rem; /* design-token-authority: allow */
  --ifi-payroll-cockpit-small-font: 0.75rem; /* design-token-authority: allow */
  --ifi-payroll-cockpit-chip-font: 0.6875rem; /* design-token-authority: allow */
  --ifi-payroll-cockpit-chip-weight: 500; /* design-token-authority: allow */
  --ifi-payroll-cockpit-button-weight: 600; /* design-token-authority: allow */
  --ifi-payroll-cockpit-secondary-button-weight: 500; /* design-token-authority: allow */
  --ifi-payroll-cockpit-step-weight: 600; /* design-token-authority: allow */
  --ifi-payroll-cockpit-step-transform: uppercase; /* design-token-authority: allow */
  --ifi-payroll-cockpit-step-letter-spacing: 0; /* design-token-authority: allow */
  --ifi-payroll-cockpit-mono-font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* design-token-authority: allow */

  /* C-6 - new period drawer chrome */
  --ifi-new-period-drawer-overlay-position: fixed; /* design-token-authority: allow */
  --ifi-new-period-drawer-overlay-inset: 0; /* design-token-authority: allow */
  --ifi-new-period-drawer-overlay-z-index: 40; /* design-token-authority: allow */
  --ifi-new-period-drawer-overlay-display: flex; /* design-token-authority: allow */
  --ifi-new-period-drawer-overlay-align: center; /* design-token-authority: allow */
  --ifi-new-period-drawer-overlay-justify: center; /* design-token-authority: allow */
  --ifi-new-period-drawer-overlay-surface: rgba(15,23,42,0.40); /* design-token-authority: allow */
  --ifi-new-period-drawer-overlay-padding-inline: 1rem; /* design-token-authority: allow */
  --ifi-new-period-drawer-width: 100%; /* design-token-authority: allow */
  --ifi-new-period-drawer-max-width: 28rem; /* design-token-authority: allow */
  --ifi-new-period-drawer-padding: 1.5rem; /* design-token-authority: allow */
  --ifi-new-period-drawer-panel-surface: var(--ifi-placeholder-surface, #FFFFFF); /* design-token-authority: allow */
  --ifi-new-period-drawer-panel-radius: 1rem; /* design-token-authority: allow */
  --ifi-new-period-drawer-panel-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); /* design-token-authority: allow */
  --ifi-new-period-drawer-header-display: flex; /* design-token-authority: allow */
  --ifi-new-period-drawer-header-align: baseline; /* design-token-authority: allow */
  --ifi-new-period-drawer-header-justify: space-between; /* design-token-authority: allow */
  --ifi-new-period-drawer-header-margin-bottom: 1rem; /* design-token-authority: allow */
  --ifi-new-period-drawer-title-margin: 0; /* design-token-authority: allow */
  --ifi-new-period-drawer-title-font: 1.125rem; /* design-token-authority: allow */
  --ifi-new-period-drawer-title-weight: 600; /* design-token-authority: allow */
  --ifi-new-period-drawer-title-text: #0f172a; /* design-token-authority: allow */
  --ifi-new-period-drawer-close-padding: 0.25rem; /* design-token-authority: allow */
  --ifi-new-period-drawer-close-radius: 0.25rem; /* design-token-authority: allow */
  --ifi-new-period-drawer-close-surface-hover: #f1f5f9; /* design-token-authority: allow */
  --ifi-new-period-drawer-close-text: #94a3b8; /* design-token-authority: allow */
  --ifi-new-period-drawer-close-text-hover: #334155; /* design-token-authority: allow */
  --ifi-new-period-drawer-close-disabled-opacity: 0.4; /* design-token-authority: allow */
  --ifi-new-period-drawer-copy-margin: 0 0 1rem; /* design-token-authority: allow */
  --ifi-new-period-drawer-copy-font: 0.875rem; /* design-token-authority: allow */
  --ifi-new-period-drawer-copy-text: #64748b; /* design-token-authority: allow */
  --ifi-new-period-drawer-grid-display: grid; /* design-token-authority: allow */
  --ifi-new-period-drawer-grid-columns: repeat(2, minmax(0, 1fr)); /* design-token-authority: allow */
  --ifi-new-period-drawer-grid-gap: 0.75rem; /* design-token-authority: allow */
  --ifi-new-period-drawer-field-display: flex; /* design-token-authority: allow */
  --ifi-new-period-drawer-field-direction: column; /* design-token-authority: allow */
  --ifi-new-period-drawer-field-gap: 0.25rem; /* design-token-authority: allow */
  --ifi-new-period-drawer-field-font: 0.875rem; /* design-token-authority: allow */
  --ifi-new-period-drawer-field-text: #334155; /* design-token-authority: allow */
  --ifi-new-period-drawer-control-padding: 0.375rem 0.5rem; /* design-token-authority: allow */
  --ifi-new-period-drawer-control-radius: 0.375rem; /* design-token-authority: allow */
  --ifi-new-period-drawer-control-surface: #FFFFFF; /* design-token-authority: allow */
  --ifi-new-period-drawer-control-border: 1px solid #cbd5e1; /* design-token-authority: allow */
  --ifi-new-period-drawer-control-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); /* design-token-authority: allow */
  --ifi-new-period-drawer-control-focus-border: #38bdf8; /* design-token-authority: allow */
  --ifi-new-period-drawer-control-focus-outline: none; /* design-token-authority: allow */
  --ifi-new-period-drawer-control-focus-shadow: 0 0 0 1px #bae6fd; /* design-token-authority: allow */
  --ifi-new-period-drawer-error-margin-top: 1rem; /* design-token-authority: allow */
  --ifi-new-period-drawer-error-padding: 0.75rem; /* design-token-authority: allow */
  --ifi-new-period-drawer-error-radius: 0.375rem; /* design-token-authority: allow */
  --ifi-new-period-drawer-error-surface: #fff1f2; /* design-token-authority: allow */
  --ifi-new-period-drawer-error-border: 1px solid #fecdd3; /* design-token-authority: allow */
  --ifi-new-period-drawer-error-text: #be123c; /* design-token-authority: allow */
  --ifi-new-period-drawer-footer-display: flex; /* design-token-authority: allow */
  --ifi-new-period-drawer-footer-align: center; /* design-token-authority: allow */
  --ifi-new-period-drawer-footer-justify: flex-end; /* design-token-authority: allow */
  --ifi-new-period-drawer-footer-gap: 0.5rem; /* design-token-authority: allow */
  --ifi-new-period-drawer-footer-margin-top: 1.5rem; /* design-token-authority: allow */
  --ifi-new-period-drawer-action-padding: 0.375rem 1rem; /* design-token-authority: allow */
  --ifi-new-period-drawer-action-radius: 0.375rem; /* design-token-authority: allow */
  --ifi-new-period-drawer-action-font: 0.875rem; /* design-token-authority: allow */
  --ifi-new-period-drawer-action-weight: 500; /* design-token-authority: allow */
  --ifi-new-period-drawer-action-disabled-opacity: 0.5; /* design-token-authority: allow */
  --ifi-new-period-drawer-action-transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; /* design-token-authority: allow */
  --ifi-new-period-drawer-secondary-surface: #FFFFFF; /* design-token-authority: allow */
  --ifi-new-period-drawer-secondary-surface-hover: #f8fafc; /* design-token-authority: allow */
  --ifi-new-period-drawer-secondary-border: 1px solid #cbd5e1; /* design-token-authority: allow */
  --ifi-new-period-drawer-secondary-text: #334155; /* design-token-authority: allow */
  --ifi-new-period-drawer-primary-surface: #0284c7; /* design-token-authority: allow */
  --ifi-new-period-drawer-primary-surface-hover: #0369a1; /* design-token-authority: allow */
  --ifi-new-period-drawer-primary-text: #FFFFFF; /* design-token-authority: allow */

  /* C-6 - brand identity panel chrome */
  --ifi-brand-identity-copy-margin: 0 0 0.75rem; /* design-token-authority: allow */
  --ifi-brand-identity-hint-margin: 0.25rem 0 0.5rem; /* design-token-authority: allow */
  --ifi-brand-identity-meta-margin-bottom: 0.75rem; /* design-token-authority: allow */
  --ifi-brand-identity-field-margin-bottom: 0.75rem; /* design-token-authority: allow */
  --ifi-brand-identity-label-display: block; /* design-token-authority: allow */
  --ifi-brand-identity-label-margin-bottom: 0.25rem; /* design-token-authority: allow */
  --ifi-brand-identity-actions-display: flex; /* design-token-authority: allow */
  --ifi-brand-identity-actions-align: center; /* design-token-authority: allow */
  --ifi-brand-identity-actions-gap: 0.75rem; /* design-token-authority: allow */
  --ifi-brand-identity-control-width: 100%; /* design-token-authority: allow */
  --ifi-brand-identity-control-padding: 0.5rem 0.75rem; /* design-token-authority: allow */
  --ifi-brand-identity-control-radius: 0.375rem; /* design-token-authority: allow */
  --ifi-brand-identity-action-padding: 0.5rem 1rem; /* design-token-authority: allow */
  --ifi-brand-identity-action-radius: 0.375rem; /* design-token-authority: allow */
  --ifi-brand-identity-disabled-opacity: 0.7; /* design-token-authority: allow */
  --ifi-brand-identity-control-surface: var(--color-surface, #fff); /* design-token-authority: allow */
  --ifi-brand-identity-primary-surface: var(--color-primary, #2563eb); /* design-token-authority: allow */
  --ifi-brand-identity-control-border: 1px solid var(--color-border, #d1d5db); /* design-token-authority: allow */
  --ifi-brand-identity-label-text: var(--color-text, #111317); /* design-token-authority: allow */
  --ifi-brand-identity-control-text: var(--color-text, #111317); /* design-token-authority: allow */
  --ifi-brand-identity-muted-text: var(--color-text-muted, #6b7280); /* design-token-authority: allow */
  --ifi-brand-identity-inverse-text: #fff; /* design-token-authority: allow */
  --ifi-brand-identity-success-text: var(--color-success, #16a34a); /* design-token-authority: allow */
  --ifi-brand-identity-danger-text: var(--color-danger, #dc2626); /* design-token-authority: allow */
  --ifi-brand-identity-micro-font: 0.75rem; /* design-token-authority: allow */
  --ifi-brand-identity-body-font: 0.875rem; /* design-token-authority: allow */
  --ifi-brand-identity-action-weight: 500; /* design-token-authority: allow */

  /* C-6 - year-end center panel chrome */
  --ifi-yearend-copy-margin: 0 0 0.75rem; /* design-token-authority: allow */
  --ifi-yearend-hint-margin: 0.25rem 0 0; /* design-token-authority: allow */
  --ifi-yearend-meta-margin-bottom: 0.75rem; /* design-token-authority: allow */
  --ifi-yearend-field-margin-bottom: 0.75rem; /* design-token-authority: allow */
  --ifi-yearend-toggle-display: flex; /* design-token-authority: allow */
  --ifi-yearend-toggle-align: center; /* design-token-authority: allow */
  --ifi-yearend-toggle-gap: 0.5rem; /* design-token-authority: allow */
  --ifi-yearend-toggle-margin-bottom: 0.75rem; /* design-token-authority: allow */
  --ifi-yearend-label-display: block; /* design-token-authority: allow */
  --ifi-yearend-label-margin-bottom: 0.25rem; /* design-token-authority: allow */
  --ifi-yearend-actions-display: flex; /* design-token-authority: allow */
  --ifi-yearend-actions-align: center; /* design-token-authority: allow */
  --ifi-yearend-actions-gap: 0.75rem; /* design-token-authority: allow */
  --ifi-yearend-control-width: 100%; /* design-token-authority: allow */
  --ifi-yearend-control-padding: 0.5rem 0.75rem; /* design-token-authority: allow */
  --ifi-yearend-control-radius: 0.375rem; /* design-token-authority: allow */
  --ifi-yearend-action-padding: 0.5rem 1rem; /* design-token-authority: allow */
  --ifi-yearend-action-radius: 0.375rem; /* design-token-authority: allow */
  --ifi-yearend-action-border: 0; /* design-token-authority: allow */
  --ifi-yearend-disabled-opacity: 0.7; /* design-token-authority: allow */
  --ifi-yearend-statement-row-align: flex-start; /* design-token-authority: allow */
  --ifi-yearend-statement-row-direction: column; /* design-token-authority: allow */
  --ifi-yearend-statement-row-gap: 0.25rem; /* design-token-authority: allow */
  --ifi-yearend-control-surface: var(--color-surface, #fff); /* design-token-authority: allow */
  --ifi-yearend-primary-surface: var(--color-primary, #2563eb); /* design-token-authority: allow */
  --ifi-yearend-control-border: 1px solid var(--color-border, #d1d5db); /* design-token-authority: allow */
  --ifi-yearend-label-text: var(--color-text, #111317); /* design-token-authority: allow */
  --ifi-yearend-control-text: var(--color-text, #111317); /* design-token-authority: allow */
  --ifi-yearend-muted-text: var(--color-text-muted, #6b7280); /* design-token-authority: allow */
  --ifi-yearend-pending-text: var(--color-text-muted, #9ca3af); /* design-token-authority: allow */
  --ifi-yearend-inverse-text: #fff; /* design-token-authority: allow */
  --ifi-yearend-success-text: var(--color-success, #16a34a); /* design-token-authority: allow */
  --ifi-yearend-danger-text: var(--color-danger, #dc2626); /* design-token-authority: allow */
  --ifi-yearend-micro-font: 0.75rem; /* design-token-authority: allow */
  --ifi-yearend-body-font: 0.875rem; /* design-token-authority: allow */
  --ifi-yearend-action-weight: 500; /* design-token-authority: allow */

  /* C-6 - operational trust chip/window chrome */
  --ifi-operational-trust-safe-text: rgba(129,230,180,0.85); /* design-token-authority: allow */
  --ifi-operational-trust-watch-text: rgba(232,213,150,0.85); /* design-token-authority: allow */
  --ifi-operational-trust-attention-text: rgba(232,180,160,0.88); /* design-token-authority: allow */
  --ifi-operational-trust-replay-text: rgba(160,190,240,0.70); /* design-token-authority: allow */
  --ifi-operational-trust-window-surface: rgba(20,22,32,0.82); /* design-token-authority: allow */
  --ifi-operational-trust-chip-surface: rgba(255,255,255,0.06); /* design-token-authority: allow */
  --ifi-operational-trust-transparent-surface: transparent; /* design-token-authority: allow */
  --ifi-operational-trust-divider-surface: rgba(255,255,255,0.06); /* design-token-authority: allow */
  --ifi-operational-trust-window-border: 1px solid rgba(255,255,255,0.10); /* design-token-authority: allow */
  --ifi-operational-trust-chip-border: 1px solid rgba(255,255,255,0.10); /* design-token-authority: allow */
  --ifi-operational-trust-control-border: 1px solid rgba(255,255,255,0.12); /* design-token-authority: allow */
  --ifi-operational-trust-window-shadow: 0 12px 32px rgba(0,0,0,0.28), 0 0 0 1px rgba(129,140,248,0.08); /* design-token-authority: allow */
  --ifi-operational-trust-window-width: min(360px, calc(100% - 40px)); /* design-token-authority: allow */
  --ifi-operational-trust-window-z-index: 2147483040; /* design-token-authority: allow */
  --ifi-operational-trust-chip-z-index: 10; /* design-token-authority: allow */
  --ifi-operational-trust-window-padding: 20px 22px 18px 22px; /* design-token-authority: allow */
  --ifi-operational-trust-chip-padding: 8px 14px; /* design-token-authority: allow */
  --ifi-operational-trust-close-padding: 8px 16px; /* design-token-authority: allow */
  --ifi-operational-trust-gap: 8px; /* design-token-authority: allow */
  --ifi-operational-trust-kicker-margin: 12px; /* design-token-authority: allow */
  --ifi-operational-trust-title-margin: 10px; /* design-token-authority: allow */
  --ifi-operational-trust-narrative-margin: 14px; /* design-token-authority: allow */
  --ifi-operational-trust-state-margin: 8px; /* design-token-authority: allow */
  --ifi-operational-trust-divider-margin: 14px 0; /* design-token-authority: allow */
  --ifi-operational-trust-guidance-margin: 16px; /* design-token-authority: allow */
  --ifi-operational-trust-dot-size: 8px; /* design-token-authority: allow */
  --ifi-operational-trust-divider-height: 1px; /* design-token-authority: allow */
  --ifi-operational-trust-icon-sm: 14px; /* design-token-authority: allow */
  --ifi-operational-trust-window-blur: blur(24px) saturate(140%); /* design-token-authority: allow */
  --ifi-operational-trust-chip-blur: blur(12px); /* design-token-authority: allow */
  --ifi-operational-trust-window-animation: ifi-island-arrive 0.35s cubic-bezier(0.2,0.8,0.2,1) backwards; /* design-token-authority: allow */
  --ifi-operational-trust-label-font: 11px; /* design-token-authority: allow */
  --ifi-operational-trust-label-weight: 500; /* design-token-authority: allow */
  --ifi-operational-trust-label-letter-spacing: 0.12em; /* design-token-authority: allow */
  --ifi-operational-trust-label-line-height: 1.4; /* design-token-authority: allow */
  --ifi-operational-trust-label-transform: uppercase; /* design-token-authority: allow */
  --ifi-operational-trust-title-font: 17px; /* design-token-authority: allow */
  --ifi-operational-trust-title-weight: 500; /* design-token-authority: allow */
  --ifi-operational-trust-body-font: 13px; /* design-token-authority: allow */
  --ifi-operational-trust-body-weight: 400; /* design-token-authority: allow */
  --ifi-operational-trust-state-font: 12px; /* design-token-authority: allow */
  --ifi-operational-trust-line-compact: 1.5; /* design-token-authority: allow */
  --ifi-operational-trust-body-line: 1.6; /* design-token-authority: allow */
  --ifi-operational-trust-letter-spacing: 0; /* design-token-authority: allow */
  --ifi-operational-trust-guidance-style: italic; /* design-token-authority: allow */
}

.ifi-operational-trust-window {
  box-shadow: 0 12px 32px rgba(0,0,0,0.28), 0 0 0 1px rgba(129,140,248,0.08);
  box-shadow: var(--ifi-operational-trust-window-shadow); /* design-token-authority: allow */
}

.ifi-page {
  /* L-light-1 V3 design tokens — hierarchie 4 niveaux assumee, depth visible. */
  --ifi-glass-strong: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.96) 50%, rgba(216,226,242,0.92) 100%);
  --ifi-sh-inset:     0 0.5px 0 rgba(255,255,255,1) inset;
  --ifi-sh-contact:   0 1px 3px rgba(26,31,42,0.10);
  --ifi-sh-float-sm:  0 6px 18px rgba(26,31,42,0.12);
  --ifi-sh-float-md:  0 16px 36px rgba(26,31,42,0.16);
  --ifi-sh-float-lg:  0 24px 48px rgba(26,31,42,0.20);
  --ifi-border-subtle: 0.5px solid rgba(26,31,42,0.14);
  --ifi-border-medium: 0.5px solid rgba(26,31,42,0.20);
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  font-family: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  -webkit-font-smoothing: antialiased;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}
.ifi-page.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  min-height: 0;
}
.ifi-page.is-fullscreen .ifi-top-pebble {
  z-index: 2147483001;
}
.ifi-page.day {
  background:
    radial-gradient(ellipse 60% 55% at 22% 18%, rgba(255,253,247,0.55) 0%, transparent 55%),
    radial-gradient(ellipse 55% 65% at 78% 72%, rgba(232,224,242,0.40) 0%, transparent 60%),
    radial-gradient(ellipse 95% 60% at 50% 100%, rgba(255,213,0, 0.18) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(255,213,0, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, #DDE3ED 0%, #B8C4D8 100%);
  background:
    var(--ifi-day-backdrop-warm-surface),
    var(--ifi-day-backdrop-lilac-surface),
    radial-gradient(ellipse 95% 60% at 50% 100%, var(--ifi-gold-surface-ambient) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 100% 100%, var(--ifi-gold-surface-selected) 0%, transparent 60%),
    var(--ifi-day-backdrop-base-surface);
}

.ifi-page .ifi-stage {
  width: 1320px;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  flex: 1 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Topbar */
.ifi-page .ifi-topbar {
  position: relative; z-index: 10;
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.96) 50%, rgba(216,226,242,0.92) 100%);
  background: var(--ifi-glass-strong);
  border: 0.5px solid rgba(26,31,42,0.14);
  border: var(--ifi-border-subtle);
  border-radius: 14px; padding: 14px 22px;
  display: flex; justify-content: space-between; align-items: center;
  box-shadow: 0 0.5px 0 rgba(255,255,255,1) inset, 0 1px 3px rgba(26,31,42,0.10), 0 16px 36px rgba(26,31,42,0.16);
  box-shadow: var(--ifi-sh-inset), var(--ifi-sh-contact), var(--ifi-sh-float-md);
  transition: max-height 0.45s cubic-bezier(0.2,0.8,0.2,1), opacity 0.35s ease, padding 0.4s ease, margin-bottom 0.4s ease, transform 0.4s ease;
  max-height: 80px;
}
.ifi-page .ifi-topbar.collapsed {
  max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -18px;
  opacity: 0; transform: translateY(-12px); pointer-events: none; overflow: hidden;
}
.ifi-page .ifi-brand { display: flex; align-items: center; gap: 18px; }
.ifi-page .ifi-mark { display: flex; align-items: baseline; gap: 8px; }
.ifi-page .ifi-mark-i {
  width: 26px; height: 26px;
  background: linear-gradient(180deg, #1A1F2A, #0F131A);
  background: var(--ifi-graphite-brand-mark-surface); color: #F5F7FA; color: var(--ifi-on-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; border-radius: 6px; letter-spacing: -0.03em;
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 1px 2px rgba(26,31,42,0.30);
  box-shadow: 0 1px 0 var(--ifi-ivory-highlight-quiet) inset, 0 1px 2px var(--ifi-graphite-shadow-dramatic);
  border: 0; padding: 0; font-family: inherit; cursor: pointer;
}
.ifi-page .ifi-mark-i:focus-visible { outline: 2px solid #D6B16A; outline: 2px solid var(--ifi-soft-gold); outline-offset: 2px; }
.ifi-page .ifi-mark-name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.ifi-page .ifi-tenant {
  font-size: 11px; opacity: 0.55; letter-spacing: 0.10em; text-transform: uppercase;
  padding-left: 14px; border-left: 0.5px solid rgba(26,31,42,0.20); border-left: 0.5px solid var(--ifi-graphite-border-strong); margin-left: 4px;
}
.ifi-page .ifi-crumbs { display: flex; align-items: center; gap: 8px; font-size: 12px; opacity: 0.65; }
.ifi-page .ifi-crumbs-sep { opacity: 0.30; }
.ifi-page .ifi-crumbs-here { opacity: 1; font-weight: 500; }
.ifi-page .ifi-topbar-right { display: flex; align-items: center; gap: 6px; }
.ifi-page .ifi-kbd {
  font-size: 10px; padding: 4px 8px;
  background: rgba(26,31,42,0.05);
  background: var(--ifi-graphite-surface-subtle); border-radius: 5px;
  letter-spacing: 0.04em; opacity: 0.78; border: 0.5px solid rgba(26,31,42,0.10); border: 0.5px solid var(--ifi-graphite-border-subtle);
  margin-right: 6px;
  white-space: nowrap; flex-shrink: 0;
}
.ifi-page .ifi-icon-btn {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; opacity: 0.72;
  position: relative; color: inherit;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.ifi-page .ifi-icon-btn:hover { opacity: 1; background: rgba(26,31,42,0.04); background: var(--ifi-graphite-surface-quiet); }
.ifi-page .ifi-icon-btn svg { width: 16px; height: 16px; }
/* F2 — topbar controls are now real <button> elements (honest chrome):
   neutralize the UA button chrome, keep the existing visual language. */
.ifi-page button.ifi-kbd,
.ifi-page button.ifi-icon-btn {
  appearance: none; -webkit-appearance: none;
  background-clip: padding-box;
  font: inherit; color: inherit;
  cursor: pointer;
}
.ifi-page button.ifi-icon-btn { background: transparent; border: none; }
.ifi-page button.ifi-kbd:hover { opacity: 1; background: rgba(26,31,42,0.08); background: var(--ifi-graphite-surface-soft); }
.ifi-page .ifi-bell-badge {
  position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #B85C5C;
  background: var(--ifi-danger);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.95), 0 0 8px rgba(184,92,92,0.5);
  box-shadow: var(--ifi-bell-badge-alert-shadow); /* design-token-authority: allow */
  animation: ifi-badge-pulse 2.5s ease-in-out infinite;
}
@keyframes ifi-badge-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.18); opacity: 0.85; }
}

/* Top pebble — verrou aspect 1:1 defensif blinde fullscreen flex parent quirks */
.ifi-page .ifi-top-pebble {
  position: fixed; top: 16px; left: 16px;
  width: 24px; height: 24px;
  min-width: 24px; min-height: 24px;
  max-width: 24px; max-height: 24px;
  flex: 0 0 24px;
  align-self: center;
  padding: 0;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border-radius: 50%;
  background: linear-gradient(180deg, #1A1F2A 0%, #0F131A 100%);
  background: var(--ifi-graphite-brand-pebble-surface);
  border: 0; cursor: pointer; z-index: 92;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 2px 4px rgba(26,31,42,0.20), 0 6px 18px rgba(26,31,42,0.14);
  box-shadow: 0 1px 0 var(--ifi-ivory-highlight-quiet) inset, 0 2px 4px var(--ifi-graphite-shadow-strong), 0 6px 18px var(--ifi-graphite-shadow-raised);
  transition: width 0.35s, height 0.35s, top 0.45s, left 0.45s, min-width 0.35s, min-height 0.35s, max-width 0.35s, max-height 0.35s;
}
.ifi-page .ifi-top-pebble:hover {
  width: 32px; height: 32px;
  min-width: 32px; min-height: 32px;
  max-width: 32px; max-height: 32px;
  flex: 0 0 32px;
  top: 14px; left: 14px;
}
.ifi-page .ifi-top-pebble:focus-visible { outline: 2px solid #F5F7FA; outline: 2px solid var(--ifi-focus-on-strong); outline-offset: 2px; }
.ifi-page .ifi-pebble-icon {
  width: 11px; height: 11px; color: #F5F7FA; color: var(--ifi-on-strong); opacity: 0.85;
  transition: width 0.3s, height 0.3s, opacity 0.3s;
}
.ifi-page .ifi-top-pebble:hover .ifi-pebble-icon { width: 14px; height: 14px; opacity: 1; }

/* Headline */
.ifi-page .ifi-headline {
  margin-top: 18px; padding: 14px 22px;
  display: flex; justify-content: space-between; align-items: flex-end; flex-shrink: 0;
}
.ifi-page .ifi-eyebrow {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  opacity: 0.55; margin-bottom: 4px; font-weight: 600;
}
.ifi-page .ifi-h1 { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
.ifi-page .ifi-tb-cycle-sub {
  display: block;
  font-size: 9px; letter-spacing: 0.10em; text-transform: uppercase;
  font-weight: 500; opacity: 0.55; margin-top: 1px; line-height: 1.2;
}
.ifi-page .ifi-h-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ifi-page .ifi-h-status { display: flex; align-items: center; gap: 10px; font-size: 12px; opacity: 0.65; }
.ifi-page .ifi-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #8FA99A;
  background: var(--ifi-sage); box-shadow: 0 0 0 3px rgba(31,124,80,0.15); box-shadow: var(--ifi-live-dot-ring-shadow); /* design-token-authority: allow */
}
.ifi-page .ifi-h-time {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  opacity: 0.55; font-weight: 600;
}

/* Luna zone (conversational mode) */
.ifi-page.conversational-mode .ifi-luna-zone {
  display: flex; flex-direction: column; flex: 1 1; min-height: 0;
  overflow: hidden; position: relative; margin-top: 6px;
}
.ifi-page.conversational-mode .ifi-luna-scroll-area {
  flex: 1 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 6px 24px 18px;
  display: flex; flex-direction: column;
}
.ifi-page.conversational-mode .ifi-luna-conversation {
  max-width: 720px; width: 100%;
  margin-left: auto; margin-right: auto;
  display: flex; flex-direction: column; gap: 14px;
}

/* Luna chip avatar (sticker conversational) */
.ifi-page .ifi-luna-chip {
  align-self: flex-start;
  display: flex; align-items: center;
  background: transparent; box-shadow: none; border-radius: 50%;
}
.ifi-page .ifi-luna-chip .ifi-ava {
  width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #D6B16A 0%, #111317 50%, #1A2D80 100%);
  background: var(--ifi-luna-avatar-core-surface);
  color: #F5F7FA;
  color: var(--ifi-on-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 600; letter-spacing: -0.02em;
  position: relative;
  transition: box-shadow 1.2s ease;
  cursor: default;
}
.ifi-page .ifi-luna-chip[data-mood="alert"] .ifi-ava {
  box-shadow: 0 1px 0 rgba(255,255,255,0.30) inset, 0 0 0 3px rgba(212,148,40,0.25), 0 0 14px rgba(212,148,40,0.30), 0 1px 4px rgba(255,213,0,0.40);
  box-shadow: var(--ifi-luna-alert-shadow); /* design-token-authority: allow */
  animation: ifi-mood-alert 3s ease-in-out infinite;
}
@keyframes ifi-mood-alert {
  0%, 100% { box-shadow: 0 1px 0 rgba(255,255,255,0.30) inset, 0 0 0 3px rgba(212,148,40,0.25), 0 0 14px rgba(212,148,40,0.30), 0 1px 4px rgba(255,213,0,0.40); box-shadow: var(--ifi-luna-alert-shadow); /* design-token-authority: allow */ }
  50% { box-shadow: 0 1px 0 rgba(255,255,255,0.30) inset, 0 0 0 4px rgba(212,148,40,0.18), 0 0 20px rgba(212,148,40,0.25), 0 1px 4px rgba(255,213,0,0.40); box-shadow: var(--ifi-luna-alert-pulse-peak-shadow); /* design-token-authority: allow */ }
}

/* Stagger d'arrivee — applique uniquement aux elements ciblees, jamais via selector global. */
@keyframes ifi-island-arrive {
  0% { transform: translateY(20px) scale(0.97); opacity: 0; }
  60% { transform: translateY(-2px) scale(1.005); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.ifi-page .ifi-luna-chip,
.ifi-page .ifi-luna-msg,
.ifi-page.conversational-mode .ifi-luna-input {
  animation: ifi-island-arrive 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.ifi-page .ifi-luna-chip { animation-delay: 0.18s; }
.ifi-page .ifi-luna-msg:nth-of-type(2) { animation-delay: 0.30s; }
.ifi-page .ifi-luna-msg:nth-of-type(3) { animation-delay: 0.42s; }
.ifi-page .ifi-luna-msg:nth-of-type(4) { animation-delay: 0.55s; }
.ifi-page.conversational-mode .ifi-luna-input { animation-delay: 0.68s; }

/* Chips-row statique sous la conversation (sans onClick — les chips sont rendus
   inertes pour ce delta, le wiring openPanel viendra avec le lot panels L5). */
.ifi-page .ifi-chips-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-self: flex-start;
  margin-top: 4px; margin-bottom: 8px;
}
.ifi-page .ifi-chip {
  font-size: 12.5px; padding: 8px 14px; border-radius: 999px;
  cursor: default; font-weight: 500;
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.96) 50%, rgba(216,226,242,0.92) 100%);
  background: var(--ifi-glass-strong);
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 0.5px 0 rgba(255,255,255,1) inset, 0 1px 3px rgba(26,31,42,0.10), 0 6px 18px rgba(26,31,42,0.12);
  box-shadow: var(--ifi-sh-inset), var(--ifi-sh-contact), var(--ifi-sh-float-sm);
  position: relative;
}
.ifi-page button.ifi-chip-button:hover {
  transform: translateY(-2px);
  background: linear-gradient(165deg, rgba(255,213,0,0.12) 0%, rgba(255,213,0,0.22) 100%);
  background: var(--ifi-gold-chip-hover-surface);
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  box-shadow: 0 0.5px 0 rgba(255,255,255,1) inset, 0 3px 8px rgba(26,31,42,0.14), 0 18px 40px rgba(255,213,0,0.32);
  box-shadow: var(--ifi-sh-inset), 0 3px 8px var(--ifi-graphite-shadow-raised), 0 18px 40px var(--ifi-gold-shadow-chip-hover);
}
.ifi-page button.ifi-chip-button:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 0.5px 0 rgba(255,255,255,1) inset, 0 1px 3px rgba(26,31,42,0.14);
  box-shadow: var(--ifi-sh-inset), 0 1px 3px var(--ifi-graphite-shadow-raised);
  transition: transform 60ms ease, box-shadow 60ms ease;
}

/* L-conv — chip recommandee Luna : ring bleu permanent. Reste un span inerte
   (pas de cursor pointer, pas d'onClick, pas de focus, pas de title trompeur). */
.ifi-page .ifi-chip-primary {
  box-shadow:
    0 0 0 1.5px #D6B16A,
    0 0.5px 0 rgba(255,255,255,0.95) inset,
    0 1px 2px rgba(26,31,42,0.04),
    3px 5px 10px rgba(26,31,42,0.06);
  box-shadow:
    0 0 0 1.5px var(--ifi-soft-gold),
    0 0.5px 0 var(--ifi-ivory-highlight-ring) inset,
    0 1px 2px var(--ifi-graphite-shadow-whisper),
    3px 5px 10px var(--ifi-graphite-shadow-faint);
}

/* Luna messages */
.ifi-page .ifi-luna-msg {
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.96) 50%, rgba(216,226,242,0.92) 100%);
  background: var(--ifi-glass-strong);
  border: 0.5px solid rgba(26,31,42,0.14);
  border: var(--ifi-border-subtle);
  border-radius: 14px; padding: 14px 18px;
  font-size: 13.5px; line-height: 1.55;
  box-shadow: 0 0.5px 0 rgba(255,255,255,1) inset, 0 1px 3px rgba(26,31,42,0.10), 0 16px 36px rgba(26,31,42,0.16);
  box-shadow: var(--ifi-sh-inset), var(--ifi-sh-contact), var(--ifi-sh-float-md);
  align-self: flex-start; max-width: 80%;
  position: relative;
}
.ifi-page .ifi-luna-msg p { font-size: 13.5px; line-height: 1.55; margin: 0 0 6px 0; }
.ifi-page .ifi-luna-msg .ifi-msg-ref { color: #B85C5C; color: var(--ifi-danger); font-weight: 500; }
.ifi-page .ifi-luna-msg p:last-child { margin-bottom: 0; }
.ifi-page .ifi-luna-msg-time {
  position: absolute; top: -9px; right: 14px;
  font-size: 9px; opacity: 0.50; letter-spacing: 0.08em;
  background: rgba(255,255,255,0.92);
  background: var(--ifi-ivory-surface-shell); padding: 2px 8px; border-radius: 999px;
  font-weight: 500;
  box-shadow: 0 0.5px 0 rgba(255,255,255,0.95) inset, 0 1px 2px rgba(26,31,42,0.04);
  box-shadow: 0 0.5px 0 var(--ifi-ivory-highlight-ring) inset, 0 1px 2px var(--ifi-graphite-shadow-whisper);
}

/* Voice button (Web Speech TTS) — revele au hover du parent .ifi-luna-msg.
   Pas de class .speaking ni keyframe pulse pour cette PR (necessiterait du
   state global pour rester coherent entre messages). */
/* Verrou structurel 1:1 — sans `aspect-ratio` + bornes width/height + padding:0,
   le bouton est stretch verticalement en ovale par le flex/positioning du parent
   .ifi-luna-msg quand l'écran rétrécit. Même pattern que .ifi-send et
   .ifi-top-pebble post-PR #65 V3+. */
.ifi-page .ifi-luna-msg .ifi-voice-btn {
  position: absolute; bottom: 6px; right: 8px;
  width: 22px; height: 22px;
  min-width: 22px; min-height: 22px;
  max-width: 22px; max-height: 22px;
  aspect-ratio: 1 / 1;
  flex: 0 0 22px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255,213,0, 0.06);
  background: var(--ifi-gold-surface-soft); color: #8A6E2E; color: var(--ifi-gold-strong);
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; opacity: 0;
  transition: opacity 0.2s ease, transform 0.15s ease, background 0.2s ease;
}
.ifi-page .ifi-luna-msg:hover .ifi-voice-btn { opacity: 0.65; }
.ifi-page .ifi-luna-msg .ifi-voice-btn:hover {
  opacity: 1; transform: scale(1.1);
  background: rgba(255,213,0, 0.15);
  background: var(--ifi-gold-surface-strong);
}
.ifi-page .ifi-luna-msg .ifi-voice-btn:focus-visible {
  opacity: 1;
  outline: 2px solid #D6B16A;
  outline: 2px solid var(--ifi-soft-gold); outline-offset: 2px;
}
.ifi-page .ifi-luna-msg .ifi-voice-btn svg { width: 11px; height: 11px; }
.ifi-page .ifi-luna-msg.is-user {
  align-self: flex-end;
  background: linear-gradient(165deg, #D6B16A, #8A6E2E);
  background: linear-gradient(165deg, var(--ifi-soft-gold), var(--ifi-gold-strong)); color: #F5F7FA; color: var(--ifi-on-strong);
  box-shadow: 0 1px 2px rgba(26,31,42,0.10), 6px 10px 24px rgba(26,31,42,0.15);
  box-shadow: 0 1px 2px var(--ifi-graphite-shadow-subtle), 6px 10px 24px var(--ifi-graphite-shadow-float);
}

/* Panel placeholder */
.ifi-page .ifi-island {
  background: linear-gradient(165deg, rgba(255,255,255,0.99), rgba(248,251,255,0.94));
  background: var(--ifi-ivory-island-surface);
  border-radius: 16px; padding: 18px 22px;
  box-shadow: 0 0.5px 0 rgba(255,255,255,0.95) inset, 0 1px 2px rgba(26,31,42,0.04), 6px 10px 24px rgba(26,31,42,0.07);
  box-shadow: 0 0.5px 0 var(--ifi-ivory-highlight-ring) inset, 0 1px 2px var(--ifi-graphite-shadow-whisper), 6px 10px 24px var(--ifi-graphite-shadow-soft);
}
.ifi-page .ifi-panel-placeholder { margin-top: 4px; }
.ifi-page .ifi-panel-title { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 4px 0; }
.ifi-page .ifi-panel-sub { font-size: 12px; opacity: 0.55; margin: 0 0 14px 0; }
.ifi-page .ifi-panel-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.ifi-page .ifi-badge { font-size: 11px; padding: 5px 10px; border-radius: 999px; letter-spacing: 0.02em; font-weight: 500; }
.ifi-page .ifi-badge.tone-critical { background: rgba(184,92,92,0.10); background: var(--ifi-danger-surface-soft); color: #B85C5C; color: var(--ifi-danger); }
.ifi-page .ifi-badge.tone-warning  { background: rgba(184,108,31,0.12); background: var(--ifi-warning-surface-soft); color: #B86C1F; color: var(--ifi-cat-amber); }
.ifi-page .ifi-badge.tone-info     { background: rgba(31,124,160,0.12); background: var(--ifi-info-surface-soft); color: #1F7CA0; color: var(--ifi-info-text-strong); }

/* Follow-up chip "Autre" — invite explicitement à écrire dans la textarea
   Luna. Bordure dashed pour signaler "input libre" (vs canned reply), icône
   stylo en préfixe, gap inline avec le label. Le clic déclenche un focus +
   scrollIntoView + pulse animation côté JS (handleAutreReply). */
.ifi-page .ifi-chip-followup-other {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px dashed rgba(255,213,0, 0.55);
  border: 1px dashed var(--ifi-gold-border-focus);
  background: rgba(255,213,0, 0.04);
  background: var(--ifi-gold-surface-quiet);
  color: #8A6E2E;
  color: var(--ifi-gold-strong);
}
.ifi-page .ifi-chip-followup-other:hover,
.ifi-page .ifi-chip-followup-other:focus-visible {
  border-color: rgba(255,213,0, 0.85);
  border-color: var(--ifi-gold-border-emphasis);
  background: rgba(255,213,0, 0.10);
  background: var(--ifi-gold-surface-active);
}
.ifi-page .ifi-chip-other-icon {
  flex: 0 0 13px;
  color: #D6B16A;
  color: var(--ifi-soft-gold);
}

/* Luna input - anchored OUTSIDE scroll area, aligne sur le mockup v20 panels.
   Premium UX 2026-05 : wrapper width:fit-content + textarea width auto piloté
   par JS (resizeLunaInput dans IntegraFloatingIslandsContent.jsx). Le composer
   reste compact au repos, s'élargit horizontalement avec le texte jusqu'à
   LUNA_INPUT_MAX_WIDTH (620px), puis grandit verticalement, puis scroll interne
   au-delà de LUNA_INPUT_MAX_HEIGHT (140px). Les bornes JS et CSS doivent rester
   alignées : LUNA_INPUT_MIN_WIDTH=220 ↔ min-width:220px, idem pour max.
   .is-pulse : animation déclenchée par handleAutreReply quand l'utilisateur
   clique le chip "Écrire ma question à Luna" — attire l'œil vers la textarea
   en plus du focus clavier. */
@keyframes ifi-luna-input-pulse {
  0%   { box-shadow: 0 0.5px 0 rgba(255,255,255,1) inset, 0 1px 3px rgba(26,31,42,0.10), 0 24px 48px rgba(26,31,42,0.20), 0 0 0 0   rgba(255,213,0, 0.55); box-shadow: var(--ifi-sh-inset), var(--ifi-sh-contact), var(--ifi-sh-float-lg), 0 0 0 0   var(--ifi-gold-shadow-pulse-start); }
  60%  { box-shadow: 0 0.5px 0 rgba(255,255,255,1) inset, 0 1px 3px rgba(26,31,42,0.10), 0 24px 48px rgba(26,31,42,0.20), 0 0 0 14px rgba(255,213,0, 0.10); box-shadow: var(--ifi-sh-inset), var(--ifi-sh-contact), var(--ifi-sh-float-lg), 0 0 0 14px var(--ifi-gold-shadow-pulse-mid); }
  100% { box-shadow: 0 0.5px 0 rgba(255,255,255,1) inset, 0 1px 3px rgba(26,31,42,0.10), 0 24px 48px rgba(26,31,42,0.20), 0 0 0 24px rgba(255,213,0, 0); box-shadow: var(--ifi-sh-inset), var(--ifi-sh-contact), var(--ifi-sh-float-lg), 0 0 0 24px var(--ifi-gold-shadow-pulse-end); }
}
.ifi-page.conversational-mode .ifi-luna-input.is-pulse {
  animation: ifi-luna-input-pulse 0.9s ease-out;
}
.ifi-page.conversational-mode .ifi-luna-input {
  flex: none;
  margin: 0 24px 14px;
  width: fit-content;
  min-width: 280px;
  max-width: min(720px, calc(100vw - 48px));
  align-self: center;
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.96) 50%, rgba(216,226,242,0.92) 100%);
  background: var(--ifi-glass-strong);
  border: 0.5px solid rgba(26,31,42,0.14);
  border: var(--ifi-border-subtle);
  border-radius: 14px; padding: 9px 9px 9px 16px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 0.5px 0 rgba(255,255,255,1) inset, 0 1px 3px rgba(26,31,42,0.10), 0 24px 48px rgba(26,31,42,0.20);
  box-shadow: var(--ifi-sh-inset), var(--ifi-sh-contact), var(--ifi-sh-float-lg);
  z-index: 5;
}
.ifi-page .ifi-mic {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; opacity: 0.55; flex-shrink: 0;
}
.ifi-page .ifi-luna-input-field {
  width: auto;
  min-width: 220px;
  max-width: 620px;
  border: 0; background: transparent; outline: 0;
  font: inherit; font-family: inherit; font-size: 13.5px; letter-spacing: -0.005em;
  color: inherit;
  padding: 3px 4px; appearance: none;
  resize: none;
  line-height: 1.45;
  min-height: 24px; max-height: 140px; overflow-y: hidden;
  box-sizing: border-box;
  word-break: break-word; overflow-wrap: anywhere; white-space: pre-wrap;
  scrollbar-width: thin; scrollbar-color: rgba(255,213,0, 0.30) transparent; scrollbar-color: var(--ifi-gold-scrollbar-surface) transparent;
}
/* Mobile : composer fluide qui occupe la viewport - 32px (16px de chaque côté).
   width:100% sur la textarea pour qu'elle suive le wrapper, et min-width:0 pour
   permettre le shrink (sinon min-width:220px ferait dépasser sur petit écran). */
@media (max-width: 768px) {
  .ifi-page.conversational-mode .ifi-luna-input {
    width: calc(100vw - 32px);
    min-width: 0;
    max-width: calc(100vw - 32px);
  }
  .ifi-page .ifi-luna-input-field {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}
.ifi-page .ifi-luna-input-field::placeholder { opacity: 0.45; color: inherit; font-style: normal; }
.ifi-page .ifi-luna-input-field,
.ifi-page .ifi-luna-input-field:hover,
.ifi-page .ifi-luna-input-field:focus,
.ifi-page .ifi-luna-input-field:focus-visible,
.ifi-page .ifi-luna-input-field:active {
  outline: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  -webkit-tap-highlight-color: transparent;
}
.ifi-page .ifi-luna-input-field::-webkit-scrollbar { width: 8px; }
.ifi-page .ifi-luna-input-field::-webkit-scrollbar-thumb { background: rgba(255,213,0, 0.30); background: var(--ifi-gold-scrollbar-surface); border-radius: 4px; }
.ifi-page .ifi-luna-input-field::-webkit-scrollbar-thumb:hover { background: rgba(255,213,0, 0.50); background: var(--ifi-gold-scrollbar-hover-surface-strong); }
/* Send button — verrou aspect 1:1 defensif blinde fullscreen flex parent quirks */
.ifi-page .ifi-send {
  width: 32px; height: 32px;
  min-width: 32px; min-height: 32px;
  max-width: 32px; max-height: 32px;
  flex: 0 0 32px;
  align-self: center;
  padding: 0;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #D6B16A, #8A6E2E);
  background: radial-gradient(circle at 30% 30%, var(--ifi-soft-gold), var(--ifi-gold-strong)); color: #F5F7FA; color: var(--ifi-on-strong);
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 0 rgba(255,255,255,0.20) inset, 0 1px 3px rgba(255,213,0,0.35), 0 4px 10px rgba(255,213,0,0.20);
  box-shadow: 0 1px 0 var(--ifi-ivory-highlight-soft) inset, 0 1px 3px var(--ifi-gold-shadow-send-soft), 0 4px 10px var(--ifi-gold-shadow-send-ambient);
  transition: opacity 0.2s, transform 0.2s;
}
.ifi-page .ifi-send:hover:not(:disabled) { transform: translateY(-1px); }
.ifi-page .ifi-send:active:not(:disabled) { transform: translateY(0) scale(0.95); transition: transform 60ms ease; }
.ifi-page .ifi-send:disabled { opacity: 0.35; cursor: not-allowed; }
.ifi-page .ifi-send:focus-visible { outline: 2px solid #F5F7FA; outline: 2px solid var(--ifi-focus-on-strong); outline-offset: 2px; }

.ifi-page button.ifi-chip-button {
  border: 0; font: inherit; font-family: inherit; cursor: pointer;
}
.ifi-page button.ifi-chip-button:focus-visible {
  outline: 2px solid #D6B16A;
  outline: 2px solid var(--ifi-soft-gold); outline-offset: 2px;
}
/* PLAN-C-D1 — living manual launcher, stacked above the settings chip. */
.ifi-page button.ifi-manual-chip {
  position: fixed; bottom: 140px; right: 16px; z-index: 300;
}
/* PLAN-C-M2 — guidance / orientation launcher, stacked above the manual chip. */
.ifi-page button.ifi-guidance-chip {
  position: fixed; bottom: 184px; right: 16px; z-index: 300;
}
/* YEAR-END-CENTER-1A — Year-end Center launcher, stacked above the guidance chip. */
.ifi-page button.ifi-yearend-chip {
  position: fixed; bottom: 228px; right: 16px; z-index: 300;
}
/* BRAND-IDENTITY-1A — Brand & Identity launcher (master only), above year-end chip. */
.ifi-page button.ifi-brand-chip {
  position: fixed; bottom: 272px; right: 16px; z-index: 300;
}
.ifi-page .ifi-panel {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  /* S1.0 (PR #TBD) — panel respiration. Width réduite pour laisser un
     slot visible (~380px) à Luna sur les résolutions courantes (1366,
     1440, 1536) où la précédente formule `calc(100vw - 32px)` écrasait
     visuellement la conversation derrière. Ne pas régresser vers
     calc(100vw - 32px) — cf. test invariant `ifiPanelDominance.test.js`. */
  width: min(1100px, calc(100vw - 380px));
  max-height: calc(100vh - 64px);
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.96) 50%, rgba(216,226,242,0.92) 100%);
  background: var(--ifi-glass-strong);
  border: 0.5px solid rgba(26,31,42,0.14);
  border: var(--ifi-border-subtle);
  border-radius: 14px;
  box-shadow: 0 0.5px 0 rgba(255,255,255,1) inset, 0 2px 6px rgba(26,31,42,0.12), 0 16px 40px rgba(26,31,42,0.18), 0 40px 96px rgba(26,31,42,0.32);
  box-shadow: var(--ifi-sh-inset), 0 2px 6px var(--ifi-graphite-shadow-muted), 0 16px 40px var(--ifi-graphite-shadow-depth), 0 40px 96px var(--ifi-graphite-shadow-maximum);
  z-index: 100;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* === S1.1 cockpit-active mode — Luna companion presence ================
   When .ifi-page carries the `is-cockpit-active` modifier (toggled when
   workspace.panels.primary !== null), Luna stays in a 320px zone on the
   left, and the centered panel is recentered into the right space. The
   zone is NOT a container — it carries no border, no separating shadow,
   and minimal fill. Subtraction over addition : Luna reads as a
   presence, not a sidebar. (S1.1.fix : dissolve mechanism perception.) */
.ifi-page.is-cockpit-active .ifi-luna-zone {
  position: fixed;
  left: 0;
  top: 80px;
  bottom: 0;
  width: 320px;
  z-index: 50;
  padding: 0;
  background: rgba(245, 247, 250, 0.14);
  background: var(--ifi-sidecar-glass-surface);
  backdrop-filter: blur(6px) saturate(108%);
  -webkit-backdrop-filter: blur(6px) saturate(108%);
  border-right: none;
  box-shadow: none;
}
.ifi-page.is-cockpit-active .ifi-luna-scroll-area {
  padding: 8px 14px 14px;
}
.ifi-page.is-cockpit-active .ifi-luna-conversation {
  max-width: 100%;
}
.ifi-page.is-cockpit-active .ifi-panel {
  /* Recenter the panel in the space right of the 320px Luna rail.
     +160px = 320/2 shifts the centerpoint past the rail. */
  transform: translate(calc(-50% + 160px), -50%);
}

.ifi-page .ifi-panel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px 12px 18px;
  border-bottom: 0.5px solid rgba(26,31,42,0.06);
  border-bottom: 0.5px solid var(--ifi-graphite-border-faint);
  flex-shrink: 0;
}
.ifi-page .ifi-panel-h3 { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.ifi-page .ifi-panel-head-right { display: flex; align-items: center; gap: 12px; }
.ifi-page .ifi-mode-demo {
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; padding: 4px 9px; border-radius: 999px;
  background: rgba(212,148,40,0.12);
  background: var(--ifi-warning-gold-surface-soft); color: #B86C1F; color: var(--ifi-cat-amber);
  border: 0.5px solid rgba(212,148,40,0.30);
  border: 0.5px solid var(--ifi-warning-gold-border-soft);
}
/* W1A — live-substrate badge on the employees panel: real tenant data
   (read-only) or an honest unavailable state. Same pill language as the
   demo badge, distinct palette so real vs demo reads at a glance. */
.ifi-page .ifi-mode-live {
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; padding: 4px 9px; border-radius: 999px;
  background: rgba(31,124,80,0.10);
  background: var(--ifi-success-surface-soft); color: #047857; color: var(--ifi-success, var(--ifi-status-success));
  border: 0.5px solid rgba(4,120,87,0.28);
  border: 0.5px solid var(--ifi-success-border-live);
}
.ifi-page .ifi-mode-live.is-unavailable {
  background: rgba(107,114,128,0.10);
  background: var(--ifi-neutral-surface-soft); color: #8E918B; color: var(--ifi-muted, var(--ifi-status-neutral));
  border-color: rgba(107,114,128,0.28);
  border-color: var(--ifi-neutral-border-soft);
}
/* MVP P2 honesty — per-payslip engine calculation_warnings chip. */
.ifi-page .ifi-payslip-warning-chip {
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; padding: 4px 9px; border-radius: 999px; cursor: help;
  background: rgba(180,83,9,0.07);
  background: var(--ifi-status-warning-surface-subtle); color: #b45309; color: var(--ifi-status-warning);
  border: 0.5px solid rgba(180,83,9,0.18);
  border: 0.5px solid var(--ifi-status-warning-border-soft);
}
.ifi-page .ifi-panel-body { flex: 1 1; min-height: 0; padding: 0; overflow-y: auto; }
.ifi-page .ifi-panel-body,
.ifi-page .ifi-cockpit-table-wrap {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,213,0, 0.30) transparent;
  scrollbar-color: var(--ifi-gold-scrollbar-surface) transparent;
}
.ifi-page .ifi-panel-body::-webkit-scrollbar,
.ifi-page .ifi-cockpit-table-wrap::-webkit-scrollbar { width: 9px; height: 9px; }
.ifi-page .ifi-panel-body::-webkit-scrollbar-thumb,
.ifi-page .ifi-cockpit-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(255,213,0, 0.25);
  background: var(--ifi-gold-scrollbar-surface-soft); border-radius: 5px;
  border: 2px solid transparent; background-clip: padding-box;
}
.ifi-page .ifi-panel-body::-webkit-scrollbar-thumb:hover,
.ifi-page .ifi-cockpit-table-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(255,213,0, 0.45);
  background: var(--ifi-gold-scrollbar-hover-surface); background-clip: padding-box;
}
.ifi-page .ifi-panel-close {
  background: rgba(26,31,42,0.05);
  background: var(--ifi-graphite-surface-subtle);
  border: 0; padding: 6px 14px; border-radius: 999px;
  font: inherit; font-size: 12px; cursor: pointer;
  color: inherit; opacity: 0.85;
}
.ifi-page .ifi-panel-close:hover { background: rgba(184,92,92,0.10); background: var(--ifi-danger-surface-soft); color: #B85C5C; color: var(--ifi-danger); opacity: 1; }
.ifi-page .ifi-panel-close:focus-visible { outline: 2px solid #D6B16A; outline: 2px solid var(--ifi-soft-gold); outline-offset: 2px; }

/* =========================================================================
   W1-MACRO (2026-05-17) — Panel controls + Split view + Luna mode
   -------------------------------------------------------------------------
   Discipline ratifiée :
     - 4 controls visibles et calmes (maximize / minimize / restore / close)
     - Split view max 2 panels (horizontal | vertical)
     - Luna compact (320px rail) | expanded (760px zone)
     - Z-index reste viewport-normal (PAS d'escape fullscreen 2147483000)
     - Aucune position pixel, aucun drag, aucun resize manuel
     - CSS-driven uniquement, transitions calmes
   ========================================================================= */

/* Panel control buttons (header chrome) — calmer, no spectacular hover. */
.ifi-page .ifi-panel-control {
  background: rgba(26,31,42,0.04);
  background: var(--ifi-graphite-surface-quiet);
  border: 0; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font: inherit; font-size: 14px; cursor: pointer;
  color: inherit; opacity: 0.75;
  transition: background 0.18s ease, opacity 0.18s ease;
}
.ifi-page .ifi-panel-control:hover { background: rgba(26,31,42,0.10); background: var(--ifi-graphite-surface-hover); opacity: 1; }
.ifi-page .ifi-panel-control:active:not([disabled]) { transform: scale(0.92); transition: transform 60ms ease; }
.ifi-page .ifi-panel-control:focus-visible { outline: 2px solid #D6B16A; outline: 2px solid var(--ifi-soft-gold); outline-offset: 2px; }
.ifi-page .ifi-panel-control[disabled] { opacity: 0.30; cursor: not-allowed; }

/* Panel mode : maximized (in-viewport, NOT escaping fullscreen z-index).
   Maximize remplit le .ifi-stage sans empiéter sur la luna-zone éventuelle. */
.ifi-page .ifi-panel.is-maximized {
  width: calc(100vw - 48px);
  max-height: calc(100vh - 96px);
  transform: translate(-50%, -50%);
}
.ifi-page.is-cockpit-active .ifi-panel.is-maximized {
  /* Quand Luna est en compact rail (320px), maximize laisse la place à Luna. */
  width: calc(100vw - 320px - 32px);
  transform: translate(calc(-50% + 160px), -50%);
}

/* Panel mode : minimized (header visible, body collapsed). */
.ifi-page .ifi-panel.is-minimized {
  max-height: 56px;
  overflow: hidden;
  transition: max-height 0.22s ease;
}
.ifi-page .ifi-panel.is-minimized .ifi-panel-body { display: none; }

/* Split view container — wraps primary + secondary panels.
   Approach : when layout='horizontal' or 'vertical', BOTH panels render
   side-by-side via a grid container that overrides their individual
   .ifi-panel fixed positioning. */
.ifi-page .ifi-split-container {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(1280px, calc(100vw - 380px));
  max-height: calc(100vh - 64px);
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  z-index: 100;
}
.ifi-page.is-cockpit-active .ifi-split-container {
  /* Recenter past the 320px Luna rail. */
  transform: translate(calc(-50% + 160px), -50%);
  width: min(1280px, calc(100vw - 320px - 64px));
}
.ifi-page .ifi-split-container.is-horizontal {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}
.ifi-page .ifi-split-container.is-vertical {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
}
/* Panels inside split container : drop their fixed positioning so the
   grid lays them out side-by-side. */
.ifi-page .ifi-split-container .ifi-panel {
  position: relative;
  top: auto; left: auto;
  transform: none;
  width: 100%;
  max-height: 100%;
  height: 100%;
}

.ifi-page .ifi-support-secondary-shell {
  position: fixed;
  top: 80px;
  right: 20px;
  width: min(380px, calc(100vw - 40px));
  height: calc(100vh - 124px);
  z-index: 2147483045;
}

.ifi-page .ifi-support-secondary-shell .ifi-support-panel {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
  height: 100%;
  max-height: 100%;
  border-radius: 12px;
}

.ifi-page .ifi-support-secondary-shell .ifi-support-body {
  padding: 0;
}

/* Luna mode toggle button — visible uniquement quand cockpit-active. */
.ifi-page .ifi-luna-mode-toggle {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 51;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px;
  background: rgba(26,31,42,0.05);
  background: var(--ifi-graphite-surface-subtle);
  font: inherit; font-size: 14px; cursor: pointer;
  color: inherit; opacity: 0.7;
  transition: background 0.18s ease, opacity 0.18s ease;
}
.ifi-page .ifi-luna-mode-toggle:hover { background: rgba(26,31,42,0.10); background: var(--ifi-graphite-surface-hover); opacity: 1; }
.ifi-page .ifi-luna-mode-toggle:focus-visible { outline: 2px solid #D6B16A; outline: 2px solid var(--ifi-soft-gold); outline-offset: 2px; }

/* Luna mode : expanded (larger zone, panels adjust width via variable).
   Calibration : 520px (médian de 480-520, ratifié post-revue W1-MACRO).
   Moins dominant que 560px initial, garde la lisibilité conversationnelle. */
.ifi-page.is-luna-expanded .ifi-luna-zone {
  width: 520px;
}
.ifi-page.is-luna-expanded.is-cockpit-active .ifi-panel {
  /* Panel re-recentered relative to 520px Luna rail (+260px = 520/2). */
  transform: translate(calc(-50% + 260px), -50%);
  width: min(960px, calc(100vw - 520px - 64px));
}
.ifi-page.is-luna-expanded.is-cockpit-active .ifi-split-container {
  transform: translate(calc(-50% + 260px), -50%);
  width: min(1100px, calc(100vw - 520px - 64px));
}

/* Cockpit — KPI grid */
.ifi-page .ifi-cockpit-kpis {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-gap: 8px; gap: 8px;
  padding: 14px 18px; border-bottom: 0.5px solid rgba(26,31,42,0.06); border-bottom: 0.5px solid var(--ifi-graphite-border-faint);
}
.ifi-page .ifi-kpi {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.96) 50%, rgba(216,226,242,0.92) 100%);
  background: var(--ifi-glass-strong);
  border: 0.5px solid rgba(26,31,42,0.14);
  border: var(--ifi-border-subtle);
  box-shadow: 0 0.5px 0 rgba(255,255,255,1) inset, 0 1px 3px rgba(26,31,42,0.10), 0 6px 18px rgba(26,31,42,0.12);
  box-shadow: var(--ifi-sh-inset), var(--ifi-sh-contact), var(--ifi-sh-float-sm);
}
.ifi-page .ifi-kpi.tone-crit { background: linear-gradient(180deg, #FFFFFF, rgba(184,92,92,0.06)); background: var(--ifi-kpi-danger-surface); border-left: 3px solid #B85C5C; border-left: var(--ifi-kpi-status-border-width) solid var(--ifi-danger); padding-left: 12px; padding-left: var(--ifi-kpi-status-padding-left); }
.ifi-page .ifi-kpi.tone-warn { background: linear-gradient(180deg, #FFFFFF, rgba(184,108,31,0.06)); background: var(--ifi-kpi-warning-surface); border-left: 3px solid #B86C1F; border-left: var(--ifi-kpi-status-border-width) solid var(--ifi-cat-amber); padding-left: 12px; padding-left: var(--ifi-kpi-status-padding-left); }
.ifi-page .ifi-kpi.tone-ok   { background: linear-gradient(180deg, #FFFFFF, rgba(31,124,80,0.06)); background: var(--ifi-kpi-success-surface);  border-left: 3px solid #8FA99A;  border-left: var(--ifi-kpi-status-border-width) solid var(--ifi-sage); padding-left: 12px; padding-left: var(--ifi-kpi-status-padding-left); }
.ifi-page .ifi-kpi.tone-crit .ifi-kpi-num { color: #B85C5C; color: var(--ifi-danger); }
.ifi-page .ifi-kpi.tone-warn .ifi-kpi-num { color: #B86C1F; color: var(--ifi-cat-amber); }
.ifi-page .ifi-kpi.tone-ok   .ifi-kpi-num { color: #8FA99A; color: var(--ifi-sage); }
.ifi-page .ifi-kpi-num { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: #1A1F2A; color: var(--ifi-cat-void); }
.ifi-page .ifi-kpi-label { font-size: 9.5px; letter-spacing: 0.10em; text-transform: uppercase; opacity: 0.62; font-weight: 700; }

/* MVP Operations panel */
.ifi-page .ifi-mvp-operations-body {
  padding: 14px 16px 16px;
}

.ifi-page .ifi-mvp-intro {
  margin: 0 0 12px;
  color: rgba(26,31,42,0.65);
  color: var(--ifi-graphite-text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.ifi-page .ifi-mvp-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid rgba(26,31,42,0.14);
  border: 1px solid var(--ifi-graphite-border-muted);
  border-left: 3px solid rgba(26,31,42,0.14);
  border-left: var(--ifi-kpi-status-border-width) solid var(--ifi-graphite-border-muted);
  border-radius: 8px;
  background: rgba(26,31,42,0.04);
  background: var(--ifi-graphite-surface-quiet);
}

.ifi-page .ifi-mvp-next.tone-ok {
  border-left-color: #8FA99A;
  border-left-color: var(--ifi-sage);
}

.ifi-page .ifi-mvp-next.tone-warn,
.ifi-page .ifi-mvp-next.tone-unknown {
  border-left-color: #B86C1F;
  border-left-color: var(--ifi-cat-amber);
}

.ifi-page .ifi-mvp-next.tone-crit {
  border-left-color: #B85C5C;
  border-left-color: var(--ifi-danger);
}

.ifi-page .ifi-mvp-next-copy {
  min-width: 0;
}

.ifi-page .ifi-mvp-next-kicker {
  display: block;
  margin-bottom: 3px;
  color: rgba(26,31,42,0.65);
  color: var(--ifi-graphite-text-secondary);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.ifi-page .ifi-mvp-next strong {
  display: block;
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  font-size: 14px;
  line-height: 1.25;
}

.ifi-page .ifi-mvp-next p {
  margin: 4px 0 0;
  color: rgba(26,31,42,0.65);
  color: var(--ifi-graphite-text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.ifi-page .ifi-mvp-next-button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid rgba(255,213,0, 0.40);
  border: 1px solid var(--ifi-gold-border-interactive);
  border-radius: 8px;
  background: rgba(255,213,0, 0.05);
  background: var(--ifi-gold-surface-subtle);
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.ifi-page .ifi-mvp-next-button:hover,
.ifi-page .ifi-mvp-next-button:focus-visible {
  background: rgba(255,213,0, 0.08);
  background: var(--ifi-gold-surface-hover);
}

.ifi-page .ifi-mvp-blockers {
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid rgba(26,31,42,0.14);
  border: 1px solid var(--ifi-graphite-border-muted);
  border-radius: 8px;
  background: rgba(255,255,255,0.85);
  background: var(--ifi-ivory-surface-strong);
}

.ifi-page .ifi-mvp-blockers-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.ifi-page .ifi-mvp-blockers h4 {
  margin: 0;
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  font-size: 13px;
  line-height: 1.25;
}

.ifi-page .ifi-mvp-blockers-count {
  min-width: 28px;
  padding: 3px 7px;
  border: 1px solid rgba(26,31,42,0.14);
  border: 1px solid var(--ifi-graphite-border-muted);
  border-radius: 999px;
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.ifi-page .ifi-mvp-blockers-empty {
  margin: 0;
  color: rgba(26,31,42,0.65);
  color: var(--ifi-graphite-text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.ifi-page .ifi-mvp-blockers-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ifi-page .ifi-mvp-blocker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  grid-gap: 9px;
  gap: 9px;
  padding: 9px;
  border: 1px solid rgba(26,31,42,0.14);
  border: 1px solid var(--ifi-graphite-border-muted);
  border-left: 3px solid rgba(26,31,42,0.14);
  border-left: var(--ifi-kpi-status-border-width) solid var(--ifi-graphite-border-muted);
  border-radius: 8px;
  background: rgba(26,31,42,0.04);
  background: var(--ifi-graphite-surface-quiet);
}

.ifi-page .ifi-mvp-blocker.tone-crit {
  border-left-color: #B85C5C;
  border-left-color: var(--ifi-danger);
}

.ifi-page .ifi-mvp-blocker.tone-warn,
.ifi-page .ifi-mvp-blocker.tone-unknown {
  border-left-color: #B86C1F;
  border-left-color: var(--ifi-cat-amber);
}

.ifi-page .ifi-mvp-blocker-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(26,31,42,0.14);
  border: 1px solid var(--ifi-graphite-border-muted);
  border-radius: 999px;
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  font-size: 11px;
  font-weight: 700;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.ifi-page .ifi-mvp-blocker-copy {
  min-width: 0;
}

.ifi-page .ifi-mvp-blocker-area {
  display: block;
  margin-bottom: 2px;
  color: rgba(26,31,42,0.65);
  color: var(--ifi-graphite-text-secondary);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.ifi-page .ifi-mvp-blocker strong {
  display: block;
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  font-size: 12px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ifi-page .ifi-mvp-blocker p {
  margin: 3px 0 0;
  color: rgba(26,31,42,0.65);
  color: var(--ifi-graphite-text-secondary);
  font-size: 11px;
  line-height: 1.35;
}

.ifi-page .ifi-mvp-blocker-action {
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid rgba(26,31,42,0.14);
  border: 1px solid var(--ifi-graphite-border-muted);
  border-radius: 7px;
  background: rgba(255,213,0, 0.05);
  background: var(--ifi-gold-surface-subtle);
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.ifi-page .ifi-mvp-blocker-action:hover,
.ifi-page .ifi-mvp-blocker-action:focus-visible {
  background: rgba(255,213,0, 0.08);
  background: var(--ifi-gold-surface-hover);
  border-color: rgba(255,213,0, 0.40);
  border-color: var(--ifi-gold-border-interactive);
}

.ifi-page .ifi-mvp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.ifi-page .ifi-mvp-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 150px;
  padding: 12px;
  border: 1px solid rgba(26,31,42,0.14);
  border: 1px solid var(--ifi-graphite-border-muted);
  border-radius: 8px;
  background: rgba(255,255,255,0.85);
  background: var(--ifi-ivory-surface-strong);
}

.ifi-page .ifi-mvp-card.tone-ok {
  border-left: 3px solid #8FA99A;
  border-left: var(--ifi-kpi-status-border-width) solid var(--ifi-sage);
}

.ifi-page .ifi-mvp-card.tone-warn,
.ifi-page .ifi-mvp-card.tone-unknown {
  border-left: 3px solid #B86C1F;
  border-left: var(--ifi-kpi-status-border-width) solid var(--ifi-cat-amber);
}

.ifi-page .ifi-mvp-card.tone-crit {
  border-left: 3px solid #B85C5C;
  border-left: var(--ifi-kpi-status-border-width) solid var(--ifi-danger);
}

.ifi-page .ifi-mvp-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.ifi-page .ifi-mvp-card-title {
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  font-size: 12px;
  font-weight: 700;
}

.ifi-page .ifi-mvp-card-status {
  flex: 0 0 auto;
  max-width: 50%;
  padding: 2px 7px;
  border: 1px solid rgba(26,31,42,0.14);
  border: 1px solid var(--ifi-graphite-border-muted);
  border-radius: 999px;
  color: rgba(26,31,42,0.65);
  color: var(--ifi-graphite-text-secondary);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  text-align: right;
}

.ifi-page .ifi-mvp-card-value {
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  font-size: 21px;
  font-weight: 650;
  line-height: 1.1;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.ifi-page .ifi-mvp-card-detail {
  flex: 1 1 auto;
  margin: 0;
  color: rgba(26,31,42,0.65);
  color: var(--ifi-graphite-text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.ifi-page .ifi-mvp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ifi-page .ifi-mvp-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid rgba(26,31,42,0.14);
  border: 1px solid var(--ifi-graphite-border-muted);
  border-radius: 7px;
  background: rgba(255,213,0, 0.05);
  background: var(--ifi-gold-surface-subtle);
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.ifi-page .ifi-mvp-action:hover,
.ifi-page .ifi-mvp-action:focus-visible {
  background: rgba(255,213,0, 0.08);
  background: var(--ifi-gold-surface-hover);
  border-color: rgba(255,213,0, 0.40);
  border-color: var(--ifi-gold-border-interactive);
}

.ifi-page .ifi-mvp-mini-list,
.ifi-page .ifi-mvp-decision ul {
  margin: 0;
  padding-left: 16px;
  color: rgba(26,31,42,0.65);
  color: var(--ifi-graphite-text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.ifi-page .ifi-mvp-decision {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(26,31,42,0.14);
  border: 1px solid var(--ifi-graphite-border-muted);
  border-radius: 8px;
  background: rgba(26,31,42,0.04);
  background: var(--ifi-graphite-surface-quiet);
}

.ifi-page .ifi-mvp-decision h4 {
  margin: 0 0 8px;
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  font-size: 13px;
}

.ifi-page .ifi-mvp-footnote {
  margin: 10px 0 0;
  color: rgba(26,31,42,0.65);
  color: var(--ifi-graphite-text-secondary);
  font-size: 11px;
  line-height: 1.4;
}

/* Luna Action Ledger */
.ifi-page .ifi-luna-ledger-body {
  padding: 14px 16px 16px;
}

.ifi-page .ifi-luna-ledger-intro,
.ifi-page .ifi-luna-ledger-footnote {
  margin: 0 0 12px;
  color: rgba(26,31,42,0.65);
  color: var(--ifi-graphite-text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.ifi-page .ifi-luna-ledger-footnote {
  margin: 12px 0 0;
  font-size: 11px;
}

.ifi-page .ifi-luna-ledger-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 12px;
}

.ifi-page .ifi-luna-ledger-kpi {
  padding: 9px 10px;
  border: 1px solid rgba(26,31,42,0.14);
  border: 1px solid var(--ifi-graphite-border-muted);
  border-radius: 8px;
  background: rgba(255,255,255,0.85);
  background: var(--ifi-ivory-surface-strong);
}

.ifi-page .ifi-luna-ledger-kpi strong {
  display: block;
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  font-size: 20px;
  line-height: 1.1;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.ifi-page .ifi-luna-ledger-kpi span {
  display: block;
  margin-top: 3px;
  color: rgba(26,31,42,0.65);
  color: var(--ifi-graphite-text-secondary);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.ifi-page .ifi-luna-ledger-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
}

.ifi-page .ifi-luna-ledger-filters,
.ifi-page .ifi-luna-ledger-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.ifi-page .ifi-luna-ledger-filter,
.ifi-page .ifi-luna-ledger-tool {
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid rgba(26,31,42,0.14);
  border: 1px solid var(--ifi-graphite-border-muted);
  border-radius: 8px;
  background: rgba(255,255,255,0.85);
  background: var(--ifi-ivory-surface-strong);
  color: rgba(26,31,42,0.65);
  color: var(--ifi-graphite-text-secondary);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.ifi-page .ifi-luna-ledger-filter.is-active {
  border-color: #D6B16A;
  border-color: var(--ifi-soft-gold);
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  background: rgba(26,31,42,0.04);
  background: var(--ifi-graphite-surface-quiet);
}

.ifi-page .ifi-luna-ledger-tool:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.ifi-page .ifi-luna-ledger-filter:focus-visible,
.ifi-page .ifi-luna-ledger-tool:focus-visible {
  outline: 2px solid #D6B16A;
  outline: 2px solid var(--ifi-soft-gold);
  outline-offset: 2px;
}

.ifi-page .ifi-luna-ledger-status {
  margin: -4px 0 10px;
  color: rgba(26,31,42,0.65);
  color: var(--ifi-graphite-text-secondary);
  font-size: 11px;
  line-height: 1.35;
}

.ifi-page .ifi-luna-ledger-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ifi-page .ifi-luna-ledger-row {
  padding: 10px;
  border: 1px solid rgba(26,31,42,0.14);
  border: 1px solid var(--ifi-graphite-border-muted);
  border-left: 3px solid rgba(26,31,42,0.14);
  border-left: var(--ifi-kpi-status-border-width) solid var(--ifi-graphite-border-muted);
  border-radius: 8px;
  background: rgba(255,255,255,0.85);
  background: var(--ifi-ivory-surface-strong);
}

.ifi-page .ifi-luna-ledger-row.tone-luna {
  border-left-color: #D6B16A;
  border-left-color: var(--ifi-soft-gold);
}

.ifi-page .ifi-luna-ledger-row.tone-payroll {
  border-left-color: #B86C1F;
  border-left-color: var(--ifi-cat-amber);
}

.ifi-page .ifi-luna-ledger-row.tone-blocked {
  border-left-color: #B85C5C;
  border-left-color: var(--ifi-danger);
}

.ifi-page .ifi-luna-ledger-row-main,
.ifi-page .ifi-luna-ledger-row-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ifi-page .ifi-luna-ledger-action {
  min-width: 0;
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ifi-page .ifi-luna-ledger-source {
  flex: 0 0 auto;
  padding: 2px 7px;
  border: 1px solid rgba(26,31,42,0.14);
  border: 1px solid var(--ifi-graphite-border-muted);
  border-radius: 999px;
  color: rgba(26,31,42,0.65);
  color: var(--ifi-graphite-text-secondary);
  font-size: 10px;
  font-weight: 700;
}

.ifi-page .ifi-luna-ledger-row-meta {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 5px;
  color: rgba(26,31,42,0.65);
  color: var(--ifi-graphite-text-secondary);
  font-size: 11px;
  line-height: 1.35;
}

@media (max-width: 760px) {
  .ifi-page .ifi-luna-ledger-kpis {
    grid-template-columns: 1fr;
  }

  .ifi-page .ifi-luna-ledger-tools {
    align-items: flex-start;
    flex-direction: column;
  }
  .ifi-page .ifi-mvp-next {
    align-items: stretch;
    flex-direction: column;
  }

  .ifi-page .ifi-mvp-next-button {
    width: 100%;
  }

  .ifi-page .ifi-mvp-blocker {
    align-items: flex-start;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ifi-page .ifi-mvp-blocker-action {
    grid-column: 1 / -1;
    width: 100%;
  }

  .ifi-page .ifi-mvp-grid {
    grid-template-columns: 1fr;
  }
}

/* Cockpit — sections (insights + charts) */
.ifi-page .ifi-cockpit-section { padding: 12px 18px; border-bottom: 0.5px solid rgba(26,31,42,0.06); border-bottom: 0.5px solid var(--ifi-graphite-border-faint); }
.ifi-page .ifi-cockpit-h { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.78; font-weight: 700; color: #1A1F2A; color: var(--ifi-cat-void); margin-bottom: 10px; }
.ifi-page .ifi-cockpit-insights { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.ifi-page .ifi-cockpit-insights li { font-size: 12.5px; opacity: 0.88; padding-left: 16px; position: relative; line-height: 1.45; }
.ifi-page .ifi-cockpit-insights li::before { content: "◆"; position: absolute; left: 0; opacity: 0.55; font-size: 10px; top: 2px; }
.ifi-page .ifi-cockpit-charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 8px; gap: 8px; }
.ifi-page .ifi-chart-ph {
  height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 8px;
  background: #FFFFFF;
  background: var(--ifi-placeholder-surface); border: 1px dashed rgba(26,31,42,0.22); border: 1px dashed var(--ifi-graphite-border-dashed); border-radius: 10px;
  box-shadow: 0 1px 2px rgba(26,31,42,0.03), 0 4px 8px rgba(26,31,42,0.03);
  box-shadow: 0 1px 2px var(--ifi-graphite-shadow-hairline), 0 4px 8px var(--ifi-graphite-shadow-hairline);
  text-align: center;
}
.ifi-page .ifi-chart-ph-title { font-size: 12px; font-weight: 600; opacity: 0.78; color: #1A1F2A; color: var(--ifi-cat-void); }
.ifi-page .ifi-chart-ph-sub { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.55; font-weight: 700; }

/* Cockpit — table */
.ifi-page .ifi-cockpit-table-wrap { padding: 12px 18px 18px; overflow-x: auto; }
.ifi-page .ifi-cockpit-table { width: 100%; border-collapse: collapse; font-size: 12px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.ifi-page .ifi-cockpit-table th {
  text-align: left; padding: 9px 10px;
  background: linear-gradient(to bottom, rgba(26,31,42,0.10), rgba(26,31,42,0.02));
  background: var(--ifi-graphite-table-head-surface);
  font-size: 9.5px; letter-spacing: 0.10em; text-transform: uppercase;
  font-weight: 700; color: #1A1F2A; color: var(--ifi-cat-void); opacity: 0.84;
  border-bottom: 0.5px solid rgba(26,31,42,0.20);
  border-bottom: var(--ifi-border-medium);
  white-space: nowrap;
}
/* Triangle ::after legacy retiré : redondant avec le SVG dans le bouton
   header (fait double affichage côte-à-côte cf. bug runtime PR #71).
   Si le th n'a pas de bouton (cas .ifi-cockpit-th-status), pas de
   triangle non plus — c'est cohérent avec le rôle visuel-only. */
.ifi-page .ifi-cockpit-table td { padding: 9px 10px; border-bottom: 0.5px solid rgba(26,31,42,0.05); border-bottom: 0.5px solid var(--ifi-graphite-border-hairline); white-space: nowrap; }
.ifi-page .ifi-cockpit-table td.num { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.ifi-page .ifi-cockpit-table tbody tr:nth-of-type(even) td { background: rgba(26,31,42,0.025); background: var(--ifi-graphite-surface-wisp); }
.ifi-page .ifi-cockpit-table tbody tr:hover td { background: rgba(255,213,0, 0.09); background: var(--ifi-gold-surface-row-hover); }
.ifi-page .ifi-cockpit-table .ifi-empty { opacity: 0.35; }

/* RichTooltip universel (PR #71 chunk 1)
   Rendu via React Portal sur document.body, position fixed avec viewport
   clamp. Variante 'lite' compacte / 'full' enrichie (titre + badge + desc
   + CTA). z-index dédié (11000) au-dessus du dossier (10000) sans casser
   le ColumnFilterPopover existant. */
.ifi-rich-tooltip-trigger { display: inline-flex; align-items: center; }
.ifi-rich-tooltip {
  position: fixed;
  /* z-index = 2147483000 (.ifi-page.is-fullscreen) + 200 — le tooltip est
     rendu via Portal sur document.body, donc frère du fullscreen page.
     Ancienne valeur 11000 le faisait passer dessous → tooltip invisible. */
  z-index: 2147483200;
  background: rgba(255,255,255,0.98);
  background: var(--ifi-ivory-surface-solid);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.06);
  box-shadow: var(--ifi-tooltip-elevation-shadow); /* design-token-authority: allow */
  border: 1px solid rgba(26,31,42,0.06);
  border: 1px solid var(--ifi-graphite-border-faint);
  padding: 14px 16px;
  font-size: 12px;
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  pointer-events: auto;
  max-width: 360px;
  line-height: 1.45;
}
.ifi-rich-tooltip-lite { padding: 9px 12px; max-width: 240px; }
.ifi-rich-tooltip-title {
  font-size: 12.5px; font-weight: 600;
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(26,31,42,0.08);
  border-bottom: 1px solid var(--ifi-graphite-border-quiet);
}
.ifi-rich-tooltip-lite .ifi-rich-tooltip-title {
  border-bottom: none; padding-bottom: 0; margin-bottom: 4px;
}
.ifi-rich-tooltip-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600;
  padding: 3px 8px; border-radius: 4px;
  background: rgba(31,124,80,0.14);
  background: var(--ifi-success-surface-hover); color: #8FA99A; color: var(--ifi-sage);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.ifi-rich-tooltip-badge-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  border-radius: 3px;
  background: rgba(255,255,255,0.18);
  background: var(--ifi-ivory-surface-faint);
  font-size: 10px; font-weight: 700;
}
.ifi-rich-tooltip-subtitle {
  font-size: 12.5px; font-weight: 600;
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  margin-bottom: 6px;
}
.ifi-rich-tooltip-description {
  font-size: 11.5px; line-height: 1.55;
  color: rgba(26,31,42,0.70);
  color: var(--ifi-graphite-text-quiet);
  font-style: italic;
  white-space: pre-line;
}
.ifi-rich-tooltip-cta {
  font-size: 11px;
  color: rgba(26,31,42,0.55);
  color: var(--ifi-graphite-text-muted);
  font-style: italic;
  text-align: center;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid rgba(26,31,42,0.08);
  border-top: 1px solid var(--ifi-graphite-border-quiet);
}

/* Status column — 1ère colonne ⚠/✓ (PR #71 chunk 2)
   Largeur fixe étroite, icône colorée centrée. Cliquer ouvre le dossier. */
.ifi-page .ifi-cockpit-table th.ifi-cockpit-th-status {
  width: 36px; min-width: 36px; padding: 8px 6px;
  text-align: center; opacity: 0.5;
}
.ifi-page .ifi-cockpit-th-status-icon { font-size: 12px; line-height: 1; }
.ifi-page .ifi-cockpit-table td.ifi-cockpit-status-cell {
  width: 36px; padding: 4px 6px; text-align: center;
}
.ifi-page .ifi-row-status {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: transparent; border: none; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0;
  border-radius: 50%;
  transition: background 0.15s ease, transform 0.15s ease;
}
.ifi-page .ifi-row-status:hover { transform: scale(1.15); }
.ifi-page .ifi-row-status:focus-visible {
  outline: 2px solid #D6B16A;
  outline: 2px solid var(--ifi-soft-gold); outline-offset: 1px;
}
.ifi-page .ifi-row-status-warning { color: #D49428; color: var(--ifi-cat-gold); }
.ifi-page .ifi-row-status-warning:hover { background: rgba(212,148,40,0.18); background: var(--ifi-warning-gold-surface-hover); }
.ifi-page .ifi-row-status-ok      { color: #8FA99A; color: var(--ifi-sage); opacity: 0.55; }
.ifi-page .ifi-row-status-ok:hover { background: rgba(31,124,80,0.14); background: var(--ifi-success-surface-hover); opacity: 1; }
/* PR DOS-5 — 5e variant "Levé localement" mirror du donut DOS-3.
   Couleur gris-bleu désaturée cohérente avec effectiveDonut.ts.
   Neutre, ni warning (orange) ni ok (vert) — vue locale non-publication. */
.ifi-page .ifi-row-status-cleared-locally { color: rgba(102,112,130,0.85); color: var(--ifi-neutral-blue-text-muted); opacity: 0.75; }
.ifi-page .ifi-row-status-cleared-locally:hover { background: rgba(102,112,130,0.12); background: var(--ifi-neutral-blue-surface-soft); opacity: 1; }

/* Lignes cliquables — clic ligne ouvre le dossier (PR #71 chunk 6) */
.ifi-page .ifi-cockpit-row-clickable { cursor: pointer; outline: none; }
.ifi-page .ifi-cockpit-row-clickable:focus-visible td:first-child {
  box-shadow: inset 3px 0 0 #D6B16A;
  box-shadow: inset 3px 0 0 var(--ifi-soft-gold);
}
.ifi-page .ifi-cockpit-row-clickable:focus-visible td {
  background: rgba(255,213,0, 0.12);
  background: var(--ifi-gold-surface-selected);
}

/* Period badges (10 variants — sobre, signal visuel rapide) */
.ifi-page .ifi-period { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; }
.ifi-page .ifi-period-officielle               { background: rgba(26,31,42,0.08); background: var(--ifi-graphite-surface-soft);   color: #1A1F2A;   color: var(--ifi-cat-void); }
.ifi-page .ifi-period-apprentis                { background: rgba(31,124,160,0.12); background: var(--ifi-period-apprentis-surface); color: #1F7CA0; color: var(--ifi-period-apprentis-text); }
.ifi-page .ifi-period-cadres-bonus             { background: rgba(86,46,144,0.12); background: var(--ifi-period-cadres-bonus-surface); color: #562E90; color: var(--ifi-period-cadres-bonus-text); }
.ifi-page .ifi-period-13e-mois                 { background: rgba(184,148,40,0.14); background: var(--ifi-period-thirteenth-salary-surface); color: #8E6B12; color: var(--ifi-period-thirteenth-salary-text); }
.ifi-page .ifi-period-heures-sup               { background: rgba(184,108,31,0.12); background: var(--ifi-period-overtime-surface); color: #B86C1F; color: var(--ifi-period-overtime-text); }
.ifi-page .ifi-period-decompte-final           { background: rgba(141,20,28,0.12); background: var(--ifi-period-final-settlement-surface); color: #8D141C; color: var(--ifi-period-final-settlement-text); }
.ifi-page .ifi-period-frontaliers              { background: rgba(31,140,148,0.14); background: var(--ifi-period-cross-border-surface); color: #1F8C94; color: var(--ifi-period-cross-border-text); }
.ifi-page .ifi-period-corrections-retroactives { background: rgba(184,80,124,0.12); background: var(--ifi-period-retro-corrections-surface); color: #B8507C; color: var(--ifi-period-retro-corrections-text); }
.ifi-page .ifi-period-variables-exceptionnelles{ background: rgba(75,90,168,0.14); background: var(--ifi-period-exceptional-variables-surface); color: #4B5AA8; color: var(--ifi-period-exceptional-variables-text); }
.ifi-page .ifi-period-simulation               { background: rgba(60,68,80,0.14); background: var(--ifi-period-simulation-surface); color: #3C4450; color: var(--ifi-period-simulation-text); }

/* Footer totals (neutre, pas de vert positif) */
.ifi-page .ifi-cockpit-table tfoot td {
  padding: 10px;
  background: linear-gradient(to top, rgba(26,31,42,0.08), rgba(26,31,42,0.02));
  background: var(--ifi-graphite-table-foot-surface);
  border-top: 0.5px solid rgba(26,31,42,0.20);
  border-top: var(--ifi-border-medium);
  font-weight: 600; font-size: 11px; white-space: nowrap;
}
.ifi-page .ifi-cockpit-table tfoot td.col-net { font-weight: 700; }
.ifi-page .ifi-cockpit-table tfoot td:first-child {
  font-size: 9.5px; letter-spacing: 0.10em; text-transform: uppercase; opacity: 0.78;
}
.ifi-page .ifi-cockpit-table tfoot th::after,
.ifi-page .ifi-cockpit-table tfoot td::after { content: none; }

/* Net column emphasis (body cells) — neutre */
.ifi-page .ifi-cockpit-table td.col-net { font-weight: 600; }

/* Statut chips */
.ifi-page .ifi-statut { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; }
.ifi-page .ifi-statut-calculated { background: rgba(31,124,80,0.10); background: var(--ifi-success-surface-soft); color: #8FA99A; color: var(--ifi-sage); }
.ifi-page .ifi-statut-pending    { background: rgba(184,108,31,0.12); background: var(--ifi-warning-surface-soft); color: #B86C1F; color: var(--ifi-cat-amber); }
.ifi-page .ifi-statut-blocked    { background: rgba(184,92,92,0.10); background: var(--ifi-danger-surface-soft); color: #B85C5C; color: var(--ifi-danger); }
.ifi-page .ifi-statut-ready      { background: rgba(31,124,160,0.12); background: var(--ifi-info-surface-soft); color: #1F7CA0; color: var(--ifi-info-text-strong); }
/* PR DOS-5 — 5e variant "Levé localement". Couleur gris-bleu désaturée
   cohérente avec donut DOS-3 et row-status-cleared-locally ci-dessus.
   Sobre, neutre, non-célébratoire. */
.ifi-page .ifi-statut-blocking-cleared-locally { background: rgba(102,112,130,0.12); background: var(--ifi-neutral-blue-surface-soft); color: rgba(70,80,98,0.95); color: var(--ifi-neutral-blue-text-strong); }

/* Actif/Inactif badge (PR #71 chunk 3)
   Calculé depuis date_fin_contrat. Vert (Actif) ou gris (Inactif). */
.ifi-page .ifi-actif-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 500;
  padding: 2px 8px; border-radius: 999px;
  letter-spacing: 0.02em; white-space: nowrap;
}
.ifi-page .ifi-actif-dot {
  width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0;
}
.ifi-page .ifi-actif-on  { background: rgba(31,124,80,0.10); background: var(--ifi-success-surface-soft);  color: #8FA99A;  color: var(--ifi-sage); }
.ifi-page .ifi-actif-on  .ifi-actif-dot { background: #8FA99A; background: var(--ifi-sage); }
.ifi-page .ifi-actif-off { background: rgba(107,114,128,0.12); background: var(--ifi-neutral-surface-muted); color: #6B7280; color: var(--ifi-cat-gray); }
.ifi-page .ifi-actif-off .ifi-actif-dot { background: #6B7280; background: var(--ifi-cat-gray); }

/* Alertes badges */
.ifi-page .ifi-alerte { display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; padding: 2px 7px; border-radius: 4px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-right: 4px; }
.ifi-page .ifi-alerte svg { flex-shrink: 0; }
.ifi-page .ifi-alerte-text { line-height: 1; }
.ifi-page .ifi-alerte-swissdec { background: rgba(184,92,92,0.10); background: var(--ifi-danger-surface-soft); color: #B85C5C; color: var(--ifi-danger); }
.ifi-page .ifi-alerte-bank     { background: rgba(184,108,31,0.12); background: var(--ifi-warning-surface-soft); color: #B86C1F; color: var(--ifi-cat-amber); }
.ifi-page .ifi-alerte-absence  { background: rgba(31,124,160,0.12); background: var(--ifi-info-surface-soft); color: #1F7CA0; color: var(--ifi-info-text-strong); }
.ifi-page .ifi-alerte-contract { background: rgba(86,46,144,0.12); background: var(--ifi-contract-alert-surface); color: #562E90; color: var(--ifi-contract-alert-text); }

/* Split indicator */
.ifi-page .ifi-split-on { color: #8A6E2E; color: var(--ifi-gold-strong); font-size: 14px; line-height: 1; }

/* ErrorBoundary fallback */
.ifi-page .ifi-error-boundary {
  max-width: 480px; margin: 80px auto; text-align: center;
  padding: 40px 32px; background: rgba(255,255,255,0.85); background: var(--ifi-ivory-surface-strong); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(26,31,42,0.04), 6px 10px 24px rgba(26,31,42,0.07);
  box-shadow: 0 1px 2px var(--ifi-graphite-shadow-whisper), 6px 10px 24px var(--ifi-graphite-shadow-soft);
}
.ifi-page .ifi-error-boundary h1 { font-size: 20px; font-weight: 500; margin: 0 0 12px 0; }
.ifi-page .ifi-error-boundary p { font-size: 14px; opacity: 0.7; margin: 0 0 20px 0; line-height: 1.5; }
.ifi-page .ifi-error-link {
  display: inline-block; background: #D6B16A; background: var(--ifi-soft-gold); color: #F5F7FA; color: var(--ifi-on-strong);
  padding: 10px 24px; border-radius: 999px;
  font-size: 13px; text-decoration: none; font-weight: 500;
}
.ifi-page .ifi-error-link:hover, .ifi-page .ifi-error-link:focus-visible { background: #8A6E2E; background: var(--ifi-gold-strong); }
.ifi-page .ifi-error-link:focus-visible { outline: 2px solid #1A1F2A; outline: 2px solid var(--ifi-cat-void); outline-offset: 2px; }

/* === Inline action segment in Luna messages =================================
   "Paul Durand" et autres mots cliquables dans une réponse Luna. Différent
   visuellement du texte non-cliquable : couleur bleue Integra + underline
   pointillé + cursor pointer + tooltip (title attr). Reste sur la même ligne
   que le texte adjacent (display: inline). Tooltip natif suffisant pour cette
   itération — pas de tooltip custom. */
.ifi-page .ifi-msg-action {
  display: inline;
  background: transparent;
  border: 0;
  padding: 0 1px;
  margin: 0;
  font: inherit;
  font-family: inherit;
  font-weight: 500;
  color: #D6B16A;
  color: var(--ifi-soft-gold);
  cursor: pointer;
  border-bottom: 1px dotted rgba(255,213,0, 0.55);
  border-bottom: 1px dotted var(--ifi-gold-border-focus);
  transition: color 0.15s ease, border-bottom-color 0.15s ease, background 0.15s ease;
}
.ifi-page .ifi-msg-action:hover {
  color: #8A6E2E;
  color: var(--ifi-gold-strong);
  border-bottom-color: #8A6E2E;
  border-bottom-color: var(--ifi-gold-strong);
  background: rgba(255,213,0, 0.08);
  background: var(--ifi-gold-surface-hover);
  border-radius: 2px;
}
.ifi-page .ifi-msg-action:focus-visible {
  outline: 2px solid #D6B16A;
  outline: 2px solid var(--ifi-soft-gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* === Dossier collaborateur panel ============================================
   Overlay ouvert via segment Luna inline. Hérite le positionnement modal
   centré de .ifi-panel (top:50%, left:50%, translate(-50%,-50%)) — IMPORTANT :
   ne PAS overrider position/inset/transform ici, sinon le translate parasite
   sort le panel du viewport. On ajuste seulement le contenu (padding,
   sections, fields). Width / max-height sont déjà bornés par .ifi-panel
   (min(1200px, calc(100vw - 32px)) × calc(100vh - 64px)). */
.ifi-page .ifi-dossier .ifi-panel-body {
  padding: 20px 24px 32px;
}
.ifi-page .ifi-dossier-summary {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 16px;
  margin-bottom: 18px;
  background: rgba(255,213,0, 0.04);
  background: var(--ifi-gold-surface-quiet);
  border-left: 3px solid rgba(255,213,0, 0.55);
  border-left: 3px solid var(--ifi-gold-border-focus);
  border-radius: 0 6px 6px 0;
  font-size: 13px;
}
.ifi-page .ifi-dossier-summary-line { color: #1A1F2A; color: var(--ifi-cat-void); opacity: 0.75; }
.ifi-page .ifi-dossier-summary-anomalie {
  color: #B85C5C;
  color: var(--ifi-danger); font-weight: 500; font-size: 12.5px;
}
.ifi-page .ifi-dossier-section {
  margin-bottom: 18px;
}
.ifi-page .ifi-dossier-section-title {
  margin: 0 0 8px 0;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(26,31,42,0.55);
  color: var(--ifi-graphite-text-muted);
}
.ifi-page .ifi-dossier-section-fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  grid-gap: 10px 16px;
  gap: 10px 16px;
  align-items: start;
}
.ifi-page .ifi-dossier-field {
  display: flex; flex-direction: column;
  gap: 0;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(255,255,255,0.55);
  background: var(--ifi-ivory-surface-soft);
  border: 1px solid rgba(26,31,42,0.08);
  border: 1px solid var(--ifi-graphite-border-quiet);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  min-width: 0;
}
.ifi-page .ifi-dossier-field--editing {
  /* En édition, le champ prend toute la largeur de la section pour donner
     de la place au formulaire (date + select large + valeur + actions).
     Sinon les inputs débordent sur les cellules voisines (cf. bug 2026-05). */
  grid-column: 1 / -1;
}
.ifi-page .ifi-dossier-field-label {
  font-size: 11.5px; opacity: 0.55;
  flex: 0 0 auto;
  white-space: nowrap;
}
.ifi-page .ifi-dossier-field-value {
  font-size: 13px; font-weight: 500; color: #1A1F2A; color: var(--ifi-cat-void);
  text-align: right;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
}
.ifi-page .ifi-dossier-field--focus {
  background: rgba(184,31,38,0.06);
  background: var(--ifi-critical-surface-faint);
  border-color: rgba(184,31,38,0.40);
  border-color: var(--ifi-critical-border-strong);
  box-shadow: 0 0 0 0 rgba(184,31,38,0.40);
  box-shadow: var(--ifi-dossier-focus-shadow); /* design-token-authority: allow */
  animation: ifi-dossier-focus-pulse 1.4s ease-out 1;
}
.ifi-page .ifi-dossier-field--focus .ifi-dossier-field-label { color: #B85C5C; color: var(--ifi-danger); opacity: 0.85; }
.ifi-page .ifi-dossier-field--missing .ifi-dossier-field-value { color: #B85C5C; color: var(--ifi-danger); }
.ifi-page .ifi-dossier-field-hint { font-size: 11.5px; font-weight: 400; opacity: 0.7; }
@keyframes ifi-dossier-focus-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(184,31,38,0.45); box-shadow: var(--ifi-dossier-focus-pulse-start-shadow); /* design-token-authority: allow */ }
  70%  { box-shadow: 0 0 0 10px rgba(184,31,38,0.08); box-shadow: var(--ifi-dossier-focus-pulse-mid-shadow); /* design-token-authority: allow */ }
  100% { box-shadow: 0 0 0 14px rgba(184,31,38,0); box-shadow: var(--ifi-dossier-focus-pulse-end-shadow); /* design-token-authority: allow */ }
}

/* === Dossier field row layout (label + value + icon buttons) ============ */
.ifi-page .ifi-dossier-field-row {
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: space-between;
  gap: 6px 12px; width: 100%;
  min-width: 0;
}
.ifi-page .ifi-dossier-field-value-wrap {
  display: inline-flex; align-items: center; gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}
.ifi-page .ifi-dossier-field-value-wrap .ifi-dossier-field-value {
  flex: 0 1 auto;
  min-width: 0;
}
.ifi-page .ifi-dossier-field-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  min-width: 22px; min-height: 22px;
  max-width: 22px; max-height: 22px;
  aspect-ratio: 1 / 1;
  flex: 0 0 22px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255,213,0, 0.65);
  color: var(--ifi-gold-text-muted);
  border: 0;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ifi-page .ifi-dossier-field-icon-btn:hover {
  background: rgba(255,213,0, 0.10);
  background: var(--ifi-gold-surface-active);
  color: #8A6E2E;
  color: var(--ifi-gold-strong);
}
.ifi-page .ifi-dossier-field-icon-btn:focus-visible {
  outline: 2px solid #D6B16A;
  outline: 2px solid var(--ifi-soft-gold); outline-offset: 2px;
}
.ifi-page .ifi-dossier-field--versioned {
  border-color: rgba(255,213,0, 0.20);
  border-color: var(--ifi-gold-border-soft);
}
.ifi-page .ifi-dossier-field--editing {
  border-color: rgba(255,213,0, 0.50);
  border-color: var(--ifi-gold-border-strong);
  background: rgba(255,255,255,0.95);
  background: var(--ifi-ivory-surface-emphasis);
  box-shadow: 0 0 0 3px rgba(255,213,0, 0.08);
  box-shadow: 0 0 0 3px var(--ifi-gold-shadow-focus-subtle);
}
.ifi-page .ifi-dossier-field-version-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em;
  background: rgba(255,213,0, 0.10);
  background: var(--ifi-gold-surface-active);
  color: #8A6E2E;
  color: var(--ifi-gold-strong);
  border-radius: 999px;
  vertical-align: middle;
}
/* Asterisk rouge pour les champs obligatoires. Marque les champs requis
   pour la création / modification du dossier collaborateur. */
.ifi-page .ifi-dossier-field-required {
  display: inline-block;
  margin-left: 4px;
  color: #B85C5C;
  color: var(--ifi-danger);
  font-weight: 700;
  font-size: 12px;
  vertical-align: middle;
  cursor: help;
}

/* === Tabs du dossier ====================================================== */
.ifi-page .ifi-dossier-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 0 24px 4px;
  margin-top: 4px;
  border-bottom: 1px solid rgba(26,31,42,0.08);
  border-bottom: 1px solid var(--ifi-graphite-border-quiet);
  background: rgba(255,255,255,0.55);
  background: var(--ifi-ivory-surface-soft);
  flex: 0 0 auto;
}
.ifi-page .ifi-dossier-tab {
  font: inherit; font-size: 12px; font-weight: 500;
  padding: 9px 14px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: rgba(26,31,42,0.65);
  color: var(--ifi-graphite-text-secondary);
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  border-radius: 6px 6px 0 0;
  margin-bottom: -1px;
}
.ifi-page .ifi-dossier-tab:hover {
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  background: rgba(255,213,0, 0.05);
  background: var(--ifi-gold-surface-subtle);
}
.ifi-page .ifi-dossier-tab.is-active {
  color: #8A6E2E;
  color: var(--ifi-gold-strong);
  border-bottom-color: #D6B16A;
  border-bottom-color: var(--ifi-soft-gold);
  background: rgba(255,213,0, 0.04);
  background: var(--ifi-gold-surface-quiet);
  font-weight: 600;
}
.ifi-page .ifi-dossier-tab:focus-visible { outline: 2px solid #D6B16A; outline: 2px solid var(--ifi-soft-gold); outline-offset: 2px; }

/* === Warnings dossier (AVS, IBAN, etc.) =================================== */
.ifi-page .ifi-dossier-warnings {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 16px;
}
.ifi-page .ifi-dossier-warning {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.45;
}
.ifi-page .ifi-dossier-warning.is-warn {
  background: rgba(212,148,40,0.10);
  background: var(--ifi-warning-gold-surface-quiet);
  color: #92621D;
  color: var(--ifi-warning-text-strong);
  border: 1px solid rgba(212,148,40,0.32);
  border: 1px solid var(--ifi-warning-gold-border-strong);
}
.ifi-page .ifi-dossier-warning.is-critical {
  background: rgba(184,31,38,0.08);
  background: var(--ifi-critical-surface-quiet);
  color: #B85C5C;
  color: var(--ifi-danger);
  border: 1px solid rgba(184,31,38,0.30);
  border: 1px solid var(--ifi-critical-border-soft);
}
.ifi-page .ifi-dossier-warning svg { flex: 0 0 14px; margin-top: 2px; }

/* Icônes onglets et titres de sections — donnent du rythme visuel et
   facilitent la navigation rapide. */
.ifi-page .ifi-dossier-tab-icon {
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 6px;
  vertical-align: middle;
  color: rgba(26,31,42,0.55);
  color: var(--ifi-graphite-text-muted);
}
.ifi-page .ifi-dossier-tab.is-active .ifi-dossier-tab-icon {
  color: #D6B16A;
  color: var(--ifi-soft-gold);
}
.ifi-page .ifi-dossier-section-icon {
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 8px;
  vertical-align: middle;
  color: #D6B16A;
  color: var(--ifi-soft-gold);
  background: rgba(255,213,0, 0.08);
  background: var(--ifi-gold-surface-hover);
  width: 24px; height: 24px;
  border-radius: 6px;
}
.ifi-page .ifi-dossier-section-title {
  display: inline-flex; align-items: center;
}

/* Section title hierarchy : un peu plus visible avec icon */
.ifi-page .ifi-dossier-section .ifi-dossier-section-title {
  font-size: 11.5px; opacity: 1; color: rgba(26,31,42,0.85); color: var(--ifi-graphite-text-strong);
}

/* Checkbox dans les éditeurs de champ — rendue large et accessible. */
.ifi-page .ifi-dossier-edit-checkbox-wrap {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}
.ifi-page .ifi-dossier-edit-checkbox {
  width: 18px; height: 18px;
  flex: 0 0 18px;
  cursor: pointer;
  accent-color: #D6B16A;
  accent-color: var(--ifi-soft-gold);
}
.ifi-page .ifi-dossier-edit-checkbox-msg {
  font-size: 13px; color: #1A1F2A; color: var(--ifi-cat-void); opacity: 0.85;
}

/* Summary resolved : message vert quand toutes les anomalies sont closes. */
.ifi-page .ifi-dossier-summary.is-resolved {
  background: rgba(31,124,96,0.06);
  background: var(--ifi-sage-surface-subtle);
  border-left-color: rgba(31,124,96,0.55);
  border-left-color: var(--ifi-sage-border-emphasis);
}
.ifi-page .ifi-dossier-summary-resolved {
  display: flex; align-items: center; gap: 6px;
  color: #8FA99A;
  color: var(--ifi-sage); font-weight: 500; font-size: 12.5px;
}
.ifi-page .ifi-dossier-summary-resolved svg { flex: 0 0 14px; }

/* === Inline edit form ===================================================== */
.ifi-page .ifi-dossier-edit {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(255,213,0, 0.04);
  background: var(--ifi-gold-surface-quiet);
  border: 1px dashed rgba(255,213,0, 0.40);
  border: 1px dashed var(--ifi-gold-border-interactive);
  border-radius: 6px;
  display: flex; flex-direction: column; gap: 8px;
}
.ifi-page .ifi-dossier-edit-row {
  display: flex; align-items: center; gap: 10px;
}
.ifi-page .ifi-dossier-edit-label {
  flex: 0 0 auto;
  width: 88px;
  font-size: 11.5px; opacity: 0.75; color: #1A1F2A; color: var(--ifi-cat-void);
}
.ifi-page .ifi-dossier-edit-input {
  flex: 1 1;
  font: inherit; font-family: inherit; font-size: 13px;
  padding: 6px 10px;
  background: #FFFFFF;
  background: var(--ifi-control-surface);
  border: 1px solid rgba(26,31,42,0.18);
  border: 1px solid var(--ifi-graphite-border-medium);
  border-radius: 6px;
  outline: 0;
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ifi-page .ifi-dossier-edit-input:focus,
.ifi-page .ifi-dossier-edit-input:focus-visible {
  border-color: rgba(255,213,0, 0.65);
  border-color: var(--ifi-gold-border-active);
  box-shadow: 0 0 0 3px rgba(255,213,0, 0.10);
  box-shadow: 0 0 0 3px var(--ifi-gold-shadow-focus-soft);
}
.ifi-page .ifi-dossier-edit-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 4px;
}
.ifi-page .ifi-dossier-contact-body {
  padding: 12px;
  padding: var(--ifi-space-sm);
}
.ifi-page .ifi-dossier-contact-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  gap: var(--ifi-space-sm);
}
.ifi-page .ifi-dossier-contact-state {
  margin: 0;
  color: rgba(200, 210, 240, 0.65);
  color: var(--ifi-color-text-secondary);
  font-size: 12px;
  font-size: var(--ifi-font-body);
}
.ifi-page .ifi-dossier-contact-state + .ifi-dossier-contact-state {
  margin-top: 8px;
  margin-top: var(--ifi-space-xs);
}
.ifi-page .ifi-dossier-contact-state--strong {
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  font-weight: 600;
}
.ifi-page .ifi-dossier-contact-note {
  margin: 0;
  color: rgba(200, 210, 240, 0.45);
  color: var(--ifi-color-text-tertiary);
  font-size: 12px;
  font-size: var(--ifi-font-body);
}
.ifi-page .ifi-dossier-read-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ifi-page .ifi-dossier-read-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 12px;
  grid-column-gap: 12px;
  grid-column-gap: var(--ifi-space-sm);
  column-gap: var(--ifi-space-sm);
  padding: 8px 0;
  padding: var(--ifi-space-xs) 0;
  border-bottom: 0.5px solid rgba(26,31,42,0.14);
  border-bottom: var(--ifi-border-subtle);
}
.ifi-page .ifi-dossier-read-label {
  color: rgba(200, 210, 240, 0.65);
  color: var(--ifi-color-text-secondary);
  font-size: 12px;
  font-size: var(--ifi-font-label);
}
.ifi-page .ifi-dossier-read-value {
  min-width: 0;
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.ifi-page .ifi-dossier-read-source {
  color: rgba(200, 210, 240, 0.65);
  color: var(--ifi-color-text-secondary);
}
.ifi-page .ifi-dossier-read-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  gap: var(--ifi-space-xs);
  margin-top: 12px;
  margin-top: var(--ifi-space-sm);
}

/* C-6 - read panel chrome */
.ifi-page .ifi-read-panel-body {
  padding: 12px 16px;
  padding: var(--ifi-read-panel-body-padding);
}
.ifi-page .ifi-read-panel-toolbar,
.ifi-page .ifi-read-panel-row,
.ifi-page .ifi-read-panel-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  gap: var(--ifi-read-panel-row-gap);
}
.ifi-page .ifi-read-panel-toolbar {
  gap: 10px;
  gap: var(--ifi-read-panel-toolbar-gap);
  margin-bottom: 10px;
  margin-bottom: var(--ifi-read-panel-toolbar-margin-bottom);
}
.ifi-page .ifi-read-panel-state--soft {
  opacity: 0.6;
  opacity: var(--ifi-read-panel-opacity-soft);
}
.ifi-page .ifi-read-panel-state--muted,
.ifi-page .ifi-read-panel-cell-muted,
.ifi-page .ifi-read-panel-note {
  opacity: 0.7;
  opacity: var(--ifi-read-panel-opacity-muted);
}
.ifi-page .ifi-read-panel-list {
  list-style: none;
  list-style: var(--ifi-read-panel-list-style);
  margin: 0;
  margin: var(--ifi-read-panel-list-margin);
  padding: 0;
  padding: var(--ifi-read-panel-list-padding);
}
.ifi-page .ifi-read-panel-row {
  padding: 6px 0;
  padding: var(--ifi-read-panel-row-padding);
  border-bottom: 0.5px solid rgba(26,31,42,0.08);
  border-bottom: var(--ifi-read-panel-row-border);
}
.ifi-page .ifi-read-panel-row--compact {
  padding: 5px 0;
  padding: var(--ifi-read-panel-row-padding-compact);
}
.ifi-page .ifi-read-panel-row--weekend {
  opacity: 0.5;
  opacity: var(--ifi-read-panel-opacity-weekend);
}
.ifi-page .ifi-read-panel-cell-primary,
.ifi-page .ifi-read-panel-summary-label {
  flex: 1 1;
}
.ifi-page .ifi-read-panel-cell-primary,
.ifi-page .ifi-read-panel-weekday {
  font-weight: 500;
  font-weight: var(--ifi-read-panel-weight-medium);
}
.ifi-page .ifi-read-panel-cell-strong,
.ifi-page .ifi-read-panel-cell-strong-muted {
  font-weight: 600;
  font-weight: var(--ifi-read-panel-weight-strong);
}
.ifi-page .ifi-read-panel-cell-strong-muted {
  opacity: 0.8;
  opacity: var(--ifi-read-panel-opacity-strong);
}
.ifi-page .ifi-read-panel-cell-secondary {
  opacity: 0.75;
  opacity: var(--ifi-read-panel-opacity-secondary);
}
.ifi-page .ifi-read-panel-cell-numeric,
.ifi-page .ifi-read-panel-summary {
  font-feature-settings: tabular-nums;
  font-feature-settings: var(--ifi-read-panel-numeric-variant);
  font-variant-numeric: tabular-nums;
  font-variant-numeric: var(--ifi-read-panel-numeric-variant);
}
.ifi-page .ifi-read-panel-weekday {
  width: 44px;
  width: var(--ifi-read-panel-weekday-width);
}
.ifi-page .ifi-read-panel-summary {
  margin-top: 10px;
  margin-top: var(--ifi-read-panel-footer-margin-top);
}
.ifi-page .ifi-read-panel-note {
  margin-top: 6px;
  margin-top: var(--ifi-read-panel-note-margin-top);
}
.ifi-page .ifi-dossier-edit-btn {
  font: inherit; font-size: 12px; font-weight: 500;
  padding: 6px 14px;
  border: 1px solid rgba(26,31,42,0.18);
  border: 1px solid var(--ifi-graphite-border-medium);
  background: #FFFFFF;
  background: var(--ifi-control-surface);
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ifi-page .ifi-dossier-edit-btn:hover { background: rgba(26,31,42,0.04); background: var(--ifi-graphite-surface-quiet); border-color: rgba(26,31,42,0.32); border-color: var(--ifi-graphite-border-hover); }
.ifi-page .ifi-dossier-edit-btn-primary {
  background: #D6B16A;
  background: var(--ifi-soft-gold); color: #FFFFFF; color: var(--ifi-on-accent); border-color: #D6B16A; border-color: var(--ifi-soft-gold);
}
.ifi-page .ifi-dossier-edit-btn-primary:hover { background: #8A6E2E; background: var(--ifi-gold-strong); border-color: #8A6E2E; border-color: var(--ifi-gold-strong); }
.ifi-page .ifi-dossier-edit-btn-primary:disabled { background: rgba(255,213,0, 0.40); background: var(--ifi-gold-surface-disabled); border-color: rgba(255,213,0, 0.40); border-color: var(--ifi-gold-border-interactive); cursor: not-allowed; }
.ifi-page .ifi-dossier-edit-btn:focus-visible { outline: 2px solid #D6B16A; outline: 2px solid var(--ifi-soft-gold); outline-offset: 2px; }

/* Selects et number-inputs dans l'éditeur — même hauteur que les text-inputs.
   Le navigateur applique son propre styling sur <select> ; on neutralise
   l'appearance native pour rester cohérent avec les inputs textes. */
.ifi-page select.ifi-dossier-edit-input {
  appearance: menulist;
  cursor: pointer;
  background-image: none;
}
.ifi-page input[type="number"].ifi-dossier-edit-input {
  -moz-appearance: textfield;
}
.ifi-page input[type="number"].ifi-dossier-edit-input::-webkit-outer-spin-button,
.ifi-page input[type="number"].ifi-dossier-edit-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.ifi-page .ifi-dossier-edit-suffix {
  flex: 0 0 auto;
  font-size: 12px; opacity: 0.55;
  margin-left: 4px;
  font-weight: 500;
}
/* Salary editor — preview block visible sous les inputs, mis à jour en
   temps réel à chaque changement de mode / valeur / paiements / heures. */
.ifi-page .ifi-dossier-edit-preview {
  margin-top: 4px;
  padding: 8px 12px;
  background: rgba(31,124,96,0.06);
  background: var(--ifi-sage-surface-subtle);
  border: 1px solid rgba(31,124,96,0.20);
  border: 1px solid var(--ifi-sage-border-soft);
  border-radius: 6px;
  display: flex; flex-direction: column; gap: 2px;
  font-size: 12px;
}
.ifi-page .ifi-dossier-edit-preview-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(31,124,96,0.85);
  color: var(--ifi-sage-text-strong);
  margin-bottom: 2px;
}
.ifi-page .ifi-dossier-edit-preview-row {
  color: #1A1F2A;
  color: var(--ifi-cat-void); opacity: 0.85;
}
.ifi-page .ifi-dossier-edit-preview-row strong {
  font-weight: 600; color: #1A1F2A; color: var(--ifi-cat-void); opacity: 1;
}

/* === IBAN validation status badge ========================================
   Mis à jour à chaque keystroke par DossierFieldEditor / LunaForm via
   validateIban (MOD 97-10 + longueur par pays). Vert = clé valide pour
   le pays détecté. Rouge = problème (longueur, pays inconnu, checksum). */
.ifi-page .ifi-iban-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11.5px; font-weight: 500;
  line-height: 1.35;
}
.ifi-page .ifi-iban-status.is-valid {
  background: rgba(31,124,96,0.10);
  background: var(--ifi-sage-surface-soft);
  color: #8FA99A;
  color: var(--ifi-sage);
  border: 1px solid rgba(31,124,96,0.32);
  border: 1px solid var(--ifi-sage-border-strong);
}
.ifi-page .ifi-iban-status.is-invalid {
  background: rgba(184,31,38,0.08);
  background: var(--ifi-critical-surface-quiet);
  color: #B85C5C;
  color: var(--ifi-danger);
  border: 1px solid rgba(184,31,38,0.30);
  border: 1px solid var(--ifi-critical-border-soft);
}
.ifi-page .ifi-iban-status-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 13px;
}
.ifi-page .ifi-iban-status-msg {
  flex: 1 1 auto;
  word-break: break-word;
}

/* Banque détectée depuis l'IBAN — affiché sous le status quand la banque est
   reconnue par CH_BANK_LOOKUP. Bleu Integra pour distinguer du status
   vert/rouge de validation IBAN. */
.ifi-page .ifi-iban-bank-detected {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  background: rgba(255,213,0, 0.06);
  background: var(--ifi-gold-surface-soft);
  color: #8A6E2E;
  color: var(--ifi-gold-strong);
  border: 1px solid rgba(255,213,0, 0.25);
  border: 1px solid var(--ifi-gold-border-muted);
}
.ifi-page .ifi-iban-bank-detected svg { flex: 0 0 13px; }
.ifi-page .ifi-iban-bank-detected strong { font-weight: 600; color: #8A6E2E; color: var(--ifi-gold-strong); }
.ifi-page .ifi-iban-bank-detected-note { opacity: 0.75; font-style: italic; }

/* === Versements section (cascade saisies sur salaire) ===================== */
.ifi-page .ifi-versements-section { margin-top: 8px; }
.ifi-page .ifi-versements-help {
  font-size: 11.5px; opacity: 0.65;
  margin-bottom: 10px;
}
.ifi-page .ifi-versements-empty {
  padding: 14px 16px;
  background: rgba(255,255,255,0.45);
  background: var(--ifi-ivory-surface-whisper);
  border: 1px dashed rgba(26,31,42,0.18);
  border: 1px dashed var(--ifi-graphite-border-medium);
  border-radius: 6px;
  font-size: 12.5px; opacity: 0.65;
  text-align: center;
}
.ifi-page .ifi-versements-list {
  display: flex; flex-direction: column; gap: 8px;
}
.ifi-page .ifi-versement-row {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.55);
  background: var(--ifi-ivory-surface-soft);
  border: 1px solid rgba(26,31,42,0.10);
  border: 1px solid var(--ifi-graphite-border-subtle);
  border-radius: 6px;
}
.ifi-page .ifi-versement-row--editing {
  background: rgba(255,213,0, 0.04);
  background: var(--ifi-gold-surface-quiet);
  border-color: rgba(255,213,0, 0.40);
  border-color: var(--ifi-gold-border-interactive);
  border-style: dashed;
}
.ifi-page .ifi-versement-summary {
  display: grid;
  grid-template-columns: 38px minmax(140px, 1.2fr) minmax(150px, 1.4fr) minmax(120px, 1fr) minmax(180px, 1.6fr);
  grid-gap: 12px;
  gap: 12px;
  align-items: baseline;
  font-size: 12.5px;
}
.ifi-page .ifi-versement-priority {
  font-size: 12px; font-weight: 600;
  color: #8A6E2E;
  color: var(--ifi-gold-strong); text-align: center;
  background: rgba(255,213,0, 0.10);
  background: var(--ifi-gold-surface-active);
  padding: 2px 6px;
  border-radius: 4px;
}
.ifi-page .ifi-versement-type { font-weight: 500; }
.ifi-page .ifi-versement-type.is-critical { color: #B85C5C; color: var(--ifi-danger); }
.ifi-page .ifi-versement-beneficiaire { color: #1A1F2A; color: var(--ifi-cat-void); opacity: 0.85; }
.ifi-page .ifi-versement-montant { color: #1A1F2A; color: var(--ifi-cat-void); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.ifi-page .ifi-versement-iban { color: rgba(26,31,42,0.70); color: var(--ifi-graphite-text-quiet); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; word-break: break-all; }
.ifi-page .ifi-versement-actions {
  display: flex; gap: 4px; justify-content: flex-end; align-items: center;
}
.ifi-page .ifi-versement-remove { color: rgba(184,31,38,0.65); color: var(--ifi-critical-text-soft); }
.ifi-page .ifi-versement-remove:hover { color: #B85C5C; color: var(--ifi-danger); background: rgba(184,31,38,0.10); background: var(--ifi-critical-surface-soft); }
.ifi-page .ifi-versement-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: 10px 14px;
  gap: 10px 14px;
}
.ifi-page .ifi-versement-edit-field {
  display: flex; flex-direction: column; gap: 4px;
}
.ifi-page .ifi-versement-edit-field--wide { grid-column: span 2; }
.ifi-page .ifi-versement-edit-field label {
  font-size: 11px; opacity: 0.7;
}
.ifi-page .ifi-versement-edit-field input,
.ifi-page .ifi-versement-edit-field select {
  font: inherit; font-size: 13px;
  padding: 6px 10px;
  background: #FFFFFF;
  background: var(--ifi-control-surface);
  border: 1px solid rgba(26,31,42,0.18);
  border: 1px solid var(--ifi-graphite-border-medium);
  border-radius: 6px;
  outline: 0; color: #1A1F2A; color: var(--ifi-cat-void);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ifi-page .ifi-versement-edit-field input:focus,
.ifi-page .ifi-versement-edit-field input:focus-visible,
.ifi-page .ifi-versement-edit-field select:focus,
.ifi-page .ifi-versement-edit-field select:focus-visible {
  border-color: rgba(255,213,0, 0.65);
  border-color: var(--ifi-gold-border-active);
  box-shadow: 0 0 0 3px rgba(255,213,0, 0.10);
  box-shadow: 0 0 0 3px var(--ifi-gold-shadow-focus-soft);
}
.ifi-page .ifi-versement-edit-field input:disabled,
.ifi-page .ifi-versement-edit-field select:disabled {
  background: rgba(26,31,42,0.04);
  background: var(--ifi-graphite-surface-quiet); cursor: not-allowed;
}
.ifi-page .ifi-versement-edit-help {
  font-size: 11px; opacity: 0.7; font-style: italic;
}
.ifi-page .ifi-versement-edit-actions {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px;
}
.ifi-page .ifi-versements-actions {
  display: flex; align-items: center; gap: 12px; margin-top: 10px;
}
.ifi-page .ifi-versements-cap {
  font-size: 11.5px; color: #B85C5C; color: var(--ifi-danger); font-style: italic;
}

/* === Cockpit charts (Bar / Pie / Heatmap) =============================== */
.ifi-page .ifi-chart-real {
  background: rgba(255,255,255,0.65);
  background: var(--ifi-ivory-surface-raised);
  border: 1px solid rgba(26,31,42,0.10);
  border: 1px solid var(--ifi-graphite-border-subtle);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 200px;
}
.ifi-page .ifi-chart-real-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600;
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(26,31,42,0.06);
  border-bottom: 1px solid var(--ifi-graphite-border-faint);
}
.ifi-page .ifi-chart-real-head svg { flex: 0 0 14px; color: #D6B16A; color: var(--ifi-soft-gold); }
.ifi-page .ifi-chart-real-title { flex: 1 1 auto; }
.ifi-page .ifi-chart-real-total {
  font-size: 11px; font-weight: 500; opacity: 0.6;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Bar chart */
.ifi-page .ifi-chart-bar-rows {
  display: flex; flex-direction: column; gap: 6px;
  flex: 1 1 auto;
}
/* Coûts salariaux — grid 4 colonnes : label · track · value (CHF) · share (%)
   Le label valeur est sorti du track (était en blanc absolute right, devenait
   illisible quand fill < ~40%). Couleur foncée constante, toujours lisible.
   Cf. PR #71 chunk 5 (fix runtime 2026-05-07). */
.ifi-page .ifi-chart-bar-row {
  display: grid; grid-template-columns: 90px 1fr 84px 38px;
  align-items: center; grid-gap: 8px; gap: 8px;
  font-size: 11.5px;
}
.ifi-page .ifi-chart-bar-label {
  color: rgba(26,31,42,0.85);
  color: var(--ifi-graphite-text-strong);
  text-align: right;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.ifi-page .ifi-chart-bar-track {
  position: relative;
  height: 22px;
  background: rgba(26,31,42,0.04);
  background: var(--ifi-graphite-surface-quiet);
  border-radius: 4px;
  overflow: hidden;
}
.ifi-page .ifi-chart-bar-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(255,213,0, 0.65), rgba(255,213,0, 0.85));
  background: var(--ifi-gold-chart-bar-surface);
  border-radius: 4px;
  transition: width 0.4s ease;
}
.ifi-page .ifi-chart-bar-value {
  font-size: 11px; font-weight: 600;
  color: rgba(26,31,42,0.92);
  color: var(--ifi-graphite-text-emphasis);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.ifi-page .ifi-chart-bar-share {
  font-size: 10.5px; font-weight: 500;
  color: rgba(26,31,42,0.65);
  color: var(--ifi-graphite-text-secondary);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Pie chart */
.ifi-page .ifi-chart-pie-body {
  display: flex; align-items: center; gap: 16px;
  flex: 1 1 auto;
}
.ifi-page .ifi-chart-pie-svg {
  width: 120px; height: 120px;
  flex: 0 0 120px;
}
.ifi-page .ifi-chart-pie-legend {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
  flex: 1 1 auto;
}
.ifi-page .ifi-chart-pie-legend-row {
  display: grid; grid-template-columns: 12px 1fr auto auto;
  align-items: center; grid-gap: 8px; gap: 8px;
  font-size: 11.5px;
}
.ifi-page .ifi-chart-pie-legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.ifi-page .ifi-chart-pie-legend-label { color: #1A1F2A; color: var(--ifi-cat-void); }
.ifi-page .ifi-chart-pie-legend-count {
  font-weight: 600;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.ifi-page .ifi-chart-pie-legend-pct {
  font-size: 10.5px; opacity: 0.55;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Heatmap */
.ifi-page .ifi-chart-heatmap-grid {
  width: 100%;
  border-collapse: separate; border-spacing: 4px;
  font-size: 10.5px;
  flex: 1 1 auto;
}
.ifi-page .ifi-chart-heatmap-grid th,
.ifi-page .ifi-chart-heatmap-grid td {
  text-align: center;
  padding: 6px 4px;
  font-weight: 500;
  border-radius: 4px;
}
.ifi-page .ifi-chart-heatmap-grid thead th {
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(26,31,42,0.65);
  color: var(--ifi-graphite-text-secondary);
  text-transform: uppercase;
  font-weight: 600;
}
.ifi-page .ifi-chart-heatmap-grid tbody th {
  text-align: right;
  color: rgba(26,31,42,0.85);
  color: var(--ifi-graphite-text-strong);
  font-size: 11px;
  white-space: nowrap;
}
.ifi-page .ifi-chart-heatmap-grid tbody td {
  font-size: 11px; font-weight: 600;
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Anomalies cliquables (PR #71 chunk 4) — pie segments + legend rows + heatmap rows */
.ifi-page .ifi-chart-pie-segment.is-clickable { cursor: pointer; transition: opacity 0.15s ease; }
.ifi-page .ifi-chart-pie-segment.is-clickable:hover { opacity: 1; }
.ifi-page .ifi-chart-pie-segment.is-clickable:focus-visible {
  outline: 2px solid #D6B16A;
  outline: 2px solid var(--ifi-soft-gold); outline-offset: 1px;
}
.ifi-page .ifi-chart-pie-legend-row.is-clickable {
  cursor: pointer; padding: 2px 4px; margin: 0 -4px;
  border-radius: 4px;
  transition: background 0.15s ease;
}
.ifi-page .ifi-chart-pie-legend-row.is-clickable:hover { background: rgba(26,31,42,0.05); background: var(--ifi-graphite-surface-subtle); }
.ifi-page .ifi-chart-pie-legend-row.is-clickable:focus-visible {
  outline: 2px solid #D6B16A;
  outline: 2px solid var(--ifi-soft-gold); outline-offset: 1px;
  background: rgba(255,213,0, 0.08);
  background: var(--ifi-gold-surface-hover);
}
.ifi-page .ifi-chart-heatmap-row.is-clickable { cursor: pointer; }
.ifi-page .ifi-chart-heatmap-row.is-clickable:hover th,
.ifi-page .ifi-chart-heatmap-row.is-clickable:hover td {
  filter: brightness(0.95);
}
.ifi-page .ifi-chart-heatmap-row.is-clickable:focus-visible {
  outline: 2px solid #D6B16A;
  outline: 2px solid var(--ifi-soft-gold); outline-offset: 1px;
}

/* === Cockpit filter burger (dimensions repliées par défaut) ============= */
.ifi-page .ifi-cockpit-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px 18px;
  border-bottom: 0.5px solid rgba(26,31,42,0.06);
  border-bottom: 0.5px solid var(--ifi-graphite-border-faint);
  align-items: center;
  background: rgba(255,255,255,0.45);
  background: var(--ifi-ivory-surface-whisper);
}
.ifi-page .ifi-cockpit-filter-burger {
  position: relative;
  display: inline-block;
}
.ifi-page .ifi-cockpit-filter-burger-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  background: var(--ifi-ivory-surface-strong);
  border: 1px solid rgba(26,31,42,0.14);
  border: 1px solid var(--ifi-graphite-border-muted);
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  font: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.ifi-page .ifi-cockpit-filter-burger-btn:hover {
  background: rgba(255,213,0, 0.05);
  background: var(--ifi-gold-surface-subtle);
  border-color: rgba(255,213,0, 0.40);
  border-color: var(--ifi-gold-border-interactive);
}
.ifi-page .ifi-cockpit-filter-burger-btn.is-active {
  background: rgba(255,213,0, 0.12);
  background: var(--ifi-gold-surface-selected);
  border-color: rgba(255,213,0, 0.65);
  border-color: var(--ifi-gold-border-active);
  color: #8A6E2E;
  color: var(--ifi-gold-strong);
  box-shadow: 0 0 0 2px rgba(255,213,0, 0.08);
  box-shadow: 0 0 0 2px var(--ifi-gold-shadow-focus-subtle);
}
.ifi-page .ifi-cockpit-filter-burger-btn:focus-visible { outline: 2px solid #D6B16A; outline: 2px solid var(--ifi-soft-gold); outline-offset: 2px; }
.ifi-page .ifi-cockpit-filter-burger-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 12px;
}
.ifi-page .ifi-cockpit-filter-burger-label { font-weight: 500; }
.ifi-page .ifi-cockpit-filter-burger-count {
  display: inline-block;
  padding: 1px 7px;
  font-size: 10px; font-weight: 700;
  background: #D6B16A;
  background: var(--ifi-soft-gold); color: #FFFFFF; color: var(--ifi-on-accent);
  border-radius: 999px;
  min-width: 16px; text-align: center;
}
.ifi-page .ifi-cockpit-filter-burger-dropdown {
  position: absolute;
  top: calc(100% + 6px); left: 0;
  z-index: 50;
  min-width: 240px;
  max-height: 360px; overflow-y: auto;
  background: #FFFFFF;
  background: var(--ifi-elevated-surface);
  border: 1px solid rgba(26,31,42,0.12);
  border: 1px solid var(--ifi-graphite-border-soft);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(26,31,42,0.12), 0 16px 48px rgba(26,31,42,0.08);
  box-shadow: 0 8px 24px var(--ifi-graphite-shadow-muted), 0 16px 48px var(--ifi-graphite-shadow-quiet);
  padding: 4px;
  display: flex; flex-direction: column; gap: 1px;
  animation: ifi-island-arrive 0.15s ease-out;
}
.ifi-page .ifi-cockpit-filter-burger-option {
  display: grid; grid-template-columns: 16px 12px 1fr auto;
  align-items: center; grid-gap: 8px; gap: 8px;
  padding: 6px 10px;
  border-radius: 5px;
  font: inherit; font-size: 12.5px;
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  cursor: pointer;
  transition: background 0.1s ease;
}
.ifi-page .ifi-cockpit-filter-burger-option:hover { background: rgba(255,213,0, 0.06); background: var(--ifi-gold-surface-soft); }
.ifi-page .ifi-cockpit-filter-burger-option.is-checked {
  background: rgba(255,213,0, 0.08);
  background: var(--ifi-gold-surface-hover);
  font-weight: 500;
}
.ifi-page .ifi-cockpit-filter-burger-option input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: #D6B16A;
  accent-color: var(--ifi-soft-gold);
  cursor: pointer;
}
.ifi-page .ifi-cockpit-filter-burger-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex: 0 0 10px;
}
.ifi-page .ifi-cockpit-filter-burger-option-label {
  flex: 1 1 auto;
}
.ifi-page .ifi-cockpit-filter-burger-option-count {
  font-size: 10.5px; font-weight: 600;
  color: rgba(26,31,42,0.55);
  color: var(--ifi-graphite-text-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.ifi-page .ifi-cockpit-filter-clear {
  font: inherit; font-size: 11px; font-weight: 500;
  padding: 4px 12px;
  background: rgba(184,31,38,0.08);
  background: var(--ifi-critical-surface-quiet);
  color: #B85C5C;
  color: var(--ifi-danger);
  border: 1px solid rgba(184,31,38,0.30);
  border: 1px solid var(--ifi-critical-border-soft);
  border-radius: 999px;
  cursor: pointer;
  margin-left: auto;
}
.ifi-page .ifi-cockpit-filter-clear:hover { background: rgba(184,31,38,0.16); background: var(--ifi-critical-surface-hover); }
.ifi-page .ifi-cockpit-filtered-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 10.5px; font-weight: 500;
  background: rgba(255,213,0, 0.10);
  background: var(--ifi-gold-surface-active);
  color: #8A6E2E;
  color: var(--ifi-gold-strong);
  border-radius: 999px;
  vertical-align: middle;
}

/* === Column header buttons (filter/sort triangle) ====================== */
.ifi-page .ifi-cockpit-th-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 6px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: inherit;
  font: inherit; font-weight: 600;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.15s ease, color 0.15s ease;
}
.ifi-page .ifi-cockpit-th-btn:hover {
  background: rgba(255,213,0, 0.08);
  background: var(--ifi-gold-surface-hover);
  color: #8A6E2E;
  color: var(--ifi-gold-strong);
}
.ifi-page .ifi-cockpit-th-btn.is-active {
  background: rgba(255,213,0, 0.15);
  background: var(--ifi-gold-surface-strong);
  color: #8A6E2E;
  color: var(--ifi-gold-strong);
}
.ifi-page .ifi-cockpit-th-btn:focus-visible { outline: 2px solid #D6B16A; outline: 2px solid var(--ifi-soft-gold); outline-offset: 2px; }
.ifi-page .ifi-cockpit-th-label { flex: 1 1 auto; }
.ifi-page .ifi-cockpit-th-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 10px;
  opacity: 0.55;
}
.ifi-page .ifi-cockpit-th-btn.is-active .ifi-cockpit-th-icon { opacity: 1; color: #D6B16A; color: var(--ifi-soft-gold); }
.ifi-page .ifi-cockpit-th-badge {
  display: inline-block;
  flex: 0 0 auto;
  padding: 0 5px;
  font-size: 9px; font-weight: 700;
  background: #D6B16A;
  background: var(--ifi-soft-gold); color: #FFFFFF; color: var(--ifi-on-accent);
  border-radius: 999px;
  min-width: 14px; text-align: center;
}

/* === Column filter popover (Excel-like) ================================ */
.ifi-col-filter-popover {
  position: fixed;
  /* z-index doit dépasser .ifi-page.is-fullscreen (= 2147483000) car le
     popover est rendu via Portal sur document.body, donc frère du
     fullscreen page, plus enfant. Ancienne valeur 250 le faisait passer
     dessous → popover invisible (bug runtime PR #71). */
  z-index: 2147483100;
  width: 320px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: #FFFFFF;
  background: var(--ifi-elevated-surface);
  border: 1px solid rgba(26,31,42,0.12);
  border: 1px solid var(--ifi-graphite-border-soft);
  border-radius: 10px;
  box-shadow: 0 10px 32px rgba(26,31,42,0.18), 0 24px 64px rgba(26,31,42,0.12);
  box-shadow: 0 10px 32px var(--ifi-graphite-shadow-depth), 0 24px 64px var(--ifi-graphite-shadow-muted);
  padding: 12px;
  display: flex; flex-direction: column; gap: 12px;
  animation: ifi-island-arrive 0.18s ease-out;
}
.ifi-col-filter-section {
  display: flex; flex-direction: column; gap: 6px;
}
.ifi-col-filter-section-title {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(26,31,42,0.55);
  color: var(--ifi-graphite-text-muted);
}
.ifi-col-filter-sort {
  display: grid; grid-template-columns: 1fr 1fr; grid-gap: 6px; gap: 6px;
}
.ifi-col-filter-sort-btn {
  font: inherit; font-size: 12px; font-weight: 500;
  padding: 8px 10px;
  background: rgba(255,255,255,0.85);
  background: var(--ifi-ivory-surface-strong);
  border: 1px solid rgba(26,31,42,0.14);
  border: 1px solid var(--ifi-graphite-border-muted);
  border-radius: 6px;
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ifi-col-filter-sort-btn:hover { background: rgba(255,213,0, 0.05); background: var(--ifi-gold-surface-subtle); border-color: rgba(255,213,0, 0.40); border-color: var(--ifi-gold-border-interactive); }
.ifi-col-filter-sort-btn.is-active {
  background: rgba(255,213,0, 0.12);
  background: var(--ifi-gold-surface-selected);
  border-color: rgba(255,213,0, 0.65);
  border-color: var(--ifi-gold-border-active);
  color: #8A6E2E;
  color: var(--ifi-gold-strong);
  font-weight: 600;
}
.ifi-col-filter-criterion {
  display: flex; flex-direction: column; gap: 4px;
}
.ifi-col-filter-conj {
  display: inline-flex; gap: 0;
  align-self: center;
  margin: 4px 0;
  background: rgba(255,213,0, 0.06);
  background: var(--ifi-gold-surface-soft);
  border-radius: 999px;
  padding: 2px;
}
.ifi-col-filter-conj-btn {
  font: inherit; font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em;
  padding: 3px 12px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: rgba(26,31,42,0.55);
  color: var(--ifi-graphite-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ifi-col-filter-conj-btn.is-active {
  background: #D6B16A;
  background: var(--ifi-soft-gold);
  color: #FFFFFF;
  color: var(--ifi-on-accent);
}
.ifi-col-filter-criterion-row {
  display: grid; grid-template-columns: auto 1fr 24px; grid-gap: 6px; gap: 6px;
  align-items: center;
}
.ifi-col-filter-op {
  font: inherit; font-size: 12px;
  padding: 6px 8px;
  background: #FFFFFF;
  background: var(--ifi-control-surface);
  border: 1px solid rgba(26,31,42,0.18);
  border: 1px solid var(--ifi-graphite-border-medium);
  border-radius: 5px;
  cursor: pointer;
}
.ifi-col-filter-input {
  font: inherit; font-size: 12px;
  padding: 6px 10px;
  background: #FFFFFF;
  background: var(--ifi-control-surface);
  border: 1px solid rgba(26,31,42,0.18);
  border: 1px solid var(--ifi-graphite-border-medium);
  border-radius: 5px;
  outline: 0;
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  width: 100%; box-sizing: border-box;
}
.ifi-col-filter-input:focus,
.ifi-col-filter-input:focus-visible {
  border-color: rgba(255,213,0, 0.55);
  border-color: var(--ifi-gold-border-focus);
  box-shadow: 0 0 0 2px rgba(255,213,0, 0.10);
  box-shadow: 0 0 0 2px var(--ifi-gold-shadow-focus-soft);
}
.ifi-col-filter-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: rgba(184,31,38,0.55);
  color: var(--ifi-critical-text-muted);
  font-size: 16px; line-height: 1;
  cursor: pointer;
}
.ifi-col-filter-remove:hover {
  background: rgba(184,31,38,0.10);
  background: var(--ifi-critical-surface-soft);
  color: #B85C5C;
  color: var(--ifi-danger);
}
.ifi-col-filter-add {
  font: inherit; font-size: 11.5px; font-weight: 500;
  padding: 6px 10px;
  background: rgba(255,213,0, 0.04);
  background: var(--ifi-gold-surface-quiet);
  border: 1px dashed rgba(255,213,0, 0.40);
  border: 1px dashed var(--ifi-gold-border-interactive);
  border-radius: 5px;
  color: #8A6E2E;
  color: var(--ifi-gold-strong);
  cursor: pointer;
  align-self: flex-start;
}
.ifi-col-filter-add:hover {
  background: rgba(255,213,0, 0.10);
  background: var(--ifi-gold-surface-active);
  border-color: rgba(255,213,0, 0.65);
  border-color: var(--ifi-gold-border-active);
}
.ifi-col-filter-actions {
  display: flex; gap: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(26,31,42,0.06);
  border-top: 1px solid var(--ifi-graphite-border-faint);
}
.ifi-col-filter-btn {
  font: inherit; font-size: 12px; font-weight: 500;
  padding: 7px 12px;
  background: #FFFFFF;
  background: var(--ifi-control-surface);
  border: 1px solid rgba(26,31,42,0.18);
  border: 1px solid var(--ifi-graphite-border-medium);
  border-radius: 6px;
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  cursor: pointer;
  flex: 1 1 auto;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ifi-col-filter-btn:hover { background: rgba(26,31,42,0.04); background: var(--ifi-graphite-surface-quiet); }
.ifi-col-filter-btn-primary {
  background: #D6B16A;
  background: var(--ifi-soft-gold);
  color: #FFFFFF;
  color: var(--ifi-on-accent);
  border-color: #D6B16A;
  border-color: var(--ifi-soft-gold);
}
.ifi-col-filter-btn-primary:hover { background: #8A6E2E; background: var(--ifi-gold-strong); border-color: #8A6E2E; border-color: var(--ifi-gold-strong); }
.ifi-col-filter-hint {
  font-size: 10.5px;
  color: rgba(31,124,96,0.85);
  color: var(--ifi-sage-text-strong);
  font-style: italic;
  text-align: center;
  padding: 4px 0;
}

/* === Arborescence documentaire ========================================== */
.ifi-page .ifi-docs-tree {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.65);
  background: var(--ifi-ivory-surface-raised);
  border: 1px solid rgba(255,213,0, 0.18);
  border: 1px solid var(--ifi-gold-border-subtle);
  border-radius: 8px;
}
.ifi-page .ifi-docs-tree-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px; gap: 12px;
}
.ifi-page .ifi-docs-tree-title {
  font-size: 12.5px; font-weight: 600; color: #1A1F2A; color: var(--ifi-cat-void);
}
.ifi-page .ifi-docs-tree-config {
  font-size: 10.5px; opacity: 0.55; font-style: italic;
}
.ifi-page .ifi-docs-tree-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.ifi-page .ifi-docs-tree-cat-toggle {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  font: inherit; font-size: 12.5px; font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}
.ifi-page .ifi-docs-tree-cat-toggle:hover { background: rgba(255,213,0, 0.06); background: var(--ifi-gold-surface-soft); }
.ifi-page .ifi-docs-tree-cat-toggle:focus-visible { outline: 2px solid #D6B16A; outline: 2px solid var(--ifi-soft-gold); outline-offset: 2px; }
.ifi-page .ifi-docs-tree-cat-chevron { display: inline-flex; align-items: center; justify-content: center; opacity: 0.55; flex: 0 0 11px; }
.ifi-page .ifi-docs-tree-cat-icon { display: inline-flex; align-items: center; justify-content: center; color: #8A6E2E; color: var(--ifi-gold-strong); flex: 0 0 14px; }
.ifi-page .ifi-docs-tree-cat-label { flex: 1 1 auto; }
.ifi-page .ifi-docs-tree-cat-count {
  flex: 0 0 auto;
  font-size: 10.5px; font-weight: 600;
  background: rgba(255,213,0, 0.10);
  background: var(--ifi-gold-surface-active); color: #8A6E2E; color: var(--ifi-gold-strong);
  padding: 1px 8px; border-radius: 999px;
}
.ifi-page .ifi-docs-tree-docs {
  list-style: none; padding: 0; margin: 4px 0 4px 28px;
  display: flex; flex-direction: column; gap: 2px;
}
.ifi-page .ifi-docs-tree-empty {
  font-size: 11.5px; opacity: 0.55; font-style: italic;
  padding: 6px 10px;
}
.ifi-page .ifi-docs-tree-doc-link {
  display: flex; align-items: baseline; justify-content: space-between;
  width: 100%;
  padding: 6px 10px;
  background: rgba(255,255,255,0.55);
  background: var(--ifi-ivory-surface-soft);
  border: 1px solid transparent;
  border-radius: 4px;
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  font: inherit; font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ifi-page .ifi-docs-tree-doc-link:hover {
  background: rgba(255,213,0, 0.06);
  background: var(--ifi-gold-surface-soft);
  border-color: rgba(255,213,0, 0.25);
  border-color: var(--ifi-gold-border-muted);
}
.ifi-page .ifi-docs-tree-doc-link:focus-visible { outline: 2px solid #D6B16A; outline: 2px solid var(--ifi-soft-gold); outline-offset: 2px; }
.ifi-page .ifi-docs-tree-doc-label { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.ifi-page .ifi-docs-tree-doc-meta {
  flex: 0 0 auto;
  font-size: 10.5px; opacity: 0.55; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
  margin-left: 12px;
}

/* === Drag & drop documents ============================================== */
.ifi-page .ifi-docs-tree.is-drag-over {
  background: rgba(255,213,0, 0.10);
  background: var(--ifi-gold-surface-active);
  border-color: rgba(255,213,0, 0.55);
  border-color: var(--ifi-gold-border-focus);
  box-shadow: 0 0 0 3px rgba(255,213,0, 0.10);
  box-shadow: 0 0 0 3px var(--ifi-gold-shadow-focus-soft);
}
.ifi-page .ifi-docs-tree-cat.is-drag-over .ifi-docs-tree-cat-toggle {
  background: rgba(255,213,0, 0.12);
  background: var(--ifi-gold-surface-selected);
  outline: 2px dashed rgba(255,213,0, 0.55);
  outline: 2px dashed var(--ifi-gold-border-focus);
  outline-offset: -2px;
}
.ifi-page .ifi-docs-tree-dropzone-hint {
  font-size: 11.5px;
  color: rgba(26,31,42,0.60);
  color: var(--ifi-graphite-text-soft);
  font-style: italic;
  margin-bottom: 8px;
  padding: 6px 10px;
  background: rgba(255,213,0, 0.04);
  background: var(--ifi-gold-surface-quiet);
  border: 1px dashed rgba(255,213,0, 0.30);
  border: 1px dashed var(--ifi-gold-border-dropzone);
  border-radius: 6px;
}
.ifi-page .ifi-docs-tree-dropzone-hint strong {
  color: #8A6E2E;
  color: var(--ifi-gold-strong);
  background: rgba(255,213,0, 0.10);
  background: var(--ifi-gold-surface-active);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}
.ifi-page .ifi-docs-tree-cat-row {
  display: flex; align-items: center; gap: 4px;
}
.ifi-page .ifi-docs-tree-cat-row .ifi-docs-tree-cat-toggle { flex: 1 1 auto; }
.ifi-page .ifi-docs-tree-cat-add {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,213,0, 0.10);
  background: var(--ifi-gold-surface-active);
  border: 0;
  color: #8A6E2E;
  color: var(--ifi-gold-strong);
  font-size: 16px; font-weight: 600; line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.ifi-page .ifi-docs-tree-cat-add:hover {
  background: rgba(255,213,0, 0.20);
  background: var(--ifi-gold-surface-emphasis);
  transform: scale(1.05);
}
.ifi-page .ifi-docs-tree-cat-add:focus-visible { outline: 2px solid #D6B16A; outline: 2px solid var(--ifi-soft-gold); outline-offset: 2px; }
.ifi-page .ifi-docs-tree-doc {
  display: flex; align-items: center; gap: 4px;
}
.ifi-page .ifi-docs-tree-doc .ifi-docs-tree-doc-link { flex: 1 1 auto; }
.ifi-page .ifi-docs-tree-doc-actions {
  display: inline-flex; align-items: center; gap: 2px;
  flex: 0 0 auto;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.ifi-page .ifi-docs-tree-doc:hover .ifi-docs-tree-doc-actions { opacity: 1; }
.ifi-page .ifi-docs-tree-doc-rename {
  display: flex; align-items: center; gap: 6px; width: 100%;
}
.ifi-page .ifi-docs-tree-doc-rename input {
  flex: 1 1 auto;
  font: inherit; font-size: 12.5px;
  padding: 6px 10px;
  background: #FFFFFF;
  background: var(--ifi-control-surface);
  border: 1px solid rgba(255,213,0, 0.45);
  border: 1px solid var(--ifi-gold-border-edit);
  border-radius: 4px;
  color: #1A1F2A;
  color: var(--ifi-cat-void);
}
.ifi-page .ifi-docs-tree-action-btn {
  font: inherit; font-size: 11.5px; font-weight: 500;
  padding: 5px 10px;
  border: 1px solid rgba(26,31,42,0.18);
  border: 1px solid var(--ifi-graphite-border-medium);
  background: #FFFFFF;
  background: var(--ifi-control-surface); color: #1A1F2A; color: var(--ifi-cat-void);
  border-radius: 4px; cursor: pointer;
}
.ifi-page .ifi-docs-tree-action-btn-primary {
  background: #D6B16A;
  background: var(--ifi-soft-gold); color: #FFFFFF; color: var(--ifi-on-accent); border-color: #D6B16A; border-color: var(--ifi-soft-gold);
}
.ifi-page .ifi-docs-tree-action-btn-primary:hover { background: #8A6E2E; background: var(--ifi-gold-strong); }

/* === Modales ajout / aperçu document ==================================== */
.ifi-page .ifi-docs-modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(26,31,42,0.45);
  background: var(--ifi-graphite-modal-backdrop-surface);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  animation: ifi-island-arrive 0.2s ease-out;
}
.ifi-page .ifi-docs-modal {
  background: #FFFFFF;
  background: var(--ifi-elevated-surface);
  border-radius: 12px;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  box-shadow: 0 16px 40px rgba(26,31,42,0.22), 0 40px 96px rgba(26,31,42,0.30);
  box-shadow: 0 16px 40px var(--ifi-graphite-shadow-heavy), 0 40px 96px var(--ifi-graphite-shadow-dramatic);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.ifi-page .ifi-docs-modal-preview {
  width: min(900px, calc(100vw - 32px));
  height: min(700px, calc(100vh - 80px));
}
.ifi-page .ifi-docs-modal-head {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(26,31,42,0.08);
  border-bottom: 1px solid var(--ifi-graphite-border-quiet);
  display: flex; align-items: center; justify-content: space-between;
  flex: 0 0 auto;
}
.ifi-page .ifi-docs-modal-head h4 {
  margin: 0; font-size: 14px; font-weight: 600;
}
.ifi-page .ifi-docs-modal-meta {
  font-size: 11.5px; opacity: 0.55;
}
.ifi-page .ifi-docs-modal-body {
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
  flex: 1 1 auto; min-height: 0;
}
.ifi-page .ifi-docs-modal-file-info {
  padding: 8px 12px;
  background: rgba(255,213,0, 0.06);
  background: var(--ifi-gold-surface-soft);
  border: 1px solid rgba(255,213,0, 0.25);
  border: 1px solid var(--ifi-gold-border-muted);
  border-radius: 6px;
  font-size: 12px; color: #1A1F2A; color: var(--ifi-cat-void);
}
.ifi-page .ifi-docs-modal-actions {
  padding: 12px 18px;
  border-top: 1px solid rgba(26,31,42,0.08);
  border-top: 1px solid var(--ifi-graphite-border-quiet);
  display: flex; gap: 8px; justify-content: flex-end;
  flex: 0 0 auto;
}
.ifi-page .ifi-docs-modal-preview-body {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
  background: rgba(26,31,42,0.03);
  background: var(--ifi-graphite-surface-ghost);
}
.ifi-page .ifi-docs-preview-iframe {
  width: 100%; height: 100%;
  border: 0; background: #FFFFFF; background: var(--ifi-preview-surface);
}
.ifi-page .ifi-docs-preview-img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}
.ifi-page .ifi-docs-preview-placeholder {
  text-align: center;
  color: rgba(26,31,42,0.65);
  color: var(--ifi-graphite-text-secondary);
  font-size: 13px;
  padding: 32px;
}
.ifi-page .ifi-docs-preview-placeholder p { margin: 4px 0; }

/* === History accordion (inline, sans nouveau panel) ====================== */
.ifi-page .ifi-dossier-history {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.65);
  background: var(--ifi-ivory-surface-raised);
  border: 1px solid rgba(26,31,42,0.10);
  border: 1px solid var(--ifi-graphite-border-subtle);
  border-radius: 6px;
}
.ifi-page .ifi-dossier-history-title {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(26,31,42,0.55);
  color: var(--ifi-graphite-text-muted);
  margin-bottom: 6px;
}
.ifi-page .ifi-dossier-history-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.ifi-page .ifi-dossier-history-item {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  align-items: baseline;
  grid-gap: 12px;
  gap: 12px;
  font-size: 12.5px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.55);
  background: var(--ifi-ivory-surface-soft);
  border-radius: 4px;
}
.ifi-page .ifi-dossier-history-current {
  background: rgba(255,213,0, 0.06);
  background: var(--ifi-gold-surface-soft);
  font-weight: 500;
}
.ifi-page .ifi-dossier-history-original {
  background: rgba(26,31,42,0.03);
  background: var(--ifi-graphite-surface-ghost);
  opacity: 0.85;
}
.ifi-page .ifi-dossier-history-date { color: #8A6E2E; color: var(--ifi-gold-strong); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.ifi-page .ifi-dossier-history-value { word-break: break-word; }
.ifi-page .ifi-dossier-history-meta { color: rgba(26,31,42,0.50); color: var(--ifi-graphite-text-faint); font-size: 11px; font-style: italic; }

/* === Luna inline form (modification depuis le chatbot) ==================== */
.ifi-page .ifi-luna-form {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(255,213,0, 0.05);
  background: var(--ifi-gold-surface-subtle);
  border: 1px dashed rgba(255,213,0, 0.40);
  border: 1px dashed var(--ifi-gold-border-interactive);
  border-radius: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.ifi-page .ifi-luna-form-row {
  display: flex; align-items: center; gap: 10px;
}
.ifi-page .ifi-luna-form-label {
  flex: 0 0 auto;
  width: 88px;
  font-size: 11.5px; opacity: 0.75; color: #1A1F2A; color: var(--ifi-cat-void);
}
.ifi-page .ifi-luna-form-input {
  flex: 1 1;
  font: inherit; font-family: inherit; font-size: 13px;
  padding: 6px 10px;
  background: #FFFFFF;
  background: var(--ifi-control-surface);
  border: 1px solid rgba(26,31,42,0.18);
  border: 1px solid var(--ifi-graphite-border-medium);
  border-radius: 6px;
  outline: 0; color: #1A1F2A; color: var(--ifi-cat-void);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ifi-page .ifi-luna-form-input:focus,
.ifi-page .ifi-luna-form-input:focus-visible {
  border-color: rgba(255,213,0, 0.65);
  border-color: var(--ifi-gold-border-active);
  box-shadow: 0 0 0 3px rgba(255,213,0, 0.10);
  box-shadow: 0 0 0 3px var(--ifi-gold-shadow-focus-soft);
}
.ifi-page .ifi-luna-form-helper {
  margin: 0; padding: 0;
  font-size: 11.5px; color: rgba(26,31,42,0.55); color: var(--ifi-graphite-text-muted); font-style: italic;
}
.ifi-page .ifi-luna-form-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}
.ifi-page .ifi-luna-form-btn {
  font: inherit; font-size: 12px; font-weight: 500;
  padding: 6px 14px;
  border: 1px solid rgba(26,31,42,0.18);
  border: 1px solid var(--ifi-graphite-border-medium);
  background: #FFFFFF;
  background: var(--ifi-control-surface);
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ifi-page .ifi-luna-form-btn:hover { background: rgba(26,31,42,0.04); background: var(--ifi-graphite-surface-quiet); border-color: rgba(26,31,42,0.32); border-color: var(--ifi-graphite-border-hover); }
.ifi-page .ifi-luna-form-btn-primary {
  background: #D6B16A;
  background: var(--ifi-soft-gold); color: #FFFFFF; color: var(--ifi-on-accent); border-color: #D6B16A; border-color: var(--ifi-soft-gold);
}
.ifi-page .ifi-luna-form-btn-primary:hover { background: #8A6E2E; background: var(--ifi-gold-strong); border-color: #8A6E2E; border-color: var(--ifi-gold-strong); }
.ifi-page .ifi-luna-form-btn:disabled {
  opacity: 0.45; cursor: not-allowed; background: rgba(26,31,42,0.04); background: var(--ifi-graphite-surface-quiet);
}
.ifi-page .ifi-luna-form-btn:focus-visible { outline: 2px solid #D6B16A; outline: 2px solid var(--ifi-soft-gold); outline-offset: 2px; }
.ifi-page .ifi-luna-form-confirm {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(31,124,96,0.08);
  background: var(--ifi-sage-surface-quiet);
  border: 1px solid rgba(31,124,96,0.32);
  border: 1px solid var(--ifi-sage-border-strong);
  border-radius: 8px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px;
  color: #8FA99A;
  color: var(--ifi-sage);
}
.ifi-page .ifi-luna-form-confirm svg { flex: 0 0 14px; }
.ifi-page .ifi-luna-form-confirm strong { font-weight: 600; }

/* ==========================================================================
   INTEGRA Executive Cockpit Direction
   Active runtime visual anchor for /child/integra.
   ========================================================================== */
.ifi-page,
[data-theme='dark'] .ifi-page,
.ifi-page.night {
  --ifi-graphite: #111317;
  --ifi-graphite-2: #1A1D22;
  --ifi-panel-graphite: #20242B;
  --ifi-ivory: #F5F3EE;
  --ifi-stone: #D8D3C9;
  --ifi-muted: #8E918B;
  --ifi-gold: #FFD500;
  --ifi-soft-gold: #D6B16A;
  --ifi-sage: #8FA99A;
  --ifi-danger: #B85C5C;
  --ifi-glass-strong: var(--ifi-night-glass-strong-surface);
  --ifi-border-subtle: 1px solid rgba(255, 213, 0, 0.12);
  --ifi-border-medium: 1px solid rgba(255, 213, 0, 0.20);
  --ifi-sh-contact: 0 1px 0 rgba(255,255,255,0.12) inset;
  --ifi-sh-float-sm: 0 10px 28px rgba(17,19,23,0.18);
  --ifi-sh-float-md: 0 24px 60px rgba(17,19,23,0.22);
  --ifi-sh-float-lg: 0 34px 90px rgba(17,19,23,0.28);
  color: #F5F3EE;
  color: var(--ifi-ivory);
}

.ifi-page.day,
[data-theme='dark'] .ifi-page,
.ifi-page.night {
  background:
    linear-gradient(135deg, rgba(255,213,0, 0.14) 0 1px, transparent 1px 86px),
    radial-gradient(circle at 78% 20%, rgba(255,213,0, 0.12), transparent 28%),
    radial-gradient(circle at 22% 88%, rgba(143,169,154,0.14), transparent 34%),
    linear-gradient(135deg, #111317 0%, #1A1D22 45%, #20242B 100%);
  background:
    linear-gradient(135deg, var(--ifi-gold-surface-pressed) 0 1px, transparent 1px 86px),
    radial-gradient(circle at 78% 20%, var(--ifi-gold-surface-selected), transparent 28%),
    var(--ifi-night-sage-ambient-surface),
    linear-gradient(135deg, var(--ifi-graphite) 0%, var(--ifi-graphite-2) 45%, var(--ifi-panel-graphite) 100%);
}

.ifi-page.day::before,
[data-theme='dark'] .ifi-page::before,
.ifi-page.night::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(245,243,238,0.04), transparent 28%, transparent 72%, rgba(255,213,0, 0.05)),
    radial-gradient(ellipse 70% 42% at 50% 100%, rgba(216,211,201,0.10), transparent 60%);
  background:
    var(--ifi-stone-cockpit-vein-surface),
    var(--ifi-stone-cockpit-glow-surface);
}

.ifi-page .ifi-topbar {
  background: rgba(17,19,23,0.76);
  background: var(--ifi-graphite-night-glass-surface);
  color: #F5F3EE;
  color: var(--ifi-ivory);
  border: 1px solid rgba(255,213,0, 0.14);
  border: 1px solid var(--ifi-gold-border-faint);
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 18px 54px rgba(0,0,0,0.30);
  box-shadow: var(--ifi-night-topbar-elevation-shadow); /* design-token-authority: allow */
  -webkit-backdrop-filter: blur(22px);
          backdrop-filter: blur(22px);
}

.ifi-page .ifi-mark-i,
.ifi-page .ifi-top-pebble {
  background: linear-gradient(145deg, #FFD500, #D6B16A);
  background: linear-gradient(145deg, var(--ifi-gold), var(--ifi-soft-gold));
  color: #111317;
  color: var(--ifi-graphite);
  box-shadow: 0 1px 0 rgba(255,255,255,0.36) inset, 0 10px 26px rgba(255,213,0,0.20);
  box-shadow: 0 1px 0 var(--ifi-ivory-highlight-brand) inset, 0 10px 26px var(--ifi-gold-shadow-brand-soft);
}

.ifi-page .ifi-mark-name,
.ifi-page .ifi-h1 {
  color: #F5F3EE;
  color: var(--ifi-ivory);
}

.ifi-page .ifi-tenant,
.ifi-page .ifi-crumbs,
.ifi-page .ifi-eyebrow,
.ifi-page .ifi-tb-cycle-sub,
.ifi-page .ifi-h-status,
.ifi-page .ifi-h-time {
  color: rgba(245,243,238,0.68);
  color: var(--ifi-stone-text-muted);
  opacity: 1;
}

.ifi-page .ifi-crumbs-here,
.ifi-page .ifi-h-status {
  color: rgba(245,243,238,0.82);
  color: var(--ifi-stone-text-strong);
}

.ifi-page .ifi-dot {
  background: #8FA99A;
  background: var(--ifi-sage);
  box-shadow: 0 0 0 4px rgba(143,169,154,0.18);
  box-shadow: var(--ifi-night-live-dot-ring-shadow); /* design-token-authority: allow */
}

.ifi-page.is-cockpit-active .ifi-headline,
.ifi-page.is-luna-expanded .ifi-headline {
  padding-left: min(390px, 30vw);
  padding-top: 18px;
  min-height: 116px;
}

.ifi-page.is-cockpit-active .ifi-headline > *,
.ifi-page.is-luna-expanded .ifi-headline > * {
  position: relative;
  z-index: 1;
}

.ifi-page .ifi-headline {
  color: #F5F3EE;
  color: var(--ifi-ivory);
}

@media (min-width: 901px) {
  .ifi-page .ifi-headline {
    padding-left: min(390px, 30vw);
  }
}

.ifi-page .ifi-panel,
.ifi-page .wmg-window,
.ifi-page .ifi-support-panel {
  background: linear-gradient(180deg, rgba(245,243,238,0.94), rgba(232,228,219,0.90));
  background: var(--ifi-stone-luna-panel-surface);
  color: #111317;
  color: var(--ifi-graphite);
  border: 1px solid rgba(255,213,0, 0.18);
  border: 1px solid var(--ifi-gold-border-subtle);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.75) inset, 0 24px 70px rgba(0,0,0,0.32);
  box-shadow: var(--ifi-night-panel-elevation-shadow); /* design-token-authority: allow */
}

.ifi-page .ifi-panel::before,
.ifi-page .ifi-support-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #FFD500, #D6B16A, transparent);
  background: linear-gradient(90deg, transparent, var(--ifi-gold), var(--ifi-soft-gold), transparent);
  opacity: 0.75;
  pointer-events: none;
}

.ifi-page .ifi-panel-head {
  background: linear-gradient(180deg, rgba(245,243,238,0.98), rgba(225,220,210,0.94));
  background: var(--ifi-stone-panel-head-surface);
  border-bottom: 1px solid rgba(32,36,43,0.10);
  border-bottom: 1px solid var(--ifi-panel-graphite-border-subtle);
  color: #111317;
  color: var(--ifi-graphite);
}

.ifi-page .ifi-panel-body {
  background: linear-gradient(180deg, rgba(245,243,238,0.98), rgba(235,231,222,0.96));
  background: var(--ifi-stone-panel-body-surface);
  color: #111317;
  color: var(--ifi-graphite);
}

.ifi-page .ifi-cockpit,
.ifi-page .ifi-cockpit .ifi-panel-body,
.ifi-page .ifi-cockpit [class*="text-slate"],
.ifi-page .ifi-cockpit [class*="text-blue"] {
  color: #111317 !important;
  color: var(--ifi-graphite) !important;
}

.ifi-page .ifi-cockpit [class*="text-slate-500"],
.ifi-page .ifi-cockpit [class*="text-slate-600"],
.ifi-page .ifi-cockpit [class*="text-blue-600"],
.ifi-page .ifi-cockpit [class*="text-blue-700"] {
  color: rgba(17,19,23,0.66) !important;
  color: var(--ifi-night-text-secondary) !important;
}

.ifi-page .ifi-cockpit button[class*="bg-blue"],
.ifi-page .ifi-cockpit a[class*="bg-blue"] {
  background: #111317 !important;
  background: var(--ifi-graphite) !important;
  color: #F5F3EE !important;
  color: var(--ifi-ivory) !important;
  border: 1px solid rgba(255,213,0, 0.26) !important;
  border: 1px solid var(--ifi-gold-border-raised) !important;
  box-shadow: inset 0 -2px 0 rgba(255,213,0,0.70), 0 12px 28px rgba(17,19,23,0.16) !important;
  box-shadow: inset 0 -2px 0 var(--ifi-gold-shadow-inset-strong), 0 12px 28px var(--ifi-night-shadow-soft) !important;
}

.ifi-page .ifi-panel-h3 {
  color: #111317;
  color: var(--ifi-graphite);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}

.ifi-page .ifi-panel-control,
.ifi-page .ifi-panel-close {
  color: rgba(17,19,23,0.62);
  color: var(--ifi-night-text-muted);
  border-radius: 8px;
}

.ifi-page .ifi-panel-control:hover,
.ifi-page .ifi-panel-close:hover {
  background: rgba(255,213,0, 0.14);
  background: var(--ifi-gold-surface-pressed);
  color: #111317;
  color: var(--ifi-graphite);
}

.ifi-page .ifi-luna-chip .ifi-ava {
  background: linear-gradient(145deg, #111317, #20242B);
  background: linear-gradient(145deg, var(--ifi-graphite), var(--ifi-panel-graphite));
  color: #FFD500;
  color: var(--ifi-gold);
  border: 1px solid rgba(255,213,0, 0.55);
  border: 1px solid var(--ifi-gold-border-focus);
  box-shadow: 0 0 0 3px rgba(255,213,0, 0.08), 0 14px 34px rgba(0,0,0,0.26);
  box-shadow: var(--ifi-night-luna-avatar-elevation-shadow); /* design-token-authority: allow */
}

.ifi-page .ifi-luna-msg,
.ifi-page .ifi-chip {
  background: rgba(245,243,238,0.95);
  background: var(--ifi-stone-luna-surface);
  border: 1px solid rgba(32,36,43,0.10);
  border: 1px solid var(--ifi-panel-graphite-border-subtle);
  color: #111317;
  color: var(--ifi-graphite);
  box-shadow: 0 14px 42px rgba(17,19,23,0.16);
  box-shadow: 0 14px 42px var(--ifi-night-shadow-soft);
}

.ifi-page .ifi-luna-msg .ifi-msg-ref,
.ifi-page .ifi-chip-primary {
  color: #8A6E2E;
  color: var(--ifi-gold-strong);
}

.ifi-page .ifi-chip-primary {
  box-shadow:
    0 0 0 1px rgba(255,213,0,0.95),
    0 12px 32px rgba(255,213,0,0.14);
  box-shadow:
    0 0 0 1px var(--ifi-gold-shadow-chip-ring),
    0 12px 32px var(--ifi-gold-shadow-chip-glow);
}

.ifi-page .ifi-luna-input {
  background: rgba(245,243,238,0.96);
  background: var(--ifi-stone-input-surface);
  border: 1px solid rgba(255,213,0, 0.18);
  border: 1px solid var(--ifi-gold-border-subtle);
  box-shadow: 0 16px 48px rgba(0,0,0,0.22);
  box-shadow: var(--ifi-night-luna-input-elevation-shadow); /* design-token-authority: allow */
}

.ifi-page .ifi-support-secondary-shell .ifi-support-panel {
  background: linear-gradient(180deg, rgba(245,243,238,0.97), rgba(232,228,219,0.94));
  background: var(--ifi-stone-support-shell-surface);
}

.ifi-page .ifi-support-body--detail {
  padding: 0;
  padding: var(--ifi-support-panel-detail-body-padding);
}

.ifi-page .ifi-support-tabs {
  display: flex;
  display: var(--ifi-support-panel-tablist-display);
  align-items: center;
  align-items: var(--ifi-support-panel-tablist-align);
  gap: 0.25rem;
  gap: var(--ifi-support-panel-tablist-gap);
  margin: 0.25rem 0.75rem 0 0.75rem;
  margin: var(--ifi-support-panel-tablist-margin);
  padding: 0.25rem;
  padding: var(--ifi-support-panel-tablist-padding);
  background: rgba(17,19,23,0.06) !important;
  background: var(--ifi-support-panel-tablist-surface) !important;
  border: 1px solid rgba(32,36,43,0.10) !important;
  border: var(--ifi-support-panel-tablist-border) !important;
  border-radius: 10px !important;
  border-radius: var(--ifi-support-panel-tablist-radius) !important;
}

.ifi-page .ifi-support-tab {
  flex: 1 1 0;
  flex: var(--ifi-support-panel-tab-flex);
  padding: 0.375rem 0.5rem;
  padding: var(--ifi-support-panel-tab-padding);
  border: 0;
  border: var(--ifi-support-panel-tab-border);
  border-radius: 0.5rem;
  border-radius: var(--ifi-support-panel-tab-radius);
  background: transparent;
  background: var(--ifi-support-panel-tab-surface);
  color: rgba(17,19,23,0.62) !important;
  color: var(--ifi-support-panel-tab-text) !important;
  font-size: 0.75rem;
  font-size: var(--ifi-support-panel-tab-font);
  font-weight: 500;
  font-weight: var(--ifi-support-panel-tab-weight);
  transition: all 150ms cubic-bezier(0.4,0,0.2,1);
  transition: var(--ifi-support-panel-tab-transition);
}

.ifi-page .ifi-support-tab:hover {
  color: #111317 !important;
  color: var(--ifi-support-panel-tab-hover-text) !important;
}

.ifi-page .ifi-support-tab:focus {
  outline: none;
  outline: var(--ifi-support-panel-tab-focus-outline);
}

.ifi-page .ifi-support-tab:focus-visible {
  box-shadow: 0 0 0 2px rgba(255,213,0,0.40);
  box-shadow: var(--ifi-support-panel-tab-focus-ring);
}

.ifi-page .ifi-support-tab[aria-selected="true"] {
  background: #111317 !important;
  background: var(--ifi-support-panel-tab-active-surface) !important;
  color: #F5F3EE !important;
  color: var(--ifi-support-panel-tab-active-text) !important;
  box-shadow: inset 0 -2px 0 #FFD500, 0 10px 24px rgba(17,19,23,0.18) !important;
  box-shadow: var(--ifi-support-panel-tab-active-shadow) !important;
}

.ifi-page [data-support-panel="quick-help"],
.ifi-page [data-support-panel="new-ticket"],
.ifi-page [data-support-panel="my-requests"] {
  color: #111317;
  color: var(--ifi-graphite);
}

.ifi-page [data-support-panel="quick-help"] textarea,
.ifi-page [data-support-panel="new-ticket"] input,
.ifi-page [data-support-panel="new-ticket"] select,
.ifi-page [data-support-panel="new-ticket"] textarea {
  background: rgba(255,255,255,0.62) !important;
  background: var(--ifi-ivory-surface-medium) !important;
  border-color: rgba(32,36,43,0.14) !important;
  border-color: var(--ifi-panel-graphite-border-muted) !important;
  border-radius: 10px !important;
}

.ifi-page [data-support-panel="quick-help"] button[type="submit"],
.ifi-page [data-testid="rss-new-ticket-submit"] {
  background: #111317 !important;
  background: var(--ifi-graphite) !important;
  color: #F5F3EE !important;
  color: var(--ifi-ivory) !important;
  border: 1px solid rgba(255,213,0, 0.30) !important;
  border: 1px solid var(--ifi-gold-border-dropzone) !important;
  box-shadow: inset 0 -2px 0 rgba(255,213,0,0.80), 0 12px 28px rgba(17,19,23,0.22) !important;
  box-shadow: inset 0 -2px 0 var(--ifi-gold-shadow-inset-emphasis), 0 12px 28px var(--ifi-night-shadow-strong) !important;
}

.ifi-page [data-testid^="rss-my-req-card-"],
.ifi-page [data-testid="rss-new-ticket-readiness"],
.ifi-page [data-testid="rss-quick-help-answer"],
.ifi-page [data-testid="rss-capture-zone"],
.ifi-page section {
  border-color: rgba(32,36,43,0.12) !important;
  border-color: var(--ifi-panel-graphite-border-soft) !important;
  background: rgba(255,255,255,0.48) !important;
  background: var(--ifi-ivory-surface-muted) !important;
}

.ifi-page .rss-support-fab,
.ifi-page [data-testid="rss-support-fab"] {
  background: linear-gradient(145deg, #111317, #20242B) !important;
  background: linear-gradient(145deg, var(--ifi-graphite), var(--ifi-panel-graphite)) !important;
  border: 1px solid rgba(255,213,0, 0.42) !important;
  border: 1px solid var(--ifi-gold-border-fab) !important;
  color: #FFD500 !important;
  color: var(--ifi-gold) !important;
  box-shadow: 0 16px 44px rgba(0,0,0,0.28), 0 0 0 4px rgba(255,213,0, 0.08) !important;
  box-shadow: var(--ifi-night-support-fab-elevation-shadow) !important; /* design-token-authority: allow */
}

/* C-6 - payroll cockpit chrome */
.ifi-page .ifi-payroll-cockpit {
  max-width: 72rem;
  max-width: var(--ifi-payroll-cockpit-max-width);
  margin: 0 auto;
  margin: var(--ifi-payroll-cockpit-margin);
  padding: 2rem 1.5rem;
  padding: var(--ifi-payroll-cockpit-padding);
  color: #111317;
  color: var(--ifi-payroll-cockpit-text);
}

.ifi-page .ifi-payroll-cockpit-header {
  display: flex;
  display: var(--ifi-payroll-cockpit-header-display);
  flex-wrap: wrap;
  flex-wrap: var(--ifi-payroll-cockpit-header-wrap);
  align-items: baseline;
  align-items: var(--ifi-payroll-cockpit-header-align);
  justify-content: space-between;
  justify-content: var(--ifi-payroll-cockpit-header-justify);
  gap: 1rem;
  gap: var(--ifi-payroll-cockpit-header-gap);
  margin-bottom: 2rem;
  margin-bottom: var(--ifi-payroll-cockpit-header-margin-bottom);
}

.ifi-page .ifi-payroll-cockpit-heading {
  color: #111317;
  color: var(--ifi-payroll-cockpit-text);
}

.ifi-page .ifi-payroll-cockpit-title {
  margin: 0;
  margin: var(--ifi-payroll-cockpit-title-margin);
  color: #111317;
  color: var(--ifi-payroll-cockpit-title-text);
  font-size: 1.5rem;
  font-size: var(--ifi-payroll-cockpit-title-font);
  font-weight: 600;
  font-weight: var(--ifi-payroll-cockpit-title-weight);
  letter-spacing: 0;
  letter-spacing: var(--ifi-payroll-cockpit-title-letter-spacing);
}

.ifi-page .ifi-payroll-cockpit-subtitle {
  margin: 0.25rem 0 0;
  margin: var(--ifi-payroll-cockpit-subtitle-margin);
  color: #8E918B;
  color: var(--ifi-payroll-cockpit-subtitle-text);
  font-size: 0.875rem;
  font-size: var(--ifi-payroll-cockpit-body-font);
}

.ifi-page .ifi-payroll-cockpit-controls,
.ifi-page .ifi-payroll-cockpit-year-label {
  display: flex;
  display: var(--ifi-payroll-cockpit-controls-display);
  align-items: center;
  align-items: var(--ifi-payroll-cockpit-controls-align);
}

.ifi-page .ifi-payroll-cockpit-controls {
  gap: 0.5rem;
  gap: var(--ifi-payroll-cockpit-controls-gap);
}

.ifi-page .ifi-payroll-cockpit-year-label {
  gap: 0.5rem;
  gap: var(--ifi-payroll-cockpit-year-label-gap);
  color: rgba(60,68,80,0.74);
  color: var(--ifi-payroll-cockpit-soft-text);
  font-size: 0.875rem;
  font-size: var(--ifi-payroll-cockpit-body-font);
}

.ifi-page .ifi-payroll-cockpit-year-select,
.ifi-page .ifi-payroll-cockpit-icon-button,
.ifi-page .ifi-payroll-cockpit-open-drawer,
.ifi-page .ifi-payroll-cockpit-action {
  border-radius: 0.375rem;
  border-radius: var(--ifi-payroll-cockpit-radius-sm);
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  transition: var(--ifi-payroll-cockpit-transition);
}

.ifi-page .ifi-payroll-cockpit-year-select,
.ifi-page .ifi-payroll-cockpit-icon-button {
  background: #FFFFFF;
  background: var(--ifi-payroll-cockpit-card-surface);
  border: 1px solid rgba(32,36,43,0.16);
  border: var(--ifi-payroll-cockpit-control-border);
  color: rgba(60,68,80,0.74);
  color: var(--ifi-payroll-cockpit-soft-text);
  box-shadow: 0 1px 2px rgba(17,19,23,0.08);
  box-shadow: var(--ifi-payroll-cockpit-control-shadow); /* design-token-authority: allow */
  font-size: 0.875rem;
  font-size: var(--ifi-payroll-cockpit-body-font);
}

.ifi-page .ifi-payroll-cockpit-year-select {
  padding: 0.25rem 0.5rem;
  padding: var(--ifi-payroll-cockpit-control-padding);
}

.ifi-page .ifi-payroll-cockpit-year-select:focus {
  outline: none;
  outline: var(--ifi-payroll-cockpit-focus-outline);
  border-color: #FFD500;
  border-color: var(--ifi-payroll-cockpit-focus-border);
  box-shadow: 0 0 0 1px rgba(255,213,0,0.28);
  box-shadow: var(--ifi-payroll-cockpit-focus-ring); /* design-token-authority: allow */
}

.ifi-page .ifi-payroll-cockpit-icon-button {
  padding: 0.25rem 0.5rem;
  padding: var(--ifi-payroll-cockpit-control-padding);
}

.ifi-page .ifi-payroll-cockpit-icon-button:hover,
.ifi-page .ifi-payroll-cockpit-action--secondary:hover {
  background: rgba(60,68,80,0.04);
  background: var(--ifi-payroll-cockpit-hover-surface);
}

.ifi-page .ifi-payroll-cockpit-icon-button:disabled {
  opacity: 0.5;
  opacity: var(--ifi-payroll-cockpit-disabled-opacity);
}

.ifi-page .ifi-payroll-cockpit-open-drawer {
  padding: 0.25rem 0.75rem;
  padding: var(--ifi-payroll-cockpit-primary-action-padding);
  background: #111317;
  background: var(--ifi-graphite);
  border: 1px solid rgba(255,213,0,0.26);
  border: var(--ifi-payroll-cockpit-open-drawer-border);
  color: #F5F3EE;
  color: var(--ifi-payroll-cockpit-inverse-text);
  box-shadow: 0 1px 2px rgba(17,19,23,0.08);
  box-shadow: var(--ifi-payroll-cockpit-control-shadow); /* design-token-authority: allow */
  font-size: 0.875rem;
  font-size: var(--ifi-payroll-cockpit-body-font);
  font-weight: 500;
  font-weight: var(--ifi-payroll-cockpit-secondary-button-weight);
}

.ifi-page .ifi-payroll-cockpit-open-drawer:hover {
  background: #20242B;
  background: var(--ifi-panel-graphite);
}

.ifi-page .ifi-payroll-cockpit-error {
  margin-bottom: 1rem;
  margin-bottom: var(--ifi-payroll-cockpit-error-margin-bottom);
  padding: 0.75rem;
  padding: var(--ifi-payroll-cockpit-error-padding);
  background: rgba(185,28,28,0.07);
  background: var(--ifi-payroll-cockpit-error-surface);
  border: 1px solid rgba(185,28,28,0.18);
  border: var(--ifi-payroll-cockpit-error-border);
  border-radius: 0.375rem;
  border-radius: var(--ifi-payroll-cockpit-radius-sm);
  color: #b91c1c;
  color: var(--ifi-payroll-cockpit-error-text);
  font-size: 0.875rem;
  font-size: var(--ifi-payroll-cockpit-body-font);
}

.ifi-page .ifi-payroll-cockpit-loading,
.ifi-page .ifi-payroll-cockpit-empty {
  padding: 2rem;
  padding: var(--ifi-payroll-cockpit-loading-padding);
  border-radius: 1rem;
  border-radius: var(--ifi-payroll-cockpit-radius-lg);
  border: 1px solid rgba(107,114,128,0.15);
  border: var(--ifi-payroll-cockpit-card-border);
  color: #8E918B;
  color: var(--ifi-payroll-cockpit-muted-text);
  font-size: 0.875rem;
  font-size: var(--ifi-payroll-cockpit-body-font);
  text-align: center;
  text-align: var(--ifi-payroll-cockpit-rhythm-center);
}

.ifi-page .ifi-payroll-cockpit-empty {
  border: 1px dashed rgba(107,114,128,0.18);
  border: var(--ifi-payroll-cockpit-empty-border);
}

.ifi-page .ifi-payroll-cockpit-empty-step {
  display: inline-block;
  display: var(--ifi-payroll-cockpit-empty-display);
  margin: 0 0 0.75rem;
  margin: var(--ifi-payroll-cockpit-empty-step-margin);
  padding: 0.25rem 0.75rem;
  padding: var(--ifi-payroll-cockpit-empty-step-padding);
  background: rgba(107,114,128,0.06);
  background: var(--ifi-payroll-cockpit-soft-surface);
  border-radius: 9999px;
  border-radius: var(--ifi-payroll-cockpit-radius-full);
  color: #8E918B;
  color: var(--ifi-payroll-cockpit-muted-text);
  font-size: 0.6875rem;
  font-size: var(--ifi-payroll-cockpit-chip-font);
  font-weight: 600;
  font-weight: var(--ifi-payroll-cockpit-step-weight);
  letter-spacing: 0;
  letter-spacing: var(--ifi-payroll-cockpit-step-letter-spacing);
  text-transform: uppercase;
  text-transform: var(--ifi-payroll-cockpit-step-transform);
}

.ifi-page .ifi-payroll-cockpit-empty-text,
.ifi-page .ifi-payroll-cockpit-empty-help,
.ifi-page .ifi-payroll-cockpit-count,
.ifi-page .ifi-payroll-cockpit-closed-note {
  font-size: 0.875rem;
  font-size: var(--ifi-payroll-cockpit-body-font);
}

.ifi-page .ifi-payroll-cockpit-empty-text {
  margin: 0;
  margin: var(--ifi-payroll-cockpit-empty-text-margin);
  color: rgba(60,68,80,0.74);
  color: var(--ifi-payroll-cockpit-soft-text);
}

.ifi-page .ifi-payroll-cockpit-empty-help {
  margin: 0.25rem 0 0;
  margin: var(--ifi-payroll-cockpit-empty-help-margin);
  color: rgba(60,68,80,0.55);
  color: var(--ifi-payroll-cockpit-faint-text);
}

.ifi-page .ifi-payroll-cockpit-count {
  margin-bottom: 1rem;
  margin-bottom: var(--ifi-payroll-cockpit-count-margin-bottom);
  color: #8E918B;
  color: var(--ifi-payroll-cockpit-muted-text);
}

.ifi-page .ifi-payroll-cockpit-months-list {
  display: grid;
  display: var(--ifi-payroll-cockpit-months-grid-display);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  grid-template-columns: var(--ifi-payroll-cockpit-months-grid-columns);
  gap: 0.75rem;
  grid-gap: 0.75rem;
  grid-gap: var(--ifi-payroll-cockpit-months-grid-gap);
  gap: var(--ifi-payroll-cockpit-months-grid-gap);
  padding: 0;
  padding: var(--ifi-payroll-cockpit-list-padding);
  margin: 0;
  margin: var(--ifi-payroll-cockpit-list-margin);
  list-style: none;
  list-style: var(--ifi-payroll-cockpit-list-style);
}

.ifi-page .ifi-payroll-cockpit-month-card {
  padding: 1rem;
  padding: var(--ifi-payroll-cockpit-card-padding);
  background: #FFFFFF;
  background: var(--ifi-payroll-cockpit-card-surface);
  border: 1px solid rgba(107,114,128,0.15);
  border: var(--ifi-payroll-cockpit-card-border);
  border-radius: 1rem;
  border-radius: var(--ifi-payroll-cockpit-radius-lg);
  box-shadow: 0 1px 2px rgba(17,19,23,0.08);
  box-shadow: var(--ifi-payroll-cockpit-card-shadow); /* design-token-authority: allow */
}

.ifi-page .ifi-payroll-cockpit-month-card-header {
  display: flex;
  display: var(--ifi-payroll-cockpit-card-header-display);
  align-items: flex-start;
  align-items: var(--ifi-payroll-cockpit-card-header-align);
  justify-content: space-between;
  justify-content: var(--ifi-payroll-cockpit-card-header-justify);
  gap: 0.75rem;
  gap: var(--ifi-payroll-cockpit-card-header-gap);
}

.ifi-page .ifi-payroll-cockpit-month-title {
  margin: 0;
  margin: var(--ifi-payroll-cockpit-month-title-margin);
  color: rgba(60,68,80,0.74);
  color: var(--ifi-payroll-cockpit-soft-text);
  font-size: 1.5rem;
  font-size: var(--ifi-payroll-cockpit-title-font);
  font-weight: 600;
  font-weight: var(--ifi-payroll-cockpit-title-weight);
}

.ifi-page .ifi-payroll-cockpit-step-chip {
  display: inline-flex;
  display: var(--ifi-payroll-cockpit-chip-display);
  align-items: center;
  align-items: var(--ifi-payroll-cockpit-chip-align);
  flex-shrink: 0;
  flex-shrink: var(--ifi-payroll-cockpit-chip-shrink);
  padding: 0.125rem 0.5rem;
  padding: var(--ifi-payroll-cockpit-chip-padding);
  border-radius: 9999px;
  border-radius: var(--ifi-payroll-cockpit-radius-full);
  cursor: help;
  cursor: var(--ifi-payroll-cockpit-chip-cursor);
  font-size: 0.6875rem;
  font-size: var(--ifi-payroll-cockpit-chip-font);
  font-weight: 500;
  font-weight: var(--ifi-payroll-cockpit-chip-weight);
}

.ifi-page .ifi-payroll-cockpit-step-chip--variables {
  background: rgba(14,165,233,0.12);
  background: var(--ifi-payroll-cockpit-variable-chip-surface);
  color: #0369a1;
  color: var(--ifi-payroll-cockpit-variable-text);
}

.ifi-page .ifi-payroll-cockpit-step-chip--calculating {
  background: rgba(180,83,9,0.07);
  background: var(--ifi-payroll-cockpit-calculating-chip-surface);
  color: #b45309;
  color: var(--ifi-payroll-cockpit-calculating-text);
}

.ifi-page .ifi-payroll-cockpit-step-chip--validation {
  background: rgba(124,58,237,0.10);
  background: var(--ifi-payroll-cockpit-validation-chip-surface);
  color: #7c3aed;
  color: var(--ifi-payroll-cockpit-validation-text);
}

.ifi-page .ifi-payroll-cockpit-step-chip--closing {
  background: rgba(4,120,87,0.07);
  background: var(--ifi-payroll-cockpit-closing-chip-surface);
  color: #047857;
  color: var(--ifi-payroll-cockpit-closing-text);
}

.ifi-page .ifi-payroll-cockpit-step-chip--closed {
  background: rgba(107,114,128,0.07);
  background: var(--ifi-payroll-cockpit-closed-chip-surface);
  color: #8E918B;
  color: var(--ifi-payroll-cockpit-closed-text);
}

.ifi-page .ifi-payroll-cockpit-step-chip--open {
  background: rgba(107,114,128,0.07);
  background: var(--ifi-payroll-cockpit-open-chip-surface);
  color: rgba(60,68,80,0.84);
  color: var(--ifi-payroll-cockpit-open-text);
}

.ifi-page .ifi-payroll-cockpit-month-id {
  overflow: hidden;
  overflow: var(--ifi-payroll-cockpit-month-id-overflow);
  margin: 0.5rem 0 0;
  margin: var(--ifi-payroll-cockpit-month-id-margin);
  color: rgba(60,68,80,0.55);
  color: var(--ifi-payroll-cockpit-faint-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-family: var(--ifi-payroll-cockpit-mono-font-family);
  font-size: 0.75rem;
  font-size: var(--ifi-payroll-cockpit-small-font);
  text-overflow: ellipsis;
  text-overflow: var(--ifi-payroll-cockpit-month-id-text-overflow);
  white-space: nowrap;
  white-space: var(--ifi-payroll-cockpit-month-id-white-space);
}

.ifi-page .ifi-payroll-cockpit-actions {
  display: flex;
  display: var(--ifi-payroll-cockpit-actions-display);
  flex-direction: column;
  flex-direction: var(--ifi-payroll-cockpit-actions-direction);
  gap: 0.5rem;
  gap: var(--ifi-payroll-cockpit-actions-gap);
  margin-top: 0.75rem;
  margin-top: var(--ifi-payroll-cockpit-actions-margin-top);
}

.ifi-page .ifi-payroll-cockpit-action {
  width: 100%;
  width: var(--ifi-payroll-cockpit-width-full);
  padding: 0.5rem 0.75rem;
  padding: var(--ifi-payroll-cockpit-action-padding);
  font-size: 0.75rem;
  font-size: var(--ifi-payroll-cockpit-small-font);
}

.ifi-page .ifi-payroll-cockpit-action--variables {
  background: #0369a1;
  background: var(--ifi-payroll-cockpit-variable-surface);
  border: 1px solid rgba(14,165,233,0.3);
  border: var(--ifi-payroll-cockpit-variable-action-border);
  color: #F5F3EE;
  color: var(--ifi-payroll-cockpit-inverse-text);
  font-weight: 600;
  font-weight: var(--ifi-payroll-cockpit-button-weight);
}

.ifi-page .ifi-payroll-cockpit-action--variables:hover {
  background: #0284c7;
  background: var(--ifi-payroll-cockpit-variable-hover-surface);
}

.ifi-page .ifi-payroll-cockpit-action--variables:active {
  background: #075985;
  background: var(--ifi-payroll-cockpit-variable-active-surface);
}

.ifi-page .ifi-payroll-cockpit-action--closing {
  background: rgba(32,36,43,0.95);
  background: var(--ifi-payroll-cockpit-closing-surface);
  border: 1px solid rgba(107,114,128,0.18);
  border: var(--ifi-payroll-cockpit-closing-action-border);
  color: #F5F3EE;
  color: var(--ifi-payroll-cockpit-inverse-text);
  font-weight: 600;
  font-weight: var(--ifi-payroll-cockpit-button-weight);
}

.ifi-page .ifi-payroll-cockpit-action--closing:hover {
  background: rgba(32,36,43,0.88);
  background: var(--ifi-payroll-cockpit-closing-hover-surface);
}

.ifi-page .ifi-payroll-cockpit-action--closing:active {
  background: rgba(17,19,23,0.98);
  background: var(--ifi-payroll-cockpit-closing-active-surface);
}

.ifi-page .ifi-payroll-cockpit-action--secondary {
  background: #FFFFFF;
  background: var(--ifi-payroll-cockpit-card-surface);
  border: 1px solid rgba(107,114,128,0.15);
  border: var(--ifi-payroll-cockpit-secondary-action-border);
  color: rgba(60,68,80,0.74);
  color: var(--ifi-payroll-cockpit-soft-text);
  font-weight: 500;
  font-weight: var(--ifi-payroll-cockpit-secondary-button-weight);
}

.ifi-page .ifi-payroll-cockpit-action--secondary:active {
  background: rgba(60,68,80,0.08);
  background: var(--ifi-payroll-cockpit-active-surface);
}

.ifi-page .ifi-payroll-cockpit-closed-note {
  margin: 0.75rem 0 0;
  margin: var(--ifi-payroll-cockpit-closed-note-margin);
  color: rgba(60,68,80,0.55);
  color: var(--ifi-payroll-cockpit-faint-text);
  text-align: center;
  text-align: var(--ifi-payroll-cockpit-rhythm-center);
}

.ifi-page .ifi-new-period-drawer-overlay {
  position: fixed;
  position: var(--ifi-new-period-drawer-overlay-position);
  inset: 0;
  inset: var(--ifi-new-period-drawer-overlay-inset);
  z-index: 40;
  z-index: var(--ifi-new-period-drawer-overlay-z-index);
  display: flex;
  display: var(--ifi-new-period-drawer-overlay-display);
  align-items: center;
  align-items: var(--ifi-new-period-drawer-overlay-align);
  justify-content: center;
  justify-content: var(--ifi-new-period-drawer-overlay-justify);
  background: rgba(15,23,42,0.40);
  background: var(--ifi-new-period-drawer-overlay-surface);
  padding-inline: 1rem;
  padding-inline: var(--ifi-new-period-drawer-overlay-padding-inline);
}

.ifi-page .ifi-new-period-drawer {
  width: 100%;
  width: var(--ifi-new-period-drawer-width);
  max-width: 28rem;
  max-width: var(--ifi-new-period-drawer-max-width);
  padding: 1.5rem;
  padding: var(--ifi-new-period-drawer-padding);
  background: #FFFFFF;
  background: var(--ifi-new-period-drawer-panel-surface);
  border-radius: 1rem;
  border-radius: var(--ifi-new-period-drawer-panel-radius);
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
  box-shadow: var(--ifi-new-period-drawer-panel-shadow); /* design-token-authority: allow */
}

.ifi-page .ifi-new-period-drawer-header {
  display: flex;
  display: var(--ifi-new-period-drawer-header-display);
  align-items: baseline;
  align-items: var(--ifi-new-period-drawer-header-align);
  justify-content: space-between;
  justify-content: var(--ifi-new-period-drawer-header-justify);
  margin-bottom: 1rem;
  margin-bottom: var(--ifi-new-period-drawer-header-margin-bottom);
}

.ifi-page .ifi-new-period-drawer-title {
  margin: 0;
  margin: var(--ifi-new-period-drawer-title-margin);
  color: #0f172a;
  color: var(--ifi-new-period-drawer-title-text);
  font-size: 1.125rem;
  font-size: var(--ifi-new-period-drawer-title-font);
  font-weight: 600;
  font-weight: var(--ifi-new-period-drawer-title-weight);
}

.ifi-page .ifi-new-period-drawer-close {
  padding: 0.25rem;
  padding: var(--ifi-new-period-drawer-close-padding);
  border: 0;
  border-radius: 0.25rem;
  border-radius: var(--ifi-new-period-drawer-close-radius);
  background: transparent;
  color: #94a3b8;
  color: var(--ifi-new-period-drawer-close-text);
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  transition: var(--ifi-new-period-drawer-action-transition);
}

.ifi-page .ifi-new-period-drawer-close:hover {
  background: #f1f5f9;
  background: var(--ifi-new-period-drawer-close-surface-hover);
  color: #334155;
  color: var(--ifi-new-period-drawer-close-text-hover);
}

.ifi-page .ifi-new-period-drawer-close:disabled {
  opacity: 0.4;
  opacity: var(--ifi-new-period-drawer-close-disabled-opacity);
}

.ifi-page .ifi-new-period-drawer-copy {
  margin: 0 0 1rem;
  margin: var(--ifi-new-period-drawer-copy-margin);
  color: #64748b;
  color: var(--ifi-new-period-drawer-copy-text);
  font-size: 0.875rem;
  font-size: var(--ifi-new-period-drawer-copy-font);
}

.ifi-page .ifi-new-period-drawer-grid {
  display: grid;
  display: var(--ifi-new-period-drawer-grid-display);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-columns: var(--ifi-new-period-drawer-grid-columns);
  gap: 0.75rem;
  grid-gap: 0.75rem;
  grid-gap: var(--ifi-new-period-drawer-grid-gap);
  gap: var(--ifi-new-period-drawer-grid-gap);
}

.ifi-page .ifi-new-period-drawer-field {
  display: flex;
  display: var(--ifi-new-period-drawer-field-display);
  flex-direction: column;
  flex-direction: var(--ifi-new-period-drawer-field-direction);
  gap: 0.25rem;
  gap: var(--ifi-new-period-drawer-field-gap);
  color: #334155;
  color: var(--ifi-new-period-drawer-field-text);
  font-size: 0.875rem;
  font-size: var(--ifi-new-period-drawer-field-font);
}

.ifi-page .ifi-new-period-drawer-select {
  padding: 0.375rem 0.5rem;
  padding: var(--ifi-new-period-drawer-control-padding);
  background: #FFFFFF;
  background: var(--ifi-new-period-drawer-control-surface);
  border: 1px solid #cbd5e1;
  border: var(--ifi-new-period-drawer-control-border);
  border-radius: 0.375rem;
  border-radius: var(--ifi-new-period-drawer-control-radius);
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
  box-shadow: var(--ifi-new-period-drawer-control-shadow); /* design-token-authority: allow */
  font-size: 0.875rem;
  font-size: var(--ifi-new-period-drawer-action-font);
}

.ifi-page .ifi-new-period-drawer-select:focus {
  outline: none;
  outline: var(--ifi-new-period-drawer-control-focus-outline);
  border-color: #38bdf8;
  border-color: var(--ifi-new-period-drawer-control-focus-border);
  box-shadow: 0 0 0 1px #bae6fd;
  box-shadow: var(--ifi-new-period-drawer-control-focus-shadow); /* design-token-authority: allow */
}

.ifi-page .ifi-new-period-drawer-error {
  margin-top: 1rem;
  margin-top: var(--ifi-new-period-drawer-error-margin-top);
  padding: 0.75rem;
  padding: var(--ifi-new-period-drawer-error-padding);
  background: #fff1f2;
  background: var(--ifi-new-period-drawer-error-surface);
  border: 1px solid #fecdd3;
  border: var(--ifi-new-period-drawer-error-border);
  border-radius: 0.375rem;
  border-radius: var(--ifi-new-period-drawer-error-radius);
  color: #be123c;
  color: var(--ifi-new-period-drawer-error-text);
  font-size: 0.875rem;
  font-size: var(--ifi-new-period-drawer-action-font);
}

.ifi-page .ifi-new-period-drawer-footer {
  display: flex;
  display: var(--ifi-new-period-drawer-footer-display);
  align-items: center;
  align-items: var(--ifi-new-period-drawer-footer-align);
  justify-content: flex-end;
  justify-content: var(--ifi-new-period-drawer-footer-justify);
  gap: 0.5rem;
  gap: var(--ifi-new-period-drawer-footer-gap);
  margin-top: 1.5rem;
  margin-top: var(--ifi-new-period-drawer-footer-margin-top);
}

.ifi-page .ifi-new-period-drawer-action {
  padding: 0.375rem 1rem;
  padding: var(--ifi-new-period-drawer-action-padding);
  border-radius: 0.375rem;
  border-radius: var(--ifi-new-period-drawer-action-radius);
  font-size: 0.875rem;
  font-size: var(--ifi-new-period-drawer-action-font);
  font-weight: 500;
  font-weight: var(--ifi-new-period-drawer-action-weight);
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  transition: var(--ifi-new-period-drawer-action-transition);
}

.ifi-page .ifi-new-period-drawer-action:disabled {
  opacity: 0.5;
  opacity: var(--ifi-new-period-drawer-action-disabled-opacity);
}

.ifi-page .ifi-new-period-drawer-action--secondary {
  background: #FFFFFF;
  background: var(--ifi-new-period-drawer-secondary-surface);
  border: 1px solid #cbd5e1;
  border: var(--ifi-new-period-drawer-secondary-border);
  color: #334155;
  color: var(--ifi-new-period-drawer-secondary-text);
}

.ifi-page .ifi-new-period-drawer-action--secondary:hover {
  background: #f8fafc;
  background: var(--ifi-new-period-drawer-secondary-surface-hover);
}

.ifi-page .ifi-new-period-drawer-action--primary {
  background: #0284c7;
  background: var(--ifi-new-period-drawer-primary-surface);
  border: 0;
  color: #FFFFFF;
  color: var(--ifi-new-period-drawer-primary-text);
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
  box-shadow: var(--ifi-new-period-drawer-control-shadow); /* design-token-authority: allow */
}

.ifi-page .ifi-new-period-drawer-action--primary:hover {
  background: #0369a1;
  background: var(--ifi-new-period-drawer-primary-surface-hover);
}

.ifi-page .ifi-brand-identity-copy,
.ifi-page .ifi-brand-identity-hint {
  color: #6b7280;
  color: var(--ifi-brand-identity-muted-text);
  font-size: 0.75rem;
  font-size: var(--ifi-brand-identity-micro-font);
}

.ifi-page .ifi-brand-identity-copy {
  margin: 0 0 0.75rem;
  margin: var(--ifi-brand-identity-copy-margin);
}

.ifi-page .ifi-brand-identity-hint {
  margin: 0.25rem 0 0.5rem;
  margin: var(--ifi-brand-identity-hint-margin);
}

.ifi-page .ifi-brand-identity-field {
  margin-bottom: 0.75rem;
  margin-bottom: var(--ifi-brand-identity-field-margin-bottom);
}

.ifi-page .ifi-brand-identity-label {
  display: block;
  display: var(--ifi-brand-identity-label-display);
  margin-bottom: 0.25rem;
  margin-bottom: var(--ifi-brand-identity-label-margin-bottom);
  color: #111317;
  color: var(--ifi-brand-identity-label-text);
  font-size: 0.875rem;
  font-size: var(--ifi-brand-identity-body-font);
}

.ifi-page .ifi-brand-identity-input {
  width: 100%;
  width: var(--ifi-brand-identity-control-width);
  padding: 0.5rem 0.75rem;
  padding: var(--ifi-brand-identity-control-padding);
  background: #fff;
  background: var(--ifi-brand-identity-control-surface);
  border: 1px solid #d1d5db;
  border: var(--ifi-brand-identity-control-border);
  border-radius: 0.375rem;
  border-radius: var(--ifi-brand-identity-control-radius);
  color: #111317;
  color: var(--ifi-brand-identity-control-text);
  font-size: 0.875rem;
  font-size: var(--ifi-brand-identity-body-font);
}

.ifi-page .ifi-brand-identity-meta {
  margin-bottom: 0.75rem;
  margin-bottom: var(--ifi-brand-identity-meta-margin-bottom);
}

.ifi-page .ifi-brand-identity-actions {
  display: flex;
  display: var(--ifi-brand-identity-actions-display);
  align-items: center;
  align-items: var(--ifi-brand-identity-actions-align);
  gap: 0.75rem;
  gap: var(--ifi-brand-identity-actions-gap);
}

.ifi-page .ifi-brand-identity-save {
  padding: 0.5rem 1rem;
  padding: var(--ifi-brand-identity-action-padding);
  background: #2563eb;
  background: var(--ifi-brand-identity-primary-surface);
  border: 0;
  border-radius: 0.375rem;
  border-radius: var(--ifi-brand-identity-action-radius);
  color: #fff;
  color: var(--ifi-brand-identity-inverse-text);
  font-size: 0.875rem;
  font-size: var(--ifi-brand-identity-body-font);
  font-weight: 500;
  font-weight: var(--ifi-brand-identity-action-weight);
}

.ifi-page .ifi-brand-identity-save:disabled {
  opacity: 0.7;
  opacity: var(--ifi-brand-identity-disabled-opacity);
}

.ifi-page .ifi-brand-identity-status {
  font-size: 0.875rem;
  font-size: var(--ifi-brand-identity-body-font);
}

.ifi-page .ifi-brand-identity-status--success {
  color: #16a34a;
  color: var(--ifi-brand-identity-success-text);
}

.ifi-page .ifi-brand-identity-status--danger {
  color: #dc2626;
  color: var(--ifi-brand-identity-danger-text);
}

.ifi-page .ifi-demo-origin-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  gap: var(--ifi-demo-origin-badge-gap);
  padding: 2px 7px;
  padding: var(--ifi-demo-origin-badge-padding);
  border: 1px solid rgba(232,213,150,0.45);
  border: var(--ifi-demo-origin-badge-border);
  border-radius: 6px;
  border-radius: var(--ifi-demo-origin-badge-radius);
  background: rgba(232,213,150,0.12);
  background: var(--ifi-demo-origin-badge-surface);
  color: rgba(232,213,150,1);
  color: var(--ifi-demo-origin-badge-text);
  font-size: 10px;
  font-size: var(--ifi-demo-origin-badge-font);
  font-weight: 600;
  font-weight: var(--ifi-demo-origin-badge-weight);
  letter-spacing: 0.04em;
  letter-spacing: var(--ifi-demo-origin-badge-letter-spacing);
  text-transform: uppercase;
  text-transform: var(--ifi-demo-origin-badge-transform);
  white-space: nowrap;
  white-space: var(--ifi-demo-origin-badge-white-space);
}

.ifi-page .ifi-demo-mode-helper {
  margin-bottom: 12px;
  margin-bottom: var(--ifi-tenant-settings-section-margin);
  color: #6b7280;
  color: var(--ifi-tenant-settings-text-secondary);
  font-size: 12px;
  font-size: var(--ifi-tenant-settings-font-helper);
}

.ifi-page .ifi-demo-mode-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  gap: var(--ifi-tenant-settings-toggle-gap);
  cursor: pointer;
  font-size: 13px;
  font-size: var(--ifi-tenant-settings-font-control);
}

.ifi-page .ifi-demo-mode-toggle--busy {
  cursor: wait;
}

.ifi-page .ifi-demo-mode-input {
  width: 16px;
  width: var(--ifi-tenant-settings-input-size);
  height: 16px;
  height: var(--ifi-tenant-settings-input-size);
  accent-color: #2563eb;
  accent-color: var(--ifi-tenant-settings-accent);
}

.ifi-page .ifi-demo-mode-status {
  margin-top: 8px;
  margin-top: var(--ifi-tenant-settings-small-margin);
  color: #9ca3af;
  color: var(--ifi-tenant-settings-text-muted);
  font-size: 11px;
  font-size: var(--ifi-tenant-settings-font-micro);
}

.ifi-page .ifi-yearend-copy,
.ifi-page .ifi-yearend-hint {
  color: #6b7280;
  color: var(--ifi-yearend-muted-text);
  font-size: 0.75rem;
  font-size: var(--ifi-yearend-micro-font);
}

.ifi-page .ifi-yearend-copy {
  margin: 0 0 0.75rem;
  margin: var(--ifi-yearend-copy-margin);
}

.ifi-page .ifi-yearend-hint {
  margin: 0.25rem 0 0;
  margin: var(--ifi-yearend-hint-margin);
}

.ifi-page .ifi-yearend-field {
  margin-bottom: 0.75rem;
  margin-bottom: var(--ifi-yearend-field-margin-bottom);
}

.ifi-page .ifi-yearend-toggle {
  display: flex;
  display: var(--ifi-yearend-toggle-display);
  align-items: center;
  align-items: var(--ifi-yearend-toggle-align);
  gap: 0.5rem;
  gap: var(--ifi-yearend-toggle-gap);
  margin-bottom: 0.75rem;
  margin-bottom: var(--ifi-yearend-toggle-margin-bottom);
  color: #111317;
  color: var(--ifi-yearend-label-text);
  font-size: 0.875rem;
  font-size: var(--ifi-yearend-body-font);
}

.ifi-page .ifi-yearend-label {
  display: block;
  display: var(--ifi-yearend-label-display);
  margin-bottom: 0.25rem;
  margin-bottom: var(--ifi-yearend-label-margin-bottom);
  color: #111317;
  color: var(--ifi-yearend-label-text);
  font-size: 0.875rem;
  font-size: var(--ifi-yearend-body-font);
}

.ifi-page .ifi-yearend-input {
  width: 100%;
  width: var(--ifi-yearend-control-width);
  padding: 0.5rem 0.75rem;
  padding: var(--ifi-yearend-control-padding);
  background: #fff;
  background: var(--ifi-yearend-control-surface);
  border: 1px solid #d1d5db;
  border: var(--ifi-yearend-control-border);
  border-radius: 0.375rem;
  border-radius: var(--ifi-yearend-control-radius);
  color: #111317;
  color: var(--ifi-yearend-control-text);
  font-size: 0.875rem;
  font-size: var(--ifi-yearend-body-font);
}

.ifi-page .ifi-yearend-input:disabled {
  opacity: 0.7;
  opacity: var(--ifi-yearend-disabled-opacity);
}

.ifi-page .ifi-yearend-meta {
  margin-bottom: 0.75rem;
  margin-bottom: var(--ifi-yearend-meta-margin-bottom);
}

.ifi-page .ifi-yearend-actions {
  display: flex;
  display: var(--ifi-yearend-actions-display);
  align-items: center;
  align-items: var(--ifi-yearend-actions-align);
  gap: 0.75rem;
  gap: var(--ifi-yearend-actions-gap);
}

.ifi-page .ifi-yearend-save {
  padding: 0.5rem 1rem;
  padding: var(--ifi-yearend-action-padding);
  background: #2563eb;
  background: var(--ifi-yearend-primary-surface);
  border: 0;
  border: var(--ifi-yearend-action-border);
  border-radius: 0.375rem;
  border-radius: var(--ifi-yearend-action-radius);
  color: #fff;
  color: var(--ifi-yearend-inverse-text);
  font-size: 0.875rem;
  font-size: var(--ifi-yearend-body-font);
  font-weight: 500;
  font-weight: var(--ifi-yearend-action-weight);
}

.ifi-page .ifi-yearend-save:disabled {
  opacity: 0.7;
  opacity: var(--ifi-yearend-disabled-opacity);
}

.ifi-page .ifi-yearend-status {
  font-size: 0.875rem;
  font-size: var(--ifi-yearend-body-font);
}

.ifi-page .ifi-yearend-status--success,
.ifi-page .ifi-yearend-statement-status--configured {
  color: #16a34a;
  color: var(--ifi-yearend-success-text);
}

.ifi-page .ifi-yearend-status--danger {
  color: #dc2626;
  color: var(--ifi-yearend-danger-text);
}

.ifi-page .ifi-yearend-statement-row {
  align-items: flex-start;
  align-items: var(--ifi-yearend-statement-row-align);
  flex-direction: column;
  flex-direction: var(--ifi-yearend-statement-row-direction);
  gap: 0.25rem;
  gap: var(--ifi-yearend-statement-row-gap);
}

.ifi-page .ifi-yearend-statement-control {
  display: flex;
  display: var(--ifi-yearend-toggle-display);
  align-items: center;
  align-items: var(--ifi-yearend-toggle-align);
  gap: 0.5rem;
  gap: var(--ifi-yearend-toggle-gap);
  color: #111317;
  color: var(--ifi-yearend-label-text);
  font-size: 0.875rem;
  font-size: var(--ifi-yearend-body-font);
}

.ifi-page .ifi-yearend-statement-status {
  font-size: 0.75rem;
  font-size: var(--ifi-yearend-micro-font);
}

.ifi-page .ifi-yearend-statement-status--pending {
  color: #9ca3af;
  color: var(--ifi-yearend-pending-text);
}

@media (max-width: 900px) {
  .ifi-page.is-cockpit-active .ifi-headline {
    padding-left: 22px;
    padding-top: 92px;
  }
}

/* ── AES-004 — Empty Value Placeholder ──────────────────────────────────────
 * Applied by <EmptyValue /> when a data field has no value.
 * Override: .ifi-page .ifi-empty-value { opacity: 0.6; font-style: normal; }
 * ─────────────────────────────────────────────────────────────────────────── */
.ifi-empty-value {
  opacity: 0.42;
  font-style: italic;
  -webkit-user-select: none;
          user-select: none;
  pointer-events: none;
}

/* F1b — Centers launcher. design-token-authority: allow.
   Reuses existing IFI tokens only (surfaces, borders, radii, spacing, shadows)
   — no raw colors/gradients. Bottom-left so it never collides with the
   bottom-right FAB stack (support/settings/manual/trust/readiness). The
   bespoke maquette treatment lands after the owner selects a visual direction. */
.ifi-page .ifi-center-launcher {
  position: fixed;
  bottom: 28px;
  bottom: var(--ifi-space-lg);
  left: 28px;
  left: var(--ifi-space-lg);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 12px;
  gap: var(--ifi-space-sm);
  align-items: flex-start;
}
.ifi-page .ifi-center-launcher-popover {
  display: flex;
  flex-direction: column;
  gap: 20px;
  gap: var(--ifi-space-md);
  max-height: 60vh;
  overflow-y: auto;
  padding: 20px;
  padding: var(--ifi-space-md);
  border-radius: 20px;
  border-radius: var(--ifi-radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.96) 50%, rgba(216,226,242,0.92) 100%);
  background: var(--ifi-glass-strong);
  border: 1px solid 0.5px solid rgba(26,31,42,0.14);
  border: 1px solid var(--ifi-border-subtle);
  box-shadow: 0 6px 18px rgba(26,31,42,0.12);
  box-shadow: var(--ifi-sh-float-sm);
}
.ifi-page .ifi-center-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  gap: var(--ifi-space-xs);
}
.ifi-page .ifi-center-group-title {
  color: rgba(200, 210, 240, 0.65);
  color: var(--ifi-color-text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
  gap: var(--ifi-space-xs);
}
.ifi-page .ifi-center-group-icon {
  font-size: 1em;
}
.ifi-page button.ifi-center-item {
  text-align: left;
  padding: 12px 20px;
  padding: var(--ifi-space-sm) var(--ifi-space-md);
  border-radius: 14px;
  border-radius: var(--ifi-radius-md);
  background: transparent;
  border: 1px solid 0.5px solid rgba(26,31,42,0.14);
  border: 1px solid var(--ifi-border-subtle);
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ifi-page button.ifi-center-item:hover,
.ifi-page button.ifi-center-item:focus-visible {
  border-color: 0.5px solid rgba(26,31,42,0.20);
  border-color: var(--ifi-border-medium);
  box-shadow: 0 1px 3px rgba(26,31,42,0.10);
  box-shadow: var(--ifi-sh-contact);
}
@media (prefers-reduced-motion: reduce) {
  .ifi-page button.ifi-center-item {
    transition: none;
  }
}

/* L2 — Perimeter grant editor. design-token-authority: allow.
   Existing IFI tokens only (no raw colors); avoids the count-locked surface
   tokens (control-surface/elevated-surface) — uses glass-strong + borders. */
.ifi-page .ifi-perimeter-editor {
  display: flex;
  flex-direction: column;
  gap: 20px;
  gap: var(--ifi-space-md);
}
.ifi-page .ifi-perimeter-editor-title {
  margin: 0;
  color: #1A1F2A;
  color: var(--ifi-cat-void);
}
.ifi-page .ifi-perimeter-editor-intro,
.ifi-page .ifi-perimeter-muted {
  margin: 0;
  color: rgba(200, 210, 240, 0.65);
  color: var(--ifi-color-text-secondary);
}
.ifi-page .ifi-perimeter-error {
  margin: 0;
  color: rgba(184,31,38,0.65);
  color: var(--ifi-critical-text-soft);
}
.ifi-page .ifi-perimeter-module {
  display: flex;
  flex-direction: column;
  gap: 12px;
  gap: var(--ifi-space-sm);
  padding: 20px;
  padding: var(--ifi-space-md);
  border-radius: 20px;
  border-radius: var(--ifi-radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.96) 50%, rgba(216,226,242,0.92) 100%);
  background: var(--ifi-glass-strong);
  border: 1px solid 0.5px solid rgba(26,31,42,0.14);
  border: 1px solid var(--ifi-border-subtle);
}
.ifi-page .ifi-perimeter-module-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  gap: var(--ifi-space-sm);
}
.ifi-page .ifi-perimeter-module-name {
  font-weight: 600;
  color: #1A1F2A;
  color: var(--ifi-cat-void);
}
.ifi-page .ifi-perimeter-module-level {
  color: rgba(200, 210, 240, 0.65);
  color: var(--ifi-color-text-secondary);
}
.ifi-page .ifi-perimeter-modes,
.ifi-page .ifi-perimeter-values {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  gap: var(--ifi-space-xs);
}
.ifi-page button.ifi-perimeter-mode,
.ifi-page button.ifi-perimeter-value {
  padding: 8px 12px;
  padding: var(--ifi-space-xs) var(--ifi-space-sm);
  border-radius: 9999px;
  border-radius: var(--ifi-radius-full);
  background: transparent;
  border: 1px solid 0.5px solid rgba(26,31,42,0.14);
  border: 1px solid var(--ifi-border-subtle);
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  cursor: pointer;
}
.ifi-page button.ifi-perimeter-mode.is-active,
.ifi-page button.ifi-perimeter-value.is-selected {
  border-color: 0.5px solid rgba(26,31,42,0.20);
  border-color: var(--ifi-border-medium);
  box-shadow: 0 1px 3px rgba(26,31,42,0.10);
  box-shadow: var(--ifi-sh-contact);
}
.ifi-page .ifi-perimeter-dims {
  display: flex;
  flex-direction: column;
  gap: 12px;
  gap: var(--ifi-space-sm);
}
.ifi-page .ifi-perimeter-dim-label {
  color: rgba(200, 210, 240, 0.65);
  color: var(--ifi-color-text-secondary);
  margin-bottom: 8px;
  margin-bottom: var(--ifi-space-xs);
}
.ifi-page .ifi-perimeter-hier {
  display: flex;
  flex-direction: column;
  gap: 8px;
  gap: var(--ifi-space-xs);
  color: rgba(200, 210, 240, 0.65);
  color: var(--ifi-color-text-secondary);
}
.ifi-page .ifi-perimeter-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  gap: var(--ifi-space-sm);
}
.ifi-page button.ifi-perimeter-save {
  padding: 8px 20px;
  padding: var(--ifi-space-xs) var(--ifi-space-md);
  border-radius: 14px;
  border-radius: var(--ifi-radius-md);
  background: transparent;
  border: 1px solid 0.5px solid rgba(26,31,42,0.20);
  border: 1px solid var(--ifi-border-medium);
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  cursor: pointer;
}
.ifi-page button.ifi-perimeter-save:disabled {
  opacity: 0.5;
  cursor: default;
}
.ifi-page .ifi-perimeter-saved {
  color: rgba(200, 210, 240, 0.65);
  color: var(--ifi-color-text-secondary);
}

/* ACC-1.1b — Platform-master administration panel (governed super-admins) */
.ifi-page .ifi-platadmin {
  display: flex;
  flex-direction: column;
  gap: 20px;
  gap: var(--ifi-space-md);
}
.ifi-page .ifi-platadmin-title {
  margin: 0;
  color: #1A1F2A;
  color: var(--ifi-cat-void);
}
.ifi-page .ifi-platadmin-intro,
.ifi-page .ifi-platadmin-muted {
  margin: 0;
  color: rgba(200, 210, 240, 0.65);
  color: var(--ifi-color-text-secondary);
}
.ifi-page .ifi-platadmin-error {
  margin: 0;
  color: rgba(184,31,38,0.65);
  color: var(--ifi-critical-text-soft);
}
.ifi-page .ifi-platadmin-grant {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  gap: var(--ifi-space-sm);
  align-items: center;
}
.ifi-page .ifi-platadmin-input {
  flex: 1 1 12rem;
  padding: 8px 12px;
  padding: var(--ifi-space-xs) var(--ifi-space-sm);
  border-radius: 14px;
  border-radius: var(--ifi-radius-md);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.96) 50%, rgba(216,226,242,0.92) 100%);
  background: var(--ifi-glass-strong);
  border: 1px solid 0.5px solid rgba(26,31,42,0.14);
  border: 1px solid var(--ifi-border-subtle);
  color: #1A1F2A;
  color: var(--ifi-cat-void);
}
.ifi-page button.ifi-platadmin-btn {
  padding: 8px 20px;
  padding: var(--ifi-space-xs) var(--ifi-space-md);
  border-radius: 14px;
  border-radius: var(--ifi-radius-md);
  background: transparent;
  border: 1px solid 0.5px solid rgba(26,31,42,0.20);
  border: 1px solid var(--ifi-border-medium);
  color: #1A1F2A;
  color: var(--ifi-cat-void);
  cursor: pointer;
}
.ifi-page button.ifi-platadmin-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.ifi-page .ifi-platadmin-notice {
  margin: 0;
  padding: 8px 12px;
  padding: var(--ifi-space-xs) var(--ifi-space-sm);
  border-radius: 14px;
  border-radius: var(--ifi-radius-md);
}
.ifi-page .ifi-platadmin-notice.is-ok {
  color: #047857;
  color: var(--ifi-success);
  background: rgba(31,124,80,0.06);
  background: var(--ifi-success-surface-subtle);
  border: 1px solid rgba(4,120,87,0.28);
  border: 1px solid var(--ifi-success-border-live);
}
.ifi-page .ifi-platadmin-notice.is-error {
  color: rgba(184,31,38,0.65);
  color: var(--ifi-critical-text-soft);
}
.ifi-page .ifi-platadmin-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  gap: var(--ifi-space-sm);
}
.ifi-page .ifi-platadmin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  gap: var(--ifi-space-sm);
  padding: 12px 20px;
  padding: var(--ifi-space-sm) var(--ifi-space-md);
  border-radius: 20px;
  border-radius: var(--ifi-radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.96) 50%, rgba(216,226,242,0.92) 100%);
  background: var(--ifi-glass-strong);
  border: 1px solid 0.5px solid rgba(26,31,42,0.14);
  border: 1px solid var(--ifi-border-subtle);
}
.ifi-page .ifi-platadmin-row-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  gap: var(--ifi-space-sm);
}
.ifi-page .ifi-platadmin-uid {
  font-weight: 600;
  color: #1A1F2A;
  color: var(--ifi-cat-void);
}
.ifi-page .ifi-platadmin-tag {
  padding: 0 8px;
  padding: 0 var(--ifi-space-xs);
  border-radius: 9999px;
  border-radius: var(--ifi-radius-full);
  border: 1px solid 0.5px solid rgba(26,31,42,0.14);
  border: 1px solid var(--ifi-border-subtle);
  color: rgba(200, 210, 240, 0.65);
  color: var(--ifi-color-text-secondary);
}
.ifi-page .ifi-platadmin-reason {
  color: rgba(200, 210, 240, 0.65);
  color: var(--ifi-color-text-secondary);
}
.ifi-page button.ifi-platadmin-revoke {
  padding: 8px 20px;
  padding: var(--ifi-space-xs) var(--ifi-space-md);
  border-radius: 14px;
  border-radius: var(--ifi-radius-md);
  background: transparent;
  border: 1px solid 0.5px solid rgba(26,31,42,0.20);
  border: 1px solid var(--ifi-border-medium);
  color: rgba(184,31,38,0.65);
  color: var(--ifi-critical-text-soft);
  cursor: pointer;
}
.ifi-page button.ifi-platadmin-revoke:disabled {
  opacity: 0.5;
  cursor: default;
}

/**
 * primitives-base.css
 * =====================
 * Shell / layout / typography primitives for the ThemeEngine.
 * Every value reads from a --tx-* CSS variable.  The `:root` block below
 * publishes *fallback* defaults so that a .tx-* primitive rendered outside
 * of a <ThemeEngineProvider> still has a legible baseline (white bg, dark
 * text, neutral border) instead of falling back to transparent/unset.
 */

/* ---------- safety net: default tokens at document root ---------- */

:root {
  /* colours */
  --tx-colors-bg: #ffffff;
  --tx-colors-bgCard: #ffffff;
  --tx-colors-bgElevated: #f9fafb;
  --tx-colors-bgMuted: #f3f4f6;
  --tx-colors-text: #0f172a;
  --tx-colors-textMuted: #64748b;
  --tx-colors-textInverse: #ffffff;
  --tx-colors-accent: #0d9488;
  --tx-colors-accentSoft: rgba(13, 148, 136, 0.14);
  --tx-colors-accentFg: #ffffff;
  --tx-colors-border: #e2e8f0;
  --tx-colors-borderStrong: #cbd5e1;
  --tx-colors-success: #10b981;
  --tx-colors-warning: #f59e0b;
  --tx-colors-danger: #ef4444;
  --tx-colors-info: #3b82f6;
  /* fonts */
  --tx-fonts-heading: 'Inter', system-ui, sans-serif;
  --tx-fonts-body: 'Inter', system-ui, sans-serif;
  --tx-fonts-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --tx-fonts-display: 'Inter', system-ui, sans-serif;
  --tx-fonts-weightNormal: 400;
  --tx-fonts-weightMedium: 500;
  --tx-fonts-weightBold: 700;
  --tx-fonts-trackingTight: -0.02em;
  --tx-fonts-trackingNormal: 0;
  --tx-fonts-trackingWide: 0.05em;
  /* radius */
  --tx-radius-none: 0;
  --tx-radius-sm: 6px;
  --tx-radius-md: 10px;
  --tx-radius-lg: 16px;
  --tx-radius-xl: 24px;
  --tx-radius-full: 9999px;
  /* shadows */
  --tx-shadows-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --tx-shadows-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --tx-shadows-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
  --tx-shadows-glow: 0 0 0 rgba(0, 0, 0, 0);
  /* motion */
  --tx-motion-preset: smooth;
  --tx-motion-duration: 240ms;
  --tx-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tx-motion-stagger: 60ms;
  /* borders */
  --tx-borderWidth-thin: 1px;
  --tx-borderWidth-base: 1px;
  --tx-borderWidth-thick: 2px;
}

/* ---------- shell ---------- */

.tx-shell {
  min-height: 100vh;
  background: #ffffff;
  background: var(--tx-colors-bg);
  color: #0f172a;
  color: var(--tx-colors-text);
  font-family: 'Inter', system-ui, sans-serif;
  font-family: var(--tx-fonts-body);
  font-weight: 400;
  font-weight: var(--tx-fonts-weightNormal);
  letter-spacing: 0;
  letter-spacing: var(--tx-fonts-trackingNormal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition:
    background-color 500ms cubic-bezier(0.22, 1, 0.36, 1),
    color 500ms cubic-bezier(0.22, 1, 0.36, 1);
  transition:
    background-color 500ms var(--tx-motion-ease),
    color 500ms var(--tx-motion-ease);
  position: relative;
  isolation: isolate;
}

.tx-shell ::selection {
  background: #0d9488;
  background: var(--tx-colors-accent);
  color: #ffffff;
  color: var(--tx-colors-accentFg);
}

/* ---------- typography scale ---------- */

.tx-display,
.tx-heading {
  font-family: 'Inter', system-ui, sans-serif;
  font-family: var(--tx-fonts-heading);
  font-weight: 700;
  font-weight: var(--tx-fonts-weightBold);
  letter-spacing: -0.02em;
  letter-spacing: var(--tx-fonts-trackingTight);
  color: #0f172a;
  color: var(--tx-colors-text);
  line-height: 1.05;
  margin: 0;
}

.tx-display { font-family: 'Inter', system-ui, sans-serif; font-family: var(--tx-fonts-display); font-size: clamp(40px, 6vw, 80px); }
.tx-h1      { font-family: 'Inter', system-ui, sans-serif; font-family: var(--tx-fonts-heading); font-size: clamp(32px, 4.2vw, 56px); font-weight: 700; font-weight: var(--tx-fonts-weightBold); line-height: 1.1; margin: 0; color: #0f172a; color: var(--tx-colors-text); letter-spacing: -0.02em; letter-spacing: var(--tx-fonts-trackingTight); }
.tx-h2      { font-family: 'Inter', system-ui, sans-serif; font-family: var(--tx-fonts-heading); font-size: clamp(24px, 3vw, 40px); font-weight: 700; font-weight: var(--tx-fonts-weightBold); line-height: 1.15; margin: 0; color: #0f172a; color: var(--tx-colors-text); letter-spacing: -0.02em; letter-spacing: var(--tx-fonts-trackingTight); }
.tx-h3      { font-family: 'Inter', system-ui, sans-serif; font-family: var(--tx-fonts-heading); font-size: clamp(18px, 2.2vw, 28px); font-weight: 700; font-weight: var(--tx-fonts-weightBold); line-height: 1.2; margin: 0; color: #0f172a; color: var(--tx-colors-text); }
.tx-h4      { font-family: 'Inter', system-ui, sans-serif; font-family: var(--tx-fonts-heading); font-size: 18px; font-weight: 500; font-weight: var(--tx-fonts-weightMedium); line-height: 1.25; margin: 0; color: #0f172a; color: var(--tx-colors-text); }

.tx-text         { font-family: 'Inter', system-ui, sans-serif; font-family: var(--tx-fonts-body); font-size: 14px; line-height: 1.55; color: #0f172a; color: var(--tx-colors-text); }
.tx-text--lg     { font-size: 17px; line-height: 1.55; }
.tx-text--sm     { font-size: 12.5px; line-height: 1.5; }
.tx-muted        { color: #64748b; color: var(--tx-colors-textMuted); }
.tx-mono         { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-family: var(--tx-fonts-mono); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; letter-spacing: 0; }

.tx-kicker {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-family: var(--tx-fonts-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  letter-spacing: var(--tx-fonts-trackingWide);
  color: #64748b;
  color: var(--tx-colors-textMuted);
}

.tx-link {
  color: #0d9488;
  color: var(--tx-colors-accent);
  text-decoration: none;
  background-image: linear-gradient(to right, #0d9488, #0d9488);
  background-image: linear-gradient(to right, var(--tx-colors-accent), var(--tx-colors-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size 240ms cubic-bezier(0.22, 1, 0.36, 1);
  transition: background-size var(--tx-motion-duration) var(--tx-motion-ease);
}
.tx-link:hover {
  background-size: 100% 2px;
  color: #0d9488;
  color: var(--tx-colors-accent);
}

.tx-divider {
  height: 1px;
  background: #e2e8f0;
  background: var(--tx-colors-border);
  border: 0;
  margin: 20px 0;
}

/* ---------- containers ---------- */

.tx-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.tx-stack { display: flex; flex-direction: column; gap: 16px; }
.tx-stack--sm { gap: 8px; }
.tx-stack--lg { gap: 28px; }
.tx-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tx-row--between { justify-content: space-between; }

/* ---------- card ---------- */

.tx-card {
  background: #ffffff;
  background: var(--tx-colors-bgCard);
  color: #0f172a;
  color: var(--tx-colors-text);
  border: 1px solid #e2e8f0;
  border: var(--tx-borderWidth-base) solid var(--tx-colors-border);
  border-radius: 16px;
  border-radius: var(--tx-radius-lg);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  box-shadow: var(--tx-shadows-md);
  padding: 20px 24px;
  position: relative;
  transition:
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 240ms cubic-bezier(0.22, 1, 0.36, 1),
    background 240ms cubic-bezier(0.22, 1, 0.36, 1);
  transition:
    transform var(--tx-motion-duration) var(--tx-motion-ease),
    box-shadow var(--tx-motion-duration) var(--tx-motion-ease),
    border-color var(--tx-motion-duration) var(--tx-motion-ease),
    background var(--tx-motion-duration) var(--tx-motion-ease);
}
.tx-card:hover {
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  box-shadow: var(--tx-shadows-lg);
  border-color: #cbd5e1;
  border-color: var(--tx-colors-borderStrong);
}
.tx-card--elevated { background: #f9fafb; background: var(--tx-colors-bgElevated); }
.tx-card--muted    { background: #f3f4f6; background: var(--tx-colors-bgMuted); }

.tx-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.tx-card__title {
  font-family: 'Inter', system-ui, sans-serif;
  font-family: var(--tx-fonts-heading);
  font-size: 17px;
  font-weight: 700;
  font-weight: var(--tx-fonts-weightBold);
  color: #0f172a;
  color: var(--tx-colors-text);
  margin: 0;
}
.tx-card__footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
  border-top: 1px solid var(--tx-colors-border);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* ---------- button ---------- */

.tx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  min-height: 40px;
  font-family: 'Inter', system-ui, sans-serif;
  font-family: var(--tx-fonts-body);
  font-size: 14px;
  font-weight: 500;
  font-weight: var(--tx-fonts-weightMedium);
  letter-spacing: 0;
  letter-spacing: var(--tx-fonts-trackingNormal);
  line-height: 1;
  color: #ffffff;
  color: var(--tx-colors-accentFg);
  background: #0d9488;
  background: var(--tx-colors-accent);
  border: 1px solid #0d9488;
  border: var(--tx-borderWidth-base) solid var(--tx-colors-accent);
  border-radius: 10px;
  border-radius: var(--tx-radius-md);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  box-shadow: var(--tx-shadows-sm);
  cursor: pointer;
  text-decoration: none;
  outline: none;
  transition:
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1),
    background 240ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 240ms cubic-bezier(0.22, 1, 0.36, 1),
    color 240ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 240ms cubic-bezier(0.22, 1, 0.36, 1);
  transition:
    transform var(--tx-motion-duration) var(--tx-motion-ease),
    box-shadow var(--tx-motion-duration) var(--tx-motion-ease),
    background var(--tx-motion-duration) var(--tx-motion-ease),
    border-color var(--tx-motion-duration) var(--tx-motion-ease),
    color var(--tx-motion-duration) var(--tx-motion-ease),
    filter var(--tx-motion-duration) var(--tx-motion-ease);
  position: relative;
  overflow: hidden;
}
.tx-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08); box-shadow: var(--tx-shadows-md); filter: brightness(1.05); }
.tx-btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); box-shadow: var(--tx-shadows-sm); filter: brightness(0.95); }
.tx-btn:focus-visible { outline: 2px solid #0d9488; outline: 2px solid var(--tx-colors-accent); outline-offset: 3px; }
.tx-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.tx-btn--ghost {
  color: #0f172a;
  color: var(--tx-colors-text);
  background: transparent;
  border-color: #e2e8f0;
  border-color: var(--tx-colors-border);
  box-shadow: none;
}
.tx-btn--ghost:hover {
  background: #f3f4f6;
  background: var(--tx-colors-bgMuted);
  border-color: #cbd5e1;
  border-color: var(--tx-colors-borderStrong);
}

.tx-btn--soft {
  color: #0d9488;
  color: var(--tx-colors-accent);
  background: rgba(13, 148, 136, 0.14);
  background: var(--tx-colors-accentSoft);
  border-color: transparent;
  box-shadow: none;
}

.tx-btn--danger {
  color: #ffffff;
  color: var(--tx-colors-textInverse);
  background: #ef4444;
  background: var(--tx-colors-danger);
  border-color: #ef4444;
  border-color: var(--tx-colors-danger);
}

.tx-btn--icon {
  width: 40px;
  padding: 0;
  border-radius: 9999px;
  border-radius: var(--tx-radius-full);
}
.tx-btn--sm { min-height: 32px; padding: 8px 12px; font-size: 13px; } /* Audit B7: 8 px grid */
.tx-btn--lg { min-height: 48px; padding: 14px 24px; font-size: 15px; }

/* ---------- badge / chip ---------- */

.tx-badge {
  display: inline-flex;
  align-items: center;
  /* Audit B7: normalise to the 4/8 px baseline. */
  gap: 4px;
  padding: 4px 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-family: var(--tx-fonts-body);
  font-size: 11.5px;
  font-weight: 500;
  font-weight: var(--tx-fonts-weightMedium);
  letter-spacing: 0.05em;
  letter-spacing: var(--tx-fonts-trackingWide);
  text-transform: uppercase;
  color: #0d9488;
  color: var(--tx-colors-accent);
  background: rgba(13, 148, 136, 0.14);
  background: var(--tx-colors-accentSoft);
  border: 1px solid #e2e8f0;
  border: 1px solid var(--tx-colors-border);
  border-radius: 9999px;
  border-radius: var(--tx-radius-full);
  line-height: 1.4;
}
.tx-badge--success { color: #10b981; color: var(--tx-colors-success); border-color: #10b981; border-color: var(--tx-colors-success); }
.tx-badge--warning { color: #f59e0b; color: var(--tx-colors-warning); border-color: #f59e0b; border-color: var(--tx-colors-warning); }
.tx-badge--danger  { color: #ef4444; color: var(--tx-colors-danger);  border-color: #ef4444;  border-color: var(--tx-colors-danger);  }
.tx-badge--info    { color: #3b82f6; color: var(--tx-colors-info);    border-color: #3b82f6;    border-color: var(--tx-colors-info);    }

.tx-chip {
  display: inline-flex;
  align-items: center;
  /* Audit B7: align on 4/8 grid. */
  gap: 8px;
  padding: 8px 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-family: var(--tx-fonts-body);
  font-size: 13px;
  color: #0f172a;
  color: var(--tx-colors-text);
  background: #f3f4f6;
  background: var(--tx-colors-bgMuted);
  border: 1px solid #e2e8f0;
  border: 1px solid var(--tx-colors-border);
  border-radius: 9999px;
  border-radius: var(--tx-radius-full);
}

/* ---------- avatar ---------- */

.tx-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border-radius: var(--tx-radius-full);
  background: #0d9488;
  background: var(--tx-colors-accent);
  color: #ffffff;
  color: var(--tx-colors-accentFg);
  font-family: 'Inter', system-ui, sans-serif;
  font-family: var(--tx-fonts-heading);
  font-weight: 700;
  font-weight: var(--tx-fonts-weightBold);
  font-size: 14px;
  border: 2px solid #ffffff;
  border: 2px solid var(--tx-colors-bgCard);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  box-shadow: var(--tx-shadows-sm);
}

/* ---------- scrollbar ---------- */
/* Firefox 64+ uses `scrollbar-width` + `scrollbar-color`; webkit browsers
 * use the pseudo-element selectors below. Both are needed for visual parity. */
:root[data-ambiance] {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f3f4f6;
  scrollbar-color: var(--tx-colors-borderStrong, #cbd5e1) var(--tx-colors-bgMuted, #f3f4f6);
}
:root[data-ambiance] ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
:root[data-ambiance] ::-webkit-scrollbar-track {
  background: #f3f4f6;
  background: var(--tx-colors-bgMuted);
}
:root[data-ambiance] ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  background: var(--tx-colors-borderStrong);
  border-radius: 999px;
  border: 3px solid #f3f4f6;
  border: 3px solid var(--tx-colors-bgMuted);
}
:root[data-ambiance] ::-webkit-scrollbar-thumb:hover {
  background: #0d9488;
  background: var(--tx-colors-accent);
}

/* ---------- focus ring (global) ---------- */
:root[data-ambiance] :focus-visible {
  outline: 2px solid #0d9488;
  outline: 2px solid var(--tx-colors-accent);
  outline-offset: 2px;
  border-radius: 6px;
  border-radius: var(--tx-radius-sm);
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  :root[data-ambiance] *,
  :root[data-ambiance] *::before,
  :root[data-ambiance] *::after {
    animation-duration: 0 !important;
    transition-duration: 0 !important;
  }
}

/* ---------- print: neutralise dark themes + effects ---------- */
/* Dark ambiances (Monolith, Matrix, Cosmos, Gotham, …) would print a
 * black background and burn ink. On print, force a white paper look and
 * hide all decorative canvases / backdrops. */
@media print {
  :root[data-ambiance] {
    background: #ffffff !important;
    color: #111111 !important;
  }
  :root[data-ambiance] .tx-shell,
  :root[data-ambiance] .tx-card,
  :root[data-ambiance] .tx-surface {
    background: #ffffff !important;
    color: #111111 !important;
    box-shadow: none !important;
    border-color: #cccccc !important;
  }
  :root[data-ambiance] canvas,
  :root[data-ambiance] [role="presentation"],
  :root[data-ambiance] [aria-hidden="true"] {
    display: none !important;
  }
}

/**
 * primitives-forms.css
 * ======================
 * Form controls for the ThemeEngine: every control reads --tx-* variables
 * so it morphs per theme without any additional code.
 */

/* ---------- generic field wrapper ---------- */

.tx-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tx-field__label {
  font-family: var(--tx-fonts-body);
  font-size: 12.5px;
  font-weight: var(--tx-fonts-weightMedium);
  color: var(--tx-colors-textMuted);
  letter-spacing: var(--tx-fonts-trackingWide);
  text-transform: uppercase;
}
.tx-field__help {
  font-family: var(--tx-fonts-body);
  font-size: 12px;
  color: var(--tx-colors-textMuted);
}
.tx-field__error {
  font-family: var(--tx-fonts-body);
  font-size: 12px;
  color: var(--tx-colors-danger);
}

/* ---------- input / textarea ---------- */

.tx-input,
.tx-textarea,
.tx-select {
  width: 100%;
  font-family: var(--tx-fonts-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--tx-colors-text);
  background: var(--tx-colors-bgCard);
  border: var(--tx-borderWidth-base) solid var(--tx-colors-border);
  border-radius: var(--tx-radius-md);
  padding: 10px 14px;
  box-shadow: var(--tx-shadows-sm) inset;
  transition:
    border-color var(--tx-motion-duration) var(--tx-motion-ease),
    background var(--tx-motion-duration) var(--tx-motion-ease),
    box-shadow var(--tx-motion-duration) var(--tx-motion-ease),
    color var(--tx-motion-duration) var(--tx-motion-ease);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.tx-input::placeholder,
.tx-textarea::placeholder {
  color: var(--tx-colors-textMuted);
  opacity: 0.72;
  font-family: var(--tx-fonts-body);
}
.tx-input:hover,
.tx-textarea:hover,
.tx-select:hover {
  border-color: var(--tx-colors-borderStrong);
}
.tx-input:focus,
.tx-textarea:focus,
.tx-select:focus {
  border-color: var(--tx-colors-accent);
  box-shadow:
    0 0 0 3px var(--tx-colors-accentSoft),
    var(--tx-shadows-sm) inset;
}
.tx-input:disabled,
.tx-textarea:disabled,
.tx-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.tx-textarea { min-height: 120px; resize: vertical; font-family: var(--tx-fonts-body); }

.tx-input--mono { font-family: var(--tx-fonts-mono); }
.tx-input--lg   { font-size: 16px; padding: 14px 18px; }

/* input with icon */
.tx-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.tx-input-wrap .tx-input { padding-left: 42px; }
.tx-input-wrap__icon {
  position: absolute;
  left: 14px;
  width: 16px;
  height: 16px;
  color: var(--tx-colors-textMuted);
  pointer-events: none;
}

/* ---------- select (native) ---------- */

.tx-select {
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--tx-colors-textMuted) 50%),
    linear-gradient(135deg, var(--tx-colors-textMuted) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* ---------- checkbox ---------- */

.tx-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tx-fonts-body);
  font-size: 14px;
  color: var(--tx-colors-text);
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}
.tx-checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tx-checkbox__box {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--tx-colors-bgCard);
  border: var(--tx-borderWidth-base) solid var(--tx-colors-border);
  border-radius: var(--tx-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--tx-motion-duration) var(--tx-motion-ease),
    border-color var(--tx-motion-duration) var(--tx-motion-ease),
    transform 180ms var(--tx-motion-ease);
}
.tx-checkbox__box::after {
  content: '';
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--tx-colors-accentFg);
  border-bottom: 2px solid var(--tx-colors-accentFg);
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform 180ms var(--tx-motion-ease);
}
.tx-checkbox input:checked ~ .tx-checkbox__box {
  background: var(--tx-colors-accent);
  border-color: var(--tx-colors-accent);
}
.tx-checkbox input:checked ~ .tx-checkbox__box::after {
  transform: rotate(-45deg) scale(1);
}
.tx-checkbox input:focus-visible ~ .tx-checkbox__box {
  box-shadow: 0 0 0 3px var(--tx-colors-accentSoft);
}

/* ---------- radio ---------- */

.tx-radio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tx-fonts-body);
  font-size: 14px;
  color: var(--tx-colors-text);
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}
.tx-radio input { position: absolute; opacity: 0; pointer-events: none; }
.tx-radio__dot {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--tx-colors-bgCard);
  border: var(--tx-borderWidth-base) solid var(--tx-colors-border);
  border-radius: 50%;
  position: relative;
  transition: border-color var(--tx-motion-duration) var(--tx-motion-ease);
}
.tx-radio__dot::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--tx-colors-accent);
  transform: scale(0);
  transition: transform 180ms var(--tx-motion-ease);
}
.tx-radio input:checked ~ .tx-radio__dot { border-color: var(--tx-colors-accent); }
.tx-radio input:checked ~ .tx-radio__dot::after { transform: scale(1); }
.tx-radio input:focus-visible ~ .tx-radio__dot {
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.22);
  box-shadow: 0 0 0 3px var(--tx-colors-accentSoft, rgba(13, 148, 136, 0.22));
  border-color: var(--tx-colors-accent);
}

/* ---------- toggle switch ---------- */

.tx-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tx-fonts-body);
  font-size: 14px;
  color: var(--tx-colors-text);
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}
.tx-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.tx-toggle__track {
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  background: var(--tx-colors-bgMuted);
  border: var(--tx-borderWidth-base) solid var(--tx-colors-border);
  border-radius: 999px;
  position: relative;
  transition: background var(--tx-motion-duration) var(--tx-motion-ease), border-color var(--tx-motion-duration) var(--tx-motion-ease);
}
.tx-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--tx-colors-text);
  border-radius: 50%;
  box-shadow: var(--tx-shadows-sm);
  transition: transform 240ms var(--tx-motion-ease), background var(--tx-motion-duration) var(--tx-motion-ease);
}
.tx-toggle input:checked ~ .tx-toggle__track {
  background: var(--tx-colors-accent);
  border-color: var(--tx-colors-accent);
}
.tx-toggle input:focus-visible ~ .tx-toggle__track {
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.22);
  box-shadow: 0 0 0 3px var(--tx-colors-accentSoft, rgba(13, 148, 136, 0.22));
}
.tx-toggle input:checked ~ .tx-toggle__track .tx-toggle__thumb {
  transform: translateX(18px);
  background: var(--tx-colors-accentFg);
}

/* ---------- slider ---------- */

.tx-slider {
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--tx-colors-bgMuted);
  border-radius: 999px;
  outline: none;
}
.tx-slider::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--tx-colors-accent);
  border: 2px solid var(--tx-colors-bgCard);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--tx-shadows-sm);
  -webkit-transition: transform 180ms var(--tx-motion-ease);
  transition: transform 180ms var(--tx-motion-ease);
}
.tx-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.tx-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--tx-colors-accent);
  border: 2px solid var(--tx-colors-bgCard);
  border-radius: 50%;
  cursor: pointer;
}

/* ---------- progress ---------- */

.tx-progress {
  width: 100%;
  height: 8px;
  background: var(--tx-colors-bgMuted);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.tx-progress__bar {
  height: 100%;
  background: var(--tx-colors-accent);
  border-radius: inherit;
  transition: width 400ms var(--tx-motion-ease);
  position: relative;
  overflow: hidden;
}
.tx-progress__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    45deg,
    rgba(255,255,255,0.15) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,0.15) 50%,
    rgba(255,255,255,0.15) 75%, transparent 75%, transparent
  );
  background-size: 20px 20px;
  animation: tx-progress-stripes 900ms linear infinite;
}
@keyframes tx-progress-stripes {
  from { background-position: 0 0; }
  to { background-position: 20px 0; }
}

/**
 * primitives-surfaces.css
 * =========================
 * Tables, tabs, modals, tooltips, dropdowns, breadcrumbs, alerts, tags
 * — all themed by --tx-* tokens.
 */

/* ---------- table ---------- */

.tx-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--tx-fonts-body);
  font-size: 13.5px;
  color: var(--tx-colors-text);
  background: var(--tx-colors-bgCard);
  border: 1px solid var(--tx-colors-border);
  border-radius: var(--tx-radius-lg);
  overflow: hidden;
  box-shadow: var(--tx-shadows-sm);
}
.tx-table thead th {
  text-align: start;
  padding: 12px 16px;
  font-size: 11.5px;
  font-weight: var(--tx-fonts-weightMedium);
  text-transform: uppercase;
  letter-spacing: var(--tx-fonts-trackingWide);
  color: var(--tx-colors-textMuted);
  background: var(--tx-colors-bgMuted);
  border-bottom: 1px solid var(--tx-colors-border);
}
.tx-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--tx-colors-border);
}
.tx-table tbody tr:last-child td { border-bottom: 0; }
.tx-table tbody tr {
  transition: background var(--tx-motion-duration) var(--tx-motion-ease);
}
.tx-table tbody tr:hover { background: var(--tx-colors-bgMuted); }
.tx-table .tx-table__num {
  font-family: var(--tx-fonts-mono);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  text-align: end;
}

/* ---------- tabs ---------- */

.tx-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--tx-colors-border);
  margin-bottom: 18px;
}
.tx-tab {
  position: relative;
  padding: 12px 18px;
  font-family: var(--tx-fonts-heading);
  font-size: 14px;
  font-weight: var(--tx-fonts-weightMedium);
  color: var(--tx-colors-textMuted);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color var(--tx-motion-duration) var(--tx-motion-ease);
}
.tx-tab:hover { color: var(--tx-colors-text); }
.tx-tab:focus-visible {
  outline: 2px solid var(--tx-colors-accent);
  outline-offset: 2px;
  border-radius: var(--tx-radius-sm);
}
.tx-tab[aria-selected='true'],
.tx-tab--active {
  color: var(--tx-colors-accent);
}
.tx-tab[aria-selected='true']::after,
.tx-tab--active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--tx-colors-accent);
  border-radius: 2px 2px 0 0;
}

/* ---------- breadcrumb ---------- */

.tx-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--tx-fonts-body);
  font-size: 13px;
  color: var(--tx-colors-textMuted);
}
.tx-breadcrumb a { color: inherit; text-decoration: none; }
.tx-breadcrumb a:hover { color: var(--tx-colors-text); }
.tx-breadcrumb__sep { opacity: 0.5; }
.tx-breadcrumb__current { color: var(--tx-colors-text); font-weight: var(--tx-fonts-weightMedium); }

/* ---------- alert ---------- */

.tx-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: var(--tx-colors-bgMuted);
  border: 1px solid var(--tx-colors-border);
  border-left: 3px solid var(--tx-colors-accent);
  border-radius: var(--tx-radius-md);
  color: var(--tx-colors-text);
  font-family: var(--tx-fonts-body);
  font-size: 13.5px;
  line-height: 1.5;
}
.tx-alert--success { border-left-color: var(--tx-colors-success); }
.tx-alert--warning { border-left-color: var(--tx-colors-warning); }
.tx-alert--danger  { border-left-color: var(--tx-colors-danger); }
.tx-alert--info    { border-left-color: var(--tx-colors-info); }
.tx-alert__title { font-weight: var(--tx-fonts-weightBold); margin-bottom: 2px; }

/* ---------- tooltip ---------- */

.tx-tooltip {
  position: relative;
  display: inline-block;
}
.tx-tooltip__body {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.92);
  white-space: nowrap;
  padding: 6px 10px;
  font-family: var(--tx-fonts-body);
  font-size: 12px;
  color: var(--tx-colors-textInverse);
  background: var(--tx-colors-text);
  border-radius: var(--tx-radius-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tx-motion-duration) var(--tx-motion-ease), transform var(--tx-motion-duration) var(--tx-motion-ease);
  z-index: 50;
}
.tx-tooltip:hover .tx-tooltip__body {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ---------- dropdown menu ---------- */

.tx-menu {
  min-width: 200px;
  padding: 6px;
  background: var(--tx-colors-bgCard);
  border: 1px solid var(--tx-colors-border);
  border-radius: var(--tx-radius-md);
  box-shadow: var(--tx-shadows-lg);
  font-family: var(--tx-fonts-body);
}
.tx-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--tx-radius-sm);
  font-size: 13.5px;
  color: var(--tx-colors-text);
  cursor: pointer;
  transition: background var(--tx-motion-duration) var(--tx-motion-ease), color var(--tx-motion-duration) var(--tx-motion-ease);
}
.tx-menu__item:hover,
.tx-menu__item:focus-visible {
  background: var(--tx-colors-accentSoft);
  color: var(--tx-colors-accent);
  outline: none;
}
.tx-menu__sep {
  height: 1px;
  background: var(--tx-colors-border);
  margin: 6px -6px;
}

/* ---------- modal ---------- */

.tx-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 200;
  animation: tx-modal-fade 220ms var(--tx-motion-ease);
}
.tx-modal {
  background: var(--tx-colors-bgCard);
  color: var(--tx-colors-text);
  border: 1px solid var(--tx-colors-border);
  border-radius: var(--tx-radius-xl);
  box-shadow: var(--tx-shadows-lg);
  padding: 28px 32px;
  max-width: 560px;
  width: 100%;
  animation: tx-modal-rise 320ms var(--tx-motion-ease);
}
@keyframes tx-modal-fade {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes tx-modal-rise {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- skeleton loader ---------- */

.tx-skeleton {
  background: linear-gradient(
    90deg,
    var(--tx-colors-bgMuted) 0%,
    var(--tx-colors-border) 50%,
    var(--tx-colors-bgMuted) 100%
  );
  background-size: 200% 100%;
  animation: tx-skeleton-shimmer 1.4s linear infinite;
  border-radius: var(--tx-radius-sm);
}
@keyframes tx-skeleton-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* ---------- spinner ---------- */

.tx-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--tx-colors-border);
  border-top-color: var(--tx-colors-accent);
  border-radius: 50%;
  animation: tx-spinner 700ms linear infinite;
}
@keyframes tx-spinner {
  to { transform: rotate(360deg); }
}

/* ---------- animation utilities (used across themes) ---------- */

@keyframes tx-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tx-fade-in { animation: tx-fade-in 360ms var(--tx-motion-ease) both; }

@keyframes tx-scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
.tx-scale-in { animation: tx-scale-in 260ms var(--tx-motion-ease) both; }

@keyframes tx-slide-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tx-slide-up { animation: tx-slide-up 480ms var(--tx-motion-ease) both; }

/* tx-pulse / tx-bounce keyframes were defined but never consumed.
 * Removed as part of audit P2-33 to avoid dead CSS. Reintroduce under
 * a utility class if a future primitive needs them. */

/* ==========================================================================
 * Motion guard — respect prefers-reduced-motion even outside the .tx-shell
 * Covers animation utilities (fade-in, scale-in, slide-up), loading chrome
 * (skeleton, spinner), modal chrome and the two keyframed effects (pulse,
 * bounce). The global .tx-shell * rule in primitives-base.css covers
 * transitions; this block covers the named animations declared above.
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .tx-fade-in,
  .tx-scale-in,
  .tx-slide-up,
  .tx-skeleton,
  .tx-spinner,
  .tx-modal,
  .tx-modal-backdrop,
  .tx-progress__bar::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/**
 * theme-engine.css
 * ==================
 * Global rules + theme-specific tweaks for the polymorphic ThemeEngine.
 *
 * The ThemeEngine writes all tokens as `--tx-*` CSS custom properties on :root.
 * CSS below:
 *   - exposes a `.tx-surface`, `.tx-card`, `.tx-btn` set of primitives so any
 *     page/component can opt-in without reading JS tokens;
 *   - adds theme-specific selectors via `:root[data-ambiance="<id>"]`;
 *   - adds family-wide behaviours via `:root[data-ambiance-family="<family>"]`.
 *
 * Everything is scoped — without an `.tx-*` class or ambiance attribute, the
 * host app keeps its usual look.
 */

/* ---------- generic primitives ---------- */

.tx-shell {
  min-height: 100vh;
  background: var(--tx-colors-bg);
  color: var(--tx-colors-text);
  font-family: var(--tx-fonts-body);
  transition:
    background-color 500ms ease,
    color 500ms ease;
  transition:
    background-color 500ms var(--tx-motion-ease, ease),
    color 500ms var(--tx-motion-ease, ease);
  position: relative;
  isolation: isolate;
}

.tx-surface {
  background: var(--tx-colors-bg);
  color: var(--tx-colors-text);
  font-family: var(--tx-fonts-body);
}

.tx-card {
  background: var(--tx-colors-bgCard);
  color: var(--tx-colors-text);
  border: var(--tx-borderWidth-base) solid var(--tx-colors-border);
  border-radius: var(--tx-radius-lg);
  box-shadow: var(--tx-shadows-md);
  padding: 20px 24px;
  transition:
    transform var(--tx-motion-duration) var(--tx-motion-ease),
    box-shadow var(--tx-motion-duration) var(--tx-motion-ease),
    border-color var(--tx-motion-duration) var(--tx-motion-ease);
}

.tx-card:hover {
  box-shadow: var(--tx-shadows-lg);
  border-color: var(--tx-colors-borderStrong);
}

.tx-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 10px 18px;
  font-family: var(--tx-fonts-body);
  font-weight: var(--tx-fonts-weightMedium);
  letter-spacing: var(--tx-fonts-trackingNormal);
  color: var(--tx-colors-accentFg);
  background: var(--tx-colors-accent);
  border: var(--tx-borderWidth-base) solid var(--tx-colors-accent);
  border-radius: var(--tx-radius-md);
  box-shadow: var(--tx-shadows-sm);
  cursor: pointer;
  transition:
    transform var(--tx-motion-duration) var(--tx-motion-ease),
    box-shadow var(--tx-motion-duration) var(--tx-motion-ease),
    background var(--tx-motion-duration) var(--tx-motion-ease),
    color var(--tx-motion-duration) var(--tx-motion-ease);
}

.tx-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--tx-shadows-md);
}

.tx-btn--ghost {
  color: var(--tx-colors-text);
  background: transparent;
  border-color: var(--tx-colors-border);
}

.tx-heading {
  font-family: var(--tx-fonts-heading);
  font-weight: var(--tx-fonts-weightBold);
  letter-spacing: var(--tx-fonts-trackingTight);
  color: var(--tx-colors-text);
  line-height: 1.1;
}

.tx-display {
  font-family: var(--tx-fonts-display);
  font-weight: var(--tx-fonts-weightBold);
  letter-spacing: var(--tx-fonts-trackingTight);
  color: var(--tx-colors-text);
  line-height: 1;
}

.tx-muted { color: var(--tx-colors-textMuted); }
.tx-mono { font-family: var(--tx-fonts-mono); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* ---------- signature: Monolith ---------- */

:root[data-ambiance="monolith"] .tx-card { box-shadow: none; }
:root[data-ambiance="monolith"] .tx-card:hover {
  background: var(--tx-colors-text);
  color: var(--tx-colors-bg);
}
:root[data-ambiance="monolith"] .tx-btn:hover {
  transform: none;
  background: var(--tx-colors-bg);
  color: var(--tx-colors-text);
}
:root[data-ambiance="monolith"] * {
  animation-duration: 0 !important;
  transition-duration: 0 !important;
}

/* ---------- signature: Aurora Suisse ---------- */

:root[data-ambiance="aurora-suisse"] .tx-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
:root[data-ambiance="aurora-suisse"] .tx-display {
  font-size: clamp(56px, 9vw, 128px);
}

/* ---------- signature: Horloger ---------- */

:root[data-ambiance="horloger"] .tx-card {
  background-image:
    radial-gradient(circle at center, transparent 60%, rgba(183, 110, 121, 0.08) 100%),
    var(--tx-colors-bgCard);
}

/* ---------- signature: Neural ---------- */

:root[data-ambiance="neural"] .tx-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--tx-shadows-glow);
}

/* ---------- signature: Crystalline ---------- */

:root[data-ambiance="crystalline"] .tx-card {
  background-image: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 60%);
}
:root[data-ambiance="crystalline"] .tx-card:hover {
  transform: perspective(800px) rotateX(1deg) rotateY(-2deg) translateY(-2px);
}

/* ---------- family: tech — faint scanline texture ---------- */

:root[data-ambiance-family="tech"] .tx-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px);
  border-radius: inherit;
}
:root[data-ambiance-family="tech"] .tx-card { position: relative; }

/* ---------- family: luxe — inner gold highlight ---------- */

:root[data-ambiance-family="luxe"] .tx-card {
  position: relative;
  overflow: hidden;
}
:root[data-ambiance-family="luxe"] .tx-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tx-colors-accent), transparent);
  opacity: 0.5;
}

/* ---------- signature: Liquid — organic card shape ---------- */

:root[data-ambiance="liquid"] .tx-card {
  border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%;
  transition: border-radius 800ms ease-out, box-shadow 400ms ease;
  transition: border-radius 800ms var(--tx-motion-ease, ease-out), box-shadow 400ms ease;
}
:root[data-ambiance="liquid"] .tx-card:hover {
  border-radius: 55% 45% 40% 60% / 40% 60% 45% 55%;
}

/* ---------- signature: Cosmos — orbit nav accent ---------- */

:root[data-ambiance="cosmos"] .tx-card {
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.08), rgba(244, 114, 182, 0.05));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Bioluminescence animations moved to per-theme.css as `tx-bio-pulse`
 * (one canonical keyframe instead of two duplicate definitions).
 * Removed from theme-engine.css — see audit P2-32. */

/* ---------- signature: Cinema — dramatic card reveal ---------- */

:root[data-ambiance="cinema"] .tx-card {
  background-image: linear-gradient(180deg, rgba(255, 254, 245, 1), rgba(255, 254, 245, 0.96));
}

/* ---------- signature: Alpine Topo — paper feel ---------- */

:root[data-ambiance="alpine-topo"] .tx-card {
  background-image: linear-gradient(180deg, rgba(253, 250, 240, 1) 0%, rgba(245, 240, 228, 1) 100%);
}

/* ---------- utility: theme transition ---------- */

:root[data-ambiance] .tx-shell *,
:root[data-ambiance] .tx-shell *::before,
:root[data-ambiance] .tx-shell *::after {
  transition-property: background-color, color, border-color, box-shadow;
  transition-duration: 400ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root[data-ambiance] *,
  :root[data-ambiance] *::before,
  :root[data-ambiance] *::after {
    animation-duration: 0 !important;
    transition-duration: 0 !important;
  }
}

/**
 * per-theme.css
 * ===============
 * Deep per-theme rewrites of primitives. Each block pushes its theme
 * to its visual limits — every form control, every button, every table
 * is transformed to match the theme's identity.
 *
 * Scoped selectors: :root[data-ambiance="<id>"] <primitive>
 */

/* ============================================================
 * MONOLITH — brutalism absolute
 * ============================================================ */
:root[data-ambiance="monolith"] .tx-card { box-shadow: none; padding: 18px; }
:root[data-ambiance="monolith"] .tx-card:hover {
  background: var(--tx-colors-text);
  color: var(--tx-colors-bg);
}
:root[data-ambiance="monolith"] .tx-card:hover .tx-muted,
:root[data-ambiance="monolith"] .tx-card:hover .tx-card__title {
  color: var(--tx-colors-bg);
}
:root[data-ambiance="monolith"] .tx-btn {
  box-shadow: none;
  border-width: 2px;
}
:root[data-ambiance="monolith"] .tx-btn:hover {
  transform: none;
  background: var(--tx-colors-bg);
  color: var(--tx-colors-text);
}
:root[data-ambiance="monolith"] .tx-input,
:root[data-ambiance="monolith"] .tx-textarea,
:root[data-ambiance="monolith"] .tx-select {
  box-shadow: none;
  border-width: 2px;
  background: var(--tx-colors-bg);
}
:root[data-ambiance="monolith"] .tx-input:focus,
:root[data-ambiance="monolith"] .tx-textarea:focus,
:root[data-ambiance="monolith"] .tx-select:focus {
  background: var(--tx-colors-text);
  color: var(--tx-colors-bg);
  border-color: var(--tx-colors-text);
  box-shadow: none;
}
:root[data-ambiance="monolith"] .tx-table { border-width: 2px; }
:root[data-ambiance="monolith"] .tx-badge {
  text-transform: uppercase;
  border-radius: 0;
}
:root[data-ambiance="monolith"] * { transition-duration: 0 !important; }

/* ============================================================
 * AURORA SUISSE — transparent glass + massive type
 * ============================================================ */
:root[data-ambiance="aurora-suisse"] .tx-card {
  /* Opaque fallback for browsers without backdrop-filter (older Safari,
   * Firefox < 103). Ensures cards remain readable. */
  background: rgba(10, 10, 15, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
@supports (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-ambiance="aurora-suisse"] .tx-card {
    background: rgba(255, 255, 255, 0.04);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }
}
:root[data-ambiance="aurora-suisse"] .tx-display {
  font-size: clamp(64px, 11vw, 160px);
  letter-spacing: -0.05em;
  background: linear-gradient(120deg, #00FF88 0%, #8B5CF6 50%, #06B6D4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:root[data-ambiance="aurora-suisse"] .tx-btn {
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  color: var(--tx-colors-text);
  border-color: rgba(255, 255, 255, 0.18);
}
:root[data-ambiance="aurora-suisse"] .tx-btn:hover {
  background: rgba(0, 255, 136, 0.15);
  border-color: #00FF88;
}
:root[data-ambiance="aurora-suisse"] .tx-input,
:root[data-ambiance="aurora-suisse"] .tx-textarea,
:root[data-ambiance="aurora-suisse"] .tx-select {
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ============================================================
 * CRYSTALLINE — faceted 3D tilt on cards
 * ============================================================ */
:root[data-ambiance="crystalline"] .tx-card {
  background-image: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 60%);
  transform-style: preserve-3d;
  perspective: 800px;
}
:root[data-ambiance="crystalline"] .tx-card:hover {
  transform: perspective(800px) rotateX(2deg) rotateY(-3deg) translateY(-4px);
  box-shadow:
    0 24px 60px rgba(78, 205, 196, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
:root[data-ambiance="crystalline"] .tx-btn {
  background: linear-gradient(135deg, #4ECDC4, #45B7D1);
  border: none;
  position: relative;
  overflow: hidden;
}
:root[data-ambiance="crystalline"] .tx-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.25), transparent 40%);
}

/* ============================================================
 * BIOLUMINESCENCE — breathing glows
 * ============================================================ */
@keyframes tx-bio-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(0, 255, 178, 0.12); }
  50% { box-shadow: 0 0 48px rgba(0, 255, 178, 0.32); }
}
:root[data-ambiance="bioluminescence"] .tx-card {
  animation: tx-bio-pulse 4s ease-in-out infinite;
}
:root[data-ambiance="bioluminescence"] .tx-btn {
  animation: tx-bio-pulse 3s ease-in-out infinite;
  border-color: rgba(0, 255, 178, 0.40);
}
:root[data-ambiance="bioluminescence"] .tx-input:focus,
:root[data-ambiance="bioluminescence"] .tx-textarea:focus,
:root[data-ambiance="bioluminescence"] .tx-select:focus {
  box-shadow: 0 0 24px rgba(0, 255, 178, 0.40);
}
:root[data-ambiance="bioluminescence"] .tx-toggle input:checked ~ .tx-toggle__track {
  box-shadow: 0 0 20px rgba(0, 255, 178, 0.55);
}

/* ============================================================
 * LIQUID — organic morphing shapes
 * ============================================================ */
:root[data-ambiance="liquid"] .tx-card {
  border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%;
  transition: border-radius 800ms var(--tx-motion-ease), transform 480ms var(--tx-motion-ease);
}
:root[data-ambiance="liquid"] .tx-card:hover {
  border-radius: 55% 45% 40% 60% / 40% 60% 45% 55%;
}
:root[data-ambiance="liquid"] .tx-btn {
  border-radius: 60% 40% 50% 50% / 50% 50% 60% 40%;
}
:root[data-ambiance="liquid"] .tx-btn:hover {
  border-radius: 40% 60% 50% 50% / 50% 50% 40% 60%;
}
:root[data-ambiance="liquid"] .tx-input,
:root[data-ambiance="liquid"] .tx-textarea,
:root[data-ambiance="liquid"] .tx-select {
  border-radius: 32px;
  padding: 14px 20px;
}

/* ============================================================
 * HORLOGER — watch dial, circular
 * ============================================================ */
:root[data-ambiance="horloger"] .tx-card {
  background-image:
    radial-gradient(circle at center, transparent 55%, rgba(183, 110, 121, 0.08) 100%),
    linear-gradient(180deg, #FFFFFF 0%, #FAFAF5 100%);
  border: 1px solid rgba(140, 127, 97, 0.24);
}
:root[data-ambiance="horloger"] .tx-btn {
  border-radius: 999px;
  border-width: 1px;
}
:root[data-ambiance="horloger"] .tx-badge { border-radius: 2px; padding: 4px 10px; }
:root[data-ambiance="horloger"] .tx-mono,
:root[data-ambiance="horloger"] .tx-table__num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1, tabular-nums lining-nums;
}

/* ============================================================
 * NEURAL — synaptic propagation
 * ============================================================ */
:root[data-ambiance="neural"] .tx-card { position: relative; }
:root[data-ambiance="neural"] .tx-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.06), rgba(167, 139, 250, 0.03));
  pointer-events: none;
}
:root[data-ambiance="neural"] .tx-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 12px 40px rgba(0, 212, 255, 0.22),
    0 0 60px rgba(167, 139, 250, 0.18);
}
:root[data-ambiance="neural"] .tx-btn { box-shadow: 0 0 18px rgba(0, 212, 255, 0.30); }
:root[data-ambiance="neural"] .tx-btn:hover {
  box-shadow: 0 0 36px rgba(0, 212, 255, 0.55);
}

/* ============================================================
 * COSMOS — orbital glassmorphism
 * ============================================================ */
:root[data-ambiance="cosmos"] .tx-card {
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.10), rgba(244, 114, 182, 0.05));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(129, 140, 248, 0.18);
}
:root[data-ambiance="cosmos"] .tx-btn { border-radius: 999px; }

/* ============================================================
 * CINEMA — dramatic stagger
 * ============================================================ */
:root[data-ambiance="cinema"] .tx-card:hover {
  transform: translateY(-4px) scale(1.01);
}
:root[data-ambiance="cinema"] .tx-display,
:root[data-ambiance="cinema"] .tx-h1 {
  font-style: italic;
}

/* ============================================================
 * ALPINE TOPO — paper feel
 * ============================================================ */
:root[data-ambiance="alpine-topo"] .tx-card {
  background-image: linear-gradient(180deg, #FDFAF0 0%, #F5F0E4 100%);
  border: 1px solid rgba(140, 127, 97, 0.32);
}

/**
 * INTEGRA — vNext License Launcher : token + look authority.
 * Lives under design-system/tokens/ → exempt from design:token-authority guard.
 * RAW values (colors, gradients, shadows, radii, motion) are allowed HERE ONLY.
 * vNext components must consume these classes + var(--vnl-*) and NEVER inline raw values.
 *
 * Frontend Design Reset — IFI-first vNext · Phase 1 (foundation, opt-in route).
 */

:root{
  --vnl-navd:#0b1437;
  --vnl-navbar:rgba(11,20,55,.62);  /* toolbar pill surface (dark default) */
  --vnl-field:#0b1437;              /* search field surface (dark default) */
  --vnl-field-ink:#fff;             /* input/textarea/select text ink — ALWAYS paired with the field surface.
                                       Light theme flips it (see [data-vnl-theme="light"]) so typed text
                                       auto-contrasts with the theme without per-selector overrides. */
  --vnl-ease:cubic-bezier(.22,.61,.36,1);
  --vnl-radius:20px;
  --vnl-pill:999px;
  /* UX-5 card hover animation (prototype ux-100x-vnext-dashboard.html, .vnl-card:hover):
     the card FLOATS UP + gently SCALES while the pointer-tracked tilt runs. Defaults =
     the prototype's SIGNATURE_PROFILE_DEFAULT (hoverLift -4px / hoverScale 1.006).
     Custom themes (Theme Studio slice-1) override these via --vnl-user-hover-* below. */
  --vnl-hover-lift:-4px;
  --vnl-hover-scale:1.006;
  /* structural canvas anchors for the runtime theme generator (vnextThemeGen.js): catalogue colours
     are mixed over these. Restrained categories keep the dark anchors; vivid categories mix a
     richer chroma over them, and HIGH-LUMINANCE vivid palettes flip to the light anchors + the
     paired dark ink (UX-4 luminance-driven auto-contrast). The generator carries no raw colour —
     only color-mix() over these tokens. */
  --vnl-gen-base:#090d16;
  --vnl-gen-surface:#0b1020;
  --vnl-gen-base-light:#eef2fb;
  --vnl-gen-surface-light:#f7f9ff;
  --vnl-gen-ink-dark:#0f1838;   /* ink pair emitted with a light generated canvas */
  /* per-module accent tokens (presentation) */
  --vnl-accent-payroll:#01B574;
  --vnl-accent-hr:#7551FF;
  --vnl-accent-hse:#FB7185;
  --vnl-accent-accounting:#3311DB;
  --vnl-accent-it:#3965FF;
  --vnl-accent-banking:#2152FF;
  --vnl-accent-reporting:#22D3EE;
  --vnl-accent-billing:#FFB547;
  --vnl-accent-portail:#A78BFA;
  --vnl-accent-organisation:#8A6BFF;
  /* vNext 9-module taxonomy accents (presentation ids) */
  --vnl-accent-self_service:#A78BFA;
  --vnl-accent-expenses:#FFB547;
  --vnl-accent-time_absences:#22D3EE;
  --vnl-accent-finance:#3311DB;
  --vnl-accent-legal:#F472B6;
  --vnl-accent-hes:#F59E0B;
  /* severity tokens (anticipation strip) — honest, legible against the dark canvas:
     block = red (must fix), warn = amber (to watch), ok = the payroll green (all clear). */
  --vnl-sev-block:#FB7185;
  --vnl-sev-warn:#FFB547;
  --vnl-sev-ok:#01B574;
}

/* ===== standalone shell (vNext chrome — replaces legacy AppLayoutV2 top bar) ===== */
.vnl-shell{display:flex;flex-direction:column;height:100vh;background:#0b1437;background:var(--vnl-navd);color:#eaeefb;
  /* vNext cockpit type identity — matches the etcandmore.ch/integra marketing site:
     display serif = Fraunces (hero + section titles), body = Hanken Grotesk (all UI text),
     mono = Azeret Mono (figures / IDs / receipts). Scoped to the shell so legacy AppLayoutV2
     surfaces are untouched. Loaded via the css2 <link> in public/index.html. */
  --vnl-font-display:'Fraunces',Georgia,serif;
  --vnl-font-body:'Hanken Grotesk','DM Sans',ui-sans-serif,system-ui,sans-serif;
  --vnl-font-mono:'Azeret Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-family:var(--vnl-font-body);-webkit-font-smoothing:antialiased}
.vnl-scroll{flex:1 1;min-height:0;overflow:auto;overflow-x:hidden;position:relative}

/* ----- body-font override (specificity) -----
   The app's base CSS (styles/legacy-design-system.css) sets a GLOBAL element rule
   `body,p,span,div,input,button,select,textarea,td,th,label,li{font-family:'Inter',…}`
   (specificity 0,0,1). That direct element match beats the inherited --vnl-font-body from
   .vnl-shell, so vNext body text rendered Inter. Re-assert Hanken on those elements scoped
   under the shell (0,1,1 > 0,0,1). h1–h6 are intentionally EXCLUDED — they are never in the
   global Inter list, and the display/mono rules below (0,2,x) win over this 0,1,1 rule so the
   Fraunces titles + Azeret-Mono figures survive. */
.vnl-shell p,.vnl-shell span,.vnl-shell div,.vnl-shell li,.vnl-shell label,
.vnl-shell td,.vnl-shell th,.vnl-shell input,.vnl-shell button,
.vnl-shell select,.vnl-shell textarea{font-family:var(--vnl-font-body)}
/* Fraunces DISPLAY titles — bumped to 0,2,x so they beat both the global Inter (0,0,1) and the
   body-override (0,1,1) even when the element is a span/div (e.g. .vnl-ctitle is a <span>). */
.vnl-shell .vnl-title,.vnl-shell .vnl-ctitle,.vnl-shell .vnl-doss-name,
.vnl-shell .vnl-agent h2,.vnl-shell .vnl-intent-title{font-family:var(--vnl-font-display)}
/* Azeret-Mono DATA on span/div elements — bumped to 0,2,0 so figures/IDs survive the body rule.
   (.vnl-slip-row span:last-child is already 0,2,1 and .vnl-mod-luna .cc-da-num already 0,2,0 —
   both already beat 0,1,1, so they are not repeated here.) */
.vnl-shell .vnl-tr-key,.vnl-shell .vnl-cmd-ecode{font-family:var(--vnl-font-mono)}

/* ----- top bar ----- */
.vnl-topbar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px 30px;border-bottom:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(255,255,255,.045),transparent)}
.vnl-brand{display:flex;align-items:center;gap:13px}
.vnl-seal{width:38px;height:38px;flex:none;color:#9db2ff;filter:drop-shadow(0 4px 12px rgba(57,101,255,.45))}
.vnl-seal svg{width:100%;height:100%}
.vnl-brandtext{display:flex;flex-direction:column;line-height:1}
.vnl-brandname{font-weight:800;font-size:18px;letter-spacing:3px;color:#fff}
.vnl-brandtag{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#7f8db5;margin-top:5px}
.vnl-tools{display:flex;align-items:center;gap:13px}

/* ----- language switcher (16 languages, RTL-aware via document.dir) ----- */
.vnl-lang{position:relative}
.vnl-lang-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:999px;border-radius:var(--vnl-pill);
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#cdd6f4;cursor:pointer;
  font:600 13px var(--vnl-font-body);transition:background .2s,color .2s}
.vnl-lang-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.vnl-lang-btn svg{width:16px;height:16px}
.vnl-lang-cur{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-lang-chev{transition:transform .2s cubic-bezier(.22,.61,.36,1);transition:transform .2s var(--vnl-ease)}
.vnl-lang-chev.is-open{transform:rotate(180deg)}
.vnl-lang-menu{position:absolute;top:48px;right:0;z-index:50;width:236px;max-height:344px;overflow:auto;padding:8px;
  border-radius:16px;background:#101a44;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.7);display:flex;flex-direction:column;gap:2px}
.vnl-lang-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:10px;border:0;
  background:transparent;color:#cdd6f4;cursor:pointer;font:500 13px var(--vnl-font-body);text-align:left}
.vnl-lang-item:hover{background:rgba(255,255,255,.07);color:#fff}
.vnl-lang-item.is-active{background:color-mix(in srgb,#3965FF 26%,transparent);background:color-mix(in srgb,var(--vnl-accent-it) 26%,transparent);color:#fff}
.vnl-lang-flag{font-size:16px;line-height:1}
.vnl-lang-name{flex:1 1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-lang-code{font-size:11px;font-weight:600;color:#7f8db5}

/* ----- identity chip (display only — not an authz source) ----- */
.vnl-userchip{display:flex;align-items:center;gap:10px;height:40px;padding:0 13px 0 6px;border-radius:999px;border-radius:var(--vnl-pill);
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.vnl-userava{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;
  font:700 13px var(--vnl-font-body);background:linear-gradient(135deg,#7551FF,#3965FF);background:linear-gradient(135deg,var(--vnl-accent-hr),var(--vnl-accent-it))}
.vnl-usermeta{display:flex;flex-direction:column;line-height:1.2;max-width:170px}
.vnl-username{font-size:13px;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-userrole{display:flex;align-items:center;gap:4px;font-size:11px;color:#9aa6c9}
.vnl-crown{width:12px;height:12px;color:#ffcf5a}

/* ----- persona selector (provisional — replaces login while disconnected) ----- */
.vnl-persona{position:relative;flex:none}
.vnl-persona-btn{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px 0 6px;border-radius:999px;border-radius:var(--vnl-pill);
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#cdd6f4;cursor:pointer;font:inherit;transition:background .2s}
.vnl-persona-btn:hover{background:rgba(255,255,255,.08)}
.vnl-persona-ava{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#7551FF,#3965FF);
  background:linear-gradient(135deg,var(--vnl-accent-hr),var(--vnl-accent-it))}
.vnl-persona-ava svg{width:16px;height:16px}
.vnl-persona-meta{display:flex;flex-direction:column;line-height:1.2;max-width:190px;text-align:left}
.vnl-persona-tag{font-size:10px;letter-spacing:.4px;text-transform:uppercase;color:#7f8db5}
.vnl-persona-name{font-size:13px;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-persona-menu{position:absolute;top:48px;right:0;z-index:50;width:252px;max-height:344px;overflow:auto;padding:8px;
  border-radius:16px;background:#101a44;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.7);display:flex;flex-direction:column;gap:2px}
.vnl-persona-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border-radius:10px;border:0;
  background:transparent;color:#cdd6f4;cursor:pointer;font:600 13px var(--vnl-font-body);text-align:left}
.vnl-persona-item:hover{background:rgba(255,255,255,.07);color:#fff}
.vnl-persona-item.is-active{background:color-mix(in srgb,#3965FF 26%,transparent);background:color-mix(in srgb,var(--vnl-accent-it) 26%,transparent);color:#fff}
.vnl-persona-icon{width:16px;height:16px;flex:none;color:#9aa6c9}
.vnl-persona-itemname{flex:1 1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width:680px){
  .vnl-topbar{padding:12px 16px}
  .vnl-brandtag,.vnl-usermeta,.vnl-lang-cur,.vnl-persona-meta{display:none}
}

/* ===== toolbar pill (réplique prototype Horizon — barre unique, flotte en haut à droite) =====
   Remplace l'ancienne barre marque .vnl-topbar (non rendue). Recherche · langue · Luna ·
   thème · Réglages · persona. Le sélecteur de persona remplace l'avatar statique du prototype. */
.vnl-navbar{position:absolute;top:20px;right:24px;z-index:30;display:flex;align-items:center;gap:8px;
  padding:8px;border-radius:999px;border-radius:var(--vnl-pill);background:rgba(11,20,55,.62);background:var(--vnl-navbar);
  /* anti-lag: blur cost ≈ radius²; 10px keeps the frosted pill at ~half the GPU cost of 14px */
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.08);box-shadow:0 14px 34px -18px rgba(0,0,0,.6)}
.vnl-field{display:flex;align-items:center;gap:9px;background:#0b1437;background:var(--vnl-field);border-radius:999px;border-radius:var(--vnl-pill);
  padding:9px 15px;min-width:188px}
.vnl-field svg{width:16px;height:16px;color:#97a3c4;flex:none}
.vnl-field input{border:0;background:transparent;outline:0;color:#fff;color:var(--vnl-field-ink);font:500 13px var(--vnl-font-body);width:100%;min-width:0}
.vnl-field input::placeholder{color:#6b769a}
.vnl-ibtn{width:36px;height:36px;flex:none;border-radius:50%;border:0;background:transparent;color:#a3aed0;
  display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s}
.vnl-ibtn:hover{color:#fff;background:rgba(255,255,255,.1)}
.vnl-ibtn svg{width:17px;height:17px}
.vnl-ibtn.is-luna{color:#fff;background:linear-gradient(135deg,#7551FF,#3311DB);background:linear-gradient(135deg,var(--vnl-accent-hr),var(--vnl-accent-accounting))}
.vnl-ibtn.is-luna:hover{filter:brightness(1.08)}
.vnl-navbar .vnl-persona-btn{height:38px;border:0;background:transparent}
.vnl-navbar .vnl-persona-btn:hover{background:rgba(255,255,255,.1)}
/* reserve header space on the right so the title never runs under the floating pill */
.vnl-head{padding-right:560px}
@media (max-width:1180px){
  .vnl-head{padding-right:430px}
  .vnl-navbar .vnl-persona-meta{display:none}
  .vnl-field{min-width:150px}
}
@media (max-width:900px){
  .vnl-navbar{position:static;width:100%;margin:14px 16px 18px;box-shadow:none}
  .vnl-field{flex:1 1}
  .vnl-head{padding-right:0}
}
.vnl-shell[data-vnl-theme="light"]{--vnl-navbar:rgba(255,255,255,.82);--vnl-field:#eef1f9;--vnl-field-ink:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-navbar{border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-ibtn{color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-ibtn:hover{color:#0f1838;background:rgba(20,30,60,.06)}
.vnl-shell[data-vnl-theme="light"] .vnl-navbar .vnl-persona-btn:hover{background:rgba(20,30,60,.06)}

/* ===== canvas ===== */
.vnl{position:relative;min-height:100%;padding:26px 30px 56px;color:#eaeefb;
  /* per-theme ambient mood (static layered gradient) with the solid navd as the dark default.
     A CSS variable can carry a full gradient — the [data-vnl-theme] blocks only set --vnl-ambient. */
  background:#0b1437;
  background:var(--vnl-ambient,var(--vnl-navd));background-attachment:local;isolation:isolate;
  font-family:var(--vnl-font-body);-webkit-font-smoothing:antialiased}

/* ===== living ambient =====
   A single GPU-composited glow (transform + opacity ONLY — no layout/paint per frame)
   that slowly drifts BEHIND all content, tinted by the active theme's own accent so every
   one of the 9 standard + 129 catalogue themes carries its own moving signature.
   z-index:-1 inside .vnl's isolated stacking context → above the static --vnl-ambient base,
   behind the (opaque) cards, so legal numbers keep full contrast. Per-motion-profile cadence
   below; fully disabled under sober mode + prefers-reduced-motion (non-negotiable). */
.vnl::before{content:"";position:absolute;inset:-18%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 38% at 26% 24%, color-mix(in srgb, #3965FF 24%, transparent), transparent 70%),
    radial-gradient(44% 44% at 80% 82%, color-mix(in srgb, #7551FF 16%, transparent), transparent 72%);
  background:
    radial-gradient(38% 38% at 26% 24%, color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 24%, transparent), transparent 70%),
    radial-gradient(44% 44% at 80% 82%, color-mix(in srgb, var(--vnl-accent-hr) 16%, transparent), transparent 72%);
  will-change:transform,opacity;animation:vnl-aurora 42s ease-in-out infinite}
@keyframes vnl-aurora{
  0%,100%{transform:translate3d(-4%,-3%,0) scale(1.06);opacity:.5}
  34%{transform:translate3d(6%,4%,0) scale(1.2);opacity:.82}
  68%{transform:translate3d(-3%,6%,0) scale(1.1);opacity:.62}}
/* Daylight appearance: the canvas stays crisp, with ambience reduced to a
   background wash that cannot sit behind text as a hazy blob. */
.vnl-shell[data-vnl-theme="light"]:not([data-vnl-skin]) .vnl::before{opacity:.18;mix-blend-mode:normal;filter:blur(130px);animation:none}

/* ===== generative backdrop (opt-in wallpaper — data-vnl-wallpaper="on") =====
   A STATIC, token-derived ambient wash: 3 soft, large, low-opacity radial blobs in
   the ACTIVE theme's accent hues (+ a fainter accent swell reading as a surface glow),
   so the backdrop looks distinct per theme (the accent vars change per theme) yet stays
   quiet — legal/payroll numbers keep full contrast. Opt-in only, default OFF (Theme
   Studio slice 2C). z-index:-2 sits BELOW the living-ambient glow (::before, z-index -1)
   and the opaque cards, above the solid .vnl base, so it never tints content surfaces.
   Pure CSS + color-mix over --vnl-* tokens (zero hardcode). No animation → reduced-motion
   safe by construction; the shell's accent crossfade (already reduced-motion-gated) is the
   only transition it inherits. Suppressed under sober/focus mode (calm = non-negotiable). */
.vnl-shell[data-vnl-wallpaper="on"]{--amb-op:.5;--amb-bg:
    radial-gradient(52% 52% at 18% 16%, color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 22%, transparent), transparent 68%),
    radial-gradient(58% 58% at 86% 88%, color-mix(in srgb, var(--vnl-accent-hr) 18%, transparent), transparent 70%),
    radial-gradient(64% 64% at 60% 42%, color-mix(in srgb, var(--vnl-accent-reporting) 12%, transparent), transparent 74%)}
/* Light appearance: multiply-blend + softer so the wash never reduces text contrast. */
.vnl-shell[data-vnl-theme="light"][data-vnl-wallpaper="on"] .vnl::after{opacity:.4;mix-blend-mode:multiply}
/* Sober / focus mode = calm: the opt-in wallpaper is fully suppressed (non-negotiable). */
.vnl-shell[data-vnl-mode="sober"][data-vnl-wallpaper="on"] .vnl::after{display:none}

/* ===== Ambience catalogue (vnextAmbience.js) — opt-in CSS backdrops on .vnl::after.
   Theme-token colours, quiet enough to keep numbers legible, sober-suppressed, any
   motion reduced-motion-gated. Legacy `on` keeps its own rule above (== mesh). ===== */
.vnl-shell[data-vnl-wallpaper] .vnl::after{content:"";position:absolute;inset:-15%;z-index:-2;pointer-events:none;background:var(--amb-bg);background-size:auto;background-size:var(--amb-bs,auto);background-position:0 0;background-position:var(--amb-bp,0 0);opacity:.5;opacity:var(--amb-op,.5);animation:none;animation:var(--amb-an,none)}
.vnl-shell[data-vnl-wallpaper="mesh"], .vnl-amb-sw[data-amb="mesh"]{--amb-op:.5;--amb-bg:
  radial-gradient(52% 52% at 18% 16%, color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 22%, transparent), transparent 68%),
  radial-gradient(58% 58% at 86% 88%, color-mix(in srgb, var(--vnl-accent-hr) 18%, transparent), transparent 70%),
  radial-gradient(64% 64% at 60% 42%, color-mix(in srgb, var(--vnl-accent-reporting) 12%, transparent), transparent 74%)}
.vnl-shell[data-vnl-wallpaper="aurora"], .vnl-amb-sw[data-amb="aurora"]{--amb-op:.55;--amb-bs:180% 180%;--amb-bg:
  radial-gradient(120% 55% at 30% -12%, color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 20%, transparent), transparent 60%),
  radial-gradient(120% 55% at 75% -8%, color-mix(in srgb, var(--vnl-accent-hr) 16%, transparent), transparent 62%);
  --amb-an:vnl-amb-drift 26s ease-in-out infinite alternate}
.vnl-shell[data-vnl-wallpaper="beams"], .vnl-amb-sw[data-amb="beams"]{--amb-op:.5;--amb-bg:
  repeating-linear-gradient(115deg, transparent 0 64px, color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 7%, transparent) 64px 66px, transparent 66px 140px)}
.vnl-shell[data-vnl-wallpaper="glow"], .vnl-amb-sw[data-amb="glow"]{--amb-op:.6;--amb-bg:
  radial-gradient(72% 52% at 50% -6%, color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 22%, transparent), transparent 66%)}
.vnl-shell[data-vnl-wallpaper="grid"], .vnl-amb-sw[data-amb="grid"]{--amb-op:.5;--amb-bs:46px 46px;--amb-bg:
  linear-gradient(color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 9%, transparent) 1px, transparent 1px),
  linear-gradient(90deg, color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 9%, transparent) 1px, transparent 1px)}
.vnl-shell[data-vnl-wallpaper="dots"], .vnl-amb-sw[data-amb="dots"]{--amb-op:.5;--amb-bs:26px 26px;--amb-bg:
  radial-gradient(color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 34%, transparent) 1.4px, transparent 1.6px)}
.vnl-shell[data-vnl-wallpaper="stars"], .vnl-amb-sw[data-amb="stars"]{--amb-op:.7;--amb-bg:
  radial-gradient(1.4px 1.4px at 15% 22%, rgba(255,255,255,.6), transparent),
  radial-gradient(1.2px 1.2px at 68% 38%, rgba(255,255,255,.5), transparent),
  radial-gradient(1.6px 1.6px at 42% 72%, rgba(255,255,255,.55), transparent),
  radial-gradient(1.1px 1.1px at 84% 78%, rgba(255,255,255,.45), transparent),
  radial-gradient(1.3px 1.3px at 30% 52%, rgba(255,255,255,.5), transparent);
  --amb-an:vnl-amb-twinkle 7s ease-in-out infinite}
.vnl-shell[data-vnl-wallpaper="waves"], .vnl-amb-sw[data-amb="waves"]{--amb-op:.5;--amb-bg:
  radial-gradient(140% 44% at 50% 108%, color-mix(in srgb, var(--vnl-accent-hr) 16%, transparent), transparent 60%),
  radial-gradient(140% 40% at 50% 124%, color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 12%, transparent), transparent 56%)}
@keyframes vnl-amb-drift{to{background-position:100% 100%}}
@keyframes vnl-amb-twinkle{0%,100%{opacity:.7}50%{opacity:.42}}
@keyframes vnl-amb-plasma{0%{background-position:0% 0%}100%{background-position:100% 60%}}
/* --- Ambience catalogue, batch 2 --- */
.vnl-shell[data-vnl-wallpaper="nord"], .vnl-amb-sw[data-amb="nord"]{--amb-op:.55;--amb-bs:180% 180%;--amb-bg:
  radial-gradient(120% 55% at 25% -12%, color-mix(in srgb, var(--vnl-accent-hr) 22%, transparent), transparent 60%),
  radial-gradient(120% 55% at 70% -8%, color-mix(in srgb, var(--vnl-accent-reporting) 16%, transparent), transparent 62%);
  --amb-an:vnl-amb-drift 26s ease-in-out infinite alternate}
.vnl-shell[data-vnl-wallpaper="cosmic"], .vnl-amb-sw[data-amb="cosmic"]{--amb-op:.55;--amb-bg:
  radial-gradient(40% 40% at 25% 30%, color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 28%, transparent), transparent 70%),
  radial-gradient(45% 45% at 78% 68%, color-mix(in srgb, var(--vnl-accent-hr) 22%, transparent), transparent 72%),
  radial-gradient(30% 30% at 55% 20%, color-mix(in srgb, var(--vnl-accent-reporting) 18%, transparent), transparent 75%)}
.vnl-shell[data-vnl-wallpaper="ripple"], .vnl-amb-sw[data-amb="ripple"]{--amb-op:.4;--amb-bg:
  repeating-radial-gradient(circle at 50% 38%, transparent 0 34px, color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 8%, transparent) 34px 36px, transparent 36px 70px)}
.vnl-shell[data-vnl-wallpaper="twilight"], .vnl-amb-sw[data-amb="twilight"]{--amb-op:.5;--amb-bg:
  linear-gradient(180deg, color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 18%, transparent), transparent 45%, color-mix(in srgb, var(--vnl-accent-hr) 14%, transparent))}
.vnl-shell[data-vnl-wallpaper="blueprint"], .vnl-amb-sw[data-amb="blueprint"]{--amb-op:.45;--amb-bs:44px 44px,44px 44px,176px 176px,176px 176px;--amb-bg:
  linear-gradient(color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 8%, transparent) 1px, transparent 1px),
  linear-gradient(90deg, color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 8%, transparent) 1px, transparent 1px),
  linear-gradient(color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 14%, transparent) 1.5px, transparent 1.5px),
  linear-gradient(90deg, color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 14%, transparent) 1.5px, transparent 1.5px)}
.vnl-shell[data-vnl-wallpaper="vignette"], .vnl-amb-sw[data-amb="vignette"]{--amb-op:.6;--amb-bg:
  radial-gradient(120% 100% at 50% 44%, transparent 55%, rgba(0,0,0,.42) 100%)}
.vnl-shell[data-vnl-wallpaper="plasma"], .vnl-amb-sw[data-amb="plasma"]{--amb-op:.5;--amb-bs:200% 200%;--amb-bg:
  radial-gradient(45% 45% at 30% 35%, color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 24%, transparent), transparent 70%),
  radial-gradient(50% 50% at 75% 70%, color-mix(in srgb, var(--vnl-accent-hr) 20%, transparent), transparent 72%);
  --amb-an:vnl-amb-plasma 30s ease-in-out infinite alternate}
.vnl-shell[data-vnl-wallpaper="noise"], .vnl-amb-sw[data-amb="noise"]{--amb-op:.14;--amb-bg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* --- Ambience catalogue, batch 3 (all colours via --vnl-* tokens) --- */
.vnl-shell[data-vnl-wallpaper="radiance"], .vnl-amb-sw[data-amb="radiance"]{--amb-op:.55;--amb-bg:
  radial-gradient(62% 52% at 50% 46%, color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 20%, transparent), transparent 62%)}
.vnl-shell[data-vnl-wallpaper="duotone"], .vnl-amb-sw[data-amb="duotone"]{--amb-op:.5;--amb-bg:
  linear-gradient(135deg, color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 18%, transparent), transparent 48%, color-mix(in srgb, var(--vnl-accent-hr) 15%, transparent))}
.vnl-shell[data-vnl-wallpaper="constellation"], .vnl-amb-sw[data-amb="constellation"]{--amb-op:.5;--amb-bs:64px 64px;--amb-bg:
  radial-gradient(color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 40%, transparent) 1.2px, transparent 1.5px)}
.vnl-shell[data-vnl-wallpaper="comet"], .vnl-amb-sw[data-amb="comet"]{--amb-op:.45;--amb-bg:
  linear-gradient(115deg, transparent 42%, color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 16%, transparent) 50%, transparent 58%)}
.vnl-shell[data-vnl-wallpaper="diagonal"], .vnl-amb-sw[data-amb="diagonal"]{--amb-op:.45;--amb-bg:
  repeating-linear-gradient(45deg, transparent 0 22px, color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 6%, transparent) 22px 24px)}
.vnl-shell[data-vnl-wallpaper="crosshatch"], .vnl-amb-sw[data-amb="crosshatch"]{--amb-op:.4;--amb-bg:
  repeating-linear-gradient(45deg, transparent 0 20px, color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 5%, transparent) 20px 22px),
  repeating-linear-gradient(-45deg, transparent 0 20px, color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 5%, transparent) 20px 22px)}
.vnl-shell[data-vnl-wallpaper="topo"], .vnl-amb-sw[data-amb="topo"]{--amb-op:.4;--amb-bg:
  repeating-radial-gradient(circle at 32% 68%, transparent 0 26px, color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 7%, transparent) 26px 28px, transparent 28px 56px)}
/* --- Ambience catalogue, batch 4 (all colours via --vnl-* tokens) --- */
.vnl-shell[data-vnl-wallpaper="sunrise"], .vnl-amb-sw[data-amb="sunrise"]{--amb-op:.55;--amb-bg:
  linear-gradient(0deg, color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 20%, transparent), transparent 45%),
  radial-gradient(90% 40% at 50% 108%, color-mix(in srgb, var(--vnl-accent-hr) 12%, transparent), transparent 60%)}
.vnl-shell[data-vnl-wallpaper="galaxy"], .vnl-amb-sw[data-amb="galaxy"]{--amb-op:.5;--amb-bg:
  conic-gradient(from 0deg at 52% 48%, transparent, color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 16%, transparent), transparent 45%, color-mix(in srgb, var(--vnl-accent-hr) 12%, transparent), transparent 80%);
  --amb-an:vnl-amb-spin 40s linear infinite}
.vnl-shell[data-vnl-wallpaper="checker"], .vnl-amb-sw[data-amb="checker"]{--amb-op:.4;--amb-bg:
  conic-gradient(color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 6%, transparent) 0 25%, transparent 0 50%, color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 6%, transparent) 0 75%, transparent 0);--amb-bs:48px 48px}
.vnl-shell[data-vnl-wallpaper="diamonds"], .vnl-amb-sw[data-amb="diamonds"]{--amb-op:.4;--amb-bg:
  linear-gradient(45deg, color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 7%, transparent) 25%, transparent 25% 75%, color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 7%, transparent) 75%),
  linear-gradient(45deg, color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 7%, transparent) 25%, transparent 25% 75%, color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 7%, transparent) 75%);--amb-bs:34px 34px;--amb-bp:0 0,17px 17px}
.vnl-shell[data-vnl-wallpaper="scallops"], .vnl-amb-sw[data-amb="scallops"]{--amb-op:.4;--amb-bg:
  radial-gradient(circle at 50% 0, transparent 0 13px, color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 8%, transparent) 13px 15px, transparent 15px);--amb-bs:38px 19px}
.vnl-shell[data-vnl-wallpaper="circuit"], .vnl-amb-sw[data-amb="circuit"]{--amb-op:.45;--amb-bg:
  radial-gradient(color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 30%, transparent) 1.6px, transparent 1.8px),
  linear-gradient(color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 5%, transparent) 1px, transparent 1px),
  linear-gradient(90deg, color-mix(in srgb, var(--vnl-seal-accent, var(--vnl-accent-it)) 5%, transparent) 1px, transparent 1px);--amb-bs:48px 48px}
@keyframes vnl-amb-spin{to{transform:rotate(1turn)}}
/* Light appearance: soften + multiply so no ambience reduces text contrast. */
.vnl-shell[data-vnl-theme="light"][data-vnl-wallpaper="mesh"] .vnl::after,
.vnl-shell[data-vnl-theme="light"][data-vnl-wallpaper="aurora"] .vnl::after,
.vnl-shell[data-vnl-theme="light"][data-vnl-wallpaper="waves"] .vnl::after,
.vnl-shell[data-vnl-theme="light"][data-vnl-wallpaper="nord"] .vnl::after,
.vnl-shell[data-vnl-theme="light"][data-vnl-wallpaper="cosmic"] .vnl::after,
.vnl-shell[data-vnl-theme="light"][data-vnl-wallpaper="twilight"] .vnl::after,
.vnl-shell[data-vnl-theme="light"][data-vnl-wallpaper="plasma"] .vnl::after,
.vnl-shell[data-vnl-theme="light"][data-vnl-wallpaper="radiance"] .vnl::after,
.vnl-shell[data-vnl-theme="light"][data-vnl-wallpaper="duotone"] .vnl::after,
.vnl-shell[data-vnl-theme="light"][data-vnl-wallpaper="sunrise"] .vnl::after,
.vnl-shell[data-vnl-theme="light"][data-vnl-wallpaper="galaxy"] .vnl::after,
.vnl-shell[data-vnl-theme="light"][data-vnl-wallpaper="comet"] .vnl::after,
.vnl-shell[data-vnl-theme="light"][data-vnl-wallpaper="glow"] .vnl::after{opacity:.4;mix-blend-mode:multiply}
.vnl-shell[data-vnl-theme="light"][data-vnl-wallpaper="grid"] .vnl::after{background:
  linear-gradient(rgba(20,30,60,.06) 1px, transparent 1px),
  linear-gradient(90deg, rgba(20,30,60,.06) 1px, transparent 1px)}
.vnl-shell[data-vnl-theme="light"][data-vnl-wallpaper="stars"] .vnl::after{display:none}
.vnl-shell[data-vnl-theme="light"][data-vnl-wallpaper="vignette"] .vnl::after{opacity:.28}
.vnl-shell[data-vnl-theme="light"]:not([data-vnl-skin])[data-vnl-wallpaper]:not([data-vnl-wallpaper="off"]) .vnl::after{opacity:.18;mix-blend-mode:multiply}
/* Sober / focus mode = calm: every ambience suppressed. Reduced motion: freeze it. */
.vnl-shell[data-vnl-mode="sober"][data-vnl-wallpaper]:not([data-vnl-wallpaper="off"]) .vnl::after{display:none}
@media (prefers-reduced-motion:reduce){
  .vnl-shell[data-vnl-wallpaper="aurora"] .vnl::after,
  .vnl-shell[data-vnl-wallpaper="nord"] .vnl::after,
  .vnl-shell[data-vnl-wallpaper="plasma"] .vnl::after,
  .vnl-shell[data-vnl-wallpaper="galaxy"] .vnl::after,
  .vnl-shell[data-vnl-wallpaper="stars"] .vnl::after{animation:none}}
/* Ambience preview swatches (settings picker) — same paint vars as the backdrop
   (single source, no duplication); static + crisper for a legible thumbnail. */
.vnl-amb-sw{flex:none;width:18px;height:18px;border-radius:5px;overflow:hidden;background:var(--amb-bg);background-size:auto;background-size:var(--amb-bs,auto);background-position:0 0;background-position:var(--amb-bp,0 0);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
/* off / shader carry no CSS paint → a quiet dashed chip reads as "no preview". */
.vnl-amb-sw[data-amb="off"],.vnl-amb-sw[data-amb="shader"]{border-style:dashed;opacity:.6}

/* ===== header ===== */
.vnl-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:28px}
.vnl-head-left{display:flex;align-items:flex-start;gap:14px;min-width:0}
.vnl-back{flex:none;width:40px;height:40px;border-radius:13px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);color:#a3aed0;display:grid;place-items:center;cursor:pointer;margin-top:18px}
.vnl-back:hover{color:#fff}
.vnl-back svg{width:18px;height:18px}
.vnl-crumb{font-size:13px;color:#a3aed0;margin-bottom:6px;font-weight:500}
.vnl-title{font-size:32px;line-height:1.05;font-weight:600;letter-spacing:-.5px;margin:0;color:#fff}
/* Isolate vNext headings from the app's global h1–h6 theme color (index.css
   light-mode bleed). The shell is a dark surface; its headings stay light. */
.vnl-shell .vnl-title,.vnl-shell .vnl-agent h2{color:#fff!important}
.vnl-shell .vnl-empty h3{color:#eaeefb!important}
.vnl-sub{margin:8px 0 0;color:#97a3c4;font-size:14px;max-width:62ch}
.vnl-demo{display:inline-flex;align-items:center;margin-left:12px;padding:3px 10px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.04em;vertical-align:middle;
  background:rgba(245,158,11,.16);color:#fbbf24;border:1px solid rgba(245,158,11,.35)}
.vnl-hint{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#6b769a}
.vnl-hint svg{width:15px;height:15px}
.vnl-headtools{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.vnl-search{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:999px;border-radius:var(--vnl-pill);
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);min-width:230px;transition:border-color .2s,background .2s}
.vnl-search:focus-within{border-color:color-mix(in srgb,#3965FF 50%,transparent);border-color:color-mix(in srgb,var(--vnl-accent-it) 50%,transparent);background:rgba(255,255,255,.06)}
.vnl-search svg{width:16px;height:16px;color:#97a3c4;flex:none}
.vnl-search input{flex:1 1;min-width:0;border:0;background:transparent;outline:0;color:#fff;color:var(--vnl-field-ink);font:500 13px var(--vnl-font-body)}
.vnl-search input::placeholder{color:#6b769a}

/* ===== grid ===== */
/* Grid geometry vocabulary — ONE home for the numbers that decide how much room
   the module wall takes. Density (global) and modview (this grid) both steer the
   SAME tokens instead of each re-declaring min-height/padding on .vnl-card.
   `gap` deliberately stays literal: it has four overrides at different
   specificities, and folding it in would add regression risk for no visible gain. */
.vnl-shell{--vnl-grid-cols:3;--vnl-card-min-h:240px;--vnl-card-pad:22px}
@media (max-width:1100px){.vnl-shell{--vnl-grid-cols:2}}
@media (max-width:680px){.vnl-shell{--vnl-grid-cols:1}}

.vnl-grid{display:grid;grid-template-columns:repeat(var(--vnl-grid-cols),1fr);grid-gap:20px;gap:20px;perspective:1300px;
  /* anti-lag: isolate card layout/style recalcs from the rest of the page. NOT `paint`
     (that would clip the cards' hover drop-shadow which extends beyond the grid box). */
  contain:layout style}

/* ===== card (3D gradient — validated "comparison" version, lag-free) ===== */
.vnl-card{position:relative;overflow:hidden;border-radius:20px;border-radius:var(--vnl-radius);min-height:var(--vnl-card-min-h);color:#fff;
  cursor:pointer;padding:var(--vnl-card-pad);display:flex;flex-direction:column;justify-content:space-between;
  align-items:stretch;text-align:left;width:100%;
  border:0;font:inherit;
  /* Gradient painted on the card itself (not only the .vnl-card__bg child) so it
     can NEVER disappear on hover and reveal the navy page beneath. */
  background:linear-gradient(150deg,color-mix(in srgb,var(--vnl-accent) 74%,#0b1437 26%),color-mix(in srgb,var(--vnl-accent) 38%,#0b1437 62%));
  background:linear-gradient(150deg,color-mix(in srgb,var(--vnl-accent) 74%,var(--vnl-navd) 26%),color-mix(in srgb,var(--vnl-accent) 38%,var(--vnl-navd) 62%));
  box-shadow:0 16px 36px -18px rgba(0,0,0,.6);
  /* UX-5 — the prototype's full card animation: hover float + scale composed with the
     pointer-tracked tilt (transform-only, no layout thrash). At rest all four vars are
     neutral; :hover engages the lift/scale, the JS hook feeds --vnl-rx/--vnl-ry. */
  transform:translateY(0px) scale(1) rotateX(0deg) rotateY(0deg);
  transform:translateY(var(--vnl-card-float,0px)) scale(var(--vnl-card-scale,1)) rotateX(var(--vnl-rx,0deg)) rotateY(var(--vnl-ry,0deg));
  transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .3s cubic-bezier(.22,.61,.36,1);
  transition:transform .5s var(--vnl-ease),box-shadow .3s var(--vnl-ease);
  --vnl-accent:var(--vnl-accent-hr)}
/* Flat-plane tilt: perspective lives on .vnl-grid only (no preserve-3d). The card
   is IMMUNE to the app's global themes: its gradient, opacity and (no) filter are
   forced in every state (rest + hover) so nothing can repaint it dark on hover. */
.vnl-shell .vnl-card,
.vnl-shell .vnl-card:hover,
.vnl-shell .vnl-card:focus,
.vnl-shell .vnl-card.vnl-tracking{
  filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;opacity:1!important;
  background:linear-gradient(150deg,color-mix(in srgb,var(--vnl-accent) 74%,#0b1437 26%),color-mix(in srgb,var(--vnl-accent) 38%,#0b1437 62%))!important;
  background:linear-gradient(150deg,color-mix(in srgb,var(--vnl-accent) 74%,var(--vnl-navd) 26%),color-mix(in srgb,var(--vnl-accent) 38%,var(--vnl-navd) 62%))!important;
}
.vnl-shell .vnl-card.is-soon{opacity:.82!important}
.vnl-shell .vnl-card *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
/* Snappy follow while the cursor is on the card; the .5s base eases back on leave. */
/* anti-lag: promote to its own GPU layer ONLY while interacting, so the tilt transform
   and the hover box-shadow repaint stay layer-local instead of repainting the page. */
.vnl-card.vnl-tracking{transition:transform .12s linear,box-shadow .3s cubic-bezier(.22,.61,.36,1);transition:transform .12s linear,box-shadow .3s var(--vnl-ease);will-change:transform}
.vnl-card[data-mod="payroll"]{--vnl-accent:var(--vnl-accent-payroll)}
.vnl-card[data-mod="hr"]{--vnl-accent:var(--vnl-accent-hr)}
.vnl-card[data-mod="hse"]{--vnl-accent:var(--vnl-accent-hse)}
.vnl-card[data-mod="accounting"]{--vnl-accent:var(--vnl-accent-accounting)}
.vnl-card[data-mod="it"]{--vnl-accent:var(--vnl-accent-it)}
.vnl-card[data-mod="banking"]{--vnl-accent:var(--vnl-accent-banking)}
.vnl-card[data-mod="reporting"]{--vnl-accent:var(--vnl-accent-reporting)}
.vnl-card[data-mod="billing"]{--vnl-accent:var(--vnl-accent-billing)}
.vnl-card[data-mod="portail"]{--vnl-accent:var(--vnl-accent-portail)}
.vnl-card[data-mod="organisation"]{--vnl-accent:var(--vnl-accent-organisation)}
.vnl-card[data-mod="self_service"]{--vnl-accent:var(--vnl-accent-self_service)}
.vnl-card[data-mod="expenses"]{--vnl-accent:var(--vnl-accent-expenses)}
.vnl-card[data-mod="time_absences"]{--vnl-accent:var(--vnl-accent-time_absences)}
.vnl-card[data-mod="finance"]{--vnl-accent:var(--vnl-accent-finance)}
.vnl-card[data-mod="legal"]{--vnl-accent:var(--vnl-accent-legal)}
/* Hover = lift + scale + deep accent glow (prototype .vnl-card:hover). HOVER ONLY —
   keyboard focus keeps the still ring below (tilt/lift must never ride on focus). */
.vnl-card:hover{--vnl-card-float:var(--vnl-hover-lift);--vnl-card-scale:var(--vnl-hover-scale);
  box-shadow:0 30px 60px -22px color-mix(in srgb,var(--vnl-accent) 60%,#000);will-change:transform}
.vnl-card:focus-visible{outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--vnl-accent) 45%,transparent),0 30px 60px -22px color-mix(in srgb,var(--vnl-accent) 60%,#000)}

.vnl-card__bg{position:absolute;inset:0;z-index:0;
  background:linear-gradient(150deg,color-mix(in srgb,var(--vnl-accent) 74%,#0b1437 26%),color-mix(in srgb,var(--vnl-accent) 38%,#0b1437 62%));
  background:linear-gradient(150deg,color-mix(in srgb,var(--vnl-accent) 74%,var(--vnl-navd) 26%),color-mix(in srgb,var(--vnl-accent) 38%,var(--vnl-navd) 62%))}
.vnl-dots{position:absolute;top:-10px;right:-10px;width:130px;height:130px;z-index:1;opacity:.25;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.55) 1px,transparent 1.6px);background-size:14px 14px;
  -webkit-mask:radial-gradient(circle at 80% 20%,#000 30%,transparent 70%);mask:radial-gradient(circle at 80% 20%,#000 30%,transparent 70%)}
.vnl-sq{position:absolute;bottom:-14px;left:-14px;width:96px;height:96px;z-index:1;opacity:.3;color:#fff;
  transition:transform .8s cubic-bezier(.22,.61,.36,1);
  transition:transform .8s var(--vnl-ease);pointer-events:none}
.vnl-card:hover .vnl-sq{transform:rotate(180deg)}
.vnl-sq svg{width:100%;height:100%}
.vnl-gloss{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.16) 0%,transparent 32%,transparent 70%,rgba(255,255,255,.1) 100%)}
.vnl-shine{position:absolute;inset:-60%;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s;
  background:linear-gradient(135deg,transparent 42%,rgba(255,255,255,.28) 50%,transparent 58%);
  background:linear-gradient(var(--vnl-sweep,135deg),transparent 42%,rgba(255,255,255,.28) 50%,transparent 58%)}
.vnl-card:hover .vnl-shine{opacity:1}

.vnl-row{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:flex-start}
.vnl-ic{color:#fff;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}
.vnl-ic svg{width:28px;height:28px}
.vnl-pulse{position:relative;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.45)}
.vnl-card:hover .vnl-pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(255,255,255,.7);
  animation:vnl-ping 1.4s ease-in-out infinite}
.vnl-cbody{position:relative;z-index:3}
.vnl-ctitle{font-size:19px;font-weight:600;margin:0 0 6px;
  text-shadow:0 2px 6px rgba(0,0,0,.25)}
.vnl-cdesc{margin:0;font-size:13px;line-height:1.5;color:rgba(255,255,255,.88);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vnl-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.vnl-level{font-size:11px;font-weight:600;color:rgba(255,255,255,.85);background:rgba(255,255,255,.14);
  padding:4px 9px;border-radius:999px;border-radius:var(--vnl-pill)}
.vnl-go{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#fff;
  opacity:0;transform:translateX(-8px);transition:.3s}
.vnl-card:hover .vnl-go{opacity:1;transform:none}
.vnl-go .vnl-bar{height:2px;width:18px;background:rgba(255,255,255,.7);border-radius:2px}
.vnl-go svg{width:15px;height:15px}

/* ----- « Bientôt » (soon) state — visible, not openable, never fakes a feature ----- */
.vnl-card.is-soon{cursor:default;opacity:.82;transform:none}
.vnl-card.is-soon:hover{box-shadow:0 16px 36px -18px rgba(0,0,0,.6)}
.vnl-card.is-soon .vnl-shine,.vnl-card.is-soon .vnl-go{display:none}
.vnl-card.is-soon:hover .vnl-sq{transform:none}
.vnl-soon{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#fff;
  background:rgba(255,255,255,.16);padding:4px 10px;border-radius:999px;border-radius:var(--vnl-pill)}
.vnl-soon svg{width:12px;height:12px}

/* ----- settings gear (Organisation → réglages, top bar) ----- */
.vnl-gear{width:40px;height:40px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);color:#cdd6f4;display:grid;place-items:center;cursor:pointer;
  transition:background .2s,color .2s}
.vnl-gear:hover{background:rgba(255,255,255,.08);color:#fff}
.vnl-gear svg{width:18px;height:18px}

/* ===== Luna agent panel (leaf) ===== */
.vnl-agent{max-width:720px;margin:8px auto 0;position:relative;overflow:hidden;border-radius:20px;border-radius:var(--vnl-radius);
  padding:36px 34px 30px;text-align:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  --vnl-accent:var(--vnl-accent-hr)}
.vnl-agent[data-mod="payroll"]{--vnl-accent:var(--vnl-accent-payroll)}
.vnl-agent[data-mod="hr"]{--vnl-accent:var(--vnl-accent-hr)}
.vnl-agent[data-mod="hse"]{--vnl-accent:var(--vnl-accent-hse)}
.vnl-agent[data-mod="accounting"]{--vnl-accent:var(--vnl-accent-accounting)}
.vnl-agent[data-mod="it"]{--vnl-accent:var(--vnl-accent-it)}
.vnl-agent[data-mod="banking"]{--vnl-accent:var(--vnl-accent-banking)}
.vnl-agent[data-mod="reporting"]{--vnl-accent:var(--vnl-accent-reporting)}
.vnl-agent[data-mod="billing"]{--vnl-accent:var(--vnl-accent-billing)}
.vnl-agent[data-mod="portail"]{--vnl-accent:var(--vnl-accent-portail)}
.vnl-agent[data-mod="organisation"]{--vnl-accent:var(--vnl-accent-organisation)}
.vnl-orb{position:relative;width:62px;height:62px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;color:#fff;
  background:radial-gradient(circle at 32% 30%,#b9a5ff,var(--vnl-accent) 55%,color-mix(in srgb,var(--vnl-accent) 50%,#000))}
.vnl-orb svg{width:28px;height:28px}
.vnl-agent h2{font-size:22px;font-weight:600;margin:0 0 8px;color:#fff}
.vnl-agent-sub{color:#97a3c4;font-size:14px;margin:0 auto 22px;max-width:48ch}
.vnl-bar2{display:flex;align-items:center;gap:10px;background:#0b1437;border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  border-radius:var(--vnl-pill);padding:10px 12px 10px 18px;max-width:520px;margin:0 auto}
.vnl-bar2 input{flex:1 1;border:0;background:transparent;outline:0;color:#fff;color:var(--vnl-field-ink);font:600 16px var(--vnl-font-body)}
.vnl-bar2 input::placeholder{color:#6b769a}
.vnl-send{flex:none;width:40px;height:40px;border-radius:12px;border:0;cursor:pointer;color:#fff;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--vnl-accent),color-mix(in srgb,var(--vnl-accent) 55%,#000))}
.vnl-send svg{width:18px;height:18px}

/* ===== states ===== */
.vnl-empty{max-width:520px;margin:40px auto;text-align:center;color:#97a3c4;padding:32px;border-radius:20px;border-radius:var(--vnl-radius);
  border:1px dashed rgba(255,255,255,.14)}
.vnl-empty svg{width:34px;height:34px;color:#6b769a;margin-bottom:12px}
.vnl-empty h3{color:#eaeefb;font-size:17px;margin:0 0 6px;font-weight:700}
/* Warm empty-state hint — a friendly, human sub-line under the title. Renders
   only when a screen supplies a <p>; harmless (absent) everywhere else. Honesty:
   a hint must point at a REAL adjacent action, never imply data that isn't there. */
.vnl-empty p{margin:2px auto 0;max-width:420px;font-size:13.5px;line-height:1.5;color:#8a95b8}
.vnl-shell[data-vnl-theme="light"] .vnl-empty p{color:#5a648a}
/* Opt-in WARM variant for GENUINE (non-error) empty states only — never applied
   to error branches. A gentle, welcoming glow behind the icon + a warmer tint,
   so a fresh/empty surface feels inviting rather than cold. Fully static → no
   motion, reduced-motion safe by construction. */
.vnl-empty--warm{border-color:color-mix(in srgb,#8ab4ff 24%,rgba(255,255,255,.14));border-color:color-mix(in srgb,var(--vnl-board-accent,#8ab4ff) 24%,rgba(255,255,255,.14));
  background:radial-gradient(150px 110px at 50% 30%,color-mix(in srgb,#8ab4ff 11%,transparent),transparent 72%);
  background:radial-gradient(150px 110px at 50% 30%,color-mix(in srgb,var(--vnl-board-accent,#8ab4ff) 11%,transparent),transparent 72%)}
.vnl-empty--warm svg{color:color-mix(in srgb,#8ab4ff 78%,#c7d2f0);color:color-mix(in srgb,var(--vnl-board-accent,#8ab4ff) 78%,#c7d2f0)}
.vnl-shell[data-vnl-theme="light"] .vnl-empty--warm{border-color:color-mix(in srgb,#3b63d6 30%,rgba(20,30,60,.16));border-color:color-mix(in srgb,var(--vnl-board-accent,#3b63d6) 30%,rgba(20,30,60,.16))}
.vnl-skel{min-height:240px;border-radius:20px;border-radius:var(--vnl-radius);background:linear-gradient(100deg,rgba(255,255,255,.04),rgba(255,255,255,.08),rgba(255,255,255,.04));
  background-size:200% 100%;animation:vnl-shimmer 1.4s linear infinite}

/* ===== Réglages (settings) panel ===== */
.vnl-settings{max-width:980px;display:flex;flex-direction:column;gap:14px}
.vnl-set-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:18px 20px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.vnl-set-label h3{margin:0 0 3px;font-size:15px;font-weight:700;color:#fff}
.vnl-set-label p{margin:0;font-size:13px;color:#97a3c4}
.vnl-seg{display:inline-flex;gap:4px;padding:4px;border-radius:999px;border-radius:var(--vnl-pill);flex:none;
  background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08)}
/* Ambience picker — off/shader on top, then category groups (soft/cosmic/pattern)
   each with a quiet header + wrapping option pills. Keeps a 18-entry catalogue
   scannable instead of a flat wall of buttons. */
.vnl-amb-picker{display:flex;flex-direction:column;gap:12px;max-width:min(600px,100%)}
.vnl-amb-grp{display:flex;flex-direction:column;gap:6px}
.vnl-amb-grp-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.55}
.vnl-amb-grp-items{display:flex;flex-wrap:wrap;gap:4px}
.vnl-seg-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:0;border-radius:999px;border-radius:var(--vnl-pill);
  background:transparent;color:#a3aed0;cursor:pointer;font:600 13px var(--vnl-font-body);
  transition:background .2s,color .2s;min-height:38px}
.vnl-seg-btn:hover{color:#fff}
.vnl-seg-btn.is-on{background:linear-gradient(135deg,#3965FF,#7551FF);background:linear-gradient(135deg,var(--vnl-accent-it),var(--vnl-accent-hr));color:#fff}
.vnl-seg-btn svg{width:15px;height:15px}
.vnl-set-block{padding:18px 20px;border-radius:16px;background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08)}
.vnl-set-block-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.vnl-set-block-head h2{margin:0 0 4px;font-size:16px;font-weight:800;color:#fff}
.vnl-set-block-head p{margin:0;color:#97a3c4;font-size:13px;line-height:1.45}
.vnl-settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:12px;gap:12px}
.vnl-set-card{display:flex;flex-direction:column;gap:10px;min-height:170px;padding:14px;border-radius:14px;
  background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.08)}
.vnl-set-card-head{display:flex;align-items:center;gap:9px;min-width:0}
.vnl-set-card-ic{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:10px;
  background:rgba(138,107,255,.16);color:#b7a7ff}
.vnl-set-card-ic svg{width:17px;height:17px}
.vnl-set-card-title{flex:1 1;min-width:0;color:#fff;font-size:14px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-set-status{flex:none;padding:4px 9px;border-radius:999px;border-radius:var(--vnl-pill);font-size:10px;font-weight:800;
  letter-spacing:.35px;text-transform:uppercase;color:#8ff4c5;background:rgba(1,181,116,.14);border:1px solid rgba(1,181,116,.26)}
.vnl-set-card-desc{margin:0;color:#97a3c4;font-size:12px;line-height:1.45}
.vnl-set-chiprow{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto}
.vnl-set-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:9px;font-size:11px;font-weight:700;
  color:#cdd6f4;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08)}
.vnl-set-chip svg{width:12px;height:12px;color:#7ee0a8}
.vnl-set-card-action{align-self:flex-start;margin-top:2px;padding:7px 12px;border-radius:999px;border-radius:var(--vnl-pill);border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.07);color:#eaeefb;font:800 11px var(--vnl-font-body);cursor:pointer}
.vnl-set-card-action:hover{background:rgba(255,255,255,.13)}
@media (max-width:900px){
  .vnl-settings-grid{grid-template-columns:1fr}
  .vnl-set-card{min-height:0}
  .vnl-seg{flex-wrap:wrap;justify-content:flex-end}
}

/* ----- settings leaves: translations + theme studio ----- */
.vnl-tr-tools,.vnl-th-tools{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:16px;max-width:980px}
.vnl-tr-search,.vnl-th-search{flex:1 1;min-width:260px;margin:0}
.vnl-tr-lang,.vnl-th-family{min-width:180px}
.vnl-tr-table{display:flex;flex-direction:column;max-width:1100px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.vnl-tr-row{display:grid;grid-template-columns:minmax(220px,.9fr) minmax(220px,1.1fr) minmax(220px,1.1fr);
  grid-gap:14px;
  gap:14px;padding:11px 14px;align-items:start;font-size:12px;color:#cfd6ec}
.vnl-tr-row:not(.vnl-tr-head){border-top:1px solid rgba(255,255,255,.055)}
.vnl-tr-row:nth-child(even):not(.vnl-tr-head){background:rgba(255,255,255,.022)}
.vnl-tr-head{background:rgba(0,0,0,.28);color:#8b96b8;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.6px}
.vnl-tr-key{color:#8b9bff;word-break:break-all}
.vnl-tr-row.is-overridden{background:color-mix(in srgb,#8A6BFF 12%,transparent);background:color-mix(in srgb,var(--vnl-accent-organisation,#7c6cff) 12%,transparent)}
.vnl-tr-badge{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;border-radius:var(--vnl-pill);font-size:9.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.4px;background:color-mix(in srgb,#8A6BFF 32%,transparent);background:color-mix(in srgb,var(--vnl-accent-organisation,#7c6cff) 32%,transparent);color:#fff}
.vnl-tr-show{display:flex;align-items:center;gap:8px;min-width:0}
.vnl-tr-text{flex:1 1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-tr-acts{display:inline-flex;gap:4px;flex:none;opacity:.55}
.vnl-tr-row:hover .vnl-tr-acts{opacity:1}
.vnl-tr-edit{display:flex;align-items:flex-start;gap:6px}
.vnl-tr-edit .vnl-edit-in{flex:1 1;min-width:0}
/* Long-text editing: a wrapping, resizable multi-line field so full paragraphs are comfortable. */
.vnl-edit-ta{min-height:calc(1.4em * 4 + 20px);line-height:1.4;resize:vertical;white-space:pre-wrap;overflow-wrap:anywhere}
.vnl-tr-scope{min-width:0}
.vnl-tr-prov{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;border-radius:var(--vnl-pill);font-size:9px;font-weight:800;
  text-transform:uppercase;letter-spacing:.4px;background:rgba(255,255,255,.10);color:#cfd6ec}
.vnl-tr-prov.is-tenant{background:color-mix(in srgb,#8A6BFF 34%,transparent);background:color-mix(in srgb,var(--vnl-accent-organisation,#7c6cff) 34%,transparent);color:#fff}
.vnl-tr-prov.is-base{background:color-mix(in srgb,#3965FF 30%,transparent);background:color-mix(in srgb,var(--vnl-accent-it,#3aa0ff) 30%,transparent);color:#fff}
.vnl-tr-act{width:28px;height:28px;flex:none;display:grid;place-items:center;border:0;border-radius:7px;cursor:pointer;
  background:rgba(255,255,255,.08);color:#fff}
.vnl-tr-act:hover{background:rgba(255,255,255,.16)}
.vnl-tr-act:disabled{opacity:.5;cursor:default}
.vnl-tr-act svg{width:15px;height:15px}
.vnl-tr-note{max-width:1100px;margin-bottom:12px;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px;
  font-size:13px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.85)}
.vnl-tr-note svg{width:16px;height:16px;flex:none}
.vnl-tr-io{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto;align-items:flex-end}
.vnl-tr-iobtn{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;border-radius:var(--vnl-pill);
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#fff;font-weight:600;font-size:13px;cursor:pointer}
.vnl-tr-iobtn:hover{background:rgba(255,255,255,.1)}
.vnl-tr-iobtn:disabled{opacity:.5;cursor:default}
.vnl-tr-iobtn svg{width:15px;height:15px}
.vnl-tr-iobtn--primary{background:color-mix(in srgb,#8A6BFF 30%,transparent);background:color-mix(in srgb,var(--vnl-accent-organisation,#7c6cff) 30%,transparent);
  border-color:color-mix(in srgb,#8A6BFF 55%,transparent);
  border-color:color-mix(in srgb,var(--vnl-accent-organisation,#7c6cff) 55%,transparent)}
.vnl-tr-iobtn--primary:hover{background:color-mix(in srgb,#8A6BFF 42%,transparent);background:color-mix(in srgb,var(--vnl-accent-organisation,#7c6cff) 42%,transparent)}
.vnl-th-custom,.vnl-th-catalog{max-width:1160px;margin-bottom:18px;padding:18px 20px;border-radius:16px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)}
.vnl-th-custom-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.vnl-th-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.vnl-th-custom h2,.vnl-th-catalog h2{margin:0 0 4px;font-size:16px;font-weight:900;color:#fff}
.vnl-th-custom p{margin:0;color:#97a3c4;font-size:13px;line-height:1.45}
.vnl-th-custom-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:12px;gap:12px;align-items:end}
.vnl-th-field,.vnl-th-range{display:flex;flex-direction:column;gap:7px;min-width:0}
.vnl-th-field span,.vnl-th-range span{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;color:#8b96b8}
.vnl-th-field input,.vnl-th-field select{width:100%;min-height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.24);color:#fff;color:var(--vnl-field-ink);font:700 13px var(--vnl-font-body);padding:0 10px}
.vnl-th-field input[type="color"]{padding:4px;cursor:pointer}
.vnl-th-range input{accent-color:#8A6BFF;accent-color:var(--vnl-accent-organisation)}
.vnl-th-range b{font-size:12px;color:#eaeefb;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.vnl-th-actions{display:flex;align-items:end;gap:10px;min-height:38px}
.vnl-th-save,.vnl-th-secondary{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;border-radius:999px;border-radius:var(--vnl-pill);
  font:900 12px var(--vnl-font-body);cursor:pointer;white-space:nowrap}
.vnl-th-save{border:0;
  background:linear-gradient(135deg,#8A6BFF,#3965FF);
  background:linear-gradient(135deg,var(--vnl-accent-organisation),var(--vnl-accent-it));color:#fff;font:900 12px var(--vnl-font-body);cursor:pointer}
.vnl-th-secondary{padding:0 14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#cfd6ec}
.vnl-th-save svg,.vnl-th-secondary svg{width:15px;height:15px}
.vnl-th-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));grid-gap:12px;gap:12px;margin-top:12px}
.vnl-th-card{display:flex;flex-direction:column;gap:10px;min-height:156px;padding:14px;border-radius:15px;text-align:left;cursor:pointer;
  background:var(--vnl-theme-card-bg);color:var(--vnl-theme-card-text);border:1px solid var(--vnl-theme-card-border);
  box-shadow:0 14px 34px -24px #000;transition:transform .18s cubic-bezier(.22,.61,.36,1),box-shadow .18s cubic-bezier(.22,.61,.36,1);transition:transform .18s var(--vnl-ease),box-shadow .18s var(--vnl-ease)}
.vnl-th-card:hover,.vnl-th-card:focus-visible{transform:translateY(-2px);box-shadow:0 20px 44px -26px var(--vnl-theme-card-accent)}
.vnl-th-card[aria-pressed="true"]{outline:2px solid var(--vnl-theme-card-accent);outline-offset:2px}
.vnl-th-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.vnl-th-card-top svg{width:16px;height:16px;color:var(--vnl-theme-card-accent);flex:none}
.vnl-th-card-name{font-size:14px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-th-card-tag{font-size:12px;line-height:1.35;color:var(--vnl-theme-card-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vnl-th-swatches{display:flex;gap:5px;margin-top:auto}
.vnl-th-swatches span{width:18px;height:18px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
.vnl-th-card-foot{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:900;color:var(--vnl-theme-card-accent);text-transform:uppercase;letter-spacing:.45px}
.vnl-th-card-foot svg{width:13px;height:13px}
.vnl-th-pub{margin-left:auto;font-style:normal;font-size:10px;padding:1px 6px;border-radius:6px;background:color-mix(in srgb,var(--vnl-theme-card-accent) 22%,transparent)}
/* Status filter chips */
.vnl-th-statusfld{min-width:0}
.vnl-th-chips{display:inline-flex;gap:6px;flex-wrap:wrap}
.vnl-th-chip{padding:8px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#cfd6ec;font-weight:800;font-size:12px;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.vnl-th-chip:hover{background:rgba(255,255,255,.08)}
.vnl-th-chip[aria-pressed="true"]{background:#8A6BFF;background:var(--vnl-accent-organisation);border-color:transparent;color:#fff}
.vnl-th-chip:focus-visible{outline:2px solid #8A6BFF;outline:2px solid var(--vnl-accent-organisation);outline-offset:2px}
/* Active-theme panel + global light/dark chrome switch */
.vnl-th-active{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.vnl-th-active-id{display:flex;align-items:center;gap:12px;min-width:0}
.vnl-th-active-swatch{width:38px;height:38px;border-radius:11px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);flex:none}
.vnl-th-active-name{font-size:15px;font-weight:900;color:#fff}
.vnl-th-active-fam{font-size:12px;color:#97a3c4}
.vnl-th-active-ld{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.vnl-th-active-ldlbl{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;color:#8b96b8}
.vnl-th-active-note{margin:0;font-size:11px;color:#97a3c4;max-width:360px}
.vnl-th-seg-group{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.vnl-th-seg{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:9px;border:0;background:transparent;color:#cfd6ec;cursor:pointer;font-weight:800;font-size:12px}
.vnl-th-seg svg{width:14px;height:14px}
.vnl-th-seg[aria-pressed="true"]{background:#8A6BFF;background:var(--vnl-accent-organisation);color:#fff}
.vnl-th-seg:focus-visible{outline:2px solid #8A6BFF;outline:2px solid var(--vnl-accent-organisation);outline-offset:2px}
/* Advanced sub-section heading + contrast badge */
.vnl-th-advanced-title{margin:16px 0 8px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;color:#8b96b8}
.vnl-th-contrast.is-warn{color:#f4c56a}
.vnl-th-contrast.is-warn svg{color:#f4c56a}
/* Card wrapper — hosts the apply/select button + floating duplicate/delete actions */
.vnl-th-cardwrap{position:relative;display:flex}
.vnl-th-cardwrap>.vnl-th-card{flex:1 1;width:100%}
.vnl-th-card-actions{position:absolute;top:8px;right:8px;display:flex;gap:6px;z-index:2}
.vnl-th-mini{display:inline-grid;place-items:center;width:27px;height:27px;border-radius:8px;border:1px solid rgba(255,255,255,.16);background:rgba(8,12,26,.6);color:#e6ebf9;cursor:pointer}
.vnl-th-mini svg{width:14px;height:14px}
.vnl-th-mini:hover{background:rgba(8,12,26,.85)}
.vnl-th-mini:focus-visible{outline:2px solid #8A6BFF;outline:2px solid var(--vnl-accent-organisation);outline-offset:2px}
.vnl-th-badge{align-self:flex-start;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;padding:2px 7px;border-radius:6px;color:var(--vnl-theme-card-accent);background:color-mix(in srgb,var(--vnl-theme-card-accent) 26%,transparent)}
/* Shared org (tenant-scope) themes read differently from personal ones */
.vnl-th-badge-org{color:var(--vnl-theme-card-text);background:color-mix(in srgb,var(--vnl-theme-card-text) 20%,transparent)}
/* Show-more affordance */
.vnl-th-showmore{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.vnl-th-hint{color:#97a3c4;font-size:12px}
@media (max-width:900px){
  .vnl-tr-row{grid-template-columns:1fr}
  .vnl-th-custom-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .vnl-th-custom-grid{grid-template-columns:1fr}
}

/* ===== data list (Self-service → Mes bulletins, real payslips) ===== */
.vnl-list{max-width:760px;display:flex;flex-direction:column;gap:10px}
.vnl-pay{display:flex;align-items:center;gap:16px;padding:15px 18px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
/* clickable payslip row → opens the employee dossier (bulletin → dossier workflow) */
.vnl-pay.is-click{cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease}
.vnl-pay.is-click:hover{transform:translateY(-2px);border-color:color-mix(in srgb,#01B574 45%,transparent);border-color:color-mix(in srgb,var(--vnl-accent-payroll) 45%,transparent);background:rgba(255,255,255,.07)}
.vnl-pay.is-click:focus-visible{outline:2px solid #01B574;outline:2px solid var(--vnl-accent-payroll);outline-offset:2px}
.vnl-shell[data-vnl-mode="sober"] .vnl-pay.is-click{transition:none}
.vnl-shell[data-vnl-mode="sober"] .vnl-pay.is-click:hover{transform:none}
.vnl-pay-period{flex:1 1;min-width:0;font-weight:700;color:#fff;text-transform:capitalize}
.vnl-pay-amounts{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25}
.vnl-pay-net{font-weight:700;color:#fff;font-size:15px}
.vnl-pay-gross{font-size:12px;color:#97a3c4}
.vnl-pay-status{flex:none;font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;border-radius:var(--vnl-pill);
  background:rgba(255,255,255,.12);color:#cdd6f4}
.vnl-pay-status.is-paid{background:color-mix(in srgb,#01B574 28%,transparent);background:color-mix(in srgb,var(--vnl-accent-payroll) 28%,transparent);color:#86efc4}
.vnl-pay-pdf{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#97a3c4}
.vnl-pay-pdf svg{width:13px;height:13px}
.vnl-pay-exp{flex:none;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:8px;background:rgba(255,255,255,.06);color:#a3aed0;cursor:pointer;transition:background .12s ease}
.vnl-pay-exp:hover{background:rgba(255,255,255,.14);color:#fff}
.vnl-pay-exp svg{width:15px;height:15px;transition:transform .15s ease}
.vnl-pay-exp svg.vnl-pay-exp-open{transform:rotate(180deg)}
.vnl-slip{margin:-4px 0 6px;padding:10px 16px;border-radius:0 0 14px 14px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.06);border-top:0;display:flex;flex-direction:column;gap:3px}
.vnl-slip-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:#cdd6f4;padding:3px 0}
.vnl-slip-row span:last-child{font-family:var(--vnl-font-mono);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;font-weight:600}
.vnl-slip-ded{color:#97a3c4}
.vnl-slip-sub{border-top:1px solid rgba(255,255,255,.08);margin-top:3px;padding-top:6px;font-weight:700;color:#fff}
.vnl-slip-net{border-top:1px solid rgba(255,255,255,.12);margin-top:3px;padding-top:6px;font-weight:800;color:#86efc4}
.vnl-slip-net span:last-child{color:#86efc4}
.vnl-shell[data-vnl-theme="light"] .vnl-pay-exp{background:#eef1f8;color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-slip{background:#f4f6fc;border-color:rgba(20,30,60,.08)}
.vnl-shell[data-vnl-theme="light"] .vnl-slip-row{color:#3a4366}
.vnl-shell[data-vnl-theme="light"] .vnl-slip-sub{color:#0f1838}
.vnl-pay--skel{height:56px;animation:vnl-shimmer 1.4s linear infinite;
  background:linear-gradient(100deg,rgba(255,255,255,.04),rgba(255,255,255,.08),rgba(255,255,255,.04));background-size:200% 100%}

/* ----- payroll-by-department analytics ----- */
.vnl-kpis{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;max-width:760px}
.vnl-kpi{flex:1 1;min-width:170px;display:flex;flex-direction:column;gap:3px;padding:16px 18px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
/* clickable KPI → drills into the relevant screen (dashboard workflow) */
.vnl-kpi.is-clickable{cursor:pointer;text-align:left;transition:transform .15s ease,border-color .15s ease,background .15s ease}
.vnl-kpi.is-clickable:hover{transform:translateY(-2px);border-color:color-mix(in srgb,#01B574 45%,transparent);border-color:color-mix(in srgb,var(--vnl-accent-payroll) 45%,transparent);background:rgba(255,255,255,.07)}
.vnl-kpi.is-clickable:focus-visible{outline:2px solid #01B574;outline:2px solid var(--vnl-accent-payroll);outline-offset:2px}
.vnl-shell[data-vnl-mode="sober"] .vnl-kpi.is-clickable{transition:none}
.vnl-shell[data-vnl-mode="sober"] .vnl-kpi.is-clickable:hover{transform:none}
.vnl-kpi-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;margin-bottom:5px;
  background:linear-gradient(135deg,#01B574,color-mix(in srgb,#01B574 55%,#000));
  background:linear-gradient(135deg,var(--vnl-accent-payroll),color-mix(in srgb,var(--vnl-accent-payroll) 55%,#000))}
.vnl-kpi-ic svg{width:16px;height:16px}
.vnl-kpi-val{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.4px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.vnl-kpi-lbl{font-size:12px;color:#97a3c4}
.vnl-dept{padding:14px 18px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.vnl-dept-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.vnl-dept-name{font-weight:700;color:#fff}
.vnl-dept-cost{font-weight:700;color:#fff}
.vnl-dept-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.08);margin:8px 0 9px;overflow:hidden}
.vnl-dept-bar span{display:block;height:100%;width:0;width:var(--vnl-w,0);border-radius:3px;
  background:linear-gradient(90deg,#01B574,#3965FF);
  background:linear-gradient(90deg,var(--vnl-accent-payroll),var(--vnl-accent-it))}
.vnl-dept-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:#97a3c4}
.vnl-is-pending{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px}
.vnl-is-pending-lbl{font-size:11px;font-weight:600;color:#97a3c4;margin-right:2px}
.vnl-is-chip{font-size:11px;font-weight:700;letter-spacing:.02em;padding:2px 8px;border-radius:999px;border-radius:var(--vnl-pill);background:rgba(255,159,90,.16);color:#ffb784;border:1px solid rgba(255,159,90,.28)}
.vnl-is-complete{font-size:11px;font-weight:600;color:#01B574;color:var(--vnl-accent-payroll)}
.vnl-shell[data-vnl-theme="light"] .vnl-is-chip{background:rgba(214,120,40,.12);color:#a85a16;border-color:rgba(214,120,40,.25)}

/* ----- Payroll module dashboard (surface 2 — density stress test) ----- */
.vnl-dash{display:flex;flex-direction:column;gap:16px;max-width:860px;margin-bottom:6px}
.vnl-dash-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* MVP12 PR-01 — annual 12-month cockpit grid */
.vnl-yc{margin:14px 0 18px}
.vnl-yc-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.vnl-yc-title{font-weight:800;font-size:14px}
.vnl-yc-sum{display:inline-flex;gap:6px;flex-wrap:wrap}
.vnl-yc-chip{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;border-radius:var(--vnl-pill);background:rgba(255,255,255,.07)}
.vnl-yc-chip.is-ok{background:color-mix(in srgb,#3ecf8e 26%,transparent);background:color-mix(in srgb,var(--vnl-ok,#3ecf8e) 26%,transparent)}
.vnl-yc-chip.is-warn{background:color-mix(in srgb,#e8b341 30%,transparent);background:color-mix(in srgb,var(--vnl-warn,#e8b341) 30%,transparent)}
.vnl-yc-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-gap:6px;gap:6px}
.vnl-yc-cell{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:10px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#fff;cursor:pointer;min-width:0}
.vnl-yc-cell:hover{background:rgba(255,255,255,.1)}
.vnl-yc-cell.is-empty{opacity:.45}
.vnl-yc-cell.is-current{outline:2px solid #8A6BFF;outline:2px solid var(--vnl-accent-organisation,#7c6cff)}
.vnl-yc-cell.has-anom{border-color:color-mix(in srgb,#e8b341 60%,transparent);border-color:color-mix(in srgb,var(--vnl-warn,#e8b341) 60%,transparent)}
.vnl-yc-cell.is-r6,.vnl-yc-cell.is-r7,.vnl-yc-cell.is-r8,.vnl-yc-cell.is-r9{background:color-mix(in srgb,#3ecf8e 22%,transparent);background:color-mix(in srgb,var(--vnl-ok,#3ecf8e) 22%,transparent)}
.vnl-yc-cell.is-r3,.vnl-yc-cell.is-r4,.vnl-yc-cell.is-r5{background:color-mix(in srgb,#8A6BFF 20%,transparent);background:color-mix(in srgb,var(--vnl-accent-organisation,#7c6cff) 20%,transparent)}
.vnl-yc-m{font-size:11px;font-weight:700;text-transform:capitalize}
.vnl-yc-n{font-size:13px;font-weight:800}
.vnl-yc-dot{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:#e8b341;background:var(--vnl-warn,#e8b341)}
@media (max-width:760px){.vnl-yc-grid{grid-template-columns:repeat(6,1fr)}}
.vnl-yc-ctrl{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.vnl-yc-ctrl svg{width:14px;height:14px;vertical-align:-2px}
.vnl-dash-period{font-weight:700;color:#fff;font-size:17px;text-transform:capitalize}
.vnl-dash-status{font-size:12px;font-weight:700;padding:5px 13px;border-radius:999px;border-radius:var(--vnl-pill);
  background:rgba(255,255,255,.1);color:#cdd6f4}
.vnl-dash-status.is-r0{background:rgba(148,163,184,.2);color:#cbd5e1}
.vnl-dash-status.is-r1{background:color-mix(in srgb,#3965FF 28%,transparent);background:color-mix(in srgb,var(--vnl-accent-it) 28%,transparent);color:#bcd0ff}
.vnl-dash-status.is-r2{background:rgba(245,158,11,.2);color:#fbbf24}
.vnl-dash-status.is-r3{background:color-mix(in srgb,#22D3EE 28%,transparent);background:color-mix(in srgb,var(--vnl-accent-reporting) 28%,transparent);color:#a7f3eb}
.vnl-dash-status.is-r4{background:color-mix(in srgb,#01B574 30%,transparent);background:color-mix(in srgb,var(--vnl-accent-payroll) 30%,transparent);color:#86efc4}
.vnl-dash-h{font-family:var(--vnl-font-body);font-size:12px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:#97a3c4;margin:8px 0 -2px}
.vnl-shell[data-vnl-theme="light"] .vnl-dash-period{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-dash-h{color:#5a648a}

/* ----- payroll cycle (A→Z stepper) ----- */
.vnl-cyc-nav{display:flex;align-items:center;gap:10px;flex:none}
/* period selector on its own row below the head — never under the floating pill */
.vnl-period-bar{display:flex;justify-content:flex-end;align-items:center;margin:-4px 0 22px}
/* cross-page workflow links — jump to a related panel, carrying the shared period */
.vnl-wf{display:flex;gap:10px;flex-wrap:wrap;margin:-8px 0 18px}
.vnl-cyc-link{background:none;border:0;cursor:pointer;padding:5px 9px;border-radius:9px;
  font:600 12.5px var(--vnl-font-body);letter-spacing:.1px;
  color:#01B574;
  color:var(--vnl-seal-accent,var(--vnl-accent-payroll));transition:background .15s ease}
.vnl-cyc-link:hover{background:color-mix(in srgb,#01B574 16%,transparent);background:color-mix(in srgb,var(--vnl-seal-accent,var(--vnl-accent-payroll)) 16%,transparent)}
.vnl-shell[data-vnl-mode="sober"] .vnl-cyc-link{transition:none}
.vnl-cyc-navbtn{width:36px;height:36px;flex:none;border-radius:11px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);color:#cdd6f4;display:grid;place-items:center;cursor:pointer}
.vnl-cyc-navbtn:hover{background:rgba(255,255,255,.09);color:#fff}
.vnl-cyc-navbtn svg{width:18px;height:18px}
.vnl-cyc-period{min-width:152px;text-align:center;font-weight:700;color:#fff;font-size:15px;text-transform:capitalize}
.vnl-cyc-banner{display:flex;align-items:center;gap:9px;margin-bottom:16px;padding:12px 16px;border-radius:12px;
  font-size:13px;font-weight:600;color:#fbbf24;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3)}
.vnl-cyc-banner svg,.vnl-cyc-err svg{width:16px;height:16px;flex:none}
.vnl-cyc-err{display:flex;align-items:center;gap:9px;margin-bottom:16px;padding:12px 16px;border-radius:12px;
  font-size:13px;color:#fca5a5;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3)}
.vnl-cyc-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-width:760px}
.vnl-cyc-step{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.vnl-cyc-step.is-active{border-color:color-mix(in srgb,#01B574 55%,transparent);border-color:color-mix(in srgb,var(--vnl-accent-payroll) 55%,transparent);background:rgba(255,255,255,.06)}
.vnl-cyc-dot{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:13px;font-weight:700;color:#97a3c4;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.vnl-cyc-step.is-done .vnl-cyc-dot{color:#fff;border-color:transparent;
  background:linear-gradient(135deg,#01B574,color-mix(in srgb,#01B574 55%,#000));
  background:linear-gradient(135deg,var(--vnl-accent-payroll),color-mix(in srgb,var(--vnl-accent-payroll) 55%,#000))}
.vnl-cyc-dot svg{width:16px;height:16px}
.vnl-cyc-labelwrap{flex:1 1;min-width:0;display:flex;flex-direction:column;gap:2px}
.vnl-cyc-label{font-weight:600;color:#eaeefb}
.vnl-cyc-desc{font-size:12px;font-weight:400;color:#97a3c4;line-height:1.4}
.vnl-shell[data-vnl-theme="light"] .vnl-cyc-desc{color:#5a648a}
.vnl-cyc-state{flex:none;display:flex;align-items:center}
.vnl-cyc-tag{font-size:12px;color:#6b769a}
.vnl-cyc-tag.is-done{color:#34d399}
.vnl-cyc-do{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;border-radius:999px;border-radius:var(--vnl-pill);
  border:0;cursor:pointer;font:700 13px var(--vnl-font-body);color:#fff;
  background:linear-gradient(135deg,#01B574,#3965FF);
  background:linear-gradient(135deg,var(--vnl-accent-payroll),var(--vnl-accent-it))}
.vnl-cyc-do:disabled{opacity:.6;cursor:default}
.vnl-cyc-do svg{width:15px;height:15px}
.vnl-spin{animation:vnl-spin .8s linear infinite}
@keyframes vnl-spin{to{transform:rotate(360deg)}}

/* ----- X10 zero-touch pilot (col 2, under the step rail) ----- */
.vnl-pilot{display:flex;flex-direction:column;gap:10px;margin:12px 0 6px;max-width:760px}
.vnl-pilot-run{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:0 16px;cursor:pointer;
  font:700 13px var(--vnl-font-body);color:#fff}
.vnl-pilot-run svg{width:15px;height:15px;flex:none}
.vnl-pilot-journey{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.vnl-pilot-journey h4{margin:0;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8b96b8}
.vnl-pilot-hops{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.vnl-pilot-hop{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;font-size:12.5px;font-weight:600;color:#cfd6ec;line-height:1.4}
.vnl-pilot-hop svg{width:14px;height:14px;flex:none;margin-top:2px}
.vnl-pilot-hop.is-ok svg{color:#34d399}
.vnl-pilot-hop.is-fail svg{color:#fca5a5}
.vnl-pilot-hop.is-fail .vnl-pilot-hop-label{color:#fca5a5}
.vnl-pilot-hop-error{display:block;flex-basis:100%;color:#fca5a5;font-size:11.5px;font-weight:600}
.vnl-pilot-stop{padding:9px 12px;border-radius:11px;font-size:12.5px;font-weight:700;color:#ffd28a;
  background:rgba(255,180,80,.09);border:1px solid rgba(255,180,80,.22);line-height:1.4}

/* ----- pending absences ----- */
.vnl-abs{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.vnl-abs-acts{display:flex;gap:8px;flex:none}
.vnl-abs-approve,.vnl-abs-reject{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;border-radius:var(--vnl-pill);
  font-weight:600;font-size:13px;cursor:pointer;border:1px solid transparent}
.vnl-abs-approve{background:color-mix(in srgb,#34d399 24%,transparent);border-color:color-mix(in srgb,#34d399 50%,transparent);color:#fff}
.vnl-abs-approve:hover{background:color-mix(in srgb,#34d399 36%,transparent)}
.vnl-abs-reject{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff}
.vnl-abs-reject:hover{background:rgba(255,255,255,.12)}
.vnl-abs-approve:disabled,.vnl-abs-reject:disabled{opacity:.5;cursor:default}
.vnl-abs-approve svg,.vnl-abs-reject svg{width:15px;height:15px}
/* ----- Notifications inbox ----- */
.vnl-notif{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.vnl-notif.is-unread{background:rgba(255,255,255,.06);border-color:color-mix(in srgb,#3965FF 40%,transparent);border-color:color-mix(in srgb,var(--vnl-accent-it) 40%,transparent)}
.vnl-notif-dot{flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:transparent}
.vnl-notif.is-unread .vnl-notif-dot{background:#3965FF;background:var(--vnl-accent-it)}
.vnl-notif-main{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1}
.vnl-notif-title{font-weight:700;color:#fff}
.vnl-notif-msg{font-size:13.5px;color:rgba(255,255,255,.82);line-height:1.45}
.vnl-notif-time{font-size:11.5px;opacity:.6}
.vnl-notif-read{flex:none;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border-radius:var(--vnl-pill);
  font-size:12.5px;font-weight:600;cursor:pointer;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff}
.vnl-notif-read:hover{background:rgba(255,255,255,.12)}
.vnl-notif-read:disabled{opacity:.5;cursor:default}
.vnl-notif-read svg{width:14px;height:14px}
/* ----- Time clock ----- */
.vnl-tc-status{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
  padding:18px 20px;margin-bottom:16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.vnl-tc-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;border-radius:var(--vnl-pill);font-weight:700;color:#fff;background:rgba(255,255,255,.1)}
.vnl-tc-badge svg{width:17px;height:17px}
.vnl-tc-badge--working{background:color-mix(in srgb,#34d399 28%,transparent)}
.vnl-tc-badge--on_break{background:color-mix(in srgb,#fbbf24 28%,transparent)}
.vnl-tc-badge--clocked_out{background:color-mix(in srgb,#A78BFA 26%,transparent);background:color-mix(in srgb,var(--vnl-accent-self_service,#7c6cff) 26%,transparent)}
.vnl-tc-hours{display:flex;gap:24px}
.vnl-tc-hours div{display:flex;flex-direction:column}
.vnl-tc-hours b{font-size:20px;font-weight:800;color:#fff}
.vnl-tc-hours span{font-size:12px;opacity:.7}
.vnl-tc-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.vnl-tc-btn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:999px;border-radius:var(--vnl-pill);
  font-weight:700;font-size:15px;cursor:pointer;border:1px solid transparent;color:#fff}
.vnl-tc-btn--primary{background:color-mix(in srgb,#A78BFA 30%,transparent);background:color-mix(in srgb,var(--vnl-accent-self_service,#7c6cff) 30%,transparent);
  border-color:color-mix(in srgb,#A78BFA 55%,transparent);
  border-color:color-mix(in srgb,var(--vnl-accent-self_service,#7c6cff) 55%,transparent)}
.vnl-tc-btn--primary:hover{background:color-mix(in srgb,#A78BFA 42%,transparent);background:color-mix(in srgb,var(--vnl-accent-self_service,#7c6cff) 42%,transparent)}
.vnl-tc-btn--ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.vnl-tc-btn--ghost:hover{background:rgba(255,255,255,.12)}
.vnl-tc-btn:disabled{opacity:.5;cursor:default}
.vnl-tc-btn svg{width:18px;height:18px}
.vnl-tc-timeline{margin-top:6px}
.vnl-tc-entry{display:flex;align-items:center;gap:14px;padding:10px 14px;margin-bottom:6px;border-radius:10px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.vnl-tc-entry-time{font-weight:700;color:#fff;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.vnl-tc-entry-type{opacity:.82}
.vnl-abs-main{flex:1 1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.vnl-abs-emp{font-weight:700;color:#fff}
.vnl-abs-dept{font-size:12px;color:#97a3c4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-abs-days{flex:none;font-weight:700;color:#fff;font-size:14px}
.vnl-abs-type{flex:none;font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;border-radius:var(--vnl-pill);
  background:color-mix(in srgb,#7551FF 24%,transparent);
  background:color-mix(in srgb,var(--vnl-accent-hr) 24%,transparent);color:#c9b8ff}
.vnl-balsec{margin-top:26px}
.vnl-balsec-h{font-size:15px;font-weight:700;color:#fff;margin:0 0 12px}
.vnl-bals{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));grid-gap:12px;gap:12px}
.vnl-bal{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.vnl-bal-type{font-size:12px;font-weight:600;color:#97a3c4}
.vnl-bal-rem{font-size:22px;font-weight:800;color:#fff}
.vnl-bal-rem small{font-size:13px;font-weight:600;color:#97a3c4}
.vnl-bal-used{font-size:12px;color:#8b96b8}
.vnl-shell[data-vnl-theme="light"] .vnl-balsec-h{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-bal{background:#fff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-bal-rem{color:#0f1838}
/* clickable rows (employee list → dossier detail) */
.vnl-abs.is-click{cursor:pointer;transition:background .15s,border-color .15s}
.vnl-abs.is-click:hover{background:rgba(255,255,255,.07);border-color:color-mix(in srgb,#7551FF 40%,transparent);border-color:color-mix(in srgb,var(--vnl-accent-hr) 40%,transparent)}
.vnl-abs.is-click:focus-visible{outline:none;border-color:color-mix(in srgb,#7551FF 60%,transparent);border-color:color-mix(in srgb,var(--vnl-accent-hr) 60%,transparent);
  box-shadow:0 0 0 2px color-mix(in srgb,#7551FF 40%,transparent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--vnl-accent-hr) 40%,transparent)}

/* ----- employee dossier (detail fiche) ----- */
.vnl-doss{max-width:680px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:20px;border-radius:var(--vnl-radius);padding:26px}
.vnl-doss-hd{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.vnl-doss-ava{width:60px;height:60px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;
  font:800 20px var(--vnl-font-body);background:linear-gradient(135deg,#7551FF,#3965FF);background:linear-gradient(135deg,var(--vnl-accent-hr),var(--vnl-accent-it))}
.vnl-doss-id{min-width:0}
.vnl-doss-name{font-size:22px;font-weight:600;color:#fff!important;margin:0}
.vnl-doss-role{font-size:14px;color:#97a3c4;margin:3px 0 0}
.vnl-doss-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:12px;gap:12px}
@media (max-width:560px){.vnl-doss-grid{grid-template-columns:1fr}}
/* ----- Support / Ticketing screen ----- */
.vnl-sup-tabs{display:flex;gap:8px;margin-bottom:18px}
.vnl-sup-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px;align-items:center}
.vnl-sup-search{flex:1 1;min-width:200px}
.vnl-sup-filter select{padding:9px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);color:#fff;font-size:13px}
.vnl-sup-tab{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border-radius:var(--vnl-pill);
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:rgba(255,255,255,.85);font-weight:600;cursor:pointer}
.vnl-sup-tab:hover{background:rgba(255,255,255,.1)}
.vnl-sup-tab.is-on{background:color-mix(in srgb,#3965FF 26%,transparent);background:color-mix(in srgb,var(--vnl-accent-it) 26%,transparent);border-color:#3965FF;border-color:var(--vnl-accent-it);color:#fff}
.vnl-sup-tab svg{width:16px;height:16px}
.vnl-sup-wide{grid-column:1/-1}
.vnl-sup-textarea{width:100%;resize:vertical;font:inherit;color:#fff;color:var(--vnl-field-ink);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:10px 12px}
.vnl-sup-ok{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:10px 14px;border-radius:12px;font-weight:600;
  color:#fff;background:color-mix(in srgb,#3965FF 22%,transparent);background:color-mix(in srgb,var(--vnl-accent-it) 22%,transparent);border:1px solid #3965FF;border:1px solid var(--vnl-accent-it)}
.vnl-sup-ok svg{width:18px;height:18px}
.vnl-sup-link{margin-left:auto;background:none;border:0;color:#fff;font-weight:700;cursor:pointer;text-decoration:underline}
.vnl-sup-context{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px;padding:11px 14px;border-radius:12px;
  background:rgba(255,255,255,.055);border:1px solid color-mix(in srgb,#3965FF 28%,rgba(255,255,255,.08));border:1px solid color-mix(in srgb,var(--vnl-accent-it) 28%,rgba(255,255,255,.08));color:rgba(255,255,255,.9)}
.vnl-sup-context b{flex:none;color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.vnl-sup-context dl{display:flex;flex-wrap:wrap;gap:8px 14px;margin:0}
.vnl-sup-context dt{font-size:11.5px;opacity:.64}
.vnl-sup-context dd{margin:0;font-size:12.5px;font-weight:700;color:#fff}
.vnl-sup-context--detail{margin-top:0}
.vnl-sup-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 16px;border-radius:14px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#fff;cursor:pointer}
.vnl-sup-row:hover{background:rgba(255,255,255,.08)}
.vnl-sup-row-main{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1}
.vnl-sup-row-title{font-weight:700}
.vnl-sup-row-meta{font-size:12.5px;opacity:.72}
.vnl-sup-badge{flex:none;padding:4px 10px;border-radius:999px;border-radius:var(--vnl-pill);font-size:12px;font-weight:700;
  background:rgba(255,255,255,.12);color:#fff;white-space:nowrap}
.vnl-sup-badge--resolved,.vnl-sup-badge--closed{background:color-mix(in srgb,#34d399 26%,transparent)}
.vnl-sup-badge--intake,.vnl-sup-badge--luna_thinking{background:color-mix(in srgb,#3965FF 30%,transparent);background:color-mix(in srgb,var(--vnl-accent-it) 30%,transparent)}
.vnl-sup-badge--approved,.vnl-sup-badge--reimbursed{background:color-mix(in srgb,#34d399 26%,transparent)}
.vnl-sup-badge--rejected{background:color-mix(in srgb,#f87171 26%,transparent)}
.vnl-sup-badge--submitted{background:color-mix(in srgb,#fbbf24 24%,transparent)}
.vnl-sup-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;background:none;border:0;color:rgba(255,255,255,.85);font-weight:600;cursor:pointer}
.vnl-sup-back:hover{color:#fff}
.vnl-sup-back svg{width:16px;height:16px}
.vnl-sup-body{margin:0 0 18px;line-height:1.55;color:rgba(255,255,255,.9);white-space:pre-wrap}
.vnl-sup-thread{margin-top:8px}
.vnl-sup-comment{display:flex;flex-direction:column;gap:3px;padding:10px 14px;margin-bottom:8px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.vnl-sup-comment-body{color:#fff;line-height:1.5;white-space:pre-wrap}
.vnl-sup-comment-meta{font-size:11.5px;opacity:.6}
.vnl-sup-commentform{display:flex;gap:8px;margin-top:12px}
.vnl-sup-commentform .vnl-edit-in{flex:1 1}
.vnl-sup-actions{margin:0 0 18px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.vnl-sup-actions-hint{margin:0 0 12px;line-height:1.5;color:rgba(255,255,255,.85)}
.vnl-sup-actions-row{display:flex;flex-wrap:wrap;gap:10px}
.vnl-sup-reopen{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border-radius:var(--vnl-pill);
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font-weight:600;cursor:pointer}
.vnl-sup-reopen:hover{background:rgba(255,255,255,.12)}
.vnl-sup-reopen:disabled{opacity:.5;cursor:default}
.vnl-sup-reopen svg{width:16px;height:16px}
.vnl-sup-attach{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 10px}
.vnl-sup-attach-hint{font-size:12.5px;opacity:.7}
.vnl-sup-attach-list{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:6px}
.vnl-sup-attach-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#fff}
.vnl-sup-attach-item svg{width:15px;height:15px;flex:none;opacity:.85}
.vnl-sup-attach-name{flex:1 1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
.vnl-sup-attach-rm{flex:none;width:26px;height:26px;display:grid;place-items:center;border:0;border-radius:50%;
  background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
.vnl-sup-attach-rm:hover{background:rgba(255,255,255,.16)}
.vnl-doss-item{display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:13px;
  background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.06);min-width:0}
.vnl-doss-item svg{width:17px;height:17px;flex:none;color:#7551FF;color:var(--vnl-accent-hr)}
.vnl-doss-val{font-size:14px;color:#eaeefb;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-doss-item.is-editable .vnl-doss-val{overflow:visible;white-space:normal}
.vnl-doss-acts{margin-left:auto;display:inline-flex;gap:4px;opacity:0;transition:opacity .12s ease;flex:none}
.vnl-doss-item.is-editable:hover .vnl-doss-acts,.vnl-doss-item.is-wide .vnl-doss-acts{opacity:1}
.vnl-doss-act{width:26px;height:26px;flex:none;display:grid;place-items:center;border:0;border-radius:7px;background:rgba(255,255,255,.06);color:#a3aed0;cursor:pointer;transition:background .12s ease}
.vnl-doss-act:hover{background:rgba(255,255,255,.14);color:#fff}
.vnl-doss-act svg{width:14px;height:14px}
.vnl-doss-item.is-editing,.vnl-doss-item.is-wide{grid-column:1 / -1;align-items:flex-start;flex-wrap:wrap}
.vnl-edit{flex:1 1;min-width:0;display:flex;flex-direction:column;gap:8px}
.vnl-edit-lbl{font-size:12px;font-weight:600;color:#97a3c4}
.vnl-edit-in{padding:9px 11px;border-radius:9px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25);color:#eaeefb;font-family:inherit;font-size:14px;width:100%}
.vnl-edit-in:focus{outline:none;border-color:#7551FF;border-color:var(--vnl-accent-hr)}
.vnl-edit-eff{display:flex;flex-direction:column;gap:5px;font-size:12px;color:#97a3c4;font-weight:600}
.vnl-edit-err{font-size:12px;color:#ff9a9a;font-weight:600}
.vnl-edit-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:2px}
.vnl-edit-cancel{padding:7px 14px;border-radius:999px;border-radius:var(--vnl-pill);border:1px solid rgba(255,255,255,.14);background:transparent;color:#a3aed0;font:600 13px var(--vnl-font-body);cursor:pointer}
.vnl-edit-cancel:hover:not(:disabled){color:#fff;background:rgba(255,255,255,.08)}
.vnl-edit-save{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:999px;border-radius:var(--vnl-pill);border:0;background:linear-gradient(135deg,#7551FF,#3965FF);background:linear-gradient(135deg,var(--vnl-accent-hr),var(--vnl-accent-it));color:#fff;font:700 13px var(--vnl-font-body);cursor:pointer}
.vnl-edit-save:disabled,.vnl-edit-cancel:disabled{opacity:.6;cursor:default}
.vnl-edit-save svg{width:15px;height:15px}
.vnl-hist{flex-basis:100%;margin-top:10px;display:flex;flex-direction:column;gap:6px}
.vnl-hist-row{display:flex;flex-wrap:wrap;gap:10px;font-size:13px;padding:7px 11px;border-radius:8px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.05)}
.vnl-hist-date{color:#97a3c4;min-width:96px}
.vnl-hist-val{color:#eaeefb;font-weight:600}
.vnl-hist-reason{color:#8b96b8}
.vnl-hist-empty{flex-basis:100%;margin-top:8px;font-size:13px;color:#8b96b8}
.vnl-combo{position:relative;display:flex;flex-direction:column;gap:6px}
.vnl-combo-list{max-height:188px;overflow:auto;display:flex;flex-direction:column;gap:2px;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:5px;background:rgba(0,0,0,.28)}
.vnl-combo-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px;border:0;border-radius:7px;background:transparent;color:#cfd6ee;font:600 13.5px var(--vnl-font-body);cursor:pointer;text-align:left}
.vnl-combo-opt:hover{background:rgba(255,255,255,.08);color:#fff}
.vnl-combo-opt.is-sel{background:rgba(117,81,255,.30);color:#fff}
.vnl-combo-code{font-size:11px;color:#8b96b8;font-weight:700;letter-spacing:.04em}
.vnl-addr-npa{position:relative;display:flex;flex-direction:column;gap:6px}
.vnl-addr-sugg{position:absolute;top:100%;left:0;right:0;z-index:5;margin-top:4px;box-shadow:0 12px 32px rgba(0,0,0,.4)}
.vnl-addr-hint{font-size:12px;color:#8b96b8}
.vnl-addr-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:8px;gap:8px}
.vnl-shell[data-vnl-theme="light"] .vnl-addr-sugg{box-shadow:0 12px 32px rgba(20,30,60,.18)}
.vnl-shell[data-vnl-theme="light"] .vnl-combo-list{background:#f4f6fc;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-combo-opt{color:#1a2340}
.vnl-shell[data-vnl-theme="light"] .vnl-doss-act{background:#eef1f8;color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-doss-act:hover{background:#e2e7f3;color:#1a2340}
.vnl-shell[data-vnl-theme="light"] .vnl-edit-in{background:#f4f6fc;border-color:rgba(20,30,60,.12);color:#1a2340}
.vnl-shell[data-vnl-theme="light"] .vnl-hist-row{background:#f4f6fc;border-color:rgba(20,30,60,.06)}
.vnl-shell[data-vnl-theme="light"] .vnl-hist-val{color:#1a2340}
.vnl-shell[data-vnl-theme="light"] .vnl-doss{background:#fff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-doss-name{color:#0f1838!important}
.vnl-shell[data-vnl-theme="light"] .vnl-doss-role{color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-doss-item{background:#f4f6fc;border-color:rgba(20,30,60,.08)}
.vnl-shell[data-vnl-theme="light"] .vnl-doss-val{color:#1a2340}

/* ----- dossier photo upload/delete (A-MR-03e, license-first) ----- */
.vnl-doss-photoctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-8px 0 20px 76px}
@media (max-width:560px){.vnl-doss-photoctl{margin-left:0}}
.vnl-doss-photoinput{display:none}
.vnl-doss-photobtn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border-radius:var(--vnl-pill);
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#eaeefb;
  font:600 13px var(--vnl-font-body);cursor:pointer;transition:background .15s cubic-bezier(.22,.61,.36,1);transition:background .15s var(--vnl-ease,ease)}
.vnl-doss-photobtn:hover:not(:disabled){background:rgba(255,255,255,.12)}
.vnl-doss-photobtn:disabled{opacity:.6;cursor:default}
.vnl-doss-photobtn svg{width:16px;height:16px}
.vnl-doss-photodel{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(255,90,90,.3);background:rgba(255,90,90,.1);color:#ff8a8a;cursor:pointer;transition:background .15s cubic-bezier(.22,.61,.36,1);transition:background .15s var(--vnl-ease,ease)}
.vnl-doss-photodel:hover:not(:disabled){background:rgba(255,90,90,.2)}
.vnl-doss-photodel:disabled{opacity:.6;cursor:default}
.vnl-doss-photodel svg{width:16px;height:16px}
.vnl-doss-photoerr{font-size:13px;color:#ff9a9a;font-weight:600}
.vnl-shell[data-vnl-theme="light"] .vnl-doss-photobtn{background:#f4f6fc;border-color:rgba(20,30,60,.1);color:#1a2340}
.vnl-shell[data-vnl-theme="light"] .vnl-doss-photobtn:hover:not(:disabled){background:#e9edf8}
.vnl-shell[data-vnl-theme="light"] .vnl-doss-photoerr{color:#c0392b}
.vnl-doss-pin{margin-left:auto;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);color:#9aa5c4;cursor:pointer;transition:background .15s cubic-bezier(.22,.61,.36,1),color .15s cubic-bezier(.22,.61,.36,1);transition:background .15s var(--vnl-ease,ease),color .15s var(--vnl-ease,ease)}
.vnl-doss-pin:hover,.vnl-doss-pin.is-on{background:rgba(255,205,90,.14);color:#ffd28a;border-color:rgba(255,205,90,.3)}
.vnl-doss-pin svg{width:18px;height:18px}
.vnl-doss-pins{display:flex;flex-direction:column;gap:10px;margin:0 0 16px;padding:14px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));border:1px solid rgba(255,255,255,.09)}
.vnl-doss-pins h2{display:flex;align-items:center;gap:8px;margin:0;color:#fff;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.5px}
.vnl-doss-pins h2 svg{width:15px;height:15px;color:#ffd28a}
.vnl-doss-pins-row{display:flex;gap:9px;overflow:auto;padding-bottom:2px}
.vnl-doss-pinitem{display:flex;align-items:center;gap:9px;min-width:210px;max-width:260px;padding:9px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);color:inherit;cursor:pointer;text-align:left}
.vnl-doss-pinitem b{display:block;color:#fff;font-size:13px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-doss-pinitem small{display:block;margin-top:2px;color:#8b96b8;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-shell[data-vnl-theme="light"] .vnl-doss-pin{background:#f4f6fc;border-color:rgba(20,30,60,.12);color:#6a7391}
.vnl-shell[data-vnl-theme="light"] .vnl-doss-pin:hover,.vnl-shell[data-vnl-theme="light"] .vnl-doss-pin.is-on{background:#fff7df;color:#b7791f;border-color:#f3cf7a}
.vnl-shell[data-vnl-theme="light"] .vnl-doss-pins,.vnl-shell[data-vnl-theme="light"] .vnl-doss-pinitem{background:#fff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-doss-pins h2,.vnl-shell[data-vnl-theme="light"] .vnl-doss-pinitem b{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-doss-pinitem small{color:#5a648a}

/* ----- employee creation (F008, A-MR-05b) ----- */
.vnl-emp-add{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border-radius:var(--vnl-pill);
  border:0;background:linear-gradient(135deg,#7551FF,#3965FF);background:linear-gradient(135deg,var(--vnl-accent-hr),var(--vnl-accent-it));color:#fff;
  font:700 13px var(--vnl-font-body);cursor:pointer;transition:filter .15s cubic-bezier(.22,.61,.36,1);transition:filter .15s var(--vnl-ease,ease)}
.vnl-emp-add:hover{filter:brightness(1.08)}
.vnl-emp-add svg{width:16px;height:16px}
.vnl-emp-create{max-width:780px;margin-bottom:20px;padding:20px;border-radius:16px;
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08)}
.vnl-emp-create-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.vnl-emp-create-title{font-family:var(--vnl-font-body);font-size:18px;font-weight:700;color:#fff!important;margin:0}
.vnl-emp-create-x{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:50%;border:0;
  background:rgba(255,255,255,.06);color:#a3aed0;cursor:pointer;transition:background .15s cubic-bezier(.22,.61,.36,1);transition:background .15s var(--vnl-ease,ease)}
.vnl-emp-create-x:hover{background:rgba(255,255,255,.12);color:#fff}
.vnl-emp-create-x svg{width:16px;height:16px}
.vnl-emp-create-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:14px;gap:14px}
@media (max-width:560px){.vnl-emp-create-grid{grid-template-columns:1fr}}
.vnl-emp-fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.vnl-emp-fld span{font-size:12px;font-weight:600;color:#97a3c4}
.vnl-emp-fld input{padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.2);color:#fff;color:var(--vnl-field-ink);font-size:14px;font-family:inherit}
.vnl-emp-fld input:focus{outline:none;border-color:#7551FF;border-color:var(--vnl-accent-hr)}
.vnl-emp-create-err{margin-top:14px;font-size:13px;font-weight:600;color:#ff9a9a}
.vnl-emp-create-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.vnl-emp-create-cancel{padding:9px 16px;border-radius:999px;border-radius:var(--vnl-pill);border:1px solid rgba(255,255,255,.12);
  background:transparent;color:#a3aed0;font:600 13px var(--vnl-font-body);cursor:pointer}
.vnl-emp-create-cancel:hover:not(:disabled){color:#fff;background:rgba(255,255,255,.08)}
.vnl-emp-create-submit{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;border-radius:var(--vnl-pill);border:0;
  background:linear-gradient(135deg,#7551FF,#3965FF);
  background:linear-gradient(135deg,var(--vnl-accent-hr),var(--vnl-accent-it));color:#fff;
  font:700 13px var(--vnl-font-body);cursor:pointer;transition:filter .15s cubic-bezier(.22,.61,.36,1);transition:filter .15s var(--vnl-ease,ease)}
.vnl-emp-create-submit:hover:not(:disabled){filter:brightness(1.08)}
.vnl-emp-create-submit:disabled,.vnl-emp-create-cancel:disabled{opacity:.6;cursor:default}
.vnl-emp-create-submit svg{width:16px;height:16px}
.vnl-shell[data-vnl-theme="light"] .vnl-emp-create{background:#fff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-emp-create-title{color:#0f1838!important}
.vnl-shell[data-vnl-theme="light"] .vnl-emp-fld input{background:#f4f6fc;border-color:rgba(20,30,60,.12)}
/* light-Lumina a11y: the emp-fld LABEL (pale #97a3c4 → 2.5 on light) + the support "reopen /
   attach" secondary button (white-on-transparent = white-on-white, ratio 1.0). */
.vnl-shell[data-vnl-theme="light"] .vnl-emp-fld span{color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-sup-reopen{color:#3a4a6a;background:#fff;border-color:rgba(20,30,60,.14)}
.vnl-shell[data-vnl-theme="light"] .vnl-emp-create-x{background:#eef1f8;color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-emp-create-cancel{color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-emp-create-err{color:#c0392b}

.vnl-emp-bundle{margin-bottom:20px;padding:20px;border-radius:16px;
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08)}
.vnl-bundle-sub{margin:5px 0 0;color:#97a3c4;font-size:13px;line-height:1.45}
.vnl-emp-bundle-board{display:grid;grid-template-columns:minmax(240px,1fr) minmax(240px,1fr) minmax(320px,1.35fr) minmax(240px,1fr);grid-gap:14px;gap:14px;align-items:start}
.vnl-bundle-col{border-radius:14px}
.vnl-bundle-col--wide{min-height:420px}
.vnl-bundle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:10px;gap:10px}
.vnl-bundle-field{min-width:0;display:flex;flex-direction:column;gap:6px}
.vnl-bundle-field.ag-field{margin-bottom:0}
.vnl-bundle-field--full{grid-column:1 / -1}
.vnl-bundle-field label{display:flex;flex-direction:column;gap:6px;min-width:0}
.vnl-bundle-fieldtop{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#97a3c4;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.35px}
.vnl-bundle-fieldtop em{font-style:normal;font-size:10px;color:#7ee0a8;text-transform:none;letter-spacing:0}
.vnl-bundle-field input,.vnl-bundle-field select{width:100%;min-width:0;padding:10px 11px;border-radius:10px;border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.2);color:#fff;color:var(--vnl-field-ink);font:600 13px var(--vnl-font-body)}
.vnl-bundle-field.is-filled input,.vnl-bundle-field.is-filled select{border-color:color-mix(in srgb,#7551FF 54%,transparent);border-color:color-mix(in srgb,var(--vnl-accent-hr,#7ee0a8) 54%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,#7551FF 24%,transparent),0 10px 26px -24px #7551FF;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--vnl-accent-hr,#7ee0a8) 24%,transparent),0 10px 26px -24px var(--vnl-accent-hr,#7ee0a8)}
.vnl-bundle-field .vnl-prov-suffix.ag-tag{margin-left:6px;letter-spacing:0;text-transform:none;vertical-align:middle}
.vnl-bundle-field input:disabled{opacity:.6}
.vnl-bundle-field input:focus,.vnl-bundle-field select:focus{outline:none;border-color:#7551FF;border-color:var(--vnl-accent-hr,#7ee0a8)}
.vnl-bundle-unknown{display:flex!important;flex-direction:row!important;align-items:center;gap:7px;color:#cfd6ec;font-size:11px;font-weight:700;line-height:1.25}
.vnl-bundle-unknown input{width:14px!important;height:14px!important;padding:0!important;accent-color:#7551FF;accent-color:var(--vnl-accent-hr,#7ee0a8)}
.vnl-bundle-switches{display:flex;flex-direction:column;gap:8px;padding-top:4px}
.vnl-bundle-divider{height:1px;background:rgba(255,255,255,.08);margin:2px 0}
.vnl-bundle-contract{display:flex;flex-direction:column;gap:10px;padding:11px;border-radius:13px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07)}
.vnl-bundle-contract-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vnl-bundle-contract-h b{min-width:0;color:#fff;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-bundle-checklist{display:flex;flex-direction:column;gap:8px;max-height:430px;overflow:auto}
.vnl-bundle-check,.vnl-bundle-ready{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border-radius:10px;
  border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025);font-size:12px;font-weight:800}
.vnl-bundle-check span{min-width:0;color:#dce4ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-bundle-check em{flex:none;font-style:normal;font-size:10px;padding:3px 7px;border-radius:20px;color:#fff;background:rgba(151,163,196,.18)}
.vnl-bundle-check.is-blocking em{background:rgba(255,100,100,.25);color:#ffb0b0}
.vnl-bundle-check.is-payroll_blocking em{background:rgba(255,180,80,.18);color:#ffd28a}
.vnl-bundle-check.is-year_end_warning em{background:rgba(130,155,255,.22);color:#cfd6ff}
.vnl-bundle-check.is-follow_up em{background:rgba(126,224,168,.14);color:#7ee0a8}
.vnl-bundle-ready{justify-content:flex-start;color:#7ee0a8;background:rgba(40,200,120,.08);border-color:rgba(126,224,168,.28)}
.vnl-bundle-ready svg{width:16px;height:16px;flex:none}
.vnl-bundle-actions{flex-wrap:wrap}
.vnl-shell[data-vnl-theme="light"] .vnl-emp-bundle{background:#fff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-bundle-field input,.vnl-shell[data-vnl-theme="light"] .vnl-bundle-field select{background:#f4f6fc;border-color:rgba(20,30,60,.12)}
.vnl-shell[data-vnl-theme="light"] .vnl-bundle-field.is-filled input,.vnl-shell[data-vnl-theme="light"] .vnl-bundle-field.is-filled select{border-color:color-mix(in srgb,#7551FF 46%,rgba(20,30,60,.12));border-color:color-mix(in srgb,var(--vnl-accent-hr,#1b8f5f) 46%,rgba(20,30,60,.12));
  box-shadow:0 0 0 1px color-mix(in srgb,#7551FF 20%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--vnl-accent-hr,#1b8f5f) 20%,transparent)}
.vnl-shell[data-vnl-theme="light"] .vnl-bundle-contract,.vnl-shell[data-vnl-theme="light"] .vnl-bundle-check,.vnl-shell[data-vnl-theme="light"] .vnl-bundle-ready{background:#f7f9ff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-bundle-contract-h b,.vnl-shell[data-vnl-theme="light"] .vnl-bundle-check span{color:#17203a}
@media (prefers-reduced-motion:no-preference){
  .vnl-shell:not([data-vnl-mode="sober"]) .vnl-bundle-field.is-filled{animation:vnl-slot-fill-field .28s ease-out both}
}
.vnl-shell[data-vnl-mode="sober"] .vnl-bundle-field.is-filled,
:root[data-vnl-custom-reduced="on"] .vnl-shell .vnl-bundle-field.is-filled{animation:none}
@keyframes vnl-slot-fill-field{0%{transform:translateY(2px);filter:saturate(1)}55%{transform:translateY(0);filter:saturate(1.24)}100%{transform:none;filter:none}}
@media (max-width:1280px){.vnl-emp-bundle-board{grid-template-columns:repeat(2,minmax(0,1fr))}.vnl-bundle-col--wide{min-height:0}}
@media (max-width:760px){.vnl-emp-bundle-board,.vnl-bundle-grid{grid-template-columns:1fr}.vnl-bundle-field--full{grid-column:auto}.vnl-bundle-contract-h{align-items:flex-start;flex-direction:column}.vnl-bundle-actions{justify-content:flex-start}}

/* ----- employee document area + preview (F011) ----- */
.vnl-doss-docs{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.07)}
.vnl-doss-docs-hd{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.vnl-doss-docs-title{display:inline-flex;align-items:center;gap:9px;margin:0;flex:1 1;
  font-family:var(--vnl-font-body);font-size:15px;font-weight:700;color:#fff!important}
.vnl-doss-docs-title svg{width:17px;height:17px;color:#7551FF;color:var(--vnl-accent-hr)}
.vnl-doss-docs-empty{font-size:13px;color:#8b96b8;padding:14px 4px}
.vnl-doss-docs-split{display:grid;grid-template-columns:1fr 1fr;grid-gap:16px;gap:16px}
@media (max-width:680px){.vnl-doss-docs-split{grid-template-columns:1fr}}
.vnl-doss-docs-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.vnl-doss-doc{display:flex;align-items:center;gap:6px;padding:4px;border-radius:11px;
  background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.06)}
.vnl-doss-doc.is-sel{border-color:#7551FF;border-color:var(--vnl-accent-hr);background:rgba(0,0,0,.28)}
.vnl-doss-doc-main{flex:1 1;min-width:0;display:flex;align-items:center;gap:10px;padding:8px 10px;border:0;
  background:transparent;color:#eaeefb;cursor:pointer;font-family:inherit;text-align:left}
.vnl-doss-doc-main svg{width:16px;height:16px;flex:none;color:#7551FF;color:var(--vnl-accent-hr)}
.vnl-doss-doc-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-doss-doc-size{margin-left:auto;font-size:11px;color:#8b96b8;flex:none}
.vnl-doss-doc-act{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:8px;border:0;
  background:transparent;color:#a3aed0;cursor:pointer;transition:background .15s cubic-bezier(.22,.61,.36,1);transition:background .15s var(--vnl-ease,ease)}
.vnl-doss-doc-act:hover:not(:disabled){background:rgba(255,255,255,.1);color:#fff}
.vnl-doss-doc-act:disabled{opacity:.5;cursor:default}
.vnl-doss-doc-act svg{width:15px;height:15px}
.vnl-doss-doc-del:hover:not(:disabled){background:rgba(255,90,90,.18);color:#ff8a8a}
.vnl-doss-docs-preview{display:grid;place-items:center;min-height:160px;padding:14px;border-radius:13px;
  background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.06)}
.vnl-doss-docs-img{max-width:100%;max-height:320px;border-radius:8px}
.vnl-doss-docs-ph{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:#97a3c4}
.vnl-doss-docs-ph svg{width:40px;height:40px;color:#7551FF;color:var(--vnl-accent-hr)}
.vnl-shell[data-vnl-theme="light"] .vnl-doss-docs{border-top-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-doss-docs-title{color:#0f1838!important}
.vnl-shell[data-vnl-theme="light"] .vnl-doss-doc{background:#f4f6fc;border-color:rgba(20,30,60,.08)}
.vnl-shell[data-vnl-theme="light"] .vnl-doss-doc-main{color:#1a2340}
.vnl-shell[data-vnl-theme="light"] .vnl-doss-docs-preview{background:#f4f6fc;border-color:rgba(20,30,60,.08)}

/* ----- accounting ledger (Finance → Comptabilité) ----- */
.vnl-led{max-width:780px;display:flex;flex-direction:column;gap:8px}
.vnl-led-bal{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;padding:9px 15px;border-radius:999px;border-radius:var(--vnl-pill);
  font-size:13px;font-weight:700;margin-bottom:6px;
  color:#86efc4;background:color-mix(in srgb,#01B574 18%,transparent);background:color-mix(in srgb,var(--vnl-accent-payroll) 18%,transparent);
  border:1px solid color-mix(in srgb,#01B574 35%,transparent);
  border:1px solid color-mix(in srgb,var(--vnl-accent-payroll) 35%,transparent)}
.vnl-led-bal svg{width:16px;height:16px}
.vnl-led-hd,.vnl-led-row{display:grid;grid-template-columns:1fr 110px 110px;grid-gap:14px;gap:14px;align-items:center}
.vnl-led-hd{padding:0 18px 2px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#6b769a}
.vnl-led-hd span:not(:first-child),.vnl-led-amt{text-align:right}
.vnl-led-row{padding:13px 18px;border-radius:13px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.vnl-led-acc{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.vnl-led-code{font-family:var(--vnl-font-body);font-size:11px;color:#6b769a}
.vnl-led-lbl{font-weight:600;color:#eaeefb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-led-amt{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;font-weight:700;color:#eaeefb}
.vnl-led-amt.is-zero{color:#3a4567}
.vnl-shell[data-vnl-theme="light"] .vnl-led-row{background:#fff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-led-lbl,.vnl-shell[data-vnl-theme="light"] .vnl-led-amt{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-led-code,.vnl-shell[data-vnl-theme="light"] .vnl-led-hd{color:#7f8ca8}
.vnl-shell[data-vnl-theme="light"] .vnl-led-amt.is-zero{color:#aab3c9}

/* ----- leave balances ----- */
.vnl-bal{padding:14px 18px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.vnl-bal-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.vnl-bal-type{font-weight:700;color:#fff}
.vnl-bal-rem{font-weight:800;color:#fff;font-size:18px;letter-spacing:-.3px}
.vnl-bal-tot{font-weight:600;color:#97a3c4;font-size:13px}
.vnl-bal-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.08);margin:8px 0 9px;overflow:hidden}
.vnl-bal-bar span{display:block;height:100%;width:0;width:var(--vnl-w,0);border-radius:3px;
  background:linear-gradient(90deg,#01B574,#22D3EE);
  background:linear-gradient(90deg,var(--vnl-accent-payroll),var(--vnl-accent-reporting))}
.vnl-bal-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:#97a3c4}

/* ===== SIGNATURE : sceau souverain guilloché (gravure de sécurité suisse, génératif) =====
   Réplique fidèle du prototype Horizon : hypotrochoïde tournant masqué en fond d'en-tête + agent.
   Couleur pilotée par l'accent courant (--vnl-seal-accent sur .vnl-head ; --vnl-accent sur l'agent). */
.vnl-head{position:relative}
.vnl-head-left,.vnl-headtools{position:relative;z-index:1}
.vnl-headseal{position:absolute;top:-40px;right:-140px;width:420px;height:420px;z-index:0;pointer-events:none;
  color:#7551FF;
  color:var(--vnl-seal-accent,var(--vnl-accent-hr));opacity:.16;
  -webkit-mask:radial-gradient(circle,#000 44%,transparent 74%);mask:radial-gradient(circle,#000 44%,transparent 74%)}
/* anti-lag: cache the seal as a GPU layer so the slow spin is a composited transform,
   not a per-frame re-raster of the hypotrochoid paths. */
.vnl-headseal svg{width:100%;height:100%;animation:vnl-spin 120s linear infinite;will-change:transform}
.vnl-head::after{content:"";position:absolute;left:0;right:0;bottom:-16px;height:1px;z-index:0;
  background:linear-gradient(90deg,color-mix(in srgb,#7551FF 60%,transparent),transparent 52%);
  background:linear-gradient(90deg,color-mix(in srgb,var(--vnl-seal-accent,var(--vnl-accent-hr)) 60%,transparent),transparent 52%)}
.vnl-agentseal{position:absolute;top:50%;left:50%;width:600px;height:600px;transform:translate(-50%,-50%);z-index:0;
  pointer-events:none;color:var(--vnl-accent);opacity:.16;
  -webkit-mask:radial-gradient(circle,#000 52%,transparent 80%);mask:radial-gradient(circle,#000 52%,transparent 80%)}
.vnl-agentseal svg{width:100%;height:100%;animation:vnl-spin 160s linear infinite;will-change:transform}
.vnl-agent-inner{position:relative;z-index:1}
.vnl-shell[data-vnl-theme="light"] .vnl-headseal,
.vnl-shell[data-vnl-theme="light"] .vnl-agentseal{opacity:.12}

/* ===== light theme (data-vnl-theme="light") — cards stay vibrant for delight + legibility ===== */
.vnl-shell[data-vnl-theme="light"]{background:#eef1f9;color:#1a2340}
.vnl-shell[data-vnl-theme="light"] .vnl{background:#eef1f9;color:#1a2340}
.vnl-shell[data-vnl-theme="light"] .vnl-topbar{border-bottom-color:rgba(20,30,60,.1);
  background:linear-gradient(180deg,rgba(20,30,60,.04),transparent)}
.vnl-shell[data-vnl-theme="light"] .vnl-brandname{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-brandtag{color:#6b769a}
.vnl-shell[data-vnl-theme="light"] .vnl-seal{color:#3965ff}
.vnl-shell[data-vnl-theme="light"] .vnl-crumb,
.vnl-shell[data-vnl-theme="light"] .vnl-sub{color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-demo{background:rgba(180,83,9,.12);color:#b45309;border-color:rgba(180,83,9,.3)}
.vnl-shell[data-vnl-theme="light"] .vnl-title{color:#0f1838!important}
.vnl-shell[data-vnl-theme="light"] .vnl-hint{color:#8a93b0}
.vnl-shell[data-vnl-theme="light"] .vnl-search{background:#fff;border-color:rgba(20,30,60,.12)}
.vnl-shell[data-vnl-theme="light"] .vnl-search svg{color:#8a93b0}
.vnl-shell[data-vnl-theme="light"] .vnl-lang-btn,
.vnl-shell[data-vnl-theme="light"] .vnl-gear,
.vnl-shell[data-vnl-theme="light"] .vnl-userchip,
.vnl-shell[data-vnl-theme="light"] .vnl-persona-btn,
.vnl-shell[data-vnl-theme="light"] .vnl-back{background:#fff;border-color:rgba(20,30,60,.12);color:#1a2340}
.vnl-shell[data-vnl-theme="light"] .vnl-lang-btn:hover,
.vnl-shell[data-vnl-theme="light"] .vnl-gear:hover,
.vnl-shell[data-vnl-theme="light"] .vnl-back:hover{background:#f4f6fc;color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-lang-menu{background:#fff;border-color:rgba(20,30,60,.12);box-shadow:0 24px 60px -20px rgba(20,30,60,.25)}
.vnl-shell[data-vnl-theme="light"] .vnl-lang-item{color:#3a4366}
.vnl-shell[data-vnl-theme="light"] .vnl-lang-item:hover{background:rgba(20,30,60,.05);color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-lang-code{color:#9aa3bf}
.vnl-shell[data-vnl-theme="light"] .vnl-persona-name{color:#0f1838}
/* persona chrome — always-visible toolbar labels/badge. The base inks are tuned for the dark
   navbar (#7f8db5 tag, mid-amber dev badge) and fall below WCAG AA on the light navbar
   (measured 3.3 / 2.2). Deepen for the light appearance so the persistent chrome reads AA. */
.vnl-shell[data-vnl-theme="light"] .vnl-persona-tag{color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-persona-dev{color:#b45309;background:rgba(180,83,9,.12)}
.vnl-shell[data-vnl-theme="light"] .vnl-persona-menu{background:#fff;border-color:rgba(20,30,60,.12);box-shadow:0 24px 60px -20px rgba(20,30,60,.25)}
.vnl-shell[data-vnl-theme="light"] .vnl-persona-item{color:#3a4366}
.vnl-shell[data-vnl-theme="light"] .vnl-persona-item:hover{background:rgba(20,30,60,.05);color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-persona-itemname{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-set-row{background:#fff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-set-block{background:#fff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-set-label h3{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-set-label p{color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-set-block-head h2,
.vnl-shell[data-vnl-theme="light"] .vnl-set-card-title{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-set-block-head p,
.vnl-shell[data-vnl-theme="light"] .vnl-set-card-desc{color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-set-card{background:#f4f6fc;border-color:rgba(20,30,60,.08)}
.vnl-shell[data-vnl-theme="light"] .vnl-set-chip{background:#fff;border-color:rgba(20,30,60,.09);color:#3a4366}
.vnl-shell[data-vnl-theme="light"] .vnl-set-card-action{background:#fff;border-color:rgba(20,30,60,.12);color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-tr-table,
.vnl-shell[data-vnl-theme="light"] .vnl-th-custom,
.vnl-shell[data-vnl-theme="light"] .vnl-th-catalog{background:#fff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-tr-row{color:#3a4366}
.vnl-shell[data-vnl-theme="light"] .vnl-tr-head{background:#f4f6fc;color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-th-custom h2,
.vnl-shell[data-vnl-theme="light"] .vnl-th-catalog h2{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-th-custom p{color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-th-field input,
.vnl-shell[data-vnl-theme="light"] .vnl-th-field select{background:#f4f6fc;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-seg{background:rgba(20,30,60,.06);border-color:rgba(20,30,60,.08)}
.vnl-shell[data-vnl-theme="light"] .vnl-seg-btn{color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-seg-btn:hover{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-agent{background:#fff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-agent h2{color:#0f1838!important}
.vnl-shell[data-vnl-theme="light"] .vnl-agent-sub{color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-bar2{background:#f4f6fc;border-color:rgba(20,30,60,.12)}
.vnl-shell[data-vnl-theme="light"] .vnl-empty{color:#5a648a;border-color:rgba(20,30,60,.16)}
.vnl-shell[data-vnl-theme="light"] .vnl-empty h3{color:#0f1838!important}
.vnl-shell[data-vnl-theme="light"] .vnl-pay{background:#fff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-pay-period,
.vnl-shell[data-vnl-theme="light"] .vnl-pay-net{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-pay-gross,
.vnl-shell[data-vnl-theme="light"] .vnl-pay-pdf{color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-pay-status{background:rgba(20,30,60,.08);color:#3a4366}
.vnl-shell[data-vnl-theme="light"] .vnl-kpi,
.vnl-shell[data-vnl-theme="light"] .vnl-dept{background:#fff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-kpi-val,
.vnl-shell[data-vnl-theme="light"] .vnl-dept-name,
.vnl-shell[data-vnl-theme="light"] .vnl-dept-cost{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-kpi-lbl,
.vnl-shell[data-vnl-theme="light"] .vnl-dept-meta{color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-dept-bar{background:rgba(20,30,60,.08)}
.vnl-shell[data-vnl-theme="light"] .vnl-abs{background:#fff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-abs-emp,
.vnl-shell[data-vnl-theme="light"] .vnl-abs-days{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-abs-dept{color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-abs-type{background:color-mix(in srgb,#7551FF 16%,transparent);background:color-mix(in srgb,var(--vnl-accent-hr) 16%,transparent);color:#5b3fd6}
.vnl-shell[data-vnl-theme="light"] .vnl-bal{background:#fff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-bal-type,
.vnl-shell[data-vnl-theme="light"] .vnl-bal-rem{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-bal-tot,
.vnl-shell[data-vnl-theme="light"] .vnl-bal-meta{color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-cyc-navbtn{background:#fff;border-color:rgba(20,30,60,.12);color:#3a4567}
.vnl-shell[data-vnl-theme="light"] .vnl-cyc-period{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-cyc-step{background:#fff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-cyc-label{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-cyc-dot{color:#5a648a;background:rgba(20,30,60,.05);border-color:rgba(20,30,60,.15)}
.vnl-shell[data-vnl-theme="light"] .vnl-bal-bar{background:rgba(20,30,60,.08)}

/* ===== generated LIGHT-canvas themes (UX-4) =====
   A vivid catalogue theme whose derived canvas crosses into light territory renders
   data-vnl-theme="light" (inheriting EVERY light legibility rule above — the proven
   auto-contrast set) plus data-vnl-canvas="light". This rule restores the theme's OWN
   ambient (inline --vnl-ambient from vnextThemeGen) over the flat light canvas, so the
   theme keeps its personality without re-deriving 290 light rules. Must stay AFTER the
   light .vnl rule (same specificity — source order wins). */
.vnl-shell[data-vnl-canvas="light"] .vnl{background:#eef1f9;background:var(--vnl-ambient,#eef1f9)}

/* ===== sober / focus mode (data-vnl-mode="sober") — calmer, less flash, no tilt ===== */
.vnl-shell[data-vnl-mode="sober"] .vnl-card{transform:none!important;
  background:linear-gradient(150deg,color-mix(in srgb,var(--vnl-accent) 46%,#0b1437 54%),color-mix(in srgb,var(--vnl-accent) 24%,#0b1437 76%))!important;
  background:linear-gradient(150deg,color-mix(in srgb,var(--vnl-accent) 46%,var(--vnl-navd) 54%),color-mix(in srgb,var(--vnl-accent) 24%,var(--vnl-navd) 76%))!important}
.vnl-shell[data-vnl-mode="sober"] .vnl-card .vnl-shine,
.vnl-shell[data-vnl-mode="sober"] .vnl-card .vnl-dots,
.vnl-shell[data-vnl-mode="sober"] .vnl-card .vnl-sq{display:none}
.vnl-shell[data-vnl-mode="sober"] .vnl-card:hover{box-shadow:0 16px 36px -18px rgba(0,0,0,.55)}
/* anti-lag: sober/focus is meant to be calmer AND lighter — stop the continuous seal spin
   and the hover ping ripple (they keep the compositor busy for no functional gain here). */
.vnl-shell[data-vnl-mode="sober"] .vnl-headseal svg,
.vnl-shell[data-vnl-mode="sober"] .vnl-agentseal svg{animation:none!important}
.vnl-shell[data-vnl-mode="sober"] .vnl-card:hover .vnl-pulse::after{animation:none!important}

/* ===== compact density (data-vnl-density="compact") — tighter cards ===== */
.vnl-shell[data-vnl-density="compact"] .vnl-grid{gap:14px}
.vnl-shell[data-vnl-density="compact"]{--vnl-card-min-h:196px;--vnl-card-pad:18px}
.vnl-shell[data-vnl-density="compact"] .vnl-ctitle{font-size:17px}
.vnl-shell[data-vnl-density="compact"] .vnl-cdesc{-webkit-line-clamp:2}

/* ===== spacious density (data-vnl-density="spacious") - easier scanning ===== */
.vnl-shell[data-vnl-density="spacious"] .vnl-grid{gap:26px}
.vnl-shell[data-vnl-density="spacious"]{--vnl-card-min-h:268px;--vnl-card-pad:26px}
.vnl-shell[data-vnl-density="spacious"] .vnl-ctitle{font-size:21px}

/* ===== readable text + strong contrast prefs ===== */
.vnl-shell[data-vnl-text="large"] .vnl{font-size:17px}
.vnl-shell[data-vnl-text="large"] .vnl-cdesc,
.vnl-shell[data-vnl-text="large"] .vnl-set-label p,
.vnl-shell[data-vnl-text="large"] .vnl-set-card-desc{font-size:14px}
.vnl-shell[data-vnl-contrast="high"] .vnl-set-row,
.vnl-shell[data-vnl-contrast="high"] .vnl-set-block,
.vnl-shell[data-vnl-contrast="high"] .vnl-set-card,
.vnl-shell[data-vnl-contrast="high"] .vnl-card{border-color:rgba(255,255,255,.22)}
.vnl-shell[data-vnl-contrast="high"] .vnl-card{border:1px solid rgba(255,255,255,.22)}
.vnl-shell[data-vnl-contrast="high"] .vnl-sub,
.vnl-shell[data-vnl-contrast="high"] .vnl-set-label p,
.vnl-shell[data-vnl-contrast="high"] .vnl-set-block-head p,
.vnl-shell[data-vnl-contrast="high"] .vnl-set-card-desc{color:#c8d2ef}
.vnl-shell[data-vnl-theme="light"][data-vnl-contrast="high"] .vnl-set-row,
.vnl-shell[data-vnl-theme="light"][data-vnl-contrast="high"] .vnl-set-block,
.vnl-shell[data-vnl-theme="light"][data-vnl-contrast="high"] .vnl-set-card,
.vnl-shell[data-vnl-theme="light"][data-vnl-contrast="high"] .vnl-card{border-color:rgba(20,30,60,.24)}
.vnl-shell[data-vnl-theme="light"][data-vnl-contrast="high"] .vnl-card{border:1px solid rgba(20,30,60,.24)}
.vnl-shell[data-vnl-theme="light"][data-vnl-contrast="high"] .vnl-sub,
.vnl-shell[data-vnl-theme="light"][data-vnl-contrast="high"] .vnl-set-label p,
.vnl-shell[data-vnl-theme="light"][data-vnl-contrast="high"] .vnl-set-block-head p,
.vnl-shell[data-vnl-theme="light"][data-vnl-contrast="high"] .vnl-set-card-desc{color:#263451}
.vnl-shell[data-vnl-focus="solid"] button:focus-visible,
.vnl-shell[data-vnl-focus="solid"] [role="button"]:focus-visible,
.vnl-shell[data-vnl-focus="solid"] input:focus-visible{
  outline:3px solid #8A6BFF;
  outline:3px solid var(--vnl-accent-organisation);outline-offset:3px;
  box-shadow:0 0 0 6px rgba(138,107,255,.18)
}
.vnl-shell[data-vnl-mode="sober"] .vnl-set-card,
.vnl-shell[data-vnl-mode="sober"] .vnl-set-chip{transition:none}
:root[data-vnl-custom-theme="on"] .vnl-shell{
  --vnl-radius:var(--vnl-user-radius,20px);
  --vnl-ambient:var(--vnl-custom-surface,var(--vnl-navd));
  color:#eaeefb;
  color:var(--vnl-custom-text,#eaeefb);
  font-family:var(--vnl-font-body);
  font-family:var(--vnl-user-font-family,var(--vnl-font-body));
  font-size:calc(100% * 1);
  font-size:calc(100% * var(--vnl-user-font-scale,1));
  filter:saturate(1);
  filter:saturate(var(--vnl-user-saturation,1))
}
:root[data-vnl-custom-theme="on"][data-vnl-custom-backdrop="soft"] .vnl-shell{
  --vnl-ambient:
    radial-gradient(120% 80% at 80% 0%,color-mix(in srgb,var(--vnl-custom-accent,#8A6BFF) 16%,transparent),transparent 55%),
    radial-gradient(120% 90% at 10% 100%,color-mix(in srgb,var(--vnl-custom-accent,#8A6BFF) 10%,transparent),transparent 55%),
    var(--vnl-custom-surface,var(--vnl-navd))
}
:root[data-vnl-custom-theme="on"][data-vnl-custom-backdrop="theme"] .vnl-shell{
  --vnl-ambient:
    radial-gradient(100% 70% at 85% 0%,color-mix(in srgb,var(--vnl-custom-accent,#8A6BFF) 18%,transparent),transparent 52%),
    linear-gradient(180deg,color-mix(in srgb,var(--vnl-custom-surface,var(--vnl-navd)) 86%,var(--vnl-custom-accent,#8A6BFF)),var(--vnl-custom-surface,var(--vnl-navd)))
}
:root[data-vnl-custom-theme="on"] .vnl-title,
:root[data-vnl-custom-theme="on"] .vnl-ctitle,
:root[data-vnl-custom-theme="on"] .vnl-set-label h3{font-weight:700;font-weight:var(--vnl-user-font-weight,700)}
:root[data-vnl-custom-theme="on"] .vnl-set-row,
:root[data-vnl-custom-theme="on"] .vnl-set-block,
:root[data-vnl-custom-theme="on"] .vnl-th-custom,
:root[data-vnl-custom-theme="on"] .vnl-th-catalog{background:rgba(255,255,255,.04);background:rgba(255,255,255,var(--vnl-user-panel-alpha,.04))}
:root[data-vnl-custom-theme="on"] .vnl-set-card,
:root[data-vnl-custom-theme="on"] .vnl-tr-table{background:rgba(255,255,255,.08);background:rgba(255,255,255,var(--vnl-user-card-alpha,.08))}
:root[data-vnl-custom-theme="on"] .vnl-set-row,
:root[data-vnl-custom-theme="on"] .vnl-set-block,
:root[data-vnl-custom-theme="on"] .vnl-th-custom,
:root[data-vnl-custom-theme="on"] .vnl-th-catalog,
:root[data-vnl-custom-theme="on"] .vnl-card{box-shadow:0 24px 60px -34px rgba(0,0,0,.45);box-shadow:0 24px 60px -34px rgba(0,0,0,var(--vnl-user-shadow,.45));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(var(--vnl-user-blur,12px));backdrop-filter:blur(var(--vnl-user-blur,12px))}
:root[data-vnl-custom-glass="off"] .vnl-shell .vnl-set-row,
:root[data-vnl-custom-glass="off"] .vnl-shell .vnl-set-block,
:root[data-vnl-custom-glass="off"] .vnl-shell .vnl-th-custom,
:root[data-vnl-custom-glass="off"] .vnl-shell .vnl-th-catalog,
:root[data-vnl-custom-glass="off"] .vnl-shell .vnl-card{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
:root[data-vnl-custom-density="compact"] .vnl-shell .vnl-th-custom-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
:root[data-vnl-custom-density="spacious"] .vnl-shell .vnl-th-custom-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
:root[data-vnl-custom-cursor="soft"] .vnl-shell button,
:root[data-vnl-custom-cursor="soft"] .vnl-shell input,
:root[data-vnl-custom-cursor="soft"] .vnl-shell select{cursor:pointer}
:root[data-vnl-custom-cursor="precision"] .vnl-shell button,
:root[data-vnl-custom-cursor="precision"] .vnl-shell input,
:root[data-vnl-custom-cursor="precision"] .vnl-shell select{cursor:crosshair}
:root[data-vnl-custom-contrast="high"] .vnl-shell .vnl-card,
:root[data-vnl-custom-contrast="high"] .vnl-shell .vnl-set-row,
:root[data-vnl-custom-contrast="high"] .vnl-shell .vnl-th-custom,
:root[data-vnl-custom-contrast="high"] .vnl-shell .vnl-th-catalog{border-color:color-mix(in srgb,#8A6BFF 44%,rgba(255,255,255,.24));border-color:color-mix(in srgb,var(--vnl-custom-accent,#8A6BFF) 44%,rgba(255,255,255,.24))}
:root[data-vnl-custom-focus="solid"] .vnl-shell button:focus-visible,
:root[data-vnl-custom-focus="solid"] .vnl-shell input:focus-visible,
:root[data-vnl-custom-focus="solid"] .vnl-shell select:focus-visible{outline:3px solid #8A6BFF;outline:3px solid var(--vnl-custom-accent,#8A6BFF);outline-offset:3px;box-shadow:0 0 0 6px color-mix(in srgb,#8A6BFF 18%,transparent);box-shadow:0 0 0 6px color-mix(in srgb,var(--vnl-custom-accent,#8A6BFF) 18%,transparent)}
:root[data-vnl-custom-motion="off"] .vnl-shell *,
:root[data-vnl-custom-motion="off"] .vnl-shell *::before,
:root[data-vnl-custom-motion="off"] .vnl-shell *::after{animation:none!important;transition:none!important}
/* Advanced custom-theme tokens (override layer). Body weight rides on .vnl-scroll so
   the explicit heading-weight rule above still wins for titles (inheritance model). */
:root[data-vnl-custom-theme="on"] .vnl-scroll{
  font-weight:400;
  font-weight:var(--vnl-user-body-weight,400);
  letter-spacing:calc(0 * 0.01em);
  letter-spacing:calc(var(--vnl-user-letter-spacing,0) * 0.01em)}
:root[data-vnl-custom-theme="on"] .vnl-th-card{
  transition-duration:200ms;
  transition-duration:var(--vnl-user-transition,200ms);
  box-shadow:inset 0 0 0 100vmax rgba(0,0,0,0);
  box-shadow:inset 0 0 0 100vmax rgba(0,0,0,var(--vnl-user-card-overlay,0))}
:root[data-vnl-custom-theme="on"] .vnl-th-card:hover,
:root[data-vnl-custom-theme="on"] .vnl-th-card:focus-visible{
  transform:translateY(-2px) scale(1);
  transform:translateY(var(--vnl-user-hover-lift,-2px)) scale(var(--vnl-user-hover-scale,1))}
/* UX-5 — custom themes drive the MODULE CARD hover animation too: the Theme Studio
   hoverLift/hoverScale sliders (slice-1 advanced settings) replace the prototype
   defaults, so the tilt composes with the user's own lift/scale, never fights them. */
:root[data-vnl-custom-theme="on"] .vnl-shell{
  --vnl-hover-lift:var(--vnl-user-hover-lift,-4px);
  --vnl-hover-scale:var(--vnl-user-hover-scale,1.006)}
/* Explicit reduced-motion toggle, distinct from the prefers-reduced-motion auto-detect. */
:root[data-vnl-custom-reduced="on"] .vnl-shell *,
:root[data-vnl-custom-reduced="on"] .vnl-shell *::before,
:root[data-vnl-custom-reduced="on"] .vnl-shell *::after{animation:none!important;transition:none!important}
/* UX-5 — the explicit reduced-motion toggle also kills the card tilt/lift/scale
   (killing transitions alone would leave an instant-snap transform: worse, not calmer). */
:root[data-vnl-custom-reduced="on"] .vnl-shell .vnl-card{transform:none!important}
@media (prefers-reduced-motion:reduce){
  :root[data-vnl-custom-reduced="auto"] .vnl-shell *,
  :root[data-vnl-custom-reduced="auto"] .vnl-shell *::before,
  :root[data-vnl-custom-reduced="auto"] .vnl-shell *::after{animation:none!important;transition:none!important}
}

@keyframes vnl-ping{0%{transform:scale(1);opacity:.7}70%{transform:scale(2.2);opacity:0}100%{opacity:0}}
@keyframes vnl-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

@media (prefers-reduced-motion:reduce){
  .vnl-card{transform:none!important;animation:none;opacity:1}
  .vnl-card *,.vnl-skel{animation:none!important;transition:none!important}
  .vnl-shine{display:none}
  .vnl-spin{animation:none!important}
  .vnl-headseal svg,.vnl-agentseal svg{animation:none!important}
  /* Board (P3): neutralise the hover-lift + skeleton shimmer for plain OS reduced-motion
     (previously only the opt-in sober mode dropped these). */
  .vnl-workspace-button,.vnl-kpi.is-clickable{transform:none!important}
  .vnl-pay--skel{animation:none!important}
}

/* ===== mobile (≤680px) — comfortable layout + 44px touch targets ===== */
@media (max-width:680px){
  .vnl{padding:18px 16px 44px}
  .vnl-head{flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:20px}
  .vnl-title{font-size:25px}
  .vnl-sub{font-size:13px}
  .vnl-hint{display:none}            /* secondary reassurance; subtitle already sets context */
  .vnl-headtools{align-items:stretch;width:100%}
  .vnl-search{min-width:0;width:100%}
  .vnl-grid{gap:14px}
  /* same vocabulary as the desktop defaults; density/modview keep winning over this
     breakpoint exactly as they did when it re-declared the properties directly. */
  .vnl-shell{--vnl-card-min-h:178px;--vnl-card-pad:18px}
  .vnl-ctitle{font-size:17px}
  .vnl-cdesc{-webkit-line-clamp:2}
  .vnl-go{opacity:1;transform:none}  /* no hover on touch → always show the affordance */
  .vnl-lang-btn,.vnl-userchip{min-height:44px}
  .vnl-gear,.vnl-back{width:44px;height:44px}
  .vnl-back{margin-top:0}
  .vnl-agent{padding:26px 18px 22px}
  .vnl-bar2 input{font-size:16px}    /* keep ≥16px so iOS doesn't zoom on focus */
}

/* ===== command palette (Cmd/Ctrl+K) ===== */
.vnl-cmdk-overlay{position:fixed;inset:0;z-index:60;display:flex;justify-content:center;align-items:flex-start;
  padding:12vh 16px 16px;background:rgba(6,10,24,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.vnl-cmdk{width:min(620px,94vw);max-height:64vh;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;
  background:rgba(11,20,55,.62);
  background:var(--vnl-navbar,rgba(18,24,46,.97));border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 80px -24px rgba(0,0,0,.7)}
.vnl-cmdk-search{display:flex;align-items:center;gap:11px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.07)}
.vnl-cmdk-search svg{width:18px;height:18px;color:#97a3c4;flex:none}
.vnl-cmdk-input{flex:1 1;min-width:0;border:0;background:transparent;outline:0;color:#fff;color:var(--vnl-field-ink);font:600 15px var(--vnl-font-body)}
.vnl-cmdk-input::placeholder{color:#6b769a;font-weight:500}
.vnl-cmdk-list{overflow-y:auto;padding:8px}
.vnl-cmdk-empty{padding:22px;text-align:center;color:#97a3c4;font-size:13px}
.vnl-cmdk-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;cursor:pointer;
  padding:10px 12px;border-radius:11px;background:transparent;color:#cdd6f4;
  font:600 13.5px var(--vnl-font-body)}
.vnl-cmdk-item.is-sel{background:color-mix(in srgb,#7551FF 22%,transparent);background:color-mix(in srgb,var(--vnl-seal-accent,var(--vnl-accent-hr)) 22%,transparent);color:#fff}
.vnl-cmdk-dot{width:28px;height:28px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:color-mix(in srgb,#7551FF 28%,transparent);
  background:color-mix(in srgb,var(--vnl-seal-accent,var(--vnl-accent-hr)) 28%,transparent);
  color:#7551FF;
  color:var(--vnl-seal-accent,var(--vnl-accent-hr))}
.vnl-cmdk-dot svg{width:15px;height:15px}
.vnl-cmdk-lbl{flex:1 1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-cmdk-enter{width:15px;height:15px;flex:none;color:#97a3c4}
.vnl-shell[data-vnl-theme="light"] .vnl-cmdk{background:rgba(255,255,255,.97);border-color:rgba(20,30,60,.12)}
.vnl-shell[data-vnl-theme="light"] .vnl-cmdk-item{color:#3a4567}
.vnl-shell[data-vnl-theme="light"] .vnl-cmdk-item.is-sel{color:#0f1838}

/* ===== Luna action palette (governed command palette — RBAC-filtered tools you RUN) ===== */
.vnl-cmd-scrim{position:fixed;inset:0;z-index:62;display:flex;justify-content:center;align-items:flex-start;
  padding:12vh 16px 16px;background:rgba(6,10,24,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.vnl-cmd{width:min(640px,94vw);max-height:70vh;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;
  background:rgba(11,20,55,.62);
  background:var(--vnl-navbar,rgba(18,24,46,.97));border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 80px -24px rgba(0,0,0,.7)}
.vnl-cmd-input-wrap{display:flex;align-items:center;gap:11px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.07)}
.vnl-cmd-input-wrap svg{width:18px;height:18px;color:#97a3c4;flex:none}
.vnl-cmd-spark{color:#7551FF!important;color:var(--vnl-accent-hr)!important}
.vnl-cmd-input{flex:1 1;min-width:0;border:0;background:transparent;outline:0;color:#fff;color:var(--vnl-field-ink);font:600 15px var(--vnl-font-body)}
.vnl-cmd-input::placeholder{color:#6b769a;font-weight:500}
.vnl-cmd-list{overflow-y:auto;padding:8px}
.vnl-cmd-empty{padding:22px;text-align:center;color:#97a3c4;font-size:13px}
.vnl-cmd-error{margin:8px;padding:12px 14px;border-radius:11px;color:#fecdd3;font-size:13px;
  background:rgba(244,63,94,.12);border:1px solid rgba(244,63,94,.32)}
.vnl-cmd-ecode{opacity:.7;font-size:11px}
.vnl-cmd-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;cursor:pointer;
  padding:11px 12px;border-radius:11px;background:transparent;color:#cdd6f4;
  font:600 13.5px var(--vnl-font-body)}
.vnl-cmd-item.is-active{background:color-mix(in srgb,#7551FF 20%,transparent);background:color-mix(in srgb,var(--vnl-accent-hr) 20%,transparent);color:#fff}
.vnl-cmd-itext{flex:1 1;min-width:0;display:flex;flex-direction:column;gap:2px}
.vnl-cmd-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-cmd-desc{font-weight:500;font-size:11.5px;color:#97a3c4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-cmd-cat{flex:none;font:600 10.5px var(--vnl-font-body);letter-spacing:.04em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;color:#7551FF;color:var(--vnl-accent-hr);
  background:color-mix(in srgb,#7551FF 18%,transparent);
  background:color-mix(in srgb,var(--vnl-accent-hr) 18%,transparent)}
.vnl-cmd-enter{width:15px;height:15px;flex:none;color:#97a3c4}
.vnl-cmd-detail{display:flex;flex-direction:column;gap:12px;padding:16px 18px;overflow-y:auto}
.vnl-cmd-dhead{display:flex;align-items:center;gap:10px}
.vnl-cmd-back{flex:none;width:30px;height:30px;display:grid;place-items:center;border:0;cursor:pointer;border-radius:9px;
  background:rgba(255,255,255,.06);color:#cdd6f4}
.vnl-cmd-back svg{width:16px;height:16px}
.vnl-cmd-dtitle{flex:1 1;min-width:0;color:#fff;font:700 16px var(--vnl-font-body);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-cmd-ddesc{margin:0;color:#97a3c4;font-size:13px;line-height:1.5}
.vnl-cmd-form{display:flex;flex-direction:column;gap:10px}
.vnl-cmd-formhint{color:#97a3c4;font-size:12px}
.vnl-cmd-field{display:flex;flex-direction:column;gap:5px}
.vnl-cmd-flabel{color:#cdd6f4;font:600 12.5px var(--vnl-font-body)}
.vnl-cmd-req{color:#97a3c4;font-weight:500;text-transform:lowercase}
.vnl-cmd-finput{width:100%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);outline:0;
  border-radius:10px;padding:9px 12px;color:#fff;color:var(--vnl-field-ink);font:500 13.5px var(--vnl-font-body)}
.vnl-cmd-finput:focus{border-color:#7551FF;border-color:var(--vnl-accent-hr)}
.vnl-cmd-run{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
  padding:10px 18px;border-radius:11px;color:#fff;font:700 13.5px var(--vnl-font-body);
  background:#7551FF;
  background:var(--vnl-accent-hr)}
.vnl-cmd-run:disabled{opacity:.5;cursor:not-allowed}
.vnl-cmd-run svg{width:16px;height:16px}
.vnl-cmd-running{display:flex;align-items:center;gap:9px;color:#97a3c4;font-size:13px;padding:6px 0}
.vnl-cmd-spin{animation:vnl-cmd-spin 1s linear infinite}
@keyframes vnl-cmd-spin{to{transform:rotate(360deg)}}
.vnl-cmd-result{display:flex;flex-direction:column;gap:10px}
.vnl-cmd-latency{align-self:flex-end;color:#6b769a;font:500 11px ui-monospace,monospace}
@media (prefers-reduced-motion:reduce){.vnl-cmd-spin{animation:none}}
.vnl-shell[data-vnl-theme="light"] .vnl-cmd{background:rgba(255,255,255,.97);border-color:rgba(20,30,60,.12)}
.vnl-shell[data-vnl-theme="light"] .vnl-cmd-dtitle{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-cmd-item{color:#3a4567}
.vnl-shell[data-vnl-theme="light"] .vnl-cmd-item.is-active{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-cmd-finput{background:rgba(20,30,60,.04);border-color:rgba(20,30,60,.14)}
.vnl-shell[data-vnl-theme="light"] .vnl-cmd-back{color:#3a4567;background:rgba(20,30,60,.06)}
/* command palette (Cmd+K `.vnl-cmdk-*` + the in-cockpit command surface `.vnl-cmd-*`) — the panel
   is white in light theme (rules above), but its muted labels/hints/icons/placeholders keep the
   dark-shell pale inks (#97a3c4/#6b769a → ~2.3-3.9 on white) and the status inks stay pale. Re-ink
   for the light panel: muted → #5a648a, form label → dark, error → readable red. */
.vnl-shell[data-vnl-theme="light"] .vnl-cmdk-search svg,
.vnl-shell[data-vnl-theme="light"] .vnl-cmdk-empty,
.vnl-shell[data-vnl-theme="light"] .vnl-cmdk-enter,
.vnl-shell[data-vnl-theme="light"] .vnl-cmd-input-wrap svg,
.vnl-shell[data-vnl-theme="light"] .vnl-cmd-empty,
.vnl-shell[data-vnl-theme="light"] .vnl-cmd-desc,
.vnl-shell[data-vnl-theme="light"] .vnl-cmd-ddesc,
.vnl-shell[data-vnl-theme="light"] .vnl-cmd-enter,
.vnl-shell[data-vnl-theme="light"] .vnl-cmd-formhint,
.vnl-shell[data-vnl-theme="light"] .vnl-cmd-req,
.vnl-shell[data-vnl-theme="light"] .vnl-cmd-running,
.vnl-shell[data-vnl-theme="light"] .vnl-cmd-latency{color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-cmdk-input::placeholder,
.vnl-shell[data-vnl-theme="light"] .vnl-cmd-input::placeholder{color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-cmd-flabel{color:#3a4567}
.vnl-shell[data-vnl-theme="light"] .vnl-cmd-error{color:#be123c}

/* ===== bottom dock search (point 4 — every pick opens a NEW window) ===== */
.vnl-dock{position:fixed;left:24px;bottom:22px;z-index:55;width:min(380px,42vw);display:flex;flex-direction:column;gap:8px}
.vnl-dock-bar{display:flex;align-items:center;gap:9px;height:44px;padding:0 14px;border-radius:14px;
  background:rgba(11,20,55,.62);
  background:var(--vnl-navbar);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 12px 40px rgba(0,0,0,.35)}
/* resting must read different from focused (point 3) — mirror .vnl-search:focus-within accent ring */
.vnl-dock-bar:focus-within{border-color:color-mix(in srgb,#3965FF 50%,transparent);border-color:color-mix(in srgb,var(--vnl-accent-it) 50%,transparent)}
.vnl-dock-bar svg{width:16px;height:16px;color:#97a3c4;flex:none}
.vnl-dock-input{flex:1 1;min-width:0;border:0;background:transparent;outline:0;color:#fff;color:var(--vnl-field-ink);font:500 13px var(--vnl-font-body)}
.vnl-dock-input::placeholder{color:#8a93b0}
.vnl-dock-hint{opacity:.5}
.vnl-dock-pop{display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:14px;max-height:46vh;overflow-y:auto;
  background:rgba(11,20,55,.62);
  background:var(--vnl-navbar);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 16px 50px rgba(0,0,0,.4)}
.vnl-dock-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:0;cursor:pointer;
  padding:9px 11px;border-radius:10px;background:transparent;color:#cdd6f4;font:600 13px var(--vnl-font-body)}
.vnl-dock-item.is-sel{background:color-mix(in srgb,#7551FF 22%,transparent);background:color-mix(in srgb,var(--vnl-seal-accent,var(--vnl-accent-hr)) 22%,transparent);color:#fff}
.vnl-dock-dot{width:9px;height:9px;flex:none;border-radius:50%;background:#7551FF;background:var(--vnl-seal-accent,var(--vnl-accent-hr))}
.vnl-dock-lbl{flex:1 1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-dock-ext{width:14px;height:14px;flex:none;color:#97a3c4}
/* light dock bar: translucent frost like the navbar pill (NOT flat near-opaque white — that read
   as a permanently "selected" control); the results pop stays denser for list legibility */
.vnl-shell[data-vnl-theme="light"] .vnl-dock-bar{background:rgba(11,20,55,.62);background:var(--vnl-navbar);border-color:rgba(20,30,60,.16)}
.vnl-shell[data-vnl-theme="light"] .vnl-dock-bar:focus-within{border-color:color-mix(in srgb,#3965FF 55%,transparent);border-color:color-mix(in srgb,var(--vnl-accent-it) 55%,transparent)}
.vnl-shell[data-vnl-theme="light"] .vnl-dock-pop{background:rgba(255,255,255,.92);border-color:rgba(20,30,60,.12)}
.vnl-shell[data-vnl-theme="light"] .vnl-dock-input::placeholder{color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-dock-item{color:#3a4567}
.vnl-shell[data-vnl-theme="light"] .vnl-dock-item.is-sel{color:#0f1838}
@media (max-width:640px){.vnl-dock{left:12px;right:12px;width:auto;bottom:14px}}

/* ===== net simulator (Payroll → Simulateur) ===== */
.vnl-sim{max-width:760px}
.vnl-sim-form{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin-bottom:22px}
.vnl-sim-field{display:flex;flex-direction:column;gap:6px;flex:1 1;min-width:150px}
.vnl-sim-field>span{font-size:12px;color:#a3aed0;font-weight:600}
.vnl-sim-input{height:42px;padding:0 13px;border-radius:11px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);color:#fff;color:var(--vnl-field-ink);font:600 14px var(--vnl-font-body);outline:0}
.vnl-sim-input:focus{border-color:#01B574;border-color:var(--vnl-accent-payroll)}
.vnl-sim-check{display:flex;align-items:center;gap:8px;color:#cdd6f4;font-size:13px;font-weight:600;min-width:150px;flex:1 1}
.vnl-sim-go{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 20px;border:0;border-radius:11px;cursor:pointer;
  background:linear-gradient(135deg,#01B574,color-mix(in srgb,#01B574 55%,#000));
  background:linear-gradient(135deg,var(--vnl-accent-payroll),color-mix(in srgb,var(--vnl-accent-payroll) 55%,#000));
  color:#fff;font:700 14px var(--vnl-font-body)}
.vnl-sim-go:disabled{opacity:.6;cursor:default}
.vnl-sim-go svg{width:17px;height:17px}
.vnl-sim-table{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.vnl-sim-thead,.vnl-sim-trow{display:grid;grid-template-columns:1fr auto auto;grid-gap:18px;gap:18px;align-items:center;padding:10px 16px}
.vnl-sim-thead{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#6b769a}
.vnl-sim-thead span:not(:first-child),.vnl-sim-trow span:not(:first-child){min-width:96px;text-align:right;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.vnl-sim-trow{border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);color:#eaeefb;font-weight:600;font-size:13.5px}
.vnl-sim-tlabel{color:#fff}
.vnl-shell[data-vnl-theme="light"] .vnl-sim-input{background:#fff;border-color:rgba(20,30,60,.12)}
.vnl-shell[data-vnl-theme="light"] .vnl-sim-trow{background:#fff;border-color:rgba(20,30,60,.1);color:#0f1838}
.vnl-sim-modes{display:inline-flex;gap:4px;padding:4px;margin-bottom:18px;border-radius:13px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.vnl-sim-mode{height:34px;padding:0 20px;border:0;border-radius:9px;background:transparent;color:#a3aed0;font:600 13px var(--vnl-font-body);cursor:pointer;transition:background .18s ease,color .18s ease}
.vnl-sim-mode.is-on{background:#01B574;background:var(--vnl-accent-payroll);color:#fff}
.vnl-sim-thead--year,.vnl-sim-trow--year{grid-template-columns:1fr auto auto auto}
.vnl-shell[data-vnl-theme="light"] .vnl-sim-modes{background:rgba(20,30,60,.05);border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-sim-mode{color:#475569}
.vnl-shell[data-vnl-mode="sober"] .vnl-sim-mode{transition:none}

/* ===== access / capability visibility (F006 — A-MR-01) ===== */
.vnl-access{max-width:780px;display:flex;flex-direction:column;gap:12px}
.vnl-access-state{display:flex;align-items:center;gap:9px;padding:14px 16px;border-radius:13px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:#a3aed0;font-size:13.5px;font-weight:600}
.vnl-access-state svg{width:17px;height:17px;flex:none}
.vnl-access-state.is-error{color:#fca5a5;border-color:rgba(252,165,165,.32)}
.vnl-access-state.is-blocked{color:#fcd34d;border-color:rgba(252,211,113,.32)}
.vnl-access-master{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:8px 14px;border-radius:11px;color:#fff;font-weight:700;font-size:13px;
  background:linear-gradient(135deg,#8A6BFF,color-mix(in srgb,#8A6BFF 55%,#000));
  background:linear-gradient(135deg,var(--vnl-accent-organisation),color-mix(in srgb,var(--vnl-accent-organisation) 55%,#000))}
.vnl-access-master svg{width:16px;height:16px}
.vnl-access-h{margin:10px 0 2px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#6b769a;font-weight:700}
.vnl-access-list{display:flex;flex-direction:column;gap:6px}
.vnl-access-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 15px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.vnl-access-row.is-blocked{opacity:.85}
.vnl-access-mod{display:flex;align-items:center;gap:9px;color:#eaeefb;font-weight:600;font-size:13.5px}
.vnl-access-mod svg{width:16px;height:16px;color:#97a3c4;flex:none}
.vnl-access-lvl{font-size:12px;font-weight:700;padding:3px 10px;border-radius:8px;white-space:nowrap;color:#eaeefb;
  background:color-mix(in srgb,#8A6BFF 24%,transparent);
  background:color-mix(in srgb,var(--vnl-accent-organisation) 24%,transparent)}
.vnl-access-dep{font-size:12.5px;color:#97a3c4;text-align:right}
.vnl-set-link{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:11px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#cdd6f4;font:600 13px var(--vnl-font-body);cursor:pointer;transition:background .18s ease}
.vnl-set-link:hover{background:rgba(255,255,255,.09)}
.vnl-set-link svg{width:16px;height:16px}
.vnl-shell[data-vnl-mode="sober"] .vnl-set-link{transition:none}
.vnl-shell[data-vnl-theme="light"] .vnl-access-state,
.vnl-shell[data-vnl-theme="light"] .vnl-access-row{background:#fff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-access-mod{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-access-lvl{color:#0f1838}
/* access screen ("who can do what") is white in light theme (rows above) — its muted
   department label, module icon, logo initials and default state text keep the dark-shell pale
   inks (#97a3c4/#a3aed0 → ~2.3 on white; the icon is below the 3:1 non-text threshold). Deepen
   to a readable muted; the .is-blocked / .is-error status colours are preserved via :not(). */
.vnl-shell[data-vnl-theme="light"] .vnl-access-dep,
.vnl-shell[data-vnl-theme="light"] .vnl-access-mod svg,
.vnl-shell[data-vnl-theme="light"] .vnl-access-logo,
.vnl-shell[data-vnl-theme="light"] .vnl-access-state:not(.is-blocked):not(.is-error){color:#5a648a}

/* company-logo configuration (F009, license-first) */
.vnl-access-branding{display:flex;align-items:center;gap:16px;padding:14px 15px;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);flex-wrap:wrap}
.vnl-access-logo{width:64px;height:64px;flex:none;display:grid;place-items:center;border-radius:12px;overflow:hidden;
  background:rgba(0,0,0,.22);color:#a3aed0}
.vnl-access-logo svg{width:26px;height:26px}
.vnl-access-logo-img{width:100%;height:100%;object-fit:contain}
.vnl-access-logo-input{display:none}
.vnl-access-branding-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vnl-access-logo-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border-radius:var(--vnl-pill);
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#eaeefb;
  font:600 13px var(--vnl-font-body);cursor:pointer;transition:background .15s cubic-bezier(.22,.61,.36,1);transition:background .15s var(--vnl-ease,ease)}
.vnl-access-logo-btn:hover:not(:disabled){background:rgba(255,255,255,.12)}
.vnl-access-logo-btn:disabled{opacity:.6;cursor:default}
.vnl-access-logo-btn svg{width:16px;height:16px}
.vnl-access-logo-del{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(255,90,90,.3);background:rgba(255,90,90,.1);color:#ff8a8a;cursor:pointer}
.vnl-access-logo-del:hover:not(:disabled){background:rgba(255,90,90,.2)}
.vnl-access-logo-del:disabled{opacity:.6;cursor:default}
.vnl-access-logo-del svg{width:16px;height:16px}
.vnl-access-logo-err{font-size:13px;color:#ff9a9a;font-weight:600}
.vnl-shell[data-vnl-theme="light"] .vnl-access-branding{background:#fff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-access-logo{background:#f4f6fc}
.vnl-shell[data-vnl-theme="light"] .vnl-access-logo-btn{background:#f4f6fc;border-color:rgba(20,30,60,.1);color:#1a2340}
.vnl-shell[data-vnl-theme="light"] .vnl-set-link{background:#fff;border-color:rgba(20,30,60,.12);color:#0f1838}

/* ===== People List controls (F004 — search · filter · sort · pagination) ===== */
.vnl-emp-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0}
.vnl-emp-search{display:flex;align-items:center;gap:8px;flex:1 1;min-width:200px;height:40px;padding:0 13px;border-radius:11px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.vnl-emp-search svg{width:16px;height:16px;color:#97a3c4;flex:none}
.vnl-emp-search input{flex:1 1;min-width:0;border:0;background:transparent;outline:0;color:#fff;color:var(--vnl-field-ink);font:500 13px var(--vnl-font-body)}
.vnl-emp-search input::placeholder{color:#6b769a}
.vnl-emp-select{height:40px;padding:0 12px;border-radius:11px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:#fff;color:var(--vnl-field-ink);font:600 13px var(--vnl-font-body);cursor:pointer}
.vnl-emp-sort{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-radius:11px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:#cdd6f4;font:600 13px var(--vnl-font-body);cursor:pointer;transition:background .18s ease}
.vnl-emp-sort:hover{background:rgba(255,255,255,.09)}
.vnl-emp-sort svg{width:15px;height:15px}
.vnl-emp-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px}
.vnl-emp-pgbtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#cdd6f4;cursor:pointer;transition:background .18s ease}
.vnl-emp-pgbtn:hover:not(:disabled){background:rgba(255,255,255,.09)}
.vnl-emp-pgbtn:disabled{opacity:.4;cursor:default}
.vnl-emp-pgbtn svg{width:17px;height:17px}
.vnl-emp-pginfo{font-size:13px;font-weight:600;color:#a3aed0;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.vnl-shell[data-vnl-mode="sober"] .vnl-emp-sort,.vnl-shell[data-vnl-mode="sober"] .vnl-emp-pgbtn{transition:none}
.vnl-shell[data-vnl-theme="light"] .vnl-emp-search,
.vnl-shell[data-vnl-theme="light"] .vnl-emp-select,
.vnl-shell[data-vnl-theme="light"] .vnl-emp-sort,
.vnl-shell[data-vnl-theme="light"] .vnl-emp-pgbtn{background:#fff;border-color:rgba(20,30,60,.12)}
.vnl-shell[data-vnl-theme="light"] .vnl-emp-search input{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-emp-select{color:#0f1838}
/* light-Lumina a11y (batch 2) — muted controls/labels/icons still pale on the WHITE content
   surfaces of the employee list (sort/pagination/search icon), the dossier docs, the pay-items
   catalog and the bundle form. All confirmed light (family bg overrides above / dossier has 11
   light rules); none on a coloured fill. Controls → #3a4a6a, muted labels/icons → #5a648a. */
.vnl-shell[data-vnl-theme="light"] .vnl-emp-sort,
.vnl-shell[data-vnl-theme="light"] .vnl-emp-pgbtn{color:#3a4a6a}
.vnl-shell[data-vnl-theme="light"] .vnl-emp-pginfo,
.vnl-shell[data-vnl-theme="light"] .vnl-emp-search svg,
.vnl-shell[data-vnl-theme="light"] .vnl-bundle-sub,
.vnl-shell[data-vnl-theme="light"] .vnl-bundle-unknown,
.vnl-shell[data-vnl-theme="light"] .vnl-doss-doc-act,
.vnl-shell[data-vnl-theme="light"] .vnl-doss-docs-ph,
.vnl-shell[data-vnl-theme="light"] .vnl-pi-cat-n,
.vnl-shell[data-vnl-theme="light"] .vnl-pi-badge.is-cat,
.vnl-shell[data-vnl-theme="light"] .vnl-pi-vars div{color:#5a648a}

/* employee dossier photo (F009 display — A-MR-03b, read-only) */
.vnl-doss-photo{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}

/* ----- Swissdec declaration preview (local ViewGen-equivalent, non-transmissive) ----- */
button.vnl-abs{font:inherit;color:inherit;width:100%;text-align:left;background:transparent}
/* declaration chooser (entry point) — period control bar + type cards */
.vnl-sd-bar{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px;padding:14px 16px;border-radius:13px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.vnl-sd-bar-lbl{align-self:center;margin-right:2px;font-size:11px;font-weight:800;color:#97a3c4;text-transform:uppercase;letter-spacing:.7px}
.vnl-sd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));grid-gap:14px;gap:14px}
.vnl-sd-card{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:14px;text-align:left;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.09);
  font-family:inherit;color:inherit;transition:border-color .15s cubic-bezier(.22,.61,.36,1),transform .15s cubic-bezier(.22,.61,.36,1),background .15s;transition:border-color .15s var(--vnl-ease,ease),transform .15s var(--vnl-ease,ease),background .15s}
.vnl-sd-card:hover{border-color:color-mix(in srgb,#01B574 55%,transparent);border-color:color-mix(in srgb,var(--vnl-accent-payroll,#5b6cff) 55%,transparent);transform:translateY(-2px);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02))}
.vnl-sd-card:focus-visible{outline:none;border-color:#01B574;border-color:var(--vnl-accent-payroll,#7a8cff)}
.vnl-sd-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vnl-sd-card-ic{width:26px;height:26px;color:#01B574;color:var(--vnl-accent-payroll,#7a8cff)}
.vnl-sd-card-freq{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#97a3c4;
  padding:3px 9px;border-radius:20px;background:rgba(255,255,255,.07)}
.vnl-sd-card-name{font-family:var(--vnl-font-body);font-size:15px;font-weight:700;color:#fff;line-height:1.25}
.vnl-sd-card-desc{font-size:12px;color:#97a3c4;line-height:1.45;flex:1 1}
.vnl-sd-card-cta{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font-size:12px;font-weight:700;color:#01B574;color:var(--vnl-accent-payroll,#8b9bff)}
.vnl-sd-card-cta svg{width:15px;height:15px;transition:transform .15s cubic-bezier(.22,.61,.36,1);transition:transform .15s var(--vnl-ease,ease)}
.vnl-sd-card:hover .vnl-sd-card-cta svg{transform:translateX(3px)}
.vnl-shell[data-vnl-theme="light"] .vnl-sd-bar{background:#f4f6fc;border-color:rgba(20,30,60,.08)}
.vnl-shell[data-vnl-theme="light"] .vnl-sd-card{background:#fff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-sd-card-name{color:#0f1838}
.vnl-sd-fld{display:flex;flex-direction:column;gap:6px}
.vnl-sd-fld span{font-size:12px;font-weight:600;color:#97a3c4}
.vnl-sd-fld input,.vnl-sd-fld select{padding:9px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.2);color:#eaeefb;font-size:14px;font-family:inherit;min-width:120px}
.vnl-sd-fld input:focus,.vnl-sd-fld select:focus{outline:none;border-color:#01B574;border-color:var(--vnl-accent-payroll,#7a8cff)}
.vnl-sd-prev{display:flex;flex-direction:column;gap:14px}
.vnl-sd-state{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:#a3aed0;padding:14px 4px}
.vnl-sd-state.is-err{color:#ff9a9a}

/* the preview rendered as a formal fiscal declaration document */
.vnl-sd-doc{padding:26px 28px;border-radius:16px;max-width:880px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.1);box-shadow:0 16px 44px -20px rgba(0,0,0,.6)}
.vnl-sd-mast{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding-bottom:15px;border-bottom:2px solid #01B574;border-bottom:2px solid var(--vnl-accent-payroll,#5b6cff);margin-bottom:18px}
.vnl-sd-mast-type{font-family:var(--vnl-font-body);font-size:21px;font-weight:800;color:#fff!important;letter-spacing:-.2px;line-height:1.15}
.vnl-sd-mast-rec{font-size:13px;color:#97a3c4;margin-top:5px;font-weight:500}
.vnl-sd-stamp{flex:none;align-self:center;display:inline-block;padding:7px 14px;border:2px solid rgba(255,180,80,.5);
  border-radius:8px;color:#ffc266;font:800 11px var(--vnl-font-body);text-transform:uppercase;letter-spacing:1.1px;
  transform:rotate(-4deg);opacity:.94;white-space:nowrap}
.vnl-sd-meta{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:14px;gap:14px;margin-bottom:14px}
@media (max-width:680px){.vnl-sd-meta{grid-template-columns:repeat(2,1fr)}}
.vnl-sd-meta-i{display:flex;flex-direction:column;gap:3px;min-width:0}
.vnl-sd-meta-i span{font-size:10px;font-weight:700;color:#8b96b8;text-transform:uppercase;letter-spacing:.6px}
.vnl-sd-meta-i b{font-size:14px;color:#eaeefb;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.vnl-sd-meta-mode{color:#ffc266!important;letter-spacing:.5px}
.vnl-sd-disclaimer{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#ffd28a;margin-bottom:22px;
  padding:9px 12px;border-radius:9px;background:rgba(255,180,80,.08);border:1px dashed rgba(255,180,80,.32)}
.vnl-sd-disclaimer svg{width:15px;height:15px;flex:none}
.vnl-sd-sec{margin-bottom:22px}
.vnl-sd-sec-h{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-family:var(--vnl-font-body);
  font-size:12px;font-weight:800;color:#b9c2dd;text-transform:uppercase;letter-spacing:1px}
.vnl-sd-sec-h::before{content:'';width:4px;height:14px;border-radius:2px;background:#01B574;background:var(--vnl-accent-payroll,#5b6cff)}
.vnl-sd-sec-n{margin-left:auto;font-size:11px;font-weight:700;color:#97a3c4;padding:2px 9px;border-radius:20px;background:rgba(255,255,255,.06)}
.vnl-sd-valid{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 14px;border-radius:11px;border:1px solid rgba(255,255,255,.08)}
.vnl-sd-valid.is-ok{background:rgba(40,200,120,.1);border-color:rgba(40,200,120,.25);color:#7ee0a8}
.vnl-sd-valid.is-warn{background:rgba(255,180,80,.1);border-color:rgba(255,180,80,.25);color:#ffd28a}
.vnl-sd-valid svg{width:18px;height:18px;flex:none}
.vnl-sd-valid-lbl{font-weight:700;font-size:14px}
.vnl-sd-valid-count{margin-left:auto;font-size:12px;opacity:.85;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.vnl-sd-issues{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.vnl-sd-issues li{font-size:13px;padding:7px 12px;border-radius:8px;background:rgba(0,0,0,.18)}
.vnl-sd-issues li.is-err{color:#ff9a9a;border-left:3px solid #ff6b6b}
.vnl-sd-issues li.is-warn{color:#ffd28a;border-left:3px solid #ffb450}
.vnl-sd-totals{display:grid;grid-template-columns:repeat(6,1fr);grid-gap:1px;gap:1px;border-radius:11px;overflow:hidden;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.07)}
@media (max-width:680px){.vnl-sd-totals{grid-template-columns:repeat(2,1fr)}}
.vnl-sd-tot{display:flex;flex-direction:column;gap:4px;padding:13px 14px;background:rgba(10,14,30,.55)}
.vnl-sd-tot span{font-size:10px;color:#8b96b8;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.vnl-sd-tot b{font-size:16px;color:#fff;font-weight:700;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.vnl-sd-table{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.vnl-sd-row{display:grid;grid-template-columns:1.6fr 1.4fr repeat(5,1fr);grid-gap:8px;gap:8px;padding:10px 13px;font-size:13px;align-items:center}
.vnl-sd-row:not(.vnl-sd-thead){border-top:1px solid rgba(255,255,255,.05)}
.vnl-sd-row:nth-child(even):not(.vnl-sd-thead):not(.vnl-sd-tfoot){background:rgba(255,255,255,.022)}
.vnl-sd-row span:not(.vnl-sd-name):not(.vnl-sd-avs){text-align:right;color:#cfd6ec;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.vnl-sd-thead{background:rgba(0,0,0,.28);font-weight:800;color:#8b96b8;font-size:10px;text-transform:uppercase;letter-spacing:.6px}
.vnl-sd-thead span:not(.vnl-sd-name):not(.vnl-sd-avs){color:#8b96b8}
.vnl-sd-name{font-weight:600;color:#eaeefb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-sd-avs{color:#8b96b8;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;font-size:12px}
.vnl-sd-row.is-click{cursor:pointer;transition:background .15s ease}
.vnl-sd-row.is-click:hover{background:color-mix(in srgb,#01B574 12%,transparent);background:color-mix(in srgb,var(--vnl-accent-payroll,#5b6cff) 12%,transparent)}
.vnl-sd-row.is-click:focus-visible{outline:2px solid #01B574;outline:2px solid var(--vnl-accent-payroll,#5b6cff);outline-offset:-2px}
.vnl-shell[data-vnl-mode="sober"] .vnl-sd-row.is-click{transition:none}
.vnl-sd-tfoot{border-top:2px solid #01B574!important;border-top:2px solid var(--vnl-accent-payroll,#5b6cff)!important;background:rgba(91,108,255,.1)}
.vnl-sd-tfoot .vnl-sd-name{color:#fff;font-weight:800}
.vnl-sd-tfoot span:not(.vnl-sd-name):not(.vnl-sd-avs){color:#fff;font-weight:800}
@media (max-width:680px){.vnl-sd-row{grid-template-columns:1.4fr 1fr 1fr;font-size:12px}.vnl-sd-row span:nth-child(n+4){display:none}}
.vnl-shell[data-vnl-theme="light"] .vnl-sd-fld input,.vnl-shell[data-vnl-theme="light"] .vnl-sd-fld select{background:#f4f6fc;border-color:rgba(20,30,60,.12);color:#1a2340}
.vnl-shell[data-vnl-theme="light"] .vnl-sd-doc{background:#fff;border-color:rgba(20,30,60,.12);box-shadow:0 16px 40px -22px rgba(20,30,60,.3)}
.vnl-shell[data-vnl-theme="light"] .vnl-sd-mast-type{color:#0f1838!important}
.vnl-shell[data-vnl-theme="light"] .vnl-sd-meta-i b,.vnl-shell[data-vnl-theme="light"] .vnl-sd-name{color:#1a2340}
.vnl-shell[data-vnl-theme="light"] .vnl-sd-sec-h{color:#3a4a6a}
.vnl-shell[data-vnl-theme="light"] .vnl-sd-totals{background:rgba(20,30,60,.1);border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-sd-tot{background:#f4f6fc}
.vnl-shell[data-vnl-theme="light"] .vnl-sd-tot b{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-sd-table{background:#fff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-sd-row span:not(.vnl-sd-name):not(.vnl-sd-avs){color:#3a4a6a}
.vnl-shell[data-vnl-theme="light"] .vnl-sd-tfoot{background:rgba(91,108,255,.08)}
.vnl-shell[data-vnl-theme="light"] .vnl-sd-tfoot .vnl-sd-name,.vnl-shell[data-vnl-theme="light"] .vnl-sd-tfoot span:not(.vnl-sd-name):not(.vnl-sd-avs){color:#0f1838}

/* ----- Swissdec generate (local XML artifact — NOT a transmission) ----- */
.vnl-sd-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.vnl-sd-genbtn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border-radius:var(--vnl-pill);border:0;
  background:linear-gradient(135deg,#01B574,#3311DB);
  background:linear-gradient(135deg,var(--vnl-accent-payroll,#5b6cff),var(--vnl-accent-accounting,#7a8cff));color:#fff;
  font:700 13px var(--vnl-font-body);cursor:pointer;transition:filter .15s cubic-bezier(.22,.61,.36,1);transition:filter .15s var(--vnl-ease,ease)}
.vnl-sd-genbtn:hover:not(:disabled){filter:brightness(1.08)}
.vnl-sd-genbtn:disabled{opacity:.5;cursor:default}
.vnl-sd-genbtn svg{width:16px;height:16px}
.vnl-sd-gennote{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#ffd28a}
.vnl-sd-gennote svg{width:15px;height:15px;flex:none}
.vnl-sd-genblocked{font-size:12px;font-weight:600;color:#ff9a9a}
.vnl-sd-generr{font-size:13px;font-weight:600;color:#ff9a9a}

/* ----- Swissdec guided ease-of-use (3-step intro + helpers) ----- */
.vnl-sd-intro{margin-bottom:18px;padding:20px 22px;border-radius:15px;
  background:linear-gradient(180deg,rgba(91,108,255,.1),rgba(91,108,255,.03));border:1px solid rgba(91,108,255,.2)}
.vnl-sd-intro-h{margin:0;font-family:var(--vnl-font-body);font-size:19px;font-weight:800;color:#fff!important;letter-spacing:-.2px}
.vnl-sd-intro-sub{margin:5px 0 0;font-size:13px;color:#aab4d4;font-weight:500}
.vnl-sd-steps{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);grid-gap:12px;gap:12px}
@media (max-width:680px){.vnl-sd-steps{grid-template-columns:1fr}}
.vnl-sd-steps li{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:#dde3f4;line-height:1.3}
.vnl-sd-step-n{flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;
  background:#01B574;
  background:var(--vnl-accent-payroll,#5b6cff);color:#fff;font:800 12px var(--vnl-font-body)}
.vnl-sd-bar-hint{display:inline-flex;align-items:center;gap:7px;margin-left:auto;align-self:center;
  font-size:11px;font-weight:600;color:#8b96b8}
.vnl-sd-bar-hint svg{width:14px;height:14px;flex:none}
.vnl-sd-genblocked{display:inline-flex;align-items:center;gap:6px}
.vnl-sd-genblocked svg{width:15px;height:15px;flex:none}
.vnl-shell[data-vnl-theme="light"] .vnl-sd-intro{background:linear-gradient(180deg,rgba(91,108,255,.08),rgba(91,108,255,.02));border-color:rgba(91,108,255,.22)}
.vnl-shell[data-vnl-theme="light"] .vnl-sd-intro-h{color:#0f1838!important}
.vnl-shell[data-vnl-theme="light"] .vnl-sd-intro-sub{color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-sd-steps li{color:#3a4a6a}

/* ----- Swissdec print / save-as-PDF (scoped to an explicit print action) ----- */
.vnl-sd-printbtn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border-radius:var(--vnl-pill);
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#eaeefb;
  font:700 13px var(--vnl-font-body);cursor:pointer;transition:background .15s cubic-bezier(.22,.61,.36,1);transition:background .15s var(--vnl-ease,ease)}
.vnl-sd-printbtn:hover{background:rgba(255,255,255,.12)}
.vnl-sd-printbtn svg{width:16px;height:16px}
.vnl-shell[data-vnl-theme="light"] .vnl-sd-printbtn{background:#f4f6fc;border-color:rgba(20,30,60,.12);color:#1a2340}
@media print{
  body.sd-printing{background:#fff!important}
  body.sd-printing .vnl-shell *{visibility:hidden!important}
  body.sd-printing .vnl-sd-doc,body.sd-printing .vnl-sd-doc *{visibility:visible!important}
  body.sd-printing .vnl-sd-doc{position:absolute;left:0;top:0;width:100%;max-width:none;margin:0;padding:0;
    background:#fff!important;color:#000!important;border:0!important;box-shadow:none!important}
  body.sd-printing .vnl-sd-actions{display:none!important}
  body.sd-printing .vnl-sd-mast{border-bottom:2px solid #111}
  body.sd-printing .vnl-sd-mast-type,body.sd-printing .vnl-sd-meta-i b,body.sd-printing .vnl-sd-sec-h,
  body.sd-printing .vnl-sd-tot b,body.sd-printing .vnl-sd-name,body.sd-printing .vnl-sd-valid,
  body.sd-printing .vnl-sd-row span:not(.vnl-sd-name):not(.vnl-sd-avs),body.sd-printing .vnl-sd-thead span,
  body.sd-printing .vnl-sd-tfoot span,body.sd-printing .vnl-sd-issues li{color:#111!important}
  body.sd-printing .vnl-sd-meta-i span,body.sd-printing .vnl-sd-mast-rec,body.sd-printing .vnl-sd-tot span,
  body.sd-printing .vnl-sd-avs{color:#555!important}
  body.sd-printing .vnl-sd-sec-h::before,body.sd-printing .vnl-sd-tfoot{background:#111!important;border-color:#111!important}
  body.sd-printing .vnl-sd-stamp{color:#9a5b00!important;border-color:#9a5b00!important}
  body.sd-printing .vnl-sd-disclaimer{color:#111!important;background:#fff!important;border:1px dashed #999}
  body.sd-printing .vnl-sd-totals{background:#bbb!important;border-color:#999!important}
  body.sd-printing .vnl-sd-tot{background:#fff!important}
  body.sd-printing .vnl-sd-table{border-color:#999!important}
  body.sd-printing .vnl-sd-row{border-color:#ccc!important;page-break-inside:avoid}
  body.sd-printing .vnl-sd-thead{background:#eee!important}
  body.sd-printing .vnl-sd-sec{page-break-inside:avoid}
  @page{margin:14mm}
}

/* ----- Swissdec Suivi & statut dashboard (read-only, simulated) ----- */
.vnl-sd-tabs{display:flex;gap:6px;margin-bottom:18px;padding:5px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);width:fit-content}
.vnl-sd-tabs button{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:0;border-radius:10px;
  background:transparent;color:#97a3c4;font:700 13px var(--vnl-font-body);cursor:pointer;transition:all .15s cubic-bezier(.22,.61,.36,1);transition:all .15s var(--vnl-ease,ease)}
.vnl-sd-tabs button svg{width:16px;height:16px}
.vnl-sd-tabs button.is-on{background:#01B574;background:var(--vnl-accent-payroll,#5b6cff);color:#fff}
.vnl-sd-tabs button:not(.is-on):hover{color:#eaeefb}
.vnl-sd-suivi{display:flex;flex-direction:column;gap:20px}
.vnl-sd-svc{display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:13px;
  background:rgba(40,200,120,.08);border:1px solid rgba(40,200,120,.22)}
.vnl-sd-svc-ic{width:22px;height:22px;flex:none;color:#7ee0a8}
.vnl-sd-svc-txt{flex:1 1;min-width:0}
.vnl-sd-svc-name{font-size:14px;font-weight:700;color:#eaeefb}
.vnl-sd-svc-desc{font-size:12px;color:#97a3c4;margin-top:2px}
.vnl-sd-svc-mode{flex:none;font:800 10px var(--vnl-font-body);text-transform:uppercase;letter-spacing:.8px;
  color:#7ee0a8;padding:4px 10px;border-radius:20px;border:1px solid rgba(40,200,120,.35)}
.vnl-sd-statchips{display:flex;gap:10px;flex-wrap:wrap}
.vnl-sd-statchip{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:11px;font-size:13px;color:#cfd6ec;
  background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.07)}
.vnl-sd-statchip b{font-size:16px;color:#fff;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.vnl-sd-emptybox{display:flex;align-items:center;gap:9px;padding:14px 16px;border-radius:11px;font-size:13px;color:#97a3c4;
  background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.12)}
.vnl-sd-emptybox svg{width:16px;height:16px;flex:none}
.vnl-sd-orggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));grid-gap:12px;gap:12px}
.vnl-sd-org{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:12px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)}
.vnl-sd-org-top{display:flex;align-items:center;gap:8px}
.vnl-sd-org-top svg{width:16px;height:16px;flex:none;color:#01B574;color:var(--vnl-accent-payroll,#8b9bff)}
.vnl-sd-org-name{font-size:14px;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-sd-org-meta{font-size:11px;color:#8b96b8;text-transform:uppercase;letter-spacing:.4px}
.vnl-sd-org-rate{font-size:12px;font-weight:600;color:#7ee0a8;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.vnl-sd-htable{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.vnl-sd-hrow{display:grid;grid-template-columns:2fr 1fr 1fr 1.1fr;grid-gap:8px;gap:8px;padding:11px 14px;font-size:13px;align-items:center;color:#cfd6ec}
.vnl-sd-hrow:not(.vnl-sd-hhead){border-top:1px solid rgba(255,255,255,.05)}
.vnl-sd-hrow:nth-child(even):not(.vnl-sd-hhead){background:rgba(255,255,255,.022)}
.vnl-sd-hhead{background:rgba(0,0,0,.28);font-weight:800;color:#8b96b8;font-size:10px;text-transform:uppercase;letter-spacing:.6px}
.vnl-sd-hname{font-weight:600;color:#eaeefb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-sd-hbadge{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#aab4d4}
.vnl-shell[data-vnl-theme="light"] .vnl-sd-tabs{background:#f4f6fc;border-color:rgba(20,30,60,.08)}
.vnl-shell[data-vnl-theme="light"] .vnl-sd-org,.vnl-shell[data-vnl-theme="light"] .vnl-sd-htable,.vnl-shell[data-vnl-theme="light"] .vnl-sd-statchip{background:#fff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-sd-org-name,.vnl-shell[data-vnl-theme="light"] .vnl-sd-hname,.vnl-shell[data-vnl-theme="light"] .vnl-sd-svc-name,.vnl-shell[data-vnl-theme="light"] .vnl-sd-statchip b{color:#0f1838}
/* swissdec — muted bar/field labels (pale #97a3c4 → ~2.3 on light) + inactive tab text; the
   active (.is-on) tab keeps its white-on-accent state. */
.vnl-shell[data-vnl-theme="light"] .vnl-sd-bar-lbl,
.vnl-shell[data-vnl-theme="light"] .vnl-sd-fld span{color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-sd-tabs button:not(.is-on){color:#3a4a6a}
/* swissdec — remaining muted descriptions / badges / rows / state text (pale #97a3c4/#cfd6ec/
   #aab4d4/#a3aed0) on the white swissdec panel. Deepen to a readable muted; the .is-err state
   red is preserved (darkened for light). None sit on a coloured fill. */
.vnl-shell[data-vnl-theme="light"] .vnl-sd-card-desc,
.vnl-shell[data-vnl-theme="light"] .vnl-sd-card-freq,
.vnl-shell[data-vnl-theme="light"] .vnl-sd-emptybox,
.vnl-shell[data-vnl-theme="light"] .vnl-sd-hbadge,
.vnl-shell[data-vnl-theme="light"] .vnl-sd-hrow,
.vnl-shell[data-vnl-theme="light"] .vnl-sd-mast-rec,
.vnl-shell[data-vnl-theme="light"] .vnl-sd-sec-n,
.vnl-shell[data-vnl-theme="light"] .vnl-sd-statchip,
.vnl-shell[data-vnl-theme="light"] .vnl-sd-svc-desc,
.vnl-shell[data-vnl-theme="light"] .vnl-sd-state:not(.is-err){color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-sd-state.is-err{color:#be123c}

/* ----- Pay items (rubriques) config screen ----- */
.vnl-pi-search{display:flex;align-items:center;gap:10px;margin:0 0 18px;padding:11px 14px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.vnl-pi-search svg{width:17px;height:17px;flex:none;color:#8b96b8}
.vnl-pi-search input{flex:1 1;background:transparent;border:0;outline:none;color:#eaeefb;font:600 14px var(--vnl-font-body)}
.vnl-pi-search input::placeholder{color:#8b96b8;font-weight:500}
.vnl-pi-cat{margin-bottom:20px}
.vnl-pi-cat-h{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-family:var(--vnl-font-body);
  font-size:12px;font-weight:800;color:#b9c2dd;text-transform:uppercase;letter-spacing:1px}
.vnl-pi-cat-h::before{content:'';width:4px;height:14px;border-radius:2px;background:#01B574;background:var(--vnl-accent-payroll,#5b6cff)}
.vnl-pi-cat-n{margin-left:auto;font-size:11px;font-weight:700;color:#97a3c4;padding:2px 9px;border-radius:20px;background:rgba(255,255,255,.06)}
.vnl-pi-list{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.vnl-pi-row{display:flex;align-items:center;gap:14px;padding:12px 14px;background:rgba(255,255,255,.025)}
.vnl-pi-row:not(:first-child){border-top:1px solid rgba(255,255,255,.05)}
.vnl-pi-main{flex:1 1;min-width:0;display:flex;flex-direction:column;gap:2px}
.vnl-pi-name{font-size:14px;font-weight:600;color:#eaeefb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-pi-code{font-size:11px;color:#8b96b8;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;text-transform:uppercase;letter-spacing:.4px}
.vnl-pi-subjects{display:flex;gap:5px;flex:none}
.vnl-pi-flag{font-size:10px;font-weight:800;letter-spacing:.3px;padding:3px 7px;border-radius:6px;line-height:1.2}
.vnl-pi-flag.is-on{color:#7ee0a8;background:rgba(40,200,120,.14);border:1px solid rgba(40,200,120,.3)}
.vnl-pi-flag.is-off{color:#5b637e;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.vnl-pi-badge{flex:none;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:4px 10px;border-radius:20px}
.vnl-pi-badge.is-cat{color:#97a3c4;background:rgba(255,255,255,.06)}
.vnl-pi-badge.is-custom{color:#8b9bff;background:rgba(91,108,255,.14);border:1px solid rgba(91,108,255,.3)}
.vnl-pi-board{grid-template-columns:minmax(260px,.9fr) minmax(280px,1fr) minmax(520px,1.75fr)}
.vnl-pi-rowbtn{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-gap:10px;gap:10px;align-items:center;width:100%;padding:11px;border:0;text-align:left;
  background:rgba(255,255,255,.025);color:inherit;cursor:pointer}
.vnl-pi-rowbtn:not(:first-child){border-top:1px solid rgba(255,255,255,.05)}
.vnl-pi-rowbtn:hover,.vnl-pi-rowbtn.is-active{background:rgba(91,108,255,.1)}
.vnl-pi-detail{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:13px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}
.vnl-pi-detail b{color:#fff;font-size:15px;line-height:1.25}
.vnl-pi-detail span{color:#cfd6ec;font-size:12px;font-weight:800;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.vnl-pi-detail small{color:#8b96b8;font-size:11px;font-weight:800}
.vnl-pi-subjects--wrap{flex-wrap:wrap}
.vnl-pi-map,.vnl-pi-vars{display:flex;flex-direction:column;gap:8px}
.vnl-pi-map span,.vnl-pi-vars div{display:flex;gap:8px;align-items:flex-start;padding:9px 10px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  color:#cfd6ec;font-size:12px;font-weight:800;line-height:1.35}
.vnl-pi-map svg{width:15px;height:15px;color:#01B574;color:var(--vnl-accent-payroll,#8b9bff);flex:none}
.vnl-pi-vars div{flex-direction:column;gap:4px}
.vnl-pi-vars b{color:#fff;font-size:12px;text-transform:uppercase}
.vnl-pi-vars span{color:#8b96b8;font-size:11px;line-height:1.4;overflow-wrap:anywhere}
.vnl-pi-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:10px;gap:10px;padding:12px;border-radius:13px;background:rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.06)}
.vnl-pi-form label:not(.vnl-runs-check),.vnl-pi-eval label{display:flex;flex-direction:column;gap:5px;min-width:0}
.vnl-pi-form label span,.vnl-pi-eval label span{font-size:11px;font-weight:900;color:#97a3c4;text-transform:uppercase;letter-spacing:.4px}
.vnl-pi-form input,.vnl-pi-form select,.vnl-pi-eval textarea{width:100%;min-width:0;padding:10px 11px;border-radius:10px;border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.2);color:#eaeefb;font:700 13px var(--vnl-font-body)}
.vnl-pi-form input:focus,.vnl-pi-form select:focus,.vnl-pi-eval textarea:focus{outline:none;border-color:#01B574;border-color:var(--vnl-accent-payroll,#8b9bff)}
.vnl-pi-span2{grid-column:span 2}
.vnl-pi-flags{grid-column:1 / -1;display:flex;gap:10px;flex-wrap:wrap;padding:9px;border-radius:12px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06)}
.vnl-pi-eval{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-gap:10px;gap:10px;align-items:end}
.vnl-pi-eval textarea{min-height:82px;resize:vertical;line-height:1.4}
.vnl-pi-eval-result{grid-column:1 / -1;color:#7ee0a8;font:700 12px var(--vnl-font-body);overflow-wrap:anywhere}
.vnl-pi-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
@media (max-width:760px){.vnl-pi-board,.vnl-pi-form,.vnl-pi-eval{grid-template-columns:1fr}.vnl-pi-span2{grid-column:auto}}
@media (max-width:680px){.vnl-pi-subjects{display:none}}
.vnl-shell[data-vnl-theme="light"] .vnl-pi-search{background:#f4f6fc;border-color:rgba(20,30,60,.08)}
.vnl-shell[data-vnl-theme="light"] .vnl-pi-search input{color:#1a2340}
.vnl-shell[data-vnl-theme="light"] .vnl-pi-cat-h{color:#3a4a6a}
.vnl-shell[data-vnl-theme="light"] .vnl-pi-list{border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-pi-row{background:#fff}
.vnl-shell[data-vnl-theme="light"] .vnl-pi-name{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-pi-flag.is-off{color:#9aa3bd;background:rgba(20,30,60,.03);border-color:rgba(20,30,60,.08)}
.vnl-shell[data-vnl-theme="light"] .vnl-pi-rowbtn,.vnl-shell[data-vnl-theme="light"] .vnl-pi-detail,.vnl-shell[data-vnl-theme="light"] .vnl-pi-map span,.vnl-shell[data-vnl-theme="light"] .vnl-pi-vars div,.vnl-shell[data-vnl-theme="light"] .vnl-pi-flags{background:#fff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-pi-form{background:#f4f6fc;border-color:rgba(20,30,60,.08)}

/* Workflows atelier (VnextWorkflowsScreen) */
.vnl-wf-group{margin-bottom:16px}
.vnl-wf-cat{font-size:12px;text-transform:uppercase;letter-spacing:.04em;opacity:.65;margin:8px 0 6px;font-weight:700}
.vnl-wf-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-radius:12px;background:rgba(255,255,255,.03);margin-bottom:6px}
.vnl-wf-item{border-radius:12px;margin-bottom:6px;overflow:hidden}
.vnl-wf-item.is-highlight{outline:2px solid #01B574;outline:2px solid var(--vnl-chat-accent,var(--vnl-accent-payroll))}
.vnl-wf-item .vnl-wf-row{margin-bottom:0}
.vnl-wf-toggle{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:0;background:transparent;color:inherit;cursor:pointer;opacity:.75;border-radius:8px}
.vnl-wf-toggle:hover:not(:disabled){opacity:1;background:rgba(255,255,255,.06)}
.vnl-wf-toggle:disabled{opacity:.25;cursor:default}
.vnl-wf-toggle svg{width:16px;height:16px}
.vnl-wf-count{flex:0 0 auto;min-width:22px;text-align:center;font-size:11px;font-weight:700;opacity:.6;padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.05)}
.vnl-wf-steps{list-style:none;margin:0;padding:4px 14px 10px 40px;display:flex;flex-direction:column;gap:5px}
.vnl-wf-step-item{display:flex;align-items:center;gap:8px;font-size:13px;opacity:.82}
.vnl-wf-step-emoji{flex:0 0 auto}
.vnl-shell[data-vnl-theme="light"] .vnl-wf-toggle:hover:not(:disabled){background:rgba(20,30,60,.06)}
.vnl-shell[data-vnl-theme="light"] .vnl-wf-count{background:rgba(20,30,60,.05)}
.vnl-wf-name{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis}
.vnl-wf-start{flex:0 0 auto}
.vnl-wf-inst{display:flex;flex-direction:column;gap:8px;padding:11px 13px;border-radius:12px;background:rgba(255,255,255,.025);margin-bottom:8px}
.vnl-wf-inst-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vnl-wf-cur{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.03)}
.vnl-wf-cur-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.vnl-wf-cur-txt b{font-size:13px}
.vnl-wf-cur-txt span{font-size:12px;opacity:.7}
.vnl-wf-adv{display:flex;align-items:center;gap:8px}
.vnl-wf-skip{flex:0 0 auto;border:0;background:transparent;color:inherit;opacity:.7;cursor:pointer;font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px}
.vnl-wf-skip:hover:not(:disabled){opacity:1;background:rgba(255,255,255,.06)}
.vnl-wf-skip:disabled{opacity:.35;cursor:default}
.vnl-shell[data-vnl-theme="light"] .vnl-wf-cur{background:rgba(20,30,60,.04)}
.vnl-shell[data-vnl-theme="light"] .vnl-wf-skip:hover:not(:disabled){background:rgba(20,30,60,.06)}
.vnl-wf-step{font-size:12px;opacity:.7;white-space:nowrap}

/* Per-effect delight toggles (vnextFx.js). Each effect is muted when its shell
   attribute is "off". CSS handles reveal (force-revealed) + hover glow/shine; the JS
   hooks gate spotlight/magnet/tilt/count-up/parallax/confetti at their source. The
   dedicated .cta-magnet/.tilt-3d selectors keep those mutes precise. */
.vnl-shell[data-vnl-fx-reveal="off"] .reveal,
.vnl-shell[data-vnl-fx-reveal="off"] .reveal-left,
.vnl-shell[data-vnl-fx-reveal="off"] .reveal-right,
.vnl-shell[data-vnl-fx-reveal="off"] .reveal-scale{opacity:1!important;transform:none!important;filter:none!important}
.vnl-shell[data-vnl-fx-glow="off"] .vnl-card:hover{box-shadow:0 16px 36px -18px rgba(0,0,0,.55)}
.vnl-shell[data-vnl-fx-glow="off"] .vnl-card:hover .vnl-shine{opacity:0}
.vnl-shell[data-vnl-fx-magnet="off"] .cta-magnet{transform:none!important}
.vnl-shell[data-vnl-fx-tilt="off"] .tilt-3d{transform:none!important}

/* Shine border (set.fx.shine): a reflection loops around a highlighted card. A
   conic-gradient masked to the 1.5px border ring, its angle animated via @property.
   Muted by the per-effect toggle, sober mode, and reduced motion. */
@property --vnl-shine-a{syntax:'<angle>';initial-value:0deg;inherits:false}
.vnl-shine-border{position:relative}
.vnl-shine-border::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--vnl-shine-a),transparent 0%,#01B574 18%,transparent 38%);
  background:conic-gradient(from var(--vnl-shine-a),transparent 0%,var(--vnl-chat-accent,var(--vnl-accent-payroll)) 18%,transparent 38%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:vnl-shine-spin 2.8s linear infinite;
}
@keyframes vnl-shine-spin{to{--vnl-shine-a:360deg}}
.vnl-shell[data-vnl-fx-shine="off"] .vnl-shine-border::before,
.vnl-shell[data-vnl-mode="sober"] .vnl-shine-border::before{animation:none;opacity:0}
@media (prefers-reduced-motion:reduce){.vnl-shine-border::before{animation:none;opacity:0}}
.vnl-shell[data-vnl-theme="light"] .vnl-wf-row,.vnl-shell[data-vnl-theme="light"] .vnl-wf-inst{background:rgba(20,30,60,.04)}
.vnl-shell[data-vnl-theme="light"] .vnl-pi-form input,.vnl-shell[data-vnl-theme="light"] .vnl-pi-form select,.vnl-shell[data-vnl-theme="light"] .vnl-pi-eval textarea{background:#fff;border-color:rgba(20,30,60,.14);color:#1a2340}
.vnl-shell[data-vnl-theme="light"] .vnl-pi-detail b,.vnl-shell[data-vnl-theme="light"] .vnl-pi-vars b{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-pi-detail span,.vnl-shell[data-vnl-theme="light"] .vnl-pi-map span{color:#3a4a6a}
.vnl-shell[data-vnl-theme="light"] .vnl-pi-detail small,.vnl-shell[data-vnl-theme="light"] .vnl-pi-vars span,.vnl-shell[data-vnl-theme="light"] .vnl-pi-form label span,.vnl-shell[data-vnl-theme="light"] .vnl-pi-eval label span{color:#5a648a}

/* ----- Pay rules (calculation rules) config screen ----- */
.vnl-pr-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-gap:14px;gap:14px}
.vnl-pr-cat{display:flex;flex-direction:column;gap:8px;padding:16px 18px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.09)}
.vnl-pr-cat-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.vnl-pr-cat-name{font-family:var(--vnl-font-body);font-size:15px;font-weight:700;color:#fff;line-height:1.25}
.vnl-pr-cat-count{flex:none;font-size:12px;font-weight:700;color:#97a3c4;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.vnl-pr-cat-desc{font-size:12px;color:#97a3c4;line-height:1.45}
.vnl-pr-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.vnl-pr-tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 9px;border-radius:8px}
.vnl-pr-tag svg{width:13px;height:13px}
.vnl-pr-tag.is-mand{color:#ffd28a;background:rgba(255,180,80,.12);border:1px solid rgba(255,180,80,.28)}
.vnl-pr-tag.is-conf{color:#8b9bff;background:rgba(91,108,255,.12);border:1px solid rgba(91,108,255,.28)}
.vnl-pr-foot{margin-top:16px;font-size:11px;color:#8b96b8;font-weight:600;text-align:right;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.vnl-shell[data-vnl-theme="light"] .vnl-pr-cat{background:#fff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-pr-cat-name{color:#0f1838}

/* ----- Payroll runs + population workspace ----- */
.vnl-runs-refresh{display:inline-flex;align-items:center;gap:7px;margin-left:auto;padding:9px 13px;border-radius:999px;border-radius:var(--vnl-pill);
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#cfd6ec;font:700 12px var(--vnl-font-body);cursor:pointer}
.vnl-runs-refresh svg{width:15px;height:15px}
.vnl-runs-board{display:grid;grid-template-columns:minmax(220px,.85fr) minmax(230px,1fr) minmax(320px,1.45fr) minmax(240px,1fr);grid-gap:14px;gap:14px;align-items:start}
.vnl-runs-col{min-width:0;display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));border:1px solid rgba(255,255,255,.09)}
.vnl-runs-col--wide{min-height:460px}
.vnl-runs-colh{display:flex;align-items:center;gap:9px;color:#fff;font-family:var(--vnl-font-body);font-size:13px;font-weight:800}
.vnl-runs-colh svg{width:17px;height:17px;color:#01B574;color:var(--vnl-accent-payroll,#8b9bff);flex:none}
.vnl-runs-statgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:8px;gap:8px}
.vnl-runs-statgrid div{min-width:0;padding:10px;border-radius:11px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.06)}
.vnl-runs-statgrid b{display:block;color:#fff;font-size:20px;line-height:1;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.vnl-runs-statgrid span{display:block;margin-top:5px;color:#97a3c4;font-size:11px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-runs-create{display:flex;flex-direction:column;gap:10px}
.vnl-runs-create label:not(.vnl-runs-check){display:flex;flex-direction:column;gap:5px}
.vnl-runs-create label span{font-size:11px;font-weight:800;color:#97a3c4;text-transform:uppercase;letter-spacing:.4px}
.vnl-runs-create input,.vnl-runs-create select{width:100%;min-width:0;padding:10px 11px;border-radius:10px;border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.2);color:#eaeefb;font:600 13px var(--vnl-font-body)}
.vnl-runs-create input:focus,.vnl-runs-create select:focus{outline:none;border-color:#01B574;border-color:var(--vnl-accent-payroll,#8b9bff)}
.vnl-runs-check{display:flex;align-items:flex-start;gap:8px;color:#cfd6ec;font-size:12px;font-weight:700;line-height:1.35;cursor:pointer}
.vnl-runs-check input{width:16px;height:16px;margin:0;accent-color:#01B574;accent-color:var(--vnl-accent-payroll,#5b6cff);flex:none}
.vnl-runs-check span{text-transform:none;letter-spacing:0;color:inherit;font-size:12px}
.vnl-runs-mini{display:flex;flex-direction:column;gap:8px;max-height:180px;overflow:auto;padding:8px;border-radius:10px;background:rgba(0,0,0,.12)}
.vnl-runs-primary,.vnl-runs-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:9px 14px;border-radius:999px;border-radius:var(--vnl-pill);
  font:800 12px var(--vnl-font-body);cursor:pointer;text-align:center}
.vnl-runs-primary{border:0;background:linear-gradient(135deg,#01B574,#3311DB);background:linear-gradient(135deg,var(--vnl-accent-payroll,#5b6cff),var(--vnl-accent-accounting,#7a8cff));color:#fff}
.vnl-runs-secondary{border:1px solid rgba(255,255,255,.14);background:transparent;color:#cfd6ec}
.vnl-runs-primary:disabled,.vnl-runs-secondary:disabled{opacity:.55;cursor:default}
.vnl-runs-primary svg,.vnl-runs-secondary svg{width:15px;height:15px;flex:none}
.vnl-runs-list{display:flex;flex-direction:column;gap:9px;max-height:520px;overflow:auto}
.vnl-runs-card{display:flex;flex-direction:column;gap:8px;width:100%;min-width:0;padding:12px;border-radius:12px;text-align:left;cursor:pointer;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);color:inherit}
.vnl-runs-card:hover,.vnl-runs-card.is-active{border-color:color-mix(in srgb,#01B574 55%,rgba(255,255,255,.12));border-color:color-mix(in srgb,var(--vnl-accent-payroll,#5b6cff) 55%,rgba(255,255,255,.12));background:rgba(91,108,255,.1)}
.vnl-runs-cardtop{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.vnl-runs-cardtop b{min-width:0;color:#fff;font-size:14px;line-height:1.25;overflow:hidden;text-overflow:ellipsis}
.vnl-runs-cardtop em{flex:none;font-style:normal;font-size:10px;font-weight:800;color:#7ee0a8;padding:3px 8px;border-radius:20px;background:rgba(40,200,120,.12)}
.vnl-runs-code{display:inline-block;margin-top:5px;font-size:10px;font-weight:900;letter-spacing:.06em;color:var(--vnl-muted)}
.vnl-runs-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:#97a3c4;font-size:11px;font-weight:700}
.vnl-runs-meta svg{width:13px;height:13px}
.vnl-runs-alert{display:inline-flex;align-items:center;gap:6px;color:#ffb0b0;font-size:11px;font-weight:700;line-height:1.35}
.vnl-runs-alert svg{width:13px;height:13px;flex:none}
.vnl-runs-note{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:11px;color:#ffd28a;background:rgba(255,180,80,.09);border:1px solid rgba(255,180,80,.22);font-size:12px;font-weight:700;line-height:1.4}
.vnl-runs-note svg{width:15px;height:15px;flex:none;margin-top:1px}
.vnl-runs-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.vnl-runs-people{display:flex;flex-direction:column;gap:8px;max-height:560px;overflow:auto}
.vnl-runs-person{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-gap:10px;gap:10px;align-items:center;padding:10px 11px;border-radius:12px;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);cursor:pointer}
.vnl-runs-person.is-in{border-color:rgba(126,224,168,.35);background:rgba(40,200,120,.08)}
.vnl-runs-person.is-readonly{cursor:default}
.vnl-runs-person input{width:17px;height:17px;accent-color:#01B574;accent-color:var(--vnl-accent-payroll,#5b6cff)}
.vnl-runs-personmain{min-width:0;display:flex;flex-direction:column;gap:2px}
.vnl-runs-personmain b{color:#fff;font-size:13px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-runs-personmain small{color:#8b96b8;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-runs-personmeta{color:#cfd6ec;font-size:12px;font-weight:800;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;white-space:nowrap}
.vnl-runs-rowcalc{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:30px;padding:6px 9px;border-radius:999px;border-radius:var(--vnl-pill);
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#dce4ff;font-size:11px;font-weight:800;white-space:nowrap}
.vnl-runs-rowcalc svg{width:13px;height:13px;flex:none}
.vnl-runs-rowcalc:not(:disabled):hover{border-color:color-mix(in srgb,#01B574 50%,rgba(255,255,255,.12));border-color:color-mix(in srgb,var(--vnl-accent-payroll,#5b6cff) 50%,rgba(255,255,255,.12));background:rgba(91,108,255,.12)}
.vnl-runs-rowcalc:disabled{opacity:.5;cursor:default}
.vnl-runs-other{grid-column:2 / -1;color:#ffd28a;font-size:11px;font-weight:700;line-height:1.3}
/* Person-grouped run population (MVP-P0) — collapsed person rows expand to contracts */
.vnl-rp-groups{display:flex;flex-direction:column;gap:8px}
.vnl-rp-person{border-radius:12px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);overflow:hidden}
.vnl-rp-person.is-in{border-color:rgba(126,224,168,.35);background:rgba(40,200,120,.06)}
.vnl-rp-person-btn{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-gap:10px;gap:10px;align-items:center;width:100%;
  padding:10px 11px;background:transparent;border:0;cursor:pointer;text-align:left}
.vnl-rp-chevron{display:inline-flex;color:#8b96b8}
.vnl-rp-chevron svg{width:16px;height:16px}
.vnl-rp-personmain{min-width:0;display:flex;flex-direction:column;gap:2px}
.vnl-rp-personmain b{color:#fff;font-size:13px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-rp-personmain small{color:#8b96b8;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-rp-chip{padding:3px 9px;border-radius:999px;border-radius:var(--vnl-pill);font-size:10px;font-weight:800;white-space:nowrap;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#cfd6ec}
.vnl-rp-chip--calculated{border-color:rgba(126,224,168,.4);background:rgba(40,200,120,.12);color:#9ff0c2}
.vnl-rp-chip--partial{border-color:rgba(255,210,138,.4);background:rgba(255,170,40,.12);color:#ffd28a}
.vnl-rp-detail{display:inline-flex;align-items:center;gap:4px;margin:0 11px 8px;padding:0;background:transparent;border:0;
  color:#9aa6cc;font-size:11px;font-weight:700;cursor:pointer}
.vnl-rp-detail svg{width:12px;height:12px}
.vnl-rp-detail:hover{color:#dce4ff}
.vnl-rp-contracts{display:flex;flex-direction:column;gap:6px;padding:0 8px 9px}
.vnl-rp-contract{background:rgba(0,0,0,.16)}
.vnl-runs-contracts{display:flex;flex-direction:column;gap:8px}
.vnl-runs-contracttop{display:flex;align-items:baseline;gap:8px;padding:11px;border-radius:11px;background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.06)}
.vnl-runs-contracttop b{color:#fff;font-size:24px;line-height:1}
.vnl-runs-contracttop span{color:#97a3c4;font-size:12px;font-weight:700}
.vnl-runs-contract{display:flex;flex-direction:column;gap:3px;padding:9px 10px;border-radius:10px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06)}
.vnl-runs-contract b{color:#fff;font-size:12px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-runs-contract span{color:#97a3c4;font-size:11px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-runs-workspaces{display:flex;flex-direction:column;gap:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.06)}
.vnl-ssws-reqbtn{justify-content:center!important;gap:8px;font-weight:700;
  background:color-mix(in srgb,#A78BFA 26%,transparent)!important;
  background:color-mix(in srgb,var(--vnl-accent-self_service,#7c6cff) 26%,transparent)!important;
  border:1px solid color-mix(in srgb,#A78BFA 50%,transparent)!important;
  border:1px solid color-mix(in srgb,var(--vnl-accent-self_service,#7c6cff) 50%,transparent)!important;color:#fff!important}
.vnl-ssws-reqbtn:hover{background:color-mix(in srgb,#A78BFA 38%,transparent)!important;background:color-mix(in srgb,var(--vnl-accent-self_service,#7c6cff) 38%,transparent)!important}
.vnl-ssws-reqbtn svg{width:16px;height:16px}
.vnl-ssws-req{max-width:720px;margin:18px auto 0}
.vnl-runs-workspaces h3{margin:0 0 2px;color:#fff;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.vnl-runs-workspaces button{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:9px;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);color:#cfd6ec;font:700 12px var(--vnl-font-body);cursor:pointer;text-align:left}
.vnl-runs-workspaces button svg{width:14px;height:14px;flex:none}
.vnl-results-board{grid-template-columns:minmax(220px,.85fr) minmax(300px,1.05fr) minmax(380px,1.7fr)}
.vnl-result-list{display:flex;flex-direction:column;gap:8px;max-height:590px;overflow:auto}
.vnl-result-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-gap:8px;gap:8px;align-items:center;width:100%;padding:10px 11px;border-radius:12px;text-align:left;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:#cfd6ec;cursor:pointer}
.vnl-result-row:hover,.vnl-result-row.is-active{border-color:color-mix(in srgb,#01B574 55%,rgba(255,255,255,.12));border-color:color-mix(in srgb,var(--vnl-accent-payroll,#5b6cff) 55%,rgba(255,255,255,.12));background:rgba(91,108,255,.1)}
.vnl-result-row span{min-width:0;display:flex;flex-direction:column;gap:2px}
.vnl-result-row b{color:#fff;font-size:13px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-result-row small{color:#8b96b8;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-result-row strong{color:#fff;font-size:13px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;white-space:nowrap}
.vnl-result-row em{grid-column:1 / -1;justify-self:start;font-style:normal;font-size:10px;font-weight:800;color:#ffd28a}
.vnl-result-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px;border-radius:13px;background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.06)}
.vnl-result-head h2{margin:0;color:#fff;font-size:19px;line-height:1.2}
.vnl-result-head p{margin:5px 0 0;color:#97a3c4;font-size:12px;font-weight:700}
.vnl-result-head span{flex:none;color:#7ee0a8;font-size:12px;font-weight:900}
.vnl-result-actions{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.vnl-result-totals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:8px;gap:8px}
.vnl-result-totals div{min-width:0;padding:11px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.vnl-result-totals span{display:block;color:#97a3c4;font-size:11px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-result-totals b{display:block;margin-top:5px;color:#fff;font-size:15px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-result-meta{display:flex;gap:8px;flex-wrap:wrap;color:#97a3c4;font-size:11px;font-weight:700}
.vnl-result-meta span{padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
/* ── X10 what-if slice 1 — "Et si ?" simulation panel ─────────────────────
   DELIBERATELY distinct from the real payslip beside it: dashed violet frame,
   tinted background and an always-visible SIMULATION badge. Static styling
   only (no animation) — reduced-motion safe by construction. */
.vnl-whatif{display:flex;flex-direction:column;gap:10px;padding:13px 14px;border-radius:14px;
  border:1.5px dashed rgba(196,181,253,.55);background:rgba(139,110,255,.07)}
.vnl-whatif-hint{margin:0;color:#a9b2d6;font-size:11px;font-weight:600}
.vnl-whatif-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.vnl-whatif-field{display:flex;flex-direction:column;gap:5px;flex:1 1;min-width:120px}
.vnl-whatif-field>span{font-size:11px;color:#c4b5fd;font-weight:700}
.vnl-whatif-input{height:36px;padding:0 10px;border-radius:10px;border:1px solid rgba(196,181,253,.35);
  background:rgba(20,22,40,.6);color:#fff;font-size:13px;font-weight:600}
.vnl-whatif-input:focus{outline:none;border-color:#c4b5fd}
.vnl-whatif-toggle.is-open{border-color:rgba(196,181,253,.6);color:#c4b5fd}
.vnl-whatif-simulate{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px;cursor:pointer;
  border-radius:10px;border:1px solid rgba(196,181,253,.55);background:rgba(139,110,255,.22);
  color:#e6defe;font-size:12.5px;font-weight:800}
.vnl-whatif-simulate:disabled{opacity:.6;cursor:default}
.vnl-whatif-simulate svg{width:14px;height:14px;flex:none}
.vnl-whatif-result{display:flex;flex-direction:column;gap:9px;padding:12px;border-radius:12px;
  border:1.5px dashed rgba(196,181,253,.45);background:rgba(139,110,255,.05)}
.vnl-whatif-result h4{margin:2px 0 0;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#a9b2d6}
.vnl-whatif-badge{align-self:flex-start;padding:4px 10px;border-radius:999px;font-size:10.5px;font-weight:900;
  letter-spacing:.06em;text-transform:uppercase;color:#1d1633;background:#c4b5fd}
.vnl-whatif-metrics,.vnl-whatif-lines{display:flex;flex-direction:column;gap:5px}
.vnl-whatif-metric,.vnl-whatif-line{display:grid;grid-template-columns:minmax(0,1.3fr) auto auto auto minmax(90px,auto);
  grid-gap:9px;
  gap:9px;align-items:center;font-size:12px}
.vnl-whatif-metric span,.vnl-whatif-line span{min-width:0;color:#cfd6ec;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-whatif-metric b,.vnl-whatif-line b{color:#fff;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.vnl-whatif-metric--head em,.vnl-whatif-metric--head span{font-size:10px;color:#8b96b8;font-style:normal;font-weight:800;text-transform:uppercase;letter-spacing:.06em;text-align:right}
.vnl-whatif-arrow{color:#8b96b8;font-style:normal}
.vnl-whatif-delta{font-style:normal;font-weight:800;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;color:#a9b2d6}
.vnl-whatif-delta.is-up{color:#34d399}
.vnl-whatif-delta.is-down{color:#fca5a5}
/* what-if simulator — the panel is a translucent violet tint (rgba(139,110,255,.07) ≈ pale
   violet) on the light canvas, but the whole family is un-themed for light: muted labels
   (#a9b2d6/#cfd6ec/#8b96b8), the BOLD result numbers (#fff — invisible, and these are the sim
   figures), a dark input field, and a pale-violet-on-pale-violet button. Light theme: muted →
   #5a648a, numbers → dark ink, delta up/down → readable green/red, input → white field, simulate
   → dark-violet on a slightly stronger tint. */
.vnl-shell[data-vnl-theme="light"] .vnl-whatif-hint,
.vnl-shell[data-vnl-theme="light"] .vnl-whatif-result h4,
.vnl-shell[data-vnl-theme="light"] .vnl-whatif-line span,
.vnl-shell[data-vnl-theme="light"] .vnl-whatif-metric span,
.vnl-shell[data-vnl-theme="light"] .vnl-whatif-metric--head em,
.vnl-shell[data-vnl-theme="light"] .vnl-whatif-metric--head span,
.vnl-shell[data-vnl-theme="light"] .vnl-whatif-arrow,
.vnl-shell[data-vnl-theme="light"] .vnl-whatif-delta{color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-whatif-metric b,
.vnl-shell[data-vnl-theme="light"] .vnl-whatif-line b{color:#171d3d}
.vnl-shell[data-vnl-theme="light"] .vnl-whatif-delta.is-up{color:#0f9d6b}
.vnl-shell[data-vnl-theme="light"] .vnl-whatif-delta.is-down{color:#be123c}
.vnl-shell[data-vnl-theme="light"] .vnl-whatif-input{background:#fff;border-color:rgba(20,30,60,.14);color:#171d3d}
.vnl-shell[data-vnl-theme="light"] .vnl-whatif-simulate{
  background:color-mix(in srgb,#8b6eff 14%,#fff);border-color:rgba(139,110,255,.5);color:#6d28d9}
.vnl-result-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.85fr);grid-gap:12px;gap:12px;align-items:start}
.vnl-result-split h3{margin:0 0 8px;color:#fff;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.4px}
.vnl-result-lines{display:flex;flex-direction:column;gap:7px;max-height:320px;overflow:auto}
.vnl-result-line{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.vnl-result-line span{min-width:0;color:#cfd6ec;font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-result-line b{color:#fff;font-size:12px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;white-space:nowrap}
.vnl-result-line.is-deduction b{color:#ffd28a}
/* EXPLAIN-1 — a result line rendered as a <button> (click-to-expand provenance) inherits the row look */
button.vnl-result-line{width:100%;cursor:pointer;font:inherit;text-align:left}
.vnl-result-preview{display:flex;flex-direction:column;gap:10px;padding:13px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.1)}
.vnl-result-preview div{display:flex;flex-direction:column;gap:3px}
.vnl-result-preview div span{color:#97a3c4;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px}
.vnl-result-preview div b{color:#fff;font-size:16px}
.vnl-result-preview dl{display:grid;grid-template-columns:1fr auto;grid-gap:7px 12px;gap:7px 12px;margin:0;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
.vnl-result-preview dt{color:#97a3c4;font-size:12px;font-weight:700}
.vnl-result-preview dd{margin:0;color:#fff;font-size:12px;font-weight:900;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.vnl-result-preview p{margin:0;color:#8b96b8;font-size:11px;line-height:1.4}
.vnl-result-contracts{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.vnl-result-contracts span{display:block;padding:7px 9px;border-radius:9px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);color:#cfd6ec;font-size:12px;font-weight:700}
.vnl-blockers-board{grid-template-columns:minmax(240px,.9fr) minmax(320px,1.1fr) minmax(420px,1.6fr)}
.vnl-blocker-list{display:flex;flex-direction:column;gap:8px;max-height:590px;overflow:auto}
.vnl-blocker-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-gap:9px;gap:9px;align-items:center;width:100%;padding:11px;border-radius:12px;text-align:left;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:#cfd6ec;cursor:pointer}
.vnl-blocker-row:hover,.vnl-blocker-row.is-active{border-color:color-mix(in srgb,#01B574 55%,rgba(255,255,255,.12));border-color:color-mix(in srgb,var(--vnl-accent-payroll,#5b6cff) 55%,rgba(255,255,255,.12));background:rgba(91,108,255,.1)}
.vnl-blocker-row.is-blocked{box-shadow:inset 3px 0 0 rgba(255,108,108,.86)}
.vnl-blocker-row.is-warning{box-shadow:inset 3px 0 0 rgba(255,210,138,.86)}
.vnl-blocker-rowmain{min-width:0;display:flex;flex-direction:column;gap:3px}
.vnl-blocker-rowmain b{color:#fff;font-size:13px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-blocker-rowmain small{color:#8b96b8;font-size:11px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-blocker-source{justify-self:end;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.07);
  color:#cfd6ec;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.35px;white-space:nowrap}
.vnl-blocker-detail{display:grid;grid-template-columns:1fr 1fr;grid-gap:10px;gap:10px}
.vnl-blocker-detail div{min-width:0;padding:12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.vnl-blocker-detail span{display:block;color:#97a3c4;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.4px}
.vnl-blocker-detail p{margin:6px 0 0;color:#fff;font-size:13px;font-weight:700;line-height:1.45;overflow-wrap:anywhere}
.vnl-blocker-path{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}
.vnl-blocker-path span{display:flex;align-items:center;min-height:32px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  color:#cfd6ec;font-size:12px;font-weight:800}
.vnl-vars-board{grid-template-columns:minmax(240px,.9fr) minmax(300px,1.05fr) minmax(440px,1.7fr)}
.vnl-vars-m1{display:flex;flex-direction:column;gap:10px}
.vnl-vars-suggestions{display:flex;flex-direction:column;gap:8px;padding:11px;border-radius:12px;background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.07)}
.vnl-vars-suggestions strong{color:#fff;font-size:12px;font-weight:900}
.vnl-vars-suggestions small{color:#8b96b8;font-size:11px;font-weight:800}
.vnl-vars-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:10px;gap:10px;padding:12px;border-radius:13px;background:rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.06)}
.vnl-vars-form label:not(.vnl-runs-check){display:flex;flex-direction:column;gap:5px;min-width:0}
.vnl-vars-form label span{font-size:11px;font-weight:900;color:#97a3c4;text-transform:uppercase;letter-spacing:.4px}
.vnl-vars-form input,.vnl-vars-form select{width:100%;min-width:0;padding:10px 11px;border-radius:10px;border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.2);color:#eaeefb;font:700 13px var(--vnl-font-body)}
.vnl-vars-form input:focus,.vnl-vars-form select:focus{outline:none;border-color:#01B574;border-color:var(--vnl-accent-payroll,#8b9bff)}
.vnl-vars-full{grid-column:span 2}
.vnl-vars-list{display:flex;flex-direction:column;gap:8px;max-height:360px;overflow:auto}
.vnl-vars-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-gap:10px;gap:10px;align-items:center;padding:10px 11px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.vnl-vars-row span{min-width:0;display:flex;flex-direction:column;gap:2px}
.vnl-vars-row b{color:#fff;font-size:13px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-vars-row small{color:#8b96b8;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-vars-row strong{color:#fff;font-size:12px;font-weight:900;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;white-space:nowrap}
.vnl-vars-row button{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#ffd0d0;cursor:pointer}
.vnl-vars-row button:disabled{opacity:.55;cursor:default}
.vnl-vars-row button svg{width:14px;height:14px}
/* MVP12 PR-03 — read-only variable validation strip + per-row severity badges */
.vnl-vars-validate{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.vnl-vars-validate-summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:11px;border-radius:12px;background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.07)}
.vnl-vars-validate-summary strong{color:#fff;font-size:12px;font-weight:900}
.vnl-vars-validate-summary small{color:#8b96b8;font-size:11px;font-weight:800;flex-basis:100%}
.vnl-vbadge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.2px;white-space:nowrap;width:fit-content}
.vnl-vbadge-ok{color:#bff0d6;background:color-mix(in srgb,#3ecf8e 24%,transparent);background:color-mix(in srgb,var(--vnl-ok,#3ecf8e) 24%,transparent);border:1px solid color-mix(in srgb,#3ecf8e 45%,transparent);border:1px solid color-mix(in srgb,var(--vnl-ok,#3ecf8e) 45%,transparent)}
.vnl-vbadge-warning{color:#ffe2a6;background:color-mix(in srgb,#e8b341 26%,transparent);background:color-mix(in srgb,var(--vnl-warn,#e8b341) 26%,transparent);border:1px solid color-mix(in srgb,#e8b341 50%,transparent);border:1px solid color-mix(in srgb,var(--vnl-warn,#e8b341) 50%,transparent)}
.vnl-vbadge-blocked{color:#ffd0d0;background:color-mix(in srgb,#ff6b6b 22%,transparent);background:color-mix(in srgb,var(--vnl-danger,#ff6b6b) 22%,transparent);border:1px solid color-mix(in srgb,#ff6b6b 48%,transparent);border:1px solid color-mix(in srgb,var(--vnl-danger,#ff6b6b) 48%,transparent)}
/* MVP12 PR-05 — absence payroll-impact breakdown legend */
.vnl-abs-legend{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
/* MVP12 PR-05b — apply-absence-to-payroll action + applied confirmation */
.vnl-abs-apply{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.vnl-abs-apply svg{width:15px;height:15px}
.vnl-abs-applied{animation:vnl-abs-pop .42s cubic-bezier(.22,.61,.36,1);animation:vnl-abs-pop .42s var(--vnl-ease,ease)}
.vnl-abs-applied svg{width:12px;height:12px}
@keyframes vnl-abs-pop{from{transform:scale(.82);opacity:.2}60%{transform:scale(1.06)}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.vnl-abs-applied{animation:none}}
/* MVP12 PR-04 — prorata change form */
.vnl-pro-form{grid-template-columns:repeat(2,minmax(0,1fr))}
/* MVP12 PR-07 — retro-corrections diff + actions */
.vnl-cor-diff{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.vnl-cor-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
/* Module completion — Expenses approvals reason input */
.vnl-exp-reason{width:100%;padding:8px 10px;border-radius:9px;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.2);color:#eaeefb;font:600 12px var(--vnl-font-body)}
/* Module completion — Legal equal-pay obligation inputs */
.vnl-legpay-field{display:grid;grid-gap:6px;gap:6px;max-width:260px}
.vnl-legpay-field span{font:700 12px var(--vnl-font-body);color:var(--vnl-text)}
/* Module completion — Time & Absences bulk-approve row */
.vnl-absb-row{cursor:pointer}
.vnl-absb-row input[type=checkbox]{width:18px;height:18px;accent-color:#22D3EE;accent-color:var(--vnl-accent-time_absences)}
/* MVP12 PR-02 — contract-linked payroll readiness (completeness) */
.vnl-rdy-list{display:flex;flex-direction:column;gap:10px}
.vnl-rdy-card{padding:12px 13px;border-radius:13px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.vnl-rdy-cardh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.vnl-rdy-cardh b{color:#fff;font-size:13px;font-weight:800}
.vnl-rdy-gap{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid rgba(255,255,255,.05)}
.vnl-rdy-mark{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:11px}
.vnl-rdy-mark svg{width:13px;height:13px}
/* MVP12 PR-09 — operator exception inbox (in the blockers screen) */
.vnl-exc-inbox{margin:0 0 14px;padding:13px 14px;border-radius:14px;background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.08)}
.vnl-exc-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.vnl-exc-head strong{color:#fff;font-size:13px;font-weight:900}
.vnl-exc-head svg{width:16px;height:16px;color:#cfd6ec}
.vnl-exc-notice{color:#bff0d6;font-size:11px;font-weight:800;margin-left:auto}
.vnl-exc-list{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow:auto}
.vnl-exc-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-gap:10px;gap:10px;align-items:center;padding:9px 11px;border-radius:11px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.vnl-exc-main{min-width:0;display:flex;flex-direction:column;gap:2px}
.vnl-exc-main b{color:#fff;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-exc-main small{color:#8b96b8;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-exc-ack{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.vnl-exc-ack svg{width:14px;height:14px}
.vnl-exc-fix{color:#ffd0d0;font-size:11px;font-weight:800;white-space:nowrap}
.vnl-imports-board{grid-template-columns:minmax(260px,.95fr) minmax(310px,1.05fr) minmax(460px,1.7fr)}
.vnl-import-type-list{display:flex;flex-direction:column;gap:8px;max-height:360px;overflow:auto}
.vnl-import-type{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-gap:10px;gap:10px;align-items:center;width:100%;padding:10px 11px;border-radius:12px;text-align:left;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);color:#cfd6ec;cursor:pointer}
.vnl-import-type:hover,.vnl-import-type.is-active{border-color:color-mix(in srgb,#01B574 55%,rgba(255,255,255,.12));border-color:color-mix(in srgb,var(--vnl-accent-payroll,#5b6cff) 55%,rgba(255,255,255,.12));background:rgba(91,108,255,.1)}
.vnl-import-type span{min-width:0;display:flex;flex-direction:column;gap:2px}
.vnl-import-type b{color:#fff;font-size:13px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-import-type small{color:#8b96b8;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-import-type svg{width:15px;height:15px;color:#7ee0a8}
.vnl-import-templates{display:flex;flex-direction:column;gap:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.06)}
.vnl-import-templates h3,.vnl-import-chips h3{margin:0;color:#fff;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.4px}
.vnl-import-drop{display:flex;flex-direction:column;align-items:flex-start;gap:11px;min-height:150px;padding:16px;border-radius:14px;
  border:1px dashed rgba(255,255,255,.18);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018))}
.vnl-import-drop > svg{width:26px;height:26px;color:#01B574;color:var(--vnl-accent-payroll,#8b9bff)}
.vnl-import-drop strong{color:#fff;font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.vnl-import-drop input{display:none}
.vnl-import-options{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.vnl-import-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:8px;gap:8px}
.vnl-import-summary div{padding:10px;border-radius:11px;background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.06)}
.vnl-import-summary b{display:block;color:#fff;font-size:18px;line-height:1;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-import-summary span{display:block;margin-top:5px;color:#97a3c4;font-size:11px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-import-chips{display:flex;align-items:flex-start;gap:7px;flex-wrap:wrap}
.vnl-import-chips h3{width:100%}
.vnl-import-chips span{max-width:100%;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);
  color:#cfd6ec;font-size:11px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-import-row{display:grid;grid-template-columns:auto minmax(0,1fr);grid-gap:10px;gap:10px;align-items:start;padding:10px;border-radius:11px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.vnl-import-row b{color:#fff;font-size:13px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.vnl-import-row span{min-width:0;color:#cfd6ec;font-size:12px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.vnl-yearend-board{grid-template-columns:minmax(260px,.95fr) minmax(300px,1fr) minmax(440px,1.65fr)}
.vnl-yearend-list{display:flex;flex-direction:column;gap:8px;max-height:560px;overflow:auto}
.vnl-yearend-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-gap:10px;gap:10px;align-items:center;width:100%;padding:11px;border-radius:12px;text-align:left;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);color:#cfd6ec;cursor:pointer}
.vnl-yearend-row:hover,.vnl-yearend-row.is-active{border-color:color-mix(in srgb,#01B574 55%,rgba(255,255,255,.12));border-color:color-mix(in srgb,var(--vnl-accent-payroll,#5b6cff) 55%,rgba(255,255,255,.12));background:rgba(91,108,255,.1)}
.vnl-yearend-row.is-ready{box-shadow:inset 3px 0 0 rgba(126,224,168,.75)}
.vnl-yearend-row span{min-width:0;display:flex;flex-direction:column;gap:3px}
.vnl-yearend-row b{color:#fff;font-size:13px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-yearend-row small{color:#8b96b8;font-size:11px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-yearend-row svg{width:16px;height:16px;color:#ffd28a}
.vnl-yearend-row.is-ready svg{color:#7ee0a8}
.vnl-yearend-form{grid-template-columns:1fr}
.vnl-yearend-notes{display:flex;flex-direction:column;gap:6px}
.vnl-yearend-notes span{font-size:11px;font-weight:900;color:#97a3c4;text-transform:uppercase;letter-spacing:.4px}
.vnl-yearend-notes textarea{width:100%;min-height:120px;resize:vertical;padding:11px;border-radius:12px;border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.2);color:#eaeefb;font:700 13px var(--vnl-font-body);line-height:1.4}
.vnl-yearend-notes textarea:focus{outline:none;border-color:#01B574;border-color:var(--vnl-accent-payroll,#8b9bff)}
@media (max-width:1180px){.vnl-runs-board{grid-template-columns:repeat(2,minmax(0,1fr))}.vnl-runs-col--wide{min-height:0}}
@media (max-width:760px){.vnl-runs-board{grid-template-columns:1fr}.vnl-runs-refresh{margin-left:0}.vnl-runs-person{grid-template-columns:auto minmax(0,1fr)}.vnl-runs-personmeta,.vnl-runs-rowcalc,.vnl-runs-other{grid-column:2}.vnl-runs-rowcalc{justify-self:start}.vnl-result-totals,.vnl-result-split,.vnl-blocker-detail,.vnl-vars-form,.vnl-import-options{grid-template-columns:1fr}.vnl-vars-full{grid-column:auto}.vnl-blocker-row{grid-template-columns:minmax(0,1fr)}.vnl-blocker-source{justify-self:start}}
.vnl-shell[data-vnl-theme="light"] .vnl-runs-refresh,.vnl-shell[data-vnl-theme="light"] .vnl-runs-col,.vnl-shell[data-vnl-theme="light"] .vnl-sup-context{background:#fff;border-color:rgba(20,30,60,.1);color:#3a4a6a}
.vnl-shell[data-vnl-theme="light"] .vnl-runs-colh,.vnl-shell[data-vnl-theme="light"] .vnl-runs-statgrid b,.vnl-shell[data-vnl-theme="light"] .vnl-runs-cardtop b,
.vnl-shell[data-vnl-theme="light"] .vnl-runs-personmain b,.vnl-shell[data-vnl-theme="light"] .vnl-runs-contracttop b,.vnl-shell[data-vnl-theme="light"] .vnl-runs-contract b,
.vnl-shell[data-vnl-theme="light"] .vnl-runs-workspaces h3,.vnl-shell[data-vnl-theme="light"] .vnl-result-row b,.vnl-shell[data-vnl-theme="light"] .vnl-result-row strong,
.vnl-shell[data-vnl-theme="light"] .vnl-result-head h2,.vnl-shell[data-vnl-theme="light"] .vnl-result-totals b,.vnl-shell[data-vnl-theme="light"] .vnl-result-split h3,
.vnl-shell[data-vnl-theme="light"] .vnl-result-line b,.vnl-shell[data-vnl-theme="light"] .vnl-result-preview div b,.vnl-shell[data-vnl-theme="light"] .vnl-result-preview dd,
.vnl-shell[data-vnl-theme="light"] .vnl-blocker-rowmain b,.vnl-shell[data-vnl-theme="light"] .vnl-blocker-detail p,.vnl-shell[data-vnl-theme="light"] .vnl-vars-row b,.vnl-shell[data-vnl-theme="light"] .vnl-vars-row strong,
.vnl-shell[data-vnl-theme="light"] .vnl-import-type b,.vnl-shell[data-vnl-theme="light"] .vnl-import-drop strong,.vnl-shell[data-vnl-theme="light"] .vnl-import-summary b,.vnl-shell[data-vnl-theme="light"] .vnl-import-row b,
.vnl-shell[data-vnl-theme="light"] .vnl-yearend-row b,.vnl-shell[data-vnl-theme="light"] .vnl-sup-context b,.vnl-shell[data-vnl-theme="light"] .vnl-sup-context dd{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-runs-statgrid div,.vnl-shell[data-vnl-theme="light"] .vnl-runs-mini,.vnl-shell[data-vnl-theme="light"] .vnl-runs-contracttop,.vnl-shell[data-vnl-theme="light"] .vnl-vars-form,.vnl-shell[data-vnl-theme="light"] .vnl-vars-suggestions,
.vnl-shell[data-vnl-theme="light"] .vnl-import-summary div{background:#f4f6fc;border-color:rgba(20,30,60,.08)}
.vnl-shell[data-vnl-theme="light"] .vnl-runs-create input,.vnl-shell[data-vnl-theme="light"] .vnl-runs-create select,.vnl-shell[data-vnl-theme="light"] .vnl-vars-form input,.vnl-shell[data-vnl-theme="light"] .vnl-vars-form select,
.vnl-shell[data-vnl-theme="light"] .vnl-yearend-notes textarea{background:#fff;border-color:rgba(20,30,60,.14);color:#1a2340}
.vnl-shell[data-vnl-theme="light"] .vnl-runs-card,.vnl-shell[data-vnl-theme="light"] .vnl-runs-person,.vnl-shell[data-vnl-theme="light"] .vnl-runs-contract,.vnl-shell[data-vnl-theme="light"] .vnl-runs-workspaces button,.vnl-shell[data-vnl-theme="light"] .vnl-runs-rowcalc,
.vnl-shell[data-vnl-theme="light"] .vnl-result-row,.vnl-shell[data-vnl-theme="light"] .vnl-result-head,.vnl-shell[data-vnl-theme="light"] .vnl-result-totals div,.vnl-shell[data-vnl-theme="light"] .vnl-result-line,
.vnl-shell[data-vnl-theme="light"] .vnl-result-preview,.vnl-shell[data-vnl-theme="light"] .vnl-result-contracts span,.vnl-shell[data-vnl-theme="light"] .vnl-result-meta span,
.vnl-shell[data-vnl-theme="light"] .vnl-blocker-row,.vnl-shell[data-vnl-theme="light"] .vnl-blocker-detail div,.vnl-shell[data-vnl-theme="light"] .vnl-blocker-path span,.vnl-shell[data-vnl-theme="light"] .vnl-blocker-source,.vnl-shell[data-vnl-theme="light"] .vnl-vars-row,.vnl-shell[data-vnl-theme="light"] .vnl-vars-row button,
.vnl-shell[data-vnl-theme="light"] .vnl-import-type,.vnl-shell[data-vnl-theme="light"] .vnl-import-drop,.vnl-shell[data-vnl-theme="light"] .vnl-import-chips span,.vnl-shell[data-vnl-theme="light"] .vnl-import-row,
.vnl-shell[data-vnl-theme="light"] .vnl-yearend-row{background:#fff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-runs-secondary{color:#3a4a6a;border-color:rgba(20,30,60,.14)}
.vnl-shell[data-vnl-theme="light"] .vnl-result-row small,.vnl-shell[data-vnl-theme="light"] .vnl-result-head p,.vnl-shell[data-vnl-theme="light"] .vnl-result-totals span,
.vnl-shell[data-vnl-theme="light"] .vnl-result-meta,.vnl-shell[data-vnl-theme="light"] .vnl-result-line span,.vnl-shell[data-vnl-theme="light"] .vnl-result-preview dt,
.vnl-shell[data-vnl-theme="light"] .vnl-result-preview p,.vnl-shell[data-vnl-theme="light"] .vnl-result-contracts span,.vnl-shell[data-vnl-theme="light"] .vnl-blocker-rowmain small,
.vnl-shell[data-vnl-theme="light"] .vnl-blocker-detail span,.vnl-shell[data-vnl-theme="light"] .vnl-blocker-path span,.vnl-shell[data-vnl-theme="light"] .vnl-blocker-source,.vnl-shell[data-vnl-theme="light"] .vnl-vars-row small,.vnl-shell[data-vnl-theme="light"] .vnl-vars-suggestions small,
.vnl-shell[data-vnl-theme="light"] .vnl-import-type small,.vnl-shell[data-vnl-theme="light"] .vnl-import-summary span,.vnl-shell[data-vnl-theme="light"] .vnl-import-chips span,.vnl-shell[data-vnl-theme="light"] .vnl-import-row span,
.vnl-shell[data-vnl-theme="light"] .vnl-yearend-row small,.vnl-shell[data-vnl-theme="light"] .vnl-yearend-notes span{color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-import-templates h3,.vnl-shell[data-vnl-theme="light"] .vnl-import-chips h3{color:#0f1838}
/* runs screen — muted stat/label spans, the checkbox label, and the amber note that the light
   block above missed (measured 2.3 / 2.0 / 1.4 on white → below AA). Muted spans → #5a648a
   (same as the sibling muted group), check → readable ink, note → a light-appropriate deep amber
   (mirrors the .vnl-persona-dev light fix). */
.vnl-shell[data-vnl-theme="light"] .vnl-runs-statgrid span,
.vnl-shell[data-vnl-theme="light"] .vnl-runs-contracttop span,
.vnl-shell[data-vnl-theme="light"] .vnl-runs-create label span,
.vnl-shell[data-vnl-theme="light"] .vnl-runs-meta{color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-runs-check{color:#3a4a6a}
.vnl-shell[data-vnl-theme="light"] .vnl-runs-note{
  color:#b45309;background:rgba(180,83,9,.10);border-color:rgba(180,83,9,.28)}
/* result-head count/status badge — green #7ee0a8 is legible on the dark card but only ~1.6 on
   the light result-head; deepen it (used by the blockers + result screens). */
.vnl-shell[data-vnl-theme="light"] .vnl-result-head span{color:#0b7a4f}
/* runs alert (e.g. "Contrats indisponibles") — pale danger #ffb0b0 → ~1.7 on white; deepen to a
   readable red (keeps the danger semantic). */
.vnl-shell[data-vnl-theme="light"] .vnl-runs-alert{color:#b91c1c}

/* ----- Pay periods (annual overview) screen ----- */
.vnl-pd-year{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.vnl-pd-ybtn{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);color:#eaeefb;cursor:pointer;transition:background .15s cubic-bezier(.22,.61,.36,1);transition:background .15s var(--vnl-ease,ease)}
.vnl-pd-ybtn:hover{background:rgba(255,255,255,.12)}
.vnl-pd-ybtn svg{width:18px;height:18px}
.vnl-pd-yval{font-family:var(--vnl-font-body);font-size:22px;font-weight:800;color:#fff;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;min-width:72px;text-align:center}
.vnl-pd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-gap:12px;gap:12px}
.vnl-pd-cell{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:13px;min-height:96px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018));border:1px solid rgba(255,255,255,.09)}
.vnl-pd-cell.is-blank{opacity:.55}
.vnl-pd-cell-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.vnl-pd-month{font-size:14px;font-weight:800;color:#fff;text-transform:capitalize}
.vnl-pd-st{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:3px 8px;border-radius:20px}
.vnl-pd-st.is-empty{color:#8b96b8;background:rgba(255,255,255,.06)}
.vnl-pd-st.is-draft{color:#ffd28a;background:rgba(255,180,80,.14);border:1px solid rgba(255,180,80,.3)}
.vnl-pd-st.is-done{color:#8b9bff;background:rgba(91,108,255,.14);border:1px solid rgba(91,108,255,.3)}
.vnl-pd-st.is-paid{color:#7ee0a8;background:rgba(40,200,120,.14);border:1px solid rgba(40,200,120,.3)}
.vnl-pd-gross{font-size:16px;font-weight:700;color:#fff;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.vnl-pd-emp{display:flex;align-items:center;gap:6px;font-size:11px;color:#97a3c4;font-weight:600}
.vnl-pd-emp svg{width:13px;height:13px}
.vnl-shell[data-vnl-theme="light"] .vnl-pd-yval{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-pd-ybtn{background:#f4f6fc;border-color:rgba(20,30,60,.12);color:#1a2340}
.vnl-shell[data-vnl-theme="light"] .vnl-pd-cell{background:#fff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-pd-month,.vnl-shell[data-vnl-theme="light"] .vnl-pd-gross{color:#0f1838}

/* ----- Payroll reports & exports hub ----- */
.vnl-rp-bar{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:18px;padding:14px 16px;border-radius:13px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.vnl-rp-bar-lbl{align-self:center;font-size:11px;font-weight:800;color:#97a3c4;text-transform:uppercase;letter-spacing:.7px}
.vnl-rp-yval{align-self:center;min-width:64px}
.vnl-rp-month{margin-left:4px}
.vnl-rp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));grid-gap:14px;gap:14px}
.vnl-rp-card{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018));border:1px solid rgba(255,255,255,.09)}
.vnl-rp-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vnl-rp-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:rgba(91,108,255,.14);color:#01B574;color:var(--vnl-accent-payroll,#8b9bff)}
.vnl-rp-ic svg{width:20px;height:20px}
.vnl-rp-allperiods{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:#97a3c4;padding:3px 9px;border-radius:20px;background:rgba(255,255,255,.06)}
.vnl-rp-name{font-family:var(--vnl-font-body);font-size:15px;font-weight:700;color:#fff;line-height:1.25}
.vnl-rp-desc{font-size:12px;color:#97a3c4;line-height:1.45;flex:1 1}
.vnl-rp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:4px;padding:10px 14px;border-radius:999px;border-radius:var(--vnl-pill);border:0;
  background:linear-gradient(135deg,#01B574,#3311DB);
  background:linear-gradient(135deg,var(--vnl-accent-payroll,#5b6cff),var(--vnl-accent-accounting,#7a8cff));color:#fff;
  font:700 13px var(--vnl-font-body);cursor:pointer;transition:filter .15s cubic-bezier(.22,.61,.36,1);transition:filter .15s var(--vnl-ease,ease)}
.vnl-rp-btn:hover:not(:disabled){filter:brightness(1.08)}
.vnl-rp-btn:disabled{opacity:.6;cursor:default}
.vnl-rp-btn svg{width:16px;height:16px}
.vnl-rp-err{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#ff9a9a}
.vnl-rp-err svg{width:14px;height:14px}
.vnl-rp-board{grid-template-columns:minmax(250px,.9fr) minmax(260px,.95fr) minmax(430px,1.55fr)}
.vnl-rp-bar--stack{flex-direction:column;align-items:stretch;margin:0;padding:12px}
.vnl-rp-period-row{display:flex;align-items:center;gap:10px}
.vnl-rp-list{display:flex;flex-direction:column;gap:8px;max-height:520px;overflow:auto}
.vnl-rp-row{display:grid;grid-template-columns:auto minmax(0,1fr);grid-gap:10px;gap:10px;align-items:center;padding:10px 11px;border-radius:12px;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);cursor:pointer}
.vnl-rp-row.is-active{border-color:color-mix(in srgb,#01B574 55%,rgba(255,255,255,.12));border-color:color-mix(in srgb,var(--vnl-accent-payroll,#5b6cff) 55%,rgba(255,255,255,.12));background:rgba(91,108,255,.1)}
.vnl-rp-row input{width:17px;height:17px;accent-color:#01B574;accent-color:var(--vnl-accent-payroll,#5b6cff)}
.vnl-rp-rowmain{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);grid-gap:9px;gap:9px;align-items:center}
.vnl-rp-rowmain svg{width:16px;height:16px;color:#01B574;color:var(--vnl-accent-payroll,#8b9bff)}
.vnl-rp-rowmain b{display:block;color:#fff;font-size:13px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-rp-rowmain small{display:block;margin-top:2px;color:#8b96b8;font-size:11px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-rp-columns{display:flex;flex-direction:column;gap:8px;max-height:430px;overflow:auto;padding:10px;border-radius:12px;background:rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.06)}
.vnl-rp-summary{display:flex;align-items:baseline;gap:9px;padding:12px;border-radius:12px;background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.06)}
.vnl-rp-summary b{color:#fff;font-size:24px;line-height:1;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.vnl-rp-summary span{color:#97a3c4;font-size:12px;font-weight:800}
.vnl-rp-detail{display:grid;grid-template-columns:auto minmax(0,1fr);grid-gap:12px;gap:12px;align-items:start;padding:14px;border-radius:13px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}
.vnl-rp-detail h3{margin:0 0 4px;color:#fff;font-size:16px;font-weight:900}
.vnl-rp-detail p{margin:0;color:#97a3c4;font-size:12px;line-height:1.45}
/* PR-07 — journal balance preview (read-only, no GL posting) */
.vnl-jbal{margin:2px 0 4px;padding:14px;border-radius:13px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}
.vnl-jbal-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.vnl-jbal-title{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:#fff}
.vnl-jbal-title svg{width:16px;height:16px;color:#01B574;color:var(--vnl-accent-payroll,#01B574)}
.vnl-jbal-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;border-radius:var(--vnl-pill)}
.vnl-jbal-badge svg{width:13px;height:13px}
.vnl-jbal-badge.is-ok{background:rgba(1,181,116,.16);color:#86efc4;border:1px solid rgba(1,181,116,.3)}
.vnl-jbal-badge.is-bad{background:rgba(255,90,90,.14);color:#ff9a9a;border:1px solid rgba(255,90,90,.3)}
.vnl-jbal-badge.is-neutral{background:rgba(255,255,255,.06);color:#97a3c4;border:1px solid rgba(255,255,255,.1)}
.vnl-jbal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));grid-gap:8px;gap:8px}
.vnl-jbal-cell{display:flex;flex-direction:column;gap:3px;padding:9px 11px;border-radius:10px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.05)}
.vnl-jbal-cell.is-bad{border-color:rgba(255,90,90,.3)}
.vnl-jbal-k{font-size:11px;color:#97a3c4;font-weight:600}
.vnl-jbal-v{font-size:15px;font-weight:700;color:#eaeefb;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.vnl-jbal-imb{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;font-weight:600;color:#ff9a9a}
.vnl-jbal-imb svg{width:13px;height:13px}
.vnl-jbal-note{margin-top:10px;font-size:11px;color:#7c87b0;font-style:italic}
.vnl-shell[data-vnl-theme="light"] .vnl-jbal{background:#f4f6fc;border-color:rgba(20,30,60,.08)}
.vnl-shell[data-vnl-theme="light"] .vnl-jbal-title{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-jbal-cell{background:#fff;border-color:rgba(20,30,60,.06)}
.vnl-shell[data-vnl-theme="light"] .vnl-jbal-v{color:#1a2340}
.vnl-rp-selected{display:flex;flex-wrap:wrap;gap:8px}
.vnl-rp-selected span{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  color:#cfd6ec;font-size:12px;font-weight:800}
.vnl-rp-selected svg{width:14px;height:14px;color:#7ee0a8}
.vnl-rp-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:10px}
@media (max-width:760px){.vnl-rp-board{grid-template-columns:1fr}.vnl-rp-detail{grid-template-columns:1fr}.vnl-rp-actions{align-items:stretch}.vnl-rp-actions button{width:100%}}
.vnl-shell[data-vnl-theme="light"] .vnl-rp-bar{background:#f4f6fc;border-color:rgba(20,30,60,.08)}
.vnl-shell[data-vnl-theme="light"] .vnl-rp-card{background:#fff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-rp-name{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-rp-row,.vnl-shell[data-vnl-theme="light"] .vnl-rp-detail,.vnl-shell[data-vnl-theme="light"] .vnl-rp-selected span{background:#fff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-rp-columns,.vnl-shell[data-vnl-theme="light"] .vnl-rp-summary{background:#f4f6fc;border-color:rgba(20,30,60,.08)}
.vnl-shell[data-vnl-theme="light"] .vnl-rp-rowmain b,.vnl-shell[data-vnl-theme="light"] .vnl-rp-summary b,.vnl-shell[data-vnl-theme="light"] .vnl-rp-detail h3{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-rp-rowmain small,.vnl-shell[data-vnl-theme="light"] .vnl-rp-summary span,.vnl-shell[data-vnl-theme="light"] .vnl-rp-detail p,.vnl-shell[data-vnl-theme="light"] .vnl-rp-selected span{color:#5a648a}

/* ----- AF (family allowance) cantonal rates table ----- */
.vnl-af-note{display:flex;align-items:center;gap:8px;margin-bottom:14px;padding:10px 14px;border-radius:11px;font-size:12px;font-weight:600;
  color:#ffd28a;background:rgba(255,180,80,.1);border:1px solid rgba(255,180,80,.22)}
.vnl-af-note svg{width:15px;height:15px;flex:none}
.vnl-af-table{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.vnl-af-row{display:grid;grid-template-columns:1fr repeat(5,1fr) 1.3fr;grid-gap:8px;gap:8px;padding:10px 14px;font-size:13px;align-items:center}
.vnl-af-row:not(.vnl-af-head){border-top:1px solid rgba(255,255,255,.05)}
.vnl-af-row:nth-child(even):not(.vnl-af-head){background:rgba(255,255,255,.022)}
.vnl-af-row span:not(.vnl-af-canton){text-align:right;color:#cfd6ec;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.vnl-af-head{background:rgba(0,0,0,.28);font-weight:800;color:#8b96b8;font-size:10px;text-transform:uppercase;letter-spacing:.5px}
.vnl-af-head span:not(.vnl-af-canton){color:#8b96b8}
.vnl-af-canton{font-weight:700;color:#fff;letter-spacing:.5px}
@media (max-width:680px){.vnl-af-row{grid-template-columns:1fr 1fr 1fr;font-size:12px}.vnl-af-row span:nth-child(n+4){display:none}}
.vnl-shell[data-vnl-theme="light"] .vnl-af-table{border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-af-canton{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-af-row span:not(.vnl-af-canton){color:#3a4a6a}

/* ----- Payslip templates (rule-based) screen ----- */
.vnl-pst-preview{margin-bottom:20px;padding:16px 18px;border-radius:14px;
  background:linear-gradient(180deg,rgba(91,108,255,.1),rgba(91,108,255,.03));border:1px solid rgba(91,108,255,.2)}
.vnl-pst-prev-h{display:flex;align-items:center;gap:8px;font-family:var(--vnl-font-body);font-size:13px;font-weight:800;color:#fff;margin-bottom:12px}
.vnl-pst-prev-h svg{width:16px;height:16px;color:#01B574;color:var(--vnl-accent-payroll,#8b9bff)}
.vnl-pst-prev-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.vnl-pst-resolve{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border-radius:var(--vnl-pill);border:0;
  background:linear-gradient(135deg,#01B574,#3311DB);
  background:linear-gradient(135deg,var(--vnl-accent-payroll,#5b6cff),var(--vnl-accent-accounting,#7a8cff));color:#fff;
  font:700 13px var(--vnl-font-body);cursor:pointer;transition:filter .15s cubic-bezier(.22,.61,.36,1);transition:filter .15s var(--vnl-ease,ease)}
.vnl-pst-resolve:hover:not(:disabled){filter:brightness(1.08)}
.vnl-pst-resolve:disabled{opacity:.6;cursor:default}
.vnl-pst-resolve svg{width:15px;height:15px}
.vnl-pst-result{margin-top:12px;font-size:13px;color:#cfd6ec;display:flex;align-items:center;gap:8px}
.vnl-pst-result b{color:#fff;font-size:14px}
.vnl-pst-result.is-err{color:#ff9a9a}
.vnl-pst-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));grid-gap:14px;gap:14px}
.vnl-pst-card{display:flex;flex-direction:column;gap:10px;padding:16px 18px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.09)}
.vnl-pst-card-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vnl-pst-name{font-family:var(--vnl-font-body);font-size:15px;font-weight:700;color:#fff}
.vnl-pst-lang{font-size:10px;font-weight:800;letter-spacing:.5px;color:#8b9bff;padding:3px 8px;border-radius:6px;background:rgba(91,108,255,.14);border:1px solid rgba(91,108,255,.3)}
.vnl-pst-default{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:#7ee0a8;padding:3px 9px;border-radius:20px;background:rgba(40,200,120,.14);border:1px solid rgba(40,200,120,.3)}
.vnl-pst-default svg{width:11px;height:11px}
.vnl-pst-rules{display:flex;gap:6px;flex-wrap:wrap}
.vnl-pst-rule{font-size:11px;font-weight:600;color:#cfd6ec;padding:4px 9px;border-radius:7px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.07);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.vnl-pst-catchall{font-size:12px;color:#97a3c4;font-style:italic}
.vnl-shell[data-vnl-theme="light"] .vnl-pst-card{background:#fff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-pst-name,.vnl-shell[data-vnl-theme="light"] .vnl-pst-result b{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-pst-prev-h{color:#0f1838}

/* ----- Payslip template builder (write UI) ----- */
.vnl-pst-newbtn{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:10px 16px;border-radius:999px;border-radius:var(--vnl-pill);border:0;
  background:linear-gradient(135deg,#01B574,#3311DB);
  background:linear-gradient(135deg,var(--vnl-accent-payroll,#5b6cff),var(--vnl-accent-accounting,#7a8cff));color:#fff;
  font:700 13px var(--vnl-font-body);cursor:pointer;transition:filter .15s cubic-bezier(.22,.61,.36,1);transition:filter .15s var(--vnl-ease,ease)}
.vnl-pst-newbtn:hover{filter:brightness(1.08)}
.vnl-pst-newbtn svg{width:16px;height:16px}
.vnl-pst-editor{margin-bottom:20px;padding:18px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(91,108,255,.25)}
.vnl-pst-ed-grid{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.vnl-pst-defchk{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#cfd6ec;cursor:pointer;padding-bottom:9px}
.vnl-pst-defchk input{width:16px;height:16px;accent-color:#01B574;accent-color:var(--vnl-accent-payroll,#5b6cff)}
.vnl-pst-rulesedit{padding:14px;border-radius:12px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.06)}
.vnl-pst-rules-h{font-size:12px;font-weight:800;color:#b9c2dd;text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px}
.vnl-pst-norules{font-size:12px;color:#97a3c4;font-style:italic;margin-bottom:10px}
.vnl-pst-rulerow{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.vnl-pst-rulerow input,.vnl-pst-rulerow select{padding:8px 11px;border-radius:9px;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.25);color:#eaeefb;font-size:13px;font-family:inherit}
.vnl-pst-rulerow input:focus,.vnl-pst-rulerow select:focus{outline:none;border-color:#01B574;border-color:var(--vnl-accent-payroll,#7a8cff)}
.vnl-pst-rfield{flex:1 1;min-width:120px}
.vnl-pst-rop{min-width:130px}
.vnl-pst-rval{flex:1 1;min-width:120px}
.vnl-pst-rdel{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:9px;border:1px solid rgba(255,120,120,.25);background:rgba(255,120,120,.08);color:#ff9a9a;cursor:pointer}
.vnl-pst-rdel svg{width:15px;height:15px}
.vnl-pst-addrule{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:8px 13px;border-radius:9px;border:1px dashed rgba(255,255,255,.18);background:transparent;color:#8b9bff;font:700 12px var(--vnl-font-body);cursor:pointer}
.vnl-pst-addrule svg{width:14px;height:14px}
.vnl-pst-ed-actions{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.vnl-pst-save{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:999px;border-radius:var(--vnl-pill);border:0;background:linear-gradient(135deg,#28c878,#34d058);color:#04210f;font:800 13px var(--vnl-font-body);cursor:pointer}
.vnl-pst-save:disabled{opacity:.6;cursor:default}
.vnl-pst-save svg{width:15px;height:15px}
.vnl-pst-canceledit{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;border-radius:var(--vnl-pill);border:1px solid rgba(255,255,255,.14);background:transparent;color:#cfd6ec;font:700 13px var(--vnl-font-body);cursor:pointer}
.vnl-pst-canceledit svg{width:14px;height:14px}
.vnl-pst-saveerr{font-size:12px;font-weight:600;color:#ff9a9a}
.vnl-pst-cardactions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06)}
.vnl-pst-cardactions button{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#cfd6ec;font:600 12px var(--vnl-font-body);cursor:pointer;transition:background .15s cubic-bezier(.22,.61,.36,1);transition:background .15s var(--vnl-ease,ease)}
.vnl-pst-cardactions button:hover{background:rgba(255,255,255,.1)}
.vnl-pst-cardactions button svg{width:13px;height:13px}
.vnl-pst-cardactions button.is-del{color:#ff9a9a;border-color:rgba(255,120,120,.22)}
.vnl-pst-confirm{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#ffd28a}
.vnl-pst-confirm button{padding:5px 9px}
.vnl-pst-confirm button.is-yes{color:#7ee0a8;border-color:rgba(40,200,120,.3)}
.vnl-shell[data-vnl-theme="light"] .vnl-pst-editor{background:#f4f6fc;border-color:rgba(91,108,255,.25)}
.vnl-shell[data-vnl-theme="light"] .vnl-pst-rulesedit{background:#fff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-pst-rulerow input,.vnl-shell[data-vnl-theme="light"] .vnl-pst-rulerow select{background:#fff;border-color:rgba(20,30,60,.14);color:#1a2340}
.vnl-shell[data-vnl-theme="light"] .vnl-pst-cardactions button{background:#fff;border-color:rgba(20,30,60,.1);color:#3a4a6a}

/* ----- Cockpit intent panel (action-first before the grid — UX 100x) ----- */
.vnl-intent{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin:0 0 22px;padding:20px 24px;border-radius:18px;
  background:linear-gradient(135deg,color-mix(in srgb,#01B574 14%,transparent),transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--vnl-accent-payroll,#5b6cff) 14%,transparent),transparent);
  border:1px solid rgba(255,255,255,.08);
  border:1px solid var(--vnl-line,rgba(255,255,255,.08))}
.vnl-intent-copy{min-width:0}
.vnl-intent-kicker{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#8f9bba;color:var(--vnl-muted,#8f9bba)}
.vnl-intent-dot{width:7px;height:7px;border-radius:50%;background:#01B574;background:var(--vnl-accent-payroll,#5b6cff)}
.vnl-intent-title{margin:8px 0 4px;font-size:18px;font-weight:600;color:#fff;color:var(--vnl-title,#fff)}
.vnl-intent-text{margin:0;font-size:13px;color:#a3aed0;color:var(--vnl-text,#a3aed0);max-width:64ch;line-height:1.5}
.vnl-intent-actions{display:flex;gap:10px;flex-wrap:wrap;flex:none}
.vnl-pill-action{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;border:0;cursor:pointer;
  font:700 13px var(--vnl-font-body);color:#fff;
  background:linear-gradient(135deg,#01B574,#3311DB);
  background:linear-gradient(135deg,var(--vnl-accent-payroll,#5b6cff),var(--vnl-accent-accounting,#7a8cff));
  transition:filter .15s cubic-bezier(.22,.61,.36,1);
  transition:filter .15s var(--vnl-ease,ease)}
.vnl-pill-action:hover{filter:brightness(1.08)}
.vnl-pill-action svg{width:16px;height:16px}
.vnl-pill-action.is-secondary{background:transparent;color:#a3aed0;color:var(--vnl-text,#a3aed0);border:1px solid rgba(255,255,255,.14);border:1px solid var(--vnl-line,rgba(255,255,255,.14))}
.vnl-pill-action.is-secondary:hover{color:#fff;color:var(--vnl-title,#fff);filter:none}
.vnl-pill-action:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,#01B574 45%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--vnl-accent-payroll,#5b6cff) 45%,transparent)}
@media (max-width:680px){.vnl-intent{flex-direction:column;align-items:flex-start}}

/* Premiers pas — honest first-run guide strip. Same token idiom as .vnl-intent. */
.vnl-firststeps{margin:0 0 22px;padding:18px 22px;border-radius:18px;
  background:linear-gradient(135deg,color-mix(in srgb,#7551FF 12%,transparent),transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--vnl-accent-hr,#5b6cff) 12%,transparent),transparent);
  border:1px solid rgba(255,255,255,.08);
  border:1px solid var(--vnl-line,rgba(255,255,255,.08))}
.vnl-fs-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.vnl-fs-copy{min-width:0}
.vnl-fs-title{margin:0 0 3px;font-size:16px;font-weight:600;color:#fff;color:var(--vnl-title,#fff);font-family:var(--vnl-font-display)}
.vnl-fs-sub{margin:0;font-size:13px;color:#a3aed0;color:var(--vnl-text,#a3aed0);line-height:1.5}
/* Shared dismiss affordance: the first-steps guide and the intent panel use the
   same 30px token-only icon button. Aliased onto one declaration block rather
   than duplicated, so a future restyle has a single home. */
.vnl-fs-dismiss,
.vnl-intent-dismiss{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:9px;border:1px solid rgba(255,255,255,.12);border:1px solid var(--vnl-line,rgba(255,255,255,.12));background:transparent;
  color:#8f9bba;
  color:var(--vnl-muted,#8f9bba);cursor:pointer;transition:color .15s cubic-bezier(.22,.61,.36,1),border-color .15s cubic-bezier(.22,.61,.36,1);transition:color .15s var(--vnl-ease,ease),border-color .15s var(--vnl-ease,ease)}
.vnl-fs-dismiss:hover,
.vnl-intent-dismiss:hover{color:#fff;color:var(--vnl-title,#fff);border-color:rgba(255,255,255,.2);border-color:var(--vnl-line-strong,rgba(255,255,255,.2))}
.vnl-fs-dismiss:focus-visible,
.vnl-intent-dismiss:focus-visible{outline:2px solid #8b7bff;outline:2px solid var(--vnl-accent,#8b7bff);outline-offset:2px}
.vnl-fs-dismiss svg,
.vnl-intent-dismiss svg{width:16px;height:16px}
.vnl-fs-steps{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);grid-gap:12px;gap:12px}
.vnl-fs-step{width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;text-align:left;cursor:pointer;
  border:1px solid rgba(255,255,255,.1);
  border:1px solid var(--vnl-line,rgba(255,255,255,.1));
  background:color-mix(in srgb,#7551FF 6%,transparent);
  background:color-mix(in srgb,var(--vnl-accent-hr,#5b6cff) 6%,transparent);
  transition:border-color .15s cubic-bezier(.22,.61,.36,1),transform .15s cubic-bezier(.22,.61,.36,1);
  transition:border-color .15s var(--vnl-ease,ease),transform .15s var(--vnl-ease,ease)}
.vnl-fs-step:hover{border-color:color-mix(in srgb,#7551FF 50%,transparent);border-color:color-mix(in srgb,var(--vnl-accent-hr,#5b6cff) 50%,transparent);transform:translateY(-1px)}
.vnl-fs-step:focus-visible{outline:2px solid #8b7bff;outline:2px solid var(--vnl-accent,#8b7bff);outline-offset:2px}
.vnl-fs-num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  font:700 12px var(--vnl-font-body);color:#fff;
  background:linear-gradient(135deg,#7551FF,#01B574);
  background:linear-gradient(135deg,var(--vnl-accent-hr,#5b6cff),var(--vnl-accent-payroll,#7a8cff))}
.vnl-fs-ic{flex:none;display:inline-flex;color:#a3aed0;color:var(--vnl-text,#a3aed0)}
.vnl-fs-ic svg{width:18px;height:18px}
.vnl-fs-txt{display:flex;flex-direction:column;min-width:0;gap:1px}
.vnl-fs-step-title{font-size:13px;font-weight:600;color:#fff;color:var(--vnl-title,#fff)}
.vnl-fs-step-desc{font-size:11.5px;color:#8f9bba;color:var(--vnl-muted,#8f9bba)}
.vnl-fs-arrow{flex:none;width:16px;height:16px;margin-left:auto;color:#8f9bba;color:var(--vnl-muted,#8f9bba)}
.vnl-shell[data-vnl-mode="sober"] .vnl-fs-step{transition:none}
.vnl-shell[data-vnl-mode="sober"] .vnl-fs-step:hover{transform:none}
@media (max-width:680px){.vnl-fs-steps{grid-template-columns:1fr}}

/* ----- Anticipation strip (cockpit HOME — "what needs attention this month") ----- */
.vnl-ant{margin:0 0 22px;padding:18px 22px;border-radius:18px;
  background:linear-gradient(135deg,color-mix(in srgb,#FFB547 9%,transparent),transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--vnl-sev-warn) 9%,transparent),transparent);
  border:1px solid rgba(255,255,255,.08);
  border:1px solid var(--vnl-line,rgba(255,255,255,.08));
  -webkit-backdrop-filter:blur(8px) saturate(1.1);
          backdrop-filter:blur(8px) saturate(1.1)}
.vnl-ant-head{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.vnl-ant-headl{min-width:0}
.vnl-ant-kicker{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#8f9bba;color:var(--vnl-muted,#8f9bba)}
.vnl-ant-kdot{width:7px;height:7px;border-radius:50%;background:#FFB547;background:var(--vnl-sev-warn)}
.vnl-ant-title{display:flex;align-items:center;margin:7px 0 0;font-family:var(--vnl-font-body);font-size:17px;font-weight:800;color:#fff;color:var(--vnl-title,#fff)}
.vnl-ant-nav{display:inline-flex;align-items:center;gap:8px;flex:none}
.vnl-ant-navbtn{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;cursor:pointer;
  border:1px solid rgba(255,255,255,.12);
  border:1px solid var(--vnl-line,rgba(255,255,255,.12));background:rgba(255,255,255,.04);color:#a3aed0;color:var(--vnl-text,#a3aed0);
  transition:background .15s cubic-bezier(.22,.61,.36,1),color .15s cubic-bezier(.22,.61,.36,1);
  transition:background .15s var(--vnl-ease,ease),color .15s var(--vnl-ease,ease)}
.vnl-ant-navbtn:hover{background:rgba(255,255,255,.09);color:#fff;color:var(--vnl-title,#fff)}
.vnl-ant-navbtn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,#FFB547 45%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--vnl-sev-warn) 45%,transparent)}
.vnl-ant-navbtn svg{width:15px;height:15px}
.vnl-ant-month{min-width:8.5em;text-align:center;font-size:13px;font-weight:700;color:#fff;color:var(--vnl-title,#fff);text-transform:capitalize}
.vnl-ant-sev{display:inline-flex;align-items:center;gap:16px;flex:none;font-size:12.5px;color:#a3aed0;color:var(--vnl-text,#a3aed0)}
.vnl-ant-sevitem{display:inline-flex;align-items:center;gap:6px}
.vnl-ant-sevitem b{color:#fff;color:var(--vnl-title,#fff);font-weight:800}
.vnl-ant-dot{width:9px;height:9px;border-radius:50%;flex:none}
.vnl-ant-dot.is-block{background:#FB7185;background:var(--vnl-sev-block);box-shadow:0 0 0 3px color-mix(in srgb,#FB7185 22%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--vnl-sev-block) 22%,transparent)}
.vnl-ant-dot.is-warn{background:#FFB547;background:var(--vnl-sev-warn);box-shadow:0 0 0 3px color-mix(in srgb,#FFB547 22%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--vnl-sev-warn) 22%,transparent)}
.vnl-ant-body{margin-top:14px}
.vnl-ant-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.vnl-ant-row{position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  padding:11px 13px 11px 15px;border-radius:12px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border:1px solid var(--vnl-line,rgba(255,255,255,.08));background:rgba(255,255,255,.035);
  color:#a3aed0;
  color:var(--vnl-text,#a3aed0);transition:background .15s cubic-bezier(.22,.61,.36,1),border-color .15s cubic-bezier(.22,.61,.36,1),transform .15s cubic-bezier(.22,.61,.36,1);transition:background .15s var(--vnl-ease,ease),border-color .15s var(--vnl-ease,ease),transform .15s var(--vnl-ease,ease)}
.vnl-ant-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#FFB547;background:var(--vnl-sev-warn)}
.vnl-ant-row[data-sev="blocked"]::before{background:#FB7185;background:var(--vnl-sev-block)}
.vnl-ant-row:hover{transform:translateY(-1px);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.vnl-ant-row:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,#FFB547 40%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--vnl-sev-warn) 40%,transparent)}
.vnl-ant-row[data-sev="blocked"]:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,#FB7185 40%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--vnl-sev-block) 40%,transparent)}
.vnl-ant-rowmain{min-width:0;flex:1 1;display:flex;flex-direction:column;gap:3px}
.vnl-ant-rowtitle{font-size:13.5px;font-weight:700;color:#fff;color:var(--vnl-title,#fff);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-ant-rowmeta{display:flex;align-items:center;gap:8px;font-size:11.5px;min-width:0}
.vnl-ant-cat{flex:none;font-weight:700;letter-spacing:.3px;text-transform:uppercase;font-size:10.5px;color:#8f9bba;color:var(--vnl-muted,#8f9bba)}
.vnl-ant-reason{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#a3aed0;color:var(--vnl-text,#a3aed0)}
.vnl-ant-go{width:16px;height:16px;flex:none;color:#8f9bba;color:var(--vnl-muted,#8f9bba)}
.vnl-ant-seeall{margin-top:10px;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;cursor:pointer;
  font:700 12px var(--vnl-font-body);color:#a3aed0;color:var(--vnl-text,#a3aed0);
  border:1px solid rgba(255,255,255,.14);
  border:1px solid var(--vnl-line,rgba(255,255,255,.14));background:transparent;transition:color .15s cubic-bezier(.22,.61,.36,1),background .15s cubic-bezier(.22,.61,.36,1);transition:color .15s var(--vnl-ease,ease),background .15s var(--vnl-ease,ease)}
.vnl-ant-seeall:hover{color:#fff;color:var(--vnl-title,#fff);background:rgba(255,255,255,.06)}
.vnl-ant-seeall:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,#FFB547 40%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--vnl-sev-warn) 40%,transparent)}
.vnl-ant-empty{display:flex;align-items:center;gap:10px;padding:14px 15px;border-radius:12px;
  border:1px solid color-mix(in srgb,#01B574 28%,transparent);
  border:1px solid color-mix(in srgb,var(--vnl-sev-ok) 28%,transparent);
  background:color-mix(in srgb,#01B574 9%,transparent);
  background:color-mix(in srgb,var(--vnl-sev-ok) 9%,transparent);font-size:13px;font-weight:600;color:#fff;color:var(--vnl-title,#fff)}
.vnl-ant-empty svg{width:18px;height:18px;flex:none;color:#01B574;color:var(--vnl-sev-ok)}
.vnl-ant-error,
.vnl-reqerror{display:flex;align-items:center;gap:8px;padding:12px 14px;border-radius:12px;font-size:12.5px;
  border:1px solid rgba(255,255,255,.1);
  border:1px solid var(--vnl-line,rgba(255,255,255,.1));background:rgba(255,255,255,.03);color:#a3aed0;color:var(--vnl-text,#a3aed0)}
.vnl-ant-error svg,
.vnl-reqerror svg{width:16px;height:16px;flex:none}
/* Informational refusal (4xx) — deliberately NOT named "*error*" and NOT role="alert":
   design-system/theme_styles/overrides.css paints [class*="error"] and [role="alert"]
   with a red left rule + red tint via !important, globally. A declined request is not
   an outage, so it must not inherit that treatment. Same box as .vnl-ant-error, neutral
   ink, tokens only. */
.vnl-ant-notice,
.vnl-reqnote{display:flex;align-items:center;gap:8px;padding:12px 14px;border-radius:12px;font-size:12.5px;
  border:1px solid rgba(255,255,255,.1);
  border:1px solid var(--vnl-line,rgba(255,255,255,.1));background:rgba(255,255,255,.03);color:#a3aed0;color:var(--vnl-text,#a3aed0)}
.vnl-ant-notice svg,
.vnl-reqnote svg{width:16px;height:16px;flex:none;color:var(--vnl-muted)}
.vnl-ant-skel{display:flex;flex-direction:column;gap:8px}
.vnl-ant-skelrow{height:46px;border-radius:12px;background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.09),rgba(255,255,255,.05));
  background-size:200% 100%;animation:vnl-ant-shimmer 1.4s linear infinite}
@keyframes vnl-ant-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (max-width:680px){.vnl-ant-head{align-items:flex-start}.vnl-ant-sev{flex-wrap:wrap}}
.vnl-shell[data-vnl-motion="reduced"] .vnl-ant-skelrow,.vnl-shell[data-vnl-mode="sober"] .vnl-ant-skelrow{animation:none}
@media (prefers-reduced-motion:reduce){.vnl-ant-skelrow{animation:none}.vnl-ant-row:hover{transform:none}}

/* ----- HR workspace content (reuses the shared .vnl-runs-board column system) ----- */
.vnl-hr-search{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:11px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.08)}
.vnl-hr-search svg{width:16px;height:16px;flex:none;color:#8b96b8}
.vnl-hr-search input{flex:1 1;min-width:0;background:transparent;border:0;outline:none;color:#eaeefb;font:600 13px var(--vnl-font-body)}
.vnl-hr-search input::placeholder{color:#8b96b8;font-weight:500}
.vnl-hr-list{display:flex;flex-direction:column;gap:6px;overflow:auto;max-height:420px}
.vnl-hr-deptbtn{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:10px;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);color:#cfd6ec;font:700 12px var(--vnl-font-body);cursor:pointer;text-align:left;transition:background .15s cubic-bezier(.22,.61,.36,1);transition:background .15s var(--vnl-ease,ease)}
.vnl-hr-deptbtn:hover{background:rgba(255,255,255,.07)}
.vnl-hr-deptbtn.is-on{border-color:color-mix(in srgb,#7551FF 55%,transparent);border-color:color-mix(in srgb,var(--vnl-accent-hr,#8b9bff) 55%,transparent);background:color-mix(in srgb,#7551FF 14%,transparent);background:color-mix(in srgb,var(--vnl-accent-hr,#8b9bff) 14%,transparent);color:#fff}
.vnl-hr-deptname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-hr-count{flex:none;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;color:#97a3c4}
.vnl-hr-deptbtn.is-on .vnl-hr-count{color:#fff}
.vnl-hr-people{display:flex;flex-direction:column;gap:7px;overflow:auto;max-height:430px}
.vnl-hr-person{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;grid-gap:11px;gap:11px;padding:9px 11px;border-radius:11px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06)}
.vnl-hr-ava{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:800 12px var(--vnl-font-body);color:#fff;background:linear-gradient(135deg,#6d8bff,#7551FF);background:linear-gradient(135deg,#6d8bff,var(--vnl-accent-hr,#7551FF))}
.vnl-hr-pmain{min-width:0;display:flex;flex-direction:column;gap:1px}
.vnl-hr-pmain b{font-size:13px;color:#eaeefb;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-hr-pmain small{font-size:11px;color:#8b96b8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-hr-pdept{flex:none;font-size:11px;font-weight:600;color:#97a3c4;text-transform:uppercase;letter-spacing:.3px}
.vnl-shell[data-vnl-theme="light"] .vnl-hr-search,.vnl-shell[data-vnl-theme="light"] .vnl-hr-deptbtn,.vnl-shell[data-vnl-theme="light"] .vnl-hr-person{background:#fff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-hr-pmain b{color:#0f1838}
/* light-Lumina a11y (batch 4) — muted text/controls still pale on the WHITE surfaces of the HR
   workspace, the readiness panel and the runs screen (all confirmed light via the bg rules
   above: hr → #fff, rp → #fff/#f4f6fc, runs-workspaces button → #fff). */
.vnl-shell[data-vnl-theme="light"] .vnl-hr-count,
.vnl-shell[data-vnl-theme="light"] .vnl-hr-pdept,
.vnl-shell[data-vnl-theme="light"] .vnl-rp-allperiods,
.vnl-shell[data-vnl-theme="light"] .vnl-rp-bar-lbl,
.vnl-shell[data-vnl-theme="light"] .vnl-rp-chip,
.vnl-shell[data-vnl-theme="light"] .vnl-rp-desc,
.vnl-shell[data-vnl-theme="light"] .vnl-rp-detail,
.vnl-shell[data-vnl-theme="light"] .vnl-runs-contract span,
.vnl-shell[data-vnl-theme="light"] .vnl-runs-personmeta,
.vnl-shell[data-vnl-theme="light"] .vnl-runs-rowcalc{color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-hr-deptbtn,
.vnl-shell[data-vnl-theme="light"] .vnl-runs-workspaces button{color:#3a4567}
.vnl-shell[data-vnl-theme="light"] .vnl-hr-search input{color:#171d3d}
.vnl-shell[data-vnl-theme="light"] .vnl-rp-personmain b{color:#171d3d}
/* the selected (.is-on) department button is white-on-pale-accent on light → illegible; the
   accent-hr tint is a LIGHT blue so white can't sit on it — use dark ink (the tint + border keep
   the selected read). */
.vnl-shell[data-vnl-theme="light"] .vnl-hr-deptbtn.is-on,
.vnl-shell[data-vnl-theme="light"] .vnl-hr-deptbtn.is-on .vnl-hr-count{color:#1a2340}

.vnl-hr-ava svg{width:15px;height:15px}

/* =====================================================================
   7 STANDARD THEMES (catalogue "standard" — config/theme-catalog.js)
   Each theme = a distinct, professional, legible palette (canvas + chrome
   + seal accent) PLUS a per-theme MOTION SIGNATURE carried by the already-
   composited sovereign seal (axe-A will-change layer). Perf doctrine:
   - Ambient mood is a STATIC layered gradient on the shell → zero per-frame cost.
   - The only moving signature is the seal (one GPU layer) + the existing
     hover micro-interactions, re-tuned per theme. No new always-on full-canvas
     animation (that was the lag the audit flagged).
   - All seals stop under sober / prefers-reduced-motion (handled above).
   - Legal-number legibility preserved: cards keep their own gradient + white text.
   ===================================================================== */

/* --- Default 🌑 (data-vnl-theme="dark") : the everyday canvas — DELIGHT BY DEFAULT (UX-4).
   Owner verdict: « le thème de base est plutôt triste » — the default used to be flat #0b1437.
   Now: a brand-blue radial swell (top-right) + a violet under-glow (bottom-left) + a faint teal
   mid-wash over a slightly higher-chroma navy, so the default reads alive, never flat.
   - STATIC layered gradient → zero per-frame cost (perf non-negotiable);
   - cards stay opaque accent gradients → legal numbers keep full contrast;
   - --vnl-navd is deliberately NOT lifted: navbar/field/cards derive from it and the :root
     literals are contract-pinned (vnextFieldInkPass) — the lift lives entirely in the ambient. */
.vnl-shell[data-vnl-theme="dark"]{
  --vnl-ambient:
    radial-gradient(120% 85% at 82% -8%,color-mix(in srgb,var(--vnl-accent-it) 30%,transparent),transparent 56%),
    radial-gradient(110% 90% at 6% 108%,color-mix(in srgb,var(--vnl-accent-hr) 22%,transparent),transparent 55%),
    radial-gradient(75% 55% at 48% 55%,color-mix(in srgb,var(--vnl-accent-reporting) 7%,transparent),transparent 72%),
    linear-gradient(180deg,#111d55,#0d1745 46%,#0b1437)}

/* --- Così Carbon 🏎️ : graphite carbon-fibre, racing precision (faster, sharper) --- */
.vnl-shell[data-vnl-theme="carbon"]{--vnl-navd:#13141a;--vnl-navbar:rgba(24,25,33,.66);--vnl-field:#13141a;
  --vnl-seal-accent:#5b6cff;
  --vnl-ambient:
    repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 2px,transparent 2px 6px),
    radial-gradient(120% 90% at 80% -10%,rgba(91,108,255,.14),transparent 60%),#13141a}
.vnl-shell[data-vnl-theme="carbon"] .vnl-headseal svg{animation-duration:80s}
.vnl-shell[data-vnl-theme="carbon"] .vnl-agentseal svg{animation-duration:100s}

/* --- Ocean 🌊 : deep sea blue, calm tide (slower, gentle) --- */
.vnl-shell[data-vnl-theme="ocean"]{--vnl-navd:#04263f;--vnl-navbar:rgba(6,40,66,.6);--vnl-field:#06283f;
  --vnl-seal-accent:#22d3ee;
  --vnl-ambient:
    radial-gradient(140% 100% at 15% 0%,rgba(34,211,238,.12),transparent 55%),
    linear-gradient(180deg,#063150,#04263f 60%)}
.vnl-shell[data-vnl-theme="ocean"] .vnl-headseal svg{animation-duration:160s}
.vnl-shell[data-vnl-theme="ocean"] .vnl-agentseal svg{animation-duration:200s;animation-direction:reverse}

/* --- Aurora 🌌 : violet/teal aurora drift --- */
.vnl-shell[data-vnl-theme="aurora"]{--vnl-navd:#0b0a20;--vnl-navbar:rgba(22,16,46,.62);--vnl-field:#100d28;
  --vnl-seal-accent:#9254de;
  --vnl-ambient:
    radial-gradient(120% 80% at 80% 0%,rgba(146,84,222,.18),transparent 55%),
    radial-gradient(120% 90% at 10% 100%,rgba(34,211,238,.12),transparent 55%),#0b0a20}
.vnl-shell[data-vnl-theme="aurora"] .vnl-agentseal{animation:vnl-breathe 9s ease-in-out infinite}
.vnl-shell[data-vnl-theme="aurora"] .vnl-headseal svg{animation-duration:130s}

/* --- Sunset 🌅 : warm golden-hour glow --- */
.vnl-shell[data-vnl-theme="sunset"]{--vnl-navd:#241023;--vnl-navbar:rgba(54,24,38,.6);--vnl-field:#2a1226;
  --vnl-seal-accent:#fa8c4c;
  --vnl-ambient:
    radial-gradient(130% 90% at 85% -5%,rgba(250,84,28,.22),transparent 55%),
    radial-gradient(120% 90% at 10% 110%,rgba(255,169,64,.12),transparent 55%),
    linear-gradient(180deg,#2b1226,#241023)}
.vnl-shell[data-vnl-theme="sunset"] .vnl-agentseal{animation:vnl-breathe 7s ease-in-out infinite}
.vnl-shell[data-vnl-theme="sunset"] .vnl-headseal svg{animation-duration:120s}

/* --- Forest 🌲 : deep green, organic calm (slow breathe) --- */
.vnl-shell[data-vnl-theme="forest"]{--vnl-navd:#0a1f15;--vnl-navbar:rgba(14,38,24,.6);--vnl-field:#0c2218;
  --vnl-seal-accent:#52c41a;
  --vnl-ambient:
    radial-gradient(130% 90% at 20% 0%,rgba(82,196,26,.13),transparent 55%),
    linear-gradient(180deg,#0d2719,#0a1f15)}
.vnl-shell[data-vnl-theme="forest"] .vnl-headseal svg{animation-duration:170s}
.vnl-shell[data-vnl-theme="forest"] .vnl-agentseal svg{animation-duration:210s}

/* --- Neon 💡 : cyber magenta/cyan on near-black (electric glow breathe) --- */
.vnl-shell[data-vnl-theme="neon"]{--vnl-navd:#08080f;--vnl-navbar:rgba(13,13,22,.72);--vnl-field:#0a0a14;
  --vnl-seal-accent:#ff3df0;
  --vnl-ambient:
    radial-gradient(120% 80% at 80% 0%,rgba(255,0,255,.14),transparent 50%),
    radial-gradient(120% 80% at 12% 100%,rgba(0,255,255,.12),transparent 50%),#08080f}
.vnl-shell[data-vnl-theme="neon"] .vnl-headseal{animation:vnl-breathe 4.5s ease-in-out infinite}
.vnl-shell[data-vnl-theme="neon"] .vnl-headseal svg{animation-duration:70s}
.vnl-shell[data-vnl-theme="neon"] .vnl-agentseal svg{animation-duration:90s}

/* --- Midnight 🌙 : deep navy night, very slow + faint twinkle --- */
.vnl-shell[data-vnl-theme="midnight"]{--vnl-navd:#001226;--vnl-navbar:rgba(0,21,41,.62);--vnl-field:#001a31;
  --vnl-seal-accent:#1890ff;
  --vnl-ambient:
    radial-gradient(140% 100% at 50% -10%,rgba(24,144,255,.13),transparent 55%),
    linear-gradient(180deg,#001a33,#001226)}
.vnl-shell[data-vnl-theme="midnight"] .vnl-headseal svg{animation-duration:200s}
.vnl-shell[data-vnl-theme="midnight"] .vnl-agentseal{animation:vnl-breathe 11s ease-in-out infinite}
.vnl-shell[data-vnl-theme="midnight"] .vnl-agentseal svg{animation-duration:240s}

/* the per-theme ambient "breathe" — opacity only (composited, no repaint), gentle */
@keyframes vnl-breathe{0%,100%{opacity:.16}50%{opacity:.26}}

/* sober / reduced-motion already neutralise seal animation; also stop the breathe so the
   ambient signature is fully calm in those modes. */
.vnl-shell[data-vnl-mode="sober"] .vnl-headseal,
.vnl-shell[data-vnl-mode="sober"] .vnl-agentseal{animation:none!important}
@media (prefers-reduced-motion:reduce){
  .vnl-headseal,.vnl-agentseal{animation:none!important}
  .vnl::before{animation:none!important}
}

/* theme-picker swatches (preview dots) — colours live HERE (token authority), keyed by data-th,
   so the picker component carries no raw hex. Each matches its [data-vnl-theme] seal accent. */
.vnl-th-sw{width:13px;height:13px;border-radius:50%;flex:none;border:1px solid rgba(255,255,255,.22)}
.vnl-th-sw[data-th="lumina"]{background:linear-gradient(135deg,#7c3aed,#8b5cf6)}
.vnl-th-sw[data-th="lumina-nuit"]{background:linear-gradient(135deg,#121233,#7c3aed)}
.vnl-th-sw[data-th="dark"]{background:linear-gradient(135deg,#0b1437,#243056)}
.vnl-th-sw[data-th="light"]{background:#eef1f9}
.vnl-th-sw[data-th="carbon"]{background:#5b6cff}
.vnl-th-sw[data-th="ocean"]{background:#22d3ee}
.vnl-th-sw[data-th="aurora"]{background:#9254de}
.vnl-th-sw[data-th="sunset"]{background:#fa8c4c}
.vnl-th-sw[data-th="forest"]{background:#52c41a}
.vnl-th-sw[data-th="neon"]{background:#ff3df0}
.vnl-th-sw[data-th="midnight"]{background:#1890ff}

/* =====================================================================
   GENERATED-THEME MOTION PROFILES (data-vnl-motion, set by vnextThemeGen.js)
   Per-category animation signature for the runtime-generated catalogue themes. Only the already-
   composited sovereign seal moves (speed/direction + the opacity-only vnl-breathe) — no new
   always-on full-canvas animation. sober + prefers-reduced-motion already neutralise all seals.
   ===================================================================== */
.vnl-shell[data-vnl-motion="precise"] .vnl-headseal svg{animation-duration:95s}
.vnl-shell[data-vnl-motion="precise"] .vnl-agentseal svg{animation-duration:125s}

/* calm = least motion (accessibility): very slow, no breathe */
.vnl-shell[data-vnl-motion="calm"] .vnl-headseal svg{animation-duration:240s}
.vnl-shell[data-vnl-motion="calm"] .vnl-agentseal svg{animation-duration:300s}

.vnl-shell[data-vnl-motion="organic"] .vnl-headseal svg{animation-duration:180s}
.vnl-shell[data-vnl-motion="organic"] .vnl-agentseal svg{animation-duration:220s}
.vnl-shell[data-vnl-motion="organic"] .vnl-agentseal{animation:vnl-breathe 10s ease-in-out infinite}

.vnl-shell[data-vnl-motion="playful"] .vnl-headseal svg{animation-duration:110s}
.vnl-shell[data-vnl-motion="playful"] .vnl-agentseal{animation:vnl-breathe 7s ease-in-out infinite}

.vnl-shell[data-vnl-motion="electric"] .vnl-headseal svg{animation-duration:70s}
.vnl-shell[data-vnl-motion="electric"] .vnl-headseal{animation:vnl-breathe 4s ease-in-out infinite}

.vnl-shell[data-vnl-motion="bold"] .vnl-headseal svg{animation-duration:100s}
.vnl-shell[data-vnl-motion="bold"] .vnl-agentseal{animation:vnl-breathe 6s ease-in-out infinite}

/* sober / reduced-motion stop generated-theme seals too (defence in depth) */
.vnl-shell[data-vnl-mode="sober"][data-vnl-motion] .vnl-headseal,
.vnl-shell[data-vnl-mode="sober"][data-vnl-motion] .vnl-agentseal{animation:none!important}

/* Living-ambient cadence per motion profile (calm = barely drifts → electric = liveliest).
   Only animation-duration changes; the layer stays one cheap GPU-composited glow. */
.vnl-shell[data-vnl-motion="calm"] .vnl::before{animation-duration:90s}
.vnl-shell[data-vnl-motion="precise"] .vnl::before{animation-duration:54s}
.vnl-shell[data-vnl-motion="organic"] .vnl::before{animation-duration:34s}
.vnl-shell[data-vnl-motion="playful"] .vnl::before{animation-duration:26s}
.vnl-shell[data-vnl-motion="bold"] .vnl::before{animation-duration:22s}
.vnl-shell[data-vnl-motion="electric"] .vnl::before{animation-duration:16s}
/* Sober mode + reduced-motion freeze the living ambient (non-negotiable a11y/trust). */
.vnl-shell[data-vnl-mode="sober"] .vnl::before{animation:none!important}

/* theme picker — grouped, scrollable (standard + generated catalogue categories) */
.vnl-theme-menu{max-height:62vh;overflow-y:auto;min-width:236px}
.vnl-th-grouphd{padding:9px 12px 4px;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#7a86a8}
.vnl-th-group + .vnl-th-group{border-top:1px solid rgba(255,255,255,.07);margin-top:4px}
.vnl-shell[data-vnl-theme="light"] .vnl-th-grouphd{color:#8a93b0}
.vnl-shell[data-vnl-theme="light"] .vnl-th-group + .vnl-th-group{border-top-color:rgba(20,30,60,.1)}

/* ===== picker transition polish (vNext-only; pure CSS) =====
   Smooth theme-APPLY crossfade: picking a theme makes the cockpit visibly transform
   (the living-ambient glow + seal + shell base crossfade) instead of hard-cutting.
   @property makes the accent custom-prop interpolable; background-color transitions the
   base. Graceful: browsers without @property hard-cut (current behaviour). */
@property --vnl-seal-accent{syntax:"<color>";inherits:true;initial-value:#3965ff}
.vnl-shell{transition:--vnl-seal-accent .5s ease, background-color .5s ease}

/* Menu entrance — a quick spring-in so the picker feels alive. */
.vnl-theme-menu{animation:vnl-menu-in .22s cubic-bezier(.2,.8,.2,1)}
@keyframes vnl-menu-in{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}

/* Iconic swatches — larger, springy hover, accent glow; selected = white ring + accent halo. */
.vnl-theme-menu .vnl-th-sw{width:16px;height:16px;
  transition:transform .18s cubic-bezier(.2,.9,.2,1.25),box-shadow .18s ease}
.vnl-theme-menu .vnl-lang-item{transition:background .15s ease,transform .1s ease}
.vnl-theme-menu .vnl-lang-item:hover .vnl-th-sw{transform:scale(1.3) rotate(8deg);
  box-shadow:0 0 0 3px rgba(255,255,255,.14),0 4px 12px rgba(0,0,0,.4)}
.vnl-theme-menu .vnl-lang-item:active{transform:scale(.985)}
.vnl-theme-menu .vnl-lang-item.is-active{background:color-mix(in srgb,#3965FF 22%,transparent);background:color-mix(in srgb,var(--vnl-seal-accent,var(--vnl-accent-it)) 22%,transparent)}
.vnl-theme-menu .vnl-lang-item.is-active .vnl-th-sw{transform:scale(1.15);
  box-shadow:0 0 0 2px rgba(255,255,255,.92),0 0 10px color-mix(in srgb,#3965FF 60%,transparent);
  box-shadow:0 0 0 2px rgba(255,255,255,.92),0 0 10px color-mix(in srgb,var(--vnl-seal-accent,var(--vnl-accent-it)) 60%,transparent)}
/* Honour reduced motion: no entrance, no crossfade, no springy swatches. */
@media (prefers-reduced-motion:reduce){
  .vnl-theme-menu{animation:none}
  .vnl-shell{transition:none}
  .vnl-theme-menu .vnl-th-sw,.vnl-theme-menu .vnl-lang-item{transition:none}
}

/* fun-pack opt-in toggle at the bottom of the theme picker (OFF by default) */
.vnl-th-funrow{display:flex;align-items:center;gap:10px;margin-top:6px;padding:11px 12px;cursor:pointer;
  border-top:1px solid rgba(255,255,255,.08);color:#a3aed0;font:600 12px var(--vnl-font-body)}
.vnl-th-funrow input{width:15px;height:15px;flex:none;accent-color:#FFB547;accent-color:var(--vnl-accent-billing,#FFB547);cursor:pointer}
.vnl-th-funlbl{flex:1 1}
.vnl-shell[data-vnl-theme="light"] .vnl-th-funrow{border-top-color:rgba(20,30,60,.1);color:#5a648a}

/* Governed accent picker row (lumina family) — a label + 5 swatch buttons. Colours are token
   authority (data-acc), never inline in JSX. 'auto' shows a rainbow to signal "follow module". */
.vnl-th-accentrow{display:flex;align-items:center;gap:10px;padding:9px 12px 12px;
  border-top:1px solid rgba(255,255,255,.08);color:#a3aed0;font:600 12px var(--vnl-font-body)}
.vnl-th-acclbl{flex:1 1}
.vnl-th-accsw{display:flex;gap:7px;flex:none}
.vnl-th-acc{width:18px;height:18px;border-radius:50%;padding:0;cursor:pointer;
  border:2px solid rgba(255,255,255,.35);box-shadow:0 2px 6px -2px rgba(0,0,0,.5);
  transition:transform .12s ease,border-color .12s ease}
.vnl-th-acc:hover{transform:scale(1.18)}
.vnl-th-acc.is-active{border-color:#fff;transform:scale(1.12);
  box-shadow:0 0 0 2px color-mix(in srgb,currentColor 40%,transparent),0 2px 6px -2px rgba(0,0,0,.5)}
.vnl-th-acc[data-acc="violet"]{background:#7b5cff}
.vnl-th-acc[data-acc="green"]{background:#12b981}
.vnl-th-acc[data-acc="blue"]{background:#3f7bff}
.vnl-th-acc[data-acc="pink"]{background:#ff5c93}
.vnl-th-acc[data-acc="auto"]{background:conic-gradient(from 210deg,#7b5cff,#3f7bff,#12b981,#ff5c93,#7b5cff)}
.vnl-shell[data-vnl-theme="light"] .vnl-th-accentrow{border-top-color:rgba(20,30,60,.1);color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-th-acc{border-color:rgba(20,30,60,.2)}
.vnl-shell[data-vnl-theme="light"] .vnl-th-acc.is-active{border-color:#171d3d}
@media (prefers-reduced-motion:reduce){.vnl-th-acc{transition:none}}

/* MVP-100 PR-02 — tenant payroll-readiness gate banner (shown before calculation) */
.vnl-rdy{display:flex;align-items:flex-start;gap:11px;padding:13px 16px;border-radius:14px;margin:0 0 18px;
  font:600 13px var(--vnl-font-body)}
.vnl-rdy svg{width:18px;height:18px;flex:none;margin-top:1px}
.vnl-rdy-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.vnl-rdy-title{font-weight:700}
.vnl-rdy-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:3px;font-weight:500;opacity:.92}
.vnl-rdy-emp{font-weight:600;font-size:.85em;opacity:.95}
.vnl-runtime{display:flex;flex-direction:column;gap:7px;margin-top:2px;max-width:min(860px,100%)}
.vnl-runtime-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;grid-gap:10px;gap:10px;padding:8px 10px;border-radius:11px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}
.vnl-runtime-copy{min-width:0;display:flex;flex-direction:column;gap:2px;color:inherit}
.vnl-runtime-copy b{font-size:12px;font-weight:800;line-height:1.25;color:currentColor}
.vnl-runtime-copy small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:1.35;opacity:.82}
.vnl-runtime-action{justify-self:end;white-space:nowrap}
.vnl-tf-on{border-color:color-mix(in srgb,#01B574 55%,transparent);border-color:color-mix(in srgb,var(--vnl-accent-payroll,#5b6cff) 55%,transparent);background:color-mix(in srgb,#01B574 18%,transparent);background:color-mix(in srgb,var(--vnl-accent-payroll,#5b6cff) 18%,transparent)}
.vnl-rdy--ready{background:color-mix(in srgb,#01B574 13%,transparent);background:color-mix(in srgb,var(--vnl-accent-payroll) 13%,transparent);color:#86efc4;
  border:1px solid color-mix(in srgb,#01B574 34%,transparent);
  border:1px solid color-mix(in srgb,var(--vnl-accent-payroll) 34%,transparent)}
.vnl-rdy--attention{background:rgba(245,158,11,.14);color:#fbbf24;border:1px solid rgba(245,158,11,.34)}
.vnl-rdy--blocked{background:rgba(239,68,68,.14);color:#fca5a5;border:1px solid rgba(239,68,68,.34)}
@media (max-width:720px){.vnl-runtime-row{grid-template-columns:1fr;align-items:start}.vnl-runtime-action{justify-self:start}.vnl-runtime-copy small{white-space:normal}}

/* Locked capability cards (Track C) — a granted-but-not-held capability, SHOWN for
   discoverability but never openable (no fake access). Inert like "soon", with a
   distinct lock affordance. vnext-launcher.css is the guard-exempt look layer. */
.vnl-shell .vnl-card.is-locked{opacity:.72!important}
.vnl-card.is-locked{cursor:not-allowed;opacity:.72;transform:none;filter:grayscale(.22)}
.vnl-card.is-locked:hover{box-shadow:0 16px 36px -18px rgba(0,0,0,.6)}
.vnl-card.is-locked .vnl-shine,.vnl-card.is-locked .vnl-go{display:none}
.vnl-card.is-locked:hover .vnl-sq{transform:none}
/* Locked-capability badge — same white pill as .vnl-soon (the cards are theme-immune
   colored surfaces with white text); the Lock icon + the card's grayscale distinguish
   it from "soon". White-on-color guarantees contrast on any accent. */
.vnl-locked{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.82);background:rgba(255,255,255,.1);padding:4px 10px;border-radius:999px;border-radius:var(--vnl-pill)}
.vnl-locked svg{width:13px;height:13px}

/* Dev-access badge on the persona chip (Track C) — shown ONLY when the provisional
   persona (not real grants) drives access, so the chip is never mistaken for real access. */
.vnl-persona-dev{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;background:rgba(245,158,11,.18);background:var(--vnl-warn-bg,rgba(245,158,11,.18));color:#f59e0b;color:var(--vnl-warn,#f59e0b);vertical-align:middle}

/* Per-card secondary Luna action (Track C, pass 5) — opens Luna in the card's agent
   mode. A sibling control (NOT nested in the card primary click): onClick/onKeyDown
   stopPropagation, so arrow-key roving over .vnl-card[role="button"] is unchanged. */
.vnl-card-luna{position:absolute;top:14px;right:14px;z-index:3;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.12);color:#fff;cursor:pointer;opacity:.62;transition:opacity .15s,background .15s,transform .15s}
.vnl-card:hover .vnl-card-luna,.vnl-card-luna:focus-visible{opacity:1}
.vnl-card-luna:hover{background:rgba(255,255,255,.16);transform:translateY(-1px)}
.vnl-card-luna svg{width:15px;height:15px}

/* Luna agent panel container (Track C, A-1) — hosts the canonical ChatPane inside the
   leaf view. Gives the chat room; ChatPane manages its own internal layout. */
.vnl-leaf-content{position:relative;display:flex;flex-direction:column;width:100%;max-width:960px;margin:0 auto;padding:8px 24px 24px;min-height:62vh}
.vnl-leaf-content > *{flex:1 1;min-height:0}

/* ============================================================
   CF-1 / CF-1.5 — chat-first home: the full-screen Luna conversation
   as the landing, dressed Claude-caliber. The column is the canvas
   (not a card inside it); ChatPane keeps its own scroll region and is
   re-skinned HERE ONLY via its additive cc-* hooks — every other
   ChatPane consumer stays byte-identical. Luna's identity accent is
   the HR violet (the same accent the Luna agent surface derives),
   carried by --vnl-chat-accent so a future re-tint is one line.
   ============================================================ */
.vnl-chat-home{position:relative;display:flex;flex-direction:column;width:100%;max-width:848px;margin:0 auto;
  padding:8px 24px 28px;min-height:calc(100vh - 128px);--vnl-chat-accent:var(--vnl-accent-hr)}
.vnl-chat-home > *{flex:1 1;min-height:0}
/* Very subtle STATIC Luna-accent glow behind the column — token-derived,
   no animation (reduced-motion safe by construction), z-index:-1 inside the
   .vnl isolated stacking context → behind all content, above the ambient. */
.vnl-chat-home::before{content:"";position:absolute;top:3%;left:-16%;right:-16%;height:54%;z-index:-1;pointer-events:none;
  background:radial-gradient(46% 60% at 50% 34%, color-mix(in srgb,var(--vnl-chat-accent) 14%,transparent), transparent 72%)}
.vnl-shell[data-vnl-theme="light"] .vnl-chat-home::before{opacity:.55;mix-blend-mode:multiply}
.vnl-shell[data-vnl-mode="sober"] .vnl-chat-home::before{display:none}

/* The legacy pane chrome retires on the landing: the toolbar carries identity,
   the hero carries the greeting — no duplicate "Assistant" header bar. */
.vnl-chat-home .cc-header{display:none}
.vnl-chat-home .cc-log{padding:18px 6px}
/* While pristine the hero speaks the welcome — the (identical-content) welcome
   bubble stays out of the way and joins the stream once the conversation starts. */
.vnl-chat-home .cc-pristine .cc-log{flex:0 0;padding:0;overflow:hidden}
.vnl-chat-home .cc-pristine .cc-log .cc-row{display:none}

/* ----- welcome hero (pristine conversation only) ----- */
.vnl-chat-home .cc-hero{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px 12px;min-height:0}
.vnl-chat-home .cc-hero-mark{position:relative;width:52px;height:52px;flex:none;border-radius:50%;
  background:radial-gradient(120% 120% at 30% 24%, color-mix(in srgb,var(--vnl-chat-accent) 55%,#fff) 0%, var(--vnl-chat-accent) 46%, color-mix(in srgb,var(--vnl-chat-accent) 40%,#0b1437) 100%);
  background:radial-gradient(120% 120% at 30% 24%, color-mix(in srgb,var(--vnl-chat-accent) 55%,#fff) 0%, var(--vnl-chat-accent) 46%, color-mix(in srgb,var(--vnl-chat-accent) 40%,var(--vnl-navd)) 100%);
  box-shadow:0 14px 38px -12px color-mix(in srgb,var(--vnl-chat-accent) 65%,transparent), inset 0 1px 1px rgba(255,255,255,.35)}
/* Signature aura — a soft token-derived halo ring behind the Luna orb so the one
   memorable mark reads as lit, not flat. Static (reduced-motion safe by construction);
   a slow breathe is added only under the no-preference gate below. */
.vnl-chat-home .cc-hero-mark::after{content:"";position:absolute;inset:-14px;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in srgb,var(--vnl-chat-accent) 34%,transparent), transparent 78%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--vnl-chat-accent) 22%,transparent) inset}
.vnl-chat-home .cc-hero-title{margin:22px 0 0;font-size:clamp(26px,4.2vw,34px);line-height:1.14;font-weight:800;
  letter-spacing:-.02em;max-width:24ch;text-wrap:balance}
/* Heading isolation from the app's global h1–h6 theme colors (same discipline
   as .vnl-title); the light block below re-inks it. */
.vnl-shell .vnl-chat-home .cc-hero-title{color:#fff!important}
.vnl-chat-home .cc-hero-sub{margin:12px 0 0;font-size:15px;line-height:1.5;color:#97a3c4;max-width:52ch}
.vnl-chat-home .cc-hero-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px;max-width:600px}
.vnl-chat-home .cc-hero-chip{padding:10px 18px;border-radius:999px;border-radius:var(--vnl-pill);cursor:pointer;
  border:1px solid color-mix(in srgb,var(--vnl-chat-accent) 26%,transparent);
  background:color-mix(in srgb,var(--vnl-chat-accent) 7%,transparent);
  color:#dbe3fb;font:600 13.5px/1.2 var(--vnl-font-body);
  transition:border-color .2s cubic-bezier(.22,.61,.36,1),background .2s cubic-bezier(.22,.61,.36,1),color .2s cubic-bezier(.22,.61,.36,1),transform .2s cubic-bezier(.22,.61,.36,1);
  transition:border-color .2s var(--vnl-ease),background .2s var(--vnl-ease),color .2s var(--vnl-ease),transform .2s var(--vnl-ease)}
.vnl-chat-home .cc-hero-chip:hover{border-color:color-mix(in srgb,var(--vnl-chat-accent) 55%,transparent);
  background:color-mix(in srgb,var(--vnl-chat-accent) 16%,transparent);color:#fff;transform:translateY(-1px)}
.vnl-chat-home .cc-hero-chip:focus-visible{outline:2px solid color-mix(in srgb,var(--vnl-chat-accent) 70%,transparent);outline-offset:2px}

/* ----- message stream (accent-tinted user · calm-surface Luna) ----- */
.vnl-chat-home .cc-row{margin-bottom:14px}
.vnl-chat-home .cc-msg{max-width:78%;border-radius:18px;padding:12px 16px;font-size:15px;line-height:1.55}
.vnl-chat-home .cc-msg-bot{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.07);
  color:#eaeefb;border-bottom-left-radius:6px}
.vnl-chat-home .cc-msg-user{border:0;color:#fff;border-bottom-right-radius:6px;
  background:linear-gradient(135deg, color-mix(in srgb,var(--vnl-chat-accent) 88%,#fff), color-mix(in srgb,var(--vnl-chat-accent) 72%,#0b1437));
  background:linear-gradient(135deg, color-mix(in srgb,var(--vnl-chat-accent) 88%,#fff), color-mix(in srgb,var(--vnl-chat-accent) 72%,var(--vnl-navd)));
  box-shadow:0 10px 26px -16px color-mix(in srgb,var(--vnl-chat-accent) 80%,transparent)}

/* ----- input bar — the centerpiece (Claude-style frosted pill) ----- */
.vnl-chat-home .cc-inputbar{border-top:0;background:transparent;padding:16px 0 4px}
.vnl-chat-home .cc-input{height:54px;padding:0 22px;border-radius:999px;border-radius:var(--vnl-pill);
  background:color-mix(in srgb,#0b1437 74%,transparent);
  background:color-mix(in srgb,var(--vnl-field) 74%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.13);color:#fff;color:var(--vnl-field-ink);font-size:16px;font-weight:500;
  box-shadow:0 22px 48px -30px rgba(0,0,0,.85);
  transition:border-color .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s cubic-bezier(.22,.61,.36,1);
  transition:border-color .2s var(--vnl-ease),box-shadow .2s var(--vnl-ease)}
.vnl-chat-home .cc-input::placeholder{color:#6b769a}
.vnl-chat-home .cc-input:focus{border-color:color-mix(in srgb,var(--vnl-chat-accent) 60%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--vnl-chat-accent) 20%,transparent),0 22px 48px -30px rgba(0,0,0,.85)}
.vnl-chat-home .cc-send{width:46px;height:46px;flex:none;border-radius:50%;border:0;color:#fff;
  background:linear-gradient(135deg,var(--vnl-chat-accent),color-mix(in srgb,var(--vnl-chat-accent) 45%,#3965FF));
  background:linear-gradient(135deg,var(--vnl-chat-accent),color-mix(in srgb,var(--vnl-chat-accent) 45%,var(--vnl-accent-it)));
  box-shadow:0 12px 28px -14px color-mix(in srgb,var(--vnl-chat-accent) 80%,transparent);
  transition:filter .2s cubic-bezier(.22,.61,.36,1),transform .2s cubic-bezier(.22,.61,.36,1);
  transition:filter .2s var(--vnl-ease),transform .2s var(--vnl-ease)}
.vnl-chat-home .cc-send:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-1px)}
.vnl-chat-home .cc-send:disabled{background:rgba(255,255,255,.07);color:rgba(255,255,255,.3);box-shadow:none}

/* ----- light appearance (paired inks — --vnl-field/--vnl-field-ink flip upstream) ----- */
.vnl-shell[data-vnl-theme="light"] .vnl-chat-home .cc-hero-title{color:#0f1838!important}
.vnl-shell[data-vnl-theme="light"] .vnl-chat-home .cc-hero-sub{color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-chat-home .cc-hero-chip{background:#fff;border-color:rgba(20,30,60,.12);color:#3a4366}
.vnl-shell[data-vnl-theme="light"] .vnl-chat-home .cc-hero-chip:hover{border-color:color-mix(in srgb,var(--vnl-chat-accent) 45%,transparent);
  background:color-mix(in srgb,var(--vnl-chat-accent) 10%,#fff);color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-chat-home .cc-msg-bot{background:#fff;border-color:rgba(20,30,60,.08);color:#1a2340;
  box-shadow:0 10px 24px -18px rgba(20,30,60,.35)}
.vnl-shell[data-vnl-theme="light"] .vnl-chat-home .cc-input{border-color:rgba(20,30,60,.12);box-shadow:0 18px 40px -30px rgba(20,30,60,.5)}
.vnl-shell[data-vnl-theme="light"] .vnl-chat-home .cc-input::placeholder{color:#8a93b5}
.vnl-shell[data-vnl-theme="light"] .vnl-chat-home .cc-send:disabled{background:rgba(20,30,60,.08);color:rgba(20,30,60,.35)}

/* ----- one orchestrated hero entrance (gated; sober mode opts out) ----- */
@media (prefers-reduced-motion:no-preference){
  .vnl-chat-home .cc-hero-mark{animation:vnl-chat-mark-in .7s cubic-bezier(.22,.61,.36,1) both;animation:vnl-chat-mark-in .7s var(--vnl-ease) both}
  /* the signature aura breathes very slowly (opacity+scale only — GPU-cheap) */
  .vnl-chat-home .cc-hero-mark::after{animation:vnl-chat-aura 5.2s ease-in-out .7s infinite}
  .vnl-chat-home .cc-hero-title{animation:vnl-chat-rise .6s cubic-bezier(.22,.61,.36,1) .05s both;animation:vnl-chat-rise .6s var(--vnl-ease) .05s both}
  .vnl-chat-home .cc-hero-sub{animation:vnl-chat-rise .6s cubic-bezier(.22,.61,.36,1) .12s both;animation:vnl-chat-rise .6s var(--vnl-ease) .12s both}
  .vnl-chat-home .cc-hero-chips{animation:vnl-chat-rise .6s cubic-bezier(.22,.61,.36,1) .2s both;animation:vnl-chat-rise .6s var(--vnl-ease) .2s both}
}
.vnl-shell[data-vnl-mode="sober"] .vnl-chat-home .cc-hero-mark,
.vnl-shell[data-vnl-mode="sober"] .vnl-chat-home .cc-hero-mark::after,
.vnl-shell[data-vnl-mode="sober"] .vnl-chat-home .cc-hero-title,
.vnl-shell[data-vnl-mode="sober"] .vnl-chat-home .cc-hero-sub,
.vnl-shell[data-vnl-mode="sober"] .vnl-chat-home .cc-hero-chips{animation:none}
@keyframes vnl-chat-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes vnl-chat-mark-in{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
@keyframes vnl-chat-aura{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:.95;transform:scale(1.08)}}

@media (max-width:680px){
  .vnl-chat-home{padding:8px 14px 20px}
  .vnl-chat-home .cc-msg{max-width:88%}
  .vnl-chat-home .cc-hero-chips{gap:8px}
}

/* ============================================================
   LM-1 — per-module Luna DOCK (.vnl-mod-luna) inside a module.
   The module's board and its confined Luna sit side by side on a
   flex canvas; the dock reuses the SAME cc-* ChatPane chrome as the
   chat landing, re-dressed as a compact frosted aside. --vnl-chat-accent
   is set inline per module (var reference) → generic, one dock for all.
   Raw colours live here only (token authority).
   ============================================================ */
.vnl-mod-canvas{display:flex;gap:18px;align-items:stretch;width:100%;max-width:1720px}
.vnl-mod-canvas > .vnl{flex:1 1 auto;min-width:0}
.vnl-mod-luna{flex:0 0 clamp(320px,26vw,404px);align-self:stretch;position:relative;
  display:flex;flex-direction:column;min-height:0;
  border-radius:20px;
  border-radius:var(--vnl-radius);overflow:hidden;
  --vnl-chat-accent:var(--vnl-accent-payroll);
  background:linear-gradient(180deg, color-mix(in srgb,var(--vnl-chat-accent) 8%,#0b1437) 0%, #0b1437 42%);
  background:linear-gradient(180deg, color-mix(in srgb,var(--vnl-chat-accent) 8%,var(--vnl-navd)) 0%, var(--vnl-navd) 42%);
  border:1px solid color-mix(in srgb,var(--vnl-chat-accent) 22%,transparent);
  box-shadow:0 24px 60px -34px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05)}
/* Soft static accent glow at the top (reduced-motion safe by construction). */
.vnl-mod-luna::before{content:"";position:absolute;top:0;left:-10%;right:-10%;height:38%;z-index:0;pointer-events:none;
  background:radial-gradient(60% 80% at 50% 0%, color-mix(in srgb,var(--vnl-chat-accent) 20%,transparent), transparent 70%)}
.vnl-shell[data-vnl-mode="sober"] .vnl-mod-luna::before{display:none}
.vnl-thread-trigger{position:absolute;z-index:4;top:14px;right:14px;display:inline-flex;align-items:center;justify-content:center;
  gap:5px;width:34px;min-width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.12);
  background:rgba(10,14,28,.48);color:#dfe6fa;cursor:pointer;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.vnl-thread-trigger svg{width:16px;height:16px;flex:none}
.vnl-thread-trigger span{position:absolute;right:-4px;top:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  display:grid;place-items:center;background:var(--vnl-chat-accent);color:#fff;font-size:10px;font-weight:900;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.vnl-thread-trigger:hover,.vnl-thread-trigger[aria-expanded="true"]{border-color:color-mix(in srgb,var(--vnl-chat-accent) 58%,transparent);
  color:#fff;background:rgba(255,255,255,.1)}
.vnl-thread-trigger:focus-visible,.vnl-thread-iconbtn:focus-visible,.vnl-thread-new:focus-visible,.vnl-thread-row:focus-visible{
  outline:2px solid color-mix(in srgb,var(--vnl-chat-accent) 72%,transparent);outline-offset:2px}
.vnl-thread-drawer{position:absolute;z-index:5;top:56px;right:14px;width:min(340px,calc(100% - 28px));max-height:min(560px,calc(100% - 76px));
  display:flex;flex-direction:column;gap:10px;padding:13px;border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,rgba(17,23,44,.96),rgba(9,13,28,.94));border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 70px -34px rgba(0,0,0,.84),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.vnl-thread-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vnl-thread-head div{min-width:0;display:flex;flex-direction:column;gap:2px}
.vnl-thread-head strong{color:#fff;font-size:13px;font-weight:900;line-height:1.2}
.vnl-thread-head small{color:#8f9ab9;font-size:11px;font-weight:700;line-height:1.35}
.vnl-thread-iconbtn{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.045);color:#cfd6ec;cursor:pointer}
.vnl-thread-iconbtn:disabled{opacity:.45;cursor:default}
.vnl-thread-iconbtn svg{width:15px;height:15px}
.vnl-thread-new{display:flex;align-items:center;justify-content:center;gap:7px;min-height:36px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--vnl-chat-accent) 40%,rgba(255,255,255,.08));
  background:color-mix(in srgb,var(--vnl-chat-accent) 16%,rgba(255,255,255,.04));color:#fff;font:800 12px var(--vnl-font-body);cursor:pointer}
.vnl-thread-new:disabled{opacity:.55;cursor:default}
.vnl-thread-new svg{width:15px;height:15px}
.vnl-thread-error,.vnl-thread-empty{padding:10px 11px;border-radius:12px;color:#cfd6ec;font-size:12px;font-weight:700;line-height:1.4;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.vnl-thread-error{color:#ffd0d0;border-color:rgba(255,108,108,.28);background:rgba(255,108,108,.08)}
.vnl-thread-list{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:7px;padding-right:2px}
.vnl-thread-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-gap:10px;gap:10px;align-items:center;width:100%;padding:10px 11px;border-radius:13px;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);color:inherit;text-align:left;cursor:pointer}
.vnl-thread-row:hover,.vnl-thread-row.is-active{border-color:color-mix(in srgb,var(--vnl-chat-accent) 55%,rgba(255,255,255,.12));
  background:color-mix(in srgb,var(--vnl-chat-accent) 13%,rgba(255,255,255,.035))}
.vnl-thread-row span{min-width:0;display:flex;flex-direction:column;gap:3px}
.vnl-thread-row b{color:#fff;font-size:12px;font-weight:900;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-thread-row small{color:#9aa5c3;font-size:11px;font-weight:700;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-thread-row em{font-style:normal;color:#8f9ab9;font-size:10px;font-weight:900;white-space:nowrap}
.vnl-shell[data-vnl-theme="light"] .vnl-thread-trigger{background:rgba(255,255,255,.86);border-color:rgba(20,30,60,.12);color:#25304f}
.vnl-shell[data-vnl-theme="light"] .vnl-thread-trigger[aria-expanded="true"]{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-thread-drawer{background:rgba(255,255,255,.96);border-color:rgba(20,30,60,.12);
  box-shadow:0 24px 70px -38px rgba(20,30,60,.42)}
.vnl-shell[data-vnl-theme="light"] .vnl-thread-head strong,
.vnl-shell[data-vnl-theme="light"] .vnl-thread-row b{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-thread-head small,
.vnl-shell[data-vnl-theme="light"] .vnl-thread-row small,
.vnl-shell[data-vnl-theme="light"] .vnl-thread-row em,
.vnl-shell[data-vnl-theme="light"] .vnl-thread-empty{color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-thread-error{color:#9b2f2f}
.vnl-shell[data-vnl-theme="light"] .vnl-thread-iconbtn,
.vnl-shell[data-vnl-theme="light"] .vnl-thread-row,
.vnl-shell[data-vnl-theme="light"] .vnl-thread-empty{background:rgba(20,30,60,.035);border-color:rgba(20,30,60,.09)}
.vnl-shell[data-vnl-theme="light"] .vnl-thread-iconbtn{color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-thread-new{color:#1f2a4a;background:color-mix(in srgb,var(--vnl-chat-accent) 12%,#fff)}
.vnl-mod-luna .cc-root{position:relative;z-index:1;flex:1 1 auto;min-height:0}
/* Dock keeps a slim identity header (unlike the landing, which hides it). */
.vnl-mod-luna .cc-header{padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.06);
  background:color-mix(in srgb,var(--vnl-chat-accent) 10%,transparent)}
.vnl-mod-luna .cc-log{padding:14px 14px}
.vnl-mod-luna .cc-pristine .cc-log{flex:0 0;padding:0;overflow:hidden}
.vnl-mod-luna .cc-pristine .cc-log .cc-row{display:none}
/* ----- compact welcome hero (pristine only) ----- */
.vnl-mod-luna .cc-hero{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:18px 16px;min-height:0}
.vnl-mod-luna .cc-hero-mark{position:relative;width:44px;height:44px;flex:none;border-radius:50%;
  background:radial-gradient(120% 120% at 30% 24%, color-mix(in srgb,var(--vnl-chat-accent) 55%,#fff) 0%, var(--vnl-chat-accent) 46%, color-mix(in srgb,var(--vnl-chat-accent) 40%,#0b1437) 100%);
  background:radial-gradient(120% 120% at 30% 24%, color-mix(in srgb,var(--vnl-chat-accent) 55%,#fff) 0%, var(--vnl-chat-accent) 46%, color-mix(in srgb,var(--vnl-chat-accent) 40%,var(--vnl-navd)) 100%);
  box-shadow:0 12px 30px -12px color-mix(in srgb,var(--vnl-chat-accent) 65%,transparent), inset 0 1px 1px rgba(255,255,255,.35)}
.vnl-mod-luna .cc-hero-title{margin:16px 0 0;font-size:clamp(17px,1.5vw,20px);line-height:1.18;font-weight:800;
  letter-spacing:-.01em;max-width:20ch;text-wrap:balance}
.vnl-shell .vnl-mod-luna .cc-hero-title{color:#fff!important}
.vnl-mod-luna .cc-hero-sub{margin:8px 0 0;font-size:13px;line-height:1.5;color:#97a3c4;max-width:34ch}
.vnl-mod-luna .cc-hero-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px;max-width:340px}
.vnl-mod-luna .cc-hero-chip{padding:8px 14px;border-radius:999px;border-radius:var(--vnl-pill);cursor:pointer;
  border:1px solid color-mix(in srgb,var(--vnl-chat-accent) 30%,transparent);
  background:color-mix(in srgb,var(--vnl-chat-accent) 9%,transparent);
  color:#dbe3fb;font:600 12.5px/1.2 var(--vnl-font-body);
  transition:border-color .2s cubic-bezier(.22,.61,.36,1),background .2s cubic-bezier(.22,.61,.36,1),color .2s cubic-bezier(.22,.61,.36,1),transform .2s cubic-bezier(.22,.61,.36,1);
  transition:border-color .2s var(--vnl-ease),background .2s var(--vnl-ease),color .2s var(--vnl-ease),transform .2s var(--vnl-ease)}
.vnl-mod-luna .cc-hero-chip:hover{border-color:color-mix(in srgb,var(--vnl-chat-accent) 58%,transparent);
  background:color-mix(in srgb,var(--vnl-chat-accent) 18%,transparent);color:#fff;transform:translateY(-1px)}
.vnl-mod-luna .cc-hero-chip:focus-visible{outline:2px solid color-mix(in srgb,var(--vnl-chat-accent) 70%,transparent);outline-offset:2px}
/* ----- message stream ----- */
.vnl-mod-luna .cc-row{margin-bottom:12px}
.vnl-mod-luna .cc-msg{max-width:86%;border-radius:16px;padding:10px 14px;font-size:14px;line-height:1.5}
.vnl-mod-luna .cc-msg-bot{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.07);
  color:#eaeefb;border-bottom-left-radius:6px}
.vnl-mod-luna .cc-msg-user{border:0;color:#fff;border-bottom-right-radius:6px;
  background:linear-gradient(135deg, color-mix(in srgb,var(--vnl-chat-accent) 88%,#fff), color-mix(in srgb,var(--vnl-chat-accent) 72%,#0b1437));
  background:linear-gradient(135deg, color-mix(in srgb,var(--vnl-chat-accent) 88%,#fff), color-mix(in srgb,var(--vnl-chat-accent) 72%,var(--vnl-navd)));
  box-shadow:0 10px 26px -16px color-mix(in srgb,var(--vnl-chat-accent) 80%,transparent)}
/* ----- P3 answer (data_answer) & fill (panel_fill) cards — inherit the module
   accent so Luna's replies harmonise with the dock they live in (was hardcoded
   sky/cyan + emerald/teal, which clashed in a purple hr / pink legal dock). ----- */
.vnl-mod-luna .cc-data-answer,.vnl-mod-luna .cc-panelfill{max-width:100%;border-radius:16px;padding:12px 14px;
  background:linear-gradient(135deg, color-mix(in srgb,var(--vnl-chat-accent) 15%,transparent), color-mix(in srgb,var(--vnl-chat-accent) 5%,transparent));
  border:1px solid color-mix(in srgb,var(--vnl-chat-accent) 24%,transparent);
  box-shadow:0 12px 30px -22px color-mix(in srgb,var(--vnl-chat-accent) 60%,transparent)}
.vnl-mod-luna .cc-da-icon{background:color-mix(in srgb,var(--vnl-chat-accent) 24%,transparent);
  color:color-mix(in srgb,var(--vnl-chat-accent) 65%,#fff)}
.vnl-mod-luna .cc-da-num{color:#fff;font-family:var(--vnl-font-mono);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;letter-spacing:-.01em}
/* P3-C — list rows: accent-aware, mirrors the cc-da-* beauty pass ----- */
.vnl-mod-luna .cc-da-rows{margin-top:8px;padding-top:8px;display:flex;flex-direction:column;gap:5px;
  border-top:1px solid color-mix(in srgb,var(--vnl-chat-accent) 16%,transparent)}
.vnl-mod-luna .cc-da-row{display:flex;align-items:center;gap:6px;font-size:12px;
  color:color-mix(in srgb,var(--vnl-chat-accent) 14%,#fff)}
.vnl-mod-luna .cc-da-row-name{font-weight:600;color:#fff;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-mod-luna .cc-da-chip{flex:none;padding:1px 8px;border-radius:999px;border-radius:var(--vnl-pill);font-size:10px;font-weight:600;
  background:color-mix(in srgb,var(--vnl-chat-accent) 18%,transparent);
  color:color-mix(in srgb,var(--vnl-chat-accent) 60%,#fff);
  border:1px solid color-mix(in srgb,var(--vnl-chat-accent) 24%,transparent)}
.vnl-mod-luna .cc-da-sal{background:color-mix(in srgb,var(--vnl-chat-accent) 30%,transparent);color:#fff}
.vnl-shell[data-vnl-theme="light"] .vnl-mod-luna .cc-da-row-name{color:#0f1838}
.vnl-mod-luna .cc-warn{color:color-mix(in srgb,#f59e0b 78%,#fff)}
.vnl-mod-luna .cc-pf-select{background:color-mix(in srgb,#0b1437 70%,transparent);background:color-mix(in srgb,var(--vnl-field) 70%,transparent);
  border:1px solid color-mix(in srgb,var(--vnl-chat-accent) 26%,transparent);color:#fff;color:var(--vnl-field-ink);border-radius:10px}
.vnl-mod-luna .cc-pf-input{background:color-mix(in srgb,#0b1437 70%,transparent);background:color-mix(in srgb,var(--vnl-field) 70%,transparent);
  border:1px solid rgba(255,255,255,.12);color:#fff;color:var(--vnl-field-ink);border-radius:10px}
.vnl-mod-luna .cc-pf-input:focus,.vnl-mod-luna .cc-pf-select:focus{outline:0;
  border-color:color-mix(in srgb,var(--vnl-chat-accent) 60%,transparent)}
.vnl-mod-luna .cc-pf-submit{background:linear-gradient(135deg,var(--vnl-chat-accent),color-mix(in srgb,var(--vnl-chat-accent) 55%,#3965FF));background:linear-gradient(135deg,var(--vnl-chat-accent),color-mix(in srgb,var(--vnl-chat-accent) 55%,var(--vnl-accent-it)));
  color:#fff;border:0;border-radius:999px;border-radius:var(--vnl-pill);padding:7px 16px;font-weight:700;cursor:pointer}
.vnl-mod-luna .cc-src-toggle{font-size:10px;color:color-mix(in srgb,var(--vnl-chat-accent) 55%,#98a2c0)}
.vnl-shell[data-vnl-theme="light"] .vnl-mod-luna .cc-da-num{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-mod-luna .cc-pf-submit{color:#fff}
/* ----- input bar ----- */
.vnl-mod-luna .cc-inputbar{border-top:1px solid rgba(255,255,255,.06);background:transparent;padding:12px 14px}
.vnl-mod-luna .cc-input{height:46px;padding:0 18px;border-radius:999px;border-radius:var(--vnl-pill);
  background:color-mix(in srgb,#0b1437 74%,transparent);
  background:color-mix(in srgb,var(--vnl-field) 74%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.13);color:#fff;color:var(--vnl-field-ink);font-size:14.5px;font-weight:500;
  box-shadow:0 18px 40px -30px rgba(0,0,0,.85);
  transition:border-color .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s cubic-bezier(.22,.61,.36,1);
  transition:border-color .2s var(--vnl-ease),box-shadow .2s var(--vnl-ease)}
.vnl-mod-luna .cc-input::placeholder{color:#6b769a}
.vnl-mod-luna .cc-input:focus{border-color:color-mix(in srgb,var(--vnl-chat-accent) 60%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--vnl-chat-accent) 20%,transparent),0 18px 40px -30px rgba(0,0,0,.85)}
.vnl-mod-luna .cc-send{width:40px;height:40px;flex:none;border-radius:50%;border:0;color:#fff;
  background:linear-gradient(135deg,var(--vnl-chat-accent),color-mix(in srgb,var(--vnl-chat-accent) 45%,#3965FF));
  background:linear-gradient(135deg,var(--vnl-chat-accent),color-mix(in srgb,var(--vnl-chat-accent) 45%,var(--vnl-accent-it)));
  box-shadow:0 12px 28px -14px color-mix(in srgb,var(--vnl-chat-accent) 80%,transparent);
  transition:filter .2s cubic-bezier(.22,.61,.36,1),transform .2s cubic-bezier(.22,.61,.36,1);
  transition:filter .2s var(--vnl-ease),transform .2s var(--vnl-ease)}
.vnl-mod-luna .cc-send:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-1px)}
.vnl-mod-luna .cc-send:disabled{background:rgba(255,255,255,.07);color:rgba(255,255,255,.3);box-shadow:none}
/* ----- light appearance ----- */
.vnl-shell[data-vnl-theme="light"] .vnl-mod-luna{background:linear-gradient(180deg, color-mix(in srgb,var(--vnl-chat-accent) 7%,#fff) 0%, #fff 46%);
  border-color:color-mix(in srgb,var(--vnl-chat-accent) 20%,transparent);box-shadow:0 22px 52px -34px rgba(20,30,60,.5)}
.vnl-shell[data-vnl-theme="light"] .vnl-mod-luna .cc-hero-title{color:#0f1838!important}
.vnl-shell[data-vnl-theme="light"] .vnl-mod-luna .cc-hero-sub{color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-mod-luna .cc-hero-chip{background:#fff;border-color:rgba(20,30,60,.12);color:#3a4366}
.vnl-shell[data-vnl-theme="light"] .vnl-mod-luna .cc-msg-bot{background:#fff;border-color:rgba(20,30,60,.08);color:#1a2340}
.vnl-shell[data-vnl-theme="light"] .vnl-mod-luna .cc-input{border-color:rgba(20,30,60,.12)}
.vnl-shell[data-vnl-theme="light"] .vnl-mod-luna .cc-input::placeholder{color:#8a93b5}
/* ----- gated hero entrance (sober opts out) ----- */
@media (prefers-reduced-motion:no-preference){
  .vnl-mod-luna .cc-hero-mark{animation:vnl-chat-mark-in .6s cubic-bezier(.22,.61,.36,1) both;animation:vnl-chat-mark-in .6s var(--vnl-ease) both}
  .vnl-mod-luna .cc-hero-title{animation:vnl-chat-rise .55s cubic-bezier(.22,.61,.36,1) .05s both;animation:vnl-chat-rise .55s var(--vnl-ease) .05s both}
  .vnl-mod-luna .cc-hero-sub{animation:vnl-chat-rise .55s cubic-bezier(.22,.61,.36,1) .12s both;animation:vnl-chat-rise .55s var(--vnl-ease) .12s both}
  .vnl-mod-luna .cc-hero-chips{animation:vnl-chat-rise .55s cubic-bezier(.22,.61,.36,1) .2s both;animation:vnl-chat-rise .55s var(--vnl-ease) .2s both}
}
.vnl-shell[data-vnl-mode="sober"] .vnl-mod-luna .cc-hero-mark,
.vnl-shell[data-vnl-mode="sober"] .vnl-mod-luna .cc-hero-title,
.vnl-shell[data-vnl-mode="sober"] .vnl-mod-luna .cc-hero-sub,
.vnl-shell[data-vnl-mode="sober"] .vnl-mod-luna .cc-hero-chips{animation:none}
/* Stack under the board on narrow viewports (dock drops below). */
@media (max-width:1100px){
  .vnl-mod-canvas{flex-direction:column}
  .vnl-mod-luna{flex:1 1 auto;min-height:420px}
}

/* ============================================================
   CF — CHAT-FIRST module canvas (brain-ready modules).
   The confined Luna conversation is the WHOLE surface; when Luna
   opens a leaf screen or a `panel_fill` validation form, a docked
   panel slides in from the RIGHT and the chat narrows to the left
   (~58% chat / ~42% panel). Closing the panel returns the chat to
   full-page. Raw values live here only (token authority); the
   slide-in respects prefers-reduced-motion + sober mode.
   ============================================================ */
/* Full-page chat: the confined dock stops being a fixed-width aside and fills
   the canvas, capped for reading comfort and centred (no panel open). */
.vnl-mod-canvas.vnl-mod-chatfirst{max-width:1200px;margin:0 auto;min-height:calc(100vh - 220px)}
.vnl-mod-chatfirst > .vnl-mod-luna,
.vnl-mod-chatfirst > .vnl-chat-home{flex:1 1 auto;min-width:0;max-width:900px;width:100%;margin:0 auto}
.vnl-cockpit-luna{position:relative}
.vnl-cockpit-luna-back{position:absolute;left:16px;top:16px;z-index:3;width:38px;height:38px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#c9d2ec;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.vnl-cockpit-luna-back:hover{background:rgba(255,255,255,.1);color:#fff}
.vnl-cockpit-luna-back:focus-visible{outline:2px solid color-mix(in srgb,#7551FF 70%,transparent);outline:2px solid color-mix(in srgb,var(--vnl-accent-hr) 70%,transparent);outline-offset:2px}
.vnl-cockpit-luna-back svg{width:18px;height:18px}
.vnl-cockpit-luna .vnl-mod-rightpanel:has(> .vnl-mod-rightpanel-body > .vnl) .vnl-mod-rightpanel-head{
  display:flex;position:absolute;top:14px;right:14px;z-index:7;padding:0;background:transparent;pointer-events:none}
.vnl-cockpit-luna .vnl-mod-rightpanel:has(> .vnl-mod-rightpanel-body > .vnl) .vnl-mod-rightpanel-title{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vnl-cockpit-luna .vnl-mod-rightpanel:has(> .vnl-mod-rightpanel-body > .vnl) .vnl-mod-rightpanel-close{pointer-events:auto}
/* Split: a panel is open → chat ~58% left, panel ~42% right. */
.vnl-mod-chatfirst[data-vnl-rightpanel="open"]{max-width:1720px}
.vnl-mod-chatfirst[data-vnl-rightpanel="open"] > .vnl-mod-luna,
.vnl-mod-chatfirst[data-vnl-rightpanel="open"] > .vnl-chat-home{flex:1 1 58%;max-width:none;margin:0}
.vnl-mod-rightpanel{flex:1 1 42%;min-width:0;align-self:stretch;
  display:flex;flex-direction:column;min-height:0;
  --vnl-rp-accent:var(--vnl-accent-hr);
  border-radius:20px;
  border-radius:var(--vnl-radius);overflow:hidden;
  background:color-mix(in srgb,#0b1437 92%,transparent);
  background:color-mix(in srgb,var(--vnl-navd) 92%,transparent);
  border:1px solid color-mix(in srgb,var(--vnl-rp-accent) 22%,rgba(255,255,255,.08));
  box-shadow:0 24px 60px -34px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05)}
.vnl-mod-rightpanel-head{flex:none;display:flex;align-items:center;gap:12px;
  padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08);
  background:color-mix(in srgb,var(--vnl-rp-accent) 10%,transparent)}
.vnl-mod-rightpanel-title{margin:0;flex:1 1 auto;min-width:0;
  font-size:15px;font-weight:700;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-mod-rightpanel-close{flex:none;width:34px;height:34px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#c9d2ec}
.vnl-mod-rightpanel-close:hover{background:rgba(255,255,255,.1);color:#fff}
.vnl-mod-rightpanel-close:focus-visible{outline:2px solid color-mix(in srgb,var(--vnl-rp-accent) 70%,transparent);outline-offset:2px}
.vnl-mod-rightpanel-close svg{width:18px;height:18px}
.vnl-mod-rightpanel-body{flex:1 1 auto;min-height:0;overflow:auto;position:relative}
/* Slide-in from the right (reduced-motion + sober opt out → instant). */
@media (prefers-reduced-motion:no-preference){
  .vnl-mod-chatfirst[data-vnl-rightpanel="open"] > .vnl-mod-rightpanel{
    animation:vnl-rightpanel-in .34s cubic-bezier(.22,.61,.36,1) both;
    animation:vnl-rightpanel-in .34s var(--vnl-ease) both}
}
@keyframes vnl-rightpanel-in{from{opacity:0;transform:translateX(5%)}to{opacity:1;transform:none}}
.vnl-shell[data-vnl-mode="sober"] .vnl-mod-rightpanel{animation:none}
/* Light-skin legibility (auto-contrast non-negotiable). */
.vnl-shell[data-vnl-theme="light"] .vnl-mod-rightpanel{background:#fff;border-color:rgba(20,30,60,.1)}
.vnl-shell[data-vnl-theme="light"] .vnl-mod-rightpanel-title{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-mod-rightpanel-close,
.vnl-shell[data-vnl-theme="light"] .vnl-cockpit-luna-back{color:#3a4366;border-color:rgba(20,30,60,.12);background:#fff}
/* Narrow viewports: chat stacks over the panel. */
@media (max-width:1100px){
  .vnl-mod-chatfirst{max-width:none}
  .vnl-mod-chatfirst > .vnl-mod-luna,
  .vnl-mod-chatfirst > .vnl-chat-home{max-width:none}
  .vnl-mod-chatfirst[data-vnl-rightpanel="open"]{flex-direction:column}
  .vnl-mod-chatfirst[data-vnl-rightpanel="open"] > .vnl-mod-luna,
  .vnl-mod-chatfirst[data-vnl-rightpanel="open"] > .vnl-chat-home{flex:1 1 auto}
  .vnl-mod-rightpanel{flex:1 1 auto;min-height:520px}
}

/* Blocked-by-dependency cards (Track C, B-1) — a denied capability whose grant is held
   back by a missing dependency. Inert like locked, but amber-tinted + names the dep. */
.vnl-shell .vnl-card.is-blocked{opacity:.78!important}
.vnl-card.is-blocked{cursor:not-allowed;opacity:.78;transform:none;filter:grayscale(.12)}
.vnl-card.is-blocked:hover{box-shadow:0 16px 36px -18px rgba(0,0,0,.6)}
.vnl-card.is-blocked .vnl-shine,.vnl-card.is-blocked .vnl-go{display:none}
.vnl-card.is-blocked:hover .vnl-sq{transform:none}
.vnl-blocked{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;letter-spacing:.02em;color:#fff;background:rgba(245,158,11,.28);padding:4px 10px;border-radius:999px;border-radius:var(--vnl-pill)}
.vnl-blocked svg{width:13px;height:13px}

/* ============================================================
   Payroll cockpit board — "Paie & Bulletins" landing (4 columns).
   Ported from the vNext prototype (.vnl-pay-board). Raw colours live
   here only (token authority). Local vars: --vnl-board-accent / --vnl-run-accent.
   ============================================================ */
.vnl-pay-board{display:grid;grid-template-columns:minmax(210px,260px) minmax(260px,320px) minmax(420px,1fr) minmax(280px,360px);
  grid-gap:18px;
  gap:18px;align-items:start;max-width:1320px;--vnl-board-accent:var(--vnl-accent-payroll);
  /* Board-scoped surface tokens (P1). --vnl-text/-muted/-line/-line-strong are undefined
     globally; without these, the .vnl-board-* borders fall to currentColor (over-gridded)
     and the muted tier collapses to full ink (flat hierarchy). Scoped on the board itself
     so both this board AND the module-columns board (which also carries .vnl-pay-board)
     resolve them, shifting nothing else. Literals reused verbatim from elsewhere in file. */
  --vnl-text:#eaeefb;--vnl-muted:#97a3c4;--vnl-line:rgba(255,255,255,.1);--vnl-line-strong:rgba(255,255,255,.16)}
.vnl-shell[data-vnl-theme="light"] .vnl-pay-board{--vnl-text:#1a2340;--vnl-muted:#5a648a;
  --vnl-line:rgba(20,30,60,.1);--vnl-line-strong:rgba(20,30,60,.16)}
/* Non-payroll module landings: N purpose-columns instead of the fixed 4-col grid. */
.vnl-pay-board--workspaces{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.vnl-board-panel{display:grid;grid-gap:14px;gap:14px;min-width:0;padding:16px;border:1px solid var(--vnl-line);border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.018));box-shadow:0 18px 44px -32px rgba(0,0,0,.7)}
.vnl-board-panel.is-main{padding:18px}
.vnl-board-head{display:grid;grid-gap:4px;gap:4px;padding-bottom:12px;border-bottom:1px solid var(--vnl-line)}
.vnl-board-head--with-action{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px}
.vnl-board-head--with-action>div{min-width:0}
.vnl-board-head h3{margin:0;color:var(--vnl-text);font-size:14px;font-weight:900;letter-spacing:.03em;text-transform:uppercase}
.vnl-board-head p{margin:0;color:var(--vnl-muted);font-size:12px;line-height:1.42}
.vnl-add-period,.vnl-add-cycle{width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--vnl-line);border-radius:10px;background:rgba(255,255,255,.025);
  color:var(--vnl-text);font-size:18px;font-weight:900;line-height:1;cursor:pointer;transition:border-color .18s cubic-bezier(.22,.61,.36,1),background .18s cubic-bezier(.22,.61,.36,1);transition:border-color .18s var(--vnl-ease),background .18s var(--vnl-ease)}
.vnl-add-period:hover,.vnl-add-cycle:hover{border-color:color-mix(in srgb,var(--vnl-board-accent) 48%,transparent);background:rgba(255,255,255,.06)}
.vnl-add-period:disabled,.vnl-add-cycle:disabled{opacity:.45;cursor:not-allowed}
.vnl-add-period svg,.vnl-add-cycle svg{width:16px;height:16px}

/* Col 1 — create-run tray (ported from prototype .vnl-create-tray) */
.vnl-create-tray{display:grid;grid-gap:9px;gap:9px;padding:10px;border:1px solid color-mix(in srgb,var(--vnl-board-accent) 34%,transparent);
  border-radius:14px;background:color-mix(in srgb,var(--vnl-board-accent) 9%,transparent)}
.vnl-create-tray-title{color:var(--vnl-text);font-size:12px;font-weight:900}
.vnl-run-name-field{display:grid;grid-gap:6px;gap:6px}
.vnl-run-name-field label{color:var(--vnl-muted);font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.vnl-run-name-field input{width:100%;min-width:0;height:38px;padding:0 11px;border:1px solid var(--vnl-line);border:1px solid var(--vnl-line-strong,var(--vnl-line));
  border-radius:11px;background:rgba(255,255,255,.04);color:var(--vnl-text);font-size:13px;font-weight:800;outline:0}
.vnl-run-name-field input::placeholder{color:var(--vnl-muted)}
.vnl-template-grid{display:grid;grid-gap:7px;gap:7px}
.vnl-run-template{display:grid;grid-template-columns:8px minmax(0,1fr);grid-gap:9px;gap:9px;align-items:center;width:100%;padding:8px;
  border:1px solid var(--vnl-line);border-radius:11px;background:rgba(255,255,255,.025);color:var(--vnl-muted);text-align:left;cursor:pointer;
  transition:border-color .18s cubic-bezier(.22,.61,.36,1),background .18s cubic-bezier(.22,.61,.36,1),color .18s cubic-bezier(.22,.61,.36,1);
  transition:border-color .18s var(--vnl-ease),background .18s var(--vnl-ease),color .18s var(--vnl-ease)}
.vnl-run-template::before{content:"";width:8px;height:32px;border-radius:999px;background:var(--vnl-board-accent);background:var(--vnl-template-accent,var(--vnl-board-accent))}
.vnl-run-template:hover{border-color:color-mix(in srgb,var(--vnl-board-accent) 48%,transparent);background:rgba(255,255,255,.06);color:var(--vnl-text)}
.vnl-run-template.is-active{border-color:color-mix(in srgb,var(--vnl-board-accent) 56%,transparent);border-color:color-mix(in srgb,var(--vnl-template-accent,var(--vnl-board-accent)) 56%,transparent);
  background:color-mix(in srgb,var(--vnl-board-accent) 12%,transparent);
  background:color-mix(in srgb,var(--vnl-template-accent,var(--vnl-board-accent)) 12%,transparent);color:var(--vnl-text)}
.vnl-run-template b{display:block;color:inherit;font-size:12px;font-weight:900}
.vnl-run-template span span{display:block;color:var(--vnl-muted);font-size:11px;line-height:1.3}
.vnl-create-run{min-height:38px;border:1px solid transparent;border-radius:11px;background:var(--vnl-board-accent);
  color:#061527;font-size:12px;font-weight:900;cursor:pointer;transition:filter .18s cubic-bezier(.22,.61,.36,1);transition:filter .18s var(--vnl-ease)}
.vnl-create-run:hover{filter:brightness(1.06)}
.vnl-create-run:disabled{opacity:.5;cursor:not-allowed;filter:none}
/* Locked-period → correction affordance (col 1, secondary tone) */
.vnl-create-correction{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:8px;padding:0 12px;
  background:color-mix(in srgb,#22D3EE 90%,#fff);
  background:color-mix(in srgb,var(--vnl-accent-reporting,var(--vnl-board-accent)) 90%,#fff);color:#061527}
.vnl-create-correction svg{width:15px;height:15px}

/* Col 0 — period list */
.vnl-period-list{display:grid;grid-gap:12px;gap:12px}
.vnl-year{display:grid;grid-gap:7px;gap:7px}
.vnl-year-title{color:color-mix(in srgb,var(--vnl-board-accent) 42%,var(--vnl-text));font-size:11px;font-weight:900;
  letter-spacing:.08em;text-transform:uppercase}
.vnl-month{display:grid;grid-gap:2px;gap:2px;width:100%;padding:9px 11px;border:1px solid var(--vnl-line);border-radius:11px;
  background:rgba(255,255,255,.025);color:var(--vnl-muted);text-align:left;cursor:pointer;
  transition:border-color .18s cubic-bezier(.22,.61,.36,1),background .18s cubic-bezier(.22,.61,.36,1),color .18s cubic-bezier(.22,.61,.36,1);
  transition:border-color .18s var(--vnl-ease),background .18s var(--vnl-ease),color .18s var(--vnl-ease)}
.vnl-month b{color:var(--vnl-text);font-size:13px;font-weight:900;text-transform:capitalize}
.vnl-month span{color:var(--vnl-muted);font-size:11px;font-weight:700}
.vnl-month:hover{border-color:color-mix(in srgb,var(--vnl-board-accent) 48%,transparent);background:rgba(255,255,255,.06);color:var(--vnl-text)}
.vnl-month.is-active{border-color:color-mix(in srgb,var(--vnl-board-accent) 56%,transparent);
  background:color-mix(in srgb,var(--vnl-board-accent) 12%,transparent);color:var(--vnl-text)}

/* Col 1 — run cards */
.vnl-run{display:grid;grid-template-columns:9px minmax(0,1fr);grid-gap:10px;gap:10px;width:100%;padding:10px;border:1px solid var(--vnl-line);
  border-radius:12px;background:rgba(255,255,255,.025);color:var(--vnl-text);text-align:left;cursor:pointer;
  transition:border-color .18s cubic-bezier(.22,.61,.36,1),background .18s cubic-bezier(.22,.61,.36,1);
  transition:border-color .18s var(--vnl-ease),background .18s var(--vnl-ease)}
.vnl-run:hover,.vnl-run.is-active{border-color:color-mix(in srgb,var(--vnl-board-accent) 52%,transparent);
  background:color-mix(in srgb,var(--vnl-board-accent) 11%,transparent)}
.vnl-run-stripe{width:9px;height:100%;min-height:54px;border-radius:999px;background:var(--vnl-board-accent);background:var(--vnl-run-accent,var(--vnl-board-accent))}
.vnl-run-title{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:4px}
.vnl-run-title b{min-width:0;overflow:hidden;color:var(--vnl-text);font-size:13px;font-weight:900;text-overflow:ellipsis;white-space:nowrap}
.vnl-run-title small{color:var(--vnl-muted);font-size:10px;font-weight:900;text-transform:uppercase}
.vnl-run-meta{display:flex;flex-wrap:wrap;gap:6px;color:var(--vnl-muted);font-size:11px;font-weight:700;line-height:1.35}
.vnl-run-meta span{padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.055)}

/* Col 2 — selected-run blockers preview */
.vnl-blockers{display:grid;grid-gap:8px;gap:8px}
.vnl-blocker{display:grid;grid-gap:3px;gap:3px;padding:11px 13px;border:1px solid var(--vnl-line);border-radius:12px;background:rgba(255,255,255,.025)}
.vnl-blocker b{color:var(--vnl-text);font-size:12px;font-weight:900}
.vnl-blocker span{color:var(--vnl-muted);font-size:12px;line-height:1.38}

/* Col 3 — workspace groups */
.vnl-workspace-groups{display:grid;grid-gap:14px;gap:14px}
.vnl-workspace-group{display:grid;grid-gap:7px;gap:7px}
.vnl-workspace-group h4{margin:0;color:color-mix(in srgb,var(--vnl-board-accent) 42%,var(--vnl-text));font-size:11px;
  font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.vnl-workspace-button{position:relative;display:grid;grid-template-columns:26px minmax(0,1fr);grid-gap:9px;gap:9px;align-items:center;
  width:100%;min-height:44px;padding:9px;border:1px solid transparent;border-radius:12px;background:rgba(255,255,255,.025);
  color:var(--vnl-muted);text-align:left;overflow:hidden;cursor:pointer;
  transition:transform .22s cubic-bezier(.22,.61,.36,1),border-color .18s cubic-bezier(.22,.61,.36,1),background .18s cubic-bezier(.22,.61,.36,1),color .18s cubic-bezier(.22,.61,.36,1);
  transition:transform .22s var(--vnl-ease),border-color .18s var(--vnl-ease),background .18s var(--vnl-ease),color .18s var(--vnl-ease)}
.vnl-workspace-button:hover{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:var(--vnl-text);transform:translateY(-4px)}
.vnl-workspace-button svg{width:17px;height:17px}
.vnl-workspace-button b{display:block;min-width:0;overflow:hidden;color:inherit;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.vnl-workspace-button span{display:block;color:var(--vnl-muted);font-size:11px;line-height:1.28}

/* Col 3 — pinned dossier (CSS ported for fidelity; not yet rendered in this PR) */
.vnl-pinned-dossier{display:grid;grid-gap:10px;gap:10px;padding:12px;border:1px solid color-mix(in srgb,var(--vnl-board-accent) 36%,transparent);
  border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--vnl-board-accent) 12%,transparent),rgba(255,255,255,.025))}

/* Focus visibility — keyboard parity for the board's native buttons */
.vnl-month:focus-visible,.vnl-run:focus-visible,.vnl-workspace-button:focus-visible,.vnl-add-period:focus-visible,
.vnl-run-template:focus-visible,.vnl-create-run:focus-visible{
  outline:2px solid #01B574;
  outline:2px solid var(--vnl-accent-payroll);outline-offset:2px}

/* Sober mode — drop the lift, keep the state changes */
.vnl-shell[data-vnl-mode="sober"] .vnl-workspace-button{transition:none}
.vnl-shell[data-vnl-mode="sober"] .vnl-workspace-button:hover{transform:none}

/* Responsive — collapse the 4 columns to a single stack on narrow viewports */
@media (max-width:1024px){
  .vnl-pay-board,.vnl-pay-board--workspaces{grid-template-columns:minmax(0,1fr)}
}

/* =====================================================================
   FULL KEYBOARD NAVIGATION — focus-visible rings (a11y · "TOUT navigable
   au clavier"). Every interactive cockpit element shows a clear ring on
   keyboard focus. Mouse focus stays ring-less (:focus → none, only
   :focus-visible paints). The baseline uses :where() (zero specificity)
   so the richer per-component accent rings — and the existing card / board
   / anticipation rings — always win. No transitions on the ring → focus is
   instant and reduced-motion-safe by construction.
   ===================================================================== */
:where(.vnl-shell) :focus{outline:none}
:where(.vnl-shell) :focus-visible{
  outline:2px solid color-mix(in srgb,#fff 68%,transparent);
  outline:2px solid color-mix(in srgb,var(--vnl-text,#fff) 68%,transparent);
  outline-offset:2px}

/* Chrome — navbar pill, persona switch, back button, dock (neutral, theme-aware,
   with a soft halo so the ring reads over the guilloché seal). */
.vnl-ibtn:focus-visible,
.vnl-persona-btn:focus-visible,
.vnl-back:focus-visible,
.vnl-dock-item:focus-visible,
.vnl-dock-input:focus-visible{
  outline:2px solid color-mix(in srgb,#fff 80%,transparent);
  outline:2px solid color-mix(in srgb,var(--vnl-text,#fff) 80%,transparent);
  outline-offset:2px;
  box-shadow:0 0 0 5px color-mix(in srgb,#fff 14%,transparent);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--vnl-text,#fff) 14%,transparent)}

/* Menus / segmented prefs / settings actions — neutral ring, inset on full-width rows. */
.vnl-lang-item:focus-visible,
.vnl-persona-item:focus-visible{outline:2px solid color-mix(in srgb,#fff 72%,transparent);outline:2px solid color-mix(in srgb,var(--vnl-text,#fff) 72%,transparent);outline-offset:-2px}
.vnl-seg-btn:focus-visible,
.vnl-set-card-action:focus-visible,
.vnl-set-link:focus-visible{outline:2px solid color-mix(in srgb,#fff 72%,transparent);outline:2px solid color-mix(in srgb,var(--vnl-text,#fff) 72%,transparent);outline-offset:2px}

/* Command / action palette list items — accent ring, inset (rows are full-width). */
.vnl-cmd-item:focus-visible,
.vnl-cmdk-item:focus-visible{outline:2px solid #7551FF;outline:2px solid var(--vnl-accent-hr);outline-offset:-2px}

/* Sober mode keeps the rings (trust, not flash) — nothing to disable here. */

/* ===== module-card preview popover (VnextCardPreview — portalled to <body>) =====
   Lives OUTSIDE the grid's 3D perspective; positioned in JS from the card's viewport
   rect. Above the cockpit + dock (55), below the command/action palettes (60/62).
   Theme + sober + reduced-motion handled via data-attributes (the portal escapes the
   .vnl-shell ancestor selectors). Accent comes from the card's module via --vnl-cpv-accent. */
.vnl-cpv{position:fixed;z-index:58;width:320px;max-width:calc(100vw - 16px);
  display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:18px;
  background:rgba(11,20,55,.62);
  background:var(--vnl-navbar,rgba(16,22,44,.92));border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 64px -16px rgba(0,0,0,.6),0 0 0 1px color-mix(in srgb,#7551FF 24%,transparent);
  box-shadow:0 24px 64px -16px rgba(0,0,0,.6),0 0 0 1px color-mix(in srgb,var(--vnl-cpv-accent,var(--vnl-accent-hr)) 24%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  color:#eaeefb;font-family:var(--vnl-font-body);
  opacity:0;transform:translateY(6px) scale(.98);transition:opacity .16s ease,transform .16s ease;pointer-events:none}
.vnl-cpv.is-ready{opacity:1;transform:none;pointer-events:auto}
.vnl-cpv-head{display:flex;align-items:center;gap:12px}
.vnl-cpv-ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border-radius:12px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--vnl-cpv-accent) 80%,transparent),color-mix(in srgb,var(--vnl-cpv-accent) 38%,transparent));color:#fff}
.vnl-cpv-ic svg{width:20px;height:20px}
.vnl-cpv-titles{display:flex;flex-direction:column;gap:2px;min-width:0}
.vnl-cpv-kicker{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:color-mix(in srgb,var(--vnl-cpv-accent) 70%,#fff)}
.vnl-cpv-title{margin:0;font-size:17px;font-weight:800;color:#fff;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-cpv-desc{margin:0;font-size:12.5px;line-height:1.45;color:#a9b2d0}
.vnl-cpv-actions{display:flex;flex-direction:column;gap:5px}
.vnl-cpv-jump{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  padding:9px 11px;border-radius:11px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);
  color:#dde3f7;font:600 13px var(--vnl-font-body);transition:background .14s ease,border-color .14s ease,color .14s ease}
.vnl-cpv-jump:hover{background:color-mix(in srgb,var(--vnl-cpv-accent) 20%,transparent);
  border-color:color-mix(in srgb,var(--vnl-cpv-accent) 48%,transparent);color:#fff}
.vnl-cpv-jump-ic{display:inline-flex;flex:none;color:color-mix(in srgb,var(--vnl-cpv-accent) 76%,#fff)}
.vnl-cpv-jump-ic svg{width:16px;height:16px}
.vnl-cpv-jump-lbl{flex:1 1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-cpv-jump-chev{width:15px;height:15px;flex:none;opacity:.5}
.vnl-cpv-open{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;cursor:pointer;
  padding:11px 14px;border-radius:12px;border:0;
  background:linear-gradient(135deg,var(--vnl-cpv-accent),color-mix(in srgb,var(--vnl-cpv-accent) 55%,#000));
  color:#fff;font:800 13.5px var(--vnl-font-body)}
.vnl-cpv-open svg{width:17px;height:17px;flex:none}
.vnl-cpv-open-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-cpv-jump:focus-visible,
.vnl-cpv-open:focus-visible{outline:2px solid color-mix(in srgb,var(--vnl-cpv-accent) 72%,#fff);outline-offset:2px}
/* light theme (portal can't inherit the shell's [data-vnl-theme]) */
.vnl-cpv[data-vnl-theme="light"]{background:rgba(255,255,255,.95);border-color:rgba(20,30,60,.12);color:#1a2138}
.vnl-cpv[data-vnl-theme="light"] .vnl-cpv-title{color:#0f1838}
.vnl-cpv[data-vnl-theme="light"] .vnl-cpv-desc{color:#48527a}
.vnl-cpv[data-vnl-theme="light"] .vnl-cpv-jump{background:rgba(20,30,60,.03);border-color:rgba(20,30,60,.1);color:#2a3354}
/* sober mode + reduced motion: appear instantly, no enter spring (non-negotiable) */
.vnl-cpv[data-vnl-mode="sober"]{transition:none;transform:none}
@media (prefers-reduced-motion:reduce){.vnl-cpv{transition:none;transform:none}}

/* ===== VNEXT-WINDOWING slice 1 — pop-out windows =====================================
   Reuses the production WMG WindowFrame (drag/resize/keyboard). This block ONLY
   re-skins vNext-owned frames — scoped under .vnl-window-layer so the raw IFI
   .wmg-frame look (in workspace/window-layer/global-window-layer.css) is untouched.
   All values are tokenised via --vnl-win-* mapped from the vNext token vocabulary;
   this file is the vNext token/look authority (raw values allowed here only).
   Reduced-motion is inherited from the shared layer CSS (no new transitions added). */

/* Pop-out affordance — sits by the leaf header (top-right of the scroll area). */
.vnl-popout{position:absolute;top:18px;right:22px;z-index:30;display:inline-flex;
  align-items:center;justify-content:center;width:34px;height:34px;border-radius:12px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#cfd6ec;
  cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .15s cubic-bezier(.22,.61,.36,1),color .15s cubic-bezier(.22,.61,.36,1),border-color .15s cubic-bezier(.22,.61,.36,1),transform .15s cubic-bezier(.22,.61,.36,1);
  transition:background .15s var(--vnl-ease),color .15s var(--vnl-ease),border-color .15s var(--vnl-ease),transform .15s var(--vnl-ease)}
.vnl-popout:hover{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.22);transform:translateY(-1px)}
.vnl-popout:focus-visible{outline:2px solid #7551FF;outline:2px solid var(--vnl-accent-hr);outline-offset:2px}
.vnl-popout svg{width:17px;height:17px}
.vnl-shell[data-vnl-theme="light"] .vnl-popout{border-color:rgba(20,30,60,.12);background:rgba(20,30,60,.04);color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-popout:hover{background:rgba(20,30,60,.08);color:#0f1838;border-color:rgba(20,30,60,.2)}
.vnl-shell[data-vnl-mode="sober"] .vnl-popout{transition:none}
.vnl-shell[data-vnl-mode="sober"] .vnl-popout:hover{transform:none}

/* TermTip — inline glossary affordance for Swiss-payroll acronyms (noob parity).
   Trigger uses tokens; popover surface follows the .vnl-popout dark/light idiom. */
.vnl-term-wrap{display:inline-flex}
.vnl-term{appearance:none;border:0;padding:0;margin:0;background:none;font:inherit;color:inherit;
  cursor:help;display:inline-flex;align-items:center;gap:3px;
  border-bottom:1px dotted var(--vnl-line-strong);
  transition:border-color .15s cubic-bezier(.22,.61,.36,1),color .15s cubic-bezier(.22,.61,.36,1);
  transition:border-color .15s var(--vnl-ease),color .15s var(--vnl-ease)}
.vnl-term:hover,.vnl-term:focus-visible{border-bottom-color:currentColor;border-bottom-color:var(--vnl-accent,currentColor)}
.vnl-term:focus-visible{outline:2px solid #8b7bff;outline:2px solid var(--vnl-accent,#8b7bff);outline-offset:2px;border-radius:3px}
.vnl-term-ic{width:11px;height:11px;opacity:.5;flex:0 0 auto}
.vnl-term:hover .vnl-term-ic,.vnl-term:focus-visible .vnl-term-ic{opacity:.85}
.vnl-term-pop{position:absolute;left:0;top:calc(100% + 8px);z-index:60;display:flex;flex-direction:column;gap:6px;
  width:max-content;max-width:300px;padding:12px 14px;border-radius:14px;
  border:1px solid rgba(255,255,255,.14);background:rgba(20,24,52,.92);color:#eaeefb;color:var(--vnl-text,#eaeefb);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.7);
  box-shadow:var(--vnl-shadow-float,0 24px 60px -28px rgba(0,0,0,.7));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-size:12.5px;line-height:1.5;text-align:left;font-weight:400;
  animation:vnl-term-in .14s cubic-bezier(.22,.61,.36,1);
  animation:vnl-term-in .14s var(--vnl-ease)}
@keyframes vnl-term-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.vnl-term-name{font-weight:650;font-size:13px;color:#eaeefb;color:var(--vnl-text,#eaeefb)}
.vnl-term-desc{color:#97a3c4;color:var(--vnl-muted,#97a3c4)}
.vnl-term-meta{color:#97a3c4;color:var(--vnl-muted,#97a3c4);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.vnl-term-legal{color:#97a3c4;color:var(--vnl-muted,#97a3c4);font-size:11.5px;opacity:.85;border-top:1px solid rgba(255,255,255,.1);border-top:1px solid var(--vnl-line,rgba(255,255,255,.1));padding-top:6px}
.vnl-shell[data-vnl-theme="light"] .vnl-term-pop{border-color:rgba(20,30,60,.14);background:rgba(255,255,255,.97);color:#1a2340;color:var(--vnl-text,#1a2340)}
.vnl-shell[data-vnl-mode="sober"] .vnl-term-pop{animation:none}
.vnl-shell[data-vnl-mode="sober"] .vnl-term{transition:none}

/* Window layer container — pass-through; frames re-enable pointer events themselves. */
.vnl-window-layer{position:fixed;inset:0;pointer-events:none;z-index:1200}

/* vNext frame skin (dark-first). --vnl-win-* derive from the vNext token base. */
.vnl-window-layer .wmg-frame{
  --vnl-win-bg:color-mix(in srgb, var(--vnl-navd) 78%, #1b2c66);
  --vnl-win-border:rgba(255,255,255,.10);
  --vnl-win-chrome:rgba(255,255,255,.055);
  --vnl-win-fg:#eaeefb;
  --vnl-win-shadow:0 1px 2px rgba(0,0,0,.45),0 18px 48px -14px rgba(0,0,0,.66);
  background:var(--vnl-win-bg);
  border-color:var(--vnl-win-border);
  border-radius:20px;
  border-radius:var(--vnl-radius);
  box-shadow:var(--vnl-win-shadow);
  color:var(--vnl-win-fg)}
.vnl-window-layer .wmg-frame.is-focused{
  border-color:rgba(255,255,255,.20);
  box-shadow:0 2px 6px rgba(0,0,0,.5),0 26px 64px -16px rgba(0,0,0,.72)}
.vnl-window-layer .wmg-chrome{background:var(--vnl-win-chrome);border-bottom-color:var(--vnl-win-border)}
.vnl-window-layer .wmg-chrome.is-focused{background:color-mix(in srgb, var(--vnl-win-chrome) 55%, transparent)}
.vnl-window-layer .wmg-title,
.vnl-window-layer .wmg-frame.is-focused .wmg-title{color:var(--vnl-win-fg)}
.vnl-window-layer .wmg-control{color:color-mix(in srgb, var(--vnl-win-fg) 72%, transparent)}
.vnl-window-layer .wmg-control:hover{background:rgba(255,255,255,.10);color:var(--vnl-win-fg)}
.vnl-window-layer .wmg-body{background:var(--vnl-win-bg)}
.vnl-window-empty{padding:24px;color:#eaeefb;color:var(--vnl-win-fg,#eaeefb);font-size:13px}

/* Light theme override — swap the derived tokens; selectors stay scoped. */
.vnl-shell[data-vnl-theme="light"] .vnl-window-layer .wmg-frame{
  --vnl-win-bg:#ffffff;
  --vnl-win-border:rgba(20,30,60,.12);
  --vnl-win-chrome:rgba(20,30,60,.035);
  --vnl-win-fg:#0f1838;
  --vnl-win-shadow:0 1px 2px rgba(20,30,60,.06),0 14px 40px -10px rgba(20,30,60,.18)}
.vnl-shell[data-vnl-theme="light"] .vnl-window-layer .wmg-control:hover{background:rgba(20,30,60,.06)}

/* ===== UX-67 — vNext window dock (.vnl-windock*) ====================================
   Slim visible bar of open vNext screen windows (surface 'vnext.screen' ONLY — the
   IFI WindowNavBar excludes that surface, so the two bars are disjoint by design).
   Chip click = focus/restore · minus = minimize/restore · x = close. Sits above the
   window frames (z 1210 > layer 1200) so it stays reachable under any window. NO
   animations / transitions are introduced (reduced-motion safe by construction).
   Per-item accent rides --vnl-windock-accent (set inline from the module accent). */
.vnl-windock{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:1210;
  display:flex;align-items:center;gap:6px;max-width:min(72vw,780px);overflow-x:auto;
  padding:6px 8px;border-radius:14px;border:1px solid rgba(255,255,255,.10);
  background:color-mix(in srgb, #0b1437 84%, transparent);
  background:color-mix(in srgb, var(--vnl-navd) 84%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.vnl-windock-item{display:inline-flex;align-items:center;gap:2px;flex:none;padding-right:3px;
  border-radius:10px;border:1px solid transparent;background:rgba(255,255,255,.04)}
.vnl-windock-item.is-focused{border-color:color-mix(in srgb, #7551FF 55%, transparent);border-color:color-mix(in srgb, var(--vnl-windock-accent,var(--vnl-accent-hr)) 55%, transparent);
  background:color-mix(in srgb, #7551FF 16%, transparent);
  background:color-mix(in srgb, var(--vnl-windock-accent,var(--vnl-accent-hr)) 16%, transparent)}
.vnl-windock-item.is-minimized{opacity:.62}
.vnl-windock-chip{display:inline-flex;align-items:center;gap:7px;max-width:180px;height:28px;
  padding:0 10px;border:0;border-radius:10px;background:transparent;color:#cfd6ec;cursor:pointer;
  font:600 12px var(--vnl-font-body)}
.vnl-windock-item.is-focused .vnl-windock-chip{color:#fff}
.vnl-windock-dot{width:7px;height:7px;flex:none;border-radius:50%;
  background:#7551FF;
  background:var(--vnl-windock-accent,var(--vnl-accent-hr))}
.vnl-windock-lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-windock-min,.vnl-windock-x{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border:0;border-radius:7px;background:transparent;color:#97a3c4;cursor:pointer}
.vnl-windock-min:hover,.vnl-windock-x:hover{background:rgba(255,255,255,.10);color:#fff}
.vnl-windock-min svg,.vnl-windock-x svg{width:13px;height:13px}
.vnl-windock-chip:focus-visible,.vnl-windock-min:focus-visible,.vnl-windock-x:focus-visible{
  outline:2px solid #7551FF;
  outline:2px solid var(--vnl-accent-hr);outline-offset:1px}
/* light theme */
.vnl-shell[data-vnl-theme="light"] .vnl-windock{background:rgba(255,255,255,.9);border-color:rgba(20,30,60,.14)}
.vnl-shell[data-vnl-theme="light"] .vnl-windock-item{background:rgba(20,30,60,.04)}
.vnl-shell[data-vnl-theme="light"] .vnl-windock-chip{color:#3a4567}
.vnl-shell[data-vnl-theme="light"] .vnl-windock-item.is-focused .vnl-windock-chip{color:#0f1838}
.vnl-shell[data-vnl-theme="light"] .vnl-windock-min,
.vnl-shell[data-vnl-theme="light"] .vnl-windock-x{color:#5a648a}
.vnl-shell[data-vnl-theme="light"] .vnl-windock-min:hover,
.vnl-shell[data-vnl-theme="light"] .vnl-windock-x:hover{background:rgba(20,30,60,.08);color:#0f1838}
/* small screens: rise above the bottom dock-search bar */
@media (max-width:640px){.vnl-windock{bottom:70px;max-width:calc(100vw - 24px)}}

/* ============================================================================
   NOOB-TO-EXPERT OPERATING SYSTEM — primitive library look (design-token-authority
   guard-exempt, per file header). Consumed by design-system/vnext/noob/*.jsx and by
   pages that adopt the noob-first pattern. Namespace: .vnl-noob-*. Doctrine: every
   raw value lives HERE ONLY; components consume classes + var(--vnl-*), never inline
   literals. See docs/architecture/noob-to-expert-operating-system.md.
   ============================================================================ */

/* ---------- confidence / honesty badge (ConfidenceBadge) ---------- */
.vnl-noob-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;border-radius:var(--vnl-pill);font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;line-height:1.6;border:1px solid transparent}
.vnl-noob-badge.is-real{background:rgba(53,208,127,.16);border-color:rgba(53,208,127,.4);color:#8ff0bb}
.vnl-noob-badge.is-demo{background:rgba(255,210,67,.14);border-color:rgba(255,210,67,.4);color:#ffe08a}
.vnl-noob-badge.is-provisional{background:rgba(255,159,60,.16);border-color:rgba(255,159,60,.4);color:#ffc98a}
.vnl-noob-badge.is-unavailable{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#97a3c4}
.vnl-noob-corner-badge{position:fixed;top:12px;right:16px;z-index:50}
.vnl-noob-mt-md{margin-top:14px}

/* ---------- primary / secondary action buttons ---------- */
.vnl-noob-cta{display:inline-flex;align-items:center;gap:12px;background:linear-gradient(120deg,#ffcf3f,#ff9d3c);color:#241500;border:none;border-radius:18px;padding:16px 28px;font-size:18px;font-weight:800;cursor:pointer;box-shadow:0 14px 34px rgba(255,157,60,.28);transition:transform .14s cubic-bezier(.22,.61,.36,1),filter .14s,box-shadow .14s;transition:transform .14s var(--vnl-ease),filter .14s,box-shadow .14s}
.vnl-noob-cta:hover:not(:disabled){transform:translateY(-3px) scale(1.02);filter:brightness(1.05)}
.vnl-noob-cta:active:not(:disabled){transform:scale(.97)}
.vnl-noob-cta:disabled{opacity:.7;cursor:default}
.vnl-noob-cta .vnl-noob-cta-ic{font-size:22px;line-height:1}
.vnl-noob-btn-secondary{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:16px;border:1px solid rgba(124,107,255,.4);background:rgba(124,107,255,.12);color:#d6cfff;font-size:14px;font-weight:700;cursor:pointer;transition:background .14s}
.vnl-noob-btn-secondary:hover{background:rgba(124,107,255,.2)}

/* ---------- ChoiceCardGrid — pick-a-picture primitive ---------- */
.vnl-noob-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));grid-gap:14px;gap:14px}
.vnl-noob-tile{display:flex;flex-direction:column;align-items:center;gap:9px;padding:24px 14px;border-radius:20px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.035);cursor:pointer;transition:transform .14s,background .14s,border-color .14s}
.vnl-noob-tile:hover{transform:translateY(-3px);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.vnl-noob-tile.is-selected{background:rgba(124,107,255,.15);border-color:#7c6bff}
.vnl-noob-tile:disabled{opacity:.5;cursor:not-allowed;transform:none}
.vnl-noob-tile .vnl-noob-t-ic{font-size:42px;line-height:1}
.vnl-noob-tile .vnl-noob-t-t{font-size:14px;font-weight:700;text-align:center;color:#eaeefb}
.vnl-noob-tile .vnl-noob-t-sub{font-size:11px;color:#97a3c4}

/* ---------- WhyPanel / Waterfall — plain-language decomposition ---------- */
.vnl-noob-wf{display:flex;flex-direction:column;gap:8px}
.vnl-noob-wf-row{display:grid;grid-template-columns:40px 1fr auto;align-items:center;grid-gap:12px;gap:12px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.vnl-noob-wf-ic{font-size:24px;text-align:center}
.vnl-noob-wf-name{font-weight:700;font-size:14px;color:#eaeefb}
.vnl-noob-wf-why{font-size:12px;color:#8ea3cf;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.vnl-noob-wf-amt{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;font-weight:700;font-size:15px;color:#eaeefb}
.vnl-noob-wf-fix{justify-self:end;padding:5px 12px;border-radius:999px;border:1px solid rgba(120,170,255,.4);background:rgba(120,170,255,.12);color:#cfe0ff;font-weight:700;font-size:12px;cursor:pointer;white-space:nowrap;transition:background .15s}
.vnl-noob-wf-fix:hover{background:rgba(120,170,255,.22)}
.vnl-cr-tag{padding:3px 10px;border-radius:999px;border:1px solid rgba(120,220,170,.4);background:rgba(120,220,170,.12);color:#a9f0cd;font-weight:700;font-size:11px;white-space:nowrap}
.vnl-cr-tag--warn{border-color:rgba(255,180,90,.45);background:rgba(255,180,90,.14);color:#ffcf9a}
.vnl-shell[data-vnl-skin="lumina"] .vnl-cr-tag{border-color:rgba(15,157,107,.35);background:rgba(15,157,107,.1);color:#0f9d6b}
.vnl-shell[data-vnl-skin="lumina"] .vnl-cr-tag--warn{border-color:rgba(200,120,20,.4);background:rgba(200,120,20,.1);color:#b5651d}
.vnl-noob-rejected{color:#ff9a9a}
.vnl-shell[data-vnl-skin="lumina"] .vnl-noob-rejected{color:#c0392b}
.vnl-noob-wf-amt.is-add{color:#8ff0bb}
.vnl-noob-wf-amt.is-ded{color:#ff9a9a}
.vnl-noob-wf-bar{height:7px;border-radius:6px;margin-top:6px;background:linear-gradient(90deg,#ff9a9a,#ff6b6b)}
.vnl-noob-wf-bar.is-base{background:linear-gradient(90deg,#7fd0ff,#4a7bff)}
.vnl-noob-wf-row.is-net{background:linear-gradient(120deg,#16603e,#1f9d55);border-color:rgba(53,208,127,.5)}
.vnl-noob-wf-row.is-net .vnl-noob-wf-amt{color:#eafff3;font-size:20px}

/* ---------- ConsequencePreview — before/after live consequence ---------- */
.vnl-noob-cp{display:flex;align-items:center;gap:14px;padding:18px 22px;border-radius:20px;background:linear-gradient(120deg,#16233f,#101a30);border:1px solid rgba(255,255,255,.11)}
.vnl-noob-cp-icon{font-size:26px}
.vnl-noob-cp-label{font-size:12px;color:#9fb0d6}
.vnl-noob-cp-new{font-size:22px;font-weight:800;color:#fff;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.vnl-noob-cp-old{font-size:14px;color:#8ea3cf;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.vnl-noob-cp-arrow{color:#7fa;font-size:18px}

/* ---------- EvidenceTrail — generic timeline (fed real data by callers) ---------- */
.vnl-noob-trail{display:flex;flex-direction:column;gap:2px}
.vnl-noob-trail-row{display:flex;gap:12px;padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.08)}
.vnl-noob-trail-row:last-child{border-bottom:none}
.vnl-noob-trail-dot{width:8px;height:8px;border-radius:50%;background:#7c6bff;margin-top:6px;flex:none}
.vnl-noob-trail-meta{font-size:12px;color:#8ea3cf}
.vnl-noob-trail-action{font-size:13px;font-weight:700;color:#eaeefb}

/* ---------- ExplainWithLuna / FixItAction ---------- */
.vnl-noob-luna-btn,.vnl-noob-fix-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#cdd6f4;font-size:13px;font-weight:700;cursor:pointer;transition:background .14s}
.vnl-noob-luna-btn:hover,.vnl-noob-fix-btn:hover{background:rgba(255,255,255,.1)}
.vnl-noob-luna-btn:disabled,.vnl-noob-fix-btn:disabled{opacity:.5;cursor:not-allowed}
.vnl-noob-fix-btn{border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.1);color:#ffcf7a}
.vnl-noob-fix-btn:hover{background:rgba(245,158,11,.18)}
.vnl-noob-luna-btn svg,.vnl-noob-fix-btn svg{width:15px;height:15px}

/* ---------- SafeConfirm — noob-safe confirmation + success step ---------- */
.vnl-noob-modal-back{position:fixed;inset:0;background:rgba(5,7,15,.61);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:100;display:grid;place-items:center;padding:20px}
.vnl-noob-modal{width:min(920px,96vw);max-height:92vh;overflow:auto;border-radius:26px;background:linear-gradient(165deg,#141d33,#0d1424);border:1px solid rgba(255,255,255,.13);box-shadow:0 30px 80px rgba(0,0,0,.6);padding:28px 30px}
.vnl-noob-modal h2{font-size:24px;margin:0 0 4px;font-weight:800;color:#f4f8ff}
.vnl-noob-modal-sub{margin:0 0 22px;color:#97a3c4;font-size:14px}
.vnl-noob-form2col{display:grid;grid-template-columns:1fr 1fr;grid-gap:26px;gap:26px;margin-top:8px}
.vnl-noob-field{margin-bottom:18px}
.vnl-noob-field label{display:flex;align-items:center;gap:8px;font-size:13px;color:#9fb0d6;margin-bottom:8px;font-weight:600}
.vnl-noob-field input,.vnl-noob-field select{width:100%;box-sizing:border-box;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.05);color:#fff;font-size:17px}
.vnl-noob-field select option{background:#141d33;color:#fff}
.vnl-noob-toggle{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:rgba(22,96,62,.2);border:1px solid rgba(53,208,127,.27);cursor:pointer}
.vnl-noob-toggle .vnl-noob-tg{width:44px;height:25px;border-radius:999px;background:#35d07f;position:relative;flex:none}
.vnl-noob-toggle .vnl-noob-tg::after{content:'';position:absolute;top:3px;right:3px;width:19px;height:19px;border-radius:50%;background:#fff}
.vnl-noob-toggle.is-off .vnl-noob-tg{background:rgba(255,255,255,.13)}
.vnl-noob-toggle.is-off .vnl-noob-tg::after{left:3px;right:auto}
.vnl-noob-confirmrow{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.vnl-noob-confirmrow.is-center{justify-content:center}
.vnl-noob-ok{display:inline-flex;align-items:center;gap:12px;background:linear-gradient(120deg,#35d07f,#1f9d55);color:#06210f;border:none;border-radius:16px;padding:15px 28px;font-size:17px;font-weight:800;cursor:pointer;transition:transform .12s cubic-bezier(.22,.61,.36,1),filter .12s;transition:transform .12s var(--vnl-ease),filter .12s}
.vnl-noob-ok:hover:not(:disabled){transform:translateY(-2px) scale(1.03);filter:brightness(1.06)}
.vnl-noob-ok:disabled{opacity:.55;cursor:not-allowed}
.vnl-noob-cancel{background:none;border:none;color:#9fb0d6;font-size:14px;cursor:pointer}
.vnl-noob-success{text-align:center;padding:12px 6px}
.vnl-noob-success .vnl-noob-success-ic{font-size:60px}
.vnl-noob-err{color:#ff9a9a;font-size:13px;margin-top:10px}

/* ---------- page-local (sample/prototype boards + agenda — not shared primitives) ---------- */
/* Standalone noob pages render OUTSIDE .vnl-shell (no cockpit chrome wrapper), so the
   shell-scoped heading/empty-state color overrides (e.g. `.vnl-shell .vnl-empty h3`)
   don't apply — pin legible colors here too so the honest empty/loading text is
   always readable, not just inside the launcher. */
.vnl-noob-root{padding-bottom:24px}
.vnl-noob-root .vnl-title{color:#f4f8ff;-webkit-text-fill-color:#f4f8ff;background:none}
.vnl-noob-root .vnl-empty h3{color:#eaeefb}
.vnl-noob-root .vnl-noob-modal h2{color:#f4f8ff;-webkit-text-fill-color:#f4f8ff;background:none}
.vnl-noob-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:26px;flex-wrap:wrap}
.vnl-noob-pulse{display:flex;gap:14px;flex-wrap:wrap}
.vnl-noob-pulse-c{text-align:center;padding:14px 20px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);min-width:110px}
.vnl-noob-pulse-c .pv{font-size:24px;font-weight:800}
.vnl-noob-pulse-c .pl{font-size:12px;color:#9fb0d6}
.vnl-noob-section-h{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#8ea3cf;margin:30px 0 14px}
.vnl-noob-agenda{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));grid-gap:16px;gap:16px}
.vnl-noob-todo{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:22px;cursor:pointer;border:1px solid rgba(255,255,255,.11);background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02));transition:transform .16s,box-shadow .16s}
.vnl-noob-todo:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.35)}
.vnl-noob-todo.is-urgent{border-color:rgba(255,210,67,.6);background:linear-gradient(150deg,rgba(107,79,18,.25),rgba(42,31,8,.25))}
.vnl-noob-todo .td-ic{font-size:36px}
.vnl-noob-todo .td-t{font-size:17px;font-weight:800;color:#eaeefb}
.vnl-noob-todo .td-s{font-size:12px;color:#9fb0d6;margin-top:3px}
.vnl-noob-todo .td-go{margin-left:auto;font-size:22px;color:#ffd24f}
.vnl-noob-due{font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;background:rgba(255,210,67,.13);color:#ffe08a}
.vnl-noob-todo.is-inert{opacity:.6;cursor:default}
.vnl-noob-adv{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

.vnl-noob-year{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));grid-gap:14px;gap:14px;margin-bottom:30px}
.vnl-noob-month{position:relative;border-radius:20px;padding:18px 16px;min-height:140px;cursor:pointer;border:1px solid rgba(255,255,255,.1);background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.02));display:flex;flex-direction:column;justify-content:space-between;transition:transform .16s,box-shadow .16s,border-color .16s}
.vnl-noob-month:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,.4)}
.vnl-noob-month.is-done{background:linear-gradient(165deg,#16603e,#0f3e2a);border-color:rgba(53,208,127,.33)}
.vnl-noob-month.is-current{background:linear-gradient(165deg,#6b4f12,#4a3608);border-color:rgba(255,210,67,.6);animation:vnl-noob-pulseglow 2.2s ease-in-out infinite}
.vnl-noob-month.is-future{opacity:.55;cursor:default}
.vnl-noob-month.is-future:hover{transform:none;box-shadow:none}
.vnl-noob-m-name{font-size:18px;font-weight:800}
.vnl-noob-m-ic{font-size:28px}
.vnl-noob-m-foot{font-size:11px;color:#cdeedd;opacity:.85}
.vnl-noob-m-badge{position:absolute;top:12px;right:12px;font-size:22px}
@keyframes vnl-noob-pulseglow{0%,100%{box-shadow:0 0 0 2px rgba(255,210,67,.33),0 12px 34px rgba(0,0,0,.55)}50%{box-shadow:0 0 0 4px rgba(255,210,67,.6),0 16px 46px rgba(0,0,0,.55)}}

.vnl-noob-events{display:flex;gap:14px;flex-wrap:wrap}
.vnl-noob-event{display:flex;flex-direction:column;align-items:center;gap:8px;width:124px;padding:18px 10px;border-radius:18px;border:1px dashed rgba(255,255,255,.16);background:rgba(255,255,255,.03);cursor:pointer}
.vnl-noob-event:hover{background:rgba(255,255,255,.07);border-style:solid}
.vnl-noob-event .e-ic{font-size:36px}
.vnl-noob-event .e-t{font-size:13px;font-weight:600;text-align:center;color:#eaeefb}
.vnl-noob-closure{margin-top:24px;display:flex;align-items:center;gap:14px;padding:20px 24px;border-radius:22px;background:linear-gradient(120deg,#2a1d54,#1a1440);border:1px solid rgba(124,107,255,.27)}
.vnl-noob-closure .c-ic{font-size:36px}

.vnl-noob-runbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:20px}
.vnl-noob-steps{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.vnl-noob-step{display:flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;font-size:13px;font-weight:600;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:#b9c6e6}
.vnl-noob-step.is-done{background:#16603e;border-color:rgba(53,208,127,.33);color:#8ff0bb}
.vnl-noob-step.is-current{background:#6b4f12;border-color:rgba(255,210,67,.6);color:#ffe08a}
.vnl-noob-step .s-n{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:12px}

.vnl-noob-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));grid-gap:13px;gap:13px}
.vnl-noob-person{display:flex;align-items:center;gap:13px;padding:15px 17px;border-radius:17px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.032);transition:border-color .3s,background .3s}
.vnl-noob-person.is-calcd{border-color:rgba(53,208,127,.4);background:rgba(22,96,62,.13)}
.vnl-noob-av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#0a0f1f;flex:none;transition:transform .2s}
.vnl-noob-person.is-calcd .vnl-noob-av{transform:scale(1.06)}
.vnl-noob-av.a0{background:#01B574;background:var(--vnl-accent-payroll)}
.vnl-noob-av.a1{background:#3965FF;background:var(--vnl-accent-it)}
.vnl-noob-av.a2{background:#FB7185;background:var(--vnl-accent-hse)}
.vnl-noob-av.a3{background:#7551FF;background:var(--vnl-accent-hr)}
.vnl-noob-av.a4{background:#A78BFA;background:var(--vnl-accent-portail)}
.vnl-noob-av.a5{background:#FFB547;background:var(--vnl-accent-billing)}
.vnl-noob-av.a6{background:#22D3EE;background:var(--vnl-accent-reporting)}
.vnl-noob-av.a7{background:#F472B6;background:var(--vnl-accent-legal)}
.vnl-noob-p-name{font-weight:700;font-size:14px;color:#eaeefb}
.vnl-noob-p-amt{font-size:12px;color:#9fb0d6;display:flex;align-items:center;gap:6px;margin-top:2px}
.vnl-noob-dot{width:11px;height:11px;border-radius:50%;margin-left:auto;flex:none}
.vnl-noob-dot.is-ok{background:#35d07f}
.vnl-noob-person.is-calcd .vnl-noob-dot.is-ok{animation:vnl-noob-pop .35s cubic-bezier(.22,.61,.36,1);animation:vnl-noob-pop .35s var(--vnl-ease)}
@keyframes vnl-noob-pop{0%{transform:scale(0)}100%{transform:scale(1)}}
.vnl-noob-dot.is-warn{background:#ffb020;box-shadow:0 0 0 4px rgba(255,176,32,.2)}
.vnl-noob-warn-txt{font-size:11px;color:#ffcf7a;margin-left:auto;display:flex;align-items:center;gap:4px}

.vnl-noob-celebrate{display:flex;align-items:center;gap:16px;margin:18px 0 22px;padding:20px 24px;border-radius:22px;background:linear-gradient(120deg,#16603e,#1f9d55);border:1px solid rgba(53,208,127,.53);color:#eafff3;box-shadow:0 16px 44px rgba(0,0,0,.55);animation:vnl-noob-rise .5s cubic-bezier(.22,.61,.36,1);animation:vnl-noob-rise .5s var(--vnl-ease)}
.vnl-noob-celebrate .cc-ic{font-size:38px}
.vnl-noob-celebrate .cc-t{font-size:18px;font-weight:800}
@keyframes vnl-noob-rise{0%{opacity:0;transform:translateY(14px) scale(.97)}100%{opacity:1;transform:none}}
.vnl-noob-confetti{position:fixed;inset:0;pointer-events:none;z-index:200;overflow:hidden}
.vnl-noob-confetti i{position:absolute;top:-12px;width:9px;height:13px;border-radius:2px;opacity:.9;left:var(--l);animation:vnl-noob-fall linear forwards;animation-duration:var(--dur);animation-delay:var(--delay)}
.vnl-noob-confetti i.c0{background:#ffd24f}
.vnl-noob-confetti i.c1{background:#35d07f}
.vnl-noob-confetti i.c2{background:#7fd0ff}
.vnl-noob-confetti i.c3{background:#ff9ecb}
.vnl-noob-confetti i.c4{background:#c4b5ff}
.vnl-noob-confetti i.c5{background:#ff9d3c}
@keyframes vnl-noob-fall{to{transform:translateY(110vh) rotate(540deg);opacity:1}}

/* ---------- BEAUTY PASS — unique, colourful, iconic (owner 2026-07-02) ----------
   Signature look for the noob layer: living aurora canvas, jewel-gradient cards,
   glowing icon chips, gradient numbers. All raw values HERE ONLY (guard-exempt). */

/* living aurora canvas behind standalone noob pages */
.vnl-noob-root{position:relative;isolation:isolate;min-height:100vh;padding:26px clamp(16px,4vw,52px) 80px;box-sizing:border-box;
  background:radial-gradient(1100px 520px at 12% -8%,#20315e 0%,transparent 60%),
             radial-gradient(900px 640px at 102% 2%,#2c1e5c 0%,transparent 58%),
             radial-gradient(760px 540px at 55% 108%,#0d3f33 0%,transparent 55%),
             linear-gradient(165deg,#0b1228 0%,#090e1e 100%);color:#eaf0ff;
  font-family:var(--vnl-font-body)}
.vnl-noob-root::before{content:'';position:fixed;inset:-22%;z-index:-1;pointer-events:none;
  background:radial-gradient(560px 400px at 18% 22%,rgba(74,123,255,.16),transparent 60%),
             radial-gradient(660px 460px at 84% 14%,rgba(176,107,255,.13),transparent 60%),
             radial-gradient(560px 480px at 58% 92%,rgba(53,208,127,.10),transparent 60%);
  animation:vnl-noob-drift 20s ease-in-out infinite alternate}
@keyframes vnl-noob-drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-3%,2%) scale(1.07)}}

/* hero pulse chips — glassy, each with its own jewel tint */
.vnl-noob-pulse-c{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.vnl-noob-pulse-c:nth-child(1){background:linear-gradient(150deg,rgba(1,181,116,.16),rgba(255,255,255,.03));border-color:rgba(1,181,116,.35)}
.vnl-noob-pulse-c:nth-child(2){background:linear-gradient(150deg,rgba(74,123,255,.16),rgba(255,255,255,.03));border-color:rgba(74,123,255,.35)}
.vnl-noob-pulse-c:nth-child(3){background:linear-gradient(150deg,rgba(53,208,127,.16),rgba(255,255,255,.03));border-color:rgba(53,208,127,.4)}
.vnl-noob-pulse-c .pv{background:linear-gradient(120deg,#fff,#cfe0ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* agenda cards — jewel gradients + glowing icon chip per card */
.vnl-noob-todo{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.vnl-noob-todo .td-ic{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;flex:none;
  background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 22px rgba(0,0,0,.35);
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.vnl-noob-agenda .vnl-noob-todo:nth-child(1) .td-ic{background:linear-gradient(150deg,rgba(255,207,63,.28),rgba(255,157,60,.14))}
.vnl-noob-agenda .vnl-noob-todo:nth-child(2) .td-ic{background:linear-gradient(150deg,rgba(255,110,180,.26),rgba(176,107,255,.14))}
.vnl-noob-agenda .vnl-noob-todo:nth-child(3) .td-ic{background:linear-gradient(150deg,rgba(34,211,238,.26),rgba(74,123,255,.14))}
.vnl-noob-agenda .vnl-noob-todo:nth-child(4) .td-ic{background:linear-gradient(150deg,rgba(53,208,127,.26),rgba(1,181,116,.14))}
.vnl-noob-agenda .vnl-noob-todo:nth-child(5) .td-ic{background:linear-gradient(150deg,rgba(167,139,250,.26),rgba(138,107,255,.14))}
.vnl-noob-todo:hover .td-ic{transform:scale(1.08) rotate(-3deg);transition:transform .18s cubic-bezier(.22,.61,.36,1);transition:transform .18s var(--vnl-ease)}

/* month tiles — vivid, shiny */
.vnl-noob-month{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow:hidden}
.vnl-noob-month::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.08) 45%,transparent 60%);
  transform:translateX(-120%);transition:transform .5s cubic-bezier(.22,.61,.36,1);transition:transform .5s var(--vnl-ease);pointer-events:none}
.vnl-noob-month:hover::after{transform:translateX(120%)}
.vnl-noob-month .vnl-noob-m-ic{filter:drop-shadow(0 3px 10px rgba(0,0,0,.45))}
.vnl-noob-month.is-done{background:linear-gradient(160deg,#0f6a45,#0a4530 60%,#0d3f33)}
.vnl-noob-month.is-current{background:linear-gradient(160deg,#8a6414,#6b4f12 55%,#53400e)}

/* people cards — glass + avatar ring + gradient net pop */
.vnl-noob-person{-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.vnl-noob-av{box-shadow:0 0 0 3px rgba(255,255,255,.14),0 6px 16px rgba(0,0,0,.4)}
.vnl-noob-person.is-calcd{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(53,208,127,.35),0 10px 26px rgba(1,181,116,.12)}
.vnl-noob-person.is-calcd .vnl-noob-p-amt b{background:linear-gradient(120deg,#8ff0bb,#35d07f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:vnl-noob-netpop .4s cubic-bezier(.22,.61,.36,1);
  animation:vnl-noob-netpop .4s var(--vnl-ease)}
@keyframes vnl-noob-netpop{0%{opacity:0;transform:scale(.7)}100%{opacity:1;transform:scale(1)}}
.vnl-noob-dot{border:2px solid rgba(255,255,255,.22);background:transparent}
.vnl-noob-dot.is-ok{border-color:transparent;background:#35d07f;box-shadow:0 0 10px rgba(53,208,127,.6)}

/* CTA — living gradient + glow */
.vnl-noob-cta{background:linear-gradient(120deg,#ffcf3f,#ff9d3c 45%,#ff7ab0 110%);background-size:180% 180%;
  animation:vnl-noob-ctaflow 6s ease-in-out infinite;box-shadow:0 14px 38px rgba(255,157,60,.35),0 2px 8px rgba(0,0,0,.3)}
@keyframes vnl-noob-ctaflow{0%,100%{background-position:0% 40%}50%{background-position:90% 60%}}

/* celebration — shine sweep across the banner */
.vnl-noob-celebrate{position:relative;overflow:hidden}
.vnl-noob-celebrate::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.16) 42%,transparent 58%);
  transform:translateX(-130%);animation:vnl-noob-shine 1.6s cubic-bezier(.22,.61,.36,1) .2s 2;animation:vnl-noob-shine 1.6s var(--vnl-ease) .2s 2}
@keyframes vnl-noob-shine{to{transform:translateX(130%)}}

/* step chips — gradient when active */
.vnl-noob-step.is-current{background:linear-gradient(120deg,#8a6414,#6b4f12);box-shadow:0 0 0 1px rgba(255,210,67,.4),0 6px 18px rgba(255,210,67,.15)}
.vnl-noob-step.is-done{background:linear-gradient(120deg,#0f6a45,#0a4530)}

/* choice tiles — jewel hover ring + selected glow */
.vnl-noob-tile{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vnl-noob-tile:hover{box-shadow:0 0 0 1px rgba(124,107,255,.45),0 14px 30px rgba(0,0,0,.35)}
.vnl-noob-tile.is-selected{box-shadow:0 0 0 2px #7c6bff,0 14px 34px rgba(124,107,255,.25);background:linear-gradient(160deg,rgba(124,107,255,.22),rgba(124,107,255,.08))}
.vnl-noob-tile .vnl-noob-t-ic{filter:drop-shadow(0 4px 12px rgba(0,0,0,.45))}

/* waterfall — gradient net row + soft row tints */
.vnl-noob-wf-row{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.vnl-noob-wf-row.is-net{background:linear-gradient(120deg,#0f6a45,#1f9d55 70%,#35d07f);box-shadow:0 10px 30px rgba(1,181,116,.2)}
.vnl-noob-wf-ic{filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}

@media (prefers-reduced-motion: reduce){
  .vnl-noob-root::before,.vnl-noob-month.is-current,.vnl-noob-celebrate,.vnl-noob-celebrate::after,.vnl-noob-confetti i,
  .vnl-noob-person.is-calcd .vnl-noob-dot.is-ok,.vnl-noob-person.is-calcd .vnl-noob-p-amt b,.vnl-noob-cta{animation:none}
  .vnl-noob-cta,.vnl-noob-ok,.vnl-noob-month,.vnl-noob-tile,.vnl-noob-month::after,.vnl-noob-todo .td-ic{transition:none}
}

/* ==========================================================================================
   THEME FAMILY · LUMINA — a governed, coherent light+dark family with a governed accent.
   Members (data-vnl-skin): "lumina" (LIGHT, "Lumière" ✨, DEFAULT) · "lumina-nuit"
   (DARK, "Lumina Nuit" 🌙). Both render on an inherited appearance authority so they keep
   EVERY legibility rule + luminance auto-contrast for free (lumina→light, lumina-nuit→dark);
   the data-vnl-skin layer only adds the vibrant personality on top.

   Structure (source order is load-bearing — equal specificity, later wins):
     A. shared family tokens + accent-driven treatments   [data-vnl-skin^="lumina"]
     B. lumina (light) surfaces/ink/canvas/blobs           [data-vnl-skin="lumina"]
     C. lumina-nuit (dark) canvas/ink/blobs                [data-vnl-skin="lumina-nuit"]
     D. governed accent setting + auto-follow-module       [data-vnl-accent="…"]
     E. fun pack (opt-in) intensity + reduced-motion-gated micro-animations [data-vnl-funpack="on"]

   Zero hardcode governance: raw values live HERE (tokens/ is guard-exempt); JSX only gained
   class hooks + data-attrs (data-vnl-skin / data-vnl-accent / data-vnl-active-mod /
   data-vnl-funpack). Every treatment derives from the governed --vnl-lm-accent trio, so the
   accent setting (violet default / green / blue / pink / auto) recolours the whole family for
   free. The violet default trio equals the original literals → the default look is unchanged.
   Palette anchors — violet #7b5cff · blue #3f7bff · cyan #12c2e0 · green #12b981 ·
   pink #ff5c93 · amber #f59e0b · ink #171d3d · muted #6a7299 · line #e7e9f6.
   ========================================================================================== */

/* ==== A. shared family tokens + accent-driven treatments (light AND nuit) ==== */
.vnl-shell[data-vnl-skin^="lumina"]{
  /* violet trio tuned to the etcandmore.ch/integra marketing site: primary/eyebrow #7c3aed,
     gradient partner #9b6dff → the accent→partner gradient equals the site's button/hero
     gradient (linear-gradient(135deg,#7c5cfc,#9b6dff) — #7c3aed reads as #7c5cfc against #9b6dff).
     --vnl-lm-blue stays the true blue for the "blue" accent option. */
  --vnl-lm-violet:#7c3aed; --vnl-lm-violet-2:#9b6dff; --vnl-lm-blue:#3f7bff; --vnl-lm-cyan:#12c2e0;
  --vnl-lm-green:#12b981; --vnl-lm-pink:#ff5c93; --vnl-lm-amber:#f59e0b;
  /* governed accent trio — primary + gradient partner + warm partner (reserved). The accent
     setting (section D) overrides these; everything below derives from them, so one change
     recolours titles/bubbles/panel header/buttons/provenance across the whole family. Default =
     the site button/hero violet gradient (#7c3aed → #9b6dff). */
  --vnl-lm-accent:var(--vnl-lm-violet);
  --vnl-lm-accent-2:var(--vnl-lm-violet-2);
  --vnl-lm-cta-2:var(--vnl-lm-pink);
  /* Luna dock accent → the governed primary so bubbles/cards pop with the chosen accent */
  --vnl-chat-accent:var(--vnl-lm-accent);
}
/* ----- headline gradient text — the module head + the Luna hero title ----- */
.vnl-shell[data-vnl-skin^="lumina"] .vnl-title,
.vnl-shell[data-vnl-skin^="lumina"] .vnl-chat-home .cc-hero-title,
.vnl-shell[data-vnl-skin^="lumina"] .vnl-mod-luna .cc-hero-title{
  background:linear-gradient(90deg,var(--vnl-lm-accent),var(--vnl-lm-accent-2));
  -webkit-background-clip:text;background-clip:text;
  color:transparent!important;-webkit-text-fill-color:transparent}
/* ----- Luna dock user bubble — vibrant accent gradient ----- */
.vnl-shell[data-vnl-skin^="lumina"] .cc-msg-user{
  background:linear-gradient(135deg,var(--vnl-lm-accent),var(--vnl-lm-accent-2));color:#fff;
  box-shadow:0 18px 34px -16px color-mix(in srgb,var(--vnl-lm-accent) 60%,transparent)}
/* ----- ready-recap check chip (accent-independent success green — shared) ----- */
.vnl-shell[data-vnl-skin^="lumina"] .cc-panelfill--ready>div:first-child{
  color:#0f9d6b;display:flex;align-items:center;gap:8px}
.vnl-shell[data-vnl-skin^="lumina"] .cc-panelfill--ready>div:first-child::before{
  content:"✓";display:grid;place-items:center;width:22px;height:22px;flex:none;border-radius:7px;
  font-size:12px;color:#fff;background:linear-gradient(135deg,#12b981,#0bbf9a);
  box-shadow:0 8px 18px -8px #12b981}
/* ----- right-side panel header → accent gradient bar (mockup .pbar) ----- */
.vnl-shell[data-vnl-skin^="lumina"] .vnl-emp-create-hd{
  background:linear-gradient(135deg,var(--vnl-lm-accent),var(--vnl-lm-accent-2));
  margin:-20px -20px 18px;padding:15px 20px;border-radius:16px 16px 0 0}
.vnl-shell[data-vnl-skin^="lumina"] .vnl-emp-create-hd .vnl-emp-create-title{color:#fff!important}
.vnl-shell[data-vnl-skin^="lumina"] .vnl-emp-create-hd .vnl-bundle-sub{color:rgba(255,255,255,.85)}
.vnl-shell[data-vnl-skin^="lumina"] .vnl-emp-create-hd .vnl-emp-create-x{
  background:rgba(255,255,255,.18);color:#fff}
.vnl-shell[data-vnl-skin^="lumina"] .vnl-emp-create-hd .vnl-emp-create-x:hover{background:rgba(255,255,255,.3)}
/* ----- section icon chip → accent gradient (mockup .sec .ic) ----- */
.vnl-shell[data-vnl-skin^="lumina"] .vnl-emp-bundle .vnl-runs-colh svg{
  box-sizing:content-box;width:14px;height:14px;padding:5px;border-radius:7px;color:#fff;
  background:linear-gradient(135deg,var(--vnl-lm-accent),var(--vnl-lm-accent-2));
  box-shadow:0 8px 16px -8px color-mix(in srgb,var(--vnl-lm-accent) 60%,transparent)}
/* ----- primary buttons → the etcandmore.ch site button (accent→accent-2 violet gradient,
   radius 10, weight 600, soft violet shadow). Shared light+nuit so the CTA stays vibrant on
   both. Accent-driven: the violet default equals the site #7c5cfc→#9b6dff, and every accent
   variant / auto-module recolours it for free. Covers the launcher CTA pill, the bundle-panel
   submit, and the Luna panel-fill submit (home + dock). ----- */
.vnl-shell[data-vnl-skin^="lumina"] .vnl-pill-action:not(.is-secondary),
.vnl-shell[data-vnl-skin^="lumina"] .vnl-emp-create-submit,
.vnl-shell[data-vnl-skin^="lumina"] .vnl-chat-home .cc-pf-submit,
.vnl-shell[data-vnl-skin^="lumina"] .vnl-mod-luna .cc-pf-submit{
  background:linear-gradient(135deg,var(--vnl-lm-accent),var(--vnl-lm-accent-2));color:#fff;
  border-radius:10px;font-weight:600;
  box-shadow:0 6px 16px color-mix(in srgb,var(--vnl-lm-accent) 35%,transparent);
  transition:filter .15s cubic-bezier(.22,.61,.36,1),transform .15s cubic-bezier(.22,.61,.36,1),box-shadow .15s cubic-bezier(.22,.61,.36,1);
  transition:filter .15s var(--vnl-ease,ease),transform .15s var(--vnl-ease,ease),box-shadow .15s var(--vnl-ease,ease)}
.vnl-shell[data-vnl-skin^="lumina"] .vnl-pill-action:not(.is-secondary):hover,
.vnl-shell[data-vnl-skin^="lumina"] .vnl-emp-create-submit:hover,
.vnl-shell[data-vnl-skin^="lumina"] .vnl-chat-home .cc-pf-submit:hover,
.vnl-shell[data-vnl-skin^="lumina"] .vnl-mod-luna .cc-pf-submit:hover{
  filter:brightness(1.06);transform:translateY(-1px);
  box-shadow:0 10px 22px color-mix(in srgb,var(--vnl-lm-accent) 42%,transparent)}
/* ----- quick-suggestion chips + circular send button → the site chat controls (shared light+nuit
   base: accent-driven send gradient; per-appearance chip fills live in blocks B/C) ----- */
.vnl-shell[data-vnl-skin^="lumina"] .vnl-chat-home .cc-send,
.vnl-shell[data-vnl-skin^="lumina"] .vnl-mod-luna .cc-send{
  background:linear-gradient(135deg,var(--vnl-lm-accent),var(--vnl-lm-accent-2));
  box-shadow:0 8px 18px -6px color-mix(in srgb,var(--vnl-lm-accent) 55%,transparent)}
/* ----- Luna header status: "répond…" echoes the site's green "répond dans 16 langues" ----- */
.vnl-shell[data-vnl-skin^="lumina"] .cc-status-live{color:#10b981;font-weight:600}
/* ----- provenance tags (governed token classes; accent-aware) ----- */
.vnl-prov-suffix{font-weight:800;font-size:10px;letter-spacing:0;text-transform:none}
.vnl-shell[data-vnl-skin^="lumina"] .vnl-prov-luna,
.vnl-shell[data-vnl-skin^="lumina"] .vnl-bundle-fieldtop em.vnl-prov-luna{color:var(--vnl-lm-accent)}
.vnl-shell[data-vnl-skin^="lumina"] .vnl-prov-derived{color:#0aa7c2}
.vnl-shell[data-vnl-skin^="lumina"] .vnl-bundle-unknown.vnl-prov-todo{color:#b7791f}
.vnl-shell[data-vnl-skin^="lumina"] .vnl-bundle-unknown.vnl-prov-todo input{accent-color:var(--vnl-lm-amber)}

/* ==== B. LUMINA (light) — surfaces / ink / canvas / blobs ==== */
.vnl-shell[data-vnl-skin="lumina"]{
  /* light chrome tokens (mirror the light appearance, tuned brighter) */
  --vnl-navbar:rgba(255,255,255,.86); --vnl-field:#ffffff; --vnl-field-ink:#171d3d;
  /* Shared surface-ink tokens are only defined scoped to .vnl-pay-board globally, so on the
     light lumina canvas every consumer (anticipation strip, intent card, ghost pill, nav) fell
     to the pale DARK-theme fallbacks → near-invisible. Define the dark-ink pair here at shell
     level so all of them read at ≥AA in one place. */
  --vnl-title:#171d3d; --vnl-text:#3a4366; --vnl-muted:#5a648a;
  --vnl-line:rgba(20,30,60,.12); --vnl-line-strong:rgba(20,30,60,.18);
  /* Shell-level etcandmore canvas — the .vnl launcher wrapper (below) repaints the SAME
     gradient, but the chat-first MODULE views (.vnl-mod-canvas) + the docked right panel's
     backdrop render directly under .vnl-shell with no .vnl wrapper, so without this they fell
     back to the flat light-theme #eef1f9 (line ~1183) and lost the lavender→green identity.
     Painting it here (equal specificity, later in source → wins over the flat fill) makes the
     whole lumina surface read like the site, everywhere. lumina-nuit is a different skin value
     and is untouched. */
  background:linear-gradient(140deg,#efeafb 0%,#f5f1fb 42%,#e9f6f0 100%);
  color:#16181d;
}
/* ghost "Demander à Luna" secondary pill — accent-tinted border + ink (accent-aware) */
.vnl-shell[data-vnl-skin="lumina"] .vnl-pill-action.is-secondary{
  color:color-mix(in srgb,var(--vnl-lm-accent) 78%,#000);
  border-color:color-mix(in srgb,var(--vnl-lm-accent) 45%,transparent);
  background:color-mix(in srgb,var(--vnl-lm-accent) 6%,transparent)}
.vnl-shell[data-vnl-skin="lumina"] .vnl-pill-action.is-secondary:hover{
  color:color-mix(in srgb,var(--vnl-lm-accent) 86%,#000);
  background:color-mix(in srgb,var(--vnl-lm-accent) 12%,transparent);filter:none}
/* "Rien à régler ce mois" all-clear line — stronger green on a light green card */
.vnl-shell[data-vnl-skin="lumina"] .vnl-ant-empty{
  color:#0a6b45;background:#eafaf3;border-color:#bdead6}
.vnl-shell[data-vnl-skin="lumina"] .vnl-ant-empty svg{color:#0f9d6b}
/* ----- canvas: light multi-stop gradient tuned to the etcandmore.ch site (lavender → soft
   green), primary ink #16181d ----- */
.vnl-shell[data-vnl-skin="lumina"] .vnl{
  background:linear-gradient(140deg,#efeafb 0%,#f5f1fb 42%,#e9f6f0 100%);color:#16181d}
/* ----- ambient: vibrant blurred colour-blob field (mockup .blob b1..b4), soft, normal blend.
   Only the paint is overridden — the drift animation + reduced-motion/sober gates are inherited. */
.vnl-shell[data-vnl-skin="lumina"] .vnl::before{
  opacity:.6;mix-blend-mode:normal;filter:blur(72px);
  background:
    radial-gradient(30% 30% at 94% -8%, #b7a2ff 0%, transparent 62%),
    radial-gradient(28% 28% at 2% 30%, #8fe8ff 0%, transparent 64%),
    radial-gradient(28% 28% at 80% 110%, #ffb3d1 0%, transparent 64%),
    radial-gradient(24% 24% at 32% 114%, #bff3c9 0%, transparent 64%)}
/* bot card — white + dark ink + soft coloured shadow */
.vnl-shell[data-vnl-skin="lumina"] .cc-msg-bot{
  background:#fff;border:1px solid #e7e9f6;color:#171d3d;
  box-shadow:0 20px 40px -26px rgba(60,40,140,.4)}
/* recap / fill cards — white→faint-accent tint, soft accent shadow (accent-aware) */
.vnl-shell[data-vnl-skin="lumina"] .cc-data-answer,
.vnl-shell[data-vnl-skin="lumina"] .cc-panelfill{
  background:linear-gradient(135deg,#ffffff,color-mix(in srgb,var(--vnl-lm-accent) 7%,#ffffff));
  border:1px solid color-mix(in srgb,var(--vnl-lm-accent) 14%,#ffffff);
  box-shadow:0 20px 40px -26px color-mix(in srgb,var(--vnl-lm-accent) 42%,transparent)}
.vnl-shell[data-vnl-skin="lumina"] .cc-da-num{color:#171d3d}
/* GREEN success variant — the "Fiche prête" recap (status==='ready', real state, no fabrication) */
.vnl-shell[data-vnl-skin="lumina"] .cc-panelfill--ready{
  background:linear-gradient(135deg,#ffffff,#eafaf3);border-color:#bdead6;
  box-shadow:0 20px 40px -26px rgba(18,185,129,.4)}
/* right-side panel — white + soft accent elevation */
.vnl-shell[data-vnl-skin="lumina"] .vnl-emp-bundle{
  background:#fff;border:1px solid #eceafb;
  box-shadow:0 30px 70px -34px color-mix(in srgb,var(--vnl-lm-accent) 34%,transparent),0 10px 30px -20px rgba(0,0,0,.08)}
.vnl-shell[data-vnl-skin="lumina"] .vnl-emp-bundle .vnl-runs-colh{color:#171d3d}
/* field cards → light rounded cards, uppercase muted label + bold ink value */
.vnl-shell[data-vnl-skin="lumina"] .vnl-bundle-field{
  background:#fafaff;border:1.5px solid #e7e9f6;border-radius:13px;padding:10px 13px;gap:6px}
.vnl-shell[data-vnl-skin="lumina"] .vnl-bundle-fieldtop{color:#6a7299}
.vnl-shell[data-vnl-skin="lumina"] .vnl-bundle-field input,
.vnl-shell[data-vnl-skin="lumina"] .vnl-bundle-field select{
  background:#fff;border-color:#e7e9f6;color:#171d3d;font-weight:700}
.vnl-shell[data-vnl-skin="lumina"] .vnl-bundle-field input:focus,
.vnl-shell[data-vnl-skin="lumina"] .vnl-bundle-field select:focus{border-color:var(--vnl-lm-accent)}
.vnl-shell[data-vnl-skin="lumina"] .vnl-bundle-contract,
.vnl-shell[data-vnl-skin="lumina"] .vnl-bundle-check,
.vnl-shell[data-vnl-skin="lumina"] .vnl-bundle-ready{background:#fafaff;border-color:#e7e9f6}
.vnl-shell[data-vnl-skin="lumina"] .vnl-bundle-ready{color:#0f9d6b;background:#eafaf3;border-color:#bdead6}
/* ----- eyebrows / kickers → the site kicker (uppercase, wide track, accent violet, bold) ----- */
.vnl-shell[data-vnl-skin="lumina"] .vnl-intent-kicker,
.vnl-shell[data-vnl-skin="lumina"] .vnl-ant-kicker{color:var(--vnl-lm-accent);letter-spacing:.14em}
/* ----- content cards (intent panel + anticipation strip) → clean white site cards. The vivid
   module cards keep their own identity (not targeted here). ----- */
.vnl-shell[data-vnl-skin="lumina"] .vnl-intent,
.vnl-shell[data-vnl-skin="lumina"] .vnl-ant{
  background:#fff;border:1px solid rgba(20,30,60,.08);border-radius:20px;
  box-shadow:0 20px 40px -26px rgba(60,40,140,.25)}
/* ----- Luna quick-suggestion chips → the site chip (white pill, violet hairline, ink label) ----- */
.vnl-shell[data-vnl-skin="lumina"] .vnl-chat-home .cc-hero-chip,
.vnl-shell[data-vnl-skin="lumina"] .vnl-mod-luna .cc-hero-chip{
  background:#fff;border:1px solid color-mix(in srgb,var(--vnl-lm-accent) 35%,transparent);
  border-radius:999px;padding:7px 13px;color:#16181d;font-weight:500}
.vnl-shell[data-vnl-skin="lumina"] .vnl-chat-home .cc-hero-chip:hover,
.vnl-shell[data-vnl-skin="lumina"] .vnl-mod-luna .cc-hero-chip:hover{
  background:color-mix(in srgb,var(--vnl-lm-accent) 10%,#fff);
  border-color:color-mix(in srgb,var(--vnl-lm-accent) 60%,transparent);color:#16181d}
/* ----- Luna input → clean white rounded field ----- */
.vnl-shell[data-vnl-skin="lumina"] .vnl-chat-home .cc-input,
.vnl-shell[data-vnl-skin="lumina"] .vnl-mod-luna .cc-input{
  background:#fff;border:1px solid rgba(20,30,60,.12);color:#16181d;
  box-shadow:0 14px 34px -26px rgba(60,40,140,.35)}

/* ----- noob-first guided flow (Embaucher guidé + payroll proto, .vnl-noob-*) → light-lumina.
   The whole family is authored for the dark shell with hardcoded light inks (#eaeefb/#9fb0d6 +
   a gold current-step) AND white input text, so on the light canvas its text is near-invisible
   (white-on-white inputs, pale labels/readiness) and the current step reads gold — off the
   violet identity. Re-ink for the site: white cards, hairline borders, dark ink, VIOLET
   current/selected, green done/ready. lumina-nuit (dark) keeps the correct dark defaults. */
.vnl-shell[data-vnl-skin="lumina"] .vnl-noob-section-h{color:var(--vnl-muted)}
.vnl-shell[data-vnl-skin="lumina"] .vnl-noob-field label{color:var(--vnl-text)}
.vnl-shell[data-vnl-skin="lumina"] .vnl-noob-field input,
.vnl-shell[data-vnl-skin="lumina"] .vnl-noob-field select{
  background:#fff;border-color:rgba(20,30,60,.14);color:var(--vnl-title)}
.vnl-shell[data-vnl-skin="lumina"] .vnl-noob-field select option{background:#fff;color:var(--vnl-title)}
/* live payroll-readiness checklist */
.vnl-shell[data-vnl-skin="lumina"] .vnl-noob-wf-row{background:#fff;border:1px solid rgba(20,30,60,.08)}
.vnl-shell[data-vnl-skin="lumina"] .vnl-noob-wf-name,
.vnl-shell[data-vnl-skin="lumina"] .vnl-noob-wf-amt{color:var(--vnl-title)}
.vnl-shell[data-vnl-skin="lumina"] .vnl-noob-wf-amt.is-add{color:#0f9d6b}
.vnl-shell[data-vnl-skin="lumina"] .vnl-noob-wf-fix{border-color:rgba(30,90,200,.35);background:rgba(30,90,200,.08);color:#1e5ac8}
.vnl-shell[data-vnl-skin="lumina"] .vnl-noob-wf-fix:hover{background:rgba(30,90,200,.15)}
.vnl-shell[data-vnl-skin="lumina"] .vnl-noob-wf-row.is-net{
  background:linear-gradient(120deg,#eafaf3,#d6f3e4 70%,#c7efdb);border-color:#bdead6}
.vnl-shell[data-vnl-skin="lumina"] .vnl-noob-wf-row.is-net .vnl-noob-wf-name,
.vnl-shell[data-vnl-skin="lumina"] .vnl-noob-wf-row.is-net .vnl-noob-wf-amt{color:#0b7a4f}
/* stepper — VIOLET current (identity, not gold), green done, readable pending */
.vnl-shell[data-vnl-skin="lumina"] .vnl-noob-step{
  background:#fff;border:1px solid rgba(20,30,60,.10);color:var(--vnl-text)}
.vnl-shell[data-vnl-skin="lumina"] .vnl-noob-step .s-n{background:rgba(20,30,60,.06);color:var(--vnl-text)}
.vnl-shell[data-vnl-skin="lumina"] .vnl-noob-step.is-current{
  background:linear-gradient(135deg,var(--vnl-lm-accent),color-mix(in srgb,var(--vnl-lm-accent) 60%,#fff));
  border-color:transparent;color:#fff;box-shadow:0 8px 20px -10px color-mix(in srgb,var(--vnl-lm-accent) 55%,transparent)}
.vnl-shell[data-vnl-skin="lumina"] .vnl-noob-step.is-current .s-n{background:rgba(255,255,255,.30);color:#fff}
.vnl-shell[data-vnl-skin="lumina"] .vnl-noob-step.is-done{background:#eafaf3;border-color:#bdead6;color:#0b7a4f}
.vnl-shell[data-vnl-skin="lumina"] .vnl-noob-step.is-done .s-n{background:rgba(15,157,107,.18);color:#0b7a4f}
/* choice tiles */
.vnl-shell[data-vnl-skin="lumina"] .vnl-noob-tile{background:#fff;border:1px solid rgba(20,30,60,.10)}
.vnl-shell[data-vnl-skin="lumina"] .vnl-noob-tile .vnl-noob-t-t{color:var(--vnl-title)}
.vnl-shell[data-vnl-skin="lumina"] .vnl-noob-tile .vnl-noob-t-sub{color:var(--vnl-muted)}
.vnl-shell[data-vnl-skin="lumina"] .vnl-noob-tile.is-selected{
  background:color-mix(in srgb,var(--vnl-lm-accent) 10%,#fff);border-color:var(--vnl-lm-accent)}

/* ==== C. LUMINA NUIT (dark) — elegant deep canvas + dimmer blobs + light ink ==== */
/* Renders on the DARK appearance authority (data-vnl-theme="dark") so every dark surface
   (bot cards, panels, fields) + light ink come for free; this block only tunes the canvas,
   the ambient blobs and the chrome ink for the deep-violet night look. */
.vnl-shell[data-vnl-skin="lumina-nuit"]{
  --vnl-navbar:rgba(18,20,42,.72); --vnl-field:#161a33; --vnl-field-ink:#eef1ff;
  --vnl-title:#f4f6ff; --vnl-text:#c7cdec; --vnl-muted:#98a0c8;
  --vnl-line:rgba(255,255,255,.10); --vnl-line-strong:rgba(255,255,255,.17);
}
/* ----- canvas: deep multi-stop night gradient ----- */
.vnl-shell[data-vnl-skin="lumina-nuit"] .vnl{
  background:linear-gradient(155deg,#0c1020 0%,#141336 48%,#0e1428 100%);color:#e9ecfb}
/* Heading ink on the night canvas — REQUIRED because the app forces data-mode="light" globally
   (dark mode is disabled in ThemeContext) so the legacy rule
   [data-mode="light"] h1,h2,h3{color:var(--text-aaa,#0F172A)} (specificity 0,1,1) beats bare
   heading classes like .vnl-intent-title / .vnl-ant-title (0,1,0) and paints them dark-on-dark.
   Re-assert the light title ink for Nuit headings at (0,2,1) so it wins. The gradient .vnl-title
   (h1) is untouched — its color:transparent!important gradient still overrides this. */
.vnl-shell[data-vnl-skin="lumina-nuit"] h1,
.vnl-shell[data-vnl-skin="lumina-nuit"] h2,
.vnl-shell[data-vnl-skin="lumina-nuit"] h3{color:var(--vnl-title)}
/* ----- ambient: same 4-blob geometry, dimmer + screen blend so the accents glow on dark ----- */
.vnl-shell[data-vnl-skin="lumina-nuit"] .vnl::before{
  opacity:.34;mix-blend-mode:screen;filter:blur(78px);
  background:
    radial-gradient(30% 30% at 94% -8%, #8f78ff 0%, transparent 62%),
    radial-gradient(28% 28% at 2% 30%, #4fb8ff 0%, transparent 64%),
    radial-gradient(28% 28% at 80% 110%, #ff8fbc 0%, transparent 64%),
    radial-gradient(24% 24% at 32% 114%, #57d69b 0%, transparent 64%)}
/* bot card + recap tuned for dark (subtle accent-tinted glass) */
.vnl-shell[data-vnl-skin="lumina-nuit"] .cc-msg-bot{
  background:color-mix(in srgb,var(--vnl-lm-accent) 8%,#141336);
  border:1px solid color-mix(in srgb,var(--vnl-lm-accent) 24%,transparent);color:#e9ecfb;
  box-shadow:0 20px 40px -26px rgba(0,0,0,.6)}
.vnl-shell[data-vnl-skin="lumina-nuit"] .cc-data-answer,
.vnl-shell[data-vnl-skin="lumina-nuit"] .cc-panelfill{
  background:linear-gradient(135deg,#161a3a,color-mix(in srgb,var(--vnl-lm-accent) 16%,#161a3a));
  border:1px solid color-mix(in srgb,var(--vnl-lm-accent) 28%,transparent);
  box-shadow:0 20px 40px -26px rgba(0,0,0,.6)}
/* ----- Luna chat INPUT legibility (both the launcher-home dock and the module dock) -----
   The ChatPane input carries Tailwind utilities `bg-[var(--color-bg-surface)]/…` +
   `text-[var(--color-text-inverse)]` designed for a dark glass backdrop. But the app forces
   `data-mode="light"` globally, so `--color-bg-surface` resolves to #fff and that utility
   paints the input near-white — and it out-competes the base `.cc-input` rule (whose
   `color-mix(…, transparent)` background value gets dropped). In LIGHT lumina this is harmless
   (white field + dark ink). In LUMINA-NUIT it was white-on-white → the typed text vanished.
   Re-assert the field surface/ink from the resolved tokens with a solid (non-color-mix) value
   so it actually applies; scoped to the lumina family + !important to beat the Tailwind utility.
   Same result in light (field=#fff, ink dark), fixed in nuit (field dark, ink light). */
.vnl-shell[data-vnl-skin^="lumina"] .cc-input{
  background:#0b1437 !important;
  background:var(--vnl-field) !important;
  color:#fff !important;
  color:var(--vnl-field-ink) !important;
}
.vnl-shell[data-vnl-skin^="lumina"] .cc-input::placeholder{color:var(--vnl-muted)}
/* all-clear line ("Rien à régler ce mois") — green-on-dark parallel of the light family's
   green-on-light treatment (the light block's #0f9d6b/#eafaf3 is exact-"lumina" only). */
.vnl-shell[data-vnl-skin="lumina-nuit"] .vnl-ant-empty{
  color:#34d399;background:color-mix(in srgb,#12b981 14%,transparent);
  border-color:color-mix(in srgb,#12b981 34%,transparent)}
.vnl-shell[data-vnl-skin="lumina-nuit"] .vnl-ant-empty svg{color:#34d399}
/* ghost "Demander à Luna" secondary pill — accent-tinted on the night canvas (parallel of the
   light family's accent-tinted pill; base would otherwise render an untinted faint outline). */
.vnl-shell[data-vnl-skin="lumina-nuit"] .vnl-pill-action.is-secondary{
  color:color-mix(in srgb,var(--vnl-lm-accent) 52%,#fff);
  border-color:color-mix(in srgb,var(--vnl-lm-accent) 55%,transparent);
  background:color-mix(in srgb,var(--vnl-lm-accent) 14%,transparent)}
.vnl-shell[data-vnl-skin="lumina-nuit"] .vnl-pill-action.is-secondary:hover{
  color:color-mix(in srgb,var(--vnl-lm-accent) 38%,#fff);
  background:color-mix(in srgb,var(--vnl-lm-accent) 22%,transparent);filter:none}
/* ----- eyebrows / kickers → lightened accent for legibility on the night canvas ----- */
.vnl-shell[data-vnl-skin="lumina-nuit"] .vnl-intent-kicker,
.vnl-shell[data-vnl-skin="lumina-nuit"] .vnl-ant-kicker{
  color:color-mix(in srgb,var(--vnl-lm-accent) 52%,#fff);letter-spacing:.14em}
/* ----- content cards (intent + anticipation) → accent-tinted dark glass (parallel of the
   light family's clean white card; keeps AA legibility on the deep canvas) ----- */
.vnl-shell[data-vnl-skin="lumina-nuit"] .vnl-intent,
.vnl-shell[data-vnl-skin="lumina-nuit"] .vnl-ant{
  background:color-mix(in srgb,var(--vnl-lm-accent) 10%,#141336);
  border:1px solid color-mix(in srgb,var(--vnl-lm-accent) 22%,transparent);border-radius:20px;
  box-shadow:0 24px 50px -30px rgba(0,0,0,.6)}
/* ----- Luna quick-suggestion chips → dark glass with a violet border (parallel of the light
   white chip; send button stays the vibrant shared accent gradient) ----- */
.vnl-shell[data-vnl-skin="lumina-nuit"] .vnl-chat-home .cc-hero-chip,
.vnl-shell[data-vnl-skin="lumina-nuit"] .vnl-mod-luna .cc-hero-chip{
  background:color-mix(in srgb,var(--vnl-lm-accent) 12%,rgba(18,20,42,.55));
  border:1px solid color-mix(in srgb,var(--vnl-lm-accent) 45%,transparent);
  border-radius:999px;padding:7px 13px;color:#eef1ff;font-weight:500}
.vnl-shell[data-vnl-skin="lumina-nuit"] .vnl-chat-home .cc-hero-chip:hover,
.vnl-shell[data-vnl-skin="lumina-nuit"] .vnl-mod-luna .cc-hero-chip:hover{
  background:color-mix(in srgb,var(--vnl-lm-accent) 24%,rgba(18,20,42,.55));
  border-color:color-mix(in srgb,var(--vnl-lm-accent) 66%,transparent);color:#fff}

/* ==== D. governed accent setting (violet default / green / blue / pink / auto) ====
   Applies to the whole family via data-vnl-accent on the shell. Each fixed accent supplies its
   own tasteful cool + warm partners; "auto" follows the active module (data-vnl-active-mod set by
   the launcher) and derives its partners from that module's accent. Accent only touches chrome —
   legal numbers keep the inherited light/dark auto-contrast, never recoloured. */
.vnl-shell[data-vnl-skin^="lumina"][data-vnl-accent="violet"]{
  --vnl-lm-accent:var(--vnl-lm-violet);--vnl-lm-accent-2:var(--vnl-lm-violet-2);--vnl-lm-cta-2:var(--vnl-lm-pink)}
.vnl-shell[data-vnl-skin^="lumina"][data-vnl-accent="green"]{
  --vnl-lm-accent:var(--vnl-lm-green);--vnl-lm-accent-2:#0bbf9a;--vnl-lm-cta-2:var(--vnl-lm-cyan)}
.vnl-shell[data-vnl-skin^="lumina"][data-vnl-accent="blue"]{
  --vnl-lm-accent:var(--vnl-lm-blue);--vnl-lm-accent-2:var(--vnl-lm-cyan);--vnl-lm-cta-2:var(--vnl-lm-violet)}
.vnl-shell[data-vnl-skin^="lumina"][data-vnl-accent="pink"]{
  --vnl-lm-accent:var(--vnl-lm-pink);--vnl-lm-accent-2:#ff8f6b;--vnl-lm-cta-2:var(--vnl-lm-violet)}
/* auto → follow the active module accent (partners derived from it). No active module (launcher
   grid) → data-vnl-active-mod is absent, so the base violet trio stays. */
.vnl-shell[data-vnl-skin^="lumina"][data-vnl-accent="auto"][data-vnl-active-mod]{
  --vnl-lm-accent-2:color-mix(in srgb,var(--vnl-lm-accent),var(--vnl-lm-blue) 42%);
  --vnl-lm-cta-2:color-mix(in srgb,var(--vnl-lm-accent),var(--vnl-lm-pink) 50%)}
.vnl-shell[data-vnl-skin^="lumina"][data-vnl-accent="auto"][data-vnl-active-mod="payroll"]{--vnl-lm-accent:var(--vnl-accent-payroll)}
.vnl-shell[data-vnl-skin^="lumina"][data-vnl-accent="auto"][data-vnl-active-mod="hr"]{--vnl-lm-accent:var(--vnl-accent-hr)}
.vnl-shell[data-vnl-skin^="lumina"][data-vnl-accent="auto"][data-vnl-active-mod="self_service"]{--vnl-lm-accent:var(--vnl-accent-self_service)}
.vnl-shell[data-vnl-skin^="lumina"][data-vnl-accent="auto"][data-vnl-active-mod="expenses"]{--vnl-lm-accent:var(--vnl-accent-expenses)}
.vnl-shell[data-vnl-skin^="lumina"][data-vnl-accent="auto"][data-vnl-active-mod="time_absences"]{--vnl-lm-accent:var(--vnl-accent-time_absences)}
.vnl-shell[data-vnl-skin^="lumina"][data-vnl-accent="auto"][data-vnl-active-mod="it"]{--vnl-lm-accent:var(--vnl-accent-it)}
.vnl-shell[data-vnl-skin^="lumina"][data-vnl-accent="auto"][data-vnl-active-mod="finance"]{--vnl-lm-accent:var(--vnl-accent-finance)}
.vnl-shell[data-vnl-skin^="lumina"][data-vnl-accent="auto"][data-vnl-active-mod="legal"]{--vnl-lm-accent:var(--vnl-accent-legal)}
.vnl-shell[data-vnl-skin^="lumina"][data-vnl-accent="auto"][data-vnl-active-mod="banking"]{--vnl-lm-accent:var(--vnl-accent-banking)}

/* ==== E. fun pack (opt-in, data-vnl-funpack="on") — amp the joy ====
   Non-motion intensity (brighter blobs, deeper accent glow) applies always under fun pack; all
   MICRO-ANIMATIONS live strictly inside @media (prefers-reduced-motion: no-preference) so
   reduced-motion users (OS or the explicit toggle at :root[data-vnl-custom-reduced]) never get
   them, and sober/focus mode opts out too. */
.vnl-shell[data-vnl-skin="lumina"][data-vnl-funpack="on"] .vnl::before{opacity:.78;filter:blur(64px)}
.vnl-shell[data-vnl-skin="lumina-nuit"][data-vnl-funpack="on"] .vnl::before{opacity:.5;filter:blur(70px)}
/* small tasteful accent flourish on the Luna hero (static — not an animation) */
.vnl-shell[data-vnl-skin^="lumina"][data-vnl-funpack="on"] .vnl-chat-home .cc-hero-title::after,
.vnl-shell[data-vnl-skin^="lumina"][data-vnl-funpack="on"] .vnl-mod-luna .cc-hero-title::after{
  content:"✨";margin-left:.38em;font-size:.62em;-webkit-text-fill-color:initial;
  vertical-align:.12em;opacity:.9;filter:drop-shadow(0 3px 8px color-mix(in srgb,var(--vnl-lm-accent) 55%,transparent))}
@keyframes vnl-lm-shimmer{to{background-position:200% center}}
@keyframes vnl-lm-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  /* hero-title shimmer (only when NOT sober) */
  .vnl-shell[data-vnl-skin^="lumina"][data-vnl-funpack="on"]:not([data-vnl-mode="sober"]) .vnl-chat-home .cc-hero-title,
  .vnl-shell[data-vnl-skin^="lumina"][data-vnl-funpack="on"]:not([data-vnl-mode="sober"]) .vnl-mod-luna .cc-hero-title{
    background:linear-gradient(90deg,var(--vnl-lm-accent),var(--vnl-lm-accent-2),var(--vnl-lm-accent));
    background-size:200% auto;-webkit-background-clip:text;background-clip:text;
    animation:vnl-lm-shimmer 3.4s linear infinite}
  /* panel / window slide-in (backwards fill: plays the hidden→shown entrance during the delay,
     then releases every property back to base so nothing is pinned afterwards) */
  .vnl-shell[data-vnl-skin^="lumina"][data-vnl-funpack="on"]:not([data-vnl-mode="sober"]) .vnl-emp-bundle{
    animation:vnl-lm-rise .42s cubic-bezier(.2,.7,.2,1) backwards}
  /* card entrance stagger — backwards fill so the animated transform:none does NOT stay pinned
     and fight the pointer-tracked card tilt (useCardTilt inline transform) after the entrance */
  .vnl-shell[data-vnl-skin^="lumina"][data-vnl-funpack="on"]:not([data-vnl-mode="sober"]) .vnl-card{
    animation:vnl-lm-rise .5s cubic-bezier(.2,.7,.2,1) backwards}
  .vnl-shell[data-vnl-skin^="lumina"][data-vnl-funpack="on"]:not([data-vnl-mode="sober"]) .vnl-card:nth-child(2){animation-delay:.05s}
  .vnl-shell[data-vnl-skin^="lumina"][data-vnl-funpack="on"]:not([data-vnl-mode="sober"]) .vnl-card:nth-child(3){animation-delay:.1s}
  .vnl-shell[data-vnl-skin^="lumina"][data-vnl-funpack="on"]:not([data-vnl-mode="sober"]) .vnl-card:nth-child(4){animation-delay:.15s}
  .vnl-shell[data-vnl-skin^="lumina"][data-vnl-funpack="on"]:not([data-vnl-mode="sober"]) .vnl-card:nth-child(5){animation-delay:.2s}
  .vnl-shell[data-vnl-skin^="lumina"][data-vnl-funpack="on"]:not([data-vnl-mode="sober"]) .vnl-card:nth-child(6){animation-delay:.25s}
}

/* ==========================================================================================
   MONUMENTAL AESTHETIC PASS — "Luna, une présence vivante et chaleureuse"
   ------------------------------------------------------------------------------------------
   Elevates the CHAT-FIRST module experience (full-page confined Luna .vnl-mod-luna + the
   slide-in .vnl-mod-rightpanel), the launcher hero (.vnl-chat-home) and the send control, with
   LIFE · WARMTH · CRAFT — all governed HERE (tokens/ is guard-exempt; JSX gained NO raw values,
   only the class hooks that already exist). Four non-negotiables honoured:
     · legibility  — no figure/ink recoloured; only chrome/elevation touched
     · reduced-motion — every animation lives inside @media (prefers-reduced-motion:no-preference)
       AND is re-disabled under [data-vnl-mode="sober"] (with !important, since these rules are
       appended LAST and would otherwise re-enable over the earlier sober guards)
     · performance — transform / opacity / filter / box-shadow only (no layout thrash)
     · data honesty — nothing faked; the send ready-state keys off the REAL :not(:disabled) state
   Coherence: shadow/motion tokens carry a light (lumina) + dark (default / lumina-nuit) value so
   Nuit and the accent variants stay in tune. Appended last → equal-specificity overrides win.
   ========================================================================================== */

/* ---- C. craft tokens : layered violet-tinted elevation + a spring ease + field radius ----
   The colour term derives from --vnl-chat-accent (set per-module on the dock / to --vnl-lm-accent
   on the lumina family), so every panel's elevation carries its own hue for free. */
.vnl-shell{
  --vnl-radius-field:12px;
  --vnl-ease-spring:cubic-bezier(.34,1.3,.46,1);
  --vnl-shadow-raised:0 18px 40px -22px rgba(6,8,26,.6),
    0 6px 16px -8px color-mix(in srgb,var(--vnl-chat-accent,var(--vnl-accent-hr)) 26%,transparent);
  --vnl-shadow-float:0 34px 72px -32px rgba(4,6,22,.72),
    0 12px 28px -14px color-mix(in srgb,var(--vnl-chat-accent,var(--vnl-accent-hr)) 30%,transparent);
}
/* softer, cooler violet elevation on the LIGHT lumina canvas (dark rgba would read heavy on white) */
.vnl-shell[data-vnl-skin="lumina"]{
  --vnl-shadow-raised:0 20px 44px -26px rgba(60,40,140,.3),
    0 6px 16px -10px color-mix(in srgb,var(--vnl-lm-accent) 22%,transparent);
  --vnl-shadow-float:0 36px 80px -34px rgba(60,40,140,.36),
    0 12px 30px -16px color-mix(in srgb,var(--vnl-lm-accent) 24%,transparent);
}

/* ==========================================================================================
   A. LAYOUT FIXES (table stakes) — the floating toolbar no longer overlaps; the panel breathes.
   ========================================================================================== */
/* A1 — the toolbar pill floats absolute at top:20px (~54px tall). Push the whole chat-first
   split BELOW it so the right-panel header + chat start cleanly under the toolbar, with a
   comfortable inter-column gutter + side padding. Below 900px the toolbar becomes static
   (in flow) → the offset is dropped. */
.vnl-mod-canvas.vnl-mod-chatfirst{padding:92px 16px 8px;gap:26px}
@media (max-width:900px){
  .vnl-mod-canvas.vnl-mod-chatfirst{padding:10px 0 8px}
}
/* A2 — the right panel breathes: generous body padding, and the two leaf shapes it can host are
   both un-cramped — (a) a bare panel_fill form (.vnl-emp-bundle) gets a centred max width; (b) a
   full-canvas leaf (.vnl) drops its doubled outer inset AND the 560px floating-pill header reserve
   that squeezed the narrow panel. */
.vnl-mod-rightpanel-head{padding:16px 22px}
.vnl-mod-rightpanel-body{padding:22px 24px}
.vnl-mod-rightpanel-body > .vnl-emp-bundle{max-width:640px;margin:0 auto}
.vnl-mod-rightpanel-body > .vnl{padding:4px 2px 8px;min-height:0;background:transparent}
.vnl-mod-rightpanel-body .vnl-head{padding-right:0}

/* A3 — de-duplicate the panel header + un-truncate the fields (chat-first polish) --------------
   (1) NO double header. The wrapper (VnextModuleRightPanel) already renders title + close, so the
   hosted create-employee form's OWN gradient header bar (.vnl-emp-create-hd + its ×) is hidden —
   the form's sections/body stay. A full-canvas .vnl leaf instead carries its OWN .vnl-head (crumb
   + title + a back button already wired to close), so for THOSE the WRAPPER header is hidden via
   :has() (graceful no-op on engines without :has → harmless wrapper header, never a broken close).
   (2) NO truncation. In the narrow panel the bundle form's 4-column board + 2-column field grids
   collapse to a SINGLE column so every value ("Marie" / "Martin") is full-width and legible; the
   panel widens a touch (chat 55% / panel 45%) and fields keep a comfortable height. */
.vnl-mod-rightpanel .vnl-emp-create-hd{display:none}
.vnl-mod-rightpanel:has(> .vnl-mod-rightpanel-body > .vnl) .vnl-mod-rightpanel-head{display:none}
.vnl-mod-rightpanel .vnl-emp-bundle-board{grid-template-columns:1fr}
.vnl-mod-rightpanel .vnl-bundle-grid{grid-template-columns:1fr}
.vnl-mod-rightpanel .vnl-bundle-field input,
.vnl-mod-rightpanel .vnl-bundle-field select{min-height:40px}
/* A4 — employee-list filter bar, compacted for the narrow panel. In a full window the search +
   department + sort + page-size sit inline; in the 45% panel their wide flex-bases forced each
   onto its own row (4 stacked full-width pills — utilitarian). Let the row wrap: the search takes
   the top row, then department + sort + page-size share the next row. Verified truncation-free
   (both selects keep their full label). Panel-scoped → the window layout is untouched. */
.vnl-mod-rightpanel .vnl-emp-filters{flex-wrap:wrap;gap:10px}
.vnl-mod-rightpanel .vnl-emp-search{flex:1 1 100%}
.vnl-mod-rightpanel .vnl-emp-select{flex:1 1 150px;min-width:0}
.vnl-mod-rightpanel .vnl-emp-sort{flex:0 0 auto}
.vnl-mod-chatfirst[data-vnl-rightpanel="open"] > .vnl-mod-luna{flex-basis:55%}
.vnl-mod-chatfirst[data-vnl-rightpanel="open"] > .vnl-mod-rightpanel{flex-basis:45%}

/* ---- C (cont.) craft finish : cohesive elevation + a richer panel-header gradient + field radius ----
   The right panel gains the floating-elevation token (+ inset top highlight kept) on dark/Nuit;
   the light rules above (higher specificity) still own the light look. */
.vnl-mod-rightpanel{box-shadow:var(--vnl-shadow-float),inset 0 1px 0 rgba(255,255,255,.06)}
.vnl-mod-luna{box-shadow:var(--vnl-shadow-float),inset 0 1px 0 rgba(255,255,255,.05)}
/* premium header wash for the DARK/Nuit default (lumina keeps its accent-gradient .vnl-emp-create-hd) */
.vnl-mod-rightpanel-head{
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--vnl-rp-accent) 22%,transparent),
    color-mix(in srgb,var(--vnl-rp-accent) 6%,transparent))}
.vnl-mod-luna .cc-pf-input,.vnl-mod-luna .cc-pf-select{border-radius:var(--vnl-radius-field)}

/* ==========================================================================================
   B. LIFE & MOTION — the "wow", every effect gated (no-preference) + sober-disabled.
   ========================================================================================== */
@keyframes vnl-luna-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes vnl-luna-glow{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.9;transform:scale(1.14)}}
@keyframes vnl-msg-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes vnl-rp-spring{
  0%{opacity:0;transform:translateX(7%) scale(.985)}
  62%{opacity:1;transform:translateX(-1.1%) scale(1.004)}
  100%{transform:none}}
@keyframes vnl-send-ready{
  0%,100%{box-shadow:0 12px 28px -14px color-mix(in srgb,var(--vnl-chat-accent) 82%,transparent),
    0 0 0 0 color-mix(in srgb,var(--vnl-chat-accent) 0%,transparent)}
  50%{box-shadow:0 12px 30px -12px color-mix(in srgb,var(--vnl-chat-accent) 94%,transparent),
    0 0 0 5px color-mix(in srgb,var(--vnl-chat-accent) 22%,transparent)}}

/* Luna dock avatar gains the same signature halo the landing hero-mark has (so the breathing
   glow below has a ring to animate). Static → reduced-motion safe by construction. */
.vnl-mod-luna .cc-hero-mark::after{content:"";position:absolute;inset:-12px;border-radius:50%;
  z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in srgb,var(--vnl-chat-accent) 32%,transparent), transparent 78%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--vnl-chat-accent) 20%,transparent) inset}

/* Chip / send micro-interaction transitions extended to carry the shadow bloom smoothly. */
.vnl-shell .vnl-chat-home .cc-hero-chip,
.vnl-shell .vnl-mod-luna .cc-hero-chip{
  transition:border-color .2s cubic-bezier(.22,.61,.36,1),background .2s cubic-bezier(.22,.61,.36,1),
    color .2s cubic-bezier(.22,.61,.36,1),transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s cubic-bezier(.22,.61,.36,1);
  transition:border-color .2s var(--vnl-ease),background .2s var(--vnl-ease),
    color .2s var(--vnl-ease),transform .2s var(--vnl-ease),box-shadow .2s var(--vnl-ease)}

@media (prefers-reduced-motion:no-preference){
  /* B1 — Luna avatar = a soft LIVING ORB: entrance (once) THEN a gentle breathe; the halo ring
     drifts a slow violet glow. Both landing hero + dock avatar. */
  .vnl-shell .vnl-chat-home .cc-hero-mark,
  .vnl-shell .vnl-mod-luna .cc-hero-mark{
    animation:vnl-chat-mark-in .7s cubic-bezier(.22,.61,.36,1) both,
      vnl-luna-breathe 4.2s ease-in-out .7s infinite;
    animation:vnl-chat-mark-in .7s var(--vnl-ease) both,
      vnl-luna-breathe 4.2s ease-in-out .7s infinite}
  .vnl-shell .vnl-chat-home .cc-hero-mark::after,
  .vnl-shell .vnl-mod-luna .cc-hero-mark::after{
    animation:vnl-luna-glow 5.6s ease-in-out .7s infinite}

  /* B2 — message bubbles + data/panel cards settle in with a gentle rise (backwards fill so the
     entrance plays from hidden and releases cleanly). */
  .vnl-shell .vnl-chat-home .cc-msg,
  .vnl-shell .vnl-chat-home .cc-data-answer,
  .vnl-shell .vnl-chat-home .cc-panelfill,
  .vnl-shell .vnl-mod-luna .cc-msg,
  .vnl-shell .vnl-mod-luna .cc-data-answer,
  .vnl-shell .vnl-mod-luna .cc-panelfill{
    animation:vnl-msg-rise .42s cubic-bezier(.22,.61,.36,1) backwards;
    animation:vnl-msg-rise .42s var(--vnl-ease) backwards}

  /* B3 — right panel slide-in becomes a satisfying spring (hint of overshoot); the chat's
     container widening (1200→1720) eases in tandem. */
  .vnl-mod-chatfirst[data-vnl-rightpanel="open"] > .vnl-mod-rightpanel{
    animation:vnl-rp-spring .5s var(--vnl-ease-spring) both}
  .vnl-mod-canvas.vnl-mod-chatfirst{transition:max-width .45s cubic-bezier(.22,.61,.36,1);transition:max-width .45s var(--vnl-ease)}

  /* B4 — the send button gets a gentle READY pulse (soft halo) the moment the input holds text
     (real state: the button is only :not(:disabled) when input.trim() is non-empty). transform/
     filter untouched so the hover lift + brighten still read. */
  .vnl-shell .vnl-chat-home .cc-send:not(:disabled),
  .vnl-shell .vnl-mod-luna .cc-send:not(:disabled){
    animation:vnl-send-ready 2.4s ease-in-out infinite}
}

/* B5 — refined hover: chips + send lift a touch more and bloom a soft shadow. */
.vnl-shell .vnl-chat-home .cc-hero-chip:hover,
.vnl-shell .vnl-mod-luna .cc-hero-chip:hover{transform:translateY(-2px);box-shadow:var(--vnl-shadow-raised)}
.vnl-shell .vnl-chat-home .cc-send:hover:not(:disabled),
.vnl-shell .vnl-mod-luna .cc-send:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.12)}

/* ---- SOBER / reduced-motion opt-out (appended last → must re-assert with !important) ---- */
.vnl-shell[data-vnl-mode="sober"] .cc-hero-mark,
.vnl-shell[data-vnl-mode="sober"] .cc-hero-mark::after,
.vnl-shell[data-vnl-mode="sober"] .cc-msg,
.vnl-shell[data-vnl-mode="sober"] .cc-data-answer,
.vnl-shell[data-vnl-mode="sober"] .cc-panelfill,
.vnl-shell[data-vnl-mode="sober"] .cc-send:not(:disabled),
.vnl-shell[data-vnl-mode="sober"] .vnl-mod-rightpanel{animation:none!important}
.vnl-shell[data-vnl-mode="sober"] .vnl-mod-canvas.vnl-mod-chatfirst{transition:none}
.vnl-shell[data-vnl-mode="sober"] .cc-hero-chip:hover,
.vnl-shell[data-vnl-mode="sober"] .cc-send:hover:not(:disabled){transform:none}

/* EvervaultCard opt-in hover reveal — decorative launcher MODULE TILES only (VnextEvervaultTileFx).
   The whole look lives here in the token layer; the JS only sets --vnl-ev-x/-y (unitless, ×1px in
   CSS) and toggles .is-hovered. Every visual magnitude is a governed --vnl-ev-* token (one tuning
   point, theme/preset-overridable), so nothing is a bare literal. The refined defaults keep the
   accent gradient vivid while the character matrix stays a subtle texture behind the content.
   Tokenized (theme accents), reduced-motion + sober-mode suppressed. */
.vnl-evervault{
  --vnl-ev-radius:220px;       /* reveal mask size (cursor spotlight) */
  --vnl-ev-dur:.5s;            /* reveal fade */
  --vnl-ev-angle:120deg;       /* accent gradient direction */
  --vnl-ev-wash-op:.5;         /* gradient wash strength (the pretty layer) */
  --vnl-ev-matrix-op:.34;      /* character matrix strength (subtle texture) */
  --vnl-ev-matrix-size:.6rem;  /* matrix glyph size */
  position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;overflow:hidden}
.vnl-evervault__wash,
.vnl-evervault__matrix{position:absolute;inset:0;opacity:0;transition:opacity var(--vnl-ev-dur) ease;
  -webkit-mask-image:radial-gradient(var(--vnl-ev-radius) at calc(0 * 1px) calc(0 * 1px), #000, transparent);
  -webkit-mask-image:radial-gradient(var(--vnl-ev-radius) at calc(var(--vnl-ev-x,0) * 1px) calc(var(--vnl-ev-y,0) * 1px), #000, transparent);
  mask-image:radial-gradient(var(--vnl-ev-radius) at calc(0 * 1px) calc(0 * 1px), #000, transparent);
  mask-image:radial-gradient(var(--vnl-ev-radius) at calc(var(--vnl-ev-x,0) * 1px) calc(var(--vnl-ev-y,0) * 1px), #000, transparent)}
.vnl-evervault__wash{background-image:linear-gradient(var(--vnl-ev-angle), var(--vnl-accent), var(--vnl-accent));background-image:linear-gradient(var(--vnl-ev-angle), var(--vnl-accent), var(--vnl-seal-accent, var(--vnl-accent)))}
.vnl-evervault__matrix{mix-blend-mode:overlay;color:var(--vnl-accent);font-family:ui-monospace,monospace;font-weight:700;font-size:var(--vnl-ev-matrix-size);line-height:1;word-break:break-all;white-space:pre-wrap;overflow:hidden;padding:2px}
.vnl-evervault.is-hovered .vnl-evervault__wash{opacity:var(--vnl-ev-wash-op)}
.vnl-evervault.is-hovered .vnl-evervault__matrix{opacity:var(--vnl-ev-matrix-op)}
@media (prefers-reduced-motion: reduce){.vnl-evervault__wash,.vnl-evervault__matrix{transition:none}}
.vnl-shell[data-vnl-mode="sober"] .vnl-evervault{display:none}

/* Shader ambient wallpaper (VnextShaderBackground) — governed wash strength + a TRANSPARENT
   background so the ACTIVE THEME shows through: the ColorPanels lib default colorBack is an opaque
   preset colour (and the lib is 0.0.x), which would render an opaque panel instead of a wash. The
   component reads --vnl-shader-back and passes it as colorBack; --vnl-shader-op softens the whole
   wash so the coloured panels are a subtle ambient, not a dominant overlay. Both are one-point
   governed tokens (theme/preset-overridable), so nothing is a bare literal in the JS. */
:root{--vnl-shader-op:.55;--vnl-shader-back:#00000000;--vnl-shader-speed:.6}
.vnl-shader-bg{opacity:.55;opacity:var(--vnl-shader-op)}

/* ── WS-B B5 — governed legal-values console (VnextLegalValuesScreen) ─────
   Tokens only: accents/status colors come from the existing --vnl-* vars
   (same color-mix idiom as .vnl-vbadge-*). Legal numbers use --vnl-text at
   full opacity + tabular numerals: legibility is a non-negotiable. */
.vnl-vbadge-info{color:var(--vnl-text);background:color-mix(in srgb,var(--vnl-accent) 20%,transparent);border:1px solid color-mix(in srgb,var(--vnl-accent) 42%,transparent)}
.vnl-vbadge-muted{color:var(--vnl-muted);background:color-mix(in srgb,var(--vnl-muted) 14%,transparent);border:1px solid color-mix(in srgb,var(--vnl-muted) 30%,transparent)}
.vnl-loading{display:flex;align-items:center;gap:8px;color:var(--vnl-muted);padding:18px}
.vnl-cyc-navbtn--active{color:var(--vnl-text);border-color:color-mix(in srgb,var(--vnl-accent) 60%,transparent);background:color-mix(in srgb,var(--vnl-accent) 18%,transparent)}
.vnl-lgl-years{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.vnl-lgl-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,380px);grid-gap:14px;gap:14px;align-items:start}
@media (max-width:980px){.vnl-lgl-layout{grid-template-columns:1fr}}
.vnl-lgl-domain{padding:14px;border-radius:20px;border-radius:var(--vnl-radius,16px);border:1px solid color-mix(in srgb,var(--vnl-muted) 22%,transparent);background:color-mix(in srgb,var(--vnl-text) 4%,transparent)}
.vnl-lgl-domain-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.vnl-lgl-domain-title{font-size:13px;font-weight:900;letter-spacing:.3px;margin:0;color:var(--vnl-text)}
.vnl-lgl-rows{display:flex;flex-direction:column}
.vnl-lgl-row{padding:8px 0;border-top:1px solid color-mix(in srgb,var(--vnl-muted) 18%,transparent)}
.vnl-lgl-row:first-child{border-top:0}
.vnl-lgl-row-main{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.vnl-lgl-label{font-size:12px;color:var(--vnl-text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnl-lgl-value{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;font-weight:900;font-size:13px;color:var(--vnl-text);white-space:nowrap}
.vnl-lgl-row-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:3px}
.vnl-lgl-window{font-size:10.5px;color:var(--vnl-muted);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.vnl-lgl-proposals{padding:14px;position:sticky;top:12px;border-radius:20px;border-radius:var(--vnl-radius,16px);border:1px solid color-mix(in srgb,var(--vnl-muted) 22%,transparent);background:color-mix(in srgb,var(--vnl-text) 4%,transparent)}
.vnl-lgl-proposal{padding:10px 0;border-top:1px solid color-mix(in srgb,var(--vnl-muted) 18%,transparent)}
.vnl-lgl-proposal--closed{opacity:.72}
.vnl-lgl-steps{display:flex;align-items:center;gap:2px;flex-wrap:wrap;margin:6px 0 2px}
.vnl-lgl-step-sep{width:12px;height:12px;color:var(--vnl-muted);flex:none}
.vnl-lgl-state-icon{width:13px;height:13px;color:var(--vnl-muted);flex:none}
.vnl-lgl-justification{font-size:11px;color:var(--vnl-muted);margin:6px 0 0;line-height:1.45}
.vnl-lgl-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.vnl-lgl-activate{color:var(--vnl-text);border-color:color-mix(in srgb,#3ecf8e 55%,transparent);border-color:color-mix(in srgb,var(--vnl-ok,#3ecf8e) 55%,transparent);background:color-mix(in srgb,#3ecf8e 16%,transparent);background:color-mix(in srgb,var(--vnl-ok,#3ecf8e) 16%,transparent)}
.vnl-lgl-reject{color:color-mix(in srgb,#ff6b6b 80%,var(--vnl-text));color:color-mix(in srgb,var(--vnl-danger,#ff6b6b) 80%,var(--vnl-text))}
.vnl-lgl-confirm{margin-top:10px;padding:10px;border-radius:12px;border:1px solid color-mix(in srgb,#e8b341 50%,transparent);border:1px solid color-mix(in srgb,var(--vnl-warn,#e8b341) 50%,transparent);background:color-mix(in srgb,#e8b341 10%,transparent);background:color-mix(in srgb,var(--vnl-warn,#e8b341) 10%,transparent);display:flex;flex-direction:column;gap:6px}
.vnl-lgl-impact{display:flex;align-items:center;gap:6px}
.vnl-lgl-empty{font-size:11.5px;color:var(--vnl-muted);line-height:1.5}
.vnl-lgl-closed-head{margin-top:12px}
/* WS-B B5b — inline "propose a change" form (token-only) */
.vnl-lgl-propose-btn{margin-left:auto}
.vnl-lgl-draft{border-color:color-mix(in srgb,var(--vnl-accent) 45%,transparent);background:color-mix(in srgb,var(--vnl-accent) 8%,transparent)}
.vnl-lgl-field{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--vnl-muted)}
.vnl-lgl-field input{font:inherit;color:var(--vnl-text);background:color-mix(in srgb,var(--vnl-text) 5%,transparent);border:1px solid color-mix(in srgb,var(--vnl-muted) 30%,transparent);border-radius:8px;padding:6px 8px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.vnl-lgl-field input:focus{outline:2px solid color-mix(in srgb,var(--vnl-accent) 55%,transparent);outline-offset:1px}

/* ── Scope dimensions (P2-S3) — token-only, theme-adaptive ── */
.vnl-sdim { display: flex; align-items: center; gap: 0.75rem; gap: var(--vnl-gap, 0.75rem); }
.vnl-sdim--unbound { opacity: 0.55; }
.vnl-sdim-main { display: flex; flex-direction: column; gap: 0.15em; min-width: 0; flex: 1 1; }
.vnl-sdim-label { font-weight: 600; color: var(--vnl-text); }
.vnl-sdim-id { font-size: 0.78em; color: color-mix(in srgb, var(--vnl-text) 55%, transparent); font-family: monospace; font-family: var(--vnl-mono, monospace); }
.vnl-sdim-desc { font-size: 0.82em; color: color-mix(in srgb, var(--vnl-text) 70%, transparent); }
.vnl-sdim-retire { display: flex; align-items: center; gap: 0.4em; }
.vnl-sdim-retire input { background: color-mix(in srgb, var(--vnl-text) 4%, transparent); color: var(--vnl-text); border: 1px solid color-mix(in srgb, var(--vnl-text) 18%, transparent); border-radius: 8px; border-radius: var(--vnl-radius-s, 8px); padding: 0.3em 0.6em; }

/* ── Perimeter value chips (P2-S3b, guided access «Où ?») ── */
.vnl-perim-vals { display: flex; flex-wrap: wrap; gap: 0.35em; max-width: 60%; justify-content: flex-end; }

/* ── Federal deviations console (P3.4) — token-only ── */
.vnl-feddev-statement { display: block; font-style: italic; color: var(--vnl-text); margin: 0.4em 0; }
.vnl-feddev-ack { display: flex; align-items: flex-start; gap: 0.5em; color: var(--vnl-text); cursor: pointer; }
.vnl-feddev-confirm { flex-direction: column; }

/* ══════════════════════════════════════════════════════════════════════════
   Module grid presentation — view bar + list view (token-only)

   `data-vnl-modview` is set on .vnl-shell by the home grid ONLY, so module
   screens never inherit the list layout. Every colour here resolves from
   existing tokens (--vnl-line / --vnl-text / --vnl-muted / --vnl-accent);
   no raw colour is introduced.
   ══════════════════════════════════════════════════════════════════════════ */

/* Grid geometry tokens — named, so the compact view never carries raw literals.
   Column floor drives auto-fill: the browser fits as many columns as the width
   allows instead of being pinned to three. */
/* Declared AFTER the density rules and at equal specificity, so an explicit grid
   choice deliberately wins over the global density setting. */
.vnl-shell[data-vnl-modview="compact"]{--vnl-grid-col-min:15rem;--vnl-card-min-h:150px;--vnl-card-pad:14px}

.vnl-shell[data-vnl-modview="compact"] .vnl-grid{
  grid-template-columns:repeat(auto-fill,minmax(var(--vnl-grid-col-min),1fr));gap:12px}
.vnl-shell[data-vnl-modview="compact"] .vnl-ctitle{font-size:15px}
.vnl-shell[data-vnl-modview="compact"] .vnl-cdesc{-webkit-line-clamp:2;font-size:12px}
.vnl-shell[data-vnl-modview="compact"] .vnl-meta{margin-top:8px}
/* the decorative squiggle is sized for the tall tile; it crowds the compact one */
.vnl-shell[data-vnl-modview="compact"] .vnl-sq{display:none}

.vnl-viewbar{display:flex;align-items:center;justify-content:flex-end;
  flex-wrap:wrap;gap:14px;margin:0 0 12px}
.vnl-vb-seg{display:flex;align-items:center;gap:6px}
.vnl-vb-lab{font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--vnl-muted)}
.vnl-vb-btn{font:inherit;font-size:12px;line-height:1.2;padding:5px 12px;
  border-radius:999px;
  border-radius:var(--vnl-pill);border:1px solid var(--vnl-line);
  background:transparent;color:var(--vnl-muted);cursor:pointer;
  transition:color .15s cubic-bezier(.22,.61,.36,1),border-color .15s cubic-bezier(.22,.61,.36,1),
             background .15s cubic-bezier(.22,.61,.36,1);
  transition:color .15s var(--vnl-ease),border-color .15s var(--vnl-ease),
             background .15s var(--vnl-ease)}
.vnl-vb-btn:hover{color:var(--vnl-text);border-color:var(--vnl-line-strong)}
.vnl-vb-btn[aria-pressed="true"]{color:var(--vnl-text);
  border-color:color-mix(in srgb,var(--vnl-accent) 55%,transparent);
  background:color-mix(in srgb,var(--vnl-accent) 16%,transparent)}

/* ── list view: one row per module ───────────────────────────────────────── */
.vnl-shell[data-vnl-modview="list"] .vnl-grid{
  display:flex;flex-direction:column;gap:0;perspective:none}

.vnl-shell[data-vnl-modview="list"] .vnl-card{
  flex-direction:row;align-items:center;gap:14px;
  min-height:0;padding:10px 12px;border-radius:0;
  background:none;box-shadow:none;
  border-top:1px solid var(--vnl-line);
  color:var(--vnl-text);
  transform:none;
  transition:background .15s cubic-bezier(.22,.61,.36,1),padding-inline-start .15s cubic-bezier(.22,.61,.36,1);
  transition:background .15s var(--vnl-ease),padding-inline-start .15s var(--vnl-ease)}
.vnl-shell[data-vnl-modview="list"] .vnl-grid > .vnl-card:last-child{
  border-bottom:1px solid var(--vnl-line)}
.vnl-shell[data-vnl-modview="list"] .vnl-card:hover,
.vnl-shell[data-vnl-modview="list"] .vnl-card:focus-visible{
  /* logical inset + margin: Arabic is a shipped language, and while the cockpit has
     no RTL layout yet, new rules should not add to that debt. The hover wash still
     reads left-to-right — mirroring a gradient needs a [dir] selector, out of scope
     here and noted rather than half-done. */
  padding-inline-start:18px;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--vnl-accent) 14%,transparent),transparent 55%)}

/* the card's decorative 3D layers carry no information — drop them in list view */
.vnl-shell[data-vnl-modview="list"] .vnl-dots,
.vnl-shell[data-vnl-modview="list"] .vnl-sq,
.vnl-shell[data-vnl-modview="list"] .vnl-gloss,
.vnl-shell[data-vnl-modview="list"] .vnl-shine,
.vnl-shell[data-vnl-modview="list"] .vnl-pulse{display:none}

.vnl-shell[data-vnl-modview="list"] .vnl-row{flex:none;margin:0}
.vnl-shell[data-vnl-modview="list"] .vnl-ic{
  width:30px;height:30px;border-radius:var(--vnl-radius-s);
  background:color-mix(in srgb,var(--vnl-accent) 22%,transparent);
  color:var(--vnl-accent)}
.vnl-shell[data-vnl-modview="list"] .vnl-cbody{
  display:flex;flex-direction:row;align-items:center;gap:14px;
  flex:1 1;min-width:0}
.vnl-shell[data-vnl-modview="list"] .vnl-ctitle{
  font-size:14px;flex:none;min-width:15rem;color:var(--vnl-text)}
.vnl-shell[data-vnl-modview="list"] .vnl-cdesc{
  display:block;flex:1 1;min-width:0;font-size:12px;color:var(--vnl-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:none}
.vnl-shell[data-vnl-modview="list"] .vnl-meta{
  margin:0;margin-inline-start:auto;flex:none}

/* below ~740px the description is the first thing to go, then the title expands */
@media (max-width:740px){
  .vnl-shell[data-vnl-modview="list"] .vnl-cdesc{display:none}
  .vnl-shell[data-vnl-modview="list"] .vnl-ctitle{min-width:0;flex:1 1}
}

/**
 * per-theme-extras.css
 * ======================
 * Additional deep per-theme rewrites for families B/C/D/E/F/G/H/I/J/K
 * — extends per-theme.css.
 */

/* ============================================================
 * NATURE — generic ground rules
 * ============================================================ */
:root[data-ambiance="volcanic"] .tx-card {
  background-image: linear-gradient(135deg, rgba(255, 69, 0, 0.05), transparent 70%);
  border-color: rgba(255, 140, 60, 0.26);
}
:root[data-ambiance="volcanic"] .tx-btn:hover { box-shadow: 0 0 40px rgba(255, 69, 0, 0.5); }

:root[data-ambiance="ice-crystal"] .tx-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 32px rgba(79, 179, 217, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.60);
}
:root[data-ambiance="ice-crystal"] .tx-input:focus,
:root[data-ambiance="ice-crystal"] .tx-textarea:focus,
:root[data-ambiance="ice-crystal"] .tx-select:focus {
  box-shadow: 0 0 24px rgba(186, 230, 253, 0.6);
}

:root[data-ambiance="sakura"] .tx-card { border-radius: 32px; }
:root[data-ambiance="sakura"] .tx-btn { border-radius: 999px; }

:root[data-ambiance="bamboo-zen"] .tx-card,
:root[data-ambiance="bamboo-zen"] .tx-btn,
:root[data-ambiance="bamboo-zen"] .tx-input,
:root[data-ambiance="bamboo-zen"] .tx-textarea {
  border-radius: 2px;
}
:root[data-ambiance="bamboo-zen"] .tx-btn {
  border-left: 3px solid var(--tx-colors-accent);
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  background: transparent;
  color: var(--tx-colors-text);
}

:root[data-ambiance="boreal-forest"] .tx-card {
  background-image: linear-gradient(180deg, #2D3D33 0%, #233029 100%);
}

:root[data-ambiance="obsidian"] .tx-card {
  background: linear-gradient(135deg, rgba(24, 20, 35, 0.92), rgba(37, 32, 58, 0.78));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(192, 132, 252, 0.18);
}
:root[data-ambiance="obsidian"] .tx-btn {
  background: linear-gradient(135deg, #7C3AED, #C084FC);
  border: none;
}

/* ============================================================
 * ART — movement-specific overrides
 * ============================================================ */
:root[data-ambiance="bauhaus"] .tx-card {
  border: 3px solid #111111;
  box-shadow: 8px 8px 0 #111111;
}
:root[data-ambiance="bauhaus"] .tx-card:hover { transform: translate(-2px, -2px); box-shadow: 12px 12px 0 #111111; }
:root[data-ambiance="bauhaus"] .tx-btn {
  border-width: 3px;
  box-shadow: 4px 4px 0 #111111;
  border-radius: 0;
}
:root[data-ambiance="bauhaus"] .tx-btn:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 #111111; }

:root[data-ambiance="mondrian"] .tx-card { border-width: 4px; }
:root[data-ambiance="mondrian"] .tx-btn { border-width: 4px; border-radius: 0; box-shadow: none; }
:root[data-ambiance="mondrian"] .tx-btn:hover { transform: none; background: #111; color: #fff; }

:root[data-ambiance="pop-art"] .tx-card,
:root[data-ambiance="pop-art"] .tx-btn {
  border: 3px solid #111111;
  box-shadow: 6px 6px 0 #111111;
}
:root[data-ambiance="pop-art"] .tx-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 10px 10px 0 #111111;
}

:root[data-ambiance="art-deco"] .tx-card,
:root[data-ambiance="art-deco"] .tx-btn {
  border-width: 1px;
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.30) inset;
}
:root[data-ambiance="art-deco"] .tx-btn {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  border: 1px solid rgba(212, 175, 55, 0.55);
}

:root[data-ambiance="steampunk"] .tx-btn {
  border-radius: 999px;
  background: linear-gradient(180deg, #B87333 0%, #8B5A2B 100%);
  box-shadow: inset 0 1px 0 rgba(255, 200, 120, 0.25), 0 4px 10px rgba(0, 0, 0, 0.5);
}
:root[data-ambiance="steampunk"] .tx-card {
  background: linear-gradient(180deg, #3D2F22 0%, #2B1F15 100%);
  box-shadow: inset 0 1px 0 rgba(255, 200, 120, 0.15), 0 6px 24px rgba(0, 0, 0, 0.6);
}

:root[data-ambiance="cyberpunk"] .tx-card {
  background: linear-gradient(135deg, rgba(255, 0, 255, 0.04), rgba(0, 255, 255, 0.04));
  border: 1px solid rgba(0, 255, 255, 0.28);
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.18), inset 0 0 20px rgba(0, 255, 255, 0.05);
}
:root[data-ambiance="cyberpunk"] .tx-btn {
  background: transparent;
  color: #FF00FF;
  border: 1px solid #FF00FF;
  box-shadow: 0 0 12px rgba(255, 0, 255, 0.5), inset 0 0 12px rgba(0, 255, 255, 0.12);
}
:root[data-ambiance="cyberpunk"] .tx-btn:hover {
  background: rgba(255, 0, 255, 0.14);
  box-shadow: 0 0 28px rgba(255, 0, 255, 0.75), inset 0 0 24px rgba(0, 255, 255, 0.18);
}

:root[data-ambiance="pixel-art"] .tx-card,
:root[data-ambiance="pixel-art"] .tx-btn,
:root[data-ambiance="pixel-art"] .tx-input,
:root[data-ambiance="pixel-art"] .tx-textarea,
:root[data-ambiance="pixel-art"] .tx-select {
  border-radius: 0;
  image-rendering: pixelated;
}
:root[data-ambiance="pixel-art"] .tx-btn {
  box-shadow: 3px 3px 0 #000000;
  border: 2px solid #000000;
}
:root[data-ambiance="pixel-art"] .tx-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #000000;
}

:root[data-ambiance="art-nouveau"] .tx-card { border-radius: 48px; }
:root[data-ambiance="art-nouveau"] .tx-btn { border-radius: 999px; text-transform: uppercase; letter-spacing: 0.14em; }

:root[data-ambiance="ukiyoe"] .tx-card,
:root[data-ambiance="ukiyoe"] .tx-btn {
  box-shadow: 4px 4px 0 rgba(26, 34, 56, 0.18);
}

/* ============================================================
 * TECH — digital / neon
 * ============================================================ */
:root[data-ambiance="matrix"] .tx-card {
  background: rgba(5, 33, 5, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(0, 255, 65, 0.32);
  box-shadow: 0 0 18px rgba(0, 255, 65, 0.22);
}
:root[data-ambiance="matrix"] .tx-btn {
  background: transparent;
  color: #00FF41;
  border: 1px solid #00FF41;
  text-shadow: 0 0 4px rgba(0, 255, 65, 0.6);
}
:root[data-ambiance="matrix"] .tx-input,
:root[data-ambiance="matrix"] .tx-textarea,
:root[data-ambiance="matrix"] .tx-select {
  font-family: var(--tx-fonts-mono);
  background: rgba(5, 33, 5, 0.35);
}

:root[data-ambiance="tron"] .tx-btn {
  background: transparent;
  color: var(--tx-colors-accent);
  border: 1px solid var(--tx-colors-accent);
  box-shadow: 0 0 14px rgba(0, 217, 255, 0.6), inset 0 0 14px rgba(0, 217, 255, 0.18);
}
:root[data-ambiance="tron"] .tx-btn:hover {
  background: rgba(0, 217, 255, 0.14);
  box-shadow: 0 0 28px rgba(0, 217, 255, 0.85), inset 0 0 28px rgba(0, 217, 255, 0.28);
}
:root[data-ambiance="tron"] .tx-card { border-color: rgba(0, 217, 255, 0.35); }

:root[data-ambiance="synthwave"] .tx-btn {
  background: linear-gradient(135deg, #FF006E, #7B2CF0);
  border: none;
  box-shadow: 0 0 20px rgba(255, 0, 110, 0.55);
}
:root[data-ambiance="synthwave"] .tx-card {
  background: linear-gradient(180deg, rgba(40, 10, 75, 0.75), rgba(60, 20, 100, 0.55));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

:root[data-ambiance="hologram"] .tx-btn {
  background: linear-gradient(135deg, #40E0D0, #7FFFD4);
  color: #020208;
  box-shadow: 0 0 20px rgba(64, 224, 208, 0.55), 2px 0 rgba(255, 0, 128, 0.30), -2px 0 rgba(0, 255, 255, 0.30);
}
:root[data-ambiance="hologram"] .tx-card {
  background: rgba(30, 40, 80, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(64, 224, 208, 0.32);
}

:root[data-ambiance="circuit-board"] .tx-card {
  background-image:
    linear-gradient(90deg, rgba(255, 215, 0, 0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 215, 0, 0.04) 1px, transparent 1px),
    linear-gradient(180deg, #0A4D27 0%, #073B1D 100%);
  background-size: 24px 24px, 24px 24px, auto;
}

/* ============================================================
 * LUXE — refined materials
 * ============================================================ */
:root[data-ambiance="gold-leaf"] .tx-btn {
  background: linear-gradient(180deg, #F4D35E 0%, #D4AF37 100%);
  color: #1A1410;
  border: 1px solid #B8860B;
  box-shadow: inset 0 1px 0 rgba(255, 240, 180, 0.5), 0 4px 14px rgba(212, 175, 55, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
:root[data-ambiance="gold-leaf"] .tx-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #D4AF37, transparent);
}
:root[data-ambiance="gold-leaf"] .tx-card { position: relative; overflow: hidden; }

:root[data-ambiance="marble"] .tx-card {
  background-image: linear-gradient(135deg, #FFFFFF, #F5F3EE);
  border: 1px solid rgba(26, 26, 26, 0.10);
}

:root[data-ambiance="leather"] .tx-card {
  background: linear-gradient(180deg, #5F3F30 0%, #4D3226 100%);
  box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.15), 0 12px 30px rgba(0, 0, 0, 0.4);
}

:root[data-ambiance="silk"] .tx-card { border-radius: 48px; }
:root[data-ambiance="silk"] .tx-btn { border-radius: 999px; }

:root[data-ambiance="carbon-fiber"] .tx-card {
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.02) 75%, transparent 75%),
    linear-gradient(180deg, #161616 0%, #0D0D0D 100%);
  background-size: 6px 6px, auto;
}

:root[data-ambiance="velvet"] .tx-card {
  background: linear-gradient(180deg, #3E1028 0%, #2B0A1E 100%);
  box-shadow: inset 0 1px 0 rgba(201, 160, 75, 0.14), 0 24px 60px rgba(0, 0, 0, 0.6);
}

:root[data-ambiance="brushed-titanium"] .tx-card {
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #34373A 0%, #292B2D 100%);
}

:root[data-ambiance="pearl"] .tx-card {
  background: linear-gradient(135deg, rgba(185, 156, 216, 0.06), rgba(157, 204, 224, 0.04), rgba(255, 252, 248, 0.9));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

:root[data-ambiance="mahogany-library"] .tx-card {
  background: linear-gradient(180deg, #4F3020 0%, #3D2518 100%);
}

/* ============================================================
 * SUISSE — Helvetic precision
 * ============================================================ */
:root[data-ambiance="zurich-minimal"] .tx-card,
:root[data-ambiance="zurich-minimal"] .tx-btn,
:root[data-ambiance="zurich-minimal"] .tx-input,
:root[data-ambiance="zurich-minimal"] .tx-textarea {
  border-radius: 0;
}

:root[data-ambiance="sbb-railway"] .tx-btn {
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
:root[data-ambiance="sbb-railway"] .tx-card {
  border-width: 2px;
}

:root[data-ambiance="swiss-banking"] .tx-card {
  background: linear-gradient(180deg, #1B3530 0%, #132923 100%);
  box-shadow: inset 0 1px 0 rgba(183, 155, 87, 0.08), 0 12px 36px rgba(0, 0, 0, 0.6);
}

:root[data-ambiance="bern-medieval"] .tx-card,
:root[data-ambiance="bern-medieval"] .tx-btn {
  border-radius: 2px;
}

/* ============================================================
 * POP HEROES / DRAMA / ANIME — family-level
 * ============================================================ */
:root[data-ambiance="gotham-noctambule"] .tx-btn {
  background: linear-gradient(180deg, #1B1B24 0%, #07070C 100%);
  border: 1px solid rgba(245, 213, 71, 0.35);
  color: #F5D547;
}
:root[data-ambiance="gotham-noctambule"] .tx-card {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(245, 213, 71, 0.04);
}

:root[data-ambiance="arachnide-urbain"] .tx-card {
  background: linear-gradient(135deg, rgba(229, 57, 53, 0.06), rgba(25, 118, 210, 0.04));
  border: 1px solid rgba(229, 57, 53, 0.26);
}

:root[data-ambiance="armure-ecarlate"] .tx-btn {
  background: linear-gradient(180deg, #FFC72C 0%, #E02020 100%);
  border: none;
  color: #0E0A08;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 18px rgba(255, 199, 44, 0.40);
}

:root[data-ambiance="dragon-royal"] .tx-btn {
  background: linear-gradient(180deg, #D4AF37 0%, #8B6534 100%);
  color: #1A0A08;
  border: none;
  letter-spacing: 0.14em;
}

:root[data-ambiance="chimie-desertique"] .tx-card {
  background-image:
    repeating-linear-gradient(45deg, rgba(74, 182, 217, 0.04) 0 8px, transparent 8px 16px),
    linear-gradient(180deg, #E8DEC6 0%, #D7CAB0 100%);
}
:root[data-ambiance="chimie-desertique"] .tx-btn { font-family: var(--tx-fonts-mono); }

:root[data-ambiance="braquage-rouge"] .tx-btn {
  background: #D6001C;
  color: #FFE4C4;
  letter-spacing: 0.16em;
}

:root[data-ambiance="competition-rose"] .tx-btn {
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: #FF5090;
  color: #1A0B19;
}

:root[data-ambiance="bureau-gris"] .tx-card,
:root[data-ambiance="bureau-gris"] .tx-btn {
  border-radius: 2px;
}

:root[data-ambiance="cafe-new-yorkais"] .tx-btn,
:root[data-ambiance="cafe-new-yorkais"] .tx-card {
  border-radius: 32px;
}

:root[data-ambiance="super-combattant"] .tx-btn {
  background: linear-gradient(180deg, #FFD64D 0%, #FF6B00 100%);
  color: #07182B;
  border: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  letter-spacing: 0.06em;
}

:root[data-ambiance="village-cache"] .tx-btn {
  border-radius: 999px;
  background: linear-gradient(180deg, #FF9A2E 0%, #FF7A00 100%);
  color: #1A1007;
}

:root[data-ambiance="sorcier-maudit"] .tx-btn {
  background: linear-gradient(180deg, #8B5CF6 0%, #5B21B6 100%);
  box-shadow: 0 0 24px rgba(139, 92, 246, 0.55);
}

:root[data-ambiance="aventure-bizarre"] .tx-btn {
  background: linear-gradient(135deg, #FFD23F, #E83E8C);
  color: #1A0A22;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
  letter-spacing: 0.1em;
}

:root[data-ambiance="rose-dreamhouse"] .tx-btn,
:root[data-ambiance="rose-dreamhouse"] .tx-card {
  border-radius: 32px;
}
:root[data-ambiance="rose-dreamhouse"] .tx-btn {
  background: linear-gradient(135deg, #FF8AD4, #E8308E);
  box-shadow: 0 8px 20px rgba(232, 48, 142, 0.35);
}

:root[data-ambiance="geek-laboratoire"] .tx-btn,
:root[data-ambiance="geek-laboratoire"] .tx-card {
  border: 3px solid #2A2625;
  box-shadow: 4px 4px 0 rgba(42, 38, 37, 0.12);
  border-radius: 16px;
}

/* ============================================================
 * BATCH L — Anime additions
 * ============================================================ */
:root[data-ambiance="poing-unique"] .tx-btn,
:root[data-ambiance="poing-unique"] .tx-card {
  border: 3px solid #2C1E10;
  box-shadow: 6px 6px 0 #2C1E10;
}
:root[data-ambiance="poing-unique"] .tx-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 10px 10px 0 #2C1E10;
}

:root[data-ambiance="psychique-100"] .tx-btn {
  background: linear-gradient(180deg, #D946EF 0%, #A21CAF 100%);
  box-shadow: 0 0 26px rgba(217, 70, 239, 0.55);
  letter-spacing: 0.12em;
}

:root[data-ambiance="commandement-ecarlate"] .tx-btn {
  background: linear-gradient(180deg, #D4AF37 0%, #9A1F68 100%);
  color: #F5E8FF;
  border: none;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

:root[data-ambiance="guilde-magique"] .tx-btn {
  background: linear-gradient(180deg, #E04820 0%, #C78A2D 100%);
  border: none;
  color: #FFE4B0;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

:root[data-ambiance="cage-bleue"] .tx-btn {
  background: #00B0FF;
  color: #05101F;
  border: none;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  box-shadow: 0 0 24px rgba(0, 176, 255, 0.55);
}
:root[data-ambiance="cage-bleue"] .tx-card {
  background-image:
    repeating-linear-gradient(90deg, rgba(0, 176, 255, 0.03) 0 12px, transparent 12px 24px),
    linear-gradient(180deg, #0C1C33 0%, #05101F 100%);
}

:root[data-ambiance="volleyball-lycee"] .tx-btn,
:root[data-ambiance="volleyball-lycee"] .tx-card {
  border: 3px solid #1A0F05;
  box-shadow: 4px 4px 0 #1A0F05;
}

:root[data-ambiance="assassin-nocturne"] .tx-btn {
  background: linear-gradient(180deg, #B8001C 0%, #5A0010 100%);
  color: #EFE3E8;
  border: 1px solid rgba(184, 0, 28, 0.55);
  letter-spacing: 0.14em;
}

:root[data-ambiance="motard-passe"] .tx-card {
  background: linear-gradient(180deg, #141418 0%, #0A0A0C 100%);
  border: 2px solid rgba(224, 195, 74, 0.30);
}
:root[data-ambiance="motard-passe"] .tx-btn {
  background: transparent;
  color: #E0C34A;
  border: 2px solid #E0C34A;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

:root[data-ambiance="tronconneuse-ecarlate"] .tx-btn {
  background: linear-gradient(180deg, #E63946 0%, #8C2020 100%);
  color: #F8DCD2;
  border: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 0 26px rgba(230, 57, 70, 0.55);
}

:root[data-ambiance="retour-mort"] .tx-card {
  background: linear-gradient(180deg, #241B38 0%, #181326 100%);
  border: 1px solid rgba(126, 163, 255, 0.26);
}
:root[data-ambiance="retour-mort"] .tx-btn {
  background: linear-gradient(180deg, #7EA3FF 0%, #A678F0 100%);
  color: #0E0B18;
  border: none;
}

:root[data-ambiance="samourai-decale"] .tx-card,
:root[data-ambiance="samourai-decale"] .tx-btn {
  border-radius: 2px;
}

:root[data-ambiance="chasseur-elite"] .tx-btn,
:root[data-ambiance="chasseur-elite"] .tx-card {
  border: 3px solid #1C2A14;
  box-shadow: 3px 3px 0 rgba(28, 42, 20, 0.12);
  border-radius: 20px;
}

/**
 * INTEGRA — Aurora-Glass material (vNext cockpit look, Phase 1).
 * Lives under design-system/tokens/ → exempt from the design:token-authority guard.
 * RAW values (colors, gradients, shadows, radii) are allowed HERE ONLY; vNext
 * components consume the .ag-* classes / var(--ag-*) tokens and NEVER inline raw values.
 *
 * Governance (mirrors the lumina family, cf. vnext-launcher.css §4155+):
 *   - Everything derives from the GENERATOR tokens already emitted per theme
 *     (--vnl-accent, --vnl-navbar, --vnl-navd, --vnl-gen-*) via color-mix() →
 *     the material auto-recolours with the 100+ theme catalogue + Theme Studio,
 *     with a paired [data-vnl-theme="light"] counterpart. ZERO hardcoded palette.
 *   - The neutral rgba(255,255,255,…) values are GLASS EDGES/HIGHLIGHTS (light rim,
 *     specular), not brand colour — the physical material of the glass.
 *   - Scoped to .vnl-shell[data-vnl-material="aurora-glass"] so the default cockpit
 *     is untouched unless the mode is active (governed, reversible toggle).
 *   - Card glass: the .vnl-card gradient + its no-backdrop-filter cage
 *     (vnext-launcher.css:425-434) is DELIBERATE (legibility) and left intact;
 *     glass-icons here use NO backdrop-filter, so they are cage-proof.
 */

/* ============================================================================
   1. Aurora-Glass token block — scoped to the shell, 100% derived (auto-themes)
   ============================================================================ */
.vnl-shell{
  /* glass edges / specular — physical material, theme-independent */
  --ag-edge:linear-gradient(150deg,rgba(255,255,255,.42),rgba(255,255,255,.06) 44%,rgba(255,255,255,.02) 72%,rgba(255,255,255,.16));
  --ag-edge-soft:linear-gradient(150deg,rgba(255,255,255,.30),rgba(255,255,255,.04) 55%,rgba(255,255,255,.10));
  --ag-rim:inset 0 1px 0 rgba(255,255,255,.16);
  --ag-blur:22px;
  /* glass fills — derived from the per-theme generator surfaces (already semi-transparent) */
  --ag-fill:linear-gradient(180deg,color-mix(in srgb,var(--vnl-navbar) 88%,transparent),color-mix(in srgb,var(--vnl-navd) 62%,transparent));
  --ag-fill-soft:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  --ag-shadow:0 22px 46px -30px rgba(0,0,0,.8),0 8px 22px -16px rgba(0,0,0,.55);
  /* glass-icon core — two related tints derived from the surrounding module accent */
  --ag-core-1:var(--vnl-accent,var(--vnl-accent-hr));
  --ag-core-2:color-mix(in srgb,var(--vnl-accent,var(--vnl-accent-hr)) 60%,#ffffff);
  --ag-icon-size:44px;
  --ag-icon-radius:13px;
  /* composite-component tokens (MR-B) */
  --ag-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ag-solid:color-mix(in srgb,#ffffff 5%,var(--vnl-navd));      /* opaque raised tile — legal figures land here */
  --ag-solid-2:color-mix(in srgb,#ffffff 10%,var(--vnl-navd));
  --ag-line:rgba(255,255,255,.08);
  --ag-line-2:rgba(255,255,255,.16);
  --ag-mut:color-mix(in srgb,currentColor 60%,transparent);      /* muted text, adapts to the shell ink */
}
/* Light-mode: white rim/specular is too strong on a light canvas → soften + add a
   faint dark lower rim so the glass edge still reads. Fills follow the light navbar. */
.vnl-shell[data-vnl-theme="light"]{
  --ag-daylight-surface:#ffffff;
  --ag-daylight-surface-2:color-mix(in srgb,#0f1838 2%,var(--vnl-gen-surface-light,#f7f9ff));
  --ag-daylight-control:color-mix(in srgb,#0f1838 6%,var(--vnl-gen-surface-light,#f7f9ff));
  --ag-daylight-control-2:color-mix(in srgb,#0f1838 10%,var(--vnl-gen-surface-light,#f7f9ff));
  --ag-edge:linear-gradient(150deg,rgba(255,255,255,.7),rgba(15,24,56,.06) 46%,rgba(15,24,56,.02) 72%,rgba(15,24,56,.08));
  --ag-edge-soft:linear-gradient(150deg,rgba(255,255,255,.6),rgba(15,24,56,.05) 55%,rgba(15,24,56,.04));
  --ag-rim:inset 0 1px 0 rgba(255,255,255,.6);
  --ag-fill:linear-gradient(180deg,var(--ag-daylight-surface),var(--ag-daylight-surface-2));
  --ag-fill-soft:linear-gradient(180deg,var(--ag-daylight-control),var(--ag-daylight-control-2));
  --ag-shadow:0 22px 46px -30px rgba(20,20,60,.35),0 8px 22px -16px rgba(20,20,60,.22);
  /* light: solid tiles ride the light generator anchor (navd may stay dark) + dark hairlines */
  --ag-solid:var(--ag-daylight-surface);
  --ag-solid-2:var(--ag-daylight-surface-2);
  --ag-line:rgba(15,24,56,.09);
  --ag-line-2:rgba(15,24,56,.18);
  --ag-mut:color-mix(in srgb,currentColor 55%,transparent);
}
.vnl-shell[data-vnl-theme="light"][data-vnl-contrast="high"]{
  --ag-line:rgba(15,24,56,.18);
  --ag-line-2:rgba(15,24,56,.30);
}

/* ============================================================================
   2. Reusable material primitives (go-forward vNext surfaces consume these)
   ============================================================================ */
/* Frosted glass panel with a gradient border (padding-box fill / border-box edge). */
.ag-glass{
  position:relative;border:1px solid transparent;border-radius:var(--vnl-radius);
  background:var(--ag-fill) padding-box, var(--ag-edge) border-box;
  backdrop-filter:blur(var(--ag-blur)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--ag-blur)) saturate(180%);
  box-shadow:var(--ag-rim),var(--ag-shadow);
}

/* Glass icon — frosted frame + accent-derived luminous core + specular gloss.
   NO backdrop-filter → safe inside the .vnl-card no-backdrop cage. */
.ag-icon{
  position:relative;isolation:isolate;flex:none;
  width:var(--ag-icon-size);height:var(--ag-icon-size);border-radius:var(--ag-icon-radius);
  display:grid;place-items:center;border:1px solid transparent;color:#fff;
  background:var(--ag-fill-soft) padding-box, linear-gradient(155deg,rgba(255,255,255,.6),rgba(255,255,255,.08) 55%,rgba(255,255,255,.22)) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 16px -6px color-mix(in srgb,var(--ag-core-1) 62%,transparent);
  transition:transform .2s var(--vnl-ease),box-shadow .22s var(--vnl-ease);
}
.ag-icon::before{content:"";position:absolute;inset:3px;border-radius:inherit;z-index:0;
  background:radial-gradient(126% 126% at 32% 24%,var(--ag-core-1),var(--ag-core-2));filter:blur(.5px)}
.ag-icon::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.52),transparent 44%)}
.ag-icon > *{position:relative;z-index:3;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45))}
.ag-icon > svg{width:calc(var(--ag-icon-size) * .5);height:calc(var(--ag-icon-size) * .5)}

/* Glass buttons / chips (for panels, drawers, Luna surfaces) */
.ag-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  border:0;font:inherit;font-weight:800;font-size:13.5px;padding:11px 16px;border-radius:12px;color:#fff;
  position:relative;overflow:hidden;
  background:linear-gradient(120deg,var(--vnl-accent-hr),color-mix(in srgb,var(--vnl-accent-hr) 55%,#ffffff));
  background:linear-gradient(120deg,var(--vnl-accent,var(--vnl-accent-hr)),color-mix(in srgb,var(--vnl-accent,var(--vnl-accent-hr)) 55%,#ffffff));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 14px 28px -14px color-mix(in srgb,var(--vnl-accent-hr) 82%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 14px 28px -14px color-mix(in srgb,var(--vnl-accent,var(--vnl-accent-hr)) 82%,transparent);
  transition:transform .18s var(--vnl-ease),box-shadow .2s,filter .2s}
.ag-btn::before{content:"";position:absolute;left:0;right:0;top:0;height:50%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.24),transparent)}
.ag-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.ag-btn:active{transform:translateY(0) scale(.98)}
.ag-btn:disabled{cursor:not-allowed;opacity:.55;filter:saturate(.78);transform:none;box-shadow:none}
.ag-btn:disabled:hover{transform:none;filter:saturate(.78)}
.ag-btn.ag-ghost{color:inherit;background:var(--ag-fill-soft) padding-box, var(--ag-edge-soft) border-box;border:1px solid transparent;box-shadow:none}
.ag-btn.ag-ghost::before{display:none}
.ag-btn.ag-ghost:hover{filter:brightness(1.25)}
.ag-chip{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-weight:700;font-size:12.5px;
  padding:8px 13px;border-radius:var(--vnl-pill);border:1px solid transparent;color:inherit;
  background:var(--ag-fill-soft) padding-box, var(--ag-edge-soft) border-box;
  transition:transform .15s var(--vnl-ease),filter .16s}
.ag-chip:hover{transform:translateY(-1px);filter:brightness(1.2)}
/* Selected/active chip — the accent fill mirrors the segmented control's is-on state so
   toggle chips (filters, type pickers) carry a visible selected state, not just hover. */
.ag-chip.is-on{color:#fff;border-color:transparent;
  background:linear-gradient(120deg,var(--vnl-accent-hr),var(--ag-core-2)) padding-box,var(--ag-edge-soft) border-box;
  background:linear-gradient(120deg,var(--vnl-accent,var(--vnl-accent-hr)),var(--ag-core-2)) padding-box,var(--ag-edge-soft) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.vnl-shell[data-vnl-theme="light"] .ag-chip.is-on{color:#fff}

/* ============================================================================
   2b. Composite components (MR-B) — focused panels, legal tables, timeline,
       charts, steps, tiles, tabs, segmented controls, slot-fill fields, notes.
       All derive from --vnl-* / --ag-* + color-mix (auto-theme, light-paired).
       Legal figures always land on a SOLID surface (--ag-solid) in tabular-nums.
   ============================================================================ */
/* Focused panel (dock) : header + body */
.ag-panel{border-radius:var(--vnl-radius);overflow:hidden;border:1px solid transparent;
  background:var(--ag-fill) padding-box,var(--ag-edge) border-box;
  backdrop-filter:blur(var(--ag-blur)) saturate(160%);-webkit-backdrop-filter:blur(var(--ag-blur)) saturate(160%);
  box-shadow:var(--ag-rim),var(--ag-shadow)}
.ag-panel__head{display:flex;align-items:center;gap:11px;padding:12px 13px;border-bottom:1px solid var(--ag-line)}
.ag-panel__title{flex:1 1;min-width:0;font-size:14px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-panel__sub{font-size:11px;color:var(--ag-mut);font-weight:600;margin-top:1px}
.ag-panel__body{padding:14px}
.ag-panel__x{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;cursor:pointer;color:var(--ag-mut);border:0;background:none;transition:color .15s,background .15s}
.ag-panel__x:hover{color:inherit;background:var(--ag-line)}

/* KPI / stat tiles — solid surface for legal figures */
.ag-kpis{display:grid;grid-template-columns:1fr 1fr;grid-gap:10px;gap:10px}
.ag-kpi,.ag-stat{padding:12px;border-radius:12px;border:1px solid var(--ag-line);background:var(--ag-solid)}
.ag-stat{display:inline-block;padding:9px 13px}
.ag-kpi__v,.ag-stat__v{font-family:var(--ag-mono);font-weight:850;font-size:18px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.ag-stat__v{font-size:16px}
.ag-kpi__l,.ag-stat__l{font-size:10px;color:var(--ag-mut);font-weight:700;margin-top:2px;letter-spacing:.05em;text-transform:uppercase}

/* Legal table — tabular-nums on a solid ground */
.ag-solid{background:var(--ag-solid);border:1px solid var(--ag-line)}
.ag-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 10px;flex-wrap:wrap}
.ag-table-wrap{overflow-x:auto;border-radius:12px}
.ag-table{width:100%;border-collapse:collapse;font-size:12.5px}
.ag-table th{text-align:left;font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ag-mut);padding:0 10px 9px;border-bottom:1px solid var(--ag-line)}
.ag-table td{padding:9px 10px;border-bottom:1px solid var(--ag-line);font-weight:600}
.ag-table tr:last-child td{border-bottom:0}
.ag-table .ag-num{font-family:var(--ag-mono);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;font-weight:750}
.ag-table .ag-neg{color:var(--vnl-sev-block)}
.ag-table tr.ag-tot td{border-top:1px solid var(--ag-line-2);font-weight:850}
.ag-table-meta{margin-top:3px;color:var(--ag-mut);font-size:10.5px;font-weight:700}
.ag-row-action{border:0;background:none;color:inherit;font:inherit;font-weight:800;padding:0;cursor:pointer;text-align:left}
.ag-row-action:hover{text-decoration:underline;text-decoration-color:var(--vnl-accent-hr);text-decoration-color:var(--vnl-accent,var(--vnl-accent-hr));text-underline-offset:3px}
.ag-actions{display:flex;align-items:center;gap:6px}
.ag-detail-row td{background:color-mix(in srgb,var(--ag-solid-2) 76%,transparent)}
.ag-actions-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap}
.ag-actions-footer .ag-note{flex:1 1;min-width:220px}

/* Net box — highlight a legal total */
.ag-net{margin-top:12px;padding:15px;border-radius:12px;border:1px solid transparent;display:flex;align-items:baseline;justify-content:space-between;
  background:linear-gradient(135deg,color-mix(in srgb,var(--vnl-accent-hr) 22%,var(--ag-solid)),var(--ag-solid)) padding-box,var(--ag-edge) border-box;
  background:linear-gradient(135deg,color-mix(in srgb,var(--vnl-accent,var(--vnl-accent-hr)) 22%,var(--ag-solid)),var(--ag-solid)) padding-box,var(--ag-edge) border-box;box-shadow:var(--ag-rim)}
.ag-net__l{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ag-mut);font-weight:800}
.ag-net__v{font-family:var(--ag-mono);font-weight:850;font-size:23px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;letter-spacing:-.5px}

/* Effective-dated timeline (person ↔ contract) */
.ag-timeline{display:flex;flex-direction:column;padding-left:4px}
.ag-tl{display:flex;gap:13px;padding:4px 0 16px;position:relative}
.ag-tl::before{content:"";position:absolute;left:5px;top:18px;bottom:-2px;width:2px;background:var(--ag-line-2)}
.ag-tl:last-child::before{display:none}
.ag-tl__dot{width:12px;height:12px;border-radius:50%;flex:none;margin-top:4px;background:linear-gradient(135deg,var(--vnl-accent-hr),var(--ag-core-2));background:linear-gradient(135deg,var(--vnl-accent,var(--vnl-accent-hr)),var(--ag-core-2));box-shadow:0 0 10px -1px color-mix(in srgb,var(--vnl-accent-hr) 60%,transparent),0 0 0 3px color-mix(in srgb,var(--vnl-accent-hr) 18%,transparent);box-shadow:0 0 10px -1px color-mix(in srgb,var(--vnl-accent,var(--vnl-accent-hr)) 60%,transparent),0 0 0 3px color-mix(in srgb,var(--vnl-accent,var(--vnl-accent-hr)) 18%,transparent)}
.ag-tl.is-past .ag-tl__dot{background:var(--ag-mut);box-shadow:none}
.ag-tl__t{font-size:13.5px;font-weight:750}
.ag-tl__d{font-size:11.5px;color:var(--ag-mut);margin-top:2px}

/* Steps / stepper */
.ag-steps{display:flex;flex-direction:column}
.ag-step{display:flex;align-items:center;gap:10px;padding:8px 2px;font-size:12.5px;font-weight:650;color:var(--ag-mut)}
.ag-step__tick{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--vnl-sev-ok) 20%,transparent);color:var(--vnl-sev-ok);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--vnl-sev-ok) 35%,transparent)}
.ag-step.is-todo .ag-step__tick{background:var(--ag-line);color:var(--ag-mut);box-shadow:inset 0 0 0 1px var(--ag-line-2)}
.ag-step__v{margin-left:auto;font-family:var(--ag-mono);font-size:11.5px;color:inherit;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
/* horizontal segmented status (banking) */
.ag-segsteps{display:flex;gap:6px}
.ag-segstep{flex:1 1;text-align:center;padding:9px 6px;border-radius:11px;font-size:11px;font-weight:800;border:1px solid var(--ag-line);background:var(--ag-solid);color:var(--ag-mut)}
.ag-segstep.is-done{color:var(--vnl-sev-ok);background:color-mix(in srgb,var(--vnl-sev-ok) 14%,transparent);border-color:color-mix(in srgb,var(--vnl-sev-ok) 32%,transparent)}
.ag-segstep.is-now{color:inherit;border-color:var(--vnl-accent-hr);border-color:var(--vnl-accent,var(--vnl-accent-hr))}

/* Mini bar chart */
.ag-chart{padding:12px 13px 9px;border-radius:12px;border:1px solid var(--ag-line);background:var(--ag-solid)}
.ag-chart__bars{display:flex;align-items:flex-end;gap:9px;height:100px}
.ag-chart__bar{flex:1 1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:5px;min-width:0}
.ag-chart__b{width:64%;height:50%;height:var(--h,50%);border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,color-mix(in srgb,var(--vnl-accent-hr) 55%,var(--ag-core-2)),var(--vnl-accent-hr));background:linear-gradient(180deg,color-mix(in srgb,var(--vnl-accent,var(--vnl-accent-hr)) 55%,var(--ag-core-2)),var(--vnl-accent,var(--vnl-accent-hr)));box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.ag-chart__bar.is-now .ag-chart__b{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 16px -4px var(--vnl-accent-hr);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 16px -4px var(--vnl-accent,var(--vnl-accent-hr))}
.ag-chart__l{font-size:10px;font-weight:700;color:var(--ag-mut)}
.ag-chart__v{font-family:var(--ag-mono);font-size:9px;color:var(--ag-mut);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;white-space:nowrap}

/* Horizontal bar list */
.ag-barlist{display:flex;flex-direction:column;gap:9px}
.ag-bar{display:flex;align-items:center;gap:11px;font-size:12.5px}
.ag-bar__l{width:104px;flex:none;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-bar__track{flex:1 1;height:9px;border-radius:6px;background:var(--ag-line);overflow:hidden}
.ag-bar__fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--vnl-accent-hr),var(--ag-core-2));background:linear-gradient(90deg,var(--vnl-accent,var(--vnl-accent-hr)),var(--ag-core-2));box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.ag-bar__v{width:40px;text-align:right;font-family:var(--ag-mono);font-weight:750;font-size:11.5px;flex:none;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}

/* Tabs */
.ag-tabs{display:flex;gap:2px;border-bottom:1px solid var(--ag-line);margin-bottom:14px}
.ag-tab{border:0;background:none;color:var(--ag-mut);font:inherit;font-weight:750;font-size:13px;padding:9px 12px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s}
.ag-tab:hover{color:inherit}
.ag-tab.is-on{color:inherit;border-bottom-color:var(--vnl-accent-hr);border-bottom-color:var(--vnl-accent,var(--vnl-accent-hr))}

/* Segmented control (settings) */
.ag-seg{display:inline-flex;background:var(--ag-solid);border:1px solid var(--ag-line);border-radius:11px;padding:3px;gap:2px;flex:none}
.ag-seg button{border:0;background:none;color:var(--ag-mut);font:inherit;font-weight:750;font-size:12.5px;padding:7px 13px;border-radius:8px;cursor:pointer;transition:color .15s}
.ag-seg button:hover{color:inherit}
.ag-seg button.is-on{background:linear-gradient(120deg,var(--vnl-accent-hr),var(--ag-core-2));background:linear-gradient(120deg,var(--vnl-accent,var(--vnl-accent-hr)),var(--ag-core-2));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}

/* Slot-fill form field + Luna tag */
.ag-field{margin-bottom:11px}
.ag-field__label{font-size:10.5px;font-weight:750;color:var(--ag-mut);display:block;margin-bottom:5px;letter-spacing:.04em;text-transform:uppercase}
.ag-field__inp{padding:11px 13px;border-radius:11px;border:1px solid var(--ag-line);background:var(--ag-solid);font-size:13.5px;font-weight:650;display:flex;align-items:center;justify-content:space-between;gap:8px}
.ag-field.is-filled .ag-field__inp{border-color:color-mix(in srgb,var(--vnl-accent-hr) 55%,transparent);border-color:color-mix(in srgb,var(--vnl-accent,var(--vnl-accent-hr)) 55%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--vnl-accent-hr) 26%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--vnl-accent,var(--vnl-accent-hr)) 26%,transparent)}
.ag-tag{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:850;letter-spacing:.06em;color:var(--vnl-accent-hr);color:var(--vnl-accent,var(--vnl-accent-hr));background:color-mix(in srgb,var(--vnl-accent-hr) 14%,transparent);background:color-mix(in srgb,var(--vnl-accent,var(--vnl-accent-hr)) 14%,transparent);padding:3px 8px;border-radius:var(--vnl-pill)}

/* Info / DEV-mock note + status pills (honest surfaces) */
.ag-note{padding:11px 13px;border-radius:11px;font-size:12px;font-weight:600;line-height:1.45;display:flex;align-items:center;gap:9px;
  color:var(--vnl-sev-warn);background:color-mix(in srgb,var(--vnl-sev-warn) 12%,transparent);border:1px solid color-mix(in srgb,var(--vnl-sev-warn) 30%,transparent)}
.ag-note.ag-note--muted{color:var(--ag-mut);background:var(--ag-solid);border-color:var(--ag-line)}
.ag-status-ok,.ag-status-warn{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:11px}
.ag-status-ok{color:var(--vnl-sev-ok)}
.ag-status-warn{color:var(--vnl-sev-warn)}
.ag-status-ok svg,.ag-status-warn svg{width:13px;height:13px;flex:none}

/* Daylight is intentionally opaque: white translucent glass turns into haze on a
   light canvas, so panels and controls use crisp surfaces and no backdrop blur. */
.vnl-shell[data-vnl-theme="light"] .ag-glass,
.vnl-shell[data-vnl-theme="light"] .ag-panel{
  background:var(--ag-fill) padding-box,var(--ag-edge) border-box;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.vnl-shell[data-vnl-theme="light"] .ag-chip,
.vnl-shell[data-vnl-theme="light"] .ag-btn.ag-ghost,
.vnl-shell[data-vnl-theme="light"] .ag-seg,
.vnl-shell[data-vnl-theme="light"] .ag-segstep,
.vnl-shell[data-vnl-theme="light"] .ag-field__inp{
  background:var(--ag-fill-soft) padding-box,var(--ag-edge-soft) border-box;
  border-color:var(--ag-line);
}
.vnl-shell[data-vnl-theme="light"] .ag-step.is-todo .ag-step__tick{
  background:var(--ag-daylight-control);
  box-shadow:inset 0 0 0 1px var(--ag-line-2);
}
.vnl-shell[data-vnl-theme="light"] .ag-segstep.is-done{
  background:color-mix(in srgb,var(--vnl-sev-ok) 12%,var(--ag-daylight-surface));
  border-color:color-mix(in srgb,var(--vnl-sev-ok) 32%,var(--ag-daylight-surface));
}

/* ============================================================================
   3. Cockpit adoption — scoped to the opt-in material mode (default look intact
      unless data-vnl-material="aurora-glass" is present on the shell).
   ============================================================================ */
/* 3a. Module-card + leaf icons become premium glass-icons (cage-proof, no blur).
       The core tint follows the card's own --vnl-accent → every module its hue. */
.vnl-shell[data-vnl-material="aurora-glass"] .vnl-ic{
  position:relative;isolation:isolate;
  width:var(--ag-icon-size);height:var(--ag-icon-size);border-radius:var(--ag-icon-radius);
  display:grid;place-items:center;border:1px solid transparent;
  background:var(--ag-fill-soft) padding-box, linear-gradient(155deg,rgba(255,255,255,.6),rgba(255,255,255,.08) 55%,rgba(255,255,255,.22)) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 16px -6px color-mix(in srgb,var(--ag-core-1) 62%,transparent);
  filter:none;
}
.vnl-shell[data-vnl-material="aurora-glass"] .vnl-ic::before{content:"";position:absolute;inset:3px;border-radius:inherit;z-index:0;
  background:radial-gradient(126% 126% at 32% 24%,var(--ag-core-1),var(--ag-core-2));filter:blur(.5px)}
.vnl-shell[data-vnl-material="aurora-glass"] .vnl-ic::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.52),transparent 44%)}
.vnl-shell[data-vnl-material="aurora-glass"] .vnl-ic svg{position:relative;z-index:3;width:22px;height:22px;
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45))}

/* 3b. Toolbar pill: keep its themed --vnl-navbar fill, upgrade to a gradient edge
       + rim highlight (auto light/dark via the token block above). */
.vnl-shell[data-vnl-material="aurora-glass"] .vnl-navbar{
  border:1px solid transparent;
  background:var(--vnl-navbar) padding-box, var(--ag-edge) border-box;
  box-shadow:var(--ag-rim),0 16px 36px -18px rgba(0,0,0,.6);
}

/* 3c. Search field + persona / language pills pick up the same glass edge. */
.vnl-shell[data-vnl-material="aurora-glass"] .vnl-field{
  border:1px solid transparent;
  background:var(--vnl-field) padding-box, var(--ag-edge-soft) border-box;
  box-shadow:var(--ag-rim);
}

/* 3d. Leaf header seal frame gets the same rim discipline (subtle, additive). */
.vnl-shell[data-vnl-material="aurora-glass"] .vnl-headseal{
  box-shadow:var(--ag-rim);
}

/* A11y — visible keyboard focus for every interactive Aurora control. `:focus-visible`
   so the ring shows for keyboard/AT users but never on a plain mouse click. The ring
   derives from the module accent + a 2px offset so it reads on both dark glass and the
   light canvas (governed token, never a raw colour). */
.ag-btn:focus-visible,
.ag-chip:focus-visible,
.ag-tab:focus-visible,
.ag-seg button:focus-visible,
.ag-row-action:focus-visible,
.ag-panel__x:focus-visible,
.ag-field__inp:focus-visible,
.ag-field input:focus-visible,
.ag-field select:focus-visible,
.ag-field textarea:focus-visible{
  outline:2px solid var(--vnl-accent-hr);
  outline:2px solid var(--vnl-accent,var(--vnl-accent-hr));
  outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  .ag-icon,.ag-btn,.ag-chip{transition:none}
}