/* ==========================================================================
   Invozy Components  —  shared/components.css   (batch 1+2)
   Butuh: shared/tokens.css (dimuat lebih dulu).
   Isi: utilitas angka · button · field (label/input/select/textarea) ·
        badge · tag/chip · banner · card · modal · toast · (batch 2 di bagian 11+)
   Batch 2: input-group (ikon) · check/radio · switch · pagination · avatar · tabs · menu
   Belum: table (menunggu migrasi admin)
   Konvensi: .iv-{komponen}  .iv-{komponen}--{varian|ukuran}  .iv-{komponen}__{bagian}
   Ukuran kontrol: --xs --sm --md(default) --lg --xl  (lihat tokens.css bagian 9)
   Ukuran badge  : --sm --md(default) --lg
   ========================================================================== */

/* ---------- 0. Dasar & utilitas ---------- */
.iv-num {
  font-family: var(--iv-font-numeric);
  font-variant-numeric: tabular-nums;
}
.iv-icon { font-size: var(--iv-c-icon, 20px); line-height:var(--iv-leading-none); flex: none; }
.iv-sr-only {
  position: absolute; width: 1px; height: 1px; margin: calc(var(--iv-space-px) * -1); padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 1. Ukuran kontrol (dipakai button, input, select, tag) ----------
   Default = md. Modifier ukuran harus SETELAH default (specificity sama). */
.iv-btn, .iv-input, .iv-tag, .iv-input-group, .iv-check, .iv-switch, .iv-page, .iv-avatar, .iv-tabs, .iv-nav, .iv-table {
  --iv-c-h:    var(--iv-sz-md-h);
  --iv-c-px:   var(--iv-sz-md-px);
  --iv-c-fs:   var(--iv-sz-md-fs);
  --iv-c-r:    var(--iv-sz-md-r);
  --iv-c-icon: var(--iv-sz-md-icon);
  --iv-c-gap:  var(--iv-sz-md-gap);
}
.iv-tag { /* chip lebih ringkas: default xs */
  --iv-c-h:    var(--iv-sz-xs-h);
  --iv-c-px:   var(--iv-sz-xs-px);
  --iv-c-fs:   var(--iv-sz-xs-fs);
  --iv-c-r:    var(--iv-radius-pill);
  --iv-c-icon: var(--iv-sz-xs-icon);
  --iv-c-gap:  var(--iv-sz-xs-gap);
}
.iv-btn--xs, .iv-input--xs, .iv-tag--xs, .iv-input-group--xs, .iv-check--xs, .iv-switch--xs, .iv-page--xs, .iv-avatar--xs, .iv-tabs--xs, .iv-nav--xs, .iv-table--xs { --iv-c-h: var(--iv-sz-xs-h); --iv-c-px: var(--iv-sz-xs-px); --iv-c-fs: var(--iv-sz-xs-fs); --iv-c-r: var(--iv-sz-xs-r); --iv-c-icon: var(--iv-sz-xs-icon); --iv-c-gap: var(--iv-sz-xs-gap); }
.iv-btn--sm, .iv-input--sm, .iv-tag--sm, .iv-input-group--sm, .iv-check--sm, .iv-switch--sm, .iv-page--sm, .iv-avatar--sm, .iv-tabs--sm, .iv-nav--sm, .iv-table--sm { --iv-c-h: var(--iv-sz-sm-h); --iv-c-px: var(--iv-sz-sm-px); --iv-c-fs: var(--iv-sz-sm-fs); --iv-c-r: var(--iv-sz-sm-r); --iv-c-icon: var(--iv-sz-sm-icon); --iv-c-gap: var(--iv-sz-sm-gap); }
.iv-btn--md, .iv-input--md, .iv-tag--md, .iv-input-group--md, .iv-check--md, .iv-switch--md, .iv-page--md, .iv-avatar--md, .iv-tabs--md, .iv-nav--md, .iv-table--md { --iv-c-h: var(--iv-sz-md-h); --iv-c-px: var(--iv-sz-md-px); --iv-c-fs: var(--iv-sz-md-fs); --iv-c-r: var(--iv-sz-md-r); --iv-c-icon: var(--iv-sz-md-icon); --iv-c-gap: var(--iv-sz-md-gap); }
.iv-btn--lg, .iv-input--lg, .iv-tag--lg, .iv-input-group--lg, .iv-check--lg, .iv-switch--lg, .iv-page--lg, .iv-avatar--lg, .iv-tabs--lg, .iv-nav--lg, .iv-table--lg { --iv-c-h: var(--iv-sz-lg-h); --iv-c-px: var(--iv-sz-lg-px); --iv-c-fs: var(--iv-sz-lg-fs); --iv-c-r: var(--iv-sz-lg-r); --iv-c-icon: var(--iv-sz-lg-icon); --iv-c-gap: var(--iv-sz-lg-gap); }
.iv-btn--xl, .iv-input--xl, .iv-tag--xl, .iv-input-group--xl, .iv-check--xl, .iv-switch--xl, .iv-page--xl, .iv-avatar--xl, .iv-tabs--xl, .iv-nav--xl, .iv-table--xl { --iv-c-h: var(--iv-sz-xl-h); --iv-c-px: var(--iv-sz-xl-px); --iv-c-fs: var(--iv-sz-xl-fs); --iv-c-r: var(--iv-sz-xl-r); --iv-c-icon: var(--iv-sz-xl-icon); --iv-c-gap: var(--iv-sz-xl-gap); }
/* Bentuk pill (opsional untuk button/tag) */
.iv-btn--pill, .iv-input--pill { --iv-c-r: var(--iv-radius-pill); }

/* ---------- 2. Button ---------- */
.iv-btn {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--iv-c-gap);
  height: var(--iv-c-h);
  padding: 0 var(--iv-c-px);
  font:var(--iv-fw-semibold) var(--iv-c-fs)/var(--iv-leading-none) var(--iv-font-sans);
  white-space: nowrap; text-decoration: none;
  color: var(--iv-on-primary); background: var(--iv-primary);
  border: var(--iv-bw-strong) solid transparent; border-radius: var(--iv-c-r);
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background var(--iv-dur-fast) var(--iv-ease), border-color var(--iv-dur-fast) var(--iv-ease),
              box-shadow var(--iv-dur-fast) var(--iv-ease), color var(--iv-dur-fast) var(--iv-ease);
}
.iv-btn > i, .iv-btn > svg { display: inline-flex; align-items: center; justify-content: center; font-size: var(--iv-c-icon); width: var(--iv-c-icon); height: var(--iv-c-icon); flex: none; line-height:var(--iv-leading-none); }
.iv-btn:hover { background: var(--iv-primary-hover); box-shadow: var(--iv-shadow-hover); }
.iv-btn:focus-visible { outline: none; box-shadow: var(--iv-focus-ring); }
.iv-btn:disabled, .iv-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* varian */
.iv-btn--primary { /* sama dengan default; eksplisit agar mudah dibaca */
  background: var(--iv-primary); color: var(--iv-accent);
}
.iv-btn--primary:hover { background: var(--iv-primary-hover); }
.iv-btn--accent  { background: var(--iv-accent); color: var(--iv-on-accent); }
.iv-btn--accent:hover { background: color-mix(in srgb, var(--iv-neutral-900) var(--iv-hover-dim), var(--iv-accent)); }
.iv-btn--secondary { background: var(--iv-surface); color: var(--iv-text-2); border-color: var(--iv-border); }
.iv-btn--secondary:hover { background: color-mix(in srgb, var(--iv-neutral-900) var(--iv-hover-dim), var(--iv-surface)); border-color: var(--iv-border-strong); }
.iv-btn--ghost { background: transparent; color: var(--iv-text-2); }
.iv-btn--ghost:hover { background: color-mix(in srgb, var(--iv-neutral-900) var(--iv-hover-dim), var(--iv-surface-muted)); box-shadow: none; }
.iv-btn--inverse { /* di atas background hijau tua */
  background: var(--iv-on-dark-subtle); color: var(--iv-text-inverse); border-color: var(--iv-on-dark-border);
}
.iv-btn--inverse:hover { background: var(--iv-on-dark-hover); box-shadow: none; }
.iv-btn--danger { background: var(--iv-danger); color: var(--iv-text-inverse); }
.iv-btn--danger:hover { background: var(--iv-danger-strong); }
.iv-btn--danger-soft { background: var(--iv-danger-soft); color: var(--iv-danger-strong); border-color: color-mix(in srgb, var(--iv-danger) 22%, var(--iv-neutral-0)); }
.iv-btn--danger-soft:hover { background: color-mix(in srgb, var(--iv-danger) 22%, var(--iv-danger-soft)); }

