/* === Newsdeck (newsdeck.live) Styles === */

:root {
  /* Light theme — warmed up with soft tints + card elevation so it no longer
     reads as flat white. Cards stay near-white but now lift off a cool-tinted
     page via a subtle shadow, with gentle violet/blue/green accents around. */
  --bg: #eaeef6;                 /* soft cool grey-blue page tint (was near-white) */
  --bg-gradient: linear-gradient(180deg, #eef1f8 0%, #e7ecf5 100%);
  --card-bg: #ffffff;
  --text: #1a1a2e;
  --text-muted: #5b6472;
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --accent-light: #e7eefe;       /* a touch more saturated blue tint */
  --border: #d7dce8;             /* slightly deeper, cooler border so edges read */
  --success: #10b981;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --radius: 12px;
  --nav-bg: #ffffffee;           /* near-white nav, faint translucency over tint */
  --hype-bar-bg: #e6eaf2;
  --like-btn-bg: #fef2f2;
  --like-btn-border: #fecaca;
  --like-btn-color: #dc2626;
  --like-btn-hover-bg: #fee2e2;
  --like-btn-hover-border: #f87171;
  --tag-bg: #eef1f8;
  --tag-color: #4b5563;
  --skill-tag-bg: #f3effe;
  --skill-tag-color: #7c3aed;
  --skill-tag-border: #e6defb;
  --tldr-bg: #ecfdf3;
  --tldr-color: #065f46;
  --sr-bg: #f3f5fa;
  --sr-border: #9ca3af;
  --sr-color: #374151;
  --card-shadow: 0 1px 2px rgba(30,41,59,0.05), 0 4px 14px rgba(30,41,59,0.06);
  --category-bg: #ffffff;
  --trending-section-bg: linear-gradient(180deg, var(--bg), #fff);
  --search-bg: #ffffff;
  --search-border: #d7dce8;
  --search-text: #1a1a2e;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* === Dark Theme — greens, blues, oranges, navys === */
[data-theme="dark"] {
  --bg: #0b1120;
  --bg-gradient: linear-gradient(180deg, #0c1426 0%, #0a0f1d 100%);
  --card-bg: #151d33;
  --text: #e2e8f0;
  --text-muted: #adb9d4;
  --accent: #10b981;
  --accent-hover: #34d399;
  --accent-light: #064e3b;
  --border: #2a3558;
  --success: #34d399;
  --nav-bg: #0f1729;
  --hype-bar-bg: #1e2942;
  --like-btn-bg: #2a1a1a;
  --like-btn-border: #7f1d1d;
  --like-btn-color: #f87171;
  --like-btn-hover-bg: #3a1a1a;
  --like-btn-hover-border: #991b1b;
  --tag-bg: #1e2942;
  --tag-color: #94a3b8;
  --skill-tag-bg: #1a1a3a;
  --skill-tag-color: #a78bfa;
  --skill-tag-border: #2e2e5e;
  --tldr-bg: #0a2e1a;
  --tldr-color: #6ee7b7;
  --sr-bg: #0f1729;
  --sr-border: #2a3558;
  --sr-color: #cbd5e1;
  --card-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  --category-bg: #151d33;
  /* Dark mode trending strip — fades from the brand-green button accent
     (matches .btn-primary background) into the page bg. Uses rgba so the
     top of the strip reads as "TLDR green" without overwhelming the cards. */
  --trending-section-bg: linear-gradient(180deg, rgba(16, 185, 129, 0.45), var(--bg) 75%);
  --search-bg: #151d33;
  --search-border: #2a3558;
  --search-text: #e2e8f0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font);
  background: var(--bg-gradient, var(--bg));
  color: var(--text);
  line-height: 1.6;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

/* Nav links — never underlined */
.nav-links a,
.nav-links a:hover {
  text-decoration: none !important;
}
.nav-user:hover {
  text-decoration: none !important;
}

/* === Categories === */

.navbar {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Newsdeck wordmark
   A blank-card outline glyph (the "deck" motif) sits to the left of the
   "NEWSDECK" wordmark. "DECK" wears the same green→violet gradient as the
   landing-page "stories" word (see .gradient-text). All-caps, bold. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  color: var(--text) !important;
  text-decoration: none !important;
  line-height: 1;
}
/* Outer span reserves a narrow column in document flow so the rotated
   visual doesn't overlap neighbouring nav items. Inner span carries the
   text and the rotation. Sized so the rotated "my" reads roughly the
   same visual weight as the 30px horizontal "TLDR.net" beside it. */
.logo-my {
  display: inline-block;
  position: relative;
  width: 0.95em;            /* ≈ post-rotation visual width */
  height: 1.65em;           /* enough vertical room for "my" */
  font-size: 18px;   /* trimmed from 22px → 18px so the "my" prefix reads
                         as ornamental rather than competing in weight with
                         the main 30px wordmark beside it. */
  line-height: 1;
  vertical-align: middle;
}
.logo-my > span {
  position: absolute;
  top: 50%;
  left: 50%;
  font-weight: 800;
  color: var(--accent);
  text-transform: lowercase;
  letter-spacing: -0.5px;
  white-space: nowrap;
  /* rotate(-90deg) tips the text counter-clockwise so "m" ends up at the
     bottom and "y" at the top — text reads upward from the baseline of
     "TLDR.net" next to it. translate keeps the centre point stable. */
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center;
}
.logo-main {
  font-size: 26px;
  letter-spacing: 0.5px;
  line-height: 1;
  text-transform: uppercase;
}

/* Blank-card outline glyph — the "deck" motif beside the wordmark.
   A clean rounded rectangle (NOT a playing card) with a thin gradient
   strip near the top echoing the brand gradient. */
.logo-card {
  display: inline-block;
  flex-shrink: 0;
  width: 21px;
  height: 27px;
  border: 2px solid var(--accent);
  border-radius: 5px;
  position: relative;
  background: var(--card-bg);
}
.logo-card::before {
  content: "";
  position: absolute;
  left: 3px; right: 3px; top: 3px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
}
.logo-card::after {
  content: "";
  position: absolute;
  left: 3px; right: 7px; top: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.4;
  box-shadow: 0 5px 0 0 var(--accent), 0 10px 0 0 var(--accent);
}

/* "Tracking Deck" nav link — accent text with a leading magnifier (search)
   glyph, revealed by /js/nav-track-deck.js when the tldr_tracks cookie is set.
   The svg uses stroke=currentColor so it matches the link's accent colour. */
.nav-track-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent) !important;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
}
.nav-track-link svg { display: block; flex-shrink: 0; }
.nav-track-link:hover { color: var(--accent-hover) !important; }
.nav-track-link { font-size: 13px; }
/* "Tracking" / "Deck" stack on two tight lines to save horizontal nav width. */
.nav-track-link span { line-height: 1.05; text-align: left; }

/* "Your Newsdeck" nav item — a cartoony 3-column deck-of-cards glyph (echoing
   the logo's rounded card motif) followed by the text, both linking to the
   dashboard. The glyph is accent-coloured (matches the search icon); the text
   uses normal nav-text colour and turns accent on hover. */
.nav-deck {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none !important;
}
.nav-deck svg { display: block; flex-shrink: 0; }
.nav-deck:hover { color: var(--accent-hover); }
/* "Your" / "Newsdeck" stack on two tight lines to match the Tracking Deck link. */
.nav-deck span { line-height: 1.05; text-align: left; }

.dot { color: var(--accent); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 11px;
}

.nav-links a { font-size: 14px; font-weight: 500; }

/* === Nav search bar (Track a term) ===
   Sits between the logo and the nav-links. Flex-grows to fill available
   width on desktop; squashes to icon-only style on phones (see the mobile
   block at the bottom of this file). The Track button is .btn .btn-primary
   so it inherits the TLDR-green accent used by home-page CTAs. */
.nav-search {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  max-width: 540px;
  margin: 0 24px;
  gap: 0;
}
.nav-search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px 0 0 8px;
  border-right: none;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nav-search-input::placeholder { color: var(--text-muted); opacity: 0.85; }
.nav-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(16,185,129,0.18);
  z-index: 1;
}
.nav-search-btn.btn.btn-primary {
  border-radius: 0 8px 8px 0;
  padding: 8px 18px;
  font-size: 14px;
  flex-shrink: 0;
}

/* === Buttons === */

.btn {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none !important;
  transition: all 0.2s;
}

.btn-primary {
  background: var(--accent);
  color: white !important;
}
.btn-primary:hover { background: var(--accent-hover); }

.btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text) !important;
}
.btn-outline:hover { background: var(--bg); border-color: #ccc; }

.btn-lg { padding: 12px 32px; font-size: 16px; }

.btn-full { width: 100%; padding: 12px; font-size: 15px; }

/* === Hero === */

.hero {
  padding: 100px 24px 80px;
  text-align: center;
  background: linear-gradient(180deg, var(--accent-light) 0%, var(--bg) 100%);
}

[data-theme="dark"] .hero {
  background: linear-gradient(180deg, #0a1e3a 0%, #0b1120 100%);
}

.hero-content { max-width: 700px; margin: 0 auto; }

.hero h1 {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 20px;
}

.gradient-text {
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 18px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 32px;
}

.hero-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.cta-stats { font-size: 14px; color: var(--text-muted); }

/* === Hero Value Prop (compact, inside hero) === */

.hero-content {
  max-width: 700px;
  margin: 0 auto;
}

.hero-value-prop {
  margin-top: 28px;
}

.value-prop-mini {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 28px;
  display: inline-flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.value-prop-mini-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: var(--text);
  line-height: 1.5;
  font-weight: 500;
}

.value-prop-mini-item strong {
  color: var(--text);
  font-weight: 700;
}

.value-prop-mini-check {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #059669, #10b981);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(5,150,105,0.35);
}

.value-prop-cta {
  margin-top: 6px;
  align-self: flex-start;
}

.value-prop-cta-wrap {
  text-align: center;
  margin-top: 6px;
}

[data-theme="dark"] .value-prop-mini {
  background: rgba(21,29,51,0.85);
  border-color: #2a3558;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

[data-theme="dark"] .value-prop-mini-item {
  color: #e2e8f0;
}

[data-theme="dark"] .value-prop-mini-item strong {
  color: #fff;
}

/* === Proposition showcase — preview the live deck + reactions pre-signup ===
   Two sides: a slightly-tilted live-deck screenshot (bottom-faded where the
   cards are cropped) and, opposite it, a sample card showing a like + a
   comment. Both demo real Newsdeck features before the visitor signs up. */
.prop-showcase {
  padding: 40px 24px 72px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--accent-light) 100%);
  overflow: hidden;
}
[data-theme="dark"] .prop-showcase {
  background: linear-gradient(180deg, var(--bg) 0%, #0a1e3a 100%);
}
.prop-showcase-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.35fr 0.85fr;
  gap: 48px;
  align-items: start;
}
.prop-text h2 {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 12px;
}
.prop-text p {
  font-size: 17px;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 26px;
  max-width: 46ch;
}

/* LEFT — angled, bottom-faded deck screenshot */
.prop-deck-frame {
  position: relative;
  perspective: 1600px;
}
.prop-deck-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 30px 70px rgba(0,0,0,0.30), 0 8px 24px rgba(0,0,0,0.18);
  /* Fade the bottom where the columns are cropped, so the cut is intentional. */
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}

/* Graceful placeholder shown only if the screenshot hasn't been dropped in yet
   (img onerror adds .prop-deck-empty). Keeps the layout tidy pre-asset. */
.prop-deck-empty {
  min-height: 360px;
  border-radius: 14px;
  border: 1px dashed var(--border);
  background: linear-gradient(135deg, var(--accent-light), var(--card-bg));
  display: flex;
  align-items: center;
  justify-content: center;
}
.prop-deck-empty::after {
  content: "Live Newsdeck preview";
  color: var(--text-muted);
  font-weight: 600;
  font-size: 15px;
}

