/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-red-100: oklch(93.6% 0.032 17.717);
    --color-red-200: oklch(88.5% 0.062 18.334);
    --color-red-300: oklch(80.8% 0.114 19.571);
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-700: oklch(50.5% 0.213 27.518);
    --color-red-800: oklch(44.4% 0.177 26.899);
    --color-red-900: oklch(39.6% 0.141 25.723);
    --color-red-950: oklch(25.8% 0.092 26.042);
    --color-orange-100: oklch(95.4% 0.038 75.164);
    --color-orange-300: oklch(83.7% 0.128 66.29);
    --color-orange-700: oklch(55.3% 0.195 38.402);
    --color-orange-950: oklch(26.6% 0.079 36.259);
    --color-amber-100: oklch(96.2% 0.059 95.617);
    --color-amber-300: oklch(87.9% 0.169 91.605);
    --color-amber-400: oklch(82.8% 0.189 84.429);
    --color-amber-700: oklch(55.5% 0.163 48.998);
    --color-amber-950: oklch(27.9% 0.077 45.635);
    --color-yellow-100: oklch(97.3% 0.071 103.193);
    --color-yellow-300: oklch(90.5% 0.182 98.111);
    --color-yellow-500: oklch(79.5% 0.184 86.047);
    --color-yellow-700: oklch(55.4% 0.135 66.442);
    --color-yellow-800: oklch(47.6% 0.114 61.907);
    --color-yellow-900: oklch(42.1% 0.095 57.708);
    --color-yellow-950: oklch(28.6% 0.066 53.813);
    --color-green-100: oklch(96.2% 0.044 156.743);
    --color-green-500: oklch(72.3% 0.219 149.579);
    --color-green-800: oklch(44.8% 0.119 151.328);
    --color-green-900: oklch(39.3% 0.095 152.535);
    --color-emerald-50: oklch(97.9% 0.021 166.113);
    --color-emerald-100: oklch(95% 0.052 163.051);
    --color-emerald-200: oklch(90.5% 0.093 164.15);
    --color-emerald-300: oklch(84.5% 0.143 164.978);
    --color-emerald-400: oklch(76.5% 0.177 163.223);
    --color-emerald-500: oklch(69.6% 0.17 162.48);
    --color-emerald-700: oklch(50.8% 0.118 165.612);
    --color-emerald-800: oklch(43.2% 0.095 166.913);
    --color-emerald-900: oklch(37.8% 0.077 168.94);
    --color-emerald-950: oklch(26.2% 0.051 172.552);
    --color-teal-50: oklch(98.4% 0.014 180.72);
    --color-teal-100: oklch(95.3% 0.051 180.801);
    --color-teal-200: oklch(91% 0.096 180.426);
    --color-teal-300: oklch(85.5% 0.138 181.071);
    --color-teal-400: oklch(77.7% 0.152 181.912);
    --color-teal-500: oklch(70.4% 0.14 182.503);
    --color-teal-600: oklch(60% 0.118 184.704);
    --color-teal-700: oklch(51.1% 0.096 186.391);
    --color-teal-800: oklch(43.7% 0.078 188.216);
    --color-teal-900: oklch(38.6% 0.063 188.416);
    --color-teal-950: oklch(27.7% 0.046 192.524);
    --color-blue-100: oklch(93.2% 0.032 255.585);
    --color-blue-300: oklch(80.9% 0.105 251.813);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-blue-700: oklch(48.8% 0.243 264.376);
    --color-blue-800: oklch(42.4% 0.199 265.638);
    --color-blue-900: oklch(37.9% 0.146 265.522);
    --color-blue-950: oklch(28.2% 0.091 267.935);
    --color-purple-100: oklch(94.6% 0.033 307.174);
    --color-purple-300: oklch(82.7% 0.119 306.383);
    --color-purple-700: oklch(49.6% 0.265 301.924);
    --color-purple-950: oklch(29.1% 0.149 302.717);
    --color-slate-50: oklch(98.4% 0.003 247.858);
    --color-slate-100: oklch(96.8% 0.007 247.896);
    --color-slate-200: oklch(92.9% 0.013 255.508);
    --color-slate-300: oklch(86.9% 0.022 252.894);
    --color-slate-400: oklch(70.4% 0.04 256.788);
    --color-slate-500: oklch(55.4% 0.046 257.417);
    --color-slate-600: oklch(44.6% 0.043 257.281);
    --color-slate-700: oklch(37.2% 0.044 257.287);
    --color-slate-800: oklch(27.9% 0.041 260.031);
    --color-slate-900: oklch(20.8% 0.042 265.755);
    --color-slate-950: oklch(12.9% 0.042 264.695);
    --color-gray-100: oklch(96.7% 0.003 264.542);
    --color-gray-200: oklch(92.8% 0.006 264.531);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-600: oklch(44.6% 0.03 256.802);
    --color-gray-700: oklch(37.3% 0.034 259.733);
    --color-gray-800: oklch(27.8% 0.033 256.848);
    --color-gray-900: oklch(21% 0.034 264.665);
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-6xl: 72rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --tracking-tight: -0.025em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    --leading-tight: 1.25;
    --leading-relaxed: 1.625;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --animate-spin: spin 1s linear infinite;
    --blur-sm: 8px;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .fixed {
    position: fixed;
  }
  .static {
    position: static;
  }
  .top-4 {
    top: calc(var(--spacing) * 4);
  }
  .right-4 {
    right: calc(var(--spacing) * 4);
  }
  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }
  .left-1\/2 {
    left: calc(1/2 * 100%);
  }
  .left-4 {
    left: calc(var(--spacing) * 4);
  }
  .z-50 {
    z-index: 50;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .ms-2 {
    margin-inline-start: calc(var(--spacing) * 2);
  }
  .flex {
    display: flex;
  }
  .hidden {
    display: none;
  }
  .h-1 {
    height: calc(var(--spacing) * 1);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-full {
    height: 100%;
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-80 {
    width: calc(var(--spacing) * 80);
  }
  .max-w-full {
    max-width: 100%;
  }
  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-0 {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-full {
    --tw-translate-x: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .flex-col {
    flex-direction: column;
  }
  .items-center {
    align-items: center;
  }
  .justify-between {
    justify-content: space-between;
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-s-4 {
    border-inline-start-style: var(--tw-border-style);
    border-inline-start-width: 4px;
  }
  .border-blue-500 {
    border-color: var(--color-blue-500);
  }
  .border-gray-500 {
    border-color: var(--color-gray-500);
  }
  .border-green-500 {
    border-color: var(--color-green-500);
  }
  .border-red-500 {
    border-color: var(--color-red-500);
  }
  .border-yellow-500 {
    border-color: var(--color-yellow-500);
  }
  .bg-blue-100 {
    background-color: var(--color-blue-100);
  }
  .bg-blue-500 {
    background-color: var(--color-blue-500);
  }
  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }
  .bg-gray-500 {
    background-color: var(--color-gray-500);
  }
  .bg-green-100 {
    background-color: var(--color-green-100);
  }
  .bg-green-500 {
    background-color: var(--color-green-500);
  }
  .bg-red-100 {
    background-color: var(--color-red-100);
  }
  .bg-red-500 {
    background-color: var(--color-red-500);
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-yellow-100 {
    background-color: var(--color-yellow-100);
  }
  .bg-yellow-500 {
    background-color: var(--color-yellow-500);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .text-blue-500 {
    color: var(--color-blue-500);
  }
  .text-blue-600 {
    color: var(--color-blue-600);
  }
  .text-blue-800 {
    color: var(--color-blue-800);
  }
  .text-gray-500 {
    color: var(--color-gray-500);
  }
  .text-gray-700 {
    color: var(--color-gray-700);
  }
  .text-gray-800 {
    color: var(--color-gray-800);
  }
  .text-green-500 {
    color: var(--color-green-500);
  }
  .text-green-800 {
    color: var(--color-green-800);
  }
  .text-red-500 {
    color: var(--color-red-500);
  }
  .text-red-800 {
    color: var(--color-red-800);
  }
  .text-slate-400 {
    color: var(--color-slate-400);
  }
  .text-slate-500 {
    color: var(--color-slate-500);
  }
  .text-yellow-500 {
    color: var(--color-yellow-500);
  }
  .text-yellow-800 {
    color: var(--color-yellow-800);
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-100 {
    opacity: 100%;
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .hover\:text-gray-700 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-700);
      }
    }
  }
  .focus\:outline-none {
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .dark\:bg-blue-900 {
    &:where(.dark, .dark *) {
      background-color: var(--color-blue-900);
    }
  }
  .dark\:bg-gray-800 {
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-800);
    }
  }
  .dark\:bg-gray-900 {
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-900);
    }
  }
  .dark\:bg-green-900 {
    &:where(.dark, .dark *) {
      background-color: var(--color-green-900);
    }
  }
  .dark\:bg-red-900 {
    &:where(.dark, .dark *) {
      background-color: var(--color-red-900);
    }
  }
  .dark\:bg-yellow-900 {
    &:where(.dark, .dark *) {
      background-color: var(--color-yellow-900);
    }
  }
  .dark\:text-blue-100 {
    &:where(.dark, .dark *) {
      color: var(--color-blue-100);
    }
  }
  .dark\:text-gray-100 {
    &:where(.dark, .dark *) {
      color: var(--color-gray-100);
    }
  }
  .dark\:text-gray-300 {
    &:where(.dark, .dark *) {
      color: var(--color-gray-300);
    }
  }
  .dark\:text-green-100 {
    &:where(.dark, .dark *) {
      color: var(--color-green-100);
    }
  }
  .dark\:text-red-100 {
    &:where(.dark, .dark *) {
      color: var(--color-red-100);
    }
  }
  .dark\:text-slate-400 {
    &:where(.dark, .dark *) {
      color: var(--color-slate-400);
    }
  }
  .dark\:text-yellow-100 {
    &:where(.dark, .dark *) {
      color: var(--color-yellow-100);
    }
  }
}
@layer base {
  html {
    font-family: 'Tajawal', sans-serif;
  }
  html.font-size-small {
    font-size: 14px;
  }
  html.font-size-medium {
    font-size: 16px;
  }
  html.font-size-large {
    font-size: 18px;
  }
  [dir="rtl"] * {
    letter-spacing: 0;
  }
}
@layer components {
  .app-shell {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    color: var(--color-slate-100);
    background-color: #060d1a;
    direction: inherit;
    font-family: 'Sora', 'Tajawal', sans-serif;
  }
  .app-shell--rtl {
    direction: rtl;
    font-family: 'Tajawal', 'Sora', sans-serif;
  }
  [dir="rtl"] .app-shell {
    font-family: 'Tajawal', 'Sora', sans-serif;
  }
  .app-shell--with-sidebar {
    @media (width >= 48rem) {
      display: grid;
    }
    @media (width >= 48rem) {
      grid-template-columns: 14rem minmax(0,1fr);
    }
  }
  @media (min-width: 768px) {
    .app-shell--with-sidebar {
      grid-template-rows: auto minmax(0, 1fr) auto;
      grid-template-areas: "topbar topbar" "sidebar body" "footer footer";
    }
    .app-shell--with-sidebar .shell-topbar {
      grid-area: topbar;
    }
    .app-shell--with-sidebar .app-shell__sidebar {
      grid-area: sidebar;
    }
    .app-shell--with-sidebar .app-shell__body {
      grid-area: body;
      min-width: 0;
    }
    .app-shell--with-sidebar .shell-footer {
      grid-area: footer;
      grid-column: 1 / -1;
    }
  }
  @media (min-width: 768px) {
    .app-shell--overlay-sidebar.app-shell--with-sidebar {
      grid-template-rows: auto auto auto;
    }
    .app-shell--overlay-sidebar.app-shell--with-sidebar .app-shell__body {
      grid-column: 1 / -1;
      grid-row: 2;
    }
    .app-shell--overlay-sidebar.app-shell--with-sidebar .app-shell__sidebar {
      grid-row: 2;
      z-index: 1;
    }
  }
  .app-shell__sidebar {
    display: none;
    border-inline-end-style: var(--tw-border-style);
    border-inline-end-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 6);
    @media (width >= 48rem) {
      display: flex;
    }
    @media (width >= 48rem) {
      flex-direction: column;
    }
    border-color: rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.015);
  }
  .app-shell__sidebar-brand {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 2);
  }
  .app-shell__sidebar-icon {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .app-shell__sidebar-name {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
  }
  .app-shell__sidebar-label {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-500);
  }
  .app-shell__sidebar-nav {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 1);
  }
  .app-shell__sidebar-footer {
    margin-top: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 4);
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .app-shell__sidebar-footer-links {
    margin-bottom: calc(var(--spacing) * 3);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1);
  }
  .app-shell__body {
    flex: 1;
  }
  .shell-topbar {
    position: sticky;
    top: calc(var(--spacing) * 0);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    background: rgba(6, 13, 26, 0.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(16, 185, 129, 0.08);
  }
  .shell-topbar__brand {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    text-decoration-line: none;
    -webkit-user-select: none;
    user-select: none;
    color: inherit;
  }
  .shell-topbar__logo {
    display: flex;
    height: calc(var(--spacing) * 9);
    width: calc(var(--spacing) * 9);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    background: linear-gradient(135deg,#10b981,#059669);
    box-shadow: 0 0 16px rgba(16,185,129,0.4);
  }
  .shell-topbar__name {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
  }
  .shell-topbar__tagline {
    margin-inline-start: calc(var(--spacing) * 1);
    display: none;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-600);
    @media (width >= 48rem) {
      display: block;
    }
  }
  .shell-topbar__links {
    display: none;
    align-items: center;
    gap: calc(var(--spacing) * 7);
    @media (width >= 48rem) {
      display: flex;
    }
  }
  .shell-topbar__link {
    cursor: pointer;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-500);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        color: var(--color-slate-200);
      }
    }
  }
  .shell-topbar__context {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-500);
  }
  .shell-topbar__tenant {
    display: none;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-200);
    text-decoration-line: none;
    @media (width >= 40rem) {
      display: inline-flex;
    }
    border-color: rgba(16,185,129,0.18);
    background: rgba(16,185,129,0.08);
    transition: all 0.15s;
  }
  .shell-topbar__tenant:hover {
    border-color: rgba(16,185,129,0.4);
    background: rgba(16,185,129,0.14);
  }
  .shell-topbar__actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .shell-btn-ghost {
    cursor: pointer;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-400);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    border-color: rgba(255,255,255,0.1);
  }
  .shell-btn-ghost:hover {
    color: var(--color-white);
    border-color: rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.04);
  }
  .shell-btn-primary {
    cursor: pointer;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background: linear-gradient(135deg,#10b981,#059669);
    box-shadow: 0 0 18px rgba(16,185,129,0.28);
  }
  .shell-btn-primary:hover {
    box-shadow: 0 0 28px rgba(16,185,129,0.48);
    transform: translateY(-1px);
  }
  .shell-btn-primary-lg {
    cursor: pointer;
    border-radius: var(--radius-xl);
    padding-inline: calc(var(--spacing) * 7);
    padding-block: calc(var(--spacing) * 3.5);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background: linear-gradient(135deg,#10b981,#059669);
    box-shadow: 0 0 24px rgba(16,185,129,0.32);
  }
  .shell-btn-primary-lg:hover {
    box-shadow: 0 0 40px rgba(16,185,129,0.55);
    transform: translateY(-2px);
  }
  .shell-btn-whatsapp {
    background: #25d366;
    box-shadow: 0 0 24px rgba(37,211,102,0.32);
  }
  .shell-btn-whatsapp:hover {
    box-shadow: 0 0 40px rgba(37,211,102,0.55);
  }
  .shell-btn-ghost-lg {
    cursor: pointer;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 7);
    padding-block: calc(var(--spacing) * 3.5);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    color: var(--color-slate-300);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    border-color: rgba(255,255,255,0.1);
  }
  .shell-btn-ghost-lg:hover {
    color: var(--color-white);
    border-color: rgba(16,185,129,0.35);
    background: rgba(16,185,129,0.04);
  }
  .shell-content {
    overflow: auto;
    padding: calc(var(--spacing) * 8);
  }
  .shell-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
    padding-inline: calc(var(--spacing) * 8);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    @media (width >= 48rem) {
      flex-direction: row;
    }
    padding-inline-end: 5.5rem;
    background: rgba(0,0,0,0.35);
    border-top: 1px solid rgba(255,255,255,0.04);
  }
  .shell-footer__brand {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    color: var(--color-slate-600);
  }
  .shell-footer__logo {
    display: flex;
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    background: linear-gradient(135deg,#10b981,#059669);
  }
  .shell-footer__separator {
    margin-inline: calc(var(--spacing) * 2);
    opacity: 30%;
  }
  .shell-footer__links {
    display: flex;
    gap: calc(var(--spacing) * 7);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-600);
  }
  .shell-footer__links a {
    cursor: pointer;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        color: var(--color-slate-400);
      }
    }
  }
  .shell-nav-link {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-400);
    text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .shell-nav-link--button {
    width: 100%;
    cursor: pointer;
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    text-align: start;
  }
  .shell-nav-link--footer {
    color: var(--color-slate-500);
  }
  .shell-nav-link:hover {
    color: var(--color-white);
    background: rgba(255,255,255,0.06);
  }
  .shell-nav-link.active {
    color: var(--color-white);
    background: rgba(16,185,129,0.12);
    border: 1px solid rgba(16,185,129,0.2);
  }
  .shell-nav-link__icon {
    width: calc(var(--spacing) * 5);
    text-align: center;
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .shell-logout-btn {
    display: flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    text-align: start;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-500);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .shell-logout-btn:hover {
    color: var(--color-red-400);
    background: rgba(239,68,68,0.08);
  }
  .theme-switcher {
    display: inline-flex;
    height: calc(var(--spacing) * 11);
    width: calc(var(--spacing) * 16);
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:focus-visible {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus-visible {
      --tw-ring-color: var(--color-teal-500);
    }
    &:focus-visible {
      --tw-ring-offset-width: 2px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
    &:focus-visible {
      --tw-outline-style: none;
      outline-style: none;
    }
    &:where(.dark, .dark *) {
      &:focus-visible {
        --tw-ring-offset-color: var(--color-slate-950);
      }
    }
  }
  .theme-switcher--shell {
    background-color: color-mix(in srgb, #fff 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
    color: var(--color-slate-700);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-shadow-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-slate-900) 10%, transparent) var(--tw-shadow-alpha), transparent);
    }
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 70%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-slate-950) 70%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--color-slate-200);
    }
    &:where(.dark, .dark *) {
      --tw-shadow-color: color-mix(in srgb, oklch(26.2% 0.051 172.552) 20%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-emerald-950) 20%, transparent) var(--tw-shadow-alpha), transparent);
      }
    }
  }
  .theme-switcher__track {
    position: relative;
    display: block;
    height: calc(var(--spacing) * 7);
    width: calc(var(--spacing) * 12);
    border-radius: calc(infinity * 1px);
    background-color: var(--color-slate-200);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:where(.dark, .dark *) {
      background-color: var(--color-slate-800);
    }
  }
  .theme-switcher__thumb {
    position: absolute;
    inset-inline-start: calc(var(--spacing) * 1);
    top: calc(var(--spacing) * 1);
    display: inline-flex;
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-white);
    color: var(--color-teal-700);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    &:where(.dark, .dark *) {
      --tw-translate-x: calc(var(--spacing) * 5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    &:where(.dark, .dark *) {
      background-color: var(--color-teal-400);
    }
    &:where(.dark, .dark *) {
      color: var(--color-slate-950);
    }
    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
      &:where(.dark, .dark *) {
        --tw-translate-x: calc(var(--spacing) * -5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .theme-switcher__icon {
    height: calc(var(--spacing) * 3.5);
    width: calc(var(--spacing) * 3.5);
  }
  .page-hero {
    border-radius: 2rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-image: linear-gradient(135deg,#0f766e 0%,#164e63 100%);
    padding: calc(var(--spacing) * 5);
    color: var(--color-white);
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    @media (width >= 64rem) {
      display: flex;
    }
    @media (width >= 64rem) {
      align-items: center;
    }
    @media (width >= 64rem) {
      justify-content: space-between;
    }
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 7);
    }
    &:where(.dark, .dark *) {
      border-color: var(--color-slate-800);
    }
  }
  .page-hero__copy {
    flex: 1;
  }
  .page-hero__eyebrow {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.28em;
    letter-spacing: 0.28em;
    color: var(--color-teal-100);
    text-transform: uppercase;
  }
  .page-hero__title {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    @media (width >= 64rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }
  .page-hero__subtitle {
    margin-top: calc(var(--spacing) * 2);
    max-width: var(--container-3xl);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    color: color-mix(in srgb, #fff 78%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 78%, transparent);
    }
    @media (width >= 64rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  .workspace-grid {
    display: grid;
    gap: calc(var(--spacing) * 4);
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .workspace-card {
    border-radius: 1.75rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 5);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:where(.dark, .dark *) {
      border-color: var(--color-slate-800);
    }
    &:where(.dark, .dark *) {
      background-color: var(--color-slate-900);
    }
  }
  .workspace-card--full {
    @media (width >= 64rem) {
      grid-column: span 2 / span 2;
    }
  }
  .workspace-card h2 {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-900);
    &:where(.dark, .dark *) {
      color: var(--color-slate-100);
    }
  }
  .app-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    object-fit: contain;
  }
  .lang-switcher {
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    &:where(.dark, .dark *) {
      border-color: var(--color-slate-700);
    }
  }
  .lang-btn {
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-500);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-100);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--color-slate-400);
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-slate-800);
        }
      }
    }
    letter-spacing: 0.04em;
  }
  .lang-btn--active {
    background-color: var(--color-teal-700);
    color: var(--color-white);
    &:where(.dark, .dark *) {
      background-color: var(--color-teal-600);
    }
  }
  .btn-primary {
    background-color: var(--color-blue-600);
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .btn-secondary {
    background-color: var(--color-gray-200);
    color: var(--color-gray-800);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-300);
      }
    }
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-700);
    }
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-600);
        }
      }
    }
  }
  .dash-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .kpi-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
    border-radius: 1.75rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 5);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:where(.dark, .dark *) {
      border-color: var(--color-slate-800);
    }
    &:where(.dark, .dark *) {
      background-color: var(--color-slate-900);
    }
  }
  .kpi-card__body {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1);
  }
  .kpi-card__label {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.14em;
    letter-spacing: 0.14em;
    color: var(--color-slate-500);
    text-transform: uppercase;
    &:where(.dark, .dark *) {
      color: var(--color-slate-400);
    }
  }
  .kpi-card__value {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-900);
    &:where(.dark, .dark *) {
      color: var(--color-slate-100);
    }
  }
  .kpi-card__sub {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-500);
    &:where(.dark, .dark *) {
      color: var(--color-slate-400);
    }
  }
  .kpi-card__icon {
    display: inline-flex;
    height: calc(var(--spacing) * 14);
    width: calc(var(--spacing) * 14);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-2xl);
  }
  .kpi-card__icon--green {
    background-color: var(--color-emerald-100);
    color: var(--color-emerald-700);
    &:where(.dark, .dark *) {
      background-color: var(--color-emerald-950);
    }
    &:where(.dark, .dark *) {
      color: var(--color-emerald-300);
    }
  }
  .kpi-card__icon--blue {
    background-color: var(--color-blue-100);
    color: var(--color-blue-700);
    &:where(.dark, .dark *) {
      background-color: var(--color-blue-950);
    }
    &:where(.dark, .dark *) {
      color: var(--color-blue-300);
    }
  }
  .kpi-card__icon--teal {
    background-color: var(--color-teal-100);
    color: var(--color-teal-700);
    &:where(.dark, .dark *) {
      background-color: var(--color-teal-950);
    }
    &:where(.dark, .dark *) {
      color: var(--color-teal-300);
    }
  }
  .kpi-card__icon--orange {
    background-color: var(--color-orange-100);
    color: var(--color-orange-700);
    &:where(.dark, .dark *) {
      background-color: var(--color-orange-950);
    }
    &:where(.dark, .dark *) {
      color: var(--color-orange-300);
    }
  }
  .kpi-card__icon--purple {
    background-color: var(--color-purple-100);
    color: var(--color-purple-700);
    &:where(.dark, .dark *) {
      background-color: var(--color-purple-950);
    }
    &:where(.dark, .dark *) {
      color: var(--color-purple-300);
    }
  }
  .kpi-card__icon--red {
    background-color: var(--color-red-100);
    color: var(--color-red-700);
    &:where(.dark, .dark *) {
      background-color: var(--color-red-950);
    }
    &:where(.dark, .dark *) {
      color: var(--color-red-300);
    }
  }
  .kpi-card__icon--yellow {
    background-color: var(--color-yellow-100);
    color: var(--color-yellow-700);
    &:where(.dark, .dark *) {
      background-color: var(--color-yellow-950);
    }
    &:where(.dark, .dark *) {
      color: var(--color-yellow-300);
    }
  }
  .kpi-card__icon--amber {
    background-color: var(--color-amber-100);
    color: var(--color-amber-700);
    &:where(.dark, .dark *) {
      background-color: var(--color-amber-950);
    }
    &:where(.dark, .dark *) {
      color: var(--color-amber-300);
    }
  }
  .dash-tables {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .dash-table-card {
    overflow: hidden;
    border-radius: 1.75rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:where(.dark, .dark *) {
      border-color: var(--color-slate-800);
    }
    &:where(.dark, .dark *) {
      background-color: var(--color-slate-900);
    }
  }
  .dash-table-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-slate-100);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4);
    &:where(.dark, .dark *) {
      border-color: var(--color-slate-800);
    }
  }
  .dash-table-card__title {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-800);
    &:where(.dark, .dark *) {
      color: var(--color-slate-100);
    }
  }
  .dash-table-card__link {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-teal-700);
    &:hover {
      @media (hover: hover) {
        color: var(--color-teal-800);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--color-teal-400);
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-teal-300);
        }
      }
    }
  }
  .data-page {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
  }
  .data-toolbar {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    @media (width >= 40rem) {
      flex-direction: row;
    }
    @media (width >= 40rem) {
      align-items: center;
    }
    @media (width >= 40rem) {
      justify-content: space-between;
    }
  }
  .data-search-wrap {
    display: flex;
    flex: 1;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:focus-within {
      border-color: var(--color-teal-400);
    }
    &:focus-within {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus-within {
      --tw-ring-color: color-mix(in srgb, oklch(77.7% 0.152 181.912) 20%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-teal-400) 20%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      border-color: var(--color-slate-700);
    }
    &:where(.dark, .dark *) {
      background-color: var(--color-slate-900);
    }
  }
  .data-search-wrap input {
    flex: 1;
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-800);
    --tw-outline-style: none;
    outline-style: none;
    &::placeholder {
      color: var(--color-slate-400);
    }
    &:where(.dark, .dark *) {
      color: var(--color-slate-100);
    }
  }
  .data-search-wrap svg, .data-search-wrap .app-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    flex-shrink: 0;
    color: var(--color-slate-400);
  }
  .data-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .btn-add {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-2xl);
    background-color: var(--color-teal-700);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-teal-800);
      }
    }
    &:active {
      --tw-scale-x: 95%;
      --tw-scale-y: 95%;
      --tw-scale-z: 95%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
    &:where(.dark, .dark *) {
      background-color: var(--color-teal-600);
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-teal-500);
        }
      }
    }
  }
  .btn-action {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-slate-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-teal-300);
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-teal-50);
      }
    }
    &:where(.dark, .dark *) {
      border-color: var(--color-slate-700);
    }
    &:where(.dark, .dark *) {
      background-color: var(--color-slate-900);
    }
    &:where(.dark, .dark *) {
      color: var(--color-slate-200);
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          border-color: var(--color-teal-800);
        }
      }
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-slate-800);
        }
      }
    }
  }
  .btn-action--danger {
    border-color: var(--color-red-200);
    color: var(--color-red-600);
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-red-300);
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-50);
      }
    }
    &:where(.dark, .dark *) {
      border-color: var(--color-red-900);
    }
    &:where(.dark, .dark *) {
      color: var(--color-red-400);
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          border-color: var(--color-red-800);
        }
      }
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-red-950);
        }
      }
    }
  }
  .btn-action--primary {
    border-color: var(--color-teal-600);
    background-color: var(--color-teal-50);
    color: var(--color-teal-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-teal-100);
      }
    }
    &:where(.dark, .dark *) {
      border-color: var(--color-teal-700);
    }
    &:where(.dark, .dark *) {
      background-color: var(--color-teal-950);
    }
    &:where(.dark, .dark *) {
      color: var(--color-teal-300);
    }
  }
  .data-table-wrap {
    overflow: hidden;
    border-radius: 1.75rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:where(.dark, .dark *) {
      border-color: var(--color-slate-800);
    }
    &:where(.dark, .dark *) {
      background-color: var(--color-slate-900);
    }
  }
  .data-table {
    min-width: 100%;
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-slate-100);
    }
    &:where(.dark, .dark *) {
      :where(& > :not(:last-child)) {
        border-color: var(--color-slate-800);
      }
    }
  }
  .data-table thead {
    background-color: var(--color-slate-50);
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 60%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-slate-800) 60%, transparent);
      }
    }
  }
  .data-table th {
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 3);
    text-align: end;
    font-size: 0.7rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.16em;
    letter-spacing: 0.16em;
    color: var(--color-slate-500);
    text-transform: uppercase;
    &:where(.dark, .dark *) {
      color: var(--color-slate-400);
    }
  }
  .data-table th:first-child {
    text-align: start;
  }
  .data-table tbody {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-slate-100);
    }
    &:where(.dark, .dark *) {
      :where(& > :not(:last-child)) {
        border-color: var(--color-slate-800);
      }
    }
  }
  .data-table td {
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 3.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-700);
    &:where(.dark, .dark *) {
      color: var(--color-slate-300);
    }
  }
  .data-table__row {
    cursor: pointer;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(98.4% 0.014 180.72) 60%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-teal-50) 60%, transparent);
        }
      }
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 60%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-slate-800) 60%, transparent);
          }
        }
      }
    }
  }
  .data-table__row--selected {
    background-color: var(--color-teal-50);
    &:where(.dark, .dark *) {
      background-color: var(--color-slate-800);
    }
  }
  .data-table__row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 1.5);
  }
  .data-icon-btn {
    display: inline-flex;
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
    color: var(--color-slate-500);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-slate-200);
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-100);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--color-slate-400);
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          border-color: var(--color-slate-700);
        }
      }
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-slate-800);
        }
      }
    }
  }
  .data-icon-btn--danger {
    color: var(--color-red-500);
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-red-200);
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-50);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--color-red-400);
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          border-color: var(--color-red-900);
        }
      }
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-red-950);
        }
      }
    }
  }
  .data-icon-btn--primary {
    color: var(--color-teal-600);
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-teal-200);
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-teal-50);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--color-teal-400);
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          border-color: var(--color-teal-900);
        }
      }
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-teal-950);
        }
      }
    }
  }
  .data-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-slate-100);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-600);
    &:where(.dark, .dark *) {
      border-color: var(--color-slate-800);
    }
    &:where(.dark, .dark *) {
      color: var(--color-slate-400);
    }
  }
  .page-btn {
    display: inline-flex;
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-teal-300);
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-teal-50);
      }
    }
    &:where(.dark, .dark *) {
      border-color: var(--color-slate-700);
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          border-color: var(--color-teal-700);
        }
      }
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-slate-800);
        }
      }
    }
  }
  .page-btn--active {
    border-color: var(--color-teal-600);
    background-color: var(--color-teal-50);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-teal-700);
    &:where(.dark, .dark *) {
      border-color: var(--color-teal-500);
    }
    &:where(.dark, .dark *) {
      background-color: var(--color-slate-800);
    }
    &:where(.dark, .dark *) {
      color: var(--color-teal-300);
    }
  }
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 20);
    text-align: center;
  }
  .empty-state__icon {
    display: inline-flex;
    height: calc(var(--spacing) * 16);
    width: calc(var(--spacing) * 16);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-3xl);
    background-color: var(--color-slate-100);
    &:where(.dark, .dark *) {
      background-color: var(--color-slate-800);
    }
  }
  .empty-state__title {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-700);
    &:where(.dark, .dark *) {
      color: var(--color-slate-300);
    }
  }
  .empty-state__body {
    max-width: var(--container-xs);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-500);
    &:where(.dark, .dark *) {
      color: var(--color-slate-400);
    }
  }
  .loading-ring {
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    animation: var(--animate-spin);
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 4px;
    border-color: var(--color-slate-200);
    border-top-color: var(--color-teal-600);
    &:where(.dark, .dark *) {
      border-color: var(--color-slate-700);
    }
    &:where(.dark, .dark *) {
      border-top-color: var(--color-teal-400);
    }
  }
  .status-badge {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: 0.68rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.12em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .status-badge--open, .status-badge--active, .status-badge--success {
    background-color: var(--color-emerald-100);
    color: var(--color-emerald-700);
    &:where(.dark, .dark *) {
      background-color: var(--color-emerald-950);
    }
    &:where(.dark, .dark *) {
      color: var(--color-emerald-300);
    }
  }
  .status-badge--closed, .status-badge--inactive, .status-badge--default {
    background-color: var(--color-slate-200);
    color: var(--color-slate-600);
    &:where(.dark, .dark *) {
      background-color: var(--color-slate-800);
    }
    &:where(.dark, .dark *) {
      color: var(--color-slate-400);
    }
  }
  .status-badge--pending, .status-badge--warning {
    background-color: var(--color-amber-100);
    color: var(--color-amber-700);
    &:where(.dark, .dark *) {
      background-color: var(--color-amber-950);
    }
    &:where(.dark, .dark *) {
      color: var(--color-amber-300);
    }
  }
  .status-badge--danger, .status-badge--error {
    background-color: var(--color-red-100);
    color: var(--color-red-700);
    &:where(.dark, .dark *) {
      background-color: var(--color-red-950);
    }
    &:where(.dark, .dark *) {
      color: var(--color-red-300);
    }
  }
  .status-badge--info, .status-badge--blue {
    background-color: var(--color-blue-100);
    color: var(--color-blue-700);
    &:where(.dark, .dark *) {
      background-color: var(--color-blue-950);
    }
    &:where(.dark, .dark *) {
      color: var(--color-blue-300);
    }
  }
  .drawer-overlay {
    position: fixed;
    inset: calc(var(--spacing) * 0);
    z-index: 50;
  }
  .drawer-backdrop {
    position: absolute;
    inset: calc(var(--spacing) * 0);
    background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-950) 40%, transparent);
    }
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .drawer-panel {
    position: absolute;
    inset-block: calc(var(--spacing) * 0);
    inset-inline-start: calc(var(--spacing) * 0);
    display: flex;
    width: 100%;
    flex-direction: column;
    background-color: var(--color-white);
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    @media (width >= 40rem) {
      max-width: var(--container-md);
    }
    &:where(.dark, .dark *) {
      background-color: var(--color-slate-900);
    }
  }
  .drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-slate-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 5);
    &:where(.dark, .dark *) {
      border-color: var(--color-slate-800);
    }
  }
  .drawer-title {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-900);
    &:where(.dark, .dark *) {
      color: var(--color-slate-100);
    }
  }
  .drawer-close {
    display: inline-flex;
    height: calc(var(--spacing) * 9);
    width: calc(var(--spacing) * 9);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    color: var(--color-slate-500);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-teal-300);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-teal-700);
      }
    }
    &:where(.dark, .dark *) {
      border-color: var(--color-slate-700);
    }
    &:where(.dark, .dark *) {
      color: var(--color-slate-400);
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          border-color: var(--color-teal-700);
        }
      }
    }
  }
  .drawer-body {
    flex: 1;
    overflow-y: auto;
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 5);
  }
  .drawer-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-slate-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    &:where(.dark, .dark *) {
      border-color: var(--color-slate-800);
    }
  }
  .form-group {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .form-label {
    margin-bottom: calc(var(--spacing) * 1.5);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-slate-700);
    &:where(.dark, .dark *) {
      color: var(--color-slate-300);
    }
  }
  .form-input, .form-select, .form-textarea {
    width: 100%;
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-900);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:focus {
      border-color: var(--color-teal-500);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: color-mix(in srgb, oklch(70.4% 0.14 182.503) 20%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-teal-500) 20%, transparent);
      }
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
    &:where(.dark, .dark *) {
      border-color: var(--color-slate-700);
    }
    &:where(.dark, .dark *) {
      background-color: var(--color-slate-800);
    }
    &:where(.dark, .dark *) {
      color: var(--color-slate-100);
    }
    &:where(.dark, .dark *) {
      &::placeholder {
        color: var(--color-slate-500);
      }
    }
  }
  .form-textarea {
    min-height: 100px;
    resize: vertical;
  }
  .form-hint {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-500);
    &:where(.dark, .dark *) {
      color: var(--color-slate-400);
    }
  }
  .form-error {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-red-600);
    &:where(.dark, .dark *) {
      color: var(--color-red-400);
    }
  }
  .form-row {
    display: grid;
    gap: calc(var(--spacing) * 4);
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .confirm-overlay {
    position: fixed;
    inset: calc(var(--spacing) * 0);
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-950) 50%, transparent);
    }
    padding-inline: calc(var(--spacing) * 4);
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .confirm-dialog {
    width: 100%;
    max-width: var(--container-sm);
    border-radius: var(--radius-3xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:where(.dark, .dark *) {
      border-color: var(--color-slate-800);
    }
    &:where(.dark, .dark *) {
      background-color: var(--color-slate-900);
    }
  }
  .confirm-dialog__icon {
    margin-bottom: calc(var(--spacing) * 4);
    display: inline-flex;
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-2xl);
    background-color: var(--color-red-100);
    color: var(--color-red-600);
    &:where(.dark, .dark *) {
      background-color: var(--color-red-950);
    }
    &:where(.dark, .dark *) {
      color: var(--color-red-400);
    }
  }
  .confirm-dialog__title {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-900);
    &:where(.dark, .dark *) {
      color: var(--color-slate-100);
    }
  }
  .confirm-dialog__body {
    margin-top: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-600);
    &:where(.dark, .dark *) {
      color: var(--color-slate-400);
    }
  }
  .confirm-dialog__actions {
    margin-top: calc(var(--spacing) * 5);
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 2);
  }
  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .filter-chip {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-slate-600);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-teal-300);
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-teal-50);
      }
    }
    &:where(.dark, .dark *) {
      border-color: var(--color-slate-700);
    }
    &:where(.dark, .dark *) {
      background-color: var(--color-slate-900);
    }
    &:where(.dark, .dark *) {
      color: var(--color-slate-300);
    }
  }
  .filter-chip--active {
    border-color: var(--color-teal-500);
    background-color: var(--color-teal-50);
    color: var(--color-teal-700);
    &:where(.dark, .dark *) {
      border-color: var(--color-teal-600);
    }
    &:where(.dark, .dark *) {
      background-color: var(--color-teal-950);
    }
    &:where(.dark, .dark *) {
      color: var(--color-teal-300);
    }
  }
  .detail-panel {
    border-radius: 1.75rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 5);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:where(.dark, .dark *) {
      border-color: var(--color-slate-800);
    }
    &:where(.dark, .dark *) {
      background-color: var(--color-slate-900);
    }
  }
  .detail-panel__title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-900);
    &:where(.dark, .dark *) {
      color: var(--color-slate-100);
    }
  }
  .detail-grid {
    display: grid;
    column-gap: calc(var(--spacing) * 6);
    row-gap: calc(var(--spacing) * 4);
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .detail-field dt {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.14em;
    letter-spacing: 0.14em;
    color: var(--color-slate-500);
    text-transform: uppercase;
    &:where(.dark, .dark *) {
      color: var(--color-slate-400);
    }
  }
  .detail-field dd {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-800);
    &:where(.dark, .dark *) {
      color: var(--color-slate-200);
    }
  }
  .amount-positive {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-emerald-700);
    &:where(.dark, .dark *) {
      color: var(--color-emerald-400);
    }
  }
  .amount-negative {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-red-600);
    &:where(.dark, .dark *) {
      color: var(--color-red-400);
    }
  }
  .amount-neutral {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-800);
    &:where(.dark, .dark *) {
      color: var(--color-slate-200);
    }
  }
  .testimonials-section {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 20);
    background: radial-gradient(circle at top, rgba(16,185,129,0.08), transparent 42%), linear-gradient(180deg, rgba(15,23,42,0.18) 0%, rgba(15,23,42,0.04) 100%);
  }
  .testimonials-section__content {
    margin-inline: auto;
    max-width: var(--container-6xl);
  }
  .testimonials-section__title {
    margin-bottom: calc(var(--spacing) * 3);
    text-align: center;
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary, #f1f5f9);
  }
  .testimonials-section__sub {
    margin-bottom: calc(var(--spacing) * 12);
    text-align: center;
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    color: var(--text-muted, #64748b);
  }
  .testimonials-grid {
    margin-inline: auto;
    max-width: var(--container-6xl);
    gap: calc(var(--spacing) * 6);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
  .testimonial-card {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    border-radius: var(--radius-2xl);
    padding: calc(var(--spacing) * 6);
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  }
  .testimonial-card__header {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .testimonial-card__avatar {
    display: flex;
    height: calc(var(--spacing) * 11);
    width: calc(var(--spacing) * 11);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    background: linear-gradient(135deg, #10b981, #0ea5e9);
  }
  .testimonial-card__meta {
    display: flex;
    flex-direction: column;
  }
  .testimonial-card__name {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary, #f1f5f9);
  }
  .testimonial-card__pharmacy {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-emerald-400);
  }
  .testimonial-card__stars {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: var(--color-amber-400);
  }
  .testimonial-card__body {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: #94a3b8;
  }
  .testimonial-form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .testimonial-rating-row {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .testimonial-label {
    color: #94a3b8;
    font-size: .8125rem;
  }
  .testimonial-desc {
    color: #64748b;
    font-size: .875rem;
    margin-bottom: 1rem;
  }
  .testimonial-star-btn {
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
  }
  .testimonial-star-btn--active {
    color: #f59e0b;
  }
  .testimonial-star-btn--inactive {
    color: #475569;
  }
  .testimonial-status-row {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    margin-bottom: .75rem;
  }
  .testimonial-preview {
    color: #94a3b8;
    font-size: .875rem;
    font-style: italic;
  }
  .testimonials-admin-stars {
    color: #f59e0b;
  }
  .testimonials-admin-date {
    color: #94a3b8;
    font-size: .875rem;
  }
  .testimonials-approve-btn {
    font-size: .75rem;
    padding: .35rem .75rem;
  }
  .testimonials-edit-cell {
    padding: 1rem 1.5rem;
    background: rgba(255,255,255,0.03);
  }
  .testimonials-edit-form {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    max-width: 520px;
  }
  .testimonials-edit-row {
    display: flex;
    gap: .5rem;
    align-items: center;
  }
  .testimonials-edit-label {
    color: #94a3b8;
    font-size: .8125rem;
  }
  .testimonials-edit-star-btn {
    font-size: 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
  }
  .testimonials-edit-star-btn--active {
    color: #f59e0b;
  }
  .testimonials-edit-star-btn--inactive {
    color: #475569;
  }
  .testimonials-edit-select {
    width: auto;
    display: inline-block;
  }
  .testimonials-edit-actions {
    display: flex;
    gap: .75rem;
  }
}
@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--color-gray-900);
    color: var(--color-white);
  }
  .form-control {
    border-color: var(--color-gray-600);
    background-color: var(--color-gray-800);
    color: var(--color-white);
  }
}
a, .btn-link {
  color: #006bb7;
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
.content {
  padding-top: 1.1rem;
}
h1:focus {
  outline: none;
}
.valid.modified:not([type=checkbox]) {
  outline: 1px solid #26b050;
}
.invalid {
  outline: 1px solid #e50000;
}
.validation-message {
  margin-top: calc(var(--spacing) * 1);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: #e50000;
}
.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
  padding: 1rem 3.7rem 1rem 1rem;
  color: white;
}
.blazor-runtime-error {
  position: fixed;
  inset-inline: calc(var(--spacing) * 0);
  bottom: calc(var(--spacing) * 0);
  z-index: 50;
  display: none;
  background-color: var(--color-red-700);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  text-align: center;
  color: var(--color-white);
  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.blazor-runtime-error .reload {
  margin-inline-start: calc(var(--spacing) * 2);
  text-decoration-line: underline;
}
.blazor-error-boundary::after {
  content: "An error has occurred.";
}
.darker-border-checkbox.form-check-input {
  border-color: #929292;
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
@layer components {
  .portal-tenant-login-wrapper, .portal-auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: calc(var(--spacing) * 4);
    min-height: calc(100vh - 9.5rem);
  }
  .portal-hero {
    position: relative;
    overflow: hidden;
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 28);
    text-align: center;
  }
  .portal-hero__glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 90% 55% at 50% -10%, rgba(16,185,129,0.13), transparent), radial-gradient(ellipse 60% 70% at 90% 60%, rgba(16,185,129,0.05), transparent), radial-gradient(ellipse 50% 50% at 10% 80%, rgba(245,158,11,0.04), transparent);
    pointer-events: none;
  }
  .portal-hero__grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(16,185,129,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(16,185,129,0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
  }
  .portal-hero__content {
    position: relative;
    z-index: 10;
    margin-inline: auto;
    max-width: var(--container-3xl);
  }
  .portal-hero__badge {
    margin-bottom: calc(var(--spacing) * 8);
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-emerald-400);
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.18);
    animation: portal-fadein 0.6s ease both;
  }
  .portal-hero__badge-dot {
    height: calc(var(--spacing) * 1.5);
    width: calc(var(--spacing) * 1.5);
    border-radius: calc(infinity * 1px);
    background-color: var(--color-emerald-400);
    animation: portal-pulse 2s ease infinite;
  }
  .portal-hero__title {
    margin-bottom: calc(var(--spacing) * 6);
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
    @media (width >= 48rem) {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
    animation: portal-slideup 0.7s ease 0.1s both;
  }
  .portal-hero__title-accent {
    background: linear-gradient(135deg,#10b981 0%,#34d399 50%,#6ee7b7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .portal-hero__subtitle {
    margin-inline: auto;
    margin-bottom: calc(var(--spacing) * 10);
    max-width: var(--container-xl);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: var(--color-slate-400);
    animation: portal-slideup 0.7s ease 0.2s both;
  }
  .portal-hero__pills {
    margin-bottom: calc(var(--spacing) * 12);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--spacing) * 2.5);
    animation: portal-slideup 0.7s ease 0.3s both;
  }
  .portal-hero__pill {
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-400);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
  }
  .portal-hero__pill-check {
    margin-inline-end: calc(var(--spacing) * 1);
    color: var(--color-emerald-500);
  }
  .portal-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--spacing) * 4);
    animation: portal-slideup 0.7s ease 0.4s both;
  }
  .portal-split {
    margin-inline: auto;
    display: grid;
    max-width: var(--container-6xl);
    align-items: center;
    gap: calc(var(--spacing) * 16);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 20);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .portal-features__heading {
    margin-bottom: calc(var(--spacing) * 8);
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
  }
  .portal-feature-item {
    margin-bottom: calc(var(--spacing) * 7);
    display: flex;
    gap: calc(var(--spacing) * 4);
    animation: portal-fadein 0.6s ease both;
  }
  .portal-feature-item:nth-child(1) {
    animation-delay: 0.1s;
  }
  .portal-feature-item:nth-child(2) {
    animation-delay: 0.2s;
  }
  .portal-feature-item:nth-child(3) {
    animation-delay: 0.3s;
  }
  .portal-feature-item:nth-child(4) {
    animation-delay: 0.4s;
  }
  .portal-feature-item__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
  }
  .portal-feature-icon {
    width: 3rem;
    height: 3rem;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(15,23,42,.08));
  }
  .portal-feature-item__title {
    margin-bottom: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
  }
  .portal-feature-item__desc {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: var(--color-slate-500);
  }
  .portal-admin-gate {
    width: 100%;
    border-radius: var(--radius-2xl);
    padding: calc(var(--spacing) * 8);
    max-width: 360px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(239,68,68,0.15);
    box-shadow: 0 0 80px rgba(239,68,68,0.06), inset 0 1px 0 rgba(255,255,255,0.04);
    animation: portal-fadein 0.6s ease both;
  }
  .portal-admin-gate__header {
    margin-bottom: calc(var(--spacing) * 8);
    text-align: center;
  }
  .portal-admin-gate__logo {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  .portal-admin-gate__title {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
  }
  .portal-admin-gate__subtitle {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-500);
  }
  .portal-login-card {
    border-radius: var(--radius-2xl);
    padding: calc(var(--spacing) * 8);
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(16,185,129,0.12);
    box-shadow: 0 0 80px rgba(16,185,129,0.05), inset 0 1px 0 rgba(255,255,255,0.04);
    animation: portal-fadein 0.8s ease 0.2s both;
  }
  .portal-login-card__title {
    margin-bottom: calc(var(--spacing) * 1);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
  }
  .portal-login-card__subtitle {
    margin-bottom: calc(var(--spacing) * 7);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-500);
  }
  .portal-input-group {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .portal-label {
    margin-bottom: calc(var(--spacing) * 2);
    display: block;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: var(--color-slate-400);
    text-transform: uppercase;
  }
  .portal-input {
    width: 100%;
    border-radius: var(--radius-xl);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-white);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-outline-style: none;
    outline-style: none;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
  }
  .portal-input:focus {
    border-color: rgba(16,185,129,0.45);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.09);
    background: rgba(16,185,129,0.03);
  }
  .portal-input::placeholder {
    color: rgba(255,255,255,0.18);
  }
  .portal-login-card__row {
    margin-bottom: calc(var(--spacing) * 5);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .portal-login-card__forgot {
    cursor: pointer;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-emerald-500);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        color: var(--color-emerald-400);
      }
    }
  }
  .portal-login-card__submit {
    margin-top: calc(var(--spacing) * 1);
    width: 100%;
    cursor: pointer;
    border-radius: var(--radius-xl);
    padding-block: calc(var(--spacing) * 3.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background: linear-gradient(135deg,#10b981,#059669);
    box-shadow: 0 4px 24px rgba(16,185,129,0.28);
  }
  .portal-login-card__submit:hover:not(:disabled) {
    box-shadow: 0 4px 36px rgba(16,185,129,0.48);
    transform: translateY(-1px);
  }
  .portal-login-card__submit:disabled {
    cursor: not-allowed;
    opacity: 60%;
  }
  .portal-login-card__secondary {
    margin-top: calc(var(--spacing) * 3);
    width: 100%;
    cursor: pointer;
    border-radius: var(--radius-xl);
    padding-block: calc(var(--spacing) * 3.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background: transparent;
    border: 1px solid rgba(16,185,129,0.4);
    color: #10b981;
  }
  .portal-login-card__secondary:hover:not(:disabled) {
    background: rgba(16,185,129,0.08);
    border-color: rgba(16,185,129,0.6);
    transform: translateY(-1px);
  }
  .portal-login-card__secondary:disabled {
    cursor: not-allowed;
    opacity: 60%;
  }
  .portal-login-card__error {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-red-400);
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.15);
  }
  .portal-login-card__register {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 1);
    padding-top: calc(var(--spacing) * 6);
    text-align: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-500);
    border-top: 1px solid rgba(255,255,255,0.05);
  }
  .portal-link {
    cursor: pointer;
    color: var(--color-emerald-500);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        color: var(--color-emerald-400);
      }
    }
  }
  .portal-page-header {
    margin-inline: auto;
    max-width: var(--container-2xl);
    padding-inline: calc(var(--spacing) * 6);
    padding-top: calc(var(--spacing) * 16);
    padding-bottom: calc(var(--spacing) * 10);
  }
  .portal-page-header__back {
    margin-bottom: calc(var(--spacing) * 6);
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-500);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        color: var(--color-slate-300);
      }
    }
  }
  .portal-page-header__title {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
  }
  .portal-page-header__subtitle {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: var(--color-slate-400);
  }
  .portal-form-card {
    margin-inline: auto;
    max-width: var(--container-2xl);
    padding-inline: calc(var(--spacing) * 6);
    padding-bottom: calc(var(--spacing) * 20);
  }
  .portal-form-section {
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-2xl);
    padding: calc(var(--spacing) * 6);
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
  }
  .portal-form-section__title {
    margin-bottom: calc(var(--spacing) * 5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
    color: var(--color-emerald-500);
    text-transform: uppercase;
  }
  .portal-form-grid {
    display: grid;
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .portal-form-grid--full {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .portal-success-card {
    margin-inline: auto;
    max-width: var(--container-lg);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 20);
    text-align: center;
  }
  .portal-success-icon {
    margin-inline: auto;
    margin-bottom: calc(var(--spacing) * 6);
    display: flex;
    height: calc(var(--spacing) * 16);
    width: calc(var(--spacing) * 16);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-2xl);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    background: rgba(16,185,129,0.1);
    border: 1px solid rgba(16,185,129,0.2);
    box-shadow: 0 0 40px rgba(16,185,129,0.12);
  }
  .portal-success-title {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
  }
  .portal-success-subtitle {
    margin-bottom: calc(var(--spacing) * 8);
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: var(--color-slate-400);
  }
  @keyframes portal-fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes portal-slideup {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes portal-pulse {
    0%,100% {
      opacity: 1;
    }
    50% {
      opacity: 0.4;
    }
  }
  html:not(.dark) .app-shell {
    background: #f5f8f6;
    color: #0f172a;
  }
  html:not(.dark) .shell-topbar {
    background: rgba(255,255,255,0.78);
    border-bottom-color: rgba(15,23,42,0.08);
  }
  html:not(.dark) .shell-topbar__name, html:not(.dark) .shell-topbar__context, html:not(.dark) .shell-topbar__tenant, html:not(.dark) .app-shell__sidebar-name, html:not(.dark) .portal-login-card__title, html:not(.dark) .portal-page-header__title, html:not(.dark) .portal-success-title, html:not(.dark) .portal-feature-item__title {
    color: #0f172a;
  }
  html:not(.dark) .shell-topbar__tagline, html:not(.dark) .shell-topbar__link, html:not(.dark) .app-shell__sidebar-label, html:not(.dark) .shell-nav-link, html:not(.dark) .shell-logout-btn, html:not(.dark) .shell-footer__brand, html:not(.dark) .shell-footer__links {
    color: #475569;
  }
  html:not(.dark) .shell-topbar__link:hover, html:not(.dark) .portal-page-header__back:hover {
    color: #047857;
  }
  html:not(.dark) .app-shell__sidebar {
    background: rgba(255,255,255,0.72);
    border-color: rgba(15,23,42,0.08);
  }
  html:not(.dark) .shell-nav-link:hover, html:not(.dark) .shell-nav-link.active {
    color: #047857;
    background: rgba(16,185,129,0.08);
  }
  html:not(.dark) .shell-btn-ghost, html:not(.dark) .shell-btn-ghost-lg {
    color: #334155;
    border-color: rgba(15,23,42,0.12);
    background: rgba(255,255,255,0.5);
  }
  html:not(.dark) .shell-btn-ghost:hover, html:not(.dark) .shell-btn-ghost-lg:hover {
    color: #047857;
    border-color: rgba(5,150,105,0.3);
    background: rgba(16,185,129,0.08);
  }
  html:not(.dark) .shell-footer {
    background: rgba(255,255,255,0.58);
    border-top-color: rgba(15,23,42,0.08);
  }
  html:not(.dark) .portal-hero__title, html:not(.dark) .portal-features__heading {
    color: #0f172a;
  }
  html:not(.dark) .portal-hero__subtitle, html:not(.dark) .portal-feature-item__desc, html:not(.dark) .portal-login-card__subtitle, html:not(.dark) .portal-login-card__register, html:not(.dark) .portal-success-subtitle {
    color: #475569;
  }
  html:not(.dark) .portal-hero__grid {
    opacity: 0.5;
    background-image: linear-gradient(rgba(15,118,110,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(15,118,110,0.12) 1px, transparent 1px);
  }
  html:not(.dark) .portal-hero__glow {
    background: radial-gradient(circle, rgba(16,185,129,0.18) 0%, transparent 70%);
  }
  html:not(.dark) .portal-hero__badge, html:not(.dark) .portal-feature-item__icon, html:not(.dark) .portal-success-icon {
    background: rgba(16,185,129,0.1);
    border-color: rgba(5,150,105,0.22);
  }
  html:not(.dark) .portal-hero__pill, html:not(.dark) .portal-login-card, html:not(.dark) .portal-form-section {
    background: rgba(255,255,255,0.74);
    border-color: rgba(15,23,42,0.08);
    box-shadow: 0 24px 70px rgba(15,23,42,0.08);
  }
  html:not(.dark) .portal-label, html:not(.dark) .portal-form-section__title {
    color: #047857;
  }
  html:not(.dark) .portal-input {
    color: #0f172a;
    background: rgba(255,255,255,0.9);
    border-color: rgba(15,23,42,0.12);
  }
  html:not(.dark) .portal-input::placeholder {
    color: rgba(71,85,105,0.5);
  }
  html:not(.dark) .portal-input:focus {
    background: #ffffff;
    border-color: rgba(5,150,105,0.45);
  }
  html:not(.dark) .testimonials-section {
    background: radial-gradient(circle at top, rgba(16,185,129,0.08), transparent 42%), linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(240,253,250,0.72) 100%);
  }
  html:not(.dark) .testimonial-card {
    background: rgba(255,255,255,0.82);
    border-color: rgba(15,23,42,0.08);
    box-shadow: 0 18px 50px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.65);
  }
  html:not(.dark) .testimonial-card__name {
    color: #0f172a;
  }
  html:not(.dark) .testimonials-section__title, html:not(.dark) .pricing-section__title {
    color: #0f172a;
  }
  html:not(.dark) .testimonials-section__sub, html:not(.dark) .pricing-section__sub {
    color: #475569;
  }
  html:not(.dark) .testimonial-card__body {
    color: #475569;
  }
  .platform-panel__header {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .platform-panel__title {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
  }
  .platform-panel__date {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-500);
  }
  .platform-stats-grid {
    margin-bottom: calc(var(--spacing) * 10);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .platform-stat-card {
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 5);
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
  }
  .platform-stat-card--active {
    border-color: rgba(16,185,129,0.25);
    background: rgba(16,185,129,0.06);
  }
  .platform-stat-card--pending {
    border-color: rgba(245,158,11,0.25);
    background: rgba(245,158,11,0.06);
  }
  .platform-stat-card--inactive {
    border-color: rgba(100,116,139,0.25);
  }
  .platform-stat-card__value {
    margin-bottom: calc(var(--spacing) * 1);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
  }
  .platform-stat-card--active .platform-stat-card__value {
    color: var(--color-emerald-400);
  }
  .platform-stat-card--pending .platform-stat-card__value {
    color: #f59e0b;
  }
  .platform-stat-card__label {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-500);
  }
  .platform-sections {
    display: grid;
    gap: calc(var(--spacing) * 8);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .platform-section {
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 6);
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
  }
  .platform-section__header {
    margin-bottom: calc(var(--spacing) * 5);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .platform-section__title {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
  }
  .platform-section__link {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-emerald-500);
    text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        color: var(--color-emerald-400);
      }
    }
  }
  .platform-section__empty {
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-500);
  }
  html:not(.dark) .platform-panel__title, html:not(.dark) .platform-stat-card__value, html:not(.dark) .platform-section__title {
    color: #0f172a;
  }
  html:not(.dark) .platform-panel__date, html:not(.dark) .platform-stat-card__label, html:not(.dark) .platform-section__empty {
    color: #64748b;
  }
  html:not(.dark) .platform-stat-card {
    background: rgba(255,255,255,0.78);
    border-color: rgba(15,23,42,0.08);
    box-shadow: 0 18px 40px rgba(15,23,42,0.06);
  }
  html:not(.dark) .platform-stat-card--active {
    background: rgba(16,185,129,0.08);
    border-color: rgba(16,185,129,0.18);
  }
  html:not(.dark) .platform-stat-card--pending {
    background: rgba(245,158,11,0.08);
    border-color: rgba(245,158,11,0.2);
  }
  html:not(.dark) .platform-stat-card--inactive {
    background: rgba(255,255,255,0.72);
    border-color: rgba(148,163,184,0.22);
  }
  html:not(.dark) .platform-section {
    background: rgba(255,255,255,0.82);
    border-color: rgba(15,23,42,0.08);
    box-shadow: 0 18px 50px rgba(15,23,42,0.06);
  }
  html:not(.dark) .platform-section__link {
    color: #047857;
  }
  html:not(.dark) .platform-section__link:hover {
    color: #065f46;
  }
  .pricing-section {
    padding: 4rem 2rem;
    text-align: center;
  }
  .pricing-section__content {
    max-width: 860px;
    margin: 0 auto;
  }
  .pricing-section__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #f1f5f9);
    margin-bottom: .5rem;
  }
  .pricing-section__sub {
    color: var(--text-muted, #64748b);
    font-size: .875rem;
    margin-bottom: 2rem;
  }
  .pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    max-width: 860px;
    margin: 0 auto 1rem;
  }
  .pricing-card {
    background: rgba(255,255,255,.03);
    border: 1px solid #1e293b;
    border-radius: .75rem;
    padding: 1.5rem;
    text-align: start;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
    position: relative;
  }
  .pricing-card--featured {
    border-color: #10b981;
    background: rgba(16,185,129,.04);
  }
  .pricing-card__badge {
    display: inline-block;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #10b981;
    background: rgba(16,185,129,.12);
    padding: .2rem .6rem;
    border-radius: 999px;
    align-self: start;
  }
  .pricing-card__name {
    font-size: 1.55rem;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1.15;
    letter-spacing: -.03em;
    margin: 0;
  }
  .pricing-card__visual {
    min-height: 11rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    padding: 1.25rem;
    margin: -.25rem -.25rem 0;
    border: 1px solid rgba(148,163,184,.14);
    background: radial-gradient(circle at top, rgba(255,255,255,.18), transparent 58%), linear-gradient(180deg, rgba(15,23,42,.84), rgba(15,23,42,.48));
  }
  .pricing-card__visual--desktop {
    background: radial-gradient(circle at 30% 18%, rgba(56,189,248,.22), transparent 40%), radial-gradient(circle at 75% 78%, rgba(16,185,129,.16), transparent 40%), linear-gradient(180deg, rgba(15,23,42,.9), rgba(15,23,42,.54));
  }
  .pricing-card__visual--web {
    background: radial-gradient(circle at 25% 22%, rgba(16,185,129,.22), transparent 42%), radial-gradient(circle at 80% 74%, rgba(59,130,246,.18), transparent 42%), linear-gradient(180deg, rgba(6,78,59,.9), rgba(15,23,42,.5));
  }
  .pricing-card__visual--mobile {
    background: radial-gradient(circle at 28% 24%, rgba(59,130,246,.22), transparent 42%), radial-gradient(circle at 75% 72%, rgba(14,165,233,.16), transparent 42%), linear-gradient(180deg, rgba(30,41,59,.92), rgba(15,23,42,.5));
  }
  .pricing-card__icon {
    width: min(10rem, 70%);
    height: 6.5rem;
    object-fit: contain;
    filter: drop-shadow(0 16px 24px rgba(15,23,42,.24));
  }
  .pricing-card__features {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: .8125rem;
    color: #64748b;
    line-height: 2;
  }
  .pricing-card__features li {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    text-align: start;
  }
  .pricing-card__features li::before {
    content: "✓";
    color: #10b981;
    flex: 0 0 auto;
    line-height: 2;
  }
  .pricing-card__cta {
    margin-top: auto;
    display: inline-block;
    padding: .5rem 1.25rem;
    border-radius: .4rem;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: opacity .15s;
  }
  .pricing-card__cta--outline {
    border: 1px solid #334155;
    color: #94a3b8;
    background: transparent;
  }
  .pricing-card__cta--outline:hover {
    border-color: #10b981;
    color: #10b981;
  }
  .pricing-card__cta--primary {
    background: #10b981;
    color: #000;
    border: none;
  }
  .pricing-card__cta--primary:hover {
    opacity: .88;
  }
  .pricing-durations {
    color: #475569;
    font-size: .75rem;
    margin-top: .25rem;
  }
  @media (max-width: 900px) {
    .pricing-cards {
      grid-template-columns: 1fr;
      max-width: 30rem;
    }
  }
  .get-started-section {
    padding: 4rem 2rem;
    text-align: center;
  }
  .get-started-section__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #f1f5f9);
    margin-bottom: .5rem;
  }
  .get-started-section__sub {
    color: var(--text-muted, #64748b);
    font-size: .875rem;
    margin-bottom: 2.5rem;
  }
  .get-started-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
  }
  @media (max-width: 767px) {
    .get-started-steps {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .get-started-step {
    background: rgba(255,255,255,.03);
    border: 1px solid #1e293b;
    border-radius: .75rem;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .625rem;
    text-align: center;
    transition: border-color .2s, background .2s;
  }
  .get-started-step:hover {
    border-color: rgba(16,185,129,.4);
    background: rgba(16,185,129,.03);
  }
  .get-started-step__num {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    color: #10b981;
    background: rgba(16,185,129,.1);
    border: 1px solid rgba(16,185,129,.2);
    flex-shrink: 0;
  }
  .get-started-step__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.75rem;
    height: 4.75rem;
  }
  .onboarding-step-icon {
    width: 3.2rem;
    height: 3.2rem;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 12px 22px rgba(15,23,42,.08));
  }
  .get-started-step__title {
    font-size: .9375rem;
    font-weight: 700;
    color: #f1f5f9;
  }
  .get-started-step__desc {
    font-size: .8125rem;
    color: #64748b;
    line-height: 1.6;
  }
  .get-started-step__action {
    margin-top: .375rem;
    min-width: 8.5rem;
    padding: .7rem 1rem;
    border-radius: .75rem;
    font-size: .8125rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  }
  .get-started-step__action:hover {
    transform: translateY(-1px);
  }
  .get-started-step__action--primary {
    color: #ffffff;
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 12px 28px rgba(16,185,129,.24);
  }
  .get-started-step__action--secondary {
    color: #10b981;
    border: 1px solid rgba(16,185,129,.3);
    background: rgba(16,185,129,.06);
  }
  .get-started-section__wiki-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
    color: #10b981;
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
  }
  .get-started-section__wiki-link:hover {
    text-decoration: underline;
  }
  html:not(.dark) .get-started-section__title, html:not(.dark) .get-started-step__title {
    color: #0f172a;
  }
  html:not(.dark) .get-started-section__sub, html:not(.dark) .get-started-step__desc {
    color: #475569;
  }
  html:not(.dark) .get-started-step {
    background: rgba(255,255,255,.7);
    border-color: rgba(15,23,42,.08);
  }
  html:not(.dark) .get-started-step:hover {
    border-color: rgba(5,150,105,.3);
    background: rgba(16,185,129,.04);
  }
  html:not(.dark) .get-started-step__action--secondary {
    color: #047857;
    border-color: rgba(4,120,87,.18);
    background: rgba(16,185,129,.08);
  }
  html:not(.dark) .get-started-section__wiki-link {
    color: #047857;
  }
  .wiki-page {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
  }
  .wiki-hero {
    padding: 2rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(16,185,129,.14);
    background: radial-gradient(circle at top right, rgba(16,185,129,.14), transparent 34%), rgba(255,255,255,.03);
    box-shadow: 0 24px 60px rgba(2,6,23,.18);
    margin-bottom: 1.5rem;
  }
  .wiki-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1rem;
  }
  .wiki-back-link {
    color: #10b981;
    font-size: .8125rem;
    font-weight: 700;
    text-decoration: none;
  }
  .wiki-back-link:hover {
    text-decoration: underline;
  }
  .wiki-hero__eyebrow {
    margin: 0 0 .5rem;
    color: #10b981;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .wiki-hero__title {
    margin: 0;
    color: #f8fafc;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    font-weight: 800;
  }
  .wiki-hero__subtitle {
    margin: .9rem 0 0;
    max-width: 48rem;
    color: #94a3b8;
    font-size: 1rem;
    line-height: 1.7;
  }
  .wiki-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .875rem;
    margin-top: 1.5rem;
  }
  .wiki-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .85rem 1.15rem;
    border-radius: .85rem;
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
  }
  .wiki-btn:hover {
    transform: translateY(-1px);
  }
  .wiki-btn--primary {
    color: #ffffff;
    background: linear-gradient(135deg, #10b981, #0f766e);
    box-shadow: 0 14px 28px rgba(16,185,129,.24);
  }
  .wiki-btn--secondary {
    color: #cbd5e1;
    border: 1px solid rgba(148,163,184,.24);
    background: rgba(15,23,42,.35);
  }
  .wiki-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }
  .wiki-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  .wiki-card {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-height: 100%;
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid rgba(30,41,59,.95);
    background: rgba(255,255,255,.03);
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
  }
  .wiki-card:hover {
    transform: translateY(-2px);
    border-color: rgba(16,185,129,.3);
    background: rgba(16,185,129,.05);
  }
  .wiki-card__step {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #10b981;
    background: rgba(16,185,129,.1);
    font-size: .75rem;
    font-weight: 800;
  }
  .wiki-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    color: #10b981;
    background: radial-gradient(circle at top, rgba(16,185,129,.2), rgba(16,185,129,.05) 60%, rgba(16,185,129,0) 100%), rgba(15,23,42,.7);
    border: 1px solid rgba(16,185,129,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }
  .wiki-card__title {
    margin: 0;
    color: #f8fafc;
    font-size: 1rem;
    font-weight: 800;
  }
  .wiki-card__desc {
    margin: 0;
    color: #94a3b8;
    font-size: .875rem;
    line-height: 1.65;
  }
  .wiki-card__cta {
    margin-top: auto;
    color: #10b981;
    font-size: .8125rem;
    font-weight: 800;
  }
  .wiki-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr) minmax(16rem, .9fr);
    gap: 1rem;
    align-items: start;
  }
  .wiki-panel {
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid rgba(30,41,59,.95);
    background: rgba(255,255,255,.03);
  }
  .wiki-panel--accent {
    border-color: rgba(16,185,129,.2);
    background: linear-gradient(180deg, rgba(16,185,129,.08), rgba(255,255,255,.03));
  }
  .wiki-panel__title {
    margin: 0 0 .9rem;
    color: #f8fafc;
    font-size: 1rem;
    font-weight: 800;
  }
  .wiki-panel__text {
    margin: 0;
    color: #94a3b8;
    font-size: .9375rem;
    line-height: 1.7;
  }
  .wiki-faq-item {
    min-height: 100%;
  }
  .wiki-faq-item--accent {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .wiki-faq-question {
    margin: 0 0 .75rem;
    color: #f8fafc;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.5;
  }
  .wiki-list {
    margin: 0;
    padding-inline-start: 1.1rem;
    color: #cbd5e1;
    font-size: .9375rem;
    line-height: 1.8;
  }
  .wiki-list--ordered {
    padding-inline-start: 1.2rem;
  }
  .wiki-inline-link {
    display: inline-flex;
    margin-top: 1rem;
    color: #10b981;
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
  }
  .wiki-inline-link:hover {
    text-decoration: underline;
  }
  @media (max-width: 1023px) {
    .wiki-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .wiki-faq-grid, .wiki-layout {
      grid-template-columns: 1fr;
    }
  }
  @media (max-width: 639px) {
    .get-started-steps, .wiki-grid {
      grid-template-columns: 1fr;
    }
    .wiki-page {
      padding-inline: 1rem;
    }
    .wiki-hero, .wiki-panel {
      padding: 1.25rem;
    }
    .wiki-actions {
      flex-direction: column;
    }
    .wiki-btn {
      width: 100%;
    }
  }
  html:not(.dark) .wiki-hero {
    background: radial-gradient(circle at top right, rgba(16,185,129,.12), transparent 34%), rgba(255,255,255,.86);
    border-color: rgba(15,23,42,.08);
    box-shadow: 0 24px 50px rgba(15,23,42,.08);
  }
  html:not(.dark) .wiki-hero__title, html:not(.dark) .wiki-card__title, html:not(.dark) .wiki-panel__title, html:not(.dark) .wiki-faq-question {
    color: #0f172a;
  }
  html:not(.dark) .wiki-hero__subtitle, html:not(.dark) .wiki-card__desc, html:not(.dark) .wiki-panel__text, html:not(.dark) .wiki-list, html:not(.dark) .wiki-btn--secondary {
    color: #475569;
  }
  html:not(.dark) .wiki-card, html:not(.dark) .wiki-panel {
    background: rgba(255,255,255,.78);
    border-color: rgba(15,23,42,.08);
  }
  html:not(.dark) .wiki-card:hover {
    background: rgba(16,185,129,.05);
    border-color: rgba(5,150,105,.22);
  }
  html:not(.dark) .wiki-panel--accent {
    background: linear-gradient(180deg, rgba(16,185,129,.08), rgba(255,255,255,.9));
    border-color: rgba(5,150,105,.16);
  }
  html:not(.dark) .wiki-btn--secondary {
    background: rgba(241,245,249,.9);
    border-color: rgba(15,23,42,.08);
  }
  html:not(.dark) .wiki-back-link, html:not(.dark) .wiki-card__cta, html:not(.dark) .wiki-inline-link {
    color: #047857;
  }
  .my-page {
    width: 100%;
    max-width: 960px;
    margin: 2rem auto 4rem;
    padding: 0 1.5rem;
    color: #e2e8f0;
  }
  .my-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.25rem;
  }
  .my-card {
    background: rgba(255,255,255,.03);
    border: 1px solid #1e293b;
    border-radius: .75rem;
    padding: 1.5rem;
  }
  .my-card--spaced {
    margin-bottom: 1.25rem;
  }
  .my-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 1rem;
  }
  .my-sub-heading {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
  }
  .my-plan-name {
    color: #f1f5f9;
  }
  .my-plan-duration, .my-empty-text {
    color: #64748b;
    font-size: .875rem;
  }
  .my-empty-text {
    margin-bottom: 1rem;
  }
  .my-sub-meta {
    font-size: .8125rem;
    color: #64748b;
    line-height: 2.2;
  }
  .my-sub-meta span {
    color: #94a3b8;
  }
  .my-days-left {
    color: #f59e0b;
    font-weight: 700;
  }
  .my-days-expired {
    color: #f87171;
  }
  .my-inline-action {
    margin-top: .9rem;
  }
  .my-access-btn {
    display: inline-block;
    margin-top: 1rem;
    padding: .6rem 1.5rem;
    background: #10b981;
    color: #000;
    font-weight: 700;
    border-radius: .4rem;
    font-size: .875rem;
    text-decoration: none;
    cursor: pointer;
    border: none;
  }
  .my-access-btn:disabled, .my-access-btn--disabled {
    background: #1e293b;
    color: #475569;
    cursor: not-allowed;
  }
  .my-contact {
    font-size: .8125rem;
    color: #64748b;
    line-height: 2.2;
  }
  .my-contact a {
    color: #10b981;
    text-decoration: none;
  }
  .my-banner {
    background: rgba(239,68,68,.08);
    border: 1px solid rgba(239,68,68,.3);
    border-radius: .5rem;
    padding: .75rem 1rem;
    font-size: .8125rem;
    color: #fca5a5;
    margin-bottom: 1rem;
  }
  .my-banner--flush {
    margin-bottom: 0;
  }
  .my-banner--info {
    background: rgba(59,130,246,.08);
    border-color: rgba(59,130,246,.3);
    color: #93c5fd;
  }
  .my-banner--warning {
    background: rgba(245,158,11,.08);
    border-color: rgba(245,158,11,.3);
    color: #fcd34d;
  }
  .sub-activate {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .sub-field-label {
    color: #64748b;
    font-size: .8125rem;
    margin-bottom: .5rem;
  }
  .sub-field-label__optional {
    opacity: .55;
  }
  .sub-toggle-group {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
  }
  .sub-toggle {
    padding: .375rem .875rem;
    border-radius: .35rem;
    border: 1px solid #334155;
    font-size: .8125rem;
    color: #64748b;
    cursor: pointer;
    background: transparent;
    transition: border-color .15s, color .15s;
  }
  .sub-toggle--active {
    border-color: #10b981;
    background: rgba(16,185,129,.08);
    color: #10b981;
  }
  .sub-method-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
  }
  .sub-method-card {
    background: rgba(255,255,255,.02);
    border: 1px solid #1e293b;
    border-radius: .5rem;
    padding: .875rem .75rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s;
  }
  .sub-method-card--active {
    border-color: #10b981;
    background: rgba(16,185,129,.05);
  }
  .sub-method-card__name {
    font-size: .875rem;
    font-weight: 700;
  }
  .sub-method-card__name--cib {
    color: #3b82f6;
  }
  .sub-method-card__name--baridimob {
    color: #10b981;
  }
  .sub-method-card__name--virement {
    color: #f59e0b;
  }
  .sub-method-card__name--stripe {
    color: #6366f1;
  }
  .sub-method-card__label {
    font-size: .6875rem;
    color: #475569;
    margin-top: .2rem;
  }
  .sub-instructions {
    background: rgba(16,185,129,.05);
    border: 1px solid rgba(16,185,129,.2);
    border-radius: .5rem;
    padding: 1rem;
    font-size: .8125rem;
    color: #64748b;
    line-height: 2.2;
  }
  .sub-instructions strong {
    color: #f1f5f9;
  }
  .sub-notify-btn {
    padding: .6rem 1.5rem;
    background: #10b981;
    color: #000;
    font-weight: 700;
    border: none;
    border-radius: .4rem;
    font-size: .875rem;
    cursor: pointer;
    align-self: flex-start;
  }
  .sub-actions {
    display: flex;
    gap: .75rem;
    align-items: center;
    flex-wrap: wrap;
  }
  .sub-reference-input {
    max-width: 360px;
  }
  .sub-notify-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
  }
  .sub-badge {
    display: inline-block;
    padding: .2rem .7rem;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .sub-badge--active {
    background: rgba(5,150,105,.15);
    color: #10b981;
  }
  .sub-badge--pending {
    background: rgba(217,119,6,.15);
    color: #f59e0b;
  }
  .sub-badge--soon {
    background: rgba(245,158,11,.15);
    color: #fcd34d;
  }
  .sub-badge--expired {
    background: rgba(220,38,38,.15);
    color: #f87171;
  }
  .sub-badge--cancelled {
    background: rgba(71,85,105,.15);
    color: #64748b;
  }
  .confirm-phone-hint {
    color: #94a3b8;
    font-size: .875rem;
    margin-bottom: 1.5rem;
  }
  .confirm-phone-send-row {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
  }
  .confirm-phone-send-btn {
    flex: 1;
    min-width: 140px;
  }
  .confirm-phone-otp-group {
    margin-bottom: 1rem;
  }
  .portal-otp-input {
    letter-spacing: .4em;
    font-size: 1.25rem;
    text-align: center;
  }
  .confirm-phone-error-mb {
    margin-bottom: 1rem;
  }
  .confirm-phone-confirm-btn {
    width: 100%;
    margin-bottom: .75rem;
  }
  .confirm-phone-resend-btn {
    width: 100%;
    font-size: .8rem;
  }
  .confirm-phone-send-error {
    margin-top: .75rem;
  }
  .confirm-phone-back {
    margin-top: 1.25rem;
    text-align: center;
  }
  .confirm-phone-back .portal-link {
    font-size: .8rem;
  }
  .prov-step-list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-bottom: 1rem;
  }
  .prov-step-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .875rem;
  }
  .prov-step-icon {
    width: 1.2rem;
    text-align: center;
  }
  .prov-step-spinner {
    width: .85rem;
    height: .85rem;
    border-width: 2px;
    margin-left: .25rem;
  }
  .prov-error-box {
    background: var(--color-danger-bg, #fee2e2);
    color: var(--color-danger);
    padding: .75rem;
    border-radius: .4rem;
    font-size: .8rem;
    margin-top: .5rem;
  }
  @media (max-width: 767px) {
    .my-page {
      margin: 1.25rem auto 3rem;
      padding: 0 1rem;
    }
    .my-grid, .sub-method-grid {
      grid-template-columns: 1fr;
    }
    .shell-topbar {
      align-items: flex-start;
      gap: 1rem;
    }
    .shell-topbar__actions {
      flex-wrap: wrap;
      justify-content: flex-end;
    }
  }
  .portal-status-page {
    max-width: 520px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
    text-align: center;
  }
  .portal-status-page__icon {
    font-size: 3rem;
    margin-bottom: 1rem;
  }
  .portal-status-page__title {
    color: #f1f5f9;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: .75rem;
  }
  .portal-status-page__text {
    color: #64748b;
    max-width: 400px;
    margin: 0 auto 2rem;
  }
  .portal-status-page__meta {
    color: #475569;
    font-size: .8125rem;
  }
  .portal-status-page__meta--spaced {
    margin-top: 1.5rem;
  }
  .portal-status-page__actions {
    display: flex;
    gap: .75rem;
    justify-content: center;
    margin-top: 1.5rem;
    flex-wrap: wrap;
  }
  .portal-status-page__meta a {
    color: #10b981;
  }
  .legal-page {
    width: min(1120px, calc(100% - 2rem));
    margin: 2rem auto 4rem;
  }
  .legal-header {
    padding: 2rem 0 1.25rem;
    border-bottom: 1px solid rgba(148, 163, 184, .18);
  }
  .legal-header__back {
    display: inline-flex;
    margin-bottom: 1.25rem;
    color: #94a3b8;
    font-size: .875rem;
    text-decoration: none;
    transition: color .2s ease;
  }
  .legal-header__back:hover {
    color: #10b981;
  }
  .legal-header__eyebrow {
    color: #10b981;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .18em;
    margin-bottom: .75rem;
    text-transform: uppercase;
  }
  .legal-header__title {
    color: #f8fafc;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.05;
    margin: 0;
  }
  .legal-header__subtitle {
    color: #94a3b8;
    font-size: 1rem;
    line-height: 1.8;
    margin-top: 1rem;
    max-width: 760px;
  }
  .legal-header__meta {
    color: #64748b;
    font-size: .8125rem;
    margin-top: .75rem;
  }
  .legal-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 2rem;
    margin-top: 2rem;
  }
  .legal-toc {
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    position: sticky;
    top: 6rem;
  }
  .legal-toc a {
    border-left: 2px solid rgba(148, 163, 184, .18);
    color: #94a3b8;
    font-size: .875rem;
    padding: .55rem .85rem;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
  }
  .legal-toc a:hover {
    background: rgba(16, 185, 129, .06);
    border-left-color: #10b981;
    color: #d1fae5;
  }
  .legal-document {
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    padding: 2rem;
  }
  .legal-section + .legal-section {
    border-top: 1px solid rgba(148, 163, 184, .16);
    margin-top: 1.75rem;
    padding-top: 1.75rem;
  }
  .legal-section h2 {
    color: #f8fafc;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 .75rem;
  }
  .legal-section p {
    color: #cbd5e1;
    font-size: .98rem;
    line-height: 1.85;
    margin: 0;
  }
  .legal-section p + p {
    margin-top: .85rem;
  }
  .legal-action {
    display: inline-flex;
    margin-top: 1rem;
    color: #10b981;
    font-weight: 700;
    text-decoration: none;
  }
  .legal-action:hover {
    color: #34d399;
  }
  html:not(.dark) .legal-header {
    border-bottom-color: rgba(15, 23, 42, .1);
  }
  html:not(.dark) .legal-header__title, html:not(.dark) .legal-section h2 {
    color: #0f172a;
  }
  html:not(.dark) .legal-header__subtitle, html:not(.dark) .legal-toc a {
    color: #475569;
  }
  html:not(.dark) .legal-document {
    background: rgba(255, 255, 255, .86);
    border-color: rgba(15, 23, 42, .08);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .08);
  }
  html:not(.dark) .legal-section + .legal-section {
    border-top-color: rgba(15, 23, 42, .1);
  }
  html:not(.dark) .legal-section p {
    color: #334155;
  }
  html:not(.dark) .legal-toc a:hover {
    background: rgba(16, 185, 129, .08);
    color: #047857;
  }
  @media (max-width: 767px) {
    .legal-page {
      width: min(100% - 1.25rem, 720px);
      margin-top: .75rem;
    }
    .legal-layout {
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    .legal-toc {
      display: none;
    }
    .legal-document {
      padding: 1.25rem;
    }
  }
  html:not(.dark) .my-card, html:not(.dark) .sub-method-card {
    background: rgba(255,255,255,0.78);
    border-color: rgba(15,23,42,0.08);
    box-shadow: 0 18px 55px rgba(15,23,42,0.07);
  }
  html:not(.dark) .my-card__title, html:not(.dark) .my-plan-name, html:not(.dark) .sub-instructions strong, html:not(.dark) .portal-status-page__title {
    color: #0f172a;
  }
  html:not(.dark) .my-sub-meta, html:not(.dark) .my-contact, html:not(.dark) .my-plan-duration, html:not(.dark) .my-empty-text, html:not(.dark) .sub-field-label, html:not(.dark) .sub-method-card__label, html:not(.dark) .sub-instructions, html:not(.dark) .portal-status-page__text, html:not(.dark) .portal-status-page__meta {
    color: #475569;
  }
  html:not(.dark) .my-sub-meta span {
    color: #334155;
  }
  html:not(.dark) .my-access-btn--disabled {
    background: #e2e8f0;
    color: #64748b;
  }
  html:not(.dark) .sub-toggle {
    color: #475569;
    border-color: rgba(15,23,42,0.14);
    background: rgba(255,255,255,0.5);
  }
  html:not(.dark) .sub-toggle--active, html:not(.dark) .sub-method-card--active {
    color: #047857;
    border-color: rgba(5,150,105,0.36);
    background: rgba(16,185,129,0.1);
  }
  html:not(.dark) .sub-instructions {
    background: rgba(16,185,129,0.08);
    border-color: rgba(5,150,105,0.22);
  }
  .whatsapp-float {
    position: fixed;
    bottom: 1.75rem;
    right: 1.75rem;
    z-index: 50;
    width: 3.25rem;
    height: 3.25rem;
    background-color: #25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
    transition: background-color 200ms, transform 200ms, box-shadow 200ms;
  }
  .whatsapp-float:hover {
    background-color: #1da851;
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.45);
  }
  .whatsapp-float__icon {
    width: 1.75rem;
    height: 1.75rem;
    color: white;
    fill: currentColor;
  }
  [dir="rtl"] .whatsapp-float {
    right: auto;
    left: 1.75rem;
  }
  .btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: 0.25rem;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-white);
    text-transform: uppercase;
    background-color: #25d366;
    padding: 0.875rem 1.5rem;
    transition: background-color 180ms;
  }
  .btn-whatsapp:hover {
    background-color: #1da851;
  }
  [dir="rtl"] .btn-whatsapp {
    letter-spacing: 0;
    text-transform: none;
  }
  .contact-grid {
    display: grid;
    gap: calc(var(--spacing) * 6);
    padding: calc(var(--spacing) * 4);
    grid-template-columns: 1fr 1fr;
  }
  @media (max-width: 768px) {
    .contact-grid {
      grid-template-columns: 1fr;
    }
  }
  .contact-form-card {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    &:where(.dark, .dark *) {
      border-color: var(--color-slate-800);
    }
    &:where(.dark, .dark *) {
      background-color: var(--color-slate-900);
    }
  }
  .contact-form-card__title {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-800);
    &:where(.dark, .dark *) {
      color: var(--color-slate-100);
    }
  }
  .contact-form-actions {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .contact-success {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-emerald-200);
    background-color: var(--color-emerald-50);
    padding: calc(var(--spacing) * 4);
    color: var(--color-emerald-700);
    &:where(.dark, .dark *) {
      border-color: var(--color-emerald-800);
    }
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(37.8% 0.077 168.94) 20%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-emerald-900) 20%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--color-emerald-300);
    }
  }
  .contact-success__icon {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    flex-shrink: 0;
  }
  .contact-info-card {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    &:where(.dark, .dark *) {
      border-color: var(--color-slate-800);
    }
    &:where(.dark, .dark *) {
      background-color: var(--color-slate-900);
    }
  }
  .contact-info-item {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-100);
    padding: calc(var(--spacing) * 3);
    color: var(--color-slate-700);
    text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-50);
      }
    }
    &:where(.dark, .dark *) {
      border-color: var(--color-slate-800);
    }
    &:where(.dark, .dark *) {
      color: var(--color-slate-300);
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-slate-800);
        }
      }
    }
  }
  .contact-info-item strong {
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-800);
    &:where(.dark, .dark *) {
      color: var(--color-slate-100);
    }
  }
  .contact-info-item span {
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-500);
    &:where(.dark, .dark *) {
      color: var(--color-slate-400);
    }
  }
  .contact-info-item__icon {
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    flex-shrink: 0;
  }
  .contact-info-item--whatsapp {
    border-color: var(--color-emerald-200);
    &:where(.dark, .dark *) {
      border-color: var(--color-emerald-800);
    }
  }
  .contact-info-item--whatsapp .contact-info-item__icon {
    color: #25d366;
  }
  .contact-us-section {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 20);
    background: linear-gradient(180deg, #0d1a2e 0%, #0f172a 100%);
  }
  .contact-us-section__content {
    margin-inline: auto;
    max-width: var(--container-6xl);
  }
  .contact-us-section__title {
    margin-bottom: calc(var(--spacing) * 3);
    text-align: center;
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
  }
  .contact-us-section__sub {
    margin-bottom: calc(var(--spacing) * 12);
    text-align: center;
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    color: var(--color-slate-400);
  }
  .contact-us-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  @media (max-width: 767px) {
    .contact-us-grid {
      grid-template-columns: 1fr;
    }
  }
  .contact-us-form-card {
    border-radius: var(--radius-2xl);
    padding: calc(var(--spacing) * 8);
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(16,185,129,0.12);
    box-shadow: 0 0 80px rgba(16,185,129,0.05), inset 0 1px 0 rgba(255,255,255,0.04);
  }
  .contact-us-field {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .contact-us-label {
    margin-bottom: calc(var(--spacing) * 2);
    display: block;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: var(--color-slate-400);
    text-transform: uppercase;
  }
  .contact-us-textarea {
    min-height: 120px;
  }
  .contact-us-actions {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .contact-us-whatsapp-btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background: #25d366;
    color: #000;
  }
  .contact-us-whatsapp-btn:hover {
    background: #1da851;
  }
  .contact-us-whatsapp-btn__icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .contact-us-success {
    margin-top: calc(var(--spacing) * 5);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 4);
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.2);
    color: #6ee7b7;
  }
  .contact-us-success__icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
  }
  .contact-us-info-card {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 5);
    border-radius: var(--radius-2xl);
    padding: calc(var(--spacing) * 8);
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
  }
  .contact-us-info-card__title {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
  }
  .contact-us-info-item {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 4);
    text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
  }
  .contact-us-info-item:hover {
    background: rgba(16,185,129,0.06);
    border-color: rgba(16,185,129,0.18);
  }
  .contact-us-info-item__icon {
    display: flex;
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.15);
    color: #10b981;
  }
  .contact-us-info-item__icon--whatsapp {
    background: rgba(37,211,102,0.1);
    border-color: rgba(37,211,102,0.2);
    color: #25d366;
  }
  .contact-us-info-item__svg {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .contact-us-info-item__label {
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-white);
  }
  .contact-us-info-item__value {
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-400);
  }
  html:not(.dark) .contact-us-section {
    background: linear-gradient(180deg, #f0fdf4 0%, #f5f8f6 100%);
  }
  html:not(.dark) .contact-us-section__title {
    color: #0f172a;
  }
  html:not(.dark) .contact-us-section__sub {
    color: #475569;
  }
  html:not(.dark) .contact-us-form-card {
    background: rgba(255,255,255,0.9);
    border-color: rgba(15,23,42,0.1);
    box-shadow: 0 24px 70px rgba(15,23,42,0.08);
  }
  html:not(.dark) .contact-us-info-card {
    background: rgba(255,255,255,0.9);
    border-color: rgba(15,23,42,0.08);
    box-shadow: 0 24px 70px rgba(15,23,42,0.08);
  }
  html:not(.dark) .contact-us-info-card__title {
    color: #0f172a;
  }
  html:not(.dark) .contact-us-info-item {
    background: rgba(255,255,255,0.7);
    border-color: rgba(15,23,42,0.06);
  }
  html:not(.dark) .contact-us-info-item:hover {
    background: rgba(16,185,129,0.06);
    border-color: rgba(5,150,105,0.2);
  }
  html:not(.dark) .contact-us-info-item__icon {
    background: rgba(16,185,129,0.1);
    border-color: rgba(5,150,105,0.18);
  }
  html:not(.dark) .contact-us-info-item__label {
    color: #0f172a;
  }
  html:not(.dark) .contact-us-info-item__value {
    color: #475569;
  }
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-duration: initial;
      --tw-tracking: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-leading: initial;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-divide-y-reverse: 0;
    }
  }
}