/* ==========================================================================
   Sử dựng @layer của css để định nghĩa thứ tự ưu tiên của các styles đồng thời phân nhóm các styles
   ========================================================================== */
@layer reset, system, base, layout, components, utilities;

/* ==========================================================================
   DESIGN SYSTEM
   ========================================================================== */
@layer system {
  :root {
    /* Typography Scale */
    --text-base: 16px;
    --text-xs: 0.75rem;
    /* 12px */
    --text-sm: 0.875rem;
    /* 14px */
    --text-lg: 1.125rem;
    /* 18px */
    --text-xl: 1.25rem;
    /* 20px */
    --text-2xl: 1.5rem;
    /* 24px */
    --text-3xl: 1.875rem;
    /* 30px */
    --text-4xl: 2rem;
    /* 32px */
    --text-5xl: 2.25rem;
    /* 36px */
    --text-6xl: 3rem;
    /* 48px */
    --text-7xl: 3.75rem;
    /* 60px */

    /* Line Heights */
    --text-xs-line-height: calc(1 / 0.75);
    /* ~1.333333 */
    --text-sm-line-height: calc(1.25 / 0.875);
    /* ~1.428571 */
    --text-base-line-height: calc(1.5 / 1);
    /* 1.5 */
    --text-lg-line-height: calc(1.75 / 1.125);
    /* ~1.555556 */
    --text-xl-line-height: calc(1.75 / 1.25);
    /* 1.4 */
    --text-2xl-line-height: calc(2 / 1.5);
    /* ~1.333333 */
    --text-3xl-line-height: calc(2.25 / 1.875);
    /* 1.2 */
    --text-4xl-line-height: calc(2.5 / 2.25);
    /* ~1.111111 */
    --text-5xl-line-height: 1;
    --text-6xl-line-height: 1;
    --text-7xl-line-height: 1;

    /* Letter Spacing */
    /* 5% của font size (chiều thu hẹp) */
    --tracking-tighter: -0.05em;
    /* 2.5% của font size (chiều thu hẹp) */
    --tracking-tight: -0.025em;
    /* 2.5% của font size  */
    --tracking-wide: 0.025em;
    /* 10% của font size  */
    --tracking-widest: 0.1em;

    /* Container Sizes */
    /* 320px */
    --container-xs: 20rem;
    /* 384px */
    --container-sm: 24rem;
    /* 448px */
    --container-md: 28rem;
    /* 512px */
    --container-lg: 32rem;
    /* 576px */
    --container-xl: 36rem;
    /* 672px */
    --container-2xl: 42rem;
    /* 768px */
    --container-3xl: 48rem;
    /* 896px */
    --container-4xl: 56rem;
    /* 1024px */
    --container-5xl: 64rem;
    /* 1280px */
    --container-6xl: 72rem;

    /* Border Radius */
    --radius-xs: 0.125rem;
    /* 2px */
    --radius-sm: 0.25rem;
    /* 4px */
    --radius-md: 0.375rem;
    /* 8px */
    --radius-lg: 0.5rem;
    /* 8px */
    --radius-xl: 0.75rem;
    /* 12px */
    --radius-2xl: 1rem;
    /* 16px */
    --radius-3xl: 1.5rem;
    /* 24px */

    /* Font Weights */
    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Shadow */
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md:
      0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg:
      0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl:
      0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
    --shadow-none: 0 0 rgb(0 0 0 / 0);

    /* Color Palette */
    /* Neutrals & Backgrounds */
    --background: oklch(100% 0.00011 271.152);
    --background-header: oklch(96.558% 0.01725 248.156);

    --background-footer: oklch(20.992% 0.03416 263.451);
    --foreground: oklch(20.992% 0.03416 263.451);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.18 0 0);
    --popover: oklch(1 0 0);
    /* #ffffff */
    --popover-foreground: oklch(0.18 0 0);

    /* Brand & Layout */
    --banner-background: oklch(0.28 0.13 255.45);
    /* #003280 */
    --footer-background: oklch(0.17 0.03 252.62);
    /* #101828 */
    --footer-foreground: oklch(0.68 0.02 249.26);
    /* #99a1af */

    /* Primary Colors */
    --primary: oklch(0.51 0.22 260.67);
    /* #155dfc */
    --primary-alt: oklch(0.72 0.14 250.75);
    /* #51a2ff */
    --primary-foreground: oklch(1 0 0);
    /* #ffffff */
    --ring: oklch(0.51 0.22 260.67);
    /* #155dfc */
    /* Text color */
    --text-primary: oklch(54.653% 0.24562 262.882);
    /* Secondary & Muted */
    --secondary: oklch(0.96 0.004 256.32);
    /* #f4f4f5 */
    --secondary-foreground: oklch(0.51 0.22 260.67);
    /* #155dfc */
    --secondary-foreground-alt: oklch(0.28 0.13 255.45);
    /* #003280 */

    --muted: oklch(0.96 0.004 256.32);
    /* #f4f4f5 */
    --muted-foreground: oklch(0.53 0.01 254.12);
    /* #71717b */

    /* Accents & States */
    --accent: oklch(0.967 0.001 286.375);
    --accent-foreground: oklch(0.21 0.006 285.885);
    --destructive: oklch(64.252% 0.21276 23.299);
    --destructive-foreground: oklch(0.985 0 0);

    /* UI Elements */
    --border: oklch(0.92 0.005 255.31);
    /* #e4e4e7 */
    --input: oklch(0.92 0.005 255.31);
    /* #e4e4e7 */

    /* Charts */
    --chart-1: oklch(0.59 0.26 27.27);
    /* #fc1515 */
    --chart-2: oklch(0.44 0.3 301.12);
    /* #9810fa */
    --chart-3: oklch(0.6 0.2 154.51);
    /* #00a63e */
    --chart-4: oklch(0.81 0.18 80.76);
    /* #ffb900 */
    --chart-5: oklch(0.74 0.19 66.8);
    /* #fe9a00 */
    --chart-6: oklch(0.646 0.222 41.116);

    /* Toast (Notifications) */
    /* Use for toast, flash alert */
    --toast-bg: var(--background);
    --toast-border-color: var(--border);
    --toast-color: var(--foreground);
    --toast-icon-color: var(--muted);

    /* Toast Variants */
    /* #f0fdf4 */
    --toast-success-bg: oklch(0.9819 0.0181 155.83);
    /* #86efac */
    --toast-success-border: oklch(0.8712 0.1363 154.45);
    /* #14532d */
    --toast-success-color: oklch(0.3925 0.0896 152.54);
    /* #16a34a */
    --toast-success-icon: oklch(0.6271 0.1699 149.21);

    /* #fef2f2 */
    --toast-error-bg: oklch(0.9705 0.0129 17.38);
    /* #fca5a5 */
    --toast-error-border: oklch(0.8077 0.1035 19.57);
    /* #7f1d1d */
    --toast-error-color: oklch(0.3958 0.1331 25.72);
    /* #dc2626 */
    --toast-error-icon: oklch(0.5771 0.2152 27.33);

    /* #fffbeb */
    --toast-warning-bg: oklch(0.9869 0.0214 95.28);
    /* #fcd34d */
    --toast-warning-border: oklch(0.879 0.1534 91.61);
    /* #78350f */
    --toast-warning-color: oklch(0.4137 0.1054 45.9);
    /* #d97706 */
    --toast-warning-icon: oklch(0.6658 0.1574 58.32);

    /* #eff6ff */
    --toast-info-bg: oklch(0.9705 0.0142 254.6);
    /* #93c5fd */
    --toast-info-border: oklch(0.8091 0.0956 251.81);
    /* #1e3a8a */
    --toast-info-color: oklch(0.3791 0.1378 265.52);
    /* #2563eb */
    --toast-info-icon: oklch(0.5461 0.2152 262.88);

    /* Gradients */
    --blue-gradient: linear-gradient(0deg,
        rgba(28, 57, 142, 0.95) 0%,
        rgba(28, 57, 142, 0.5) 50%,
        rgba(0, 0, 0, 0) 100%);
    --green-gradient: linear-gradient(0deg,
        rgba(13, 84, 43, 0.95) 0%,
        rgba(13, 84, 43, 0.5) 50%,
        rgba(0, 0, 0, 0) 100%);
    --pink-gradient: linear-gradient(135deg,
        rgba(152, 16, 250, 1) 0%,
        rgba(230, 0, 118, 1) 100%);
    --purple-gradient: linear-gradient(0deg,
        rgba(89, 22, 139, 0.95) 0%,
        rgba(89, 22, 139, 0.5) 50%,
        rgba(0, 0, 0, 0) 100%);
    --black-gradient: linear-gradient(0deg,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0) 100%);
    --blue-from-left-gradient: linear-gradient(90deg,
        rgba(28, 57, 142, 1) 0%,
        rgba(25, 60, 184, 0.7) 50%,
        rgba(0, 0, 0, 0.2) 100%);
  }
}