/* RIGHT — sample interactive card preview */
.prop-react { align-self: center; }
.prop-card {
  max-width: 360px;
  cursor: default;
  border-color: var(--accent) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,0.18);
}
.prop-card-reactions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 4px;
}
.prop-react-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: var(--tldr-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
}
.prop-react-pill.is-liked {
  color: #e11d48;
  border-color: rgba(225,29,72,0.45);
  background: rgba(225,29,72,0.08);
}
.prop-card-comment {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.prop-comment-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.prop-comment-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.prop-comment-name { font-size: 13px; font-weight: 700; color: var(--text); }
.prop-comment-text { font-size: 13.5px; color: var(--text); line-height: 1.45; }
.prop-comment-like { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

@media (max-width: 860px) {
  .prop-showcase-inner { grid-template-columns: 1fr; gap: 36px; }
  .prop-deck-img { transform: none; -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); }
  .prop-card { margin: 0 auto; }
  .prop-text p { max-width: none; }
}

/* === Categories === */

.categories-section {
  padding: 80px 24px;
  text-align: center;
}

.categories-section h2 { font-size: 32px; margin-bottom: 8px; }
.section-desc { color: var(--text-muted); margin-bottom: 40px; }

.category-grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.category-card {
  background: var(--category-bg);
  padding: 24px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  text-align: center;
  transition: all 0.2s;
}

.category-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(59,130,246,0.1);
  transform: translateY(-2px);
}

.category-icon { font-size: 28px; display: block; margin-bottom: 8px; }
.category-card h3 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.category-card p { font-size: 12px; color: var(--text-muted); }

/* === How it works === */

.how-it-works {
  padding: 80px 24px;
  background: var(--card-bg);
  text-align: center;
}

[data-theme="dark"] .how-it-works {
  background: #0f1729;
}

.how-it-works h2 { font-size: 32px; margin-bottom: 40px; }

.steps {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  max-width: 800px;
  margin: 0 auto;
}

.step { flex: 1; min-width: 200px; }
.step-number {
  width: 48px; height: 48px;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  margin: 0 auto 16px;
}

.step h3 { font-size: 18px; margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--text-muted); }

/* === Auth Pages === */

.auth-page { background: linear-gradient(135deg, var(--accent-light), var(--bg)); }

.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  padding: 24px;
}

.auth-card {
  background: var(--card-bg);
  padding: 40px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  width: 100%;
  max-width: 480px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

.auth-card h1 { font-size: 24px; margin-bottom: 4px; }
.auth-subtitle { color: var(--text-muted); margin-bottom: 24px; font-size: 14px; }

.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.form-group input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

.auth-footer { text-align: center; margin-top: 20px; font-size: 14px; color: var(--text-muted); }

/* === OAuth buttons on /login ===
   Divider row + two provider buttons. Brand-coloured but kept restrained
   so they don't outshout the primary email/password CTA above. */
.oauth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0 14px;
  color: var(--text-muted); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.6px;
}
.oauth-divider::before,
.oauth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.oauth-buttons { display: flex; flex-direction: column; gap: 10px; }
.btn-oauth {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 16px; border-radius: 8px;
  font-size: 14px; font-weight: 600;
  text-decoration: none !important;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  transition: border-color 0.15s, transform 0.05s;
}
.btn-oauth:hover { border-color: var(--accent); }
.btn-oauth:active { transform: translateY(1px); }
.btn-oauth .oauth-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-weight: 800; font-size: 12px;
  color: white;
}
.btn-oauth-google   .oauth-icon { background: #4285f4; }
.btn-oauth-facebook .oauth-icon { background: #1877f2; }

/* === Interest Picker === */

.interest-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.interest-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
  user-select: none;
}

.interest-chip:hover { border-color: var(--accent); background: var(--accent-light); }

.interest-chip input[type="checkbox"] { display: none; }

.interest-chip:has(input:checked) {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.interest-picker-controls {
  margin-bottom: 10px;
}

/* === Dashboard === */

.dashboard-container {
  max-width: 1800px;
  margin: 0 auto;
  padding: 32px 24px;
}

.digest-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
}

.digest-header h1 { font-size: 28px; }
.digest-subtitle { color: var(--text-muted); font-size: 15px; }

.stat-sep {
  color: var(--border);
  margin: 0 4px;
  font-weight: 700;
}

/* Period selector — plain text links for non-selected windows; the active
   window wears the same orange-gradient pill as .last-hour-filter.active
   so the two filter affordances read as a single visual family and the
   user can spot the active period at a glance. The wrapping panel keeps
   only its layout role (flex + gap) — no background or border. */
.period-selector { display: flex; gap: 10px; align-items: center; }

.period-btn {
  padding: 6px 4px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted) !important;
  text-decoration: none !important;
  background: transparent;
  border: none;
  transition: color 0.15s;
}

.period-btn:hover { color: var(--text) !important; }

.period-btn.active {
  /* Same gradient + glow as the Last Hour pill so both filters share one
     "this is the active view" visual language. */
  padding: 6px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff !important;
  font-weight: 700;
  border: 1px solid transparent;
  box-shadow: 0 0 12px rgba(239,68,68,0.4);
}

/* === Dashboard Column Layout === */

.carousel-wrapper {
  position: relative;
  margin: 0 32px;  /* room for arrows */
}

.carousel-track {
  display: flex;
  gap: 24px;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  align-items: flex-start;
}

.carousel-track-container {
  overflow: hidden;
  margin: 0 -12px;
  padding: 0 12px;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  font-size: 38px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(59,130,246,0.4);
  transition: all 0.2s ease;
  color: #fff;
  line-height: 0;
  user-select: none;
  -webkit-user-select: none;
}

/* === Digest Vertical Sections (replaces carousel) === */

.digest-sections {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.digest-topic-group {
  background: transparent;
}

.group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border);
}

.group-header .topic-icon { font-size: 22px; }
.group-header h2 { font-size: 20px; font-weight: 700; }

.group-articles {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.carousel-arrow:hover {
  background: var(--accent-hover);
  box-shadow: 0 8px 28px rgba(59,130,246,0.55);
  transform: translateY(-50%) scale(1.15);
}

.carousel-arrow:active {
  transform: translateY(-50%) scale(0.92);
  box-shadow: 0 2px 10px rgba(59,130,246,0.3);
}

.carousel-left { left: -26px; }
.carousel-right { right: -26px; }

.topic-column {
  min-width: 320px;
  max-width: 400px;
  flex: 0 0 320px;
  background: transparent;
}

.dashboard-columns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 24px;
  align-items: start;
}

.topic-column {
  background: transparent;
  break-inside: avoid;
}

/* Default: hide the mobile-only column-name pill on desktop. The mobile
   media query (~line 4216) overrides this to display:flex. Without this
   rule, the bare <div id="mobileColumnPill"> renders as a giant block
   element above every column on PC. */
.mobile-column-pill { display: none; }

.column-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border);
}

.column-header .topic-icon { font-size: 20px; }
.column-header h2 { font-size: 16px; font-weight: 700; }
.column-header .topic-link { margin-left: auto; font-size: 12px; font-weight: 500; }

/* Favourite star button in column header */
.fav-star {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--text-muted, #8a94b2);
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.fav-star:hover { color: #f59e0b; transform: scale(1.2); }
.fav-star.fav-active { color: #f59e0b; }

.article-count-badge {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--tag-bg);
  padding: 2px 8px;
  border-radius: 10px;
}

.column-articles {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  max-height: calc(100vh - 240px);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.column-articles::-webkit-scrollbar {
  width: 5px;
}
.column-articles::-webkit-scrollbar-track {
  background: transparent;
}
.column-articles::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 10px;
}

.column-articles .article-card {
  padding: 14px 16px;
  margin-bottom: 0;
}

.column-articles .article-title {
  font-size: 15px;
  margin-bottom: 6px;
}

.column-articles .article-summary {
  font-size: 13px;
  margin-bottom: 8px;
}

.column-articles .article-shortread {
  font-size: 12px;
}

.column-articles .article-implication {
  font-size: 12px;
  padding: 8px 12px;
}

.column-articles .article-details-block {
  font-size: 12px;
}

/* === Hype Bar === */

.hype-bar {
  height: 4px;
  background: var(--hype-bar-bg);
  border-radius: 2px;
  margin: 8px 0 6px;
  position: relative;
  overflow: hidden;
}

.hype-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  border-radius: 2px;
  transition: width 0.5s ease;
}

.hype-text {
  font-size: 10px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
}

.hype-pill {
  display: inline-block;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 12px;
  margin-left: 8px;
}

/* === Hype Row (bar + like button side by side) === */

.hype-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 4px;
}

.hype-row .hype-bar {
  flex: 1;
  margin: 0;
}

/* === Like Button === */

.like-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--like-btn-bg);
  border: 1px solid var(--like-btn-border);
  border-radius: 20px;
  padding: 4px 12px;
  cursor: pointer;
  font-size: 13px;
  color: #dc2626;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}

.like-btn:hover {
  background: var(--like-btn-hover-bg);
  border-color: var(--like-btn-hover-border);
  transform: scale(1.05);
}

.like-btn:active {
  transform: scale(0.92);
}

.like-btn.liked {
  background: #dc2626;
  border-color: #dc2626;
  color: white;
}

.like-icon {
  font-size: 14px;
  transition: transform 0.2s ease;
}

.like-btn.liked .like-icon {
  animation: likePulse 0.4s ease;
}

@keyframes likePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

.like-count {
  font-weight: 700;
  font-size: 12px;
}

/* === HOT OFF THE PRESS Badge (< 15 min old) === */

.hot-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: linear-gradient(135deg, #dc2626, #ea580c, #f59e0b);
  background-size: 200% 200%;
  color: white;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 2px 7px;
  border-radius: 4px;
  margin-right: 6px;
  position: relative;
  top: -1px;
  animation: hotBadgeGlow 1.4s ease-in-out infinite, hotBadgeShimmer 3s linear infinite;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}

@keyframes hotBadgeGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.55), 0 0 6px 1px rgba(220, 38, 38, 0.4); }
  50%      { box-shadow: 0 0 14px 4px rgba(234, 88, 12, 0.45), 0 0 20px 8px rgba(220, 38, 38, 0.25); }
}

@keyframes hotBadgeShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* === NEW Badge === */

.new-badge {
  display: inline-block;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 2px 7px;
  border-radius: 4px;
  margin-right: 6px;
  animation: newBadgeGlow 2s ease-in-out infinite;
  position: relative;
  top: -1px;
}

@keyframes newBadgeGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 0 8px 2px rgba(16, 185, 129, 0.25); }
}

.article-date-group {
  display: flex;
  align-items: center;
}

/* === Short Read === */

.article-shortread {
  background: var(--sr-bg);
  border-left: 3px solid var(--sr-border);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--sr-color);
  margin-bottom: 10px;
  line-height: 1.5;
}

.sr-label {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-right: 6px;
}

/* === Topic Groups (legacy, kept for topic page) === */

.topic-group { margin-bottom: 40px; }

.topic-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
}

.topic-icon { font-size: 24px; }
.topic-header h2 { font-size: 20px; font-weight: 700; }
.topic-link { margin-left: auto; font-size: 13px; font-weight: 500; }

/* === Article Cards === */

.article-card {
  background: var(--card-bg);
  padding: 20px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 12px;
  box-shadow: var(--card-shadow);
  transition: all 0.15s;
}

.article-card:hover { border-color: var(--accent); box-shadow: 0 2px 12px rgba(16, 185, 129, 0.1); }

/* === Performance: defer off-screen rendering on the big dashboard deck ===
   The deck can hold thousands of cards across ~44 columns, but only a handful
   are ever on screen. content-visibility:auto lets the browser SKIP layout +
   paint for off-screen cards (and, on desktop, whole off-screen columns) while
   keeping every card in the DOM — nothing is removed, JS/SSE still see them,
   the saving is purely deferred rendering. contain-intrinsic-size gives a size
   estimate so scrollbars stay sane until a card is actually rendered. */
.column-articles .article-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 460px;
}
@media (min-width: 769px) {
  /* Desktop carousel: columns are fixed-width (320px) and the card list is
     height-capped (internal scroll), so skipping the ~39 off-screen columns
     is safe and is the single biggest initial-render win. */
  .carousel-track .topic-column {
    content-visibility: auto;
    contain-intrinsic-size: 320px 760px;
  }
}

