/*
 * Color-only UI skin.
 * Do not add sizing, spacing, positioning, typography, radius, grid, or
 * responsive layout rules here. The existing theme owns all geometry.
 */
:root {
    --wb-ref-accent: #ec3f78;
    --wb-ref-accent-strong: #ff6b9b;
    --wb-ref-accent-soft: rgba(236, 63, 120, .14);
    --wb-accent: #ec3f78;
    --wb-accent-soft: rgba(236, 63, 120, .14);
    --wb-green: #ec3f78;
}

html.theme-dark {
    --wb-ref-page: #090a0f;
    --wb-ref-surface: #11131a;
    --wb-ref-surface-soft: #181a23;
    --wb-ref-text: #f5f6f8;
    --wb-ref-muted: #969ba9;
    --wb-ref-line: rgba(255, 255, 255, .10);
    --wb-ref-shadow: rgba(0, 0, 0, .28);
    --wb-app-page-bg: #090a0f;
    --wb-app-card: #11131a;
    --wb-app-card-soft: #181a23;
    --wb-topbar-bg: #0d0f15;
}

html.theme-light {
    --wb-ref-page: #f6f7fa;
    --wb-ref-surface: #ffffff;
    --wb-ref-surface-soft: #f0f1f5;
    --wb-ref-text: #191b24;
    --wb-ref-muted: #6e7381;
    --wb-ref-line: rgba(17, 19, 27, .10);
    --wb-ref-shadow: rgba(22, 24, 33, .10);
    --wb-app-page-bg: #f6f7fa;
    --wb-app-card: #ffffff;
    --wb-app-card-soft: #f0f1f5;
    --wb-topbar-bg: #ffffff;
}

html,
body {
    background-color: var(--wb-ref-page) !important;
    color: var(--wb-ref-text);
}

/* Header and channel navigation: existing geometry is untouched. */
#header-top.wb-header-tv,
html.theme-dark #header-top.wb-header-tv,
html.theme-light #header-top.wb-header-tv,
.wb-native-topbar,
.wb-statusbar {
    background-color: var(--wb-ref-surface) !important;
    border-color: var(--wb-ref-line) !important;
    box-shadow: 0 8px 24px var(--wb-ref-shadow);
}

#header-top.wb-header-tv .wb-header-tv__search,
.wb-search-app__input,
.myui-header__search .form-control {
    background-color: var(--wb-ref-surface-soft) !important;
    border-color: var(--wb-ref-line) !important;
    color: var(--wb-ref-text) !important;
}

#header-top.wb-header-tv .wb-header-tv__search-text,
#header-top.wb-header-tv .wb-header-tv__search-icon,
#header-top.wb-header-tv .wb-header-tv__action,
#header-top.wb-header-tv .wb-header-tv__app,
#header-top.wb-header-tv .wb-header-tv__theme,
#header-top.wb-header-tv .wb-header-tv__menu,
#header-top.wb-header-tv .wb-header-tv__nav-item,
.wb-co-channel-nav .wb-header-tv__nav-item {
    color: var(--wb-ref-muted) !important;
}

#header-top.wb-header-tv .wb-header-tv__nav-item.is-active,
.wb-co-channel-nav .wb-header-tv__nav-item.is-active,
#header-top.wb-header-tv .wb-header-tv__action:hover,
#header-top.wb-header-tv .wb-header-tv__menu:hover {
    color: var(--wb-ref-accent-strong) !important;
}

#header-top.wb-header-tv .wb-header-tv__nav-item.is-active::after,
.wb-co-channel-nav .wb-header-tv__nav-item.is-active::after {
    background-color: var(--wb-ref-accent) !important;
}

/* Existing panels and cards retain their original dimensions and shape. */
.myui-panel,
.myui-panel-bg,
.myui-panel-bg2,
.myui-vodlist__box,
.wb-vod-card.myui-vodlist__box,
.wb-home-channel-wrap,
.wb-co-feed-card,
.uc-card,
.category-modal-content,
.layui-layer,
.myui-notice-pop,
.myui-sysmsg-pop {
    background-color: var(--wb-ref-surface) !important;
    border-color: var(--wb-ref-line) !important;
    box-shadow: 0 8px 24px var(--wb-ref-shadow) !important;
}

.myui-panel__head,
.wb-home-section-head,
.wb-home-channel-head,
.wb-co-page-top {
    border-color: var(--wb-ref-line) !important;
}

.myui-panel__head .title,
.myui-panel__head .title a,
.wb-home-channel-head__title,
.wb-vod-card__title,
.wb-vod-card__title a,
.myui-vodlist__detail .title,
.myui-vodlist__detail .title a {
    color: var(--wb-ref-text) !important;
}

.myui-panel__head .title::before,
.wb-home-section-head .title::before,
.wb-home-channel-head__title::before {
    background-color: var(--wb-ref-accent) !important;
}

.myui-panel__head .more,
.wb-vod-card__meta,
.wb-vod-card .text,
.myui-vodlist__detail .text,
.text-muted {
    color: var(--wb-ref-muted) !important;
}

