@tailwind base;
@tailwind components;
@tailwind utilities;

/* ================= BASE ================= */
@layer base {
  :root {
    --radius: 1rem;
    --accent-from: #6366f1; /* indigo-500 */
    --accent-to: #22c55e;   /* emerald-500 */
  }

  html { scroll-behavior: smooth; }
  body { @apply antialiased overflow-x-hidden bg-gray-50 text-gray-800 dark:bg-gray-950 dark:text-gray-100; }

  /* Global scrollbar styling */
  * { scrollbar-width: thin; scrollbar-color: rgb(209 213 219) transparent; }
  .dark * { scrollbar-color: rgb(55 65 81) transparent; }
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgb(209 213 219); border-radius: 9999px; }
  ::-webkit-scrollbar-thumb:hover { background: rgb(156 163 175); }
  .dark ::-webkit-scrollbar-thumb { background: rgb(55 65 81); }
  .dark ::-webkit-scrollbar-thumb:hover { background: rgb(75 85 99); }

  /* Hide until Alpine mounts */
  [x-cloak] { display: none !important; }

  /* Typography scale */
  h1 { @apply text-3xl/tight md:text-4xl font-extrabold tracking-tight; }
  h2 { @apply text-2xl md:text-3xl font-bold tracking-tight; }
  h3 { @apply text-xl md:text-2xl font-semibold; }
  p { @apply leading-relaxed; }

  /* Links (kecuali komponen tombol) */
  a:not(.btn):not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-ghost):not(.btn-outline):not(.btn-icon):not(.nav-btn):not(.nav-btn-mobile) {
    @apply text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300 underline-offset-4 hover:underline;
  }

  /* Container helper */
  .container-page { @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8; }

  /* Force readable form text on light inputs even in dark mode */
  input, textarea, select {
    @apply text-gray-900 placeholder:text-gray-400 bg-white dark:bg-gray-900 dark:text-gray-100;
  }
}

