/* ── Google Font ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@700&display=swap');

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --bg:          #f7f5f2;
  --surface:     #ffffff;
  --border:      #e5e2dc;
  --accent:      #f97316;
  --accent-dark: #ea580c;
  --text:        #111111;
  --text-muted:  #6b7280;
  --text-light:  #9ca3af;
  --radius:      12px;
  --shadow-sm:   0 1px 4px rgba(0,0,0,.06);
  --shadow-md:   0 4px 20px rgba(0,0,0,.09);
  --shadow-lg:   0 12px 40px rgba(0,0,0,.13);
  --transition:  0.2s ease;

  /* Aliases / surfaces referenced by page-level styles.
     These MUST exist in light mode too, otherwise `var(--card-bg)` etc.
     collapse to transparent (light mode) or leak a hardcoded light
     fallback into dark mode (invisible text). See dark block below. */
  --card-bg:     #ffffff;
  --body-bg:     #f2f0ec;
  --muted:       var(--text-muted);
  --primary:     var(--accent);
  --hover-bg:    rgba(0,0,0,.05);

  /* Tell the browser to paint native form controls (incl. dropdown
     option popups) in light mode. Without this, the OS-rendered
     dropdown list ignores our CSS colors. */
  color-scheme: light;
}

/* ── Reset / base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--bg);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Navbar ────────────────────────────────────────────────── */
.navbar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border);
  padding: 0.85rem 0;
  box-shadow: var(--shadow-sm);
}

.navbar-brand {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: var(--text) !important;
  letter-spacing: -0.5px;
}

.navbar-brand span {
  color: var(--accent);
}

.navbar-brand:hover { opacity: .85; }

.nav-home-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--text-muted) !important;
  font-size: 1.1rem;
  transition: color var(--transition), background var(--transition);
}

.nav-home-btn:hover {
  color: var(--text) !important;
  background: #f3f4f6;
}

.nav-link {
  color: var(--text-muted) !important;
  font-size: .875rem;
  font-weight: 500;
  padding: .4rem .75rem !important;
  border-radius: 6px;
  transition: color var(--transition), background var(--transition);
}

.nav-link:hover,
.nav-link.active {
  color: var(--text) !important;
  background: #f3f4f6;
}

/* Search bar in nav */
.nav-search .form-control {
  background: #f3f4f6;
  border: 1px solid transparent;
  border-radius: 8px 0 0 8px;
  font-size: .875rem;
  min-width: 240px;
  transition: border-color var(--transition), background var(--transition);
}

.nav-search .form-control:focus {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(249,115,22,.12);
}

.nav-search .btn {
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 0 8px 8px 0;
  color: #fff;
  padding: .375rem .9rem;
  transition: background var(--transition);
}

.nav-search .btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

/* ── AI Search navbar button ───────────────────────────────── */
.btn-ai-search {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff !important;
  font-size: .82rem;
  font-weight: 600;
  padding: .38rem 1.1rem;
  border-radius: 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--transition), transform var(--transition);
}
.btn-ai-search:hover {
  opacity: .88;
  transform: translateY(-1px);
  color: #fff !important;
}

