/* Karenma Live Tv — rose-violet interface refresh.
   Loaded after app.css so this small theme layer stays authoritative. */

:root {
    --kk-pink: #D9468D;
    --kk-pink-bright: #F064A7;
    --kk-pink-soft: #FCECF4;
    --kk-pink-soft-strong: #F7D8E8;
    --kk-pink-deep: #9D285E;
    --kk-pink-ink: #4B2338;
    --kk-violet: #7657D8;
    --kk-violet-soft: #EEE9FB;
    --blue: var(--kk-pink);
    --blue-dark: var(--kk-pink-deep);
    --blue-soft: var(--kk-pink-soft);
    --gold: var(--kk-violet);
    --gold-bright: #9C82EA;
    --gold-dark: #513B9E;
    --yellow: #9C82EA;
    --black: #211827;
    --text: #271E2E;
    --muted: #766A7D;
    --line: rgba(78, 59, 96, 0.14);
    --soft: #F4F1F8;
    --surface: #FFFFFF;
    --surface-raised: #FFFFFF;
    --surface-glass: rgba(255, 255, 255, 0.88);
    --surface-glass-strong: rgba(255, 255, 255, 0.96);
    --shadow: 0 14px 36px rgba(53, 38, 68, 0.09);
}

html[data-theme="light"] {
    --kk-ui-bg: #F7F5FA;
    --kk-ui-surface: #F0ECF5;
    --kk-ui-card: rgba(255, 255, 255, 0.94);
    --kk-ui-card-strong: #F3EFF8;
    --kk-ui-text: #271E2E;
    --kk-ui-heading: #1D1623;
    --kk-ui-muted: #766A7D;
    --kk-ui-line: rgba(78, 59, 96, 0.14);
    --kk-ui-shadow: 0 12px 32px rgba(53, 38, 68, 0.08);
    --kk-ui-pink: #D9468D;
    --kk-ui-violet: #7657D8;
    color-scheme: light;
}

html[data-theme="dark"] {
    --kk-ui-bg: #100D14;
    --kk-ui-surface: #18131E;
    --kk-ui-card: rgba(31, 24, 38, 0.96);
    --kk-ui-card-strong: #292032;
    --kk-ui-text: #F7F2FA;
    --kk-ui-heading: #FFFFFF;
    --kk-ui-muted: #B8AABD;
    --kk-ui-line: rgba(211, 190, 226, 0.15);
    --kk-ui-shadow: 0 16px 38px rgba(0, 0, 0, 0.3);
    --kk-ui-pink: #F064A7;
    --kk-ui-violet: #A68AF1;
    --text: #F7F2FA;
    --muted: #B8AABD;
    --line: rgba(211, 190, 226, 0.15);
    --soft: #18131E;
    --surface: #1F1826;
    --surface-raised: #251C2D;
    color-scheme: dark;
}

html[data-theme] body.public-page {
    color: var(--kk-ui-text);
    background:
        radial-gradient(circle at 8% 4%, color-mix(in srgb, var(--kk-ui-violet) 13%, transparent), transparent 21rem),
        radial-gradient(circle at 94% 16%, color-mix(in srgb, var(--kk-ui-pink) 10%, transparent), transparent 25rem),
        var(--kk-ui-bg);
    background-attachment: fixed;
}

html[data-theme] body.public-page :is(.app-shell, .live-shell, .result-shell, .market-shell, .odds-shell, .news-shell, .ibet-rule-shell, .profile-menu-list, .guide-video-list) {
    color: var(--kk-ui-text);
    background-color: transparent;
}

html[data-theme] body.public-page :is(h1, h2, h3, h4, strong, b) {
    color: var(--kk-ui-heading);
    letter-spacing: -0.025em;
}

html[data-theme] body.public-page :is(p, small) {
    color: var(--kk-ui-muted);
}

