@layer components {
  .sl-body {
    background:
      radial-gradient(
        circle at top left,
        rgba(22, 152, 176, 0.16),
        transparent 24%
      ),
      radial-gradient(
        circle at top right,
        rgba(213, 162, 60, 0.12),
        transparent 22%
      ),
      linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
    overflow-x: hidden;
  }

  .sl-shell {
    @apply flex min-h-screen gap-0 bg-transparent p-[10px];
    max-width: 100vw;
    overflow-x: hidden;
  }

  .sl-sidebar {
    @apply fixed inset-y-2 left-2 z-[130] w-[248px] shrink-0 overflow-y-auto transition-all duration-300 xl:static xl:inset-auto xl:z-auto xl:block;
    transform: translateX(calc(-100% - 16px));
    pointer-events: none;
  }

  .sl-main {
    @apply flex min-h-screen min-w-0 flex-1 flex-col;
  }

  .sl-content {
    @apply flex-1 px-3 py-4 md:px-5 md:py-5 xl:px-7 xl:py-6;
  }

  .sl-site-sidebar-card {
    @apply flex h-[calc(100vh-8px)] flex-col overflow-y-auto overflow-x-hidden border bg-white;
    border-color: var(--sl-border);
    box-shadow: 0 12px 28px rgba(26, 63, 120, 0.11);
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    transition:
      opacity 180ms ease,
      transform 180ms ease;
  }

  .sl-brand {
    @apply flex h-[80px] items-center gap-3 border-b px-4 py-2 transition-transform duration-200 ease-out;
    border-color: var(--sl-border);
    transform-origin: left center;
  }

  .sl-brand__logo img,
  .sl-brand__placeholder {
    @apply h-auto w-[80px] rounded-xl object-contain transition-transform duration-200 ease-out;
  }

  .sl-brand__placeholder {
    @apply flex items-center justify-center bg-[var(--sl-primary-soft)] font-extrabold text-[var(--sl-primary)];
  }

  .sl-brand__text {
    @apply max-w-[140px] text-[14px] font-bold leading-[1.12] tracking-[-0.01em] text-[var(--sl-text-strong)] transition-transform duration-200 ease-out;
  }

  .sl-brand__text-mobile {
    @apply max-w-[250px] text-[14px] font-bold leading-[1.12] tracking-[-0.01em] text-[var(--sl-text-strong)] transition-transform duration-200 ease-out;
    display: none;
  }

  @media (max-width: 640px) {
    .sl-brand__text-mobile {
      display: block;
    }
  }

  .sl-brand:hover .sl-brand__logo img,
  .sl-brand:hover .sl-brand__placeholder,
  .sl-brand:hover .sl-brand__text {
    transform: scale(1.035);
  }

  .sl-nav-item {
    @apply relative flex items-center gap-3.5 rounded-[10px] px-3.5 py-[11px] text-[14px] font-semibold transition;
    color: var(--sl-text);
    font-family: "Inter", sans-serif;
    line-height: 1;
    letter-spacing: 0;
  }

  .sl-nav-item:hover {
    background: linear-gradient(
      90deg,
      rgba(31, 95, 170, 0.08),
      rgba(22, 152, 176, 0.08)
    );
    color: var(--sl-primary);
    box-shadow: none;
  }

  .sl-nav-item.is-active {
    background: linear-gradient(
      90deg,
      rgba(31, 95, 170, 0.14),
      rgba(22, 152, 176, 0.1)
    );
    color: var(--sl-primary);
    box-shadow: none;
  }

  .sl-nav-item::before {
    content: "";
    @apply absolute bottom-0 left-0 top-0 w-[4px] rounded-l-[10px] bg-transparent transition;
  }

  .sl-nav-item:hover::before {
    background: var(--sl-secondary);
  }

  .sl-nav-item.is-active::before {
    background: var(--sl-primary);
  }

  /* Icones do sidebar */
  .sl-nav-item__icon {
    @apply flex h-8 w-8 items-center justify-center rounded-md bg-transparent text-[var(--sl-primary)];
  }

  .sl-nav-item__icon .fa {
    font-size: 20px;
    line-height: 1;
  }

  .sl-nav-item__icon svg {
    @apply h-[20px] w-[20px];
  }

  .sl-nav-item__icon .fa,
  .sl-nav-item__icon svg,
  .sl-stat-card__icon .fa,
  .sl-stat-card__icon svg {
    display: block;
  }

  /* Fim icones sidebar */

  .sl-topbar {
    @apply flex min-h-[82px] flex-wrap items-center gap-4 border bg-white px-5 py-2;
    border-color: var(--sl-border);
    box-shadow: 0 10px 24px rgba(26, 63, 120, 0.06);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
  }

  .sl-shell.is-sidebar-collapsed .sl-sidebar {
    width: 0;
  }

  .sl-shell.is-sidebar-open .sl-sidebar {
    transform: translateX(0);
    pointer-events: auto;
  }

  @media (max-width: 1279px) {
    .sl-sidebar {
      overflow: hidden;
    }
  }

  .sl-shell.is-sidebar-collapsed .sl-site-sidebar-card {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-12px);
  }

  .sl-shell.is-sidebar-collapsed .sl-topbar {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .sl-sidebar-backdrop {
    @apply fixed inset-0 z-[120] border-0 bg-[rgba(15,23,42,0.34)] p-0 opacity-0 transition;
    pointer-events: none;
  }

  .sl-shell.is-sidebar-open .sl-sidebar-backdrop {
    @apply opacity-100;
    pointer-events: auto;
  }

  .sl-topbar__menu {
    @apply flex h-[40px] w-[44px] items-center justify-center rounded-none border-0 bg-transparent p-0 text-[#323943] shadow-none outline-none transition-transform duration-200 ease-out;
  }

  .sl-topbar__menu svg {
    @apply h-7 w-7 stroke-[2.25] transition-transform duration-200 ease-out;
  }

  .sl-topbar__menu:hover svg {
    transform: scale(1.08);
  }

  .sl-topbar__brand-mobile {
    display: none;
  }

  .sl-topbar__brand-group {
    display: none;
  }

  .sl-topbar__brand-mobile img {
    @apply h-[44px] w-auto max-w-[168px] object-contain;
    margin-inline: auto;
  }

  .sl-search {
    @apply relative min-w-[260px] flex-1;
  }

  .sl-search input {
    @apply h-[40px] w-full rounded-full border bg-white pl-14 pr-10 text-[14px] text-[var(--sl-text-strong)] outline-none transition placeholder:text-[#95a9c2] focus:border-[var(--sl-primary)] focus:ring-4 focus:ring-[rgba(31,95,170,0.12)];
    border-color: var(--sl-border);
  }

  .sl-search__icon {
    @apply pointer-events-none absolute left-5 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--sl-secondary)];
  }

  .sl-topbar__cta {
    @apply inline-flex h-[36px] items-center justify-center rounded-[8px] px-8 text-[14px] font-semibold text-white transition hover:brightness-105;
    background: var(--sl-primary);
    min-width: 178px;
  }

  .sl-page-loader {
    @apply fixed inset-0 z-[250] opacity-0 transition duration-200;
    pointer-events: none;
    visibility: hidden;
  }

  .sl-page-loader-pending.sl-page-loader-visible .sl-page-loader,
  .sl-page-loader.is-visible {
    @apply opacity-100;
    pointer-events: auto;
    visibility: visible;
  }

  .sl-page-loader__backdrop {
    @apply absolute inset-0;
    background: rgba(238, 244, 251, 0.6);
    backdrop-filter: blur(10px) saturate(0.94);
    -webkit-backdrop-filter: blur(10px) saturate(0.94);
  }

  .sl-page-loader__dialog {
    @apply absolute left-1/2 top-1/2 flex min-w-[170px] -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-3 rounded-[24px] border bg-[rgba(255,255,255,0.84)] px-7 py-6 text-center;
    border-color: rgba(202, 217, 235, 0.95);
    box-shadow: 0 20px 40px rgba(26, 63, 120, 0.16);
  }

  .sl-page-loader__spinner {
    @apply h-11 w-11 animate-spin text-[#d1dbef];
  }

  .sl-page-loader__spinner path:last-child {
    color: var(--sl-primary);
  }

  .sl-page-loader__copy {
    @apply flex flex-col gap-1;
  }

  .sl-page-loader__copy strong {
    @apply text-[15px] font-extrabold text-[var(--sl-text-strong)];
  }

  .sl-page-loader__copy span {
    @apply text-[12px] font-semibold text-[#70809d];
  }

  .sl-site-sidebar-card__footer {
    @apply mt-auto flex flex-col items-center gap-3 border-t px-3 py-4;
    border-color: var(--sl-border);
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.92),
      rgba(244, 249, 255, 0.92)
    );
  }

  .sl-site-sidebar-card__footer-brand {
    @apply flex w-full items-center justify-center self-center transition-transform duration-200 ease-out;
  }

  .sl-site-sidebar-card__footer-brand img {
    @apply h-[40px] w-auto max-w-[176px] object-contain opacity-95 transition-transform duration-200 ease-out;
    transform: none;
  }

  .sl-site-sidebar-card__footer-brand:hover img {
    transform: scale(1.04);
  }

  .sl-site-sidebar-card__footer-meta {
    @apply flex w-full min-w-0 flex-col items-start self-center text-left;
    max-width: 100%;
  }

  .sl-site-sidebar-card__footer-meta-heading {
    @apply mb-2 text-[11px] font-extrabold uppercase tracking-[0.08em];
    color: #6f7f98;
  }

  .sl-site-sidebar-card__footer-meta-list {
    @apply flex w-full flex-col gap-2;
  }

  .sl-site-sidebar-card__footer-meta-item {
    @apply w-full rounded-[12px] border px-3 py-2;
    border-color: rgba(202, 217, 235, 0.65);
    background: rgba(248, 251, 255, 0.92);
  }

  .sl-site-sidebar-card__footer-meta-item span {
    @apply block text-[10px] font-semibold uppercase tracking-[0.03em];
    color: #7f8ba0;
  }

  .sl-site-sidebar-card__footer-meta-item strong {
    @apply mt-1 block text-[12px] font-bold leading-[1.35];
    color: #496485;
  }

  .sl-stat-card {
    @apply flex items-center gap-3 rounded-[10px] border bg-white px-4 py-[11px] transition-transform duration-200 ease-out;
    border-color: rgba(202, 217, 235, 0.55);
    box-shadow: 0 12px 26px rgba(26, 63, 120, 0.08);
    transform-origin: center;
  }

  .sl-stat-card:hover {
    transform: scale(1.02);
  }

  .sl-stat-card__icon {
    @apply flex h-8 w-8 shrink-0 items-center justify-center rounded-[8px] text-[var(--sl-primary)];
    background: var(--sl-primary-soft);
  }

  .sl-stat-card__icon .fa {
    font-size: 22px;
    line-height: 1;
  }

  .sl-stat-card__icon svg {
    @apply h-5 w-5;
  }

  .sl-stat-card__icon-image {
    @apply h-6 w-6 object-contain;
  }

  .sl-stat-card__eyebrow {
    @apply truncate text-[11px] font-extrabold leading-none text-[var(--sl-text)];
  }

  .sl-stat-card__meta {
    @apply flex items-end justify-between gap-3;
  }

  .sl-stat-card__meta span {
    @apply text-[11px] font-semibold text-slate-500;
  }

  .sl-stat-card__meta strong {
    @apply text-[15px] font-extrabold text-[var(--sl-text)];
  }

  .sl-panel {
    @apply rounded-[16px] border bg-white px-4 py-4;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border-color: rgba(202, 217, 235, 0.55);
    box-shadow: 0 14px 30px rgba(26, 63, 120, 0.08);
  }

  .sl-panel__header {
    @apply mb-4 flex items-center justify-between gap-3 border-b border-[var(--sl-border-soft)] pb-3;
  }

  .sl-panel__header h2 {
    @apply m-0 text-[14px] font-extrabold text-[var(--sl-text-strong)];
  }

  .sl-panel__action {
    @apply inline-flex items-center gap-1 rounded-[10px] px-4 py-1.5 text-[11px] font-semibold transition;
    background: var(--sl-primary-soft);
    color: var(--sl-primary);
  }

  .sl-panel__action:hover {
    background: var(--sl-blue-soft);
    color: var(--sl-primary);
  }

  .sl-chart {
    @apply grid grid-cols-4 gap-4 pt-1;
    min-height: 198px;
  }

  .sl-chart__item {
    @apply flex flex-col justify-end gap-3 text-center;
  }

  .sl-chart__bar-wrap {
    @apply flex h-[150px] items-end justify-center rounded-[14px] border border-[var(--sl-border-soft)] bg-[linear-gradient(180deg,#ffffff_0%,#f7fbff_100%)] transition-colors duration-200 ease-out;
    position: relative;
  }

  .sl-chart__bar {
    @apply w-[66%] rounded-t-[14px] transition-transform duration-200 ease-out;
    transform-origin: bottom center;
  }

  .sl-chart--destination .sl-chart__item:nth-child(1) .sl-chart__bar {
    background: #084e77;
  }

  .sl-chart--destination .sl-chart__item:nth-child(2) .sl-chart__bar {
    background: #26d1c3;
  }

  .sl-chart--destination .sl-chart__item:nth-child(3) .sl-chart__bar {
    background: #109ff8;
  }

  .sl-chart--destination .sl-chart__item:nth-child(4) .sl-chart__bar {
    background: #a7e0dc;
  }

  .sl-chart--destination .sl-chart__item:nth-child(5) .sl-chart__bar {
    background: #88b8d6;
  }

  .sl-chart--documents .sl-chart__item:nth-child(1) .sl-chart__bar {
    background: #1f5a84;
  }

  .sl-chart--documents .sl-chart__item:nth-child(2) .sl-chart__bar {
    background: #0f9cb6;
  }

  .sl-chart--documents .sl-chart__item:nth-child(3) .sl-chart__bar {
    background: #1f93e7;
  }

  .sl-chart--documents .sl-chart__item:nth-child(4) .sl-chart__bar {
    background: #5968d8;
  }

  .sl-chart--documents .sl-chart__item:nth-child(5) .sl-chart__bar {
    background: #f0a63a;
  }

  .sl-document-chart {
    @apply flex flex-col gap-5;
    width: 100%;
    min-width: 0;
  }

  .sl-panel__body--document-chart {
    width: 100%;
  }

  .sl-document-chart__summary {
    @apply grid gap-3 md:grid-cols-2;
    width: 100%;
    min-width: 0;
  }

  .sl-document-chart__summary-card {
    @apply rounded-[16px] border px-4 py-3;
    border-color: rgba(207, 224, 247, 0.8);
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  }

  .sl-document-chart__summary-card span {
    @apply block text-[11px] font-semibold uppercase tracking-[0.04em];
    color: #7b92b2;
  }

  .sl-document-chart__summary-card strong {
    @apply mt-1 block text-[18px] font-extrabold;
    color: #22476d;
  }

  .sl-document-chart__content {
    @apply grid gap-5 xl:grid-cols-[minmax(0,0.95fr)_minmax(260px,0.85fr)];
    align-items: center;
    width: 100%;
    min-width: 0;
  }

  .sl-document-chart__canvas-wrap {
    @apply relative flex items-center justify-center rounded-[22px] border p-4;
    min-height: 320px;
    width: 100%;
    min-width: 0;
    border-color: rgba(207, 224, 247, 0.8);
    background:
      radial-gradient(
        circle at top,
        rgba(219, 235, 255, 0.24),
        transparent 48%
      ),
      linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  }

  .sl-document-chart__canvas {
    @apply h-full w-full;
    max-width: 320px;
    margin-inline: auto;
  }

  .sl-document-chart__legend {
    @apply flex flex-col gap-3;
    width: 100%;
    min-width: 0;
  }

  .sl-document-chart__legend-item {
    @apply flex items-center gap-3 rounded-[16px] border px-4 py-3;
    width: 100%;
    min-width: 0;
    border-color: rgba(207, 224, 247, 0.72);
    background: rgba(255, 255, 255, 0.88);
  }

  .sl-document-chart__legend-swatch {
    @apply h-3 w-3 shrink-0 rounded-full;
  }

  .sl-document-chart__legend-swatch.is-1 {
    background: #1f5a84;
  }

  .sl-document-chart__legend-swatch.is-2 {
    background: #0f9cb6;
  }

  .sl-document-chart__legend-swatch.is-3 {
    background: #1f93e7;
  }

  .sl-document-chart__legend-swatch.is-4 {
    background: #5968d8;
  }

  .sl-document-chart__legend-swatch.is-5 {
    background: #f0a63a;
  }

  .sl-document-chart__legend-copy {
    @apply min-w-0 flex-1;
  }

  .sl-document-chart__legend-copy strong {
    @apply block truncate text-[14px] font-bold;
    color: #27486d;
  }

  .sl-document-chart__legend-copy span {
    @apply mt-1 block text-[12px] font-medium;
    color: #7890b0;
  }

  .sl-document-chart__legend-item em {
    @apply text-[13px] font-extrabold not-italic;
    color: #23476f;
  }

  .sl-chart__item:hover .sl-chart__bar-wrap {
    background: linear-gradient(180deg, #ffffff 0%, #eef9fb 100%);
  }

  .sl-chart__item:hover .sl-chart__bar {
    transform: scaleY(1.04) scaleX(1.03);
  }

  .sl-chart--documents .sl-chart__bar-wrap {
    position: relative;
    overflow: visible;
  }

  .sl-chart__value {
    @apply absolute left-1/2 top-3 flex -translate-x-1/2 flex-col items-center rounded-[10px] px-2 py-1 text-center;
    min-width: 58px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(207, 224, 247, 0.9);
    box-shadow: 0 8px 18px rgba(31, 95, 170, 0.08);
    pointer-events: none;
    position: absolute;
    z-index: 10;
  }

  .sl-chart__item:hover .sl-chart__value {
    margin-top: -10px;
    position: absolute;
    z-index: 10;
    transform: translateX(-50%) translateY(-4px);
  }

  .sl-chart__value strong {
    @apply text-[13px] font-extrabold leading-none;
    color: #22476d;
  }

  .sl-chart__value span {
    @apply mt-1 text-[10px] font-semibold leading-none;
    color: #7b92b2;
  }

  .sl-chart__label {
    @apply text-[10px] font-semibold leading-3 text-slate-400;
  }

  @media (max-width: 1023px) {
    .sl-panel__body--document-chart {
      display: flex;
      justify-content: center;
      width: 100%;
      min-width: 0;
    }

    .sl-panel__body--document-chart .sl-document-chart {
      width: 100%;
      max-width: 100%;
      margin-inline: auto;
    }

    .sl-chart {
      @apply grid-cols-2 gap-3;
      min-height: 0;
    }

    .sl-chart__bar-wrap {
      @apply h-[132px];
    }

    .sl-chart__label {
      @apply text-[11px] leading-4;
    }

    .sl-document-chart__content {
      @apply grid-cols-1;
      justify-items: center;
      width: 100%;
      max-width: 100%;
    }

    .sl-document-chart__canvas-wrap {
      min-height: 220px;
      padding: 0.75rem;
      overflow: hidden;
      width: 100%;
      max-width: 100%;
      display: grid;
      place-items: center;
    }

    .sl-document-chart__canvas {
      width: min(100%, 220px) !important;
      height: min(100%, 220px) !important;
      max-width: 220px;
      max-height: 220px;
      position: static;
      transform: none;
      margin: 0 auto !important;
      display: block;
    }

    .sl-document-chart__legend {
      width: 100%;
      max-width: 100%;
    }

    .sl-document-chart__legend-item {
      max-width: 100%;
    }
  }

  .sl-list-row {
    @apply flex items-start gap-4 rounded-2xl border-b border-[var(--sl-border-soft)] py-4 last:border-b-0;
    min-width: 0;
  }

  .sl-list-row__copy {
    @apply min-w-0 flex-1;
  }

  .sl-list-row__icon {
    @apply flex h-9 w-9 shrink-0 items-center justify-center rounded-[7px];
  }

  .sl-list-row__icon svg {
    @apply h-[18px] w-[18px];
  }

  .sl-list-row__icon.is-blue {
    background: #dbe9ff;
    color: #1f5ea7;
  }

  .sl-list-row__icon.is-amber {
    background: #fff0c9;
    color: #c48112;
  }

  .sl-list-row h3 {
    @apply truncate text-[14px] font-bold leading-[1.15] text-[var(--sl-text)];
  }

  .sl-list-row p {
    @apply text-[13px] font-extrabold leading-[1.15];
    color: #0d87b7;
  }

  .sl-list-row span {
    @apply text-[12px] font-medium leading-[1.1];
  }

  .sl-list-row__date {
    @apply text-[12px] font-medium leading-[1.1] text-[var(--sl-text)];
  }

  .sl-inline-action {
    @apply inline-flex h-8 items-center justify-center gap-2 rounded-[10px] px-5 text-[12px] font-semibold transition;
    background: var(--sl-primary-soft);
    color: var(--sl-primary);
    align-self: flex-start;
    min-width: 152px;
  }

  .sl-inline-action__label {
    color: inherit;
  }

  .sl-inline-action:hover {
    background: var(--sl-blue-soft);
    color: var(--sl-primary);
  }

  .sl-inline-action--home {
    @apply min-w-[124px];
    background: var(--sl-primary);
    color: #ffffff;
  }

  .sl-inline-action--home svg {
    color: #cfe0ff;
  }

  .sl-inline-action--home:hover {
    background: #184f92;
    color: #ffffff;
  }

  @media (max-width: 1023px) {
    .sl-content {
      @apply px-3 py-4;
    }

    .sl-panel__header {
      min-width: 0;
    }

    .sl-panel__header h2 {
      min-width: 0;
    }

    .sl-list-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 0.875rem;
      align-items: start;
    }

    .sl-list-row__copy {
      width: 100%;
    }

    .sl-inline-action {
      grid-column: 1 / -1;
      width: 100%;
      min-width: 0;
      justify-content: center;
    }

    .sl-topbar {
      @apply grid gap-3 px-3 py-3;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      height: auto;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    .sl-search {
      @apply min-w-0 w-full;
      grid-column: 1 / -1;
    }

    .sl-topbar__cta {
      min-width: 0;
      justify-self: end;
    }
  }

  @media (max-width: 767px) {
    .sl-sidebar {
      left: max(0.5rem, env(safe-area-inset-left));
      top: max(0.5rem, env(safe-area-inset-top));
      bottom: max(0.5rem, env(safe-area-inset-bottom));
      width: min(86vw, 320px);
      max-width: calc(100vw - 1rem - env(safe-area-inset-left));
      max-height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }

    .sl-site-sidebar-card {
      height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
      max-height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
      border-top-left-radius: 14px;
      border-bottom-left-radius: 14px;
      border-top-right-radius: 14px;
      border-bottom-right-radius: 14px;
    }

    .sl-brand {
      height: auto;
      align-items: center;
      gap: 0.875rem;
      padding: 0.875rem 1rem;
    }

    .sl-brand__logo img,
    .sl-brand__placeholder {
      width: 64px;
      max-width: 64px;
      border-radius: 12px;
    }

    .sl-brand__text {
      max-width: none;
      flex: 1 1 auto;
      min-width: 0;
      font-size: 11px;
      line-height: 1.06;
    }

    .sl-site-sidebar-card > nav {
      min-height: 0;
      overflow-y: auto;
      padding-bottom: 1rem;
    }

    .sl-nav-item {
      gap: 0.875rem;
      padding: 0.85rem 0.95rem 0.85rem 1rem;
      font-size: 12px;
    }

    .sl-nav-item__icon {
      width: 28px;
      height: 28px;
    }

    .sl-nav-item__icon .fa,
    .sl-nav-item__icon svg {
      width: 18px;
      height: 18px;
    }

    .sl-site-sidebar-card__footer {
      gap: 0.875rem;
      padding: 0.875rem 1rem calc(1rem + env(safe-area-inset-bottom));
      flex-shrink: 0;
    }

    .sl-site-sidebar-card__footer-brand img {
      height: 34px;
      max-width: 150px;
    }

    .sl-site-sidebar-card__footer-meta-heading {
      margin-bottom: 0.4rem;
      font-size: 10px;
    }

    .sl-site-sidebar-card__footer-meta-list {
      gap: 0.625rem;
    }

    .sl-site-sidebar-card__footer-meta-item {
      padding: 0.7rem 0.85rem;
      border-radius: 10px;
    }

    .sl-site-sidebar-card__footer-meta-item span {
      font-size: 9px;
    }

    .sl-site-sidebar-card__footer-meta-item strong {
      font-size: 11px;
      line-height: 1.25;
    }

    .sl-shell {
      @apply p-2;
    }

    .sl-content {
      @apply px-1 py-3;
    }

    .sl-topbar {
      @apply gap-3 px-3 py-3;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-top-right-radius: 12px;
      border-bottom-right-radius: 12px;
    }

    .sl-topbar__brand-group {
      @apply flex min-w-0 items-center gap-2.5 rounded-[12px] border px-2.5 py-2;
      grid-column: 2;
      justify-self: start;
      width: 100%;
      border-color: rgba(202, 217, 235, 0.75);
      background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
    }

    .sl-topbar__brand-mobile {
      @apply flex shrink-0 items-center justify-center overflow-hidden rounded-[10px];
      width: 52px;
      height: 52px;
      max-width: 52px;
      background: rgba(219, 233, 255, 0.45);
    }

    .sl-topbar__brand-mobile img {
      @apply h-[42px] w-auto max-w-[42px] object-contain;
    }

    .sl-brand__text-mobile {
      @apply block min-w-0 flex-1 text-[14px] font-bold leading-[1.05];
      color: var(--sl-text-strong);
    }

    .sl-topbar__menu {
      @apply h-11 w-11 rounded-[12px] bg-[var(--sl-surface-soft)];
      grid-column: 1;
      justify-self: start;
      border: 1px solid rgba(202, 217, 235, 0.75);
      color: #32425c;
      box-shadow: 0 8px 18px rgba(26, 63, 120, 0.08);
    }

    .sl-search {
      @apply w-full;
      grid-column: 1 / -1;
    }

    .sl-search input {
      @apply h-[42px] pl-11 pr-4 text-[13px];
    }

    .sl-search__icon {
      @apply left-4;
    }

    .sl-topbar__cta {
      @apply h-[38px] min-w-0 px-4 text-[12px];
      grid-column: 1 / -1;
      width: 100%;
    }

    .sl-panel {
      @apply px-3 py-3;
    }

    .sl-panel__header {
      @apply gap-2 pb-2;
      align-items: flex-start;
    }

    .sl-panel__action {
      @apply shrink-0 px-3;
    }

    .sl-page-loader__dialog {
      @apply min-w-[156px] rounded-[22px] px-6 py-5;
    }

    .sl-page-loader__spinner {
      @apply h-10 w-10;
    }

    .sl-inline-action {
      @apply w-full;
      min-width: 0;
    }

    .sl-inline-action--home {
      @apply h-9 w-full self-auto rounded-[10px] px-3 text-[11px];
    }

    .sl-list-row {
      gap: 0.75rem;
    }

    .sl-list-row h3 {
      font-size: 13px;
    }

    .sl-list-row p,
    .sl-list-row__date {
      font-size: 11px;
    }
  }

  @media (max-width: 479px) {
    .sl-chart {
      @apply grid-cols-1;
    }

    .sl-chart__bar-wrap {
      @apply h-[120px];
    }

    .sl-topbar__cta,
    .sl-search {
      grid-column: 1 / -1;
    }

    .sl-topbar__menu {
      grid-column: 1;
    }

    .sl-topbar__brand-group {
      grid-column: 2;
      width: 100%;
    }

    .sl-topbar__brand-mobile {
      @apply justify-center;
    }

    .sl-topbar__brand-group {
      @apply gap-2 px-2 py-1.5;
    }

    .sl-brand__text-mobile {
      @apply text-[12px] leading-[1.06];
    }

    .sl-topbar__cta {
      @apply justify-center;
    }
  }

  @media (min-width: 1280px) {
    .sl-sidebar {
      transform: translateX(0);
      pointer-events: auto;
    }

    .sl-sidebar-backdrop {
      display: none !important;
    }
  }
}