.cn-sula {
	/* Design tokens (section 64 of the brief) — light theme is the default;
	   Foxiz's own toggle stamps body[data-theme="dark"] when a visitor picks
	   dark mode (confirmed on this site's other plugins), never a separate
	   selector of our own. Every rule below reads a var(--sula-*) token,
	   never a hardcoded color, so the whole widget re-themes correctly. */
	--sula-primary: #144b9b;
	--sula-primary-dark: #0b2c61;
	--sula-primary-deep: #04142d;
	--sula-surface: #ffffff;
	--sula-page: #f5f7fa;
	--sula-text: #2b2b24;
	--sula-muted: #5c6b7a;
	--sula-border: rgba(20, 75, 155, 0.14);
	--sula-success: #16a34a;
	--sula-danger: #dc2626;
	--sula-warning: #b8790a;
	--sula-gold: #96700a;
	--sula-max-width: 1340px;
	color: var(--sula-text);
	font-family: inherit;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
body[data-theme="dark"] .cn-sula {
	--sula-primary: #144b9b;
	--sula-primary-dark: #071d3f;
	--sula-primary-deep: #04142d;
	--sula-surface: #0b2b50;
	--sula-page: #06182f;
	--sula-text: #e9e9ea;
	--sula-muted: #7494c4;
	--sula-border: rgba(116, 148, 196, 0.22);
	--sula-success: #18a957;
	--sula-danger: #df3346;
	--sula-warning: #d9a928;
	--sula-gold: #d9a928;
}
/* The hero is a deliberate, self-contained dark "banner" (night sky, map,
   trophy, gold accents) — like a promo strip, it keeps its own dark look
   regardless of the site-wide toggle. Re-pinning the same token names to
   their dark values here (rather than inventing hero-only variables) means
   every rule everywhere still just reads var(--sula-*). */
.cn-sula-hero {
	--sula-primary: #144b9b;
	--sula-primary-dark: #071d3f;
	--sula-primary-deep: #04142d;
	--sula-surface: #0b2b50;
	--sula-page: #06182f;
	--sula-text: #e9e9ea;
	--sula-muted: #7494c4;
	--sula-border: rgba(116, 148, 196, 0.25);
	--sula-gold: #d9a928;
}

.cn-sula * { box-sizing: border-box; }
.cn-sula a { color: inherit; text-decoration: none; }
.cn-sula img { max-width: 100%; display: block; }
.cn-sula button { font: inherit; cursor: pointer; }
.cn-sula table { border-collapse: collapse; width: 100%; }
.cn-sula .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.cn-sula-container {
	max-width: var(--sula-max-width); margin: 0 auto; padding: 24px 20px 60px;
	background: var(--sula-page);
	overflow-x: hidden; /* safety net below the sticky nav, never an ancestor of it */
}
/* Every in-page anchor target needs room for the sticky nav (~54px tall) or
   clicking a nav link scrolls its title directly under the nav bar, hiding
   it — the classic "sticky header eats the anchor" bug. */
.cn-sula [id] { scroll-margin-top: 64px; }
.cn-sula-updated-at { font-size: 12px; color: var(--sula-muted); margin: 0 0 16px; }

/* ---------- Hero ---------- */
.cn-sula-hero {
	position: relative;
	padding: 56px 20px 40px;
	background:
		radial-gradient(circle at 15% 15%, rgba(217,169,40,0.10), transparent 45%),
		radial-gradient(circle at 85% 75%, rgba(20,75,155,0.35), transparent 55%),
		linear-gradient(160deg, var(--sula-primary-dark), var(--sula-primary-deep));
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.cn-sula-hero[style*="--sula-hero-bg"] { background-image: var(--sula-hero-bg); }
.cn-sula-hero__map {
	position: absolute; inset: 0; opacity: 0.10; pointer-events: none;
	background-image: radial-gradient(rgba(255,255,255,0.6) 1px, transparent 1.4px);
	background-size: 22px 22px;
	mask-image: radial-gradient(ellipse 70% 90% at 70% 40%, #000 40%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 70% 90% at 70% 40%, #000 40%, transparent 75%);
}
.cn-sula-hero__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(4,20,45,0.35) 0%, rgba(4,20,45,0.82) 75%, var(--sula-page) 100%);
	pointer-events: none;
}
.cn-sula-hero__inner { position: relative; max-width: var(--sula-max-width); margin: 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.cn-sula-hero__text { flex: 1; min-width: 0; }
.cn-sula-hero__eyebrow { color: var(--sula-muted); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 10px; }
.cn-sula-hero__title { margin: 0; font-size: clamp(32px, 5.5vw, 54px); font-weight: 900; line-height: 1.02; letter-spacing: -0.01em; color: #ffffff; }
.cn-sula-hero__title span { display: block; }
.cn-sula-hero__title-gold { color: var(--sula-gold); }
.cn-sula-hero__subtitle { margin: 14px 0 24px; font-size: 15px; color: var(--sula-muted); font-weight: 600; max-width: 46ch; }

.cn-sula-hero__controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }
.cn-sula-select-wrap { display: inline-block; }
.cn-sula-select {
	background: var(--sula-page); color: #ffffff; border: 1px solid var(--sula-border);
	border-radius: 8px; padding: 10px 14px; font-size: 14px; font-weight: 700; min-width: 90px;
	/* The season <select>'s own box respects our background/color either
	   way, but its native open dropdown (the actual list of years) is
	   browser/OS chrome that many browsers render using a *light* palette
	   by default unless told otherwise — regardless of the site's own
	   light/dark toggle, since that toggle is just our own body attribute,
	   not something the browser's native form-control renderer knows about.
	   Without this, the dropdown list can render white text on a
	   browser-default white popup background: invisible. This select is
	   always inside the permanently-dark hero, so it always wants dark
	   native chrome. */
	color-scheme: dark;
}
.cn-sula-select--sm { padding: 6px 10px; font-size: 12px; min-width: 0; }
.cn-sula-select-wrap--inline .cn-sula-select {
	color: var(--sula-text); background: var(--sula-surface);
	/* This select lives in the theme-aware body (not the always-dark hero),
	   so its native popup should follow the site's own light/dark toggle
	   instead of being forced dark like the season select above. */
	color-scheme: light;
}
body[data-theme="dark"] .cn-sula-select-wrap--inline .cn-sula-select { color-scheme: dark; }
.cn-sula-tag-pill { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; background: rgba(217,169,40,0.14); border: 1px solid rgba(217,169,40,0.4); color: var(--sula-gold); font-size: 12px; font-weight: 800; letter-spacing: 0.03em; }
.cn-sula-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--sula-success); }
.cn-sula-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sula-success); }
.cn-sula-status.is-live { color: var(--sula-danger); }
.cn-sula-status.is-live .cn-sula-status__dot { background: var(--sula-danger); animation: cn-sula-pulse 1.4s infinite; }
@keyframes cn-sula-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.cn-sula-hero__indicators {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
	background: var(--sula-border); border: 1px solid var(--sula-border); border-radius: 10px; overflow: hidden;
}
.cn-sula-indicator { background: rgba(6,24,47,0.65); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.cn-sula-indicator__icon { font-size: 16px; }
.cn-sula-indicator__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sula-muted); font-weight: 600; }
.cn-sula-indicator__value { font-size: 15px; font-weight: 800; color: #ffffff; }

.cn-sula-hero__trophy { flex-shrink: 0; display: none; }
@media (min-width: 900px) {
	.cn-sula-hero__trophy { display: flex; align-items: center; justify-content: center; width: 160px; height: 160px; }
	.cn-sula-hero__trophy-icon {
		font-size: 84px; filter: drop-shadow(0 12px 30px rgba(217,169,40,0.35));
		opacity: 0.92;
	}
}

/* ---------- Nav ---------- */
.cn-sula-nav { position: sticky; top: 0; z-index: 20; background: var(--sula-primary-dark); border-bottom: 1px solid var(--sula-border); }
.cn-sula-nav__scroller { max-width: var(--sula-max-width); margin: 0 auto; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 0 20px; }
.cn-sula-nav__scroller::-webkit-scrollbar { display: none; }
.cn-sula-nav__item {
	flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 14px 14px; font-size: 13px; font-weight: 700;
	color: #a9bfe0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.cn-sula-nav__item:hover, .cn-sula-nav__item.is-active { color: #ffffff; border-bottom-color: var(--sula-gold); }

/* ---------- Cards ---------- */
.cn-sula-card {
	background: var(--sula-surface); border: 1px solid var(--sula-border); border-radius: 12px; padding: 18px;
	transition: border-color .15s ease;
	min-width: 0; /* lets grid/flex items actually shrink to their column instead of forcing overflow */
}
@media (hover: hover) { .cn-sula-card:hover { border-color: var(--sula-primary); } }
.cn-sula-card__eyebrow { margin: 0 0 14px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: var(--sula-muted); text-transform: uppercase; }
.cn-sula-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cn-sula-card__head .cn-sula-card__eyebrow { margin-bottom: 0; }
.cn-sula-empty { color: var(--sula-muted); font-size: 14px; padding: 10px 0; }
.cn-sula-section__title { font-size: 17px; font-weight: 800; color: var(--sula-text); margin: 0 0 16px; }
.cn-sula-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.05em; color: var(--sula-gold); margin: 0 0 8px; }
.cn-sula-tag-status { font-size: 12px; font-weight: 700; color: var(--sula-success); margin: 6px 0; }
.cn-sula-link-inline { font-size: 12px; font-weight: 700; color: var(--sula-primary); }
.cn-sula-link-inline:hover { text-decoration: underline; }
.cn-sula-btn {
	display: inline-block; margin-top: 12px; padding: 10px 16px; border-radius: 8px; background: transparent;
	border: 1px solid var(--sula-border); color: var(--sula-text); font-size: 13px; font-weight: 700; text-align: center; width: 100%;
}
.cn-sula-btn--primary { background: var(--sula-primary); border-color: var(--sula-primary); color: #ffffff; }
.cn-sula-btn:hover { background: var(--sula-primary); border-color: var(--sula-primary); color: #ffffff; }

/* Section grids */
.cn-sula-section { margin-top: 24px; }
.cn-sula-duo { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.cn-sula-quad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
/* A grid item's default minimum width is its content's min-content size, not
   0 — without this, the classificação table's own min-width:480px (kept on
   purpose so it scrolls horizontally *inside* its card on mobile, see
   .cn-sula-table below) instead forces the whole grid TRACK wider than the
   viewport, blowing the Jogos/Classificação row (and História's 3-up row)
   off the right edge of the screen on narrow phones. This is the standard
   CSS grid/flex fix: every direct grid item must be told it's allowed to
   shrink below its content's natural width so its own overflow:auto
   descendants (not the grid item itself) are what actually scrolls. */
.cn-sula-duo > *, .cn-sula-quad > *, .cn-sula-hero__inner > * { min-width: 0; }

/* Badges */
.cn-sula-badge { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.cn-sula-badge--sm { width: 24px; height: 24px; }
.cn-sula-badge--lg { width: 56px; height: 56px; margin: 0 auto 10px; }
.cn-sula-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin: 0 auto 8px; background: var(--sula-page); }
.cn-sula-avatar--lg { width: 84px; height: 84px; }

/* Matchup */
.cn-sula-matchup { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0; }
.cn-sula-matchup--stack { flex-direction: column; gap: 8px; }
.cn-sula-matchup__team { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; flex: 1; min-width: 0; }
.cn-sula-matchup__team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-sula-matchup--stack .cn-sula-matchup__team { flex-direction: column; text-align: center; width: 100%; }
.cn-sula-matchup--stack .cn-sula-matchup__team span { white-space: normal; }
.cn-sula-matchup__score { font-size: 22px; font-weight: 900; color: var(--sula-text); white-space: nowrap; }
.cn-sula-matchup__score--vs { font-size: 13px; color: var(--sula-muted); font-weight: 700; }
.cn-sula-datetime { font-size: 13px; font-weight: 700; color: var(--sula-text); margin: 4px 0; text-align: center; }
.cn-sula-venue { font-size: 12px; color: var(--sula-muted); margin: 4px 0; text-align: center; }
.cn-sula-broadcast { font-size: 12px; font-weight: 700; color: var(--sula-gold); margin: 6px 0 0; text-align: center; }

/* Jogos ao vivo / próximos jogos combined card */
.cn-sula-match--live {
	background: linear-gradient(160deg, rgba(20,75,155,0.06), transparent); border: 1px solid var(--sula-border);
	border-radius: 10px; padding: 16px; margin-bottom: 16px;
}
.cn-sula-live-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; color: var(--sula-danger); letter-spacing: 0.05em; margin-bottom: 6px; }
.cn-sula-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sula-danger); animation: cn-sula-pulse 1.2s infinite; }
.cn-sula-live-minute { color: var(--sula-danger); }
.cn-sula-filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 14px; }
.cn-sula-filter { background: transparent; border: 1px solid var(--sula-border); color: var(--sula-muted); border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 700; }
.cn-sula-filter.is-active, .cn-sula-filter:hover { background: var(--sula-primary); border-color: var(--sula-primary); color: #ffffff; }
.cn-sula-matches__scroller { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.cn-sula-match-card { flex: 0 0 220px; background: var(--sula-page); border: 1px solid var(--sula-border); border-radius: 10px; padding: 14px; }

/* Path timeline */
.cn-sula-path__list { display: flex; align-items: center; gap: 6px; list-style: none; padding: 0; margin: 0; overflow-x: auto; padding-bottom: 6px; }
.cn-sula-path__step { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 100px; position: relative; }
.cn-sula-path__step:not(:last-child)::after { content: ""; position: absolute; top: 14px; left: 60%; width: 100%; height: 2px; background: var(--sula-border); z-index: 0; }
.cn-sula-path__icon {
	width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: var(--sula-page); border: 2px solid var(--sula-border); color: var(--sula-muted); font-size: 13px; font-weight: 800; z-index: 1;
}
.cn-sula-path__step.is-done .cn-sula-path__icon { border-color: var(--sula-success); color: var(--sula-success); }
.cn-sula-path__step.is-current .cn-sula-path__icon { border-color: var(--sula-primary); background: var(--sula-primary); color: #ffffff; }
.cn-sula-path__label { font-size: 10px; font-weight: 700; letter-spacing: 0.03em; color: var(--sula-muted); text-align: center; }
.cn-sula-path__step.is-current .cn-sula-path__label { color: var(--sula-text); }

/* Bracket — only one stage's ties are ever visible at a time (JS-toggled via
   [hidden]), so this is a plain block container, never a multi-column grid
   (a fixed-track grid would still reserve empty tracks for hidden stages). */
.cn-sula-bracket-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cn-sula-bracket__column { width: 100%; }
.cn-sula-bracket__ties { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.cn-sula-tie { background: var(--sula-page); border: 1px solid var(--sula-border); border-radius: 8px; padding: 10px; }
.cn-sula-tie__team { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; padding: 4px 0; min-width: 0; }
.cn-sula-tie__team span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-sula-tie__team.is-winner { color: var(--sula-text); }
.cn-sula-tie__team:not(.is-winner) { color: var(--sula-muted); }
.cn-sula-tie__score { font-weight: 800; flex-shrink: 0; }
.cn-sula-tie__meta { font-size: 10px; color: var(--sula-muted); margin: 4px 0 0; }

/* Final highlight */
.cn-sula-final { margin-top: 20px; padding: 24px; border-radius: 12px; text-align: center; background: linear-gradient(160deg, var(--sula-primary-dark), var(--sula-primary-deep)); border: 1px solid rgba(217,169,40,0.3); }
.cn-sula-final__eyebrow { color: #d9a928; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; margin: 0 0 8px; }
.cn-sula-final__meta { color: #a9bfe0; font-size: 12px; margin: 0 0 6px; }
.cn-sula-final .cn-sula-matchup__team span { color: #ffffff; }
.cn-sula-final .cn-sula-matchup__score { color: #ffffff; }
.cn-sula-final__champion { margin-top: 14px; font-size: 15px; color: #ffffff; }

/* Standings */
.cn-sula-filters--groups { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
.cn-sula-table-scroll { overflow-x: auto; }
.cn-sula-table { font-size: 13px; min-width: 480px; }
.cn-sula-table th, .cn-sula-table td { padding: 9px 8px; text-align: center; border-bottom: 1px solid var(--sula-border); white-space: nowrap; }
.cn-sula-table th { color: var(--sula-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.cn-sula-table td:nth-child(2), .cn-sula-table th:nth-child(2) { text-align: left; }
.cn-sula-table__club { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.cn-sula-table--compact { min-width: 0; }
.cn-sula-table--compact td, .cn-sula-table--compact th { padding: 8px 6px; }
.cn-sula-zone-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.cn-sula-zone-dot.is-classified { background: var(--sula-success); }
.cn-sula-zone-dot.is-eliminated { background: var(--sula-danger); }
.cn-sula-legend { margin-top: 12px; font-size: 12px; color: var(--sula-muted); display: flex; gap: 16px; flex-wrap: wrap; }

/* Scorers */
.cn-sula-scorers-layout { display: grid; grid-template-columns: 160px 1fr; gap: 20px; align-items: start; }
.cn-sula-scorer-leader { text-align: center; background: var(--sula-page); border-radius: 10px; padding: 18px 10px; }
.cn-sula-scorer-leader__rank { font-size: 12px; color: var(--sula-gold); font-weight: 800; margin: 0 0 6px; }
.cn-sula-scorer-leader__name { font-size: 14px; font-weight: 800; color: var(--sula-text); margin: 4px 0 2px; }
.cn-sula-scorer-leader__team { font-size: 11px; color: var(--sula-muted); margin: 0 0 8px; }
.cn-sula-scorer-leader__goals { font-size: 13px; font-weight: 800; color: var(--sula-gold); margin: 0; }

/* Brazilians — horizontal carousel, own full-width section below Mata-mata */
.cn-sula-brazilians-scroller { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
.cn-sula-brazilian-card { position: relative; flex: 0 0 170px; scroll-snap-align: start; background: var(--sula-page); border: 1px solid var(--sula-border); border-radius: 10px; padding: 16px 14px 14px; text-align: center; }
.cn-sula-brazilian-card__name { font-size: 12px; font-weight: 800; color: var(--sula-text); margin: 4px 0; }
.cn-sula-brazilian-card__campaign { font-size: 11px; color: var(--sula-muted); margin: 6px 0 4px; }
.cn-sula-brazilian-card__next { font-size: 11px; color: var(--sula-primary); margin: 6px 0 0; }
.cn-sula-favorite { position: absolute; top: 8px; right: 8px; background: transparent; border: none; padding: 4px; color: var(--sula-muted); }
.cn-sula-favorite__icon { font-size: 16px; }
.cn-sula-favorite[aria-pressed="true"] { color: var(--sula-gold); }
.cn-sula-favorite[aria-pressed="true"] .cn-sula-favorite__icon::before { content: "★"; }
.cn-sula-progress { height: 4px; border-radius: 999px; background: var(--sula-border); overflow: hidden; margin-top: 6px; }
.cn-sula-progress__fill { display: block; height: 100%; background: var(--sula-primary); }
.cn-sula-form { margin: 6px 0; letter-spacing: 3px; }
.cn-sula-form__dot { font-size: 9px; }
.cn-sula-form__dot.is-v { color: var(--sula-success); }
.cn-sula-form__dot.is-e { color: var(--sula-warning); }
.cn-sula-form__dot.is-d { color: var(--sula-danger); }
.cn-sula-brazilian-card--favorite { border-color: var(--sula-gold); }

/* Numbers */
.cn-sula-numbers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cn-sula-number { text-align: center; padding: 12px; }
.cn-sula-number__icon { font-size: 20px; display: block; }
.cn-sula-number__value { display: block; font-size: 22px; font-weight: 900; color: var(--sula-text); }
.cn-sula-number__label { display: block; font-size: 10px; color: var(--sula-muted); font-weight: 700; letter-spacing: 0.04em; }

/* Radar (Momento da competição) */
.cn-sula-radar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.cn-sula-radar-item { background: var(--sula-page); border: 1px solid var(--sula-border); border-radius: 10px; padding: 14px; }
.cn-sula-radar-item__icon { font-size: 18px; display: block; margin-bottom: 6px; }
.cn-sula-radar-item__label { display: block; font-size: 10px; color: var(--sula-muted); font-weight: 700; letter-spacing: 0.04em; margin-bottom: 4px; }
.cn-sula-radar-item__value { display: block; font-size: 14px; font-weight: 800; color: var(--sula-text); }
.cn-sula-radar-item__meta { display: block; font-size: 11px; color: var(--sula-muted); margin-top: 2px; }

/* Champions wall */
.cn-sula-wall-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.cn-sula-wall-item { text-align: center; }
.cn-sula-wall-item__year { font-size: 13px; font-weight: 800; color: var(--sula-gold); margin: 0 0 6px; }
.cn-sula-wall-item__team { font-size: 11px; font-weight: 700; color: var(--sula-text); margin: 4px 0 0; }

/* Bars (titles by country) */
.cn-sula-bars { display: flex; flex-direction: column; gap: 10px; }
.cn-sula-bar-row { display: grid; grid-template-columns: 90px 1fr 30px; align-items: center; gap: 10px; font-size: 12px; }
.cn-sula-bar-row__label { color: var(--sula-text); font-weight: 600; }
.cn-sula-bar-row__track { height: 10px; background: var(--sula-page); border-radius: 999px; overflow: hidden; }
.cn-sula-bar-row__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--sula-primary), var(--sula-gold)); }
.cn-sula-bar-row__value { text-align: right; font-weight: 700; color: var(--sula-muted); }

/* Finals */
.cn-sula-finals-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cn-sula-finals-list li { display: grid; grid-template-columns: 50px 1fr auto 1fr; gap: 10px; align-items: center; font-size: 12px; padding: 8px 0; border-bottom: 1px solid var(--sula-border); }
.cn-sula-finals-list li > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-sula-finals-list__year { color: var(--sula-muted); font-weight: 700; }
.cn-sula-finals-list__champion { font-weight: 800; color: var(--sula-text); }
.cn-sula-finals-list__score { color: var(--sula-gold); font-weight: 700; text-align: center; }
.cn-sula-finals-list__runnerup { color: var(--sula-muted); text-align: right; }

/* News */
.cn-sula-news-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cn-sula-news-item { background: var(--sula-page); border-radius: 10px; overflow: hidden; border: 1px solid var(--sula-border); }
.cn-sula-news-item__image { aspect-ratio: 16/10; overflow: hidden; }
.cn-sula-news-item__image img { width: 100%; height: 100%; object-fit: cover; }
.cn-sula-news-item__body { padding: 12px; }
.cn-sula-news-item__title { font-size: 13px; font-weight: 700; color: var(--sula-text); margin: 6px 0; line-height: 1.3; }
.cn-sula-news-item__excerpt { font-size: 12px; color: var(--sula-muted); margin: 0 0 8px; line-height: 1.5; }
.cn-sula-news-item__date { font-size: 11px; color: var(--sula-muted); }

/* Editorial */
.cn-sula-editorial { background: var(--sula-surface); border: 1px solid var(--sula-border); border-radius: 12px; padding: 28px; }
.cn-sula-editorial__content h2 { font-size: 19px; color: var(--sula-text); margin: 24px 0 10px; }
.cn-sula-editorial__content h2:first-child { margin-top: 0; }
.cn-sula-editorial__content p { font-size: 14px; color: var(--sula-text); opacity: 0.92; line-height: 1.7; margin: 0 0 12px; }
.cn-sula-editorial__content a { color: var(--sula-primary); text-decoration: underline; }

/* Campaign detail (reused inside the match/campaign modal) */
.cn-sula-my-team__campaign { list-style: none; display: flex; gap: 14px; padding: 0; margin: 10px 0 0; font-size: 12px; color: var(--sula-muted); flex-wrap: wrap; }
.cn-sula-my-team__campaign strong { display: block; font-size: 16px; color: var(--sula-text); }
.cn-sula-my-team__next-label { font-size: 12px; color: var(--sula-muted); margin: 14px 0 2px; }
.cn-sula-my-team__next { font-size: 13px; font-weight: 700; color: var(--sula-text); margin: 0; }

/* Match detail modal (progressive enhancement over the card's own summary data) */
.cn-sula-modal-backdrop { position: fixed; inset: 0; background: rgba(4,20,45,0.6); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.cn-sula-modal-backdrop[hidden] { display: none; }
.cn-sula-modal { background: var(--sula-surface); border-radius: 14px; max-width: 420px; width: 100%; padding: 22px; position: relative; max-height: 85vh; overflow-y: auto; }
.cn-sula-modal__close { position: absolute; top: 12px; right: 12px; background: transparent; border: none; font-size: 20px; line-height: 1; color: var(--sula-muted); padding: 6px; }
.cn-sula-modal__stage { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; color: var(--sula-gold); margin: 0 0 4px; text-transform: uppercase; }
.cn-sula-modal__status { font-size: 12px; font-weight: 700; color: var(--sula-muted); margin: 0 0 14px; }

/* Focus visibility (accessibility) */
.cn-sula a:focus-visible, .cn-sula button:focus-visible, .cn-sula select:focus-visible {
	outline: 2px solid var(--sula-gold); outline-offset: 2px;
}

/* Skeleton (season/group switch loading state) */
.cn-sula-skeleton { position: relative; overflow: hidden; background: var(--sula-page); border-radius: 8px; }
.cn-sula-skeleton::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
	animation: cn-sula-shimmer 1.3s infinite;
}
@keyframes cn-sula-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.cn-sula-status__dot, .cn-sula-live-dot, .cn-sula-skeleton::after { animation: none; }
}

/* ---------- Responsive (mobile-first cascade downward) ---------- */
@media (max-width: 1200px) {
	.cn-sula-news-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
	.cn-sula-duo, .cn-sula-quad { grid-template-columns: 1fr; }
	.cn-sula-wall-grid { grid-template-columns: repeat(3, 1fr); }
	.cn-sula-scorers-layout { grid-template-columns: 1fr; }
	.cn-sula-scorer-leader { max-width: 220px; margin: 0 auto; }
}
@media (max-width: 768px) {
	.cn-sula-numbers-grid { grid-template-columns: repeat(2, 1fr); }
	.cn-sula-hero__indicators { grid-template-columns: repeat(2, 1fr); }
	.cn-sula-news-grid { grid-template-columns: repeat(2, 1fr); }
	.cn-sula-wall-grid { grid-template-columns: repeat(3, 1fr); }
	.cn-sula-bracket-tabs { overflow-x: auto; flex-wrap: nowrap; }
	.cn-sula-bracket__ties { grid-template-columns: 1fr; }
	.cn-sula-hero__inner { flex-direction: column; align-items: stretch; }
}
@media (max-width: 480px) {
	.cn-sula-hero { padding: 40px 16px 28px; }
	.cn-sula-hero__indicators { grid-template-columns: 1fr 1fr; }
	.cn-sula-container { padding: 18px 14px 40px; }
	.cn-sula-news-grid { grid-template-columns: 1fr; }
	.cn-sula-numbers-grid { grid-template-columns: 1fr 1fr; }
	.cn-sula-wall-grid { grid-template-columns: repeat(2, 1fr); }
	.cn-sula-finals-list li { grid-template-columns: 40px 1fr; row-gap: 2px; }
	.cn-sula-finals-list__score, .cn-sula-finals-list__runnerup { grid-column: 2; text-align: left; }
}