/**
 * Tip pages: clickable tip cards (stretched link) + the single-tip layout
 * (full-width hero + main/sidebar) + per-tip chat. Uses the theme --tp-* tokens.
 */

/* --- Clickable tip cards (stretched link) ------------------------------- */
.tp-tip-card,
.tp-tips-list__row,
.tp-page-browser__row,
.tp-page-browser__card {
	position: relative;
}
.tp-tip-card__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
.tp-tip-card:hover,
.tp-tips-list__row:hover,
.tp-page-browser__row:hover,
.tp-page-browser__card:hover {
	border-color: var(--tp-primary);
	cursor: pointer;
}
.tp-tip-card a:not(.tp-tip-card__link),
.tp-tip-card button,
.tp-tips-list__row a:not(.tp-tip-card__link),
.tp-page-browser__row a:not(.tp-tip-card__link),
.tp-page-browser__card a:not(.tp-tip-card__link),
.tp-page-browser__card button {
	position: relative;
	z-index: 2;
}

/* Clickable settled-result rows (recent-results stretched link; results-archive
   links the match cell since a table row can't be wrapped in an anchor). */
.tp-recent-results__item { position: relative; cursor: pointer; }
.tp-results-archive__match-link { color: inherit; text-decoration: none; }
.tp-results-archive__match-link:hover { color: var(--tp-primary, #10b981); text-decoration: underline; }

/* === Single-tip "match centre" (Prediktos design handoff) ================ *
 * Scoped dark tokens so the page matches the handoff regardless of the global
 * light/dark mode, then a card-based layout: hero + main column + sidebar.    */
.tp-single-tip-wrap { width: 100%; }
.tp-single-tip {
	--c-card: #141b24;
	--c-card2: #0e141d;
	--c-bd: rgba(255, 255, 255, 0.07);
	--c-bd2: rgba(255, 255, 255, 0.1);
	--c-fg: #f8fafc;
	--c-fg2: #cbd5e1;
	--c-mut: #94a3b8;
	--c-mut2: #64748b;
	--c-faint: #475569;
	--c-grn: #10b981;
	--c-grn2: #34d399;
	--c-amb: #f59e0b;
	--c-amb2: #fbbf24;
	--c-red: #f87171;
	--c-idg: #a5b4fc;
	--c-odds: #f5f7fa;
	max-width: 1200px;
	margin: 0 auto;
	padding: 1.75rem 1.25rem 4rem;
	color: var(--c-fg2);
	font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}
.tp-single-tip *,
.tp-single-tip *::before,
.tp-single-tip *::after { box-sizing: border-box; }

/* Light mode — flip the scoped tokens so the page matches the rest of the site
   when the light theme is active (html.tipsterpro-light). Greens used as text
   are darkened for contrast on white; greens used as button backgrounds stay
   bright (with dark text). */
.tipsterpro-light .tp-single-tip {
	--c-card: #ffffff;
	--c-card2: #f1f5f9;
	--c-bd: rgba(0, 0, 0, 0.08);
	--c-bd2: rgba(0, 0, 0, 0.12);
	--c-fg: #0f172a;
	--c-fg2: #334155;
	--c-mut: #64748b;
	--c-mut2: #94a3b8;
	--c-faint: #94a3b8;
	--c-grn: #10b981;
	--c-grn2: #047857;
	--c-amb: #b45309;
	--c-amb2: #a16207;
	--c-red: #dc2626;
	--c-idg: #4f46e5;
	--c-odds: #0f172a;
}
.tipsterpro-light .tp-single-tip .tp-hero {
	background: linear-gradient(160deg, #ffffff 0%, #eef2f7 100%);
}
.tipsterpro-light .tp-single-tip .tp-hero__logo--ph {
	background: linear-gradient(135deg, #eef2f7, #e2e8f0);
}

/* Breadcrumb */
.tp-crumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0.8rem;
	color: var(--c-mut2);
	margin-bottom: 1rem;
}
.tp-crumb a { color: var(--c-mut); text-decoration: none; }
.tp-crumb a:hover { color: var(--c-grn2); }
.tp-crumb__current { color: var(--c-grn2); font-weight: 600; }

/* Shared card + kicker */
.tp-single-tip .tp-card {
	background: var(--c-card);
	border: 1px solid var(--c-bd);
	border-radius: 16px;
	padding: 1.4rem;
}
.tp-single-tip .tp-card__kicker {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--c-grn2);
	margin-bottom: 1rem;
}

/* Buttons + lock */
.tp-single-tip .tp-btn {
	display: inline-block;
	padding: 0.7rem 1.3rem;
	border-radius: 11px;
	font-weight: 800;
	font-size: 0.875rem;
	text-decoration: none;
	cursor: pointer;
	border: 0;
}
.tp-single-tip .tp-btn--amber { background: var(--c-amb); color: #0b0e16; }
.tp-single-tip .tp-btn--amber:hover { background: var(--c-amb2); color: #0b0e16; }
.tp-single-tip .tp-btn--green { background: var(--c-grn); color: #0b0e16; }
.tp-single-tip .tp-btn--green:hover { background: var(--c-grn2); color: #0b0e16; }

.tp-lock {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.8rem;
	text-align: center;
	padding: 1.5rem 1rem;
}
.tp-lock__icon {
	width: 52px; height: 52px;
	display: grid; place-items: center;
	font-size: 24px;
	border-radius: 14px;
	background: rgba(245, 158, 11, 0.15);
	border: 1px solid rgba(245, 158, 11, 0.35);
}
.tp-lock__title { font-size: 1.15rem; font-weight: 800; color: var(--c-fg); }
.tp-lock__sub { font-size: 0.85rem; color: var(--c-mut); max-width: 320px; line-height: 1.5; }
.tp-single-tip .tp-muted { color: var(--c-mut); font-style: italic; }

/* --- Hero --------------------------------------------------------------- */
.tp-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, #121a2a 0%, #0d1320 60%, #0b0e16 100%);
	border: 1px solid var(--c-bd);
	border-radius: 20px;
	padding: 1.9rem 1.75rem;
	margin-bottom: 1.5rem;
	text-align: center;
}
.tp-hero__glow { position: absolute; pointer-events: none; border-radius: 50%; }
.tp-hero__glow--a { top: -80px; right: -60px; width: 340px; height: 340px; background: radial-gradient(circle, rgba(16,185,129,0.15), transparent 65%); }
.tp-hero__glow--b { bottom: -60px; left: -40px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(99,102,241,0.08), transparent 65%); }

.tp-hero__meta {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: 0.55rem;
}
.tp-hero__league {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--c-mut);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
}
.tp-hero__vip {
	display: inline-flex;
	align-items: center;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--c-amb2);
	background: rgba(245, 158, 11, 0.12);
	border: 1px solid rgba(245, 158, 11, 0.3);
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	line-height: 1.2;
}
.tp-single-tip .tp-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	line-height: 1.2;
}
.tp-single-tip .tp-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tp-single-tip .tp-badge--pending { color: var(--c-amb2); background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.3); }
.tp-single-tip .tp-badge--won { color: var(--c-grn2); background: rgba(16, 185, 129, 0.13); border: 1px solid rgba(16, 185, 129, 0.3); }
.tp-single-tip .tp-badge--lost { color: var(--c-red); background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.3); }
.tp-single-tip .tp-badge__score { font-weight: 800; font-variant-numeric: tabular-nums; }

.tp-hero__when {
	position: relative;
	font-size: 0.85rem;
	color: var(--c-mut);
	font-weight: 600;
	margin-bottom: 1.5rem;
}
.tp-hero__venue { color: var(--c-mut2); }

.tp-hero__matchup {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: start;
	gap: 1.25rem;
	margin-bottom: 1.6rem;
}
.tp-hero__pole { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; }
.tp-hero__logo {
	width: 72px; height: 72px;
	object-fit: contain;
	border-radius: 16px;
}
.tp-hero__logo--ph {
	display: grid; place-items: center;
	background: linear-gradient(135deg, #1a2640, #0f1726);
	border: 1px solid var(--c-bd2);
	font-weight: 800;
	font-size: 1.1rem;
}
.tp-hero__team { font-size: 1.15rem; font-weight: 800; color: var(--c-fg); line-height: 1.2; }
.tp-hero__side {
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--c-mut2);
	background: rgba(255, 255, 255, 0.04);
	padding: 0.15rem 0.55rem;
	border-radius: 6px;
}
.tp-hero__center { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding-top: 1.4rem; }
.tp-hero__vs { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; color: var(--c-faint); }
.tp-hero__time { font-size: 0.85rem; font-weight: 600; color: var(--c-mut2); }