/* DARK MODE */
@media (prefers-color-scheme: dark) {
  :root {
    --toast-bg: oklch(0.2273 0.0038 286.09);
    --toast-border-color: color-mix(in oklab,
        oklch(0.2273 0.0038 286.09) 10%,
        white 30%);
    --toast-color: var(--background);
    --toast-icon-color: var(--background);

    /* Variants */
    /* #052e16 */
    --toast-success-bg: oklch(0.2664 0.0628 152.93);
    /* #166534 */
    --toast-success-border: oklch(0.4479 0.1083 151.33);
    /* #bbf7d0 */
    --toast-success-color: oklch(0.925 0.0806 155.99);
    /* #4ade80 */
    --toast-success-icon: oklch(0.925 0.0806 155.99);

    /* #450a0a */
    --toast-error-bg: oklch(0.2575 0.0886 26.04);
    /* #991b1b */
    --toast-error-border: oklch(0.4437 0.1613 26.9);
    /* #fecaca */
    --toast-error-color: oklch(0.8845 0.0593 18.33);
    /* #f87171 */
    --toast-error-icon: oklch(0.8845 0.0593 18.33);

    /* #422006 */
    --toast-warning-bg: oklch(0.2857 0.0639 53.81);
    /* #92400e */
    --toast-warning-border: oklch(0.4732 0.1247 46.2);
    /* #fde68a */
    --toast-warning-color: oklch(0.9243 0.1151 95.75);
    /* #fbbf24 */
    --toast-warning-icon: oklch(0.9243 0.1151 95.75);

    /* #172554 */
    --toast-info-bg: oklch(0.2823 0.0874 267.94);
    /* #1e40af */
    --toast-info-border: oklch(0.4244 0.1809 265.64);
    /* #bfdbfe */
    --toast-info-color: oklch(0.8823 0.0571 254.13);
    /* #60a5fa */
    --toast-info-icon: oklch(0.8823 0.0571 254.13);
  }
}

/* ==========================================================================
   RESET
   ========================================================================== */
@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 0 solid;
    font-size: var(--text-base);
    font-weight: var(--fw-normal);
    line-height: var(--text-base-line-height);
    font-family:
      "Be Vietnam Pro",
      "Inter",
      "Roboto",
      system-ui,
      -apple-system,
      sans-serif;
  }

  body {
    position: relative;
  }

  img,
  video {
    color: inherit;
    max-width: 100%;
    height: auto;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
  }

  ul,
  ol {
    list-style-type: none;
  }

  a {
    position: relative;
    text-decoration: none;
    color: inherit;
    font-size: inherit;
    transition: all 0.25s ease;
    padding-bottom: 1px;
  }

  button {
    cursor: pointer;
    border: none;
    background: transparent;
  }
}

/* ==========================================================================
   BASE
   ========================================================================== */