.myui-vodlist__thumb,
.wb-vod-card__thumb,
.lazyload,
.lazyloading {
    background-color: var(--wb-ref-surface-soft) !important;
}

.wb-vod-card.myui-vodlist__box:hover,
.myui-vodlist__box:hover {
    border-color: rgba(236, 63, 120, .55) !important;
    box-shadow: 0 12px 28px var(--wb-ref-shadow) !important;
}

.pic-badge-duration,
.wb-vod-card .pic-text,
.myui-vodlist__thumb .pic-text {
    background-color: rgba(4, 5, 9, .72) !important;
    color: #ffffff !important;
}

/* Filters and buttons only receive color treatment. */
.wb-home-subcategories__item,
.wb-home-section-subtypes__chip,
.wb-vod-filter__sort-item,
.myui-screen__list li a {
    border-color: var(--wb-ref-line) !important;
    background-color: var(--wb-ref-surface-soft) !important;
    color: var(--wb-ref-muted) !important;
}

.wb-home-subcategories__item.is-active,
.wb-home-section-subtypes__chip.is-active,
.wb-vod-filter__sort-item.active,
.myui-screen__list li.active a {
    border-color: var(--wb-ref-accent) !important;
    background-color: var(--wb-ref-accent-soft) !important;
    color: var(--wb-ref-accent-strong) !important;
}

.btn.btn-primary,
.btn.btn-info,
.btn.btn-warm,
body.wb-uc button[type="submit"] {
    background: var(--wb-ref-accent) !important;
    border-color: var(--wb-ref-accent) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(236, 63, 120, .22) !important;
}

a:hover,
.text-link,
.wb-co-link,
.wb-chat-send,
.wb-chat-tool {
    color: var(--wb-ref-accent-strong) !important;
}

/* Bottom navigation keeps its original position, height, spacing, and FAB. */
.myui-nav__tabbar.wb-bottom-tabbar {
    background-color: var(--wb-ref-surface) !important;
    border-color: var(--wb-ref-line) !important;
    box-shadow: 0 -8px 24px var(--wb-ref-shadow) !important;
}

.myui-nav__tabbar.wb-bottom-tabbar > .item,
.myui-nav__tabbar.wb-bottom-tabbar > .item .icon i,
.myui-nav__tabbar.wb-bottom-tabbar > .item .title {
    color: var(--wb-ref-muted) !important;
}

.myui-nav__tabbar.wb-bottom-tabbar > .item.active,
.myui-nav__tabbar.wb-bottom-tabbar > .item[aria-current="page"],
.myui-nav__tabbar.wb-bottom-tabbar > .item.active .icon i,
.myui-nav__tabbar.wb-bottom-tabbar > .item[aria-current="page"] .icon i,
.myui-nav__tabbar.wb-bottom-tabbar > .item.active .title,
.myui-nav__tabbar.wb-bottom-tabbar > .item[aria-current="page"] .title {
    color: var(--wb-ref-accent-strong) !important;
}

.myui-nav__tabbar.wb-bottom-tabbar > .item.wb-tab-fab .wb-tab-fab-btn {
    background: var(--wb-ref-accent) !important;
    border-color: var(--wb-ref-surface) !important;
    box-shadow: 0 8px 20px rgba(236, 63, 120, .28) !important;
}

/* User center and chat retain their existing app layout. */
body.wb-uc,
body.wb-uc .uc-container,
body.wb-uc-chat-page,
body.wb-uc-chat-page .wb-chat-app,
body.wb-uc-chat-page .wb-chat-list-app {
    background-color: var(--wb-ref-page) !important;
    color: var(--wb-ref-text) !important;
}

body.wb-uc input,
body.wb-uc textarea,
body.wb-uc select,
body.wb-co-community-page input,
body.wb-co-community-page textarea,
body.wb-uc-chat-page .wb-chat-search input,
body.wb-uc-chat-page .wb-chat-composer-pill {
    background-color: var(--wb-ref-surface-soft) !important;
    border-color: var(--wb-ref-line) !important;
    color: var(--wb-ref-text) !important;
}

body.wb-uc-chat-page .wb-chat-list,
body.wb-uc-chat-page .wb-chat-item,
body.wb-uc-chat-page .wb-chat-menu-row,
body.wb-uc-chat-page .wb-chat-composer,
body.wb-uc-chat-page .wb-chat-row.is-them .wb-chat-bubble {
    background-color: var(--wb-ref-surface) !important;
    border-color: var(--wb-ref-line) !important;
}

body.wb-uc-chat-page .wb-chat-row.is-me .wb-chat-bubble {
    background-color: var(--wb-ref-accent) !important;
    color: #ffffff !important;
}

body.wb-uc-chat-page .wb-chat-item__name,
body.wb-uc-chat-page .wb-chat-section-title,
body.wb-uc-chat-page .wb-chat-composer-pill textarea {
    color: var(--wb-ref-text) !important;
}