/*
 * UEFA Champions League visual layer.
 * Loaded after all legacy bundles so every template shares one design system.
 */
:root {
    --ucl-navy-950: #06132f;
    --ucl-navy-900: #081b43;
    --ucl-navy-800: #0b2c67;
    --ucl-blue-700: #145bd7;
    --ucl-blue-600: #256ee8;
    --ucl-cyan-500: #27c8eb;
    --ucl-ink: #10254d;
    --ucl-text: #293d60;
    --ucl-muted: #71809c;
    --ucl-line: #dbe5f6;
    --ucl-soft: #edf5ff;
    --ucl-page: #f4f7fc;
    --ucl-white: #fff;
    --ucl-radius: 16px;
    --ucl-shadow: 0 12px 30px rgba(22, 48, 91, .07);
    --theme-primary: var(--ucl-blue-700);
    --theme-primary-hover: #0d49b7;
    --theme-primary-light: rgba(20, 91, 215, .1);
    --theme-primary-rgb: 20, 91, 215;
    --theme-accent: var(--ucl-cyan-500);
    --theme-gold: #8ee6f7;
    --theme-deep: var(--ucl-navy-950);
    --theme-deep-soft: var(--ucl-navy-900);
    --theme-surface: var(--ucl-page);
    --bg-page: var(--ucl-page);
    --border-light: var(--ucl-line);
    --text-main: var(--ucl-ink);
    --text-muted: var(--ucl-muted);
}

html {
    background: var(--ucl-page);
}

