/* Base */
* { box-sizing: border-box; }

body {
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Gradient backgrounds */
.bg-gradient-douyin {
    background: linear-gradient(135deg, #FE2C55 0%, #FF6B9D 100%);
}

.bg-gradient-mesh {
    background:
        radial-gradient(at 40% 20%, rgba(254, 44, 85, 0.08) 0px, transparent 50%),
        radial-gradient(at 80% 0%, rgba(255, 107, 157, 0.06) 0px, transparent 50%),
        radial-gradient(at 0% 50%, rgba(254, 44, 85, 0.04) 0px, transparent 50%);
}

/* Focus states */
.focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(254, 44, 85, 0.15);
}

/* Transitions */
.transition-smooth {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Text ellipsis */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========== Dark Mode ========== */
html.dark body { background-color: #0f172a; color: #e2e8f0; }
html.dark .bg-douyin-gray-50 { background-color: #0f172a; }
html.dark .bg-white, html.dark .bg-white\/80 { background-color: #1e293b !important; }
html.dark .bg-douyin-gray-100 { background-color: #1e293b; }
html.dark .bg-douyin-gray-200 { background-color: #334155; }
html.dark .bg-green-50 { background-color: #064e3b; }
html.dark .bg-green-100 { background-color: #065f46; }
html.dark .bg-yellow-50 { background-color: #451a03; }
html.dark .bg-red-50 { background-color: #450a0a; }
html.dark .bg-purple-50 { background-color: #2e1065; }
html.dark .text-douyin-gray-900 { color: #f1f5f9; }
html.dark .text-douyin-gray-800 { color: #e2e8f0; }
html.dark .text-douyin-gray-700 { color: #cbd5e1; }
html.dark .text-douyin-gray-600 { color: #94a3b8; }
html.dark .text-douyin-gray-500 { color: #64748b; }
html.dark .text-douyin-gray-400 { color: #64748b; }
html.dark .text-green-700 { color: #6ee7b7; }
html.dark .text-green-600 { color: #4ade80; }
html.dark .text-green-500 { color: #34d399; }
html.dark .text-red-700 { color: #fca5a5; }
html.dark .text-red-600 { color: #f87171; }
html.dark .text-yellow-700 { color: #fcd34d; }
html.dark .border-douyin-gray-100 { border-color: #334155; }
html.dark .border-douyin-gray-200 { border-color: #475569; }
html.dark .border-green-100 { border-color: #065f46; }
html.dark .border-red-100 { border-color: #7f1d1d; }
html.dark .border-yellow-100 { border-color: #713f12; }
html.dark .border-purple-100 { border-color: #581c87; }
html.dark .border-b { border-color: #334155; }
html.dark input, html.dark textarea { background-color: #1e293b !important; color: #e2e8f0 !important; border-color: #475569 !important; }
html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b !important; }
html.dark .shadow-lg { --tw-shadow-color: rgba(0,0,0,0.5); }
html.dark .shadow-douyin-red\/20 { --tw-shadow-color: rgba(254,44,85,0.1); }
html.dark .shadow-purple-500\/20 { --tw-shadow-color: rgba(168,85,247,0.1); }
html.dark ::-webkit-scrollbar-thumb { background: #475569; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }
html.dark .backdrop-blur-xl { background-color: rgba(30,41,59,0.85) !important; }
html.dark pre, html.dark code { background-color: #1e293b !important; color: #e2e8f0 !important; }
html.dark .bg-gray-900 { background-color: #0f172a; }
html.dark .bg-gradient-mesh { background: none; }
html.dark .hover\:bg-douyin-gray-200:hover { background-color: #334155; }
.dark-toggle { transition: all 0.3s ease; }
.dark-toggle .icon-sun { display: none; }
.dark-toggle .icon-moon { display: block; }
html.dark .dark-toggle .icon-sun { display: block; }
html.dark .dark-toggle .icon-moon { display: none; }

/* === Added utility classes for admin/user/topic pages === */
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.max-w-2xl { max-width: 42rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-lg { max-width: 32rem; }

/* === Missing utility classes (not in compiled tailwind.css) === */
.bg-white\/80 { background-color: rgba(255,255,255,.8); }
.bg-black\/50 { background-color: rgba(0,0,0,.5); }
.bg-black\/30 { background-color: rgba(0,0,0,.3); }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.pb-6 { padding-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-auto { margin-top: auto; }
.space-y-1 > * + * { margin-top: 0.25rem; }
.overflow-x-auto { overflow-x: auto; }
.whitespace-nowrap { white-space: nowrap; }
.rounded-md { border-radius: 0.375rem; }
.leading-none { line-height: 1; }
.self-center { align-self: center; }
.shrink-0 { flex-shrink: 0; }
.ml-auto { margin-left: auto; }
.text-blue-600 { color: #2563eb; }
.text-indigo-600 { color: #4f46e5; }
.text-pink-600 { color: #db2777; }
.text-yellow-600 { color: #ca8a04; }
.bg-purple-600 { background-color: #9333ea; }
.bg-red-500 { background-color: #ef4444; }
.bg-douyin-gray-800 { background-color: #1f1f20; }
.hover\:bg-purple-700:hover { background-color: #7e22ce; }
.hover\:bg-red-600:hover { background-color: #dc2626; }
.hover\:bg-douyin-gray-300:hover { background-color: #c9c9ca; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(168,85,247,.3); }
.bg-indigo-50 { background-color: #eef2ff; }
.bg-pink-50 { background-color: #fdf2f8; }
.hover\:bg-purple-200:hover { background-color: #e9d5ff; }
.max-w-sm { max-width: 24rem; }
.max-h-60 { max-height: 15rem; }
.max-h-\[80vh\] { max-height: 80vh; }
.w-80 { width: 20rem; }