html[data-theme] body.public-page :is(a, button, input, select, textarea):focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--kk-ui-violet) 56%, var(--kk-ui-line));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--kk-ui-violet) 14%, transparent);
}

/* Header */
html[data-theme] body.public-page .site-header {
    border: 1px solid var(--kk-ui-line);
    border-radius: 20px;
    background: color-mix(in srgb, var(--kk-ui-card) 90%, transparent);
    box-shadow: 0 12px 34px rgba(53, 38, 68, 0.08);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

html[data-theme] body.public-page .brand-logo {
    border: 0;
    border-radius: 13px;
    background: #0B090D;
    box-shadow: 0 7px 18px rgba(53, 38, 68, 0.18);
}

html[data-theme] body.public-page .brand-copy small {
    color: var(--kk-ui-violet);
}

html[data-theme] body.public-page :is(.icon-btn, .ghost-btn, .modal-close, .league-table-btn, .date-icon-control) {
    color: var(--kk-ui-violet);
    border: 1px solid color-mix(in srgb, var(--kk-ui-violet) 20%, var(--kk-ui-line));
    border-radius: 13px;
    background: color-mix(in srgb, var(--kk-ui-violet) 8%, var(--kk-ui-card));
    box-shadow: none;
}

/* Shared cards */
html[data-theme] body.public-page :is(
    .agent-profile-card, .profile-credit-card, .profile-menu-link, .profile-menu-item,
    .profile-menu-panel, .profile-theme-setting, .social-card, .guide-video-card,
    .news-card, .news-state, .news-empty, .news-detail,
    .live-card, .live-player-card, .live-player-status, .stream-choice-buttons button,
    .league-card, .result-matches-panel, .result-detail-panel, .result-match-card,
    .details-score-card, .event-section, .standings-group, .h2h-stat,
    .result-empty, .result-inline-state, .market-rate-card, .market-rate-box,
    .market-history-row, .market-history-panel, .market-empty-card,
    .odds-league-card, .odds-match-card, .odds-analysis-summary,
    .odds-chart-row, .odds-history-dialog, .notice
) {
    color: var(--kk-ui-text);
    border-color: var(--kk-ui-line);
    background: var(--kk-ui-card);
    box-shadow: var(--kk-ui-shadow);
}

html[data-theme] body.public-page :is(
    .news-card, .live-card, .league-card, .result-match-card,
    .market-rate-card, .odds-league-card, .odds-match-card,
    .profile-menu-link, .profile-menu-item, .guide-video-card
) {
    border-radius: 18px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

html[data-theme] body.public-page :is(
    .news-card, .live-card, .league-card, .result-match-card,
    .market-rate-card, .odds-match-card, .profile-menu-link, .guide-video-card
):hover {
    border-color: color-mix(in srgb, var(--kk-ui-violet) 34%, var(--kk-ui-line));
    box-shadow: 0 16px 38px rgba(53, 38, 68, 0.12);
    transform: translateY(-2px);
}

html[data-theme] body.public-page :is(.result-topbar, .news-topbar, .market-topbar, .spin-topbar, .ibet-rule-hero) {
    border-color: var(--kk-ui-line);
    border-radius: 24px;
    background:
        radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--kk-ui-pink) 17%, transparent), transparent 9rem),
        linear-gradient(135deg, var(--kk-ui-card), color-mix(in srgb, var(--kk-ui-violet) 7%, var(--kk-ui-card)));
    box-shadow: var(--kk-ui-shadow);
}

html[data-theme] body.public-page :is(.result-topbar, .news-topbar, .market-topbar, .spin-topbar, .ibet-rule-hero) > div > span,
html[data-theme] body.public-page :is(.section-kicker, .profile-copy > span) {
    color: var(--kk-ui-violet);
}

/* Home hero */
html[data-theme] body.public-page .ad-slider {
    border-color: var(--kk-ui-line);
    border-radius: 24px;
    background: #24192D;
    box-shadow: 0 18px 42px rgba(42, 27, 52, 0.18);
}

