/* ═══════════════════════════════════════════════════════════
   YesMovies v2 — Cinematic Red & Black Theme
   Deep immersive dark with crimson accents & glow effects
═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --ym-bg:        #000000;
    --ym-bg2:       #080808;
    --ym-bg3:       #0f0f0f;
    --ym-card:      #0d0d0d;
    --ym-card-h:    #141414;
    --ym-border:    #1e1e1e;
    --ym-border-h:  #2a2a2a;
    --ym-red:       #e50914;
    --ym-red-h:     #ff1a26;
    --ym-red-dark:  #8b0000;
    --ym-red-glow:  rgba(229,9,20,0.35);
    --ym-red-glow2: rgba(229,9,20,0.12);
    --ym-text:      #f0f0f0;
    --ym-text2:     #c0c0c0;
    --ym-muted:     #777;
    --ym-nav:       rgba(0,0,0,0.98);
    --radius:       8px;
    --radius-lg:    14px;
    --shadow-card:  0 4px 24px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.04);
    --shadow-red:   0 0 24px rgba(229,9,20,0.3), 0 4px 16px rgba(0,0,0,0.8);
    --transition:   0.22s cubic-bezier(.4,0,.2,1);
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
*,::before,::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background: var(--ym-bg);
    color: var(--ym-text);
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Subtle red-tinted noise vignette on body */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(229,9,20,0.04) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(229,9,20,0.03) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

main { position: relative; z-index: 1; }

/* ── Overrides ─────────────────────────────────────────────────────────────── */
.text-muted     { color: var(--ym-muted) !important; }
.text-secondary { color: #999 !important; }
small, .small   { color: inherit; }

/* ── Scrollbar ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #050505; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--ym-red) 0%, #600 100%); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ym-red-h); }

/* ── Navbar ────────────────────────────────────────────────────────────────── */
#site-nav {
    background: var(--ym-nav);
    backdrop-filter: blur(12px) saturate(180%);
    border-bottom: 1px solid rgba(229,9,20,0.25);
    box-shadow: 0 1px 30px rgba(229,9,20,0.08), 0 4px 20px rgba(0,0,0,0.6);
    z-index: 1040;
    padding-top: .45rem;
    padding-bottom: .45rem;
}

#site-nav .navbar-brand {
    font-size: 1.55rem;
    font-weight: 900;
    letter-spacing: -0.5px;
    text-shadow: 0 0 20px rgba(229,9,20,0.5);
}
#site-nav .navbar-brand .text-danger { color: var(--ym-red) !important; }

#site-nav .nav-link {
    color: #c0c0c0;
    transition: color var(--transition), background var(--transition);
    font-size: .9rem;
    font-weight: 500;
    padding: .38rem .7rem;
    border-radius: 5px;
    letter-spacing: .01em;
}
#site-nav .nav-link:hover  { color: #fff; background: rgba(229,9,20,0.12); }
#site-nav .nav-link.active { color: #fff; background: rgba(229,9,20,0.18); }

.genre-dropdown {
    columns: 2;
    max-height: 300px;
    overflow-y: auto;
    background: #0a0a0a;
    border: 1px solid rgba(229,9,20,0.2);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0,0,0,0.9), 0 0 0 1px rgba(229,9,20,0.1);
}
.genre-dropdown .dropdown-item {
    color: #ccc;
    padding: .32rem 1rem;
    font-size: .85rem;
    transition: background var(--transition), color var(--transition);
}
.genre-dropdown .dropdown-item:hover { background: rgba(229,9,20,0.18); color: #fff; }

/* ── Search bar ────────────────────────────────────────────────────────────── */
.search-form { min-width: 260px; max-width: 380px; }
.search-input {
    background: #111;
    border: 1px solid #222;
    color: #fff;
    border-radius: var(--radius) 0 0 var(--radius) !important;
    font-size: .88rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.search-input::placeholder { color: #555; }
.search-input:focus {
    background: #151515;
    border-color: var(--ym-red);
    box-shadow: 0 0 0 3px rgba(229,9,20,0.18), inset 0 1px 3px rgba(0,0,0,0.5);
    color: #fff;
}

/* ── Hero Banner ───────────────────────────────────────────────────────────── */
.hero-banner {
    width: 100%;
    min-height: 560px;
    background-size: cover;
    background-position: center 20%;
    position: relative;
    overflow: hidden;
}
.hero-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 50% 80% at 0% 50%, rgba(229,9,20,0.08) 0%, transparent 60%);
    pointer-events: none;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 45%, rgba(0,0,0,0.15) 100%),
        linear-gradient(to top, rgba(0,0,0,1) 0%, transparent 55%);
}
.hero-title {
    font-size: clamp(1.9rem, 4.5vw, 3.2rem);
    color: #fff;
    font-weight: 800;
    text-shadow: 0 2px 20px rgba(0,0,0,0.8);
    line-height: 1.12;
    letter-spacing: -.3px;
}
.hero-desc { font-size: .96rem; line-height: 1.65; color: #ccc; }

/* ── Section titles ────────────────────────────────────────────────────────── */
.section-title {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .3px;
    padding-left: 12px;
    border-left: 3px solid var(--ym-red);
    position: relative;
}
.section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--ym-red);
    box-shadow: 0 0 10px rgba(229,9,20,0.6), 0 0 20px rgba(229,9,20,0.3);
}

