/* iFutur / e-certSante component styles.
   This file is imported by Tailwind and uses @apply for the application
   component classes kept in the existing views. */

@theme {
  --color-ng-green-50: #E8F3E8;
  --color-ng-green-100: #CDE6CE;
  --color-ng-green-200: #9DCD9F;
  --color-ng-green-300: #5FAF62;
  --color-ng-green-400: #2E9233;
  --color-ng-green-500: #127914;
  --color-ng-green-600: #0E6510;
  --color-ng-green-700: #0A4F0C;
  --color-ng-green-800: #073908;
  --color-ng-orange-50: #FFF4E5;
  --color-ng-orange-100: #FFE4C2;
  --color-ng-orange-200: #FFCD8F;
  --color-ng-orange-300: #FFB152;
  --color-ng-orange-400: #FF9D27;
  --color-ng-orange-500: #FF8C00;
  --color-ng-orange-600: #E07700;
  --color-ng-orange-700: #B35E00;
  --color-ng-orange-800: #8A4700;
  --color-ng-teal-50: #E4F1EF;
  --color-ng-teal-500: #2D8C86;
  --color-ng-blue-50: #E5EFF9;
  --color-ng-blue-500: #2C6DB5;
  --color-ng-gold-50: #FAF1D8;
  --color-ng-gold-500: #BE8A1F;
  --color-ng-danger: #B23A24;
  --font-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

@layer base {
  :root {
    --ng-green-50: #E8F3E8;
    --ng-green-100: #CDE6CE;
    --ng-green-200: #9DCD9F;
    --ng-green-300: #5FAF62;
    --ng-green-400: #2E9233;
    --ng-green-500: #127914;
    --ng-green-600: #0E6510;
    --ng-green-700: #0A4F0C;
    --ng-green-800: #073908;
    --ng-green: var(--ng-green-500);
    --ng-orange-50: #FFF4E5;
    --ng-orange-100: #FFE4C2;
    --ng-orange-200: #FFCD8F;
    --ng-orange-300: #FFB152;
    --ng-orange-400: #FF9D27;
    --ng-orange-500: #FF8C00;
    --ng-orange-600: #E07700;
    --ng-orange-700: #B35E00;
    --ng-orange-800: #8A4700;
    --ng-orange: var(--ng-orange-500);
    --n-0: #FFFFFF;
    --n-25: #F7F8F8;
    --n-50: #F1F3F2;
    --n-100: #E7EAE8;
    --n-200: #D8DCD9;
    --n-300: #C0C6C2;
    --n-400: #949B97;
    --n-500: #6B726E;
    --n-600: #4D534F;
    --n-700: #343935;
    --n-800: #20231F;
    --n-900: #121613;
    --ink: #121613;
    --ink-2: #20231F;
    --ng-teal-500: #2D8C86;
    --ng-teal-50: #E4F1EF;
    --ng-blue-500: #2C6DB5;
    --ng-blue-50: #E5EFF9;
    --ng-gold-500: #BE8A1F;
    --ng-gold-50: #FAF1D8;
    --ok: var(--ng-green-600);
    --ok-bg: var(--ng-green-50);
    --ok-border: var(--ng-green-200);
    --pending: var(--ng-orange-600);
    --pending-bg: var(--ng-orange-50);
    --pending-border: var(--ng-orange-200);
    --danger: #B23A24;
    --danger-bg: #F8E7E1;
    --danger-border: #E8BCAD;
    --info-border: #BCD3EC;
    --fg-1: var(--n-900);
    --fg-2: var(--n-700);
    --fg-3: var(--n-500);
    --fg-4: var(--n-400);
    --fg-on-orange: var(--ink);
    --fg-on-green: #FFFFFF;
    --fg-on-dark: #EEF1EF;
    --bg-page: #FAFBFA;
    --bg-surface: var(--n-0);
    --bg-sunken: var(--n-50);
    --bg-inverse: var(--ink);
    --border-subtle: var(--n-100);
    --border-default: var(--n-200);
    --border-strong: var(--n-300);
    --radius-xs: 3px;
    --radius-sm: 6px;
    --radius-md: 9px;
    --radius-lg: 13px;
    --radius-xl: 18px;
    --radius-pill: 999px;
    --shadow-xs: 0 1px 1px rgba(18, 22, 19, 0.04);
    --shadow-sm: 0 1px 2px rgba(18, 22, 19, 0.06), 0 1px 1px rgba(18, 22, 19, 0.04);
    --shadow-md: 0 4px 12px rgba(18, 22, 19, 0.06), 0 1px 2px rgba(18, 22, 19, 0.04);
    --shadow-lg: 0 12px 28px rgba(18, 22, 19, 0.10), 0 2px 4px rgba(18, 22, 19, 0.04);
    --shadow-inset: inset 0 1px 2px rgba(18, 22, 19, 0.06);
    --shadow-focus: 0 0 0 3px rgba(18, 121, 20, 0.26);
    --font-mono: var(--font-sans);
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --num-tabular: "tnum" 1, "lnum" 1;
  }

  .ng,
  .ng * {
    @apply box-border;
  }

  .ng {
    @apply font-sans text-[15px] leading-[1.55] antialiased text-[var(--fg-2)];
    font-feature-settings: "pnum" 1, "lnum" 1;
    -moz-osx-font-smoothing: grayscale;
  }

  body.ng {
    @apply m-0 bg-[var(--bg-page)];
  }

  .ng h1,
  .ng h2,
  .ng h3,
  .ng h4 {
    @apply m-0 text-[var(--fg-1)];
  }
}

@utility tnum {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--num-tabular);
}

@utility mono {
  font-family: var(--font-mono);
}

