/*
Theme Name: XScore
Theme URI: https://xscore.co.ke
Author: XScore
Description: A clean, credible dashboard-style design for XScore: neutral charcoal surface, one confident blue accent, disciplined type system (Sora for headings, Inter for body, IBM Plex Mono for every number), and generous, consistent spacing. Wired directly into your XScore plugins.
Version: 10.0.0
Text Domain: xscore
*/

:root{
	/* A NEUTRAL, PROFESSIONAL PALETTE — no thematic gimmick, just a
	   dark editorial surface closer to a data/analytics product, with
	   one confident accent used sparingly, plus semantic green/red
	   reserved strictly for win/loss and live status so they never
	   get confused with the brand color. Surfaces carry a faint blue
	   undertone rather than flat neutral gray, which reads richer
	   without tipping into a "theme". */
	--bg:#0B0F17;
	--surface:#131826;
	--surface-2:#1B2233;
	--line:rgba(230,237,243,.09);
	--line-strong:rgba(230,237,243,.17);
	--text:#EDF0F5;
	--text-dim:#8D96A6;
	--accent:#4C6FFF;
	--accent-2:#3B57DB;
	--win:#2FBF71;
	--live:#FF5470;
	--radius:12px;
	--shadow:0 8px 20px rgba(0,0,0,.3);
	--shadow-lg:0 18px 40px rgba(0,0,0,.38);
	--space-1:6px; --space-2:10px; --space-3:16px; --space-4:24px; --space-5:36px; --space-6:52px;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:96px; color-scheme:dark; }
