:root {
    --bg-body: #050508;
    --bg-card: #0e0e16;
    --accent: #fb7185;
    --accent-light: #fda4af;
}

body {
    background-color: var(--bg-body);
    color: #e8e8f0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* === CUSTOM SCROLLBAR === */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-track {
    background: var(--bg-body);
}
::-webkit-scrollbar-thumb {
    background: #1a1a2e;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* === ANIMATIONS === */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fadeIn 0.3s ease forwards;
}

/* === SETUP OVERLAY === */
.setup-overlay {
    background: rgba(5, 5, 8, 0.98);
    backdrop-filter: blur(12px);
}

/* === IMAGE HANDLING === */
.aspect-poster { aspect-ratio: 2 / 3; }
.aspect-video { aspect-ratio: 16 / 9; }

/* === CUSTOM BUTTONS === */
.btn-primary-gradient {
    background: linear-gradient(135deg, #fb7185, #e11d48);
    transition: all 0.25s ease;
}
.btn-primary-gradient:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(251, 113, 133, 0.3);
}

/* === UTILITIES === */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.mask-fade-right {
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    -webkit-overflow-scrolling: touch;
}

/* Fallback Image Design for Dark Mode */
.is-fallback {
    filter: brightness(0.2) contrast(1.1) grayscale(0.2);
    transition: filter 0.5s ease;
}

/* Skeleton Loading Shimmer Effect */
@keyframes shimmer {
    0% { background-position: -468px 0; }
    100% { background-position: 468px 0; }
}

.skeleton {
    background: #11111e;
    background-image: linear-gradient(to right, #11111e 0%, #1a1a2e 20%, #11111e 40%, #11111e 100%);
    background-repeat: no-repeat;
    background-size: 800px 104px;
    display: inline-block;
    position: relative;
    animation: shimmer 1.5s linear infinite forwards;
}