@tailwind base; @tailwind components; @tailwind utilities;
/* Mobile-first theme */
:root { --bg:#0b1020; --panel:rgba(17,24,39,.7); --border:#1f2937; --text:#e5e7eb; --muted:#9ca3af; --brand:#7c3aed; --brand2:#22d3ee; }
body { background: radial-gradient(1000px 400px at 20% -10%, rgba(124,58,237,.2), transparent), radial-gradient(900px 380px at 90% 0, rgba(34,211,238,.15), transparent), var(--bg); color: var(--text); }
.card { background: var(--panel); border:1px solid var(--border); border-radius: 1rem; padding: 1rem; box-shadow: 0 10px 25px rgba(0,0,0,.15); }
.btn { @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl; background: linear-gradient(135deg, rgba(124,58,237,.22), rgba(34,211,238,.22)); transition: .2s; }
.btn:active { transform: scale(.98); }
.input { @apply px-3 py-2 rounded-xl w-full; background:#0f172a; border:1px solid #1f2937; color: var(--text); }
.kicker { color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; }
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(15,23,42,.8); backdrop-filter: blur(10px); border-top: 1px solid #1f2937; }
.tab { flex: 1; padding:.7rem .4rem; font-size:.8rem; display:flex; flex-direction:column; align-items:center; gap:.2rem; color:#a3a3a3; }
.tab.active { color:#fff; }
.sticky-head { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(12px); background: rgba(11,16,32,.7); border-bottom:1px solid #1f2937; }