@tailwind base;@tailwind components;@tailwind utilities;@layer components {
  /* Layout */
  .ec-container { @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8; }
  .ec-section { @apply py-6 sm:py-8; }

  /* Cards */
  .ec-card { @apply bg-zinc-900/90 border border-zinc-800 rounded-2xl p-6; }
  .ec-card-hover { @apply transition-colors hover:bg-zinc-900 hover:border-zinc-700; }
  .ec-card-muted { @apply bg-zinc-900/60 border-zinc-800; }

  /* Typography */
  .ec-h1 { @apply text-2xl sm:text-3xl font-extrabold text-white tracking-tight; }
  .ec-h2 { @apply text-xl sm:text-2xl font-bold text-white tracking-tight; }
  .ec-h3 { @apply text-lg font-semibold text-white; }
  .ec-h4 { @apply text-base font-semibold text-zinc-200; }
  .ec-subtle { @apply text-sm text-zinc-400; }
  .ec-kicker { @apply uppercase tracking-widest text-[11px] text-zinc-400 font-semibold; }

  /* Buttons */
  .ec-btn { @apply inline-flex items-center gap-2 font-semibold rounded-xl transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed; }
  .ec-btn-sm { @apply px-3 py-1.5 text-sm; }
  .ec-btn-md { @apply px-4 py-2 text-sm; }
  .ec-btn-lg { @apply px-5 py-2.5 text-base; }
  .ec-btn-primary { @apply bg-emerald-500 text-white hover:bg-emerald-600; }
  .ec-btn-secondary { @apply bg-zinc-800 text-zinc-100 border border-zinc-700 hover:bg-zinc-700; }
  .ec-btn-ghost { @apply bg-transparent text-zinc-300 hover:bg-zinc-800; }
  .ec-btn-danger { @apply bg-rose-600 text-white hover:bg-rose-500; }

  /* Inputs */
  .ec-input { @apply w-full bg-zinc-800 border border-zinc-700 text-zinc-100 placeholder-zinc-400 rounded-lg px-3 py-2 focus:border-emerald-500 focus:ring-emerald-500; }
  .ec-textarea { @apply w-full bg-zinc-800 border border-zinc-700 text-zinc-100 placeholder-zinc-400 rounded-lg px-3 py-2 focus:border-emerald-500 focus:ring-emerald-500; }
  .ec-select { @apply w-full bg-zinc-800 border border-zinc-700 text-zinc-100 rounded-lg px-3 py-2 focus:border-emerald-500 focus:ring-emerald-500; }
  .ec-label { @apply block text-sm font-medium text-zinc-300; }
  .ec-help { @apply text-xs text-zinc-500; }

  /* Badges & Pills */
  .ec-badge { @apply inline-flex items-center px-2 py-0.5 rounded text-[11px] font-semibold bg-zinc-800 border border-zinc-700 text-zinc-300; }
  .ec-pill { @apply inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-200; }

  /* Nav link states */
  .ec-nav-link { @apply inline-flex items-center text-sm font-semibold text-zinc-400 hover:text-white transition-colors; }
  .ec-nav-link-active { @apply inline-flex items-center text-sm font-semibold text-emerald-400; }

  /* Empty state */
  .ec-empty { @apply ec-card ec-card-muted text-center text-zinc-400; }

  /* Custom Scrollbars */
  .ec-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #52525b #18181b;
  }

  .ec-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .ec-scrollbar::-webkit-scrollbar-track {
    background: #18181b;
    border-radius: 3px;
  }

  .ec-scrollbar::-webkit-scrollbar-thumb {
    background: #52525b;
    border-radius: 3px;
    transition: background 0.2s ease;
  }

  .ec-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #71717a;
  }

  .ec-scrollbar::-webkit-scrollbar-corner {
    background: #18181b;
  }

  /* Simple BBCode Quote Styling */
  .bb-quote {
    @apply bg-zinc-800/50 border-l-4 border-emerald-500 rounded-r-xl p-4 my-4;
  }

  .bb-quote p {
    @apply text-zinc-300 leading-relaxed mb-0;
  }

  .bb-quote p:last-child {
    @apply mb-0;
  }

  /* Nested quotes */
  .bb-quote .bb-quote {
    @apply border-l-zinc-600 bg-zinc-900/50 ml-4;
  }
}