@media(prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
	margin:0;
	background:var(--bg);
	color:var(--text);
	font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	line-height:1.68;
	overflow-x:hidden;
	width:100%;
	-webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
a, button, .btn, input[type=submit], .card, .stat-card{ touch-action:manipulation; }
img{ max-width:100%; height:auto; display:block; }
iframe, video, embed, object{ max-width:100%; }
table{ max-width:100%; display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

input, select, textarea{ font-size:16px; }

.container{ width:min(1180px,calc(100% - 32px)); margin-inline:auto; }

h1, h2, h3, .brand, .btn, .stat-card .n, .footer-heading{ font-family:'Sora',system-ui,sans-serif; font-weight:700; letter-spacing:-.01em; }
.mono, .card-meta, .article-meta, .result-card-date, .result-card-pick strong, .result-card-odds{ font-family:'IBM Plex Mono',monospace; }

.hero h1, .section-head h2, .article h1, .card h3, .footer-cta-text strong{ text-wrap:balance; }

/* Skip link */
.skip-link{
	position:fixed; top:-60px; left:14px; z-index:200;
	background:var(--accent); color:#fff;
	padding:11px 18px; border-radius:8px; font-weight:700; font-size:.85rem;
	font-family:'Inter',sans-serif; transition:top .2s ease;
}
.skip-link:focus{ top:14px; }

@view-transition{ navigation:auto; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.3s; animation-timing-function:cubic-bezier(.2,.8,.2,1); }
.brand{ view-transition-name:xs-brand; }
@media(prefers-reduced-motion:reduce){
	::view-transition-old(root), ::view-transition-new(root){ animation:none; }
}

@media(prefers-contrast:more){
	:root{ --line:rgba(230,237,243,.4); --text-dim:#B7C0C8; }
	.card, .widget, .result-card, .stat-card, .btn, .stats-grid{ border-width:1.5px; }
}
@media(forced-colors:active){
	.site-nav, .xs-bottom-nav, .xs-welcome-toast, .xs-install-prompt, .nav-search-form{ forced-color-adjust:none; border:1px solid CanvasText; }
	.btn, .card, .widget, .result-card{ border-color:CanvasText; }
}
@media(prefers-reduced-transparency:reduce){
	.site-header, .site-nav ul ul, .nav-search-form,
	.xs-bottom-nav, .xs-welcome-toast, .xs-install-prompt, .xs-sticky-ad{
		backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--surface);
	}
}
.content-layout{ container-type:inline-size; container-name:xs-content; }
@container xs-content (max-width:640px){
	.grid{ grid-template-columns:1fr; }
	.results-grid{ grid-template-columns:1fr; }
}

/* HEADER */
.site-header{
	position:sticky; top:0; z-index:50;
	background:rgba(13,17,23,.9);
	backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
	border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; min-height:80px; gap:24px; }
.brand{ display:flex; align-items:center; gap:10px; letter-spacing:-.02em; font-size:1.5rem; color:var(--text); }
.brand::before{ content:""; width:9px; height:9px; border-radius:3px; background:var(--accent); }

/* MENU — a plain, confident underline indicator. No glow, no pill —
   just a clear color change and a solid underline on the active or
   hovered item, the way a serious dashboard nav behaves. */
.site-nav ul{ display:flex; gap:4px; list-style:none; padding:0; margin:0; align-items:center; }
.site-nav li{ position:relative; }
.site-nav a{
	position:relative; display:block; padding:10px 15px; color:var(--text-dim); font-weight:600;
	font-size:.9rem; white-space:nowrap; transition:color .15s ease, background .15s ease; border-radius:8px;
}
.site-nav a::after{
	content:""; position:absolute; left:15px; right:15px; bottom:1px; height:2px;
	background:var(--accent); border-radius:2px; transform:scaleX(0); transform-origin:center;
	transition:transform .2s cubic-bezier(.2,.8,.2,1);
}
.site-nav a:hover{ color:var(--text); background:rgba(230,237,243,.05); }
.site-nav a:hover::after{ transform:scaleX(1); }
.site-nav li.current-menu-item > a{ color:var(--text); }
.site-nav li.current-menu-item > a::after{ transform:scaleX(1); }

.site-nav li.menu-item-has-children > a::after{ content:none; }
.site-nav li.menu-item-has-children > a{ padding-right:22px; }
.site-nav li.menu-item-has-children > a::before{
	content:"⌄"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:.85em; opacity:.6;
}

.site-nav ul ul{
	display:block; visibility:hidden; opacity:0; pointer-events:none;
	position:absolute; top:calc(100% + 10px); left:0; min-width:210px;
	background:var(--surface-2);
	border:1px solid var(--line); border-radius:10px;
	padding:6px; gap:2px; box-shadow:var(--shadow-lg);
	transform:translateY(-6px); transition:opacity .2s ease, transform .2s ease, visibility .2s;
	z-index:70;
}
.site-nav li:hover > ul{ visibility:visible; opacity:1; pointer-events:auto; transform:translateY(0); }
.site-nav ul ul li{ width:100%; }
.site-nav ul ul a{ display:block; padding:10px 12px; border-radius:8px; font-size:.85rem; font-weight:500; white-space:nowrap; }
.site-nav ul ul a::after{ content:none; }
.site-nav ul ul a:hover{ background:rgba(76,111,255,.12); color:var(--accent); }

.nav-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav-app-btn{
	display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:8px;
	border:1px solid var(--line-strong); color:var(--text); font-weight:600; font-size:.84rem;
	white-space:nowrap; transition:border-color .15s ease, background .15s ease;
}
.nav-app-btn svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; }
.nav-app-btn:hover{ border-color:var(--accent); background:rgba(76,111,255,.08); color:var(--accent); }
.xs-standalone .nav-app-btn{ display:none; }
.nav-login-btn{
	display:inline-flex; align-items:center; padding:9px 18px; border-radius:8px;
	background:var(--accent); color:#fff !important;
	font-weight:700; font-size:.84rem; white-space:nowrap; transition:background .15s ease; flex-shrink:0;
	font-family:'Inter',sans-serif;
}
.nav-login-btn:hover{ background:var(--accent-2); }

/* HEADER SEARCH */
.nav-search{ position:relative; flex-shrink:0; }
.nav-search summary{
	list-style:none; cursor:pointer; width:38px; height:38px; border-radius:8px;
	display:flex; align-items:center; justify-content:center; font-size:1rem;
	border:1px solid var(--line-strong); background:transparent; color:var(--text-dim); transition:border-color .15s ease, color .15s ease;
}
.nav-search summary::-webkit-details-marker{ display:none; }
.nav-search summary:hover{ border-color:var(--accent); color:var(--accent); }
.nav-search[open] summary{ border-color:var(--accent); color:var(--accent); }
.nav-search-form{
	position:absolute; top:calc(100% + 8px); right:0; z-index:60;
	display:flex; gap:6px;
	background:var(--surface-2);
	border:1px solid var(--line); border-radius:10px; padding:8px; box-shadow:var(--shadow-lg); width:min(280px,80vw);
}
.nav-search-form input{
	flex:1; min-width:0; padding:9px 11px; border-radius:6px; border:1px solid var(--line);
	background:var(--bg); color:var(--text); font-size:.9rem;
}
.nav-search-form button{
	border:none; border-radius:6px; background:var(--accent); color:#fff;
	padding:0 14px; font-weight:700; font-size:.82rem; cursor:pointer; font-family:'Inter',sans-serif;
}

/* TICKER */
.xs-ticker{ background:var(--surface); border-bottom:1px solid var(--line); overflow:hidden; position:relative; }
.xs-ticker::before, .xs-ticker::after{ content:""; position:absolute; top:0; bottom:0; width:30px; z-index:2; pointer-events:none; }
.xs-ticker::before{ left:0; background:linear-gradient(90deg,var(--surface),transparent); }
.xs-ticker::after{ right:0; background:linear-gradient(270deg,var(--surface),transparent); }
.xs-ticker-track{ display:flex; width:max-content; animation:xs-scroll 32s linear infinite; }
.xs-ticker-item{ display:flex; align-items:center; gap:8px; padding:10px 22px; white-space:nowrap; font-size:12.5px; font-weight:600; color:var(--text-dim); border-right:1px solid var(--line); font-family:'IBM Plex Mono',monospace; }
.xs-ticker-item b{ color:var(--accent); font-weight:600; }
@keyframes xs-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media(prefers-reduced-motion:reduce){ .xs-ticker-track{ animation:none; overflow-x:auto; -webkit-overflow-scrolling:touch; } }

/* PULL-QUOTE */
.article blockquote{
	margin:30px 0; padding:8px 0 8px 24px; border-left:3px solid var(--accent);
	font-family:'Sora',sans-serif; font-weight:600;
	font-size:clamp(1.15rem,3vw,1.4rem); line-height:1.4; color:var(--text);
	position:relative;
}
.article blockquote p{ margin:0; font-size:inherit; font-family:inherit; color:inherit; }
.article blockquote cite{
	display:block; margin-top:10px; font-family:'Inter',sans-serif; font-style:normal;
	font-size:.8rem; font-weight:600; color:var(--text-dim);
}

/* DROP CAP */
.article > p:first-of-type::first-letter{
	font-family:'Sora',sans-serif; font-weight:700; float:left;
	font-size:3.2em; line-height:.85; padding:4px 10px 0 0; color:var(--accent);
}

/* FIGURE / CAPTION */
.article figure{ margin:22px 0; }
.article figure img{ margin:0; border-radius:10px; }
.article figcaption{
	margin-top:8px; font-size:.8rem; color:var(--text-dim); text-align:center;
	font-family:'Inter',sans-serif; font-style:italic;
}

/* HERO */
.hero{ padding:64px 0 48px; }
.hero-panel{
	position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius);
	padding:clamp(32px,5vw,64px); text-align:left;
	background:var(--surface);
	box-shadow:var(--shadow-lg);
}
/* A quiet touch of depth — a soft accent-tinted glow low in the
   corner, not a spotlight. Restrained enough to read as polish
   rather than decoration. */