body.ucl-design {
    background:
        radial-gradient(circle at 10% 0, rgba(37, 110, 232, .08), transparent 26%),
        linear-gradient(180deg, #f7faff 0, var(--ucl-page) 300px);
    color: var(--ucl-text);
}

.ucl-design a {
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.ucl-design .site-container,
.ucl-design .jzt-basic-page,
.ucl-design .jzt-article-page,
.ucl-design .dir-container,
.ucl-design .jzt-portal-inner,
.ucl-design .yuce-wrap .container,
.ucl-design .seo-core-wrap,
.ucl-design .seo-hub-wrap {
    max-width: 1200px;
}

.ucl-design .jzt-main-shell {
    padding-top: 18px;
}

.ucl-design .jzt-frame-header {
    position: sticky;
    top: 0;
    z-index: 1040;
    border-bottom: 0;
    background: var(--ucl-navy-950);
    box-shadow: 0 12px 32px rgba(6, 19, 47, .2);
}

.ucl-design .jzt-frame-alert {
    background: linear-gradient(90deg, #0d4db8, #0b77a7);
}

.ucl-score-ticker-inner {
    min-height: 32px;
}

.ucl-score-ticker-inner a:first-child {
    gap: 8px;
}

.ucl-score-ticker-inner a:first-child span {
    border-radius: 999px;
    padding: 3px 8px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.ucl-design .jzt-frame-top {
    background:
        radial-gradient(circle at 12% 0, rgba(39, 200, 235, .13), transparent 26%),
        var(--ucl-navy-950);
}

.ucl-design .jzt-frame-logo a {
    display: flex;
    min-width: 154px;
    min-height: 46px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    color: #fff;
    font-size: 23px;
    font-weight: 950;
}

.ucl-design .jzt-frame-logo small {
    margin-top: 3px;
    color: #6fdcf5;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .12em;
}

.ucl-design .jzt-frame-logo img {
    max-height: 43px;
}

.ucl-design .jzt-frame-nav a {
    border-radius: 10px;
    color: #cbd8ee;
}

.ucl-design .jzt-frame-nav a:hover,
.ucl-design .jzt-frame-nav a.is-current,
.ucl-design .jzt-frame-nav a.is-active {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.ucl-design .jzt-frame-nav a.is-ucl {
    background: linear-gradient(135deg, #2b74ef, #18b8dc);
    color: #fff;
    box-shadow: 0 7px 18px rgba(24, 184, 220, .22);
}

.ucl-design .jzt-frame-search {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 11px;
    background: rgba(255, 255, 255, .065);
}

.ucl-design .jzt-frame-search input {
    color: #fff;
}

.ucl-design .jzt-frame-search input::placeholder {
    color: #8ea2c7;
}

.ucl-design .jzt-frame-search button,
.ucl-design .jzt-mobile-search button {
    background: var(--ucl-blue-700);
}

.ucl-design .jzt-frame-sub {
    border-bottom: 1px solid var(--ucl-line);
    background: #fff;
}

.ucl-design .jzt-frame-sub nav {
    gap: 7px;
}

.ucl-design .jzt-frame-sub a {
    border-radius: 8px;
    padding: 8px 10px;
    color: #344b70;
}

.ucl-design .jzt-frame-sub a:hover,
.ucl-design .jzt-frame-sub a.is-current {
    background: var(--ucl-soft);
    color: var(--ucl-blue-700);
}

.ucl-design .jzt-frame-menu {
    background: linear-gradient(135deg, var(--ucl-blue-600), var(--ucl-cyan-500));
}

.ucl-design .ucl-mobile-drawer {
    background: #fff;
}

.ucl-design .ucl-mobile-head {
    background: var(--ucl-navy-950);
    color: #fff;
}

.ucl-design .ucl-mobile-hotlinks a {
    border-color: #dbe8fb;
    background: #f3f8ff;
    color: var(--ucl-blue-700);
}

.ucl-design .ucl-mobile-navlist a {
    color: var(--ucl-ink);
}

.ucl-design :where(
    .jzt-basic-card,
    .jzt-article-card,
    .jzt-side-box,
    .dir-card,
    .mod-box,
    .league-header,
    .rank-card,
    .schedule-card,
    .side-card,
    .yuce-main-card,
    .seo-main-card,
    .seo-jzt-hero,
    .seo-topic-card,
    .video-main-card,
    .hub-card,
    .cat-main,
    .cat-side-box,
    .tag-main,
    .tag-side-box,
    .sp-match-card,
    .sp-team-card,
    .sp-player-card
) {
    border: 1px solid var(--ucl-line) !important;
    border-radius: var(--ucl-radius) !important;
    background: var(--ucl-white) !important;
    box-shadow: var(--ucl-shadow) !important;
}

.ucl-design :where(
    .mod-hd,
    .side-card-hd,
    .dir-head,
    .league-title-box,
    .rank-head,
    .schedule-head,
    .jzt-article-module-head,
    .sp-section-head,
    .cat-section-head
) {
    border-color: #e7edf7 !important;
}

.ucl-design :where(
    .mod-hd span,
    .rank-head span,
    .dir-kicker,
    .seo-jzt-badge,
    .side-card-hd span,
    .jzt-article-module-head span
) {
    border-radius: 999px !important;
    background: rgba(20, 91, 215, .09) !important;
    color: var(--ucl-blue-700) !important;
}

.ucl-design :where(h1, h2, h3, .league-title-box h1, .jzt-basic-head h1, .jzt-article-head h1, .dir-head h1, .rank-head h1) {
    color: var(--ucl-ink) !important;
    letter-spacing: 0 !important;
}

.ucl-design :where(
    .jzt-live-btn,
    .seo-jzt-live-btn,
    .jzt-article-live-btn,
    .tag-btn-live,
    .yc-live-btn,
    .sp-side-live-btn,
    .schedule-live-btn,
    .side-match-btn,
    .btn-full-standings
) {
    border-color: var(--ucl-blue-700) !important;
    border-radius: 10px !important;
    background: var(--ucl-blue-700) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.ucl-design :where(
    .jzt-live-btn,
    .seo-jzt-live-btn,
    .jzt-article-live-btn,
    .tag-btn-live,
    .yc-live-btn,
    .sp-side-live-btn,
    .schedule-live-btn,
    .side-match-btn,
    .btn-full-standings
):hover {
    border-color: #0d49b7 !important;
    background: #0d49b7 !important;
    transform: translateY(-1px);
}

.ucl-design :where(.breadcrumb_loop, .jzt-basic-breadcrumb, .clean-breadcrumb, .dir-breadcrumb, .core-seo-breadcrumb, .sp-news-breadcrumb, .sp-match-breadcrumb, .sp-team-breadcrumb) {
    margin-bottom: 14px;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 10px 13px !important;
    background: rgba(255, 255, 255, .72) !important;
    color: #8390a7 !important;
    font-size: 12px !important;
}

.ucl-design :where(.breadcrumb_loop, .jzt-basic-breadcrumb, .clean-breadcrumb, .dir-breadcrumb, .core-seo-breadcrumb, .sp-news-breadcrumb, .sp-match-breadcrumb, .sp-team-breadcrumb) a {
    color: var(--ucl-blue-700) !important;
}

.ucl-design :where(.league-tabs a.active, .schedule-date-nav a.active, .filter-tabs a.active, .rank-league-nav a.active, .mod-tabs a.active, .dir-tabs a.active) {
    border-color: var(--ucl-blue-700) !important;
    background: var(--ucl-blue-700) !important;
    color: #fff !important;
}

/* Legacy templates still contain a few inline green declarations; normalize them without changing data markup. */
.ucl-design [style*="color:#0f766e"],
.ucl-design [style*="color: #0f766e"] {
    color: var(--ucl-blue-700) !important;
}

.ucl-design [style*="background:#0f766e"],
.ucl-design [style*="background: #0f766e"] {
    background: var(--ucl-blue-700) !important;
}

.ucl-design [style*="border-color:#0f766e"],
.ucl-design [style*="border-color: #0f766e"] {
    border-color: var(--ucl-blue-700) !important;
}

.ucl-design [style*="border-left"][style*="#0f766e"],
.ucl-design [style*="border-bottom"][style*="#0f766e"] {
    border-color: var(--ucl-blue-700) !important;
}

.ucl-design :where(.league-tabs a, .schedule-date-nav a, .filter-tabs a, .rank-league-nav a, .mod-tabs a, .dir-tabs a) {
    border-radius: 10px !important;
}

.ucl-design :where(.match-item, .schedule-match, .side-match-row, .rank-row, .team-schedule-row, .sp-match-row) {
    border-color: #e7edf7 !important;
}

.ucl-design :where(.match-item:hover, .schedule-match:hover, .side-match-row:hover, .team-schedule-row:hover, .sp-match-row:hover) {
    background: #f7faff !important;
}

.ucl-design :where(.status-live, .match-live, .is-live .status-badge) {
    background: #e4faff !important;
    color: #0089a7 !important;
}

.ucl-design :where(.article-content, .jzt-article-content, .seo-content, .cat-description) {
    color: #354766;
    font-size: 16px;
    line-height: 1.9;
}

.ucl-design :where(.article-content, .jzt-article-content, .seo-content) a {
    color: var(--ucl-blue-700);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ucl-design :where(.article-content, .jzt-article-content, .seo-content) img {
    border-radius: 14px;
}

.ucl-design .jzt-side-box h2,
.ucl-design .cat-side-box h2,
.ucl-design .tag-side-box h2 {
    border-bottom-color: #e7edf7;
    color: var(--ucl-ink) !important;
}

.ucl-design .jzt-side-topic-cloud a,
.ucl-design .tag-cloud a,
.ucl-design .seo-topic-cloud a {
    border-color: #dce6f5 !important;
    border-radius: 999px !important;
    background: #f7faff !important;
    color: #3b567c !important;
}

.ucl-design .jzt-side-topic-cloud a:hover,
.ucl-design .tag-cloud a:hover,
.ucl-design .seo-topic-cloud a:hover {
    border-color: #8fb7f3 !important;
    color: var(--ucl-blue-700) !important;
}

.ucl-design .jzt-frame-footer {
    margin-top: 36px;
    background:
        radial-gradient(circle at 14% 0, rgba(39, 200, 235, .12), transparent 28%),
        var(--ucl-navy-950);
    color: #bdcae1;
}

.ucl-design .ucl-footer-lead {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .045);
}

.ucl-footer-lead > div > span {
    display: block;
    margin-bottom: 5px;
    color: #6fdcf5;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
}

.ucl-design .jzt-footer-lead strong,
.ucl-design .jzt-footer-grid span {
    color: #fff;
}

.ucl-design .jzt-footer-lead > a {
    border: 1px solid #3dd2ef !important;
    border-radius: 10px !important;
    background: #3dd2ef !important;
    color: var(--ucl-navy-950) !important;
}

.ucl-design .jzt-footer-grid a {
    color: #aabbd7;
}

.ucl-design .jzt-footer-grid a:hover {
    color: #79e4f9;
}

.ucl-design .jzt-footer-bottom {
    border-color: rgba(255, 255, 255, .1);
}

@media (max-width: 767px) {
    .ucl-design .jzt-main-shell {
        padding-top: 12px;
    }
    .ucl-design .jzt-frame-alert {
        display: none;
    }
    .ucl-design .jzt-frame-logo a {
        min-height: 42px;
        font-size: 20px;
    }
    .ucl-design .jzt-frame-logo small {
        font-size: 7px;
    }
    .ucl-design :where(
        .jzt-basic-card,
        .jzt-article-card,
        .jzt-side-box,
        .dir-card,
        .mod-box,
        .league-header,
        .rank-card,
        .schedule-card,
        .side-card,
        .yuce-main-card,
        .seo-main-card,
        .seo-jzt-hero,
        .seo-topic-card,
        .video-main-card,
        .hub-card,
        .cat-main,
        .cat-side-box,
        .tag-main,
        .tag-side-box,
        .sp-match-card,
        .sp-team-card,
        .sp-player-card
    ) {
        border-radius: 13px !important;
        box-shadow: 0 7px 20px rgba(22, 48, 91, .055) !important;
    }
    .ucl-design :where(.article-content, .jzt-article-content, .seo-content, .cat-description) {
        font-size: 15px;
        line-height: 1.85;
    }
    .ucl-design .jzt-frame-footer {
        margin-top: 24px;
    }
}

/* Global polish: typography, navigation and reusable surfaces. */
body.ucl-design {
    background:
        radial-gradient(circle at 7% 0, rgba(38, 116, 232, .075), transparent 24%),
        linear-gradient(180deg, #f8faff 0, #f3f6fb 360px);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.ucl-design .site-container,
.ucl-design .jzt-frame-inner,
.ucl-design .jzt-frame-sub nav,
.ucl-design .ucl-score-ticker-inner {
    width: min(1180px, calc(100% - 32px));
    margin-inline: auto;
}

.ucl-design .jzt-frame-alert {
    min-height: 34px;
    background: linear-gradient(90deg, #164fb0 0%, #1472ad 100%);
}

.ucl-design .jzt-frame-top {
    min-height: 66px;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.ucl-design .jzt-frame-logo a {
    min-width: 162px;
}

.ucl-design .jzt-frame-nav {
    gap: 3px;
}

.ucl-design .jzt-frame-nav a {
    padding-inline: 13px;
    font-size: 14px;
    font-weight: 750;
}

.ucl-design .jzt-frame-nav a.is-ucl {
    background: linear-gradient(135deg, #2774ef, #27c6e9);
    box-shadow: 0 9px 22px rgba(36, 177, 224, .2);
}

.ucl-design .jzt-frame-search {
    min-height: 42px;
    border-radius: 13px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055);
}

.ucl-design .jzt-frame-search button,
.ucl-design .jzt-mobile-search button,
.ucl-design .jzt-frame-menu {
    border-radius: 10px;
    background: linear-gradient(135deg, #256ee8, #27c3e6);
}

.ucl-design .jzt-frame-sub {
    box-shadow: 0 8px 22px rgba(20, 42, 78, .055);
}

.ucl-design .jzt-frame-sub nav {
    min-height: 49px;
}

.ucl-design .jzt-frame-sub a {
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 750;
}

.ucl-design :where(
    .jzt-basic-card,
    .jzt-article-card,
    .jzt-side-box,
    .dir-card,
    .mod-box,
    .league-header,
    .rank-card,
    .schedule-card,
    .side-card,
    .yuce-main-card,
    .seo-main-card,
    .seo-jzt-hero,
    .seo-topic-card,
    .video-main-card,
    .hub-card,
    .cat-main,
    .cat-side-box,
    .tag-main,
    .tag-side-box,
    .sp-match-card,
    .sp-team-card,
    .sp-player-card
) {
    border-color: #dfe7f2 !important;
    border-radius: 20px !important;
    box-shadow:
        0 16px 42px rgba(22, 48, 91, .06),
        inset 0 1px 0 #fff !important;
}

.ucl-design :where(
    .jzt-basic-card,
    .jzt-article-card,
    .jzt-side-box,
    .dir-card,
    .mod-box,
    .rank-card,
    .schedule-card,
    .side-card,
    .cat-main,
    .cat-side-box,
    .tag-main,
    .tag-side-box
) {
    overflow: hidden;
}

.ucl-design :where(
    .jzt-live-btn,
    .seo-jzt-live-btn,
    .jzt-article-live-btn,
    .tag-btn-live,
    .yc-live-btn,
    .sp-side-live-btn,
    .schedule-live-btn,
    .side-match-btn,
    .btn-full-standings
) {
    min-height: 40px;
    border-radius: 999px !important;
    padding-inline: 16px !important;
    background: linear-gradient(135deg, #1761db, #2779e7) !important;
    box-shadow: 0 8px 18px rgba(20, 91, 215, .14) !important;
    font-weight: 800 !important;
}

.ucl-design :where(.match-item, .schedule-match, .side-match-row, .rank-row, .team-schedule-row, .sp-match-row) {
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.ucl-design :where(.match-item:hover, .schedule-match:hover, .side-match-row:hover, .team-schedule-row:hover, .sp-match-row:hover) {
    background: #f8fbff !important;
    box-shadow: inset 3px 0 0 #2a75e7;
}

.ucl-design :where(.breadcrumb_loop, .jzt-basic-breadcrumb, .clean-breadcrumb, .dir-breadcrumb, .core-seo-breadcrumb, .sp-news-breadcrumb, .sp-match-breadcrumb, .sp-team-breadcrumb) {
    border: 1px solid rgba(220, 230, 244, .72) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .78) !important;
    box-shadow: 0 6px 18px rgba(27, 51, 88, .035);
}

.ucl-design :where(.article-content, .jzt-article-content, .seo-content, .cat-description) img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    background: #edf3fb;
    box-shadow: 0 12px 30px rgba(15, 43, 88, .08);
}

.ucl-design img {
    color: transparent;
}

@media (max-width: 767px) {
    .ucl-design .site-container,
    .ucl-design .jzt-frame-inner,
    .ucl-design .jzt-frame-sub nav,
    .ucl-design .ucl-score-ticker-inner {
        width: min(calc(100% - 24px), 1180px);
    }

    .ucl-design .jzt-frame-top {
        min-height: 58px;
    }

    .ucl-design :where(
        .jzt-basic-card,
        .jzt-article-card,
        .jzt-side-box,
        .dir-card,
        .mod-box,
        .league-header,
        .rank-card,
        .schedule-card,
        .side-card,
        .yuce-main-card,
        .seo-main-card,
        .seo-jzt-hero,
        .seo-topic-card,
        .video-main-card,
        .hub-card,
        .cat-main,
        .cat-side-box,
        .tag-main,
        .tag-side-box,
        .sp-match-card,
        .sp-team-card,
        .sp-player-card
    ) {
        border-radius: 15px !important;
        box-shadow: 0 9px 26px rgba(22, 48, 91, .05) !important;
    }
}