.article-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
}

.source-name {
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 11px;
}

.article-date { color: var(--text-muted); }

.article-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.4;
}

.article-summary {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 12px;
}

.article-implication {
  background: var(--tldr-bg);
  border-left: 3px solid var(--success);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--tldr-color);
  margin-bottom: 12px;
  line-height: 1.5;
}

.impl-label {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--success);
  margin-right: 6px;
}

.article-actions { margin-top: 4px; }

.source-link {
  font-size: 13px;
  font-weight: 500;
}

/* === Wider Reading Links === */

.article-related {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.related-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-right: 4px;
}

.related-link {
  font-size: 12px;
  padding: 3px 10px;
  background: var(--tag-bg);
  border-radius: 12px;
  color: var(--tag-color) !important;
  text-decoration: none !important;
  transition: all 0.15s;
}

.related-link:hover {
  background: var(--accent-light);
  color: var(--accent) !important;
}

/* === Empty State === */

.empty-state {
  text-align: center;
  padding: 80px 24px;
}

.empty-icon { font-size: 48px; margin-bottom: 16px; }
.empty-state h3 { font-size: 20px; margin-bottom: 8px; }
.empty-state p { color: var(--text-muted); margin-bottom: 24px; }

/* === Alert === */

.alert {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 20px;
}

.alert-success {
  background: #f0fdf4;
  color: #065f46;
  border: 1px solid #bbf7d0;
}

.alert-info {
  background: #eff6ff;
  color: #1e3a8a;
  border: 1px solid #bfdbfe;
}

.alert-danger {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* === Trending Banner === */

/* === Source Logos Banner === */

.sources-banner {
  padding: 20px 0 28px;
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.sources-banner-label {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.sources-track-wrapper {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}

.sources-track {
  display: flex;
  gap: 10px;
  /* Slowed from 35s → 60s — at 2x logo size the previous speed felt
     jittery and made it hard to recognise individual brands. */
  animation: scrollSources 60s linear infinite;
  width: max-content;
  padding: 4px 0;
}

.sources-track:hover {
  animation-play-state: paused;
}

@keyframes scrollSources {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.source-logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Padding bumped to match the 2× logo size — keeps proportional whitespace. */
  padding: 12px 22px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--lc, var(--accent));
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  user-select: none;
  letter-spacing: 0.2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  flex-shrink: 0;
  min-width: 48px;
  min-height: 36px;
}

/* Favicon inside the trusted-source badge — fixed render box keeps the marquee tidy.
 * onerror in the template replaces the <img> with a text node when the domain has
 * no favicon, so the source name still appears as a fallback. */
.source-logo-badge .source-logo-img {
  /* Doubled from 22px → 44px so the logos read clearly from across the room
     on the landing-page trust banner. Badge padding scales to match. */
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  vertical-align: middle;
}

/* Trending-card article thumbnail — replaces the interest emoji when imageUrl is present. */
.trending-thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--border);
  display: inline-block;
}

/* === Trending Section === */

.trending-section {
  padding: 60px 24px 40px;
  background: var(--trending-section-bg);
  overflow: hidden;
}

.trending-section h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 4px;
}

.trending-track-wrapper {
  overflow: hidden;
  margin: 20px -24px 0;
  padding: 4px 0;
}

.trending-track {
  display: flex;
  gap: 16px;
  /* 40 full-size cards × 2 passes is a much wider track than the old
     8-card strip — bump the duration so scroll speed (px/s) stays the
     same and each card is on screen long enough to read. */
  animation: scrollTrending 200s linear infinite;
  width: max-content;
}

@keyframes scrollTrending {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.trending-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  min-width: 320px;
  max-width: 400px;
  flex-shrink: 0;
  transition: all 0.2s;
}

.trending-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(59,130,246,0.1);
  transform: translateY(-2px);
}

.trending-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.trending-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trending-source {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
}

.trending-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trending-tldr {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.trending-age {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

.trending-link {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-light);
  border-radius: 50%;
  font-size: 14px;
  color: var(--accent) !important;
  text-decoration: none !important;
  transition: all 0.2s;
}

.trending-link:hover {
  background: var(--accent);
  color: white !important;
}

/* Trending meta row with NEW badge */
.trending-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.trending-new-badge {
  display: inline-block;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 1px 5px;
  border-radius: 3px;
  animation: trendingNewGlow 2s ease-in-out infinite;
}

@keyframes trendingNewGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 0 6px 1px rgba(16, 185, 129, 0.25); }
}

/* === Card Hero Image === */

.card-hero-image {
  margin: 10px -24px 14px;
  height: 190px;
  overflow: hidden;
}

.column-articles .card-hero-image {
  margin: 8px -16px 12px;
}

.card-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* === Details Block (article summary, below Longer Read) === */

.article-details-block {
  font-size: 13px;
  color: var(--text-muted);
  border-left: 2px solid var(--border);
  padding: 6px 10px;
  margin: 0 0 10px;
  line-height: 1.5;
}

.details-block-label {
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 3px;
  color: var(--text-muted);
}

.details-block-text {
  color: var(--text-muted);
}

/* === Footer === */

.footer {
  padding: 40px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

/* === Topic Page === */

.topic-page-header {
  margin-bottom: 32px;
}

.topic-page-header h1 { font-size: 28px; margin-bottom: 4px; }
.topic-page-header p { color: var(--text-muted); }

/* === Responsive === */

@media (max-width: 640px) {
  .hero h1 { font-size: 32px; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { flex-direction: column; }
  .digest-header { flex-direction: column; }
  .period-selector { width: 100%; }
  .period-btn { flex: 1; text-align: center; }
}

/* === Ticker Badges (Stock / Crypto) === */

.ticker-row {
  margin: 6px 0 4px;
}

.ticker-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 3px 12px 3px 10px;
  font-size: 12px;
  transition: all 0.2s;
}

[data-theme="dark"] .ticker-badge {
  background: #1e2942;
  border-color: #2a3558;
}

.ticker-badge.live {
  border-color: #86efac;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.15);
}

.ticker-badge.live::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22c55e;
  animation: livePulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.ticker-badge:hover {
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: 0 2px 8px rgba(59,130,246,0.15);
}

/* Crypto badges — amber/gold tint to distinguish from stock badges */
.ticker-badge.crypto-badge {
  border-color: #d97706;
  background: #fffbeb;
}
[data-theme="dark"] .ticker-badge.crypto-badge {
  border-color: #92400e;
  background: #1c1408;
}
.ticker-badge.crypto-badge::before {
  content: '⬡';
  font-size: 9px;
  color: #d97706;
  flex-shrink: 0;
  line-height: 1;
}
.ticker-badge.crypto-badge:hover {
  border-color: #f59e0b;
  background: #fef3c7;
  box-shadow: 0 2px 8px rgba(245,158,11,0.2);
}

/* Commodity price badges (oil, gas, gold, silver, etc.) */
.ticker-badge.commodity-badge {
  border-color: #b45309;
  background: #fff7ed;
}
[data-theme="dark"] .ticker-badge.commodity-badge {
  border-color: #78350f;
  background: #1c1100;
}
.ticker-badge.commodity-badge::before {
  content: '◈';
  font-size: 9px;
  color: #b45309;
  flex-shrink: 0;
  line-height: 1;
}
.ticker-badge.commodity-badge:hover {
  border-color: #d97706;
  background: #fef3c7;
  box-shadow: 0 2px 8px rgba(180,83,9,0.2);
}

.ticker-symbol {
  font-weight: 700;
  color: var(--text);
  font-size: 11px;
  letter-spacing: 0.3px;
}

.ticker-price {
  font-weight: 600;
  color: var(--text);
  font-size: 12px;
}

.ticker-change {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
}

.ticker-change.up {
  color: #059669;
  background: #ecfdf5;
}

.ticker-change.down {
  color: #dc2626;
  background: #fef2f2;
}

/* === Skills Tags === */

.skills-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.skills-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8b5cf6;
  margin-right: 4px;
}

.skill-tag {
  font-size: 11px;
  padding: 2px 8px;
  background: var(--skill-tag-bg);
  color: var(--skill-tag-color);
  border-radius: 10px;
  font-weight: 500;
  border: 1px solid var(--skill-tag-border);
}

/* === Feed Layout (signed-in landing page) === */

.home-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 32px;
}

.home-header {
  margin-bottom: 24px;
}

.home-header h1 { font-size: 28px; }
.home-subtitle { color: var(--text-muted); font-size: 15px; }

.feed-stack {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.feed-section {
  background: var(--card-bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 16px 20px;
}

.feed-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border);
}

.feed-section-header .topic-icon { font-size: 18px; }
.feed-section-header h2 { font-size: 16px; font-weight: 700; }

.feed-scroll-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}

.feed-scroll-wrapper::-webkit-scrollbar {
  height: 5px;
}
.feed-scroll-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.feed-scroll-wrapper::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 10px;
}

.feed-scroll-track {
  display: flex;
  gap: 16px;
  width: max-content;
  padding: 2px 0;
}

.feed-card {
  min-width: 280px;
  max-width: 300px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  transition: all 0.15s;
}

.feed-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(59,130,246,0.08);
  transform: translateY(-1px);
}

.feed-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 11px;
}

.feed-card-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feed-card-summary {
  font-size: 12px;
  color: var(--sr-color);
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feed-card-tldr {
  background: var(--tldr-bg);
  border-left: 3px solid var(--success);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 11px;
  color: #065f46;
  margin-bottom: 8px;
  line-height: 1.4;
}

.feed-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.feed-card-actions .source-link {
  font-size: 12px;
}

.feed-likes {
  margin-left: auto;
}

.like-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: #9ca3af;
  padding: 2px 6px;
  border-radius: 10px;
  transition: all 0.2s;
}

.like-btn-sm:hover {
  color: #dc2626;
  background: var(--like-btn-bg);
}

.like-btn-sm.liked {
  color: #dc2626;
}

.like-count-sm {
  font-weight: 700;
}

/* === TradingView Promo === */

.tradingview-promo {
  text-align: center;
  padding: 24px 16px;
  margin-top: 32px;
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border: 1px solid #bae6fd;
  border-radius: var(--radius);
  font-size: 13px;
  color: #0369a1;
}

[data-theme="dark"] .tradingview-promo {
  background: linear-gradient(135deg, #0f1729, #151d33);
  border-color: #2a3558;
  color: #7dd3fc;
}

.tradingview-promo p {
  margin-bottom: 12px;
}

.tradingview-promo .btn {
  background: #0284c7;
  color: white !important;
  border: none;
}

.tradingview-promo .btn:hover {
  background: #0369a1;
}

.btn-sm {
  padding: 6px 16px;
  font-size: 12px;
}

/* === Theme Toggle Button === */
.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  color: var(--text);
  padding: 0;
}

.theme-toggle:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  transform: scale(1.1);
}

/* === Toast Notification === */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #065f46;
  color: white;
  padding: 14px 20px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  z-index: 10000;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.35s ease;
  font-size: 14px;
  max-width: 360px;
}

.toast.toast-visible {
  transform: translateY(0);
  opacity: 1;
}

.toast.toast-hiding {
  transform: translateY(10px);
  opacity: 0;
}

.toast-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.toast-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toast-body strong {
  font-size: 14px;
}

.toast-body span {
  font-size: 12px;
  opacity: 0.85;
}

[data-theme="dark"] .toast {
  background: #065f46;
}

/* === Very New Card ( < 1 hour old ) === */
.article-card.very-new {
  border-color: #ef4444;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.35), 0 0 4px rgba(239, 68, 68, 0.2);
  animation: redGlow 2s ease-in-out infinite;
}

@keyframes redGlow {
  0%, 100% { box-shadow: 0 0 12px rgba(239, 68, 68, 0.35), 0 0 4px rgba(239, 68, 68, 0.2); }
  50% { box-shadow: 0 0 24px rgba(239, 68, 68, 0.55), 0 0 8px rgba(239, 68, 68, 0.35); }
}

[data-theme="dark"] .article-card.very-new {
  border-color: #f87171;
  box-shadow: 0 0 16px rgba(248, 113, 113, 0.4), 0 0 6px rgba(248, 113, 113, 0.25);
  animation: redGlowDark 2s ease-in-out infinite;
}

