/*! il-admin.css — ILLUNARE 4.0 admin design system (pure CSS, il- namespace).
 *  Official "Hosting" palette (primary #606BDF). Light/dark via [data-il-theme]
 *  (also supports a locally-dark subtree, e.g. the auth form panel). No vendor
 *  framework, no vendor leakage. Inter/Archivo with a system-ui fallback. */

/* Self-hosted brand fonts (Archivo + Roboto fallback) — equalized with the
   canonical, local-first, no CDN dependency. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/brand/75affa71d1e2f6a7-s.p.51cde8ff.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/brand/ce62453a442c7f35-s.p.124b2306.woff2') format('woff2'); }

/* ── Brand preloader (equalized with the canonical) ────────────────────── */
#il-preloader { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: #0F1014; transition: opacity .35s ease; }
#il-preloader.il-hide { opacity: 0; pointer-events: none; }
#il-preloader .il-pl-box { position: relative; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; }
#il-preloader .il-pl-ring { position: absolute; inset: 0; width: 100px; height: 100px; }
#il-preloader .il-pl-ring circle { fill: none; stroke: #606BDF; stroke-width: 4; stroke-linecap: round; transform-box: fill-box; transform-origin: center; }
#il-preloader .il-pl-a circle { stroke-dasharray: 6 9.5; animation: il-pl-spin 6s linear infinite reverse; }
#il-preloader .il-pl-b circle { stroke-dasharray: 173 289; animation: il-pl-spin 35s linear infinite; }
#il-preloader .il-pl-mark { position: relative; z-index: 2; width: 40px; height: 40px; display: block; background-color: #fff; -webkit-mask: url(/assets/assets/images/illunare-icon.svg) center/contain no-repeat; mask: url(/assets/assets/images/illunare-icon.svg) center/contain no-repeat; }
@keyframes il-pl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #il-preloader .il-pl-a circle, #il-preloader .il-pl-b circle { animation: none; } }

/* ── Design tokens ─────────────────────────────────────────────────────── */
:root,
[data-il-theme="light"] {
  --il-primary: #606BDF;
  --il-primary-light: #BDC2FF;
  --il-primary-lighter: #E0E0FF;
  --il-primary-dark: #3944B8;
  --il-on-primary: #FFFFFF;

  --il-success: #22892F; --il-success-bg: #C8FFC0; --il-success-fg: #006E1C;
  --il-error: #DE3730;   --il-error-bg: #FFDAD6;   --il-error-fg: #BA1A1A;
  --il-warning: #AE6600; --il-warning-bg: #FFDCBE; --il-warning-fg: #8B5000;
  --il-info: #008394;    --il-info-bg: #D4F7FF;    --il-info-fg: #006876;
  --il-secondary: #5A5C78;

  /* Exact source tokens (Hosting preset). Light: background.default = #FFF,
     paper = #FFF — cards are flush white, separated by 1px dividers + section shadow. */
  --il-bg: #FFFFFF;        /* background.default */
  --il-surface: #FFFFFF;
  --il-surface-2: #F5F2FA; /* Hosting/neutral/96 - surface container low */
  --il-text: #1B1B1F;      /* on surface */
  --il-text-2: #46464F;    /* on surface variant */
  --il-muted: #777680;     /* outline */
  --il-border: #EFEDF4;    /* Hosting/neutral/94 - divider */
  --il-border-2: #EAE7EF;  /* Hosting/neutral/92 - surface container high */
  --il-track: #F5F2FA;     /* progress track (grey.100) */
  --il-progress-fill: var(--il-primary);  /* bar: primary.main in light */
  --il-up: #22892F;   /* delta chip text: success.main (light) */
  --il-down: #DE3730; /* delta chip text: error.main (light) */
  /* Active nav (selected list item): pale lavender, dark text. */
  --il-nav-active-bg: #E0E0FF; /* primary.lighter */
  --il-nav-active-fg: #1B1B1F; /* text.primary */
  --il-shadow: 0 12px 16px -4px rgba(27, 27, 31, .08), 0 4px 6px -2px rgba(27, 27, 31, .03); /* overlay shadow */
  --il-shadow-sm: 0 1px 2px rgba(27, 27, 31, .07); /* section shadow */

  --il-tone: var(--il-primary);
  --il-tone-bg: var(--il-primary-lighter);
  --il-tone-fg: var(--il-primary-dark);

  --il-drawer-w: 254px;
  --il-drawer-mini: 77px;
  --il-appbar-h: 76px;
  --il-radius: 16px;     /* cards: 4 * card radius base */
  --il-radius-sm: 8px;   /* buttons / inputs */
}

[data-il-theme="dark"] {
  /* Exact source dark tokens (warm-neutral, not blue-cool). */
  --il-primary: #BDC2FF;        /* Hosting/primary/80 */
  --il-primary-light: #7A86FB;  /* Hosting/primary/60 */
  --il-primary-lighter: #2C37AC;/* Hosting/primary/30 */
  --il-primary-dark: #E0E0FF;   /* Hosting/primary/90 */
  --il-on-primary: #0F0D13;

  --il-success: #B6F2AF; --il-success-bg: #18351b; --il-success-fg: #B6F2AF;
  --il-error: #FFB4AB;   --il-error-bg: #3a1512;   --il-error-fg: #FFDAD6;
  --il-warning: #FFDCBE; --il-warning-bg: #3a2a12; --il-warning-fg: #FFDCBE;
  --il-info: #A1EFFF;    --il-info-bg: #0c2e34;    --il-info-fg: #A1EFFF;
  --il-secondary: #C3C4E4;

  --il-bg: #0F0D13;        /* background.default */
  --il-surface: #0F0D13;   /* background.paper (== default) — cards/drawer/appbar flush, separated by borders */
  --il-surface-2: #1B1B1F; /* grey.100 — raised: table head, search, hovers */
  --il-text: #E4E1E6;      /* on surface */
  --il-text-2: #C7C5D0;    /* on surface variant */
  --il-muted: #91909A;     /* outline */
  --il-border: #211F26;    /* Hosting/neutral/12 - divider */
  --il-border-2: #2B2930;  /* Hosting/neutral/17 - surface container high */
  --il-track: #2B2930;     /* progress track dark (grey.300) */
  --il-progress-fill: var(--il-primary-light);  /* bar: primary.light in dark (#7A86FB) */
  --il-up: #5DC05E;   /* delta chip text: success.light (dark) */
  --il-down: #FF897D; /* delta chip text: error.light (dark) */
  /* Dark active nav: primary.main (pale lavender) bg + background.default text. */
  --il-nav-active-bg: #BDC2FF; /* primary.main */
  --il-nav-active-fg: #0F0D13; /* background.default */
  --il-shadow: 0 12px 16px -4px rgba(228,225,230,.08), 0 4px 6px -2px rgba(228,225,230,.03); /* overlay shadow (dark) */
  --il-shadow-sm: 0 1px 2px rgba(228,225,230,.07); /* section shadow (dark) */
}

/* Tone modifiers — set the active accent for chips/avatars/buttons/progress. */
.il-t-primary   { --il-tone: var(--il-primary);  --il-tone-bg: var(--il-primary-lighter); --il-tone-fg: var(--il-primary-dark); }
.il-t-secondary { --il-tone: var(--il-secondary); --il-tone-bg: var(--il-border-2);        --il-tone-fg: var(--il-text-2); }
.il-t-success   { --il-tone: var(--il-success);  --il-tone-bg: var(--il-success-bg);       --il-tone-fg: var(--il-success-fg); }
.il-t-error     { --il-tone: var(--il-error);    --il-tone-bg: var(--il-error-bg);         --il-tone-fg: var(--il-error-fg); }
.il-t-warning   { --il-tone: var(--il-warning);  --il-tone-bg: var(--il-warning-bg);       --il-tone-fg: var(--il-warning-fg); }
.il-t-info      { --il-tone: var(--il-info);     --il-tone-bg: var(--il-info-bg);          --il-tone-fg: var(--il-info-fg); }

/* ── Reset / base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* (mobile text auto-sizing reset intentionally omitted — cross-browser console noise) */
body {
  margin: 0;
  font-family: 'Archivo', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--il-bg);
  color: var(--il-text);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
.il-ic { width: 20px; height: 20px; flex: none; }

.il-skip {
  position: fixed; left: 12px; top: -60px; z-index: 200;
  background: var(--il-primary); color: var(--il-on-primary);
  padding: 8px 14px; border-radius: 8px; transition: top .2s;
}
.il-skip:focus { top: 12px; }

/* light/dark image swaps */
.il-only-dark { display: none; }
[data-il-theme="dark"] .il-only-dark { display: revert; }
[data-il-theme="dark"] .il-only-light { display: none; }
[data-il-theme="light"] .il-only-light { display: revert; }
[data-il-theme="light"] .il-only-dark { display: none; }

/* ── Drawer ────────────────────────────────────────────────────────────── */
.il-drawer {
  position: fixed; inset: 0 auto 0 0; width: var(--il-drawer-w);
  background: var(--il-surface); border-right: 1px solid var(--il-border);
  display: flex; flex-direction: column; z-index: 60;
  transition: transform .22s ease, width .22s ease;
}
.il-drawer-head {
  height: var(--il-appbar-h); flex: none; display: flex; align-items: center;
  justify-content: space-between; padding: 0 16px 0 20px;
  border-bottom: 1px solid var(--il-border);
}
.il-brand { display: inline-flex; align-items: center; }
.il-brand-mini { display: none; }
.il-nav { flex: 1; overflow-y: auto; padding: 14px 12px 28px; }
.il-nav::-webkit-scrollbar { width: 8px; }
.il-nav::-webkit-scrollbar-thumb { background: var(--il-border-2); border-radius: 8px; }
.il-nav-group { margin-bottom: 8px; }
.il-nav-caption {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--il-muted); padding: 14px 12px 6px;
}
.il-nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 12px; border-radius: 10px; color: var(--il-text-2);
  background: none; border: 0; text-align: left; font-size: 13.5px; font-weight: 500;
  transition: background .15s, color .15s;
}
.il-nav-item:hover { background: var(--il-surface-2); color: var(--il-text); }
[data-il-theme="dark"] .il-nav-item:hover { background: var(--il-surface-2); color: var(--il-text); }
.il-nav-item.il-active { background: var(--il-nav-active-bg); color: var(--il-nav-active-fg); }
/* Responsive content grids (inline styles can't carry a media query). */
.il-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.il-grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .il-grid-2, .il-grid-2-1 { grid-template-columns: 1fr; } }
/* The active item keeps its (high-contrast) colors on hover — the dark-theme hover
   rule above must NOT win and paint near-black active text on a dark hover bg. */