/* ── Movie Cards ───────────────────────────────────────────────────────────── */
.movie-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform var(--transition);
}
.movie-card:hover { transform: translateY(-4px); }
.movie-card:hover .movie-thumb { transform: scale(1.06); filter: brightness(0.65); }
.movie-card:hover .movie-overlay { opacity: 1; }
.movie-card:hover .movie-thumb-wrap {
    box-shadow: 0 8px 32px rgba(229,9,20,0.25), 0 0 0 1px rgba(229,9,20,0.2);
}

.movie-thumb-wrap {
    position: relative;
    aspect-ratio: 2/3;
    overflow: hidden;
    background: linear-gradient(135deg, #0d0d0d 0%, #1a0505 100%);
    border-radius: var(--radius);
    border: 1px solid var(--ym-border);
    transition: box-shadow var(--transition);
}
.movie-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease, filter .3s ease;
}

.movie-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .25s;
    background: linear-gradient(135deg, rgba(229,9,20,0.2) 0%, rgba(0,0,0,0.4) 100%);
}
.movie-play {
    width: 56px; height: 56px;
    background: rgba(229,9,20,0.9);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: #fff;
    box-shadow: 0 0 30px rgba(229,9,20,0.6), 0 4px 12px rgba(0,0,0,0.5);
    transition: transform .15s;
}
.movie-card:hover .movie-play { transform: scale(1.1); }

