:root {
  --bg-a: #FCFAF7;
  --bg-b: #FFFEFB;
  --blue: #6495ED;
  --blue-soft: rgba(100, 149, 237, 0.14);
  --green: #14532D;
  --gold: #B9962D;
  --red: #C83C46;
  --orange: #E17D14;
  --text: #13182a;
  --text-soft: #4B5563;
  --muted: #6B7280;
  --line: #ecebe7;
  --card: rgba(19, 24, 42, 0.045);
  --card-strong: rgba(19, 24, 42, 0.075);
  --shadow: 0 16px 42px rgba(19, 24, 42, 0.10);
  --surface: #FFFEFB;
  --surface-warm: #F5F2EB;
  --surface-raised: rgba(255, 254, 251, 0.92);
  --brand-name: #13182a;
  --btn-primary-bg: #13182a;
  --btn-primary-text: #ffffff;
  --btn-ghost-text: #13182a;
  --btn-ghost-border: rgba(19, 24, 42, 0.16);
}

[data-theme="dark"] {
  --bg-a: #1a1a2e;
  --bg-b: #16213e;
  --blue: #4A86E8;
  --blue-soft: rgba(74, 134, 232, 0.18);
  --green: #8ad8b2;
  --gold: #f3c969;
  --red: #ff8a8a;
  --orange: #f5b66d;
  --text: #ffffff;
  --text-soft: #d8e2f3;
  --muted: #a0aec0;
  --line: rgba(255, 255, 255, 0.11);
  --card: rgba(255, 255, 255, 0.055);
  --card-strong: rgba(255, 255, 255, 0.085);
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
  --surface: rgba(255, 255, 255, 0.94);
  --surface-warm: rgba(255, 255, 255, 0.055);
  --surface-raised: rgba(255, 255, 255, 0.08);
  --brand-name: #ffffff;
  --btn-primary-bg: #ffffff;
  --btn-primary-text: #13182a;
  --btn-ghost-text: #ffffff;
  --btn-ghost-border: rgba(255, 255, 255, 0.11);
}

html[data-theme] body {
  color: var(--text) !important;
  background:
    radial-gradient(circle at 12% 4%, rgba(100, 149, 237, 0.16), transparent 28rem),
    radial-gradient(circle at 90% 16%, rgba(185, 150, 45, 0.16), transparent 25rem),
    linear-gradient(135deg, var(--bg-a) 0%, var(--bg-b) 100%) !important;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 12% 4%, rgba(74, 134, 232, 0.34), transparent 28rem),
    radial-gradient(circle at 90% 16%, rgba(243, 201, 105, 0.16), transparent 25rem),
    linear-gradient(135deg, var(--bg-a) 0%, var(--bg-b) 100%) !important;
}

html[data-theme] a { color: var(--blue); }
html[data-theme] h1,
html[data-theme] h2,
html[data-theme] h3,
html[data-theme] .brand,
html[data-theme] .brand strong,
html[data-theme] .etcal-heading { color: var(--brand-name) !important; }

html[data-theme] p,
html[data-theme] li,
html[data-theme] .lead,
html[data-theme] .intro,
html[data-theme] .brand span span,
html[data-theme] .brand-subtitle span,
html[data-theme] footer,
html[data-theme] .date-line,
html[data-theme] .note,
html[data-theme] .meta,
html[data-theme] .caption,
html[data-theme] .empty { color: var(--text-soft) !important; }

html[data-theme] .kicker,
html[data-theme] .eyebrow,
html[data-theme] .amharic,
html[data-theme] .am { color: var(--blue) !important; }

html[data-theme] .section,
html[data-theme] .text-card,
html[data-theme] .feature,
html[data-theme] .story-card,
html[data-theme] .screen-card,
html[data-theme] .month,
html[data-theme] .month-card,
html[data-theme] .month-holiday,
html[data-theme] .history-cta,
html[data-theme] .support,
html[data-theme] .quick-card,
html[data-theme] .holiday-card,
html[data-theme] .guide-card,
html[data-theme] .platform,
html[data-theme] .faq,
html[data-theme] .cta,
html[data-theme] .contact-box,
html[data-theme] .source-card,
html[data-theme] .callout,
html[data-theme] .hero-card,
html[data-theme] .article-card,
html[data-theme] .article-section,
html[data-theme] .time-table,
html[data-theme] .calendar-shell,
html[data-theme] .resource-link,
html[data-theme] .artifact,
html[data-theme] .shot,
html[data-theme] .phone-card,
html[data-theme] .today-card,
html[data-theme] .converter-card {
  color: var(--text) !important;
  background: var(--surface-raised) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow);
}

