/* CartoonNest — dark, cinema-ish look */

:root {
    --cn-accent: #7c5cff;
    --cn-accent-2: #22d3ee;
    --cn-surface: #1a1d25;
    --cn-surface-2: #22262f;
    --cn-border: rgba(255, 255, 255, .08);
    --cn-muted: #9aa3b2;
}

body {
    background: radial-gradient(1200px 600px at 50% -150px, #1c2233 0%, #0e1014 60%) fixed, #0e1014;
    min-height: 100vh;
    color: #e8eaed;
}

/* Top bar */
.cn-nav {
    background: rgba(14, 16, 20, .82);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--cn-border);
}
.cn-nav .navbar-brand { color: #fff; font-size: 1.35rem; font-weight: 700; }
.cn-nav .navbar-brand:hover { color: var(--cn-accent-2); }

.cn-main { max-width: 1200px; }

/* Section headings */
.cn-h { font-weight: 700; letter-spacing: .2px; }

/* Grid + tiles */
.cn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }

.cn-tile {
    display: block; text-decoration: none; color: inherit;
    border-radius: 14px; overflow: hidden;
    background: var(--cn-surface); border: 1px solid var(--cn-border);
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.cn-tile:hover, .cn-tile:focus {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .55);
    border-color: var(--cn-accent);
}
.cn-tile-poster { position: relative; aspect-ratio: 2 / 3; background: linear-gradient(135deg, #2b2b3a, #3a3f4b); }
.cn-tile-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cn-tile-folder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #7c5cff, #22d3ee); }
.cn-folder-ico { font-size: 3.4rem; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45)); }
.cn-noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 3rem; opacity: .45; }
.cn-tile-badge { position: absolute; left: 8px; bottom: 8px; background: rgba(0, 0, 0, .78); color: #fff; padding: 2px 9px; border-radius: 20px; font-size: .72rem; }
.cn-rating {
    position: absolute; top: 8px; right: 8px;
    background: rgba(0, 0, 0, .8); color: #ffd35a;
    padding: 2px 8px; border-radius: 20px; font-size: .78rem; font-weight: 700;
}
.cn-lang {
    position: absolute; top: 8px; left: 8px;
    background: rgba(0, 0, 0, .8); color: #8fd3ff;
    padding: 2px 8px; border-radius: 20px; font-size: .72rem; font-weight: 700;
}
.cn-langsel { width: auto; min-width: 82px; display: inline-block; }
.cn-tile-body { padding: .6rem .7rem; }
.cn-tile-body .fw-semibold { font-size: .95rem; }

/* Show header */
.cn-showhead {
    display: flex; gap: 1.25rem; align-items: flex-start;
    padding: 1.1rem; margin-bottom: 1.5rem;
    background: var(--cn-surface); border: 1px solid var(--cn-border); border-radius: 16px;
}
.cn-showhead-poster { width: 130px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 12px; flex: 0 0 auto; box-shadow: 0 8px 20px rgba(0, 0, 0, .5); }
.cn-showhead-info { min-width: 0; }

/* Episode list */
.cn-eplist { display: flex; flex-direction: column; gap: .5rem; }
.cn-ep {
    display: flex; align-items: center; gap: .8rem;
    padding: .5rem .65rem; border-radius: 12px;
    background: var(--cn-surface); border: 1px solid var(--cn-border);
    transition: border-color .12s ease, background .12s ease;
}
.cn-ep:hover { border-color: var(--cn-accent); background: var(--cn-surface-2); }
.cn-ep-thumb { width: 86px; height: 52px; object-fit: cover; border-radius: 8px; background: #222; flex: 0 0 auto; }
.cn-ep-main { min-width: 0; flex: 1 1 auto; }
.cn-ep-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-ep-sub { font-size: .8rem; color: var(--cn-muted); }
.cn-ep-actions { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }

/* Breadcrumb */
.cn-crumbs { font-size: .9rem; color: var(--cn-muted); margin-bottom: 1rem; }
.cn-crumbs a { color: #b9c0cd; text-decoration: none; }
.cn-crumbs a:hover { color: var(--cn-accent-2); }
.cn-crumbs .sep { opacity: .5; margin: 0 .35rem; }

/* Player + up-next */
.cn-player { border-radius: 14px; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, .6); }
.cn-upnext {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(8, 10, 14, .85); color: #fff; text-align: center; padding: 1rem;
}
.cn-upnext-box { font-size: 1.2rem; line-height: 1.6; }

/* Search + tabs */
.cn-controls { display: flex; gap: .75rem; align-items: center; margin: .5rem 0 1.5rem; flex-wrap: wrap; }
.cn-controls .cn-search { max-width: 460px; }
.cn-tabs .cn-tab.active { background: var(--cn-accent); border-color: var(--cn-accent); color: #fff; }

/* Accent button */
.btn-cn { background: var(--cn-accent); border-color: var(--cn-accent); color: #fff; }
.btn-cn:hover, .btn-cn:focus { background: #6a49f2; border-color: #6a49f2; color: #fff; }