/* bentuk */
/* link: tampil seperti teks; container baru kelihatan saat hover/fokus */
.iv-btn--link { background: transparent; border-color: transparent; color: var(--iv-text-2); }
.iv-btn--link:hover { background: color-mix(in srgb, var(--iv-neutral-900) var(--iv-hover-dim), var(--iv-surface-muted)); border-color: transparent; color: var(--iv-text); box-shadow: none; }
.iv-btn--block { display: flex; width: 100%; }
.iv-flex-1 { flex: 1 1 0%; } /* anak flex yang berbagi lebar sama rata (mis. 2 tombol sebaris) */
.iv-btn--icon  { width: var(--iv-c-h); padding: 0; } /* kotak; tambah --pill untuk bulat */
.iv-btn--icon.iv-btn--pill { border-radius: var(--iv-radius-full); }

/* loading */
.iv-btn.is-loading { color: transparent; pointer-events: none; position: relative; }
.iv-btn.is-loading::after {
  content: ""; position: absolute; width: var(--iv-c-icon); height: var(--iv-c-icon);
  border: var(--iv-bw-thick) solid var(--iv-accent); border-right-color: transparent; border-radius:var(--iv-radius-full);
  animation: iv-spin .6s linear infinite;
}
@keyframes iv-spin { to { transform: rotate(360deg); } }

/* ---------- 3. Field: label · input/select/textarea · hint · error ---------- */
.iv-field { display: block; margin-bottom: var(--iv-space-3); }
.iv-label {
  display: block; margin-bottom: var(--iv-space-1-5);
  font:var(--iv-fw-semibold) var(--iv-text-11)/var(--iv-leading-tight) var(--iv-font-sans);
  text-transform: uppercase; letter-spacing:var(--iv-ls-wider); color: var(--iv-text-muted);
}
.iv-input {
  box-sizing: border-box; display: block; width: 100%;
  height: var(--iv-c-h); padding: 0 var(--iv-c-px);
  font:var(--iv-fw-regular) max(var(--iv-c-fs), 16px)/var(--iv-leading-tight) var(--iv-font-sans); /* 16px di mobile: cegah zoom iOS */
  color: var(--iv-text); background: var(--iv-bg);
  border: var(--iv-bw-strong) solid var(--iv-border); border-radius: var(--iv-c-r);
  transition: border-color var(--iv-dur-fast) var(--iv-ease), background var(--iv-dur-fast) var(--iv-ease), box-shadow var(--iv-dur-fast) var(--iv-ease);
}
@media (min-width: 600px) { .iv-input { font-size: var(--iv-c-fs); } }
.iv-input::placeholder { color: var(--iv-text-subtle); }
.iv-input:hover { border-color: var(--iv-border-strong); }
.iv-input:focus { outline: none; background: var(--iv-surface); border-color: var(--iv-primary); box-shadow: var(--iv-focus-ring); }
.iv-input:disabled { opacity: .55; cursor: not-allowed; }
.iv-input.is-invalid { border-color: var(--iv-danger); }
.iv-input.is-invalid:focus { box-shadow: var(--iv-focus-ring-danger); }
textarea.iv-input { height: auto; min-height: calc(var(--iv-c-h) * 2); padding-block: var(--iv-space-3); line-height:var(--iv-leading-body); resize: vertical; }
select.iv-input {
  appearance: none; -webkit-appearance: none; padding-right: calc(var(--iv-c-px) + var(--iv-space-5));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256'%3E%3Cpath fill='%237A7A7A' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--iv-c-px) center;
}
.iv-input--num { font-family: var(--iv-font-numeric); font-variant-numeric: tabular-nums; }
.iv-hint  { margin-top: var(--iv-space-1); font-size: var(--iv-text-12); line-height:var(--iv-leading-snug); color: var(--iv-text-muted); }
.iv-error { margin-top: var(--iv-space-1); font-size: var(--iv-text-12); line-height:var(--iv-leading-snug); color: var(--iv-danger-strong); }

/* ---------- 4. Badge (non-interaktif) : --sm --md(default) --lg ---------- */
.iv-badge {
  --iv-b-h: var(--iv-bd-md-h); --iv-b-px: var(--iv-bd-md-px); --iv-b-fs: var(--iv-bd-md-fs); --iv-b-r: var(--iv-bd-md-r);
  box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--iv-space-1);
  height: var(--iv-b-h); padding: 0 var(--iv-b-px);
  font:var(--iv-fw-semibold) var(--iv-b-fs)/var(--iv-leading-none) var(--iv-font-sans); letter-spacing:var(--iv-ls-wide); white-space: nowrap;
  color: var(--iv-text-2); background: var(--iv-surface-muted); border-radius: var(--iv-b-r);
}
.iv-badge--sm { --iv-b-h: var(--iv-bd-sm-h); --iv-b-px: var(--iv-bd-sm-px); --iv-b-fs: var(--iv-bd-sm-fs); --iv-b-r: var(--iv-bd-sm-r); }
.iv-badge--md { --iv-b-h: var(--iv-bd-md-h); --iv-b-px: var(--iv-bd-md-px); --iv-b-fs: var(--iv-bd-md-fs); --iv-b-r: var(--iv-bd-md-r); }
.iv-badge--lg { --iv-b-h: var(--iv-bd-lg-h); --iv-b-px: var(--iv-bd-lg-px); --iv-b-fs: var(--iv-bd-lg-fs); --iv-b-r: var(--iv-bd-lg-r); }
.iv-badge--pill { border-radius: var(--iv-radius-pill); }
/* Icon-only: lingkaran, tanpa teks. Beri title/aria-label di elemennya. */
.iv-badge--icon { width: var(--iv-b-h); padding: 0; justify-content: center; border-radius: var(--iv-radius-full); flex-shrink: 0; }
.iv-badge--icon > i { font-size: var(--iv-text-12); }
.iv-badge--caps { font-family: var(--iv-font-sans); font-weight: var(--iv-fw-medium); letter-spacing:var(--iv-ls-wider); text-transform: uppercase; }
.iv-badge--bordered { box-shadow: var(--iv-ring-inset); } /* untuk badge di atas gambar */
.iv-badge--solid { background: var(--iv-ink); color: var(--iv-text-inverse); }
.iv-badge > i { font-size: 1.15em; line-height:var(--iv-leading-none); }
.iv-crown { color: var(--iv-pro); } /* ikon mahkota PRO */
.iv-badge--primary { background: var(--iv-primary); color: var(--iv-accent); }
.iv-badge--accent  { background: var(--iv-accent);  color: var(--iv-on-accent); }
.iv-badge--success { background: var(--iv-success-soft); color: var(--iv-success-strong); }
.iv-badge--warning { background: var(--iv-warning-soft); color: var(--iv-warning-strong); }
.iv-badge--danger  { background: var(--iv-danger-soft);  color: var(--iv-danger-strong); }
.iv-badge--info    { background: var(--iv-info-soft);    color: var(--iv-info-strong); }

