/* =============================================================
   OneXoccer – Shared Stylesheet  (2015-era Material-lite theme)
   Font: Arial/Helvetica  |  Green: #4CAF50  |  BG: #f2f2f2
   ============================================================= */

* { margin:0; padding:0; box-sizing:border-box; font-family:Arial,Helvetica,sans-serif; }

body { background:#f2f2f2; color:#333; font-size:14px; }

a { text-decoration:none; color:inherit; }

img { display:block; max-width:100%; }

/* ── Navbar ─────────────────────────────────────────────── */
.navbar {
  background:linear-gradient(to right,#2e7d32,#4caf50);
  height:56px;
  display:flex; align-items:center;
  padding:0 16px;
  position:sticky; top:0; z-index:200;
  box-shadow:0 2px 4px rgba(0,0,0,.15);
}
.nav-container {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; max-width:1200px; margin:0 auto;
}
.nav-logo {
  color:#fff; font-weight:bold; font-size:22px;
  display:flex; align-items:center; gap:8px; white-space:nowrap;
}
.nav-logo .full  { display:inline; }
.nav-logo .short { display:none;   }

.nav-menu { display:flex; list-style:none; height:56px; }
.nav-menu li { display:flex; }
.nav-menu a {
  display:flex; align-items:center; gap:6px;
  color:rgba(255,255,255,.85);
  padding:0 14px; height:100%;
  font-size:13px; font-weight:600;
  border-bottom:3px solid transparent;
  transition:background .2s,color .2s;
  white-space:nowrap;
}
.nav-menu a:hover  { color:#fff; background:rgba(255,255,255,.12); }
.nav-menu a.active { color:#fff; border-bottom-color:#fff; }
.nav-menu a i      { font-size:18px; }

.live-dot {
  width:8px; height:8px; background:#ff4444;
  border-radius:50%;
  animation:ldot 1.5s infinite;
  flex-shrink:0;
}
@keyframes ldot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.3)} }

/* ── Layout ─────────────────────────────────────────────── */
.wrap { max-width:1200px; margin:0 auto; padding:15px; }

/* ── Section title bar ──────────────────────────────────── */
.section-title {
  background:#4CAF50; color:#fff;
  padding:10px 15px;
  border-radius:5px 5px 0 0;
  font-size:16px; font-weight:bold;
  display:flex; align-items:center; gap:8px;
  margin-bottom:0;
}
.section-title i { font-size:18px; }
.section-title .title-right {
  margin-left:auto;
  font-size:13px; font-weight:normal;
  opacity:.9;
}
.section-title .title-right a {
  color:#fff; font-weight:bold;
}

/* ── White box / card ───────────────────────────────────── */
.box {
  background:#fff;
  border:1px solid #ddd;
  border-radius:5px;
  box-shadow:0 2px 4px rgba(0,0,0,.08);
  margin-bottom:20px;
}
.box-body { padding:15px; }

/* Section = title + box together */
.section { margin-bottom:20px; }
.section .section-title { border-radius:5px 5px 0 0; }
.section .box {
  border-top:none;
  border-radius:0 0 5px 5px;
  margin-bottom:0;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 16px; border-radius:4px;
  font-size:14px; font-weight:bold; cursor:pointer;
  border:none; transition:background .2s,transform .1s;
}
.btn:active { transform:scale(.97); }
.btn-green  { background:#4CAF50; color:#fff; }
.btn-green:hover { background:#45a049; }
.btn-grey   { background:#e0e0e0; color:#333; }
.btn-grey:hover  { background:#ccc; }
.btn-blue   { background:#2196f3; color:#fff; }
.btn-blue:hover  { background:#1976d2; }
.btn-block  { width:100%; }
.btn:disabled { background:#ccc; cursor:not-allowed; }

/* ── Badges ──────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:12px;
  font-size:12px; font-weight:bold;
}
.badge-live    { background:#ff4444; color:#fff; }
.badge-live::before { content:''; width:6px;height:6px;background:#fff;border-radius:50%;animation:ldot 1.5s infinite; }
.badge-green   { background:#4CAF50; color:#fff; }
.badge-orange  { background:#ff9800; color:#fff; }
.badge-grey    { background:#9e9e9e; color:#fff; }

/* ── Stat boxes ──────────────────────────────────────────── */
.stats-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:15px; }
.stat-box {
  flex:1; min-width:90px;
  background:#f9f9f9; border:1px solid #ddd;
  border-radius:4px; padding:12px;
  text-align:center;
}
.stat-val  { font-size:22px; font-weight:bold; color:#4CAF50; }
.stat-lbl  { font-size:12px; color:#666; margin-top:3px; }

/* ── Info bar ────────────────────────────────────────────── */
.info-bar {
  background:#e8f5e9; border-left:4px solid #4CAF50;
  padding:10px 14px; border-radius:0 4px 4px 0;
  font-size:13px; color:#555;
  display:flex; align-items:flex-start; gap:8px;
  margin-bottom:12px;
}
.info-bar i { color:#4CAF50; margin-top:1px; flex-shrink:0; }

/* ── Match card ──────────────────────────────────────────── */
.matches-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:12px;
}
.match-card {
  background:#fff; border:1px solid #ddd;
  border-radius:5px; padding:14px;
  box-shadow:0 2px 4px rgba(0,0,0,.07);
  transition:box-shadow .2s;
}
.match-card:hover { box-shadow:0 4px 10px rgba(0,0,0,.12); }

.match-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.match-league { font-size:12px; color:#666; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:68%; }

.match-teams { display:flex; align-items:center; margin-bottom:12px; gap:8px; }
.team { flex:1; text-align:center; }
.team-logo-wrap {
  width:52px; height:52px; margin:0 auto 6px;
  display:flex; align-items:center; justify-content:center;
  background:#f5f5f5; border-radius:50%; border:1px solid #eee;
}
.team-logo { width:36px; height:36px; object-fit:contain; }
.team-name { font-size:13px; font-weight:bold; color:#333; line-height:1.2; }
.match-vs  {
  font-size:12px; font-weight:bold; color:#666;
  background:#f5f5f5; padding:4px 10px; border-radius:3px;
  flex-shrink:0;
}
.match-score-big {
  font-size:24px; font-weight:bold; color:#4CAF50;
  text-align:center; padding:4px 12px;
  background:#f9f9f9; border-radius:4px;
  flex-shrink:0; min-width:80px;
}
.match-kickoff {
  text-align:center; font-size:12px; color:#666;
  margin-bottom:12px;
  background:#f9f9f9; border-radius:3px; padding:6px;
}

/* ── Highlight card ──────────────────────────────────────── */
.hl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.hl-card {
  background:#fff; border:1px solid #ddd;
  border-radius:5px; overflow:hidden;
  box-shadow:0 2px 4px rgba(0,0,0,.07);
  cursor:pointer; transition:box-shadow .2s;
}
.hl-card:hover { box-shadow:0 4px 10px rgba(0,0,0,.12); }
.hl-thumb { position:relative; padding-bottom:56.25%; background:#111; overflow:hidden; }
.hl-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.hl-card:hover .hl-thumb img { transform:scale(1.04); }
.hl-play-btn {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.25); opacity:0; transition:opacity .2s;
}
.hl-card:hover .hl-play-btn { opacity:1; }
.hl-play-btn i { font-size:36px; color:#fff; }
.hl-body { padding:10px 12px 12px; }
.hl-title {
  font-size:13px; font-weight:bold; color:#333;
  margin-bottom:6px; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hl-comp { font-size:11px; color:#666; background:#f0f0f0; display:inline-block; padding:2px 7px; border-radius:3px; }
.hl-date { font-size:11px; color:#999; float:right; }

/* ── News card ───────────────────────────────────────────── */
.news-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:15px; }
.news-card {
  background:#fff; border:1px solid #ddd;
  border-radius:8px; overflow:hidden;
  box-shadow:0 2px 4px rgba(0,0,0,.07);
  display:flex; flex-direction:column;
  transition:transform .2s, box-shadow .2s;
}
.news-card:hover { transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.12); }
.news-body { padding:15px; flex:1; display:flex; flex-direction:column; }
.news-title { font-size:16px; font-weight:bold; color:#333; margin-bottom:8px; line-height:1.35; }
.news-desc  {
  font-size:13px; color:#666; line-height:1.6; flex:1; margin-bottom:12px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.news-foot  { display:flex; align-items:center; justify-content:space-between; padding-top:10px; border-top:1px solid #eee; font-size:12px; margin-bottom:12px; }
.news-src   { background:#4CAF50; color:#fff; padding:2px 8px; border-radius:12px; font-weight:bold; font-size:11px; }
.news-date  { color:#888; }

/* ── Table ───────────────────────────────────────────────── */
.data-table { width:100%; border-collapse:collapse; }
.data-table th {
  background:#f9f9f9; padding:10px 12px;
  font-size:12px; color:#666; text-align:center;
  border-bottom:2px solid #ddd; font-weight:bold; text-transform:uppercase;
}
.data-table th:first-child,.data-table td:first-child { text-align:left; padding-left:15px; }
.data-table td { padding:10px 12px; font-size:13px; border-bottom:1px solid #eee; text-align:center; vertical-align:middle; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:#f9f9f9; }
.pos-ucl td:first-child { border-left:4px solid #4CAF50; }
.pos-cl  td:first-child { border-left:4px solid #2196f3; }
.pos-rel td:first-child { border-left:4px solid #f44336; }

.form-dots { display:flex; gap:3px; justify-content:center; }
.form-dot  { width:9px; height:9px; border-radius:50%; }
.f-W { background:#4CAF50; } .f-D { background:#ffc107; } .f-L { background:#f44336; }

.team-cell { display:flex; align-items:center; gap:8px; }
.team-cell img { width:20px; height:20px; object-fit:contain; }

/* ── League tabs ─────────────────────────────────────────── */
.league-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:15px; }
.league-tab {
  padding:7px 14px; border-radius:4px;
  border:1px solid #ddd; background:#fff;
  font-size:13px; font-weight:600; color:#666;
  cursor:pointer; transition:all .2s;
}
.league-tab:hover,.league-tab.active { background:#4CAF50; color:#fff; border-color:#4CAF50; }

/* ── League pill ─────────────────────────────────────────── */
.league-pills { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:15px; }
.league-pill {
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; border:1px solid #ddd;
  border-radius:20px; padding:6px 14px;
  font-size:13px; font-weight:600; color:#333;
  cursor:pointer; transition:all .2s;
}
.league-pill:hover { border-color:#4CAF50; color:#4CAF50; }
.league-pill .cnt { background:#4CAF50; color:#fff; border-radius:12px; padding:1px 7px; font-size:11px; }

/* ── State empty/error ───────────────────────────────────── */
.empty-box {
  background:#fff; border:1px solid #ddd; border-radius:5px;
  padding:50px 20px; text-align:center; color:#999;
}
.empty-box i { font-size:48px; color:#ddd; display:block; margin-bottom:12px; }
.empty-box h3 { color:#555; margin-bottom:8px; font-size:16px; }
.empty-box p  { font-size:13px; }

/* ── Stream player ───────────────────────────────────────── */
.stream-box {
  background:#000; border-radius:5px; overflow:hidden;
  position:relative; margin-bottom:15px;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.stream-box iframe {
  width:100%; height:480px; border:none; display:block;
}
.stream-overlay {
  position:absolute; inset:0;
  background:#111; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; padding:20px;
}
.stream-overlay.hidden { display:none; }
.spinner {
  width:48px; height:48px;
  border:4px solid rgba(76,175,80,.25);
  border-top-color:#4CAF50;
  border-radius:50%;
  animation:spin 1s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.stream-overlay h3 { font-size:16px; }
.stream-overlay p  { font-size:13px; color:rgba(255,255,255,.6); max-width:300px; }

.error-overlay {
  position:absolute; inset:0;
  background:#111; color:#fff;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; padding:20px; z-index:10;
}
.error-overlay.show { display:flex; }
.error-overlay i    { font-size:48px; color:#f44336; }

/* ── Channel buttons ─────────────────────────────────────── */
.channel-buttons { display:flex; flex-wrap:wrap; gap:8px; }
.ch-btn {
  padding:9px 16px; border-radius:4px;
  border:1px solid #ddd; background:#f9f9f9;
  font-size:13px; font-weight:bold; color:#333;
  cursor:pointer; transition:all .2s;
  display:flex; align-items:center; gap:6px;
}
.ch-btn:hover,.ch-btn.active { background:#4CAF50; color:#fff; border-color:#4CAF50; }
.ch-btn:disabled { background:#eee; color:#bbb; cursor:not-allowed; }

/* ── Scoreboard ──────────────────────────────────────────── */
.scoreboard {
  background:linear-gradient(135deg,#1a1a2e,#16213e);
  border-radius:5px; padding:20px;
  color:#fff; display:flex; align-items:center;
  gap:10px; margin-bottom:15px; flex-wrap:wrap;
}
.sb-team { flex:1; text-align:center; min-width:80px; }
.sb-logo { width:60px; height:60px; object-fit:contain; margin:0 auto 8px; }
.sb-name { font-size:14px; font-weight:bold; line-height:1.25; }
.sb-score { font-size:38px; font-weight:bold; color:#4CAF50; min-width:100px; text-align:center; flex-shrink:0; letter-spacing:3px; }
.sb-vs    { font-size:16px; color:rgba(255,255,255,.4); min-width:100px; text-align:center; flex-shrink:0; }
.sb-meta  { width:100%; text-align:center; font-size:12px; color:rgba(255,255,255,.5); padding-top:6px; }

/* ── Scorers ─────────────────────────────────────────────── */
.scorers-wrap { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.scorers-col  { background:#f9f9f9; border-radius:4px; padding:12px; }
.scorers-col h4 { font-size:12px; color:#666; text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
.scorer-row { display:flex; align-items:center; justify-content:space-between; padding:5px 0; border-bottom:1px solid #eee; font-size:13px; }
.scorer-row:last-child { border-bottom:none; }
.scorer-name { font-weight:bold; }
.scorer-time { background:#4CAF50; color:#fff; font-size:11px; font-weight:bold; padding:2px 7px; border-radius:12px; }

/* ── Copy/share bar ──────────────────────────────────────── */
.share-bar { display:flex; gap:8px; align-items:stretch; }
.share-input {
  flex:1; padding:10px 12px; border:1px solid #ddd; border-radius:4px;
  font-size:13px; color:#666; background:#f9f9f9; cursor:text;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb { font-size:13px; color:#888; margin-bottom:12px; display:flex; align-items:center; flex-wrap:wrap; gap:5px; }
.breadcrumb a { color:#4CAF50; font-weight:600; }
.breadcrumb i  { font-size:10px; }

/* ── Back button ─────────────────────────────────────────── */
.back-btn {
  display:inline-flex; align-items:center; gap:8px;
  color:#4CAF50; font-weight:bold; font-size:14px;
  background:#f9f9f9; padding:9px 14px;
  border-radius:4px; border:1px solid #ddd;
  margin-bottom:15px; transition:all .2s;
}
.back-btn:hover { background:#4CAF50; color:#fff; border-color:#4CAF50; }

/* ── WhatsApp strip ──────────────────────────────────────── */
.wa-strip {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  padding:14px 15px; background:#fff;
  border:1px solid #ddd; border-radius:5px;
  margin-bottom:15px;
}
.wa-strip .info { display:flex; align-items:center; gap:12px; }
.wa-icon { width:42px; height:42px; border-radius:50%; background:#25d366; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.wa-icon i { font-size:20px; color:#fff; }
.wa-name  { font-size:14px; font-weight:bold; }
.wa-desc  { font-size:12px; color:#666; }
.wa-btn   { background:#25d366; color:#fff; padding:9px 16px; border-radius:4px; font-size:13px; font-weight:bold; display:inline-flex; align-items:center; gap:6px; transition:background .2s; }
.wa-btn:hover { background:#1da851; }

/* ── Article body ────────────────────────────────────────── */
.article-body { font-size:15px; line-height:1.75; color:#333; }
.article-body p  { margin-bottom:16px; }
.article-body h1,.article-body h2 { color:#222; font-size:20px; margin:22px 0 10px; border-bottom:2px solid #4CAF50; padding-bottom:6px; }
.article-body h3 { color:#333; font-size:16px; margin:18px 0 8px; }
.article-body a  { color:#4CAF50; text-decoration:underline; }
.article-body ul,.article-body ol { margin:0 0 16px 24px; }
.article-body li { margin-bottom:5px; }
.article-body blockquote { border-left:4px solid #4CAF50; background:#e8f5e9; padding:12px 16px; margin:16px 0; font-style:italic; color:#555; border-radius:0 4px 4px 0; }
.article-body img { max-width:100%; border-radius:5px; margin:12px 0; }
.article-body strong,.article-body b { font-weight:bold; }

/* ── Podium (top scorers) ────────────────────────────────── */
.podium { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
.podium-card { background:#fff; border:1px solid #ddd; border-radius:5px; padding:16px 12px; text-align:center; box-shadow:0 2px 4px rgba(0,0,0,.07); }
.podium-card.gold   { border-top:4px solid #ffd700; }
.podium-card.silver { border-top:4px solid #c0c0c0; }
.podium-card.bronze { border-top:4px solid #cd7c2f; }
.podium-pos  { font-size:26px; font-weight:bold; margin-bottom:6px; }
.podium-pos.gold   { color:#ffd700; }
.podium-pos.silver { color:#9e9e9e; }
.podium-pos.bronze { color:#cd7c2f; }
.podium-name  { font-size:14px; font-weight:bold; margin-bottom:2px; }
.podium-club  { font-size:12px; color:#888; margin-bottom:8px; }
.podium-goals { font-size:30px; font-weight:bold; color:#4CAF50; }
.podium-lbl   { font-size:11px; color:#999; text-transform:uppercase; letter-spacing:.5px; }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer { background:#2e7d32; color:rgba(255,255,255,.75); text-align:center; padding:16px; font-size:13px; margin-top:30px; }
.site-footer a { color:#a5d6a7; }

/* ─────────── RESPONSIVE ─────────── */
@media (max-width:900px) {
  .nav-menu a span { display:none; }
  .nav-menu a i    { font-size:22px; }
  .nav-menu a      { padding:0 12px; }
}
@media (max-width:700px) {
  .nav-logo .full  { display:none; }
  .nav-logo .short { display:inline; }
  .matches-grid    { grid-template-columns:1fr; }
  .hl-grid         { grid-template-columns:repeat(2,1fr); }
  .news-grid       { grid-template-columns:1fr; }
  .podium          { grid-template-columns:1fr; }
  .scorers-wrap    { grid-template-columns:1fr; }
  .stream-box iframe { height:220px; }
  .scoreboard      { flex-direction:column; }
  .sb-score,.sb-vs { min-width:auto; }
  .data-table .hide-sm { display:none; }
}
@media (max-width:480px) {
  .hl-grid { grid-template-columns:1fr; }
  .wrap    { padding:10px; }
  .stats-row { gap:6px; }
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE  –  toggled by adding class="dark" to <html>
   ═══════════════════════════════════════════════════════════ */
html.dark body                    { background:#181818; color:#e0e0e0; }
html.dark .box,
html.dark .match-card,
html.dark .hl-card,
html.dark .news-card              { background:#242424; border-color:#333; }
html.dark .box-body               { background:#242424; }
html.dark .section-title          { background:#2e7d32; }
html.dark .data-table th          { background:#2a2a2a; color:#aaa; border-color:#333; }
html.dark .data-table td          { border-color:#2e2e2e; color:#ddd; }
html.dark .data-table tr:hover td { background:#2a2a2a; }
html.dark .team-name,
html.dark .hl-title,
html.dark .news-title,
html.dark .podium-name            { color:#e0e0e0; }
html.dark .match-league,
html.dark .match-kickoff,
html.dark .hl-comp,
html.dark .hl-date,
html.dark .news-desc,
html.dark .news-date,
html.dark .stat-lbl,
html.dark .scorer-col h4,
html.dark .news-foot,
html.dark .podium-club,
html.dark .podium-lbl             { color:#999; }
html.dark .match-vs               { background:#2e2e2e; color:#999; }
html.dark .match-kickoff          { background:#2e2e2e; }
html.dark .team-logo-wrap         { background:#2e2e2e; border-color:#333; }
html.dark .stat-box               { background:#2e2e2e; border-color:#333; }
html.dark .hl-comp                { background:#2e2e2e; }
html.dark .news-foot              { border-color:#333; }
html.dark .info-bar               { background:#1b3a1e; border-color:#2e7d32; color:#9e9e9e; }
html.dark .league-tab             { background:#242424; border-color:#333; color:#aaa; }
html.dark .league-tab:hover,
html.dark .league-tab.active      { background:#4CAF50; color:#fff; border-color:#4CAF50; }
html.dark .league-pill            { background:#242424; border-color:#333; color:#ccc; }
html.dark .league-pill:hover      { border-color:#4CAF50; color:#4CAF50; }
html.dark .ch-btn                 { background:#2e2e2e; border-color:#333; color:#ddd; }
html.dark .ch-btn:hover,
html.dark .ch-btn.active          { background:#4CAF50; color:#fff; border-color:#4CAF50; }
html.dark .scorers-col            { background:#2e2e2e; }
html.dark .scorer-row             { border-color:#3a3a3a; }
html.dark .wa-strip               { background:#242424; border-color:#333; }
html.dark .wa-name                { color:#e0e0e0; }
html.dark .wa-desc                { color:#999; }
html.dark .share-input            { background:#2e2e2e; border-color:#333; color:#aaa; }
html.dark .back-btn               { background:#2e2e2e; border-color:#333; color:#4CAF50; }
html.dark .back-btn:hover         { background:#4CAF50; color:#fff; }
html.dark .breadcrumb             { color:#666; }
html.dark .podium-card            { background:#242424; border-color:#333; }
html.dark .empty-box              { background:#242424; border-color:#333; color:#666; }
html.dark .empty-box h3           { color:#aaa; }
html.dark .article-body           { color:#d0d0d0; }
html.dark .article-body h1,
html.dark .article-body h2        { color:#e0e0e0; }
html.dark .article-body h3        { color:#ccc; }
html.dark .article-body blockquote{ background:#1b3a1e; color:#9e9e9e; }
html.dark .table-wrap             { border-color:#333; }
html.dark .site-footer            { background:#111; }
html.dark .scoreboard             { background:linear-gradient(135deg,#0f0f1a,#141428); }

/* Dark mode toggle button (sits in navbar) */
.dm-toggle {
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.15);
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:16px;
  transition:background .2s;
  flex-shrink:0;
}
.dm-toggle:hover { background:rgba(255,255,255,.3); }