.section-title { @apply text-sm font-semibold text-slate-300 mb-3 uppercase tracking-wide; }
.card { @apply bg-panel border border-line rounded-2xl p-4; }
.chip { @apply text-xs px-2.5 py-1 rounded-full bg-panel2 border border-line text-slate-400; }
.nav-tab { @apply px-4 py-3 text-slate-400 border-b-2 border-transparent whitespace-nowrap hover:text-slate-200 transition; }
.nav-tab.active { @apply text-brand border-brand; }
.btn-ghost { @apply text-left text-sm px-3 py-2 rounded-lg bg-panel2 border border-line text-slate-300 hover:border-brand/50 hover:text-white transition; }

/* Fallbacks in case Tailwind @apply isn't processed (CDN mode ignores this file's @apply,
   so we also define plain rules below). */
body { background:#0a0b0f; }
.section-title { font-size:.8rem; font-weight:600; color:#cbd5e1; margin-bottom:.75rem; text-transform:uppercase; letter-spacing:.05em; }
.card { background:#12141c; border:1px solid #232735; border-radius:1rem; padding:1rem; }
.chip { font-size:.72rem; padding:.25rem .6rem; border-radius:9999px; background:#181b26; border:1px solid #232735; color:#94a3b8; }
.nav-tab { padding:.75rem 1rem; color:#94a3b8; border-bottom:2px solid transparent; white-space:nowrap; cursor:pointer; background:none; transition:.15s; }
.nav-tab:hover { color:#e2e8f0; }
.nav-tab.active { color:#53fc18; border-bottom-color:#53fc18; }
.btn-ghost { display:block; text-align:left; font-size:.85rem; padding:.5rem .75rem; border-radius:.5rem; background:#181b26; border:1px solid #232735; color:#cbd5e1; cursor:pointer; transition:.15s; }
.btn-ghost:hover { border-color:rgba(83,252,24,.5); color:#fff; }