/* ---------- 5. Tag / chip (bisa diklik, dipilih, dihapus) : --xs(default) --sm --md --lg --xl ---------- */
.iv-tag {
  box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--iv-c-gap);
  height: var(--iv-c-h); padding: 0 var(--iv-c-px);
  font:var(--iv-fw-medium) var(--iv-c-fs)/var(--iv-leading-none) var(--iv-font-sans); white-space: nowrap;
  color: var(--iv-text-2); background: var(--iv-surface); border: var(--iv-bw) solid var(--iv-border); border-radius: var(--iv-c-r);
  transition: background var(--iv-dur-fast) var(--iv-ease), border-color var(--iv-dur-fast) var(--iv-ease), color var(--iv-dur-fast) var(--iv-ease);
}
.iv-tag > i { font-size: var(--iv-c-icon); line-height:var(--iv-leading-none); }
button.iv-tag, a.iv-tag { cursor: pointer; text-decoration: none; }
button.iv-tag:hover, a.iv-tag:hover { background: var(--iv-bg); border-color: var(--iv-border-strong); }
.iv-tag:focus-visible { outline: none; box-shadow: var(--iv-focus-ring); }
.iv-tag.is-selected, .iv-tag.active, .iv-tag--solid { background: var(--iv-primary); border-color: var(--iv-primary); color: var(--iv-on-primary); }
.iv-tag--caps { font-family: var(--iv-font-sans); }
.iv-tag__remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--iv-c-icon); height: var(--iv-c-icon); margin-right: calc(var(--iv-c-px) * -.4);
  padding: 0; border: 0; border-radius: var(--iv-radius-full); background: transparent; color: inherit; opacity: .6; cursor: pointer;
}
.iv-tag__remove:hover { opacity: 1; background: var(--iv-hover-tint); }

/* ---------- 6. Banner : --sm --md(default) --lg --xl ---------- */
.iv-banner {
  --iv-bn-py: var(--iv-space-3); --iv-bn-px: var(--iv-space-4); --iv-bn-fs: var(--iv-text-13); --iv-bn-icon: 20px;
  --iv-bn-bg: var(--iv-info-soft); --iv-bn-fg: var(--iv-info-strong); --iv-bn-bd: color-mix(in srgb, var(--iv-info) 25%, var(--iv-neutral-0));
  box-sizing: border-box; display: flex; align-items: flex-start; gap: var(--iv-space-3);
  padding: var(--iv-bn-py) var(--iv-bn-px);
  font:var(--iv-fw-medium) var(--iv-bn-fs)/var(--iv-leading-snug) var(--iv-font-sans);
  color: var(--iv-bn-fg); background: var(--iv-bn-bg); border: var(--iv-bw) solid var(--iv-bn-bd); border-radius: var(--iv-radius-lg);
}
.iv-banner--sm { --iv-bn-py: var(--iv-space-2);  --iv-bn-px: var(--iv-space-3); --iv-bn-fs: var(--iv-text-12); --iv-bn-icon: 16px; }
.iv-banner--md { --iv-bn-py: var(--iv-space-3);  --iv-bn-px: var(--iv-space-4); --iv-bn-fs: var(--iv-text-13); --iv-bn-icon: 20px; }
.iv-banner--lg { --iv-bn-py: var(--iv-space-4);  --iv-bn-px: var(--iv-space-5); --iv-bn-fs: var(--iv-text-14); --iv-bn-icon: 22px; }
.iv-banner--xl { --iv-bn-py: var(--iv-space-5);  --iv-bn-px: var(--iv-space-6); --iv-bn-fs: var(--iv-text-16); --iv-bn-icon: 24px; }
@media (min-width: 600px) {
  .iv-banner--md { --iv-bn-fs: var(--iv-text-14); }
  .iv-banner--lg { --iv-bn-fs: var(--iv-text-15); }
}
.iv-banner > i { font-size: var(--iv-bn-icon); line-height:var(--iv-leading-none); flex: none; }
.iv-banner__body { flex: 1; min-width: 0; }
.iv-banner__title { display: block; margin-bottom: var(--iv-space-0-5); font-weight: var(--iv-fw-semibold); }
.iv-banner__close { flex: none; padding: 0; border: 0; background: transparent; color: inherit; opacity: .6; cursor: pointer; font-size: var(--iv-bn-icon); line-height:var(--iv-leading-none); }
.iv-banner__close:hover { opacity: 1; }
.iv-banner--success { --iv-bn-bg: var(--iv-success-soft); --iv-bn-fg: var(--iv-success-strong); --iv-bn-bd: color-mix(in srgb, var(--iv-success) 25%, var(--iv-neutral-0)); }
.iv-banner--warning { --iv-bn-bg: var(--iv-warning-soft); --iv-bn-fg: var(--iv-warning-strong); --iv-bn-bd: color-mix(in srgb, var(--iv-warning) 35%, var(--iv-neutral-0)); }
.iv-banner--danger  { --iv-bn-bg: var(--iv-danger-soft);  --iv-bn-fg: var(--iv-danger-strong);  --iv-bn-bd: color-mix(in srgb, var(--iv-danger) 25%, var(--iv-neutral-0)); }
.iv-banner--brand   { --iv-bn-bg: var(--iv-primary); --iv-bn-fg: var(--iv-text-inverse); --iv-bn-bd: var(--iv-border-inverse); }
.iv-banner--brand .iv-banner__title { color: var(--iv-accent); }

/* ---------- 7. Card : --sm --md(default) --lg ---------- */
.iv-card {
  --iv-card-p: var(--iv-space-4);
  box-sizing: border-box; padding: var(--iv-card-p);
  background: var(--iv-surface); border: var(--iv-bw) solid var(--iv-border); border-radius: var(--iv-radius-2xl);
}
.iv-card--sm { --iv-card-p: var(--iv-space-3); border-radius: var(--iv-radius-xl); }
.iv-card--lg { --iv-card-p: var(--iv-space-5); }
.iv-card--raised { box-shadow: var(--iv-shadow-sm); }
@media (min-width: 600px) {
  .iv-card    { --iv-card-p: var(--iv-space-5); }
  .iv-card--sm{ --iv-card-p: var(--iv-space-4); }
  .iv-card--lg{ --iv-card-p: var(--iv-space-6); }
}
.iv-card__title { margin: 0 0 var(--iv-space-3); font:var(--iv-fw-semibold) var(--iv-text-16)/var(--iv-leading-snug) var(--iv-font-sans); color: var(--iv-text); }

/* ---------- 8. Modal : mobile = bottom sheet, desktop = dialog tengah ----------
   Ukuran lebar: --sm 400 · --md 520 (default) · --lg 720 · --xl 960
   Buka/tutup: tambah/hapus class .is-open pada .iv-modal */
