/* ============================================================
   Mindful Zen — MAGAZIN layout (ERANEWS-style)
   Light + dark via body.theme-daylight / body.theme-deep-navy
   Red accent (#d3000a)
   ============================================================ */

:root {
  --mag-red:        #d3000a;
  --mag-red-dark:   #a50008;
  --mag-red-text:   #ffffff;
  --mag-bg:         #f0f0f0;          /* light page bg */
  --mag-card:       #ffffff;
  --mag-ink:        #1a1a1a;          /* primary text */
  --mag-ink-soft:   #555555;
  --mag-border:     #e5e5e5;
  --mag-topbar-bg:  #1a1a1a;
  --mag-topbar-ink: #cccccc;
  --mag-shadow:     none;             /* user wanted no shadows */
}

body.theme-deep-navy {
  --mag-bg:         #1d1d1d;          /* dark page bg */
  --mag-card:       #2a2a2a;
  --mag-ink:        #f0f0f0;
  --mag-ink-soft:   #aaaaaa;
  --mag-border:     #3a3a3a;
  --mag-topbar-bg:  #0d0d0d;
  --mag-topbar-ink: #cccccc;
}

/* Body & global — applies to daylight + deep-navy + any page rendered
   inside the magazin shell (legacy themes still use their own bg) */