.badge-quality {
    position: absolute;
    top: 7px; left: 7px;
    background: linear-gradient(90deg, var(--ym-red) 0%, #b80000 100%);
    color: #fff;
    font-size: .6rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 3px;
    letter-spacing: .5px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(229,9,20,0.4);
}
.badge-rating {
    position: absolute;
    top: 7px; right: 7px;
    background: rgba(0,0,0,0.8);
    color: #f5c518;
    font-size: .68rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid rgba(245,197,24,0.2);
}

.movie-info {
    padding: 7px 2px 4px;
    transition: background .2s;
}
.movie-title {
    color: var(--ym-text);
    font-size: .82rem;
    font-weight: 500;
    margin: 0 0 2px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.movie-year { color: var(--ym-muted); font-size: .73rem; }

/* ── Watch page ────────────────────────────────────────────────────────────── */
.player-wrapper {
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.8), 0 0 0 1px rgba(229,9,20,0.1);
}
.player-wrapper iframe { border: 0; width: 100%; height: 100%; }

.movie-detail-card {
    background: linear-gradient(135deg, #0c0c0c 0%, #0f0005 100%);
    border: 1px solid #1e1e1e;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
}
.watch-title {
    font-size: clamp(1.3rem, 3vw, 2rem);
    color: #fff;
    margin-bottom: .5rem;
    font-weight: 800;
    letter-spacing: -.2px;
}
.movie-meta-table dt { font-weight: 400; color: #888; }
.movie-meta-table dd { margin-bottom: .3rem; color: var(--ym-text); }

.server-btn { border-radius: 5px; font-size: .83rem; }

/* Similar movies sidebar */
.similar-card {
    background: linear-gradient(135deg, #0c0c0c 0%, #100005 100%);
    border: 1px solid #1a1a1a;
    border-radius: 8px;
    padding: 8px;
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.similar-card:hover {
    background: #141414;
    border-color: rgba(229,9,20,0.3);
    box-shadow: 0 4px 20px rgba(229,9,20,0.1);
}
.similar-thumb { width: 54px; height: 78px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.similar-title { color: var(--ym-text); font-size: .82rem; margin: 0 0 3px; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; }

/* ── Stars ─────────────────────────────────────────────────────────────────── */
.stars { color: #f5c518; letter-spacing: 1px; font-size: .9rem; }

/* ── Auth cards ────────────────────────────────────────────────────────────── */
.auth-card {
    background: linear-gradient(135deg, #0c0c0c 0%, #100005 100%);
    border: 1px solid #1e1e1e;
    border-radius: 14px;
    box-shadow: var(--shadow-card);
}

/* ── Form controls (dark) ──────────────────────────────────────────────────── */
.form-control-dark {
    background: #0d0d0d;
    border: 1px solid #222;
    color: #e8e8e8;
    transition: border-color var(--transition), box-shadow var(--transition);
    resize: none;
}
.form-control-dark:focus {
    background: #111;
    border-color: rgba(229,9,20,0.6);
    box-shadow: 0 0 0 3px rgba(229,9,20,0.12), 0 0 0 1px rgba(229,9,20,0.4);
    color: #fff;
}
.form-control-dark::placeholder { color: #444; }
.form-control-dark:disabled { background: #0a0a0a; color: #555; }

/* ── User avatar circle ────────────────────────────────────────────────────── */
.user-avatar-circle {
    background: linear-gradient(135deg, var(--ym-red) 0%, #8b0000 100%);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 16px rgba(229,9,20,0.4);
}

/* ── Pagination ────────────────────────────────────────────────────────────── */
.page-link {
    background: #0d0d0d;
    border-color: #1e1e1e;
    color: #ccc;
    transition: background var(--transition), border-color var(--transition);
}
.page-link:hover { background: #1a1a1a; color: #fff; border-color: rgba(229,9,20,0.3); }
.page-item.active .page-link {
    background: var(--ym-red);
    border-color: var(--ym-red);
    color: #fff;
    box-shadow: 0 0 12px rgba(229,9,20,0.4);
}

/* ── Breadcrumb ────────────────────────────────────────────────────────────── */
.breadcrumb-item + .breadcrumb-item::before { color: #444; }
.breadcrumb-item a { color: #888; text-decoration: none; transition: color var(--transition); }
.breadcrumb-item a:hover { color: var(--ym-red); }
.breadcrumb { background: none; padding: 0; }

/* ── Footer ────────────────────────────────────────────────────────────────── */
.site-footer {
    background: #000;
    border-top: 1px solid rgba(229,9,20,0.15);
    box-shadow: 0 -1px 30px rgba(229,9,20,0.05);
}
.footer-link { color: #666; text-decoration: none; font-size: .86rem; display: block; padding: 1px 0; transition: color var(--transition); }
.footer-link:hover { color: var(--ym-red); }

/* ── Alert overrides ───────────────────────────────────────────────────────── */
.alert { border-radius: var(--radius); font-size: .9rem; }
.alert-danger    { background: rgba(229,9,20,0.12); border-color: rgba(229,9,20,0.3); color: #ff6b6b; }
.alert-success   { background: rgba(25,135,84,0.1); border-color: rgba(25,135,84,0.2); color: #75c898; }
.alert-secondary { background: #0e0e0e; border-color: #222; color: #aaa; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn-danger {
    background: linear-gradient(135deg, var(--ym-red) 0%, #c5000b 100%);
    border-color: var(--ym-red);
    box-shadow: 0 2px 12px rgba(229,9,20,0.3);
    font-weight: 600;
    transition: all var(--transition);
}
.btn-danger:hover {
    background: linear-gradient(135deg, var(--ym-red-h) 0%, var(--ym-red) 100%);
    border-color: var(--ym-red-h);
    box-shadow: 0 4px 20px rgba(229,9,20,0.5);
    transform: translateY(-1px);
}
.btn-danger:active { transform: translateY(0); }

.btn-outline-danger {
    border-color: rgba(229,9,20,0.5);
    color: var(--ym-red);
    transition: all var(--transition);
}
.btn-outline-danger:hover {
    background: rgba(229,9,20,0.12);
    border-color: var(--ym-red);
    color: #ff3333;
}

.btn-outline-secondary { color: #aaa; border-color: #2a2a2a; }
.btn-outline-secondary:hover { background: #1a1a1a; border-color: rgba(229,9,20,0.3); color: #fff; }
.btn-outline-light { border-color: #2a2a2a; color: #ccc; }
.btn-outline-light:hover { background: #151515; border-color: #444; color: #fff; }

/* ── Dropdown ──────────────────────────────────────────────────────────────── */
.dropdown-menu-dark {
    background: #080808;
    border: 1px solid rgba(229,9,20,0.15);
    box-shadow: 0 12px 40px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.04);
    border-radius: var(--radius);
}
.dropdown-menu-dark .dropdown-item { color: #bbb; transition: background var(--transition), color var(--transition); }
.dropdown-menu-dark .dropdown-item:hover { background: rgba(229,9,20,0.15); color: #fff; }
.dropdown-divider { border-color: #1a1a1a; }

/* ── Switch-source notification bar ────────────────────────────────────────── */
#slow-source-bar {
    display: none;
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.92);
    border-top: 1px solid rgba(229,9,20,0.3);
    padding: .55rem 1rem;
    z-index: 20;
    align-items: center;
    gap: .75rem;
    font-size: .85rem;
    color: #f0f0f0;
}

/* ── Admin styles ──────────────────────────────────────────────────────────── */
.admin-sidebar {
    background: #040404;
    min-height: 100vh;
    border-right: 1px solid rgba(229,9,20,0.1);
}
.admin-sidebar .nav-link { color: #aaa; border-radius: 6px; padding: .45rem .8rem; font-size: .88rem; transition: all var(--transition); }
.admin-sidebar .nav-link:hover  { background: rgba(229,9,20,0.1); color: #fff; }
.admin-sidebar .nav-link.active { background: rgba(229,9,20,0.15); color: var(--ym-red); border-left: 2px solid var(--ym-red); }
.admin-stat-card {
    background: linear-gradient(135deg, #0c0c0c 0%, #0f0005 100%);
    border: 1px solid #1a1a1a;
    border-radius: var(--radius);
    padding: 1.25rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.admin-stat-card:hover { border-color: rgba(229,9,20,0.3); box-shadow: 0 4px 20px rgba(229,9,20,0.1); }
.admin-table th { background: #080808; color: #888; border-color: #1a1a1a; font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; }
.admin-table td { border-color: #111; color: var(--ym-text); vertical-align: middle; font-size: .87rem; }
.admin-table tr:hover td { background: rgba(229,9,20,0.04); }
.table-dark-custom { --bs-table-bg: transparent; }

/* ── Star rating input ──────────────────────────────────────────────────────── */
.star-rating-input { display:inline-flex; gap:1px; }
.star-btn {
    background:none; border:none; padding:0 1px;
    font-size:1.15rem; cursor:pointer; line-height:1;
    color:#333; transition:color .12s, transform .08s;
}
.star-btn:hover, .star-btn.active { color:#f5c518; text-shadow: 0 0 8px rgba(245,197,24,0.4); }
.star-btn:active { transform:scale(1.2); }

/* ── Notification bell ──────────────────────────────────────────────────────── */
.notif-bell { position:relative; }
.notif-badge {
    position: absolute; top:-4px; right:-6px;
    min-width:16px; height:16px; padding:0 4px;
    background: var(--ym-red);
    box-shadow: 0 0 8px rgba(229,9,20,0.6);
    color:#fff; border-radius:8px;
    font-size:.6rem; display:flex; align-items:center; justify-content:center;
    font-weight:800; line-height:1; pointer-events:none;
}

/* ── Subscription tier badge ────────────────────────────────────────────────── */
.tier-premium { color:#f5c518; font-weight:700; text-shadow: 0 0 10px rgba(245,197,24,0.3); }
.tier-free    { color:#555; }
.sub-card {
    background: linear-gradient(135deg, #0c0c0c 0%, #100005 100%);
    border: 1px solid #1e1e1e;
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.sub-card.premium {
    border-color: rgba(245,197,24,0.3);
    box-shadow: 0 0 30px rgba(245,197,24,0.08);
}

/* ── Profile tabs ────────────────────────────────────────────────────────────── */
.profile-nav .nav-link { color:#666; border-radius:6px 6px 0 0; padding:.45rem .9rem; font-size:.87rem; transition: color var(--transition); }
.profile-nav .nav-link.active { background:#0c0c0c; color:#fff; border-bottom:2px solid var(--ym-red); box-shadow: 0 -4px 12px rgba(229,9,20,0.1); }
.profile-nav .nav-link:hover { color:#ccc; }

/* ── Watch history item ──────────────────────────────────────────────────────── */
.history-item {
    display:flex; gap:.75rem; align-items:center;
    padding:.6rem 0; border-bottom:1px solid #0f0f0f;
}
.history-item:last-child { border-bottom:none; }
.history-thumb { width:64px; height:90px; border-radius:4px; object-fit:cover; flex-shrink:0; background:#0d0d0d; }

/* ── Comment section ─────────────────────────────────────────────────────────── */
.comment-item { padding:.75rem 0; border-bottom:1px solid #0f0f0f; }
.comment-item:last-child { border-bottom:none; }
.comment-avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; }

/* ── Glow effects ────────────────────────────────────────────────────────────── */
.glow-red {
    box-shadow: 0 0 20px rgba(229,9,20,0.35), 0 0 40px rgba(229,9,20,0.15);
}
.text-glow-red { text-shadow: 0 0 20px rgba(229,9,20,0.5); }

/* ── Glass cards ─────────────────────────────────────────────────────────────── */
.glass-card {
    background: rgba(10,0,0,0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(229,9,20,0.15);
    border-radius: var(--radius-lg);
}

/* ── Continue Watching progress bar ──────────────────────────────────────────── */
.cw-progress-wrap { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,0.08); }
.cw-progress-fill { height:100%; background:linear-gradient(90deg, var(--ym-red) 0%, #ff4444 100%); box-shadow: 0 0 8px rgba(229,9,20,0.6); transition:width .3s; }

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .hero-banner { min-height: 340px; }
    .search-form { min-width: 0; max-width: 180px; }
    .section-title { font-size: .95rem; }
}

/* ── Badges ──────────────────────────────────────────────────────────────────── */
.badge-new {
    background: linear-gradient(90deg, #e50914, #ff4d00);
    color: #fff;
    font-size: .6rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: .4px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(229,9,20,0.4);
}

/* ── Loading skeleton ────────────────────────────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg, #0d0d0d 25%, #161616 50%, #0d0d0d 75%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.5s ease infinite;
    border-radius: var(--radius);
}
@keyframes skeleton-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ── Input group & form overrides ────────────────────────────────────────────── */
.input-group-text {
    background: #0d0d0d;
    border-color: #222;
    color: #666;
}
.form-select {
    background-color: #0d0d0d;
    border-color: #222;
    color: #ccc;
}
.form-select:focus {
    background-color: #111;
    border-color: rgba(229,9,20,0.5);
    box-shadow: 0 0 0 3px rgba(229,9,20,0.12);
    color: #fff;
}

/* ── Table ────────────────────────────────────────────────────────────────────── */
.table { color: var(--ym-text); }
.table > :not(caption) > * > * { background: transparent; }

/* ── Modal ────────────────────────────────────────────────────────────────────── */
.modal-content {
    background: #080808;
    border: 1px solid rgba(229,9,20,0.2);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,0.9), 0 0 40px rgba(229,9,20,0.1);
}
.modal-header { border-bottom-color: #1a1a1a; }
.modal-footer { border-top-color: #1a1a1a; }

/* ── Tooltip overrides ────────────────────────────────────────────────────────── */
.tooltip-inner { background: #1a1a1a; border: 1px solid #333; }

/* ── Card component ─────────────────────────────────────────────────────────── */
.card {
    background: var(--ym-card);
    border-color: var(--ym-border);
    border-radius: var(--radius);
}
.card-header { background: #0a0a0a; border-bottom-color: #1a1a1a; }
.card-footer { background: #0a0a0a; border-top-color: #1a1a1a; }