:root {
    --app-bg: #f3f4f6;
    --surface: rgba(255, 255, 255, 0.88);
    --surface-border: rgba(15, 23, 42, 0.08);
    --text-strong: #111827;
    --text-muted: #6b7280;
    --hero-accent: #0d6efd;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--text-strong);
    background: var(--app-bg);
}

.app-shell {
    min-height: 100vh;
}

.movie-card,
.empty-state,
.modal-content {
    background: var(--surface);
    border: 1px solid var(--surface-border);
}

.brand-mark {
    width: 3.5rem;
    height: 3.5rem;
    color: #fff;
    background: linear-gradient(135deg, var(--hero-accent), #20c997);
    box-shadow: 0 1rem 2rem rgba(13, 110, 253, 0.2);
}

.movie-card {
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.movie-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.12);
}

.poster-shell {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, #dbeafe, #e5e7eb);
}

.poster-image,
.poster-fallback {
    width: 100%;
    height: 100%;
}

.poster-image {
    object-fit: cover;
    transition: transform 0.5s ease;
}

.movie-card:hover .poster-image {
    transform: scale(1.06);
}

.poster-fallback {
    color: var(--text-muted);
}

.poster-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(to top, rgba(17, 24, 39, 0.72), rgba(17, 24, 39, 0.08));
    transition: opacity 0.25s ease;
}

.movie-card:hover .poster-overlay {
    opacity: 1;
}

.movie-description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.loading-shell {
    min-height: 16rem;
}

.modal-shell {
    background: rgba(15, 23, 42, 0.42);
}

.spin {
    animation: spin 0.9s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.movie-card .badge.text-bg-dark-subtle {
    background-color: rgba(15, 23, 42, 0.08);
    color: var(--text-strong);
}