html[data-theme] body.public-page :is(.ad-slide, .fallback-promo) {
    border-radius: 24px;
}

html[data-theme] body.public-page .fallback-slide,
html[data-theme] body.public-page .fallback-promo {
    color: #FFFFFF;
    background:
        radial-gradient(circle at 84% 22%, rgba(240, 100, 167, 0.27), transparent 11rem),
        radial-gradient(circle at 18% 90%, rgba(118, 87, 216, 0.25), transparent 14rem),
        linear-gradient(135deg, #211727 0%, #35213D 55%, #4B294C 100%);
}

html[data-theme] body.public-page .fallback-promo strong {
    color: #FFFFFF;
    letter-spacing: -0.04em;
}

html[data-theme] body.public-page .fallback-promo span {
    color: #F4A9CC;
}

html[data-theme] body.public-page .fallback-promo img {
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 24px;
    box-shadow: 0 18px 34px rgba(8, 5, 10, 0.34);
    transform: rotate(2deg);
}

/* Categories */
html[data-theme] body.public-page .home-categories-only .category-tile,
html[data-theme] body.public-page .category-tile {
    color: var(--kk-ui-heading);
    border: 1px solid var(--kk-ui-line);
    border-radius: 18px;
    background: var(--kk-ui-card);
    box-shadow: 0 8px 24px rgba(53, 38, 68, 0.055);
}

html[data-theme] body.public-page .home-categories-only .category-tile:hover,
html[data-theme] body.public-page .home-categories-only .category-tile:focus-visible,
html[data-theme] body.public-page .category-tile:hover,
html[data-theme] body.public-page .category-tile:focus-visible {
    color: var(--kk-ui-heading);
    border-color: color-mix(in srgb, var(--kk-ui-violet) 38%, var(--kk-ui-line));
    background: color-mix(in srgb, var(--kk-ui-violet) 5%, var(--kk-ui-card));
    box-shadow: 0 13px 30px rgba(70, 49, 92, 0.1);
    transform: translateY(-2px);
}

html[data-theme] body.public-page .home-categories-only .tile-icon,
html[data-theme] body.public-page .tile-icon {
    color: #FFFFFF;
    border: 0;
    border-radius: 17px;
    background: linear-gradient(145deg, #F06BA9 0%, #D9468D 48%, #7657D8 100%);
    box-shadow: 0 9px 20px rgba(118, 87, 216, 0.18);
}

html[data-theme] body.public-page .tile-icon:has(.category-brand-icon) {
    border: 1px solid var(--kk-ui-line);
    background: var(--kk-ui-card-strong);
    box-shadow: none;
}

html[data-theme] body.public-page .home-categories-only .tile-icon .app-icon,
html[data-theme] body.public-page .tile-icon .app-icon {
    color: #FFFFFF;
}

html[data-theme] body.public-page .tile-label {
    color: var(--kk-ui-heading);
    font-weight: 800;
}

/* Segmented controls and actions */
html[data-theme] body.public-page :is(.live-tabs, .result-filter-bar, .news-filter-tabs, .market-tabs, .market-region-buttons, .result-tabs, .theme-choice-group, .static-language-menu) {
    padding: 4px;
    border-color: var(--kk-ui-line);
    border-radius: 15px;
    background: var(--kk-ui-surface);
    box-shadow: none;
}

html[data-theme] body.public-page :is(.live-tabs, .result-filter-bar, .news-filter-tabs, .market-tabs, .market-region-buttons, .result-tabs) button.active,
html[data-theme] body.public-page .theme-choice-group button[aria-pressed="true"],
html[data-theme] body.public-page .static-language-menu button.active,
html[data-theme] body.public-page .settings-action,
html[data-theme] body.public-page .live-card-cue,
html[data-theme] body.public-page .stream-choice-buttons button.active {
    color: #FFFFFF;
    border-color: transparent;
    background: linear-gradient(135deg, var(--kk-ui-pink), var(--kk-ui-violet));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--kk-ui-violet) 25%, transparent);
}