@layer base {
  .container {
    width: min(1440px, calc(100% - 2rem));
    max-width: 1440px;
    margin: 0 auto;
  }

  @media screen and (min-width: 1280px) {
    .container {
      width: min(1280px, calc(100% - 2rem));
      max-width: 1280px;
    }
  }

  .container-wrapper {
    width: min(1136px, calc(100% - 2rem));
    max-width: 1136px;
    margin: 0 auto;
  }

  .container-fluid {
    width: 100%;
    height: fit-content;
    padding: 0 1rem;
    margin: 0 auto;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
}

/* ==========================================================================
   LAYOUT UTILITIES
   ========================================================================== */
@layer layout {

  /* Display */
  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .inline-block {
    display: inline-block;
  }

  .inline-flex {
    display: inline-flex;
  }

  .inline-grid {
    display: inline-grid;
  }

  /* Position */
  .fixed {
    position: fixed;
  }

  .absolute {
    position: absolute;
  }

  .relative {
    position: relative;
  }

  .sticky {
    position: sticky;
  }

  .inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  /* Overflow */
  .overflow-hidden {
    overflow: hidden;
  }

  /* Object Fit */
  .object-contain {
    object-fit: contain;
  }

  .object-cover {
    object-fit: cover;
  }

  /* Z-Index */
  .z-10 {
    z-index: 10;
  }

  .z-20 {
    z-index: 20;
  }

  .z-30 {
    z-index: 30;
  }

  .z-40 {
    z-index: 40;
  }

  .z-50 {
    z-index: 50;
  }

  /* Sizing */
  .w-full {
    width: 100%;
  }

  .h-full {
    height: 100%;
  }
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */
@layer utilities {

  /* Flexbox Direction */
  .flex-row {
    flex-direction: row;
  }

  .flex-row-reverse {
    flex-direction: row-reverse;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-col-reverse {
    flex-direction: column-reverse;
  }

  /* Justify Content */
  .justify-center {
    justify-content: center;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-end {
    justify-content: flex-end;
  }

  /* Align Items */
  .items-start {
    align-items: flex-start;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-center {
    align-items: center;
  }

  .items-stretch {
    align-items: stretch;
  }

  /* Align Self */
  .self-stretch {
    align-self: stretch;
  }

  /* Flex Properties */
  .flex-1 {
    flex: 1 1 0%;
  }

  .flex-initial {
    flex: 0 1 auto;
  }

  .flex-auto {
    flex: 1 1 auto;
  }

  .flex-none {
    flex: none;
  }

  .flex-grow {
    flex-grow: 1;
  }

  .flex-grow-0 {
    flex-grow: 0;
  }

  .shrink {
    flex-shrink: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  /* Flex Wrap */
  .flex-wrap {
    flex-wrap: wrap;
  }

  .flex-nowrap {
    flex-wrap: nowrap;
  }

  .flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }

  /* Align Items - Additional */
  .items-baseline {
    align-items: baseline;
  }

  /* Justify Content - Additional */
  .justify-start {
    justify-content: flex-start;
  }

  /* Align Content (for multi-line flex containers) */
  .content-center {
    align-content: center;
  }

  .content-start {
    align-content: flex-start;
  }

  .content-end {
    align-content: flex-end;
  }

  .content-between {
    align-content: space-between;
  }

  .content-around {
    align-content: space-around;
  }

  .content-evenly {
    align-content: space-evenly;
  }

  .content-stretch {
    align-content: stretch;
  }

  /* Gap */
  .gap-0 {
    gap: 0;
  }

  .gap-1 {
    gap: 0.25rem;
  }

  .gap-2 {
    gap: 0.5rem;
  }

  .gap-3 {
    gap: 0.75rem;
  }

  .gap-4 {
    gap: 1rem;
  }

  .gap-5 {
    gap: 1.25rem;
  }

  .gap-6 {
    gap: 1.5rem;
  }

  .gap-8 {
    gap: 2rem;
  }

  .gap-10 {
    gap: 2.5rem;
  }

  .gap-12 {
    gap: 3rem;
  }

  .gap-14 {
    gap: 3.5rem;
  }

  .gap-16 {
    gap: 4rem;
  }

  /* Gap X/Y */
  .gap-x-0,
  .gap-y-0 {
    column-gap: 0;
    row-gap: 0;
  }

  .gap-x-1,
  .gap-y-1 {
    column-gap: 0.25rem;
    row-gap: 0.25rem;
  }

  .gap-x-2,
  .gap-y-2 {
    column-gap: 0.5rem;
    row-gap: 0.5rem;
  }

  .gap-x-3,
  .gap-y-3 {
    column-gap: 0.75rem;
    row-gap: 0.75rem;
  }

  .gap-x-4,
  .gap-y-4 {
    column-gap: 1rem;
    row-gap: 1rem;
  }

  .gap-x-5,
  .gap-y-5 {
    column-gap: 1.25rem;
    row-gap: 1.25rem;
  }

  .gap-x-6,
  .gap-y-6 {
    column-gap: 1.5rem;
    row-gap: 1.5rem;
  }

  .gap-x-8,
  .gap-y-8 {
    column-gap: 2rem;
    row-gap: 2rem;
  }

  .gap-x-10,
  .gap-y-10 {
    column-gap: 2.5rem;
    row-gap: 2.5rem;
  }

  .gap-x-12,
  .gap-y-12 {
    column-gap: 3rem;
    row-gap: 3rem;
  }

  /* Grid Template */
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid-cols-\[0\.8fr_1\.2fr\] {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }

  .grid-cols-\[auto_1fr\] {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  /* Grid Placement */
  .col-span-2 {
    grid-column: span 2 / span 2;
  }

  .row-span-2 {
    grid-row: span 2 / span 2;
  }

  .row-start-1 {
    grid-row-start: 1;
  }

  .row-start-2 {
    grid-row-start: 2;
  }

  .col-start-3 {
    grid-column-start: 3;
  }

  /* Typography - Font Size */
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--text-xs-line-height);
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--text-sm-line-height);
  }

  .text-md {
    font-size: var(--text-base);
    line-height: var(--text-md-line-height);
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--text-lg-line-height);
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--text-xl-line-height);
  }

  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl-line-height);
  }

  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--text-3xl-line-height);
  }

  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--text-4xl-line-height);
  }

  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--text-5xl-line-height);
  }

  .text-6xl {
    font-size: var(--text-6xl);
    line-height: var(--text-6xl-line-height);
  }

  .text-7xl {
    font-size: var(--text-7xl);
    line-height: var(--text-7xl-line-height);
  }

  /* Font Family */
  .font-mono {
    font-family: monospace;
  }

  /* Typography - Font Weight */
  .font-light {
    font-weight: var(--fw-light);
  }

  .font-normal {
    font-weight: var(--fw-normal);
  }

  .font-medium {
    font-weight: var(--fw-medium);
  }

  .font-semibold {
    font-weight: var(--fw-semibold);
  }

  .font-bold {
    font-weight: var(--fw-bold);
  }

  /* Typography - Text Transform */
  .uppercase {
    text-transform: uppercase;
  }

  .lowercase {
    text-transform: lowercase;
  }

  /* Typography - Text Align */
  .text-center {
    text-align: center;
  }

  /* Borders */
  .border {
    border: 1px solid var(--border);
  }

  .border-primary {
    border-color: var(--primary);
  }

  /* Interactive */
  .focus\:border-primary:focus {
    border-color: var(--primary);
  }

  .focus\:outline-none:focus {
    outline: none;
  }

  /* Shadow */
  .shadow-sm {
    box-shadow: var(--shadow-sm);
  }

  .shadow {
    box-shadow: var(--shadow);
  }

  .shadow-md {
    box-shadow: var(--shadow-md);
  }

  .shadow-lg {
    box-shadow: var(--shadow-lg);
  }

  .shadow-xl {
    box-shadow: var(--shadow-xl);
  }

  .shadow-2xl {
    box-shadow: var(--shadow-2xl);
  }

  .shadow-inner {
    box-shadow: var(--shadow-inner);
  }

  .shadow-none {
    box-shadow: var(--shadow-none);
  }

  /* Sizing - Max Width */
  .max-w-sm {
    max-width: 24rem;
  }

  .max-w-md {
    max-width: 28rem;
  }

  .max-w-lg {
    max-width: 32rem;
  }

  .max-w-xl {
    max-width: 36rem;
  }

  .max-w-2xl {
    max-width: 42rem;
  }

  /* Height */
  .h-12 {
    height: 3rem;
  }

  /* Border Radius */
  .rounded-xs {
    border-radius: var(--radius-xs);
  }

  .rounded-sm {
    border-radius: var(--radius-sm);
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  .rounded-3xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }

  .rounded-none {
    border-radius: 0;
  }

  .rounded-full {
    border-radius: calc(infinity * 1px);
  }

  /* Spacing - Margin */
  .m-1 {
    margin: 0.25rem;
  }

  .m-2 {
    margin: 0.5rem;
  }

  .m-3 {
    margin: 0.75rem;
  }

  .m-4 {
    margin: 1rem;
  }

  .m-5 {
    margin: 1.25rem;
  }

  .m-6 {
    margin: 1.5rem;
  }

  .m-8 {
    margin: 2rem;
  }

  .m-10 {
    margin: 2.5rem;
  }

  .m-12 {
    margin: 3rem;
  }

  .m-16 {
    margin: 4rem;
  }

  .mt-1 {
    margin-top: 0.25rem;
  }

  .mt-2 {
    margin-top: 0.5rem;
  }

  .mt-3 {
    margin-top: 0.75rem;
  }

  .mt-4 {
    margin-top: 1rem;
  }

  .mt-5 {
    margin-top: 1.25rem;
  }

  .mt-6 {
    margin-top: 1.5rem;
  }

  .mt-8 {
    margin-top: 2rem;
  }

  .mt-10 {
    margin-top: 2.5rem;
  }

  .mt-12 {
    margin-top: 3rem;
  }

  .mt-16 {
    margin-top: 4rem;
  }

  .mb-1 {
    margin-bottom: 0.25rem;
  }

  .mb-2 {
    margin-bottom: 0.5rem;
  }

  .mb-3 {
    margin-bottom: 0.75rem;
  }

  .mb-4 {
    margin-bottom: 1rem;
  }

  .mb-5 {
    margin-bottom: 1.25rem;
  }

  .mb-6 {
    margin-bottom: 1.5rem;
  }

  .mb-8 {
    margin-bottom: 2rem;
  }

  .mb-10 {
    margin-bottom: 2.5rem;
  }

  .mb-12 {
    margin-bottom: 3rem;
  }

  .mb-16 {
    margin-bottom: 4rem;
  }

  .ml-1 {
    margin-left: 0.25rem;
  }

  .ml-2 {
    margin-left: 0.5rem;
  }

  .ml-3 {
    margin-left: 0.75rem;
  }

  .ml-4 {
    margin-left: 1rem;
  }

  .ml-5 {
    margin-left: 1.25rem;
  }

  .ml-6 {
    margin-left: 1.5rem;
  }

  .ml-8 {
    margin-left: 2rem;
  }

  .ml-10 {
    margin-left: 2.5rem;
  }

  .ml-12 {
    margin-left: 3rem;
  }

  .ml-16 {
    margin-left: 4rem;
  }

  .mr-1 {
    margin-right: 0.25rem;
  }

  .mr-2 {
    margin-right: 0.5rem;
  }

  .mr-3 {
    margin-right: 0.75rem;
  }

  .mr-4 {
    margin-right: 1rem;
  }

  .mr-5 {
    margin-right: 1.25rem;
  }

  .mr-6 {
    margin-right: 1.5rem;
  }

  .mr-8 {
    margin-right: 2rem;
  }

  .mr-10 {
    margin-right: 2.5rem;
  }

  .mr-12 {
    margin-right: 3rem;
  }

  .mr-16 {
    margin-right: 4rem;
  }

  .mx-1 {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
  }

  .mx-2 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  .mx-3 {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }

  .mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .mx-5 {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }

  .mx-6 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .mx-8 {
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .mx-10 {
    margin-left: 2.5rem;
    margin-right: 2.5rem;
  }

  .mx-12 {
    margin-left: 3rem;
    margin-right: 3rem;
  }

  .mx-16 {
    margin-left: 4rem;
    margin-right: 4rem;
  }

  .my-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }

  .my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .my-3 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .my-5 {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
  }

  .my-6 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .my-10 {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }

  .my-12 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }

  .my-16 {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }

  .space-x-1>*+* {
    margin-left: 0.25rem;
  }

  .space-x-2>*+* {
    margin-left: 0.5rem;
  }

  .space-x-3>*+* {
    margin-left: 0.75rem;
  }

  .space-x-4>*+* {
    margin-left: 1rem;
  }

  .space-x-5>*+* {
    margin-left: 1.25rem;
  }

  .space-x-6>*+* {
    margin-left: 1.5rem;
  }

  .space-x-8>*+* {
    margin-left: 2rem;
  }

  .space-x-10>*+* {
    margin-left: 2.5rem;
  }

  .space-x-12>*+* {
    margin-left: 3rem;
  }

  .space-x-16>*+* {
    margin-left: 4rem;
  }

  .space-y-1>*+* {
    margin-top: 0.25rem;
  }

  .space-y-2>*+* {
    margin-top: 0.5rem;
  }

  .space-y-3>*+* {
    margin-top: 0.75rem;
  }

  .space-y-4>*+* {
    margin-top: 1rem;
  }

  .space-y-5>*+* {
    margin-top: 1.25rem;
  }

  .space-y-6>*+* {
    margin-top: 1.5rem;
  }

  .space-y-8>*+* {
    margin-top: 2rem;
  }

  .space-y-10>*+* {
    margin-top: 2.5rem;
  }

  .space-y-12>*+* {
    margin-top: 3rem;
  }

  .space-y-16>*+* {
    margin-top: 4rem;
  }

  /* Spacing - Padding */
  .p-1 {
    padding: 0.25rem;
  }

  .p-2 {
    padding: 0.5rem;
  }

  .p-3 {
    padding: 0.75rem;
  }

  .p-4 {
    padding: 1rem;
  }

  .p-5 {
    padding: 1.25rem;
  }

  .p-6 {
    padding: 1.5rem;
  }

  .p-8 {
    padding: 2rem;
  }

  .p-10 {
    padding: 2.5rem;
  }

  .p-12 {
    padding: 3rem;
  }

  .p-16 {
    padding: 4rem;
  }

  .pt-1 {
    padding-top: 0.25rem;
  }

  .pt-2 {
    padding-top: 0.5rem;
  }

  .pt-3 {
    padding-top: 0.75rem;
  }

  .pt-4 {
    padding-top: 1rem;
  }

  .pt-5 {
    padding-top: 1.25rem;
  }

  .pt-6 {
    padding-top: 1.5rem;
  }

  .pt-8 {
    padding-top: 2rem;
  }

  .pt-10 {
    padding-top: 2.5rem;
  }

  .pt-12 {
    padding-top: 3rem;
  }

  .pt-16 {
    padding-top: 4rem;
  }

  .pb-1 {
    padding-bottom: 0.25rem;
  }

  .pb-2 {
    padding-bottom: 0.5rem;
  }

  .pb-3 {
    padding-bottom: 0.75rem;
  }

  .pb-4 {
    padding-bottom: 1rem;
  }

  .pb-5 {
    padding-bottom: 1.25rem;
  }

  .pb-6 {
    padding-bottom: 1.5rem;
  }

  .pb-8 {
    padding-bottom: 2rem;
  }

  .pb-10 {
    padding-bottom: 2.5rem;
  }

  .pb-12 {
    padding-bottom: 3rem;
  }

  .pb-16 {
    padding-bottom: 4rem;
  }

  .pl-1 {
    padding-left: 0.25rem;
  }

  .pl-2 {
    padding-left: 0.5rem;
  }

  .pl-3 {
    padding-left: 0.75rem;
  }

  .pl-4 {
    padding-left: 1rem;
  }

  .pl-5 {
    padding-left: 1.25rem;
  }

  .pl-6 {
    padding-left: 1.5rem;
  }

  .pl-8 {
    padding-left: 2rem;
  }

  .pl-10 {
    padding-left: 2.5rem;
  }

  .pl-12 {
    padding-left: 3rem;
  }

  .pl-16 {
    padding-left: 4rem;
  }

  .pr-1 {
    padding-right: 0.25rem;
  }

  .pr-2 {
    padding-right: 0.5rem;
  }

  .pr-3 {
    padding-right: 0.75rem;
  }

  .pr-4 {
    padding-right: 1rem;
  }

  .pr-5 {
    padding-right: 1.25rem;
  }

  .pr-6 {
    padding-right: 1.5rem;
  }

  .pr-8 {
    padding-right: 2rem;
  }

  .pr-10 {
    padding-right: 2.5rem;
  }

  .pr-12 {
    padding-right: 3rem;
  }

  .pr-16 {
    padding-right: 4rem;
  }

  .px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .px-16 {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  .py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  /* ========== Reset Utilities (m-0, p-0) ========== */
  .m-0 {
    margin: 0;
  }

  .mt-0 {
    margin-top: 0;
  }

  .mb-0 {
    margin-bottom: 0;
  }

  .ml-0 {
    margin-left: 0;
  }

  .mr-0 {
    margin-right: 0;
  }

  .mx-0 {
    margin-left: 0;
    margin-right: 0;
  }

  .my-0 {
    margin-top: 0;
    margin-bottom: 0;
  }

  .p-0 {
    padding: 0;
  }

  .pt-0 {
    padding-top: 0;
  }

  .pb-0 {
    padding-bottom: 0;
  }

  .pl-0 {
    padding-left: 0;
  }

  .pr-0 {
    padding-right: 0;
  }

  .px-0 {
    padding-left: 0;
    padding-right: 0;
  }

  .py-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* ========== Background & Border Utilities ========== */
  .bg-transparent {
    background-color: transparent;
  }

  .border-0 {
    border: 0;
  }

  .border-1 {
    border: 1px solid var(--border);
  }

  /* ========== Text Color Utilities ========== */
  .text-muted {
    color: var(--muted-foreground);
  }

  .text-danger {
    color: var(--destructive);
  }

  .text-success {
    color: oklch(0.6271 0.1699 149.21);
  }

  /* ========== Font Weight Utilities ========== */
  .font-semibold {
    font-weight: var(--fw-semibold);
  }

  .font-bold {
    font-weight: var(--fw-bold);
  }

  /* ========== List Utilities ========== */
  .list-disc {
    list-style-type: disc;
  }

  .pl-6 {
    padding-left: 1.5rem;
  }

  /* ========== Grid Utilities ========== */
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .col-span-2 {
    grid-column: span 2 / span 2;
  }

  /* ========== Container Utilities ========== */
  .container-small {
    max-width: var(--container-3xl);
    margin: 0 auto;
    padding: 0 1rem;
  }

  .container-xl {
    max-width: var(--container-5xl);
    margin: 0 auto;
    padding: 0 1rem;
  }

  .main-wrapper {
    padding: 2rem 0;
  }

  /* ========== Avatar Utilities ========== */
  .avatar-sm {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    flex-shrink: 0;
  }

  .avatar-md {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    flex-shrink: 0;
  }

  .avatar-lg {
    width: 128px;
    height: 128px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 50%;
    flex-shrink: 0;
  }

  .avatar-sm img,
  .avatar-md img,
  .avatar-lg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ========== Badge Utilities ========== */
  .badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
  }

  .badge-success {
    background: #dcfce7;
    color: #15803d;
  }

  .badge-secondary {
    background: #f1f5f9;
    color: #475569;
  }

  /* ========== Button Utilities ========== */
  .btn {
    display: flex;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-lg);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    text-decoration: none;
    border: none;
    font-size: var(--text-base);
  }

  .btn-primary {
    background-color: var(--primary);
    color: white;
  }

  .btn-primary:hover {
    filter: brightness(1.1);
    box-shadow: var(--shadow-lg);
  }

  .btn-secondary {
    background-color: var(--secondary);
    color: var(--foreground);
  }

  .btn-secondary:hover {
    background-color: #e4e4e7;
  }

  .btn-danger {
    background-color: var(--destructive);
    color: white;
  }

  .btn-danger:hover {
    filter: brightness(1.1);
  }

  .btn-icon {
    padding: 0.5rem;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ========== Card Utilities ========== */
  /* .card {
    background: var(--card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: 2rem;
  }

  .card-title {
    font-size: var(--text-lg);
    font-weight: var(--fw-semibold);
    color: var(--card-foreground);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
  }

  .card-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  } */

  /* ========== Form Utilities ========== */
  .form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 1.5rem;
  }

  .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }

  .form-group label {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--foreground);
  }

  .form-group input,
  .form-group textarea,
  .form-group select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    transition: all 0.2s ease;
    background-color: #f8fafc;
  }

  .form-group input:focus,
  .form-group textarea:focus,
  .form-group select:focus {
    outline: none;
    border-color: var(--primary);
    background-color: var(--background);
    box-shadow: 0 0 0 3px rgba(21, 93, 252, 0.1);
  }

  .form-group input[readonly] {
    background-color: #f1f5f9;
    cursor: not-allowed;
  }

  .form-error {
    font-size: var(--text-xs);
    color: var(--destructive);
  }

  .form-help {
    font-size: var(--text-xs);
    color: var(--muted-foreground);
  }

  .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
  }

  /* ========== Alert Utilities ========== */
  .alert {
    padding: 1rem 1.5rem;
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
  }

  .alert-danger {
    background-color: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
  }

  /* ========== Empty State Utilities ========== */
  .empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--muted-foreground);
  }

  .empty-state i {
    font-size: 3rem;
    color: var(--border);
    margin-bottom: 1rem;
  }

  /* ========== Page Header Utilities ========== */
  .page-header {
    margin-bottom: 1.5rem;
  }

  .page-title {
    font-size: var(--text-2xl);
    font-weight: var(--fw-bold);
    color: var(--foreground);
    margin-bottom: 0.5rem;
  }

  .page-subtitle {
    font-size: var(--text-sm);
    color: var(--muted-foreground);
  }

  .section-title {
    font-size: var(--text-lg);
    font-weight: var(--fw-semibold);
    color: var(--foreground);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
  }

  /* ========== Homepage utility extensions ========== */
  .place-items-center { place-items: center; }
  .justify-items-center { justify-items: center; }
  .self-start { align-self: flex-start; }
  .self-end { align-self: flex-end; }
  .cursor-default { cursor: default; }
  .cursor-pointer { cursor: pointer; }
  .no-underline { text-decoration: none; }
  .mt-7 { margin-top: 1.75rem; }

  .w-fit { width: fit-content; }
  .w-px { width: 1px; }
  .w-12 { width: 3rem; }
  .w-10 { width: 2.5rem; }
  .w-16 { width: 4rem; }
  .w-\[6px\] { width: 6px; }
  .w-\[2\.65rem\] { width: 2.65rem; }
  .w-\[3\.25rem\] { width: 3.25rem; }
  .h-full { height: 100%; }
  .h-10 { height: 2.5rem; }
  .h-16 { height: 4rem; }
  .h-\[6px\] { height: 6px; }
  .h-\[2\.65rem\] { height: 2.65rem; }
  .h-\[3\.25rem\] { height: 3.25rem; }
  .min-w-0 { min-width: 0; }
  .min-h-\[7rem\] { min-height: 7rem; }
  .min-h-\[22rem\] { min-height: 22rem; }
  .min-w-\[280px\] { min-width: 280px; }
  .max-w-\[640px\] { max-width: 640px; }
  .max-w-\[680px\] { max-width: 680px; }
  .max-w-\[780px\] { max-width: 780px; }

  .p-\[1\.35rem\] { padding: 1.35rem; }
  .py-\[0\] { padding-top: 0; padding-bottom: 0; }
  .py-\[5rem\] { padding-top: 5rem; padding-bottom: 5rem; }
  .py-\[6\.5rem\] { padding-top: 6.5rem; padding-bottom: 6.5rem; }

  .text-primary { color: var(--primary); }
  .text-white { color: #fff; }
  .text-white\/70 { color: rgba(255, 255, 255, 0.7); }
  .text-white\/80 { color: rgba(255, 255, 255, 0.8); }
  .text-slate-600 { color: #475569; }
  .text-\[\#0b1736\] { color: #0b1736; }
  .text-\[\#0f172a\] { color: #0f172a; }
  .text-\[\#0f46d9\] { color: #0f46d9; }
  .text-\[\#475569\] { color: #475569; }
  .text-\[\#64748b\] { color: #64748b; }
  .text-\[\#0f766e\] { color: #0f766e; }
  .text-\[7px\] { font-size: 7px; }
  .text-\[1\.15rem\] { font-size: 1.15rem; }
  .text-\[clamp\(2rem\,4vw\,3\.35rem\)\] { font-size: clamp(2rem, 4vw, 3.35rem); }

  .leading-none { line-height: 1; }
  .italic { font-style: italic; }
  .leading-\[1\.04\] { line-height: 1.04; }
  .leading-\[1\.7\] { line-height: 1.7; }
  .leading-\[1\.8\] { line-height: 1.8; }
  .tracking-wide { letter-spacing: var(--tracking-wide); }
  .tracking-tighter { letter-spacing: var(--tracking-tighter); }
  .tracking-\[-0\.04em\] { letter-spacing: -0.04em; }

  .bg-white { background: #fff; }
  .bg-white\/20 { background: rgba(255, 255, 255, 0.2); }
  .bg-white\/75 { background: rgba(255, 255, 255, 0.75); }
  .bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }
  .from-white {
    --tw-gradient-from: #fff;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
  }
  .to-\[\#f8fbff\] { --tw-gradient-to: #f8fbff; }
  .bg-\[\#f8fbff\] { background: #f8fbff; }
  .bg-\[\#0f46d9\] { background: #0f46d9; }
  .bg-\[\#f1f6ff\] { background: #f1f6ff; }
  .bg-\[rgba\(15\,23\,42\,0\.08\)\] { background: rgba(15, 23, 42, 0.08); }
  .bg-\[rgba\(21\,93\,252\,0\.1\)\] { background: rgba(21, 93, 252, 0.1); }
  .bg-\[rgba\(21\,93\,252\,0\.06\)\] { background: rgba(21, 93, 252, 0.06); }
  .bg-\[rgba\(20\,184\,166\,0\.12\)\] { background: rgba(20, 184, 166, 0.12); }
  .bg-\[rgba\(255\,255\,255\,0\.75\)\] { background: rgba(255, 255, 255, 0.75); }

  .rounded-2xl { border-radius: 1rem; }
  .rounded-\[0\.9rem\] { border-radius: 0.9rem; }
  .rounded-\[1\.2rem\] { border-radius: 1.2rem; }
  .rounded-\[1\.4rem\] { border-radius: 1.4rem; }
  .rounded-\[1\.6rem\] { border-radius: 1.6rem; }
  .rounded-\[2rem\] { border-radius: 2rem; }

  .border-\[rgba\(15\,23\,42\,0\.08\)\] { border-color: rgba(15, 23, 42, 0.08); }
  .border-\[rgba\(21\,93\,252\,0\.16\)\] { border-color: rgba(21, 93, 252, 0.16); }
  .shadow-\[0_18px_48px_rgba\(15\,23\,42\,0\.08\)\] { box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08); }

  .transition-transform { transition-property: transform; }
  .transition-all { transition-property: all; }
  .duration-\[0\.25s\] { transition-duration: 0.25s; }
  .ease-out { transition-timing-function: ease-out; }
  .hover\:-translate-y-1:hover { transform: translateY(-0.25rem); }
  .hover\:shadow-md:hover { box-shadow: var(--shadow-md); }
  .hover\:border-primary:hover { border-color: var(--primary); }

  /* ========== Course List Page Utilities ========== */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
  }
  .from-\[rgba\(15\,70\,217\,0\.075\)\] {
    --tw-gradient-from: rgba(15, 70, 217, 0.075);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(15, 70, 217, 0));
  }
  .to-\[rgba\(20\,184\,166\,0\.055\)\] {
    --tw-gradient-to: rgba(20, 184, 166, 0.055);
  }
  .inset-y-0 {
    top: 0;
    bottom: 0;
  }
  .left-0 {
    left: 0;
  }
  .w-1 {
    width: 0.25rem;
  }
  .bg-\[\#1447e6\] {
    background-color: #1447e6;
  }
  .text-\[\#1447e6\] {
    color: #1447e6;
  }
  .border-\[\#cfe0ff\] {
    border-color: #cfe0ff;
  }
  .border-\[\#dbe4ef\] {
    border-color: #dbe4ef;
  }
  .bg-white\/90 {
    background-color: rgba(255, 255, 255, 0.9);
  }
  .text-xs {
    font-size: var(--text-xs);
  }
  .gap-1\.5 {
    gap: 0.375rem;
  }
  .px-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }
  .bg-\[\#f4f7fb\] {
    background-color: #f4f7fb;
  }
  .text-\[\#172033\] {
    color: #172033;
  }
  .text-\[\#5f6b7a\] {
    color: #5f6b7a;
  }
  .bg-\[\#fbfcfe\] {
    background-color: #fbfcfe;
  }
  .bg-\[\#eaf7f3\] {
    background-color: #eaf7f3;
  }
  .bg-\[\#fff7e6\] {
    background-color: #fff7e6;
  }
  .text-\[\#92400e\] {
    color: #92400e;
  }
  .bg-\[\#eef2f7\] {
    background-color: #eef2f7;
  }
  .hover\:bg-blue-700:hover {
    background-color: #1d4ed8;
  }
  .border-\[\#e8edf5\] {
    border-color: #e8edf5;
  }
  .border-\[\#edf1f6\] {
    border-color: #edf1f6;
  }
  .border-\[\#b9ccf6\] {
    border-color: #b9ccf6;
  }
  .bg-\[\#1d4ed8\] {
    background-color: #1d4ed8;
  }
  .gap-8 {
    gap: 2rem;
  }
  .py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .hover\:-translate-x-1:hover {
    transform: translateX(-0.25rem);
  }
  .min-h-\[6\.2rem\] {
    min-height: 6.2rem;
  }
  .min-h-\[4\.8rem\] {
    min-height: 4.8rem;
  }
  .min-h-\[26\.5rem\] {
    min-height: 26.5rem;
  }
  .max-w-\[68\%\] {
    max-width: 68%;
  }
  .max-w-\[720px\] {
    max-width: 720px;
  }
  .max-w-\[920px\] {
    max-width: 920px;
  }
  .max-w-\[620px\] {
    max-width: 620px;
  }
  .max-w-\[34rem\] {
    max-width: 34rem;
  }
  .tracking-\[0\.06em\] {
    letter-spacing: 0.06em;
  }
  .tracking-\[-0\.035em\] {
    letter-spacing: -0.035em;
  }
  .tracking-\[-0\.015em\] {
    letter-spacing: -0.015em;
  }
  .border-b {
    border-bottom-width: 1px;
  }
  .border-t {
    border-top-width: 1px;
  }
  .border-dashed {
    border-style: dashed;
  }
  .border-\[\#cbd5e1\] {
    border-color: #cbd5e1;
  }
  .border-\[\#dbe7ff\] {
    border-color: #dbe7ff;
  }
  .border-\[\#1447e6\] {
    border-color: #1447e6;
  }
  .from-\[\#eef4ff\] {
    --tw-gradient-from: #eef4ff;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(238, 244, 255, 0));
  }
  .to-\[rgba\(246\,248\,251\,0\)\] {
    --tw-gradient-to: rgba(246, 248, 251, 0);
  }
  /* ========== Course Detail Page Utilities ========== */
  /* Backgrounds - arbitrary */
  .bg-\[\#f8fafc\] { background-color: #f8fafc; }
  .bg-\[\#fafbfe\] { background-color: #fafbfe; }
  .bg-\[\#fee2e2\] { background-color: #fee2e2; }
  .bg-\[\#dcfce7\] { background-color: #dcfce7; }
  .bg-\[\#fef9c3\] { background-color: #fef9c3; }
  .bg-\[\#f1f5f9\] { background-color: #f1f5f9; }
  .bg-\[\#e2e8f0\] { background-color: #e2e8f0; }
  .bg-\[\#fef2f2\] { background-color: #fef2f2; }
  .bg-\[rgba\(255\,255\,255\,0\.03\)\] { background-color: rgba(255, 255, 255, 0.03); }
  .bg-\[rgba\(255\,255\,255\,0\.1\)\] { background-color: rgba(255, 255, 255, 0.1); }
  .bg-\[rgba\(37\,99\,235\,0\.06\)\] { background-color: rgba(37, 99, 235, 0.06); }
  .bg-\[rgba\(37\,99\,235\,0\.08\)\] { background-color: rgba(37, 99, 235, 0.08); }

  /* Hero special backgrounds */
  .bg-hero-gradient { background: linear-gradient(135deg, #0f172a 0%, #1e293b 70%, #155dfc 100%); }
  .bg-hero-radial { background: radial-gradient(circle at 80% 20%, rgba(21, 93, 252, 0.15), transparent 400px); }
  .bg-hero-dots { background-image: radial-gradient(white 1px, transparent 0); background-size: 24px 24px; }
  .bg-glass-glow { background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%); }
  .bg-icon-gradient { background: linear-gradient(135deg, #155dfc 0%, #3b82f6 100%); }

  /* Text colors - arbitrary */
  .text-\[\#60a5fa\] { color: #60a5fa; }
  .text-\[\#3b82f6\] { color: #3b82f6; }
  .text-\[\#1d4ed8\] { color: #1d4ed8; }
  .text-\[\#ef4444\] { color: #ef4444; }
  .text-\[\#dc2626\] { color: #dc2626; }
  .text-\[\#16a34a\] { color: #16a34a; }
  .text-\[\#ca8a04\] { color: #ca8a04; }
  .text-\[\#1e293b\] { color: #1e293b; }
  .text-\[\#334155\] { color: #334155; }
  .text-\[\#94a3b8\] { color: #94a3b8; }
  .text-\[\#cbd5e1\] { color: #cbd5e1; }
  .text-white\/50 { color: rgba(255, 255, 255, 0.5); }
  .text-white\/65 { color: rgba(255, 255, 255, 0.65); }

  /* Border colors */
  .border-\[\#edf2f7\] { border-color: #edf2f7; }
  .border-\[\#e2e8f0\] { border-color: #e2e8f0; }
  .border-\[\#f1f5f9\] { border-color: #f1f5f9; }
  .border-\[\#fecaca\] { border-color: #fecaca; }
  .border-\[rgba\(255\,255\,255\,0\.1\)\] { border-color: rgba(255, 255, 255, 0.1); }
  .border-\[rgba\(255\,255\,255\,0\.15\)\] { border-color: rgba(255, 255, 255, 0.15); }
  .border-transparent { border-color: transparent; }

  /* Border widths */
  .border-t-4 { border-top-width: 4px; border-top-style: solid; }
  .border-2 { border-width: 2px; border-style: solid; }
  .border-t-primary { border-top-color: var(--primary); }
  .bg-primary { background-color: var(--primary); }
  .text-\[3rem\] { font-size: 3rem; }

  /* Border radius - pixel values */
  .rounded-\[6px\] { border-radius: 6px; }
  .rounded-\[8px\] { border-radius: 8px; }
  .rounded-\[10px\] { border-radius: 10px; }
  .rounded-\[12px\] { border-radius: 12px; }
  .rounded-\[16px\] { border-radius: 16px; }
  .rounded-\[18px\] { border-radius: 18px; }
  .rounded-\[20px\] { border-radius: 20px; }
  .rounded-\[99px\] { border-radius: 99px; }

  /* Sizing arbitrary */
  .w-\[42px\] { width: 42px; }
  .h-\[42px\] { height: 42px; }
  .w-\[70px\] { width: 70px; }
  .h-\[70px\] { height: 70px; }
  .w-\[150px\] { width: 150px; }
  .h-\[150px\] { height: 150px; }
  .w-\[320px\] { width: 320px; }
  .w-\[14px\] { width: 14px; }
  .min-h-screen { min-height: 100vh; }
  .min-w-\[75px\] { min-width: 75px; }
  .max-w-\[1200px\] { max-width: 1200px; }

  /* Padding arbitrary */
  .py-\[60px\] { padding-top: 60px; padding-bottom: 60px; }
  .py-\[40px\] { padding-top: 40px; padding-bottom: 40px; }
  .py-\[24px\] { padding-top: 24px; padding-bottom: 24px; }
  .py-\[20px\] { padding-top: 20px; padding-bottom: 20px; }
  .py-\[16px\] { padding-top: 16px; padding-bottom: 16px; }
  .py-\[12px\] { padding-top: 12px; padding-bottom: 12px; }
  .py-\[10px\] { padding-top: 10px; padding-bottom: 10px; }
  .py-\[6px\] { padding-top: 6px; padding-bottom: 6px; }
  .py-\[4px\] { padding-top: 4px; padding-bottom: 4px; }
  .px-\[40px\] { padding-left: 40px; padding-right: 40px; }
  .px-\[24px\] { padding-left: 24px; padding-right: 24px; }
  .px-\[20px\] { padding-left: 20px; padding-right: 20px; }
  .px-\[18px\] { padding-left: 18px; padding-right: 18px; }
  .px-\[14px\] { padding-left: 14px; padding-right: 14px; }
  .px-\[10px\] { padding-left: 10px; padding-right: 10px; }
  .px-\[8px\] { padding-left: 8px; padding-right: 8px; }
  .p-\[35px\] { padding: 35px; }
  .p-\[30px\] { padding: 30px; }
  .p-\[24px\] { padding: 24px; }
  .p-\[20px\] { padding: 20px; }
  .p-\[16px\] { padding: 16px; }
  .pt-\[30px\] { padding-top: 30px; }
  .pb-\[60px\] { padding-bottom: 60px; }
  .pb-\[16px\] { padding-bottom: 16px; }
  .pb-\[12px\] { padding-bottom: 12px; }
  .pb-\[8px\] { padding-bottom: 8px; }
  .pb-\[4px\] { padding-bottom: 4px; }
  .pl-\[40px\] { padding-left: 40px; }

  /* Grid templates arbitrary */
  .grid-cols-\[1\.5fr_1fr\] { grid-template-columns: 1.5fr 1fr; }
  .grid-cols-\[2\.3fr_1fr\] { grid-template-columns: 2.3fr 1fr; }
  .grid-cols-\[1\.2fr_2fr_1\.8fr_2fr\] { grid-template-columns: 1.2fr 2fr 1.8fr 2fr; }

  /* Position arbitrary */
  .top-\[-50px\] { top: -50px; }
  .right-\[-50px\] { right: -50px; }
  .top-\[24px\] { top: 24px; }

  /* Backdrop */
  .backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

  /* Opacity */
  .opacity-\[0\.04\] { opacity: 0.04; }

  /* Pointer events */
  .pointer-events-none { pointer-events: none; }

  /* Custom shadows */
  .shadow-hero { box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15); }
  .shadow-glass { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); }
  .shadow-card-soft { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.03); }
  .shadow-card-hover { box-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.08); }
  .shadow-icon-glow { box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3); }
  .shadow-class-card { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02); }
  .shadow-btn-blue { box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2); }

  /* Transitions */
  .transition-base { transition: all 0.25s ease; }
  .transition-fast { transition: all 0.2s ease; }
  .transition-color-25 { transition: color 0.25s, transform 0.25s; }
  .transition-transform-25 { transition: transform 0.25s, box-shadow 0.25s; }

  /* Hover utilities */
  .hover\:-translate-x-1:hover { transform: translateX(-4px); }
  .hover\:bg-\[\#f1f5f9\]:hover { background-color: #f1f5f9; }
  .hover\:border-\[\#94a3b8\]:hover { border-color: #94a3b8; }
  .hover\:text-\[\#1d4ed8\]:hover { color: #1d4ed8; }
  .hover\:text-white:hover { color: #ffffff; }
  .hover\:bg-\[\#1d4ed8\]:hover { background-color: #1d4ed8; }
  .hover\:shadow-btn-blue:hover { box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2); }
  .hover\:shadow-card-hover:hover { box-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.08); }
  .hover\:filter-brightness:hover { filter: brightness(1.1); }

  /* Letter spacing */
  .tracking-\[-0\.02em\] { letter-spacing: -0.02em; }
  .tracking-\[-0\.01em\] { letter-spacing: -0.01em; }
  .tracking-\[0\.02em\] { letter-spacing: 0.02em; }
  .tracking-\[0\.05em\] { letter-spacing: 0.05em; }

  /* Animation */
  @keyframes float-icon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }
  .animate-float-icon { animation: float-icon 5s ease-in-out infinite; }

  /* Cursor */
  .cursor-not-allowed { cursor: not-allowed; }

  /* Line height */
  .leading-relaxed { line-height: 1.7; }
  .leading-loose { line-height: 1.75; }
  .leading-\[1\.25\] { line-height: 1.25; }
  .leading-\[1\.5\] { line-height: 1.5; }

  /* Text alignment */
  .text-left { text-align: left; }
  .text-right { text-align: right; }

  /* Overflow */
  .overflow-x-hidden { overflow-x: hidden; }

  /* List */
  .list-none { list-style: none; }

  /* Font sizes - arbitrary */
  .text-\[0\.5rem\] { font-size: 0.5rem; }
  .text-\[0\.7rem\] { font-size: 0.7rem; }
  .text-\[0\.75rem\] { font-size: 0.75rem; }
  .text-\[0\.8rem\] { font-size: 0.8rem; }
  .text-\[0\.85rem\] { font-size: 0.85rem; }
  .text-\[0\.875rem\] { font-size: 0.875rem; }
  .text-\[0\.9rem\] { font-size: 0.9rem; }
  .text-\[0\.95rem\] { font-size: 0.95rem; }
  .text-\[1\.05rem\] { font-size: 1.05rem; }
  .text-\[1\.2rem\] { font-size: 1.2rem; }
  .text-\[1\.25rem\] { font-size: 1.25rem; }
  .text-\[1\.35rem\] { font-size: 1.35rem; }
  .text-\[1\.6rem\] { font-size: 1.6rem; }
  .text-\[2\.2rem\] { font-size: 2.2rem; }
  .text-\[2\.5rem\] { font-size: 2.5rem; }
  .text-\[clamp\(2rem\,4vw\,3\.35rem\)\] { font-size: clamp(2rem, 4vw, 3.35rem); }
  .text-\[clamp\(1rem\,4vw\,1\.125rem\)\] { font-size: clamp(1rem, 4vw, 1.125rem); }
  .text-\[clamp\(2rem\,7vw\,3\.35rem\)\] { font-size: clamp(2rem, 7vw, 3.35rem); }
  .text-\[clamp\(2\.4rem\,10vw\,4\.5rem\)\] { font-size: clamp(2.4rem, 10vw, 4.5rem); }

  /* Disabled state */
  .disabled\:bg-\[\#e2e8f0\]:disabled { background-color: #e2e8f0; }
  .disabled\:text-\[\#94a3b8\]:disabled { color: #94a3b8; }
  .disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }
  .disabled\:border-transparent:disabled { border-color: transparent; }

  /* Width fit */
  .w-fit-content { width: fit-content; }

  /* Home page arbitrary utilities */
  .w-\[2\.65rem\] { width: 2.65rem; }
  .h-\[2\.65rem\] { height: 2.65rem; }
  .w-\[3\.25rem\] { width: 3.25rem; }
  .h-\[3\.25rem\] { height: 3.25rem; }
  .min-h-\[22rem\] { min-height: 22rem; }
  .rounded-\[0\.9rem\] { border-radius: 0.9rem; }
  .rounded-\[1\.2rem\] { border-radius: 1.2rem; }
  .rounded-\[1\.4rem\] { border-radius: 1.4rem; }
  .rounded-\[1\.6rem\] { border-radius: 1.6rem; }
  .text-\[1\.15rem\] { font-size: 1.15rem; }
  .p-\[1\.35rem\] { padding: 1.35rem; }
  .duration-\[0\.25s\] { transition-duration: 0.25s; }
  .leading-\[1\.04\] { line-height: 1.04; }
  .tracking-\[-0\.04em\] { letter-spacing: -0.04em; }
  .bg-\[\#0f46d9\] { background-color: #0f46d9; }
  .bg-\[\#f8fbff\] { background-color: #f8fbff; }
  .bg-\[rgba\(20\,184\,166\,0\.12\)\] { background-color: rgba(20, 184, 166, 0.12); }
  .bg-\[rgba\(21\,93\,252\,0\.1\)\] { background-color: rgba(21, 93, 252, 0.1); }
  .text-\[\#0b1736\] { color: #0b1736; }
  .text-\[\#0f172a\] { color: #0f172a; }
  .text-\[\#475569\] { color: #475569; }
  .text-\[\#64748b\] { color: #64748b; }
  .text-\[\#0f766e\] { color: #0f766e; }
  .border-\[rgba\(15\,23\,42\,0\.08\)\] { border-color: rgba(15, 23, 42, 0.08); }
  .to-\[\#f8fbff\] { --tw-gradient-to: #f8fbff; }
  .shadow-\[0_18px_48px_rgba\(15\,23\,42\,0\.08\)\] { box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08); }
  .hover\:-translate-y-1:hover { transform: translateY(-0.25rem); }

  /* Responsive (max-width) variants */
  @media (max-width: 1024px) {
    .max-lg\:grid-cols-1 { grid-template-columns: 1fr; }
    .max-lg\:static { position: static; }
  }
  @media (max-width: 768px) {
    .max-md\:grid-cols-1 { grid-template-columns: 1fr; }
    .max-md\:gap-y-8 { row-gap: 2rem; }
    .max-md\:text-center { text-align: center; }
    .max-md\:justify-center { justify-content: center; }
    .max-md\:mx-auto { margin-left: auto; margin-right: auto; }
    .max-md\:flex-col { flex-direction: column; }
    .max-md\:items-start { align-items: flex-start; }
    .max-md\:w-full { width: 100%; }
    .max-md\:px-\[20px\] { padding-left: 20px; padding-right: 20px; }
    .max-md\:p-\[12px\] { padding: 12px; }
    .max-md\:text-\[2rem\] { font-size: 2rem; }
    .max-md\:min-w-\[80px\] { min-width: 80px; }
    .max-md\:gap-2 { gap: 0.5rem; }
    .max-md\:gap-3 { gap: 0.75rem; }
    .max-md\:gap-4 { gap: 1rem; }
    .max-md\:self-start { align-self: flex-start; }
    .max-md\:text-left { text-align: left; }
  }
  @media (max-width: 480px) {
    .max-sm\:py-\[40px\] { padding-top: 40px; padding-bottom: 40px; }
    .max-sm\:rounded-\[12px\] { border-radius: 12px; }
    .max-sm\:text-\[1\.7rem\] { font-size: 1.7rem; }
    .max-sm\:p-\[20px\] { padding: 20px; }
  }

  @media (min-width: 768px) {
    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .md\:items-end {
      align-items: flex-end;
    }
    .md\:justify-end {
      justify-content: flex-end;
    }
    .md\:col-span-2 {
      grid-column: span 2 / span 2;
    }
  }
  @media (min-width: 1024px) {
    .lg\:grid-cols-\[0\.8fr_1\.2fr\] {
      grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    }
    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .lg\:col-span-1 {
      grid-column: span 1 / span 1;
    }
    .lg\:col-span-2 {
      grid-column: span 2 / span 2;
    }
    .lg\:col-span-5 {
      grid-column: span 5 / span 5;
    }
    .lg\:col-span-7 {
      grid-column: span 7 / span 7;
    }
  }

  /* Hover text/bg utilities needed for dynamic component HTML */
  .hover\:text-primary:hover { color: var(--primary); }
  .hover\:bg-\[\#f8fbff\]:hover { background-color: #f8fbff; }

  /* ========== Admin Pages — Arbitrary Utilities ========== */
  /* Text sizes */
  .text-\[0\.6875rem\] { font-size: 0.6875rem; }
  .text-\[0\.72rem\]   { font-size: 0.72rem; }
  .text-\[0\.8125rem\] { font-size: 0.8125rem; }
  .text-\[1rem\]       { font-size: 1rem; }
  .text-\[0\.74rem\]   { font-size: 0.74rem; }
  .text-\[0\.76rem\]   { font-size: 0.76rem; }
  .text-\[0\.78rem\]   { font-size: 0.78rem; }
  .text-\[0\.82rem\]   { font-size: 0.82rem; }
  .text-\[0\.83rem\]   { font-size: 0.83rem; }
  .text-\[0\.84rem\]   { font-size: 0.84rem; }
  .text-\[0\.86rem\]   { font-size: 0.86rem; }
  .text-\[0\.88rem\]   { font-size: 0.88rem; }
  .text-\[0\.98rem\]   { font-size: 0.98rem; }
  .text-\[1\.45rem\]   { font-size: 1.45rem; }
  .text-\[1\.55rem\]   { font-size: 1.55rem; }
  .text-\[1\.7rem\]    { font-size: 1.7rem; }
  .text-\[2rem\]       { font-size: 2rem; }
  /* Text colours */
  .text-\[\#155dfc\]   { color: #155dfc; }
  .text-\[\#0284c7\]   { color: #0284c7; }
  .text-\[\#d97706\]   { color: #d97706; }
  /* Backgrounds */
  .bg-\[\#eff6ff\]     { background-color: #eff6ff; }
  .bg-\[\#e0f2fe\]     { background-color: #e0f2fe; }
  .bg-\[\#fef3c7\]     { background-color: #fef3c7; }
  .bg-\[\#fbfdff\]     { background-color: #fbfdff; }
  /* Border */
  .border-\[rgba\(148\,163\,184\,0\.22\)\] { border-color: rgba(148,163,184,0.22); }
  /* Shadow */
  .shadow-\[0_18px_48px_rgba\(15\,23\,42\,0\.06\)\] { box-shadow: 0 18px 48px rgba(15,23,42,0.06); }
  /* Font weight */
  .font-extrabold  { font-weight: 800; }
  /* Whitespace / font-style */
  .whitespace-nowrap { white-space: nowrap; }
  .not-italic        { font-style: normal; }
  /* Outline */
  .outline-none    { outline: none; }
  /* Min-height */
  .min-h-\[1\.8rem\]  { min-height: 1.8rem; }
  .min-h-\[2\.6rem\]  { min-height: 2.6rem; }
  .min-h-unset        { min-height: unset; }
  /* Heights */
  .h-\[2\.6rem\]      { height: 2.6rem; }
  .h-\[2\.75rem\]     { height: 2.75rem; }
  .h-\[2\.25rem\]     { height: 2.25rem; }
  .h-\[0\.5rem\]      { height: 0.5rem; }
  /* Widths / sizes */
  .w-4              { width: 1rem; }
  .h-4              { height: 1rem; }
  .w-\[3\.1rem\]    { width: 3.1rem; }
  .h-\[3\.1rem\]    { height: 3.1rem; }
  .w-\[3\.4rem\]    { width: 3.4rem; }
  .h-\[3\.4rem\]    { height: 3.4rem; }
  .w-\[4\.25rem\]   { width: 4.25rem; }
  .h-\[4\.25rem\]   { height: 4.25rem; }
  .w-\[32px\]       { width: 32px; }
  .h-\[32px\]       { height: 32px; }
  .min-w-\[4\.8rem\]  { min-width: 4.8rem; }
  .min-w-\[9\.5rem\]  { min-width: 9.5rem; }
  .max-w-\[28rem\]    { max-width: 28rem; }
  /* Line height */
  .leading-\[1\.2\]   { line-height: 1.2; }
  .leading-\[1\.35\]  { line-height: 1.35; }
  /* Margin */
  .ml-auto             { margin-left: auto; }
  .mx-auto             { margin-left: auto; margin-right: auto; }
  .mt-\[0\.2rem\]      { margin-top: 0.2rem; }
  .mb-\[0\.12rem\]     { margin-bottom: 0.12rem; }
  .mb-\[0\.2rem\]      { margin-bottom: 0.2rem; }
  .mb-\[0\.35rem\]     { margin-bottom: 0.35rem; }
  .mb-\[0\.65rem\]     { margin-bottom: 0.65rem; }
  .mb-\[0\.8rem\]      { margin-bottom: 0.8rem; }
  .ml-\[0\.18rem\]     { margin-left: 0.18rem; }
  /* Gap */
  .gap-\[0\.3rem\]          { gap: 0.3rem; }
  .gap-\[0\.32rem\]         { gap: 0.32rem; }
  .gap-\[0\.35rem\]         { gap: 0.35rem; }
  .gap-\[0\.45rem\]         { gap: 0.45rem; }
  .gap-\[0\.85rem\]         { gap: 0.85rem; }
  .gap-\[0\.9rem\]          { gap: 0.9rem; }
  .gap-\[0\.95rem\]         { gap: 0.95rem; }
  .gap-\[0\.5rem_0\.9rem\]  { gap: 0.5rem 0.9rem; }
  .gap-\[0\.4rem_0\.9rem\]  { gap: 0.4rem 0.9rem; }
  /* Padding */
  .py-\[2\.25rem\]     { padding-top: 2.25rem; padding-bottom: 2.25rem; }
  .pt-\[1\.15rem\]     { padding-top: 1.15rem; }
  .px-\[1\.15rem\]     { padding-left: 1.15rem; padding-right: 1.15rem; }
  .pb-\[0\.85rem\]     { padding-bottom: 0.85rem; }
  .pt-\[0\.15rem\]     { padding-top: 0.15rem; }
  .pr-\[0\.95rem\]     { padding-right: 0.95rem; }
  .pl-\[2\.45rem\]     { padding-left: 2.45rem; }
  .px-\[0\.65rem\]     { padding-left: 0.65rem; padding-right: 0.65rem; }
  .px-\[0\.85rem\]     { padding-left: 0.85rem; padding-right: 0.85rem; }
  /* Grid template columns */
  .grid-cols-\[minmax\(18rem\,1fr\)_auto\]                             { grid-template-columns: minmax(18rem, 1fr) auto; }
  .grid-cols-\[minmax\(0\,1\.05fr\)_minmax\(24rem\,0\.95fr\)\]         { grid-template-columns: minmax(0, 1.05fr) minmax(24rem, 0.95fr); }
  .grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,3fr\)\]                     { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
  .grid-cols-\[8\.5rem_minmax\(0\,1fr\)_auto\]                         { grid-template-columns: 8.5rem minmax(0, 1fr) auto; }
  /* Field transition */
  .transition-field { transition: border-color 0.16s ease, box-shadow 0.16s ease; }
  /* Position left */
  .left-\[0\.9rem\] { left: 0.9rem; }
  /* Display contents (makes element box-model invisible — for forms inside tables) */
  .contents { display: contents; }
}

/* ==========================================================================
   COMPONENT CLASSES (status-pill, mode-pill, action-btn, student-bar, skeleton)
   ========================================================================== */

/* Status Pills */
.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 600;
  min-height: 1.75rem;
  padding: 0.28rem 0.68rem;
  border: 1px solid transparent;
}

.status-pill__dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: currentColor;
}

.status-pill--success { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.status-pill--info    { background: #e0f2fe; color: #075985; border-color: #bae6fd; }
.status-pill--warning { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.status-pill--danger  { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.status-pill--muted   { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }

/* Mode Pills */
.mode-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 600;
  min-height: 1.65rem;
  padding: 0.24rem 0.62rem;
  border: 1px solid transparent;
}

.mode-pill--offline { background: #f8fafc; color: #334155; border-color: #e2e8f0; }
.mode-pill--online  { background: #e0f2fe; color: #075985; border-color: #bae6fd; }
.mode-pill--hybrid  { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.mode-pill--sm      { font-size: 0.6875rem; padding: 0.15rem 0.5rem; min-height: unset; }

/* Action Buttons */
.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  background: transparent;
  text-decoration: none;
}

.action-btn--view  { background-color: rgba(21, 93, 252, 0.06); color: #155dfc; }
.action-btn--edit  { background-color: rgba(217, 119, 6, 0.06); color: #d97706; }
.action-btn--delete { background-color: rgba(220, 38, 38, 0.06); color: #dc2626; }

.action-btn--view:hover {
  background-color: #155dfc; color: #fff !important;
  box-shadow: 0 4px 12px rgba(21, 93, 252, 0.2); transform: translateY(-2px);
}
.action-btn--edit:hover {
  background-color: #d97706; color: #fff !important;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.2); transform: translateY(-2px);
}
.action-btn--delete:hover {
  background-color: #dc2626; color: #fff !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2); transform: translateY(-2px);
}

/* Student Capacity Bar */
.student-bar {
  height: 0.34rem;
  width: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.student-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #16a34a;
}

.student-bar.is-high span { background: #d97706; }
.student-bar.is-full span { background: #dc2626; }

/* Skeleton Loading */
@keyframes skeletonShimmer {
  0%   { background-position: -28rem 0; }
  100% { background-position:  28rem 0; }
}

.skeleton,
.skeleton-circle {
  display: block;
  background: linear-gradient(90deg, #e2e8f0 25%, #f8fafc 50%, #e2e8f0 75%);
  background-size: 28rem 100%;
  animation: skeletonShimmer 1.25s infinite linear;
}

.skeleton        { border-radius: 6px; }
.skeleton-sm     { height: 0.82rem; }
.skeleton-line   { height: 0.34rem; margin-top: 0.38rem; }
.skeleton-xs     { height: 0.65rem; border-radius: 4px; }
.skeleton-center { margin-inline: auto; }
.skeleton-w-24   { width: 1.5rem; }
.skeleton-w-36   { width: 2.25rem; }
.skeleton-w-44   { width: 2.75rem; }
.skeleton-w-56   { width: 3.5rem; }
.skeleton-w-64   { width: 4rem; }
.skeleton-w-72   { width: 4.5rem; }
.skeleton-w-96   { width: 6rem; }

/* Graduated Student Auth */
.auth-login-actions,
.graduated-auth-actions,
.graduated-auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}

.auth-google-btn__icon {
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.graduated-auth-card {
  max-width: 34rem;
  margin-inline: auto;
}

.graduated-login-panel,
.graduated-auth-notice {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #eff6ff;
  color: #1e3a8a;
}

.graduated-login-panel p,
.graduated-auth-notice span {
  margin: 0;
  color: #1e40af;
  font-size: 0.92rem;
  line-height: 1.5;
}

.graduated-auth-link {
  color: #155dfc;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.graduated-auth-link:hover,
.graduated-auth-link:focus-visible {
  text-decoration: underline;
}

.graduated-auth-error {
  margin: 0;
  color: #dc2626;
  font-size: 0.88rem;
  font-weight: 600;
}