.hero-panel::before{
	content:""; position:absolute; top:-160px; right:-120px; width:420px; height:420px;
	background:radial-gradient(circle, rgba(76,111,255,.16), transparent 70%);
	pointer-events:none; z-index:0;
}
.hero-panel > *{ position:relative; z-index:1; }

.verified-stamp{
	position:absolute; top:26px; right:26px; z-index:2;
	display:flex; align-items:center; gap:7px;
	padding:7px 14px; border-radius:999px;
	background:rgba(47,191,113,.1); border:1px solid rgba(47,191,113,.3);
	color:var(--win);
	font-family:'Inter',sans-serif; font-weight:600;
	font-size:.72rem; letter-spacing:.02em; text-transform:uppercase; line-height:1.2;
	pointer-events:none;
}
.verified-stamp span{ display:block; }
.verified-stamp br{ display:none; }
.verified-stamp .stamp-check{ font-size:.95rem; margin:0; }
@media(max-width:560px){ .verified-stamp{ top:16px; right:16px; font-size:.62rem; padding:6px 11px; } }

.eyebrow{
	display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line-strong);
	background:var(--surface-2); color:var(--text-dim); padding:7px 14px; border-radius:999px;
	font-size:.75rem; font-weight:600; font-family:'Inter',sans-serif;
}
.eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--live); flex-shrink:0; }

.hero h1{
	max-width:760px; margin:26px 0 16px; font-size:clamp(2.2rem,5.4vw,3.6rem); line-height:1.08; letter-spacing:-.02em;
	color:var(--text);
}
.verified-badge{
	display:inline-flex; align-items:center; justify-content:center;
	width:.5em; height:.5em; border-radius:50%;
	background:var(--win); color:var(--bg); -webkit-text-fill-color:var(--bg);
	font-size:.46em; vertical-align:middle; margin-left:4px;
}
.hero-tagline{
	font-family:'Sora',sans-serif; font-weight:600;
	color:var(--accent); font-size:1rem; letter-spacing:0; margin:0 0 0 !important;
}
.hero p{ max-width:560px; margin:14px 0 32px; color:var(--text-dim); font-size:clamp(1rem,2vw,1.1rem); line-height:1.7; font-family:'Inter',sans-serif; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-start; }
.btn{ display:inline-flex; align-items:center; gap:8px; justify-content:center; min-height:50px; padding:0 26px; border-radius:9px; font-weight:700; letter-spacing:0; border:1px solid transparent; transition:transform .18s ease, background .18s ease, border-color .18s ease; font-size:.92rem; }
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:var(--shadow); }
.btn-primary:hover{ background:var(--accent-2); }
.btn-secondary{ border-color:var(--line-strong); background:transparent; color:var(--text); }
.btn-secondary:hover{ border-color:var(--accent); color:var(--accent); }
.btn-icon{ font-size:.95em; }
.btn-live-dot{
	width:8px; height:8px; border-radius:50%; background:var(--live); display:inline-block;
	box-shadow:0 0 0 3px rgba(255,84,112,.18); animation:xs-live-pulse 1.6s ease-in-out infinite;
}
@keyframes xs-live-pulse{ 0%,100%{opacity:1;} 50%{opacity:.4;} }
@media(prefers-reduced-motion:reduce){ .btn-live-dot{ animation:none; } }

/* STATS */
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:36px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface-2); }
.stat-card{
	padding:22px 10px; text-align:center;
	position:relative; border-right:1px solid var(--line);
	transition:background .15s ease;
}
.stat-card:last-child{ border-right:none; }
.stat-card:hover{ background:rgba(230,237,243,.03); }
.stat-card:nth-child(1) .n{ color:var(--accent); }
.stat-card:nth-child(2) .n{ color:var(--text); }
.stat-card:nth-child(3) .n{ color:var(--text); }