.il-nav-item.il-active:hover,
[data-il-theme="dark"] .il-nav-item.il-active:hover { background: var(--il-nav-active-bg); color: var(--il-nav-active-fg); }
[data-il-theme="dark"] .il-nav-sub .il-nav-item.il-active:hover { background: var(--il-surface-2); color: var(--il-primary); }
/* Sub-items (level 2): no pill, just primary-colored text (source listItemStyle). */
.il-nav-sub .il-nav-item.il-active { background: transparent; color: var(--il-primary); }
.il-nav-ic { display: inline-flex; align-items: center; justify-content: center; width: 22px; color: inherit; }
.il-nav-ic .il-ic { width: 20px; height: 20px; }
.il-nav-label { flex: 1; }
.il-nav-caret { display: inline-flex; transition: transform .2s; color: var(--il-muted); }
.il-nav-caret .il-ic { width: 16px; height: 16px; }
.il-nav-collapse.il-open > .il-nav-toggle .il-nav-caret { transform: rotate(180deg); }
.il-nav-sub { display: none; padding: 2px 0 2px 16px; margin-left: 10px; border-left: 1px solid var(--il-border); }
.il-nav-collapse.il-open > .il-nav-sub { display: block; }
.il-nav-bullet { position: relative; }
.il-nav-bullet::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--il-border-2); display: block; margin: auto;
}
.il-nav-item.il-active .il-nav-bullet::before { background: var(--il-primary); }

/* ── App bar ───────────────────────────────────────────────────────────── */
.il-appbar {
  position: fixed; top: 0; right: 0; left: var(--il-drawer-w); height: var(--il-appbar-h);
  background: color-mix(in srgb, var(--il-surface) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--il-border); z-index: 50;
  transition: left .22s ease;
}
.il-appbar-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px; }
.il-appbar-left, .il-appbar-right { display: flex; align-items: center; gap: 10px; }
.il-appbar-burger { display: none; }
.il-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; background: none; border: 0;
  color: var(--il-text-2); position: relative; transition: background .15s, color .15s;
}
.il-iconbtn:hover { background: var(--il-surface-2); color: var(--il-text); }
.il-has-badge .il-badge { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--il-error); border: 2px solid var(--il-surface); }

.il-crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.il-crumb { color: var(--il-muted); }
.il-crumb:hover { color: var(--il-text); }
.il-crumb.il-current { color: var(--il-text); font-weight: 600; }
.il-crumb-sep { display: inline-flex; color: var(--il-border-2); }
.il-crumb-sep .il-ic { width: 14px; height: 14px; }
.il-breadcrumb-mobile { display: none; }

.il-search {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
  background: var(--il-surface-2); border: 1px solid var(--il-border); border-radius: 10px;
  color: var(--il-muted); min-width: 260px;
}
.il-search input { flex: 1; background: none; border: 0; outline: none; color: var(--il-text); font-size: 13.5px; }
.il-search-ic { display: inline-flex; }
.il-kbd {
  font-size: 11px; padding: 2px 6px; border-radius: 6px; background: var(--il-surface);
  border: 1px solid var(--il-border); color: var(--il-muted);
}

/* Avatar */
.il-avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; font-weight: 600; font-size: 14px; background: var(--il-tone-bg); color: var(--il-tone-fg); overflow: hidden; }
.il-avatar--letter { background: var(--il-tone); color: var(--il-on-primary); }
.il-avatar--lg { width: 48px; height: 48px; }
.il-avatar--xl { width: 72px; height: 72px; font-size: 24px; }

/* Profile menu */
.il-profile-wrap { position: relative; }
.il-profile { display: flex; align-items: center; gap: 10px; padding: 5px 8px 5px 5px; border-radius: 12px; border: 0; background: none; color: var(--il-text); }
.il-profile:hover { background: var(--il-surface-2); }
.il-profile-meta { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.il-profile-name { font-weight: 600; font-size: 13px; }
.il-profile-role { font-size: 11.5px; color: var(--il-muted); }
.il-profile-caret { color: var(--il-muted); }
.il-profile-caret .il-ic { width: 16px; height: 16px; }
.il-menu {
  position: absolute; right: 0; top: calc(100% + 8px); width: 270px; padding: 8px;
  background: var(--il-surface); border: 1px solid var(--il-border); border-radius: 14px;
  box-shadow: var(--il-shadow); z-index: 80;
}
.il-menu[hidden] { display: none; }
.il-menu-head { display: flex; gap: 10px; align-items: center; padding: 8px 8px 12px; border-bottom: 1px solid var(--il-border); margin-bottom: 6px; }
.il-menu-ident { min-width: 0; }
.il-menu-name { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.il-menu-mail { font-size: 12px; color: var(--il-muted); }
.il-menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--il-text-2); font-size: 13.5px; }
.il-menu-item:hover { background: var(--il-surface-2); color: var(--il-text); }
.il-menu-lang { justify-content: flex-start; }
.il-menu-lang-text { display: flex; flex-direction: column; flex: 1; }
.il-menu-sub { font-size: 11.5px; color: var(--il-muted); }
.il-menu-flag { border-radius: 3px; width: 24px; height: 18px; }
.il-menu-div { height: 1px; background: var(--il-border); margin: 6px 0; }
.il-menu-exit { color: var(--il-error); }
.il-menu-exit:hover { background: var(--il-error-bg); }
.il-tag { font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 20px; background: var(--il-tone-bg); color: var(--il-tone-fg); }

/* ── Main ──────────────────────────────────────────────────────────────── */
.il-main { margin-left: var(--il-drawer-w); padding: 16px 24px 48px; min-height: 100vh; transition: margin-left .22s ease; }
.il-toolbar-spacer { height: var(--il-appbar-h); }
.il-container { max-width: 1266px; margin: 0 auto; } /* source Container maxWidth="lg" (breakpoints.lg) */
.il-stack { display: flex; flex-direction: column; gap: 24px; }
.il-row { display: flex; gap: 16px; align-items: center; }
.il-col { display: flex; flex-direction: column; gap: 16px; }
.il-wrap { display: flex; flex-wrap: wrap; gap: 12px; }
.il-justify-end { justify-content: flex-end; }
.il-scrim { position: fixed; inset: 0; background: rgba(8,8,12,.42); z-index: 55; }
.il-scrim[hidden] { display: none; }

/* Page heading */
.il-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.il-page-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.il-page-title { font-size: 24px; font-weight: 500; line-height: 28px; margin: 0; }
.il-page-sub { color: var(--il-muted); margin: 4px 0 0; }
.il-title-chip { display: inline-flex; align-items: center; gap: 8px; }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.il-card { background: var(--il-surface); border: 1px solid var(--il-border); border-radius: var(--il-radius); box-shadow: var(--il-shadow-sm); }
.il-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--il-border); }
.il-card-title { font-size: 16px; font-weight: 500; line-height: 20px; margin: 0; }
.il-card-body { padding: 22px; }

/* KPI grid */
/* Match the card grid: subtle section shadow (0 1px 2px / .07),
   NOT a heavy elevation. radius = 4 * card radius base = 16px. */
