/*
Theme Name: PCT Livescore
Theme URI: https://pct.eu.com
Version: 7.0
Description: Live Football Scores - Tỷ số bóng đá trực tiếp
Author: PCT Team
Requires PHP: 7.4
*/

/* ============================================================
   Design Tokens
   ============================================================ */
:root {
    --c-bg: #0a0b0d;
    --c-surface: #14151a;
    --c-surface-2: #1c1d24;
    --c-surface-3: #24252e;
    --c-border: rgba(255,255,255,0.07);
    --c-border-2: rgba(255,255,255,0.12);
    --c-text: #e8e9ed;
    --c-text-2: #9196a1;
    --c-text-3: #5e6370;
    --c-accent: #e63946;
    --c-accent-h: #d62839;
    --c-live: #00e676;
    --c-blue: #448aff;
    --c-gold: #ffc400;
    --c-ucl: rgba(0,230,118,0.12);
    --c-uel: rgba(68,138,255,0.12);
    --c-rel: rgba(230,57,70,0.12);
    --radius: 10px;
    --radius-sm: 6px;
    --shadow: 0 2px 12px rgba(0,0,0,0.25);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.35);
    --transition: 0.2s cubic-bezier(0.4,0,0.2,1);
    /* Legacy aliases */
    --primary: var(--c-accent);
    --bg: var(--c-bg);
    --card: var(--c-surface);
    --card-hover: var(--c-surface-2);
    --text: var(--c-text);
    --text-gray: var(--c-text-2);
    --border: var(--c-border);
    --live: var(--c-live);
}

/* ============================================================
   Reset & Base
   ============================================================ */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
    font-family:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background:var(--c-bg); color:var(--c-text); font-size:14px; line-height:1.6;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; display:block; }
button { font-family:inherit; cursor:pointer; }
.container { max-width:1280px; margin:0 auto; padding:0 16px; }

/* Skip link for accessibility */
.skip-link { position:absolute; top:-100%; left:16px; background:var(--c-accent); color:#fff; padding:12px 24px; border-radius:0 0 8px 8px; z-index:10000; font-weight:600; }
.skip-link:focus { top:0; }

/* ============================================================
   Header
   ============================================================ */
.site-header {
    background:rgba(10,11,13,0.92); backdrop-filter:blur(12px) saturate(180%);
    -webkit-backdrop-filter:blur(12px) saturate(180%);
    position:sticky; top:0; z-index:100; border-bottom:1px solid var(--c-border);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; height:56px; }

.logo { display:flex; align-items:center; gap:8px; font-weight:700; font-size:17px; }
.logo-mark {
    background:linear-gradient(135deg,var(--c-accent),#ff6b6b);
    color:#fff; padding:5px 10px; border-radius:7px; font-size:13px; font-weight:800; letter-spacing:0.5px;
}
.logo-text { color:var(--c-text); }

/* Legacy alias */
.logo-icon { background:var(--c-accent); color:white; padding:6px 10px; border-radius:8px; font-size:14px; font-weight:800; }

.main-nav { display:flex; align-items:center; gap:2px; }
.nav-link { display:flex; align-items:center; gap:5px; padding:7px 13px; border-radius:7px; font-size:13px; font-weight:500; color:var(--c-text-2); transition:var(--transition); }
.nav-link:hover { background:var(--c-surface-2); color:var(--c-text); }
.nav-link svg { opacity:0.6; }
.nav-live { color:var(--c-live); font-weight:600; }

.live-dot { width:7px; height:7px; background:var(--c-live); border-radius:50%; display:inline-block; animation:pulse 1.5s ease infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.85)} }