body.theme-daylight,
body.theme-deep-navy {
  background: var(--mag-bg) !important;
  color: var(--mag-ink) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Other themes — keep them readable when magazin chrome is on top */
body.theme-forest    { --mag-bg: #1a2820; --mag-card: #243228; --mag-ink: #e8f0e8; --mag-ink-soft: #a0b0a0; --mag-border: #2e3e34; --mag-topbar-bg: #0f1812; }
body.theme-sunset    { --mag-bg: #2a1a1f; --mag-card: #3a2530; --mag-ink: #f5e8e8; --mag-ink-soft: #c0a0a8; --mag-border: #4a3340; --mag-topbar-bg: #1a0e14; }
body.theme-lavender  { --mag-bg: #f0ebf7; --mag-card: #ffffff; --mag-ink: #2a1f3d; --mag-ink-soft: #6b5a82; --mag-border: #d8cce8; --mag-topbar-bg: #2a1f3d; --mag-topbar-ink: #d8cce8; }
body.theme-pure-black{ --mag-bg: #000000; --mag-card: #0e0e0e; --mag-ink: #f0f0f0; --mag-ink-soft: #999999; --mag-border: #2a2a2a; --mag-topbar-bg: #000000; }
body.theme-forest, body.theme-sunset, body.theme-pure-black {
  background: var(--mag-bg) !important;
  color: var(--mag-ink) !important;
}
body.theme-lavender { background: var(--mag-bg) !important; color: var(--mag-ink) !important; }

.magazin {
  max-width: 1280px;
  margin: 0 auto;
  background: var(--mag-bg);
}

/* ─────────── 1. TOP BAR ─────────── */
.mag-topbar {
  background: var(--mag-topbar-bg);
  color: var(--mag-topbar-ink);
  padding: 8px 0;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.mag-topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.mag-topbar-links {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mag-topbar-links a {
  color: var(--mag-topbar-ink);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}
.mag-topbar-links a:hover { color: var(--mag-red); }

.mag-topbar-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.mag-topbar-social {
  display: flex;
  gap: 12px;
}
.mag-topbar-social a {
  color: var(--mag-topbar-ink);
  font-size: 14px;
  transition: color 0.2s;
  text-decoration: none;
}
.mag-topbar-social a:hover { color: var(--mag-red); }
.mag-topbar-auth {
  display: flex;
  gap: 18px;
  border-left: 1px solid #444;
  padding-left: 18px;
}
.mag-topbar-auth a {
  color: var(--mag-topbar-ink);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}
.mag-topbar-auth a:hover { color: var(--mag-red); }

/* ─────────── 2. BREAKING NEWS TICKER ─────────── */
.mag-breaking {
  background: var(--mag-card);
  border-bottom: 1px solid var(--mag-border);
  border-top: 4px solid var(--mag-red);
  padding: 14px 0;
}
.mag-breaking-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.mag-breaking-badge {
  background: var(--mag-red);
  color: #fff;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.mag-breaking-text {
  flex: 1;
  color: var(--mag-ink);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mag-breaking-search {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}
.mag-breaking-search input {
  background: var(--mag-card);
  border: 1px solid var(--mag-border);
  border-right: none;
  padding: 8px 14px;
  color: var(--mag-ink);
  font-family: inherit;
  font-size: 13px;
  width: 200px;
  outline: none;
}
.mag-breaking-search button {
  background: var(--mag-red);
  border: none;
  color: #fff;
  padding: 0 16px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
}
.mag-breaking-search button:hover { background: var(--mag-red-dark); }

/* ─────────── 3. LOGO + BANNER ─────────── */
.mag-logo-row {
  background: var(--mag-bg);
  padding: 32px 24px;
}
.mag-logo-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 32px;
  align-items: center;
}
.mag-brand {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.mag-brand-name {
  font-size: 48px;
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--mag-ink);
  line-height: 1;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
}
.mag-brand-tagline {
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--mag-red);
  margin-top: 6px;
  text-transform: uppercase;
  font-weight: 600;
}
.mag-banner {
  background: linear-gradient(135deg, #0a0a0a, #1a1a1a);
  color: #fff;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mag-border);
  min-height: 110px;
  font-size: 16px;
  text-align: center;
  letter-spacing: 1px;
}
.mag-banner-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 1px;
}
.mag-banner-sub {
  display: block;
  font-size: 14px;
  color: #ccc;
  margin-top: 4px;
  font-weight: 400;
}

/* Beta banner — replaces the generic ad slot */
.mag-banner-beta {
  background: linear-gradient(135deg, var(--mag-red) 0%, #ff3946 50%, #d3000a 100%);
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 32px;
  border: none;
  position: relative;
  overflow: hidden;
  text-align: left;
  transition: transform 0.2s;
}
.mag-banner-beta:hover { transform: scale(1.01); }
.mag-banner-tag {
  display: inline-block;
  background: rgba(0, 0, 0, 0.25);
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  border-radius: 0;
  margin-bottom: 8px;
}
.mag-banner-beta .mag-banner-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.2;
}
.mag-banner-beta .mag-banner-sub {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  margin-top: 6px;
  font-style: italic;
}
.mag-banner-cta {
  background: #fff;
  color: var(--mag-red);
  padding: 14px 28px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-left: 24px;
}

/* ─────────── Magazin language switcher ─────────── */
.mag-lang { position: relative; }
.mag-lang-btn {
  background: transparent;
  border: 1px solid #444;
  color: var(--mag-topbar-ink);
  padding: 5px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  transition: all 0.2s;
}
.mag-lang-btn:hover {
  background: var(--mag-red);
  border-color: var(--mag-red);
  color: #fff;
}
.mag-lang-arrow { font-size: 10px; }

.mag-lang-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  display: none;
  flex-direction: column;
  z-index: 200;
  max-height: 60vh;
  overflow-y: auto;
}
.mag-lang.open .mag-lang-dropdown { display: flex; }

.mag-lang-dropdown .lang-option {
  background: transparent;
  border: none;
  color: #ccc;
  padding: 10px 14px;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.3px;
  transition: all 0.15s;
}
.mag-lang-dropdown .lang-option:hover {
  background: var(--mag-red);
  color: #fff;
}
.mag-lang-dropdown .lang-option.active {
  background: rgba(211, 0, 10, 0.15);
  color: var(--mag-red);
  font-weight: 700;
}

/* ─────────── 4. MAIN NAV ─────────── */
.mag-nav {
  background: var(--mag-card);
  border-bottom: 4px solid var(--mag-red);
}
.mag-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
}
.mag-nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}
.mag-nav-list > li > a {
  display: block;
  padding: 16px 14px;
  color: var(--mag-ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  transition: all 0.2s;
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .mag-nav-list > li > a { padding: 14px 10px; font-size: 12px; letter-spacing: 0.4px; }
}
.mag-nav-list > li > a:hover {
  background: var(--mag-bg);
  color: var(--mag-red);
}
.mag-nav-list > li.active > a {
  background: var(--mag-red);
  color: #fff;
}
.mag-nav-toggle {
  background: var(--mag-red);
  color: #fff;
  border: none;
  padding: 14px 18px;
  cursor: pointer;
  font-size: 16px;
  display: none;
}
.mag-nav-extras {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* ─────────── 5. SECTION TITLES ─────────── */
.mag-section-title {
  display: inline-block;
  background: var(--mag-card);
  color: var(--mag-ink);
  padding: 10px 18px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  position: relative;
  margin-bottom: 14px;
  border-left: 4px solid var(--mag-red);
}
.mag-section-title-bar {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--mag-border);
}
.mag-section-title-bar .mag-section-title {
  margin-bottom: 0;
  margin-right: -1px;
}

/* ─────────── 6. MAIN GRID (wide content + sidebar) ─────────── */
.mag-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px;
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

/* Each column flows its children with a consistent rhythm */
.mag-main > .mag-col-main,
.mag-main > .mag-col-side {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

/* ─────────── 7. HERO (big featured) ─────────── */
.mag-hero {
  position: relative;
  overflow: hidden;
  background: var(--mag-card);
  border: 1px solid var(--mag-border);
}
.mag-hero-img {
  width: 100%;
  aspect-ratio: 16/8;
  background: linear-gradient(135deg, #5b4080, #1a1a4f);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 80px;
  position: relative;
}
/* When a real image is set, hide the emoji fallback */
.mag-hero-img[style*="url("] { font-size: 0; }
.mag-hero-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%);
}
.mag-hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px;
  color: #fff;
  z-index: 1;
}
.mag-hero-title {
  font-size: 28px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
  margin: 0 0 12px;
  color: #fff;
}
.mag-hero-text {
  font-size: 14px;
  line-height: 1.6;
  color: #ddd;
  max-width: 560px;
  margin: 0;
}
.mag-hero-thumbs {
  display: flex;
  gap: 6px;
  padding: 8px;
  background: rgba(0,0,0,0.7);
  align-items: center;
}
.mag-hero-thumb {
  width: 56px;
  height: 40px;
  background: linear-gradient(135deg, #555, #333);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border-bottom: 3px solid transparent;
}
.mag-hero-thumb.active { border-bottom-color: var(--mag-red); }
.mag-hero-more {
  margin-left: auto;
  color: var(--mag-red);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 8px;
  text-decoration: none;
}

/* ─────────── 8. SPOTLIGHT ─────────── */
.mag-spotlight {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Horizontal variant — 3 cards side by side under the hero */
.mag-spotlight--row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
}
.mag-spotlight-card {
  background: var(--mag-card);
  border: 1px solid var(--mag-border);
  display: flex;
  flex-direction: column;
}
.mag-spotlight-img {
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #b8a4d8, #5eead4);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: rgba(255,255,255,0.9);
}
/* When a real image is set, hide the emoji fallback */
.mag-spotlight-img[style*="url("] { font-size: 0; }
.mag-spotlight-body {
  padding: 16px 18px 18px;
}
.mag-spotlight-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--mag-ink);
  margin: 0 0 8px;
  line-height: 1.3;
}
.mag-spotlight-meta {
  display: flex;
  gap: 14px;
  font-size: 10.5px;
  color: var(--mag-ink-soft);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.mag-readmore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mag-red);
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 6px 0;
}
.mag-readmore:hover { color: var(--mag-red-dark); }

/* ─────────── 9. NEWSLIST (small thumbnails) ─────────── */
.mag-newslist {
  display: flex;
  flex-direction: column;
}
/* Grid variant — 2 columns when there's horizontal room (featured under spotlight) */
.mag-newslist--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 24px;
}
.mag-newslist--grid .mag-newslist-item:nth-last-child(2) { border-bottom: none; }
.mag-newslist-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--mag-border);
  text-decoration: none;
  align-items: center;
}
.mag-newslist-item:last-child { border-bottom: none; }
.mag-newslist--grid .mag-newslist-img {
  width: 72px;
  height: 72px;
}
.mag-newslist-img {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #888, #555);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.mag-newslist-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mag-newslist-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--mag-ink);
  margin: 0 0 4px;
  line-height: 1.3;
}
.mag-newslist-meta {
  display: flex;
  gap: 10px;
  font-size: 10px;
  color: var(--mag-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mag-newslist-meta .cat-travel { color: #38b249; font-weight: 700; }
.mag-newslist-meta .cat-mobile { color: #d59f00; font-weight: 700; }
.mag-newslist-meta .cat-health { color: #d3000a; font-weight: 700; }

/* ─────────── 9c. ZENBOOK PREVIEW (homepage sidebar) ─────────── */
.mag-zb-card {
  background: var(--mag-card);
  border: 1px solid var(--mag-border);
  border-top: 4px solid #7c3aed;
  padding: 18px 18px 14px;
}
.mag-zb-pitch {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--mag-ink-soft);
  margin: 0 0 14px;
}
.mag-zb-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.mag-zb-empty {
  font-size: 12.5px;
  color: var(--mag-ink-soft);
  font-style: italic;
  padding: 12px 0;
  text-align: center;
}
.mag-zb-post {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--mag-border);
}
.mag-zb-post:last-child { border-bottom: none; }
.mag-zb-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #5eead4);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
.mag-zb-meta { min-width: 0; }
.mag-zb-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--mag-ink);
}
.mag-zb-text {
  font-size: 12.5px;
  color: var(--mag-ink);
  line-height: 1.4;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mag-zb-cta {
  display: block;
  text-align: center;
  padding: 10px;
  background: linear-gradient(135deg, #7c3aed, #0d9488);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 999px;
  transition: filter 0.15s;
}
.mag-zb-cta:hover { filter: brightness(1.05); }

/* ─────────── 9b. AD SLOT (Google AdSense) ─────────── */
.mag-ad-slot {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 24px 0;
}
.mag-ad-inner {
  position: relative;
  background: var(--mag-card);
  border: 1px dashed var(--mag-border);
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
}
.mag-ad-label {
  position: absolute;
  top: 6px;
  left: 10px;
  font-size: 9px;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--mag-ink-soft);
  text-transform: uppercase;
}
.mag-ad-inner ins.adsbygoogle { width: 100%; }

/* ─────────── 10. WORLD NEWS (1 big + list + sidebar) ─────────── */
.mag-worldsection {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px;
}
.mag-world-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  margin-top: 18px;
}
.mag-feature-card {
  background: var(--mag-card);
  border: 1px solid var(--mag-border);
}
.mag-feature-img {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #4a4a4a, #2a2a2a);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  color: #fff;
}
/* When a real image is set, hide the emoji fallback */
.mag-feature-img[style*="url("] { font-size: 0; }
.mag-feature-body {
  padding: 20px;
}
.mag-feature-meta {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--mag-ink-soft);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.mag-feature-title {
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--mag-ink);
  line-height: 1.2;
  letter-spacing: 0.5px;
}
.mag-feature-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mag-ink-soft);
  margin: 0 0 16px;
}