.il-kpi-grid { display: grid; grid-template-columns: repeat(var(--il-kpi-cols, 4), 1fr); background: var(--il-surface); border: 1px solid var(--il-border); border-radius: var(--il-radius); box-shadow: var(--il-shadow-sm); overflow: hidden; }
.il-kpi-cell { border-right: 1px solid var(--il-border); }
.il-kpi-cell:last-child { border-right: 0; }
.il-kpi { padding: 24px; display: flex; flex-direction: column; gap: 22px; }
.il-kpi-title { font-size: 14px; line-height: 18px; color: var(--il-text-2); font-weight: 500; }
/* Source: Stack gap 0.5 — value-row stacked over the compare caption (column). */
.il-kpi-main { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.il-kpi-valrow { display: flex; align-items: center; gap: 8px; }
.il-kpi-value { font-size: 24px; font-weight: 500; letter-spacing: 0; line-height: 28px; }
.il-kpi-compare { font-size: 12px; color: var(--il-muted); }
.il-kpi--tile { border: 1px solid var(--il-border); border-radius: var(--il-radius); }
/* Performance cards: value/target text + a horizontal target bar (green/red). */
.il-kpi--target { gap: 14px; }
.il-kpi-targetrow { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.il-kpi-textcol { display: flex; flex-direction: column; gap: 6px; }
.il-target-bar { position: relative; flex: 1; max-width: 170px; min-width: 80px; height: 10px; border-radius: 20px; background: var(--il-track); }
.il-target-bar > span { display: block; height: 100%; border-radius: 20px; background: var(--il-tone); }
.il-target-mark { position: absolute; top: -3px; width: 2px; height: 16px; border-radius: 2px; background: var(--il-text-2); }
.il-bignum { font-size: 24px; font-weight: 500; letter-spacing: 0; line-height: 28px; }

/* Chip */
.il-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 20px; background: var(--il-tone-bg); color: var(--il-tone-fg); }
.il-chip .il-ic { width: 14px; height: 14px; }
.il-chip--success { background: var(--il-success-bg); color: var(--il-success-fg); }
.il-chip--error { background: var(--il-error-bg); color: var(--il-error-fg); }
/* KPI delta chips (data-dir) are text-style: no fill, just colored arrow + %
   (source Chip variant="text"). Status/title chips keep the filled tonal look. */
.il-chip[data-dir] { background: transparent; padding: 0; gap: 3px; }
.il-chip--success[data-dir] { color: var(--il-up); }
.il-chip--error[data-dir] { color: var(--il-down); }

/* ── Chip showcase (/data-display/chip): variant + size matrix ───────────── */
/* Base .il-chip = "light" variant (tonal fill, tone text). Sizes drive the
   label typography/padding; variants restyle the fill/border. */
.il-chip-stack { display: flex; flex-direction: column; gap: 20px; }
.il-chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.il-chip--sm { font-size: 11px; padding: 1px 7px; }
.il-chip--lg { font-size: 13px; padding: 5px 11px; }
/* light text color follows the tone main (matches source paletteColor.main) */
.il-chip { color: var(--il-tone-fg); }
/* text variant: no fill, colored text only */
.il-chip--text { background: transparent; color: var(--il-tone); padding-left: 0; padding-right: 0; }
.il-chip--text.il-chip--success { background: transparent; color: var(--il-success); }
.il-chip--text.il-chip--error { background: transparent; color: var(--il-error); }
.il-chip--text.il-chip--warning { background: transparent; color: var(--il-warning); }
.il-chip--text.il-chip--info { background: transparent; color: var(--il-info); }
/* filled variant: solid tone fill, on-tone text */
.il-chip--filled { background: var(--il-tone); color: var(--il-on-primary); }
.il-chip--filled.il-chip--success { background: var(--il-success); color: var(--il-on-primary); }
.il-chip--filled.il-chip--error { background: var(--il-error); color: var(--il-on-primary); }
.il-chip--filled.il-chip--warning { background: var(--il-warning); color: var(--il-on-primary); }
.il-chip--filled.il-chip--info { background: var(--il-info); color: var(--il-on-primary); }
/* outlined variant: transparent fill, tone border + tone text */
.il-chip--outlined { background: transparent; color: var(--il-tone); border: 1px solid var(--il-tone); }
.il-chip--outlined.il-chip--success { background: transparent; color: var(--il-success); border-color: var(--il-success); }
.il-chip--outlined.il-chip--error { background: transparent; color: var(--il-error); border-color: var(--il-error); }
.il-chip--outlined.il-chip--warning { background: transparent; color: var(--il-warning); border-color: var(--il-warning); }
.il-chip--outlined.il-chip--info { background: transparent; color: var(--il-info); border-color: var(--il-info); }
/* tag variant: square-ish, thin tone border, tone text */
.il-chip--tag { background: transparent; border-radius: 6px; border: 1px solid var(--il-tone-bg); color: var(--il-tone); font-weight: 400; }
.il-chip--tag.il-chip--success { background: transparent; color: var(--il-success); border-color: var(--il-success-bg); }
.il-chip--tag.il-chip--error { background: transparent; color: var(--il-error); border-color: var(--il-error-bg); }
.il-chip--tag.il-chip--warning { background: transparent; color: var(--il-warning); border-color: var(--il-warning-bg); }
.il-chip--tag.il-chip--info { background: transparent; color: var(--il-info); border-color: var(--il-info-bg); }
.il-chip--tag.il-chip--default { background: transparent; color: var(--il-text-2); border-color: var(--il-border-2); }
/* chip inline avatar (image or small square inside a chip) */
.il-chip-av { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex: none; }
.il-chip--sm .il-chip-av { width: 16px; height: 16px; }
.il-chip--lg .il-chip-av { width: 20px; height: 20px; }
.il-chip--tag .il-chip-av { width: 18px; height: 18px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; background: var(--il-tone-bg); color: var(--il-tone-fg); }
.il-chip--tag.il-chip--default .il-chip-av { background: var(--il-border-2); color: var(--il-text-2); }
/* delete "x" (decorative inline svg, non-interactive) */
.il-chip-del { display: inline-flex; align-items: center; justify-content: center; line-height: 0; opacity: .8; }
.il-chip-del .il-ic { width: 14px; height: 14px; }

/* ── Tabs ──────────────────────────────────────────────────────────────── */
.il-tabs { margin-bottom: 4px; min-width: 0; max-width: 100%; } /* min-width:0 lets the scrollable tablist constrain to its container (no page overflow) */
.il-tablist { display: inline-flex; align-items: center; gap: 4px; }
/* Source page Tabs (scrollable) have NO full-width divider — only the active-tab
   indicator. Keep just the underline; no line spanning the whole tab row. */
.il-tabs--line .il-tablist, .il-tabs--nav .il-tablist { gap: 22px; width: 100%; }
.il-tabs--line .il-tab, .il-tabs--nav .il-tab {
  padding: 12px 2px; color: var(--il-muted); font-weight: 500; font-size: 14px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
/* Active page tab: subtle indicator like the source (indicator = text.primary,
   no bright accent fill). Only the current tab is highlighted. */
.il-tabs--line .il-tab[aria-selected="true"], .il-tabs--nav .il-tab[aria-selected="true"] { color: var(--il-text); border-bottom-color: var(--il-text); font-weight: 600; }
/* Segmented tabs — source override: joined bordered segments (border grey[200]),
   selected = grey[100] fill, body2 (14px), textTransform none, radius 8 on ends. */
.il-tabs--segmented .il-tablist { display: inline-flex; border-radius: 8px; background: none; border: 0; padding: 0; }
.il-tabs--full.il-tabs--segmented .il-tablist { width: 100%; }
.il-tabs--segmented .il-tab { flex: 1; padding: 9px 12px; font-size: 14px; font-weight: 400; text-transform: none; color: var(--il-text-2); background: none; border: 1px solid var(--il-border); border-radius: 0; }
.il-tabs--segmented .il-tab:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.il-tabs--segmented .il-tab:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.il-tabs--segmented .il-tab:not(:first-child) { border-left: 0; }
.il-tabs--segmented .il-tab[aria-selected="true"] { background: var(--il-surface-2); color: var(--il-text); font-weight: 500; }
.il-tabs--full .il-tablist { width: 100%; }
.il-tabpanel { padding-top: 12px; } /* source TabPanel pt:1.5 — separates tabs from content */
.il-tabpanel[hidden] { display: none; }

/* ── Analysis / charts ─────────────────────────────────────────────────── */
.il-analysis { padding: 20px 22px 26px; }
.il-analysis-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.il-analysis-title { font-size: 18px; font-weight: 500; line-height: 22px; margin: 0; }
.il-analysis-cap { color: var(--il-muted); margin: 4px 0 0; max-width: 460px; font-size: 13px; }
.il-legend { display: flex; flex-wrap: wrap; gap: 22px; margin: 18px 0 12px; }
.il-legend-item { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; color: var(--il-text-2); font-size: 13px; }
.il-legend-item[aria-pressed="false"] { opacity: .4; }
.il-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.il-analysis-body { margin-top: 6px; }
.il-chart { width: 100%; height: 280px; overflow: visible; }
/* Interactive Chart.js canvas (dashboard analytics only). */
.il-chart-canvas-wrap { position: relative; width: 100%; margin-top: 8px; }
.il-chart-canvas-wrap canvas { display: block; width: 100% !important; }
.il-chart-grid { stroke: var(--il-border); stroke-width: 1; }
.il-chart-axis { fill: var(--il-muted); font-size: 11px; }
.il-chart-axis-title { fill: var(--il-muted); font-size: 11px; }
.il-chart-pct { fill: var(--il-text); font-weight: 600; }

/* Progress + radial */
.il-prog-card { display: flex; flex-direction: column; gap: 8px; }
.il-prog-stack { display: flex; flex-direction: column; gap: 14px; }
.il-prog-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.il-prog-label { color: var(--il-text); font-size: 14px; line-height: 18px; }
.il-prog-value { font-weight: 500; font-size: 16px; line-height: 20px; }
.il-progress { display: block; height: 6px; border-radius: 24px; background: var(--il-track); overflow: hidden; }
.il-progress > span { display: block; height: 100%; border-radius: 24px; background: var(--il-progress-fill); opacity: .6; }
.il-radial-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.il-radial { display: block; width: 140px; height: 140px; }
/* track + value are <circle>/<text>: fill:none on the ring, fill on the label.
   The arc's rotation is handled inline (transform on the value circle) — do NOT
   rotate the whole <svg> or the arc + label get double-rotated/distorted. */
.il-radial-track { fill: none; stroke: var(--il-track); stroke-width: 12; }
.il-radial-val { fill: var(--il-text); stroke: none; font-weight: 700; font-size: 22px; }
.il-num, .il-radial-pct { font-weight: 700; }

/* ── Tables ────────────────────────────────────────────────────────────── */
.il-table-wrap { overflow-x: auto; border: 1px solid var(--il-border); border-radius: var(--il-radius); background: var(--il-surface); }
.il-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.il-table th, .il-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--il-border); white-space: nowrap; }
.il-table thead th { color: var(--il-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; background: var(--il-surface-2); }
.il-table tbody tr { transition: background-color .15s ease; }
.il-table tbody tr:hover { background: var(--il-surface-2); }
/* Smooth hover for every interactive element (parity with the reference admin —
   instant state changes read as broken/cheap). One rule, no per-component edits. */
.il-iconbtn, .il-nav-item, .il-menu-item, .il-menu-exit, .il-tab, .il-link,
.il-row-action, .il-crumb, .il-chip, .il-option, .il-dd-control, .il-dd-opt,
.il-dd-mi, .il-legend-item, .il-profile, .il-card, .il-kpi-cell {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
/* Subtle card lift on hover (reference admin behaviour). */
.il-card:hover { border-color: var(--il-border-2); box-shadow: var(--il-shadow); }
.il-table tbody tr:last-child td { border-bottom: 0; }
.il-user-cell { display: flex; align-items: center; gap: 12px; }
.il-user-name { font-weight: 600; }
.il-user-mail { color: var(--il-muted); font-size: 12.5px; }
.il-check-cell { width: 44px; }
.il-list { display: flex; flex-direction: column; gap: 2px; }
.il-list-meta { color: var(--il-muted); font-size: 12.5px; }

/* ── Behavior page 1:1 ─────────────────────────────────────────────────── */
.il-analysis-tools { display: flex; align-items: center; gap: 10px; flex: none; }
.il-datepick { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--il-border); border-radius: 8px; font-size: 13px; color: var(--il-text-2); white-space: nowrap; }
.il-iconbtn--outlined { width: 38px; height: 38px; border: 1px solid var(--il-border-2); }
.il-iconbtn--outlined:hover { border-color: var(--il-primary); color: var(--il-primary); background: none; }
.il-kpi--note { justify-content: center; }
.il-kpi-note { margin: 0; font-size: 14px; line-height: 20px; color: var(--il-text-2); }
.il-up-text { color: var(--il-up); font-weight: 600; }
.il-down-text { color: var(--il-down); font-weight: 600; }
.il-table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--il-border); }
.il-search--table { flex: 1; max-width: 320px; min-width: 0; border: 0; background: none; padding: 0; height: 40px; }
.il-table-wrap--flush { border: 0; border-radius: 0; box-shadow: none; }
.il-row-action { width: 52px; text-align: right; }
.il-device-chart { display: flex; align-items: stretch; justify-content: space-around; gap: 18px; height: 240px; padding: 18px 18px 6px; }
.il-device-col { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; max-width: 96px; }
.il-device-pct { font-size: 13px; font-weight: 600; color: var(--il-text); }
.il-device-track { flex: 1 1 auto; width: 100%; min-height: 0; display: flex; align-items: flex-end; }
.il-device-fill { width: 100%; border-radius: 8px 8px 0 0; min-height: 6px; background: linear-gradient(180deg, var(--il-primary) 0%, color-mix(in srgb, var(--il-primary) 12%, transparent) 100%); }
.il-device-label { font-size: 12.5px; color: var(--il-muted); }