.win-gauge{ position:relative; width:56px; height:56px; margin:2px auto 6px; }
.win-gauge svg{ width:100%; height:100%; transform:rotate(-90deg); }
.win-gauge-track{ fill:none; stroke:rgba(230,237,243,.09); stroke-width:6; }
.win-gauge-fill{ fill:none; stroke:var(--accent); stroke-width:6; stroke-linecap:round; transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1); }
.win-gauge-label{
	position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
	font-size:.82rem; font-weight:600; font-family:'IBM Plex Mono',monospace; color:var(--accent); letter-spacing:0;
}
@media(prefers-reduced-motion:reduce){ .win-gauge-fill{ transition:none; } }

.stat-icon{ display:block; font-size:1rem; margin:4px 0 4px; opacity:.9; color:var(--text-dim); }
.stat-card .n{ display:block; font-size:1.4rem; letter-spacing:0; font-family:'IBM Plex Mono',monospace; font-weight:600; }
.stat-card .l{ display:block; font-size:.66rem; color:var(--text-dim); font-weight:600; text-transform:uppercase; letter-spacing:.5px; margin-top:6px; font-family:'Inter',sans-serif; }

/* SECTIONS */
.section{ padding:40px 0 30px; }
.section-head{ display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:26px; border-bottom:1px solid var(--line); padding-bottom:16px; }
.section-head h2{ font-size:clamp(1.5rem,3vw,1.9rem); margin:0; letter-spacing:-.01em; color:var(--text); }
.section-head p{ margin:0; color:var(--text-dim); font-size:.86rem; font-family:'Inter',sans-serif; }

/* CARD GRID (articles) */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:transform .18s ease, border-color .18s ease; position:relative; }
.card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); opacity:.8; z-index:1; }
.card:hover{ transform:translateY(-3px); border-color:var(--line-strong); }
.card-body{ padding:20px 22px 22px; }
.card h3{ margin:0 0 10px; font-size:1.06rem; line-height:1.4; letter-spacing:-.005em; font-family:'Sora',sans-serif; font-weight:600; color:var(--text); }
.card p{ margin:0; color:var(--text-dim); font-size:.88rem; line-height:1.6; font-family:'Inter',sans-serif; }
.card-meta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:15px; color:var(--text-dim); font-size:.72rem; font-weight:600; }
.card-meta span + span::before{ content:"·"; margin-right:5px; opacity:.6; }
.post-thumb{ aspect-ratio:16/9; object-fit:cover; background:var(--surface-2); width:100%; }
.thumb-fallback{ aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; font-size:24px; background:var(--surface-2); }

/* VERIFIED RESULTS */
.results-summary{ display:flex; align-items:baseline; gap:10px; margin:-6px 0 18px; flex-wrap:wrap; }
.results-summary-score{ font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:1.3rem; color:var(--accent); }
.results-summary-label{ font-size:.85rem; color:var(--text-dim); font-weight:500; font-family:'Inter',sans-serif; }

.results-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.result-card{
	position:relative; overflow:hidden;
	background:var(--surface);
	border:1px solid var(--line); border-radius:12px; padding:16px 18px;
	transition:border-color .15s ease;
}
.result-card:hover{ border-color:var(--line-strong); }
.result-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; }
.result-card-won::before{ background:var(--win); }
.result-card-lost::before{ background:var(--live); }
.result-card-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; }
.result-card-match{ font-weight:600; font-size:.92rem; font-family:'Sora',sans-serif; color:var(--text); }
.result-team-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:middle; box-shadow:0 0 0 1px rgba(230,237,243,.15); }
.result-vs{ margin:0 5px; font-size:.66rem; font-weight:600; color:var(--text-dim); text-transform:uppercase; vertical-align:middle; }
.result-card-bottom{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.result-card-date{ font-size:.74rem; color:var(--text-dim); }
.result-card-pick{ font-size:.8rem; color:var(--text-dim); font-family:'Inter',sans-serif; }
.result-card-pick strong{ color:var(--text); }
.result-card-odds{ margin-left:5px; color:var(--accent); font-weight:600; }

.status{ display:inline-flex; padding:4px 11px; border-radius:999px; font-size:.7rem; font-weight:700; font-family:'Inter',sans-serif; }
.status-won{ background:rgba(47,191,113,.1); color:var(--win); border:1px solid rgba(47,191,113,.3); }
.status-lost{ background:rgba(255,84,112,.08); color:var(--live); border:1px solid rgba(255,84,112,.26); }

@media(max-width:560px){ .results-grid{ grid-template-columns:1fr; } }

/* BREADCRUMB — visible trail on articles, both for orientation and
   because it's a genuine SEO signal (Google surfaces this as the
   result's URL path in search when BreadcrumbList schema matches). */
.xs-breadcrumb{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:.8rem; color:var(--text-dim); margin-bottom:18px; font-family:'Inter',sans-serif; }
.xs-breadcrumb a{ color:var(--text-dim); font-weight:500; }
.xs-breadcrumb a:hover{ color:var(--accent); }
.xs-breadcrumb .sep{ opacity:.5; }
.xs-breadcrumb .current{ color:var(--text); font-weight:600; }

/* TIP TABLE / RESULTS */
.tip-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:var(--shadow); }
.tip-table{ width:100%; border-collapse:collapse; min-width:560px; }
.tip-table th{ padding:14px 16px; text-align:left; background:var(--surface-2); color:var(--text); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; font-family:'Inter',sans-serif; font-weight:600; }
.tip-table td{ padding:14px 16px; border-top:1px solid var(--line); color:var(--text); font-size:.9rem; font-family:'Inter',sans-serif; }
.tip-table tbody tr:nth-child(even) td{ background:rgba(230,237,243,.012); }
.tip-table tr:hover td{ background:rgba(76,111,255,.05); }
.date-relative{ display:block; font-size:.72rem; color:var(--text-dim); font-weight:500; margin-top:2px; }