@keyframes redGlowDark {
  0%, 100% { box-shadow: 0 0 16px rgba(248, 113, 113, 0.4), 0 0 6px rgba(248, 113, 113, 0.25); }
  50% { box-shadow: 0 0 32px rgba(248, 113, 113, 0.6), 0 0 12px rgba(248, 113, 113, 0.4); }
}

/* === New article push animation === */
.article-card.article-push-in {
  animation: articleSlideIn 0.5s ease-out;
}

@keyframes articleSlideIn {
  0% { opacity: 0; transform: translateY(-20px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* === Stat counter change animation === */
@keyframes statBump {
  0% { transform: scale(1); }
  30% { transform: scale(1.35); color: var(--accent); }
  100% { transform: scale(1); }
}

.stat-bump {
  animation: statBump 0.4s ease-out;
  display: inline-block;
}

/* === LIVE badge pulse === */
@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.live-pulse {
  animation: livePulse 1.5s ease-in-out infinite;
}

/* === Feed Event Cards === */
.live-feed-type-levelup {
  color: #f59e0b;
}

.live-feed-type-registration {
  color: #8b5cf6;
}

.live-feed-levelup {
  border-color: #f59e0b !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.25), 0 0 6px rgba(245, 158, 11, 0.15);
  animation: levelUpGlow 2s ease-in-out infinite;
}

@keyframes levelUpGlow {
  0%, 100% { box-shadow: 0 0 16px rgba(245, 158, 11, 0.25), 0 0 6px rgba(245, 158, 11, 0.15); }
  50% { box-shadow: 0 0 28px rgba(245, 158, 11, 0.45), 0 0 12px rgba(245, 158, 11, 0.25); }
}

.live-feed-levelup-text {
  font-size: 15px;
  font-weight: 600;
}

.live-feed-level-badge {
  display: inline-block;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  font-size: 12px;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
  animation: levelBadgePulse 1.5s ease-in-out infinite;
}

@keyframes levelBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

[data-theme="dark"] .live-feed-levelup {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.3), 0 0 8px rgba(251, 191, 36, 0.15);
}

/* === Comment Avatar + Level === */
.comment-avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  position: relative;
}

.comment-user-level {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-light);
  padding: 1px 6px;
  border-radius: 8px;
  line-height: 1.3;
}

/* === Live Feed === */

.live-feed-container {
  /* Was max-width:800px — that capped the whole page including the new
     two-column .lf-main grid, which left the comments column ~36px wide
     (one letter per line) once the 220px mini-card and 380px trending
     aside took their cuts. Match .lf-main's own 1400px ceiling so the
     comments stream actually gets the breathing room the two-column
     layout was designed to give it. */
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 24px;
}

.live-feed-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.live-feed-header h1 {
  font-size: 28px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.live-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #ef4444;
  border-radius: 50%;
}

.live-feed-subtitle {
  color: var(--text-muted);
  font-size: 14px;
  margin-top: 4px;
}

.live-feed-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

.live-stat-online {
  color: #10b981;
  font-weight: 600;
}

.live-feed-stream {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.live-feed-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.live-feed-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.live-feed-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: grid;
  grid-template-columns: 40px 1fr 117px;
  gap: 12px;
  transition: all 0.3s ease;
}

.live-feed-thumb {
  width: 117px;
  height: 91px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: var(--tag-bg);
  flex-shrink: 0;
  border: 1px solid var(--border);
}

.live-feed-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: var(--accent-light);
}

.live-feed-new {
  animation: feedSlideIn 0.4s ease-out;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.15);
}

@keyframes feedSlideIn {
  0% { opacity: 0; transform: translateY(-12px); }
  100% { opacity: 1; transform: translateY(0); }
}

.live-feed-avatar {
  font-size: 28px;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.live-feed-body {
  flex: 1;
  min-width: 0;
}

.live-feed-type {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.live-feed-type-comment {
  color: var(--text-muted);
}

.live-feed-type-article {
  color: var(--accent);
}

.live-feed-author {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.live-feed-time {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 12px;
}

.live-feed-text {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 8px;
  word-break: break-word;
}

.live-feed-article-title {
  font-weight: 600;
  font-size: 15px;
}

.live-feed-article-tldr {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
  padding: 8px 12px;
  background: var(--tldr-bg);
  border-radius: 8px;
}

.live-feed-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}

.live-feed-article {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-feed-article:hover {
  text-decoration: underline;
}

.live-feed-reply-tag {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--tag-bg);
  padding: 2px 8px;
  border-radius: 10px;
  display: inline-block;
  margin-bottom: 4px;
}

.live-feed-like-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.2s;
  flex-shrink: 0;
}

.live-feed-like-btn:hover {
  border-color: #dc2626;
  color: #dc2626;
  background: #fef2f2;
}

.live-feed-like-btn.liked {
  border-color: #dc2626;
  color: #dc2626;
  background: #fef2f2;
}

.live-feed-new-article-badge {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 8px;
  margin-left: 6px;
  animation: livePulse 1.5s ease-in-out infinite;
}

[data-theme="dark"] .live-feed-new {
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.25);
}

[data-theme="dark"] .live-feed-article-tldr {
  background: var(--tldr-bg);
}

[data-theme="dark"] .live-feed-like-btn:hover {
  background: #2a1a1a;
  border-color: #f87171;
  color: #f87171;
}

[data-theme="dark"] .live-feed-like-btn.liked {
  background: #2a1a1a;
  border-color: #f87171;
  color: #f87171;
}

/* === Comment Bar on Cards === */
.comment-bar {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
}

.comment-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}

.comment-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}

.comment-count {
  font-weight: 600;
}

/* === Comment Modal === */
.comment-modal {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.comment-modal.comment-modal-open {
  display: flex;
}

.comment-modal-backdrop {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
}

.comment-modal-panel {
  position: relative;
  background: var(--card-bg);
  border-radius: var(--radius);
  width: 90%;
  max-width: 560px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(0,0,0,0.2);
  border: 1px solid var(--border);
}

.comment-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.comment-modal-header h3 {
  font-size: 16px;
  font-weight: 700;
}

.comment-modal-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s;
}

.comment-modal-close:hover {
  background: var(--bg);
  color: var(--text);
}

.comment-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  max-height: 50vh;
}

.comment-modal-footer {
  display: flex;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  align-items: flex-end;
}

.comment-input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  resize: none;
  background: var(--card-bg);
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
  font-family: var(--font);
}

.comment-input:focus {
  border-color: var(--accent);
}

/* === Comment Items === */
.comment-item {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

[data-theme="dark"] .comment-item {
  border-bottom-color: #1e2942;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-author {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.comment-time {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 8px;
}

.comment-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 6px;
}

.comment-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.comment-like-btn, .comment-reply-btn {
  background: none;
  border: none;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: 6px;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.comment-like-btn:hover, .comment-reply-btn:hover {
  color: var(--accent);
  background: var(--accent-light);
}

.comment-like-btn.liked {
  color: #dc2626;
}

.comment-delete-btn {
  background: none;
  border: none;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: 6px;
  transition: all 0.2s;
  opacity: 0.4;
  margin-left: auto;
}

.comment-delete-btn:hover {
  opacity: 1;
  color: #dc2626;
  background: #fef2f2;
}

[data-theme="dark"] .comment-delete-btn:hover {
  background: #2a1a1a;
}

.comment-like-count {
  font-weight: 600;
}

.comment-loading, .comment-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 14px;
}

[data-theme="dark"] .comment-modal-panel {
  border-color: #2a3558;
}

/* === Avatar Picker === */
.avatar-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.avatar-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--card-bg);
}

.avatar-option:hover {
  border-color: var(--accent);
  background: var(--accent-light);
  transform: scale(1.1);
}

.avatar-option input[type="radio"] { display: none; }

.avatar-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
}

.avatar-icon {
  font-size: 20px;
  line-height: 1;
}

/* === Trending Stats Row === */
.trending-stats-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.trending-engagement {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: auto;
  white-space: nowrap;
}

/* === Nav User === */
.nav-user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.nav-avatar {
  font-size: 24px;
  line-height: 1;
}

.nav-username {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* === Registration Success === */
.auth-success {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 24px;
}

.success-card {
  text-align: center;
  max-width: 400px;
}

.success-icon {
  font-size: 64px;
  margin-bottom: 16px;
  animation: successBounce 0.6s ease;
}

@keyframes successBounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.success-card h1 {
  font-size: 28px;
  margin-bottom: 8px;
}

.success-card p {
  color: var(--text-muted);
  margin-bottom: 24px;
}

.success-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* === Nav LIVE Button === */
.nav-live-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: #dc2626;
  color: white !important;
  padding: 4px 9px !important;
  border-radius: 20px !important;
  white-space: nowrap;
  text-decoration: none !important;
  animation: livePulseBtn 2s ease-in-out infinite;
  letter-spacing: 0.5px;
}

.nav-live-btn:hover {
  background: #b91c1c !important;
  transform: scale(1.05);
}

@keyframes livePulseBtn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
  50% { box-shadow: 0 0 8px 2px rgba(220, 38, 38, 0.3); }
}

/* === Live Feed Page === */
.live-feed-container {
  /* Duplicate of the earlier definition kept in sync — see comment above
     line ~1900. Cap raised from 800px → 1400px so the two-column
     stats/comments layout has room. */
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 24px;
}

.live-feed-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.live-feed-header h1 {
  font-size: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.live-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: #dc2626;
  border-radius: 50%;
  animation: liveDotPulse 1.5s ease-in-out infinite;
}

@keyframes liveDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.live-feed-subtitle {
  color: var(--text-muted);
  font-size: 14px;
  margin-top: 4px;
}

.live-feed-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.live-stat {
  color: var(--text-muted);
}

.live-stat-online {
  color: #22c55e;
  font-weight: 600;
}

.live-stat-sep {
  color: var(--border);
}

.live-feed-stream {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.live-feed-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  gap: 14px;
  transition: all 0.3s ease;
  animation: feedSlideIn 0.4s ease;
}

@keyframes feedSlideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.live-feed-new {
  border-left: 3px solid var(--accent);
  box-shadow: 0 2px 12px rgba(59,130,246,0.1);
}

[data-theme="dark"] .live-feed-new {
  box-shadow: 0 2px 12px rgba(16, 185, 129, 0.12);
}

.live-feed-avatar {
  font-size: 32px;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-radius: 50%;
  border: 2px solid var(--border);
}

.live-feed-body {
  flex: 1;
  min-width: 0;
}

.live-feed-author {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.live-feed-time {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 8px;
}

.live-feed-reply-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.live-feed-text {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 8px;
}

.live-feed-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
}

.live-feed-article {
  color: var(--text-muted) !important;
  text-decoration: none !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 400px;
}

.live-feed-article:hover {
  color: var(--accent) !important;
}

.live-feed-likes {
  color: var(--text-muted);
  margin-left: auto;
  flex-shrink: 0;
}

.live-feed-empty {
  text-align: center;
  padding: 80px 24px;
}

.live-feed-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.live-feed-empty h3 {
  font-size: 20px;
  margin-bottom: 8px;
}

.live-feed-empty p {
  color: var(--text-muted);
}

/* === Comment Avatar === */
.comment-avatar {
  font-size: 24px;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-radius: 50%;
  border: 1px solid var(--border);
}

.comment-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.comment-item-content {
  flex: 1;
  min-width: 0;
}