.header-actions { display:flex; align-items:center; gap:10px; }
.btn-register {
    display:inline-block; padding:8px 20px; background:linear-gradient(135deg,var(--c-accent),#ff4757);
    color:#fff; border-radius:7px; font-weight:600; font-size:13px; transition:var(--transition);
    text-shadow:0 1px 2px rgba(0,0,0,0.2);
}
.btn-register:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(230,57,70,0.4); color:#fff; }
.menu-toggle { display:none; background:none; border:none; color:var(--c-text); padding:6px; }

/* League bar */
.league-bar { background:var(--c-surface); border-bottom:1px solid var(--c-border); overflow:hidden; }
.league-scroll { display:flex; gap:4px; padding:8px 0; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.league-scroll::-webkit-scrollbar { display:none; }
.league-bar a { padding:5px 11px; font-size:12px; color:var(--c-text-2); border-radius:5px; white-space:nowrap; transition:var(--transition); }
.league-bar a:hover { background:var(--c-surface-2); color:var(--c-text); }
/* legacy alias */
.league-nav { background:var(--c-surface); padding:10px 0; overflow-x:auto; white-space:nowrap; }
.league-nav .container { display:flex; gap:8px; }
.league-nav a { padding:6px 12px; font-size:12px; color:var(--c-text-2); border-radius:6px; }
.league-nav a:hover { background:var(--c-surface-2); color:white; }

/* Dropdown */
.nav-dropdown { position:relative; }
.dropdown-trigger { cursor:pointer; }
.dropdown-menu {
    position:absolute; top:calc(100% + 6px); left:0; background:var(--c-surface);
    border:1px solid var(--c-border-2); border-radius:var(--radius); padding:6px 0;
    min-width:200px; display:none; z-index:1000; box-shadow:var(--shadow-lg);
}
.dropdown-menu a { display:block; padding:9px 16px; font-size:13px; color:var(--c-text-2); transition:var(--transition); }
.dropdown-menu a:hover { background:var(--c-surface-2); color:var(--c-text); }
.nav-dropdown:hover .dropdown-menu { display:block; }

/* ============================================================
   Mobile Menu
   ============================================================ */
.mobile-menu {
    position:fixed; top:0; left:-300px; width:300px; height:100%;
    background:var(--c-surface); z-index:1001; transition:left 0.3s ease; overflow-y:auto;
    box-shadow:var(--shadow-lg);
}
.mobile-menu.active { left:0; }
.mobile-menu-header { display:flex; justify-content:space-between; align-items:center; padding:16px; border-bottom:1px solid var(--c-border); }
.close-menu { background:none; border:none; color:var(--c-text); padding:4px; }
.mobile-menu nav { padding:12px; }
.mobile-menu nav a { display:block; padding:11px 12px; color:var(--c-text-2); border-radius:7px; margin-bottom:2px; font-size:14px; transition:var(--transition); }
.mobile-menu nav a:hover { background:var(--c-surface-2); color:var(--c-text); }
.mobile-divider { height:1px; background:var(--c-border); margin:12px 0; }
.mobile-label { display:block; padding:8px 12px; font-size:12px; font-weight:600; color:var(--c-text-3); text-transform:uppercase; letter-spacing:0.5px; }
.mobile-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:1000; display:none; backdrop-filter:blur(2px); }
.mobile-overlay.active { display:block; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
    padding:40px 0 28px; text-align:center;
    background:radial-gradient(ellipse at 50% 0%, rgba(230,57,70,0.08) 0%, transparent 70%);
}
.hero h1 { font-size:30px; font-weight:800; letter-spacing:-0.5px; }
.text-accent { color:var(--c-accent); }
.hero-desc { color:var(--c-text-2); margin:6px 0 20px; font-size:14px; }
.hero-stats { display:flex; justify-content:center; gap:12px; }
.stat-chip {
    display:flex; align-items:center; gap:6px; padding:8px 16px;
    background:var(--c-surface); border:1px solid var(--c-border); border-radius:20px;
    font-size:13px; color:var(--c-text-2);
}
.stat-chip strong { color:var(--c-text); font-size:16px; }
.stat-live { border-color:rgba(0,230,118,0.3); }
.stat-live strong { color:var(--c-live); }
/* legacy */
.stat { text-align:center; }
.stat span { font-size:28px; font-weight:700; color:var(--c-accent); display:block; }

/* Trust bar */
.trust-bar { background:var(--c-surface); padding:10px 0; border-bottom:1px solid var(--c-border); }
.trust-items { display:flex; justify-content:center; flex-wrap:wrap; gap:20px; font-size:12px; color:var(--c-text-2); }
.trust-items span { display:flex; align-items:center; gap:5px; }

/* ============================================================
   Layout
   ============================================================ */
.main-layout {
    display:grid; grid-template-columns:1fr 340px; gap:24px; padding:20px 0 48px;
}
.content-primary { min-width:0; }
.content-sidebar { }
/* legacy aliases */
.main-content { display:grid; grid-template-columns:1fr 360px; gap:24px; padding:24px 0 48px; }
.content-column { min-width:0; }

/* ============================================================
   Date Nav
   ============================================================ */
.date-nav { display:flex; gap:6px; margin-bottom:18px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.date-nav::-webkit-scrollbar { display:none; }
.date-btn {
    display:flex; align-items:center; gap:5px; padding:9px 16px; background:var(--c-surface);
    border:1px solid var(--c-border); border-radius:8px; color:var(--c-text-2);
    font-size:13px; white-space:nowrap; font-weight:500; transition:var(--transition);
}
.date-btn:hover { border-color:var(--c-accent); color:var(--c-text); }
.date-btn.active { background:var(--c-accent); border-color:var(--c-accent); color:#fff; }

/* ============================================================
   Content Sections
   ============================================================ */
.content-section { margin-top:28px; background:var(--c-surface); border-radius:var(--radius); overflow:hidden; border:1px solid var(--c-border); }
.content-section-full { margin-top:28px; }
.section-head {
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 18px; border-bottom:1px solid var(--c-border);
}
.section-head h2 { font-size:16px; font-weight:700; margin:0; display:flex; align-items:center; gap:8px; }
.section-ico { font-size:20px; }
.btn-viewall {
    padding:6px 14px; background:var(--c-accent); color:#fff;
    border-radius:var(--radius-sm); font-size:11px; font-weight:600; transition:var(--transition);
}
.btn-viewall:hover { background:var(--c-accent-h); color:#fff; }
/* legacy */
.section-header-full { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; background:var(--c-surface-2); border-bottom:1px solid var(--c-border); }
.section-title { display:flex; align-items:center; gap:12px; }
.section-icon { font-size:24px; }
.section-title h2 { font-size:18px; margin:0; }
.view-all-btn { padding:8px 16px; background:var(--c-accent); color:white; border-radius:6px; font-size:12px; }
.view-all-btn:hover { opacity:0.9; color:white; }

/* Cards grid */
.cards-grid { display:grid; gap:1px; background:var(--c-border); }
.cards-3 { grid-template-columns:repeat(3,1fr); }
.cards-4 { grid-template-columns:repeat(4,1fr); }
.card-item { background:var(--c-surface); padding:16px; transition:var(--transition); }
.card-item:hover { background:var(--c-surface-2); }
.card-item h3 { font-size:14px; line-height:1.5; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-item h3 a { color:var(--c-text); }
.card-item h3 a:hover { color:var(--c-accent); }
.card-tags { display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.card-sub { font-size:12px; color:var(--c-text-2); }
.card-rec { border-top:2px solid var(--c-gold); }
.card-rec p { font-size:13px; color:var(--c-text-2); line-height:1.5; margin:8px 0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.link-more { font-size:12px; color:var(--c-accent); font-weight:500; }
.empty-state { padding:32px; text-align:center; color:var(--c-text-2); grid-column:1/-1; background:var(--c-surface); }

/* Tags */
.tag { display:inline-block; font-size:10px; padding:3px 8px; border-radius:4px; font-weight:500; background:var(--c-surface-3); color:var(--c-text-2); }
.tag-blue { background:rgba(68,138,255,0.15); color:var(--c-blue); }
.tag-green { background:rgba(0,230,118,0.12); color:var(--c-live); }
.tag-red { background:var(--c-accent); color:#fff; font-weight:600; }
.tag-gold { background:linear-gradient(135deg,#ffc400,#ff9800); color:#000; font-weight:600; }
/* legacy badge system */
.badge { display:inline-block; font-size:10px; padding:4px 8px; border-radius:4px; font-weight:500; }
.badge.preview { background:rgba(68,138,255,0.2); color:var(--c-blue); }
.badge.review { background:rgba(0,230,118,0.15); color:var(--c-live); }
.badge.news { background:rgba(230,57,70,0.2); color:var(--c-accent); }
.badge.league { background:rgba(255,255,255,0.1); color:var(--c-text-2); }
.badge-league { font-size:10px; padding:3px 8px; background:rgba(68,138,255,0.2); color:var(--c-blue); border-radius:4px; }
.badge-time { font-size:10px; padding:3px 8px; background:rgba(0,230,118,0.15); color:var(--c-live); border-radius:4px; }
.badge-score { font-size:10px; padding:3px 8px; background:var(--c-accent); color:white; border-radius:4px; font-weight:600; }
.badge-type { font-size:10px; }
.card-badge { position:absolute; top:12px; left:12px; padding:6px 12px; border-radius:6px; font-size:11px; font-weight:600; }
.card-badge.preview { background:rgba(68,138,255,0.9); color:white; }
.card-badge.review { background:rgba(0,230,118,0.9); color:white; }
.card-badge.news { background:rgba(230,57,70,0.9); color:white; }
.card-badge.recommendation { background:rgba(255,196,0,0.9); color:#000; }

/* ============================================================
   Match Display
   ============================================================ */
.league-group { background:var(--c-surface); border-radius:var(--radius); margin-bottom:14px; overflow:hidden; border:1px solid var(--c-border); }
.league-group.is-live { border-color:rgba(0,230,118,0.25); }
.league-header {
    display:flex; align-items:center; gap:8px; padding:10px 14px;
    background:var(--c-surface-2); border-bottom:1px solid var(--c-border);
}
.league-header img { width:22px; height:22px; border-radius:3px; }
.league-header span { font-size:13px; font-weight:600; }
.live-badge { margin-left:auto; background:rgba(0,230,118,0.15); color:var(--c-live); padding:2px 10px; border-radius:4px; font-size:10px; font-weight:700; letter-spacing:0.5px; }
/* legacy aliases */
.league-section { background:var(--c-surface); border-radius:var(--radius); margin-bottom:16px; overflow:hidden; }
.league-section.live { border:1px solid rgba(0,230,118,0.3); }

.match { display:flex; align-items:center; padding:10px 14px; border-bottom:1px solid var(--c-border); transition:var(--transition); }
.match:last-child { border-bottom:none; }
.match:hover { background:rgba(255,255,255,0.02); }
.match.is-live,.match.live { background:rgba(0,230,118,0.04); }
.match-time { width:48px; font-size:11px; color:var(--c-text-2); text-align:center; font-weight:500; }
.match.is-live .match-time,.match.live .match-time { color:var(--c-live); font-weight:600; }
.match-teams { flex:1; min-width:0; }
.match-teams .team { display:flex; align-items:center; gap:7px; padding:2px 0; }
.match-teams .team img { width:18px; height:18px; border-radius:2px; }
.match-teams .team span { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.match-score { width:38px; text-align:center; }
.match-score span { display:block; font-weight:700; font-size:14px; }
.match-score.is-live span,.match-score.live span { color:var(--c-live); }

/* ============================================================
   Sidebar
   ============================================================ */
.sidebar-widget {
    background:var(--c-surface); border-radius:var(--radius); margin-bottom:16px;
    overflow:hidden; border:1px solid var(--c-border);
}
.sidebar-widget h3 { padding:14px 16px; border-bottom:1px solid var(--c-border); font-size:14px; margin:0; }
.sidebar-widget table { width:100%; border-collapse:collapse; }
.sidebar-widget table td { padding:8px 12px; font-size:12px; border-bottom:1px solid var(--c-border); }
.sidebar-widget table td:first-child { width:28px; color:var(--c-text-3); text-align:center; }
.sidebar-widget table td:last-child { width:36px; font-weight:700; text-align:right; }
.sidebar-widget table td a { display:flex; align-items:center; gap:7px; }
.sidebar-widget table td img { width:18px; height:18px; border-radius:2px; }
.widget-link { display:block; padding:10px; text-align:center; color:var(--c-accent); font-size:12px; font-weight:500; border-top:1px solid var(--c-border); transition:var(--transition); }
.widget-link:hover { background:var(--c-surface-2); }
/* legacy aliases */
.sidebar-box { background:var(--c-surface); border-radius:var(--radius); margin-bottom:20px; overflow:hidden; }
.sidebar-box h3 { padding:16px; border-bottom:1px solid var(--c-border); font-size:14px; margin:0; }
.sidebar-box table { width:100%; border-collapse:collapse; }
.sidebar-box table td { padding:8px 12px; font-size:12px; border-bottom:1px solid var(--c-border); }
.sidebar-box table td:first-child { width:30px; color:var(--c-text-2); }
.sidebar-box table td:last-child { width:40px; font-weight:700; text-align:right; }
.sidebar-box table td a { display:flex; align-items:center; gap:8px; }
.sidebar-box table td img { width:18px; height:18px; }
.view-all { display:block; padding:12px; text-align:center; color:var(--c-accent); font-size:12px; border-top:1px solid var(--c-border); }

.scorer { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--c-border); }
.scorer:last-child { border-bottom:none; }
.scorer .rank { width:20px; color:var(--c-text-3); font-size:12px; text-align:center; }
.scorer a { display:flex; align-items:center; gap:8px; flex:1; }
.scorer img { width:28px; height:28px; border-radius:50%; }
.scorer .goals { font-weight:700; color:var(--c-live); }

.league-links { padding:6px; list-style:none; }
.league-links li { }
.league-links a { display:block; padding:9px 12px; color:var(--c-text-2); border-radius:6px; font-size:13px; transition:var(--transition); }
.league-links a:hover { background:var(--c-surface-2); color:var(--c-text); }
/* legacy */
.league-list { padding:8px; }
.league-list li { list-style:none; }
.league-list a { display:block; padding:10px 12px; color:var(--c-text-2); border-radius:8px; font-size:13px; }
.league-list a:hover,.league-list a.active { background:rgba(255,255,255,0.05); color:white; }

/* ============================================================
   Page Header (for sub-pages)
   ============================================================ */
.page-header { padding:28px 0 20px; background:radial-gradient(ellipse at 50% 0%,rgba(230,57,70,0.06) 0%,transparent 70%); }
.page-header-content { display:flex; align-items:center; gap:16px; margin-bottom:12px; }
.page-flag { font-size:44px; }
.page-header h1 { font-size:26px; margin-bottom:4px; font-weight:800; }
.page-subtitle { color:var(--c-text-2); font-size:14px; }
.page-tabs { display:flex; gap:6px; margin-top:14px; flex-wrap:wrap; }
.tab-btn {
    padding:9px 18px; background:var(--c-surface); border:1px solid var(--c-border);
    border-radius:7px; color:var(--c-text-2); font-size:13px; cursor:pointer;
    font-weight:500; transition:var(--transition);
}
.tab-btn:hover { border-color:var(--c-accent); color:var(--c-text); }
.tab-btn.active { background:var(--c-accent); border-color:var(--c-accent); color:#fff; }
.tab-content { display:none; }
.tab-content.active { display:block; }
.league-tabs { display:flex; gap:6px; margin-bottom:16px; overflow-x:auto; flex-wrap:wrap; }

/* ============================================================
   Section Box (for sub-pages)
   ============================================================ */
.section-box { background:var(--c-surface); border-radius:var(--radius); overflow:hidden; margin-bottom:18px; border:1px solid var(--c-border); }
.section-box .section-header,.section-header { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--c-border); }
.section-header h2 { font-size:15px; margin:0; font-weight:600; }

/* ============================================================
   Tables
   ============================================================ */
.standings-table { width:100%; border-collapse:collapse; }
.standings-table th { padding:9px 12px; font-size:11px; font-weight:500; color:var(--c-text-3); text-align:left; background:var(--c-surface-2); text-transform:uppercase; letter-spacing:0.3px; }
.standings-table td { padding:9px 12px; font-size:13px; border-bottom:1px solid var(--c-border); }
.standings-table tr:last-child td { border-bottom:none; }
.standings-table tr.ucl td { background:var(--c-ucl); }
.standings-table tr.uel td { background:var(--c-uel); }
.standings-table tr.rel td { background:var(--c-rel); }
.standings-table .rank { width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; background:var(--c-surface-3); border-radius:4px; font-size:11px; font-weight:600; }
.standings-table .rank.ucl { background:rgba(0,230,118,0.2); color:var(--c-live); }
.standings-table .rank.uel { background:rgba(68,138,255,0.2); color:var(--c-blue); }
.standings-table .rank.rel { background:rgba(230,57,70,0.2); color:var(--c-accent); }
.team-cell { display:flex; align-items:center; gap:8px; }
.team-cell img { width:20px; height:20px; border-radius:2px; }
.standings-table .pts { font-weight:700; }

.scorers-table { width:100%; border-collapse:collapse; }
.scorers-table th { padding:9px 12px; font-size:11px; font-weight:500; color:var(--c-text-3); text-align:left; background:var(--c-surface-2); }
.scorers-table td { padding:9px 12px; font-size:13px; border-bottom:1px solid var(--c-border); }
.scorers-table tr:last-child td { border-bottom:none; }
.player-cell { display:flex; align-items:center; gap:10px; }
.player-cell img { width:30px; height:30px; border-radius:50%; }
.team-logo-sm { width:20px; height:20px; }
.scorers-table .goals { font-weight:700; color:var(--c-live); font-size:16px; }

/* ============================================================
   Loading & Utility
   ============================================================ */
.loading { padding:36px; text-align:center; color:var(--c-text-2); }
.loading span { display:block; margin-top:8px; font-size:12px; }
.spinner { width:28px; height:28px; border:3px solid var(--c-border); border-top-color:var(--c-accent); border-radius:50%; margin:0 auto; animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.no-data { text-align:center; padding:36px; color:var(--c-text-2); font-size:13px; }

/* ============================================================
   Breadcrumbs
   ============================================================ */
.breadcrumbs { padding:14px 0; font-size:13px; color:var(--c-text-3); }
.breadcrumbs ol { display:flex; flex-wrap:wrap; gap:6px; list-style:none; }
.breadcrumbs li::after { content:'›'; margin-left:6px; color:var(--c-text-3); }
.breadcrumbs li:last-child::after { display:none; }
.breadcrumbs a { color:var(--c-text-2); transition:var(--transition); }
.breadcrumbs a:hover { color:var(--c-accent); }

/* ============================================================
   About / Author / Last Updated
   ============================================================ */
.about-section { padding:40px 0; background:var(--c-surface); margin-top:40px; border-top:1px solid var(--c-border); }
.author-box { display:flex; gap:20px; padding:24px; background:var(--c-surface); border-radius:var(--radius); border:1px solid var(--c-border); }
.author-avatar { flex-shrink:0; }
.author-avatar .logo-mark,.author-avatar .logo-icon { font-size:18px; padding:14px 18px; }
.author-info h4 { margin:0 0 8px; font-size:16px; font-weight:700; }
.author-info p { color:var(--c-text-2); font-size:13px; line-height:1.6; margin-bottom:12px; }
.author-credentials { display:flex; flex-wrap:wrap; gap:12px; font-size:11px; color:var(--c-text-2); }
.last-updated { text-align:center; padding:16px; font-size:12px; color:var(--c-text-3); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background:var(--c-surface); padding:40px 0 20px; margin-top:40px; border-top:1px solid var(--c-border); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:28px; margin-bottom:28px; }
.footer-logo { display:flex; align-items:center; gap:8px; font-size:17px; font-weight:700; margin-bottom:14px; }
.footer-about p { color:var(--c-text-2); font-size:13px; line-height:1.7; }
.site-footer h4 { font-size:13px; margin-bottom:14px; font-weight:600; color:var(--c-text); text-transform:uppercase; letter-spacing:0.3px; }
.site-footer a { display:block; color:var(--c-text-2); font-size:13px; padding:5px 0; transition:var(--transition); }
.site-footer a:hover { color:var(--c-text); }
.footer-bottom { text-align:center; padding-top:20px; border-top:1px solid var(--c-border); }
.footer-bottom p { color:var(--c-text-3); font-size:12px; }

/* Back to Top */
#backToTop {
    position:fixed; bottom:100px; right:20px; width:42px; height:42px;
    background:var(--c-accent); color:#fff; border:none; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transition:var(--transition); z-index:9998;
    box-shadow:0 4px 16px rgba(0,0,0,0.3);
}
#backToTop.show { opacity:1; visibility:visible; }
#backToTop:hover { transform:translateY(-3px); background:var(--c-accent-h); }

/* Bottom ad space */
body { padding-bottom:90px; }

/* ============================================================
   Articles (News pages, Single, Archive)
   ============================================================ */
/* Article cards row (homepage) */
.article-cards-row { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--c-border); }
.article-card-horizontal { background:var(--c-surface); padding:16px; transition:var(--transition); }
.article-card-horizontal:hover { background:var(--c-surface-2); }
.card-badges { display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.article-card-horizontal h3 { font-size:14px; line-height:1.5; margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.article-card-horizontal h3 a { color:var(--c-text); }
.article-card-horizontal h3 a:hover { color:var(--c-accent); }
.card-teams { font-size:12px; color:var(--c-text-2); }
.card-date { font-size:11px; color:var(--c-text-2); }
.no-articles-msg { padding:40px; text-align:center; color:var(--c-text-2); grid-column:1/-1; background:var(--c-surface); }
.no-articles-msg.full-width { grid-column:1/-1; }

/* Bottom recommendations */
.bottom-recommendations { margin-top:32px; padding-bottom:32px; }
.bottom-recommendations .section-header-full { background:var(--c-surface); border-radius:var(--radius) var(--radius) 0 0; border:1px solid var(--c-border); border-bottom:none; }
.recommendation-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.recommendation-card { background:var(--c-surface); padding:20px; border-radius:var(--radius); border:1px solid var(--c-border); transition:var(--transition); }
.recommendation-card:hover { border-color:var(--c-accent); transform:translateY(-2px); }
.rec-badge { display:inline-block; font-size:10px; padding:4px 10px; background:linear-gradient(135deg,#ffc400,#ff9800); color:#000; border-radius:4px; font-weight:600; margin-bottom:12px; }
.recommendation-card h3 { font-size:15px; margin-bottom:10px; line-height:1.4; }
.recommendation-card h3 a { color:var(--c-text); }
.recommendation-card h3 a:hover { color:var(--c-accent); }
.recommendation-card p { font-size:13px; color:var(--c-text-2); line-height:1.5; margin-bottom:12px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.read-more { font-size:12px; color:var(--c-accent); }

/* News page */
.news-page { }
.news-hero { background:linear-gradient(135deg,var(--c-surface) 0%,var(--c-surface-2) 100%); padding:36px 0; text-align:center; border-bottom:1px solid var(--c-border); }
.news-hero h1 { font-size:26px; margin-bottom:6px; }
.news-hero p { color:var(--c-text-2); font-size:14px; }
.news-nav { background:var(--c-bg); border-bottom:1px solid var(--c-border); position:sticky; top:56px; z-index:99; }
.news-nav .container { display:flex; gap:4px; padding:10px 16px; overflow-x:auto; }
.news-nav-item { display:flex; align-items:center; gap:6px; padding:10px 18px; background:var(--c-surface); border-radius:7px; color:var(--c-text-2); font-size:13px; white-space:nowrap; transition:var(--transition); border:1px solid transparent; }
.news-nav-item:hover { border-color:var(--c-accent); color:var(--c-text); }
.news-nav-item.active { background:var(--c-accent); color:#fff; border-color:var(--c-accent); }
.nav-icon { font-size:16px; }
.nav-text { font-weight:500; }
.news-layout { display:grid; grid-template-columns:1fr 300px; gap:24px; padding:24px 0; }
.news-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.news-card { background:var(--c-surface); border-radius:var(--radius); overflow:hidden; transition:var(--transition); border:1px solid var(--c-border); }
.news-card:hover { border-color:var(--c-accent); transform:translateY(-3px); box-shadow:var(--shadow); }
.news-card.featured:first-child { grid-column:span 2; }
.news-card.featured:first-child .card-image { height:240px; }
.news-card.featured:first-child h3 { font-size:18px; }
.card-image { position:relative; height:150px; background:var(--c-surface-2); overflow:hidden; }
.card-image img { width:100%; height:100%; object-fit:cover; }
.card-placeholder { display:flex; align-items:center; justify-content:center; height:100%; font-size:48px; opacity:0.2; }
.card-body { padding:14px; }
.card-league { font-size:11px; color:var(--c-accent); margin-bottom:6px; text-transform:uppercase; font-weight:600; letter-spacing:0.3px; }
.card-body h3 { font-size:14px; line-height:1.5; margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-body h3 a { color:var(--c-text); }
.card-body h3 a:hover { color:var(--c-accent); }
.card-match { font-size:12px; color:var(--c-text-2); margin-bottom:8px; }
.card-meta { display:flex; gap:12px; font-size:11px; color:var(--c-text-2); }

/* Single Article */
.single-article { background:var(--c-surface); border-radius:var(--radius); overflow:hidden; border:1px solid var(--c-border); }
.article-header { padding:24px; border-bottom:1px solid var(--c-border); }
.article-header h1 { font-size:22px; margin:10px 0; line-height:1.4; font-weight:700; }
.article-meta-full { display:flex; flex-wrap:wrap; gap:16px; font-size:13px; color:var(--c-text-2); }
.article-body { padding:24px; line-height:1.8; }
.article-body h2 { font-size:19px; margin:24px 0 14px; font-weight:700; }
.article-body h3 { font-size:16px; margin:18px 0 10px; }
.article-body p { margin-bottom:14px; }
.article-body ul,.article-body ol { margin:14px 0; padding-left:24px; }
.article-body li { margin-bottom:6px; }

.article-badges { display:flex; gap:8px; flex-wrap:wrap; }
.article-type { display:inline-block; font-size:11px; padding:4px 10px; border-radius:4px; }
.article-type.preview { background:rgba(68,138,255,0.2); color:var(--c-blue); }
.article-type.review { background:rgba(0,230,118,0.15); color:var(--c-live); }
.article-type.news { background:rgba(230,57,70,0.2); color:var(--c-accent); }
.article-league { font-size:11px; padding:4px 10px; background:rgba(255,255,255,0.1); border-radius:4px; color:var(--c-text-2); }

/* Match info */
.match-info-table { width:100%; border-collapse:collapse; margin:18px 0; background:var(--c-surface-2); border-radius:8px; overflow:hidden; }
.match-info-table td { padding:11px 16px; border-bottom:1px solid var(--c-border); }
.match-info-table tr:last-child td { border-bottom:none; }
.match-info-table td:first-child { width:40%; color:var(--c-text-2); }
.score-result-box { text-align:center; padding:24px; background:linear-gradient(135deg,var(--c-surface-2),var(--c-surface)); border-radius:var(--radius); margin:18px 0; }
.score-result-box .final-score { font-size:24px; font-weight:700; margin-bottom:8px; }
.score-result-box .final-score a { color:var(--c-text); }
.score-result-box .final-score a:hover { color:var(--c-accent); }

/* Match teams box */
.match-teams-box { padding:24px; margin:24px; background:var(--c-surface-2); border-radius:var(--radius); }
.match-teams-box h3 { margin:0 0 16px; font-size:16px; }
.teams-links { display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; }
.team-link { padding:12px 24px; background:var(--c-accent); color:white; border-radius:8px; font-weight:600; transition:var(--transition); }
.team-link:hover { transform:scale(1.05); color:white; }
.team-name { padding:12px 24px; background:var(--c-surface); border-radius:8px; font-weight:600; }
.teams-links .vs { font-size:18px; font-weight:700; color:var(--c-text-3); }

/* Related */
.related-articles { padding:24px; border-top:1px solid var(--c-border); }
.related-articles h3 { margin:0 0 16px; font-size:16px; }
.related-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.related-item { display:flex; align-items:flex-start; gap:8px; padding:10px; background:var(--c-surface-2); border-radius:7px; transition:var(--transition); }
.related-item:hover { background:var(--c-surface-3); }
.related-icon { font-size:16px; flex-shrink:0; }
.related-title { font-size:13px; color:var(--c-text-2); line-height:1.4; }
.related-item:hover .related-title { color:var(--c-text); }
.article-thumbnail { margin:0 -24px; }
.article-thumbnail img { width:100%; height:auto; }
.article-author-box { padding:24px; border-top:1px solid var(--c-border); }

/* Article List */
.articles-list { display:flex; flex-direction:column; gap:14px; }
.article-item { background:var(--c-surface); padding:18px; border-radius:var(--radius); border:1px solid var(--c-border); border-left:3px solid var(--c-border); transition:var(--transition); }
.article-item:hover { border-left-color:var(--c-accent); }
.article-item h2 { font-size:17px; margin:8px 0; line-height:1.4; }
.article-item h2 a { color:var(--c-text); }
.article-item h2 a:hover { color:var(--c-accent); }
.article-excerpt,.article-item .article-excerpt { color:var(--c-text-2); font-size:13px; line-height:1.6; margin:10px 0; }
.article-meta,.article-item .article-meta { font-size:12px; color:var(--c-text-2); display:flex; gap:16px; }

/* Pagination */
.pagination,.news-pagination { display:flex; justify-content:center; gap:6px; padding:24px 0; }
.pagination a,.pagination span,.news-pagination a,.news-pagination span { padding:9px 14px; background:var(--c-surface); border:1px solid var(--c-border); border-radius:6px; font-size:13px; }
.pagination a:hover,.news-pagination a:hover { border-color:var(--c-accent); color:var(--c-accent); }
.pagination .current,.news-pagination .current { background:var(--c-accent); border-color:var(--c-accent); color:#fff; }

/* No articles */
.no-articles { text-align:center; padding:60px 20px; }
.no-articles-icon { font-size:60px; margin-bottom:16px; }
.no-articles h3 { font-size:20px; margin-bottom:8px; }
.no-articles p { color:var(--c-text-2); margin-bottom:16px; }
.btn-primary { display:inline-block; padding:12px 24px; background:var(--c-accent); color:white; border-radius:8px; font-weight:600; transition:var(--transition); }
.btn-primary:hover { background:var(--c-accent-h); color:white; transform:translateY(-1px); }
.btn-secondary { display:inline-block; padding:12px 24px; background:var(--c-surface); color:white; border-radius:8px; font-weight:600; border:1px solid var(--c-border); transition:var(--transition); }
.btn-secondary:hover { border-color:var(--c-accent); color:var(--c-accent); }

/* News tabs/filters */
.news-tabs { background:var(--c-surface); border-bottom:1px solid var(--c-border); padding:12px 0; margin-bottom:24px; overflow-x:auto; }
.news-tabs .container { display:flex; gap:8px; }
.news-tab { padding:10px 20px; background:transparent; border:1px solid var(--c-border); border-radius:8px; color:var(--c-text-2); font-size:13px; white-space:nowrap; transition:var(--transition); }
.news-tab:hover { border-color:var(--c-accent); color:var(--c-text); }
.news-tab.active { background:var(--c-accent); border-color:var(--c-accent); color:white; }

/* Sidebar widgets (news page) */
.sidebar-widget { background:var(--c-surface); border-radius:var(--radius); margin-bottom:16px; overflow:hidden; border:1px solid var(--c-border); }
.widget-title { font-size:14px; padding:14px 16px; border-bottom:1px solid var(--c-border); margin:0; background:var(--c-surface-2); font-weight:600; }
.widget-menu { padding:6px 0; }
.widget-menu li { list-style:none; }
.widget-menu a { display:block; padding:10px 16px; color:var(--c-text-2); font-size:13px; transition:var(--transition); }
.widget-menu a:hover { background:var(--c-surface-2); color:var(--c-text); }
.widget-menu li.active a { color:var(--c-accent); background:rgba(230,57,70,0.08); border-left:3px solid var(--c-accent); }
.widget-posts { padding:6px; }
.widget-post { display:flex; gap:10px; padding:8px; border-radius:7px; margin-bottom:2px; transition:var(--transition); }
.widget-post:hover { background:var(--c-surface-2); }
.post-icon { font-size:18px; flex-shrink:0; }
.post-info { flex:1; min-width:0; }
.post-title { display:block; font-size:13px; color:var(--c-text-2); line-height:1.4; margin-bottom:3px; }
.widget-post:hover .post-title { color:var(--c-text); }
.post-date { font-size:11px; color:var(--c-text-3); }
.widget-leagues { padding:6px 0; }
.widget-leagues li { list-style:none; }
.widget-leagues a { display:block; padding:9px 16px; color:var(--c-text-2); font-size:13px; }
.widget-leagues a:hover { background:var(--c-surface-2); color:var(--c-text); }
.no-news,.no-posts { text-align:center; padding:40px; color:var(--c-text-2); font-size:13px; }
.no-news-icon { font-size:48px; margin-bottom:12px; opacity:0.3; }
.no-news h3 { font-size:18px; margin-bottom:6px; }

/* ============================================================
   404 Page
   ============================================================ */
.error-page { min-height:70vh; display:flex; align-items:center; justify-content:center; padding:40px 20px; }
.error-content { text-align:center; max-width:600px; }
.error-icon { font-size:72px; margin-bottom:16px; animation:bounce 2s infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }
.error-content h1 { font-size:100px; color:var(--c-accent); margin:0; line-height:1; }
.error-content h2 { font-size:26px; margin:12px 0; }
.error-content > p { color:var(--c-text-2); margin-bottom:28px; }
.error-actions { display:flex; gap:12px; justify-content:center; margin-bottom:40px; flex-wrap:wrap; }
.error-suggestions { margin-bottom:36px; }
.error-suggestions h3 { font-size:15px; margin-bottom:14px; color:var(--c-text-2); }
.suggestions-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.suggestion-card { display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px; background:var(--c-surface); border-radius:var(--radius); border:1px solid var(--c-border); transition:var(--transition); }
.suggestion-card:hover { border-color:var(--c-accent); transform:translateY(-3px); }
.suggestion-icon { font-size:26px; }
.suggestion-text { font-size:13px; color:var(--c-text-2); }
.suggestion-card:hover .suggestion-text { color:var(--c-text); }
.error-leagues h3 { font-size:15px; margin-bottom:14px; color:var(--c-text-2); }
.leagues-list { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.leagues-list a { padding:8px 14px; background:var(--c-surface-2); border-radius:6px; font-size:13px; color:var(--c-text-2); }
.leagues-list a:hover { color:white; background:var(--c-surface-3); }
.btn-back { display:inline-block; margin-top:20px; padding:12px 24px; background:var(--c-accent); color:white; border-radius:8px; }
.btn-back:hover { opacity:0.9; color:white; }

/* ============================================================
   World Cup Page
   ============================================================ */
.wc-hero { background:linear-gradient(135deg,#0f1923 0%,#162a3e 50%,#0d3054 100%); padding:52px 0; text-align:center; position:relative; overflow:hidden; }
.wc-hero::before { content:''; position:absolute; inset:0; background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.04)" stroke-width="2"/></svg>') repeat; }
.wc-hero-content { position:relative; z-index:1; }
.wc-badge { display:inline-block; background:linear-gradient(135deg,#ffd700,#ffb700); color:#000; padding:7px 18px; border-radius:18px; font-size:13px; font-weight:700; margin-bottom:14px; }
.wc-hero h1 { font-size:42px; margin-bottom:10px; text-shadow:0 4px 20px rgba(0,0,0,0.3); }
.wc-host { font-size:18px; margin-bottom:18px; color:rgba(255,255,255,0.85); }
.wc-meta { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; font-size:13px; color:rgba(255,255,255,0.65); }
.wc-meta span { background:rgba(255,255,255,0.08); padding:7px 14px; border-radius:7px; }

.wc-tabs { background:var(--c-surface); border-bottom:1px solid var(--c-border); position:sticky; top:56px; z-index:99; }
.wc-tabs .container { display:flex; gap:6px; padding:10px 16px; overflow-x:auto; }
.wc-tab { padding:10px 20px; background:transparent; border:1px solid var(--c-border); border-radius:7px; color:var(--c-text-2); font-size:13px; cursor:pointer; transition:var(--transition); white-space:nowrap; }
.wc-tab:hover { border-color:var(--c-accent); color:var(--c-text); }
.wc-tab.active { background:var(--c-accent); border-color:var(--c-accent); color:#fff; }
.wc-content { padding:28px 0; }

.groups-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.group-card { background:var(--c-surface); border-radius:var(--radius); overflow:hidden; border:1px solid var(--c-border); }
.group-header { background:linear-gradient(135deg,var(--c-accent),#c01820); padding:10px; text-align:center; font-weight:700; font-size:15px; }
.group-table { width:100%; border-collapse:collapse; }
.group-table th { padding:7px; font-size:10px; color:var(--c-text-3); text-align:left; border-bottom:1px solid var(--c-border); }
.group-table td { padding:9px 7px; border-bottom:1px solid var(--c-border); font-size:12px; }
.group-table tr:last-child td { border-bottom:none; }
.team-flag { font-size:18px; }
.team-name { font-weight:500; }
.rank-cell { color:var(--c-text-3); }
.conf-cell { font-size:10px; color:var(--c-accent); }

.confederation-section { margin-bottom:20px; background:var(--c-surface); padding:18px; border-radius:var(--radius); border:1px solid var(--c-border); }
.confederation-section h3 { margin-bottom:14px; font-size:15px; }
.teams-flex { display:flex; flex-wrap:wrap; gap:6px; }
.team-tag { padding:7px 13px; background:var(--c-surface-2); border-radius:7px; font-size:13px; }

.players-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:28px; }
.player-card { background:var(--c-surface); padding:18px; border-radius:var(--radius); text-align:center; border:1px solid var(--c-border); transition:var(--transition); }
.player-card:hover { border-color:var(--c-accent); transform:translateY(-3px); }
.player-avatar { font-size:42px; margin-bottom:10px; }
.player-info h4 { font-size:14px; margin-bottom:3px; }
.player-country { font-size:12px; color:var(--c-text-2); margin-bottom:3px; }
.player-club { font-size:11px; color:var(--c-accent); margin-bottom:6px; }
.player-position { display:inline-block; padding:3px 9px; background:var(--c-surface-2); border-radius:4px; font-size:10px; }

.players-extra { background:var(--c-surface); padding:20px; border-radius:var(--radius); border:1px solid var(--c-border); }
.players-extra h3 { margin-bottom:14px; }
.candidates-list { display:flex; flex-direction:column; gap:6px; }
.candidate { display:flex; align-items:center; gap:14px; padding:10px 14px; background:var(--c-surface-2); border-radius:7px; }
.candidate-rank { width:22px; height:22px; background:var(--c-accent); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.candidate-name { flex:1; font-weight:500; }
.candidate-country { font-size:18px; }
.candidate-odds { background:rgba(0,230,118,0.15); color:var(--c-live); padding:3px 9px; border-radius:4px; font-size:12px; font-weight:600; }

.venues-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px; }
.venue-card { background:var(--c-surface); padding:18px; border-radius:var(--radius); text-align:center; border:1px solid var(--c-border); }
.venue-flag { font-size:28px; margin-bottom:10px; }
.venue-card h4 { font-size:14px; margin-bottom:6px; }
.venue-city { font-size:13px; color:var(--c-text-2); margin-bottom:3px; }
.venue-capacity { font-size:12px; color:var(--c-accent); }
.venue-note { background:rgba(255,196,0,0.06); padding:14px; border-radius:7px; text-align:center; border:1px solid rgba(255,196,0,0.2); }

.schedule-timeline { max-width:600px; }
.timeline-item { display:flex; gap:18px; padding:18px 0; border-left:2px solid var(--c-border); margin-left:60px; padding-left:18px; position:relative; }
.timeline-item::before { content:''; position:absolute; left:-6px; top:22px; width:10px; height:10px; background:var(--c-surface); border:2px solid var(--c-accent); border-radius:50%; }
.timeline-item.highlight { border-left-color:var(--c-accent); }
.timeline-item.highlight::before { background:var(--c-accent); }
.timeline-date { position:absolute; left:-120px; width:90px; text-align:right; font-size:13px; color:var(--c-accent); font-weight:600; }
.timeline-content h4 { margin-bottom:3px; font-size:14px; }
.timeline-content p { color:var(--c-text-2); font-size:13px; }

.wc-history { padding:28px 0; border-top:1px solid var(--c-border); margin-top:28px; }
.history-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.history-card { background:var(--c-surface); padding:14px; border-radius:var(--radius); text-align:center; border:1px solid var(--c-border); }
.history-year { display:block; font-size:18px; font-weight:700; color:var(--c-accent); margin-bottom:6px; }
.history-winner { display:block; font-size:13px; margin-bottom:3px; }
.history-host { display:block; font-size:11px; color:var(--c-text-3); }

.section-title { font-size:22px; margin-bottom:6px; }
.section-desc { color:var(--c-text-2); margin-bottom:20px; }

/* ============================================================
   Match Row (league page)
   ============================================================ */
.match-row { display:flex; align-items:center; padding:10px 14px; border-bottom:1px solid var(--c-border); }
.match-row .time { width:48px; font-size:12px; color:var(--c-text-2); }
.match-row .team { display:flex; align-items:center; gap:7px; flex:1; }
.match-row .team.home { justify-content:flex-end; }
.match-row .team img { width:20px; height:20px; }
.match-row .score { width:56px; text-align:center; font-weight:700; }
.match-datetime { margin-top:10px; padding:10px 14px; background:rgba(230,57,70,0.08); border-radius:7px; display:inline-block; }
.match-datetime span { color:var(--c-accent); font-weight:500; }

/* ============================================================
   Sidebar lists
   ============================================================ */
.sidebar-articles { padding:6px 0; }
.sidebar-articles li { list-style:none; border-bottom:1px solid var(--c-border); }
.sidebar-articles li:last-child { border-bottom:none; }
.sidebar-articles a { display:flex; gap:6px; padding:9px 14px; color:var(--c-text-2); font-size:12px; line-height:1.5; }
.sidebar-articles a:hover { color:var(--c-text); background:var(--c-surface-2); }
.sidebar-news-list { padding:0; }
.sidebar-news-list li { list-style:none; border-bottom:1px solid var(--c-border); }
.sidebar-news-list li:last-child { border-bottom:none; }
.sidebar-news-list a { display:block; padding:9px 14px; font-size:12px; color:var(--c-text-2); line-height:1.5; }
.sidebar-news-list a:hover { background:var(--c-surface-2); color:var(--c-text); }
.category-list { padding:6px 0; }
.category-list li { list-style:none; }
.category-list a { display:block; padding:9px 14px; color:var(--c-text-2); font-size:13px; border-radius:5px; }
.category-list a:hover,.category-list a.active { background:var(--c-surface-2); color:var(--c-text); }
.category-list a.active { color:var(--c-accent); }
.preview-list { padding:6px 14px; }
.preview-list li { list-style:none; padding:7px 0; border-bottom:1px solid var(--c-border); font-size:13px; }
.preview-list li:last-child { border-bottom:none; }
.preview-list a { color:var(--c-text-2); }
.preview-list a:hover { color:var(--c-text); }
.recent-articles { padding:6px 14px; }
.recent-articles li { list-style:none; padding:9px 0; border-bottom:1px solid var(--c-border); font-size:13px; }
.recent-articles li:last-child { border-bottom:none; }
.recent-articles a { color:var(--c-text-2); }
.recent-articles a:hover { color:var(--c-text); }

/* ============================================================
   Home Section variants
   ============================================================ */
.home-article-section { margin-top:28px; background:var(--c-surface); border-radius:var(--radius); overflow:hidden; border:1px solid var(--c-border); }
.home-section { margin-top:24px; }
.home-section .articles-grid { grid-template-columns:repeat(2,1fr); }
.articles-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; padding:14px; }
.article-card { background:var(--c-surface-2); padding:14px; border-radius:8px; transition:var(--transition); border:1px solid transparent; }
.article-card:hover { border-color:var(--c-accent); transform:translateY(-2px); }
.article-card.preview { border-left:3px solid var(--c-blue); }
.article-card.review { border-left:3px solid var(--c-live); }
.article-card-badges { display:flex; gap:5px; margin-bottom:8px; flex-wrap:wrap; }
.article-card h3 { font-size:14px; line-height:1.5; margin-bottom:8px; }
.article-card h3 a { color:var(--c-text); }
.article-card h3 a:hover { color:var(--c-accent); }
.article-card-meta { font-size:11px; color:var(--c-text-2); }
.view-all-link { color:var(--c-accent); font-size:13px; }
.article-tabs { display:flex; gap:6px; margin-bottom:14px; }
.article-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--c-border); }
.article-row:last-child { border-bottom:none; }
.article-row-icon { font-size:16px; }
.article-row-title { flex:1; font-size:13px; color:var(--c-text-2); }
.article-row:hover .article-row-title { color:var(--c-text); }
.article-row-date { font-size:11px; color:var(--c-text-3); white-space:nowrap; }
.news-columns { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.news-column { background:var(--c-surface); border-radius:var(--radius); overflow:hidden; border:1px solid var(--c-border); }
.news-column-header { display:flex; justify-content:space-between; align-items:center; padding:14px; border-bottom:1px solid var(--c-border); }
.news-column-header h2 { font-size:14px; margin:0; }
.news-column-header a { font-size:12px; color:var(--c-accent); }
.news-column-list { padding:6px; }
.news-row { display:flex; flex-direction:column; gap:3px; padding:8px 10px; border-radius:5px; margin-bottom:2px; }
.news-row:hover { background:var(--c-surface-2); }
.news-row-title { font-size:13px; color:var(--c-text-2); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.news-row:hover .news-row-title { color:var(--c-text); }
.news-row-league { font-size:10px; color:var(--c-accent); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1024px) {
    .main-layout,.main-content { grid-template-columns:1fr; }
    .content-sidebar,.sidebar { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
    .cards-3,.article-cards-row { grid-template-columns:repeat(2,1fr); }
    .recommendation-cards { grid-template-columns:repeat(2,1fr); }
    .footer-grid { grid-template-columns:1fr 1fr; }
    .groups-grid { grid-template-columns:repeat(3,1fr); }
    .players-grid { grid-template-columns:repeat(2,1fr); }
    .history-grid { grid-template-columns:repeat(3,1fr); }
    .news-layout { grid-template-columns:1fr; }
    .news-sidebar { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
    .news-columns { grid-template-columns:1fr; }
}

@media (max-width:768px) {
    .main-nav { display:none; }
    .menu-toggle { display:flex; }
    .league-bar { display:none; }
    .league-nav { display:none; }
    .hero h1 { font-size:24px; }
    .hero-stats { flex-direction:column; align-items:center; gap:8px; }
    .content-sidebar,.sidebar { grid-template-columns:1fr; }
    .cards-3,.cards-4,.article-cards-row { grid-template-columns:1fr; }
    .recommendation-cards { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:1fr; }
    .page-header h1 { font-size:22px; }
    .page-flag { font-size:34px; }
    .trust-items { flex-direction:column; align-items:center; gap:6px; }
    .articles-grid { grid-template-columns:1fr; }
    .related-grid { grid-template-columns:1fr; }
    .author-box { flex-direction:column; text-align:center; }
    body { padding-bottom:60px; }
    #backToTop { bottom:80px; right:14px; width:38px; height:38px; }
    .wc-hero h1 { font-size:28px; }
    .groups-grid { grid-template-columns:repeat(2,1fr); }
    .venues-grid { grid-template-columns:repeat(2,1fr); }
    .players-grid { grid-template-columns:1fr; }
    .history-grid { grid-template-columns:repeat(2,1fr); }
    .news-grid { grid-template-columns:1fr; }
    .news-card.featured:first-child { grid-column:span 1; }
    .news-sidebar { grid-template-columns:1fr; }
    .news-hero h1 { font-size:22px; }
    .error-content h1 { font-size:72px; }
    .suggestions-grid { grid-template-columns:repeat(2,1fr); }
    .home-section .articles-grid { grid-template-columns:1fr; }
    .dropdown-menu { position:fixed; left:0; right:0; top:auto; border-radius:0; }
    .timeline-date { position:static; width:auto; text-align:left; margin-bottom:6px; }
    .timeline-item { margin-left:18px; flex-direction:column; gap:6px; }
    .news-nav { top:0; }
    .page-tabs { gap:4px; }
    .tab-btn { padding:7px 14px; font-size:12px; }
}

@media (max-width:480px) {
    .container { padding:0 12px; }
    .header-inner { height:50px; }
    .btn-register { padding:7px 14px; font-size:12px; }
}