/* ── AI Search page ────────────────────────────────────────── */
.ai-search-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-md);
}
.ai-search-label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: .65rem;
}
.ai-search-textarea {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: .9rem 1rem;
  font-size: .95rem;
  font-family: inherit;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  resize: vertical;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.ai-search-textarea:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79,70,229,.12);
  background: var(--surface);
}
.ai-search-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.ai-search-hint {
  /* Full-width so the submit button always drops to its own line below,
     regardless of how long the hint text is — otherwise a short hint keeps
     the button beside it (flush right) while a long one wraps it under. */
  flex: 1 1 100%;
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.btn-ai-submit {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: .6rem 1.5rem;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  white-space: nowrap;
  transition: opacity var(--transition);
}
.btn-ai-submit:hover { opacity: .88; }

/* Out-of-credits state on the generation forms */
.btn-ai-submit--blocked {
  background: var(--border);
  color: var(--text-muted);
  cursor: not-allowed;
}
.btn-ai-submit--blocked:hover { opacity: 1; }

.no-credits-alert {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding: .75rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(220, 38, 38, .35);
  background: rgba(220, 38, 38, .08);
  color: #b91c1c;
  font-size: .85rem;
  font-weight: 500;
}
.no-credits-alert i { flex-shrink: 0; }
.no-credits-cta {
  margin-left: auto;
  padding: .3rem .8rem;
  border-radius: 20px;
  background: #dc2626;
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.no-credits-cta:hover { background: #b91c1c; color: #fff; }
.no-credits-alert--flash { animation: no-credits-flash .6s ease-in-out 2; }
@keyframes no-credits-flash {
  0%, 100% { border-color: rgba(220, 38, 38, .35); }
  50%      { border-color: #dc2626; background: rgba(220, 38, 38, .18); }
}
.ai-examples-title {
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: .5rem;
}
.ai-example-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: .28rem .9rem;
  font-size: .8rem;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.ai-example-chip:hover {
  border-color: #4f46e5;
  color: #4f46e5;
}

/* ── Auth nav elements ─────────────────────────────────────── */
.nav-user {
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: .4rem .5rem;
  background: transparent;
  border: none;
  cursor: pointer;
}

.nav-user::after {
  margin-left: .35em;
}

.user-dropdown {
  min-width: 0;
  padding: .5rem .75rem;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
}

.user-dropdown-email {
  font-size: .8rem;
  color: var(--text-muted);
  white-space: nowrap;
  padding: .1rem 0;
}

.btn-logout {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .875rem;
  font-weight: 500;
  padding: .35rem .85rem;
  border-radius: 6px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.btn-logout:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: #fff7ed;
}

.btn-nav-register {
  background: var(--accent);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  padding: .38rem .9rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background var(--transition);
}

.btn-nav-register:hover {
  background: var(--accent-dark);
  color: #fff;
}

/* ── Auth forms ────────────────────────────────────────────── */
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.5rem;
  box-shadow: var(--shadow-md);
  max-width: 440px;
  width: 100%;
}

.auth-card h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  letter-spacing: -0.3px;
}

.auth-card .form-control {
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .9rem;
  padding: .55rem .85rem;
  background: #fafafa;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.auth-card .form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(249,115,22,.1);
  background: var(--surface);
}

.auth-card label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: .3rem;
}

.btn-auth {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  padding: .6rem 1.5rem;
  border: none;
  border-radius: 8px;
  width: 100%;
  transition: background var(--transition);
  cursor: pointer;
}

.btn-auth:hover:not(:disabled) { background: var(--accent-dark); }

.btn-auth:disabled {
  background: var(--border);
  color: var(--text-muted);
  cursor: not-allowed;
}

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .55rem 1rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.btn-google:hover {
  background: #f9fafb;
  border-color: #c1c7d0;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  color: var(--text);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.1rem 0;
  color: var(--text-light);
  font-size: .8rem;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Hero ──────────────────────────────────────────────────── */
.hero-section {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 2.5rem 0 2rem;
}

.hero-section h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.25rem;
  letter-spacing: -0.5px;
  color: var(--text);
}

.hero-section .lead {
  color: var(--text-muted);
  font-size: .95rem;
}

.hero-divider {
  width: 48px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  margin: .75rem 0 .5rem;
}

/* ── Hero heading row + credits pill ───────────────────────── */
.hero-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-head-row h1 { margin-bottom: 0 !important; }

.hero-credits-pill {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  padding: .5rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(249, 115, 22, .28);
  background: linear-gradient(135deg, rgba(249,115,22,.12), rgba(249,115,22,.04));
  box-shadow: var(--shadow-sm);
  color: var(--text);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}

.hero-credits-pill i {
  align-self: center;
  font-size: .95rem;
  color: var(--accent);
}

.hero-credits-value {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.3px;
  font-variant-numeric: tabular-nums;
}

.hero-credits-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.hero-credits-pill:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(249, 115, 22, .18);
  transform: translateY(-1px);
}

/* Nothing left to spend — the pill reads as a warning, not a stat */
.hero-credits-pill--empty {
  border-color: rgba(220, 38, 38, .4);
  background: linear-gradient(135deg, rgba(220,38,38,.12), rgba(220,38,38,.04));
}
.hero-credits-pill--empty i,
.hero-credits-pill--empty .hero-credits-value { color: #dc2626; }
.hero-credits-pill--empty:hover {
  border-color: #dc2626;
  box-shadow: 0 4px 14px rgba(220, 38, 38, .18);
}

/* ── Section label ─────────────────────────────────────────── */
.section-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
}