@layer components {
  .ng .sr-only { @apply sr-only; }
  .ng .eyebrow { @apply text-[11px] uppercase tracking-[0.13em] font-bold text-[var(--fg-3)]; }

  .ng-app { @apply grid min-h-screen bg-[var(--bg-page)]; grid-template-columns: 248px 1fr; }
  .ng-side { @apply sticky top-0 flex h-screen flex-col border-r border-[var(--border-subtle)] bg-white p-0; }
  .ng-main { @apply flex min-w-0 flex-col; }
  .ng-brand { @apply box-border flex h-[60px] items-center gap-[11px] border-b border-[var(--border-subtle)] px-[18px] no-underline; }
  .ng-brand-logo { @apply inline-flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-[var(--border-default)] bg-white; }
  .ng-brand-logo-img { @apply block size-[30px] object-contain; }
  .ng-brand-logo .lucide { @apply size-[19px]; }
  .ng-brand-txt { @apply flex min-w-0 flex-col leading-[1.15]; }
  .ng-brand-app { @apply text-base font-extrabold tracking-normal text-[var(--fg-1)]; }
  .ng-brand-gov { @apply whitespace-nowrap text-[10.5px] font-semibold uppercase tracking-[0.08em] text-[var(--fg-3)]; }

  .ng-nav { @apply flex flex-1 flex-col gap-0.5 overflow-y-auto px-3 py-3; }
  .ng-nav-group { @apply px-2.5 pb-1.5 pt-3.5 text-[10.5px] font-bold uppercase tracking-[0.12em] text-[var(--fg-4)]; }
  .ng-nav-item { @apply flex cursor-pointer items-center gap-[11px] rounded-lg px-2.5 py-2 text-[13.5px] font-medium text-[var(--fg-2)] no-underline transition-colors duration-150 ease-out; }
  .ng-nav-item:hover { @apply bg-[var(--n-50)] text-[var(--fg-1)]; }
  .ng-nav-item.active { @apply rounded-[10px] bg-ng-green-500 font-bold text-white shadow-sm; }
  .ng-nav-item.active:hover { @apply bg-ng-green-600; }
  .ng-nav-item .lucide { @apply size-[17px] shrink-0 text-[var(--fg-4)]; }
  .ng-nav-item.active .lucide { @apply text-white; }
  .ng-nav-item .count { @apply ml-auto text-[11px] font-bold text-[var(--fg-4)] tabular-nums; }
  .ng-nav-item.active .count { @apply text-white/85; }
  .ng-nav-item .chev-x { @apply ml-auto size-[15px] text-[var(--fg-4)] transition-transform duration-150 ease-out; }
  .ng-nav-item.open .chev-x { @apply rotate-180; }
  .ng-nav-sub { @apply my-0.5 flex flex-col gap-0.5; }
  .ng-nav-item.child { @apply pl-9 text-[13px]; }
  .ng-nav-item.child .lucide { @apply size-[15px]; }

  .ng-side-foot { @apply relative border-t border-[var(--border-subtle)] px-3.5 py-3; }
  .ng-user-btn { @apply flex w-full cursor-pointer items-center gap-2.5 rounded-[9px] border-0 bg-transparent p-2 text-left font-sans; }
  .ng-user-btn:hover { @apply bg-[var(--n-50)]; }
  .ng-user-copy { @apply flex min-w-0 flex-col leading-[1.25]; }
  .ng-user-name { @apply overflow-hidden text-ellipsis whitespace-nowrap text-[13px] font-extrabold text-[var(--fg-1)]; }
  .ng-user-role { @apply text-[11.5px] font-bold uppercase tracking-[0.07em] text-[var(--fg-3)]; }
  .ng-user-btn .chev { @apply ml-auto size-4 shrink-0 text-[var(--fg-4)]; }
  .ng-user-menu { @apply absolute bottom-[calc(100%-4px)] left-3.5 right-3.5 z-[60] rounded-xl border border-[var(--border-default)] bg-white p-1.5 shadow-lg; box-shadow: var(--shadow-lg); }
  .ng-user-item { @apply flex w-full cursor-pointer items-center gap-2.5 rounded-lg border-0 bg-transparent px-2.5 py-[9px] text-left font-sans text-[13.5px] font-semibold text-[var(--fg-1)] no-underline; }
  .ng-user-item:hover { @apply bg-[var(--n-50)]; }
  .ng-user-item .lucide { @apply size-4 shrink-0 text-[var(--fg-3)]; }
  .ng-user-item.danger,
  .ng-user-item.danger .lucide { @apply text-[var(--danger)]; }
  .ng-user-menu hr { @apply mx-1 my-[5px] border-0 border-t border-[var(--border-subtle)]; }
  details.ng-user-drop { @apply block; }
  details.ng-user-drop > summary { @apply list-none; }
  details.ng-user-drop > summary::-webkit-details-marker { @apply hidden; }
  details.ng-user-drop .chev { @apply transition-transform duration-200 ease-out; }
  details.ng-user-drop[open] .chev { @apply rotate-180; }

  .ng-top { @apply sticky top-0 z-20 flex h-[60px] items-center gap-3.5 border-b border-[rgba(216,220,217,0.6)] bg-white/65 px-[26px]; backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6); }
  .ng-proj { @apply inline-flex cursor-pointer items-center gap-2 rounded-lg border border-[var(--border-default)] bg-white px-3 py-[7px] text-[13px] font-semibold text-[var(--fg-1)] no-underline; }
  .ng-proj .lucide { @apply size-[15px] text-[var(--fg-4)]; }
  .ng-schoolyear { @apply shrink-0; }
  .ng-schoolyear-select { @apply w-[156px]; }
  .ng-schoolyear-select select { @apply h-[38px] pl-[11px] text-[13px]; }
  .ng-search { @apply relative max-w-[380px] flex-1; }
  .ng-search input { @apply box-border w-full rounded-lg border border-[var(--border-default)] bg-[var(--n-25)] py-2 pl-[34px] pr-3 font-sans text-[13px]; box-shadow: var(--shadow-inset); }
  .ng-search input:focus { @apply border-ng-green-500 outline-none; box-shadow: var(--shadow-focus), var(--shadow-inset); }
  .ng-search .lucide { @apply absolute left-[11px] top-1/2 size-4 -translate-y-1/2 text-[var(--fg-4)]; }
  .ng-top-actions { @apply ml-auto flex items-center gap-2; }
  .ng-iconbtn { @apply relative inline-flex size-9 cursor-pointer items-center justify-center rounded-lg border border-transparent text-[var(--fg-2)] no-underline; }
  .ng-iconbtn:hover { @apply bg-[var(--n-50)]; }
  .ng-iconbtn .lucide { @apply size-[18px]; }
  .ng-iconbtn .ping { @apply absolute right-[9px] top-2 size-[7px] rounded-full border-[1.5px] border-white bg-ng-orange-500; }

  .ng-avatar { @apply inline-flex size-[34px] shrink-0 items-center justify-center rounded-full border border-ng-green-200 bg-ng-green-100 text-xs font-bold text-ng-green-700; }
  .ng-avatar.orange { @apply border-ng-orange-200 bg-ng-orange-100 text-ng-orange-700; }
  .ng-avatar.neutral { @apply border-[var(--n-200)] bg-[var(--n-100)] text-[var(--n-600)]; }
  .ng-avatar.sm { @apply size-7 text-[10.5px]; }

  .ng-page { @apply mx-auto box-border w-full px-8 pb-12 pt-7; }
  .ng-page-head { @apply mb-5 flex items-baseline justify-between gap-4; }
  .ng-page-head > div:first-child { @apply flex min-w-0 flex-wrap items-baseline gap-3; }
  .ng-page-head > div:last-child { @apply shrink-0; }
  .ng-page-title { @apply text-[27px] font-extrabold tracking-[-0.02em] text-[var(--fg-1)]; }
  .ng-page-sub { @apply mt-0 text-sm text-[var(--fg-3)]; }
  .ng-actions { @apply flex flex-wrap items-center justify-end gap-2; }
  .ng-index { @apply flex flex-col gap-4; }
  .ng-index .ng-crumb { @apply mb-[-6px]; }
  .ng-index-head { @apply mb-0; }
  .ng-dashboard-section { @apply mt-4; }
  .ng-split { @apply grid items-start gap-4; grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr); }
  .ng-dashboard-tables { @apply grid items-start gap-4; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ng-dashboard-chart-grid { @apply grid items-start gap-4; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ng-model-grid { @apply grid gap-3.5; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ng-card-body { @apply px-5 py-[18px]; }
  .ng-chart-body { @apply px-5 py-[18px]; }
  .ng-chart-card { @apply overflow-hidden; }
  .ng-table-card { @apply overflow-hidden; }

  .ng-empty { @apply flex min-h-[440px] flex-col items-center justify-center gap-3 text-center text-[var(--fg-3)]; }
  .ng-empty .ic { @apply inline-flex size-14 items-center justify-center rounded-[14px] border border-[var(--border-subtle)] bg-[var(--n-50)] text-[var(--fg-4)]; }
  .ng-empty .ic .lucide { @apply size-[26px]; }
  .ng-empty h3 { @apply text-lg font-bold text-[var(--fg-1)]; }
  .ng-empty p { @apply m-0 max-w-[360px] text-[13.5px]; }
  .ng-empty-sm { @apply min-h-[260px] px-[18px] py-7; }

  .ng-btn { @apply inline-flex cursor-pointer items-center gap-2 whitespace-nowrap rounded-[9px] border border-transparent px-[15px] py-2.5 font-sans text-[13.5px] font-bold leading-none no-underline transition-all duration-150 ease-out; }
  .ng-btn .lucide { @apply size-[15px]; }
  .ng-btn:focus-visible { @apply outline-none; box-shadow: var(--shadow-focus); }
  .ng-btn-primary,
  .ng-btn-green { @apply border-ng-green-600 bg-ng-green-500 text-white; box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), var(--shadow-xs); }
  .ng-btn-primary:hover,
  .ng-btn-green:hover { @apply bg-ng-green-600; }
  .ng-btn-primary:active,
  .ng-btn-green:active { @apply translate-y-px bg-ng-green-700; }
  .ng-btn-accent { @apply border-ng-orange-600 bg-ng-orange-500 text-[var(--ink)]; box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), var(--shadow-xs); }
  .ng-btn-accent:hover { @apply bg-ng-orange-600; }
  .ng-btn-accent:active { @apply translate-y-px bg-ng-orange-700 text-white; }
  .ng-btn-secondary { @apply border-[var(--border-default)] bg-white text-[var(--fg-1)]; box-shadow: var(--shadow-xs); }
  .ng-btn-secondary:hover { @apply border-[var(--border-strong)] bg-[var(--n-25)]; }
  .ng-btn-ghost { @apply bg-transparent text-[var(--fg-2)]; }
  .ng-btn-ghost:hover { @apply bg-[var(--n-50)]; }
  .ng-btn-danger { @apply border-[var(--danger-border)] bg-white text-[var(--danger)]; }
  .ng-btn-danger:hover { @apply bg-[var(--danger-bg)]; }
  .ng-btn-sm { @apply rounded-lg px-[11px] py-[7px] text-[12.5px]; }

  .ng-badge { @apply inline-flex items-center gap-1.5 whitespace-nowrap rounded-full border px-2.5 py-[3px] text-xs font-bold leading-[1.45]; }
  .ng-badge .dot { @apply size-1.5 rounded-full; }
  .ng-badge.ok { @apply border-ng-green-200 bg-ng-green-50 text-ng-green-700; }
  .ng-badge.ok .dot { @apply bg-ng-green-500; }
  .ng-badge.pending { @apply border-ng-orange-200 bg-ng-orange-50 text-ng-orange-700; }
  .ng-badge.pending .dot { @apply bg-ng-orange-500; }
  .ng-badge.danger { @apply border-[var(--danger-border)] bg-[var(--danger-bg)] text-[var(--danger)]; }
  .ng-badge.danger .dot { @apply bg-[var(--danger)]; }
  .ng-badge.neutral { @apply border-[var(--n-200)] bg-[var(--n-50)] text-[var(--n-600)]; }
  .ng-badge.neutral .dot { @apply bg-[var(--n-400)]; }
  .ng-badge.info { @apply border-[var(--border-default)] bg-white text-[var(--fg-2)]; }
  .ng-export-filters { @apply flex max-w-[420px] flex-wrap gap-1.5; }
  .ng-export-filters .ng-filter-badge { @apply max-w-full whitespace-normal break-words text-left; }

  .ng-card { @apply rounded-[13px] border border-[var(--border-subtle)] bg-white; box-shadow: var(--shadow-xs); }
  .ng-card-head { @apply flex items-center justify-between border-b border-[var(--border-subtle)] px-5 py-4; }
  .ng-card-title { @apply text-[15.5px] font-bold text-[var(--fg-1)]; }
  .ng-card-sub { @apply mt-0.5 text-xs text-[var(--fg-3)]; }
  .ng-link { @apply inline-flex cursor-pointer items-center gap-[5px] border-0 bg-transparent p-0 font-sans text-[13px] font-bold text-ng-green-600 no-underline; }
  .ng-link:hover { @apply text-ng-green-700; }
  .ng-link .lucide { @apply size-3.5; }

  .ng-hero-card { @apply mb-4 rounded-[18px] bg-ng-green-600 px-[34px] pb-[30px] pt-7 text-white; }
  .ng-hero-grid { @apply grid items-end gap-6; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); }
  .ng-hero-card .eyebrow { @apply text-white/70; }
  .ng-hero-val { @apply mt-3.5 text-[56px] font-extrabold leading-none tracking-[-0.03em] text-white tabular-nums; }
  .ng-hero-val .cur { @apply font-extrabold text-white; }
  .ng-hero-badge { @apply mt-[22px] inline-flex items-center gap-2 rounded-full bg-white/15 px-3.5 py-2 text-[13.5px] font-bold text-white; }
  .ng-hero-badge .lucide { @apply size-4; }
  .ng-hero-side { @apply grid gap-2.5; }
  .ng-hero-side > div { @apply flex items-center justify-between gap-3.5 rounded-[13px] border border-white/20 bg-white/10 px-3.5 py-3; }
  .ng-hero-side-label { @apply text-[12.5px] font-bold text-white/75; }
  .ng-hero-side strong { @apply text-xl font-extrabold text-white; }

  .ng-kpi-grid { @apply grid grid-cols-4 gap-3.5; }
  .ng-stat-tile { @apply rounded-[13px] p-[18px] text-white; box-shadow: var(--shadow-xs); }
  .ng-stat-tile.green { @apply bg-ng-green-500; }
  .ng-stat-tile.orange { @apply bg-ng-orange-500; }
  .ng-stat-tile.teal { @apply bg-ng-teal-500; }
  .ng-stat-tile.gold { @apply bg-ng-gold-500; }
  .ng-stat-tile-top { @apply flex items-start justify-between gap-2.5; }
  .ng-stat-tile-label { @apply text-[13px] font-semibold leading-[1.35] text-white/90; }
  .ng-stat-tile-ic { @apply inline-flex size-[30px] shrink-0 items-center justify-center rounded-[9px] bg-white/20 text-white; }
  .ng-stat-tile-ic .lucide { @apply size-4; }
  .ng-stat-tile-val { @apply mt-3.5 text-[26px] font-extrabold leading-none tracking-[-0.02em] text-white tabular-nums; }
  .ng-stat-tile-sub { @apply mt-2 text-[12.5px] font-semibold text-white/80; }

  .ng-kpi { @apply relative rounded-[13px] border border-[var(--border-subtle)] bg-white p-4; box-shadow: var(--shadow-xs); }
  .ng-kpi-top { @apply flex items-center justify-between gap-2.5; }
  .ng-kpi-label { @apply inline-flex items-center gap-2 text-xs font-semibold text-[var(--fg-3)]; }
  .ng-kpi-label::before { @apply size-2 shrink-0 rounded-full bg-[var(--n-300)]; content: ""; }
  .ng-kpi.green .ng-kpi-label::before { @apply bg-ng-green-500; }
  .ng-kpi.orange .ng-kpi-label::before { @apply bg-ng-orange-500; }
  .ng-kpi.danger .ng-kpi-label::before { @apply bg-[var(--danger)]; }
  .ng-kpi-ic { @apply inline-flex size-[30px] shrink-0 items-center justify-center rounded-lg bg-[var(--n-50)] text-[var(--fg-4)]; }
  .ng-kpi-ic .lucide { @apply size-4; }
  .ng-kpi-val { @apply mt-3 text-[26px] font-extrabold leading-none tracking-[-0.02em] text-[var(--fg-1)] tabular-nums; }
  .ng-kpi.danger .ng-kpi-val { @apply text-[var(--danger)]; }
  .ng-kpi-meta { @apply mt-[7px] text-xs text-[var(--fg-3)] tabular-nums; }
  .ng-kpi-meta strong { @apply font-bold text-[var(--fg-2)]; }

  .ng-counters { @apply grid grid-cols-5 gap-3.5; }
  .ng-counter { @apply flex items-center gap-[13px] rounded-[13px] border border-[var(--border-subtle)] bg-white px-4 py-3.5; box-shadow: var(--shadow-xs); }
  .ng-counter .c-label { @apply text-[12.5px] font-semibold text-[var(--fg-3)]; }
  .ng-counter .c-val { @apply mt-1 text-2xl font-extrabold leading-none text-[var(--fg-1)] tabular-nums; }
  .ng-counter .c-meta { @apply mt-[3px] text-[11.5px] font-semibold text-[var(--fg-4)]; }
  .ng-counter .c-ic { @apply inline-flex size-10 shrink-0 items-center justify-center rounded-[11px] bg-[var(--n-50)] text-[var(--fg-4)]; }
  .ng-counter .c-ic.green { @apply bg-ng-green-50 text-ng-green-600; }
  .ng-counter .c-ic.orange { @apply bg-ng-orange-50 text-ng-orange-600; }
  .ng-counter .c-ic.teal { @apply bg-ng-teal-50 text-ng-teal-500; }
  .ng-counter .c-ic.blue { @apply bg-ng-blue-50 text-ng-blue-500; }
  .ng-counter .c-ic.gold { @apply bg-ng-gold-50 text-ng-gold-500; }
  .ng-counter .c-ic.danger { @apply bg-[var(--danger-bg)] text-[var(--danger)]; }
  .ng-counter .c-ic .lucide { @apply size-[19px]; }

  .ng-tbl { @apply w-full border-separate border-spacing-0 text-[13.5px]; }
  .ng-tbl thead th { @apply border-b border-[var(--border-subtle)] bg-[var(--n-25)] px-[18px] py-3 text-left text-[11px] font-bold uppercase tracking-[0.07em] text-[var(--fg-3)]; }
  .ng-tbl thead th.num,
  .ng-tbl td.num { @apply text-right; }
  .ng-tbl tbody td { @apply border-b border-[var(--border-subtle)] px-[18px] py-3 align-middle text-[var(--fg-1)]; }
  .ng-tbl tbody tr:last-child td { @apply border-b-0; }
  .ng-tbl tbody tr:hover td { @apply bg-[var(--n-25)]; }
  .ng-tbl tbody tr.clickable { @apply cursor-pointer; }
  .ng-tbl td.num { @apply font-bold tabular-nums; }
  .ng-tbl td .sub { @apply text-xs text-[var(--fg-3)]; }
  .ng-tbl td strong { @apply font-extrabold; }
  .ng-tbl td.date { @apply whitespace-nowrap text-[12.5px] text-[var(--fg-3)] tabular-nums; }
  .ng-tbl .ref { @apply text-[12.5px] text-[var(--fg-3)]; font-family: var(--font-mono); }
  .ng-row-name { @apply flex items-center gap-[11px]; }
  .ng-index-table-card { @apply overflow-visible; }
  .ng-desktop-table { @apply overflow-x-auto; }
  .ng-mobile-list { @apply hidden; }
  .ng-row-menu-th { @apply w-[54px]; }
  .ng-row-menu-cell { @apply relative w-[54px] text-right; }
  .ng-row-menu { @apply relative inline-flex justify-end; }
  .ng-row-menu-btn { @apply inline-flex size-9 cursor-pointer items-center justify-center rounded-lg border-0 bg-[var(--n-50)] text-[var(--fg-2)]; }
  .ng-row-menu-btn:hover,
  .ng-row-menu-btn[aria-expanded="true"] { @apply bg-[var(--n-100)] text-[var(--fg-1)]; }
  .ng-row-menu-btn .lucide { @apply size-[17px]; }
  .ng-row-menu-dropdown,
  .ng-rowmenu { @apply rounded-[11px] border border-[var(--border-default)] bg-white p-[5px] text-left; box-shadow: var(--shadow-lg); }
  .ng-row-menu-dropdown { @apply absolute right-0 top-[calc(100%+6px)] z-[80] min-w-[178px]; }
  .ng-row-menu-dropdown.is-portaled,
  .ng-rowmenu { @apply fixed right-auto top-auto z-[200] min-w-[178px]; }
  .ng-rowmenu { @apply font-sans; }
  .ng-row-menu-item,
  .ng-rowmenu-item { @apply flex w-full cursor-pointer items-center gap-2.5 rounded-[7px] border-0 bg-transparent px-2.5 py-2 text-left font-sans text-[13.5px] font-semibold text-[var(--fg-1)] no-underline; }
  .ng-row-menu-item:hover,
  .ng-rowmenu-item:hover { @apply bg-[var(--n-50)]; }
  .ng-row-menu-item .lucide,
  .ng-rowmenu-item .lucide { @apply size-[15px] text-[var(--fg-3)]; }
  .ng-row-menu-item--danger,
  .ng-row-menu-item--danger .lucide,
  .ng-rowmenu-item.danger,
  .ng-rowmenu-item.danger .lucide { @apply text-[var(--danger)]; }
  .ng-rowmenu hr { @apply mx-0.5 my-1 border-0 border-t border-[var(--border-subtle)]; }

  .ng-alert-card { @apply overflow-hidden rounded-[13px] border border-[var(--border-subtle)] bg-white; box-shadow: var(--shadow-xs); }
  .ng-alert-card .ng-card-head { @apply bg-ng-orange-50; }
  .ng-alert-row { @apply flex items-center justify-between border-b border-[var(--border-subtle)] px-5 py-[13px]; }
  .ng-alert-row:last-child { @apply border-b-0; }
  .ng-alert-row:hover { @apply bg-ng-orange-50; }
  .ng-alert-name { @apply text-[13.5px] font-bold text-[var(--fg-1)]; }
  .ng-alert-loc { @apply mt-px text-[12.5px] text-[var(--fg-3)]; }
  .ng-alert-qty { @apply text-right; }
  .ng-alert-qty .q { @apply text-sm font-extrabold text-[var(--danger)] tabular-nums; }
  .ng-alert-qty .s { @apply text-[11.5px] text-[var(--fg-3)] tabular-nums; }

  .ng-stepper { @apply flex items-start gap-0; }
  .ng-step { @apply relative flex flex-1 flex-col items-center text-center; }
  .ng-step .bar { @apply absolute top-[17px] z-0 h-0.5 bg-[var(--n-200)]; left: -50%; right: 50%; }
  .ng-step:first-child .bar { @apply hidden; }
  .ng-step.done .bar,
  .ng-step.current .bar { @apply bg-ng-green-500; }
  .ng-step .node { @apply relative z-[1] inline-flex size-9 items-center justify-center rounded-full border-2 border-[var(--n-200)] bg-white text-[13px] font-extrabold text-[var(--fg-4)]; }
  .ng-step .node .lucide { @apply size-[17px]; }
  .ng-step.done .node { @apply border-ng-green-600 bg-ng-green-500 text-white; }
  .ng-step.current .node { @apply border-ng-orange-500 bg-white text-ng-orange-600; box-shadow: 0 0 0 4px var(--ng-orange-50); }
  .ng-step .s-label { @apply mt-2.5 text-[12.5px] font-bold text-[var(--fg-1)]; }
  .ng-step.todo .s-label { @apply text-[var(--fg-4)]; }
  .ng-step .s-meta { @apply mt-0.5 text-[11.5px] text-[var(--fg-3)]; }

  .ng-tl { @apply flex flex-col; }
  .ng-tl-item { @apply relative flex gap-3.5 pb-5; }
  .ng-tl-item:last-child { @apply pb-0; }
  .ng-tl-line { @apply absolute bottom-[-2px] left-4 top-[34px] w-0.5 bg-[var(--border-default)]; }
  .ng-tl-item:last-child .ng-tl-line { @apply hidden; }
  .ng-tl-ic { @apply z-[1] inline-flex size-[34px] shrink-0 items-center justify-center rounded-full border-2; }
  .ng-tl-ic .lucide { @apply size-[15px]; }
  .ng-tl-ic.ok { @apply border-ng-green-200 bg-ng-green-50 text-ng-green-600; }
  .ng-tl-ic.pending { @apply border-ng-orange-200 bg-ng-orange-50 text-ng-orange-600; }
  .ng-tl-ic.danger { @apply border-[var(--danger-border)] bg-[var(--danger-bg)] text-[var(--danger)]; }
  .ng-tl-ic.neutral { @apply border-[var(--n-200)] bg-[var(--n-50)] text-[var(--fg-4)]; }
  .ng-tl-body { @apply min-w-0 flex-1 pt-0.5; }
  .ng-tl-top { @apply flex items-baseline justify-between gap-3; }
  .ng-tl-title { @apply text-[13.5px] font-bold text-[var(--fg-1)]; }
  .ng-tl-actor { @apply mt-px text-[12.5px]; }
  .ng-tl-actor .by { @apply font-semibold text-ng-orange-700; }
  .ng-tl-time { @apply whitespace-nowrap text-[11.5px] text-[var(--fg-4)] tabular-nums; }
  .ng-tl-note { @apply mt-1 text-[13px] text-[var(--fg-2)]; }
  .ng-tl-quote { @apply mt-2 rounded-[9px] border border-[var(--border-subtle)] bg-[var(--n-25)] px-[13px] py-[9px] text-[13px] italic text-[var(--fg-2)]; }

  .ng-kv { @apply flex justify-between gap-4 border-b border-dashed border-[var(--border-subtle)] py-[9px] text-[13px]; }
  .ng-kv:last-child { @apply border-b-0; }
  .ng-kv .k { @apply text-[var(--fg-3)]; }
  .ng-kv .v { @apply text-right font-bold text-[var(--fg-1)] tabular-nums; }
  .ng-kv .v.mono { @apply text-[12.5px] font-medium; font-family: var(--font-mono); }
  .ng-validator { @apply flex items-center gap-[11px] border-b border-[var(--border-subtle)] py-2.5; }
  .ng-validator:last-child { @apply border-b-0; }
  .ng-validator .vn { @apply text-[13.5px] font-bold text-[var(--fg-1)]; }
  .ng-validator .vr { @apply text-xs text-[var(--fg-3)]; }

  .ng-chips { @apply mb-4 flex flex-wrap gap-2; }
  .ng-chip { @apply inline-flex cursor-pointer items-center gap-[7px] whitespace-nowrap rounded-full border border-[var(--border-default)] bg-white px-3 py-1.5 font-sans text-[12.5px] font-semibold text-[var(--fg-2)] transition-colors duration-150 ease-out; }
  .ng-chip:hover { @apply bg-[var(--n-25)]; }
  .ng-chip.active { @apply border-ng-green-600 bg-ng-green-500 text-white; }
  .ng-chip .n { @apply font-bold text-[var(--fg-4)] tabular-nums; }
  .ng-chip.active .n { @apply text-ng-green-100; }

  .ng-filters { @apply grid grid-cols-3 gap-4; }
  .ng-field { @apply flex flex-col gap-1.5; }
  .ng-field > label { @apply text-[11px] font-bold uppercase tracking-[0.07em] text-[var(--fg-3)]; }
  .ng-select { @apply relative; }
  .ng-select select { @apply w-full cursor-pointer appearance-none rounded-[9px] border border-[var(--border-default)] bg-white py-[9px] pl-3 pr-[34px] font-sans text-[13.5px] font-semibold text-[var(--fg-1)]; box-shadow: var(--shadow-inset); }
  .ng-select select:focus { @apply border-ng-green-500 outline-none; box-shadow: var(--shadow-focus); }
  .ng-select .chev { @apply pointer-events-none absolute right-[11px] top-1/2 size-[15px] -translate-y-1/2 text-[var(--fg-4)]; }

  .ng-hbars { @apply flex flex-col gap-[13px]; }
  .ng-hbar { @apply grid items-center gap-3; grid-template-columns: 92px 1fr 86px; }
  .ng-hbar .lbl { @apply overflow-hidden text-ellipsis whitespace-nowrap text-right text-xs font-bold text-[var(--fg-2)]; }
  .ng-hbar .track { @apply h-[18px] overflow-hidden rounded-md border border-[var(--border-subtle)] bg-[var(--n-50)]; }
  .ng-hbar .fill { @apply block h-full rounded-l-md transition-[width] duration-200 ease-out; }
  .ng-hbar .val { @apply whitespace-nowrap text-[12.5px] font-bold text-[var(--fg-1)] tabular-nums; }
  .ng-legend { @apply flex items-center gap-4; }
  .ng-legend .item { @apply flex items-center gap-[7px] text-[12.5px] font-semibold text-[var(--fg-2)]; }
  .ng-legend .sw { @apply size-3 rounded-[3px]; }

  .ng-input { @apply box-border w-full rounded-[9px] border border-[var(--border-default)] bg-white px-3 py-[9px] font-sans text-[13.5px] text-[var(--fg-1)]; box-shadow: var(--shadow-inset); }
  .ng-input::placeholder { @apply text-[var(--fg-4)]; }
  .ng-input:focus { @apply border-ng-green-500 outline-none; box-shadow: var(--shadow-focus); }
  .ng-input.with-ic { @apply pl-9; }
  .ng-input-wrap,
  .ng-password-wrap,
  .ng-proj-wrap { @apply relative; }
  .ng-input-wrap > .lucide { @apply absolute left-3 top-1/2 size-4 -translate-y-1/2 text-[var(--fg-4)]; }
  .ng-password-wrap .ng-input { @apply pr-[42px]; }
  .ng-password-toggle { @apply absolute right-2 top-1/2 inline-flex size-[30px] -translate-y-1/2 cursor-pointer items-center justify-center rounded-lg border-0 bg-transparent text-[var(--fg-4)]; }
  .ng-password-toggle:hover { @apply bg-[var(--n-50)] text-[var(--fg-2)]; }
  .ng-password-toggle:focus-visible { @apply outline-none; box-shadow: var(--shadow-focus); }
  .ng-password-toggle .lucide { @apply size-[17px]; }
  .ng-password-eye-hide { @apply hidden; }
  .ng-password-wrap.is-visible .ng-password-eye-show { @apply hidden; }
  .ng-password-wrap.is-visible .ng-password-eye-hide { @apply inline-flex; }

  .ng-proj-menu { @apply absolute left-0 top-[calc(100%+8px)] z-50 min-w-[248px] rounded-xl border border-[var(--border-default)] bg-white p-1.5; box-shadow: var(--shadow-lg); }
  .ng-proj-group { @apply px-2.5 pb-1 pt-[9px] text-[10.5px] font-bold uppercase tracking-[0.12em] text-[var(--fg-4)]; }
  .ng-proj-item { @apply flex w-full cursor-pointer items-center gap-[9px] rounded-lg border-0 bg-transparent px-2.5 py-2 text-left font-sans text-[13.5px] font-semibold text-[var(--fg-1)]; }
  .ng-proj-item:hover { @apply bg-[var(--n-50)]; }
  .ng-proj-item .pdot { @apply size-2 shrink-0 rounded-full bg-[var(--n-300)]; }
  .ng-proj-item.sel .pdot { @apply bg-ng-green-500; }
  .ng-proj-item .chk { @apply ml-auto size-[15px] text-ng-green-600; }

  .ng-crumb { @apply mb-2 flex items-center gap-1.5 text-[12.5px]; }
  .ng-crumb .crumb-link { @apply cursor-pointer border-0 bg-transparent p-0 font-sans font-semibold text-[var(--fg-3)]; font-size: inherit; }
  .ng-crumb .crumb-link:hover { @apply text-ng-green-700; }
  .ng-crumb .crumb-cur { @apply font-bold text-[var(--fg-1)]; }
  .ng-crumb .sep { @apply size-[13px] shrink-0 text-[var(--fg-4)]; }

  .ng-filterpanel { @apply overflow-hidden; }
  .ng-filter-head { @apply flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-[18px] py-3.5 font-sans; }
  .ng-filter-head:hover { @apply bg-[var(--n-25)]; }
  .ng-filter-title { @apply flex items-center gap-[9px] text-sm font-bold text-[var(--fg-1)]; }
  .ng-filter-title .lucide { @apply size-4 text-[var(--fg-3)]; }
  .ng-filter-toggle { @apply flex items-center gap-[5px] text-[12.5px] font-bold text-ng-green-600; }
  .ng-filter-toggle .lucide { @apply size-[15px]; }
  .ng-filter-body { @apply border-t border-[var(--border-subtle)] px-[18px] pb-[18px] pt-4; }
  .ng-filter-dot { @apply size-[7px] rounded-full bg-ng-orange-500; box-shadow: 0 0 0 3px var(--ng-orange-50); }
  .ng-index-filters { @apply flex flex-col gap-4; }
  .ng-index-filter-query { @apply relative; }
  .ng-index-filter-query .ng-input { @apply h-[38px] pl-9; }
  .ng-index-filter-query::before { @apply pointer-events-none absolute bottom-[11px] left-[13px] z-[1] size-3.5 rounded-full border-2 border-[var(--fg-4)]; content: ""; }
  .ng-index-filter-query::after { @apply pointer-events-none absolute bottom-[9px] left-[25px] z-[1] h-0.5 w-[7px] rotate-45 rounded-sm bg-[var(--fg-4)]; content: ""; }
  .ng-index-filter-grid { @apply grid items-end gap-x-4 gap-y-3.5; grid-template-columns: repeat(4, minmax(160px, 1fr)); }
  .ng-index-filter-actions { @apply flex flex-wrap items-end gap-2; }
  .ng-index-filter-actions .ng-btn { @apply min-h-[38px]; }

  .ng-pagination { @apply flex items-center justify-between gap-4 border-t border-[var(--border-subtle)] bg-[var(--n-25)] px-[18px] py-3; }
  .ng-pagination .pp { @apply flex items-center gap-2.5 text-[12.5px] font-semibold text-[var(--fg-3)]; }
  .ng-pagination .ng-select.sm select { @apply py-1.5 pl-2.5 pr-[30px] text-[12.5px]; box-shadow: var(--shadow-xs); }
  .ng-pagination .ng-select.sm .chev { @apply right-[9px] size-3.5; }
  .ng-pagination .nav { @apply flex items-center gap-3; }
  .ng-pagination .rng { @apply text-[12.5px] font-semibold text-[var(--fg-3)]; }
  .pg-btn { @apply inline-flex size-8 cursor-pointer items-center justify-center rounded-lg border border-[var(--border-default)] bg-white text-[var(--fg-2)]; }
  .pg-btn:hover:not(:disabled) { @apply bg-[var(--n-50)]; }
  .pg-btn:disabled { @apply cursor-default opacity-40; }
  .pg-btn .lucide { @apply size-4; }

  .ng-form-grid { @apply grid grid-cols-2 gap-[18px]; }
  .ng-form-grid .col-2 { @apply col-span-2; }
  .ng-hint { @apply mt-[5px] text-xs text-[var(--fg-4)]; }
  textarea.ng-input { @apply min-h-[88px] resize-y leading-normal; }
  .ng-form-actions { @apply mt-6 flex gap-2.5; }
  .payment-method-cards { @apply grid gap-2.5; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .payment-method-card { @apply relative flex min-w-0 cursor-pointer flex-col items-start gap-2.5 rounded-[10px] border border-[var(--border-default)] bg-white p-3 text-left font-sans transition-all duration-150 ease-out; box-shadow: var(--shadow-xs); }
  .payment-method-card:hover:not(:disabled) { @apply border-[var(--border-strong)] bg-[var(--n-25)]; }
  .payment-method-card:focus-visible { @apply outline-none; box-shadow: var(--shadow-focus); }
  .payment-method-card.is-selected { @apply border-ng-green-500 bg-ng-green-50; box-shadow: inset 0 0 0 1px var(--ng-green-500), var(--shadow-xs); }
  .payment-method-card.is-disabled { @apply cursor-not-allowed grayscale; opacity: 0.45; }
  .payment-method-card-ic { @apply inline-flex size-10 shrink-0 items-center justify-center rounded-[10px] border border-[var(--border-subtle)] bg-[var(--n-25)] text-[var(--fg-3)]; }
  .payment-method-card-ic .lucide { @apply size-5; }
  .payment-method-card.is-selected .payment-method-card-ic { @apply border-ng-green-200 bg-white text-ng-green-700; }
  .payment-method-card-copy { @apply flex min-w-0 flex-1 flex-col gap-0.5; }
  .payment-method-card-name { @apply text-[13.5px] font-extrabold leading-[1.25] text-[var(--fg-1)]; }
  .payment-method-card-state { @apply text-xs font-semibold leading-[1.3] text-[var(--fg-4)]; }
  .payment-method-card.is-selected .payment-method-card-state { @apply text-ng-green-700; }
  .payment-method-card-check { @apply absolute right-2.5 top-2.5 inline-flex size-7 shrink-0 items-center justify-center rounded-full border border-ng-green-200 bg-white text-ng-green-600; }
  .payment-method-card-check .lucide { @apply size-4; }
  .payment-status-panel { @apply mb-4 flex items-start gap-3 rounded-[10px] border border-ng-orange-200 bg-ng-orange-50 px-3.5 py-3 text-ng-orange-800; }
  .payment-status-spinner,
  .payment-button-spinner { @apply inline-flex shrink-0 items-center justify-center; }
  .payment-status-spinner .lucide,
  .payment-button-spinner .lucide { @apply size-4; animation: ng-spin 0.9s linear infinite; }
  .payment-status-copy { @apply flex min-w-0 flex-col gap-0.5; }
  .payment-status-copy strong { @apply text-[13.5px] font-extrabold leading-[1.25] text-[var(--fg-1)]; }
  .payment-status-copy span { @apply text-[12.5px] font-semibold leading-[1.35]; }
  .payment-status-code { @apply mt-1 text-[12.5px] text-[var(--fg-2)]; }

  /* ── Bloc code STA (nita_online) — Payment show ──────────────────────── */
  .payment-sta-block {
    @apply mb-5 flex flex-col items-center justify-center gap-2 rounded-[14px] border-2 border-ng-orange-300 bg-ng-orange-50 px-6 py-8 text-center;
  }
  .payment-sta-label {
    @apply text-sm font-semibold text-ng-orange-700;
    letter-spacing: 0.03em;
  }
  .payment-sta-code {
    font-size: 72px;
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 1;
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
    @apply text-ng-orange-800;
  }

  /* ── Bloc erreur iPay — Payment show ─────────────────────────────────── */
  .payment-error-block {
    @apply mb-4 flex items-start gap-3 rounded-[10px] border border-[var(--danger-border)] bg-[var(--danger-bg)] px-4 py-3 text-[var(--danger)];
  }
  .payment-error-block .payment-error-ic { @apply mt-0.5 shrink-0; }
  .payment-error-block .payment-error-ic .lucide { @apply size-4; }
  .payment-error-block strong { @apply block text-[13.5px] font-extrabold leading-tight; }
  .payment-error-block p { @apply mt-0.5 text-[12.5px] font-semibold leading-snug; }

  /* ── Panneau résultat après vérification ─────────────────────────────── */
  .payment-check-result {
    @apply mb-4 flex items-center gap-3 rounded-[10px] border border-[var(--border-subtle)] bg-[var(--n-25)] px-4 py-3 text-[var(--fg-2)];
  }
  .payment-check-result[data-result-status="succeeded"] {
    @apply border-ng-green-200 bg-ng-green-50 text-ng-green-800;
  }
  .payment-check-result[data-result-status="failed"],
  .payment-check-result[data-result-status="error"] {
    @apply border-[var(--danger-border)] bg-[var(--danger-bg)] text-[var(--danger)];
  }
  .payment-check-result .lucide { @apply size-4 shrink-0; }
  .payment-check-result p { @apply text-[13px] font-semibold leading-snug; }

  @keyframes ng-spin {
    to { transform: rotate(360deg); }
  }

  .ng-auth-page { @apply relative isolate grid min-h-screen items-stretch bg-[var(--bg-page)]; grid-template-columns: minmax(320px, 0.95fr) minmax(360px, 1.05fr); }
  .ng-auth-panel { @apply flex flex-col justify-between gap-7 p-9 text-white/80; background: linear-gradient(90deg, rgba(7, 57, 8, 0.92) 0%, rgba(7, 57, 8, 0.78) 100%), url("/assets/fond-6a46ce9a.png") center / cover no-repeat; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
  .ng-auth-brand { @apply flex items-center gap-3; }
  .ng-auth-logo { @apply size-[42px] rounded-[10px] bg-white text-ng-green-700; border-color: rgba(255,255,255,0.3); }
  .ng-auth-logo .lucide { @apply size-[21px]; }
  .ng-auth-panel .ng-brand-app { @apply text-white; }
  .ng-auth-panel .ng-brand-gov { @apply text-white/65; }
  .ng-auth-copy { @apply max-w-[520px]; }
  .ng-auth-kicker { @apply mb-3 mt-0 text-[11px] font-extrabold uppercase tracking-[0.12em] text-ng-orange-200; }
  .ng-auth-copy h1 { @apply mb-3.5 text-[34px] font-extrabold leading-[1.08] text-white; }
  .ng-auth-copy p { @apply m-0 max-w-[460px] text-[15px] text-white/75; }
  .ng-auth-security { @apply flex items-start gap-[13px] rounded-[13px] border border-white/15 bg-white/10 p-[15px]; }
  .ng-auth-security .c-ic { @apply inline-flex size-[38px] shrink-0 items-center justify-center rounded-[10px] bg-white/15 text-white; }
  .ng-auth-security .c-ic.green { @apply text-ng-green-100; }
  .ng-auth-security .c-ic.orange { @apply text-ng-orange-100; }
  .ng-auth-security .c-ic.teal { @apply text-ng-teal-50; }
  .ng-auth-security .c-ic .lucide { @apply size-[19px]; }
  .ng-auth-security strong { @apply block text-[13.5px] font-bold leading-[1.3] text-white; }
  .ng-auth-security span { @apply mt-0.5 block text-[12.5px] text-white/70; }
  .ng-auth-page > .ng-auth-card { @apply self-center justify-self-center bg-white/95; width: min(500px, calc(100% - 40px)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .ng-auth-card-centered { grid-column: 1 / -1; }
  .ng-form-brand { @apply flex justify-center px-5 pt-[22px]; }
  .ng-form-logo { @apply size-[86px] rounded-[14px] border border-[var(--border-subtle)] bg-white object-contain p-2; box-shadow: var(--shadow-sm); }
  .ng-auth-card-body { @apply p-5; }
  .ng-auth-form { @apply flex flex-col gap-4; }
  .ng-auth-submit { @apply mt-1 w-full justify-center; }
  .ng-auth-links { @apply mt-[18px] flex flex-wrap items-center justify-center gap-x-4 gap-y-3 border-t border-[var(--border-subtle)] pt-[18px]; }
  .ng-auth-links form { @apply m-0; }
  .ng-otp-setup { @apply mb-5 grid gap-3 rounded-[12px] border border-[var(--border-subtle)] bg-[var(--bg-sunken)] p-4; }
  .ng-otp-qr { @apply mx-auto flex size-[210px] items-center justify-center rounded-[10px] border border-[var(--border-subtle)] bg-white p-3; }
  .ng-otp-qr svg { @apply h-full w-full; }
  .ng-otp-secret { @apply grid gap-1 rounded-[9px] border border-[var(--border-subtle)] bg-white px-3 py-2 text-center; }
  .ng-otp-secret span { @apply text-[10px] font-bold uppercase tracking-[0.08em] text-[var(--fg-4)]; }
  .ng-otp-secret code { @apply block break-all text-[12px] font-bold text-[var(--fg-1)]; }
  .ng-link-button { @apply text-[13px]; }
  .ng-check-row { @apply flex cursor-pointer items-center gap-[9px] text-[13px] font-semibold text-[var(--fg-2)]; }
  .ng-check-row input { @apply size-4 shrink-0 accent-ng-green-500; }
  .ng-segment { @apply grid grid-cols-2 gap-2; }
  .ng-segment label { @apply cursor-pointer; }
  .ng-segment input { @apply pointer-events-none absolute opacity-0; }
  .ng-segment span { @apply flex min-h-10 items-center justify-center gap-2 rounded-[9px] border border-[var(--border-default)] bg-white text-[13px] font-bold text-[var(--fg-2)]; box-shadow: var(--shadow-xs); }
  .ng-segment span .lucide { @apply size-[15px]; }
  .ng-segment input:checked + span { @apply border-ng-green-500 bg-ng-green-50 text-ng-green-700; }
  .ng-auth-alert,
  .ng-auth-notice { @apply flex items-start gap-2.5 rounded-[10px] p-3 text-[13px] text-[var(--fg-2)]; }
  .ng-auth-alert { @apply border border-[var(--danger-border)] bg-[var(--danger-bg)]; }
  .ng-auth-notice { @apply border border-ng-green-200 bg-ng-green-50; }
  .ng-auth-alert .lucide,
  .ng-auth-notice .lucide { @apply mt-px size-[17px] shrink-0; }
  .ng-auth-alert .lucide,
  .ng-auth-alert strong { @apply text-[var(--danger)]; }
  .ng-auth-alert ul { @apply mb-0 ml-[18px] mt-1.5 p-0; }
  .ng-auth-notice .lucide { @apply text-ng-green-600; }
  .ng-otp-input { @apply text-center text-xl font-extrabold tracking-[0.18em] tabular-nums; }

  .ng-detail-grid { @apply grid grid-cols-2 gap-x-9 gap-y-5; }
  .ng-detail-field--wide { @apply col-span-2; }
  .ng-detail-field--wide .ng-export-filters { @apply max-w-none; }
  .ng-detail-field .k { @apply mb-[3px] text-xs font-semibold text-[var(--fg-3)]; }
  .ng-detail-field .v { @apply text-[15px] font-semibold text-[var(--fg-1)]; }
  .ng-detail-field .vsub { @apply mt-0.5 text-xs text-[var(--fg-4)]; }
  .ng-section-title { @apply mb-3 mt-0 text-[15px] font-bold text-[var(--fg-1)]; }
  .ng-limit-row { @apply flex items-center justify-between rounded-[10px] border border-[var(--border-subtle)] bg-[var(--n-25)] px-4 py-3 text-[13.5px]; }
  .ng-limit-row .ln { @apply font-bold text-[var(--fg-1)]; }
  .ng-limit-row .lv { @apply font-semibold text-[var(--fg-3)] tabular-nums; }
  .ng-sw { @apply flex h-16 items-end rounded-[10px] border border-[rgba(18,22,19,0.10)] px-[9px] py-[7px]; }
  .ng-sw .hex { @apply text-[10.5px] font-medium; font-family: var(--font-mono); }

  .ng-notice-stack { @apply pointer-events-none fixed left-1/2 top-4 z-[1000] flex -translate-x-1/2 flex-col items-center gap-2.5; }
  .ng-notice { @apply pointer-events-auto flex w-[380px] max-w-[calc(100vw-32px)] items-start gap-[11px] rounded-xl border border-[var(--border-default)] bg-white py-3 pl-3.5 pr-3; animation: ng-notice-in var(--dur-base) var(--ease-out); box-shadow: var(--shadow-lg); }
  .ng-notice.is-leaving { animation: ng-notice-out 220ms var(--ease-out) forwards; }
  .ng-notice-ic { @apply inline-flex size-[30px] shrink-0 items-center justify-center rounded-lg bg-[var(--n-50)] text-[var(--fg-4)]; }
  .ng-notice-ic .lucide { @apply size-[17px]; }
  .ng-notice-body { @apply min-w-0 flex-1; }
  .ng-notice-title { @apply text-[13.5px] font-bold leading-[1.3] text-[var(--fg-1)]; }
  .ng-notice-msg { @apply mt-px text-[12.5px] leading-[1.4] text-[var(--fg-3)]; }
  .ng-notice-close { @apply inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-[var(--fg-4)]; }
  .ng-notice-close:hover { @apply bg-[var(--n-50)] text-[var(--fg-2)]; }
  .ng-notice-close .lucide { @apply size-[15px]; }
  .ng-notice.success { @apply border-ng-green-200; }
  .ng-notice.success .ng-notice-ic { @apply bg-ng-green-50 text-ng-green-600; }
  .ng-notice.info { @apply border-[var(--info-border)]; }
  .ng-notice.info .ng-notice-ic { @apply bg-ng-blue-50 text-ng-blue-500; }
  .ng-notice.error { @apply border-[var(--danger-border)]; }
  .ng-notice.error .ng-notice-ic { @apply bg-[var(--danger-bg)] text-[var(--danger)]; }

  .dn-auth { @apply fixed inset-0 z-[1000] flex flex-col items-center gap-5 overflow-y-auto px-6 pt-10; background: radial-gradient(circle at 30% 20%, rgba(18,121,20,0.14) 0%, transparent 55%), var(--ink); }
  .dn-auth-card { @apply flex w-full max-w-[380px] shrink-0 flex-col gap-3 rounded-2xl bg-[var(--bg-surface)] px-8 pb-[30px] pt-[34px]; box-shadow: 0 32px 64px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04); }
  .dn-auth-eyebrow { @apply text-[11px] font-bold uppercase tracking-[0.14em] text-ng-green-700; }
  .dn-auth-title { @apply mb-0 mt-0.5 text-2xl font-extrabold leading-[1.15] tracking-normal text-[var(--fg-1)]; }
  .dn-auth-sub { @apply mb-2.5 mt-1 text-[13.5px] leading-normal text-[var(--fg-3)]; }
  .dn-auth-label { @apply mb-[-6px] text-xs font-bold text-[var(--fg-2)]; }
  .dn-auth-input { @apply rounded-[10px] border border-[var(--border-default)] bg-white px-3 py-2.5 font-sans text-sm outline-none duration-150; transition-property: border-color, box-shadow; box-shadow: var(--shadow-inset); }
  .dn-auth-input:focus { @apply border-ng-green-500; box-shadow: var(--shadow-inset), var(--shadow-focus); }
  .dn-auth-input.is-error { @apply border-[var(--danger)]; box-shadow: 0 0 0 3px rgba(178,58,36,0.18); }
  .dn-auth-err { @apply mt-[-4px] text-[12.5px] font-semibold text-[var(--danger)]; }
  .dn-auth-btn { @apply mt-1.5 cursor-pointer rounded-[10px] border border-ng-green-600 bg-ng-green-500 px-4 py-[11px] font-sans text-sm font-bold text-white duration-150; transition-property: background, transform; }
  .dn-auth-btn:hover { @apply bg-ng-green-600; }
  .dn-auth-btn:active { @apply translate-y-px bg-ng-green-700; }
  .dn-game { @apply mt-auto flex w-full max-w-[980px] flex-col; }
  .dn-game-canvas { @apply block h-auto w-full rounded-t-[14px] border border-b-0 border-white/10 bg-[var(--ink)]; image-rendering: pixelated; }
  .dn-game-hud { @apply flex flex-col items-center gap-1.5 rounded-b-[14px] border border-t-0 border-white/10 bg-white/5 px-[18px] pb-3.5 pt-3 text-xs leading-normal text-white/70; }
  .dn-game-hud-title { @apply text-[10.5px] font-bold uppercase tracking-[0.16em] text-ng-green-300; }
  .dn-game-hud-mission { @apply max-w-[720px] text-center font-medium text-[rgba(238,241,239,0.85)]; }
  .dn-game-hud-mission b { @apply font-bold text-white; }
  .dn-game-hud-controls { @apply flex flex-wrap items-center justify-center gap-[18px] text-[11.5px] font-semibold tracking-[0.04em] text-white/65; }
  .dn-game-hud-tip { @apply text-center text-[11px] italic text-white/45; }
  .dn-game-hud kbd { @apply mr-1 rounded border border-[rgba(46,146,51,0.30)] bg-[rgba(46,146,51,0.14)] px-[7px] py-0.5 text-[11px] text-ng-green-300; font-family: var(--font-mono); }
  .ds-signout { @apply mt-3 inline-flex cursor-pointer items-center gap-2 border-0 bg-transparent p-0 py-1.5 font-sans text-xs font-semibold text-[#8E938C]; }
  .ds-signout:hover { @apply text-white; }
  .ds-signout i[data-lucide] { @apply size-3.5; }

  .ng-menu-btn { @apply ml-[-2px] hidden size-[38px] shrink-0 cursor-pointer items-center justify-center rounded-lg border border-[var(--border-default)] bg-white text-[var(--fg-1)]; }
  .ng-menu-btn .lucide { @apply size-[18px]; }
  .ng-scrim { @apply hidden; }

  .lp-main { @apply block bg-[var(--bg-page)]; }
  .lp-nav { @apply sticky top-0 z-50 border-b border-[var(--border-subtle)] bg-white/90; backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); }
  .lp-nav-link { @apply text-[13.5px] font-semibold text-[var(--fg-2)] no-underline transition-colors duration-150 ease-out; }
  .lp-nav-link:hover { @apply text-ng-green-600; }
  .lp-menu-btn { @apply size-[38px] shrink-0 cursor-pointer items-center justify-center rounded-lg border border-[var(--border-default)] bg-white text-[var(--fg-1)]; }
  .lp-menu-btn .lucide { @apply size-[18px]; }
  .lp-mobile-panel { @apply border-t border-[var(--border-subtle)] bg-white px-5 pb-5 pt-3.5; box-shadow: var(--shadow-md); }
  .lp-mobile-link { @apply block rounded-[9px] px-3 py-2.5 text-sm font-semibold text-[var(--fg-1)] no-underline; }
  .lp-mobile-link:hover { @apply bg-[var(--n-50)] text-ng-green-700; }
  .lp-hero-wrap { @apply text-white; background: radial-gradient(1200px 480px at 80% -10%, rgba(255, 140, 0, 0.22), transparent 60%), linear-gradient(160deg, var(--ng-green-700) 0%, var(--ng-green-500) 55%, var(--ng-green-600) 100%); }
  .lp-section-eyebrow { @apply text-ng-green-600; }
  .lp-section-title { @apply text-[26px] font-extrabold leading-[1.15] tracking-[-0.02em] text-[var(--fg-1)]; }
  .lp-check-row { @apply flex items-start gap-3 border-t border-[var(--border-subtle)] py-[11px]; }
  .lp-check-row:first-child { @apply border-t-0; }
  .lp-check-ic { @apply inline-flex size-[26px] shrink-0 items-center justify-center rounded-lg bg-ng-green-50 text-ng-green-600; }
  .lp-check-ic .lucide { @apply size-[15px]; }
  .lp-check-title { @apply text-[13.5px] font-bold text-[var(--fg-1)]; }
  .lp-check-sub { @apply mt-px text-xs text-[var(--fg-3)]; }
  .lp-faq-item { @apply border-t border-[var(--border-subtle)]; }
  .lp-faq-item:first-child { @apply border-t-0; }
  .lp-faq-a { @apply hidden; }
  .lp-faq-item.open .lp-faq-a { @apply block pb-1.5; }
  .lp-faq-item.open .ng-filter-toggle { @apply rotate-180; }
  .lp-circle { @apply inline-flex size-10 items-center justify-center rounded-full; }
  .lp-footer { @apply bg-[var(--ink)] text-[var(--fg-on-dark)]; }
  .lp-footer a { @apply text-[rgba(238,241,239,0.62)] no-underline transition-colors duration-150 ease-out; }
  .lp-footer a:hover { @apply text-white; }
  .lp-footer-title { @apply mb-3.5 text-[11px] font-bold uppercase tracking-[0.12em] text-[rgba(238,241,239,0.85)]; }
}

@keyframes ng-notice-in {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ng-notice-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-14px); }
}

@media (max-width: 860px) {
  .ng-auth-page { @apply grid-cols-1; }
  .ng-auth-panel { @apply gap-[22px] px-5 py-6; }
  .ng-auth-copy h1 { @apply text-[28px]; }
  .ng-auth-page > .ng-auth-card { @apply mb-7 mt-[18px]; width: min(100% - 28px, 520px); }
  .ng-app { @apply grid-cols-1; }
  .ng-side { @apply fixed left-0 top-0 z-[80] h-screen w-[280px] max-w-[84vw] -translate-x-full shadow-lg transition-transform duration-200 ease-out; box-shadow: var(--shadow-lg); }
  .ng-side.is-open { @apply translate-x-0; }
  .ng-scrim { @apply fixed inset-0 z-[70] block bg-[rgba(18,22,19,0.45)]; }
  .ng-menu-btn { @apply inline-flex; }
  .ng-top { @apply gap-2.5 px-3.5; }
  .ng-search { @apply hidden; }
  .ng-proj { @apply max-w-[50vw] overflow-hidden; }
  .ng-schoolyear-select { @apply w-[132px]; }
  .ng-page { @apply px-3.5 pb-9 pt-4; }
  .ng-page-head { @apply flex-col items-stretch gap-3; }
  .ng-page-head > div:last-child { @apply flex flex-wrap gap-2; }
  .ng-page-title { @apply text-[22px]; }
  .ng-kpi-grid,
  .ng-counters,
  .ng-dashboard-tables,
  .ng-dashboard-chart-grid,
  .ng-model-grid { @apply grid-cols-2; }
  .ng-split { grid-template-columns: 1fr !important; }
  .ng-filters,
  .ng-form-grid,
  .ng-detail-grid { @apply grid-cols-1; }
  .ng-detail-field--wide { @apply col-auto; }
  .ng-index-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ng-form-grid .col-2 { @apply col-auto; }
  .ng-hero-card { @apply px-5 pb-6 pt-[22px]; }
  .ng-hero-grid { @apply grid-cols-1 items-start; }
  .ng-hero-val { @apply text-[38px]; }
  .ng-desktop-table { @apply hidden; }
  .ng-mobile-list { @apply block; }
  .ng-mobile-list > article + article { @apply border-t border-[var(--border-subtle)]; }
  .ng-stepper { @apply overflow-x-auto pb-1; }
  .ng-step { @apply min-w-[92px]; }
  .lp-hero-wrap h1 { font-size: 34px !important; }
  .lp-section-title { @apply text-[22px]; }
}

@media (max-width: 520px) {
  .ng-auth-panel { @apply px-4 py-5; }
  .ng-auth-card-body { @apply p-4; }
  .ng-auth-copy h1 { @apply text-2xl; }
  .ng-auth-security { @apply p-3; }
  .ng-segment,
  .ng-kpi-grid,
  .ng-counters,
  .ng-dashboard-tables,
  .ng-dashboard-chart-grid,
  .ng-model-grid,
  .ng-index-filter-grid { @apply grid-cols-1; }
  .ng-index-filter-actions { @apply items-stretch; }
  .ng-index-filter-actions .ng-btn { @apply w-full justify-center; }
  .ng-pagination { @apply flex-col items-stretch gap-2.5; }
  .ng-pagination .nav { @apply justify-between; }
}