:root {
    --color-bg: #020617;
    --color-surface: #020617;    
    --color-primary: #0f172a;
    --color-accent: #fbbf24;
    --color-text: #e5e7eb;
    --color-text-muted: #9ca3af;
    --radius-lg: 14px;
    --transition-fast: 0.2s ease;
}


html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    background: radial-gradient(circle at top, #0b1120 0, #020617 55%, #000 100%);
    color: var(--color-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin-bottom: 60px;
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: #fedb6a;
    text-decoration: underline;
}


.sci-navbar {
    background: radial-gradient(circle at top left, #1e293b 0, #020617 60%);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(148, 163, 184, 0.3);
}

.sci-container {
    max-width: 1100px;
}

.navbar-brand {
    color: var(--color-accent) !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.navbar .nav-link {
    color: var(--color-text-muted) !important;
    font-weight: 500;
    margin-left: 8px;
    margin-right: 8px;
    position: relative;
    padding-bottom: 4px;
}

.navbar .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background: var(--color-accent);
    transition: width var(--transition-fast);
}

.navbar .nav-link:hover {
    color: var(--color-text) !important;
}

.navbar .nav-link:hover::after {
    width: 100%;
}

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


.sci-footer {
    background: #020617;
    color: var(--color-text-muted);
}


.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}


.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}


.table {
    color: var(--color-text);
    background: rgba(15, 23, 42, 0.85);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.table thead {
    background: #020617;
}

.table tbody tr:hover {
    background: rgba(148, 163, 184, 0.12);
    transition: background var(--transition-fast);
}


.btn-danger,
.btn-success,
.btn-secondary {
    border-radius: 999px;
}


.movie-card {
    background: linear-gradient(145deg, rgba(15,23,42,0.95), rgba(2,6,23,0.95));
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(251, 191, 36, 0.12);
    transition: transform var(--transition-fast),
                box-shadow var(--transition-fast),
                border-color var(--transition-fast);
}

.movie-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 1);
    border-color: rgba(251, 191, 36, 0.35);
}

.movie-poster {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 12px;
    object-fit: cover;
}

.cart-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.6);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    backdrop-filter: blur(12px);
}


.cart-btn {
    border-radius: 999px;
    border-color: var(--color-text);
    color: var(--color-text);
    padding-inline: 14px;
    font-size: 0.85rem;
    transition: background var(--transition-fast),
                color var(--transition-fast),
                transform var(--transition-fast),
                box-shadow var(--transition-fast);
}

.cart-btn:hover {
    background: var(--color-accent);
    color: #020617;
    transform: translateY(-1px);
    box-shadow: 0 10px 30px rgba(251, 191, 36, 0.45);
}


.btn-auth {
    border-radius: 999px;
    font-weight: 500;
    padding: 6px 14px;
    font-size: 0.85rem;
}

.btn-auth.btn-outline-light {
    border-color: rgba(148, 163, 184, 0.8);
    color: var(--color-text);
}

.btn-auth.btn-outline-light:hover {
    background: rgba(148, 163, 184, 0.1);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.btn-auth.btn-accent {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #020617;
}

.btn-auth.btn-accent:hover {
    background: #fedb6a;
    border-color: #fedb6a;
    box-shadow: 0 10px 30px rgba(251, 191, 36, 0.45);
}
.btn-primary {
    color: #0B1120;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border: none;
    border-radius: 999px;
    padding: 0.5rem 1.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    box-shadow: 0 10px 25px rgba(251, 191, 36, 0.35);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 35px rgba(251, 191, 36, 0.55);
    filter: brightness(1.08);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 6px 15px rgba(15, 23, 42, 0.85);
}
.footer {
    background: radial-gradient(circle at 0 100%, #111827 0, #020617 55%, #000000 100%);
    padding: 0.75rem 0;
}

.footer-brand {
    color: #ffffff;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.8rem;
    opacity: 0.9;
}

.page-title-glow {
    font-weight: 700;
    letter-spacing: .04em;
    text-shadow: 0 0 18px rgba(248, 250, 252, 0.4);
}


.movie-card {
    background: rgba(15, 23, 42, 0.95);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.85);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}

.movie-card:hover {
    transform: translateY(-6px) scale(1.02);
    background: radial-gradient(circle at top, rgba(24, 24, 27, 1), rgba(15, 23, 42, 0.95));
    border-color: var(--color-accent);
    box-shadow: 0 24px 60px rgba(248, 181, 21, 0.35);
}


.movie-poster {
    width: 200px;
    height: 260px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.movie-card:hover .movie-poster {
    transform: translateY(-3px);
    box-shadow: 0 20px 50px rgba(248, 181, 21, 0.35);
}


.btn-create-movie {
    border-radius: 999px;
    padding-inline: 22px;
    text-transform: uppercase;
    letter-spacing: .08em;
    box-shadow: 0 12px 32px rgba(248, 181, 21, 0.45);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-create-movie:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(248, 181, 21, 0.6);
    filter: brightness(1.05);
}


.btn-movie-main {
    border-radius: 999px;
    padding-inline: 16px;
    box-shadow: 0 8px 22px rgba(248, 181, 21, 0.45);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.btn-movie-main:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(248, 181, 21, 0.65);
    filter: brightness(1.06);
}

.btn-movie-secondary {
    border-radius: 999px;
    border-color: rgba(148, 163, 184, 0.9);
}

.btn-movie-danger {
    border-radius: 999px;
}



.genre-page {
    max-width: 900px;
    margin: 0 auto;
}

.genre-subtitle {
    color: #FACC15 !important;
    font-size: 0.95rem;
    opacity: 1;
}



.genre-table-container {
    background: rgba(15, 23, 42, 0.96);
    border-radius: 18px;
    padding: 16px 20px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(12px);
}


.genre-table thead th {
    border-bottom-color: rgba(148, 163, 184, 0.4);
    color: var(--color-text);
    font-weight: 600;
}

.genre-table thead {
    background: linear-gradient(
        90deg,
        rgba(15, 23, 42, 0.98),
        rgba(30, 64, 175, 0.85)
    );
}

.genre-table thead th {
    color: #f9fafb;
    border-bottom-color: rgba(148, 163, 184, 0.5);
    font-weight: 600;
}

.genre-table tbody td {
    border-top-color: rgba(31, 41, 55, 0.9);
    vertical-align: middle;
}


.genre-row {
    transition:
        background 0.25s ease,
        transform 0.2s ease,
        box-shadow 0.25s ease;
}

.genre-row:hover {
    background: radial-gradient(circle at left,
                rgba(248, 181, 21, 0.10),
                rgba(15, 23, 42, 0.98));
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.95);
}


.genre-create-btn {
    border-radius: 999px;
    padding-inline: 20px;
    text-transform: uppercase;
    letter-spacing: .08em;
    box-shadow: 0 12px 32px rgba(248, 181, 21, 0.45);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.genre-create-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(248, 181, 21, 0.65);
    filter: brightness(1.06);
}


.genre-action-btn,
.genre-action-btn-danger {
    border-radius: 999px;
    padding-inline: 14px;
    margin-bottom: 4px;
    font-size: 0.85rem;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}


.genre-action-btn {
    color: var(--color-accent);
    border-color: var(--color-accent);
    background: rgba(15, 23, 42, 0.98);
}

.genre-action-btn:hover {
    background: var(--color-accent);
    color: #111827;
    transform: translateY(-1px);
}


.genre-action-btn-danger {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
    margin-left: 2px;
}

.genre-action-btn-danger:hover {
    background: #dc2626;
    border-color: #dc2626;
    transform: translateY(-1px);
}