.section-title {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: .6rem;
  margin-bottom: 1.5rem;
}

/* ── Featured article ──────────────────────────────────────── */
.featured-card {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  transition: box-shadow var(--transition);
}

.featured-card:hover { box-shadow: var(--shadow-lg); }

.featured-img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
}

.featured-placeholder {
  height: 380px;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  font-size: 3.5rem;
}

.featured-body {
  padding: 2rem 2rem 1.75rem;
}

.featured-body h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.65rem;
  line-height: 1.35;
  letter-spacing: -0.3px;
}

.featured-body h2 a {
  color: var(--text);
  text-decoration: none;
  transition: color var(--transition);
}

.featured-body h2 a:hover { color: var(--accent); }

/* ── News cards ────────────────────────────────────────────── */
.news-card {
  background: var(--surface);
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  height: 100%;
}

.news-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md) !important;
}

.news-card-img {
  height: 185px;
  object-fit: cover;
  width: 100%;
  display: block;
}

.card-placeholder {
  height: 185px;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  font-size: 2.25rem;
}

.card-body { padding: 1.15rem 1.25rem 1.1rem; }

.card-title {
  font-size: .93rem;
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: .5rem;
}

.card-title a {
  color: var(--text);
  text-decoration: none;
  transition: color var(--transition);
}

.card-title a:hover { color: var(--accent); }

