:root {
        --brand: #0b4aae;
        --brand2: #243b7a;
        --accent: #ef4444;
      }
      html,
      body {
        font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu,
          "Helvetica Neue", Arial;
          padding-left:5px;
          padding-right: 5px;
      }
      .container-xxl {
        max-width: 1200px;
      }
      .bg-grdient {
        background: #b4c2f8;
        background: -webkit-linear-gradient(
          180deg,
          rgba(180, 194, 248, 1) 0%,
          rgba(255, 255, 255, 1) 100%
        );
        background: -moz-linear-gradient(
          180deg,
          rgba(180, 194, 248, 1) 0%,
          rgba(255, 255, 255, 1) 100%
        );
        background: linear-gradient(
          180deg,
          rgba(180, 194, 248, 1) 0%,
          rgba(255, 255, 255, 1) 100%
        );
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#B4C2F8", endColorstr="#FFFFFF", GradientType=0);
      }
      .btn {
        @apply inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm font-semibold transition;
      }
      .btn-primary {
        @apply bg-[var(--brand)] text-white hover:bg-blue-700;
      }
      .btn-outline {
        @apply border border-white/60 text-white hover:bg-white hover:text-[var(--brand)];
      }
      .card {
        @apply rounded-xl border border-slate-200 bg-white shadow-sm;
      }
      .card-body {
        @apply p-5;
      }
      .badge-dot {
        @apply inline-block h-2 w-2 rounded-full bg-[var(--accent)] align-middle;
      }
      .nav-link {
        @apply text-slate-800/80 hover:text-[var(--brand)] transition font-medium;
      }
      .nav-active {
        @apply text-[var(--brand)];
      }
      .shadow-soft {
        box-shadow: 0 10px 30px rgb(2 20 60 / 0.15);
      }