/* Small pieces of styling that Tailwind utilities cannot express inline —
   carried over from the original prototype's <style> blocks. */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
html:not(.dark) ::-webkit-scrollbar-track { background: #fafafa; }
::-webkit-scrollbar-thumb { background: #262626; border-radius: 4px; }
html:not(.dark) ::-webkit-scrollbar-thumb { background: #d1d5db; }
::-webkit-scrollbar-thumb:hover { background: #C59B27; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Watch page synopsis clamp */
.desc-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Admin: gradient swatch picker */
.swatch.selected { outline: 2px solid #C59B27; outline-offset: 2px; }

/* Admin: filter + language tabs */
.filter-btn.active,
.lang-tab.active { background-color: #C59B27; color: #000; }
.lang-tab { color: #a1a1aa; }

/* Flash messages fade out */
[data-flash] { transition: opacity 0.3s ease, transform 0.3s ease; }
[data-flash].fading { opacity: 0; transform: translateY(-8px); }

/* Utility used by the hero: 2-line clamp */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}