/* Tipster's pick box */
.tp-pick {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	flex-wrap: wrap;
	text-align: left;
	background: rgba(16, 185, 129, 0.08);
	border: 1px solid rgba(16, 185, 129, 0.22);
	border-radius: 16px;
	padding: 1.2rem 1.35rem;
}
.tp-pick__main { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.tp-pick__label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--c-grn2); }
.tp-pick__odds-wrap .tp-pick__label { color: var(--c-mut); }
.tp-pick__value { font-size: 1.55rem; font-weight: 800; color: var(--c-fg); line-height: 1.1; }
.tp-pick__conf { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.15rem; }
.tp-pick__conf-label { font-size: 0.8rem; font-weight: 600; color: var(--c-mut); }
.tp-pick__conf-text { font-size: 0.8rem; font-weight: 700; color: var(--c-grn2); }
.tp-bars { display: inline-flex; gap: 4px; }
.tp-bars__seg { width: 20px; height: 7px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); }
.tp-bars__seg.is-on { background: var(--c-grn2); }
.tp-pick__odds-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; }
.tp-pick__odds-block { display: flex; flex-direction: column; }
.tp-pick__odds { font-size: 2.5rem; font-weight: 800; color: var(--c-odds); line-height: 1; font-variant-numeric: tabular-nums; }
/* Odds → bookmaker attribution / affiliate link next to the odds. */
.tp-pick__book { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.15rem; font-size: 0.72rem; font-weight: 700; text-decoration: none; padding: 0.2rem 0.55rem; border-radius: 999px; }
a.tp-pick__book { color: var(--c-grn2); background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.28); transition: background 0.15s ease; }
a.tp-pick__book:hover { background: rgba(16, 185, 129, 0.2); }
.tp-pick__book--plain { color: var(--c-mut2); font-weight: 600; padding-left: 0; padding-right: 0; }

/* --- Sidebar 1X2 odds comparison (Flashscore-style) ------------------- */
.tp-oddscompare__head,
.tp-oddscompare__row { display: grid; grid-template-columns: 1fr 3rem 3rem 3rem; align-items: center; gap: 0.4rem; }
.tp-oddscompare__head { padding: 0 0 0.4rem; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-mut2); }
.tp-oddscompare__head span:not(.tp-oddscompare__book-h) { text-align: center; }
.tp-oddscompare__row { padding: 0.45rem 0; border-top: 1px solid var(--c-bd); text-decoration: none; color: var(--c-fg2); }
.tp-oddscompare__row--link { transition: background 0.15s ease; border-radius: 8px; }
.tp-oddscompare__row--link:hover { background: rgba(16, 185, 129, 0.08); }
.tp-oddscompare__book { display: flex; align-items: center; min-width: 0; }
.tp-oddscompare__logo { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 0.5rem; border-radius: 6px; max-width: 100%; }
.tp-oddscompare__logo img { max-height: 20px; max-width: 84px; width: auto; object-fit: contain; display: block; }
.tp-oddscompare__book-name.tp-oddscompare__logo { color: #fff; font-size: 0.74rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-oddscompare__odd { text-align: center; font-size: 0.85rem; font-weight: 800; color: var(--c-fg); }
.tp-oddscompare__row--link .tp-oddscompare__odd { color: var(--c-odds); }
.tp-oddscompare__note { margin: 0.7rem 0 0; font-size: 0.66rem; color: var(--c-mut2); }
.tp-pick__tipster { display: inline-flex; align-items: center; gap: 0.5rem; }
.tp-pick__tipster-name { display: block; font-size: 0.78rem; font-weight: 700; color: var(--c-idg); }
.tp-pick__tipster-stat { display: block; font-size: 0.7rem; color: var(--c-mut2); }
.tp-pick--locked { background: rgba(245, 158, 11, 0.06); border-color: rgba(245, 158, 11, 0.25); }
.tp-pick--locked .tp-pick__label { color: var(--c-mut); }

/* Avatar chip */
.tp-avatar {
	display: inline-grid;
	place-items: center;
	border-radius: 50%;
	color: #fff;
	font-weight: 800;
	flex: none;
	object-fit: cover;
}
.tp-avatar--sm { width: 28px; height: 28px; font-size: 0.7rem; }
.tp-avatar--lg { width: 44px; height: 44px; font-size: 0.95rem; }

/* --- Body grid ---------------------------------------------------------- */
.tp-single-tip__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 1.5rem;
	align-items: start;
}
.tp-single-tip__main { min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.tp-single-tip__sidebar { min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 1.5rem; }

/* --- Analysis ----------------------------------------------------------- */
.tp-single-tip .tp-analysis { color: var(--c-fg2); display: flex; flex-direction: column; align-items: flex-start; margin-top: 0; }
.tp-single-tip .tp-analysis p { margin: 0 0 0.9rem; color: var(--c-fg2); }
.tp-single-tip .tp-analysis h1 { font-size: 1.35rem; font-weight: 800; line-height: 1.25; color: var(--c-fg); margin: 0 0 0.9rem; }
.tp-single-tip .tp-analysis h2 { font-size: 1.1rem; font-weight: 700; color: var(--c-fg); margin: 1.3rem 0 0.6rem; }
.tp-single-tip .tp-analysis a { color: var(--c-grn2); }
.tp-single-tip .tp-analysis > h1, .tp-single-tip .tp-analysis > h2, .tp-single-tip .tp-analysis > p { width: 100%; }

/* Tipster attribution, moved out of the pick box to the analysis card foot. */
.tp-analysis__tipster {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--c-bd);
}
.tp-analysis__tipster-text { display: flex; flex-direction: column; line-height: 1.3; }
.tp-analysis__tipster-by { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-mut2); }
.tp-analysis__tipster-name { font-size: 0.82rem; font-weight: 700; color: var(--c-idg); }
a.tp-analysis__tipster-name { text-decoration: none; }
a.tp-analysis__tipster-name:hover { color: var(--c-grn2); text-decoration: underline; }
.tp-analysis__tipster-stat { font-size: 0.7rem; color: var(--c-mut2); }

/* --- Match data --------------------------------------------------------- */
.tp-matchdata { display: flex; flex-direction: column; gap: 1.5rem; }
.tp-matchdata__source {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--c-faint);
}
.tp-matchdata__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-grn2); }

/* W/D/L pill — own class (`.tp-pill` is a different shared component elsewhere). */
.tp-wdl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 0.35rem;
	border-radius: 6px;
	font-size: 0.7rem;
	font-weight: 800;
}
.tp-wdl--win { background: rgba(16, 185, 129, 0.18); color: var(--c-grn2); border: 1px solid rgba(16, 185, 129, 0.35); }
.tp-wdl--draw { background: rgba(100, 116, 139, 0.18); color: var(--c-mut); border: 1px solid rgba(100, 116, 139, 0.35); }
.tp-wdl--loss { background: rgba(239, 68, 68, 0.15); color: var(--c-red); border: 1px solid rgba(239, 68, 68, 0.3); }
.tp-form { display: inline-flex; gap: 5px; }
.tp-form__empty { color: var(--c-mut2); }

/* League table — the team-name column can't shrink below its content in a
   plain <table>, so on narrow screens it's wrapped to scroll horizontally
   inside the card instead of silently overflowing/clipping under the site's
   overflow-x:hidden container. */
