:root {
    --echo-bg: #050814;
    --echo-panel: #0c1222;
    --echo-panel-2: #101a30;
    --echo-border: rgba(255,255,255,.09);
    --echo-text: #f4f7fb;
    --echo-muted: #9aa8bd;
    --echo-blue: #48b7ff;
    --echo-blue-2: #0b5ed7;
}

html,
body {
    background: var(--echo-bg);
    color: var(--echo-text);
}

body {
    min-height: 100vh;
}

.bg-echo {
    background: rgba(5, 8, 20, .92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--echo-border);
}

.navbar-brand {
    letter-spacing: .02em;
}

.navbar .nav-link {
    color: rgba(255,255,255,.78);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #fff;
}

.hero {
    background:
        radial-gradient(circle at 20% 20%, rgba(72,183,255,.24), transparent 32%),
        radial-gradient(circle at 80% 10%, rgba(11,94,215,.34), transparent 30%),
        linear-gradient(135deg, #050814 0%, #07111f 45%, #0b1730 100%);
    color: white;
    padding: 6rem 0;
    border-bottom: 1px solid var(--echo-border);
}

.hero-card {
    backdrop-filter: blur(14px);
    background: rgba(255,255,255,.07);
    border: 1px solid var(--echo-border);
    border-radius: 1.5rem;
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
}

.card,
.show-card,
.episode-card {
    background: linear-gradient(180deg, var(--echo-panel), var(--echo-panel-2));
    color: var(--echo-text);
    border: 1px solid var(--echo-border);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0,0,0,.28);
    height: 100%;
}

.card .text-muted,
.text-muted {
    color: var(--echo-muted) !important;
}

a.text-dark,
.text-dark {
    color: var(--echo-text) !important;
}

.thumb-wrap {
    aspect-ratio: 16 / 9;
    background: #02040a;
    overflow: hidden;
}

.thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease, opacity .25s ease;
}

.episode-card:hover img,
.show-card:hover img {
    transform: scale(1.04);
    opacity: .92;
}

.episode-card:hover,
.show-card:hover {
    border-color: rgba(72,183,255,.45);
    box-shadow: 0 20px 55px rgba(72,183,255,.12);
}

.video-shell {
    background: #02040a;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--echo-border);
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

video {
    width: 100%;
    height: auto;
    display: block;
}

.badge-echo {
    background: rgba(72,183,255,.15);
    color: #87d7ff;
    border: 1px solid rgba(72,183,255,.25);
}

.badge.text-bg-light {
    background: rgba(255,255,255,.1) !important;
    color: var(--echo-text) !important;
    border: 1px solid var(--echo-border);
}

.form-control {
    background: #080d1a;
    color: var(--echo-text);
    border: 1px solid var(--echo-border);
}

.form-control:focus {
    background: #0b1222;
    color: var(--echo-text);
    border-color: var(--echo-blue);
    box-shadow: 0 0 0 .25rem rgba(72,183,255,.18);
}

.form-label {
    color: var(--echo-text);
}

.alert-info {
    background: rgba(72,183,255,.12);
    color: #ccefff;
    border-color: rgba(72,183,255,.25);
}

.alert-warning {
    background: rgba(255,193,7,.12);
    color: #ffe7a3;
    border-color: rgba(255,193,7,.25);
}

.alert-danger {
    background: rgba(220,53,69,.14);
    color: #ffc4ca;
    border-color: rgba(220,53,69,.28);
}

.btn-primary {
    background: linear-gradient(135deg, var(--echo-blue-2), var(--echo-blue));
    border: 0;
    color: #fff;
}

.btn-primary:hover {
    filter: brightness(1.08);
}

.btn-light {
    background: #f4f7fb;
    border: 0;
}

.btn-outline-light {
    border-color: rgba(255,255,255,.35);
}

a {
    color: #7fd4ff;
}

a:hover {
    color: #b8eaff;
}

.footer {
    background: #050814;
    border-top: 1px solid var(--echo-border);
}

.footer .text-muted {
    color: var(--echo-muted) !important;
}

.season-tabs {
    gap: .5rem;
}

.season-tabs .nav-link {
    background: rgba(255,255,255,.06);
    color: var(--echo-text);
    border: 1px solid var(--echo-border);
}

.season-tabs .nav-link:hover {
    border-color: rgba(72,183,255,.45);
    color: #b8eaff;
}

.season-tabs .nav-link.active {
    background: linear-gradient(135deg, var(--echo-blue-2), var(--echo-blue));
    color: #fff;
    border-color: transparent;
}