/* Custom scrollbar */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; }
    .dark ::-webkit-scrollbar-thumb { background: #475569; }

    /* OTP input focus ring */
    .otp-input:focus { outline: none; box-shadow: 0 0 0 2px #3b82f6; }

    /* Sidebar transition */
    #sidebar { transition: width 0.25s ease, transform 0.25s ease; }
    #main-content { transition: margin-left 0.25s ease; }

    /* Page content fade */
    .page-section { display: none; position: relative; }
    .page-section.active { display: block; animation: fadeIn 0.2s ease-out; }

    /* Loader spinner */
    .spinner {
      border: 3px solid rgba(59, 130, 246, 0.2);
      border-top-color: #3b82f6;
      border-radius: 50%;
      width: 36px; height: 36px;
      animation: spin 0.7s linear infinite;
    }
    .spinner-sm {
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: #fff;
      border-radius: 50%;
      width: 18px; height: 18px;
      animation: spin 0.65s linear infinite;
      display: inline-block;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Button loading state */
    .btn-loading {
      position: relative;
      pointer-events: none;
      opacity: 0.85;
    }
    .btn-loading .btn-text { visibility: hidden; }
    .btn-loading .btn-spinner {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Toast container */
    #toast-container { pointer-events: none; }
    #toast-container > div { pointer-events: auto; }

    /* Reusable card */
    .eduka-card {
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 1rem;
      box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    }
    .dark .eduka-card {
      background: #0f172a;
      border-color: #1e293b;
    }

    /* Badge helpers */
    .badge {
      display: inline-flex;
      white-space: nowrap;
      align-items: center;
      padding: 0.125rem 0.625rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1.25rem;
    }
    .badge-success { background: #ecfdf5; color: #047857; }
    .dark .badge-success { background: rgba(6, 78, 59, 0.4); color: #6ee7b7; }
    .badge-error { background: #fef2f2; color: #b91c1c; }
    .dark .badge-error { background: rgba(127, 29, 29, 0.4); color: #fca5a5; }
    .badge-warning { background: #fffbeb; color: #b45309; }
    .dark .badge-warning { background: rgba(120, 53, 15, 0.4); color: #fcd34d; }
    .badge-info { background: #eff6ff; color: #1d4ed8; }
    .dark .badge-info { background: rgba(30, 58, 138, 0.4); color: #93c5fd; }
    .badge-neutral { background: #f1f5f9; color: #475569; }
    .dark .badge-neutral { background: #1e293b; color: #94a3b8; }

    /* Table polish */
    .eduka-table th {
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.025em;
      color: #64748b;
    }
    .dark .eduka-table th { color: #94a3b8; }