/* Minimal Tailwind-like utility subset for offline fallback.
   This is intentionally tiny; it only covers classes used above-the-fold. */

/* Typography and base */
html, body { margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* Container widths */
.max-w-6xl { max-width: 72rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }

/* Display & layout */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: 0.25rem; }
.gap-3 { gap: 0.75rem; }

/* Sizing */
.w-full { width: 100%; }
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.h-4 { height: 1rem; }
.w-4 { width: 1rem; }

/* Radius & border */
.rounded-full { border-radius: 9999px; }
.rounded-xl { border-radius: 0.75rem; }
.border { border-width: 1px; border-style: solid; }
.border-white\/10 { border-color: rgba(255,255,255,0.1); }
.border-white\/20 { border-color: rgba(255,255,255,0.2); }
.border-blue-100 { border-color: #dbeafe; }
.border-blue-200 { border-color: #bfdbfe; }
.border-pink-300\/30 { border-color: rgba(249,168,212,0.3); }

/* Colors */
.bg-slate-950\/80 { background-color: rgba(2,6,23,0.8); }
.bg-white\/5 { background-color: rgba(255,255,255,0.05); }
.bg-white\/10 { background-color: rgba(255,255,255,0.1); }
.bg-white\/60 { background-color: rgba(255,255,255,0.6); }
.text-gray-500 { color: #6b7280; }
.text-blue-600 { color: #2563eb; }
.text-blue-400 { color: #60a5fa; }
.text-yellow-400 { color: #f59e0b; }
.text-pink-500 { color: #ec4899; }

/* Hover helpers (no transitions offline) */
.hover\:bg-white\/10:hover { background-color: rgba(255,255,255,0.1); }
.hover\:text-blue-500:hover { color: #3b82f6; }
.hover\:text-yellow-300:hover { color: #fde047; }

/* Spacing */
.mt-8 { margin-top: 2rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.p-3 { padding: 0.75rem; }

/* Text */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }

/* Utils */
.hidden { display: none; }
.sm\:inline { display: inline; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Simple dark mode support */
.dark .dark\:text-gray-500 { color: #6b7280; }
.dark .dark\:text-blue-400 { color: #60a5fa; }
.dark .dark\:hover\:text-blue-300:hover { color: #93c5fd; }

/* Minimal transitions */
.transition-colors, .transition-transform, .transition-all { transition: none; }
.hover\:scale-110:hover { transform: scale(1.1); }
.transform { transform: none; }
.rotate-45 { transform: rotate(45deg); }

/* Utility for glass */
.glass { background: rgba(255,255,255,0.04); }

/* Note: This is not full Tailwind. It ensures reasonable layout offline. */