html[data-theme] body.public-page :is(input, textarea, select) {
    color: var(--kk-ui-text);
    border-color: var(--kk-ui-line);
    border-radius: 13px;
    background: var(--kk-ui-card);
}

/* Profile */
html[data-theme] body.public-page .profile-hero-card {
    color: var(--kk-ui-text);
    border: 1px solid color-mix(in srgb, var(--kk-ui-violet) 18%, var(--kk-ui-line));
    border-radius: 24px;
    background:
        radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--kk-ui-pink) 17%, transparent), transparent 10rem),
        linear-gradient(135deg, var(--kk-ui-card), color-mix(in srgb, var(--kk-ui-violet) 8%, var(--kk-ui-card)));
    box-shadow: var(--kk-ui-shadow);
}

html[data-theme] body.public-page .profile-avatar {
    border: 3px solid color-mix(in srgb, var(--kk-ui-card) 82%, transparent);
    border-radius: 22px;
    background: #0B090D;
    box-shadow: 0 10px 24px rgba(65, 42, 79, 0.18);
    overflow: hidden;
}

html[data-theme] body.public-page .profile-avatar img {
    border-radius: 18px;
}

html[data-theme] body.public-page :is(.profile-menu-icon, .agent-profile-mark, .market-rate-icon) {
    color: #FFFFFF;
    border: 0;
    border-radius: 15px;
    background: linear-gradient(145deg, var(--kk-ui-pink), var(--kk-ui-violet));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--kk-ui-violet) 20%, transparent);
}

html[data-theme] body.public-page .profile-menu-icon .app-icon {
    color: #FFFFFF;
}

html[data-theme] body.public-page .profile-credit-card {
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--kk-ui-violet) 10%, transparent), transparent 9rem),
        var(--kk-ui-card);
}

html[data-theme] body.public-page .profile-credit-card p {
    color: var(--kk-ui-muted);
}

/* Floating navigation without the previous oversized notch. */
html[data-theme] body.public-page .bottom-nav,
html[data-theme] .bottom-nav {
    --kk-nav-page: transparent;
    width: min(560px, calc(100% - 28px));
    height: 70px;
    padding: 6px;
    border: 1px solid var(--kk-ui-line);
    border-radius: 22px;
    background: color-mix(in srgb, var(--kk-ui-card) 92%, transparent);
    box-shadow: 0 18px 42px rgba(44, 31, 57, 0.16);
    backdrop-filter: blur(20px) saturate(145%);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
}

html[data-theme] body.public-page .bottom-nav::before,
html[data-theme] .bottom-nav::before,
html[data-theme] body.public-page .bottom-nav::after,
html[data-theme] .bottom-nav::after {
    display: none;
}

html[data-theme] body.public-page .bottom-nav .nav-item,
html[data-theme] .bottom-nav a {
    grid-template-rows: 30px 14px;
    height: 56px;
    padding: 4px 2px;
    color: var(--kk-ui-muted);
    border-radius: 16px;
    transform: none;
}

html[data-theme] body.public-page .bottom-nav .nav-item.active,
html[data-theme] .bottom-nav a.active,
html[data-theme="light"] body.public-page .bottom-nav .nav-item.active {
    color: var(--kk-ui-heading);
    background: color-mix(in srgb, var(--kk-ui-violet) 9%, var(--kk-ui-card));
    box-shadow: none;
    transform: none;
}

html[data-theme] body.public-page .bottom-nav .nav-icon,
html[data-theme] .bottom-nav .nav-icon,
html[data-theme] body.public-page .bottom-nav .nav-item-featured .nav-icon,
html[data-theme] .bottom-nav .nav-item-featured .nav-icon {
    width: 32px;
    height: 32px;
    color: currentColor;
    background: transparent;
    box-shadow: none;
    transform: none;
}