.iv-modal {
  position: fixed; inset: 0; z-index: var(--iv-z-modal);
  display: none; align-items: flex-end; justify-content: center;
  background: var(--iv-overlay);
}
.iv-modal.is-open, .iv-modal.open { display: flex; } /* .open = alias untuk JS app yang sudah memakai class itu */
/* center: dialog selalu di tengah (dialog konfirmasi / form kecil), bukan bottom-sheet di mobile */
.iv-modal--center { align-items: center; padding: var(--iv-space-5); }
@media (min-width: 600px) { .iv-modal.iv-modal--center { padding: var(--iv-space-5); } }
.iv-modal__dialog {
  --iv-modal-w: 520px;
  box-sizing: border-box; position: relative; display: flex; flex-direction: column;
  width: 100%; max-width: var(--iv-modal-w); max-height: 92dvh;
  background: var(--iv-surface); border-radius: var(--iv-radius-2xl) var(--iv-radius-2xl) 0 0;
  box-shadow: var(--iv-shadow-overlay);
  animation: iv-sheet-up var(--iv-dur) var(--iv-ease);
}
.iv-modal--sm .iv-modal__dialog { --iv-modal-w: 400px; }
.iv-modal--md .iv-modal__dialog { --iv-modal-w: 520px; }
.iv-modal--lg .iv-modal__dialog { --iv-modal-w: 720px; }
.iv-modal--xl .iv-modal__dialog { --iv-modal-w: 960px; }
.iv-modal__header { display: flex; align-items: center; gap: var(--iv-space-3); padding: var(--iv-space-4) var(--iv-space-5) var(--iv-space-3); }
.iv-modal__title  { flex: 1; margin: 0; font:var(--iv-fw-semibold) var(--iv-text-18)/var(--iv-leading-snug) var(--iv-font-sans); color: var(--iv-text); }
.iv-modal__body   { flex: 1; overflow-y: auto; padding: var(--iv-space-2) var(--iv-space-5) var(--iv-space-4); color: var(--iv-text-2); font-size: var(--iv-text-14); line-height:var(--iv-leading-body); }
.iv-modal__footer { display: flex; gap: var(--iv-space-2); justify-content: flex-end; padding: var(--iv-space-3) var(--iv-space-5) max(var(--iv-space-4), env(safe-area-inset-bottom)); border-top: var(--iv-bw) solid var(--iv-border); }
.iv-modal__footer > .iv-btn { flex: 1; }
@media (min-width: 600px) {
  .iv-modal { align-items: center; padding: var(--iv-space-6); }
  .iv-modal__dialog { border-radius: var(--iv-radius-2xl); max-height: calc(100dvh - 48px); animation-name: iv-pop; }
  .iv-modal__footer > .iv-btn { flex: 0 0 auto; }
}
@keyframes iv-sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes iv-pop      { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- 9. Toast ---------- */
.iv-toast {
  position: fixed; left: 50%; bottom: var(--iv-space-6); z-index: var(--iv-z-toast);
  max-width: calc(100vw - 32px); padding: var(--iv-space-3) var(--iv-space-5);
  font:var(--iv-fw-semibold) var(--iv-text-13)/var(--iv-leading-snug) var(--iv-font-sans);
  color: var(--iv-text-inverse); background: var(--iv-green-950); border-radius: var(--iv-radius-pill);
  box-shadow: var(--iv-shadow-lg);
  opacity: 0; pointer-events: none; transform: translate(-50%, 16px);
  transition: opacity var(--iv-dur) var(--iv-ease), transform var(--iv-dur) var(--iv-ease);
}
.iv-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.iv-toast--danger { background: var(--iv-danger-strong); }

/* ==========================================================================
   BATCH 2
   ========================================================================== */

/* ---------- 11. Input group: ikon di dalam input/select ----------
   <div class="iv-input-group iv-input-group--start"><i class="ph ph-magnifying-glass iv-input-icon"></i><input class="iv-input"></div>
   --start = ikon kiri · --end = ikon kanan. Ukuran diatur di wrapper (iv-input-group--sm dst). */
.iv-input-group { position: relative; display: block; }
.iv-input-group > .iv-input {
  --iv-c-h: inherit; --iv-c-px: inherit; --iv-c-fs: inherit; --iv-c-r: inherit; --iv-c-icon: inherit; --iv-c-gap: inherit;
}
.iv-input-icon {
  position: absolute; top: 50%; transform: translateY(-50%); z-index:var(--iv-z-1);
  display: inline-flex; font-size: var(--iv-c-icon); line-height:var(--iv-leading-none);
  color: var(--iv-text-muted); pointer-events: none;
}
.iv-input-group--start > .iv-input-icon { left: var(--iv-c-px); }
.iv-input-group--end   > .iv-input-icon { right: var(--iv-c-px); }
.iv-input-group--start > .iv-input { padding-left:  calc(var(--iv-c-px) + var(--iv-c-icon) + var(--iv-c-gap)); }
.iv-input-group--end   > .iv-input { padding-right: calc(var(--iv-c-px) + var(--iv-c-icon) + var(--iv-c-gap)); }
.iv-input-group--start > select.iv-input { padding-right: calc(var(--iv-c-px) + var(--iv-space-5)); }

/* --both = ikon kiri + aksi (tombol mata dsb) kanan */
.iv-input-group--both > .iv-input-icon { left: var(--iv-c-px); }
.iv-input-group--both > .iv-input { padding-left: calc(var(--iv-c-px) + var(--iv-c-icon) + var(--iv-c-gap)); padding-right: calc(var(--iv-c-px) + var(--iv-c-icon) + var(--iv-c-gap)); }
.iv-input-action {
  position: absolute; top: 50%; right: var(--iv-c-px); transform: translateY(-50%); z-index:var(--iv-z-2);
  display: inline-flex; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: var(--iv-c-icon); line-height:var(--iv-leading-none); color: var(--iv-text-muted);
}
.iv-input-action:hover { color: var(--iv-text); }

/* ---------- 12. Check & radio ----------
   <label class="iv-check"><input type="checkbox"><span class="iv-check__box"></span><span class="iv-check__label">Modern</span><span class="iv-check__count">3</span></label>
   Radio: tambah .iv-check--radio dan type="radio" */
.iv-check {
  position: relative; box-sizing: border-box; display: flex; align-items: center; gap: var(--iv-space-2-5);
  min-height: var(--iv-c-h); font:var(--iv-fw-regular) var(--iv-c-fs)/var(--iv-leading-snug) var(--iv-font-sans);
  color: var(--iv-text); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.iv-check > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.iv-check__box {
  --iv-check-box: calc(var(--iv-c-icon) - 2px);
  box-sizing: border-box; flex: none; width: var(--iv-check-box); height: var(--iv-check-box);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--iv-surface); border: var(--iv-bw-strong) solid var(--iv-border-strong); border-radius: var(--iv-radius-xs);
  transition: background var(--iv-dur-fast) var(--iv-ease), border-color var(--iv-dur-fast) var(--iv-ease), box-shadow var(--iv-dur-fast) var(--iv-ease);
}
.iv-check__box::after {
  content: ""; width: 30%; height: 56%; margin-top: -8%;
  border: solid var(--iv-accent); border-width: 0 var(--iv-space-0-5) var(--iv-space-0-5) 0;
  transform: rotate(45deg) scale(0); transition: transform var(--iv-dur-fast) var(--iv-ease);
}
.iv-check:hover > input:not(:disabled) + .iv-check__box { border-color: var(--iv-text-muted); }
.iv-check > input:checked + .iv-check__box { background: var(--iv-primary); border-color: var(--iv-primary); }
.iv-check > input:checked + .iv-check__box::after { transform: rotate(45deg) scale(1); }
.iv-check > input:focus-visible + .iv-check__box { box-shadow: var(--iv-focus-ring); }
.iv-check > input:disabled + .iv-check__box { opacity: .45; }
.iv-check:has(> input:disabled) { cursor: not-allowed; color: var(--iv-text-muted); }
.iv-check__label { flex: 1; min-width: 0; }
.iv-check__count { font-family: var(--iv-font-numeric); font-variant-numeric: tabular-nums; font-size: var(--iv-text-14); color: var(--iv-text-muted); }
.iv-check--radio .iv-check__box { border-radius: var(--iv-radius-full); }
.iv-check--radio .iv-check__box::after { width: 50%; height: 50%; margin: 0; border: 0; border-radius:var(--iv-radius-full); background: var(--iv-primary); transform: scale(0); }
.iv-check--radio > input:checked + .iv-check__box { background: var(--iv-surface); border-color: var(--iv-primary); }
.iv-check--radio > input:checked + .iv-check__box::after { transform: scale(1); }

/* ---------- 13. Switch ----------
   <label class="iv-switch"><input type="checkbox"><span class="iv-switch__track"></span><span>Aktif</span></label> */
.iv-switch { position: relative; display: inline-flex; align-items: center; gap: var(--iv-c-gap); font:var(--iv-fw-medium) var(--iv-c-fs)/1.3 var(--iv-font-sans); color: var(--iv-text); cursor: pointer; user-select: none; }
.iv-switch > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.iv-switch__track {
  --iv-sw-h: calc(var(--iv-c-icon) + 4px);
  position: relative; flex: none; box-sizing: border-box; width: calc(var(--iv-sw-h) * 1.8); height: var(--iv-sw-h);
  background: var(--iv-border-strong); border-radius: var(--iv-radius-pill);
  transition: background var(--iv-dur) var(--iv-ease), box-shadow var(--iv-dur-fast) var(--iv-ease);
}
.iv-switch__track::after {
  content: ""; position: absolute; top: var(--iv-space-0-5); left: var(--iv-space-0-5); width: calc(var(--iv-sw-h) - 4px); height: calc(var(--iv-sw-h) - 4px);
  background: var(--iv-surface); border-radius:var(--iv-radius-full); box-shadow: var(--iv-shadow-xs);
  transition: transform var(--iv-dur) var(--iv-ease);
}
.iv-switch > input:checked + .iv-switch__track { background: var(--iv-primary); }
.iv-switch > input:checked + .iv-switch__track::after { transform: translateX(calc(var(--iv-sw-h) * .8)); background: var(--iv-accent); }
.iv-switch > input:focus-visible + .iv-switch__track { box-shadow: var(--iv-focus-ring); }
.iv-switch > input:disabled + .iv-switch__track { opacity: .45; }

/* ---------- 14. Pagination ----------
   <nav class="iv-pagination"><button class="iv-page">‹</button><button class="iv-page is-active">1</button><span class="iv-page iv-page--dots">…</span></nav> */
.iv-pagination { display: flex; align-items: center; gap: var(--iv-space-1-5); flex-wrap: wrap; }
.iv-page {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--iv-c-h); height: var(--iv-c-h); padding: 0 calc(var(--iv-c-px) * .6);
  font:var(--iv-fw-medium) var(--iv-c-fs)/var(--iv-leading-none) var(--iv-font-numeric); font-variant-numeric: tabular-nums;
  color: var(--iv-primary); background: var(--iv-surface); border: var(--iv-bw) solid var(--iv-border); border-radius: var(--iv-c-r);
  cursor: pointer; transition: border-color var(--iv-dur-fast) var(--iv-ease), background var(--iv-dur-fast) var(--iv-ease);
}
.iv-page:hover:not(:disabled):not(.is-active):not(.iv-page--dots) { border-color: var(--iv-primary); }
.iv-page:focus-visible { outline: none; box-shadow: var(--iv-focus-ring); }
.iv-page.is-active { background: var(--iv-primary); border-color: var(--iv-primary); color: var(--iv-text-inverse); cursor: default; }
.iv-page:disabled { opacity: .4; cursor: not-allowed; }
.iv-page--dots { color: var(--iv-text-muted); cursor: default; }