.card-text {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ── Badges ────────────────────────────────────────────────── */
.badge-channel {
  background: #fff7ed;
  color: var(--accent);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .4px;
  padding: .25em .6em;
  border-radius: 4px;
  text-transform: uppercase;
}

/* The website used to be its own field on the card. It is now a tooltip on the
   channel badge, so hint that the badge is worth hovering — only when one is
   actually attached, since not every article has a website. */
.badge-channel[title],
.feed-card-channel[title] {
  cursor: help;
  text-decoration: underline dotted currentColor;
  text-underline-offset: 2px;
}

.badge-lang {
  background: #f3f4f6;
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 500;
  padding: .25em .6em;
  border-radius: 4px;
}

.badge-topic {
  display: inline-flex;
  align-items: center;
  background: #f0fdf4;
  color: #16a34a;
  font-size: .65rem;
  font-weight: 600;
  padding: .2em .65em;
  border-radius: 99px;
  letter-spacing: .3px;
  text-decoration: none;
  border: 1px solid #bbf7d0;
  transition: background .12s, color .12s;
  line-height: 1.6;
}
a.badge-topic:hover {
  background: #dcfce7;
  color: #15803d;
  text-decoration: none;
}
[data-theme="dark"] .badge-topic { background: #052e16; border-color: #166534; color: #4ade80; }

/* ── Meta row ──────────────────────────────────────────────── */
.meta-row {
  font-size: .77rem;
  color: var(--text-light);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
}

.meta-row i { font-size: .8rem; }

/* ── Read button ───────────────────────────────────────────── */
.btn-read {
  background: var(--accent);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  padding: .45rem 1.1rem;
  border-radius: 7px;
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: background var(--transition), transform var(--transition);
}

.btn-read:hover {
  background: var(--accent-dark);
  color: #fff;
  transform: translateX(2px);
}

/* ── Search page ───────────────────────────────────────────── */
.filter-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}

.filter-card .form-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: .3rem;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.filter-card .form-control,
.filter-card .form-select {
  font-size: .875rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fafafa;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.filter-card .form-control:focus,
.filter-card .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(249,115,22,.1);
  background: var(--surface);
}

.btn-search {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: .875rem;
  padding: .55rem 1.4rem;
  border-radius: 8px;
  border: none;
  transition: background var(--transition);
}

.btn-search:hover { background: var(--accent-dark); color: #fff; }

.btn-clear {
  background: transparent;
  color: var(--text-muted);
  font-size: .875rem;
  font-weight: 500;
  padding: .55rem 1.2rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}

.btn-clear:hover { background: #f3f4f6; color: var(--text); }

/* Active filter chips */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  font-weight: 500;
  padding: .3em .75em;
  border-radius: 99px;
  background: #fff7ed;
  color: var(--accent);
  border: 1px solid #fed7aa;
}

/* ── Pagination ────────────────────────────────────────────── */
.pagination {
  gap: 3px;
}

.pagination .page-link {
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 7px !important;
  font-size: .85rem;
  font-weight: 500;
  padding: .4rem .75rem;
  transition: all var(--transition);
}

.pagination .page-link:hover {
  background: #fff7ed;
  color: var(--accent);
  border-color: #fed7aa;
}

.pagination .page-item.active .page-link {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── Guest banner ──────────────────────────────────────────── */
.guest-banner {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius);
  padding: .75rem 1.25rem;
  font-size: .875rem;
  color: #92400e;
}

.guest-banner a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.guest-banner a:hover { text-decoration: underline; }

/* ── Empty state ───────────────────────────────────────────── */
.empty-state {
  padding: 5rem 1rem;
  text-align: center;
  color: var(--text-muted);
}

.empty-state i { font-size: 4rem; opacity: .35; }

.empty-state h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  margin-top: 1.25rem;
  color: var(--text);
}

/* ── Footer ────────────────────────────────────────────────── */
footer {
  background: var(--surface) !important;
  border-top: 1px solid var(--border);
  padding: 2rem 0;
}

footer p { color: var(--text-muted); font-size: .85rem; }

/* ── Report card (shared; back-office pages reference this class) ──── */
.report-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
[data-theme="dark"] .report-card { background: var(--surface); border-color: var(--border); }

[data-theme="dark"] .hero-credits-pill {
  background: linear-gradient(135deg, rgba(249,115,22,.18), rgba(249,115,22,.05));
  border-color: rgba(249,115,22,.35);
  box-shadow: none;
}

/* ── Dark mode ─────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:         #0a0a0a;
  --surface:    #141414;
  --border:     #2a2a2a;
  --text:       #f0ede8;
  --text-muted: #c4956a;
  --text-light: #9a7855;
  --card-bg:    #1a1f2b;
  --body-bg:    #1a1a1a;
  --hover-bg:   rgba(255,255,255,.06);
  /* Render native dropdown option popups (and other OS-drawn form
     controls) in dark mode so unchosen options aren't white-on-light
     with invisible text. */
  color-scheme: dark;
  /* --muted and --primary are declared in :root as var() aliases and
     resolve against this element's --text-muted/--accent, so they flip
     automatically — no need to redeclare them here. */

  /* Re-point Bootstrap 5.3 theme variables. The app toggles
     [data-theme="dark"] on <html>, but Bootstrap components read their
     own --bs-* vars. Without this, every .table / .alert / .nav-tabs /
     .list-group / subtle-badge keeps its LIGHT default (a white block
     with the theme's light text = invisible). We also mirror
     data-bs-theme="dark" in JS, but pin the palette here so the
     surfaces match the app rather than Bootstrap's stock grey. */
  --bs-body-bg:            #0a0a0a;
  --bs-body-color:         #f0ede8;
  --bs-emphasis-color:     #f5f2ed;
  --bs-emphasis-color-rgb: 245,242,237;
  --bs-secondary-bg:       #1a1a1a;
  --bs-secondary-color:    #c4956a;
  --bs-tertiary-bg:        #1c1c1c;
  --bs-tertiary-color:     #c4956a;
  --bs-border-color:       #2a2a2a;
  --bs-table-bg:           transparent;
  --bs-table-color:        #f0ede8;
  --bs-table-border-color: #2a2a2a;
  --bs-table-striped-bg:   rgba(255,255,255,.035);
  --bs-table-striped-color:#f0ede8;
  --bs-table-hover-bg:     rgba(255,255,255,.06);
  --bs-table-hover-color:  #f0ede8;
}