html[data-theme] body.public-page .bottom-nav .nav-item.active .nav-icon,
html[data-theme] .bottom-nav a.active .nav-icon,
html[data-theme] body.public-page .bottom-nav .nav-item-featured.active .nav-icon,
html[data-theme] .nav-item-featured.active .nav-icon {
    width: 34px;
    height: 34px;
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--kk-ui-pink), var(--kk-ui-violet));
    box-shadow: 0 7px 16px color-mix(in srgb, var(--kk-ui-violet) 25%, transparent);
    transform: none;
}

html[data-theme] body.public-page .bottom-nav .nav-item.active .app-icon,
html[data-theme] .bottom-nav a.active .app-icon,
html[data-theme] body.public-page .bottom-nav .nav-item-featured.active .nav-icon .app-icon {
    color: #FFFFFF;
    transform: none;
}

html[data-theme] body.public-page .bottom-nav .nav-item span:last-child,
html[data-theme] .bottom-nav a span:last-child,
html[data-theme] body.public-page .bottom-nav .nav-item.active span:last-child,
html[data-theme] .bottom-nav a.active span:last-child {
    position: static;
    width: 100%;
    color: currentColor;
    font-size: 0.55rem;
    opacity: 1;
    transform: none;
}

/* Loading states */
html[data-theme] body.public-page :is(.route-skeleton-top, .route-skeleton-profile, .route-skeleton-versus, .route-skeleton-category-grid > div, .route-skeleton-panel, .route-skeleton-card) {
    border-color: var(--kk-ui-line);
    border-radius: 18px;
    background: var(--kk-ui-card);
}

html[data-theme] body.public-page :is(.skeleton-line, .skeleton-pill, .skeleton-avatar, .skeleton-block) {
    background: linear-gradient(90deg, var(--kk-ui-surface) 0%, color-mix(in srgb, var(--kk-ui-violet) 10%, var(--kk-ui-surface)) 48%, var(--kk-ui-surface) 100%);
    background-size: 220% 100%;
}

/* Admin and login */
html[data-theme] body.admin-page,
html[data-theme] body.admin-login-page {
    color: #271E2E !important;
    background:
        radial-gradient(circle at 8% 4%, rgba(118, 87, 216, 0.1), transparent 22rem),
        radial-gradient(circle at 94% 12%, rgba(217, 70, 141, 0.09), transparent 24rem),
        #F7F5FA !important;
}

html[data-theme] body.admin-page :is(.admin-app-header, .admin-sidebar, .admin-shell, .admin-panel, .admin-stats article, .admin-quick-grid a, .ad-admin-row, .live-admin-row, .category-edit-row, .analytics-card),
html[data-theme] body.admin-login-page .login-card {
    color: #271E2E !important;
    border-color: rgba(78, 59, 96, 0.14) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 12px 32px rgba(53, 38, 68, 0.08);
}

html[data-theme] body.admin-page :is(.admin-panel, .admin-stats article, .admin-quick-grid a, .analytics-card),
html[data-theme] body.admin-login-page .login-card {
    border-radius: 18px;
}

html[data-theme] body.admin-page .admin-nav a.active,
html[data-theme] body.admin-page .primary-btn,
html[data-theme] body.admin-login-page .primary-btn {
    color: #FFFFFF !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, #D9468D, #7657D8) !important;
    box-shadow: 0 9px 20px rgba(118, 87, 216, 0.2);
}

html[data-theme] body.admin-page .admin-nav a:hover {
    color: #7657D8 !important;
    background: #EEE9FB !important;
}

html[data-theme] body.admin-page :is(.ghost-btn, .icon-btn) {
    color: #7657D8 !important;
    border-color: rgba(118, 87, 216, 0.2) !important;
    background: #F4F1FA !important;
}