html[data-theme="dark"] .faq,
html[data-theme="dark"] .resource-link,
html[data-theme="dark"] .artifact,
html[data-theme="dark"] .holiday-card,
html[data-theme="dark"] .guide-card,
html[data-theme="dark"] .quick-card,
html[data-theme="dark"] .section,
html[data-theme="dark"] .text-card,
html[data-theme="dark"] .story-card,
html[data-theme="dark"] .screen-card,
html[data-theme="dark"] .month,
html[data-theme="dark"] .month-card,
html[data-theme="dark"] .month-holiday,
html[data-theme="dark"] .history-cta,
html[data-theme="dark"] .support,
html[data-theme="dark"] .platform,
html[data-theme="dark"] .cta,
html[data-theme="dark"] .source-card,
html[data-theme="dark"] .callout,
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .article-card,
html[data-theme="dark"] .article-section,
html[data-theme="dark"] .time-table,
html[data-theme="dark"] .calendar-shell {
  background: var(--card) !important;
}

html[data-theme] .store-btn {
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
}

html[data-theme] .ghost-btn,
html[data-theme] .detail-link,
html[data-theme] .ics-link,
html[data-theme] .chip {
  background: var(--card) !important;
  color: var(--btn-ghost-text) !important;
  border-color: var(--btn-ghost-border) !important;
}

html[data-theme] .chip[aria-pressed="true"] {
  background: var(--blue) !important;
  color: #ffffff !important;
  border-color: var(--blue) !important;
}

html[data-theme] .search,
html[data-theme] input,
html[data-theme] select {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

html[data-theme] table,
html[data-theme] td,
html[data-theme] th { border-color: var(--line) !important; }
html[data-theme] td,
html[data-theme] th { color: var(--text-soft) !important; }

.theme-toggle {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  border-radius: 999px;
  min-height: 34px;
  padding: 7px 12px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: none;
}

.theme-toggle:hover { background: var(--card-strong); }
[data-theme="light"] .theme-toggle__light { display: none; }
[data-theme="dark"] .theme-toggle__dark { display: none; }

.native-ad-slot,
.ad-slot {
  display: block;
  margin: 28px 0;
  padding: 18px;
  border: 1px solid var(--line) !important;
  border-radius: 22px;
  background: var(--card) !important;
  color: var(--text-soft) !important;
  box-shadow: none !important;
  min-height: 96px;
}

.native-ad-slot--in-feed {
  margin: 18px 0;
  border-radius: 18px;
}

.ad-label {
  display: block;
  margin-bottom: 10px;
  color: var(--muted) !important;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .theme-toggle { min-height: 32px; padding: 6px 11px; }
  .native-ad-slot,
  .ad-slot { margin: 22px 0; padding: 15px; border-radius: 18px; }
}

@media (max-width: 560px) {
  html[data-theme] .container {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  html[data-theme] main {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  html[data-theme] .hero,
  html[data-theme] .quick-card,
  html[data-theme] .section,
  html[data-theme] .hero-card,
  html[data-theme] .cta,
  html[data-theme] .native-ad-slot,
  html[data-theme] footer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden;
  }

  html[data-theme] main > .eyebrow,
  html[data-theme] main > h1,
  html[data-theme] main > .lead {
    width: 100% !important;
    max-width: 100% !important;
  }

  html[data-theme] .hero > *,
  html[data-theme] .section > *,
  html[data-theme] .hero-card > *,
  html[data-theme] .quick-card > * {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html[data-theme] .section-head {
    display: block !important;
  }

  html[data-theme] .grid,
  html[data-theme] .guide-grid,
  html[data-theme] .upcoming-grid,
  html[data-theme] .info-grid,
  html[data-theme] .month-grid,
  html[data-theme] .platform-grid,
  html[data-theme] .resource-links,
  html[data-theme] .faq-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-theme] h1,
  html[data-theme] h2,
  html[data-theme] h3,
  html[data-theme] p,
  html[data-theme] li,
  html[data-theme] .lead,
  html[data-theme] .intro,
  html[data-theme] .pill,
  html[data-theme] .resource-link,
  html[data-theme] .guide-card,
  html[data-theme] .holiday-card {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  html[data-theme] .lead,
  html[data-theme] .intro,
  html[data-theme] .quick-card p,
  html[data-theme] .section p,
  html[data-theme] .section li {
    width: 100% !important;
  }

  html[data-theme] .store-row,
  html[data-theme] .cta-row,
  html[data-theme] .related-links {
    width: 100%;
  }
}