@media(max-width:580px){
	.tip-table-wrap{ overflow:visible; border:none; background:none; box-shadow:none; }
	.tip-table{ min-width:0; }
	.tip-table thead{ display:none; }
	.tip-table, .tip-table tbody, .tip-table tr, .tip-table td{ display:block; width:100%; }
	.tip-table tr{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:6px 4px; margin-bottom:10px; }
	.tip-table td{ display:flex; justify-content:space-between; align-items:center; padding:9px 14px; border-top:none; font-size:.88rem; }
	.tip-table td::before{ content:attr(data-label); font-weight:700; font-size:.66rem; text-transform:uppercase; letter-spacing:.4px; color:var(--accent); margin-right:12px; font-family:'Inter',sans-serif; }
}

/* CONTENT TABLES */
.xs-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:var(--shadow); margin:26px 0; position:relative; }
.xs-table-wrap table{ display:table; width:100%; border-collapse:collapse; min-width:480px; margin:0; }
.xs-table-wrap th{ padding:14px 16px; text-align:left; background:var(--surface-2); color:var(--text); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; font-family:'Inter',sans-serif; font-weight:600; white-space:nowrap; }
.xs-table-wrap td{ padding:13px 16px; border-top:1px solid var(--line); color:var(--text); font-size:.9rem; font-family:'Inter',sans-serif; }
.xs-table-wrap tbody tr:nth-child(even) td{ background:rgba(230,237,243,.012); }
.xs-table-wrap tr:hover td{ background:rgba(76,111,255,.05); }
.xs-table-wrap caption{ caption-side:top; padding:12px 16px 0; text-align:left; font-size:.8rem; color:var(--text-dim); font-family:'Inter',sans-serif; }
.xs-table-wrap.xs-scrollable::after{ content:""; position:absolute; top:2px; right:2px; bottom:2px; width:28px; background:linear-gradient(90deg, transparent, var(--surface) 88%); pointer-events:none; border-radius:0 12px 12px 0; }

@media(max-width:580px){
	.xs-table-wrap{ border:none; background:none; box-shadow:none; overflow:visible; }
	.xs-table-wrap.xs-scrollable::after{ display:none; }
	.xs-table-wrap table{ min-width:0; }
	.xs-table-wrap thead{ display:none; }
	.xs-table-wrap table, .xs-table-wrap tbody, .xs-table-wrap tr, .xs-table-wrap td{ display:block; width:100%; }
	.xs-table-wrap tr{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:4px 4px; margin-bottom:10px; }
	.xs-table-wrap td{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 14px; border-top:none; font-size:.88rem; text-align:right; }
	.xs-table-wrap td::before{ content:attr(data-label); font-weight:700; font-size:.64rem; text-transform:uppercase; letter-spacing:.4px; color:var(--accent); margin-right:auto; text-align:left; font-family:'Inter',sans-serif; }
	.xs-table-wrap td:not([data-label]){ justify-content:flex-start; }
}

/* SINGLE POST LAYOUT */
.content-layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:32px; padding:40px 0 60px; }
.article{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,4vw,44px); overflow-wrap:break-word; }
.article h1{ font-family:'Sora',sans-serif; font-weight:700; font-size:clamp(1.9rem,4.2vw,2.7rem); line-height:1.15; letter-spacing:-.02em; margin:0 0 16px; color:var(--text); }
.article h2, .article h3{ line-height:1.35; letter-spacing:-.01em; font-family:'Sora',sans-serif; font-weight:600; color:var(--text); margin-top:1.7em; }
.article p, .article li{ color:var(--text); font-size:1.05rem; line-height:1.8; font-family:'Inter',sans-serif; }
.article-meta{ color:var(--text-dim); font-size:.85rem; margin-bottom:24px; font-weight:500; }
.article img{ border-radius:10px; margin:20px 0; border:1px solid var(--line); }
.article a{ color:var(--accent); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:2px; font-weight:500; }