html[data-theme] body.admin-page :is(input, select, textarea),
html[data-theme] body.admin-login-page input {
    color: #271E2E !important;
    border-color: rgba(78, 59, 96, 0.16) !important;
    border-radius: 13px;
    background: #FFFFFF !important;
}

html[data-theme] body.admin-page :is(input, select, textarea):focus,
html[data-theme] body.admin-login-page input:focus {
    border-color: rgba(118, 87, 216, 0.58) !important;
    box-shadow: 0 0 0 4px rgba(118, 87, 216, 0.12);
}

@media (max-width: 520px) {
    html[data-theme] body.public-page .site-header {
        border-radius: 18px;
    }

    html[data-theme] body.public-page .bottom-nav,
    html[data-theme] .bottom-nav {
        width: min(calc(100% - 24px), 420px);
        height: 66px;
        padding: 5px;
        border-radius: 20px;
    }

    html[data-theme] body.public-page .bottom-nav .nav-item,
    html[data-theme] .bottom-nav a {
        height: 54px;
        grid-template-rows: 29px 14px;
    }

    html[data-theme] body.public-page .bottom-nav .nav-item.active .nav-icon,
    html[data-theme] .bottom-nav a.active .nav-icon,
    html[data-theme] body.public-page .bottom-nav .nav-item-featured.active .nav-icon,
    html[data-theme] .nav-item-featured.active .nav-icon {
        width: 33px;
        height: 33px;
    }

    html[data-theme] body.public-page .fallback-promo img {
        border-radius: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme] body.public-page :is(.category-tile, .news-card, .live-card, .league-card, .result-match-card, .market-rate-card, .odds-match-card, .profile-menu-link, .guide-video-card, .icon-btn, .ghost-btn) {
        transition: none;
    }
}

/* Neutralize legacy high-specificity color guards from the original theme. */
html[data-theme] body.public-page .section-heading {
    color: var(--kk-ui-text) !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-theme] body.public-page :is(.news-shell, .live-shell, .result-shell, .market-shell, .odds-shell, .profile-menu-list) {
    background-color: transparent !important;
}

html[data-theme] body.public-page :is(.news-card, .live-card, .result-match-card, .market-rate-card, .odds-match-card, .profile-menu-link, .guide-video-card, .agent-profile-card) {
    color: var(--kk-ui-text) !important;
    border-color: var(--kk-ui-line) !important;
    background: var(--kk-ui-card) !important;
}

html[data-theme] body.public-page .profile-hero-card {
    color: var(--kk-ui-text) !important;
    border-color: color-mix(in srgb, var(--kk-ui-violet) 18%, var(--kk-ui-line)) !important;
    background:
        radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--kk-ui-pink) 17%, transparent), transparent 10rem),
        linear-gradient(135deg, var(--kk-ui-card), color-mix(in srgb, var(--kk-ui-violet) 8%, var(--kk-ui-card))) !important;
}

html[data-theme] body.public-page :is(.profile-menu-icon, .market-rate-icon, .agent-profile-mark),
html[data-theme] body.public-page :is(.profile-menu-icon, .market-rate-icon, .agent-profile-mark) .app-icon {
    color: #FFFFFF !important;
}

html[data-theme] body.public-page :is(.live-tabs, .segmented-control, .score-filter, .market-region-strip, .market-tabs, .odds-filter) :is(button:hover, button.active, button[aria-pressed="true"], a:hover, a.active),
html[data-theme] body.public-page .theme-choice-group button[aria-pressed="true"],
html[data-theme] body.public-page .static-language-menu button.active {
    color: #FFFFFF !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--kk-ui-pink), var(--kk-ui-violet)) !important;
}

html[data-theme="light"] body.public-page :is(.icon-btn, .ghost-btn, .modal-close, .league-table-btn, .date-icon-control) {
    color: #7657D8 !important;
    border-color: rgba(118, 87, 216, 0.2) !important;
    background: #F1EDFB !important;
}