/* === Mini Chart Tooltip === */
.ticker-chart-tooltip {
  position: fixed;
  z-index: 9999;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  min-width: 200px;
}
.ticker-chart-tooltip.visible { opacity: 1; }
.ticker-chart-tooltip .chart-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.ticker-chart-tooltip .chart-svg {
  display: block;
  width: 200px;
  height: 70px;
}
.ticker-chart-tooltip .chart-change { font-size: 11px; font-weight: 600; }
.ticker-chart-tooltip .chart-change.up { color: #059669; }
.ticker-chart-tooltip .chart-change.down { color: #dc2626; }
.ticker-chart-tooltip .chart-source {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 6px;
  text-align: right;
  font-style: italic;
}
[data-theme="dark"] .ticker-chart-tooltip {
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  border-color: #2a3558;
}
/* === Achievements & Level Badge Styles === */
.level-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white; font-size: 12px; font-weight: 800;
  padding: 4px 9px; border-radius: 10px; margin-left: 4px;
  letter-spacing: 0.3px;
}
.level-hero { text-align: center; padding: 40px 0 32px; }
.level-circle { display: inline-flex; align-items: center; justify-content: center;
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white; font-size: 32px; font-weight: 900;
  box-shadow: 0 4px 24px rgba(245, 158, 11, 0.35);
  margin-bottom: 8px; }
.level-circle.small { width: 40px; height: 40px; font-size: 16px; }
.xp-text { font-size: 14px; color: var(--text-muted); margin: 4px 0 12px; }
.xp-progress-container { max-width: 300px; margin: 0 auto; }
.xp-progress-bar { height: 8px; background: var(--hype-bar-bg); border-radius: 4px; overflow: hidden; }
.xp-progress-fill { height: 100%; background: linear-gradient(90deg, #f59e0b, #d97706); border-radius: 4px; transition: width 0.5s ease; }
.xp-progress-text { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.achievements-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 16px; }
.achievement-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; box-shadow: var(--card-shadow); position: relative; transition: all 0.2s; }
.achievement-card.completed { border-color: var(--success); background: var(--tldr-bg); }
.achievement-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.achievement-icon { font-size: 24px; }
.achievement-name { font-weight: 700; font-size: 14px; }
.achievement-desc { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; line-height: 1.4; }
.achievement-progress { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.achievement-bar { height: 6px; background: var(--hype-bar-bg); border-radius: 3px; overflow: hidden; }
.achievement-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.5s ease; }
.achievement-bar-fill.done { background: linear-gradient(90deg, #10b981, #059669); }
.achievement-xp { position: absolute; top: 16px; right: 16px; font-size: 11px; font-weight: 700;
  background: linear-gradient(135deg, #f59e0b, #d97706); color: white; padding: 2px 8px; border-radius: 8px; }
.achievement-check { position: absolute; bottom: 16px; right: 16px; font-size: 18px; }
.category-header { display: flex; align-items: center; gap: 8px; margin: 32px 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--border); }
.category-header h2 { font-size: 18px; font-weight: 700; }
.category-count { font-size: 12px; color: var(--text-muted); background: var(--tag-bg); padding: 2px 10px; border-radius: 10px; }
/* === Avatar Picker Trigger Button === */
.avatar-picker-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--card-bg);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  user-select: none;
}
.avatar-picker-trigger:hover {
  border-color: var(--accent);
  background: var(--accent-light, #eef2ff);
}
.avatar-picker-trigger .trigger-icon { font-size: 28px; line-height: 1; }
.avatar-picker-trigger .trigger-label { color: var(--text-muted); font-size: 13px; font-weight: 400; }
.avatar-picker-trigger .trigger-arrow { margin-left: auto; font-size: 12px; color: var(--text-muted); transition: transform 0.2s; }
.avatar-picker-trigger.open .trigger-arrow { transform: rotate(180deg); }

/* === Avatar Picker Modal Overlay === */
.avatar-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.avatar-modal-overlay.active { display: flex; }

/* === Avatar Picker Modal === */
.avatar-modal {
  background: var(--card-bg);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  max-width: 480px;
  width: 90vw;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: avatarModalIn 0.2s ease;
}
@keyframes avatarModalIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.avatar-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.avatar-modal-header h3 { font-size: 18px; font-weight: 700; margin: 0; }
.avatar-modal-close {
  background: none; border: none; font-size: 20px; cursor: pointer;
  padding: 4px 8px; border-radius: 8px; color: var(--text-muted);
  transition: all 0.15s; line-height: 1;
}
.avatar-modal-close:hover { background: var(--tag-bg); color: var(--text); }

/* Scrollable grid */
.avatar-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px;
  overflow-y: auto;
  padding: 4px;
  max-height: calc(70vh - 80px);
}

/* Avatar cell */
.avatar-modal-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--card-bg);
  font-size: 22px;
  user-select: none;
}
.avatar-modal-cell:hover {
  border-color: var(--accent);
  background: var(--accent-light, #eef2ff);
  transform: scale(1.15);
  z-index: 1;
}
.avatar-modal-cell.selected {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

/* Category heading */
.avatar-modal-cat {
  grid-column: 1 / -1;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 8px 0 2px;
  border-bottom: 1px solid var(--border);
  margin-top: 4px;
}
.avatar-modal-cat:first-child { margin-top: 0; }

/* === Max Level Avatar Border === */
.comment-avatar-wrap.max-level .comment-avatar {
  border: 2px solid #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4), 0 0 3px rgba(245, 158, 11, 0.2);
}

.comment-avatar-wrap.max-level::after {
  content: '👑';
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 14px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

[data-theme="dark"] .comment-avatar-wrap.max-level .comment-avatar {
  border-color: #fbbf24;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.5), 0 0 4px rgba(251, 191, 36, 0.3);
}

/* === Top-2 comments preview (above the comment toggle on each card) === */
.top-comments-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 4px;
}
.top-comment-preview {
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.top-comment-preview:hover {
  background: var(--card-bg);
  border-left-color: #fbbf24;
}
.tcp-avatar {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.tcp-body {
  flex: 1;
  min-width: 0;
}
.tcp-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted, #9aa4b2);
  margin-bottom: 2px;
}
.tcp-name { font-weight: 600; }
.tcp-likes { color: #ef4444; font-weight: 600; }
.tcp-text {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === Last Hour period-button extras ===========================
   Last Hour is now a regular period peer (same .period-btn styling, same
   orange-pill .active state, mutually exclusive with 24h/7d/30d). Only
   visual extra: the red dot indicator beside the text — always present,
   pulses when the period is the active one. */
.period-btn-hour {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.period-btn-hour .lh-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #ef4444;
}
.period-btn-hour.active .lh-dot {
  background: #fff;
  animation: lhPulse 1s ease-in-out infinite;
}
@keyframes lhPulse {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:0.5; transform:scale(0.8); }
}

/* Hidden state when card is filtered out by Last Hour */
.article-card.lh-hidden { display: none !important; }
/* Hidden state for a whole column when every card inside got filtered out */
.topic-column.lh-hidden { display: none !important; }

/* === Account hero (settings + achievements pages) ===
   Large circular avatar that mirrors the look of a comment-card avatar but
   sized as a profile portrait, paired with the user's display name and
   level pill. The .account-hero-avatar wrapper is given the
   avatar-border-{silver|gold|none} class server-side so the same tier ring
   that shows in the comments thread also rings the hero — no extra logic
   needed when the user crosses Lv.10 / Lv.20. */
.account-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 28px;
  box-shadow: var(--card-shadow);
}
.account-hero-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  line-height: 1;
  flex-shrink: 0;
}
.account-hero-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.account-hero-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}
/* Inline display-name editor — sits in the same .account-hero-meta column
   as the name + level pill so swapping into edit mode doesn't shift layout. */
.account-hero-name-wrap { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.account-hero-name-view { display: inline-flex; align-items: center; gap: 8px; }
.display-name-edit-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px 8px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  color: var(--text-muted);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.display-name-edit-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--tldr-bg);
}
.account-hero-name-edit { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.display-name-input {
  font-size: 18px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  min-width: 220px;
}
.display-name-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
}
.btn.btn-sm { padding: 6px 12px; font-size: 13px; }
.display-name-msg {
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
}
.display-name-msg.ok  { color: var(--accent); }
.display-name-msg.err { color: #dc2626; }
[data-theme="dark"] .display-name-msg.err { color: #f87171; }
.display-name-locked {
  font-size: 14px;
  color: var(--text-muted);
  cursor: help;
  user-select: none;
}
.display-name-hint {
  width: 100%;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  font-style: italic;
}
.account-hero-level { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.account-hero-level-pill {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  font-weight: 800;
  font-size: 14px;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.3px;
}
.account-hero-tier {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}
.account-hero-avatar-picker { margin-top: 4px; }
/* Compact, ghost-style trigger when the picker sits inside the hero —
   the surrounding card already carries border + bg, so the trigger only
   needs to suggest "tap me" without restating chrome. */
.account-hero-avatar-picker .avatar-picker-trigger {
  padding: 4px 10px 4px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  background: transparent;
  gap: 6px;
}
.account-hero-avatar-picker .avatar-picker-trigger .trigger-icon { font-size: 18px; }
.account-hero-avatar-picker .avatar-picker-trigger .trigger-label { font-size: 12px; }
.account-hero-avatar-picker .avatar-picker-trigger .trigger-arrow { font-size: 9px; }

@media (max-width: 480px) {
  .account-hero { padding: 14px 16px; gap: 14px; }
  .account-hero-avatar { width: 64px; height: 64px; font-size: 34px; }
  .account-hero-name { font-size: 18px; }
}

/* === Avatar tier borders (Tasks: silver at L10, gold at L20) === */
.avatar-border-silver,
.avatar-border-gold {
  display: inline-block;
  padding: 2px;
  border-radius: 50%;
  background-clip: padding-box;
  position: relative;
}
.avatar-border-silver {
  box-shadow:
    0 0 0 2px #c0c0c0,
    0 0 12px rgba(192, 192, 192, 0.55);
}
.avatar-border-gold {
  box-shadow:
    0 0 0 2px #ffd700,
    0 0 14px rgba(255, 215, 0, 0.65);
  animation: goldPulse 2.2s ease-in-out infinite;
}
@keyframes goldPulse {
  0%,100% { box-shadow: 0 0 0 2px #ffd700, 0 0 14px rgba(255,215,0,0.65); }
  50%     { box-shadow: 0 0 0 2px #fff7c2, 0 0 22px rgba(255,215,0,0.85); }
}
/* "none" tier — no extra styling, just normal avatar */
.avatar-border-none { /* intentional no-op */ }

/* === Silver / Gold milestone progress (achievements page) === */
.milestone-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 24px;
  padding: 16px 18px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.milestone-row h3 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted, #9aa4b2);
}
.milestone {
  display: flex;
  align-items: center;
  gap: 12px;
}
.milestone-label {
  font-size: 14px;
  font-weight: 600;
  min-width: 160px;
}
.milestone-bar {
  flex: 1;
  height: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
}
.milestone-bar-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.4s;
}
.milestone-bar-fill.silver {
  background: linear-gradient(90deg, #d6d6d6, #f4f4f4, #c0c0c0);
}
.milestone-bar-fill.gold {
  background: linear-gradient(90deg, #ffd700, #fff7c2, #ffaa00);
  animation: goldShimmer 3s ease-in-out infinite;
}
@keyframes goldShimmer {
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.25); }
}
.milestone-pct {
  font-size: 13px;
  font-weight: 700;
  min-width: 50px;
  text-align: right;
}
.milestone.achieved .milestone-label::after { content: " ✓"; color: #22c55e; }

/* === Nav user dropdown (replaces standalone Settings/Achievements nav links) === */
.nav-user-menu {
  position: relative;
  display: inline-block;
}
.nav-user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 10px 4px 6px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.nav-user-trigger:hover,
.nav-user-menu.open .nav-user-trigger {
  background: var(--card-bg);
  border-color: var(--border);
}
.nav-user-caret {
  font-size: 12px;
  opacity: 0.7;
  transition: transform 0.15s;
  margin-left: 2px;
}
.nav-user-menu.open .nav-user-caret { transform: rotate(180deg); }
.nav-user-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  padding: 6px;
  display: none;
  z-index: 1000;
}
.nav-user-menu.open .nav-user-dropdown { display: block; }
.nav-user-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: background 0.12s;
}
.nav-user-dropdown a:hover {
  background: var(--bg);
}
.nav-user-dropdown a.active {
  background: var(--bg);
  color: var(--accent);
}
.nav-user-dropdown-icon {
  font-size: 18px;
  width: 22px;
  text-align: center;
}

/* Sign-out item inside the user dropdown. Same layout shape as the
   anchor rows so it sits flush, but with a subtle red tint on hover so
   the destructive action reads as different from "go to settings". */
.nav-user-signout {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 12px;
  transition: background 0.12s, color 0.12s;
}
.nav-user-signout:hover {
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
}

/* === Sign-out confirm modal ===
   Centered card on a dimmed backdrop. Hidden by default; .open toggles
   visibility. Built on demand by nav-user-menu.js. */
.signout-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10050;
  padding: 16px;
}
.signout-confirm-overlay.open { display: flex; }
.signout-confirm-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 26px;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
  animation: signoutCardIn 0.16s ease-out;
}
.signout-confirm-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text);
}
.signout-confirm-card p {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 18px;
  line-height: 1.45;
}
.signout-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
@keyframes signoutCardIn {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

/* === Email-verification banner on dashboard (top of container) === */
.verify-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin: 0 0 18px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(245, 158, 11, 0.08));
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-left: 4px solid #f59e0b;
  border-radius: 10px;
}
.verify-banner-icon { font-size: 26px; line-height: 1; flex-shrink: 0; }
.verify-banner-text { flex: 1; font-size: 14px; line-height: 1.5; }
.verify-banner-status {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted, #9aa4b2);
  min-width: 110px;
}