/* ── Billing: plan card + invoice table ────────────────────────────────── */
.il-plan-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; flex-wrap: wrap; }
.il-plan-left { display: flex; align-items: center; gap: 16px; }
.il-plan-avatar { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--il-primary-lighter); color: var(--il-primary-dark); flex: none; }
.il-plan-info { display: flex; flex-direction: column; gap: 8px; }
.il-plan-title { margin: 0; font-size: 18px; font-weight: 400; line-height: 22px; }
.il-plan-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.il-plan-right { display: flex; align-items: center; gap: 20px; }
.il-plan-price { display: flex; align-items: flex-end; gap: 4px; }
.il-plan-amount { font-size: 28px; font-weight: 500; line-height: 32px; }
.il-plan-cycle { color: var(--il-muted); font-size: 14px; padding-bottom: 3px; }
.il-table-actions { display: flex; align-items: center; gap: 8px; }
.il-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--il-text-2); }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.il-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 4px; }
.il-field-inline { flex-direction: row; align-items: center; gap: 10px; }
.il-label { font-size: 13px; font-weight: 500; color: var(--il-text-2); }
/* Text input: radius 8, padding 10, border=divider, focus=primary, hover=grey600. */
.il-input-wrap { display: flex; align-items: center; gap: 8px; background: var(--il-surface); border: 1px solid var(--il-border); border-radius: 8px; padding: 0 10px; transition: border-color .15s, box-shadow .15s; }
.il-input-wrap:hover { border-color: var(--il-muted); }
.il-input-wrap:focus-within { border-color: var(--il-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--il-primary) 18%, transparent); }
.il-input { flex: 1; border: 0; outline: none; background: none; color: var(--il-text); font-size: 14px; line-height: 18px; height: 42px; min-width: 0; }
.il-input-end, .il-input-pre { display: inline-flex; align-items: center; color: var(--il-muted); background: none; border: 0; }
.il-pw-toggle { padding: 4px; }
.il-range { width: 100%; accent-color: var(--il-primary); }

/* Buttons */
/* Source Button: medium height 42, radius 8, fontSize 14/18, capitalize, weight 500. */
.il-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 8px; font-size: 14px; line-height: 18px; font-weight: 500; text-transform: capitalize; border: 1px solid transparent; transition: filter .15s, background .15s, border-color .15s; }
.il-btn--filled { background: var(--il-tone); color: var(--il-on-primary); }
.il-btn--filled:hover { filter: brightness(.94); }
.il-btn--tonal { background: var(--il-tone-bg); color: var(--il-tone-fg); }
.il-btn--outlined { background: none; border-color: var(--il-border-2); color: var(--il-text); }
.il-btn--outlined:hover { border-color: var(--il-tone); color: var(--il-tone); }
.il-btn--text { background: none; color: var(--il-tone); padding: 0 10px; }
.il-link { color: var(--il-primary); font-weight: 600; }
.il-link:hover { color: var(--il-primary-dark); text-decoration: underline; }
.il-link--danger { color: var(--il-error); }

/* Switch / check / radio (showcase) */
.il-switch { position: relative; display: inline-block; width: 42px; height: 24px; }
.il-switch-track { display: block; width: 100%; height: 100%; border-radius: 20px; background: var(--il-border-2); position: relative; transition: background .2s; }
.il-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: var(--il-shadow-sm); }
.il-switch input { display: none; }
.il-switch input:checked + .il-switch-track { background: var(--il-primary); }
.il-switch input:checked + .il-switch-track::after { transform: translateX(18px); }
.il-check, .il-radio { display: inline-flex; align-items: center; gap: 8px; }
.il-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--il-tone); display: inline-block; }

/* OTP */
.il-otp { display: flex; gap: 10px; }
.il-otp-box { width: 52px; height: 56px; text-align: center; font-size: 22px; font-weight: 700; border: 1px solid var(--il-border-2); border-radius: 12px; background: var(--il-surface); color: var(--il-text); }

/* ── Showcase odds & ends ──────────────────────────────────────────────── */
.il-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.il-grid-3-1 { display: grid; grid-template-columns: 3fr 1fr; gap: 24px; }
.il-grid-8-4 { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
/* Top referrers/pages/sources — source is ONE bordered+rounded card with three
   internal-divided columns (applyBorderWithRadius), NOT separate gapped columns. */
.il-ref-grid { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--il-surface); border: 1px solid var(--il-border); border-radius: var(--il-radius); box-shadow: var(--il-shadow-sm); overflow: hidden; }
.il-ref-col { display: flex; flex-direction: column; gap: 22px; padding: 24px; border-right: 1px solid var(--il-border); }
.il-ref-col:last-child { border-right: 0; }
.il-ref-title { margin: 0; font-size: 16px; font-weight: 500; line-height: 20px; }
@media (max-width: 1024px) {
  .il-ref-grid { grid-template-columns: 1fr 1fr; }
  .il-ref-col:nth-child(2) { border-right: 0; }
  .il-ref-col:nth-child(1), .il-ref-col:nth-child(2) { border-bottom: 1px solid var(--il-border); }
}
@media (max-width: 640px) {
  .il-ref-grid { grid-template-columns: 1fr; }
  .il-ref-col { border-right: 0; border-bottom: 1px solid var(--il-border); }
  .il-ref-col:last-child { border-bottom: 0; }
}
.il-swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.il-swatch { border: 1px solid var(--il-border); border-radius: 12px; overflow: hidden; background: var(--il-surface); }
.il-swatch-chip { height: 64px; }
.il-swatch-name { font-weight: 600; padding: 8px 10px 2px; font-size: 13px; }
.il-swatch-var { font-size: 11.5px; color: var(--il-muted); padding: 0 10px 10px; }
.il-shadow-tile { height: 120px; border-radius: 14px; background: var(--il-surface); display: flex; align-items: center; justify-content: center; color: var(--il-muted); }
.il-type-row { display: flex; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--il-border); }
.il-type-meta { color: var(--il-muted); font-size: 12px; min-width: 90px; }
/* Exact source type scale (Archivo). Headings are weight 500, not bold;
   letterSpacing 0 everywhere. */
.il-type-h1 { font-size: 40px; font-weight: 500; line-height: 44px; }
.il-type-h2 { font-size: 32px; font-weight: 500; line-height: 36px; }
.il-type-h3 { font-size: 28px; font-weight: 500; line-height: 32px; }
.il-type-h4 { font-size: 24px; font-weight: 500; line-height: 28px; }
.il-type-h5 { font-size: 20px; font-weight: 500; line-height: 24px; }
.il-type-h6 { font-size: 18px; font-weight: 500; line-height: 22px; }
.il-type-body1 { font-size: 16px; font-weight: 400; line-height: 20px; }
.il-type-body2 { font-size: 14px; font-weight: 400; line-height: 18px; color: var(--il-text-2); }
.il-type-sample { font-weight: 500; }
.il-tip { position: relative; display: inline-block; background: var(--il-text); color: var(--il-surface); padding: 6px 10px; border-radius: 8px; font-size: 12px; }
.il-snack { display: inline-flex; align-items: center; gap: 10px; background: var(--il-text); color: var(--il-surface); padding: 12px 16px; border-radius: 12px; font-size: 13.5px; }
.il-dialog, .il-dialog-demo { border: 1px solid var(--il-border); border-radius: 16px; background: var(--il-surface); box-shadow: var(--il-shadow); padding: 22px; max-width: 440px; }
.il-steps { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.il-steps li { display: inline-flex; align-items: center; gap: 6px; color: var(--il-muted); }
.il-steps .il-active { color: var(--il-text); font-weight: 600; }
.il-help { color: var(--il-muted); font-size: 12.5px; }
.il-done { color: var(--il-success); }
.il-consent { display: flex; gap: 12px; align-items: flex-start; padding: 11px; border: 1px solid var(--il-border); border-radius: 12px; }
.il-consent-text { font-size: 13px; color: var(--il-text-2); }

/* Calendar */
.il-cal { border: 1px solid var(--il-border); border-radius: 16px; overflow: hidden; background: var(--il-surface); max-width: 360px; }
.il-cal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; font-weight: 600; }
.il-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.il-cal-dow { text-align: center; font-size: 11px; color: var(--il-muted); padding: 6px 0; }
.il-cal-day { text-align: center; padding: 9px 0; font-size: 13px; border-radius: 8px; }
.il-cal-day.il-today { background: var(--il-primary); color: var(--il-on-primary); }

/* Dropzone / editor */
.il-dropzone { border: 2px dashed var(--il-border-2); border-radius: 16px; padding: 40px; text-align: center; color: var(--il-muted); background: var(--il-surface-2); }
.il-editor { border: 1px solid var(--il-border); border-radius: 14px; overflow: hidden; background: var(--il-surface); }
.il-editor-toolbar { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--il-border); background: var(--il-surface-2); }
.il-editor-btn { width: 32px; height: 32px; border-radius: 8px; border: 0; background: none; color: var(--il-text-2); }
.il-editor-btn:hover { background: var(--il-border); }
.il-editor-area { padding: 16px; min-height: 160px; }
.il-color { width: 100%; height: 44px; border: 1px solid var(--il-border-2); border-radius: 10px; background: none; }
.il-map-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--il-text-2); align-items: center; }
.il-map-legend span { display: inline-flex; align-items: center; gap: 6px; }
/* Brazil choropleth (Sale Mapping equivalent), colored by heat level. */
.il-br-wrap { display: flex; justify-content: center; padding: 8px 0 4px; }
.il-br-map { width: 100%; max-width: 380px; height: auto; }
.il-br { stroke: var(--il-surface); stroke-width: 0.7; transition: filter .15s; cursor: default; }
.il-br:hover { filter: brightness(1.08); }
.il-br--muito-alto { fill: var(--il-primary); }
.il-br--alto { fill: var(--il-primary-light); }
.il-br--medio { fill: var(--il-primary-lighter); }