/* ---------- 15. Avatar (diameter = tinggi kontrol): xs 24 · sm 32 · md 40 · lg 48 · xl 56 ---------- */
.iv-avatar {
  position: relative; box-sizing: border-box; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: var(--iv-c-h); height: var(--iv-c-h); overflow: hidden; border-radius: var(--iv-radius-full);
  font:var(--iv-fw-semibold) calc(var(--iv-c-h) * .4)/var(--iv-leading-none) var(--iv-font-sans); text-transform: uppercase;
  color: var(--iv-accent); background: var(--iv-primary);
}
.iv-avatar > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.iv-avatar--muted { color: var(--iv-text-muted); background: var(--iv-surface-muted); }

/* ---------- 16. Tabs: segmented (default) dan --line ----------
   <div class="iv-tabs" role="tablist"><button class="iv-tab is-active" role="tab">Semua</button><button class="iv-tab" role="tab">Pro</button></div> */
.iv-tabs { display: inline-flex; align-items: center; gap: var(--iv-space-1); padding: var(--iv-space-1); background: var(--iv-surface-muted); border-radius: calc(var(--iv-c-r) + 4px); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.iv-tabs::-webkit-scrollbar { display: none; }
.iv-tab {
  box-sizing: border-box; flex: none; height: calc(var(--iv-c-h) - 8px); padding: 0 var(--iv-c-px);
  font:var(--iv-fw-semibold) var(--iv-c-fs)/var(--iv-leading-none) var(--iv-font-sans); white-space: nowrap;
  color: var(--iv-text-muted); background: transparent; border: 0; border-radius: var(--iv-c-r); cursor: pointer;
  transition: background var(--iv-dur-fast) var(--iv-ease), color var(--iv-dur-fast) var(--iv-ease);
}
.iv-tab:hover { color: var(--iv-text); }
.iv-tab:focus-visible { outline: none; box-shadow: var(--iv-focus-ring); }
.iv-tab.is-active, .iv-tab[aria-selected="true"] { color: var(--iv-text); background: var(--iv-surface); box-shadow: var(--iv-shadow-xs); }
.iv-tabs--line { gap: var(--iv-space-5); padding: 0; background: none; border-bottom: var(--iv-bw) solid var(--iv-border); border-radius: 0; display: flex; }
.iv-tabs--line .iv-tab { height: var(--iv-c-h); padding: 0; margin-bottom: calc(var(--iv-space-px) * -1); border-radius: 0; border-bottom: var(--iv-bw-thick) solid transparent; }
.iv-tabs--line .iv-tab.is-active, .iv-tabs--line .iv-tab[aria-selected="true"] { background: none; box-shadow: none; border-bottom-color: var(--iv-primary); }

/* ---------- 17. Menu / dropdown (panel; posisi diatur halaman) ---------- */
.iv-menu {
  box-sizing: border-box; min-width: 200px; padding: var(--iv-space-1-5);
  background: var(--iv-surface); border: var(--iv-bw) solid var(--iv-border); border-radius: var(--iv-radius-xl); box-shadow: var(--iv-shadow-lg);
  z-index: var(--iv-z-dropdown);
}
.iv-menu__item {
  box-sizing: border-box; display: flex; align-items: center; gap: var(--iv-space-2); width: 100%; min-height: var(--iv-sz-md-h);
  padding: 0 var(--iv-space-3); font:var(--iv-fw-medium) var(--iv-sz-md-fs)/var(--iv-leading-tight) var(--iv-font-sans); text-align: left; text-decoration: none;
  color: var(--iv-text-2); background: transparent; border: 0; border-radius: var(--iv-radius-md); cursor: pointer;
}
.iv-menu__item > i { font-size: var(--iv-sz-md-icon); color: var(--iv-text-muted); }
.iv-menu__item { transition: background var(--iv-dur-fast) var(--iv-ease), color var(--iv-dur-fast) var(--iv-ease); }
.iv-menu__item:hover { background: var(--iv-menu-bg-hover); color: var(--iv-text); }
.iv-menu__item:focus-visible { outline: none; background: var(--iv-menu-bg-hover); color: var(--iv-text); box-shadow: var(--iv-focus-ring); }
.iv-menu__item:active { background: var(--iv-menu-bg-press); }
.iv-menu__item.is-active { background: var(--iv-menu-bg-active); color: var(--iv-primary); }
.iv-menu__item:disabled, .iv-menu__item.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.iv-menu__item--danger:hover { background: var(--iv-danger-soft); }
.iv-menu__item--danger:active { background: color-mix(in srgb, var(--iv-danger) 22%, var(--iv-danger-soft)); }
.iv-menu__item--danger, .iv-menu__item--danger > i { color: var(--iv-danger-strong); }
.iv-menu__sep { height: 1px; margin: var(--iv-space-1-5) calc(var(--iv-space-1-5) * -1); background: var(--iv-border); border: 0; }

/* ---------- 10. Preferensi gerak ---------- */
@media (prefers-reduced-motion: reduce) {
  .iv-btn, .iv-input, .iv-tag, .iv-toast, .iv-check__box, .iv-switch__track, .iv-page, .iv-tab { transition: none; }
  .iv-modal__dialog { animation: none; }
  .iv-btn.is-loading::after { animation-duration: 1.4s; }
}

/* ---------- 20. Table ----------
   <div class="iv-table-wrap"><table class="iv-table iv-table--flush"> <thead><tr><th>…</th></tr></thead><tbody><tr>…</tr></tbody></table></div>
   Ukuran : iv-table--xs|sm|md|lg|xl (tinggi baris = --iv-c-h, font = --iv-c-fs)
   Varian : --muted (isi sel abu) · --flush (tanpa garis tepi kiri/kanan, untuk di dalam wrap) · --sentence (header huruf biasa)
            --striped · --sticky (header menempel saat scroll)
   State  : tr:hover · tr.is-clickable (hover+pressed) · tr.is-selected · tr.is-muted (disembunyikan/nonaktif) · tr:focus-visible */
.iv-table-wrap {
  box-sizing: border-box; overflow: auto; background: var(--iv-table-bg);
  border: var(--iv-bw) solid var(--iv-table-border); border-radius: var(--iv-table-radius);
}
.iv-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--iv-c-fs); line-height: var(--iv-leading-snug); color: var(--iv-text); }
.iv-table th, .iv-table td {
  box-sizing: border-box; height: var(--iv-c-h); padding: var(--iv-space-1) var(--iv-table-cell-px);
  border-bottom: var(--iv-bw) solid var(--iv-table-border); border-right: var(--iv-bw) solid var(--iv-table-border);
  text-align: left; vertical-align: middle; white-space: nowrap;
}
.iv-table th:last-child, .iv-table td:last-child { border-right: none; }
.iv-table tbody tr:last-child td { border-bottom: none; }
.iv-table th {
  font-weight: var(--iv-fw-medium); text-transform: uppercase; letter-spacing: var(--iv-ls-wide); font-size: var(--iv-text-12);
  color: var(--iv-table-head-fg); background: var(--iv-table-head-bg);
}
.iv-table--sentence th { text-transform: none; letter-spacing: normal; font-size: var(--iv-c-fs); font-weight: var(--iv-fw-regular); color: var(--iv-text); }
.iv-table--muted td { color: var(--iv-text-muted); }
.iv-table--flush th:first-child, .iv-table--flush td:first-child { border-left: none; }
.iv-table--sticky thead th { position: sticky; top: 0; z-index: var(--iv-z-2); }
.iv-table--striped tbody tr:nth-child(even) td { background: var(--iv-table-row-stripe-bg); }