/* === Resend row on /registered "Check your email" page === */
.resend-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-muted, #6b7280);
}
.resend-status { font-weight: 600; color: var(--accent); min-width: 60px; }
.auth-secondary-text { font-size: 13px; color: var(--text-muted, #6b7280); margin-top: 8px; }

/* ============================================================
 * Bell-icon notifications (nav bar)
 * ============================================================ */
.nav-notif {
  position: relative;
  display: inline-block;
}
.nav-notif-bell {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  color: var(--text);
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  position: relative;
}
.nav-notif-bell:hover,
.nav-notif.open .nav-notif-bell {
  background: var(--card-bg);
  border-color: var(--border);
}
.nav-notif-bell.has-unread { animation: notifBellShake 1.6s ease-in-out 0s 1; }
@keyframes notifBellShake {
  0%, 100% { transform: rotate(0); }
  10%, 30%, 50% { transform: rotate(-14deg); }
  20%, 40%, 60% { transform: rotate(14deg); }
  70% { transform: rotate(0); }
}
.nav-notif-badge {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #dc2626;
  color: white;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  display: none;
  box-shadow: 0 0 0 2px var(--bg);
}
.nav-notif-badge.has-unread { display: inline-block; }
.nav-notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 380px;
  max-width: calc(100vw - 24px);
  max-height: 480px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.28);
  display: none;
  z-index: 1000;
  overflow: hidden;
  flex-direction: column;
}
.nav-notif.open .nav-notif-panel { display: flex; }
.nav-notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}
.nav-notif-header button {
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.nav-notif-header button:hover { background: var(--bg); }
.nav-notif-list {
  overflow-y: auto;
  max-height: 420px;
  padding: 4px 0;
}
.notif-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  padding: 12px 14px;
  cursor: pointer;
  color: var(--text);
  position: relative;
  border-bottom: 1px solid var(--border);
}
.notif-row:last-child { border-bottom: none; }
.notif-row:hover { background: var(--bg); }
.notif-row.unread { background: rgba(99, 102, 241, 0.06); }
.notif-row-icon {
  font-size: 22px;
  width: 28px;
  flex-shrink: 0;
  text-align: center;
  line-height: 1;
  margin-top: 2px;
}
.notif-row-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.notif-row-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.notif-row-sub {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-row-time {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  margin-top: 2px;
}
.notif-row-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dc2626;
  flex-shrink: 0;
  margin-top: 8px;
}
.notif-empty {
  padding: 32px 18px;
  text-align: center;
  color: var(--text-muted, #6b7280);
}
.notif-empty-icon { font-size: 32px; margin-bottom: 8px; opacity: 0.5; }
.notif-empty-sub { font-size: 12px; margin-top: 4px; opacity: 0.8; }

/* Flash an article card when arriving from a comment-like notification. */
.notif-card-flash {
  animation: notifCardFlash 2.4s ease-out 1;
}
@keyframes notifCardFlash {
  0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
  30%  { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.3); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

/* ============================================================
 * Trending strip on landing page — full dashboard cards in a
 * marquee, but display-only. No hover lift, no clicks, no
 * pointer cursor, no red NEW border. Visitors see what the real
 * dashboard looks like before signing up.
 * ============================================================ */
.trending-preview .trending-track {
  /* Override gap to give cards breathing room when shown full-size. */
  gap: 24px;
  align-items: stretch;
}
.trending-preview .article-card {
  /* Fixed width so cards behave like a horizontal strip rather than
     stretching to fill. Matches the dashboard column width feel,
     scaled to ~80% via the `zoom` below — cards are previews, not the
     full reading experience. */
  width: 360px;
  flex-shrink: 0;
  margin: 0;
  /* Cards are visual previews only — block every interaction. */
  pointer-events: none;
  cursor: default;
  user-select: none;
  /* Shrink the entire card (font sizes, padding, ticker badges, etc.)
     to 80% of dashboard size. `zoom` reduces the rendered box AND its
     contents proportionally, with no layout overflow side-effects. */
  zoom: 0.8;
}
.trending-preview .article-card * {
  pointer-events: none !important;
  cursor: default !important;
}
/* Nuke the dashboard's hover lift / glow inside the preview strip
   so the marquee never visually shifts under a hovering mouse. */
.trending-preview .article-card:hover {
  transform: none !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}
/* No red border for "very new" — landing page stays calm. We don't
   apply the very-new class server-side, but this is belt-and-braces
   in case a future change adds it. */
.trending-preview .article-card.very-new {
  border-color: var(--border) !important;
  box-shadow: none !important;
}
/* Pause the auto-scroll on hover so visitors can read a card they
   spotted, even though they can't click into it. */
.trending-preview .trending-track:hover {
  animation-play-state: paused;
}

/* ============================================================
 * MOBILE RESPONSIVE — single comprehensive @media block.
 *
 * Strategy: TLDR is desktop-first (multi-column carousel,
 * fixed-width nav, side-by-side hero). The phone experience
 * collapses to a single column you swipe between interests on,
 * scroll vertically within for cards. Touch targets ≥ 44px,
 * achievement popups suppressed (too disruptive on small
 * screens), comment-like notifications suppressed in the bell
 * (handled client-side in notifications.js).
 * ============================================================ */
@media (max-width: 768px) {

  /* ── Nav bar: compact, no username text, smaller buttons ── */
  .navbar { padding: 6px 0; }
  .nav-container {
    padding: 0 12px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .nav-links {
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  /* Mobile: scale the wordmark down while keeping the my/main ratio. */
  .logo-main { font-size: 22px; }
  .logo-my { font-size: 13px; width: 0.95em; height: 1.65em; }
  /* Hide the username text on phones, keep avatar + level chip */
  .nav-username { display: none !important; }
  .nav-user-trigger { padding: 4px 6px; gap: 4px; }
  .nav-user-caret { display: none; }
  /* Tighten secondary buttons */
  .nav-live-btn,
  .nav-links .btn,
  .nav-links a.btn { padding: 4px 8px !important; font-size: 11px !important; }
  /* Bell stays visible */
  .nav-notif-bell { width: 38px; height: 38px; font-size: 19px; }
  /* Notification panel: don't overflow the screen */
  .nav-notif-panel {
    width: calc(100vw - 16px);
    max-width: 360px;
    right: -8px;
  }
  /* Theme toggle small enough to keep on the bar */
  .theme-toggle { padding: 4px 6px !important; font-size: 16px; }

  /* Nav search: drops to its own row below the logo, full-width. */
  .nav-search {
    order: 99;            /* push below the logo + user controls on flex-wrap */
    flex: 0 0 100%;
    margin: 6px 0 0 0;
    max-width: none;
  }
  .nav-search-input { padding: 6px 10px; font-size: 12px; }
  .nav-search-btn.btn.btn-primary { padding: 6px 12px !important; font-size: 12px !important; }

  /* ── Landing page hero: stack vertically ── */
  .hero {
    flex-direction: column;
    padding: 24px 16px 16px;
    gap: 16px;
  }
  .hero-content h1 { font-size: 28px; line-height: 1.15; }
  .hero-subtitle { font-size: 14px; line-height: 1.5; }
  .hero-cta { flex-direction: column; gap: 12px; align-items: stretch; }
  .hero-cta .btn { width: 100%; text-align: center; }
  .cta-stats { font-size: 12px; text-align: center; line-height: 1.6; }
  .hero-value-prop { width: 100%; }
  .value-prop-mini { padding: 14px; gap: 10px; }
  .value-prop-mini-item { font-size: 13px; }

  /* ── Trending strip on landing page ── */
  .trending-section { padding: 32px 12px 28px; }
  .trending-section h2 { font-size: 20px; line-height: 1.3; }
  .trending-track { gap: 14px; }
  /* Make the preview cards thumb-sized; keep them readable.
     The desktop `zoom: 0.8` is replaced with a tighter 0.7 here
     so the strip fits more cards horizontally on a phone. */
  .trending-preview .article-card {
    width: 280px;
    zoom: 0.7;
  }

  /* ── Trusted-sources banner: smaller logos on mobile ── */
  .source-logo-badge { padding: 8px 14px; }
  .source-logo-badge .source-logo-img { width: 32px; height: 32px; }
  .sources-banner-label { font-size: 9px; padding: 0 12px; }

  /* ── Categories / how-it-works on landing ── */
  .categories-section, .how-it-works { padding: 28px 12px; }
  .category-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .category-card { padding: 12px 10px; }
  .category-card h3 { font-size: 13px; }
  .category-card p { font-size: 11px; }
  .category-icon { font-size: 26px; }
  .steps { flex-direction: column !important; gap: 18px; }
  .step { width: 100%; padding: 14px; }

  /* ── Dashboard: single-column swipeable carousel ── */
  .dashboard-container { padding: 8px 0 24px; }
  .dashboard-header {
    padding: 0 12px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .dashboard-header h1 { font-size: 20px; }
  .dashboard-header .period-buttons { width: 100%; flex-wrap: wrap; }
  .period-btn { font-size: 12px !important; padding: 6px 10px !important; }

  /* Hide carousel arrows — swipe handles it on touch */
  .carousel-arrow { display: none !important; }
  .carousel-wrapper { margin: 0 8px; }
  /* On phones we drop the JS-driven transform carousel and let the browser
     scroll the container natively — it's the only swipe behaviour that
     reliably tracks finger movement across all mobile browsers. Required
     bits: overflow-x:auto so native scroll engages, scroll-snap-type so
     the drag settles aligned to a column, and -webkit-overflow-scrolling
     for iOS momentum. The track resets its inline transform/transition
     (set by dashboard.js for desktop) so the two systems don't fight. */
  .carousel-track-container {
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: visible;
    /* `proximity` instead of `mandatory`: only snap when the user is clearly
       close to a column boundary. With mandatory, a vertical scroll with even
       a few pixels of horizontal drift would snap to the next column on
       finger-release — felt over-sensitive on the dashboard. Proximity keeps
       real left/right swipes feeling crisp (they easily clear the proximity
       threshold) while ignoring incidental horizontal motion during a scroll
       down. overscroll-behavior-x:contain stops a horizontal swipe at the
       last/first column from bouncing the whole page sideways. */
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .carousel-track-container::-webkit-scrollbar { display: none; }
  .carousel-track {
    gap: 12px;
    transform: none !important;
    transition: none !important;
  }
  /* One column == full viewport width minus container margins */
  .topic-column {
    min-width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    flex: 0 0 calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;
    scroll-snap-align: start;
  }
  /* Per-column headers are HIDDEN on mobile — replaced by a single fixed
     `.mobile-column-pill` element below the navbar that updates as the user
     swipes between columns. This restores native body-scroll + horizontal
     swipe behaviour (the internal-scroll approach we tried before fought
     with the carousel's touch capture, making it impossible to swipe once
     you'd scrolled into articles). The pill is the "always-visible" column
     indicator the per-column header used to be. */
  .column-header { display: none; }
  .column-articles {
    max-height: none;  /* page scroll, not internal scroll */
    gap: 10px;
  }
  /* The always-visible column indicator. position:fixed pins it to the
     viewport (just below the sticky .navbar), so the active topic name is
     visible regardless of how far the user has scrolled. JS updates the
     icon/name/favourite state on horizontal carousel scroll. */
  .mobile-column-pill {
    /* Override the desktop default (display:none) — only on mobile do we
       actually render the fixed column-name pill. */
    display: flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    /* Sits right below the sticky navbar. The actual navbar height varies on
       mobile because the search bar wraps to a second row (flex-wrap) — JS
       measures the real navbar.bottom at load/resize and exposes it via the
       `--mobile-nav-h` custom property. 92px is the fallback for the
       wrapped two-row case if JS hasn't run yet. */
    top: var(--mobile-nav-h, 92px);
    left: 0;
    right: 0;
    z-index: 90;
    padding: 8px 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.35);
  }
  [data-theme="dark"] .mobile-column-pill {
    box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.6);
  }
  .mobile-column-pill .topic-icon { font-size: 20px; line-height: 1; }
  .mobile-column-pill h2 {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-column-pill .article-count-badge { font-size: 11px; }
  /* Push the carousel down by the pill's height (~46px) so the first article
     of each column isn't hidden behind the fixed pill on initial render. */
  .carousel-wrapper { margin-top: 46px; }
  .column-articles .article-card { padding: 12px 14px; }
  .article-title { font-size: 14px; line-height: 1.3; }
  .article-implication, .article-shortread { font-size: 13px; }
  .card-hero-image img { border-radius: 6px; }

  /* Touch-friendly buttons — like, comment, source link */
  .like-btn, .comment-toggle, .source-link {
    min-height: 36px;
    padding: 8px 10px;
  }
  .like-btn { font-size: 13px; }
  .ticker-badge { font-size: 11px; padding: 3px 8px; }

  /* Mobile swipe-affordance hint above the first column (added by JS) */
  .mobile-swipe-hint {
    display: block;
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
    padding: 4px 0 6px;
    opacity: 0.7;
    pointer-events: none;
  }

  /* ── Live feed mobile ── */
  .live-feed-container { padding: 12px; }
  .live-feed-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .live-feed-header h1 { font-size: 20px; }
  .live-feed-card { padding: 12px; font-size: 13px; }

  /* ── Settings / achievements pages ── */
  .settings-container, .achievements-container { padding: 12px; }
  .achievements-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
  }
  .achievement-card { padding: 10px; font-size: 12px; }

  /* ── Modals & popups: confine to viewport ── */
  .comment-modal, .modal-content, .popout {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    margin: 8px !important;
  }

  /* ── Suppress achievement popups on mobile (too disruptive) ── */
  #achievementPopup,
  .achievement-toast,
  .level-up-toast { display: none !important; }

  /* Comment-like notification rows in the bell dropdown are hidden
     client-side via notifications.js (viewport check). The bell still
     surfaces level-ups and achievements as requested. */

  /* Footer compact */
  .footer { padding: 16px 12px; font-size: 12px; }
}

/* Extra-small phones — squeeze a bit more */
@media (max-width: 380px) {
  .hero-content h1 { font-size: 24px; }
  .nav-notif-bell { width: 34px; height: 34px; font-size: 17px; }
  .source-logo-badge .source-logo-img { width: 28px; height: 28px; }
  .trending-preview .article-card { width: 260px; }
}

/* ============================================================
 * Compact interest chips on the landing page
 * Replaces the verbose card grid (icon + name + description per
 * cell, 5 rows tall) with a single wrap-flow row of pills so the
 * "Choose your interests" section becomes a glance, not a scroll.
 * ============================================================ */
.categories-section { padding: 56px 24px 64px; }
.category-chips {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.category-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--category-bg);
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
  cursor: default;
  user-select: none;
}
.category-chip:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  background: var(--card-bg);
}
.category-chip-icon {
  font-size: 16px;
  line-height: 1;
}
.category-chip-name {
  line-height: 1;
  white-space: nowrap;
}

/* Mobile: tighter pills */
@media (max-width: 768px) {
  .categories-section { padding: 32px 12px; }
  .category-chips { gap: 6px; }
  .category-chip { padding: 6px 10px; font-size: 12px; }
  .category-chip-icon { font-size: 14px; }
}

/* ============================================================
 * LIVE FEED OVERHAUL — Fun Stats panel + redesigned comment card
 *
 * Each comment card is now a 3-column flex row:
 *   [avatar + level chip] [ comment body ] [ mini article card ]
 *
 * The Fun Stats panel sits between the page header and the stream
 * and pulses tiles whose number changed since the last 10s poll.
 * ============================================================ */

.lf-stats-panel {
  padding: 14px 18px 18px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  /* Sits inside .lf-right-col now (the right grid cell of .lf-main), so it
     follows the column's full width rather than centering itself. */
  margin: 0 0 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.lf-stats-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.4px;
  margin: 2px 0 12px;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.85;
}
.lf-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.lf-stat-tile {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
  position: relative;
}
.lf-stat-tile:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(16,185,129,0.1);
}
.lf-stat-loading {
  color: var(--text-muted);
  font-size: 12px;
  grid-column: 1 / -1;
  justify-content: center;
  align-items: center;
}
.lf-stat-icon {
  font-size: 20px;
  line-height: 1;
}
.lf-stat-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2px;
}
.lf-stat-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}
.lf-stat-delta {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(16,185,129,0.10);
  padding: 2px 6px;
  border-radius: 6px;
  margin-top: 2px;
}
.lf-stat-delta-static {
  background: transparent;
  color: var(--text-muted);
  font-weight: 600;
  padding: 0;
}
@keyframes lfStatPulse {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,0.55); }
  60%  { box-shadow: 0 0 0 12px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.lf-stat-pulse { animation: lfStatPulse 1.6s ease-out 1; }

/* ── Redesigned comment card ─────────────────────────────────────── */

.lf-comment-card {
  display: flex;
  gap: 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
  align-items: stretch;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.lf-comment-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}
.lf-author-col {
  flex-shrink: 0;
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.lf-author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.lf-author-level {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--accent);
  background: var(--tldr-bg);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 2px 8px;
  text-align: center;
  min-width: 44px;
}
.lf-comment-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lf-comment-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.lf-comment-author {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.lf-reply-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: var(--tldr-bg);
  padding: 1px 6px;
  border-radius: 4px;
}
.lf-comment-time {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
}
.lf-comment-text {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  word-wrap: break-word;
}
.lf-comment-actions {
  margin-top: 4px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.lf-comment-actions .live-feed-like-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.lf-comment-actions .live-feed-like-btn:hover {
  border-color: #dc2626;
  color: #dc2626;
}
.lf-comment-actions .live-feed-like-btn.liked {
  border-color: #dc2626;
  color: #dc2626;
  background: rgba(220,38,38,0.06);
}

/* ── Mini article card on the right ──────────────────────────────── */

.lf-mini-card {
  flex-shrink: 0;
  width: 220px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  color: var(--text);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.lf-mini-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
  text-decoration: none !important;
}
.lf-mini-card-hero {
  height: 90px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg);
  position: relative;
}
.lf-mini-card-hero-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--tldr-bg), var(--bg));
}
.lf-mini-card-hero-fallback span { font-size: 36px; opacity: 0.6; }
.lf-mini-card-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lf-mini-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
}
.lf-mini-card-interest { font-size: 13px; }
.lf-mini-card-source {
  letter-spacing: 0.4px;
}
.lf-mini-card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lf-mini-card-tldr {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lf-mini-card-tldr .impl-label {
  font-weight: 800;
  color: var(--accent);
  margin-right: 3px;
}

/* ── Mobile: stack the 3 columns vertically ──────────────────────── */
@media (max-width: 768px) {
  .lf-stats-panel { margin: 14px 12px 16px; padding: 10px 12px; }
  .lf-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .lf-stat-value { font-size: 18px; }
  .lf-comment-card {
    flex-direction: column;
    gap: 10px;
    padding: 12px;
  }
  /* Comment cards stack vertically on mobile, so their author column reads as
     a header row (avatar + level side by side). Scoped to comment cards only
     so it no longer bleeds onto the event/achievement cards below. */
  .lf-comment-card .lf-author-col {
    flex-direction: row;
    width: auto;
    justify-content: flex-start;
    gap: 10px;
  }
  .lf-author-avatar { width: 40px; height: 40px; font-size: 20px; }
  .lf-mini-card { width: 100%; }
  .lf-mini-card-hero { height: 110px; }

  /* Event & achievement cards keep the [author col | body] row, but the
     author column must sit flush with the TOP of the body. The base
     .live-feed-card uses align-items:stretch, which on a tall achievement
     card let the avatar + level chip float to the vertical centre and read
     as misaligned. Pin the cross-axis to flex-start and keep avatar stacked
     above the level chip in a tidy fixed-width column. */
  .live-feed-event-card {
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
  }
  .live-feed-event-card .lf-author-col {
    flex-direction: column;
    width: 46px;
    gap: 4px;
    justify-content: flex-start;
  }
  .live-feed-event-card .lf-author-level {
    min-width: 0;
    width: 100%;
    padding: 2px 4px;
  }

  /* Achievement card: the chip is an inline-flex pill that previously dropped
     below the "earned" lead-in (baseline alignment). Lay the text row out as
     a centred flex line so the chip aligns with the text before it. */
  .live-feed-achievement-card .live-feed-text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
  }
  .live-feed-achievement-card .achievement-chip { margin: 0; }
}