/* Blog */
.il-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.il-blog-card { border: 1px solid var(--il-border); border-radius: 16px; overflow: hidden; background: var(--il-surface); box-shadow: var(--il-shadow-sm); }
.il-blog-cover { aspect-ratio: 16/9; background: var(--il-surface-2); }
.il-blog-body { padding: 16px 18px 20px; }
.il-blog-meta { color: var(--il-muted); font-size: 12px; margin-bottom: 6px; }
/* Blog list table cells */
.il-blog-cell { display: flex; align-items: center; gap: 12px; max-width: 440px; }
.il-blog-thumb { width: 56px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; background: var(--il-surface-2); }
.il-blog-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.il-blog-row-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.il-blog-row-cap { color: var(--il-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }

/* Account / settings rows */
.il-account-head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.il-set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--il-border); }
.il-set-label { font-weight: 500; }
.il-set-action { color: var(--il-muted); }
.il-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--il-surface-2); }
.il-profile-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.il-phone { display: flex; gap: 8px; }
.il-navcard { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 16px; background: var(--il-primary-lighter); color: var(--il-primary-dark); }
.il-navcard-title { font-weight: 700; }
.il-navcard-text { font-size: 12.5px; }
.il-navcard-btn { align-self: flex-start; }

/* Empty / animate */
.il-empty { display: flex; align-items: center; justify-content: center; min-height: 280px; padding: 40px; text-align: center; }
.il-empty-body { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.il-empty-title { font-size: 20px; font-weight: 500; line-height: 24px; margin: 0; }
.il-empty-sub { color: var(--il-muted); max-width: 420px; margin: 0; }
.il-empty-art { color: var(--il-border-2); }
.il-anim-lift, .il-anim-pop, .il-anim-slide, .il-anim-tile { transition: transform .25s ease, box-shadow .25s ease; }
.il-anim-lift:hover { transform: translateY(-6px); box-shadow: var(--il-shadow); }
.il-anim-pop:hover { transform: scale(1.04); }
.il-anim-slide:hover { transform: translateX(6px); }

/* ── Auth ──────────────────────────────────────────────────────────────── */
.il-auth-body { background: var(--il-surface); }
/* Reference auth layout: form block lg:7 (≈58%) + hero block lg:5 (≈42%). */
.il-auth-split { display: grid; grid-template-columns: 7fr 5fr; min-height: 100vh; }
.il-auth-form-panel { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 36px clamp(24px, 5vw, 56px); background: #0F1014; color: var(--il-text); }
/* Every auth field fill is #0F0D13 (the visible box is .il-input-wrap; .il-input is
   transparent on top of it). Covers text, e-mail, phone (incl. the +55 prefix) and
   password inputs across all /auth/* pages. */
.il-auth-form-panel .il-input-wrap { background: #0F0D13; }
/* The form block AND the footer share one centered 420px column, so the title,
   the "Cadastre-se" line, the fields and the © credits all line up on the same
   left/right edges (margin:auto 0 = vertical centering; align-items:center = same
   horizontal box for both children). */
.il-auth-inner { width: 100%; max-width: 458px; margin: auto 0; }
/* Reference auth header is CENTERED (textAlign:center): the heading + the
   "Já tem conta / Ainda não tem conta" line are centered above the form. */
.il-auth-head { margin-bottom: 22px; text-align: center; }
.il-auth-title { font-size: 32px; font-weight: 500; line-height: 36px; margin: 0 0 8px; }
.il-auth-sub { color: var(--il-muted); margin: 0; }
.il-auth-sub2 { color: var(--il-muted); margin: 14px 0 0; }
.il-auth-strong { font-weight: 600; color: var(--il-text); }
.il-auth-form { display: flex; flex-direction: column; gap: 13px; }
.il-auth-form .il-field { gap: 6px; margin: 0; }
.il-forgot { align-self: flex-end; font-size: 12.5px; }
.il-auth-submit { width: 100%; margin-top: 6px; }
.il-authcopy { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; width: 100%; max-width: 458px; margin-top: 22px; font-size: 12px; color: var(--il-muted); }
.il-authcopy-link:hover { color: var(--il-text); text-decoration: underline; }
/* Reference hero block: flat #0F1014 panel, logo + tagline centered at the
   TOP, then the product screenshot anchored to the BOTTOM-RIGHT — it bleeds off the
   right + bottom edges and carries a 4px border + 24px radius on the TOP-LEFT corner
   ONLY ("rising in from the corner"). Source: trial-admin AuthLayout. */
.il-auth-hero-panel { background: #1B1B1F; display: flex; flex-direction: column; padding: 56px 0 0; overflow: hidden; border-left: 1px solid var(--il-border); }
.il-auth-hero-head { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 0 32px; }
.il-auth-tagline { margin: 0; max-width: 400px; text-align: center; color: var(--il-text-2); font-size: 15px; line-height: 1.5; }
.il-auth-hero-frame { margin: 48px 0 0 48px; flex: 1 1 auto; min-height: 0; border: 4px solid var(--il-border-2); border-bottom: 0; border-right: 0; border-top-left-radius: 24px; overflow: hidden; }
/* object-fit:cover + object-position:left top → the top-LEFT (sidebar + header) stays
   pinned; the right + bottom bleed off the panel edge (the intended look). */
.il-auth-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: none; }
/* The hero panel is ALWAYS dark → show the DARK dashboard screenshot (cohesive
   with the dark panel; this is the reference design). Panel-scoped so the light
   <body> wrapper does NOT also surface the light variant — that bug stacked BOTH
   images (a light dashboard above the dark one). Exactly one renders now. */
.il-auth-hero-panel .il-hero-dark { display: block; }
.il-auth-hero-panel .il-hero-light { display: none; }
/* The hero panel is ALWAYS dark → its logo is the WHITE (dark-variant) mark.
   Panel-scoped + higher specificity than the body rules, so the light <body>
   can't show the dark-ink logo on the dark panel (which rendered faded). */
.il-auth-hero-panel[data-il-theme="dark"] .il-only-dark { display: revert; }
.il-auth-hero-panel[data-il-theme="dark"] .il-only-light { display: none; }
.il-auth-hero-panel[data-il-theme="light"] .il-only-light { display: revert; }
.il-auth-hero-panel[data-il-theme="light"] .il-only-dark { display: none; }

/* ── Error pages ───────────────────────────────────────────────────────── */
.il-error-body { background: var(--il-bg); }
.il-error { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.il-error-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.il-error-code { font-size: 72px; font-weight: 800; color: var(--il-primary); line-height: 1; }
.il-error-msg { color: var(--il-text-2); font-size: 16px; margin: 0; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .il-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .il-kpi-cell:nth-child(2) { border-right: 0; }
  .il-grid-2, .il-grid-3-1, .il-grid-8-4, .il-profile-edit { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .il-auth-split { grid-template-columns: 1fr; }
  .il-auth-hero-panel { display: none; }
}
@media (max-width: 768px) {
  body[data-il-drawer] .il-drawer { transform: translateX(-100%); }
  body[data-il-drawer="mobile-open"] .il-drawer { transform: translateX(0); }
  .il-appbar { left: 0; }
  .il-main { margin-left: 0; }
  .il-appbar-burger { display: inline-flex; }
  .il-appbar-crumbs { display: none; }
  .il-breadcrumb-mobile { display: block; padding: 12px 0; border-bottom: 1px solid var(--il-border); margin-bottom: 16px; }
  .il-search { min-width: 0; width: 40px; padding: 0; justify-content: center; }
  .il-search input, .il-kbd { display: none; }
  .il-profile-meta { display: none; }
}

/* Drawer collapsed (mini) — desktop toggle */
body[data-il-drawer="collapsed"] .il-drawer { width: var(--il-drawer-mini); }
body[data-il-drawer="collapsed"] .il-drawer .il-brand-full,
body[data-il-drawer="collapsed"] .il-nav-label,
body[data-il-drawer="collapsed"] .il-nav-caret,
body[data-il-drawer="collapsed"] .il-nav-caption { display: none; }
body[data-il-drawer="collapsed"] .il-drawer .il-brand-mini { display: inline-flex; }
body[data-il-drawer="collapsed"] .il-appbar { left: var(--il-drawer-mini); }
body[data-il-drawer="collapsed"] .il-main { margin-left: var(--il-drawer-mini); }
@media (max-width: 768px) { body[data-il-drawer="collapsed"] .il-appbar, body[data-il-drawer="collapsed"] .il-main { left: 0; margin-left: 0; } }

/* ── Settings (Configurações) tabs ─────────────────────────────────────── */
/* Profile — login-service media tile */
.il-set-media { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; background: var(--il-surface-2); border: 1px solid var(--il-border); flex: none; }

/* General — split layout (title/caption 4-col + content 8-col, vertical divider, mirrors source SettingCard) */
.il-set-split { display: grid; grid-template-columns: 4fr 8fr; }
.il-set-split + .il-set-split { border-top: 1px solid var(--il-border); }
.il-set-split-head { padding: 24px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--il-border); }
.il-set-split-body { padding: 0 24px; }
.il-set-split-body > .il-set-row:last-child { border-bottom: 0; }
.il-set-note { background: var(--il-surface-2); margin: 0 -24px; padding: 16px 24px; border-top: 1px solid var(--il-border); font-size: 13px; }

/* Pricing — overlapped avatar group + feature on/off cell */
.il-set-avatars { display: inline-flex; align-items: center; }
.il-set-avatars img { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--il-surface); object-fit: cover; background: var(--il-surface-2); margin-left: -8px; }
.il-set-avatars img:first-child { margin-left: 0; }
.il-set-avatars-more { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--il-surface); background: var(--il-tone-bg); color: var(--il-tone-fg); font-size: 11.5px; font-weight: 600; margin-left: -8px; }
.il-set-feat { display: inline-flex; align-items: center; gap: 8px; }
.il-set-feat .il-ic { color: var(--il-muted); }
.il-set-feat--on .il-ic { color: var(--il-success); }
.il-set-feat--off { color: var(--il-muted); }

/* Internationalization — add-language empty state + language list rows */
.il-set-addlang { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; text-align: center; padding: 16px 0; }
.il-set-addlang-art { color: var(--il-primary); width: 200px; height: 150px; }
.il-set-addlang-art svg { width: 100%; height: 100%; }
.il-set-lang-list { display: flex; flex-direction: column; }
.il-set-lang-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 20px; border-bottom: 1px solid var(--il-border); }
.il-set-lang-row:last-child { border-bottom: 0; }

/* Authentication — setting row text block */
.il-set-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.il-set-desc { color: var(--il-text-2); font-size: 14px; line-height: 18px; }

@media (max-width: 1024px) {
  .il-set-split { grid-template-columns: 1fr; }
  .il-set-split-head { border-right: 0; border-bottom: 1px solid var(--il-border); }
}

/* ── Tables / lists / pagination / filter chips (core pages 1:1) ──────────── */
.il-chip--warning { background: var(--il-warning-bg); color: var(--il-warning-fg); }
.il-chip--info { background: var(--il-info-bg); color: var(--il-info-fg); }
.il-acc-divider { width: 1px; height: 18px; background: var(--il-border-2); flex: none; }
.il-acc-chips { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow-x: auto; max-width: 240px; }
.il-acc-chip { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.il-acc-chip .il-ic { cursor: default; opacity: .7; }
.il-acc-clear { color: var(--il-error); font-weight: 500; height: 42px; padding: 0 8px; background: none; border: 0; }
.il-acc-ban { color: var(--il-error); display: inline; vertical-align: -2px; margin-left: 6px; }
.il-acc-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 24px; padding: 12px 18px; border-top: 1px solid var(--il-border); }
.il-acc-legend { gap: 6px; align-items: center; color: var(--il-error); }
.il-acc-legend .il-help { color: var(--il-muted); }
.il-tb-divider { width: 1px; height: 18px; background: var(--il-border-2); flex: none; }
.il-checkbox { display: inline-block; width: 18px; height: 18px; border: 1.5px solid var(--il-border-2); border-radius: 4px; background: var(--il-surface); vertical-align: middle; }
.il-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 24px; padding: 12px 18px; border-top: 1px solid var(--il-border); font-size: 13px; color: var(--il-text-2); }
.il-pagination-rows { color: var(--il-muted); }
.il-pagination-nav { display: flex; align-items: center; gap: 8px; }
.il-pagination-count { color: var(--il-muted); margin-right: 6px; }
.il-pagination .il-iconbtn[disabled] { opacity: .35; }
.il-vr { width: 1px; height: 18px; background: var(--il-border); flex: none; margin: 0 2px; }
.il-filter-chips { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow-x: auto; }
.il-filter-chips .il-tag { display: inline-flex; align-items: center; gap: 4px; }
.il-user-name .il-user-mail { display: block; font-weight: 400; }
.il-blog-text { position: relative; display: flex; flex-direction: column; gap: 2px; padding-bottom: 2px; }
.il-blog-draft { position: absolute; bottom: -8px; left: 0; padding: 1px 8px; font-size: 10.5px; line-height: 16px; background: var(--il-info-bg, var(--il-tone-bg)); color: var(--il-info-fg, var(--il-tone-fg)); }
.il-blog-thumb--empty { display: inline-flex; align-items: center; justify-content: center; color: var(--il-muted); }
.il-table-foot { display: flex; align-items: center; justify-content: flex-end; gap: 20px; padding: 12px 18px; border-top: 1px solid var(--il-border); color: var(--il-muted); font-size: 13px; }
.il-table-foot-nav { display: flex; align-items: center; gap: 8px; }
.il-table-foot-range { font-size: 13px; }
.il-iconbtn[disabled] { opacity: .4; pointer-events: none; }
.il-tag .il-chip-x { display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; line-height: 0; }
.il-role-cell { display: inline-flex; align-items: center; gap: 8px; }
.il-role-more { border: 1px solid var(--il-border-2); background: transparent; color: var(--il-muted); cursor: pointer; }
.il-pager { display: flex; align-items: center; justify-content: flex-end; gap: 18px; padding: 12px 18px; border-top: 1px solid var(--il-border); }
.il-pager-rows, .il-pager-info { color: var(--il-muted); font-size: 12.5px; }
.il-pager-nav { display: flex; align-items: center; gap: 4px; }
.il-filter-panel { max-width: 360px; margin-left: auto; }
.il-filter-panel .il-list { display: flex; flex-direction: column; gap: 6px; }
.il-rp-center { text-align: center !important; }
.il-rp-chip { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; }
.il-rp-chip--yes { background: var(--il-success-bg); color: var(--il-success-fg); }
.il-rp-chip--no { background: var(--il-error-bg); color: var(--il-error-fg); }
.il-rp-chip .il-ic { width: 16px; height: 16px; }
.il-check-box { display: inline-block; width: 18px; height: 18px; border: 1.5px solid var(--il-border-2); border-radius: 4px; background: var(--il-surface); vertical-align: middle; }
.il-rp-divider { display: inline-block; width: 1px; height: 18px; background: var(--il-border-2); margin: 0 4px; }
.il-pagination-rpp { display: inline-flex; align-items: center; gap: 8px; color: var(--il-muted); }
.il-pagination-rpp-val { color: var(--il-text); font-weight: 600; }
.il-pagination-info { color: var(--il-muted); }
.il-pagination-nav .il-iconbtn { width: 34px; height: 34px; }
.il-pagination-nav .il-iconbtn[disabled] { opacity: .4; cursor: default; }