/* baris: hover → pressed → selected */
.iv-table tbody tr { transition: background var(--iv-dur-fast) var(--iv-ease); }
.iv-table tbody tr:hover td { background: var(--iv-table-row-hover-bg); }
.iv-table tbody tr.is-clickable { cursor: pointer; }
.iv-table tbody tr.is-clickable:active td { background: var(--iv-table-row-press-bg); }
.iv-table tbody tr:focus-visible { outline: none; }
.iv-table tbody tr:focus-visible td { background: var(--iv-table-row-hover-bg); box-shadow: inset 0 var(--iv-outline-width) 0 var(--iv-outline-color), inset 0 calc(var(--iv-outline-width) * -1) 0 var(--iv-outline-color); }
.iv-table tbody tr.is-selected td, .iv-table tbody tr.is-selected:hover td { background: var(--iv-table-row-selected-bg); }
.iv-table tbody tr.is-muted td { opacity: .45; }
.iv-table td > .iv-switch, .iv-table td > .iv-btn { vertical-align: middle; }

/* ---------- 21. Nav (sidebar / list menu) ----------
   <nav class="iv-nav"><a class="iv-nav__item is-active"><i class="ph ph-house"></i><span>Dashboard</span></a>…</nav>
   State: default · hover · pressed (:active) · focus-visible · is-active (halaman aktif) · disabled */