[data-theme="dark"] body              { background: var(--bg); color: var(--text); }
[data-theme="dark"] .navbar           { background: var(--surface) !important; border-color: var(--border); }
[data-theme="dark"] .news-card        { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .featured-card    { background: var(--surface); }
[data-theme="dark"] .featured-body    { background: var(--surface); }
[data-theme="dark"] .filter-card      { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] footer            { background: var(--surface) !important; border-color: var(--border); }
[data-theme="dark"] .modal-content    { background: var(--surface); color: var(--text); }
[data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--border); }
[data-theme="dark"] .guest-banner     { background: #1a0e00; border-color: #7c3500; color: #fb923c; }
[data-theme="dark"] .nav-search .form-control { background: #111; color: var(--text); border-color: var(--border); }
[data-theme="dark"] .filter-card .form-control,
[data-theme="dark"] .filter-card .form-select { background: #111; color: var(--text); border-color: var(--border); }
[data-theme="dark"] .combo-list       { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .combo-list li    { color: var(--text); }
[data-theme="dark"] .pagination .page-link { background: var(--surface); color: var(--text-muted); border-color: var(--border); }
[data-theme="dark"] .btn-clear        { border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .btn-clear:hover  { background: #111; color: var(--text); }
[data-theme="dark"] .card-body        { background: var(--surface); }

/* ── Dark mode: Bootstrap components not auto-covered by --bs-* vars ──
   .table-light / .table-secondary are FIXED-colour table variants that
   Bootstrap does not darken automatically, and a bare .card / .list-group
   / .input-group-text / active nav-tab must adopt the app palette. */
[data-theme="dark"] .card                       { background: var(--surface); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .table                      { color: var(--text); border-color: var(--border); }
[data-theme="dark"] .table > :not(caption) > * > * { color: var(--text); }
[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light > th,
[data-theme="dark"] .table-light > td,
[data-theme="dark"] .table > thead.table-light th { background: #1f1f1f; color: var(--text); border-color: var(--border); }
[data-theme="dark"] .table-secondary,
[data-theme="dark"] .table-secondary > th,
[data-theme="dark"] .table-secondary > td { background: #202020; color: var(--text); border-color: var(--border); }
[data-theme="dark"] thead th                    { border-color: var(--border); }
[data-theme="dark"] .list-group                 { background: transparent; }
[data-theme="dark"] .list-group-item            { background: var(--surface); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .input-group-text           { background: #1a1a1a; color: var(--text-muted); border-color: var(--border); }
[data-theme="dark"] .nav-tabs                    { border-color: var(--border); }
[data-theme="dark"] .nav-tabs .nav-link          { color: var(--text-muted); }
[data-theme="dark"] .nav-tabs .nav-link:hover    { border-color: var(--border) var(--border) transparent; }
[data-theme="dark"] .nav-tabs .nav-link.active   { background: var(--surface); color: var(--text); border-color: var(--border) var(--border) var(--surface); }
[data-theme="dark"] .btn-close                   { filter: invert(1) grayscale(100%) brightness(1.6); }

/* Dark mode toggle button */
.btn-theme-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: .9rem;
  padding: .35rem .55rem;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.btn-theme-toggle:hover { color: var(--text); border-color: var(--text-muted); }

/* ── Trending bar wrapper ───────────────────────────────────── */
.trending-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem 1rem 1rem;
  box-shadow: var(--shadow-sm);
}

.trending-bar-header {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .6rem;
  display: flex;
  align-items: center;
  gap: .3rem;
}

/* ── Topic filter bar ───────────────────────────────────────── */
.topic-filter-bar {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  padding-bottom: .25rem;
  scrollbar-width: none;
}
.topic-filter-bar::-webkit-scrollbar { display: none; }

.topic-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
  padding: .38em 1em .38em .75em;
  border-radius: 99px;
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: #fafafa;
  color: var(--text-muted);
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.topic-pill i { font-size: .8rem; flex-shrink: 0; }
.topic-pill:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: #fff7ed;
  box-shadow: 0 2px 8px rgba(249,115,22,.12);
  text-decoration: none;
}
.topic-pill.selected {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(249,115,22,.3);
}
.topic-pill.selected:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

.topic-count {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  background: rgba(0,0,0,.08);
  border-radius: 99px;
  padding: .05em .5em;
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.6;
}
.topic-pill.selected .topic-count { background: rgba(255,255,255,.22); }

/* Dark mode overrides for trending bar */
[data-theme="dark"] .trending-bar   { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .topic-pill     { background: #111; border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .topic-pill:hover { background: #1a0e00; }

/* ── Bookmark button ────────────────────────────────────────── */
.btn-bookmark-icon {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: .9rem;
  padding: 2px 5px;
  cursor: pointer;
  transition: color var(--transition);
  line-height: 1;
}
.btn-bookmark-icon:hover,
.btn-bookmark-icon.bookmarked { color: var(--accent); }

.btn-share-icon {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: .9rem;
  padding: 2px 5px;
  cursor: pointer;
  transition: color var(--transition);
  line-height: 1;
}
.btn-share-icon:hover { color: var(--accent); }

/* ── Personalized badge ─────────────────────────────────────── */
.personalized-badge {
  display: inline-flex;
  align-items: center;
  font-size: .72rem;
  font-weight: 600;
  padding: .25em .75em;
  border-radius: 99px;
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
  letter-spacing: .2px;
}


/* ── Article preview trigger cursor ────────────────────────── */
.article-preview-trigger {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.article-preview-trigger:hover { color: var(--accent); }

/* ── Report generation loading overlay ─────────────────────── */
#report-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 15, 35, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.report-loading-box {
  text-align: center;
  max-width: 400px;
  padding: 2.5rem 2rem;
}
.report-loading-spinner {
  display: flex;
  justify-content: center;
}
.report-loading-bar {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,.15);
  border-radius: 99px;
  overflow: hidden;
}
.report-loading-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #4f46e5, #7c3aed);
  border-radius: 99px;
  transition: width .4s ease;
}

/* ── Generate Report button ─────────────────────────────────── */
.btn-generate-report {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff !important;
  border: none;
  border-radius: 6px;
  font-size: .78rem;
  font-weight: 600;
  padding: .3rem .75rem;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  transition: opacity .15s, transform .1s;
  text-decoration: none;
  white-space: nowrap;
}
.btn-generate-report:hover {
  opacity: .9;
  transform: translateY(-1px);
  color: #fff;
}

/* ── Option cards (home + AI Reports hub) ──────────────────── */
.option-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
  max-width: 1400px;
  margin: 3rem auto 0;
  padding: 0 1rem 4rem;
}
.option-card {
  background: var(--card-bg, #fff);
  border: 2px solid var(--border, #e2e8f0);
  border-radius: 18px;
  padding: 2.2rem 1.8rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .85rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.option-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
  text-decoration: none;
  color: inherit;
}
.option-card-icon {
  width: 3.2rem; height: 3.2rem; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; flex-shrink: 0;
}
.option-card-title { font-size: 1.15rem; font-weight: 700; line-height: 1.25; color: var(--text, #1e293b); }
.option-card-desc  { font-size: .875rem; color: var(--text-muted, #64748b); line-height: 1.5; margin: 0; }
.option-card-arrow { margin-top: auto; font-size: .85rem; font-weight: 600; display: flex; align-items: center; gap: .3rem; }

.option-card--daily { border-color: #fcd34d; }
.option-card--daily:hover { border-color: #f59e0b; box-shadow: 0 8px 28px rgba(245,158,11,.18); }
.option-card--daily .option-card-icon  { background: #fef3c7; color: #d97706; }
.option-card--daily .option-card-arrow { color: #d97706; }

.option-card--ai { border-color: #a5b4fc; }
.option-card--ai:hover { border-color: #6366f1; box-shadow: 0 8px 28px rgba(99,102,241,.18); }
.option-card--ai .option-card-icon  { background: #eef2ff; color: #4f46e5; }
.option-card--ai .option-card-arrow { color: #4f46e5; }

.option-card--search { border-color: #5eead4; }
.option-card--search:hover { border-color: #14b8a6; box-shadow: 0 8px 28px rgba(20,184,166,.18); }
.option-card--search .option-card-icon  { background: #f0fdfa; color: #0d9488; }
.option-card--search .option-card-arrow { color: #0d9488; }

.option-card--myreports { border-color: #7dd3fc; }
.option-card--myreports:hover { border-color: #0891b2; box-shadow: 0 8px 28px rgba(8,145,178,.18); }
.option-card--myreports .option-card-icon  { background: rgba(8,145,178,.1); color: #0891b2; }
.option-card--myreports .option-card-arrow { color: #0891b2; }

.option-card--shared { border-color: #6ee7b7; }
.option-card--shared:hover { border-color: #10b981; box-shadow: 0 8px 28px rgba(16,185,129,.18); }
.option-card--shared .option-card-icon  { background: rgba(16,185,129,.1); color: #10b981; }
.option-card--shared .option-card-arrow { color: #10b981; }

.option-card--newsgen { border-color: #f9a8d4; }
.option-card--newsgen:hover { border-color: #db2777; box-shadow: 0 8px 28px rgba(219,39,119,.18); }
.option-card--newsgen .option-card-icon  { background: #fdf2f8; color: #db2777; }
.option-card--newsgen .option-card-arrow { color: #db2777; }

.option-card--youtube { border-color: #fca5a5; }
.option-card--youtube:hover { border-color: #dc2626; box-shadow: 0 8px 28px rgba(220,38,38,.18); }
.option-card--youtube .option-card-icon  { background: #fef2f2; color: #dc2626; }
.option-card--youtube .option-card-arrow { color: #dc2626; }

.option-card--groups { border-color: #c4b5fd; }
.option-card--groups:hover { border-color: #7c3aed; box-shadow: 0 8px 28px rgba(124,58,237,.18); }
.option-card--groups .option-card-icon  { background: #f5f3ff; color: #7c3aed; }
.option-card--groups .option-card-arrow { color: #7c3aed; }

.option-card--public { border-color: #86efac; }
.option-card--public:hover { border-color: #16a34a; box-shadow: 0 8px 28px rgba(22,163,74,.18); }
.option-card--public .option-card-icon  { background: #f0fdf4; color: #16a34a; }
.option-card--public .option-card-arrow { color: #16a34a; }
.option-card--coverage { border-color: #fda4af; }
.option-card--coverage:hover { border-color: #e11d48; box-shadow: 0 8px 28px rgba(225,29,72,.18); }
.option-card--coverage .option-card-icon  { background: #fff1f2; color: #e11d48; }
.option-card--coverage .option-card-arrow { color: #e11d48; }

.option-card--twitter { border-color: #9ca3af; }
.option-card--twitter:hover { border-color: #1f2937; box-shadow: 0 8px 28px rgba(31,41,55,.18); }
.option-card--twitter .option-card-icon  { background: rgba(31,41,55,.1); color: #1f2937; }
.option-card--twitter .option-card-arrow { color: #1f2937; }

[data-theme="dark"] .option-card         { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] .option-card-title   { color: #f1f5f9; }
[data-theme="dark"] .option-card-desc    { color: var(--text-muted); }

/* ── Dark mode extra fixes ──────────────────────────────────── */

/* Nav link hover / active */
[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active { background: rgba(255,255,255,.07); color: var(--text) !important; }
[data-theme="dark"] .nav-home-btn:hover { background: rgba(255,255,255,.07); color: var(--text) !important; }

/* Navbar brand */
[data-theme="dark"] .navbar-brand { color: var(--text) !important; }

/* Bootstrap dropdown menus */
[data-theme="dark"] .dropdown-menu     { background: var(--surface); border-color: var(--border); box-shadow: 0 6px 24px rgba(0,0,0,.5); }
[data-theme="dark"] .dropdown-item     { color: var(--text); }
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus { background: rgba(255,255,255,.07); color: var(--text); }
[data-theme="dark"] .user-dropdown     { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .user-dropdown-email { color: var(--text-muted); }

/* Global form controls */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: #1a1a1a;
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: #1a1a1a;
  color: var(--text);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(249,115,22,.15);
}
[data-theme="dark"] .form-control::placeholder { color: var(--text-muted); }
/* Native dropdown option popups: pin bg + text so unchosen options
   are never white-on-light (invisible) in dark mode. Chrome/Windows can
   paint options white even with color-scheme when the control has a
   custom background, so set them explicitly. */
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-control {
  color-scheme: dark;
}
[data-theme="dark"] .form-select option,
[data-theme="dark"] .form-select optgroup,
[data-theme="dark"] .form-control option {
  background-color: #1a1a1a;
  color: var(--text);
}
[data-theme="dark"] .form-label,
[data-theme="dark"] label { color: var(--text-muted); }

/* Auth card */
[data-theme="dark"] .auth-card             { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .auth-card label       { color: var(--text-muted); }
[data-theme="dark"] .auth-card .form-control { background-color: #1a1a1a; color: var(--text); border-color: var(--border); }
[data-theme="dark"] .auth-card .form-control:focus { background-color: #1a1a1a; border-color: var(--accent); }
[data-theme="dark"] .auth-card a           { color: var(--accent); }

/* Google / social login button */
[data-theme="dark"] .btn-google            { background: #1a1a1a; color: var(--text); border-color: var(--border); }
[data-theme="dark"] .btn-google:hover      { background: #242424; color: var(--text); border-color: var(--text-muted); }

/* Logout hover */
[data-theme="dark"] .btn-logout:hover      { background: #1a0e00; color: var(--accent); border-color: #7c3500; }

/* Badges */
[data-theme="dark"] .badge-channel         { background: #3b1800; color: #fb923c; }
[data-theme="dark"] .badge-lang            { background: #252525; color: var(--text-muted); }

/* Personalized badge */
[data-theme="dark"] .personalized-badge    { background: #052e16; color: #4ade80; border-color: #166534; }

/* Active filter chips */
[data-theme="dark"] .filter-chip           { background: #3b1800; color: #fb923c; border-color: #7c3500; }

/* Card and featured placeholders */
[data-theme="dark"] .card-placeholder,
[data-theme="dark"] .featured-placeholder  { background: linear-gradient(135deg, #1c1c1c 0%, #141414 100%); color: var(--text-muted); }

/* Section title */
[data-theme="dark"] .section-title         { color: var(--text-muted); border-color: var(--border); }

/* Hero section */
[data-theme="dark"] .hero-section          { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .hero-section h1       { color: var(--text); }
[data-theme="dark"] .hero-section .lead    { color: var(--text-muted); }

/* Topic pill hover text */
[data-theme="dark"] .topic-pill:hover      { color: var(--accent); }

/* Pagination hover */
[data-theme="dark"] .pagination .page-link:hover { background: rgba(255,255,255,.07); color: var(--text); border-color: var(--border); }

/* Modal */
[data-theme="dark"] .modal-body            { background: var(--surface); color: var(--text); }

/* Option card icon backgrounds */
[data-theme="dark"] .option-card--daily    .option-card-icon { background: #2a1e03; color: #fbbf24; }
[data-theme="dark"] .option-card--daily    .option-card-arrow { color: #fbbf24; }
[data-theme="dark"] .option-card--ai       .option-card-icon  { background: #1a1845; color: #818cf8; }
[data-theme="dark"] .option-card--ai       .option-card-arrow { color: #818cf8; }
[data-theme="dark"] .option-card--search   .option-card-icon  { background: #042926; color: #2dd4bf; }
[data-theme="dark"] .option-card--search   .option-card-arrow { color: #2dd4bf; }
[data-theme="dark"] .option-card--myreports .option-card-icon { background: #062840; color: #38bdf8; }
[data-theme="dark"] .option-card--myreports .option-card-arrow { color: #38bdf8; }
[data-theme="dark"] .option-card--shared   .option-card-icon  { background: #02261d; color: #34d399; }
[data-theme="dark"] .option-card--shared   .option-card-arrow { color: #34d399; }
[data-theme="dark"] .option-card--youtube  .option-card-icon  { background: #3b0a0a; color: #f87171; }
[data-theme="dark"] .option-card--youtube  .option-card-arrow { color: #f87171; }
[data-theme="dark"] .option-card--groups   .option-card-icon  { background: #200f50; color: #a78bfa; }
[data-theme="dark"] .option-card--groups   .option-card-arrow { color: #a78bfa; }
[data-theme="dark"] .option-card--public   .option-card-icon  { background: #052e16; color: #4ade80; }
[data-theme="dark"] .option-card--public   .option-card-arrow { color: #4ade80; }
[data-theme="dark"] .option-card--coverage .option-card-icon  { background: #4c0519; color: #fb7185; }
[data-theme="dark"] .option-card--coverage .option-card-arrow { color: #fb7185; }
[data-theme="dark"] .option-card--twitter  .option-card-icon  { background: #1f2937; color: #d1d5db; }
[data-theme="dark"] .option-card--twitter  .option-card-arrow { color: #d1d5db; }

/* AI search textarea */
[data-theme="dark"] .ai-search-textarea    { background: #1a1a1a; color: var(--text); border-color: var(--border); }
[data-theme="dark"] .ai-search-textarea:focus { background: #1a1a1a; border-color: #4f46e5; }

/* AI example chips hover */
[data-theme="dark"] .ai-example-chip:hover { border-color: #818cf8; color: #818cf8; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .option-cards { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 991px) {
  .option-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .featured-img,
  .featured-placeholder { height: 220px; }

  .featured-body { padding: 1.25rem; }
  .featured-body h2 { font-size: 1.25rem; }

  .hero-section h1 { font-size: 1.6rem; }

  .nav-search .form-control { min-width: 140px; }

  .option-cards { grid-template-columns: 1fr; }
}