/* Article list (middle column of world news) */
.mag-articlelist {
  display: flex;
  flex-direction: column;
}
.mag-articlelist-item {
  padding: 18px 0;
  border-bottom: 1px solid var(--mag-border);
  text-decoration: none;
  display: block;
}
.mag-articlelist-item:last-child { border-bottom: none; }
.mag-articlelist-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--mag-ink);
  margin: 0 0 8px;
  line-height: 1.3;
}
.mag-articlelist-text {
  font-size: 13px;
  color: var(--mag-ink-soft);
  line-height: 1.6;
  margin: 0 0 8px;
}
.mag-articlelist-meta {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--mag-ink-soft);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ─────────── 11. CATEGORY TABS (LIFE/MAGAZINE/TRAVEL/WORLD) ─────────── */
.mag-cattabs-section {
  max-width: 1280px;
  margin: 32px auto 0;
  padding: 0 24px;
}
.mag-cattabs {
  background: var(--mag-card);
  border: 1px solid var(--mag-border);
  display: flex;
  margin-bottom: 18px;
}
.mag-cattab {
  flex: 1;
  background: transparent;
  border: none;
  padding: 18px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mag-ink);
  cursor: pointer;
  font-family: inherit;
  border-bottom: 4px solid transparent;
  transition: all 0.2s;
}
.mag-cattab:hover { color: var(--mag-red); }
.mag-cattab.active {
  background: var(--mag-card);
  color: var(--mag-red);
  border-bottom-color: var(--mag-red);
}

/* ─────────── 12. FOOTER ─────────── */
.mag-footer {
  background: var(--mag-topbar-bg);
  color: var(--mag-topbar-ink);
  padding: 48px 24px 18px;
  margin-top: 48px;
}
.mag-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}
.mag-footer-brand .mag-brand-name {
  color: #fff;
  font-size: 32px;
}
.mag-footer-brand p {
  color: #999;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 12px;
}
.mag-footer-col h4 {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0 0 14px;
  border-left: 3px solid var(--mag-red);
  padding-left: 10px;
}
.mag-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mag-footer-col li { padding: 4px 0; }
.mag-footer-col a {
  color: #999;
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s;
}
.mag-footer-col a:hover { color: var(--mag-red); }

.mag-footer-bottom {
  border-top: 1px solid #2a2a2a;
  padding-top: 18px;
  text-align: center;
  font-size: 12px;
  color: #777;
  letter-spacing: 0.5px;
}

/* ─────────── MOBILE BETA NUDGE ─────────── */
.mz-mobile-beta-modal {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0, 0, 0, 0.72);
  display: none;
  align-items: flex-end; justify-content: center;
}
.mz-mobile-beta-modal.open { display: flex; animation: mzMbFade 0.25s ease; }
@keyframes mzMbFade { from { opacity: 0; } to { opacity: 1; } }
.mz-mobile-beta-card {
  position: relative;
  width: 100%; max-width: 480px;
  padding: 28px 24px 24px;
  background: var(--mag-card);
  border-top: 4px solid var(--mag-red);
  text-align: center;
  color: var(--mag-ink);
  animation: mzMbSlide 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes mzMbSlide { from { transform: translateY(100%); } to { transform: translateY(0); } }
.mz-mobile-beta-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px;
  background: var(--mag-bg);
  border: 1px solid var(--mag-border);
  color: var(--mag-ink-soft);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.mz-mobile-beta-icon {
  font-size: 48px; line-height: 1; margin-bottom: 12px;
}
.mz-mobile-beta-badge {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 2.5px;
  padding: 4px 12px;
  background: var(--mag-red); color: #fff;
  margin-bottom: 14px;
}
.mz-mobile-beta-title {
  font-size: 22px; font-weight: 800; margin: 0 0 12px;
  color: var(--mag-ink); text-transform: uppercase;
}
.mz-mobile-beta-text {
  font-size: 14px; color: var(--mag-ink-soft);
  line-height: 1.6; margin: 0 0 20px;
}
.mz-mobile-beta-cta {
  display: block; width: 100%;
  padding: 14px 24px;
  background: var(--mag-red); color: #fff;
  border: none; font-weight: 700; font-size: 14px;
  letter-spacing: 1.5px; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
}
.mz-mobile-beta-later {
  display: block; width: 100%; margin-top: 10px;
  padding: 10px;
  background: none; border: none;
  color: var(--mag-ink-soft); font-size: 13px;
  font-family: inherit; cursor: pointer;
}

/* ─────────── COOKIE CONSENT BANNER ─────────── */
.mz-cc-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: mzCcFade 0.25s ease;
}
@keyframes mzCcFade { from { opacity: 0; } to { opacity: 1; } }
.mz-cc-overlay.mz-cc-leaving { opacity: 0; transition: opacity 0.2s; }