/* ── Showcase components (data-display / feedback / inputs / utils / plugins) ── */
/* Avatar showcase — size variants matching source AvatarSize enum (px) */ .il-avatar--badge { width: 20px; height: 20px; font-size: 10px; }
.il-avatar--xxs { width: 24px; height: 24px; font-size: 11px; }
.il-avatar--xs { width: 32px; height: 32px; font-size: 12px; }
.il-avatar--sm { width: 40px; height: 40px; font-size: 13px; }
.il-avatar--md { width: 48px; height: 48px; font-size: 14px; }
/* Avatar showcase layout */ .il-avatar-stack { gap: 20px; }
.il-avatar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* Success status dot badge wrapper (overlap=circular, variant=dot, bottom-right) */ .il-badge-dot { position: relative; display: inline-flex; }
.il-badge-dot-pt { position: absolute; right: 2px; bottom: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--il-success); border: 2px solid var(--il-surface); box-sizing: border-box; }
.il-illus-head { display: flex; justify-content: center; padding: 10px 0; }
.il-illus-title { font-size: 18px; font-weight: 500; line-height: 24px; margin: 0; color: var(--il-text); }
.il-illus-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.il-illus-tile { padding: 10px; }
.il-doodle-body { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px; }
.il-doodle { width: 100%; height: auto; max-height: 150px; color: var(--il-text); }
.il-doodle-name { font-size: 12px; line-height: 16px; color: var(--il-text-2); text-align: center; }
@media (max-width: 1100px) { .il-illus-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 640px) { .il-illus-grid { grid-template-columns: 1fr; } }
/* dd_tooltip showcase — static tooltip bubbles attached to triggers */ .il-tip-section-title { font-weight: 400; margin: 0 0 4px; }
.il-tip-rows { gap: 20px; }
/* pair = trigger + a statically-visible tooltip bubble (interactive popper rendered as static structure) */ .il-tip-pair { position: relative; display: inline-flex; }
.il-tip-pair--right { align-items: center; gap: 12px; }
.il-tip-pair--top { align-items: flex-start; }
/* arrow on the bubble */ .il-tip--right::before, .il-tip--top::before { content: ""; position: absolute; width: 8px; height: 8px; background: var(--il-text); transform: rotate(45deg); }
.il-tip--right::before { left: -4px; top: 50%; margin-top: -4px; }
.il-tip--top { position: absolute; left: 0; bottom: calc(100% + 8px); white-space: nowrap; z-index: 1; box-shadow: var(--il-shadow); }
.il-tip--top::before { left: 16px; bottom: -4px; }
/* icon tooltip: inline icon + text + icon */ .il-tip-icon { display: inline-flex; align-items: center; gap: 6px; }
.il-tip-icon .il-ic { flex: none; }
/* content tooltip: leading icon + title/subtitle stack */ .il-tip-content { display: inline-flex; align-items: flex-start; gap: 8px; max-width: 280px; white-space: normal; padding: 8px 10px; }
.il-tip-content .il-ic { flex: none; margin-top: 1px; }
.il-tip-content-text { display: inline-flex; flex-direction: column; gap: 3px; }
.il-tip-content-title { font-size: 12px; line-height: 16px; }
.il-tip-content-sub { font-size: 11px; line-height: 15px; opacity: .7; }
/* dd_typography — source MainCard grid (title+label | weight + Font Size/Line Height/Letter Spacing trio | live specimen) */ .il-type-section { display: flex; flex-direction: column; gap: 16px; }
.il-type-heading { font-size: 16px; font-weight: 500; line-height: 20px; margin: 0; color: var(--il-text); }
.il-type-grid { display: grid; grid-template-columns: 2fr 4fr 6fr; gap: 20px; align-items: start; }
.il-type-info { display: flex; flex-direction: column; gap: 4px; }
.il-type-name { font-size: 24px; font-weight: 500; line-height: 28px; color: var(--il-text); }
.il-type-tag { font-size: 14px; line-height: 18px; color: var(--il-text-2); }
.il-type-detail { display: flex; flex-direction: column; gap: 18px; }
.il-type-weight { font-size: 16px; font-weight: 500; line-height: 20px; color: var(--il-text); }
.il-type-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.il-type-spec { display: flex; flex-direction: column; gap: 4px; }
.il-type-spec-label { font-size: 14px; line-height: 18px; color: var(--il-text-2); }
.il-type-spec-val { font-size: 16px; font-weight: 500; line-height: 20px; color: var(--il-text); }
.il-type-specimen { min-width: 0; display: flex; align-items: center; }
.il-type-specimen > span { word-break: break-word; }
/* source variants not already in the scale */ .il-type-subtitle1 { font-size: 16px; font-weight: 500; line-height: 20px; }
.il-type-subtitle2 { font-size: 14px; font-weight: 500; line-height: 18px; }
.il-type-caption { font-size: 12px; font-weight: 400; line-height: 16px; color: var(--il-text-2); }
.il-type-caption1 { font-size: 12px; font-weight: 500; line-height: 16px; color: var(--il-text-2); }
@media (max-width: 1024px) { .il-type-grid { grid-template-columns: 1fr; } }
.il-justify-between { justify-content: space-between; }
.il-blocks-row { flex-wrap: wrap; gap: 16px; }
.il-blocks-row--end { align-items: flex-end; }
.il-blocks-actions { gap: 12px; }
.il-blocks-stack { display: flex; flex-direction: column; gap: 40px; }
.il-blocks-tabpanel { padding-top: 20px; color: var(--il-text-2); font-size: 14px; }
.il-blocks-switchrow { gap: 10px; }
.il-blocks-textset { display: flex; flex-direction: column; gap: 4px; }
.il-filter-pop { max-width: 352px; border: 1px solid var(--il-border); border-radius: 12px; background: var(--il-surface); box-shadow: var(--il-shadow); overflow: hidden; }
.il-filter-pop-head { padding: 16px; border-bottom: 1px solid var(--il-border); }
.il-filter-pop-body { padding: 16px 8px; }
.il-filter-pop-foot { padding: 16px; border-top: 1px solid var(--il-border); }
.il-blocks-notify { display: flex; flex-direction: column; gap: 10px; max-width: 336px; margin-top: 16px; }
.il-notify-item { gap: 8px; }
.il-notify-main { gap: 10px; min-width: 0; }
.il-notify-avatar { position: relative; flex: none; }
.il-notify-avatar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--il-surface-2); }
.il-notify-badge { position: absolute; right: -2px; bottom: -2px; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--il-surface-2); border: 1px solid var(--il-surface); color: var(--il-text-2); }
.il-notify-badge .il-ic { width: 12px; height: 12px; }
.il-notify-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.il-notify-text .il-user-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.il-notify-seen { color: var(--il-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.il-notify-time { font-size: 12px; color: var(--il-text-2); flex: none; }
.il-notify-time--seen { color: var(--il-muted); }
.il-dialog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; align-items: start; }
.il-dialog-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.il-dialog-divider { height: 1px; background: var(--il-border); margin: 16px -22px; }
.il-dialog-body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.il-dialog-body--start { align-items: flex-start; text-align: left; }
.il-dialog-desc { color: var(--il-text-2); width: 90%; }
.il-dialog-actions { display: flex; gap: 12px; }
.il-dialog--fs { padding: 0; overflow: hidden; }
.il-fs-appbar { display: flex; align-items: center; gap: 14px; background: var(--il-primary); color: var(--il-on-primary); padding: 12px 16px; }
.il-fs-title { flex: 1; font-size: 16px; font-weight: 500; }
.il-fs-close { color: var(--il-on-primary); }
.il-fs-close:hover { background: color-mix(in srgb, var(--il-on-primary) 16%, transparent); color: var(--il-on-primary); }
.il-fs-save { color: var(--il-on-primary); }
.il-dialog--fs .il-dialog-body { padding: 22px; }
.il-fs-media { width: 100%; border-radius: 12px; border: 1px solid var(--il-border); display: block; }
.il-progress--c > span { background: var(--il-tone); opacity: 1; }
.il-progress--light > span { background: var(--il-tone-bg); opacity: 1; }
.il-progress--8 { height: 8px; }
.il-prog-grouphead { font-size: 13px; font-weight: 500; color: var(--il-text-2); margin: 4px 0 0; }
.il-pl { display: flex; gap: 8px; }
.il-pl .il-progress { flex: 1; min-width: 120px; }
.il-pl--right { flex-direction: row; align-items: center; }
.il-pl--left { flex-direction: row-reverse; align-items: center; }
.il-pl--topright { flex-direction: column-reverse; align-items: flex-end; }
.il-pl--bottomright { flex-direction: column; align-items: flex-end; }
.il-pl--topleft { flex-direction: column-reverse; align-items: flex-start; }
.il-pl--bottomleft { flex-direction: column; align-items: flex-start; }
.il-pl--top { flex-direction: column-reverse; align-items: center; }
.il-pl--bottom { flex-direction: column; align-items: center; }
.il-prog-target-stack { gap: 10px; width: 128px; }
.il-snack-check--on { background: var(--il-primary); border-color: var(--il-primary); position: relative; }
.il-snack-check--on::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px; border: solid var(--il-on-primary); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.il-btn[disabled] { opacity: .5; pointer-events: none; }
.il-btn--sm { height: 34px; padding: 0 12px; font-size: 13px; }
.il-btn--lg { height: 48px; padding: 0 20px; font-size: 15px; }
.il-btn--loading { color: transparent; position: relative; }
.il-btn--loading .il-btn-spin { position: static; }
.il-iconbtn--filled { background: var(--il-tone); color: var(--il-on-primary); }
.il-iconbtn--filled:hover { filter: brightness(.94); background: var(--il-tone); color: var(--il-on-primary); }
.il-iconbtn--outlined:hover { border-color: var(--il-tone); color: var(--il-tone); background: none; }
.il-iconbtn.il-t-primary, .il-iconbtn.il-t-secondary, .il-iconbtn.il-t-success, .il-iconbtn.il-t-error, .il-iconbtn.il-t-warning, .il-iconbtn.il-t-info { color: var(--il-tone); }
.il-iconbtn--sm { width: 32px; height: 32px; border-radius: 8px; }
.il-iconbtn--lg { width: 48px; height: 48px; border-radius: 12px; }
.il-btn-spin { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: il-pl-spin .7s linear infinite; }
.il-cb { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: none; border: 1.5px solid var(--il-muted); border-radius: 4px; background: var(--il-surface); color: #fff; vertical-align: middle; box-sizing: border-box; }
.il-cb--sm { width: 16px; height: 16px; }
.il-cb--lg { width: 22px; height: 22px; }
.il-cb--checked, .il-cb--indet { background: var(--il-tone, var(--il-primary)); border-color: var(--il-tone, var(--il-primary)); }
.il-cb .il-ic { color: #fff; }
.il-cb--disabled { border-color: var(--il-border-2); background: var(--il-surface); opacity: .55; }
.il-cb--checked.il-cb--disabled, .il-cb--indet.il-cb--disabled { background: var(--il-border-2); border-color: var(--il-border-2); }
.il-cb--checked.il-cb--disabled .il-ic, .il-cb--indet.il-cb--disabled .il-ic { color: var(--il-muted); }
.il-cb-label--disabled { color: var(--il-muted); }
.il-cb-content { display: inline-flex; align-items: flex-start; gap: 10px; }
.il-cb-content .il-cb { margin-top: 2px; }
.il-cb-content-title { font-size: 14px; line-height: 18px; color: var(--il-text); }
.il-cb-content-sub { font-size: 12.5px; line-height: 18px; color: var(--il-text-2); }
.il-cb-label--disabled .il-cb-content-title, .il-cb-label--disabled .il-cb-content-sub { color: var(--il-muted); }
/* Drop-down showcase — static visual reproduction of the autocomplete / menu / select components */ .il-dd-control { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 5px 10px; background: var(--il-surface); border: 1px solid var(--il-border); border-radius: var(--il-radius-sm); width: 100%; }
.il-dd-control:hover { border-color: var(--il-muted); }
.il-dd-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; }
.il-dd-tag { display: inline-flex; align-items: center; gap: 2px; }
.il-dd-placeholder { color: var(--il-muted); font-size: 14px; }
.il-dd-value { display: inline-flex; align-items: center; flex: 1; color: var(--il-text); font-size: 14px; }
.il-dd-caret { color: var(--il-muted); flex: none; }
.il-dd-pop { margin-top: 4px; background: var(--il-surface); border: 1px solid var(--il-border); border-radius: 12px; box-shadow: var(--il-shadow); overflow: hidden; }
.il-dd-pop--menu { display: inline-block; min-width: 220px; }
.il-dd-list { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.il-dd-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; color: var(--il-text-2); }
.il-dd-opt:hover { background: var(--il-surface-2); color: var(--il-text); }
.il-dd-opt--sel { background: var(--il-surface-2); color: var(--il-text); }
.il-dd-opt-main { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.il-dd-opt-end { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.il-dd-mi { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; color: var(--il-text-2); }
.il-dd-mi:hover { background: var(--il-surface-2); color: var(--il-text); }
.il-dd-mi--sel { background: var(--il-nav-active-bg); color: var(--il-nav-active-fg); }
.il-dd-mi-ic { display: inline-flex; align-items: center; justify-content: center; width: 20px; flex: none; color: inherit; }
.il-dd-mi-text { flex: 1; }
.il-dd-cmd { display: inline-flex; align-items: center; gap: 1px; font-size: 12px; }
.il-dd-more { margin: 0; padding: 6px 12px 8px; border-top: 1px solid var(--il-border); }
.il-check-box--on { border-color: var(--il-primary); background: var(--il-primary); color: var(--il-on-primary); display: inline-flex; align-items: center; justify-content: center; }
.il-check-box--sm { width: 16px; height: 16px; }
.il-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1024px) { .il-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .il-grid-3 { grid-template-columns: 1fr; } }
.il-input-wrap--disabled { background: var(--il-surface-2); opacity: .7; }
.il-input-wrap--disabled .il-input { color: var(--il-muted); }
.il-input-wrap--error { border-color: var(--il-error); }
.il-input-wrap--error:focus-within { border-color: var(--il-error); box-shadow: 0 0 0 3px color-mix(in srgb, var(--il-error) 18%, transparent); }
.il-input-pre--text { color: var(--il-muted); font-size: 14px; padding-right: 2px; }
.il-input-dial { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; color: var(--il-text); font-size: 14px; font-weight: 500; padding: 0; flex: none; }
.il-input-dial[disabled] { color: var(--il-muted); }
.il-input-dial .il-ic { color: var(--il-muted); }
.il-dial-sep { width: 1px; height: 22px; background: var(--il-border-2); flex: none; }
.il-input-wrap--area { align-items: stretch; padding: 8px 10px; }
.il-textarea { resize: vertical; height: auto; min-height: 96px; line-height: 1.5; padding: 2px 0; font-family: inherit; }
.il-input-wrap--tags { flex-wrap: wrap; gap: 6px; padding: 6px 10px; }
.il-input--tags { flex: 1; min-width: 60px; height: 30px; }
.il-required { color: var(--il-error); }
.il-help--error { color: var(--il-error); }
.il-options { list-style: none; margin: 6px 0 0; padding: 6px; border: 1px solid var(--il-border); border-radius: var(--il-radius-sm); background: var(--il-surface); box-shadow: var(--il-shadow-sm); display: flex; flex-direction: column; gap: 2px; }
.il-option { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border-radius: 8px; font-size: 14px; color: var(--il-text); }
.il-option:hover { background: var(--il-surface-2); }
.il-option--selected { background: var(--il-primary-lighter); color: var(--il-primary-dark); font-weight: 500; }
.il-option--selected .il-ic { color: var(--il-primary); }
.il-radio-in { width: 18px; height: 18px; margin: 0; accent-color: var(--il-primary); flex: 0 0 auto; }
.il-radio--sm { width: 15px; height: 15px; }
.il-radio--lg { width: 22px; height: 22px; }
.il-radio--tone { accent-color: var(--il-tone); }
.il-slider { position: relative; padding: 6px 11px; }
.il-slider-rail { position: relative; height: 4px; border-radius: 4px; background: var(--il-track); }
.il-slider-fill { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--il-tone, var(--il-primary)); }
.il-slider-thumb { position: absolute; top: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--il-tone, var(--il-primary)); transform: translateY(-50%); box-shadow: 0 0 0 0 color-mix(in srgb, var(--il-tone, var(--il-primary)) 16%, transparent); }
.il-slider-label { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); padding: 2px 7px; border-radius: 6px; background: var(--il-tone, var(--il-primary)); color: var(--il-on-primary); font-size: 11px; line-height: 14px; white-space: nowrap; }
.il-slider-label::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--il-tone, var(--il-primary)); }
.il-slider--disabled { opacity: 0.45; }
.il-slider--disabled .il-slider-fill, .il-slider--disabled .il-slider-thumb { background: var(--il-text-2); }
/* Switch tone-colored checked track (Color card) */ .il-switch.il-t-primary input:checked + .il-switch-track { background: var(--il-primary); }
.il-switch.il-t-secondary input:checked + .il-switch-track { background: var(--il-secondary); }
.il-switch.il-t-success input:checked + .il-switch-track { background: var(--il-success); }
.il-switch.il-t-error input:checked + .il-switch-track { background: var(--il-error); }
.il-switch.il-t-warning input:checked + .il-switch-track { background: var(--il-warning); }
.il-switch.il-t-info input:checked + .il-switch-track { background: var(--il-info); }
/* Switch size variants (Size/Label/LabelPosition/Content cards) */ .il-switch--sm { width: 34px; height: 20px; }
.il-switch--sm .il-switch-track::after { top: 2px; left: 2px; width: 16px; height: 16px; }
.il-switch--sm input:checked + .il-switch-track::after { transform: translateX(14px); }
.il-switch--lg { width: 52px; height: 30px; }
.il-switch--lg .il-switch-track::after { top: 4px; left: 4px; width: 22px; height: 22px; }
.il-switch--lg input:checked + .il-switch-track::after { transform: translateX(22px); }
/* Disabled switch */ .il-switch--disabled { opacity: .45; cursor: not-allowed; }
.il-switch-label--disabled { opacity: .55; cursor: not-allowed; }
/* Inline switch rows / column stacks within showcase cards */ .il-switch-row { align-items: flex-start; gap: 28px; }
.il-switch-row .il-col { gap: 16px; }
/* Label position = start (label before control) */ .il-field-inline--start { justify-content: space-between; }
/* Content label (title + caption beside switch) */ .il-switch-content { align-items: flex-start; }
.il-switch-content-text { display: flex; flex-direction: column; gap: 2px; }
.il-switch-content-title { font-size: 14px; font-weight: 500; line-height: 18px; }
.il-color-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
.il-color-card { padding: 12px; border-radius: var(--il-radius); }
.il-color-card--main { border: 1px dashed var(--il-primary); }
.il-color-card--g100 { background: var(--il-border); }
.il-color-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 24px 12px; border-radius: 12px; }
.il-color-hex { font-size: 22px; font-weight: 600; line-height: 1.2; }
.il-color-fig { font-size: 13px; line-height: 1.35; }
.il-color-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.il-color-accent { font-size: 13px; font-weight: 500; color: var(--il-text); }
.il-color-tok { font-size: 12.5px; color: var(--il-text-2); }
.il-calx-month { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 14px; color: var(--il-text); }
.il-calx-nav { display: inline-flex; align-items: center; gap: 2px; }
.il-cal-day.il-calx-out { color: var(--il-muted); opacity: .55; }
.il-dz-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; }
.il-dz-upic { width: 48px; height: 48px; border-radius: 10px; background: var(--il-tone-bg); color: var(--il-primary); }
.il-dz-avatar { width: 80px; height: 80px; border-radius: 50%; background: var(--il-tone-bg); color: var(--il-primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.il-anim-mode { width: 100%; text-align: center; }
.il-anim-grid { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.il-anim-grid-cell { width: 100%; height: 120px; border-radius: 10px; overflow: hidden; position: relative; }
.il-anim-grid-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.il-anim-text { display: flex; justify-content: center; align-items: center; gap: 2px; width: 100%; height: 400px; }
.il-anim-letter { font-size: clamp(48px, 9vw, 96px); font-weight: 700; line-height: 1; color: var(--il-text); }

/* ── Global search in the appbar (replaces breadcrumb; operator request) ──── */
.il-appbar-left { flex: 1 1 auto; min-width: 0; }
.il-search--global { flex: 1 1 auto; max-width: 560px; min-width: 0; height: 44px; padding: 0 6px 0 14px; gap: 8px; }
.il-search--global input { flex: 1; min-width: 0; font-size: 14px; }
.il-search--global:focus-within { border-color: var(--il-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--il-primary) 14%, transparent); color: var(--il-text); }
.il-search-go { height: 34px; padding: 0 16px; margin-left: 4px; flex: none; border-radius: 8px; font-size: 13px; }
@media (max-width: 768px) {
  .il-search--global { width: auto; min-width: 0; padding: 0 4px 0 10px; }
  .il-search--global input { display: block; }
  .il-search--global .il-search-go { padding: 0 12px; }
}

/* Appbar burger is mobile-only: hide on desktop (overrides .il-iconbtn display
   which previously leaked it next to the breadcrumb). Drawer opens via this
   burger only on small screens; desktop has no collapse control by request. */
.il-appbar-burger { display: none; }
@media (max-width: 768px) { .il-appbar-burger { display: inline-flex; } }

/* Collapsed drawer header: show the logo mark (no "ILLUNARE 4.0" wordmark) beside
   the collapse toggle, sized to fit the 77px mini rail. */
body[data-il-drawer="collapsed"] .il-drawer-head { padding: 0 8px; gap: 4px; justify-content: space-between; }
body[data-il-drawer="collapsed"] .il-brand-mini img { height: 24px; width: auto; }
body[data-il-drawer="collapsed"] .il-drawer-collapse { width: 32px; height: 32px; flex: none; }

/* ── Drawer upsell banner (trial → production CTA, opens illunare.ai pricing) ─ */
.il-drawer-foot { flex: none; padding: 12px; }
.il-upsell { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px; background: var(--il-surface-2); border: 1px solid var(--il-border-2); }
.il-upsell-head { display: flex; align-items: center; gap: 8px; }
.il-upsell-brand { font-weight: 800; font-size: 14px; letter-spacing: .04em; color: var(--il-text); }
.il-upsell-brand b { color: var(--il-primary); font-weight: 800; }
.il-upsell-title { font-weight: 600; font-size: 15px; color: var(--il-text); }
.il-upsell-text { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--il-muted); }
.il-upsell-btn { width: 100%; margin-top: 2px; }
body[data-il-drawer="collapsed"] .il-drawer-foot { display: none; }

/* Top search input + upsell banner: recessed near-black bg in dark (operator request, #0A0A0A) */
[data-il-theme="dark"] .il-search--global,
[data-il-theme="dark"] .il-upsell { background: #0A0A0A; }

/* Headings carry no UA margin (parity with the base Typography reset (margin:0)).
   Title classes set their own size/weight; spacing comes from parent gap/padding.
   Fixes abnormal space under section titles (e.g. h6.il-ref-title's 2.33em UA margin). */
h1, h2, h3, h4, h5, h6 { margin: 0; }

/* ── Mobile responsiveness hardening ──────────────────────────────────────── */
/* Avatars/photos must never flex-shrink into ellipses inside flex rows (tables). */
.il-avatar, .il-photo { flex: none; }
/* Tab rows scroll horizontally (source variant="scrollable") instead of clipping. */
.il-tabs--line .il-tablist, .il-tabs--nav .il-tablist { overflow-x: auto; scrollbar-width: none; }
.il-tabs--line .il-tablist::-webkit-scrollbar, .il-tabs--nav .il-tablist::-webkit-scrollbar { display: none; }
.il-tabs--line .il-tab, .il-tabs--nav .il-tab { flex: none; white-space: nowrap; }

@media (max-width: 768px) {
  /* Appbar search: drop the "Consultar" button so the input has room beside the
     burger + actions on phones. */
  .il-search-go { display: none; }
  /* Toolbar wraps its filter chips / clear button instead of clipping. */
  .il-table-toolbar { flex-wrap: wrap; row-gap: 10px; }
  .il-table-actions { flex-wrap: wrap; }
}

@media (max-width: 600px) {
  /* KPI cards stack — 2-col clips the value + delta chip on phones. */
  .il-kpi-grid { grid-template-columns: 1fr; }
  .il-kpi-cell { border-right: 0; border-bottom: 1px solid var(--il-border); }
  .il-kpi-cell:last-child { border-bottom: 0; }
  .il-kpi { padding: 18px; }
}

/* Appbar profile is avatar-only (identity lives in the dropdown — no duplication). */
.il-profile--avatar { padding: 4px; gap: 0; }