/* ================= COMPONENTS ================= */
@layer components {
  /* Header / Navbar */
  .app-header {
    @apply sticky top-0 z-40 bg-white/85 dark:bg-gray-950/70 backdrop-blur supports-[backdrop-filter]:bg-white/60
           border-b border-gray-200/70 dark:border-gray-800/70 shadow-soft;
  }
  .app-header.scrolled { @apply bg-white/90 dark:bg-gray-950/80 shadow-lg; }
  .app-header-inner { @apply container-page h-16 flex items-center justify-between; }

  /* Sidebar */
  .sidebar {
    @apply fixed inset-y-0 left-0 w-72 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800
           shadow-sm transition-transform duration-200 ease-out;
  }
  .sidebar-item { @apply flex items-center gap-3 px-4 py-2 rounded-xl text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800; }
  .sidebar-item.active { @apply bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-200; }

  /* Card */
  .card {
    @apply bg-white dark:bg-gray-900 border border-white/60 dark:border-gray-800/60 
           rounded-2xl shadow-soft hover:shadow-lg transition-all duration-300;
  }
  .card-body { @apply p-6; }
  .card-title { @apply text-lg font-semibold text-gray-900 dark:text-gray-100; }
  .card-subtitle { @apply text-sm text-gray-500 dark:text-gray-400; }
  .nav-link { @apply text-gray-700 dark:text-gray-200 hover:text-indigo-600; }
  .nav-link.active { color: var(--accent-from); position: relative; }
  .nav-link.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background-image: linear-gradient(90deg,var(--accent-from),var(--accent-to)); border-radius: 9999px; }

  /* Modern elevated navbar buttons */
  .nav-menu {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 0.25rem;
    @apply rounded-lg p-1 border;
    border-color: rgba(203, 213, 225, 0.8);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(244, 246, 248, 0.92));
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  }

  .nav-menu li {
    list-style: none;
    display: flex;
    align-items: center;
  }

  .nav-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    color: #475569;
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    border: 1px solid rgba(203, 213, 225, 0.6);
    box-shadow: none;
    transition: all 200ms ease-in-out;
    overflow: hidden;
    z-index: 0;
  }

  .nav-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    transition: opacity 200ms ease-in-out;
    pointer-events: none;
    z-index: -1;
  }

  .nav-btn:hover {
    transform: none;
    color: #334155;
    border-color: rgba(226, 232, 240, 0.8);
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  }

  .nav-btn:hover::before { opacity: 1; }

  .nav-btn:active {
    transform: none;
    box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.1);
  }

  .nav-btn.is-active {
    color: #ffffff;
    border-color: rgba(99, 102, 241, 0.6);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.9), rgba(79, 70, 229, 0.85));
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
  }

  .nav-btn.is-active:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 1), rgba(79, 70, 229, 0.95));
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35);
  }

  .nav-btn::after,
  .nav-btn.is-active::after {
    content: none !important;
    display: none !important;
  }

  .dark .nav-menu {
    border-color: rgba(148, 163, 184, 0.15);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.5), rgba(15, 23, 42, 0.35));
    box-shadow: 0 4px 16px rgba(2, 6, 23, 0.2);
  }

  .dark .nav-btn {
    color: #94a3b8;
    background: transparent;
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: none;
  }

  .dark .nav-btn::before {
    background: rgba(100, 116, 139, 0.3);
  }

  .dark .nav-btn:hover {
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.3);
    background: rgba(71, 85, 105, 0.2);
    box-shadow: 0 2px 8px rgba(2, 6, 23, 0.2);
  }

  .dark .nav-btn:active {
    box-shadow: inset 0 2px 4px rgba(2, 6, 23, 0.3);
  }

  .dark .nav-btn.is-active {
    color: #ffffff;
    border-color: rgba(99, 102, 241, 0.7);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.8), rgba(79, 70, 229, 0.75));
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
  }

  .dark .nav-btn.is-active:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.9), rgba(79, 70, 229, 0.85));
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
  }

  .nav-btn-mobile {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    min-height: 36px;
    border-radius: 12px;
    padding: 0.5rem 0.75rem;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.2;
    color: #e2e8f0;
    text-decoration: none;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.72), rgba(17, 24, 39, 0.7));
    box-shadow: 0 3px 10px rgba(2, 6, 23, 0.14);
    transition: transform 300ms ease-in-out, box-shadow 300ms ease-in-out, border-color 300ms ease-in-out, background 300ms ease-in-out;
  }

  .nav-btn-mobile:hover {
    transform: translateY(-1px);
    border-color: rgba(129, 140, 248, 0.35);
    box-shadow: 0 6px 14px rgba(2, 6, 23, 0.18);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(124, 58, 237, 0.2));
  }

  .nav-btn-mobile:active {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(2, 6, 23, 0.16);
  }

  .nav-btn-mobile.is-active {
    color: #f8fafc;
    border-color: rgba(129, 140, 248, 0.4);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.24), rgba(139, 92, 246, 0.26));
    box-shadow: 0 6px 14px rgba(2, 6, 23, 0.2), 0 0 10px rgba(99, 102, 241, 0.14);
  }

  /* KPI / Stat Card */
  .stat-card { @apply card; }
  .stat { @apply flex items-center justify-between gap-3 p-3 md:p-4; }
  .stat .stat-label { @apply text-xs md:text-sm text-gray-500 dark:text-gray-400; }
  .stat .stat-value { @apply text-xl md:text-2xl font-bold; }
  .stat .stat-icon {
    @apply inline-flex items-center justify-center size-9 md:size-10 rounded-xl 
           bg-indigo-50 text-indigo-600 dark:bg-indigo-900/40 dark:text-indigo-300;
  }
  /* Compact variant for tighter KPI cards */
  .stat-compact .stat { @apply p-2 md:p-3; }
  .stat-compact .stat .stat-icon { @apply size-8 md:size-9; }
  /* Hide stat icons globally as requested */
  .stat .stat-icon { display: none !important; }

  /* Buttons */
  .btn { 
    @apply inline-flex items-center justify-center gap-2 rounded-xl px-3 py-1.5 text-sm font-medium
           border border-transparent shadow-sm transition-all disabled:opacity-60 disabled:cursor-not-allowed;
    min-height: 36px;
    font-size: 13px;
    line-height: 1.2;
  }
  .btn-sm { @apply px-2.5 py-1 text-xs rounded-lg; min-height: 32px; }
  .btn-primary { @apply btn bg-indigo-600 text-white hover:bg-indigo-700 focus-visible:ring-2 focus-visible:ring-indigo-500; }
  .btn-outline { @apply btn bg-white dark:bg-transparent border-gray-200 dark:border-gray-800 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-900; }
  .btn-ghost { @apply btn bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200; }
  .btn-success { @apply btn bg-emerald-600 text-white hover:bg-emerald-700; }
  .btn-danger  { @apply btn bg-rose-600 text-white hover:bg-rose-700; }
  .btn-accent { @apply btn text-white; background-image: linear-gradient(90deg,var(--accent-from),var(--accent-to)); }
  .btn-shine { position: relative; overflow: hidden; }
  .btn-shine::before {
    content: ""; position: absolute; inset: -40% -60%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
    transform: translateX(-120%); transition: transform .6s ease;
  }
  .btn-shine:hover::before { transform: translateX(120%); }

  /* Pastikan teks tombol berwarna putih (override gaya link umum) */
  .btn-primary, .btn-success, .btn-danger { color: #ffffff !important; }
  .btn-icon { @apply inline-flex items-center justify-center rounded-xl bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700; width: 2.25rem; height: 2.25rem; }

  @media (min-width: 768px) {
    .btn {
      @apply px-4 py-2 text-sm;
      min-height: 40px;
    }
    .btn-sm {
      @apply px-3 py-1.5 text-xs;
      min-height: 34px;
    }
    .btn-icon {
      width: 2.4rem;
      height: 2.4rem;
    }
    .nav-btn-mobile {
      min-height: 38px;
      font-size: 0.86rem;
    }
  }

  @media (max-width: 639px) {
    .btn {
      min-height: 30px;
      padding: 0.3rem 0.625rem;
      border-radius: 0.5rem;
      gap: 0.35rem;
      font-size: 11px;
    }
    .btn-sm {
      min-height: 28px;
      padding: 0.25rem 0.5rem;
      font-size: 10px;
    }
    .btn-icon {
      width: 2rem;
      height: 2rem;
      border-radius: 0.5rem;
    }
    .nav-btn-mobile {
      min-height: 32px;
      padding: 0.4rem 0.625rem;
      border-radius: 0.625rem;
      font-size: 0.75rem;
    }
  }

  /* Inputs */
  .input, .select, .textarea {
    @apply w-full rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900
           px-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500;
  }
  .auth-select,
  .auth-select option {
    color: #ffffff;
    background-color: rgba(15, 23, 42, 0.98);
  }
  .auth-select option:checked,
  .auth-select option:hover,
  .auth-select option:focus {
    color: #ffffff;
    background: #4338ca;
  }
  .input-sm { @apply px-2 py-1 rounded-lg text-xs; }
  .input-xs { @apply px-2 rounded-lg text-[10px]; height: 1.75rem !important; line-height: 1 !important; }
  .select-xs { @apply px-2 rounded-lg text-[10px]; height: 1.75rem !important; line-height: 1 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  
  /* Vertical alignment for selects */
  select.select-xs {
    display: inline-flex;
    align-items: center;
  }

  @media (max-width: 639px) {
    .input, .select, .textarea {
      padding: 0.4rem 0.625rem;
      border-radius: 0.5rem;
      font-size: 12px;
    }
    .card-title { font-size: 0.875rem; }
  }

  .input-group { @apply flex items-stretch rounded-xl overflow-hidden border border-gray-300 dark:border-gray-700; }
  .input-group > .input { @apply border-0 rounded-none; }
  .input-group > .btn { @apply rounded-none; }

  /* Badge / Chip */
  .badge { @apply inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-medium bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300; }
  .badge-success { @apply bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300; }
  .badge-warning { @apply bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300; }
  .badge-danger  { @apply bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300; }
  .badge-info    { @apply bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300; }

  @media (max-width: 639px) {
    .badge {
      padding: 0.2rem 0.45rem;
      font-size: 10px;
    }
  }

  /* Table */
  .table { @apply w-full text-sm border border-gray-200 dark:border-gray-800 rounded-xl overflow-hidden; }
  .table thead th { @apply bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 font-semibold uppercase tracking-wide text-xs px-4 py-3; }
  .table tbody td { @apply px-4 py-3 border-t border-gray-200 dark:border-gray-800; }
  .table tbody tr:hover { @apply bg-gray-50/60 dark:bg-gray-900; }

  @media (max-width: 639px) {
    .member-table {
      display: block;
      border: 0;
      overflow: visible;
    }
    .member-table thead { display: none; }
    .member-table tbody { display: grid; gap: 0.75rem; }
    .member-table tbody tr {
      display: block;
      overflow: hidden;
      @apply rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900;
    }
    .member-table tbody td {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      min-height: 2.5rem;
      text-align: right;
      @apply border-t border-gray-100 px-3 py-2 text-xs dark:border-gray-800;
    }
    .member-table tbody td:first-child {
      border-top: 0;
      @apply bg-gray-50 dark:bg-gray-800/50;
    }
    .member-table tbody td::before {
      content: attr(data-label);
      flex: 0 0 42%;
      text-align: left;
      @apply text-[10px] font-bold uppercase tracking-wide text-gray-400;
    }
    .member-table tbody td:last-child > form { display: inline-flex; }
    .member-table tbody td[colspan] { display: block; text-align: center; }
    .member-table tbody td[colspan]::before { content: none; }
  }
  /* Modern datatable variant: sticky header, compact, subtle stripes */
  .table-modern thead th { position: sticky; top: 0; z-index: 5; }
  .table-modern tbody tr:nth-child(even) { @apply bg-gray-50/40 dark:bg-gray-900/40; }
  .table-modern tbody tr { @apply transition-colors; }
  .table-modern tbody tr:hover { @apply bg-indigo-50/50 dark:bg-indigo-900/10; }
  /* Progress bar (for porsi kolom) */
  .progress { @apply h-2 w-full rounded-full bg-gray-200 dark:bg-gray-800 overflow-hidden; }
  .progress-bar { @apply h-full bg-gradient-to-r from-indigo-500 to-emerald-500; width: 0%; transition: width .3s ease; }

  /* Tabs */
  .tabs { @apply flex items-center gap-2 border-b border-gray-200 dark:border-gray-800; }
  .tab { @apply px-3 py-2 text-sm text-gray-600 dark:text-gray-300 rounded-t-lg hover:bg-gray-100 dark:hover:bg-gray-800; }
  .tab.active { @apply bg-white dark:bg-gray-900 border border-b-transparent border-gray-200 dark:border-gray-800 text-gray-900 dark:text-gray-100; }

  /* Modal */
  /* Pastikan modal selalu di paling depan dan backdrop tidak menutupi card */
  .modal-backdrop { @apply fixed inset-0 bg-black/40 z-0; }
  .modal { @apply fixed inset-0 z-[9999] grid place-items-center p-4; }
  .modal-card { @apply relative z-10 card w-full max-w-lg; }

  /* Toast */
  .toast-container { @apply fixed bottom-4 right-4 space-y-2 z-50; }
  .toast { @apply card px-4 py-3 shadow-soft border flex items-center gap-3; }
  .toast-success { @apply border-emerald-200 text-emerald-700 bg-emerald-50 dark:bg-emerald-900/20; }
  .toast-warning { @apply border-amber-200 text-amber-800 bg-amber-50 dark:bg-amber-900/20; }
  .toast-danger  { @apply border-rose-200 text-rose-700 bg-rose-50 dark:bg-rose-900/20; }

  /* Empty state */
  .empty { @apply card text-center py-12; }
  .empty-title { @apply text-lg font-semibold mb-1; }
  .empty-desc { @apply text-sm text-gray-500; }
}

/* ================= UTILITIES ================= */
@layer utilities {
  /* Glass / Frosted */
  .glass { @apply bg-white/70 dark:bg-gray-900/60 backdrop-blur-md border border-white/30 dark:border-gray-800/50 shadow-lg; }

  /* Shadows & motion */
  .shadow-soft { @apply shadow-[0_10px_30px_rgba(2,6,23,0.06)]; }
  .hover-lift { @apply transition-transform duration-300 hover:-translate-y-0.5; }

  /* Fancy appear animation for sections/cards */
  @keyframes fade-up { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: none; } }
  .animate-fade-up { animation: fade-up .5s ease-out both; }
  .animate-delay-1 { animation-delay: .06s; }
  .animate-delay-2 { animation-delay: .12s; }
  .animate-delay-3 { animation-delay: .18s; }

  /* Gradient text */
  .text-gradient { 
    @apply bg-clip-text text-transparent; 
    background-image: linear-gradient(90deg, #6366f1, #22c55e);
  }

  /* Background helpers */
  .bg-grid {
    background-image: radial-gradient(rgba(0,0,0,0.05) 1px, transparent 1px);
    background-size: 16px 16px;
  }
  .bg-dots {
    background-image: radial-gradient(currentColor 1px, transparent 1px);
    background-size: 10px 10px; color: rgba(99,102,241,0.15);
  }

  /* Scrollbar */
  .scrollbar { scrollbar-width: thin; scrollbar-color: rgb(209 213 219) transparent; }
  .dark .scrollbar { scrollbar-color: rgb(55 65 81) transparent; }
  .scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
  .scrollbar::-webkit-scrollbar-track { @apply bg-transparent; }
  .scrollbar::-webkit-scrollbar-thumb { @apply bg-gray-200 dark:bg-gray-700 rounded-full; }
  .scrollbar::-webkit-scrollbar-thumb:hover { @apply bg-gray-300 dark:bg-gray-600; }

  /* Custom Scrollbar (alias) */
  .custom-scrollbar { scrollbar-width: thin; scrollbar-color: rgb(209 213 219) transparent; }
  .dark .custom-scrollbar { scrollbar-color: rgb(55 65 81) transparent; }
  .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
  .custom-scrollbar::-webkit-scrollbar-track { @apply bg-transparent; }
  .custom-scrollbar::-webkit-scrollbar-thumb { @apply bg-gray-200 dark:bg-gray-700 rounded-full; }
  .custom-scrollbar::-webkit-scrollbar-thumb:hover { @apply bg-gray-300 dark:bg-gray-600; }

  /* Focus ring */
  .ring-focus { @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500; }

  /* Animations */
  @keyframes blob {
    0%,100% { transform: translate(0,0) scale(1); }
    33% { transform: translate(8px,-6px) scale(1.04); }
    66% { transform: translate(-6px,6px) scale(0.98); }
  }
  .animate-blob { animation: blob 7s infinite; }

  /* Animated gradient text (smooth shifting colors) */
  @keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  .text-gradient-animate {
    @apply bg-clip-text text-transparent;
    background-image: linear-gradient(90deg, #818cf8, #a78bfa, #34d399, #60a5fa);
    background-size: 200% 200%;
    animation: gradient-shift 8s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .text-gradient-animate { animation: none; }
  }

  /* Animated glow/pulse for logos */
  @keyframes logo-glow {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(99,102,241,0)); }
    50% { transform: scale(1.06); filter: drop-shadow(0 0 .45rem rgba(99,102,241,.4)); }
  }
  .logo-animate {
    animation: logo-glow 5s ease-in-out infinite;
    transition: transform .2s ease;
  }
  .logo-animate:hover { transform: scale(1.07) rotate(-1deg); }
  .dark .logo-animate { filter: drop-shadow(0 0 .2rem rgba(99,102,241,.35)); }
  @media (prefers-reduced-motion: reduce) {
    .logo-animate { animation: none; }
  }

  /* Animated aura behind the logo (wrapper around <img>) */
  @keyframes aura-spin { to { transform: rotate(360deg); } }
  .logo-aura { position: relative; }
  .logo-aura::before,
  .logo-aura::after {
    content: "";
    position: absolute;
    inset: -6px; /* extend a bit outside the img */
    border-radius: 9999px;
    pointer-events: none;
    z-index: 0;
  }
  .logo-aura::before {
    background: conic-gradient(
      from 180deg,
      rgba(99,102,241,.25),
      rgba(34,197,94,.22),
      rgba(59,130,246,.22),
      rgba(99,102,241,.25)
    );
    filter: blur(10px);
    animation: aura-spin 12s linear infinite;
    opacity: .9;
  }
  .logo-aura::after {
    inset: -2px;
    background: radial-gradient(closest-side, rgba(99,102,241,.20), transparent);
    filter: blur(6px);
    opacity: .8;
  }
  .dark .logo-aura::before {
    background: conic-gradient(
      from 180deg,
      rgba(129,140,248,.35),
      rgba(52,211,153,.28),
      rgba(96,165,250,.3),
      rgba(129,140,248,.35)
    );
  }
  @media (prefers-reduced-motion: reduce) {
    .logo-aura::before { animation: none; }
  }

  /* Radius util */
  .rounded-2xl-soft { border-radius: calc(var(--radius) + 0.25rem); }

  /* Divider */
  .divider { @apply relative text-center my-8; }
  .divider:before, .divider:after { content: ""; @apply absolute top-1/2 w-1/3 h-px bg-gray-200 dark:bg-gray-800; }
  .divider:before { left: 0; } .divider:after { right: 0; }
  .divider span { @apply inline-block px-3 text-xs uppercase tracking-wider text-gray-400; }
}