.mz-cc-card {
  position: relative;
  width: 100%;
  max-width: 720px;
  background: var(--mag-card, #fff);
  color: var(--mag-ink, #1a1a1a);
  border-top: 4px solid var(--mag-red, #d3000a);
  padding: 24px 28px 20px;
  margin: 0 16px 16px;
  animation: mzCcSlide 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
  font-family: 'Inter', -apple-system, sans-serif;
}
@keyframes mzCcSlide { from { transform: translateY(100%); } to { transform: translateY(0); } }

.mz-cc-close {
  position: absolute;
  top: 8px; right: 10px;
  width: 28px; height: 28px;
  background: transparent; border: none;
  color: var(--mag-ink-soft, #555);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.mz-cc-close:hover { color: var(--mag-red, #d3000a); }

.mz-cc-title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--mag-ink, #1a1a1a);
}
.mz-cc-text {
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--mag-ink-soft, #555);
}
.mz-cc-more { margin: 0 0 16px; font-size: 12.5px; }
.mz-cc-more a {
  color: var(--mag-red, #d3000a);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.mz-cc-more a:hover { text-decoration: underline; }

.mz-cc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 12px;
}
.mz-cc-btn {
  padding: 11px 20px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid var(--mag-border, #e5e5e5);
  background: var(--mag-card, #fff);
  color: var(--mag-ink, #1a1a1a);
  transition: all 0.15s;
}
.mz-cc-btn:hover {
  border-color: var(--mag-red, #d3000a);
  color: var(--mag-red, #d3000a);
}
.mz-cc-btn--accept {
  background: var(--mag-red, #d3000a);
  color: #fff;
  border-color: var(--mag-red, #d3000a);
}
.mz-cc-btn--accept:hover {
  background: var(--mag-red-dark, #a50008);
  color: #fff;
  border-color: var(--mag-red-dark, #a50008);
}

/* Settings panel */
.mz-cc-settings { padding-top: 4px; }
.mz-cc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--mag-border, #e5e5e5);
}
.mz-cc-row:last-of-type { border-bottom: none; }
.mz-cc-row-text { flex: 1; min-width: 0; }
.mz-cc-row-text strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--mag-ink, #1a1a1a);
}
.mz-cc-row-text span {
  display: block;
  font-size: 12.5px;
  color: var(--mag-ink-soft, #555);
  margin-top: 4px;
  line-height: 1.5;
}

/* Toggle switch */
.mz-cc-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.mz-cc-toggle input { display: none; }
.mz-cc-toggle span {
  position: absolute; inset: 0;
  background: #c0c0c0;
  transition: 0.2s;
  cursor: pointer;
}
.mz-cc-toggle span::before {
  content: ''; position: absolute;
  left: 3px; top: 3px;
  width: 18px; height: 18px;
  background: #fff;
  transition: 0.2s;
}
.mz-cc-toggle input:checked + span { background: var(--mag-red, #d3000a); }
.mz-cc-toggle input:checked + span::before { transform: translateX(20px); }
.mz-cc-toggle input:disabled + span { opacity: 0.6; cursor: not-allowed; }

@media (max-width: 540px) {
  .mz-cc-card { padding: 20px 18px; margin: 0; max-width: none; }
  .mz-cc-actions { flex-direction: column; }
  .mz-cc-btn { width: 100%; }
}

/* Theme toggle button (kept inline in topbar) */
.mz-theme-toggle:hover {
  background: var(--mag-red) !important;
  border-color: var(--mag-red) !important;
  color: #fff !important;
}

/* ============================================================
   PAGE-SPECIFIC OVERRIDES under the magazin shell
   The shell adds a topbar+nav of its own height; legacy pages
   that were designed with their own sticky nav had hard-coded
   top padding that now leaves a huge gap. Reset it here.
   ============================================================ */

/* CHAT page — adapt to the selected theme rather than forcing dark */
body.chat-page .chat-main {
  padding-top: 28px !important;
  min-height: auto !important;
  max-width: 860px;
  margin-bottom: 32px;
}
body.chat-page .chat-header { padding-top: 8px; }
/* Daylight: clean magazin look, light bg + dark text */
body.chat-page.theme-daylight .chat-header,
body.theme-daylight .chat-header {
  background: transparent !important;
  border-bottom: 1px solid #e5e5e5;
}
body.theme-daylight .chat-back,
body.theme-daylight .chat-menu {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0F172A !important;
}
body.theme-daylight .chat-back:hover,
body.theme-daylight .chat-menu:hover {
  border-color: var(--mag-red) !important;
  color: var(--mag-red) !important;
}
body.theme-daylight .chat-title { color: #0F172A !important; }
body.theme-daylight .chat-subtitle { color: #475569 !important; }
body.theme-daylight .demo-banner {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}
body.theme-daylight .chat-messages {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 16px;
  padding: 20px;
}
body.theme-daylight .chat-input-bar {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 999px;
  margin-top: 14px;
}
body.theme-daylight .chat-input {
  background: transparent !important;
  border: none !important;
  color: #0F172A !important;
}
body.theme-daylight .chat-input::placeholder { color: #94a3b8 !important; }
body.theme-daylight .chat-send {
  background: var(--mag-red) !important;
  color: #fff !important;
}
body.theme-daylight .chat-send:hover { background: var(--mag-red-dark) !important; }

/* Message bubbles on light theme */
body.theme-daylight .msg-row.mentor .msg-bubble {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #0F172A !important;
}
body.theme-daylight .msg-row.user .msg-bubble {
  background: var(--mag-red) !important;
  color: #fff !important;
  border: none !important;
}
body.theme-daylight .msg-time { color: #64748b !important; }
/* Avatars: gentle fill instead of glowing on light */
body.theme-daylight .msg-avatar.mentor,
body.theme-daylight .msg-avatar.user,
body.theme-daylight .chat-lotus {
  box-shadow: none !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}

/* CTA section at the bottom (signin / dashboard) */
body.theme-daylight .chat-cta-card,
body.theme-daylight .chat-cta-card.chat-cta-user {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e5e5e5 !important;
  color: #0F172A !important;
  box-shadow: none !important;
}
body.theme-daylight .chat-cta-title { color: #0F172A !important; }
body.theme-daylight .chat-cta-text { color: #475569 !important; }

/* DASH-style pages (dashboard / journal / calendar / billing / profile /
   settings / rewards / community / app-info / admin) usually wrap content
   in .dash-main, which historically sat under a sticky .dash-header.
   The shell hides .dash-header, so trim the top padding. */
.dash-main {
  padding-top: 28px !important;
}

/* TOPICS page — its hero is hidden by the shell, so the topics-main
   shouldn't have its old top padding either. */
.topics-main { padding-top: 28px !important; }

/* AUTH pages (login / onboarding / auth-callback) — center the card
   nicely under the magazin nav instead of full-viewport centering. */
.auth-main, .ob-main {
  padding: 40px 20px !important;
  min-height: auto !important;
}

/* ============================================================
   LIGHT-THEME (Daylight) overrides for legacy inner-page UI
   The legacy components were designed for dark UI: rgba(white)
   backgrounds + light text. Under the magazin shell on the
   daylight theme they look greyish & unreadable. Repaint them
   to match the magazin homepage cards: white card + grey border
   + dark ink text + visible borders everywhere.
   ============================================================ */

body.theme-daylight {
  /* ── Cards / containers ── */
  --card-bg: #ffffff;
  --card-border: #e5e5e5;
  --card-ink: #1a1a1a;
  --card-ink-soft: #555555;
}

/* Card-like containers — white background, subtle grey border */
body.theme-daylight .feature-card,
body.theme-daylight .dash-card,
body.theme-daylight .dash-stat,
body.theme-daylight .badge-card,
body.theme-daylight .reward-card,
body.theme-daylight .streak-card,
body.theme-daylight .topic-card,
body.theme-daylight .topic-section,
body.theme-daylight .auth-card,
body.theme-daylight .ob-card,
body.theme-daylight .cal-event,
body.theme-daylight .journal-entry,
body.theme-daylight .billing-card,
body.theme-daylight .billing-stat,
body.theme-daylight .price-card,
body.theme-daylight .pack-card,
body.theme-daylight .profile-form,
body.theme-daylight .settings-card,
body.theme-daylight .tester-card,
body.theme-daylight .tester-banner,
body.theme-daylight .community-rooms,
body.theme-daylight .community-chat,
body.theme-daylight .community-messages,
body.theme-daylight .community-input-bar,
body.theme-daylight .admin-stat,
body.theme-daylight .admin-table-wrap,
body.theme-daylight .credit-pack,
body.theme-daylight .next-milestone,
body.theme-daylight .badge-grid > * {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  color: #1a1a1a !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Strong / locked badge variant should still look subtly different */
body.theme-daylight .badge-card.locked,
body.theme-daylight .badge-card:not(.unlocked) {
  background: #f7f7f7 !important;
  border-color: #e5e5e5 !important;
  opacity: 0.85;
}
body.theme-daylight .badge-card.unlocked,
body.theme-daylight .badge-card.earned {
  background: #ffffff !important;
  border-color: #5eead4 !important;
}

/* ── Headings & titles ── */
body.theme-daylight .feature-title,
body.theme-daylight .dash-card-title,
body.theme-daylight .dash-greeting,
body.theme-daylight .dash-hello,
body.theme-daylight .dash-stat-num,
body.theme-daylight .badge-title,
body.theme-daylight .reward-title,
body.theme-daylight .topic-title,
body.theme-daylight .auth-title,
body.theme-daylight .ob-title,
body.theme-daylight .community-title,
body.theme-daylight .billing-title,
body.theme-daylight .price-title,
body.theme-daylight .pack-title,
body.theme-daylight .admin-stat-num,
body.theme-daylight .next-milestone h3,
body.theme-daylight .topic-section h2,
body.theme-daylight .topic-section h3 {
  color: #0F172A !important;
}

/* ── Body text & descriptions ── */
body.theme-daylight .feature-text,
body.theme-daylight .dash-card-text,
body.theme-daylight .dash-tagline,
body.theme-daylight .dash-stat-label,
body.theme-daylight .badge-desc,
body.theme-daylight .reward-desc,
body.theme-daylight .topic-text,
body.theme-daylight .topic-section p,
body.theme-daylight .topic-section li,
body.theme-daylight .auth-subtitle,
body.theme-daylight .ob-subtitle,
body.theme-daylight .community-subtitle,
body.theme-daylight .community-mod-note,
body.theme-daylight .billing-text,
body.theme-daylight .price-text,
body.theme-daylight .pack-text,
body.theme-daylight .admin-stat-label,
body.theme-daylight label,
body.theme-daylight .field-label,
body.theme-daylight .form-label {
  color: #475569 !important;
}

/* ── Form inputs (text / email / date / time / textarea / select) ── */
body.theme-daylight input[type="text"],
body.theme-daylight input[type="email"],
body.theme-daylight input[type="password"],
body.theme-daylight input[type="date"],
body.theme-daylight input[type="time"],
body.theme-daylight input[type="search"],
body.theme-daylight input[type="number"],
body.theme-daylight input[type="tel"],
body.theme-daylight input[type="url"],
body.theme-daylight textarea,
body.theme-daylight select {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0F172A !important;
}
body.theme-daylight input::placeholder,
body.theme-daylight textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 1;
}
body.theme-daylight input:focus,
body.theme-daylight textarea:focus,
body.theme-daylight select:focus {
  border-color: var(--mag-red) !important;
  outline: none !important;
}

/* ── Channel/tab pills (community Általános / Gyakorlás …) ── */
body.theme-daylight .community-rooms button,
body.theme-daylight .community-room,
body.theme-daylight .community-room-tab {
  background: transparent !important;
  color: #475569 !important;
  border: 1px solid transparent !important;
}
body.theme-daylight .community-rooms button.active,
body.theme-daylight .community-room.active,
body.theme-daylight .community-room-tab.active {
  background: #ffffff !important;
  color: #0F172A !important;
  border-color: var(--mag-red) !important;
  font-weight: 700;
}

/* ── Community message bubbles ── */
body.theme-daylight .community-msg-bubble,
body.theme-daylight .msg-bubble {
  background: #f1f5f9 !important;
  color: #0F172A !important;
  border: 1px solid #e2e8f0 !important;
}
body.theme-daylight .community-msg-name,
body.theme-daylight .msg-name {
  color: #0F172A !important;
}
body.theme-daylight .community-msg-time,
body.theme-daylight .community-date-sep,
body.theme-daylight .msg-time {
  color: #64748b !important;
}

/* ── Buttons: keep the brand gradient on primary, repaint secondary ── */
body.theme-daylight .btn-secondary,
body.theme-daylight .dash-signout {
  background: #ffffff !important;
  color: #0F172A !important;
  border: 1px solid #cbd5e1 !important;
}
body.theme-daylight .btn-secondary:hover,
body.theme-daylight .dash-signout:hover {
  border-color: var(--mag-red) !important;
  color: var(--mag-red) !important;
}

/* ── Misc text on the dashboard area ── */
body.theme-daylight .dash-credit-chip,
body.theme-daylight .dash-back-link,
body.theme-daylight .feature-cta,
body.theme-daylight .dash-card-cta {
  color: #0F766E !important;   /* dark teal — readable on white */
}
body.theme-daylight .dash-credit-chip:hover,
body.theme-daylight .dash-back-link:hover,
body.theme-daylight .feature-cta:hover,
body.theme-daylight .dash-card-cta:hover {
  color: var(--mag-red) !important;
}

/* ── Table rows ── */
body.theme-daylight .admin-table th,
body.theme-daylight .admin-table td {
  color: #0F172A !important;
  border-color: #e5e5e5 !important;
}
body.theme-daylight .admin-table th {
  background: #f7f7f7 !important;
}

/* ──────────────────────────────────────────────────────────────
   AGGRESSIVE catch-all for legacy components on daylight theme.
   Many components (rewards, community, profile, calendar form…)
   use rgba(255,255,255,0.04) or rgba(0,0,0,0.25) which renders
   as DARK GREY on a light background. The selector lists here
   cover every -card / -stat / -section / -form / -bar / -btn /
   -tab class shipped in dashboard.css, rewards.css, community.css,
   inner.css, profile/settings/billing — plus broad wildcards.
   ────────────────────────────────────────────────────────────── */

/* — Rewards page — */
body.theme-daylight .rewards-stat-card,
body.theme-daylight .badge-card,
body.theme-daylight .prize-card,
body.theme-daylight .prize-gold,
body.theme-daylight .prize-silver,
body.theme-daylight .prize-bronze,
body.theme-daylight .earn-card,
body.theme-daylight .earn-card-passive,
body.theme-daylight .share-btn,
body.theme-daylight .share-section,
body.theme-daylight .prizes-info,
body.theme-daylight .milestone-section,
body.theme-daylight .milestone-reward,
body.theme-daylight .all-milestones,
body.theme-daylight .tester-cta-section,
body.theme-daylight .tester-cta-inner,
body.theme-daylight .tiktok-url-input,
body.theme-daylight .share-modal-card {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  color: #0F172A !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
body.theme-daylight .rewards-stat-num,
body.theme-daylight .badges-count,
body.theme-daylight .prize-place,
body.theme-daylight .milestone-current,
body.theme-daylight .milestone-next,
body.theme-daylight .badge-name,
body.theme-daylight .earn-card strong,
body.theme-daylight .share-btn strong {
  color: #0F172A !important;
}
body.theme-daylight .rewards-stat-label,
body.theme-daylight .rewards-subtitle,
body.theme-daylight .badge-desc,
body.theme-daylight .prize-text,
body.theme-daylight .earn-card span,
body.theme-daylight .share-info,
body.theme-daylight .milestone-info,
body.theme-daylight .milestone-reward-text {
  color: #475569 !important;
}
body.theme-daylight .badge-card.locked,
body.theme-daylight .earn-card.locked {
  background: #f8fafc !important;
  border-color: #e5e5e5 !important;
}
body.theme-daylight .badge-card.earned,
body.theme-daylight .badge-card.unlocked,
body.theme-daylight .share-btn.done {
  background: #ffffff !important;
  border-color: #5eead4 !important;
}
body.theme-daylight .prize-gold {
  background: linear-gradient(135deg, #fffbeb, #fef3c7) !important;
  border-color: #fcd34d !important;
}
body.theme-daylight .prize-silver {
  background: linear-gradient(135deg, #f8fafc, #e2e8f0) !important;
  border-color: #cbd5e1 !important;
}
body.theme-daylight .prize-bronze {
  background: linear-gradient(135deg, #fef3e9, #fed7aa) !important;
  border-color: #fdba74 !important;
}
body.theme-daylight .milestone-bar {
  background: #e2e8f0 !important;
}

/* — Community page — */
body.theme-daylight .community-rooms,
body.theme-daylight .community-chat,
body.theme-daylight .community-messages,
body.theme-daylight .community-input-bar,
body.theme-daylight .community-input-wrap,
body.theme-daylight .community-empty,
body.theme-daylight .community-toast,
body.theme-daylight .community-header {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  color: #0F172A !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
body.theme-daylight .community-input,
body.theme-daylight .community-input-wrap input,
body.theme-daylight .community-input-wrap textarea {
  background: #ffffff !important;
  color: #0F172A !important;
  border: none !important;
}
body.theme-daylight .room-tab {
  background: transparent !important;
  color: #475569 !important;
  border: 1px solid transparent !important;
}
body.theme-daylight .room-tab.active {
  background: #ffffff !important;
  color: var(--mag-red) !important;
  border-color: var(--mag-red) !important;
}
body.theme-daylight .community-msg-bubble {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #0F172A !important;
}

/* — Calendar / Journal / Profile / Billing form inputs — */
body.theme-daylight .cal-form input,
body.theme-daylight .cal-form textarea,
body.theme-daylight .cal-form select,
body.theme-daylight .profile-form input,
body.theme-daylight .profile-form textarea,
body.theme-daylight .profile-form select,
body.theme-daylight .journal-editor input,
body.theme-daylight .journal-editor textarea,
body.theme-daylight .journal-editor-row input,
body.theme-daylight .journal-search,
body.theme-daylight .admin-search,
body.theme-daylight .tiktok-url-input {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0F172A !important;
}
body.theme-daylight .cal-form input:focus,
body.theme-daylight .cal-form textarea:focus,
body.theme-daylight .profile-form input:focus,
body.theme-daylight .journal-editor textarea:focus,
body.theme-daylight .journal-editor-row input:focus {
  border-color: var(--mag-red) !important;
}

/* Calendar event cards */
body.theme-daylight .cal-event {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  color: #0F172A !important;
}
body.theme-daylight .cal-event-date,
body.theme-daylight .cal-event-note {
  color: #475569 !important;
}
body.theme-daylight .cal-event-title {
  color: #0F172A !important;
}

/* Journal entries */
body.theme-daylight .journal-entry {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
}
body.theme-daylight .journal-entry-text {
  color: #0F172A !important;
}
body.theme-daylight .journal-entry-date {
  color: #475569 !important;
}

/* Tester signup page */
body.theme-daylight .tester-banner,
body.theme-daylight .tester-card,
body.theme-daylight .tester-cta-section,
body.theme-daylight .tester-info,
body.theme-daylight .tester-perks li,
body.theme-daylight .perks-card,
body.theme-daylight .signup-form-card,
body.theme-daylight .signup-info-card,
body.theme-daylight .signup-hero,
body.theme-daylight .signup-success,
body.theme-daylight .signup-error,
body.theme-daylight .mini-prize,
body.theme-daylight .prizes-mini,
body.theme-daylight .benefit {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e5e5e5 !important;
  color: #0F172A !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
body.theme-daylight .signup-hero {
  border: none !important;
  background: transparent !important;
}
body.theme-daylight .benefit { border: none !important; padding-bottom: 8px; }
body.theme-daylight .benefit-content strong,
body.theme-daylight .signup-title,
body.theme-daylight .form-title,
body.theme-daylight .info-title,
body.theme-daylight .prizes-mini-title,
body.theme-daylight .success-title,
body.theme-daylight .error-title {
  color: #0F172A !important;
}
body.theme-daylight .signup-subtitle,
body.theme-daylight .benefit-content span,
body.theme-daylight .benefit-content,
body.theme-daylight .signup-privacy,
body.theme-daylight .form-checkbox,
body.theme-daylight .success-text,
body.theme-daylight .error-text {
  color: #475569 !important;
}
/* Form inputs on the signup page */
body.theme-daylight .form-group input,
body.theme-daylight .form-group textarea,
body.theme-daylight .form-group select {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #cbd5e1 !important;
  color: #0F172A !important;
}
body.theme-daylight .form-group input:focus,
body.theme-daylight .form-group textarea:focus {
  border-color: var(--mag-red) !important;
  background: #ffffff !important;
}
body.theme-daylight .form-group input::placeholder,
body.theme-daylight .form-group textarea::placeholder {
  color: #94a3b8 !important;
}
body.theme-daylight .form-group label {
  color: #0F172A !important;
}
body.theme-daylight .prizes-mini { border-top: 1px solid #e5e5e5 !important; }

/* ──────────────────────────────────────────────
   TESTER SIGNUP — Rules / "Mit kell tenned" list
   Visible across all themes; daylight gets dark text, dark themes
   inherit existing colours from signup.css.
   ────────────────────────────────────────────── */
.rules-mini {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(184, 164, 216, 0.18);
}
.rules-mini-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 0 0 14px;
  color: var(--soft-white, #f5f7fa);
}
.rules-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-reset: rule;
}
.rules-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--subtle-gray, #b7becc);
  padding: 10px 12px;
  background: rgba(94, 234, 212, 0.06);
  border: 1px solid rgba(94, 234, 212, 0.18);
  border-radius: 12px;
}
.rule-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #0d9488);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Daylight overrides for the rules list */
body.theme-daylight .rules-mini {
  border-top: 1px solid #e5e5e5 !important;
}
body.theme-daylight .rules-mini-title {
  color: #0F172A !important;
}
body.theme-daylight .rules-list li {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #0F172A !important;
}

/* ── Full-width rules section at the bottom of /tester-signup.html ── */
.rules-section {
  margin-top: 48px;
  padding: 32px 24px;
}
.rules-section-inner {
  max-width: 980px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(184, 164, 216, 0.18);
  border-radius: 24px;
  padding: 32px 36px;
  backdrop-filter: blur(20px);
}
.rules-section-title {
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 24px;
  color: var(--soft-white, #f5f7fa);
  letter-spacing: 0.3px;
}
/* Two-column grid on wide screens, single column on mobile */
.rules-list--wide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.rules-list--wide li {
  font-size: 14px;
  line-height: 1.6;
  padding: 16px 18px;
}
@media (max-width: 720px) {
  .rules-list--wide { grid-template-columns: 1fr; }
  .rules-section { padding: 24px 16px; }
  .rules-section-inner { padding: 24px 20px; }
}

/* Daylight overrides for the full-width section */
body.theme-daylight .rules-section-inner {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
body.theme-daylight .rules-section-title {
  color: #0F172A !important;
}
body.theme-daylight .rules-list--wide li {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #0F172A !important;
}

/* App-info / Pricing pages */
body.theme-daylight .pack-card,
body.theme-daylight .price-card,
body.theme-daylight .credit-pack,
body.theme-daylight .billing-card,
body.theme-daylight .billing-stat,
body.theme-daylight .app-feature,
body.theme-daylight .app-section {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  color: #0F172A !important;
}

/* ── Wildcard catch-all for any -card / -stat / -section / -info I missed ──
   Uses `background:` (shorthand) so it kills any linear-gradient set
   by the original CSS — `background-color` alone leaves the gradient
   image visible on top.
   EXCLUSIONS: any class ending in -cta / -btn / -submit / -action /
   -link / -icon / -num / -label is a button / icon / text element
   that needs its own gradient and MUST NOT be whitened. */
body.theme-daylight [class*="-card"]:not(.mag-banner-cta):not(.mz-cc-card):not(.legal-btn):not([class*="-cta"]):not([class*="-btn"]):not([class*="-submit"]):not([class*="-action"]):not([class*="-link"]):not([class*="-icon"]):not([class*="-num"]):not([class*="-label"]),
body.theme-daylight [class*="-stat"]:not(.mz-cc-card):not([class*="-icon"]):not([class*="-num"]):not([class*="-label"]):not([class*="-cta"]):not([class*="-btn"]),
body.theme-daylight [class*="-info"]:not([class*="-cta"]):not([class*="-btn"]):not([class*="-icon"]):not([class*="-num"]):not([class*="-label"]),
body.theme-daylight [class*="-section"]:not(.mag-section-title-bar):not(.mag-cattabs-section):not(.mag-worldsection):not([class*="-cta"]):not([class*="-btn"]):not([class*="-icon"]):not([class*="-num"]):not([class*="-label"]) {
  background: #ffffff !important;
  background-image: none !important;
  border-color: #e5e5e5;
}

/* ── Gradient-text fix: many headings/numbers in the legacy CSS use the
   `background: linear-gradient(...) ; -webkit-text-fill-color: transparent`
   trick to colour the text with a gradient. When the wildcard whitens the
   background that trick produces invisible text. Restore the fill-color
   to currentColor and force a readable dark colour. */
body.theme-daylight .rewards-stat-num,
body.theme-daylight .rewards-title,
body.theme-daylight .plan-card-price.gradient,
body.theme-daylight .billing-stat-value,
body.theme-daylight .gradient-text,
body.theme-daylight [class*="gradient"]:not([class*="bg-"]):not([class*="-bg"]) {
  -webkit-text-fill-color: currentColor !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  background: transparent !important;
  background-image: none !important;
  color: #0F172A !important;
}

/* ── Plan / pack / pricing CTA buttons (white-on-white before this fix) ── */
body.theme-daylight .plan-card-cta,
body.theme-daylight .pack-card-cta,
body.theme-daylight .billing-cta,
body.theme-daylight .signup-submit,
body.theme-daylight .btn-primary,
body.theme-daylight .nav-cta,
body.theme-daylight .mz-mobile-beta-cta {
  background: linear-gradient(135deg, #7c3aed, #0d9488) !important;
  background-image: linear-gradient(135deg, #7c3aed, #0d9488) !important;
  color: #ffffff !important;
  border: none !important;
  -webkit-text-fill-color: #ffffff !important;
}
body.theme-daylight .plan-card-cta:hover,
body.theme-daylight .pack-card-cta:hover,
body.theme-daylight .signup-submit:hover,
body.theme-daylight .btn-primary:hover {
  filter: brightness(1.05);
}
body.theme-daylight .plan-card-cta.secondary,
body.theme-daylight .plan-card-cta:disabled {
  background: #f1f5f9 !important;
  background-image: none !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
  -webkit-text-fill-color: #475569 !important;
}

/* Plan card text colours */
body.theme-daylight .plan-card,
body.theme-daylight .pack-card,
body.theme-daylight .credit-pack {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e5e5e5 !important;
}
body.theme-daylight .plan-card-name,
body.theme-daylight .plan-card-price,
body.theme-daylight .pack-card-name {
  color: #0F172A !important;
}
body.theme-daylight .plan-card-text,
body.theme-daylight .plan-card-per,
body.theme-daylight .pack-card-text {
  color: #475569 !important;
}
body.theme-daylight .plan-card-active {
  background: #d1fae5 !important;
  color: #065f46 !important;
  border: 1px solid #5eead4 !important;
}

/* Generic text colours inside any of those containers */
body.theme-daylight [class*="-card"] h1,
body.theme-daylight [class*="-card"] h2,
body.theme-daylight [class*="-card"] h3,
body.theme-daylight [class*="-card"] h4,
body.theme-daylight [class*="-card"] strong,
body.theme-daylight [class*="-section"] h1,
body.theme-daylight [class*="-section"] h2,
body.theme-daylight [class*="-section"] h3 {
  color: #0F172A !important;
}
body.theme-daylight [class*="-card"] p,
body.theme-daylight [class*="-card"] span:not(.share-pts):not(.share-pts-big),
body.theme-daylight [class*="-card"] li,
body.theme-daylight [class*="-section"] p,
body.theme-daylight [class*="-section"] li {
  color: #475569 !important;
}

/* Big stat numbers should stay dark+bold even inside .stat cards */
body.theme-daylight .rewards-stat-num,
body.theme-daylight .dash-stat-num,
body.theme-daylight .billing-stat strong,
body.theme-daylight .admin-stat-num {
  color: #0F172A !important;
  font-weight: 800 !important;
}

/* Fix any progress bar background */
body.theme-daylight .milestone-bar,
body.theme-daylight .progress-bar,
body.theme-daylight [class*="progress"] {
  background-color: #e2e8f0 !important;
}

/* ── App-info / inner.css page-specific containers ── */
body.theme-daylight .inner-section,
body.theme-daylight .inner-section-text,
body.theme-daylight .app-info-hero,
body.theme-daylight .app-vs-web,
body.theme-daylight .app-feature,
body.theme-daylight .app-features,
body.theme-daylight .app-info-pending,
body.theme-daylight .vs-grid,
body.theme-daylight .vs-col,
body.theme-daylight .danger-zone,
body.theme-daylight .inner-warn,
body.theme-daylight .inner-current-value {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e5e5e5 !important;
  color: #0F172A !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
body.theme-daylight .inner-section-title,
body.theme-daylight .inner-title,
body.theme-daylight .app-info-name {
  color: #0F172A !important;
}
body.theme-daylight .inner-subtitle,
body.theme-daylight .inner-section-text,
body.theme-daylight .app-info-tagline,
body.theme-daylight .app-info-pending,
body.theme-daylight .app-feature {
  color: #475569 !important;
}
/* Override for the .app-feature pills — keep readable text inside */
body.theme-daylight .app-feature {
  color: #0F172A !important;
}

/* ── Reinforce .rewards-stat-card (was still grey) — bump specificity ── */
body.theme-daylight .rewards-stats .rewards-stat-card,
body.theme-daylight .rewards-main .rewards-stat-card,
body.theme-daylight body .rewards-stat-card {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e5e5e5 !important;
  color: #0F172A !important;
}
body.theme-daylight .rewards-hero {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e5e5e5 !important;
}
body.theme-daylight .rewards-title { color: #6b46c1 !important; }   /* keep purple accent */

/* ── Universal failsafe: any element with rgba dark backgrounds in
   inline style under daylight → handled by author CSS via !important
   already; but for extra safety force generic backgrounds white on
   page-content children of .inner-main / .dash-main / .topics-main / .billing-main */
body.theme-daylight .inner-main > section,
body.theme-daylight .inner-main > div,
body.theme-daylight .dash-main > section,
body.theme-daylight .billing-main > section {
  background-image: none !important;
}

/* ── Profile danger zone signout button on light theme ── */
body.theme-daylight .danger-zone .dash-signout,
body.theme-daylight .danger-zone .btn-secondary {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0F172A !important;
}

/* ─────────── AI MENTOR DEMO WIDGET ─────────── */
.mag-demo {
  position: relative;
}
.mag-demo-pill {
  display: inline-flex;
  align-items: center;
  background: var(--mag-red);
  color: #fff;
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  margin-left: 12px;
  margin-bottom: 18px;
  align-self: center;
}
.mag-demo-card {
  background: var(--mag-card);
  border: 1px solid var(--mag-border);
  display: flex;
  flex-direction: column;
}
.mag-demo-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--mag-border);
}
.mag-demo-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #5eead4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.mag-demo-meta {
  flex: 1;
  min-width: 0;
}
.mag-demo-name {
  font-weight: 800;
  font-size: 15px;
  color: var(--mag-ink);
  letter-spacing: 0.3px;
}
.mag-demo-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--mag-ink-soft);
  margin-top: 4px;
}
.mag-demo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

.mag-demo-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 140px;
  max-height: 280px;
  overflow-y: auto;
}

.mag-demo-msg {
  display: flex;
  flex-direction: column;
  max-width: 85%;
  animation: magDemoFade 0.3s ease;
}
@keyframes magDemoFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mag-demo-msg--bot { align-self: flex-start; }
.mag-demo-msg--user { align-self: flex-end; }

.mag-demo-bubble {
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.55;
  word-wrap: break-word;
}
.mag-demo-msg--bot .mag-demo-bubble {
  background: rgba(124, 58, 237, 0.10);
  border-left: 3px solid var(--mag-red);
  color: var(--mag-ink);
}
.mag-demo-msg--user .mag-demo-bubble {
  background: var(--mag-red);
  color: #fff;
}

.mag-demo-typing {
  display: inline-flex;
  gap: 4px;
  padding: 14px 16px;
  background: rgba(124, 58, 237, 0.10);
  border-left: 3px solid var(--mag-red);
}
.mag-demo-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mag-red);
  animation: magDemoBlink 1.2s infinite ease-in-out;
}
.mag-demo-typing span:nth-child(2) { animation-delay: 0.2s; }
.mag-demo-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes magDemoBlink {
  0%, 80%, 100% { opacity: 0.3; }
  40% { opacity: 1; }
}

.mag-demo-form {
  display: flex;
  border-top: 1px solid var(--mag-border);
}
.mag-demo-form input {
  flex: 1;
  padding: 14px 18px;
  background: transparent;
  border: none;
  color: var(--mag-ink);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}
.mag-demo-form input::placeholder { color: var(--mag-ink-soft); }
.mag-demo-form button {
  background: var(--mag-red);
  color: #fff;
  border: none;
  padding: 0 22px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
}
.mag-demo-form button:hover:not(:disabled) { background: var(--mag-red-dark); }
.mag-demo-form button:disabled { opacity: 0.5; cursor: not-allowed; }

.mag-demo-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  font-size: 12px;
  color: var(--mag-ink-soft);
  background: var(--mag-bg);
  border-top: 1px solid var(--mag-border);
}
.mag-demo-foot a {
  color: var(--mag-red);
  text-decoration: none;
  font-weight: 700;
}
.mag-demo-foot a:hover { text-decoration: underline; }

/* Limit-reached state */
.mag-demo-locked .mag-demo-form input,
.mag-demo-locked .mag-demo-form button { opacity: 0.5; pointer-events: none; }

/* ─────────── NEWSLETTER CARD (under the demo) ─────────── */
.mag-news-card {
  background: var(--mag-card);
  border: 1px solid var(--mag-border);
  border-top: 4px solid var(--mag-red);
  padding: 22px 22px 18px;
  text-align: center;
}
.mag-news-icon {
  font-size: 30px;
  margin-bottom: 6px;
  line-height: 1;
}
.mag-news-headline {
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--mag-ink);
  margin: 0 0 8px;
}
.mag-news-text {
  font-size: 12.5px;
  color: var(--mag-ink-soft);
  line-height: 1.55;
  margin: 0 auto 14px;
  max-width: 380px;
}
.mag-news-form {
  display: flex;
  max-width: 460px;
  margin: 0 auto;
}
.mag-news-form input {
  flex: 1;
  padding: 12px 16px;
  background: var(--mag-bg);
  border: 1px solid var(--mag-border);
  border-right: none;
  color: var(--mag-ink);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}
.mag-news-form input::placeholder { color: var(--mag-ink-soft); }
.mag-news-form input:focus { border-color: var(--mag-red); }
.mag-news-form button {
  background: var(--mag-red);
  color: #fff;
  border: none;
  padding: 0 22px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.2s;
}
/* Play-icon variant — square, just the ▶ glyph */
.mag-news-form button.mag-news-play {
  width: 56px;
  flex-shrink: 0;
  padding: 0;
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mag-news-form button:hover:not(:disabled) { background: var(--mag-red-dark); }
.mag-news-form button:disabled { opacity: 0.5; cursor: not-allowed; }
.mag-news-msg {
  margin: 14px 0 0;
  font-size: 13px;
  min-height: 18px;
  font-weight: 600;
}
.mag-news-msg.success { color: #22c55e; }
.mag-news-msg.error { color: #ef4444; }
.mag-news-fineprint {
  margin: 14px 0 0;
  font-size: 11px;
  color: var(--mag-ink-soft);
  font-style: italic;
}

/* ─────────── RESPONSIVE ─────────── */
@media (max-width: 1024px) {
  .mag-main { grid-template-columns: 1fr; }
  .mag-spotlight--row { grid-template-columns: 1fr 1fr 1fr; }
  .mag-newslist--grid { grid-template-columns: 1fr 1fr; }
  .mag-world-grid { grid-template-columns: 1fr 1fr; }
  .mag-logo-inner { grid-template-columns: 1fr; gap: 18px; }
  .mag-footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .mag-main, .mag-world-grid { grid-template-columns: 1fr; gap: 24px; }
  .mag-spotlight--row { grid-template-columns: 1fr; }
  .mag-newslist--grid { grid-template-columns: 1fr; }
  .mag-topbar-inner { flex-direction: column; gap: 12px; padding: 8px 16px; }
  .mag-topbar-links { flex-wrap: wrap; gap: 14px; justify-content: center; }
  .mag-nav-list { display: none; flex-direction: column; }
  .mag-nav-list.open { display: flex; }
  .mag-nav-list > li > a { padding: 14px 18px; }
  .mag-nav-toggle { display: block; margin-left: auto; }
  .mag-breaking-inner { flex-wrap: wrap; }
  .mag-breaking-search { width: 100%; margin-top: 10px; }
  .mag-breaking-search input { flex: 1; width: auto; }
  .mag-brand-name { font-size: 36px; }
  .mag-banner { padding: 18px; min-height: 80px; }
  .mag-banner-title { font-size: 18px; }
  .mag-cattabs { flex-direction: column; }
  .mag-cattab { border-bottom: 1px solid var(--mag-border); border-left: 4px solid transparent; }
  .mag-cattab.active { border-left-color: var(--mag-red); border-bottom-color: var(--mag-border); }
  .mag-footer-inner { grid-template-columns: 1fr; gap: 24px; }
}