/* ============================================================
 * LIVE FEED — phase 2: two-column layout (trending | stream),
 * stat descriptions, comment density reduction, level-up de-jazz.
 * ============================================================ */

/* Two-column container — trending on left, event stream on right */
.lf-main {
  display: grid;
  grid-template-columns: minmax(320px, 380px) 1fr;
  gap: 24px;
  margin-top: 8px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 16px;
}

/* Right-hand column: Fun Stats panel stacked above the comments stream so
   both sit parallel to the sticky Top Cards aside on the left. Gives the
   comments stream the full residual page width — comment cards can now
   breathe instead of being squeezed by the trending strip. */
.lf-right-col {
  display: flex;
  flex-direction: column;
  min-width: 0; /* allow grid child to shrink so comments don't overflow */
}

/* ── Emoji picker popup (shared, both pages) ─────────────────────────── */
.emoji-picker-popup {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  padding: 8px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  max-width: 320px;
}
.emoji-picker-btn {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  padding: 4px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.12s;
}
.emoji-picker-btn:hover { background: var(--tldr-bg); }
.comment-emoji-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  margin-right: 6px;
  transition: background 0.12s, border-color 0.12s;
}
.comment-emoji-btn:hover { background: var(--tldr-bg); border-color: var(--accent); }
@media (max-width: 480px) {
  .emoji-picker-popup { grid-template-columns: repeat(8, 1fr); max-width: 280px; }
  .emoji-picker-btn { font-size: 18px; }
}

/* Trending column — sticky, scroll-locked so it doesn't push the page.
   Background uses the page bg (--bg) rather than --card-bg so the
   individual trending cards inside (which sit on --card-bg) pop visually
   against the column's darker surround, mirroring how cards look against
   the live feed's page background. */