/* ================= EXTRAS (optional but nice) ================= */
/* Prose styling for content pages */
.prose-lite :where(p,ul,ol,blockquote,code) { @apply text-gray-700 dark:text-gray-300; }
.prose-lite h1 { @apply text-3xl font-extrabold; }
.prose-lite h2 { @apply text-2xl font-bold; }
.prose-lite h3 { @apply text-xl font-semibold; }
.prose-lite a  { @apply underline decoration-indigo-400/60 hover:decoration-indigo-600; }

/* Chart canvas sizing helper */
.chart-panel { @apply card; }
.chart-panel .chart-title { @apply card-title mb-2; }
.chart-panel .chart-wrap { @apply relative w-full; }
/* Mini chart wrappers: keep charts compact */
.chart-mini { @apply h-16 flex items-center gap-2; }
.chart-canvas { width: 100% !important; height: 100% !important; max-height: 100% !important; display: block; }

/* Tiny legends for charts */
.legend { @apply flex flex-col gap-1 ml-2; }
.legend-item { @apply flex items-center gap-2 text-[10.5px] leading-snug text-gray-500 dark:text-gray-400; }
.legend-dot { @apply inline-block rounded-sm; width: 12px; height: 8px; }

/* Accent helpers */
.text-accent-gradient { @apply bg-clip-text text-transparent; background-image: linear-gradient(90deg,var(--accent-from),var(--accent-to)); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view { opacity: 1; transform: none; }
.delay-1 { transition-delay: .08s; }
.delay-2 { transition-delay: .16s; }
.delay-3 { transition-delay: .24s; }

/* Hero blobs & parallax */
.blob-shape { position: absolute; border-radius: 9999px; filter: blur(40px); opacity: .65; pointer-events: none; }
.blob-indigo { background: radial-gradient(closest-side, rgba(99,102,241,.35), transparent 70%); }
.blob-emerald { background: radial-gradient(closest-side, rgba(16,185,129,.32), transparent 70%); }
.parallax { will-change: transform; }

/* Tilt card */
.tilt { transform-style: preserve-3d; transition: transform .25s ease, box-shadow .25s ease; }
.tilt:hover { box-shadow: 0 12px 40px rgba(2,6,23,.15); }

/* Scroll cue */
.scroll-cue { @apply absolute left-1/2 -translate-x-1/2 bottom-6 text-xs text-gray-400; }
.scroll-cue svg { animation: bounce-y 1.6s infinite; }
@keyframes bounce-y { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,-6px); } }

/* Form layout helpers */
.form-grid { @apply grid grid-cols-1 md:grid-cols-2 gap-4; }
.form-actions { @apply flex items-center justify-end gap-2 mt-4; }

/* Org chart */
.org { @apply relative; }
.org-box { @apply bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-xl shadow-sm p-3 text-center; }
.org-role { @apply text-[11px] font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400; }
.org-name { @apply text-base font-semibold text-gray-900 dark:text-gray-100; }
.org-list .org-item { @apply flex items-center justify-between gap-2 rounded-lg border border-gray-200 dark:border-gray-800 px-3 py-1.5 text-sm bg-white/60 dark:bg-gray-900/60; }
.org-photo { @apply w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-200; }
/* Avatars */
.avatar { @apply relative inline-flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-800 overflow-hidden; }
.avatar-img { @apply rounded-full object-cover; width: 2.25rem; height: 2.25rem; }
.avatar-fallback { @apply inline-flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-xs font-semibold; width: 2.25rem; height: 2.25rem; }
/* removed debug footer */