/* ========== Skin: portal_color / portal_compact ========== */
.vod-skin-portal_color,
.vod-skin-portal_compact {
    --vod-bg: #1a1d24;
    --vod-surface: #232830;
    --vod-border: #333945;
}

.vod-portal-navgrid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.vod-portal-navgrid-sm {
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 16px;
}

.vod-portal-navbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 6px;
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
    transition: transform .15s, filter .15s;
}

.vod-portal-navbtn:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    color: #fff;
}

.vod-portal-c1  { background: #e91e8c; }
.vod-portal-c2  { background: #8bc34a; }
.vod-portal-c3  { background: #00bcd4; }
.vod-portal-c4  { background: #ff9800; }
.vod-portal-c5  { background: #9c27b0; }
.vod-portal-c6  { background: #f44336; }
.vod-portal-c7  { background: #3f51b5; }
.vod-portal-c8  { background: #009688; }
.vod-portal-c9  { background: #795548; }
.vod-portal-c10 { background: #607d8b; }
.vod-portal-c11 { background: #cddc39; color: #222; }
.vod-portal-c12 { background: #ff5722; }

.vod-cat-tabs-mini .vod-cat-tab {
    font-size: 12px;
    padding: 5px 10px;
}

.vod-grid-portal {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.vod-today-portal .vod-today-head h2 {
    font-size: 20px;
}

.vod-today-portal .vod-today-meta strong {
    color: var(--vod-accent);
}

.vod-domain-nav-minimal {
    display: none;
}

.vod-skin-portal_color .vod-header,
.vod-skin-portal_compact .vod-header {
    border-bottom-color: #2a2f3a;
}

/* ========== Skin: portal_sidebar (light) ========== */
.vod-skin-portal_sidebar {
    --vod-bg: #f0f0f0;
    --vod-surface: #fff;
    --vod-surface-2: #fafafa;
    --vod-border: #e0e0e0;
    --vod-text: #333;
    --vod-muted: #888;
}

.vod-skin-portal_sidebar .vod-header {
    background: #fff;
    border-bottom: 2px solid #ff6600;
}

.vod-skin-portal_sidebar .vod-logo {
    -webkit-text-fill-color: #ff6600;
    background: none;
    color: #ff6600;
}

.vod-skin-portal_sidebar .vod-search input {
    background: #f5f5f5;
    color: #333;
}

.vod-skin-portal_sidebar .vod-domain-nav-minimal {
    display: flex;
}

.vod-portal-sidebar-wrap {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.vod-sidebar {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
}

.vod-sidebar-title {
    padding: 10px 14px;
    background: #ff6600;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

.vod-sidebar-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #f0f0f0;
    color: #444;
    font-size: 13px;
}

.vod-sidebar-item:hover,
.vod-sidebar-item.active {
    background: #fff8f0;
    color: #ff6600;
}

.vod-sidebar-item em {
    font-style: normal;
    background: #ff6600;
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
}

.vod-domain-head-light h1 {
    font-size: 18px;
    margin: 0 0 12px;
}

.vod-skin-portal_sidebar .vod-grid-portal {
    grid-template-columns: repeat(5, 1fr);
}

/* ========== Skin: portal_compact ========== */
.vod-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.vod-tag {
    padding: 4px 10px;
    border-radius: 4px;
    background: #2a2f3a;
    color: #ccc;
    font-size: 12px;
}

.vod-tag:hover {
    background: #3a4150;
    color: #fff;
}

.vod-domain-head-compact h1 {
    margin: 0 0 10px;
    font-size: 18px;
}

.vod-cat-tabs-inline {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .vod-portal-navgrid {
        grid-template-columns: repeat(3, 1fr);
    }
    .vod-portal-sidebar-wrap {
        grid-template-columns: 1fr;
    }
    .vod-skin-portal_sidebar .vod-grid-portal {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .vod-portal-navgrid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        margin-bottom: 10px;
    }

    .vod-portal-navbtn {
        min-height: 34px;
        padding: 6px 4px;
        font-size: 10px;
        line-height: 1.25;
        border-radius: 4px;
    }
}

/* ========== Skin: hero_dark ========== */
.vod-skin-hero_dark {
    --vod-bg: #12141a;
    --vod-surface: #1c1f28;
    --vod-border: #2e3340;
}

.vod-hero-banner {
    margin-bottom: 18px;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, #2b1055 0%, #7597de 50%, #e91e8c 100%);
}

.vod-hero-inner {
    padding: 36px 24px;
    text-align: center;
}

.vod-hero-inner h1 {
    margin: 0 0 8px;
    font-size: 28px;
    color: #fff;
}

.vod-hero-inner p {
    margin: 0;
    color: rgba(255, 255, 255, .85);
}

.vod-hero-head h1 {
    font-size: 22px;
}

/* ========== Skin: sidebar_right ========== */
.vod-sidebar-right {
    grid-template-columns: minmax(0, 1fr) 220px;
}

.vod-sidebar-right .vod-sidebar-title {
    background: #3f51b5;
}

.vod-sidebar-right .vod-sidebar-item:hover,
.vod-sidebar-right .vod-sidebar-item.active {
    background: #eef0ff;
    color: #3f51b5;
}

.vod-sidebar-right .vod-sidebar-item em {
    background: #3f51b5;
}

/* ========== Skin: masonry_dark ========== */
.vod-skin-masonry_dark {
    --vod-bg: #141820;
    --vod-surface: #1e2430;
}

.vod-masonry-wrap .vod-grid {
    display: block;
    column-count: 4;
    column-gap: 14px;
}

.vod-masonry-wrap .vod-card {
    break-inside: avoid;
    margin-bottom: 14px;
}

@media (max-width: 900px) {
    .vod-masonry-wrap .vod-grid {
        column-count: 3;
    }
}

@media (max-width: 640px) {
    .vod-masonry-wrap .vod-grid {
        column-count: 2;
    }
}

/* ========== Skin: minimal_white ========== */
.vod-skin-minimal_white {
    --vod-bg: #f7f8fa;
    --vod-surface: #fff;
    --vod-surface-2: #fafbfc;
    --vod-border: #e8eaed;
    --vod-text: #222;
    --vod-muted: #666;
}

.vod-skin-minimal_white .vod-header {
    background: #fff;
    border-bottom: 1px solid #e8eaed;
}

.vod-skin-minimal_white .vod-logo {
    -webkit-text-fill-color: #222;
    background: none;
    color: #222;
}

.vod-minimal-bar {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 2px solid #222;
}

.vod-minimal-bar h1 {
    margin: 0;
    font-size: 20px;
}

.vod-minimal-meta {
    font-size: 13px;
    color: var(--vod-muted);
}

.vod-cat-tabs-pill .vod-cat-tab {
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e0e0e0;
}

.vod-cat-tabs-pill .vod-cat-tab.active {
    background: #222;
    border-color: #222;
    color: #fff;
}

/* ========== Skin: filmstrip ========== */
.vod-skin-filmstrip {
    --vod-bg: #1a1d24;
    --vod-surface: #232830;
}

.vod-filmstrip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 10px;
    margin-bottom: 14px;
    scrollbar-width: thin;
}

.vod-filmstrip-item {
    flex: 0 0 auto;
    padding: 8px 16px;
    border-radius: 20px;
    background: #2a2f3a;
    color: #ccc;
    font-size: 13px;
    white-space: nowrap;
}

.vod-filmstrip-item:hover,
.vod-filmstrip-item.active {
    background: var(--vod-accent, #e91e8c);
    color: #fff;
}

/* ========== Skin: magazine ========== */
.vod-skin-magazine {
    --vod-bg: #f5f5f5;
    --vod-surface: #fff;
    --vod-border: #e0e0e0;
    --vod-text: #333;
}

.vod-skin-magazine .vod-header {
    background: #fff;
}

.vod-magazine-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 3px solid #ff6600;
}

.vod-magazine-title h1 {
    margin: 0;
    font-size: 22px;
    color: #222;
}

.vod-magazine-title p {
    margin: 4px 0 0;
    color: #888;
    font-size: 13px;
}

.vod-magazine-body {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.vod-magazine-feature .vod-today {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .vod-sidebar-right {
        grid-template-columns: 1fr;
    }
    .vod-magazine-body {
        grid-template-columns: 1fr;
    }
}

/* ========== Light skins: shared card/header helpers ========== */
body.vod-theme-light {
    color: #333;
}

body.vod-theme-light,
body[class*="vod-skin-light_"] {
    --vod-radius: 12px;
}

body.vod-theme-light .vod-header {
    background: #fff !important;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    backdrop-filter: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
}

body.vod-theme-light .vod-search input {
    background: #f5f5f5;
    color: #333;
    border-color: #e0e0e0;
}

body.vod-theme-light .vod-search button {
    background: linear-gradient(135deg, #ec407a, #f06292);
}

body.vod-theme-light .vod-domain-nav-item {
    border-color: #e8e8e8;
    color: #666;
    background: #fafafa;
}

body.vod-theme-light .vod-domain-nav-item.active,
body.vod-theme-light .vod-domain-nav-item:hover {
    color: #fff;
    background: linear-gradient(135deg, #ec407a, #ab47bc);
}

body.vod-theme-light .vod-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}

body.vod-theme-light .vod-card:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, .1);
    border-color: rgba(236, 64, 122, .35);
}

body.vod-theme-light .vod-card .vod-title {
    color: #2a2a2a;
    background: #fafafa;
    border-top-color: rgba(0, 0, 0, .06);
}

body.vod-theme-light .vod-today {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
}

body.vod-theme-light .vod-today-head h2 {
    color: #222;
}

body.vod-theme-light .vod-footer {
    color: #999;
    border-top-color: #eee;
    background: #fff;
}

body.vod-theme-light .vod-footer-mirror {
    background: #fff;
    border-color: #eee;
}

body.vod-theme-light .vod-footer-mirror-title {
    color: #333;
}

body.vod-theme-light .vod-footer-mirror-desc {
    color: #aaa;
}

body.vod-theme-light .vod-footer-mirror-line {
    background: #eee;
}

body.vod-theme-light .vod-footer-mirror-list a {
    color: #555;
}

body.vod-theme-light .vod-footer-mirror-list a:hover {
    color: var(--vod-accent);
}

body.vod-theme-light .vod-pagination li a,
body.vod-theme-light .vod-pagination li span {
    background: #fff;
    color: #444;
}

/* ========== Skin: light_sky ========== */
.vod-skin-light_sky {
    --vod-bg: #eef6fc;
    --vod-surface: #fff;
    --vod-surface-2: #f8fbff;
    --vod-border: #d4e8f7;
    --vod-text: #1a3a52;
    --vod-muted: #5a7a92;
    --vod-accent: #2196f3;
    --vod-accent-2: #03a9f4;
}

.vod-skin-light_sky .vod-logo {
    -webkit-text-fill-color: #1976d2;
    background: none;
    color: #1976d2;
}

.vod-light-sky-band {
    margin-bottom: 16px;
    padding: 28px 20px;
    border-radius: 14px;
    text-align: center;
    background: linear-gradient(135deg, #64b5f6, #4fc3f7 50%, #81d4fa);
    color: #fff;
}

.vod-light-sky-band h1 { margin: 0 0 6px; font-size: 26px; }
.vod-light-sky-band p { margin: 0; opacity: .9; }

.vod-light-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.vod-light-chip {
    padding: 6px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #b3e5fc;
    color: #0277bd;
    font-size: 13px;
    font-weight: 600;
}

.vod-light-chip:hover { background: #e1f5fe; }

.vod-light-page-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 14px;
}

.vod-light-page-title h1 { margin: 0; font-size: 22px; color: #1565c0; }
.vod-light-page-title span { color: #78909c; font-size: 13px; }

.vod-light-capsule-tabs .vod-cat-tab {
    border-radius: 999px;
    background: #fff;
    border: 1px solid #b3e5fc;
}

.vod-light-capsule-tabs .vod-cat-tab.active {
    background: linear-gradient(135deg, #42a5f5, #29b6f6);
    border-color: transparent;
    color: #fff;
}

.vod-light-panel {
    background: #fff;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 4px 20px rgba(33, 150, 243, .08);
}

/* ========== Skin: light_mint ========== */
.vod-skin-light_mint {
    --vod-bg: #edf7f2;
    --vod-surface: #fff;
    --vod-border: #c8e6d4;
    --vod-text: #1b4332;
    --vod-muted: #52796f;
    --vod-accent: #26a69a;
    --vod-accent-2: #4db6ac;
}

.vod-skin-light_mint .vod-logo {
    -webkit-text-fill-color: #00897b;
    background: none;
    color: #00897b;
}

.vod-light-mint-head {
    display: flex;
    gap: 14px;
    margin-bottom: 16px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(38, 166, 154, .1);
}

.vod-light-mint-accent {
    width: 6px;
    background: linear-gradient(180deg, #26a69a, #80cbc4);
    flex-shrink: 0;
}

.vod-light-mint-body { padding: 16px 18px; }
.vod-light-mint-body h1 { margin: 0 0 4px; font-size: 20px; color: #00695c; }
.vod-light-mint-body p { margin: 0; color: #78909c; font-size: 13px; }

.vod-light-mint-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.vod-light-mint-nav a {
    padding: 8px 14px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #b2dfdb;
    color: #00796b;
    font-size: 13px;
}

.vod-light-mint-nav a:hover { background: #e0f2f1; }

.vod-light-mint-tabs .vod-cat-tab.active {
    background: #26a69a;
    border-color: #26a69a;
    color: #fff;
}

.vod-light-mint-section {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    border-left: 4px solid #26a69a;
}

/* ========== Skin: light_coral ========== */
.vod-skin-light_coral {
    --vod-bg: #fff8f5;
    --vod-surface: #fff;
    --vod-border: #ffd4c4;
    --vod-text: #4a2c2a;
    --vod-muted: #8d6e63;
    --vod-accent: #ff7043;
    --vod-accent-2: #ff8a65;
}

.vod-skin-light_coral .vod-logo {
    -webkit-text-fill-color: #e64a19;
    background: none;
    color: #e64a19;
}

.vod-light-coral-top {
    margin-bottom: 14px;
    padding: 20px;
    border-radius: 16px;
    background: linear-gradient(120deg, #ffab91, #ffccbc);
    color: #4e342e;
}

.vod-light-coral-top h1 { margin: 0; font-size: 22px; }

.vod-light-coral-modules {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.vod-light-coral-modules a {
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    font-size: 12px;
    color: #bf360c;
}

.vod-light-coral-lines {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

.vod-light-coral-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #ffccbc;
    color: #5d4037;
    font-weight: 600;
}

.vod-light-coral-line i { color: #ff7043; font-style: normal; }

.vod-light-coral-tabs .vod-cat-tab.active {
    background: #ff7043;
    border-color: #ff7043;
    color: #fff;
}

/* ========== Skin: light_lavender ========== */
.vod-skin-light_lavender {
    --vod-bg: #f3f0ff;
    --vod-surface: #fff;
    --vod-border: #ddd6fe;
    --vod-text: #4c1d95;
    --vod-muted: #7c6a9a;
    --vod-accent: #7c4dff;
    --vod-accent-2: #b388ff;
}

.vod-skin-light_lavender .vod-logo {
    -webkit-text-fill-color: #651fff;
    background: none;
    color: #651fff;
}

.vod-light-lavender-head {
    text-align: center;
    margin-bottom: 16px;
    padding: 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, #ede7f6, #e1bee7);
}

.vod-light-lavender-head h1 { margin: 0 0 4px; font-size: 22px; color: #4a148c; }
.vod-light-lavender-head p { margin: 0; color: #7b1fa2; font-size: 13px; }

.vod-light-lavender-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.vod-light-lavender-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    padding: 10px;
    border-radius: 12px;
    background: #fff;
    border: 2px solid #e1bee7;
    text-align: center;
    color: #6a1b9a;
    font-size: 12px;
}

.vod-light-lavender-cell em {
    font-style: normal;
    margin-top: 4px;
    font-size: 11px;
    color: #9c27b0;
}

.vod-light-lavender-cell.active,
.vod-light-lavender-cell:hover {
    border-color: #9c27b0;
    background: #f3e5f5;
}

.vod-light-lavender-domains {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.vod-light-lavender-domains a {
    padding: 6px 12px;
    border-radius: 8px;
    background: #fff;
    color: #7b1fa2;
    font-size: 12px;
    border: 1px dashed #ce93d8;
}

/* ========== Skin: light_paper ========== */
.vod-skin-light_paper {
    --vod-bg: #faf6ef;
    --vod-surface: #fffef9;
    --vod-border: #d4c4a8;
    --vod-text: #3e2723;
    --vod-muted: #795548;
    --vod-accent: #8d6e63;
    --vod-accent-2: #a1887f;
}

.vod-skin-light_paper .vod-header {
    background: #fffef9;
    border-bottom: 2px solid #3e2723;
}

.vod-skin-light_paper .vod-logo {
    font-family: Georgia, "Times New Roman", serif;
    -webkit-text-fill-color: #3e2723;
    background: none;
    color: #3e2723;
}

.vod-light-paper-mast {
    text-align: center;
    margin-bottom: 20px;
}

.vod-light-paper-rule {
    height: 2px;
    background: #3e2723;
    margin: 10px 0;
}

.vod-light-paper-mast h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    color: #3e2723;
    letter-spacing: .05em;
}

.vod-light-paper-sub {
    margin: 0;
    font-size: 13px;
    color: #795548;
    font-style: italic;
}

.vod-light-paper-columns {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 20px;
    border: 1px solid #d7ccc8;
    background: #fffef9;
    padding: 16px;
}

.vod-light-paper-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-right: 1px double #bcaaa4;
    padding-right: 16px;
}

.vod-light-paper-nav strong {
    margin: 10px 0 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #8d6e63;
}

.vod-light-paper-nav strong:first-child { margin-top: 0; }

.vod-light-paper-nav a {
    padding: 4px 0;
    color: #5d4037;
    font-size: 13px;
    border-bottom: 1px dotted #d7ccc8;
}

.vod-light-paper-nav a.active { font-weight: 700; color: #3e2723; }

/* ========== Skin: light_ocean ========== */
.vod-skin-light_ocean {
    --vod-bg: #f0f8ff;
    --vod-surface: #fff;
    --vod-border: #b3d9ff;
    --vod-text: #0d47a1;
    --vod-muted: #546e7a;
    --vod-accent: #0288d1;
    --vod-accent-2: #039be5;
}

.vod-skin-light_ocean .vod-header {
    background: #01579b;
    border-bottom: none;
}

.vod-skin-light_ocean .vod-logo,
.vod-skin-light_ocean .vod-domain-nav-item,
.vod-skin-light_ocean .vod-search input {
    color: #fff;
}

.vod-skin-light_ocean .vod-logo {
    -webkit-text-fill-color: #fff;
    background: none;
}

.vod-skin-light_ocean .vod-search input {
    background: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .3);
}

.vod-light-ocean-bar {
    margin: -24px -16px 20px;
    padding: 0;
    background: linear-gradient(180deg, #0277bd, #0288d1);
    color: #fff;
}

.vod-light-ocean-bar-inner {
    padding: 24px 16px 16px;
}

.vod-light-ocean-bar-inner h1 { margin: 0 0 10px; font-size: 24px; }

.vod-light-ocean-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vod-light-ocean-links a {
    padding: 5px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    font-size: 12px;
}

.vod-light-ocean-wave {
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q300 40 600 20 T1200 20 V40 H0 Z' fill='%23f0f8ff'/%3E%3C/svg%3E") bottom center / 100% 100% no-repeat;
}

.vod-light-ocean-content {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 16px rgba(2, 136, 209, .1);
}

.vod-light-ocean-tabs .vod-cat-tab.active {
    background: #0288d1;
    border-color: #0288d1;
    color: #fff;
}

/* ========== Skin: light_sunny ========== */
.vod-skin-light_sunny {
    --vod-bg: #fffde7;
    --vod-surface: #fff;
    --vod-border: #fff176;
    --vod-text: #f57f17;
    --vod-muted: #f9a825;
    --vod-accent: #ffb300;
    --vod-accent-2: #ffa000;
}

.vod-skin-light_sunny .vod-header {
    background: #ffecb3;
    border-bottom: 3px solid #ffb300;
}

.vod-skin-light_sunny .vod-logo {
    -webkit-text-fill-color: #e65100;
    background: none;
    color: #e65100;
}

.vod-light-sunny-hero {
    text-align: center;
    padding: 24px;
    margin-bottom: 16px;
    border-radius: 20px;
    background: linear-gradient(135deg, #ffeb3b, #ffc107);
    color: #5d4037;
}

.vod-light-sunny-hero h1 { margin: 0 0 6px; font-size: 26px; }
.vod-light-sunny-hero p { margin: 0; font-weight: 600; }

.vod-light-sunny-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.vod-light-sunny-block {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 12px;
    border-radius: 16px;
    background: #fff;
    border: 2px solid #ffca28;
    color: #e65100;
    font-weight: 700;
    text-align: center;
    font-size: 13px;
    box-shadow: 0 4px 0 #ffb300;
}

.vod-light-sunny-block:hover { transform: translateY(-2px); }

.vod-light-sunny-block-mod {
    border-color: #ff9800;
    box-shadow: 0 4px 0 #f57c00;
}

.vod-light-sunny-title h1 {
    margin: 0 0 14px;
    font-size: 22px;
    color: #e65100;
}

.vod-light-sunny-tabs .vod-cat-tab {
    border-radius: 12px;
    font-weight: 600;
}

.vod-light-sunny-tabs .vod-cat-tab.active {
    background: #ffb300;
    border-color: #ffb300;
    color: #5d4037;
}

@media (max-width: 640px) {
    .vod-skin-light_sunny .vod-header {
        border-bottom-width: 2px;
    }

    .vod-skin-light_sunny .vod-logo {
        font-size: 15px;
    }

    .vod-light-sunny-hero {
        padding: 10px 12px;
        margin-bottom: 8px;
        border-radius: 12px;
    }

    .vod-light-sunny-hero h1 {
        font-size: 17px;
        margin: 0 0 2px;
    }

    .vod-light-sunny-hero p {
        font-size: 11px;
        font-weight: 500;
        opacity: 0.9;
    }

    .vod-light-sunny-blocks {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        margin-bottom: 10px;
    }

    .vod-light-sunny-block {
        min-height: 0;
        padding: 7px 4px;
        border-radius: 10px;
        font-size: 10px;
        line-height: 1.25;
        border-width: 1px;
        box-shadow: 0 2px 0 #ffb300;
    }

    .vod-light-sunny-title h1 {
        font-size: 17px;
        margin-bottom: 10px;
    }

    .vod-light-sunny-tabs {
        margin-bottom: 10px;
    }

    .vod-light-sunny-tabs .vod-cat-tab {
        padding: 4px 8px;
        font-size: 11px;
    }
}

/* ========== Skin: light_rose（玫瑰粉韵 · 高对比亮色） ========== */
body.vod-skin-light_rose {
    background: linear-gradient(165deg, #ffe4ec 0%, #fff0f5 35%, #fce4ec 70%, #f8bbd0 100%) !important;
    color: #5c1348 !important;
    --vod-bg: #fff0f5;
    --vod-surface: #fff;
    --vod-surface-2: #fff5f8;
    --vod-border: #f8bbd0;
    --vod-text: #5c1348;
    --vod-muted: #ad1457;
    --vod-accent: #e91e63;
    --vod-accent-2: #f06292;
}

body.vod-skin-light_rose .vod-logo {
    -webkit-text-fill-color: #c2185b;
    background: none;
    color: #c2185b !important;
    font-weight: 800;
}

body.vod-skin-light_rose .vod-header {
    background: rgba(255, 255, 255, .92) !important;
    border-bottom: 3px solid #f48fb1 !important;
}

body.vod-skin-light_rose .vod-main {
    padding-top: 8px;
}

.vod-light-rose-page {
    padding-bottom: 8px;
}

.vod-light-rose-hero {
    margin-bottom: 20px;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(233, 30, 99, .18);
}

.vod-light-rose-hero-inner {
    padding: 32px 24px 28px;
    text-align: center;
    background: linear-gradient(135deg, #ff80ab 0%, #f48fb1 40%, #f8bbd0 100%);
    color: #fff;
}

.vod-light-rose-badge {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .25);
    font-size: 12px;
    letter-spacing: .08em;
}

.vod-light-rose-hero-inner h1 {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 800;
    text-shadow: 0 2px 8px rgba(136, 14, 79, .15);
}

.vod-light-rose-hero-inner p {
    margin: 0;
    font-size: 14px;
    opacity: .95;
}

.vod-light-rose-block {
    margin-bottom: 20px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .88);
    border: 1px solid #fce4ec;
    box-shadow: 0 6px 24px rgba(233, 30, 99, .08);
}

.vod-light-rose-block-title {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: #ad1457;
}

.vod-light-rose-block-title i {
    font-style: normal;
    margin-right: 6px;
    color: #e91e63;
}

.vod-light-rose-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.vod-light-rose-tile-grid-mod {
    margin-top: 12px;
}

.vod-light-rose-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 88px;
    padding: 14px 10px;
    border-radius: 16px;
    text-align: center;
    text-decoration: none;
    background: linear-gradient(145deg, #ec407a, #e91e63);
    transition: transform .18s, box-shadow .18s;
    box-shadow: 0 6px 0 rgba(0, 0, 0, .08);
}

.vod-light-rose-tile-name,
.vod-light-rose-tile-hint {
    display: block;
    color: #fff;
    -webkit-text-fill-color: #fff;
}

.vod-light-rose-tile-name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 4px;
    word-break: break-word;
}

.vod-light-rose-tile-hint {
    font-size: 11px;
    opacity: .92;
    font-weight: 400;
}

.vod-light-rose-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(233, 30, 99, .25);
}

.vod-light-rose-tile:hover .vod-light-rose-tile-name,
.vod-light-rose-tile:hover .vod-light-rose-tile-hint {
    color: #fff;
}

.vod-light-rose-tile-grid-lines > .vod-light-rose-tile:nth-child(6n+1) { background: linear-gradient(145deg, #ec407a, #e91e63); }
.vod-light-rose-tile-grid-lines > .vod-light-rose-tile:nth-child(6n+2) { background: linear-gradient(145deg, #f06292, #ec407a); }
.vod-light-rose-tile-grid-lines > .vod-light-rose-tile:nth-child(6n+3) { background: linear-gradient(145deg, #ab47bc, #8e24aa); }
.vod-light-rose-tile-grid-lines > .vod-light-rose-tile:nth-child(6n+4) { background: linear-gradient(145deg, #ff6090, #f50057); }
.vod-light-rose-tile-grid-lines > .vod-light-rose-tile:nth-child(6n+5) { background: linear-gradient(145deg, #ff8a80, #ff5252); }
.vod-light-rose-tile-grid-lines > .vod-light-rose-tile:nth-child(6n+6) { background: linear-gradient(145deg, #ce93d8, #ba68c8); }

.vod-light-rose-tile-mod {
    background: linear-gradient(145deg, #880e4f, #ad1457);
}

.vod-light-rose-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
}

.vod-light-rose-cat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 78px;
    padding: 10px 8px;
    border-radius: 14px;
    background: #fff;
    border: 2px solid #fce4ec;
    text-align: center;
    transition: all .15s;
}

.vod-light-rose-cat-name {
    font-size: 12px;
    color: #880e4f;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vod-light-rose-cat-box em {
    font-style: normal;
    margin-top: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #fce4ec;
    color: #c2185b;
    font-size: 11px;
    font-weight: 700;
}

.vod-light-rose-cat-box:hover,
.vod-light-rose-cat-box.active {
    border-color: #ec407a;
    background: linear-gradient(180deg, #fff, #fce4ec);
    box-shadow: 0 6px 16px rgba(236, 64, 122, .15);
}

.vod-light-rose-cat-box.active em {
    background: #ec407a;
    color: #fff;
}

.vod-light-rose-list-shell {
    padding: 18px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #f8bbd0;
    box-shadow: 0 8px 32px rgba(233, 30, 99, .1);
}

body.vod-skin-light_rose .vod-today {
    margin-bottom: 20px;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

body.vod-skin-light_rose .vod-today-head {
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: linear-gradient(90deg, #fce4ec, #f8bbd0);
}

body.vod-skin-light_rose .vod-today-head h2 {
    color: #880e4f;
    font-size: 17px;
}

body.vod-skin-light_rose .vod-today-meta {
    color: #ad1457;
}

body.vod-skin-light_rose .vod-card-today {
    border: 2px solid #f8bbd0;
    border-radius: 14px;
    overflow: hidden;
}

body.vod-skin-light_rose .vod-card-today:hover {
    border-color: #ec407a;
}

body.vod-skin-light_rose .vod-card .vod-title {
    color: #4a1942;
    background: #fffafc;
    border-top-color: #fce4ec;
}

body.vod-skin-light_rose .vod-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
}

@media (max-width: 640px) {
    .vod-light-rose-hero-inner h1 { font-size: 22px; }
    .vod-light-rose-tile-grid { grid-template-columns: repeat(2, 1fr); }
    .vod-light-rose-cat-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ========== Skin: light_bento ========== */
.vod-skin-light_bento {
    --vod-bg: #f5f5f5;
    --vod-surface: #fff;
    --vod-border: #e0e0e0;
    --vod-text: #212121;
    --vod-muted: #757575;
    --vod-accent: #6200ea;
    --vod-accent-2: #7c4dff;
}

.vod-skin-light_bento .vod-logo {
    -webkit-text-fill-color: #6200ea;
    background: none;
    color: #6200ea;
}

.vod-light-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 80px;
    gap: 10px;
    margin-bottom: 18px;
}

.vod-light-bento-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 14px;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    transition: transform .15s;
}

.vod-light-bento-item:hover { transform: scale(1.03); color: #fff; }

.vod-light-bento-wide { grid-column: span 2; }

.vod-light-bento-c1 { background: #ef5350; }
.vod-light-bento-c2 { background: #ab47bc; }
.vod-light-bento-c3 { background: #5c6bc0; }
.vod-light-bento-c4 { background: #29b6f6; }
.vod-light-bento-c5 { background: #66bb6a; }
.vod-light-bento-c6 { background: #ffa726; }
.vod-light-bento-c7 { background: #8d6e63; }
.vod-light-bento-c8 { background: #78909c; }

.vod-light-bento-head h1 { margin: 0 0 14px; font-size: 22px; }

.vod-light-bento-tabs .vod-cat-tab.active {
    background: #6200ea;
    border-color: #6200ea;
    color: #fff;
}

.vod-light-bento-list {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
}

/* ========== Skin: light_stripe ========== */
.vod-skin-light_stripe {
    --vod-bg: #fff;
    --vod-surface: #fff;
    --vod-border: #eee;
    --vod-text: #212121;
    --vod-muted: #757575;
    --vod-accent: #e91e63;
    --vod-accent-2: #9c27b0;
}

.vod-skin-light_stripe .vod-header {
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

.vod-skin-light_stripe .vod-logo {
    -webkit-text-fill-color: #212121;
    background: none;
    color: #212121;
}

.vod-light-stripe-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.vod-light-stripe-head h1 { margin: 0; font-size: 22px; }
.vod-light-stripe-head span { color: #999; font-size: 13px; }

.vod-light-stripe-bar {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 16px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.vod-light-stripe-item {
    flex: 1 1 auto;
    min-width: 70px;
    padding: 10px 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    opacity: .75;
    transition: opacity .15s;
}

.vod-light-stripe-item:hover,
.vod-light-stripe-item.active { opacity: 1; }

.vod-light-stripe-all { background: #424242; }
.vod-light-stripe-c1 { background: #e53935; }
.vod-light-stripe-c2 { background: #fb8c00; }
.vod-light-stripe-c3 { background: #fdd835; color: #333; }
.vod-light-stripe-c4 { background: #43a047; }
.vod-light-stripe-c5 { background: #1e88e5; }
.vod-light-stripe-c6 { background: #8e24aa; }
.vod-light-stripe-c7 { background: #d81b60; }

.vod-light-stripe-domains {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.vod-light-stripe-domains a {
    padding: 5px 12px;
    border-radius: 6px;
    background: #f5f5f5;
    color: #616161;
    font-size: 12px;
}

@media (max-width: 900px) {
    .vod-light-paper-columns {
        grid-template-columns: 1fr;
    }
    .vod-light-paper-nav {
        border-right: none;
        border-bottom: 1px double #bcaaa4;
        padding-right: 0;
        padding-bottom: 12px;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }
    .vod-light-paper-nav strong { width: 100%; }
    .vod-light-bento {
        grid-template-columns: repeat(2, 1fr);
    }
    .vod-light-bento-wide { grid-column: span 2; }
    .vod-light-ocean-bar {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 640px) {
    .vod-light-bento {
        grid-template-columns: 1fr 1fr;
    }
    .vod-light-stripe-item {
        min-width: 50%;
    }
}