.lf-trending-col {
  position: sticky;
  top: 14px;
  align-self: start;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
}
.lf-trending-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
  /* Subtle gradient that lands on the column's new --bg so the header
     blends into the darker column body. */
  background: linear-gradient(180deg, var(--tldr-bg), var(--bg));
}
.lf-trending-header h2 {
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 2px;
  letter-spacing: 0.3px;
}
.lf-trending-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.lf-trending-list {
  overflow-y: auto;
  padding: 12px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.lf-trending-list::-webkit-scrollbar { width: 5px; }
.lf-trending-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.lf-trending-loading,
.lf-trending-empty {
  padding: 24px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

/* Trending cards — same look as dashboard, scaled to fit the narrow column */
.lf-trending-card {
  padding: 12px 14px !important;
  font-size: 13px;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.lf-trending-card .article-title {
  font-size: 14px;
  margin-bottom: 6px;
}
.lf-trending-card .card-hero-image img { border-radius: 6px; }
/* The base .card-hero-image uses margin:-24px to bleed into the dashboard
   card's 24px side padding. Trending cards only have 14px side padding, so
   we need a tighter bleed here — otherwise the image overhangs the card
   edge by ~10px on each side, which is the "wider than the card" effect. */
.lf-trending-card .card-hero-image { margin: 8px -14px 10px; }
.lf-trending-card .article-implication,
.lf-trending-card .article-shortread { font-size: 12px; }
.lf-trending-card .ticker-row { gap: 4px; flex-wrap: wrap; }
.lf-trending-card .hype-bar { height: 6px; }

/* Brief border glow when a card becomes the new #1 */
@keyframes lfNewLeader {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
  35%       { box-shadow: 0 0 0 5px rgba(16,185,129,0.4); }
}
.lf-trending-new-leader { animation: lfNewLeader 2s ease-out 1; }

/* ── Stat tile description (replaces the +N today delta) ─────────── */
.lf-stat-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
  margin-top: 4px;
}

/* Stronger pulse cue — the value number also flashes green briefly */
@keyframes lfStatValueFlash {
  0%   { color: var(--accent); transform: scale(1.08); }
  100% { color: var(--text);   transform: scale(1); }
}
.lf-stat-pulse .lf-stat-value {
  animation: lfStatValueFlash 1.2s ease-out 1;
  display: inline-block;
}

/* ── Comment card sizing ─────────────────────────────────────────────
   Earlier these were ~20% smaller for density. Reverted toward the
   original sizing now that the two-column layout gives the stream the
   full right-column width — text needs to read comfortably at a glance,
   not be packed in. Comment body, intro line ("X commented on a Y
   card") and like button all step up. */
.lf-comment-card {
  padding: 12px 16px;
  margin-bottom: 10px;
  gap: 14px;
}
.lf-author-col { width: 56px; gap: 5px; }
.lf-author-avatar { width: 44px; height: 44px; font-size: 22px; }
.lf-author-level {
  font-size: 10px;
  padding: 2px 8px;
  min-width: 42px;
}
.lf-comment-col { gap: 6px; }
.lf-comment-intro {
  font-size: 14px;
  color: var(--text);
  line-height: 1.4;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
}
.lf-comment-intro strong { font-weight: 700; }
.lf-comment-intro-verb { color: var(--text-muted); }
.lf-comment-intro-interest { color: var(--accent); }
.lf-comment-intro .lf-comment-time {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
}
.lf-comment-text {
  font-size: 15px;
  line-height: 1.45;
}
.lf-comment-actions { margin-top: 4px; }
.lf-comment-actions .live-feed-like-btn {
  padding: 4px 12px;
  font-size: 12px;
}
/* Mini card a touch shorter to match the new comment height */
.lf-mini-card-hero { height: 78px; }
.lf-mini-card-body { padding: 8px 10px 10px; gap: 3px; }
.lf-mini-card-title { font-size: 11.5px; }
.lf-mini-card-tldr { font-size: 10.5px; -webkit-line-clamp: 2; }

/* ── Level-up event de-jazzed ────────────────────────────────────── */
.live-feed-card.live-feed-event-card { /* shared base */ }
.live-feed-type-levelup {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.live-feed-type-achievement {
  font-size: 11px;
  font-weight: 700;
  color: #d97706;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* ── Achievement event card ──────────────────────────────────────────
   Reuses .lf-author-col / .lf-author-avatar from the comment-card layout
   so avatar + level chip sit on the left, matching the visual rhythm of
   the comments stream. The achievement name itself wears a chip with a
   gold-tinted border and a hover tooltip rendering the description. */
.live-feed-achievement-card .live-feed-body {
  flex: 1;
  min-width: 0;
}
.achievement-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  margin: 0 2px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(217,119,6,0.18));
  border: 1px solid rgba(245,158,11,0.45);
  color: #92400e;
  font-weight: 700;
  font-size: 13px;
  position: relative;
  cursor: help;
  /* Suppress default browser tooltip — we render our own (.achievement-tooltip). */
}
[data-theme="dark"] .achievement-chip {
  background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(217,119,6,0.28));
  color: #fcd34d;
}
.achievement-chip-icon { font-size: 14px; }
.achievement-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--card-bg);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  padding: 8px 12px;
  border-radius: 8px;
  white-space: normal;
  width: max-content;
  max-width: 280px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  z-index: 50;
}
.achievement-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--text);
}
.achievement-chip:hover .achievement-tooltip,
.achievement-chip:focus-visible .achievement-tooltip {
  opacity: 1;
}
.live-feed-level-badge {
  display: inline-block;
  background: var(--tldr-bg);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

/* ── Mobile: collapse two-column to single column ────────────────── */
@media (max-width: 768px) {
  .lf-main {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 8px;
  }
  /* Trending becomes a horizontal scroller above the feed on phones —
     visitors can swipe through the most-engaging cards before reading
     the live stream below. Sticky disabled (no room for it). */
  .lf-trending-col {
    position: relative;
    max-height: none;
  }
  .lf-trending-list {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 12px;
    scroll-snap-type: x mandatory;
  }
  .lf-trending-list::-webkit-scrollbar { height: 5px; width: auto; }
  .lf-trending-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
  .lf-comment-card { padding: 10px 12px; }
  .lf-comment-col { min-width: 0; }
  .lf-comment-intro .lf-comment-time { margin-left: 0; width: 100%; }
}

@media (max-width: 480px) {
  .lf-trending-card { flex: 0 0 85%; }
}

/* === Tug-of-War Hype Bar (likes vs dislikes) ===========================
   Rendered when a card uses the .hype-tow markup. The bar stays centred
   with a visible centre tick; .hype-bar-fill-like grows out to the RIGHT,
   .hype-bar-fill-dislike grows out to the LEFT. Each side capped at 50%
   width so the centre line never disappears. Falls back to the legacy
   single-direction .hype-bar-fill when the new markup isn't present
   (handled by JS — see renderTugOfWar in dashboard.js). */

.hype-row.hype-tow {
  gap: 8px;
}

.hype-bar.hype-bar-tow {
  position: relative;
  height: 8px;
  background: var(--hype-bar-bg);
  border-radius: 4px;
  overflow: visible;          /* let the centre tick + glow extend slightly */
}

.hype-bar-tow .hype-bar-center {
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--text-muted);
  opacity: 0.55;
  transform: translateX(-50%);
  border-radius: 1px;
  z-index: 2;
  pointer-events: none;
}

.hype-bar-tow .hype-bar-fill-like,
.hype-bar-tow .hype-bar-fill-dislike {
  position: absolute;
  top: 0;
  bottom: 0;
  max-width: 50%;
  height: 100%;
  transition: width 0.45s cubic-bezier(.4,1.4,.5,1);
  border-radius: 4px;
}
.hype-bar-tow .hype-bar-fill-like {
  left: 50%;
  background: linear-gradient(90deg, #fb7185, #dc2626);
}
.hype-bar-tow .hype-bar-fill-dislike {
  right: 50%;
  background: linear-gradient(270deg, #38bdf8, #1e3a8a);
}

/* .hype-bar-tow .hype-text removed — the counts are already visible on the
   like / dislike buttons either side of the bar. If a stale tug-of-war
   markup site still emits the span, it falls back to normal text flow
   (harmless visually). */

/* === Dislike Button (mirror of .like-btn, broken-heart 💔) =========== */

.dislike-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--like-btn-bg);
  border: 1px solid var(--like-btn-border);
  border-radius: 20px;
  padding: 4px 12px;
  cursor: pointer;
  font-size: 13px;
  color: #1d4ed8;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}
.dislike-btn:hover {
  background: var(--like-btn-hover-bg);
  border-color: #93c5fd;
  transform: scale(1.05);
}
.dislike-btn:active { transform: scale(0.92); }
.dislike-btn.disliked {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: white;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.18);
}
.dislike-icon {
  font-size: 14px;
  transition: transform 0.2s ease;
}
.dislike-btn.disliked .dislike-icon {
  animation: likePulse 0.4s ease;
}
.dislike-count {
  font-weight: 700;
  font-size: 12px;
}

/* Subtle glow on the like button while liked, mirroring the dislike glow
   so both reactions feel consistent without changing your beloved liked
   colour styling. */
.like-btn.liked {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}

/* === Track page — multi-column deck =================================== */

.track-page .track-header h1 {
  margin-bottom: 4px;
}

.track-promo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px auto 18px;
  padding: 10px 16px;
  background: var(--accent-bg, rgba(16, 185, 129, 0.08));
  border: 1px dashed var(--accent, #10b981);
  border-radius: 12px;
  color: var(--text, #1f2937);
  font-size: 13.5px;
  max-width: 760px;
}
.track-promo-icon { font-size: 18px; }
.track-promo-text strong { color: var(--accent, #10b981); }

.track-deck {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  margin: 16px auto 32px;
  padding: 0 16px;
  max-width: 1400px;
  flex-wrap: wrap;
}
.track-deck .track-column {
  flex: 0 1 420px;
  min-width: 320px;
  max-width: 460px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 14px 6px;
  display: flex;
  flex-direction: column;
}
.track-deck-1 .track-column { flex-basis: 520px; max-width: 560px; }
.track-deck-2 .track-column { flex-basis: 460px; max-width: 500px; }

.track-column-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.track-column-header h2 {
  font-size: 16px;
  margin: 0;
  flex: 1;
  text-transform: capitalize;
}
.track-column-close {
  text-decoration: none;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  padding: 0 6px;
  border-radius: 50%;
  transition: background .15s, color .15s;
}
.track-column-close:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.track-column-articles {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 78vh;
  overflow-y: auto;
  padding-right: 4px;
}
.track-column-empty {
  text-align: center;
  padding: 28px 12px;
  color: var(--text-muted);
}
.track-column-empty .empty-icon {
  font-size: 32px;
  margin-bottom: 6px;
}

.track-empty {
  max-width: 600px;
  margin: 48px auto;
}

@media (max-width: 980px) {
  .track-deck { gap: 14px; }
  .track-deck .track-column { flex-basis: 100%; max-width: 100%; }
  .track-column-articles { max-height: none; }
}

/* === Landing-page multi-track promo banner ============================ */
.landing-track-promo {
  margin: 40px auto;
  padding: 28px 22px;
  max-width: 880px;
  text-align: center;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.10), rgba(56, 189, 248, 0.10));
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 18px;
}
.landing-track-promo h2 {
  margin: 0 0 10px;
  font-size: 22px;
}
.landing-track-promo p {
  margin: 0 auto 14px;
  max-width: 620px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.55;
}
.landing-track-promo .landing-track-cta {
  display: inline-block;
  margin-top: 6px;
}

/* === Live-feed: trending-tracks tile rendering ======================== */
.lf-stat-tile-terms .lf-stat-terms {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.lf-stat-tile-terms .lf-stat-term {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  background: rgba(16, 185, 129, 0.12);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: capitalize;
}
.lf-stat-tile-terms .lf-stat-term-rank {
  color: var(--accent, #10b981);
  font-size: 11px;
  opacity: 0.7;
}

/* === Compact dislike (home.html feed cards) ===========================
   Sibling of .like-btn-sm — same shape so the two react buttons sit
   together in the narrow feed-card actions row. */
.dislike-btn-sm {
  background: none;
  border: 1px solid var(--like-btn-border);
  border-radius: 12px;
  padding: 2px 8px;
  cursor: pointer;
  font-size: 12px;
  color: #1d4ed8;
  margin-right: 4px;
  transition: all 0.15s ease;
  line-height: 1;
}
.dislike-btn-sm:hover {
  border-color: #93c5fd;
  background: rgba(29, 78, 216, 0.06);
}
.dislike-btn-sm.disliked {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: white;
}
.dislike-count-sm {
  font-weight: 700;
  font-size: 11px;
}

/* Variant of .track-promo used when the deck is at the 3-column cap —
   warns the user that a new search will reset the deck (so co-occurrence
   data stays clean for the association model). */
.track-promo.track-promo-full {
  border-style: solid;
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.10);
}
.track-promo.track-promo-full .track-promo-text strong { color: #1d4ed8; }