.iv-nav { display: flex; flex-direction: column; gap: var(--iv-space-0-5); }
.iv-nav__item {
  box-sizing: border-box; display: flex; align-items: center; gap: var(--iv-space-3); width: 100%; min-height: calc(var(--iv-c-h) + var(--iv-space-2));
  padding: var(--iv-space-2) var(--iv-space-4); font:var(--iv-fw-regular) var(--iv-text-16)/var(--iv-lh-24) var(--iv-font-sans);
  color: var(--iv-nav-fg); text-decoration: none; background: transparent; border: var(--iv-bw) solid transparent; border-radius: var(--iv-c-r);
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background var(--iv-dur-fast) var(--iv-ease), border-color var(--iv-dur-fast) var(--iv-ease), box-shadow var(--iv-dur-fast) var(--iv-ease);
}
.iv-nav__item > i { font-size: var(--iv-c-icon); flex: none; }
.iv-nav__item:hover { background: var(--iv-nav-bg-hover); }
.iv-nav__item:active { background: var(--iv-nav-bg-press); }
.iv-nav__item:focus-visible { outline: none; box-shadow: var(--iv-focus-ring); }
.iv-nav__item.is-active { background: var(--iv-nav-bg-active); border-color: var(--iv-nav-border-active); box-shadow: var(--iv-shadow-hairline); font-weight: var(--iv-fw-medium); }
.iv-nav__item.is-active:active { background: var(--iv-nav-bg-active); }
.iv-nav__item:disabled, .iv-nav__item.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* ---------- 22. Spacing utilities (skala sama dengan --iv-space-*) ---------- */
.iv-p-0{padding:var(--iv-space-0)}
.iv-px-0{padding-inline:var(--iv-space-0)}
.iv-py-0{padding-block:var(--iv-space-0)}
.iv-pt-0{padding-top:var(--iv-space-0)}
.iv-pb-0{padding-bottom:var(--iv-space-0)}
.iv-pl-0{padding-left:var(--iv-space-0)}
.iv-pr-0{padding-right:var(--iv-space-0)}
.iv-m-0{margin:var(--iv-space-0)}
.iv-mx-0{margin-inline:var(--iv-space-0)}
.iv-my-0{margin-block:var(--iv-space-0)}
.iv-mt-0{margin-top:var(--iv-space-0)}
.iv-mb-0{margin-bottom:var(--iv-space-0)}
.iv-ml-0{margin-left:var(--iv-space-0)}
.iv-mr-0{margin-right:var(--iv-space-0)}
.iv-gap-0{gap:var(--iv-space-0)}
.iv-p-px{padding:var(--iv-space-px)}
.iv-px-px{padding-inline:var(--iv-space-px)}
.iv-py-px{padding-block:var(--iv-space-px)}
.iv-pt-px{padding-top:var(--iv-space-px)}
.iv-pb-px{padding-bottom:var(--iv-space-px)}
.iv-pl-px{padding-left:var(--iv-space-px)}
.iv-pr-px{padding-right:var(--iv-space-px)}
.iv-m-px{margin:var(--iv-space-px)}
.iv-mx-px{margin-inline:var(--iv-space-px)}
.iv-my-px{margin-block:var(--iv-space-px)}
.iv-mt-px{margin-top:var(--iv-space-px)}
.iv-mb-px{margin-bottom:var(--iv-space-px)}
.iv-ml-px{margin-left:var(--iv-space-px)}
.iv-mr-px{margin-right:var(--iv-space-px)}
.iv-gap-px{gap:var(--iv-space-px)}
.iv-p-0-5{padding:var(--iv-space-0-5)}
.iv-px-0-5{padding-inline:var(--iv-space-0-5)}
.iv-py-0-5{padding-block:var(--iv-space-0-5)}
.iv-pt-0-5{padding-top:var(--iv-space-0-5)}
.iv-pb-0-5{padding-bottom:var(--iv-space-0-5)}
.iv-pl-0-5{padding-left:var(--iv-space-0-5)}
.iv-pr-0-5{padding-right:var(--iv-space-0-5)}
.iv-m-0-5{margin:var(--iv-space-0-5)}
.iv-mx-0-5{margin-inline:var(--iv-space-0-5)}
.iv-my-0-5{margin-block:var(--iv-space-0-5)}
.iv-mt-0-5{margin-top:var(--iv-space-0-5)}
.iv-mb-0-5{margin-bottom:var(--iv-space-0-5)}
.iv-ml-0-5{margin-left:var(--iv-space-0-5)}
.iv-mr-0-5{margin-right:var(--iv-space-0-5)}
.iv-gap-0-5{gap:var(--iv-space-0-5)}
.iv-p-1{padding:var(--iv-space-1)}
.iv-px-1{padding-inline:var(--iv-space-1)}
.iv-py-1{padding-block:var(--iv-space-1)}
.iv-pt-1{padding-top:var(--iv-space-1)}
.iv-pb-1{padding-bottom:var(--iv-space-1)}
.iv-pl-1{padding-left:var(--iv-space-1)}
.iv-pr-1{padding-right:var(--iv-space-1)}
.iv-m-1{margin:var(--iv-space-1)}
.iv-mx-1{margin-inline:var(--iv-space-1)}
.iv-my-1{margin-block:var(--iv-space-1)}
.iv-mt-1{margin-top:var(--iv-space-1)}
.iv-mb-1{margin-bottom:var(--iv-space-1)}
.iv-ml-1{margin-left:var(--iv-space-1)}
.iv-mr-1{margin-right:var(--iv-space-1)}
.iv-gap-1{gap:var(--iv-space-1)}
.iv-p-1-5{padding:var(--iv-space-1-5)}
.iv-px-1-5{padding-inline:var(--iv-space-1-5)}
.iv-py-1-5{padding-block:var(--iv-space-1-5)}
.iv-pt-1-5{padding-top:var(--iv-space-1-5)}
.iv-pb-1-5{padding-bottom:var(--iv-space-1-5)}
.iv-pl-1-5{padding-left:var(--iv-space-1-5)}
.iv-pr-1-5{padding-right:var(--iv-space-1-5)}
.iv-m-1-5{margin:var(--iv-space-1-5)}
.iv-mx-1-5{margin-inline:var(--iv-space-1-5)}
.iv-my-1-5{margin-block:var(--iv-space-1-5)}
.iv-mt-1-5{margin-top:var(--iv-space-1-5)}
.iv-mb-1-5{margin-bottom:var(--iv-space-1-5)}
.iv-ml-1-5{margin-left:var(--iv-space-1-5)}
.iv-mr-1-5{margin-right:var(--iv-space-1-5)}
.iv-gap-1-5{gap:var(--iv-space-1-5)}
.iv-p-2{padding:var(--iv-space-2)}
.iv-px-2{padding-inline:var(--iv-space-2)}
.iv-py-2{padding-block:var(--iv-space-2)}
.iv-pt-2{padding-top:var(--iv-space-2)}
.iv-pb-2{padding-bottom:var(--iv-space-2)}
.iv-pl-2{padding-left:var(--iv-space-2)}
.iv-pr-2{padding-right:var(--iv-space-2)}
.iv-m-2{margin:var(--iv-space-2)}
.iv-mx-2{margin-inline:var(--iv-space-2)}
.iv-my-2{margin-block:var(--iv-space-2)}
.iv-mt-2{margin-top:var(--iv-space-2)}
.iv-mb-2{margin-bottom:var(--iv-space-2)}
.iv-ml-2{margin-left:var(--iv-space-2)}
.iv-mr-2{margin-right:var(--iv-space-2)}
.iv-gap-2{gap:var(--iv-space-2)}
.iv-p-2-5{padding:var(--iv-space-2-5)}
.iv-px-2-5{padding-inline:var(--iv-space-2-5)}
.iv-py-2-5{padding-block:var(--iv-space-2-5)}
.iv-pt-2-5{padding-top:var(--iv-space-2-5)}
.iv-pb-2-5{padding-bottom:var(--iv-space-2-5)}
.iv-pl-2-5{padding-left:var(--iv-space-2-5)}
.iv-pr-2-5{padding-right:var(--iv-space-2-5)}
.iv-m-2-5{margin:var(--iv-space-2-5)}
.iv-mx-2-5{margin-inline:var(--iv-space-2-5)}
.iv-my-2-5{margin-block:var(--iv-space-2-5)}
.iv-mt-2-5{margin-top:var(--iv-space-2-5)}
.iv-mb-2-5{margin-bottom:var(--iv-space-2-5)}
.iv-ml-2-5{margin-left:var(--iv-space-2-5)}
.iv-mr-2-5{margin-right:var(--iv-space-2-5)}
.iv-gap-2-5{gap:var(--iv-space-2-5)}
.iv-p-3{padding:var(--iv-space-3)}
.iv-px-3{padding-inline:var(--iv-space-3)}
.iv-py-3{padding-block:var(--iv-space-3)}
.iv-pt-3{padding-top:var(--iv-space-3)}
.iv-pb-3{padding-bottom:var(--iv-space-3)}
.iv-pl-3{padding-left:var(--iv-space-3)}
.iv-pr-3{padding-right:var(--iv-space-3)}
.iv-m-3{margin:var(--iv-space-3)}
.iv-mx-3{margin-inline:var(--iv-space-3)}
.iv-my-3{margin-block:var(--iv-space-3)}
.iv-mt-3{margin-top:var(--iv-space-3)}
.iv-mb-3{margin-bottom:var(--iv-space-3)}
.iv-ml-3{margin-left:var(--iv-space-3)}
.iv-mr-3{margin-right:var(--iv-space-3)}
.iv-gap-3{gap:var(--iv-space-3)}
.iv-p-3-5{padding:var(--iv-space-3-5)}
.iv-px-3-5{padding-inline:var(--iv-space-3-5)}
.iv-py-3-5{padding-block:var(--iv-space-3-5)}
.iv-pt-3-5{padding-top:var(--iv-space-3-5)}
.iv-pb-3-5{padding-bottom:var(--iv-space-3-5)}
.iv-pl-3-5{padding-left:var(--iv-space-3-5)}
.iv-pr-3-5{padding-right:var(--iv-space-3-5)}
.iv-m-3-5{margin:var(--iv-space-3-5)}
.iv-mx-3-5{margin-inline:var(--iv-space-3-5)}
.iv-my-3-5{margin-block:var(--iv-space-3-5)}
.iv-mt-3-5{margin-top:var(--iv-space-3-5)}
.iv-mb-3-5{margin-bottom:var(--iv-space-3-5)}
.iv-ml-3-5{margin-left:var(--iv-space-3-5)}
.iv-mr-3-5{margin-right:var(--iv-space-3-5)}
.iv-gap-3-5{gap:var(--iv-space-3-5)}
.iv-p-4{padding:var(--iv-space-4)}
.iv-px-4{padding-inline:var(--iv-space-4)}
.iv-py-4{padding-block:var(--iv-space-4)}
.iv-pt-4{padding-top:var(--iv-space-4)}
.iv-pb-4{padding-bottom:var(--iv-space-4)}
.iv-pl-4{padding-left:var(--iv-space-4)}
.iv-pr-4{padding-right:var(--iv-space-4)}
.iv-m-4{margin:var(--iv-space-4)}
.iv-mx-4{margin-inline:var(--iv-space-4)}
.iv-my-4{margin-block:var(--iv-space-4)}
.iv-mt-4{margin-top:var(--iv-space-4)}
.iv-mb-4{margin-bottom:var(--iv-space-4)}
.iv-ml-4{margin-left:var(--iv-space-4)}
.iv-mr-4{margin-right:var(--iv-space-4)}
.iv-gap-4{gap:var(--iv-space-4)}
.iv-p-5{padding:var(--iv-space-5)}
.iv-px-5{padding-inline:var(--iv-space-5)}
.iv-py-5{padding-block:var(--iv-space-5)}
.iv-pt-5{padding-top:var(--iv-space-5)}
.iv-pb-5{padding-bottom:var(--iv-space-5)}
.iv-pl-5{padding-left:var(--iv-space-5)}
.iv-pr-5{padding-right:var(--iv-space-5)}
.iv-m-5{margin:var(--iv-space-5)}
.iv-mx-5{margin-inline:var(--iv-space-5)}
.iv-my-5{margin-block:var(--iv-space-5)}
.iv-mt-5{margin-top:var(--iv-space-5)}
.iv-mb-5{margin-bottom:var(--iv-space-5)}
.iv-ml-5{margin-left:var(--iv-space-5)}
.iv-mr-5{margin-right:var(--iv-space-5)}
.iv-gap-5{gap:var(--iv-space-5)}
.iv-p-6{padding:var(--iv-space-6)}
.iv-px-6{padding-inline:var(--iv-space-6)}
.iv-py-6{padding-block:var(--iv-space-6)}
.iv-pt-6{padding-top:var(--iv-space-6)}
.iv-pb-6{padding-bottom:var(--iv-space-6)}
.iv-pl-6{padding-left:var(--iv-space-6)}
.iv-pr-6{padding-right:var(--iv-space-6)}
.iv-m-6{margin:var(--iv-space-6)}
.iv-mx-6{margin-inline:var(--iv-space-6)}
.iv-my-6{margin-block:var(--iv-space-6)}
.iv-mt-6{margin-top:var(--iv-space-6)}
.iv-mb-6{margin-bottom:var(--iv-space-6)}
.iv-ml-6{margin-left:var(--iv-space-6)}
.iv-mr-6{margin-right:var(--iv-space-6)}
.iv-gap-6{gap:var(--iv-space-6)}
.iv-p-7{padding:var(--iv-space-7)}
.iv-px-7{padding-inline:var(--iv-space-7)}
.iv-py-7{padding-block:var(--iv-space-7)}
.iv-pt-7{padding-top:var(--iv-space-7)}
.iv-pb-7{padding-bottom:var(--iv-space-7)}
.iv-pl-7{padding-left:var(--iv-space-7)}
.iv-pr-7{padding-right:var(--iv-space-7)}
.iv-m-7{margin:var(--iv-space-7)}
.iv-mx-7{margin-inline:var(--iv-space-7)}
.iv-my-7{margin-block:var(--iv-space-7)}
.iv-mt-7{margin-top:var(--iv-space-7)}
.iv-mb-7{margin-bottom:var(--iv-space-7)}
.iv-ml-7{margin-left:var(--iv-space-7)}
.iv-mr-7{margin-right:var(--iv-space-7)}
.iv-gap-7{gap:var(--iv-space-7)}
.iv-p-8{padding:var(--iv-space-8)}
.iv-px-8{padding-inline:var(--iv-space-8)}
.iv-py-8{padding-block:var(--iv-space-8)}
.iv-pt-8{padding-top:var(--iv-space-8)}
.iv-pb-8{padding-bottom:var(--iv-space-8)}
.iv-pl-8{padding-left:var(--iv-space-8)}
.iv-pr-8{padding-right:var(--iv-space-8)}
.iv-m-8{margin:var(--iv-space-8)}
.iv-mx-8{margin-inline:var(--iv-space-8)}
.iv-my-8{margin-block:var(--iv-space-8)}
.iv-mt-8{margin-top:var(--iv-space-8)}
.iv-mb-8{margin-bottom:var(--iv-space-8)}
.iv-ml-8{margin-left:var(--iv-space-8)}
.iv-mr-8{margin-right:var(--iv-space-8)}
.iv-gap-8{gap:var(--iv-space-8)}
.iv-p-10{padding:var(--iv-space-10)}
.iv-px-10{padding-inline:var(--iv-space-10)}
.iv-py-10{padding-block:var(--iv-space-10)}
.iv-pt-10{padding-top:var(--iv-space-10)}
.iv-pb-10{padding-bottom:var(--iv-space-10)}
.iv-pl-10{padding-left:var(--iv-space-10)}
.iv-pr-10{padding-right:var(--iv-space-10)}
.iv-m-10{margin:var(--iv-space-10)}
.iv-mx-10{margin-inline:var(--iv-space-10)}
.iv-my-10{margin-block:var(--iv-space-10)}
.iv-mt-10{margin-top:var(--iv-space-10)}
.iv-mb-10{margin-bottom:var(--iv-space-10)}
.iv-ml-10{margin-left:var(--iv-space-10)}
.iv-mr-10{margin-right:var(--iv-space-10)}
.iv-gap-10{gap:var(--iv-space-10)}
.iv-p-12{padding:var(--iv-space-12)}
.iv-px-12{padding-inline:var(--iv-space-12)}
.iv-py-12{padding-block:var(--iv-space-12)}
.iv-pt-12{padding-top:var(--iv-space-12)}
.iv-pb-12{padding-bottom:var(--iv-space-12)}
.iv-pl-12{padding-left:var(--iv-space-12)}
.iv-pr-12{padding-right:var(--iv-space-12)}
.iv-m-12{margin:var(--iv-space-12)}
.iv-mx-12{margin-inline:var(--iv-space-12)}
.iv-my-12{margin-block:var(--iv-space-12)}
.iv-mt-12{margin-top:var(--iv-space-12)}
.iv-mb-12{margin-bottom:var(--iv-space-12)}
.iv-ml-12{margin-left:var(--iv-space-12)}
.iv-mr-12{margin-right:var(--iv-space-12)}
.iv-gap-12{gap:var(--iv-space-12)}
.iv-p-16{padding:var(--iv-space-16)}
.iv-px-16{padding-inline:var(--iv-space-16)}
.iv-py-16{padding-block:var(--iv-space-16)}
.iv-pt-16{padding-top:var(--iv-space-16)}
.iv-pb-16{padding-bottom:var(--iv-space-16)}
.iv-pl-16{padding-left:var(--iv-space-16)}
.iv-pr-16{padding-right:var(--iv-space-16)}
.iv-m-16{margin:var(--iv-space-16)}
.iv-mx-16{margin-inline:var(--iv-space-16)}
.iv-my-16{margin-block:var(--iv-space-16)}
.iv-mt-16{margin-top:var(--iv-space-16)}
.iv-mb-16{margin-bottom:var(--iv-space-16)}
.iv-ml-16{margin-left:var(--iv-space-16)}
.iv-mr-16{margin-right:var(--iv-space-16)}
.iv-gap-16{gap:var(--iv-space-16)}
.iv-p-20{padding:var(--iv-space-20)}
.iv-px-20{padding-inline:var(--iv-space-20)}
.iv-py-20{padding-block:var(--iv-space-20)}
.iv-pt-20{padding-top:var(--iv-space-20)}
.iv-pb-20{padding-bottom:var(--iv-space-20)}
.iv-pl-20{padding-left:var(--iv-space-20)}
.iv-pr-20{padding-right:var(--iv-space-20)}
.iv-m-20{margin:var(--iv-space-20)}
.iv-mx-20{margin-inline:var(--iv-space-20)}
.iv-my-20{margin-block:var(--iv-space-20)}
.iv-mt-20{margin-top:var(--iv-space-20)}
.iv-mb-20{margin-bottom:var(--iv-space-20)}
.iv-ml-20{margin-left:var(--iv-space-20)}
.iv-mr-20{margin-right:var(--iv-space-20)}
.iv-gap-20{gap:var(--iv-space-20)}
.iv-mx-auto{margin-inline:auto}