/* SHARE BUTTONS */
.share-buttons{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:30px; padding-top:24px; border-top:1px solid var(--line); }
.share-label{ font-size:.82rem; font-weight:600; color:var(--text-dim); margin-right:4px; font-family:'Inter',sans-serif; }
.share-btn{ display:inline-flex; align-items:center; padding:8px 16px; border-radius:8px; font-size:.82rem; font-weight:600; border:1px solid var(--line-strong); cursor:pointer; font-family:'Inter',sans-serif; transition:border-color .15s ease; }
.share-btn:hover{ border-color:var(--accent); }
.share-whatsapp{ background:#25D366; color:#04140b; border-color:#25D366; }
.share-facebook{ background:#1877F2; color:#fff; border-color:#1877F2; }
.share-twitter{ background:var(--text); color:var(--bg); border-color:var(--text); }
.share-copy{ background:transparent; color:var(--text); }

/* NEXT / PREVIOUS POST NAVIGATION */
.post-nav{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px; }
.post-nav-link{ display:block; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 18px; transition:border-color .15s ease; }
.post-nav-link:hover{ border-color:var(--line-strong); }
.post-nav-next{ text-align:right; grid-column:2; }
.post-nav-prev{ grid-column:1; }
.post-nav-label{ display:block; font-size:.72rem; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px; font-family:'Inter',sans-serif; }
.post-nav-title{ display:block; font-size:.86rem; font-weight:500; color:var(--text); line-height:1.4; font-family:'Inter',sans-serif; }

@media(max-width:560px){
	.post-nav{ grid-template-columns:1fr; }
	.post-nav-next{ grid-column:1; text-align:left; }
	.share-buttons{ gap:6px; }
	.share-btn{ padding:7px 13px; font-size:.78rem; }
}

.sidebar{ display:grid; gap:18px; align-content:start; }
.widget{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px; }
.widget-title{ margin:0 0 14px; color:var(--accent); font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-family:'Inter',sans-serif; }
.widget-list{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.widget-list li a{ font-size:.88rem; font-weight:500; color:var(--text); display:block; line-height:1.45; font-family:'Inter',sans-serif; }
.widget-list li a:hover{ color:var(--accent); }
.widget-list .meta{ display:block; font-size:.72rem; color:var(--text-dim); margin-top:3px; font-weight:500; }

/* PAGE (no sidebar) */
.page-layout{ padding:40px 0 60px; }

/* NOTICE */
.xs-notice{ background:var(--surface); border:1px dashed var(--line-strong); color:var(--text-dim); border-radius:12px; padding:16px 20px; font-size:.85rem; font-weight:500; margin-top:28px; font-family:'Inter',sans-serif; }

/* PAGINATION */
.pagination, .navigation.pagination{ display:flex; gap:8px; justify-content:center; margin-top:32px; flex-wrap:wrap; }
.page-numbers{ padding:10px 14px; border-radius:8px; background:var(--surface); border:1px solid var(--line); color:var(--text); font-weight:600; font-size:.85rem; font-family:'Inter',sans-serif; }
.page-numbers.current{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* FOOTER */
.site-footer{ border-top:1px solid var(--line); padding:0; background:var(--surface); color:var(--text-dim); position:relative; overflow:hidden; }

.footer-cta{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:26px 0; margin-top:0; border-bottom:1px solid var(--line); }
.footer-cta-text{ display:flex; flex-direction:column; gap:3px; }
.footer-cta-text strong{ color:var(--text); font-size:1rem; font-family:'Sora',sans-serif; font-weight:600; }
.footer-cta-text span{ font-size:.85rem; color:var(--text-dim); font-family:'Inter',sans-serif; }
.footer-cta-btn{ min-height:auto; padding:12px 24px; font-size:.85rem; flex-shrink:0; background:var(--accent); color:#fff; border-color:var(--accent); }

.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; padding:44px 0 40px; border-bottom:1px solid var(--line); }
.footer-col{ display:flex; flex-direction:column; gap:12px; padding-left:26px; border-left:1px solid var(--line); position:relative; }
.footer-col.footer-brand-col{ padding-left:0; border-left:none; }
.footer-brand{ display:flex; align-items:center; gap:10px; font-size:1.15rem; color:var(--text); margin-bottom:6px; }
.footer-brand::before{ content:""; width:8px; height:8px; border-radius:3px; background:var(--accent); }
.footer-blurb{ font-size:.86rem; line-height:1.65; color:var(--text-dim); margin:0; max-width:290px; font-family:'Inter',sans-serif; }
.footer-whatsapp{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; color:#25D366 !important; font-weight:600; font-size:.85rem; width:fit-content; font-family:'Inter',sans-serif; }
.footer-heading{ font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin:0 0 6px; position:relative; padding-bottom:11px; color:var(--text); }
.footer-heading::after{ content:""; position:absolute; left:0; bottom:0; width:22px; height:2px; border-radius:2px; background:var(--accent); }

.footer-col a{ font-size:.87rem; font-weight:400; color:var(--text-dim); transition:color .15s ease; position:relative; width:fit-content; font-family:'Inter',sans-serif; }
.footer-col a:hover{ color:var(--accent); }
.footer-staff-link{ opacity:.55; }

.footer-bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:22px 0 26px; }
.footer-copy{ font-size:.8rem; margin:0; font-family:'Inter',sans-serif; }
.footer-disclaimer{ font-size:.78rem; margin:0; color:var(--text-dim); font-family:'Inter',sans-serif; }
.footer-disclaimer strong{ color:var(--text); }
.footer-top-link{ font-size:.8rem; font-weight:600; color:var(--text-dim); transition:color .15s ease; font-family:'Inter',sans-serif; }
.footer-top-link:hover{ color:var(--accent); }

@media(max-width:820px){
	.footer-grid{ grid-template-columns:1fr 1fr; row-gap:26px; }
	.footer-brand-col{ grid-column:1 / -1; padding-left:0; border-left:none; }
	.footer-blurb{ max-width:100%; }
	.footer-col:nth-child(2), .footer-col:nth-child(4){ padding-left:0; border-left:none; }
}
@media(max-width:600px){
	.footer-cta{ flex-direction:column; align-items:flex-start; }
	.footer-cta-btn{ width:100%; text-align:center; }
	.footer-grid{ grid-template-columns:1fr; gap:24px; padding-bottom:28px; }
	.footer-col{ padding-left:0; border-left:none; padding-top:20px; border-top:1px solid var(--line); }
	.footer-col.footer-brand-col{ padding-top:0; border-top:none; }
	.footer-bottom{ flex-direction:column; align-items:flex-start; padding-bottom:110px; }
	.site-footer{ padding-top:40px; }
}

/* WELCOME TOAST */
.xs-welcome-toast{
	display:flex; align-items:center; gap:12px;
	position:fixed; left:14px; right:14px; z-index:80;
	top:calc(14px + env(safe-area-inset-top));
	background:var(--surface-2);
	backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
	border:1px solid var(--line-strong); border-radius:14px; padding:14px 14px;
	box-shadow:var(--shadow-lg);
	opacity:0; transform:translateY(-16px);
	transition:opacity .3s ease, transform .3s ease;
	max-width:500px; margin:0 auto;
}
.xs-welcome-toast.show{ opacity:1; transform:translateY(0); }
.xs-welcome-icon{ width:36px; height:36px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(76,111,255,.12); border:1px solid rgba(76,111,255,.3); color:var(--accent); }
.xs-welcome-icon svg{ width:18px; height:18px; }
.xs-welcome-text{ flex:1; display:flex; flex-direction:column; gap:1px; min-width:0; font-family:'Inter',sans-serif; }
.xs-welcome-text strong{ font-size:.86rem; color:var(--text); }
.xs-welcome-text span{ font-size:.74rem; color:var(--text-dim); }
.xs-welcome-btn{ background:var(--accent); color:#fff; padding:9px 15px; border-radius:8px; font-weight:700; font-size:.78rem; flex-shrink:0; white-space:nowrap; font-family:'Inter',sans-serif; transition:background .15s ease; }
.xs-welcome-btn:hover{ background:var(--accent-2); }
.xs-welcome-close{ background:none; border:none; color:var(--text-dim); font-size:1.2rem; line-height:1; padding:2px 4px; cursor:pointer; flex-shrink:0; }

/* INSTALL APP PROMPT */
.xs-install-prompt{
	display:none; align-items:center; gap:14px;
	position:fixed; left:14px; right:14px; bottom:14px; z-index:65;
	background:var(--surface-2);
	backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
	border:1px solid var(--line-strong); border-radius:16px; padding:16px 16px;
	box-shadow:var(--shadow-lg);
}
.xs-install-prompt.show{ display:flex; }
.xs-install-icon{ width:40px; height:40px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(76,111,255,.12); border:1px solid rgba(76,111,255,.3); color:var(--accent); }
.xs-install-icon svg{ width:20px; height:20px; }
.xs-install-text{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; font-family:'Inter',sans-serif; }
.xs-install-text strong{ font-size:.9rem; color:var(--text); }
.xs-install-text span{ font-size:.76rem; color:var(--text-dim); line-height:1.35; }
.xs-install-btn{ background:var(--accent); color:#fff; border:none; padding:10px 18px; border-radius:8px; font-weight:700; font-size:.83rem; flex-shrink:0; cursor:pointer; font-family:'Inter',sans-serif; transition:background .15s ease; }
.xs-install-btn:hover{ background:var(--accent-2); }
.xs-install-close{ background:none; border:none; color:var(--text-dim); font-size:1.3rem; line-height:1; padding:4px 6px; cursor:pointer; flex-shrink:0; }

@media(max-width:900px){
	.xs-install-prompt.show{ bottom:calc(78px + env(safe-area-inset-bottom)); }
}

/* BOTTOM NAV */
.xs-bottom-nav{
	display:none; position:fixed; left:14px; right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:60;
	background:rgba(22,27,34,.92);
	backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%);
	border:1px solid var(--line-strong); border-radius:18px;
	padding:8px 10px;
	box-shadow:var(--shadow-lg);
}
.xs-bottom-nav-inner{ display:flex; justify-content:space-between; align-items:center; max-width:520px; margin:0 auto; }
.xs-bn-item{ display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--text-dim); padding:4px 3px; text-decoration:none; flex:1; font-family:'Inter',sans-serif; }
.xs-bn-circle{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:transparent; border:1px solid transparent; transition:background .2s ease, border-color .2s ease, color .2s ease; }
.xs-bn-circle svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.9; }
.xs-bn-label{ font-size:8.8px; font-weight:600; transition:color .2s ease; white-space:nowrap; }

.xs-bn-item:hover .xs-bn-circle, .xs-bn-item.active .xs-bn-circle{ background:rgba(76,111,255,.14); border-color:var(--accent); color:var(--accent); }
.xs-bn-item:hover, .xs-bn-item.active{ color:var(--accent); }
.xs-bn-item.active .xs-bn-label{ color:var(--accent); }

.site-nav{ overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.site-nav::-webkit-scrollbar{ display:none; }
.site-nav ul{ flex-wrap:nowrap; }

@media(min-width:901px) and (max-width:1240px){
	.header-inner{ gap:10px; }
	.brand{ font-size:1.2rem; gap:8px; }
	.site-nav a{ padding:8px 10px; font-size:.8rem; }
	.nav-login-btn{ padding:8px 14px; font-size:.8rem; }
	.nav-app-btn span{ display:none; }
	.nav-app-btn{ padding:9px; }
}

@media(max-width:900px){
	.site-nav{ display:none; }
	.xs-bottom-nav{ display:block; }
	.grid{ grid-template-columns:1fr 1fr; }
	.content-layout{ grid-template-columns:1fr; }
	.nav-app-btn span{ display:none; }
	.nav-app-btn{ padding:9px; }
}

@media(max-width:620px){
	.hero{ padding-top:28px; }
	.hero-panel{ border-radius:14px; }
	.grid{ grid-template-columns:1fr; }
	.section-head{ align-items:flex-start; flex-direction:column; }
	.header-inner{ min-height:68px; }
	.site-footer{ padding-bottom:100px; }
	.stats-grid{ grid-template-columns:repeat(2,1fr); }
	.stat-card{ padding:16px 6px; border-bottom:1px solid var(--line); }
	.stat-card:nth-child(odd){ border-right:1px solid var(--line); }
	.stat-card .n{ font-size:1.15rem; }
}

@media(max-width:400px){
	.container{ width:calc(100% - 20px); }
	.header-inner{ gap:8px; padding:12px 0; }
	.brand{ font-size:1.05rem; gap:8px; }
	.nav-login-btn{ padding:11px 14px; font-size:.76rem; }

	.hero-panel{ padding:24px 18px; border-radius:12px; }
	.hero h1{ font-size:1.65rem; }
	.hero p{ font-size:.9rem; }
	.btn{ padding:0 18px; min-height:44px; font-size:.85rem; }

	.stat-card{ padding:12px 4px; }
	.stat-card .n{ font-size:1rem; }
	.stat-card .l{ font-size:.6rem; }

	.section-head h2{ font-size:1.2rem; }
	.card-body{ padding:14px 16px; }
	.card h3{ font-size:.95rem; }

	.article{ padding:18px 16px; border-radius:12px; }
	.article h1{ font-size:1.55rem; }
	.article p, .article li{ font-size:1rem; line-height:1.75; }
	.article-meta{ font-size:.8rem; }

	.widget{ padding:16px; border-radius:12px; }

	.xs-bn-circle{ width:30px; height:30px; }
	.xs-bn-circle svg{ width:15px; height:15px; }
	.xs-bn-label{ font-size:7.8px; }
	.xs-bn-item{ padding:3px 1px; }
	.xs-bottom-nav{ left:6px; right:6px; padding:6px 4px; border-radius:16px; }

	.share-buttons{ gap:5px; }
	.share-label{ width:100%; margin-bottom:4px; }
	.share-btn{ padding:6px 11px; font-size:.74rem; }
}

/* SCROLL REVEAL */
.xs-reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.xs-reveal.xs-revealed{ opacity:1; transform:translateY(0); }
@media(prefers-reduced-motion:reduce){ .xs-reveal{ opacity:1; transform:none; transition:none; } }

/* READING PROGRESS BAR */
.xs-progress-bar{ position:fixed; top:0; left:0; height:3px; width:0%; z-index:100; background:var(--accent); transition:width .1s linear; }

/* AD MANAGER — a fixed min-height on every slot prevents layout shift
   (CLS) once the ad script actually loads, which matters both for
   Core Web Vitals and for AdSense's own policy on stable layouts. */
.xs-ad-slot{ display:flex; align-items:center; justify-content:center; width:100%; min-height:60px; overflow:hidden; margin:24px 0; }
.xs-ad-slot:empty{ display:none; margin:0; }
.xs-ad-slot::before{ content:"Advertisement"; display:block; width:100%; text-align:center; font-family:'Inter',sans-serif; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); opacity:.6; margin-bottom:6px; position:absolute; margin-top:-20px; }
.xs-ad-slot{ position:relative; padding-top:18px; }
.card + .xs-ad-slot, .result-card + .xs-ad-slot{ grid-column:1 / -1; }

.xs-sticky-ad{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:59; background:var(--surface); border-top:1px solid var(--line); padding:8px 34px 8px 8px; box-shadow:0 -8px 24px rgba(0,0,0,.35); }
.xs-sticky-ad-close{ position:absolute; top:6px; right:8px; width:22px; height:22px; line-height:20px; border-radius:50%; border:1px solid var(--line); background:var(--bg); color:var(--text); font-size:16px; cursor:pointer; padding:0; }
@media(max-width:900px){
	.xs-sticky-ad{ display:block; bottom:calc(78px + env(safe-area-inset-bottom)); }
	.xs-sticky-ad .xs-ad-slot{ margin:0; min-height:50px; }
	.xs-sticky-ad .xs-ad-slot::before{ display:none; }
}