.tp-mtable__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -0.1rem; padding: 0 0.1rem; }
.tp-mtable__table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.tp-mtable__table thead th {
	font-size: 0.74rem;
	font-weight: 600;
	color: var(--c-mut);
	text-align: center;
	padding: 0 0.45rem 0.6rem;
	border-bottom: 1px solid var(--c-bd);
}
.tp-mtable__table tbody td { text-align: center; padding: 0.55rem 0.45rem; color: var(--c-mut2); border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.tp-mtable__table tbody tr:last-child td { border-bottom: 0; }
.tp-mtable__pos { width: 1%; font-weight: 800; color: var(--c-mut) !important; }
.tp-mtable__pts { font-weight: 800; color: var(--c-fg) !important; }
.tp-mtable__team { text-align: left !important; }
.tp-mtable__team { display: flex; align-items: center; gap: 0.5rem; }
.tp-mtable__tla {
	display: inline-grid; place-items: center;
	width: 26px; height: 26px; flex: none;
	background: var(--c-card2);
	border: 1px solid var(--c-bd);
	border-radius: 7px;
	font-size: 0.62rem; font-weight: 800; color: var(--c-mut);
}
.tp-mtable__name { font-weight: 600; color: var(--c-fg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-mtable__flag { color: var(--c-grn2); font-size: 0.65rem; }
.tp-mtable__table tbody tr.is-highlight td { background: rgba(16, 185, 129, 0.07); }
.tp-mtable__table tbody tr.is-highlight .tp-mtable__name { color: var(--c-fg); font-weight: 700; }
.tp-mtable__table tbody tr.is-highlight .tp-mtable__pos { color: var(--c-grn2) !important; }

/* Recent form */
.tp-form-block { display: flex; flex-direction: column; gap: 1.25rem; }
.tp-form-team__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.7rem; }
.tp-form-team__name { font-size: 0.9rem; font-weight: 700; color: var(--c-fg); }
.tp-form-team__list { display: flex; flex-direction: column; gap: 0.35rem; }
/* Fixed columns so result / opponent / score / date line up vertically across
   every row (and across the home + away lists). Scoped under .tp-single-tip so
   the rules out-specify GeneratePress defaults without needing !important. */
.tp-single-tip .tp-form-row {
	display: grid;
	grid-template-columns: 1.5rem minmax(0, 1fr) 3rem 2.7rem;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.78rem;
	padding: 0.4rem 0.55rem;
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.02);
}
.tp-single-tip .tp-form-row__r { font-weight: 800; text-align: center; }
.tp-single-tip .tp-form-row__r--w { color: var(--c-grn2); }
.tp-single-tip .tp-form-row__r--d { color: var(--c-mut); }
.tp-single-tip .tp-form-row__r--l { color: var(--c-red); }
.tp-single-tip .tp-form-row__opp { color: var(--c-mut); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tp-single-tip .tp-form-row__score { font-weight: 700; color: var(--c-fg2); font-variant-numeric: tabular-nums; text-align: center; }
.tp-single-tip .tp-form-row__date { color: var(--c-faint); text-align: right; }

/* Goals trend */
.tp-goals { display: flex; flex-direction: column; gap: 1.25rem; }
.tp-goals-team__name { font-size: 0.9rem; font-weight: 700; color: var(--c-fg); margin-bottom: 0.8rem; }
.tp-goals-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tp-goals-col__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.tp-goals-col__label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.tp-goals-col__label--scored, .tp-goals-col__avg--scored { color: var(--c-grn2); }
.tp-goals-col__label--conceded, .tp-goals-col__avg--conceded { color: var(--c-red); }
.tp-goals-col__avg { font-size: 0.8rem; font-weight: 800; }
.tp-goals-bars { display: flex; align-items: flex-end; gap: 5px; height: 48px; }
.tp-goals-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tp-goals-bar__v { font-size: 0.62rem; font-weight: 700; color: var(--c-mut2); }
.tp-goals-bar__fill { width: 100%; border-radius: 4px 4px 0 0; }
.tp-goals-bar__fill--scored { background: linear-gradient(to top, #10b981, #34d399); }
.tp-goals-bar__fill--conceded { background: linear-gradient(to top, #ef4444, #f87171); }

/* Head-to-head */
.tp-h2h__totals { display: flex; gap: 0.6rem; margin-bottom: 1.1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--c-bd); }
.tp-h2h__stat { flex: 1; min-width: 0; text-align: center; background: var(--c-card2); border: 1px solid var(--c-bd); border-radius: 12px; padding: 0.75rem 0.4rem; transition: border-color 0.2s ease; }
/* Tint each total cell by its role so wins/losses read at a glance (the colour
   lives on the .tp-h2h__val child; :has lets the cell pick it up, with a clean
   neutral fallback on browsers without :has support). */
.tp-h2h__stat:has(.tp-h2h__val--win) { background: var(--tp-win-bg, rgba(34, 197, 94, 0.10)); border-color: var(--tp-win-border, rgba(34, 197, 94, 0.30)); }
.tp-h2h__stat:has(.tp-h2h__val--loss) { background: var(--tp-loss-bg, rgba(244, 63, 94, 0.10)); border-color: var(--tp-loss-border, rgba(244, 63, 94, 0.30)); }
.tp-h2h__val { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.tp-h2h__val--win { color: var(--c-grn2); }
.tp-h2h__val--draw { color: var(--c-fg2); }
.tp-h2h__val--loss { color: var(--c-red); }
.tp-h2h__lbl { display: block; font-size: 0.68rem; font-weight: 600; color: var(--c-mut); margin-top: 0.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-h2h__list { display: flex; flex-direction: column; gap: 0.5rem; }
.tp-h2h-row {
	display: grid;
	grid-template-columns: 64px 1fr auto 1fr auto;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem 0.7rem;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--c-bd);
	font-size: 0.78rem;
}
.tp-h2h-row__date { color: var(--c-faint); }
.tp-h2h-row__home { text-align: right; font-weight: 700; color: var(--c-fg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-h2h-row__away { font-weight: 700; color: var(--c-fg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-h2h-row__score { font-size: 0.9rem; font-weight: 800; color: var(--c-fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tp-h2h-row__pill { font-size: 0.66rem; }
.tp-h2h__note { margin: 0.9rem 0 0; font-size: 0.78rem; color: var(--c-mut2); }
.tp-h2h__note b { color: var(--c-grn2); }

/* Sidebar card heading (sportsbook) */
.tp-single-tip__card-heading {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--c-grn2);
	margin: 0 0 0.9rem;
}
.tp-sbx__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.tp-sbx__item { display: block; }
.tp-sbx__link {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: 0.9rem;
	background: var(--c-card2);
	border: 1px solid var(--c-bd);
	border-radius: 14px;
	text-decoration: none;
	transition: border-color 0.2s ease;
}
.tp-sbx__link:hover { border-color: rgba(16, 185, 129, 0.4); }
.tp-sbx__top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.tp-sbx__brand { display: inline-flex; align-items: center; gap: 0.55rem; min-width: 0; }
.tp-sbx__logo {
	width: 34px;
	height: 34px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 9px;
	overflow: hidden;
	color: #fff;
	font-weight: 800;
	font-size: 0.9rem;
}
.tp-sbx__logo img { width: 30px; height: 30px; object-fit: contain; }
.tp-sbx__name { font-weight: 800; color: var(--c-fg); font-size: 0.95rem; display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-sbx__promoted { color: var(--c-amb2); font-size: 0.75rem; }
.tp-sbx__rating {
	flex: none;
	font-size: 0.8rem;
	font-weight: 800;
	color: var(--c-grn2);
	background: rgba(16, 185, 129, 0.13);
	border: 1px solid rgba(16, 185, 129, 0.3);
	border-radius: 8px;
	padding: 0.2rem 0.5rem;
}
.tp-sbx__bonus { font-size: 0.8rem; color: var(--c-mut); line-height: 1.45; }
.tp-sbx__cta {
	display: block;
	text-align: center;
	background: var(--c-grn);
	color: #0b0e16;
	font-weight: 800;
	font-size: 0.85rem;
	padding: 0.65rem;
	border-radius: 10px;
}
.tp-sbx__link:hover .tp-sbx__cta { background: var(--c-grn2); }
.tp-sbx__tc { font-size: 0.66rem; color: var(--c-faint); text-align: center; }
.tp-sbx__disclaimer { margin: 0.9rem 0 0; font-size: 0.68rem; color: var(--c-faint); display: flex; gap: 0.4rem; align-items: flex-start; }

/* --- Per-tip chat (sidebar) -------------------------------------------- */
.tp-tip-chat {
	background: var(--c-card);
	border: 1px solid var(--c-bd);
	border-radius: 16px;
	padding: 1.4rem;
	display: flex;
	flex-direction: column;
}
.tp-single-tip__section-title { font-size: 1rem; font-weight: 800; color: var(--c-fg); margin: 0 0 1rem; }
.tp-tip-chat__login { color: var(--c-mut); font-size: 0.88rem; text-align: center; display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
.tp-tip-chat__messages {
	max-height: 360px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	margin-bottom: 1rem;
	padding-right: 0.25rem;
}
.tp-tip-chat__empty { color: var(--c-mut2); font-style: italic; font-size: 0.85rem; }
.tp-tip-chat__msg { display: flex; gap: 0.6rem; align-items: flex-start; }
.tp-tip-chat__avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; }
.tp-tip-chat__bubble { min-width: 0; }
.tp-tip-chat__meta { display: block; font-size: 0.72rem; color: var(--c-mut2); margin-bottom: 0.1rem; }
.tp-tip-chat__meta strong { color: var(--c-fg2); font-weight: 700; }
.tp-tip-chat__text { color: var(--c-mut); font-size: 0.85rem; line-height: 1.5; word-wrap: break-word; }
.tp-tip-chat__form { display: flex; gap: 0.5rem; align-items: stretch; padding-top: 1rem; border-top: 1px solid var(--c-bd); }
.tp-tip-chat__form textarea {
	flex: 1;
	min-width: 0;
	resize: none;
	background: var(--c-card2);
	color: var(--c-fg);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 10px;
	padding: 0.65rem 0.8rem;
	font-family: inherit;
	font-size: 0.85rem;
	line-height: 1.5;
}
.tp-tip-chat__form textarea:focus { outline: none; border-color: rgba(16, 185, 129, 0.5); }

/* Send / login button inside the dark cards */
.tp-single-tip__subscribe {
	display: inline-block;
	background: var(--c-grn);
	color: #0b0e16;
	font-weight: 800;
	font-size: 0.85rem;
	padding: 0.65rem 1.1rem;
	border: 0;
	border-radius: 10px;
	text-decoration: none;
	cursor: pointer;
	align-self: stretch;
}
.tp-single-tip__subscribe:hover { background: var(--c-grn2); color: #0b0e16; }

/* --- Taxonomy archive (sport / league) ---------------------------------- */
.tp-tax__head { margin-bottom: 1.5rem; }
.tp-tax__title { display: flex; align-items: center; gap: 0.6rem; font-size: 1.8rem; font-weight: 800; color: var(--c-fg); margin: 0.25rem 0 0.5rem; }
.tp-tax__icon { font-size: 1.6rem; }
.tp-tax__desc { color: var(--c-mut); max-width: 680px; line-height: 1.6; }
.tp-tax__content { color: var(--c-fg2); max-width: 760px; line-height: 1.65; margin-top: 0.9rem; }
.tp-tax__content h2, .tp-tax__content h3 { color: var(--c-fg); font-weight: 800; margin: 1.25rem 0 0.5rem; }
.tp-tax__content p { margin: 0 0 0.9rem; }
.tp-tax__content a { color: var(--c-grn2); }
.tp-tax__content img { max-width: 100%; height: auto; border-radius: 10px; }
.tp-tax__content ul, .tp-tax__content ol { margin: 0 0 0.9rem 1.25rem; }
.tp-tax__section-wrap { margin-top: 2rem; }
.tp-tax__section { font-size: 1.15rem; font-weight: 800; color: var(--c-fg); margin: 0 0 1rem; }
.tp-tax__empty { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; padding: 2.5rem 1rem; background: var(--c-card); border: 1px dashed var(--c-bd2); border-radius: 16px; color: var(--c-mut); }
.tp-tax__empty-icon { font-size: 1.8rem; }
.tp-tax__empty p { margin: 0; }

/* Two-column body: main tips/results + a contextual sidebar. */
.tp-tax__body--sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.75rem; align-items: start; }
.tp-tax__body--sidebar .tp-tax__main { min-width: 0; }
@media (max-width: 980px) { .tp-tax__body--sidebar { grid-template-columns: 1fr; } }
.tp-tax__aside { position: sticky; top: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }
.tp-single-tip .tp-tax-side { padding: 1.1rem 1.2rem; }
.tp-tax-side__list, .tp-tax-side__teams { list-style: none; margin: 0; padding: 0; }
.tp-tax-side__list li { border-top: 1px solid var(--c-bd); }
.tp-tax-side__list li:first-child { border-top: 0; }
.tp-tax-side__list a { display: block; padding: 0.5rem 0; color: var(--c-fg2); text-decoration: none; font-size: 0.88rem; font-weight: 600; transition: color 0.15s ease; }
.tp-tax-side__list a:hover { color: var(--c-grn2); }
.tp-tax-side__teams li { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0; border-top: 1px solid var(--c-bd); font-size: 0.85rem; }
.tp-tax-side__teams li:first-child { border-top: 0; }
.tp-tax-side__logo { width: 26px; height: 26px; border-radius: 6px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); overflow: hidden; }
.tp-tax-side__logo img { width: 100%; height: 100%; object-fit: contain; }
.tp-tax-side__name { flex: 1; min-width: 0; color: var(--c-fg2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-tax-side__count { flex: none; font-size: 0.7rem; font-weight: 800; color: var(--c-grn2); background: rgba(16,185,129,0.1); border-radius: 999px; padding: 0.1rem 0.45rem; }

/* --- More tips (sidebar) ------------------------------------------------ */
.tp-single-tip .tp-more__note { font-size: 0.8rem; color: var(--c-mut); margin: 0 0 0.75rem; line-height: 1.5; }
.tp-single-tip .tp-more__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
/* Row card, two columns: LEFT = teams / kickoff / pick@odds (the stretched row
   link), RIGHT = confidence pill + Add-to-Slip button (siblings above the
   overlay, z-index 2 — matches the button rule in bet-slip.php). */
.tp-single-tip .tp-more__item { position: relative; display: flex; align-items: stretch; justify-content: space-between; gap: 0.6rem; padding: 0.65rem 0.7rem; background: var(--c-card2); border: 1px solid var(--c-bd); border-radius: 10px; transition: border-color 0.2s ease; }
.tp-single-tip .tp-more__item:hover { border-color: rgba(16, 185, 129, 0.4); }
.tp-single-tip .tp-more__link { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.25rem; text-decoration: none; color: inherit; min-width: 0; }
.tp-single-tip .tp-more__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 10px; }
.tp-single-tip .tp-more__teams { display: block; font-size: 0.85rem; font-weight: 700; color: var(--c-fg); line-height: 1.35; overflow-wrap: anywhere; }
.tp-single-tip .tp-more__sport { display: inline-block; margin-right: 0.3rem; font-size: 0.85rem; line-height: 1; vertical-align: baseline; }
.tp-single-tip .tp-more__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.72rem; color: var(--c-mut2); }
.tp-single-tip .tp-more__league { color: var(--c-grn2); font-weight: 600; }
.tp-single-tip .tp-more__pick { display: block; font-size: 0.75rem; font-weight: 700; color: var(--c-grn2); line-height: 1.4; overflow-wrap: anywhere; }
.tp-single-tip .tp-more__odds { display: inline-block; margin-left: 0.3rem; color: var(--c-fg); font-weight: 700; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, 0.06); border-radius: 6px; padding: 0.1rem 0.35rem; font-size: 0.72rem; white-space: nowrap; }
.tp-single-tip .tp-more__side { position: relative; z-index: 2; flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 0.4rem; }
.tp-single-tip .tp-more__conf { flex: 0 0 auto; font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 999px; padding: 0.16rem 0.5rem; }
.tp-single-tip .tp-more__conf--high { color: var(--c-grn2); background: rgba(16, 185, 129, 0.14); }
.tp-single-tip .tp-more__conf--medium { color: var(--c-amb2); background: rgba(245, 158, 11, 0.14); }
.tp-single-tip .tp-more__conf--low { color: var(--c-red); background: rgba(248, 113, 113, 0.14); }

/* === Social login (login/register pages) + connected accounts =========== */
.tp-social-login { margin-top: 1.25rem; }
.tp-social-login__divider { display: flex; align-items: center; gap: 0.75rem; color: var(--tp-muted, #8a97a6); font-size: 0.78rem; margin-bottom: 0.9rem; }
.tp-social-login__divider::before,
.tp-social-login__divider::after { content: ""; flex: 1; height: 1px; background: var(--tp-border, rgba(255, 255, 255, 0.12)); }
.tp-social-login__buttons { display: flex; flex-direction: column; gap: 0.5rem; }
.tp-social-login__btn { display: flex; align-items: center; justify-content: center; gap: 0.55rem; width: 100%; padding: 0.65rem 1rem; border-radius: 10px; border: 1px solid var(--tp-border, rgba(255, 255, 255, 0.14)); background: rgba(255, 255, 255, 0.03); color: var(--tp-foreground, #eaf0f6); font-weight: 700; font-size: 0.88rem; text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease; }
.tp-social-login__btn:hover { border-color: var(--tp-primary, #10b981); background: rgba(255, 255, 255, 0.06); color: var(--tp-foreground, #eaf0f6); }
.tipsterpro-light .tp-social-login__btn { background: #ffffff; border-color: #e2e8f0; color: #0f172a; }
.tipsterpro-light .tp-social-login__btn:hover { border-color: var(--tp-primary, #10b981); color: #0f172a; }

.tp-connected { display: flex; flex-direction: column; gap: 0.5rem; }
.tp-connected__row { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border: 1px solid var(--tp-border, rgba(255, 255, 255, 0.1)); border-radius: 10px; }
.tp-connected__name { font-weight: 700; font-size: 0.88rem; min-width: 0; flex: 1; }
.tp-connected__state { font-size: 0.72rem; color: var(--tp-muted, #8a97a6); }
.tp-connected__state--on { color: var(--tp-primary, #34d399); font-weight: 700; }
.tp-connected__form { display: inline; margin: 0; }
.tp-connected__unlink { -webkit-appearance: none; appearance: none; background: none; border: 1px solid var(--tp-border, rgba(255, 255, 255, 0.14)); color: var(--tp-muted, #8a97a6); border-radius: 8px; padding: 0.3rem 0.7rem; font-family: inherit; font-size: 0.74rem; font-weight: 700; cursor: pointer; }
.tp-connected__unlink:hover { color: var(--tp-loss, #f43f5e); border-color: var(--tp-loss-border, rgba(244, 63, 94, 0.4)); }
.tp-connected__link { font-size: 0.78rem; font-weight: 700; color: var(--tp-primary, #10b981); text-decoration: none; border: 1px solid var(--tp-primary, #10b981); border-radius: 8px; padding: 0.3rem 0.7rem; }
.tp-connected__link:hover { background: rgba(16, 185, 129, 0.1); color: var(--tp-primary, #10b981); }
.tp-connected__notice { font-size: 0.82rem; color: var(--tp-primary, #34d399); margin: 0 0 0.6rem; }
.tp-connected__hint { font-size: 0.74rem; color: var(--tp-muted, #8a97a6); margin: 0.7rem 0 0; }

/* === Tipster public profile (author archive) ============================= */
.tp-tipster__head .tp-avatar--lg { width: 72px; height: 72px; font-size: 1.4rem; }
.tp-tipster__verified { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.66rem; font-weight: 800; color: #34d399; background: rgba(16, 185, 129, 0.14); border-radius: 999px; padding: 0.22rem 0.55rem; vertical-align: middle; }
.tp-tipster__band { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; margin: 1rem 0 1.25rem; }
@media (max-width: 720px) { .tp-tipster__band { grid-template-columns: repeat(3, 1fr); } }
.tp-tipster__stat { background: var(--tp-card, #141b24); border: 1px solid var(--tp-border, rgba(255, 255, 255, 0.08)); border-radius: 12px; padding: 0.75rem 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.tp-tipster__num { font-size: 1.15rem; font-weight: 800; color: var(--tp-foreground, #eaf0f6); font-variant-numeric: tabular-nums; }
.tp-tipster__lbl { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tp-muted, #8a97a6); }
.tp-tipster__best, .tp-tipster__note { font-size: 0.8rem; color: var(--tp-muted, #8a97a6); }
.tp-tipster__empty { color: var(--tp-muted, #8a97a6); }
.tp-tipster__specialty { color: var(--tp-primary, #34d399); font-weight: 600; }
.tp-tipster__facts { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.88rem; }
.tp-tipster__bio { font-size: 0.92rem; line-height: 1.6; }

/* Tabs: sections stack without JS; .tp-tabs--js (added by frontend.js)
   hides inactive panels so the buttons behave as real tabs. */
.tp-tabs__nav { display: flex; gap: 0.35rem; border-bottom: 1px solid var(--tp-border, rgba(255, 255, 255, 0.1)); margin-bottom: 1rem; overflow-x: auto; }
.tp-tabs__btn { -webkit-appearance: none; appearance: none; background: none; border: none; border-bottom: 2px solid transparent; color: var(--tp-muted, #8a97a6); font-family: inherit; font-weight: 700; font-size: 0.9rem; padding: 0.55rem 0.9rem; cursor: pointer; white-space: nowrap; }
.tp-tabs__btn:hover { color: var(--tp-foreground, #eaf0f6); }
.tp-tabs__btn.is-active { color: var(--tp-primary, #10b981); border-bottom-color: var(--tp-primary, #10b981); }
.tp-tabs__panel { padding: 0.25rem 0 1rem; }
.tp-tabs--js .tp-tabs__panel { display: none; }
.tp-tabs--js .tp-tabs__panel.is-active { display: block; }
.tp-tabs__heading { font-size: 1.05rem; margin: 0.5rem 0 0.9rem; }

/* Compact tip rows (tipster profile Tips + Results tabs) — matches the
   Recent Results block anatomy: status dot · teams with meta beneath · right
   column with the key value (odds / coloured score badge) on top and the
   prediction chip under it. */
.tp-tipster__tips { display: flex; flex-direction: column; gap: 0.5rem; }
.tp-tip-row { position: relative; display: flex; align-items: center; gap: 0.6rem; background: var(--tp-card, #141b24); border: 1px solid var(--tp-border, rgba(255, 255, 255, 0.08)); border-radius: 12px; padding: 0.7rem 0.9rem; transition: border-color 0.2s ease; }
.tp-tip-row:hover { border-color: var(--tp-primary, #10b981); }
.tp-tip-row__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: 0 0 auto; background: var(--tp-muted, #8a97a6); }
.tp-tip-row__dot--pending { background: var(--tp-primary, #10b981); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15); }
.tp-tip-row__dot--won { background: var(--tp-win, #22c55e); }
.tp-tip-row__dot--lost { background: var(--tp-loss, #f43f5e); }
.tp-tip-row__link { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; text-decoration: none; color: inherit; }
.tp-tip-row__link::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.tp-tip-row__match { display: flex; align-items: center; gap: 0.45rem; font-weight: 600; color: var(--tp-foreground, #eaf0f6); font-size: 0.875rem; min-width: 0; }
.tp-tip-row__team { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; }
.tp-tip-row__team-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-tip-row__logo { width: 22px; height: 22px; border-radius: 50%; object-fit: contain; background: rgba(255, 255, 255, 0.06); flex: 0 0 auto; }
.tp-tip-row__logo--ph { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 0.6rem; font-weight: 800; }
.tp-tip-row__vs { flex: 0 0 auto; font-size: 0.66rem; font-weight: 700; color: var(--tp-muted, #8a97a6); text-transform: uppercase; }
.tp-tip-row__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.7rem; color: var(--tp-muted, #8a97a6); }
.tp-tip-row__league { color: var(--tp-primary, #34d399); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.65rem; }
/* Right column: value badge on top, prediction chip beneath. */
.tp-tip-row__result { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; min-width: 0; max-width: 45%; }
.tp-tip-row__badge { display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; min-width: 60px; font-size: 0.72rem; font-weight: 800; padding: 0.15rem 0.55rem; border-radius: 9999px; font-variant-numeric: tabular-nums; }
.tp-tip-row__badge--won { background: var(--tp-win-bg, rgba(34, 197, 94, 0.12)); color: var(--tp-win, #22c55e); }
.tp-tip-row__badge--lost { background: var(--tp-loss-bg, rgba(244, 63, 94, 0.12)); color: var(--tp-loss, #f43f5e); }
.tp-tip-row__badge-score { color: inherit; font-weight: 800; }
.tp-tip-row__odds { font-size: 0.72rem; font-weight: 800; color: var(--tp-odds, #f5f7fa); background: rgba(255, 255, 255, 0.06); padding: 0.15rem 0.45rem; border-radius: 0.3rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tp-tip-row__pred { font-size: 0.7rem; font-weight: 700; color: var(--tp-foreground, #eaf0f6); background: rgba(255, 255, 255, 0.06); padding: 0.125rem 0.375rem; border-radius: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Phones: two teams side-by-side leave each name only ~50px, so long names
   ("Switzerland", "Cape Verde Islands") get truncated. Stack home over away so
   each team gets the full row width — names show in full, flags kept for
   recognition. (Drop the `.tp-tip-row__logo` display line to hide flags.) */
@media (max-width: 600px) {
	.tp-tip-row__match { flex-direction: column; align-items: stretch; gap: 0.25rem; }
	.tp-tip-row__team { width: 100%; align-items: flex-start; }
	.tp-tip-row__vs { display: none; }
	/* Full names, never truncated: a too-long name (e.g. "Bosnia & Herzegovina")
	   wraps to a second line beside its flag instead of ellipsing. */
	.tp-tip-row__team-name { white-space: normal; overflow: visible; line-height: 1.2; }
	/* Let a long pick wrap inside its 45% column instead of ellipsing, so the
	   full prediction is readable too. */
	.tp-tip-row__pred { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.3; }
}

/* Pagination (Results tab) — pill buttons matching the tip-card design.
   Scoped to .nav-links, not .navigation.pagination: GeneratePress strips the
   outer <nav> wrapper from the_posts_pagination() output. */
.tp-tipster .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 1.25rem 0 0; }
.tp-tipster .nav-links .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.7rem; border: 1px solid var(--tp-border, rgba(255, 255, 255, 0.12)); border-radius: 10px; background: var(--tp-card, #141b24); color: var(--tp-muted, #8a97a6); font-size: 0.82rem; font-weight: 700; text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease; }
.tp-tipster .nav-links a.page-numbers:hover { border-color: var(--tp-primary, #10b981); color: var(--tp-foreground, #eaf0f6); }
.tp-tipster .nav-links .page-numbers.current { background: var(--tp-primary, #10b981); border-color: var(--tp-primary, #10b981); color: #04130d; }
.tp-tipster .nav-links .page-numbers.dots { border: none; background: none; min-width: auto; padding: 0 0.2rem; }
.tipsterpro-light .tp-tipster .nav-links .page-numbers { background: #ffffff; border-color: #e2e8f0; color: #64748b; }
.tipsterpro-light .tp-tipster .nav-links .page-numbers.current { background: var(--tp-primary, #10b981); border-color: var(--tp-primary, #10b981); color: #04130d; }

/* Light mode */
.tipsterpro-light .tp-tipster__stat,
.tipsterpro-light .tp-tip-row { background: #ffffff; border-color: #e2e8f0; }
.tipsterpro-light .tp-tipster__num,
.tipsterpro-light .tp-tip-row__match { color: #0f172a; }
.tipsterpro-light .tp-tip-row__odds,
.tipsterpro-light .tp-tip-row__pred { color: #0f172a; background: rgba(0, 0, 0, 0.06); }

/* --- Result card (settled tips) ------------------------------------------ */
.tp-single-tip .tp-result__row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin: 0.35rem 0 0.5rem; }
.tp-single-tip .tp-result__score { font-size: 1.6rem; font-weight: 800; color: var(--c-fg); font-variant-numeric: tabular-nums; }
.tp-single-tip .tp-result__verdict { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; border-radius: 999px; padding: 0.25rem 0.7rem; background: rgba(255, 255, 255, 0.08); color: var(--c-fg2); }
.tp-single-tip .tp-result--won .tp-result__verdict { color: var(--c-grn2); background: rgba(16, 185, 129, 0.14); }
.tp-single-tip .tp-result--lost .tp-result__verdict { color: var(--c-red); background: rgba(248, 113, 113, 0.14); }
.tp-single-tip .tp-result--won .tp-result__profit { color: var(--c-grn2); font-weight: 800; font-variant-numeric: tabular-nums; }
.tp-single-tip .tp-result--lost .tp-result__profit { color: var(--c-red); font-weight: 800; font-variant-numeric: tabular-nums; }
.tp-single-tip .tp-result__summary { margin: 0; font-size: 0.9rem; color: var(--c-fg2); line-height: 1.55; }

/* --- Community prediction (main column) --------------------------------- */
.tp-single-tip .tp-predict__q { font-size: 0.9rem; color: var(--c-mut); margin: 0 0 1rem; }
.tp-single-tip .tp-predict__options { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.6rem; }
.tp-single-tip .tp-predict__opt { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.85rem 0.5rem; background: var(--c-card2); border: 1px solid var(--c-bd); border-radius: 12px; color: var(--c-fg2); font-family: inherit; cursor: pointer; transition: border-color 0.15s ease; }
.tp-single-tip .tp-predict__opt:hover:not([disabled]) { border-color: rgba(16, 185, 129, 0.45); }
.tp-single-tip .tp-predict__opt[disabled] { cursor: default; }
.tp-single-tip .tp-predict__opt.is-mine { border-color: var(--c-grn2); background: rgba(16, 185, 129, 0.10); }
.tp-single-tip .tp-predict__opt.is-result { box-shadow: 0 0 0 2px var(--c-grn2) inset; }
.tp-single-tip .tp-predict__fill { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--c-grn); opacity: 0.75; transition: width 0.3s ease; }
.tp-single-tip .tp-predict__opt-label { position: relative; font-size: 0.82rem; font-weight: 700; color: var(--c-fg); text-align: center; line-height: 1.2; }
.tp-single-tip .tp-predict__opt-pct { position: relative; font-size: 0.72rem; font-weight: 700; color: #fff; }
.tp-single-tip .tp-predict__hint { font-size: 0.8rem; color: var(--c-mut); margin: 0.9rem 0 0; }
.tp-single-tip .tp-predict__hint a { color: var(--c-grn2); }
.tp-single-tip .tp-predict__mine { color: var(--c-grn2); }
.tp-single-tip .tp-predict__ok { color: var(--c-grn2); font-weight: 700; }
.tp-single-tip .tp-predict__no { color: var(--c-red); font-weight: 700; }
.tp-single-tip .tp-predict__vs { display: flex; gap: 0.75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--c-bd); }
.tp-single-tip .tp-predict__vs-col { flex: 1; background: var(--c-card2); border: 1px solid var(--c-bd); border-radius: 10px; padding: 0.6rem 0.7rem; }
.tp-single-tip .tp-predict__vs-label { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-mut2); }
.tp-single-tip .tp-predict__vs-val { display: block; font-size: 0.9rem; font-weight: 800; color: var(--c-grn2); margin-top: 0.15rem; }
.tp-single-tip .tp-predict__vs-val--expert { color: var(--c-fg); }
.tp-single-tip .tp-predict__count { display: block; font-size: 0.72rem; color: var(--c-mut2); margin-top: 0.8rem; }

/* Community feed — who picked what (transparency / gamification) */
.tp-single-tip .tp-predict__feed { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--c-bd); }
.tp-single-tip .tp-predict__feed-title { display: block; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-mut2); margin-bottom: 0.6rem; }
.tp-single-tip .tp-predict__feed-list { display: flex; flex-direction: column; gap: 0.4rem; max-height: 16rem; overflow-y: auto; }
.tp-single-tip .tp-predict__feed-item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; background: var(--c-card2); border: 1px solid var(--c-bd); border-radius: 10px; padding: 0.35rem 0.55rem; }
.tp-single-tip .tp-predict__feed-user { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; text-decoration: none; color: var(--c-fg); font-size: 0.8rem; font-weight: 600; }
.tp-single-tip .tp-predict__feed-user img { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; }
.tp-single-tip .tp-predict__feed-user span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-single-tip a.tp-predict__feed-user:hover span { color: var(--c-grn2); }
.tp-single-tip .tp-predict__feed-pick { flex: 0 0 auto; font-size: 0.74rem; font-weight: 700; color: var(--c-mut); padding: 0.15rem 0.5rem; border-radius: 999px; background: rgba(255,255,255,0.05); }
.tp-single-tip .tp-predict__feed-pick--home { color: var(--c-grn2); background: rgba(16,185,129,0.12); }
.tp-single-tip .tp-predict__feed-pick--away { color: #60a5fa; background: rgba(96,165,250,0.12); }
.tp-single-tip .tp-predict__feed-pick b { font-weight: 800; color: var(--c-fg); }

/* Exact-score bonus input */
.tp-single-tip .tp-predict__score { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; font-size: 0.82rem; color: var(--c-mut); }
.tp-single-tip .tp-predict__score-label { font-weight: 600; }
.tp-single-tip .tp-predict__score-in { width: 46px; padding: 0.35rem; text-align: center; background: var(--c-card2); border: 1px solid var(--c-bd); border-radius: 8px; color: var(--c-fg); font-family: inherit; }
.tp-single-tip .tp-predict__score-sep { color: var(--c-mut2); }
.tp-single-tip .tp-predict__score-save { background: var(--c-grn); color: #0b0e16; border: 0; border-radius: 8px; padding: 0.4rem 0.85rem; font-weight: 800; font-size: 0.78rem; cursor: pointer; font-family: inherit; }
.tp-single-tip .tp-predict__score-save:hover { background: var(--c-grn2); }
.tp-single-tip .tp-predict__score--done { color: var(--c-mut2); }

/* My-predictions panel (profile / dashboard; global --tp-* tokens) */
.tp-mypred { background: var(--tp-card, #111827); border: 1px solid var(--tp-border, rgba(255, 255, 255, 0.08)); border-radius: 14px; padding: 1.1rem; }
.tp-mypred__kicker { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tp-primary, #10b981); margin-bottom: 0.8rem; }
.tp-mypred__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.tp-mypred__stat { text-align: center; }
.tp-mypred__num { display: block; font-size: 1.2rem; font-weight: 800; color: var(--tp-foreground, #f8fafc); line-height: 1.1; }
.tp-mypred__lbl { display: block; font-size: 0.64rem; color: var(--tp-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 0.2rem; }
.tp-mypred__badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
.tp-mypred__badge { font-size: 0.72rem; font-weight: 600; color: var(--tp-foreground, #e2e8f0); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--tp-border, rgba(255, 255, 255, 0.08)); padding: 0.3rem 0.55rem; border-radius: 999px; }
.tp-profile-page .tp-mypred { margin-bottom: 1.5rem; }

/* Public player profile (author.php) */
.tp-player-wrap { max-width: 760px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.tp-player__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.tp-player__avatar { width: 72px; height: 72px; border-radius: 50%; flex: 0 0 auto; }
.tp-player__id { flex: 1; min-width: 0; }
.tp-player__name { font-size: 1.5rem; font-weight: 800; color: var(--tp-foreground, #f8fafc); margin: 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.tp-player__role { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tp-primary, #10b981); background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.3); padding: 0.15rem 0.5rem; border-radius: 999px; }
.tp-player__since { font-size: 0.82rem; color: var(--tp-muted, #94a3b8); }
.tp-player__rank { flex: 0 0 auto; font-size: 1.5rem; font-weight: 900; color: var(--tp-primary, #10b981); display: inline-flex; align-items: baseline; gap: 0.3rem; }
.tp-player__rank small { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tp-muted, #94a3b8); }
.tp-player__recent { margin-top: 1.5rem; }
.tp-player__recent-title { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tp-primary, #10b981); margin-bottom: 0.8rem; }
.tp-player__recent-list { display: flex; flex-direction: column; gap: 0.4rem; }
.tp-player__rec { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; background: var(--tp-card, #111827); border: 1px solid var(--tp-border, rgba(255,255,255,0.08)); border-left-width: 3px; border-radius: 10px; padding: 0.55rem 0.7rem; }
.tp-player__rec:hover { border-color: var(--tp-border, rgba(255,255,255,0.16)); }
.tp-player__rec--won { border-left-color: #10b981; }
.tp-player__rec--lost { border-left-color: #ef4444; }
.tp-player__rec--pending { border-left-color: var(--tp-muted, #94a3b8); }
.tp-player__rec-match { flex: 1; min-width: 0; font-size: 0.85rem; font-weight: 600; color: var(--tp-foreground, #f8fafc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-player__rec-pick { flex: 0 0 auto; font-size: 0.76rem; font-weight: 700; color: var(--tp-muted, #94a3b8); }
.tp-player__rec-res { flex: 0 0 auto; font-size: 0.85rem; font-weight: 800; color: var(--tp-foreground, #f8fafc); }
.tp-player__rec--won .tp-player__rec-res { color: #10b981; }
.tp-player__rec--lost .tp-player__rec-res { color: #ef4444; }
.tp-player__missing { text-align: center; color: var(--tp-muted, #94a3b8); padding: 3rem 1rem; }

/* Dashboard sidebar: my-performance panel pinned to the top (top-right on
   desktop), Recent Results beneath it. (style.min.css carries the .tp-dashboard
   grid; these layout rules live here so they apply without a CSS rebuild.) */
.tp-dashboard__sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.tp-dashboard__sidebar .tp-mypred { margin: 0; }
/* Leaderboard: full-width band spanning both columns, below main + sidebar. */
.tp-dashboard__leaderboard { grid-column: 1 / -1; min-width: 0; overflow-x: auto; margin-top: 0.5rem; }
.tp-dashboard__leaderboard .tp-page-section__heading { margin-top: 0; }
.tp-dashboard__leaderboard .tp-leaderboard { max-width: none; margin: 0; }

/* --- Leaderboard (shortcode; standalone page, uses global --tp-* tokens) - */

/* ==========================================================================
   Light mode — Single Tip page overrides
   Resets the dark-scoped --c-* tokens used by .tp-single-tip to light values
   and overrides the handful of hardcoded dark backgrounds.
   ========================================================================== */

.tipsterpro-light .tp-single-tip {
	--c-card:  #ffffff;
	--c-card2: #f1f5f9;
	--c-bd:    rgba(0, 0, 0, 0.08);
	--c-bd2:   rgba(0, 0, 0, 0.12);
	--c-fg:    #0f172a;
	--c-fg2:   #334155;
	--c-mut:   #4b5563;
	--c-mut2:  #64748b;
	--c-faint: #64748b;
	--c-grn:   #047857;
	--c-grn2:  #047857;
	--c-amb:   #b45309;
	--c-amb2:  #92400e;
	--c-red:   #dc2626;
	--c-idg:   #4f46e5;
	--c-odds:  #0f172a;
	color: #334155;
}

/* Hero: replace the dark gradient with a light one */
.tipsterpro-light .tp-hero {
	background: linear-gradient(160deg, #f1f5f9 0%, #e8edf4 60%, #dde3ec 100%);
	border-color: rgba(0, 0, 0, 0.09);
}

/* Decorative glows: lighten them for the bright background */
.tipsterpro-light .tp-hero__glow--a {
	background: radial-gradient(circle, rgba(4, 120, 87, 0.1), transparent 65%);
}
.tipsterpro-light .tp-hero__glow--b {
	background: radial-gradient(circle, rgba(99, 102, 241, 0.06), transparent 65%);
}

/* League/sport pill: swap the white-on-dark tint */
.tipsterpro-light .tp-hero__league {
	background: rgba(0, 0, 0, 0.05);
	border-color: rgba(0, 0, 0, 0.09);
}

/* Team "home / away" pill */
.tipsterpro-light .tp-hero__side {
	background: rgba(0, 0, 0, 0.04);
	color: #475569;
}

/* VS separator + match time */
.tipsterpro-light .tp-hero__vs   { color: #64748b; }
.tipsterpro-light .tp-hero__time { color: #475569; }
.tipsterpro-light .tp-hero__when { color: #475569; }


/* Team logo placeholder: replace the near-black gradient */
.tipsterpro-light .tp-hero__logo--ph {
	background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
	border-color: rgba(0, 0, 0, 0.1);
}

/* Tipster's pick box */
.tipsterpro-light .tp-pick {
	background: rgba(4, 120, 87, 0.06);
	border-color: rgba(4, 120, 87, 0.2);
}
.tipsterpro-light .tp-pick--locked {
	background: rgba(180, 83, 9, 0.05);
	border-color: rgba(180, 83, 9, 0.2);
}

/* Lock icon wrapper */
.tipsterpro-light .tp-lock__icon {
	background: rgba(180, 83, 9, 0.1);
	border-color: rgba(180, 83, 9, 0.25);
}

/* Confidence bar track */
.tipsterpro-light .tp-bars__seg { background: rgba(0, 0, 0, 0.1); }

/* Match data table borders */
.tipsterpro-light .tp-mtable__table tbody td {
	border-bottom-color: rgba(0, 0, 0, 0.05);
}
.tipsterpro-light .tp-mtable__tla {
	background: #f1f5f9;
	border-color: rgba(0, 0, 0, 0.08);
}
.tipsterpro-light .tp-mtable__table tbody tr.is-highlight td {
	background: rgba(4, 120, 87, 0.06);
}

/* Recent-form rows */
.tipsterpro-light .tp-form-row { background: rgba(0, 0, 0, 0.02); }

/* W/D/L pills — ensure WCAG-AA contrast on white */
.tipsterpro-light .tp-wdl--win  { background: rgba(4, 120, 87, 0.1);  color: #047857; border-color: rgba(4, 120, 87, 0.25); }
.tipsterpro-light .tp-wdl--draw { background: rgba(100, 116, 139, 0.1); color: #475569; border-color: rgba(100, 116, 139, 0.25); }
.tipsterpro-light .tp-wdl--loss { background: rgba(220, 38, 38, 0.1); color: #dc2626; border-color: rgba(220, 38, 38, 0.25); }

/* Goal bars — keep colors but update for readability */
.tipsterpro-light .tp-goals-bar__fill--scored   { background: linear-gradient(to top, #047857, #10b981); }
.tipsterpro-light .tp-goals-bar__fill--conceded { background: linear-gradient(to top, #dc2626, #f87171); }

/* H2H rows */
.tipsterpro-light .tp-h2h-row {
	background: rgba(0, 0, 0, 0.02);
	border-color: rgba(0, 0, 0, 0.07);
}
.tipsterpro-light .tp-h2h__totals { border-bottom-color: rgba(0, 0, 0, 0.08); }

/* Sportsbook cards */
.tipsterpro-light .tp-sbx__link {
	background: #f8fafc;
	border-color: rgba(0, 0, 0, 0.08);
}
.tipsterpro-light .tp-sbx__link:hover { border-color: rgba(4, 120, 87, 0.35); }
.tipsterpro-light .tp-sbx__rating {
	background: rgba(4, 120, 87, 0.1);
	border-color: rgba(4, 120, 87, 0.25);
}
.tipsterpro-light .tp-sbx__cta { background: #047857; color: #ffffff; }
.tipsterpro-light .tp-sbx__link:hover .tp-sbx__cta { background: #065f46; color: #ffffff; }

/* Chat form textarea */
.tipsterpro-light .tp-tip-chat__form textarea {
	background: #f1f5f9;
	color: #0f172a;
	border-color: rgba(0, 0, 0, 0.1);
}
.tipsterpro-light .tp-tip-chat__form textarea:focus {
	border-color: rgba(4, 120, 87, 0.5);
}

/* Buttons — force white text on dark green / dark amber backgrounds */
.tipsterpro-light .tp-single-tip .tp-btn--amber,
.tipsterpro-light .tp-single-tip .tp-btn--amber:hover { color: #ffffff; }
.tipsterpro-light .tp-single-tip .tp-btn--green,
.tipsterpro-light .tp-single-tip .tp-btn--green:hover  { color: #ffffff; }

/* Subscribe / send button */
.tipsterpro-light .tp-single-tip__subscribe { background: #047857; color: #ffffff; }
.tipsterpro-light .tp-single-tip__subscribe:hover { background: #065f46; color: #ffffff; }

/* More tips sidebar rows */
.tipsterpro-light .tp-single-tip .tp-more__item {
	background: #f8fafc;
	border-color: rgba(0, 0, 0, 0.08);
}
.tipsterpro-light .tp-single-tip .tp-more__item:hover { border-color: rgba(4, 120, 87, 0.35); }
.tipsterpro-light .tp-single-tip .tp-more__odds { background: rgba(0, 0, 0, 0.06); }

/* Community prediction options */
.tipsterpro-light .tp-single-tip .tp-predict__opt {
	background: #f8fafc;
	border-color: rgba(0, 0, 0, 0.08);
}
.tipsterpro-light .tp-single-tip .tp-predict__opt:hover:not([disabled]) {
	border-color: rgba(4, 120, 87, 0.4);
}
.tipsterpro-light .tp-single-tip .tp-predict__opt.is-mine {
	border-color: #047857;
	background: rgba(4, 120, 87, 0.07);
}
.tipsterpro-light .tp-single-tip .tp-predict__fill { background: #047857; }
.tipsterpro-light .tp-single-tip .tp-predict__vs-col {
	background: #f1f5f9;
	border-color: rgba(0, 0, 0, 0.08);
}

/* Score inputs */
.tipsterpro-light .tp-single-tip .tp-predict__score-in {
	background: #f1f5f9;
	color: #0f172a;
	border-color: rgba(0, 0, 0, 0.1);
}
.tipsterpro-light .tp-single-tip .tp-predict__score-save { background: #047857; color: #ffffff; }
.tipsterpro-light .tp-single-tip .tp-predict__score-save:hover { background: #065f46; color: #ffffff; }

/* Status badges on the single tip hero */
.tipsterpro-light .tp-single-tip .tp-badge--won   { color: #047857; background: rgba(4, 120, 87, 0.1);   border-color: rgba(4, 120, 87, 0.25); }
.tipsterpro-light .tp-single-tip .tp-badge--lost  { color: #dc2626; background: rgba(220, 38, 38, 0.1);  border-color: rgba(220, 38, 38, 0.25); }
.tipsterpro-light .tp-single-tip .tp-badge--pending { color: #92400e; background: rgba(180, 83, 9, 0.1); border-color: rgba(180, 83, 9, 0.25); }

.tp-leaderboard { max-width: 760px; margin: 0 auto; }
.tp-leaderboard__tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.tp-leaderboard__tab { padding: 0.4rem 0.9rem; border-radius: 999px; text-decoration: none; font-size: 0.85rem; font-weight: 600; color: var(--tp-muted, #94a3b8); background: var(--tp-card, #111827); border: 1px solid var(--tp-border, rgba(255, 255, 255, 0.08)); }
.tp-leaderboard__tab.is-active { background: var(--tp-primary, #10b981); color: #0b0e16; border-color: var(--tp-primary, #10b981); }
.tp-leaderboard__table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tp-leaderboard__table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tp-muted, #94a3b8); padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--tp-border, rgba(255, 255, 255, 0.08)); }
.tp-leaderboard__table td { padding: 0.6rem; border-bottom: 1px solid var(--tp-border, rgba(255, 255, 255, 0.05)); color: var(--tp-foreground, #e2e8f0); }
.tp-leaderboard__rank { font-weight: 800; color: var(--tp-muted, #94a3b8); }
.tp-leaderboard__pts { font-weight: 800; color: var(--tp-primary, #10b981); }
.tp-leaderboard__member { color: inherit; text-decoration: none; font-weight: 600; }
.tp-leaderboard__member:hover { color: var(--tp-primary, #10b981); text-decoration: underline; }
.tp-leaderboard__table tr.is-me td { background: rgba(16, 185, 129, 0.08); }
.tp-leaderboard__empty { color: var(--tp-muted, #94a3b8); }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 980px) {
	/* minmax(0, 1fr) — a bare `1fr` track keeps an implicit min-width:min-content,
	   so a wide child (league table, long team names) would stop the single
	   column shrinking on phones and overflow the card. */
	.tp-single-tip__body { grid-template-columns: minmax(0, 1fr); }
	.tp-single-tip__sidebar { position: static; }
}
@media (max-width: 600px) {
	.tp-single-tip { padding: 1.25rem 0.85rem 3rem; }
	.tp-hero { padding: 1.4rem 1.1rem; }
	.tp-hero__matchup { gap: 0.5rem; }
	.tp-hero__logo { width: 56px; height: 56px; }
	.tp-hero__team { font-size: 0.95rem; }
	/* Pick box: stack into a clean full-width card — pick + confidence on top,
	   then an "Odds" row separated by a hairline, value + slip/bookmaker flowing. */
	.tp-pick { flex-direction: column; align-items: stretch; gap: 0.9rem; padding: 1.1rem 1.15rem; }
	.tp-pick__main { width: 100%; }
	.tp-pick__value { font-size: 1.4rem; }
	.tp-pick__odds-wrap {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 0.45rem 0.7rem;
		width: 100%;
		border-top: 1px solid rgba(16, 185, 129, 0.18);
		padding-top: 0.85rem;
	}
	.tp-pick__odds-wrap .tp-pick__label { order: -1; width: 100%; }
	.tp-pick__odds { font-size: 2rem; }
	.tp-pick__book { margin-top: 0; }
	.tp-goals-grid { grid-template-columns: 1fr; }
	.tp-h2h-row { grid-template-columns: 1fr auto 1fr; row-gap: 0.3rem; }
	.tp-h2h-row__date, .tp-h2h-row__pill { grid-column: 1 / -1; text-align: center; }
	/* H2H totals: tighter so the three win/draw/loss cells don't crowd on a phone. */
	.tp-h2h__totals { gap: 0.4rem; }
	.tp-h2h__stat { padding: 0.55rem 0.3rem; }
	.tp-h2h__val { font-size: 1.25rem; }
	.tp-h2h__lbl { font-size: 0.6rem; }
	/* Compare-odds: smaller bookmaker logo + tighter odds columns on mobile. */
	.tp-oddscompare__head, .tp-oddscompare__row { grid-template-columns: 1fr 2.4rem 2.4rem 2.4rem; gap: 0.3rem; }
	.tp-oddscompare__logo { padding: 0.4rem 0.4rem; }
	.tp-oddscompare__logo img { max-height: 16px; max-width: 58px; }
	.tp-oddscompare__odd { font-size: 0.8rem; }
	/* Stack the chat composer: textarea on top, send button below. */
	.tp-tip-chat__form { flex-direction: column; }
	.tp-tip-chat__form .tp-single-tip__subscribe { width: 100%; text-align: center; }
}

/* Touch devices (mobile): no hover/active colour, background or animation on the
   clickable list rows/cards — touch "sticky hover" otherwise leaves the green
   affordance border stuck after a tap. */
@media (hover: none) {
	.tp-tip-card:hover, .tp-tip-card:active,
	.tp-tips-list__row:hover, .tp-tips-list__row:active,
	.tp-page-browser__row:hover, .tp-page-browser__row:active,
	.tp-page-browser__card:hover, .tp-page-browser__card:active { border-color: var(--tp-border-color); }
	.tp-results-archive__match-link:hover, .tp-results-archive__match-link:active { color: inherit; text-decoration: none; }
	.tp-tip-card, .tp-tips-list__row, .tp-page-browser__row, .tp-page-browser__card { transition: none; }
}

/* ===== Acca of the Day placement spacing =====================================
   The ticket itself is styled by the block (style-index.css); these rules only
   space it inside theme layouts that have no block gap of their own. */
.tp-dashboard__main .tp-acca-block { margin-bottom: 1.75rem; }

/* ===== Team news · injuries & suspensions ==================================== */
.tp-teamnews__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tp-teamnews__team { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.6rem; color: var(--c-fg2); }
.tp-teamnews__none { font-size: 0.8rem; color: var(--c-mut2); margin: 0; }
.tp-teamnews__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.tp-teamnews__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem 0.5rem; font-size: 0.82rem; }
.tp-teamnews__pill {
	flex: 0 0 auto;
	font-size: 0.6rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	padding: 0.1rem 0.35rem;
	border-radius: 5px;
	line-height: 1.4;
}
.tp-teamnews__pill--out { background: rgba(239, 68, 68, 0.15); color: var(--c-red); border: 1px solid rgba(239, 68, 68, 0.3); }
.tp-teamnews__pill--doubt { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }
.tp-teamnews__player { font-weight: 600; color: var(--c-fg); }
.tp-teamnews__reason { color: var(--c-mut); font-size: 0.76rem; }
@media (max-width: 480px) { .tp-teamnews__grid { grid-template-columns: 1fr; } }

/* ===== Confirmed lineups (API-Football /fixtures/lineups) ==================== */
.tp-lineups__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.tp-lineups__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--c-bd); }
.tp-lineups__team { font-weight: 700; font-size: 0.9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-lineups__formation { flex: 0 0 auto; font-size: 0.72rem; font-weight: 700; color: var(--c-grn2); background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.3); border-radius: 6px; padding: 0.1rem 0.4rem; }
.tp-lineups__xi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.tp-lineups__player { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; }
.tp-lineups__num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; font-size: 0.68rem; font-weight: 700; color: var(--c-mut); background: var(--c-card2); border: 1px solid var(--c-bd); border-radius: 5px; font-variant-numeric: tabular-nums; }
.tp-lineups__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-lineups__pos { flex: 0 0 auto; font-size: 0.62rem; font-weight: 600; color: var(--c-mut2); letter-spacing: 0.04em; }
.tp-lineups__bench { margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px dashed var(--c-bd); font-size: 0.74rem; }
.tp-lineups__bench-label { display: block; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-mut); margin-bottom: 0.25rem; }
.tp-lineups__bench-list { color: var(--c-mut); line-height: 1.5; }
.tp-lineups__coach { margin: 0.6rem 0 0; font-size: 0.74rem; color: var(--c-mut2); }
@media (max-width: 480px) { .tp-lineups__grid { grid-template-columns: 1fr; } }

/* Light-theme tweaks for the new cards. */
.tipsterpro-light .tp-teamnews__pill--doubt { background: rgba(217, 119, 6, 0.12); color: #b45309; border-color: rgba(217, 119, 6, 0.25); }
.tipsterpro-light .tp-teamnews__pill--out { background: rgba(220, 38, 38, 0.1); color: #dc2626; border-color: rgba(220, 38, 38, 0.25); }